@tangle-network/ui 8.1.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 9.0.0
+
+### Major Changes
+
+- 87252cf: Flip the transcript convergence: RunGroup adopts AgentTimeline's look, not the reverse. 8.1 made AgentTimeline fold tool activity into RunGroup's single filled box (`AssistantRunShell`); that boxed all steps into one card and lost the timeline's separated, distinct rows. Reverted.
+
+  - **`RunGroup`** now renders as separated steps on a timeline spine (connector line + accent dots, one row per tool/reasoning/text part) with a quiet collapsible header (chevron · label · summary · status) — no wrapping `bg-card` box, and consecutive tools are no longer joined into one block. It reads like `AgentTimeline`, plus collapse.
+  - **`AgentTimeline`** is restored to its prior flat, separated rendering (no tool-run folding). The `collapsibleToolRuns` / `defaultToolRunsOpen` props added in 8.1 are removed.
+  - **`AssistantRunShell`** (added in 8.1) is removed — the boxed shell is gone.
+
+  BREAKING: `AssistantRunShell` / `AssistantRunShellProps` are no longer exported, and `AgentTimeline` drops the `collapsibleToolRuns` / `defaultToolRunsOpen` props.
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/chat.d.ts

@@ -157,21 +157,12 @@ interface AgentTimelineProps {
     isThinking?: boolean;
     emptyState?: ReactNode;
     className?: string;
-    /**
-     * Fold consecutive tool / tool-group items into one collapsible run shell
-     * (the same `AssistantRunShell` `RunGroup` uses), so a burst of tool activity
-     * reads as a single toggleable step instead of a long ladder of rows.
-     * Default true; pass false for the flat one-row-per-tool timeline.
-     */
-    collapsibleToolRuns?: boolean;
-    /** Start collapsed tool runs open (true) or collapsed (false). Default open. */
-    defaultToolRunsOpen?: boolean;
 }
 /**
  * AgentTimeline — unified mixed-content timeline for agent-backed sandbox
  * sessions. Renders messages, tool steps, status cards, and artifact handoffs in
  * a single execution narrative.
  */
-declare function AgentTimeline({ items, isThinking, emptyState, className, collapsibleToolRuns, defaultToolRunsOpen, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentTimeline({ items, isThinking, emptyState, className, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
 
 export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -5,9 +5,9 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-QUAU6ZNC.js";
+} from "./chunk-LHOGIUGY.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-C3BIVG72.js";
+import "./chunk-2TRMNB6L.js";
 import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";

package/dist/{chunk-C3BIVG72.js → chunk-2TRMNB6L.js}

@@ -108,68 +108,14 @@ var InlineThinkingItem = memo(
 );
 InlineThinkingItem.displayName = "InlineThinkingItem";
 
-// src/run/assistant-run-shell.tsx
-import * as Collapsible2 from "@radix-ui/react-collapsible";
-import { ChevronDown, ChevronRight as ChevronRight2, Loader2, Sparkles } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AssistantRunShell({
-  label,
-  summary,
-  collapsedPreview,
-  badges,
-  isStreaming,
-  collapsed,
-  onToggle,
-  headerActions,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none",
-        className
-      ),
-      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",
-            {
-              type: "button",
-              className: "w-full rounded-[20px] bg-transparent px-0 py-0 text-left transition-colors hover:bg-transparent",
-              children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx2("span", { className: "font-semibold text-foreground text-sm", children: label }),
-                summary ? /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: summary }) : null,
-                collapsed && collapsedPreview ? /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[11px] text-foreground/70", children: collapsedPreview }) : null,
-                /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-                  badges,
-                  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(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronDown, { 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 && collapsedPreview ? /* @__PURE__ */ jsx2("div", { className: "line-clamp-2 px-4 pb-4 text-sm leading-6 text-muted-foreground", children: collapsedPreview }) : null,
-        /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: "border-t border-[var(--border-subtle)] px-4 pb-4 pt-3", children }) })
-      ]
-    }
-  ) });
-}
-
 // src/run/run-group.tsx
 import { memo as memo2, useMemo } from "react";
