speexor 0.1.1 → 0.2.1

package/dist/chunk-GOGI3JQD.js

@@ -0,0 +1,1637 @@
+import { createServer } from 'http';
+import Debug from 'debug';
+
+// src/dashboard/state.ts
+var DashboardState = class {
+  state = {
+    sessions: [],
+    worktrees: [],
+    runtimes: [],
+    projects: []
+  };
+  taskGraphs = /* @__PURE__ */ new Map();
+  agentEvents = /* @__PURE__ */ new Map();
+  approvals = [];
+  activityFeed = [];
+  costData = null;
+  decisionLogEntries = [];
+  listeners = [];
+  getState() {
+    return { ...this.state };
+  }
+  setProjects(projects) {
+    this.state.projects = projects;
+    this.notify();
+  }
+  addSession(session) {
+    this.state.sessions.push(session);
+    this.notify();
+  }
+  updateSession(sessionId, updates) {
+    const idx = this.state.sessions.findIndex((s) => s.id === sessionId);
+    if (idx !== -1) {
+      const entry = this.state.sessions[idx];
+      if (entry) {
+        if (updates.id !== void 0) entry.id = updates.id;
+        if (updates.taskId !== void 0) entry.taskId = updates.taskId;
+        if (updates.provider !== void 0) entry.provider = updates.provider;
+        if (updates.status !== void 0) entry.status = updates.status;
+        if (updates.startedAt !== void 0) entry.startedAt = updates.startedAt;
+        if (updates.runtimeSessionId !== void 0) entry.runtimeSessionId = updates.runtimeSessionId;
+        this.notify();
+      }
+    }
+  }
+  removeSession(sessionId) {
+    this.state.sessions = this.state.sessions.filter((s) => s.id !== sessionId);
+    this.notify();
+  }
+  addWorktree(worktree) {
+    this.state.worktrees.push(worktree);
+    this.notify();
+  }
+  removeWorktree(sessionId) {
+    this.state.worktrees = this.state.worktrees.filter((w) => w.id !== sessionId);
+    this.notify();
+  }
+  addRuntime(runtime) {
+    this.state.runtimes.push(runtime);
+    this.notify();
+  }
+  removeRuntime(sessionId) {
+    this.state.runtimes = this.state.runtimes.filter((r) => r.id !== sessionId);
+    this.notify();
+  }
+  updateTaskGraph(graph) {
+    this.taskGraphs.set(graph.id, graph);
+    this.notify();
+  }
+  getTaskGraph(id) {
+    return this.taskGraphs.get(id);
+  }
+  getTaskGraphs() {
+    return Array.from(this.taskGraphs.values());
+  }
+  addAgentEvent(event) {
+    const events = this.agentEvents.get(event.agentId) ?? [];
+    events.push(event);
+    if (events.length > 500) events.shift();
+    this.agentEvents.set(event.agentId, events);
+    this.notify();
+  }
+  getAgentEvents(agentId) {
+    if (agentId) return this.agentEvents.get(agentId) ?? [];
+    const all = [];
+    for (const events of this.agentEvents.values()) {
+      all.push(...events);
+    }
+    return all.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+  }
+  getAgentEventsByTask(taskId) {
+    const result = [];
+    for (const events of this.agentEvents.values()) {
+      for (const e of events) {
+        if (e.taskId === taskId) result.push(e);
+      }
+    }
+    return result.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+  }
+  addApproval(item) {
+    this.approvals.push(item);
+    this.notify();
+  }
+  resolveApproval(id, status) {
+    const item = this.approvals.find((a) => a.id === id);
+    if (item) {
+      item.status = status;
+      this.notify();
+    }
+  }
+  getApprovals() {
+    return [...this.approvals];
+  }
+  getPendingApprovals() {
+    return this.approvals.filter((a) => a.status === "pending");
+  }
+  updateActivityFeed(entry) {
+    this.activityFeed.push(entry);
+    if (this.activityFeed.length > 1e3) this.activityFeed.shift();
+    this.notify();
+  }
+  getActivityFeed(limit) {
+    const feed = [...this.activityFeed].reverse();
+    return limit ? feed.slice(0, limit) : feed;
+  }
+  updateCostData(data) {
+    this.costData = data;
+    this.notify();
+  }
+  getCostData() {
+    return this.costData;
+  }
+  addDecisionLogEntry(entry) {
+    this.decisionLogEntries.push(entry);
+    this.notify();
+  }
+  getDecisionLogEntries() {
+    return [...this.decisionLogEntries];
+  }
+  getDecisionLog() {
+    return [...this.decisionLogEntries].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+  }
+  onUpdate(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+  toJSON() {
+    return {
+      ...this.state,
+      taskGraphs: Array.from(this.taskGraphs.entries()).map(([, graph]) => ({
+        ...graph,
+        nodes: Array.from(graph.nodes.values())
+      })),
+      agentEvents: Array.from(this.agentEvents.entries()).map(([agentId, events]) => ({
+        agentId,
+        events: events.map((e) => ({
+          ...e,
+          timestamp: e.timestamp.toISOString()
+        }))
+      })),
+      approvals: this.approvals.map((a) => ({
+        ...a,
+        createdAt: a.createdAt.toISOString(),
+        expiresAt: a.expiresAt?.toISOString()
+      })),
+      activityFeed: this.activityFeed.map((e) => ({
+        ...e,
+        timestamp: e.timestamp.toISOString()
+      })),
+      costData: this.costData,
+      decisionLogEntries: this.decisionLogEntries.map((e) => ({
+        ...e,
+        createdAt: e.createdAt.toISOString()
+      }))
+    };
+  }
+};
+var debug = Debug("speexor:dashboard");
+var DashboardServer = class {
+  server;
+  lifecycle;
+  state;
+  port;
+  routes = [];
+  sseClients = [];
+  heartbeatTimer = null;
+  constructor(lifecycle, port = 7777) {
+    this.lifecycle = lifecycle;
+    this.state = new DashboardState();
+    this.port = port;
+    this.state.setProjects(lifecycle.getConfig().projects);
+    lifecycle.eventBus.on("session:created", (data) => {
+      const { session } = data;
+      this.state.addSession(session);
+      this.broadcastSSE("agent-update", { session });
+    });
+    lifecycle.eventBus.on("session:completed", (data) => {
+      const { sessionId } = data;
+      this.state.removeSession(sessionId);
+      this.broadcastSSE("agent-update", { sessionId, status: "completed" });
+    });
+    lifecycle.eventBus.on("session:status-changed", (data) => {
+      const { sessionId, status } = data;
+      this.state.updateSession(sessionId, {
+        status
+      });
+      this.broadcastSSE("agent-update", { sessionId, status });
+    });
+    lifecycle.eventBus.on("task:created", (data) => {
+      this.broadcastSSE("task-update", data);
+    });
+    lifecycle.eventBus.on("task:status-changed", (data) => {
+      this.broadcastSSE("task-update", data);
+    });
+    lifecycle.eventBus.on("task:completed", (data) => {
+      this.broadcastSSE("task-update", data);
+    });
+    lifecycle.eventBus.on("approval:created", (data) => {
+      this.broadcastSSE("approval-update", data);
+    });
+    lifecycle.eventBus.on("approval:resolved", (data) => {
+      this.broadcastSSE("approval-update", data);
+    });
+    lifecycle.eventBus.on("cost:recorded", (data) => {
+      this.broadcastSSE("cost-update", data);
+    });
+    lifecycle.eventBus.on("agent:event", (data) => {
+      this.broadcastSSE("activity", data);
+    });
+    this.setupRoutes();
+    this.server = createServer((req, res) => this.handleRequest(req, res));
+  }
+  setupRoutes() {
+    this.routes = [
+      {
+        method: "GET",
+        path: "/api/status",
+        handler: this.handleStatus.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/projects",
+        handler: this.handleProjects.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/sessions",
+        handler: this.handleSessions.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/health",
+        handler: this.handleHealth.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/events",
+        handler: this.handleSSE.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/task-graphs",
+        handler: this.handleTaskGraphs.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/task-graphs/:id",
+        handler: this.handleTaskGraphById.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/approvals",
+        handler: this.handleApprovals.bind(this)
+      },
+      {
+        method: "POST",
+        path: "/api/approvals/:id/approve",
+        handler: this.handleApproveApproval.bind(this)
+      },
+      {
+        method: "POST",
+        path: "/api/approvals/:id/reject",
+        handler: this.handleRejectApproval.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/activity-feed",
+        handler: this.handleActivityFeed.bind(this)
+      },
+      { method: "GET", path: "/api/cost", handler: this.handleCost.bind(this) },
+      {
+        method: "GET",
+        path: "/api/eval/calibration",
+        handler: this.handleEvalCalibration.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/task-graphs/:id/nodes/:nodeId",
+        handler: this.handleTaskGraphNode.bind(this)
+      },
+      {
+        method: "GET",
+        path: "/api/decision-log",
+        handler: this.handleDecisionLog.bind(this)
+      },
+      {
+        method: "POST",
+        path: "/api/approvals/:id/rollback",
+        handler: this.handleRollbackApproval.bind(this)
+      }
+    ];
+  }
+  async handleRequest(req, res) {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const pathname = url.pathname;
+    for (const route of this.routes) {
+      if (req.method === route.method) {
+        const params = this.matchPath(route.path, pathname);
+        if (params !== null) {
+          try {
+            await route.handler(req, res, params);
+          } catch (error) {
+            this.sendJSON(res, 500, { error: String(error) });
+          }
+          return;
+        }
+      }
+    }
+    if (pathname === "/" || pathname === "/dashboard") {
+      this.serveDashboardHTML(res);
+      return;
+    }
+    this.sendJSON(res, 404, { error: "Not found" });
+  }
+  matchPath(pattern, pathname) {
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = pathname.split("/").filter(Boolean);
+    if (patternParts.length !== pathParts.length) return null;
+    const params = {};
+    for (let i = 0; i < patternParts.length; i++) {
+      const pp = patternParts[i];
+      if (pp && pp.startsWith(":")) {
+        params[pp.slice(1)] = decodeURIComponent(pathParts[i] ?? "");
+      } else if (pp !== pathParts[i]) {
+        return null;
+      }
+    }
+    return params;
+  }
+  sendJSON(res, status, data) {
+    res.writeHead(status, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(data));
+  }
+  broadcastSSE(type, payload) {
+    const data = JSON.stringify({ type, payload });
+    const message = `data: ${data}
+
+`;
+    for (const client of this.sseClients) {
+      try {
+        client.write(message);
+      } catch {
+      }
+    }
+  }
+  handleStatus(_req, res) {
+    this.sendJSON(res, 200, {
+      status: this.lifecycle.getStatus(),
+      projectCount: this.lifecycle.getConfig().projects.length,
+      activeSessions: this.lifecycle.listSessions().length,
+      uptime: process.uptime()
+    });
+  }
+  handleProjects(_req, res) {
+    this.sendJSON(res, 200, {
+      projects: this.lifecycle.getConfig().projects
+    });
+  }
+  handleSessions(_req, res) {
+    this.sendJSON(res, 200, {
+      sessions: this.lifecycle.listSessions(),
+      worktrees: [],
+      runtimes: []
+    });
+  }
+  handleHealth(_req, res) {
+    this.sendJSON(res, 200, {
+      status: "healthy",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      memory: process.memoryUsage()
+    });
+  }
+  handleSSE(req, res) {
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      "Access-Control-Allow-Origin": "*"
+    });
+    const costData = this.state.getCostData();
+    const initPayload = {
+      status: this.lifecycle.getStatus(),
+      projects: this.lifecycle.getConfig().projects,
+      sessions: this.lifecycle.listSessions(),
+      taskGraphs: this.state.getTaskGraphs().map((g) => ({
+        ...g,
+        nodes: Array.from(g.nodes.values())
+      })),
+      approvals: this.state.getPendingApprovals(),
+      allApprovals: this.state.getApprovals(),
+      activityFeed: this.state.getActivityFeed(50),
+      costData,
+      decisionLog: this.state.getDecisionLog().slice(0, 50)
+    };
+    res.write(`data: ${JSON.stringify({ type: "init", payload: initPayload })}
+
+`);
+    this.sseClients.push(res);
+    req.on("close", () => {
+      this.sseClients = this.sseClients.filter((c) => c !== res);
+    });
+  }
+  handleTaskGraphs(_req, res) {
+    const graphs = this.state.getTaskGraphs().map((g) => ({
+      ...g,
+      nodes: Array.from(g.nodes.values())
+    }));
+    this.sendJSON(res, 200, { taskGraphs: graphs });
+  }
+  handleTaskGraphById(_req, res, params) {
+    const graph = this.state.getTaskGraph(params["id"] ?? "");
+    if (!graph) {
+      this.sendJSON(res, 404, { error: "Task graph not found" });
+      return;
+    }
+    this.sendJSON(res, 200, {
+      ...graph,
+      nodes: Array.from(graph.nodes.values()).sort((a, b) => a.depth - b.depth || a.createdAt.getTime() - b.createdAt.getTime())
+    });
+  }
+  handleApprovals(_req, res) {
+    this.sendJSON(res, 200, {
+      pending: this.state.getPendingApprovals(),
+      all: this.state.getApprovals()
+    });
+  }
+  handleApproveApproval(_req, res, params) {
+    const id = params["id"] ?? "";
+    this.state.resolveApproval(id, "approved");
+    this.broadcastSSE("approval-update", {
+      approvalId: id,
+      status: "approved"
+    });
+    this.sendJSON(res, 200, { status: "approved", id });
+  }
+  handleRejectApproval(_req, res, params) {
+    const id = params["id"] ?? "";
+    this.state.resolveApproval(id, "rejected");
+    this.broadcastSSE("approval-update", {
+      approvalId: id,
+      status: "rejected"
+    });
+    this.sendJSON(res, 200, { status: "rejected", id });
+  }
+  handleActivityFeed(_req, res) {
+    const feed = this.state.getActivityFeed(100);
+    this.sendJSON(res, 200, { entries: feed });
+  }
+  handleCost(_req, res) {
+    const data = this.state.getCostData();
+    this.sendJSON(
+      res,
+      200,
+      data ?? {
+        totalCost: 0,
+        byProvider: [],
+        byProject: [],
+        recentEntries: [],
+        budgetExceeded: false
+      }
+    );
+  }
+  handleTaskGraphNode(_req, res, params) {
+    const graphId = params["id"] ?? "";
+    const nodeId = params["nodeId"] ?? "";
+    const graph = this.state.getTaskGraph(graphId);
+    if (!graph) {
+      this.sendJSON(res, 404, { error: "Task graph not found" });
+      return;
+    }
+    const node = graph.nodes.get(nodeId);
+    if (!node) {
+      this.sendJSON(res, 404, { error: "Task node not found" });
+      return;
+    }
+    this.sendJSON(res, 200, {
+      ...node,
+      createdAt: node.createdAt.toISOString(),
+      updatedAt: node.updatedAt.toISOString(),
+      result: node.result ? {
+        ...node.result
+      } : void 0
+    });
+  }
+  handleDecisionLog(_req, res) {
+    const entries = this.state.getDecisionLog();
+    this.sendJSON(res, 200, { entries });
+  }
+  handleRollbackApproval(_req, res, params) {
+    const id = params["id"] ?? "";
+    try {
+      this.state.resolveApproval(id, "pending");
+      this.broadcastSSE("approval-update", { approvalId: id, status: "pending" });
+      this.sendJSON(res, 200, { status: "rolled-back", id });
+    } catch (e) {
+      this.sendJSON(res, 400, { error: String(e) });
+    }
+  }
+  handleEvalCalibration(_req, res) {
+    const entries = this.state.getDecisionLogEntries();
+    const total = entries.length;
+    const labeled = entries.filter((e) => e.outcome && e.outcome !== "unknown");
+    const autoExecuted = entries.filter((e) => e.wasAutoExecuted);
+    const byConfidence = {};
+    for (const e of entries) {
+      const bucket = e.confidence < 0.3 ? "low" : e.confidence < 0.7 ? "medium" : "high";
+      byConfidence[bucket] = (byConfidence[bucket] ?? 0) + 1;
+    }
+    this.sendJSON(res, 200, {
+      totalDecisions: total,
+      labeledCount: labeled.length,
+      autoExecutedCount: autoExecuted.length,
+      byConfidence,
+      unlabeledCount: entries.filter((e) => !e.outcome || e.outcome === "unknown").length
+    });
+  }
+  serveDashboardHTML(res) {
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+<title>Speexor Dashboard v2</title>
+<style>
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #1c2333;
+  --bg-hover: #1c2128;
+  --border: #30363d;
+  --border-light: #21262d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #484f58;
+  --accent-blue: #58a6ff;
+  --accent-green: #3fb950;
+  --accent-red: #f85149;
+  --accent-yellow: #d29922;
+  --accent-orange: #db6d28;
+  --accent-purple: #bc8cff;
+  --accent-cyan: #39d2c0;
+  --accent-gray: #8b949e;
+  --accent-darkred: #da3633;
+  --status-pending: #8b949e;
+  --status-decomposing: #d29922;
+  --status-ready: #58a6ff;
+  --status-in-progress: #3fb950;
+  --status-blocked: #f85149;
+  --status-review: #bc8cff;
+  --status-done: #484f58;
+  --status-failed: #da3633;
+  --radius: 8px;
+  --radius-sm: 4px;
+  --font-mono: 'SF Mono','Fira Code','Cascadia Code',Consolas,monospace;
+  --transition: 150ms ease;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; }
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+.app-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
+.app-header .brand { display: flex; align-items: center; gap: 0.75rem; }
+.app-header .brand h1 { font-size: 1.15rem; font-weight: 600; color: var(--accent-blue); letter-spacing: -0.02em; }
+.app-header .brand h1 span { color: var(--text-secondary); font-weight: 400; }
+.app-header .brand .version { font-size: 0.65rem; color: var(--text-muted); background: var(--bg-tertiary); padding: 0.125rem 0.4rem; border-radius: 3px; font-family: var(--font-mono); }
+.header-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.8rem; }
+.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; }
+.status-dot.online { background: var(--accent-green); box-shadow: 0 0 6px rgba(63,185,80,0.4); }
+.status-dot.offline { background: var(--accent-red); }
+.header-time { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.75rem; }
+
+.tab-bar { display: flex; gap: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 0 1.5rem; overflow-x: auto; }
+.tab-btn { padding: 0.65rem 1.15rem; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); white-space: nowrap; }
+.tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
+.tab-btn.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
+.tab-btn .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.65rem; font-weight: 600; border-radius: 9px; background: var(--accent-red); color: #fff; margin-left: 0.4rem; vertical-align: middle; }
+
+.panel { display: none; padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
+.panel.active { display: block; }
+
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+.stat-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; transition: var(--transition); }
+.stat-card:hover { border-color: var(--text-muted); }
+.stat-card .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.4rem; }
+.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
+.stat-card .stat-value.blue { color: var(--accent-blue); }
+.stat-card .stat-value.green { color: var(--accent-green); }
+.stat-card .stat-value.yellow { color: var(--accent-yellow); }
+.stat-card .stat-value.red { color: var(--accent-red); }
+.stat-card .stat-value.purple { color: var(--accent-purple); }
+.stat-card .stat-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
+
+.section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 0.5rem; }
+.section-title .count { font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-tertiary); padding: 0.1rem 0.45rem; border-radius: 3px; font-weight: 400; }
+
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
+th { color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
+td { color: var(--text-primary); }
+tr:hover td { background: var(--bg-hover); }
+tr:last-child td { border-bottom: none; }
+
+.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: 999px; }
+.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
+.status-pending { color: var(--status-pending); }
+.status-pending .dot { background: var(--status-pending); }
+.status-decomposing { color: var(--status-decomposing); }
+.status-decomposing .dot { background: var(--status-decomposing); }
+.status-ready { color: var(--status-ready); }
+.status-ready .dot { background: var(--status-ready); }
+.status-in_progress, .status-in-progress, .status-running { color: var(--status-in-progress); }
+.status-in_progress .dot, .status-running .dot { background: var(--status-in-progress); }
+.status-blocked { color: var(--status-blocked); }
+.status-blocked .dot { background: var(--status-blocked); }
+.status-review { color: var(--status-review); }
+.status-review .dot { background: var(--status-review); }
+.status-done, .status-completed { color: var(--status-done); }
+.status-done .dot, .status-completed .dot { background: var(--status-done); }
+.status-failed { color: var(--status-failed); }
+.status-failed .dot { background: var(--status-failed); }
+
+.agent-tag { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.72rem; font-weight: 500; background: var(--bg-tertiary); color: var(--accent-blue); font-family: var(--font-mono); }
+.agent-tag.claude-code { color: var(--accent-purple); }
+.agent-tag.aider { color: var(--accent-green); }
+.agent-tag.codex { color: var(--accent-yellow); }
+
+.task-tree { font-family: var(--font-mono); font-size: 0.82rem; }
+.task-node { padding: 0.45rem 0.75rem; border-left: 2px solid var(--border); margin: 0.15rem 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: var(--transition); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.task-node:hover { background: var(--bg-hover); border-left-color: var(--accent-blue); }
+.task-node .node-depth { color: var(--text-muted); font-size: 0.7rem; min-width: 1.5rem; }
+.task-node .node-title { flex: 1; }
+.task-node .node-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-secondary); }
+.task-node .node-skills { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.task-node .node-skills .skill-chip { font-size: 0.65rem; padding: 0.05rem 0.35rem; border-radius: 3px; background: var(--bg-tertiary); color: var(--accent-cyan); }
+.task-deps { font-size: 0.7rem; color: var(--text-muted); padding: 0.15rem 0 0.15rem 1.5rem; }
+.task-deps::before { content: 'depends on: '; color: var(--text-muted); }
+
+.graph-selector { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; }
+.graph-selector select { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; }
+.graph-selector select:focus { outline: none; border-color: var(--accent-blue); }
+.graph-status { font-size: 0.8rem; color: var(--text-secondary); }
+
+.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
+.agent-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: var(--transition); }
+.agent-card:hover { border-color: var(--text-muted); }
+.agent-card .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
+.agent-card .card-header .agent-id { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--accent-blue); word-break: break-all; }
+.agent-card .card-detail { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.25rem 0; }
+.agent-card .card-detail .label { color: var(--text-secondary); }
+.agent-card .card-detail .value { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.78rem; }
+
+.approval-actions { display: flex; gap: 0.5rem; }
+.btn { padding: 0.35rem 0.85rem; border: none; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.25rem; }
+.btn-approve { background: #1a3a2a; color: var(--accent-green); border: 1px solid var(--accent-green); }
+.btn-approve:hover { background: #238636; color: #fff; }
+.btn-reject { background: #3d1c1c; color: var(--accent-red); border: 1px solid var(--accent-red); }
+.btn-reject:hover { background: #da3633; color: #fff; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.risk-low { color: var(--accent-green); }
+.risk-medium { color: var(--accent-yellow); }
+.risk-high { color: var(--accent-red); }
+
+.activity-feed { max-height: 600px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); }
+.feed-entry { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-light); font-size: 0.8rem; display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); }
+.feed-entry:last-child { border-bottom: none; }
+.feed-entry .feed-time { color: var(--text-muted); font-size: 0.7rem; min-width: 7ch; flex-shrink: 0; }
+.feed-entry .feed-agent { color: var(--accent-blue); min-width: 12ch; }
+.feed-entry .feed-type { color: var(--accent-purple); min-width: 10ch; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
+.feed-entry .feed-summary { color: var(--text-primary); flex: 1; }
+.feed-entry .feed-skills { color: var(--accent-cyan); font-size: 0.7rem; }
+.feed-entry .feed-file { color: var(--accent-yellow); font-size: 0.7rem; }
+
+.cost-hero { text-align: center; padding: 2rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5rem; }
+.cost-hero .amount { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
+.cost-hero .amount.under { color: var(--accent-green); }
+.cost-hero .amount.over { color: var(--accent-red); }
+.cost-hero .sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; }
+.budget-bar { max-width: 400px; margin: 1rem auto 0; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
+.budget-bar .fill { height: 100%; border-radius: 3px; transition: width var(--transition); }
+.budget-bar .fill.safe { background: var(--accent-green); }
+.budget-bar .fill.warn { background: var(--accent-yellow); }
+.budget-bar .fill.danger { background: var(--accent-red); }
+
+.cost-breakdowns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
+.cost-section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
+.cost-section h3 { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
+.bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
+.bar-row .bar-label { font-size: 0.78rem; min-width: 12ch; color: var(--text-primary); }
+.bar-row .bar-track { flex: 1; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
+.bar-row .bar-fill { height: 100%; border-radius: 4px; background: var(--accent-blue); transition: width 0.5s ease; }
+.bar-row .bar-fill.green { background: var(--accent-green); }
+.bar-row .bar-fill.purple { background: var(--accent-purple); }
+.bar-row .bar-fill.yellow { background: var(--accent-yellow); }
+.bar-row .bar-fill.orange { background: var(--accent-orange); }
+.bar-row .bar-value { font-size: 0.78rem; font-family: var(--font-mono); min-width: 8ch; text-align: right; color: var(--text-primary); }
+
+.cost-entries { max-height: 300px; overflow-y: auto; }
+.cost-entry { padding: 0.35rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.78rem; display: flex; justify-content: space-between; font-family: var(--font-mono); }
+.cost-entry:last-child { border-bottom: none; }
+.cost-entry .ce-provider { color: var(--accent-blue); }
+.cost-entry .ce-task { color: var(--text-muted); }
+.cost-entry .ce-amount { color: var(--text-primary); }
+
+.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
+.empty-state .icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; }
+.empty-state p { font-size: 0.9rem; }
+
+.footer { margin-top: 2rem; padding: 1rem 0; text-align: center; color: var(--text-muted); font-size: 0.75rem; border-top: 1px solid var(--border-light); }
+
+/* FR-80: Keyboard navigation focus */
+.tab-btn:focus-visible, .btn:focus-visible, select:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
+.btn:focus-visible { outline: 2px solid var(--accent-blue); }
+a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
+
+/* FR-81: Simple mode toggle */
+.simple-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
+.simple-toggle input { appearance: none; width: 36px; height: 20px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px; position: relative; cursor: pointer; transition: var(--transition); }
+.simple-toggle input:checked { background: var(--accent-blue); border-color: var(--accent-blue); }
+.simple-toggle input::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--text-primary); top: 1px; left: 1px; transition: var(--transition); }
+.simple-toggle input:checked::before { left: 17px; }
+.panel.simple-hidden { display: none !important; }
+.simple-summary { display: none; text-align: center; padding: 2rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5rem; }
+.simple-summary.visible { display: block; }
+.simple-summary .big-count { font-size: 3rem; font-weight: 800; color: var(--accent-blue); }
+.simple-summary .big-label { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.25rem; }
+
+/* FR-82: Status badges with Unicode icons */
+.status-badge-icon { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: 999px; }
+
+/* FR-35: Collapsible task tree */
+.task-tree { font-family: var(--font-mono); font-size: 0.82rem; }
+.task-node-row { display: flex; align-items: stretch; cursor: pointer; transition: var(--transition); }
+.task-node-row:hover { background: var(--bg-hover); }
+.task-node-content { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; flex: 1; flex-wrap: wrap; border-left: 3px solid transparent; }
+.task-node-content.selected { border-left-color: var(--accent-blue); background: var(--bg-tertiary); }
+.task-node-content .node-toggle { color: var(--text-muted); font-size: 0.65rem; min-width: 1.2rem; text-align: center; user-select: none; }
+.task-node-content .node-title { flex: 1; word-break: break-word; }
+.task-node-content .node-meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); }
+.task-node-content .node-deps { font-size: 0.7rem; color: var(--text-muted); width: 100%; padding-left: 1.5rem; }
+.task-node-content .node-deps::before { content: '\u21B3 depends: '; color: var(--text-muted); }
+
+/* FR-38: Detail side panel */
+.graph-layout { display: flex; gap: 1rem; }
+.graph-tree-panel { flex: 1; min-width: 0; }
+.graph-detail-panel { width: 380px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: none; position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; }
+.graph-detail-panel.visible { display: block; }
+.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
+.detail-header h3 { font-size: 0.95rem; color: var(--accent-blue); word-break: break-word; }
+.detail-close { background: none; border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; padding: 0.15rem 0.45rem; border-radius: 3px; }
+.detail-close:hover { color: var(--text-primary); border-color: var(--text-muted); }
+.detail-field { margin-bottom: 0.6rem; font-size: 0.8rem; }
+.detail-field .df-label { color: var(--text-secondary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
+.detail-field .df-value { color: var(--text-primary); word-break: break-word; font-family: var(--font-mono); font-size: 0.78rem; }
+.detail-field .df-value.multiline { white-space: pre-wrap; max-height: 120px; overflow-y: auto; }
+.detail-skills { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.detail-skills .skill-chip { font-size: 0.65rem; padding: 0.05rem 0.35rem; border-radius: 3px; background: var(--bg-tertiary); color: var(--accent-cyan); }
+.detail-commands { max-height: 150px; overflow-y: auto; }
+.detail-commands .cmd-entry { font-size: 0.72rem; padding: 0.2rem 0; border-bottom: 1px solid var(--border-light); display: flex; gap: 0.5rem; }
+.detail-commands .cmd-entry:last-child { border-bottom: none; }
+.detail-commands .cmd-code { color: var(--accent-yellow); font-family: var(--font-mono); }
+
+/* Decision Log table */
+.decision-log-table { max-height: 500px; overflow-y: auto; }
+.decision-log-table td { font-size: 0.78rem; }
+
+@media (max-width: 768px) {
+  .app-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
+  .tab-bar { padding: 0 0.5rem; }
+  .tab-btn { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
+  .panel { padding: 1rem; }
+  .stats-grid { grid-template-columns: 1fr 1fr; }
+  .cost-breakdowns { grid-template-columns: 1fr; }
+  .fleet-grid { grid-template-columns: 1fr; }
+}
+</style>
+</head>
+<body>
+
+<header class="app-header">
+  <div class="brand">
+    <h1>Speexor <span>Dashboard</span></h1>
+    <span class="version">v2</span>
+  </div>
+  <div class="header-meta">
+    <label class="simple-toggle" title="Toggle simple mode (WCAG)">
+      <input type="checkbox" id="simpleToggle" onchange="toggleSimpleMode(this.checked)" />
+      <span>Simple Mode</span>
+    </label>
+    <span><span class="status-dot online" id="headerStatusDot"></span><span id="headerStatus">Running</span></span>
+    <span class="header-time" id="headerTime"></span>
+  </div>
+</header>
+
+<div class="simple-summary" id="simpleSummary">
+  <div class="big-count" id="simpleAgentCount">0</div>
+  <div class="big-label" id="simpleSummaryLabel">agents running</div>
+  <div style="margin-top:1rem;color:var(--text-muted);font-size:0.9rem;" id="simpleProjectCount"></div>
+</div>
+
+<nav class="tab-bar" id="tabBar">
+  <button class="tab-btn active" data-panel="mission">Mission Control</button>
+  <button class="tab-btn" data-panel="graph">Task Graph</button>
+  <button class="tab-btn" data-panel="fleet">Fleet</button>
+  <button class="tab-btn" data-panel="approvals">Approvals <span class="badge" id="approvalBadge">0</span></button>
+  <button class="tab-btn" data-panel="cost">Cost</button>
+  <button class="tab-btn" data-panel="extensions">Extensions</button>
+  <button class="tab-btn" data-panel="decisionlog">Decision Log</button>
+</nav>
+
+<!-- Panel: Mission Control -->
+<div class="panel active" id="panel-mission">
+  <div class="stats-grid" id="statsGrid">
+    <div class="stat-card">
+      <div class="stat-label">Projects</div>
+      <div class="stat-value blue" id="statProjects">-</div>
+      <div class="stat-sub" id="statProjectsSub">configured</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Active Agents</div>
+      <div class="stat-value green" id="statAgents">0</div>
+      <div class="stat-sub">currently running</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Task Graphs</div>
+      <div class="stat-value purple" id="statGraphs">0</div>
+      <div class="stat-sub">active decompositions</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Pending Approvals</div>
+      <div class="stat-value yellow" id="statApprovals">0</div>
+      <div class="stat-sub">awaiting decision</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Uptime</div>
+      <div class="stat-value" id="statUptime">0s</div>
+      <div class="stat-sub" id="statUptimeSub">since start</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">System</div>
+      <div class="stat-value" id="statMemory">-</div>
+      <div class="stat-sub">memory used</div>
+    </div>
+  </div>
+
+  <div class="section-title">Recent Activity</div>
+  <div class="activity-feed" id="missionFeed">
+    <div class="empty-state"><p>Waiting for activity...</p></div>
+  </div>
+</div>
+
+<!-- Panel: Task Graph -->
+<div class="panel" id="panel-graph">
+  <div class="graph-selector">
+    <label style="color:var(--text-secondary);font-size:0.82rem;">Task Graph:</label>
+    <select id="graphSelector" onchange="selectGraph(this.value)">
+      <option value="">-- No graphs --</option>
+    </select>
+    <span class="graph-status" id="graphStatus"></span>
+  </div>
+  <div class="section-title">Task Tree <span class="count" id="graphNodeCount">0 nodes</span></div>
+  <div class="graph-layout">
+    <div class="graph-tree-panel">
+      <div id="graphContainer">
+        <div class="empty-state"><p>No task graph selected</p></div>
+      </div>
+    </div>
+    <div class="graph-detail-panel" id="graphDetailPanel">
+      <div class="detail-header">
+        <h3 id="detailTitle">Task Details</h3>
+        <button class="detail-close" onclick="closeDetail()">&#10005;</button>
+      </div>
+      <div id="detailBody">
+        <div class="empty-state"><p>Select a task node to see details</p></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Panel: Fleet -->
+<div class="panel" id="panel-fleet">
+  <div class="section-title">Agent Fleet <span class="count" id="fleetCount">0</span></div>
+  <div class="fleet-grid" id="fleetGrid">
+    <div class="empty-state"><p>No active agents</p></div>
+  </div>
+</div>
+
+<!-- Panel: Approvals -->
+<div class="panel" id="panel-approvals">
+  <div class="section-title">Approval Inbox <span class="count" id="approvalCount">0</span></div>
+  <table>
+    <thead>
+      <tr><th>Title</th><th>Axis</th><th>Risk</th><th>Proposed By</th><th>Created</th><th>Actions</th></tr>
+    </thead>
+    <tbody id="approvalsBody">
+      <tr><td colspan="6" class="empty-state"><p>No pending approvals</p></td></tr>
+    </tbody>
+  </table>
+
+  <div class="section-title" style="margin-top:2rem;">All Approvals</div>
+  <table>
+    <thead>
+      <tr><th>Title</th><th>Status</th><th>Axis</th><th>Risk</th><th>Created</th><th>Actions</th></tr>
+    </thead>
+    <tbody id="allApprovalsBody">
+      <tr><td colspan="6" class="empty-state"><p>No approvals yet</p></td></tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- Panel: Cost -->
+<div class="panel" id="panel-cost">
+  <div class="cost-hero" id="costHero">
+    <div class="amount under" id="costTotal">$0.00</div>
+    <div class="sub">total estimated cost</div>
+    <div class="budget-bar" id="budgetBarContainer" style="display:none;">
+      <div class="fill safe" id="budgetFill" style="width:0%"></div>
+    </div>
+    <div class="sub" id="budgetLabel"></div>
+  </div>
+
+  <div class="cost-breakdowns">
+    <div class="cost-section">
+      <h3>By Provider</h3>
+      <div id="costByProvider"><div class="empty-state"><p>No cost data</p></div></div>
+    </div>
+    <div class="cost-section">
+      <h3>By Project</h3>
+      <div id="costByProject"><div class="empty-state"><p>No cost data</p></div></div>
+    </div>
+  </div>
+
+  <div class="section-title">Cost by Task Node <span class="count" id="costNodeCount">0 nodes</span></div>
+  <div id="costByTaskNode">
+    <div class="empty-state"><p>No per-node cost data</p></div>
+  </div>
+
+  <div class="section-title">Recent Cost Entries</div>
+  <div class="cost-entries" id="costEntries">
+    <div class="empty-state"><p>No entries yet</p></div>
+  </div>
+</div>
+
+<!-- Panel: Extensions -->
+<div class="panel" id="panel-extensions">
+  <div class="section-title">Extensions</div>
+  <div class="empty-state">
+    <div class="icon">&#9881;</div>
+    <p>Extension marketplace coming soon</p>
+  </div>
+</div>
+
+<!-- Panel: Decision Log -->
+<div class="panel" id="panel-decisionlog">
+  <div class="section-title">Decision Log <span class="count" id="decisionLogCount">0</span></div>
+  <div class="decision-log-table">
+    <table>
+      <thead>
+        <tr><th>Time</th><th>Agent</th><th>Action</th><th>Confidence</th><th>Auto-Exec</th><th>Outcome</th></tr>
+      </thead>
+      <tbody id="decisionLogBody">
+        <tr><td colspan="6" class="empty-state"><p>No decision log entries yet</p></td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<footer class="footer">
+  Speexor Agent Orchestrator v2 &mdash; part of SpeexJS &mdash; <span id="footerTime"></span>
+</footer>
+
+<script>
+const sseUrl = '/api/events'
+
+function $(id) { return document.getElementById(id) }
+
+function fmtTime(d) {
+  if (typeof d === 'string') d = new Date(d)
+  return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+function fmtCurrency(n) { return '$' + Number(n).toFixed(4) }
+
+function fmtDuration(seconds) {
+  if (seconds < 60) return Math.floor(seconds) + 's'
+  if (seconds < 3600) return Math.floor(seconds / 60) + 'm ' + Math.floor(seconds % 60) + 's'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return h + 'h ' + m + 'm'
+}
+
+function statBadgeHTML(status) {
+  const cls = status.replace(/_/g, '-')
+  return '<span class="status-badge status-' + cls + '"><span class="dot"></span>' + status + '</span>'
+}
+
+function statusIconHTML(status) {
+  var icons = { pending: '\u26AA', in_progress: '\u25B6', running: '\u25B6', done: '\u2B1B', failed: '\u2715', blocked: '\u2298', decomposing: '\u2699', ready: '\u25B6', review: '\u1F50D', completed: '\u2B1B', active: '\u25B6', initializing: '\u26AA', cancelled: '\u2715' }
+  var icon = icons[status] || '\u26AA'
+  var label = status.replace(/_/g, ' ')
+  return '<span class="status-badge-icon status-' + status.replace(/_/g, '-') + '">' + icon + ' ' + label + '</span>'
+}
+
+function agentTagHTML(provider) {
+  const cls = (provider || '').toLowerCase().replace(/[^a-z0-9]/g, '-')
+  return '<span class="agent-tag ' + cls + '">' + (provider || 'unknown') + '</span>'
+}
+
+function riskHTML(level) {
+  if (!level) return '<span class="risk-low">-</span>'
+  return '<span class="risk-' + level + '">' + level + '</span>'
+}
+
+// Tab switching
+document.querySelectorAll('.tab-btn').forEach(function(btn) {
+  btn.addEventListener('click', function() {
+    document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active') })
+    document.querySelectorAll('.panel').forEach(function(p) { p.classList.remove('active') })
+    btn.classList.add('active')
+    var panel = document.getElementById('panel-' + btn.dataset.panel)
+    if (panel) panel.classList.add('active')
+  })
+})
+
+// SSE
+function connectSSE() {
+  var source = new EventSource(sseUrl)
+  source.onmessage = function(e) {
+    try {
+      var msg = JSON.parse(e.data)
+      handleSSEMessage(msg)
+    } catch (err) {
+      console.error('SSE parse error:', err)
+    }
+  }
+  source.onerror = function() {
+    source.close()
+    setTimeout(connectSSE, 2000)
+  }
+}
+
+function handleSSEMessage(msg) {
+  switch (msg.type) {
+    case 'init':
+      renderAll(msg.payload)
+      break
+    case 'task-update':
+      refreshTaskGraphs()
+      refreshStats()
+      break
+    case 'agent-update':
+      refreshFleet()
+      refreshStats()
+      break
+    case 'approval-update':
+      refreshApprovals()
+      refreshStats()
+      break
+    case 'cost-update':
+      refreshCost()
+      break
+    case 'activity':
+      appendActivity(msg.payload)
+      break
+    case 'decisionlog-update':
+      refreshDecisionLog()
+      break
+  }
+}
+
+// Render all from initial state
+function renderAll(payload) {
+  renderStats(payload)
+  renderTaskGraphs(payload.taskGraphs || [])
+  renderFleet(payload.sessions || [])
+  renderApprovals(payload.approvals || [], payload.allApprovals || [])
+  renderCost(payload.costData)
+  renderActivityFeed(payload.activityFeed || [])
+  renderDecisionLog(payload.decisionLog || [])
+}
+
+function renderStats(payload) {
+  var status = payload.status || 'active'
+  $('headerStatus').textContent = status.charAt(0).toUpperCase() + status.slice(1)
+  $('headerStatusDot').className = 'status-dot ' + (status === 'active' ? 'online' : 'offline')
+
+  var pCount = payload.projects ? payload.projects.length : 0
+  var aCount = payload.sessions ? payload.sessions.length : 0
+  var gCount = payload.taskGraphs ? payload.taskGraphs.length : 0
+  var appCount = payload.approvals ? payload.approvals.length : 0
+  $('statProjects').textContent = pCount
+  $('statAgents').textContent = aCount
+  $('statGraphs').textContent = gCount
+  $('statApprovals').textContent = appCount
+  $('statUptime').textContent = fmtDuration(payload.uptime || process.uptime ? Math.floor(process.uptime) : 0)
+}
+
+function refreshStats() {
+  fetch('/api/status').then(function(r) { return r.json() }).then(function(data) {
+    $('statProjects').textContent = data.projectCount
+    $('statAgents').textContent = data.activeSessions
+    $('statUptime').textContent = fmtDuration(data.uptime)
+  }).catch(function() {})
+}
+
+// Task Graphs
+var currentGraphs = []
+var currentGraphId = null
+var expandedNodes = {}
+var selectedNodeId = null
+
+function renderTaskGraphs(graphs) {
+  currentGraphs = graphs || []
+  var sel = $('graphSelector')
+  sel.innerHTML = ''
+  if (graphs.length === 0) {
+    sel.innerHTML = '<option value="">-- No graphs --</option>'
+    $('graphContainer').innerHTML = '<div class="empty-state"><p>No task graphs yet</p></div>'
+    $('graphNodeCount').textContent = '0 nodes'
+    $('graphStatus').textContent = ''
+    return
+  }
+  graphs.forEach(function(g, i) {
+    var opt = document.createElement('option')
+    opt.value = g.id
+    opt.textContent = g.projectName + ' (' + g.status + ')'
+    sel.appendChild(opt)
+  })
+  sel.value = graphs[0].id
+  currentGraphId = graphs[0].id
+  displayGraph(graphs[0])
+}
+
+function refreshTaskGraphs() {
+  fetch('/api/task-graphs').then(function(r) { return r.json() }).then(function(data) {
+    renderTaskGraphs(data.taskGraphs || [])
+  }).catch(function() {})
+}
+
+function selectGraph(id) {
+  var graph = currentGraphs.find(function(g) { return g.id === id })
+  if (graph) {
+    currentGraphId = graph.id
+    displayGraph(graph)
+  }
+}
+
+function toggleNode(nodeId) {
+  expandedNodes[nodeId] = !expandedNodes[nodeId]
+  var graph = currentGraphs.find(function(g) { return g.id === currentGraphId })
+  if (graph) displayGraph(graph)
+}
+
+function selectNode(nodeId, graphId) {
+  selectedNodeId = nodeId
+  var graph = currentGraphs.find(function(g) { return g.id === (graphId || currentGraphId) })
+  if (!graph) return
+  displayGraph(graph)
+  fetch('/api/task-graphs/' + (graphId || currentGraphId) + '/nodes/' + nodeId).then(function(r) { return r.json() }).then(function(node) {
+    var body = $('detailBody')
+    var fields = '<div class="detail-field"><div class="df-label">ID</div><div class="df-value">' + node.id + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Status</div><div class="df-value">' + statusIconHTML(node.status) + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Description</div><div class="df-value multiline">' + (node.description || '-') + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Agent</div><div class="df-value">' + (node.assignedAgentId || 'Unassigned') + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Created</div><div class="df-value">' + fmtTime(node.createdAt) + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Updated</div><div class="df-value">' + fmtTime(node.updatedAt) + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Depth</div><div class="df-value">' + node.depth + '</div></div>'
+    fields += '<div class="detail-field"><div class="df-label">Dependencies</div><div class="df-value">' + ((node.dependsOn && node.dependsOn.length) ? node.dependsOn.join(', ') : 'None') + '</div></div>'
+    if (node.skillsUsed && node.skillsUsed.length) {
+      fields += '<div class="detail-field"><div class="df-label">Skills Used</div><div class="df-value"><div class="detail-skills">' + node.skillsUsed.map(function(s) { return '<span class="skill-chip">' + s + '</span>' }).join('') + '</div></div></div>'
+    }
+    if (node.commandsExecuted && node.commandsExecuted.length) {
+      fields += '<div class="detail-field"><div class="df-label">Commands Executed</div><div class="df-value"><div class="detail-commands">' + node.commandsExecuted.map(function(c) { return '<div class="cmd-entry"><span class="cmd-code">$ ' + c.command + '</span><span style="color:var(--text-muted)">exit:' + c.exitCode + '</span></div>' }).join('') + '</div></div></div>'
+    }
+    if (node.result && node.result.summary) {
+      fields += '<div class="detail-field"><div class="df-label">Result</div><div class="df-value multiline">' + node.result.summary + '</div></div>'
+    }
+    if (node.result && node.result.prUrl) {
+      fields += '<div class="detail-field"><div class="df-label">PR</div><div class="df-value"><a href="' + node.result.prUrl + '" target="_blank" style="color:var(--accent-blue)">' + node.result.prUrl + '</a></div></div>'
+    }
+    $('detailTitle').textContent = node.title
+    $('detailBody').innerHTML = fields
+    $('graphDetailPanel').classList.add('visible')
+  }).catch(function() {
+    $('detailBody').innerHTML = '<div class="empty-state"><p>Failed to load details</p></div>'
+  })
+}
+
+function closeDetail() {
+  selectedNodeId = null
+  $('graphDetailPanel').classList.remove('visible')
+  var graph = currentGraphs.find(function(g) { return g.id === currentGraphId })
+  if (graph) displayGraph(graph)
+}
+
+function displayGraph(graph) {
+  if (!graph) return
+  $('graphNodeCount').textContent = graph.nodes.length + ' nodes'
+  $('graphStatus').textContent = 'Status: ' + graph.status
+  var nodes = graph.nodes.slice().sort(function(a, b) { return a.depth - b.depth || (a.createdAt < b.createdAt ? -1 : 1) })
+  var parentMap = {}
+  nodes.forEach(function(n) {
+    if (n.parentId) {
+      if (!parentMap[n.parentId]) parentMap[n.parentId] = []
+      parentMap[n.parentId].push(n.id)
+    }
+  })
+  var rootNodes = nodes.filter(function(n) { return !n.parentId })
+  var html = '<div class="task-tree">'
+  function renderSubtree(nodeIds, depth) {
+    nodeIds.forEach(function(id) {
+      var n = nodes.find(function(x) { return x.id === id })
+      if (!n) return
+      var hasChildren = parentMap[n.id] && parentMap[n.id].length
+      var isExpanded = expandedNodes[n.id] !== false
+      var isSelected = selectedNodeId === n.id
+      var indent = n.depth * 24
+      var deps = (n.dependsOn && n.dependsOn.length) ? '<div class="node-deps">' + n.dependsOn.join(', \u2192 ') + '</div>' : ''
+      var skills = (n.skillsUsed && n.skillsUsed.length) ? n.skillsUsed.map(function(s) { return '<span class="skill-chip">' + s + '</span>' }).join('') : ''
+      var agent = n.assignedAgentId ? '<span class="agent-tag">' + n.assignedAgentId + '</span>' : ''
+      var toggle = hasChildren ? '<span class="node-toggle" onclick="event.stopPropagation();toggleNode('' + n.id + '')">' + (isExpanded ? '\u25BC' : '\u25B6') + '</span>' : '<span class="node-toggle" style="visibility:hidden">\u25CB</span>'
+      html += '<div class="task-node-row" style="padding-left:' + indent + 'px">'
+      html += '<div class="task-node-content' + (isSelected ? ' selected' : '') + '" onclick="selectNode('' + n.id + '','' + graph.id + '')" role="treeitem" tabindex="0" onkeydown="if(event.key==='Enter')selectNode('' + n.id + '','' + graph.id + '')">'
+      html += toggle
+      html += statusIconHTML(n.status)
+      html += '<span class="node-title">' + n.title + '</span>'
+      html += '<span class="node-meta">' + agent + (skills ? '<span class="node-skills">' + skills + '</span>' : '') + '</span>'
+      if (deps) html += deps
+      html += '</div></div>'
+      if (hasChildren && isExpanded && parentMap[n.id]) {
+        renderSubtree(parentMap[n.id], depth + 1)
+      }
+    })
+  }
+  renderSubtree(rootNodes.map(function(n) { return n.id }), 0)
+  html += '</div>'
+  $('graphContainer').innerHTML = html
+}
+
+// Fleet
+function renderFleet(sessions) {
+  var grid = $('fleetGrid')
+  $('fleetCount').textContent = (sessions || []).length
+  if (!sessions || sessions.length === 0) {
+    grid.innerHTML = '<div class="empty-state"><p>No active agents</p></div>'
+    return
+  }
+  var html = ''
+  sessions.forEach(function(s) {
+    var uptime = s.startedAt ? fmtDuration((Date.now() - new Date(s.startedAt).getTime()) / 1000) : '-'
+    html += '<div class="agent-card">'
+    html += '<div class="card-header">'
+    html += '<span class="agent-id">' + (s.id || '-') + '</span>'
+    html += statBadgeHTML(s.status || 'pending')
+    html += '</div>'
+    html += '<div class="card-detail"><span class="label">Task</span><span class="value">' + (s.taskId || '-') + '</span></div>'
+    html += '<div class="card-detail"><span class="label">Provider</span><span class="value">' + agentTagHTML(s.provider) + '</span></div>'
+    html += '<div class="card-detail"><span class="label">Status</span><span class="value">' + statBadgeHTML(s.status || 'unknown') + '</span></div>'
+    html += '<div class="card-detail"><span class="label">Uptime</span><span class="value">' + uptime + '</span></div>'
+    html += '</div>'
+  })
+  grid.innerHTML = html
+}
+
+function refreshFleet() {
+  fetch('/api/sessions').then(function(r) { return r.json() }).then(function(data) {
+    renderFleet(data.sessions || [])
+    $('statAgents').textContent = (data.sessions || []).length
+  }).catch(function() {})
+}
+
+// Approvals
+function renderApprovals(pending, all) {
+  var badge = $('approvalBadge')
+  pending = pending || []
+  all = all || []
+  badge.textContent = pending.length
+  badge.style.display = pending.length ? 'inline-flex' : 'none'
+  $('approvalCount').textContent = pending.length
+
+  var body = $('approvalsBody')
+  if (pending.length === 0) {
+    body.innerHTML = '<tr><td colspan="6" class="empty-state"><p>No pending approvals</p></td></tr>'
+  } else {
+    body.innerHTML = pending.map(function(a) {
+      return '<tr>' +
+        '<td><strong>' + a.title + '</strong><br><span style="font-size:0.75rem;color:var(--text-muted)">' + (a.description || '') + '</span></td>' +
+        '<td>' + (a.axis || '-') + '</td>' +
+        '<td>' + riskHTML(a.riskLevel) + '</td>' +
+        '<td>' + (a.proposedBy || '-') + '</td>' +
+        '<td>' + fmtTime(a.createdAt) + '</td>' +
+        '<td><div class="approval-actions">' +
+        '<button class="btn btn-approve" onclick="approveAction('' + a.id + '')">&#10003; Approve</button>' +
+        '<button class="btn btn-reject" onclick="rejectAction('' + a.id + '')">&#10007; Reject</button>' +
+        '</div></td></tr>'
+    }).join('')
+  }
+
+  var allBody = $('allApprovalsBody')
+  if (all.length === 0) {
+    allBody.innerHTML = '<tr><td colspan="6" class="empty-state"><p>No approvals yet</p></td></tr>'
+  } else {
+    allBody.innerHTML = all.map(function(a) {
+      var rollbackBtn = a.status === 'approved' ? '<button class="btn" style="background:#3d1c1c;color:var(--accent-red);border:1px solid var(--accent-red);" onclick="rollbackAction('' + a.id + '')">\u21A9 Rollback</button>' : ''
+      return '<tr>' +
+        '<td><strong>' + a.title + '</strong></td>' +
+        '<td>' + statusIconHTML(a.status) + '</td>' +
+        '<td>' + (a.axis || '-') + '</td>' +
+        '<td>' + riskHTML(a.riskLevel) + '</td>' +
+        '<td>' + fmtTime(a.createdAt) + '</td>' +
+        '<td>' + rollbackBtn + '</td></tr>'
+    }).join('')
+  }
+}
+
+function refreshApprovals() {
+  fetch('/api/approvals').then(function(r) { return r.json() }).then(function(data) {
+    renderApprovals(data.pending || [], data.all || [])
+    $('statApprovals').textContent = (data.pending || []).length
+  }).catch(function() {})
+}
+
+function approveAction(id) {
+  fetch('/api/approvals/' + id + '/approve', { method: 'POST' }).then(function(r) { return r.json() }).then(function() {
+    refreshApprovals()
+  }).catch(function(e) { console.error(e) })
+}
+
+function rejectAction(id) {
+  fetch('/api/approvals/' + id + '/reject', { method: 'POST' }).then(function(r) { return r.json() }).then(function() {
+    refreshApprovals()
+  }).catch(function(e) { console.error(e) })
+}
+
+function rollbackAction(id) {
+  if (!confirm('Rollback this approval? The action will be reverted to pending state.')) return
+  fetch('/api/approvals/' + id + '/rollback', { method: 'POST' }).then(function(r) { return r.json() }).then(function() {
+    refreshApprovals()
+  }).catch(function(e) { console.error(e) })
+}
+
+// Decision Log
+function renderDecisionLog(entries) {
+  var body = $('decisionLogBody')
+  $('decisionLogCount').textContent = (entries || []).length
+  if (!entries || entries.length === 0) {
+    body.innerHTML = '<tr><td colspan="6" class="empty-state"><p>No decision log entries yet</p></td></tr>'
+    return
+  }
+  body.innerHTML = entries.slice(0, 50).map(function(e) {
+    return '<tr>' +
+      '<td>' + fmtTime(e.createdAt) + '</td>' +
+      '<td>' + (e.agentId || '-') + '</td>' +
+      '<td>' + (e.action || '-') + '</td>' +
+      '<td>' + (Math.round(e.confidence * 100) || '-') + '%</td>' +
+      '<td>' + (e.wasAutoExecuted ? '\u2705' : '\u274C') + '</td>' +
+      '<td>' + (e.outcome || e.outcome === 'unknown' ? (e.outcome || 'unknown') : '-') + '</td></tr>'
+  }).join('')
+}
+
+function refreshDecisionLog() {
+  fetch('/api/decision-log').then(function(r) { return r.json() }).then(function(data) {
+    renderDecisionLog(data.entries || [])
+  }).catch(function() {})
+}
+
+// Simple Mode
+function toggleSimpleMode(enabled) {
+  var hiddenPanels = ['graph', 'extensions']
+  if (enabled) {
+    hiddenPanels.forEach(function(p) {
+      var panel = document.getElementById('panel-' + p)
+      if (panel) panel.classList.add('simple-hidden')
+      var btn = document.querySelector('.tab-btn[data-panel="' + p + '"]')
+      if (btn) btn.style.display = 'none'
+    })
+    document.getElementById('simpleSummary').classList.add('visible')
+    var agentCount = parseInt($('statAgents').textContent) || 0
+    var projectCount = parseInt($('statProjects').textContent) || 0
+    $('simpleAgentCount').textContent = agentCount
+    $('simpleSummaryLabel').textContent = agentCount === 1 ? 'agent running' : 'agents running'
+    $('simpleProjectCount').textContent = 'across ' + projectCount + ' project' + (projectCount !== 1 ? 's' : '')
+  } else {
+    hiddenPanels.forEach(function(p) {
+      var panel = document.getElementById('panel-' + p)
+      if (panel) panel.classList.remove('simple-hidden')
+      var btn = document.querySelector('.tab-btn[data-panel="' + p + '"]')
+      if (btn) btn.style.display = ''
+    })
+    document.getElementById('simpleSummary').classList.remove('visible')
+  }
+}
+
+// Cost
+function renderCost(data) {
+  if (!data) {
+    $('costTotal').textContent = '$0.00'
+    $('costTotal').className = 'amount under'
+    return
+  }
+
+  var total = data.totalCost || 0
+  var exceeded = data.budgetExceeded || false
+  $('costTotal').textContent = '$' + total.toFixed(4)
+  $('costTotal').className = 'amount ' + (exceeded ? 'over' : 'under')
+
+  var barContainer = $('budgetBarContainer')
+  barContainer.style.display = 'none'
+
+  var providers = data.byProvider || []
+  var projects = data.byProject || []
+  var entries = data.recentEntries || []
+
+  var maxProvider = providers.length ? Math.max.apply(null, providers.map(function(p) { return p.cost })) : 0
+  var maxProject = projects.length ? Math.max.apply(null, projects.map(function(p) { return p.cost })) : 0
+
+  var colors = ['', 'green', 'purple', 'yellow', 'orange']
+
+  if (providers.length) {
+    $('costByProvider').innerHTML = providers.map(function(p, i) {
+      var pct = maxProvider > 0 ? (p.cost / maxProvider * 100) : 0
+      return '<div class="bar-row"><span class="bar-label">' + p.name + '</span><div class="bar-track"><div class="bar-fill ' + (colors[i] || '') + '" style="width:' + pct + '%"></div></div><span class="bar-value">$' + p.cost.toFixed(4) + '</span></div>'
+    }).join('')
+  } else {
+    $('costByProvider').innerHTML = '<div class="empty-state"><p>No cost data</p></div>'
+  }
+
+  if (projects.length) {
+    $('costByProject').innerHTML = projects.map(function(p, i) {
+      var pct = maxProject > 0 ? (p.cost / maxProject * 100) : 0
+      return '<div class="bar-row"><span class="bar-label">' + p.name + '</span><div class="bar-track"><div class="bar-fill ' + (colors[i] || '') + '" style="width:' + pct + '%"></div></div><span class="bar-value">$' + p.cost.toFixed(4) + '</span></div>'
+    }).join('')
+  } else {
+    $('costByProject').innerHTML = '<div class="empty-state"><p>No cost data</p></div>'
+  }
+
+  if (entries.length) {
+    $('costEntries').innerHTML = entries.map(function(e) {
+      return '<div class="cost-entry"><span class="ce-provider">' + (e.provider || '-') + '</span><span class="ce-task">' + (e.taskId || '-') + '</span><span class="ce-amount">$' + (e.estimatedCostUSD || 0).toFixed(4) + '</span></div>'
+    }).join('')
+  } else {
+    $('costEntries').innerHTML = '<div class="empty-state"><p>No entries yet</p></div>'
+  }
+
+  var taskNodes = data.byTaskNode || []
+  $('costNodeCount').textContent = taskNodes.length + ' nodes'
+  if (taskNodes.length) {
+    var maxNodeCost = Math.max.apply(null, taskNodes.map(function(n) { return n.cost }))
+    var taskColors = ['', 'green', 'purple', 'yellow', 'orange', 'blue']
+    $('costByTaskNode').innerHTML = taskNodes.slice(0, 15).map(function(n, i) {
+      var pct = maxNodeCost > 0 ? (n.cost / maxNodeCost * 100) : 0
+      return '<div class="bar-row"><span class="bar-label" title="' + n.taskId + '">' + n.title.substring(0, 30) + (n.title.length > 30 ? '...' : '') + '</span><div class="bar-track"><div class="bar-fill ' + (taskColors[i % taskColors.length] || '') + '" style="width:' + pct + '%"></div></div><span class="bar-value">$' + n.cost.toFixed(4) + '</span></div>'
+    }).join('')
+  } else {
+    $('costByTaskNode').innerHTML = '<div class="empty-state"><p>No per-node cost data</p></div>'
+  }
+}
+
+function refreshCost() {
+  fetch('/api/cost').then(function(r) { return r.json() }).then(function(data) {
+    renderCost(data)
+  }).catch(function() {})
+}
+
+// Activity Feed
+function renderActivityFeed(entries) {
+  var feed = $('missionFeed')
+  if (!entries || entries.length === 0) {
+    feed.innerHTML = '<div class="empty-state"><p>Waiting for activity...</p></div>'
+    return
+  }
+  feed.innerHTML = entries.slice(0, 100).map(function(e) {
+    return '<div class="feed-entry"><span class="feed-time">' + fmtTime(e.timestamp) + '</span><span class="feed-agent">' + (e.agentId || '') + '</span><span class="feed-type">' + (e.type || e.eventType || '') + '</span><span class="feed-summary">' + (e.summary || e.title || e.description || '') + '</span></div>'
+  }).join('')
+}
+
+function appendActivity(event) {
+  if (!event) return
+  var feed = $('missionFeed')
+  var entry = document.createElement('div')
+  entry.className = 'feed-entry'
+  entry.innerHTML = '<span class="feed-time">' + fmtTime(event.timestamp || new Date()) + '</span><span class="feed-agent">' + (event.agentId || event.agentId || '') + '</span><span class="feed-type">' + (event.type || event.eventType || 'event') + '</span><span class="feed-summary">' + (event.summary || event.title || event.description || JSON.stringify(event.payload || '')) + '</span>'
+
+  // Remove empty state
+  var empty = feed.querySelector('.empty-state')
+  if (empty) feed.innerHTML = ''
+
+  feed.insertBefore(entry, feed.firstChild)
+  if (feed.children.length > 200) feed.removeChild(feed.lastChild)
+}
+
+// Clock
+function updateClock() {
+  var now = new Date()
+  $('headerTime').textContent = now.toLocaleTimeString('en-US', { hour12: false })
+  $('footerTime').textContent = now.toISOString()
+}
+setInterval(updateClock, 1000)
+updateClock()
+
+// Init health refresh
+fetch('/api/health').then(function(r) { return r.json() }).then(function(data) {
+  if (data.memory) {
+    var mb = (data.memory.heapUsed / 1024 / 1024).toFixed(1)
+    $('statMemory').textContent = mb + ' MB'
+  }
+}).catch(function() {})
+
+// Startup: fetch initial data
+async function initDashboard() {
+  try {
+    var [status, projects, sessions, graphs, approvals, cost, decisionLog] = await Promise.all([
+      fetch('/api/status').then(function(r) { return r.json() }),
+      fetch('/api/projects').then(function(r) { return r.json() }),
+      fetch('/api/sessions').then(function(r) { return r.json() }),
+      fetch('/api/task-graphs').then(function(r) { return r.json() }),
+      fetch('/api/approvals').then(function(r) { return r.json() }),
+      fetch('/api/cost').then(function(r) { return r.json() }),
+      fetch('/api/decision-log').then(function(r) { return r.json() }),
+    ])
+
+    renderStats({
+      status: status.status,
+      projects: projects.projects,
+      sessions: sessions.sessions,
+      taskGraphs: graphs.taskGraphs,
+      approvals: approvals.pending,
+      uptime: status.uptime,
+    })
+
+    var uptime = status.uptime || 0
+    $('statUptime').textContent = fmtDuration(uptime)
+
+    renderTaskGraphs(graphs.taskGraphs || [])
+    renderFleet(sessions.sessions || [])
+    renderApprovals(approvals.pending || [], approvals.all || [])
+    renderCost(cost)
+    renderDecisionLog(decisionLog.entries || [])
+  } catch (e) {
+    console.error('Init error:', e)
+  }
+}
+
+initDashboard()
+connectSSE()
+
+// Periodic refresh fallback in case SSE drops
+setInterval(function() {
+  refreshStats()
+  refreshTaskGraphs()
+  refreshFleet()
+  refreshApprovals()
+  refreshCost()
+  refreshDecisionLog()
+}, 15000)
+</script>
+</body>
+</html>`;
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(html);
+  }
+  start() {
+    this.server.listen(this.port, () => {
+      debug(`Dashboard v2 listening on http://localhost:${this.port}`);
+    });
+    this.heartbeatTimer = setInterval(() => {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      for (const client of this.sseClients) {
+        try {
+          client.write(`: heartbeat ${now}
+
+`);
+        } catch {
+        }
+      }
+    }, 3e4);
+  }
+  stop() {
+    if (this.heartbeatTimer) clearInterval(this.heartbeatTimer);
+    for (const client of this.sseClients) {
+      try {
+        client.end();
+      } catch {
+      }
+    }
+    this.sseClients = [];
+    this.server.close();
+    debug("Dashboard v2 stopped");
+  }
+};
+function createDashboardServer(lifecycle, port = 7777) {
+  return new DashboardServer(lifecycle, port);
+}
+
+export { DashboardServer, DashboardState, createDashboardServer };
+//# sourceMappingURL=chunk-GOGI3JQD.js.map
+//# sourceMappingURL=chunk-GOGI3JQD.js.map