@sebastianandreasson/pi-autonomous-agents 0.7.1 → 0.9.0

package/README.md

@@ -272,11 +272,16 @@ Visualizer uses SSE for live updates instead of browser polling.
 `pi-harness visualize` still exists as standalone viewer if you want to inspect run history without starting a new run.
 
 Visualizer now includes:
+- TODO-centric main view with current task open by default
 - run history selector from `.pi-runtime/runs/`
-- orchestration flow strip
-- per-iteration stage graph with retries/rechecks
+- orchestration flow for selected todo
+- 50/50 split between live worker feed and current repo edits
+- per-iteration stage graph with retries/rechecks in diagnostics
 - clickable graph nodes and timeline rows that show full event JSON
 - historical run summaries and per-run last output snapshots
+- live worker feed with thinking text, assistant text, tool calls, and tool output
+- feed controls to hide thinking and collapse repetitive deltas
+- pinned latest tool output panel
 
 ## Visual Review Contract
 

package/docs/PI_SUPERVISOR.md

@@ -57,7 +57,7 @@ The package reads `PI_CONFIG_FILE` if provided. Otherwise it falls back to the b
 
 `pi-harness visualize` remains available as standalone viewer.
 
-Visualizer reads active-run lock, per-run state, per-run iteration summary, per-run last output snapshot, and telemetry to show current stage plus historical runs.
+Visualizer reads active-run lock, TODO file, per-run state, per-run iteration summary, per-run last output snapshot, live feed JSONL, and telemetry to show current stage plus historical runs.
 
 ## Config Contract
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebastianandreasson/pi-autonomous-agents",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.9.0",
   "type": "module",
   "description": "Portable unattended PI harness for developer/tester/visual-review loops.",
   "license": "MIT",

package/src/pi-client.mjs

@@ -1,3 +1,5 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
 import { randomUUID } from 'node:crypto'
 import {
   appendLog,
@@ -37,6 +39,14 @@ async function writeAgentOutputSnapshot(config, content) {
   }
 }
 
+async function appendLiveFeedEvent(config, event) {
+  if (!config.runLiveFeedFile) {
+    return
+  }
+  await fs.mkdir(path.dirname(config.runLiveFeedFile), { recursive: true })
+  await fs.appendFile(config.runLiveFeedFile, `${JSON.stringify(event)}\n`, 'utf8')
+}
+
 async function runMockTurn({ config, sessionId, sessionFile, prompt, reason }) {
   const nextSessionId = sessionId || `mock-${randomUUID()}`
   const nextSessionFile = sessionFile || `${config.piRuntimeDir}/mock-${nextSessionId}.jsonl`
@@ -78,7 +88,7 @@ async function runMockTurn({ config, sessionId, sessionFile, prompt, reason }) {
   }
 }
 
-async function runSdkTransportTurn({ config, model, sessionId, sessionFile, prompt, iteration, retryCount, reason }) {
+async function runSdkTransportTurn({ config, model, sessionId, sessionFile, prompt, iteration, retryCount, reason, phase, role, kind }) {
   await appendLog(
     config.logFile,
     `Starting SDK turn iteration=${iteration} retry=${retryCount} reason=${reason}`
@@ -118,6 +128,10 @@ async function runSdkTransportTurn({ config, model, sessionId, sessionFile, prom
         retryCount,
         reason,
       },
+      phase,
+      role,
+      kind,
+      onLiveEvent: (event) => appendLiveFeedEvent(config, event),
     })
   } catch (error) {
     const notes = error instanceof Error ? error.message : String(error)

package/src/pi-sdk-turn.mjs

@@ -300,6 +300,22 @@ export async function createSdkSession(pi, request) {
   })
 }
 
