@tangle-network/ui 10.0.0 → 11.1.0

package/dist/{chunk-KHO7DYXH.js → chunk-FIFE5HCW.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-HHYUPAOJ.js";
+} from "./chunk-PX5KV5HI.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-INMWNFAS.js";
+} from "./chunk-4ORVXSMU.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -103,6 +103,7 @@ var MessageList = memo2(
 MessageList.displayName = "MessageList";
 
 // src/chat/agent-timeline.tsx
+import { useState as useState2 } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -170,11 +171,12 @@ var TONE_STYLES = {
 function formatTime2(date) {
   return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
 }
-function AgentTimelineRow({ isLast, accentClassName, children }) {
+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 mt-2 h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
+      /* @__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 })
   ] });
@@ -233,80 +235,111 @@ function AgentTimeline({
   isThinking,
   emptyState,
   className,
-  renderToolActions
+  renderToolActions,
+  collapseAfter
 }) {
+  const [expanded, setExpanded] = useState2(false);
   if (items.length === 0 && !isThinking) {
     return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-4", className), children: emptyState }) : null;
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
-  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
-  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
-    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 isUserMessage = (item) => item.kind === "message" && item.role === "user";
+  const timelineItems = renderedItems.filter((item) => !isUserMessage(item));
+  const limit = collapseAfter ?? Infinity;
+  const collapsible = timelineItems.length > limit;
+  const collapsed = collapsible && !expanded;
+  let renderList = renderedItems;
+  let hiddenCount = 0;
+  if (collapsed) {
+    const visible = [];
+    let spineCount = 0;
+    for (const item of renderedItems) {
+      if (spineCount >= limit) break;
+      visible.push(item);
+      if (!isUserMessage(item)) spineCount += 1;
     }
-    const timelineIndex = timelineItems.indexOf(item);
-    const isLast = timelineIndex === timelineItems.length - 1;
-    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)]", 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)]", children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
-        const part = item.parts?.[callIndex];
-        return /* @__PURE__ */ jsx4(
+    renderList = visible;
+    hiddenCount = timelineItems.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: call.type,
-            label: call.label,
-            status: call.status,
-            detail: call.detail,
-            output: call.output,
-            duration: call.duration,
-            part,
-            actions: part ? renderToolActions?.(part) : void 0
+            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 })
           },
-          call.id
+          item.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") {
-      return /* @__PURE__ */ jsx4(
-        AgentTimelineRow,
-        {
-          isLast,
-          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
-        },
-        item.id
-      );
-    }
-    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
-  }) });
+      }
+      if (item.kind === "artifact") {
+        return /* @__PURE__ */ jsx4(
+          AgentTimelineRow,
+          {
+            isLast,
+            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+            children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: item.content }, item.id);
+    }),
+    collapsible ? /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast: true, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((value) => !value),
+        className: "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+        children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
+      }
+    ) }) : null
+  ] });
 }
 
 // src/chat/chat-container.tsx
