@mieweb/ui 0.7.1 → 0.7.2-dev.0

package/dist/{chunk-RHYIFIT5.js → chunk-RZFSJD67.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-ZVSW2KS6.js';
+import { Button } from './chunk-WRYZ2752.js';
 import { Eye, Code, Check, ClipboardCopy } from 'lucide-react';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -94,5 +94,5 @@ var FenceBlock = ({
 };
 
 export { FenceBlock };
-//# sourceMappingURL=chunk-RHYIFIT5.js.map
-//# sourceMappingURL=chunk-RHYIFIT5.js.map
+//# sourceMappingURL=chunk-RZFSJD67.js.map
+//# sourceMappingURL=chunk-RZFSJD67.js.map

package/dist/{chunk-RHYIFIT5.js.map → chunk-RZFSJD67.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Markdown/FenceBlock.tsx"],"names":[],"mappings":"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","file":"chunk-RHYIFIT5.js","sourcesContent":["/**\n * FenceBlock — Base wrapper for code blocks with copy, raw view toggle, and errors.\n */\nimport { Check, ClipboardCopy, Code, Eye } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\n\nexport interface FenceBlockProps {\n  code: string;\n  language?: string;\n  supportsRawView?: boolean;\n  error?: string;\n  children: React.ReactNode;\n  /** Extra buttons rendered in the header before the copy button */\n  headerActions?: React.ReactNode;\n}\n\ntype CopyState = 'idle' | 'copying' | 'success' | 'error';\n\nexport const FenceBlock: React.FC<FenceBlockProps> = ({\n  code,\n  language,\n  supportsRawView = false,\n  error,\n  children,\n  headerActions,\n}) => {\n  const [copyState, setCopyState] = useState<CopyState>('idle');\n  const [showRaw, setShowRaw] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const scheduleReset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setCopyState('idle'), 2000);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (copyState === 'copying') return;\n    setCopyState('copying');\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopyState('success');\n      scheduleReset();\n    } catch {\n      try {\n        const textarea = document.createElement('textarea');\n        textarea.value = code;\n        textarea.style.position = 'fixed';\n        textarea.style.opacity = '0';\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        setCopyState('success');\n      } catch {\n        setCopyState('error');\n      }\n      scheduleReset();\n    }\n  }, [code, copyState, scheduleReset]);\n\n  return (\n    <div className=\"group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-[#1a1d24]\">\n      <div className=\"flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-white/[0.08]\">\n        <span className=\"text-xs font-medium text-neutral-500 dark:text-neutral-400\">\n          {language\n            ? language.charAt(0).toUpperCase() + language.slice(1)\n            : 'Text'}\n        </span>\n        <div className=\"flex items-center gap-1\">\n          {headerActions}\n          {supportsRawView && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowRaw((v) => !v)}\n              aria-label={showRaw ? 'Show rendered view' : 'Show raw code'}\n              className=\"h-7 w-7 p-0\"\n            >\n              {showRaw ? (\n                <Eye className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Code className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCopy}\n            aria-label=\"Copy code\"\n            className=\"h-7 w-7 p-0\"\n          >\n            {copyState === 'success' ? (\n              <Check className=\"h-3.5 w-3.5 text-green-500\" />\n            ) : (\n              <ClipboardCopy className=\"h-3.5 w-3.5\" />\n            )}\n          </Button>\n        </div>\n      </div>\n\n      {error ? (\n        <div className=\"p-3\">\n          <div className=\"rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300\">\n            {error}\n          </div>\n          <pre className=\"mt-2 overflow-x-auto text-xs whitespace-pre-wrap text-neutral-600 dark:text-neutral-400\">\n            <code>{code}</code>\n          </pre>\n        </div>\n      ) : showRaw ? (\n        <pre\n          className=\"overflow-x-auto p-3 text-sm\"\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- scrollable code needs keyboard focus (axe: scrollable-region-focusable)\n          tabIndex={0}\n          role=\"region\"\n          aria-label=\"Raw code\"\n        >\n          <code>{code}</code>\n        </pre>\n      ) : (\n        <div className=\"overflow-x-auto\">{children}</div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/components/Markdown/FenceBlock.tsx"],"names":[],"mappings":"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","file":"chunk-RZFSJD67.js","sourcesContent":["/**\n * FenceBlock — Base wrapper for code blocks with copy, raw view toggle, and errors.\n */\nimport { Check, ClipboardCopy, Code, Eye } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\n\nexport interface FenceBlockProps {\n  code: string;\n  language?: string;\n  supportsRawView?: boolean;\n  error?: string;\n  children: React.ReactNode;\n  /** Extra buttons rendered in the header before the copy button */\n  headerActions?: React.ReactNode;\n}\n\ntype CopyState = 'idle' | 'copying' | 'success' | 'error';\n\nexport const FenceBlock: React.FC<FenceBlockProps> = ({\n  code,\n  language,\n  supportsRawView = false,\n  error,\n  children,\n  headerActions,\n}) => {\n  const [copyState, setCopyState] = useState<CopyState>('idle');\n  const [showRaw, setShowRaw] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const scheduleReset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setCopyState('idle'), 2000);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (copyState === 'copying') return;\n    setCopyState('copying');\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopyState('success');\n      scheduleReset();\n    } catch {\n      try {\n        const textarea = document.createElement('textarea');\n        textarea.value = code;\n        textarea.style.position = 'fixed';\n        textarea.style.opacity = '0';\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n        setCopyState('success');\n      } catch {\n        setCopyState('error');\n      }\n      scheduleReset();\n    }\n  }, [code, copyState, scheduleReset]);\n\n  return (\n    <div className=\"group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-[#1a1d24]\">\n      <div className=\"flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-white/[0.08]\">\n        <span className=\"text-xs font-medium text-neutral-500 dark:text-neutral-400\">\n          {language\n            ? language.charAt(0).toUpperCase() + language.slice(1)\n            : 'Text'}\n        </span>\n        <div className=\"flex items-center gap-1\">\n          {headerActions}\n          {supportsRawView && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowRaw((v) => !v)}\n              aria-label={showRaw ? 'Show rendered view' : 'Show raw code'}\n              className=\"h-7 w-7 p-0\"\n            >\n              {showRaw ? (\n                <Eye className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Code className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCopy}\n            aria-label=\"Copy code\"\n            className=\"h-7 w-7 p-0\"\n          >\n            {copyState === 'success' ? (\n              <Check className=\"h-3.5 w-3.5 text-green-500\" />\n            ) : (\n              <ClipboardCopy className=\"h-3.5 w-3.5\" />\n            )}\n          </Button>\n        </div>\n      </div>\n\n      {error ? (\n        <div className=\"p-3\">\n          <div className=\"rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300\">\n            {error}\n          </div>\n          <pre className=\"mt-2 overflow-x-auto text-xs whitespace-pre-wrap text-neutral-600 dark:text-neutral-400\">\n            <code>{code}</code>\n          </pre>\n        </div>\n      ) : showRaw ? (\n        <pre\n          className=\"overflow-x-auto p-3 text-sm\"\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- scrollable code needs keyboard focus (axe: scrollable-region-focusable)\n          tabIndex={0}\n          role=\"region\"\n          aria-label=\"Raw code\"\n        >\n          <code>{code}</code>\n        </pre>\n      ) : (\n        <div className=\"overflow-x-auto\">{children}</div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/{chunk-NQME7MCK.js → chunk-RZJXCI53.js}

@@ -1,7 +1,7 @@
-import { AudioPlayer } from './chunk-KAKH2UZA.js';
-import { cn } from './chunk-F3SOEIN2.js';
+import { AudioPlayer } from './chunk-XO3WLK65.js';
+import { cn } from './chunk-TQONQSJO.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React2 from 'react';
 import { cva } from 'class-variance-authority';
 
 var sizeClasses = {
@@ -204,6 +204,68 @@ function SpinnerIcon({ className }) {
     }
   );
 }
