@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/controls.d.ts

@@ -0,0 +1,51 @@
+import type { Page } from "playwright";
+/** A section of the lab, as the Lab menu names it (`data-section`): scenarios, activity, recordings, builder, environment, settings, identities, timeline, history, evidence, actions, extensions. */
+export type Section = string;
+/** Open a section of the lab: the Lab menu reaches every one (the redesign; the panel's tabs are a quicker way to three). */
+export declare function openSection(page: Page, section: Section): Promise<void>;
+/** Leave the people the whole stage: close the open panel (Escape, else its close button). */
+export declare function closePanel(page: Page): Promise<void>;
+/**
+ * Each shown tile's box ("<actor>:x,y,WxH"), read once the workspace has stopped moving. Opening or closing the panel
+ * slides the workspace for 320 ms (frame.css, `.workspace` transition): a box read during the slide is neither the old
+ * layout nor the new one (gate n6's user path, [F], 6 October 2026).
+ */
+export declare function settledTiles(page: Page): Promise<string[]>;
+/** Evidence & reports, then one of its tabs (Steps, Transactions, Navigation, Receipts). */
+export declare function evidenceTab(page: Page, tab: "steps" | "transactions" | "navigation" | "receipts"): Promise<void>;
+/** Open a scenario's detail (`scenario:<id>` or `feature:<value>`) with its Run setup expanded. */
+export declare function openScenario(page: Page, scenario: string): Promise<void>;
+/** Open the registered scenario's detail with its Run setup expanded (each actor's choice shown), as a person does before binding. */
+export declare function chooseScenario(page: Page, id: string): Promise<void>;
+/** The detail's Run setup is one line until its actor summary is clicked. */
+export declare function expandRunSetup(page: Page, scenario: string): Promise<void>;
+/** The library id (`feature:<value>`) of a feature scenario by its file and name; undefined while it is not listed. */
+export declare function featureScenarioId(page: Page, file: string, name: string): Promise<string | undefined>;
+/** Fill an input of the open registered scenario (a select of its declared values). */
+export declare function scenarioInput(page: Page, name: string, value: string): Promise<void>;
+/** Bind a feature scenario's actor (its role in the Gherkin) to an identity. */
+export declare function bindFeatureActor(page: Page, role: string, actorId: string): Promise<void>;
+/** Ask the next feature run to pause after each step. */
+export declare function pauseAfterEachStep(page: Page): Promise<void>;
+/** Start a scenario from its library row (`scenario:<id>` or `feature:<value>`). */
+export declare function runScenario(page: Page, scenario: string): Promise<void>;
+/** A paused run's Step or Continue: in the bottom bar (`#dock-step`, `#dock-run` reading Continue) when the lab has one, which hides the run card's own. */
+export declare function runAction(page: Page, action: "step" | "continue"): Promise<void>;
+/** Watch or Background for the next run. */
+export declare function runMode(page: Page, mode: "watch" | "background"): Promise<void>;
+export declare function chooseIdentity(page: Page, id: string): Promise<void>;
+export declare function chooseView(page: Page, mode: string): Promise<void>;
+/** Create a new identity; it becomes the shown one once it runs. */
+export declare function newIdentity(page: Page): Promise<void>;
+/** Show `actorId`'s app as `device` (a catalogue name, or "fill") from its tile's device menu. */
+export declare function tileDevice(page: Page, actorId: string, device: string): Promise<void>;
+/** Open an action's row in Actions & blocks (only the row shows until then): its form, its Run button and its last run. */
+export declare function openBlock(page: Page, id: string): Promise<import("playwright").Locator>;
+/** The builder with `path` (a feature file, `features/…`) loaded from its document picker. */
+export declare function openBuilderDocument(page: Page, path: string): Promise<void>;
+/** Recordings, then the `index`th recording (newest first) opened in replay (its banner over the stage's tiles). */
+export declare function openRecording(page: Page, index?: number): Promise<void>;
+/** The number of steps of the open replay. */
+export declare function recordingSteps(page: Page): Promise<number>;
+/** Show the open replay at step `index` (0-based). */
+export declare function recordingStep(page: Page, index: number): Promise<void>;

