@parity/product-lab 0.0.1-placeholder → 0.1.0

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

@@ -0,0 +1,288 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { ActorRoster } from "@parity/product-lab/domain/actors";
+import { offConfigItems } from "@parity/product-lab/domain/lab/resolved-config";
+import { avatar, chip, configLine, copyToClipboard, h, hostHued, hostIcon, icon, iconButton, infoTip, patchChildren, row, segmented } from "./ui.js";
+import { byId } from "./shell-kit.js";
+import { actingActors } from "./views.js";
+import { onLabDocuments } from "./lab-document.js";
+import { originHelp, originWords } from "./identity-words.js";
+export const VIEW_CHOICES = [
+    { value: "pinned", label: "Focus", icon: "focus", title: "Show the selected identity's app" },
+    { value: "grid", label: "Compare", icon: "grid", title: "Show every running identity side by side" },
+    { value: "follow", label: "Follow acting", icon: "eye", title: "Show whoever the running step acts as" },
+];
+export function viewModeControl(ctx, onChange, followId) {
+    const select = byId("view-mode");
+    const control = segmented(VIEW_CHOICES, select.value || "pinned", value => { ctx.choose(select, value); onChange?.(); }, "View mode");
+    for (const node of control.querySelectorAll("button")) {
+        node.dataset.view = node.dataset.value;
+        node.disabled ||= select.disabled;
+        if (select.title)
+            node.title = select.title;
+        if (followId && node.dataset.value === "follow")
+            node.id = followId;
+    }
+    control.classList.add("view-mode-control");
+    const about = infoTip("How the stage shows the people", VIEW_CHOICES.map(choice => `${choice.label}: ${choice.title.charAt(0).toLowerCase()}${choice.title.slice(1)}.`).join("\n"), { className: "view-mode-about", size: 14 });
+    return h("span", { class: "view-mode-wrap" }, control, about);
+}
+export function identityStatusChip(actor) {
+    const status = actor.status ?? "running";
+    const tone = status === "running" ? "success" : status === "starting" ? "accent" : status === "failed" ? "danger" : "neutral";
+    const node = chip(status, { tone, dot: status !== "stopped", title: actor.error ? `${status}: ${actor.error}` : status });
+    node.classList.add("identity-status");
+    node.dataset.status = status;
+    return node;
+}
+function existingChip() {
+    const node = chip("existing", { tone: "neutral", title: "A pre-onboarded account: the lab never creates, funds or deletes it" });
+    node.classList.add("identity-existing");
+    return node;
+}
+const theHost = (name) => (/\bhost$/i.test(name) ? `the ${name}` : `the ${name} host`);
+function hostChip(host, name) {
+    const on = host.options ?? [];
+    const label = [host.label, ...on].join(" · ");
+    const title = `${name}'s wallet runs in ${theHost(host.label)}${on.length ? `, with ${on.join(" and ")}` : ""}${host.network ? `. ${host.network.why}` : ""}`;
+    const node = hostHued(chip(label, { tone: "neutral", icon: hostIcon(host.id), title }), host.color);
+    node.classList.add("identity-host");
+    node.dataset.host = host.id;
+    if (on.length)
+        node.dataset.hostOptions = on.join("|");
+    return node;
+}
+function hostLimitChips(host) {
+    return (host.limits ?? []).map((limit) => {
+        const node = chip(limit.label, { tone: "warning", icon: "triangle-alert", title: `${limit.why}${host.description ? `. ${host.description}` : ""}` });
+        node.classList.add("identity-host-limit");
+        node.dataset.limit = limit.label;
+        return node;
+    });
+}
+function hostOptionSwitches(host) {
+    const options = host.options ?? [];
+    if (!options.length)
+        return { values: () => ({}) };
+    const read = [];
+    const rows = options.map(option => {
+        const fixed = !option.perIdentity || !host.available;
+        const why = option.perIdentity ? option.why : `${option.why}. Set for this host in the lab config: hosts.${host.id}.options.${option.name}`;
+        if (option.type === "choice") {
+            const select = h("select", { class: "new-identity-host-choice", "data-host-option": option.name, disabled: fixed, title: why, "aria-label": option.label }, ...(option.choices ?? []).map(choice => h("option", { value: choice.value, selected: choice.value === option.value }, choice.label)));
+            read.push(() => (select.value !== option.value ? [option.name, select.value] : undefined));
+            return h("label", { class: "new-identity-host-switch is-choice", title: why }, h("span", { class: "new-identity-host-switch-label" }, option.label), select);
+        }
+        const input = h("input", { type: "checkbox", role: "switch", class: "new-identity-host-toggle", "data-host-option": option.name, checked: option.value === true, disabled: fixed, title: why, "aria-label": option.label });
+        read.push(() => (input.checked !== option.value ? [option.name, input.checked] : undefined));
+        return h("label", { class: "new-identity-host-switch", title: why }, input, h("span", { class: "new-identity-host-switch-label" }, option.label));
+    });
+    return {
+        node: h("div", { class: "new-identity-host-options", role: "group", "aria-label": `${host.label ?? host.kind} options` }, ...rows),
+        values: () => Object.fromEntries(read.map(entry => entry()).filter((entry) => entry !== undefined)),
+    };
+}
+function offHosts(value) {
+    const config = value.registry?.config;
+    const off = config?.shape === "product" ? offConfigItems(config.entries).filter(item => item.area === "host") : [];
+    const byKind = new Map((value.unconfiguredHosts ?? []).map(host => [host.kind, host]));
+    for (const item of off)
+        byKind.set(item.id, { kind: item.id, label: byKind.get(item.id)?.label ?? item.label, why: byKind.get(item.id)?.why ?? item.why, turnOn: item.change ?? byKind.get(item.id)?.turnOn ?? "lab.config.ts gives no line for it yet" });
+    return [...byKind.values()];
+}
+function hostMenu(hosts, unconfigured, choose) {
+    const teaching = unconfigured.map(host => h("div", { class: "new-identity-host-option is-unconfigured", role: "menuitem", "aria-disabled": "true", "data-host-kind": host.kind,
+        "data-config-off": `hosts.${host.kind}`, title: `${host.label}: ${host.why}. Not configured in this lab: add ${host.turnOn}` }, h("span", { class: "new-identity-check", "aria-hidden": "true" }, ""), h("span", { class: "new-identity-kind" }, icon(hostIcon(host.kind), 12), host.label), h("small", {}, host.why), configLine("Not configured · add to lab.config.ts:", host.turnOn)));
+    const cards = [];
+    const pick = (id) => { for (const card of cards)
+        card.dataset.picked = String(card.dataset.host === id); };
+    const menu = h("div", { class: "new-identity-menu", role: "menu", "aria-label": "New identity on" }, h("div", { class: "new-identity-menu-title" }, "New identity on"), ...hosts.map(host => {
+        const switches = hostOptionSwitches(host);
+        const item = h("button", { type: "button", role: "menuitemradio", id: `new-identity-on-${host.id}`, class: "new-identity-host-option", "aria-checked": String(host.default), "data-host": host.id,
+            disabled: !host.available, title: host.available ? `Create a new identity on ${theHost(host.label ?? host.kind)} (hosts.${host.id} in the lab config)` : host.reason, onclick: () => choose(host.id, switches.values()) }, h("span", { class: "new-identity-check", "aria-hidden": "true" }, host.default ? icon("check", 14) : ""), hostHued(h("span", { class: "new-identity-kind" }, icon(hostIcon(host.kind), 12), host.label ?? host.kind), host.color));
+        const about = host.description;
+        const line = host.available ? [host.default ? "Default" : "", about].filter(Boolean).join(" · ") : (host.reason ?? "Not available here");
+        if (line)
+            item.append(h("small", {}, line));
+        const card = switches.node ? h("div", { class: "new-identity-host-group", "data-host": host.id }, item, switches.node) : item;
+        for (const type of ["pointerdown", "focusin", "change"])
+            switches.node?.addEventListener(type, () => pick(host.id));
+        cards.push(card);
+        return card;
+    }), ...(teaching.length ? [h("div", { class: "new-identity-menu-title" }, "Not configured in this lab"), ...teaching] : []));
+    pick((hosts.find(host => host.default && host.available) ?? hosts.find(host => host.available) ?? hosts[0])?.id ?? "");
+    return menu;
+}
+const NARROW_ROW_PX = 320;
+export function createIdentitiesView(ctx) {
+    const pane = ctx.pane("identities");
+    const viewSlot = h("div", { class: "identities-toolbar" });
+    const identityList = h("div", { class: "ui-list identity-list", id: "identity-list", "aria-label": "Identities" });
+    new ResizeObserver(([entry]) => { const narrow = String((entry?.contentRect.width ?? 0) < NARROW_ROW_PX); if (identityList.dataset.narrow !== narrow)
+        identityList.dataset.narrow = narrow; }).observe(identityList);
+    pane.prepend(viewSlot, identityList);
+    for (const id of ["identity-management", "identity-removal-hint", "restart"])
+        ctx.stored.append(byId(id));
+    const newIdentity = byId("new-identity");
+    newIdentity.className = "ui-button ui-button--primary ui-button--md";
+    newIdentity.replaceChildren(icon("plus"), h("span", {}, "New identity"));
+    const reserveCount = chip("0 identities ready", { title: "Hidden identities already prepared for this environment" });
+    reserveCount.classList.add("identity-reserve");
+    reserveCount.hidden = true;
+    const hostToggle = h("button", { type: "button", id: "new-identity-host", class: "ui-button ui-button--primary ui-button--md new-identity-toggle", "aria-haspopup": "menu", "aria-expanded": "false", "aria-label": "Choose the host for a new identity", title: "Choose the host for a new identity", hidden: true }, icon("chevron-down", 14));
+    const split = h("div", { class: "new-identity-split" }, newIdentity, hostToggle);
+    new MutationObserver(() => { hostToggle.disabled = newIdentity.disabled; if (newIdentity.disabled)
+        closeHostMenu(); }).observe(newIdentity, { attributes: true, attributeFilter: ["disabled"] });
+    ctx.footer("identities").append(reserveCount, split);
+    let menu;
+    let hostChoices;
+    let hosts = [];
+    let unconfigured = [];
+    let menuHosts = "";
+    const closeMenu = () => { menu?.remove(); menu = undefined; };
+    function closeHostMenu() { hostChoices?.remove(); hostChoices = undefined; hostToggle.setAttribute("aria-expanded", "false"); }
+    hostToggle.addEventListener("click", () => {
+        if (hostChoices)
+            return closeHostMenu();
+        hostChoices = hostMenu(hosts, unconfigured, (host, hostOptions) => { closeHostMenu(); document.dispatchEvent(new CustomEvent("new-identity-on", { detail: { host, hostOptions } })); });
+        menuHosts = JSON.stringify(hosts);
+        split.append(hostChoices);
+        hostToggle.setAttribute("aria-expanded", "true");
+        hostChoices.querySelector('[aria-checked="true"]:not(:disabled), button:not(:disabled)')?.focus();
+    });
+    onLabDocuments("pointerdown", event => {
+        if (menu && !menu.contains(event.target))
+            closeMenu();
+        if (hostChoices && !split.contains(event.target))
+            closeHostMenu();
+    });
+    onLabDocuments("keydown", event => { if (event.key === "Escape" && (menu || hostChoices)) {
+        event.preventDefault();
+        closeMenu();
+        closeHostMenu();
+    } });
+    let key = "";
+    const identity = () => byId("identity");
+    function press(actor, control) {
+        if (identity().value !== actor)
+            ctx.choose(identity(), actor);
+        byId(control).click();
+    }
+    function openMenu(anchor, actor, reload) {
+        closeMenu();
+        const copyAccount = () => { closeMenu(); copyToClipboard(actor.account); };
+        menu = h("div", { class: "identity-menu", role: "menu", "aria-label": `${actor.name} actions` }, h("button", { type: "button", role: "menuitem", disabled: !reload, title: reload ? `Open ${actor.name}'s app again from its start page` : `${actor.name} is not running`, onclick: () => { closeMenu(); press(actor.id, "restart"); } }, "Reload app"), h("button", { type: "button", role: "menuitem", onclick: copyAccount }, "Copy account address"));
+        anchor.closest(".ui-row").append(menu);
+        menu.querySelector("button:not(:disabled)")?.focus();
+    }
+    return {
+        render(value) {
+            const selected = identity().value;
+            const view = byId("view-mode");
+            const acting = new Set(value.shell?.visible ? actingActors(value) : []);
+            const active = value.jobs.some(job => ["queued", "running", "paused", "cancelling"].includes(job.status)) || value.operation?.status === "running" || ["queued", "running"].includes(value.featureRun?.status ?? "");
+            const workspaceReady = !value.workspace || value.workspace.status === "running";
+            const manage = !!value.capabilities.manageActors;
+            hosts = value.hosts ?? [];
+            unconfigured = offHosts(value);
+            const choice = hosts.length > 1 || unconfigured.length > 0;
+            if (hostToggle.hidden === choice) {
+                hostToggle.hidden = !choice;
+                split.classList.toggle("is-split", choice);
+                if (!choice)
+                    closeHostMenu();
+            }
+            hostToggle.disabled = newIdentity.disabled;
+            const reserve = value.identityReserve;
+            reserveCount.hidden = !reserve?.capacity;
+            if (reserve?.capacity) {
+                reserveCount.textContent = `${reserve.ready} ${reserve.ready === 1 ? "identity" : "identities"} ready`;
+                reserveCount.title = reserve.error ?? `${reserve.preparing} preparing · ${reserve.capacity} kept ready`;
+            }
+            const legacy = (id) => byId(id);
+            const nextKey = JSON.stringify([value.actors, value.hosts, value.identityReserve, value.preOnboarded, selected, view.value, view.disabled, view.title, [...acting], active, workspaceReady, manage,
+                ["start-identity", "stop-identity", "delete-identity", "restart"].map(id => legacy(id).disabled)]);
+            if (nextKey === key)
+                return;
+            key = nextKey;
+            patchChildren(viewSlot, [viewModeControl(ctx, () => ctx.rerender(), "follow-actor-view")]);
+            const rows = [];
+            closeMenu();
+            if (JSON.stringify(hosts) !== menuHosts)
+                closeHostMenu();
+            for (const [index, actor] of value.actors.entries()) {
+                const status = actor.status ?? "running";
+                const isSelected = actor.id === selected;
+                const blocked = ActorRoster.removalBlockedReason(value.actors, actor.id);
+                const busy = active ? "Finish or cancel the current run first" : undefined;
+                const running = status === "running";
+                const trailing = [];
+                if (manage) {
+                    if (status === "stopped" || status === "failed") {
+                        const reason = busy ?? (!workspaceReady ? "Start the workspace first" : undefined);
+                        const start = iconButton("play", `Start ${actor.name}`, { size: "sm", disabled: !!reason || (isSelected && legacy("start-identity").disabled), title: reason, onClick: () => press(actor.id, "start-identity") });
+                        start.dataset.action = "start";
+                        trailing.push(start);
+                    }
+                    else {
+                        const reason = busy ?? blocked ?? (status === "starting" ? `${actor.name} is still starting` : undefined);
+                        const stop = iconButton("pause", `Stop ${actor.name}`, { size: "sm", disabled: !!reason || (isSelected && legacy("stop-identity").disabled), title: reason, onClick: () => press(actor.id, "stop-identity") });
+                        stop.dataset.action = "stop";
+                        trailing.push(stop);
+                    }
+                    const reason = busy ?? blocked;
+                    if (actor.kind !== "preOnboarded") {
+                        const remove = iconButton("trash", `Delete ${actor.name}`, { size: "sm", variant: "danger", disabled: !!reason || (isSelected && legacy("delete-identity").disabled), title: reason, onClick: () => press(actor.id, "delete-identity") });
+                        remove.classList.add("identity-delete");
+                        remove.dataset.action = "delete";
+                        trailing.push(remove);
+                    }
+                }
+                const more = iconButton("more", `More for ${actor.name}`, { size: "sm", onClick: event => openMenu(event.currentTarget, actor, running) });
+                more.setAttribute("aria-haspopup", "menu");
+                more.dataset.action = "more";
+                trailing.push(more);
+                const meta = [identityStatusChip(actor)];
+                if (actor.host)
+                    meta.push(hostChip(actor.host, actor.name), ...hostLimitChips(actor.host));
+                if (actor.kind === "preOnboarded")
+                    meta.push(existingChip());
+                if (acting.has(actor.id))
+                    meta.push(chip("Acting", { tone: "accent", dot: true }));
+                const item = row({
+                    leading: avatar(actor.name, index, "lg"),
+                    title: h("span", { class: "identity-name" }, h("strong", {}, actor.name)),
+                    subtitle: actor.error && status === "failed" ? h("span", { class: "identity-error", title: actor.error }, actor.error)
+                        : h("span", { class: "identity-origin", title: originHelp(actor.origin), "data-origin": actor.origin?.kind }, [actor.username?.trim(), originWords(actor.origin)].filter(Boolean).join(" · ")),
+                    meta, trailing, selected: isSelected, label: actor.name,
+                    onSelect: () => { if (!isSelected)
+                        ctx.choose(identity(), actor.id); },
+                });
+                item.classList.add("identity-row");
+                item.dataset.actor = actor.id;
+                item.dataset.key = `actor:${actor.id}`;
+                item.dataset.status = status;
+                rows.push(item);
+            }
+            for (const existing of value.preOnboarded ?? []) {
+                if (existing.openedAs && value.actors.some(actor => actor.id === existing.openedAs))
+                    continue;
+                const reason = existing.problem ?? (active ? "Finish or cancel the current run first" : undefined);
+                const open = iconButton("play", `Open ${existing.name}`, { size: "sm", disabled: !!reason, title: reason ?? `Open ${existing.name}'s existing account (wallet from secret ${existing.secretName})`,
+                    onClick: () => document.dispatchEvent(new CustomEvent("open-pre-onboarded", { detail: { name: existing.name } })) });
+                open.dataset.action = "open";
+                const item = row({
+                    leading: avatar(existing.name, value.actors.length, "lg"),
+                    title: h("span", { class: "identity-name" }, h("strong", {}, existing.name)),
+                    subtitle: existing.problem ? h("span", { class: "identity-error", title: existing.problem }, existing.problem) : (existing.liteUsername ?? `wallet from secret ${existing.secretName}`),
+                    meta: [existingChip(), chip("not open", { tone: "neutral" })], trailing: [open], label: existing.name,
+                });
+                item.classList.add("identity-row", "is-pre-onboarded");
+                item.dataset.preOnboarded = existing.name;
+                item.dataset.key = `pre:${existing.name}`;
+                rows.push(item);
+            }
+            patchChildren(identityList, rows);
+        },
+    };
+}

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

