@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/agent-routes.d.ts

@@ -0,0 +1,32 @@
+type Send = (status: number, value: unknown) => void;
+/** One agent as the window shows it. */
+export interface AgentView {
+    readonly id: string;
+    readonly label: string;
+    readonly installed: boolean;
+    /** The line that installs it. */
+    readonly install: string;
+    /** What a person types to open it beside the lab themselves. */
+    readonly command: string;
+    /** Where Open opens it ("a new Terminal window"); absent: Copy only. */
+    readonly opens?: string;
+}
+/** What opens agents beside the lab: the CLI's launcher, as the window needs it. */
+export interface AgentsService {
+    /** The lab's folder, where every agent starts. */
+    directory(): string;
+    list(): AgentView[];
+    /** Open it beside the lab; resolves with what happened, rejects with why it could not. */
+    open(id: string): Promise<string>;
+}
+/** Said when the lab was started without a launcher (a programmatic lab). */
+export declare const NO_AGENTS = "This lab was started without a way to open agents: start it with `bun run lab` (or `product-lab`) to open Claude Code or Codex beside it.";
+export declare class AgentRoutes {
+    private readonly agents;
+    constructor(agents: AgentsService | undefined);
+    serves(pathname: string): boolean;
+    acts(pathname: string): boolean;
+    get(send: Send): void;
+    post(input: Record<string, unknown>, send: Send): Promise<void>;
+}
+export {};

package/entrypoints/panel/src/agent-routes.js

@@ -0,0 +1,32 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export const NO_AGENTS = "This lab was started without a way to open agents: start it with `bun run lab` (or `product-lab`) to open Claude Code or Codex beside it.";
+export class AgentRoutes {
+    agents;
+    constructor(agents) {
+        this.agents = agents;
+    }
+    serves(pathname) {
+        return pathname === "/api/agents";
+    }
+    acts(pathname) {
+        return pathname === "/api/agents/open";
+    }
+    get(send) {
+        if (!this.agents)
+            return send(200, { agents: [], unavailable: NO_AGENTS });
+        send(200, { directory: this.agents.directory(), agents: this.agents.list() });
+    }
+    async post(input, send) {
+        if (!this.agents)
+            return send(501, { error: NO_AGENTS });
+        if (typeof input.id !== "string")
+            return send(400, { error: "An agent id is required" });
+        try {
+            send(200, { done: await this.agents.open(input.id) });
+        }
+        catch (error) {
+            send(409, { error: error instanceof Error ? error.message : String(error) });
+        }
+    }
+}

package/entrypoints/panel/src/builder-input.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderEdit, BuilderFeature } from "@parity/product-lab/domain/builder";
+/** Check the complete posted document before it crosses into the builder. */
+export declare function builderFeature(value: unknown): BuilderFeature;
+/** Actors in scope before a checked scenario (a loaded file's Background): a list of names. */
+export declare function builderBound(value: unknown): value is string[];
+/** Check the posted edit's discriminant and fields before applying it. */
+export declare function builderEdit(value: unknown): BuilderEdit;

package/entrypoints/panel/src/builder-input.js

