@flanksource/clicky-ui 0.3.16 → 0.3.18

package/dist/data/chat/ContextMeter.js

@@ -1,9 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import { cn } from "../../lib/utils.js";
 import { compactTokens, formatCost } from "../../lib/tokens.js";
 import { Icon } from "../Icon.js";
 import { HoverCard } from "../../overlay/HoverCard.js";
 import { effortLevelIcon, effortLevelColor, effortLevelLabel } from "./effort-icons.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiCopy } from "../../icons/components/UiCopy.js";
+const COPY_STATUS_RESET_MS = 2e3;
 const GAUGE_RADIUS = 15;
 const GAUGE_CIRCUMFERENCE = 2 * Math.PI * GAUGE_RADIUS;
 function barTone(pct) {
@@ -72,6 +76,8 @@ function ContextMeter({
   usedTokens,
   windowTokens,
   messageCount,
+  sessionId,
+  executionMode,
   model,
   modelIcon: Glyph,
   modelIconClassName,
@@ -81,11 +87,38 @@ function ContextMeter({
   budget,
   className
 }) {
+  const [copyResult, setCopyResult] = useState();
+  const copyResetTimer = useRef(void 0);
+  useEffect(
+    () => () => {
+      if (copyResetTimer.current !== void 0) {
+        window.clearTimeout(copyResetTimer.current);
+      }
+    },
+    []
+  );
   const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));
   const totalTokens = (tokens == null ? void 0 : tokens.total) ?? 0;
   const totalCost = (cost == null ? void 0 : cost.total) ?? 0;
   const EffortGlyph = effort ? effortLevelIcon(effort) : void 0;
   const effortColor = effort ? effortLevelColor(effort) : void 0;
+  const copyStatus = copyResult && copyResult.sessionId === sessionId ? copyResult.status : void 0;
+  const copySessionId = async () => {
+    if (!sessionId) return;
+    if (copyResetTimer.current !== void 0) {
+      window.clearTimeout(copyResetTimer.current);
+    }
+    try {
+      await navigator.clipboard.writeText(sessionId);
+      setCopyResult({ sessionId, status: "copied" });
+    } catch {
+      setCopyResult({ sessionId, status: "failed" });
+    }
+    copyResetTimer.current = window.setTimeout(
+      () => setCopyResult(void 0),
+      COPY_STATUS_RESET_MS
+    );
+  };
   const trigger = mode === "gauge" ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -186,80 +219,118 @@ function ContextMeter({
       ]
     }
   );
-  return /* @__PURE__ */ jsx(HoverCard, { trigger, placement: "bottom", cardClassName: "w-72 p-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 text-xs", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Context usage" }),
-      /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", textTone(pct)), children: [
-        pct,
-        "%"
-      ] })
-    ] }),
-    (model || effort) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border pb-2", children: [
-      model ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-        Glyph && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon: Glyph,
-            className: cn("size-4 shrink-0", modelIconClassName)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", title: model, children: model })
-      ] }) : null,
-      effort ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "inline-flex shrink-0 items-center gap-1 font-medium",
-            effortColor
+  return /* @__PURE__ */ jsx(
+    HoverCard,
+    {
+      trigger,
+      placement: "bottom",
+      delay: 200,
+      cardClassName: "w-72 p-3",
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Context usage" }),
+          /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", textTone(pct)), children: [
+            pct,
+            "%"
+          ] })
+        ] }),
+        (model || effort) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border pb-2", children: [
+          model ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            Glyph && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: Glyph,
+                className: cn("size-4 shrink-0", modelIconClassName)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", title: model, children: model })
+          ] }) : null,
+          effort ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex shrink-0 items-center gap-1 font-medium",
+                effortColor
+              ),
+              children: [
+                EffortGlyph ? /* @__PURE__ */ jsx(EffortGlyph, { className: "size-3.5" }) : null,
+                effortLevelLabel(effort),
+                " effort"
+              ]
+            }
+          ) : null
+        ] }),
+        (sessionId || executionMode) && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-b border-border pb-2", children: [
+          sessionId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Session" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": copyStatus === "copied" ? "Session ID copied" : copyStatus === "failed" ? "Session ID copy failed" : "Copy session ID",
+                title: sessionId,
+                className: cn(
+                  "flex min-w-0 max-w-48 items-center gap-1.5 font-medium hover:text-foreground",
+                  copyStatus === "failed" && "text-destructive"
+                ),
+                onClick: () => void copySessionId(),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-mono", children: sessionId }),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: copyStatus === "copied" ? UiCheck : UiCopy,
+                      className: "size-3.5 shrink-0"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : null,
+          executionMode ? /* @__PURE__ */ jsx(Row, { label: "Mode", value: executionMode }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("h-full rounded-full", barTone(pct)),
+              style: { width: `${pct}%` }
+            }
+          ) }),
+          windowTokens ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Row,
+              {
+                label: "Window",
+                value: `${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`
+              }
+            ),
+            /* @__PURE__ */ jsx(Row, { label: "Free", value: `${100 - pct}%` })
+          ] }) : /* @__PURE__ */ jsx(Row, { label: "Used", value: `${pct}%` }),
+          messageCount != null ? /* @__PURE__ */ jsx(Row, { label: "Messages", value: String(messageCount) }) : null
+        ] }),
+        (totalTokens > 0 || totalCost > 0 || budget) && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-2", children: [
+          (totalTokens > 0 || totalCost > 0) && /* @__PURE__ */ jsx(
+            UsageTable,
+            {
+              rows: bucketRows(tokens, cost),
+              totalTokens,
+              totalCost,
+              showTokens: totalTokens > 0,
+              showCost: totalCost > 0
+            }
           ),
