@runtypelabs/persona 4.23.2 → 4.25.0

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

package/src/components/approval-bubble.ts

@@ -9,14 +9,6 @@ import { ChevronDown, ChevronUp, ShieldAlert, ShieldCheck, ShieldX } from "lucid
 import { renderIconNode } from "../utils/icon-node";
 import { WEBMCP_TOOL_PREFIX } from "../webmcp-bridge";
 
-/**
- * Per-message expanded/collapsed state for the technical-details section.
- * Absent means "use the config default" (`approval.detailsDisplay`). Lives at
- * module scope so the choice survives idiomorph re-renders, mirroring
- * `toolExpansionState` in tool-bubble.ts.
- */
-export const approvalDetailsExpansionState = new Map<string, boolean>();
-
 /**
  * Turn a wire tool name into a user-facing label: strips the `webmcp:`
  * prefix and splits snake_case / kebab-case / camelCase into a sentence
@@ -41,10 +33,11 @@ const resolveApprovalConfig = (config?: AgentWidgetConfig) =>
 
 const isDetailsExpanded = (
   messageId: string,
+  expansionState: Map<string, boolean>,
   config?: AgentWidgetConfig
 ): boolean => {
   const detailsMode = resolveApprovalConfig(config)?.detailsDisplay ?? "collapsed";
-  return approvalDetailsExpansionState.get(messageId) ?? detailsMode === "expanded";
+  return expansionState.get(messageId) ?? detailsMode === "expanded";
 };
 
 const applyDetailsToggleState = (
@@ -72,18 +65,19 @@ const applyDetailsToggleState = (
 
 /**
  * Sync the technical-details section (toggle label/chevron + visibility) with
- * `approvalDetailsExpansionState`. Called from the ui.ts expansion event
+ * the widget instance's expansion state. Called from the ui.ts expansion event
  * delegation after a toggle click.
  */
 export const updateApprovalDetailsUI = (
   messageId: string,
   bubble: HTMLElement,
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  expansionState = new Map<string, boolean>()
 ): void => {
   const toggle = bubble.querySelector('button[data-bubble-type="approval"]') as HTMLElement | null;
   const details = bubble.querySelector("[data-approval-details]") as HTMLElement | null;
   if (!toggle || !details) return;
-  const expanded = isDetailsExpanded(messageId, config);
+  const expanded = isDetailsExpanded(messageId, expansionState, config);
   applyDetailsToggleState(toggle, expanded, config);
   details.style.display = expanded ? "" : "none";
 };
@@ -112,16 +106,16 @@ export const updateApprovalBubbleUI = (
     // Update badge color
     if (approval.status === "approved") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
-      statusBadge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-success-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-success-700)";
     } else if (approval.status === "denied") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
-      statusBadge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-error-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-error-700)";
     } else if (approval.status === "timeout") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
-      statusBadge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-warning-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-warning-700)";
     }
     statusBadge.setAttribute("data-approval-status", approval.status);
   }
