@runtypelabs/persona 3.10.1 → 3.11.0

package/dist/theme-editor.cjs

@@ -233,7 +233,8 @@ var DEFAULT_WIDGET_CONFIG = {
       activePreview: false,
       grouped: false,
       previewMaxLines: 3,
-      expandable: true
+      expandable: true,
+      loadingAnimation: "none"
     },
     reasoningDisplay: {
       activePreview: false,
@@ -3345,6 +3346,62 @@ var describeToolTitle = (tool) => {
   }
   return "Using tool...";
 };
+var formatElapsedMs = (ms) => {
+  const seconds = ms / 1e3;
+  if (seconds < 0.1) return "<0.1s";
+  if (seconds >= 10) return `${Math.round(seconds)}s`;
+  return `${seconds.toFixed(1).replace(/\.0$/, "")}s`;
+};
+var computeToolElapsed = (tool) => {
+  var _a, _b, _c;
+  const durationMs = typeof tool.duration === "number" ? tool.duration : typeof tool.durationMs === "number" ? tool.durationMs : Math.max(
+    0,
+    ((_a = tool.completedAt) != null ? _a : Date.now()) - ((_c = (_b = tool.startedAt) != null ? _b : tool.completedAt) != null ? _c : Date.now())
+  );
+  return formatElapsedMs(durationMs);
+};
+var resolveToolHeaderText = (tool, template, fallback) => {
+  var _a;
+  if (!template) return fallback;
+  const toolName = ((_a = tool.name) == null ? void 0 : _a.trim()) || "tool";
+  const duration = computeToolElapsed(tool);
+  return template.replace(/\{toolName\}/g, toolName).replace(/\{duration\}/g, duration);
+};
+var parseFormattedTemplate = (template, toolName) => {
+  const resolved = template.replace(/\{toolName\}/g, toolName);
+  const segments = [];
+  const regex = /\*\*(.+?)\*\*|\*(.+?)\*|~(.+?)~/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(resolved)) !== null) {
+    if (match.index > lastIndex) {
+      pushSegments(segments, resolved.slice(lastIndex, match.index), []);
+    }
+    if (match[1] !== void 0) {
+      pushSegments(segments, match[1], ["bold"]);
+    } else if (match[2] !== void 0) {
+      pushSegments(segments, match[2], ["italic"]);
+    } else if (match[3] !== void 0) {
+      pushSegments(segments, match[3], ["dim"]);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < resolved.length) {
+    pushSegments(segments, resolved.slice(lastIndex), []);
+  }
+  return segments;
+};
+var pushSegments = (segments, text, styles) => {
+  const parts = text.split("{duration}");
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) {
+      segments.push({ text: parts[i], styles });
+    }
+    if (i < parts.length - 1) {
+      segments.push({ text: "{duration}", styles, isDuration: true });
+    }
+  }
+};
 var createRegexJsonParserInternal = () => {
   let extractedText = null;
   let processedLength = 0;
@@ -7962,10 +8019,16 @@ var morphMessages = (container, newContent, options = {}) => {
   import_idiomorph.Idiomorph.morph(container, newContent.innerHTML, {
     morphStyle: "innerHTML",
     callbacks: {
-      beforeNodeMorphed(oldNode, _newNode) {
+      beforeNodeMorphed(oldNode, newNode) {
         if (!(oldNode instanceof HTMLElement)) return;
         if (preserveTypingAnimation) {
-          if (oldNode.classList.contains("persona-animate-typing") || oldNode.hasAttribute("data-preserve-animation")) {
+          if (oldNode.classList.contains("persona-animate-typing")) {
+            return false;
+          }
+          if (oldNode.hasAttribute("data-preserve-animation")) {
+            if (newNode instanceof HTMLElement && !newNode.hasAttribute("data-preserve-animation")) {
+              return;
+            }
             return false;
           }
         }
@@ -10282,7 +10345,7 @@ var getToolPreviewText = (message, maxLines) => {
   return argsText.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).slice(0, maxLines).join("\n");
 };
 var getToolSummaryText = (message, config) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const tool = message.toolCall;
   const toolDisplayConfig = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.toolCallDisplay;
   const collapsedMode = (_b = toolDisplayConfig == null ? void 0 : toolDisplayConfig.collapsedMode) != null ? _b : "tool-call";
@@ -10292,12 +10355,18 @@ var getToolSummaryText = (message, config) => {
     return { summary: defaultSummary, previewText, isActive: false };
   }
   const isActive = tool.status !== "complete";
+  const toolCallConfig = (_d = config == null ? void 0 : config.toolCall) != null ? _d : {};
   let summary = defaultSummary;
   if (collapsedMode === "tool-name") {
-    summary = ((_d = tool.name) == null ? void 0 : _d.trim()) || defaultSummary;
+    summary = ((_e = tool.name) == null ? void 0 : _e.trim()) || defaultSummary;
   } else if (collapsedMode === "tool-preview" && previewText) {
     summary = previewText;
   }
+  if (isActive && toolCallConfig.activeTextTemplate) {
+    summary = resolveToolHeaderText(tool, toolCallConfig.activeTextTemplate, summary);
+  } else if (!isActive && toolCallConfig.completeTextTemplate) {
+    summary = resolveToolHeaderText(tool, toolCallConfig.completeTextTemplate, summary);
+  }
   return { summary, previewText, isActive };
 };
 var updateToolBubbleUI = (messageId, bubble, config) => {
@@ -10327,7 +10396,7 @@ var updateToolBubbleUI = (messageId, bubble, config) => {
   }
 };
 var createToolBubble = (message, config) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const tool = message.toolCall;
   const toolCallConfig = (_a = config == null ? void 0 : config.toolCall) != null ? _a : {};
   const bubble = createElement(
@@ -10395,14 +10464,23 @@ var createToolBubble = (message, config) => {
   if (toolCallConfig.headerTextColor) {
     title.style.color = toolCallConfig.headerTextColor;
   }
-  const customSummary = (_e = toolCallConfig.renderCollapsedSummary) == null ? void 0 : _e.call(toolCallConfig, {
+  const startedAt = String((_d = tool.startedAt) != null ? _d : Date.now());
+  const createElapsedSpan = () => {
+    const span = createElement("span", "");
+    span.setAttribute("data-tool-elapsed", startedAt);
+    span.textContent = computeToolElapsed(tool);
+    return span;
+  };
+  const customSummary = (_f = toolCallConfig.renderCollapsedSummary) == null ? void 0 : _f.call(toolCallConfig, {
     message,
     toolCall: tool,
     defaultSummary: summary,
     previewText,
-    collapsedMode: (_d = toolDisplayConfig.collapsedMode) != null ? _d : "tool-call",
+    collapsedMode: (_e = toolDisplayConfig.collapsedMode) != null ? _e : "tool-call",
     isActive,
-    config: config != null ? config : {}
+    config: config != null ? config : {},
+    elapsed: computeToolElapsed(tool),
+    createElapsedElement: createElapsedSpan
   });
   if (typeof customSummary === "string" && customSummary.trim()) {
     title.textContent = customSummary;
@@ -10413,6 +10491,79 @@ var createToolBubble = (message, config) => {
     title.textContent = summary;
     headerContent.appendChild(title);
   }
+  const loadingAnimation = (_g = toolDisplayConfig.loadingAnimation) != null ? _g : "none";
+  const activeTemplate = toolCallConfig.activeTextTemplate;
+  const completeTemplate = toolCallConfig.completeTextTemplate;
+  const currentTemplate = isActive ? activeTemplate : completeTemplate;
+  const skipCustomElement = customSummary instanceof HTMLElement;
+  const appendCharSpans = (container, text, startIndex) => {
+    let idx = startIndex;
+    for (const char of text) {
+      const span = createElement("span", "persona-tool-char");
+      span.style.setProperty("--char-index", String(idx));
+      span.textContent = char === " " ? "\xA0" : char;
+      container.appendChild(span);
+      idx++;
+    }
+    return idx;
+  };
+  const renderFormattedTitle = (template, animated) => {
+    var _a2;
+    title.textContent = "";
+    const toolName = ((_a2 = tool.name) == null ? void 0 : _a2.trim()) || "tool";
+    const segments = parseFormattedTemplate(template, toolName);
+    let charIndex = 0;
+    for (const seg of segments) {
+      const parent = seg.styles.length > 0 ? (() => {
+        const w = createElement("span", seg.styles.map((s) => `persona-tool-text-${s}`).join(" "));
+        title.appendChild(w);
+        return w;
+      })() : title;
+      if (seg.isDuration && isActive) {
+        parent.appendChild(createElapsedSpan());
+      } else {
+        const text = seg.isDuration ? computeToolElapsed(tool) : seg.text;
+        if (animated) {
+          charIndex = appendCharSpans(parent, text, charIndex);
+        } else {
+          parent.appendChild(document.createTextNode(text));
+        }
+      }
+    }
+  };
+  if (!skipCustomElement) {
+    if (isActive && loadingAnimation !== "none") {
+      const animDuration = (_h = toolCallConfig.loadingAnimationDuration) != null ? _h : 2e3;
+      title.setAttribute("data-preserve-animation", "true");
+      if (loadingAnimation === "pulse") {
+        title.classList.add("persona-tool-loading-pulse");
+        title.style.setProperty("--persona-tool-anim-duration", `${animDuration}ms`);
+        if (currentTemplate) {
+          renderFormattedTitle(currentTemplate, false);
+        }
+      } else {
+        title.classList.add(`persona-tool-loading-${loadingAnimation}`);
+        title.style.setProperty("--persona-tool-anim-duration", `${animDuration}ms`);
+        if (loadingAnimation === "shimmer-color") {
+          if (toolCallConfig.loadingAnimationColor) {
+            title.style.setProperty("--persona-tool-anim-color", toolCallConfig.loadingAnimationColor);
+          }
+          if (toolCallConfig.loadingAnimationSecondaryColor) {
+            title.style.setProperty("--persona-tool-anim-secondary-color", toolCallConfig.loadingAnimationSecondaryColor);
+          }
+        }
+        if (currentTemplate) {
+          renderFormattedTitle(currentTemplate, true);
+        } else {
+          const text = title.textContent || summary;
+          title.textContent = "";
+          appendCharSpans(title, text, 0);
+        }
+      }
+    } else if (currentTemplate) {
+      renderFormattedTitle(currentTemplate, false);
+    }
+  }
   let toggleIcon = null;
   if (expandable) {
     toggleIcon = createElement("div", "persona-flex persona-items-center");
@@ -10437,7 +10588,7 @@ var createToolBubble = (message, config) => {
   collapsedPreview.style.display = "none";
   collapsedPreview.style.whiteSpace = "pre-wrap";
   if (!expanded && isActive && toolDisplayConfig.activePreview && previewText) {
-    const renderedPreview = (_f = toolCallConfig.renderCollapsedPreview) == null ? void 0 : _f.call(toolCallConfig, {
+    const renderedPreview = (_i = toolCallConfig.renderCollapsedPreview) == null ? void 0 : _i.call(toolCallConfig, {
       message,
       toolCall: tool,
       defaultPreview: previewText,
@@ -14830,8 +14981,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let scrollRAF = null;
   let isAutoScrolling = false;
   let hasPendingAutoScroll = false;
-  const USER_SCROLL_THRESHOLD = 1;
-  const BOTTOM_THRESHOLD = 8;
+  const USER_SCROLL_THRESHOLD = 4;
+  const BOTTOM_THRESHOLD = 24;
+  const AUTO_SCROLL_SNAP_THRESHOLD = 80;
   const messageState = /* @__PURE__ */ new Map();
   const voiceState = {
     active: false,
@@ -14972,6 +15124,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       lastScrollTop = element.scrollTop;
       return;
     }
+    if (Math.abs(distance) >= AUTO_SCROLL_SNAP_THRESHOLD) {
+      cancelSmoothScroll();
+      isAutoScrolling = true;
+      element.scrollTop = target;
+      lastScrollTop = element.scrollTop;
+      isAutoScrolling = false;
+      return;
+    }
     cancelSmoothScroll();
     const startTime = performance.now();
     isAutoScrolling = true;
@@ -15580,9 +15740,28 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     };
   }
+  let toolElapsedTimerId = null;
+  const ensureToolElapsedTimer = () => {
+    if (toolElapsedTimerId != null) return;
+    toolElapsedTimerId = setInterval(() => {
+      const spans = messagesWrapper.querySelectorAll("[data-tool-elapsed]");
+      if (spans.length === 0) {
+        clearInterval(toolElapsedTimerId);
+        toolElapsedTimerId = null;
+        return;
+      }
+      const now = Date.now();
+      spans.forEach((span) => {
+        const startedAt = Number(span.getAttribute("data-tool-elapsed"));
+        if (!startedAt) return;
+        span.textContent = formatElapsedMs(now - startedAt);
+      });
+    }, 100);
+  };
   session = new AgentWidgetSession(config, {
     onMessagesChanged(messages) {
       renderMessagesWithPlugins(messagesWrapper, messages, postprocess);
+      ensureToolElapsedTimer();
       if (session) {
         const hasUserMessage = messages.some((msg) => msg.role === "user");
         if (hasUserMessage) {
@@ -17745,6 +17924,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return session.submitNPSFeedback(rating, comment);
     },
     destroy() {
+      if (toolElapsedTimerId != null) {
+        clearInterval(toolElapsedTimerId);
+        toolElapsedTimerId = null;
+      }
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();
       launcherButtonInstance == null ? void 0 : launcherButtonInstance.destroy();

package/dist/theme-editor.d.cts

@@ -1126,6 +1126,13 @@ type AgentWidgetScrollToBottomFeature = {
     label?: string;
 };
 type AgentWidgetToolCallCollapsedMode = "tool-call" | "tool-name" | "tool-preview";
+/**
+ * Animation mode applied to tool call header text while the tool is running.
+ * Character-by-character modes (`shimmer`, `shimmer-color`, `rainbow`) wrap each
+ * character in a span with staggered `animation-delay`. `pulse` applies to the
+ * entire text container. Honors `prefers-reduced-motion`.
+ */
+type AgentWidgetToolCallLoadingAnimation = "none" | "pulse" | "shimmer" | "shimmer-color" | "rainbow";
 type AgentWidgetToolCallDisplayFeature = {
     /**
      * Controls what collapsed tool call rows show in their header/summary area.
@@ -1139,6 +1146,8 @@ type AgentWidgetToolCallDisplayFeature = {
     activePreview?: boolean;
     /**
      * Optional CSS min-height applied to active collapsed tool call rows.
+     * @default undefined (no min-height)
+     * @example "100px"
      */
     activeMinHeight?: string;
     /**
@@ -1157,6 +1166,16 @@ type AgentWidgetToolCallDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the tool call header text while the tool is active.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetReasoningDisplayFeature = {
     /**
@@ -1672,22 +1691,39 @@ type AgentWidgetApprovalConfig = {
 type AgentWidgetToolCallConfig$1 = {
     /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
     shadow?: string;
+    /** Background color of the tool call bubble container. */
     backgroundColor?: string;
+    /** Border color of the tool call bubble container. */
     borderColor?: string;
+    /** Border width of the tool call bubble container (CSS value, e.g. `"1px"`). */
     borderWidth?: string;
+    /** Border radius of the tool call bubble container (CSS value, e.g. `"12px"`). */
     borderRadius?: string;
+    /** Background color of the collapsed header row. */
     headerBackgroundColor?: string;
+    /** Text color of the collapsed header row (tool name / summary). */
     headerTextColor?: string;
+    /** Horizontal padding of the collapsed header row (CSS value). */
     headerPaddingX?: string;
+    /** Vertical padding of the collapsed header row (CSS value). */
     headerPaddingY?: string;
+    /** Background color of the expanded content area. */
     contentBackgroundColor?: string;
+    /** Text color of the expanded content area. */
     contentTextColor?: string;
+    /** Horizontal padding of the expanded content area (CSS value). */
     contentPaddingX?: string;
+    /** Vertical padding of the expanded content area (CSS value). */
     contentPaddingY?: string;
+    /** Background color of code blocks (arguments / result) in the expanded area. */
     codeBlockBackgroundColor?: string;
+    /** Border color of code blocks in the expanded area. */
     codeBlockBorderColor?: string;
+    /** Text color of code blocks in the expanded area. */
     codeBlockTextColor?: string;
+    /** Color of the expand/collapse toggle icon. */
     toggleTextColor?: string;
+    /** Color of section labels ("Arguments", "Result", "Activity") in the expanded area. */
     labelTextColor?: string;
     /**
      * Override the collapsed summary row content for a tool call bubble.
@@ -1701,6 +1737,14 @@ type AgentWidgetToolCallConfig$1 = {
         collapsedMode: AgentWidgetToolCallCollapsedMode;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active tool rows.
@@ -1723,6 +1767,47 @@ type AgentWidgetToolCallConfig$1 = {
         defaultSummary: string;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while a tool call is active (running).
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time and
+     * applied as styled `<span>` elements. Works with all animation modes.
+     *
+     * When not set, falls back to the current `collapsedMode` behavior.
+     * @example "Calling {toolName}... ~{duration}~"
+     * @example "**Searching** *{toolName}*..."
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when a tool call is complete.
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the existing "Used tool for X seconds" text.
+     * @example "Finished {toolName} ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetReasoningConfig = {
     /**

package/dist/theme-editor.d.ts

@@ -1126,6 +1126,13 @@ type AgentWidgetScrollToBottomFeature = {
     label?: string;
 };
 type AgentWidgetToolCallCollapsedMode = "tool-call" | "tool-name" | "tool-preview";
+/**
+ * Animation mode applied to tool call header text while the tool is running.
+ * Character-by-character modes (`shimmer`, `shimmer-color`, `rainbow`) wrap each
+ * character in a span with staggered `animation-delay`. `pulse` applies to the
+ * entire text container. Honors `prefers-reduced-motion`.
+ */
+type AgentWidgetToolCallLoadingAnimation = "none" | "pulse" | "shimmer" | "shimmer-color" | "rainbow";
 type AgentWidgetToolCallDisplayFeature = {
     /**
      * Controls what collapsed tool call rows show in their header/summary area.
@@ -1139,6 +1146,8 @@ type AgentWidgetToolCallDisplayFeature = {
     activePreview?: boolean;
     /**
      * Optional CSS min-height applied to active collapsed tool call rows.
+     * @default undefined (no min-height)
+     * @example "100px"
      */
     activeMinHeight?: string;
     /**
@@ -1157,6 +1166,16 @@ type AgentWidgetToolCallDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the tool call header text while the tool is active.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetReasoningDisplayFeature = {
     /**
@@ -1672,22 +1691,39 @@ type AgentWidgetApprovalConfig = {
 type AgentWidgetToolCallConfig$1 = {
     /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
     shadow?: string;
+    /** Background color of the tool call bubble container. */
     backgroundColor?: string;
+    /** Border color of the tool call bubble container. */
     borderColor?: string;
+    /** Border width of the tool call bubble container (CSS value, e.g. `"1px"`). */
     borderWidth?: string;
+    /** Border radius of the tool call bubble container (CSS value, e.g. `"12px"`). */
     borderRadius?: string;
+    /** Background color of the collapsed header row. */
     headerBackgroundColor?: string;
+    /** Text color of the collapsed header row (tool name / summary). */
     headerTextColor?: string;
+    /** Horizontal padding of the collapsed header row (CSS value). */
     headerPaddingX?: string;
+    /** Vertical padding of the collapsed header row (CSS value). */
     headerPaddingY?: string;
+    /** Background color of the expanded content area. */
     contentBackgroundColor?: string;
+    /** Text color of the expanded content area. */
     contentTextColor?: string;
+    /** Horizontal padding of the expanded content area (CSS value). */
     contentPaddingX?: string;
+    /** Vertical padding of the expanded content area (CSS value). */
     contentPaddingY?: string;
+    /** Background color of code blocks (arguments / result) in the expanded area. */
     codeBlockBackgroundColor?: string;
+    /** Border color of code blocks in the expanded area. */
     codeBlockBorderColor?: string;
+    /** Text color of code blocks in the expanded area. */
     codeBlockTextColor?: string;
+    /** Color of the expand/collapse toggle icon. */
     toggleTextColor?: string;
+    /** Color of section labels ("Arguments", "Result", "Activity") in the expanded area. */
     labelTextColor?: string;
     /**
      * Override the collapsed summary row content for a tool call bubble.
@@ -1701,6 +1737,14 @@ type AgentWidgetToolCallConfig$1 = {
         collapsedMode: AgentWidgetToolCallCollapsedMode;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active tool rows.
@@ -1723,6 +1767,47 @@ type AgentWidgetToolCallConfig$1 = {
         defaultSummary: string;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while a tool call is active (running).
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time and
+     * applied as styled `<span>` elements. Works with all animation modes.
+     *
+     * When not set, falls back to the current `collapsedMode` behavior.
+     * @example "Calling {toolName}... ~{duration}~"
+     * @example "**Searching** *{toolName}*..."
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when a tool call is complete.
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the existing "Used tool for X seconds" text.
+     * @example "Finished {toolName} ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetReasoningConfig = {
     /**