+function emitLiveFeed(request, event) {
+  if (typeof request?.onLiveEvent !== 'function') {
+    return
+  }
+  request.onLiveEvent({
+    timestamp: new Date().toISOString(),
+    iteration: Number(request?.metadata?.iteration ?? 0),
+    retryCount: Number(request?.metadata?.retryCount ?? 0),
+    reason: String(request?.metadata?.reason ?? request?.reason ?? ''),
+    phase: String(request?.phase ?? ''),
+    role: String(request?.role ?? ''),
+    kind: String(request?.kind ?? ''),
+    ...event,
+  })
+}
+
 async function safeAbort(session) {
   try {
     await session.abort()
@@ -430,10 +446,25 @@ export async function runSdkTurnWithPi(pi, request) {
 
       if (event.type === 'agent_start') {
         agentStarted = true
+        emitLiveFeed(request, {
+          type: 'agent_start',
+          text: 'agent started',
+        })
         writeLive('[PI] agent started\n')
       }
 
+      if (event.type === 'message_update' && event.assistantMessageEvent?.type === 'thinking_delta') {
+        emitLiveFeed(request, {
+          type: 'thinking_delta',
+          text: event.assistantMessageEvent.delta,
+        })
+      }
+
       if (event.type === 'message_update' && event.assistantMessageEvent?.type === 'text_delta') {
+        emitLiveFeed(request, {
+          type: 'text_delta',
+          text: event.assistantMessageEvent.delta,
+        })
         ensureAssistantLine()
         writeLive(event.assistantMessageEvent.delta)
         streamedAssistantText = true
@@ -488,21 +519,47 @@ export async function runSdkTurnWithPi(pi, request) {
           requestAbortForLoop()
         }
 
+        emitLiveFeed(request, {
+          type: 'tool_start',
+          toolName: String(event.toolName ?? ''),
+          args: event.args,
+          text: `${String(event.toolName ?? '')}${suffix}`.trim(),
+        })
         writeLive(`[PI tool:start] ${event.toolName}${suffix}\n`)
         if (event.toolName === 'bash' && isLargeShellRead(shellCommand)) {
           writeLive('[PI warning] large bash file read detected; prefer read or a smaller exact window to avoid truncated context.\n')
         }
       }
 
+      if (event.type === 'tool_execution_update') {
+        emitLiveFeed(request, {
+          type: 'tool_update',
+          toolName: String(event.toolName ?? ''),
+          partialResult: event.partialResult,
+          text: formatValue(event.partialResult),
+        })
+      }
+
       if (event.type === 'tool_execution_end') {
         closeAssistantLine()
         activeToolName = ''
         activeToolStartedAt = 0
+        emitLiveFeed(request, {
+          type: 'tool_end',
+          toolName: String(event.toolName ?? ''),
+          isError: event.isError === true,
+          result: event.result,
+          text: `${String(event.toolName ?? '')} ${event.isError ? 'error' : 'ok'}`,
+        })
         writeLive(`[PI tool:end] ${event.toolName} ${event.isError ? 'error' : 'ok'}\n`)
       }
 
       if (event.type === 'agent_end') {
         agentEnded = true
+        emitLiveFeed(request, {
+          type: 'agent_end',
+          text: 'agent finished',
+        })
         closeAssistantLine()
         writeLive('[PI] agent finished\n')
       }

package/src/pi-supervisor.mjs

@@ -368,6 +368,9 @@ async function runAgentInvocation({
     iteration,
     retryCount,
     reason,
+    phase,
+    role,
+    kind,
   })
   const afterSnapshot = getRepoSnapshot(config.cwd)
   const changedFiles = listChangedFiles(config.cwd)
@@ -1734,6 +1737,7 @@ async function main() {
   config.runStateFile = path.join(runDir, 'state.json')
   config.runLastIterationSummaryFile = path.join(runDir, 'last-iteration.json')
   config.runLastAgentOutputFile = path.join(runDir, 'last-output.txt')
+  config.runLiveFeedFile = path.join(runDir, 'live-feed.jsonl')
 
   ensureRepo(config.cwd)
   await ensureFileExists(config.taskFile, 'task file')

package/src/pi-telemetry.mjs

@@ -14,6 +14,10 @@ export async function ensureTelemetryFiles(config) {
     await fs.mkdir(path.dirname(config.runLastAgentOutputFile), { recursive: true })
     await fs.writeFile(config.runLastAgentOutputFile, '', 'utf8')
   }
+  if (config.runLiveFeedFile) {
+    await fs.mkdir(path.dirname(config.runLiveFeedFile), { recursive: true })
+    await fs.writeFile(config.runLiveFeedFile, '', 'utf8')
+  }
   await fs.writeFile(config.lastVerificationOutputFile, '', 'utf8')
   await fs.writeFile(config.changedFilesFile, '', 'utf8')
   await fs.writeFile(config.lastPromptFile, '', 'utf8')

package/src/pi-visualizer-server.mjs

@@ -2,6 +2,7 @@ import fs from 'node:fs/promises'
 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 { readJsonFile } from './pi-repo.mjs'
 import { deriveFlowSnapshot, deriveStageGraph, formatActiveLabel } from './pi-visualizer-shared.mjs'
@@ -28,6 +29,161 @@ 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
+const REPO_DIFF_CACHE_MS = 2000
+
+let repoDiffCache = {
+  cwd: '',
+  updatedAt: 0,
+  result: [],
+}
+
+function clampText(text, maxChars) {
+  const value = String(text ?? '')
+  if (value.length <= maxChars) {
+    return value
+  }
+  return `${value.slice(0, maxChars - 16)}\n... [truncated]`
+}
+
+async function parseTodos(taskFile, activeTaskText = '') {
+  try {
+    const raw = await fs.readFile(taskFile, 'utf8')
+    const lines = raw.split('\n')
+    const items = []
+    let currentPhase = ''
+
+    for (let index = 0; index < lines.length; index += 1) {
+      const line = lines[index]
+      const headingMatch = /^(#+)\s+(.+)$/.exec(line)
+      if (headingMatch) {
+        const level = headingMatch[1].length
+        const text = headingMatch[2].trim()
+        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,
+        })
+        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,
+        })
+      }
+    }
+
+    return items
+  } catch {
+    return []
+  }
+}
+
+function readRepoDiff(cwd) {
+  const now = Date.now()
+  if (repoDiffCache.cwd === cwd && (now - repoDiffCache.updatedAt) < REPO_DIFF_CACHE_MS) {
+    return repoDiffCache.result
+  }
+
+  try {
+    const status = execFileSync('git', ['status', '--short'], {
+      cwd,
+      encoding: 'utf8',
+      maxBuffer: 1024 * 1024,
+    }).trim()
+    if (status === '') {
+      repoDiffCache = { cwd, updatedAt: now, result: [] }
+      return []
+    }
+
+    const files = status
+      .split('\n')
+      .map((line) => line.slice(3).trim())
+      .filter(Boolean)
+      .slice(0, MAX_DIFF_FILES)
+
+    let remainingChars = MAX_DIFF_TOTAL_CHARS
+    const result = files.map((file) => {
+      let diff = ''
+      try {
+        diff = execFileSync('git', ['diff', '--no-ext-diff', '--unified=1', '--', file], {
+          cwd,
+          encoding: 'utf8',
+          maxBuffer: 1024 * 1024,
+        }).trim()
+      } catch {
+        diff = ''
+      }
+
+      const allowedChars = Math.max(500, Math.min(MAX_DIFF_CHARS_PER_FILE, remainingChars))
+      const truncatedDiff = clampText(diff, allowedChars)
+      remainingChars = Math.max(0, remainingChars - truncatedDiff.length)
+
+      return {
+        file,
+        diff: truncatedDiff,
+      }
+    })
+
+    repoDiffCache = { cwd, updatedAt: now, result }
+    return result
+  } catch {
+    return []
+  }
+}
+
 function getRunDir(config, runId) {
   return path.join(config.piRuntimeDir, 'runs', runId)
 }
@@ -42,6 +198,7 @@ function getRunScopedConfig(config, runId) {
     stateFile: path.join(runDir, 'state.json'),
     lastIterationSummaryFile: path.join(runDir, 'last-iteration.json'),
     lastAgentOutputFile: path.join(runDir, 'last-output.txt'),
+    liveFeedFile: path.join(runDir, 'live-feed.jsonl'),
     logFile: path.join(runDir, 'pi.log'),
   }
 }