+function CollapsiblePill({
+  label,
+  leadingIcon,
+  density = "standard",
+  defaultOpen = false,
+  pillClassName,
+  className,
+  title,
+  children
+}) {
+  const hasContent = Boolean(children);
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const contentId = React2.useId();
+  React2.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = () => {
+    setIsOpen((open) => !open);
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "collapsible-pill", className, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: hasContent ? toggle : void 0,
+        "aria-expanded": hasContent ? isOpen : void 0,
+        "aria-controls": hasContent ? contentId : void 0,
+        title,
+        disabled: !hasContent,
+        className: cn(
+          "focus-visible:ring-ring inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+          density === "condensed" ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+          pillClassName
+        ),
+        children: [
+          leadingIcon,
+          /* @__PURE__ */ jsx("span", { children: label }),
+          hasContent && /* @__PURE__ */ jsx(
+            ChevronIcon,
+            {
+              direction: isOpen ? "down" : "right",
+              className: density === "condensed" ? "h-2.5 w-2.5 opacity-60" : "h-3 w-3 opacity-60"
+            }
+          )
+        ]
+      }
+    ),
+    hasContent && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: contentId,
+        "aria-hidden": !isOpen,
+        inert: !isOpen || void 0,
+        className: cn(
+          "overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out",
+          isOpen ? "max-h-[500px] overflow-y-auto opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "mt-1.5", children })
+      }
+    )
+  ] });
+}
 var statusIconVariants = cva(
   "flex h-5 w-5 items-center justify-center rounded-full",
   {
@@ -671,10 +733,8 @@ function ResourceLink({ link, onClick, className }) {
 function ToolResultDisplay({
   result,
   onLinkClick,
-  showRawData = false,
   className
 }) {
-  const [showJson, setShowJson] = React.useState(false);
   if (result.type === "error") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -687,7 +747,6 @@ function ToolResultDisplay({
       }
     );
   }
-  const hasRawData = result.type === "json" && result.data !== void 0 && result.data !== null;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     result.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: result.summary }),
     result.link && /* @__PURE__ */ jsx(ResourceLink, { link: result.link, onClick: onLinkClick }),
@@ -702,67 +761,9 @@ function ToolResultDisplay({
         onClick: onLinkClick
       },
       resource.id
-    )) }),
-    hasRawData && showRawData && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setShowJson(!showJson),
-          className: "flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-          children: [
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: cn(
-                  "h-3 w-3 transition-transform",
-                  showJson && "rotate-90"
-                ),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9 5l7 7-7 7"
-                  }
-                )
-              }
-            ),
-            showJson ? "Hide" : "Show",
-            " raw data"
-          ]
-        }
-      ),
-      showJson && /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-40 overflow-auto rounded-md bg-neutral-100 p-2 text-xs dark:bg-neutral-800", children: JSON.stringify(result.data, null, 2) })
-    ] })
+    )) })
   ] });
 }
