@tangle-network/ui 11.6.0 → 11.8.0

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

@@ -3,6 +3,9 @@ import { useState } from 'react'
 import { Code, FileText } from 'lucide-react'
 import { AgentTimeline } from './agent-timeline'
 import type { AgentTimelineItem } from './agent-timeline'
+import { ChatContainer } from './chat-container'
+import type { SessionMessage } from '../types/message'
+import type { SessionPart } from '../types/parts'
 
 const meta: Meta<typeof AgentTimeline> = {
   title: 'Chat/AgentTimeline',
@@ -52,8 +55,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-1',
       type: 'glob',
-      label: 'Find **/*.ts in src/',
+      label: 'Find',
       status: 'success',
+      detail: 'src/**/*.ts',
       output:
         'src/index.ts\nsrc/types.ts\nsrc/utils/format.ts\nsrc/utils/parse.ts',
       duration: 18,
@@ -65,8 +69,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-2',
       type: 'read',
-      label: 'Read src/types.ts',
+      label: 'Read',
       status: 'success',
+      detail: 'src/types.ts',
       output:
         '// Existing types\nexport type Maybe<T> = T | null | undefined\nexport type Nullable<T> = T | null',
       duration: 31,
@@ -86,8 +91,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-3',
       type: 'write',
-      label: 'Write src/types.ts',
+      label: 'Write',
       status: 'success',
+      detail: 'src/types.ts',
       output: 'File written — 47 lines added.',
       duration: 22,
     },
@@ -98,7 +104,7 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-4',
       type: 'bash',
-      label: 'npx tsc --noEmit',
+      label: 'Shell',
       status: 'success',
       detail: 'npx tsc --noEmit --strict',
       output: '✓ No type errors',
@@ -201,8 +207,9 @@ export const WhileThinking: Story = {
         call: {
           id: 'tc-1',
           type: 'glob',
-          label: 'Find **/*.ts in src/',
+          label: 'Find',
           status: 'success',
+          detail: 'src/**/*.ts',
           duration: 14,
         },
       },
