@botiverse/porthole 0.0.1 → 0.1.0

package/dist/theme/variables.d.ts

@@ -0,0 +1,73 @@
+import type { ColorScheme, ThemeConfig, ThemeValue } from "../config/schema.ts";
+/**
+ * A data palette for charts: eight categorical slots in a fixed order (it keeps adjacent series
+ * apart for color-blind readers), a sequential blue ramp (1 is the step nearest zero, nearest the
+ * surface in each scheme), and a diverging pair around a gray midpoint. Each scheme's values are
+ * chosen for its own surface, not flipped.
+ */
+export declare const CHART_PALETTE: {
+    readonly categorical: readonly [{
+        readonly hue: "blue";
+        readonly light: "#2a78d6";
+        readonly dark: "#3987e5";
+    }, {
+        readonly hue: "orange";
+        readonly light: "#eb6834";
+        readonly dark: "#d95926";
+    }, {
+        readonly hue: "aqua";
+        readonly light: "#1baf7a";
+        readonly dark: "#199e70";
+    }, {
+        readonly hue: "yellow";
+        readonly light: "#eda100";
+        readonly dark: "#c98500";
+    }, {
+        readonly hue: "magenta";
+        readonly light: "#e87ba4";
+        readonly dark: "#d55181";
+    }, {
+        readonly hue: "green";
+        readonly light: "#008300";
+        readonly dark: "#008300";
+    }, {
+        readonly hue: "violet";
+        readonly light: "#4a3aa7";
+        readonly dark: "#9085e9";
+    }, {
+        readonly hue: "red";
+        readonly light: "#e34948";
+        readonly dark: "#e66767";
+    }];
+    readonly sequential: {
+        readonly light: readonly ["#cde2fb", "#9ec5f4", "#6da7ec", "#3987e5", "#256abf", "#184f95", "#0d366b"];
+        readonly dark: readonly ["#0d366b", "#184f95", "#256abf", "#3987e5", "#6da7ec", "#9ec5f4", "#cde2fb"];
+    };
+    readonly diverging: {
+        readonly neg: {
+            readonly light: "#e34948";
+            readonly dark: "#e66767";
+        };
+        readonly mid: {
+            readonly light: "#f0efec";
+            readonly dark: "#383835";
+        };
+        readonly pos: {
+            readonly light: "#2a78d6";
+            readonly dark: "#3987e5";
+        };
+    };
+};
+/** Every default variable, in the order the manual lists them. */
+export declare const DEFAULT_THEME_VARIABLES: Readonly<Record<string, ThemeValue>>;
+/** The window event the shell fires after a theme change, by default. */
+export declare const DEFAULT_THEME_EVENT = "porthole:theme";
+export declare const DEFAULT_THEME: ThemeConfig;
+/** A variable's default for `scheme`. */
+export declare function themeDefault(value: ThemeValue, scheme: ColorScheme): string;
+/**
+ * The values the frame gets for `scheme`: for each of the config's variables, the host's live
+ * value when it has one (a non-empty string), else the variable's default. Names the config
+ * doesn't declare are dropped, so the frame only ever holds what the manual teaches.
+ */
+export declare function resolveTheme(theme: ThemeConfig, scheme: ColorScheme, live?: Readonly<Record<string, string | null | undefined>>): Record<string, string>;

package/dist/theme/variables.js

