@parity/product-lab 0.0.1-placeholder → 0.1.0

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

@@ -0,0 +1,136 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { SETUP_LABEL } from "@parity/product-lab/domain/actors";
+import { avatar, chip, disclosure, empty, h, patchChildren } from "./ui.js";
+import { barBreakdown, runTimeline, SEGMENT_LABEL, SEGMENT_TRACK, SETUP_ROW, timelineDuration } from "./timeline.js";
+const STATUS_TONE = { pending: "neutral", running: "accent", complete: "success", skipped: "neutral", failed: "danger" };
+const KIND_ORDER = ["follow", "ready", "lane-wait", "lane-hold", "input", "hold", "wait", "signing", "submitted", "finality", "tx-failed", "observed"];
+function tickStep(span) {
+    const rough = span / 5;
+    const power = 10 ** Math.floor(Math.log10(Math.max(1, rough)));
+    return [1, 2, 5, 10].map((factor) => factor * power).find((step) => step >= rough) ?? rough;
+}
+function laneOf(bars, now) {
+    const ends = [];
+    return bars.map((bar) => {
+        let lane = ends.findIndex((end) => end <= bar.start);
+        if (lane < 0)
+            lane = ends.length;
+        ends[lane] = bar.end ?? now;
+        return lane;
+    });
+}
+const percent = (value) => `${Math.max(0, Math.min(100, value)).toFixed(3)}%`;
+export function renderTimeline(model, options) {
+    const span = Math.max(1, model.end - model.start, ...model.rows.flatMap((row) => row.bars.map((bar) => bar.start + Math.max((bar.end ?? options.now) - bar.start, 1) - model.start)));
+    const at = (time) => ((time - model.start) / span) * 100;
+    const kinds = new Set(model.rows.flatMap((row) => row.bars.flatMap((bar) => bar.segments.map((segment) => segment.kind))));
+    const legend = h("ul", { class: "tl-legend", "aria-label": "What the colours mean" }, ...KIND_ORDER.filter((kind) => kinds.has(kind) && kind !== "lane-hold").map((kind) => h("li", { "data-kind": kind }, h("span", { class: "tl-swatch", "data-kind": kind, "aria-hidden": "true" }), SEGMENT_LABEL[kind])));
+    const step = tickStep(span);
+    const scale = h("div", { class: "tl-scale", "aria-hidden": "true" });
+    for (let tick = 0; tick <= span; tick += step) {
+        const mark = h("span", { class: "tl-tick" }, timelineDuration(tick).replace(" ms", "ms"));
+        mark.style.left = percent((tick / span) * 100);
+        scale.append(mark);
+    }
+    const grid = h("div", { class: "tl-grid", role: "group", "aria-label": `Timeline, ${timelineDuration(span)}` }, h("div", { class: "tl-axis" }, h("span", { class: "tl-row-name" }), scale));
+    const detail = h("div", { class: "tl-detail", role: "status", "aria-live": "polite" });
+    const describe = (bar, row, into = detail) => {
+        into.replaceChildren(h("strong", {}, `${options.name(row)} · ${bar.number}. ${bar.title}`), h("span", { class: "tl-muted" }, ` ${barBreakdown(bar, options.now)}`), bar.segments.length ? h("ol", { class: "tl-segments" }, ...bar.segments.map((segment) => h("li", { "data-kind": segment.kind }, h("span", { class: "tl-swatch", "data-kind": segment.kind, "aria-hidden": "true" }), h("span", { class: "tl-offset" }, `+${timelineDuration(segment.start - bar.start)}`), segment.label))) : h("p", { class: "tl-muted" }, "Nothing more was recorded inside this step."));
+    };
+    for (const row of model.rows) {
+        const lanes = laneOf(row.bars, options.now);
+        const track = h("div", { class: "tl-track" });
+        track.style.setProperty("--tl-lanes", String(Math.max(1, ...lanes.map((lane) => lane + 1))));
+        const tone = row.kind === "setup" ? undefined : options.tone(row.id);
+        row.bars.forEach((bar, index) => {
+            const end = bar.end ?? options.now;
+            const width = Math.max(end - bar.start, 1);
+            const node = h("button", {
+                type: "button",
+                class: `tl-bar${bar.key === options.selected ? " is-selected" : ""}${bar.end === undefined ? " is-live" : ""}`,
+                "data-key": bar.key,
+                "data-status": bar.status,
+                "data-tone": STATUS_TONE[bar.status],
+                "aria-pressed": String(bar.key === options.selected),
+                "aria-label": `${options.name(row.id)}, step ${bar.number}, ${bar.title}, ${bar.status}, ${barBreakdown(bar, options.now)}`,
+                title: `${bar.number}. ${bar.title}\n${barBreakdown(bar, options.now)}`,
+                onclick: (event) => { describe(bar, row.id, event.currentTarget.closest(".tl-view")?.querySelector(".tl-detail") ?? detail); options.onSelect?.(bar); },
+            });
+            node.style.left = percent(at(bar.start));
+            node.style.width = `max(3px, ${percent((width / span) * 100)})`;
+            node.style.setProperty("--tl-lane", String(lanes[index]));
+            const label = h("span", { class: "tl-bar-label" }, String(bar.number));
+            const strips = { app: h("span", { class: "tl-strip", "data-track": "app" }), chain: h("span", { class: "tl-strip", "data-track": "chain" }) };
+            for (const segment of bar.segments) {
+                const seg = h("span", { class: "tl-seg", "data-kind": segment.kind, title: segment.label });
+                seg.style.left = percent(((segment.start - bar.start) / width) * 100);
+                seg.style.width = `max(2px, ${percent(((Math.min(segment.end, end + 1) - Math.max(segment.start, bar.start)) / width) * 100)})`;
+                strips[SEGMENT_TRACK[segment.kind]].append(seg);
+            }
+            node.append(label, strips.app, strips.chain);
+            track.append(node);
+        });
+        const name = h("span", { class: "tl-row-name", title: options.name(row.id) }, row.kind === "setup" ? chip(SETUP_LABEL, { tone: "neutral" }) : avatar(options.name(row.id), tone ?? 0, "sm"), h("span", {}, row.kind === "setup" ? "" : options.name(row.id)));
+        const line = h("div", { class: "tl-row", "data-row": row.id }, name, track);
+        if (tone !== undefined)
+            line.style.setProperty("--actor-tone", `var(--tone-${tone % 6})`);
+        grid.append(line);
+    }
+    const table = disclosure("As a table", [h("table", { class: "tl-table" }, h("thead", {}, h("tr", {}, h("th", {}, "Who"), h("th", {}, "Step"), h("th", {}, "Started"), h("th", {}, "Took and where it went"))), h("tbody", {}, ...model.rows.flatMap((row) => row.bars.map((bar) => h("tr", { "data-key": bar.key }, h("td", {}, options.name(row.id)), h("td", {}, `${bar.number}. ${bar.title}`), h("td", {}, `+${timelineDuration(bar.start - model.start)}`), h("td", {}, barBreakdown(bar, options.now)))))))], { class: "tl-table-box" });
+    const selected = model.rows.flatMap((row) => row.bars.map((bar) => ({ bar, row: row.id }))).find((item) => item.bar.key === options.selected);
+    if (selected)
+        describe(selected.bar, selected.row);
+    else
+        detail.append(h("span", { class: "tl-muted" }, "Choose a step to see where its time went."));
+    return h("section", { class: "tl", "aria-label": "Run timeline" }, legend, grid, detail, model.notes.length ? h("ul", { class: "tl-notes" }, ...model.notes.map((note) => h("li", {}, note))) : null, table);
+}
+export function createTimelineView(ctx, source) {
+    const pane = ctx.pane("timeline");
+    const root = h("div", { id: "run-timeline", class: "tl-view" });
+    pane.append(root);
+    let key = "", selected, snapshot;
+    const draw = (force = false) => {
+        if (!snapshot || pane.hidden)
+            return;
+        const entry = source.shown();
+        const now = snapshot.serverTime + (Date.now() - receivedAt);
+        const calls = source.calls.all();
+        const next = JSON.stringify([entry?.key, entry?.state, entry?.jobs.map((job) => [job.id, job.status, job.steps.map((item) => [item.status, item.finishedAt])]), snapshot.activity.transactions.length, snapshot.activity.transactions.map((tx) => tx.status).join(), (snapshot.activity.observed ?? []).map((tx) => tx.status).join(), calls.length, calls.at(-1)?.phase, selected, entry && ["running", "starting", "paused", "stopping"].includes(entry.state) ? Math.floor(now / 1000) : 0]);
+        if (!force && next === key)
+            return;
+        key = next;
+        if (!entry) {
+            patchChildren(root, [empty({ icon: "clock", title: "No run yet", body: "Run a scenario: its timeline shows where every second went, per identity and step." })]);
+            return;
+        }
+        const ids = new Set(entry.jobs.map((job) => job.id));
+        const model = runTimeline({
+            jobs: entry.jobs,
+            transactions: snapshot.activity.transactions.filter((tx) => tx.jobId !== undefined && ids.has(tx.jobId)),
+            waits: snapshot.activity.waits.filter((wait) => wait.jobId !== undefined && ids.has(wait.jobId)),
+            observed: (snapshot.activity.observed ?? []).filter((tx) => tx.jobId !== undefined && ids.has(tx.jobId)),
+            calls,
+            uiAvailable: source.calls.available,
+            finalized: Object.fromEntries(snapshot.activity.chains.flatMap((chain) => (chain.finalized ? [[chain.id, chain.finalized.number]] : []))),
+            now,
+        });
+        const actors = snapshot.actors;
+        const view = renderTimeline(model, {
+            name: (id) => (id === SETUP_ROW ? SETUP_LABEL : actors.find((actor) => actor.id === id)?.name ?? id),
+            tone: (id) => Math.max(0, actors.findIndex((actor) => actor.id === id)) % 6,
+            now,
+            ...(selected ? { selected } : {}),
+            onSelect: (bar) => { selected = bar.key; },
+        });
+        patchChildren(root, [h("header", { class: "tl-head" }, h("h3", {}, entry.title), chip(entry.state, { tone: entry.state === "passed" ? "success" : entry.state === "failed" ? "danger" : "accent" }), h("span", { class: "tl-muted" }, timelineDuration(model.end - model.start))), view]);
+    };
+    let receivedAt = Date.now();
+    source.calls.subscribe(() => draw());
+    setInterval(() => draw(), 1000);
+    new MutationObserver(() => { if (!pane.hidden)
+        draw(true); }).observe(pane, { attributes: true, attributeFilter: ["hidden"] });
+    return {
+        render(value) { snapshot = value; receivedAt = Date.now(); draw(); },
+    };
+}

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

