wavework 0.0.0-stage → 0.1.1

package/templates/dashboard/lib/ci.mjs

@@ -0,0 +1,52 @@
+// CI status for a pushed SHA via `gh run list --commit <sha>`, cached per SHA (only success is final: failed runs get re-run).
+import { execFile } from 'node:child_process';
+
+const SHA = /^[0-9a-f]{7,40}$/i;
+const BAD = new Set(['failure', 'cancelled', 'timed_out', 'startup_failure', 'action_required', 'stale']);
+
+export function isSha(v) { return typeof v === 'string' && SHA.test(v); }
+
+/** Default gh runner: execFile with an argument list, no shell. Rejects when gh is missing or fails. */
+export function defaultGhRunner(args) {
+  return new Promise((resolve, reject) => {
+    execFile('gh', args, { timeout: 10_000, maxBuffer: 1024 * 1024 }, (err, stdout) => (err ? reject(err) : resolve(stdout)));
+  });
+}
+
+export function summarize(runs) {
+  if (runs.length === 0) return 'none';
+  if (runs.some((r) => r.status !== 'completed')) return 'pending';
+  if (runs.some((r) => BAD.has(r.conclusion))) return 'failure';
+  return 'success';
+}
+
+export function createCiLookup({ ghRunner = defaultGhRunner, refreshMs = 15_000, now = Date.now } = {}) {
+  const cache = new Map(); // sha -> { at, value, inflight }
+
+  async function fetchSha(sha) {
+    try {
+      const out = await ghRunner(['run', 'list', '--commit', sha, '--json', 'status,conclusion,url,name']);
+      const parsed = JSON.parse(out);
+      if (!Array.isArray(parsed)) throw new Error('unexpected gh output');
+      const runs = parsed.map((r) => ({
+        name: String(r.name ?? ''), status: String(r.status ?? ''), conclusion: r.conclusion ? String(r.conclusion) : null, url: String(r.url ?? ''),
+      }));
+      return { sha, state: summarize(runs), runs };
+    } catch {
+      return { sha, state: 'unknown', runs: [] };
+    }
+  }
+
+  /** Returns { sha, state, runs }; state is unknown when gh is missing/fails or the sha is not a plain hex string. */
+  async function lookup(sha) {
+    if (!isSha(sha)) return { sha: sha ?? null, state: 'unknown', runs: [] };
+    const hit = cache.get(sha);
+    const final = hit?.value && (hit.value.state === 'success');
+    if (hit?.inflight) return hit.inflight;
+    if (hit && (final || now() - hit.at < refreshMs)) return hit.value;
+    const inflight = fetchSha(sha).then((value) => { cache.set(sha, { at: now(), value }); return value; });
+    cache.set(sha, { ...(hit ?? { at: 0 }), inflight });
+    return inflight;
+  }
+  return { lookup };
+}

package/templates/dashboard/lib/derive.mjs

