@tangle-network/ui 8.1.0 → 9.1.0

package/src/chat/agent-timeline.test.tsx

@@ -0,0 +1,162 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import type { ToolPart } from "../types/parts"
+import { AgentTimeline, type AgentTimelineItem } from "./agent-timeline"
+
+const editPart: ToolPart = {
+  type: "tool",
+  id: "tool-1",
+  tool: "edit",
+  state: {
+    status: "completed",
+    input: { path: "src/batch-writer.ts" },
+    output: "Applied 1 edit",
+  },
+}
+
+const readPart: ToolPart = {
+  type: "tool",
+  id: "tool-2",
+  tool: "read",
+  state: {
+    status: "completed",
+    input: { path: "src/lib/jitter.ts" },
+    output: "export function jitter() {}",
+  },
+}
+
+function toolItem(part: ToolPart): AgentTimelineItem {
+  return {
+    id: "item-1",
+    kind: "tool",
+    call: {
+      id: part.id,
+      type: "edit",
+      label: "Edit src/batch-writer.ts",
+      status: "success",
+      detail: "src/batch-writer.ts",
+      output: "Applied 1 edit",
+    },
+    part,
+  }
+}
+
+describe("AgentTimeline tool actions", () => {
+  it("renders a tool call's label and clean detail", () => {
+    render(<AgentTimeline items={[toolItem(editPart)]} />)
+    expect(screen.getByText("Edit src/batch-writer.ts")).toBeInTheDocument()
+    expect(screen.getByText("src/batch-writer.ts")).toBeInTheDocument()
+  })
+
+  it("renders renderToolActions beside the tool item, called with the source part", () => {
+    const renderToolActions = vi.fn((part: ToolPart) => (
+      <button type="button">Open {part.id}</button>
+    ))
+
+    render(
+      <AgentTimeline
+        items={[toolItem(editPart)]}
+        renderToolActions={renderToolActions}
+      />,
+    )
+
+    expect(renderToolActions).toHaveBeenCalledWith(editPart)
+    expect(
+      screen.getByRole("button", { name: /open tool-1/i }),
+    ).toBeInTheDocument()
+  })
+
+  it("renders no action when the item carries no source part", () => {
+    const renderToolActions = vi.fn(() => <button type="button">Open</button>)
+    const item = { ...toolItem(editPart), part: undefined }
+
+    render(
+      <AgentTimeline items={[item]} renderToolActions={renderToolActions} />,
+    )
+
+    expect(renderToolActions).not.toHaveBeenCalled()
+    expect(screen.queryByRole("button", { name: /open/i })).not.toBeInTheDocument()
+  })
+
+  it("renders tool items unchanged when no renderToolActions is provided", () => {
+    render(<AgentTimeline items={[toolItem(editPart)]} />)
+    expect(screen.getByText("Edit src/batch-writer.ts")).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /open/i })).not.toBeInTheDocument()
+  })
+
+  it("renders renderToolActions for each call in a tool group, with its part", () => {
+    const renderToolActions = vi.fn((part: ToolPart) => (
+      <button type="button">Open {part.id}</button>
+    ))
+    const groupItem: AgentTimelineItem = {
+      id: "group-1",
+      kind: "tool_group",
+      title: "Tool activity",
+      calls: [
+        {
+          id: "tool-1",
+          type: "edit",
+          label: "Edit src/batch-writer.ts",
+          status: "success",
+          detail: "src/batch-writer.ts",
+        },
+        {
+          id: "tool-2",
+          type: "read",
+          label: "Read src/lib/jitter.ts",
+          status: "success",
+          detail: "src/lib/jitter.ts",
+        },
+      ],
+      parts: [editPart, readPart],
+    }
+
+    render(
+      <AgentTimeline items={[groupItem]} renderToolActions={renderToolActions} />,
+    )
+
+    expect(renderToolActions).toHaveBeenCalledWith(editPart)
+    expect(renderToolActions).toHaveBeenCalledWith(readPart)
+    expect(
+      screen.getByRole("button", { name: /open tool-1/i }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole("button", { name: /open tool-2/i }),
+    ).toBeInTheDocument()
+  })
+
+  it("renders the source part's real input in the expanded detail", async () => {
+    const user = userEvent.setup()
+    const probePart: ToolPart = {
+      type: "tool",
+      id: "tool-3",
+      tool: "custom_probe",
+      state: {
+        status: "completed",
+        input: { marker: "deep-input-value" },
+        output: "done",
+      },
+    }
+    const item: AgentTimelineItem = {
+      id: "item-3",
+      kind: "tool",
+      call: {
+        id: "tool-3",
+        type: "unknown",
+        label: "custom_probe",
+        status: "success",
+        detail: "probe",
+      },
+      part: probePart,
+    }
+
+    render(<AgentTimeline items={[item]} />)
+    await user.click(screen.getByRole("button", { name: /custom_probe/i }))
+
+    // ExpandedToolDetail (fed the real part) renders labelled Input/Output
+    // sections — the synthesized-part path showed only a bare output block.
+    expect(screen.getByText("Input")).toBeInTheDocument()
+    expect(screen.getByText("Output")).toBeInTheDocument()
+  })
+})

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,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";
+import type { ToolPart } from "../types/parts";
 
 export type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
 