-var toolCallVariants = cva(
-  ["rounded-lg border", "overflow-hidden", "transition-all duration-200"],
-  {
-    variants: {
-      status: {
-        pending: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        running: "border-primary-200 bg-primary-50/50 dark:border-primary-800 dark:bg-primary-900/20",
-        success: "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-900/20",
-        error: "border-red-200 bg-red-50/50 dark:border-red-800 dark:bg-red-900/20",
-        cancelled: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50 opacity-60"
-      },
-      compact: {
-        true: "p-2",
-        false: "p-3"
-      }
-    },
-    defaultVariants: {
-      status: "pending",
-      compact: false
-    }
-  }
-);
 var TOOL_FRIENDLY_NAMES = {
   create_patient: "Creating patient",
   get_patient: "Looking up patient",
@@ -827,120 +828,113 @@ function getParameterSummary(toolName, params) {
   }
   return null;
 }
+var statusPillClasses = {
+  pending: "bg-neutral-100 border-neutral-200 text-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  running: "bg-primary-50 border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800 dark:text-primary-300",
+  success: "bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-300",
+  error: "bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300",
+  cancelled: "bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400"
+};
 function MCPToolCallDisplay({
   toolCall,
   showParameters = true,
   collapsible = true,
-  defaultCollapsed = true,
+  defaultCollapsed,
   compact,
+  hidden = false,
   onLinkClick,
   className
 }) {
-  const [showDetails, setShowDetails] = React.useState(!defaultCollapsed);
   const formatDuration = (ms) => {
     if (!ms) return null;
     if (ms < 1e3) return `${ms}ms`;
     return `${(ms / 1e3).toFixed(1)}s`;
   };
   const friendlyName = getToolFriendlyName(toolCall.toolName, toolCall.status);
+  const durationLabel = formatDuration(toolCall.duration);
   const paramSummary = getParameterSummary(
     toolCall.toolName,
     toolCall.parameters
   );
-  return /* @__PURE__ */ jsx(
+  const detailBit = toolCall.status === "success" ? durationLabel : paramSummary ?? durationLabel;
+  const pillLabel = detailBit ? `${friendlyName} \xB7 ${detailBit}` : friendlyName;
+  const hasParams = showParameters && toolCall.parameters.length > 0;
+  const hasBoxContent = Boolean(toolCall.result || toolCall.error || hasParams);
+  const isCompleted = toolCall.status === "success" || toolCall.status === "error";
+  const effectiveDefaultCollapsed = defaultCollapsed ?? !isCompleted;
+  if (hidden) return null;
+  const box = /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "ai-tool-call",
       className: cn(
-        toolCallVariants({ status: toolCall.status, compact }),
-        className
+        "w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
+        compact ? "p-2" : "p-3"
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx(
+      children: [
+        toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", children: /* @__PURE__ */ jsx(
+          ToolResultDisplay,
+          {
+            result: toolCall.result,
+            onLinkClick
+          }
+        ) }),
+        toolCall.error && /* @__PURE__ */ jsx("div", { className: "rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
+        hasParams && /* @__PURE__ */ jsxs(
           "div",
           {
-            "data-slot": "ai-tool-icon",
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/50 text-neutral-600 dark:bg-neutral-700/50 dark:text-neutral-400",
-            children: getToolIcon(toolCall.toolName)
+            "data-slot": "ai-tool-parameters",
+            className: "rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
+            children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
+                  param.name,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
+              ] }, param.name)) })
+            ]
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { "data-slot": "ai-tool-content", className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-white", children: friendlyName }),
-            /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
-            toolCall.duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: formatDuration(toolCall.duration) })
-          ] }),
-          paramSummary && toolCall.status !== "success" && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: paramSummary }),
-          toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", className: "mt-2", children: /* @__PURE__ */ jsx(
-            ToolResultDisplay,
-            {
-              result: toolCall.result,
-              onLinkClick,
-              showRawData: showDetails
-            }
-          ) }),
-          toolCall.error && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
-          collapsible && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setShowDetails(!showDetails),
-              className: "mt-2 flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    className: cn(
-                      "h-3 w-3 transition-transform",
-                      showDetails && "rotate-90"
-                    ),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                showDetails ? "Hide" : "Show",
-                " details"
-              ]
-            }
-          ),
-          showDetails && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "ai-tool-parameters",
-              className: "mt-3 rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
-              children: [
-                /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
-                /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-start gap-2 text-xs",
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
-                        param.name,
-                        ":"
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
-                    ]
-                  },
-                  param.name
-                )) })
-              ]
-            }
-          )
-        ] })
-      ] })
+        )
+      ]
+    }
+  );
+  const staticPill = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "ai-tool-pill",
+      className: cn(
+        "inline-flex items-center gap-1.5 border font-medium",
+        compact ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+        statusPillClasses[toolCall.status]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
+        /* @__PURE__ */ jsx("span", { children: pillLabel })
+      ]
     }
   );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-call", className, children: !hasBoxContent ? staticPill : collapsible ? (
