@tangle-network/ui 11.6.0 → 11.7.0

package/dist/{chunk-RKC3GXHE.js → chunk-VDCZHOOO.js}

@@ -2,18 +2,18 @@ import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-AZWDI2JG.js";
+} from "./chunk-UYTRNR7Z.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-R5GVQDL3.js";
+} from "./chunk-CVX53NCC.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-XT4JMYVB.js";
 import {
   getToolDisplayMetadata
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-3M7BPSSW.js";
@@ -45,10 +45,17 @@ var UserMessage = memo(
   ({ message: _message, parts, content, timestamp, actions }) => {
     const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
     if (!text.trim()) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "w-full rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
-        timestamp ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(timestamp) }) : null,
-        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: text })
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "group flex max-w-[78%] flex-col items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full rounded-2xl bg-muted/50 px-4 py-3", children: [
+        timestamp ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-user-message-time": "",
+            className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+            children: formatTime(timestamp)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground", children: text })
       ] }),
       actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
     ] }) });
@@ -146,55 +153,56 @@ function ThinkingIndicator({ className }) {
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TONE_STYLES = {
   default: {
-    dot: "bg-[var(--border-hover)]",
     card: "border-border bg-card",
     text: "text-foreground",
     icon: CircleDot
   },
   info: {
-    dot: "bg-[var(--surface-info-text)]",
     card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
     text: "text-[var(--surface-info-text)]",
     icon: Info
   },
   success: {
-    dot: "bg-[var(--surface-success-text)]",
     card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
     text: "text-[var(--surface-success-text)]",
     icon: CheckCircle2
   },
   warning: {
-    dot: "bg-[var(--surface-warning-text)]",
     card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
     text: "text-[var(--surface-warning-text)]",
     icon: AlertTriangle
   },
   error: {
-    dot: "bg-[var(--surface-danger-text)]",
     card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
     text: "text-[var(--surface-danger-text)]",
     icon: AlertTriangle
   }
 };
-function formatTime2(date) {
-  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+function stepKind(item) {
+  if (item.kind === "message") return item.role === "user" ? "user" : "prose";
+  if (item.kind === "status" || item.kind === "artifact") return "card";
+  return "tool";
 }
-var CARD_ROW_DOT = "mt-[calc((2.5rem-var(--timeline-dot-size))/2)]";
-function AgentTimelineRow({ isLast, accentClassName, dotClassName = "mt-2", children }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-center", children: [
-      !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" }),
-      /* @__PURE__ */ jsx4("span", { className: cn("relative h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", dotClassName, accentClassName) })
-    ] }),
-    /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
-  ] });
+function spacingBefore(prev, next) {
+  if (prev === void 0) return "";
+  if (prev === "user" || next === "user") return "mt-4";
+  if (prev === "card" || next === "card") return "mt-2";
+  if (prev === "tool" || next === "tool") return "mt-1";
+  return "mt-3";
 }
+var ROW_BLEED = "-mx-3";
 function AssistantMessage({ item }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(item.timestamp) }),
-    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
-    item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
-    item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]", children: item.content }),
+    item.isStreaming && /* @__PURE__ */ jsx4(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-streaming-caret": "",
+        className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"
+      }
+    ),
+    item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-1", children: item.toolCalls }),
     item.after && /* @__PURE__ */ jsx4("div", { className: "mt-3 border-t border-border pt-3", children: item.after })
   ] });
 }
