@runtypelabs/persona 4.33.0 → 4.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.33.0",
+  "version": "4.35.1",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -191,7 +191,7 @@
     "@types/jsdom": "^30.0.0",
     "@types/node": "^20.12.7",
     "@typescript/native-preview": "7.0.0-dev.20260707.2",
-    "@vitest/ui": "^5.0.3",
+    "@vitest/ui": "^5.0.5",
     "acorn": "^8.15.0",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^28.1.0",
@@ -199,9 +199,9 @@
     "rimraf": "^5.0.5",
     "size-limit": "^12.1.0",
     "terser": "^5.49.0",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.2",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.3",
+    "vitest": "^5.0.5",
     "webmcp-polyfill-v6": "npm:@mcp-b/webmcp-polyfill@6.0.0"
   },
   "engines": {
@@ -235,7 +235,7 @@
     "check:size": "node scripts/check-size.mjs",
     "check:dist-vite8": "node scripts/check-dist-no-in-for-init.mjs",
     "build:styles": "node scripts/build-styles.mjs",
-    "lint": "oxlint",
+    "lint": "node ../../scripts/lint.mjs",
     "typecheck": "pnpm run check:runtype-types && node ../../scripts/typecheck.mjs --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",

package/src/client-dispatch.ts

@@ -394,6 +394,8 @@ export class ClientDispatch {
         welcomeMessage: data.config.welcomeMessage,
         placeholder: data.config.placeholder,
         theme: data.config.theme as ClientSession["config"]["theme"],
+        // Kept only as a non-empty array; the bridge ignores non-string entries.
+        ...readWebMcpInitConfig(data.config),
       },
     };
   }
@@ -1087,3 +1089,14 @@ export class ClientDispatch {
   }
 
 }
+
+/** `config.webmcp` from `/v1/client/init`, kept only with a non-empty pattern array. */
+const readWebMcpInitConfig = (
+  config: unknown
+): Pick<ClientSession["config"], "webmcp"> => {
+  const list = (config as { webmcp?: { requireConfirmFor?: unknown } }).webmcp
+    ?.requireConfirmFor;
+  return Array.isArray(list) && list.length
+    ? { webmcp: { requireConfirmFor: list as string[] } }
+    : {};
+};

package/src/client.ts