+    // Pill click reveals the whole box (result + params) in one go.
+    /* @__PURE__ */ jsx(
+      CollapsiblePill,
+      {
+        label: pillLabel,
+        leadingIcon: /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
+        density: compact ? "condensed" : "standard",
+        defaultOpen: !effectiveDefaultCollapsed,
+        pillClassName: statusPillClasses[toolCall.status],
+        title: "Toggle details",
+        children: box
+      }
+    )
+  ) : (
+    // Non-collapsible: pill + box always visible.
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      staticPill,
+      box
+    ] })
+  ) });
 }
 var avatarVariants = cva(
   "flex shrink-0 items-center justify-center rounded-full",
@@ -1075,6 +1069,39 @@ function AITypingIndicator({ className }) {
     }
   );
 }
+function ThinkingBlock({
+  text,
+  streaming,
+  defaultCollapsed = false
+}) {
+  const startedAt = React2.useRef(Date.now());
+  const [elapsed, setElapsed] = React2.useState(null);
+  const prevStreaming = React2.useRef(streaming);
+  React2.useEffect(() => {
+    if (prevStreaming.current && !streaming) {
+      setElapsed(Math.round((Date.now() - startedAt.current) / 1e3));
+    }
+    prevStreaming.current = streaming;
+  }, [streaming]);
+  const label = streaming ? "Thinking" : elapsed !== null && elapsed > 0 ? `Thought for ${elapsed}s` : "Thought";
+  const dot = streaming ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-violet-500 dark:bg-violet-400"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "ai-message-thinking", children: /* @__PURE__ */ jsx(
+    CollapsiblePill,
+    {
+      label,
+      leadingIcon: dot,
+      defaultOpen: !defaultCollapsed,
+      pillClassName: "bg-violet-50 border-violet-200 text-violet-600 hover:bg-violet-100 dark:bg-violet-950/30 dark:border-violet-800 dark:text-violet-400 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500",
+      children: /* @__PURE__ */ jsx("div", { className: "border-s-2 border-violet-200 ps-3 text-[13px] leading-relaxed text-neutral-600 italic dark:border-violet-700 dark:text-neutral-400", children: text })
+    }
+  ) });
+}
 function ContentBlock({
   content,
   onLinkClick,
@@ -1083,9 +1110,6 @@ function ContentBlock({
   role,
   renderTextContent
 }) {
-  const [isCollapsed, setIsCollapsed] = React.useState(
-    content.collapsed ?? false
-  );
   if (content.type === "text" && content.text) {
     if (renderTextContent) {
       return /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: renderTextContent(content.text, { messageId, streaming, role }) });
@@ -1103,52 +1127,12 @@ function ContentBlock({
     );
   }
   if (content.type === "thinking" && content.text) {
-    return /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsx(
+      ThinkingBlock,
       {
-        "data-slot": "ai-message-thinking",
-        className: "rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setIsCollapsed(!isCollapsed),
-              className: "flex w-full items-center justify-between px-3 py-2 text-left",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      "aria-hidden": "true",
-                      className: "h-4 w-4",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                        }
-                      )
-                    }
-                  ),
-                  "Thinking..."
-                ] }),
-                /* @__PURE__ */ jsx(
-                  ChevronIcon,
-                  {
-                    direction: isCollapsed ? "right" : "down",
-                    className: "text-neutral-400"
-                  }
-                )
-              ]
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-200 px-3 py-2 dark:border-neutral-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 italic dark:text-neutral-400", children: content.text }) })
-        ]
+        text: content.text,
+        streaming,
+        defaultCollapsed: content.collapsed ?? false
       }
     );
   }
