@serkanalgur/opencode-nexus 2.6.0 → 2.7.0

package/dist/index.js

@@ -8473,6 +8473,11 @@ var DEFAULT_CONFIG = {
     enabled: true,
     maxRetries: 3,
     contextTransfer: true
+  },
+  dashboard: {
+    enabled: true,
+    port: 4747,
+    host: "127.0.0.1"
   }
 };
 
@@ -8481,9 +8486,11 @@ class NexusConfigManager {
   globalConfig = null;
   storageConfig = null;
   loadInfo = null;
-  constructor() {
+  dashboardBase;
+  constructor(dashboardBase) {
     this.projectConfig = null;
     this.globalConfig = null;
+    this.dashboardBase = { ...DEFAULT_CONFIG.dashboard, ...dashboardBase };
   }
   loadConfigs(basePath) {
     if (this.loadInfo === null)
@@ -8545,6 +8552,11 @@ class NexusConfigManager {
         ...this.globalConfig?.selfHealing,
         ...this.projectConfig?.selfHealing,
         ...this.storageConfig?.selfHealing
+      },
+      dashboard: {
+        enabled: this.storageConfig?.dashboard?.enabled ?? this.projectConfig?.dashboard?.enabled ?? this.globalConfig?.dashboard?.enabled ?? this.dashboardBase.enabled,
+        port: this.storageConfig?.dashboard?.port ?? this.projectConfig?.dashboard?.port ?? this.globalConfig?.dashboard?.port ?? this.dashboardBase.port,
+        host: this.storageConfig?.dashboard?.host ?? this.projectConfig?.dashboard?.host ?? this.globalConfig?.dashboard?.host ?? this.dashboardBase.host
       }
     };
   }
@@ -8665,6 +8677,7 @@ class NexusConfigManager {
     result.models = { ...current.models };
     result.budget = { ...current.budget };
     result.selfHealing = { ...current.selfHealing };
+    result.dashboard = { ...current.dashboard };
     return result;
   }
   resetToDefaults() {
@@ -8809,94 +8822,3674 @@ var PRESETS = {
       }
     }
   }
