wavework 0.0.0-stage → 0.1.0

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();

package/templates/dashboard/public/default-theme.css

@@ -0,0 +1,86 @@
+/* Neutral default theme: the design tokens app.css uses, light and dark. A project can override any of them
+   with its own tokens CSS (config dashboard.tokensFile), which is loaded after this file as /tokens.css. */
+:root {
+  color-scheme: light dark;
+  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --text-caption-size: 0.75rem;  --text-caption-leading: 1.3;  --text-caption-tracking: 0.01em;
+  --text-small-size: 0.8125rem;  --text-small-leading: 1.4;
+  --text-body-size: 0.9375rem;   --text-body-leading: 1.5;     --text-body-tracking: 0;
+  --text-title-size: 1.0625rem;  --text-title-leading: 1.3;    --text-title-tracking: -0.01em;
+  --text-heading-size: 1.5rem;   --text-heading-leading: 1.2;  --text-heading-tracking: -0.02em;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+
+  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
+  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 3rem;
+  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-pill: 999px;
+  --border-width: 1px; --border-width-thick: 2px;
+  --size-dot: 0.5rem;
+  --size-file-col-date: 9rem;
+  --control-height: 2.25rem;
+  --shell-bar-height: 3.25rem;
+  --page-width-wide: 72rem;
+  --content-narrow: 40rem;
+  --focus-offset: 2px;
+  --z-sticky: 10;
+  --safe-left: env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+
+  --duration-press: 80ms;
+  --duration-fast: 160ms;
+  --duration-pulse: 1.6s;
+  --duration-spin-calm: 1.2s;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --press-scale: 0.97;
+  --opacity-ghost: 0.45;
+  --blur-material: blur(16px) saturate(1.4);
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
+
+  --color-bg: #f7f7f8;
+  --color-surface: #ffffff;
+  --color-surface-sunken: #efeff1;
+  --color-surface-hover: #f1f1f3;
+  --color-material: rgb(247 247 248 / 0.8);
+  --color-border: #dcdce0;
+  --color-text: #1b1b1f;
+  --color-text-muted: #5a5a63;
+  --color-text-subtle: #8a8a94;
+  --color-accent: #3b5bdb;
+  --color-accent-hover: #3050c4;
+  --color-accent-soft: #e4e9fb;
+  --color-accent-text: #2f4ac2;
+  --color-on-accent: #ffffff;
+  --color-focus: #3b5bdb;
+  --color-ok: #1f7a3d;   --color-ok-soft: #e1f3e6;   --color-ok-solid: #2e9e55;
+  --color-warn: #8a5a00; --color-warn-soft: #fbefd5; --color-warn-solid: #d9930d;
+  --color-bad: #b3261e;  --color-bad-soft: #fbe4e2;  --color-bad-solid: #d64034;
+  --color-info: #1f5f99; --color-info-soft: #deedfa; --color-info-solid: #2f84cf;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+    --color-bg: #121214;
+    --color-surface: #1b1b1f;
+    --color-surface-sunken: #161619;
+    --color-surface-hover: #232328;
+    --color-material: rgb(18 18 20 / 0.8);
+    --color-border: #2f2f36;
+    --color-text: #ececf0;
+    --color-text-muted: #a4a4ae;
+    --color-text-subtle: #70707a;
+    --color-accent: #7b93f0;
+    --color-accent-hover: #93a7f5;
+    --color-accent-soft: #232a4a;
+    --color-accent-text: #9db0f6;
+    --color-on-accent: #101018;
+    --color-focus: #7b93f0;
+    --color-ok: #6fcf8f;   --color-ok-soft: #16301f;   --color-ok-solid: #3fb866;
+    --color-warn: #f0bd5a; --color-warn-soft: #3a2c0f; --color-warn-solid: #e0a52c;
+    --color-bad: #f2877f;  --color-bad-soft: #3c1a18;  --color-bad-solid: #e5574b;
+    --color-info: #7ab8ee; --color-info-soft: #162b3e; --color-info-solid: #4a9be0;
+  }
+}

package/templates/dashboard/public/format.mjs

