@runtypelabs/persona 4.33.0 → 4.35.1

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/styles/widget.css

@@ -3109,6 +3109,52 @@
   box-shadow: var(--persona-message-user-shadow);
 }
 
+/* Long user message collapse (features.userMessageCollapse). The region clips
+   without becoming a scroller (overflow: clip), so the full text stays in the
+   DOM for find, copy and screen readers with no nested scroll area. The fade
+   is a mask rather than a gradient overlay, so it works on any bubble fill in
+   light and dark schemes; the toggle inherits the bubble's text color. */
+.persona-user-collapse-region[data-persona-user-collapse="collapsed"] {
+  max-height: var(--persona-user-collapse-max-height, 240px);
+  overflow: clip;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--persona-user-collapse-fade-height, 48px)), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--persona-user-collapse-fade-height, 48px)), transparent);
+}
+
+.persona-user-collapse-toggle {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.25rem;
+  padding: 0.125rem 0;
+  border: 0;
+  background: none;
+  color: var(--persona-user-collapse-toggle-fg, inherit);
+  font-family: inherit;
+  font-size: var(--persona-user-collapse-toggle-font-size, 0.8125rem);
+  font-weight: var(--persona-user-collapse-toggle-font-weight, 600);
+  line-height: 1.25rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color 150ms ease;
+}
+
+.persona-user-collapse-toggle:hover {
+  text-decoration-color: currentColor;
+}
+
+.persona-user-collapse-toggle:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .persona-user-collapse-toggle {
+    transition: none;
+  }
+}
+
 [data-persona-root] .persona-tool-bubble.persona-shadow-sm {
   box-shadow: var(--persona-tool-bubble-shadow);
 }
@@ -4869,6 +4915,16 @@
   text-align: center;
 }
 