@@ -234,24 +241,27 @@ export const WithToolGroup: Story = {
           {
             id: 'tc-1',
             type: 'read',
-            label: 'Read src/routes/users.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/users.ts',
             output: "router.get('/', authMiddleware, listUsers)\nrouter.post('/', authMiddleware, createUser)",
             duration: 24,
           },
           {
             id: 'tc-2',
             type: 'read',
-            label: 'Read src/routes/sessions.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/sessions.ts',
             output: "router.get('/', listSessions) // missing auth!\nrouter.delete('/:id', authMiddleware, deleteSession)",
             duration: 19,
           },
           {
             id: 'tc-3',
             type: 'read',
-            label: 'Read src/routes/health.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/health.ts',
             output: "router.get('/', healthCheck) // intentionally public",
             duration: 11,
           },
@@ -305,7 +315,7 @@ export const WithError: Story = {
         call: {
           id: 'tc-1',
           type: 'bash',
-          label: 'pnpm test',
+          label: 'Shell',
           status: 'error',
           detail: 'pnpm test --run',
           output:
@@ -351,8 +361,9 @@ export const WithArtifact: Story = {
         call: {
           id: 'tc-1',
           type: 'write',
-          label: 'Write openapi.yaml',
+          label: 'Write',
           status: 'success',
+          detail: 'openapi.yaml',
           output: '187 lines written.',
           duration: 44,
         },
@@ -438,3 +449,145 @@ export const StatusTones: Story = {
     ],
   },
 }
+
+// ---------------------------------------------------------------------------
+// Full transcript through ChatContainer — the real consumer path. Tool titles
+// and descriptions come from `getToolDisplayMetadata`, so this story shows the
+// row grammar a product sees (not hand-written labels): prose, reasoning, a
+// tool sequence, a running row, an error row, and a streaming reply.
+// ---------------------------------------------------------------------------
+
+const transcriptMessages: SessionMessage[] = [
+  { id: 'u-1', role: 'user', time: { created: NOW - 240_000 } },
+  { id: 'a-1', role: 'assistant', time: { created: NOW - 230_000 } },
+  { id: 'u-2', role: 'user', time: { created: NOW - 60_000 } },
+  { id: 'a-2', role: 'assistant', time: { created: NOW - 50_000 } },
+]
+
+const transcriptParts: Record<string, SessionPart[]> = {
+  'u-1': [
+    {
+      type: 'text',
+      text: 'The retry loop in `src/batch-writer.ts` hammers the API when the token expires. Add jittered backoff and make sure the tests cover it.',
+    },
+  ],
+  'a-1': [
+    {
+      type: 'reasoning',
+      text: 'The loop retries immediately on 401. I should read the writer, find where the delay is computed, add exponential backoff with jitter, and extend the existing test.',
+      time: { start: NOW - 229_000, end: NOW - 226_000 },
+    },
+    {
+      type: 'tool',
+      id: 't-1',
+      tool: 'read',
+      state: {
+        status: 'completed',
+        input: { file_path: 'src/batch-writer.ts' },
+        output: 'export async function flush(batch: Row[]) {\n  for (let attempt = 0; attempt < 5; attempt++) {\n    try { return await post(batch) } catch (err) { /* retry */ }\n  }\n}',
+        time: { start: NOW - 225_000, end: NOW - 224_960 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-2',
+      tool: 'grep',
+      state: {
+        status: 'completed',
+        input: { pattern: 'flush\\(', path: 'src/' },
+        output: 'src/batch-writer.ts:12\nsrc/batch-writer.test.ts:8\nsrc/batch-writer.test.ts:31',
+        time: { start: NOW - 224_000, end: NOW - 223_970 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-3',
+      tool: 'edit',
+      state: {
+        status: 'completed',
+        input: {
+          file_path: 'src/batch-writer.ts',
+          old_string: '} catch (err) { /* retry */ }',
+          new_string: '} catch (err) {\n      await sleep(backoff(attempt))\n    }',
+        },
+        output: 'Applied 1 edit',
+        time: { start: NOW - 223_000, end: NOW - 222_980 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-4',
+      tool: 'bash',
+      state: {
+        status: 'completed',
+        input: { command: 'pnpm vitest run src/batch-writer.test.ts' },
+        output: ' ✓ src/batch-writer.test.ts (3)\n\nTest Files  1 passed (1)\n     Tests  3 passed (3)',
+        time: { start: NOW - 222_000, end: NOW - 219_600 },
+      },
+    },
+    {
+      type: 'text',
+      text: 'Added `backoff(attempt)` — exponential from 200ms with ±25% jitter, capped at 5s — and the writer now waits before each retry. The existing three tests still pass.',
+    },
+  ],
+  'u-2': [
+    {
+      type: 'text',
+      text: 'Now add a test that proves the jitter actually spreads the retries.',
+    },
+  ],
+  'a-2': [
+    {
+      type: 'tool',
+      id: 't-5',
+      tool: 'write',
+      state: {
+        status: 'completed',
+        input: {
+          file_path: 'src/batch-writer.jitter.test.ts',
+          content: "import { backoff } from './batch-writer'\n\ntest('jitter spreads retries', () => {\n  const delays = new Set(Array.from({ length: 50 }, () => backoff(2)))\n  expect(delays.size).toBeGreaterThan(10)\n})",
+        },
+        output: 'File written',
+        time: { start: NOW - 49_000, end: NOW - 48_970 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-6',
+      tool: 'bash',
+      state: {
+        status: 'error',
+        input: { command: 'pnpm vitest run src/batch-writer.jitter.test.ts' },
+        error: "Cannot find module './batch-writer' — did you mean './batch-writer.ts'? (resolve.extensions does not include .ts in this config)",
+        time: { start: NOW - 48_000, end: NOW - 46_800 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-7',
+      tool: 'bash',
+      state: {
+        status: 'running',
+        input: { command: 'pnpm vitest run src/batch-writer.jitter.test.ts --config vitest.config.ts' },
+        time: { start: NOW - 3_000 },
+      },
+    },
+    {
+      type: 'text',
+      text: 'The first run failed on module resolution — the test runner was picking up the root config. Re-running with the package config',
+    },
+  ],
+}
+
+export const FullTranscript: Story = {
+  render: () => (
+    <div className="h-screen">
+      <ChatContainer
+        presentation="timeline"
+        messages={transcriptMessages}
+        partMap={transcriptParts}
+        isStreaming
+      />
+    </div>
+  ),
+}

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

@@ -33,7 +33,7 @@ function toolItem(part: ToolPart): AgentTimelineItem {
     call: {
       id: part.id,
       type: "edit",
-      label: "Edit src/batch-writer.ts",
+      label: "Edit",
       status: "success",
       detail: "src/batch-writer.ts",
       output: "Applied 1 edit",
@@ -43,10 +43,10 @@ function toolItem(part: ToolPart): AgentTimelineItem {
 }
 
 describe("AgentTimeline tool actions", () => {
-  it("renders a tool call's label and clean detail", () => {
+  it("renders a tool call's verb and its path, once each", () => {
     render(<AgentTimeline items={[toolItem(editPart)]} />)
-    expect(screen.getByText("Edit src/batch-writer.ts")).toBeInTheDocument()
-    expect(screen.getByText("src/batch-writer.ts")).toBeInTheDocument()
+    expect(screen.getByText("Edit")).toBeInTheDocument()
+    expect(screen.getAllByText("src/batch-writer.ts")).toHaveLength(1)
   })
 
   it("renders renderToolActions beside the tool item, called with the source part", () => {
@@ -81,7 +81,7 @@ describe("AgentTimeline tool actions", () => {
 
   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.getByText("Edit")).toBeInTheDocument()
     expect(screen.queryByRole("button", { name: /open/i })).not.toBeInTheDocument()
   })
 
@@ -97,14 +97,14 @@ describe("AgentTimeline tool actions", () => {
         {
           id: "tool-1",
           type: "edit",
-          label: "Edit src/batch-writer.ts",
+          label: "Edit",
           status: "success",
           detail: "src/batch-writer.ts",
         },
         {
           id: "tool-2",
           type: "read",
-          label: "Read src/lib/jitter.ts",
+          label: "Read",
           status: "success",
           detail: "src/lib/jitter.ts",
         },
@@ -160,6 +160,113 @@ describe("AgentTimeline tool actions", () => {
     expect(screen.getByRole("button", { name: /show less/i })).toBeInTheDocument()
   })
 
+  it("names a tool group for assistive tech but draws no header above it", () => {
+    const groupItem: AgentTimelineItem = {
+      id: "group-1",
+      kind: "tool_group",
+      title: "Tool activity",
+      calls: [
+        { id: "tool-1", type: "edit", label: "Edit", status: "success", detail: "src/a.ts" },
+        { id: "tool-2", type: "read", label: "Read", status: "success", detail: "src/b.ts" },
+      ],
+      parts: [editPart, readPart],
+    }
+    render(<AgentTimeline items={[groupItem]} />)
+    expect(screen.queryByText("Tool activity")).not.toBeInTheDocument()
+    expect(screen.getByRole("group", { name: "Tool activity" })).toBeInTheDocument()
+  })
+
+  it("renders assistant prose without a timestamp header", () => {
+    const stamp = new Date(2026, 0, 1, 15, 42)
+    render(
+      <AgentTimeline
+        items={[
+          { id: "a-1", kind: "message", role: "assistant", content: "Done.", timestamp: stamp },
+        ]}
+      />,
+    )
+    expect(screen.getByText("Done.")).toBeInTheDocument()
+    expect(
+      screen.queryByText(
+        stamp.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" }),
+      ),
+    ).not.toBeInTheDocument()
+  })
+
+  it("keeps the user bubble's timestamp", () => {
+    const stamp = new Date(2026, 0, 1, 15, 42)
+    render(
+      <AgentTimeline
+        items={[{ id: "u-1", kind: "message", role: "user", content: "Hi", timestamp: stamp }]}
+      />,
+    )
+    expect(
+      screen.getByText(
+        stamp.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" }),
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it("lays rows out in a plain column — no spine gutter, no connector", () => {
+    const { container } = render(
+      <AgentTimeline
+        items={[
+          { id: "a-1", kind: "message", role: "assistant", content: "Reading." },
+          toolItem(editPart),
+          { id: "s-1", kind: "status", label: "Type-checks clean", tone: "success" },
+        ]}
+      />,
+    )
+    expect(container.querySelector('[class*="grid-cols-"]')).toBeNull()
+    expect(container.querySelector(".ring-4")).toBeNull()
+    const steps = container.querySelectorAll("[data-timeline-step]")
+    expect(Array.from(steps).map((el) => el.getAttribute("data-timeline-step"))).toEqual([
+      "prose",
+      "tool",
+      "card",
+    ])
+    // Tool rows bleed past the prose edge so the glyph sits on it.
+    expect(steps[1].className).toContain("-mx-3")
+    expect(steps[0].className).not.toContain("-mx-3")
+  })
+
+  it("spaces rows by their neighbours: turns widest, tool sequences tightest", () => {
+    const tool2 = { ...toolItem(readPart), id: "item-2" }
+    const { container } = render(
+      <AgentTimeline
+        items={[
+          { id: "u-1", kind: "message", role: "user", content: "Go" },
+          toolItem(editPart),
+          tool2,
+          { id: "a-1", kind: "message", role: "assistant", content: "Done." },
+          { id: "u-2", kind: "message", role: "user", content: "Thanks" },
+        ]}
+      />,
+    )
+    const classes = Array.from(container.querySelectorAll("[data-timeline-step]")).map(
+      (el) => el.className,
+    )
+    expect(classes[0]).not.toMatch(/mt-\d/)
+    expect(classes[1]).toContain("mt-4") // user → tool: turn boundary
+    expect(classes[2]).toContain("mt-1") // tool → tool
+    expect(classes[3]).toContain("mt-1") // tool → prose
+    expect(classes[4]).toContain("mt-4") // prose → user
+  })
+
+  it("softens the streaming cursor to a muted caret", () => {
+    const { container } = render(
+      <AgentTimeline
+        items={[
+          { id: "a-1", kind: "message", role: "assistant", content: "Typing", isStreaming: true },
+        ]}
+      />,
+    )
+    const caret = container.querySelector("[data-streaming-caret]")
+    expect(caret).not.toBeNull()
+    expect(caret!.className).toContain("bg-muted-foreground")
+    expect(caret!.className).not.toContain("bg-primary")
+  })
+
   it("renders the source part's real input in the expanded detail", async () => {
     const user = userEvent.setup()
     const probePart: ToolPart = {