@@ -0,0 +1,66 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+const record = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const strings = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+const table = (value) => Array.isArray(value) && value.every(strings);
+const number = (value) => typeof value === "number" && Number.isFinite(value);
+const optional = (value, check) => value === undefined || check(value);
+const keyword = (value) => value === "Given" || value === "When" || value === "Then" || value === "And" || value === "But" || value === "*";
+function blockBase(value) {
+    return optional(value.keyword, keyword) && optional(value.checkpoint, (item) => typeof item === "boolean");
+}
+function sentence(value) {
+    return record(value) && value.kind === "sentence" && blockBase(value) && typeof value.pattern === "string" &&
+        strings(value.values) && optional(value.table, table);
+}
+function block(value) {
+    if (!record(value) || !blockBase(value))
+        return false;
+    switch (value.kind) {
+        case "sentence": return sentence(value);
+        case "repeat": return number(value.count) && Array.isArray(value.body) && value.body.every(sentence);
+        case "together": return Array.isArray(value.body) && value.body.every(sentence) && optional(value.form, (item) => item === "inline");
+        case "text": return keyword(value.keyword) && typeof value.text === "string" && typeof value.reason === "string" && optional(value.table, table);
+        default: return false;
+    }
+}
+function scenario(value) {
+    return record(value) && typeof value.name === "string" && strings(value.tags) && strings(value.description) &&
+        Array.isArray(value.blocks) && value.blocks.every(block);
+}
+function feature(value) {
+    return record(value) && typeof value.name === "string" && strings(value.tags) && strings(value.description) &&
+        Array.isArray(value.scenarios) && value.scenarios.every(scenario);
+}
+export function builderFeature(value) {
+    if (!feature(value))
+        throw new Error("A builder feature needs a name, text tags/description, and valid scenarios and blocks");
+    return value;
+}
+function edit(value) {
+    if (!record(value))
+        return false;
+    switch (value.op) {
+        case "add": return typeof value.pattern === "string" && optional(value.at, number) && optional(value.values, strings) && optional(value.table, table);
+        case "move": return number(value.from) && number(value.to);
+        case "remove":
+        case "ungroup": return number(value.at);
+        case "repeat": return number(value.from) && number(value.to) && number(value.count);
+        case "together": return number(value.from) && number(value.to) && optional(value.form, (item) => item === "inline");
+        case "count": return number(value.at) && number(value.count);
+        case "values": return number(value.at) && optional(value.inner, number) && strings(value.values);
+        case "table": return number(value.at) && optional(value.inner, number) && table(value.table);
+        case "checkpoint": return number(value.at) && typeof value.on === "boolean";
+        case "actors": return strings(value.names);
+        case "rename": return typeof value.name === "string";
+        default: return false;
+    }
+}
+export function builderBound(value) {
+    return Array.isArray(value) && value.every((name) => typeof name === "string");
+}
+export function builderEdit(value) {
+    if (!edit(value))
+        throw new Error("A builder edit needs a valid operation and fields");
+    return value;
+}

package/entrypoints/panel/src/bundle-routes.d.ts

@@ -0,0 +1,16 @@
+import type { ServerResponse } from "node:http";
+import type { LabRuntime } from "@parity/product-lab/ports/driving";
+type Send = (status: number, value: unknown) => void;
+export declare class BundleRoutes {
+    private readonly runtime;
+    /** Run bundles this window wrote, by recording id: the only files GET /api/bundles/… serves. */
+    private readonly bundled;
+    constructor(runtime: LabRuntime);
+    /** Whether `pathname` is one of these GET routes. */
+    serves(pathname: string): boolean;
+    /** Whether `pathname` is one of these POST routes. */
+    acts(pathname: string): boolean;
+    get(pathname: string, response: ServerResponse, send: Send, query?: URLSearchParams): Promise<void>;
+    post(pathname: string, input: Record<string, unknown>, send: Send): Promise<void>;
+}
+export {};

package/entrypoints/panel/src/bundle-routes.js

