@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/evidence-model.js

@@ -0,0 +1,179 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { screenNotShown, sideReadings } from "@parity/product-lab/domain/checks";
+import { observedAppGaps } from "@parity/product-lab/domain/runs/host-bypass-verdict";
+import { CATEGORY_WORDS } from "./host-bypass-model.js";
+import { hostRequestWords } from "./host-request-words.js";
+import { callWords, checksHeading } from "./run-steps.js";
+import { shortenLongWords } from "./replay-chain.js";
+const firstLine = (text) => text.split("\n").find((line) => line.trim() && !/^\s+at\s/.test(line))?.trim() ?? text;
+export const plainWords = (text) => text
+    .replace(/\b(\d+) ([a-z]+)\(s\)/gi, (_, count, word) => `${count} ${word}${count === "1" ? "" : "s"}`)
+    .replace(/\b(\d{4,}) ?ms\b/g, (_, ms) => `${Math.round(Number(ms) / 100) / 10} s`)
+    .replace(/(\d) (s|ms|MB|KiB|MiB)\b/g, "$1\u00a0$2");
+export const short = (text) => shortenLongWords(plainWords(text)).text;
+function ordered(readings) {
+    return [...readings].sort((a, b) => Number(a.ok) - Number(b.ok));
+}
+function disagreed(readings) {
+    const failed = new Set(readings.filter((reading) => !reading.ok).map((reading) => reading.side));
+    if (failed.size === 2)
+        return "Both sides disagreed: the screen and the chain each missed what was expected.";
+    if (failed.has("chain"))
+        return readings.some((reading) => reading.side === "screen" && reading.ok) ? "The chain side disagreed: the screen showed it, the chain did not hold it." : "The chain side disagreed.";
+    if (failed.has("screen"))
+        return readings.some((reading) => reading.side === "chain" && reading.ok) ? "The screen side disagreed: the chain held it, the screen did not show it." : "The screen side disagreed.";
+    return "";
+}
+export function runVerdict(recording) {
+    if (recording.status !== "failed")
+        return undefined;
+    const of = recording.featureSteps?.length ? ` of ${recording.featureSteps.length}` : "";
+    const failed = recording.steps.find((step) => step.status === "failed");
+    if (!failed) {
+        const failure = recording.runnerFailure;
+        const at = failure?.featureStep ?? recording.featureSteps?.find((step) => step.status === "failed")?.featureStep;
+        return { where: at !== undefined ? `Failed at step ${at}${of}` : "Failed", sentence: short(firstLine(failure?.error ?? recording.error ?? "The run failed outside its recorded steps.")), side: "Which side disagreed is not recorded: the failure came from outside the lab's steps." };
+    }
+    const position = failed.featureStep ?? failed.index + 1;
+    const readings = ordered(sideReadings(failed.attached));
+    if (!readings.length)
+        return { step: failed.index, where: `Failed at step ${position}${of}`, sentence: short(firstLine(failed.error ?? recording.error ?? "The step failed.")), side: "Which side disagreed is not recorded: this step's check kept no reading of each side." };
+    const sentence = readings.filter((reading) => !reading.ok).map((reading) => `${reading.place}: ${firstLine(reading.found)}`).join("; ") || firstLine(failed.error ?? "The step failed.");
+    return { step: failed.index, where: `Failed at step ${position}${of}`, sentence: short(sentence.charAt(0).toUpperCase() + sentence.slice(1)), side: disagreed(readings) };
+}
+function headingOf(readings, calls, who, changesNothing = false, notShown) {
+    const state = (items) => (items.some((item) => !item.ok) ? "failed" : "passed");
+    const screen = readings.filter((reading) => reading.side === "screen");
+    const chain = readings.filter((reading) => reading.side === "chain");
+    const whose = (reading) => reading.place.replace(/'s screen$/i, "");
+    const places = [...new Set(screen.map(whose))];
+    if (places.length > 1) {
+        const failedOn = places.filter((place) => screen.some((reading) => whose(reading) === place && !reading.ok));
+        const screens = (names) => names.map((name) => `${name}'s screen`).join(names.length > 2 ? ", " : " and ");
+        const said = [
+            failedOn.length ? `failed on ${screens(failedOn)}` : "",
+            failedOn.length < places.length ? `verified on ${screens(places.filter((place) => !failedOn.includes(place)))}` : "",
+            chain.length ? `${state(chain) === "failed" ? "failed" : "verified"} on the chain` : changesNothing ? "this step changes nothing on chain" : "no chain check for this step",
+        ].filter(Boolean).join("; ");
+        return said.charAt(0).toUpperCase() + said.slice(1);
+    }
+    const cards = [];
+    if (screen.length)
+        cards.push({ kind: "screen", title: `${places[0]}'s screen`, who: places[0], state: state(screen), rows: [] });
+    else if (calls?.length)
+        cards.push({ kind: "screen", title: `${who}'s screen`, who, state: state(calls), rows: [] });
+    if (chain.length)
+        cards.push({ kind: "chain", title: "The chain", state: state(chain), rows: [] });
+    if (cards.length)
+        return checksHeading(cards, { changesNothing, ...(notShown ? { screenNotShown: notShown } : {}) });
+    if (changesNothing)
+        return "Changes nothing on chain; nothing was read on screen";
+    return calls === undefined && !readings.length ? "Which sides this step read was not recorded" : "No side of this step was read: it kept no reading and made no call on screen";
+}
+function screenSection(recording, step, who) {
+    const title = `What the lab did on ${who}'s screen`;
+    if (!recording.uiCalls)
+        return { title, state: "not recorded", source: "the lab window", rows: [], note: "This run kept no calls on screen, only its frames: it ran headless, or before the lab kept them." };
+    const calls = recording.uiCalls.steps.find((item) => item.step === step.index)?.calls ?? [];
+    const own = calls.filter((call) => !step.actor || call.actor === step.actor);
+    if (!own.length)
+        return { title, state: "seen", source: "the lab window", rows: [], note: `No call on ${who}'s screen in this step.` };
+    return {
+        title,
+        state: "seen",
+        source: "the lab window",
+        rows: own.map((call) => ({
+            mark: call.ok ? "ok" : "failed",
+            words: callWords({ ...call, call: call.call }),
+            detail: [`${call.call}${call.target ? ` ${call.target}` : ""} · ${call.durationMs} ms`, call.error].filter(Boolean).join("\n"),
+        })),
+    };
+}
+function said(key, value) {
+    const words = key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
+    return /\bms$/.test(words) && /^\d+(\.\d+)?$/.test(value) ? `${words.replace(/ ?ms$/, "")}: ${value} ms` : `${words}: ${value}`;
+}
+function appSaid(step) {
+    const value = step.evidence;
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return undefined;
+    const words = Object.entries(value)
+        .filter(([key, item]) => key !== "surface" && (typeof item === "string" || typeof item === "number" || typeof item === "boolean"))
+        .map(([key, item]) => said(key, short(String(item))));
+    return words.length ? words.join(" · ") : undefined;
+}
+export const HOST_LANE_ABOUT = {
+    asked: "Each approval the person's host gave or refused while this step ran, from the host's own log: what a person would be asked to confirm.",
+    around: "An app should reach chains only through the person's host, so the person approves what it sends. The lab watches the app's page and workers for connections of their own to a chain.",
+    chain: "What landed on the chains while this step ran, and who sent it: the chain itself, the person's host, the lab's setup, or nobody the lab knows.",
+};
+function hostLane(recording, step, who) {
+    const sections = [];
+    const asked = recording.hostRequests;
+    if (!asked)
+        sections.push({ title: `What ${who}'s app asked the host`, state: "not recorded", source: "the host's own log", rows: [], note: "This run's sessions passed no request log to the lab.", about: HOST_LANE_ABOUT.asked });
+    else {
+        const own = asked.steps.filter((item) => item.step === step.index && (!step.actor || item.actor === step.actor));
+        const gaps = asked.gaps.filter((item) => item.step === step.index && (!step.actor || item.actor === step.actor));
+        const rows = own.flatMap((item) => hostRequestWords(item.requests).map((request) => ({ mark: request.denied ? "failed" : "ok", words: request.words, detail: `${item.app}: the host's words "${request.host}"` })));
+        if (gaps.length && !rows.length)
+            sections.push({ title: `What ${who}'s app asked the host`, state: "not recorded", source: "the host's own log", rows: [], note: gaps.map((gap) => gap.reason).join("; "), about: HOST_LANE_ABOUT.asked });
+        else
+            sections.push({ title: `What ${who}'s app asked the host`, state: "seen", source: "the host's own log", about: HOST_LANE_ABOUT.asked, rows, ...(rows.length ? {} : { note: "Nothing: the app asked its host for nothing during this step." }), ...(gaps.length ? { note: `Partly unknown: ${gaps.map((gap) => gap.reason).join("; ")}` } : {}) });
+    }
+    const audit = step.hostBypass;
+    const app = audit?.apps.find((item) => item.actor === step.actor);
+    if (!audit || !app)
+        sections.push({ title: "Connections around the host", state: "not recorded", source: "the browser (page and workers)", about: HOST_LANE_ABOUT.around, rows: [], note: audit ? `No audit of ${who}'s app in this step.` : "This step kept no host-bypass audit." });
+    else {
+        const groups = new Map();
+        for (const connection of app.connections.filter((item) => item.steps.includes(step.index))) {
+            const chain = connection.chain ?? connection.endpoint;
+            const key = `${connection.operation}\u0000${chain}`;
+            const group = groups.get(key) ?? { count: 0, operation: connection.operation, chain, endpoints: new Set() };
+            group.count++;
+            group.endpoints.add(connection.endpoint);
+            groups.set(key, group);
+        }
+        const shared = app.gaps.some((gap) => /share a browser context/i.test(gap));
+        const rows = [...groups.values()].map((group) => ({
+            mark: group.operation === "submit" ? (shared ? "unknown" : "failed") : group.operation === "opaque" ? "unknown" : "none",
+            words: `${group.count} ${group.operation === "submit" ? "submission" : group.operation === "opaque" ? "message the lab could not decode" : "read"}${group.count === 1 ? "" : "s"} to ${group.chain}`,
+            detail: [...group.endpoints].join(", "),
+        }));
+        const observed = observedAppGaps(app.gaps);
+        const unwatched = observed.filter((gap) => /no page\/frame\/worker|provides no passive|coverage is unavailable|began after/i.test(gap));
+        const others = observed.filter((gap) => !unwatched.includes(gap) && !/^Opaque /.test(gap));
+        const gaps = [...unwatched, ...others];
+        if (!rows.length && unwatched.length)
+            sections.push({ title: "Connections around the host", state: "not observed", source: "the browser (page and workers)", about: HOST_LANE_ABOUT.around, rows: [], note: `No connection was seen, but the lab could not watch all of ${who}'s app's traffic: none seen is not none.`, gaps });
+        else
+            sections.push({ title: "Connections around the host", state: "seen", source: "the browser (page and workers)", about: HOST_LANE_ABOUT.around, rows, note: rows.length ? (gaps.length ? "What the lab saw; it could not see everything:" : "Every connection the app opened around its host.") : `None: ${who}'s app reached no chain by itself in this step: everything went through its host.`, ...(gaps.length ? { gaps } : {}) });
+    }
+    const entries = audit?.ledger.filter((entry) => entry.steps.includes(step.index)) ?? [];
+    if (!audit)
+        sections.push({ title: "On the chain during the step", state: "not recorded", source: "the step's finalized blocks", about: HOST_LANE_ABOUT.chain, rows: [] });
+    else {
+        const counts = new Map();
+        for (const entry of entries)
+            counts.set(entry.category, [...(counts.get(entry.category) ?? []), entry]);
+        const rows = [...counts].map(([category, items]) => ({
+            mark: CATEGORY_WORDS[category].mark,
+            words: CATEGORY_WORDS[category].words(items.length),
+            detail: items.map((item) => `${item.chain} #${item.block.number}: ${item.reason}`).join("\n"),
+        }));
+        const unread = [...new Set(entries.filter((entry) => entry.gap !== undefined || entry.decoded !== "complete").map((entry) => entry.gap ?? (entry.decoded === "partial" ? "an extrinsic only partly decoded" : "an extrinsic the lab could not decode")))];
+        const note = [rows.length ? "" : "No extrinsic was finalized during this step.", unread.length ? `Not read in full: ${unread.join("; ")}.` : ""].filter(Boolean).join(" ");
+        sections.push({ title: "On the chain during the step", state: "seen", source: "the step's finalized blocks", about: HOST_LANE_ABOUT.chain, rows, ...(note ? { note } : {}) });
+    }
+    const reason = app?.gaps.find((gap) => !observedAppGaps([gap]).length);
+    return { ...(app ? { verdict: app.verdict } : {}), ...(reason ? { reason } : {}), sections };
+}
+export function stepEvidence(recording, step, who) {
+    const sides = ordered(sideReadings(step.attached));
+    const screen = screenSection(recording, step, who);
+    const calls = recording.uiCalls?.steps.find((item) => item.step === step.index)?.calls.filter((call) => !step.actor || call.actor === step.actor);
+    const said = appSaid(step);
+    return { heading: headingOf(sides, calls, who, step.mutates === false, screenNotShown(step.attached)), sides, screen, ...(said ? { appSaid: said } : {}), host: hostLane(recording, step, who) };
+}

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

@@ -0,0 +1,82 @@
+/* The evidence of a recorded run on the stage (backlog 110, evidence-view.ts): a wide readable column beside the
+   recorded frames, below them on a narrow stage. Body text 13 px or more, no all-caps paragraphs, nothing truncated
+   (long ids are shortened in the text and whole in the tooltip), one idea per row, red only for the side that
+   disagrees, monospace only under Raw. */
+.ev { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); color: var(--ink); font-size: var(--text-md); line-height: 1.5; }
+.ev h4, .ev h5, .ev p, .ev dl, .ev ul { margin: 0; }
+.ev-muted, .ev-source, .ev-took { color: var(--secondary); }
+
+.ev-verdict { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--danger); border-radius: var(--radius-card); background: var(--danger-soft); }
+.ev-verdict-where { display: flex; align-items: center; gap: var(--space-2); color: var(--danger); font-size: var(--text-md); }
+.ev-verdict-where strong { color: var(--danger); }
+.ev-verdict-sentence { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.45; overflow-wrap: anywhere; }
+.ev-verdict-side { color: var(--ink); overflow-wrap: anywhere; }
+.ev-go { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: var(--weight-medium); text-decoration: underline; cursor: pointer; }
+
+.ev-step-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.ev-step-head h4 { font: var(--weight-strong) var(--text-xl) / 1.25 var(--font-display); letter-spacing: -0.01em; }
+.ev-took { margin-left: auto; font-size: var(--text-md); }
+.ev-step-title { font-size: var(--text-lg); overflow-wrap: anywhere; }
+.ev-heading { font-weight: var(--weight-medium); }
+.ev-error { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--danger); background: var(--danger-soft); overflow-wrap: anywhere; }
+.ev-note { color: var(--secondary); overflow-wrap: anywhere; }
+
+.ev-sides { display: grid; gap: var(--space-3); }
+.ev-side { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
+.ev-side.is-failed { border-color: var(--danger); }
+.ev-side-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
+.ev-side-head h5 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
+.ev-side-head .ui-icon, .ev-side-head svg { color: var(--success); flex-shrink: 0; }
+.ev-side.is-failed .ev-side-head .ui-icon, .ev-side.is-failed .ev-side-head svg { color: var(--danger); }
+.ev-side-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); }
+.ev-side-facts dt { color: var(--secondary); }
+.ev-side-facts dd { margin: 0; overflow-wrap: anywhere; }
+.ev-side.is-failed .ev-found { color: var(--danger); font-weight: var(--weight-medium); }
+
+.ev-section { display: flex; flex-direction: column; gap: var(--space-2); }
+.ev-section-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.ev-section-head h5 { font-size: var(--text-md); font-weight: var(--weight-strong); }
+.ev-source { margin-left: auto; font-size: var(--text-sm); }
+.ev-rows { display: flex; flex-direction: column; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-row); }
+.ev-row { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); color: var(--ink); overflow-wrap: anywhere; }
+.ev-row + .ev-row { border-top: 1px solid var(--line); }
+.ev-mark { display: inline-flex; flex-shrink: 0; margin-top: 3px; }
+.ev-mark[data-tone="success"] { color: var(--success); }
+.ev-mark[data-tone="danger"] { color: var(--danger); }
+.ev-mark[data-tone="warning"] { color: var(--warning); }
+.ev-mark[data-tone="neutral"] { color: var(--secondary); }
+.ev-app-said { overflow-wrap: anywhere; }
+
+.ev-host { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
+.ev-host-head { display: flex; align-items: center; gap: var(--space-2); }
+.ev-host-head h4 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
+.ev-raw, .ev-more { border-top: 1px solid var(--line); padding-top: var(--space-2); }
+.ev-raw pre { max-height: 360px; overflow: auto; }
+/* The step's chains, console and health (step-evidence.ts, recordings.ts) read at the column's size, in sentence case. */
+.ev-row, .ev-more, .ev-more p, .ev-more li, .ev-more h4, .ev-more h5, .ev-more .rec-muted { font-size: var(--text-md); }
+.ev-more h4, .ev-more h5 { text-transform: none; letter-spacing: normal; }
+
+/* The host-bypass audit (host-bypass.ts, backlog 110): the evidence's rows and words, no dump. */
+.run-host-bypass { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--ink); font-size: var(--text-md); line-height: 1.5; }
+.run-host-bypass p, .run-host-bypass h4, .run-host-bypass ul { margin: 0; }
+.run-host-bypass details { margin: 0; }
+.run-host-bypass details > summary { color: var(--ink); font-size: var(--text-md); }
+.hb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.hb-headline { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
+.hb-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.hb-muted { color: var(--secondary); }
+.hb-why-line { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
+/* The (i) beside a title keeps its own colour, not the audit's summary ink. */
+.run-host-bypass .ui-infotip:not([open]) > summary:not(:hover) { color: var(--secondary); }
+/* A section's (i) opens under its whole header, at the column's width, so its words wrap inside the panel (the lab-window
+   proof, 6 October 2026: anchored at the (i) they ran past the panel's edge). */
+.hb-head, .ev-section-head { position: relative; }
+.hb-about, .ev-about { position: static; }
+.hb-about .ui-infotip-pop, .ev-about .ui-infotip-pop { left: 0; right: 0; width: auto; max-width: none; white-space: normal; overflow-wrap: anywhere; }
+.hb-people { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; }
+.hb-people > li { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; color: var(--ink); font-size: var(--text-md); }
+.hb-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.hb-findings { display: flex; flex-direction: column; gap: var(--space-2); }
+.hb-fold { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-row); }
+.hb-fold > summary { line-height: 1.45; overflow-wrap: anywhere; }
+.hb-fold[open] > .ui-disclosure-body { margin-top: var(--space-2); }

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

@@ -0,0 +1,9 @@
+import type { RunRecordingData } from "@parity/product-lab/domain/recordings";
+export interface EvidenceViewOptions {
+    /** A person's name from an identity id. */
+    name(id: string | undefined): string;
+    /** Select a recorded step (the verdict's "Go to step"). */
+    select(index: number): void;
+}
+/** The stage column for `recording`, its step `index` selected. */
+export declare function evidenceView(recording: RunRecordingData, index: number, options: EvidenceViewOptions): HTMLElement;

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

@@ -0,0 +1,56 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { readingBlockWords } from "@parity/product-lab/domain/checks";
+import { runVerdict, short, stepEvidence } from "./evidence-model.js";
+import { chip, codeBlock, disclosure, h, icon, infoTip } from "./ui.js";
+const MARK = {
+    ok: { icon: "check", tone: "success", label: "as expected" },
+    failed: { icon: "close", tone: "danger", label: "not as expected" },
+    unknown: { icon: "help", tone: "warning", label: "cannot be told" },
+    none: { icon: "minus", tone: "neutral", label: "noted" },
+};
+const STATE_TONE = { seen: "success", "not observed": "warning", "not recorded": "neutral" };
+const VERDICT_TONE = { clean: "success", allowed: "info", warning: "warning", failed: "danger", incomplete: "warning" };
+function rowNode(row) {
+    const mark = MARK[row.mark];
+    return h("li", { class: "ev-row", "data-mark": row.mark, ...(row.detail ? { title: row.detail } : {}) }, h("span", { class: "ev-mark", "data-tone": mark.tone, "aria-label": mark.label }, icon(mark.icon, 14)), h("span", { class: "ev-words" }, short(row.words)));
+}
+function sectionNode(section, key) {
+    return h("section", { class: "ev-section", "data-evidence": key, "data-state": section.state }, h("header", { class: "ev-section-head" }, h("h5", {}, section.title), section.about ? infoTip(`About ${section.title.charAt(0).toLowerCase()}${section.title.slice(1)}`, section.about, { className: "ev-about" }) : null, chip(section.state, { tone: STATE_TONE[section.state] }), h("span", { class: "ev-source" }, `source: ${section.source}`)), section.rows.length ? h("ul", { class: "ev-rows" }, ...section.rows.map(rowNode)) : null, section.note ? h("p", { class: "ev-note" }, short(section.note)) : null, section.gaps?.length ? h("ul", { class: "ev-rows ev-gaps", "aria-label": "What the lab could not see" }, ...section.gaps.map((gap) => rowNode({ mark: "unknown", words: gap }))) : null);
+}
+function sideNode(reading) {
+    return h("section", { class: `ev-side${reading.ok ? "" : " is-failed"}`, "data-side": reading.side, "data-ok": String(reading.ok) }, h("header", { class: "ev-side-head" }, icon(reading.ok ? "passed" : "failed", 16), h("h5", {}, reading.place.charAt(0).toUpperCase() + reading.place.slice(1)), chip(reading.ok ? "as expected" : "disagrees", { tone: reading.ok ? "success" : "danger" })), h("dl", { class: "ev-side-facts" }, h("dt", {}, "Expected"), h("dd", {}, short(reading.expected)), h("dt", {}, "Found"), h("dd", { class: "ev-found" }, short(reading.found)), ...(reading.how ? [h("dt", {}, "Read"), h("dd", {}, reading.how)] : []), 
+    ...(reading.at ? [h("dt", {}, "At"), h("dd", { class: "ev-at", ...(reading.at.block?.hash ? { title: reading.at.block.hash } : {}) }, readingBlockWords(reading.at))] : [])));
+}
+export function evidenceView(recording, index, options) {
+    const column = h("section", { class: "ev", id: "replay-evidence", "aria-label": "What this run shows" });
+    const verdict = runVerdict(recording);
+    if (verdict) {
+        const go = verdict.step !== undefined && verdict.step !== index
+            ? h("button", { type: "button", class: "ev-go", id: "evidence-go-failed", onclick: () => options.select(verdict.step) }, `Go to step ${(recording.steps[verdict.step]?.featureStep ?? verdict.step + 1)}`, icon("down", 14))
+            : null;
+        column.append(h("section", { class: "ev-verdict", id: "evidence-verdict", role: "status" }, h("p", { class: "ev-verdict-where" }, icon("failed", 16), h("strong", {}, verdict.where)), h("p", { class: "ev-verdict-sentence" }, verdict.sentence), h("p", { class: "ev-verdict-side" }, verdict.side), go ? h("p", { class: "ev-verdict-go" }, go) : null));
+    }
+    const step = recording.steps[index];
+    if (!step) {
+        column.append(h("p", { class: "ev-note" }, "No step was recorded."));
+        return column;
+    }
+    const who = options.name(step.actor);
+    const evidence = stepEvidence(recording, step, who);
+    const ms = step.startedAt !== undefined && step.finishedAt !== undefined ? step.finishedAt - step.startedAt : undefined;
+    const took = ms === undefined ? step.status : ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`;
+    column.append(h("header", { class: "ev-step-head" }, h("h4", {}, `Step ${step.featureStep ?? step.index + 1}`, step.actor ? ` · ${who}` : ""), chip(step.status === "complete" ? "passed" : step.status, { tone: step.status === "failed" ? "danger" : step.status === "complete" ? "success" : "neutral" }), h("span", { class: "ev-took" }, took)), h("p", { class: "ev-step-title" }, short(step.title.replace(/\s*\[[a-z0-9.]+\]$/i, ""))), h("p", { class: "ev-heading", id: "evidence-heading" }, evidence.heading));
+    if (step.error && !(verdict?.step === index && !evidence.sides.length) && evidence.sides.every((side) => side.ok))
+        column.append(h("p", { class: "ev-error" }, short(step.error.split("\n").find((line) => line.trim()) ?? step.error)));
+    if (evidence.sides.length)
+        column.append(h("div", { class: "ev-sides" }, ...evidence.sides.map(sideNode)));
+    column.append(sectionNode(evidence.screen, "screen"));
+    if (evidence.appSaid)
+        column.append(h("p", { class: "ev-app-said" }, h("strong", {}, "The step reported: "), evidence.appSaid, h("span", { class: "ev-muted" }, " (as the step returned it; the lab did not check these against the chain or the screen)")));
+    column.append(h("section", { class: "ev-host", "data-evidence": "host" }, h("header", { class: "ev-host-head" }, h("h4", {}, `${who}'s host`), evidence.host.verdict ? chip(evidence.host.verdict, { tone: VERDICT_TONE[evidence.host.verdict] ?? "neutral" }) : null), evidence.host.reason ? h("p", { class: "ev-note ev-host-reason" }, short(evidence.host.reason)) : null, ...evidence.host.sections.map((section, position) => sectionNode(section, ["host-asked", "host-traffic", "host-chain"][position] ?? "host"))));
+    const raw = { ...(step.evidence !== undefined ? { returned: step.evidence } : {}), ...(step.attached ? { attached: step.attached } : {}), ...(step.hostBypass ? { hostBypass: step.hostBypass } : {}) };
+    if (Object.keys(raw).length)
+        column.append(disclosure("The step's full record (JSON)", [codeBlock(JSON.stringify(raw, null, 2), { mediaType: "application/json", label: "The step's evidence as recorded, redacted" })], { class: "ev-raw" }));
+    return column;
+}

package/entrypoints/panel/src/client/extensions.d.ts

@@ -0,0 +1,21 @@
+import type { Execution, ExtensionView, LabSnapshot } from "@parity/product-lab/ports/driving";
+import type { InputField } from "@parity/product-lab/ports/lab";
+/** The package README's section on custom panels, on the package's npm page (the repository is private). */
+export declare const HOW_TO_ADD_A_PANEL = "https://www.npmjs.com/package/@parity/product-lab#custom-panels";
+export interface ExtensionsOptions {
+    element: <T extends HTMLElement>(id: string) => T;
+    request: (path: string, input?: unknown) => Promise<unknown>;
+    /** Run a registered action as the selected identity, as its generated Run button does. */
+    run: (id: string, inputs: Record<string, unknown>) => Promise<void>;
+    snapshot: () => LabSnapshot | undefined;
+    selected: () => string;
+}
+export declare function createExtensions(options: ExtensionsOptions): {
+    load: (environmentId: string) => Promise<boolean>;
+    reset: () => void;
+    decorateForm: (form: HTMLFormElement, actionId: string, inputs: Record<string, InputField>) => void;
+    renderResult: (container: HTMLElement, run: Execution | null | undefined) => void;
+    /** Pass each snapshot to the extensions that listen (inside their boundaries). */
+    activity(snapshot: LabSnapshot): void;
+    views: () => ExtensionView[];
+};