fix: detect crashed threads as failed instead of stuck running

- resolveThreadListStatus() checks CAS chain for __end__ node
- Stale .running markers no longer cause false 'running' status
- Distinguish 'failed' (returnCode != 0) from 'completed'
- Worker signal handlers (SIGINT/SIGTERM) clean up .running files
- listRunningThreads filters out terminated threads with stale markers

Fixes #170

小橘 <xiaoju@shazhou.work>

packages/cli-workflow/src/commands/serve/app.ts

@@ -8,7 +8,7 @@ import { createWorkflowRoutes } from "./routes-workflow.js";
 
 const MAX_BODY_SIZE = 1_048_576; // 1 MB
 
-export function createApp(storageRoot: string): Hono {
+export function createApp(storageRoot: string, agentToken: string | null): Hono {
   const app = new Hono();
 
   app.onError((_err, c) => {
@@ -37,7 +37,19 @@ export function createApp(storageRoot: string): Hono {
     await next();
   });
 
+  // ── Agent token auth (skip healthz) ───────────────────────────────
+  if (agentToken !== null) {
+    app.use("/api/*", async (c, next) => {
+      const token = c.req.header("X-Agent-Token");
+      if (token !== agentToken) {
+        return c.json({ error: "unauthorized" }, 401);
+      }
+      await next();
+    });
+  }
+
   app.get("/healthz", (c) => c.json({ ok: true }));
+  app.get("/api/healthz", (c) => c.json({ ok: true }));
 
   app.route("/api/workflows", createWorkflowRoutes(storageRoot));
   app.route("/api/threads", createThreadRoutes(storageRoot));

packages/cli-workflow/src/commands/serve/routes-live.ts

@@ -118,7 +118,7 @@ async function emitRecordsForHead(params: {
         params.eventId.n++;
         await params.stream.writeSSE({
           event: "record",
-          data: JSON.stringify({ type: "workflow-result", ...wf }),
+          data: JSON.stringify({ type: "workflow-result", returnCode: wf.returnCode, content: wf.summary, timestamp: null }),
           id: String(params.eventId.n),
         });
         return true;

packages/cli-workflow/src/commands/serve/routes-thread.ts

@@ -1,5 +1,5 @@
 import { join } from "node:path";
-import { createCasStore, getContentMerklePayload } from "@uncaged/workflow-cas";
+import { createCasStore, getContentMerklePayload, parseCasThreadNode } from "@uncaged/workflow-cas";
 import { FORK_BRANCH_ROLE, walkStateFramesNewestFirst } from "@uncaged/workflow-execute";
 import { END } from "@uncaged/workflow-runtime";
 import { getGlobalCasDir } from "@uncaged/workflow-util";
@@ -10,11 +10,29 @@ import type { ResolvedThreadRecord } from "../../thread-scan.js";
 import {
   listHistoricalThreads,
   listRunningThreads,
+  resolveThreadListStatus,
   resolveThreadRecord,
 } from "../../thread-scan.js";
 import { cmdKill, cmdPause, cmdResume } from "../thread/control.js";
 import { cmdRun } from "../thread/run.js";
 
+async function readStartInfo(
+  cas: ReturnType<typeof createCasStore>,
+  startHash: string,
+): Promise<{ name: string | null; prompt: string | null }> {
+  const raw = await cas.get(startHash);
+  if (raw === null) return { name: null, prompt: null };
+  const parsed = parseCasThreadNode(raw);
+  if (parsed === null || parsed.kind !== "start") return { name: null, prompt: null };
+  const name = parsed.node.payload.name;
+  const promptHash = parsed.node.refs[0] ?? null;
+  let prompt: string | null = null;
+  if (promptHash !== null) {
+    prompt = await getContentMerklePayload(cas, promptHash);
+  }
+  return { name, prompt };
+}
+
 async function buildThreadDetailRecords(
   storageRoot: string,
   resolved: ResolvedThreadRecord,
@@ -23,14 +41,16 @@ async function buildThreadDetailRecords(
   const frames = await walkStateFramesNewestFirst(cas, resolved.head);
   const chronological = [...frames].reverse();
 
+  const { name: workflowName, prompt } = await readStartInfo(cas, resolved.start);
+
   const records: unknown[] = [
     {
       type: "thread-start",
+      workflow: workflowName ?? "unknown",
+      prompt: prompt ?? null,
       threadId: resolved.threadId,
-      bundleHash: resolved.bundleHash,
-      head: resolved.head,
-      start: resolved.start,
-      source: resolved.source,
+      status: resolved.source,
+      timestamp: null,
     },
   ];
 
@@ -42,7 +62,12 @@ async function buildThreadDetailRecords(
       const returnCode = fr.payload.meta.returnCode;
       const summary = fr.payload.meta.summary;
       if (typeof returnCode === "number" && typeof summary === "string") {
-        records.push({ type: "workflow-result", returnCode, summary });
+        records.push({
+          type: "workflow-result",
+          returnCode,
+          content: summary,
+          timestamp: fr.payload.timestamp,
+        });
       }
       continue;
     }
@@ -73,8 +98,8 @@ export function createThreadRoutes(storageRoot: string): Hono {
     const threads = await Promise.all(
       rows.map(async (r) => {
         const runningPath = join(storageRoot, "logs", r.hash, `${r.threadId}.running`);
-        const isRunning = await pathExists(runningPath);
-        const status = r.source === "history" ? "completed" : isRunning ? "running" : "active";
+        const runningMarkerPresent = await pathExists(runningPath);
+        const status = await resolveThreadListStatus(storageRoot, r, runningMarkerPresent);
         return {
           threadId: r.threadId,
           workflow: r.workflowName,

packages/cli-workflow/src/commands/serve/serve.ts

@@ -1,3 +1,4 @@
+import { randomUUID } from "node:crypto";
 import { hostname as osHostname } from "node:os";
 import { err, ok, type Result } from "@uncaged/workflow-protocol";
 import { serve } from "bun";
@@ -15,8 +16,8 @@ import type { ServeOptions } from "./types.js";
 const DEFAULT_GATEWAY_URL = "https://workflow-gateway.shazhou.workers.dev";
 const HEARTBEAT_INTERVAL_MS = 60_000;
 
-export function startServer(storageRoot: string, options: ServeOptions): void {
-  const app = createApp(storageRoot);
+export function startServer(storageRoot: string, options: ServeOptions, agentToken: string | null): void {
+  const app = createApp(storageRoot, agentToken);
 
   const server = serve({
     fetch: app.fetch,
@@ -93,7 +94,8 @@ export async function dispatchServe(storageRoot: string, argv: string[]): Promis
   }
 
   const options = parsed.value;
-  startServer(storageRoot, options);
+  const agentToken = options.noTunnel ? null : randomUUID();
+  startServer(storageRoot, options, agentToken);
 
   if (options.noTunnel) {
     printCliLine("tunnel disabled (--no-tunnel)");
@@ -120,6 +122,7 @@ export async function dispatchServe(storageRoot: string, argv: string[]): Promis
       options.name,
       tunnel.url,
       options.gatewaySecret,
+      agentToken!,
     );
     if (registered) {
       printCliLine(`registered with gateway as "${options.name}"`);
@@ -131,6 +134,7 @@ export async function dispatchServe(storageRoot: string, argv: string[]): Promis
       options.name,
       tunnel.url,
       options.gatewaySecret,
+      agentToken!,
       HEARTBEAT_INTERVAL_MS,
     );
 

packages/cli-workflow/src/commands/serve/tunnel.ts

@@ -39,12 +39,13 @@ export async function registerWithGateway(
   name: string,
   tunnelUrl: string,
   secret: string,
+  agentToken: string,
 ): Promise<boolean> {
   try {
     const resp = await fetch(`${gatewayUrl}/register`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ name, url: tunnelUrl, secret }),
+      body: JSON.stringify({ name, url: tunnelUrl, secret, agentToken }),
     });
     if (!resp.ok) {
       const body = await resp.text();
@@ -78,9 +79,10 @@ export function startHeartbeat(
   name: string,
   tunnelUrl: string,
   secret: string,
+  agentToken: string,
   intervalMs: number,
 ): ReturnType<typeof setInterval> {
   return setInterval(() => {
-    registerWithGateway(gatewayUrl, name, tunnelUrl, secret).catch(() => {});
+    registerWithGateway(gatewayUrl, name, tunnelUrl, secret, agentToken).catch(() => {});
   }, intervalMs);
 }

packages/cli-workflow/src/thread-scan.ts

@@ -5,7 +5,9 @@ import {
   readThreadsIndex,
   type ThreadHistoryEntry,
   type ThreadIndex,
+  walkStateFramesNewestFirst,
 } from "@uncaged/workflow-execute";
+import { END } from "@uncaged/workflow-runtime";
 import { getGlobalCasDir } from "@uncaged/workflow-util";
 
 import { pathExists, readTextFileIfExists } from "./fs-utils.js";
@@ -98,6 +100,8 @@ export type HistoricalThreadRow = {
   source: "active" | "history";
   /** `updatedAt` for active threads; `completedAt` for history (ms since epoch). */
   activityTs: number;
+  /** Current CAS head (`threads.json` / history row). */
+  head: string;
 };
 
 export type ResolvedThreadRecord = {
@@ -172,6 +176,73 @@ export async function resolveThreadRecord(
   return null;
 }
 
+export type ThreadHeadTerminal =
+  | { kind: "non-terminal" }
+  | { kind: "terminal"; returnCode: number };
+
+/** True when the newest frame at `headHash` is `__end__` (workflow finished in CAS). */
+export async function readThreadTerminalFromHead(
+  storageRoot: string,
+  headHash: string,
+): Promise<ThreadHeadTerminal> {
+  const cas = createCasStore(getGlobalCasDir(storageRoot));
+  const frames = await walkStateFramesNewestFirst(cas, headHash);
+  const newest = frames[0];
+  if (newest === undefined) {
+    return { kind: "non-terminal" };
+  }
+  if (newest.payload.role !== END) {
+    return { kind: "non-terminal" };
+  }
+  const rc = newest.payload.meta.returnCode;
+  if (typeof rc !== "number") {
+    return { kind: "terminal", returnCode: 1 };
+  }
+  return { kind: "terminal", returnCode: rc };
+}
+
+export type ThreadListStatus = "running" | "active" | "completed" | "failed";
+
+/** Combines `.running` marker with CAS head: stale markers do not imply `running`. */
+export async function resolveThreadListStatus(
+  storageRoot: string,
+  row: HistoricalThreadRow,
+  runningMarkerPresent: boolean,
+): Promise<ThreadListStatus> {
+  const terminal = await readThreadTerminalFromHead(storageRoot, row.head);
+  if (terminal.kind === "terminal") {
+    return terminal.returnCode !== 0 ? "failed" : "completed";
+  }
+  if (row.source === "history") {
+    return "completed";
+  }
+  if (runningMarkerPresent) {
+    return "running";
+  }
+  return "active";
+}
+
+async function appendRunningThreadRowIfLive(
+  storageRoot: string,
+  hash: string,
+  threadId: string,
+  out: RunningThreadRow[],
+): Promise<void> {
+  const resolved = await resolveThreadRecord(storageRoot, threadId);
+  if (resolved !== null && resolved.bundleHash !== hash) {
+    return;
+  }
+  if (resolved !== null) {
+    const terminal = await readThreadTerminalFromHead(storageRoot, resolved.head);
+    if (terminal.kind === "terminal") {
+      return;
+    }
+  }
+  const workflowName =
+    resolved !== null ? await readWorkflowNameFromStartHash(storageRoot, resolved.start) : null;
+  out.push({ threadId, hash, workflowName });
+}
+
 /** Threads currently executing — identified via `<threadId>.running` markers. */
 export async function listRunningThreads(storageRoot: string): Promise<RunningThreadRow[]> {
   const logsRoot = join(storageRoot, "logs");
@@ -196,10 +267,7 @@ export async function listRunningThreads(storageRoot: string): Promise<RunningTh
         continue;
       }
       const threadId = fileName.slice(0, -".running".length);
-      const resolved = await resolveThreadRecord(storageRoot, threadId);
-      const workflowName =
-        resolved !== null ? await readWorkflowNameFromStartHash(storageRoot, resolved.start) : null;
-      out.push({ threadId, hash, workflowName });
+      await appendRunningThreadRowIfLive(storageRoot, hash, threadId, out);
     }
   }
 
@@ -253,6 +321,7 @@ export async function listHistoricalThreads(
         workflowName,
         source: "active",
         activityTs: entry.updatedAt,
+        head: entry.head,
       });
     }
 
@@ -287,6 +356,7 @@ export async function listHistoricalThreads(
           workflowName,
           source: "history",
           activityTs: e.completedAt,
+          head: e.head,
         });
       }
     }

packages/cli-workflow/src/worker-spawn.ts

@@ -6,6 +6,7 @@ import { getWorkerHostScriptPath } from "@uncaged/workflow-execute";
 import { err, ok, type Result } from "@uncaged/workflow-protocol";
 
 import { pathExists, readTextFileIfExists } from "./fs-utils.js";
+import { readThreadTerminalFromHead, resolveThreadRecord } from "./thread-scan.js";
 
 export type WorkerCtl = {
   pid: number;
@@ -269,7 +270,25 @@ export async function resolveRunningHashForThread(
   if (!(await pathExists(logsRoot))) {
     return err(`thread not running (no logs dir): ${threadId}`);
   }
-  const hashes = await readdir(logsRoot);
+  const resolved = await resolveThreadRecord(storageRoot, threadId);
+  if (resolved !== null) {
+    const runningPath = join(logsRoot, resolved.bundleHash, `${threadId}.running`);
+    if (!(await pathExists(runningPath))) {
+      return err(`thread not running: ${threadId}`);
+    }
+    const terminal = await readThreadTerminalFromHead(storageRoot, resolved.head);
+    if (terminal.kind === "terminal") {
+      return err(`thread not running: ${threadId}`);
+    }
+    return ok(resolved.bundleHash);
+  }
+
+  let hashes: string[];
+  try {
+    hashes = await readdir(logsRoot);
+  } catch {
+    return err(`thread not running: ${threadId}`);
+  }
   for (const hash of hashes) {
     const runningPath = join(logsRoot, hash, `${threadId}.running`);
     if (await pathExists(runningPath)) {

packages/workflow-dashboard/.env.production

@@ -0,0 +1 @@
+VITE_GATEWAY_URL=https://workflow-gateway.shazhou.workers.dev

packages/workflow-dashboard/package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react-dom": "^19.2.6",
+    "react-markdown": "^10.1.0",
+    "shiki": "^4.0.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.4",

packages/workflow-dashboard/src/api.ts

@@ -1,5 +1,31 @@
 const GATEWAY_URL = import.meta.env.VITE_GATEWAY_URL || "";
 
+export function getApiKey(): string | null {
+  try {
+    return localStorage.getItem("workflow-api-key");
+  } catch {
+    return null;
+  }
+}
+
+export function setApiKey(key: string): void {
+  localStorage.setItem("workflow-api-key", key);
+}
+
+export function clearApiKey(): void {
+  localStorage.removeItem("workflow-api-key");
+}
+
+export function hasApiKey(): boolean {
+  return getApiKey() !== null && getApiKey() !== "";
+}
+
+function authHeaders(): Record<string, string> {
+  const key = getApiKey();
+  if (key) return { Authorization: `Bearer ${key}` };
+  return {};
+}
+
 function agentBase(agent: string): string {
   if (GATEWAY_URL) {
     return `${GATEWAY_URL}/api/${agent}`;
@@ -11,7 +37,7 @@ function agentBase(agent: string): string {
 async function postJson<T>(base: string, path: string, body: unknown): Promise<T> {
   const res = await fetch(`${base}${path}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...authHeaders() },
     body: JSON.stringify(body),
   });
   if (!res.ok) {
@@ -22,7 +48,7 @@ async function postJson<T>(base: string, path: string, body: unknown): Promise<T
 }
 
 async function fetchJson<T>(base: string, path: string): Promise<T> {
-  const res = await fetch(`${base}${path}`);
+  const res = await fetch(`${base}${path}`, { headers: authHeaders() });
   if (!res.ok) {
     throw new Error(`API ${res.status}: ${path}`);
   }
@@ -52,14 +78,32 @@ export type ThreadSummary = {
   status: string | null;
 };
 
-export type ThreadRecord = {
-  type: string;
-  role: string | null;
-  content: string | null;
-  timestamp: number | null;
-  [key: string]: unknown;
+export type ThreadStartRecord = {
+  type: "thread-start";
+  workflow: string;
+  prompt: string | null;
+  threadId: string;
+  status: string;
+  timestamp: null;
 };
 
+export type RoleRecord = {
+  type: "role";
+  role: string;
+  content: string;
+  timestamp: number | null;
+  meta: Record<string, unknown>;
+};
+
+export type WorkflowResultRecord = {
+  type: "workflow-result";
+  returnCode: number;
+  content: string;
+  timestamp: number | null;
+};
+
+export type ThreadRecord = ThreadStartRecord | RoleRecord | WorkflowResultRecord;
+
 // ── Gateway endpoints ───────────────────────────────────────────────
 
 export function listAgents(): Promise<AgentEndpoint[]> {

packages/workflow-dashboard/src/app.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { hasApiKey, clearApiKey } from "./api.ts";
+import { LoginPage } from "./components/login.tsx";
 import { RunDialog } from "./components/run-dialog.tsx";
 import { Sidebar } from "./components/sidebar.tsx";
 import { StatusBar } from "./components/status-bar.tsx";
@@ -8,12 +10,17 @@ import { WorkflowList } from "./components/workflow-list.tsx";
 import { useHashRoute } from "./use-hash-route.ts";
 
 export function App() {
+  const [authed, setAuthed] = useState(hasApiKey());
   const { view, agent, threadId, setView, setAgent, setThreadId } = useHashRoute();
   const [showRun, setShowRun] = useState(false);
 
+  if (!authed) {
+    return <LoginPage onLogin={() => setAuthed(true)} />;
+  }
+
   return (
     <div className="flex h-screen">
-      <Sidebar view={view} agent={agent} onViewChange={setView} onAgentChange={setAgent} />
+      <Sidebar view={view} agent={agent} onViewChange={setView} onAgentChange={setAgent} onLogout={() => { clearApiKey(); setAuthed(false); }} />
       <main className="flex-1 overflow-hidden flex flex-col">
         <StatusBar agent={agent} onRun={() => setShowRun(true)} />
         <div className="flex-1 overflow-auto p-6">

packages/workflow-dashboard/src/components/login.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { setApiKey } from "../api.ts";
+
+type Props = {
+  onLogin: () => void;
+};
+
+export function LoginPage({ onLogin }: Props) {
+  const [key, setKey] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!key.trim()) return;
+
+    setLoading(true);
+    setError(null);
+
+    // Test the key by hitting the endpoints list
+    const gatewayUrl = import.meta.env.VITE_GATEWAY_URL || "";
+    try {
+      const res = await fetch(`${gatewayUrl}/endpoints`, {
+        headers: { Authorization: `Bearer ${key.trim()}` },
+      });
+      if (res.status === 401) {
+        setError("Invalid API key");
+        setLoading(false);
+        return;
+      }
+      if (!res.ok) {
+        setError(`Server error: ${res.status}`);
+        setLoading(false);
+        return;
+      }
+    } catch (err) {
+      setError(`Connection failed: ${err instanceof Error ? err.message : String(err)}`);
+      setLoading(false);
+      return;
+    }
+
+    setApiKey(key.trim());
+    onLogin();
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center" style={{ background: "var(--color-bg)" }}>
+      <div
+        className="p-8 rounded-lg border w-full max-w-sm"
+        style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
+      >
+        <h1 className="text-xl font-bold mb-1" style={{ color: "var(--color-accent)" }}>
+          ⚙ Workflow Dashboard
+        </h1>
+        <p className="text-sm mb-6" style={{ color: "var(--color-text-muted)" }}>
+          Enter your API key to continue
+        </p>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+            placeholder="API Key"
+            className="w-full px-3 py-2 rounded border text-sm mb-3 outline-none"
+            style={{
+              background: "var(--color-bg)",
+              borderColor: "var(--color-border)",
+              color: "var(--color-text)",
+            }}
+            autoFocus
+          />
+          {error && (
+            <p className="text-xs mb-3" style={{ color: "var(--color-error)" }}>
+              {error}
+            </p>
+          )}
+          <button
+            type="submit"
+            disabled={loading || !key.trim()}
+            className="w-full px-3 py-2 rounded text-sm font-medium"
+            style={{
+              background: "var(--color-accent)",
+              color: "var(--color-bg)",
+              opacity: loading || !key.trim() ? 0.5 : 1,
+            }}
+          >
+            {loading ? "Verifying..." : "Login"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

packages/workflow-dashboard/src/components/markdown.tsx

@@ -0,0 +1,108 @@
+import ReactMarkdown from "react-markdown";
+import { useEffect, useState } from "react";
+import { createHighlighter, type HighlighterGeneric, type BundledLanguage, type BundledTheme } from "shiki";
+
+let highlighterPromise: Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> | null = null;
+
+const LANGS: BundledLanguage[] = ["typescript", "javascript", "json", "yaml", "bash", "python", "markdown"];
+
+function getHighlighter(): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> {
+  if (highlighterPromise === null) {
+    highlighterPromise = createHighlighter({
+      themes: ["github-dark"],
+      langs: LANGS,
+    });
+  }
+  return highlighterPromise;
+}
+
+function CodeBlock({ className, children }: { className?: string; children?: React.ReactNode }) {
+  const [html, setHtml] = useState<string | null>(null);
+  const code = String(children).replace(/\n$/, "");
+  const lang = className?.replace("language-", "") ?? "text";
+
+  useEffect(() => {
+    let cancelled = false;
+    getHighlighter().then((hl) => {
+      if (cancelled) return;
+      try {
+        const result = hl.codeToHtml(code, { lang, theme: "github-dark" });
+        setHtml(result);
+      } catch {
+        setHtml(null);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [code, lang]);
+
+  if (html !== null) {
+    return (
+      <div
+        className="rounded overflow-x-auto text-xs my-2"
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: shiki output is safe
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+
+  return (
+    <pre className="rounded overflow-x-auto text-xs my-2 p-3" style={{ background: "var(--color-bg)" }}>
+      <code>{code}</code>
+    </pre>
+  );
+}
+
+export function Markdown({ content }: { content: string }) {
+  return (
+    <div className="prose prose-invert prose-sm max-w-none">
+      <ReactMarkdown
+        components={{
+          code({ className, children, ...props }) {
+            const isInline = !className;
+            if (isInline) {
+              return (
+                <code
+                  className="text-xs px-1 py-0.5 rounded"
+                  style={{ background: "var(--color-border)", color: "var(--color-accent)" }}
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            }
+            return <CodeBlock className={className}>{children}</CodeBlock>;
+          },
+          p({ children }) {
+            return <p className="my-1.5 leading-relaxed">{children}</p>;
+          },
+          ul({ children }) {
+            return <ul className="list-disc pl-4 my-1.5">{children}</ul>;
+          },
+          ol({ children }) {
+            return <ol className="list-decimal pl-4 my-1.5">{children}</ol>;
+          },
+          h1({ children }) {
+            return <h1 className="text-lg font-bold mt-3 mb-1">{children}</h1>;
+          },
+          h2({ children }) {
+            return <h2 className="text-base font-bold mt-2 mb-1">{children}</h2>;
+          },
+          h3({ children }) {
+            return <h3 className="text-sm font-bold mt-2 mb-1">{children}</h3>;
+          },
+          blockquote({ children }) {
+            return (
+              <blockquote
+                className="border-l-2 pl-3 my-2 text-sm"
+                style={{ borderColor: "var(--color-accent)", color: "var(--color-text-muted)" }}
+              >
+                {children}
+              </blockquote>
+            );
+          },
+        }}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

packages/workflow-dashboard/src/components/record-card.tsx

@@ -0,0 +1,128 @@
+import type { ThreadStartRecord, RoleRecord, WorkflowResultRecord, ThreadRecord } from "../api.ts";
+import { Markdown } from "./markdown.tsx";
+
+const ROLE_COLORS: Record<string, string> = {
+  preparer: "#8b5cf6",
+  agent: "#3b82f6",
+  extractor: "#f59e0b",
+};
+
+function roleColor(role: string): string {
+  return ROLE_COLORS[role] ?? "var(--color-accent)";
+}
+
+function formatTime(ts: number | null): string | null {
+  if (ts === null) return null;
+  return new Date(ts).toLocaleTimeString();
+}
+
+function StartCard({ record }: { record: ThreadStartRecord }) {
+  return (
+    <div
+      className="p-4 rounded-lg border"
+      style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-lg">🚀</span>
+        <span className="font-semibold" style={{ color: "var(--color-accent)" }}>
+          {record.workflow}
+        </span>
+        <span
+          className="text-xs px-2 py-0.5 rounded"
+          style={{
+            background: record.status === "active" ? "var(--color-success)" : "var(--color-border)",
+            color: record.status === "active" ? "var(--color-bg)" : "var(--color-text-muted)",
+          }}
+        >
+          {record.status}
+        </span>
+      </div>
+      {record.prompt !== null && (
+        <div
+          className="mt-2 p-3 rounded text-sm border-l-2"
+          style={{
+            background: "var(--color-bg)",
+            borderColor: "var(--color-accent)",
+            color: "var(--color-text)",
+          }}
+        >
+          <div className="text-xs mb-1" style={{ color: "var(--color-text-muted)" }}>
+            Prompt
+          </div>
+          <Markdown content={record.prompt} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RoleMessage({ record }: { record: RoleRecord }) {
+  const color = roleColor(record.role);
+  return (
+    <div
+      className="p-3 rounded-lg border text-sm"
+      style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <span
+          className="text-xs px-2 py-0.5 rounded font-mono font-medium"
+          style={{ background: color, color: "#fff" }}
+        >
+          {record.role}
+        </span>
+        {formatTime(record.timestamp) !== null && (
+          <span className="text-xs ml-auto" style={{ color: "var(--color-text-muted)" }}>
+            {formatTime(record.timestamp)}
+          </span>
+        )}
+      </div>
+      <Markdown content={record.content} />
+    </div>
+  );
+}
+
+function ResultCard({ record }: { record: WorkflowResultRecord }) {
+  const success = record.returnCode === 0;
+  return (
+    <div
+      className="p-4 rounded-lg border"
+      style={{
+        background: "var(--color-surface)",
+        borderColor: success ? "var(--color-success)" : "var(--color-error)",
+      }}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-lg">{success ? "✅" : "❌"}</span>
+        <span className="font-semibold text-sm">
+          {success ? "Completed" : "Failed"}
+        </span>
+        <span
+          className="text-xs px-2 py-0.5 rounded font-mono"
+          style={{
+            background: success ? "var(--color-success)" : "var(--color-error)",
+            color: "#fff",
+          }}
+        >
+          exit {record.returnCode}
+        </span>
+        {formatTime(record.timestamp) !== null && (
+          <span className="text-xs ml-auto" style={{ color: "var(--color-text-muted)" }}>
+            {formatTime(record.timestamp)}
+          </span>
+        )}
+      </div>
+      <Markdown content={record.content} />
+    </div>
+  );
+}
+
+export function RecordCard({ record }: { record: ThreadRecord }) {
+  switch (record.type) {
+    case "thread-start":
+      return <StartCard record={record} />;
+    case "role":
+      return <RoleMessage record={record} />;
+    case "workflow-result":
+      return <ResultCard record={record} />;
+  }
+}

packages/workflow-dashboard/src/components/sidebar.tsx

@@ -8,9 +8,10 @@ type Props = {
   agent: string | null;
   onViewChange: (v: "threads" | "workflows") => void;
   onAgentChange: (a: string | null) => void;
+  onLogout: () => void;
 };
 
-export function Sidebar({ view, agent, onViewChange, onAgentChange }: Props) {
+export function Sidebar({ view, agent, onViewChange, onAgentChange, onLogout }: Props) {
   const { status, data } = useFetch(() => listAgents(), []);
   const [expanded, setExpanded] = useState(true);
 
@@ -97,6 +98,17 @@ export function Sidebar({ view, agent, onViewChange, onAgentChange }: Props) {
           </button>
         ))}
       </nav>
+
+      <div className="p-2 border-t" style={{ borderColor: "var(--color-border)" }}>
+        <button
+          type="button"
+          onClick={onLogout}
+          className="w-full text-left px-3 py-2 rounded text-xs transition-colors"
+          style={{ color: "var(--color-text-muted)" }}
+        >
+          🚪 Logout
+        </button>
+      </div>
     </aside>
   );
 }

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

@@ -2,6 +2,7 @@ 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";
+import { RecordCard } from "./record-card.tsx";
 
 type Props = {
   agent: string;
@@ -102,39 +103,8 @@ export function ThreadDetail({ agent, threadId, onBack }: Props) {
       )}
       {(status === "ok" || liveActive || records.length > 0) && (
         <div className="space-y-3">
-          {records.map((r) => (
-            <div
-              key={`${threadId}-${r.type}-${String(r.timestamp)}-${r.role ?? ""}-${r.content ?? ""}`}
-              className="p-3 rounded border text-sm"
-              style={{ background: "var(--color-surface)", borderColor: "var(--color-border)" }}
-            >
-              <div className="flex items-center gap-2 mb-1">
-                <span
-                  className="text-xs px-1.5 py-0.5 rounded font-mono"
-                  style={{ background: "var(--color-border)", color: "var(--color-accent)" }}
-                >
-                  {r.type}
-                </span>
-                {r.role && (
-                  <span className="text-xs" style={{ color: "var(--color-text-muted)" }}>
-                    {r.role}
-                  </span>
-                )}
-                {r.timestamp !== null && (
-                  <span className="text-xs ml-auto" style={{ color: "var(--color-text-muted)" }}>
-                    {new Date(r.timestamp).toLocaleTimeString()}
-                  </span>
-                )}
-              </div>
-              {r.content && (
-                <pre
-                  className="whitespace-pre-wrap text-xs mt-1"
-                  style={{ color: "var(--color-text)" }}
-                >
-                  {typeof r.content === "string" ? r.content : JSON.stringify(r.content, null, 2)}
-                </pre>
-              )}
-            </div>
+          {records.map((r, i) => (
+            <RecordCard key={`${threadId}-${i}`} record={r} />
           ))}
           <div ref={recordsEndRef} aria-hidden />
         </div>

packages/workflow-dashboard/src/use-sse.ts

@@ -8,6 +8,7 @@ import {
 } from "react";
 
 import type { ThreadRecord } from "./api.ts";
+import { getApiKey } from "./api.ts";
 
 export type UseSSEReturn = {
   records: ThreadRecord[];
@@ -58,10 +59,11 @@ function handleRecordEvent(ev: Event, ctx: RecordEventContext): void {
 
 function sseUrl(agent: string, threadId: string): string {
   const gatewayUrl = import.meta.env.VITE_GATEWAY_URL || "";
+  const key = getApiKey();
+  const keyParam = key ? `?key=${encodeURIComponent(key)}` : "";
   if (gatewayUrl) {
-    return `${gatewayUrl}/api/${agent}/threads/${encodeURIComponent(threadId)}/live`;
+    return `${gatewayUrl}/api/${agent}/threads/${encodeURIComponent(threadId)}/live${keyParam}`;
   }
-  // Local dev: use vite proxy
   return `/api/threads/${encodeURIComponent(threadId)}/live`;
 }
 

packages/workflow-execute/src/engine/worker.ts

@@ -1,3 +1,4 @@
+import { unlinkSync } from "node:fs";
 import { mkdir, unlink, writeFile } from "node:fs/promises";
 import { createServer, type Socket } from "node:net";
 import { dirname, join } from "node:path";
@@ -382,6 +383,23 @@ async function main(): Promise<void> {
   let activeThreads = 0;
   let shutdownTimer: ReturnType<typeof setTimeout> | null = null;
 
+  function cleanupAllRunningMarkersSync(): void {
+    for (const threadId of threads.keys()) {
+      try {
+        unlinkSync(join(storageRoot, "logs", hash, `${threadId}.running`));
+      } catch {
+        // ignore missing file or other fs errors
+      }
+    }
+  }
+
+  for (const sig of ["SIGINT", "SIGTERM"] as const) {
+    process.on(sig, () => {
+      cleanupAllRunningMarkersSync();
+      process.exit(sig === "SIGINT" ? 130 : 143);
+    });
+  }
+
   const cas = createCasStore(getGlobalCasDir(storageRoot));
 
   const workerCtlPath = join(storageRoot, "workers", `${hash}.json`);
@@ -498,8 +516,8 @@ async function main(): Promise<void> {
       const message = e instanceof Error ? e.message : String(e);
       bootLog("Q3MN8YKW", `thread ${threadId} failed: ${message}`);
     } finally {
-      threads.delete(threadId);
       await unlink(runningPath).catch(() => {});
+      threads.delete(threadId);
       bumpDone();
       socket?.end();
     }

packages/workflow-gateway/src/index.ts

@@ -5,12 +5,14 @@ type Env = {
   Bindings: {
     ENDPOINTS: KVNamespace;
     GATEWAY_SECRET: string;
+    DASHBOARD_API_KEY: string;
   };
 };
 
 type EndpointRecord = {
   name: string;
   url: string;
+  agentToken: string;
   registeredAt: number;
   lastHeartbeat: number;
 };
@@ -21,13 +23,30 @@ const app = new Hono<Env>();
 
 app.use("*", cors());
 
+// ── Dashboard API key auth (skip healthz + register) ─────────────
+app.use("/endpoints", async (c, next) => {
+  if (!checkDashboardAuth(c)) return c.json({ error: "unauthorized" }, 401);
+  await next();
+});
+app.use("/api/*", async (c, next) => {
+  if (!checkDashboardAuth(c)) return c.json({ error: "unauthorized" }, 401);
+  await next();
+});
+
+function checkDashboardAuth(c: { req: { header: (n: string) => string | undefined; query: (n: string) => string | undefined }; env: Env["Bindings"] }): boolean {
+  const bearer = c.req.header("Authorization")?.replace("Bearer ", "");
+  const query = c.req.query("key");
+  const key = bearer ?? query;
+  return key === c.env.DASHBOARD_API_KEY;
+}
+
 // ── Health ──────────────────────────────────────────────────────────
 app.get("/healthz", (c) => c.json({ ok: true }));
 
 // ── Register / heartbeat ────────────────────────────────────────────
 app.post("/register", async (c) => {
-  const body = await c.req.json<{ name?: string; url?: string; secret?: string }>();
-  const { name, url, secret } = body;
+  const body = await c.req.json<{ name?: string; url?: string; secret?: string; agentToken?: string }>();
+  const { name, url, secret, agentToken } = body;
 
   if (!name || !url) {
     return c.json({ error: "name and url required" }, 400);
@@ -42,6 +61,7 @@ app.post("/register", async (c) => {
   const record: EndpointRecord = {
     name,
     url: url.replace(/\/+$/, ""), // strip trailing slash
+    agentToken: agentToken ?? existing?.agentToken ?? "",
     registeredAt: existing?.registeredAt ?? now,
     lastHeartbeat: now,
   };
@@ -101,9 +121,12 @@ app.all("/api/:agent/*", async (c) => {
   const pathAfterAgent = url.pathname.replace(`/api/${agent}`, "");
   const targetUrl = `${record.url}/api${pathAfterAgent}${url.search}`;
 
-  // Forward headers (skip host)
   const headers = new Headers(c.req.raw.headers);
   headers.delete("host");
+  headers.delete("Authorization"); // don't forward dashboard key to agent
+  if (record.agentToken) {
+    headers.set("X-Agent-Token", record.agentToken);
+  }
 
   try {
     const resp = await fetch(targetUrl, {