@tangle-network/ui 8.1.0 → 9.0.0

package/dist/index.js

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

package/dist/run.d.ts

@@ -28,34 +28,6 @@ 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;
@@ -98,4 +70,4 @@ declare function LiveDuration({ startTime }: {
     startTime: number;
 }): react_jsx_runtime.JSX.Element;
 
-export { AssistantRunShell, type AssistantRunShellProps, ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps };
+export { ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps };

package/dist/run.js

@@ -1,13 +1,12 @@
-import "./chunk-LQS34IGP.js";
+import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
 } from "./chunk-IWQZXL6A.js";
 import {
-  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-C3BIVG72.js";
+} from "./chunk-2TRMNB6L.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -23,7 +22,6 @@ 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.1.0",
+  "version": "9.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.tsx

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type ReactNode, useState } from "react";
+import { type KeyboardEvent, type ReactNode } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -12,7 +12,6 @@ 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";
 
@@ -79,71 +78,6 @@ 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 }> = {
@@ -319,17 +253,7 @@ 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)}>
@@ -342,110 +266,92 @@ export function AgentTimeline({
     ? [...items, { id: "__thinking__", kind: "custom", content: <ThinkingIndicator /> }]
     : items;
 
-  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"),
-  );
+  // 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"));
 
   return (
     <div className={cn("mx-auto w-full max-w-5xl px-4 py-4", className)}>
-      {nodes.map((node) => {
+      {renderedItems.map((item, index) => {
         // User messages: right-aligned bubble, no connector
-        if (node.kind === "message" && node.role === "user") {
-          return <UserMessage key={node.id} item={node} />;
+        if (item.kind === "message" && item.role === "user") {
+          return <UserMessage key={item.id} item={item} />;
         }
 
-        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>
-          );
-        }
+        const timelineIndex = timelineItems.indexOf(item);
+        const isLast = timelineIndex === timelineItems.length - 1;
 
-        if (node.kind === "message") {
+        if (item.kind === "message") {
           return (
-            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--brand-glow)]">
-              <AssistantMessage item={node} />
+            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--brand-glow)]">
+              <AssistantMessage item={item} />
             </AgentTimelineRow>
           );
         }
 
-        if (node.kind === "tool") {
+        if (item.kind === "tool") {
           return (
-            <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
-              <ToolCallRow call={node.call} />
+            <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>
           );
         }
 
-        if (node.kind === "tool_group") {
+        if (item.kind === "tool_group") {
           return (
-            <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} />
+            <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}
+                  />
                 ))}
               </ToolCallGroup>
             </AgentTimelineRow>
           );
         }
 
-        if (node.kind === "status") {
+        if (item.kind === "status") {
           return (
             <AgentTimelineRow
-              key={node.id}
+              key={item.id}
               isLast={isLast}
-              accentClassName={TONE_STYLES[node.tone ?? "default"].dot}
+              accentClassName={TONE_STYLES[item.tone ?? "default"].dot}
             >
-              <StatusCard item={node} />
+              <StatusCard item={item} />
             </AgentTimelineRow>
           );
         }
 
-        if (node.kind === "artifact") {
+        if (item.kind === "artifact") {
           return (
             <AgentTimelineRow
-              key={node.id}
+              key={item.id}
               isLast={isLast}
-              accentClassName={TONE_STYLES[node.tone ?? "default"].dot}
+              accentClassName={TONE_STYLES[item.tone ?? "default"].dot}
             >
-              <ArtifactCard item={node} />
+              <ArtifactCard item={item} />
             </AgentTimelineRow>
           );
         }
 
         // custom
         return (
-          <AgentTimelineRow key={node.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
-            {(node as AgentTimelineCustomItem).content}
+          <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+            {(item as AgentTimelineCustomItem).content}
           </AgentTimelineRow>
         );
       })}

package/src/run/index.ts

@@ -1,5 +1,4 @@
 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,