@tangle-network/ui 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 8.1.0
+
+### Minor Changes
+
+- 79b55f5: Converge the two transcripts on one collapsible run. New `AssistantRunShell` primitive (the header · summary · status pill · chevron · Radix collapse extracted from `RunGroup`) is now used by both `RunGroup` and `AgentTimeline`, so there is one implementation of "an assistant run" instead of two divergent ones. `AgentTimeline` folds consecutive tool / tool-group items into that shell (`collapsibleToolRuns`, default on; `defaultToolRunsOpen`, default open) so a burst of tool activity reads as one toggleable step on the timeline spine instead of a long ladder of rows — matching `RunGroup`. Additive: `AgentTimeline`'s `items[]` API is unchanged and folding happens internally; consumers building their own item arrays keep working.
+
 ## 8.0.0
 
 ### Major Changes

package/dist/chat.d.ts

@@ -157,12 +157,21 @@ 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, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentTimeline({ items, isThinking, emptyState, className, collapsibleToolRuns, defaultToolRunsOpen, }: 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-UOLL2YHG.js";
+} from "./chunk-QUAU6ZNC.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-QIRVZMQY.js";
+import "./chunk-C3BIVG72.js";
 import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";

package/dist/{chunk-QIRVZMQY.js → chunk-C3BIVG72.js}

@@ -108,14 +108,68 @@ 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,
-  ChevronDown,
-  ChevronRight as ChevronRight2,
+  Loader2 as Loader22,
   Terminal,
   FileEdit,
   FileSearch,
@@ -123,10 +177,9 @@ import {
   PencilLine,
   Globe,
   ClipboardList,
-  Settings,
-  Sparkles
+  Settings
 } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_BRANDING = {
   label: "Agent",
   accentClass: "text-primary",
@@ -142,15 +195,15 @@ 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: [
-      /* @__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" }),
+  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" }),
         "Thinking"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: ASSISTANT_SHELL, children })
+    /* @__PURE__ */ jsx3("div", { className: ASSISTANT_SHELL, children })
   ] });
 }
 var CATEGORY_ICON_MAP = {
@@ -242,14 +295,14 @@ function CategoryBadges({ categories }) {
     [categories]
   );
   if (sorted.length === 0) return null;
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
+  return /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1", children: sorted.map((cat) => {
     const Icon = CATEGORY_ICON_MAP[cat] ?? Settings;
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "span",
       {
         title: cat,
         className: "flex h-5 w-5 items-center justify-center rounded border border-border text-muted-foreground",
-        children: /* @__PURE__ */ jsx2(Icon, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx3(Icon, { className: "h-3 w-3" })
       },
       cat
     );
@@ -310,10 +363,10 @@ 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: [
-        /* @__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" } })
+      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" } })
       ] }) }) });
     }
     const showTraceChrome = allParts.some(({ part }) => {
@@ -326,32 +379,32 @@ var RunGroup = memo2(
       return false;
     });
     if (!showTraceChrome) {
-      return /* @__PURE__ */ jsx2(AssistantShell, { branding, isStreaming, children: allParts.map(({ part, msgId, index }) => {
+      return /* @__PURE__ */ jsx3(AssistantShell, { branding, isStreaming, children: allParts.map(({ part, msgId, index }) => {
         const key = `${msgId}-${index}`;
         if (part.type === "tool" && isOpenUITool(part)) {
           const toolPart = part;
           const schema = extractOpenUISchema(toolPart.state.output);
           const summary = getOpenUISummary(toolPart.state.output);
           if (toolPart.state.status === "completed" && schema) {
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs3(
               "div",
               {
                 className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
                 children: [
-                  summary ? /* @__PURE__ */ jsx2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
-                  /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
+                  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 }) })
                 ]
               },
               key
             );
           }
           if (toolPart.state.status === "running") {
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs3(
               "div",
               {
                 className: "flex items-center gap-2 rounded-[18px] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-4 py-3 text-sm text-muted-foreground",
                 children: [
-                  /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+                  /* @__PURE__ */ jsx3(Loader22, { className: "h-4 w-4 animate-spin text-primary" }),
                   "Building view\u2026"
                 ]
               },
@@ -360,102 +413,85 @@ var RunGroup = memo2(
           }
         }
         if (part.type === "text" && !part.synthetic && part.text.trim()) {
-          return /* @__PURE__ */ jsx2("div", { className: "px-0.5", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]", children: part.text }) }, key);
+          return /* @__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 null;
       }) });
     }
-    return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 px-3 py-2.5", children: [
-        /* @__PURE__ */ jsx2(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
-          "button",
-          {
-            className: cn(
-              "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
-              "bg-transparent hover:bg-transparent"
-            ),
-            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("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("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx2(CategoryBadges, { categories: stats.toolCategories }),
-                isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]", children: [
-                  /* @__PURE__ */ jsx2(Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
-                  "Running"
-                ] }) : /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground", children: [
-                  /* @__PURE__ */ jsx2(Sparkles, { className: "h-2.5 w-2.5" }),
-                  "Done"
-                ] }),
-                !collapsed ? /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground" })
-              ] })
-            ] })
-          }
-        ) }),
-        headerActions ? /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
-      ] }),
-      collapsed && run.summaryText && /* @__PURE__ */ jsx2("div", { className: "px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2", children: run.summaryText }),
-      /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
-        const key = `${msgId}-${index}`;
-        const prev = allParts[partIndex - 1]?.part;
-        const connectedTool = part.type === "tool" && prev?.type === "tool" && !isOpenUITool(part) && !isOpenUITool(prev);
-        const gapClass = partIndex === 0 ? "" : connectedTool ? "mt-px" : "mt-3";
-        let node = null;
-        if (part.type === "tool") {
-          if (isOpenUITool(part)) {
-            const toolPart = part;
-            const schema = extractOpenUISchema(toolPart.state.output);
-            const summary = getOpenUISummary(toolPart.state.output);
-            if (toolPart.state.status === "completed" && schema) {
-              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
-                summary ? /* @__PURE__ */ jsxs2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
-                  /* @__PURE__ */ jsx2("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
-                ] }) : null,
-                /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
-              ] });
-            } else if (toolPart.state.status === "running") {
-              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
-                "Building view\u2026"
-              ] });
+    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__ */ jsx2(
-              InlineToolItem,
+            if (node === null) {
+              node = /* @__PURE__ */ jsx3(
+                InlineToolItem,
+                {
+                  part,
+                  renderToolDetail,
+                  groupPosition: getToolGroupPosition(partIndex, allParts),
+                  actions: renderToolActions?.(part, {
+                    run,
+                    messageId: msgId,
+                    partIndex: index
+                  })
+                }
+              );
+            }
+          } else if (part.type === "reasoning") {
+            node = /* @__PURE__ */ jsx3(
+              InlineThinkingItem,
               {
                 part,
-                renderToolDetail,
-                groupPosition: getToolGroupPosition(partIndex, allParts),
-                actions: renderToolActions?.(part, {
-                  run,
-                  messageId: msgId,
-                  partIndex: index
-                })
+                defaultOpen: isStreaming
               }
             );
+          } 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 }) });
           }