+import * as Collapsible2 from "@radix-ui/react-collapsible";
 import {
   Bot,
-  Loader2 as Loader22,
+  Loader2,
+  ChevronDown,
+  ChevronRight as ChevronRight2,
   Terminal,
   FileEdit,
   FileSearch,
@@ -177,9 +123,31 @@ import {
   PencilLine,
   Globe,
   ClipboardList,
-  Settings
+  Settings,
+  Sparkles
 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } 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: [
+      !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",
+        {
+          className: cn(
+            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            accentClassName
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "min-w-0 pb-3", children })
+  ] });
+}
 var DEFAULT_BRANDING = {
   label: "Agent",
   accentClass: "text-primary",
@@ -195,15 +163,15 @@ function AssistantShell({
   isStreaming,
   children
 }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs", children: [
-      /* @__PURE__ */ jsx3("span", { children: branding.label }),
-      isStreaming ? /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx3(Loader22, { className: "h-3 w-3 animate-spin" }),
+  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: [
+      /* @__PURE__ */ jsx2("span", { children: branding.label }),
+      isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
         "Thinking"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: ASSISTANT_SHELL, children })
+    /* @__PURE__ */ jsx2("div", { className: ASSISTANT_SHELL, children })
   ] });
 }
 var CATEGORY_ICON_MAP = {
@@ -295,14 +263,14 @@ function CategoryBadges({ categories }) {
     [categories]
   );
   if (sorted.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
     const Icon = CATEGORY_ICON_MAP[cat] ?? Settings;
-    return /* @__PURE__ */ jsx3(
+    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__ */ jsx3(Icon, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx2(Icon, { className: "h-3 w-3" })
       },
       cat
     );
@@ -321,16 +289,6 @@ function renderSummary(run) {
   }
   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,
@@ -363,10 +321,10 @@ var RunGroup = memo2(
       if (!isStreaming) {
         return null;
       }
-      return /* @__PURE__ */ jsx3(AssistantShell, { branding, isStreaming: true, children: /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs3("span", { className: "flex gap-[5px]", children: [
-        /* @__PURE__ */ jsx3("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
-        /* @__PURE__ */ jsx3("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
-        /* @__PURE__ */ jsx3("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+      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 }) => {
@@ -379,32 +337,32 @@ var RunGroup = memo2(
       return false;
     });
     if (!showTraceChrome) {
-      return /* @__PURE__ */ jsx3(AssistantShell, { branding, isStreaming, children: allParts.map(({ part, msgId, index }) => {
+      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__ */ jsxs3(
+            return /* @__PURE__ */ jsxs2(
               "div",
               {
                 className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
                 children: [
-                  summary ? /* @__PURE__ */ jsx3("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
-                  /* @__PURE__ */ jsx3("div", { className: "p-4", children: /* @__PURE__ */ jsx3(OpenUIArtifactRenderer, { schema }) })
+                  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__ */ jsxs3(
+            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__ */ jsx3(Loader22, { className: "h-4 w-4 animate-spin text-primary" }),
+                  /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
                   "Building view\u2026"
                 ]
               },
@@ -413,85 +371,97 @@ var RunGroup = memo2(
           }
         }
         if (part.type === "text" && !part.synthetic && part.text.trim()) {
-          return /* @__PURE__ */ jsx3("div", { className: "px-0.5", children: /* @__PURE__ */ jsx3(Markdown, { className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]", children: part.text }) }, key);
+          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__ */ jsx3(
-      AssistantRunShell,
-      {
-        label: branding.label,
-        summary: renderSummary(run) || void 0,
-        collapsedPreview: run.summaryText ?? void 0,
-        badges: /* @__PURE__ */ jsx3(CategoryBadges, { categories: stats.toolCategories }),
-        isStreaming,
-        collapsed,
-        onToggle,
-        headerActions,
-        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__ */ jsxs3("div", { className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
-                  summary ? /* @__PURE__ */ jsxs3("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
-                    /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
-                    /* @__PURE__ */ jsx3("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
-                  ] }) : null,
-                  /* @__PURE__ */ jsx3("div", { className: "p-4", children: /* @__PURE__ */ jsx3(OpenUIArtifactRenderer, { schema }) })
-                ] });
-              } else if (toolPart.state.status === "running") {
-                node = /* @__PURE__ */ jsxs3("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__ */ jsx3(Loader22, { className: "h-4 w-4 animate-spin text-primary" }),
-                  "Building view\u2026"
-                ] });
-              }
-            }
-            if (node === null) {
-              node = /* @__PURE__ */ jsx3(
-                InlineToolItem,
-                {
-                  part,
-                  renderToolDetail,
-                  groupPosition: getToolGroupPosition(partIndex, allParts),
-                  actions: renderToolActions?.(part, {
-                    run,
-                    messageId: msgId,
-                    partIndex: index
-                  })
-                }
-              );
+    const rows = allParts.filter(({ part }) => {
+      if (part.type === "tool" || part.type === "reasoning") return true;
+      return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+    });
+    const dotAccent = (part) => {
+      if (part.type === "reasoning") return "bg-[var(--brand-glow)]";
+      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(
+          "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" }),
+              /* @__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__ */ 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"
+                ] })
+              ] })
+            ]
+          }
+        ) }),
+        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) => {
+        const key = `${msgId}-${index}`;
+        const isLast = rowIndex === rows.length - 1;
+        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-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", 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(--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"
+              ] });
             }
-          } else if (part.type === "reasoning") {
-            node = /* @__PURE__ */ jsx3(
-              InlineThinkingItem,
+          }
+          if (node === null) {
+            node = /* @__PURE__ */ jsx2(
+              InlineToolItem,
               {
                 part,
-                defaultOpen: isStreaming
+                renderToolDetail,
+                actions: renderToolActions?.(part, {
+                  run,
+                  messageId: msgId,
+                  partIndex: index
+                })
               }
             );
-          } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
-            node = /* @__PURE__ */ jsx3("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx3(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
           }
-          if (!node) return null;
-          return /* @__PURE__ */ jsx3("div", { className: gapClass, children: node }, key);
-        })
-      }
-    );
+        } 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-0.5", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
+        }
+        if (!node) return null;
+        return /* @__PURE__ */ jsx2(SpineRow, { accentClassName: dotAccent(part), isLast, children: node }, key);
+      }) }) })
+    ] }) });
   }
 );
 RunGroup.displayName = "RunGroup";
 
 export {
   InlineThinkingItem,
-  AssistantRunShell,
   RunGroup
 };