@@ -0,0 +1,105 @@
+// Derives the run timeline (steps, children, reviews, tests, totals) from a run's events.
+const AGENT_SUMS = ['durationMs', 'tokensIn', 'tokensOut', 'tokensCacheRead', 'tokensCacheWrite', 'cost'];
+
+const ms = (a, b) => {
+  const d = Date.parse(b) - Date.parse(a);
+  return Number.isFinite(d) ? d : null;
+};
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+
+/**
+ * Sums agent stats. `cost` is null (never 0 or a partial sum) when there are no agents or any agent
+ * lacks a numeric cost (unknown model): an unknown cost must not look like a cheap one.
+ */
+function sumAgents(agents) {
+  const out = { count: agents.length };
+  for (const k of AGENT_SUMS) out[k] = agents.reduce((s, a) => s + num(a[k]), 0);
+  const known = agents.length > 0 && agents.every((a) => typeof a.cost === 'number' && Number.isFinite(a.cost));
+  // Round away binary float noise (0.1 + 0.2).
+  out.cost = known ? Math.round(out.cost * 1e6) / 1e6 : null;
+  return out;
+}
+
+export function deriveTimeline(run, events, now = Date.now()) {
+  const steps = [];
+  const open = new Map(); // step + wave -> stack of open step entries
+  const key = (step, wave) => `${step}\0${wave ?? ''}`;
+  const sha = (e) => (e.sha ? { sha: e.sha } : {});
+  for (const e of events) {
+    if (e.type === 'step-start') {
+      const entry = { step: e.step, wave: e.wave ?? null, start: e.ts, end: null, durationMs: null };
+      steps.push(entry);
+      const k = key(e.step, e.wave);
+      if (!open.has(k)) open.set(k, []);
+      open.get(k).push(entry);
+    } else if (e.type === 'step-end') {
+      let entry = open.get(key(e.step, e.wave))?.pop();
+      if (!entry && e.wave == null) {
+        // End without a wave: close the latest open entry of that step.
+        const stacks = [...open.entries()].filter(([k, v]) => k.startsWith(`${e.step}\0`) && v.length);
+        entry = stacks.length ? stacks[stacks.length - 1][1].pop() : undefined;
+      }
+      if (entry) {
+        entry.end = e.ts;
+        entry.durationMs = ms(entry.start, e.ts);
+        Object.assign(entry, sha(e));
+      } else {
+        steps.push({ step: e.step, wave: e.wave ?? null, start: null, end: e.ts, durationMs: null, ...sha(e) });
+      }
+    }
+  }
+
+  const children = [];
+  const byBead = new Map();
+  for (const e of events) {
+    if (e.type === 'child-start') {
+      const c = {
+        bead: e.bead, model: e.model ?? null, wave: e.wave ?? null, start: e.ts, end: null,
+        durationMs: null, result: null, redBeforeGreen: null,
+      };
+      children.push(c);
+      byBead.set(e.bead, c);
+    } else if (e.type === 'child-end') {
+      let c = byBead.get(e.bead);
+      if (!c) {
+        c = { bead: e.bead, model: e.model ?? null, wave: e.wave ?? null, start: null, end: null, durationMs: null, result: null, redBeforeGreen: null };
+        children.push(c);
+        byBead.set(e.bead, c);
+      }
+      c.end = e.ts;
+      c.durationMs = c.start ? ms(c.start, e.ts) : null;
+      c.result = e.result ?? null;
+      c.redBeforeGreen = e.redBeforeGreen ?? null;
+      if (!c.model && e.model) c.model = e.model;
+    }
+  }
+
+  const agentEvents = events.filter((e) => e.type === 'agent');
+  const perChild = new Map(children.map((c) => [c, []]));
+  for (const a of agentEvents) {
+    let owner = a.bead ? byBead.get(a.bead) : undefined;
+    if (!owner) {
+      // No bead on the event: attribute to the child whose window contains it.
+      owner = children.find((c) => c.start && a.ts >= c.start && (!c.end || a.ts <= c.end));
+    }
+    if (owner) perChild.get(owner).push(a);
+  }
+  for (const c of children) c.agents = sumAgents(perChild.get(c));
+
+  const reviews = events.filter((e) => e.type === 'review')
+    .map((e) => ({ ts: e.ts, round: e.round ?? null, verdict: e.verdict ?? null, mustFix: e.mustFix ?? 0 }));
+  const tests = events.filter((e) => e.type === 'tests')
+    .map((e) => ({ ts: e.ts, scope: e.scope ?? null, passed: e.passed ?? 0, failed: e.failed ?? 0, duration: e.duration ?? null }));
+
+  const all = sumAgents(agentEvents);
+  const end = run?.ended ? Date.parse(run.ended) : now;
+  const start = run?.started ? Date.parse(run.started) : NaN;
+  const totals = {
+    agents: all.count, tokensIn: all.tokensIn, tokensOut: all.tokensOut,
+    tokensCacheRead: all.tokensCacheRead, tokensCacheWrite: all.tokensCacheWrite, cost: all.cost,
+    durationMs: Number.isFinite(start) && Number.isFinite(end) ? end - start : null,
+  };
+
+  const pushed = [...steps].reverse().find((s) => s.step === 'push' && s.sha)?.sha ?? null;
+  return { steps, children, reviews, tests, totals, sha: pushed };
+}

package/templates/dashboard/lib/settings.mjs

