@runtypelabs/persona 4.33.0 → 4.35.1

package/src/components/scroll-to-bottom.test.ts

@@ -40,6 +40,49 @@ describe("scroll-to-bottom chrome", () => {
     control.destroy();
   });
 
+  it("names a pending approval below with a labelled shield pill, then reverts", () => {
+    const control = createScrollToBottomControl(icon, "transcript");
+    const config: AgentWidgetConfig = { future: { v5Defaults: true } };
+    control.update(config, true, false, 2, true);
+    const el = control.element;
+    expect(el.hasAttribute("data-persona-scroll-to-bottom-approval")).toBe(true);
+    expect(el.getAttribute("data-persona-scroll-to-bottom-has-label")).toBe("true");
+    expect(el.textContent).toBe("Approval needed");
+    expect(el.querySelector("svg")?.getAttribute("data-icon")).toBe("shield-check");
+    // The label replaces the unread count; assistive tech hears where it leads.
+    expect(el.querySelector<HTMLElement>("[data-persona-scroll-to-bottom-count]")?.style.display).toBe("none");
+    expect(el.getAttribute("aria-label")).toBe("Approval needed below. Jump to latest");
+
+    // Hidden, the approval state never shows.
+    control.update(config, false, false, 0, true);
+    expect(el.hasAttribute("data-persona-scroll-to-bottom-approval")).toBe(false);
+
+    control.update(config, true, false, 2, false);
+    expect(el.hasAttribute("data-persona-scroll-to-bottom-approval")).toBe(false);
+    expect(el.getAttribute("data-persona-scroll-to-bottom-has-label")).toBe("false");
+    expect(el.querySelector("svg")?.getAttribute("data-icon")).toBe("arrow-down");
+    expect(el.getAttribute("aria-label")).toBe("Jump to latest (2 new)");
+    control.destroy();
+  });
+
+  it("uses a custom approval label, opts out with an empty one, and tells custom glyphs", () => {
+    const states: string[] = [];
+    const renderIcon = vi.fn((_context: AgentWidgetScrollToBottomIconContext) => ({
+      element: document.createElement("span"),
+      update: (next: AgentWidgetScrollToBottomIconContext) => { states.push(next.state.activity); },
+    }));
+    const control = createScrollToBottomControl(icon, "transcript");
+    control.update({ features: { scrollToBottom: { approvalLabel: "Review request", renderIcon } } }, true, false, 0, true);
+    expect(control.element.textContent).toBe("Review request");
+    expect(renderIcon.mock.calls[0][0].state.activity).toBe("approval-below");
+    control.update({ features: { scrollToBottom: { approvalLabel: "", renderIcon } } }, true, false, 1, true);
+    expect(control.element.getAttribute("data-persona-scroll-to-bottom-has-label")).toBe("false");
+    expect(control.element.getAttribute("aria-label")).toBe("Approval needed below. Jump to latest");
+    control.update({ features: { scrollToBottom: { renderIcon } } }, true, false, 0, false);
+    expect(states.at(-1)).toBe("idle");
+    control.destroy();
+  });
+
   it("makes fading controls inert immediately and returns focus only when owned, including Shadow DOM", () => {
     const host = document.createElement("div"); document.body.appendChild(host);
     const root = host.attachShadow({ mode: "open" });
@@ -122,6 +165,98 @@ describe("scroll-to-bottom chrome", () => {
     control.destroy(); warning.mockRestore();
   });
 
+  describe("approval morph", () => {
+    const stubAnimate = () => {
+      const calls: { target: Element; keyframes: Keyframe[]; options: KeyframeAnimationOptions; animation: { cancel: ReturnType<typeof vi.fn> } }[] = [];
+      const original = (HTMLElement.prototype as { animate?: unknown }).animate;
+      (HTMLElement.prototype as { animate?: unknown }).animate = function (this: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions) {
+        const animation = { cancel: vi.fn(), finished: new Promise<void>(() => {}) };
+        calls.push({ target: this, keyframes, options, animation });
+        return animation;
+      };
+      return { calls, restore: () => { (HTMLElement.prototype as { animate?: unknown }).animate = original; } };
+    };
+
+    it("morphs a visible arrow into the pill on the theme's motion tokens, and back", () => {
+      const { calls, restore } = stubAnimate();
+      try {
+        const control = createScrollToBottomControl(icon, "transcript");
+        document.body.appendChild(control.element);
+        control.element.style.setProperty("--persona-motion-duration-base", "0.3s");
+        control.element.style.setProperty("--persona-motion-easing", "cubic-bezier(0.2, 0, 0, 1)");
+        const config: AgentWidgetConfig = { future: { v5Defaults: true } };
+        control.update(config, true);
+        expect(calls).toHaveLength(0);
+
+        control.update(config, true, false, 0, true);
+        const [own, labelFade] = calls;
+        expect(own.target).toBe(control.element);
+        expect(own.keyframes).toHaveLength(2);
+        expect(own.keyframes[0]).toMatchObject({ overflow: "hidden" });
+        expect(own.keyframes[0]).toHaveProperty("width");
+        expect(own.keyframes[1]).toHaveProperty("backgroundColor");
+        expect(own.options).toEqual({ duration: 300, easing: "cubic-bezier(0.2, 0, 0, 1)" });
+        // The label fades in as the clipped pill widens.
+        expect(labelFade.target.textContent).toBe("Approval needed");
+        expect(calls).toHaveLength(2);
+
+        // Ordinary syncs in the same state leave a running morph alone.
+        control.update(config, true, false, 0, true);
+        expect(calls).toHaveLength(2);
+        expect(calls.every((call) => call.animation.cancel.mock.calls.length === 0)).toBe(true);
+
+        // Back to the arrow: the running morph is replaced, unclipped (the
+        // count badge hangs outside the button).
+        control.update(config, true, false, 2, false);
+        expect(calls.slice(0, 2).every((call) => call.animation.cancel.mock.calls.length === 1)).toBe(true);
+        expect(calls).toHaveLength(3);
+        expect(calls[2].keyframes[0]).not.toHaveProperty("overflow");
+        control.destroy();
+      } finally { restore(); }
+    });
+
+    it("swaps instantly when the theme turns motion off, and falls back when the duration is missing", () => {
+      const { calls, restore } = stubAnimate();
+      try {
+        const config: AgentWidgetConfig = { future: { v5Defaults: true } };
+        const off = createScrollToBottomControl(icon, "transcript");
+        off.element.style.setProperty("--persona-motion-duration-base", "0ms");
+        off.update(config, true);
+        off.update(config, true, false, 0, true);
+        expect(calls).toHaveLength(0);
+        expect(off.element.hasAttribute("data-persona-scroll-to-bottom-approval")).toBe(true);
+        off.destroy();
+
+        const unset = createScrollToBottomControl(icon, "transcript");
+        unset.update(config, true);
+        unset.update(config, true, false, 0, true);
+        expect(calls[0].options.duration).toBe(200);
+        unset.destroy();
+      } finally { restore(); }
+    });
+
+    it("does not morph a control that appears, hides, or prefers reduced motion", () => {
+      const { calls, restore } = stubAnimate();
+      try {
+        const config: AgentWidgetConfig = { future: { v5Defaults: true } };
+        const control = createScrollToBottomControl(icon, "transcript");
+        control.update(config, false);
+        control.update(config, true, false, 0, true); // appears already as the pill
+        control.update(config, false, false, 0, true); // hides
+        expect(calls).toHaveLength(0);
+        control.destroy();
+
+        vi.stubGlobal("matchMedia", () => ({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() }));
+        const reduced = createScrollToBottomControl(icon, "transcript");
+        reduced.update(config, true);
+        reduced.update(config, true, false, 0, true);
+        expect(calls).toHaveLength(0);
+        expect(reduced.element.hasAttribute("data-persona-scroll-to-bottom-approval")).toBe(true);
+        reduced.destroy();
+      } finally { restore(); }
+    });
+  });
+
   it("provides live reduced-motion changes and releases its media listener", () => {
     let change: (() => void) | undefined;
     const media = { matches: true, addEventListener: vi.fn((_event, callback) => { change = callback; }), removeEventListener: vi.fn() };

package/src/components/scroll-to-bottom.ts

@@ -25,9 +25,7 @@ export function createScrollToBottomControl(
   const label = createElement("span", "");
   const badge = createElement("span", "");
   badge.setAttribute("data-persona-scroll-to-bottom-count", "");
-  element.appendChild(glyph);
-  element.appendChild(label);
-  element.appendChild(badge);
+  element.append(glyph, label, badge);
   let config: AgentWidgetConfig = {};
   let state: AgentWidgetScrollToBottomIconState = { activity: "idle", visible: false, hovered: false, focused: false, reducedMotion: false };
   // Keep renderer identity separate from its handle, including null fallbacks.
@@ -36,6 +34,26 @@ export function createScrollToBottomControl(
   let abort: AbortController | undefined;
   let builtin = "";
   const media = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
+  // Arrow <-> "Approval needed" pill: one button changing shape, so morph its
+  // width and colors on the theme's motion tokens while the new label fades in.
+  let morphs: Animation[] = [];
+  const paint = () => {
+    const style = getComputedStyle(element);
+    return { width: `${element.offsetWidth}px`, backgroundColor: style.backgroundColor, borderColor: style.borderColor, color: style.color };
+  };
+  const morph = (from: Keyframe) => {
+    const style = getComputedStyle(element);
+    const value = style.getPropertyValue("--persona-motion-duration-base");
+    const ms = parseFloat(value) * (value.includes("ms") ? 1 : 1000);
+    // "0ms" turns motion off; only a missing or invalid value falls back.
+    if (ms === 0) return;
+    const timing = { duration: ms > 0 ? ms : 200, easing: style.getPropertyValue("--persona-motion-easing").trim() || "ease-out" };
+    // Clip only while widening into the pill: the arrow's count badge hangs
+    // outside the button.
+    const clip = label.style.display === "none" ? null : { overflow: "hidden" };
+    morphs = [element.animate([{ ...from, ...clip }, { ...paint(), ...clip }], timing)];
+    if (clip) morphs.push(label.animate([{ opacity: 0 }, { opacity: 1 }], timing));
+  };
   state.reducedMotion = media?.matches ?? false;
   const warn = (error: unknown) => console.warn("Persona scroll icon failed", error);
   const context = (): AgentWidgetScrollToBottomIconContext => ({ config, state: { ...state }, view, signal: abort!.signal });
@@ -51,7 +69,9 @@ export function createScrollToBottomControl(
     if (handle?.element) return;
     const feature = config.features?.scrollToBottom;
     const dots = state.activity === "generating-below" && (feature?.streamingIndicator ?? (config.future?.v5Defaults ? "dots" : "arrow")) === "dots";
-    const key = dots ? "dots" : `arrow:${feature?.iconName ?? "arrow-down"}`;
+    // Same glyph as the approval card it points at, so the two read as one thing.
+    const iconName = state.activity === "approval-below" ? "shield-check" : feature?.iconName ?? "arrow-down";
+    const key = dots ? "dots" : `arrow:${iconName}`;
     if (builtin === key) return;
     builtin = key;
     glyph.innerHTML = "";
@@ -64,7 +84,7 @@ export function createScrollToBottomControl(
       }
       glyph.appendChild(dotGroup);
     } else {
-      const icon = renderIcon(feature?.iconName ?? "arrow-down", "14px", "currentColor", 2);
+      const icon = renderIcon(iconName, "14px", "currentColor", 2);
       if (icon) glyph.appendChild(icon);
     }
   };
@@ -106,11 +126,12 @@ export function createScrollToBottomControl(
 
   return {
     element,
-    update(nextConfig: AgentWidgetConfig, visible: boolean, active = false, count = 0) {
+    /** `approval` marks a pending approval below the fold: the control names it. */
+    update(nextConfig: AgentWidgetConfig, visible: boolean, active = false, count = 0, approval = false) {
       const previous = config.features?.scrollToBottom;
       const next = nextConfig.features?.scrollToBottom;
       const configChanged = config.future?.v5Defaults !== nextConfig.future?.v5Defaults ||
-        (["enabled", "iconName", "label", "streamingIndicator", "transition", "scrollBehavior", "scrollDurationMs"] as (keyof AgentWidgetScrollToBottomFeature)[])
+        (["enabled", "iconName", "label", "approvalLabel", "streamingIndicator", "transition", "scrollBehavior", "scrollDurationMs"] as (keyof AgentWidgetScrollToBottomFeature)[])
           .some((key) => previous?.[key] !== next?.[key]);
       config = nextConfig;
       const feature = config.features?.scrollToBottom;
@@ -132,21 +153,37 @@ export function createScrollToBottomControl(
           focusTarget.focus({ preventScroll: true });
         }
       }
-      const text = feature?.label ?? "";
-      const base = text || "Jump to latest";
-      element.setAttribute("aria-label", `${base}${count > 0 ? ` (${count} new)` : ""}${active && visible ? " (response streaming below)" : ""}`);
+      // A waiting approval outranks streaming and the unread count: the turn is
+      // blocked on the reader, so the control says so in words.
+      const waiting = approval && visible;
+      // Morph only a visible control changing shape, never its fade in or out.
+      const reshape = state.visible && visible && (state.activity === "approval-below") !== waiting;
+      if (reshape || !visible) morphs.forEach((animation) => animation.cancel());
+      const from = reshape && !state.reducedMotion && typeof element.animate === "function" ? paint() : null;
+      const approvalText = feature?.approvalLabel ?? "Approval needed";
+      const text = waiting && approvalText ? approvalText : feature?.label ?? "";
+      const base = feature?.label || "Jump to latest";
+      element.setAttribute("aria-label", waiting
+        ? `${approvalText || "Approval needed"} below. ${base}`
+        : `${base}${count > 0 ? ` (${count} new)` : ""}${active && visible ? " (response streaming below)" : ""}`);
       element.title = text;
       element.setAttribute("data-persona-scroll-to-bottom-has-label", String(Boolean(text)));
+      if (waiting) element.setAttribute("data-persona-scroll-to-bottom-approval", "");
+      else element.removeAttribute("data-persona-scroll-to-bottom-approval");
       label.textContent = text;
       label.style.display = text ? "" : "none";
-      badge.textContent = count > 0 ? String(count) : "";
-      badge.style.display = count > 0 ? "" : "none";
-      const nextState = { ...state, visible, hovered: visible && state.hovered, focused: visible && state.focused, activity: active && visible ? "generating-below" as const : "idle" as const };
+      const shownCount = waiting ? 0 : count;
+      badge.textContent = shownCount > 0 ? String(shownCount) : "";
+      badge.style.display = shownCount > 0 ? "" : "none";
+      const activity = waiting ? "approval-below" as const : active && visible ? "generating-below" as const : "idle" as const;
+      const nextState = { ...state, visible, hovered: visible && state.hovered, focused: visible && state.focused, activity };
       const changed = configChanged || stateChanged(nextState);
       state = nextState;
       updateRenderer(changed);
+      if (from) morph(from);
     },
     destroy() {
+      morphs.forEach((animation) => animation.cancel());
       dispose();
       lifetime.abort();
       media?.removeEventListener?.("change", motion);

package/src/components/user-message-collapse.ts

@@ -0,0 +1,117 @@
+import type { AgentWidgetConfig } from "../types";
+import { createNode } from "../utils/dom";
+
+/**
+ * Long user message collapse ("Show more" / "Show less").
+ *
+ * The default user bubble wraps its content (attachments, mention chips and
+ * text) in a clip region. ui.ts measures the region's real rendered height
+ * after each morph and decides whether it overflows; the bubble is then
+ * re-rendered from that state, so morphs and cached wrappers always agree
+ * with the live DOM. The full text stays in the DOM in every state (no nested
+ * scroller), so find-in-page, selection, copy and screen readers still reach it.
+ */
+
+/**
+ * Default collapsed height. A bubble line is ~22–24px (0.875rem at
+ * leading-relaxed/1.75), so 240px shows about ten lines: enough to recognise
+ * the message, while leaving most of a ~640px panel for the reply that
+ * anchor-top streams in beneath it.
+ */
+export const DEFAULT_USER_MESSAGE_COLLAPSE_MAX_HEIGHT = 240;
+
+/**
+ * Content within this many px (about two lines) of the limit stays expanded,
+ * so the toggle never hides just a line or two behind a button of its own size.
+ */
+export const USER_MESSAGE_COLLAPSE_SLACK = 48;
+
+/**
+ * - `fit`: not measured yet, or short enough; no toggle.
+ * - `live`: an interim voice transcript; expanded so the speaker can watch it.
+ * - `settling`: the transcript's first final render, still expanded; the
+ *   post-morph measurement settles it in the same pass, holding the viewport.
+ * - `collapsed` / `expanded`: overflowing, with the toggle.
+ */
+export type UserMessageCollapseState = "fit" | "live" | "settling" | "collapsed" | "expanded";
+
+export type UserMessageCollapseRender = {
+  state: UserMessageCollapseState;
+  maxHeight: number;
+  showMoreLabel: string;
+  showLessLabel: string;
+};
+
+export const USER_COLLAPSE_REGION_ATTR = "data-persona-user-collapse";
+export const USER_COLLAPSE_TOGGLE_ATTR = "data-persona-user-collapse-toggle";
+
+export const isUserMessageCollapseEnabled = (config: AgentWidgetConfig): boolean =>
+  config.features?.userMessageCollapse?.enabled === true;
+
+export const resolveUserMessageCollapseMaxHeight = (config: AgentWidgetConfig): number => {
+  const value = config.features?.userMessageCollapse?.maxHeight;
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? value
+    : DEFAULT_USER_MESSAGE_COLLAPSE_MAX_HEIGHT;
+};
+
+export const resolveUserMessageCollapseLabels = (
+  config: AgentWidgetConfig
+): Pick<UserMessageCollapseRender, "showMoreLabel" | "showLessLabel"> => ({
+  showMoreLabel: config.copy?.showMoreLabel?.trim() || "Show more",
+  showLessLabel: config.copy?.showLessLabel?.trim() || "Show less",
+});
+
+/** Whether a measured natural content height warrants collapsing. */
+export const userMessageOverflows = (naturalHeight: number, maxHeight: number): boolean =>
+  naturalHeight > maxHeight + USER_MESSAGE_COLLAPSE_SLACK;
+
+const regionId = (messageId: string) => `persona-user-collapse-${messageId}`;
+
+export const createUserCollapseRegion = (
+  messageId: string,
+  maxHeight: number
+): HTMLElement => {
+  const region = createNode("div", {
+    className: "persona-user-collapse-region",
+    attrs: { id: regionId(messageId), [USER_COLLAPSE_REGION_ATTR]: "fit" },
+  });
+  region.style.setProperty("--persona-user-collapse-max-height", `${maxHeight}px`);
+  return region;
+};
+
+/**
+ * Apply a state to a region and its sibling toggle. Used both while building a
+ * fresh bubble and to patch the live bubble in place on a toggle or a new
+ * measurement, so the toggle keeps its identity (and focus) across states.
+ */
+export const applyUserCollapseState = (
+  bubble: HTMLElement,
+  region: HTMLElement,
+  messageId: string,
+  render: UserMessageCollapseRender
+): void => {
+  const { state } = render;
+  region.setAttribute(USER_COLLAPSE_REGION_ATTR, state);
+  region.style.setProperty("--persona-user-collapse-max-height", `${render.maxHeight}px`);
+  let toggle = bubble.querySelector<HTMLButtonElement>(`button[${USER_COLLAPSE_TOGGLE_ATTR}]`);
+  if (state !== "collapsed" && state !== "expanded") {
+    toggle?.remove();
+    return;
+  }
+  if (!toggle) {
+    toggle = createNode("button", {
+      className: "persona-user-collapse-toggle",
+      attrs: {
+        type: "button",
+        id: `persona-user-collapse-toggle-${messageId}`,
+        [USER_COLLAPSE_TOGGLE_ATTR]: "",
+        "aria-controls": regionId(messageId),
+      },
+    }) as HTMLButtonElement;
+    region.after(toggle);
+  }
+  const expanded = state === "expanded";
+  toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
+  toggle.textContent = expanded ? render.showLessLabel : render.showMoreLabel;
+};

package/src/defaults.ts

@@ -266,6 +266,9 @@ export const DEFAULTS_V5: Partial<AgentWidgetConfig> = {
   features: {
     artifacts: { enabled: true },
     scrollToBottom: { streamingIndicator: "dots", transition: "fade", scrollBehavior: "smooth" },
+    // Long sent messages (pasted text, voice transcripts) would otherwise fill
+    // the viewport under the anchor-top pin and push the reply out of view.
+    userMessageCollapse: { enabled: true },
     toolCallDisplay: DEFAULT_TOOL_CALL_DISPLAY_V5,
     reasoningDisplay: DEFAULT_REASONING_DISPLAY_V5,
   },
@@ -382,6 +385,8 @@ export function mergeWithDefaults(
       const csa = config.features?.streamAnimation;
       const dau = defaults.features?.askUserQuestion;
       const cau = config.features?.askUserQuestion;
+      const duc = defaults.features?.userMessageCollapse;
+      const cuc = config.features?.userMessageCollapse;
       const dh = defaults.features?.history;
       const ch = config.features?.history;
       const mergedArtifacts =
@@ -459,6 +464,7 @@ export function mergeWithDefaults(
         ...(mergedStreamAnimation !== undefined ? { streamAnimation: mergedStreamAnimation } : {}),
         ...(mergedAskUserQuestion !== undefined ? { askUserQuestion: mergedAskUserQuestion } : {}),
         ...(mergedHistory !== undefined ? { history: mergedHistory } : {}),
+        ...(duc !== undefined || cuc !== undefined ? { userMessageCollapse: { ...duc, ...cuc } } : {}),
       };
     })(),
     suggestionChips: config.suggestionChips ?? defaults.suggestionChips,

package/src/generated/runtype-openapi-contract.ts

@@ -36,6 +36,12 @@ export type RuntypeExecutionStreamEvent = ({
   iterations?: number;
   kind: "agent" | "flow";
   outcome?: "completed" | "error" | "aborted";
+  output?: {
+  validation?: {
+  errored?: Array<string>;
+  failed?: Array<string>;
+};
+};
   seq: number;
   stepErrorCount?: number;
   stopReason?: string;
@@ -48,7 +54,12 @@ export type RuntypeExecutionStreamEvent = ({
   output: number;
 };
   totalTokensUsed?: number;
+  truncatedStepCount?: number;
   type: "execution_complete";
+  warnings?: Array<{
+  code: string;
+  message: string;
+}>;
 }) | ({
   blockReason?: string;
   code?: string;
@@ -216,6 +227,7 @@ export type RuntypeExecutionStreamEvent = ({
 };
   success?: boolean;
   tokensUsed?: number;
+  truncated?: boolean;
   type: "step_complete";
   unresolvedVariables?: Array<string>;
 }) | {
@@ -439,6 +451,7 @@ export type RuntypeExecutionStreamEvent = ({
   toolCallId: string;
   type: "tool_output_delta";
 } | {
+  completedAt?: string;
   error?: string;
   executionId: string;
   executionTime?: number;

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 {