@tangle-network/ui 7.0.0 → 8.1.0

package/dist/hooks.d.ts

@@ -5,7 +5,7 @@ import './message-BHWbxBtT.js';
 import './parts-dj7AcUg0.js';
 import './active-sessions-store-CeOmXgv5.js';
 import 'nanostores';
-import './tool-call-feed-Bs3MyQMT.js';
+import './tool-call-feed-D9iofJgW.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/index.d.ts

@@ -2,9 +2,9 @@ export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQ
 export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
-export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.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 ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.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 { 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';
 export { Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -133,12 +133,11 @@ import {
 import {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-5CS3I7Y3.js";
+} from "./chunk-QUAU6ZNC.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -150,15 +149,14 @@ import {
   parseToolEvent
 } from "./chunk-IWQZXL6A.js";
 import {
+  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-C3BIVG72.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
-  ToolCallGroup,
-  ToolCallStep
+  LiveDuration
 } from "./chunk-RKQDBRTC.js";
 import {
   TOOL_CATEGORY_ICONS,
@@ -341,6 +339,7 @@ function RedactedDocument({
 export {
   AgentTimeline,
   ArtifactPane,
+  AssistantRunShell,
   AuthHeader,
   Avatar,
   AvatarFallback,
@@ -354,7 +353,6 @@ export {
   CardHeader,
   CardTitle,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   CodeBlock,
   CommandPreview,
@@ -453,8 +451,6 @@ export {
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   UploadProgress,
   UserMenu,
   UserMessage,

package/dist/run.d.ts

@@ -5,7 +5,7 @@ import { R as Run } from './run-PfLmDAox.js';
 import { S as SessionPart, a as ToolPart, R as ReasoningPart } from './parts-dj7AcUg0.js';
 import { AgentBranding } from './types.js';
 import { C as CustomToolRenderer } from './tool-display-z4JcDmMQ.js';
-export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.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';
 import './message-BHWbxBtT.js';
 
 interface RunGroupProps {
@@ -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

@@ -4,15 +4,14 @@ import {
   parseToolEvent
 } from "./chunk-IWQZXL6A.js";
 import {
+  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-C3BIVG72.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
-  ToolCallGroup,
-  ToolCallStep
+  LiveDuration
 } from "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
@@ -24,13 +23,12 @@ import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  AssistantRunShell,
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup,
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   parseToolEvent
 };

package/dist/sdk-hooks.d.ts

@@ -4,7 +4,7 @@ import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
 import { S as SessionMessage } from './message-BHWbxBtT.js';
 import { S as SessionPart } from './parts-dj7AcUg0.js';
 import { R as RegisterActiveSessionOptions, g as ActiveSessionTransportMode, c as ActiveSessionConnectionState } from './active-sessions-store-CeOmXgv5.js';
-import { F as FeedSegment } from './tool-call-feed-Bs3MyQMT.js';
+import { F as FeedSegment } from './tool-call-feed-D9iofJgW.js';
 import 'nanostores';
 import 'react/jsx-runtime';
 

package/dist/{tool-call-feed-Bs3MyQMT.d.ts → tool-call-feed-D9iofJgW.d.ts}

@@ -1,29 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
 
 type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
 type ToolCallStatus = "running" | "success" | "error";
-interface ToolCallStepProps {
-    type: ToolCallType;
-    label: string;
-    status: ToolCallStatus;
-    detail?: string;
-    output?: string;
-    /** Override syntax highlighting language; inferred from detail path if omitted */
-    language?: string;
-    duration?: number;
-    className?: string;
-}
-declare function ToolCallStep({ type, label, status, detail, output, language, duration, className, }: ToolCallStepProps): react_jsx_runtime.JSX.Element;
-/**
- * ToolCallGroup — groups multiple tool calls under a heading.
- */
-interface ToolCallGroupProps {
-    title?: string;
-    children: ReactNode;
-    className?: string;
-}
-declare function ToolCallGroup({ title, children, className }: ToolCallGroupProps): react_jsx_runtime.JSX.Element;
 
 interface ToolCallData {
     id: string;
@@ -65,4 +43,4 @@ declare function parseToolEvent(event: {
     data: Record<string, unknown>;
 }): ToolCallData | null;
 
-export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, ToolCallGroup as c, type ToolCallGroupProps as d, type ToolCallStatus as e, ToolCallStep as f, type ToolCallStepProps as g, type ToolCallType as h, parseToolEvent as p };
+export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, type ToolCallStatus as c, type ToolCallType as d, parseToolEvent as p };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "7.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/chat/chat-container.tsx

@@ -1,7 +1,6 @@
 import {
   memo,
   type ReactNode,
-  useCallback,
   useMemo,
   useRef,
 } from "react";
@@ -20,7 +19,6 @@ import {
   AgentTimeline,
   type AgentTimelineItem,
 } from "./agent-timeline";
-import { ChatInput, type PendingFile } from "./chat-input";
 import { InlineThinkingItem } from "../run/inline-thinking-item";
 import { getToolDisplayMetadata } from "../utils/tool-display";
 import {
@@ -29,27 +27,21 @@ import {
   type OpenUIComponentNode,
 } from "../openui/openui-artifact-renderer";
 
+/**
+ * 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.
+ */
 export 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. */
@@ -355,7 +347,7 @@ function buildTimelineItems(
 }
 
 /**
- * Full chat container: message list + auto-scroll + input area.
+ * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
 export const ChatContainer = memo(
@@ -363,20 +355,10 @@ export const ChatContainer = memo(
     messages,
     partMap,
     isStreaming,
-    onSend,
-    onCancel,
     branding,
-    placeholder = "Type a message...",
     className,
-    hideInput = false,
     renderToolDetail,
     presentation = "runs",
-    modelLabel,
-    onModelClick,
-    pendingFiles,
-    onRemoveFile,
-    onAttach,
-    disabled = false,
     onOpenUIAction,
     enableOpenUI = true,
     renderRunActions,
@@ -404,13 +386,6 @@ export const ChatContainer = memo(
       [messages, partMap, isStreaming, onOpenUIAction, enableOpenUI],
     );
 
-    const handleSend = useCallback(
-      (text: string) => {
-        onSend?.(text);
-      },
-      [onSend],
-    );
-
     return (
       <div className={cn("flex h-full flex-col", className)}>
         {/* Message area */}
@@ -462,23 +437,6 @@ export const ChatContainer = memo(
             </button>
           </div>
         )}
-
-        {/* Input area */}
-        {!hideInput && onSend && (
-          <ChatInput
-            onSend={handleSend}
-            onCancel={onCancel}
-            isStreaming={isStreaming}
-            placeholder={placeholder}
-            modelLabel={modelLabel}
-            onModelClick={onModelClick}
-            pendingFiles={pendingFiles}
-            onRemoveFile={onRemoveFile}
-            onAttach={onAttach}
-            disabled={disabled}
-            className="shrink-0 border-t border-border bg-background"
-          />
-        )}
       </div>
     );
   },

package/src/chat/chat-message.tsx

@@ -27,10 +27,6 @@ export 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;
 }
 
 export function ChatMessage({

package/src/chat/index.ts

@@ -2,7 +2,6 @@ export { ChatContainer, type ChatContainerProps } from "./chat-container";
 export { MessageList, type MessageListProps } from "./message-list";
 export { UserMessage, type UserMessageProps } from "./user-message";
 export { ChatMessage, type ChatMessageProps, type MessageRole } from "./chat-message";
-export { ChatInput, type ChatInputProps, type PendingFile } from "./chat-input";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,

package/src/markdown/markdown.stories.tsx

@@ -39,7 +39,7 @@ pnpm add @tangle/sandbox-ui
 Import the components you need:
 
 \`\`\`tsx
-import { ChatInput, DropZone, UploadProgress } from '@tangle/sandbox-ui'
+import { AgentComposer, DropZone, UploadProgress } from '@tangle-network/sandbox-ui'
 \`\`\`
 
 > **Note:** Components assume a Tailwind CSS v4 setup with the design tokens