@@ -181,7 +181,18 @@ export class AgentWidgetClient {
    * matches is superseded, and every SSE frame it still receives is dropped
    */
   #currentClientTurnId: string | null = null;
-  private clientSession: ClientSession | null = null;
+  #clientSession: ClientSession | null = null;
+  /** Last surface `requireConfirmFor` installed with a session; `null` until one loads. */
+  #knownRequireConfirmFor: readonly string[] | null = null;
+  // Every install path assigns here, so the surface policy is recorded the
+  // moment a session lands, not when a tool call next reads it.
+  private get clientSession(): ClientSession | null {
+    return this.#clientSession;
+  }
+  private set clientSession(session: ClientSession | null) {
+    this.#clientSession = session;
+    if (session) this.#knownRequireConfirmFor = session.config?.webmcp?.requireConfirmFor ?? [];
+  }
   #sessionInitPromise: Promise<ClientSession> | null = null;
   /**
    * Early-init latch for `warmSession()`. `false` = armed. Otherwise it holds
@@ -275,6 +286,7 @@ export class AgentWidgetClient {
           recordToolDisplayTitles: recordWebMcpToolDisplayTitles,
           getToolDisplayTitle: getWebMcpToolDisplayTitle,
           loadPolyfill: loadWebMcpPolyfillModule,
+          getRequireConfirmFor: () => this.#surfaceRequireConfirmFor(),
         });
         if (this.#pendingWebMcpConfirmHandler !== undefined) {
           bridge.setConfirmHandler(this.#pendingWebMcpConfirmHandler);
@@ -408,12 +420,35 @@ export class AgentWidgetClient {
         if (!b) {
           return { status: "failed", error: { message: "WebMCP runtime failed to load." } };
         }
-        return b.executeVoiceToolCall(name, args, options);
+        return b.executeVoiceToolCall(name, args, await this.#voiceToolOptions(options));
       },
     };
     return surface;
   }
 
+  /**
+   * The bound surface's `requireConfirmFor` for the WebMCP bridge. Sticky: the
+   * policy of the last installed session survives `clearClientSession()` (same
+   * token, same surface), so a session cleared mid-call cannot drop it. `null`
+   * means client-token mode with no policy loaded yet; the bridge then
+   * confirms every call. `undefined` outside client-token mode.
+   */
+  #surfaceRequireConfirmFor(): readonly string[] | null | undefined {
+    return this.isClientTokenMode() ? this.#knownRequireConfirmFor : undefined;
+  }
+
+  /**
+   * A voice call can start before any typed turn has run client-token init.
+   * Try to load the surface policy first so read-only tools keep their fast
+   * tier; on failure the policy stays unknown and the bridge gates the call.
+   */
+  async #voiceToolOptions<T extends { autoConfirmReadOnly: boolean }>(options: T): Promise<T> {
+    if (options.autoConfirmReadOnly && this.isClientTokenMode() && !this.clientSession) {
+      await this.initSession().catch(() => undefined);
+    }
+    return options;
+  }
+
   public executeWebMcpToolCall(
     wireToolName: string,
     args: unknown,

package/src/client.webmcp-require-confirm.test.ts

@@ -0,0 +1,212 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { AgentWidgetClient } from "./client";
+import type { AgentWidgetConfig, ClientInitResponse, WebMcpConfirmHandler } from "./types";
+
+const API_URL = "https://api.runtype.com";
+
+const initBody = (config: Record<string, unknown> = {}): ClientInitResponse =>
+  ({
+    sessionId: "sess_1",
+    expiresAt: new Date(Date.now() + 5 * 60_000).toISOString(),
+    flow: { id: "flow_1", name: "Flow", description: null },
+    config: { welcomeMessage: null, placeholder: "Ask...", theme: null, ...config },
+  }) as ClientInitResponse;
+
+const installInit = (body: ClientInitResponse) => {
+  global.fetch = vi.fn(async () => ({
+    ok: true,
+    status: 200,
+    json: async () => body,
+  })) as unknown as typeof fetch;
+};
+
+const makeClient = (webmcp?: AgentWidgetConfig["webmcp"]) =>
+  new AgentWidgetClient({
+    apiUrl: API_URL,
+    clientToken: "ct_live_x",
+    ...(webmcp ? { webmcp } : {}),
+  });
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  delete (document as Document & { modelContext?: unknown }).modelContext;
+});
+
+describe("client-token init: config.webmcp.requireConfirmFor", () => {
+  it("keeps the surface's patterns on the session", async () => {
+    installInit(initBody({ webmcp: { requireConfirmFor: ["checkout_*"] } }));
+    const session = await makeClient().initSession();
+    expect(session.config.webmcp).toEqual({ requireConfirmFor: ["checkout_*"] });
+  });
+
+  it.each([
+    ["absent", {}],
+    ["empty", { webmcp: { requireConfirmFor: [] } }],
+    ["malformed", { webmcp: { requireConfirmFor: "checkout_*" } }],
+  ])("omits config.webmcp when the list is %s", async (_label, config) => {
+    installInit(initBody(config));
+    const session = await makeClient().initSession();
+    expect(session.config).not.toHaveProperty("webmcp");
+  });
+});
+
+describe("client-token init feeds the WebMCP confirm gate", () => {
+  it("flags a matched page tool for the host's onConfirm after init", async () => {
+    const execute = vi.fn(async () => JSON.stringify("ran"));
+    (document as Document & { modelContext?: unknown }).modelContext = {
+      getTools: async () => [
+        { name: "checkout_submit", description: "Place the order", title: "", window, origin: location.origin },
+        { name: "search", description: "Search", title: "", window, origin: location.origin },
+      ],
+      executeTool: execute,
+    };
+    installInit(initBody({ webmcp: { requireConfirmFor: ["checkout_*"] } }));
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    const client = makeClient({ enabled: true, onConfirm });
+    await client.initSession();
+
+    await client.executeWebMcpToolCall("webmcp:checkout_submit", {});
+    await client.executeWebMcpToolCall("webmcp:search", {});
+
+    expect(onConfirm).toHaveBeenCalledTimes(2);
+    expect(onConfirm.mock.calls[0]?.[0]).toMatchObject({
+      toolName: "checkout_submit",
+      confirmRequired: true,
+    });
+    expect(onConfirm.mock.calls[1]?.[0]).not.toHaveProperty("confirmRequired");
+    expect(execute).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("voice before any client-token init", () => {
+  const installReadOnlyTools = () => {
+    (document as Document & { modelContext?: unknown }).modelContext = {
+      getTools: async () =>
+        ["checkout_preview", "next_slide"].map((name) => ({
+          name,
+          description: name,
+          title: "",
+          window,
+          origin: location.origin,
+          annotations: { readOnlyHint: true },
+        })),
+      executeTool: vi.fn(async () => JSON.stringify("ran")),
+    };
+  };
+  const voiceExecute = (client: AgentWidgetClient, name: string) =>
+    client
+      .getVoiceClientTools()!
+      .execute(name, {}, { signal: new AbortController().signal, autoConfirmReadOnly: true });
+
+  it("loads the surface policy so a matched read-only tool still confirms", async () => {
+    installReadOnlyTools();
+    installInit(initBody({ webmcp: { requireConfirmFor: ["checkout_*"] } }));
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => false);
+    const client = makeClient({ enabled: true, onConfirm });
+
+    const matched = await voiceExecute(client, "webmcp:checkout_preview");
+    const unmatched = await voiceExecute(client, "webmcp:next_slide");
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onConfirm.mock.calls[0]?.[0]).toMatchObject({
+      toolName: "checkout_preview",
+      confirmRequired: true,
+    });
+    expect(matched.status).toBe("denied");
+    expect(unmatched.status).toBe("completed");
+  });
+
+  it("keeps every voice call gated when init fails", async () => {
+    installReadOnlyTools();
+    global.fetch = vi.fn(async () => {
+      throw new Error("offline");
+    }) as unknown as typeof fetch;
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => false);
+    const client = makeClient({ enabled: true, onConfirm });
+
+    const result = await voiceExecute(client, "webmcp:next_slide");
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(result.status).toBe("denied");
+  });
+});
+
+describe("surface policy lifetime", () => {
+  const installTools = () => {
+    (document as Document & { modelContext?: unknown }).modelContext = {
+      getTools: async () =>
+        ["checkout_submit", "search"].map((name) => ({
+          name,
+          description: name,
+          title: "",
+          window,
+          origin: location.origin,
+        })),
+      executeTool: vi.fn(async () => JSON.stringify("ran")),
+    };
+  };
+
+  it("keeps the last loaded policy after clearClientSession()", async () => {
+    installTools();
+    installInit(initBody({ webmcp: { requireConfirmFor: ["checkout_*"] } }));
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    const client = makeClient({ enabled: true, onConfirm });
+    await client.initSession();
+    // Read the policy once while the session is live, then drop the session.
+    await client.executeWebMcpToolCall("webmcp:search", {});
+    client.clearClientSession();
+
+    await client.executeWebMcpToolCall("webmcp:checkout_submit", {});
+    await client.executeWebMcpToolCall("webmcp:search", {});
+
+    expect(onConfirm.mock.calls.map((c) => c[0]?.confirmRequired)).toEqual([
+      undefined,
+      true,
+      undefined,
+    ]);
+  });
+
+  it("records a policy when a session installs, not when a call reads it", async () => {
+    installTools();
+    // First session: no policy. A tool call reads (and would have cached) [].
+    installInit(initBody());
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    const client = makeClient({ enabled: true, onConfirm });
+    await client.initSession();
+    await client.executeWebMcpToolCall("webmcp:checkout_submit", {});
+
+    // Second session adds a policy, then is cleared before any tool call reads it.
+    client.clearClientSession();
+    installInit(initBody({ webmcp: { requireConfirmFor: ["checkout_*"] } }));
+    await client.initSession();
+    client.clearClientSession();
+
+    await client.executeWebMcpToolCall("webmcp:checkout_submit", {});
+
+    expect(onConfirm.mock.calls.map((c) => c[0]?.confirmRequired)).toEqual([undefined, true]);
+  });
+
+  it("flags every call while no client-token policy has loaded", async () => {
+    installTools();
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    const client = makeClient({ enabled: true, onConfirm });
+
+    await client.executeWebMcpToolCall("webmcp:search", {});
+
+    expect(onConfirm.mock.calls[0]?.[0]).toMatchObject({ toolName: "search", confirmRequired: true });
+  });
+
+  it("leaves proxy mode (no client token) unflagged", async () => {
+    installTools();
+    const onConfirm = vi.fn<WebMcpConfirmHandler>(async () => true);
+    const client = new AgentWidgetClient({ apiUrl: API_URL, webmcp: { enabled: true, onConfirm } });
+
+    await client.executeWebMcpToolCall("webmcp:checkout_submit", {});
+
+    expect(onConfirm.mock.calls[0]?.[0]).not.toHaveProperty("confirmRequired");
+  });
+});

package/src/components/composer-model-picker.ts

@@ -18,25 +18,12 @@ import { createPopover, type PopoverHandle } from "../plugin-kit";
 import type { ComposerCustomAction, ComposerModel } from "../types";
 import { createElement, createNode } from "../utils/dom";
 import type { renderLucideIcon } from "../utils/icons";
-import { forwardMenuTokens } from "./composer-tokens";
 
 export const COMPOSER_MODEL_PICKER_ACTION_ID = "core:model";
 export const COMPOSER_MODEL_PICKER_ORDER = 700;
 
 const ROW_ICON_SIZE = 16;
 
-/**
- * Tokens the popover panel reads, forwarded onto the portaled panel on every
- * open; unset ones clear so the stylesheet's fallbacks stand.
- */
-const MENU_TOKEN_VARS = [
-  "--persona-components-composer-modelPicker-menuBackground",
-  "--persona-components-composer-modelPicker-menuBorderRadius",
-  "--persona-components-composer-modelPicker-rowHoverBackground",
-  "--persona-components-composer-modelPicker-labelColor",
-  "--persona-components-composer-modelPicker-descriptionColor",
-] as const;
-
 export interface ComposerModelPickerOptions {
   renderIcon: typeof renderLucideIcon;
   getModels: () => ReadonlyArray<ComposerModel>;
@@ -212,7 +199,6 @@ export function createComposerModelPickerAction(
           onDismiss: () => trigger.setAttribute("aria-expanded", "false"),
         });
       }