@@ -0,0 +1,59 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { readFile } from "node:fs/promises";
+import { basename } from "node:path";
+import { RunBundleRefusedError } from "@parity/product-lab/domain/runs";
+const POSTS = new Set(["/api/bundles", "/api/bundles/reproduce"]);
+const REPRODUCIBILITY = "/api/bundles/reproducibility";
+export class BundleRoutes {
+    runtime;
+    bundled = new Map();
+    constructor(runtime) {
+        this.runtime = runtime;
+    }
+    serves(pathname) {
+        return pathname === REPRODUCIBILITY || (pathname.startsWith("/api/bundles/") && pathname.endsWith(".plbundle"));
+    }
+    acts(pathname) {
+        return POSTS.has(pathname);
+    }
+    async get(pathname, response, send, query) {
+        if (pathname === REPRODUCIBILITY) {
+            const recording = query?.get("recording");
+            if (!recording)
+                return send(400, { error: "A recording id is required" });
+            return send(200, await this.runtime.runBundles().reproducibility({ recording }));
+        }
+        const file = this.bundled.get(decodeURIComponent(pathname.slice("/api/bundles/".length, -".plbundle".length)));
+        if (!file)
+            return send(404, { error: "Not a run bundle this window wrote" });
+        const bytes = await readFile(file);
+        response.writeHead(200, { "Content-Type": "application/octet-stream", "Content-Disposition": `attachment; filename="${basename(file).replace(/"/g, "")}"` });
+        response.end(bytes);
+    }
+    async post(pathname, input, send) {
+        if (typeof input.recording !== "string" || !input.recording)
+            throw new Error("A recording id is required");
+        const recording = input.recording;
+        if (pathname === "/api/bundles") {
+            const report = await this.runtime.runBundles().bundleRecording({ recording });
+            this.bundled.set(report.id, report.file);
+            return send(200, { ...report, download: `/api/bundles/${encodeURIComponent(report.id)}.plbundle` });
+        }
+        if (input.confirmation !== undefined && typeof input.confirmation !== "string")
+            throw new Error("The confirmation must be text");
+        let file = this.bundled.get(recording);
+        if (!file) {
+            const report = await this.runtime.runBundles().bundleRecording({ recording });
+            this.bundled.set(report.id, (file = report.file));
+        }
+        try {
+            send(200, await this.runtime.runBundles().reproduce({ file, ...(typeof input.confirmation === "string" ? { confirmation: input.confirmation } : {}) }));
+        }
+        catch (error) {
+            if (!(error instanceof RunBundleRefusedError))
+                throw error;
+            send(409, { error: error.message, code: "REFUSED", problems: error.problems });
+        }
+    }
+}

package/entrypoints/panel/src/chain-console-routes.d.ts

@@ -0,0 +1,9 @@
+import type { LabRuntime } from "@parity/product-lab/ports/driving";
+type Send = (status: number, value: unknown) => void;
+export declare class ChainConsoleRoutes {
+    private readonly runtime;
+    constructor(runtime: LabRuntime);
+    serves(pathname: string): boolean;
+    get(url: URL, send: Send): Promise<void>;
+}
+export {};

package/entrypoints/panel/src/chain-console-routes.js

@@ -0,0 +1,18 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+export class ChainConsoleRoutes {
+    runtime;
+    constructor(runtime) {
+        this.runtime = runtime;
+    }
+    serves(pathname) {
+        return pathname === "/api/chain-console";
+    }
+    async get(url, send) {
+        const since = url.searchParams.get("since");
+        const chain = url.searchParams.get("chain");
+        if (since !== null && !/^\d+$/.test(since))
+            return send(400, { error: "since must be a cursor from an earlier answer" });
+        send(200, await this.runtime.chainConsole({ ...(since !== null ? { since: Number(since) } : {}), ...(chain ? { chain } : {}), ...(url.searchParams.get("all") === "1" ? { all: true } : {}) }));
+    }
+}

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

@@ -0,0 +1,5 @@
+import type { LabSnapshot } from "@parity/product-lab/ports/driving";
+import { duration } from "./operation-phases.js";
+export { duration };
+export declare function activitySummary(snapshot: LabSnapshot, now: number): string;
+export declare function renderActivity(snapshot: LabSnapshot, now: number): void;

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