@@ -0,0 +1,9 @@
+/* Recordings (Phase 9): the history. The replay viewer and its ribbon are in view-replay.css. */
+.rec { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); }
+.rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.rec-head h3 { margin: 0; font-size: var(--text-lg); }
+.rec-head-title { display: flex; align-items: center; gap: 4px; }
+.rec-head-info > summary { width: 24px; height: 24px; }
+.rec-muted { margin: 0; color: var(--secondary); font-size: var(--text-sm); }
+.rec-error { color: var(--danger); }
+.rec-list .ui-row { cursor: pointer; }

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

@@ -0,0 +1,127 @@
+/* The replay viewer (Phase 9) as redesign mockup 4 draws it: in the panel, the recording's title, its recorded steps,
+   the selected step's failure, chain notes and evidence and the run bundle's actions; on the stage (workspace-shell.ts's slots), a
+   banner over the tiles, a recorded tile per identity in the live app's place and a step scrubber under them. Tokens
+   and components only: a replay is marked by an info-toned outline (no stripes, no fills), the selected step is
+   outlined in accent. */
+.rec-title h3 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; font-size: var(--text-lg); }
+
+/* A replay is visibly not live: the banner over the tiles, said once. */
+/* The banner never cuts its words: the step's title wraps to a second line when it must. */
+.rec-ribbon { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px var(--space-2); min-width: 0; min-height: 40px; padding: 6px 6px 6px 14px; border: 1px solid color-mix(in srgb, var(--info) 55%, transparent); border-radius: var(--radius-row); background: color-mix(in srgb, var(--info) 8%, var(--surface)); color: var(--info); font-size: var(--text-sm); }
+.rec-ribbon-step { color: var(--secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* One line (backlog 110): the step's title gives way with an ellipsis (whole in its tooltip), never Back to live. */
+.rec-ribbon > strong { flex: 1 1 0; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+@media (max-width: 600px) { .rec-ribbon { flex-wrap: wrap; } .rec-ribbon > strong { flex-basis: 12em; white-space: normal; overflow-wrap: anywhere; } }
+.rec-ribbon .ui-segmented { flex-shrink: 0; }
+.rec-ribbon .ui-segmented button { min-height: 0; height: 24px; padding: 0 8px; font-size: var(--text-xs); }
+.rec-ribbon-lock { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--secondary); font-size: var(--text-xs); white-space: nowrap; }
+.rec-ribbon-info { flex-shrink: 0; }
+.rec-ribbon-info > summary { width: 26px; height: 26px; }
+.rec-ribbon-back { flex-shrink: 0; min-height: 0; height: 28px; padding: 0 12px; border-radius: var(--radius-control); white-space: nowrap; }
+/* In a replay the segment says Replay, unfaded (the design's 4-replay): Watch and Background are not pressed, and the
+   run controls are hidden (workspace-shell.ts); the segment stays inert until Back to live. */
+body[data-replay="true"] .run-mode button[data-run-mode][aria-pressed="true"] { background: transparent; color: var(--secondary); }
+
+/* The recorded tiles take the live app's place; the app stays mounted (and inert) under them, untouched. */
+body[data-replay="true"] .workspace > #application, body[data-replay="true"] #environment-offline { display: none; }
+.rec-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(440px, 1fr) minmax(320px, 1fr); gap: calc(var(--frame-gap) + 4px); overflow: auto; container-type: inline-size; }
+/* Backlog 110: the evidence column beside the frames; on a narrow stage the evidence first, the frames below it. */
+.rec-tiles { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--rec-tiles, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(var(--frame-gap) + 4px); container-type: inline-size; }
+@container (max-width: 560px) { .rec-tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(360px, auto); overflow: auto; } }
+.rec-stage[hidden] { display: none; }
+.rec-tile { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); cursor: pointer; }
+.rec-tile.is-acting { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
+.rec-tile:not(.is-acting).is-selected { border-color: var(--line-strong); }
+.rec-tile-head { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 46px; padding: 0 12px 0 10px; color: var(--secondary); font-size: var(--text-xs); white-space: nowrap; }
+.rec-tile-head > strong { min-width: 0; overflow: hidden; color: var(--ink); font: var(--weight-strong) var(--text-lg) / 1.2 var(--font-display); letter-spacing: -0.01em; text-overflow: ellipsis; }
+.rec-tile-head > small { color: var(--tertiary); }
+.rec-tile-head > .spacer { flex: 1; }
+.rec-tile .rec-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; background: var(--surface-sunken); }
+.rec-tile .rec-frame img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: top center; }
+.rec-tile .rec-frame-empty, .rec-tile .rec-frame > .ui-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); color: var(--secondary); font-size: var(--text-sm); text-align: center; }
+.rec-tile .rec-note { flex-shrink: 0; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--surface); }
+.rec-note { margin: 0; color: var(--secondary); font-size: var(--text-xs); }
+
+/* The step scrubber: a dot per step at its time in the run, the line filled up to the selected one. */
+.rec-scrubber { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); }
+.rec-scrub-times { align-self: center; flex-shrink: 0; color: var(--secondary); font: var(--text-xs) / 1.6 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.rec-scrub-track { position: relative; height: 32px; }
+.rec-scrub-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; border-radius: 1px; background: linear-gradient(to right, var(--accent) var(--done, 0%), var(--line-strong) var(--done, 0%)); }
+.rec-scrub-step { position: absolute; top: 50%; left: var(--at, 0%); display: grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; transform: translate(-50%, -50%); border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--secondary); font: var(--weight-strong) var(--text-2xs) / 1 var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
+.rec-scrub-step[data-tone="success"] { border-color: var(--success); color: var(--success); }
+.rec-scrub-step[data-tone="danger"] { border-color: var(--danger); background: var(--danger); color: #fff; }
+.rec-scrub-step[data-tone="warning"] { border-color: var(--warning); color: var(--warning); }
+.rec-scrub-step.is-selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
+.rec-scrub-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.rec-scrub-step.is-static { border-style: dashed; cursor: default; }
+.rec-scrub-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--secondary); font-size: var(--text-xs); }
+.rec-scrub-controls .rec-muted { flex: 1; min-width: 0; text-align: right; }
+
+.rec-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+
+/* The recorded steps in the panel: one row each, the selected one outlined in accent. */
+.rec-steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.rec-steps > li { margin: 0; }
+.rec-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-height: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-row); background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
+.rec-step.is-static { cursor: default; color: var(--secondary); }
+.rec-step:hover { background: var(--soft); }
+.rec-step.is-selected { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
+.rec-step-mark { display: grid; place-items: center; height: 20px; color: var(--tertiary); }
+.rec-step[data-tone="success"] .rec-step-mark { color: var(--success); }
+.rec-step[data-tone="danger"] .rec-step-mark { color: var(--danger); }
+.rec-step[data-tone="warning"] .rec-step-mark { color: var(--warning); }
+.rec-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+/* Backlog 160: a new identity's readings under its row, wrapping like the step's words. */
+.rec-step-readings { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.rec-step-readings li { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
+.rec-step-readings li[data-ok="false"] { color: var(--danger); }
+.rec-step-line { min-width: 0; font-size: var(--text-sm); line-height: 20px; overflow-wrap: anywhere; }
+.rec-step-actor { margin-right: 6px; font-weight: var(--weight-medium); white-space: nowrap; }
+.rec-step-actor .ui-avatar--sm { display: inline-grid; width: 16px; height: 16px; margin-right: 4px; font-size: 8px; line-height: 16px; vertical-align: text-bottom; }
+.rec-step-text > small { color: var(--tertiary); font: var(--text-2xs) / 1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
+
+
+.rec-chain h4 { margin: 0 0 4px; font-size: var(--text-md); }
+/* One line per chain, transaction and block, no bullets; nothing runs past the panel's edge. */
+.rec-chain ul { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
+.rec-chain li { display: block; min-width: 0; margin: 0; color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.rec-chain li > strong { margin-right: 2px; }
+.rec-chain li .ui-button { width: 22px; height: 22px; min-height: 0; margin-left: 4px; padding: 0; vertical-align: middle; }
+
+/* The replay's run bundle actions (backlogs 20 and 26, bundle-actions.ts): their own block under the title. */
+.rec-bundle { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-card); }
+.rec-bundle-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.rec-bundle-file { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
+/* Backlog 110: whether the run can be reproduced, before the click; body size, never truncated. */
+.rec-bundle-reproducible { margin: 0; font-size: var(--text-md); line-height: 1.45; overflow-wrap: anywhere; }
+.rec-bundle-reasons { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
+/* The block is a narrow column: a banner's actions go under its words (aligned with them, past the icon), not beside. */
+.rec-bundle .ui-banner { flex-wrap: wrap; }
+.rec-bundle .ui-banner-actions { flex-basis: 100%; flex-wrap: wrap; padding-left: 26px; }
+.rec-bundle .ui-banner-body p { margin: 0 0 var(--space-1); }
+#bundle-reproduce-report p { margin: 0; overflow-wrap: anywhere; }
+/* Not reproducible here: one line that opens on why (backlog 110). */
+/* margin: 0 over shell.css's legacy details, summary and button defaults. */
+.rec-bundle-why { margin: 0; }
+.rec-bundle-why button { margin-top: 0; }
+.rec-bundle-why[open] > :not(summary) { margin-top: var(--space-2); }
+.rec-bundle-why > summary { cursor: pointer; color: var(--ink); font-size: var(--text-md); line-height: 1.45; }
+.rec-bundle-why > summary strong { margin-right: 4px; }
+.rec-bundle:has(> .rec-bundle-why:not([open])) { padding-block: var(--space-2); }
+
+@media (max-width: 600px) {
+  .rec-stage { grid-template-columns: minmax(0, 1fr); }
+}
+/* A stage too narrow for both columns (1024 px windows): the evidence, then the frames, one under the other. */
+@media (max-width: 1200px) {
+  .rec-stage { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; }
+  .rec-stage > .ev { overflow: visible; min-height: auto; }
+  .rec-stage > .rec-tiles { height: 520px; }
+}
+/* Backlog 192: the hosts' logs a run kept, each path whole (it wraps, never cut). */
+.rec-host-logs { display: flex; flex-direction: column; gap: 6px; margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
+.rec-host-logs-title { margin: 0; color: var(--ink); font: var(--weight-strong) var(--text-sm) / 1.3 var(--font-ui); }
+.rec-host-logs ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.rec-host-logs li { display: flex; flex-direction: column; gap: 2px; color: var(--secondary); font-size: var(--text-xs); }
+.rec-host-logs small { color: var(--tertiary); }
+.rec-host-log-path { font: var(--text-2xs) / 1.35 var(--font-mono); overflow-wrap: anywhere; color: var(--ink); user-select: all; }

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

@@ -0,0 +1,31 @@
+/* The run report (Evidence & reports): result, reconciliation, navigation, observation, evidence and receipts. Moved
+   unchanged from view-runs.css (redesign step 6, part A); tokens and components only. The redesign (step 6): rows on the
+   12 px radius with no dividers or grey fills; outline rows tinted by their state. */
+
+.run-evidence { display: flex; flex-direction: column; gap: var(--space-3); }
+.run-evidence-head .ui-row { padding: 4px 0; }
+.run-evidence-tabs .ui-tabs { margin-bottom: 2px; }
+.run-tab { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
+.run-tab[hidden] { display: none; }
+.run-evidence-list .ui-row { min-height: 40px; border-radius: var(--radius-row); }
+.run-step-evidence { margin: 0 0 var(--space-2) 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-row); }
+.run-step-evidence > summary { min-height: 30px; color: var(--secondary); font-size: var(--text-xs); }
+.run-nav-active:empty { display: none; }
+.run-nav-active { display: flex; flex-direction: column; gap: 4px; }
+.run-nav-events { margin: 0; padding: 0; list-style: none; }
+.run-nav-events:empty { display: none; }
+.run-receipts { display: flex; flex-direction: column; gap: var(--space-3); }
+.run-receipts[hidden] { display: none; }
+.run-receipt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.run-receipt-actions[hidden] { display: none; }
+.run-landing { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.run-landing:empty { display: none; }
+.run-landing li { position: relative; padding: 8px 10px 8px 26px; border: 1px solid var(--line); border-radius: var(--radius-row); background: transparent; font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
+.run-landing li::before { content: ""; position: absolute; left: 10px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary); }
+.run-landing li[data-status="succeeded"] { border-color: color-mix(in srgb, var(--success) 50%, transparent); }
+.run-landing li[data-status="succeeded"]::before { background: var(--success); }
+.run-landing li[data-status="failed"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
+.run-landing li[data-status="failed"]::before { background: var(--danger); }
+.run-raw pre { max-height: 280px; border-radius: var(--radius-row); }
+.run-raw figcaption .ui-button { min-height: 22px; }
+.run-chain-state { margin-top: var(--space-4); }

package/entrypoints/panel/src/client/view-run-steps.css

@@ -0,0 +1,98 @@
+/* The Run tab's step list (run-steps.ts, panel redesign step 6): status icons on a rail without a line, keywords as
+   coloured words, one mono detail line per step, the selected step outlined with "Checked twice" under it. Scoped to
+   .rs: the library, the builder and failures keep gherkin.css's look. */
+.rs .gk-steps { display: flex; flex-direction: column; gap: 2px; }
+.rs .gk-phase { display: none; }
+.rs .gk-step { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-row); animation: none; }
+.rs .gk-step::before { display: none; }
+.rs .gk-step.rs-step { cursor: pointer; }
+.rs .gk-step.rs-step:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
+.rs .gk-step.rs-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.rs .gk-step[data-status="running"] { background: transparent; }
+.rs .gk-step[data-status="skipped"] { opacity: 0.6; }
+
+/* The rail: the status icon alone, in its tone; no filled discs. */
+.rs .gk-rail, .rs .gk-step[data-status] .gk-rail { width: 22px; height: 22px; background: transparent; color: var(--tertiary); animation: none; }
+.rs .gk-step[data-status="passed"] .gk-rail { color: var(--success); }
+.rs .gk-step[data-status="failed"] .gk-rail { color: var(--danger); }
+.rs .gk-step[data-status="running"] .gk-rail { color: var(--accent); }
+.rs .gk-step[data-status="paused"] .gk-rail { color: var(--warning); }
+.rs .gk-step[data-status="running"] .gk-rail svg { animation: rs-spin 1.2s linear infinite; }
+@keyframes rs-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .rs .gk-step[data-status="running"] .gk-rail svg { animation: none; } }
+
+/* Keywords: the phase's colour on the word, no chip. */
+.rs .gk-keyword { min-width: 0; height: auto; padding: 0; background: none; font: var(--weight-strong) var(--text-md) / 20px var(--font-ui); letter-spacing: 0; }
+.rs .gk-sentence { gap: 6px; }
+.rs .gk-step-body { gap: 4px; }
+
+/* Who acted · what it waits for or why it failed · how long: one mono line. */
+.rs-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--tertiary); font: var(--text-2xs) / 1.6 var(--font-mono); }
+.rs-meta > * + *::before { content: "·"; margin-right: 6px; color: var(--tertiary); }
+/* Backlog 160: each step's two checks in one short line; it wraps like the step's words. */
+.rs-sides { color: var(--secondary); font: var(--text-2xs) / 1.6 var(--font-mono); overflow-wrap: anywhere; }
+.rs-checks-missing { display: flex; gap: 6px; align-items: baseline; margin: 4px 0; color: var(--warning, #b45309); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.rs-meta .gk-detail { padding: 0; border-radius: 0; background: none; color: var(--tertiary); font: inherit; }
+.rs-meta .gk-detail--failed { color: var(--danger); }
+.rs-meta .gk-duration { margin: 0; padding: 0; font: inherit; }
+/* A negative control's step that failed as intended: the lab caught it, in the control's (info) tone. */
+.rs-caught { display: flex; gap: 6px; align-items: center; color: var(--info); font-size: var(--text-xs); font-weight: var(--weight-strong); }
+.rs .gk-step[data-caught] .gk-rail, .rs .gk-step[data-caught] .rs-meta .gk-detail--failed { color: var(--info); }
+.rs .gk-step.is-selected[data-caught] { border-color: color-mix(in srgb, var(--info) 55%, transparent); background: color-mix(in srgb, var(--info) 7%, transparent); }
+
+/* The selected step: outlined in its state's tone with a light tint (running accent, paused warning, as the mockups). */
+.rs .gk-step.is-selected { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
+.rs .gk-step.is-selected[data-status="failed"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
+.rs .gk-step.is-selected[data-status="paused"] { border-color: color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 7%, transparent); }
+.rs .gk-step.is-selected[data-status="passed"] { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 5%, transparent); }
+
+/* Checked twice: the screen and the chain, one card each. */
+.rs-checks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); cursor: default; }
+/* A sentence ("Verified on Ada's screen and on the chain"), so sentence case: it was the "Checked twice" eyebrow. */
+.rs-checks-head { display: flex; align-items: center; gap: 6px; color: var(--secondary); font: var(--weight-strong) var(--text-xs) / 1.3 var(--font-ui); }
+.rs-check { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
+.rs-check[data-state="failed"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
+.rs-check-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+/* A card's title wraps: "Submitted by the lab (not a check)" is read whole in a narrow drawer, never cut. */
+.rs-check-head strong { flex: 1; min-width: 0; color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
+/* The lab's own transactions are no check: a dashed card, apart from the screen and chain cards. */
+.rs-check[data-kind="lab"] { border-style: dashed; }
+.rs-check-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--secondary); flex-shrink: 0; }
+.rs-check[data-state="passed"] .rs-check-icon { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
+.rs-check[data-state="failed"] .rs-check-icon { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
+.rs-check[data-state="waiting"] .rs-check-head .ui-chip svg, .rs-check[data-state="watching"] .rs-check-head .ui-chip svg { animation: rs-spin 1.2s linear infinite; }
+.rs-check-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
+/* margin: 0 over shell.css's legacy li defaults. */
+.rs-check-rows li { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--secondary); font-size: var(--text-sm); }
+.rs-check-rows li > svg { flex-shrink: 0; color: var(--tertiary); }
+.rs-check-rows li[data-ok="true"] > svg { color: var(--success); }
+.rs-check-rows li[data-ok="false"] > svg { color: var(--danger); }
+.rs-check-rows li[data-ok="pending"] > svg { color: var(--warning); animation: rs-spin 1.2s linear infinite; }
+.rs-check-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+/* Backlog 160: a side's reading says what it found in a sentence: it wraps under its label, never cut. */
+.rs-check-rows li[data-reading] { flex-wrap: wrap; align-items: baseline; }
+.rs-check-rows li[data-reading] .rs-check-label { flex: 1 1 0; }
+.rs-check-rows li[data-reading] .rs-check-value { flex: 1 1 100%; max-width: none; margin-left: 21px; overflow: visible; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+/* A value keeps its width beside a long label (the label wraps instead), and wraps itself past 65%: never cut. */
+.rs-check-value { flex: 0 0 auto; max-width: 65%; margin-left: auto; color: var(--ink); font: var(--text-xs) / 1.4 var(--font-mono); text-align: right; overflow-wrap: anywhere; }
+.rs-check-evidence > summary { min-height: 28px; color: var(--tertiary); font-size: var(--text-xs); }
+@media (prefers-reduced-motion: reduce) { .rs-check svg { animation: none !important; } }
+
+/* A failed step that may have sent a transaction (after-failure-view.ts): the lab's check of the chain under its
+   error, with a spinner while it checks, then its answer. The words wrap; nothing to press. */
+.rs-after-failure { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--surface-muted, color-mix(in srgb, var(--secondary) 10%, transparent)); color: var(--secondary); font-size: var(--text-xs); line-height: 1.4; }
+.rs-after-failure > .ui-icon { flex: none; margin-top: 1px; }
+.rs-after-failure > span { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; white-space: normal; }
+.rs-after-failure.is-working > .ui-icon { animation: after-failure-spin 0.9s linear infinite; }
+@keyframes after-failure-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .rs-after-failure .ui-icon { animation: none !important; } }
+/* Backlog 164: the switch the lab window made for a run, as its first step (run-steps.ts preludeNode). */
+.rs-prelude { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-card); margin-bottom: 8px; }
+.rs-prelude .gk-rail { color: var(--tertiary); flex-shrink: 0; }
+.rs-prelude[data-status="running"] .gk-rail svg { animation: rs-spin 1.2s linear infinite; }
+.rs-prelude[data-status="passed"] .gk-rail { color: var(--success); }
+.rs-prelude[data-status="failed"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
+.rs-prelude[data-status="failed"] .gk-rail { color: var(--danger); }
+.rs-prelude-body { min-width: 0; }
+.rs-prelude-title { color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.rs-prelude-detail { overflow-wrap: anywhere; }