@@ -0,0 +1,34 @@
+// Dashboard settings written by `wavework init/update` into ../config.json: { port, tokensFile }.
+// The runtime never reads .claude/wavework.json, so it works in any checkout that has this folder.
+// Without config.json (or with an unreadable one) the defaults apply.
+import { readFileSync } from 'node:fs';
+import { execFileSync } from 'node:child_process';
+import path from 'node:path';
+
+export const DEFAULT_PORT = 4690;
+
+/** `{ port, tokensFile }` from `<dashboardDir>/config.json`; defaults for anything missing or invalid. */
+export function readSettings(dashboardDir) {
+  let raw = {};
+  try { raw = JSON.parse(readFileSync(path.join(dashboardDir, 'config.json'), 'utf8')); } catch { /* defaults */ }
+  const port = Number.isInteger(raw?.port) && raw.port >= 1024 && raw.port <= 65535 ? raw.port : DEFAULT_PORT;
+  const tokensFile = typeof raw?.tokensFile === 'string' && raw.tokensFile !== '' ? raw.tokensFile : null;
+  return { port, tokensFile };
+}
+
+/** PIPELINE_DASHBOARD_PORT wins over config.json. Port 0 (ephemeral) is only meant for tests. */
+export function resolvePort(dashboardDir, env = process.env) {
+  if (env.PIPELINE_DASHBOARD_PORT !== undefined) return Number(env.PIPELINE_DASHBOARD_PORT);
+  return readSettings(dashboardDir).port;
+}
+
+/** Repo directory name for the UI title: the main checkout (parent of the git common dir), else the checkout root. */
+export function projectName(root) {
+  try {
+    const common = execFileSync('git', ['rev-parse', '--path-format=absolute', '--git-common-dir'], {
+      cwd: root, encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim();
+    if (common) return path.basename(path.dirname(common));
+  } catch { /* not a git checkout */ }
+  return path.basename(path.resolve(root));
+}

package/templates/dashboard/lib/tokens.mjs

@@ -0,0 +1,21 @@
+// Safe lookup of the project's own tokens CSS (config `dashboard.tokensFile`).
+import { realpathSync, statSync } from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Absolute real path of `rel` inside `root`, or null. Refuses anything that is not a plain repo-relative
+ * path (absolute, `..`, `.` or empty segments, backslash, NUL) and anything whose real path (symlinks
+ * resolved, also in parent directories) leaves the real repo root or is not a regular file.
+ */
+export function resolveTokensFile(root, rel) {
+  if (typeof rel !== 'string' || rel === '' || rel.includes('\0') || rel.includes('\\')) return null;
+  if (!rel.endsWith('.css')) return null; // config.json can be edited by hand: the suffix is enforced here too
+  if (rel.startsWith('/') || /^[A-Za-z]:/.test(rel)) return null;
+  if (rel.split('/').some((s) => s === '' || s === '.' || s === '..')) return null;
+  try {
+    const realRoot = realpathSync(root);
+    const real = realpathSync(path.join(realRoot, ...rel.split('/')));
+    if (!real.startsWith(realRoot + path.sep) || !statSync(real).isFile()) return null;
+    return real;
+  } catch { return null; }
+}

package/templates/dashboard/pricing.json

@@ -0,0 +1,11 @@
+{
+  "unit": "USD per million tokens",
+  "source": "claude-api skill model table (cached 2026-10-06) and prompt-caching rules: cache read as listed (Haiku 5.5: 0.1x input), 5-minute cache write 1.25x input",
+  "note": "claude-haiku-5-5 uses the rate card for prompts up to 100K tokens. A model missing here gets no cost.",
+  "models": {
+    "claude-opus-5-5": { "input": 4, "output": 20, "cacheRead": 0.2, "cacheWrite": 5 },
+    "claude-sonnet-5-5": { "input": 2, "output": 10, "cacheRead": 0.2, "cacheWrite": 2.5 },
+    "claude-haiku-5-5": { "input": 0.1, "output": 0.5, "cacheRead": 0.01, "cacheWrite": 0.125 },
+    "claude-fable-5-1": { "input": 10, "output": 50, "cacheRead": 0.25, "cacheWrite": 12.5 }
+  }
+}

package/templates/dashboard/public/app.css

@@ -0,0 +1,134 @@
+/* Pipeline dashboard. Tokens only (/default-theme.css, optionally overridden by the project tokens at /tokens.css); no raw colors, sizes, radii or durations. */
+*, *::before, *::after { box-sizing: border-box; }
+
+html { background: var(--color-bg); }
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-body-size);
+  line-height: var(--text-body-leading);
+  letter-spacing: var(--text-body-tracking);
+  -webkit-font-smoothing: antialiased;
+  padding-left: var(--safe-left);
+  padding-right: var(--safe-right);
+  padding-bottom: var(--safe-bottom);
+}
+
+a { color: var(--color-accent-text); text-decoration: none; }
+a:hover { text-decoration: underline; }
+:focus-visible { outline: var(--border-width-thick) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
+
+.topbar {
+  position: sticky; top: 0; z-index: var(--z-sticky);
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
+  min-height: var(--shell-bar-height);
+  padding: 0 var(--space-5);
+  background: var(--color-material);
+  -webkit-backdrop-filter: var(--blur-material);
+  backdrop-filter: var(--blur-material);
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+.brand { font-size: var(--text-title-size); font-weight: var(--weight-semibold); letter-spacing: var(--text-title-tracking); color: var(--color-text); }
+.brand:hover { text-decoration: none; }
+
+.live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small-size); color: var(--color-text-muted); }
+.live::before { content: ''; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--color-text-subtle); }
+.live[data-state='live']::before { background: var(--color-ok-solid); }
+.live[data-state='offline']::before { background: var(--color-warn-solid); }
+
+.page { max-width: var(--page-width-wide); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); display: grid; gap: var(--space-6); min-width: 0; }
+
+h1, h2, h3, p { margin: 0; overflow-wrap: break-word; min-width: 0; }
+h1 { font-size: var(--text-heading-size); line-height: var(--text-heading-leading); letter-spacing: var(--text-heading-tracking); font-weight: var(--weight-semibold); }
+h2 { font-size: var(--text-title-size); line-height: var(--text-title-leading); letter-spacing: var(--text-title-tracking); font-weight: var(--weight-semibold); }
+.muted { color: var(--color-text-muted); }
+.subtle { color: var(--color-text-subtle); }
+.small { font-size: var(--text-small-size); line-height: var(--text-small-leading); }
+.mono { font-family: var(--font-mono); font-size: var(--text-small-size); overflow-wrap: anywhere; }
+.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-5); }
+.back { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3); margin-left: calc(var(--space-3) * -1); border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); }
+.back:hover { background: var(--color-surface-hover); text-decoration: none; }
+.back:active { transform: scale(var(--press-scale)); }
+
+.card { container-type: inline-size; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
+.card > h2 { margin-bottom: calc(var(--space-1) * -1); }
+.stack { display: grid; gap: var(--space-6); min-width: 0; }
+.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--content-narrow) / 2), 1fr)); gap: var(--space-5); }
+
+/* Badges: soft tint + dot + text, never color only */
+.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-caption-size); line-height: var(--text-caption-leading); font-weight: var(--weight-medium); white-space: nowrap; background: var(--color-surface-sunken); color: var(--color-text-muted); }
+.badge::before { content: ''; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--color-text-subtle); }
+.badge[data-tone='ok'] { background: var(--color-ok-soft); color: var(--color-ok); }
+.badge[data-tone='ok']::before { background: var(--color-ok-solid); }
+.badge[data-tone='warn'] { background: var(--color-warn-soft); color: var(--color-warn); }
+.badge[data-tone='warn']::before { background: var(--color-warn-solid); }
+.badge[data-tone='bad'] { background: var(--color-bad-soft); color: var(--color-bad); }
+.badge[data-tone='bad']::before { background: var(--color-bad-solid); }
+.badge[data-tone='info'] { background: var(--color-info-soft); color: var(--color-info); }
+.badge[data-tone='info']::before { background: var(--color-info-solid); }
+.badge[data-tone='info'][data-pulse]::before { animation: pulse var(--duration-pulse) var(--ease-out) infinite; }
+@keyframes pulse { 50% { opacity: var(--opacity-ghost); } }
+
+/* Tables: fit the screen (wrap, never scroll sideways), hairline row separators */
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: var(--space-3) var(--space-3); text-align: left; vertical-align: top; overflow-wrap: anywhere; border-bottom: var(--border-width) solid var(--color-border); }
+th { font-size: var(--text-caption-size); letter-spacing: var(--text-caption-tracking); font-weight: var(--weight-medium); color: var(--color-text-muted); }
+tbody tr:last-child td { border-bottom: 0; }
+th.num { text-align: right; }
+.rows tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
+.rows tbody tr:hover { background: var(--color-surface-hover); }
+.rows .link { display: block; color: inherit; }
+.rows .link:hover { text-decoration: none; }
+tr.nested td:first-child { padding-left: var(--space-6); }
+tr[data-clickable] { cursor: pointer; }
+tr[data-clickable]:active { background: var(--color-surface-sunken); }
+
+/* Summary stats in the run header */
+.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-file-col-date)), 1fr)); gap: var(--space-5); }
+.stat { display: grid; gap: var(--space-1); min-width: 0; }
+.stat .label { font-size: var(--text-caption-size); color: var(--color-text-muted); letter-spacing: var(--text-caption-tracking); }
+.stat .value { font-size: var(--text-title-size); font-weight: var(--weight-semibold); letter-spacing: var(--text-title-tracking); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+
+/* Step timeline */
+.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
+.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
+.steps .dot { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--color-ok-solid); }
+.steps li[data-open] .dot { background: var(--color-info-solid); }
+
+.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
+.list li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
+.link-btn { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--color-accent-soft); font-weight: var(--weight-medium); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); }
+.link-btn:hover { text-decoration: none; background: var(--color-surface-hover); }
+.link-btn:active { transform: scale(var(--press-scale)); }
+
+.state { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); background: var(--color-surface-sunken); border-radius: var(--radius-md); }
+.state[data-tone='bad'] { background: var(--color-bad-soft); color: var(--color-bad); }
+.btn { min-height: var(--control-height); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); }
+.btn:hover { background: var(--color-accent-hover); }
+.btn:active { transform: scale(var(--press-scale)); }
+
+.skeleton { height: var(--space-7); border-radius: var(--radius-md); background: var(--color-surface-sunken); animation: pulse var(--duration-pulse) var(--ease-out) infinite; }
+
+/* Narrow cards (phones): tables become stacked rows, header text moves into each cell.
+   Tokens have no breakpoint token, so this single documented threshold is the only raw size here. */
+@container (max-width: 40rem) {
+  thead { display: none; }
+  table, tbody, tr, td { display: block; }
+  tr { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); }
+  tbody tr:last-child { border-bottom: 0; }
+  td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 0; padding: var(--space-1) var(--space-3); text-align: right; }
+  td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-caption-size); text-align: left; flex: none; }
+  td:first-child { justify-content: flex-start; text-align: left; }
+  td:first-child::before { content: none; }
+  tr.nested td:first-child { padding-left: var(--space-6); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: var(--duration-spin-calm) !important; transition-duration: var(--duration-press) !important; }
+  .badge[data-pulse]::before, .skeleton { animation: none !important; }
+  .back:active, .btn:active, .link-btn:active { transform: none; }
+}