@@ -0,0 +1,173 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: Apache-2.0
+import { checkpointPlace } from "./checkpoint.js";
+import { describeFailure } from "@parity/product-lab/domain/runs";
+import { activePhase, duration, operationSummary, phaseLine } from "./operation-phases.js";
+import { findById } from "./lab-document.js";
+import { patchChildren } from "./ui.js";
+import { setText } from "./dom.js";
+export { duration };
+const node = (tag, text, className) => {
+    const element = document.createElement(tag);
+    element.textContent = text;
+    if (className)
+        element.className = className;
+    return element;
+};
+const txTitle = {
+    signing: "Preparing signature",
+    submitted: "Waiting for inclusion",
+    included: "Included · waiting for finality",
+    finalized: "Finalized",
+    failed: "Failed",
+};
+export function activitySummary(snapshot, now) {
+    if (snapshot.operation?.status === "running")
+        return operationSummary(snapshot.operation, now);
+    const job = snapshot.job;
+    const feature = snapshot.featureRun;
+    if (feature && (feature.status === "queued" || feature.status === "running" || !job || feature.startedAt >= job.startedAt || (job.scenarioId.startsWith("feature:") && job.startedAt >= feature.startedAt && job.startedAt <= (feature.finishedAt ?? now)))) {
+        const kind = feature.id.startsWith("builder-") ? "Builder" : "Feature";
+        const status = feature.checkpoint ? `Paused ${checkpointPlace(feature.checkpoint)}: ${feature.checkpoint.text}` : feature.status;
+        return `${kind} · ${status} · ${feature.progress?.length ?? feature.steps.length} step(s) finished · ${duration((feature.finishedAt ?? now) - feature.startedAt)}`;
+    }
+    if (!job)
+        return "Ready";
+    const current = job.steps.find((step) => step.status === "running" || step.status === "failed");
+    const finished = job.steps.filter((step) => step.status === "complete").length;
+    const activeMs = (job.finishedAt ?? job.pausedAt ?? now) - job.startedAt - job.pausedMs;
+    return `${job.status === "cancelling" ? "Cancelling" : job.status === "cancelled" ? "Cancelled" : job.status === "paused" ? "Paused" : job.status === "complete" ? "Complete" : job.status === "failed" ? "Failed" : (current?.title ?? "Finishing")} · ${finished}/${job.steps.length} steps · ${duration(activeMs)}`;
+}
+export function renderActivity(snapshot, now) {
+    const job = snapshot.job;
+    const panel = findById("live-progress");
+    panel.hidden = !job && !snapshot.featureRun && snapshot.operation?.status !== "running";
+    if (job) {
+        setText(findById("elapsed"), activitySummary(snapshot, now));
+        const stepIndex = job.steps.findIndex((step) => step.status === "running");
+        const transactions = snapshot.activity.transactions.filter((tx) => tx.jobId === job.id);
+        const active = transactions.filter((tx) => !["failed", "finalized"].includes(tx.status));
+        const waits = snapshot.activity.waits.filter((wait) => wait.jobId === job.id && wait.status === "waiting");
+        const message = snapshot.activity.messages
+            .filter((message) => message.jobId === job.id)
+            .at(-1);
+        const waitText = job.status === "cancelling"
+            ? "Finishing the current checkpoint before stopping. No later steps will run."
+            : job.status === "cancelled"
+                ? "Remaining steps cancelled. Completed changes remain on chain."
+                : job.status === "failed"
+                    ? "Stopped. Completed transactions remain on chain; inspect the failed operation before continuing."
+                    : job.status === "paused"
+                        ? job.pauseReason === "checkpoint-mode"
+                            ? "Paused because Pause after each checkpoint was enabled for this run. Choose Continue for the next step."
+                            : job.pauseReason === "requested"
+                                ? "Paused at your request after a completed step. Choose Continue to resume."
+                                : "Paused at a completed checkpoint. Choose Continue to resume."
+                        : job.status === "complete"
+                            ? "All scenario checkpoints completed."
+                            : (waits.at(-1)?.label ??
+                                (active.length
+                                    ? `${active.length} transaction${active.length === 1 ? "" : "s"} in flight — ${active.some((tx) => tx.status !== "included") ? "waiting for signatures or inclusion" : "waiting for finality"}`
+                                    : (message?.message ??
+                                        job.steps[stepIndex]?.title ??
+                                        "Finishing scenario")));
+        setText(findById("current-wait"), waitText);
+        const activityTimes = [
+            job.startedAt,
+            ...transactions.map((tx) => tx.updatedAt),
+            ...snapshot.activity.waits
+                .filter((w) => w.jobId === job.id)
+                .map((w) => w.updatedAt),
+            ...(message ? [message.at] : []),
+        ];
+        const last = Math.max(...activityTimes);
+        const silent = now - last;
+        const heartbeat = findById("activity-age");
+        setText(heartbeat, job.status === "running"
+            ? `Last execution activity ${duration(silent)} ago${silent > 30000 ? " · No new execution event; check chain progress below." : ""}`
+            : "");
+        heartbeat.dataset.slow = String(silent > 30000);
+        const pending = [...active, ...waits]
+            .filter((item) => item.timeoutMs)
+            .sort((a, b) => a.startedAt - b.startedAt);
+        const oldest = pending[0];
+        setText(findById("wait-limits"), oldest
+            ? `Oldest active wait: ${duration(now - oldest.startedAt)} · timeout ${duration(oldest.timeoutMs)}`
+            : "");
+        const list = findById("transactions");
+        const expanded = new Set(Array.from(list.querySelectorAll("details[open]"), (item) => item.dataset.id));
+        const sections = [];
+        const groups = new Map();
+        for (const tx of transactions.slice(-80)) {
+            const key = `${tx.chain}:${tx.block?.hash ?? "pending"}`;
+            groups.set(key, [...(groups.get(key) ?? []), tx]);
+        }
+        for (const group of [...groups.values()].reverse()) {
+            const first = group[0];
+            const section = node("section", "", "block-group");
+            section.dataset.key = `block:${first.chain}:${first.block?.hash ?? "pending"}`;
+            section.append(node("h3", `${first.chain} · ${first.block ? `Block ${first.block.number.toLocaleString()}` : "Awaiting inclusion"} · ${group.length} scenario transaction${group.length === 1 ? "" : "s"}`));
+            for (const tx of group) {
+                const row = node("div", "", "transaction");
+                row.dataset.status = tx.status;
+                row.append(node("strong", tx.label), node("span", `${txTitle[tx.status]} · ${duration((tx.finishedAt ?? now) - tx.startedAt)}`, "muted"));
+                if (tx.detail)
+                    row.append(node("p", describeFailure(tx.detail), "transaction-error"));
+                const details = document.createElement("details");
+                details.dataset.id = tx.id;
+                details.open = expanded.has(tx.id);
+                details.append(node("summary", "Transaction details"), node("pre", JSON.stringify({ hash: tx.hash, block: tx.block, signing: tx.diagnostics }, null, 2)));
+                row.append(details);
+                section.append(row);
+            }
+            sections.push(section);
+        }
+        patchChildren(list, sections);
+    }
+    findById("steps").hidden =
+        snapshot.operation?.status === "running";
+    findById("transactions").parentElement.hidden =
+        snapshot.operation?.status === "running";
+    if (snapshot.operation?.status === "running") {
+        setText(findById("elapsed"), activitySummary(snapshot, now));
+        const phase = activePhase(snapshot.operation);
+        setText(findById("current-wait"), phase
+            ? `${phase.title ?? phase.id}${phaseLine(phase, now) ? ` · ${phaseLine(phase, now)}` : ""}`
+            : (snapshot.operation.message ?? snapshot.operation.label));
+        setText(findById("activity-age"), phase
+            ? `${snapshot.operation.label}. The environment reports each phase as it observes it.`
+            : "Waiting for the environment provider. Live chain observations continue.");
+        setText(findById("wait-limits"), "");
+    }
+    const chains = findById("chain-activity");
+    const cards = [];
+    for (const chain of snapshot.activity.chains) {
+        const card = node("section", "", "chain-card");
+        card.dataset.key = `chain:${chain.id ?? chain.label}`;
+        card.dataset.observation = chain.error ? "unavailable" : now - chain.observedAt > 15_000 ? "stale" : chain.best || chain.finalized ? "observed" : "waiting";
+        card.append(node("h3", chain.label));
+        if (card.dataset.observation === "stale")
+            card.append(node("p", "No recent observation · last read is over 15 seconds old", "muted"));
+        card.append(node("p", `${chain.error ? "Last known best" : "Best"} ${chain.best?.number.toLocaleString() ?? "—"}   →   Finalized ${chain.finalized?.number.toLocaleString() ?? "—"}`, "chain-heights"));
+        const gap = chain.best && chain.finalized
+            ? Math.max(0, chain.best.number - chain.finalized.number)
+            : undefined;
+        card.append(node("p", chain.error
+            ? `Read failed ${duration(now - chain.observedAt)} ago · cached heights${chain.lastSuccessAt ? ` · last successful read ${duration(now - chain.lastSuccessAt)} ago` : ""}`
+            : `${gap === undefined ? "Observing chain" : `${gap} blocks awaiting finality`} · observed ${duration(now - chain.observedAt)} ago`, "muted"));
+        if (chain.bestChangedAt && chain.finalizedChangedAt)
+            card.append(node("p", `Best last changed ${duration(now - chain.bestChangedAt)} ago · finality ${duration(now - chain.finalizedChangedAt)} ago`, "muted"));
+        if (chain.error)
+            card.append(node("p", `Observation unavailable: ${chain.error}`, "transaction-error"));
+        if (chain.best?.hash || chain.finalized?.hash) {
+            const hashes = node("details", "");
+            hashes.append(node("summary", "Block references"));
+            hashes.append(node("pre", `Best: ${chain.best?.hash ?? "not observed"}\nFinalized: ${chain.finalized?.hash ?? "not observed"}`));
+            card.append(hashes);
+        }
+        cards.push(card);
+    }
+    if (!snapshot.activity.chains.length)
+        cards.push(node("p", "This provider has not supplied chain observations.", "muted"));
+    patchChildren(chains, cards);
+}

