@parity/product-lab 0.0.1-placeholder → 0.1.0

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

@@ -0,0 +1,510 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { examplesNotForText, runNotForText } from "./features.js";
+import { examplesOf, renderGherkin, stepCount, stepText, tagList, variantValues } from "./gherkin-view.js";
+import { request } from "./request.js";
+import { avatarStack, banner, button, card, chip, copyText, disclosure, empty, h, icon, iconButton, on, patchChildren, plural, row, searchField, statusDot, toast } from "./ui.js";
+import { byId } from "./shell-kit.js";
+import { ACTIVE_STATES, STATE_LABEL } from "./run-progress.js";
+import { environmentFit } from "./scenario-environment.js";
+const CONFIGURED = "configured";
+const CHIP_TAGS = new Set(["@fast-ci", "@negative-control", "@multi-actor"]);
+const humanize = (segment) => { const text = segment.replace(/_+/g, " ").trim(); return text.charAt(0).toUpperCase() + text.slice(1); };
+export function groupOfPath(path) {
+    const relative = path.replace(/^(?:\.\/)?features\//, "");
+    const parts = relative.split("/");
+    const folders = parts.slice(0, -1);
+    return { key: folders[0] ?? ".", title: folders[0] ? humanize(folders[0]) : "Features", ...(folders[1] ? { section: humanize(folders[1]) } : {}), relative, file: parts.at(-1) };
+}
+export function readiness(inspection, scenario) {
+    if (!inspection)
+        return undefined;
+    const notFor = runNotForText({ inspection, ...(scenario?.variants ? { variants: scenario.variants } : {}) });
+    if (notFor)
+        return { label: "not for this chain", tone: "neutral", problem: true, title: notFor };
+    if (inspection.availability === "unavailable")
+        return { label: "unavailable", tone: "danger", problem: true, title: `Known requirements are unavailable on ${inspection.environment}` };
+    if (inspection.issues.some(issue => issue.kind === "capability"))
+        return { label: "missing capability", tone: "warning", problem: true, title: `A step needs a capability ${inspection.environment} does not offer` };
+    if (inspection.issues.length)
+        return { label: "plan issue", tone: "warning", problem: true, title: "A step's plan has an issue; open the scenario for details" };
+    if (inspection.availability === "available" && inspection.coverage === "complete")
+        return { label: "ready", tone: "success", problem: false, title: `Every declared requirement is available on ${inspection.environment}` };
+    return { label: "partly checked", tone: "neutral", problem: false, title: "Some steps could not be inspected here; the run checks them again before it starts" };
+}
+export function exampleNumber(scenario, variant) {
+    return examplesOf(scenario).slice(0, variant.block).reduce((sum, block) => sum + Math.max(0, block.table.length - 1), 0) + variant.row;
+}
+export function featureOptions() {
+    return [...byId("feature-scenario").options].flatMap(option => option.dataset.scenario ? [{ value: option.value, scenario: JSON.parse(option.dataset.scenario) }] : []);
+}
+export function appsOf(inspection, apps) {
+    if (apps.length < 2 || !inspection)
+        return [];
+    return apps.filter(app => app.integration && inspection.integrations.includes(app.integration)).map(app => ({ id: app.app, label: app.label ?? app.app }));
+}
+export function scenarioEntries(snapshot) {
+    const labApps = snapshot?.registry?.apps ?? [];
+    const offered = new Set([...byId("scenario").options].map(option => option.value));
+    const configured = (snapshot?.scenarios ?? []).filter(item => offered.has(item.id)).map((item) => ({
+        id: `scenario:${item.id}`, kind: "scenario", value: item.id, name: item.title, description: item.description, actors: item.actors ?? [], inputs: Object.keys(item.inputs).length,
+        group: CONFIGURED, groupTitle: "Scenarios in the lab's code", steps: 0, variants: 0, tags: [], control: /control/.test(item.id), fast: false, apps: [],
+    }));
+    const features = featureOptions().map(({ value, scenario }) => {
+        const where = groupOfPath(scenario.path);
+        const control = scenario.tags.includes("@negative-control");
+        return {
+            id: `feature:${value}`, kind: "feature", value, name: scenario.name, description: scenario.description ?? "", actors: scenario.actors, feature: scenario, inputs: 0,
+            group: where.key, groupTitle: where.title, ...(where.section ? { section: where.section } : {}), path: where.relative, file: where.file, steps: stepCount(scenario),
+            variants: scenario.variants?.length ?? examplesOf(scenario).reduce((sum, block) => sum + Math.max(0, block.table.length - 1), 0),
+            tags: scenario.tags, control, fast: scenario.tags.includes("@fast-ci"), readiness: readiness(scenario.inspection, scenario),
+            apps: appsOf(scenario.inspection, labApps),
+            ...(environmentFit(scenario.inspection, scenario.path) ? { fit: environmentFit(scenario.inspection, scenario.path) } : {}),
+        };
+    });
+    return [...configured, ...features];
+}
+export const SECTION_THRESHOLD = 6;
+export const OTHER_THRESHOLD = 4;
+export function groupEntries(entries, shown = () => true) {
+    const byKey = new Map();
+    for (const entry of [...entries].sort((a, b) => Number(b.group === CONFIGURED) - Number(a.group === CONFIGURED))) {
+        let group = byKey.get(entry.group);
+        if (!group) {
+            group = { key: entry.group, title: entry.groupTitle, entries: [] };
+            byKey.set(entry.group, group);
+        }
+        group.entries.push(entry);
+    }
+    const all = [...byKey.values()];
+    const single = all.filter(group => group.key !== CONFIGURED && group.entries.length === 1);
+    const other = single.length >= OTHER_THRESHOLD;
+    const kept = other ? all.filter(group => !single.includes(group)) : all;
+    const groups = kept.map(group => {
+        if (group.entries.length <= SECTION_THRESHOLD || !group.entries.some(entry => entry.section))
+            return { key: group.key, title: group.title, count: group.entries.length, blocks: [{ rows: group.entries.map(entry => ({ entry, prefix: entry.section })) }] };
+        const sections = new Map();
+        for (const entry of group.entries)
+            sections.set(entry.section ?? "", [...(sections.get(entry.section ?? "") ?? []), entry]);
+        return { key: group.key, title: group.title, count: group.entries.length, blocks: [...sections].map(([heading, list]) => ({ ...(heading ? { heading } : {}), rows: list.map(entry => ({ entry })) })) };
+    });
+    if (other)
+        groups.push({ key: "other", title: "Other", count: single.length, blocks: [{ rows: single.map(group => ({ entry: group.entries[0], prefix: [group.title, group.entries[0].section].filter(Boolean).join(" · ") })) }] });
+    return groups.flatMap(group => {
+        const blocks = group.blocks.map(block => ({ ...block, rows: block.rows.filter(row => shown(row.entry)) })).filter(block => block.rows.length);
+        const count = blocks.reduce((sum, block) => sum + block.rows.length, 0);
+        return count ? [{ ...group, count, blocks }] : [];
+    });
+}
+export function entryMatches(entry, query) {
+    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return true;
+    const steps = [...(entry.feature?.background ?? []), ...(entry.feature?.steps ?? [])].map(step => step.text);
+    const haystack = [entry.name, entry.path ?? entry.value, entry.groupTitle, entry.description, ...entry.tags, ...entry.actors, ...entry.apps.map(app => app.label), ...steps].join("\n").toLowerCase();
+    return words.every(word => haystack.includes(word));
+}
+export const notForChain = (entry) => entry.readiness?.label === "not for this chain";
+export const hiddenNotForChain = (entry) => notForChain(entry) && !entry.control;
+export function entryIcon(entry) { return entry.control ? "shield" : entry.actors.length > 1 ? "people" : "steps"; }
+const subtitleOf = (entry, prefix) => entry.feature ? `${prefix ? `${prefix} · ` : ""}${entry.file} · ${entry.actors.length ? `${entry.actors.length} ${entry.actors.length === 1 ? "person" : "people"} · ` : ""}${plural(entry.steps, "step")}` : entry.description || "Configured run";
+export const canRunHere = (entry) => entry.readiness?.label === "ready" && (!entry.fit || entry.fit.kind === "here");
+export function scenarioCountWords(entries) {
+    if (!entries.length)
+        return "";
+    if (!entries.some(entry => entry.readiness))
+        return plural(entries.length, "scenario");
+    return `${entries.filter(canRunHere).length} of ${entries.length} can run here`;
+}
+const FILTERS = [
+    { id: "multi", label: "Several people", title: "Scenarios where two or more people act", test: entry => entry.actors.length > 1 },
+    { id: "control", label: "Negative controls", title: "Scenarios built to fail at one known step: they prove a check catches the fault it claims to (tagged @negative-control; @fails-at-step-N and @fails-with:<reason> say where and why)", test: entry => entry.control },
+    { id: "ready", label: "Can run here", title: "Scenarios this environment runs now: it has every requirement they declare (chains, services, apps), and they are not tied to another environment or a live network", test: canRunHere },
+    { id: "fast", label: "Quick set", title: "Scenarios tagged @fast-ci: the quick set CI runs on every change", test: entry => entry.fast },
+];
+export function filtersFor(entries) {
+    const apps = new Map(entries.flatMap(entry => entry.apps.map(app => [app.id, app.label])));
+    const telling = [...apps].filter(([id]) => !entries.every(entry => entry.apps.some(app => app.id === id)));
+    return [...FILTERS, ...telling.map(([id, label]) => ({ id: `app:${id}`, label, title: `Scenarios whose steps use ${label}`, icon: "grid", test: entry => entry.apps.some(app => app.id === id) }))];
+}
+function appChips(entry) { return entry.apps.map(app => chip(app.label, { icon: "grid", title: `Its steps use ${app.label}` })); }
+function environmentChip(entry) {
+    if (!entry.fit)
+        return null;
+    const node = chip(entry.fit.chip, { tone: entry.fit.kind === "switch" ? "info" : "neutral", icon: entry.fit.kind === "unrunnable" ? "lock" : "chain", title: entry.fit.title });
+    node.classList.add("scn-env-chip");
+    node.dataset.environmentFit = entry.fit.kind;
+    return node;
+}
+function actorsMeta(entry) { return entry.actors.length ? avatarStack(entry.actors) : chip("selected identity", { icon: "user", title: "Runs as the identity the lab shows" }); }
+function statusChips(entry, inRow = false) {
+    return [
+        entry.readiness && !(inRow && (entry.readiness.label === "partly checked" || entry.readiness.label === "ready")) ? chip(entry.readiness.label, { tone: entry.readiness.tone, dot: true, title: entry.readiness.title }) : null,
+        entry.variants ? chip(plural(entry.variants, "variant"), { tone: "warning", icon: "table", title: "A Scenario Outline: one run per Examples row" }) : null,
+        entry.control ? chip("expected to fail", { tone: "info", icon: "shield", title: "A negative control: it passes when the check it targets fails" }) : null,
+    ].filter((node) => !!node);
+}
+function rowTags(entry, max) {
+    const scenario = entry.feature;
+    const own = (scenario.ownTags ?? [...scenario.tags].reverse()).filter(tag => !CHIP_TAGS.has(tag));
+    return tagList({ ...scenario, ownTags: own, featureTags: (scenario.featureTags ?? []).filter(tag => !CHIP_TAGS.has(tag)), rule: undefined }, max === undefined ? {} : { max });
+}
+export function requirementsNode(inspection, scenario) {
+    const node = h("section", { class: "scenario-requirements", "data-availability": inspection?.availability ?? "none", "data-coverage": inspection?.coverage, "aria-label": "Requirements" });
+    if (!inspection) {
+        node.append(h("div", { class: "scn-req-line" }, statusDot("neutral"), h("strong", {}, "Requirements not inspected")));
+        return node;
+    }
+    const state = readiness(inspection, scenario);
+    if (inspection.notFor?.length) {
+        node.dataset.notFor = inspection.notFor.map(item => item.tag).join(" ");
+        node.append(h("div", { class: "scn-req-line", title: state.title }, statusDot("neutral"), h("strong", {}, "Not for this chain"), h("span", { class: "scn-req-env" }, inspection.notFor.map(item => `${item.reason} (${item.tag})`).join("; "))));
+        return node;
+    }
+    const unfitBlocks = inspection.examplesNotFor ?? [];
+    if (unfitBlocks.length)
+        node.dataset.examplesNotFor = unfitBlocks.map(item => String(item.block)).join(" ");
+    if (state.label === "not for this chain") {
+        node.dataset.notFor = [...new Set(unfitBlocks.flatMap(item => item.notFor.map(unmet => unmet.tag)))].join(" ");
+        node.append(h("div", { class: "scn-req-line", title: state.title }, statusDot("neutral"), h("strong", {}, "Not for this chain"), h("span", { class: "scn-req-env" }, unfitBlocks.map(item => `Examples ${item.name ? `"${item.name}"` : String(item.block + 1)}: ${item.notFor.map(unmet => `${unmet.reason} (${unmet.tag})`).join("; ")}`).join("; "))));
+        return node;
+    }
+    const needs = [
+        ...inspection.requires.chains.map(name => chip(name, { icon: "chain", title: "Chain" })),
+        ...inspection.requires.services.map(name => chip(name, { icon: "layers", title: "Service" })),
+        ...inspection.requires.capabilities.map(name => chip(name, { icon: "bolt", title: "Capability" })),
+    ];
+    const label = state.label === "ready" ? "Requirements available" : state.label === "unavailable" ? "Requirements unavailable" : "Requirements partly checked";
+    const line = h("span", { class: "scn-req-line", title: `${state.title} (${inspection.source === "running" ? "the running environment" : "its declared default"})` }, statusDot(state.tone), h("strong", {}, label), h("span", { class: "scn-req-env" }, inspection.environment), ...needs, needs.length ? null : h("span", { class: "scn-req-env" }, "· nothing declared"));
+    const items = [
+        ...unfitBlocks.map(item => row({ leading: icon("minus", 15), title: examplesNotForText([item]), subtitle: "Its rows are left out here; the other Examples run" })),
+        ...inspection.reasons.map(reason => row({ leading: icon("warning", 15), title: reason, subtitle: "Why it cannot run here" })),
+        ...(inspection.coverage !== "complete" ? [row({ leading: icon("info", 15), title: inspection.coverage === "partial" ? "Partially checked" : "Unknown requirements", subtitle: "Custom or unmatched steps are not verified here; the run checks again before it starts." })] : []),
+        ...inspection.unchecked.map(step => row({ leading: icon("minus", 15), title: step.text, subtitle: step.example ? `Unchecked step · example ${step.example}` : "Unchecked step" })),
+        ...inspection.issues.filter(issue => issue.kind !== "capability").map(issue => row({ leading: icon("failed", 15), title: issue.message, subtitle: `Plan issue · step ${issue.step + 1}${issue.example ? ` · example ${issue.example}` : ""}` })),
+    ];
+    if (!items.length)
+        node.append(line);
+    else
+        node.append(disclosure(line, [h("div", { class: "ui-list" }, ...items)], { count: items.length, class: "scn-req" }));
+    return node;
+}
+export function createScenariosView(ctx) {
+    const pane = ctx.pane("scenarios");
+    const library = h("section", { id: "scenario-library", class: "scn-library", "aria-label": "Scenario library" });
+    let query = "";
+    const filters = new Set(), collapsed = new Set();
+    let showNotFor = false;
+    const search = searchField("Find a scenario, tag or step…", value => { query = value; renderLibrary(); });
+    const filterRow = h("div", { class: "scn-filters", role: "group", "aria-label": "Filters" });
+    const list = h("div", { id: "scenario-library", class: "scn-groups" });
+    const busyNote = h("div", { id: "scenario-busy", class: "scn-busy", hidden: true });
+    library.append(busyNote, h("div", { class: "scn-toolbar" }, search, filterRow), list);
+    const detailHost = h("div", { class: "scn-detail-host" });
+    pane.prepend(library, detailHost);
+    const configuredEditor = byId("scenario-form"), featureEditor = byId("features");
+    byId("scenario").closest("label").hidden = true;
+    byId("description").hidden = true;
+    const editorStore = h("div", { hidden: true });
+    ctx.stored.append(editorStore);
+    editorStore.append(configuredEditor, featureEditor);
+    const featureRun = byId("feature-run"), configuredRun = byId("run");
+    for (const node of [featureRun, configuredRun])
+        node.className = "ui-button ui-button--primary ui-button--md run-small";
+    for (const id of ["feature-continue", "feature-step", "feature-pause-now", "feature-cancel", "continue", "pause"])
+        byId(id).className = "ui-button ui-button--secondary ui-button--md";
+    configuredRun.replaceChildren(icon("play"), h("span", {}, "Run"));
+    const footer = ctx.footer("scenarios");
+    footer.hidden = false;
+    footer.append(button("Build a scenario", { icon: "plus", variant: "ghost", size: "sm", onClick: () => ctx.show("builder") }), h("span", { class: "muted", title: "These are the feature files `product-lab test` and CI run: a scenario that passes here passes there on the same chain" }, "The same files CI runs"));
+    let libraryKey = "", detailKey = "";
+    let detailId, variant;
+    let detailFeature;
+    let setupExpanded = false, syncSetup;
+    const selectedId = () => `${ctx.runKind()}:${byId(ctx.runKind() === "feature" ? "feature-scenario" : "scenario").value}`;
+    let stopping = 0;
+    function run(entry) {
+        ctx.selectScenario(entry.kind, entry.value);
+        setVariant(undefined);
+        const source = entry.kind === "feature" ? featureRun : configuredRun;
+        stopping++;
+        if (!source.disabled) {
+            busyNote.hidden = true;
+            source.click();
+            return;
+        }
+        const current = ctx.runs().find(item => ACTIVE_STATES.includes(item.state));
+        const stop = [byId("feature-cancel"), byId("cancel")].find(node => !node.hidden && !node.disabled);
+        const dismiss = (label) => button(label, { variant: "ghost", size: "sm", onClick: () => { busyNote.hidden = true; } });
+        patchChildren(busyNote, [current && stop
+                ? banner({ tone: "warning", title: `${current.title} is running`, body: `${entry.name} starts when it ends, or now if you stop it.`, actions: [button("Stop it and run this one", { variant: "primary", size: "sm", onClick: () => { stopThenRun(entry, stop, source).catch((failure) => toast(`Could not stop the run: ${failure instanceof Error ? failure.message : String(failure)}`, "danger")); } }), dismiss("Keep it running")] })
+                : banner({ tone: "warning", title: `${entry.name} cannot start now`, body: source.title || "The lab is starting, stopping or finishing a run: try again in a moment.", actions: [dismiss("Close")] })]);
+        busyNote.hidden = false;
+    }
+    async function stopThenRun(entry, stop, source) {
+        const mine = ++stopping;
+        busyNote.hidden = true;
+        stop.click();
+        const deadline = Date.now() + 60_000;
+        while (source.disabled && Date.now() < deadline) {
+            await new Promise(resolve => setTimeout(resolve, 200));
+            if (mine !== stopping)
+                return;
+        }
+        if (!source.disabled) {
+            ctx.selectScenario(entry.kind, entry.value);
+            source.click();
+            return;
+        }
+        patchChildren(busyNote, [banner({ tone: "danger", title: "The current run did not stop within a minute", body: `${entry.name} did not start. Stop the run from the bottom bar, then Run again.`, actions: [button("Close", { variant: "ghost", size: "sm", onClick: () => { busyNote.hidden = true; } })] })]);
+        busyNote.hidden = false;
+    }
+    function openDetail(entry) {
+        detailId = entry.id;
+        variant = undefined;
+        detailKey = "";
+        detailFeature = entry.feature ? { path: entry.feature.path, name: entry.feature.name } : undefined;
+        ctx.selectScenario(entry.kind, entry.value);
+        footer.hidden = true;
+        render();
+        pane.scrollTop = 0;
+    }
+    function closeDetail() {
+        if (!detailId)
+            return;
+        detailId = undefined;
+        detailFeature = undefined;
+        variant = undefined;
+        detailKey = "";
+        libraryKey = "";
+        setVariant(undefined);
+        footer.hidden = pane.hidden;
+        render();
+    }
+    new MutationObserver(() => { if (detailId)
+        closeDetail(); }).observe(byId("command-center"), { attributes: true, attributeFilter: ["data-section"] });
+    function setVariant(next) {
+        variant = next;
+        const entry = detailId ? scenarioEntries(ctx.snapshot()).find(item => item.id === detailId) : undefined;
+        if (next && entry?.feature)
+            featureEditor.dataset.example = String(exampleNumber(entry.feature, next));
+        else
+            delete featureEditor.dataset.example;
+    }
+    function renderFilters(entries) {
+        filterRow.replaceChildren(...filtersFor(entries).filter(filter => filters.has(filter.id) || entries.some(filter.test)).map(filter => {
+            const count = entries.filter(filter.test).length, pressed = filters.has(filter.id);
+            const node = h("button", { type: "button", class: `ui-chip scn-filter ui-chip--${pressed ? "accent" : "neutral"}`, "aria-pressed": String(pressed), title: filter.title, "data-filter": filter.id,
+                onclick: () => { if (pressed)
+                    filters.delete(filter.id);
+                else
+                    filters.add(filter.id); renderLibrary(); } }, pressed ? icon("check", 12) : filter.icon ? icon(filter.icon, 12) : null, filter.label, h("span", { class: "scn-filter-count" }, String(count)));
+            return node;
+        }));
+    }
+    const clockTime = (ms) => { const at = new Date(ms); return `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`; };
+    function lastRun(entry) {
+        return ctx.runs().find(run => entry.feature
+            ? run.kind === "feature" && run.scenario?.path === entry.feature.path && run.scenario.name === entry.feature.name && (run.scenario.line === undefined || entry.feature.line === undefined || run.scenario.line === entry.feature.line)
+            : run.kind === "job" && run.jobs[0]?.scenarioId === entry.value);
+    }
+    function scenarioRow(entry, selected, prefix) {
+        const title = h("span", { class: "scenario-title", "aria-expanded": "false", title: entry.name }, entry.name);
+        const last = lastRun(entry);
+        const when = last ? ` · ${STATE_LABEL[last.state].toLowerCase()} ${clockTime(last.finishedAt ?? last.startedAt)}` : "";
+        const subtitle = entry.feature ? h("span", { title: `features/${entry.path}` }, subtitleOf(entry, prefix) + when) : h("span", { class: "scn-description" }, subtitleOf(entry) + when);
+        const meta = [environmentChip(entry), ...appChips(entry), ...statusChips(entry, true)].filter((node) => !!node);
+        const notFor = runNotForText(entry.feature) || (entry.fit?.kind === "unrunnable" ? entry.fit.title : "");
+        const play = iconButton("play", `Run ${entry.name}`, { onClick: () => run(entry), ...(notFor ? { disabled: true, title: notFor } : {}) });
+        play.classList.add("run-small");
+        const dot = h("span", { class: "scn-dot", "data-state": last?.state ?? (entry.control ? "control" : "none"), title: last ? STATE_LABEL[last.state] : entry.control ? "Negative control, not run yet" : "Not run in this session" });
+        const node = row({ leading: dot, title, subtitle, meta, trailing: [play], selected, onSelect: () => openDetail(entry) });
+        node.classList.add("scn-row");
+        node.dataset.scenario = entry.id;
+        node.dataset.key = entry.id;
+        if (entry.fit)
+            node.dataset.environmentFit = entry.fit.kind;
+        if (notForChain(entry))
+            node.dataset.notFor = "";
+        return node;
+    }
+    function renderLibrary(all = scenarioEntries(ctx.snapshot())) {
+        const key = JSON.stringify([all.map(entry => [entry.id, lastRun(entry)?.state, lastRun(entry)?.finishedAt, entry.name, entry.description, entry.steps, entry.tags, entry.actors, entry.readiness?.label, entry.readiness?.title, entry.fit?.kind, entry.fit?.title, entry.variants, entry.apps.map(app => app.id)]), query, [...filters], selectedId(), detailId, showNotFor]);
+        if (key === libraryKey)
+            return;
+        libraryKey = key;
+        const hidden = all.filter(hiddenNotForChain);
+        const entries = showNotFor ? all : all.filter(entry => !hiddenNotForChain(entry));
+        renderFilters(entries);
+        const offered = filtersFor(entries);
+        const matches = (entry) => entryMatches(entry, query) && [...filters].every(id => offered.find(filter => filter.id === id)?.test(entry) ?? true);
+        const shown = entries.filter(matches);
+        const narrowed = !!query.trim() || filters.size > 0, selected = selectedId();
+        const toggle = hidden.length ? button(showNotFor ? `Hide ${hidden.length} not for this chain` : `Show ${hidden.length} not for this chain`, {
+            variant: "ghost", size: "sm", icon: showNotFor ? "minus" : "plus",
+            title: [...new Set(hidden.map(entry => entry.readiness.title))].join("\n"),
+            onClick: () => { showNotFor = !showNotFor; renderLibrary(); },
+        }) : null;
+        toggle?.classList.add("scn-not-for-toggle");
+        const nodes = [];
+        if (!all.length) {
+            patchChildren(list, [empty({ icon: "steps", title: "No scenarios yet", body: "Add a .feature file to the lab, or build one here.", action: button("Build a scenario", { icon: "plus", onClick: () => ctx.show("builder") }) })]);
+            return;
+        }
+        if (!shown.length) {
+            nodes.push(empty({ icon: "search", title: entries.length ? "No scenario matches" : "No scenario is for this chain", body: entries.length ? "Try another word, or clear the filters." : "Every scenario is written for another configuration of the running chain.", ...(entries.length ? { action: button("Clear", { onClick: () => { query = ""; search.querySelector("input").value = ""; filters.clear(); renderLibrary(); } }) } : {}) }));
+            if (toggle)
+                nodes.push(toggle);
+            patchChildren(list, nodes);
+            return;
+        }
+        for (const group of groupEntries(entries, matches)) {
+            const blocks = group.blocks.map(block => h("div", { class: "ui-list" }, block.heading ? h("div", { class: "scn-section" }, block.heading) : null, ...block.rows.map(item => scenarioRow(item.entry, item.entry.id === selected, item.prefix))));
+            const from = group.key === CONFIGURED ? "Scenarios the lab defines in code (scenarios in lab.config.ts and its integration), not in a feature file" : `Gherkin feature files in features/${group.key === "other" ? "" : `${group.key}/`}: plain sentences, the same files CI runs`;
+            const node = disclosure(h("span", { class: "scn-group-title", title: from }, icon(group.key === CONFIGURED ? "steps" : "folder", 13), group.title), blocks, { open: narrowed || !collapsed.has(group.key), count: group.count, class: "scn-group" });
+            node.dataset.group = group.key;
+            node.dataset.key = `group:${group.key}`;
+            node.dataset.managedOpen = "";
+            on(node, "toggle", (event) => { if (narrowed)
+                return; if (event.currentTarget.open)
+                collapsed.delete(group.key);
+            else
+                collapsed.add(group.key); });
+            nodes.push(node);
+        }
+        if (toggle)
+            nodes.push(toggle);
+        patchChildren(list, nodes);
+    }
+    function runLabel(entry) {
+        const where = entry.fit?.kind === "switch" ? ` on ${entry.fit.target}` : "";
+        const text = entry.kind === "scenario" ? "Run" : variant && entry.feature ? `Run example ${exampleNumber(entry.feature, variant)}${where}` : entry.variants > 1 ? `Run all ${entry.variants}${where}` : `Run${where}`;
+        featureRun.replaceChildren(icon("play"), h("span", {}, text));
+    }
+    function detailNode(entry) {
+        const root = h("section", { class: "scn-detail", "data-scenario": entry.id, "aria-label": entry.name });
+        const crumbs = h("div", { class: "scn-crumbs" }, h("span", {}, entry.section ? `${entry.groupTitle} · ${entry.section}` : entry.groupTitle), entry.file ? icon("right", 12) : null, entry.file ? h("span", { class: "scn-crumb-file", title: `features/${entry.path}` }, entry.file) : null);
+        const bar = h("div", { class: "scn-detail-bar" }, iconButton("back", "Back to the library", { onClick: () => closeDetail() }), crumbs, entry.feature ? copyText(entry.feature.path, "Copy the feature file's path") : null);
+        const title = h("h2", { class: "scenario-title", "aria-expanded": "true" });
+        const meta = h("div", { class: "scn-detail-meta" }, actorsMeta(entry), environmentChip(entry), ...appChips(entry), ...statusChips({ ...entry, readiness: undefined }), entry.feature ? rowTags(entry) : null);
+        root.append(h("header", { class: "scn-detail-head" }, bar, title, meta));
+        const gherkin = h("div", { class: "scn-gherkin" });
+        const setupActions = h("div", { class: "scn-setup-actions" });
+        const breakBar = h("div", { class: "scn-breakpoints", "data-breakpoints": "0" });
+        let points = [];
+        const target = entry.feature ? { path: entry.feature.path, scenario: entry.feature.name } : undefined;
+        const breakError = (failure) => { breakBar.replaceChildren(h("p", { class: "scn-hint", role: "alert" }, `Breakpoints: ${failure instanceof Error ? failure.message : String(failure)}`)); };
+        const drawBar = () => {
+            breakBar.dataset.breakpoints = String(points.length);
+            const stale = points.filter(point => point.stale);
+            breakBar.replaceChildren(...(points.length
+                ? [chip(plural(points.length, "breakpoint"), { tone: stale.length ? "warning" : "danger", icon: "pause", title: stale.length ? stale.map(point => point.stale).join("\n") : "The run pauses before these steps" }),
+                    ...(stale.length ? [h("span", { class: "scn-hint" }, `${plural(stale.length, "stale breakpoint")}: the feature file changed since`)] : []),
+                    button("Clear", { variant: "ghost", size: "sm", icon: "close", title: "Remove this scenario's breakpoints", onClick: () => { if (target)
+                            void request("/api/breakpoints", { action: "clear", ...target }).then(list => { points = list; draw(); }, breakError); } })]
+                : [h("span", { class: "scn-hint" }, "Click a step's dot to pause before it (a breakpoint).")]));
+        };
+        const toggles = {
+            has: index => points.some(point => point.index === index),
+            stale: index => points.find(point => point.index === index)?.stale,
+            toggle: index => {
+                if (!target)
+                    return;
+                const action = points.some(point => point.index === index) ? "clear" : "set";
+                void request("/api/breakpoints", { action, ...target, index }).then(list => { points = list; draw(); }, breakError);
+            },
+        };
+        if (target)
+            void request(`/api/breakpoints?${new URLSearchParams(target)}`).then(list => { points = list; draw(); }, breakError);
+        const draw = () => {
+            const values = entry.feature ? variantValues(entry.feature, variant) : undefined;
+            title.replaceChildren(stepText(entry.name, { values }));
+            title.title = entry.name;
+            if (entry.feature) {
+                const examplesNotFor = (entry.feature.inspection?.examplesNotFor ?? []).map(item => ({ block: item.block, title: examplesNotForText([item]), tags: item.notFor.map(unmet => unmet.tag) }));
+                gherkin.replaceChildren(renderGherkin(entry.feature, { actors: entry.actors, valueTones: ctx.snapshot()?.registry?.valueTones, variant, collapseBackground: entry.steps > 8, onVariant: next => { setVariant(next); draw(); }, examplesNotFor, breakpoints: toggles }));
+                drawBar();
+                runLabel(entry);
+                const refused = runNotForText(entry.feature, variant ? exampleNumber(entry.feature, variant) : undefined);
+                if (refused) {
+                    featureRun.disabled = true;
+                    featureRun.title = refused;
+                }
+                setupActions.replaceChildren(...(variant ? [chip(`Example ${exampleNumber(entry.feature, variant)}`, { tone: "accent", icon: "table", title: "Only this Examples row runs" }), iconButton("close", "Run every example", { size: "sm", onClick: () => { setVariant(undefined); draw(); } })] : []));
+            }
+        };
+        if (entry.feature) {
+            const where = entry.fit ? h("p", { class: "scn-env-line", "data-environment-fit": entry.fit.kind }, icon(entry.fit.kind === "unrunnable" ? "lock" : "chain", 14), h("span", {}, entry.fit.title)) : null;
+            root.append(requirementsNode(entry.feature.inspection, entry.feature), ...(where ? [where] : []), breakBar, gherkin);
+        }
+        else {
+            if (entry.description)
+                root.append(h("p", { class: "gk-description" }, entry.description));
+            if (!entry.inputs && !entry.actors.length)
+                root.append(h("p", { class: "scn-hint" }, "It supplies its steps when it runs."));
+        }
+        const editor = entry.kind === "feature" ? featureEditor : configuredEditor;
+        const bindings = byId(entry.kind === "feature" ? "feature-bindings" : "actor-bindings");
+        const summary = h("span", { class: "scn-run-summary" });
+        const toggle = entry.actors.length
+            ? h("button", { type: "button", class: "scn-run-toggle", "aria-controls": bindings.id, title: "Who plays each actor, fixed until the run ends. A new identity is fresh; a saved one keeps its app and chain state.", onclick: () => { setupExpanded = !setupExpanded; syncSetup?.(); } }, avatarStack(entry.actors), summary, icon("down", 14))
+            : h("span", { class: "scn-run-toggle is-static", title: "Runs as the identity the lab shows" }, icon("user", 14), h("span", { class: "scn-run-summary" }, "Selected identity"));
+        const setup = card({ class: "scn-run-setup", body: [h("div", { class: "scn-run-bar" }, toggle, setupActions, editor)] });
+        syncSetup = () => {
+            setup.classList.toggle("is-expanded", setupExpanded);
+            if (!entry.actors.length)
+                return;
+            toggle.setAttribute("aria-expanded", String(setupExpanded));
+            const picks = [...bindings.querySelectorAll("select[data-actor]")].map(select => [select.dataset.actor, select.value, select.selectedOptions[0]?.text.split(" · ")[0] ?? ""]);
+            const text = !picks.length ? plural(entry.actors.length, "actor") : picks.every(([, value]) => value === "new") ? (picks.length === 1 ? "New identity" : "New identities") : picks.map(([actor, value, label]) => `${actor}: ${value === "new" ? "new" : label}`).join(" · ");
+            summary.textContent = text;
+            summary.title = text;
+        };
+        setup.addEventListener("change", () => syncSetup?.());
+        root.append(h("div", { class: "scn-run-dock" }, setup));
+        draw();
+        return root;
+    }
+    function renderDetail(entries) {
+        const moved = detailFeature && entries.find(item => item.feature?.path === detailFeature.path && item.feature?.name === detailFeature.name);
+        if (moved)
+            detailId = moved.id;
+        const entry = moved || entries.find(item => item.id === detailId);
+        if (!entry) {
+            if (detailId?.startsWith("scenario:") || byId("feature-scenario").options.length)
+                closeDetail();
+            return;
+        }
+        const definition = entry.kind === "scenario" ? ctx.snapshot()?.scenarios.find(item => item.id === entry.value) : undefined;
+        const key = JSON.stringify([entry.id, entry.feature ?? definition]);
+        if (key !== detailKey) {
+            detailKey = key;
+            detailHost.replaceChildren(detailNode(entry));
+        }
+        syncSetup?.();
+    }
+    function render() {
+        const entries = scenarioEntries(ctx.snapshot());
+        library.hidden = !!detailId;
+        detailHost.hidden = !detailId;
+        if (detailId) {
+            if (list.childElementCount) {
+                list.replaceChildren();
+                libraryKey = "";
+            }
+            renderDetail(entries);
+        }
+        else {
+            if (detailHost.childElementCount) {
+                editorStore.append(configuredEditor, featureEditor);
+                detailHost.replaceChildren();
+            }
+            renderLibrary(entries);
+        }
+    }
+    new MutationObserver(() => render()).observe(byId("feature-scenario"), { childList: true, subtree: true, characterData: true });
+    for (const id of ["feature-bindings", "actor-bindings"])
+        new MutationObserver(() => { if (detailId)
+            render(); }).observe(byId(id), { childList: true, subtree: true, characterData: true });
+    return { render: () => render() };
+}

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

@@ -0,0 +1,27 @@
+/* Settings (settings.ts; lab-mockups/out/8-settings): a sectioned list, one row per setting (its name and what it does,
+   its control on the right). No cards inside cards, no dividers: sections are spaced and labelled. */
+.settings { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-2) 0; }
+.settings-section { display: flex; flex-direction: column; gap: var(--space-3); }
+.settings-section-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tertiary); font: var(--weight-strong) var(--text-2xs) / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
+/* A narrow panel puts the control under its words rather than squeezing them into a column (backlog 158). */
+.settings-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
+.settings-row-text { flex: 1 1 12rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.settings-row-text strong { color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-strong); }
+.settings-row-text span { color: var(--secondary); font-size: var(--text-sm); line-height: 1.45; }
+/* A setting that does nothing right now: greyed, its reason on the row (settings.ts idle). */
+.settings-row.is-idle .settings-row-text strong, .settings-row.is-idle .settings-row-text > span:not(.settings-row-note), .settings-row.is-idle > :last-child { opacity: 0.55; }
+.settings-row-text .settings-row-note { color: var(--ink); font-size: var(--text-xs); }
+.settings-row-note[hidden] { display: none; }
+.settings-row > :last-child { flex-shrink: 0; }
+
+/* The switch: a pill with a thumb, solid accent when on. */
+/* min-height and filter: over shell.css's legacy button defaults. */
+.settings-switch { position: relative; flex: none; width: 44px; height: 26px; min-height: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
+.settings-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tertiary); transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
+.settings-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent); }
+.settings-switch[aria-checked="true"] .settings-switch-thumb { transform: translateX(18px); background: var(--accent-ink); }
+.settings-switch:hover:not(:disabled) { filter: none; border-color: var(--accent); }
+.settings-switch:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+.settings-switch:disabled { opacity: 0.45; cursor: not-allowed; }
+.settings-error { margin: 0; color: var(--danger); font-size: var(--text-sm); }
+.settings-error[hidden] { display: none; }

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

