(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (div
      :sx-sse "/sx/(geography.(hypermedia.(reference.(api.sse-time))))"
      :sx-sse-swap "time"
      :sx-swap "innerHTML"
      :sx-on:sx:sseError "document.getElementById('ref-evt-sseerr-status').textContent = 'Disconnected'; document.getElementById('ref-evt-sseerr-status').className = 'inline-block px-2 py-0.5 rounded text-xs bg-red-100 text-red-700'"
      :sx-on:sx:sseOpen "document.getElementById('ref-evt-sseerr-status').textContent = 'Connected'; document.getElementById('ref-evt-sseerr-status').className = 'inline-block px-2 py-0.5 rounded text-xs bg-emerald-100 text-emerald-700'"
      (div
        (~tw :tokens "flex items-center gap-3")
        (span
          :id "ref-evt-sseerr-status"
          (~tw :tokens "inline-block px-2 py-0.5 rounded text-xs bg-amber-100 text-amber-700")
          "Connecting...")
        (span (~tw :tokens "text-sm text-stone-500") "SSE stream")))
    (p
      (~tw :tokens "text-xs text-stone-400")
      "If the SSE connection drops, the badge turns red via sx:sseError.")))