-        } else if (part.type === "reasoning") {
-          node = /* @__PURE__ */ jsx2(
-            InlineThinkingItem,
-            {
-              part,
-              defaultOpen: isStreaming
-            }
-          );
-        } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
-          node = /* @__PURE__ */ jsx2("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
-        }
-        if (!node) return null;
-        return /* @__PURE__ */ jsx2("div", { className: gapClass, children: node }, key);
-      }) }) })
-    ] }) });
+          if (!node) return null;
+          return /* @__PURE__ */ jsx3("div", { className: gapClass, children: node }, key);
+        })
+      }
+    );
   }
 );
 RunGroup.displayName = "RunGroup";
 
 export {
   InlineThinkingItem,
+  AssistantRunShell,
   RunGroup
 };

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

@@ -4,9 +4,10 @@ import {
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
 import {
+  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-C3BIVG72.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -98,6 +99,7 @@ var MessageList = memo2(
 MessageList.displayName = "MessageList";
 
 // src/chat/agent-timeline.tsx
+import { useState as useState2 } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -130,6 +132,48 @@ 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)]",
@@ -233,72 +277,76 @@ function AgentTimeline({
   items,
   isThinking,
   emptyState,
-  className
+  className,
+  collapsibleToolRuns = true,
+  defaultToolRunsOpen = true
 }) {
+  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 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 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);
     }
-    if (item.kind === "tool") {
+    const isLast = timelineNodes.indexOf(node) === timelineNodes.length - 1;
+    if (node.kind === "tool_run") {
+      const collapsed = collapsedRuns[node.id] ?? !defaultToolRunsOpen;
+      const total = countTools(node);
       return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
-        ToolCallStep,
+        AssistantRunShell,
         {
-          type: item.call.type,
-          label: item.call.label,
-          status: item.call.status,
-          detail: item.call.detail,
-          output: item.call.output,
-          duration: item.call.duration
+          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)
+          ) })
         }
