diff --git a/app/src/components/flows/ToolActivityChip.test.tsx b/app/src/components/flows/ToolActivityChip.test.tsx
deleted file mode 100644
index d77a1be9d..000000000
--- a/app/src/components/flows/ToolActivityChip.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import ToolActivityChip from './ToolActivityChip';
-
-vi.mock('../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: (key: string) => key }) }));
-
-describe('ToolActivityChip', () => {
-  it('renders the proposing label for propose_workflow', () => {
-    render(<ToolActivityChip toolNames={['propose_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.proposing'
-    );
-  });
-
-  it('renders the proposing label for revise_workflow too', () => {
-    render(<ToolActivityChip toolNames={['revise_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.proposing'
-    );
-  });
-
-  it('renders the dry-running label for dry_run_workflow', () => {
-    render(<ToolActivityChip toolNames={['dry_run_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.dryRunning'
-    );
-  });
-
-  it('renders the saving label for save_workflow', () => {
-    render(<ToolActivityChip toolNames={['save_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent('flows.copilot.tool.saving');
-  });
-
-  it('renders a generic "using tools" label for an unrecognized tool name', () => {
-    render(<ToolActivityChip toolNames={['some_other_tool']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.usingTools'
-    );
-  });
-
-  it('renders nothing for an empty toolNames array', () => {
-    const { container } = render(<ToolActivityChip toolNames={[]} />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('renders the shared label when every tool name maps to the same label', () => {
-    render(<ToolActivityChip toolNames={['propose_workflow', 'revise_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.proposing'
-    );
-  });
-
-  it('renders the generic label when tool names map to different labels', () => {
-    render(<ToolActivityChip toolNames={['dry_run_workflow', 'save_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.usingTools'
-    );
-  });
-
-  it('renders the generic label when one tool is unrecognized, even if another is recognized', () => {
-    render(<ToolActivityChip toolNames={['some_other_tool', 'save_workflow']} />);
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.usingTools'
-    );
-  });
-});
diff --git a/app/src/components/flows/ToolActivityChip.tsx b/app/src/components/flows/ToolActivityChip.tsx
deleted file mode 100644
index 0d39c1ea6..000000000
--- a/app/src/components/flows/ToolActivityChip.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * ToolActivityChip — replaces raw tool-call JSON in the copilot chat with a
- * compact, human-readable status pill (B25). Users should know the agent
- * used a tool (it explains why the turn took longer), but they should never
- * see the raw JSON arguments (e.g. the whole workflow graph payload).
- */
-import { useT } from '../../lib/i18n/I18nContext';
-
-interface Props {
-  /** Tool names extracted from the turn's tool-call envelope, in call order. */
-  toolNames: string[];
-}
-
-/** Tools that map to a specific, more informative status label. */
-const KNOWN_TOOL_LABEL_KEYS: Record<string, string> = {
-  propose_workflow: 'flows.copilot.tool.proposing',
-  revise_workflow: 'flows.copilot.tool.proposing',
-  dry_run_workflow: 'flows.copilot.tool.dryRunning',
-  save_workflow: 'flows.copilot.tool.saving',
-};
-
-export default function ToolActivityChip({ toolNames }: Props) {
-  const { t } = useT();
-  if (toolNames.length === 0) return null;
-
-  // Every tool must map to the SAME recognized label before we show a
-  // specific status (e.g. all of `propose_workflow`/`revise_workflow` map to
-  // "proposing..."); any unrecognized tool, or a mix of tools with different
-  // labels, falls back to a generic "Using tools..." pill rather than
-  // picking one tool's label arbitrarily or dumping tool names verbatim.
-  const labelKeys = toolNames.map(name => KNOWN_TOOL_LABEL_KEYS[name]);
-  const labelKey = labelKeys.every(key => key && key === labelKeys[0]) ? labelKeys[0] : undefined;
-
-  return (
-    <span
-      data-testid="tool-activity-chip"
-      className="mt-1 inline-flex w-fit items-center gap-1 rounded-full bg-surface-subtle px-1.5 py-0.5 text-[11px] font-medium text-content-muted">
-      {t(labelKey ?? 'flows.copilot.tool.usingTools')}
-    </span>
-  );
-}
diff --git a/app/src/components/flows/WorkflowCopilotPanel.test.tsx b/app/src/components/flows/WorkflowCopilotPanel.test.tsx
index f382f1469..1e896b19b 100644
--- a/app/src/components/flows/WorkflowCopilotPanel.test.tsx
+++ b/app/src/components/flows/WorkflowCopilotPanel.test.tsx
@@ -2,28 +2,30 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { WorkflowGraph, WorkflowNode } from '../../lib/flows/types';
-import type { ToolTimelineEntry, WorkflowProposal } from '../../store/chatRuntimeSlice';
+import type { WorkflowProposal } from '../../store/chatRuntimeSlice';
 import WorkflowCopilotPanel from './WorkflowCopilotPanel';
 
 vi.mock('../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: (key: string) => key }) }));
 
-interface MockMessage {
-  id: string;
-  content: string;
-  sender: 'user' | 'agent';
-  extraMetadata?: { isInterim?: boolean };
-}
+// The panel now delegates its entire transcript to the shared `ChatThreadView`
+// (message bubbles, tool timeline, sub-agent drawer, streaming previews). That
+// component reads the real Redux store; its rendering — including the B25
+// tool-call-envelope unwrap and interim-narration handling — is covered by
+// `features/conversations/components/ChatThreadView.test.tsx`. Here we stub it
+// so these tests stay focused on the copilot's OWN authoring behavior (the
+// `flows_build` send path, seed auto-sends, and the proposal / capped cards)
+// without needing a Redux Provider.
+vi.mock('../../features/conversations/components/ChatThreadView', () => ({
+  ChatThreadView: ({ emptyContent }: { emptyContent?: unknown }) => (
+    <div data-testid="chat-thread-view">{emptyContent as never}</div>
+  ),
+}));
 
 const hookState = vi.hoisted(() => ({
+  threadId: null as string | null,
   sending: false,
   proposal: null as WorkflowProposal | null,
   capped: false,
-  // Panel renders `displayMessages` (already interim-filtered upstream by
-  // `useWorkflowBuilderChat`) — kept separate from `messages` in these tests
-  // so a mismatch between the two proves the panel is reading the right field.
-  displayMessages: [] as MockMessage[],
-  toolTimeline: [] as ToolTimelineEntry[],
-  liveResponse: '',
   error: null as string | null,
   send: vi.fn(),
   clearProposal: vi.fn(),
@@ -50,12 +52,10 @@ const baseGraph = graph(['a', 'b']);
 
 describe('WorkflowCopilotPanel', () => {
   beforeEach(() => {
+    hookState.threadId = null;
     hookState.sending = false;
     hookState.proposal = null;
     hookState.capped = false;
-    hookState.displayMessages = [];
-    hookState.toolTimeline = [];
-    hookState.liveResponse = '';
     hookState.error = null;
     hookState.send = vi.fn().mockResolvedValue({ outcome: 'dispatched', proposed: false });
     hookState.clearProposal = vi.fn();
@@ -147,268 +147,13 @@ describe('WorkflowCopilotPanel', () => {
     expect(thirdArg.request.instruction).toBe('also add a filter step');
   });
 
-  it('renders the conversation transcript (user + agent turns)', () => {
-    hookState.displayMessages = [
-      { id: 'm1', content: 'add a Slack step', sender: 'user' },
-      { id: 'm2', content: 'Done — proposed a Slack notification.', sender: 'agent' },
-    ];
-    render(
-      <WorkflowCopilotPanel
-        graph={baseGraph}
-        onProposal={vi.fn()}
-        onAccept={vi.fn()}
-        onReject={vi.fn()}
-        onClose={vi.fn()}
-      />
-    );
-    expect(screen.getByTestId('workflow-copilot-user')).toHaveTextContent('add a Slack step');
-    expect(screen.getByTestId('workflow-copilot-agent')).toHaveTextContent(
-      'Done — proposed a Slack notification.'
-    );
-    // With a transcript present, the empty-state hint is gone.
-    expect(screen.queryByTestId('workflow-copilot-empty')).not.toBeInTheDocument();
-  });
-
-  it('B25: unwraps a raw tool-call envelope message into clean text + a tool activity chip, never raw JSON', () => {
-    // Repro for B25: a turn that both talks and calls a tool can land in the
-    // thread transcript as the provider wire-format `{ content, tool_calls }`
-    // envelope. The panel must render only the human text — never the raw
-    // JSON — plus a compact status chip for the tool activity.
-    hookState.displayMessages = [
-      { id: 'm1', content: 'build me a Slack digest', sender: 'user' },
-      {
-        id: 'm2',
-        content: JSON.stringify({
-          content: "Here's the workflow I propose.",
-          tool_calls: [{ id: 'call_1', name: 'propose_workflow', arguments: '{"nodes":[]}' }],
-        }),
-        sender: 'agent',
-      },
-    ];
-    render(
-      <WorkflowCopilotPanel
-        graph={baseGraph}
-        onProposal={vi.fn()}
-        onAccept={vi.fn()}
-        onReject={vi.fn()}
-        onClose={vi.fn()}
-      />
-    );
-    const bubble = screen.getByTestId('workflow-copilot-agent');
-    expect(bubble).toHaveTextContent("Here's the workflow I propose.");
-    // The raw envelope must never reach the DOM as text.
-    expect(bubble).not.toHaveTextContent('tool_calls');
-    expect(bubble).not.toHaveTextContent('"nodes":[]');
-    expect(screen.getByTestId('tool-activity-chip')).toHaveTextContent(
-      'flows.copilot.tool.proposing'
-    );
-  });
-
-  it('does not render an isInterim agent message as a bubble, only the terminal one', () => {
-    // The panel only ever renders `displayMessages` — the same filtered set
-    // `useWorkflowBuilderChat` computes from the raw transcript (isInterim
-    // agent messages dropped since that narration already streams live via
-    // the tool timeline / live text). Mirror that filter here so this test
-    // documents (and would catch a regression in) the composition: an
-    // isInterim message must never reach the panel as a bubble, while the
-    // terminal (non-interim) answer still does.
-    const raw: MockMessage[] = [
-      { id: 'm1', content: 'build me a Slack digest', sender: 'user' },
-      {
-        id: 'm2',
-        content: 'Let me check your calendar first.',
-        sender: 'agent',
-        extraMetadata: { isInterim: true },
-      },
-      { id: 'm3', content: 'Done — proposed a Slack notification.', sender: 'agent' },
-    ];
-    hookState.displayMessages = raw.filter(m => m.sender === 'user' || !m.extraMetadata?.isInterim);
-
-    render(
-      <WorkflowCopilotPanel
-        graph={baseGraph}
-        onProposal={vi.fn()}
-        onAccept={vi.fn()}
-        onReject={vi.fn()}
-        onClose={vi.fn()}
-      />
-    );
-    expect(screen.queryByText('Let me check your calendar first.')).not.toBeInTheDocument();
-    expect(screen.getByTestId('workflow-copilot-agent')).toHaveTextContent(
-      'Done — proposed a Slack notification.'
-    );
-  });
-
-  it('renders the shared tool timeline + streaming reply during a builder turn', () => {
-    hookState.sending = true;
-    hookState.toolTimeline = [
-      { id: 'call-1', name: 'propose_workflow', round: 0, status: 'running' } as ToolTimelineEntry,
-    ];
-    hookState.liveResponse = 'Drafting your workflow…';
-    render(
-      <WorkflowCopilotPanel
-        graph={baseGraph}
-        onProposal={vi.fn()}
-        onAccept={vi.fn()}
-        onReject={vi.fn()}
-        onClose={vi.fn()}
-      />
-    );
-    // The shared ToolTimelineBlock renders (not the bespoke transcript), and the
-    // one-shot "thinking" placeholder is suppressed once activity is streaming.
-    expect(screen.getByTestId('workflow-copilot-timeline')).toBeInTheDocument();
-    expect(screen.queryByTestId('workflow-copilot-thinking')).not.toBeInTheDocument();
-  });
-
-  it('shows the live reply as a bubble before the first tool call streams', () => {
-    hookState.sending = true;
-    hookState.toolTimeline = [];
-    hookState.liveResponse = 'Thinking about your Slack digest…';
-    render(
-      <WorkflowCopilotPanel
-        graph={baseGraph}
-        onProposal={vi.fn()}
-        onAccept={vi.fn()}
-        onReject={vi.fn()}
-        onClose={vi.fn()}
-      />
-    );
-    expect(screen.getByTestId('workflow-copilot-streaming')).toHaveTextContent(
-      'Thinking about your Slack digest…'
-    );
-    // No tool timeline yet, and the plain "thinking" line is replaced by the
-    // streamed text.
-    expect(screen.queryByTestId('workflow-copilot-timeline')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('workflow-copilot-thinking')).not.toBeInTheDocument();
-  });
-
-  // Regression coverage for the "copilot chat gets stuck" bug: the panel used
-  // to force-scroll to the bottom on every render of a streaming turn (an
-  // unconditional `scrollTo` effect keyed on messages/tool timeline/live
-  // text), which fought a user trying to scroll up to read. The panel now
-  // delegates to the shared `useStickToBottom` hook (same one the main chat
-  // surfaces use) — these tests exercise the REAL hook (not mocked) wired
-  // through the actual transcript container.
-  describe('transcript scroll pinning (#regression: chat gets stuck)', () => {
-    function scrollContainer() {
-      return screen.getByTestId('workflow-copilot-transcript');
-    }
-
-    // jsdom performs no real layout, so scroll metrics are inert unless
-    // defined explicitly — mirrors the approach in useStickToBottom.test.ts.
-    function mockScrollMetrics(
-      el: HTMLElement,
-      metrics: { scrollTop: number; scrollHeight: number; clientHeight: number }
-    ) {
-      Object.defineProperty(el, 'scrollHeight', {
-        configurable: true,
-        value: metrics.scrollHeight,
-      });
-      Object.defineProperty(el, 'clientHeight', {
-        configurable: true,
-        value: metrics.clientHeight,
-      });
-      Object.defineProperty(el, 'scrollTop', {
-        configurable: true,
-        writable: true,
-        value: metrics.scrollTop,
-      });
-    }
-
-    function renderPanel() {
-      return render(
-        <WorkflowCopilotPanel
-          graph={baseGraph}
-          onProposal={vi.fn()}
-          onAccept={vi.fn()}
-          onReject={vi.fn()}
-          onClose={vi.fn()}
-        />
-      );
-    }
-
-    it('keeps the transcript container freely scrollable (overflow-y-auto)', () => {
-      renderPanel();
-      expect(scrollContainer()).toHaveClass('overflow-y-auto');
-    });
-
-    it('auto-scrolls to the bottom when a new message arrives while the user is pinned to the bottom', () => {
-      hookState.displayMessages = [{ id: 'm1', content: 'hi', sender: 'user' }];
-      const { rerender } = renderPanel();
-      const container = scrollContainer();
-
-      mockScrollMetrics(container, { scrollTop: 50, scrollHeight: 100, clientHeight: 50 });
-      rerender(
-        <WorkflowCopilotPanel
-          graph={baseGraph}
-          onProposal={vi.fn()}
-          onAccept={vi.fn()}
-          onReject={vi.fn()}
-          onClose={vi.fn()}
-        />
-      );
-
-      // A new agent turn lands while the user never scrolled away.
-      hookState.displayMessages = [
-        ...hookState.displayMessages,
-        { id: 'm2', content: 'Done — proposed a Slack notification.', sender: 'agent' },
-      ];
-      mockScrollMetrics(container, { scrollTop: 50, scrollHeight: 300, clientHeight: 50 });
-      rerender(
-        <WorkflowCopilotPanel
-          graph={baseGraph}
-          onProposal={vi.fn()}
-          onAccept={vi.fn()}
-          onReject={vi.fn()}
-          onClose={vi.fn()}
-        />
-      );
-
-      expect(container.scrollTop).toBe(300);
-    });
-
-    it('does NOT force-scroll the user back down once they have scrolled up to read history', () => {
-      hookState.displayMessages = [{ id: 'm1', content: 'hi', sender: 'user' }];
-      const { rerender } = renderPanel();
-      const container = scrollContainer();
-
-      mockScrollMetrics(container, { scrollTop: 50, scrollHeight: 100, clientHeight: 50 });
-      rerender(
-        <WorkflowCopilotPanel
-          graph={baseGraph}
-          onProposal={vi.fn()}
-          onAccept={vi.fn()}
-          onReject={vi.fn()}
-          onClose={vi.fn()}
-        />
-      );
-
-      // The user scrolls up to read earlier context, well past the stick
-      // threshold (400 - 0 - 50 = 350px from the bottom).
-      mockScrollMetrics(container, { scrollTop: 0, scrollHeight: 400, clientHeight: 50 });
-      fireEvent.scroll(container);
-
-      // A new agent turn streams in regardless — this is exactly the bug:
-      // the old unconditional `scrollTo` effect would yank the reader back
-      // to the bottom here. The container must stay put.
-      hookState.displayMessages = [
-        ...hookState.displayMessages,
-        { id: 'm2', content: 'Still drafting…', sender: 'agent' },
-      ];
-      mockScrollMetrics(container, { scrollTop: 0, scrollHeight: 700, clientHeight: 50 });
-      rerender(
-        <WorkflowCopilotPanel
-          graph={baseGraph}
-          onProposal={vi.fn()}
-          onAccept={vi.fn()}
-          onReject={vi.fn()}
-          onClose={vi.fn()}
-        />
-      );
-
-      expect(container.scrollTop).toBe(0);
-    });
-  });
+  // Transcript rendering (message bubbles, the shared tool timeline + sub-agent
+  // drawer, streaming previews, the B25 tool-call-envelope unwrap, interim
+  // narration, and stick-to-bottom scroll pinning) now lives in the shared
+  // `ChatThreadView` and is covered by
+  // `features/conversations/components/ChatThreadView.test.tsx`. The panel here
+  // stubs that component (see the mock above), so these tests assert only the
+  // copilot's own authoring surface (send path, seeds, proposal / capped cards).
 
   it('surfaces a new proposal to the host and shows the added/removed diff', () => {
     const onProposal = vi.fn();
diff --git a/app/src/components/flows/WorkflowCopilotPanel.tsx b/app/src/components/flows/WorkflowCopilotPanel.tsx
index 657e6bbb6..af4a67ea3 100644
--- a/app/src/components/flows/WorkflowCopilotPanel.tsx
+++ b/app/src/components/flows/WorkflowCopilotPanel.tsx
@@ -8,13 +8,16 @@
  * transcript, surfaces each proposal's node-level diff, and hands Accept/Reject
  * up to the host, which applies it to the local draft overlay.
  *
- * Chat UI parity: the copilot reuses the SHARED chat surface end-to-end — the
- * same {@link ChatComposer} the main chat windows use (mic/attachments off
- * here), turns render as bubbles via the shared {@link BubbleMarkdown}, and the
- * builder turn's live tool activity + streaming reply render through the shared
- * {@link ToolTimelineBlock} (fed from the runtime's `toolTimelineByThread` /
- * `streamingAssistantByThread`, streamed here by Phase B). So the copilot reads
- * like a real chat rather than a one-shot form.
+ * Chat UI parity: the copilot renders its transcript through the SAME
+ * {@link ChatThreadView} the home composer chat uses — message bubbles,
+ * past-turn insights, the shared tool timeline + sub-agent drawer, and the
+ * streaming / interrupted / parallel previews — driven by this copilot's
+ * DEDICATED thread. `flows_build` streams the `workflow_builder` turn onto
+ * that thread via the global `ChatRuntimeProvider` (Phase B), exactly as a
+ * normal chat turn streams, so the copilot reads like the real chat rather
+ * than a bespoke transcript. This panel keeps only the authoring concerns:
+ * the {@link ChatComposer} footer (mic/attachments off), the seed auto-sends,
+ * and the proposal-preview + capped cards pinned above the composer.
  *
  * Invariant: the copilot only PROPOSES — the agent turn itself never
  * persists. Accept applies the proposal to the local draft AND immediately
@@ -27,18 +30,14 @@
 import createDebug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { BubbleMarkdown } from '../../features/conversations/components/AgentMessageBubble';
-import { ToolTimelineBlock } from '../../features/conversations/components/ToolTimelineBlock';
-import { useStickToBottom } from '../../hooks/useStickToBottom';
+import { ChatThreadView } from '../../features/conversations/components/ChatThreadView';
 import { useWorkflowBuilderChat } from '../../hooks/useWorkflowBuilderChat';
-import { unwrapToolCallEnvelope } from '../../lib/flows/copilotMessageSanitizer';
 import { diffGraphs } from '../../lib/flows/graphDiff';
 import type { WorkflowGraph } from '../../lib/flows/types';
 import { useT } from '../../lib/i18n/I18nContext';
 import type { WorkflowProposal } from '../../store/chatRuntimeSlice';
 import ChatComposer from '../chat/ChatComposer';
 import Button from '../ui/Button';
-import ToolActivityChip from './ToolActivityChip';
 
 const log = createDebug('app:flows:copilot-panel');
 
@@ -154,19 +153,8 @@ export default function WorkflowCopilotPanel({
   fullWidth = false,
 }: Props) {
   const { t } = useT();
-  const {
-    threadId,
-    sending,
-    turnActive,
-    proposal,
-    capped,
-    displayMessages,
-    toolTimeline,
-    liveResponse,
-    error,
-    send,
-    clearProposal,
-  } = useWorkflowBuilderChat(seedThreadId);
+  const { threadId, sending, proposal, capped, error, send, clearProposal } =
+    useWorkflowBuilderChat(seedThreadId);
   const [text, setText] = useState('');
 
   // Report the (lazily-created) thread id up so the host persists it per flow —
@@ -313,36 +301,11 @@ export default function WorkflowCopilotPanel({
     onPrefillSeedConsumed?.();
   }, [prefillSeed, onPrefillSeedConsumed]);
 
-  // Keep the transcript pinned to the newest message / streamed activity —
-  // but ONLY while the user is already at (or near) the bottom. The previous
-  // implementation here was an unconditional `scrollTo(bottom)` effect keyed
-  // on every streaming dependency (messages, tool timeline, live text, …):
-  // it fired on every streamed token and force-scrolled regardless of where
-  // the user was reading, which is what made the transcript feel "stuck" —
-  // any attempt to scroll up got yanked back down by the very next token.
-  // `useStickToBottom` is the same pinning hook the main chat surfaces use:
-  // it only auto-scrolls while `stickingRef` is true (user at/near bottom),
-  // and permanently disengages the moment the user scrolls away, so reading
-  // history is never fought. `resetKey` is a stable constant here — this
-  // panel is fully unmounted/remounted on close/reopen (see the seed refs
-  // above), so there's no in-place "navigation" case to reset for.
-  const { containerRef: scrollRef } = useStickToBottom(
-    displayMessages,
-    threadId,
-    'workflow-copilot'
-  );
-  useEffect(() => {
-    log(
-      'scroll: stick-to-bottom deps changed messages=%d thread=%s sending=%s hasProposal=%s timeline=%d liveTextLen=%d',
-      displayMessages.length,
-      threadId ?? 'null',
-      sending,
-      Boolean(proposal),
-      toolTimeline.length,
-      liveResponse.length
-    );
-  }, [displayMessages, threadId, sending, proposal, toolTimeline, liveResponse]);
-
+  // Transcript rendering + scroll pinning (stick-to-bottom) are owned by the
+  // shared `ChatThreadView` below — the copilot no longer hand-rolls the
+  // transcript. This component keeps only the authoring concerns: the
+  // structured `flows_build` send path, the seed auto-sends, and the
+  // proposal / capped cards surfaced in the footer.
   const submit = useCallback(
     async (raw?: string) => {
       const trimmed = (raw ?? text).trim();
@@ -448,14 +411,6 @@ export default function WorkflowCopilotPanel({
   }, [onReject, clearProposal]);
 
   const diff = proposal ? diffGraphs(graph, proposal.graph as WorkflowGraph) : null;
-  const hasTimeline = toolTimeline.length > 0;
-  // B25: the in-flight streaming text can also carry the raw tool-call
-  // envelope mid-turn — unwrap once and reuse the clean text everywhere below
-  // (the pre-tool streaming bubble and the shared `ToolTimelineBlock`).
-  const liveResponseText = unwrapToolCallEnvelope(liveResponse).text;
-  const hasLiveText = liveResponseText.trim().length > 0;
-  const isEmpty =
-    displayMessages.length === 0 && !proposal && !sending && !error && !hasTimeline && !hasLiveText;
 
   return (
     <aside
@@ -478,80 +433,30 @@ export default function WorkflowCopilotPanel({
         </button>
       </header>
 
-      <div
-        ref={scrollRef}
-        className="flex-1 space-y-3 overflow-y-auto px-3 py-3"
-        data-testid="workflow-copilot-transcript">
-        {isEmpty && (
-          <p className="text-xs text-content-muted" data-testid="workflow-copilot-empty">
-            {t('flows.copilot.emptyState')}
-          </p>
-        )}
-
-        {/* Conversation transcript: user turns right-aligned, agent turns left.
-            Renders `displayMessages` (interim narration bubbles filtered out —
-            that narration already streams via the tool timeline / live text
-            below it double-renders it as a bubble too, see B4). */}
-        {displayMessages.map(message => {
-          if (message.sender === 'user') {
-            return (
-              <div
-                key={message.id}
-                className="flex justify-end"
-                data-testid="workflow-copilot-user">
-                <div className="max-w-[85%] rounded-2xl bg-primary-500 px-3 py-1.5 text-sm text-content-inverted">
-                  {message.content}
-                </div>
-              </div>
-            );
-          }
-          // B25: a turn that both talks and calls a tool can carry the
-          // provider wire-format `{ content, tool_calls }` envelope as this
-          // message's raw `content` — unwrap it so the bubble renders only
-          // the human text (+ a compact tool-activity chip), never raw JSON.
-          const { text, toolNames } = unwrapToolCallEnvelope(message.content);
-          return (
-            <div
-              key={message.id}
-              className="max-w-[92%] rounded-2xl bg-surface-subtle px-3 py-1.5"
-              data-testid="workflow-copilot-agent">
-              <BubbleMarkdown content={text} />
-              <ToolActivityChip toolNames={toolNames} />
-            </div>
-          );
-        })}
-
-        {/* Live builder activity — the SHARED tool timeline (tool cards + the
-            streaming reply) the main chat uses, fed from the runtime's streamed
-            per-thread state. Renders nothing until the turn produces a tool
-            call. */}
-        {hasTimeline && (
-          <div data-testid="workflow-copilot-timeline">
-            <ToolTimelineBlock
-              entries={toolTimeline}
-              liveResponse={hasLiveText ? liveResponseText : undefined}
-              turnActive={turnActive}
-            />
+      {/* Full builder transcript — the SAME rich renderer the home composer
+          chat uses (message bubbles, past-turn insights, the shared tool
+          timeline + sub-agent drawer, streaming/interrupted/parallel previews),
+          driven by this copilot's DEDICATED thread. `flows_build` streams the
+          `workflow_builder` turn onto `threadId` via the global
+          `ChatRuntimeProvider`, exactly as a normal chat turn streams, so the
+          copilot now reads like the real chat instead of a bespoke transcript.
+          The empty hint, proposal preview, and capped card are the copilot's
+          own authoring affordances, kept in the footer below. */}
+      <ChatThreadView
+        threadId={threadId}
+        variant="sidebar"
+        scrollResetKey="workflow-copilot"
+        shareAgentName={t('flows.copilot.title')}
+        emptyContent={
+          <div className="flex h-full items-center justify-center px-3">
+            <p className="text-xs text-content-muted" data-testid="workflow-copilot-empty">
+              {t('flows.copilot.emptyState')}
+            </p>
           </div>
-        )}
-
-        {/* Pre-tool phase: the reply is streaming but no tool has run yet, so the
-            timeline is still empty — surface the live text as an agent bubble so
-            the copilot never looks frozen. */}
-        {hasLiveText && !hasTimeline && (
-          <div
-            className="max-w-[92%] rounded-2xl bg-surface-subtle px-3 py-1.5"
-            data-testid="workflow-copilot-streaming">
-            <BubbleMarkdown content={liveResponseText} />
-          </div>
-        )}
-
-        {sending && !hasTimeline && !hasLiveText && (
-          <p className="text-xs text-content-muted" data-testid="workflow-copilot-thinking">
-            {t('flows.copilot.thinking')}
-          </p>
-        )}
+        }
+      />
 
+      <div className="space-y-3 border-t border-line px-3 py-2.5">
         {error && (
           <p className="text-xs text-coral" data-testid="workflow-copilot-error">
             {error === 'offline' ? t('flows.copilot.offline') : t('flows.copilot.error')}
@@ -612,9 +517,9 @@ export default function WorkflowCopilotPanel({
 
         {/* (B34) The turn hit the agent's iteration limit with no proposal
             yet — distinguish this from a voluntary clarifying question (which
-            renders as a plain agent bubble above, no card) with an explicit
-            "reached its iteration limit" signal and a one-click resume that
-            continues building from the current draft (see `continueBuilding`
+            renders as a plain agent bubble in the transcript, no card) with an
+            explicit "reached its iteration limit" signal and a one-click resume
+            that continues building from the current draft (see `continueBuilding`
             above for why this is accurate rather than a seamless resume).
             Never shown alongside `sending` (a fresh turn already cleared
             `capped`) or a proposal (mutually exclusive server-side — see
@@ -636,9 +541,7 @@ export default function WorkflowCopilotPanel({
             </div>
           </div>
         )}
-      </div>
 
-      <div className="border-t border-line px-3 py-2.5">
         <ChatComposer
           inputValue={text}
           setInputValue={setText}
diff --git a/app/src/features/conversations/Conversations.tsx b/app/src/features/conversations/Conversations.tsx
index 7f0334071..0766e9b9b 100644
--- a/app/src/features/conversations/Conversations.tsx
+++ b/app/src/features/conversations/Conversations.tsx
@@ -1,6 +1,6 @@
 import { convertFileSrc } from '@tauri-apps/api/core';
 import debugFactory from 'debug';
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { type ChatSendError, chatSendError } from '../../chat/chatSendError';
@@ -23,31 +23,18 @@ import { SidebarContent } from '../../components/layout/shell/SidebarSlot';
 import { settingsNavState } from '../../components/settings/modal/settingsOverlay';
 import UpsellBanner from '../../components/upsell/UpsellBanner';
 import { dismissBanner, shouldShowBanner } from '../../components/upsell/upsellDismissState';
+import { selectBackgroundProcesses } from '../../features/conversations/components/BackgroundProcessesPanel';
 import {
-  AgentMessageBubble,
-  AgentMessageText,
-  BubbleMarkdown,
-} from '../../features/conversations/components/AgentMessageBubble';
-import { AgentProcessSourcePanel } from '../../features/conversations/components/AgentProcessSourcePanel';
-import {
-  BackgroundProcessesPanel,
-  selectBackgroundProcesses,
-} from '../../features/conversations/components/BackgroundProcessesPanel';
-import {
-  CitationChips,
-  type MessageCitation,
-} from '../../features/conversations/components/CitationChips';
-import { InterruptedAnswer } from '../../features/conversations/components/InterruptedAnswer';
-import { PastTurnInsights } from '../../features/conversations/components/PastTurnInsights';
+  ChatThreadView,
+  type ChatThreadViewHandle,
+} from '../../features/conversations/components/ChatThreadView';
 import { PlanReviewCard } from '../../features/conversations/components/PlanReviewCard';
-import { SubagentDrawer } from '../../features/conversations/components/SubagentDrawer';
 import {
   ThreadGoalEditorPanel,
   ThreadGoalFooterTrigger,
   useThreadGoal,
 } from '../../features/conversations/components/ThreadGoalChip';
 import { ThreadTodoStrip } from '../../features/conversations/components/ThreadTodoStrip';
-import { ToolTimelineBlock } from '../../features/conversations/components/ToolTimelineBlock';
 import {
   evaluateComposerSend,
   getComposerBlockedSendFeedback,
@@ -55,9 +42,7 @@ import {
 } from '../../features/conversations/composerSendDecision';
 import { useMemorySyncActive } from '../../features/conversations/hooks/useBackgroundActivity';
 import {
-  type AgentBubblePosition,
   buildAcceptedInlineCompletion,
-  formatRelativeTime,
   formatResetTime,
   getInlineCompletionSuffix,
 } from '../../features/conversations/utils/format';
@@ -67,7 +52,6 @@ import {
 } from '../../features/conversations/utils/threadFilter';
 import MicComposer from '../../features/human/MicComposer';
 import { useFlowApprovalRequests } from '../../hooks/useFlowApprovalRequests';
-import { useStickToBottom } from '../../hooks/useStickToBottom';
 import { useUsageState } from '../../hooks/useUsageState';
 import {
   type Attachment,
@@ -80,7 +64,6 @@ import {
 } from '../../lib/attachments';
 import { useT } from '../../lib/i18n/I18nContext';
 import { applyOpenRouterFreeModels } from '../../services/api/openrouterFreeModels';
-import { subagentApi } from '../../services/api/subagentApi';
 import { threadApi } from '../../services/api/threadApi';
 import { fetchThreadTokenUsage } from '../../services/api/threadUsageApi';
 import {
@@ -106,14 +89,11 @@ import {
   fetchAndHydrateDerivedTranscript,
   fetchAndHydrateTurnState,
   hydrateThreadUsage,
-  markSubagentCancelled,
   markThreadSendPending,
-  type ProcessingTranscriptItem,
   type QueuedFollowup,
   registerParallelRequest,
   setTaskBoardForThread,
   setToolTimelineForThread,
-  type ToolTimelineEntry,
 } from '../../store/chatRuntimeSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { selectSocketStatus } from '../../store/socketSelectors';
@@ -126,14 +106,12 @@ import {
   loadThreadMessages,
   loadThreads,
   markThreadInferenceActive,
-  persistReaction,
   setSelectedThread,
   THREAD_NOT_FOUND_MESSAGE,
   updateThreadTitle,
 } from '../../store/threadSlice';
 import type { ConfirmationModal as ConfirmationModalType } from '../../types/intelligence';
 import type { ThreadMessage } from '../../types/thread';
-import { splitAgentMessageIntoBubbles } from '../../utils/agentMessageBubbles';
 import { chatThreadPath } from '../../utils/chatRoutes';
 import { CHAT_ATTACHMENTS_ENABLED } from '../../utils/config';
 import { PRICING_URL } from '../../utils/links';
@@ -147,61 +125,14 @@ import {
   openhumanVoiceTranscribeBytes,
   openhumanVoiceTts,
 } from '../../utils/tauriCommands';
-import { formatTimelineEntry } from '../../utils/toolTimelineFormatting';
-import { ShareMessageButton } from '../share/ShareMessageButton';
 import { ThreadList } from './threadList/ThreadList';
-import { buildThreadTimeline } from './timeline/selectors';
 
 const CHAT_MODEL_HINT = 'hint:chat';
-/** Maximum trailing characters rendered in the live-streaming assistant
- *  preview bubble. The full response is revealed via `addInferenceResponse`
- *  on `chat_done` — this is purely a ticker-tape affordance to signal
- *  progress without jumping the scroll position as tokens arrive. */
-const STREAMING_PREVIEW_CHARS = 120;
 type InputMode = 'text' | 'voice';
 type ReplyMode = 'text' | 'voice';
 const AUTOCOMPLETE_POLL_DEBOUNCE_MS = 320;
 const AUTOCOMPLETE_MIN_CONTEXT_CHARS = 3;
 const debug = debugFactory('conversations');
-const SAFE_IMAGE_DATA_URI_RE =
-  /^data:(image\/(?:png|jpe?g|gif|webp|bmp));base64,([a-z0-9+/=\s]+)$/i;
-const EMPTY_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
-
-function imageDataUriToObjectUrl(src: string): string | null {
-  const match = SAFE_IMAGE_DATA_URI_RE.exec(src);
-  if (!match) return null;
-  try {
-    const mime = match[1];
-    const binary = atob(match[2].replace(/\s/g, ''));
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i += 1) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    return URL.createObjectURL(new Blob([bytes], { type: mime }));
-  } catch {
-    return null;
-  }
-}
-
-function AttachmentImage({ dataUri }: { dataUri: string }) {
-  const [objectUrl, setObjectUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    const nextUrl = imageDataUriToObjectUrl(dataUri);
-    setObjectUrl(nextUrl);
-    return () => {
-      if (nextUrl) URL.revokeObjectURL(nextUrl);
-    };
-  }, [dataUri]);
-
-  return (
-    <img
-      src={objectUrl ?? EMPTY_IMAGE_SRC}
-      alt=""
-      className="max-w-[200px] max-h-[200px] rounded-2xl object-cover"
-    />
-  );
-}
 
 interface ConversationsProps {
   /**
@@ -239,20 +170,6 @@ const EMPTY_ACTIVE_THREADS: Record<string, true> = {};
 // the same identity when the slice field is absent (narrow test stores).
 const EMPTY_QUEUED_FOLLOWUPS: Record<string, QueuedFollowup[]> = {};
 
-// Stable empty reference for the per-thread past-turn timelines map, so the
-// derived value keeps the same identity when the slice field is absent.
-const EMPTY_TURN_TIMELINES: Record<string, ToolTimelineEntry[]> = {};
-// Sibling stable empty for the per-thread past-turn processing transcripts map
-// (restore-fidelity fix 1).
-const EMPTY_TURN_TRANSCRIPTS: Record<string, ProcessingTranscriptItem[]> = {};
-// Stable empty transcript for a past turn that has tool rows but no persisted
-// reasoning/narration trail (legacy snapshot), so `PastTurnInsights` falls back
-// to the tool-only view without allocating a fresh array each render.
-const EMPTY_TRANSCRIPT: ProcessingTranscriptItem[] = [];
-// Stable empty tool-row list for a transcript-only past turn (agent thought /
-// narrated but ran no tools).
-const EMPTY_TRANSCRIPT_ENTRIES: ToolTimelineEntry[] = [];
-
 export function isComposerInteractionBlocked(args: {
   /** Whether the *currently selected* thread has an in-flight inference turn. */
   selectedThreadActive: boolean;
@@ -333,19 +250,10 @@ const Conversations = ({
   const [inputValue, setInputValue] = useState('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
-  // Sub-agent whose full live transcript is open in the drawer, keyed by the
-  // owning timeline row's spawn `taskId`. Null when the drawer is closed.
-  const [openSubagentTaskId, setOpenSubagentTaskId] = useState<string | null>(null);
-  // Detached background sub-agents (spawn_async_subagent) panel visibility.
-  const [showBackgroundProcesses, setShowBackgroundProcesses] = useState(false);
-  // Whether the consolidated "Agent Process Source" panel is open (the full
-  // agent-run timeline + visited sources for the current thread).
-  const [showProcessSource, setShowProcessSource] = useState(false);
-  // When the user clicks a step's "View details →", the Agent Process Source
-  // panel is scoped to that single step. `null` = the whole-run overview
-  // (opened by the bottom "View full agent process Source" link).
-  const [scopedDetailEntryId, setScopedDetailEntryId] = useState<string | null>(null);
+  // Imperative handle onto the transcript's own background-processes panel
+  // (its state now lives inside `ChatThreadView`) so the header badge below
+  // can still open it without lifting that state back up.
+  const threadViewRef = useRef<ChatThreadViewHandle>(null);
   const [inputMode, setInputMode] = useState<InputMode>('text');
   const [replyMode, setReplyMode] = useState<ReplyMode>('text');
   const [isRecording, setIsRecording] = useState(false);
@@ -410,10 +318,6 @@ const Conversations = ({
   // behaviour stays intact.
   const uiLocale = useAppSelector(state => state.locale?.current ?? 'en');
   const toolTimelineByThread = useAppSelector(state => state.chatRuntime.toolTimelineByThread);
-  const turnTimelinesByThread = useAppSelector(state => state.chatRuntime.turnTimelinesByThread);
-  const turnTranscriptsByThread = useAppSelector(
-    state => state.chatRuntime.turnTranscriptsByThread
-  );
   const interruptedAssistantByThread = useAppSelector(
     state => state.chatRuntime.interruptedAssistantByThread
   );
@@ -447,17 +351,6 @@ const Conversations = ({
   const inferenceHeartbeatByThread = useAppSelector(
     state => state.chatRuntime.inferenceHeartbeatByThread
   );
-  const parallelStreamsByThread = useAppSelector(
-    state => state.chatRuntime.parallelStreamsByThread
-  );
-  const agentMessageViewMode = useAppSelector(
-    state => state.theme?.agentMessageViewMode ?? 'bubbles'
-  );
-  // When ON, the verbose per-agent "Agentic task insights" timeline is hidden
-  // from chat; a compact blinking "Processing" link (and the existing message
-  // bubble loading) stand in for it, with the full run one click away in the
-  // Agent Process Source side panel. See themeSlice.hideAgentInsights.
-  const hideAgentInsights = useAppSelector(state => state.theme?.hideAgentInsights ?? false);
   const inferenceTurnLifecycleByThread = useAppSelector(
     state => state.chatRuntime.inferenceTurnLifecycleByThread
   );
@@ -465,7 +358,6 @@ const Conversations = ({
     state => state.chatRuntime.queuedFollowupsByThread ?? EMPTY_QUEUED_FOLLOWUPS
   );
   const rustChat = useRustChat();
-  const [reactionPickerMsgId, setReactionPickerMsgId] = useState<string | null>(null);
   // Inline thread-title rename in the sidebar thread list — keyed by the
   // thread id being edited (null = none) so any row can rename in place.
   const [editingThreadId, setEditingThreadId] = useState<string | null>(null);
@@ -803,12 +695,6 @@ const Conversations = ({
       });
   }, [dispatch]);
 
-  const { containerRef: messagesContainerRef, endRef: messagesEndRef } = useStickToBottom(
-    messages,
-    selectedThreadId,
-    location.pathname
-  );
-
   useEffect(() => {
     const onDictationInsert = (event: Event) => {
       const customEvent = event as CustomEvent<{ text?: string; autoSend?: boolean }>;
@@ -1776,16 +1662,12 @@ const Conversations = ({
     }
   };
 
-  const handleCopyMessage = async (messageId: string, content: string) => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopiedMessageId(messageId);
-      setTimeout(() => setCopiedMessageId(null), 1500);
-    } catch {
-      // Clipboard API not available — silently fail
-    }
-  };
-
+  // NOTE: the transcript-local derivations that used to live here (copy,
+  // sub-agent drawer, past-turn timelines, agent insights, streaming preview,
+  // etc.) moved into `ChatThreadView` (`./components/ChatThreadView.tsx`),
+  // which now owns the message-list rendering keyed by `threadId` instead of
+  // the global `selectedThreadId`. What remains here is what the header badge
+  // and the composer footer still need directly.
   const selectedThreadToolTimeline = selectedThreadId
     ? (toolTimelineByThread[selectedThreadId] ?? [])
     : [];
@@ -1793,6 +1675,9 @@ const Conversations = ({
     ? (processingByThread[selectedThreadId] ?? [])
     : [];
   // Detached background sub-agents (mode === 'async') spawned in this thread.
+  // Kept here (in addition to ChatThreadView's own copy) because the header's
+  // background-processes badge needs the count/status without reaching into
+  // the transcript component.
   const backgroundProcesses = useMemo(
     () => selectBackgroundProcesses(selectedThreadToolTimeline),
     [selectedThreadToolTimeline]
@@ -1801,12 +1686,6 @@ const Conversations = ({
   // Poll-free live signal: lights the badge when memories are syncing even if
   // no sub-agent is running and the panel is closed.
   const memorySyncActive = useMemorySyncActive();
-  // Re-derive the open subagent's live activity (and its row status) from the
-  // timeline on every render so the drawer streams token-by-token as
-  // subagent_text_delta / subagent_thinking_delta events land in Redux.
-  const openSubagentEntry = openSubagentTaskId
-    ? selectedThreadToolTimeline.find(entry => entry.subagent?.taskId === openSubagentTaskId)
-    : undefined;
   const selectedTaskBoard = selectedThreadId ? (taskBoardByThread[selectedThreadId] ?? null) : null;
   const hasTaskBoard = Boolean(selectedTaskBoard?.cards.length);
   // A plan the orchestrator parked for interactive review (request_plan_review
@@ -1824,75 +1703,6 @@ const Conversations = ({
     : null;
   const visibleMessages = messages.filter(msg => !msg.extraMetadata?.hidden);
   const hasVisibleMessages = visibleMessages.length > 0;
-  const latestVisibleMessage = visibleMessages[visibleMessages.length - 1] ?? null;
-  const latestVisibleAgentMessage = [...visibleMessages]
-    .reverse()
-    .find(msg => msg.sender === 'agent');
-  // Message list sourced from the unified timeline projection — the single
-  // source of render order (see `docs/plans/conversations-timeline-refactor.md`
-  // Phase 2). With the streaming/tool inputs omitted the projection yields
-  // exactly the visible messages in order; the tool-timeline block and streaming
-  // previews stay anchored inline below, so the rendered DOM is unchanged. This
-  // routes the live render loop through the projection ahead of the per-turn
-  // grouping in Phase 5.
-  const timelineMessages = useMemo(
-    () =>
-      buildThreadTimeline({
-        threadId: selectedThreadId ?? '',
-        messages: visibleMessages,
-        toolTimeline: [],
-        streaming: null,
-        parallelStreams: [],
-        hideAgentInsights: false,
-      })
-        .map(item => ('message' in item ? item.message : null))
-        .filter((message): message is ThreadMessage => message !== null),
-    [selectedThreadId, visibleMessages]
-  );
-  // Past-turn tool timelines (Phase 5): map the first assistant message of each
-  // older settled turn to that turn's timeline, so each past answer renders its
-  // own collapsed process trail above it. The latest turn is excluded upstream
-  // (it renders as the live "agent insights" anchor), so there is no double
-  // render. Empty for legacy messages without a `requestId`.
-  const selectedThreadTurnTimelines = selectedThreadId
-    ? (turnTimelinesByThread[selectedThreadId] ?? EMPTY_TURN_TIMELINES)
-    : EMPTY_TURN_TIMELINES;
-  // Sibling map: each past turn's persisted reasoning/narration trail, so a
-  // reopened turn replays its thoughts, not just its tool cards (fix 1).
-  const selectedThreadTurnTranscripts = selectedThreadId
-    ? (turnTranscriptsByThread[selectedThreadId] ?? EMPTY_TURN_TRANSCRIPTS)
-    : EMPTY_TURN_TRANSCRIPTS;
-  const pastTurnAnchors = useMemo(() => {
-    const anchors: Record<
-      string,
-      { entries: ToolTimelineEntry[]; transcript: ProcessingTranscriptItem[] }
-    > = {};
-    const seen = new Set<string>();
-    for (const msg of timelineMessages) {
-      if (msg.sender !== 'agent') continue;
-      const requestId = msg.extraMetadata?.requestId;
-      if (typeof requestId !== 'string' || seen.has(requestId)) continue;
-      const entries = selectedThreadTurnTimelines[requestId] ?? EMPTY_TRANSCRIPT_ENTRIES;
-      const transcript = selectedThreadTurnTranscripts[requestId] ?? EMPTY_TRANSCRIPT;
-      // Anchor the turn when it has EITHER tool rows OR a reasoning/narration
-      // trail — a tool-less turn (agent only thought/narrated) must still
-      // render its restored thoughts above its answer (fix 1).
-      if (entries.length > 0 || transcript.length > 0) {
-        anchors[msg.id] = { entries, transcript };
-        seen.add(requestId);
-      }
-    }
-    return anchors;
-  }, [timelineMessages, selectedThreadTurnTimelines, selectedThreadTurnTranscripts]);
-  const activeSubagentTimelineEntry = selectedThreadToolTimeline.find(
-    entry => entry.status === 'running' && entry.name.startsWith('subagent:')
-  );
-  const activeToolTimelineEntry = [...selectedThreadToolTimeline]
-    .reverse()
-    .find(entry => entry.status === 'running' && !entry.name.startsWith('subagent:'));
-  const selectedInferenceStatus = selectedThreadId
-    ? (inferenceStatusByThread[selectedThreadId] ?? null)
-    : null;
   const selectedStreamingAssistant = selectedThreadId
     ? (streamingAssistantByThread[selectedThreadId] ?? null)
     : null;
@@ -1902,11 +1712,6 @@ const Conversations = ({
   const selectedInterruptedAssistant = selectedThreadId
     ? (interruptedAssistantByThread[selectedThreadId] ?? null)
     : null;
-  // Live streams for concurrent parallel (forked) turns on the selected thread,
-  // rendered as separate interleaved branch bubbles.
-  const selectedParallelStreams = selectedThreadId
-    ? Object.values(parallelStreamsByThread[selectedThreadId] ?? {})
-    : [];
   const inlineCompletionSuffix = getInlineCompletionSuffix(inputValue, inlineSuggestionValue);
   // Blocks all composer interaction while a turn is in-flight or Rust chat is unavailable.
   // isSending: the *selected* thread is in-flight (drives selected-thread UI only).
@@ -1956,8 +1761,6 @@ const Conversations = ({
       inferenceTurnLifecycleByThread[selectedThreadId] === 'started' ||
       inferenceTurnLifecycleByThread[selectedThreadId] === 'streaming')
   );
-  const shouldRenderTimelineBeforeLatestAgentMessage =
-    selectedThreadToolTimeline.length > 0 && !isSending && Boolean(latestVisibleAgentMessage);
 
   // Live agent activity that must stay visible even before the thread's
   // message history has loaded: an in-flight turn, recorded tool steps, a
@@ -1974,124 +1777,6 @@ const Conversations = ({
     // before the durable message history loads (restore-fidelity fix 2).
     Boolean(selectedInterruptedAssistant);
 
-  // Anchor the "Agentic task insights" panel right after the latest turn's user
-  // message — processing happens *before* the answer, so it reads above the
-  // result (for both the live streaming preview and the settled agent bubbles).
-  // Anchoring on the user message (not the first/last agent message) avoids the
-  // multi-agent-message split from issue #3717.
-  const lastUserMessageId = [...visibleMessages].reverse().find(m => m.sender === 'user')?.id;
-
-  // The insights panel (timeline + "View full agent process Source" opener),
-  // built once and rendered inline above the latest answer. `null` when there
-  // are no recorded steps for the thread.
-  // Open the Agent Process Source panel scoped to one step, or to the whole run.
-  const openScopedDetail = (entry: ToolTimelineEntry) => {
-    setScopedDetailEntryId(entry.id);
-    setShowProcessSource(true);
-  };
-  const openWholeRunSource = () => {
-    setScopedDetailEntryId(null);
-    setShowProcessSource(true);
-  };
-  const scopedDetailEntry =
-    scopedDetailEntryId != null
-      ? selectedThreadToolTimeline.find(e => e.id === scopedDetailEntryId)
-      : undefined;
-
-  const agentInsights =
-    // Render when there are tool steps OR a persisted reasoning/narration
-    // transcript. A tool-less turn (the agent only thinks/narrates, no tool
-    // calls) has an empty timeline but still persists thoughts — without the
-    // transcript guard those thoughts would be unreachable.
-    selectedThreadToolTimeline.length > 0 || selectedThreadProcessing.length > 0 ? (
-      <>
-        {hideAgentInsights ? (
-          // "Hide agent thinking" is ON: suppress the verbose step rows.
-          // While in flight, surface a compact blinking "Processing" link; once
-          // settled the "View full agent process Source" opener below takes
-          // over (so only render this fallback when that opener won't).
-          isSending ? (
-            <button
-              type="button"
-              onClick={openWholeRunSource}
-              data-testid="agent-processing-link"
-              className="flex items-center gap-1.5 px-1 py-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
-              <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
-              <span>{t('conversations.agentTaskInsights.processing')} →</span>
-            </button>
-          ) : !shouldRenderTimelineBeforeLatestAgentMessage ? (
-            <button
-              type="button"
-              onClick={openWholeRunSource}
-              data-testid="agent-process-source-fallback"
-              className="px-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
-              {t('conversations.agentTaskInsights.viewProcessSource')} →
-            </button>
-          ) : null
-        ) : selectedThreadToolTimeline.length > 0 ? (
-          <ToolTimelineBlock
-            entries={selectedThreadToolTimeline}
-            onViewDetails={openScopedDetail}
-            onViewWholeRun={openWholeRunSource}
-            // Reuse `isSending` rather than a raw `in` membership check on
-            // `inferenceTurnLifecycleByThread`: that map also carries
-            // `'interrupted'` entries (a turn that crashed mid-flight in a
-            // PRIOR core process, written by `hydrateRuntimeFromSnapshot` on
-            // cold boot) which have no live driver and must NOT read as an
-            // active turn, or stale disclosure state leaks into a later
-            // retry. `isSending` already excludes it (only `'started'` /
-            // `'streaming'`, same as this component's own live-turn checks).
-            turnActive={isSending}
-          />
-        ) : (
-          // Transcript-only turn: reasoning/narration was streamed but no tool
-          // calls were made, so the inline step timeline is empty. The thoughts
-          // are still persisted — surface a standalone opener (matching the
-          // settled insights header) so the full-run panel stays reachable.
-          <button
-            type="button"
-            onClick={openWholeRunSource}
-            data-testid="view-process-source"
-            className="flex items-center gap-1.5 px-1 py-1 text-left">
-            <span className="text-[13px] font-medium text-content-muted">
-              {t('conversations.agentTaskInsights.title')}
-            </span>
-            <span className="text-[13px] font-medium text-primary-600 dark:text-primary-300">
-              →
-            </span>
-          </button>
-        )}
-        {/* "View full agent process Source" — only needed in the hidden-insights
-            settled state; when the timeline is visible the link lives in its
-            header (ToolTimelineBlock onViewWholeRun). */}
-        {shouldRenderTimelineBeforeLatestAgentMessage && hideAgentInsights && (
-          <button
-            type="button"
-            onClick={openWholeRunSource}
-            data-testid="view-process-source"
-            className="px-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
-            {t('conversations.agentTaskInsights.viewProcessSource')} →
-          </button>
-        )}
-      </>
-    ) : null;
-
-  // Standalone fallback slot (rendered once, below all messages) for the
-  // rare thread with no user message at all (e.g. a proactive-only run), so
-  // `agentInsights` is never unreachable. This slot sits at a fixed JSX
-  // position with no per-thread key of its own, so switching directly
-  // between two threads that both hit this fallback (e.g. two proactive-only
-  // threads) would otherwise reuse the same `ToolTimelineBlock` instance
-  // instead of remounting it — leaking its sticky `userOverrideOpen`
-  // disclosure state from the old thread into the new one (flagged in
-  // review on #4942). Keying on thread id forces a clean remount on every
-  // thread switch, matching the `key={msg.id}` pattern used for the in-flow
-  // timeline above.
-  const proactiveInsightsFallback = (() => {
-    if (lastUserMessageId) return null;
-    return <Fragment key={selectedThreadId ?? 'none'}>{agentInsights}</Fragment>;
-  })();
-
   const filteredThreads = useMemo(() => {
     return threads.filter(t => isThreadVisibleInTab(t, selectedLabel));
   }, [threads, selectedLabel]);
@@ -2238,579 +1923,27 @@ const Conversations = ({
             // the absolutely-positioned floating composer.
             'relative flex-1 flex flex-col min-w-0'
       }>
-      <div
-        ref={messagesContainerRef}
-        data-testid="chat-messages-scroll"
-        // Full-width scroll (scrollbar hugs the window edge); inner content is
-        // centered and width-capped per branch below. `min-h-0` lets this
-        // basis-0 flex child shrink to 0 so the composer footer can take the
-        // space (and scroll) on short windows (#3785).
-        className="flex-1 min-h-0 overflow-y-auto">
-        {isLoadingMessages ? (
-          <div className="mx-auto w-full max-w-[48.75rem] space-y-4 px-5 py-4">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
-                <div
-                  className={`h-12 rounded-2xl animate-pulse bg-surface-subtle ${
-                    i % 2 === 0 ? 'w-2/3' : 'w-1/2'
-                  }`}
-                />
-              </div>
-            ))}
-          </div>
-        ) : messagesError ? (
-          <div className="flex-1 flex flex-col items-center justify-center h-full">
-            <svg
-              className="w-8 h-8 text-coral-500/70 mb-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-            <p className="text-sm text-content-faint mb-1">{t('chat.failedToLoadMessages')}</p>
-            <p className="text-xs text-content-secondary mb-3 text-center">{messagesError}</p>
-            <button
-              type="button"
-              data-analytics-id="chat-messages-reload"
-              onClick={() => window.location.reload()}
-              className="text-xs text-primary-400 hover:text-primary-300 transition-colors">
-              {t('common.reload')}
-            </button>
-          </div>
-        ) : hasVisibleMessages || hasTaskBoard || hasLiveAgentActivity ? (
-          <div
-            data-testid="chat-message-list"
-            className={`mx-auto w-full max-w-[48.75rem] space-y-3 px-5 pt-4 ${
-              isSidebar ? 'pb-4' : ''
-            }`}
-            // Page variant: reserve room for the absolutely-positioned floating
-            // composer footer so its tail stays visible. Tracks the footer's
-            // measured height (+16px gap) instead of a static `pb-32`, so the
-            // queued-followups panel and other dynamic footer content never
-            // overlap the last message (#4268).
-            style={!isSidebar ? { paddingBottom: composerFooterHeight + 16 } : undefined}>
-            {timelineMessages.map(msg => {
-              const isAgentTextMode = msg.sender === 'agent' && agentMessageViewMode === 'text';
-              // Parsed once per message: for current messages (extraMetadata
-              // present, or agent messages) msg.content already has no markers,
-              // so this is a no-op. For legacy persisted user messages with raw
-              // [IMAGE:...]/[FILE:...] markers and no extraMetadata, this is
-              // what keeps the marker text out of both the rendered bubble and
-              // the copy-to-clipboard action.
-              const parsedContent = parseMessageImages(msg.content ?? '');
-              const pastTurn = pastTurnAnchors[msg.id];
-              return (
-                <Fragment key={msg.id}>
-                  {/* Past-turn process trail (Phase 5 + restore-fidelity fix 1):
-                      each older settled turn's interleaved reasoning/narration +
-                      tool steps (and restored sub-agent transcripts), collapsed,
-                      above the answer it produced. Falls back to tool-cards-only
-                      for legacy snapshots with no persisted transcript. */}
-                  {pastTurn ? (
-                    <div data-testid="past-turn-insights">
-                      <PastTurnInsights
-                        entries={pastTurn.entries}
-                        transcript={pastTurn.transcript}
-                      />
-                    </div>
-                  ) : null}
-                  <div>
-                    <div
-                      className={`group/msg flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-                      <div
-                        className={`relative ${
-                          isAgentTextMode ? 'w-full max-w-full' : 'w-fit max-w-[75%]'
-                        }`}>
-                        {msg.sender === 'agent' ? (
-                          <div className="space-y-1">
-                            <div className="relative space-y-1">
-                              {agentMessageViewMode === 'text' ? (
-                                <AgentMessageText content={msg.content} />
-                              ) : (
-                                splitAgentMessageIntoBubbles(msg.content).map(
-                                  (segment, index, parts) => {
-                                    const position: AgentBubblePosition =
-                                      parts.length === 1
-                                        ? 'single'
-                                        : index === 0
-                                          ? 'first'
-                                          : index === parts.length - 1
-                                            ? 'last'
-                                            : 'middle';
-
-                                    return (
-                                      <AgentMessageBubble
-                                        key={`${msg.id}:${index}`}
-                                        content={segment}
-                                        position={position}
-                                      />
-                                    );
-                                  }
-                                )
-                              )}
-                              {/* Reaction affordance — the closed "+", the open picker,
-                                and the resulting reaction chips all live here, tucked
-                                onto the bubble's bottom-left corner so the control
-                                never jumps to a separate row below the timestamp. */}
-                              {latestVisibleMessage?.id === msg.id &&
-                                (() => {
-                                  const myReactions =
-                                    (msg.extraMetadata?.myReactions as string[] | undefined) ?? [];
-                                  const pickerOpen = reactionPickerMsgId === msg.id;
-                                  return (
-                                    <div className="absolute -bottom-2 left-3 z-10 flex items-center gap-1">
-                                      {myReactions.map(emoji => (
-                                        <button
-                                          key={emoji}
-                                          type="button"
-                                          data-analytics-id="chat-message-reaction-remove"
-                                          onClick={() =>
-                                            selectedThreadId &&
-                                            void dispatch(
-                                              persistReaction({
-                                                threadId: selectedThreadId,
-                                                messageId: msg.id,
-                                                emoji,
-                                              })
-                                            )
-                                          }
-                                          className="flex items-center rounded-full border border-primary-200 bg-primary-100 px-1.5 text-xs leading-[1.5] shadow-sm transition-colors hover:bg-primary-200 dark:border-primary-400/40 dark:bg-primary-500/25"
-                                          title={t('chat.removeReaction').replace(
-                                            '{emoji}',
-                                            emoji
-                                          )}>
-                                          {emoji}
-                                        </button>
-                                      ))}
-                                      {pickerOpen ? (
-                                        <div className="flex items-center gap-0.5 rounded-full bg-surface px-1 py-0.5 shadow-sm ring-1 ring-stone-200 dark:ring-neutral-700">
-                                          {['👍', '❤️', '😂', '🔥', '👀', '🎯'].map(emoji => (
-                                            <button
-                                              key={emoji}
-                                              type="button"
-                                              data-analytics-id="chat-message-reaction-pick"
-                                              onClick={() => {
-                                                if (selectedThreadId) {
-                                                  void dispatch(
-                                                    persistReaction({
-                                                      threadId: selectedThreadId,
-                                                      messageId: msg.id,
-                                                      emoji,
-                                                    })
-                                                  );
-                                                }
-                                                setReactionPickerMsgId(null);
-                                              }}
-                                              className="rounded px-0.5 text-sm transition-transform hover:scale-125"
-                                              title={emoji}>
-                                              {emoji}
-                                            </button>
-                                          ))}
-                                          <button
-                                            type="button"
-                                            data-analytics-id="chat-message-reaction-close"
-                                            onClick={() => setReactionPickerMsgId(null)}
-                                            className="ml-0.5 px-0.5 text-xs text-content-secondary hover:text-content-faint dark:hover:text-content-faint">
-                                            ✕
-                                          </button>
-                                        </div>
-                                      ) : (
-                                        <button
-                                          type="button"
-                                          data-analytics-id="chat-message-reaction-open"
-                                          onClick={() => setReactionPickerMsgId(msg.id)}
-                                          className="flex h-[18px] items-center rounded-full bg-surface px-1.5 text-xs leading-none text-content-muted opacity-0 shadow-sm ring-1 ring-stone-200 transition-opacity hover:bg-surface-hover hover:text-content-secondary group-hover/msg:opacity-100 dark:ring-neutral-700"
-                                          title={t('chat.addReaction')}
-                                          aria-label={t('chat.addReaction')}>
-                                          +
-                                        </button>
-                                      )}
-                                    </div>
-                                  );
-                                })()}
-                            </div>
-                            {/* Stopped marker (#4862): the partial reply that was
-                                preserved when the user hit Stop / ESC mid-stream. */}
-                            {msg.extraMetadata?.stopped === true && (
-                              <p
-                                data-testid="stopped-marker"
-                                className="flex items-center gap-1 px-1 text-[10px] font-medium text-content-faint">
-                                <svg
-                                  className="h-2.5 w-2.5"
-                                  fill="currentColor"
-                                  viewBox="0 0 24 24"
-                                  aria-hidden>
-                                  <rect x="6" y="6" width="12" height="12" rx="1.5" />
-                                </svg>
-                                {t('chat.stoppedByUser')}
-                              </p>
-                            )}
-                            {(() => {
-                              const raw = msg.extraMetadata?.citations;
-                              if (!Array.isArray(raw)) return null;
-                              const citations = raw.filter(
-                                (item): item is MessageCitation =>
-                                  typeof item === 'object' &&
-                                  item !== null &&
-                                  typeof (item as MessageCitation).id === 'string' &&
-                                  typeof (item as MessageCitation).key === 'string' &&
-                                  typeof (item as MessageCitation).snippet === 'string' &&
-                                  typeof (item as MessageCitation).timestamp === 'string'
-                              );
-                              if (citations.length === 0) return null;
-                              return <CitationChips citations={citations} />;
-                            })()}
-                            {latestVisibleMessage?.id === msg.id && (
-                              <p className="px-1 text-[10px] text-content-faint">
-                                {formatRelativeTime(msg.createdAt)}
-                              </p>
-                            )}
-                          </div>
-                        ) : (
-                          <div className="flex flex-col items-end gap-1">
-                            {(() => {
-                              const displayText = parsedContent.text;
-                              const dataUris = (
-                                Array.isArray(msg.extraMetadata?.attachmentDataUris)
-                                  ? (msg.extraMetadata.attachmentDataUris as string[])
-                                  : parsedContent.dataUris
-                              ).filter(src => SAFE_IMAGE_DATA_URI_RE.test(src));
-                              const hasImages = dataUris.length > 0;
-                              // Document attachments carry no image data-URI (only
-                              // images do); surface them as filename chips from the
-                              // persisted attachmentKinds/attachmentNames metadata.
-                              const kinds = Array.isArray(msg.extraMetadata?.attachmentKinds)
-                                ? (msg.extraMetadata.attachmentKinds as string[])
-                                : [];
-                              const names = Array.isArray(msg.extraMetadata?.attachmentNames)
-                                ? (msg.extraMetadata.attachmentNames as string[])
-                                : [];
-                              const fileNames = kinds
-                                .map((k, i) => (k === 'file' ? names[i] : null))
-                                .filter((n): n is string => Boolean(n));
-                              const posters = Array.isArray(msg.extraMetadata?.attachmentPosters)
-                                ? (msg.extraMetadata.attachmentPosters as (string | null)[])
-                                : [];
-                              const videoItems = kinds
-                                .map((k, i) =>
-                                  k === 'video'
-                                    ? { name: names[i] ?? '', poster: posters[i] ?? null }
-                                    : null
-                                )
-                                .filter((v): v is { name: string; poster: string | null } =>
-                                  Boolean(v)
-                                );
-                              const showTime = latestVisibleMessage?.id === msg.id;
-                              return (
-                                <>
-                                  {hasImages && (
-                                    <div className="flex flex-wrap gap-1.5 justify-end">
-                                      {dataUris.map((uri, i) => (
-                                        <AttachmentImage key={i} dataUri={uri} />
-                                      ))}
-                                    </div>
-                                  )}
-                                  {videoItems.length > 0 && (
-                                    <div className="flex flex-wrap gap-1.5 justify-end">
-                                      {videoItems.map((video, i) => (
-                                        <div
-                                          key={i}
-                                          className="relative flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2.5 py-1.5 text-xs text-content-secondary max-w-[220px]">
-                                          {video.poster ? (
-                                            <div className="relative w-10 h-10 flex-shrink-0">
-                                              <img
-                                                src={video.poster}
-                                                alt=""
-                                                className="w-10 h-10 rounded object-cover"
-                                              />
-                                              <span className="absolute inset-0 flex items-center justify-center">
-                                                <svg
-                                                  className="w-4 h-4 text-white drop-shadow"
-                                                  fill="currentColor"
-                                                  viewBox="0 0 24 24">
-                                                  <path d="M8 5v14l11-7z" />
-                                                </svg>
-                                              </span>
-                                            </div>
-                                          ) : (
-                                            <svg
-                                              className="w-4 h-4 flex-shrink-0 text-content-muted"
-                                              fill="none"
-                                              stroke="currentColor"
-                                              viewBox="0 0 24 24">
-                                              <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={1.8}
-                                                d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 6h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z"
-                                              />
-                                            </svg>
-                                          )}
-                                          <span className="truncate font-medium">{video.name}</span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  )}
-                                  {fileNames.length > 0 && (
-                                    <div className="flex flex-wrap gap-1.5 justify-end">
-                                      {fileNames.map((name, i) => (
-                                        <div
-                                          key={i}
-                                          className="flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2.5 py-1.5 text-xs text-content-secondary max-w-[220px]">
-                                          <svg
-                                            className="w-4 h-4 flex-shrink-0 text-content-muted"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path
-                                              strokeLinecap="round"
-                                              strokeLinejoin="round"
-                                              strokeWidth={1.8}
-                                              d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
-                                            />
-                                            <path
-                                              strokeLinecap="round"
-                                              strokeLinejoin="round"
-                                              strokeWidth={1.8}
-                                              d="M14 2v6h6"
-                                            />
-                                          </svg>
-                                          <span className="truncate font-medium">{name}</span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  )}
-                                  {(displayText || showTime) && (
-                                    <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-content-inverted rounded-br-md break-words overflow-hidden">
-                                      {displayText && (
-                                        <BubbleMarkdown content={displayText} tone="user" />
-                                      )}
-                                      {showTime && (
-                                        <p
-                                          className={`${displayText ? 'mt-1' : ''} text-[10px] text-white/60`}>
-                                          {formatRelativeTime(msg.createdAt)}
-                                        </p>
-                                      )}
-                                    </div>
-                                  )}
-                                </>
-                              );
-                            })()}
-                          </div>
-                        )}
-                        <button
-                          type="button"
-                          data-analytics-id="chat-message-copy"
-                          onClick={() => handleCopyMessage(msg.id, parsedContent.text)}
-                          className={`absolute -top-1 ${
-                            isAgentTextMode
-                              ? 'right-0'
-                              : msg.sender === 'user'
-                                ? '-left-8'
-                                : '-right-8'
-                          } p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-surface-hover dark:bg-surface-muted dark:hover:bg-surface-muted text-content-faint hover:text-content-secondary transition-all`}
-                          title={t('chat.copyResponse')}>
-                          {copiedMessageId === msg.id ? (
-                            <svg
-                              className="w-3.5 h-3.5 text-sage-500"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24">
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M5 13l4 4L19 7"
-                              />
-                            </svg>
-                          ) : (
-                            <svg
-                              className="w-3.5 h-3.5"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24">
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                              />
-                            </svg>
-                          )}
-                        </button>
-                        {msg.sender === 'agent' && (
-                          <ShareMessageButton
-                            content={parsedContent.text}
-                            agentName={shareAgentName}
-                            threadId={selectedThreadId ?? undefined}
-                            className={`absolute top-6 ${isAgentTextMode ? 'right-0' : '-right-8'}`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  {msg.id === lastUserMessageId ? agentInsights : null}
-                </Fragment>
-              );
-            })}
-            {isSending &&
-              // Suppress the legacy 3-dot placeholder once streaming
-              // output (visible text or thinking) has started — the
-              // streaming preview bubble below takes over as the
-              // activity indicator.
-              !(
-                (selectedStreamingAssistant?.content.length ?? 0) > 0 ||
-                (selectedStreamingAssistant?.thinking.length ?? 0) > 0
-              ) && (
-                <div className="flex justify-start">
-                  <div className="bg-surface-strong/80 dark:bg-surface-muted rounded-2xl rounded-bl-md px-4 py-3">
-                    <div className="flex items-center gap-1">
-                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:0ms]" />
-                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:150ms]" />
-                      <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:300ms]" />
-                    </div>
-                  </div>
-                </div>
-              )}
-            {/* Streaming assistant preview — compact trailing tail of the
-                  in-flight response. Rendered as plain text (not Markdown) to
-                  avoid jitter from partially-parsed fences. The final bubble
-                  replaces this via addInferenceResponse on chat_done. */}
-            {selectedStreamingAssistant &&
-              (selectedStreamingAssistant.thinking.length > 0 ||
-                selectedStreamingAssistant.content.length > 0) && (
-                <div className="flex justify-start">
-                  <div className="relative w-fit max-w-[75%]">
-                    {selectedStreamingAssistant.thinking.length > 0 && (
-                      <details className="mb-1.5 bg-surface-subtle rounded-lg px-3 py-1.5 text-xs text-content-secondary open:bg-stone-100 dark:bg-surface-muted dark:open:bg-neutral-800">
-                        <summary className="cursor-pointer select-none flex items-center gap-1.5">
-                          <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
-                          <span>{t('chat.thinking')}</span>
-                        </summary>
-                        <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-content-muted">
-                          {selectedStreamingAssistant.thinking.slice(-STREAMING_PREVIEW_CHARS)}
-                        </pre>
-                      </details>
-                    )}
-                    {selectedStreamingAssistant.content.length > 0 && (
-                      <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content">
-                        <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
-                          {selectedStreamingAssistant.content.length > STREAMING_PREVIEW_CHARS && (
-                            <span className="text-content-faint">…</span>
-                          )}
-                          {selectedStreamingAssistant.content.slice(-STREAMING_PREVIEW_CHARS)}
-                          <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            {/* Interrupted turn's partial answer (restore-fidelity fix 2):
-                  a settled, marked-interrupted bubble surfaced on restore. Only
-                  when NOT streaming live (the buffer is cleared by any live turn
-                  in the slice; this guard is belt-and-braces). */}
-            {!isSending && selectedInterruptedAssistant ? (
-              <InterruptedAnswer
-                content={selectedInterruptedAssistant.content}
-                thinking={selectedInterruptedAssistant.thinking}
-              />
-            ) : null}
-            {/* Parallel (forked) branch streams — concurrent turns on this
-                  thread, each its own labeled bubble so they don't collide with
-                  the primary stream above. */}
-            {selectedParallelStreams.map(
-              branch =>
-                (branch.content.length > 0 || branch.thinking.length > 0) && (
-                  <div key={branch.requestId} className="flex justify-start">
-                    <div className="relative w-fit max-w-[75%]">
-                      <div className="mb-1 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-primary-500 dark:text-primary-400">
-                        <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
-                        <span>{t('chat.parallelBranchLabel')}</span>
-                      </div>
-                      {branch.content.length > 0 && (
-                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content border-l-2 border-primary-400/60">
-                          <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
-                            {branch.content.length > STREAMING_PREVIEW_CHARS && (
-                              <span className="text-content-faint">…</span>
-                            )}
-                            {branch.content.slice(-STREAMING_PREVIEW_CHARS)}
-                            <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-            )}
-            {/* Inference status indicator.
-                  For the tool_use / subagent phases this line just restates the
-                  active row already shown in the agentic-task-insights timeline,
-                  so suppress it once that timeline is on screen — keep it only
-                  for the `thinking` phase (which has no timeline row yet) or when
-                  there is no timeline to fall back on. */}
-            {selectedInferenceStatus &&
-              (selectedInferenceStatus.phase === 'thinking' ||
-                selectedThreadToolTimeline.length === 0) && (
-                <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-content-muted">
-                  <span className="inline-block w-2 h-2 rounded-full bg-primary-400 animate-pulse" />
-                  <span>
-                    {selectedInferenceStatus.phase === 'thinking' &&
-                      (selectedInferenceStatus.iteration > 0
-                        ? t('chat.thinkingIteration').replace(
-                            '{n}',
-                            String(selectedInferenceStatus.iteration)
-                          )
-                        : t('chat.thinkingDots'))}
-                    {selectedInferenceStatus.phase === 'tool_use' &&
-                      `${
-                        formatTimelineEntry(
-                          activeToolTimelineEntry ?? {
-                            id: 'active-tool',
-                            name: selectedInferenceStatus.activeTool ?? 'tool',
-                            round: selectedInferenceStatus.iteration,
-                            seq: 0,
-                            status: 'running',
-                          }
-                        ).title
-                      }...`}
-                    {selectedInferenceStatus.phase === 'subagent' &&
-                      `${
-                        formatTimelineEntry(
-                          activeSubagentTimelineEntry ?? {
-                            id: 'active-subagent',
-                            name: `subagent:${selectedInferenceStatus.activeSubagent ?? ''}`,
-                            round: selectedInferenceStatus.iteration,
-                            seq: 0,
-                            status: 'running',
-                          }
-                        ).title
-                      }...`}
-                  </span>
-                </div>
-              )}
-            {/* The "Agentic task insights" panel is rendered inline *above* the
-                latest answer (right after the latest turn's user message) so
-                processing reads before the result. `proactiveInsightsFallback`
-                (defined above, near `agentInsights`) covers the rare thread
-                with no user message at all — see its doc comment for the
-                per-thread keying that fix keeps this remount-safe. */}
-            {proactiveInsightsFallback}
-            <div ref={messagesEndRef} />
-          </div>
-        ) : isNewWindow ? (
-          <ChatNewWindowHero />
-        ) : (
-          <div className="flex-1 flex items-center justify-center h-full">
-            <p className="text-sm text-content-secondary">{t('chat.noMessages')}</p>
-          </div>
-        )}
-      </div>
+      <ChatThreadView
+        ref={threadViewRef}
+        threadId={selectedThreadId ?? null}
+        variant={variant}
+        bottomPadding={!isSidebar ? composerFooterHeight + 16 : undefined}
+        hasFooterContent={hasTaskBoard}
+        isLoading={isLoadingMessages}
+        loadError={messagesError}
+        emptyContent={
+          isNewWindow ? (
+            <ChatNewWindowHero />
+          ) : (
+            <div className="flex-1 flex items-center justify-center h-full">
+              <p className="text-sm text-content-secondary">{t('chat.noMessages')}</p>
+            </div>
+          )
+        }
+        shareAgentName={shareAgentName}
+        scrollResetKey={location.pathname}
+        pendingSendActive={selectedThreadId ? pendingSendingThreadIds.has(selectedThreadId) : false}
+      />
 
       {/* Full-width fade so messages dissolve into the background (black/white
           per theme) behind the floating composer. Page variant only. */}
@@ -3322,7 +2455,7 @@ const Conversations = ({
                   type="button"
                   data-testid="background-processes-toggle"
                   data-analytics-id="chat-header-background-processes"
-                  onClick={() => setShowBackgroundProcesses(true)}
+                  onClick={() => threadViewRef.current?.openBackgroundProcesses()}
                   aria-label={t('conversations.backgroundTasks.title')}
                   title={
                     backgroundProcesses.length > 0
@@ -3398,50 +2531,6 @@ const Conversations = ({
         modal={deleteModal}
         onClose={() => setDeleteModal(prev => ({ ...prev, isOpen: false }))}
       />
-      <BackgroundProcessesPanel
-        open={showBackgroundProcesses}
-        processes={backgroundProcesses}
-        onClose={() => setShowBackgroundProcesses(false)}
-        onOpenProcess={taskId => {
-          setShowBackgroundProcesses(false);
-          setOpenSubagentTaskId(taskId);
-        }}
-      />
-      <SubagentDrawer
-        key={openSubagentTaskId ?? 'none'}
-        subagent={openSubagentEntry?.subagent ?? null}
-        status={openSubagentEntry?.status}
-        onCancel={
-          openSubagentEntry?.subagent && selectedThreadId
-            ? async () => {
-                const taskId = openSubagentEntry.subagent!.taskId;
-                const result = await subagentApi.cancel(taskId);
-                // Only flip the row when something was actually aborted — a
-                // cancelled=false result means the run already finished/unknown,
-                // and overwriting its real terminal state would hide it. No
-                // terminal socket event arrives for an aborted run, so the
-                // optimistic mark is what surfaces the cancellation (the notice
-                // itself reaches chat via the idle-gated delivery path).
-                if (result.cancelled) {
-                  dispatch(
-                    markSubagentCancelled({ threadId: selectedThreadId, taskId: result.taskId })
-                  );
-                }
-              }
-            : undefined
-        }
-        onClose={() => setOpenSubagentTaskId(null)}
-      />
-      <AgentProcessSourcePanel
-        open={showProcessSource}
-        entries={selectedThreadToolTimeline}
-        transcript={selectedThreadProcessing}
-        scopedEntry={scopedDetailEntry}
-        onClose={() => {
-          setShowProcessSource(false);
-          setScopedDetailEntryId(null);
-        }}
-      />
     </div>
   );
 };
diff --git a/app/src/features/conversations/components/ChatThreadView.test.tsx b/app/src/features/conversations/components/ChatThreadView.test.tsx
new file mode 100644
index 000000000..e2bffd5c7
--- /dev/null
+++ b/app/src/features/conversations/components/ChatThreadView.test.tsx
@@ -0,0 +1,233 @@
+/**
+ * Focused behavior tests for the extracted transcript scroll body. Mirrors
+ * the store-mounting conventions used by
+ * `src/pages/__tests__/Conversations.render.test.tsx` (the home chat's own
+ * smoke suite), but scoped to `ChatThreadView` in isolation so a second host
+ * (e.g. the Workflow Copilot) can be confident the component works when
+ * driven purely by its `threadId` prop rather than the global
+ * `state.thread.selectedThreadId`.
+ */
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { Provider } from 'react-redux';
+import { describe, expect, it, vi } from 'vitest';
+
+import chatRuntimeReducer from '../../../store/chatRuntimeSlice';
+import themeReducer from '../../../store/themeSlice';
+import threadReducer from '../../../store/threadSlice';
+import type { Thread, ThreadMessage } from '../../../types/thread';
+import { ChatThreadView } from './ChatThreadView';
+
+// useStickToBottom returns refs; mock it so layout-effects don't fire in
+// jsdom (same stub the home-chat render suite uses).
+vi.mock('../../../hooks/useStickToBottom', () => ({
+  useStickToBottom: vi.fn(() => ({ containerRef: { current: null }, endRef: { current: null } })),
+}));
+
+function makeThread(overrides: Partial<Thread> = {}): Thread {
+  return {
+    id: 't-1',
+    title: 'Test thread',
+    chatId: null,
+    isActive: false,
+    messageCount: 0,
+    lastMessageAt: '2026-01-01T00:00:00.000Z',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    labels: ['general'],
+    ...overrides,
+  };
+}
+
+function buildStore(preload: Record<string, unknown> = {}) {
+  return configureStore({
+    reducer: combineReducers({
+      thread: threadReducer,
+      chatRuntime: chatRuntimeReducer,
+      theme: themeReducer,
+    }),
+    preloadedState: preload as never,
+  });
+}
+
+const emptyThreadState = {
+  threads: [],
+  selectedThreadId: null,
+  activeThreadIds: {},
+  welcomeThreadId: null,
+  messagesByThreadId: {},
+  messages: [],
+  isLoadingThreads: false,
+  isLoadingMessages: false,
+  messagesError: null,
+};
+
+function renderThreadView(
+  props: Partial<ComponentProps<typeof ChatThreadView>> & { threadId: string | null },
+  preload: Record<string, unknown> = {}
+) {
+  const store = buildStore(preload);
+  render(
+    <Provider store={store}>
+      <ChatThreadView {...props} />
+    </Provider>
+  );
+  return store;
+}
+
+describe('ChatThreadView', () => {
+  it('renders the chat-messages-scroll container', () => {
+    renderThreadView({ threadId: null }, { thread: emptyThreadState });
+
+    expect(screen.getByTestId('chat-messages-scroll')).toBeInTheDocument();
+  });
+
+  it('shows emptyContent when the thread has no messages, footer content, or live activity', () => {
+    const thread = makeThread({ id: 't-empty' });
+    renderThreadView(
+      { threadId: thread.id, emptyContent: <p>Nothing here yet</p> },
+      {
+        thread: {
+          ...emptyThreadState,
+          threads: [thread],
+          selectedThreadId: thread.id,
+          messagesByThreadId: { [thread.id]: [] },
+        },
+      }
+    );
+
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
+    expect(screen.queryByTestId('chat-message-list')).not.toBeInTheDocument();
+  });
+
+  it('renders a user and an agent message for the given threadId', () => {
+    const thread = makeThread({ id: 't-msgs' });
+    const messages: ThreadMessage[] = [
+      {
+        id: 'm-user',
+        sender: 'user',
+        type: 'text',
+        content: 'Hello there',
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+      {
+        id: 'm-agent',
+        sender: 'agent',
+        type: 'text',
+        content: 'General Kenobi',
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:01:00.000Z',
+      },
+    ];
+
+    renderThreadView(
+      { threadId: thread.id },
+      {
+        thread: {
+          ...emptyThreadState,
+          threads: [thread],
+          selectedThreadId: thread.id,
+          messagesByThreadId: { [thread.id]: messages },
+        },
+      }
+    );
+
+    expect(screen.getByTestId('chat-message-list')).toBeInTheDocument();
+    expect(screen.getByText('Hello there')).toBeInTheDocument();
+    expect(screen.getByText('General Kenobi')).toBeInTheDocument();
+  });
+
+  it('reads messages by the threadId prop, not a global selected thread', () => {
+    // Two threads hydrated in the store; only the prop-driven thread's
+    // messages should render — proving the component doesn't fall back to
+    // `state.thread.selectedThreadId`.
+    const threadA = makeThread({ id: 't-a' });
+    const threadB = makeThread({ id: 't-b' });
+    const messagesA: ThreadMessage[] = [
+      {
+        id: 'a-1',
+        sender: 'user',
+        type: 'text',
+        content: 'Message in thread A',
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+    ];
+    const messagesB: ThreadMessage[] = [
+      {
+        id: 'b-1',
+        sender: 'user',
+        type: 'text',
+        content: 'Message in thread B',
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+    ];
+
+    renderThreadView(
+      { threadId: threadB.id },
+      {
+        thread: {
+          ...emptyThreadState,
+          threads: [threadA, threadB],
+          // Deliberately select A globally — the component must still
+          // render B's messages because it reads `threadId` prop, not
+          // `selectedThreadId`.
+          selectedThreadId: threadA.id,
+          messagesByThreadId: { [threadA.id]: messagesA, [threadB.id]: messagesB },
+        },
+      }
+    );
+
+    expect(screen.getByText('Message in thread B')).toBeInTheDocument();
+    expect(screen.queryByText('Message in thread A')).not.toBeInTheDocument();
+  });
+
+  it('B25: unwraps a raw tool-call envelope agent message to clean text, never raw JSON', () => {
+    // A `workflow_builder` turn that both talks AND calls a tool can land in
+    // the transcript as the provider wire-format `{ content, tool_calls }`
+    // envelope. The shared renderer (used by both the home chat and the
+    // workflow copilot) must show only the human text — never the raw JSON.
+    const thread = makeThread({ id: 't-envelope' });
+    const messages: ThreadMessage[] = [
+      {
+        id: 'm-user',
+        sender: 'user',
+        type: 'text',
+        content: 'build me a Slack digest',
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+      {
+        id: 'm-agent',
+        sender: 'agent',
+        type: 'text',
+        content: JSON.stringify({
+          content: "Here's the workflow I propose.",
+          tool_calls: [{ id: 'call_1', name: 'propose_workflow', arguments: '{"nodes":[]}' }],
+        }),
+        extraMetadata: {},
+        createdAt: '2026-01-01T00:01:00.000Z',
+      },
+    ];
+
+    renderThreadView(
+      { threadId: thread.id },
+      {
+        thread: {
+          ...emptyThreadState,
+          threads: [thread],
+          selectedThreadId: thread.id,
+          messagesByThreadId: { [thread.id]: messages },
+        },
+      }
+    );
+
+    const list = screen.getByTestId('chat-message-list');
+    expect(list).toHaveTextContent("Here's the workflow I propose.");
+    // The raw envelope must never reach the DOM as text.
+    expect(list).not.toHaveTextContent('tool_calls');
+    expect(list).not.toHaveTextContent('"nodes":[]');
+  });
+});
diff --git a/app/src/features/conversations/components/ChatThreadView.tsx b/app/src/features/conversations/components/ChatThreadView.tsx
new file mode 100644
index 000000000..3fcded12b
--- /dev/null
+++ b/app/src/features/conversations/components/ChatThreadView.tsx
@@ -0,0 +1,1131 @@
+import {
+  forwardRef,
+  Fragment,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+
+import { useStickToBottom } from '../../../hooks/useStickToBottom';
+import { parseMessageImages } from '../../../lib/attachments';
+import { unwrapToolCallEnvelope } from '../../../lib/chat/toolCallEnvelope';
+import { useT } from '../../../lib/i18n/I18nContext';
+import { subagentApi } from '../../../services/api/subagentApi';
+import {
+  markSubagentCancelled,
+  type ProcessingTranscriptItem,
+  type ToolTimelineEntry,
+} from '../../../store/chatRuntimeSlice';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { persistReaction } from '../../../store/threadSlice';
+import type { ThreadMessage } from '../../../types/thread';
+import { splitAgentMessageIntoBubbles } from '../../../utils/agentMessageBubbles';
+import { formatTimelineEntry } from '../../../utils/toolTimelineFormatting';
+import { ShareMessageButton } from '../../share/ShareMessageButton';
+import { buildThreadTimeline } from '../timeline/selectors';
+import { type AgentBubblePosition, formatRelativeTime } from '../utils/format';
+import { AgentMessageBubble, AgentMessageText, BubbleMarkdown } from './AgentMessageBubble';
+import { AgentProcessSourcePanel } from './AgentProcessSourcePanel';
+import { BackgroundProcessesPanel, selectBackgroundProcesses } from './BackgroundProcessesPanel';
+import { CitationChips, type MessageCitation } from './CitationChips';
+import { InterruptedAnswer } from './InterruptedAnswer';
+import { PastTurnInsights } from './PastTurnInsights';
+import { SubagentDrawer } from './SubagentDrawer';
+import { ToolTimelineBlock } from './ToolTimelineBlock';
+
+/** Maximum trailing characters rendered in the live-streaming assistant
+ *  preview bubble. The full response is revealed via `addInferenceResponse`
+ *  on `chat_done` — this is purely a ticker-tape affordance to signal
+ *  progress without jumping the scroll position as tokens arrive. */
+const STREAMING_PREVIEW_CHARS = 120;
+
+// Matches only well-formed base64 image data URIs — guards against an
+// `<img src>` XSS vector if a persisted message ever carried a crafted
+// value in `attachmentDataUris`/legacy `[IMAGE:...]` markers.
+const SAFE_IMAGE_DATA_URI_RE =
+  /^data:(image\/(?:png|jpe?g|gif|webp|bmp));base64,([a-z0-9+/=\s]+)$/i;
+const EMPTY_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+
+function imageDataUriToObjectUrl(src: string): string | null {
+  const match = SAFE_IMAGE_DATA_URI_RE.exec(src);
+  if (!match) return null;
+  try {
+    const mime = match[1];
+    const binary = atob(match[2].replace(/\s/g, ''));
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i += 1) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return URL.createObjectURL(new Blob([bytes], { type: mime }));
+  } catch {
+    return null;
+  }
+}
+
+function AttachmentImage({ dataUri }: { dataUri: string }) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const nextUrl = imageDataUriToObjectUrl(dataUri);
+    setObjectUrl(nextUrl);
+    return () => {
+      if (nextUrl) URL.revokeObjectURL(nextUrl);
+    };
+  }, [dataUri]);
+
+  return (
+    <img
+      src={objectUrl ?? EMPTY_IMAGE_SRC}
+      alt=""
+      className="max-w-[200px] max-h-[200px] rounded-2xl object-cover"
+    />
+  );
+}
+
+// Stable empty reference for a thread with no persisted messages yet, so the
+// selector below keeps the same identity when the slice field is absent
+// (narrow test stores) or the thread hasn't hydrated any messages.
+const EMPTY_MESSAGES: ThreadMessage[] = [];
+
+// Stable empty reference so the per-thread past-turn timelines map keeps the
+// same identity when the slice field is absent (narrow test stores).
+const EMPTY_TURN_TIMELINES: Record<string, ToolTimelineEntry[]> = {};
+// Sibling stable empty for the per-thread past-turn processing transcripts map
+// (restore-fidelity fix 1).
+const EMPTY_TURN_TRANSCRIPTS: Record<string, ProcessingTranscriptItem[]> = {};
+// Stable empty transcript for a past turn that has tool rows but no persisted
+// reasoning/narration trail (legacy snapshot), so `PastTurnInsights` falls back
+// to the tool-only view without allocating a fresh array each render.
+const EMPTY_TRANSCRIPT: ProcessingTranscriptItem[] = [];
+// Stable empty tool-row list for a transcript-only past turn (agent thought /
+// narrated but ran no tools).
+const EMPTY_TRANSCRIPT_ENTRIES: ToolTimelineEntry[] = [];
+
+export interface ChatThreadViewHandle {
+  /** Opens the detached background sub-agents panel — called from the host
+   *  header's background-processes badge (`Conversations`' own copy of the
+   *  badge, which needs to stay in the header so it renders regardless of
+   *  scroll position). */
+  openBackgroundProcesses(): void;
+}
+
+export interface ChatThreadViewProps {
+  /** Thread whose transcript is rendered. `null` renders the empty state
+   *  (no thread selected). */
+  threadId: string | null;
+  /** `page` (default) is the home chat's floating-composer layout. `sidebar`
+   *  drops the bottom-padding-reservation trick (the composer is in normal
+   *  flow) and always applies a flat `pb-4`. */
+  variant?: 'page' | 'sidebar';
+  /** Page variant floats its footer over the scroll area; the host passes
+   *  its measured `composerFooterHeight + 16` so the message list reserves
+   *  matching bottom padding. Sidebar variant omits this (undefined — the
+   *  message list falls back to a flat `pb-4`). */
+  bottomPadding?: number;
+  /** The host's footer has pinned content (e.g. home's task board) that
+   *  should keep the scroll container in "has content" layout even when
+   *  there are no visible messages and no live agent activity yet. */
+  hasFooterContent?: boolean;
+  /** The host's thread-load state, so the loading skeleton renders while a
+   *  thread's messages are being fetched. Omit for hosts that hydrate
+   *  synchronously (no skeleton). */
+  isLoading?: boolean;
+  loadError?: string | null;
+  /** Rendered in place of the transcript when the thread has no visible
+   *  messages, no footer content, and no live agent activity. */
+  emptyContent?: ReactNode;
+  /** Agent display name threaded into the assistant message's share button. */
+  shareAgentName?: string;
+  /** Reset key for the auto-stick-to-bottom scroll behavior (see
+   *  `useStickToBottom`). Pass a value that changes when the surrounding
+   *  layout/route changes shape (home passes `location.pathname`). */
+  scrollResetKey?: string;
+  /** ORed into the in-flight check alongside the persisted inference-turn
+   *  lifecycle — hosts that track their own "send dispatched, not yet
+   *  accepted" window (home's `pendingSendingThreadIds`) pass it here so a
+   *  send appears in-flight immediately, before the first socket event
+   *  lands. */
+  pendingSendActive?: boolean;
+}
+
+/**
+ * The chat transcript scroll body: message list (with reactions, citations,
+ * copy/share affordances, past-turn insight trails, live streaming preview,
+ * inference status line, and the "Agentic task insights" panel), plus the
+ * background-processes / sub-agent-drawer / agent-process-source modals that
+ * are driven entirely by transcript-local state.
+ *
+ * Extracted from `Conversations.tsx` (the home chat) so a second surface
+ * (the Workflow Copilot, on its own dedicated thread) can reuse the exact
+ * same rich rendering. Everything here is keyed off the `threadId` prop
+ * rather than the global `state.thread.selectedThreadId` — all state reads
+ * are per-thread Redux slices already keyed by thread id.
+ */
+export const ChatThreadView = forwardRef<ChatThreadViewHandle, ChatThreadViewProps>(
+  (
+    {
+      threadId,
+      variant = 'page',
+      bottomPadding,
+      hasFooterContent = false,
+      isLoading = false,
+      loadError = null,
+      emptyContent = null,
+      shareAgentName = 'OpenHuman',
+      scrollResetKey = 'chat-thread-view',
+      pendingSendActive = false,
+    },
+    ref
+  ) => {
+    const { t } = useT();
+    const dispatch = useAppDispatch();
+
+    const isSidebar = variant === 'sidebar';
+
+    const messages = useAppSelector(state =>
+      threadId ? (state.thread.messagesByThreadId[threadId] ?? EMPTY_MESSAGES) : EMPTY_MESSAGES
+    );
+    const toolTimelineByThread = useAppSelector(state => state.chatRuntime.toolTimelineByThread);
+    const turnTimelinesByThread = useAppSelector(state => state.chatRuntime.turnTimelinesByThread);
+    const turnTranscriptsByThread = useAppSelector(
+      state => state.chatRuntime.turnTranscriptsByThread
+    );
+    const interruptedAssistantByThread = useAppSelector(
+      state => state.chatRuntime.interruptedAssistantByThread
+    );
+    const processingByThread = useAppSelector(state => state.chatRuntime.processingByThread);
+    const inferenceStatusByThread = useAppSelector(
+      state => state.chatRuntime.inferenceStatusByThread
+    );
+    const streamingAssistantByThread = useAppSelector(
+      state => state.chatRuntime.streamingAssistantByThread
+    );
+    const parallelStreamsByThread = useAppSelector(
+      state => state.chatRuntime.parallelStreamsByThread
+    );
+    const inferenceTurnLifecycleByThread = useAppSelector(
+      state => state.chatRuntime.inferenceTurnLifecycleByThread
+    );
+    const agentMessageViewMode = useAppSelector(
+      state => state.theme?.agentMessageViewMode ?? 'bubbles'
+    );
+    // When ON, the verbose per-agent "Agentic task insights" timeline is hidden
+    // from chat; a compact blinking "Processing" link (and the existing message
+    // bubble loading) stand in for it, with the full run one click away in the
+    // Agent Process Source side panel. See themeSlice.hideAgentInsights.
+    const hideAgentInsights = useAppSelector(state => state.theme?.hideAgentInsights ?? false);
+
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+    // Sub-agent whose full live transcript is open in the drawer, keyed by the
+    // owning timeline row's spawn `taskId`. Null when the drawer is closed.
+    const [openSubagentTaskId, setOpenSubagentTaskId] = useState<string | null>(null);
+    // Detached background sub-agents (spawn_async_subagent) panel visibility.
+    const [showBackgroundProcesses, setShowBackgroundProcesses] = useState(false);
+    // Whether the consolidated "Agent Process Source" panel is open (the full
+    // agent-run timeline + visited sources for the current thread).
+    const [showProcessSource, setShowProcessSource] = useState(false);
+    // When the user clicks a step's "View details →", the Agent Process Source
+    // panel is scoped to that single step. `null` = the whole-run overview
+    // (opened by the bottom "View full agent process Source" link).
+    const [scopedDetailEntryId, setScopedDetailEntryId] = useState<string | null>(null);
+    const [reactionPickerMsgId, setReactionPickerMsgId] = useState<string | null>(null);
+
+    useImperativeHandle(ref, () => ({
+      openBackgroundProcesses: () => setShowBackgroundProcesses(true),
+    }));
+
+    const { containerRef: messagesContainerRef, endRef: messagesEndRef } = useStickToBottom(
+      messages,
+      threadId,
+      scrollResetKey
+    );
+
+    const handleCopyMessage = async (messageId: string, content: string) => {
+      try {
+        await navigator.clipboard.writeText(content);
+        setCopiedMessageId(messageId);
+        setTimeout(() => setCopiedMessageId(null), 1500);
+      } catch {
+        // Clipboard API not available — silently fail
+      }
+    };
+
+    const selectedThreadToolTimeline = threadId ? (toolTimelineByThread[threadId] ?? []) : [];
+    const selectedThreadProcessing = threadId ? (processingByThread[threadId] ?? []) : [];
+    // Detached background sub-agents (mode === 'async') spawned in this thread.
+    const backgroundProcesses = useMemo(
+      () => selectBackgroundProcesses(selectedThreadToolTimeline),
+      [selectedThreadToolTimeline]
+    );
+    // Re-derive the open subagent's live activity (and its row status) from the
+    // timeline on every render so the drawer streams token-by-token as
+    // subagent_text_delta / subagent_thinking_delta events land in Redux.
+    const openSubagentEntry = openSubagentTaskId
+      ? selectedThreadToolTimeline.find(entry => entry.subagent?.taskId === openSubagentTaskId)
+      : undefined;
+    const visibleMessages = messages.filter(msg => !msg.extraMetadata?.hidden);
+    const hasVisibleMessages = visibleMessages.length > 0;
+    const latestVisibleMessage = visibleMessages[visibleMessages.length - 1] ?? null;
+    const latestVisibleAgentMessage = [...visibleMessages]
+      .reverse()
+      .find(msg => msg.sender === 'agent');
+    // Message list sourced from the unified timeline projection — the single
+    // source of render order (see `docs/plans/conversations-timeline-refactor.md`
+    // Phase 2). With the streaming/tool inputs omitted the projection yields
+    // exactly the visible messages in order; the tool-timeline block and streaming
+    // previews stay anchored inline below, so the rendered DOM is unchanged. This
+    // routes the live render loop through the projection ahead of the per-turn
+    // grouping in Phase 5.
+    const timelineMessages = useMemo(
+      () =>
+        buildThreadTimeline({
+          threadId: threadId ?? '',
+          messages: visibleMessages,
+          toolTimeline: [],
+          streaming: null,
+          parallelStreams: [],
+          hideAgentInsights: false,
+        })
+          .map(item => ('message' in item ? item.message : null))
+          .filter((message): message is ThreadMessage => message !== null),
+      [threadId, visibleMessages]
+    );
+    // Past-turn tool timelines (Phase 5): map the first assistant message of each
+    // older settled turn to that turn's timeline, so each past answer renders its
+    // own collapsed process trail above it. The latest turn is excluded upstream
+    // (it renders as the live "agent insights" anchor), so there is no double
+    // render. Empty for legacy messages without a `requestId`.
+    const selectedThreadTurnTimelines = threadId
+      ? (turnTimelinesByThread[threadId] ?? EMPTY_TURN_TIMELINES)
+      : EMPTY_TURN_TIMELINES;
+    // Sibling map: each past turn's persisted reasoning/narration trail, so a
+    // reopened turn replays its thoughts, not just its tool cards (fix 1).
+    const selectedThreadTurnTranscripts = threadId
+      ? (turnTranscriptsByThread[threadId] ?? EMPTY_TURN_TRANSCRIPTS)
+      : EMPTY_TURN_TRANSCRIPTS;
+    const pastTurnAnchors = useMemo(() => {
+      const anchors: Record<
+        string,
+        { entries: ToolTimelineEntry[]; transcript: ProcessingTranscriptItem[] }
+      > = {};
+      const seen = new Set<string>();
+      for (const msg of timelineMessages) {
+        if (msg.sender !== 'agent') continue;
+        const requestId = msg.extraMetadata?.requestId;
+        if (typeof requestId !== 'string' || seen.has(requestId)) continue;
+        const entries = selectedThreadTurnTimelines[requestId] ?? EMPTY_TRANSCRIPT_ENTRIES;
+        const transcript = selectedThreadTurnTranscripts[requestId] ?? EMPTY_TRANSCRIPT;
+        // Anchor the turn when it has EITHER tool rows OR a reasoning/narration
+        // trail — a tool-less turn (agent only thought/narrated) must still
+        // render its restored thoughts above its answer (fix 1).
+        if (entries.length > 0 || transcript.length > 0) {
+          anchors[msg.id] = { entries, transcript };
+          seen.add(requestId);
+        }
+      }
+      return anchors;
+    }, [timelineMessages, selectedThreadTurnTimelines, selectedThreadTurnTranscripts]);
+    const activeSubagentTimelineEntry = selectedThreadToolTimeline.find(
+      entry => entry.status === 'running' && entry.name.startsWith('subagent:')
+    );
+    const activeToolTimelineEntry = [...selectedThreadToolTimeline]
+      .reverse()
+      .find(entry => entry.status === 'running' && !entry.name.startsWith('subagent:'));
+    const selectedInferenceStatus = threadId ? (inferenceStatusByThread[threadId] ?? null) : null;
+    const selectedStreamingAssistant = threadId
+      ? (streamingAssistantByThread[threadId] ?? null)
+      : null;
+    // The partial reply an interrupted turn left behind (restore-fidelity fix 2):
+    // surfaced as a settled, marked-interrupted bubble on restore so a turn that
+    // crashed mid-answer keeps its visible work instead of rendering blank.
+    const selectedInterruptedAssistant = threadId
+      ? (interruptedAssistantByThread[threadId] ?? null)
+      : null;
+    // Live streams for concurrent parallel (forked) turns on the selected thread,
+    // rendered as separate interleaved branch bubbles.
+    const selectedParallelStreams = threadId
+      ? Object.values(parallelStreamsByThread[threadId] ?? {})
+      : [];
+
+    const isSending = Boolean(
+      threadId &&
+      (pendingSendActive ||
+        inferenceTurnLifecycleByThread[threadId] === 'started' ||
+        inferenceTurnLifecycleByThread[threadId] === 'streaming')
+    );
+    const shouldRenderTimelineBeforeLatestAgentMessage =
+      selectedThreadToolTimeline.length > 0 && !isSending && Boolean(latestVisibleAgentMessage);
+
+    // Live agent activity that must stay visible even before the thread's
+    // message history has loaded: an in-flight turn, recorded tool steps, a
+    // processing transcript, or streamed prose. Without this, switching to a
+    // thread mid-turn rendered a blank pane (the message list is gated on
+    // `hasVisibleMessages`) until `loadThreadMessages` resolved — tool calls and
+    // streaming output silently invisible despite landing in Redux.
+    const hasLiveAgentActivity =
+      isSending ||
+      selectedThreadToolTimeline.length > 0 ||
+      selectedThreadProcessing.length > 0 ||
+      Boolean(selectedStreamingAssistant) ||
+      // An interrupted turn's restored partial answer must surface too, even
+      // before the durable message history loads (restore-fidelity fix 2).
+      Boolean(selectedInterruptedAssistant);
+
+    // Anchor the "Agentic task insights" panel right after the latest turn's user
+    // message — processing happens *before* the answer, so it reads above the
+    // result (for both the live streaming preview and the settled agent bubbles).
+    // Anchoring on the user message (not the first/last agent message) avoids the
+    // multi-agent-message split from issue #3717.
+    const lastUserMessageId = [...visibleMessages].reverse().find(m => m.sender === 'user')?.id;
+
+    // The insights panel (timeline + "View full agent process Source" opener),
+    // built once and rendered inline above the latest answer. `null` when there
+    // are no recorded steps for the thread.
+    // Open the Agent Process Source panel scoped to one step, or to the whole run.
+    const openScopedDetail = (entry: ToolTimelineEntry) => {
+      setScopedDetailEntryId(entry.id);
+      setShowProcessSource(true);
+    };
+    const openWholeRunSource = () => {
+      setScopedDetailEntryId(null);
+      setShowProcessSource(true);
+    };
+    const scopedDetailEntry =
+      scopedDetailEntryId != null
+        ? selectedThreadToolTimeline.find(e => e.id === scopedDetailEntryId)
+        : undefined;
+
+    const agentInsights =
+      // Render when there are tool steps OR a persisted reasoning/narration
+      // transcript. A tool-less turn (the agent only thinks/narrates, no tool
+      // calls) has an empty timeline but still persists thoughts — without the
+      // transcript guard those thoughts would be unreachable.
+      selectedThreadToolTimeline.length > 0 || selectedThreadProcessing.length > 0 ? (
+        <>
+          {hideAgentInsights ? (
+            // "Hide agent thinking" is ON: suppress the verbose step rows.
+            // While in flight, surface a compact blinking "Processing" link; once
+            // settled the "View full agent process Source" opener below takes
+            // over (so only render this fallback when that opener won't).
+            isSending ? (
+              <button
+                type="button"
+                onClick={openWholeRunSource}
+                data-testid="agent-processing-link"
+                className="flex items-center gap-1.5 px-1 py-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
+                <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
+                <span>{t('conversations.agentTaskInsights.processing')} →</span>
+              </button>
+            ) : !shouldRenderTimelineBeforeLatestAgentMessage ? (
+              <button
+                type="button"
+                onClick={openWholeRunSource}
+                data-testid="agent-process-source-fallback"
+                className="px-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
+                {t('conversations.agentTaskInsights.viewProcessSource')} →
+              </button>
+            ) : null
+          ) : selectedThreadToolTimeline.length > 0 ? (
+            <ToolTimelineBlock
+              entries={selectedThreadToolTimeline}
+              onViewDetails={openScopedDetail}
+              onViewWholeRun={openWholeRunSource}
+              // Reuse `isSending` rather than a raw `in` membership check on
+              // `inferenceTurnLifecycleByThread`: that map also carries
+              // `'interrupted'` entries (a turn that crashed mid-flight in a
+              // PRIOR core process, written by `hydrateRuntimeFromSnapshot` on
+              // cold boot) which have no live driver and must NOT read as an
+              // active turn, or stale disclosure state leaks into a later
+              // retry. `isSending` already excludes it (only `'started'` /
+              // `'streaming'`, same as this component's own live-turn checks).
+              turnActive={isSending}
+            />
+          ) : (
+            // Transcript-only turn: reasoning/narration was streamed but no tool
+            // calls were made, so the inline step timeline is empty. The thoughts
+            // are still persisted — surface a standalone opener (matching the
+            // settled insights header) so the full-run panel stays reachable.
+            <button
+              type="button"
+              onClick={openWholeRunSource}
+              data-testid="view-process-source"
+              className="flex items-center gap-1.5 px-1 py-1 text-left">
+              <span className="text-[13px] font-medium text-content-muted">
+                {t('conversations.agentTaskInsights.title')}
+              </span>
+              <span className="text-[13px] font-medium text-primary-600 dark:text-primary-300">
+                →
+              </span>
+            </button>
+          )}
+          {/* "View full agent process Source" — only needed in the hidden-insights
+              settled state; when the timeline is visible the link lives in its
+              header (ToolTimelineBlock onViewWholeRun). */}
+          {shouldRenderTimelineBeforeLatestAgentMessage && hideAgentInsights && (
+            <button
+              type="button"
+              onClick={openWholeRunSource}
+              data-testid="view-process-source"
+              className="px-1 text-[11px] font-medium text-primary-600 hover:underline dark:text-primary-300">
+              {t('conversations.agentTaskInsights.viewProcessSource')} →
+            </button>
+          )}
+        </>
+      ) : null;
+
+    // Standalone fallback slot (rendered once, below all messages) for the
+    // rare thread with no user message at all (e.g. a proactive-only run), so
+    // `agentInsights` is never unreachable. This slot sits at a fixed JSX
+    // position with no per-thread key of its own, so switching directly
+    // between two threads that both hit this fallback (e.g. two proactive-only
+    // threads) would otherwise reuse the same `ToolTimelineBlock` instance
+    // instead of remounting it — leaking its sticky `userOverrideOpen`
+    // disclosure state from the old thread into the new one (flagged in
+    // review on #4942). Keying on thread id forces a clean remount on every
+    // thread switch, matching the `key={msg.id}` pattern used for the in-flow
+    // timeline above.
+    const proactiveInsightsFallback = (() => {
+      if (lastUserMessageId) return null;
+      return <Fragment key={threadId ?? 'none'}>{agentInsights}</Fragment>;
+    })();
+
+    const hasContent = hasVisibleMessages || hasFooterContent || hasLiveAgentActivity;
+
+    return (
+      <>
+        <div
+          ref={messagesContainerRef}
+          data-testid="chat-messages-scroll"
+          // Full-width scroll (scrollbar hugs the window edge); inner content is
+          // centered and width-capped per branch below. `min-h-0` lets this
+          // basis-0 flex child shrink to 0 so the composer footer can take the
+          // space (and scroll) on short windows (#3785).
+          className="flex-1 min-h-0 overflow-y-auto">
+          {isLoading ? (
+            <div className="mx-auto w-full max-w-[48.75rem] space-y-4 px-5 py-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
+                  <div
+                    className={`h-12 rounded-2xl animate-pulse bg-surface-subtle ${
+                      i % 2 === 0 ? 'w-2/3' : 'w-1/2'
+                    }`}
+                  />
+                </div>
+              ))}
+            </div>
+          ) : loadError ? (
+            <div className="flex-1 flex flex-col items-center justify-center h-full">
+              <svg
+                className="w-8 h-8 text-coral-500/70 mb-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+              <p className="text-sm text-content-faint mb-1">{t('chat.failedToLoadMessages')}</p>
+              <p className="text-xs text-content-secondary mb-3 text-center">{loadError}</p>
+              <button
+                type="button"
+                data-analytics-id="chat-messages-reload"
+                onClick={() => window.location.reload()}
+                className="text-xs text-primary-400 hover:text-primary-300 transition-colors">
+                {t('common.reload')}
+              </button>
+            </div>
+          ) : hasContent ? (
+            <div
+              data-testid="chat-message-list"
+              className={`mx-auto w-full max-w-[48.75rem] space-y-3 px-5 pt-4 ${
+                isSidebar ? 'pb-4' : ''
+              }`}
+              // Page variant: reserve room for the absolutely-positioned floating
+              // composer footer so its tail stays visible. Tracks the footer's
+              // measured height (+16px gap) instead of a static `pb-32`, so the
+              // queued-followups panel and other dynamic footer content never
+              // overlap the last message (#4268).
+              style={bottomPadding !== undefined ? { paddingBottom: bottomPadding } : undefined}>
+              {timelineMessages.map(msg => {
+                const isAgentTextMode = msg.sender === 'agent' && agentMessageViewMode === 'text';
+                // B25: an agent turn that both talks AND calls a tool can leak
+                // the provider wire-format `{ content, tool_calls }` JSON
+                // envelope as its raw `content` (see `unwrapToolCallEnvelope`).
+                // Unwrap agent messages to the human text so no surface (home
+                // chat OR the workflow copilot, which shares this renderer)
+                // ever paints raw JSON. Shape-based + a strict passthrough for
+                // ordinary prose, so this is a no-op for every non-envelope
+                // message — the tool activity itself renders via the timeline,
+                // so the extracted tool names are intentionally dropped here.
+                const displayContent =
+                  msg.sender === 'agent'
+                    ? unwrapToolCallEnvelope(msg.content ?? '').text
+                    : (msg.content ?? '');
+                // Parsed once per message: for current messages (extraMetadata
+                // present, or agent messages) the content already has no markers,
+                // so this is a no-op. For legacy persisted user messages with raw
+                // [IMAGE:...]/[FILE:...] markers and no extraMetadata, this is
+                // what keeps the marker text out of both the rendered bubble and
+                // the copy-to-clipboard action.
+                const parsedContent = parseMessageImages(displayContent);
+                const pastTurn = pastTurnAnchors[msg.id];
+                return (
+                  <Fragment key={msg.id}>
+                    {/* Past-turn process trail (Phase 5 + restore-fidelity fix 1):
+                        each older settled turn's interleaved reasoning/narration +
+                        tool steps (and restored sub-agent transcripts), collapsed,
+                        above the answer it produced. Falls back to tool-cards-only
+                        for legacy snapshots with no persisted transcript. */}
+                    {pastTurn ? (
+                      <div data-testid="past-turn-insights">
+                        <PastTurnInsights
+                          entries={pastTurn.entries}
+                          transcript={pastTurn.transcript}
+                        />
+                      </div>
+                    ) : null}
+                    <div>
+                      <div
+                        className={`group/msg flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+                        <div
+                          className={`relative ${
+                            isAgentTextMode ? 'w-full max-w-full' : 'w-fit max-w-[75%]'
+                          }`}>
+                          {msg.sender === 'agent' ? (
+                            <div className="space-y-1">
+                              <div className="relative space-y-1">
+                                {agentMessageViewMode === 'text' ? (
+                                  <AgentMessageText content={displayContent} />
+                                ) : (
+                                  splitAgentMessageIntoBubbles(displayContent).map(
+                                    (segment, index, parts) => {
+                                      const position: AgentBubblePosition =
+                                        parts.length === 1
+                                          ? 'single'
+                                          : index === 0
+                                            ? 'first'
+                                            : index === parts.length - 1
+                                              ? 'last'
+                                              : 'middle';
+
+                                      return (
+                                        <AgentMessageBubble
+                                          key={`${msg.id}:${index}`}
+                                          content={segment}
+                                          position={position}
+                                        />
+                                      );
+                                    }
+                                  )
+                                )}
+                                {/* Reaction affordance — the closed "+", the open picker,
+                                  and the resulting reaction chips all live here, tucked
+                                  onto the bubble's bottom-left corner so the control
+                                  never jumps to a separate row below the timestamp. */}
+                                {latestVisibleMessage?.id === msg.id &&
+                                  (() => {
+                                    const myReactions =
+                                      (msg.extraMetadata?.myReactions as string[] | undefined) ??
+                                      [];
+                                    const pickerOpen = reactionPickerMsgId === msg.id;
+                                    return (
+                                      <div className="absolute -bottom-2 left-3 z-10 flex items-center gap-1">
+                                        {myReactions.map(emoji => (
+                                          <button
+                                            key={emoji}
+                                            type="button"
+                                            data-analytics-id="chat-message-reaction-remove"
+                                            onClick={() =>
+                                              threadId &&
+                                              void dispatch(
+                                                persistReaction({
+                                                  threadId,
+                                                  messageId: msg.id,
+                                                  emoji,
+                                                })
+                                              )
+                                            }
+                                            className="flex items-center rounded-full border border-primary-200 bg-primary-100 px-1.5 text-xs leading-[1.5] shadow-sm transition-colors hover:bg-primary-200 dark:border-primary-400/40 dark:bg-primary-500/25"
+                                            title={t('chat.removeReaction').replace(
+                                              '{emoji}',
+                                              emoji
+                                            )}>
+                                            {emoji}
+                                          </button>
+                                        ))}
+                                        {pickerOpen ? (
+                                          <div className="flex items-center gap-0.5 rounded-full bg-surface px-1 py-0.5 shadow-sm ring-1 ring-stone-200 dark:ring-neutral-700">
+                                            {['👍', '❤️', '😂', '🔥', '👀', '🎯'].map(emoji => (
+                                              <button
+                                                key={emoji}
+                                                type="button"
+                                                data-analytics-id="chat-message-reaction-pick"
+                                                onClick={() => {
+                                                  if (threadId) {
+                                                    void dispatch(
+                                                      persistReaction({
+                                                        threadId,
+                                                        messageId: msg.id,
+                                                        emoji,
+                                                      })
+                                                    );
+                                                  }
+                                                  setReactionPickerMsgId(null);
+                                                }}
+                                                className="rounded px-0.5 text-sm transition-transform hover:scale-125"
+                                                title={emoji}>
+                                                {emoji}
+                                              </button>
+                                            ))}
+                                            <button
+                                              type="button"
+                                              data-analytics-id="chat-message-reaction-close"
+                                              onClick={() => setReactionPickerMsgId(null)}
+                                              className="ml-0.5 px-0.5 text-xs text-content-secondary hover:text-content-faint dark:hover:text-content-faint">
+                                              ✕
+                                            </button>
+                                          </div>
+                                        ) : (
+                                          <button
+                                            type="button"
+                                            data-analytics-id="chat-message-reaction-open"
+                                            onClick={() => setReactionPickerMsgId(msg.id)}
+                                            className="flex h-[18px] items-center rounded-full bg-surface px-1.5 text-xs leading-none text-content-muted opacity-0 shadow-sm ring-1 ring-stone-200 transition-opacity hover:bg-surface-hover hover:text-content-secondary group-hover/msg:opacity-100 dark:ring-neutral-700"
+                                            title={t('chat.addReaction')}
+                                            aria-label={t('chat.addReaction')}>
+                                            +
+                                          </button>
+                                        )}
+                                      </div>
+                                    );
+                                  })()}
+                              </div>
+                              {/* Stopped marker (#4862): the partial reply that was
+                                  preserved when the user hit Stop / ESC mid-stream. */}
+                              {msg.extraMetadata?.stopped === true && (
+                                <p
+                                  data-testid="stopped-marker"
+                                  className="flex items-center gap-1 px-1 text-[10px] font-medium text-content-faint">
+                                  <svg
+                                    className="h-2.5 w-2.5"
+                                    fill="currentColor"
+                                    viewBox="0 0 24 24"
+                                    aria-hidden>
+                                    <rect x="6" y="6" width="12" height="12" rx="1.5" />
+                                  </svg>
+                                  {t('chat.stoppedByUser')}
+                                </p>
+                              )}
+                              {(() => {
+                                const raw = msg.extraMetadata?.citations;
+                                if (!Array.isArray(raw)) return null;
+                                const citations = raw.filter(
+                                  (item): item is MessageCitation =>
+                                    typeof item === 'object' &&
+                                    item !== null &&
+                                    typeof (item as MessageCitation).id === 'string' &&
+                                    typeof (item as MessageCitation).key === 'string' &&
+                                    typeof (item as MessageCitation).snippet === 'string' &&
+                                    typeof (item as MessageCitation).timestamp === 'string'
+                                );
+                                if (citations.length === 0) return null;
+                                return <CitationChips citations={citations} />;
+                              })()}
+                              {latestVisibleMessage?.id === msg.id && (
+                                <p className="px-1 text-[10px] text-content-faint">
+                                  {formatRelativeTime(msg.createdAt)}
+                                </p>
+                              )}
+                            </div>
+                          ) : (
+                            <div className="flex flex-col items-end gap-1">
+                              {(() => {
+                                const displayText = parsedContent.text;
+                                const dataUris = (
+                                  Array.isArray(msg.extraMetadata?.attachmentDataUris)
+                                    ? (msg.extraMetadata.attachmentDataUris as string[])
+                                    : parsedContent.dataUris
+                                ).filter(src => SAFE_IMAGE_DATA_URI_RE.test(src));
+                                const hasImages = dataUris.length > 0;
+                                // Document attachments carry no image data-URI (only
+                                // images do); surface them as filename chips from the
+                                // persisted attachmentKinds/attachmentNames metadata.
+                                const kinds = Array.isArray(msg.extraMetadata?.attachmentKinds)
+                                  ? (msg.extraMetadata.attachmentKinds as string[])
+                                  : [];
+                                const names = Array.isArray(msg.extraMetadata?.attachmentNames)
+                                  ? (msg.extraMetadata.attachmentNames as string[])
+                                  : [];
+                                const fileNames = kinds
+                                  .map((k, i) => (k === 'file' ? names[i] : null))
+                                  .filter((n): n is string => Boolean(n));
+                                const posters = Array.isArray(msg.extraMetadata?.attachmentPosters)
+                                  ? (msg.extraMetadata.attachmentPosters as (string | null)[])
+                                  : [];
+                                const videoItems = kinds
+                                  .map((k, i) =>
+                                    k === 'video'
+                                      ? { name: names[i] ?? '', poster: posters[i] ?? null }
+                                      : null
+                                  )
+                                  .filter((v): v is { name: string; poster: string | null } =>
+                                    Boolean(v)
+                                  );
+                                const showTime = latestVisibleMessage?.id === msg.id;
+                                return (
+                                  <>
+                                    {hasImages && (
+                                      <div className="flex flex-wrap gap-1.5 justify-end">
+                                        {dataUris.map((uri, i) => (
+                                          <AttachmentImage key={i} dataUri={uri} />
+                                        ))}
+                                      </div>
+                                    )}
+                                    {videoItems.length > 0 && (
+                                      <div className="flex flex-wrap gap-1.5 justify-end">
+                                        {videoItems.map((video, i) => (
+                                          <div
+                                            key={i}
+                                            className="relative flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2.5 py-1.5 text-xs text-content-secondary max-w-[220px]">
+                                            {video.poster ? (
+                                              <div className="relative w-10 h-10 flex-shrink-0">
+                                                <img
+                                                  src={video.poster}
+                                                  alt=""
+                                                  className="w-10 h-10 rounded object-cover"
+                                                />
+                                                <span className="absolute inset-0 flex items-center justify-center">
+                                                  <svg
+                                                    className="w-4 h-4 text-white drop-shadow"
+                                                    fill="currentColor"
+                                                    viewBox="0 0 24 24">
+                                                    <path d="M8 5v14l11-7z" />
+                                                  </svg>
+                                                </span>
+                                              </div>
+                                            ) : (
+                                              <svg
+                                                className="w-4 h-4 flex-shrink-0 text-content-muted"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24">
+                                                <path
+                                                  strokeLinecap="round"
+                                                  strokeLinejoin="round"
+                                                  strokeWidth={1.8}
+                                                  d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 6h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z"
+                                                />
+                                              </svg>
+                                            )}
+                                            <span className="truncate font-medium">
+                                              {video.name}
+                                            </span>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                    {fileNames.length > 0 && (
+                                      <div className="flex flex-wrap gap-1.5 justify-end">
+                                        {fileNames.map((name, i) => (
+                                          <div
+                                            key={i}
+                                            className="flex items-center gap-2 rounded-lg border border-line bg-surface-muted px-2.5 py-1.5 text-xs text-content-secondary max-w-[220px]">
+                                            <svg
+                                              className="w-4 h-4 flex-shrink-0 text-content-muted"
+                                              fill="none"
+                                              stroke="currentColor"
+                                              viewBox="0 0 24 24">
+                                              <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={1.8}
+                                                d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
+                                              />
+                                              <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={1.8}
+                                                d="M14 2v6h6"
+                                              />
+                                            </svg>
+                                            <span className="truncate font-medium">{name}</span>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                    {(displayText || showTime) && (
+                                      <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-content-inverted rounded-br-md break-words overflow-hidden">
+                                        {displayText && (
+                                          <BubbleMarkdown content={displayText} tone="user" />
+                                        )}
+                                        {showTime && (
+                                          <p
+                                            className={`${displayText ? 'mt-1' : ''} text-[10px] text-white/60`}>
+                                            {formatRelativeTime(msg.createdAt)}
+                                          </p>
+                                        )}
+                                      </div>
+                                    )}
+                                  </>
+                                );
+                              })()}
+                            </div>
+                          )}
+                          <button
+                            type="button"
+                            data-analytics-id="chat-message-copy"
+                            onClick={() => handleCopyMessage(msg.id, parsedContent.text)}
+                            className={`absolute -top-1 ${
+                              isAgentTextMode
+                                ? 'right-0'
+                                : msg.sender === 'user'
+                                  ? '-left-8'
+                                  : '-right-8'
+                            } p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-surface-hover dark:bg-surface-muted dark:hover:bg-surface-muted text-content-faint hover:text-content-secondary transition-all`}
+                            title={t('chat.copyResponse')}>
+                            {copiedMessageId === msg.id ? (
+                              <svg
+                                className="w-3.5 h-3.5 text-sage-500"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24">
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M5 13l4 4L19 7"
+                                />
+                              </svg>
+                            ) : (
+                              <svg
+                                className="w-3.5 h-3.5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24">
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                                />
+                              </svg>
+                            )}
+                          </button>
+                          {msg.sender === 'agent' && (
+                            <ShareMessageButton
+                              content={parsedContent.text}
+                              agentName={shareAgentName}
+                              threadId={threadId ?? undefined}
+                              className={`absolute top-6 ${isAgentTextMode ? 'right-0' : '-right-8'}`}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    {msg.id === lastUserMessageId ? agentInsights : null}
+                  </Fragment>
+                );
+              })}
+              {isSending &&
+                // Suppress the legacy 3-dot placeholder once streaming
+                // output (visible text or thinking) has started — the
+                // streaming preview bubble below takes over as the
+                // activity indicator.
+                !(
+                  (selectedStreamingAssistant?.content.length ?? 0) > 0 ||
+                  (selectedStreamingAssistant?.thinking.length ?? 0) > 0
+                ) && (
+                  <div className="flex justify-start">
+                    <div className="bg-surface-strong/80 dark:bg-surface-muted rounded-2xl rounded-bl-md px-4 py-3">
+                      <div className="flex items-center gap-1">
+                        <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:0ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:150ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-surface-muted dark:bg-surface-muted/600 animate-bounce [animation-delay:300ms]" />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              {/* Streaming assistant preview — compact trailing tail of the
+                    in-flight response. Rendered as plain text (not Markdown) to
+                    avoid jitter from partially-parsed fences. The final bubble
+                    replaces this via addInferenceResponse on chat_done. */}
+              {selectedStreamingAssistant &&
+                (selectedStreamingAssistant.thinking.length > 0 ||
+                  selectedStreamingAssistant.content.length > 0) && (
+                  <div className="flex justify-start">
+                    <div className="relative w-fit max-w-[75%]">
+                      {selectedStreamingAssistant.thinking.length > 0 && (
+                        <details className="mb-1.5 bg-surface-subtle rounded-lg px-3 py-1.5 text-xs text-content-secondary open:bg-stone-100 dark:bg-surface-muted dark:open:bg-neutral-800">
+                          <summary className="cursor-pointer select-none flex items-center gap-1.5">
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
+                            <span>{t('chat.thinking')}</span>
+                          </summary>
+                          <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-content-muted">
+                            {selectedStreamingAssistant.thinking.slice(-STREAMING_PREVIEW_CHARS)}
+                          </pre>
+                        </details>
+                      )}
+                      {selectedStreamingAssistant.content.length > 0 && (
+                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content">
+                          <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
+                            {selectedStreamingAssistant.content.length >
+                              STREAMING_PREVIEW_CHARS && (
+                              <span className="text-content-faint">…</span>
+                            )}
+                            {selectedStreamingAssistant.content.slice(-STREAMING_PREVIEW_CHARS)}
+                            <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              {/* Interrupted turn's partial answer (restore-fidelity fix 2):
+                    a settled, marked-interrupted bubble surfaced on restore. Only
+                    when NOT streaming live (the buffer is cleared by any live turn
+                    in the slice; this guard is belt-and-braces). */}
+              {!isSending && selectedInterruptedAssistant ? (
+                <InterruptedAnswer
+                  content={selectedInterruptedAssistant.content}
+                  thinking={selectedInterruptedAssistant.thinking}
+                />
+              ) : null}
+              {/* Parallel (forked) branch streams — concurrent turns on this
+                    thread, each its own labeled bubble so they don't collide with
+                    the primary stream above. */}
+              {selectedParallelStreams.map(
+                branch =>
+                  (branch.content.length > 0 || branch.thinking.length > 0) && (
+                    <div key={branch.requestId} className="flex justify-start">
+                      <div className="relative w-fit max-w-[75%]">
+                        <div className="mb-1 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-primary-500 dark:text-primary-400">
+                          <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
+                          <span>{t('chat.parallelBranchLabel')}</span>
+                        </div>
+                        {branch.content.length > 0 && (
+                          <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-surface-strong/80 dark:bg-surface-muted text-content border-l-2 border-primary-400/60">
+                            <p className="text-xs text-content-secondary font-mono whitespace-pre-wrap break-words leading-snug">
+                              {branch.content.length > STREAMING_PREVIEW_CHARS && (
+                                <span className="text-content-faint">…</span>
+                              )}
+                              {branch.content.slice(-STREAMING_PREVIEW_CHARS)}
+                              <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )
+              )}
+              {/* Inference status indicator.
+                    For the tool_use / subagent phases this line just restates the
+                    active row already shown in the agentic-task-insights timeline,
+                    so suppress it once that timeline is on screen — keep it only
+                    for the `thinking` phase (which has no timeline row yet) or when
+                    there is no timeline to fall back on. */}
+              {selectedInferenceStatus &&
+                (selectedInferenceStatus.phase === 'thinking' ||
+                  selectedThreadToolTimeline.length === 0) && (
+                  <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-content-muted">
+                    <span className="inline-block w-2 h-2 rounded-full bg-primary-400 animate-pulse" />
+                    <span>
+                      {selectedInferenceStatus.phase === 'thinking' &&
+                        (selectedInferenceStatus.iteration > 0
+                          ? t('chat.thinkingIteration').replace(
+                              '{n}',
+                              String(selectedInferenceStatus.iteration)
+                            )
+                          : t('chat.thinkingDots'))}
+                      {selectedInferenceStatus.phase === 'tool_use' &&
+                        `${
+                          formatTimelineEntry(
+                            activeToolTimelineEntry ?? {
+                              id: 'active-tool',
+                              name: selectedInferenceStatus.activeTool ?? 'tool',
+                              round: selectedInferenceStatus.iteration,
+                              seq: 0,
+                              status: 'running',
+                            }
+                          ).title
+                        }...`}
+                      {selectedInferenceStatus.phase === 'subagent' &&
+                        `${
+                          formatTimelineEntry(
+                            activeSubagentTimelineEntry ?? {
+                              id: 'active-subagent',
+                              name: `subagent:${selectedInferenceStatus.activeSubagent ?? ''}`,
+                              round: selectedInferenceStatus.iteration,
+                              seq: 0,
+                              status: 'running',
+                            }
+                          ).title
+                        }...`}
+                    </span>
+                  </div>
+                )}
+              {/* The "Agentic task insights" panel is rendered inline *above* the
+                  latest answer (right after the latest turn's user message) so
+                  processing reads before the result. `proactiveInsightsFallback`
+                  (defined above, near `agentInsights`) covers the rare thread
+                  with no user message at all — see its doc comment for the
+                  per-thread keying that fix keeps this remount-safe. */}
+              {proactiveInsightsFallback}
+              <div ref={messagesEndRef} />
+            </div>
+          ) : (
+            emptyContent
+          )}
+        </div>
+        <BackgroundProcessesPanel
+          open={showBackgroundProcesses}
+          processes={backgroundProcesses}
+          onClose={() => setShowBackgroundProcesses(false)}
+          onOpenProcess={taskId => {
+            setShowBackgroundProcesses(false);
+            setOpenSubagentTaskId(taskId);
+          }}
+        />
+        <SubagentDrawer
+          key={openSubagentTaskId ?? 'none'}
+          subagent={openSubagentEntry?.subagent ?? null}
+          status={openSubagentEntry?.status}
+          onCancel={
+            openSubagentEntry?.subagent && threadId
+              ? async () => {
+                  const taskId = openSubagentEntry.subagent!.taskId;
+                  const result = await subagentApi.cancel(taskId);
+                  // Only flip the row when something was actually aborted — a
+                  // cancelled=false result means the run already finished/unknown,
+                  // and overwriting its real terminal state would hide it. No
+                  // terminal socket event arrives for an aborted run, so the
+                  // optimistic mark is what surfaces the cancellation (the notice
+                  // itself reaches chat via the idle-gated delivery path).
+                  if (result.cancelled) {
+                    dispatch(markSubagentCancelled({ threadId, taskId: result.taskId }));
+                  }
+                }
+              : undefined
+          }
+          onClose={() => setOpenSubagentTaskId(null)}
+        />
+        <AgentProcessSourcePanel
+          open={showProcessSource}
+          entries={selectedThreadToolTimeline}
+          transcript={selectedThreadProcessing}
+          scopedEntry={scopedDetailEntry}
+          onClose={() => {
+            setShowProcessSource(false);
+            setScopedDetailEntryId(null);
+          }}
+        />
+      </>
+    );
+  }
+);
+
+ChatThreadView.displayName = 'ChatThreadView';
diff --git a/app/src/lib/flows/copilotMessageSanitizer.test.ts b/app/src/lib/chat/toolCallEnvelope.test.ts
similarity index 98%
rename from app/src/lib/flows/copilotMessageSanitizer.test.ts
rename to app/src/lib/chat/toolCallEnvelope.test.ts
index 44db34b8f..0a45c0c8b 100644
--- a/app/src/lib/flows/copilotMessageSanitizer.test.ts
+++ b/app/src/lib/chat/toolCallEnvelope.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { unwrapToolCallEnvelope } from './copilotMessageSanitizer';
+import { unwrapToolCallEnvelope } from './toolCallEnvelope';
 
 describe('unwrapToolCallEnvelope', () => {
   it('returns plain text unchanged with no tool names', () => {
diff --git a/app/src/lib/flows/copilotMessageSanitizer.ts b/app/src/lib/chat/toolCallEnvelope.ts
similarity index 91%
rename from app/src/lib/flows/copilotMessageSanitizer.ts
rename to app/src/lib/chat/toolCallEnvelope.ts
index 856e9a078..70824e7e1 100644
--- a/app/src/lib/flows/copilotMessageSanitizer.ts
+++ b/app/src/lib/chat/toolCallEnvelope.ts
@@ -1,9 +1,12 @@
 import createDebug from 'debug';
 
 /**
- * copilotMessageSanitizer — defends the Flows copilot chat against rendering
- * the raw provider wire-format envelope instead of clean assistant text
- * (B25).
+ * toolCallEnvelope — defends any chat transcript against rendering the raw
+ * provider wire-format envelope instead of clean assistant text (B25).
+ *
+ * Applied by the shared `ChatThreadView` transcript renderer, so it guards
+ * BOTH the home chat and the workflow copilot (which now reuses that
+ * renderer). Originally lived under `lib/flows` for the copilot alone.
  *
  * The Rust core's `NativeToolDispatcher::to_provider_messages`
  * (`src/openhuman/agent/dispatcher.rs`) and the tinyagents bridge's
@@ -14,7 +17,7 @@ import createDebug from 'debug';
  * That envelope is meant to stay internal to the agent session; this
  * sanitizer is a shape-based (not string-match) belt-and-suspenders guard so
  * that if it ever leaks into a chat message's `content` (from any Rust-side
- * vector, present or future), the copilot still renders only the human
+ * vector, present or future), the transcript still renders only the human
  * text — never the raw JSON — mirroring the `unwrapPayloadEnvelope`
  * philosophy from PR #4822 (`app/src/lib/flows/runItems.ts`).
  */