@runtypelabs/persona 4.23.1 → 4.24.0

package/src/components/pill-composer-builder.ts

@@ -115,7 +115,6 @@ export const buildPillComposer = (context: ComposerBuildContext): ComposerElemen
   const composerForm = createNode("form", {
     className: "persona-widget-composer persona-pill-composer",
     attrs: { "data-persona-composer-form": "" },
-    style: { outline: "none" },
   });
 
   // Three columns of the grid: [paperclip?] · textarea · mic + send.

package/src/components/reasoning-bubble.ts

@@ -1,6 +1,8 @@
+import { applyActivityRow, activityDisplay, activityVariant, activityDuration } from "./activity-row";
 import { createElement } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+import { DEFAULT_REASONING_DISPLAY } from "../defaults";
 import { describeReasonStatus, computeReasoningElapsed, parseFormattedTemplate } from "../utils/formatting";
 import { appendCharSpans } from "../utils/tool-loading-animation";
 import {
@@ -12,9 +14,6 @@ import {
   updateExpandableBubbleUI,
 } from "./expandable-bubble";
 
-// Expansion state per widget instance
-export const reasoningExpansionState = new Set<string>();
-
 const getReasoningPreviewText = (message: AgentWidgetMessage, maxLines: number): string => {
   const text = message.reasoning?.chunks.join("").trim() ?? "";
   if (!text) return "";
@@ -27,32 +26,45 @@ const getReasoningPreviewText = (message: AgentWidgetMessage, maxLines: number):
 };
 
 // Helper function to update reasoning bubble UI after expansion state changes
-export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
+export const updateReasoningBubbleUI = (
+  messageId: string,
+  bubble: HTMLElement,
+  expansionState: Set<string>
+): void => {
   updateExpandableBubbleUI(messageId, bubble, {
-    stateSet: reasoningExpansionState,
+    stateSet: expansionState,
     previewKind: "reasoning",
     iconColor: "currentColor",
   });
 };
 
-export const createReasoningBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
+export const createReasoningBubble = (
+  message: AgentWidgetMessage,
+  config?: AgentWidgetConfig,
+  expansionState = new Set<string>()
+): HTMLElement => {
+  config = activityDisplay(config, "reasoning");
   const reasoning = message.reasoning;
   const bubble = createExpandableBubbleShell("persona-reasoning-bubble", message.id);
 
   if (!reasoning) {
-    return bubble;
+    return applyActivityRow(bubble, message, config, "reasoning");
   }
 
   const reasoningDisplayConfig = config?.features?.reasoningDisplay ?? {};
-  const expandable = reasoningDisplayConfig.expandable !== false;
-  const expanded = expandable && reasoningExpansionState.has(message.id);
+  const expandable = reasoningDisplayConfig.expandable ?? DEFAULT_REASONING_DISPLAY.expandable;
+  const expanded = expandable && expansionState.has(message.id);
   const isActive = reasoning.status !== "complete";
-  const previewText = getReasoningPreviewText(message, reasoningDisplayConfig.previewMaxLines ?? 3);
+  const previewText = getReasoningPreviewText(
+    message,
+    reasoningDisplayConfig.previewMaxLines ?? DEFAULT_REASONING_DISPLAY.previewMaxLines
+  );
   const header = createExpandableHeader({ expandable, expanded, bubbleType: "reasoning" });
 
   const headerContent = createElement("div", "persona-flex persona-flex-col persona-text-left");
   const title = createElement("span", "persona-text-xs persona-text-persona-primary");
-  const defaultSummary = "Thinking...";
+  const row = activityVariant(config, "reasoning") === "row";
+  const defaultSummary = row && !isActive ? `Thought for ${activityDuration(reasoning.durationMs ?? (reasoning.completedAt !== undefined && reasoning.startedAt !== undefined ? reasoning.completedAt - reasoning.startedAt : undefined))}` : "Thinking...";
   const reasoningConfig = config?.reasoning ?? {};
 
   // Elapsed helpers: defined early so they're available to renderCollapsedSummary
@@ -88,10 +100,10 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
   // Status span: used in the legacy (no-template) path
   const status = createElement("span", "persona-text-xs persona-text-persona-primary");
   status.textContent = describeReasonStatus(reasoning);
-  headerContent.appendChild(status);
+  if (!row) headerContent.appendChild(status);
 
   // Template and animation support
-  const loadingAnimation = reasoningDisplayConfig.loadingAnimation ?? "none";
+  const loadingAnimation = reasoningDisplayConfig.loadingAnimation ?? DEFAULT_REASONING_DISPLAY.loadingAnimation;
   const activeTemplate = reasoningConfig.activeTextTemplate;
   const completeTemplate = reasoningConfig.completeTextTemplate;
   const currentTemplate = isActive ? activeTemplate : completeTemplate;
@@ -190,12 +202,12 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
     }
 
     // Legacy: hide title on complete, show status
-    if (reasoning.status === "complete") {
+    if (reasoning.status === "complete" && !row) {
       title.style.display = "none";
     }
   } else if (!skipCustomElement) {
     // Legacy path: no template, no animation
-    if (reasoning.status === "complete") {
+    if (reasoning.status === "complete" && !row) {
       title.style.display = "none";
     } else {
       title.style.display = "";
@@ -246,7 +258,7 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
 
   if (!expandable) {
     bubble.append(header, collapsedPreview);
-    return bubble;
+    return applyActivityRow(bubble, message, config, "reasoning");
   }
 
   const content = createElement(
@@ -270,5 +282,5 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
   applyExpansionDisplay({ expanded, header, toggleIcon, content, collapsedPreview, iconColor });
 
   bubble.append(header, collapsedPreview, content);
-  return bubble;
+  return applyActivityRow(bubble, message, config, "reasoning");
 };

package/src/components/suggestions.test.ts

@@ -257,6 +257,7 @@ describe("legacy suggestionChipsConfig scoping", () => {
     expect(button.style.paddingLeft).toBe("12px");
     expect(button.style.paddingTop).toBe("6px");
     expect(button.style.fontWeight).toBe("500");
+    expect(button.style.fontFamily).toBe("");
   });
 
   it("does not let chip config override card and list padding tokens", () => {

package/src/components/suggestions.ts

@@ -97,19 +97,6 @@ export const normalizeSuggestion = (
   };
 };
 
-const fontFamilyValue = (
-  family: "sans-serif" | "serif" | "mono"
-): string => {
-  switch (family) {
-    case "serif":
-      return 'Georgia, "Times New Roman", Times, serif';
-    case "mono":
-      return '"Courier New", Courier, "Lucida Console", Monaco, monospace';
-    default:
-      return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
-  }
-};
-
 // Module-level, keyed on the widget config: one widget owns several suggestion
 // managers, so a per-instance flag hints once per surface instead of once.
 const hintedOverflowVariant = new WeakSet<AgentWidgetConfig>();
@@ -264,9 +251,6 @@ export const createSuggestionElement = (
     // Legacy `suggestionChipsConfig` compat is chip-only: its inline
     // styles would otherwise override the card/list padding tokens.
     if (variant === "chip") {
-      if (chipsConfig?.fontFamily) {
-        button.style.fontFamily = fontFamilyValue(chipsConfig.fontFamily);
-      }
       if (chipsConfig?.fontWeight) {
         button.style.fontWeight = chipsConfig.fontWeight;
       }

package/src/components/tool-bubble.ts

@@ -1,5 +1,8 @@
+import { appendToolDetails } from "./tool-details";
+import { applyActivityRow, activityDisplay, activityVariant } from "./activity-row";
 import { createElement, createNode } from "../utils/dom";
 import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
+import { DEFAULT_TOOL_CALL_DISPLAY } from "../defaults";
 import { formatUnknownValue, describeToolTitle, resolveToolHeaderText, computeToolElapsed, parseFormattedTemplate } from "../utils/formatting";
 import { appendCharSpans } from "../utils/tool-loading-animation";
 import {
@@ -11,19 +14,15 @@ import {
   updateExpandableBubbleUI,
 } from "./expandable-bubble";
 
-// Expansion state per widget instance
-export const toolExpansionState = new Set<string>();
-
-// Default the toggle chevron to the tool-call title color so it stays
-// readable on whatever surface the title does. The title falls back to
-// `.persona-text-persona-primary` (var(--persona-primary)) when no
-// `headerTextColor` is set, so mirror that here instead of `currentColor`.
+// Rows inherit their muted label color; cards retain the legacy primary fallback.
+// Explicit toggle and header colors win in both variants.
 const toolChevronColor = (
-  toolCallConfig: NonNullable<AgentWidgetConfig["toolCall"]>
+  toolCallConfig: NonNullable<AgentWidgetConfig["toolCall"]>,
+  activityRow = false
 ): string =>
   toolCallConfig.toggleTextColor ||
   toolCallConfig.headerTextColor ||
-  "var(--persona-primary, #171717)";
+  (activityRow ? "currentColor" : "var(--persona-primary, #171717)");
 
 const getToolPreviewText = (message: AgentWidgetMessage, maxLines: number): string => {
   const tool = message.toolCall;
@@ -72,11 +71,14 @@ const getToolSummaryText = (
 ): { summary: string; previewText: string; isActive: boolean } => {
   const tool = message.toolCall;
   const toolDisplayConfig = config?.features?.toolCallDisplay;
-  const collapsedMode = toolDisplayConfig?.collapsedMode ?? "tool-call";
+  const collapsedMode = toolDisplayConfig?.collapsedMode ?? DEFAULT_TOOL_CALL_DISPLAY.collapsedMode;
   const previewText = tool?.success === false
     ? tool.error || "Tool failed"
-    : getToolPreviewText(message, toolDisplayConfig?.previewMaxLines ?? 3);
-  const defaultSummary = tool ? describeToolTitle(tool) : "";
+    : getToolPreviewText(
+        message,
+        toolDisplayConfig?.previewMaxLines ?? DEFAULT_TOOL_CALL_DISPLAY.previewMaxLines
+      );
+  const defaultSummary = tool ? (activityVariant(config, "tool") === "row" ? `${tool.status === "complete" ? "Used" : "Using"} ${tool.name?.trim() || "tool"}` : describeToolTitle(tool)) : "";
 
   if (!tool) {
     return { summary: defaultSummary, previewText, isActive: false };
@@ -103,15 +105,25 @@ const getToolSummaryText = (
 };
 
 // Helper function to update tool bubble UI after expansion state changes
-export const updateToolBubbleUI = (messageId: string, bubble: HTMLElement, config?: AgentWidgetConfig): void => {
+export const updateToolBubbleUI = (
+  messageId: string,
+  bubble: HTMLElement,
+  expansionState: Set<string>,
+  config?: AgentWidgetConfig
+): void => {
   updateExpandableBubbleUI(messageId, bubble, {
-    stateSet: toolExpansionState,
+    stateSet: expansionState,
     previewKind: "tool",
-    iconColor: toolChevronColor(config?.toolCall ?? {}),
+    iconColor: toolChevronColor(config?.toolCall ?? {}, bubble.classList.contains("persona-activity-row")),
   });
 };
 
-export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
+export const createToolBubble = (
+  message: AgentWidgetMessage,
+  config?: AgentWidgetConfig,
+  expansionState = new Set<string>()
+): HTMLElement => {
+  config = activityDisplay(config, "tool");
   const tool = message.toolCall;
   const toolCallConfig = config?.toolCall ?? {};
 
@@ -133,15 +145,15 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   bubble.style.boxShadow =
     toolCallConfig.shadow !== undefined
       ? (toolCallConfig.shadow.trim() === "" ? "none" : toolCallConfig.shadow)
-      : "var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))";
+      : "var(--persona-tool-bubble-shadow)";
 
   if (!tool) {
-    return bubble;
+    return applyActivityRow(bubble, message, config, "tool");
   }
 
   const toolDisplayConfig = config?.features?.toolCallDisplay ?? {};
-  const expandable = toolDisplayConfig.expandable !== false;
-  const expanded = expandable && toolExpansionState.has(message.id);
+  const expandable = toolDisplayConfig.expandable ?? DEFAULT_TOOL_CALL_DISPLAY.expandable;
+  const expanded = expandable && expansionState.has(message.id);
   const { summary, previewText, isActive } = getToolSummaryText(message, config);
 
   const header = createExpandableHeader({ expandable, expanded, bubbleType: "tool" });
@@ -181,7 +193,7 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
     toolCall: tool,
     defaultSummary: summary,
     previewText,
-    collapsedMode: toolDisplayConfig.collapsedMode ?? "tool-call",
+    collapsedMode: toolDisplayConfig.collapsedMode ?? DEFAULT_TOOL_CALL_DISPLAY.collapsedMode,
     isActive,
     config: config ?? {},
     elapsed: computeToolElapsed(tool),
@@ -198,7 +210,7 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   }
 
   // Apply loading animation when tool is active and no custom HTMLElement was provided
-  const loadingAnimation = toolDisplayConfig.loadingAnimation ?? "none";
+  const loadingAnimation = toolDisplayConfig.loadingAnimation ?? DEFAULT_TOOL_CALL_DISPLAY.loadingAnimation;
   const activeTemplate = toolCallConfig.activeTextTemplate;
   const completeTemplate = toolCallConfig.completeTextTemplate;
   const currentTemplate = isActive ? activeTemplate : completeTemplate;
@@ -280,7 +292,7 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
     }
   }
 
-  const iconColor = toolChevronColor(toolCallConfig);
+  const iconColor = toolChevronColor(toolCallConfig, activityVariant(config, "tool") === "row");
   const toggleIcon = appendHeaderToggle(header, headerContent, {
     expandable,
     expanded,
@@ -308,7 +320,7 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
 
   if (!expandable) {
     bubble.append(header, collapsedPreview);
-    return bubble;
+    return applyActivityRow(bubble, message, config, "tool");
   }
 
   const content = createElement(
@@ -333,109 +345,114 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
     content.style.paddingBottom = toolCallConfig.contentPaddingY;
   }
 
-  // Add tool name at the top of content
-  if (tool.name) {
-    const toolName = createElement("div", "persona-text-xs persona-text-persona-muted persona-italic");
-    if (toolCallConfig.contentTextColor) {
-      toolName.style.color = toolCallConfig.contentTextColor;
-    } else if (toolCallConfig.headerTextColor) {
-      toolName.style.color = toolCallConfig.headerTextColor;
+  if (config.future?.v5Defaults === true) {
+    appendToolDetails(content, message, config);
+  } else {
+    // Add tool name at the top of content
+    if (tool.name) {
+      const toolName = createElement("div", "persona-text-xs persona-text-persona-muted persona-italic");
+      if (toolCallConfig.contentTextColor) {
+        toolName.style.color = toolCallConfig.contentTextColor;
+      } else if (toolCallConfig.headerTextColor) {
+        toolName.style.color = toolCallConfig.headerTextColor;
+      }
+      toolName.textContent = tool.name;
+      content.appendChild(toolName);
     }
-    toolName.textContent = tool.name;
-    content.appendChild(toolName);
-  }
 
-  if (tool.args !== undefined) {
-    const argsBlock = createElement("div", "persona-space-y-1");
-    const argsLabel = createElement(
-      "div",
-      "persona-text-xs persona-text-persona-muted"
-    );
-    if (toolCallConfig.labelTextColor) {
-      argsLabel.style.color = toolCallConfig.labelTextColor;
+    if (tool.args !== undefined) {
+      const argsBlock = createElement("div", "persona-space-y-1");
+      const argsLabel = createElement(
+        "div",
+        "persona-text-xs persona-text-persona-muted"
+      );
+      if (toolCallConfig.labelTextColor) {
+        argsLabel.style.color = toolCallConfig.labelTextColor;
+      }
+      argsLabel.textContent = "Arguments";
+      const argsPre = createElement(
+        "pre",
+        "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
+      );
+      // Ensure font size matches header text (0.75rem / 12px)
+      argsPre.style.fontSize = "0.75rem";
+      argsPre.style.lineHeight = "1rem";
+      applyToolCodeBlockColors(argsPre, toolCallConfig);
+      argsPre.textContent = formatUnknownValue(tool.args);
+      argsBlock.append(argsLabel, argsPre);
+      content.appendChild(argsBlock);
     }
-    argsLabel.textContent = "Arguments";
-    const argsPre = createElement(
-      "pre",
-      "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
-    );
-    // Ensure font size matches header text (0.75rem / 12px)
-    argsPre.style.fontSize = "0.75rem";
-    argsPre.style.lineHeight = "1rem";
-    applyToolCodeBlockColors(argsPre, toolCallConfig);
-    argsPre.textContent = formatUnknownValue(tool.args);
-    argsBlock.append(argsLabel, argsPre);
-    content.appendChild(argsBlock);
-  }
 
-  if (tool.chunks && tool.chunks.length) {
-    const logsBlock = createElement("div", "persona-space-y-1");
-    const logsLabel = createElement(
-      "div",
-      "persona-text-xs persona-text-persona-muted"
-    );
-    if (toolCallConfig.labelTextColor) {
-      logsLabel.style.color = toolCallConfig.labelTextColor;
+    if (tool.chunks && tool.chunks.length) {
+      const logsBlock = createElement("div", "persona-space-y-1");
+      const logsLabel = createElement(
+        "div",
+        "persona-text-xs persona-text-persona-muted"
+      );
+      if (toolCallConfig.labelTextColor) {
+        logsLabel.style.color = toolCallConfig.labelTextColor;
+      }
+      logsLabel.textContent = "Activity";
+      const logsPre = createElement(
+        "pre",
+        "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
+      );
+      // Ensure font size matches header text (0.75rem / 12px)
+      logsPre.style.fontSize = "0.75rem";
+      logsPre.style.lineHeight = "1rem";
+      applyToolCodeBlockColors(logsPre, toolCallConfig);
+      logsPre.textContent = tool.chunks.join("");
+      logsBlock.append(logsLabel, logsPre);
+      content.appendChild(logsBlock);
     }
-    logsLabel.textContent = "Activity";
-    const logsPre = createElement(
-      "pre",
-      "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
-    );
-    // Ensure font size matches header text (0.75rem / 12px)
-    logsPre.style.fontSize = "0.75rem";
-    logsPre.style.lineHeight = "1rem";
-    applyToolCodeBlockColors(logsPre, toolCallConfig);
-    logsPre.textContent = tool.chunks.join("");
-    logsBlock.append(logsLabel, logsPre);
-    content.appendChild(logsBlock);
-  }
 
-  if (tool.success === false) {
-    content.appendChild(createNode("div", {
-      className: "persona-text-sm persona-whitespace-pre-wrap",
-      text: tool.error || "Tool failed",
-      attrs: { "data-persona-tool-error": "" },
-    }));
-  }
+    if (tool.success === false) {
+      content.appendChild(createNode("div", {
+        className: "persona-text-sm persona-whitespace-pre-wrap",
+        text: tool.error || "Tool failed",
+        attrs: { "data-persona-tool-error": "" },
+      }));
+    }
 
-  if (tool.status === "complete" && tool.result !== undefined) {
-    const resultBlock = createElement("div", "persona-space-y-1");
-    const resultLabel = createElement(
-      "div",
-      "persona-text-xs persona-text-persona-muted"
-    );
-    if (toolCallConfig.labelTextColor) {
-      resultLabel.style.color = toolCallConfig.labelTextColor;
+    if (tool.status === "complete" && tool.result !== undefined) {
+      const resultBlock = createElement("div", "persona-space-y-1");
+      const resultLabel = createElement(
+        "div",
+        "persona-text-xs persona-text-persona-muted"
+      );
+      if (toolCallConfig.labelTextColor) {
+        resultLabel.style.color = toolCallConfig.labelTextColor;
+      }
+      resultLabel.textContent = "Result";
+      const resultPre = createElement(
+        "pre",
+        "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
+      );
+      // Ensure font size matches header text (0.75rem / 12px)
+      resultPre.style.fontSize = "0.75rem";
+      resultPre.style.lineHeight = "1rem";
+      applyToolCodeBlockColors(resultPre, toolCallConfig);
+      resultPre.textContent = formatUnknownValue(tool.result);
+      resultBlock.append(resultLabel, resultPre);
+      content.appendChild(resultBlock);
     }
-    resultLabel.textContent = "Result";
-    const resultPre = createElement(
-      "pre",
-      "persona-max-h-48 persona-overflow-auto persona-whitespace-pre-wrap persona-rounded-lg persona-border persona-px-3 persona-py-2 persona-text-xs"
-    );
-    // Ensure font size matches header text (0.75rem / 12px)
-    resultPre.style.fontSize = "0.75rem";
-    resultPre.style.lineHeight = "1rem";
-    applyToolCodeBlockColors(resultPre, toolCallConfig);
-    resultPre.textContent = formatUnknownValue(tool.result);
-    resultBlock.append(resultLabel, resultPre);
-    content.appendChild(resultBlock);
-  }
 
-  if (tool.status === "complete" && typeof tool.duration === "number") {
-    const duration = createElement(
-      "div",
-      "persona-text-xs persona-text-persona-muted"
-    );
-    if (toolCallConfig.contentTextColor) {
-      duration.style.color = toolCallConfig.contentTextColor;
+    if (tool.status === "complete" && typeof tool.duration === "number") {
+      const duration = createElement(
+        "div",
+        "persona-text-xs persona-text-persona-muted"
+      );
+      if (toolCallConfig.contentTextColor) {
+        duration.style.color = toolCallConfig.contentTextColor;
+      }
+      duration.textContent = `Duration: ${tool.duration}ms`;
+      content.appendChild(duration);
     }
-    duration.textContent = `Duration: ${tool.duration}ms`;
-    content.appendChild(duration);
+
   }
 
   applyExpansionDisplay({ expanded, header, toggleIcon, content, collapsedPreview, iconColor });
 
   bubble.append(header, collapsedPreview, content);
-  return bubble;
+  return applyActivityRow(bubble, message, config, "tool");
 };

package/src/components/tool-details.test.ts

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { readFileSync } from "node:fs";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createToolBubble } from "./tool-bubble";
+import { copyToolDetail } from "./tool-details";
+import type { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+
+const message = (tool: Partial<NonNullable<AgentWidgetMessage["toolCall"]>> = {}): AgentWidgetMessage => ({
+  id: "tool", role: "assistant", content: "", createdAt: "2026-01-01", variant: "tool",
+  toolCall: { id: "call", name: "Search", status: "complete", ...tool },
+});
+const render = (tool: Partial<NonNullable<AgentWidgetMessage["toolCall"]>>, config: AgentWidgetConfig = {}) =>
+  createToolBubble(message(tool), { future: { v5Defaults: true }, ...config }, new Set(["tool"]));
+afterEach(() => { vi.useRealTimers(); vi.unstubAllGlobals(); });
+
+describe("V5 tool details", () => {
+  it.each([undefined, null, "", "  ", {}, [], "{}", "[]", "null"].map(value => [value]))("omits empty request %j", args => {
+    const bubble = render({ args, result: "Done" });
+    expect(bubble.querySelector('[data-persona-tool-detail="request"]')).toBeNull();
+    expect(bubble.querySelector('[data-persona-tool-detail="response"] pre')?.textContent).toBe("Done");
+  });
+  it.each([0, false, { count: 0 }])("keeps meaningful request %j", args => {
+    expect(render({ args }).querySelector('[data-persona-tool-detail="request"]')).not.toBeNull();
+  });
+  it("shows chunks during streaming and replaces them with the final result", () => {
+    const running = render({ status: "running", chunks: ["Found ", "one"], result: "stale" });
+    expect(running.querySelector("pre")?.textContent).toBe("Found one");
+    const done = render({ chunks: ["Found one"], result: { count: 1 } });
+    expect(done.querySelectorAll('[data-persona-tool-detail="response"]')).toHaveLength(1);
+    expect(done.querySelector("pre")?.textContent).toBe('{\n  "count": 1\n}');
+    expect(done.querySelector(".persona-tool-detail-code")).not.toBeNull();
+  });
+  it("keeps errors and escapes output, with plain prose typography", () => {
+    const bubble = render({ result: '<img src=x onerror="alert(1)">', success: false, error: "Denied" });
+    expect(bubble.querySelector("img")).toBeNull();
+    expect(bubble.querySelector(".persona-tool-detail-code")).toBeNull();
+    expect(bubble.querySelector("[data-persona-tool-error]")?.textContent).toBe("Denied");
+  });
+  it("preserves V4 sections and explicit V5 styles", () => {
+    const legacy = createToolBubble(message({ args: {}, chunks: ["progress"], result: "done" }));
+    expect(legacy.textContent).toContain("Arguments");
+    expect(legacy.textContent).toContain("Activity");
+    expect(legacy.textContent).toContain("Result");
+    expect(legacy.querySelector(".persona-tool-detail")).toBeNull();
+    const custom = render({ result: "done" }, { toolCall: {
+      codeBlockBackgroundColor: "red", codeBlockTextColor: "blue", codeBlockBorderColor: "green", labelTextColor: "purple",
+    } });
+    expect(custom.querySelector<HTMLElement>(".persona-tool-detail")?.style.backgroundColor).toBe("red");
+    expect(custom.querySelector<HTMLElement>("pre")?.style.color).toBe("blue");
+    expect(custom.querySelector<HTMLElement>(".persona-tool-detail-label")?.style.color).toBe("purple");
+  });
+  it("uses a flat surface instead of inheriting markdown code boxes", () => {
+    const style = document.createElement("style");
+    style.textContent = readFileSync("src/styles/widget.css", "utf8");
+    document.head.appendChild(style);
+    const bubble = render({ result: "Plain response" });
+    document.body.appendChild(bubble);
+    try {
+      const pre = bubble.querySelector("pre")!;
+      expect(getComputedStyle(pre).padding).toBe("0px");
+      expect(["transparent", "rgba(0, 0, 0, 0)"]).toContain(getComputedStyle(pre).backgroundColor);
+      expect(getComputedStyle(pre).fontSize).toBe("13px");
+    } finally { bubble.remove(); style.remove(); }
+  });
+  it("copies all output, shows a check, and restores the copy icon", async () => {
+    vi.useFakeTimers();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    const text = "Long output\n".repeat(50);
+    const button = render({ result: text }).querySelector<HTMLButtonElement>(".persona-tool-detail-copy")!;
+    await copyToolDetail(button);
+    expect(writeText).toHaveBeenCalledWith(text);
+    expect(button.dataset.copied).toBe("true");
+    expect(button.getAttribute("aria-label")).toBe("Copied");
+    vi.advanceTimersByTime(1800);
+    expect(button.dataset.copied).toBeUndefined();
+    expect(button.getAttribute("aria-label")).toBe("Copy response");
+  });
+  it("handles unavailable clipboard without claiming success", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("navigator", {});
+    const button = render({ result: "done" }).querySelector<HTMLButtonElement>("button[data-persona-copy-tool-detail]")!;
+    await copyToolDetail(button);
+    expect(button.getAttribute("aria-label")).toBe("Copy failed — try again");
+    expect(button.dataset.copied).toBeUndefined();
+  });
+});