@runtypelabs/persona 4.34.0 → 4.35.1

package/src/plugin-kit.test.ts

@@ -262,6 +262,107 @@ describe("createPopover", () => {
   });
 });
 
+describe("createPopover theme carry-over", () => {
+  const setupRoot = () => {
+    const root = document.createElement("div");
+    root.setAttribute("data-persona-root", "true");
+    root.setAttribute("data-persona-color-scheme", "dark");
+    root.setAttribute("data-persona-defaults", "v5");
+    root.style.setProperty("--persona-surface", "#17181c");
+    root.style.setProperty("--persona-border", "#2e3038");
+    root.style.setProperty("--persona-text", "#f4f4f5");
+    root.style.height = "100%";
+    const anchor = document.createElement("button");
+    root.appendChild(anchor);
+    document.body.appendChild(root);
+    const content = document.createElement("div");
+    return { root, anchor, content };
+  };
+
+  it("copies the root's theme variables and scheme onto body-mounted content", () => {
+    const { anchor, content } = setupRoot();
+    createPopover({ anchor, content }).open();
+
+    expect(content.parentElement).toBe(document.body);
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("#17181c");
+    expect(content.style.getPropertyValue("--persona-border")).toBe("#2e3038");
+    expect(content.style.getPropertyValue("--persona-text")).toBe("#f4f4f5");
+    expect(content.getAttribute("data-persona-color-scheme")).toBe("dark");
+    expect(content.getAttribute("data-persona-defaults")).toBe("v5");
+    // Only custom properties travel, never the root's own layout.
+    expect(content.style.height).toBe("");
+    // Not a second widget root: root-scoped rules and lookups stay unambiguous.
+    expect(content.hasAttribute("data-persona-root")).toBe(false);
+  });
+
+  it("follows a live scheme change while open and clears removed variables", async () => {
+    const { root, anchor, content } = setupRoot();
+    createPopover({ anchor, content }).open();
+
+    root.style.setProperty("--persona-surface", "#ffffff");
+    root.style.removeProperty("--persona-border");
+    root.setAttribute("data-persona-color-scheme", "light");
+    await flushMicrotasks();
+
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("#ffffff");
+    expect(content.style.getPropertyValue("--persona-border")).toBe("");
+    expect(content.getAttribute("data-persona-color-scheme")).toBe("light");
+  });
+
+  it("stops following the root once closed and refreshes on the next open", async () => {
+    const { root, anchor, content } = setupRoot();
+    const popover = createPopover({ anchor, content });
+    popover.open();
+    popover.close();
+
+    root.style.setProperty("--persona-surface", "#ffffff");
+    await flushMicrotasks();
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("#17181c");
+
+    popover.open();
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("#ffffff");
+  });
+
+  it("leaves content mounted inside the root to plain inheritance", () => {
+    const { root, anchor, content } = setupRoot();
+    createPopover({ anchor, content, container: root }).open();
+
+    expect(content.parentElement).toBe(root);
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("");
+    expect(content.hasAttribute("data-persona-color-scheme")).toBe(false);
+  });
+
+  it("carries the theme into a shadow root, where content sits beside the root", () => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: "open" });
+    const root = document.createElement("div");
+    root.setAttribute("data-persona-root", "true");
+    root.setAttribute("data-persona-color-scheme", "dark");
+    root.style.setProperty("--persona-surface", "#17181c");
+    const anchor = document.createElement("button");
+    root.appendChild(anchor);
+    shadow.appendChild(root);
+    const content = document.createElement("div");
+
+    createPopover({ anchor, content }).open();
+
+    expect(content.parentNode).toBe(shadow);
+    expect(content.style.getPropertyValue("--persona-surface")).toBe("#17181c");
+    expect(content.getAttribute("data-persona-color-scheme")).toBe("dark");
+  });
+
+  it("does nothing for an anchor outside any widget root", () => {
+    const anchor = document.createElement("button");
+    document.body.appendChild(anchor);
+    const content = document.createElement("div");
+    createPopover({ anchor, content }).open();
+
+    expect(content.style.cssText).not.toContain("--persona");
+    expect(content.hasAttribute("data-persona-color-scheme")).toBe(false);
+  });
+});
+
 describe("viewport-constrained popovers", () => {
   const rect = (left: number, top: number, width: number, height: number): DOMRect =>
     ({ left, top, right: left + width, bottom: top + height, width, height }) as DOMRect;

package/src/plugin-kit.ts

@@ -156,7 +156,9 @@ export interface PopoverOptions {
   /**
    * Where to mount `content`. Defaults to the anchor's shadow root (when
    * shadowed), its open dialog, or `document.body`: keeping it inside the same style + stacking
-   * scope as the anchor while escaping the transcript's scroll clipping.
+   * scope as the anchor while escaping the transcript's scroll clipping. Mounted
+   * outside the anchor's `[data-persona-root]`, `content` carries a copy of the
+   * root's theme variables and color scheme, kept current while open.
    */
   container?: HTMLElement | ShadowRoot;
   onOpen?: () => void;
@@ -216,6 +218,24 @@ export function createPopover(options: PopoverOptions): PopoverHandle {
   const currentContainer = () => options.container ?? defaultContainer(anchor);
   let open = false;
   let detach: (() => void) | null = null;
+  let carried: string[] = [];
+
+  // The theme lives on the widget root as inline custom properties plus scheme
+  // attributes. Content mounted outside that root (body, dialog, shadow root)
+  // would paint the stylesheet's light fallbacks, so it carries a copy.
+  const carryTheme = (): void => {
+    const root = anchor.closest<HTMLElement>("[data-persona-root]");
+    if (!root || root.contains(content)) return;
+    const { style } = root;
+    for (const name of carried) if (!style.getPropertyValue(name)) content.style.removeProperty(name);
+    carried = Array.from(style).filter((name) => name.startsWith("--"));
+    for (const name of carried) content.style.setProperty(name, style.getPropertyValue(name));
+    for (const attr of ["data-persona-color-scheme", "data-persona-defaults"]) {
+      const value = root.getAttribute(attr);
+      if (value) content.setAttribute(attr, value);
+      else content.removeAttribute(attr);
+    }
+  };
 
   const reposition = (): void => {
     if (!open) return;
@@ -224,6 +244,7 @@ export function createPopover(options: PopoverOptions): PopoverHandle {
       const focused = content.contains(content.ownerDocument.activeElement)
         ? content.ownerDocument.activeElement as HTMLElement : null;
       container.appendChild(content);
+      carryTheme();
       focused?.focus({ preventScroll: true });
     }
     const rect = options.getAnchorRect?.() ?? anchor.getBoundingClientRect();
@@ -321,9 +342,16 @@ export function createPopover(options: PopoverOptions): PopoverHandle {
     ownerWindow.addEventListener("resize", onReposition);
     const moveRoot = anchor.closest("[data-persona-root]");
     moveRoot?.addEventListener("persona:internal:host-moved", onReposition);
+    // A live theme or color-scheme change rewrites the root while open.
+    let themeObserver: MutationObserver | undefined;
+    if (moveRoot && ownerWindow.MutationObserver) {
+      themeObserver = new ownerWindow.MutationObserver(carryTheme);
+      themeObserver.observe(moveRoot, { attributeFilter: ["style", "data-persona-color-scheme"] });
+    }
 
     detach = () => {
       observer?.disconnect();
+      themeObserver?.disconnect();
       ownerWindow.clearTimeout(armId);
       ownerDocument.removeEventListener("pointerdown", onOutside, true);
       ownerWindow.removeEventListener("scroll", onReposition, true);

package/src/session.ts

@@ -3305,9 +3305,13 @@ export class AgentWidgetSession {
   public requestWebMcpApproval(info: WebMcpConfirmInfo): Promise<boolean> {
     // Per-tool policy hook: auto-allow opted-out tools without any UI. A
     // throwing predicate must not block the call, so fall through to an
-    // explicit gate on error.
+    // explicit gate on error. A `requireConfirmFor` match (flagged by the
+    // bridge) never consults it: the surface owner said it must be confirmed.
     try {
-      if (this.config.webmcp?.autoApprove?.(info) === true) {
+      if (
+        info.confirmRequired !== true &&
+        this.config.webmcp?.autoApprove?.(info) === true
+      ) {
         return Promise.resolve(true);
       }
     } catch {

package/src/session.webmcp.test.ts

@@ -1230,3 +1230,35 @@ describe("AgentWidgetSession: WebMCP parallel batched resume (core#3878)", () =>
     expect(s.webMcpApprovalResolvers.size).toBe(0);
   });
 });
+
+describe("WebMCP requireConfirmFor on the default approval UI", () => {
+  const pendingBubbles = (session: AgentWidgetSession) =>
+    (session as unknown as { messages: AgentWidgetMessage[] }).messages.filter(
+      (m) => m.variant === "approval" && m.approval?.status === "pending",
+    );
+
+  it("prompts for a matched tool even when autoApprove returns true", async () => {
+    const autoApprove = vi.fn(() => true);
+    const { session } = makeSession({ webmcp: { autoApprove } });
+    const pending = session.requestWebMcpApproval({
+      toolName: "checkout_submit",
+      args: {},
+      reason: "gate",
+      confirmRequired: true,
+    });
+    expect(autoApprove).not.toHaveBeenCalled();
+    expect(pendingBubbles(session)).toHaveLength(1);
+    session.cancel();
+    await expect(pending).resolves.toBe(false);
+  });
+
+  it("still auto-approves an unmatched tool", async () => {
+    const autoApprove = vi.fn(() => true);
+    const { session } = makeSession({ webmcp: { autoApprove } });
+    await expect(
+      session.requestWebMcpApproval({ toolName: "search", args: {}, reason: "gate" }),
+    ).resolves.toBe(true);
+    expect(autoApprove).toHaveBeenCalledTimes(1);
+    expect(pendingBubbles(session)).toHaveLength(0);
+  });
+});

package/src/types.ts

@@ -886,6 +886,16 @@ export type WebMcpConfirmInfo = {
    * callbacks on v6 receive an AbortSignal, not a nested confirmation API.
    */
   reason: 'gate';
+  /**
+   * `true` when the tool matches a `requireConfirmFor` pattern (the widget's
+   * `webmcp.requireConfirmFor`, or the bound Runtype surface's
+   * `behavior.webmcp.requireConfirmFor` from client-token init). The call
+   * must be confirmed by the user: Persona never runs `autoApprove` for it,
+   * and a custom `onConfirm` should not auto-approve it either. In
+   * client-token mode it is also set on every call until the surface policy
+   * has loaded (fail closed).
+   */
+  confirmRequired?: true;
   /**
    * Aborts when the call no longer needs an answer (its deadline passed, or it
    * was cancelled). A confirm UI should close and resolve `false`; the tool
@@ -936,8 +946,23 @@ export type AgentWidgetWebMcpConfig = {
    * confirmation UI entirely. Use this to auto-allow read-only tools (e.g.
    * a catalog search) while still gating mutating ones. Only consulted on
    * the default-UI path: a custom `onConfirm` takes full control instead.
+   * Never consulted for a tool matching `requireConfirmFor`.
    */
   autoApprove?: (info: WebMcpConfirmInfo) => boolean;
+  /**
+   * Tool-name patterns that must always be confirmed, even when `autoApprove`
+   * would approve them (and even on the voice path's read-only fast tier).
+   * Matched against the bare tool name (no `webmcp:` prefix); `*` matches any
+   * run of characters, e.g. `["checkout_*", "delete_account"]`. A matched
+   * call shows the default approval bubble, or reaches your `onConfirm` with
+   * `info.confirmRequired === true`.
+   *
+   * Merged with the bound surface's `behavior.webmcp.requireConfirmFor`,
+   * which Runtype returns from `/v1/client/init` in client-token mode. This
+   * is client-side UX, not a security boundary: the server enforces only
+   * `webmcp.enabled` and its `allowlist`.
+   */
+  requireConfirmFor?: string[];
   /**
    * Confirm gate handler. When omitted, Persona renders its native in-panel
    * approval bubble (the same chrome used for server-driven tool approvals)
@@ -6822,6 +6847,11 @@ export type ClientSession = {
     welcomeMessage: string | null;
     placeholder: string;
     theme: Record<string, unknown> | null;
+    /**
+     * The bound chat surface's WebMCP confirm policy. Present only when the
+     * surface enables WebMCP and lists `requireConfirmFor` patterns.
+     */
+    webmcp?: { requireConfirmFor: string[] };
   };
 };
 
@@ -6862,6 +6892,11 @@ export type ClientInitResponse = {
     welcomeMessage: string | null;
     placeholder: string;
     theme: Record<string, unknown> | null;
+    /**
+     * The bound chat surface's WebMCP confirm policy. Present only when the
+     * surface enables WebMCP and lists `requireConfirmFor` patterns.
+     */
+    webmcp?: { requireConfirmFor: string[] };
   };
 };
 

package/src/ui.composer-models.test.ts

@@ -344,29 +344,27 @@ describe("composer model picker", () => {
         },
       });
       expect(mount.style.getPropertyValue(token)).toBe("#1e1f20");
-      // The panel is portaled to document.body, so it never inherits the
-      // mount's theme vars. Stamped on the trigger here because jsdom's
-      // computed style does not inherit custom properties.
+      // The panel is portaled to document.body, outside the mount, so it
+      // carries a copy of the mount's theme vars.
       const button = trigger(mount)!;
-      button.style.setProperty(token, "#1e1f20");
 
       button.click();
       const panel = menu()!;
+      expect(mount.contains(panel)).toBe(false);
       expect(panel.style.getPropertyValue(token)).toBe("#1e1f20");
       button.click();
 
       // Explicit undefined is the documented reset, so the mount stops
-      // carrying the var; the trigger's stand-in follows it.
+      // carrying the var.
       controller.update({
         theme: {
           components: { composer: { modelPicker: { menuBackground: undefined } } },
         },
       });
       expect(mount.style.getPropertyValue(token)).toBe("");
-      button.style.removeProperty(token);
 
       // The menu outlives the update, so the next open has to clear the value
-      // the first one stamped; an empty inline value is the fallback state.
+      // the first one copied; an empty inline value is the fallback state.
       trigger(mount)!.click();
       expect(menu()).toBe(panel);
       expect(panel.style.getPropertyValue(token)).toBe("");

package/src/ui.composer-overflow.test.ts

@@ -103,27 +103,25 @@ describe("composer overflow menu in the live widget", () => {
     vi.restoreAllMocks();
   });
 
-  it("forwards the panel surface tokens onto the portaled menu on open", () => {
+  it("carries the panel surface tokens onto the portaled menu on open", () => {
     const { mount } = makeController({
       composer: {
         actions: [action("folded", { presentation: "overflow" })],
         actionOverflow: { enabled: true },
       },
+      theme: {
+        components: {
+          composer: {
+            overflowMenu: { background: "#353535", borderColor: "rgba(255, 255, 255, 0.08)" },
+          },
+        },
+      },
     });
-    // The panel is portaled to document.body, so it never inherits the mount's
-    // theme vars. Stamped on the trigger here because jsdom's computed style
-    // does not inherit custom properties.
-    const trigger = triggerOf(mount)!;
-    trigger.style.setProperty(
-      "--persona-components-composer-overflowMenu-background",
-      "#353535"
-    );
-    trigger.style.setProperty(
-      "--persona-components-composer-overflowMenu-borderColor",
-      "rgba(255, 255, 255, 0.08)"
-    );
 
+    // The panel is portaled to document.body, outside the mount, so it
+    // carries a copy of the mount's theme vars.
     const panel = openPanel(mount)!;
+    expect(mount.contains(panel)).toBe(false);
 
     expect(
       panel.style.getPropertyValue(
@@ -135,7 +133,7 @@ describe("composer overflow menu in the live widget", () => {
         "--persona-components-composer-overflowMenu-borderColor"
       )
     ).toBe("rgba(255, 255, 255, 0.08)");
-    // Unset keys stamp nothing, so the stylesheet's fallback still stands.
+    // Unset keys copy nothing, so the stylesheet's fallback still stands.
     expect(
       panel.style.getPropertyValue(
         "--persona-components-composer-overflowMenu-shadow"
@@ -155,27 +153,22 @@ describe("composer overflow menu in the live widget", () => {
       },
     });
     expect(mount.style.getPropertyValue(token)).toBe("#353535");
-    // Stamped on the trigger for the same reason as the test above: jsdom's
-    // computed style does not inherit custom properties.
-    const trigger = triggerOf(mount)!;
-    trigger.style.setProperty(token, "#353535");
 
     const panel = openPanel(mount)!;
     expect(panel.style.getPropertyValue(token)).toBe("#353535");
     triggerOf(mount)!.click();
 
     // Explicit undefined is the documented reset, so the mount stops carrying
-    // the var; the trigger's stand-in follows it.
+    // the var.
     controller.update({
       theme: {
         components: { composer: { overflowMenu: { background: undefined } } },
       },
     });
     expect(mount.style.getPropertyValue(token)).toBe("");
-    trigger.style.removeProperty(token);
 
     // The panel outlives the update, so the next open has to clear the value
-    // the first one stamped; an empty inline value is the fallback state.
+    // the first one copied; an empty inline value is the fallback state.
     const reopened = openPanel(mount)!;
     expect(reopened).toBe(panel);
     expect(reopened.style.getPropertyValue(token)).toBe("");

package/src/utils/context-mention-controller.test.ts

@@ -5,6 +5,7 @@ import { ContextMentionController } from "./context-mention-controller";
 import { createTextareaComposerInput } from "./composer-input";
 import { createContentEditableComposerInput } from "./composer-contenteditable";
 import { createSlashCommandsSource } from "./mention-matcher";
+import { applyThemeVariables } from "./theme";
 import type {
   AgentWidgetConfig,
   AgentWidgetContextMentionConfig,
@@ -433,6 +434,61 @@ describe("ContextMentionController", () => {
   });
 });
 
+describe("ContextMentionController — theme", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  // The menu portals to document.body, outside the themed widget root. Without
+  // the root's variables it painted the light fallbacks in a dark widget.
+  it("paints the body-portaled menu with the widget's dark theme and follows a scheme change", async () => {
+    const root = document.createElement("div");
+    root.setAttribute("data-persona-root", "true");
+    const dark: AgentWidgetConfig = {
+      colorScheme: "dark",
+      future: { v5Defaults: true },
+      theme: { semantic: { colors: { surface: "#17181c", border: "#2e3038" } } },
+    } as AgentWidgetConfig;
+    applyThemeVariables(root, dark);
+    const form = document.createElement("form");
+    const textarea = document.createElement("textarea");
+    form.appendChild(textarea);
+    root.appendChild(form);
+    document.body.appendChild(root);
+
+    const controller = new ContextMentionController({
+      mentionConfig: { enabled: true, sources: [syncSource("files", [item("App.tsx")])] },
+      composerInput: createTextareaComposerInput(textarea),
+      anchor: form,
+      getMessages: () => [],
+      getConfig: () => ({}) as AgentWidgetConfig,
+      onSelect: vi.fn(() => true),
+      announce: vi.fn(),
+    });
+    textarea.value = "@";
+    textarea.setSelectionRange(1, 1);
+    controller.onInput();
+
+    const menu = document.querySelector<HTMLElement>("[data-persona-mention-menu]")!;
+    expect(menu.parentElement).toBe(document.body);
+    expect(menu.getAttribute("data-persona-color-scheme")).toBe("dark");
+    expect(menu.style.getPropertyValue("--persona-surface")).toBe("#17181c");
+    expect(menu.style.getPropertyValue("--persona-border")).toBe("#2e3038");
+    const darkText = root.style.getPropertyValue("--persona-text");
+    expect(darkText).not.toBe("");
+    expect(menu.style.getPropertyValue("--persona-text")).toBe(darkText);
+
+    // controller.update({ colorScheme }) re-applies the theme onto the root.
+    applyThemeVariables(root, { ...dark, colorScheme: "light" } as AgentWidgetConfig);
+    await tick();
+    expect(menu.getAttribute("data-persona-color-scheme")).toBe("light");
+    expect(menu.style.getPropertyValue("--persona-text")).toBe(root.style.getPropertyValue("--persona-text"));
+    expect(menu.style.getPropertyValue("--persona-text")).not.toBe(darkText);
+
+    controller.destroy();
+  });
+});
+
 describe("ContextMentionController — slash-commands", () => {
   beforeEach(() => {
     document.body.innerHTML = "";

package/src/webmcp-bridge.test.ts

@@ -30,6 +30,7 @@ vi.mock("@mcp-b/webmcp-polyfill", () => ({
 // one-argument constructor, wired to the real core deps — so these tests also
 // exercise the deps-injection seam the lazy CDN path uses.
 import { WebMcpBridge } from "./webmcp-bridge-public";
+import { WebMcpBridge as WebMcpBridgeRuntime } from "./webmcp-runtime-entry";
 import {
   getWebMcpToolDisplayTitle,
   isWebMcpToolName,
@@ -962,3 +963,104 @@ describe("WebMcpBridge.watchToolChanges", () => {
     expect(() => stop()).not.toThrow();
   });
 });
+
+describe("WebMcpBridge requireConfirmFor", () => {
+  const runtimeBridge = (
+    config: AgentWidgetWebMcpConfig,
+    getRequireConfirmFor: () => readonly string[] | null | undefined,
+  ) =>
+    new WebMcpBridgeRuntime(config, {
+      recordToolDisplayTitles: () => {},
+      getToolDisplayTitle: () => undefined,
+      loadPolyfill: async () => ({ initializeWebMCPPolyfill: () => {} }),
+      getRequireConfirmFor,
+    });
+
+  it("flags a widget-config match with confirmRequired on the confirm info", async () => {
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    registry.tools = [fakeTool({ name: "checkout_submit" }), fakeTool({ name: "search" })];
+    const bridge = new WebMcpBridge({
+      enabled: true,
+      onConfirm,
+      requireConfirmFor: ["checkout_*"],
+    });
+    await bridge.executeToolCall("webmcp:checkout_submit", {});
+    await bridge.executeToolCall("webmcp:search", {});
+    expect(onConfirm).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ toolName: "checkout_submit", confirmRequired: true }),
+    );
+    expect(onConfirm.mock.calls[1]?.[0]).not.toHaveProperty("confirmRequired");
+  });
+
+  it("reads server patterns at call time and matches the bare tool name", async () => {
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    registry.tools = [fakeTool({ name: "delete_account" }), fakeTool({ name: "deleted_items" })];
+    let server: string[] | undefined;
+    const bridge = runtimeBridge({ enabled: true, onConfirm }, () => server);
+    await bridge.executeToolCall("webmcp:delete_account", {});
+    expect(onConfirm.mock.calls[0]?.[0]).not.toHaveProperty("confirmRequired");
+
+    // Init lands after the bridge was built.
+    server = ["delete_account", "*_admin"];
+    await bridge.executeToolCall("webmcp:delete_account", {});
+    await bridge.executeToolCall("webmcp:deleted_items", {});
+    expect(onConfirm.mock.calls[1]?.[0]).toMatchObject({ confirmRequired: true });
+    expect(onConfirm.mock.calls[2]?.[0]).not.toHaveProperty("confirmRequired");
+  });
+
+  it("merges widget and server patterns", async () => {
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    registry.tools = [fakeTool({ name: "pay_now" }), fakeTool({ name: "wipe_cart" })];
+    const bridge = runtimeBridge(
+      { enabled: true, onConfirm, requireConfirmFor: ["pay_*"] },
+      () => ["wipe_*"],
+    );
+    await bridge.executeToolCall("webmcp:pay_now", {});
+    await bridge.executeToolCall("webmcp:wipe_cart", {});
+    expect(onConfirm.mock.calls.map((c) => c[0]?.confirmRequired)).toEqual([true, true]);
+  });
+
+  it.each([[undefined], [[] as string[]]])(
+    "an absent or empty list leaves the gate unflagged (%s)",
+    async (list) => {
+      const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+      registry.tools = [fakeTool({ name: "checkout_submit" })];
+      const bridge = runtimeBridge({ enabled: true, onConfirm, requireConfirmFor: list }, () => list);
+      await bridge.executeToolCall("webmcp:checkout_submit", {});
+      expect(onConfirm.mock.calls[0]?.[0]).not.toHaveProperty("confirmRequired");
+    },
+  );
+
+  it("fails closed while the server policy is not loaded (null) or its read throws", async () => {
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => false);
+    const execute = vi.fn(() => "ran");
+    registry.tools = [fakeTool({ name: "next_slide", annotations: { readOnlyHint: true }, execute })];
+    const unloaded = runtimeBridge({ enabled: true, onConfirm }, () => null);
+    const throwing = runtimeBridge({ enabled: true, onConfirm }, () => {
+      throw new Error("boom");
+    });
+    for (const bridge of [unloaded, throwing]) {
+      const r = await bridge.executeVoiceToolCall("webmcp:next_slide", {}, { autoConfirmReadOnly: true });
+      expect(r.status).toBe("denied");
+    }
+    expect(onConfirm).toHaveBeenCalledTimes(2);
+    expect(onConfirm.mock.calls.map((c) => c[0]?.confirmRequired)).toEqual([true, true]);
+    expect(execute).not.toHaveBeenCalled();
+  });
+
+  it("does not let the voice read-only fast tier skip a matched tool", async () => {
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => false);
+    const execute = vi.fn(() => "ran");
+    registry.tools = [
+      fakeTool({ name: "checkout_preview", annotations: { readOnlyHint: true }, execute }),
+    ];
+    const bridge = runtimeBridge({ enabled: true, onConfirm }, () => ["checkout_*"]);
+    const r = await bridge.executeVoiceToolCall("webmcp:checkout_preview", {}, {
+      autoConfirmReadOnly: true,
+    });
+    expect(onConfirm).toHaveBeenCalledWith(expect.objectContaining({ confirmRequired: true }));
+    expect(execute).not.toHaveBeenCalled();
+    expect(r.status).toBe("denied");
+  });
+});

package/src/webmcp-runtime-entry.ts

@@ -35,6 +35,14 @@ export interface WebMcpBridgeDeps {
   getToolDisplayTitle: (toolName: string) => string | undefined;
   /** Core's `loadWebMcpPolyfillModule` (slot-aware polyfill resolution). */
   loadPolyfill: () => Promise<WebMcpPolyfillModule>;
+  /**
+   * Server-supplied `requireConfirmFor` patterns (the bound surface's policy
+   * from client-token init), read at call time because init can land after
+   * the bridge is built. Merged with `config.requireConfirmFor`. `null` means
+   * a policy is expected but not loaded yet: every call then needs
+   * confirmation (fail closed).
+   */
+  getRequireConfirmFor?: () => readonly string[] | null | undefined;
 }
 
 const DEFAULT_TOOL_TIMEOUT_MS = 30_000;
@@ -339,7 +347,13 @@ export class WebMcpBridge {
       ...(signal ? { signal } : {}),
       reason: "gate",
     };
-    const skipGate = autoConfirmReadOnly && annotations?.readOnlyHint === true;
+    // A `requireConfirmFor` match always reaches the confirm handler: it skips
+    // `autoApprove` on the default UI (session.ts) and the voice read-only
+    // fast tier here.
+    const confirmRequired = this.#requiresConfirmation(bareName);
+    if (confirmRequired) gateInfo.confirmRequired = true;
+    const skipGate =
+      !confirmRequired && autoConfirmReadOnly && annotations?.readOnlyHint === true;
     if (!skipGate && !(await this.#requestConfirm(gateInfo))) {
       return runFailure("denied", "User declined the tool call.");
     }
@@ -487,6 +501,20 @@ export class WebMcpBridge {
     }
   }
 
+  #requiresConfirmation(toolName: string): boolean {
+    let serverPatterns: readonly string[] | null | undefined;
+    try {
+      serverPatterns = this.#deps.getRequireConfirmFor?.();
+    } catch {
+      serverPatterns = null;
+    }
+    if (serverPatterns === null) return true;
+    const matches = (list: readonly string[] | undefined): boolean =>
+      Array.isArray(list) &&
+      list.some((pattern) => typeof pattern === "string" && matchesGlob(toolName, pattern));
+    return matches(this.config.requireConfirmFor) || matches(serverPatterns);
+  }
+
   #passesClientAllowlist(toolName: string): boolean {
     const list = this.config.allowlist;
     if (!list || list.length === 0) return true;

package/dist/chunk-BAkaTZpd.js

@@ -1 +0,0 @@
-const e=`data-persona-tooltip-suppressed`,t=`persona-composer-control`,n=`persona-composer-control--glyph`,r=(e,t,n)=>{let r=e.ownerDocument?.defaultView;if(!r)return;let i=r.getComputedStyle(e);for(let e of n){let n=i.getPropertyValue(e).trim();n?t.style.setProperty(e,n):t.style.removeProperty(e)}};export{e as i,n,r,t};