feat(dashboard): hash routing + health check polling

- Hash-based URL routing (#threads, #threads/{id}, #workflows)
  for bookmarkable/shareable thread links
- Health check polls every 10s with reconnecting state
- useHashRoute hook for clean route management

Closes #128

packages/dashboard/src/app.tsx

@@ -5,12 +5,10 @@ import { StatusBar } from "./components/status-bar.tsx";
 import { ThreadDetail } from "./components/thread-detail.tsx";
 import { ThreadList } from "./components/thread-list.tsx";
 import { WorkflowList } from "./components/workflow-list.tsx";
-
-type View = "threads" | "workflows";
+import { useHashRoute } from "./use-hash-route.ts";
 
 export function App() {
-  const [view, setView] = useState<View>("threads");
-  const [selectedThread, setSelectedThread] = useState<string | null>(null);
+  const { view, threadId, setView, setThreadId } = useHashRoute();
   const [showRun, setShowRun] = useState(false);
 
   return (
@@ -19,9 +17,9 @@ export function App() {
       <main className="flex-1 overflow-hidden flex flex-col">
         <StatusBar onRun={() => setShowRun(true)} />
         <div className="flex-1 overflow-auto p-6">
-          {view === "threads" && !selectedThread && <ThreadList onSelect={setSelectedThread} />}
-          {view === "threads" && selectedThread && (
-            <ThreadDetail threadId={selectedThread} onBack={() => setSelectedThread(null)} />
+          {view === "threads" && threadId === null && <ThreadList onSelect={setThreadId} />}
+          {view === "threads" && threadId !== null && (
+            <ThreadDetail threadId={threadId} onBack={() => setThreadId(null)} />
           )}
           {view === "workflows" && <WorkflowList />}
         </div>
@@ -31,8 +29,7 @@ export function App() {
           onClose={() => setShowRun(false)}
           onCreated={(id) => {
             setShowRun(false);
-            setView("threads");
-            setSelectedThread(id);
+            setThreadId(id);
           }}
         />
       )}

packages/dashboard/src/components/status-bar.tsx

@@ -1,12 +1,47 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { getHealth } from "../api.ts";
-import { useFetch } from "../hooks.ts";
+
+type HealthStatus = "connected" | "disconnected" | "reconnecting";
 
 type Props = {
   onRun: () => void;
 };
 
+function statusLabel(status: HealthStatus): { text: string; color: string } {
+  if (status === "connected") {
+    return { text: "● Connected", color: "var(--color-success)" };
+  }
+  if (status === "reconnecting") {
+    return { text: "● Reconnecting...", color: "var(--color-warning, #f59e0b)" };
+  }
+  return { text: "● Offline", color: "var(--color-error)" };
+}
+
 export function StatusBar({ onRun }: Props) {
-  const health = useFetch(() => getHealth(), []);
+  const [status, setStatus] = useState<HealthStatus>("disconnected");
+  const wasConnectedRef = useRef(false);
+
+  const checkHealth = useCallback(async () => {
+    try {
+      await getHealth();
+      wasConnectedRef.current = true;
+      setStatus("connected");
+    } catch {
+      if (wasConnectedRef.current) {
+        setStatus("reconnecting");
+      } else {
+        setStatus("disconnected");
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    checkHealth();
+    const interval = setInterval(checkHealth, 10_000);
+    return () => clearInterval(interval);
+  }, [checkHealth]);
+
+  const label = statusLabel(status);
 
   return (
     <div
@@ -24,15 +59,7 @@ export function StatusBar({ onRun }: Props) {
           ▶ Run Thread
         </button>
       </div>
-      <span>
-        {health.status === "loading" && "⏳ Connecting..."}
-        {health.status === "ok" && (
-          <span style={{ color: "var(--color-success)" }}>● Connected</span>
-        )}
-        {health.status === "error" && (
-          <span style={{ color: "var(--color-error)" }}>● Offline</span>
-        )}
-      </span>
+      <span style={{ color: label.color }}>{label.text}</span>
     </div>
   );
 }

packages/dashboard/src/components/thread-detail.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getThread, killThread, pauseThread, resumeThread } from "../api.ts";
 import { useFetch } from "../hooks.ts";
+import { useSSE } from "../use-sse.ts";
 
 type Props = {
   threadId: string;
@@ -8,8 +9,22 @@ type Props = {
 };
 
 export function ThreadDetail({ threadId, onBack }: Props) {
+  const sse = useSSE(threadId);
   const { status, data, error } = useFetch(() => getThread(threadId), [threadId]);
   const [actionStatus, setActionStatus] = useState<string | null>(null);
+  const recordsEndRef = useRef<HTMLDivElement>(null);
+
+  const liveActive = sse.connected && !sse.completed;
+  const records = liveActive
+    ? sse.records
+    : status === "ok"
+      ? data.records
+      : ([] as typeof sse.records);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when the rendered record list grows
+  useEffect(() => {
+    recordsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [records.length]);
 
   async function handleAction(action: "kill" | "pause" | "resume") {
     setActionStatus(`${action}ing...`);
@@ -61,20 +76,34 @@ export function ThreadDetail({ threadId, onBack }: Props) {
         </div>
       </div>
 
-      <h2 className="text-xl font-semibold mb-2 font-mono">{threadId}</h2>
+      <h2 className="text-xl font-semibold mb-2 font-mono flex items-center gap-2 flex-wrap">
+        <span>{threadId}</span>
+        {sse.connected && (
+          <span
+            className="text-xs font-medium px-2 py-0.5 rounded"
+            style={{ background: "var(--color-success)", color: "var(--color-bg)" }}
+          >
+            Live
+          </span>
+        )}
+      </h2>
       {actionStatus && (
         <p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
           {actionStatus}
         </p>
       )}
 
-      {status === "loading" && <p style={{ color: "var(--color-text-muted)" }}>Loading...</p>}
-      {status === "error" && <p style={{ color: "var(--color-error)" }}>Error: {error}</p>}
-      {status === "ok" && (
+      {status === "loading" && !liveActive && records.length === 0 && (
+        <p style={{ color: "var(--color-text-muted)" }}>Loading...</p>
+      )}
+      {status === "error" && !liveActive && (
+        <p style={{ color: "var(--color-error)" }}>Error: {error}</p>
+      )}
+      {(status === "ok" || liveActive || records.length > 0) && (
         <div className="space-y-3">
-          {data.records.map((r) => (
+          {records.map((r, i) => (
             <div
-              key={`${r.type}:${r.role ?? ""}:${r.timestamp ?? 0}:${String(r.content ?? "")}`}
+              key={i}
               className="p-3 rounded border text-sm"
               style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
             >
@@ -90,7 +119,7 @@ export function ThreadDetail({ threadId, onBack }: Props) {
                     {r.role}
                   </span>
                 )}
-                {r.timestamp && (
+                {r.timestamp !== null && (
                   <span className="text-xs ml-auto" style={{ color: "var(--color-text-muted)" }}>
                     {new Date(r.timestamp).toLocaleTimeString()}
                   </span>
@@ -106,6 +135,7 @@ export function ThreadDetail({ threadId, onBack }: Props) {
               )}
             </div>
           ))}
+          <div ref={recordsEndRef} aria-hidden />
         </div>
       )}
     </div>

packages/dashboard/src/use-hash-route.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+
+type View = "threads" | "workflows";
+
+type HashRoute = {
+  view: View;
+  threadId: string | null;
+};
+
+function parseHash(hash: string): HashRoute {
+  const raw = hash.replace(/^#\/?/, "");
+  if (raw.startsWith("threads/")) {
+    const id = raw.slice("threads/".length);
+    if (id.length > 0) {
+      return { view: "threads", threadId: id };
+    }
+  }
+  if (raw === "workflows") {
+    return { view: "workflows", threadId: null };
+  }
+  return { view: "threads", threadId: null };
+}
+
+function buildHash(route: HashRoute): string {
+  if (route.view === "workflows") {
+    return "#workflows";
+  }
+  if (route.threadId !== null) {
+    return `#threads/${route.threadId}`;
+  }
+  return "#threads";
+}
+
+export function useHashRoute(): {
+  view: View;
+  threadId: string | null;
+  setView: (v: View) => void;
+  setThreadId: (id: string | null) => void;
+} {
+  const [route, setRoute] = useState<HashRoute>(() => parseHash(window.location.hash));
+
+  useEffect(() => {
+    function onHashChange(): void {
+      setRoute(parseHash(window.location.hash));
+    }
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  const navigate = useCallback((next: HashRoute) => {
+    const hash = buildHash(next);
+    window.location.hash = hash;
+    setRoute(next);
+  }, []);
+
+  const setView = useCallback((v: View) => navigate({ view: v, threadId: null }), [navigate]);
+
+  const setThreadId = useCallback(
+    (id: string | null) => navigate({ view: "threads", threadId: id }),
+    [navigate],
+  );
+
+  return { view: route.view, threadId: route.threadId, setView, setThreadId };
+}

packages/dashboard/src/use-sse.ts

@@ -0,0 +1,161 @@
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import type { ThreadRecord } from "./api.ts";
+
+export type UseSSEReturn = {
+  records: ThreadRecord[];
+  connected: boolean;
+  completed: boolean;
+};
+
+function isWorkflowResult(record: ThreadRecord): boolean {
+  return record.type === "workflow-result";
+}
+
+function parseRecord(data: string): ThreadRecord | null {
+  try {
+    return JSON.parse(data) as ThreadRecord;
+  } catch {
+    return null;
+  }
+}
+
+type RecordEventContext = {
+  cancelled: boolean;
+  completedRef: MutableRefObject<boolean>;
+  setRecords: Dispatch<SetStateAction<ThreadRecord[]>>;
+  setCompleted: (value: boolean) => void;
+  setConnected: (value: boolean) => void;
+  cleanupEs: () => void;
+};
+
+function handleRecordEvent(ev: Event, ctx: RecordEventContext): void {
+  if (ctx.cancelled) {
+    return;
+  }
+  const msg = ev as MessageEvent;
+  const raw = typeof msg.data === "string" ? msg.data : "";
+  const parsed = parseRecord(raw);
+  if (parsed === null) {
+    return;
+  }
+  ctx.setRecords((prev) => [...prev, parsed]);
+  if (!isWorkflowResult(parsed)) {
+    return;
+  }
+  ctx.completedRef.current = true;
+  ctx.setCompleted(true);
+  ctx.setConnected(false);
+  ctx.cleanupEs();
+}
+
+export function useSSE(threadId: string | null): UseSSEReturn {
+  const [records, setRecords] = useState<ThreadRecord[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [completed, setCompleted] = useState(false);
+
+  const completedRef = useRef(false);
+  const reconnectAttemptsRef = useRef(0);
+
+  useEffect(() => {
+    if (threadId === null) {
+      completedRef.current = false;
+      reconnectAttemptsRef.current = 0;
+      setRecords([]);
+      setConnected(false);
+      setCompleted(false);
+      return;
+    }
+
+    const tid = threadId;
+
+    completedRef.current = false;
+    reconnectAttemptsRef.current = 0;
+    setRecords([]);
+    setConnected(false);
+    setCompleted(false);
+
+    let es: EventSource | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let cancelled = false;
+
+    function cleanupEs(): void {
+      if (es !== null) {
+        es.close();
+        es = null;
+      }
+    }
+
+    function scheduleReconnect(): void {
+      if (cancelled || completedRef.current) {
+        return;
+      }
+      const delayMs = Math.min(1000 * 2 ** reconnectAttemptsRef.current, 8000);
+      reconnectAttemptsRef.current += 1;
+      reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        if (!cancelled && !completedRef.current) {
+          connect();
+        }
+      }, delayMs);
+    }
+
+    function connect(): void {
+      if (cancelled || completedRef.current) {
+        return;
+      }
+
+      cleanupEs();
+      const url = `/api/threads/${encodeURIComponent(tid)}/live`;
+      es = new EventSource(url);
+
+      es.onopen = () => {
+        if (cancelled) {
+          return;
+        }
+        reconnectAttemptsRef.current = 0;
+        setConnected(true);
+        setRecords([]);
+      };
+
+      es.addEventListener("record", (ev: Event) =>
+        handleRecordEvent(ev, {
+          cancelled,
+          completedRef,
+          setRecords,
+          setCompleted,
+          setConnected,
+          cleanupEs,
+        }),
+      );
+
+      es.onerror = () => {
+        if (cancelled || completedRef.current) {
+          return;
+        }
+        setConnected(false);
+        cleanupEs();
+        scheduleReconnect();
+      };
+    }
+
+    connect();
+
+    return () => {
+      cancelled = true;
+      if (reconnectTimer !== null) {
+        clearTimeout(reconnectTimer);
+      }
+      cleanupEs();
+    };
+  }, [threadId]);
+
+  return { records, connected, completed };
+}

packages/workflow/workflow

@@ -1 +0,0 @@
-/home/azureuser/repos/uncaged-workflow/packages/workflow