-      forwardMenuTokens(trigger, menu, MENU_TOKEN_VARS);
       popover.open();
       trigger.setAttribute("aria-expanded", "true");
       const ids = [...rows.keys()];

package/src/components/composer-overflow-menu.ts

@@ -22,7 +22,6 @@ import {
   COMPOSER_CONTROL_CLASS,
   COMPOSER_CONTROL_GLYPH_CLASS,
   COMPOSER_CONTROL_ICON_FALLBACK_PX,
-  forwardMenuTokens,
 } from "./composer-tokens";
 
 export interface ComposerOverflowMenuOptions {
@@ -66,19 +65,6 @@ export interface ComposerOverflowMenu {
 const focusableSelector =
   'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
-/**
- * Panel surface tokens, forwarded onto the portaled panel on every open; unset
- * ones clear so the stylesheet's fallbacks stand.
- */
-const MENU_TOKEN_VARS = [
-  "--persona-components-composer-overflowMenu-background",
-  "--persona-components-composer-overflowMenu-borderColor",
-  "--persona-components-composer-overflowMenu-borderRadius",
-  "--persona-components-composer-overflowMenu-foreground",
-  "--persona-components-composer-overflowMenu-shadow",
-  ...["padding", "rowGap", "rowPadding", "rowBorderRadius", "fontSize", "lineHeight", "iconSize", "iconGap", "hoverBackground", "focusBackground", "descriptionColor", "descriptionFontSize", "dividerColor", "dividerSpacing", "minWidth", "maxHeight"].map((name) => `--persona-components-composer-overflowMenu-${name}`),
-] as const;
-
 /**
  * Set on the menu row that holds keyboard focus. Rows that shade on
  * `:focus-visible` do not need it; wrapper rows around a live control do.
@@ -296,7 +282,6 @@ export function createComposerOverflowMenu(
   };
 
   const refresh = (): void => {
-    forwardMenuTokens(triggerButton, panel, MENU_TOKEN_VARS);
     panel.setAttribute("data-persona-menu-description-layout", options.getConfig?.()?.descriptionLayout ?? "stacked");
     const width = options.getConfig?.()?.width;
     panel.style.width = width === "composer"

package/src/components/composer-tokens.ts

@@ -12,23 +12,3 @@ export const COMPOSER_CONTROL_GLYPH_CLASS = "persona-composer-control--glyph";
 export const COMPOSER_CONTROL_FALLBACK_PX = 40;
 /** Icon-size token default in CSS pixels, for the same JS-derived cases. */
 export const COMPOSER_CONTROL_ICON_FALLBACK_PX = 24;
-
-/**
- * Forward theme vars onto a portaled menu panel, which lives outside the
- * themed mount. The panel is reused across opens, so an unset var must clear
- * any previously stamped value for the stylesheet fallback to paint again.
- */
-export const forwardMenuTokens = (
-  from: HTMLElement,
-  to: HTMLElement,
-  names: readonly string[]
-): void => {
-  const view = from.ownerDocument?.defaultView;
-  if (!view) return;
-  const computed = view.getComputedStyle(from);
-  for (const name of names) {
-    const value = computed.getPropertyValue(name).trim();
-    if (value) to.style.setProperty(name, value);
-    else to.style.removeProperty(name);
-  }
-};

package/src/components/event-stream-view.test.ts

@@ -36,6 +36,11 @@ function createMockElement(tag = "div"): any {
     clientHeight: 300,
     // For <select>
     options: [] as any[],
+    append(...nodes: (Node | string)[]) {
+      for (const node of nodes) {
+        el.appendChild(typeof node === "string" ? { nodeType: 3, textContent: node } : node);
+      }
+    },
     appendChild(child: any) {
       // Handle DocumentFragment: move its children into this element
       if (child.tagName === "FRAGMENT") {

package/src/components/message-bubble.ts

@@ -25,6 +25,11 @@ import { createMentionTokenElement } from "../utils/mention-token";
 import { createIconButton } from "../utils/buttons";
 import { renderLucideIcon } from "../utils/icons";
 import { IMAGE_ONLY_MESSAGE_FALLBACK_TEXT } from "../utils/content";
+import {
+  applyUserCollapseState,
+  createUserCollapseRegion,
+  type UserMessageCollapseRender,
+} from "./user-message-collapse";
 import {
   applyStreamBuffer,
   createSkeletonPlaceholder,
@@ -998,6 +1003,11 @@ export type CreateStandardBubbleOptions = {
    * Full widget config (needed for loading indicator context)
    */
   widgetConfig?: import("../types").AgentWidgetConfig;
+  /**
+   * Long user message collapse (`features.userMessageCollapse`). When set on
+   * a user bubble, its content is wrapped in a clip region with the toggle.
+   */
+  userCollapse?: UserMessageCollapseRender;
 };
 
 /**
@@ -1238,6 +1248,12 @@ export const createStandardBubble = (
     }
   }
 
+  // Everything a long user message can spill (attachments, chips, text) goes
+  // in the collapse region; the timestamp and actions stay outside the clip.
+  const userCollapse = message.role === "user" ? options?.userCollapse : undefined;
+  const collapseRegion = userCollapse ? createUserCollapseRegion(message.id, userCollapse.maxHeight) : null;
+  const contentParent = collapseRegion ?? bubble;
+
   if (imageParts.length > 0) {
     const imagePreviews = createMessageImagePreviews(
       imageParts,
@@ -1250,7 +1266,7 @@ export const createStandardBubble = (
     );
 
     if (imagePreviews) {
-      bubble.appendChild(imagePreviews);
+      contentParent.appendChild(imagePreviews);
     } else if (shouldHideTextUntilPreviewFails && textContentDiv) {
       textContentDiv.style.display = "";
     }
@@ -1260,7 +1276,7 @@ export const createStandardBubble = (
   if (audioParts.length > 0) {
     const audioPreviews = createMessageAudioPreviews(audioParts);
     if (audioPreviews) {
-      bubble.appendChild(audioPreviews);
+      contentParent.appendChild(audioPreviews);
     }
   }
 
@@ -1268,7 +1284,7 @@ export const createStandardBubble = (
   if (videoParts.length > 0) {
     const videoPreviews = createMessageVideoPreviews(videoParts);
     if (videoPreviews) {
-      bubble.appendChild(videoPreviews);
+      contentParent.appendChild(videoPreviews);
     }
   }
 
@@ -1276,7 +1292,7 @@ export const createStandardBubble = (
   if (fileParts.length > 0) {
     const filePreviews = createMessageFilePreviews(fileParts);
     if (filePreviews) {
-      bubble.appendChild(filePreviews);
+      contentParent.appendChild(filePreviews);
     }
   }
 
@@ -1286,10 +1302,14 @@ export const createStandardBubble = (
     ? null
     : createMessageMentionChips(message.contextMentions);
   if (mentionChips) {
-    bubble.appendChild(mentionChips);
+    contentParent.appendChild(mentionChips);
   }
 
-  bubble.appendChild(contentDiv);
+  contentParent.appendChild(contentDiv);
+  if (collapseRegion && userCollapse) {
+    bubble.appendChild(collapseRegion);
+    applyUserCollapseState(bubble, collapseRegion, message.id, userCollapse);
+  }
 
   // Add timestamp below if configured
   if (showTimestamp && timestampPosition === "below" && message.createdAt) {