@@ -0,0 +1,114 @@
+/* Tools: actions and blocks, extensions. Tokens and components only (tokens.css, components.css, gherkin.css). */
+
+/* Actions & blocks (registry.ts, integrations.ts, tools-fields.ts) */
+#registry { display: flex; flex-direction: column; gap: var(--space-5); }
+.tools-help { margin: 0; color: var(--secondary); font-size: var(--text-sm); line-height: 1.5; }
+/* Apps and their actions, then the integrations, then the secrets (rendered into #registry-apps). */
+#registry-apps { display: contents; }
+#registry-integrations { order: 1; }
+#registry-integrations:empty { display: none; }
+#registry-apps > .tools-section { order: 2; }
+.tools-app, .tools-section { min-width: 0; }
+.tools-app > .ui-section-header, .tools-section > .ui-section-header { align-items: center; padding: 0 2px; }
+.tools-app > .ui-section-header h3, .tools-section > .ui-section-header h3 { min-width: 0; font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; overflow-wrap: anywhere; }
+.tools-app > .ui-section-header .ui-section-actions { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
+.tools-blocked-by { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.tools-app-banner { margin-bottom: var(--space-2); padding: 8px 12px; }
+.tools-one-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tools-none { margin: 0; padding: 8px 10px; color: var(--tertiary); font-size: var(--text-sm); }
+.tools-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: -0.01em; }
+.tools-actions { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 4px; background: var(--surface); }
+
+/* One action: a row, its form opening under it, and its latest run. */
+.tools-action { margin: 0; min-width: 0; border-radius: var(--radius-row); transition: box-shadow var(--duration-fast) var(--ease); }
+.tools-action, .tools-integration { position: relative; }
+.tools-action[data-expanded="true"] { box-shadow: inset 0 0 0 1px var(--accent-line); }
+.tools-action > .ui-row { min-height: 44px; padding: 6px 8px; }
+.tools-action[data-expanded="true"] > .ui-row.is-interactive:hover { background: transparent; }
+.tools-action[data-runnable="false"] .ui-row-title { color: var(--secondary); }
+.tools-action .ui-row-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tools-action .ui-row-meta { margin-top: 2px; }
+.tools-action-state:empty { display: none; }
+.tools-action-state { display: inline-flex; }
+.tools-chip-pulse .ui-dot { animation: ui-pulse 1.4s var(--ease) infinite; }
+.tools-action-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 10px var(--space-3) 48px; }
+.tools-run-note { min-width: 0; color: var(--tertiary); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.tools-run-note:empty { display: none; }
+.tools-chevron { display: inline-grid; place-items: center; width: 22px; color: var(--tertiary); transition: transform var(--duration) var(--ease); }
+.tools-action[data-expanded="true"] .tools-chevron { transform: rotate(180deg); }
+.tools-kind { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--secondary); }
+.tools-kind--accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
+.tools-kind--info { border-color: color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); }
+.tools-kind--success { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
+.tools-kind--warning { border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
+.tools-action-body { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--duration) var(--ease), opacity var(--duration) var(--ease), visibility 0s linear var(--duration); }
+.tools-action[data-expanded="true"] > .tools-action-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--duration) var(--ease), opacity var(--duration) var(--ease), visibility 0s; }
+.tools-action-inner { min-height: 0; overflow: hidden; }
+.tools-fields { display: flex; flex-direction: column; gap: var(--space-3); padding: 4px 10px var(--space-3) 48px; }
+.tools-action-inner > :first-child.tools-action-footer { padding-top: 4px; }
+.tools-fields .field { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
+.tools-fields .field select, .tools-fields .field input[type="text"], .tools-fields .field input[type="number"], .tools-fields .field textarea { display: block; width: 100%; margin: 0; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: var(--text-sm) var(--font-ui); }
+/* A text area is a box, not a pill: rows radius. */
+.tools-fields .field textarea { padding: 8px 12px; border-radius: var(--radius-row); resize: vertical; }
+.tools-fields .field textarea.tools-json { min-height: 64px; font: var(--text-xs) / 1.55 var(--font-mono); }
+.tools-fields .field textarea.tools-json[data-invalid="true"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
+.tools-fields .check { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: var(--text-sm); }
+.tools-field-message { color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-regular); }
+.tools-field--json textarea[data-invalid="true"] ~ .tools-field-message { color: var(--danger); }
+.tools-fields .extension-box { margin: 0; }
+.tools-fields [hidden] { display: none; }
+
+/* An input that takes a table of actors: toggle identities, then each one's choices. */
+.tools-participants { display: flex; flex-direction: column; gap: var(--space-2); }
+.tools-participant-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.tools-participant { gap: 6px; min-height: 28px; padding: 0 10px 0 4px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--secondary); font-size: var(--text-xs); transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
+.tools-participants .ui-avatar--sm { font-size: var(--text-2xs); }
+.tools-participant > .ui-icon { width: 12px; height: 12px; color: var(--tertiary); }
+.tools-participant[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
+.tools-participant[aria-pressed="true"] > .ui-icon { color: var(--accent); }
+.tools-participant:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+.tools-participant-rows { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); animation: ui-fade-in var(--duration) var(--ease); }
+.tools-participant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; padding: 0 4px; color: var(--ink); font-size: var(--text-sm); }
+.tools-participant-name { flex: 1; min-width: 80px; overflow-wrap: anywhere; }
+.tools-participant-row .ui-segmented { padding: 2px; }
+.tools-participant-row .ui-segmented button { min-height: 24px; padding: 0 9px; }
+.tools-participant-row input { width: 120px; min-height: 28px; }
+
+/* A block's latest run, under its row. */
+.tools-action-outcome:empty { display: none; }
+.tools-outcome { display: flex; flex-direction: column; gap: 6px; padding: 0 10px var(--space-3) 48px; animation: ui-rise var(--duration) var(--ease); }
+.tools-outcome .ui-banner { padding: 7px 8px 7px 12px; align-items: center; }
+.tools-outcome .ui-banner-body > div { display: flex; flex-direction: column; gap: 1px; font-size: var(--text-xs); }
+.tools-outcome .ui-banner-body strong { font-size: var(--text-sm); }
+.tools-evidence:empty { display: none; }
+.tools-evidence .ui-code pre { max-height: 200px; }
+.tools-evidence-disclosure { margin: 0; border-top: 0; }
+.tools-evidence-disclosure button { margin-top: 0; }
+.tools-evidence-disclosure > summary { min-height: 28px; color: var(--secondary); font-size: var(--text-xs); }
+.tools-evidence-disclosure > .ui-disclosure-body { padding: 2px 0 0; }
+
+/* Integrations and secrets */
+.tools-section .ui-list { gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 4px; }
+.tools-section .ui-row { min-height: 44px; padding: 6px 10px; }
+.tools-integration .ui-row { align-items: flex-start; }
+.tools-dot { display: inline-grid; place-items: center; width: 16px; height: 20px; }
+.tools-integration .ui-row-subtitle { min-width: 0; }
+
+/* Extensions (extensions.ts) */
+#extensions { display: flex; flex-direction: column; gap: var(--space-4); }
+#extension-panels { display: flex; flex-direction: column; gap: var(--space-3); }
+#extension-panels:empty { display: none; }
+.tools-extension-card { padding: 0 var(--space-3); }
+.tools-extension-card + .tools-extension-card { margin-top: 0; }
+.tools-extension { margin: 0; border-top: 0; }
+.tools-extension > summary { min-height: 48px; }
+.tools-extension-title { display: inline-flex; align-items: center; gap: 10px; }
+.tools-extension-title .tools-kind { width: 26px; height: 26px; }
+.tools-extension > .ui-disclosure-body { padding: 0 0 var(--space-3); animation: ui-fade-in var(--duration) var(--ease); }
+.extension-box { min-width: 0; overflow-wrap: anywhere; }
+.extension-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-row); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
+.tools-refused[hidden] { display: none; }
+#extension-refused { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
+#extension-refused li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-size: var(--text-xs); }
+.tools-refused-reason { flex: 1 1 100%; min-width: 0; color: var(--secondary); overflow-wrap: anywhere; }
+.ui-empty a.ui-button { text-decoration: none; }

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