package/dist/{chunk-QUAU6ZNC.js → chunk-LHOGIUGY.js}

@@ -4,10 +4,9 @@ import {
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
 import {
-  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-C3BIVG72.js";
+} from "./chunk-2TRMNB6L.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -99,7 +98,6 @@ var MessageList = memo2(
 MessageList.displayName = "MessageList";
 
 // src/chat/agent-timeline.tsx
-import { useState as useState2 } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -132,48 +130,6 @@ function ThinkingIndicator({ className }) {
 
 // src/chat/agent-timeline.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function foldToolRuns(items) {
-  const nodes = [];
-  let run = [];
-  const flush = () => {
-    if (run.length === 0) return;
-    if (run.length === 1) {
-      nodes.push(run[0]);
-    } else {
-      nodes.push({ id: `tool-run-${run[0].id}`, kind: "tool_run", items: run });
-    }
-    run = [];
-  };
-  for (const item of items) {
-    if (item.kind === "tool" || item.kind === "tool_group") {
-      run.push(item);
-    } else {
-      flush();
-      nodes.push(item);
-    }
-  }
-  flush();
-  return nodes;
-}
-function countTools(group) {
-  return group.items.reduce(
-    (n, item) => n + (item.kind === "tool_group" ? item.calls.length : 1),
-    0
-  );
-}
-function ToolCallRow({ call }) {
-  return /* @__PURE__ */ jsx4(
-    ToolCallStep,
-    {
-      type: call.type,
-      label: call.label,
-      status: call.status,
-      detail: call.detail,
-      output: call.output,
-      duration: call.duration
-    }
-  );
-}
 var TONE_STYLES = {
   default: {
     dot: "bg-[var(--border-hover)]",
@@ -277,76 +233,72 @@ function AgentTimeline({
   items,
   isThinking,
   emptyState,
-  className,
-  collapsibleToolRuns = true,
-  defaultToolRunsOpen = true
+  className
 }) {
-  const [collapsedRuns, setCollapsedRuns] = useState2({});
-  const toggleRun = (id) => setCollapsedRuns((prev) => ({
-    ...prev,
-    [id]: prev[id] === void 0 ? defaultToolRunsOpen : !prev[id]
-  }));
   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 nodes = collapsibleToolRuns ? foldToolRuns(renderedItems) : renderedItems;
-  const timelineNodes = nodes.filter(
-    (node) => !(node.kind === "message" && node.role === "user")
-  );
-  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: nodes.map((node) => {
-    if (node.kind === "message" && node.role === "user") {
-      return /* @__PURE__ */ jsx4(UserMessage2, { item: node }, node.id);
+  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(UserMessage2, { item }, item.id);
+    }
+    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);
     }
-    const isLast = timelineNodes.indexOf(node) === timelineNodes.length - 1;
-    if (node.kind === "tool_run") {
-      const collapsed = collapsedRuns[node.id] ?? !defaultToolRunsOpen;
-      const total = countTools(node);
+    if (item.kind === "tool") {
       return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
-        AssistantRunShell,
+        ToolCallStep,
         {
-          label: "Tools",
-          summary: `${total} ${total === 1 ? "tool" : "tools"}`,
-          collapsed,
-          onToggle: () => toggleRun(node.id),
-          children: /* @__PURE__ */ jsx4("div", { className: "space-y-px", children: node.items.map(
-            (item) => item.kind === "tool_group" ? /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call) => /* @__PURE__ */ jsx4(ToolCallRow, { call }, call.id)) }, item.id) : /* @__PURE__ */ jsx4(ToolCallRow, { call: item.call }, item.id)
-          ) })
+          type: item.call.type,
+          label: item.call.label,
+          status: item.call.status,
+          detail: item.call.detail,
+          output: item.call.output,
+          duration: item.call.duration
         }
-      ) }, node.id);
-    }
-    if (node.kind === "message") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item: node }) }, node.id);
-    }
-    if (node.kind === "tool") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(ToolCallRow, { call: node.call }) }, node.id);
+      ) }, item.id);
     }
-    if (node.kind === "tool_group") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: node.title, children: node.calls.map((call) => /* @__PURE__ */ jsx4(ToolCallRow, { call }, call.id)) }) }, node.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) => /* @__PURE__ */ jsx4(
+        ToolCallStep,
+        {
+          type: call.type,
+          label: call.label,
+          status: call.status,
+          detail: call.detail,
+          output: call.output,
+          duration: call.duration
+        },
+        call.id
+      )) }) }, item.id);
     }
-    if (node.kind === "status") {
+    if (item.kind === "status") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(StatusCard, { item: node })
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(StatusCard, { item })
         },
-        node.id
+        item.id
       );
     }
-    if (node.kind === "artifact") {
+    if (item.kind === "artifact") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(ArtifactCard, { item: node })
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
         },
-        node.id
+        item.id
       );
     }
-    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: node.content }, node.id);
+    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
   }) });
 }
 

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardConte
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.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';
-export { AssistantRunShell, AssistantRunShellProps, ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
+export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
 export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from './files.js';