@@ -0,0 +1,66 @@
+/* Run timeline (view-timeline.ts): a waterfall, one row per identity (and Setup), bars per step with an app strip
+   (UI phases, waits) and a chain strip (transaction states). Positions are set through the CSSOM (the panel's CSP
+   refuses inline style attributes). */
+.tl-view { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); }
+.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.tl-head h3 { margin: 0; font-size: var(--text-lg); }
+.tl { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+.tl-muted { color: var(--secondary); font-size: var(--text-sm); }
+
+.tl-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--secondary); }
+.tl-legend li { display: inline-flex; align-items: center; gap: 5px; }
+.tl-swatch { display: inline-block; flex: none; width: 12px; height: 8px; border-radius: 2px; background: var(--tl-colour, var(--line-strong)); }
+
+.tl-grid { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; }
+/* The Timeline keeps the panel's chosen width (F2): the track takes what is left, down to a 280 px panel. */
+.tl-axis, .tl-row { display: grid; grid-template-columns: minmax(64px, 112px) minmax(0, 1fr); align-items: start; gap: var(--space-2); }
+.tl-scale { position: relative; height: 16px; border-bottom: 1px solid var(--line); }
+.tl-tick { position: absolute; top: 0; transform: translateX(-50%); color: var(--tertiary); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tl-tick:first-child { transform: none; }
+.tl-tick:last-child { transform: translateX(-100%); }
+/* A long name wraps in its column (F2): cut to its first words, it read as another person. */
+.tl-row-name { display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.3; overflow-wrap: anywhere; }
+.tl-row-name > .ui-avatar { flex: none; }
+.tl-track { position: relative; height: calc(var(--tl-lanes, 1) * 42px); border-radius: var(--radius-sm); background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--line) calc(20% - 1px) 20%); }
+
+/* A step: its span in the identity's tone, its label, then the app strip and the chain strip. */
+.tl-bar { container-type: inline-size; position: absolute; top: calc(var(--tl-lane, 0) * 42px + 2px); display: grid; grid-template-rows: 14px 9px 9px; gap: 2px; height: 38px; min-width: 3px; padding: 2px 3px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--actor-tone, var(--secondary)) 55%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--actor-tone, var(--secondary)) 14%, var(--surface)); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
+.tl-row[data-row="setup"] .tl-bar { border-style: dashed; }
+.tl-bar[data-status="failed"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
+.tl-bar.is-live { border-right-style: dashed; }
+.tl-bar.is-selected, .tl-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
+.tl-bar-label { justify-self: start; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; line-height: 14px; white-space: nowrap; }
+/* A bar too narrow for its number shows none: its tooltip and the detail name the step. */
+@container (max-width: 24px) { .tl-bar-label { visibility: hidden; } }
+.tl-strip { position: relative; display: block; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
+.tl-strip:empty { visibility: hidden; }
+.tl-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 2px; background: var(--tl-colour, var(--line-strong)); }
+.tl-seg[data-kind="lane-hold"] { z-index: 0; opacity: .55; }
+.tl-seg[data-kind="input"], .tl-seg[data-kind="tx-failed"] { z-index: 1; }
+
+/* The kinds' colours: the app strip (UI calls, waits) and the chain strip (a transaction's states). */
+[data-kind="follow"] { --tl-colour: var(--info); }
+[data-kind="ready"] { --tl-colour: var(--tertiary); }
+[data-kind="lane-wait"] { --tl-colour: var(--warning); }
+[data-kind="lane-hold"] { --tl-colour: var(--accent-line); }
+[data-kind="input"] { --tl-colour: var(--accent); }
+[data-kind="hold"] { --tl-colour: var(--line-strong); }
+[data-kind="wait"] { --tl-colour: color-mix(in srgb, var(--warning) 45%, var(--surface)); }
+[data-kind="signing"] { --tl-colour: var(--phase-given); }
+[data-kind="submitted"] { --tl-colour: var(--info); }
+[data-kind="finality"] { --tl-colour: var(--success); }
+[data-kind="tx-failed"] { --tl-colour: var(--danger); }
+[data-kind="observed"] { --tl-colour: repeating-linear-gradient(135deg, var(--tone-4) 0 3px, transparent 3px 6px); }
+.tl-seg[data-kind="observed"], .tl-swatch[data-kind="observed"] { background: repeating-linear-gradient(135deg, var(--tone-4) 0 3px, color-mix(in srgb, var(--tone-4) 25%, transparent) 3px 6px); }
+
+.tl-detail { display: flex; flex-direction: column; gap: 4px; min-height: 22px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); }
+.tl-segments { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--text-xs); }
+.tl-segments li { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 0; min-height: 0; line-height: 1.45; }
+.tl-offset { flex: none; min-width: 56px; color: var(--tertiary); font-variant-numeric: tabular-nums; }
+.tl-notes { margin: 0; padding-left: 18px; color: var(--secondary); font-size: var(--text-xs); }
+.tl-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
+.tl-table th, .tl-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
+
+@media (prefers-reduced-motion: reduce) {
+  .tl-bar { transition: none; }
+}

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

@@ -0,0 +1,22 @@
+import type { LabSnapshot } from "@parity/product-lab/ports/driving";
+import type { ShellContext } from "./shell-kit.js";
+import type { RunEntry } from "./run-progress.js";
+import type { UiCalls } from "./ui-calls.js";
+import { type Timeline, type TimelineBar } from "./timeline.js";
+export interface TimelineRenderOptions {
+    /** A row's name: the identity's, or Setup. */
+    name(id: string): string;
+    /** The identity's tone index (tiles and avatars use the same). */
+    tone(id: string): number;
+    now: number;
+    selected?: string;
+    onSelect?(bar: TimelineBar): void;
+}
+export declare function renderTimeline(model: Timeline, options: TimelineRenderOptions): HTMLElement;
+/** Runs > Timeline: the run Current shows, as a waterfall, live while it runs. */
+export declare function createTimelineView(ctx: ShellContext, source: {
+    shown(): RunEntry | undefined;
+    calls: UiCalls;
+}): {
+    render(value: LabSnapshot): void;
+};