@giamme/forge 0.11.1 → 0.12.0

package/ui/forge_ui/static/scene3d.js

@@ -289,7 +289,11 @@ export async function createStage(host, cb = {}) {
   function finishInfo(id) {
     const F = st.plan && st.plan.finish, run = st.run; if (!F) return {};
     if (id === 'f:integration') return { title: 'INTEGRATION', sub: `${F.integration.merged}/${F.integration.total} merged`, status: F.integration.status, line: F.integration.accepted ? 'at ' + String(F.integration.accepted).slice(0, 10) : 'into forge/' + (run.run_id || '…') + '-integration' };
-    if (id === 'f:verification') return { title: 'VERIFICATION', sub: F.verification.command || 'no command recorded', status: F.verification.status, line: F.verification.runs ? `${F.verification.runs} run${F.verification.runs > 1 ? 's' : ''}` : 'not run yet' };
+    if (id === 'f:verification') {
+      const V = F.verification, n = V.lanes.length, plural = (k, w) => `${k} ${w}${k === 1 ? '' : 's'}`;
+      const line = V.mode === 'lanes' ? `${plural(n, 'lane')} · ${plural(V.reruns, 'rerun')}` : V.runs ? plural(V.runs, 'run') : 'not run yet';
+      return { title: 'VERIFICATION', sub: V.command || (V.mode === 'lanes' ? V.lanes.map(l => l.name).join(' · ') : 'no command recorded'), status: V.status, line };
+    }
     const status = finishStatus(id, { status: F.final.status });
     const src = status === 'OUTDATED' && st.replay !== null ? (RM.reviewAt(run, st.replay) || F.final) : F.final;
     const f = F.final.findings;
@@ -313,7 +317,7 @@ export async function createStage(host, cb = {}) {
     }, 'cover', { x: x + 12, y: y + 8, z: h });
     if (m.id === 'f:final') { leds(el, 4, x + 18, y + d - 13, h + .16, { step: 11, s: 3 }); }
     else if (m.id === 'f:integration') leds(el, Math.min(40, list(st.run.tasks).length), x + 17, y + d - 13, h + .16, { step: 8, s: 2.4, perRow: 22 });
-    else leds(el, Math.max(1, Math.min(12, list(st.run.verification && st.run.verification.runs).length)), x + 17, y + d - 13, h + .16, { step: 9, s: 2.8 });
+    else leds(el, Math.max(1, Math.min(12, RM.verifyLeds(st.run).length)), x + 17, y + d - 13, h + .16, { step: 9, s: 2.8 });
     finishLeds(el);
     display(el, e => finishInfo(e.id).line || '', { w: w - 24, x: x + 12, y: y + d, z: h - 8 });
     halo(el);
@@ -326,7 +330,7 @@ export async function createStage(host, cb = {}) {
   function finishLeds(el) {
     if (el.id === 'f:final') { const f = finishInfo(el.id).findings || {}; setLeds(el, ['P0', 'P1', 'P2', 'P3'].map(s => f[s] ? E.sevColor(s) : null)); }
     else if (el.id === 'f:integration') setLeds(el, list(st.run.tasks).map(t => { const s = taskStatus(t); return s === 'MERGED' || s === 'ACCEPTED' ? s : null; }));
-    else setLeds(el, list(st.run.verification && st.run.verification.runs).map(r => r.exit === 0 ? 'PASS' : 'FAIL'));
+    else setLeds(el, RM.verifyLeds(st.run, st.replay !== null ? st.replayState : null));
   }
   function buildPlan(g) {
     const P = RM.planModel(st.run); st.plan = P;
@@ -512,7 +516,7 @@ export async function createStage(host, cb = {}) {
     const lw = Math.max(10, it.w - 10);
     el.roof = label(el, lw, it.d - 14, 4, (cx, s, C, e) => {
       const item = e.data.item, sel = e.cur.sel > .5;
-      const title = item.kind === 'verification' ? 'verification' : item.kind === 'review' ? 'final review' : item.task + (item.attempt ? ' · A' + item.attempt : '');
+      const title = item.vlane ? 'verify · ' + item.vlane : item.kind === 'verification' ? 'verification' : item.kind === 'review' ? 'final review' : item.task + (item.attempt ? ' · A' + item.attempt : '');
       const f = Math.min(11, Math.max(4, (lw - 4) / Math.max(4, title.length * E.CW)));
       E.font(cx, f, s, 600); cx.fillStyle = sel ? C.accHi : item.ghost ? C.ink : C.inkHi; cx.fillText(E.ellipsis(title, Math.floor((lw - 2) / (f * E.CW))), 1 * s, (f + 1) * s);
       // segments: when the dwarf and the review ran inside this attempt
@@ -1135,7 +1139,7 @@ export async function createStage(host, cb = {}) {
     if (el.kind === 'finish') return { kind: el.id === 'f:final' ? 'final' : el.id === 'f:verification' ? 'verification' : 'integration' };
     const it = el.data.item; if (!it) return null;
     if (it.kind === 'review') return { kind: 'final', name: it.review };
-    if (it.kind === 'verification') return { kind: 'execution', task: null, exec: it.id };
+    if (it.kind === 'verification') return it.vlane || it.approx ? { kind: 'verification' } : { kind: 'execution', task: null, exec: it.id };
     if (it.ghost || String(it.id).startsWith('span:')) return { kind: 'task', id: it.task };
     return { kind: 'execution', task: it.task, id: it.task, exec: it.id };
   }

package/ui/forge_ui/static/style.css

@@ -99,6 +99,9 @@
 .st-fail, .st-error, .st-conflict, .st-infra, .st-timeout, .st-blocked { --st: var(--lamp-red); --st-lit: var(--lit-red); }
 [class^="st-"], [class*=" st-"] { --st-fill: var(--st); --st-ring: var(--lamp-edge); }
 .st-accepted, .st-nochanges, .st-interrupted, .st-infra, .st-timeout, .st-blocked, .st-outdated { --st-fill: transparent; --st-ring: var(--st); }
+/* verification lanes: flaky passed on a rerun (amber, hollow), known passed with only baseline failures (green, hollow) */
+.st-flaky { --st: var(--lamp-amber); --st-lit: var(--lit-amber); --st-fill: transparent; --st-ring: var(--st); }
+.st-known { --st: var(--lamp-green); --st-lit: var(--lit-green); --st-fill: transparent; --st-ring: var(--st); }
 /* review severity is a shape (P0 spike, P1 diamond, P2 cone, P3 pin) on a ramp of its own, never a status lamp */
 .sev-P0 { --sev: var(--sev-p0); --sev-shape: polygon(50% 0, 100% 100%, 0 100%); }
 .sev-P1 { --sev: var(--sev-p1); --sev-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@@ -563,6 +566,51 @@ summary:hover { color: var(--ink-2); }
 ul.plain { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; font-size: var(--t-sm); }
 ul.plain li.current { font-weight: 650; }
 pre.cmd { max-height: none; }
+/* the verification inspector (verifyview.js): live state, failing tests, lanes and their logs */
+.vfy-num { font-variant-numeric: tabular-nums; }
+.vfy-live { margin: var(--s-3) 0 0; padding: var(--s-3); border-radius: var(--r-key); background: var(--module-2); box-shadow: inset 0 0 0 1px var(--rule); }
+.vfy-now { margin: 0; font-size: var(--t-sm); }
+.vfy-step { font-weight: 600; }
+.vfy-last { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vfy-idle { margin: var(--s-2) 0 0; padding: 2px var(--s-2); border-radius: var(--r-small); background: var(--warn-wash); font-size: var(--t-xs); width: fit-content; }
+.vfy-group { margin: var(--s-3) 0 0; }
+.vfy-group-head { display: flex; gap: var(--s-2); align-items: baseline; margin: 0 0 var(--s-1); font-size: var(--t-sm); }
+.vfy-tests { gap: var(--s-2); }
+.vfy-test { padding: var(--s-2) var(--s-3); border-radius: var(--r-key); background: var(--module-2); box-shadow: inset 3px 0 0 var(--lamp-red); }
+.vfy-test.vfy-known { box-shadow: inset 3px 0 0 var(--lamp-off); }
+.vfy-test-head { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
+.vfy-test-name { overflow-wrap: anywhere; font-size: var(--t-xs); }
+.vfy-badge { padding: 0 6px; border-radius: var(--r-small); font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
+.vfy-badge-new { background: var(--lamp-red); color: var(--plate-ink); }
+.vfy-badge-known { box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--muted); }
+.vfy-message { margin: var(--s-1) 0 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
+.vfy-excerpt summary { cursor: pointer; font-size: var(--t-xs); color: var(--muted); }
+/* a link-like button: none of the key's plate type, face or press */
+.vfy-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
+  font-family: var(--font-ui); font-weight: 400; font-size: var(--t-xs); letter-spacing: normal; text-transform: none; line-height: inherit; white-space: normal; text-align: left; }
+.vfy-link.mono { font-family: var(--mono); }
+.vfy-link:hover:not(:disabled) { background: none; color: var(--ink-2); }
+.vfy-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-2); }
+.vfy-section-head h3 { margin: 0; }
+.vfy-nowrap { white-space: nowrap; }
+.vfy-table-wrap { overflow-x: auto; }
+.vfy-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
+.vfy-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--t-xs); padding: 0 var(--s-2) var(--s-1) 0; }
+.vfy-table td { padding: var(--s-1) var(--s-2) var(--s-1) 0; border-top: 1px solid var(--rule); vertical-align: top; }
+.vfy-table tr.vfy-followed td { background: var(--module-2); }
+.vfy-lane .vfy-link { font-size: var(--t-sm); }
+.vfy-label { margin-left: var(--s-1); font-size: var(--t-xs); }
+.vfy-lane-now { display: grid; gap: 2px; margin-top: 2px; max-width: 28ch; }
+.vfy-lane-now .vfy-last { margin: 0; }
+.vfy-log { display: grid; padding: var(--s-2) 0; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; white-space: pre; overflow: auto; }
+.vfy-line { display: flex; gap: var(--s-3); padding: 0 var(--s-3); }
+.vfy-line.vfy-hl { background: var(--warn-wash); color: var(--warn-ink); }
+.vfy-ln { flex: none; min-width: 5ch; text-align: right; color: var(--glass-dim); font-variant-numeric: tabular-nums; user-select: none; }
+.vfy-line.vfy-hl .vfy-ln { color: inherit; }
+.vfy-lt { white-space: pre-wrap; overflow-wrap: anywhere; }
+.vfy-note { font-size: var(--t-xs); margin: var(--s-1) 0 0; }
+.vfy-summary, .vfy-endstep, .vfy-mutated { margin: var(--s-3) 0 0; font-size: var(--t-sm); }
+.vfy-lanes + .fields, .vfy-tail + .fields { margin-top: var(--s-4); }
 .phase-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0; background: var(--module-2); }
 .phase { min-width: 2px; }
 .phase-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-xs); color: var(--muted); }
@@ -624,6 +672,17 @@ p.ctl-why::before { content: ''; width: 7px; height: 7px; border-radius: 50%; ba
 .ctl-pin-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
 p.ctl-stop { display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px var(--s-2); border-radius: var(--r-small); background: var(--warn-wash); color: var(--warn-ink); font-weight: 600; }
 .ctl-log { margin-top: var(--s-1); }
+/* the run's keys (drain, resume, stop), its drained or stopping state, pauses and a queued retry's answer */
+.ctl-keys { display: flex; flex-wrap: wrap; gap: var(--s-2); }
+.ctl-state { font-variant-numeric: tabular-nums; }
+.ctl-stopping, .ctl-drained { background: var(--warn-wash); color: var(--warn-ink); border-color: transparent; }
+.ctl-pauses { display: grid; gap: var(--s-1); }
+.ctl-pause-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); }
+.ctl-pause { display: flex; align-items: baseline; gap: 7px; }
+.ctl-pause-text { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.ctl-exhausted .ctl-pause-text { color: var(--warn-ink); font-weight: 600; }
+p.ctl-request { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-sm); }
+p.ctl-request-refused { color: var(--warn-ink); font-weight: 600; }
 .ctl-changes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); }
 .ctl-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
 .ctl-what { color: var(--ink); font-weight: 600; }