@@ -0,0 +1,171 @@
+/**
+ * The default theme vocabulary: the MCP Apps style variable names (`styles.variables`,
+ * 2026-01-26), so content written for any MCP Apps host reads here too, plus Porthole's own accent
+ * and chart colors. Each has a neutral default per scheme; a host supplies its live values for the
+ * same names (`HostOptions.theme`). The shell injects exactly the config's names and the manual
+ * teaches exactly them (PRINCIPLE 3).
+ */
+const both = (value) => value;
+const pair = (light, dark) => ({ light, dark });
+/**
+ * A data palette for charts: eight categorical slots in a fixed order (it keeps adjacent series
+ * apart for color-blind readers), a sequential blue ramp (1 is the step nearest zero, nearest the
+ * surface in each scheme), and a diverging pair around a gray midpoint. Each scheme's values are
+ * chosen for its own surface, not flipped.
+ */
+export const CHART_PALETTE = {
+    categorical: [
+        { hue: "blue", light: "#2a78d6", dark: "#3987e5" },
+        { hue: "orange", light: "#eb6834", dark: "#d95926" },
+        { hue: "aqua", light: "#1baf7a", dark: "#199e70" },
+        { hue: "yellow", light: "#eda100", dark: "#c98500" },
+        { hue: "magenta", light: "#e87ba4", dark: "#d55181" },
+        { hue: "green", light: "#008300", dark: "#008300" },
+        { hue: "violet", light: "#4a3aa7", dark: "#9085e9" },
+        { hue: "red", light: "#e34948", dark: "#e66767" },
+    ],
+    sequential: {
+        light: ["#cde2fb", "#9ec5f4", "#6da7ec", "#3987e5", "#256abf", "#184f95", "#0d366b"],
+        dark: ["#0d366b", "#184f95", "#256abf", "#3987e5", "#6da7ec", "#9ec5f4", "#cde2fb"],
+    },
+    diverging: {
+        neg: { light: "#e34948", dark: "#e66767" },
+        mid: { light: "#f0efec", dark: "#383835" },
+        pos: { light: "#2a78d6", dark: "#3987e5" },
+    },
+};
+const families = (kind, values) => Object.entries(values).map(([family, value]) => [`--color-${kind}-${family}`, value]);
+const heading = (size, px, line) => [
+    [`--font-heading-${size}-size`, both(`${px}px`)],
+    [`--font-heading-${size}-line-height`, both(`${line}px`)],
+];
+/** Every default variable, in the order the manual lists them. */
+export const DEFAULT_THEME_VARIABLES = Object.fromEntries([
+    // Surfaces. The content's own background stays transparent: it sits on the host's surface,
+    // which is --color-background-primary.
+    ["--color-background-primary", pair("#f9f9f7", "#191918")],
+    ["--color-background-secondary", pair("#ffffff", "#232321")],
+    ["--color-background-tertiary", pair("#f3f3f1", "#2b2b29")],
+    ["--color-background-inverse", pair("#1a1a19", "#f4f4f2")],
+    ["--color-background-ghost", pair("rgba(11, 11, 11, 0.04)", "rgba(255, 255, 255, 0.05)")],
+    ["--color-background-disabled", pair("#efefec", "#2e2e2c")],
+    ...families("background", {
+        info: pair("#e8f1fc", "#16283d"),
+        success: pair("#e7f5ec", "#15301f"),
+        warning: pair("#fdf3e1", "#3a2a10"),
+        danger: pair("#fdecec", "#3a1a18"),
+    }),
+    // Text.
+    ["--color-text-primary", pair("#0b0b0b", "#f4f4f2")],
+    ["--color-text-secondary", pair("#52514e", "#b5b4ae")],
+    ["--color-text-tertiary", pair("#898781", "#8f8e88")],
+    ["--color-text-inverse", pair("#ffffff", "#0b0b0b")],
+    ["--color-text-ghost", pair("#a3a29c", "#6e6d68")],
+    ["--color-text-disabled", pair("#b5b4ae", "#5c5b57")],
+    ...families("text", {
+        info: pair("#1f5fae", "#8cbcf5"),
+        success: pair("#1d7a3e", "#86d3a2"),
+        warning: pair("#8a5a00", "#e8b85c"),
+        danger: pair("#b42318", "#f19a92"),
+    }),
+    // Borders and focus rings.
+    ["--color-border-primary", pair("#c3c2b7", "#4a4a46")],
+    ["--color-border-secondary", pair("#e1e0d9", "#393936")],
+    ["--color-border-tertiary", pair("#ebeae5", "#2f2f2d")],
+    ["--color-border-inverse", pair("#3a3a37", "#d6d5cf")],
+    ["--color-border-ghost", pair("rgba(11, 11, 11, 0.06)", "rgba(255, 255, 255, 0.08)")],
+    ["--color-border-disabled", pair("#e6e5e0", "#333331")],
+    ...families("border", {
+        info: pair("#a9c8f0", "#2e5584"),
+        success: pair("#a6d9b8", "#2c6141"),
+        warning: pair("#f0cf8c", "#6e5221"),
+        danger: pair("#f1b0ab", "#7a2f29"),
+    }),
+    ["--color-ring-primary", pair("#2a78d6", "#3987e5")],
+    ["--color-ring-secondary", pair("#898781", "#8f8e88")],
+    ["--color-ring-inverse", pair("#ffffff", "#0b0b0b")],
+    ...families("ring", {
+        info: pair("#2a78d6", "#3987e5"),
+        success: pair("#1d7a3e", "#86d3a2"),
+        warning: pair("#b07400", "#e8b85c"),
+        danger: pair("#d92d20", "#f19a92"),
+    }),
+    // Porthole's own: the accent (a button), and the chart colors.
+    ["--color-accent", pair("#2a78d6", "#3987e5")],
+    ["--color-accent-soft", pair("#e8f1fc", "#16283d")],
+    ...CHART_PALETTE.categorical.map((slot, index) => [
+        `--color-chart-${index + 1}`,
+        pair(slot.light, slot.dark),
+    ]),
+    ...CHART_PALETTE.sequential.light.map((light, index) => [
+        `--color-chart-seq-${index + 1}`,
+        pair(light, CHART_PALETTE.sequential.dark[index] ?? light),
+    ]),
+    ...["neg", "mid", "pos"].map((pole) => [
+        `--color-chart-${pole}`,
+        CHART_PALETTE.diverging[pole],
+    ]),
+    // Type.
+    ["--font-sans", both('system-ui, -apple-system, "Segoe UI", Roboto, sans-serif')],
+    ["--font-mono", both('ui-monospace, "SF Mono", Menlo, Consolas, monospace')],
+    ["--font-weight-normal", both("400")],
+    ["--font-weight-medium", both("500")],
+    ["--font-weight-semibold", both("600")],
+    ["--font-weight-bold", both("700")],
+    ["--font-text-xs-size", both("12px")],
+    ["--font-text-xs-line-height", both("16px")],
+    ["--font-text-sm-size", both("13px")],
+    ["--font-text-sm-line-height", both("18px")],
+    ["--font-text-md-size", both("14px")],
+    ["--font-text-md-line-height", both("20px")],
+    ["--font-text-lg-size", both("16px")],
+    ["--font-text-lg-line-height", both("24px")],
+    ...heading("xs", 14, 20),
+    ...heading("sm", 16, 24),
+    ...heading("md", 20, 28),
+    ...heading("lg", 24, 32),
+    ...heading("xl", 28, 36),
+    ...heading("2xl", 32, 40),
+    ...heading("3xl", 40, 48),
+    // Shape.
+    ["--border-radius-xs", both("4px")],
+    ["--border-radius-sm", both("6px")],
+    ["--border-radius-md", both("8px")],
+    ["--border-radius-lg", both("12px")],
+    ["--border-radius-xl", both("16px")],
+    ["--border-radius-full", both("9999px")],
+    ["--border-width-regular", both("1px")],
+    [
+        "--shadow-hairline",
+        pair("0 0 0 1px rgba(11, 11, 11, 0.06)", "0 0 0 1px rgba(255, 255, 255, 0.08)"),
+    ],
+    ["--shadow-sm", pair("0 1px 2px rgba(11, 11, 11, 0.06)", "0 1px 2px rgba(0, 0, 0, 0.4)")],
+    ["--shadow-md", pair("0 2px 8px rgba(11, 11, 11, 0.08)", "0 2px 8px rgba(0, 0, 0, 0.45)")],
+    ["--shadow-lg", pair("0 8px 24px rgba(11, 11, 11, 0.12)", "0 8px 24px rgba(0, 0, 0, 0.5)")],
+]);
+/** The window event the shell fires after a theme change, by default. */
+export const DEFAULT_THEME_EVENT = "porthole:theme";
+export const DEFAULT_THEME = {
+    variables: DEFAULT_THEME_VARIABLES,
+    event: DEFAULT_THEME_EVENT,
+};
+/** A variable's default for `scheme`. */
+export function themeDefault(value, scheme) {
+    return typeof value === "string" ? value : value[scheme];
+}
+/**
+ * The values the frame gets for `scheme`: for each of the config's variables, the host's live
+ * value when it has one (a non-empty string), else the variable's default. Names the config
+ * doesn't declare are dropped, so the frame only ever holds what the manual teaches.
+ */
+export function resolveTheme(theme, scheme, live) {
+    const values = {};
+    for (const [name, value] of Object.entries(theme.variables)) {
+        const given = live?.[name]?.trim();
+        values[name] =
+            given === undefined || given === "" || /[;{}<>]/u.test(given)
+                ? themeDefault(value, scheme)
+                : given;
+    }
+    return values;
+}