package/entrypoints/panel/src/controls.js

@@ -0,0 +1,119 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export async function openSection(page, section) {
+    if (await page.locator("#lab-menu").isHidden())
+        await page.click("#toggle");
+    const item = page.locator(`#lab-menu button[data-section="${section}"]`);
+    if (await item.count())
+        return item.click();
+    await page.locator('#lab-menu button[data-section="tools"]').click();
+    await page.locator(`.drawer-tabs [role="tab"][data-value="${section}"]`).click();
+}
+export async function closePanel(page) {
+    if (await page.locator("#command-center").isVisible())
+        await page.keyboard.press("Escape");
+    if (await page.locator("#command-center").isVisible())
+        await page.click("#close");
+}
+export async function settledTiles(page) {
+    await page.waitForFunction(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(true)))));
+    await page.waitForFunction(() => !document.querySelector(".workspace")?.getAnimations().length, undefined, { timeout: 5_000 });
+    return page.locator("#application .tile:not([hidden])").evaluateAll((items) => items.map((item) => {
+        const box = item.getBoundingClientRect();
+        return `${item.dataset.actor}:${Math.round(box.x)},${Math.round(box.y)},${Math.round(box.width)}x${Math.round(box.height)}`;
+    }));
+}
+export async function evidenceTab(page, tab) {
+    await openSection(page, "evidence");
+    await page.click(`.run-evidence-tabs [role="tab"][data-value="${tab}"]`);
+}
+export async function openScenario(page, scenario) {
+    await openSection(page, "scenarios");
+    const title = page.locator(`[data-scenario="${scenario}"] .scenario-title`);
+    if (await title.getAttribute("aria-expanded") !== "true")
+        await title.click();
+    await expandRunSetup(page, scenario);
+}
+export async function chooseScenario(page, id) {
+    await openScenario(page, `scenario:${id}`);
+}
+export async function expandRunSetup(page, scenario) {
+    const toggle = page.locator(`.scn-detail[data-scenario="${scenario}"] button.scn-run-toggle`);
+    if (await toggle.count() && (await toggle.getAttribute("aria-expanded")) !== "true")
+        await toggle.click();
+}
+export async function featureScenarioId(page, file, name) {
+    const options = await page.locator("#feature-scenario option").evaluateAll((items) => items.map((item) => ({ value: item.value, scenario: JSON.parse(item.dataset.scenario ?? "{}") })));
+    const found = options.find((item) => item.scenario.name === name && item.scenario.path?.endsWith(file));
+    return found ? `feature:${found.value}` : undefined;
+}
+export async function scenarioInput(page, name, value) {
+    await page.locator(`#scenario-form select[name="${name}"]`).selectOption(value);
+}
+export async function bindFeatureActor(page, role, actorId) {
+    await page.locator(`#feature-bindings select[data-actor="${role}"]`).selectOption(actorId);
+}
+export async function pauseAfterEachStep(page) {
+    await page.locator("#feature-pause").check();
+}
+export async function runScenario(page, scenario) {
+    await page.locator(`[data-scenario="${scenario}"] .run-small`).click();
+}
+export async function runAction(page, action) {
+    if (await page.locator("body[data-dock]").count()) {
+        await (action === "step" ? page.locator("#dock-step") : page.locator("#dock-run", { hasText: "Continue" })).click();
+        return;
+    }
+    await page.locator(`.run-card [data-run-action="${action}"]`).click();
+}
+export async function runMode(page, mode) {
+    await page.click(`button[data-run-mode="${mode}"]`);
+}
+export async function chooseIdentity(page, id) {
+    await page.click("#identity-picker");
+    await page.locator(`#quick-picker [data-identity="${id}"]`).click();
+}
+export async function chooseView(page, mode) {
+    if (mode === "follow") {
+        await openSection(page, "identities");
+        await page.click("#follow-actor-view");
+        return;
+    }
+    await page.click("#identity-picker");
+    await page.locator(`#quick-picker [data-view="${mode}"]`).click();
+}
+export async function newIdentity(page) {
+    await openSection(page, "identities");
+    await page.locator("#new-identity").click();
+}
+export async function tileDevice(page, actorId, device) {
+    await page.locator(`#application .tile[data-actor="${actorId}"] .tile-device-menu`).selectOption(device);
+}
+export async function openBlock(page, id) {
+    const form = page.locator(`form[data-block="${id}"]`);
+    if (await page.locator('.drawer-pane[data-section="actions"]').isHidden())
+        await openSection(page, "actions");
+    if (await form.getAttribute("data-expanded") !== "true")
+        await form.locator(":scope > .ui-row").click();
+    await form.locator(`button[data-block-run="${id}"]`).waitFor({ state: "visible" });
+    return form;
+}
+export async function openBuilderDocument(page, path) {
+    await openSection(page, "builder");
+    await page.locator("#builder:not([hidden])").waitFor();
+    await page.locator(".builder-document-options > summary").click();
+    await page.locator(`.builder-document-list [data-path="${path}"]`).first().click();
+}
+export async function openRecording(page, index = 0) {
+    await openSection(page, "recordings");
+    const recording = page.locator("#recordings [data-recording]").nth(index);
+    await recording.waitFor({ timeout: 30_000 });
+    await recording.click();
+    await page.locator("#replay-ribbon").waitFor({ timeout: 30_000 });
+}
+export function recordingSteps(page) {
+    return page.locator("#recordings .rec-step[data-step]").count();
+}
+export async function recordingStep(page, index) {
+    await page.locator(`#recordings .rec-step[data-step="${index}"]`).click();
+}