@@ -0,0 +1,16 @@
+import type { ToolCatalog } from "@parity/product-lab/ports/driving";
+import type { LabView, ShellContext } from "./shell-kit.js";
+export interface ToolsView extends LabView {
+    /** The catalog both tabs draw from (Characters reads it too), fetched when one of them is shown. */
+    catalog(): ToolCatalog | undefined;
+    onCatalog(listener: (catalog: ToolCatalog | undefined, error?: string) => void): void;
+    refresh(): void;
+}
+export interface ToolsViewOptions {
+    openRecording(id: string): void;
+    /** A watched tool run starts with this many people: the stage shows them all (watch-layout.ts); call the result when it ends. */
+    watchLayout?(actors: number): () => void;
+}
+export declare function createToolsView(ctx: ShellContext, options: ToolsViewOptions): ToolsView;
+/** An empty state for a runtime without tools, shared with Characters. */
+export declare const noTools: (message: string) => HTMLDivElement;

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

@@ -0,0 +1,285 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { FEATURES_CHANGED_EVENT, OPEN_FEATURE_EVENT } from "./features.js";
+import { request } from "./request.js";
+import { labWindow, runMode, setRunMode, setToolRun } from "./run-mode.js";
+import { unawaited } from "./unawaited.js";
+import { button, chip, copyToClipboard, empty, h, icon, progressBar, segmented } from "./ui.js";
+import { commandBox, reportSheet, TOOL_ICONS, toneOf } from "./tool-report.js";
+import { agentsGroup } from "./agents-tools.js";
+const ITEM_ICONS = { ok: "circle-check", bad: "circle-x", run: "loader-circle", wait: "circle-dashed", note: "info" };
+const POLL_MS = 400;
+const toolBinding = () => labWindow().__productLabToolRun;
+export function createToolsView(ctx, options) {
+    const pane = ctx.pane("tools");
+    const root = h("section", { id: "tools-page", class: "tools-page", "aria-label": "Tools" });
+    pane.append(root);
+    const agents = agentsGroup();
+    let catalog, error, loading = false, environment;
+    let selected;
+    const watched = new Set();
+    const ending = new Map();
+    const watchLayout = options.watchLayout;
+    const dismissed = new Set();
+    const values = new Map();
+    const runs = new Map();
+    let polling;
+    const listeners = [];
+    const report = unawaited((failure) => { error = failure instanceof Error ? failure.message : String(failure); draw(); });
+    const visible = () => !ctx.pane("tools").hidden || !ctx.pane("characters").hidden;
+    async function load() {
+        if (loading)
+            return;
+        loading = true;
+        agents.refresh();
+        try {
+            catalog = (await request("/api/tools"));
+            error = undefined;
+            for (const listener of listeners)
+                listener(catalog, error);
+            draw();
+            for (const run of (await request("/api/tool-runs")).reverse())
+                if (!dismissed.has(run.id))
+                    runs.set(run.tool, run);
+            const running = [...runs.values()].find((run) => run.status === "running");
+            if (running)
+                follow(running.id);
+        }
+        catch (failure) {
+            error = failure instanceof Error ? failure.message : String(failure);
+        }
+        finally {
+            loading = false;
+        }
+        for (const listener of listeners)
+            listener(catalog, error);
+        draw();
+    }
+    function tool(id) {
+        return catalog?.tools.find((item) => item.id === id);
+    }
+    function formValues(description) {
+        let current = values.get(description.id);
+        if (!current) {
+            current = Object.fromEntries(description.fields.map((field) => [field.key, field.default === undefined ? "" : String(field.default)]));
+            values.set(description.id, current);
+        }
+        return current;
+    }
+    let drawn = "";
+    function draw() {
+        if (error && !catalog)
+            return void root.replaceChildren(h("div", { class: "tools-error", role: "alert" }, icon("circle-alert", 16), error));
+        if (!catalog)
+            return void root.replaceChildren(h("p", { class: "tools-loading" }, "Reading the lab's tools…"));
+        const description = tool(selected);
+        const key = JSON.stringify(description ? [description, runs.get(description.id), runMode(), error] : [catalog, [...runs.values()].map((run) => run.summary), error]);
+        if (key === drawn && root.childElementCount)
+            return;
+        drawn = key;
+        root.replaceChildren(...(description ? toolPage(description) : list(catalog)), ...(error ? [h("div", { class: "tools-error", role: "alert" }, icon("circle-alert", 16), error)] : []));
+    }
+    function redraw() { drawn = ""; draw(); }
+    function list(value) {
+        const groups = [["find", "Find problems nobody wrote a test for"], ["releases", "Newest releases"]];
+        return [...groups.map(([group, title]) => h("section", { class: "tools-group", "data-group": group }, h("h3", { class: "tools-group-title" }, title), ...value.tools.filter((item) => item.group === group).map((item) => {
+                const latest = runs.get(item.id)?.summary ?? item.latest;
+                return h("button", { type: "button", class: "tool-card", "data-tool": item.id, "aria-label": `${item.name}: ${item.purpose}`, onclick: () => open(item.id) }, h("span", { class: "tool-icon" }, icon(TOOL_ICONS[item.id] ?? "wrench", 18)), h("span", { class: "tool-card-body" }, h("span", { class: "tool-card-head" }, h("strong", { class: "tool-name" }, item.name), latest ? chip(`${latest.label} · ${new Date(latest.finishedAt).toLocaleDateString(undefined, { day: "numeric", month: "short" })}`, { tone: toneOf(latest.tone), title: latest.headline })
+                    : item.notice ? chip("not scheduled", { tone: "warning", title: item.notice })
+                        : !item.ready ? chip("needs setup", { tone: "neutral", title: item.needs.find((need) => need.met === false)?.title }) : null), h("span", { class: "tool-purpose" }, item.purpose)));
+            }))), agents.node];
+    }
+    function open(id) {
+        selected = id;
+        draw();
+        root.querySelector(id ? "#tool-back" : `.tool-card`)?.focus();
+        if (id)
+            report(load());
+    }
+    function toolPage(description) {
+        const run = runs.get(description.id);
+        const following = run && run.status !== "refused";
+        const head = h("div", { class: "tool-head" }, h("button", { type: "button", id: "tool-back", class: "tool-back", "aria-label": "Back to the tools", onclick: () => open(undefined) }, icon("chevron-left", 16)), h("span", { class: "tool-crumb" }, "Tools ›"), h("h2", { class: "tool-title" }, description.name));
+        const what = h("div", { class: "tool-what" }, h("p", {}, description.detail ?? description.purpose));
+        const notice = description.notice ? h("div", { class: "tool-notice", role: "note" }, icon("moon", 16), h("p", {}, description.notice)) : null;
+        const needs = h("ul", { class: "tool-needs", "aria-label": "What it needs" }, ...description.needs.map((need) => h("li", { class: "tool-need", "data-met": String(need.met) }, icon(need.met === true ? "circle-check" : need.met === false ? "circle-x" : "info", 16), h("span", {}, h("strong", {}, need.title), need.detail ? h("small", {}, need.detail) : null))));
+        if (following)
+            return [head, what, notice, progress(description, run)].filter(Boolean);
+        return [head, what, notice, needs, form(description, run?.status === "refused" ? run : undefined)].filter(Boolean);
+    }
+    function form(description, refused) {
+        const current = formValues(description);
+        const command = h("div", { class: "tool-command-slot" });
+        let asked = 0;
+        const updateCommand = () => {
+            const mine = ++asked;
+            command.dataset.pending = "true";
+            unawaited((failure) => { if (mine !== asked)
+                return; delete command.dataset.pending; command.replaceChildren(h("p", { class: "tools-error" }, String(failure))); })(request(`/api/tool-command?tool=${encodeURIComponent(description.id)}&options=${encodeURIComponent(JSON.stringify(current))}`).then((answer) => {
+                if (mine !== asked)
+                    return;
+                delete command.dataset.pending;
+                command.replaceChildren(h("div", { class: "tool-command-head" }, h("span", {}, "The same from a terminal"), button("Copy the command", { icon: "copy", size: "sm", id: "tool-copy-command", title: answer.command, onClick: () => copyToClipboard(answer.command) })), h("code", { class: "tool-command-text", "data-command": answer.command }, h("span", { class: "tool-prompt", "aria-hidden": "true" }, "$ "), answer.command));
+            }));
+        };
+        const controls = description.fields.map((field) => fieldControl(field, current, () => { updateCommand(); }));
+        const start = button(`Start ${description.name.toLowerCase()}`, { variant: "primary", icon: "play", id: "tool-start", disabled: !description.ready, title: description.ready ? undefined : description.needs.find((need) => need.met === false)?.title, onClick: () => report(startRun(description)) });
+        updateCommand();
+        return h("form", { id: "tool-form", class: "tool-form", "data-tool": description.id, onsubmit: (event) => { event.preventDefault(); if (!start.disabled)
+                start.click(); } }, refused ? h("div", { class: "tool-refusal", role: "alert" }, icon("circle-x", 16), h("p", {}, refused.error ?? "It did not start.")) : null, ...controls, showField(description), command, h("div", { class: "tool-go" }, start));
+    }
+    function showField(description) {
+        if (!description.watch || !toolBinding())
+            return null;
+        const control = segmented([{ value: "watch", label: "Watch", icon: "eye" }, { value: "background", label: "Background", icon: "layers" }], runMode(), (value) => { setRunMode(value); redraw(); }, "Show the people");
+        control.id = "tool-show";
+        return h("div", { class: "tool-field", "data-field": "show" }, h("span", { class: "tool-field-label" }, "Show the people", h("small", {}, runMode() === "watch" ? "Each run's people act in this window's tiles, one run after another" : "The runs go on out of sight, as in CI; the tiles stay free")), control);
+    }
+    function fieldControl(field, current, changed) {
+        const id = `tool-field-${field.key}`;
+        const set = (value) => { current[field.key] = value; changed(); };
+        const label = h("label", { for: id }, field.label, field.help ? h("small", {}, field.help) : null);
+        if (field.kind === "choice" && field.choices && field.choices.length <= 3 && field.choices.every((choice) => !choice.detail && !choice.unavailable)) {
+            const control = segmented(field.choices.map((choice) => ({ value: choice.value, label: choice.label })), current[field.key] ?? "", (value) => { set(value); redraw(); }, field.label);
+            control.id = id;
+            return h("div", { class: "tool-field", "data-field": field.key }, h("span", { class: "tool-field-label" }, field.label, field.help ? h("small", {}, field.help) : null), control);
+        }
+        if (field.kind === "choice") {
+            const chosen = h("span", { class: "tool-choice" });
+            const describe = () => {
+                const choice = field.choices?.find((item) => item.value === current[field.key]);
+                chosen.replaceChildren(...(choice ? [h("strong", {}, choice.label), choice.detail && choice.detail !== choice.label ? h("small", {}, choice.detail) : null].filter(Boolean) : []));
+            };
+            const select = h("select", { id, name: field.key, onchange: (event) => { set(event.target.value); describe(); } });
+            if (!field.choices?.length)
+                select.append(new Option("Nothing to choose from", ""));
+            for (const choice of field.choices ?? []) {
+                const option = new Option(choice.unavailable ? `${choice.label} (can't run here)` : choice.label, choice.value, false, choice.value === current[field.key]);
+                if (choice.unavailable)
+                    Object.assign(option, { disabled: true, title: choice.unavailable });
+                select.append(option);
+            }
+            describe();
+            return h("div", { class: "tool-field", "data-field": field.key }, label, select, chosen);
+        }
+        const disabled = field.key === "seed" && current.seedMode === "random";
+        const input = h("input", { id, name: field.key, type: field.kind === "number" ? "number" : "text", value: current[field.key] ?? "", min: field.min, max: field.max, required: field.required, disabled, placeholder: field.kind === "seed" ? "0badc0de" : undefined, oninput: (event) => set(event.target.value), class: field.kind === "seed" ? "tool-mono" : undefined });
+        return h("div", { class: "tool-field", "data-field": field.key }, label, h("span", { class: "tool-input" }, input, field.unit ? h("span", { class: "tool-unit" }, field.unit) : null));
+    }
+    async function startRun(description) {
+        const current = formValues(description);
+        const options = Object.fromEntries(Object.entries(current).filter(([, value]) => value !== "").map(([key, value]) => {
+            const field = description.fields.find((item) => item.key === key);
+            return [key, field?.kind === "number" ? Number(value) : value];
+        }));
+        const binding = description.watch && runMode() === "watch" ? toolBinding() : undefined;
+        const run = binding ? await binding({ tool: description.id, options }) : (await request("/api/tool-start", { tool: description.id, options }));
+        if (run.status === "running") {
+            if (binding)
+                watched.add(run.id);
+            const layout = binding ? watchLayout?.(2) : undefined;
+            if (toolBinding())
+                setToolRun(binding ? "watch" : "background");
+            ending.set(run.id, () => { layout?.(); setToolRun(undefined); });
+        }
+        runs.set(description.id, run);
+        error = undefined;
+        draw();
+        if (run.status === "running")
+            follow(run.id);
+    }
+    function follow(id) {
+        if (polling)
+            clearTimeout(polling);
+        const tick = () => unawaited((failure) => { polling = undefined; error = failure instanceof Error ? failure.message : String(failure); draw(); })(request(`/api/tool-runs/${encodeURIComponent(id)}`).then((run) => {
+            runs.set(run.tool, run);
+            if (run.status === "running")
+                polling = setTimeout(tick, POLL_MS);
+            else {
+                polling = undefined;
+                ending.get(run.id)?.();
+                ending.delete(run.id);
+                void load().then(() => { if (selected === run.tool && run.report)
+                    showReport(run); }, (failure) => { error = String(failure); draw(); });
+            }
+            if (selected === run.tool)
+                redrawProgress(run);
+        }));
+        polling = setTimeout(tick, POLL_MS);
+    }
+    function redrawProgress(run) {
+        const node = root.querySelector("#tool-progress");
+        const description = tool(run.tool);
+        if (node && description)
+            node.replaceWith(progress(description, run));
+        else
+            draw();
+    }
+    function progress(description, run) {
+        const done = run.status !== "running";
+        const tone = run.status === "finished" ? (run.summary?.tone === "bad" ? "danger" : run.summary?.tone === "warn" ? "warning" : "success") : run.status === "failed" ? "danger" : "accent";
+        return h("section", { id: "tool-progress", class: "tool-progress", "data-status": run.status, "aria-live": "polite", "aria-label": `${description.name} progress` }, h("div", { class: "tool-progress-head" }, h("strong", {}, done ? (run.status === "finished" ? "Finished" : run.status === "stopped" ? "Stopped" : "Did not finish") : run.progress.label), 
+        !done && run.progress.total ? h("span", { class: "tool-done" }, `· ${run.progress.done} finished`) : null, watched.has(run.id) ? Object.assign(chip("Watch", { icon: "eye", tone: "accent", title: "Its runs act in this window's tiles" }), { id: "tool-watching" }) : null, h("span", { class: "tool-elapsed" }, `${(run.elapsedMs / 1000).toFixed(1)} s`)), progressBar(done ? 1 : run.progress.done, done ? 1 : Math.max(run.progress.total, 1), tone), run.error ? h("div", { class: "tool-refusal", role: "alert" }, icon("circle-x", 16), h("p", {}, run.error)) : null, h("ol", { class: "tool-items" }, ...run.items.map((item) => h("li", { class: "tool-item", "data-state": item.state }, icon(ITEM_ICONS[item.state], 16), h("span", {}, h("strong", {}, item.title), item.detail ? h("small", {}, item.detail) : null, item.recording ? h("button", { type: "button", class: "tool-replay", "data-recording": item.recording, onclick: () => openRecording(item.recording) }, icon("rotate-ccw-clock", 13), "Open the replay") : null), item.ms !== undefined ? h("span", { class: "tool-item-time" }, `${(item.ms / 1000).toFixed(1)} s`) : null))), commandBox(run.command, "Copy the command"), h("div", { class: "tool-go" }, ...(done
+            ? [run.report ? button("Show the report", { variant: "primary", icon: "file-text", id: "tool-show-report", onClick: () => showReport(run) }) : null, button("Start again", { icon: "rotate-ccw", id: "tool-again", onClick: () => { dismissed.add(run.id); runs.delete(run.tool); draw(); } })].filter(Boolean)
+            : [button("Stop", { icon: "square", id: "tool-stop", onClick: () => report(request("/api/tool-stop", { id: run.id })) })])));
+    }
+    function closeReport() { document.getElementById("tool-report")?.remove(); }
+    function showReport(run) {
+        closeReport();
+        const stage = document.getElementById("application");
+        if (!stage || !run.report)
+            return;
+        const sheet = reportSheet(run, {
+            openRecording,
+            close: closeReport,
+            saveScenario: async () => {
+                const saved = (await request("/api/tool-save", { id: run.id }));
+                request(`/api/tool-runs/${encodeURIComponent(run.id)}`).then((fresh) => { if (runs.get(fresh.tool)?.id === fresh.id) {
+                    runs.set(fresh.tool, fresh);
+                    draw();
+                } }, () => undefined);
+                window.dispatchEvent(new CustomEvent(FEATURES_CHANGED_EVENT, { detail: { path: saved.path } }));
+                return saved;
+            },
+            openSaved: (path) => {
+                closeReport();
+                window.dispatchEvent(new CustomEvent(OPEN_FEATURE_EVENT, { detail: { path } }));
+            },
+        });
+        stage.append(sheet);
+        sheet.querySelector("#tool-report-close")?.focus();
+        sheet.addEventListener("keydown", (event) => { if (event.key === "Escape") {
+            event.preventDefault();
+            closeReport();
+        } });
+    }
+    function openRecording(id) {
+        closeReport();
+        options.openRecording(id);
+    }
+    let readAt = 0;
+    const shown = new MutationObserver(() => { if (visible() && Date.now() - readAt > 3_000) {
+        readAt = Date.now();
+        report(load());
+    } });
+    for (const section of ["tools", "characters"])
+        shown.observe(ctx.pane(section), { attributes: true, attributeFilter: ["hidden"] });
+    draw();
+    return {
+        render(value) {
+            if (visible() && catalog)
+                draw();
+            if (value.environmentId !== environment) {
+                environment = value.environmentId;
+                if (catalog || visible())
+                    report(load());
+            }
+            else if (!catalog && visible() && !loading)
+                report(load());
+        },
+        catalog: () => catalog,
+        onCatalog(listener) { listeners.push(listener); },
+        refresh() { report(load()); },
+    };
+}
+export const noTools = (message) => empty({ icon: "wrench", title: "No tools here", body: message });

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