@@ -1297,7 +1281,7 @@ var bubbleVariants = cva("rounded-2xl px-4 py-2.5 w-fit max-w-[85%]", {
     variant: "assistant"
   }
 });
-var ChatBubble = React.forwardRef(
+var ChatBubble = React2.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1324,10 +1308,12 @@ function AIMessageDisplay({
   showTimestamp = false,
   onLinkClick,
   renderTextContent,
+  renderMessageFooter,
   className
 }) {
   const isStreaming = message.status === "streaming";
   const hasContent = message.content.length > 0;
+  const messageFooter = renderMessageFooter?.(message);
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString(void 0, {
@@ -1394,6 +1380,7 @@ function AIMessageDisplay({
                   )) }) : isStreaming ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(AITypingIndicator, {}) }) : null
                 }
               ),
+              messageFooter != null && messageFooter !== false && /* @__PURE__ */ jsx("div", { "data-slot": "ai-message-footer", className: "w-fit max-w-[85%]", children: messageFooter }),
               showTimestamp && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -1411,6 +1398,6 @@ function AIMessageDisplay({
   );
 }
 
-export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
-//# sourceMappingURL=chunk-NQME7MCK.js.map
-//# sourceMappingURL=chunk-NQME7MCK.js.map
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
+//# sourceMappingURL=chunk-RZJXCI53.js.map
+//# sourceMappingURL=chunk-RZJXCI53.js.map