pi-agent-fleet 0.3.0 → 0.5.0

package/src/canvas.ts

@@ -1,12 +1,16 @@
 import { execFile } from "node:child_process";
-import { readdir, readFile, stat } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { readdir, readFile } from "node:fs/promises";
 import { createServer } from "node:http";
 import type { AddressInfo } from "node:net";
-import { basename, join } from "node:path";
+import { basename, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
 import type { ActiveFleet } from "./controller.js";
-import { readState } from "./state.js";
-import type { FleetSpec, FleetState } from "./types.js";
+import { listFleetRoots, readDiskFleet } from "./fleet-recovery.js";
+
+export { listFleetRoots, readDiskFleet };
+export type { FleetRootInfo } from "./fleet-recovery.js";
 
 const execFileP = promisify(execFile);
 
@@ -36,6 +40,7 @@ export interface CanvasPayload {
   lgtm_streak: number;
   paused: boolean;
   cost_usd_estimate: number;
+  demo?: boolean;
   loop?: { gate: string; max_iterations: number; lgtm_count: number };
   config: { max_concurrent: number; model?: string; effort?: string; warn_cost_usd?: number };
   nodes: CanvasNodeView[];
@@ -95,36 +100,510 @@ export function buildCanvasPayload(fleet: ActiveFleet): CanvasPayload {
   };
 }
 
+/** Baked snapshot of a real fleet (quickcall-zero-to-hero) used as the demo /
+    fallback view when no fleet is live. Structure is hardcoded, not read from disk. */
+const DEMO_FLEET = (
+{
+  "fleet_name": "quickcall-zero-to-hero",
+  "status": "running",
+  "created_at": "2026-08-02T12:49:37.320Z",
+  "iteration": 1,
+  "lgtm_streak": 0,
+  "paused": false,
+  "cost_usd_estimate": 13.8376735,
+  "loop": {
+    "gate": "reviewer",
+    "max_iterations": 2,
+    "lgtm_count": 1
+  },
+  "config": {
+    "max_concurrent": 4,
+    "model": "gpt-5.4",
+    "warn_cost_usd": 50
+  },
+  "nodes": [
+    {
+      "id": "l1-methods",
+      "type": "research",
+      "task": "You are L1 (lay-of-the-land) researcher in a 2-layer research fleet. Mission context: founder built QuickCall — a daemon watching engineers' AI coding-agent sessions (Claude Code, Cursor, Codex), extracting team conventions, capturing ac…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 84,
+      "tokens": 3446330,
+      "cost_usd_estimate": 1.7322095000000008,
+      "produced_outputs": [
+        "output/l1-methods.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l1-methods.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l1-models-data",
+      "type": "research",
+      "task": "You are L1 (lay-of-the-land) researcher in a 2-layer fleet. Mission context: founder built QuickCall — daemon watching engineers' AI coding-agent sessions, capturing accept/reject signals and human corrections on agent output. Pitch in 2…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 30,
+      "tokens": 3795144,
+      "cost_usd_estimate": 2.4356045,
+      "produced_outputs": [
+        "output/l1-models-data.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l1-models-data.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l1-economics",
+      "type": "research",
+      "task": "You are L1 (lay-of-the-land) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days — post-training open code models on preference traces from QuickCall (daemon capturing accept/reject/correctio…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 77,
+      "tokens": 2852546,
+      "cost_usd_estimate": 1.447467,
+      "produced_outputs": [
+        "output/l1-economics.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l1-economics.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l1-market",
+      "type": "research",
+      "task": "You are L1 (lay-of-the-land) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days. Startup QuickCall: daemon on dev machines capturing AI coding-agent sessions → team conventions + accept/reje…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 28,
+      "tokens": 1473836,
+      "cost_usd_estimate": 1.2037,
+      "produced_outputs": [
+        "output/l1-market.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l1-market.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l2-deep-methods",
+      "type": "research",
+      "task": "You are L2 (double-down) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days — post-training open code models on preference traces from QuickCall (daemon capturing accept/reject/corrections f…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 88,
+      "tokens": 5299748,
+      "cost_usd_estimate": 1.9066499999999997,
+      "produced_outputs": [
+        "output/l2-deep-methods.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l2-deep-methods.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "l1-methods",
+        "l1-models-data",
+        "l1-economics",
+        "l1-market"
+      ],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l2-deep-data",
+      "type": "research",
+      "task": "You are L2 (double-down) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days — post-training open code models on preference traces from QuickCall. QuickCall daemon captures: agent suggestions…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 50,
+      "tokens": 5052879,
+      "cost_usd_estimate": 2.2376524999999994,
+      "produced_outputs": [
+        "output/l2-deep-data.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l2-deep-data.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "l1-methods",
+        "l1-models-data",
+        "l1-economics",
+        "l1-market"
+      ],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l2-deep-pilot",
+      "type": "research",
+      "task": "You are L2 (double-down) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days — post-training open code models on preference traces from QuickCall. L1 surveys at workers/l1-*/output/l1-*.md — …",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 43,
+      "tokens": 3580622,
+      "cost_usd_estimate": 2.1080365,
+      "produced_outputs": [
+        "output/l2-deep-pilot.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l2-deep-pilot.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "l1-methods",
+        "l1-models-data",
+        "l1-economics",
+        "l1-market"
+      ],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "l2-deep-defense",
+      "type": "research",
+      "task": "You are L2 (double-down) researcher in a 2-layer fleet. Context: founder pitching Head of AI at a foundation lab in 2 days — post-training open code models on preference traces from QuickCall (daemon capturing accept/reject/corrections i…",
+      "status": "completed",
+      "model": "gpt-5.4",
+      "turns": 19,
+      "tokens": 776077,
+      "cost_usd_estimate": 0.7663535,
+      "produced_outputs": [
+        "output/l2-deep-defense.md"
+      ],
+      "outputs": [
+        {
+          "path": "output/l2-deep-defense.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "l1-methods",
+        "l1-models-data",
+        "l1-economics",
+        "l1-market"
+      ],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "reading-pack",
+      "type": "write",
+      "task": "You are the fan-in synthesis node of a 2-layer research fleet. Read all eight research files in the fleet workspace: workers/l1-*/output/l1-*.md and workers/l2-*/output/l2-*.md. Context: founder of QuickCall (daemon capturing preference …",
+      "status": "running",
+      "model": "gpt-5.4",
+      "turns": 0,
+      "tokens": 0,
+      "cost_usd_estimate": 0,
+      "produced_outputs": [],
+      "outputs": [
+        {
+          "path": "output/zero-to-hero.md",
+          "kind": "markdown",
+          "required": true
+        },
+        {
+          "path": "output/talk-track.md",
+          "kind": "markdown",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "l2-deep-methods",
+        "l2-deep-data",
+        "l2-deep-pilot",
+        "l2-deep-defense"
+      ],
+      "iterate": true,
+      "worktree": false
+    },
+    {
+      "id": "gap-reviewer",
+      "type": "reviewer",
+      "task": "You are the review gate of a 2-layer research fleet. Deliverable under review: output/zero-to-hero.md and output/talk-track.md (find in fleet workspace), synthesizing L1 surveys (workers/l1-*/output/) and L2 deep-dives (workers/l2-*/outp…",
+      "status": "pending",
+      "model": "k3",
+      "turns": 0,
+      "tokens": 0,
+      "cost_usd_estimate": 0,
+      "produced_outputs": [],
+      "outputs": [
+        {
+          "path": "output/verdict.md",
+          "kind": "verdict",
+          "required": true
+        }
+      ],
+      "depends_on": [
+        "reading-pack"
+      ],
+      "iterate": true,
+      "worktree": false
+    }
+  ],
+  "edges": [
+    {
+      "from": "l1-methods",
+      "to": "l2-deep-methods"
+    },
+    {
+      "from": "l1-models-data",
+      "to": "l2-deep-methods"
+    },
+    {
+      "from": "l1-economics",
+      "to": "l2-deep-methods"
+    },
+    {
+      "from": "l1-market",
+      "to": "l2-deep-methods"
+    },
+    {
+      "from": "l1-methods",
+      "to": "l2-deep-data"
+    },
+    {
+      "from": "l1-models-data",
+      "to": "l2-deep-data"
+    },
+    {
+      "from": "l1-economics",
+      "to": "l2-deep-data"
+    },
+    {
+      "from": "l1-market",
+      "to": "l2-deep-data"
+    },
+    {
+      "from": "l1-methods",
+      "to": "l2-deep-pilot"
+    },
+    {
+      "from": "l1-models-data",
+      "to": "l2-deep-pilot"
+    },
+    {
+      "from": "l1-economics",
+      "to": "l2-deep-pilot"
+    },
+    {
+      "from": "l1-market",
+      "to": "l2-deep-pilot"
+    },
+    {
+      "from": "l1-methods",
+      "to": "l2-deep-defense"
+    },
+    {
+      "from": "l1-models-data",
+      "to": "l2-deep-defense"
+    },
+    {
+      "from": "l1-economics",
+      "to": "l2-deep-defense"
+    },
+    {
+      "from": "l1-market",
+      "to": "l2-deep-defense"
+    },
+    {
+      "from": "l2-deep-methods",
+      "to": "reading-pack"
+    },
+    {
+      "from": "l2-deep-data",
+      "to": "reading-pack"
+    },
+    {
+      "from": "l2-deep-pilot",
+      "to": "reading-pack"
+    },
+    {
+      "from": "l2-deep-defense",
+      "to": "reading-pack"
+    },
+    {
+      "from": "reading-pack",
+      "to": "gap-reviewer"
+    }
+  ],
+  "iterations": [],
+  "demo": true
+}
+) as Omit<CanvasPayload, "generated_at">;
+
+export function buildDemoPayload(): CanvasPayload {
+  return { ...DEMO_FLEET, generated_at: new Date().toISOString() };
+}
+
 export interface SessionEntryView {
   role: string;
   text: string;
 }
 
-export function parseSessionTail(jsonl: string, maxEntries: number): SessionEntryView[] {
-  const out: SessionEntryView[] = [];
-  for (const line of jsonl.split("\n")) {
-    if (!line.includes('"type":"message"')) continue;
-    try {
-      const e = JSON.parse(line) as { message?: { role?: unknown; content?: unknown } };
-      const msg = e.message;
-      if (!msg || typeof msg.role !== "string" || !Array.isArray(msg.content)) continue;
-      const parts: string[] = [];
-      for (const p of msg.content as Array<{ type?: string; text?: string; name?: string }>) {
-        if (p?.type === "text" && typeof p.text === "string") parts.push(p.text);
-        else if ((p?.type === "toolCall" || p?.type === "tool_call") && typeof p.name === "string") parts.push(`[tool: ${p.name}]`);
-        else if (p?.type === "toolResult" || p?.type === "tool_result") parts.push("[tool result]");
-      }
-      const text = parts.join("\n").trim();
-      if (text.length > 0) {
-        out.push({ role: msg.role as string, text: text.length > 4000 ? `${text.slice(0, 4000)}…` : text });
+export interface ActionView {
+  type: "tool_call" | "tool_result" | "model_change" | "thinking_level_change" | "complete";
+  name?: string;
+  toolName?: string;
+  arguments?: Record<string, unknown>;
+  provider?: string;
+  modelId?: string;
+  thinkingLevel?: string;
+  stopReason?: string;
+  isError?: boolean;
+  timestamp?: string;
+}
+
+export type TimelineEvent =
+  | { type: "message"; role: string; text: string; timestamp?: string }
+  | { type: "tool_call"; name: string; arguments?: Record<string, unknown>; timestamp?: string }
+  | { type: "tool_result"; toolName?: string; isError?: boolean; text?: string; timestamp?: string }
+  | { type: "model_change"; provider: string; modelId: string; timestamp?: string }
+  | { type: "thinking_level_change"; thinkingLevel: string; timestamp?: string }
+  | { type: "complete"; stopReason: string; timestamp?: string };
+
+export interface SessionTailView {
+  entries: SessionEntryView[];
+  actions: ActionView[];
+  events: TimelineEvent[];
+}
+
+export function parseSessionTail(jsonl: string, maxEntries: number): SessionTailView {
+  const events: TimelineEvent[] = [];
+  const entries: SessionEntryView[] = [];
+  const actions: ActionView[] = [];
+  for (const raw of jsonl.split("\n")) {
+    if (!raw.trim()) continue;
+    let e: { type?: string; timestamp?: string; message?: { role?: unknown; content?: unknown; stopReason?: string; toolName?: string; isError?: boolean }; provider?: string; modelId?: string; thinkingLevel?: string } | undefined;
+    try { e = JSON.parse(raw); } catch { continue; }
+    if (!e) continue;
+    const ts = typeof e.timestamp === "string" ? e.timestamp : undefined;
+    if (e.type === "model_change" && typeof e.provider === "string" && typeof e.modelId === "string") {
+      const a: ActionView = { type: "model_change", provider: e.provider, modelId: e.modelId, timestamp: ts };
+      actions.push(a);
+      events.push({ type: "model_change", provider: e.provider, modelId: e.modelId, timestamp: ts });
+      continue;
+    }
+    if (e.type === "thinking_level_change" && typeof e.thinkingLevel === "string") {
+      const a: ActionView = { type: "thinking_level_change", thinkingLevel: e.thinkingLevel, timestamp: ts };
+      actions.push(a);
+      events.push({ type: "thinking_level_change", thinkingLevel: e.thinkingLevel, timestamp: ts });
+      continue;
+    }
+    if (e.type !== "message") continue;
+    const msg = e.message;
+    if (!msg || typeof msg.role !== "string" || !Array.isArray(msg.content)) continue;
+    // tool result messages carry the result at the message level
+    if (msg.role === "toolResult" || msg.role === "tool_result") {
+      const a: ActionView = { type: "tool_result", toolName: typeof msg.toolName === "string" ? msg.toolName : undefined, isError: msg.isError, timestamp: ts };
+      actions.push(a);
+      events.push({ type: "tool_result", toolName: a.toolName, isError: a.isError, timestamp: ts });
+    }
+    const parts: string[] = [];
+    for (const p of msg.content as Array<{ type?: string; text?: string; name?: string; toolName?: string; isError?: boolean; arguments?: Record<string, unknown> }>) {
+      if (!p) continue;
+      if (p.type === "text" && typeof p.text === "string") parts.push(p.text);
+      else if ((p.type === "toolCall" || p.type === "tool_call") && typeof p.name === "string") {
+        parts.push(`[tool: ${p.name}]`);
+        const a: ActionView = { type: "tool_call", name: p.name, arguments: p.arguments, timestamp: ts };
+        actions.push(a);
+        events.push({ type: "tool_call", name: p.name, arguments: p.arguments, timestamp: ts });
+      } else if (p.type === "toolResult" || p.type === "tool_result") {
+        parts.push("[tool result]");
+        const a: ActionView = { type: "tool_result", toolName: typeof p.toolName === "string" ? p.toolName : p.name, isError: p.isError, timestamp: ts };
+        actions.push(a);
+        events.push({ type: "tool_result", toolName: a.toolName, isError: a.isError, timestamp: ts });
       }
-    } catch {
-      // skip unparseable line
+    }
+    if (msg.stopReason && typeof msg.stopReason === "string" && msg.stopReason !== "toolUse" && msg.stopReason !== "tool_use") {
+      const a: ActionView = { type: "complete", stopReason: msg.stopReason, timestamp: ts };
+      actions.push(a);
+      events.push({ type: "complete", stopReason: msg.stopReason, timestamp: ts });
+    }
+    const text = parts.join("\n").trim();
+    if (text.length > 0) {
+      const entry: SessionEntryView = { role: msg.role as string, text: text.length > 4000 ? `${text.slice(0, 4000)}…` : text };
+      entries.push(entry);
+      events.push({ type: "message", role: entry.role, text: entry.text, timestamp: ts });
     }
   }
-  return out.slice(-maxEntries);
+  return { entries: entries.slice(-maxEntries), actions: actions.slice(-maxEntries), events: events.slice(-maxEntries) };
 }
 
+const DEMO_TASK = `You are L1 (lay-of-the-land) researcher in a 2-layer research fleet.\n\nMission context: founder built QuickCall — a daemon watching engineers' AI coding-agent sessions (Claude Code, Cursor, Codex), extracting team conventions, capturing accept/reject signals and human corrections on agent output.\n\nYour job:\n1. Read the mission brief and upstream inputs.\n2. Search for relevant precedents, code patterns, and competitive landscape.\n3. Write a concise markdown report to the required output path.\n4. Save ALL output files to the worker output directory using absolute paths.\n\nSave the report to output/l1-methods.md. The file must use markdown headings and keep each section focused. Do not modify source code.`;
+
+export function buildDemoSession(_id: string, task?: string): SessionTailView & { task: string } {
+  const taskText = task || DEMO_TASK;
+  const baseTs = "2026-08-01T09:57:";
+  const events: TimelineEvent[] = [
+    { type: "model_change", provider: "openai-codex", modelId: "gpt-5.4-mini", timestamp: baseTs + "04.987Z" },
+    { type: "thinking_level_change", thinkingLevel: "high", timestamp: baseTs + "04.987Z" },
+    { type: "message", role: "assistant", text: "I'll review the scheduler changes and write the verdict.", timestamp: baseTs + "05.000Z" },
+    { type: "tool_call", name: "read", arguments: { path: "docs/superpowers/specs/reviewer-contract.md" }, timestamp: baseTs + "06.000Z" },
+    { type: "tool_call", name: "read", arguments: { path: "src/scheduler.ts" }, timestamp: baseTs + "06.500Z" },
+    { type: "message", role: "assistant", text: "The scheduler uses a priority queue. I'll run the test suite to verify behavior.", timestamp: baseTs + "08.000Z" },
+    { type: "tool_call", name: "bash", arguments: { command: "npm run typecheck" }, timestamp: baseTs + "09.000Z" },
+    { type: "tool_result", toolName: "bash", isError: false, text: "✓ typecheck passed", timestamp: baseTs + "12.000Z" },
+    { type: "message", role: "assistant", text: "Typecheck passes. I'll search for fleet reviewer patterns and inspect tests.", timestamp: baseTs + "12.500Z" },
+    { type: "tool_call", name: "web_search", arguments: { queries: ["fleet reviewer DAG pattern"] }, timestamp: baseTs + "13.000Z" },
+    { type: "tool_call", name: "read", arguments: { path: "test/scheduler.test.ts" }, timestamp: baseTs + "15.000Z" },
+    { type: "tool_result", toolName: "read", isError: false, text: "# 123", timestamp: baseTs + "15.500Z" },
+    { type: "message", role: "assistant", text: "Upstream outputs look good. Tests pass and search results confirm the pattern. Writing the review verdict now.", timestamp: baseTs + "17.000Z" },
+    { type: "tool_call", name: "write", arguments: { path: "output/review.md" }, timestamp: baseTs + "18.000Z" },
+    { type: "tool_result", toolName: "write", isError: false, text: "Successfully wrote 45 bytes to output/review.md", timestamp: baseTs + "18.500Z" },
+    { type: "message", role: "assistant", text: "Done.", timestamp: baseTs + "19.000Z" },
+    { type: "complete", stopReason: "complete", timestamp: baseTs + "20.000Z" },
+  ];
+  const entries: SessionEntryView[] = events.filter((e) => e.type === "message").map((e) => ({ role: (e as TimelineEvent & { type: "message" }).role, text: (e as TimelineEvent & { type: "message" }).text }));
+  const actions: ActionView[] = events.filter((e) => e.type !== "message").map((e) => {
+    if (e.type === "tool_call") return { type: e.type, name: e.name, arguments: e.arguments, timestamp: e.timestamp };
+    if (e.type === "tool_result") return { type: e.type, toolName: e.toolName, isError: e.isError, timestamp: e.timestamp };
+    if (e.type === "model_change") return { type: e.type, provider: e.provider, modelId: e.modelId, timestamp: e.timestamp };
+    if (e.type === "thinking_level_change") return { type: e.type, thinkingLevel: e.thinkingLevel, timestamp: e.timestamp };
+    return { type: e.type, stopReason: e.stopReason, timestamp: e.timestamp };
+  }) as ActionView[];
+  return { entries, actions, events, task: taskText };
+}
 async function latestSessionFile(workerDir: string): Promise<string | undefined> {
   try {
     const files = (await readdir(workerDir)).filter((f) => f.endsWith(".jsonl")).sort();
@@ -134,396 +613,241 @@ async function latestSessionFile(workerDir: string): Promise<string | undefined>
   }
 }
 
-export function renderCanvasPage(): string {
-  return `<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>fleet canvas</title>
-<style>
-:root { color-scheme: dark; }
-body {
-  --bg:#0d1117; --fg:#c9d1d9; --muted:#8b949e; --line:#30363d; --panel:#161b22;
-  --accent:#58a6ff; --ok:#3fb950; --bad:#f85149; --warn:#d29922; --wire:#6e7681; --hdr:#f0f6fc;
-}
-body.light { color-scheme: light;
-  --bg:#f6f8fa; --fg:#1f2328; --muted:#57606a; --line:#d0d7de; --panel:#ffffff;
-  --accent:#0969da; --ok:#1a7f37; --bad:#cf222e; --warn:#9a6700; --wire:#8c959f; --hdr:#1f2328;
-}
-* { box-sizing:border-box; }
-body { margin:0; font:13px/1.45 -apple-system, Menlo, monospace; background:var(--bg); color:var(--fg); }
-header { padding:8px 14px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
-header .name { font-weight:700; color:var(--hdr); }
-#hdr { display:flex; gap:12px; align-items:baseline; }
-.pill { padding:1px 8px; border-radius:10px; border:1px solid var(--line); }
-button, select { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:3px 10px; font:inherit; cursor:pointer; }
-button:hover, select:hover { border-color:var(--accent); }
-main { display:flex; height:calc(100vh - 42px); }
-#stage { flex:1; position:relative; overflow:hidden; }
-#viewport { position:absolute; left:0; top:0; transform-origin:0 0; }
-.node { position:absolute; width:260px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; background:var(--panel); }
-.node:hover { border-color:var(--accent); }
-.node.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
-.node .nid { font-weight:700; color:var(--hdr); }
-.badge { float:right; font-size:10px; padding:0 6px; border:1px solid var(--line); border-radius:8px; color:var(--muted); }
-.meta { color:var(--muted); font-size:12px; }
-.stats { font-size:12px; margin-top:2px; }
-.note { color:var(--warn); font-size:12px; margin-top:4px; }
-.out-chip { display:inline-block; font-size:10px; border:1px solid var(--line); border-radius:8px; padding:0 5px; margin:3px 3px 0 0; color:var(--muted); }
-.flags { font-size:10px; color:var(--warn); margin-top:3px; }
-.st-completed { border-left:4px solid var(--ok); }
-.st-running { border-left:4px solid var(--accent); }
-.st-failed, .st-contract_failed { border-left:4px solid var(--bad); }
-.st-killed, .st-blocked { border-left:4px solid var(--muted); }
-.st-pending, .st-ready { border-left:4px solid var(--line); }
-#side { width:430px; border-left:1px solid var(--line); overflow:auto; padding:12px; display:none; background:var(--bg); }
-#side.open { display:block; }
-.msg { margin-bottom:10px; padding:8px; border-radius:6px; background:var(--panel); white-space:pre-wrap; word-break:break-word; }
-.msg .role { font-weight:700; margin-bottom:4px; }
-.role-user { color:var(--accent); } .role-assistant { color:var(--ok); } .role-tool { color:var(--warn); }
-.taskbox { border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:10px; white-space:pre-wrap; word-break:break-word; font-size:12px; }
-#empty { padding:40px; color:var(--muted); }
-</style>
-</head>
-<body>
-<header>
-  <span class="name">fleet canvas</span>
-  <select id="fleetSel"></select>
-  <span id="hdr"></span>
-  <span style="flex:1"></span>
-  <button onclick="fitView()">fit</button>
-  <button onclick="resetView()">1:1</button>
-  <button id="themeBtn" onclick="toggleTheme()">theme</button>
-</header>
-<main>
-<div id="stage"></div>
-<div id="side"></div>
-</main>
-<script>
-var MIN_ZOOM = 0.2, MAX_ZOOM = 2.5;
-var camera = { x: 40, y: 40, scale: 1 };
-var selected = null;
-var currentFleet = null;
-var stage = document.getElementById("stage");
-var viewport = document.createElement("div");
-viewport.id = "viewport";
-stage.appendChild(viewport);
-
-function j(u){ return fetch(u).then(function(r){ if(!r.ok) throw new Error(String(r.status)); return r.json(); }); }
-function esc(s){ return String(s).replace(/[&<>"]/g, function(c){ return { "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;" }[c]; }); }
+const HERE = dirname(fileURLToPath(import.meta.url));
+const requireFrom = createRequire(import.meta.url);
 
-/* theme */
-function applyTheme(t){
-  document.body.className = t === "light" ? "light" : "";
-  try { localStorage.setItem("fleet-canvas-theme", t); } catch(e) {}
-}
-function toggleTheme(){
-  applyTheme(document.body.className === "light" ? "dark" : "light");
-}
-(function(){
-  var qsTheme = new URLSearchParams(location.search).get("theme");
-  var t = qsTheme === "light" || qsTheme === "dark" ? qsTheme : null;
-  try { if(!t) t = localStorage.getItem("fleet-canvas-theme"); } catch(e) {}
-  if(!t && window.matchMedia && matchMedia("(prefers-color-scheme: light)").matches) t = "light";
-  applyTheme(t || "dark");
-})();
+let bundleCache: Promise<string> | undefined;
 
-/* camera */
-function applyCamera(){
-  viewport.style.transform = "translate(" + camera.x + "px," + camera.y + "px) scale(" + camera.scale + ")";
-}
-function screenToWorld(sx, sy){ return { x: (sx - camera.x) / camera.scale, y: (sy - camera.y) / camera.scale }; }
-function zoomAt(sx, sy, factor){
-  var p = screenToWorld(sx, sy);
-  camera.scale = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, camera.scale * factor));
-  camera.x = sx - p.x * camera.scale;
-  camera.y = sy - p.y * camera.scale;
-  applyCamera();
-}
-stage.addEventListener("wheel", function(e){
-  e.preventDefault();
-  var r = stage.getBoundingClientRect();
-  zoomAt(e.clientX - r.left, e.clientY - r.top, Math.exp(-e.deltaY * 0.0015));
-}, { passive: false });
-var dragging = false, lastX = 0, lastY = 0;
-stage.addEventListener("pointerdown", function(e){
-  if(e.target.closest && e.target.closest(".node")) return;
-  dragging = true; lastX = e.clientX; lastY = e.clientY;
-  stage.setPointerCapture(e.pointerId);
-});
-stage.addEventListener("pointermove", function(e){
-  if(!dragging) return;
-  camera.x += e.clientX - lastX;
-  camera.y += e.clientY - lastY;
-  lastX = e.clientX; lastY = e.clientY;
-  applyCamera();
-});
-stage.addEventListener("pointerup", function(){ dragging = false; });
-function fitView(){
-  var els = viewport.querySelectorAll(".node");
-  if(!els.length) return;
-  var minX = 1e9, minY = 1e9, maxX = -1e9, maxY = -1e9;
-  els.forEach(function(el){
-    var x = el.offsetLeft, y = el.offsetTop;
-    minX = Math.min(minX, x); minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x + el.offsetWidth); maxY = Math.max(maxY, y + el.offsetHeight);
+/** Bundle the React canvas client with esbuild (cached after first build). */
+async function buildClientBundle(): Promise<string> {
+  const esbuild = await import("esbuild");
+  const result = await esbuild.build({
+    entryPoints: [join(HERE, "canvas-client.tsx")],
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    target: "es2020",
+    jsx: "automatic",
+    minify: true,
+    write: false,
+    logLevel: "silent",
+    define: { "process.env.NODE_ENV": '"production"' },
   });
-  var sw = stage.clientWidth - 60, sh = stage.clientHeight - 60;
-  var z = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.min(sw / (maxX - minX), sh / (maxY - minY))));
-  camera.scale = z;
-  camera.x = 30 - minX * z + (sw - (maxX - minX) * z) / 2;
-  camera.y = 30 - minY * z + (sh - (maxY - minY) * z) / 2;
-  applyCamera();
+  return result.outputFiles[0].text;
 }
-function resetView(){ camera = { x: 40, y: 40, scale: 1 }; applyCamera(); }
 
-/* layout */
-function layers(nodes, edges){
-  var ids = nodes.map(function(n){ return n.id; });
-  var indeg = {}; var rev = {};
-  ids.forEach(function(i){ indeg[i]=0; rev[i]=[]; });
-  edges.forEach(function(e){ if(e.from in indeg){ indeg[e.to]++; rev[e.from].push(e.to); } });
-  var out=[]; var cur=ids.filter(function(i){ return indeg[i]===0; }); var seen={};
-  while(cur.length){
-    out.push(cur);
-    cur.forEach(function(i){ seen[i]=true; });
-    var next=[];
-    cur.forEach(function(i){ rev[i].forEach(function(m){ indeg[m]--; if(indeg[m]===0) next.push(m); }); });
-    cur=next.filter(function(i){ return !seen[i]; });
+function flowCss(): string {
+  try {
+    return readFileSyncSafe(requireFrom.resolve("@xyflow/react/dist/style.css"));
+  } catch {
+    return "";
   }
-  ids.forEach(function(i){ if(!seen[i]) out.push([i]); });
-  return out;
-}
-function layout(s){
-  var L = layers(s.nodes, s.edges);
-  var pos = {};
-  L.forEach(function(layer, li){
-    layer.forEach(function(id, ni){
-      pos[id] = { x: li * 340, y: ni * 160 };
-    });
-  });
-  return pos;
-}
-
-/* render */
-function cardHtml(n){
-  var chips = (n.outputs || []).map(function(o){
-    return '<span class="out-chip">' + esc(o.path) + " · " + esc(o.kind) + '</span>';
-  }).join("");
-  var flags = [];
-  if(n.iterate === false) flags.push("once");
-  if(n.worktree) flags.push("worktree");
-  return '<div class="nid">' + esc(n.id) + '<span class="badge">' + esc(n.type) + '</span></div>'
-    + '<div class="meta">' + esc(n.status) + ' · ' + esc(n.model) + (n.effort ? " · " + esc(n.effort) : "") + '</div>'
-    + '<div class="stats">' + String(n.turns|0) + ' turns · ' + (Number(n.tokens||0)/1000).toFixed(1) + 'k tok · $' + Number(n.cost_usd_estimate||0).toFixed(2) + '</div>'
-    + (chips ? '<div>' + chips + '</div>' : "")
-    + (flags.length ? '<div class="flags">' + flags.join(" · ") + '</div>' : "")
-    + (n.status_note ? '<div class="note">' + esc(n.status_note) + '</div>' : "");
 }
-function render(s){
-  var pos = layout(s);
-  viewport.innerHTML = "";
-  var byId = {};
-  s.nodes.forEach(function(n){
-    var el = document.createElement("div");
-    el.className = "node st-" + n.status + (selected === n.id ? " sel" : "");
-    el.setAttribute("data-id", n.id);
-    el.style.left = pos[n.id].x + "px";
-    el.style.top = pos[n.id].y + "px";
-    el.innerHTML = cardHtml(n);
-    el.onclick = function(){ sel(n.id); };
-    viewport.appendChild(el);
-    n._lx = pos[n.id].x; n._ly = pos[n.id].y; n._el = el;
-    byId[n.id] = n;
-  });
-  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.style.position = "absolute";
-  svg.style.left = "0"; svg.style.top = "0";
-  svg.style.pointerEvents = "none";
-  svg.style.overflow = "visible";
-  svg.setAttribute("width", "1"); svg.setAttribute("height", "1");
-  s.edges.forEach(function(e){
-    var a = byId[e.from], b = byId[e.to];
-    if(!a || !b) return;
-    var x1 = a._lx + 260;
-    var y1 = a._ly + (a._el ? a._el.offsetHeight : 110) / 2;
-    var x2 = b._lx;
-    var y2 = b._ly + (b._el ? b._el.offsetHeight : 110) / 2;
-    var mx = (x1 + x2) / 2;
-    var p = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    p.setAttribute("d", "M " + x1 + " " + y1 + " C " + mx + " " + y1 + ", " + mx + " " + y2 + ", " + x2 + " " + y2);
-    p.setAttribute("fill", "none");
-    p.setAttribute("stroke", "var(--wire)");
-    p.setAttribute("stroke-width", "2");
-    svg.appendChild(p);
-    var ah = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    ah.setAttribute("d", "M " + (x2-7) + " " + (y2-4.5) + " L " + x2 + " " + y2 + " L " + (x2-7) + " " + (y2+4.5));
-    ah.setAttribute("fill", "none");
-    ah.setAttribute("stroke", "var(--wire)");
-    ah.setAttribute("stroke-width", "2");
-    svg.appendChild(ah);
-  });
-  viewport.appendChild(svg);
+function readFileSyncSafe(p: string): string {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return (requireFrom("node:fs") as typeof import("node:fs")).readFileSync(p, "utf-8");
 }
 
-/* data */
-function fleetParam(){ return currentFleet ? "?fleet=" + encodeURIComponent(currentFleet) : ""; }
-function sessionParam(){ return currentFleet ? "&fleet=" + encodeURIComponent(currentFleet) : ""; }
-function tick(){
-  j("/api/state" + fleetParam()).then(function(s){
-    var hdr = document.getElementById("hdr");
-    if(s.empty){
-      hdr.textContent = "no live fleet";
-      viewport.innerHTML = "";
-      return;
-    }
-    var loop = s.loop ? " · iter " + s.iteration + "/" + s.loop.max_iterations + " · streak " + s.lgtm_streak : "";
-    var done = s.nodes.filter(function(n){ return n.status==="completed"; }).length;
-    hdr.innerHTML = '<span class="name">' + esc(s.fleet_name) + '</span>'
-      + '<span class="pill">' + esc(s.status) + '</span>'
-      + (s.paused ? '<span class="pill">paused</span>' : '')
-      + '<span>' + done + '/' + s.nodes.length + ' done</span>'
-      + '<span>$' + s.cost_usd_estimate.toFixed(2) + '</span>'
-      + '<span class="meta">' + esc(loop) + '</span>';
-    render(s);
-  }).catch(function(){
-    if(currentFleet){
-      document.getElementById("hdr").innerHTML = '<span class="pill">fleet unavailable</span>';
-      currentFleet = null;
-      document.getElementById("fleetSel").value = "";
-      try { localStorage.removeItem("fleet-canvas-fleet"); } catch(e){}
-      setTimeout(function(){ tick(); }, 0);
-    } else {
-      document.getElementById("hdr").innerHTML = '<span class="pill">connection lost</span>';
-    }
-  });
-}
-function side(){
-  if(!selected) return;
-  j("/api/session/" + selected + "?tail=30" + sessionParam()).then(function(r){
-    var el = document.getElementById("side");
-    var sst = el.scrollTop;
-    var taskHtml = "";
-    if(r.task) taskHtml = '<div class="taskbox">' + esc(r.task) + '</div>';
-    el.innerHTML = '<div class="meta"># ' + esc(selected) + ' - session</div>'
-      + taskHtml
-      + r.entries.map(function(e){
-          return '<div class="msg"><div class="role role-' + esc(e.role) + '">' + esc(e.role) + '</div>' + esc(e.text) + '</div>';
-        }).join("");
-    el.scrollTop = sst;
-  }).catch(function(){});
-}
-function sel(id){
-  selected = id;
-  document.getElementById("side").classList.add("open");
-  viewport.querySelectorAll(".node").forEach(function(el){
-    el.className = el.className.replace(" sel", "") + (el.getAttribute("data-id") === id ? " sel" : "");
-  });
-  side();
+const PAGE_CSS = `
+:root { color-scheme: dark; --bg:#0d1117; --fg:#c9d1d9; --muted:#8b949e; --line:#30363d; --panel:#1a2029; --panel-2:#212936; --stage-bg:#0a0c10; --accent:#58a6ff; --ok:#3fb950; --bad:#f85149; --warn:#d29922; --wire:#6e7681; --hdr:#f0f6fc; --card-shadow:0 1px 2px rgba(0,0,0,0.5), 0 10px 24px -8px rgba(0,0,0,0.65); --card-shadow-lg:0 2px 4px rgba(0,0,0,0.5), 0 16px 36px -10px rgba(0,0,0,0.75); --edge:#4a5361; --edge-soft:#363d49; --mm-mask:rgba(8,10,14,0.55); --mm-frame:rgba(255,255,255,0.14); }
+[data-theme="light"] { color-scheme: light; --bg:#f6f8fa; --fg:#1f2328; --muted:#57606a; --line:#d0d7de; --panel:#ffffff; --panel-2:#f6f8fa; --stage-bg:#eef1f5; --accent:#0969da; --ok:#1a7f37; --bad:#cf222e; --warn:#9a6700; --wire:#8c959f; --hdr:#1f2328; --card-shadow:0 1px 2px rgba(15,23,42,0.08), 0 10px 24px -8px rgba(15,23,42,0.18); --card-shadow-lg:0 2px 4px rgba(15,23,42,0.10), 0 16px 36px -10px rgba(15,23,42,0.24); --edge:#b5bdc9; --edge-soft:#d0d7de; --mm-mask:rgba(15,23,42,0.10); --mm-frame:rgba(9,105,218,0.35); }
+:root { --ui:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono:"SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
+* { box-sizing:border-box; }
+html,body,#root { margin:0; height:100%; }
+html,body { overflow:hidden; font:13px/1.45 var(--ui); background:var(--bg); color:var(--fg); }
+/* monospace is reserved for identifiers, code paths, measurements, and transcripts */
+.id, .stats, .out-chip, .badge, .fp-name, .fp-status, .fp-trigger-status, .taskbox-side, .msg, .empty code { font-family:var(--mono); }
+#root { display:flex; flex-direction:column; }
+header { padding:8px 14px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--panel); flex:0 0 auto; }
+header .name { font-weight:700; color:var(--hdr); }
+#hdr { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; min-width:0; }
+.pill { padding:1px 8px; border-radius:10px; border:1px solid var(--line); }
+button, select { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 11px; min-height:30px; font:inherit; cursor:pointer; }
+button:hover, select:hover { border-color:var(--accent); }
+:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
+.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; min-height:30px; padding:0; font-size:18px; line-height:1; color:var(--muted); }
+.icon-btn:hover { color:var(--fg); }
+.fp { position:relative; }
+.fp-trigger { display:flex; align-items:center; gap:7px; min-width:210px; max-width:360px; padding:5px 11px; min-height:30px; text-align:left; }
+.fp-trigger-status { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:0 6px; white-space:nowrap; }
+.fp-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.fp-caret { color:var(--muted); font-size:11px; }
+.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--muted); }
+.dot.live { background:transparent; border:2px solid var(--accent); }
+.fp-menu { position:absolute; top:calc(100% + 6px); left:0; width:340px; max-width:78vw; background:var(--panel); border-radius:12px; box-shadow:var(--card-shadow-lg); z-index:50; overflow:hidden; }
+.fp-search { width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:9px 12px; background:transparent; color:var(--fg); }
+.fp-search:focus-visible { outline-offset:-2px; }
+.fp-list { max-height:340px; overflow-y:auto; padding:4px 0; }
+.fp-item { display:flex; align-items:center; gap:9px; padding:8px 12px; min-height:34px; cursor:pointer; }
+.fp-item.active { background:color-mix(in srgb, var(--fg) 8%, transparent); }
+.fp-item.selected .fp-name { color:var(--accent); font-weight:600; }
+.fp-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.fp-status { font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
+.fp-empty { padding:10px; color:var(--muted); text-align:center; }
+.taskbox-side-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
+main { display:flex; flex:1 1 auto; min-height:0; }
+#stage { flex:1; position:relative; min-width:0; background:var(--stage-bg); }
+.react-flow { background:var(--stage-bg); }
+.react-flow__node { width:284px; }
+.react-flow__handle { width:6px; height:6px; background:var(--wire); border:none; opacity:0; }
+.react-flow__edge-path { stroke:var(--edge); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+.react-flow__edge:hover .react-flow__edge-path { stroke:var(--accent); stroke-width:2; }
+.react-flow__edge.animated .react-flow__edge-path { stroke:var(--accent); stroke-width:2; stroke-dasharray:1 7; animation:dashflow 0.7s linear infinite; }
+@keyframes dashflow { to { stroke-dashoffset:-16; } }
+.react-flow__controls button { background:var(--panel); color:var(--fg); border-bottom:1px solid var(--line); fill:var(--fg); }
+.react-flow__minimap { width:172px; height:112px; background:var(--panel); border-radius:12px; box-shadow:var(--card-shadow); overflow:hidden; }
+.react-flow__minimap svg { border-radius:10px; }
+.react-flow__minimap-mask { fill:var(--mm-mask) !important; stroke:none; }
+.react-flow__minimap-node { stroke:var(--panel) !important; stroke-width:4px !important; rx:3; ry:3; }
+.react-flow__attribution { display:none; }
+.node { position:relative; width:284px; border-radius:12px; background:var(--panel); cursor:pointer; box-shadow:var(--card-shadow); transition:box-shadow 0.18s ease, transform 0.18s ease; }
+.node:hover { box-shadow:var(--card-shadow-lg); transform:translateY(-2px); }
+.node.sel { background:color-mix(in srgb, var(--accent) 14%, var(--panel)); box-shadow:var(--card-shadow-lg); transform:translateY(-2px); }
+.node.sel.st-failed, .node.sel.st-contract_failed { background:color-mix(in srgb, var(--bad) 14%, var(--panel)); }
+/* keyboard focus ring only — never on mouse click */
+.node:focus:not(:focus-visible) { outline:none; }
+.node.st-running { background:color-mix(in srgb, var(--accent) 10%, var(--panel)); }
+.node.st-failed, .node.st-contract_failed { background:color-mix(in srgb, var(--bad) 11%, var(--panel)); }
+.card-body { padding:13px 14px; }
+.node-header { display:flex; align-items:center; gap:7px; }
+.node-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+.node-dot.pulse { animation:pulse 1.6s ease-in-out infinite; }
+.node-header .id { flex:1; }
+.node-header .badge { margin-left:auto; }
+.id { font-weight:700; font-size:16px; letter-spacing:-0.01em; color:var(--hdr); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.badge { font-size:11px; padding:1px 7px; border:1px solid var(--line); border-radius:10px; color:var(--muted); white-space:nowrap; }
+.status-row { margin-top:7px; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
+.status-row .st-word { color:var(--fg); font-weight:600; }
+.spinner { width:10px; height:10px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:spin 1s linear infinite; display:inline-block; flex-shrink:0; }
+@keyframes spin { to { transform:rotate(360deg); } }
+.stats { margin-top:4px; font-size:13px; color:var(--muted); }
+.outputs { margin-top:6px; }
+.out-chip { display:inline-block; font-size:11px; line-height:1.5; border:1px solid var(--line); border-radius:8px; padding:5px 8px; margin:4px 4px 0 0; color:var(--muted); background:var(--bg); }
+.flags { margin-top:6px; font-size:11px; color:var(--warn); }
+.flags span { cursor:help; }
+.note { margin-top:6px; font-size:13px; color:var(--warn); }
+#side { width:420px; flex:0 0 auto; border-left:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; background:var(--bg); }
+#side:focus, #side:focus-visible { outline:none; }
+.side-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; flex-shrink:0; gap:6px; padding:12px 12px 8px; border-bottom:1px solid var(--line); background:var(--bg); }
+.side-head .side-meta { display:flex; gap:6px; width:100%; }
+.side-head .side-meta-chip { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:2px 6px; white-space:nowrap; }
+.side-head .meta { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:4px; }
+.side-head .side-hash { color:var(--muted); font-weight:400; }
+.side-head .side-id { font-weight:700; color:var(--hdr); font-size:15px; letter-spacing:-0.01em; }
+.side-body { flex:1; overflow:auto; padding:8px 12px 12px; }
+.taskbox-side { border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:10px; white-space:pre-wrap; word-break:break-word; font-size:13px; }
+.msg { margin-bottom:10px; padding:8px; border-radius:6px; background:var(--panel); white-space:pre-wrap; word-break:break-word; }
+.msg .role { font-weight:700; margin-bottom:4px; }
+.role-user { color:var(--accent); } .role-assistant { color:var(--ok); } .role-tool { color:var(--warn); }
+.collapsible { position:sticky; top:8px; z-index:1; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; background:var(--bg); }
+.collapsible-head { display:flex; align-items:center; gap:6px; width:100%; padding:8px; background:transparent; border:none; font:inherit; font-size:12px; color:var(--muted); cursor:pointer; text-align:left; }
+.collapsible-head:hover { background:var(--panel); }
+.collapsible-body { padding:8px; border-top:1px solid var(--line); white-space:pre-wrap; word-break:break-word; font-size:13px; max-height:260px; overflow:auto; }
+.collapsible.collapsed .collapsible-body { display:none; }
+.collapsible .chevron { display:inline-block; transition:transform .15s; }
+.collapsible.collapsed .chevron { transform:rotate(-90deg); }
+.timeline { margin-bottom:12px; }
+.timeline-action { background:var(--panel); border-radius:5px; margin-bottom:5px; }
+.timeline-action.open { background:var(--panel-2); }
+.timeline-action.action-error { border-left:3px solid var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--panel)); }
+.timeline-row { display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:12px; }
+.timeline-row .action-icon { flex-shrink:0; width:34px; text-align:center; color:var(--accent); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.02em; }
+.timeline-row .action-name { flex-shrink:0; font-weight:600; min-width:48px; font-size:12px; white-space:nowrap; }
+.timeline-row .action-detail { flex:1; min-width:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
+.timeline-row .action-error { color:var(--bad); }
+.timeline-row .ts { flex-shrink:0; color:var(--wire); font-size:11px; font-variant-numeric:tabular-nums; }
+.timeline-msg { padding:8px; margin-bottom:6px; border-radius:5px; background:var(--panel); font-size:13px; }
+.timeline-msg.user { border-left:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--panel)); }
+.timeline-msg.assistant { border-left:1px solid var(--ok); background:color-mix(in srgb, var(--ok) 5%, var(--panel)); }
+.timeline-msg .role { font-weight:700; margin-bottom:4px; }
+.timeline-msg .timeline-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
+.timeline-msg .timeline-meta .ts { color:var(--wire); font-size:11px; }
+.timeline-msg .timeline-text { white-space:pre-wrap; word-break:break-word; }
+.timeline-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 8px; color:var(--muted); font-size:13px; }
+.timeline-empty { padding:16px 8px; color:var(--muted); font-size:13px; text-align:center; }
+.activity-toggle { flex-shrink:0; width:18px; height:18px; padding:0; background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--muted); cursor:pointer; font-size:11px; line-height:1; }
+.activity-toggle:hover { background:var(--bg); color:var(--fg); }
+.activity-body { padding:8px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); font-family:var(--mono); white-space:pre-wrap; word-break:break-word; }
+.activity-body pre { margin:0; background:var(--bg); padding:8px; border-radius:4px; overflow:auto; font-size:11px; }
+.react-flow__minimap-node.st-completed { fill:var(--ok); }
+.react-flow__minimap-node.st-running { fill:var(--accent); }
+.react-flow__minimap-node.st-failed, .react-flow__minimap-node.st-contract_failed { fill:var(--bad); }
+.react-flow__minimap-node.st-killed, .react-flow__minimap-node.st-blocked { fill:var(--wire); }
+.react-flow__minimap-node.st-pending, .react-flow__minimap-node.st-ready { fill:var(--line); }
+/* header status strip */
+.spacer { flex:1; }
+.fleet-title { font-weight:700; font-size:16px; color:var(--hdr); max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.stat { display:inline-flex; align-items:center; gap:5px; color:var(--muted); }
+.pill.status-running { color:var(--accent); border-color:var(--accent); }
+.pill.status-completed { color:var(--ok); border-color:var(--ok); }
+.pill.status-failed, .pill.status-contract_failed { color:var(--bad); border-color:var(--bad); }
+.pill-bad { color:var(--bad); border-color:var(--bad); }
+.pill-btn { display:inline-flex; align-items:center; min-height:24px; cursor:pointer; font:inherit; padding:3px 9px; }
+.pill-btn:hover { background:var(--bg); }
+.dot-run { background:var(--accent); animation:pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
+.conn { display:inline-flex; align-items:center; gap:8px; }
+.link-btn { display:inline-flex; align-items:center; min-height:24px; background:none; border:none; padding:2px 8px; color:var(--accent); text-decoration:underline; cursor:pointer; }
+button.toggled { border-color:var(--accent); color:var(--accent); }
+/* legend */
+.legend { position:absolute; left:12px; bottom:12px; z-index:20; min-width:190px; padding:10px 12px; background:var(--panel); border-radius:12px; box-shadow:var(--card-shadow-lg); font-size:13px; }
+.legend-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
+.legend-row { display:flex; align-items:center; gap:9px; padding:2px 0; }
+.swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; background:var(--line); }
+.swatch.st-completed { background:var(--ok); }
+.swatch.st-running { background:var(--accent); }
+.swatch.st-failed { background:var(--bad); }
+.swatch.st-blocked { background:var(--wire); }
+.swatch.st-pending { background:var(--line); }
+.swatch-line { width:16px; height:0; border-top:2px dashed var(--warn); flex-shrink:0; }
+.legend-loop { color:var(--warn); margin-top:2px; }
+.icon-btn.sm { width:24px; height:24px; min-height:24px; font-size:16px; }
+/* empty state */
+.empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; }
+.empty-title { font-size:19px; font-weight:700; color:var(--hdr); }
+.empty-body { max-width:460px; margin:0; color:var(--muted); }
+.empty-steps { max-width:460px; margin:0; text-align:left; color:var(--muted); line-height:1.8; padding-left:18px; }
+.empty code { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
+.empty-cta { border-color:var(--accent); color:var(--accent); padding:8px 16px; }
+.empty-cta:hover { background:var(--panel); }
+/* failure reason surfaced on failed cards */
+.fail-reason { margin-top:6px; font-size:13px; color:var(--bad); }
+/* respect reduced-motion: keep the state, drop the perpetual movement */
+@media (prefers-reduced-motion: reduce) {
+  .spinner { animation:none; border-top-color:var(--accent); opacity:0.6; }
+  .dot-run, .node-dot.pulse { animation:none; }
+  .node:hover { transform:none; }
+  .react-flow__edge.animated .react-flow__edge-path { animation:none; }
+  * { scroll-behavior:auto; }
 }
-
-/* fleet picker */
-function loadFleets(){
-  j("/api/fleets").then(function(r){
-    var selEl = document.getElementById("fleetSel");
-    var opts = ['<option value="">live fleet</option>'];
-    r.fleets.forEach(function(f){
-      opts.push('<option value="' + esc(f.name) + '">' + esc(f.name) + ' (' + esc(f.status) + ')</option>');
-    });
-    selEl.innerHTML = opts.join("");
-    var qs = new URLSearchParams(location.search);
-    var want = qs.get("fleet");
-    var saved = null;
-    try { saved = localStorage.getItem("fleet-canvas-fleet"); } catch(e) {}
-    var pick = want || saved || "";
-    if(pick && r.fleets.some(function(f){ return f.name === pick; })){
-      currentFleet = pick;
-      selEl.value = pick;
-    }
-    tick();
-    var qs = new URLSearchParams(location.search);
-    var pre = qs.get("node");
-    if(pre) sel(pre);
-  }).catch(function(){
-    tick();
-    var qs = new URLSearchParams(location.search);
-    var pre = qs.get("node");
-    if(pre) sel(pre);
-  });
+/* narrow viewports: side panel overlays the stage, header controls stay reachable */
+@media (max-width:700px) {
+  .spacer { display:none; }
+  #side { position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); z-index:40; box-shadow:-10px 0 30px rgba(0,0,0,0.45); }
+  .fp-trigger { min-width:150px; }
+  .legend { bottom:auto; top:12px; }
 }
-document.getElementById("fleetSel").addEventListener("change", function(e){
-  currentFleet = e.target.value || null;
-  try { localStorage.setItem("fleet-canvas-fleet", currentFleet || ""); } catch(err) {}
-  selected = null;
-  document.getElementById("side").classList.remove("open");
-  tick();
-});
+`;
 
-loadFleets();
-setInterval(tick, 1500);
-setInterval(side, 2000);
-</script>
+/** Full canvas HTML page with the React/@xyflow bundle inlined. Cached after first build. */
+export async function renderCanvasPage(): Promise<string> {
+  bundleCache ??= buildClientBundle();
+  const [bundle] = await Promise.all([bundleCache]);
+  return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>fleet canvas</title>
+<style>${flowCss()}</style>
+<style>${PAGE_CSS}</style>
+</head>
+<body>
+<div id="root"></div>
+<script>${bundle}</script>
 </body>
 </html>`;
 }
 
-export interface FleetRootInfo {
-  name: string;
-  root: string;
-  status: string;
-  created_at: string;
-}
-
-export async function readDiskFleet(fleetRoot: string): Promise<ActiveFleet> {
-  const spec = JSON.parse(await readFile(join(fleetRoot, "fleet.json"), "utf-8")) as FleetSpec;
-  const state = await readState(fleetRoot);
-  return {
-    spec,
-    fleetRoot,
-    state,
-    killSwitch: { killed: false },
-    pauseSwitch: { paused: false },
-    running: false,
-    sessions: new Map(),
-    killedNodes: new Set(),
-  };
-}
-
-export async function listFleetRoots(cwd: string): Promise<FleetRootInfo[]> {
-  const base = join(cwd, ".fleet");
-  let entries: string[];
-  try {
-    entries = await readdir(base);
-  } catch {
-    return [];
-  }
-  const out: FleetRootInfo[] = [];
-  for (const name of entries) {
-    const root = join(base, name);
-    try {
-      const s = await stat(join(root, "fleet.json"));
-      if (!s.isFile()) continue;
-      const state = JSON.parse(await readFile(join(root, "state.json"), "utf-8")) as Partial<FleetState>;
-      out.push({
-        name,
-        root,
-        status: typeof state.status === "string" ? state.status : "unknown",
-        created_at: typeof state.created_at === "string" ? state.created_at : new Date(s.mtimeMs).toISOString(),
-      });
-    } catch {
-      // not a fleet root (no fleet.json) or unreadable state — skip or mark unknown
-      try {
-        await stat(join(root, "fleet.json"));
-        out.push({ name, root, status: "unknown", created_at: "" });
-      } catch {
-        // not a fleet root
-      }
-    }
-  }
-  out.sort((a, b) => b.created_at.localeCompare(a.created_at));
-  return out;
-}
-
 export interface CanvasServer {
   url: string;
   port: number;
@@ -540,7 +864,12 @@ export async function startCanvasServer(opts: {
       const url = new URL(req.url ?? "/", "http://localhost");
       if (url.pathname === "/") {
         res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
-        res.end(renderCanvasPage());
+        res.end(await renderCanvasPage());
+        return;
+      }
+      if (url.pathname === "/api/demo") {
+        res.writeHead(200, { "content-type": "application/json" });
+        res.end(JSON.stringify(buildDemoPayload()));
         return;
       }
       const resolveFleet = async (name: string | null): Promise<ActiveFleet | undefined | "unknown"> => {
@@ -573,6 +902,14 @@ export async function startCanvasServer(opts: {
       }
       const m = url.pathname.match(/^\/api\/session\/([a-z0-9][a-z0-9-]*)$/);
       if (m) {
+        const isDemo = url.searchParams.get("demo") === "1";
+        let workerTask: string | undefined;
+        if (isDemo) {
+          const demo = buildDemoSession(m[1]);
+          res.writeHead(200, { "content-type": "application/json" });
+          res.end(JSON.stringify(demo));
+          return;
+        }
         const f = await resolveFleet(url.searchParams.get("fleet"));
         if (!f || f === "unknown" || !f.spec.workers.some((w) => w.id === m[1])) {
           res.writeHead(404);
@@ -584,12 +921,14 @@ export async function startCanvasServer(opts: {
         const file = await latestSessionFile(join(f.fleetRoot, "workers", m[1]));
         res.writeHead(200, { "content-type": "application/json" });
         const worker = f.spec.workers.find((w) => w.id === m[1]);
+        workerTask = worker?.task;
         if (!file) {
-          res.end(JSON.stringify({ entries: [], task: worker?.task }));
+          res.end(JSON.stringify({ entries: [], actions: [], events: [], task: workerTask }));
           return;
         }
         const content = await readFile(file, "utf-8");
-        res.end(JSON.stringify({ entries: parseSessionTail(content, tail), task: worker?.task }));
+        const { entries, actions, events } = parseSessionTail(content, tail);
+        res.end(JSON.stringify({ entries, actions, events, task: workerTask }));
         return;
       }
       res.writeHead(404);