-      ) }, item.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 === "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);
+    }
+    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 === "status") {
+    if (node.kind === "status") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(StatusCard, { item })
+          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(StatusCard, { item: node })
         },
-        item.id
+        node.id
       );
     }
-    if (item.kind === "artifact") {
+    if (node.kind === "artifact") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(ArtifactCard, { item: node })
         },
-        item.id
+        node.id
       );
     }
-    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
+    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: node.content }, node.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 { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
+export { AssistantRunShell, AssistantRunShellProps, 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';

package/dist/index.js

@@ -137,21 +137,22 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-UOLL2YHG.js";
+} from "./chunk-QUAU6ZNC.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-47XH56SV.js";
+import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
 } from "./chunk-IWQZXL6A.js";
 import {
+  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-C3BIVG72.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -338,6 +339,7 @@ function RedactedDocument({
 export {
   AgentTimeline,
   ArtifactPane,
+  AssistantRunShell,
   AuthHeader,
   Avatar,
   AvatarFallback,

package/dist/run.d.ts

@@ -28,6 +28,34 @@ interface RunGroupProps {
  */
 declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, headerActions, renderToolActions, }: RunGroupProps) => react_jsx_runtime.JSX.Element | null>;
 
+interface AssistantRunShellProps {
+    /** Header label, e.g. the agent name or "Tools". */
+    label: string;
+    /** Terse stat line beside the label, e.g. "3 tools, 2s thinking". */
+    summary?: string;
+    /** One-line preview shown next to the label AND below the header when collapsed. */
+    collapsedPreview?: string;
+    /** Small trailing glyphs before the status pill (e.g. category badges). */
+    badges?: ReactNode;
+    /** Drives the status pill and header spinner. */
+    isStreaming?: boolean;
+    collapsed: boolean;
+    onToggle: () => void;
+    /** Actions rendered outside the collapse trigger, right of the header. */
+    headerActions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The collapsible "assistant run" container shared by `RunGroup` (session-model
+ * driven) and `AgentTimeline` (declarative item list). Owns the header
+ * (label · summary · badges · status pill · chevron), the collapsed preview, and
+ * the Radix collapse — so both transcripts fold agent activity the same way and
+ * there is one implementation of a run, not two. It renders only chrome; callers
+ * pass the run body (tool rows, reasoning, text) as `children`.
+ */
+declare function AssistantRunShell({ label, summary, collapsedPreview, badges, isStreaming, collapsed, onToggle, headerActions, children, className, }: AssistantRunShellProps): react_jsx_runtime.JSX.Element;
+
 interface InlineToolItemProps {
     part: ToolPart;
     renderToolDetail?: CustomToolRenderer;
@@ -70,4 +98,4 @@ declare function LiveDuration({ startTime }: {
     startTime: number;
 }): react_jsx_runtime.JSX.Element;
 
-export { ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps };
+export { AssistantRunShell, type AssistantRunShellProps, ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps };

package/dist/run.js

@@ -1,12 +1,13 @@
-import "./chunk-47XH56SV.js";
+import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
 } from "./chunk-IWQZXL6A.js";
 import {
+  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-C3BIVG72.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -22,6 +23,7 @@ import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  AssistantRunShell,
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "8.0.0",
+  "version": "8.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.8.0"
+    "@tangle-network/brand": "^0.8.1"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/agent-timeline.tsx

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type ReactNode } from "react";
+import { type KeyboardEvent, type ReactNode, useState } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -12,6 +12,7 @@ import { Markdown } from "../markdown/markdown";
 import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step";
+import { AssistantRunShell } from "../run/assistant-run-shell";
 
 export type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
 
@@ -78,6 +79,71 @@ export 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;
+}
+
+/** A run of consecutive tool / tool-group items folded into one shell. */
+interface ToolRunGroup {
+  id: string;
+  kind: "tool_run";
+  items: (AgentTimelineToolItem | AgentTimelineToolGroupItem)[];
+}
+
+type TimelineNode = AgentTimelineItem | ToolRunGroup;
+
+function foldToolRuns(items: AgentTimelineItem[]): TimelineNode[] {
+  const nodes: TimelineNode[] = [];
+  let run: (AgentTimelineToolItem | AgentTimelineToolGroupItem)[] = [];
+
+  const flush = () => {
+    if (run.length === 0) return;
+    // A single tool stays a plain row; two or more fold into a collapsible run.
+    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: ToolRunGroup): number {
+  return group.items.reduce(
+    (n, item) => n + (item.kind === "tool_group" ? item.calls.length : 1),
+    0,
+  );
+}
+
+function ToolCallRow({ call }: { call: ToolCallData }) {
+  return (
+    <ToolCallStep
+      type={call.type}
+      label={call.label}
+      status={call.status}
+      detail={call.detail}
+      output={call.output}
+      duration={call.duration}
+    />
+  );
 }
 
 const TONE_STYLES: Record<AgentTimelineTone, { dot: string; card: string; text: string; icon: typeof Info }> = {
@@ -253,7 +319,17 @@ export function AgentTimeline({
   isThinking,
   emptyState,
   className,
+  collapsibleToolRuns = true,
+  defaultToolRunsOpen = true,
 }: AgentTimelineProps) {
+  // Collapse state for folded tool runs, keyed by run id. Absent → default.
+  const [collapsedRuns, setCollapsedRuns] = useState<Record<string, boolean>>({});
+  const toggleRun = (id: string) =>
+    setCollapsedRuns((prev) => ({
+      ...prev,
+      [id]: prev[id] === undefined ? defaultToolRunsOpen : !prev[id],
+    }));
+
   if (items.length === 0 && !isThinking) {
     return emptyState ? (
       <div className={cn("flex h-full items-center justify-center p-4", className)}>
@@ -266,92 +342,110 @@ export function AgentTimeline({
     ? [...items, { id: "__thinking__", kind: "custom", content: <ThinkingIndicator /> }]
     : items;
 
-  // Determine which items participate in the timeline connector (non-user-message items)
-  // User messages are rendered outside the timeline grid
-  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
+  const nodes: TimelineNode[] = collapsibleToolRuns
+    ? foldToolRuns(renderedItems)
+    : renderedItems;
+
+  // Non-user rows participate in the connector spine.
+  const timelineNodes = nodes.filter(
+    (node) => !(node.kind === "message" && node.role === "user"),
+  );
 
   return (
     <div className={cn("mx-auto w-full max-w-5xl px-4 py-4", className)}>
-      {renderedItems.map((item, index) => {
+      {nodes.map((node) => {
         // User messages: right-aligned bubble, no connector
-        if (item.kind === "message" && item.role === "user") {
-          return <UserMessage key={item.id} item={item} />;
+        if (node.kind === "message" && node.role === "user") {
+          return <UserMessage key={node.id} item={node} />;
         }
 
-        const timelineIndex = timelineItems.indexOf(item);
-        const isLast = timelineIndex === timelineItems.length - 1;
+        const isLast = timelineNodes.indexOf(node) === timelineNodes.length - 1;
+
+        if (node.kind === "tool_run") {
+          const collapsed = collapsedRuns[node.id] ?? !defaultToolRunsOpen;
+          const total = countTools(node);
+          return (
+            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+              <AssistantRunShell
+                label="Tools"
+                summary={`${total} ${total === 1 ? "tool" : "tools"}`}
+                collapsed={collapsed}
+                onToggle={() => toggleRun(node.id)}
+              >
+                <div className="space-y-px">
+                  {node.items.map((item) =>
+                    item.kind === "tool_group" ? (
+                      <ToolCallGroup key={item.id} title={item.title}>
+                        {item.calls.map((call) => (
+                          <ToolCallRow key={call.id} call={call} />
+                        ))}
+                      </ToolCallGroup>
+                    ) : (
+                      <ToolCallRow key={item.id} call={item.call} />
+                    ),
+                  )}
+                </div>
+              </AssistantRunShell>
+            </AgentTimelineRow>
+          );
+        }
 
-        if (item.kind === "message") {
+        if (node.kind === "message") {
           return (
-            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--brand-glow)]">
-              <AssistantMessage item={item} />
+            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--brand-glow)]">
+              <AssistantMessage item={node} />
             </AgentTimelineRow>
           );
         }
 
-        if (item.kind === "tool") {
+        if (node.kind === "tool") {
           return (
-            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
-              <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}
-              />
+            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+              <ToolCallRow call={node.call} />
             </AgentTimelineRow>
           );
         }
 
-        if (item.kind === "tool_group") {
+        if (node.kind === "tool_group") {
           return (
-            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
-              <ToolCallGroup title={item.title}>
-                {item.calls.map((call) => (
-                  <ToolCallStep
-                    key={call.id}
-                    type={call.type}
-                    label={call.label}
-                    status={call.status}
-                    detail={call.detail}
-                    output={call.output}
-                    duration={call.duration}
-                  />
+            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+              <ToolCallGroup title={node.title}>
+                {node.calls.map((call) => (
+                  <ToolCallRow key={call.id} call={call} />
                 ))}
               </ToolCallGroup>
             </AgentTimelineRow>
           );
         }
 
-        if (item.kind === "status") {
+        if (node.kind === "status") {
           return (
             <AgentTimelineRow
-              key={item.id}
+              key={node.id}
               isLast={isLast}
-              accentClassName={TONE_STYLES[item.tone ?? "default"].dot}
+              accentClassName={TONE_STYLES[node.tone ?? "default"].dot}
             >
-              <StatusCard item={item} />
+              <StatusCard item={node} />
             </AgentTimelineRow>
           );
         }
 
-        if (item.kind === "artifact") {
+        if (node.kind === "artifact") {
           return (
             <AgentTimelineRow
-              key={item.id}
+              key={node.id}
               isLast={isLast}
-              accentClassName={TONE_STYLES[item.tone ?? "default"].dot}
+              accentClassName={TONE_STYLES[node.tone ?? "default"].dot}
             >
-              <ArtifactCard item={item} />
+              <ArtifactCard item={node} />
             </AgentTimelineRow>
           );
         }
 
         // custom
         return (
-          <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
-            {(item as AgentTimelineCustomItem).content}
+          <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+            {(node as AgentTimelineCustomItem).content}
           </AgentTimelineRow>
         );
       })}

package/src/run/assistant-run-shell.tsx

@@ -0,0 +1,115 @@
+import { type ReactNode } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown, ChevronRight, Loader2, Sparkles } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface AssistantRunShellProps {
+  /** Header label, e.g. the agent name or "Tools". */
+  label: string;
+  /** Terse stat line beside the label, e.g. "3 tools, 2s thinking". */
+  summary?: string;
+  /** One-line preview shown next to the label AND below the header when collapsed. */
+  collapsedPreview?: string;
+  /** Small trailing glyphs before the status pill (e.g. category badges). */
+  badges?: ReactNode;
+  /** Drives the status pill and header spinner. */
+  isStreaming?: boolean;
+  collapsed: boolean;
+  onToggle: () => void;
+  /** Actions rendered outside the collapse trigger, right of the header. */
+  headerActions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The collapsible "assistant run" container shared by `RunGroup` (session-model
+ * driven) and `AgentTimeline` (declarative item list). Owns the header
+ * (label · summary · badges · status pill · chevron), the collapsed preview, and
+ * the Radix collapse — so both transcripts fold agent activity the same way and
+ * there is one implementation of a run, not two. It renders only chrome; callers
+ * pass the run body (tool rows, reasoning, text) as `children`.
+ */
+export function AssistantRunShell({
+  label,
+  summary,
+  collapsedPreview,
+  badges,
+  isStreaming,
+  collapsed,
+  onToggle,
+  headerActions,
+  children,
+  className,
+}: AssistantRunShellProps) {
+  return (
+    <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
+      <div
+        className={cn(
+          "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none",
+          className,
+        )}
+      >
+        <div className="flex items-start gap-3 px-3 py-2.5">
+          <Collapsible.Trigger asChild>
+            <button
+              type="button"
+              className="w-full rounded-[20px] bg-transparent px-0 py-0 text-left transition-colors hover:bg-transparent"
+            >
+              <div className="flex items-center gap-2">
+                <span className="font-semibold text-foreground text-sm">{label}</span>
+
+                {summary ? (
+                  <span className="text-[11px] text-muted-foreground">{summary}</span>
+                ) : null}
+                {collapsed && collapsedPreview ? (
+                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
+                    {collapsedPreview}
+                  </span>
+                ) : null}
+
+                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {badges}
+
+                  {isStreaming ? (
+                    <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)]">
+                      <Loader2 className="h-2.5 w-2.5 animate-spin" />
+                      Running
+                    </span>
+                  ) : (
+                    <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">
+                      <Sparkles className="h-2.5 w-2.5" />
+                      Done
+                    </span>
+                  )}
+
+                  {collapsed ? (
+                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+            </button>
+          </Collapsible.Trigger>
+
+          {headerActions ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
+              {headerActions}
+            </div>
+          ) : null}
+        </div>
+
+        {collapsed && collapsedPreview ? (
+          <div className="line-clamp-2 px-4 pb-4 text-sm leading-6 text-muted-foreground">
+            {collapsedPreview}
+          </div>
+        ) : null}
+
+        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+          <div className="border-t border-[var(--border-subtle)] px-4 pb-4 pt-3">{children}</div>
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  );
+}

package/src/run/index.ts

@@ -1,4 +1,5 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
+export { AssistantRunShell, type AssistantRunShellProps } from "./assistant-run-shell";
 export { InlineToolItem, type InlineToolItemProps } from "./inline-tool-item";
 export {
   InlineThinkingItem,

package/src/run/run-group.tsx

@@ -1,10 +1,7 @@
 import { memo, useMemo, type ComponentType, type ReactNode } from "react";
-import * as Collapsible from "@radix-ui/react-collapsible";
 import {
   Bot,
   Loader2,
-  ChevronDown,
-  ChevronRight,
   Terminal,
   FileEdit,
   FileSearch,
@@ -13,10 +10,8 @@ import {
   Globe,
   ClipboardList,
   Settings,
-  Sparkles,
   type LucideProps,
 } from "lucide-react";
-import { cn } from "../lib/utils";
 import { formatDuration } from "../utils/format";
 import type { Run, ToolCategory } from "../types/run";
 import type { SessionPart, ToolPart, ReasoningPart } from "../types/parts";
@@ -24,6 +19,7 @@ import type { AgentBranding } from "../types/branding";
 import type { CustomToolRenderer } from "../types/tool-display";
 import { InlineToolItem } from "./inline-tool-item";
 import { InlineThinkingItem } from "./inline-thinking-item";
+import { AssistantRunShell } from "./assistant-run-shell";
 import { Markdown } from "../markdown/markdown";
 import {
   OpenUIArtifactRenderer,
@@ -393,73 +389,16 @@ export const RunGroup = memo(
     }
 
     return (
-      <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
-        <div className="rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none">
-        {/* Header */}
-        <div className="flex items-start gap-3 px-3 py-2.5">
-          <Collapsible.Trigger asChild>
-            <button
-              className={cn(
-                "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
-                "bg-transparent hover:bg-transparent",
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <span className={cn("font-semibold text-sm", branding.textClass)}>
-                  {branding.label}
-                </span>
-
-                {renderSummary(run) ? (
-                  <span className="text-[11px] text-muted-foreground">{renderSummary(run)}</span>
-                ) : null}
-                {collapsed && run.summaryText ? (
-                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
-                    {run.summaryText}
-                  </span>
-                ) : null}
-
-                <div className="ml-auto flex shrink-0 items-center gap-1.5">
-                  <CategoryBadges categories={stats.toolCategories} />
-
-                  {isStreaming ? (
-                    <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)]">
-                      <Loader2 className="h-2.5 w-2.5 animate-spin" />
-                      Running
-                    </span>
-                  ) : (
-                    <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">
-                      <Sparkles className="h-2.5 w-2.5" />
-                      Done
-                    </span>
-                  )}
-
-                  {!collapsed ? (
-                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
-                  )}
-                </div>
-              </div>
-            </button>
-          </Collapsible.Trigger>
-
-          {headerActions ? (
-            <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
-              {headerActions}
-            </div>
-          ) : null}
-        </div>
-
-        {/* Summary text when collapsed */}
-        {collapsed && run.summaryText && (
-          <div className="px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2">
-            {run.summaryText}
-          </div>
-        )}
-
-        {/* Expanded content */}
-        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
+      <AssistantRunShell
+        label={branding.label}
+        summary={renderSummary(run) || undefined}
+        collapsedPreview={run.summaryText ?? undefined}
+        badges={<CategoryBadges categories={stats.toolCategories} />}
+        isStreaming={isStreaming}
+        collapsed={collapsed}
+        onToggle={onToggle}
+        headerActions={headerActions}
+      >
             {allParts.map(({ part, msgId, index }, partIndex) => {
               const key = `${msgId}-${index}`;
 
@@ -549,10 +488,7 @@ export const RunGroup = memo(
                 </div>
               );
             })}
-          </div>
-        </Collapsible.Content>
-        </div>
-      </Collapsible.Root>
+      </AssistantRunShell>
     );
   },
 );