package/entrypoints/panel/src/device-list.d.ts

@@ -0,0 +1,5 @@
+import type { DeviceProfile } from "@parity/product-lab/domain/devices";
+export declare function listDevices(): Promise<{
+    name: string;
+    profile: DeviceProfile | undefined;
+}[]>;

package/entrypoints/panel/src/device-list.js

@@ -0,0 +1,9 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export async function listDevices() {
+    return import("./visible/device-catalogue.js").then(({ deviceCatalogue, deviceNames }) => { const catalogue = deviceCatalogue(); return deviceNames().map((name) => ({ name, profile: catalogue[name] })); }, (error) => {
+        if (error.code === "ERR_MODULE_NOT_FOUND")
+            return [];
+        throw error;
+    });
+}

package/entrypoints/panel/src/extensions.d.ts

@@ -0,0 +1,5 @@
+import type { CheckedExtension, ExtensionView } from "@parity/product-lab/ports/driving";
+/** The panel's list: each module's URL (`/ext/<n>/<entry>`), or why it is refused. */
+export declare function extensionViews(bundles: readonly CheckedExtension[]): ExtensionView[];
+/** The JavaScript for `/ext/<n>/<path>`, or undefined when that is not a file of an accepted bundle. */
+export declare function extensionFile(bundles: readonly CheckedExtension[], pathname: string): string | undefined;

package/entrypoints/panel/src/extensions.js

@@ -0,0 +1,28 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { readFileSync } from "node:fs";
+import { relative, resolve, sep } from "node:path";
+import { JsxEmit, ModuleKind, ScriptTarget, transpileModule } from "typescript";
+const transpile = (source, fileName) => transpileModule(source, { fileName, compilerOptions: { target: ScriptTarget.ES2022, module: ModuleKind.ESNext, jsx: JsxEmit.React, jsxFactory: "React.createElement", jsxFragmentFactory: "React.Fragment" } }).outputText;
+export function extensionViews(bundles) {
+    return bundles.map((bundle, index) => ({
+        integration: bundle.integration,
+        kind: bundle.kind,
+        key: bundle.key,
+        title: bundle.title,
+        ...(bundle.refused !== undefined ? { refused: bundle.refused } : { url: `/ext/${index}/${relative(bundle.root, bundle.file).split(sep).join("/")}` }),
+    }));
+}
+export function extensionFile(bundles, pathname) {
+    const match = /^\/ext\/(\d+)\/(.+)$/.exec(pathname);
+    if (!match)
+        return undefined;
+    const bundle = bundles[Number(match[1])];
+    if (!bundle || bundle.refused !== undefined)
+        return undefined;
+    const path = decodeURIComponent(match[2]).split("/").join(sep);
+    const file = [path, `${path}.ts`, `${path}.tsx`, `${path}.js`, `${path}.jsx`].find((candidate) => bundle.files.includes(candidate));
+    if (!file)
+        return undefined;
+    return transpile(readFileSync(resolve(bundle.root, file), "utf8"), resolve(bundle.root, file));
+}