@@ -252,101 +260,88 @@ function AgentTimeline({
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
   const isUserMessage = (item) => item.kind === "message" && item.role === "user";
-  const timelineItems = renderedItems.filter((item) => !isUserMessage(item));
+  const stepItems = renderedItems.filter((item) => !isUserMessage(item));
   const limit = collapseAfter ?? Infinity;
-  const collapsible = timelineItems.length > limit;
+  const collapsible = stepItems.length > limit;
   const collapsed = collapsible && !expanded;
   let renderList = renderedItems;
   let hiddenCount = 0;
   if (collapsed) {
     const visible = [];
-    let spineCount = 0;
+    let stepCount = 0;
     for (const item of renderedItems) {
-      if (spineCount >= limit) break;
+      if (stepCount >= limit) break;
       visible.push(item);
-      if (!isUserMessage(item)) spineCount += 1;
+      if (!isUserMessage(item)) stepCount += 1;
     }
     renderList = visible;
-    hiddenCount = timelineItems.length - limit;
+    hiddenCount = stepItems.length - limit;
   }
-  const visibleSpine = renderList.filter((item) => !isUserMessage(item));
-  const lastSpineItem = collapsible ? void 0 : visibleSpine[visibleSpine.length - 1];
-  return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: [
-    renderList.map((item) => {
-      if (item.kind === "message" && item.role === "user") {
-        return /* @__PURE__ */ jsx4("div", { className: "mt-6 mb-4 first:mt-0", children: /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) }, item.id);
-      }
-      const isLast = item === lastSpineItem;
-      if (item.kind === "message") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
-      }
-      if (item.kind === "tool") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(
-          ToolCallStep,
-          {
-            type: item.call.type,
-            label: item.call.label,
-            status: item.call.status,
-            detail: item.call.detail,
-            output: item.call.output,
-            duration: item.call.duration,
-            part: item.part,
-            actions: item.part ? renderToolActions?.(item.part) : void 0
-          }
-        ) }, item.id);
-      }
-      if (item.kind === "tool_group") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
-          const part = item.parts?.[callIndex];
-          return /* @__PURE__ */ jsx4(
-            ToolCallStep,
-            {
-              type: call.type,
-              label: call.label,
-              status: call.status,
-              detail: call.detail,
-              output: call.output,
-              duration: call.duration,
-              part,
-              actions: part ? renderToolActions?.(part) : void 0
-            },
-            call.id
-          );
-        }) }) }, item.id);
-      }
-      if (item.kind === "status") {
-        return /* @__PURE__ */ jsx4(
-          AgentTimelineRow,
-          {
-            isLast,
-            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-            children: /* @__PURE__ */ jsx4(StatusCard, { item })
-          },
-          item.id
-        );
-      }
-      if (item.kind === "artifact") {
+  const renderItem = (item) => {
+    if (item.kind === "message") {
+      return item.role === "user" ? /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) : /* @__PURE__ */ jsx4(AssistantMessage, { item });
+    }
+    if (item.kind === "tool") {
+      return /* @__PURE__ */ jsx4(
+        ToolCallStep,
+        {
+          type: item.call.type,
+          label: item.call.label,
+          status: item.call.status,
+          detail: item.call.detail,
+          output: item.call.output,
+          duration: item.call.duration,
+          part: item.part,
+          actions: item.part ? renderToolActions?.(item.part) : void 0
+        }
+      );
+    }
+    if (item.kind === "tool_group") {
+      return /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
+        const part = item.parts?.[callIndex];
         return /* @__PURE__ */ jsx4(
-          AgentTimelineRow,
+          ToolCallStep,
           {
-            isLast,
-            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-            children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+            type: call.type,
+            label: call.label,
+            status: call.status,
+            detail: call.detail,
+            output: call.output,
+            duration: call.duration,
+            part,
+            actions: part ? renderToolActions?.(part) : void 0
           },
-          item.id
+          call.id
         );
-      }
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: item.content }, item.id);
+      }) });
+    }
+    if (item.kind === "status") return /* @__PURE__ */ jsx4(StatusCard, { item });
+    if (item.kind === "artifact") return /* @__PURE__ */ jsx4(ArtifactCard, { item });
+    return item.content;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className), children: [
+    renderList.map((item, index) => {
+      const kind = stepKind(item);
+      const prev = index > 0 ? stepKind(renderList[index - 1]) : void 0;
+      return /* @__PURE__ */ jsx4(
+        "div",
+        {
+          "data-timeline-step": kind,
+          className: cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED),
+          children: renderItem(item)
+        },
+        item.id
+      );
     }),
-    collapsible ? /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast: true, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
+    collapsible ? /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         onClick: () => setExpanded((value) => !value),
-        className: "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+        className: "mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
         children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
       }
-    ) }) : null
+    ) : null
   ] });
 }
 
@@ -693,7 +688,7 @@ function ChatMessage({
       children: [
         !hideRoleLabel && /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"), children: [
           /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground text-xs", children: isUser ? userLabel : assistantLabel }),
-          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime3(timestamp) })
+          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime2(timestamp) })
         ] }),
         /* @__PURE__ */ jsxs5(
           "div",
@@ -716,7 +711,7 @@ function ChatMessage({
     }
   );
 }
