refactor(ui): move chat transcript components

Move reusable Chats transcript rendering pieces into ui/src/features/transcript with Transcript* names. Keep TaskDetail's audit-trail conversation layout separate instead of forcing it into chat bubbles.

Author: chicoxyzzy

ui/src/features/chats/ChatView.tsx

@@ -4,9 +4,9 @@ import type { RuntimeConsoleViewModel } from "../../app/useRuntimeConsole";
 import { describeGatewayError, formatErrorCode } from "../../lib/error-diagnostics";
 import type { AgentAdapterRecord, AgentChatActivityRecord, AgentChatSessionRecord, AgentChatUsageRecord } from "../../types/runtime";
 import { AgentAdapterPicker, CodeBlock, Icon, Icons, InlineError, ModelPicker, ProviderPicker } from "../shared/ui";
+import { TranscriptMessageRow } from "../transcript/TranscriptMessageRow";
 import { AgentApprovalAutoModeBanner, AgentApprovalsBanner } from "./AgentApprovalBanner";
 import { AgentApprovalModal } from "./AgentApprovalModal";
-import { MessageRow } from "./MessageRow";
 
 type Props = {
   state: RuntimeConsoleViewModel["state"];
@@ -622,7 +622,7 @@ export function ChatView({ state, actions, onNavigate }: Props) {
               ? formatAgentRuntimeMeta(m.run_id, m.duration_ms, m.trace_id, m.native_session_id)
               : "";
             return (
-              <MessageRow
+              <TranscriptMessageRow
                 key={m.id}
                 id={m.id}
                 role={role}

…res/chats/AgentActivityTimeline.test.tsx …ript/TranscriptActivityTimeline.test.tsxui/src/features/chats/AgentActivityTimeline.test.tsx renamed to ui/src/features/transcript/TranscriptActivityTimeline.test.tsx ui/src/features/chats/AgentActivityTimeline.test.tsx renamed to ui/src/features/transcript/TranscriptActivityTimeline.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
 import type { AgentChatActivityRecord } from "../../types/runtime";
-import { ActivityTimeline, DiffStatList, formatDiffStatSummary } from "./AgentActivityTimeline";
+import { TranscriptActivityTimeline, DiffStatList, formatDiffStatSummary } from "./TranscriptActivityTimeline";
 
 describe("formatDiffStatSummary", () => {
   it("returns the 'N files changed' line when present", () => {
@@ -43,17 +43,17 @@ describe("DiffStatList", () => {
   });
 });
 
-describe("ActivityTimeline", () => {
+describe("TranscriptActivityTimeline", () => {
   it("renders nothing when activities is empty", () => {
-    const { container } = render(<ActivityTimeline activities={[]} />);
+    const { container } = render(<TranscriptActivityTimeline activities={[]} />);
     expect(container).toBeEmptyDOMElement();
   });
 
   it("renders the summary with running status when no terminal activity is present", () => {
     const activities: AgentChatActivityRecord[] = [
       { type: "tool_call", title: "read_file", status: "running", kind: "fs" },
     ];
-    render(<ActivityTimeline activities={activities} />);
+    render(<TranscriptActivityTimeline activities={activities} />);
     expect(screen.getByText(/running/)).toBeInTheDocument();
   });
 
@@ -62,7 +62,7 @@ describe("ActivityTimeline", () => {
       { type: "tool_call", title: "read_file", status: "completed" },
       { type: "completed", title: "Final answer", status: "completed" },
     ];
-    render(<ActivityTimeline activities={activities} />);
+    render(<TranscriptActivityTimeline activities={activities} />);
     expect(screen.getByText(/completed/)).toBeInTheDocument();
   });
 
@@ -72,7 +72,7 @@ describe("ActivityTimeline", () => {
       { type: "plan", title: "Step 2", status: "in_progress" },
       { type: "plan", title: "Step 3", status: "pending" },
     ];
-    render(<ActivityTimeline activities={activities} />);
+    render(<TranscriptActivityTimeline activities={activities} />);
     expect(screen.getByText("Step 1")).toBeInTheDocument();
     expect(screen.getByText("Step 2")).toBeInTheDocument();
     expect(screen.getByText("Step 3")).toBeInTheDocument();
@@ -82,7 +82,7 @@ describe("ActivityTimeline", () => {
     const activities: AgentChatActivityRecord[] = [
       { type: "tool_call", title: "read_file", status: "completed", kind: "fs", detail: "src/index.ts" },
     ];
-    render(<ActivityTimeline activities={activities} />);
+    render(<TranscriptActivityTimeline activities={activities} />);
     expect(screen.getByText("read_file")).toBeInTheDocument();
     expect(screen.getByText("fs")).toBeInTheDocument();
     expect(screen.getByText("src/index.ts")).toBeInTheDocument();
@@ -92,7 +92,7 @@ describe("ActivityTimeline", () => {
     const activities: AgentChatActivityRecord[] = [
       { type: "tool_call", title: "read_file", status: "completed" },
     ];
-    render(<ActivityTimeline activities={activities} diffStat="src/foo.ts | 3 +-" />);
+    render(<TranscriptActivityTimeline activities={activities} diffStat="src/foo.ts | 3 +-" />);
     expect(screen.getByText(/files changed/)).toBeInTheDocument();
   });
 
@@ -102,7 +102,7 @@ describe("ActivityTimeline", () => {
       { type: "tool_call", title: "read_file", status: "completed" },
       { type: "completed", title: "Final answer" },
     ];
-    render(<ActivityTimeline activities={activities} />);
+    render(<TranscriptActivityTimeline activities={activities} />);
     expect(screen.queryByText("Started")).toBeNull();
   });
 });

…features/chats/AgentActivityTimeline.tsx …ranscript/TranscriptActivityTimeline.tsxui/src/features/chats/AgentActivityTimeline.tsx renamed to ui/src/features/transcript/TranscriptActivityTimeline.tsx ui/src/features/chats/AgentActivityTimeline.tsx renamed to ui/src/features/transcript/TranscriptActivityTimeline.tsx

@@ -45,7 +45,7 @@ export function formatDiffStatSummary(diffStat: string): string {
   return lines.find(line => /\bfiles? changed\b/.test(line)) || lines[0] || "";
 }
 
-export function ActivityTimeline({ activities, diffStat }: { activities: AgentChatActivityRecord[]; diffStat?: string }) {
+export function TranscriptActivityTimeline({ activities, diffStat }: { activities: AgentChatActivityRecord[]; diffStat?: string }) {
   const visible = compactAgentActivities(activities);
   if (visible.length === 0) return null;
   const terminal = terminalAgentActivity(activities);

…/features/chats/AgentDiffReview.test.tsx …transcript/TranscriptDiffReview.test.tsxui/src/features/chats/AgentDiffReview.test.tsx renamed to ui/src/features/transcript/TranscriptDiffReview.test.tsx ui/src/features/chats/AgentDiffReview.test.tsx renamed to ui/src/features/transcript/TranscriptDiffReview.test.tsx

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
 import type { AgentChatChangedFileDiffRecord, AgentChatChangedFileRecord } from "../../types/runtime";
-import { AgentDiffReview } from "./AgentDiffReview";
+import { TranscriptDiffReview } from "./TranscriptDiffReview";
 
 function file(overrides: Partial<AgentChatChangedFileRecord> = {}): AgentChatChangedFileRecord {
   return {
@@ -26,10 +26,10 @@ function fileDiff(overrides: Partial<AgentChatChangedFileDiffRecord> = {}): Agen
   };
 }
 
-describe("AgentDiffReview", () => {
+describe("TranscriptDiffReview", () => {
   it("renders the static diff stat fallback when review APIs aren't wired", () => {
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID=""
         messageID="m1"
         diffStat="src/foo.ts | 3 +-"
@@ -43,7 +43,7 @@ describe("AgentDiffReview", () => {
     const onListFiles = vi.fn(async () => [file({ path: "src/a.ts" }), file({ path: "src/b.ts" })]);
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="2 files changed"
@@ -64,7 +64,7 @@ describe("AgentDiffReview", () => {
     });
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="2 files changed"
@@ -82,7 +82,7 @@ describe("AgentDiffReview", () => {
     const onGetFileDiff = vi.fn(async () => fileDiff());
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="1 file changed"
@@ -105,7 +105,7 @@ describe("AgentDiffReview", () => {
     });
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="1 file changed"
@@ -126,7 +126,7 @@ describe("AgentDiffReview", () => {
     const onRevertFiles = vi.fn(async () => true);
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="1 file changed"
@@ -148,7 +148,7 @@ describe("AgentDiffReview", () => {
     const onRevertFiles = vi.fn(async () => false);
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="1 file changed"
@@ -169,7 +169,7 @@ describe("AgentDiffReview", () => {
     const onRevertFiles = vi.fn(async () => true);
     const user = userEvent.setup();
     render(
-      <AgentDiffReview
+      <TranscriptDiffReview
         sessionID="s1"
         messageID="m1"
         diffStat="2 files changed"

ui/src/features/chats/AgentDiffReview.tsx …ures/transcript/TranscriptDiffReview.tsxui/src/features/chats/AgentDiffReview.tsx renamed to ui/src/features/transcript/TranscriptDiffReview.tsx ui/src/features/chats/AgentDiffReview.tsx renamed to ui/src/features/transcript/TranscriptDiffReview.tsx

@@ -3,7 +3,7 @@ import type { SyntheticEvent } from "react";
 
 import type { AgentChatChangedFileDiffRecord, AgentChatChangedFileRecord } from "../../types/runtime";
 import { CodeBlock, InlineError } from "../shared/ui";
-import { DiffStatList, formatDiffStatSummary } from "./AgentActivityTimeline";
+import { DiffStatList, formatDiffStatSummary } from "./TranscriptActivityTimeline";
 
 type Props = {
   sessionID: string;
@@ -15,7 +15,7 @@ type Props = {
   onRevertFiles?: (sessionID: string, messageID: string, paths: string[]) => Promise<boolean>;
 };
 
-export function AgentDiffReview({
+export function TranscriptDiffReview({
   sessionID,
   messageID,
   diffStat,

ui/src/features/chats/Markdown.test.tsx …s/transcript/TranscriptMarkdown.test.tsxui/src/features/chats/Markdown.test.tsx renamed to ui/src/features/transcript/TranscriptMarkdown.test.tsx ui/src/features/chats/Markdown.test.tsx renamed to ui/src/features/transcript/TranscriptMarkdown.test.tsx

@@ -1,73 +1,73 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import { Markdown } from "./Markdown";
+import { TranscriptMarkdown } from "./TranscriptMarkdown";
 
-describe("Markdown", () => {
+describe("TranscriptMarkdown", () => {
   it("renders bold inline marks", () => {
-    render(<Markdown content="this is **bold** text" />);
+    render(<TranscriptMarkdown content="this is **bold** text" />);
     expect(screen.getByText("bold").tagName).toBe("STRONG");
   });
 
   it("renders inline code with monospace styling", () => {
-    render(<Markdown content="use `useState` to track state" />);
+    render(<TranscriptMarkdown content="use `useState` to track state" />);
     const code = screen.getByText("useState");
     expect(code.tagName).toBe("CODE");
   });
 
   it("renders fenced code blocks", () => {
-    render(<Markdown content={"```ts\nconst x = 1;\n```"} />);
+    render(<TranscriptMarkdown content={"```ts\nconst x = 1;\n```"} />);
     expect(screen.getByText(/const x = 1/)).toBeInTheDocument();
   });
 
   it("renders headings of varying levels", () => {
-    const { container } = render(<Markdown content={"# H1\n## H2\n### H3\nbody"} />);
+    const { container } = render(<TranscriptMarkdown content={"# H1\n## H2\n### H3\nbody"} />);
     expect(container.textContent).toContain("H1");
     expect(container.textContent).toContain("H2");
     expect(container.textContent).toContain("H3");
   });
 
   it("renders unordered lists", () => {
-    render(<Markdown content={"- one\n- two\n- three"} />);
+    render(<TranscriptMarkdown content={"- one\n- two\n- three"} />);
     expect(screen.getByText("one").tagName).toBe("LI");
     expect(screen.getByText("two").tagName).toBe("LI");
     expect(screen.getByText("three").tagName).toBe("LI");
   });
 
   it("renders ordered lists", () => {
-    const { container } = render(<Markdown content={"1. first\n2. second"} />);
+    const { container } = render(<TranscriptMarkdown content={"1. first\n2. second"} />);
     const ol = container.querySelector("ol");
     expect(ol).not.toBeNull();
     expect(ol?.querySelectorAll("li")).toHaveLength(2);
   });
 
   it("renders task lists with completed and incomplete states", () => {
-    render(<Markdown content={"- [x] done\n- [ ] todo"} />);
+    render(<TranscriptMarkdown content={"- [x] done\n- [ ] todo"} />);
     expect(screen.getByLabelText("Completed task")).toBeInTheDocument();
     expect(screen.getByLabelText("Incomplete task")).toBeInTheDocument();
   });
 
   it("renders horizontal rules", () => {
-    const { container } = render(<Markdown content={"before\n\n---\n\nafter"} />);
+    const { container } = render(<TranscriptMarkdown content={"before\n\n---\n\nafter"} />);
     expect(container.querySelector("hr")).not.toBeNull();
   });
 
   it("rewrites unsafe link hrefs to # while keeping link text", () => {
-    render(<Markdown content="see [docs](javascript:alert(1)) for details" />);
+    render(<TranscriptMarkdown content="see [docs](javascript:alert(1)) for details" />);
     const link = screen.getByText("docs") as HTMLAnchorElement;
     expect(link.tagName).toBe("A");
     expect(link.getAttribute("href")).toBe("#");
   });
 
   it("preserves http(s) and mailto link hrefs", () => {
-    render(<Markdown content="see [docs](https://example.com) and [me](mailto:x@y.z)" />);
+    render(<TranscriptMarkdown content="see [docs](https://example.com) and [me](mailto:x@y.z)" />);
     expect((screen.getByText("docs") as HTMLAnchorElement).getAttribute("href")).toBe("https://example.com");
     expect((screen.getByText("me") as HTMLAnchorElement).getAttribute("href")).toBe("mailto:x@y.z");
   });
 
   it("renders tables with headers and rows", () => {
     const md = "| Name | Age |\n|------|-----|\n| Ada  | 36  |\n| Bob  | 27  |";
-    render(<Markdown content={md} />);
+    render(<TranscriptMarkdown content={md} />);
     expect(screen.getByText("Name")).toBeInTheDocument();
     expect(screen.getByText("Ada")).toBeInTheDocument();
     expect(screen.getByText("36")).toBeInTheDocument();

ui/src/features/chats/Markdown.tsx …atures/transcript/TranscriptMarkdown.tsxui/src/features/chats/Markdown.tsx renamed to ui/src/features/transcript/TranscriptMarkdown.tsx ui/src/features/chats/Markdown.tsx renamed to ui/src/features/transcript/TranscriptMarkdown.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import { parseInlineNodes, parseMarkdownBlocks } from "../../lib/markdown";
 import { CodeBlock } from "../shared/ui";
 
-export function Markdown({ content }: { content: string }) {
+export function TranscriptMarkdown({ content }: { content: string }) {
   const blocks = parseMarkdownBlocks(content);
   return (
     <div style={{ fontSize: 13, color: "var(--t0)", lineHeight: 1.7 }}>