package/entrypoints/panel/src/feature-bindings.d.ts

@@ -0,0 +1,9 @@
+/** Scenario actor name -> saved identity id, from the panel's picks (new identities are left to the scenario). */
+export declare function featureBindings(value: unknown): Record<string, string>;
+/**
+ * Scenario actor name -> the host its new identity is created on, from `{ new: { host } }` picks; `{ hosts }` to spread
+ * into a feature or builder run, or nothing when no pick names a host. The runtime checks each against the declared hosts.
+ */
+export declare function featureHosts(value: unknown): {
+    hosts?: Record<string, string>;
+};

package/entrypoints/panel/src/feature-bindings.js

@@ -0,0 +1,40 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+const isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+export function featureBindings(value) {
+    if (value === undefined)
+        return {};
+    if (!isRecord(value))
+        throw new Error("Bindings must be an object of actor name to identity");
+    const bindings = {};
+    for (const [actor, choice] of Object.entries(value)) {
+        if (choice === "new" || newHost(actor, choice) !== null)
+            continue;
+        if (isRecord(choice) && typeof choice.existing === "string")
+            bindings[actor] = choice.existing;
+        else if (typeof choice === "string")
+            bindings[actor] = choice;
+        else
+            throw new Error(`The binding of ${actor} must be an identity id, { existing }, "new" or { new: { host } }`);
+    }
+    return bindings;
+}
+function newHost(actor, choice) {
+    if (!isRecord(choice) || !("new" in choice))
+        return null;
+    const host = isRecord(choice.new) ? choice.new.host : null;
+    if (host !== undefined && (typeof host !== "string" || !host))
+        throw new Error(`The new identity of ${actor} names its host by id, as in { new: { host: "truapi-wasm" } }`);
+    return host;
+}
+export function featureHosts(value) {
+    if (!isRecord(value))
+        return {};
+    const hosts = {};
+    for (const [actor, choice] of Object.entries(value)) {
+        const host = newHost(actor, choice);
+        if (typeof host === "string")
+            hosts[actor] = host;
+    }
+    return Object.keys(hosts).length ? { hosts } : {};
+}

package/entrypoints/panel/src/feature-control.d.ts

@@ -0,0 +1,14 @@
+import type { FeatureListing } from "@parity/product-lab/ports/driving";
+import type { PanelFeatureScenario } from "./server.js";
+/** A feature file's tags: the Feature's and every scenario's (a negative control's tag may sit on either). */
+export declare function fileTags(listing: FeatureListing, path: string): string[];
+/**
+ * How a window or terminal run of `path` (one scenario of it when `selection` names one) is judged: undefined when it
+ * selects no control (it runs as a normal scenario); `{}` when it does, and its tags judge it.
+ */
+export declare function featureControl(listing: FeatureListing, path: string, selection?: {
+    name?: string;
+    line?: number;
+}): Record<string, never> | undefined;
+/** The lab's scenarios as the window and the terminal list them. */
+export declare function panelFeatures(listing: FeatureListing): PanelFeatureScenario[];

package/entrypoints/panel/src/feature-control.js