@@ -702,6 +761,7 @@ th:hover .th-sort, .th-sort.on { color: var(--ink); }
 .gt-item.gt-sel .gt-box { stroke: var(--route); stroke-width: 2.5; }
 .gt-item.gt-crit .gt-box { stroke-width: 2.4; }
 .gt-ghost .gt-box { fill-opacity: .04; stroke-dasharray: 4 3; }
+.gt-item.gt-approx .gt-box { stroke-dasharray: 2 2; }   /* a verification run placed from durations, not from its own times */
 .gt-future { opacity: .3; }
 .gt-seg { fill: var(--st, var(--lamp-off)); }
 .gt-seg.gt-dwarf { fill-opacity: .55; }

package/ui/forge_ui/static/verifyview.js

@@ -0,0 +1,324 @@
+/* forge-ui verification view: what the verification runs now, its lanes, and which tests failed
+   (window.ForgeVerify, and a CommonJS module under node:test). panel.js's verification inspector delegates here.
+   The pure helpers build a view model from RunDetail.verification (ui/docs/api.md) and are tested in
+   ui/tests/js/verifyview.test.js; render(host, ctx) is thin DOM over them. Test names, messages, excerpts and log
+   lines are untrusted: they only ever enter the page as text.
+   ctx = { run, now (epoch seconds), fetchJSON(path), rerender(), hash(sel), onSelect(sel) } */
+(function (root, factory) {
+  'use strict';
+  const api = factory(root);
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else root.ForgeVerify = api;
+})(typeof self !== 'undefined' ? self : this, function (root) {
+  'use strict';
+
+  const IDLE_WARN_S = 300;                 // silence past this is flagged
+  const CONTEXT_LINES = 10;                // lines shown above an opened log line
+  const list = v => Array.isArray(v) ? v : [];
+  const num = v => typeof v === 'number' && Number.isFinite(v) ? v : null;
+  const STEP = /^::forge step name=(\S+) state=(start|end)(?: exit=(-?\d+))?$/;
+  const ANSI = /\x1b\[[0-?]*[ -/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b[@-Z\\-_]/g;
+  const LANE_CHIP = { waiting: 'pending', running: 'running', pass: 'pass', fail: 'fail', flaky: 'flaky', known: 'known',
+    skipped: 'none', interrupted: 'interrupted' };
+
+  /* ---------- pure ---------- */
+  function dur(s) {
+    s = num(s); if (s === null) return '—';
+    s = Math.max(0, Math.round(s));
+    if (s < 60) return s + 's';
+    if (s < 3600) return Math.floor(s / 60) + 'm' + String(s % 60).padStart(2, '0') + 's';
+    return Math.floor(s / 3600) + 'h' + String(Math.floor(s % 3600 / 60)).padStart(2, '0') + 'm';
+  }
+  const since = (start, now) => num(start) !== null && num(now) !== null ? Math.max(0, now - start) : null;
+  // "no output for N min" past five minutes of silence, else null
+  function idleWarning(idle) {
+    idle = num(idle);
+    return idle !== null && idle > IDLE_WARN_S ? `no output for ${Math.floor(idle / 60)} min` : null;
+  }
+  // The last step a log started and no later line ended (steps nest), or null.
+  function openStep(text) {
+    const open = [];
+    for (const raw of String(text || '').split('\n')) {
+      const m = STEP.exec(raw.replace(ANSI, '').trim());
+      if (!m) continue;
+      if (m[2] === 'start') open.push(m[1]);
+      else { const i = open.lastIndexOf(m[1]); if (i >= 0) open.splice(i, 1); }
+    }
+    return open.length ? open[open.length - 1] : null;
+  }
+  function countsText(tests) {
+    if (!tests || typeof tests !== 'object') return null;
+    const n = k => num(tests[k]) || 0;
+    const parts = [`${n('pass')} passed`, `${n('fail') + n('error')} failed`];
+    if (n('skip')) parts.push(`${n('skip')} skipped`);
+    return parts.join(' · ');
+  }
+  // "rerun 1 of 2" once a lane ran again (of its own budget, when the lane set one)
+  function runsText(lane) {
+    const reruns = list(lane && lane.runs).filter(r => r && r.kind === 'rerun').length;
+    if (!reruns) return '';
+    return `rerun ${reruns}${num(lane.retries) !== null ? ' of ' + lane.retries : ''}`;
+  }
+  function laneRow(lane, now) {
+    const running = lane.state === 'running';
+    const took = running && num(lane.started) !== null && num(now) !== null ? since(lane.started, now) : num(lane.duration_s);
+    return {
+      name: String(lane.name || ''), state: lane.state || 'unknown', chip: LANE_CHIP[lane.state] || 'unknown',
+      time: took === null ? '' : dur(took), running,
+      runs: runsText(lane), counts: countsText(lane.tests), hasTests: !!(lane.tests && typeof lane.tests === 'object'),
+      step: running && lane.step && lane.step.name ? lane.step.name : null,
+      last_line: running && lane.last_line ? String(lane.last_line) : null,
+      idle: running ? idleWarning(lane.idle_s) : null,
+      labels: [lane.first ? 'first' : null, lane.group ? 'group ' + lane.group : null].filter(Boolean),
+    };
+  }
+  // failing tests in lane order: [{lane, entries: [{name, badge: new|known, message, excerpt, log_line}], fresh, known}]
+  function groupFailing(failing) {
+    const groups = new Map();
+    for (const f of list(failing)) {
+      if (!f || typeof f !== 'object') continue;
+      const lane = String(f.lane || '');
+      if (!groups.has(lane)) groups.set(lane, { lane, entries: [], fresh: 0, known: 0 });
+      const g = groups.get(lane), known = f.known === true;
+      g.entries.push({ name: String(f.name || '?'), badge: known ? 'known' : 'new', message: f.message || '', excerpt: f.excerpt || '',
+        log_line: num(f.log_line) !== null && f.log_line > 0 ? f.log_line : null, suite: f.suite || null, file: f.file || null });
+      if (known) g.known++; else g.fresh++;
+    }
+    return Array.from(groups.values());
+  }
+  // The lane whose log the live tail follows: the chosen one if it still exists, else the running lane that printed
+  // last, else the first running, failed or listed lane. null in single mode.
+  function tailLane(v, chosen) {
+    const lanes = list(v && v.lanes);
+    if (!lanes.length) return null;
+    if (chosen && lanes.some(l => l.name === chosen)) return chosen;
+    const running = lanes.filter(l => l.state === 'running');
+    const printed = running.filter(l => num(l.last_output_at) !== null).sort((a, b) => b.last_output_at - a.last_output_at);
+    const pick = printed[0] || running[0] || lanes.find(l => l.state === 'fail') || lanes[0];
+    return pick.name;
+  }
+  function model(v, now) {
+    if (!v) return null;
+    const running = v.state === 'running', status = String(v.status || '').toUpperCase();
+    const lanes = list(v.lanes).filter(l => l && typeof l === 'object').map(l => laneRow(l, now));
+    const failed = !running && (status === 'FAIL' || lanes.some(l => l.state === 'fail'));
+    const live = running && v.live ? {
+      elapsed: dur(since(v.live.started, now)),
+      step: v.live.step && v.live.step.name ? v.live.step.name : null,
+      stepElapsed: v.live.step && num(v.live.step.started) !== null ? dur(since(v.live.step.started, now)) : null,
+      last_line: v.live.last_line || null,
+      idle: idleWarning(v.live.idle_s),
+    } : null;
+    return {
+      running, failed, passed: !running && !failed && status === 'PASS', mode: v.mode === 'lanes' ? 'lanes' : 'single',
+      live, lanes, groups: groupFailing(v.failing), mutated: v.mutated === true,
+      reportless: failed ? lanes.filter(l => l.state === 'fail' && !l.hasTests).map(l => l.name) : [],
+      flaky: lanes.filter(l => l.state === 'flaky').map(l => l.name),
+      known: lanes.filter(l => l.state === 'known').map(l => l.name),
+      // a single command that ended: the step it was in, from its output's step markers
+      endStep: !running && v.mode !== 'lanes' && v.state ? openStep(v.log_tail) : null,
+    };
+  }
+  const runsBase = key => `/api/runs/${encodeURIComponent(key)}/verification`;
+  // the log endpoint of the single command (lane null; RETRY for its rerun's log), a lane, or one run k of a lane
+  const RETRY = { retry: true };
+  function logPath(key, lane, k) {
+    if (lane === RETRY) return runsBase(key) + '/retry/log';
+    if (!lane) return runsBase(key) + '/log';
+    return `${runsBase(key)}/lanes/${encodeURIComponent(lane)}${num(k) !== null ? '/runs/' + k : ''}/log`;
+  }
+  // the range that shows `line` with a few lines above it
+  const linesPath = (key, lane, line) => `${logPath(key, lane)}/lines/${Math.max(1, line - CONTEXT_LINES)}`;
+  // lines of a tail as [{n, text}], numbered from tail_first_line when the server knew it
+  function tailLines(body) {
+    const text = String(body && body.tail || ''), first = num(body && body.tail_first_line);
+    const lines = text.endsWith('\n') ? text.slice(0, -1).split('\n') : text.split('\n');
+    return (text ? lines : []).map((t, i) => ({ n: first === null ? null : first + i, text: t }));
+  }
+
+  /* ---------- DOM ---------- */
+  const views = new Map();                 // run key → { lane (followed by the tail), open: {lane, line} | null }
+  const cache = new Map();                 // path → { data, error, pending, fresh }
+  function el(tag, text, className) {
+    const node = document.createElement(tag);
+    if (text !== undefined && text !== null) node.textContent = String(text);
+    if (className) node.className = className;
+    return node;
+  }
+  const chip = (text, cls) => el('span', text || '—', 'chip st-' + cls);
+  function section(parent, title, cls) {
+    const s = el('section', undefined, 'insp-section' + (cls ? ' ' + cls : ''));
+    s.append(el('h3', title)); parent.append(s); return s;
+  }
+  function button(text, onClick, cls) {
+    const b = el('button', text, cls || 'vfy-link'); b.type = 'button';
+    b.addEventListener('click', onClick); return b;
+  }
+  // a fetch that lands once per `fresh` token and re-renders the view when it does
+  function load(ctx, path, fresh) {
+    const c = cache.get(path);
+    if (c && (c.fresh === fresh || c.pending)) return c;
+    const entry = { pending: true, fresh, data: c ? c.data : null, error: null };
+    cache.set(path, entry);
+    ctx.fetchJSON(path).then(data => { entry.data = data; entry.error = null; }, err => { entry.error = err; })
+      .finally(() => { entry.pending = false; ctx.rerender(); });
+    return entry;
+  }
+  function logBlock(parent, rows, mark, scrollKey) {
+    const pre = el('pre', undefined, 'vfy-log'); pre.dataset.scroll = scrollKey;
+    for (const r of rows) {
+      const line = el('span', undefined, 'vfy-line' + (mark !== null && r.n === mark ? ' vfy-hl' : ''));
+      if (r.n !== null) line.append(el('span', r.n, 'vfy-ln'));
+      line.append(el('span', r.text, 'vfy-lt'));
+      pre.append(line);
+    }
+    if (!rows.length) pre.append(el('span', '(empty)', 'vfy-lt'));
+    parent.append(pre);
+    return pre;
+  }
+  function tail(parent, ctx, lane, fresh, scrollKey) {
+    const entry = load(ctx, logPath(ctx.run.key, lane), fresh);
+    if (!entry.data) {
+      const why = !entry.error ? 'Reading the log…' : entry.error.snapshot ? 'This export holds no logs.'
+        : entry.error.status === 404 ? 'No log to show yet.' : 'Could not read the log.';
+      parent.append(el('p', why, 'muted'));
+      return;
+    }
+    if (entry.data.truncated) parent.append(el('p', `the last ${Math.round(String(entry.data.tail || '').length / 1024)} KB`, 'muted vfy-note'));
+    logBlock(parent, tailLines(entry.data), null, scrollKey);
+  }
+  function openedLog(parent, ctx, open) {
+    const s = section(parent, `Log of ${open.lane} at line ${open.line}`, 'vfy-opened');
+    const head = el('div', undefined, 'vfy-section-head');
+    head.append(s.firstChild, button('Close the log', () => { views.get(ctx.run.key).open = null; ctx.rerender(); }, 'vfy-close'));
+    s.prepend(head);
+    const entry = load(ctx, linesPath(ctx.run.key, open.lane, open.line), 'once');
+    if (entry.error) {
+      // an export holds no line ranges: the tail, with the line marked when it is in it
+      const back = load(ctx, logPath(ctx.run.key, open.lane), 'once');
+      if (!back.data) { s.append(el('p', back.error ? 'This log is not available here.' : 'Reading the log…', 'muted')); return; }
+      const rows = tailLines(back.data);
+      if (!rows.some(r => r.n === open.line)) s.append(el('p', `Line ${open.line} is not in this export; this is the end of the log.`, 'muted vfy-note'));
+      reveal(open, logBlock(s, rows, open.line, 'vfy-opened-log'));
+      return;
+    }
+    if (!entry.data) { s.append(el('p', 'Reading the log…', 'muted')); return; }
+    const first = num(entry.data.first_line) || 1;
+    const pre = logBlock(s, list(entry.data.lines).map((t, i) => ({ n: first + i, text: t })), open.line, 'vfy-opened-log');
+    if (entry.data.truncated) s.append(el('p', 'The log goes on past these lines.', 'muted vfy-note'));
+    reveal(open, pre);
+  }
+  // Bring the marked line into view once, after the inspector put its own scroll back.
+  function reveal(open, pre) {
+    if (open.revealed || !pre.querySelector('.vfy-hl')) return;
+    open.revealed = true;
+    setTimeout(() => { if (pre.isConnected) pre.querySelector('.vfy-hl')?.scrollIntoView({ block: 'center' }); }, 0);
+  }
+  function liveBlock(parent, m) {
+    const box = el('div', undefined, 'vfy-live');
+    const row = el('p', undefined, 'vfy-now');
+    row.append(el('span', 'running for ', 'muted'), el('span', m.live.elapsed, 'vfy-num'));
+    if (m.live.step) {
+      row.append(el('span', ' · step ', 'muted'), el('span', m.live.step, 'mono vfy-step'));
+      if (m.live.stepElapsed) row.append(el('span', ' for ', 'muted'), el('span', m.live.stepElapsed, 'vfy-num'));
+    }
+    box.append(row);
+    if (m.live.last_line) box.append(el('p', m.live.last_line, 'mono vfy-last'));
+    if (m.live.idle) box.append(el('p', m.live.idle, 'warn vfy-idle'));
+    parent.append(box);
+  }
+  function failingBlock(parent, ctx, m, view) {
+    const total = m.groups.reduce((n, g) => n + g.entries.length, 0);
+    const s = section(parent, `Failing tests (${total})`, 'vfy-failing');
+    for (const g of m.groups) {
+      const box = el('div', undefined, 'vfy-group');
+      const h = el('h4', undefined, 'vfy-group-head');
+      h.append(el('span', g.lane || 'the command', 'mono'), el('span', [g.fresh ? `${g.fresh} new` : '', g.known ? `${g.known} known` : ''].filter(Boolean).join(' · '), 'muted vfy-num'));
+      box.append(h);
+      const ul = el('ul', undefined, 'plain vfy-tests');
+      for (const e of g.entries) {
+        const li = el('li', undefined, 'vfy-test vfy-' + e.badge);
+        const top = el('div', undefined, 'vfy-test-head');
+        top.append(el('span', e.badge, 'vfy-badge vfy-badge-' + e.badge), el('span', e.name, 'mono vfy-test-name'));
+        if (e.log_line !== null && g.lane) {
+          top.append(button(`open in log (line ${e.log_line})`, () => { view.open = { lane: g.lane, line: e.log_line }; ctx.rerender(); }));
+        }
+        li.append(top);
+        if (e.message) li.append(el('p', e.message, 'vfy-message'));
+        if (e.excerpt) {
+          const d = el('details', undefined, 'vfy-excerpt'); d.dataset.keep = `vfy-${g.lane}-${e.name}`;
+          d.append(el('summary', 'excerpt'), el('pre', e.excerpt));
+          li.append(d);
+        }
+        ul.append(li);
+      }
+      box.append(ul);
+      s.append(box);
+    }
+    return s;
+  }
+  function lanesTable(parent, ctx, m, view, followed) {
+    const s = section(parent, `Lanes (${m.lanes.length})`, 'vfy-lanes');
+    const wrap = el('div', undefined, 'vfy-table-wrap'); wrap.dataset.scroll = 'vfy-lanes';
+    const table = el('table', undefined, 'vfy-table');
+    const head = el('tr');
+    for (const h of ['Lane', 'State', 'Time', 'Runs', 'Tests']) head.append(el('th', h));
+    const thead = el('thead'); thead.append(head);
+    const body = el('tbody');
+    for (const l of m.lanes) {
+      const tr = el('tr', undefined, l.name === followed ? 'vfy-followed' : '');
+      const name = el('td', undefined, 'vfy-lane');
+      name.append(button(l.name, () => { view.lane = l.name; ctx.rerender(); }, 'vfy-link mono'));
+      for (const label of l.labels) name.append(el('span', label, 'plate vfy-label'));
+      if (l.step || l.last_line) {
+        const now = el('div', undefined, 'vfy-lane-now');
+        if (l.step) now.append(el('span', 'step ' + l.step, 'mono vfy-step'));
+        if (l.last_line) now.append(el('span', l.last_line, 'mono vfy-last'));
+        name.append(now);
+      }
+      if (l.idle) name.append(el('div', l.idle, 'warn vfy-idle'));
+      const state = el('td'); state.append(chip(l.state, l.chip));
+      tr.append(name, state, el('td', l.time, 'vfy-num vfy-nowrap'), el('td', l.runs, 'vfy-num vfy-nowrap'), el('td', l.counts || '', 'vfy-num'));
+      body.append(tr);
+    }
+    table.append(thead, body); wrap.append(table); s.append(wrap);
+  }
+  function render(host, ctx) {
+    const run = ctx.run, v = run.verification, m = model(v, num(ctx.now) !== null ? ctx.now : Date.now() / 1000);
+    if (!m) return;
+    if (!views.has(run.key)) views.set(run.key, { lane: null, open: null });
+    const view = views.get(run.key);
+    // logs are read again when the run's files moved: every poll while the verification prints
+    const fresh = `${run.updated}|${v.live ? v.live.last_output_at : ''}`;
+    if (m.running && m.live) liveBlock(host, m);
+    if (m.failed && m.groups.length) failingBlock(host, ctx, m, view);
+    if (view.open && list(v.lanes).some(l => l.name === view.open.lane)) openedLog(host, ctx, view.open);
+    if (m.mutated) host.append(el('p', 'A lane changed the checkout, so no lane was rerun after it.', 'warn vfy-mutated'));
+    for (const name of m.reportless) {
+      const s = section(host, `${name}: no test report; see the log`, 'vfy-reportless');
+      tail(s, ctx, name, fresh, 'vfy-tail-' + name);
+    }
+    if (m.endStep) host.append(el('p', `It ended in step ${m.endStep}.`, 'vfy-endstep'));
+    if (m.passed && m.lanes.length) {
+      const p = el('p', undefined, 'vfy-summary');
+      p.append(el('span', `${m.lanes.length} lane${m.lanes.length === 1 ? '' : 's'} passed`));
+      if (m.flaky.length) p.append(el('span', ` · flaky (passed on a rerun): ${m.flaky.join(', ')}`, 'warn'));
+      if (m.known.length) p.append(el('span', ` · known failures only: ${m.known.join(', ')}`, 'muted'));
+      host.append(p);
+    }
+    const followed = m.running ? tailLane(v, view.lane) : view.lane;
+    if (m.lanes.length) lanesTable(host, ctx, m, view, followed);
+    if (m.running) {
+      const s = section(host, m.mode === 'lanes' && followed ? `Live output: ${followed}` : 'Live output', 'vfy-tail');
+      // a single command's rerun writes its own log: the live output follows the one that moved last
+      const single = v.live && v.live.log === 'verification.retry.log' ? RETRY : null;
+      tail(s, ctx, m.mode === 'lanes' && followed ? followed : single, fresh, 'vfy-live-tail');
+    } else if (m.mode === 'lanes' && view.lane) {
+      const s = section(host, `Output: ${view.lane}`, 'vfy-tail');
+      tail(s, ctx, view.lane, fresh, 'vfy-lane-tail');
+    }
+  }
+
+  return { render, model, laneRow, groupFailing, idleWarning, openStep, countsText, runsText, tailLane, logPath, linesPath, RETRY,
+    tailLines, dur, IDLE_WARN_S };
+});