@tangle-network/ui 7.0.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 831e935: One composer, no zombie API. `ChatInput` is deleted — the canonical composer is `AgentComposer` in `@tangle-network/sandbox-ui`, composed below the transcript by the app. `ChatContainer` is now transcript-only: the input props (`onSend`, `onCancel`, `placeholder`, `hideInput`, `modelLabel`, `onModelClick`, `pendingFiles`, `onRemoveFile`, `onAttach`, `disabled`) and the `PendingFile` type are removed. `ChatMessage` drops the no-op `avatar`/`hideAvatar` props. `ToolCallStep`/`ToolCallGroup` are no longer exported (internal adapters over `InlineToolItem`); the `ToolCallType`/`ToolCallStatus` types stay public via `ToolCallData`, and `ToolCallFeed` is unchanged.
+
 ## 7.0.0
 
 ### Minor Changes

package/dist/chat.d.ts

@@ -7,83 +7,23 @@ import { AgentBranding } from './types.js';
 import { C as CustomToolRenderer } from './tool-display-z4JcDmMQ.js';
 import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
 import { OpenUIAction } from './openui.js';
-import { T as ToolCallData } from './tool-call-feed-Bs3MyQMT.js';
+import { T as ToolCallData } from './tool-call-feed-D9iofJgW.js';
 
 /**
- * ChatInput — message input bar with file attach, drag-and-drop, send/cancel.
- *
- * - Auto-resizing textarea (up to max height)
- * - Enter to send, Shift+Enter for newline
- * - Drag-and-drop files onto the input with styled overlay
- * - File attachment button (files) + folder attachment button
- * - Pending file/folder chips
- * - Cancel button when streaming
- * - Optional model selector pill
+ * Transcript-only container: message list + auto-scroll. Composers are
+ * composed BELOW this by the app (the canonical one is `AgentComposer` in
+ * `@tangle-network/sandbox-ui`) — this component never renders an input.
  */
-interface PendingFile {
-    id: string;
-    name: string;
-    size: number;
-    type: "file" | "folder";
-    /** Number of files inside (for folders) */
-    fileCount?: number;
-    status: "pending" | "uploading" | "ready" | "error";
-}
-interface ChatInputProps {
-    onSend: (message: string, files?: File[]) => void;
-    onCancel?: () => void;
-    isStreaming?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    /** Currently selected model label */
-    modelLabel?: string;
-    onModelClick?: () => void;
-    /** Pending uploaded files */
-    pendingFiles?: PendingFile[];
-    onRemoveFile?: (id: string) => void;
-    /** Called when files are attached (via button or drag-and-drop) */
-    onAttach?: (files: FileList) => void;
-    /** Called when a folder is selected via the folder button */
-    onAttachFolder?: (files: FileList) => void;
-    /** Accepted file types for the file input (e.g. ".pdf,.csv") */
-    accept?: string;
-    /** Drop zone overlay title */
-    dropTitle?: string;
-    /** Drop zone overlay description */
-    dropDescription?: string;
-    className?: string;
-    /** Label above the input. Set to null to hide. Default: "Agent Command Deck" */
-    inputLabel?: string | null;
-    /** Status text shown when idle. Set to null to hide. Default: "Ready for next instruction" */
-    idleStatus?: string | null;
-    /** Status text shown when streaming. Set to null to hide. Default: "Streaming response" */
-    streamingStatus?: string | null;
-    /** Hide the Cmd+L focus shortcut hint */
-    hideShortcutHint?: boolean;
-}
-declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, inputLabel, idleStatus, streamingStatus, hideShortcutHint, }: ChatInputProps): react_jsx_runtime.JSX.Element;
-
 interface ChatContainerProps {
     messages: SessionMessage[];
     partMap: Record<string, SessionPart[]>;
     isStreaming: boolean;
-    onSend?: (text: string) => void;
-    onCancel?: () => void;
     branding?: AgentBranding;
-    placeholder?: string;
     className?: string;
-    /** Hide the input area (useful for read-only views). */
-    hideInput?: boolean;
     /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
     renderToolDetail?: CustomToolRenderer;
     /** Presentation mode for the session view. */
     presentation?: "runs" | "timeline";
-    modelLabel?: string;
-    onModelClick?: () => void;
-    pendingFiles?: PendingFile[];
-    onRemoveFile?: (id: string) => void;
-    onAttach?: (files: FileList) => void;
-    disabled?: boolean;
     /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
     onOpenUIAction?: (action: OpenUIAction) => void;
     /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
@@ -100,10 +40,10 @@ interface ChatContainerProps {
     }) => ReactNode;
 }
 /**
- * Full chat container: message list + auto-scroll + input area.
+ * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 interface MessageListProps {
     groups: GroupedMessage[];
@@ -158,10 +98,6 @@ interface ChatMessageProps {
     assistantLabel?: string;
     /** Hide the role label row entirely */
     hideRoleLabel?: boolean;
-    /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
-    hideAvatar?: boolean;
-    /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
-    avatar?: ReactNode;
 }
 declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
@@ -221,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, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, type PendingFile, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };
+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

@@ -1,14 +1,13 @@
 import {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-5CS3I7Y3.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";
@@ -22,7 +21,6 @@ import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,

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
 };