@@ -0,0 +1,25 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { relativeFeaturePath } from "@parity/product-lab/domain/features";
+import { NEGATIVE_CONTROL_TAG } from "@parity/product-lab/domain/runs";
+export function fileTags(listing, path) {
+    const file = relativeFeaturePath(path) ?? path;
+    return [...new Set(listing.features.filter((feature) => feature.path === file).flatMap((feature) => [...feature.tags, ...feature.scenarios.flatMap((scenario) => scenario.tags)]))];
+}
+function selectedTags(listing, path, selection) {
+    if (selection.line === undefined && selection.name === undefined)
+        return fileTags(listing, path);
+    const file = relativeFeaturePath(path) ?? path;
+    const feature = listing.features.find((item) => item.path === file);
+    const scenario = feature?.scenarios.find((item) => (selection.line !== undefined ? item.line === selection.line : item.name === selection.name));
+    return feature && scenario ? [...feature.tags, ...scenario.tags] : fileTags(listing, path);
+}
+export function featureControl(listing, path, selection = {}) {
+    return selectedTags(listing, path, selection).includes(NEGATIVE_CONTROL_TAG) ? {} : undefined;
+}
+export function panelFeatures(listing) {
+    return listing.features.flatMap((feature) => {
+        const about = { name: feature.name, ...(feature.description !== undefined ? { description: feature.description } : {}), tags: feature.tags, line: feature.line };
+        return feature.scenarios.map(({ actors, ...scenario }) => ({ path: feature.path, ...scenario, actors: actors ?? [], feature: about }));
+    });
+}

package/entrypoints/panel/src/feature-events.d.ts

@@ -0,0 +1,10 @@
+import type { ServerResponse } from "node:http";
+import type { LabRuntime } from "@parity/product-lab/ports/driving";
+export declare class FeatureEvents {
+    private readonly runtime;
+    private watch?;
+    constructor(runtime: LabRuntime);
+    /** The stream: first "watching" (what is observed, or why nothing is), then a "changed" event per change. */
+    stream(response: ServerResponse): void;
+    close(): void;
+}

package/entrypoints/panel/src/feature-events.js

@@ -0,0 +1,32 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export class FeatureEvents {
+    runtime;
+    watch;
+    constructor(runtime) {
+        this.runtime = runtime;
+    }
+    stream(response) {
+        let reason;
+        try {
+            this.watch ??= this.runtime.watchFeatures?.();
+            if (!this.watch)
+                reason = "this lab does not watch its feature files";
+        }
+        catch (error) {
+            reason = error instanceof Error ? error.message : String(error);
+        }
+        response.writeHead(200, { "Content-Type": "text/event-stream", Connection: "keep-alive" });
+        const stop = this.runtime.subscribe((event) => {
+            if (event.type === "features-changed")
+                response.write(`event: changed\ndata: ${JSON.stringify(event)}\n\n`);
+        });
+        response.once("close", stop);
+        response.write(`event: watching\ndata: ${JSON.stringify(this.watch ? { watching: true, paths: this.watch.paths } : { watching: false, reason })}\n\n`);
+    }
+    close() {
+        const watch = this.watch;
+        this.watch = undefined;
+        void watch?.close();
+    }
+}

package/entrypoints/panel/src/frame-check.d.ts

@@ -0,0 +1,28 @@
+import { type AppFramingInspection, type AppFramingInspectionRequest, type FramingRefusal } from "@parity/product-lab/domain";
+/** A refusal as the tiles show it. */
+export interface FrameRefusal extends FramingRefusal {
+    readonly url: string;
+    readonly message: string;
+}
+/** The optional driving runtime capability, returning serializable evidence. */
+export type FramingInspection = (request: AppFramingInspectionRequest) => Promise<AppFramingInspection>;
+/** How long an answered document stands before it is inspected again. */
+export declare const FRAME_CHECK_TTL_MS = 10000;
+/** Unknown evidence is retried sooner while an app starts. */
+export declare const FRAME_CHECK_RETRY_MS = 2000;
+export declare class FrameChecks {
+    private readonly origin;
+    private readonly inspect?;
+    private readonly now;
+    private readonly known;
+    private readonly asking;
+    constructor(origin: string, inspect?: FramingInspection | undefined, now?: () => number);
+    /** Cached evidence by app origin; only loopback HTTP addresses are inspected. */
+    inspections(urls: readonly string[]): Record<string, AppFramingInspection>;
+    /** The existing refusal map for tiles, derived only from explicit refused evidence. */
+    refusals(urls: readonly string[]): Record<string, FrameRefusal>;
+    /** Wait briefly for first answers, then return the current refusal map. */
+    settled(urls: readonly string[], waitMs?: number): Promise<Record<string, FrameRefusal>>;
+    /** Share one in-flight call per address; errors and absent capability stay unknown. */
+    check(url: string): Promise<void>;
+}