package/entrypoints/panel/src/client/address-bar.css

@@ -0,0 +1,36 @@
+/* The tile's address bar (address-bar.ts), in the tile's condition strip (redesign step 3): the app path in an outlined
+   pill (mono), its pages list, then reload as an outlined icon button. Tokens and components only. */
+.address-bar { position: relative; flex: 0 1 340px; min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 4px; height: 24px; color: var(--ink); }
+.address-bar button { width: 24px; min-height: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--secondary); flex-shrink: 0; }
+.address-bar button:hover:not(:disabled) { color: var(--ink); }
+.address-bar .address-reload { order: 3; border: 1px solid var(--line); }
+.address-bar .address-reload:hover:not(:disabled) { border-color: var(--line-strong); }
+.address-bar .address-pages { order: 2; width: 18px; }
+.address-bar button svg { width: 13px; height: 13px; }
+.address-field { order: 1; flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; margin: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; cursor: text; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
+.address-field:focus-within { border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+.address-origin, .address-source { display: none; color: var(--tertiary); font-size: var(--text-xs); white-space: nowrap; }
+.address-origin { max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
+.address-source { margin-left: 6px; font-size: var(--text-2xs); letter-spacing: 0.02em; }
+.address-bar[data-source="live"] .address-source { color: var(--success); }
+.address-bar:hover .address-origin, .address-bar:focus-within .address-origin, .address-bar:hover .address-source, .address-bar:focus-within .address-source { display: inline; }
+.address-bar input.address-input, .address-bar input.address-input:focus { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0 2px; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--secondary); font: var(--text-2xs) / 1 var(--font-mono); }
+.address-bar input.address-input[aria-invalid="true"] { color: var(--danger); }
+.address-pages-list { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; max-height: min(320px, 55vh); overflow: auto; margin: 0; padding: var(--space-1); list-style: none; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-lg); }
+.address-pages-list [role="option"] { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; }
+.address-pages-list [role="option"] strong { color: var(--ink); font-size: var(--text-xs); font-weight: var(--weight-medium); }
+.address-pages-list [role="option"] small { color: var(--tertiary); font-size: var(--text-2xs); overflow-wrap: anywhere; }
+.address-pages-list [role="option"]:hover, .address-pages-list [role="option"][aria-selected="true"] { background: var(--accent-soft); }
+/* Only text: pointer-events none keeps a visible run's hit test (elementFromPoint) seeing the frame beneath. */
+.address-refusal { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--danger); font-size: var(--text-xs); line-height: 1.35; box-shadow: var(--shadow-md); pointer-events: none; overflow-wrap: anywhere; }
+/* The design's strip: the app's origin and path ("localhost:5173/") in the mono face, always shown (the origin gives way
+   first in a narrow tile). A tile under 320 px: the bar takes the strip's free room (it keeps room to type). */
+.address-field { font: var(--text-2xs) / 1 var(--font-mono); }
+.address-bar .address-origin { display: inline; flex-shrink: 0; max-width: none; font: inherit; }
+/* In a tile's strip the bar is as wide as its address (the input sized to its path) and keeps the whole origin: the
+   acting words beside it give way first, then the path. */
+#application .tile .tile-strip > .address-bar { flex: 0 1 auto; min-width: min-content; }
+#application .tile .tile-strip > .address-bar input.address-input { field-sizing: content; width: auto; min-width: 2ch; max-width: 32ch; }
+.address-bar input.address-input, .address-bar input.address-input:focus { font: inherit; }
+@container (max-width: 320px) { .address-bar, #application .tile .tile-strip > .address-bar { flex: 1 1 160px; } .address-bar .address-origin { display: none; } }
+@media (max-width: 760px) { .address-bar, #application .tile .tile-strip > .address-bar { flex: 1 1 160px; } .address-bar .address-origin { display: none; } }

package/entrypoints/panel/src/client/address-bar.d.ts

@@ -0,0 +1,62 @@
+import { type AppNavigation, type AppRoute } from "@parity/product-lab/domain/navigation";
+/** The event the lab window's Node side dispatches on the shell window with `{ actor, frame, url }`. */
+export declare const FRAME_LOCATION_EVENT = "product-lab:frame-location";
+/**
+ * The host session's launch parameters: the query of the address the session opened the actor's app at
+ * (`ActorSession.appUrl`, or a followed app's active URL). Host and app URL builders append them to a query-less
+ * app URL: a truAPI CLI session's `?bridge=<its bootstrap.js>` (the parameter name is the builder's, for example
+ * the Bulletin gateway's `bridgeParam`), the WASM host page's `product`, `mock`, `runtimeConfig`, …. They are not
+ * the person's or the app's route, so the bar hides exactly these name=value pairs and adds them back to what it opens.
+ */
+export declare function launchParameters(launch: string): [string, string][];
+/** Everything after the origin (`/#/`, `/notes?x=1`) without the launch parameters; the full URL when it is not on `origin`. */
+export declare function displayAddress(url: string, origin: string, launch?: readonly [string, string][]): string;
+/** `url` with every launch parameter it does not name added back, so the app still boots in its host. */
+export declare function withLaunchParameters(url: string, launch: readonly [string, string][]): string;
+export type ResolvedAddress = {
+    url: string;
+} | {
+    refused: string;
+};
+/**
+ * What the person typed, resolved like a link on the page shown (`/path`, `#/route`, `?query`, or a full URL),
+ * or why it is refused: it must stay an http(s) address on the actor's app origin.
+ */
+export declare function resolveAddress(value: string, location: string, origin: string, who: string): ResolvedAddress;
+export interface RouteAddress {
+    /** The address to put in the bar (the part after the origin). */
+    address: string;
+    /** Required parameters without a default, written as `:name` for the person to replace. */
+    placeholders: {
+        name: string;
+        label: string;
+        start: number;
+        end: number;
+    }[];
+}
+/**
+ * A declared route as an address: defaults filled in, every required parameter without one written as
+ * `:name`, optional catch-alls without a default left out. `withDefaults: false` shows every name.
+ */
+export declare function routeAddress(appUrl: string, navigation: AppNavigation, route: AppRoute, withDefaults?: boolean): RouteAddress;
+export interface AddressBarOptions {
+    actorName: string;
+    /** The URL the frame was created with: the address the lab opened. */
+    opened: string;
+    /** The address the host session opened this app at; its query is the session's launch parameters. */
+    launch: string;
+    /** The actor's own app URL (its declared routes apply to this origin only). */
+    appUrl: string;
+    /** The app's route catalogue, once loaded. */
+    navigation: () => AppNavigation | null;
+    /** Open `url` in this actor's frame; returns why it is refused, or undefined when it navigates. */
+    open(url: string): string | undefined;
+}
+export interface AddressBar {
+    element: HTMLFormElement;
+    /** The frame's real address, reported in the lab window. */
+    setLive(url: string): void;
+    /** Redraw from the loaded route catalogue; `closePages` closes an open pages list (a run needs its frame uncovered). */
+    refresh(closePages?: boolean): void;
+}
+export declare function createAddressBar(options: AddressBarOptions): AddressBar;