@@ -0,0 +1,47 @@
+import type { LabSnapshot } from "@parity/product-lab/ports/driving";
+export type ViewMode = "follow" | "pinned" | "grid";
+export declare const VIEW_MODES: readonly ViewMode[];
+/**
+ * The identity whose step runs now (the latest started when several overlap), else the one that acted last in the
+ * active run; undefined when nothing runs.
+ */
+export declare function followedActor(snapshot: LabSnapshot): string | undefined;
+/**
+ * The people of the run on screen while it is active (a feature run, queued or running, or a registered run): those it
+ * made since it started (`origin` "run") and those its steps act as or its bindings name. Undefined when no run is on.
+ */
+export declare function runPeople(snapshot: LabSnapshot): string[] | undefined;
+/**
+ * The identities to show, in order: one for Follow action and Pinned; for Grid every running one, or, while a run is on
+ * and has people, only its people (the lab's own idle identity comes back when the run ends).
+ */
+export declare function viewTiles(snapshot: LabSnapshot, mode: ViewMode, selected: string): string[];
+/** "Following Grace (the step that runs now)", "Pinned to Ada", "Grid: 3 identities". */
+export declare function viewCaption(snapshot: LabSnapshot, mode: ViewMode, tiles: readonly string[]): string;
+/**
+ * Show `wanted` tiles, retaining other running actors' existing frames hidden.
+ * Use CSS order instead of moving DOM nodes: focus/compare changes preserve
+ * iframe sessions and unsaved input. Stopped/deleted actors and replaced URLs
+ * release their obsolete tiles.
+ */
+export declare function syncTiles(container: HTMLElement, wanted: readonly {
+    key: string;
+    actor: string;
+    create: () => HTMLElement;
+}[], retainActors?: ReadonlyMap<string, string>): void;
+/**
+ * The scenario actors an identity plays in the latest run under another name: a lab that binds its own identity
+ * ("Person 1") to a scenario's actor ("Ada") shows "as Ada" beside the name, so the tile and the steps name the same
+ * person. None when the identity carries the actor's name (a fresh identity is named after its actor).
+ */
+export declare function playedRoles(snapshot: LabSnapshot, actorId: string): string[];
+/** Actors executing now, including concurrent feature calls. */
+export declare function actingActors(snapshot: LabSnapshot): string[];
+/**
+ * Requested view plus the active run's actors: presentation never changes execution bindings. Follow action while a
+ * run acts lists the run's identities in the run's order (the followed one is always among them), so following the
+ * step that runs now never reorders the tiles under a gesture (backlog 4b).
+ */
+export declare function visibleRunTiles(snapshot: LabSnapshot, mode: ViewMode, selected: string): string[];
+/** The ids of the runs acting now (running, paused or cancelling), including a feature run's step runs. */
+export declare function activeRuns(snapshot: LabSnapshot): string[];