@tangle-network/ui 5.1.0 → 5.2.0

package/dist/chunk-LASW7CYH.js

@@ -0,0 +1,473 @@
+import {
+  InlineToolItem,
+  LiveDuration
+} from "./chunk-EOGJX2TU.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-ULDNFLIM.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-52Y3FMFI.js";
+import {
+  Markdown
+} from "./chunk-FJBTCTZM.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/run/inline-thinking-item.tsx
+import { memo, useEffect, useRef, useState } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Brain, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InlineThinkingItem = memo(
+  ({
+    part,
+    defaultOpen = false,
+    autoCollapse = true,
+    className,
+    contentClassName
+  }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const autoCollapsedRef = useRef(false);
+    const startTime = part.time?.start;
+    const endTime = part.time?.end;
+    const durationMs = startTime && endTime ? endTime - startTime : void 0;
+    const isActive = startTime != null && endTime == null;
+    const preview = part.text ? truncateText(part.text, 120) : void 0;
+    useEffect(() => {
+      if (isActive) {
+        autoCollapsedRef.current = false;
+        setOpen(true);
+        return;
+      }
+      if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
+        const timer = window.setTimeout(() => {
+          setOpen(false);
+          autoCollapsedRef.current = true;
+        }, 900);
+        return () => window.clearTimeout(timer);
+      }
+    }, [autoCollapse, durationMs, isActive]);
+    return /* @__PURE__ */ jsx(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-[var(--radius-lg)] border bg-card transition-colors",
+          isActive ? "border-[var(--border-accent)]" : "border-border hover:border-[var(--border-accent)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+                      isActive ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-border bg-muted text-muted-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(Brain, { className: cn("h-3 w-3 shrink-0", isActive && "animate-pulse") })
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate font-[var(--font-sans)] text-muted-foreground", children: preview ?? (isActive ? "Thinking\u2026" : "Reasoning") }),
+                /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  isActive && startTime ? /* @__PURE__ */ jsx(LiveDuration, { startTime }) : null,
+                  !isActive && durationMs != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: cn(
+                        "h-3 w-3 text-muted-foreground transition-transform shrink-0",
+                        open && "rotate-90"
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: part.text ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "max-h-60 overflow-y-auto border-t border-border bg-muted px-3 py-3 text-sm leading-relaxed text-muted-foreground",
+                contentClassName
+              ),
+              children: /* @__PURE__ */ jsx(Markdown, { children: part.text })
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground", children: "No reasoning text provided." }) })
+        ]
+      }
+    ) });
+  }
+);
+InlineThinkingItem.displayName = "InlineThinkingItem";
+
+// src/run/run-group.tsx
+import { memo as memo2, useMemo } from "react";
+import * as Collapsible2 from "@radix-ui/react-collapsible";
+import {
+  Bot,
+  Loader2,
+  ChevronDown,
+  ChevronRight as ChevronRight2,
+  Terminal,
+  FileEdit,
+  FileSearch,
+  Search,
+  PencilLine,
+  Globe,
+  ClipboardList,
+  Settings,
+  Sparkles
+} from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_BRANDING = {
+  label: "Agent",
+  accentClass: "text-primary",
+  bgClass: "bg-[var(--accent-surface-soft)]",
+  containerBgClass: "bg-muted",
+  borderClass: "border-border",
+  iconClass: "",
+  textClass: "text-primary"
+};
+var ASSISTANT_SHELL = "min-w-0 flex-1 space-y-3 rounded-[26px] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
+function AssistantShell({
+  branding,
+  isStreaming,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex gap-2.5", children: [
+    /* @__PURE__ */ jsx2("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white", children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" }) }),
+    /* @__PURE__ */ jsxs2("div", { className: ASSISTANT_SHELL, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx2("span", { children: branding.label }),
+        isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
+          "Thinking"
+        ] }) : null
+      ] }),
+      children
+    ] })
+  ] });
+}
+var CATEGORY_ICON_MAP = {
+  command: Terminal,
+  write: FileEdit,
+  read: FileSearch,
+  search: Search,
+  edit: PencilLine,
+  task: Bot,
+  web: Globe,
+  todo: ClipboardList,
+  other: Settings
+};
+var CATEGORY_ORDER = [
+  "command",
+  "write",
+  "edit",
+  "read",
+  "search",
+  "web",
+  "task",
+  "todo",
+  "other"
+];
+var OPENUI_NODE_TYPES = /* @__PURE__ */ new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card"
+]);
+function isOpenUINode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && OPENUI_NODE_TYPES.has(value.type);
+}
+function extractOpenUISchema(output) {
+  if (output == null) return null;
+  if (isOpenUINode(output)) return [output];
+  if (Array.isArray(output) && output.length > 0 && output.every(isOpenUINode)) {
+    return output;
+  }
+  if (typeof output === "object" && !Array.isArray(output)) {
+    const obj = output;
+    for (const key of ["openui", "schema", "ui"]) {
+      if (obj[key] == null) continue;
+      const inner = obj[key];
+      if (typeof inner === "string") {
+        try {
+          const parsed = JSON.parse(inner);
+          return extractOpenUISchema(parsed);
+        } catch {
+          continue;
+        }
+      }
+      const nested = extractOpenUISchema(inner);
+      if (nested) return nested;
+    }
+  }
+  if (typeof output === "string") {
+    try {
+      return extractOpenUISchema(JSON.parse(output));
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+function getOpenUISummary(output) {
+  if (!output || typeof output !== "object" || Array.isArray(output)) {
+    return null;
+  }
+  const summary = output.summary;
+  return typeof summary === "string" && summary.trim() ? summary.trim() : null;
+}
+function isOpenUITool(part) {
+  const normalized = part.tool.toLowerCase().replace(/^tool:/, "");
+  return normalized.includes("openui");
+}
+function CategoryBadges({ categories }) {
+  const sorted = useMemo(
+    () => CATEGORY_ORDER.filter((category) => categories.has(category)),
+    [categories]
+  );
+  if (sorted.length === 0) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
+    const Icon = CATEGORY_ICON_MAP[cat] ?? Settings;
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        title: cat,
+        className: "flex h-5 w-5 items-center justify-center rounded border border-border text-muted-foreground",
+        children: /* @__PURE__ */ jsx2(Icon, { className: "h-3 w-3" })
+      },
+      cat
+    );
+  }) });
+}
+function renderSummary(run) {
+  const parts = [];
+  if (run.stats.toolCount > 0) {
+    parts.push(`${run.stats.toolCount} tool${run.stats.toolCount === 1 ? "" : "s"}`);
+  }
+  if (run.stats.textPartCount > 0) {
+    parts.push(`${run.stats.textPartCount} response${run.stats.textPartCount === 1 ? "" : "s"}`);
+  }
+  if (run.stats.thinkingDurationMs > 0) {
+    parts.push(`${formatDuration(run.stats.thinkingDurationMs)} thinking`);
+  }
+  return parts.join(", ");
+}
+function getToolGroupPosition(currentIndex, parts) {
+  const previous = parts[currentIndex - 1]?.part;
+  const next = parts[currentIndex + 1]?.part;
+  const previousIsTool = previous?.type === "tool";
+  const nextIsTool = next?.type === "tool";
+  if (previousIsTool && nextIsTool) return "middle";
+  if (previousIsTool) return "last";
+  if (nextIsTool) return "first";
+  return "single";
+}
+var RunGroup = memo2(
+  ({
+    run,
+    partMap,
+    collapsed,
+    onToggle,
+    branding = DEFAULT_BRANDING,
+    renderToolDetail,
+    headerActions,
+    renderToolActions
+  }) => {
+    const allParts = useMemo(() => {
+      const parts = [];
+      for (const msg of run.messages) {
+        const msgParts = partMap[msg.id] ?? [];
+        msgParts.forEach((part, index) => {
+          parts.push({ part, msgId: msg.id, index });
+        });
+      }
+      return parts;
+    }, [run.messages, partMap]);
+    const { stats, isStreaming } = run;
+    const hasRenderableParts = allParts.some(({ part }) => {
+      if (part.type === "tool" || part.type === "reasoning") {
+        return true;
+      }
+      return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+    });
+    if (!hasRenderableParts) {
+      if (!isStreaming) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx2(AssistantShell, { branding, isStreaming: true, children: /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs2("span", { className: "flex gap-[5px]", children: [
+        /* @__PURE__ */ jsx2("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ jsx2("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ jsx2("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+      ] }) }) });
+    }
+    const showTraceChrome = allParts.some(({ part }) => {
+      if (part.type === "reasoning") {
+        return true;
+      }
+      if (part.type === "tool") {
+        return !isOpenUITool(part);
+      }
+      return false;
+    });
+    if (!showTraceChrome) {
+      return /* @__PURE__ */ jsx2(AssistantShell, { branding, isStreaming, children: allParts.map(({ part, msgId, index }) => {
+        const key = `${msgId}-${index}`;
+        if (part.type === "tool" && isOpenUITool(part)) {
+          const toolPart = part;
+          const schema = extractOpenUISchema(toolPart.state.output);
+          const summary = getOpenUISummary(toolPart.state.output);
+          if (toolPart.state.status === "completed" && schema) {
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
+                children: [
+                  summary ? /* @__PURE__ */ jsx2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
+                  /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
+                ]
+              },
+              key
+            );
+          }
+          if (toolPart.state.status === "running") {
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "flex items-center gap-2 rounded-[18px] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-4 py-3 text-sm text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+                  "Building view\u2026"
+                ]
+              },
+              key
+            );
+          }
+        }
+        if (part.type === "text" && !part.synthetic && part.text.trim()) {
+          return /* @__PURE__ */ jsx2("div", { className: "px-0.5", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]", children: part.text }) }, key);
+        }
+        return null;
+      }) });
+    }
+    return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsx2(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: cn(
+              "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
+              "bg-transparent hover:bg-transparent"
+            ),
+            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: cn(
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white"
+                  ),
+                  children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { className: cn("text-sm font-semibold", branding.textClass), children: branding.label }),
+              renderSummary(run) ? /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: renderSummary(run) }) : null,
+              collapsed && run.summaryText ? /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[11px] text-foreground/70", children: run.summaryText }) : null,
+              /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx2(CategoryBadges, { categories: stats.toolCategories }),
+                isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]", children: [
+                  /* @__PURE__ */ jsx2(Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
+                  "Running"
+                ] }) : /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx2(Sparkles, { className: "h-2.5 w-2.5" }),
+                  "Done"
+                ] }),
+                !collapsed ? /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+              ] })
+            ] })
+          }
+        ) }),
+        headerActions ? /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
+      ] }),
+      collapsed && run.summaryText && /* @__PURE__ */ jsx2("div", { className: "px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2", children: run.summaryText }),
+      /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
+        const key = `${msgId}-${index}`;
+        const prev = allParts[partIndex - 1]?.part;
+        const connectedTool = part.type === "tool" && prev?.type === "tool" && !isOpenUITool(part) && !isOpenUITool(prev);
+        const gapClass = partIndex === 0 ? "" : connectedTool ? "mt-px" : "mt-3";
+        let node = null;
+        if (part.type === "tool") {
+          if (isOpenUITool(part)) {
+            const toolPart = part;
+            const schema = extractOpenUISchema(toolPart.state.output);
+            const summary = getOpenUISummary(toolPart.state.output);
+            if (toolPart.state.status === "completed" && schema) {
+              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+                summary ? /* @__PURE__ */ jsxs2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
+                  /* @__PURE__ */ jsx2("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
+                ] }) : null,
+                /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
+              ] });
+            } else if (toolPart.state.status === "running") {
+              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+                "Building view\u2026"
+              ] });
+            }
+          }
+          if (node === null) {
+            node = /* @__PURE__ */ jsx2(
+              InlineToolItem,
+              {
+                part,
+                renderToolDetail,
+                groupPosition: getToolGroupPosition(partIndex, allParts),
+                actions: renderToolActions?.(part, {
+                  run,
+                  messageId: msgId,
+                  partIndex: index
+                })
+              }
+            );
+          }
+        } else if (part.type === "reasoning") {
+          node = /* @__PURE__ */ jsx2(
+            InlineThinkingItem,
+            {
+              part,
+              defaultOpen: isStreaming
+            }
+          );
+        } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
+          node = /* @__PURE__ */ jsx2("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
+        }
+        if (!node) return null;
+        return /* @__PURE__ */ jsx2("div", { className: gapClass, children: node }, key);
+      }) }) })
+    ] }) });
+  }
+);
+RunGroup.displayName = "RunGroup";
+
+export {
+  InlineThinkingItem,
+  RunGroup
+};