package/entrypoints/panel/src/frame-check.js

@@ -0,0 +1,69 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { LoopbackUrl } from "@parity/product-lab/domain";
+export const FRAME_CHECK_TTL_MS = 10_000;
+export const FRAME_CHECK_RETRY_MS = 2_000;
+const FIRST_ANSWER_MS = 400;
+export class FrameChecks {
+    origin;
+    inspect;
+    now;
+    known = new Map();
+    asking = new Map();
+    constructor(origin, inspect, now = () => Date.now()) {
+        this.origin = origin;
+        this.inspect = inspect;
+        this.now = now;
+    }
+    inspections(urls) {
+        const answers = {};
+        for (const url of new Set(urls)) {
+            if (!LoopbackUrl.test(url, { protocols: ["http:", "https:"] }))
+                continue;
+            const entry = this.known.get(url);
+            if (!entry || this.now() - entry.at > entry.ttl)
+                void this.check(url);
+            answers[new URL(url).origin] = entry?.inspection ?? { status: "unknown", url, reason: "Document framing inspection is pending" };
+        }
+        return answers;
+    }
+    refusals(urls) {
+        const refused = {};
+        for (const [origin, answer] of Object.entries(this.inspections(urls))) {
+            if (answer.status === "refused")
+                refused[origin] = { ...answer.refusal, url: answer.url, message: answer.message };
+        }
+        return refused;
+    }
+    async settled(urls, waitMs = FIRST_ANSWER_MS) {
+        const first = [...new Set(urls)].filter((url) => !this.known.has(url) && LoopbackUrl.test(url, { protocols: ["http:", "https:"] }));
+        if (first.length) {
+            let timer;
+            const waited = new Promise((resolve) => { timer = setTimeout(resolve, waitMs); });
+            await Promise.race([Promise.all(first.map((url) => this.check(url))), waited]);
+            clearTimeout(timer);
+        }
+        return this.refusals(urls);
+    }
+    check(url) {
+        if (!LoopbackUrl.test(url, { protocols: ["http:", "https:"] }))
+            return Promise.resolve();
+        const running = this.asking.get(url);
+        if (running)
+            return running;
+        const asked = Promise.resolve().then(async () => {
+            let inspection;
+            try {
+                inspection = this.inspect
+                    ? await this.inspect({ url, ancestors: [this.origin], framedBy: "The lab window" })
+                    : { status: "unknown", url, reason: "The runtime provides no document framing inspector" };
+            }
+            catch (error) {
+                inspection = { status: "unknown", url, reason: error instanceof Error ? error.message : String(error) };
+            }
+            this.known.set(url, { at: this.now(), ttl: inspection.status === "unknown" ? FRAME_CHECK_RETRY_MS : FRAME_CHECK_TTL_MS, inspection });
+        }).finally(() => this.asking.delete(url));
+        this.asking.set(url, asked);
+        return asked;
+    }
+}

package/entrypoints/panel/src/index.d.ts

@@ -0,0 +1,4 @@
+export { serveLab, WATCH_REFUSAL, NO_WINDOW_WATCH_REFUSAL, panelFeatures, panelRunsDirectory, featureBindings, exactName, featureSelection, type PanelFeatureScenario, type PanelFeatureSelection, type ServeOptions } from "./server.js";
+export { extensionViews } from "./extensions.js";
+export type { AgentsService, AgentView } from "./agent-routes.js";
+export { featureControl } from "./feature-control.js";

