@tangle-network/ui 8.1.0 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @tangle-network/ui
 
+## 9.1.0
+
+### Minor Changes
+
+- deb065a: AgentTimeline now accepts `renderToolActions` (and carries the source `ToolPart` on its tool items) so consumers can render actions beside a tool call — e.g. "open in artifacts". Previously these hooks reached only the run-grouped `MessageList`, not the timeline presentation. ChatContainer exposes this through a new `renderTimelineToolActions?(part)` prop; the existing `renderToolActions(part, options)` contract for the `runs` presentation is unchanged.
+
+  The timeline tool-call summary now shows a human-readable detail (file path / command via `getToolDisplayMetadata`) instead of the raw input JSON, and drops the redundant `title: description` label. The source `ToolPart` is threaded into `ToolCallStep`, so the expanded detail renders the full input + output via `ExpandedToolDetail` (previously the timeline's expanded view showed only the output).
+
+## 9.0.0
+
+### Major Changes
+
+- 87252cf: Flip the transcript convergence: RunGroup adopts AgentTimeline's look, not the reverse. 8.1 made AgentTimeline fold tool activity into RunGroup's single filled box (`AssistantRunShell`); that boxed all steps into one card and lost the timeline's separated, distinct rows. Reverted.
+
+  - **`RunGroup`** now renders as separated steps on a timeline spine (connector line + accent dots, one row per tool/reasoning/text part) with a quiet collapsible header (chevron · label · summary · status) — no wrapping `bg-card` box, and consecutive tools are no longer joined into one block. It reads like `AgentTimeline`, plus collapse.
+  - **`AgentTimeline`** is restored to its prior flat, separated rendering (no tool-run folding). The `collapsibleToolRuns` / `defaultToolRunsOpen` props added in 8.1 are removed.
+  - **`AssistantRunShell`** (added in 8.1) is removed — the boxed shell is gone.
+
+  BREAKING: `AssistantRunShell` / `AssistantRunShellProps` are no longer exported, and `AgentTimeline` drops the `collapsibleToolRuns` / `defaultToolRunsOpen` props.
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/chat.d.ts

@@ -32,18 +32,22 @@ interface ChatContainerProps {
     renderRunActions?: (run: Run) => ReactNode;
     /** Optional actions rendered below each user message bubble. */
     renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
-    /** Optional actions rendered beside individual tool items. */
+    /** Optional actions rendered beside individual tool items in the run-grouped
+     *  (`runs`) presentation. */
     renderToolActions?: (part: ToolPart, options: {
         run: Run;
         messageId: string;
         partIndex: number;
     }) => ReactNode;
+    /** Optional actions rendered beside individual tool items in the `timeline`
+     *  presentation, which has no run/message grouping (hence part-only). */
+    renderTimelineToolActions?: (part: ToolPart) => ReactNode;
 }
 /**
  * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, 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, renderTimelineToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 interface MessageListProps {
     groups: GroupedMessage[];
@@ -121,12 +125,17 @@ interface AgentTimelineToolItem {
     id: string;
     kind: "tool";
     call: ToolCallData;
+    /** Source tool part, so a consumer's `renderToolActions` gets the real
+     *  input/output (the flat `call` is display-only). */
+    part?: ToolPart;
 }
 interface AgentTimelineToolGroupItem {
     id: string;
     kind: "tool_group";
     title?: string;
     calls: ToolCallData[];
+    /** Source tool parts, parallel to `calls`. */
+    parts?: ToolPart[];
 }
 interface AgentTimelineStatusItem {
     id: string;
@@ -157,21 +166,15 @@ 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;
+    /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
+     *  Receives the source tool part carried on the item. */
+    renderToolActions?: (part: ToolPart) => ReactNode;
 }
 /**
  * AgentTimeline — unified mixed-content timeline for agent-backed sandbox
  * sessions. Renders messages, tool steps, status cards, and artifact handoffs in
  * a single execution narrative.
  */
