@tangle-network/ui 9.0.0 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 9.1.1
+
+### Patch Changes
+
+- a8d770e: Give run/timeline tool rows a proper elevation ladder. Rows read as the same value as the canvas: `InlineToolItem` used `bg-card/40` (near-transparent) and RunGroup's OpenUI/running blocks used `bg-[var(--bg-root)]` (literally the page background). Both now use `--md3-surface-container` — one clear step above the `--bg-root` canvas — with hover/open stepping to `--md3-surface-container-high`. Rows now separate from the background instead of blending into it.
+
+## 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

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,12 +166,15 @@ interface AgentTimelineProps {
     isThinking?: boolean;
     emptyState?: ReactNode;
     className?: string;
+    /** 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, }: 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-LHOGIUGY.js";
+} from "./chunk-YUY6D62P.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-2TRMNB6L.js";
-import "./chunk-RKQDBRTC.js";
+import "./chunk-KWRLQ3MR.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

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

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

package/dist/{chunk-2TRMNB6L.js → chunk-KWRLQ3MR.js}

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   formatDuration,
   truncateText
@@ -347,7 +347,7 @@ var RunGroup = memo2(
             return /* @__PURE__ */ jsxs2(
               "div",
               {
-                className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
+                className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
                 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 }) })
@@ -360,7 +360,7 @@ var RunGroup = memo2(
             return /* @__PURE__ */ jsxs2(
               "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",
+                className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] 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"
@@ -423,12 +423,12 @@ var RunGroup = memo2(
             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-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", 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 }) })
               ] });
             } else if (toolPart.state.status === "running") {
-              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
+              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] 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"
               ] });

package/dist/{chunk-IWQZXL6A.js → chunk-V6BF4AZ7.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   Markdown
 } from "./chunk-FJBTCTZM.js";

package/dist/{chunk-RKQDBRTC.js → chunk-WVW4KHEH.js}

@@ -227,8 +227,8 @@ var InlineToolItem = memo2(
           {
             className: cn(
               "w-full border text-left transition-colors",
-              "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
-              open && "border-border bg-accent/20",
+              "border-[var(--border-subtle)] bg-[var(--md3-surface-container)] hover:border-border hover:bg-[var(--md3-surface-container-high)]",
+              open && "border-border bg-[var(--md3-surface-container-high)]",
               shapeClass,
               className
             ),
@@ -318,9 +318,11 @@ function ToolCallStep({
   output,
   language,
   duration,
-  className
+  className,
+  actions,
+  part
 }) {
-  const part = {
+  const resolvedPart = part ?? {
     type: "tool",
     id: `${type}:${label}`,
     tool: type,
@@ -335,11 +337,12 @@ function ToolCallStep({
   return /* @__PURE__ */ jsx4(
     InlineToolItem,
     {
-      part,
+      part: resolvedPart,
       title: label,
       description: detail,
       className,
-      renderToolDetail: output ? () => /* @__PURE__ */ jsx4(
+      actions,
+      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx4(
         CodeBlock,
         {
           code: output,

package/dist/{chunk-LHOGIUGY.js → chunk-YUY6D62P.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-2TRMNB6L.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -233,7 +233,8 @@ function AgentTimeline({
   items,
   isThinking,
   emptyState,
-  className
+  className,
+  renderToolActions
 }) {
   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;
@@ -258,23 +259,30 @@ function AgentTimeline({
           status: item.call.status,
           detail: item.call.detail,
           output: item.call.output,
-          duration: item.call.duration
+          duration: item.call.duration,
+          part: item.part,
+          actions: item.part ? renderToolActions?.(item.part) : void 0
         }
       ) }, item.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) => /* @__PURE__ */ jsx4(
-        ToolCallStep,
-        {
-          type: call.type,
-          label: call.label,
-          status: call.status,
-          detail: call.detail,
-          output: call.output,
-          duration: call.duration
-        },
-        call.id
-      )) }) }, item.id);
+      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 (item.kind === "status") {
       return /* @__PURE__ */ jsx4(
@@ -407,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
     };
@@ -435,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))
         });
       }
@@ -540,7 +552,8 @@ var ChatContainer = memo3(
     enableOpenUI = true,
     renderRunActions,
     renderUserMessageActions,
-    renderToolActions
+    renderToolActions,
+    renderTimelineToolActions
   }) => {
     const scrollRef = useRef(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -561,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/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-DLSGUNRD.js";
+} from "./chunk-IVQYFG5D.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-IWQZXL6A.js";
-import "./chunk-RKQDBRTC.js";
+import "./chunk-V6BF4AZ7.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-DLSGUNRD.js";
+} from "./chunk-IVQYFG5D.js";
 import {
   addMessage,
   addParts,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-LHOGIUGY.js";
+} from "./chunk-YUY6D62P.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,16 +147,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-IWQZXL6A.js";
+} from "./chunk-V6BF4AZ7.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-2TRMNB6L.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/run.js

@@ -2,16 +2,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-IWQZXL6A.js";
+} from "./chunk-V6BF4AZ7.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-2TRMNB6L.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-RKQDBRTC.js";
+} from "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-DLSGUNRD.js";
+} from "./chunk-IVQYFG5D.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-IWQZXL6A.js";
-import "./chunk-RKQDBRTC.js";
+import "./chunk-V6BF4AZ7.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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