-          children: [
-            EffortGlyph ? /* @__PURE__ */ jsx(EffortGlyph, { className: "size-3.5" }) : null,
-            effortLevelLabel(effort),
-            " effort"
-          ]
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("h-full rounded-full", barTone(pct)),
-          style: { width: `${pct}%` }
-        }
-      ) }),
-      windowTokens ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Row,
-          {
-            label: "Window",
-            value: `${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`
-          }
-        ),
-        /* @__PURE__ */ jsx(Row, { label: "Free", value: `${100 - pct}%` })
-      ] }) : /* @__PURE__ */ jsx(Row, { label: "Used", value: `${pct}%` }),
-      messageCount != null ? /* @__PURE__ */ jsx(Row, { label: "Messages", value: String(messageCount) }) : null
-    ] }),
-    (totalTokens > 0 || totalCost > 0 || budget) && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-2", children: [
-      (totalTokens > 0 || totalCost > 0) && /* @__PURE__ */ jsx(
-        UsageTable,
-        {
-          rows: bucketRows(tokens, cost),
-          totalTokens,
-          totalCost,
-          showTokens: totalTokens > 0,
-          showCost: totalCost > 0
-        }
-      ),
-      (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsx(
-        Row,
-        {
-          label: "Budget",
-          value: `${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`
-        }
-      ) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsx(Row, { label: "Budget left", value: formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
-    ] })
-  ] }) });
+          (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "Budget",
+              value: `${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`
+            }
+          ) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsx(Row, { label: "Budget left", value: formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
+        ] })
+      ] })
+    }
+  );
 }
 export {
   ContextMeter

package/dist/data/chat/ContextMeter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMeter.js","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\nimport {\n  effortLevelColor,\n  effortLevelIcon,\n  effortLevelLabel,\n} from \"./effort-icons\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  modelIconClassName?: string | undefined;\n  /** Reasoning effort shown with its semantic glyph and color in the hover card. */\n  effort?: string | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nconst GAUGE_RADIUS = 15;\nconst GAUGE_CIRCUMFERENCE = 2 * Math.PI * GAUGE_RADIUS;\n\nfunction barTone(pct: number): string {\n  return pct > 80\n    ? \"bg-red-600 [[data-theme=dark]_&]:bg-red-400\"\n    : pct > 50\n      ? \"bg-amber-700 [[data-theme=dark]_&]:bg-amber-400\"\n      : \"bg-emerald-600 [[data-theme=dark]_&]:bg-emerald-400\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-700 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-700 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = {\n  label: string;\n  tokens?: number | undefined;\n  cost?: number | undefined;\n};\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(\n  tokens?: ContextMeterTokens,\n  cost?: ContextMeterCost,\n): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    {\n      label: \"Cache write\",\n      tokens: tokens?.cacheWrite,\n      cost: cost?.cacheWrite,\n    },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>\n          )}\n          {showCost && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>\n          )}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">\n              {row.label}\n            </td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? (\n                  compactTokens(row.tokens)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? (\n                  formatCost(row.cost)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && (\n            <td className={numCell}>{compactTokens(totalTokens)}</td>\n          )}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  context-window breakdown, per-bucket token usage and the cost + budget\n *  detail. Domain-agnostic — callers feed plain numbers. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  model,\n  modelIcon: Glyph,\n  modelIconClassName,\n  effort,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n  const EffortGlyph = effort ? effortLevelIcon(effort) : undefined;\n  const effortColor = effort ? effortLevelColor(effort) : undefined;\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center rounded-md px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"relative inline-flex size-9 shrink-0 items-center justify-center\">\n          <svg\n            data-context-gauge-ring\n            aria-hidden=\"true\"\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            className={cn(\"absolute inset-0\", ringTone(pct))}\n          >\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              opacity=\"0.15\"\n            />\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeDasharray={GAUGE_CIRCUMFERENCE}\n              strokeDashoffset={(1 - pct / 100) * GAUGE_CIRCUMFERENCE}\n              strokeLinecap=\"round\"\n              transform=\"rotate(-90 18 18)\"\n            />\n          </svg>\n          {Glyph ? (\n            <Icon\n              icon={Glyph}\n              className={cn(\"relative size-5\", modelIconClassName)}\n            />\n          ) : (\n            <span\n              className={cn(\n                \"relative text-[9px] font-semibold tabular-nums\",\n                textTone(pct),\n              )}\n            >\n              {pct}\n            </span>\n          )}\n        </span>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span\n            className={cn(\n              \"block h-full rounded-full transition-all\",\n              barTone(pct),\n            )}\n            style={{ width: `${pct}%` }}\n          />\n        </span>\n        <span\n          className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}\n        >\n          {pct}%\n        </span>\n      </span>\n    );\n\n  return (\n    <HoverCard trigger={trigger} placement=\"bottom\" cardClassName=\"w-72 p-3\">\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>\n            {pct}%\n          </span>\n        </div>\n\n        {(model || effort) && (\n          <div className=\"flex items-center justify-between gap-3 border-b border-border pb-2\">\n            {model ? (\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {Glyph && (\n                  <Icon\n                    icon={Glyph}\n                    className={cn(\"size-4 shrink-0\", modelIconClassName)}\n                  />\n                )}\n                <span className=\"truncate font-medium\" title={model}>\n                  {model}\n                </span>\n              </div>\n            ) : null}\n            {effort ? (\n              <span\n                className={cn(\n                  \"inline-flex shrink-0 items-center gap-1 font-medium\",\n                  effortColor,\n                )}\n              >\n                {EffortGlyph ? <EffortGlyph className=\"size-3.5\" /> : null}\n                {effortLevelLabel(effort)} effort\n              </span>\n            ) : null}\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className={cn(\"h-full rounded-full\", barTone(pct))}\n              style={{ width: `${pct}%` }}\n            />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row\n                label=\"Window\"\n                value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`}\n              />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? (\n            <Row label=\"Messages\" value={String(messageCount)} />\n          ) : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row\n                label=\"Budget\"\n                value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`}\n              />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContextMeter.js","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport { UiCheck, UiCopy } from \"../../icons\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\nimport {\n  effortLevelColor,\n  effortLevelIcon,\n  effortLevelLabel,\n} from \"./effort-icons\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Session identifier exposed as a click-to-copy value in the popover. */\n  sessionId?: string | undefined;\n  /** Runtime mechanism used to execute the session, such as api or cmux. */\n  executionMode?: string | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  modelIconClassName?: string | undefined;\n  /** Reasoning effort shown with its semantic glyph and color in the hover card. */\n  effort?: string | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nconst COPY_STATUS_RESET_MS = 2000;\nconst GAUGE_RADIUS = 15;\nconst GAUGE_CIRCUMFERENCE = 2 * Math.PI * GAUGE_RADIUS;\n\nfunction barTone(pct: number): string {\n  return pct > 80\n    ? \"bg-red-600 [[data-theme=dark]_&]:bg-red-400\"\n    : pct > 50\n      ? \"bg-amber-700 [[data-theme=dark]_&]:bg-amber-400\"\n      : \"bg-emerald-600 [[data-theme=dark]_&]:bg-emerald-400\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-700 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-700 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = {\n  label: string;\n  tokens?: number | undefined;\n  cost?: number | undefined;\n};\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(\n  tokens?: ContextMeterTokens,\n  cost?: ContextMeterCost,\n): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    {\n      label: \"Cache write\",\n      tokens: tokens?.cacheWrite,\n      cost: cost?.cacheWrite,\n    },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>\n          )}\n          {showCost && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>\n          )}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">\n              {row.label}\n            </td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? (\n                  compactTokens(row.tokens)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? (\n                  formatCost(row.cost)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && (\n            <td className={numCell}>{compactTokens(totalTokens)}</td>\n          )}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  copyable session id, execution mode, context-window breakdown, per-bucket\n *  token usage and the cost + budget detail. Domain-agnostic — callers feed\n *  plain values. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  sessionId,\n  executionMode,\n  model,\n  modelIcon: Glyph,\n  modelIconClassName,\n  effort,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const [copyResult, setCopyResult] = useState<\n    { sessionId: string; status: \"copied\" | \"failed\" } | undefined\n  >();\n  const copyResetTimer = useRef<number | undefined>(undefined);\n  useEffect(\n    () => () => {\n      if (copyResetTimer.current !== undefined) {\n        window.clearTimeout(copyResetTimer.current);\n      }\n    },\n    [],\n  );\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n  const EffortGlyph = effort ? effortLevelIcon(effort) : undefined;\n  const effortColor = effort ? effortLevelColor(effort) : undefined;\n  const copyStatus =\n    copyResult && copyResult.sessionId === sessionId\n      ? copyResult.status\n      : undefined;\n  // The status is transient feedback for the click that produced it — without\n  // this it would greet every later hover of the same session.\n  const copySessionId = async () => {\n    if (!sessionId) return;\n    if (copyResetTimer.current !== undefined) {\n      window.clearTimeout(copyResetTimer.current);\n    }\n    try {\n      await navigator.clipboard.writeText(sessionId);\n      setCopyResult({ sessionId, status: \"copied\" });\n    } catch {\n      setCopyResult({ sessionId, status: \"failed\" });\n    }\n    copyResetTimer.current = window.setTimeout(\n      () => setCopyResult(undefined),\n      COPY_STATUS_RESET_MS,\n    );\n  };\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center rounded-md px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"relative inline-flex size-9 shrink-0 items-center justify-center\">\n          <svg\n            data-context-gauge-ring\n            aria-hidden=\"true\"\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            className={cn(\"absolute inset-0\", ringTone(pct))}\n          >\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              opacity=\"0.15\"\n            />\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeDasharray={GAUGE_CIRCUMFERENCE}\n              strokeDashoffset={(1 - pct / 100) * GAUGE_CIRCUMFERENCE}\n              strokeLinecap=\"round\"\n              transform=\"rotate(-90 18 18)\"\n            />\n          </svg>\n          {Glyph ? (\n            <Icon\n              icon={Glyph}\n              className={cn(\"relative size-5\", modelIconClassName)}\n            />\n          ) : (\n            <span\n              className={cn(\n                \"relative text-[9px] font-semibold tabular-nums\",\n                textTone(pct),\n              )}\n            >\n              {pct}\n            </span>\n          )}\n        </span>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span\n            className={cn(\n              \"block h-full rounded-full transition-all\",\n              barTone(pct),\n            )}\n            style={{ width: `${pct}%` }}\n          />\n        </span>\n        <span\n          className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}\n        >\n          {pct}%\n        </span>\n      </span>\n    );\n\n  return (\n    <HoverCard\n      trigger={trigger}\n      placement=\"bottom\"\n      delay={200}\n      cardClassName=\"w-72 p-3\"\n    >\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>\n            {pct}%\n          </span>\n        </div>\n\n        {(model || effort) && (\n          <div className=\"flex items-center justify-between gap-3 border-b border-border pb-2\">\n            {model ? (\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {Glyph && (\n                  <Icon\n                    icon={Glyph}\n                    className={cn(\"size-4 shrink-0\", modelIconClassName)}\n                  />\n                )}\n                <span className=\"truncate font-medium\" title={model}>\n                  {model}\n                </span>\n              </div>\n            ) : null}\n            {effort ? (\n              <span\n                className={cn(\n                  \"inline-flex shrink-0 items-center gap-1 font-medium\",\n                  effortColor,\n                )}\n              >\n                {EffortGlyph ? <EffortGlyph className=\"size-3.5\" /> : null}\n                {effortLevelLabel(effort)} effort\n              </span>\n            ) : null}\n          </div>\n        )}\n\n        {(sessionId || executionMode) && (\n          <div className=\"space-y-1.5 border-b border-border pb-2\">\n            {sessionId ? (\n              <div className=\"flex items-center justify-between gap-4\">\n                <span className=\"text-muted-foreground\">Session</span>\n                <button\n                  type=\"button\"\n                  aria-label={\n                    copyStatus === \"copied\"\n                      ? \"Session ID copied\"\n                      : copyStatus === \"failed\"\n                        ? \"Session ID copy failed\"\n                        : \"Copy session ID\"\n                  }\n                  title={sessionId}\n                  className={cn(\n                    \"flex min-w-0 max-w-48 items-center gap-1.5 font-medium hover:text-foreground\",\n                    copyStatus === \"failed\" && \"text-destructive\",\n                  )}\n                  onClick={() => void copySessionId()}\n                >\n                  <span className=\"truncate font-mono\">{sessionId}</span>\n                  <Icon\n                    icon={copyStatus === \"copied\" ? UiCheck : UiCopy}\n                    className=\"size-3.5 shrink-0\"\n                  />\n                </button>\n              </div>\n            ) : null}\n            {executionMode ? <Row label=\"Mode\" value={executionMode} /> : null}\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className={cn(\"h-full rounded-full\", barTone(pct))}\n              style={{ width: `${pct}%` }}\n            />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row\n                label=\"Window\"\n                value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`}\n              />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? (\n            <Row label=\"Messages\" value={String(messageCount)} />\n          ) : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row\n                label=\"Budget\"\n                value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`}\n              />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/chat/ToolCall.cjs

@@ -5,8 +5,10 @@ const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const button = require("../../components/button.cjs");
 const Icon = require("../Icon.cjs");
-const CodeBlock = require("../CodeBlock.cjs");
 const types = require("./types.cjs");
+const normalize = require("./tool-render/normalize.cjs");
+const context = require("./tool-render/context.cjs");
+const defaults = require("./tool-render/defaults.cjs");
 const UiCircleX = require("../../icons/components/UiCircleX.cjs");
 const UiCheck = require("../../icons/components/UiCheck.cjs");
 const UiClock = require("../../icons/components/UiClock.cjs");
@@ -25,17 +27,49 @@ const STATUS_LABEL = {
 const STATUS_ICON = {
   "approval-requested": { icon: UiClock.UiClock, className: "text-amber-600" },
   "approval-responded": { icon: UiCheck.UiCheck, className: "text-sky-600" },
-  "input-streaming": { icon: UiCircleOutline.UiCircleOutline, className: "text-muted-foreground" },
-  "input-available": { icon: UiClock.UiClock, className: "text-muted-foreground animate-pulse" },
+  "input-streaming": {
+    icon: UiCircleOutline.UiCircleOutline,
+    className: "text-muted-foreground"
+  },
+  "input-available": {
+    icon: UiClock.UiClock,
+    className: "text-muted-foreground animate-pulse"
+  },
   "output-available": { icon: UiCheck.UiCheck, className: "text-emerald-600" },
   "output-denied": { icon: UiCircleX.UiCircleX, className: "text-orange-600" },
   "output-error": { icon: UiCircleX.UiCircleX, className: "text-destructive" }
 };
-function ToolCall({ part, defaultOpen = false, onApprove, renderToolResult, className }) {
+function ToolCall({
+  part,
+  defaultOpen = false,
+  onApprove,
+  renderToolResult,
+  tool,
+  registry: registryProp,
+  className
+}) {
   const needsApproval = part.state === "approval-requested";
   const [open, setOpen] = react.useState(defaultOpen || needsApproval);
+  const contextRegistry = context.useToolRenderRegistry();
+  const registry = registryProp ?? contextRegistry;
   const status = STATUS_ICON[part.state];
   const name = types.toolPartName(part);
+  const meta = tool ?? registry.tool(name);
+  const normalized = normalize.normalizeToolOutput(
+    part.state === "output-available" ? part.output : void 0
+  );
+  const base = {
+    part,
+    toolName: name,
+    tool: meta,
+    state: part.state,
+    input: part.input,
+    output: normalized.value,
+    isError: normalized.isError || part.state === "output-error",
+    options: registry.options
+  };
+  const inputView = defaults.defaultToolInputView(base);
+  const summary = registry.resolveSummary({ ...base, defaultView: null });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("not-prose mb-1 w-full", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -55,21 +89,34 @@ function ToolCall({ part, defaultOpen = false, onApprove, renderToolResult, clas
                 title: STATUS_LABEL[part.state],
                 className: utils.cn("size-3 shrink-0", status.className)
               }
-            )
+            ),
+            !open && summary ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-xs", children: summary }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Icon.Icon,
             {
               icon: UiChevronDown.UiChevronDown,
-              className: utils.cn("size-3 shrink-0 transition-transform", open && "rotate-180")
+              className: utils.cn(
+                "size-3 shrink-0 transition-transform",
+                open && "rotate-180"
+              )
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 pl-4 pt-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ToolInput, { input: part.input }),
-      /* @__PURE__ */ jsxRuntime.jsx(ToolOutput, { part, ...renderToolResult ? { renderToolResult } : {} })
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "tool-call-details", className: "space-y-1 pl-4 pt-0.5", children: [
+      registry.resolveInput({ ...base, defaultView: inputView }) ?? inputView,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolOutput,
+        {
+          part,
+          base,
+          registry,
+          output: normalized.value,
+          ...renderToolResult ? { renderToolResult } : {}
+        }
+      )
     ] }),
     needsApproval && /* @__PURE__ */ jsxRuntime.jsx(ApprovalControls, { part, onApprove })
   ] });
@@ -81,7 +128,15 @@ function ApprovalControls({
   const approval = "approval" in part ? part.approval : void 0;
   if (!approval || !onApprove) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center gap-2 pl-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", size: "sm", onClick: () => onApprove(approval.id, true), children: "Approve" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        type: "button",
+        size: "sm",
+        onClick: () => onApprove(approval.id, true),
+        children: "Approve"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       button.Button,
       {
@@ -94,27 +149,34 @@ function ApprovalControls({
     )
   ] });
 }
-function ToolInput({ input }) {
-  if (input === void 0 || input === null) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: JSON.stringify(input, null, 2) }) });
-}
 function ToolOutput({
   part,
+  base,
+  registry,
+  output,
   renderToolResult
 }) {
   const errorText = part.state === "output-error" ? part.errorText : void 0;
-  const output = part.state === "output-available" ? part.output : void 0;
-  if (output === void 0 && errorText === void 0) {
+  const hasOutput = part.state === "output-available" && output !== void 0;
+  if (!hasOutput && errorText === void 0) {
     return null;
   }
-  const name = types.toolPartName(part);
-  const custom = output !== void 0 ? renderToolResult == null ? void 0 : renderToolResult({ part, toolName: name, output }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("overflow-x-auto text-xs", errorText ? "text-destructive" : "text-muted-foreground"), children: [
-    errorText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: errorText }),
-    custom ?? (output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: typeof output === "string" ? output : JSON.stringify(output, null, 2) }))
-  ] });
+  const defaultView = hasOutput ? defaults.defaultToolOutputView(base) : null;
+  const custom = hasOutput ? renderToolResult == null ? void 0 : renderToolResult({ part, toolName: base.toolName, output }) : null;
+  const resolved = hasOutput ? registry.resolveOutput({ ...base, defaultView }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "overflow-x-auto text-xs",
+        errorText ? "text-destructive" : "text-muted-foreground"
+      ),
+      children: [
+        errorText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: errorText }),
+        custom ?? resolved ?? defaultView
+      ]
+    }
+  );
 }
 exports.ToolCall = ToolCall;
 //# sourceMappingURL=ToolCall.cjs.map