-function formatTime3(date) {
+function formatTime2(date) {
   return date.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "2-digit"

package/dist/{chunk-J2G7KCYH.js → chunk-XT4JMYVB.js}

@@ -3,7 +3,7 @@ import {
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -13,6 +13,9 @@ import {
   WebSearchPreview,
   WriteFilePreview
 } from "./chunk-AAUNOHVL.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";
@@ -204,34 +207,20 @@ var ExpandedToolDetail = memo(({ part }) => {
 });
 ExpandedToolDetail.displayName = "ExpandedToolDetail";
 
-// src/run/run-item-primitives.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function LiveDuration({ startTime }) {
-  const [elapsed, setElapsed] = useState2(Date.now() - startTime);
-  useEffect2(() => {
-    const id = setInterval(() => setElapsed(Date.now() - startTime), 100);
-    return () => clearInterval(id);
-  }, [startTime]);
-  return /* @__PURE__ */ jsx3("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
-}
-
 // src/run/run-row-shell.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { Loader2 as Loader22, ChevronRight } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function RunRowStatusDot({ status }) {
-  if (status === "running") {
-    return /* @__PURE__ */ jsx4(Loader22, { className: "h-3 w-3 shrink-0 animate-spin text-[var(--accent-text)]" });
-  }
-  if (status === "success") {
-    return /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-success-text)]" });
-  }
-  if (status === "error") {
-    return /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]" });
-  }
-  return null;
+  if (status !== "error") return null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-run-row-status": "error",
+      className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+    }
+  );
 }
 var SHAPE_CLASS = {
   single: "rounded-[var(--radius-lg)]",
@@ -239,13 +228,14 @@ var SHAPE_CLASS = {
   middle: "rounded-[var(--radius-sm)]",
   last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]"
 };
+var HEADER_INSET = "px-2 py-1";
+var ERROR_INDENT = "pl-[2.375rem]";
 function RunRowShell({
   icon,
   title,
   description,
   descriptionMono = false,
   status = "idle",
-  startTime,
   durationMs,
   groupPosition = "single",
   collapsedError,
@@ -257,7 +247,7 @@ function RunRowShell({
   contentClassName,
   children
 }) {
-  const [openState, setOpenState] = useState3(defaultOpen);
+  const [openState, setOpenState] = useState2(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : openState;
   const setOpen = (next) => {
@@ -266,62 +256,110 @@ function RunRowShell({
   };
   const isRunning = status === "running";
   const expandable = children != null;
-  return /* @__PURE__ */ jsx4(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2", children: [
+  return /* @__PURE__ */ jsx3(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2", children: [
     /* @__PURE__ */ jsxs3(
       "div",
       {
+        "data-run-row": "",
+        "data-state": open ? "open" : "closed",
         className: cn(
-          "min-w-0 flex-1 overflow-hidden border transition-colors",
-          "border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
-          expandable && "hover:border-border",
-          open && "border-border",
+          "group min-w-0 flex-1 overflow-hidden border transition-colors",
+          open ? "border-border bg-[var(--md3-surface-container)]" : "border-transparent bg-transparent",
+          expandable && !open && "hover:bg-[var(--md3-surface-container)]",
           SHAPE_CLASS[groupPosition],
           className
         ),
         children: [
-          /* @__PURE__ */ jsx4(Collapsible.Trigger, { asChild: true, disabled: !expandable, children: /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx3(Collapsible.Trigger, { asChild: true, disabled: !expandable, children: /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
               className: cn(
-                "flex w-full items-center gap-2.5 px-3 py-2 text-left",
+                "flex w-full items-center gap-2 text-left",
+                HEADER_INSET,
                 expandable ? "cursor-pointer" : "cursor-default"
               ),
               children: [
-                /* @__PURE__ */ jsx4("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-border bg-muted text-muted-foreground", children: icon }),
-                /* @__PURE__ */ jsx4("span", { className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground", children: title }),
-                description ? /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsxs3(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "span",
+                        {
+                          "data-run-row-glyph": "",
+                          className: cn(
+                            "flex items-center justify-center",
+                            expandable && "group-hover:hidden",
+                            open && "hidden"
+                          ),
+                          children: icon
+                        }
+                      ),
+                      expandable ? /* @__PURE__ */ jsx3(
+                        ChevronRight,
+                        {
+                          "data-run-row-chevron": "",
+                          className: cn(
+                            "hidden h-3.5 w-3.5 transition-transform group-hover:block",
+                            open && "block rotate-90"
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 whitespace-nowrap text-sm font-normal text-muted-foreground transition-colors group-hover:text-foreground",
+                      open && "text-foreground"
+                    ),
+                    children: title
+                  }
+                ),
+                description ? /* @__PURE__ */ jsx3(
                   "span",
                   {
                     className: cn(
-                      "hidden min-w-0 flex-1 truncate text-xs text-muted-foreground sm:inline",
+                      "hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline",
                       descriptionMono && "font-mono"
                     ),
                     children: description
                   }
                 ) : null,
-                /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-                  isRunning && startTime != null ? /* @__PURE__ */ jsx4(LiveDuration, { startTime }) : durationMs != null ? /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
-                  /* @__PURE__ */ jsx4(RunRowStatusDot, { status }),
-                  expandable ? /* @__PURE__ */ jsx4(
-                    ChevronRight,
+                /* @__PURE__ */ jsxs3("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  !isRunning && durationMs != null ? /* @__PURE__ */ jsx3(
+                    "span",
                     {
-                      className: cn(
-                        "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
-                        open && "rotate-90"
-                      )
+                      "data-run-row-duration": "",
+                      className: "font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+                      children: formatDuration(durationMs)
                     }
-                  ) : null
+                  ) : null,
+                  /* @__PURE__ */ jsx3(RunRowStatusDot, { status })
                 ] })
               ]
             }
           ) }),
-          collapsedError && !open ? /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: collapsedError }) : null,
-          expandable ? /* @__PURE__ */ jsx4(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx4("div", { className: cn("border-t border-border", contentClassName), children }) }) : null
+          collapsedError && !open ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn(
+                "pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]",
+                ERROR_INDENT
+              ),
+              children: collapsedError
+            }
+          ) : null,
+          expandable ? /* @__PURE__ */ jsx3(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx3("div", { className: cn("border-t border-border", contentClassName), children }) }) : null
         ]
       }
     ),