@@ -31,6 +31,9 @@ export 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;
 }
 
 export interface AgentTimelineToolGroupItem {
@@ -38,6 +41,8 @@ export interface AgentTimelineToolGroupItem {
   kind: "tool_group";
   title?: string;
   calls: ToolCallData[];
+  /** Source tool parts, parallel to `calls`. */
+  parts?: ToolPart[];
 }
 
 export interface AgentTimelineStatusItem {
@@ -79,71 +84,9 @@ 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}
-    />
-  );
+  /** 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;
 }
 
 const TONE_STYLES: Record<AgentTimelineTone, { dot: string; card: string; text: string; icon: typeof Info }> = {
@@ -319,17 +262,8 @@ export function AgentTimeline({
   isThinking,
   emptyState,
   className,
-  collapsibleToolRuns = true,
-  defaultToolRunsOpen = true,
+  renderToolActions,
 }: 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 +276,99 @@ 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}
+                part={item.part}
+                actions={item.part ? renderToolActions?.(item.part) : undefined}
+              />
             </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, callIndex) => {
+                  const part = item.parts?.[callIndex];
+                  return (
+                    <ToolCallStep
+                      key={call.id}
+                      type={call.type}
+                      label={call.label}
+                      status={call.status}
+                      detail={call.detail}
+                      output={call.output}
+                      duration={call.duration}
+                      part={part}
+                      actions={part ? renderToolActions?.(part) : undefined}
+                    />
+                  );
+                })}
               </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/chat/chat-container.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react"
+import { beforeAll, describe, expect, it, vi } from "vitest"
+import type { SessionMessage } from "../types/message"
+import type { SessionPart, ToolPart } from "../types/parts"
+import { ChatContainer } from "./chat-container"
+
+// jsdom has no layout engine; the auto-scroll hook calls scrollIntoView.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn()
+})
+
+const messages: SessionMessage[] = [
+  { id: "m1", role: "assistant" },
+]
+
+const editPart: ToolPart = {
+  type: "tool",
+  id: "tool-1",
+  tool: "edit",
+  state: {
+    status: "completed",
+    input: { path: "src/batch-writer.ts" },
+    output: "Applied 1 edit to src/batch-writer.ts",
+  },
+}
+
+const partMap: Record<string, SessionPart[]> = { m1: [editPart] }
+
+describe("ChatContainer timeline tool rendering", () => {
+  it("shows a clean tool detail (the file path), not the raw input JSON", () => {
+    render(
+      <ChatContainer
+        messages={messages}
+        partMap={partMap}
+        isStreaming={false}
+        presentation="timeline"
+      />,
+    )
+
+    expect(screen.getByText("src/batch-writer.ts")).toBeInTheDocument()
+    // The raw `{ "path": ... }` input JSON must not leak into the summary row.
+    expect(screen.queryByText(/"path"/)).not.toBeInTheDocument()
+  })
+
+  it("threads renderTimelineToolActions to the timeline tool item with its source part", () => {
+    const renderTimelineToolActions = vi.fn((part: ToolPart) => (
+      <button type="button">Open {part.id}</button>
+    ))
+
+    render(
+      <ChatContainer
+        messages={messages}
+        partMap={partMap}
+        isStreaming={false}
+        presentation="timeline"
+        renderTimelineToolActions={renderTimelineToolActions}
+      />,
+    )
+
+    expect(renderTimelineToolActions).toHaveBeenCalled()
+    expect(renderTimelineToolActions.mock.calls[0][0]).toMatchObject({
+      id: "tool-1",
+    })
+    expect(
+      screen.getByRole("button", { name: /open tool-1/i }),
+    ).toBeInTheDocument()
+  })
+})

package/src/chat/chat-container.tsx

@@ -50,7 +50,8 @@ export 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: {
@@ -59,6 +60,9 @@ export interface ChatContainerProps {
       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;
 }
 
 const OPENUI_NODE_TYPES = new Set([
@@ -181,14 +185,16 @@ function buildTimelineItems(
     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 : undefined,
     } as const;
@@ -225,12 +231,14 @@ function buildTimelineItems(
           id: `${message.id}-tool-${toolBuffer[0].id}`,
           kind: "tool",
           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)),
         });
       }
@@ -364,6 +372,7 @@ export const ChatContainer = memo(
     renderRunActions,
     renderUserMessageActions,
     renderToolActions,
+    renderTimelineToolActions,
   }: ChatContainerProps) => {
     const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -401,7 +410,11 @@ export const ChatContainer = memo(
             </div>
           ) : presentation === "timeline" ? (
             <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end">
-              <AgentTimeline items={timeline.items} isThinking={timeline.showThinking} />
+              <AgentTimeline
+                items={timeline.items}
+                isThinking={timeline.showThinking}
+                renderToolActions={renderTimelineToolActions}
+              />
             </div>
           ) : (
             <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end">

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,