-declare function AgentTimeline({ items, isThinking, emptyState, className, collapsibleToolRuns, defaultToolRunsOpen, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, }: 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,10 +5,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-QUAU6ZNC.js";
+} from "./chunk-4RDW4GFG.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-C3BIVG72.js";
-import "./chunk-RKQDBRTC.js";
+import "./chunk-CVXAXVYZ.js";
+import "./chunk-J6RQHBHR.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/{chunk-QUAU6ZNC.js → chunk-4RDW4GFG.js}

@@ -4,14 +4,13 @@ import {
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
 import {
-  AssistantRunShell,
   InlineThinkingItem,
   RunGroup
-} from "./chunk-C3BIVG72.js";
+} from "./chunk-CVXAXVYZ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-J6RQHBHR.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -99,7 +98,6 @@ var MessageList = memo2(
 MessageList.displayName = "MessageList";
 
 // src/chat/agent-timeline.tsx
-import { useState as useState2 } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -132,48 +130,6 @@ function ThinkingIndicator({ className }) {
 
 // src/chat/agent-timeline.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function foldToolRuns(items) {
-  const nodes = [];
-  let run = [];
-  const flush = () => {
-    if (run.length === 0) return;
-    if (run.length === 1) {
-      nodes.push(run[0]);
-    } else {
-      nodes.push({ id: `tool-run-${run[0].id}`, kind: "tool_run", items: run });
-    }
-    run = [];
-  };
-  for (const item of items) {
-    if (item.kind === "tool" || item.kind === "tool_group") {
-      run.push(item);
-    } else {
-      flush();
-      nodes.push(item);
-    }
-  }
-  flush();
-  return nodes;
-}
-function countTools(group) {
-  return group.items.reduce(
-    (n, item) => n + (item.kind === "tool_group" ? item.calls.length : 1),
-    0
-  );
-}
-function ToolCallRow({ call }) {
-  return /* @__PURE__ */ jsx4(
-    ToolCallStep,
-    {
-      type: call.type,
-      label: call.label,
-      status: call.status,
-      detail: call.detail,
-      output: call.output,
-      duration: call.duration
-    }
-  );
-}
 var TONE_STYLES = {
   default: {
     dot: "bg-[var(--border-hover)]",
@@ -278,75 +234,79 @@ function AgentTimeline({
   isThinking,
   emptyState,
   className,
-  collapsibleToolRuns = true,
-  defaultToolRunsOpen = true
+  renderToolActions
 }) {
-  const [collapsedRuns, setCollapsedRuns] = useState2({});
-  const toggleRun = (id) => setCollapsedRuns((prev) => ({
-    ...prev,
-    [id]: prev[id] === void 0 ? defaultToolRunsOpen : !prev[id]
-  }));
   if (items.length === 0 && !isThinking) {
     return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-4", className), children: emptyState }) : null;
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
-  const nodes = collapsibleToolRuns ? foldToolRuns(renderedItems) : renderedItems;
-  const timelineNodes = nodes.filter(
-    (node) => !(node.kind === "message" && node.role === "user")
-  );
-  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: nodes.map((node) => {
-    if (node.kind === "message" && node.role === "user") {
-      return /* @__PURE__ */ jsx4(UserMessage2, { item: node }, node.id);
+  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
+  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
+    if (item.kind === "message" && item.role === "user") {
+      return /* @__PURE__ */ jsx4(UserMessage2, { item }, item.id);
+    }
+    const timelineIndex = timelineItems.indexOf(item);
+    const isLast = timelineIndex === timelineItems.length - 1;
+    if (item.kind === "message") {
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
     }
-    const isLast = timelineNodes.indexOf(node) === timelineNodes.length - 1;
-    if (node.kind === "tool_run") {
-      const collapsed = collapsedRuns[node.id] ?? !defaultToolRunsOpen;
-      const total = countTools(node);
+    if (item.kind === "tool") {
       return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
-        AssistantRunShell,
+        ToolCallStep,
         {
-          label: "Tools",
-          summary: `${total} ${total === 1 ? "tool" : "tools"}`,
-          collapsed,
-          onToggle: () => toggleRun(node.id),
-          children: /* @__PURE__ */ jsx4("div", { className: "space-y-px", children: node.items.map(
-            (item) => item.kind === "tool_group" ? /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call) => /* @__PURE__ */ jsx4(ToolCallRow, { call }, call.id)) }, item.id) : /* @__PURE__ */ jsx4(ToolCallRow, { call: item.call }, item.id)
-          ) })
+          type: item.call.type,
+          label: item.call.label,
+          status: item.call.status,
+          detail: item.call.detail,
+          output: item.call.output,
+          duration: item.call.duration,
+          part: item.part,
+          actions: item.part ? renderToolActions?.(item.part) : void 0
         }
-      ) }, node.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 === "tool_group") {
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
+        const part = item.parts?.[callIndex];
+        return /* @__PURE__ */ jsx4(
+          ToolCallStep,
+          {
+            type: call.type,
+            label: call.label,
+            status: call.status,
+            detail: call.detail,
+            output: call.output,
+            duration: call.duration,
+            part,
+            actions: part ? renderToolActions?.(part) : void 0
+          },
+          call.id
+        );
+      }) }) }, item.id);
     }
