@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/view-runs.css

@@ -0,0 +1,123 @@
+/* Runs: the current run, history and evidence. Tokens and components only (tokens.css, components.css, gherkin.css). */
+
+/* Current: one card per run */
+.run-current { display: flex; flex-direction: column; gap: var(--space-3); }
+/* No box around the run (the design's Run tab): its heading, then its steps, straight on the panel. */
+.run-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.run-card.is-new { animation: ui-fade-in var(--duration) var(--ease); }
+.run-card-head { display: flex; flex-direction: column; gap: var(--space-2); }
+/* A past run picked in History: said above its steps, with the way back to the latest run (text wraps). */
+.run-card-picked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--secondary); font-size: var(--text-sm); }
+.run-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.run-card-title > .ui-icon { flex-shrink: 0; color: var(--ink); }
+.run-card-title h3 { flex: 1; min-width: 0; margin: 0; font: 600 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
+/* Where it is written, on its own line under the title (backlog 158: the title gets the width), wrapped when long. */
+.run-card-where { margin: -4px 0 0 25px; color: var(--tertiary); font: var(--text-2xs) / 1.4 var(--font-mono); overflow-wrap: anywhere; }
+.run-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.run-card-status:empty { display: none; }
+/* The run's controls are the bottom bar's; the lab's own window (its body has no dock) keeps them on the card. */
+body[data-dock] .run-card .run-controls { display: none; }
+.run-controls { display: flex; align-items: center; gap: 4px; }
+.run-controls .ui-button--danger.is-armed { background: var(--danger); border-color: var(--danger); color: var(--accent-ink); }
+.run-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.run-metrics .ui-metric { padding: 10px 12px; }
+.run-metrics .ui-metric > strong { font-size: var(--text-lg); }
+.run-card > .ui-progress { margin-top: calc(var(--space-2) * -1); }
+.run-card-steps { min-width: 0; }
+.run-card-steps .gk-step.is-settled { animation: none; }
+.run-card-steps .gk-step.is-settled .gk-rail { animation: none; }
+.run-card-steps .gk-step[data-status="running"] .gk-rail { animation: ui-pulse 1.4s var(--ease) infinite; }
+.run-why { margin: 0 0 var(--space-3); color: var(--secondary); font-size: var(--text-sm); line-height: 1.55; }
+/* A control's judged failure under its verdict: the reason id and the message's first line. */
+.run-why-failure, .run-control-failure { margin: 0 0 var(--space-3); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.run-disclosure { margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
+.run-disclosure > summary { min-height: 40px; }
+.run-disclosure + .run-disclosure { border-top: 1px solid var(--line); }
+.run-disclosure .ui-code + .ui-code { margin-top: var(--space-2); }
+.run-card > .run-disclosure:last-of-type { margin-bottom: calc(var(--space-2) * -1); }
+
+/* The run's state: a chip, and a mark leading history rows */
+.run-state.is-live .ui-dot { animation: ui-pulse 1.4s var(--ease) infinite; }
+.run-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--soft); color: var(--secondary); flex-shrink: 0; }
+.run-mark[data-state="passed"], .run-mark[data-status="passed"] { background: var(--success-soft); color: var(--success); }
+.run-mark[data-state="failed"], .run-mark[data-state="other-reason"], .run-mark[data-status="failed"] { background: var(--danger-soft); color: var(--danger); }
+.run-mark[data-state="expected"] { background: var(--info-soft); color: var(--info); }
+.run-mark[data-state="unverified"], .run-mark[data-state="unchecked"], .run-mark[data-state="stopping"] { background: var(--warning-soft); color: var(--warning); }
+.run-mark[data-state="running"], .run-mark[data-state="starting"], .run-mark[data-state="paused"], .run-mark[data-status="running"], .run-mark[data-status="paused"] { background: var(--accent-soft); color: var(--accent); }
+.run-muted { color: var(--tertiary); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Backlog 161: an explanation under a Transactions section is a sentence: it wraps. */
+.run-muted.run-wraps { white-space: normal; overflow-wrap: anywhere; }
+
+/* Transactions: one row each, details behind the row */
+.run-txs { display: flex; flex-direction: column; }
+.run-tx { border-top: 0; }
+.run-tx + .run-tx { border-top: 1px solid var(--line); }
+.run-tx > summary { min-height: 48px; }
+.run-tx-summary { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.run-tx-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+.run-tx-body strong { font-weight: var(--weight-medium); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.run-tx-body small { color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
+.run-tx.is-failed .run-tx-body small { color: var(--danger); }
+.run-tx-when { color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-regular); white-space: nowrap; }
+
+/* Activity lanes: a row per actor, a chip per thing it did */
+.run-lanes .ui-row { min-height: 40px; padding: 6px 4px; }
+.run-lanes .ui-row-meta { margin-top: 2px; }
+/* One line per chip, cut with an ellipsis (its title has all of it): a block chip, so text-overflow applies. Wrapped text
+   spilled out of the pill's rounded ends (5 October 2026). */
+.run-lanes .ui-row-meta .ui-chip { display: block; min-width: 0; max-width: 100%; height: 22px; padding: 0 9px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.run-lanes-empty { margin: 0; color: var(--secondary); font-size: var(--text-sm); }
+
+/* History */
+.run-history .ui-row { min-height: 56px; }
+
+/* The toggle row (the evidence controls and the scenarios use it) */
+.run-toggle { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
+.run-toggle-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+.run-toggle-text strong { font-size: var(--text-sm); font-weight: var(--weight-medium); }
+.run-toggle-text small { color: var(--secondary); font-size: var(--text-xs); }
+.run-toggle input[type="checkbox"] { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; flex-shrink: 0; transition: background var(--duration) var(--ease); }
+.run-toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
+.run-toggle input[type="checkbox"]:checked { background: var(--accent); }
+.run-toggle input[type="checkbox"]:checked::after { transform: translateX(14px); }
+.run-toggle input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+
+/* The dock's run line (frame.css lays the dock out): its words stay ink and grey in every state (the design); the
+   state's icon carries the tone (frame.css). */
+
+/* A feature run's failures as run-outcome.ts writes them (the builder's outcome uses them too). */
+.run-failure { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 3px solid var(--danger); overflow-wrap: anywhere; font-size: var(--text-sm); }
+.run-failure pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-xs) / 1.6 var(--font-mono); }
+.run-failure-message { margin: var(--space-1) 0; color: var(--danger); }
+.run-control-note { padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow-wrap: anywhere; font-size: var(--text-sm); }
+
+/* Backlog 17: the paused run's inspection (pause-inspector.ts) and what became of each breakpoint. */
+.pause-inspector { display: flex; flex-direction: column; gap: 12px; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
+.pause-inspector h4, .pause-breakpoints h4 { margin: 0 0 6px; color: var(--secondary); font: var(--weight-strong) var(--text-xs) / 1.3 var(--font-ui); }
+.pause-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.pause-step { color: var(--secondary); min-width: 0; overflow-wrap: anywhere; }
+.pause-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.pause-note { margin: 0; color: var(--secondary); font-size: 13px; }
+.pause-call { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--soft); }
+.pause-call ul, .pause-events ul, .pause-chains, .pause-breakpoints ul, .pause-notes { margin: 0; padding-left: 18px; }
+.pause-call-owner { font-family: var(--font-mono); font-size: 12px; }
+.pause-call .is-unresolved { color: var(--danger); }
+.pause-identities { display: flex; flex-direction: column; gap: 8px; }
+.pause-identity { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
+.pause-identity header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.pause-account, .pause-app { margin: 0; font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; }
+.pause-chain.is-error { color: var(--danger); }
+.pause-frame { max-width: 100%; max-height: 220px; object-fit: contain; object-position: left top; border: 1px solid var(--line); border-radius: var(--radius-sm); }
+.pause-event { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
+.pause-event.is-mentioned strong { color: var(--accent); }
+.pause-event-block { font-family: var(--font-mono); color: var(--tertiary); }
+.pause-event-who { color: var(--secondary); }
+.pause-breakpoints { margin: 8px 0; }
+.pause-breakpoints li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
+.pause-call .pause-values { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; padding-left: 0; font-family: var(--font-mono); font-size: 12px; }
+.pause-call-text { font-size: 13px; }
+/* A banner in the run card (a failed fork run's "cannot be reproduced"): the card is narrow, so its actions go under
+   its words, aligned with them past the icon. */
+.run-card .ui-banner { flex-wrap: wrap; }
+.run-card .ui-banner-actions { flex-basis: 100%; flex-wrap: wrap; padding-left: 26px; }
+.run-writes-total { margin: 0 0 var(--space-2); font-weight: 600; }

package/entrypoints/panel/src/client/view-runs.d.ts

@@ -0,0 +1,9 @@
+import { type RunEntry, type RunState } from "./run-progress.js";
+import { type LabView, type ShellContext } from "./shell-kit.js";
+/** The run's status chip: running pulses; a control's expected failure reads as a pass. */
+export declare function stateChip(state: RunState): HTMLSpanElement;
+export declare function createRunsView(ctx: ShellContext): LabView & {
+    shown(): RunEntry | undefined;
+    latest(): RunEntry | undefined;
+    history(): readonly RunEntry[];
+};

package/entrypoints/panel/src/client/view-runs.js

@@ -0,0 +1,443 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { HOST_CHECK, renderHostBypass } from "./host-bypass.js";
+import { combineAudits } from "./host-bypass-model.js";
+import { describeFailure } from "@parity/product-lab/domain/runs";
+import { controlFailureLine, featureFailures, negativeControlCommand } from "./run-outcome.js";
+import { runLine, runLineText } from "./dock-status.js";
+import { ACTIVE_STATES, STATE_LABEL, actedBy, controlJudgement, dockLine, runActive, featureJobStep, featureStepStates, jobStepStates, runHistory, runTransactions, shortDuration } from "./run-progress.js";
+import { lanesOf, renderLanes } from "./lanes.js";
+import { renderRunSteps } from "./run-steps.js";
+import { runWrites, transactionFor, writesByWho, writesHeadline } from "./run-writes.js";
+import { byId } from "./shell-kit.js";
+import { age, banner, button, chip, clockTime, codeBlock, copyToClipboard, dateTime, disclosure, empty, h, icon, iconButton, patchChildren, plural, ref, row, statusDot, tabs } from "./ui.js";
+import { runIdentity } from "./principals.js";
+import { setKeepRunStart } from "./settings.js";
+import { scenarioCountWords, scenarioEntries } from "./view-scenarios.js";
+const STATE_TONE = { starting: "accent", running: "accent", paused: "accent", stopping: "warning", passed: "success", failed: "danger", stopped: "neutral", expected: "info", "other-reason": "danger", unchecked: "warning", unverified: "warning" };
+const STATE_ICON = { starting: "clock", running: "clock", paused: "pause", stopping: "stop", passed: "passed", failed: "failed", stopped: "stop", expected: "passed", "other-reason": "failed", unchecked: "warning", unverified: "warning" };
+const TX_TONE = { signing: "accent", submitted: "accent", included: "info", finalized: "success", failed: "danger" };
+const TX_LABEL = { signing: "Signing", submitted: "Waiting for inclusion", included: "Waiting for finality", finalized: "Finalized", failed: "Failed" };
+const RAIL = { passed: "check", failed: "close", running: "clock", paused: "pause", skipped: "minus" };
+export function stateChip(state) {
+    const node = chip(STATE_LABEL[state], { tone: STATE_TONE[state], ...(state === "running" || state === "starting" ? { dot: true } : { icon: STATE_ICON[state] }) });
+    node.classList.add("run-state");
+    node.dataset.state = state;
+    if (state === "running" || state === "starting")
+        node.classList.add("is-live");
+    return node;
+}
+function stateMark(state) {
+    if (state === "running" || state === "starting")
+        return h("span", { class: "run-mark", "data-state": state }, statusDot("accent", true, STATE_LABEL[state]));
+    return h("span", { class: "run-mark", "data-state": state, title: STATE_LABEL[state] }, icon(STATE_ICON[state], 16));
+}
+const withoutStack = (error) => error.split("\n").filter(line => !/^\s+at\s/.test(line)).join("\n").trim();
+function openNames(root) { return new Set([...root.querySelectorAll("details[data-name]")].filter(node => node.open).map(node => node.dataset.name)); }
+function named(node, name, open) { node.dataset.name = name; node.dataset.key = `run-${name}`; if (open.has(name))
+    node.open = true; return node; }
+export function createRunsView(ctx) {
+    const grab = (id) => byId(id);
+    const kept = { lanesTable: grab("lanes-table"), resultView: grab("result-view"), follow: grab("follow-navigation"), navigationActive: grab("navigation-active"), navigationEvents: grab("navigation-events"), loadEvidence: grab("load-evidence"), checkTransactions: grab("check-transactions"), observe: grab("observe"), evidence: grab("evidence"), landing: grab("landing"), observation: grab("observation"), pauseInspector: grab("feature-inspect"), breakpoints: grab("feature-breakpoints") };
+    const legacy = h("div", { id: "runs-legacy", hidden: true });
+    ctx.stored.append(legacy);
+    for (const id of ["continue", "pause", "cancel", "feature-continue", "feature-step", "feature-pause-now", "feature-cancel", "feature-execution", "live-progress", "run-history-label", "identity-empty", "bindings-summary", "lanes", "navigation-activity"]) {
+        const node = document.getElementById(id);
+        if (node)
+            legacy.append(node);
+    }
+    const oldBoxes = [...ctx.pane("evidence").querySelectorAll(":scope > details")];
+    const current = h("div", { id: "run-current", class: "run-current" });
+    const lanesTable = kept.lanesTable;
+    const park = () => legacy.append(kept.lanesTable, kept.pauseInspector, kept.breakpoints);
+    park();
+    ctx.pane("activity").prepend(current);
+    const historyList = h("div", { id: "session-history", class: "ui-list run-history" });
+    ctx.pane("history").append(historyList);
+    let evidenceTab = "steps";
+    const evidenceHead = h("div", { class: "run-evidence-head" });
+    const hostBypassPanel = h("div", { class: "run-host-bypass-summary" });
+    const evidenceTabs = h("div", { class: "run-evidence-tabs" });
+    const stepsPanel = h("div", { class: "run-tab", "data-tab": "steps" });
+    const stepsList = h("div", { class: "run-evidence-steps" });
+    stepsPanel.append(kept.resultView, stepsList);
+    const txPanel = h("div", { class: "run-tab", "data-tab": "transactions" });
+    const follow = kept.follow;
+    follow.setAttribute("role", "switch");
+    const toggle = h("label", { class: "run-toggle" }, h("span", { class: "run-toggle-text" }, h("strong", {}, "Follow navigation"), h("small", {}, "Show the app a navigation request opened")), follow);
+    const navEmpty = h("div", {});
+    const navPanel = h("div", { class: "run-tab", "data-tab": "navigation" }, toggle, kept.navigationActive, kept.navigationEvents, navEmpty);
+    kept.navigationActive.classList.add("run-nav-active");
+    kept.navigationEvents.classList.add("ui-list", "run-nav-events");
+    const receiptTargets = h("div", { class: "run-receipt-targets" });
+    for (const control of [kept.loadEvidence, kept.checkTransactions, kept.observe])
+        control.className = "ui-button ui-button--secondary ui-button--sm";
+    kept.loadEvidence.textContent = "Load receipts";
+    const evidenceCode = h("figure", { class: "ui-code run-raw" }, h("figcaption", {}, h("span", {}, "Run record · JSON"), iconButton("copy", "Copy JSON", { size: "sm", onClick: () => copyToClipboard(kept.evidence.textContent ?? "") })), kept.evidence);
+    const receiptActions = h("div", { class: "run-receipt-actions" }, kept.loadEvidence, kept.checkTransactions);
+    receiptActions.addEventListener("click", () => {
+        const job = ctx.snapshot()?.jobs.find(item => item.id === receiptActions.dataset.job);
+        if (job)
+            targetJob(job);
+    }, { capture: true });
+    kept.landing.classList.add("run-landing");
+    const receiptsBody = h("div", { class: "run-receipts" }, receiptTargets, receiptActions, kept.landing, evidenceCode);
+    const receiptsEmpty = h("div", {});
+    const receiptsPanel = h("div", { class: "run-tab", "data-tab": "receipts" }, receiptsBody, receiptsEmpty);
+    const observation = h("figure", { class: "ui-code run-raw" }, h("figcaption", {}, h("span", {}, "Finalized chain state"), kept.observe), kept.observation);
+    const chainState = disclosure("Chain observations", [observation], { class: "run-chain-state" });
+    const evidenceEmpty = h("div", {});
+    const evidenceBody = h("div", { class: "run-evidence" }, evidenceHead, hostBypassPanel, evidenceTabs, stepsPanel, txPanel, navPanel, receiptsPanel);
+    ctx.pane("evidence").prepend(evidenceEmpty, evidenceBody, chainState);
+    for (const box of oldBoxes)
+        box.remove();
+    const seen = new Map();
+    let environment, selected, selectedAt = 0, receiptJob;
+    let currentKey = "", historyKey = "", evidenceKey = "", shownRun = "", lastStatuses = new Map();
+    let armedStop = 0;
+    let revealedPause = "";
+    function revealPausedStep(steps, run) {
+        const paused = steps.querySelector('.gk-step[data-status="paused"]');
+        if (!paused) {
+            revealedPause = "";
+            return;
+        }
+        const pause = `${run}:${paused.dataset.index}`;
+        if (pause === revealedPause)
+            return;
+        requestAnimationFrame(() => {
+            if (!paused.isConnected || !paused.checkVisibility())
+                return;
+            revealedPause = pause;
+            paused.querySelector(".gk-sentence")?.scrollIntoView({ block: "nearest" });
+        });
+    }
+    let shownEntry;
+    let latestEntry;
+    let history = [];
+    byId("compact-progress").addEventListener("click", () => { selected = undefined; ctx.rerender(); });
+    const scenarios = () => [...byId("feature-scenario").options].flatMap(option => option.dataset.scenario ? [JSON.parse(option.dataset.scenario)] : []);
+    const names = (value) => (id) => value.actors.find(actor => actor.id === id)?.name ?? id;
+    const visible = (...ids) => ids.map(id => byId(id)).find(node => !node.hidden && !node.disabled);
+    function choose(entry) {
+        selected = entry.key;
+        selectedAt = Date.now();
+        receiptJob = undefined;
+        const job = entry.kind === "job" ? entry.jobs[0] : undefined;
+        if (job)
+            targetJob(job);
+        ctx.show("activity");
+        ctx.rerender();
+    }
+    function latestAgain() {
+        selected = undefined;
+        receiptJob = undefined;
+        ctx.rerender();
+    }
+    function targetJob(job) {
+        const identity = byId("identity"), history = byId("run-history");
+        const owner = runIdentity(job);
+        if (owner && identity.value !== owner && [...identity.options].some(option => option.value === owner))
+            ctx.choose(identity, owner);
+        if (history.value !== job.id && [...history.options].some(option => option.value === job.id))
+            ctx.choose(history, job.id);
+    }
+    function controls(entry) {
+        if (!ACTIVE_STATES.includes(entry.state))
+            return [];
+        const nodes = [];
+        const cont = visible("feature-continue", "continue"), step = visible("feature-step"), pause = visible("feature-pause-now", "pause"), stop = visible("feature-cancel", "cancel");
+        if (cont) {
+            const node = iconButton("play", "Continue", { variant: "primary", onClick: () => cont.click() });
+            node.dataset.runAction = "continue";
+            nodes.push(node);
+        }
+        if (step) {
+            const node = iconButton("right", "Step: run the next step, then pause", { variant: "secondary", onClick: () => step.click() });
+            node.dataset.runAction = "step";
+            nodes.push(node);
+        }
+        if (pause) {
+            const node = iconButton("pause", "Pause after this step", { variant: "secondary", onClick: () => pause.click() });
+            node.dataset.runAction = "pause";
+            nodes.push(node);
+        }
+        if (stop) {
+            const node = iconButton("stop", `Stop ${entry.title}`, { variant: "danger", onClick: () => {
+                    if (Date.now() - armedStop < 3000) {
+                        armedStop = 0;
+                        stop.click();
+                        return;
+                    }
+                    armedStop = Date.now();
+                    node.classList.add("is-armed");
+                    node.title = `Click again to stop ${entry.title}; completed steps stay on chain`;
+                    setTimeout(() => { node.classList.remove("is-armed"); node.title = `Stop ${entry.title}`; }, 3000);
+                } });
+            node.dataset.runAction = "stop";
+            nodes.push(node);
+        }
+        return nodes;
+    }
+    function statesOf(entry, value) {
+        return entry.kind === "feature" ? featureStepStates(entry, value) : jobStepStates(entry.jobs[0], value, entry);
+    }
+    function failureDetails(entry, value) {
+        const nodes = [];
+        if (entry.kind === "feature" && entry.feature) {
+            const run = entry.feature;
+            if (run.error)
+                nodes.push(banner({ tone: "danger", title: "The run could not complete", body: describeFailure(run.error) }));
+            if (entry.state === "failed" && value.runStart && !value.runStart.keeping && !run.scenarios.some(scenario => scenario.fixture))
+                nodes.push(banner({
+                    tone: "info",
+                    icon: "history",
+                    title: "This run cannot be reproduced",
+                    body: "It started on a fork state the lab did not keep. Keep each fork run's starting state to reproduce runs like it: each scenario then saves its start first (about a minute).",
+                    actions: [button("Keep starting states", { size: "sm", id: "run-keep-run-start", onClick: () => void setKeepRunStart(true).then(() => ctx.rerender()) })],
+                }));
+            const failures = featureFailures(run);
+            const path = run.selection.paths[0];
+            const abortDetails = run.scenarios.flatMap(scenario => scenario.steps.flatMap(step => step.abortDetail ? [`${step.keyword} ${step.name}\n${step.abortDetail}`] : []));
+            const raw = [...failures.map(failure => `${failure.hook ? "Hook" : `Step ${failure.step}`}: ${failure.text}\n${withoutStack(failure.detail)}`), ...abortDetails, run.error ? withoutStack(run.error) : ""].filter(Boolean).join("\n\n");
+            if (entry.negativeControl && !ACTIVE_STATES.includes(entry.state)) {
+                const judged = controlJudgement(run);
+                const command = negativeControlCommand(run);
+                const failureLine = controlFailureLine(run);
+                nodes.push(disclosure("Why?", [
+                    h("p", { class: "run-why" }, entry.state === "expected" ? `The lab caught it: judged at its step and for its reason, ${judged.reason}. The check it targets works.`
+                        : entry.state === "other-reason" ? `It failed, but not as ${run.control?.expected?.step || run.control?.expected?.marker ? "the lab declares" : "its tags declare"} it must (${judged.reason}): the check it targets did not catch the deliberate mistake, or something else broke first.`
+                            : entry.state === "unchecked" ? "This run was not judged, so only that it failed is known, not why: run it as a control (its tags say where and why it must fail: @fails-at-step-N, @fails-with:<reason>)."
+                                : `This does not count as a working control: ${judged.reason}.`),
+                    failureLine ? h("p", { class: "run-why-failure", "data-control-reason": run.control.failure.reason }, failureLine) : null,
+                    codeBlock(command, { label: "Judge it from a terminal" }),
+                ], { class: "run-disclosure" }));
+            }
+            if (raw || (path && ["failed", "other-reason", "unchecked", "unverified"].includes(entry.state)))
+                nodes.push(disclosure("Details", [
+                    raw ? codeBlock(raw, { label: "Recorded error" }) : null,
+                    path ? codeBlock(`product-lab test ${path}`, { label: "Run it from a terminal" }) : null,
+                ].filter(Boolean), { class: "run-disclosure" }));
+        }
+        else if (entry.kind === "feature") {
+            if (entry.prelude?.status === "failed")
+                nodes.push(banner({ tone: "danger", title: `${entry.prelude.title} failed`, body: `${entry.prelude.detail ?? "The environment did not start"}. The scenario did not run.` }));
+        }
+        else {
+            const job = entry.jobs[0];
+            const errors = [...job.steps.filter(step => step.error || step.abortDetail).map(step => `${step.title}\n${[step.error ? withoutStack(step.error) : "", step.abortDetail].filter(Boolean).join("; ")}`), job.error ? withoutStack(job.error) : ""].filter(Boolean);
+            if (job.error && !job.steps.some(step => step.error))
+                nodes.push(banner({ tone: "danger", title: "The run stopped", body: describeFailure(job.error) }));
+            if (errors.length)
+                nodes.push(disclosure("Details", [codeBlock([...new Set(errors)].join("\n\n"), { label: "Recorded error" })], { class: "run-disclosure" }));
+        }
+        return nodes;
+    }
+    const forWhom = (entry, value, tx) => transactionFor(entry?.jobs ?? [], tx, names(value));
+    function transactionRows(txs, now, open, whom = () => undefined) {
+        return h("div", { class: "run-txs" }, ...[...txs].reverse().map(tx => {
+            const person = whom(tx);
+            const where = [person ? `for ${person}` : undefined, tx.block ? `${tx.chain} · block #${tx.block.number.toLocaleString()}` : `${tx.chain} · not in a block yet`].filter(Boolean).join(" · ");
+            const when = tx.status === "finalized" && tx.finishedAt ? `finalized ${age(now - tx.finishedAt)}${age(now - tx.finishedAt) === "now" ? "" : " ago"}` : TX_LABEL[tx.status];
+            const summary = h("span", { class: "run-tx-summary" }, statusDot(TX_TONE[tx.status], tx.status !== "finalized" && tx.status !== "failed", TX_LABEL[tx.status]), h("span", { class: "run-tx-body" }, h("strong", {}, tx.label), h("small", {}, tx.detail ? describeFailure(tx.detail) : where)), h("span", { class: "run-tx-when", title: tx.finishedAt ? dateTime(tx.finishedAt) : "" }, when));
+            const facts = { hash: tx.hash, block: tx.block, step: tx.step !== undefined ? tx.step + 1 : undefined, took: shortDuration((tx.finishedAt ?? now) - tx.startedAt), signing: tx.diagnostics };
+            const node = disclosure(summary, [codeBlock(JSON.stringify(facts), { mediaType: "application/json", label: "Transaction" })], { class: `run-tx${tx.status === "failed" ? " is-failed" : ""}` });
+            node.dataset.status = tx.status;
+            return named(node, `tx:${tx.id}`, open);
+        }));
+    }
+    function renderDock(entry, value) {
+        const progress = byId("compact-progress");
+        if (value.operation?.status === "running" && !runActive(value)) {
+            progress.dataset.compact = "Working";
+            progress.dataset.base = progress.title;
+            return;
+        }
+        const line = dockLine(entry);
+        const symbol = line.compact === "Running" ? undefined : !entry ? "circle-check" : line.tone === "success" || line.tone === "info" ? "circle-check" : line.tone === "danger" ? "circle-x" : entry.state === "paused" ? "circle-pause" : "circle-dashed";
+        const count = entry ? "" : scenarioCountWords(scenarioEntries(value));
+        patchChildren(progress, [...(symbol ? [icon(symbol, 15)] : []), ...runLine(runLineText(entry, line.text)), ...(count ? [h("span", { class: "dock-line-detail" }, ` · ${count}`)] : [])]);
+        progress.title = value.operation?.status === "running" ? `${line.title} · ${value.operation.message ?? value.operation.label}` : line.title;
+        progress.dataset.base = progress.title;
+        progress.dataset.compact = line.compact;
+        progress.dataset.tone = line.tone;
+    }
+    return {
+        shown: () => shownEntry,
+        latest: () => latestEntry,
+        history: () => history,
+        render(value) {
+            if (value.environmentId !== environment) {
+                environment = value.environmentId;
+                seen.clear();
+                selected = undefined;
+            }
+            if (value.featureRun)
+                seen.set(value.featureRun.id, value.featureRun);
+            const entries = runHistory(value, scenarios(), seen, value.serverTime);
+            history = entries;
+            const latest = entries[0];
+            if (selected && latest && latest.startedAt > selectedAt - 1000 && ACTIVE_STATES.includes(latest.state) && latest.key !== selected)
+                selected = undefined;
+            const entry = entries.find(item => item.key === selected) ?? latest;
+            shownEntry = entry;
+            latestEntry = latest;
+            const name = names(value);
+            const now = value.serverTime;
+            renderDock(latest, value);
+            const states = entry ? statesOf(entry, value) : [];
+            const txs = entry ? runTransactions(entry, value) : [];
+            const appSent = entry ? (value.activity.observed ?? []).filter((tx) => tx.jobId !== undefined && entry.jobs.some((job) => job.id === tx.jobId)) : [];
+            const writesNow = entry ? runWrites(entry.jobs, name) : { host: [], recorded: [] };
+            const whoWrote = writesByWho(writesNow, txs.length, appSent, name);
+            const controlKey = ["continue", "pause", "cancel", "feature-continue", "feature-step", "feature-pause-now", "feature-cancel"].map(id => `${byId(id).hidden}${byId(id).disabled}`).join() + `|keep:${value.runStart?.keeping ?? "-"}`;
+            const key = JSON.stringify([entry && { ...entry, jobs: entry.jobs.map(job => [job.id, job.status, job.steps.map(step => [step.status, step.error, step.reconciliation, step.afterFailure?.state])]), durationMs: undefined }, states, txs.map(tx => [tx.id, tx.status, tx.block?.number, Math.round((now - (tx.finishedAt ?? now)) / 5000)]), controlKey, value.actors.map(actor => actor.name), whoWrote.line]);
+            if (key !== currentKey) {
+                currentKey = key;
+                const open = openNames(current);
+                const previous = lastStatuses;
+                lastStatuses = new Map();
+                const nodes = [];
+                if (!entry) {
+                    nodes.push(empty({ icon: "play", title: "No run yet", body: "Run a scenario to follow its steps here.", action: button("Choose a scenario", { variant: "primary", icon: "steps", onClick: () => ctx.show("scenarios") }) }));
+                }
+                else {
+                    const where = entry.scenario?.path ? `${entry.scenario.path.replace(/^features\//, "")}${entry.scenario.line ? `:${entry.scenario.line}` : ""}` : undefined;
+                    const kind = entry.builder ? "Builder run" : entry.negativeControl ? "Negative control" : undefined;
+                    const past = entry.key !== latest?.key || ["expected", "other-reason", "unchecked", "unverified"].includes(entry.state);
+                    const actions = controls(entry);
+                    const head = h("header", { class: "run-card-head", "data-key": "run-head" }, h("div", { class: "run-card-title" }, icon("file-text", 17), h("h3", { title: entry.title }, entry.title)), where ? h("code", { class: "run-card-where", title: entry.scenario.path }, where) : null, kind || past || actions.length ? h("div", { class: "run-card-status" }, kind ? h("span", { class: "ui-eyebrow" }, kind) : null, past ? stateChip(entry.state) : null, actions.length ? h("div", { class: "run-controls", role: "group", "aria-label": "Run controls" }, ...actions) : null) : null);
+                    const card = h("section", { class: `ui-card run-card${ACTIVE_STATES.includes(entry.state) ? " is-active" : ""}${entry.key !== shownRun ? " is-new" : ""}`, "data-state": entry.state, "data-run": entry.key, "data-shows": `run:${entry.key}` }, 
+                    head, 
+                    latest && entry.key !== latest.key ? h("div", { class: "run-card-picked", role: "note" }, h("span", {}, "A past run, picked in History"), button("Back to the latest run", { size: "sm", onClick: () => latestAgain() })) : null);
+                    const inspection = entry.kind === "feature" && entry.key === latest?.key ? [ref(kept.pauseInspector), ref(kept.breakpoints)] : [];
+                    const stepsRoot = renderRunSteps(entry, value, { now, pausedDetail: inspection });
+                    const steps = h("div", { class: "run-card-steps", "data-key": "run-steps" }, stepsRoot.isConnected ? ref(stepsRoot) : stepsRoot);
+                    for (const node of stepsRoot.querySelectorAll(".gk-step[data-index]")) {
+                        const index = node.dataset.index, status = node.dataset.status;
+                        lastStatuses.set(index, status);
+                        if (previous.get(index) === status && entry.key === shownRun)
+                            node.classList.add("is-settled");
+                    }
+                    if (inspection.length && !stepsRoot.contains(kept.pauseInspector))
+                        card.append(...inspection);
+                    card.append(steps, ...failureDetails(entry, value).map(node => node instanceof HTMLDetailsElement ? named(node, node.querySelector("summary span").textContent, open) : node));
+                    if (whoWrote.total)
+                        card.append(named(disclosure("Writes", [h("p", { class: "run-writes-who run-wraps", "data-writes": String(whoWrote.total) }, whoWrote.line), ...(txs.length ? [transactionRows(txs, now, open, (tx) => forWhom(entry, value, tx))] : [])], { count: whoWrote.total, class: "run-disclosure", open: ACTIVE_STATES.includes(entry.state) }), "transactions", open));
+                    let lanesBody = lanesTable;
+                    if (entry.key !== latest?.key) {
+                        lanesBody = h("div", { class: "run-lanes-body" });
+                        const columns = entry.jobs.map(job => { const step = featureJobStep(job); return step ? `${step.step}. ${job.steps[0]?.title.split(" · ").at(-1)?.replace(/ \[[^\]]+\]$/, "") ?? ""}` : entry.title; });
+                        renderLanes(lanesBody, lanesOf(value, entry.jobs, columns));
+                    }
+                    const lanes = disclosure("Activity lanes", [lanesBody === lanesTable ? ref(lanesTable) : lanesBody], { class: "run-disclosure run-lanes" });
+                    card.append(named(lanes, "lanes", open));
+                    nodes.push(card);
+                    shownRun = entry.key;
+                }
+                patchChildren(current, nodes);
+                legacy.dataset.shows = `run:${entry?.key ?? ""}`;
+                for (const node of [kept.lanesTable, kept.pauseInspector, kept.breakpoints])
+                    if (!current.contains(node) && node.parentNode !== legacy)
+                        legacy.append(node);
+                const shownSteps = current.querySelector(".run-card-steps");
+                if (entry && shownSteps)
+                    revealPausedStep(shownSteps, entry.key);
+            }
+            const hKey = JSON.stringify([entries.map(item => [item.key, item.title, item.state, item.actorIds, item.setup, Math.round(item.durationMs / 1000)]), entry?.key, value.actors.map(actor => actor.name)]);
+            if (hKey !== historyKey) {
+                historyKey = hKey;
+                patchChildren(historyList, [...entries.map(item => {
+                        const who = actedBy(item, name).join(", ");
+                        const node = row({
+                            leading: stateMark(item.state),
+                            title: item.title,
+                            subtitle: [who, clockTime(item.startedAt), shortDuration(item.durationMs)].filter(Boolean).join(" · "),
+                            meta: [stateChip(item.state)],
+                            selected: item.key === entry?.key,
+                            onSelect: () => choose(item),
+                            label: `${item.title}, ${STATE_LABEL[item.state]}`,
+                        });
+                        node.classList.add("run-list-item");
+                        node.dataset.run = item.key;
+                        node.dataset.key = item.key;
+                        node.dataset.state = item.state;
+                        return node;
+                    }), ...(entries.length ? [] : [empty({ icon: "history", title: "No runs yet", body: "Runs you start appear here.", action: button("Choose a scenario", { variant: "primary", icon: "steps", onClick: () => ctx.show("scenarios") }) })])]);
+            }
+            const navigations = value.activity.navigations ?? [];
+            const eKey = JSON.stringify([key, entry?.jobs.map(job => job.hostBypass), evidenceTab, navigations.length, receiptJob, (value.activity.observed ?? []).map((tx) => [tx.id, tx.status])]);
+            if (eKey !== evidenceKey) {
+                evidenceKey = eKey;
+                evidenceBody.dataset.shows = `run:${entry?.key ?? ""}`;
+                patchChildren(evidenceEmpty, (entry ? [] : [empty({ icon: "file", title: "No evidence yet", body: "A run's steps, transactions and receipts appear here.", action: button("Choose a scenario", { icon: "steps", onClick: () => ctx.show("scenarios") }) })]));
+                evidenceBody.hidden = !entry && !navigations.length;
+                patchChildren(evidenceHead, (entry ? [row({ leading: stateMark(entry.state), title: entry.title, subtitle: [actedBy(entry, name).join(", "), clockTime(entry.startedAt), shortDuration(entry.durationMs)].filter(Boolean).join(" · "), meta: [stateChip(entry.state)] })] : []));
+                const audit = { name: (id) => name(id) ?? id, host: (id) => value.actors.find(actor => actor.id === id)?.host?.label };
+                const jobs = entry?.jobs.filter(job => job.hostBypass) ?? [];
+                const combined = entry?.kind === "feature" ? combineAudits(jobs.map(job => job.hostBypass), (part) => (featureJobStep(jobs[part])?.step ?? 1) - 1) : undefined;
+                patchChildren(hostBypassPanel, (!entry ? [] : entry.kind === "feature" ? [renderHostBypass(combined, HOST_CHECK.run, audit)] : entry.jobs.map((job, part) => renderHostBypass(job.hostBypass, entry.jobs.length > 1 ? `${HOST_CHECK.run} · part ${part + 1}` : HOST_CHECK.run, audit))));
+                const writes = writesNow;
+                const tabItems = [{ value: "steps", label: "Steps", ...(entry?.total ? { count: entry.total } : {}) }, { value: "transactions", label: "Transactions", count: txs.length + appSent.length + writes.host.length + writes.recorded.length }, { value: "navigation", label: "Navigation", count: navigations.length }, { value: "receipts", label: "Receipts" }];
+                patchChildren(evidenceTabs, [tabs(tabItems, evidenceTab, next => { evidenceTab = next; ctx.rerender(); }, "Evidence")]);
+                for (const panel of [stepsPanel, txPanel, navPanel, receiptsPanel])
+                    panel.hidden = panel.dataset.tab !== evidenceTab;
+                const open = openNames(evidenceBody);
+                patchChildren(stepsList, (entry ? evidenceSteps(entry, states, open, audit) : []));
+                const headline = entry ? writesHeadline(writes, txs.length, appSent.length) : undefined;
+                const txNodes = !headline ? [empty({ icon: "chain", title: "Nothing was written", body: "Run a scenario to see what it writes." })]
+                    : "empty" in headline ? [empty({ icon: "chain", ...headline.empty })]
+                        : [h("p", { class: "run-writes-total", "data-writes": String(headline.total) }, headline.heading),
+                            h("section", { class: "run-lab-txs", "data-lab-transactions": String(txs.length) }, h("h4", {}, headline.lab), txs.length ? transactionRows(txs, now, open, (tx) => forWhom(entry, value, tx)) : null)];
+                if (writes.host.length)
+                    txNodes.push(h("section", { class: "run-host-writes" }, h("h4", {}, "Written by the hosts and services, seen in finalized blocks"), h("p", { class: "run-muted run-wraps" }, "Transactions the people's hosts or the lab's declared services sent during this run, read from the chain's finalized blocks; the lab did not submit them."), h("div", { class: "ui-list" }, ...writes.host.map((write) => Object.assign(row({ leading: statusDot("success", false, "finalized"), title: write.title, subtitle: `${write.where} · by ${write.by}` }), { title: write.entry.reason })))));
+                if (writes.recorded.length)
+                    txNodes.push(h("section", { class: "run-step-writes" }, h("h4", {}, "Other writes: statements and stored content"), h("p", { class: "run-muted run-wraps" }, "Written for the run's people and read back by the lab. A Statement Store statement is not a transaction: it is kept by the node, never in a block."), h("div", { class: "ui-list" }, ...writes.recorded.map((item) => row({ leading: chip(item.kind, { tone: item.write.kind === "statement" ? "info" : "neutral" }), title: item.write.what, subtitle: `${item.where} · by ${item.write.by}` })))));
+                if (appSent.length)
+                    txNodes.push(h("section", { class: "run-app-sent" }, h("h4", {}, "Sent by the app, seen on chain"), h("p", { class: "run-muted" }, "The identity's app signed these by itself; the lab did not submit them and never reconciles them."), h("div", { class: "ui-list" }, ...appSent.map((tx) => row({ leading: statusDot(tx.status === "finalized" ? "success" : tx.status === "retracted" ? "warning" : "info", tx.status !== "finalized" && tx.status !== "retracted", tx.status), title: `${name(tx.actorId)}'s app · ${tx.status}${tx.block ? ` in #${tx.block.number}` : ""}`, subtitle: `${tx.chain} · ${tx.hash.slice(0, 18)}…${tx.step !== undefined ? ` · during step ${tx.step + 1}` : ""}${tx.ok === false ? " · dispatch failed" : ""}` })))));
+                patchChildren(txPanel, txNodes);
+                patchChildren(navEmpty, (navigations.length ? [] : [empty({ icon: "external", title: "No navigation requests", body: "Requests an app makes to open another appear here." })]));
+                receiptsBody.hidden = !entry;
+                patchChildren(receiptsEmpty, (entry ? [] : [empty({ icon: "file", title: "No receipts", body: "Run a scenario to load its receipts." })]));
+                if (entry)
+                    renderReceiptTargets(entry, value);
+            }
+        },
+    };
+    function evidenceSteps(entry, states, open, audit) {
+        const jobs = entry.kind === "job" ? [entry.jobs[0]] : entry.jobs;
+        const list = h("div", { class: "ui-list run-evidence-list" });
+        const all = entry.scenario ? [...(entry.scenario.background ?? []), ...(entry.scenario.steps ?? [])] : undefined;
+        const items = entry.kind === "feature"
+            ? (all ?? []).map((step, index) => ({ title: `${step.keyword.trim()} ${step.text}`, state: states[index], evidence: jobs.filter(job => featureJobStep(job)?.step === index + 1).flatMap(job => job.steps.map((item, at) => ({ title: item.title, evidence: item.evidence, attached: item.attached, hostBypass: item.hostBypass, step: at }))) }))
+            : jobs[0].steps.map((step, index) => ({ title: step.title, state: states[index], evidence: [{ title: step.title, evidence: step.evidence, attached: step.attached, hostBypass: step.hostBypass, step: index }] }));
+        items.forEach((item, index) => {
+            const recorded = item.evidence.filter(part => part.evidence !== undefined || part.attached !== undefined);
+            const status = item.state?.status ?? "pending";
+            const head = row({ leading: h("span", { class: "run-mark", "data-status": status }, RAIL[status] ? icon(RAIL[status], 14) : h("span", { class: "gk-rail-dot" })), title: `${index + 1}. ${item.title}`, trailing: item.state?.duration ? [h("span", { class: "run-muted" }, item.state.duration)] : [] });
+            list.append(head, ...item.evidence.map(part => renderHostBypass(part.hostBypass, HOST_CHECK.step, { ...audit, step: part.step })));
+            if (recorded.length)
+                list.append(named(disclosure("Evidence", recorded.map(part => codeBlock(JSON.stringify({ ...(part.evidence !== undefined ? { returned: part.evidence } : {}), ...(part.attached ? { attached: part.attached } : {}) }), { mediaType: "application/json", label: part.title.split(" · ").at(-1) })), { class: "run-disclosure run-step-evidence" }), `evidence:${index}`, open));
+        });
+        if (!items.length)
+            list.append(empty({ icon: "steps", title: "No steps yet", body: "Steps appear as the run reaches them." }));
+        return [list];
+    }
+    function renderReceiptTargets(entry, value) {
+        const jobs = entry.jobs;
+        const withTx = (job) => value.activity.transactions.some(tx => tx.jobId === job.id);
+        const target = jobs.find(job => job.id === receiptJob) ?? jobs.findLast(withTx) ?? jobs.at(-1);
+        receiptActions.hidden = !target;
+        if (!target) {
+            patchChildren(receiptTargets, [empty({ icon: "file", title: "No step runs", body: "This run's steps submitted nothing to read receipts for." })]);
+            return;
+        }
+        patchChildren(receiptTargets, entry.kind !== "feature" || jobs.length <= 1 ? [] : [
+            h("div", { class: "ui-list" }, ...jobs.map(job => {
+                const step = featureJobStep(job);
+                return row({ leading: statusDot(job.status === "complete" ? "success" : job.status === "failed" ? "danger" : "accent", job.status === "running"), title: `Step ${step?.step ?? "?"} · ${job.steps[0]?.title.split(" · ").at(-1)?.replace(/ \[[^\]]+\]$/, "") ?? ""}`, meta: [chip(plural(value.activity.transactions.filter(tx => tx.jobId === job.id).length, "transaction"), { tone: withTx(job) ? "info" : "neutral" })], selected: job.id === target.id, onSelect: () => { receiptJob = job.id; ctx.rerender(); } });
+            }))
+        ]);
+        receiptActions.dataset.job = target.id;
+    }
+}