@botiverse/porthole 0.0.1 → 0.1.0

package/dist/config/validate.js

@@ -0,0 +1,230 @@
+import { CAPABILITY_NAMES, isCapabilityName } from "./capabilities.js";
+/**
+ * Checks a config before anything is derived from it. Every string that ends up in a CSP, an
+ * attribute or the shell is checked here, so a malformed origin can't inject a directive
+ * (`https://a.com; script-src *`) and a typo can't widen a policy. A config that fails is refused
+ * whole, never repaired.
+ */
+export class ConfigError extends Error {
+    path;
+    constructor(path, message) {
+        super(`${path}: ${message}`);
+        this.name = "ConfigError";
+        this.path = path;
+    }
+}
+/** The built-in manual topics; a host's own topics may not reuse these names. */
+export const BUILT_IN_TOPICS = ["widget", "chart", "interactive"];
+const LOOPBACK = /^(localhost|127\.0\.0\.1|\[::1\])$|\.localhost$/u;
+const HOST = /^(\*\.)?([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/u;
+/**
+ * Whether `value` is a CSP host source Porthole accepts: a scheme, a host (optionally `*.` for
+ * every subdomain) and an optional port, nothing else. Insecure schemes only for loopback names.
+ */
+export function isOriginSource(value) {
+    if (typeof value !== "string" || value.length > 253 + 16) {
+        return false;
+    }
+    const match = /^(https|http|wss|ws):\/\/([^/:]+|\[::1\])(:(\d{1,5}))?$/u.exec(value);
+    if (match === null) {
+        return false;
+    }
+    const [, scheme, host = "", , port] = match;
+    if (port !== undefined && (Number(port) < 1 || Number(port) > 65_535)) {
+        return false;
+    }
+    if (host !== "[::1]" && !HOST.test(host)) {
+        return false;
+    }
+    if ((scheme === "http" || scheme === "ws") && !LOOPBACK.test(host.replace(/^\*\./u, "x."))) {
+        return false;
+    }
+    return true;
+}
+const fail = (path, message) => {
+    throw new ConfigError(path, message);
+};
+const isObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+function object(value, path) {
+    return isObject(value) ? value : fail(path, "must be an object");
+}
+function only(value, keys, path) {
+    for (const key of Object.keys(value)) {
+        if (!keys.includes(key)) {
+            fail(`${path}.${key}`, "is not a known field");
+        }
+    }
+}
+function sources(value, path) {
+    if (value === undefined) {
+        return;
+    }
+    if (!Array.isArray(value)) {
+        fail(path, "must be an array of origins");
+        return;
+    }
+    value.forEach((source, index) => {
+        if (!isOriginSource(source)) {
+            fail(`${path}[${index}]`, `${JSON.stringify(source)} is not an origin (scheme://host[:port], lowercase, no path)`);
+        }
+    });
+}
+function positive(value, path, max = Number.MAX_SAFE_INTEGER) {
+    if (typeof value !== "number" || !Number.isInteger(value) || value < 1 || value > max) {
+        fail(path, `must be an integer from 1 to ${max}`);
+    }
+}
+function gate(value, path) {
+    if (value === "user-activation" || value === "confirm") {
+        return;
+    }
+    const limit = isObject(value) && isObject(value.rateLimit) ? value.rateLimit : null;
+    if (limit === null || Object.keys(value).length !== 1) {
+        fail(path, 'must be "user-activation", "confirm" or { rateLimit: { perMinute } }');
+        return;
+    }
+    only(limit, ["perMinute"], `${path}.rateLimit`);
+    positive(limit.perMinute, `${path}.rateLimit.perMinute`, 10_000);
+}
+const MODES = ["inline", "artifact", "mcp-app", "url"];
+const ISOLATIONS = ["opaque", "domain", "external"];
+/** Returns `input` as a config once every field checks out; throws a `ConfigError` otherwise. */
+export function validateConfig(input) {
+    const config = object(input, "config");
+    only(config, [
+        "mode",
+        "isolation",
+        "capabilities",
+        "egress",
+        "theme",
+        "limits",
+        "layout",
+        "guide",
+        "contentOrigins",
+        "embedder",
+    ], "config");
+    if (!MODES.includes(config.mode)) {
+        fail("config.mode", `must be one of ${MODES.join(", ")}`);
+    }
+    if (!ISOLATIONS.includes(config.isolation)) {
+        fail("config.isolation", `must be one of ${ISOLATIONS.join(", ")}`);
+    }
+    if ((config.mode === "url") !== (config.isolation === "external")) {
+        fail("config.isolation", 'url mode, and only url mode, is "external"');
+    }
+    const capabilities = object(config.capabilities, "config.capabilities");
+    for (const [name, value] of Object.entries(capabilities)) {
+        const path = `config.capabilities.${name}`;
+        if (!isCapabilityName(name)) {
+            fail(path, `is not a capability (${CAPABILITY_NAMES.join(", ")})`);
+        }
+        const capability = object(value, path);
+        only(capability, ["gates", "connect", "resource", "guide"], path);
+        if (capability.gates !== undefined) {
+            if (!Array.isArray(capability.gates)) {
+                fail(`${path}.gates`, "must be an array");
+            }
+            capability.gates.forEach((each, index) => gate(each, `${path}.gates[${index}]`));
+        }
+        sources(capability.connect, `${path}.connect`);
+        sources(capability.resource, `${path}.resource`);
+        if (capability.guide !== undefined && typeof capability.guide !== "string") {
+            fail(`${path}.guide`, "must be a string");
+        }
+    }
+    if (config.mode === "url" && Object.keys(capabilities).length > 0) {
+        fail("config.capabilities", "url mode has no shell, so it can declare no capabilities");
+    }
+    const egress = object(config.egress, "config.egress");
+    const kinds = ["connect", "script", "style", "img", "font", "media"];
+    only(egress, kinds, "config.egress");
+    for (const kind of kinds) {
+        sources(egress[kind], `config.egress.${kind}`);
+    }
+    const theme = object(config.theme, "config.theme");
+    only(theme, ["variables", "event"], "config.theme");
+    const variables = object(theme.variables, "config.theme.variables");
+    for (const [name, value] of Object.entries(variables)) {
+        const path = `config.theme.variables[${JSON.stringify(name)}]`;
+        if (!/^--[a-z0-9]+(-[a-z0-9]+)*$/u.test(name)) {
+            fail(path, "must be a CSS custom property name (--lowercase-words)");
+        }
+        const values = isObject(value) ? [value.light, value.dark] : [value];
+        if (isObject(value)) {
+            only(value, ["light", "dark"], path);
+        }
+        for (const each of values) {
+            if (typeof each !== "string" ||
+                each.length === 0 ||
+                each.length > 500 ||
+                /[;{}<>]/u.test(each)) {
+                fail(path, "must be a CSS value (1–500 characters, no ; { } < >), or { light, dark } of them");
+            }
+        }
+    }
+    if (typeof theme.event !== "string" || !/^[a-z][a-z0-9]*([:.-][a-z0-9]+)*$/u.test(theme.event)) {
+        fail("config.theme.event", 'must be an event name such as "porthole:theme"');
+    }
+    const limits = object(config.limits, "config.limits");
+    const limitNames = [
+        "maxHeightPx",
+        "minHeightPx",
+        "maxBytes",
+        "maxLiveFrames",
+        "declinesBeforeMute",
+        "maxPromptChars",
+        "maxErrorReports",
+    ];
+    only(limits, limitNames, "config.limits");
+    for (const name of limitNames) {
+        positive(limits[name], `config.limits.${name}`);
+    }
+    if (limits.minHeightPx > limits.maxHeightPx) {
+        fail("config.limits.minHeightPx", "must not exceed maxHeightPx");
+    }
+    const layout = object(config.layout, "config.layout");
+    only(layout, ["minWidthPx", "narrowWidthPx", "wideWidthPx"], "config.layout");
+    for (const name of ["minWidthPx", "narrowWidthPx", "wideWidthPx"]) {
+        positive(layout[name], `config.layout.${name}`, 10_000);
+    }
+    if (layout.minWidthPx > layout.narrowWidthPx ||
+        layout.narrowWidthPx > layout.wideWidthPx) {
+        fail("config.layout", "must hold minWidthPx ≤ narrowWidthPx ≤ wideWidthPx");
+    }
+    const guide = object(config.guide, "config.guide");
+    only(guide, ["toolName", "guideToolName", "topics"], "config.guide");
+    for (const name of ["toolName", "guideToolName"]) {
+        const value = guide[name];
+        if (value !== undefined &&
+            (typeof value !== "string" || !/^[A-Za-z0-9_.-]{1,64}$/u.test(value))) {
+            fail(`config.guide.${name}`, "must be a tool name (letters, digits, _ . -)");
+        }
+    }
+    if (guide.topics !== undefined) {
+        for (const [name, text] of Object.entries(object(guide.topics, "config.guide.topics"))) {
+            const path = `config.guide.topics.${name}`;
+            if (!/^[a-z][a-z0-9-]{0,31}$/u.test(name) ||
+                BUILT_IN_TOPICS.includes(name)) {
+                fail(path, "must be a new topic name (lowercase), not a built-in one");
+            }
+            if (typeof text !== "string" || text.trim() === "") {
+                fail(path, "must be the topic's text");
+            }
+        }
+    }
+    sources(config.contentOrigins, "config.contentOrigins");
+    const served = config.isolation === "domain" || config.isolation === "external";
+    const contentOrigins = config.contentOrigins;
+    if (served !== contentOrigins.length > 0) {
+        fail("config.contentOrigins", served
+            ? `${String(config.isolation)} isolation needs the origins its content is served from`
+            : "opaque isolation serves nothing: leave it empty");
+    }
+    const embedder = object(config.embedder, "config.embedder");
+    only(embedder, ["frameSrc"], "config.embedder");
+    // The host's own frames may include its own origin, by name.
+    sources(Array.isArray(embedder.frameSrc)
+        ? embedder.frameSrc.filter((source) => source !== "'self'")
+        : embedder.frameSrc, "config.embedder.frameSrc");
+    return input;
+}

package/dist/conformance/behavior.d.ts

@@ -0,0 +1,2 @@
+import { type Probe } from "./kit.ts";
+export declare const BEHAVIOR_PROBES: readonly Probe[];

package/dist/conformance/behavior.js

@@ -0,0 +1,376 @@
+import { expect } from "@playwright/test";
+import { presets } from "../presets/presets.js";
+import { resolveTheme } from "../theme/variables.js";
+import { inline } from "./kit.js";
+import { settle } from "./oracles.js";
+/**
+ * The display's behavior in a real frame (item 11: streaming, sizing, theming, base styles) and
+ * the host-function gates (item 12), each driven as a person or an agent would: real clicks, real
+ * streaming, real theme flips.
+ */
+const read = (frame, run) => frame.evaluate(run);
+/** The computed value of a CSS variable on the frame's root. */
+const variable = (frame, name) => frame.evaluate((each) => getComputedStyle(document.documentElement).getPropertyValue(each).trim(), name);
+/** Polls the frame element's height until it is `px` (± 1). */
+async function expectHeight(display, px, message) {
+    await expect
+        .poll(async () => Math.round((await display.box()).height), { message, timeout: 5_000 })
+        .toBeGreaterThanOrEqual(px - 1);
+    await expect
+        .poll(async () => Math.round((await display.box()).height), { message, timeout: 5_000 })
+        .toBeLessThanOrEqual(px + 1);
+}
+/** The refusals the display reported, by capability. */
+async function refusals(display) {
+    return (await display.events()).flatMap((event) => event.type === "refused" ? [`${event.detail.capability}:${event.detail.refusal}`] : []);
+}
+/** A real click (a trusted event: the user activation a person's click gives). */
+async function click(display, selector) {
+    await (await display.frame()).locator(selector).click();
+}
+/**
+ * Lets any user activation the test harness gave the host page lapse: Playwright's own
+ * evaluations count as gestures in some engines, and Chromium keeps one for 5 s. Between this and
+ * the next raw input, the test must not evaluate anything in the page.
+ */
+const ACTIVATION_LAPSE_MS = 6_000;
+/** A click by raw mouse input at `selector`'s center, after any harness activation has lapsed. */
+async function clickAfterLapse(context, display, selector) {
+    const frame = await display.frame();
+    const box = await frame.locator(selector).boundingBox();
+    if (box === null) {
+        throw new Error(`${selector} is not on screen`);
+    }
+    await context.page.waitForTimeout(ACTIVATION_LAPSE_MS);
+    await context.page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+}
+/** The attribute `name` of the frame's body, once set. */
+async function bodyData(display, name, timeout = 5_000) {
+    const frame = await display.frame();
+    await expect
+        .poll(() => frame.locator("body").getAttribute(`data-${name}`), { timeout })
+        .not.toBeNull();
+    return (await frame.locator("body").getAttribute(`data-${name}`)) ?? "";
+}
+const PROMPT_CONTENT = `<button id="ask">Explain March</button>
+<script>
+  document.getElementById("ask").addEventListener("click", () => {
+    document.body.removeAttribute("data-result");
+    sendPrompt("Explain why signups doubled in March").then(
+      (sent) => (document.body.dataset.result = String(sent)),
+      (error) => (document.body.dataset.result = "refused: " + error.message),
+    );
+  });
+  sendPrompt("asked on load").then(
+    () => (document.body.dataset.onload = "sent"),
+    (error) => (document.body.dataset.onload = "refused: " + error.message),
+  );
+</script>`;
+const prompts = () => inline({ capabilities: { sendPrompt: {} } });
+export const BEHAVIOR_PROBES = [
+    // ── 11: streaming ──────────────────────────────────────────────────────────────────────────
+    {
+        id: "11.streaming",
+        item: 11,
+        title: "streamed content is drawn as it grows, inert, keeping what was drawn; the whole runs once",
+        async run(context) {
+            const display = await context.launch({ config: inline() });
+            const pixel = "data:image/gif;base64,R0lGODlhAQABAAAAACw=";
+            const head = `<style>.row { height: 20px }</style><img id="img" src="${pixel}" alt=""><div class="row" id="r1">one</div>`;
+            const step2 = `${head}<a id="js" href="javascript:document.body.dataset.ran='href'">x</a><button id="b" onclick="document.body.dataset.ran='handler'">b</button><div class="row" id="r2">two</div><script>document.body.dataset.ran = "draft"</script>`;
+            const whole = `${step2}<script>document.body.dataset.ran = String((Number(document.body.dataset.ran) || 0) + 1)</script>`;
+            await display.setContent(head, { partial: true });
+            const frame = await display.frame();
+            await expect(frame.locator("#r1")).toHaveText("one");
+            // Mark what was drawn: the next draft must keep the same node (an image doesn't reload).
+            await frame.evaluate(() => {
+                document.getElementById("img").portholeMark =
+                    1;
+            });
+            await display.setContent(step2, { partial: true });
+            await expect(frame.locator("#r2")).toHaveText("two");
+            expect(await read(frame, () => ({
+                kept: document.getElementById("img")
+                    .portholeMark,
+                ran: document.body.dataset.ran ?? null,
+                href: document.getElementById("js")?.getAttribute("href") ?? null,
+                handler: document.getElementById("b")?.getAttribute("onclick") ?? null,
+                scripts: document.querySelectorAll("#porthole-root script").length,
+            }))).toEqual({ kept: 1, ran: null, href: null, handler: null, scripts: 0 });
+            await display.setContent(whole);
+            await expect(frame.locator("body")).toHaveAttribute("data-ran", "1");
+            expect(await frame.locator("#b").getAttribute("onclick")).not.toBeNull();
+            // The whole goes once: sending it again, or a late draft, changes nothing.
+            await display.setContent(whole);
+            await display.setContent(head, { partial: true });
+            await settle(400);
+            await expect(frame.locator("body")).toHaveAttribute("data-ran", "1");
+            await expect(frame.locator("#r2")).toHaveText("two");
+        },
+    },
+    // ── 11: sizing ─────────────────────────────────────────────────────────────────────────────
+    {
+        id: "11.size",
+        item: 11,
+        title: "the frame's height follows its content, within the config's limits",
+        async run(context) {
+            const config = inline({ limits: { maxHeightPx: 400, minHeightPx: 30 } });
+            const display = await context.launch({
+                config,
+                content: `<div id="box" style="height: 150px"></div><script>window.setBox = (px) => (document.getElementById("box").style.height = px + "px");</script>`,
+            });
+            await expectHeight(display, 150, "follows its content");
+            const frame = await display.frame();
+            await frame.evaluate(() => window.setBox(300));
+            await expectHeight(display, 300, "grows with it");
+            await frame.evaluate(() => window.setBox(1_000));
+            await expectHeight(display, 400, "stops at maxHeightPx");
+            expect(await read(frame, () => document.documentElement.scrollHeight > document.documentElement.clientHeight), "past its height, the content scrolls inside").toBe(true);
+            await frame.evaluate(() => window.setBox(5));
+            await expectHeight(display, 30, "shrinks to minHeightPx");
+            const sizes = (await display.events()).flatMap((event) => event.type === "resize" ? [event.detail.height] : []);
+            // The first size is the content's: an empty shell reports none (it would make the host
+            // forget the height it remembered, and the frame jump).
+            expect(sizes[0]).toBe(150);
+            expect(sizes).toEqual(expect.arrayContaining([150, 300, 400, 30]));
+            expect(Math.max(...sizes)).toBe(400);
+        },
+    },
+    {
+        id: "11.size-document",
+        item: 11,
+        title: "a whole page's frame follows the page's height, within the artifact's limits",
+        async run(context) {
+            const display = await context.launch({
+                config: presets.artifact(),
+                content: `<!doctype html><html><head><title>Report</title></head><body style="margin: 0"><div id="page" style="height: 500px">page</div><script>document.body.dataset.loaded = "0"; addEventListener("load", () => (document.body.dataset.loaded = "1"));</script></body></html>`,
+            });
+            await expectHeight(display, 500, "follows the page");
+            const frame = await display.frame();
+            await expect(frame.locator("#page")).toHaveText("page");
+            await expect(frame.locator("body"), "the page's own load event fires").toHaveAttribute("data-loaded", "1");
+            expect(await read(frame, () => document.title)).toBe("Report");
+        },
+    },
+    // ── 11: theming ────────────────────────────────────────────────────────────────────────────
+    {
+        id: "11.theme-flip",
+        item: 11,
+        title: "a theme flip re-themes the running content in place, and tells it once",
+        async run(context) {
+            const config = inline({ theme: { event: "app:theme" } });
+            const light = resolveTheme(config.theme, "light");
+            const dark = resolveTheme(config.theme, "dark");
+            const display = await context.launch({
+                config,
+                scheme: "light",
+                content: `<p>themed</p><script>window.kept = "yes"; window.flips = []; addEventListener("app:theme", (event) => window.flips.push(event.detail.theme));</script>`,
+            });
+            const frame = await display.frame();
+            await expect(frame.locator("p")).toHaveText("themed");
+            expect(await variable(frame, "--color-text-primary")).toBe(light["--color-text-primary"]);
+            await display.setTheme("dark");
+            await expect
+                .poll(() => variable(frame, "--color-text-primary"))
+                .toBe(dark["--color-text-primary"]);
+            expect(await variable(frame, "--color-chart-1")).toBe(dark["--color-chart-1"]);
+            expect(await read(frame, () => ({
+                kept: window.kept,
+                flips: window.flips,
+                theme: document.documentElement.dataset.theme,
+                scheme: document.documentElement.style.colorScheme,
+            }))).toEqual({ kept: "yes", flips: ["dark"], theme: "dark", scheme: "dark" });
+            const element = await frame.frameElement();
+            expect(await element.evaluate((node) => node.style.colorScheme)).toBe("dark");
+            await display.setTheme("light");
+            await expect
+                .poll(() => variable(frame, "--color-text-primary"))
+                .toBe(light["--color-text-primary"]);
+            expect(await read(frame, () => window.flips)).toEqual([
+                "dark",
+                "light",
+            ]);
+        },
+    },
+    {
+        id: "11.theme-host-values",
+        item: 11,
+        title: "the host's live values reach the frame, the spec's names and Porthole's own; others don't",
+        async run(context) {
+            const display = await context.launch({
+                config: inline(),
+                scheme: "dark",
+                hostTheme: {
+                    dark: {
+                        "--color-text-primary": "rgb(1, 2, 3)",
+                        "--color-chart-1": "rgb(4, 5, 6)",
+                        "--not-declared": "red",
+                    },
+                },
+                content: "<p>live</p>",
+            });
+            const frame = await display.frame();
+            await expect(frame.locator("p")).toHaveText("live");
+            await expect.poll(() => variable(frame, "--color-text-primary")).toBe("rgb(1, 2, 3)");
+            expect(await variable(frame, "--color-chart-1")).toBe("rgb(4, 5, 6)");
+            expect(await variable(frame, "--not-declared")).toBe("");
+        },
+    },
+    {
+        id: "11.base-styles",
+        item: 11,
+        title: "native controls take the theme, and content's own CSS overrides them",
+        async run(context) {
+            const config = inline();
+            const display = await context.launch({
+                config,
+                content: `<style>.square { border-radius: 0 }</style><button id="b">Go</button><button id="c" class="square">C</button><input id="i" value="x">`,
+            });
+            const frame = await display.frame();
+            await expect(frame.locator("#b")).toHaveText("Go");
+            const styles = await read(frame, () => {
+                const of = (id) => getComputedStyle(document.getElementById(id));
+                return {
+                    radius: of("b").borderTopLeftRadius,
+                    font: of("b").fontFamily === getComputedStyle(document.body).fontFamily,
+                    height: document.getElementById("b").getBoundingClientRect().height,
+                    overridden: of("c").borderTopLeftRadius,
+                    input: of("i").borderTopLeftRadius,
+                };
+            });
+            expect(styles).toEqual({
+                radius: resolveTheme(config.theme, "light")["--border-radius-md"],
+                font: true,
+                height: expect.any(Number),
+                overridden: "0px",
+                input: resolveTheme(config.theme, "light")["--border-radius-md"],
+            });
+            expect(styles.height, "a control is tall enough to tap").toBeGreaterThanOrEqual(44);
+        },
+    },
+    // ── 12: the host-function gates ────────────────────────────────────────────────────────────
+    {
+        id: "12.prompt-gesture-confirm",
+        item: 12,
+        title: "sendPrompt needs a click and the person's yes; a no sends nothing",
+        async run(context) {
+            const display = await context.launch({ config: prompts(), content: PROMPT_CONTENT });
+            expect(await bodyData(display, "onload"), "a call made on load is refused by the shell").toContain("needs a click");
+            expect(await display.calls()).toEqual([]);
+            // The host's own check needs the frame's click to reach the host page (activation
+            // propagates to ancestors): measured with raw input, after the harness's activation lapsed.
+            await clickAfterLapse(context, display, "#ask");
+            await context.page.waitForTimeout(500);
+            const refused = await refusals(display);
+            context.measured(`${context.engine}: a click in the frame ${refused.includes("sendPrompt:no-user-activation") ? "does not reach" : "reaches"} the host page's user activation`);
+            expect(refused, "the frame's click didn't count as a gesture on the host page").toEqual([]);
+            const declined = await display.answerNextConfirmation(false);
+            expect(declined).toMatchObject({
+                capability: "sendPrompt",
+                args: { text: "Explain why signups doubled in March" },
+                display: { title: "Probe" },
+            });
+            expect(await bodyData(display, "result")).toBe("false");
+            expect(await display.calls(), "a declined prompt reached the host's handler").toEqual([]);
+            await click(display, "#ask");
+            await display.answerNextConfirmation(true);
+            expect(await bodyData(display, "result")).toBe("true");
+            expect(await display.calls()).toEqual([
+                { capability: "sendPrompt", args: { text: "Explain why signups doubled in March" } },
+            ]);
+        },
+    },
+    {
+        id: "12.raw-message",
+        item: 12,
+        title: "a prompt sent around the shell (raw ui/message, no click) is refused by the host",
+        async run(context) {
+            const display = await context.launch({
+                config: prompts(),
+                content: `<script>
+  addEventListener("message", (event) => {
+    if (event.data && event.data.id === "raw-1") document.body.dataset.answer = JSON.stringify(event.data.result ?? event.data.error);
+  });
+  // Late enough that no harness gesture is still active on the host page.
+  setTimeout(() => parent.postMessage({ jsonrpc: "2.0", id: "raw-1", method: "ui/message", params: { role: "user", content: [{ type: "text", text: "sent around the shell" }] } }, "*"), ${ACTIVATION_LAPSE_MS});
+</script>`,
+            });
+            // Nothing is evaluated in the page until the message has been answered.
+            await context.page.waitForTimeout(ACTIVATION_LAPSE_MS + 1_500);
+            expect(await bodyData(display, "answer")).toBe(JSON.stringify({ isError: true }));
+            expect(await display.calls()).toEqual([]);
+            expect(await refusals(display)).toEqual(["sendPrompt:no-user-activation"]);
+        },
+    },
+    {
+        id: "12.link",
+        item: 12,
+        title: "a link opens only through the host, http(s) only, with the person's yes",
+        async run(context) {
+            const display = await context.launch({
+                config: inline({ capabilities: { openLink: {} } }),
+                content: `<a id="web" href="https://example.com/report?q=1">report</a>
+<a id="js" href="javascript:document.body.dataset.ran = 'yes'">js</a>
+<button id="raw">raw</button>
+<script>
+  document.getElementById("raw").addEventListener("click", () => openLink("javascript:alert(1)").then((opened) => (document.body.dataset.raw = String(opened)), () => (document.body.dataset.raw = "refused")));
+</script>`,
+            });
+            await click(display, "#web");
+            const asked = await display.answerNextConfirmation(true);
+            expect(asked).toMatchObject({
+                capability: "openLink",
+                args: { url: "https://example.com/report?q=1" },
+            });
+            await expect
+                .poll(() => display.calls())
+                .toEqual([{ capability: "openLink", args: { url: "https://example.com/report?q=1" } }]);
+            await click(display, "#js");
+            await click(display, "#raw");
+            expect(await bodyData(display, "raw")).toBe("false");
+            await settle(300);
+            expect(await (await display.frame()).locator("body").getAttribute("data-ran")).toBeNull();
+            expect(await refusals(display)).toContain("openLink:invalid");
+            expect(await display.calls()).toHaveLength(1);
+        },
+    },
+    {
+        id: "12.mute",
+        item: 12,
+        title: "after the config's number of declines, the display stops asking",
+        async run(context) {
+            const display = await context.launch({
+                config: inline({ capabilities: { sendPrompt: {} }, limits: { declinesBeforeMute: 2 } }),
+                content: PROMPT_CONTENT,
+            });
+            for (let index = 0; index < 2; index += 1) {
+                await click(display, "#ask");
+                await display.answerNextConfirmation(false);
+                expect(await bodyData(display, "result")).toBe("false");
+            }
+            await expect
+                .poll(async () => (await display.events()).some((event) => event.type === "muted"))
+                .toBe(true);
+            await click(display, "#ask");
+            expect(await bodyData(display, "result")).toBe("false");
+            expect(await refusals(display)).toContain("sendPrompt:muted");
+            expect(await display.calls()).toEqual([]);
+        },
+    },
+    {
+        id: "12.no-confirm",
+        item: 12,
+        title: "a host without a confirm function sends nothing that needs one",
+        async run(context) {
+            const display = await context.launch({
+                config: prompts(),
+                confirms: false,
+                content: PROMPT_CONTENT,
+            });
+            await click(display, "#ask");
+            expect(await bodyData(display, "result")).toBe("false");
+            expect(await refusals(display)).toContain("sendPrompt:no-confirm");
+            expect(await display.calls()).toEqual([]);
+        },
+    },
+];