@runtypelabs/persona 4.23.2 → 4.24.0

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();
+  });
+});

package/src/components/tool-details.ts

@@ -0,0 +1,102 @@
+import type { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+import { createNode } from "../utils/dom";
+import { formatUnknownValue } from "../utils/formatting";
+import { renderLucideIcon } from "../utils/icons";
+
+const isEmptyRequest = (value: unknown): boolean => {
+  if (value == null) return true;
+  if (typeof value === "string") {
+    if (!value.trim()) return true;
+    try { return isEmptyRequest(JSON.parse(value)); } catch { return false; }
+  }
+  return typeof value === "object" && Object.keys(value).length === 0;
+};
+
+const isStructured = (value: unknown): boolean => {
+  if (value !== null && typeof value === "object") return true;
+  if (typeof value !== "string") return false;
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return parsed !== null && typeof parsed === "object";
+  } catch { return false; }
+};
+
+/** Plain text only: tool output is untrusted and must never become HTML. */
+export function appendToolDetails(content: HTMLElement, message: AgentWidgetMessage, config: AgentWidgetConfig): void {
+  const tool = message.toolCall;
+  if (!tool) return;
+  const styles = config.toolCall ?? {};
+  const section = (label: "Request" | "Response", value: unknown) => {
+    const block = createNode("section", {
+      className: "persona-tool-detail",
+      attrs: { "data-persona-tool-detail": label.toLowerCase() },
+      style: {
+        backgroundColor: styles.codeBlockBackgroundColor,
+        borderColor: styles.codeBlockBorderColor,
+        borderWidth: styles.codeBlockBorderColor ? "1px" : undefined,
+      },
+    });
+    const title = createNode("div", {
+      className: "persona-tool-detail-label",
+      text: label,
+      style: { color: styles.labelTextColor },
+    });
+    const text = formatUnknownValue(value);
+    const pre = createNode("pre", {
+      className: `persona-tool-detail-value${isStructured(value) ? " persona-tool-detail-code" : ""}`,
+      text,
+      attrs: text.length > 420 || text.split("\n").length > 7
+        ? { tabindex: "0", "aria-label": `${label} content` } : {},
+      style: { color: styles.codeBlockTextColor ?? styles.contentTextColor },
+    });
+    const copy = createNode("button", {
+      className: "persona-tool-detail-copy",
+      attrs: { type: "button", "data-persona-copy-tool-detail": "", "aria-label": `Copy ${label.toLowerCase()}`, title: `Copy ${label.toLowerCase()}` },
+    });
+    const icon = renderLucideIcon("copy", 14, "currentColor", 1.7);
+    if (icon) copy.appendChild(icon);
+    block.append(title, pre, copy);
+    content.appendChild(block);
+  };
+  if (!isEmptyRequest(tool.args)) section("Request", tool.args);
+  const response = tool.status === "complete" && tool.result !== undefined
+    ? tool.result : tool.chunks?.join("");
+  if (response !== undefined && (typeof response !== "string" || response.trim())) section("Response", response);
+  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": "", role: "status" },
+    }));
+  }
+}
+
+const copyResets = new WeakMap<HTMLButtonElement, ReturnType<typeof setTimeout>>();
+
+/** Delegated by the transcript so copying works after streaming DOM morphs. */
+export async function copyToolDetail(button: HTMLButtonElement): Promise<void> {
+  const block = button.closest("[data-persona-tool-detail]");
+  const value = block?.querySelector("pre");
+  if (!value) return;
+  const label = `Copy ${block?.getAttribute("data-persona-tool-detail")}`;
+  clearTimeout(copyResets.get(button));
+  try {
+    await navigator.clipboard.writeText(value.textContent ?? "");
+    button.dataset.copied = "true";
+    button.setAttribute("aria-label", "Copied");
+    button.title = "Copied";
+    const icon = renderLucideIcon("check", 14, "currentColor", 2);
+    if (icon) button.replaceChildren(icon);
+  } catch {
+    button.setAttribute("aria-label", "Copy failed — try again");
+    button.title = "Copy failed — try again";
+  }
+  copyResets.set(button, setTimeout(() => {
+    delete button.dataset.copied;
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    const icon = renderLucideIcon("copy", 14, "currentColor", 1.7);
+    if (icon) button.replaceChildren(icon);
+    copyResets.delete(button);
+  }, 1800));
+}

package/src/components/welcome.test.ts

@@ -151,6 +151,14 @@ describe("composer lift animation", () => {
     footer.remove();
   });
 
+  it("accepts the centered layout's 320ms transition", () => {
+    const footer = makeFooter();
+    const animate = stubAnimate(footer);
+    animateComposerLiftChange(footer, 240, "drop", 320);
+    expect(animate.mock.calls[0]![1]).toMatchObject({ duration: 320 });
+    footer.remove();
+  });
+
   it("reverses the travel for the rise", () => {
     const footer = makeFooter();
     const animate = stubAnimate(footer);

package/src/components/welcome.ts

@@ -177,6 +177,7 @@ export const applyWelcomeConfig = (
   applyWelcomeIcon(elements.iconHolder, resolved.icon);
   elements.host.setAttribute("data-persona-welcome-variant", resolved.variant);
   elements.host.setAttribute("data-persona-welcome-dismiss", resolved.dismiss);
+  elements.host.setAttribute("data-persona-welcome-layout", resolved.layout ?? "top");
   elements.host.setAttribute(
     "data-persona-welcome-anchor",
     resolved.anchor ?? "bottom"
@@ -422,7 +423,8 @@ export const animateWelcomeOut = (
 export const animateComposerLiftChange = (
   footer: HTMLElement,
   distance: number,
-  direction: "drop" | "rise"
+  direction: "drop" | "rise",
+  duration = 260
 ): Animation | null => {
   if (
     distance <= 1 ||
@@ -437,6 +439,6 @@ export const animateComposerLiftChange = (
   // risk pinning a stale transform across a later re-show.
   return footer.animate(
     [{ transform: `translateY(${offset}px)` }, { transform: "none" }],
-    { duration: 260, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "none" }
+    { duration, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "none" }
   );
 };