@@ -552,7 +585,8 @@ var ChatContainer = memo3(
     renderRunActions,
     renderUserMessageActions,
     renderToolActions,
-    renderTimelineToolActions
+    renderTimelineToolActions,
+    collapseTimelineAfter
   }) => {
     const scrollRef = useRef(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -578,7 +612,8 @@ var ChatContainer = memo3(
             {
               items: timeline.items,
               isThinking: timeline.showThinking,
-              renderToolActions: renderTimelineToolActions
+              renderToolActions: renderTimelineToolActions,
+              collapseAfter: collapseTimelineAfter
             }
           ) }) : /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(
             MessageList,

package/dist/{chunk-HHYUPAOJ.js → chunk-PX5KV5HI.js}

@@ -1,7 +1,8 @@
 import {
+  ExpandableContent,
   InlineToolItem,
-  LiveDuration
-} from "./chunk-INMWNFAS.js";
+  RunRowShell
+} from "./chunk-4ORVXSMU.js";
 import {
   formatDuration,
   truncateText
@@ -18,9 +19,8 @@ import {
 
 // 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";
+import { Brain } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 var InlineThinkingItem = memo(
   ({
     part,
@@ -33,7 +33,7 @@ var InlineThinkingItem = memo(
     const autoCollapsedRef = useRef(false);
     const startTime = part.time?.start;
     const endTime = part.time?.end;
-    const durationMs = startTime && endTime ? endTime - startTime : void 0;
+    const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
     const isActive = startTime != null && endTime == null;
     const preview = part.text ? truncateText(part.text, 120) : void 0;
     useEffect(() => {
@@ -50,72 +50,40 @@ var InlineThinkingItem = memo(
         return () => window.clearTimeout(timer);
       }
     }, [autoCollapse, durationMs, isActive]);
-    return /* @__PURE__ */ jsx(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsx(
+      RunRowShell,
       {
-        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." }) })
-        ]
+        icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),
+        title: isActive ? "Thinking\u2026" : "Reasoning",
+        description: preview,
+        status: isActive ? "running" : "idle",
+        startTime,
+        durationMs,
+        open,
+        onOpenChange: setOpen,
+        className,
+        children: part.text ? /* @__PURE__ */ jsx(
+          ExpandableContent,
+          {
+            fadeClassName: "from-[var(--md3-surface-container)]",
+            className: contentClassName ? `px-3 py-3 ${contentClassName}` : "px-3 py-3",
+            children: /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground", children: /* @__PURE__ */ jsx(Markdown, { children: part.text }) })
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "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 * as Collapsible from "@radix-ui/react-collapsible";
 import {
   Bot,
   Loader2,
   ChevronDown,
-  ChevronRight as ChevronRight2,
+  ChevronRight,
   Terminal,
   FileEdit,
   FileSearch,
@@ -126,14 +94,14 @@ import {
   Settings,
   Sparkles
 } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function SpineRow({
   accentClassName,
   isLast,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative flex justify-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center", children: [
       !isLast && /* @__PURE__ */ jsx2("span", { className: "absolute top-3.5 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)]" }),
       /* @__PURE__ */ jsx2(
         "span",
@@ -163,10 +131,10 @@ function AssistantShell({
   isStreaming,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs", children: [
       /* @__PURE__ */ jsx2("span", { children: branding.label }),
-      isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5", children: [
+      isStreaming ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
         "Thinking"
       ] }) : null
@@ -321,7 +289,7 @@ var RunGroup = memo2(
       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: [
+      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__ */ jsxs("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" } })
@@ -344,7 +312,7 @@ var RunGroup = memo2(
           const schema = extractOpenUISchema(toolPart.state.output);
           const summary = getOpenUISummary(toolPart.state.output);
           if (toolPart.state.status === "completed" && schema) {
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
@@ -357,7 +325,7 @@ var RunGroup = memo2(
             );
           }
           if (toolPart.state.status === "running") {
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
@@ -385,24 +353,24 @@ var RunGroup = memo2(
       if (part.type === "text") return "bg-primary";
       return "bg-[var(--border-hover)]";
     };
-    return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx2(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsx2(Collapsible.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx2(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             className: "group flex min-w-0 flex-1 items-center gap-2 rounded-md px-1 py-0.5 text-left transition-colors hover:bg-[var(--surface-container-high)]/40",
             children: [
-              collapsed ? /* @__PURE__ */ jsx2(ChevronRight2, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              collapsed ? /* @__PURE__ */ jsx2(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
               /* @__PURE__ */ jsx2("span", { className: cn("font-semibold text-sm", 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("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxs("span", { 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: [
+                isStreaming ? /* @__PURE__ */ jsxs("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__ */ jsxs("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"
                 ] })
@@ -413,7 +381,7 @@ var RunGroup = memo2(
         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: "line-clamp-2 pl-6 text-sm leading-6 text-muted-foreground", children: run.summaryText }) : null,
-      /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: "pt-1.5", children: rows.map(({ part, msgId, index }, rowIndex) => {
+      /* @__PURE__ */ jsx2(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: "pt-1.5", children: rows.map(({ part, msgId, index }, rowIndex) => {
         const key = `${msgId}-${index}`;
         const isLast = rowIndex === rows.length - 1;
         let node = null;
@@ -423,12 +391,12 @@ var RunGroup = memo2(
             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-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", children: [
+              node = /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", 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 }) })
               ] });
             } else if (toolPart.state.status === "running") {
-              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground", children: [
+              node = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] 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"
               ] });

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CCM2KRQH.js";
+} from "./chunk-EWIWYC2I.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-KBOD47AW.js";
-import "./chunk-INMWNFAS.js";
+import "./chunk-F22SQTBP.js";
+import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CCM2KRQH.js";
+} from "./chunk-EWIWYC2I.js";
 import {
   addMessage,
   addParts,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-KHO7DYXH.js";
+} from "./chunk-FIFE5HCW.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,16 +147,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-KBOD47AW.js";
+} from "./chunk-F22SQTBP.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-HHYUPAOJ.js";
+} from "./chunk-PX5KV5HI.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-INMWNFAS.js";
+} from "./chunk-4ORVXSMU.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/run.d.ts

@@ -41,9 +41,10 @@ interface InlineToolItemProps {
     description?: string;
 }
 /**
- * Compact single-line tool call display (32px height).
- * Shows icon, title, description, duration, and status indicator.
- * Expands on click to show ExpandedToolDetail.
+ * Compact single-line tool call display. Shows a category icon, title,
+ * description, duration and status, and expands on click to show
+ * ExpandedToolDetail. Rendered through the shared RunRowShell so it stays
+ * consistent with the reasoning row.
  */
 declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, actions, title: titleOverride, description: descriptionOverride, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/run.js

@@ -2,16 +2,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-KBOD47AW.js";
+} from "./chunk-F22SQTBP.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-HHYUPAOJ.js";
+} from "./chunk-PX5KV5HI.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-INMWNFAS.js";
+} from "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CCM2KRQH.js";
+} from "./chunk-EWIWYC2I.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-KBOD47AW.js";
-import "./chunk-INMWNFAS.js";
+import "./chunk-F22SQTBP.js";
+import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "10.0.0",
+  "version": "11.1.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.9.0"
+    "@tangle-network/brand": "^1.0.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/agent-timeline.stories.tsx

@@ -164,6 +164,17 @@ export const CodingSession: Story = {
   },
 }
 
+// ---------------------------------------------------------------------------
+// Long session collapsed to the first N spine rows behind a toggle
+// ---------------------------------------------------------------------------
+
+export const Collapsed: Story = {
+  args: {
+    items: codingSession,
+    collapseAfter: 3,
+  },
+}
+
 // ---------------------------------------------------------------------------
 // Session with thinking indicator active
 // ---------------------------------------------------------------------------