package/dist/data/chat/ToolCall.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.cjs","sources":["../../../src/data/chat/ToolCall.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport {\n  UiCheck,\n  UiChevronDown,\n  UiCircleOutline,\n  UiCircleX,\n  UiClock,\n  UiWrench,\n} from \"../../icons\";\nimport type { AnyToolPart, ToolResultRenderer } from \"./types\";\nimport { toolPartName } from \"./types\";\n\nexport type ToolCallProps = {\n  /** The tool part from an assistant message (typed or dynamic). */\n  part: AnyToolPart;\n  /** Whether the call body starts expanded. Defaults to false. */\n  defaultOpen?: boolean;\n  /** Respond to an approval request (only used when state is\n   *  `approval-requested`). Receives the approval id, the decision, and an\n   *  optional reason. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n  renderToolResult?: ToolResultRenderer;\n  className?: string;\n};\n\ntype ToolState = AnyToolPart[\"state\"];\n\nconst STATUS_LABEL: Record<ToolState, string> = {\n  \"approval-requested\": \"Awaiting approval\",\n  \"approval-responded\": \"Responded\",\n  \"input-streaming\": \"Pending\",\n  \"input-available\": \"Running\",\n  \"output-available\": \"Completed\",\n  \"output-denied\": \"Denied\",\n  \"output-error\": \"Error\",\n};\n\nconst STATUS_ICON: Record<ToolState, { icon: StaticIconComponent; className: string }> = {\n  \"approval-requested\": { icon: UiClock, className: \"text-amber-600\" },\n  \"approval-responded\": { icon: UiCheck, className: \"text-sky-600\" },\n  \"input-streaming\": { icon: UiCircleOutline, className: \"text-muted-foreground\" },\n  \"input-available\": { icon: UiClock, className: \"text-muted-foreground animate-pulse\" },\n  \"output-available\": { icon: UiCheck, className: \"text-emerald-600\" },\n  \"output-denied\": { icon: UiCircleX, className: \"text-orange-600\" },\n  \"output-error\": { icon: UiCircleX, className: \"text-destructive\" },\n};\n\n/** Generic display of a single AI tool call: a collapsible header showing the\n *  tool name + status, expanding to its JSON input and (once available) output\n *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`\n *  parts, keyed off `part.state`. */\nexport function ToolCall({ part, defaultOpen = false, onApprove, renderToolResult, className }: ToolCallProps) {\n  const needsApproval = part.state === \"approval-requested\";\n  const [open, setOpen] = useState(defaultOpen || needsApproval);\n  const status = STATUS_ICON[part.state];\n  const name = toolPartName(part);\n\n  return (\n    <div className={cn(\"not-prose mb-1 w-full\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground\"\n      >\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Icon icon={UiWrench} className=\"size-3 shrink-0\" />\n          <span className=\"truncate font-mono text-xs\">{name}</span>\n          <Icon\n            icon={status.icon}\n            title={STATUS_LABEL[part.state]}\n            className={cn(\"size-3 shrink-0\", status.className)}\n          />\n        </span>\n        <Icon\n          icon={UiChevronDown}\n          className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"space-y-1 pl-4 pt-0.5\">\n          <ToolInput input={part.input} />\n          <ToolOutput part={part} {...(renderToolResult ? { renderToolResult } : {})} />\n        </div>\n      )}\n\n      {needsApproval && <ApprovalControls part={part} onApprove={onApprove} />}\n    </div>\n  );\n}\n\n/** Approve/Deny controls shown while a tool call awaits human approval. The\n *  approval id comes from the part's `approval` envelope (AI SDK v6). */\nfunction ApprovalControls({\n  part,\n  onApprove,\n}: {\n  part: AnyToolPart;\n  onApprove: ToolCallProps[\"onApprove\"];\n}) {\n  const approval = \"approval\" in part ? part.approval : undefined;\n  if (!approval || !onApprove) return null;\n  return (\n    <div className=\"mt-1.5 flex items-center gap-2 pl-4\">\n      <Button type=\"button\" size=\"sm\" onClick={() => onApprove(approval.id, true)}>\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        variant=\"outline\"\n        onClick={() => onApprove(approval.id, false)}\n      >\n        Deny\n      </Button>\n    </div>\n  );\n}\n\nfunction ToolInput({ input }: { input: AnyToolPart[\"input\"] }) {\n  if (input === undefined || input === null) {\n    return null;\n  }\n  return (\n    <div className=\"overflow-hidden text-xs\">\n      <CodeBlock language=\"json\" source={JSON.stringify(input, null, 2)} />\n    </div>\n  );\n}\n\nfunction ToolOutput({\n  part,\n  renderToolResult,\n}: {\n  part: AnyToolPart;\n  renderToolResult?: ToolResultRenderer | undefined;\n}) {\n  const errorText = part.state === \"output-error\" ? part.errorText : undefined;\n  const output = part.state === \"output-available\" ? part.output : undefined;\n  if (output === undefined && errorText === undefined) {\n    return null;\n  }\n  const name = toolPartName(part);\n  const custom = output !== undefined ? renderToolResult?.({ part, toolName: name, output }) : null;\n  return (\n    <div className={cn(\"overflow-x-auto text-xs\", errorText ? \"text-destructive\" : \"text-muted-foreground\")}>\n      {errorText !== undefined && <div>{errorText}</div>}\n      {custom ?? (output !== undefined && (\n        <CodeBlock language=\"json\" source={typeof output === \"string\" ? output : JSON.stringify(output, null, 2)} />\n      ))}\n    </div>\n  );\n}\n"],"names":["UiClock","UiCheck","UiCircleOutline","UiCircleX","useState","toolPartName","cn","jsxs","jsx","Icon","UiWrench","UiChevronDown","Button","CodeBlock"],"mappings":"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"}
+{"version":3,"file":"ToolCall.cjs","sources":["../../../src/data/chat/ToolCall.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport {\n  UiCheck,\n  UiChevronDown,\n  UiCircleOutline,\n  UiCircleX,\n  UiClock,\n  UiWrench,\n} from \"../../icons\";\nimport type { AnyToolPart, ToolMeta, ToolResultRenderer } from \"./types\";\nimport { toolPartName } from \"./types\";\nimport { normalizeToolOutput } from \"./tool-render/normalize\";\nimport { useToolRenderRegistry } from \"./tool-render/context\";\nimport {\n  defaultToolInputView,\n  defaultToolOutputView,\n  type ToolRenderBaseContext,\n} from \"./tool-render/defaults\";\nimport type { ToolRenderRegistry } from \"./tool-render/adapter\";\n\nexport type ToolCallProps = {\n  /** The tool part from an assistant message (typed or dynamic). */\n  part: AnyToolPart;\n  /** Whether the call body starts expanded. Defaults to false. */\n  defaultOpen?: boolean;\n  /** Respond to an approval request (only used when state is\n   *  `approval-requested`). Receives the approval id, the decision, and an\n   *  optional reason. */\n  onApprove?:\n    | ((approvalId: string, approved: boolean, reason?: string) => void)\n    | undefined;\n  renderToolResult?: ToolResultRenderer;\n  /** Catalog entry for this tool. Defaults to the registry's catalog lookup. */\n  tool?: ToolMeta | undefined;\n  /** Renderer registry override. Defaults to the provided context registry. */\n  registry?: ToolRenderRegistry | undefined;\n  className?: string;\n};\n\ntype ToolState = AnyToolPart[\"state\"];\n\nconst STATUS_LABEL: Record<ToolState, string> = {\n  \"approval-requested\": \"Awaiting approval\",\n  \"approval-responded\": \"Responded\",\n  \"input-streaming\": \"Pending\",\n  \"input-available\": \"Running\",\n  \"output-available\": \"Completed\",\n  \"output-denied\": \"Denied\",\n  \"output-error\": \"Error\",\n};\n\nconst STATUS_ICON: Record<\n  ToolState,\n  { icon: StaticIconComponent; className: string }\n> = {\n  \"approval-requested\": { icon: UiClock, className: \"text-amber-600\" },\n  \"approval-responded\": { icon: UiCheck, className: \"text-sky-600\" },\n  \"input-streaming\": {\n    icon: UiCircleOutline,\n    className: \"text-muted-foreground\",\n  },\n  \"input-available\": {\n    icon: UiClock,\n    className: \"text-muted-foreground animate-pulse\",\n  },\n  \"output-available\": { icon: UiCheck, className: \"text-emerald-600\" },\n  \"output-denied\": { icon: UiCircleX, className: \"text-orange-600\" },\n  \"output-error\": { icon: UiCircleX, className: \"text-destructive\" },\n};\n\n/** Generic display of a single AI tool call: a collapsible header showing the\n *  tool name, status and compact input args, expanding to its input params and\n *  (once available) output or error. Input and output rendering go through the\n *  tool render registry, so a host can contribute domain views. Renders both\n *  clicky `dynamic-tool` parts and typed `tool-<name>` parts, keyed off\n *  `part.state`. */\nexport function ToolCall({\n  part,\n  defaultOpen = false,\n  onApprove,\n  renderToolResult,\n  tool,\n  registry: registryProp,\n  className,\n}: ToolCallProps) {\n  const needsApproval = part.state === \"approval-requested\";\n  const [open, setOpen] = useState(defaultOpen || needsApproval);\n  const contextRegistry = useToolRenderRegistry();\n  const registry = registryProp ?? contextRegistry;\n  const status = STATUS_ICON[part.state];\n  const name = toolPartName(part);\n  const meta = tool ?? registry.tool(name);\n\n  // The transport double-encodes tool results as `{output: \"<json>\"}`; every\n  // surface — including a host's renderToolResult — sees the unwrapped value.\n  const normalized = normalizeToolOutput(\n    part.state === \"output-available\" ? part.output : undefined,\n  );\n  const base: ToolRenderBaseContext = {\n    part,\n    toolName: name,\n    tool: meta,\n    state: part.state,\n    input: part.input,\n    output: normalized.value,\n    isError: normalized.isError || part.state === \"output-error\",\n    options: registry.options,\n  };\n\n  const inputView = defaultToolInputView(base);\n  // The header keeps the tool name in its own element; a summary renders beside\n  // it (ToolCall.test.tsx matches the name by exact text).\n  const summary = registry.resolveSummary({ ...base, defaultView: null });\n\n  return (\n    <div className={cn(\"not-prose mb-1 w-full\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground\"\n      >\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Icon icon={UiWrench} className=\"size-3 shrink-0\" />\n          <span className=\"truncate font-mono text-xs\">{name}</span>\n          <Icon\n            icon={status.icon}\n            title={STATUS_LABEL[part.state]}\n            className={cn(\"size-3 shrink-0\", status.className)}\n          />\n          {!open && summary ? (\n            <span className=\"min-w-0 flex-1 truncate text-xs\">{summary}</span>\n          ) : null}\n        </span>\n        <Icon\n          icon={UiChevronDown}\n          className={cn(\n            \"size-3 shrink-0 transition-transform\",\n            open && \"rotate-180\",\n          )}\n        />\n      </button>\n\n      {open && (\n        <div data-slot=\"tool-call-details\" className=\"space-y-1 pl-4 pt-0.5\">\n          {/* An approval-requested call force-opens, so this params table is\n              what the user reads before approving a write. */}\n          {registry.resolveInput({ ...base, defaultView: inputView }) ??\n            inputView}\n          <ToolOutput\n            part={part}\n            base={base}\n            registry={registry}\n            output={normalized.value}\n            {...(renderToolResult ? { renderToolResult } : {})}\n          />\n        </div>\n      )}\n\n      {needsApproval && <ApprovalControls part={part} onApprove={onApprove} />}\n    </div>\n  );\n}\n\n/** Approve/Deny controls shown while a tool call awaits human approval. The\n *  approval id comes from the part's `approval` envelope (AI SDK v6). */\nfunction ApprovalControls({\n  part,\n  onApprove,\n}: {\n  part: AnyToolPart;\n  onApprove: ToolCallProps[\"onApprove\"];\n}) {\n  const approval = \"approval\" in part ? part.approval : undefined;\n  if (!approval || !onApprove) return null;\n  return (\n    <div className=\"mt-1.5 flex items-center gap-2 pl-4\">\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        onClick={() => onApprove(approval.id, true)}\n      >\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        variant=\"outline\"\n        onClick={() => onApprove(approval.id, false)}\n      >\n        Deny\n      </Button>\n    </div>\n  );\n}\n\n/** The output surface. Priority: the host's `renderToolResult` prop (the\n *  pre-registry API, still supported), then a matching adapter, then the\n *  built-in shape heuristics. */\nfunction ToolOutput({\n  part,\n  base,\n  registry,\n  output,\n  renderToolResult,\n}: {\n  part: AnyToolPart;\n  base: ToolRenderBaseContext;\n  registry: ToolRenderRegistry;\n  output: unknown;\n  renderToolResult?: ToolResultRenderer | undefined;\n}) {\n  const errorText = part.state === \"output-error\" ? part.errorText : undefined;\n  const hasOutput = part.state === \"output-available\" && output !== undefined;\n  if (!hasOutput && errorText === undefined) {\n    return null;\n  }\n\n  const defaultView: ReactNode = hasOutput ? defaultToolOutputView(base) : null;\n\n  const custom = hasOutput\n    ? renderToolResult?.({ part, toolName: base.toolName, output })\n    : null;\n  const resolved = hasOutput\n    ? registry.resolveOutput({ ...base, defaultView })\n    : null;\n\n  return (\n    <div\n      className={cn(\n        \"overflow-x-auto text-xs\",\n        errorText ? \"text-destructive\" : \"text-muted-foreground\",\n      )}\n    >\n      {errorText !== undefined && <div>{errorText}</div>}\n      {custom ?? resolved ?? defaultView}\n    </div>\n  );\n}\n"],"names":["UiClock","UiCheck","UiCircleOutline","UiCircleX","useState","useToolRenderRegistry","toolPartName","normalizeToolOutput","defaultToolInputView","cn","jsxs","jsx","Icon","UiWrench","UiChevronDown","Button","defaultToolOutputView"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,MAAM,eAA0C;AAAA,EAC9C,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;AAEA,MAAM,cAGF;AAAA,EACF,sBAAsB,EAAE,MAAMA,iBAAS,WAAW,iBAAA;AAAA,EAClD,sBAAsB,EAAE,MAAMC,iBAAS,WAAW,eAAA;AAAA,EAClD,mBAAmB;AAAA,IACjB,MAAMC,gBAAAA;AAAAA,IACN,WAAW;AAAA,EAAA;AAAA,EAEb,mBAAmB;AAAA,IACjB,MAAMF,QAAAA;AAAAA,IACN,WAAW;AAAA,EAAA;AAAA,EAEb,oBAAoB,EAAE,MAAMC,iBAAS,WAAW,mBAAA;AAAA,EAChD,iBAAiB,EAAE,MAAME,qBAAW,WAAW,kBAAA;AAAA,EAC/C,gBAAgB,EAAE,MAAMA,UAAAA,WAAW,WAAW,mBAAA;AAChD;AAQO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAkB;AAChB,QAAM,gBAAgB,KAAK,UAAU;AACrC,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,eAAe,aAAa;AAC7D,QAAM,kBAAkBC,QAAAA,sBAAA;AACxB,QAAM,WAAW,gBAAgB;AACjC,QAAM,SAAS,YAAY,KAAK,KAAK;AACrC,QAAM,OAAOC,MAAAA,aAAa,IAAI;AAC9B,QAAM,OAAO,QAAQ,SAAS,KAAK,IAAI;AAIvC,QAAM,aAAaC,UAAAA;AAAAA,IACjB,KAAK,UAAU,qBAAqB,KAAK,SAAS;AAAA,EAAA;AAEpD,QAAM,OAA8B;AAAA,IAClC;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO,KAAK;AAAA,IACZ,OAAO,KAAK;AAAA,IACZ,QAAQ,WAAW;AAAA,IACnB,SAAS,WAAW,WAAW,KAAK,UAAU;AAAA,IAC9C,SAAS,SAAS;AAAA,EAAA;AAGpB,QAAM,YAAYC,SAAAA,qBAAqB,IAAI;AAG3C,QAAM,UAAU,SAAS,eAAe,EAAE,GAAG,MAAM,aAAa,MAAM;AAEtE,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,yBAAyB,SAAS,GACnD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAChC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,YAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAMC,SAAAA,UAAU,WAAU,mBAAkB;AAAA,YAClDF,2BAAAA,IAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,MAAK;AAAA,YACnDA,2BAAAA;AAAAA,cAACC,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,OAAO,aAAa,KAAK,KAAK;AAAA,gBAC9B,WAAWH,MAAAA,GAAG,mBAAmB,OAAO,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAElD,CAAC,QAAQ,UACRE,2BAAAA,IAAC,UAAK,WAAU,mCAAmC,mBAAQ,IACzD;AAAA,UAAA,GACN;AAAA,UACAA,2BAAAA;AAAAA,YAACC,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAME,cAAAA;AAAAA,cACN,WAAWL,MAAAA;AAAAA,gBACT;AAAA,gBACA,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,QACCC,2BAAAA,KAAC,OAAA,EAAI,aAAU,qBAAoB,WAAU,yBAG1C,UAAA;AAAA,MAAA,SAAS,aAAa,EAAE,GAAG,MAAM,aAAa,UAAA,CAAW,KACxD;AAAA,MACFC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,WAAW;AAAA,UAClB,GAAI,mBAAmB,EAAE,qBAAqB,CAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IAClD,GACF;AAAA,IAGD,iBAAiBA,2BAAAA,IAAC,kBAAA,EAAiB,MAAY,UAAA,CAAsB;AAAA,EAAA,GACxE;AAEJ;AAIA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,cAAc,OAAO,KAAK,WAAW;AACtD,MAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AACpC,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACI,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,MAAM,UAAU,SAAS,IAAI,IAAI;AAAA,QAC3C,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDJ,2BAAAA;AAAAA,MAACI,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM,UAAU,SAAS,IAAI,KAAK;AAAA,QAC5C,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;AAKA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,YAAY,KAAK,UAAU,iBAAiB,KAAK,YAAY;AACnE,QAAM,YAAY,KAAK,UAAU,sBAAsB,WAAW;AAClE,MAAI,CAAC,aAAa,cAAc,QAAW;AACzC,WAAO;AAAA,EACT;AAEA,QAAM,cAAyB,YAAYC,+BAAsB,IAAI,IAAI;AAEzE,QAAM,SAAS,YACX,qDAAmB,EAAE,MAAM,UAAU,KAAK,UAAU,OAAA,KACpD;AACJ,QAAM,WAAW,YACb,SAAS,cAAc,EAAE,GAAG,MAAM,YAAA,CAAa,IAC/C;AAEJ,SACEN,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,qBAAqB;AAAA,MAAA;AAAA,MAGlC,UAAA;AAAA,QAAA,cAAc,UAAaE,2BAAAA,IAAC,OAAA,EAAK,UAAA,WAAU;AAAA,QAC3C,UAAU,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7B;;"}

package/dist/data/chat/ToolCall.d.ts

@@ -1,4 +1,5 @@
-import { AnyToolPart, ToolResultRenderer } from './types';
+import { AnyToolPart, ToolMeta, ToolResultRenderer } from './types';
+import { ToolRenderRegistry } from './tool-render/adapter';
 export type ToolCallProps = {
     /** The tool part from an assistant message (typed or dynamic). */
     part: AnyToolPart;
@@ -9,11 +10,17 @@ export type ToolCallProps = {
      *  optional reason. */
     onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;
     renderToolResult?: ToolResultRenderer;
+    /** Catalog entry for this tool. Defaults to the registry's catalog lookup. */
+    tool?: ToolMeta | undefined;
+    /** Renderer registry override. Defaults to the provided context registry. */
+    registry?: ToolRenderRegistry | undefined;
     className?: string;
 };
 /** Generic display of a single AI tool call: a collapsible header showing the
- *  tool name + status, expanding to its JSON input and (once available) output
- *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`
- *  parts, keyed off `part.state`. */
-export declare function ToolCall({ part, defaultOpen, onApprove, renderToolResult, className }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
+ *  tool name, status and compact input args, expanding to its input params and
+ *  (once available) output or error. Input and output rendering go through the
+ *  tool render registry, so a host can contribute domain views. Renders both
+ *  clicky `dynamic-tool` parts and typed `tool-<name>` parts, keyed off
+ *  `part.state`. */
+export declare function ToolCall({ part, defaultOpen, onApprove, renderToolResult, tool, registry: registryProp, className, }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolCall.d.ts.map

package/dist/data/chat/ToolCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ToolCall.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG/D,MAAM,MAAM,aAAa,GAAG;IAC1B,kEAAkE;IAClE,IAAI,EAAE,WAAW,CAAC;IAClB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;2BAEuB;IACvB,SAAS,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3F,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwBF;;;qCAGqC;AACrC,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,aAAa,2CAuC5G"}
+{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ToolCall.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,MAAM,MAAM,aAAa,GAAG;IAC1B,kEAAkE;IAClE,IAAI,EAAE,WAAW,CAAC;IAClB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;2BAEuB;IACvB,SAAS,CAAC,EACN,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAClE,SAAS,CAAC;IACd,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiCF;;;;;oBAKoB;AACpB,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EAAE,YAAY,EACtB,SAAS,GACV,EAAE,aAAa,2CA8Ef"}