package/dist/transport/post-message.d.ts

@@ -0,0 +1,9 @@
+import type { Transport } from "./types.ts";
+/**
+ * A transport to one frame over `postMessage`. A message counts as the frame's only if it comes
+ * from the frame's own window AND from the expected origin: `"null"` for an opaque frame (every
+ * opaque frame says "null", so the window is what identifies it), the served origin otherwise.
+ * Messages go to the frame's window addressed to that origin; an opaque frame can only be
+ * addressed as `"*"`, so nothing secret is ever sent.
+ */
+export declare function postMessageTransport(frameWindow: () => Window | null, expectedOrigin: string, host?: Window): Transport;

package/dist/transport/post-message.js

@@ -0,0 +1,38 @@
+/**
+ * A transport to one frame over `postMessage`. A message counts as the frame's only if it comes
+ * from the frame's own window AND from the expected origin: `"null"` for an opaque frame (every
+ * opaque frame says "null", so the window is what identifies it), the served origin otherwise.
+ * Messages go to the frame's window addressed to that origin; an opaque frame can only be
+ * addressed as `"*"`, so nothing secret is ever sent.
+ */
+export function postMessageTransport(frameWindow, expectedOrigin, host = window) {
+    const listeners = new Set();
+    let closed = false;
+    const onMessage = (event) => {
+        const source = frameWindow();
+        if (closed || source === null || event.source !== source || event.origin !== expectedOrigin) {
+            return;
+        }
+        for (const listener of listeners) {
+            listener(event.data);
+        }
+    };
+    host.addEventListener("message", onMessage);
+    const target = expectedOrigin === "null" ? "*" : expectedOrigin;
+    return {
+        send(message) {
+            if (!closed) {
+                frameWindow()?.postMessage(message, target);
+            }
+        },
+        listen(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        close() {
+            closed = true;
+            listeners.clear();
+            host.removeEventListener("message", onMessage);
+        },
+    };
+}

package/dist/transport/types.d.ts

@@ -0,0 +1,15 @@
+import type { JsonRpcMessage } from "../protocol/jsonrpc.ts";
+/**
+ * A message channel to one frame. The platform host makes it (on the web, `postMessage` to the
+ * frame's window); adapters speak through it. It checks WHO sent a message (this frame's window,
+ * from its expected origin: `"null"` for an opaque frame, the served origin otherwise) and drops
+ * everything else; adapters check WHAT it says.
+ */
+export interface Transport {
+    /** Sends one message to the frame. Never secret: an opaque frame can only be addressed as `*`. */
+    send(message: JsonRpcMessage): void;
+    /** Every message from this frame, still unchecked in shape. Returns an unsubscribe function. */
+    listen(listener: (message: unknown) => void): () => void;
+    /** Stops listening and sending. */
+    close(): void;
+}

package/dist/transport/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1 +1,71 @@
-{"name":"@botiverse/porthole","version":"0.0.1","license":"Apache-2.0","description":"placeholder"}
+{
+  "name": "@botiverse/porthole",
+  "version": "0.1.0",
+  "description": "A host-side sandbox for agent-made HTML: isolation, egress hardening, a themed shell, gated host functions, and the agent manual, from one config.",
+  "license": "Apache-2.0",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./mcp": {
+      "types": "./dist/mcp/index.d.ts",
+      "default": "./dist/mcp/index.js"
+    },
+    "./conformance": {
+      "types": "./dist/conformance/index.d.ts",
+      "default": "./dist/conformance/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "devDependencies": {
+    "@modelcontextprotocol/ext-apps": "2.0.3",
+    "@modelcontextprotocol/server-basic-react": "2.0.3",
+    "@modelcontextprotocol/server-basic-vanillajs": "2.0.3",
+    "@modelcontextprotocol/server-threejs": "2.0.3",
+    "@playwright/test": "1.63.0",
+    "@types/node": "26.6.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "esbuild": "0.28.2",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "typescript": "7.0.2"
+  },
+  "peerDependencies": {
+    "@modelcontextprotocol/ext-apps": ">=2.0.0",
+    "@playwright/test": ">=1.63.0",
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@modelcontextprotocol/ext-apps": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test:leak": "playwright test -c leak/playwright.config.ts"
+  }
+}

