@sebastianandreasson/pi-autonomous-agents 0.9.0 → 0.10.0

package/src/pi-visualizer-server.mjs

@@ -3,7 +3,8 @@ import http from 'node:http'
 import path from 'node:path'
 import process from 'node:process'
 import { execFileSync } from 'node:child_process'
-import { readTelemetry } from './pi-telemetry.mjs'
+import { fileURLToPath } from 'node:url'
+import { readJsonlTail, readTelemetryTail } from './pi-telemetry.mjs'
 import { readJsonFile } from './pi-repo.mjs'
 import { deriveFlowSnapshot, deriveStageGraph, formatActiveLabel } from './pi-visualizer-shared.mjs'
 
@@ -16,6 +17,51 @@ export function readVisualizerPort() {
   return Number.isFinite(raw) && raw > 0 ? raw : 4317
 }
 
+const visualizerSourceDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', 'visualizer-ui')
+const visualizerDistDir = path.join(visualizerSourceDir, 'dist')
+
+function getContentType(filePath) {
+  const ext = path.extname(filePath).toLowerCase()
+  if (ext === '.html') return 'text/html; charset=utf-8'
+  if (ext === '.js') return 'text/javascript; charset=utf-8'
+  if (ext === '.css') return 'text/css; charset=utf-8'
+  if (ext === '.json') return 'application/json; charset=utf-8'
+  if (ext === '.svg') return 'image/svg+xml'
+  if (ext === '.png') return 'image/png'
+  if (ext === '.ico') return 'image/x-icon'
+  return 'application/octet-stream'
+}
+
+async function fileExists(filePath) {
+  try {
+    await fs.access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function serveBuiltVisualizerAsset(reqPath, res) {
+  const normalized = reqPath === '/' ? '/index.html' : reqPath
+  const cleanPath = normalized.split('?')[0]
+  const relativePath = cleanPath.startsWith('/') ? cleanPath.slice(1) : cleanPath
+  const targetFile = path.resolve(visualizerDistDir, relativePath)
+  if (!targetFile.startsWith(visualizerDistDir)) {
+    return false
+  }
+  if (!await fileExists(targetFile)) {
+    return false
+  }
+
+  const body = await fs.readFile(targetFile)
+  res.writeHead(200, {
+    'content-type': getContentType(targetFile),
+    'cache-control': cleanPath.startsWith('/assets/') ? 'public, max-age=31536000, immutable' : 'no-store',
+  })
+  res.end(body)
+  return true
+}
+
 async function readOptionalText(filePath, maxLength = 6000) {
   try {
     const raw = await fs.readFile(filePath, 'utf8')
@@ -29,20 +75,6 @@ async function readOptionalText(filePath, maxLength = 6000) {
   }
 }
 
-async function readJsonlTail(filePath, maxItems = 200) {
-  try {
-    const raw = await fs.readFile(filePath, 'utf8')
-    return raw
-      .split('\n')
-      .map((line) => line.trim())
-      .filter(Boolean)
-      .slice(-maxItems)
-      .map((line) => JSON.parse(line))
-  } catch {
-    return []
-  }
-}
-
 const MAX_DIFF_FILES = 10
 const MAX_DIFF_CHARS_PER_FILE = 12000
 const MAX_DIFF_TOTAL_CHARS = 40000
@@ -78,51 +110,27 @@ async function parseTodos(taskFile, activeTaskText = '') {
         if (level === 2) {
           currentPhase = text
         }
-        items.push({
-          id: `line-${index + 1}`,
-          kind: 'heading',
-          lineNumber: index + 1,
-          level,
-          text,
-          phase: currentPhase || text,
-          raw: line,
-          checked: false,
-          active: false,
-        })
         continue
       }
 
       const checkboxMatch = /^\s*[-*]\s+\[( |x)\]\s+(.+)$/.exec(line)
-      if (checkboxMatch) {
-        const checked = checkboxMatch[1].toLowerCase() === 'x'
-        const text = checkboxMatch[2].trim()
-        items.push({
-          id: `line-${index + 1}`,
-          kind: 'task',
-          lineNumber: index + 1,
-          level: 0,
-          text,
-          phase: currentPhase,
-          raw: line,
-          checked,
-          active: text === activeTaskText,
-        })
+      if (!checkboxMatch) {
         continue
       }
 
-      if (line.trim() !== '') {
-        items.push({
-          id: `line-${index + 1}`,
-          kind: 'line',
-          lineNumber: index + 1,
-          level: 0,
-          text: line.trim(),
-          phase: currentPhase,
-          raw: line,
-          checked: false,
-          active: false,
-        })
-      }
+      const checked = checkboxMatch[1].toLowerCase() === 'x'
+      const text = checkboxMatch[2].trim()
+      items.push({
+        id: `line-${index + 1}`,
+        kind: 'task',
+        lineNumber: index + 1,
+        level: 0,
+        text,
+        phase: currentPhase,
+        raw: line,
+        checked,
+        active: text === activeTaskText,
+      })
     }
 
     return items
@@ -261,9 +269,9 @@ export async function buildSnapshot(config, queryRunId = '') {
   const [state, summary, telemetry, currentOutput, liveFeed] = await Promise.all([
     readJsonFile(selectedConfig.stateFile, null),
     readJsonFile(selectedConfig.lastIterationSummaryFile, null),
-    readTelemetry(selectedConfig),
+    readTelemetryTail(selectedConfig, 160, 512 * 1024),
     readOptionalText(selectedConfig.lastAgentOutputFile, 5000),
-    readJsonlTail(selectedConfig.liveFeedFile, 300),
+    readJsonlTail(selectedConfig.liveFeedFile, { maxItems: 300, maxBytes: 768 * 1024 }),
   ])
 
   const recentTelemetry = telemetry.slice(-160).map((event, index) => ({
@@ -325,484 +333,69 @@ export function renderHtml() {
   <title>PI Harness Visualizer</title>
   <style>
     :root {
+      color-scheme: dark;
       --bg: #0b1020;
       --panel: #121a30;
-      --panel2: #17213d;
+      --line: #263252;
       --text: #e6edf7;
       --muted: #95a3bf;
-      --line: #263252;
-      --active: #6ee7ff;
-      --done: #53d18d;
-      --error: #ff6b81;
-      --skip: #f0b35a;
-      --pending: #4b5675;
+      --accent: #6ee7ff;
     }
     * { box-sizing: border-box; }
     body {
-      margin: 0; font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: linear-gradient(180deg, #08101d, #0b1020 180px); color: var(--text);
+      margin: 0;
+      font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: linear-gradient(180deg, #08101d, var(--bg) 180px);
+      color: var(--text);
     }
-    .wrap { max-width: 1400px; margin: 0 auto; padding: 20px; }
-    .header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
-    .title { font-size: 28px; font-weight: 700; }
-    .subtitle { color: var(--muted); margin-top: 4px; }
-    .toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
-    .badge, select {
-      display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
-      border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text);
-      font: inherit;
+    main {
+      max-width: 880px;
+      margin: 48px auto;
+      padding: 0 20px;
     }
-    select { min-width: 260px; }
-    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pending); }
-    .dot.active { background: var(--active); box-shadow: 0 0 18px rgba(110,231,255,.6); }
-    .grid { display: grid; gap: 16px; }
-    .grid.main { grid-template-columns: minmax(320px, 420px) 1fr; align-items: start; }
-    .detail-split { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
     .card {
       background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
-      border: 1px solid var(--line); border-radius: 16px; padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      padding: 20px;
       box-shadow: 0 12px 40px rgba(0,0,0,.18);
     }
-    .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
-    .value { margin-top: 8px; font-size: 22px; font-weight: 700; }
-    .value.small { font-size: 16px; }
-    .todo-list { max-height: calc(100vh - 140px); overflow: auto; padding-right: 4px; }
-    .todo-item { border:1px solid var(--line); border-radius:14px; background: var(--panel); margin-bottom:10px; overflow:hidden; }
-    .todo-item.active { border-color: var(--active); box-shadow: 0 0 0 1px rgba(110,231,255,.25) inset; }
-    .todo-summary { list-style:none; cursor:pointer; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; }
-    .todo-summary::-webkit-details-marker { display:none; }
-    .todo-line { color: var(--muted); font-size: 11px; min-width: 52px; }
-    .todo-text { flex:1; }
-    .todo-heading { font-weight:700; }
-    .todo-task { font-weight:600; }
-    .todo-checked { color: var(--done); }
-    .todo-open-body { padding: 0 14px 14px 14px; color: var(--muted); font-size: 12px; }
-    .flow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
-    .step, .graph-node {
-      border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--panel);
-      min-height: 96px; position: relative; overflow: hidden;
-    }
-    .step::before, .graph-node::before {
-      content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pending);
-    }
-    .step.active::before, .graph-node.active::before { background: var(--active); }
-    .step.done::before, .graph-node.done::before { background: var(--done); }
-    .step.error::before, .graph-node.error::before { background: var(--error); }
-    .step.skipped::before, .graph-node.skipped::before { background: var(--skip); }
-    .step-name { font-weight: 700; margin-bottom: 6px; }
-    .step-status { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
-    .step-meta { margin-top: 8px; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
-    .graph { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-top:12px; }
-    .graph-node { min-height: 120px; width: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
-    .graph-arrow { color: var(--muted); text-align: center; align-self: center; }
-    .state-bar { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
-    .state-chip { border:1px solid var(--line); border-radius:999px; padding:6px 10px; color: var(--muted); background: rgba(255,255,255,.03); }
-    .kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; margin-top: 12px; }
-    .feed-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; margin-bottom:10px; }
-    .feed-toggle { display:flex; gap:6px; align-items:center; color: var(--muted); font-size: 12px; }
-    .feed { background: #0a1325; border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-    .feed-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
-    .feed-item:last-child { border-bottom: 0; }
-    .feed-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
-    .feed-type { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
-    .feed-type.agent_start, .feed-type.agent_end { color: var(--active); }
-    .feed-type.thinking_delta { color: #b392f0; }
-    .feed-type.text_delta { color: var(--done); }
-    .feed-type.tool_start, .feed-type.tool_update, .feed-type.tool_end { color: var(--skip); }
-    .feed-meta { color: var(--muted); font-size: 12px; }
-    .feed-text { white-space: pre-wrap; word-break: break-word; margin-top: 6px; }
-    .feed-count { color: var(--muted); font-size: 11px; }
-    .pinned-tool { background:#0a1325; border: 1px solid var(--line); border-radius:12px; padding:12px; }
-    .pinned-tool-name { font-weight:700; }
-    .pinned-tool-meta { color: var(--muted); font-size:12px; margin-top:4px; }
-    .pinned-tool-text { white-space: pre-wrap; word-break: break-word; margin-top:8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-    .kv div:nth-child(odd) { color: var(--muted); }
-    pre {
-      margin: 0; white-space: pre-wrap; word-break: break-word; background: #0a1325;
-      border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 320px; overflow: auto;
+    h1 { margin: 0 0 8px; font-size: 28px; }
+    p { margin: 0 0 12px; color: var(--muted); }
+    code, pre {
+      font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: #0a1325;
+      border: 1px solid var(--line);
+      border-radius: 12px;
     }
-    table { width: 100%; border-collapse: collapse; }
-    th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
-    th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
-    td { font-size: 13px; }
-    .status-pill {
-      display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700;
-      border: 1px solid var(--line); background: var(--panel2);
-    }
-    .status-pill.done { color: var(--done); }
-    .status-pill.error { color: var(--error); }
-    .status-pill.skipped { color: var(--skip); }
-    .status-pill.active { color: var(--active); }
-    .edit-list { max-height: 360px; overflow:auto; }
-    .edit-item { border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; }
-    .edit-head { padding:10px 12px; background: rgba(255,255,255,.03); font-weight:600; }
-    .muted { color: var(--muted); }
-    details.bottom { margin-top: 16px; }
-    details.bottom summary { cursor:pointer; color: var(--muted); margin-bottom:10px; }
-    @media (max-width: 1100px) { .grid.main, .detail-split, .flow { grid-template-columns: 1fr; } .todo-list { max-height:none; } }
+    code { padding: 2px 6px; }
+    pre { padding: 14px; overflow: auto; }
+    .accent { color: var(--accent); }
+    .stack { display: grid; gap: 16px; }
   </style>
 </head>
 <body>
-  <div class="wrap">
-    <div class="header">
+  <main>
+    <div class="card stack">
       <div>
-        <div class="title">PI Harness Visualizer</div>
-        <div class="subtitle" id="cwd"></div>
+        <h1>PI Harness Visualizer</h1>
+        <p>Built React UI missing. Server now expects assets from <code>visualizer-ui/dist/</code>.</p>
       </div>
-      <div class="toolbar">
-        <select id="run-select"></select>
-        <div class="badge"><span class="dot active"></span><span id="last-refresh">Loading...</span></div>
+      <div>
+        <p class="accent">Build frontend:</p>
+        <pre>npm --prefix visualizer-ui install
+npm run build:visualizer:ui</pre>
       </div>
-    </div>
-
-    <div class="grid main">
-      <div class="card">
-        <div class="label">TODOS</div>
-        <div class="todo-list" id="todo-list"></div>
+      <div>
+        <p class="accent">Local dev loop:</p>
+        <pre>npm run debug:live-ui
+npm run dev:visualizer:ui</pre>
       </div>
-
       <div>
-        <div class="card">
-          <div class="label">Focused todo</div>
-          <div class="value small" id="todo-focus-title">—</div>
-          <div class="state-bar" id="todo-state-bar"></div>
-          <div class="flow" id="flow"></div>
-          <div class="detail-split">
-            <div class="card" style="margin:0;">
-              <div class="label">Live worker feed</div>
-              <div class="feed-toolbar">
-                <label class="feed-toggle"><input type="checkbox" id="feed-show-thinking" checked /> <span>Show thinking</span></label>
-                <label class="feed-toggle"><input type="checkbox" id="feed-collapse-deltas" checked /> <span>Collapse deltas</span></label>
-              </div>
-              <div class="feed" id="feed">No live feed yet.</div>
-            </div>
-            <div class="grid" style="gap:16px;">
-              <div class="card" style="margin:0;"><div class="label">Latest tool output</div><div class="pinned-tool" id="pinned-tool">No tool activity yet.</div></div>
-              <div class="card" style="margin:0;">
-                <div class="label">Current edits for focused todo</div>
-                <div class="edit-list" id="edit-list">No repo edits yet.</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <details class="bottom card">
-          <summary>Diagnostics</summary>
-          <div class="grid" style="gap:16px;">
-            <div class="card" style="margin:0;"><div class="label">Run state</div><div class="kv" id="run-state"></div></div>
-            <div class="card" style="margin:0;"><div class="label">Iteration stage graph</div><div class="graph" id="graph"></div></div>
-            <div class="card" style="margin:0;"><div class="label">Recent telemetry timeline</div><div style="margin-top: 12px; overflow: auto; max-height: 360px;"><table><thead><tr><th>Time</th><th>Iteration</th><th>Kind</th><th>Status</th><th>Notes</th></tr></thead><tbody id="timeline"></tbody></table></div></div>
-            <div class="card" style="margin:0;"><div class="label">Selected event</div><pre id="selected-event">Click graph node or timeline row.</pre></div>
-            <div class="card" style="margin:0;"><div class="label">Last iteration summary</div><pre id="summary">—</pre></div>
-            <div class="card" style="margin:0;"><div class="label">Last agent output</div><pre id="output">—</pre></div>
-          </div>
-        </details>
+        <p>API still live at <code>/api/state</code> and <code>/api/stream</code>.</p>
       </div>
     </div>
-  </div>
-
-  <script>
-    function esc(value) {
-      return String(value ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
-    }
-    function pillClass(status) {
-      if (status === 'done') return 'status-pill done'
-      if (status === 'error') return 'status-pill error'
-      if (status === 'skipped') return 'status-pill skipped'
-      if (status === 'active') return 'status-pill active'
-      return 'status-pill'
-    }
-    function eventStatus(status) {
-      if (status === 'success' || status === 'passed' || status === 'complete') return 'done'
-      if (status === 'skipped' || status === 'not_run' || status === 'not_needed') return 'skipped'
-      if (status === 'failed' || status === 'timed_out' || status === 'stalled' || status === 'blocked') return 'error'
-      return ''
-    }
-    function selectedRunId() {
-      return new URLSearchParams(location.search).get('runId') || ''
-    }
-    function updateRunQuery(runId) {
-      const url = new URL(location.href)
-      if (runId) url.searchParams.set('runId', runId)
-      else url.searchParams.delete('runId')
-      history.replaceState(null, '', url)
-    }
-
-    let latestSnapshot = null
-    let selectedEventId = ''
-    let selectedTodoId = ''
-    let eventSource = null
-
-    function normalizeFeedEntry(entry) {
-      return {
-        ...entry,
-        type: String(entry?.type || 'event'),
-        text: String(entry?.text || ''),
-      }
-    }
-
-    function collapseFeedEntries(entries) {
-      const collapsed = []
-      for (const raw of entries) {
-        const entry = normalizeFeedEntry(raw)
-        const prev = collapsed[collapsed.length - 1]
-        const canMerge = prev
-          && (entry.type === 'text_delta' || entry.type === 'thinking_delta')
-          && prev.type === entry.type
-          && prev.role === entry.role
-          && prev.kind === entry.kind
-        if (canMerge) {
-          prev.text += entry.text
-          prev.count = (prev.count || 1) + 1
-          prev.timestamp = entry.timestamp
-          continue
-        }
-        collapsed.push({ ...entry, count: 1 })
-      }
-      return collapsed
-    }
-
-    function getVisibleFeedEntries(snapshot) {
-      const showThinking = document.getElementById('feed-show-thinking')?.checked !== false
-      const collapseDeltas = document.getElementById('feed-collapse-deltas')?.checked !== false
-      const source = Array.isArray(snapshot?.liveFeed) ? snapshot.liveFeed : []
-      const filtered = source.filter((entry) => showThinking || entry.type !== 'thinking_delta')
-      return collapseDeltas ? collapseFeedEntries(filtered) : filtered.map((entry) => ({ ...normalizeFeedEntry(entry), count: 1 }))
-    }
-
-    function renderPinnedTool(snapshot) {
-      const target = document.getElementById('pinned-tool')
-      const source = Array.isArray(snapshot?.liveFeed) ? [...snapshot.liveFeed].reverse() : []
-      const latest = source.find((entry) => entry.type === 'tool_update' || entry.type === 'tool_end' || entry.type === 'tool_start')
-      if (!latest) {
-        target.textContent = 'No tool activity yet.'
-        return
-      }
-      target.innerHTML = '<div class="pinned-tool-name">' + esc(latest.toolName || 'tool') + '</div>' +
-        '<div class="pinned-tool-meta">' + esc(latest.type) + ' · ' + esc(new Date(latest.timestamp).toLocaleTimeString()) + '</div>' +
-        '<div class="pinned-tool-text">' + esc(latest.text || '') + '</div>'
-    }
-
-    function findEventById(snapshot, eventId) {
-      if (!snapshot || !eventId) return null
-      return snapshot.graph?.nodes?.find((node) => node.id === eventId)?.event
-        || snapshot.recentTelemetry?.find((event) => event._vizId === eventId)
-        || null
-    }
-
-    function findSelectedTodo(snapshot) {
-      if (!snapshot) return null
-      const todos = Array.isArray(snapshot.todos) ? snapshot.todos : []
-      if (selectedTodoId) {
-        const direct = todos.find((item) => item.id === selectedTodoId)
-        if (direct) return direct
-      }
-      return todos.find((item) => item.active) || todos.find((item) => item.kind === 'task') || todos[0] || null
-    }
-
-    function renderSelectedEvent() {
-      const event = findEventById(latestSnapshot, selectedEventId)
-      document.getElementById('selected-event').textContent = event
-        ? JSON.stringify(event, null, 2)
-        : 'Click graph node or timeline row.'
-    }
-
-    function renderTodos(snapshot) {
-      const todos = Array.isArray(snapshot?.todos) ? snapshot.todos : []
-      const selected = findSelectedTodo(snapshot)
-      if (selected && !selectedTodoId) {
-        selectedTodoId = selected.id
-      }
-      const list = document.getElementById('todo-list')
-      list.innerHTML = todos.length > 0
-        ? todos.map((item) => {
-            const active = selected && item.id === selected.id
-            const textClass = item.kind === 'heading' ? 'todo-heading' : (item.kind === 'task' ? 'todo-task' : '')
-            const checkedMark = item.kind === 'task' ? (item.checked ? '✓' : '○') : (item.kind === 'heading' ? '#' : '·')
-            const checkedClass = item.checked ? 'todo-checked' : ''
-            return '<details class="todo-item ' + (active ? 'active' : '') + '" ' + (active ? 'open' : '') + ' data-todo-id="' + esc(item.id) + '">' +
-              '<summary class="todo-summary">' +
-                '<div class="todo-line">' + esc(String(item.lineNumber)) + '</div>' +
-                '<div class="' + textClass + ' ' + checkedClass + '">' + esc(checkedMark + ' ' + item.text) + '</div>' +
-              '</summary>' +
-              '<div class="todo-open-body">' + esc(item.phase || '') + '</div>' +
-            '</details>'
-          }).join('')
-        : '<div class="muted">No TODO items found.</div>'
-
-      list.querySelectorAll('[data-todo-id]').forEach((element) => {
-        element.addEventListener('toggle', () => {
-          if (element.open) {
-            selectedTodoId = element.getAttribute('data-todo-id') || ''
-            renderSnapshot(snapshot)
-          }
-        })
-      })
-    }
-
-    function renderFocusedTodo(snapshot) {
-      const todo = findSelectedTodo(snapshot)
-      document.getElementById('todo-focus-title').textContent = todo ? todo.text : 'No todo selected.'
-      const stateBar = document.getElementById('todo-state-bar')
-      const chips = [
-        ['Current activity', snapshot?.flow?.activeLabel || 'Idle'],
-        ['Iteration', snapshot?.flow?.iteration || '—'],
-        ['Phase', todo?.phase || snapshot?.summary?.phase || '—'],
-        ['Task status', todo?.kind === 'task' ? (todo.checked ? 'Done' : (todo.active ? 'Active' : 'Pending')) : 'Info'],
-      ]
-      stateBar.innerHTML = chips.map(([label, value]) => '<div class="state-chip">' + esc(label + ': ' + value) + '</div>').join('')
-    }
-
-    function renderCurrentEdits(snapshot) {
-      const edits = Array.isArray(snapshot?.currentEdits) ? snapshot.currentEdits : []
-      const target = document.getElementById('edit-list')
-      target.innerHTML = edits.length > 0
-        ? edits.map((entry) => '<details class="edit-item" open><summary class="edit-head">' + esc(entry.file) + '</summary><pre>' + esc(entry.diff || 'No diff available.') + '</pre></details>').join('')
-        : '<div class="muted">No repo edits yet.</div>'
-    }
-
-    function bindSelectableEvents() {
-      document.querySelectorAll('[data-event-id]').forEach((element) => {
-        element.addEventListener('click', () => {
-          selectedEventId = element.getAttribute('data-event-id') || ''
-          renderSelectedEvent()
-        })
-      })
-      ;['feed-show-thinking', 'feed-collapse-deltas'].forEach((id) => {
-        const input = document.getElementById(id)
-        if (input && !input.dataset.bound) {
-          input.addEventListener('change', () => {
-            if (latestSnapshot) {
-              renderSnapshot(latestSnapshot)
-            }
-          })
-          input.dataset.bound = '1'
-        }
-      })
-    }
-
-    function renderSnapshot(data) {
-      latestSnapshot = data
-      document.getElementById('cwd').textContent = data.config.cwd
-      document.getElementById('last-refresh').textContent = 'Updated ' + new Date(data.now).toLocaleTimeString()
-      if (!selectedTodoId) {
-        const activeTodo = (Array.isArray(data.todos) ? data.todos.find((item) => item.active) : null) || null
-        selectedTodoId = activeTodo?.id || ''
-      }
-
-      const select = document.getElementById('run-select')
-      const selected = data.config.selectedRunId || ''
-      select.innerHTML = data.runs.map((run) => {
-        const suffix = [run.status, run.phase].filter(Boolean).join(' · ')
-        return '<option value="' + esc(run.runId) + '" ' + (selected === run.runId ? 'selected' : '') + '>' +
-          esc(run.runId.slice(0, 8) + (suffix ? ' — ' + suffix : '')) + '</option>'
-      }).join('')
-      if (!select.dataset.bound) {
-        select.addEventListener('change', (event) => {
-          updateRunQuery(event.target.value)
-          connectStream()
-        })
-        select.dataset.bound = '1'
-      }
-
-      renderTodos(data)
-      renderFocusedTodo(data)
-      renderCurrentEdits(data)
-
-      const flowEl = document.getElementById('flow')
-      flowEl.innerHTML = data.flow.steps.map((step) => {
-        const latest = step.latestEvent
-        const meta = latest ? [latest.kind, latest.status, latest.terminalReason].filter(Boolean).join('\\n') : 'waiting'
-        return '<div class="step ' + esc(step.status) + '">' +
-          '<div class="step-name">' + esc(step.label) + '</div>' +
-          '<div class="step-status">' + esc(step.status) + '</div>' +
-          '<div class="step-meta">' + esc(meta) + '</div>' +
-          '</div>'
-      }).join('')
-
-      const graphEl = document.getElementById('graph')
-      graphEl.innerHTML = data.graph.nodes.length > 0
-        ? data.graph.nodes.map((node) => {
-            const retry = node.retryCount > 0 ? 'retry #' + node.retryCount : ''
-            const meta = [node.kind, retry, node.role, node.terminalReason].filter(Boolean).join('\\n')
-            return '<button type="button" class="graph-node ' + esc(node.status) + '" data-event-id="' + esc(node.id) + '">' +
-              '<div class="step-name">' + esc(node.label) + '</div>' +
-              '<div class="step-status">' + esc(node.status) + '</div>' +
-              '<div class="step-meta">' + esc(meta) + '\\n' + esc(node.notes || '') + '</div>' +
-              '</button>'
-          }).join('')
-        : '<div class="muted">No iteration graph yet.</div>'
-
-      const runState = [
-        ['runId', data.activeRun?.runId || data.state?.runId || data.config.selectedRunId || '—'],
-        ['status', data.activeRun?.status || data.state?.inProgress?.status || '—'],
-        ['activeKind', data.activeRun?.activeKind || '—'],
-        ['activeRole', data.activeRun?.activeRole || '—'],
-        ['reason', data.activeRun?.activeReason || '—'],
-        ['transport', data.config.transport || '—'],
-        ['lastStatus', data.activeRun?.lastStatus || data.state?.lastStatus || '—'],
-        ['lastCompleted', data.activeRun?.lastCompletedIteration || '—'],
-      ]
-      document.getElementById('run-state').innerHTML = runState.map(([k, v]) => '<div>' + esc(k) + '</div><div>' + esc(v) + '</div>').join('')
-      document.getElementById('summary').textContent = data.summary ? JSON.stringify(data.summary, null, 2) : 'No iteration summary yet.'
-      document.getElementById('output').textContent = data.lastOutput || 'No agent output yet.'
-
-      renderPinnedTool(data)
-      const visibleFeed = getVisibleFeedEntries(data)
-      const feedEl = document.getElementById('feed')
-      feedEl.innerHTML = visibleFeed.length > 0
-        ? visibleFeed.map((entry) => {
-            const meta = [entry.role, entry.kind, entry.toolName].filter(Boolean).join(' · ')
-            return '<div class="feed-item">' +
-              '<div class="feed-head">' +
-                '<div class="feed-type ' + esc(entry.type) + '">' + esc(entry.type || 'event') + '</div>' +
-                (entry.count > 1 ? '<div class="feed-count">x' + esc(entry.count) + '</div>' : '') +
-              '</div>' +
-              '<div class="feed-meta">' + esc(new Date(entry.timestamp).toLocaleTimeString()) + (meta ? ' · ' + esc(meta) : '') + '</div>' +
-              '<div class="feed-text">' + esc(entry.text || '') + '</div>' +
-              '</div>'
-          }).join('')
-        : '<div class="muted">No live feed yet.</div>'
-      feedEl.scrollTop = feedEl.scrollHeight
-
-      const timelineEvents = [...data.recentTelemetry].reverse()
-      const timeline = timelineEvents.map((event) => {
-        const status = eventStatus(event.status)
-        return '<tr data-event-id="' + esc(event._vizId) + '" style="cursor:pointer;">' +
-          '<td>' + esc(new Date(event.timestamp).toLocaleTimeString()) + '</td>' +
-          '<td>' + esc(event.iteration) + '</td>' +
-          '<td>' + esc(event.kind) + '</td>' +
-          '<td><span class="' + pillClass(status) + '">' + esc(event.status) + '</span></td>' +
-          '<td class="muted">' + esc(event.notes || '') + '</td>' +
-          '</tr>'
-      }).join('')
-      document.getElementById('timeline').innerHTML = timeline || '<tr><td colspan="5" class="muted">No telemetry yet.</td></tr>'
-
-      bindSelectableEvents()
-      renderSelectedEvent()
-    }
-
-    function connectStream() {
-      if (eventSource) {
-        eventSource.close()
-      }
-      const runId = selectedRunId()
-      const qs = runId ? '?runId=' + encodeURIComponent(runId) : ''
-      eventSource = new EventSource('/api/stream' + qs)
-      eventSource.onmessage = (event) => {
-        try {
-          renderSnapshot(JSON.parse(event.data))
-        } catch (error) {
-          document.getElementById('output').textContent = String(error)
-        }
-      }
-      eventSource.onerror = () => {
-        document.getElementById('last-refresh').textContent = 'Reconnecting…'
-      }
-    }
-
-    connectStream()
-  </script>
+  </main>
 </body>
 </html>`
 }
@@ -835,16 +428,21 @@ export async function startVisualizerServer(config, overrides = {}) {
         })
         return
       }
-      if (url.pathname === '/api/snapshot') {
+      if (url.pathname === '/api/state' || url.pathname === '/api/snapshot') {
         const snapshot = await buildSnapshot(config, url.searchParams.get('runId') || '')
         res.writeHead(200, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' })
         res.end(JSON.stringify(snapshot))
         return
       }
-      if (url.pathname === '/' || url.pathname === '/index.html') {
-        res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' })
-        res.end(renderHtml())
-        return
+      if (url.pathname === '/' || url.pathname === '/index.html' || url.pathname.startsWith('/assets/')) {
+        if (await serveBuiltVisualizerAsset(url.pathname, res)) {
+          return
+        }
+        if (url.pathname === '/' || url.pathname === '/index.html') {
+          res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' })
+          res.end(renderHtml())
+          return
+        }
       }
       res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
       res.end('Not found')