package/entrypoints/panel/src/index.js

@@ -0,0 +1,5 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export { serveLab, WATCH_REFUSAL, NO_WINDOW_WATCH_REFUSAL, panelFeatures, panelRunsDirectory, featureBindings, exactName, featureSelection } from "./server.js";
+export { extensionViews } from "./extensions.js";
+export { featureControl } from "./feature-control.js";

package/entrypoints/panel/src/main.d.ts

@@ -0,0 +1,3 @@
+export declare const PANEL_USAGE = "Usage: node --import tsx entrypoints/panel/src/main.ts [--config lab.config.ts] [--environment id] [--port 5202]";
+/** Serve the panel for `argv` until SIGINT or SIGTERM; resolves with the exit code. */
+export declare function main(argv: readonly string[]): Promise<number>;

package/entrypoints/panel/src/main.js

@@ -0,0 +1,40 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { pathToFileURL } from "node:url";
+import { parseArgs } from "node:util";
+import { createLabRuntime, processEnvironment } from "@parity/product-lab/composition";
+import { serveLab } from "./server.js";
+export const PANEL_USAGE = "Usage: node --import tsx entrypoints/panel/src/main.ts [--config lab.config.ts] [--environment id] [--port 5202]";
+export async function main(argv) {
+    const { values } = parseArgs({
+        args: [...argv],
+        options: { help: { type: "boolean", short: "h" }, config: { type: "string" }, environment: { type: "string" }, port: { type: "string" } },
+    });
+    if (values.help) {
+        console.log(PANEL_USAGE);
+        return 0;
+    }
+    const runtime = createLabRuntime({ ...(values.config ? { config: values.config } : {}), allowPublic: true }, processEnvironment());
+    const stopped = new Promise((resolve) => {
+        process.once("SIGINT", () => resolve());
+        process.once("SIGTERM", () => resolve());
+    });
+    try {
+        const lab = await runtime.load();
+        await runtime.startEnvironment(values.environment !== undefined ? { environment: values.environment } : {});
+        const server = await serveLab(runtime, Number(values.port ?? lab.port ?? 5202), lab.navigation);
+        console.log(`Lab panel: ${server.url}`);
+        await stopped;
+        await server.close();
+        return 0;
+    }
+    catch (error) {
+        console.error(error instanceof Error ? error.message : error);
+        return 1;
+    }
+    finally {
+        await runtime.close();
+    }
+}
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href)
+    process.exitCode = await main(process.argv.slice(2));

package/entrypoints/panel/src/react/browser.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { InputRendererApi, PanelApi, ResultRendererApi, UiModule } from "@parity/product-lab/ports/driving";
+export { React };
+export type ReactExtensionComponent<Api> = React.ComponentType<{
+    api: Api;
+}>;
+export declare const defineReactPanel: (Component: ReactExtensionComponent<PanelApi>) => UiModule<PanelApi, HTMLElement>;
+export declare const defineReactInputRenderer: (Component: ReactExtensionComponent<InputRendererApi>) => UiModule<InputRendererApi, HTMLElement>;
+export declare const defineReactResultRenderer: (Component: ReactExtensionComponent<ResultRendererApi>) => UiModule<ResultRendererApi, HTMLElement>;

package/entrypoints/panel/src/react/browser.js

@@ -0,0 +1,32 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+export { React };
+class ExtensionBoundary extends React.Component {
+    state = { failed: false, error: undefined };
+    static getDerivedStateFromError(error) { return { failed: true, error }; }
+    render() {
+        if (!this.state.failed)
+            return this.props.children;
+        const error = this.state.error;
+        return React.createElement("p", { className: "extension-error", role: "alert" }, `React extension failed: ${error instanceof Error ? error.message : String(error)}. Runs are not affected.`);
+    }
+}
+function module(Component) {
+    return {
+        apiVersion: 1,
+        mount(element, api) {
+            const root = createRoot(element, { onCaughtError: () => { } });
+            root.render(React.createElement(ExtensionBoundary, null, React.createElement(Component, { api })));
+            let mounted = true;
+            return () => { if (mounted) {
+                mounted = false;
+                root.unmount();
+            } };
+        },
+    };
+}
+export const defineReactPanel = (Component) => module(Component);
+export const defineReactInputRenderer = (Component) => module(Component);
+export const defineReactResultRenderer = (Component) => module(Component);

