@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/island.js

@@ -0,0 +1,199 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { SETUP_LABEL } from "@parity/product-lab/domain/actors";
+import { ACTIVE_STATES, shortDuration } from "./run-progress.js";
+import { stepIdentity } from "./principals.js";
+import { checkpointPlace } from "./checkpoint.js";
+import { h, patchChildren } from "./ui.js";
+import { callDoing, callTargetPhrase } from "./run-steps.js";
+const clean = (title) => title.split(" · ").at(-1).replace(/ \[[^\]]+\]$/, "");
+const median = (values) => { const sorted = [...values].sort((a, b) => a - b); const middle = Math.floor(sorted.length / 2); return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2; };
+export function stepEstimate(jobs, title, except) {
+    const durations = jobs.flatMap((job) => job.steps.filter((step) => step !== except && step.status === "complete" && step.startedAt !== undefined && step.finishedAt !== undefined && clean(step.title) === title).map((step) => step.finishedAt - step.startedAt));
+    return durations.length ? { ms: median(durations), runs: durations.length } : undefined;
+}
+function callState(call, name) {
+    switch (call.phase) {
+        case "follow": return { wait: { kind: "app", text: `${name}'s frame to follow its app` } };
+        case "ready": {
+            const target = callTargetPhrase(call);
+            return { wait: { kind: "app", text: `${target} to be ready`, ...(target === "the app" ? {} : { target }) } };
+        }
+        case "lane-wait": return { wait: { kind: "lane", text: "the input lane (another identity's input)" } };
+        default: return { doing: callDoing(call) };
+    }
+}
+const APP_SENT_LINGER_MS = 15_000;
+function observedState(tx, name, snapshot, now) {
+    const status = tx.status === "pending" ? "submitted" : tx.status === "retracted" ? "failed" : tx.status;
+    return transactionState({ id: tx.id, label: name, chain: tx.chain, status, startedAt: tx.firstSeenAt, updatedAt: tx.updatedAt, ...(tx.includedAt !== undefined ? { includedAt: tx.includedAt } : {}), ...(tx.block ? { block: tx.block } : {}) }, snapshot, now, true);
+}
+function transactionState(tx, snapshot, now, observed = false) {
+    const chain = snapshot.activity.chains.find((item) => item.id === tx.chain);
+    const best = chain?.best?.number, finalized = chain?.finalized?.number;
+    const at = tx.block?.number ?? (tx.status === "submitted" ? best : undefined);
+    return {
+        label: tx.label, chain: tx.chain, status: tx.status,
+        ...(tx.block ? { block: tx.block.number } : {}),
+        ...(best !== undefined ? { best } : {}),
+        ...(finalized !== undefined ? { finalized } : {}),
+        ...(at !== undefined && finalized !== undefined && tx.status !== "finalized" ? { behind: Math.max(0, at - finalized) } : {}),
+        sinceMs: now - (tx.includedAt ?? tx.submittedAt ?? tx.startedAt),
+        ...(observed ? { observed: true } : {}),
+    };
+}
+export function transactionWait(tx) {
+    if (tx.status === "submitted")
+        return { kind: "block", text: `inclusion of ${tx.label}${tx.best !== undefined ? ` (best #${tx.best})` : ""}` };
+    if (tx.status === "included")
+        return { kind: "block", text: `finality of #${tx.block ?? "?"}${tx.finalized !== undefined ? `: finalized #${tx.finalized}, ${tx.behind ?? 0} behind` : ""}` };
+    return undefined;
+}
+export function islandState({ snapshot, entry, calls = [], now }) {
+    const name = (id) => (id ? snapshot.actors.find((actor) => actor.id === id)?.name ?? id : SETUP_LABEL);
+    const chains = snapshot.activity.chains.filter((chain) => chain.best || chain.finalized).map((chain) => `${chain.label} #${chain.best?.number ?? "?"} · finalized #${chain.finalized?.number ?? "?"}`).join(" · ");
+    const operation = snapshot.operation?.status === "running" ? snapshot.operation : undefined;
+    const active = entry && ACTIVE_STATES.includes(entry.state) ? entry : undefined;
+    const observed = snapshot.activity.observed ?? [];
+    const appSent = observed.filter((tx) => tx.finishedAt === undefined ? tx.status !== "retracted" || now - tx.updatedAt < APP_SENT_LINGER_MS : now - tx.finishedAt < APP_SENT_LINGER_MS).map((tx) => ({ actorId: tx.actorId, name: name(tx.actorId), tx: observedState(tx, name(tx.actorId), snapshot, now) }));
+    const appSentNews = appSent.map((item) => `${item.name}'s app sent a transaction, ${item.tx.status}${item.tx.block !== undefined ? ` in block ${item.tx.block}` : ""}`);
+    if (!active) {
+        const mode = operation ? "operation" : "idle";
+        const title = operation ? (operation.message ?? operation.label) : entry ? `Last run: ${entry.title}` : "Ready";
+        return { mode, title, items: [], waits: [], appSent, ...(chains ? { chain: chains } : {}), announce: [operation ? title : "", ...appSentNews].filter(Boolean).join(". ") };
+    }
+    const items = [];
+    const jobs = active.jobs.filter((job) => ["running", "paused", "cancelling"].includes(job.status));
+    for (const job of jobs) {
+        job.steps.forEach((step, index) => {
+            const who = stepIdentity(step, job);
+            const id = who ?? "setup";
+            const base = { id, name: name(who), number: index + 1, total: job.steps.length, step: clean(step.title) };
+            if (step.status === "running" && step.startedAt !== undefined) {
+                const waits = [];
+                let doing;
+                for (const call of calls.filter((item) => item.endedAt === undefined && item.actor === who)) {
+                    const state = callState(call, base.name);
+                    if (state.wait)
+                        waits.push(state.wait);
+                    doing ??= state.doing;
+                }
+                for (const wait of snapshot.activity.waits.filter((item) => item.jobId === job.id && item.step === index && item.status === "waiting"))
+                    waits.push({ kind: "other", text: wait.label });
+                const txs = snapshot.activity.transactions.filter((tx) => tx.jobId === job.id && tx.step === index);
+                const live = txs.filter((tx) => tx.status !== "finalized" && tx.status !== "failed").at(-1) ?? txs.at(-1);
+                const sent = live ? undefined : observed.filter((tx) => tx.jobId === job.id && tx.step === index).at(-1);
+                const tx = live ? transactionState(live, snapshot, now) : sent ? observedState(sent, base.name, snapshot, now) : undefined;
+                const txWait = tx && transactionWait(tx);
+                if (txWait)
+                    waits.push(txWait);
+                const estimate = stepEstimate(snapshot.jobs, base.step, step);
+                items.push({ ...base, elapsedMs: now - step.startedAt, ...(estimate ? { estimate } : {}), ...(doing ? { doing } : {}), waits, ...(tx ? { tx } : {}) });
+            }
+            else if (step.status === "pending" && step.waitsFor?.length) {
+                const holding = step.waitsFor.filter((wait) => job.steps[wait.step]?.status === "running");
+                if (holding.length)
+                    items.push({ ...base, elapsedMs: 0, waits: holding.map((wait) => ({ kind: "lock", text: `${wait.resources.join(", ")} held by step ${wait.step + 1} (${name(stepIdentity(job.steps[wait.step], job))})` })) });
+            }
+        });
+    }
+    const waits = [];
+    if (operation)
+        waits.push({ kind: "host", text: `host onboarding: ${operation.message ?? operation.label}` });
+    for (const actor of snapshot.actors.filter((item) => item.status === "starting" && active.actorIds.includes(item.id)))
+        waits.push({ kind: "host", text: `${actor.name}'s host session is starting` });
+    if (active.state === "paused")
+        waits.push({ kind: "other", text: active.feature?.checkpoint?.before ? `Continue (paused ${checkpointPlace(active.feature.checkpoint)})` : "Continue (paused after a step)" });
+    const mode = active.state === "paused" ? "paused" : active.state === "stopping" ? "stopping" : "running";
+    const announce = [
+        `${active.title}: ${mode}`,
+        ...items.map((item) => `${item.name}, step ${item.number}: ${item.step}${item.tx ? `, ${item.tx.status}${item.tx.block !== undefined ? ` in block ${item.tx.block}` : ""}` : ""}${item.waits.length ? `, waits for ${item.waits.map((wait) => wait.kind === "app" || wait.kind === "lock" ? wait.kind === "app" ? "an app element" : "a lock" : wait.kind === "block" ? "a block" : wait.kind === "lane" ? "the input lane" : wait.text).join(" and ")}` : ""}`),
+        ...waits.map((wait) => `waits for ${wait.text}`),
+    ].join(". ");
+    const shownInItems = new Set(items.flatMap((item) => (item.tx?.observed ? [item.id] : [])));
+    return { mode, title: active.title, progress: active.total ? `step ${Math.min(active.at ?? active.done + 1, active.total)} of ${active.total}` : "", items, waits, appSent: appSent.filter((item) => !shownInItems.has(item.actorId)), ...(chains ? { chain: chains } : {}), announce: [announce, ...appSentNews].join(". ") };
+}
+export function itemTime(item) {
+    const elapsed = shortDuration(item.elapsedMs);
+    return item.estimate ? `${elapsed} of ~${shortDuration(item.estimate.ms)}` : elapsed;
+}
+export function transactionText(tx) {
+    const where = tx.block !== undefined ? ` #${tx.block}` : "";
+    const lag = tx.status === "included" && tx.behind !== undefined ? ` · ${tx.behind} behind finality` : tx.status === "submitted" && tx.best !== undefined ? ` · best #${tx.best}` : "";
+    return `${tx.observed ? "App sent: " : ""}${tx.label} · ${tx.status}${where}${lag}`;
+}
+export function tileWords(item) {
+    const wait = item.waits[0];
+    if (wait)
+        return wait.kind === "app" ? `waiting for ${wait.target ?? "the app"}` : wait.kind === "block" ? (item.tx?.status === "included" ? "waiting for finality" : "waiting for its block") : wait.kind === "lock" ? "waiting for a lock" : wait.kind === "lane" ? "waiting for its turn" : wait.kind === "host" ? "waiting for the host" : "waiting";
+    if (item.tx)
+        return `${item.tx.label} ${item.tx.status}${item.tx.block !== undefined ? ` #${item.tx.block}` : ""}`;
+    if (item.doing)
+        return item.doing;
+    return "acting";
+}
+export function createIsland(options) {
+    const live = h("div", { id: "island-live", class: "sr-only", role: "status", "aria-live": "polite" });
+    document.body.append(live);
+    let snapshot, receivedAt = 0, key = "", announced = "";
+    function tiles(state) {
+        for (const tile of document.querySelectorAll("#application .tile[data-actor]")) {
+            const caption = tile.querySelector("figcaption");
+            if (!caption)
+                continue;
+            let mini = tile.querySelector(".tile-island");
+            if (!mini) {
+                mini = h("span", { class: "tile-island" });
+                const state = caption.querySelector(":scope > small");
+                if (state)
+                    state.before(mini);
+                else
+                    caption.append(mini);
+            }
+            const item = state.items.find((entry) => entry.id === tile.dataset.actor);
+            const sent = item ? undefined : state.appSent.find((entry) => entry.actorId === tile.dataset.actor);
+            mini.hidden = !item && !sent;
+            if (!item) {
+                mini.dataset.wait = "";
+                if (sent) {
+                    mini.title = transactionText(sent.tx);
+                    mini.setAttribute("aria-label", mini.title);
+                    patchChildren(mini, [`app sent · ${sent.tx.status}${sent.tx.block !== undefined ? ` #${sent.tx.block}` : ""}`]);
+                }
+                else {
+                    patchChildren(mini, []);
+                    mini.title = "";
+                    mini.removeAttribute("aria-label");
+                }
+                continue;
+            }
+            mini.dataset.wait = item.waits[0]?.kind ?? "";
+            mini.title = [`Step ${item.number} of ${item.total}: ${item.step}`, `${itemTime(item)}${item.estimate ? ` (typical: the median of ${item.estimate.runs} earlier run${item.estimate.runs === 1 ? "" : "s"} of this step in this session)` : ""}`, item.doing, ...item.waits.map((entry) => `waits for ${entry.text}`), item.tx ? transactionText(item.tx) : undefined].filter(Boolean).join("\n");
+            mini.setAttribute("aria-label", mini.title.replace(/\n/g, ". "));
+            const words = tileWords(item);
+            patchChildren(mini, [h("strong", {}, "Acting"), words === "acting" ? "" : ` · ${words}`]);
+        }
+    }
+    function draw() {
+        if (!snapshot)
+            return;
+        const now = snapshot.serverTime + (Date.now() - receivedAt);
+        const state = islandState({ snapshot, entry: options.latest(), calls: options.calls.running(), now });
+        const next = JSON.stringify([state, Math.floor(now / 1000)]);
+        if (next === key)
+            return;
+        key = next;
+        tiles(state);
+        options.facts(state);
+        if (state.announce !== announced) {
+            announced = state.announce;
+            live.textContent = state.announce;
+        }
+    }
+    options.calls.subscribe(draw);
+    setInterval(draw, 1000);
+    return {
+        render(value) { snapshot = value; receivedAt = Date.now(); draw(); },
+        refreshTiles() { key = ""; draw(); },
+    };
+}

package/entrypoints/panel/src/client/keep-switch.d.ts

@@ -0,0 +1,7 @@
+import type { KeepBetweenStartsView } from "@parity/product-lab/ports/driving";
+/**
+ * The switch and its lines for the environment menu; it redraws itself when turned (the lab applies it at the next
+ * start). `fastNote`: a chain runs at the fast pace, so the switch's hover says once, while it is on, that a kept chain
+ * goes stale after hours and how to keep one for days (chain-day.ts, `KEPT_FAST_NOTE`).
+ */
+export declare function keepSwitch(view: KeepBetweenStartsView | undefined, fastNote?: string): HTMLElement | null;

package/entrypoints/panel/src/client/keep-switch.js

@@ -0,0 +1,24 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { KEEP_ABOUT, KEEP_TITLE, keepWords, turned } from "./keep-words.js";
+import { setKeepBetweenStarts } from "./settings.js";
+import { h, icon, infoTip } from "./ui.js";
+export function keepSwitch(view, fastNote) {
+    if (!view)
+        return null;
+    let shown = view;
+    const root = h("section", { class: "keep-between-starts" });
+    const draw = () => {
+        const words = keepWords(shown);
+        root.dataset.keep = String(words.on);
+        const control = h("button", { type: "button", id: "keep-between-starts", class: "settings-switch", role: "switch", "aria-checked": String(words.on), "aria-labelledby": "keep-between-starts-label", ...(words.locked ? { disabled: true, title: words.locked } : words.on && fastNote ? { title: fastNote } : {}) }, h("span", { class: "settings-switch-thumb" }));
+        control.addEventListener("click", () => {
+            shown = turned(shown, !words.on);
+            draw();
+            void setKeepBetweenStarts(!words.on);
+        });
+        root.replaceChildren(h("div", { class: "keep-head" }, h("span", { id: "keep-between-starts-label", class: "keep-title" }, KEEP_TITLE), infoTip("About keeping chain and people", KEEP_ABOUT, { className: "keep-about" }), control), h("p", { class: "keep-why" }, words.running), ...(words.later ? [h("p", { class: "keep-later" }, words.later)] : []), h("ul", { class: "keep-parts" }, ...words.parts.map((part) => h("li", { class: `keep-part${part.kept ? "" : " is-unavailable"}`, "data-keep-part": part.key, ...(part.kept ? {} : { title: part.words }) }, icon(part.kept ? "check" : "minus", 14), h("span", {}, h("strong", {}, `${part.label}: `), part.words)))));
+    };
+    draw();
+    return root;
+}

package/entrypoints/panel/src/client/keep-words.d.ts

@@ -0,0 +1,24 @@
+import type { KeepBetweenStartsView } from "@parity/product-lab/ports/driving";
+export declare const KEEP_TITLE = "Keep chain and people between starts";
+export declare const KEEP_ABOUT: string;
+export interface KeepPart {
+    readonly key: "chains" | "people";
+    readonly label: string;
+    readonly kept: boolean;
+    /** What it keeps, or why it keeps nothing and how to change that. */
+    readonly words: string;
+}
+export interface KeepWords {
+    /** The switch: what the next start does. */
+    readonly on: boolean;
+    /** Why the switch cannot be turned here (tests, CI, agents); absent when it can. */
+    readonly locked?: string;
+    /** "This start kept them: …" or "This start started clean: …". */
+    readonly running: string;
+    /** Once the switch differs from this start: when the change applies. */
+    readonly later?: string;
+    readonly parts: readonly KeepPart[];
+}
+export declare function keepWords(view: KeepBetweenStartsView): KeepWords;
+/** The view once the person turned the switch (the lab applies it at the next start). */
+export declare function turned(view: KeepBetweenStartsView, on: boolean): KeepBetweenStartsView;

package/entrypoints/panel/src/client/keep-words.js

@@ -0,0 +1,22 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export const KEEP_TITLE = "Keep chain and people between starts";
+export const KEEP_ABOUT = "Brings back the chain and the people (each identity, its wallet and its app's storage) as the last start left them, so you pick up where you stopped instead of making new people every time. " +
+    "On by default in the interactive lab (the lab window, the terminal app); product-lab test, CI and agents start clean. For one start: product-lab --keep or --clean. " +
+    "Each environment says what it keeps of its chains; a lab says what it keeps of its people with keepBetweenStarts in lab.config.ts.";
+export function keepWords(view) {
+    const { running, next } = view;
+    return {
+        on: next.keep,
+        ...(view.switchable ? {} : { locked: `Not switchable here: ${next.why}` }),
+        running: `This start ${running.keep ? "kept them" : "started clean"}: ${running.why}.`,
+        ...(next.keep !== running.keep ? { later: `The next start ${next.keep ? "keeps them" : "starts clean"}: stop and start the environment, or switch to another, for it to apply.` } : {}),
+        parts: [
+            { key: "chains", label: "Chains", kept: !!view.chains, words: view.chains ?? view.chainsNot ?? "" },
+            { key: "people", label: "People", kept: !!view.people, words: view.people ?? view.peopleNot ?? "" },
+        ],
+    };
+}
+export function turned(view, on) {
+    return { ...view, next: { keep: on, why: on ? "you turned it on" : "you turned it off" } };
+}

package/entrypoints/panel/src/client/lab-actions.d.ts

@@ -0,0 +1,9 @@
+/** Everything a message may ask the person to do. */
+export type LabAction = "reset" | "rerun" | "restart" | "retry";
+/** The buttons' one listener: each presses the window's own control (the reset dialog, the bottom bar's Rerun, …). */
+export declare function wireLabActions(options: Record<LabAction, () => void>): void;
+/** A button that runs `what` through wireLabActions' listener. */
+export declare function labActionButton(what: LabAction, options?: {
+    variant?: "primary" | "secondary";
+    id?: string;
+}): HTMLButtonElement;

package/entrypoints/panel/src/client/lab-actions.js

@@ -0,0 +1,16 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { h, icon } from "./ui.js";
+const LABEL = { reset: "Reset", rerun: "Rerun", restart: "Restart", retry: "Try again" };
+const ICON = { reset: "rotate-ccw", rerun: "refresh-cw", restart: "refresh-cw", retry: "refresh-cw" };
+export function wireLabActions(options) {
+    document.addEventListener("click", (event) => {
+        const button = event.target?.closest("button[data-lab-action]");
+        if (!button || button.disabled)
+            return;
+        options[button.dataset.labAction]?.();
+    });
+}
+export function labActionButton(what, options = {}) {
+    return h("button", { type: "button", class: `ui-button ui-button--${options.variant ?? "secondary"} ui-button--sm`, "data-lab-action": what, ...(options.id ? { id: options.id } : {}) }, icon(ICON[what], 14), LABEL[what]);
+}

package/entrypoints/panel/src/client/lab-document.d.ts

@@ -0,0 +1,10 @@
+/** The lab's own window's document while the panel lives there (undefined: the panel is docked in this page). */
+export declare function setPanelDocument(next: Document | undefined): void;
+export declare const labDocuments: () => Document[];
+export declare const findById: <T extends HTMLElement = HTMLElement>(id: string) => T;
+export declare const labQuery: <T extends Element = HTMLElement>(selector: string) => T | null;
+export declare const labQueryAll: <T extends Element = HTMLElement>(selector: string) => T[];
+/** A document-wide listener in every lab document, the lab's own window's included once it opens. */
+export declare function onLabDocuments<K extends keyof DocumentEventMap>(type: K, listener: (event: DocumentEventMap[K]) => void): void;
+/** Open a dialog in the window the person is using. */
+export declare function showModal(dialog: HTMLDialogElement): void;

package/entrypoints/panel/src/client/lab-document.js

@@ -0,0 +1,37 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+let panelDocument;
+const listeners = [];
+const moved = new Set();
+export function setPanelDocument(next) {
+    panelDocument = next;
+    if (next)
+        for (const [type, listener] of listeners)
+            next.addEventListener(type, listener);
+    else
+        for (const dialog of moved) {
+            if (dialog.open)
+                dialog.close();
+            document.body.append(dialog);
+        }
+    if (!next)
+        moved.clear();
+}
+export const labDocuments = () => (panelDocument ? [document, panelDocument] : [document]);
+export const findById = (id) => (document.getElementById(id) ?? panelDocument?.getElementById(id) ?? null);
+export const labQuery = (selector) => document.querySelector(selector) ?? panelDocument?.querySelector(selector) ?? null;
+export const labQueryAll = (selector) => labDocuments().flatMap((doc) => [...doc.querySelectorAll(selector)]);
+export function onLabDocuments(type, listener) {
+    listeners.push([type, listener]);
+    for (const doc of labDocuments())
+        doc.addEventListener(type, listener);
+}
+const usedDocument = () => (panelDocument && (panelDocument.hasFocus() || !document.hasFocus()) ? panelDocument : document);
+export function showModal(dialog) {
+    const body = usedDocument().body;
+    if (dialog.ownerDocument !== body.ownerDocument || !dialog.isConnected)
+        body.append(dialog);
+    if (body.ownerDocument === panelDocument)
+        moved.add(dialog);
+    dialog.showModal();
+}

package/entrypoints/panel/src/client/lab-menu.css

@@ -0,0 +1,11 @@
+/* The Lab menu (lab-menu.ts; lab-mockups/out/6-lab-menu): the design's places with their shortcut keys, then More.
+   Over frame.css's .menu: wider, 16 px radius, rows on the row radius, the current place tinted in accent, no dividers. */
+.lab-menu { width: 320px; max-height: calc(100vh - var(--dock-height) - 3 * var(--frame-gap)); overflow-y: auto; padding: 8px; border-color: var(--line-strong); border-radius: var(--radius-xl); }
+.lab-menu > .lab-menu-item { height: 44px; padding: 0 12px; border-radius: var(--radius-row); color: var(--ink); font-size: var(--text-md); }
+.lab-menu > .lab-menu-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
+.lab-menu > .lab-menu-item:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+.lab-menu > .lab-menu-item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
+.lab-menu > .lab-menu-item .ui-kbd { min-width: 22px; border-bottom-width: 1px; border-radius: 6px; background: transparent; color: var(--tertiary); }
+.lab-menu > .lab-menu-item[aria-current="true"] .ui-kbd { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
+.lab-menu > .menu-group { padding: 14px 12px 4px; letter-spacing: 0.08em; }
+.lab-menu > .menu-group ~ .lab-menu-item { height: 36px; color: var(--secondary); font-size: var(--text-sm); }

package/entrypoints/panel/src/client/lab-menu.d.ts

@@ -0,0 +1,44 @@
+import { type IconName } from "./ui.js";
+import type { Section } from "./shell-kit.js";
+export interface LabMenu {
+    readonly node: HTMLElement;
+    hide(): void;
+    /** Open (focusing its first item) or close; the aria-expanded of the button that opened it (`from`, else the bottom bar's) follows. */
+    toggle(from?: HTMLElement): void;
+    /** The lab's name and its environment line (the menu's accessible description; the stage and the bar show them). */
+    describe(name: string, detail: string): void;
+}
+export interface LabMenuOptions {
+    /** The bottom bar's Lab button. */
+    toggle: HTMLElement;
+    /** Show `section`; `command`: the entry that asked for it is a part of it (the chain console). */
+    show(section: Section, command?: string): void;
+    /** The Settings section's pane: the menu mounts the Settings view there. */
+    settingsPane: HTMLElement;
+    openPalette(): void;
+    /** Called before the menu opens or closes: the shell closes its other menus and pickers. */
+    beforeToggle(): void;
+}
+interface MenuEntry {
+    label: string;
+    icon: IconName;
+    section: Section;
+    key?: string;
+    command?: string;
+    after?: () => void;
+}
+/** The menu's places, in the design's order; `key` is the shortcut. */
+export declare const MENU_ENTRIES: readonly MenuEntry[];
+/** Every other section, under the places (Tools holds Actions, Extensions and Characters as its tabs). */
+export declare const MORE_ENTRIES: readonly MenuEntry[];
+/**
+ * The menu entry that stands for what the panel shows (the button on top of the tabs names it, 6 October 2026): the
+ * entry of `command` (the chain console), else of `section`, else Tools for its tabs.
+ */
+export declare function menuEntryFor(section: Section, command?: string): Pick<MenuEntry, "label" | "icon">;
+/** The entry a key opens: no modifier, and not typed into a field or a dialog. */
+export declare function shortcutEntry(event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "defaultPrevented">, target: {
+    closest(selector: string): unknown;
+} | null): MenuEntry | undefined;
+export declare function createLabMenu(options: LabMenuOptions): LabMenu;
+export {};

package/entrypoints/panel/src/client/lab-menu.js

@@ -0,0 +1,105 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { h, icon, kbd } from "./ui.js";
+import { installCursors } from "./show-cursor.js";
+import { createSettingsView } from "./settings.js";
+import { labQuery, onLabDocuments } from "./lab-document.js";
+export const MENU_ENTRIES = [
+    { label: "Current run", icon: "play", section: "activity", key: "r" },
+    { label: "Scenarios", icon: "list", section: "scenarios", key: "s" },
+    { label: "Recordings and replays", icon: "rotate-ccw-clock", section: "recordings", key: "p" },
+    { label: "Builder", icon: "blocks", section: "builder", key: "b" },
+    { label: "Chain console", icon: "terminal", section: "environment", key: "c", command: "chain-console", after: openChainConsole },
+    { label: "Environments", icon: "server", section: "environment", key: "e" },
+    { label: "Tools", icon: "wrench", section: "tools", key: "t" },
+    { label: "Settings", icon: "settings", section: "settings", key: "," },
+];
+export const MORE_ENTRIES = [
+    { label: "Identities", icon: "users", section: "identities" },
+    { label: "Run timeline", icon: "clock", section: "timeline" },
+    { label: "Past runs", icon: "rotate-ccw", section: "history" },
+    { label: "Evidence & reports", icon: "file-text", section: "evidence" },
+    { label: "Config", icon: "code", section: "config" },
+];
+const TOOLS_TABS = ["characters", "actions", "extensions"];
+export function menuEntryFor(section, command) {
+    const entries = [...MENU_ENTRIES, ...MORE_ENTRIES];
+    return (command ? entries.find(entry => entry.command === command) : undefined)
+        ?? entries.find(entry => entry.section === (TOOLS_TABS.includes(section) ? "tools" : section) && !entry.command);
+}
+function openChainConsole() {
+    const console_ = labQuery('#environment-section details.chain-console');
+    if (!console_)
+        return;
+    console_.open = true;
+    console_.scrollIntoView({ block: "start" });
+}
+export function shortcutEntry(event, target) {
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey)
+        return undefined;
+    if (target?.closest("input, textarea, select, [contenteditable]:not([contenteditable='false']), dialog"))
+        return undefined;
+    return MENU_ENTRIES.find(entry => entry.key === event.key.toLowerCase());
+}
+export function createLabMenu(options) {
+    const node = h("nav", { class: "menu lab-menu", id: "lab-menu", hidden: true, "aria-label": "Lab menu" });
+    const choose = (entry) => { node.hidden = true; options.toggle.setAttribute("aria-expanded", "false"); options.show(entry.section, entry.command); entry.after?.(); };
+    const item = (entry) => {
+        const button = h("button", { type: "button", class: "lab-menu-item", onclick: () => choose(entry) }, icon(entry.icon, 16), h("span", {}, entry.label), entry.key ? kbd(entry.key.toUpperCase()) : null);
+        if (entry.command)
+            button.dataset.command = entry.command;
+        else
+            button.dataset.section = entry.section;
+        if (entry.key) {
+            button.setAttribute("aria-keyshortcuts", entry.key === "," ? "Comma" : entry.key.toUpperCase());
+            button.querySelector("kbd").setAttribute("aria-hidden", "true");
+        }
+        return button;
+    };
+    const find = h("button", { type: "button", class: "lab-menu-item", "data-command": "find", "aria-keyshortcuts": "Meta+K Control+K", onclick: () => { node.hidden = true; options.openPalette(); } }, icon("search", 16), h("span", {}, "Find anything"), kbd("⌘ K"));
+    find.querySelector("kbd").setAttribute("aria-hidden", "true");
+    node.append(...MENU_ENTRIES.map(item), h("div", { class: "menu-group" }, "More"), ...MORE_ENTRIES.map(item), find);
+    document.body.append(node);
+    createSettingsView(options.settingsPane, installCursors());
+    let anchor = options.toggle;
+    onLabDocuments("keydown", event => {
+        if (event.key === "Escape" && !node.hidden) {
+            event.preventDefault();
+            node.hidden = true;
+            anchor.focus();
+            return;
+        }
+        const entry = shortcutEntry(event, event.target);
+        if (entry) {
+            event.preventDefault();
+            choose(entry);
+        }
+    });
+    onLabDocuments("pointerdown", event => {
+        if (!node.hidden && !node.contains(event.target) && !anchor.contains(event.target))
+            node.hidden = true;
+    });
+    return {
+        node,
+        hide() { node.hidden = true; },
+        toggle(from = options.toggle) {
+            options.beforeToggle();
+            if (from !== anchor) {
+                anchor.setAttribute("aria-expanded", "false");
+                anchor = from;
+            }
+            node.hidden = !node.hidden;
+            const box = anchor.getBoundingClientRect(), view = anchor.ownerDocument.defaultView ?? window;
+            const under = anchor !== options.toggle && box.top < view.innerHeight / 2;
+            Object.assign(node.style, under ? { top: `${box.bottom + 8}px`, bottom: "auto", left: `${Math.max(10, box.left)}px`, maxHeight: `${view.innerHeight - box.bottom - 18}px` } : { top: "", bottom: "", left: "", maxHeight: "" });
+            if (!node.hidden) {
+                const shown = labQuery("#command-center")?.dataset.section;
+                for (const button of node.querySelectorAll("button[data-section]"))
+                    button.setAttribute("aria-current", String(button.dataset.section === shown));
+                node.querySelector("button")?.focus();
+            }
+            anchor.setAttribute("aria-expanded", String(!node.hidden));
+        },
+        describe(name, detail) { node.setAttribute("aria-description", `${name} · ${detail}`); },
+    };
+}

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

@@ -0,0 +1,4 @@
+import type { TransactionCheckReport } from "@parity/product-lab/ports/driving";
+/** One line per transaction: step, source, answer, where, why. */
+export declare function landingLines(report: TransactionCheckReport): string[];
+export declare function renderLanding(container: HTMLElement, report: TransactionCheckReport): void;

package/entrypoints/panel/src/client/landing.js

@@ -0,0 +1,24 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+const short = (hash) => `${hash.slice(0, 10)}…`;
+export function landingLines(report) {
+    if (!report.transactions.length)
+        return ["This run recorded no transaction the lab can look for."];
+    return report.transactions.map((item) => {
+        const { landing } = item;
+        const where = landing.block ? ` in #${landing.block.number} (${short(landing.block.hash)}) at index ${landing.block.index}` : "";
+        const step = item.step !== undefined ? `Step ${item.step + 1} · ` : "";
+        return `${step}${item.source} · ${landing.status}${where}${landing.dispatchError ? ` · ${landing.dispatchError.type}` : ""} — ${landing.reason}`;
+    });
+}
+export function renderLanding(container, report) {
+    container.replaceChildren(...landingLines(report).map((line, index) => {
+        const item = document.createElement("li");
+        item.textContent = line;
+        const status = report.transactions[index]?.landing.status;
+        if (status)
+            item.dataset.status = status;
+        return item;
+    }));
+    container.dataset.outcome = report.outcome;
+}

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

@@ -0,0 +1,41 @@
+import type { ActorSession } from "@parity/product-lab/domain";
+import type { Execution, ExecutionStep, LabSnapshot } from "@parity/product-lab/ports/driving";
+export interface LaneEntry {
+    readonly text: string;
+    readonly status: ExecutionStep["status"] | "together";
+    /** What the chip's hover says beyond its text (a held account's address). */
+    readonly detail?: string;
+}
+export interface ActivityLanes {
+    /** Column headings: the Gherkin step (feature runs) or the scenario. */
+    readonly columns: readonly string[];
+    /** One lane per actor (in the order they first acted), then `shared`. */
+    readonly lanes: readonly {
+        readonly id: string;
+        readonly label: string;
+        readonly cells: readonly (readonly LaneEntry[])[];
+    }[];
+}
+/**
+ * A held resource in people's words: `account:<address>` of an identity in the session is "<who>'s account" (the role it
+ * plays in this run or the step's role when it is the step's own, else its name), with the shortened address for the hover; anything else as declared.
+ */
+export declare function resourceName(resource: string, run: Execution, actors: readonly ActorSession[], step?: {
+    identity?: string;
+    role?: string;
+}): {
+    name: string;
+    detail?: string;
+};
+/** The runs the lanes cover: the current (or latest) feature run's, else the latest scenario run. */
+export declare function laneRuns(snapshot: LabSnapshot): {
+    runs: Execution[];
+    columns: string[];
+};
+/** A step's short text: its call without origin prefixes or the owner suffix. */
+export declare function stepText(step: ExecutionStep): string;
+export declare function activityLanes(snapshot: LabSnapshot): ActivityLanes;
+/** The lanes of the given runs (one column each): what each actor did, and what held shared resources. */
+export declare function lanesOf(snapshot: LabSnapshot, runs: readonly Execution[], columns: readonly string[]): ActivityLanes;
+/** The lanes as rows: one per actor (its avatar and label), then shared; a chip per thing it did, numbered by step. */
+export declare function renderLanes(container: HTMLElement, view: ActivityLanes): void;