@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/workspace-shell.js

@@ -0,0 +1,637 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { setText } from "./dom.js";
+import { avatar as uiAvatar, h, icon as uiIcon, kbd, logo as brandLogo, patchChildren, statusDot, tabs as uiTabs } from "./ui.js";
+import { button, byId, groupOf, groups, icon, labelControl, sectionIcons, sections } from "./shell-kit.js";
+import { chainsLine, environmentSummary, keptChains, oneEnvironmentHint, unconfiguredEnvironments } from "./environment.js";
+import { createEnvironmentView } from "./view-environment.js";
+import { createFixturePicker } from "./fixtures.js";
+import { environmentOptionRows } from "./environment-options.js";
+import { request } from "./request.js";
+import { createIdentitiesView, identityStatusChip, viewModeControl } from "./view-identities.js";
+import { createRunsView } from "./view-runs.js";
+import { createRecordingsView } from "./recordings.js";
+import { createTimelineView } from "./view-timeline.js";
+import { createUiCalls } from "./ui-calls.js";
+import { createIsland } from "./island.js";
+import { sessionConditions } from "./tile-strip.js";
+import { createLabMenu, menuEntryFor } from "./lab-menu.js";
+import { createConfigView } from "./view-config.js";
+import { applySavedTheme, toggleTheme } from "./settings.js";
+import { createScenariosView } from "./view-scenarios.js";
+import { createToolsView } from "./view-tools.js";
+import { createCharactersView } from "./view-characters.js";
+import { applyDock, brand, dockButtons, returnDock, storedDock } from "./dock.js";
+import { labQuery, onLabDocuments, showModal } from "./lab-document.js";
+import { createResizer, presetMenu } from "./resize.js";
+import { createPanelTabs, tabOf } from "./panel-tabs.js";
+import { runMode as currentRunMode } from "./run-mode.js";
+import { keepSwitch } from "./keep-switch.js";
+import { keptFastNote } from "./chain-day.js";
+const FAILED = ["failed", "other-reason", "unchecked"];
+export function idleWords(scenario, latest) {
+    if (latest?.title !== scenario)
+        return `${scenario} · ready to run`;
+    const words = { expected: "failed as intended", "other-reason": "failed for another reason", unchecked: "ended with nothing checked", unverified: "ended without proof" };
+    return `${scenario} · last run ${words[latest.state] ?? latest.state}`;
+}
+export function createWorkspaceShell() {
+    const panel = byId("command-center"), toolbar = document.querySelector(".toolbar");
+    const original = [...panel.children];
+    const heading = panel.querySelector(".panel-heading");
+    const title = heading.querySelector("h1");
+    document.body.dataset.dock = storedDock() === "window" ? returnDock() : storedDock();
+    panel.prepend(h("div", { class: "lab-head" }, brand(), dockButtons(), presetMenu()));
+    const panelTabs = createPanelTabs((section) => show(section));
+    panel.querySelector(".lab-head").after(panelTabs.node);
+    const builderBack = button("Back to the panel", () => show(beforeBuilder), "builder-back");
+    builderBack.id = "builder-back";
+    builderBack.hidden = true;
+    builderBack.title = "The builder takes the whole frame: go back to the panel, at the width you chose";
+    panel.querySelector(".lab-head").append(builderBack, byId("close"));
+    createResizer(panel);
+    const sectionSelect = document.createElement("select");
+    sectionSelect.id = "drawer-section";
+    sectionSelect.setAttribute("aria-label", "Lab section");
+    for (const [id, label] of Object.entries(sections))
+        sectionSelect.add(new Option(label, id));
+    sectionSelect.hidden = true;
+    const sectionTabs = h("div", { class: "drawer-tabs" });
+    title.replaceWith(sectionSelect);
+    heading.after(sectionTabs);
+    heading.hidden = true;
+    const panes = new Map();
+    for (const id of Object.keys(sections)) {
+        const pane = document.createElement("div");
+        pane.className = "drawer-pane";
+        pane.dataset.section = id;
+        pane.hidden = id !== "scenarios";
+        panel.append(pane);
+        panes.set(id, pane);
+    }
+    const category = (node) => {
+        if (["identity-management", "identity-removal-hint"].includes(node.id))
+            return "identities";
+        if (["workspace-management", "environment-panel"].includes(node.id) || node.querySelector("#chain-activity"))
+            return "environment";
+        if (node.id === "registry")
+            return "actions";
+        if (node.id === "builder")
+            return "builder";
+        if (node.id === "extensions")
+            return "extensions";
+        if (["navigation-activity", "result-view"].includes(node.id) || node.querySelector("#evidence, #observation"))
+            return "evidence";
+        if (["lanes", "run-history-label", "identity-empty", "live-progress", "bindings-summary"].includes(node.id))
+            return "activity";
+        return "scenarios";
+    };
+    for (const node of original)
+        if (node !== heading)
+            panes.get(category(node)).append(node);
+    const globalStatus = document.createElement("div");
+    globalStatus.className = "drawer-status";
+    globalStatus.append(byId("status"), byId("busy-notice"), byId("replace-kept"), byId("operation-phases"));
+    sectionTabs.after(globalStatus);
+    const featureProgress = document.createElement("section");
+    featureProgress.id = "feature-execution";
+    const featureHeading = document.createElement("h2");
+    featureHeading.textContent = "Feature execution";
+    featureProgress.append(featureHeading, byId("feature-status"), byId("feature-outcome"), byId("feature-inspect"), byId("feature-breakpoints"), byId("feature-progress"));
+    panes.get("activity").prepend(featureProgress);
+    for (const id of ["new-identity", "restart"])
+        panes.get("identities").prepend(byId(id));
+    const stored = document.createElement("div");
+    stored.hidden = true;
+    stored.append(byId("identity"), byId("view-mode"), byId("view-caption"));
+    document.body.append(stored);
+    stored.append(byId("app-name"));
+    const toggle = byId("toggle"), progress = byId("compact-progress"), runner = byId("runner-status"), runMode = byId("run-mode");
+    const actorButton = button("People", () => openPicker("identity"), "stage-people");
+    actorButton.id = "identity-picker";
+    const environmentButton = button("Environment ▴", () => openPicker("environment"), "context-button");
+    environmentButton.id = "environment-picker";
+    const environment = byId("environment");
+    environment.hidden = true;
+    stored.append(environment);
+    const spacer = document.createElement("span");
+    spacer.className = "spacer";
+    const runButton = button("Run scenario", () => { closePicker(); const source = primarySource(); if (source && !source.disabled)
+        source.click(); }, "primary");
+    runButton.id = "dock-run";
+    const stopButton = button("Stop", () => { const source = visibleButton("feature-cancel", "cancel"); if (source && !source.disabled)
+        source.click(); }, "dock-outline");
+    stopButton.id = "dock-stop";
+    stopButton.hidden = true;
+    labelControl(stopButton, "Stop", uiIcon("square", 14), false);
+    const mirror = (id, label, symbol, action, className = "dock-outline") => { const node = button(label, action, className); node.id = id; node.hidden = true; labelControl(node, label, uiIcon(symbol, 14), false); return node; };
+    const press = (...ids) => { const source = visibleButton(...ids); if (source && !source.disabled)
+        source.click(); };
+    const pauseButton = mirror("dock-pause", "Pause", "pause", () => press("feature-pause-now", "pause"));
+    const stepButton = mirror("dock-step", "Step", "step-forward", () => press("feature-step"));
+    const replayRunButton = mirror("dock-replay-run", "Replay", "history", () => { void recordings.openLatest(); }, "primary");
+    const rerunButton = mirror("dock-rerun", "Rerun", "refresh-cw", () => { const source = runSource(); if (!source.disabled)
+        source.click(); });
+    const whyButton = mirror("dock-why", "", "bug", () => show("evidence"), "dock-outline dock-icon");
+    whyButton.setAttribute("aria-label", "Why it failed: the run's evidence");
+    whyButton.title = "Why it failed: the run's evidence";
+    const replayPrevious = mirror("dock-replay-previous", "", "skip-back", () => recordings.controls()?.previous(), "dock-outline dock-icon");
+    replayPrevious.setAttribute("aria-label", "Previous step");
+    const replayPlay = mirror("dock-replay-play", "Play", "play", () => recordings.controls()?.play(), "primary");
+    const replayNext = mirror("dock-replay-next", "", "skip-forward", () => recordings.controls()?.next(), "dock-outline dock-icon");
+    replayNext.setAttribute("aria-label", "Next step");
+    for (const node of [replayPrevious, replayPlay, replayNext])
+        node.hidden = false;
+    const replayActions = h("div", { class: "dock-replay", hidden: true }, replayPrevious, replayPlay, replayNext);
+    const live = document.createElement("span");
+    live.className = "live-state";
+    live.id = "live-status";
+    live.textContent = "Live";
+    live.setAttribute("aria-label", "Environment live");
+    const dockStatus = document.createElement("div");
+    dockStatus.className = "dock-status";
+    dockStatus.append(live, progress);
+    const divider = document.createElement("span");
+    divider.className = "divider";
+    const runGroup = h("div", { class: "dock-run" }, dockStatus);
+    toolbar.classList.add("dock");
+    toolbar.replaceChildren(toggle, environmentButton, divider, runGroup, spacer, runner);
+    const dockActions = document.createElement("div");
+    dockActions.className = "dock-actions";
+    dockActions.append(runMode, runButton, pauseButton, stepButton, replayRunButton, rerunButton, stopButton, whyButton);
+    toolbar.append(dockActions, replayActions);
+    const replayButton = runMode.querySelector("button[data-replay]");
+    replayButton.onclick = () => recordings.showList();
+    labelControl(toggle, "Lab", brandLogo(22), false);
+    toggle.append(uiIcon("chevron-up", 14));
+    toggle.setAttribute("aria-label", "Open lab menu");
+    const labMenu = createLabMenu({ toggle, show: (section, command) => show(section, command), settingsPane: panes.get("settings"), openPalette: () => { renderCommands(); showModal(palette); search.focus(); }, beforeToggle: () => { closePicker(); } });
+    const topToggle = h("button", { type: "button", id: "toggle-top", "aria-haspopup": "menu", "aria-expanded": "false", onclick: () => labMenu.toggle(topToggle) });
+    panelTabs.node.before(h("div", { class: "panel-lab" }, topToggle));
+    const picker = document.createElement("div");
+    picker.id = "quick-picker";
+    picker.className = "quick-picker";
+    picker.hidden = true;
+    picker.setAttribute("role", "dialog");
+    document.body.append(picker);
+    const palette = document.createElement("dialog");
+    palette.id = "command-palette";
+    palette.setAttribute("aria-label", "Commands");
+    const search = document.createElement("input");
+    search.type = "search";
+    search.placeholder = "Search scenarios, identities and commands…";
+    search.setAttribute("aria-label", "Search commands");
+    const commands = h("div", { class: "palette-results", role: "listbox" });
+    palette.append(h("label", { class: "palette-search" }, uiIcon("search", 18), search), commands, h("footer", {}, h("span", {}, kbd("↑"), kbd("↓"), "move"), h("span", {}, kbd("↵"), "open"), h("span", {}, kbd("esc"), "close")));
+    document.body.append(palette);
+    let current = storedDestination() ?? "scenarios", beforeBuilder = "scenarios", snapshot, pickerKind, pickerAnchor;
+    let runKind = "scenario";
+    function selectScenario(kind, value) { runKind = kind; const select = byId(kind === "feature" ? "feature-scenario" : "scenario"); if (select.value !== value)
+        choose(select, value);
+    else
+        closePicker(); if (snapshot)
+        render(snapshot); }
+    byId("scenario").addEventListener("change", () => { runKind = "scenario"; });
+    byId("feature-scenario").addEventListener("change", () => { runKind = "feature"; if (snapshot)
+        render(snapshot); });
+    const footers = new Map();
+    const context = {
+        panel, stored,
+        pane: section => panes.get(section),
+        footer(section) {
+            let node = footers.get(section);
+            if (!node) {
+                node = document.createElement("footer");
+                node.className = "drawer-footer";
+                node.id = section === "scenarios" ? "scenario-footer" : `${section}-footer`;
+                node.hidden = section !== current;
+                panel.append(node);
+                footers.set(section, node);
+            }
+            return node;
+        },
+        show: section => show(section), open: value => open(value), choose: (select, value) => choose(select, value),
+        selectScenario: (kind, value) => selectScenario(kind, value), runKind: () => runKind,
+        snapshot: () => snapshot, rerender: () => { if (snapshot)
+            render(snapshot); },
+        runs: () => runsView.history(),
+    };
+    const scenariosView = createScenariosView(context);
+    const fixtures = createFixturePicker({ snapshot: () => snapshot });
+    const runsView = createRunsView(context);
+    const uiCalls = createUiCalls();
+    const detailViews = [createIdentitiesView(context), createEnvironmentView(context), runsView, createTimelineView(context, { shown: () => runsView.shown(), calls: uiCalls })];
+    let chainLine = "";
+    const island = createIsland({ calls: uiCalls, latest: () => runsView.latest(), facts: (state) => {
+            chainLine = state.chain ?? "";
+            environmentButton.dataset.chain = chainLine;
+            environmentButton.title = [environmentButton.dataset.base ?? "", chainLine].filter(Boolean).join("\n");
+            progress.title = [progress.dataset.base ?? progress.title, ...state.waits.map((wait) => `waits for ${wait.text}`)].filter(Boolean).join(" · ");
+        } });
+    const recordings = createRecordingsView(context);
+    let watchLayout;
+    const toolsView = createToolsView(context, { openRecording: (id) => { show("recordings"); void recordings.open(id); }, watchLayout: (actors) => { recordings.leave(); return watchLayout?.(actors) ?? (() => { }); } });
+    createCharactersView(context, toolsView);
+    detailViews.push(toolsView);
+    const configView = createConfigView(context);
+    detailViews.push(configView);
+    let replayShown = false;
+    const replayChanged = () => { const now = recordings.replaying; if (now !== replayShown && snapshot) {
+        replayShown = now;
+        render(snapshot);
+    }
+    else
+        syncReplay(); };
+    const replayView = document.getElementById("recordings");
+    if (replayView)
+        new MutationObserver(replayChanged).observe(replayView, { childList: true, subtree: true, attributes: true, characterData: true });
+    function syncReplay() {
+        replayActions.hidden = !recordings.replaying;
+        if (!recordings.replaying)
+            return;
+        const controls = recordings.controls();
+        replayPrevious.disabled = !controls?.canPrevious;
+        replayNext.disabled = !controls?.canNext;
+        const playing = !!controls?.playing;
+        labelControl(replayPlay, playing ? "Pause" : "Play", uiIcon(playing ? "pause" : "play", 14), false);
+        replayPlay.disabled = !controls?.canPlay;
+        patchChildren(progress, [uiIcon("history", 15), h("span", { class: "dock-replay-line" }, h("strong", {}, "Replay"), ` ${recordings.title ?? ""}`)]);
+        progress.dataset.compact = "Replay";
+        progress.dataset.tone = "neutral";
+    }
+    byId("scenario").addEventListener("change", () => { runKind = "scenario"; });
+    byId("feature-scenario").addEventListener("change", () => { runKind = "feature"; if (snapshot)
+        render(snapshot); });
+    function nameTopToggle(section, command) {
+        const entry = menuEntryFor(section, command);
+        topToggle.dataset.shows = `section:${command ?? section}`;
+        topToggle.setAttribute("aria-label", `${entry.label}: open lab menu`);
+        patchChildren(topToggle, [uiIcon(entry.icon, 18), h("span", { class: "toggle-top-label" }, entry.label), uiIcon("chevron-down", 14)]);
+    }
+    function show(section, command) {
+        nameTopToggle(section, command);
+        for (const [id, item] of footers)
+            item.hidden = id !== section;
+        if (section === "builder" && current !== "builder")
+            beforeBuilder = current;
+        builderBack.hidden = section !== "builder";
+        current = section;
+        sectionSelect.value = section;
+        panel.dataset.section = section;
+        labMenu.hide();
+        const group = groupOf(section);
+        sectionTabs.dataset.shows = `section:${section}`;
+        const tab = tabOf(section);
+        panelTabs.render(section);
+        if (tab)
+            panel.dataset.tab = tab.id;
+        else
+            delete panel.dataset.tab;
+        const subTabs = tab ? (tab.sections.length > 1 ? tab.sections.map(item => ({ value: item.section, label: item.label })) : []) : group.sections.map(id => ({ value: id, label: group.tabs[id] }));
+        sectionTabs.replaceChildren(...(subTabs.length && (tab || Object.keys(group.tabs).length) ? [uiTabs(subTabs, section, id => show(id), tab?.label ?? group.label)] : []));
+        for (const node of labMenu.node.querySelectorAll("button[data-section]"))
+            node.setAttribute("aria-current", String(node.dataset.section === section));
+        document.body.dataset.panelSize = section === "builder" ? "full" : "normal";
+        for (const [id, pane] of panes)
+            pane.hidden = id !== section;
+        if (section === "environment") {
+            byId("environment-panel").open = false;
+            panes.get("environment").scrollTop = 0;
+        }
+        if (section === "environment" || (tabOf(section) && section !== "builder"))
+            storeDestination(section);
+        syncStatus();
+        if (section === "builder")
+            byId("builder").open = true;
+        closePicker();
+        open(true);
+    }
+    function open(request) { const value = request || document.body.dataset.dock === "window"; document.body.dataset.panel = value ? "open" : "closed"; syncStatus(); panel.hidden = !value; labMenu.hide(); toggle.setAttribute("aria-expanded", String(value)); if (!value)
+        closePicker(); }
+    function syncStatus() {
+        const status = byId("status"), busy = byId("busy-notice");
+        const error = status.dataset.error === "true" && status.dataset.run !== "true";
+        const notice = !busy.hidden && tabOf(current)?.id !== "run" && current !== "tools" && current !== "characters";
+        globalStatus.dataset.status = String(error || notice);
+        globalStatus.dataset.busy = String(notice);
+        globalStatus.hidden = !error && !notice;
+    }
+    sectionSelect.onchange = () => show(sectionSelect.value);
+    function closePicker(restoreFocus = true) { const previous = pickerAnchor; const wasOpen = !picker.hidden; picker.hidden = true; pickerKind = undefined; pickerAnchor = undefined; if (wasOpen && restoreFocus)
+        previous?.focus(); for (const node of [actorButton, environmentButton])
+        node.setAttribute("aria-expanded", "false"); }
+    function choose(select, value) { select.value = value; select.dispatchEvent(new Event("change", { bubbles: true })); closePicker(); }
+    function openPicker(kind) {
+        const anchor = kind === "identity" ? actorButton : environmentButton;
+        if (pickerKind === kind && pickerAnchor === anchor && !picker.hidden)
+            return closePicker();
+        closePicker();
+        labMenu.hide();
+        pickerKind = kind;
+        pickerAnchor = anchor;
+        picker.replaceChildren();
+        picker.setAttribute("aria-label", `${kind} selector`);
+        anchor.setAttribute("aria-expanded", "true");
+        const label = document.createElement("p");
+        label.className = "picker-heading";
+        label.textContent = kind === "identity" ? "View an identity" : "Your environments";
+        picker.append(label);
+        if (kind === "identity") {
+            const select = byId("identity");
+            for (const [index, actor] of (snapshot?.actors ?? []).entries()) {
+                const selected = select.value === actor.id;
+                const item = h("button", { type: "button", class: `picker-option identity-option${selected ? " selected" : ""}`, "data-identity": actor.id, onclick: () => choose(select, actor.id) }, uiAvatar(actor.name, index, "md"), h("span", {}, h("strong", {}, actor.name), actor.username?.trim() ? h("small", {}, actor.username) : null), identityStatusChip(actor), selected ? uiIcon("check", 16) : null);
+                picker.append(item);
+            }
+            const modes = h("div", { class: "picker-view" }, viewModeControl(context, () => closePicker()));
+            picker.append(modes, button("See all identities →", () => show("identities"), "picker-footer"));
+        }
+        else {
+            const currentId = snapshot?.selectedEnvironment ?? snapshot?.registry?.environment.id;
+            const state = document.body.dataset.environmentState ?? "running";
+            const health = state === "running" ? (snapshot?.activity.chains.some(chain => chain.error) ? "warning" : "success") : state === "starting" ? "accent" : state === "failed" ? "danger" : "neutral";
+            const listed = snapshot?.environments.length ? snapshot.environments : [{ id: currentId ?? "", label: snapshot?.environment ?? "No environment", description: "" }];
+            for (const item of listed) {
+                const plan = snapshot?.switchPlans[item.id];
+                const current = item.id === currentId || !snapshot?.environments.length;
+                const entry = snapshot?.registry?.environments.find(candidate => candidate.id === item.id);
+                const retention = current ? snapshot?.retention : entry?.retention;
+                const kept = current ? keptChains(snapshot?.keepBetweenStarts) : undefined;
+                const summary = environmentSummary({ topology: entry?.topology, offer: entry?.offer ?? (current ? snapshot?.registry?.environment.offer : undefined), retention: retention ?? { retention: "unknown", reason: "" }, ...(kept ? { kept } : {}) });
+                const unavailable = !current && !plan?.allowed;
+                const control = h("button", { type: "button", class: `picker-option environment-option${current ? " selected" : ""}${unavailable ? " is-unavailable" : ""}`, "data-environment": item.id, "aria-disabled": unavailable ? "true" : undefined, title: current ? `${item.label} · ${state}` : [item.description, plan?.reason].filter(Boolean).join("\n") || undefined,
+                    onclick: () => { show("environment"); if (!current && !unavailable)
+                        labQuery(`[data-switch="${CSS.escape(item.id)}"]`)?.click(); } }, h("span", { class: "scenario-symbol" }, uiIcon("chain", 15)), h("span", {}, h("strong", {}, item.label), summary ? h("small", {}, summary) : null), current ? statusDot(health, health === "accent", `Environment ${state}`) : unavailable ? h("span", { class: "ui-chip ui-chip--warning", title: plan?.reason }, entry?.problems?.length ? "can't start" : "unavailable") : null, current ? uiIcon("check", 16) : null);
+                const ways = environmentOptionRows({ item, current, ...(current && snapshot?.selectedOption ? { running: snapshot.selectedOption.option } : {}),
+                    choose: async (option) => {
+                        await request("/api/environment-option", { environment: item.id, option: option.id });
+                        show("environment");
+                        if (!current && !unavailable)
+                            labQuery(`[data-switch="${CSS.escape(item.id)}"]`)?.click();
+                    } });
+                picker.append(control, ...ways, fixtures.group(item.id, current && state === "running"));
+            }
+            const saveFixture = state === "running" ? fixtures.saveControl() : undefined;
+            if (saveFixture)
+                picker.append(saveFixture);
+            fixtures.opened();
+            const keep = keepSwitch(snapshot?.keepBetweenStarts, keptFastNote(snapshot?.chainDays, true));
+            if (keep)
+                picker.append(keep);
+            const offRows = unconfiguredEnvironments(snapshot?.registry?.environments, snapshot?.registry);
+            picker.append(...offRows);
+            if (listed.length < 2 && !offRows.length)
+                picker.append(oneEnvironmentHint());
+            picker.append(button("See all environments →", () => show("environment"), "picker-footer"));
+        }
+        const pickerBody = document.createElement("div");
+        pickerBody.className = "picker-body";
+        for (const child of [...picker.children])
+            if (!child.classList.contains("picker-heading") && !child.classList.contains("picker-search") && !child.classList.contains("picker-footer") && !child.classList.contains("picker-view"))
+                pickerBody.append(child);
+        (picker.querySelector(".picker-search") ?? picker.querySelector(".picker-heading")).after(pickerBody);
+        if (picker.ownerDocument !== anchor.ownerDocument)
+            anchor.ownerDocument.body.append(picker);
+        const view = anchor.ownerDocument.defaultView ?? window;
+        picker.hidden = false;
+        const box = anchor.getBoundingClientRect();
+        picker.style.left = `${Math.min(Math.max(10, box.left), view.innerWidth - picker.offsetWidth - 10)}px`;
+        if (box.top < view.innerHeight / 2) {
+            picker.style.top = `${box.bottom + 8}px`;
+            picker.style.bottom = "auto";
+        }
+        else {
+            picker.style.top = "auto";
+            picker.style.bottom = `${view.innerHeight - box.top + 10}px`;
+        }
+        picker.querySelector("button:not(:disabled)")?.focus();
+    }
+    function detachedWords(state) {
+        const line = ["running", "starting", "paused"].includes(state ?? "") ? progress.textContent?.replace(/ · \d+:\d{2}$/, "").trim() : "";
+        return line ? `Lab detached · ${line}` : "Lab detached";
+    }
+    function visibleButton(...ids) { return ids.map(id => byId(id)).find(node => !node.hidden); }
+    function selectedScenarioName() {
+        const selected = byId(runKind === "feature" ? "feature-scenario" : "scenario").selectedOptions[0];
+        const feature = selected?.dataset.scenario ? JSON.parse(selected.dataset.scenario) : undefined;
+        return feature?.name ?? selected?.text;
+    }
+    function runSource() { return byId(runKind === "feature" ? "feature-run" : "run"); }
+    function primarySource() { return visibleButton("feature-continue", "continue") ?? runSource(); }
+    function render(value) {
+        snapshot = value;
+        const environmentLabel = value.environment;
+        const state = document.body.dataset.environmentState ?? "running";
+        const tone = state === "running" ? (value.activity.chains.some(chain => chain.error) ? "warning" : "success") : state === "starting" || state === "stopping" ? "accent" : state === "failed" ? "danger" : "neutral";
+        const chains = chainsLine(value.activity.chains, value.registry?.environment.offer?.chains);
+        const kind = value.public ? "live network" : "on this machine";
+        patchChildren(environmentButton, [tone === "success" ? live : statusDot(tone, tone === "accent", `Environment ${state}`), h("span", { class: "dock-env-name" }, environmentLabel), h("small", { class: "dock-env-detail" }, chains ? `${chains} · ${kind}` : kind), uiIcon("chevron-down", 14)]);
+        environmentButton.dataset.base = `${environmentLabel} · ${state}`;
+        environmentButton.title = [environmentButton.dataset.base, chainLine].filter(Boolean).join("\n");
+        labMenu.describe(value.name || "Product Lab", `${environmentLabel} · ${value.actors.length} ${value.actors.length === 1 ? "identity" : "identities"}`);
+        const scenarioName = selectedScenarioName();
+        for (const view of detailViews)
+            view.render(value);
+        island.render(value);
+        sessionConditions(value.actorConditions);
+        stageValue = value;
+        renderStage(value);
+        fixtures.changed(value);
+        syncStatus();
+        scenariosView.render(value);
+        const cont = visibleButton("feature-continue", "continue"), pause = visibleButton("feature-pause-now", "pause"), step = visibleButton("feature-step");
+        const cancel = visibleButton("feature-cancel", "cancel"), replaying = recordings.replaying;
+        const latest = runsView.latest(), failed = !cancel && !!latest && FAILED.includes(latest.state);
+        const source = primarySource();
+        labelControl(runButton, cont ? "Continue" : "Run scenario", icon("play"), false);
+        runButton.disabled = source.disabled;
+        runButton.title = source.title || (scenarioName && !cont ? `Run “${scenarioName}”` : "");
+        runButton.hidden = replaying || failed || (!!cancel && !cont);
+        pauseButton.hidden = replaying || !pause || !!cont;
+        pauseButton.disabled = pause?.disabled ?? true;
+        pauseButton.title = "Pause after this step";
+        stepButton.hidden = replaying || !step;
+        stepButton.disabled = step?.disabled ?? true;
+        stepButton.title = "Run the next step, then pause";
+        stopButton.hidden = replaying || !cancel;
+        stopButton.disabled = cancel?.disabled ?? true;
+        labelControl(stopButton, cont ? "" : "Stop", uiIcon("square", 14), false);
+        stopButton.classList.toggle("dock-icon", !!cont);
+        stopButton.setAttribute("aria-label", "Stop");
+        for (const node of [replayRunButton, rerunButton, whyButton])
+            node.hidden = replaying || !failed;
+        replayRunButton.title = latest ? `Replay “${latest.title}” from its recording, step by step: nothing runs again and nothing is sent` : "";
+        rerunButton.disabled = runSource().disabled;
+        rerunButton.title = scenarioName ? `Run “${scenarioName}” again, live, on the running chain` : "Run the scenario again, live, on the running chain";
+        replayButton.setAttribute("aria-pressed", String(replaying));
+        syncReplay();
+        for (const frame of document.querySelectorAll(".tile")) {
+            const index = Math.max(0, value.actors.findIndex(a => a.id === frame.dataset.actor)) % 6;
+            frame.style.setProperty("--actor-tone", `var(--tone-${index})`);
+            frame.dataset.tone = String(index);
+            frame.querySelector("figcaption > .ui-avatar")?.setAttribute("data-tone", String(index));
+        }
+    }
+    function commandEntries() {
+        const list = groups.flatMap(group => group.sections.map(id => ({ group: "Go to", label: sections[id], detail: group.label, icon: sectionIcons[id], action: () => show(id) })));
+        for (const option of byId("scenario").options)
+            list.push({ group: "Scenarios", label: option.text, detail: snapshot?.scenarios.find(item => item.id === option.value)?.description, icon: "play", action: () => { selectScenario("scenario", option.value); show("scenarios"); } });
+        for (const option of byId("feature-scenario").options) {
+            const feature = option.dataset.scenario ? JSON.parse(option.dataset.scenario) : undefined;
+            list.push({ group: "Scenarios", label: feature?.name ?? option.text, detail: feature?.path.replace(/^features\//, ""), keywords: feature?.tags.join(" "), icon: feature?.tags.some(tag => /control/.test(tag)) ? "shield" : "steps", action: () => { selectScenario("feature", option.value); show("scenarios"); } });
+        }
+        for (const actor of snapshot?.actors ?? [])
+            list.push({ group: "Identities", label: `View ${actor.name}`, detail: actor.username?.trim() || (actor.host?.label ?? ""), icon: "user", action: () => choose(byId("identity"), actor.id) });
+        list.push({ group: "View", label: "Compare identities", icon: "grid", action: () => choose(byId("view-mode"), "grid") }, { group: "View", label: "Focus one identity", icon: "focus", action: () => choose(byId("view-mode"), "pinned") }, { group: "View", label: "Follow the acting identity", icon: "eye", action: () => choose(byId("view-mode"), "follow") });
+        list.push({ group: "View", label: document.documentElement.dataset.theme === "dark" ? "Switch to light mode" : "Switch to dark mode", icon: document.documentElement.dataset.theme === "dark" ? "sun" : "moon", action: toggleTheme });
+        return list;
+    }
+    let paletteIndex = 0;
+    function renderCommands() {
+        const query = search.value.trim().toLowerCase();
+        const matches = commandEntries().filter(item => !query || `${item.label} ${item.detail ?? ""} ${item.keywords ?? ""} ${item.group}`.toLowerCase().includes(query)).slice(0, 60);
+        paletteIndex = Math.min(paletteIndex, Math.max(0, matches.length - 1));
+        commands.replaceChildren();
+        let group = "";
+        matches.forEach((item, index) => {
+            if (item.group !== group) {
+                group = item.group;
+                commands.append(h("div", { class: "picker-group" }, group));
+            }
+            const option = h("button", { type: "button", class: "picker-option", role: "option", "aria-selected": String(index === paletteIndex), onclick: () => { palette.close(); item.action(); } }, h("span", { class: "scenario-symbol" }, uiIcon(item.icon, 15)), h("span", {}, h("strong", {}, item.label), item.detail ? h("small", {}, item.detail) : null));
+            option.addEventListener("mousemove", () => { if (paletteIndex !== index) {
+                paletteIndex = index;
+                for (const node of commands.querySelectorAll(".picker-option"))
+                    node.setAttribute("aria-selected", String(node === option));
+            } });
+            commands.append(option);
+        });
+        if (!matches.length)
+            commands.append(h("p", { class: "palette-empty" }, `Nothing matches “${search.value}”.`));
+    }
+    search.addEventListener("keydown", event => {
+        const options = [...commands.querySelectorAll(".picker-option")];
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            paletteIndex = (paletteIndex + (event.key === "ArrowDown" ? 1 : -1) + options.length) % Math.max(1, options.length);
+            options.forEach((node, index) => node.setAttribute("aria-selected", String(index === paletteIndex)));
+            options[paletteIndex]?.scrollIntoView({ block: "nearest" });
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            options[paletteIndex]?.click();
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            palette.close();
+        }
+    });
+    search.addEventListener("input", () => { paletteIndex = 0; });
+    search.oninput = renderCommands;
+    applySavedTheme();
+    onLabDocuments("keydown", event => {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+            event.preventDefault();
+            if (palette.open)
+                palette.close();
+            else {
+                search.value = "";
+                renderCommands();
+                showModal(palette);
+                search.focus();
+            }
+        }
+        if (event.key === "Escape" && !picker.hidden) {
+            event.preventDefault();
+            closePicker();
+        }
+        if (event.key === "Tab" && !picker.hidden) {
+            const controls = [...picker.querySelectorAll("button:not(:disabled)")];
+            const first = controls[0], last = controls.at(-1);
+            if (event.shiftKey && document.activeElement === first) {
+                event.preventDefault();
+                last?.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === last) {
+                event.preventDefault();
+                first?.focus();
+            }
+        }
+    });
+    onLabDocuments("pointerdown", event => {
+        if (!picker.hidden && !picker.contains(event.target) && ![actorButton, environmentButton].some(node => node.contains(event.target)))
+            closePicker(false);
+    });
+    const shortcut = button("⌘ K", () => { renderCommands(); showModal(palette); search.focus(); }, "quiet");
+    shortcut.setAttribute("aria-label", "Open commands");
+    heading.append(shortcut);
+    labelControl(byId("close"), "", icon("close"), false);
+    byId("close").setAttribute("aria-label", "Close lab drawer");
+    byId("provider").hidden = true;
+    shortcut.hidden = true;
+    const stageWords = h("span", { class: "stage-words" });
+    const viewMode = byId("view-mode");
+    const gridButton = h("button", { type: "button", id: "stage-grid", class: "stage-button", "aria-label": "Show every person side by side", title: "Show every person side by side", onclick: () => choose(viewMode, viewMode.value === "grid" ? "pinned" : "grid") }, uiIcon("layout-grid", 16));
+    const stageButton = h("button", { type: "button", id: "stage-whole", class: "stage-button", "aria-label": "Give the whole window to the people", title: "Give the whole window to the people (Escape closes the lab too)", onclick: () => open(document.body.dataset.panel !== "open") }, uiIcon("maximize-2", 16));
+    const stageChip = h("span", { class: "stage-chip", id: "stage-chip", hidden: true });
+    const stageHead = h("header", { class: "stage-head", "aria-label": "Stage" }, actorButton, stageWords, h("span", { class: "spacer" }), stageChip, gridButton, stageButton);
+    document.querySelector(".workspace").prepend(stageHead);
+    stageHead.after(h("div", { id: "stage-banner", class: "stage-slot" }));
+    byId("application").after(h("div", { id: "stage-scrubber", class: "stage-slot" }));
+    let stageValue;
+    document.addEventListener("product-lab:dock", () => { if (stageValue)
+        renderStage(stageValue); });
+    function renderStage(value) {
+        const people = recordings.replaying ? recordings.people ?? 0 : value.actors.length;
+        labelControl(actorButton, `${people} ${people === 1 ? "person" : "people"}`);
+        actorButton.title = "Who is here: view one person, or how the people are shown";
+        const watching = !runMode.hidden && currentRunMode() === "watch";
+        const latest = runsView.latest(), state = latest?.state;
+        const failed = !!state && FAILED.includes(state) && !visibleButton("feature-cancel", "cancel");
+        const detached = document.body.dataset.dock === "window";
+        const chip = recordings.replaying ? undefined
+            : detached ? { words: detachedWords(state), symbol: "app-window", tone: "neutral", title: "The lab is in its own window, with the bottom bar; dock it again from its head" }
+                : state === "paused" ? { words: "Hands on", symbol: "hand", tone: "neutral", title: "The run waits: you can click inside any app" }
+                    : state === "running" || state === "starting" ? (watching ? { words: "Watch", symbol: "eye", tone: "neutral", title: "The run drives the apps you see" } : undefined)
+                        : undefined;
+        stageChip.hidden = !chip;
+        if (chip) {
+            patchChildren(stageChip, [uiIcon(chip.symbol, 14), chip.words]);
+            stageChip.dataset.tone = chip.tone;
+            stageChip.title = chip.title;
+        }
+        const words = recordings.replaying ? ["Replay", recordings.title].filter(Boolean).join(" · ")
+            : detached ? [value.name, "the lab is in its own window"].filter(Boolean).join(" · ")
+                : state === "paused" ? "Paused · you can click inside any app"
+                    : failed ? "Stopped at the failure · state kept"
+                        : !visibleButton("feature-cancel", "cancel") && selectedScenarioName() ? idleWords(selectedScenarioName(), latest)
+                            : [value.name, watching ? "Watch mode" : value.environment].filter(Boolean).join(" · ");
+        setText(stageWords, words);
+        if (stageWords.title !== words)
+            stageWords.title = words;
+        gridButton.setAttribute("aria-pressed", String(viewMode.value === "grid"));
+        stageButton.setAttribute("aria-pressed", String(document.body.dataset.panel !== "open"));
+    }
+    show(current);
+    open(!matchMedia("(max-width: 760px)").matches);
+    if (storedDock() === "window")
+        applyDock("window");
+    return { open, show, render, uiCalls, showRecordings: () => recordings.showList(),
+        stoppedConfig: (config) => configView.stopped(config),
+        runStarting: () => { recordings.leave(); show("activity"); }, toggleMenu: () => labMenu.toggle(), useWatchLayout: (begin) => { watchLayout = begin; } };
+}
+const DESTINATION_KEY = "product-lab.panel.destination";
+function storedDestination() {
+    let value = null;
+    try {
+        value = localStorage.getItem(DESTINATION_KEY);
+    }
+    catch {  }
+    return value && (value === "environment" || tabOf(value)) && value !== "builder" ? value : undefined;
+}
+function storeDestination(section) {
+    try {
+        localStorage.setItem(DESTINATION_KEY, section);
+    }
+    catch {  }
+}