package/entrypoints/panel/src/react/prepare.d.ts

@@ -0,0 +1,10 @@
+export interface PreparedReactUi {
+    readonly file: string;
+    readonly sha256: string;
+    readonly bytes: number;
+    readonly changed: boolean;
+}
+/** Prepare a local relative import for an extension. No env overrides or consumer-source bundling. */
+export declare function prepareReactUi({ directory }: {
+    directory: string | URL;
+}): Promise<PreparedReactUi>;

package/entrypoints/panel/src/react/prepare.js

@@ -0,0 +1,49 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { createHash, randomUUID } from "node:crypto";
+import { mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+import { siblingModule } from "@parity/product-lab/domain/shared";
+const require = createRequire(import.meta.url);
+const version = (name) => require(`${name}/package.json`).version;
+const declaration = 'export { React, defineReactPanel, defineReactInputRenderer, defineReactResultRenderer } from "@parity/product-lab/shell/react";\nexport type { ReactExtensionComponent } from "@parity/product-lab/shell/react";\n';
+export async function prepareReactUi({ directory }) {
+    const destination = directory instanceof URL ? fileURLToPath(directory) : directory;
+    const result = await build({
+        absWorkingDir: fileURLToPath(new URL(".", import.meta.url)),
+        entryPoints: [fileURLToPath(siblingModule("./browser.ts", import.meta.url))],
+        bundle: true, format: "esm", platform: "browser", target: "es2022", write: false,
+        minify: true, legalComments: "inline", metafile: true,
+        define: { "process.env.NODE_ENV": '"production"' },
+    });
+    if (Object.values(result.metafile.outputs).some((output) => output.imports.length))
+        throw new Error("Prepared React UI contains external imports");
+    const code = result.outputFiles[0].contents;
+    const sha256 = createHash("sha256").update(code).digest("hex");
+    const manifest = JSON.stringify({ schema: 1, apiVersion: 1, react: version("react"), reactDom: version("react-dom"), sha256, bytes: code.byteLength }, null, 2) + "\n";
+    await mkdir(destination, { recursive: true });
+    let changed = false;
+    for (const [name, content] of [["react-ui.js", code], ["react-ui.d.ts", declaration], ["react-ui.manifest.json", manifest]]) {
+        const file = join(destination, name), bytes = Buffer.from(content);
+        const unchanged = await readFile(file).then((existing) => existing.equals(bytes), (error) => {
+            if (error.code === "ENOENT")
+                return false;
+            throw error;
+        });
+        if (unchanged)
+            continue;
+        const temporary = `${file}.${randomUUID()}.tmp`;
+        try {
+            await writeFile(temporary, bytes);
+            await rename(temporary, file);
+        }
+        finally {
+            await rm(temporary, { force: true });
+        }
+        changed = true;
+    }
+    return { file: join(destination, "react-ui.js"), sha256, bytes: code.byteLength, changed };
+}

package/entrypoints/panel/src/rebuild-rule.d.ts

@@ -0,0 +1,9 @@
+/** The attribute a container names what it shows with. */
+export declare const SHOWS_ATTRIBUTE = "data-shows";
+/**
+ * In-page code (a string: tsx's transform adds `__name` to named functions inside `page.evaluate`) that defines
+ * `window.__rebuildRule`: `options` for the observer (attributes it must watch beside childList), `changed(records)`
+ * (the containers whose `data-shows` changed in that batch) and `excused(node, changed)` (whether a node, a mutation's
+ * target, sits in one of them). Evaluate it once, then call it from the observer.
+ */
+export declare const REBUILD_RULE: string;