@@ -101,11 +258,12 @@ export async function buildSnapshot(config, queryRunId = '') {
   const selectedRunId = resolveSelectedRunId(queryRunId, activeRun, runs)
   const selectedConfig = selectedRunId !== '' ? getRunScopedConfig(config, selectedRunId) : config
 
-  const [state, summary, telemetry, currentOutput] = await Promise.all([
+  const [state, summary, telemetry, currentOutput, liveFeed] = await Promise.all([
     readJsonFile(selectedConfig.stateFile, null),
     readJsonFile(selectedConfig.lastIterationSummaryFile, null),
     readTelemetry(selectedConfig),
     readOptionalText(selectedConfig.lastAgentOutputFile, 5000),
+    readJsonlTail(selectedConfig.liveFeedFile, 300),
   ])
 
   const recentTelemetry = telemetry.slice(-160).map((event, index) => ({
@@ -123,6 +281,13 @@ export async function buildSnapshot(config, queryRunId = '') {
     telemetry,
   })
 
+  const selectedRunIsActive = selectedRunId !== '' && String(activeRun?.runId ?? '') === selectedRunId
+  const activeTaskText = String((selectedRunIsActive ? activeRun?.task : state?.inProgress?.task) ?? summary?.task ?? '').trim()
+  const [todos, currentEdits] = await Promise.all([
+    parseTodos(config.taskFile, activeTaskText),
+    Promise.resolve(selectedRunIsActive ? readRepoDiff(config.cwd) : []),
+  ])
+
   return {
     now: new Date().toISOString(),
     config: {
@@ -143,7 +308,10 @@ export async function buildSnapshot(config, queryRunId = '') {
       activeLabel: formatActiveLabel(activeRun, flow),
     },
     graph,
+    todos,
+    currentEdits,
     lastOutput: currentOutput,
+    liveFeed,
     recentTelemetry,
   }
 }
@@ -188,8 +356,8 @@ export function renderHtml() {
     .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.top { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
-    .grid.main { grid-template-columns: 1.25fr .95fr; }
+    .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;
@@ -198,6 +366,17 @@ export function renderHtml() {
     .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);
@@ -216,7 +395,27 @@ export function renderHtml() {
     .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;
@@ -234,8 +433,13 @@ export function renderHtml() {
     .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); }
-    @media (max-width: 1100px) { .grid.top, .grid.main, .flow { grid-template-columns: 1fr; } }
+    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; } }
   </style>
 </head>
 <body>
@@ -251,39 +455,48 @@ export function renderHtml() {
       </div>
     </div>
 
-    <div class="grid top">
-      <div class="card"><div class="label">Current activity</div><div class="value" id="active-label">—</div></div>
-      <div class="card"><div class="label">Iteration</div><div class="value" id="iteration">—</div></div>
-      <div class="card"><div class="label">Phase</div><div class="value small" id="phase">—</div></div>
-      <div class="card"><div class="label">Task</div><div class="value small" id="task">—</div></div>
-    </div>
-
-    <div class="card" style="margin-bottom: 16px;">
-      <div class="label">Orchestration flow</div>
-      <div class="flow" id="flow"></div>
-    </div>
-
-    <div class="card" style="margin-bottom: 16px;">
-      <div class="label">Iteration stage graph</div>
-      <div class="graph" id="graph"></div>
-    </div>
-
     <div class="grid main">
       <div class="card">
-        <div class="label">Recent telemetry timeline</div>
-        <div style="margin-top: 12px; overflow: auto; max-height: 620px;">
-          <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 class="label">TODOS</div>
+        <div class="todo-list" id="todo-list"></div>
       </div>
 
-      <div class="grid">
-        <div class="card"><div class="label">Run state</div><div class="kv" id="run-state"></div></div>
-        <div class="card"><div class="label">Selected event</div><pre id="selected-event">Click graph node or timeline row.</pre></div>
-        <div class="card"><div class="label">Last iteration summary</div><pre id="summary">—</pre></div>
-        <div class="card"><div class="label">Last agent output</div><pre id="output">—</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>
       </div>
     </div>
   </div>
@@ -317,8 +530,59 @@ export function renderHtml() {
 
     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
@@ -326,6 +590,16 @@ export function renderHtml() {
         || 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
@@ -333,6 +607,60 @@ export function renderHtml() {
         : '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', () => {
@@ -340,16 +668,27 @@ export function renderHtml() {
           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()
-      document.getElementById('active-label').textContent = data.flow.activeLabel || 'Idle'
-      document.getElementById('iteration').textContent = data.flow.iteration || '—'
-      document.getElementById('phase').textContent = data.activeRun?.phase || data.summary?.phase || '—'
-      document.getElementById('task').textContent = data.activeRun?.task || data.summary?.task || '—'
+      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 || ''
@@ -366,6 +705,10 @@ export function renderHtml() {
         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
@@ -404,6 +747,24 @@ export function renderHtml() {
       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)