@@ -133,9 +127,9 @@ export const updateApprovalBubbleUI = (
     const iconData = approval.status === "denied" ? ShieldX
       : approval.status === "timeout" ? ShieldAlert
       : ShieldCheck;
-    const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
-      : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
-      : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
+    const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, var(--persona-palette-colors-success-600))"
+      : approval.status === "denied" ? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))"
+      : approval.status === "timeout" ? "var(--persona-feedback-warning, var(--persona-palette-colors-warning-600))"
       : (approvalConfig?.titleColor ?? "currentColor");
     const icon = renderIconNode(iconData, 20, iconColor, 2);
     if (icon) {
@@ -155,7 +149,8 @@ export const updateApprovalBubbleUI = (
  */
 export const createApprovalBubble = (
   message: AgentWidgetMessage,
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  expansionState = new Map<string, boolean>()
 ): HTMLElement => {
   const approval = message.approval;
   const approvalConfig = config?.approval !== false ? config?.approval : undefined;
@@ -178,12 +173,12 @@ export const createApprovalBubble = (
   bubble.setAttribute("data-message-id", message.id);
 
   // Apply styling: use semantic tokens with config overrides
-  bubble.style.backgroundColor = approvalConfig?.backgroundColor ?? "var(--persona-approval-bg, #fefce8)";
-  bubble.style.borderColor = approvalConfig?.borderColor ?? "var(--persona-approval-border, #fef08a)";
+  bubble.style.backgroundColor = approvalConfig?.backgroundColor ?? "var(--persona-approval-bg)";
+  bubble.style.borderColor = approvalConfig?.borderColor ?? "var(--persona-approval-border)";
   bubble.style.boxShadow =
     approvalConfig?.shadow !== undefined
       ? (approvalConfig.shadow.trim() === "" ? "none" : approvalConfig.shadow)
-      : "var(--persona-approval-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))";
+      : "var(--persona-approval-shadow)";
 
   if (!approval) {
     return bubble;
@@ -201,9 +196,9 @@ export const createApprovalBubble = (
   const iconData = approval.status === "denied" ? ShieldX
     : approval.status === "timeout" ? ShieldAlert
     : ShieldCheck;
-  const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
-    : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
-    : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
+  const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, var(--persona-palette-colors-success-600))"
+    : approval.status === "denied" ? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))"
+    : approval.status === "timeout" ? "var(--persona-feedback-warning, var(--persona-palette-colors-warning-600))"
     : (approvalConfig?.titleColor ?? "currentColor");
   const icon = renderIconNode(iconData, 20, iconColor, 2);
   if (icon) {
@@ -227,16 +222,16 @@ export const createApprovalBubble = (
     const badge = createElement("span", "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium");
     badge.setAttribute("data-approval-status", approval.status);
     if (approval.status === "approved") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
-      badge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-success-100)";
+      badge.style.color = "var(--persona-palette-colors-success-700)";
       badge.textContent = "Approved";
     } else if (approval.status === "denied") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
-      badge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-error-100)";
+      badge.style.color = "var(--persona-palette-colors-error-700)";
       badge.textContent = "Denied";
     } else if (approval.status === "timeout") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
-      badge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-warning-100)";
+      badge.style.color = "var(--persona-palette-colors-warning-700)";
       badge.textContent = "Timeout";
     }
     titleRow.appendChild(badge);
@@ -303,7 +298,7 @@ export const createApprovalBubble = (
   const showDescriptionInDetails = Boolean(approval.description) && !summaryFallsBackToDescription;
   const hasDetails = showDescriptionInDetails || Boolean(approval.parameters);
   if (detailsMode !== "hidden" && hasDetails) {
-    const expanded = isDetailsExpanded(message.id, config);
+    const expanded = isDetailsExpanded(message.id, expansionState, config);
 
     const toggle = createElement(
       "button",
@@ -364,10 +359,10 @@ export const createApprovalBubble = (
     // Approve button
     const approveBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-border-none persona-cursor-pointer") as HTMLButtonElement;
     approveBtn.type = "button";
-    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "var(--persona-approval-approve-bg, #22c55e)";
-    approveBtn.style.color = approvalConfig?.approveButtonTextColor ?? "#ffffff";
+    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "var(--persona-approval-approve-bg)";
+    approveBtn.style.color = approvalConfig?.approveButtonTextColor ?? "var(--persona-button-primary-fg)";
     approveBtn.setAttribute("data-approval-action", "approve");
-    const approveIcon = renderIconNode(ShieldCheck, 14, approvalConfig?.approveButtonTextColor ?? "#ffffff", 2);
+    const approveIcon = renderIconNode(ShieldCheck, 14, approvalConfig?.approveButtonTextColor ?? "var(--persona-button-primary-fg)", 2);
     if (approveIcon) {
       approveIcon.style.marginRight = "4px";
       approveBtn.appendChild(approveIcon);
@@ -379,10 +374,10 @@ export const createApprovalBubble = (
     const denyBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-cursor-pointer") as HTMLButtonElement;
     denyBtn.type = "button";
     denyBtn.style.backgroundColor = approvalConfig?.denyButtonColor ?? "transparent";
-    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)";
-    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ? approvalConfig.denyButtonTextColor : "var(--persona-palette-colors-error-200, #fca5a5)"}`;
+    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))";
+    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ? approvalConfig.denyButtonTextColor : "var(--persona-palette-colors-error-200)"}`;
     denyBtn.setAttribute("data-approval-action", "deny");
-    const denyIcon = renderIconNode(ShieldX, 14, approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)", 2);
+    const denyIcon = renderIconNode(ShieldX, 14, approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))", 2);
     if (denyIcon) {
       denyIcon.style.marginRight = "4px";
       denyBtn.appendChild(denyIcon);

package/src/components/composer-builder.ts

@@ -75,7 +75,6 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     className:
       "persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-persona-border persona-bg-persona-input-background persona-px-4 persona-py-3",
     attrs: { "data-persona-composer-form": "" },
-    style: { outline: "none" },
   });
 
   const { textarea, attachAutoResize } = createComposerTextarea(config);
@@ -144,7 +143,11 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     }
   });
 
