@runtypelabs/persona 4.23.1 → 4.24.0

package/src/codegen.test.ts

@@ -66,6 +66,30 @@ describe("codegen subpath", () => {
     });
   });
 
+  it("preserves an authored v5 defaults opt-in in every output format", () => {
+    const futureConfig = { ...config, future: { v5Defaults: true } };
+    for (const format of [
+      "esm",
+      "script-installer",
+      "script-manual",
+      "script-advanced",
+      "react-component",
+      "react-advanced",
+    ] as const) {
+      const code = fromSubpath(futureConfig, format);
+      expect(code).toContain("v5Defaults");
+      expect(code).toContain("true");
+    }
+
+    const installer = fromSubpath(futureConfig, "script-installer");
+    const payload = JSON.parse(installer.match(/data-config='([^']*)'/)![1]);
+    expect(payload.future).toEqual({ v5Defaults: true });
+
+    expect(
+      fromSubpath({ ...config, future: { v5Defaults: false } }, "esm")
+    ).toContain("future: { v5Defaults: false }");
+  });
+
   describe("mount target option", () => {
     it("defaults to body when no target is given", () => {
       expect(fromSubpath(config, "react-component")).toContain("target: 'body'");

package/src/components/activity-row.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { activityDuration, createActivityLifecycle } from './activity-row';
+import { createToolBubble } from './tool-bubble';
+import { createReasoningBubble } from './reasoning-bubble';
+import type { AgentWidgetMessage } from '../types';
+const message = (status: 'pending' | 'running' | 'complete' = 'running', chunks: string[] = []): AgentWidgetMessage => ({ id: 'tool', role: 'assistant', content: '', createdAt: '2026-01-01', variant: 'tool', toolCall: { id: 'tool', name: 'Search', status, chunks, durationMs: 65000 } });
+afterEach(() => vi.useRealTimers());
+describe.each([false, true])('activity rows (V5 %s)', v5Defaults => {
+  it('defaults to the selected variant and supports explicit overrides', () => {
+    const config = { future: { v5Defaults } };
+    expect(createToolBubble(message(), config).classList.contains('persona-activity-row')).toBe(v5Defaults);
+    for (const variant of ['card', 'row'] as const) {
+      const node = createToolBubble(message('complete'), { ...config, features: { toolCallDisplay: { variant } } });
+      expect(node.classList.contains('persona-activity-row')).toBe(variant === 'row');
+      if (variant === 'row') { expect(node.textContent).toContain('Used Search'); expect(node.textContent).toContain('1m 5s'); }
+    }
+  });
+  it('resolves icon visibility and removes the icon slot on successful completion', () => {
+    for (const kind of ['tool', 'reasoning'] as const) {
+      for (const mode of [undefined, 'always', 'active', 'never'] as const) {
+        const key = kind === 'tool' ? 'toolCallDisplay' : 'reasoningDisplay';
+        const config = { future: { v5Defaults }, features: { [key]: { variant: 'row' as const, iconVisibility: mode } } };
+        const m = message('complete');
+        const node = kind === 'tool' ? createToolBubble(m, config) : createReasoningBubble({ ...m, toolCall: undefined, variant: 'reasoning', reasoning: { id: 'r', status: 'complete', chunks: ['Details'] } }, config);
+        expect(!!node.querySelector('.persona-activity-icon')).toBe((mode ?? (v5Defaults ? 'active' : 'always')) === 'always');
+        expect(node.querySelector('.persona-activity-chevron')).not.toBeNull();
+      }
+    }
+  });
+  it('keeps attention and active indicators unless explicitly disabled', () => {
+    for (const status of ['pending', 'running', 'complete'] as const) {
+      const m = message(status); if (status === 'complete') m.toolCall!.success = false;
+      for (const iconVisibility of ['active', 'never'] as const) {
+        const node = createToolBubble(m, { future: { v5Defaults }, features: { toolCallDisplay: { variant: 'row', iconVisibility } } });
+        expect(!!node.querySelector('.persona-activity-icon')).toBe(iconVisibility === 'active');
+      }
+    }
+  });
+  it('keeps custom content and exposes accessible row controls', () => {
+    const node = createToolBubble(message(), { future: { v5Defaults }, features: { toolCallDisplay: { variant: 'row' } }, toolCall: { renderCollapsedSummary: () => 'Custom summary' } });
+    expect(node.textContent?.replace(/\u00a0/g, ' ')).toContain('Custom summary');
+    const button = node.querySelector('button')!;
+    expect(button.getAttribute('aria-expanded')).toBe('false');
+    expect(button.getAttribute('aria-controls')).toBe(node.querySelector('.persona-activity-body')?.id);
+    expect(Array.from(button.children).map(el => el.className)).toEqual(expect.arrayContaining(['persona-activity-icon']));
+    expect(button.children[1].classList.contains('persona-activity-label')).toBe(true);
+    expect(button.children[2].classList.contains('persona-activity-chevron')).toBe(true);
+  });
+  it('formats completed reasoning and retains card override', () => {
+    const m: AgentWidgetMessage = { ...message(), variant: 'reasoning', toolCall: undefined, reasoning: { id: 'r', status: 'complete', chunks: ['Details'], durationMs: 100 } };
+    const node = createReasoningBubble(m, { future: { v5Defaults }, features: { reasoningDisplay: { variant: 'row' } } });
+    expect(node.textContent).toContain('Thought for a moment');
+  });
+});
+it.each([['pending', 'pending'], ['running', 'running'], ['complete', 'done']] as const)('maps %s status to %s', (status, expected) => {
+  const node = createToolBubble(message(status), { features: { toolCallDisplay: { variant: 'row' } } });
+  expect(node.dataset.activityState).toBe(expected);
+  expect(node.querySelector('.persona-activity-icon svg')).not.toBeNull();
+});
+it('maps failure, denied, and approval-waiting icons', () => {
+  const m = message('complete'); m.toolCall!.success = false;
+  expect(createToolBubble(m, { future: { v5Defaults: true } }).dataset.activityState).toBe('error');
+  for (const status of ['denied', 'pending'] as const) {
+    m.approval = { id: 'a', status, agentId: 'a', executionId: 'e', toolName: 'Search', description: '' };
+    expect(createToolBubble(m, { future: { v5Defaults: true } }).dataset.activityState).toBe(status === 'denied' ? 'denied' : 'awaiting-approval');
+  }
+});
+it('formats short and multi-minute durations', () => {
+  expect([undefined, 200, 12000, 65000].map(activityDuration)).toEqual(['a moment', 'a moment', '12s', '1m 5s']);
+});
+describe('activity lifecycle', () => {
+  it('waits for a token and collapses exactly once after completion', () => {
+    vi.useFakeTimers(); const changed = vi.fn(); const lifecycle = createActivityLifecycle(changed); const expanded = new Set<string>();
+    lifecycle.observe(message(), 'tool', expanded); expect(expanded.size).toBe(0);
+    lifecycle.observe(message('running', ['token']), 'tool', expanded); expect(expanded.has('tool')).toBe(true);
+    lifecycle.observe(message('complete', ['token']), 'tool', expanded);
+    vi.advanceTimersByTime(999); expect(expanded.has('tool')).toBe(true);
+    vi.advanceTimersByTime(1); expect(expanded.size).toBe(0); expect(changed).toHaveBeenCalledTimes(1);
+    expanded.add('tool'); lifecycle.observe(message('complete', ['token']), 'tool', expanded); vi.advanceTimersByTime(2000); expect(expanded.has('tool')).toBe(true);
+  });
+  it('manual control cancels automatic collapse and expansion', () => {
+    vi.useFakeTimers(); const changed = vi.fn(); const lifecycle = createActivityLifecycle(changed); const expanded = new Set<string>();
+    lifecycle.observe(message('running', ['token']), 'tool', expanded);
+    lifecycle.observe(message('complete', ['token']), 'tool', expanded); lifecycle.manual('tool');
+    vi.advanceTimersByTime(2000); expect(expanded.has('tool')).toBe(true); expect(changed).not.toHaveBeenCalled();
+    lifecycle.clear(); expanded.clear(); lifecycle.manual('tool'); lifecycle.observe(message('running', ['token']), 'tool', expanded); expect(expanded.size).toBe(0);
+  });
+  it('supports disabling automatics and cleans pending timers on clear/prune', () => {
+    vi.useFakeTimers(); const changed = vi.fn(); const lifecycle = createActivityLifecycle(changed); const expanded = new Set<string>();
+    lifecycle.observe(message('running', ['token']), 'tool', expanded, { autoExpand: false, autoCollapseDelay: false });
+    lifecycle.observe(message('complete', ['token']), 'tool', expanded, { autoCollapseDelay: false });
+    expect(expanded.size).toBe(0); expect(vi.getTimerCount()).toBe(0);
+    for (const cleanup of ['clear', 'prune'] as const) {
+      lifecycle.clear(); lifecycle.observe(message('running', ['token']), 'tool', expanded); lifecycle.observe(message('complete', ['token']), 'tool', expanded);
+      if (cleanup === 'clear') lifecycle.clear(); else lifecycle.prune(new Set());
+      vi.advanceTimersByTime(2000); expect(changed).not.toHaveBeenCalled();
+    }
+  });
+});

package/src/components/activity-row.ts

@@ -0,0 +1,136 @@
+import { Circle, Clock } from "lucide";
+import { renderIconNode } from "../utils/icon-node";
+import type { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+import { DEFAULT_TOOL_CALL_DISPLAY, DEFAULT_REASONING_DISPLAY, DEFAULTS_V5 } from "../defaults";
+import { createElement } from "../utils/dom";
+import { renderLucideIcon } from "../utils/icons";
+import { appendHeaderToggle } from "./expandable-bubble";
+
+export type ActivityKind = "tool" | "reasoning";
+
+/** Standalone builders and the full UI use the same versioned defaults. */
+export function activityDisplay(config: AgentWidgetConfig | undefined, kind: ActivityKind): AgentWidgetConfig {
+  const key = kind === "tool" ? "toolCallDisplay" : "reasoningDisplay";
+  return { ...config, features: { ...config?.features, [key]: {
+    ...(kind === "tool" ? DEFAULT_TOOL_CALL_DISPLAY : DEFAULT_REASONING_DISPLAY),
+    ...(config?.future?.v5Defaults === true ? DEFAULTS_V5.features?.[key] : {}),
+    ...config?.features?.[key],
+  } } };
+}
+
+export function activityVariant(config: AgentWidgetConfig | undefined, kind: ActivityKind): "card" | "row" {
+  const key = kind === "tool" ? "toolCallDisplay" : "reasoningDisplay";
+  return config?.features?.[key]?.variant ?? (config?.future?.v5Defaults ? "row" : "card");
+}
+
+export function activityDuration(ms: number | undefined): string {
+  const seconds = Math.max(0, Math.floor((ms ?? 0) / 1000));
+  if (seconds < 1) return "a moment";
+  return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}
+
+/** Reuses card content/render hooks while replacing only its visual chrome. */
+export function applyActivityRow(bubble: HTMLElement, message: AgentWidgetMessage, config: AgentWidgetConfig, kind: ActivityKind): HTMLElement {
+  if (activityVariant(config, kind) !== "row") return bubble;
+  bubble.className = `persona-message-bubble persona-${kind}-bubble persona-activity-row`;
+  bubble.dataset.activityKind = kind;
+  if (kind === "tool" && config.toolCall?.shadow === undefined) bubble.style.boxShadow = "var(--persona-tool-bubble-shadow, none)";
+  const header = bubble.querySelector<HTMLButtonElement>(":scope > button");
+  if (!header) return bubble;
+  header.className = "persona-activity-header";
+  const data = kind === "tool" ? message.toolCall : message.reasoning;
+  const active = data?.status !== "complete";
+  const approval = message.approval?.status ?? message.toolCall?.approvalStatus;
+  const state = approval === "denied" ? "denied" : approval === "pending" ? "awaiting-approval"
+    : message.toolCall?.success === false ? "error" : !active ? "done"
+    : data?.status === "pending" ? "pending" : "running";
+  bubble.dataset.activityState = state;
+  const icon = createElement("span", "persona-activity-icon");
+  icon.dataset.activityIcon = state;
+  const names = { pending: "circle", running: "loader-circle", done: "check", error: "x", denied: "x", "awaiting-approval": "clock" };
+  const customIcon = kind === "reasoning" ? config.features?.reasoningDisplay?.iconName : undefined;
+  const glyph = customIcon ? renderLucideIcon(customIcon, 16, "currentColor", 2)
+    : state === "pending" ? renderIconNode(Circle, 16, "currentColor", 2)
+    : state === "awaiting-approval" ? renderIconNode(Clock, 16, "currentColor", 2)
+    : renderLucideIcon(names[state], 16, "currentColor", 2);
+  if (glyph) icon.appendChild(glyph);
+  header.querySelector(".persona-reasoning-header-icon")?.remove();
+  const displayKey = kind === "tool" ? "toolCallDisplay" : "reasoningDisplay";
+  const visibility = config.features?.[displayKey]?.iconVisibility ??
+    (config.future?.v5Defaults ? "active" : "always");
+  if (visibility === "always" || (visibility === "active" && state !== "done")) header.prepend(icon);
+  if (kind === "tool" && data) {
+    const duration = createElement("span", "persona-activity-duration");
+    if (active && data.startedAt) duration.setAttribute("data-tool-elapsed", String(data.startedAt));
+    const elapsed = (kind === "tool" ? message.toolCall?.duration : undefined) ?? data.durationMs ?? (data.completedAt !== undefined && data.startedAt !== undefined ? data.completedAt - data.startedAt : undefined);
+    duration.textContent = elapsed === undefined ? "" : activityDuration(elapsed);
+    header.appendChild(duration);
+  }
+  const label = header.querySelector<HTMLElement>(":scope > div:not(.persona-ml-auto)");
+  label?.classList.add("persona-activity-label");
+  const meta = header.querySelector<HTMLElement>(".persona-ml-auto");
+  meta?.classList.add("persona-activity-chevron");
+  const body = bubble.querySelector<HTMLElement>(":scope > .persona-border-t");
+  body?.classList.add("persona-activity-body");
+  if (body) { body.id = `activity-details-${message.id}`; header.setAttribute("aria-controls", body.id); }
+  return bubble;
+}
+
+/** Per-widget lifecycle: one open and one delayed close; user intent is sticky. */
+export function createActivityLifecycle(onCollapse: (id: string, kind: ActivityKind) => void) {
+  const seen = new Set<string>();
+  const manual = new Set<string>();
+  const finished = new Set<string>();
+  const timers = new Map<string, ReturnType<typeof setTimeout>>();
+  const cancel = (id: string) => { clearTimeout(timers.get(id)); timers.delete(id); };
+  return {
+    observe(message: AgentWidgetMessage, kind: ActivityKind, expanded: Set<string>, options: { autoExpand?: boolean; autoCollapseDelay?: number | false } = {}) {
+      const data = kind === "tool" ? message.toolCall : message.reasoning;
+      if (!data || manual.has(message.id)) return;
+      if (!seen.has(message.id) && data.status !== "complete" && data.chunks?.some(Boolean)) {
+        seen.add(message.id);
+        if (options.autoExpand !== false) expanded.add(message.id);
+      }
+      if (seen.has(message.id) && data.status === "complete" && !finished.has(message.id)) {
+        finished.add(message.id);
+        if (options.autoCollapseDelay === false) return;
+        timers.set(message.id, setTimeout(() => {
+          timers.delete(message.id);
+          expanded.delete(message.id);
+          onCollapse(message.id, kind);
+        }, options.autoCollapseDelay ?? 1000));
+      }
+    },
+    manual(id: string) { manual.add(id); cancel(id); },
+    prune(ids: Set<string>) {
+      for (const id of new Set([...seen, ...manual, ...finished])) {
+        if (!ids.has(id)) { cancel(id); seen.delete(id); manual.delete(id); finished.delete(id); }
+      }
+    },
+    clear() { for (const id of timers.keys()) cancel(id); seen.clear(); manual.clear(); finished.clear(); },
+  };
+}
+
+/** A collapsible group uses the same accessible row and expansion contract. */
+export function createActivityGroup(message: AgentWidgetMessage, config: AgentWidgetConfig, expanded: boolean, label: string | HTMLElement): { bubble: HTMLElement; body: HTMLElement } {
+  const bubble = createElement("div", "");
+  bubble.id = `bubble-${message.id}`;
+  bubble.dataset.messageId = message.id;
+  const header = createElement("button", "") as HTMLButtonElement;
+  header.type = "button";
+  header.dataset.expandHeader = "true";
+  header.dataset.bubbleType = "tool";
+  header.setAttribute("aria-expanded", String(expanded));
+  const copy = createElement("div", "");
+  if (typeof label === "string") copy.textContent = label; else copy.appendChild(label);
+  appendHeaderToggle(header, copy, { expandable: true, expanded, iconColor: config.toolCall?.toggleTextColor || config.toolCall?.headerTextColor || "currentColor", metaGap: true });
+  const body = createElement("div", "persona-border-t");
+  body.id = `activity-details-${message.id}`;
+  body.style.display = expanded ? "" : "none";
+  header.setAttribute("aria-controls", body.id);
+  bubble.append(header, body);
+  applyActivityRow(bubble, message, { ...config, features: { ...config.features, toolCallDisplay: { ...config.features?.toolCallDisplay, variant: "row" } } }, "tool");
+  bubble.dataset.personaToolGroup = "true";
+  if (config.features?.toolCallDisplay?.loadingAnimation === "shimmer") bubble.dataset.activityGroupShimmer = "true";
+  return { bubble, body };
+}

package/src/components/approval-actions.test.ts

@@ -1,8 +1,7 @@
 // @vitest-environment jsdom
 
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createBuiltInApprovalPlugin } from "./approval-actions";
-import { approvalDetailsExpansionState } from "./approval-bubble";
 import type {
   AgentWidgetApproval,
   AgentWidgetConfig,
@@ -43,9 +42,10 @@ const makeMessage = (
 // Each widget owns its own plugin instance + teardown (state is per-instance).
 // Track teardowns so afterEach can release any leftover document listeners.
 let teardowns: Array<() => void> = [];
+let expansionState: Map<string, boolean>;
 
 const makePlugin = (): { plugin: AgentWidgetPlugin; teardown: () => void } => {
-  const handle = createBuiltInApprovalPlugin();
+  const handle = createBuiltInApprovalPlugin(expansionState);
   teardowns.push(handle.teardown);
   return handle;
 };
@@ -81,10 +81,13 @@ const click = (el: Element | null | undefined): void => {
 afterEach(() => {
   teardowns.forEach((t) => t());
   teardowns = [];
-  approvalDetailsExpansionState.clear();
   document.body.innerHTML = "";
 });
 
+beforeEach(() => {
+  expansionState = new Map<string, boolean>();
+});
+
 describe("built-in approval — flag off (default)", () => {
   it("renders a single Allow + Deny, no split control", () => {
     const { el } = render();
@@ -226,7 +229,7 @@ describe("built-in approval — parameters disclosure", () => {
     expect(pre?.hidden).toBe(true);
     click(el?.querySelector(".persona-approval-head"));
     expect(pre?.hidden).toBe(false);
-    expect(approvalDetailsExpansionState.get("msg-1")).toBe(true);
+    expect(expansionState.get("msg-1")).toBe(true);
   });
 
   it("detailsDisplay:'expanded' shows params up front", () => {

package/src/components/approval-actions.ts

@@ -34,7 +34,7 @@ import type {
   AgentWidgetApprovalConfig,
 } from "../types";
 import type { AgentWidgetPlugin } from "../plugins/types";
-import { humanizeToolName, approvalDetailsExpansionState } from "./approval-bubble";
+import { humanizeToolName } from "./approval-bubble";
 
 type Approval = NonNullable<AgentWidgetMessage["approval"]>;
 type Decide = (options?: { remember?: boolean }) => void;
@@ -103,10 +103,11 @@ const resolveApprovalConfig = (
 
 const isDetailsExpanded = (
   messageId: string,
+  expansionState: Map<string, boolean>,
   approvalConfig?: AgentWidgetApprovalConfig
 ): boolean => {
   const mode = approvalConfig?.detailsDisplay ?? "collapsed";
-  return approvalDetailsExpansionState.get(messageId) ?? mode === "expanded";
+  return expansionState.get(messageId) ?? mode === "expanded";
 };
 
 const kbd = (label: string): HTMLElement => {
@@ -173,6 +174,7 @@ const buildResolvedTrace = (approval: Approval): HTMLElement => {
 
 const buildPending = (
   state: InstanceState,
+  expansionState: Map<string, boolean>,
   message: AgentWidgetMessage,
   approval: Approval,
   approvalConfig: AgentWidgetApprovalConfig | undefined,
@@ -199,7 +201,7 @@ const buildPending = (
   const hasDescription = Boolean(approval.description) && detailsMode !== "hidden";
   const hasParams = approval.parameters != null && detailsMode !== "hidden";
   const hasDetails = hasDescription || hasParams;
-  const expanded = hasDetails && isDetailsExpanded(message.id, approvalConfig);
+  const expanded = hasDetails && isDetailsExpanded(message.id, expansionState, approvalConfig);
 
   // The card uses the whole header as the disclosure toggle (chevron-only, no
   // separate text button), but the legacy `showDetailsLabel`/`hideDetailsLabel`
@@ -351,7 +353,7 @@ const buildPending = (
         pre.hidden = !willOpen;
         head.setAttribute("aria-expanded", willOpen ? "true" : "false");
         head.setAttribute("aria-label", willOpen ? hideDetailsLabel : showDetailsLabel);
-        approvalDetailsExpansionState.set(message.id, willOpen);
+        expansionState.set(message.id, willOpen);
       }
       return;
     }
@@ -389,7 +391,9 @@ const buildPending = (
  * callbacks — both close over the SAME per-instance state, so destroying one
  * widget never disturbs another widget's open approvals on the same page.
  */
-export const createBuiltInApprovalPlugin = (): {
+export const createBuiltInApprovalPlugin = (
+  expansionState = new Map<string, boolean>()
+): {
   plugin: AgentWidgetPlugin;
   teardown: () => void;
 } => {
@@ -419,7 +423,16 @@ export const createBuiltInApprovalPlugin = (): {
       // re-render of an older card doesn't reorder it ahead of a newer one.
       detachMessage(state, message.id);
       const enableAlways = approvalConfig?.enableAlwaysAllow === true;
-      const card = buildPending(state, message, approval, approvalConfig, approve, deny, enableAlways);
+      const card = buildPending(
+        state,
+        expansionState,
+        message,
+        approval,
+        approvalConfig,
+        approve,
+        deny,
+        enableAlways
+      );
 
       if (enableAlways) {
         if (!state.pendingOrder.includes(message.id)) state.pendingOrder.push(message.id);

package/src/components/approval-bubble.test.ts

@@ -2,7 +2,6 @@
 
 import { beforeEach, describe, expect, it } from "vitest";
 import {
-  approvalDetailsExpansionState,
   createApprovalBubble,
   humanizeToolName,
   updateApprovalDetailsUI,
@@ -11,6 +10,7 @@ import {
   getWebMcpToolDisplayTitle,
   recordWebMcpToolDisplayTitles,
 } from "../webmcp-bridge";
+import { createTheme, themeToCssVariables } from "../utils/tokens";
 import type {
   AgentWidgetApproval,
   AgentWidgetConfig,
@@ -74,6 +74,51 @@ describe("createApprovalBubble shadow", () => {
   });
 });
 
+describe("createApprovalBubble resolved-status colors", () => {
+  const colorFor = (status: "approved" | "denied" | "timeout") =>
+    createApprovalBubble(makeMessage({ status }))
+      .querySelector("[data-approval-icon] svg")
+      ?.getAttribute("stroke") ?? "";
+
+  const resolveCssVariable = (
+    value: string,
+    variables: Record<string, string>
+  ): string | undefined => {
+    const match = /^var\((--[\w-]+)(?:,\s*(.+))?\)$/.exec(value.trim());
+    if (!match) return value;
+    return variables[match[1]] ??
+      (match[2] ? resolveCssVariable(match[2], variables) : undefined);
+  };
+
+  it("resolves each legacy feedback color through emitted palette tokens", () => {
+    const variables = themeToCssVariables(createTheme());
+
+    expect(resolveCssVariable(colorFor("approved"), variables)).toBe("#16a34a");
+    expect(resolveCssVariable(colorFor("denied"), variables)).toBe("#dc2626");
+    expect(resolveCssVariable(colorFor("timeout"), variables)).toBe("#ca8a04");
+  });
+
+  it("keeps host feedback token overrides ahead of palette fallbacks", () => {
+    const variables = {
+      ...themeToCssVariables(createTheme()),
+      "--persona-feedback-error": "rebeccapurple",
+    };
+
+    expect(resolveCssVariable(colorFor("denied"), variables)).toBe(
+      "rebeccapurple"
+    );
+  });
+
+  it("gives the pending Deny label and icon a color emitted by the default theme", () => {
+    const bubble = createApprovalBubble(makeMessage());
+    const deny = bubble.querySelector<HTMLButtonElement>('[data-approval-action="deny"]')!;
+    const variables = themeToCssVariables(createTheme());
+    expect(resolveCssVariable(deny.style.color, variables)).toBe("#dc2626");
+    expect(resolveCssVariable(deny.querySelector("svg")!.getAttribute("stroke")!, variables))
+      .toBe("#dc2626");
+  });
+});
+
 const TOOL_DESCRIPTION =
   "Add products to the shopping cart. IMPORTANT: If a product has required options you MUST include the variantId.";
 
@@ -95,12 +140,14 @@ const getDetails = (bubble: HTMLElement) =>
   bubble.querySelector("[data-approval-details]") as HTMLElement | null;
 
 beforeEach(() => {
-  approvalDetailsExpansionState.clear();
+  expansionState = new Map<string, boolean>();
   // Reset display titles recorded by a prior test (the map is rebuilt from
   // each full snapshot, so recording an empty snapshot clears it).
   recordWebMcpToolDisplayTitles([]);
 });
 
+let expansionState: Map<string, boolean>;
+
 describe("humanizeToolName", () => {
   it("converts snake_case to a sentence", () => {
     expect(humanizeToolName("add_to_cart")).toBe("Add to cart");
@@ -157,8 +204,8 @@ describe("createApprovalBubble summary and details", () => {
   });
 
   it("respects a per-message expansion override from prior toggling", () => {
-    approvalDetailsExpansionState.set("msg-1", true);
-    const bubble = createApprovalBubble(makeDetailedMessage());
+    expansionState.set("msg-1", true);
+    const bubble = createApprovalBubble(makeDetailedMessage(), undefined, expansionState);
     expect(getToggle(bubble)?.getAttribute("aria-expanded")).toBe("true");
     expect(getDetails(bubble)?.style.display).toBe("");
   });
@@ -204,7 +251,7 @@ describe("createApprovalBubble summary and details", () => {
     recordWebMcpToolDisplayTitles([
       { name: "add_to_cart", description: "", title: "Add to Cart" },
     ]);
-    const bubble = createApprovalBubble(makeDetailedMessage());
+    const bubble = createApprovalBubble(makeDetailedMessage(), undefined, expansionState);
     expect(getSummary(bubble)?.textContent).toBe(
       "The assistant wants to use “Add to Cart”."
     );
@@ -265,14 +312,14 @@ describe("updateApprovalDetailsUI", () => {
     const bubble = createApprovalBubble(makeDetailedMessage());
     expect(getDetails(bubble)?.style.display).toBe("none");
 
-    approvalDetailsExpansionState.set("msg-1", true);
-    updateApprovalDetailsUI("msg-1", bubble);
+    expansionState.set("msg-1", true);
+    updateApprovalDetailsUI("msg-1", bubble, undefined, expansionState);
     expect(getDetails(bubble)?.style.display).toBe("");
     expect(getToggle(bubble)?.getAttribute("aria-expanded")).toBe("true");
     expect(getToggle(bubble)?.textContent).toContain("Hide details");
 
-    approvalDetailsExpansionState.set("msg-1", false);
-    updateApprovalDetailsUI("msg-1", bubble);
+    expansionState.set("msg-1", false);
+    updateApprovalDetailsUI("msg-1", bubble, undefined, expansionState);
     expect(getDetails(bubble)?.style.display).toBe("none");
     expect(getToggle(bubble)?.textContent).toContain("Show details");
   });