+/* A pending approval below the fold: the control widens to a labelled pill.
+   Unset approval tokens keep the pill's own colors. */
+[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-approval] {
+  border-color: var(--persona-scroll-to-bottom-approval-border, var(--persona-scroll-to-bottom-border, var(--persona-primary, #111827)));
+  background: var(--persona-scroll-to-bottom-approval-bg, var(--persona-scroll-to-bottom-bg, var(--persona-button-primary-bg, var(--persona-accent, #0f0f0f))));
+  color: var(--persona-scroll-to-bottom-approval-fg, var(--persona-scroll-to-bottom-fg, var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff))));
+  font-weight: var(--persona-scroll-to-bottom-approval-font-weight, 500);
+  white-space: nowrap;
+}
+
 [data-persona-root] .persona-scroll-to-bottom-indicator:hover {
   opacity: 0.92;
 }

package/src/theme-reference.ts

@@ -171,7 +171,7 @@ export const THEME_TOKEN_DOCS = {
       askUserQuestion: 'sheet (background, border, shadow), pill (background, foreground, borderRadius, selectedBackground, selectedForeground), customInput.background. Local features.askUserQuestion.styles still wins; navigation, labels and slide timing remain feature config.',
       attachment: 'image (background, border).',
       scrollToBottom:
-        'Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize.',
+        'Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize; approval (background, foreground, border, fontWeight) for the labelled "Approval needed" state, falling back to the control colors.',
       toolBubble: 'shadow, background, borderColor, borderWidth, borderRadius; header (background, foreground, padding), content (background, foreground, padding), codeBlock (background, foreground, borderColor), toggleForeground, labelForeground, loading (primary, secondary, duration). Applies to card and activity-row variants without changing their distinct defaults. CSS duration uses ms/s; legacy numeric milliseconds must convert explicitly. Theme content.padding precedes activity.bodyPadding/toolBubble.bodyPadding fallbacks; explicit legacy axes override only their axis.',
       scrollbar:
         'Shared scrollbar appearance for every scroller: thumb (default semantic.colors.border), track (default transparent).',
@@ -250,7 +250,7 @@ export const THEME_TOKEN_DOCS = {
       description:
         'Shared transcript + event-stream jump-to-latest affordance.',
       properties:
-        'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only). Defaults: enabled=true, iconName="arrow-down", label="".',
+        'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only), features.scrollToBottom.approvalLabel (shown while a pending approval is below the fold; empty string keeps the regular control). Defaults: enabled=true, iconName="arrow-down", label="", approvalLabel="Approval needed".',
     },
     toolCall: {
       description:

package/src/types/theme.ts

@@ -530,6 +530,22 @@ export interface MessageActionsTokens {
   borderRadius?: TokenReference<'radius'>;
 }
 
+/**
+ * Long user message collapse (`features.userMessageCollapse`). Every key is
+ * optional; unset, the fade and the toggle follow the user bubble's own text
+ * color and type, so they already work on any fill in light and dark schemes.
+ */
+export interface UserMessageCollapseTokens {
+  /** Height of the bottom fade on a collapsed bubble. @default "48px" */
+  fadeHeight?: string;
+  /** "Show more" / "Show less" text color. Defaults to the user bubble text color. */
+  toggleForeground?: TokenReference<'color'>;
+  /** Toggle label type size. @default "0.8125rem" */
+  toggleFontSize?: string;
+  /** Toggle label weight. @default "600" */
+  toggleFontWeight?: string;
+}
+
 /**
  * Bubble geometry and type, per role. Every key is unset by default and each
  * one falls back to the value the message layout preset already produced, so
@@ -1307,6 +1323,17 @@ export interface ScrollToBottomTokens extends ComponentTokenSet {
     fontSize?: string;
     fontWeight?: string;
   };
+  /**
+   * The labelled "Approval needed" state shown while a pending approval is
+   * below the fold. Omitted values follow the control's own colors, so it
+   * matches the theme until you give it an accent.
+   */
+  approval?: {
+    background?: TokenReference<'color'>;
+    foreground?: TokenReference<'color'>;
+    border?: TokenReference<'color'>;
+    fontWeight?: string;
+  };
 }
 
 /** Visual tokens shared by one suggestion presentation variant. */
@@ -1357,6 +1384,8 @@ export interface ComponentTokens {
   message: MessageTokens;
   /** Hover-revealed per-message action row (copy, vote, read aloud). */
   messageActions?: MessageActionsTokens;
+  /** Fade and "Show more" toggle on collapsed long user messages. */
+  userMessageCollapse?: UserMessageCollapseTokens;
   /** Welcome / intro card shown above the message list. */
   introCard?: IntroCardTokens;
   /** Markdown surfaces (chat + artifact pane). */

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)
@@ -2228,10 +2253,13 @@ export type AgentWidgetArtifactsFeature = {
  *
  * - `"anchor-top"` (default): on send, scroll the user's message near the top
  *   of the viewport and hold it there while the response streams in beneath it
- *   (ChatGPT-style). When a turn has no user send to anchor to (a proactive
- *   greeting, an injected assistant message, a resubmit, or first-load
- *   streaming), it falls back to `"follow"` for that turn so content never
- *   streams in off-screen.
+ *   (ChatGPT-style). The anchor holds for the whole reply, even when the
+ *   message is taller than the viewport or tool calls push the answer below
+ *   the fold, until the reader scrolls away, jumps to the latest content with
+ *   the scroll-to-bottom control, or sends again. When a turn has no user send
+ *   to anchor to (a proactive greeting, an injected assistant message, a
+ *   resubmit, or first-load streaming), it falls back to `"follow"` for that
+ *   turn so content never streams in off-screen.
  * - `"follow"`: keep the newest content pinned to the bottom of the viewport,
  *   pausing when the user scrolls up and resuming when they return to the
  *   bottom. This was the default before 4.x.
@@ -2320,7 +2348,8 @@ export type AgentWidgetScrollBehaviorFeature = {
 
 /** Decorative glyph state. Hidden glyphs should pause host-owned animation. */
 export type AgentWidgetScrollToBottomIconState = {
-  activity: "idle" | "generating-below";
+  /** `"approval-below"`: a pending approval is below the fold and the turn waits on it. */
+  activity: "idle" | "generating-below" | "approval-below";
   visible: boolean;
   hovered: boolean;
   focused: boolean;
@@ -2360,6 +2389,15 @@ export type AgentWidgetScrollToBottomFeature = {
    * @default ""
    */
   label?: string;
+  /**
+   * Label shown while a pending approval sits below the fold. The control
+   * widens to a labelled pill with the approval's shield glyph, and the turn
+   * stays put until the reader jumps (anchor-top never scrolls them to it).
+   * Styled by `theme.components.scrollToBottom.approval`. Set to an empty
+   * string to keep the regular control.
+   * @default "Approval needed"
+   */
+  approvalLabel?: string;
   /** Glyph while a live response is arriving below. V4 defaults to arrow; V5 to dots. */
   streamingIndicator?: "dots" | "arrow";
   /** Visibility transition. V4 defaults to none; V5 to fade. Honors reduced motion. */
@@ -2788,6 +2826,31 @@ export type AgentWidgetStreamAnimationFeature = {
   plugins?: Record<string, StreamAnimationPlugin>;
 };
 
+/**
+ * Collapse long user messages behind a "Show more" / "Show less" toggle.
+ * Only the built-in user bubble collapses; `layout.messages.renderUserMessage`
+ * and plugin `renderMessage` output is left untouched.
+ */
+export type AgentWidgetUserMessageCollapseFeature = {
+  /**
+   * Clip a user bubble whose rendered content (text, markdown, code,
+   * attachments) is taller than `maxHeight`, with a bottom fade and a real
+   * toggle button. The full message stays in the DOM, so find-in-page, copy,
+   * selection and screen readers still reach it. Interim voice transcripts
+   * stay expanded and collapse once final. A reader's toggle is remembered
+   * per message for the life of the widget.
+   * @default false (`true` under `future.v5Defaults`)
+   */
+  enabled?: boolean;
+  /**
+   * Collapsed height in px. Content within about two lines (48px) of the
+   * limit is left expanded, so the toggle never hides just a line or two.
+   * The default shows about ten lines of bubble text.
+   * @default 240
+   */
+  maxHeight?: number;
+};
+
 export type AgentWidgetFeatureFlags = {
   showReasoning?: boolean;
   showToolCalls?: boolean;
@@ -2804,6 +2867,8 @@ export type AgentWidgetFeatureFlags = {
   scrollToBottom?: AgentWidgetScrollToBottomFeature;
   /** Transcript scroll behavior during streamed responses. */
   scrollBehavior?: AgentWidgetScrollBehaviorFeature;
+  /** "Show more" collapse for long user messages. Off by default; on under `future.v5Defaults`. */
+  userMessageCollapse?: AgentWidgetUserMessageCollapseFeature;
   /** Collapsed transcript behavior for tool call rows. */
   toolCallDisplay?: AgentWidgetToolCallDisplayFeature;
   /** Collapsed transcript behavior for reasoning rows. */
@@ -6782,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[] };
   };
 };
 
@@ -6822,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[] };
   };
 };
 
@@ -8433,6 +8508,10 @@ export type AgentWidgetConfig = {
     sendButtonLabel?: string;
     /** Button label shown in text mode while a response is streaming. Default: "Stop". */
     stopButtonLabel?: string;
+    /** Toggle label on a collapsed long user message (`features.userMessageCollapse`). @default "Show more" */
+    showMoreLabel?: string;
+    /** Toggle label on an expanded long user message (`features.userMessageCollapse`). @default "Show less" */
+    showLessLabel?: string;
     /**
      * When false, the welcome / intro card is not shown above the message list.
      * @deprecated Use `welcome.variant: "none"`.

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("");