-  footer.append(suggestions, composerForm, statusText);
+  if (config?.statusIndicator?.mode === "transient") {
+    footer.append(suggestions, statusText, composerForm);
+  } else {
+    footer.append(suggestions, composerForm, statusText);
+  }
 
   return {
     footer,

package/src/components/composer-parts.ts

@@ -1,3 +1,4 @@
+import { applyStatusIndicatorState } from "../utils/status-indicator";
 import { createElement, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
@@ -293,6 +294,14 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       sendIcon = renderLucideIcon(iconName, iconSize, iconColor, iconStroke);
     }
     stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, iconStroke);
+    // Keep explicit per-control sizing authoritative; otherwise use the theme.
+    if (!sendButtonConfig.iconSize) {
+      for (const icon of [sendIcon, stopIcon]) {
+        if (!icon) continue;
+        icon.style.width = `var(--persona-components-composer-sendIconSize, ${iconSize}px)`;
+        icon.style.height = `var(--persona-components-composer-sendIconSize, ${iconSize}px)`;
+      }
+    }
 
     if (sendIcon && stopIcon) {
       // One grid cell, both glyphs in it. `data-mode` on the stack decides
@@ -538,8 +547,7 @@ export const createStatusText = (config?: AgentWidgetConfig): HTMLElement => {
   );
   statusText.setAttribute("data-persona-composer-status", "");
 
-  const isVisible = statusConfig.visible ?? true;
-  statusText.style.display = isVisible ? "" : "none";
+  applyStatusIndicatorState(statusText, statusConfig, "idle");
   const idleLabel = statusConfig.idleText ?? "Online";
   if (statusConfig.idleLink) {
     const link = createElement("a") as HTMLAnchorElement;

package/src/components/header-builder.test.ts

@@ -1,9 +1,41 @@
 // @vitest-environment jsdom
 
 import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_HEADER_ICON_SIZE,
+  DEFAULT_LAUNCHER_CONFIG,
+} from "../defaults";
 import { buildHeader } from "./header-builder";
 
 describe("buildHeader tooltips", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "uses the standard padding token under v5Defaults=%s",
+    (future) => {
+      const { header } = buildHeader({ config: { future } as any });
+      expect(header.style.padding).toBe(
+        "var(--persona-components-header-padding, 20px 24px)"
+      );
+    }
+  );
+  it.each([false, true])("preserves legacy numeric glyph sizing for non-pixel icon boxes (v5=%s)", (v5Defaults) => {
+    const { iconHolder } = buildHeader({ config: {
+      apiUrl: "/dispatch", future: { v5Defaults },
+      launcher: { headerIconSize: "2rem", headerIconName: "bot" },
+    } });
+    const glyph = iconHolder.querySelector("svg")!;
+    expect(iconHolder.style.width).toBe("2rem");
+    expect(glyph.getAttribute("width")).toBe("1.2");
+    expect(glyph.style.width).toBe("calc(2px * var(--persona-components-header-iconScale, 0.6))");
+  });
+
+  it("uses the shared launcher icon default", () => {
+    const { iconHolder } = buildHeader({});
+
+    expect(DEFAULT_LAUNCHER_CONFIG.headerIconSize).toBe(DEFAULT_HEADER_ICON_SIZE);
+    expect(iconHolder.style.height).toBe(DEFAULT_HEADER_ICON_SIZE);
+    expect(iconHolder.style.width).toBe(DEFAULT_HEADER_ICON_SIZE);
+  });
+
   it("portals the close-button tooltip into the mounted document", () => {
     const iframeDocument = document.implementation.createHTMLDocument("preview");
     const { header, closeButton, closeButtonWrapper } = buildHeader({

package/src/components/header-builder.ts

@@ -1,6 +1,7 @@
 import { createElement, createNode } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
+import { DEFAULT_HEADER_ICON_SIZE } from "../defaults";
 import { createCloseButton, createClearChatButton } from "./header-parts";
 
 /** CSS `color` values; variables are set on `[data-persona-root]` from `theme.components.header`. */
@@ -10,7 +11,7 @@ export const HEADER_THEME_CSS = {
   subtitleColor:
     "var(--persona-header-subtitle-fg, var(--persona-text-muted, var(--persona-muted, #9ca3af)))",
   actionIconColor:
-    "var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af))",
+    "var(--persona-header-control-state-fg, var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af)))",
   /** One knob for both header builders; the Messages rail header shares it. */
   minHeight: "var(--persona-header-min-height, auto)",
 } as const;
@@ -64,9 +65,10 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
 
   const header = createNode("div", {
     className:
-      "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5",
+      "persona-widget-header persona-flex persona-items-center persona-gap-3",
     attrs: { "data-persona-theme-zone": "header" },
     style: {
+      padding: "var(--persona-components-header-padding, 20px 24px)",
       minHeight: HEADER_THEME_CSS.minHeight,
       backgroundColor: "var(--persona-header-bg, var(--persona-surface, #ffffff))",
       borderBottomColor: "var(--persona-header-border, var(--persona-divider, #f1f5f9))",
@@ -77,7 +79,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   });
 
   const launcher = config?.launcher ?? {};
-  const headerIconSize = launcher.headerIconSize ?? "48px";
+  const headerIconSize = launcher.headerIconSize ?? DEFAULT_HEADER_ICON_SIZE;
   const closeButtonPlacement = launcher.closeButtonPlacement ?? "inline";
   const headerIconHidden = launcher.headerIconHidden ?? false;
   const headerIconName = launcher.headerIconName;
@@ -100,6 +102,8 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
       const iconSize = parseFloat(headerIconSize) || 24;
       const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.6, "currentColor", 1);
       if (iconSvg) {
+        iconSvg.style.width = `calc(${iconSize}px * var(--persona-components-header-iconScale, 0.6))`;
+        iconSvg.style.height = `calc(${iconSize}px * var(--persona-components-header-iconScale, 0.6))`;
         iconHolder.replaceChildren(iconSvg);
       } else {
         // Fallback to agentIconText if Lucide icon fails
@@ -238,4 +242,3 @@ export const attachHeaderToContainer = (
     container.appendChild(headerElements.clearChatButtonWrapper);
   }
 };
-

package/src/components/header-layouts.test.ts

@@ -16,6 +16,18 @@ const build = (layoutHeaderConfig: Parameters<typeof buildMinimalHeader>[0]["lay
   });
 
 describe("minimal header trailing actions", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "uses the minimal padding token under v5Defaults=%s",
+    (future) => {
+      const elements = buildMinimalHeader({
+        config: { apiUrl: "https://example.com/api", future } as AgentWidgetConfig,
+      });
+      expect(elements.header.style.padding).toBe(
+        "var(--persona-components-header-minimalPadding, var(--persona-components-header-padding, 16px 24px))"
+      );
+    }
+  );
+
   it("clusters actions at the trailing edge with the close button's chrome", () => {
     const onAction = vi.fn();
     const elements = build({

package/src/components/header-layouts.ts

@@ -122,10 +122,12 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   // max(title 24px, cluster 32px) + py-4 + border = the strip's 65px.
   const header = createElement(
     "div",
-    "persona-flex persona-items-center persona-justify-between persona-px-6 persona-py-4"
+    "persona-flex persona-items-center persona-justify-between"
   );
   header.setAttribute("data-persona-theme-zone", "header");
   header.style.minHeight = HEADER_THEME_CSS.minHeight;
+  header.style.padding =
+    "var(--persona-components-header-minimalPadding, var(--persona-components-header-padding, 16px 24px))";
   header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
   header.style.borderBottomColor = 'var(--persona-header-border, var(--persona-divider, #f1f5f9))';
   header.style.boxShadow = 'var(--persona-header-shadow, none)';
@@ -393,4 +395,3 @@ export const buildHeaderWithLayout = (
 
   return headerElements;
 };
-

package/src/components/launcher.ts

@@ -1,3 +1,4 @@
+import { resolveLauncherVariant } from "../utils/launcher-variant";
 import { createElement, createNode, cx } from "../utils/dom";
 import { AgentWidgetConfig, AgentWidgetLauncherTeaserConfig } from "../types";
 import { positionMap } from "../utils/positioning";
@@ -31,6 +32,14 @@ export const createLauncherButton = (
   const update = (newConfig: AgentWidgetConfig) => {
     const launcher = newConfig.launcher ?? {};
     const dockedMode = isDockedMountMode(newConfig);
+    const circle = resolveLauncherVariant(newConfig) === "circle";
+    if (circle) {
+      button.dataset.personaLauncherVariant = "circle";
+      button.setAttribute("aria-label", launcher.title ?? "Open chat");
+    } else {
+      button.removeAttribute("data-persona-launcher-variant");
+      button.removeAttribute("aria-label");
+    }
 
     const titleEl = button.querySelector("[data-role='launcher-title']");
     if (titleEl) {
@@ -49,7 +58,7 @@ export const createLauncherButton = (
     // Hide/show text container
     const textContainer = button.querySelector(".persona-flex-col");
     if (textContainer) {
-      if (launcher.textHidden || dockedMode) {
+      if (launcher.textHidden || dockedMode || circle) {
         (textContainer as HTMLElement).style.display = "none";
       } else {
         (textContainer as HTMLElement).style.display = "";
@@ -153,7 +162,7 @@ export const createLauncherButton = (
         callToActionIconEl.style.padding = "";
       }
       
-      if (launcher.callToActionIconHidden) {
+      if (launcher.callToActionIconHidden || circle) {
         callToActionIconEl.style.display = "none";
       } else {
         callToActionIconEl.style.display = dockedMode ? "none" : "";

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

@@ -359,6 +359,20 @@ describe("createStandardBubble: components.message geometry tokens", () => {
     });
   });
 
+  it.each([false, true])("consumes selected default geometry with v5Defaults=%s", (v5Defaults) => {
+    for (const role of ["user", "assistant"] as const) {
+      const bubble = createStandardBubble(
+        makeMessage({ id: `default-${role}`, role, content: "Hi" }),
+        ({ text }) => text, undefined, undefined, undefined,
+        { widgetConfig: { future: { v5Defaults } } as AgentWidgetConfig }
+      );
+      expect(bubble.style.padding).toBe(v5Defaults
+        ? `var(--persona-message-${role}-padding, 0.75rem 1.25rem)` : "");
+      expect(bubble.style.lineHeight).toBe(v5Defaults
+        ? `var(--persona-message-${role}-line-height, 1.75)` : "");
+    }
+  });
+
   it("routes each configured property through its role token with the bubble preset as fallback", () => {
     const bubble = createStandardBubble(
       makeMessage({ id: "geo-user", role: "user", content: "Hi" }),
@@ -896,6 +910,14 @@ describe("createMessageActions: chromeless action buttons", () => {
   const actionButtons = (row: HTMLElement) =>
     Array.from(row.querySelectorAll<HTMLButtonElement>("button[data-action]"));
 
+  it("keeps voting controls hidden unless explicitly enabled", () => {
+    const row = createMessageActions(makeMessage({ id: "actions-default-votes" }), {});
+
+    expect(actionButtons(row).map((btn) => btn.getAttribute("data-action"))).toEqual([
+      "copy",
+    ]);
+  });
+
   it("styles every built-in action through the message-action class alone", () => {
     const row = createMessageActions(makeMessage({ id: "actions-builtin" }), {
       showCopy: true,

package/src/components/message-bubble.ts

@@ -18,6 +18,7 @@ import {
   StopReasonKind
 } from "../types";
 import type { MessageGeometryTokens } from "../types/theme";
+import { resolveThemeDefaults } from "../utils/tokens";
 import { createMentionTokenElement } from "../utils/mention-token";
 import { createIconButton } from "../utils/buttons";
 import { renderLucideIcon } from "../utils/icons";
@@ -820,8 +821,8 @@ export const createMessageActions = (
   eligibility?: MessageActionEligibility
 ): HTMLElement => {
   const showCopy = actionsConfig.showCopy ?? true;
-  const showUpvote = actionsConfig.showUpvote ?? true;
-  const showDownvote = actionsConfig.showDownvote ?? true;
+  const showUpvote = actionsConfig.showUpvote ?? false;
+  const showDownvote = actionsConfig.showDownvote ?? false;
   const showReadAloud = actionsConfig.showReadAloud ?? false;
   // Retry and edit are per-message: the config flag only opts in, the caller's
   // eligibility decides which single message actually shows the control.
@@ -1002,12 +1003,15 @@ export const createStandardBubble = (
 
   bubble.setAttribute("data-persona-theme-zone", message.role === "user" ? "user-message" : "assistant-message");
 
+  const defaultMessageTokens = resolveThemeDefaults(options?.widgetConfig?.future).components.message;
   const messageTokens = options?.widgetConfig?.theme?.components?.message;
   applyBubbleGeometry(
     bubble,
     message.role,
     layout,
-    message.role === "user" ? messageTokens?.user : messageTokens?.assistant
+    message.role === "user"
+      ? { ...defaultMessageTokens.user, ...messageTokens?.user, ...options?.widgetConfig?.darkTheme?.components?.message?.user }
+      : { ...defaultMessageTokens.assistant, ...messageTokens?.assistant, ...options?.widgetConfig?.darkTheme?.components?.message?.assistant }
   );
 
   // Apply component-level color overrides via CSS variables