-    if (node.kind === "status") {
+    if (item.kind === "status") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(StatusCard, { item: node })
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(StatusCard, { item })
         },
-        node.id
+        item.id
       );
     }
-    if (node.kind === "artifact") {
+    if (item.kind === "artifact") {
       return /* @__PURE__ */ jsx4(
         AgentTimelineRow,
         {
           isLast,
-          accentClassName: TONE_STYLES[node.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(ArtifactCard, { item: node })
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
         },
-        node.id
+        item.id
       );
     }
-    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: node.content }, node.id);
+    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
   }) });
 }
 
@@ -455,9 +415,11 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
     return {
       id: part.id,
       type: mapToolPartToTimelineType(part),
-      label: meta.description ? `${meta.title}: ${meta.description}` : meta.title,
+      label: meta.title,
       status: part.state.status === "completed" ? "success" : part.state.status === "error" ? "error" : "running",
-      detail: formatUnknown(part.state.input),
+      // A human-readable summary (file path / command), not the raw input JSON —
+      // the full input still renders in the expanded ExpandedToolDetail.
+      detail: meta.commandSnippet ?? meta.targetPath ?? meta.description,
       output: formatUnknown(part.state.output),
       duration: start && end ? end - start : void 0
     };
@@ -483,13 +445,15 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
         items.push({
           id: `${message.id}-tool-${toolBuffer[0].id}`,
           kind: "tool",
-          call: toToolCall(toolBuffer[0])
+          call: toToolCall(toolBuffer[0]),
+          part: toolBuffer[0]
         });
       } else {
         items.push({
           id: `${message.id}-tool-group-${index}`,
           kind: "tool_group",
           title: "Tool activity",
+          parts: [...toolBuffer],
           calls: toolBuffer.map((part) => toToolCall(part))
         });
       }
@@ -588,7 +552,8 @@ var ChatContainer = memo3(
     enableOpenUI = true,
     renderRunActions,
     renderUserMessageActions,
-    renderToolActions
+    renderToolActions,
+    renderTimelineToolActions
   }) => {
     const scrollRef = useRef(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -609,7 +574,14 @@ var ChatContainer = memo3(
         {
           ref: scrollRef,
           className: "flex-1 overflow-y-auto [scrollbar-gutter:stable]",
-          children: messages.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: "max-w-md text-center", children: /* @__PURE__ */ jsx5("div", { className: "text-sm font-medium text-muted-foreground", children: "Start a conversation." }) }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) }) : /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(
+          children: messages.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: "max-w-md text-center", children: /* @__PURE__ */ jsx5("div", { className: "text-sm font-medium text-muted-foreground", children: "Start a conversation." }) }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(
+            AgentTimeline,
+            {
+              items: timeline.items,
+              isThinking: timeline.showThinking,
+              renderToolActions: renderTimelineToolActions
+            }
+          ) }) : /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(
             MessageList,
             {
               groups,

package/dist/{chunk-DLSGUNRD.js → chunk-A5HKP3NA.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-IWQZXL6A.js";
+} from "./chunk-N5DJ4TUO.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";