@@ -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 type { ToolPart } from "../types/parts";
 
 export type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
 
@@ -30,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 {
@@ -37,6 +41,8 @@ export interface AgentTimelineToolGroupItem {
   kind: "tool_group";
   title?: string;
   calls: ToolCallData[];
+  /** Source tool parts, parallel to `calls`. */
+  parts?: ToolPart[];
 }
 
 export interface AgentTimelineStatusItem {
@@ -78,6 +84,9 @@ export interface AgentTimelineProps {
   isThinking?: boolean;
   emptyState?: ReactNode;
   className?: string;
+  /** 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 }> = {
@@ -253,6 +262,7 @@ export function AgentTimeline({
   isThinking,
   emptyState,
   className,
+  renderToolActions,
 }: AgentTimelineProps) {
   if (items.length === 0 && !isThinking) {
     return emptyState ? (
@@ -299,6 +309,8 @@ export function AgentTimeline({
                 detail={item.call.detail}
                 output={item.call.output}
                 duration={item.call.duration}
+                part={item.part}
+                actions={item.part ? renderToolActions?.(item.part) : undefined}
               />
             </AgentTimelineRow>
           );
@@ -308,17 +320,22 @@ export function AgentTimeline({
           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}
-                  />
-                ))}
+                {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>
           );

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/inline-tool-item.tsx

@@ -109,8 +109,8 @@ export const InlineToolItem = memo(
             <button
               className={cn(
                 "w-full border text-left transition-colors",
-                "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
-                open && "border-border bg-accent/20",
+                "border-[var(--border-subtle)] bg-[var(--md3-surface-container)] hover:border-border hover:bg-[var(--md3-surface-container-high)]",
+                open && "border-border bg-[var(--md3-surface-container-high)]",
                 shapeClass,
                 className,
               )}

package/src/run/run-group.tsx

@@ -366,7 +366,7 @@ export const RunGroup = memo(
                   return (
                     <div
                       key={key}
-                      className="overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]"
+                      className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]"
                     >
                       {summary ? (
                         <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
@@ -384,7 +384,7 @@ export const RunGroup = memo(
                   return (
                     <div
                       key={key}
-                      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"
+                      className="flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground"
                     >
                       <Loader2 className="h-4 w-4 animate-spin text-primary" />
                       Building view…
@@ -493,7 +493,7 @@ export const RunGroup = memo(
 
                     if (toolPart.state.status === "completed" && schema) {
                       node = (
-                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]">
+                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]">
                           {summary ? (
                             <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
                               {summary}
@@ -506,7 +506,7 @@ export const RunGroup = memo(
                       );
                     } else if (toolPart.state.status === "running") {
                       node = (
-                        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground">
                           <Loader2 className="h-4 w-4 animate-spin text-primary" />
                           Building view…
                         </div>

package/src/run/tool-call-step.tsx

@@ -36,6 +36,11 @@ export interface ToolCallStepProps {
   language?: string;
   duration?: number;
   className?: string;
+  /** Actions rendered beside the row (e.g. "open in artifacts"). */
+  actions?: ReactNode;
+  /** Source tool part. When provided, the expanded detail renders from the real
+   *  input/output (via ExpandedToolDetail) rather than the flat summary props. */
+  part?: ToolPart;
 }
 
 const EXT_LANGUAGE: Record<string, string> = {
@@ -77,8 +82,12 @@ export function ToolCallStep({
   language,
   duration,
   className,
+  actions,
+  part,
 }: ToolCallStepProps) {
-  const part: ToolPart = {
+  // Fall back to a synthesized part for callers that only have flat props
+  // (e.g. ToolCallFeed); the real part, when supplied, drives the expanded view.
+  const resolvedPart: ToolPart = part ?? {
     type: "tool",
     id: `${type}:${label}`,
     tool: type,
@@ -94,20 +103,26 @@ export function ToolCallStep({
 
   return (
     <InlineToolItem
-      part={part}
+      part={resolvedPart}
       title={label}
       description={detail}
       className={className}
+      actions={actions}
+      // With a real part, InlineToolItem's default ExpandedToolDetail renders
+      // the full input + output. The synthesized-part path keeps the output-only
+      // fallback (it has no real input to show).
       renderToolDetail={
-        output
-          ? () => (
-              <CodeBlock
-                code={output}
-                language={lang}
-                className="max-h-72 overflow-auto text-xs"
-              />
-            )
-          : () => null
+        part
+          ? undefined
+          : output
+            ? () => (
+                <CodeBlock
+                  code={output}
+                  language={lang}
+                  className="max-h-72 overflow-auto text-xs"
+                />
+              )
+            : () => null
       }
     />
   );