package/src/bridge/bridge.ts

@@ -0,0 +1,256 @@
+import {
+  capabilitySpec,
+  type CapabilityArgs,
+  type CapabilityName,
+  type CapabilityResults,
+} from "../config/capabilities.ts";
+import type { PortholeConfig } from "../config/schema.ts";
+import { effectiveGates } from "../compile/policy.ts";
+import type {
+  CallOutcome,
+  CapabilityHandler,
+  CapabilityHandlers,
+  Confirm,
+  ConfirmRequest,
+  HostFunctionBridge,
+  Refusal,
+} from "./types.ts";
+
+/**
+ * The host-function bridge: every capability call from a frame passes here, and nowhere else
+ * reaches a host handler. In order: declared → arguments well formed → not muted → within its
+ * rate → a user gesture, if gated so → a person's confirmation, if gated so → the handler.
+ */
+
+export type BridgeEvent =
+  | { readonly type: "resize"; readonly height: number; readonly width?: number }
+  | { readonly type: "error"; readonly message: string }
+  | { readonly type: "refused"; readonly capability: CapabilityName; readonly refusal: Refusal }
+  | { readonly type: "muted" };
+
+export interface BridgeOptions {
+  readonly config: PortholeConfig;
+  readonly display: { readonly id: string; readonly title: string };
+  readonly handlers: CapabilityHandlers;
+  readonly confirm?: Confirm;
+  /** Whether the embedding page has user activation now; undefined where it can't tell. */
+  readonly userActivation?: () => boolean | undefined;
+  readonly onEvent: (event: BridgeEvent) => void;
+  /** The clock, in milliseconds (tests pass their own). */
+  readonly now?: () => number;
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
+const MAX_URL = 4_096;
+
+/** An http(s) URL without credentials in it (`https://bank.example@evil.example` reads as a lie). */
+export function linkTarget(value: unknown): string | null {
+  if (typeof value !== "string" || value.length === 0 || value.length > MAX_URL) {
+    return null;
+  }
+  let url: URL;
+  try {
+    url = new URL(value.trim());
+  } catch {
+    return null;
+  }
+  if (
+    (url.protocol !== "https:" && url.protocol !== "http:") ||
+    url.username !== "" ||
+    url.password !== ""
+  ) {
+    return null;
+  }
+  return url.href;
+}
+
+type Validator<N extends CapabilityName> = (
+  args: unknown,
+  config: PortholeConfig,
+) => CapabilityArgs[N] | null;
+
+const VALIDATORS: { readonly [N in CapabilityName]: Validator<N> } = {
+  sendPrompt: (args, config) => {
+    const text = isRecord(args) ? args.text : undefined;
+    return typeof text === "string" &&
+      text.trim() !== "" &&
+      text.length <= config.limits.maxPromptChars
+      ? { text }
+      : null;
+  },
+  openLink: (args) => {
+    const url = linkTarget(isRecord(args) ? args.url : undefined);
+    return url === null ? null : { url };
+  },
+  downloadFile: (args) => {
+    const contents = isRecord(args) ? args.contents : undefined;
+    return Array.isArray(contents) && contents.length > 0 && contents.length <= 100
+      ? { contents }
+      : null;
+  },
+  callTool: (args) => {
+    if (
+      !isRecord(args) ||
+      typeof args.name !== "string" ||
+      args.name === "" ||
+      args.name.length > 256
+    ) {
+      return null;
+    }
+    const given = args.arguments ?? {};
+    return isRecord(given) ? { name: args.name, arguments: given } : null;
+  },
+  readData: (args) => {
+    const uri = isRecord(args) ? args.uri : undefined;
+    return typeof uri === "string" && uri !== "" && uri.length <= MAX_URL ? { uri } : null;
+  },
+  setModelContext: (args) => {
+    if (!isRecord(args)) {
+      return null;
+    }
+    const { content, structuredContent } = args;
+    if (
+      (content !== undefined && !Array.isArray(content)) ||
+      (structuredContent !== undefined && !isRecord(structuredContent))
+    ) {
+      return null;
+    }
+    return {
+      ...(content === undefined ? {} : { content }),
+      ...(structuredContent === undefined ? {} : { structuredContent }),
+    };
+  },
+  reportError: (args) => {
+    const message = isRecord(args) ? args.message : undefined;
+    return typeof message === "string" && message !== ""
+      ? { message: message.slice(0, 2_000) }
+      : null;
+  },
+  resize: (args) => {
+    if (
+      !isRecord(args) ||
+      typeof args.height !== "number" ||
+      !Number.isFinite(args.height) ||
+      args.height < 0
+    ) {
+      return null;
+    }
+    const width = args.width;
+    return typeof width === "number" && Number.isFinite(width) && width >= 0
+      ? { height: args.height, width }
+      : { height: args.height };
+  },
+};
+
+export function createBridge(options: BridgeOptions): HostFunctionBridge {
+  const { config, display, handlers, onEvent } = options;
+  const now = options.now ?? (() => Date.now());
+  const calls = new Map<CapabilityName, number[]>();
+  let declines = 0;
+  let muted = false;
+
+  const refuse = <T>(
+    capability: CapabilityName,
+    refusal: Refusal,
+    message?: string,
+  ): CallOutcome<T> => {
+    onEvent({ type: "refused", capability, refusal });
+    return { ok: false, refusal, ...(message === undefined ? {} : { message }) };
+  };
+
+  const withinRate = (capability: CapabilityName, perMinute: number): boolean => {
+    const at = now();
+    const recent = (calls.get(capability) ?? []).filter((time) => at - time < 60_000);
+    if (recent.length >= perMinute) {
+      calls.set(capability, recent);
+      return false;
+    }
+    recent.push(at);
+    calls.set(capability, recent);
+    return true;
+  };
+
+  return {
+    declared: (capability) => config.capabilities[capability] !== undefined,
+
+    async call<N extends CapabilityName>(
+      capability: N,
+      raw: unknown,
+      callOptions?: { readonly userActivated?: boolean },
+    ): Promise<CallOutcome<CapabilityResults[N]>> {
+      type Result = CapabilityResults[N];
+      if (config.capabilities[capability] === undefined) {
+        return refuse<Result>(capability, "not-declared");
+      }
+      const args = (VALIDATORS[capability] as Validator<N>)(raw, config);
+      if (args === null) {
+        return refuse<Result>(capability, "invalid");
+      }
+      const gates = effectiveGates(config, capability);
+      const confirms = gates.includes("confirm");
+      if (confirms && muted) {
+        return refuse<Result>(capability, "muted");
+      }
+      for (const gate of gates) {
+        if (typeof gate === "object" && !withinRate(capability, gate.rateLimit.perMinute)) {
+          return refuse<Result>(capability, "rate-limited");
+        }
+      }
+      if (gates.includes("user-activation")) {
+        const activated = callOptions?.userActivated ?? options.userActivation?.();
+        if (activated === false) {
+          return refuse<Result>(capability, "no-user-activation");
+        }
+      }
+      if (confirms) {
+        if (options.confirm === undefined) {
+          return refuse<Result>(capability, "no-confirm");
+        }
+        let accepted = false;
+        try {
+          accepted = await options.confirm({ capability, args, display } as ConfirmRequest);
+        } catch {
+          accepted = false;
+        }
+        if (!accepted) {
+          declines += 1;
+          if (declines >= config.limits.declinesBeforeMute && !muted) {
+            muted = true;
+            onEvent({ type: "muted" });
+          }
+          return refuse<Result>(capability, "declined");
+        }
+      }
+
+      if (capabilitySpec(capability).served === "event") {
+        if (capability === "resize") {
+          const size = args as CapabilityArgs["resize"];
+          onEvent({ type: "resize", ...size });
+        } else {
+          onEvent({ type: "error", message: (args as CapabilityArgs["reportError"]).message });
+        }
+        return { ok: true, value: undefined as Result };
+      }
+      const handler = (handlers as Record<string, CapabilityHandler<N> | undefined>)[capability];
+      if (handler === undefined) {
+        return refuse<Result>(capability, "not-declared");
+      }
+      try {
+        const value = await handler(args, {
+          displayId: display.id,
+          title: display.title,
+          capability,
+        });
+        return { ok: true, value };
+      } catch (error) {
+        return refuse<Result>(
+          capability,
+          "failed",
+          error instanceof Error ? error.message : String(error),
+        );
+      }
+    },
+  };
+}