package/dist/{chunk-U4YRT6MT.js → chunk-O6NUUCT2.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-3O4XJCOE.js";
+} from "./chunk-EOGJX2TU.js";
 import {
   Markdown
 } from "./chunk-FJBTCTZM.js";

package/dist/{chunk-CJJMKDNN.js → chunk-PN3S2MTV.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-U4YRT6MT.js";
+} from "./chunk-O6NUUCT2.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-FKDZOA4S.js → chunk-SJ6IL4HI.js}

@@ -2,18 +2,18 @@ import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-54SQQMMM.js";
+} from "./chunk-AZWDI2JG.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-TAWY3KOH.js";
+} from "./chunk-LASW7CYH.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-3O4XJCOE.js";
+} from "./chunk-EOGJX2TU.js";
 import {
   getToolDisplayMetadata
-} from "./chunk-BX6AQMUS.js";
+} from "./chunk-ULDNFLIM.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-52Y3FMFI.js";

package/dist/{chunk-BX6AQMUS.js → chunk-ULDNFLIM.js}

@@ -175,9 +175,52 @@ function getToolErrorText(part, fallback) {
   return part.state.error || fallback;
 }
 
+// src/utils/format.ts
+function formatDuration(ms) {
+  if (ms < 1e3) return "<1s";
+  const seconds = Math.floor(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
+}
+function truncateText(text, max) {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= max) return cleaned;
+  return cleaned.slice(0, max).trim() + "...";
+}
+function formatUptime(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const totalSeconds = Math.floor(ms / 1e3);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return `${minutes}m ${seconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  if (hours < 24) return `${hours}h ${remMinutes}m`;
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  return `${days}d ${remHours}h`;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
+  const gb = mb / 1024;
+  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
+}
+
 export {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText
+  getToolErrorText,
+  formatDuration,
+  truncateText,
+  formatUptime,
+  formatBytes
 };

package/dist/hooks.js

@@ -11,16 +11,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CJJMKDNN.js";
+} from "./chunk-PN3S2MTV.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-54SQQMMM.js";
-import "./chunk-U4YRT6MT.js";
-import "./chunk-3O4XJCOE.js";
-import "./chunk-BX6AQMUS.js";
+} from "./chunk-AZWDI2JG.js";
+import "./chunk-O6NUUCT2.js";
+import "./chunk-EOGJX2TU.js";
+import "./chunk-ULDNFLIM.js";
+import "./chunk-AAUNOHVL.js";
+import "./chunk-ZRVH3WCA.js";
 import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CJJMKDNN.js";
+} from "./chunk-PN3S2MTV.js";
 import {
   addMessage,
   addParts,
@@ -138,40 +138,38 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-FKDZOA4S.js";
+} from "./chunk-SJ6IL4HI.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-54SQQMMM.js";
+} from "./chunk-AZWDI2JG.js";
 import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-U4YRT6MT.js";
+} from "./chunk-O6NUUCT2.js";
 import {
-  ExpandedToolDetail,
   InlineThinkingItem,
-  InlineToolItem,
-  LiveDuration,
   RunGroup
-} from "./chunk-TAWY3KOH.js";
+} from "./chunk-LASW7CYH.js";
 import {
+  ExpandedToolDetail,
+  InlineToolItem,
+  LiveDuration,
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-3O4XJCOE.js";
+} from "./chunk-EOGJX2TU.js";
 import {
+  TOOL_CATEGORY_ICONS,
   formatBytes,
   formatDuration,
   formatUptime,
-  truncateText
-} from "./chunk-4CLN43XT.js";
-import {
-  TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText
-} from "./chunk-BX6AQMUS.js";
+  getToolErrorText,
+  truncateText
+} from "./chunk-ULDNFLIM.js";
 import {
   CommandPreview,
   DiffPreview,

package/dist/run.d.ts

@@ -35,13 +35,17 @@ interface InlineToolItemProps {
     className?: string;
     contentClassName?: string;
     actions?: ReactNode;
+    /** Override the derived title (default: from `getToolDisplayMetadata`). */
+    title?: string;
+    /** Override the derived inline description. */
+    description?: string;
 }
 /**
  * Compact single-line tool call display (32px height).
  * Shows icon, title, description, duration, and status indicator.
  * Expands on click to show ExpandedToolDetail.
  */
-declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, actions, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
+declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, actions, title: titleOverride, description: descriptionOverride, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface InlineThinkingItemProps {
     part: ReasoningPart;