-};
+};
+
+// src/broadcast.ts
+var BROADCAST_EVENTS = [
+  "agent:spawned",
+  "agent:terminated",
+  "agent:escalation",
+  "task:failed",
+  "cost:delta",
+  "security:issues-found",
+  "memory:set",
+  "budget:alert",
+  "budget:exceeded",
+  "config:reloaded",
+  "orchestrator:paused",
+  "orchestrator:resumed",
+  "orchestrator:shutdown"
+];
+
+class StateBroadcaster {
+  clients = new Set;
+  orchestrator;
+  broadcastTimer = null;
+  throttleMs;
+  unsubscribers = [];
+  constructor(orchestrator, opts) {
+    this.orchestrator = orchestrator;
+    this.throttleMs = opts?.throttleMs ?? 1000;
+    this.setupEventListeners();
+  }
+  addClient(ws) {
+    this.clients.add(ws);
+    this.snapshot("orchestrator:state", ws);
+  }
+  removeClient(ws) {
+    this.clients.delete(ws);
+  }
+  setupEventListeners() {
+    const orch = this.orchestrator;
+    for (const eventName of BROADCAST_EVENTS) {
+      const unsub = orch.on?.(eventName, (data) => {
+        this.broadcast(eventName, data);
+      });
+      if (unsub)
+        this.unsubscribers.push(unsub);
+    }
+  }
+  snapshot(type, to) {
+    let data;
+    try {
+      data = this.orchestrator.getState();
+    } catch (error) {
+      console.error(`[nexus] getState() failed; skipping the "${type}" push:`, error);
+      return;
+    }
+    const frame = { type, data, timestamp: new Date().toISOString() };
+    if (to)
+      this.sendTo(to, frame);
+    else
+      this.broadcast(type, data);
+  }
+  broadcastState() {
+    if (this.broadcastTimer)
+      return;
+    this.broadcastTimer = setTimeout(() => {
+      this.broadcastTimer = null;
+      this.snapshot("orchestrator:state");
+    }, this.throttleMs);
+    this.broadcastTimer.unref?.();
+  }
+  broadcast(event, data) {
+    const message = JSON.stringify({
+      type: event,
+      data,
+      timestamp: new Date().toISOString()
+    });
+    for (const client of this.clients) {
+      try {
+        client.send(message);
+      } catch {
+        this.clients.delete(client);
+      }
+    }
+  }
+  sendTo(ws, data) {
+    try {
+      ws.send(JSON.stringify(data));
+    } catch {
+      this.clients.delete(ws);
+    }
+  }
+  getClientCount() {
+    return this.clients.size;
+  }
+  destroy() {
+    if (this.broadcastTimer) {
+      clearTimeout(this.broadcastTimer);
+      this.broadcastTimer = null;
+    }
+    for (const unsub of this.unsubscribers) {
+      unsub();
+    }
+    this.unsubscribers = [];
+    this.clients.clear();
+  }
+}
+
+// dashboard/index.html
+var dashboard_default = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Nexus Dashboard</title>
+<style>
+  :root {
+    --bg: #0d1117;
+    --surface: #161b22;
+    --surface-hover: #1c2129;
+    --border: #30363d;
+    --text: #c9d1d9;
+    --text-muted: #8b949e;
+    --green: #3fb950;
+    --yellow: #d29922;
+    --red: #f85149;
+    --blue: #58a6ff;
+    --purple: #bc8cff;
+    --cyan: #39d2c0;
+    --orange: #f0883e;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* ── Header ── */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+  }
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .header-logo {
+    font-size: 22px;
+  }
+  .header-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .connection-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    background: rgba(63, 185, 80, 0.15);
+    color: var(--green);
+    transition: all 0.3s ease;
+  }
+  .connection-badge.disconnected {
+    background: rgba(248, 81, 73, 0.15);
+    color: var(--red);
+  }
+  .connection-badge.reconnecting {
+    background: rgba(210, 153, 34, 0.15);
+    color: var(--yellow);
+  }
+  .connection-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: pulse 2s infinite;
+  }
+  .disconnected .connection-dot { background: var(--red); animation: none; }
+  .reconnecting .connection-dot { background: var(--yellow); animation: pulse 0.8s infinite; }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  /* Orchestrator lifecycle pill. \`paused\` and \`running\` are distinct server
+     fields; a paused orchestrator must not be indistinguishable from a running
+     one, so this is a hard colour change, not a tint. */
+  .orch-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border: 1px solid transparent;
+  }
+  .orch-pill.running { background: rgba(63, 185, 80, 0.15); color: var(--green); border-color: var(--green); }
+  .orch-pill.paused  { background: rgba(210, 153, 34, 0.2); color: var(--yellow); border-color: var(--yellow); }
+  .orch-pill.idle    { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border-color: var(--border); }
+  .orch-pill.unknown { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border-color: var(--border); }
+
+  .uptime {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+  .auto-refresh-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+    cursor: pointer;
+    user-select: none;
+  }
+  .auto-refresh-toggle input[type="checkbox"] {
+    accent-color: var(--blue);
+    cursor: pointer;
+  }
+  .last-refresh {
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+  .last-refresh.stale { color: var(--yellow); }
+  .last-refresh.lost { color: var(--red); }
+
+  /* ── Main Layout ── */
+  .main {
+    padding: 24px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  /* ── Overview Cards ── */
+  .overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+  .stat-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .stat-card .label {
+    font-size: 12px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .stat-card .value {
+    font-size: 28px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+  .stat-card .sub {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+  .stat-card.green .value { color: var(--green); }
+  .stat-card.blue .value { color: var(--blue); }
+  .stat-card.yellow .value { color: var(--yellow); }
+  .stat-card.purple .value { color: var(--purple); }
+  .stat-card.red .value { color: var(--red); }
+  .stat-card.orange .value { color: var(--orange); }
+  .stat-card.cyan .value { color: var(--cyan); }
+
+  /* ── Section Headers ── */
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  .section-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .section-header .count {
+    background: var(--border);
+    color: var(--text-muted);
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 12px;
+  }
+  /* A caveat that belongs next to the number it qualifies, so it cannot be
+     read as part of a neighbouring card. */
+  .section-note {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin: -10px 0 16px;
+    line-height: 1.5;
+  }
+  .section-note strong { color: var(--text); font-weight: 600; }
+  .section-note code, .config-explainer code, .cost-basis code, .accounting-note code {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 11px;
+    background: var(--bg);
+    padding: 1px 4px;
+    border-radius: 3px;
+    color: var(--blue);
+  }
+
+  /* ── Agent Grid ── */
+  .agents-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+  .agent-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: border-color 0.2s;
+  }
+  .agent-card:hover {
+    border-color: var(--blue);
+  }
+  .agent-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .agent-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .agent-role-badge {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 500;
+    text-transform: capitalize;
+  }
+  .agent-role-badge.architect { background: rgba(188, 140, 255, 0.15); color: var(--purple); }
+  .agent-role-badge.coder { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
+  .agent-role-badge.reviewer { background: rgba(57, 210, 192, 0.15); color: var(--cyan); }
+  .agent-role-badge.tester { background: rgba(63, 185, 80, 0.15); color: var(--green); }
+  .agent-role-badge.explorer { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+  .agent-role-badge.documenter { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); }
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .status-dot.spawning { background: var(--yellow); animation: pulse 1s infinite; }
+  .status-dot.idle { background: var(--yellow); }
+  .status-dot.working { background: var(--green); animation: pulse 1.5s infinite; }
+  .status-dot.blocked { background: var(--red); }
+  .status-dot.completed { background: var(--blue); }
+  .status-dot.failed { background: var(--red); }
+  .status-dot.terminated { background: var(--text-muted); }
+  .agent-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .agent-meta .mono {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 11px;
+  }
+  .agent-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+  }
+  .metric {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .metric .metric-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+  .metric .metric-value {
+    font-size: 14px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .agent-cost-bar {
+    height: 4px;
+    background: var(--border);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-top: 4px;
+  }
+  .agent-cost-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.4s ease;
+  }
+  .bar-caption {
+    font-size: 10px;
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Sessions ── */
+  .sessions-section { margin-bottom: 24px; }
+  .sessions-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .sessions-scroll { overflow-x: auto; }
+  .session-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    min-width: 900px;
+  }
+  .session-table th {
+    text-align: left;
+    padding: 10px 12px;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    border-bottom: 1px solid var(--border);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+  .session-table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    vertical-align: top;
+  }
+  .session-table tr:last-child td { border-bottom: none; }
+  .session-table .mono {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 11px;
+    word-break: break-all;
+  }
+  .session-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+
+  /* THE distinction this section exists for. An orphan (owned:false,
+     agentId:null) and an abandoned row are marked with a hard left rule, a
+     tinted ground, and a spelled-out badge — never a subtle shade. */
+  tr.session-row.orphan {
+    background: rgba(240, 136, 62, 0.10);
+    box-shadow: inset 4px 0 0 var(--orange);
+  }
+  tr.session-row.abandoned {
+    background: rgba(248, 81, 73, 0.10);
+    box-shadow: inset 4px 0 0 var(--red);
+  }
+  tr.session-row.unread td:last-child { color: var(--text-muted); }
+
+  .flag {
+    display: inline-block;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+  }
+  .flag.orphan { background: var(--orange); color: #0d1117; }
+  .flag.abandoned { background: var(--red); color: #ffffff; }
+  .flag.unread { background: var(--border); color: var(--text-muted); }
+
+  .session-state {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 4px;
+    text-transform: capitalize;
+    white-space: nowrap;
+  }
+  .session-state.running { background: rgba(63, 185, 80, 0.15); color: var(--green); }
+  .session-state.idle { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+  .session-state.settled { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
+  .session-state.abandoned { background: rgba(248, 81, 73, 0.2); color: var(--red); }
+
+  /* The section-level alarm. Shown only when at least one session is running
+     with no owning agent, because that is the leak. */
+  .orphan-banner {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    margin: 0 0 16px;
+    padding: 12px 16px;
+    border: 2px solid var(--orange);
+    border-left-width: 6px;
+    border-radius: 8px;
+    background: rgba(240, 136, 62, 0.12);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  .orphan-banner .icon { font-size: 16px; }
+  .orphan-banner .title { font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
+  .orphan-banner .body { color: var(--text); }
+  .orphan-banner .detail { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
+
+  .session-filter-bar { display: flex; gap: 4px; flex-wrap: wrap; }
+  .session-filter-btn {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    padding: 3px 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .session-filter-btn:hover { border-color: var(--blue); color: var(--text); }
+  .session-filter-btn.active {
+    background: rgba(88, 166, 255, 0.15);
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+
+  /* ── Budget Gauge ── */
+  .budget-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+  .budget-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .budget-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+  .gauge-container {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+  .gauge-ring {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    flex-shrink: 0;
+  }
+  .gauge-ring svg {
+    transform: rotate(-90deg);
+  }
+  .gauge-ring circle {
+    fill: none;
+    stroke-width: 8;
+    stroke-linecap: round;
+  }
+  .gauge-ring .track { stroke: var(--border); }
+  .gauge-ring .fill { stroke: var(--green); transition: stroke-dashoffset 0.6s ease, stroke 0.3s; }
+  .gauge-ring .fill.warning { stroke: var(--yellow); }
+  .gauge-ring .fill.danger { stroke: var(--red); }
+  .gauge-center {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .gauge-pct {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text);
+  }
+  .gauge-pct-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+  .gauge-ring.unmeasurable { opacity: 0.35; }
+  .budget-details {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    justify-content: center;
+  }
+  .budget-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    gap: 12px;
+  }
+  .budget-row .budget-label { color: var(--text-muted); }
+  .budget-row .budget-val { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+  /* ── Tasks List ── */
+  .tasks-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .tasks-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+  .task-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 420px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  .task-item {
+    padding: 10px 12px;
+    background: var(--bg);
+    border-radius: 6px;
+    font-size: 13px;
+    border-left: 3px solid transparent;
+  }
+  .task-item.failed { border-left-color: var(--red); }
+  .task-item.completed { border-left-color: var(--blue); }
+  .task-item.running { border-left-color: var(--green); }
+  .task-item.queued { border-left-color: var(--yellow); }
+  .task-line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .task-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+    flex: 1;
+    min-width: 0;
+  }
+  .task-name {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .task-role {
+    color: var(--text-muted);
+    font-size: 11px;
+    flex-shrink: 0;
+  }
+  .task-cost {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+    text-align: right;
+  }
+  .task-status {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 500;
+    text-transform: capitalize;
+    flex-shrink: 0;
+  }
+  .task-status.pending { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); }
+  .task-status.queued { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+  .task-status.running { background: rgba(63, 185, 80, 0.15); color: var(--green); }
+  .task-status.completed { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
+  .task-status.failed { background: rgba(248, 81, 73, 0.15); color: var(--red); }
+  .task-status.cancelled { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); }
+
+  .task-chip {
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 3px;
+    background: var(--border);
+    color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .task-chip.priority-critical { background: rgba(248, 81, 73, 0.2); color: var(--red); }
+  .task-chip.priority-high { background: rgba(240, 136, 62, 0.2); color: var(--orange); }
+  .task-chip.priority-normal { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
+  .task-chip.priority-low { background: var(--border); color: var(--text-muted); }
+  .task-meta {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    font-variant-numeric: tabular-nums;
+  }
+  .task-meta .mono {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  }
+
+  /* t.result: the only place a user can see WHY a task failed. */
+  .task-result {
+    margin-top: 6px;
+    font-size: 11px;
+  }
+  .task-result summary {
+    cursor: pointer;
+    color: var(--blue);
+    list-style: none;
+  }
+  .task-result summary::-webkit-details-marker { display: none; }
+  .task-result summary::before { content: '▸ '; }
+  .task-result[open] summary::before { content: '▾ '; }
+  .task-result pre {
+    margin-top: 6px;
+    padding: 8px 10px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 11px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .task-result pre.error { border-color: var(--red); color: var(--red); }
+  .result-truncation {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-top: 4px;
+  }
+
+  .empty-message {
+    text-align: center;
+    padding: 24px;
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+
+  /* ── Activity Log ── */
+  .activity-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 24px;
+  }
+  .activity-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .activity-filter-bar {
+    display: flex;
+    gap: 4px;
+  }
+  .activity-filter-btn {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    padding: 3px 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .activity-filter-btn:hover { border-color: var(--blue); color: var(--text); }
+  .activity-filter-btn.active {
+    background: rgba(88, 166, 255, 0.15);
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+  .log-container {
+    max-height: 260px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  .log-container::-webkit-scrollbar { width: 6px; }
+  .log-container::-webkit-scrollbar-track { background: transparent; }
+  .log-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  .log-entry {
+    display: flex;
+    gap: 10px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    line-height: 1.5;
+    align-items: flex-start;
+  }
+  .log-entry:hover { background: var(--surface-hover); }
+  .log-entry.hidden { display: none; }
+  .log-time {
+    color: var(--text-muted);
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .log-icon {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+  }
+  .log-msg { color: var(--text); word-break: break-word; }
+  .log-entry.event-spawn .log-icon { color: var(--green); }
+  .log-entry.event-task .log-icon { color: var(--blue); }
+  .log-entry.event-error .log-icon { color: var(--red); }
+  .log-entry.event-budget .log-icon { color: var(--yellow); }
+  .log-entry.event-info .log-icon { color: var(--text-muted); }
+  .log-entry.event-system .log-icon { color: var(--purple); }
+  .log-entry.event-success .log-icon { color: var(--green); }
+  .log-entry.event-warning .log-icon { color: var(--yellow); }
+
+  /* ── No Agents placeholder ── */
+  .no-agents {
+    background: var(--surface);
+    border: 1px dashed var(--border);
+    border-radius: 8px;
+    padding: 40px;
+    text-align: center;
+    color: var(--text-muted);
+    margin-bottom: 24px;
+  }
+  .no-agents .icon { font-size: 32px; margin-bottom: 8px; }
+  .no-agents .msg { font-size: 13px; }
+
+  /* ── Responsive ── */
+  @media (max-width: 900px) {
+    .budget-section { grid-template-columns: 1fr; }
+    .agents-grid { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 600px) {
+    .main { padding: 16px; }
+    .header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
+    .header-right { gap: 8px; flex-wrap: wrap; }
+    .gauge-container { flex-direction: column; align-items: flex-start; }
+    .agent-metrics { grid-template-columns: repeat(2, 1fr); }
+    .activity-filter-bar { flex-wrap: wrap; }
+    .task-line { flex-wrap: wrap; }
+    .task-cost { text-align: left; }
+    .activity-card h3 { flex-direction: column; align-items: flex-start; gap: 8px; }
+  }
+
+  /* ── Fade-in animation ── */
+  .fade-in {
+    animation: fadeIn 0.3s ease;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ── Status pulse for working agents ── */
+  .status-working {
+    animation: statusPulse 1.5s infinite;
+  }
+  @keyframes statusPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  /* ── Task Dependency Graph ──
+     Columns are dependency LAYERS (longest-path depth), so an arrow always
+     points right, and every arrow is drawn for a dependency edge the server
+     actually reported. There is no "next node in the list" arrow. */
+  .dag-section {
+    margin-bottom: 24px;
+  }
+  .dag-section .section-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  #dag-container {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 24px;
+    min-height: 120px;
+    overflow-x: auto;
+  }
+  .dag-empty {
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 13px;
+    padding: 20px;
+  }
+  .dag-empty .icon { font-size: 28px; margin-bottom: 8px; }
+  .dag-canvas {
+    position: relative;
+    display: inline-block;
+    min-width: 100%;
+  }
+  .dag-edges {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: visible;
+  }
+  .dag-edges path { fill: none; stroke-width: 1.5; }
+  .dag-edges path.edge-satisfied { stroke: var(--green); }
+  .dag-edges path.edge-active { stroke: var(--blue); }
+  .dag-edges path.edge-pending { stroke: var(--border); }
+  .dag-edges polygon.arrowhead { fill: var(--border); }
+  .dag-layers {
+    display: flex;
+    align-items: flex-start;
+    gap: 44px;
+    position: relative;
+    z-index: 1;
+  }
+  .dag-layer {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    justify-content: center;
+    min-height: 60px;
+  }
+  .dag-layer-index {
+    font-size: 9px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-align: center;
+    margin-bottom: 2px;
+  }
+  .dag-node {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    width: 120px;
+    flex-shrink: 0;
+  }
+  .dag-node-box {
+    width: 120px;
+    padding: 10px 8px;
+    border-radius: 8px;
+    border: 2px solid var(--border);
+    background: var(--surface);
+    text-align: center;
+    font-size: 11px;
+    font-weight: 500;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dag-node-box.pending {
+    border-color: var(--text-muted);
+    color: var(--text-muted);
+  }
+  .dag-node-box.running {
+    border-color: var(--blue);
+    color: var(--blue);
+    box-shadow: 0 0 12px rgba(88, 166, 255, 0.3);
+    animation: dagPulse 1.5s infinite;
+  }
+  .dag-node-box.completed {
+    border-color: var(--green);
+    color: var(--green);
+    background: rgba(63, 185, 80, 0.08);
+  }
+  .dag-node-box.failed {
+    border-color: var(--red);
+    color: var(--red);
+    background: rgba(248, 81, 73, 0.08);
+  }
+  .dag-node-box.queued {
+    border-color: var(--yellow);
+    color: var(--yellow);
+  }
+  .dag-node-box.cancelled {
+    border-color: var(--border);
+    color: var(--text-muted);
+    text-decoration: line-through;
+  }
+  @keyframes dagPulse {
+    0%, 100% { box-shadow: 0 0 12px rgba(88, 166, 255, 0.3); }
+    50% { box-shadow: 0 0 20px rgba(88, 166, 255, 0.6); }
+  }
+  .dag-node-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+  .dag-node-role {
+    font-size: 9px;
+    color: var(--text-muted);
+    opacity: 0.7;
+  }
+  .dag-node-deps {
+    font-size: 9px;
+    color: var(--text-muted);
+    text-align: center;
+  }
+
+  /* ── Cost ── */
+  .cost-section {
+    margin-bottom: 24px;
+  }
+  .cost-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .cost-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .cost-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  .cost-chart {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .cost-chart-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+  .cost-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+  }
+  .cost-bar-label {
+    min-width: 120px;
+    max-width: 160px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .cost-bar-track {
+    flex: 1;
+    height: 8px;
+    background: var(--bg);
+    border-radius: 4px;
+    overflow: hidden;
+    min-width: 40px;
+  }
+  .cost-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.5s ease;
+  }
+  .cost-bar-value {
+    min-width: 60px;
+    text-align: right;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    font-size: 12px;
+  }
+  .cost-total-row {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 10px;
+    margin-top: 10px;
+    border-top: 1px solid var(--border);
+    font-size: 13px;
+  }
+  .cost-total-label { color: var(--text-muted); }
+  .cost-total-value { font-weight: 700; color: var(--blue); }
+  .cost-basis {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-top: 6px;
+    line-height: 1.5;
+  }
+  .cost-status {
+    font-size: 12px;
+    color: var(--yellow);
+    margin-bottom: 12px;
+  }
+  .cost-status.hidden { display: none; }
+  .accounting-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    padding: 3px 0;
+    gap: 12px;
+  }
+  .accounting-row .k { color: var(--text-muted); }
+  .accounting-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
+  .accounting-row .v.unbilled { color: var(--orange); }
+  .accounting-note {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-top: 8px;
+    line-height: 1.5;
+    padding-top: 8px;
+    border-top: 1px solid var(--border);
+  }
+
+  /* ── Config Panel (read-only) ── */
+  .config-section {
+    margin-bottom: 24px;
+  }
+  .config-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .config-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .readonly-badge {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    padding: 2px 8px;
+    border-radius: 3px;
+    background: var(--border);
+    color: var(--text-muted);
+  }
+  .config-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 16px;
+  }
+  .config-group {
+    background: var(--bg);
+    border-radius: 6px;
+    padding: 14px;
+  }
+  .config-group-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .config-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+    font-size: 13px;
+    gap: 12px;
+  }
+  .config-key {
+    color: var(--text-muted);
+  }
+  .config-val {
+    font-weight: 500;
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 12px;
+    text-align: right;
+    word-break: break-all;
+  }
+  .config-val.enabled { color: var(--green); }
+  .config-val.disabled { color: var(--text-muted); }
+  .config-val.warning { color: var(--yellow); }
+  .config-val.model { color: var(--blue); }
+  .config-val.unreported { color: var(--text-muted); font-style: italic; }
+  .config-explainer {
+    margin-top: 12px;
+    font-size: 11px;
+    color: var(--text-muted);
+    line-height: 1.6;
+  }
+  .config-explainer code {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    color: var(--text);
+  }
+
+  /* ── Resolved Config (read-only viewer) ── */
+  .config-editor-section {
+    margin-bottom: 24px;
+  }
+  .config-editor-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .config-editor-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .config-editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  .config-editor-actions {
+    display: flex;
+    gap: 8px;
+  }
+  .config-btn {
+    padding: 6px 14px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .config-btn:hover { border-color: var(--blue); color: var(--blue); }
+  .config-textarea {
+    width: 100%;
+    min-height: 200px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 12px;
+    resize: vertical;
+    outline: none;
+  }
+  /* Not \`readOnly\` styling only — the field cannot be typed into, and says so. */
+  .config-textarea[readonly] {
+    cursor: default;
+    border-style: dashed;
+  }
+  .config-status {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 8px;
+    min-height: 18px;
+    line-height: 1.5;
+  }
+  .config-status.error { color: var(--red); }
+  .config-status.success { color: var(--green); }
+
+  /* ── Enhanced Log Stream ── */
+  .log-stream-section {
+    margin-bottom: 24px;
+  }
+  .log-stream-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .log-stream-card h3 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .log-filter-bar {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+  }
+  .log-filter-btn {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    padding: 3px 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .log-filter-btn:hover { border-color: var(--blue); color: var(--text); }
+  .log-filter-btn.active {
+    background: rgba(88, 166, 255, 0.15);
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+  .log-stream-container {
+    max-height: 300px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  .log-stream-container::-webkit-scrollbar { width: 6px; }
+  .log-stream-container::-webkit-scrollbar-track { background: transparent; }
+  .log-stream-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  .log-stream-entry {
+    display: flex;
+    gap: 8px;
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    line-height: 1.5;
+    align-items: flex-start;
+  }
+  .log-stream-entry:hover { background: var(--surface-hover); }
+  .log-stream-entry .ls-time {
+    color: var(--text-muted);
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+    min-width: 65px;
+  }
+  .log-stream-entry .ls-badge {
+    flex-shrink: 0;
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-weight: 500;
+    text-transform: uppercase;
+    min-width: 50px;
+    text-align: center;
+  }
+  .log-stream-entry .ls-msg {
+    color: var(--text);
+    word-break: break-word;
+    flex: 1;
+  }
+  .log-stream-entry.event-success .ls-badge { background: rgba(63, 185, 80, 0.15); color: var(--green); }
+  .log-stream-entry.event-success .ls-msg { color: var(--green); }
+  .log-stream-entry.event-warning .ls-badge { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+  .log-stream-entry.event-warning .ls-msg { color: var(--yellow); }
+  .log-stream-entry.event-error .ls-badge { background: rgba(248, 81, 73, 0.15); color: var(--red); }
+  .log-stream-entry.event-error .ls-msg { color: var(--red); }
+  .log-stream-entry.event-info .ls-badge { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); }
+  .log-stream-entry.event-task .ls-badge { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
+  .log-stream-entry.event-system .ls-badge { background: rgba(188, 140, 255, 0.15); color: var(--purple); }
+  .log-stream-entry.event-budget .ls-badge { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+  .log-stream-entry.hidden { display: none; }
+  .log-stream-count {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-align: right;
+    margin-top: 6px;
+  }
+
+  @media (max-width: 900px) {
+    .config-grid { grid-template-columns: 1fr; }
+    .cost-grid { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 600px) {
+    .config-editor-actions { flex-wrap: wrap; }
+    .config-btn { flex: 1; text-align: center; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Header -->
+<div class="header">
+  <div class="header-left">
+    <span class="header-logo">⚡</span>
+    <span class="header-title">Nexus Dashboard</span>
+    <!-- state.running / state.paused, read from the server. A paused
+         orchestrator must not look like a running one. -->
+    <span class="orch-pill unknown" id="orch-status" title="Orchestrator lifecycle, as reported by the server">No state</span>
+  </div>
+  <div class="header-right">
+    <span class="uptime" id="uptime">Server uptime —</span>
+    <label class="auto-refresh-toggle">
+      <input type="checkbox" id="auto-refresh-check" checked> Auto-refresh
+    </label>
+    <span class="last-refresh" id="last-refresh">No state received</span>
+    <div class="connection-badge disconnected" id="conn-badge">
+      <span class="connection-dot"></span>
+      <span id="conn-text">Disconnected</span>
+    </div>
+  </div>
+</div>
+
+<!-- Main Content -->
+<div class="main">
+
+  <!-- Overview Stats -->
+  <div class="overview">
+    <div class="stat-card green">
+      <span class="label">Agents</span>
+      <span class="value" id="stat-agents">—</span>
+      <span class="sub" id="stat-agents-sub">Live agents only</span>
+    </div>
+    <div class="stat-card blue">
+      <span class="label">Tasks</span>
+      <span class="value" id="stat-tasks">—</span>
+      <span class="sub" id="stat-tasks-sub">No tasks reported</span>
+    </div>
+    <div class="stat-card cyan">
+      <span class="label">Sessions</span>
+      <span class="value" id="stat-sessions">—</span>
+      <span class="sub" id="stat-sessions-sub">No sessions reported</span>
+    </div>
+    <div class="stat-card yellow">
+      <span class="label">Spent</span>
+      <span class="value" id="stat-spent">—</span>
+      <span class="sub" id="stat-spent-sub">Budget ceiling not reported</span>
+    </div>
+    <div class="stat-card purple">
+      <span class="label">Remaining</span>
+      <span class="value" id="stat-remaining">—</span>
+      <span class="sub" id="stat-remaining-sub">Awaiting state</span>
+    </div>
+    <div class="stat-card orange">
+      <span class="label">Unbilled</span>
+      <span class="value" id="stat-unbilled">—</span>
+      <span class="sub" id="stat-unbilled-sub">Lower bound · not in Spend</span>
+    </div>
+  </div>
+
+  <!-- Sessions. The headline section: a session that is still running with no
+       owning agent is the failure this page exists to make visible. -->
+  <div class="sessions-section">
+    <div class="section-header">
+      <h2>🧵 Sessions</h2>
+      <span class="count" id="session-count">0</span>
+      <span class="session-filter-bar">
+        <button class="session-filter-btn active" data-sfilter="all">All</button>
+        <button class="session-filter-btn" data-sfilter="orphan">No owning agent</button>
+        <button class="session-filter-btn" data-sfilter="running">Running</button>
+        <button class="session-filter-btn" data-sfilter="abandoned">Abandoned</button>
+      </span>
+    </div>
+    <p class="section-note" id="session-note">
+      <strong>State is nexus's own bookkeeping, not a server session list.</strong>
+      A row with <strong>no owning agent</strong> is a session that is still generating
+      after the agent that owned it was terminated — it keeps spending, and nothing
+      is collecting that spend. <strong>Abandoned</strong> means the plugin stopped
+      watching; its <strong>unbilled</strong> figure is a <strong>lower bound</strong>
+      on what went unbilled, not a total, and is deliberately not added to Spend.
+      Token counts are the last figure actually read, not a live reading.
+    </p>
+    <div id="orphan-banner"></div>
+    <div class="sessions-card">
+      <div class="sessions-scroll">
+        <div id="sessions-container">
+          <div class="empty-message">No sessions reported</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Agent Grid -->
+  <div class="section-header">
+    <h2>🤖 Agents</h2>
+    <span class="count" id="agent-count">0</span>
+  </div>
+  <p class="section-note">
+    <strong>Live agents only.</strong> The orchestrator deletes an agent when it
+    terminates, so a completed or terminated agent's spend leaves this list and
+    survives only in <strong>Cost Breakdown</strong>, which reads the full history.
+  </p>
+  <div id="agents-container">
+    <div class="no-agents">
+      <div class="icon">🤖</div>
+      <div class="msg">No agents spawned yet. Tasks will spawn agents automatically.</div>
+    </div>
+  </div>
+
+  <!-- Task Dependency Graph -->
+  <div class="dag-section">
+    <div class="section-header">
+      <h2>📊 Task Dependencies</h2>
+      <span class="count" id="dag-count">0</span>
+    </div>
+    <p class="section-note" id="dag-note"></p>
+    <div id="dag-container">
+      <div class="dag-empty">
+        <div class="icon">📊</div>
+        <div>No tasks in the graph yet.</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Budget + Tasks side by side -->
+  <div class="budget-section">
+    <!-- Budget Gauge -->
+    <div class="budget-card">
+      <h3>💰 Budget</h3>
+      <div class="gauge-container">
+        <div class="gauge-ring" id="gauge-ring">
+          <svg width="120" height="120" viewBox="0 0 120 120">
+            <circle class="track" cx="60" cy="60" r="52"></circle>
+            <circle class="fill" id="gauge-fill" cx="60" cy="60" r="52"
+              stroke-dasharray="326.73" stroke-dashoffset="0"></circle>
+          </svg>
+          <div class="gauge-center">
+            <span class="gauge-pct" id="gauge-pct">—</span>
+            <span class="gauge-pct-label">Left</span>
+          </div>
+        </div>
+        <div class="budget-details">
+          <div class="budget-row">
+            <span class="budget-label">Ceiling</span>
+            <span class="budget-val" id="budget-total">—</span>
+          </div>
+          <div class="budget-row">
+            <span class="budget-label">Spent</span>
+            <span class="budget-val" id="budget-spent">—</span>
+          </div>
+          <div class="budget-row">
+            <span class="budget-label">Remaining</span>
+            <span class="budget-val" id="budget-remaining">—</span>
+          </div>
+          <div class="budget-row">
+            <span class="budget-label">Alert below</span>
+            <span class="budget-val" id="budget-alert">—</span>
+          </div>
+          <div class="budget-row">
+            <span class="budget-label">Status</span>
+            <span class="budget-val" id="budget-status" style="color: var(--text-muted)">Unknown</span>
+          </div>
+        </div>
+      </div>
+      <p class="config-explainer">
+        <strong>Alert below</strong> is <code>config.budget.alertThreshold</code>:
+        the fraction of the ceiling <em>still unspent</em> at or below which the
+        orchestrator raises a budget alert. It is not a percentage of the budget
+        consumed. <strong>Status</strong> is derived from remaining-vs-alert-threshold
+        only, so it never claims a "critical" level the config has no threshold for.
+      </p>
+    </div>
+
+    <!-- Tasks -->
+    <div class="tasks-card">
+      <h3>📋 Tasks</h3>
+      <div class="task-list" id="task-list">
+        <div class="empty-message">No tasks yet</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Cost Breakdown: reads /api/costs, which covers the FULL history rather
+       than only the live agents in state. -->
+  <div class="cost-section">
+    <div class="cost-card">
+      <h3>💸 Cost Breakdown</h3>
+      <div class="cost-status hidden" id="cost-status"></div>
+      <div class="cost-grid">
+        <div class="cost-chart" id="cost-by-agent">
+          <div class="cost-chart-title">By Agent</div>
+          <div class="empty-message" style="padding:8px">No cost report yet</div>
+        </div>
+        <div class="cost-chart" id="cost-by-model">
+          <div class="cost-chart-title">By Model</div>
+          <div class="empty-message" style="padding:8px">No cost report yet</div>
+        </div>
+      </div>
+      <div class="cost-chart" id="cost-accounting" style="margin-top:16px">
+        <div class="cost-chart-title">Accounting</div>
+        <div class="empty-message" style="padding:8px">No cost report yet</div>
+      </div>
+      <p class="cost-basis" id="cost-basis"></p>
+    </div>
+  </div>
+
+  <!-- Config Panel. Read-only, matching the server: it has no config write
+       path, and a localhost socket with CORS:* is not the place to add one. -->
+  <div class="config-section">
+    <div class="config-card">
+      <h3>⚙️ Configuration <span class="readonly-badge">Read-only</span></h3>
+      <div class="config-grid">
+        <div class="config-group">
+          <div class="config-group-title">🤖 Models per Role</div>
+          <div id="config-models">
+            <div class="config-row"><span class="config-key">—</span><span class="config-val unreported">No state received</span></div>
+          </div>
+        </div>
+        <div class="config-group">
+          <div class="config-group-title">💰 Budget</div>
+          <div id="config-budget">
+            <div class="config-row"><span class="config-key">—</span><span class="config-val unreported">No state received</span></div>
+          </div>
+        </div>
+        <div class="config-group">
+          <div class="config-group-title">🔧 Self-Healing</div>
+          <div id="config-healing">
+            <div class="config-row"><span class="config-key">—</span><span class="config-val unreported">No state received</span></div>
+          </div>
+        </div>
+      </div>
+      <p class="config-explainer">
+        Read from <code>state.config</code> under the real key names.
+        <strong>Budget</strong> is the constraint in force right now, which
+        <code>execute()</code> may have replaced for the duration of a run.
+        <strong>Self-healing</strong> is <code>config.selfHealing</code>. There is no
+        critical threshold, no auto-terminate and no escalation or deadlock-detection
+        setting — none of those exist, so none are shown. Escalation to a
+        notification is a code default after retries and model fallback are
+        exhausted, not a configuration value.
+      </p>
+    </div>
+  </div>
+
+  <!-- Resolved Config viewer. Replaces the editor: there is no write path to
+       apply to, so there is nothing for an Apply button to do. -->
+  <div class="config-editor-section">
+    <div class="config-editor-card">
+      <div class="config-editor-header">
+        <h3>📝 Resolved Config <span class="readonly-badge">Read-only</span></h3>
+        <div class="config-editor-actions">
+          <button class="config-btn" id="config-format-btn">Format</button>
+          <button class="config-btn" id="config-validate-btn">Check</button>
+        </div>
+      </div>
+      <textarea class="config-textarea" id="config-editor" readonly wrap="off" spellcheck="false"
+        placeholder="No configuration received from the server yet."></textarea>
+      <div class="config-status" id="config-editor-status">Read-only: this server accepts no configuration writes.</div>
+    </div>
+  </div>
+
+  <!-- Activity Log -->
+  <div class="activity-card">
+    <h3>
+      <span>📈 Activity Log</span>
+      <span class="activity-filter-bar">
+        <button class="activity-filter-btn active" data-afilter="all">All</button>
+        <button class="activity-filter-btn" data-afilter="spawn">Spawn</button>
+        <button class="activity-filter-btn" data-afilter="task">Task</button>
+        <button class="activity-filter-btn" data-afilter="error">Error</button>
+        <button class="activity-filter-btn" data-afilter="budget">Budget</button>
+        <button class="activity-filter-btn" data-afilter="system">System</button>
+        <button class="activity-filter-btn" data-afilter="info">Info</button>
+      </span>
+    </h3>
+    <div class="log-container" id="log-container">
+      <div class="log-entry event-info">
+        <span class="log-time">--:--:--</span>
+        <span class="log-icon">ℹ</span>
+        <span class="log-msg">Waiting for connection to Nexus server...</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Event Stream -->
+  <div class="log-stream-section">
+    <div class="log-stream-card">
+      <h3>
+        <span>📡 Event Stream</span>
+        <span class="log-filter-bar">
+          <button class="log-filter-btn active" data-filter="all">All</button>
+          <button class="log-filter-btn" data-filter="success">Success</button>
+          <button class="log-filter-btn" data-filter="warning">Warning</button>
+          <button class="log-filter-btn" data-filter="error">Error</button>
+          <button class="log-filter-btn" data-filter="task">Task</button>
+          <button class="log-filter-btn" data-filter="system">System</button>
+          <button class="log-filter-btn" data-filter="budget">Budget</button>
+        </span>
+      </h3>
+      <div class="log-stream-container" id="log-stream-container">
+        <div class="log-stream-entry event-info">
+          <span class="ls-time">--:--:--</span>
+          <span class="ls-badge">INFO</span>
+          <span class="ls-msg">Waiting for events...</span>
+        </div>
+      </div>
+      <div class="log-stream-count" id="log-stream-count">0 events</div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  // ── Constants ──
+  var MAX_LOG_ENTRIES = 200;
+  var CIRCUMFERENCE = 2 * Math.PI * 52; // ~326.73, the r=52 ring
+  var AUTO_REFRESH_INTERVAL = 5000;
+  var STALE_AFTER_MS = 15000; // a snapshot older than this is labelled stale
+  // The server truncates \`result.output\` at this length. Labelled in the UI so a
+  // clipped output is not read as the whole output.
+  var SERVER_OUTPUT_TRUNCATION = 500;
+
+  var ws = null;
+  var reconnectDelay = 1000;
+  var reconnectTimer = null;
+  var logEntries = [];
+  var autoRefreshTimer = null;
+  var lastState = null;
+  /** ISO timestamp of the last snapshot we actually received. */
+  var lastStateReceivedAt = null;
+  /** ISO \`state.lastUpdated\`, as the server stamped it. */
+  var lastStateUpdated = null;
+  /** Parsed /api/costs, or null when it has never loaded. */
+  var costReport = null;
+  /** 'loading' | 'ready' | 'failed' — what to say about /api/costs. */
+  var costReportStatus = 'loading';
+  var costReportError = '';
+
+  // Log Stream
+  var logStreamEntries = [];
+  var MAX_LOG_STREAM = 500;
+  var logFilter = 'all';
+
+  // Activity Log filter
+  var activityFilter = 'all';
+
+  // Sessions filter
+  var sessionFilter = 'all';
+
+  // Role emojis
+  var ROLE_EMOJI = {
+    architect: '🏗️', coder: '💻', reviewer: '🔍',
+    tester: '🧪', explorer: '🔭', documenter: '📝'
+  };
+
+  // Role colors for cost bars
+  var ROLE_COLORS = {
+    architect: '#bc8cff', coder: '#58a6ff', reviewer: '#39d2c0',
+    tester: '#3fb950', explorer: '#d29922', documenter: '#8b949e'
+  };
+  var BAR_COLOR_PALETTE = ['#58a6ff', '#bc8cff', '#39d2c0', '#3fb950', '#d29922', '#f0883e', '#f85149'];
+
+  // ── DOM Refs ──
+  var $connBadge = document.getElementById('conn-badge');
+  var $connText = document.getElementById('conn-text');
+  var $uptime = document.getElementById('uptime');
+  var $autoRefreshCheck = document.getElementById('auto-refresh-check');
+  var $lastRefresh = document.getElementById('last-refresh');
+  var $orchStatus = document.getElementById('orch-status');
+
+  // Stats
+  var $statAgents = document.getElementById('stat-agents');
+  var $statAgentsSub = document.getElementById('stat-agents-sub');
+  var $statTasks = document.getElementById('stat-tasks');
+  var $statTasksSub = document.getElementById('stat-tasks-sub');
+  var $statSessions = document.getElementById('stat-sessions');
+  var $statSessionsSub = document.getElementById('stat-sessions-sub');
+  var $statSpent = document.getElementById('stat-spent');
+  var $statSpentSub = document.getElementById('stat-spent-sub');
+  var $statRemaining = document.getElementById('stat-remaining');
+  var $statRemainingSub = document.getElementById('stat-remaining-sub');
+  var $statUnbilled = document.getElementById('stat-unbilled');
+  var $statUnbilledSub = document.getElementById('stat-unbilled-sub');
+
+  // Sessions
+  var $sessionsContainer = document.getElementById('sessions-container');
+  var $sessionCount = document.getElementById('session-count');
+  var $orphanBanner = document.getElementById('orphan-banner');
+
+  // Agents
+  var $agentsContainer = document.getElementById('agents-container');
+  var $agentCount = document.getElementById('agent-count');
+
+  // Budget
+  var $gaugeRing = document.getElementById('gauge-ring');
+  var $gaugeFill = document.getElementById('gauge-fill');
+  var $gaugePct = document.getElementById('gauge-pct');
+  var $budgetTotal = document.getElementById('budget-total');
+  var $budgetSpent = document.getElementById('budget-spent');
+  var $budgetRemaining = document.getElementById('budget-remaining');
+  var $budgetAlert = document.getElementById('budget-alert');
+  var $budgetStatus = document.getElementById('budget-status');
+
+  // Tasks
+  var $taskList = document.getElementById('task-list');
+
+  // Log
+  var $logContainer = document.getElementById('log-container');
+
+  // Task dependency graph
+  var $dagContainer = document.getElementById('dag-container');
+  var $dagCount = document.getElementById('dag-count');
+  var $dagNote = document.getElementById('dag-note');
+
+  // Config
+  var $configModels = document.getElementById('config-models');
+  var $configBudget = document.getElementById('config-budget');
+  var $configHealing = document.getElementById('config-healing');
+
+  // Resolved config viewer
+  var $configEditor = document.getElementById('config-editor');
+  var $configEditorStatus = document.getElementById('config-editor-status');
+  var $configFormatBtn = document.getElementById('config-format-btn');
+  var $configValidateBtn = document.getElementById('config-validate-btn');
+
+  // Log Stream
+  var $logStreamContainer = document.getElementById('log-stream-container');
+  var $logStreamCount = document.getElementById('log-stream-count');
+
+  // Cost
+  var $costByAgent = document.getElementById('cost-by-agent');
+  var $costByModel = document.getElementById('cost-by-model');
+  var $costAccounting = document.getElementById('cost-accounting');
+  var $costStatus = document.getElementById('cost-status');
+  var $costBasis = document.getElementById('cost-basis');
+
+  // ── Value formatting ──
+  //
+  // One rule drives all of these: a value the server did not report renders as
+  // an em dash, never as a plausible number. \`num()\` returning null for a
+  // non-finite input is what makes that possible, so a caller cannot
+  // accidentally format \`undefined\` as \`$0.00\`.
+
+  /** A finite number, or null. The gate every formatter goes through. */
+  function num(v) {
+    return (typeof v === 'number' && isFinite(v)) ? v : null;
+  }
+
+  function fmt$(v) {
+    var n = num(v);
+    return n === null ? '—' : '$' + n.toFixed(2);
+  }
+
+  function fmtInt(v) {
+    var n = num(v);
+    return n === null ? '—' : Math.round(n).toLocaleString('en-US');
+  }
+
+  function fmtMs(v) {
+    var n = num(v);
+    if (n === null) return '—';
+    if (n < 1000) return Math.round(n) + 'ms';
+    return (n / 1000).toFixed(2) + 's';
+  }
+
+  /** A 0..1 fraction as a percentage, or '—'. */
+  function fmtPct(fraction) {
+    var n = num(fraction);
+    return n === null ? '—' : (n * 100).toFixed(1) + '%';
+  }
+
+  function fmtTime(iso) {
+    var d = iso ? new Date(iso) : null;
+    if (!d || isNaN(d.getTime())) return '—';
+    return d.toLocaleTimeString('en-US', { hour12: false });
+  }
+
+  function fmtDateTime(iso) {
+    var d = iso ? new Date(iso) : null;
+    if (!d || isNaN(d.getTime())) return '—';
+    return d.toLocaleString('en-US', { hour12: false });
+  }
+
+  function fmtElapsed(ms) {
+    var s = Math.floor(ms / 1000);
+    var h = Math.floor(s / 3600);
+    var m = Math.floor((s % 3600) / 60);
+    var sec = s % 60;
+    if (h > 0) return h + 'h ' + m + 'm';
+    if (m > 0) return m + 'm ' + sec + 's';
+    return sec + 's';
+  }
+
+  function now() {
+    return new Date().toLocaleTimeString('en-US', { hour12: false });
+  }
+
+  /** 'enabled' / 'disabled' / 'not reported' for a boolean the server may omit. */
+  function boolText(v) {
+    if (typeof v !== 'boolean') return { text: 'not reported', cls: 'unreported' };
+    return { text: v ? 'enabled' : 'disabled', cls: v ? 'enabled' : 'disabled' };
+  }
+
+  /** A string, or the unreported marker. Never substitutes a placeholder. */
+  function text(v) {
+    return (typeof v === 'string' && v.length > 0) ? v : null;
+  }
+
+  function escHtml(s) {
+    var d = document.createElement('div');
+    d.textContent = s === null || s === undefined ? '' : String(s);
+    return d.innerHTML;
+  }
+
+  // ── Header: lifecycle, uptime, snapshot age ──
+
+  /**
+   * \`running\` and \`paused\` are separate server fields. \`paused\` wins when both
+   * are true, because a paused orchestrator is mid-run and not executing — that
+   * is the state the old page could not show at all.
+   */
+  function renderLifecycle(state) {
+    var running = state.running;
+    var paused = state.paused;
+    if (typeof running !== 'boolean' && typeof paused !== 'boolean') {
+      $orchStatus.className = 'orch-pill unknown';
+      $orchStatus.textContent = 'No state';
+      $orchStatus.title = 'The server has not reported running/paused yet.';
+      return;
+    }
+    if (paused === true) {
+      $orchStatus.className = 'orch-pill paused';
+      $orchStatus.textContent = 'Paused';
+    } else if (running === true) {
+      $orchStatus.className = 'orch-pill running';
+      $orchStatus.textContent = 'Running';
+    } else {
+      $orchStatus.className = 'orch-pill idle';
+      $orchStatus.textContent = 'Idle';
+    }
+    $orchStatus.title = 'state.running=' + String(running) + ' · state.paused=' + String(paused);
+  }
+
+  /** Narrow an arbitrary parsed JSON value to an object, or null. */
+  function asObject(v) {
+    if (v === null || typeof v !== 'object' || Array.isArray(v)) return null;
+    return v;
+  }
+
+  /** Narrow an arbitrary parsed JSON value to an array, or []. */
+  function asArray(v) {
+    return Array.isArray(v) ? v : [];
+  }
+
+  /**
+   * Age of the last snapshot, labelled. A page holding a stale snapshot is
+   * presenting numbers that are no longer true, so the staleness is stated
+   * rather than the timestamp simply left sitting there.
+   */
+  function renderSnapshotAge() {
+    if (lastStateReceivedAt === null) {
+      $lastRefresh.textContent = 'No state received';
+      $lastRefresh.className = 'last-refresh lost';
+      return;
+    }
+    var age = Date.now() - lastStateReceivedAt;
+    var text = 'State ' + fmtTime(lastStateUpdated || new Date(lastStateReceivedAt).toISOString())
+      + ' (' + fmtElapsed(age) + ' ago)';
+    $lastRefresh.textContent = text;
+    $lastRefresh.className = 'last-refresh' + (age > STALE_AFTER_MS ? ' stale' : '');
+    $lastRefresh.title = 'Snapshot received at ' + fmtTime(new Date(lastStateReceivedAt).toISOString())
+      + '. ' + (ws && ws.readyState === WebSocket.OPEN
+          ? 'Auto-refresh asks the server every ' + (AUTO_REFRESH_INTERVAL / 1000) + 's.'
+          : 'Not connected: this may be the last state the server sent.');
+  }
+
+  // ── Auto-refresh ──
+  //
+  // The server answers \`{type:'getState'}\` and pushes a throttled snapshot on
+  // every change, so the push is what keeps the page fresh and this poll is the
+  // belt-and-braces refresh. Events are NOT deduped client-side: the server
+  // delivers each one exactly once.
+
+  function startAutoRefresh() {
+    stopAutoRefresh(true);
+    autoRefreshTimer = setInterval(function() {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        try {
+          ws.send(JSON.stringify({ type: 'getState' }));
+        } catch (e) {
+          addLog('error', '⚠️', 'Could not request state: ' + errorText(e));
+        }
+      }
+      refreshSideChannels();
+    }, AUTO_REFRESH_INTERVAL);
+  }
+
+  function stopAutoRefresh(silent) {
+    if (autoRefreshTimer) { clearInterval(autoRefreshTimer); autoRefreshTimer = null; }
+    if (!silent) renderSnapshotAge();
+  }
+
+  $autoRefreshCheck.addEventListener('change', function() {
+    if (this.checked) {
+      startAutoRefresh();
+      refreshSideChannels();
+    } else {
+      stopAutoRefresh();
+    }
+  });
+
+  /**
+   * \`/api/health\` and \`/api/costs\` are the two things the WebSocket does not
+   * carry. Polled on the auto-refresh tick and once on connect.
+   */
+  function refreshSideChannels() {
+    refreshHealth();
+    refreshCostReport();
+  }
+
+  function refreshHealth() {
+    fetch('/api/health')
+      .then(function(res) {
+        if (res.status !== 200) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function(body) {
+        var data = asObject(body);
+        if (data === null) throw new Error('not an object');
+        var secs = num(data.uptime);
+        if (secs === null) {
+          $uptime.textContent = 'Server uptime —';
+          $uptime.title = '/api/health did not report uptime.';
+          return;
+        }
+        $uptime.textContent = 'Server uptime ' + fmtElapsed(secs * 1000);
+        $uptime.title = 'The dashboard server process, from /api/health.';
+      })
+      .catch(function(err) {
+        $uptime.textContent = 'Server uptime unavailable';
+        $uptime.title = '/api/health failed: ' + errorText(err);
+      });
+  }
+
+  function refreshCostReport() {
+    fetch('/api/costs')
+      .then(function(res) {
+        if (res.status !== 200) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function(body) {
+        var data = asObject(body);
+        if (data === null) throw new Error('response was not an object');
+        costReport = data;
+        costReportStatus = 'ready';
+        costReportError = '';
+        renderCost();
+        // The cost report is a separate channel from the socket, so the unbilled
+        // card would otherwise wait for the next state push to notice it landed.
+        if (lastState) renderUnbilledStat();
+      })
+      .catch(function(err) {
+        costReportStatus = 'failed';
+        costReportError = errorText(err);
+        renderCost();
+        if (lastState) renderUnbilledStat();
+      });
+  }
+
+  // ── Activity Log ──
+  function addLog(type, icon, msg) {
+    var entry = document.createElement('div');
+    entry.className = 'log-entry event-' + type;
+    entry.setAttribute('data-atype', type);
+    entry.innerHTML = '<span class="log-time">' + now() + '</span>'
+      + '<span class="log-icon">' + icon + '</span>'
+      + '<span class="log-msg">' + escHtml(msg) + '</span>';
+
+    logEntries.push(entry);
+    if (logEntries.length > MAX_LOG_ENTRIES) {
+      var old = logEntries.shift();
+      if (old.parentNode) old.parentNode.removeChild(old);
+    }
+
+    if (activityFilter !== 'all' && type !== activityFilter) {
+      entry.classList.add('hidden');
+    }
+
+    if ($logContainer.firstChild) {
+      $logContainer.insertBefore(entry, $logContainer.firstChild);
+    } else {
+      $logContainer.appendChild(entry);
+    }
+  }
+
+  function applyActivityFilter() {
+    for (var i = 0; i < logEntries.length; i++) {
+      var t = logEntries[i].getAttribute('data-atype');
+      if (activityFilter === 'all' || t === activityFilter) {
+        logEntries[i].classList.remove('hidden');
+      } else {
+        logEntries[i].classList.add('hidden');
+      }
+    }
+  }
+
+  function setupActivityFilters() {
+    var btns = document.querySelectorAll('.activity-filter-btn');
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener('click', function() {
+        activityFilter = this.getAttribute('data-afilter');
+        for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active');
+        this.classList.add('active');
+        applyActivityFilter();
+      });
+    }
+  }
+
+  // ── Log Stream ──
+  function addLogStream(severity, label, msg) {
+    var entry = document.createElement('div');
+    entry.className = 'log-stream-entry event-' + severity;
+    entry.setAttribute('data-severity', severity);
+    entry.innerHTML = '<span class="ls-time">' + now() + '</span>'
+      + '<span class="ls-badge">' + escHtml(label) + '</span>'
+      + '<span class="ls-msg">' + escHtml(msg) + '</span>';
+
+    logStreamEntries.push({ el: entry, severity: severity });
+    if (logStreamEntries.length > MAX_LOG_STREAM) {
+      var old = logStreamEntries.shift();
+      if (old.el.parentNode) old.el.parentNode.removeChild(old.el);
+    }
+
+    if (logFilter !== 'all' && severity !== logFilter) {
+      entry.classList.add('hidden');
+    }
+
+    if ($logStreamContainer.firstChild) {
+      $logStreamContainer.insertBefore(entry, $logStreamContainer.firstChild);
+    } else {
+      $logStreamContainer.appendChild(entry);
+    }
+    $logStreamCount.textContent = logStreamEntries.length + ' events';
+  }
+
+  function setupLogFilters() {
+    var btns = document.querySelectorAll('.log-filter-btn');
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener('click', function() {
+        logFilter = this.getAttribute('data-filter');
+        for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active');
+        this.classList.add('active');
+        applyLogFilter();
+      });
+    }
+  }
+
+  function applyLogFilter() {
+    for (var i = 0; i < logStreamEntries.length; i++) {
+      var e = logStreamEntries[i];
+      if (logFilter === 'all' || e.severity === logFilter) {
+        e.el.classList.remove('hidden');
+      } else {
+        e.el.classList.add('hidden');
+      }
+    }
+  }
+
+  function errorText(err) {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return String(err);
+  }
+
+  // ── Connection ──
+  function setConnState(state) {
+    $connBadge.className = 'connection-badge ' + state;
+    if (state === 'connected') {
+      $connText.textContent = 'Live';
+    } else if (state === 'reconnecting') {
+      $connText.textContent = 'Reconnecting...';
+    } else {
+      $connText.textContent = 'Disconnected';
+    }
+  }
+
+  function socketUrl() {
+    // \`location.port\` is the dashboard's own HTTP port, which is also the
+    // WebSocket port — same server, same origin.
+    return 'ws://' + location.hostname + ':' + location.port + '/ws/events';
+  }
+
+  function connect() {
+    var url = socketUrl();
+
+    try {
+      ws = new WebSocket(url);
+    } catch (e) {
+      addLog('error', '❌', 'WebSocket creation failed: ' + errorText(e));
+      addLogStream('error', 'WS', 'WebSocket creation failed: ' + errorText(e));
+      scheduleReconnect();
+      return;
+    }
+
+    setConnState('reconnecting');
+    addLog('info', 'ℹ', 'Connecting to ' + url + '...');
+    addLogStream('info', 'CONN', 'Connecting to ' + url + '...');
+
+    ws.onopen = function() {
+      setConnState('connected');
+      reconnectDelay = 1000;
+      addLog('system', '🔌', 'Connected to Nexus server');
+      addLogStream('success', 'CONN', 'Connected to Nexus server');
+      if ($autoRefreshCheck.checked) {
+        startAutoRefresh();
+        refreshSideChannels();
+      }
+    };
+
+    ws.onmessage = function(evt) {
+      try {
+        handleMessage(JSON.parse(evt.data));
+      } catch (e) {
+        addLog('info', '📩', 'Non-JSON frame from server: ' + errorText(e));
+      }
+    };
+
+    ws.onclose = function(evt) {
+      setConnState('disconnected');
+      addLog('error', '🔌', 'Disconnected (code: ' + evt.code + ')');
+      addLogStream('error', 'CONN', 'Disconnected (code: ' + evt.code + ')');
+      stopAutoRefresh();
+      renderSnapshotAge();
+      scheduleReconnect();
+    };
+
+    ws.onerror = function() {
+      setConnState('disconnected');
+    };
+  }
+
+  function scheduleReconnect() {
+    if (reconnectTimer) return;
+    setConnState('reconnecting');
+    addLog('info', '🔄', 'Reconnecting in ' + (reconnectDelay / 1000) + 's...');
+    addLogStream('info', 'CONN', 'Reconnecting in ' + (reconnectDelay / 1000) + 's...');
+    reconnectTimer = setTimeout(function() {
+      reconnectTimer = null;
+      reconnectDelay = Math.min(reconnectDelay * 1.5, 30000);
+      connect();
+    }, reconnectDelay);
+  }
+
+  // ── Message Handler ──
+  //
+  // Every case below names an event the orchestrator actually emits and the
+  // broadcaster actually forwards. The names handled here are exactly
+  // BROADCAST_EVENTS plus \`orchestrator:state\` and \`pong\`; the eight dead
+  // names the previous version carried (\`state\`, \`task:started\`,
+  // \`task-assigned\`, \`task:completed\`, \`task-failed\`, \`task-completed\`,
+  // \`review-completed\`, \`status-update\`) were removed rather than left as
+  // branches that could never run.
+
+  function handleMessage(msg) {
+    var type = msg.type || msg.event || '';
+    var data = asObject(msg.data) || {};
+
+    switch (type) {
+      case 'orchestrator:state':
+        // The server sends \`{type, data, timestamp}\`. If \`data\` is somehow not
+        // an object, fall back rather than storing a primitive and reading
+        // \`.config\` off it.
+        lastState = asObject(msg.data) || asObject(msg.state) || asObject(msg) || {};
+        lastStateReceivedAt = Date.now();
+        lastStateUpdated = typeof lastState.lastUpdated === 'string' ? lastState.lastUpdated : null;
+        renderState(lastState);
+        renderSnapshotAge();
+        break;
+
+      case 'pong':
+        // Request/reply liveness. Not a state change, so it is not logged.
+        break;
+
+      case 'agent:spawned':
+        addLog('spawn', '🤖', 'Agent spawned: ' + agentLabel(data));
+        addLogStream('success', 'SPAWN', 'Agent spawned: ' + agentLabel(data));
+        break;
+
+      case 'agent:terminated':
+        addLog('info', '🛑', 'Agent terminated: ' + agentLabel(data));
+        addLogStream('warning', 'TERM', 'Agent terminated: ' + agentLabel(data));
+        break;
+
+      case 'agent:escalation':
+        addLog('error', '📣', 'Escalation: ' + escalationText(data));
+        addLogStream('error', 'ESCALATE', escalationText(data));
+        break;
+
+      case 'task:failed':
+        addLog('error', '❌', 'Task failed: ' + taskLabel(data) + ' — ' + errorOf(data));
+        addLogStream('error', 'FAIL', 'Task failed: ' + taskLabel(data) + ' — ' + errorOf(data));
+        break;
+
+      case 'cost:delta':
+        addLog('budget', '💲', costDeltaText(data));
+        addLogStream(costDeltaSeverity(data), 'COST', costDeltaText(data));
+        break;
+
+      case 'security:issues-found':
+        addLog('error', '🛡️', 'Security: ' + securityText(data));
+        addLogStream('error', 'SECURITY', securityText(data));
+        break;
+
+      case 'memory:set':
+        addLog('info', '🧠', 'Memory set: ' + memoryText(data));
+        addLogStream('info', 'MEMORY', memoryText(data));
+        break;
+
+      case 'budget:alert':
+        addLog('budget', '⚠️', 'Budget alert: ' + fmt$(data.remaining) + ' remaining (' + fmtPct(data.remainingPercent) + ')');
+        addLogStream('warning', 'BUDGET', 'Budget alert: ' + fmt$(data.remaining) + ' remaining (' + fmtPct(data.remainingPercent) + ')');
+        break;
+
+      case 'budget:exceeded':
+        addLog('error', '🚨', 'Budget exceeded. Spent: ' + fmt$(data.totalSpent));
+        addLogStream('error', 'BUDGET', 'Budget exceeded. Spent: ' + fmt$(data.totalSpent));
+        break;
+
+      case 'orchestrator:paused':
+        addLog('system', '⏸️', 'Orchestrator paused');
+        addLogStream('system', 'SYS', 'Orchestrator paused');
+        break;
+
+      case 'orchestrator:resumed':
+        addLog('system', '▶️', 'Orchestrator resumed');
+        addLogStream('system', 'SYS', 'Orchestrator resumed');
+        break;
+
+      case 'orchestrator:shutdown':
+        addLog('system', '🛑', 'Orchestrator shutting down');
+        addLogStream('system', 'SYS', 'Orchestrator shutting down');
+        break;
+
+      case 'config:reloaded':
+        addLog('system', '⚙️', 'Config reloaded: ' + configReloadText(data));
+        addLogStream('system', 'CONFIG', 'Config reloaded: ' + configReloadText(data));
+        break;
+
+      default:
+        // No known handler. Logged verbatim rather than dropped, so a new server
+        // event is visible instead of silently invisible.
+        if (type) {
+          var blob = JSON.stringify(msg.data === undefined ? msg : msg.data);
+          if (blob.length > 150) blob = blob.slice(0, 150) + '…';
+          addLog('info', '📩', type + ': ' + blob);
+          addLogStream('info', type.toUpperCase().slice(0, 8), blob);
+        }
+    }
+  }
+
+  // ── Event payload formatting ──
+  // Each returns a string containing a dash rather than a number when the field
+  // the server did not send is missing.
+
+  function agentLabel(d) {
+    if (d.name) return String(d.name);
+    if (d.role) return String(d.role);
+    return String(d.id || 'unknown agent');
+  }
+
+  function taskLabel(d) {
+    if (d.taskName) return String(d.taskName);
+    if (d.name) return String(d.name);
+    if (d.taskId) return String(d.taskId);
+    if (d.id) return String(d.id);
+    return 'unknown task';
+  }
+
+  function errorOf(d) {
+    var e = text(d.error);
+    return e === null ? 'no error message reported' : e;
+  }
+
+  function escalationText(d) {
+    return taskLabel(d) + ' on agent ' + (text(d.agentId) || 'unreported') + ' — ' + errorOf(d)
+      + ' (retries and model fallback are exhausted; notifying)';
+  }
+
+  /** \`SecurityIssue\` is \`{id, severity, category, message, file?, line?}\`. */
+  function securityText(d) {
+    var total = num(d.totalIssues);
+    var head = taskLabel(d) + ': ' + (total === null ? 'issue count unreported' : total + ' issue' + (total === 1 ? '' : 's'));
+    var issues = asArray(d.issues);
+    if (issues.length === 0) return head;
+    return head + ' — ' + issues.slice(0, 3).map(function(i) {
+      var obj = asObject(i);
+      if (obj === null) return String(i);
+      var where = text(obj.file);
+      if (where !== null) {
+        where += num(obj.line) === null ? '' : ':' + fmtInt(obj.line);
+      }
+      return (text(obj.message) || text(obj.id) || 'issue')
+        + ' [' + (text(obj.severity) || 'no severity')
+        + (text(obj.category) === null ? '' : '/' + text(obj.category))
+        + (where === null ? '' : ' at ' + where) + ']';
+    }).join('; ') + (issues.length > 3 ? ' …' : '');
+  }
+
+  function memoryText(d) {
+    var key = text(d.key);
+    return (key === null ? 'key unreported' : key)
+      + ' (scope ' + (text(d.scope) || 'unreported') + ', author ' + (text(d.author) || 'unreported') + ')';
+  }
+
+  /**
+   * \`config:reloaded\` carries \`NexusConfigLoadInfo\`, so the useful part is which
+   * files were consulted, whether a session override is layered on top of them,
+   * and how many times this has loaded.
+   */
+  function configReloadText(d) {
+    var parts = [];
+    var count = num(d.loadCount);
+    parts.push(count === null ? 'load count unreported' : 'load #' + fmtInt(count));
+    parts.push('loaded ' + fmtDateTime(d.loadedAt));
+    if (typeof d.sessionOverride === 'boolean') {
+      parts.push(d.sessionOverride ? 'session override layered on top of disk' : 'no session override');
+    }
+    var project = asObject(d.project);
+    if (project !== null) parts.push('project ' + configFileText(project));
+    var global = asObject(d.global);
+    if (global !== null) parts.push('global ' + configFileText(global));
+    return parts.join(' · ');
+  }
+
+  function configFileText(info) {
+    var existence = info.existed === true ? 'found'
+      : info.existed === false ? 'absent'
+      : 'existence unreported';
+    var parsed = typeof info.parsed === 'boolean' ? (info.parsed ? ', parsed' : ', unparsed') : '';
+    return (text(info.path) || 'path unreported') + ' (' + existence + parsed + ')';
+  }
+
+  /**
+   * \`cost:delta\` is the most informative event for sessions: it carries the
+   * session id, the reason it settled, and the amount. The \`reason\` decides how
+   * alarming the line is — \`abandoned\` means unbilled spend.
+   */
+  function costDeltaSeverity(d) {
+    if (d.reason === 'abandoned') return 'error';
+    var dc = num(d.deltaCost);
+    if (dc === null || dc === 0) return 'info';
+    return 'success';
+  }
+
+  function costDeltaText(d) {
+    var session = text(d.sessionID);
+    var reason = text(d.reason);
+    var delta = num(d.deltaCost);
+    var head = 'Session ' + (session === null ? 'unreported' : session)
+      + ' (' + taskLabel(d) + ')';
+    if (reason === 'abandoned') {
+      var uncollected = asObject(d.uncollected);
+      var lower = uncollected === null ? null : num(uncollected.observedUncollected);
+      return head + ' ABANDONED — stopped collecting while still running; at least '
+        + fmt$(lower) + ' unbilled (lower bound)';
+    }
+    if (reason === 'shutdown') {
+      return head + ' charged at teardown, settlement unverified: ' + fmt$(delta);
+    }
+    if (reason === 'session-idle') {
+      return head + ' went idle; settled ' + fmt$(delta) + ' (session total '
+        + fmt$(d.sessionTotalCost) + ')';
+    }
+    return head + ' ' + (reason === null ? 'reason unreported' : reason) + ': '
+      + fmt$(delta) + ' (session total ' + fmt$(d.sessionTotalCost) + ')';
+  }
+
+  // ── Render State ──
+  function renderState(state) {
+    if (!state) return;
+
+    var agents = asArray(state.agents);
+    var tasks = asArray(state.tasks);
+    var sessions = asArray(state.sessions);
+    var config = asObject(state.config);
+    var configBudget = config === null ? null : asObject(config.budget);
+    var maxTotalCost = configBudget === null ? null : num(configBudget.maxTotalCost);
+    var totalSpent = num(state.totalSpent);
+    var budgetRemaining = num(state.budgetRemaining);
+
+    renderLifecycle(state);
+
+    // ── Overview Stats ──
+    // The headline count is \`liveAgents.length\` too, not \`agents.length\`: the
+    // sub-line now says "live agents only" and points at the Agents section,
+    // so a total that included entries the page cannot render would contradict
+    // the caveat printed directly beneath it.
+    $statAgents.textContent = String(liveAgents.length);
+    var liveAgents = agents.filter(function(a) { return asObject(a) !== null; });
+    var activeCount = liveAgents.filter(function(a) { return a.status === 'working'; }).length;
+    // Both figures from \`liveAgents\`, not one from \`agents\`: the count beside
+    // the total has to be arithmetic the reader can do in their head, and
+    // \`agents.length - activeCount\` mixing the two lists made the sub-line
+    // disagree with the "Live agents only" section it is summarising whenever a
+    // null entry was present.
+    //
+    // The caveat stays IN this line, not only on the Agents section further
+    // down. The number it qualifies is HERE, so a reader who stops at the
+    // overview card must be told it is not a census — "3 working · 0 not
+    // working" reads as a complete count of the fleet, and this stat sits on a
+    // card of four, above the fold, long before the section that carries the
+    // qualifier is reached.
+    $statAgentsSub.textContent = activeCount + ' working · '
+      + (liveAgents.length - activeCount) + ' not working (live agents only)';
+
+    var liveTasks = tasks.filter(function(t) { return asObject(t) !== null; });
+    var runningTasks = liveTasks.filter(function(t) {
+      return t.status === 'running' || t.status === 'queued';
+    }).length;
+    var completedTasks = liveTasks.filter(function(t) { return t.status === 'completed'; }).length;
+    var failedTasks = liveTasks.filter(function(t) { return t.status === 'failed'; }).length;
+    $statTasks.textContent = String(tasks.length);
+    $statTasksSub.textContent = runningTasks + ' running/queued · ' + completedTasks + ' done'
+      + (failedTasks > 0 ? ' · ' + failedTasks + ' failed' : '');
+
+    $statSpent.textContent = fmt$(totalSpent);
+    $statSpentSub.textContent = maxTotalCost === null
+      ? 'Budget ceiling not reported'
+      : 'of ' + fmt$(maxTotalCost) + ' ceiling'
+        + (totalSpent === null ? '' : ' · ' + (maxTotalCost > 0 ? ((totalSpent / maxTotalCost) * 100).toFixed(1) + '% consumed' : 'ceiling is 0'));
+
+    $statRemaining.textContent = fmt$(budgetRemaining);
+    $statRemainingSub.textContent = remainingSub(maxTotalCost, totalSpent, budgetRemaining);
+
+    renderUnbilledStat();
+
+    // ── Sections ──
+    renderSessions(sessions);
+    renderAgents(agents, configBudget);
+    renderBudget(configBudget, totalSpent, budgetRemaining);
+    renderTasks(tasks);
+    renderDag(tasks);
+    renderCost();
+    renderConfig(state);
+    updateConfigViewer(state);
+  }
+
+  function remainingSub(maxTotalCost, totalSpent, budgetRemaining) {
+    if (maxTotalCost === null) return 'Ceiling not reported · no percentage shown';
+    if (maxTotalCost <= 0) return 'Ceiling is $0.00 · percentage undefined';
+    var base = num(budgetRemaining);
+    if (base === null) return 'Ceiling ' + fmt$(maxTotalCost) + ' · remaining unreported';
+    return ((base / maxTotalCost) * 100).toFixed(1) + '% of ' + fmt$(maxTotalCost) + ' ceiling';
+  }
+
+  /**
+   * The unbilled figure comes from \`/api/costs\`, never from a running sum over
+   * \`state.sessions\`, and it is always presented as a lower bound. It is not
+   * added to \`state.totalSpent\` on either side of this line.
+   */
+  function renderUnbilledStat() {
+    if (costReportStatus !== 'ready' || costReport === null) {
+      $statUnbilled.textContent = '—';
+      $statUnbilledSub.textContent = costReportStatus === 'failed'
+        ? 'Cost report unavailable'
+        : 'Loading cost report…';
+      return;
+    }
+    var uncollected = asObject(costReport.uncollected);
+    if (uncollected === null) {
+      $statUnbilled.textContent = '—';
+      $statUnbilledSub.textContent = 'Report carries no uncollected block';
+      return;
+    }
+    var lower = num(uncollected.observedUncollected);
+    var count = num(uncollected.sessions);
+    var evicted = asObject(uncollected.evicted);
+    var evictedCount = evicted === null ? null : num(evicted.sessions);
+
+    $statUnbilled.textContent = lower === null ? '—' : '≥ ' + fmt$(lower);
+    $statUnbilledSub.textContent = (count === null ? 'session count unreported' : count + ' session' + (count === 1 ? '' : 's'))
+      + ' · lower bound, NOT in Spend'
+      + evictedSuffix(evicted, evictedCount);
+  }
+
+  /**
+   * How a report's \`uncollected.evicted\` block is described, in THREE states.
+   *
+   * \`uncollectedSummary()\` always emits \`evicted\`, at zero, and it does so
+   * deliberately: the block is emitted unconditionally precisely so a consumer
+   * can tell "nothing was dropped" from "this build does not report drops".
+   * Collapsing the two — the obvious \`evictedCount > 0 ? ... : ''\` — throws
+   * that distinction away, and this is the one surface where that costs
+   * something concrete. The page is where a user decides whether the number in
+   * front of them is COMPLETE. Rendering an absent block as if it were a
+   * present-and-zero block asserts "nothing was evicted" from a report that
+   * never said so, which is the same silent-shrinking-number failure the block
+   * exists to prevent — arriving from the other direction.
+   *
+   *   absent   — the server does not report evictions at all. Say so, rather
+   *              than letting a silent omission read as a clean bill.
+   *   zero     — reported, and nothing was dropped. Said explicitly, because
+   *              "reported nothing" and "did not report" are different claims
+   *              and only one of them is true here.
+   *   positive — reported, and this many abandoned sessions left the itemised
+   *              list. Their money is in \`evicted\`, NOT in the headline figure.
+   */
+  function evictedSuffix(evicted, evictedCount) {
+    if (evicted === null || evictedCount === null) {
+      return ' · evictions NOT reported by this server';
+    }
+    if (evictedCount === 0) return ' · 0 evicted, list is complete';
+    return ' · plus ' + evictedCount + ' evicted from the itemised list';
+  }
+
+  // ── Sessions ──
+  /** Null-safe: a malformed entry must not take the whole section down. */
+  function sessionIsOrphan(s) {
+    if (s === null || s === undefined) return false;
+    return s.owned !== true || s.agentId === null;
+  }
+
+  function sessionPassesFilter(s) {
+    if (s === null || s === undefined) return false;
+    if (sessionFilter === 'all') return true;
+    if (sessionFilter === 'orphan') return sessionIsOrphan(s);
+    if (sessionFilter === 'running') return s.state === 'running';
+    if (sessionFilter === 'abandoned') return s.state === 'abandoned';
+    return true;
+  }
+
+  function setupSessionFilters() {
+    var btns = document.querySelectorAll('.session-filter-btn');
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener('click', function() {
+        sessionFilter = this.getAttribute('data-sfilter');
+        for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active');
+        this.classList.add('active');
+        renderSessions(lastState ? asArray(lastState.sessions) : []);
+      });
+    }
+  }
+
+  function renderSessions(sessions) {
+    sessions = asArray(sessions);
+    $sessionCount.textContent = String(sessions.length);
+    renderOrphanBanner(sessions);
+
+    if (sessions.length === 0) {
+      $sessionsContainer.innerHTML = '<div class="empty-message">'
+        + 'No sessions reported. This list covers sessions nexus owns, is still collecting from, '
+        + 'or has abandoned — it is not an enumeration of every open session on the server.'
+        + '</div>';
+      return;
+    }
+
+    // Orphans first: the row that matters must not be below the fold of a long
+    // list of healthy sessions.
+    var rows = sessions.slice().sort(function(a, b) {
+      return sessionRank(b) - sessionRank(a);
+    });
+
+    var shown = rows.filter(sessionPassesFilter);
+    if (shown.length === 0) {
+      $sessionsContainer.innerHTML = '<div class="empty-message">No sessions match this filter.</div>';
+      return;
+    }
+
+    var html = '<table class="session-table"><thead><tr>'
+      + '<th>Session</th><th>Owner</th><th>Task</th><th>Role</th><th>Model</th>'
+      + '<th>State</th><th class="num">Last read tokens</th><th class="num">Unbilled (≥)</th>'
+      + '</tr></thead><tbody>';
+    for (var i = 0; i < shown.length; i++) {
+      html += sessionRow(asObject(shown[i]));
+    }
+    html += '</tbody></table>';
+    $sessionsContainer.innerHTML = html;
+  }
+
+  function sessionRank(s) {
+    if (s === null || s === undefined) return 0;
+    if (s.state === 'abandoned') return 3;
+    if (sessionIsOrphan(s) && s.state === 'running') return 2;
+    if (sessionIsOrphan(s)) return 1;
+    return 0;
+  }
+
+  function sessionRow(s) {
+    if (s === null) return '';
+    var id = text(s.id);
+    var isOrphan = sessionIsOrphan(s);
+    var abandoned = s.state === 'abandoned';
+    var classes = 'session-row' + (abandoned ? ' abandoned' : isOrphan ? ' orphan' : '');
+    // 0 tokens means "never read", not "spent nothing". Say which.
+    var tokens = num(s.lastKnownTokens);
+    var unread = tokens === null || tokens === 0;
+    if (unread) classes += ' unread';
+
+    var owner;
+    if (isOrphan) {
+      owner = '<span class="flag orphan">No owning agent</span>';
+    } else {
+      owner = '<span class="mono">' + escHtml(text(s.agentId) || 'unreported') + '</span>';
+    }
+
+    var flags = '';
+    if (abandoned) flags += ' <span class="flag abandoned">Abandoned</span>';
+    if (unread) flags += ' <span class="flag unread" title="The server reports 0 when it has no reading for this session">No reading</span>';
+
+    var unbilled = num(s.observedUncollected);
+
+    return '<tr class="' + classes + '">'
+      + '<td class="mono">' + escHtml(id === null ? 'unreported' : id) + flags + '</td>'
+      + '<td>' + owner + '</td>'
+      + '<td class="mono">' + escHtml(text(s.taskId) || '—') + '</td>'
+      + '<td>' + escHtml(text(s.role) || '—') + '</td>'
+      + '<td class="mono">' + escHtml(text(s.model) || '—') + '</td>'
+      + '<td><span class="session-state ' + escHtml(text(s.state) || 'unknown') + '">'
+        + escHtml(text(s.state) || 'unreported') + '</span></td>'
+      + '<td class="num" title="The last token count actually observed for this session. Not a live reading.">'
+        + (unread ? '—' : fmtInt(tokens)) + '</td>'
+      + '<td class="num" title="Lower bound on what this session spent unbilled. A lower bound, not a total; excluded from Spend.">'
+        + (unbilled === null || unbilled === 0 ? '—' : '≥ ' + fmt$(unbilled)) + '</td>'
+      + '</tr>';
+  }
+
+  /**
+   * The section-level alarm. It fires on the specific combination that is the
+   * point of the whole view: a session that is still running, has no owning
+   * agent, and is therefore spending into nothing.
+   */
+  function renderOrphanBanner(sessions) {
+    var leaking = [];
+    var abandoned = 0;
+    for (var i = 0; i < sessions.length; i++) {
+      var s = asObject(sessions[i]);
+      if (s === null) continue;
+      if (s.state === 'abandoned') abandoned++;
+      if (sessionIsOrphan(s) && s.state === 'running') leaking.push(s);
+    }
+
+    if (leaking.length === 0 && abandoned === 0) {
+      $orphanBanner.innerHTML = '';
+      return;
+    }
+
+    var parts = [];
+    if (leaking.length > 0) {
+      var ids = leaking.map(function(s) { return text(s.id) || 'unreported'; });
+      parts.push(
+        '<div class="orphan-banner">'
+        + '<span class="icon">🔓</span><div>'
+        + '<div class="title">' + leaking.length + ' running session' + (leaking.length === 1 ? '' : 's')
+        + ' with no owning agent</div>'
+        + '<div class="body">These sessions are still generating after the agent that owned '
+        + 'them was terminated. Whatever they spend is not being collected, and the server '
+        + 'keeps them in view so you can terminate them.</div>'
+        + '<div class="detail">Session ids: <span class="mono">' + escHtml(ids.join(', ')) + '</span></div>'
+        + '</div></div>');
+    }
+    if (abandoned > 0) {
+      parts.push(
+        '<div class="orphan-banner" style="border-color: var(--red); background: rgba(248,81,73,0.10)">'
+        + '<span class="icon">⛔</span><div>'
+        + '<div class="title" style="color: var(--red)">' + abandoned + ' abandoned session'
+        + (abandoned === 1 ? '' : 's') + '</div>'
+        + '<div class="body">The plugin stopped watching these while they were still running. '
+        + 'Their unbilled spend is a <strong>lower bound</strong> and is excluded from Spend.</div>'
+        + '</div></div>');
+    }
+    $orphanBanner.innerHTML = parts.join('');
+  }
+
+  // ── Agents ──
+  function renderAgents(agents, configBudget) {
+    $agentCount.textContent = String(agents.length);
+    if (agents.length === 0) {
+      $agentsContainer.innerHTML = '<div class="no-agents"><div class="icon">🤖</div>'
+        + '<div class="msg">No agents spawned yet. Tasks will spawn agents automatically.</div></div>';
+      return;
+    }
+
+    // Normalised against the per-agent ceiling, not against the most expensive
+    // agent: normalising to the max makes the top bar 100% by construction, so
+    // the bars encode rank rather than budget consumption.
+    var perAgentCap = configBudget === null ? null : num(configBudget.maxCostPerAgent);
+
+    var html = '<div class="agents-grid">';
+    for (var i = 0; i < agents.length; i++) {
+      var a = asObject(agents[i]);
+      if (a === null) continue;
+      var role = text(a.role);
+      var emoji = (role === null ? null : ROLE_EMOJI[role]) || '🤖';
+      var status = text(a.status) || 'unknown';
+      var cost = num(a.totalCost);
+      var barPct = null;
+      if (cost !== null && perAgentCap !== null && perAgentCap > 0) {
+        barPct = Math.min(100, (cost / perAgentCap) * 100);
+      }
+      var overCap = cost !== null && perAgentCap !== null && cost > perAgentCap;
+      var barColor = overCap ? '#f85149' : (role === null ? '#58a6ff' : (ROLE_COLORS[role] || '#58a6ff'));
+
+      html += '<div class="agent-card fade-in">';
+      html += '<div class="agent-header">';
+      html += '<div class="agent-name"><span class="status-dot ' + escHtml(status) + '"></span>'
+        + emoji + ' ' + escHtml(text(a.name) || role || 'unnamed agent') + '</div>';
+      html += '<span class="agent-role-badge ' + escHtml(role || 'documenter') + '">'
+        + escHtml(role || 'role unreported') + '</span>';
+      html += '</div>';
+
+      // \`sessionID\`, not \`sessionId\` — the previous casing matched nothing the
+      // server sends, so the session link below was dead code.
+      var sessionId = text(a.sessionID);
+      html += '<div class="agent-meta" title="Resolved model">📦 ' + escHtml(text(a.model) || 'model unreported') + '</div>';
+      html += '<div class="agent-meta"><span>🔗</span><span class="mono">'
+        + (sessionId === null ? 'no session id reported' : escHtml(sessionId)) + '</span></div>';
+      html += '<div class="agent-meta" title="state.agents[].spawnedAt">🕑 spawned '
+        + escHtml(fmtDateTime(a.spawnedAt)) + '</div>';
+
+      html += '<div class="agent-metrics">';
+      html += metric('Tasks', num(a.tasksCompleted) === null ? '—' : fmtInt(a.tasksCompleted) + ' done');
+      html += metric('Failed', fmtInt(a.tasksFailed));
+      html += metric('Cost', fmt$(a.totalCost));
+      html += metric('Tokens', fmtInt(a.totalTokens));
+      html += metric('Avg resp', fmtMs(a.averageResponseTime));
+      html += metric('Error rate', fmtPct(a.errorRate));
+      html += '</div>';
+
+      html += '<div class="agent-cost-bar"><div class="agent-cost-fill" style="width:'
+        + (barPct === null ? 0 : barPct.toFixed(1)) + '%;background:' + barColor + '"></div></div>';
+      html += '<div class="bar-caption">'
+        + (perAgentCap === null || perAgentCap <= 0
+            ? 'Per-agent ceiling not reported — no bar scale'
+            : fmt$(a.totalCost) + ' of ' + fmt$(perAgentCap) + ' per-agent ceiling'
+              + (overCap ? ' · OVER CEILING' : ''))
+        + '</div>';
+      html += '</div>';
+    }
+    html += '</div>';
+    $agentsContainer.innerHTML = html;
+  }
+
+  function metric(label, value) {
+    return '<div class="metric"><span class="metric-label">' + escHtml(label) + '</span>'
+      + '<span class="metric-value">' + escHtml(value) + '</span></div>';
+  }
+
+  // ── Budget ──
+  function renderBudget(configBudget, totalSpent, budgetRemaining) {
+    var ceiling = configBudget === null ? null : num(configBudget.maxTotalCost);
+    var alertThreshold = configBudget === null ? null : num(configBudget.alertThreshold);
+    var hardLimit = configBudget === null ? null : configBudget.hardLimit;
+
+    // The gauge is a share of the REPORTED CEILING. With no ceiling there is no
+    // fraction to draw, so the ring is dimmed and the centre says '—' rather
+    // than falling back to an invented total.
+    var remainingFraction = null;
+    if (ceiling !== null && ceiling > 0 && budgetRemaining !== null) {
+      remainingFraction = Math.max(0, Math.min(1, budgetRemaining / ceiling));
+    }
+
+    if (remainingFraction === null) {
+      $gaugeRing.className = 'gauge-ring unmeasurable';
+      $gaugeFill.className = 'fill';
+      $gaugeFill.style.strokeDashoffset = String(CIRCUMFERENCE);
+      $gaugePct.textContent = '—';
+    } else {
+      $gaugeRing.className = 'gauge-ring';
+      $gaugePct.textContent = (remainingFraction * 100).toFixed(0) + '%';
+      $gaugeFill.style.strokeDashoffset = String(CIRCUMFERENCE * (1 - remainingFraction));
+      // Thresholds come from \`alertThreshold\` only. The previous 20%/40% bands
+      // were invented here and had nothing to do with any configuration.
+      $gaugeFill.className = 'fill'
+        + (alertThreshold !== null && remainingFraction <= alertThreshold ? ' danger' : '');
+    }
+
+    $budgetTotal.textContent = fmt$(ceiling);
+    $budgetSpent.textContent = fmt$(totalSpent);
+    $budgetRemaining.textContent = fmt$(budgetRemaining);
+
+    if (alertThreshold === null) {
+      $budgetAlert.textContent = 'not reported';
+      $budgetAlert.style.color = 'var(--text-muted)';
+    } else {
+      // Stated as what it is: the REMAINING fraction at or below which we alert.
+      $budgetAlert.textContent = fmtPct(alertThreshold) + ' remaining';
+      $budgetAlert.style.color = 'var(--yellow)';
+    }
+
+    if (remainingFraction === null) {
+      $budgetStatus.textContent = 'Unknown';
+      $budgetStatus.style.color = 'var(--text-muted)';
+    } else if (alertThreshold !== null && remainingFraction <= alertThreshold) {
+      $budgetStatus.textContent = 'At alert threshold';
+      $budgetStatus.style.color = 'var(--red)';
+    } else if (typeof hardLimit === 'boolean' && hardLimit && remainingFraction === 0) {
+      $budgetStatus.textContent = 'At ceiling';
+      $budgetStatus.style.color = 'var(--red)';
+    } else {
+      $budgetStatus.textContent = 'Above alert threshold';
+      $budgetStatus.style.color = 'var(--green)';
+    }
+  }
+
+  // ── Tasks ──
+  function renderTasks(tasks) {
+    if (tasks.length === 0) {
+      $taskList.innerHTML = '<div class="empty-message">No tasks yet</div>';
+      return;
+    }
+    var html = '';
+    for (var i = 0; i < tasks.length; i++) {
+      var t = asObject(tasks[i]);
+      if (t === null) continue;
+      var status = text(t.status) || 'unknown';
+      var priority = text(t.priority);
+
+      html += '<div class="task-item ' + escHtml(status) + '">';
+      html += '<div class="task-line">';
+      html += '<div class="task-info">';
+      html += '<span class="task-name" title="' + escHtml(text(t.id) || '') + '">'
+        + escHtml(text(t.name) || text(t.id) || 'unnamed task') + '</span>';
+      if (text(t.role) !== null) html += '<span class="task-role">' + escHtml(text(t.role)) + '</span>';
+      if (priority !== null) {
+        html += '<span class="task-chip priority-' + escHtml(priority) + '">' + escHtml(priority) + '</span>';
+      }
+      html += '</div>';
+      // cost/tokensUsed are \`TaskResult\` fields, absent until a task has a
+      // result. Rendered only when present — no \`$0.00\` for "not run yet".
+      if (num(t.cost) !== null) html += '<span class="task-cost">' + fmt$(t.cost) + '</span>';
+      if (num(t.tokensUsed) !== null) html += '<span class="task-cost">' + fmtInt(t.tokensUsed) + ' tok</span>';
+      html += '<span class="task-status ' + escHtml(status) + '">' + escHtml(status) + '</span>';
+      html += '</div>';
+
+      // assignedAgent: whose it is, and dependencies: what it waits on.
+      var meta = [];
+      var agent = text(t.assignedAgent);
+      meta.push('agent: ' + (agent === null ? 'unassigned' : agent));
+      var deps = Array.isArray(t.dependencies) ? t.dependencies : [];
+      meta.push('deps: ' + (deps.length === 0 ? 'none reported' : deps.join(', ')));
+      if (num(t.tokensUsed) !== null) meta.push('tokens: ' + fmtInt(t.tokensUsed));
+      html += '<div class="task-meta">';
+      for (var m = 0; m < meta.length; m++) {
+        var isMono = meta[m].indexOf('agent:') === 0 || meta[m].indexOf('deps:') === 0;
+        html += '<span class="' + (isMono ? 'mono' : '') + '">' + escHtml(meta[m]) + '</span>';
+      }
+      html += '</div>';
+
+      html += taskResultBlock(t);
+      html += '</div>';
+    }
+    $taskList.innerHTML = html;
+  }
 
-// src/broadcast.ts
-class StateBroadcaster {
-  clients = new Set;
-  orchestrator;
-  broadcastTimer = null;
-  throttleMs;
-  unsubscribers = [];
-  constructor(orchestrator, opts) {
-    this.orchestrator = orchestrator;
-    this.throttleMs = opts?.throttleMs ?? 1000;
-    this.setupEventListeners();
+  /**
+   * \`t.result\` is the only place a user can see WHY a task failed. Truncated to
+   * 500 characters by the server, which the caption says rather than letting a
+   * clipped output read as a whole one.
+   */
+  function taskResultBlock(t) {
+    var result = asObject(t.result);
+    if (result === null) return '';
+
+    var success = typeof result.success === 'boolean' ? result.success : null;
+    var output = text(result.output);
+    var err = text(result.error);
+    var duration = num(result.duration);
+    if (output === null && err === null && duration === null) return '';
+
+    var summary = success === true ? 'Result: success'
+      : success === false ? 'Result: failed'
+      : 'Result (success flag not reported)';
+
+    var body = '';
+    if (err !== null) body += '<pre class="error">' + escHtml(err) + '</pre>';
+    if (output !== null) {
+      body += '<pre>' + escHtml(output) + '</pre>';
+      if (output.length >= SERVER_OUTPUT_TRUNCATION) {
+        body += '<div class="result-truncation">Output truncated to '
+          + SERVER_OUTPUT_TRUNCATION + ' characters by the server.</div>';
+      }
+    }
+    if (duration !== null) {
+      body += '<div class="result-truncation">Duration: ' + escHtml(fmtMs(duration)) + '</div>';
+    }
+
+    return '<details class="task-result"><summary>' + escHtml(summary) + '</summary>'
+      + '<div>' + body + '</div></details>';
   }
-  addClient(ws) {
-    this.clients.add(ws);
-    this.sendTo(ws, {
-      type: "orchestrator:state",
-      data: this.orchestrator.getState(),
-      timestamp: new Date().toISOString()
-    });
+
+  // ── Task dependency graph ──
+  //
+  // The previous version topologically sorted the tasks and drew an arrow
+  // between each consecutive pair, which renders as a linear pipeline whatever
+  // the real graph is. This lays the tasks out in dependency LAYERS (longest
+  // path from a root) and draws one arrow per REPORTED edge, so the picture is
+  // the graph the server described or there is no picture.
+  //
+  // It is a truthful layout, not an optimal one: layers are assigned by
+  // longest-path depth and within a layer tasks keep the order \`state.tasks\`
+  // gave them, so edges may cross. A crossing-minimised ordering (Sugiyama or
+  // barycentre) is not attempted.
+
+  function renderDag(tasks) {
+    var all = tasks.filter(function(t) { return asObject(t) !== null; });
+    // A task with no id cannot be a node: an edge could never address it, so as
+    // a box it would look unconnected and imply "no dependencies". Counted and
+    // reported below rather than drawn.
+    var list = all.filter(function(t) { return typeof t.id === 'string' && t.id.length > 0; });
+    var idless = all.length - list.length;
+
+    if (all.length === 0) {
+      $dagCount.textContent = '0';
+      $dagNote.textContent = '';
+      $dagContainer.innerHTML = '<div class="dag-empty"><div class="icon">📊</div>'
+        + '<div>No tasks in the graph yet.</div></div>';
+      return;
+    }
+
+    var byId = {};
+    for (var i = 0; i < list.length; i++) byId[list[i].id] = list[i];
+
+    // Only edges whose source is actually in this state are drawn. An edge to a
+    // task that is not in the snapshot is counted and reported, because drawing
+    // nothing and saying nothing would read as "no dependencies".
+    var known = {};
+    var edges = [];
+    var dangling = 0;
+    var selfDep = 0;
+    for (var j = 0; j < list.length; j++) {
+      var t = list[j];
+      known[t.id] = [];
+      var deps = Array.isArray(t.dependencies) ? t.dependencies : [];
+      for (var d = 0; d < deps.length; d++) {
+        var dep = deps[d];
+        // A task listing ITSELF is dropped from the graph, and counted rather
+        // than skipped in silence: a self-edge can never be satisfied — the
+        // task waits for itself — so it is a data-integrity fault in the same
+        // class as the dangling refs and the cycles this note already reports,
+        // and drawing nothing while saying nothing would read as "no
+        // dependencies". It is deliberately NOT folded into \`dangling\`: the
+        // task IS in the snapshot, so counting it there would misdescribe the
+        // cause, and a reader chasing a bad id would never find it.
+        if (typeof dep !== 'string') continue;
+        if (dep === t.id) { selfDep++; continue; }
+        if (Object.prototype.hasOwnProperty.call(byId, dep)) {
+          known[t.id].push(dep);
+          edges.push({ from: dep, to: t.id });
+        } else {
+          dangling++;
+        }
+      }
+    }
+
+    // Cycle detection (Kahn). A cycle makes the dependency depth undefined; it
+    // is reported rather than silently laid out as if it were a DAG.
+    var inDegree = {};
+    for (var k = 0; k < list.length; k++) inDegree[list[k].id] = known[list[k].id].length;
+    var queue = [];
+    for (var q = 0; q < list.length; q++) if (inDegree[list[q].id] === 0) queue.push(list[q].id);
+    var acyclic = 0;
+    while (queue.length > 0) {
+      var current = queue.shift();
+      acyclic++;
+      for (var t2 = 0; t2 < list.length; t2++) {
+        var tid = list[t2].id;
+        if (known[tid].indexOf(current) === -1) continue;
+        inDegree[tid]--;
+        if (inDegree[tid] === 0) queue.push(tid);
+      }
+    }
+    var cycleCount = list.length - acyclic;
+
+    // Longest-path layering, iterated to a fixed point. In a cyclic graph the
+    // value stops being a depth; those tasks land in deep columns and the cycle
+    // is reported below rather than drawn as a dependency.
+    var layer = {};
+    for (var pass = 0; pass <= list.length; pass++) {
+      var changed = false;
+      for (var p = 0; p < list.length; p++) {
+        var pid = list[p].id;
+        var want = 0;
+        for (var pd = 0; pd < known[pid].length; pd++) {
+          var depLayer = layer[known[pid][pd]];
+          if (typeof depLayer !== 'number') continue;
+          if (depLayer + 1 > want) want = depLayer + 1;
+        }
+        if (layer[pid] !== want) { layer[pid] = want; changed = true; }
+      }
+      if (!changed) break;
+    }
+
+    var maxLayer = 0;
+    for (var m = 0; m < list.length; m++) {
+      if (layer[list[m].id] > maxLayer) maxLayer = layer[list[m].id];
+    }
+    var columns = [];
+    for (var c = 0; c <= maxLayer; c++) columns.push([]);
+    for (var s = 0; s < list.length; s++) columns[layer[list[s].id]].push(list[s]);
+
+    $dagCount.textContent = list.length
+      + (idless > 0 ? ' of ' + all.length : '')
+      + (columns.length > 1 ? ' · ' + columns.length + ' layers' : '');
+
+    // ── Note under the header: what is and is not drawn. ──
+    var notes = [];
+    notes.push('Columns are <strong>dependency layers</strong> (longest path from a task with no dependencies). '
+      + 'Every arrow is a dependency <code>state.tasks[].dependencies</code> edge the server reported. '
+      + 'Layout is longest-path layering, not crossing-minimised, so arrows may cross.');
+    if (edges.length === 0) {
+      notes.push('<strong>No task reports any dependency</strong> on another task in this snapshot, '
+        + 'so there is no graph to draw and the tasks below are shown by status only, in no implied order.');
+    }
+    if (cycleCount > 0) {
+      notes.push('<strong style="color: var(--red)">' + cycleCount + ' task' + (cycleCount === 1 ? '' : 's')
+        + ' sit in a dependency cycle.</strong> Layer depth is undefined for a cycle; those columns are a '
+        + 'fallback placement, not a dependency.');
+    }
+    if (dangling > 0) {
+      notes.push('<strong>' + dangling + ' dependency reference' + (dangling === 1 ? '' : 's')
+        + ' points at a task id that is not in this snapshot</strong> and ' + (dangling === 1 ? 'is' : 'are')
+        + ' not drawn. Either the task has left \`state.tasks\` or the id never matched.');
+    }
+    if (idless > 0) {
+      notes.push('<strong>' + idless + ' task' + (idless === 1 ? '' : 's')
+        + ' report no \`id\`</strong> and cannot be laid out, because an edge has nothing to address. '
+        + 'They are excluded from the graph and from the count above.');
+    }
+    if (selfDep > 0) {
+      notes.push('<strong style="color: var(--red)">' + selfDep + ' task' + (selfDep === 1 ? '' : 's')
+        + ' list themselves as a dependency.</strong> A task cannot be its own '
+        + 'prerequisite, so that edge is dropped and never drawn. It is a fault in the task data '
+        + 'rather than a missing task, and it will stall the task rather than fail it.');
+    }
+    $dagNote.innerHTML = notes.join('<br>');
+
+    // ── Nodes, one column per layer. ──
+    var html = '<div class="dag-canvas"><svg class="dag-edges" aria-hidden="true"></svg><div class="dag-layers">';
+    for (var col = 0; col < columns.length; col++) {
+      html += '<div class="dag-layer"><div class="dag-layer-index">L' + col + '</div>';
+      for (var n = 0; n < columns[col].length; n++) {
+        html += dagNode(columns[col][n], known);
+      }
+      html += '</div>';
+    }
+    html += '</div></div>';
+    $dagContainer.innerHTML = html;
+
+    drawDagEdges(edges, byId, cycleCount);
   }
-  removeClient(ws) {
-    this.clients.delete(ws);
+
+  function dagNode(t, known) {
+    var status = text(t.status) || 'unknown';
+    var deps = known[t.id];
+    return '<div class="dag-node" data-dag-id="' + escHtml(t.id) + '">'
+      + '<div class="dag-node-box ' + escHtml(status) + '" title="' + escHtml(t.name || t.id) + '">'
+      + escHtml(text(t.name) || text(t.id) || 'unnamed task') + '</div>'
+      + '<div class="dag-node-label">' + escHtml(status) + '</div>'
+      + '<div class="dag-node-role">' + escHtml(text(t.role) || 'role unreported') + '</div>'
+      + '<div class="dag-node-deps">' + (deps.length === 0 ? 'no deps' : '← ' + deps.length + ' dep' + (deps.length === 1 ? '' : 's')) + '</div>'
+      + '</div>';
   }
-  setupEventListeners() {
-    const orch = this.orchestrator;
-    const eventNames = [
-      "agent:spawned",
-      "agent:terminated",
-      "budget:alert",
-      "budget:exceeded"
-    ];
-    for (const eventName of eventNames) {
-      const unsub = orch.on?.(eventName, (data) => {
-        this.broadcast(eventName, data);
-      });
-      if (unsub)
-        this.unsubscribers.push(unsub);
+
+  /**
+   * Draws the reported edges over the layer columns. Edges whose two endpoints
+   * ended up in the same or inverted columns (only possible in a cycle) are
+   * counted and skipped rather than drawn as a misleading backwards arrow.
+   */
+  function drawDagEdges(edges, byId, cycleCount) {
+    var canvas = $dagContainer.querySelector('.dag-canvas');
+    var svg = $dagContainer.querySelector('.dag-edges');
+    if (canvas === null || svg === null) return;
+
+    var width = canvas.offsetWidth;
+    var height = canvas.offsetHeight;
+    if (width === 0 || height === 0) return;
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+    svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+
+    var port = {};
+    var boxes = canvas.querySelectorAll('.dag-node-box');
+    for (var i = 0; i < boxes.length; i++) {
+      var node = boxes[i].parentNode;
+      var id = node.getAttribute('data-dag-id');
+      port[id] = {
+        x1: boxes[i].offsetLeft + boxes[i].offsetWidth,
+        y1: boxes[i].offsetTop + boxes[i].offsetHeight / 2,
+        x2: boxes[i].offsetLeft,
+        y2: boxes[i].offsetTop + boxes[i].offsetHeight / 2
+      };
+    }
+
+    var paths = '';
+    var skipped = 0;
+    for (var e = 0; e < edges.length; e++) {
+      // \`Object.prototype\` has keys like \`toString\`, so an id that collided with
+      // one would otherwise resolve to a truthy inherited property and draw
+      // from a number instead of a port.
+      if (!Object.prototype.hasOwnProperty.call(port, edges[e].from)
+          || !Object.prototype.hasOwnProperty.call(port, edges[e].to)) {
+        skipped++;
+        continue;
+      }
+      var from = port[edges[e].from];
+      var to = port[edges[e].to];
+      if (to.x2 <= from.x1) { skipped++; continue; }
+      var source = asObject(byId[edges[e].from]);
+      var sourceStatus = source === null ? null : source.status;
+      var cls = sourceStatus === 'completed' ? 'edge-satisfied'
+        : sourceStatus === 'running' ? 'edge-active'
+        : 'edge-pending';
+      var dx = Math.max(24, (to.x2 - from.x1) / 2);
+      paths += '<path class="' + cls + '" d="M ' + from.x1 + ' ' + from.y1
+        + ' C ' + (from.x1 + dx) + ' ' + from.y1
+        + ', ' + (to.x2 - dx) + ' ' + to.y2
+        + ', ' + to.x2 + ' ' + to.y2 + '"></path>';
+      paths += '<polygon class="arrowhead" points="'
+        + to.x2 + ',' + (to.y2 - 3) + ' ' + (to.x2 - 5) + ',' + to.y2 + ' ' + (to.x2) + ',' + (to.y2 + 3)
+        + '" style="fill:' + (cls === 'edge-satisfied' ? 'var(--green)' : cls === 'edge-active' ? 'var(--blue)' : 'var(--border)') + '"></polygon>';
+    }
+    svg.innerHTML = paths;
+
+    if (skipped > 0) {
+      $dagNote.innerHTML += '<br><strong>' + skipped + ' edge' + (skipped === 1 ? '' : 's')
+        + ' could not be drawn</strong>'
+        + (cycleCount > 0 ? ' because its two endpoints are not in strict dependency order (see the cycle warning above).'
+                          : ' because an endpoint is not laid out.');
     }
   }
-  broadcastState() {
-    if (this.broadcastTimer)
+
+  // ── Cost ──
+  //
+  // \`state.agents\` is LIVE ONLY — \`terminateAgent\` deletes the agent, so its
+  // cost disappears from the agent list while the orchestrator still holds it.
+  // Everything below therefore comes from /api/costs, which covers the whole
+  // history, and the agent grid above says so rather than implying otherwise.
+
+  function renderCost() {
+    if (costReportStatus !== 'ready' || costReport === null) {
+      $costByAgent.innerHTML = '<div class="cost-chart-title">By Agent</div>'
+        + '<div class="empty-message" style="padding:8px">No cost report yet</div>';
+      $costByModel.innerHTML = '<div class="cost-chart-title">By Model</div>'
+        + '<div class="empty-message" style="padding:8px">No cost report yet</div>';
+      $costAccounting.innerHTML = '<div class="cost-chart-title">Accounting</div>'
+        + '<div class="empty-message" style="padding:8px">No cost report yet</div>';
+      $costBasis.textContent = '';
+
+      if (costReportStatus === 'failed') {
+        $costStatus.className = 'cost-status';
+        $costStatus.textContent = 'Cost report unavailable: /api/costs failed (' + costReportError
+          + '). These bars are not shown rather than shown as zero.';
+      } else {
+        $costStatus.className = 'cost-status hidden';
+        $costStatus.textContent = '';
+      }
       return;
-    this.broadcastTimer = setTimeout(() => {
-      this.broadcastTimer = null;
-      this.broadcast("orchestrator:state", this.orchestrator.getState());
-    }, this.throttleMs);
+    }
+
+    $costStatus.className = 'cost-status hidden';
+    $costStatus.textContent = '';
+
+    var ceiling = null;
+    if (lastState) {
+      var cfg = asObject(lastState.config);
+      var budget = cfg === null ? null : asObject(cfg.budget);
+      if (budget !== null) ceiling = num(budget.maxTotalCost);
+    }
+
+    // Bars are normalised against the BUDGET CEILING, so a bar's length is a
+    // share of the money available, not a rank among the bars. Falling back to
+    // share-of-total (labelled) only when there is no ceiling to divide by.
+    var useCeiling = ceiling !== null && ceiling > 0;
+    var basisText = useCeiling
+      ? 'Bar length is each entry\\'s cost as a share of the ' + fmt$(ceiling)
+        + ' budget ceiling — so a full bar means "this entry alone spent the '
+        + 'whole budget". Source: <code>/api/costs</code>, which covers the full '
+        + 'history, not only the live agents listed above.'
+      : 'Budget ceiling not reported, so bar length is each entry\\'s share of the '
+        + 'sum of the entries shown — relative size only, not budget consumption. '
+        + 'Source: <code>/api/costs</code>, which covers the full history.';
+    // \`byAgent\` and \`byModel\` are per-dimension sums, and neither is required to
+    // equal \`Total spent\`: a timeout-delta settlement attributes its cost to an
+    // agent id, while the pre-settlement charge already counted in \`Total spent\`.
+    // The chart totals are therefore labelled as the sum of what is shown, not as
+    // the run's total, so a discrepancy reads as what it is.
+    basisText += ' Each chart\\'s total is the sum of the entries in that chart, which is not '
+      + 'necessarily <code>Total spent</code> — the two are different accounting cuts of the same ledger.';
+    // Static text with no interpolation, so innerHTML is safe here and keeps the
+    // <code> markup readable.
+    $costBasis.innerHTML = basisText;
+
+    // Agent names, for the ids the report is keyed by. An agent that has been
+    // terminated is no longer in \`state.agents\`, so its id is shown on its own
+    // rather than guessed at.
+    var nameById = {};
+    if (lastState) {
+      var live = asArray(lastState.agents);
+      for (var i = 0; i < live.length; i++) {
+        var a = asObject(live[i]);
+        if (a !== null && typeof a.id === 'string') nameById[a.id] = a;
+      }
+    }
+
+    var byAgent = asObject(costReport.byAgent) || {};
+    var agentKeys = Object.keys(byAgent);
+    agentKeys.sort(function(a, b) { return num(byAgent[b]) - num(byAgent[a]); });
+    $costByAgent.innerHTML = costBars('By Agent', agentKeys, byAgent, useCeiling ? ceiling : null,
+      function(key) {
+        // \`nameById[key]\` is \`undefined\`, not \`null\`, for an agent the
+        // orchestrator has since deleted — which is most of them, and exactly
+        // the ones this chart exists to keep visible.
+        var a = nameById[key];
+        if (a === undefined || a === null) return key + ' (not a live agent)';
+        var role = text(a.role);
+        var emoji = role === null ? null : ROLE_EMOJI[role];
+        return (emoji === null ? null : emoji + ' ') + key + ' · ' + (text(a.name) || key);
+      });
+
+    var byModel = asObject(costReport.byModel) || {};
+    var modelKeys = Object.keys(byModel);
+    modelKeys.sort(function(a, b) { return num(byModel[b]) - num(byModel[a]); });
+    var tokensByModel = asObject(costReport.tokensByModel) || {};
+    $costByModel.innerHTML = costBars('By Model', modelKeys, byModel, useCeiling ? ceiling : null,
+      function(key) { return key; },
+      function(key) { return fmtInt(tokensByModel[key]) + ' tok'; });
+
+    renderCostAccounting();
   }
-  broadcast(event, data) {
-    const message = JSON.stringify({
-      type: event,
-      data,
-      timestamp: new Date().toISOString()
-    });
-    for (const client of this.clients) {
-      try {
-        client.send(message);
-      } catch {
-        this.clients.delete(client);
+
+  /**
+   * One bar chart. \`divisor\` is the budget ceiling when there is one; the caller
+   * says so in the caption, so the reader always knows what a bar length means.
+   * The footer sums what is on screen and calls it that, because a per-dimension
+   * sum is not the run's \`totalSpent\` and the two are allowed to disagree.
+   */
+  function costBars(title, keys, source, divisor, labelFor, valueSuffixFor) {
+    var head = '<div class="cost-chart-title">' + escHtml(title) + '</div>';
+    if (keys.length === 0) {
+      return head + '<div class="empty-message" style="padding:8px">Nothing recorded yet</div>';
+    }
+
+    var sum = 0;
+    for (var i = 0; i < keys.length; i++) sum += num(source[keys[i]]) || 0;
+
+    var html = head;
+    for (var k = 0; k < keys.length; k++) {
+      var key = keys[k];
+      var value = num(source[key]);
+      var widthPct;
+      if (value === null) {
+        widthPct = 0;
+      } else if (divisor !== null) {
+        widthPct = Math.max(0, Math.min(100, (value / divisor) * 100));
+      } else {
+        widthPct = sum > 0 ? (value / sum) * 100 : 0;
+      }
+      html += '<div class="cost-bar-row">'
+        + '<span class="cost-bar-label" title="' + escHtml(labelFor(key)) + '">' + escHtml(labelFor(key)) + '</span>'
+        + '<div class="cost-bar-track"><div class="cost-bar-fill" style="width:'
+        + widthPct.toFixed(1) + '%;background:' + BAR_COLOR_PALETTE[k % BAR_COLOR_PALETTE.length] + '"></div></div>'
+        + '<span class="cost-bar-value">' + escHtml(fmt$(value))
+        + (valueSuffixFor === undefined ? '' : '<span style="color:var(--text-muted);font-weight:400"> '
+          + escHtml(valueSuffixFor(key)) + '</span>')
+        + '</span>'
+        + '</div>';
+    }
+    html += '<div class="cost-total-row"><span class="cost-total-label">Sum of these entries</span>'
+      + '<span class="cost-total-value">' + escHtml(fmt$(sum)) + '</span></div>';
+    return html;
+  }
+
+  /**
+   * The measured/estimated split and the uncollected bound, side by side,
+   * because \`totalSpent\` on its own is not a fully billed figure and adding the
+   * lower bound to it would produce a third thing that is neither.
+   */
+  function renderCostAccounting() {
+    var report = asObject(costReport);
+    if (report === null) return;
+
+    var measured = num(report.measuredSpend);
+    var estimated = num(report.estimatedSpend);
+    var measuredEntries = num(report.measuredEntries);
+    var estimatedEntries = num(report.estimatedEntries);
+    var uncollected = asObject(report.uncollected);
+
+    var html = '<div class="cost-chart-title">Accounting</div>';
+    html += accountingRow('Measured', fmt$(measured));
+    html += accountingRow('Estimated', fmt$(estimated));
+    html += accountingRow('Total spent', fmt$(report.totalSpent));
+    html += accountingRow('Budget remaining', fmt$(report.budgetRemaining));
+    html += accountingRow('Priced entries', fmtInt(measuredEntries) + ' measured · ' + fmtInt(estimatedEntries) + ' estimated');
+    html += accountingRow('Tokens by model', String(Object.keys(asObject(report.tokensByModel) || {}).length) + ' models');
+
+    if (uncollected === null) {
+      html += accountingRow('Unbilled', 'no uncollected block in report', 'unbilled');
+    } else {
+      var count = num(uncollected.sessions);
+      var lower = num(uncollected.observedUncollected);
+      var evicted = asObject(uncollected.evicted);
+      var evictedCount = evicted === null ? null : num(evicted.sessions);
+      html += accountingRow('Unbilled (≥, excluded from Total spent)',
+        (lower === null ? '—' : fmt$(lower)) + ' across '
+        + (count === null ? 'an unreported number of' : String(count)) + ' session' + (count === 1 ? '' : 's'),
+        'unbilled');
+      // The same three-way distinction the stat card makes, as its own row
+      // rather than a suffix — see \`evictedSuffix\`. An absent block is stated,
+      // not rendered as a clean zero.
+      if (evicted === null || evictedCount === null) {
+        html += accountingRow('  of which evicted from the itemised list',
+          'not reported by this server', 'unbilled');
+      } else if (evictedCount === 0) {
+        html += accountingRow('  of which evicted from the itemised list',
+          '0 — the itemised list is complete', 'unbilled');
+      } else {
+        html += accountingRow('  of which evicted from the itemised list',
+          fmt$(evicted.observedUncollected) + ' across ' + evictedCount + ' session' + (evictedCount === 1 ? '' : 's'),
+          'unbilled');
       }
     }
+
+    html += '<div class="accounting-note">'
+      + 'Total spent is the orchestrator\\'s billed figure and is what the budget is checked against. '
+      + 'The unbilled row is a <strong>lower bound</strong> on what abandoned sessions spent without '
+      + 'being charged: it is the priced increment observed but not billed, and a session abandoned while '
+      + 'still generating keeps spending past that reading, so the true under-count is larger by an unknown '
+      + 'amount. It is deliberately not added to Total spent.'
+      + '</div>';
+
+    $costAccounting.innerHTML = html;
   }
-  sendTo(ws, data) {
-    try {
-      ws.send(JSON.stringify(data));
-    } catch {
-      this.clients.delete(ws);
+
+  function accountingRow(key, value, valueClass) {
+    return '<div class="accounting-row"><span class="k">' + escHtml(key) + '</span>'
+      + '<span class="v ' + (valueClass || '') + '">' + escHtml(value) + '</span></div>';
+  }
+
+  // ── Config panel (read-only, real key names) ──
+  function renderConfig(state) {
+    var config = asObject(state.config);
+    if (config === null) {
+      $configModels.innerHTML = '<div class="config-row"><span class="config-key">models</span>'
+        + '<span class="config-val unreported">state.config not reported</span></div>';
+      $configBudget.innerHTML = '<div class="config-row"><span class="config-key">budget</span>'
+        + '<span class="config-val unreported">state.config not reported</span></div>';
+      $configHealing.innerHTML = '<div class="config-row"><span class="config-key">selfHealing</span>'
+        + '<span class="config-val unreported">state.config not reported</span></div>';
+      return;
+    }
+
+    // Models per role: the resolved map's own keys, not a hardcoded role list.
+    // A configured role the list below did not think of still shows up.
+    var models = asObject(config.models);
+    if (models === null) {
+      $configModels.innerHTML = '<div class="config-row"><span class="config-key">models</span>'
+        + '<span class="config-val unreported">not reported</span></div>';
+    } else {
+      var roleKeys = Object.keys(models).sort();
+      if (roleKeys.length === 0) {
+        $configModels.innerHTML = '<div class="config-row"><span class="config-key">models</span>'
+          + '<span class="config-val unreported">empty</span></div>';
+      } else {
+        var mhtml = '';
+        for (var r = 0; r < roleKeys.length; r++) {
+          var model = text(models[roleKeys[r]]);
+          var emoji = ROLE_EMOJI[roleKeys[r]] || '🤖';
+          mhtml += configRow(emoji + ' ' + roleKeys[r],
+            model === null ? 'not reported' : model,
+            model === null ? 'unreported' : 'model');
+        }
+        $configModels.innerHTML = mhtml;
+      }
+    }
+
+    // Budget: the real keys, none of the invented ones.
+    var budget = asObject(config.budget);
+    if (budget === null) {
+      $configBudget.innerHTML = '<div class="config-row"><span class="config-key">budget</span>'
+        + '<span class="config-val unreported">not reported</span></div>';
+    } else {
+      var bhtml = '';
+      bhtml += configRow('maxTotalCost', fmt$(num(budget.maxTotalCost)));
+      bhtml += configRow('maxCostPerTask', fmt$(num(budget.maxCostPerTask)));
+      bhtml += configRow('maxCostPerAgent', fmt$(num(budget.maxCostPerAgent)));
+      // Stated as the remaining fraction it is, not as "critical at X% spent".
+      var alert = fmtPct(num(budget.alertThreshold));
+      bhtml += configRow('alertThreshold', alert === '—' ? 'not reported' : alert + ' remaining', 'warning');
+      // \`hardLimit\` is the real key and the opposite sense to \`autoTerminate\`:
+      // true means STOP at the ceiling. Labelled that way.
+      var hard = boolText(budget.hardLimit);
+      bhtml += configRow('hardLimit (stop at ceiling)', hard.text, hard.cls);
+      $configBudget.innerHTML = bhtml;
+    }
+
+    // Self-healing: the real keys only.
+    var healing = asObject(config.selfHealing);
+    if (healing === null) {
+      $configHealing.innerHTML = '<div class="config-row"><span class="config-key">selfHealing</span>'
+        + '<span class="config-val unreported">not reported</span></div>';
+    } else {
+      var hhtml = '';
+      var enabled = boolText(healing.enabled);
+      hhtml += configRow('enabled', enabled.text, enabled.cls);
+      hhtml += configRow('maxRetries', fmtInt(num(healing.maxRetries)));
+      hhtml += configRow('retryDelay', fmtMs(num(healing.retryDelay)));
+      hhtml += configRow('backoffMultiplier', num(healing.backoffMultiplier) === null
+        ? 'not reported'
+        : '× ' + num(healing.backoffMultiplier).toFixed(2));
+      var transfer = boolText(healing.contextTransfer);
+      hhtml += configRow('contextTransfer', transfer.text, transfer.cls);
+      $configHealing.innerHTML = hhtml;
     }
   }
-  getClientCount() {
-    return this.clients.size;
+
+  function configRow(key, value, valueClass) {
+    return '<div class="config-row"><span class="config-key">' + escHtml(key) + '</span>'
+      + '<span class="config-val ' + (valueClass || '') + '">' + escHtml(value) + '</span></div>';
   }
-  destroy() {
-    if (this.broadcastTimer) {
-      clearTimeout(this.broadcastTimer);
-      this.broadcastTimer = null;
+
+  // ── Resolved config viewer ──
+  //
+  // Was an editor with an Apply button that sent \`{type:'config:update'}\`. The
+  // server handles only \`ping\` and \`getState\`, so the button reported success
+  // and nothing happened. There is no auth story for writes and the socket is
+  // localhost with CORS \`*\`, so no write path was added here either: the field
+  // is \`readonly\` and says so, and the Apply control is gone.
+  function updateConfigViewer(state) {
+    var config = asObject(state.config);
+    if (config === null) {
+      $configEditor.value = '';
+      $configEditorStatus.textContent = 'Read-only: this server accepts no configuration writes. '
+        + 'No configuration has been reported yet.';
+      $configEditorStatus.className = 'config-status';
+      return;
     }
-    for (const unsub of this.unsubscribers) {
-      unsub();
+    var serialised;
+    try {
+      serialised = JSON.stringify(config, null, 2);
+    } catch (e) {
+      $configEditor.value = '';
+      $configEditorStatus.textContent = 'Read-only: the reported config could not be serialised: ' + errorText(e);
+      $configEditorStatus.className = 'config-status error';
+      return;
     }
-    this.unsubscribers = [];
-    this.clients.clear();
+    $configEditor.value = serialised;
+    $configEditorStatus.textContent = 'Read-only: this is the config the orchestrator reports as in force. '
+      + 'It is the resolved config (defaults → global → project → session override), not the file on disk. '
+      + 'This server accepts no configuration writes, so there is nothing to apply.';
+    $configEditorStatus.className = 'config-status';
   }
-}
+
+  $configFormatBtn.addEventListener('click', function() {
+    try {
+      var parsed = JSON.parse($configEditor.value);
+      $configEditor.value = JSON.stringify(parsed, null, 2);
+      $configEditorStatus.textContent = 'Re-indented. Still read-only — nothing was sent to the server.';
+      $configEditorStatus.className = 'config-status';
+    } catch (e) {
+      $configEditorStatus.textContent = 'Not valid JSON: ' + errorText(e);
+      $configEditorStatus.className = 'config-status error';
+    }
+  });
+
+  /**
+   * A shape check on the reported config, against the REAL key names. The old
+   * check looked for \`budget.maxBudget\`, which does not exist, so it could not
+   * have fired even when the editor had content.
+   */
+  $configValidateBtn.addEventListener('click', function() {
+    var parsed;
+    try {
+      parsed = asObject(JSON.parse($configEditor.value));
+      if (parsed === null) throw new Error('top level is not an object');
+    } catch (e) {
+      $configEditorStatus.textContent = 'Not valid JSON: ' + errorText(e);
+      $configEditorStatus.className = 'config-status error';
+      return;
+    }
+
+    var notes = [];
+    var budget = asObject(parsed.budget);
+    if (budget === null) {
+      notes.push('no \`budget\` block reported');
+    } else {
+      var ceiling = num(budget.maxTotalCost);
+      if (ceiling === null) notes.push('\`budget.maxTotalCost\` is missing or not a number');
+      else if (ceiling <= 0) notes.push('\`budget.maxTotalCost\` is ' + fmt$(ceiling) + ' — spend can never register against it');
+      var threshold = num(budget.alertThreshold);
+      if (threshold === null) notes.push('\`budget.alertThreshold\` is missing or not a number');
+      else if (threshold < 0 || threshold > 1) {
+        notes.push('\`budget.alertThreshold\` is ' + threshold + ', outside 0..1 — it is read as a fraction of budget REMAINING');
+      }
+      if (typeof budget.hardLimit !== 'boolean') notes.push('\`budget.hardLimit\` is missing or not a boolean');
+    }
+
+    var healing = asObject(parsed.selfHealing);
+    if (healing === null) {
+      notes.push('no \`selfHealing\` block reported');
+    } else {
+      if (typeof healing.enabled !== 'boolean') notes.push('\`selfHealing.enabled\` is missing or not a boolean');
+      var retries = num(healing.maxRetries);
+      if (retries === null) notes.push('\`selfHealing.maxRetries\` is missing or not a number');
+      else if (retries > 10) notes.push('\`selfHealing.maxRetries\` is ' + retries + ', which can mean many re-runs of a failing task');
+    }
+
+    if (asObject(parsed.models) === null) notes.push('no \`models\` map reported');
+
+    if (notes.length === 0) {
+      $configEditorStatus.textContent = 'Shape check passed: models, budget and selfHealing all carry the expected keys. '
+        + 'Read-only — nothing was sent to the server.';
+      $configEditorStatus.className = 'config-status success';
+    } else {
+      $configEditorStatus.textContent = notes.length + ' observation' + (notes.length === 1 ? '' : 's') + ': '
+        + notes.join('; ') + '. Read-only — nothing was sent to the server.';
+      $configEditorStatus.className = 'config-status';
+      $configEditorStatus.style.color = 'var(--yellow)';
+    }
+  });
+
+  // ── Init ──
+  setupLogFilters();
+  setupActivityFilters();
+  setupSessionFilters();
+  refreshHealth();
+  refreshCostReport();
+  addLog('system', '⚡', 'Nexus Dashboard initialized');
+  addLogStream('system', 'SYS', 'Nexus Dashboard initialized');
+  // The snapshot age and the orchestrator pill both need a periodic tick: the
+  // socket pushes on change, but "how old is what you are looking at" is only
+  // knowable with a clock.
+  setInterval(renderSnapshotAge, 1000);
+  connect();
+
+})();
+</script>
+</body>
+</html>
+`;
 
 // src/dashboard.ts
-import { join as join2 } from "node:path";
 var CORS_HEADERS = {
   "Access-Control-Allow-Origin": "*",
   "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
@@ -8911,10 +12504,58 @@ function jsonResponse(data, status = 200) {
     }
   });
 }
+function htmlResponse(html) {
+  return new Response(html, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+      ...CORS_HEADERS
+    }
+  });
+}
+function errorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+var cachedSpaHtml = null;
+function getSpaHtml() {
+  if (cachedSpaHtml !== null)
+    return cachedSpaHtml;
+  const inlined = dashboard_default;
+  if (typeof inlined !== "string" || inlined.length === 0) {
+    throw new Error("Dashboard HTML was not inlined into the bundle — the text loader for dashboard/index.html did not run");
+  }
+  cachedSpaHtml = inlined;
+  return cachedSpaHtml;
+}
+var API_ROUTES = new Map([
+  ["/api/state", (o) => o.getState()],
+  ["/api/config", (o) => o.configManager.exportConfig()],
+  ["/api/agents", (o) => o.getState().agents],
+  [
+    "/api/costs",
+    (o) => {
+      const parsed = JSON.parse(o.getCostReport());
+      if (parsed === null || typeof parsed !== "object") {
+        throw new Error("Cost report did not parse to an object");
+      }
+      return parsed;
+    }
+  ],
+  ["/api/health", () => ({ ok: true, uptime: process.uptime() })]
+]);
+function isApiPath(pathname) {
+  return pathname === "/api" || pathname.startsWith("/api/");
+}
+function stateMessage(orchestrator) {
+  return JSON.stringify({
+    type: "orchestrator:state",
+    data: orchestrator.getState(),
+    timestamp: new Date().toISOString()
+  });
+}
 
 class DashboardModule {
   server = null;
-  clients = new Set;
   orchestrator;
   constructor(orchestrator) {
     this.orchestrator = orchestrator;
@@ -8925,7 +12566,7 @@ class DashboardModule {
       this.server = Bun.serve({
         port,
         hostname: host,
-        async fetch(req, server) {
+        fetch(req, server) {
           const url = new URL(req.url);
           if (req.method === "OPTIONS") {
             return new Response(null, { headers: CORS_HEADERS });
@@ -8935,53 +12576,35 @@ class DashboardModule {
               return new Response(null);
             return new Response("WebSocket upgrade failed", { status: 500 });
           }
-          if (url.pathname === "/api/state") {
-            return jsonResponse(self.orchestrator.getState());
-          }
-          if (url.pathname === "/api/config") {
-            return jsonResponse(self.orchestrator.configManager.exportConfig());
-          }
-          if (url.pathname === "/api/agents") {
-            const state = self.orchestrator.getState();
-            return jsonResponse(state.agents);
-          }
-          if (url.pathname === "/api/costs") {
-            return jsonResponse(self.orchestrator.getCostReport());
-          }
-          if (url.pathname === "/api/health") {
-            return jsonResponse({ ok: true, uptime: process.uptime() });
+          if (isApiPath(url.pathname)) {
+            const handler = API_ROUTES.get(url.pathname);
+            if (!handler) {
+              return jsonResponse({ error: "Not found", path: url.pathname }, 404);
+            }
+            try {
+              return jsonResponse(handler(self.orchestrator));
+            } catch (err) {
+              return jsonResponse({
+                error: `Failed to build response for ${url.pathname}`,
+                detail: errorMessage(err)
+              }, 500);
+            }
           }
           try {
-            const spaPath = join2(process.cwd(), "dashboard", "index.html");
-            const spaContent = await Bun.file(spaPath).text();
-            if (spaContent.length > 100) {
-              return new Response(spaContent, {
-                headers: { "Content-Type": "text/html; charset=utf-8", ...CORS_HEADERS }
-              });
-            }
-            return new Response(`SPA not found at ${spaPath} (content: ${spaContent.length} bytes)`, {
-              headers: { "Content-Type": "text/plain", ...CORS_HEADERS }
-            });
-          } catch (e) {
-            return new Response(`SPA error: ${e}`, {
-              headers: { "Content-Type": "text/plain", ...CORS_HEADERS }
-            });
+            return htmlResponse(getSpaHtml());
+          } catch (err) {
+            return jsonResponse({
+              error: "Dashboard bundle is broken",
+              detail: errorMessage(err)
+            }, 500);
           }
-          return new Response("Nexus Dashboard API", {
-            headers: {
-              "Content-Type": "text/plain",
-              ...CORS_HEADERS
-            }
-          });
         },
         websocket: {
           open(ws) {
-            self.clients.add(ws);
-            ws.send(JSON.stringify({
-              type: "orchestrator:state",
-              data: self.orchestrator.getState(),
-              timestamp: new Date().toISOString()
-            }));
+            const broadcaster = self.orchestrator.broadcaster;
+            broadcaster?.addClient(ws);
+            if (!broadcaster)
+              ws.send(stateMessage(self.orchestrator));
           },
           message(ws, message) {
             try {
@@ -8991,33 +12614,22 @@ class DashboardModule {
                   type: "pong",
                   timestamp: new Date().toISOString()
                 }));
+              } else if (msg.type === "getState") {
+                ws.send(stateMessage(self.orchestrator));
               }
             } catch {}
           },
           close(ws) {
-            self.clients.delete(ws);
+            self.orchestrator.broadcaster?.removeClient(ws);
           }
         }
       });
       console.log(`[nexus] Dashboard server running at http://${host}:${port}`);
     } catch (err) {
       this.server = null;
-      console.error(`[nexus] Failed to start dashboard on ${host}:${port}: ${err.message}`);
-      throw new Error(`Dashboard failed to start on port ${port}: ${err.message}`);
-    }
-  }
-  broadcast(event, data) {
-    const message = JSON.stringify({
-      type: event,
-      data,
-      timestamp: new Date().toISOString()
-    });
-    for (const client of this.clients) {
-      try {
-        client.send(message);
-      } catch {
-        this.clients.delete(client);
-      }
+      const detail = errorMessage(err);
+      console.error(`[nexus] Failed to start dashboard on ${host}:${port}: ${detail}`);
+      throw new Error(`Dashboard failed to start on port ${port}: ${detail}`);
     }
   }
   stop() {
@@ -9025,10 +12637,9 @@ class DashboardModule {
       this.server.stop();
       this.server = null;
     }
-    this.clients.clear();
   }
   getClientCount() {
-    return this.clients.size;
+    return this.orchestrator.broadcaster?.getClientCount() ?? 0;
   }
   isRunning() {
     return this.server !== null;
@@ -9069,9 +12680,9 @@ function detectCycles(nodes) {
 
 // src/message-store.ts
 import { appendFileSync, readFileSync as readFileSync2, existsSync, mkdirSync as mkdirSync2 } from "node:fs";
-import { join as join3, dirname as dirname2 } from "node:path";
+import { join as join2, dirname as dirname2 } from "node:path";
 var DEFAULT_CONFIG2 = {
-  storagePath: join3(process.env.HOME || "~", ".local", "share", "opencode-nexus", "messages.jsonl"),
+  storagePath: join2(process.env.HOME || "~", ".local", "share", "opencode-nexus", "messages.jsonl"),
   maxMessages: 1e4,
   rotationSize: 1000
 };
@@ -9159,10 +12770,10 @@ class MessageStore {
 
 // src/memory-store.ts
 import { Database } from "bun:sqlite";
-import { join as join4, dirname as dirname3 } from "node:path";
+import { join as join3, dirname as dirname3 } from "node:path";
 import { mkdirSync as mkdirSync3 } from "node:fs";
 var DEFAULT_CONFIG3 = {
-  dbPath: join4(process.env.HOME || "~", ".local", "share", "opencode-nexus", "memory.db"),
+  dbPath: join3(process.env.HOME || "~", ".local", "share", "opencode-nexus", "memory.db"),
   defaultTTL: 0,
   maxEntries: 1e4
 };
@@ -10118,7 +13729,7 @@ class CostForecaster {
 // src/worktree.ts
 import { execSync } from "node:child_process";
 import { existsSync as existsSync2 } from "node:fs";
-import { join as join5 } from "node:path";
+import { join as join4 } from "node:path";
 
 class WorktreeManager {
   worktrees = new Map;
@@ -10126,11 +13737,11 @@ class WorktreeManager {
   repoRoot;
   constructor(repoRoot, baseDir) {
     this.repoRoot = repoRoot;
-    this.baseDir = baseDir || join5(repoRoot, ".worktrees", "nexus-agents");
+    this.baseDir = baseDir || join4(repoRoot, ".worktrees", "nexus-agents");
   }
   create(agentId) {
     const branch = `nexus-agent-${agentId}`;
-    const path = join5(this.baseDir, agentId);
+    const path = join4(this.baseDir, agentId);
     try {
       if (!existsSync2(this.baseDir)) {
         execSync(`mkdir -p "${this.baseDir}"`, { cwd: this.repoRoot });
@@ -10300,6 +13911,7 @@ class TaskTimeoutError extends Error {
   }
 }
 var DELTA_READ_BACKOFF_MS = [1000, 2000, 4000];
+var MAX_UNCOLLECTED_SESSIONS = 200;
 function assistantMessageText(message) {
   if (message.type !== "assistant")
     return "";
@@ -10324,6 +13936,20 @@ function sumBy(records, select) {
 function baseInputRate(cost) {
   return selectTier(cost.tiers, 0).rates.input;
 }
+function sessionStateOfAgent(status) {
+  switch (status) {
+    case "spawning":
+    case "working":
+      return "running";
+    case "idle":
+    case "blocked":
+      return "idle";
+    case "completed":
+    case "failed":
+    case "terminated":
+      return "settled";
+  }
+}
 var DEFAULT_ESCALATION = {
   maxRetries: 3,
   retryDelay: 1000,
@@ -10366,7 +13992,7 @@ class NexusOrchestrator {
   forecaster;
   worktreeManager = null;
   todoEnforcer = new TodoEnforcer;
-  onStateChange = null;
+  stateChangeListener = null;
   stateChangeTimer = null;
   costHistory = [];
   tokensByModel = new Map;
@@ -10374,6 +14000,12 @@ class NexusOrchestrator {
   cleanupInterval = null;
   deltaLedgers = new Map;
   uncollected = new Map;
+  uncollectedEvicted = {
+    sessions: 0,
+    lastKnownTokens: 0,
+    observedUncollected: 0,
+    cap: MAX_UNCOLLECTED_SESSIONS
+  };
   deltaTimers = new Set;
   shuttingDown = false;
   deltaReadBackoffMs = DELTA_READ_BACKOFF_MS;
@@ -10386,7 +14018,7 @@ class NexusOrchestrator {
   constructor(config, messageStoreConfig, memoryStoreConfig) {
     this.config = this.mergeConfig(config);
     this.budget = this.config.budget;
-    this.configManager = new NexusConfigManager;
+    this.configManager = new NexusConfigManager(this.config.dashboard);
     this.moduleRegistry = new ModuleRegistry;
     this.messageStore = new MessageStore(messageStoreConfig);
     this.memoryStore = new PersistentMemoryStore(memoryStoreConfig);
@@ -10407,7 +14039,7 @@ class NexusOrchestrator {
   }
   async initialize(ctx, onStateChange) {
     this.ctx = ctx;
-    this.onStateChange = onStateChange ?? null;
+    this.stateChangeListener = onStateChange ?? null;
     const projectDir = ctx.location.directory;
     this.configManager.loadFromPath(projectDir);
     await this.loadModelCosts();
@@ -10425,6 +14057,7 @@ class NexusOrchestrator {
       }
     };
     await this.moduleRegistry.setupAll(moduleCtx);
+    this.initBroadcaster();
   }
   async loadModelCosts() {
     try {
@@ -10475,22 +14108,19 @@ class NexusOrchestrator {
     }
   }
   initBroadcaster(opts) {
+    this.broadcaster?.destroy();
     this.broadcaster = new StateBroadcaster(this, opts);
-    const previousOnStateChange = this.onStateChange;
-    this.onStateChange = () => {
-      previousOnStateChange?.();
-      this.broadcaster?.broadcastState();
-    };
   }
   startDashboard(port, host) {
-    const dashPort = port || this.config.dashboard.port;
-    const dashHost = host || this.config.dashboard.host;
-    this.dashboard = new DashboardModule(this);
-    this.dashboard.start(dashPort, dashHost);
-    this.on("agent:spawned", (agent) => this.dashboard?.broadcast("agent:spawned", agent));
-    this.on("agent:terminated", (agent) => this.dashboard?.broadcast("agent:terminated", agent));
-    this.on("budget:alert", (data) => this.dashboard?.broadcast("budget:alert", data));
-    this.on("budget:exceeded", (data) => this.dashboard?.broadcast("budget:exceeded", data));
+    const dashboardConfig = this.configManager.getConfig().dashboard;
+    if (!dashboardConfig.enabled) {
+      throw new Error("Dashboard is disabled by configuration (`dashboard.enabled: false` in .opencode/nexus.jsonc or " + "~/.config/opencode/nexus.jsonc). Set it to true — or remove the block, which defaults to enabled — " + "to start the server.");
+    }
+    const dashPort = port || dashboardConfig.port;
+    const dashHost = host || dashboardConfig.host;
+    const dashboard = new DashboardModule(this);
+    dashboard.start(dashPort, dashHost);
+    this.dashboard = dashboard;
   }
   stopDashboard() {
     if (this.dashboard) {
@@ -10512,6 +14142,9 @@ class NexusOrchestrator {
       spawnedAt: a.spawnedAt.toISOString(),
       tasksCompleted: a.metrics.tasksCompleted,
       tasksFailed: a.metrics.tasksFailed,
+      totalTokens: a.metrics.totalTokens,
+      averageResponseTime: a.metrics.averageResponseTime,
+      errorRate: a.metrics.errorRate,
       totalCost: a.metrics.totalCost
     }));
     const tasks = Array.from(this.tasks.values()).map((t) => ({
@@ -10520,7 +14153,10 @@ class NexusOrchestrator {
       role: t.requiredRole,
       priority: t.priority || "normal",
       status: t.status,
+      dependencies: t.dependencies,
       assignedAgent: t.assignedAgent,
+      cost: t.result?.cost,
+      tokensUsed: t.result?.tokensUsed,
       result: t.result ? {
         success: t.result.success,
         output: t.result.output?.slice(0, 500),
@@ -10533,11 +14169,89 @@ class NexusOrchestrator {
       paused: this.paused,
       agents,
       tasks,
+      config: {
+        models: this.configManager.getResolvedModels(),
+        budget: this.budget,
+        selfHealing: this.config.selfHealing
+      },
+      sessions: this.sessionViews(),
       totalSpent: this.totalSpent,
       budgetRemaining: this.budget.maxTotalCost - this.totalSpent,
       lastUpdated: new Date().toISOString()
     };
   }
+  sessionViews() {
+    const views = new Map;
+    for (const agent of this.agents.values()) {
+      if (!agent.sessionID)
+        continue;
+      views.set(agent.sessionID, {
+        id: agent.sessionID,
+        owned: true,
+        agentId: agent.id,
+        taskId: this.taskIdForAgent(agent.id),
+        role: agent.role,
+        model: `${agent.model.provider}/${agent.model.model}`,
+        state: sessionStateOfAgent(agent.status),
+        spawnedAt: agent.spawnedAt.toISOString(),
+        lastKnownTokens: agent.metrics.totalTokens,
+        observedUncollected: 0
+      });
+    }
+    for (const ledger of this.deltaLedgers.values()) {
+      this.applyCollectionRecord(views, {
+        sessionID: ledger.sessionID,
+        taskId: ledger.taskId,
+        agentId: ledger.agentId,
+        model: ledger.model,
+        state: "running",
+        lastKnownTokens: totalTokens(ledger.charged),
+        observedUncollected: 0
+      });
+    }
+    for (const spend of this.uncollected.values()) {
+      this.applyCollectionRecord(views, {
+        sessionID: spend.sessionID,
+        taskId: spend.taskId,
+        model: spend.model,
+        state: "abandoned",
+        lastKnownTokens: spend.lastKnownTokens,
+        observedUncollected: spend.observedUncollected
+      });
+    }
+    return [...views.values()];
+  }
+  applyCollectionRecord(views, record) {
+    const existing = views.get(record.sessionID);
+    if (existing) {
+      existing.taskId = existing.taskId ?? record.taskId;
+      existing.model = existing.model ?? record.model;
+      existing.state = record.state;
+      existing.lastKnownTokens = record.lastKnownTokens;
+      existing.observedUncollected = record.observedUncollected;
+      return;
+    }
+    const owner = record.agentId !== undefined ? this.agents.get(record.agentId) : undefined;
+    views.set(record.sessionID, {
+      id: record.sessionID,
+      owned: owner !== undefined,
+      agentId: owner?.id ?? null,
+      taskId: record.taskId,
+      role: owner?.role ?? null,
+      model: record.model,
+      state: record.state,
+      spawnedAt: owner ? owner.spawnedAt.toISOString() : null,
+      lastKnownTokens: record.lastKnownTokens,
+      observedUncollected: record.observedUncollected
+    });
+  }
+  taskIdForAgent(agentId) {
+    for (const task of this.tasks.values()) {
+      if (task.assignedAgent === agentId)
+        return task.id;
+    }
+    return null;
+  }
   mergeConfig(partial) {
     const defaults = {
       maxConcurrency: 5,
@@ -10613,9 +14327,13 @@ class NexusOrchestrator {
       return;
     this.stateChangeTimer = setTimeout(() => {
       this.stateChangeTimer = null;
-      this.onStateChange?.();
+      this.notifyStateListeners();
     }, 100);
   }
+  notifyStateListeners() {
+    this.stateChangeListener?.();
+    this.broadcaster?.broadcastState();
+  }
   reloadConfigFromDisk(trigger = "event") {
     const projectDir = this.ctx?.location.directory;
     if (projectDir) {
@@ -10849,6 +14567,8 @@ Errors encountered: ${transferContext.errorLog.join(", ") || "None"}`;
 
 Please continue from where the previous agent left off.`;
       }
+      agent.status = "working";
+      this.notifyStateChange();
       await this.ctx.session.prompt({
         sessionID: agent.sessionID,
         text: taskPrompt
@@ -11156,6 +14876,7 @@ Please continue from where the previous agent left off.`;
       }
     };
     const observedUncollected = totalTokens(observedIncrement) > 0 ? priceUsageAtSettledTier(observedIncrement, pricing, known).total : 0;
+    this.uncollected.delete(ledger.sessionID);
     this.uncollected.set(ledger.sessionID, {
       sessionID: ledger.sessionID,
       taskId: ledger.taskId,
@@ -11164,6 +14885,7 @@ Please continue from where the previous agent left off.`;
       lastKnownTokens: totalTokens(known),
       observedUncollected
     });
+    this.trimUncollected();
     this.emit("cost:delta", {
       taskId: ledger.taskId,
       nodeId: ledger.taskId,
@@ -11801,13 +15523,36 @@ Please continue from where the previous agent left off.`;
       uncollected: this.uncollectedSummary()
     }, null, 2);
   }
+  trimUncollected() {
+    while (this.uncollected.size > MAX_UNCOLLECTED_SESSIONS) {
+      const oldest = this.uncollected.keys().next();
+      if (oldest.done)
+        return;
+      const dropped = this.uncollected.get(oldest.value);
+      if (dropped) {
+        this.uncollectedEvicted.sessions += 1;
+        this.uncollectedEvicted.lastKnownTokens += dropped.lastKnownTokens;
+        this.uncollectedEvicted.observedUncollected += dropped.observedUncollected;
+      }
+      this.uncollected.delete(oldest.value);
+    }
+  }
   uncollectedSummary() {
     const all = [...this.uncollected.values()];
     return {
       sessions: all.length,
       lastKnownTokens: all.reduce((sum, u) => sum + u.lastKnownTokens, 0),
       observedUncollected: all.reduce((sum, u) => sum + u.observedUncollected, 0),
-      taskIds: all.map((u) => u.taskId)
+      taskIds: all.map((u) => u.taskId),
+      entries: all.map((u) => ({
+        sessionID: u.sessionID,
+        taskId: u.taskId,
+        agentId: u.agentId,
+        model: u.model,
+        lastKnownTokens: u.lastKnownTokens,
+        observedUncollected: u.observedUncollected
+      })),
+      evicted: { ...this.uncollectedEvicted }
     };
   }
   pause() {
@@ -11847,7 +15592,9 @@ Please continue from where the previous agent left off.`;
     this.agents.clear();
     this.running = false;
     this.emit("orchestrator:shutdown", {});
-    this.onStateChange?.();
+    this.stateChangeListener?.();
+    this.broadcaster?.destroy();
+    this.broadcaster = null;
   }
   cleanupStaleData() {
     const now = Date.now();
@@ -11903,7 +15650,13 @@ Please continue from where the previous agent left off.`;
   }
   emit(event, data) {
     const handlers = this.eventHandlers.get(event) || [];
-    handlers.forEach((handler) => handler(data));
+    handlers.forEach((handler) => {
+      try {
+        handler(data);
+      } catch (error) {
+        console.error(`[nexus] event handler for "${event}" threw; other listeners were still notified:`, error);
+      }
+    });
   }
   handleCommand(text) {
     const parts = text.split(" ");
@@ -12207,7 +15960,7 @@ class AstGrep {
 // src/index.ts
 import { writeFileSync as writeFileSync2, readFileSync as readFileSync3, mkdirSync as mkdirSync4, existsSync as existsSync3, statSync } from "node:fs";
 import { createHash } from "node:crypto";
-import { join as join6, resolve as resolve3, basename, dirname as dirname4 } from "node:path";
+import { join as join5, resolve as resolve3, basename, dirname as dirname4 } from "node:path";
 import { homedir as homedir2 } from "node:os";
 function renderCost(cost, provenance) {
   return provenance.usage === "measured" ? `$${cost.toFixed(4)} measured` : `$${cost.toFixed(4)} estimated`;
@@ -12346,8 +16099,29 @@ function watchConfigFiles(ctx, orchestrator, debounceMs = CONFIG_RELOAD_DEBOUNCE
     controller.abort();
   };
 }
-var NEXUS_AGENT_CONTENT = `---
-description: Nexus multi-agent orchestrator — decomposes tasks and delegates to specialized sub-agents
+var DASHBOARD_START_DESCRIPTION = "Start the Nexus web dashboard: an HTTP + WebSocket server that serves the dashboard page and the " + "orchestrator's live state, agents, tasks, sessions, costs and config. It is NOT started for you — " + "nothing in nexus listens until this tool is called, and it serves nothing but the dashboard. " + "The port must be FREE: the bind fails if another process holds it, and this tool reports that " + "failure rather than replacing the other listener. Host defaults to 127.0.0.1 and port to 4747, " + "or to the `dashboard` block in nexus.jsonc. If that block sets `enabled: false` the start is " + "refused and the refusal names the config key. On success the URL is printed — give the user that " + "exact URL; it is the only address the page is served on.";
+var DASHBOARD_STOP_DESCRIPTION = "Stop the Nexus web dashboard started by `dashboard.start`, closing its HTTP and WebSocket " + "connections. Takes no arguments. A no-op if no dashboard is running — it says so rather than " + "reporting a stop that did not happen. Note that this only stops the dashboard server: the " + "orchestrator, its agents and its sessions are unaffected and keep running.";
+function runDashboardStart(orchestrator, port, host) {
+  try {
+    orchestrator.startDashboard(port, host);
+  } catch (error) {
+    const detail = error instanceof Error ? error.message : String(error);
+    return `Dashboard NOT started: ${detail}
+` + `No server is listening and no browser was opened. ` + `If the port is in use, either stop whatever holds it or pass a different \`port\`. ` + `Call this tool again once the port is free — the dashboard does not retry on its own.`;
+  }
+  const dashboardConfig = orchestrator.configManager.getConfig().dashboard;
+  const boundHost = host || dashboardConfig.host;
+  const boundPort = port || dashboardConfig.port;
+  return `Dashboard started at http://${boundHost}:${boundPort}
+` + `Open that exact URL in a browser. The page connects to the same host and port for its live ` + `state over WebSocket (ws://${boundHost}:${boundPort}/ws/events), so it works only while this ` + `server runs. The TUI's \`/nexus-web\` command opens the browser once this tool has succeeded.
+` + `Call \`nexus.dashboard.stop\` to shut it down.`;
+}
+function runDashboardStop(orchestrator) {
+  const wasRunning = orchestrator.dashboard?.isRunning() ?? false;
+  orchestrator.stopDashboard();
+  return wasRunning ? "Dashboard stopped. The orchestrator, its agents and its sessions were not affected." : "No dashboard was running, so nothing was stopped. The orchestrator, its agents and its " + "sessions were not affected.";
+}
+var NEXUS_AGENT_CONTENT = `---description: Nexus multi-agent orchestrator — decomposes tasks and delegates to specialized sub-agents
 mode: primary
 permissions:
   - action: subagent
@@ -12536,9 +16310,9 @@ var src_default = define({
   id: "nexus",
   async setup(ctx) {
     try {
-      const agentDir = join6(homedir2(), ".config", "opencode", "agents");
+      const agentDir = join5(homedir2(), ".config", "opencode", "agents");
       mkdirSync4(agentDir, { recursive: true });
-      const orchestratorFile = join6(agentDir, "nexus-orchestrator.md");
+      const orchestratorFile = join5(agentDir, "nexus-orchestrator.md");
       writeFileSync2(orchestratorFile, NEXUS_AGENT_CONTENT, "utf-8");
       const subagents = {
         "nexus-architect.md": `---
@@ -12827,12 +16601,12 @@ You are a technical writer who creates documentation that developers actually wa
 - Changelog follows semantic versioning with clear descriptions`
       };
       for (const [filename, content] of Object.entries(subagents)) {
-        const filepath = join6(agentDir, filename);
+        const filepath = join5(agentDir, filename);
         writeFileSync2(filepath, content, "utf-8");
       }
     } catch {}
     try {
-      const configPath = join6(homedir2(), ".config", "opencode", "opencode.jsonc");
+      const configPath = join5(homedir2(), ".config", "opencode", "opencode.jsonc");
       if (existsSync3(configPath)) {
         const configContent = readFileSync3(configPath, "utf-8");
         if (!configContent.includes('"lsp"')) {
@@ -13050,25 +16824,24 @@ You are a technical writer who creates documentation that developers actually wa
       });
       editor.add({
         name: "dashboard.start",
-        description: "Start the web dashboard server",
+        description: DASHBOARD_START_DESCRIPTION,
         input: {
           type: "object",
           properties: {
-            port: { type: "number", description: "Port (default: 4747)" },
-            host: { type: "string", description: "Host (default: 127.0.0.1)" }
+            port: { type: "number", description: "Port to listen on (default: 4747, or `dashboard.port` from nexus.jsonc). Must be free." },
+            host: { type: "string", description: "Bind address (default: 127.0.0.1, or `dashboard.host` from nexus.jsonc)" }
           },
           additionalProperties: false
         },
         options: { codemode: true },
         execute: async (input) => {
           const { port, host } = input;
-          orchestrator.startDashboard(port, host);
-          return { content: `Dashboard started at http://${host || "127.0.0.1"}:${port || 4747}` };
+          return { content: runDashboardStart(orchestrator, port, host) };
         }
       });
       editor.add({
         name: "dashboard.stop",
-        description: "Stop the web dashboard server",
+        description: DASHBOARD_STOP_DESCRIPTION,
         input: {
           type: "object",
           properties: {},
@@ -13076,8 +16849,7 @@ You are a technical writer who creates documentation that developers actually wa
         },
         options: { codemode: true },
         execute: async () => {
-          orchestrator.stopDashboard();
-          return { content: "Dashboard stopped" };
+          return { content: runDashboardStop(orchestrator) };
         }
       });
       editor.add({
@@ -14033,6 +17805,8 @@ export {
   CONFIG_RELOAD_DEBOUNCE_MS,
   CostForecaster,
   CustomRoleManager,
+  DASHBOARD_START_DESCRIPTION,
+  DASHBOARD_STOP_DESCRIPTION,
   DEFAULT_CONFIG,
   GoalManager,
   HealthMonitor,
@@ -14057,5 +17831,7 @@ export {
   getTemplate,
   instantiateTemplate,
   listTemplates,
+  runDashboardStart,
+  runDashboardStop,
   watchConfigFiles
 };