package/templates/dashboard/public/app.js

@@ -0,0 +1,260 @@
+// Pipeline dashboard UI. Plain ES modules, no build. All data is rendered with textContent (never innerHTML).
+import {
+  ciBadge, findingsOf, formatCost, formatDuration, formatTokens, parseRoute, relativeTime,
+  resultBadge, reviewRows, reviewsByBead, safeHref, sortRuns, statusBadge, stepLabel, tokensOf, formatStarted,
+} from './format.mjs';
+
+const app = document.getElementById('app');
+
+/** Replaces the page content and puts keyboard focus back on the same run link (by data-run) if it had it. */
+function show(...nodes) {
+  const run = document.activeElement?.closest?.('[data-run]')?.dataset.run;
+  const onBack = document.activeElement?.classList?.contains('back');
+  app.replaceChildren(...nodes);
+  if (run) app.querySelector(`[data-run="${CSS.escape(run)}"] a.link`)?.focus({ preventScroll: true });
+  else if (onBack) app.querySelector('.back')?.focus({ preventScroll: true });
+}
+const liveEl = document.getElementById('live');
+let project = '';
+const appTitle = () => (project ? `Pipeline dashboard · ${project}` : 'Pipeline dashboard');
+// The project name (repo directory) comes from the server; the page works without it.
+fetch('/api/info').then((r) => r.json()).then((info) => {
+  if (typeof info?.project !== 'string') return;
+  project = info.project;
+  const brand = document.querySelector('.brand');
+  if (brand) brand.textContent = `Pipeline · ${project}`;
+  document.title = appTitle();
+}).catch(() => {});
+
+/** Tiny element builder: h('td', {class: 'num'}, 'text', childNode). Strings become text nodes. */
+function h(tag, attrs, ...kids) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs ?? {})) if (v != null && v !== false) el.setAttribute(k, v === true ? '' : v);
+  for (const k of kids.flat()) if (k != null && k !== false) el.append(k instanceof Node ? k : document.createTextNode(String(k)));
+  return el;
+}
+/** Copies each header text onto its cells (data-label) so CSS can stack rows on narrow cards. */
+function labelCells(tbl) {
+  const heads = [...tbl.querySelectorAll('thead th')].map((th) => th.textContent);
+  for (const tr of tbl.querySelectorAll('tbody tr')) [...tr.children].forEach((td, i) => td.setAttribute('data-label', heads[i] ?? ''));
+  return tbl;
+}
+const badge = (b, pulse) => h('span', { class: 'badge', 'data-tone': b.tone, 'data-pulse': pulse }, b.label);
+const dash = '—';
+const runTitle = (r) => r.branch ?? (r.units?.length ? r.units.join(', ') : r.id);
+
+async function getJson(url) {
+  const res = await fetch(url, { headers: { accept: 'application/json' } });
+  if (!res.ok) throw new Error(res.status === 404 ? 'This run does not exist (any more).' : `Server answered ${res.status}.`);
+  return res.json();
+}
+
+const state = { runs: null, listError: null, details: new Map(), ci: new Map(), route: parseRoute(location.hash) };
+
+/* ---------- Run list ---------- */
+function liveDuration(run) {
+  if (run.status === 'running' && run.started) return Date.now() - Date.parse(run.started);
+  return run.totals?.durationMs ?? null;
+}
+
+function runRow(r, nested) {
+  const href = `#/runs/${encodeURIComponent(r.id)}`;
+  const link = (kids) => h('a', { class: 'link', href }, kids);
+  const ci = ciBadge(state.ci.get(r.id) ?? null);
+  const tr = h('tr', { 'data-testid': 'run-row', 'data-run': r.id, class: nested ? 'nested' : null, 'data-clickable': true },
+    h('td', null, badge(statusBadge(r.status), r.status === 'running')),
+    h('td', null, link([h('strong', null, runTitle(r)), h('div', { class: 'small muted' }, `${r.kind ?? dash} · ${(r.units ?? []).join(', ') || dash}`)])),
+    h('td', { class: 'small muted', title: r.started ? relativeTime(r.started) : null }, formatStarted(r.started)),
+    h('td', { class: 'num' }, formatDuration(liveDuration(r))),
+    h('td', { class: 'num', title: 'Estimated cost' }, formatCost(r.totals?.cost ?? null)),
+    h('td', null, ci ? badge(ci) : h('span', { class: 'subtle' }, dash)));
+  tr.addEventListener('click', (e) => { if (!e.target.closest('a')) location.hash = href; });
+  return tr;
+}
+
+function renderList() {
+  if (state.listError) return errorState(state.listError, loadList);
+  if (!state.runs) return show(h('h1', null, 'Pipeline runs'), h('div', { class: 'skeleton' }), h('div', { class: 'skeleton' }));
+  const runs = sortRuns(state.runs);
+  const body = h('tbody');
+  for (const r of runs) {
+    body.append(runRow(r, false));
+    for (const c of sortRuns(r.children ?? [])) body.append(runRow(c, true));
+  }
+  const content = runs.length === 0
+    ? h('div', { class: 'state' }, h('h2', null, 'No runs yet'), h('p', { class: 'muted' }, 'Runs appear here as soon as a /next-task pipeline records its first event.'))
+    : h('div', { class: 'card' }, labelCells(h('table', { class: 'rows' },
+      h('thead', null, h('tr', null, ['Status', 'Run', 'Started'].map((t) => h('th', null, t)),
+        h('th', { class: 'num' }, 'Duration'), h('th', { class: 'num' }, 'Est. cost'), h('th', null, 'CI'))),
+      body)));
+  show(
+    h('div', { class: 'head' }, h('h1', null, 'Pipeline runs'), h('p', { class: 'muted small' }, 'Costs are estimates from token usage.')),
+    content);
+  document.title = appTitle();
+}
+
+async function loadList() {
+  try {
+    state.runs = await getJson('/api/runs');
+    state.listError = null;
+  } catch (e) { state.listError = e.message; }
+  if (state.route.view === 'list') renderList();
+  loadCi();
+}
+
+/** The list endpoint has no CI info; fetch details of runs with a pushed SHA once, then rely on the server cache. */
+async function loadCi() {
+  const flat = (state.runs ?? []).flatMap((r) => [r, ...(r.children ?? [])]);
+  await Promise.all(flat.map(async (r) => {
+    if (state.ci.has(r.id) && state.ci.get(r.id)?.state === 'success') return;
+    try {
+      const d = await getJson(`/api/runs/${encodeURIComponent(r.id)}`);
+      state.ci.set(r.id, d.ci ?? null);
+    } catch { /* leave the badge out */ }
+  }));
+  if (state.route.view === 'list') renderList();
+}
+
+/* ---------- Run detail ---------- */
+function stat(label, value, title, live) {
+  return h('div', { class: 'stat' }, h('span', { class: 'label' }, label), h('span', { class: 'value', title, 'data-live': live }, value));
+}
+
+function section(title, ...kids) { return h('section', { class: 'card' }, h('h2', null, title), ...kids); }
+const empty = (t) => h('p', { class: 'muted' }, t);
+
+function table(heads, rows, testid) {
+  return labelCells(h('table', { class: 'rows', 'data-testid': testid },
+    h('thead', null, h('tr', null, heads.map(([t, num]) => h('th', { class: num ? 'num' : null }, t)))), h('tbody', null, rows)));
+}
+
+function renderDetail(id) {
+  const d = state.details.get(id);
+  if (d?.error) return errorState(d.error, () => loadDetail(id));
+  if (!d) return show(backLink(), h('div', { class: 'skeleton' }), h('div', { class: 'skeleton' }));
+  const { run, events, timeline: t, ci } = d;
+  const members = (state.runs ?? []).find((r) => r.id === run.id)?.children ?? [];
+  const reviews = reviewsByBead(events);
+  const findings = findingsOf(events);
+  const ciB = ciBadge(ci);
+  const ciRuns = (ci?.runs ?? []);
+
+  const children = t.children.map((c) => {
+    const rv = reviews.get(c.bead);
+    return h('tr', { 'data-testid': 'child-row' },
+      h('td', { class: 'mono' }, c.bead), h('td', null, c.model ?? dash), h('td', { class: 'num' }, c.wave ?? dash),
+      h('td', { class: 'num' }, formatDuration(c.durationMs)),
+      h('td', { class: 'num', 'data-col': 'tokens' }, formatTokens(tokensOf({ ...c.agents, agents: c.agents?.count }))),
+      h('td', { class: 'num', 'data-col': 'cost' }, formatCost(c.agents?.cost ?? null)),
+      h('td', null, c.result ? badge(resultBadge(c.result)) : (run.status === 'running' ? badge({ label: 'Working', tone: 'info' }, true) : dash)),
+      h('td', null, rv ? `${rv.verdict ?? dash}${rv.round ? ` · round ${rv.round}` : ''}` : dash),
+      h('td', { class: 'small' }, c.redBeforeGreen ?? dash));
+  });
+
+  const steps = t.steps.map((s) => h('li', { 'data-open': s.end ? null : true },
+    h('span', { class: 'dot' }),
+    h('span', null, stepLabel(s), s.sha ? h('span', { class: 'mono muted' }, ` ${s.sha.slice(0, 7)}`) : null),
+    h('span', { class: 'num muted' }, s.end ? formatDuration(s.durationMs) : 'running')));
+
+  const reviewTr = reviewRows(events).map((r) => h('tr', null, h('td', { class: 'mono' }, r.bead ?? dash), h('td', { class: 'num' }, r.round ?? dash), h('td', null, r.verdict ?? dash), h('td', { class: 'num' }, r.mustFix)));
+  const testRows = t.tests.map((x) => h('tr', null,
+    h('td', null, x.scope ?? dash), h('td', { class: 'num' }, x.passed),
+    h('td', { class: 'num' }, x.failed > 0 ? badge({ label: String(x.failed), tone: 'bad' }) : x.failed), h('td', { class: 'num' }, x.duration != null ? `${x.duration}s` : dash)));
+
+  const ciLinks = ciRuns.map((r) => {
+    const href = safeHref(r.url);
+    return h('li', null, href ? h('a', { class: 'link-btn', href, target: '_blank', rel: 'noopener noreferrer' }, r.name || 'Workflow run') : h('span', null, r.name || 'Workflow run'),
+      h('span', { class: 'small muted' }, r.conclusion ?? r.status));
+  });
+
+  document.title = `${runTitle(run)} · ${appTitle()}`;
+  show(
+    backLink(),
+    h('div', { 'data-testid': 'run-detail', class: 'stack' },
+      h('div', { class: 'head' }, h('h1', null, runTitle(run)), badge(statusBadge(run.status), run.status === 'running')),
+      h('section', { class: 'card' },
+        h('div', { class: 'stats' },
+          stat('Kind', run.kind ?? dash), stat('Units', (run.units ?? []).join(', ') || dash),
+          stat('Started', formatStarted(run.started), run.started ? relativeTime(run.started) : null),
+          stat('Duration', formatDuration(run.status === 'running' && run.started ? Date.now() - Date.parse(run.started) : t.totals.durationMs), null, run.status === 'running' ? run.started : null),
+          stat('Tokens', formatTokens(tokensOf(t.totals))), stat('Est. cost (estimate)', formatCost(t.totals.cost)),
+          stat('Agents', String(t.totals.agents))),
+        t.totals.cost === null && t.totals.agents > 0 ? h('p', { class: 'small muted' }, 'Cost is unknown because at least one agent used a model without a price.') : null),
+      members.length ? section('Runs in this batch', table([['Status'], ['Run'], ['Started'], ['Duration', true], ['Est. cost', true], ['CI']], members.map((m) => runRow(m, false)))) : null,
+      section('Steps', t.steps.length ? h('ol', { class: 'steps' }, steps) : empty('No steps recorded yet.')),
+      section('Children', t.children.length
+        ? table([['Bead'], ['Model'], ['Wave', true], ['Duration', true], ['Tokens', true], ['Est. cost', true], ['Result'], ['Review'], ['Red before green']], children)
+        : empty('No child tasks recorded yet.')),
+      h('div', { class: 'grid-2' },
+        section('Reviews', reviewTr.length ? table([['Bead'], ['Round', true], ['Verdict'], ['Must fix', true]], reviewTr) : empty('No reviews yet.')),
+        section('Tests', t.tests.length ? table([['Scope'], ['Passed', true], ['Failed', true], ['Time', true]], testRows) : empty('No test results yet.'))),
+      h('div', { class: 'grid-2' },
+        section('Findings filed', findings.length ? h('ul', { class: 'list' }, findings.map((f) => h('li', { class: 'mono' }, f))) : empty('No findings.')),
+        section('CI', ci ? [ciB ? badge(ciB) : null, h('p', { class: 'small muted mono' }, ci.sha.slice(0, 7)), ciRuns.length ? h('ul', { class: 'list' }, ciLinks) : empty('No workflow runs found for this commit.')] : empty('Nothing pushed yet.')))));
+}
+
+const backLink = () => h('a', { class: 'back', href: '#/' }, '← All runs');
+
+async function loadDetail(id) {
+  try {
+    const d = await getJson(`/api/runs/${encodeURIComponent(id)}`);
+    state.details.set(id, d);
+    state.ci.set(id, d.ci ?? null);
+  } catch (e) { state.details.set(id, { error: e.message }); }
+  if (state.route.view === 'run' && state.route.id === id) renderDetail(id);
+}
+
+function errorState(message, retry) {
+  show(backLink(), h('div', { class: 'state', 'data-tone': 'bad', 'data-testid': 'error-state', role: 'alert' },
+    h('h2', null, 'Could not load'), h('p', null, message), h('button', { class: 'btn', type: 'button', onclick: null }, 'Retry')));
+  app.querySelector('button').addEventListener('click', retry);
+}
+
+/* ---------- Routing and live updates ---------- */
+function route() {
+  state.route = parseRoute(location.hash);
+  if (state.route.view === 'run') {
+    state.details.delete(state.route.id);
+    renderDetail(state.route.id);
+    loadDetail(state.route.id);
+    if (!state.runs) loadList();
+  } else {
+    renderList();
+    loadList();
+  }
+  window.scrollTo(0, 0);
+}
+
+let refreshTimer = null;
+function onRunChanged(id) {
+  clearTimeout(refreshTimer);
+  refreshTimer = setTimeout(() => {
+    state.ci.delete(id);
+    loadList();
+    if (state.route.view === 'run') loadDetail(state.route.id);
+  }, 150);
+}
+
+function connect() {
+  const es = new EventSource('/api/events');
+  let dropped = false;
+  es.addEventListener('open', () => {
+    liveEl.dataset.state = 'live'; liveEl.textContent = 'Live';
+    if (dropped) { dropped = false; onRunChanged(null); } // events missed while disconnected
+  });
+  es.addEventListener('error', () => { dropped = true; liveEl.dataset.state = 'offline'; liveEl.textContent = 'Reconnecting'; });
+  es.addEventListener('run-changed', (e) => {
+    try { onRunChanged(JSON.parse(e.data).id); } catch { onRunChanged(null); }
+  });
+}
+
+window.addEventListener('hashchange', route);
+// Keep relative times and running durations fresh.
+const refreshMs = Number(new URLSearchParams(location.search).get('refresh')) || 10_000;
+setInterval(() => {
+  if (state.route.view === 'list' && state.runs) renderList();
+  // Running detail: only the duration text ticks, the rest of the page (and focus) stays untouched.
+  for (const el of app.querySelectorAll('[data-live]')) el.textContent = formatDuration(Date.now() - Date.parse(el.dataset.live));
+}, refreshMs);
+route();
+connect();