-    actions ? /* @__PURE__ */ jsx4(
+    actions ? /* @__PURE__ */ jsx3(
       "div",
       {
         className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
@@ -345,7 +383,7 @@ import {
   ClipboardList,
   Settings
 } from "lucide-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var TOOL_CATEGORY_ICON_MAP = {
   command: Terminal,
   write: FileEdit,
@@ -382,22 +420,22 @@ var InlineToolItem = memo2(
     const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
     const category = getToolCategory(part.tool);
     const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
-    return /* @__PURE__ */ jsx5(
+    const status = toRowStatus(part.state.status);
+    return /* @__PURE__ */ jsx4(
       RunRowShell,
       {
-        icon: /* @__PURE__ */ jsx5(DefaultIcon, { className: "h-3.5 w-3.5" }),
-        title,
+        icon: /* @__PURE__ */ jsx4(DefaultIcon, { className: "h-3.5 w-3.5" }),
+        title: status === "running" ? /* @__PURE__ */ jsx4(TextShimmer, { children: title }) : title,
         description,
         descriptionMono: true,
-        status: toRowStatus(part.state.status),
-        startTime,
+        status,
         durationMs,
         groupPosition,
         collapsedError: errorText ?? void 0,
         actions,
         className,
         contentClassName: cn("p-2", contentClassName),
-        children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx5(ExpandedToolDetail, { part })
+        children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx4(ExpandedToolDetail, { part })
       }
     );
   }
@@ -405,7 +443,7 @@ var InlineToolItem = memo2(
 InlineToolItem.displayName = "InlineToolItem";
 
 // src/run/tool-call-step.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var EXT_LANGUAGE = {
   ts: "typescript",
   tsx: "typescript",
@@ -468,7 +506,7 @@ function ToolCallStep({
     }
   };
   const lang = inferLanguage(detail, language);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     InlineToolItem,
     {
       part: resolvedPart,
@@ -476,7 +514,7 @@ function ToolCallStep({
       description: detail,
       className,
       actions,
-      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx6(
+      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx5(
         CodeBlock,
         {
           code: output,
@@ -488,16 +526,20 @@ function ToolCallStep({
   );
 }
 function ToolCallGroup({ title, children, className }) {
-  return /* @__PURE__ */ jsxs4("div", { className: ["my-2 space-y-2", className].filter(Boolean).join(" "), children: [
-    title && /* @__PURE__ */ jsx6("div", { className: "mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }),
-    children
-  ] });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "group",
+      "aria-label": title,
+      className: cn("flex flex-col gap-1", className),
+      children
+    }
+  );
 }
 
 export {
   ExpandableContent,
   ExpandedToolDetail,
-  LiveDuration,
   RunRowStatusDot,
   RunRowShell,
   InlineToolItem,

package/dist/hooks.js

@@ -11,17 +11,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-XROQW5J7.js";
+} from "./chunk-4ENFLPWQ.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-AZWDI2JG.js";
-import "./chunk-XPYPZMYT.js";
-import "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
+} from "./chunk-UYTRNR7Z.js";
+import "./chunk-6RIX7M27.js";
+import "./chunk-XT4JMYVB.js";
+import "./chunk-EIUE5GV2.js";
 import "./chunk-AAUNOHVL.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-ZRVH3WCA.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, PageHeader, PageHeaderProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, PageHeader, PageHeaderProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, TextShimmerProps, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';