feat(serve+dashboard): write endpoints, SSE live, run dialog

Serve API:
- POST /api/threads — run a new thread
- POST /api/threads/:id/kill — kill thread
- POST /api/threads/:id/pause — pause thread
- POST /api/threads/:id/resume — resume thread
- GET /api/threads/:id/live — SSE stream of thread records

Dashboard:
- Run Thread dialog (select workflow, enter prompt, set maxRounds)
- Thread detail controls (pause/resume/kill buttons)
- postJson API helper for write operations

262 tests pass. Refs: #118

packages/dashboard/src/api.ts

@@ -1,5 +1,18 @@
 const BASE = "/api";
 
+async function postJson<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText })) as { error: string };
+    throw new Error(err.error || `API ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}
+
 async function fetchJson<T>(path: string): Promise<T> {
   const res = await fetch(`${BASE}${path}`);
   if (!res.ok) {
@@ -46,6 +59,22 @@ export function getThread(id: string): Promise<{ records: ThreadRecord[] }> {
   return fetchJson(`/threads/${id}`);
 }
 
+export function runThread(workflow: string, prompt: string, maxRounds: number = 10): Promise<{ threadId: string }> {
+  return postJson("/threads", { workflow, prompt, maxRounds });
+}
+
+export function killThread(threadId: string): Promise<{ ok: boolean }> {
+  return postJson(`/threads/${threadId}/kill`, {});
+}
+
+export function pauseThread(threadId: string): Promise<{ ok: boolean }> {
+  return postJson(`/threads/${threadId}/pause`, {});
+}
+
+export function resumeThread(threadId: string): Promise<{ ok: boolean }> {
+  return postJson(`/threads/${threadId}/resume`, {});
+}
+
 export function getHealth(): Promise<{ ok: boolean }> {
   return fetchJson("/healthz");
 }

packages/dashboard/src/app.tsx

@@ -4,18 +4,20 @@ import { ThreadList } from "./components/thread-list.tsx";
 import { ThreadDetail } from "./components/thread-detail.tsx";
 import { WorkflowList } from "./components/workflow-list.tsx";
 import { StatusBar } from "./components/status-bar.tsx";
+import { RunDialog } from "./components/run-dialog.tsx";
 
 type View = "threads" | "workflows";
 
 export function App() {
   const [view, setView] = useState<View>("threads");
   const [selectedThread, setSelectedThread] = useState<string | null>(null);
+  const [showRun, setShowRun] = useState(false);
 
   return (
     <div className="flex h-screen">
       <Sidebar view={view} onViewChange={setView} />
       <main className="flex-1 overflow-hidden flex flex-col">
-        <StatusBar />
+        <StatusBar onRun={() => setShowRun(true)} />
         <div className="flex-1 overflow-auto p-6">
           {view === "threads" && !selectedThread && (
             <ThreadList onSelect={setSelectedThread} />
@@ -26,6 +28,16 @@ export function App() {
           {view === "workflows" && <WorkflowList />}
         </div>
       </main>
+      {showRun && (
+        <RunDialog
+          onClose={() => setShowRun(false)}
+          onCreated={(id) => {
+            setShowRun(false);
+            setView("threads");
+            setSelectedThread(id);
+          }}
+        />
+      )}
     </div>
   );
 }

packages/dashboard/src/components/run-dialog.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { listWorkflows, runThread } from "../api.ts";
+import { useFetch } from "../hooks.ts";
+
+type Props = {
+  onClose: () => void;
+  onCreated: (threadId: string) => void;
+};
+
+export function RunDialog({ onClose, onCreated }: Props) {
+  const workflows = useFetch(() => listWorkflows(), []);
+  const [workflow, setWorkflow] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [maxRounds, setMaxRounds] = useState(10);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!workflow || !prompt) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const result = await runThread(workflow, prompt, maxRounds);
+      onCreated(result.threadId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center z-50"
+      style={{ background: "rgba(0,0,0,0.6)" }}
+    >
+      <div
+        className="w-full max-w-lg p-6 rounded-lg border"
+        style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
+      >
+        <h3 className="text-lg font-semibold mb-4">Run Thread</h3>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="text-sm block mb-1" style={{ color: "var(--color-text-muted)" }}>
+              Workflow
+            </label>
+            <select
+              value={workflow}
+              onChange={(e) => setWorkflow(e.target.value)}
+              className="w-full px-3 py-2 rounded border text-sm"
+              style={{
+                background: "var(--color-bg)",
+                borderColor: "var(--color-border)",
+                color: "var(--color-text)",
+              }}
+            >
+              <option value="">Select a workflow...</option>
+              {workflows.status === "ok" &&
+                workflows.data.workflows.map((w) => (
+                  <option key={w.name} value={w.name}>
+                    {w.name}
+                  </option>
+                ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-sm block mb-1" style={{ color: "var(--color-text-muted)" }}>
+              Prompt
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              rows={4}
+              className="w-full px-3 py-2 rounded border text-sm"
+              style={{
+                background: "var(--color-bg)",
+                borderColor: "var(--color-border)",
+                color: "var(--color-text)",
+              }}
+              placeholder="Enter the task prompt..."
+            />
+          </div>
+          <div>
+            <label className="text-sm block mb-1" style={{ color: "var(--color-text-muted)" }}>
+              Max Rounds
+            </label>
+            <input
+              type="number"
+              value={maxRounds}
+              onChange={(e) => setMaxRounds(Number(e.target.value))}
+              min={1}
+              max={100}
+              className="w-24 px-3 py-2 rounded border text-sm"
+              style={{
+                background: "var(--color-bg)",
+                borderColor: "var(--color-border)",
+                color: "var(--color-text)",
+              }}
+            />
+          </div>
+          {error && <p className="text-sm" style={{ color: "var(--color-error)" }}>{error}</p>}
+          <div className="flex gap-2 justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm rounded border"
+              style={{ borderColor: "var(--color-border)", color: "var(--color-text-muted)" }}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={submitting || !workflow || !prompt}
+              className="px-4 py-2 text-sm rounded"
+              style={{
+                background: submitting ? "var(--color-accent-dim)" : "var(--color-accent)",
+                color: "#fff",
+                opacity: !workflow || !prompt ? 0.5 : 1,
+              }}
+            >
+              {submitting ? "Starting..." : "Run"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,11 @@
 import { getHealth } from "../api.ts";
 import { useFetch } from "../hooks.ts";
 
-export function StatusBar() {
+type Props = {
+  onRun: () => void;
+};
+
+export function StatusBar({ onRun }: Props) {
   const health = useFetch(() => getHealth(), []);
 
   return (
@@ -9,7 +13,16 @@ export function StatusBar() {
       className="flex items-center justify-between px-6 py-2 text-xs border-b"
       style={{ borderColor: "var(--color-border)", background: "var(--color-surface)" }}
     >
-      <span style={{ color: "var(--color-text-muted)" }}>Local API: 127.0.0.1:7860</span>
+      <div className="flex items-center gap-4">
+        <span style={{ color: "var(--color-text-muted)" }}>Local API: 127.0.0.1:7860</span>
+        <button
+          onClick={onRun}
+          className="px-3 py-1 rounded text-xs font-medium"
+          style={{ background: "var(--color-accent)", color: "#fff" }}
+        >
+          ▶ Run Thread
+        </button>
+      </div>
       <span>
         {health.status === "loading" && "⏳ Connecting..."}
         {health.status === "ok" && (

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

@@ -1,4 +1,5 @@
-import { getThread } from "../api.ts";
+import { useState } from "react";
+import { getThread, killThread, pauseThread, resumeThread } from "../api.ts";
 import { useFetch } from "../hooks.ts";
 
 type Props = {
@@ -8,17 +9,60 @@ type Props = {
 
 export function ThreadDetail({ threadId, onBack }: Props) {
   const { status, data, error } = useFetch(() => getThread(threadId), [threadId]);
+  const [actionStatus, setActionStatus] = useState<string | null>(null);
+
+  async function handleAction(action: "kill" | "pause" | "resume") {
+    setActionStatus(`${action}ing...`);
+    try {
+      const fn = action === "kill" ? killThread : action === "pause" ? pauseThread : resumeThread;
+      await fn(threadId);
+      setActionStatus(`${action} sent ✓`);
+    } catch (e) {
+      setActionStatus(`${action} failed: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  }
 
   return (
     <div>
-      <button
-        onClick={onBack}
-        className="text-sm mb-4 hover:underline"
-        style={{ color: "var(--color-accent)" }}
-      >
-        ← Back to threads
-      </button>
-      <h2 className="text-xl font-semibold mb-4 font-mono">{threadId}</h2>
+      <div className="flex items-center justify-between mb-4">
+        <button
+          onClick={onBack}
+          className="text-sm hover:underline"
+          style={{ color: "var(--color-accent)" }}
+        >
+          ← Back to threads
+        </button>
+        <div className="flex gap-2">
+          <button
+            onClick={() => handleAction("pause")}
+            className="px-3 py-1 text-xs rounded border"
+            style={{ borderColor: "var(--color-warning)", color: "var(--color-warning)" }}
+          >
+            ⏸ Pause
+          </button>
+          <button
+            onClick={() => handleAction("resume")}
+            className="px-3 py-1 text-xs rounded border"
+            style={{ borderColor: "var(--color-success)", color: "var(--color-success)" }}
+          >
+            ▶ Resume
+          </button>
+          <button
+            onClick={() => handleAction("kill")}
+            className="px-3 py-1 text-xs rounded border"
+            style={{ borderColor: "var(--color-error)", color: "var(--color-error)" }}
+          >
+            ✕ Kill
+          </button>
+        </div>
+      </div>
+
+      <h2 className="text-xl font-semibold mb-2 font-mono">{threadId}</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>}