@@ -0,0 +1,138 @@
+// Pure helpers for the dashboard UI (no DOM), unit-tested in test/ui.test.mjs.
+const DASH = '—';
+const isNum = (v) => typeof v === 'number' && Number.isFinite(v);
+
+export function formatDuration(ms) {
+  if (!isNum(ms) || ms < 0) return DASH;
+  if (ms < 1000) return '<1s';
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+/** Cost is an estimate (prefix "~"). Unknown (null) is a dash, never $0.00. */
+export function formatCost(cost) {
+  if (!isNum(cost)) return DASH;
+  if (cost > 0 && cost < 0.005) return '<$0.01';
+  return `~$${cost.toFixed(2)}`;
+}
+
+export function formatTokens(n) {
+  if (!isNum(n)) return DASH;
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1).replace(/\.0$/, '')}k`;
+  return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+}
+
+/** Sum of all token kinds of an agents/totals object. */
+export function totalTokens(t) {
+  if (!t) return null;
+  return ['tokensIn', 'tokensOut', 'tokensCacheRead', 'tokensCacheWrite'].reduce((s, k) => s + (isNum(t[k]) ? t[k] : 0), 0);
+}
+
+const STATUS = {
+  running: { label: 'Running', tone: 'info' },
+  done: { label: 'Done', tone: 'ok' },
+  blocked: { label: 'Blocked', tone: 'warn' },
+  failed: { label: 'Failed', tone: 'bad' },
+};
+export function statusBadge(status) {
+  return STATUS[status] ?? { label: String(status ?? DASH), tone: 'neutral' };
+}
+
+const CI = {
+  success: { label: 'CI passed', tone: 'ok' },
+  failure: { label: 'CI failed', tone: 'bad' },
+  pending: { label: 'CI running', tone: 'info' },
+  none: { label: 'No CI', tone: 'neutral' },
+  unknown: { label: 'CI unknown', tone: 'neutral' },
+};
+export function ciBadge(ci) {
+  if (!ci) return null;
+  return CI[ci.state] ?? CI.unknown;
+}
+
+/** Returns the url only when it is http(s); anything else (javascript:, data:, relative) is null. */
+export function safeHref(url) {
+  if (typeof url !== 'string') return null;
+  try {
+    const u = new URL(url);
+    return u.protocol === 'http:' || u.protocol === 'https:' ? url : null;
+  } catch { return null; }
+}
+
+/** Running runs first, then newest started first. Returns a new array. */
+export function sortRuns(runs) {
+  const rank = (r) => (r.status === 'running' ? 0 : 1);
+  return [...runs].sort((a, b) => rank(a) - rank(b) || (b.started ?? '').localeCompare(a.started ?? ''));
+}
+
+export function parseRoute(hash) {
+  const m = /^#\/runs\/(.+)$/.exec(hash ?? '');
+  if (!m) return { view: 'list' };
+  try { return { view: 'run', id: decodeURIComponent(m[1]) }; } catch { return { view: 'list' }; }
+}
+
+export function relativeTime(iso, now = Date.now()) {
+  const t = Date.parse(iso ?? '');
+  if (!Number.isFinite(t)) return DASH;
+  const s = Math.max(0, Math.round((now - t) / 1000));
+  if (s < 30) return 'just now';
+  if (s < 3600) return `${Math.max(1, Math.round(s / 60))}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+/** Latest verdict and highest round per bead, from raw review events that carry a bead (the skill may record only the final round). */
+export function reviewsByBead(events) {
+  const map = new Map();
+  for (const e of events ?? []) {
+    if (e.type !== 'review' || !e.bead) continue;
+    const prev = map.get(e.bead);
+    const round = isNum(e.round) ? e.round : 0;
+    if (!prev || round >= prev.round) map.set(e.bead, { verdict: e.verdict ?? null, round });
+  }
+  return map;
+}
+
+/** Review events (newest first) with their bead, for the reviews table. */
+export function reviewRows(events) {
+  return (events ?? []).filter((e) => e.type === 'review')
+    .map((e) => ({ ts: e.ts, bead: e.bead ?? null, round: e.round ?? null, verdict: e.verdict ?? null, mustFix: e.mustFix ?? 0 }))
+    .reverse();
+}
+
+const RESULT = { committed: 'ok', ok: 'ok', done: 'ok', blocked: 'warn', failed: 'bad', running: 'info' };
+export function resultBadge(result) {
+  if (!result) return null;
+  return { label: String(result), tone: RESULT[result] ?? 'neutral' };
+}
+
+/** Total tokens, or null when no agent was recorded (unknown, not 0). */
+export function tokensOf(totals) {
+  if (!totals || !totals.agents) return null;
+  return totalTokens(totals);
+}
+
+/** Compact start time like "13 Nov, 10:44". */
+export function formatStarted(iso, locale = undefined, timeZone = undefined) {
+  const t = Date.parse(iso ?? '');
+  if (!Number.isFinite(t)) return DASH;
+  const d = new Date(t);
+  const opts = { timeZone };
+  const day = new Intl.DateTimeFormat(locale, { ...opts, day: 'numeric', month: 'short' }).format(d);
+  const time = new Intl.DateTimeFormat(locale, { ...opts, hour: '2-digit', minute: '2-digit', hour12: false }).format(d);
+  return `${day}, ${time}`;
+}
+
+export function stepLabel({ step, wave }) {
+  const name = String(step ?? DASH).replace(/^./, (c) => c.toUpperCase());
+  if (step === 'wave') return wave != null ? `${name} ${wave}` : name;
+  return wave != null ? `${name} · wave ${wave}` : name;
+}
+
+export function findingsOf(events) {
+  return (events ?? []).filter((e) => e.type === 'finding' && e.bead).map((e) => e.bead);
+}

package/templates/dashboard/public/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
+  <title>Pipeline dashboard</title>
+  <link rel="stylesheet" href="/default-theme.css">
+  <link rel="stylesheet" href="/tokens.css">
+  <link rel="stylesheet" href="/app.css">
+</head>
+<body>
+  <header class="topbar">
+    <a class="brand" href="#/">Pipeline</a>
+    <span class="live" id="live" data-state="connecting" role="status">Connecting</span>
+  </header>
+  <main id="app" class="page"></main>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>