diff --git a/.github/workflows/backend-tests.yml b/.github/workflows/backend-tests.yml
new file mode 100644
index 000000000..39972626f
--- /dev/null
+++ b/.github/workflows/backend-tests.yml
@@ -0,0 +1,71 @@
+name: backend-tests
+
+# The backend pytest suite, run on every pull request and on pushes to the mainline branches. Until
+# now nothing ran it in CI, so a regression only surfaced when someone ran it by hand.
+on:
+  pull_request:
+    paths:
+      - 'backend/**'
+      - '.github/workflows/backend-tests.yml'
+  push:
+    branches: [main, dev]
+    paths:
+      - 'backend/**'
+      - '.github/workflows/backend-tests.yml'
+  workflow_dispatch:
+
+# Runs checked-out project code on pull_request: the token stays read-only.
+permissions:
+  contents: read
+
+concurrency:
+  group: backend-tests-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  pytest:
+    name: pytest (ubuntu)
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.13'
+          cache: pip
+          cache-dependency-path: |
+            backend/requirements.lock
+            backend/requirements-dev.txt
+      - name: Install backend deps (locked runtime + dev)
+        run: |
+          python -m pip install --require-hashes --only-binary=:all: -r backend/requirements.lock
+          python -m pip install -r backend/requirements-dev.txt
+      # Two numbers that must agree. A test process that dies mid-run can exit 0 with no summary
+      # (a hard-exit shutdown path did exactly that once and silently skipped ~42% of the suite), so
+      # the job also asserts that every collected test was actually run: junit testcase count ==
+      # collect-only count. Green then means green, not "green as far as it got".
+      - name: Count the suite
+        run: |
+          python -m pytest backend/tests --ignore=backend/tests/formal --collect-only -q -p no:cacheprovider \
+            | tail -1 | tee collected.txt
+      # --timeout: a test that blocks forever (a bare ws.receive_json() waiting for an event that never
+      # comes, say) otherwise stalls the run at 99% until timeout-minutes with no summary and no junit.
+      # With the cap it fails by name, the rest of the suite runs, and the assertion below still holds.
+      - name: Run the backend suite
+        run: |
+          python -m pytest backend/tests --ignore=backend/tests/formal -q -p no:cacheprovider \
+            --timeout=300 \
+            --junitxml "${RUNNER_TEMP}/pytest.xml"
+      - name: Every collected test ran
+        # Runs after a red suite too, so a failure report also says whether the run was complete.
+        if: ${{ !cancelled() }}
+        run: |
+          python - "${RUNNER_TEMP}/pytest.xml" collected.txt <<'PY'
+          import re, sys, xml.etree.ElementTree as ET
+          ran = sum(1 for _ in ET.parse(sys.argv[1]).getroot().iter('testcase'))
+          m = re.search(r'(\d+) tests? collected', open(sys.argv[2]).read())
+          collected = int(m.group(1)) if m else -1
+          print(f'collected={collected} ran={ran}')
+          if collected < 1 or ran != collected:
+              sys.exit(f'FAIL: {ran} of {collected} collected tests reached the report; the run was truncated')
+          PY
diff --git a/.github/workflows/edge-tests.yml b/.github/workflows/edge-tests.yml
new file mode 100644
index 000000000..82ef10d9d
--- /dev/null
+++ b/.github/workflows/edge-tests.yml
@@ -0,0 +1,44 @@
+name: edge-tests
+
+# The openswarm-edge pytest suite, on every pull request that touches it and on pushes to the
+# mainline branches.
+on:
+  pull_request:
+    paths:
+      - 'openswarm-edge/**'
+      - '.github/workflows/edge-tests.yml'
+  push:
+    branches: [main, dev]
+    paths:
+      - 'openswarm-edge/**'
+      - '.github/workflows/edge-tests.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: edge-tests-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  pytest:
+    name: pytest (openswarm-edge)
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        working-directory: openswarm-edge
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.13'
+          cache: pip
+          cache-dependency-path: openswarm-edge/requirements.txt
+      - name: Install edge deps
+        run: |
+          python -m pip install -r requirements.txt
+          python -m pip install pytest pytest-asyncio
+      - name: Run the edge suite
+        run: python -m pytest tests -q -p no:cacheprovider
diff --git a/.github/workflows/frontend-tests.yml b/.github/workflows/frontend-tests.yml
new file mode 100644
index 000000000..00578bb8f
--- /dev/null
+++ b/.github/workflows/frontend-tests.yml
@@ -0,0 +1,43 @@
+name: frontend-tests
+
+# Typecheck plus the renderer's node:test suite, on every pull request and on pushes to the mainline
+# branches. Until now neither ran in CI; the tests were run by hand, one file at a time.
+on:
+  pull_request:
+    paths:
+      - 'frontend/**'
+      - '.github/workflows/frontend-tests.yml'
+  push:
+    branches: [main, dev]
+    paths:
+      - 'frontend/**'
+      - '.github/workflows/frontend-tests.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: frontend-tests-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  typecheck-and-tests:
+    name: tsc + node:test
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.18.1'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - run: npm ci
+      - name: Typecheck
+        run: npx tsc --noEmit -p tsconfig.json
+      - name: Unit tests (node:test via tsx)
+        run: node scripts/run-tests.mjs
diff --git a/backend/requirements-dev.txt b/backend/requirements-dev.txt
index fe1535065..710b74dc3 100644
--- a/backend/requirements-dev.txt
+++ b/backend/requirements-dev.txt
@@ -9,6 +9,9 @@
 
 pytest==8.3.4
 pytest-asyncio==0.25.2
+# Per-test wall-clock cap for CI (see .github/workflows/backend-tests.yml): a test that
+# blocks forever fails by name instead of stalling the whole run until the job cap.
+pytest-timeout==2.4.0
 
 # Used by linter/lint.py (the vulture dead-code check). watchfiles, also
 # needed by lint.py, already comes in transitively via uvicorn[standard].
diff --git a/backend/tests/test_ws_integration.py b/backend/tests/test_ws_integration.py
index 741cc223f..33f86210e 100644
--- a/backend/tests/test_ws_integration.py
+++ b/backend/tests/test_ws_integration.py
@@ -6,6 +6,8 @@
 The SDK and WS auth are mocked; everything else is the real running stack."""
 
 import asyncio
+import queue
+import threading
 
 import pytest
 
@@ -17,6 +19,29 @@
 import backend.main as main_mod
 from backend.apps.agents.agent_manager import agent_manager
 from backend.apps.agents.core.models import AgentSession
+import backend.apps.agents.manager.run.RunOptions as run_options_mod
+
+
+def p_receive_json(ws, timeout: float = 5.0):
+    """ws.receive_json() blocks forever when the event never comes; a regression in the loop then
+    hangs the whole pytest run instead of failing this test. Bound every receive."""
+    out = queue.Queue(maxsize=1)
+
+    def p_recv():
+        try:
+            out.put((True, ws.receive_json()))
+        except BaseException as exc:
+            out.put((False, exc))
+
+    thread = threading.Thread(target=p_recv, daemon=True)
+    thread.start()
+    try:
+        ok, value = out.get(timeout=timeout)
+    except queue.Empty as exc:
+        raise AssertionError(f"timed out waiting for websocket event after {timeout}s") from exc
+    if ok:
+        return value
+    raise value
 
 
 def p_assistant():
@@ -33,6 +58,20 @@ def p_result():
 def test_ws_endpoint_streams_a_full_turn_end_to_end(monkeypatch):
     monkeypatch.setattr(main_mod, "p_ws_auth_ok", lambda ws: True, raising=True)
 
+    # The contract of this test is "SDK and WS auth mocked, everything else real", but two things on
+    # the turn path reach outside the process and must not decide the outcome: configure_provider_env
+    # can wander into 9Router revival (spawn/npm install, serialized on a module-level lock) whenever
+    # earlier tests left provider evidence behind, and the background turn-label aux call does the
+    # same. Pin both out; the persistent-client path is pinned off suite-wide in conftest.
+    async def p_noop_provider_env(*args, **kwargs):
+        return None
+
+    async def p_noop_turn_label(*args, **kwargs):
+        return None
+
+    monkeypatch.setattr(run_options_mod, "configure_provider_env", p_noop_provider_env, raising=True)
+    monkeypatch.setattr(agent_manager, "generate_turn_label", p_noop_turn_label, raising=True)
+
     async def fake_query(*args, **kwargs):
         yield p_assistant()
         yield p_result()
@@ -49,10 +88,15 @@ async def fake_query(*args, **kwargs):
             ws.send_json({"event": "agent:send_message", "data": {"prompt": "hi"}})
             seen = []
             for _ in range(40):
-                ev = ws.receive_json()
+                ev = p_receive_json(ws)
                 seen.append(ev.get("event"))
-                if ev.get("event") == "agent:message" and "hello from the loop" in str(ev.get("data", {})):
+                if (
+                    ev.get("event") == "agent:status"
+                    and ev.get("data", {}).get("status") == "completed"
+                ):
                     break
+            else:
+                raise AssertionError(f"did not receive completed status; saw events={seen}")
         # the real loop's assistant reply made it all the way back over the WS
         assert "agent:message" in seen
         assert any(m.role == "assistant" and "hello from the loop" in str(m.content)
diff --git a/frontend/scripts/css-stub.cjs b/frontend/scripts/css-stub.cjs
new file mode 100644
index 000000000..581e57e5d
--- /dev/null
+++ b/frontend/scripts/css-stub.cjs
@@ -0,0 +1,5 @@
+// Run: node --import tsx --require ./scripts/css-stub.cjs --test <files>
+// A stylesheet import resolves to an empty module under node:test. Vite handles CSS imports in the
+// renderer bundle; under node (tsx compiles these modules to CommonJS) they would be parsed as
+// JavaScript and throw.
+require.extensions['.css'] = () => {};
diff --git a/frontend/scripts/run-tests.mjs b/frontend/scripts/run-tests.mjs
new file mode 100644
index 000000000..0ea0f7b6a
--- /dev/null
+++ b/frontend/scripts/run-tests.mjs
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+// Runs every renderer unit test (src/**/*.test.ts, *.test.tsx) under node:test, with tsx doing the
+// TypeScript. One command for CI and for a dev machine: `node scripts/run-tests.mjs`, optionally
+// followed by file paths to run a subset. Exits non-zero if any test fails or nothing was found.
+import { spawnSync } from 'node:child_process';
+import { readdirSync, statSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const testFile = (p) => /\.test\.tsx?$/.test(p);
+
+function walk(dir, out) {
+  for (const name of readdirSync(dir)) {
+    if (name === 'node_modules' || name === 'dist') continue;
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) walk(p, out);
+    else if (testFile(p)) out.push(p);
+  }
+  return out;
+}
+
+const files = process.argv.length > 2 ? process.argv.slice(2) : walk(join(root, 'src'), []).sort();
+if (files.length === 0) {
+  console.error('run-tests: no test files found under src/');
+  process.exit(1);
+}
+// --require css-stub: some units live in component files that import a stylesheet; under node those
+// imports must resolve to nothing (Vite handles them in the bundle).
+const result = spawnSync(
+  process.execPath,
+  ['--import', 'tsx', '--require', './scripts/css-stub.cjs', '--test', ...files],
+  { cwd: root, stdio: 'inherit' },
+);
+process.exit(result.status ?? 1);
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index ec2a347ab..cc001c033 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -1,223 +1,45 @@
-import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import React, { useRef, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import TextField from '@mui/material/TextField';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { getMinimizedShot } from '@/app/pages/Dashboard/desktop/minimizedShots';
-import Fade from '@mui/material/Fade';
-import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import CloseIcon from '@mui/icons-material/Close';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import CheckIcon from '@mui/icons-material/Check';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { friendlyStatusLabel } from '@/shared/statusLabel';
-import { getScrollFocusedCard } from '@/shared/cardScrollFocus';
-import { dismissMcpSuggestion } from '@/shared/state/settingsSlice';
-import { openSettingsCard } from '@/shared/state/dashboardLayoutSlice';
-import { API_BASE, getAuthToken } from '@/shared/config';
-import {
-  sendMessage as sendMessageThunk,
-  launchAndSendFirstMessage,
-  generateTitle,
-  generateGroupMeta,
-  stopAgent,
-  handleApproval,
-  editMessage,
-  switchBranch,
-  duplicateSession,
-  setActiveSession,
-  updateSessionModel,
-  clearContextOverflow,
-  updateSessionMode,
-  updateSessionThinkingLevel,
-  updateThinkingLevel,
-  fetchSession,
-  AgentMessage,
-  clearSessionMessages,
-  clearMcpSuggestions,
-} from '@/shared/state/agentsSlice';
-import { displayChatTitle, isLegacyAutoName } from '@/shared/state/sessionDisplay';
-import { Typewriter } from '@/app/components/feedback/Animated';
-import { store } from '@/shared/state/store';
-import { fetchModes } from '@/shared/state/modesSlice';
-import { createSessionWs, acquireSessionWs, releaseSessionWs, seedSessionSeq } from '@/shared/ws/WebSocketManager';
-import StreamingBubble from './bubbles/StreamingBubble';
-import WelcomeQuickReplies from './WelcomeQuickReplies';
-import InlineSurfaceEmbeds from './shell/InlineSurfaceEmbeds';
+import type { WorkflowsRunContext } from '@/shared/state/dashboardLayoutSlice';
+import { useClaudeTokens, useThemeMode } from '@/shared/styles/ThemeContext';
+import { ContextPath } from '@/app/components/editor/DirectoryBrowser';
 import { useWelcomeGreeting } from './useWelcomeGreeting';
-import { THINKING_LABELS } from './thinkingLabels';
-import MessageBubble from './bubbles/MessageBubble';
-import BurstRevealBubble from './bubbles/BurstRevealBubble';
-import { estimateRenderedTextHeight, RECHECK_VISIBILITY_EVENT } from './bubbles/markdownMeasure';
-import CompactionMarker from './bubbles/CompactionMarker';
-import MessageActionBar from './shell/MessageActionBar';
-import ToolCallBubble, { ToolPair } from './tool-bubbles/ToolCallBubble';
-import ToolGroupBubble, { RenderItem, ToolGroup, ToolGroupEntry, isToolGroup, isToolPair } from './tool-bubbles/ToolGroupBubble';
-import ToolUiBubble from './tool-ui/ToolUiBubble';
-import AskUiBubble from './tool-ui/AskUiBubble';
-import { isShowUiPair, isAskUiPair, extractPendingAskUi, callToolUseId, resultToolUseId, isDeadAskResult } from './tool-ui/showUiPayload';
 import { composerPlaceholder } from './composerPlaceholder';
-import ApprovalBar, { BatchApprovalBar } from './shell/ApprovalBar';
+import { useBurstRevealTracking } from './bubbles/useBurstRevealTracking';
+import { useDockedBrowserSlot } from './shell/useDockedBrowserSlot';
+import { useJustStreamed } from './streaming/useJustStreamed';
+import { WorkflowModelNotice, FreeTrialModelNotice } from './model/ModelNotices';
+import { useMcpActivation } from './model/useMcpActivation';
+import { useMessageQueue, type QueuedMessage } from './queue/useMessageQueue';
+import { QueuePanel } from './queue/QueuePanel';
+import { AgentChatHeader } from './render/AgentChatHeader';
+import { useMessageScroll } from './scroll/useMessageScroll';
+import { FULLSCREEN_READING_MAX_W, MessageListBody } from './scroll/MessageListBody';
+import { TranscriptItem, type TranscriptItemVm } from './transcript/TranscriptItem';
+import { TranscriptFooter } from './transcript/TranscriptFooter';
+import { ContextOverflowCard } from './transcript/ContextOverflowCard';
+import { useTranscriptDerivations } from './transcript/useTranscriptDerivations';
+import { useToolGroupMeta } from './transcript/useToolGroupMeta';
+import { useBranchActions } from './transcript/useBranchActions';
+import { useSessionWs } from './session/useSessionWs';
+import { useSendPipeline } from './session/useSendPipeline';
+import { useModeModel } from './session/useModeModel';
+import { useWorkflowSidecar } from './session/useWorkflowSidecar';
+import { HaikuMcpWarning } from './composer/HaikuMcpWarning';
+import { McpSuggestionsBanner } from './composer/McpSuggestionsBanner';
+import { ContinueChatGlow } from './composer/ContinueChatGlow';
+import { PendingApprovalBars } from './shell/PendingApprovalBars';
 import ForceStopAgentBar from './ForceStopAgentBar';
 import { ProviderRetryPill, RateLimitPill } from './shell/RateLimitPill';
 import { ContextRecoveredPill } from './shell/ContextRecoveredPill';
 import ChatInput, { ChatInputHandle } from './ChatInput';
+import { useInitialContextPaths } from './ChatInput/hooks/useInitialContextPaths';
 import FollowupChips from './FollowupChips';
 import ContextDrawer from './shell/ContextDrawer';
-import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
-import { ContextPath } from '@/app/components/editor/DirectoryBrowser';
-import { setGlowingBrowserCards, fadeGlowingBrowserCards, clearGlowingBrowserCards, removeCard } from '@/shared/state/dashboardLayoutSlice';
-import { openCardContextMenu, isNativeMenuTarget, type CardMenuRow } from '../Dashboard/desktop/openCardContextMenu';
-import type { WorkflowsRunContext } from '@/shared/state/dashboardLayoutSlice';
-import { setCardSidecar, commitDraft, updateWorkflowCard, controlWorkflowRun } from '@/shared/state/workflowsSlice';
-import { shallowEqual } from 'react-redux';
-import { useClaudeTokens, useThemeMode } from '@/shared/styles/ThemeContext';
-import { parseMcpToolName, getMcpInputSummary } from '@/shared/mcpToolMeta';
-import { isNarration } from './parsing/isNarration';
-import { openMarketplace } from '@/app/pages/Directory/openMarketplace';
-
-const CONTEXT_WINDOWS: Record<string, number> = {
-  'opus-4-8': 1_000_000,
-  'opus-4-7': 1_000_000,
-  opus: 1_000_000,
-  sonnet: 1_000_000,
-  haiku: 200_000,
-};
-
-// Full size view reads like a chat page, not a card: the transcript + composer center in one
-// column at a comfortable measure (assistant-ui parks at 44rem, LibreChat 48rem; 760 splits them).
-const FULLSCREEN_READING_MAX_W = 760;
-
-// Only a fallback for never-rendered items; real heights are measured once on screen.
-const RENDER_ITEM_ESTIMATED_HEIGHT = 140;
-// Conservative estimate for an unmeasured tool row: tool groups/pairs render collapsed (~40-50px) far more often than expanded. Leaning low keeps scrollHeight (and the scrollbar thumb) from jumping when a tool row measures shorter.
-const COLLAPSED_TOOL_ROW_HEIGHT = 44;
-// How many screens of real content to keep mounted on EACH side of the viewport. Beyond it, items unmount and are replaced by a measured-height spacer, so render/memory stays bounded no matter how long the transcript is.
-const WINDOW_BUFFER_SCREENS_PER_SIDE = 3;
-// Below this item count the transcript renders WHOLE, no spacers, no windowing. Virtualization only earns its keep on huge chats; on a normal chat the spacer-height recompute just fights the scroll position (the "jumps up and down" glitch), so we skip it entirely until a chat is genuinely long.
-const WINDOW_MIN_ITEMS = 60;
-// Floor on the mounted item count so a single very tall item can't strand us with an effectively empty window.
-const MIN_WINDOW_BUFFER_ITEMS = 6;
-
-// Bootstrap count for the initial bottom-anchored slice (on open and on scroll-to-bottom): ONE screen's worth, so first paint mounts the minimum that fills the viewport. The post-settle recompute (scheduleWindowRecompute after the pin) widens to the full pixel band, so the buffer arrives a few frames later instead of taxing open-to-paint.
-function initialSeedItems(viewportHeight: number): number {
-  const fillPx = 1.25 * Math.max(1, viewportHeight);
-  return Math.max(MIN_WINDOW_BUFFER_ITEMS, Math.ceil(fillPx / RENDER_ITEM_ESTIMATED_HEIGHT));
-}
-
-// Pure window solver: given the current scroll position and a per-index height accessor (measured where known, estimated otherwise), return the [start, end) slice of render items that should be mounted. The buffer is measured in PIXELS (N screens of real content on each side of the viewport), not item count, so a few very tall messages can't blow the mounted set up to the whole transcript. A huge viewport naturally yields start=0/end=total (mount all).
-function computeDesiredWindow(
-  scrollTop: number,
-  clientHeight: number,
-  total: number,
-  heightOf: (index: number) => number,
-  bufferPx: number,
-): { start: number; end: number } {
-  if (total <= 0) return { start: 0, end: 0 };
-  const keepTop = scrollTop - bufferPx;
-  const keepBottom = scrollTop + clientHeight + bufferPx;
-  let offset = 0;
-  let start = -1;
-  let end = total;
-  for (let i = 0; i < total; i++) {
-    const h = heightOf(i);
-    const itemTop = offset;
-    const itemBottom = offset + h;
-    if (start === -1 && itemBottom > keepTop) start = i;
-    if (itemTop < keepBottom) {
-      end = i + 1;
-    } else {
-      // Everything past here starts below the keep band.
-      break;
-    }
-    offset += h;
-  }
-  if (start === -1) start = Math.max(0, total - 1);
-  end = Math.min(total, Math.max(end, start + 1));
-  // Always keep at least a small floor of items mounted around the viewport so a single under-measured item can't strand us with an empty window.
-  if (end - start < MIN_WINDOW_BUFFER_ITEMS) {
-    start = Math.max(0, Math.min(start, end - MIN_WINDOW_BUFFER_ITEMS));
-  }
-  return { start: Math.max(0, start), end };
-}
-
-function stringifyContent(content: any): string {
-  if (content == null) return '';
-  if (typeof content === 'string') return content;
-  return JSON.stringify(content);
-}
-
-// Content-aware height estimate for a render item that has never been measured. Tool rows and tiny system/thinking rows keep the flat fallback; message bubbles scale with their FULL text length (messages render in full once on-screen, so the estimate matches both the rendered bubble and MessageBubble's placeholder fallback).
-function estimateItemHeight(item: RenderItem, viewportWidth: number): number {
-  if (isToolGroup(item) || isToolPair(item)) return COLLAPSED_TOOL_ROW_HEIGHT;
-  const msg = item as AgentMessage;
-  if (msg.role === 'thinking' || msg.role === 'system') return 60;
-  return estimateRenderedTextHeight(stringifyContent(msg.content), viewportWidth);
-}
-
-const thinkingShimmerKeyframes = `
-@keyframes thinking-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-`;
-
-const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
-  const c = useClaudeTokens();
-  const shimmerBase = c.text.tertiary;
-  const shimmerHighlight = c.text.primary;
-  // Aux-LLM label wins; otherwise the pill stays plain "Thinking". The whimsical verbs read as personality
-  // in the per-message thinking bubble (MessageBubble), but as a vague, confusing status on a working card.
-  const display = label ? `${label}…` : `${THINKING_LABELS[0].live}…`;
-  // A quiet shimmer LINE, not a bordered card: status shares one visual language with the
-  // per-message thinking row, so only real content gets bubbles (the ChatGPT/Claude pattern).
-  return (
-    <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
-      <style>{thinkingShimmerKeyframes}</style>
-      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75, py: 0.5, px: 1, ml: -1 }}>
-        <Box
-          component="span"
-          sx={{
-            fontSize: '0.8125rem',
-            fontWeight: 500,
-            background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
-            backgroundSize: '200% 100%',
-            WebkitBackgroundClip: 'text',
-            backgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            color: 'transparent',
-            animation: 'thinking-shimmer 2s linear infinite',
-            transition: 'opacity 0.25s',
-          }}
-        >
-          {display}
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-interface QueuedMessage {
-  prompt: string;
-  images?: Array<{ data: string; media_type: string }>;
-  contextPaths?: Array<{ path: string; type: 'file' | 'directory' }>;
-  forcedTools?: string[];
-  attachedSkills?: Array<{ id: string; name: string; content: string }>;
-  selectedBrowserIds?: string[];
-  selectedAppIds?: string[];
-  attachedRunId?: string;
-  selectedSettingIds?: string[];
-}
 
 interface AgentChatProps {
   sessionId?: string;
@@ -242,657 +64,68 @@ interface AgentChatProps {
   onSendRunQuestion?: (prompt: string, runId: string) => Promise<void>;
 }
 
+// The chat orchestrator (AGENTCHAT_SPLIT_PLAN done-state): wires the session/ hooks (transport, send pipeline, mode/model, workflow sidecar),
+// the transcript/ derivations + actions, and the scroll/ mechanism into the header / transcript / approvals / composer render. Composition only.
 const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose, embedded, autoFocus, isGlowing, onDismissGlow, initialContextPaths, onBranch, workflowEditId, readOnly, fullscreenChat, prefillPrompt, runContext, onClearRunContext, onSendRunQuestion }) => {
   const c = useClaudeTokens();
-  // Fullscreen is a flat theme ground, same as Claude's: the old accent wash from the top read as
-  // decoration and dated the whole surface.
+  // Fullscreen is a flat theme ground, same as Claude's: the old accent wash from the top read as decoration and dated the whole surface.
   const { mode: themeMode } = useThemeMode();
   const fullscreenWash = fullscreenChat ? (themeMode === 'dark' ? '#1a1918' : '#F5F5F0') : undefined;
-  const STATUS_STYLES: Record<string, { color: string; bg: string }> = {
-    running: { color: c.status.success, bg: c.status.successBg },
-    waiting_approval: { color: c.status.warning, bg: c.status.warningBg },
-    completed: { color: c.text.tertiary, bg: c.bg.secondary },
-    error: { color: c.status.error, bg: c.status.errorBg },
-    stopped: { color: c.text.tertiary, bg: c.bg.secondary },
-  };
   const { id: routeId } = useParams<{ id: string }>();
   const id = sessionIdProp || routeId;
-  // True while a spawned surface (browser or built app) calls this chat home; gates the dock slot the real card overlays.
-  const hasDockedBrowser = useAppSelector((st) =>
-    Object.values(st.dashboardLayout.browserCards).some((bc) => bc.docked_to === (sessionIdProp || routeId)) ||
-    Object.values(st.dashboardLayout.viewCards).some((vc) => vc.docked_to === (sessionIdProp || routeId)));
-  // The docked surface's aspect ratio, so the inline slot hugs the browser's shape instead of reserving a fixed letterbox band (primitive selectors so no fresh-object rerenders). Highest z wins, mirroring BrowserCard's dock-owner election, so a dead rival's stale dock never feeds dims or shots.
-  const pickTopDocked = (st: { dashboardLayout: { zOrders: Record<string, number>; browserCards: Record<string, { browser_id: string; docked_to?: string | null; width: number; height: number; zOrder: number }> } }) => {
-    let best: { browser_id: string; width: number; height: number; zOrder: number } | null = null;
-    let bestZ = -1;
-    const zOf = (b: { browser_id: string; zOrder: number }): number => st.dashboardLayout.zOrders[b.browser_id] ?? b.zOrder ?? 0;
-    for (const b of Object.values(st.dashboardLayout.browserCards)) {
-      if (b.docked_to !== (sessionIdProp || routeId)) continue;
-      if (!best || zOf(b) > bestZ) { best = b; bestZ = zOf(b); }
-    }
-    return best;
-  };
-  const dockedSurfaceW = useAppSelector((st) => pickTopDocked(st)?.width ?? 0);
-  const dockedSurfaceH = useAppSelector((st) => pickTopDocked(st)?.height ?? 0);
-  const dockedSurfaceId = useAppSelector((st) => pickTopDocked(st)?.browser_id ?? null);
-  // Shared by the anchor slot and the fallback slot so both read as the same framed block.
-  const browserSlotSx = {
-    position: 'relative',
-    // When the height cap bites, the WIDTH shrinks to keep the slot at the page's exact aspect (a maxHeight that broke the ratio left the live overlay letterboxed inside its own frame).
-    width: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? `min(100%, calc(min(480px, 52vh) * ${dockedSurfaceW / dockedSurfaceH}))` : '100%',
-    aspectRatio: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? `${dockedSurfaceW} / ${dockedSurfaceH}` : undefined,
-    height: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? 'auto' : 'min(360px, 38vh)',
-    minHeight: 140,
-    mx: 'auto',
-    mt: 1,
-    mb: 0.5,
-    borderRadius: '12px',
-    overflow: 'hidden',
-    border: `1px solid ${c.border.medium}`,
-    // The live overlay stamps data-mini-live; while it paints, the frozen-shot backdrop must not (the clamped overlay leaves margins where a misaligned second copy of the page peeked through).
-    '&[data-mini-live="1"] img': { opacity: 0 },
-  } as const;
-  // The slot announces its own (re)mount so the docked mini re-measures exactly then, instead of polling rects on a timer (the windowed transcript remounts it with no resize/pan event firing).
-  const announceBrowserSlot = useCallback((el: HTMLElement | null) => {
-    if (el) window.dispatchEvent(new CustomEvent('openswarm:browser-slot-mounted', { detail: { id } }));
-  }, [id]);
-  // A live webview cannot be clipped by the scroller, so the OVERLAY only shows while fully in view; this frozen shot is what scrolls and clips underneath it, ChatGPT-style.
-  const dockedShot = dockedSurfaceId ? getMinimizedShot(dockedSurfaceId) : undefined;
-  const browserSlotBody = dockedShot ? (
-    <Box component="img" src={dockedShot} alt="" sx={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
-  ) : null;
-  // A card linked as a workflow sidecar (Test Agent, or a watched run) swaps its composer for a Force Stop button: continuing the chat is meaningless, but killing the run is the common need. Once a Test Agent finishes, the button flips to a green "close" (see workflow_test_state + ForceStopAgentBar).
-  const linkedSidecar = useAppSelector((s) => {
-    const found = Object.values(s.workflows.openCards).find(
-      (cd) => cd.sidecarSessionId === id && (cd.sidecarKind === 'testing' || cd.sidecarKind === 'watching'),
-    );
-    return found
-      ? { workflowId: found.workflowId, runId: found.runId ?? null, kind: found.sidecarKind ?? null }
-      : null;
-  }, shallowEqual);
-  const linkedWorkflowId = linkedSidecar?.workflowId ?? null;
-  const isStoppableSidecar = !!linkedWorkflowId;
-  // A live workflow run being watched owns pause/resume from its workflow card, so the chat's own "Resume Agent Response" bubble is redundant and would go stale against the card's Resume. Suppress it for any workflow-run sidecar, not just the fragile exact "watching" value. Test-run sidecars keep their chat-level resume behavior.
-  const isWorkflowRunSidecar = useAppSelector((s) => {
-    if (!id) return false;
-    for (const cd of Object.values(s.workflows.openCards)) {
-      if (cd.sidecarSessionId !== id || cd.sidecarKind === 'testing') continue;
-      if (cd.runId) {
-        const run = (s.workflows.runs[cd.workflowId] || []).find((r) => r.id === cd.runId);
-        if (!run || run.session_id === id) return true;
-      }
-      if (cd.sidecarKind === 'watching' || cd.sidecarKind === 'viewing-completed' || cd.sidecarKind === 'viewing-error') return true;
-    }
-    return Object.values(s.workflows.runs).some((runs) =>
-      runs.some((r) => r.session_id === id && r.status === 'running'),
-    );
-  });
-  const testState = useAppSelector((s) => (id ? s.agents.sessions[id]?.workflow_test_state : null) ?? null);
   const dispatch = useAppDispatch();
   const session = useAppSelector((state) => (id ? state.agents.sessions[id] : undefined));
-  const modesMap = useAppSelector((state) => state.modes.items);
-  const modelsByProvider = useAppSelector((state) => state.models.byProvider);
   const connectionMode = useAppSelector((state) => state.settings.data.connection_mode);
+  const { isStoppableSidecar, isWorkflowRunSidecar, testState, handleStop, onTestContinueEditing, onTestSaveWorkflow } = useWorkflowSidecar(id);
 
-  // Stored value → curated picker label, with a tidy fallback for unknowns.
-  const resolveModelLabel = useCallback((value: string | null | undefined): string => {
-    if (!value) return '';
-    for (const models of Object.values(modelsByProvider)) {
-      for (const m of models as any[]) {
-        if (m.value === value) return m.label;
-      }
-    }
-    let s = String(value);
-    if (s.startsWith('or:')) s = s.slice(3);
-    if (s.includes('/')) s = s.split('/').pop() || s;
-    return s;
-  }, [modelsByProvider]);
-  // Used by the "too many connected apps for Haiku" warning rendered above ChatInput. Each connected MCP adds a meaningful chunk of tool-schema tokens to every request; Haiku 4.5's 200K window can't hold 5+ of them.
-  const toolItems = useAppSelector((state) => state.tools.items);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const lastVisibleItemRef = useRef<HTMLDivElement>(null);
   const chatInputRef = useRef<ChatInputHandle>(null);
-  const isAtBottomRef = useRef(true);
-  const pendingInitialBottomScrollRef = useRef(false);
-  const initialBottomScrollSettledRef = useRef(false);
-  const renderItemsLengthRef = useRef(0);
-  const renderItemsRef = useRef<RenderItem[]>([]);
-  const itemHeightsRef = useRef<Map<string, number>>(new Map());
-  const estimateCacheRef = useRef<Map<string, number>>(new Map());
-  const viewportWidthRef = useRef(0);
-  const windowStartRef = useRef(0);
-  const windowEndRef = useRef(0);
-  const windowScrollRafRef = useRef<number | null>(null);
-  const [viewportHeight, setViewportHeight] = useState(0);
-  const [viewportWidth, setViewportWidth] = useState(0);
-  const [scrollRoot, setScrollRoot] = useState<HTMLDivElement | null>(null);
-  const [windowStart, setWindowStart] = useState(0);
-  const [windowEnd, setWindowEnd] = useState(0);
-  const [heightVersion, setHeightVersion] = useState(0);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const [showResumeBubble, setShowResumeBubble] = useState(false);
-  useEffect(() => {
-    if (isWorkflowRunSidecar) setShowResumeBubble(false);
-  }, [isWorkflowRunSidecar]);
-  const [awaitingResponse, setAwaitingResponse] = useState(false);
-  const [preSendActivityLabel, setPreSendActivityLabel] = useState<string | null>(null);
-  const [activatingMcp, setActivatingMcp] = useState<string | null>(null);
-  const [activateError, setActivateError] = useState<string | null>(null);
-  // Holds the last non-empty suggestions so the docked banner's exit fade renders them instead of going blank the instant the array is cleared.
-  const mcpSnapshotRef = useRef<Array<{ id: string; title: string; description: string; reason?: string }>>([]);
-  const [mode, setMode] = useState('agent');
-  const [model, setModel] = useState('opus-5');
-  // Workflow build chat only: brief "this model now runs the workflow" notice when the user switches models, so the run-model change isn't silent.
-  const [workflowModelNotice, setWorkflowModelNotice] = useState<string | null>(null);
-  const workflowModelNoticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [freeTrialModelNotice, setFreeTrialModelNotice] = useState<{ kind: 'connect' | 'spent'; label: string } | null>(null);
-  const freeTrialModelNoticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const freeTrialRemaining = useAppSelector((s) => s.settings.data.free_trial_remaining);
-
-  // Read live in the stable handleSend/dispatchMessage closures without busting their memo (ChatInput leans on handleSend identity holding across renders).
-  const runContextRef = useRef(runContext);
-  runContextRef.current = runContext;
-  const onSendRunQuestionRef = useRef(onSendRunQuestion);
-  onSendRunQuestionRef.current = onSendRunQuestion;
-
-  const wsRef = useRef<ReturnType<typeof createSessionWs> | null>(null);
-  // Current status for the WS-cleanup closure (effect deps can't include it).
-  const statusRef = useRef<string | undefined>(undefined);
-  const initialContextApplied = useRef(false);
-  const messageQueueRef = useRef<QueuedMessage[]>([]);
-  const [queueLength, setQueueLength] = useState(0);
-  const [queueExpanded, setQueueExpanded] = useState(false);
-  const [editingQueueIdx, setEditingQueueIdx] = useState<number | null>(null);
-  const [editingQueueText, setEditingQueueText] = useState('');
-  const [dragIdx, setDragIdx] = useState<number | null>(null);
-  const [dropTargetIdx, setDropTargetIdx] = useState<number | null>(null);
+  const mcpActivation = useMcpActivation(dispatch, id);
+  const queue = useMessageQueue();
 
   const isDraft = session?.status === 'draft';
   const { greetingDone: welcomeGreetingDone } = useWelcomeGreeting(session, isDraft);
 
-  useEffect(() => {
-    if (!id || isDraft) return;
-    let cancelled = false;
-    let ws: ReturnType<typeof createSessionWs> | null = null;
-    // Order matters: hydrate the persisted message list from REST FIRST, THEN connect the WS. The WS resume protocol replays buffered events starting at last_seq=0, which includes every stream_* event for messages that finished before the disconnect. The replay-skip guard in WebSocketManager._messageAlreadyComplete checks `session.messages` to decide whether to drop deltas, so if we connect first, the slice is empty when the replay arrives, the guard returns false, and the user sees the chat type itself out again. Awaiting fetchSession before connect makes the slice authoritative before any replay event lands.
-    (async () => {
-      // The await exists so the slice isn't EMPTY at replay time. A warm store (remount after a hop) already satisfies that, so connect immediately and let the fetch reconcile in the background; awaiting serialized a slow round trip in front of the live stream on every reopen.
-      const warm = !!store.getState().agents.sessions[id]?.messages?.length;
-      if (warm) {
-        dispatch(fetchSession(id));
-      } else {
-        try {
-          const action = await dispatch(fetchSession(id));
-          // Seed the resume cursor from the snapshot's seq so the connect below doesn't replay the whole ring buffer we just hydrated over REST.
-          if (fetchSession.fulfilled.match(action)) {
-            const seq = (action.payload as { event_seq?: number }).event_seq;
-            if (typeof seq === 'number') seedSessionSeq(id, seq);
-          }
-        } catch {
-          // Even if the REST hydrate fails, still connect, the WS resume protocol can hydrate from buffered events as a fallback.
-        }
-      }
-      if (cancelled) return;
-      // acquireSessionWs reuses a still-open socket kept alive from the last hop, so an active agent's stream resumes with no reconnect handshake. connect() is a no-op when the reused socket is already open.
-      ws = acquireSessionWs(id);
-      ws.connect();
-      wsRef.current = ws;
-    })();
-    return () => {
-      cancelled = true;
-      if (ws) {
-        const st = statusRef.current;
-        const active = st === 'running' || st === 'waiting_approval';
-        releaseSessionWs(id, ws, active);
-      }
-      wsRef.current = null;
-    };
-  }, [id, isDraft, dispatch]);
-
-  useEffect(() => {
-    if (initialContextApplied.current || !initialContextPaths?.length) return;
-    const timer = setTimeout(() => {
-      chatInputRef.current?.setContent('', initialContextPaths);
-      initialContextApplied.current = true;
-    }, 50);
-    return () => clearTimeout(timer);
-  }, [initialContextPaths]);
-
-  useEffect(() => {
-    if (session) setMode(session.mode);
-  }, [session?.mode]);
-
-  useEffect(() => {
-    if (session) setModel(session.model);
-  }, [session?.model]);
-
-  useEffect(() => {
-    if (Object.keys(modesMap).length === 0) dispatch(fetchModes());
-  }, [dispatch, modesMap]);
+  const {
+    mode, setMode, model, modesMap, resolveModelLabel,
+    handleModeChange, handleModelChange, handleThinkingLevelChange,
+    workflowNotice, freeTrialNotice,
+  } = useModeModel({ id, isDraft, session, workflowEditId, connectionMode });
 
-  const dispatchMessage = useCallback((msg: QueuedMessage) => {
-    if (!id) return;
-    setShowResumeBubble(false);
-    setAwaitingResponse(true);
-    if (isDraft) {
-      const config: Record<string, any> = { model, mode };
-      if (session?.system_prompt) config.system_prompt = session.system_prompt;
-      if (session?.target_directory) config.target_directory = session.target_directory;
-      // Carry the draft's dashboard so the launched session stays ON this dashboard; without it the session lands dashboard_id=null, drops out of the reconcile filter, and its card vanishes the instant you send (looked like "the chat quit when I clicked an option").
-      if (session?.dashboard_id) config.dashboard_id = session.dashboard_id;
-      // Editing an existing app: bind the launch to it so the backend edits in place instead of seeding a duplicate empty app (App Builder mode only).
-      if (msg.selectedAppIds?.length) config.selected_app_output_ids = msg.selectedAppIds;
-      dispatch(
-        launchAndSendFirstMessage({ draftId: id, config, prompt: msg.prompt, mode, model, images: msg.images, contextPaths: msg.contextPaths, forcedTools: msg.forcedTools, attachedSkills: msg.attachedSkills, selectedBrowserIds: msg.selectedBrowserIds, selectedAppIds: msg.selectedAppIds, selectedSettingIds: msg.selectedSettingIds })
-      ).then((action) => {
-        if (launchAndSendFirstMessage.fulfilled.match(action)) {
-          const realId = action.payload.session.id;
-          dispatch(generateTitle({ sessionId: realId, prompt: msg.prompt }));
-          if (msg.selectedBrowserIds?.length) {
-            dispatch(setGlowingBrowserCards({ browserIds: msg.selectedBrowserIds, sessionId: realId, label: 'Use Browser' }));
-          }
-        }
-      });
-    } else if (msg.attachedRunId && onSendRunQuestionRef.current) {
-      // Run-context question: the backend folds the run transcript into this one turn and echoes the user bubble + answer over WS, so no optimistic thunk.
-      onSendRunQuestionRef.current(msg.prompt, msg.attachedRunId).catch(() => setAwaitingResponse(false));
-    } else {
-      if (msg.selectedBrowserIds?.length) {
-        dispatch(setGlowingBrowserCards({ browserIds: msg.selectedBrowserIds, sessionId: id, label: 'Use Browser' }));
-      }
-      dispatch(sendMessageThunk({ sessionId: id, prompt: msg.prompt, mode, model, images: msg.images, contextPaths: msg.contextPaths, forcedTools: msg.forcedTools, attachedSkills: msg.attachedSkills, selectedBrowserIds: msg.selectedBrowserIds, selectedAppIds: msg.selectedAppIds, selectedSettingIds: msg.selectedSettingIds }))
-        .then((action) => {
-          if (sendMessageThunk.rejected.match(action)) {
-            setAwaitingResponse(false);
-          }
-        });
-    }
-  }, [id, isDraft, mode, model, session?.system_prompt, session?.target_directory, session?.dashboard_id, dispatch]);
-
-  statusRef.current = session?.status;
-
-  const agentBusy = awaitingResponse || (!isDraft && (session?.status === 'running' || session?.status === 'waiting_approval'));
-
-  const prevStatusRef = useRef(session?.status);
-  useEffect(() => {
-    const prev = prevStatusRef.current;
-    const curr = session?.status;
-    prevStatusRef.current = curr;
-    let didDispatchQueued = false;
-
-    const wasActive = prev === 'running' || prev === 'waiting_approval';
-    const isTerminal = curr === 'completed' || curr === 'stopped' || curr === 'error';
-
-    if (wasActive && isTerminal) {
-      if (id) {
-        dispatch(fadeGlowingBrowserCards(id));
-        setTimeout(() => dispatch(clearGlowingBrowserCards(id)), 600);
-      }
-
-      const nextQueued = messageQueueRef.current.shift();
-      if (nextQueued) {
-        setQueueLength(messageQueueRef.current.length);
-        dispatchMessage(nextQueued);
-        didDispatchQueued = true;
-      } else {
-        if (curr === 'stopped') {
-          setShowResumeBubble(!isWorkflowRunSidecar);
-        }
-      }
-
-      const currentMode = modesMap[mode];
-      if (currentMode?.default_next_mode && modesMap[currentMode.default_next_mode]) {
-        setMode(currentMode.default_next_mode);
-        if (id && !isDraft) {
-          dispatch(updateSessionMode({ sessionId: id, mode: currentMode.default_next_mode as any }));
-        }
-      }
-    }
-    if (curr === 'running') {
-      setShowResumeBubble(false);
-    }
-    if (curr !== 'draft' && !didDispatchQueued) {
-      setAwaitingResponse(false);
-    }
-  }, [session?.status, mode, modesMap, id, isDraft, dispatch, dispatchMessage, isWorkflowRunSidecar]);
-
-  // A reload remounts past the live running->stopped transition that first shows the resume button, so re-derive it once from the persisted 'stopped' status (transcript-gated so a cleared chat can't resurrect it).
-  const resumeHydratedRef = useRef(false);
-  useEffect(() => {
-    if (resumeHydratedRef.current) return;
-    if (session?.status === 'stopped' && (session?.messages?.length ?? 0) > 0) {
-      resumeHydratedRef.current = true;
-      setShowResumeBubble(true);
-    }
-  }, [session?.status, session?.messages?.length]);
-
-  // Idle reconcile: if the session has been 'running' for 5s with no WebSocket activity (no new messages, no streaming updates), do a single GET to fetch the real status from the backend. Catches the case where the completion WebSocket event was dropped (network blip, sleep/wake, SDK subprocess dying). Resets on every activity signal so it never fires during normal streaming.
-  const reconcileTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const messageCount = session?.messages?.length ?? 0;
-  // Subscribe only to the streaming MESSAGE ID (stable across the 30Hz delta updates), never to the content. The actual streaming text renders inside the leaf <StreamingBubble> below, which subscribes to the content itself. This keeps AgentChat's render and useEffects dormant during streaming; only the bubble updates per delta.
+  // Subscribe only to the streaming MESSAGE ID (stable across the 30Hz delta updates), never to the content. The actual streaming text renders inside the leaf <StreamingBubble> (TranscriptFooter), which subscribes to the content itself. This keeps AgentChat's render and useEffects dormant during streaming; only the bubble updates per delta.
   const streamingMessageId = useAppSelector((s) => id ? s.streaming.bySession[id]?.id ?? null : null);
   const hasStreaming = !!streamingMessageId;
+  const justStreamedId = useJustStreamed(streamingMessageId);
 
-  useEffect(() => {
-    if (
-      streamingMessageId ||
-      session?.turn_label?.label ||
-      session?.status === 'completed' ||
-      session?.status === 'error' ||
-      session?.status === 'stopped'
-    ) {
-      setPreSendActivityLabel(null);
-    }
-  }, [streamingMessageId, session?.turn_label?.label, session?.status]);
-
-  useEffect(() => {
-    if (reconcileTimer.current) {
-      clearTimeout(reconcileTimer.current);
-      reconcileTimer.current = null;
-    }
-
-    if (!id || session?.status !== 'running') return;
-
-    reconcileTimer.current = setTimeout(() => {
-      reconcileTimer.current = null;
-      dispatch(fetchSession(id));
-    }, 5000);
-
-    return () => {
-      if (reconcileTimer.current) {
-        clearTimeout(reconcileTimer.current);
-        reconcileTimer.current = null;
-      }
-    };
-  }, [id, session?.status, messageCount, hasStreaming, dispatch]);
-
-  const SCROLL_THRESHOLD = 50;
-
-  // Reserved pixel height for a render item: the measured height once we have one, otherwise a content-aware estimate (cached per id). The spacer math and the window solver both go through this so unmounted spacers, freshly-mounted placeholders, and the real rendered bubble all reserve the same space.
-  const reservedHeightForItem = useCallback((item: RenderItem | undefined): number => {
-    if (!item) return RENDER_ITEM_ESTIMATED_HEIGHT;
-    const measured = itemHeightsRef.current.get(item.id);
-    if (measured != null) return measured;
-    const cached = estimateCacheRef.current.get(item.id);
-    if (cached != null) return cached;
-    const est = estimateItemHeight(item, viewportWidthRef.current);
-    estimateCacheRef.current.set(item.id, est);
-    return est;
-  }, []);
-
-  // Measured-or-estimated pixel height of render item at `index`, for the window solver (reads the renderItems ref so it is valid inside rAF callbacks).
-  const heightOf = useCallback((index: number): number => {
-    return reservedHeightForItem(renderItemsRef.current[index]);
-  }, [reservedHeightForItem]);
-
-  // Solve the mounted window from the live scroll position and push it to state when it changes. Scroll position itself is preserved by the container's overflow-anchor plus the measured-height spacers, so we never touch scrollTop here. Following (pinned to bottom) always keeps the newest item.
-  const applyWindowFromScroll = useCallback(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    if (!initialBottomScrollSettledRef.current) return;
-    const total = renderItemsLengthRef.current;
-    // Below the windowing threshold the whole transcript is mounted; recomputing a window here would only churn the spacers and shift scroll. Leave it alone.
-    if (total < WINDOW_MIN_ITEMS) return;
-    const clientHeight = Math.max(1, el.clientHeight);
-    const tightPx = WINDOW_BUFFER_SCREENS_PER_SIDE * clientHeight;
-    // Mount with the tight buffer, but keep already-mounted items until they drift a full extra screen past it. Without this, an item sitting right on the buffer edge flip-flops mounted/unmounted forever: mounting it shifts content above the viewport, overflow-anchor nudges scrollTop a few px, that re-runs the solver, which now excludes it, and round it goes.
-    const loosePx = tightPx + clientHeight;
-    const tight = computeDesiredWindow(el.scrollTop, clientHeight, total, heightOf, tightPx);
-    const loose = computeDesiredWindow(el.scrollTop, clientHeight, total, heightOf, loosePx);
-    const curStart = windowStartRef.current;
-    const curEnd = windowEndRef.current;
-    // Must-mount the tight band; keep current edges only while still inside loose.
-    let start = Math.max(loose.start, Math.min(curStart, tight.start));
-    let end = Math.min(loose.end, Math.max(curEnd, tight.end));
-    if (isAtBottomRef.current) end = total;
-    start = Math.max(0, Math.min(start, Math.max(0, end - 1)));
-    if (start === curStart && end === curEnd) return;
-    windowStartRef.current = start;
-    windowEndRef.current = end;
-    setWindowStart(start);
-    setWindowEnd(end);
-  }, [heightOf]);
-
-  const scheduleWindowRecompute = useCallback(() => {
-    if (windowScrollRafRef.current != null) return;
-    windowScrollRafRef.current = requestAnimationFrame(() => {
-      windowScrollRafRef.current = null;
-      applyWindowFromScroll();
-    });
-  }, [applyWindowFromScroll]);
+  useSessionWs(id, isDraft, session?.status, { messageCount: session?.messages?.length ?? 0, hasStreaming });
 
-  useEffect(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    setScrollRoot(el);
+  useInitialContextPaths(chatInputRef, initialContextPaths);
 
-    const updateViewport = () => {
-      setViewportHeight(el.clientHeight);
-      setViewportWidth(el.clientWidth);
-      // Width drives the char-per-line estimate; drop cached estimates so they recompute at the new width (measured heights are unaffected and kept).
-      estimateCacheRef.current.clear();
-      // Resize changes the budgets and how many items fit; re-solve the window off the current scroll position WITHOUT resetting it (only session / branch changes reset). overflow-anchor holds the visible content.
-      scheduleWindowRecompute();
-    };
+  const {
+    dispatchMessage, agentBusy, awaitingResponse, showResumeBubble,
+    preSendActivityLabel, setPreSendActivityLabel, handleResume, handleResetHistory,
+  } = useSendPipeline({ id, isDraft, session, mode, model, setMode, modesMap, queue, isWorkflowRunSidecar, streamingMessageId, onSendRunQuestion });
 
-    updateViewport();
-    const observer = new ResizeObserver(updateViewport);
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-      if (windowScrollRafRef.current != null) {
-        cancelAnimationFrame(windowScrollRafRef.current);
-        windowScrollRafRef.current = null;
-      }
-      setScrollRoot(null);
-    };
-  }, [id, session?.id, scheduleWindowRecompute]);
-
-  // Burst-reveal bookkeeping: ids present at open (or after a session/branch hop) are HISTORY and
-  // never animate; only ids that appear later, while the agent is working, type themselves out.
-  const seenMessageIdsRef = useRef<Set<string> | null>(null);
-
-  React.useLayoutEffect(() => {
-    seenMessageIdsRef.current = null;
-    const seed = initialSeedItems(viewportHeight);
-    const total = renderItemsLengthRef.current;
-    const end = total;
-    const start = Math.max(0, end - seed);
-    windowStartRef.current = start;
-    windowEndRef.current = end;
-    setWindowStart(start);
-    setWindowEnd(end);
-    itemHeightsRef.current.clear();
-    estimateCacheRef.current.clear();
-    if (initialPinRafRef.current != null) {
-      cancelAnimationFrame(initialPinRafRef.current);
-      initialPinRafRef.current = null;
-    }
-    pendingInitialBottomScrollRef.current = true;
-    initialBottomScrollSettledRef.current = false;
-    isAtBottomRef.current = true;
-    setShowScrollButton(false);
-  }, [id, session?.active_branch_id]);
-
-  const handleScroll = useCallback(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    // Measure against the real content bottom, not the locked-height pad below it.
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < SCROLL_THRESHOLD;
-    isAtBottomRef.current = atBottom;
-    setShowScrollButton(!atBottom);
-    // Slide the mounted window to follow the viewport (loads newer/older items and unloads ones that drifted past the buffer on either side).
-    scheduleWindowRecompute();
-  }, [scheduleWindowRecompute]);
-
-  // Prevent scroll from leaking into the dashboard canvas when at boundaries
-  useEffect(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    const onWheel = (e: WheelEvent) => {
-      // Pinch-to-zoom (ctrl/meta + wheel) must reach the canvas viewport so the dashboard zooms when the cursor is over an agent's chat panel. Without this early-out the unconditional stopPropagation below kills ctrl+wheel and the canvas listener never fires.
-      if (e.ctrlKey || e.metaKey) return;
-      // Horizontal-dominant gestures must also reach the canvas so a sideways swipe pans the dashboard (chat has no horizontal scroll to absorb).
-      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
-      // Google Maps model: a plain wheel over a chat you haven't clicked INTO belongs to the canvas, so let it through instead of swallowing it here (this is what made zoom look dead over any chat).
-      const cardId = el.closest('[data-select-id]')?.getAttribute('data-select-id') ?? null;
-      if (cardId && cardId !== getScrollFocusedCard()) return;
-      const atTop = el.scrollTop <= 0;
-      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
-      const scrollingDown = e.deltaY > 0;
-      const scrollingUp = e.deltaY < 0;
-      if ((scrollingUp && atTop) || (scrollingDown && atBottom)) {
-        e.preventDefault();
-      }
-      e.stopPropagation();
-    };
-    el.addEventListener('wheel', onWheel, { passive: false });
-    return () => el.removeEventListener('wheel', onWheel);
-  }, []);
-
-  const scrollToBottomRafRef = useRef<number | null>(null);
-  const scrollToBottom = useCallback(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    isAtBottomRef.current = true;
-    setShowScrollButton(false);
-    // When scrolled far up the newest items are unmounted behind the bottom spacer (estimated height). Jump the window to the bottom slice so they actually mount, then pin across several frames: a single scrollTop=scrollHeight lands short because the spacer collapses and the freshly-mounted items replace their estimates with real measured heights, changing scrollHeight.
-    const total = renderItemsLengthRef.current;
-    const start = Math.max(0, total - initialSeedItems(el.clientHeight));
-    windowStartRef.current = start;
-    windowEndRef.current = total;
-    setWindowStart(start);
-    setWindowEnd(total);
-    if (scrollToBottomRafRef.current != null) cancelAnimationFrame(scrollToBottomRafRef.current);
-    let frame = 0;
-    const FRAMES = 16; // ~260ms, enough for the window + oversized blocks to settle
-    const pin = () => {
-      const c = scrollContainerRef.current;
-      if (!c) { scrollToBottomRafRef.current = null; return; }
-      c.scrollTop = c.scrollHeight;
-      lastScrollHeightRef.current = c.scrollHeight;
-      isAtBottomRef.current = true;
-      if (++frame < FRAMES) {
-        scrollToBottomRafRef.current = requestAnimationFrame(pin);
-      } else {
-        scrollToBottomRafRef.current = null;
-        // Jump has settled: re-evaluate oversized message / block visibility synchronously so nothing now in view is stuck as a placeholder.
-        c.dispatchEvent(new CustomEvent(RECHECK_VISIBILITY_EVENT));
-      }
-    };
-    pin();
-  }, []);
-
-  const scrollRafRef = useRef<number | null>(null);
-  const pinRafRef = useRef<number | null>(null);
-  const initialPinRafRef = useRef<number | null>(null);
-  const lastScrollHeightRef = useRef<number>(0);
-  // Shared scroll-stick routine. Used both by the structural-events useEffect below (new message lands / stream starts/ends) and by StreamingBubble's onStreamGrew callback (per-delta growth). RAF + height-grew gate ensures we only set scrollTop when needed.
-  const stickToBottomIfNeeded = useCallback(() => {
-    if (!isAtBottomRef.current) return;
-    if (scrollRafRef.current != null) return;
-    scrollRafRef.current = requestAnimationFrame(() => {
-      scrollRafRef.current = null;
-      if (!isAtBottomRef.current) return;
-      const el = scrollContainerRef.current;
-      if (!el) return;
-      const newHeight = el.scrollHeight;
-      if (newHeight === lastScrollHeightRef.current) return;
-      lastScrollHeightRef.current = newHeight;
-      el.scrollTop = newHeight;
-    });
-  }, []);
-  useEffect(() => {
-    stickToBottomIfNeeded();
-    // Structural triggers only: a new message lands or a stream starts/ends. Streaming content updates trigger this via <StreamingBubble onStreamGrew={stickToBottomIfNeeded} /> instead so AgentChat stays dormant during the 30Hz delta storm.
-  }, [session?.messages.length, streamingMessageId, stickToBottomIfNeeded]);
-
-  // While a stream is LIVE, pin every frame: smooth-text grows between onStreamGrew callbacks, and the callback's own rAF deferral let the bottom drift up to ~100px for several frames. Parks the moment the stream ends, so idle cost is zero.
-  useEffect(() => {
-    if (!streamingMessageId) return undefined;
-    let raf = 0;
-    const pin = () => {
-      const el = scrollContainerRef.current;
-      if (el && isAtBottomRef.current && el.scrollHeight !== lastScrollHeightRef.current) {
-        lastScrollHeightRef.current = el.scrollHeight;
-        el.scrollTop = el.scrollHeight;
-      }
-      raf = requestAnimationFrame(pin);
-    };
-    raf = requestAnimationFrame(pin);
-    return () => cancelAnimationFrame(raf);
-  }, [streamingMessageId]);
-
-  // Stream-end re-stick. When a stream finishes, the live bubble (smooth-revealed text) is replaced by the committed bubble rendering FULL markdown with contentVisibility placeholders; as those resolve, Chromium's overflow-anchor re-anchors to an EARLIER element (the user message), yanking the view up to "the top of the user input". A single deferred scroll loses the race because that anchor shift fires an onScroll that flips isAtBottomRef false before we run. Fix: snapshot the "was following" intent the moment streaming stops (captured continuously during the stream, before any completion re-render), then pin to bottom across a short multi-frame window that OVERRIDES the layout-induced flip. A genuine user scroll-away (wheel/touch) during that window aborts the pin, honoring "unless the user scrolls up".
-  const prevStreamingIdRef = useRef<string | null>(null);
-  const wasFollowingRef = useRef(true);
-  const pinAbortRef = useRef(false);
-  // Keep the follow-intent fresh while streaming so it's accurate at the instant the stream ends (handleScroll updates isAtBottomRef on every real scroll).
-  if (streamingMessageId) wasFollowingRef.current = isAtBottomRef.current;
-  useEffect(() => {
-    const prev = prevStreamingIdRef.current;
-    prevStreamingIdRef.current = streamingMessageId;
-    if (!(prev && !streamingMessageId)) return;
-    if (!wasFollowingRef.current) return; // user had scrolled up; leave them be
-    pinAbortRef.current = false;
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    // Abort the pin only on a deliberate scroll-away gesture, not the layout-induced onScroll the commit itself triggers.
-    const onUserScrollAway = (e: Event) => {
-      if ((e as WheelEvent).deltaY != null && (e as WheelEvent).deltaY < 0) pinAbortRef.current = true; // wheel up
-      else if (e.type === 'touchmove') pinAbortRef.current = true;
-    };
-    el.addEventListener('wheel', onUserScrollAway, { passive: true });
-    el.addEventListener('touchmove', onUserScrollAway, { passive: true });
-    let frame = 0;
-    const FRAMES = 18; // ~300ms at 60fps, long enough for async highlight/layout
-    const pin = () => {
-      if (pinAbortRef.current) { cleanup(); return; }
-      const c = scrollContainerRef.current;
-      if (c) { c.scrollTop = c.scrollHeight; lastScrollHeightRef.current = c.scrollHeight; isAtBottomRef.current = true; }
-      if (++frame < FRAMES) { pinRafRef.current = requestAnimationFrame(pin); }
-      else cleanup();
-    };
-    const cleanup = () => {
-      el.removeEventListener('wheel', onUserScrollAway);
-      el.removeEventListener('touchmove', onUserScrollAway);
-      if (pinRafRef.current != null) { cancelAnimationFrame(pinRafRef.current); pinRafRef.current = null; }
-    };
-    pinRafRef.current = requestAnimationFrame(pin);
-    return cleanup;
-  }, [streamingMessageId]);
-
-  // A tool's live pill is already on screen when it commits, so re-running the mount reveal on the committed bubble flashes the exact same row. Remember the id that just stopped streaming for a beat and let that one bubble skip its entrance, so the hand-off is seamless. 500ms is slack for the commit render to land after the stream clears (they don't always arrive on the same frame).
-  const [justStreamedId, setJustStreamedId] = useState<string | null>(null);
-  const justStreamPrevRef = useRef<string | null>(null);
-  useEffect(() => {
-    const prev = justStreamPrevRef.current;
-    justStreamPrevRef.current = streamingMessageId;
-    if (prev && !streamingMessageId) {
-      setJustStreamedId(prev);
-      const t = setTimeout(() => setJustStreamedId(null), 500);
-      return () => clearTimeout(t);
-    }
-  }, [streamingMessageId]);
+  const sessionRunning = session?.status === 'running' || session?.status === 'waiting_approval';
+  const { activeBranchMessages, renderItems, lastAssistantIdsInTurn, lastPendingAskCallId, contextEstimate, getSiblingBranches } =
+    useTranscriptDerivations({ session, model, streamingMessageId, sessionRunning });
+  const { browserAnchorItemId, browserSlot } = useDockedBrowserSlot({ id, c, renderItems });
+  const seenMessageIds = useBurstRevealTracking(id, session?.active_branch_id);
+
+  const scroll = useMessageScroll({
+    renderItems,
+    streamingMessageId,
+    sessionId: session?.id,
+    activeBranchId: session?.active_branch_id,
+    messagesLength: session?.messages?.length,
+    id,
+  });
+  // Destructure ONLY the stable useCallback'd members that feed dep arrays / memoized children
+  // (callback-identity rule: never put the hook object itself in a dep array).
+  const { scrollToBottom, stickToBottomIfNeeded } = scroll;
 
-  useEffect(() => () => {
-    if (scrollRafRef.current != null) {
-      cancelAnimationFrame(scrollRafRef.current);
-      scrollRafRef.current = null;
-    }
-    if (pinRafRef.current != null) {
-      cancelAnimationFrame(pinRafRef.current);
-      pinRafRef.current = null;
-    }
-    if (initialPinRafRef.current != null) {
-      cancelAnimationFrame(initialPinRafRef.current);
-      initialPinRafRef.current = null;
-    }
-    if (scrollToBottomRafRef.current != null) {
-      cancelAnimationFrame(scrollToBottomRafRef.current);
-      scrollToBottomRafRef.current = null;
-    }
-  }, []);
+  // Read live in the stable handleSend closure without busting its memo (ChatInput leans on handleSend identity holding across renders).
+  const runContextRef = useRef(runContext);
+  runContextRef.current = runContext;
 
   // useCallback so ChatInput's memo equality holds across AgentChat re-renders driven by unrelated session state. Captures agentBusy through the dependency so a stale "busy" closure doesn't ever route a message past the queue.
   const handleSend = useCallback(
@@ -910,8 +143,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
       scrollToBottom();
       const msg: QueuedMessage = { prompt, images, contextPaths, forcedTools, attachedSkills, selectedBrowserIds, selectedAppIds, selectedSettingIds, attachedRunId: runContextRef.current?.runId };
       if (agentBusy) {
-        messageQueueRef.current.push(msg);
-        setQueueLength(messageQueueRef.current.length);
+        queue.enqueue(msg);
         return;
       }
       dispatchMessage(msg);
@@ -919,620 +151,12 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
     [id, scrollToBottom, agentBusy, dispatchMessage],
   );
 
-  const handleModeChange = useCallback((newMode: string) => {
-    setMode(newMode);
-    if (id && !isDraft) dispatch(updateSessionMode({ sessionId: id, mode: newMode }));
-  }, [id, isDraft, dispatch]);
-
-  const handleModelChange = useCallback((newModel: string) => {
-    // On the trial only Haiku is funded; picking anything else needs a connected provider, and once runs are spent nothing local works, so warn and keep the funded model instead of snagging.
-    if (connectionMode === 'free-trial') {
-      const kind: 'connect' | 'spent' | null =
-        (freeTrialRemaining ?? 0) <= 0 ? 'spent' : (newModel !== 'haiku' ? 'connect' : null);
-      if (kind) {
-        setFreeTrialModelNotice({ kind, label: resolveModelLabel(newModel) });
-        if (freeTrialModelNoticeTimer.current) clearTimeout(freeTrialModelNoticeTimer.current);
-        freeTrialModelNoticeTimer.current = setTimeout(() => setFreeTrialModelNotice(null), 6000);
-        return;
-      }
-    }
-    if (workflowEditId && newModel !== model) {
-      setWorkflowModelNotice(resolveModelLabel(newModel));
-      if (workflowModelNoticeTimer.current) clearTimeout(workflowModelNoticeTimer.current);
-      workflowModelNoticeTimer.current = setTimeout(() => setWorkflowModelNotice(null), 5000);
-    }
-    // Picked a usable model: drop any stale notice now (fades out in ~220ms) instead of letting it sit out its timer.
-    setFreeTrialModelNotice(null);
-    if (freeTrialModelNoticeTimer.current) clearTimeout(freeTrialModelNoticeTimer.current);
-    setModel(newModel);
-    if (id && !isDraft) dispatch(updateSessionModel({ sessionId: id, model: newModel }));
-  }, [id, isDraft, dispatch, workflowEditId, model, resolveModelLabel, connectionMode, freeTrialRemaining]);
-
-  useEffect(() => () => {
-    if (workflowModelNoticeTimer.current) clearTimeout(workflowModelNoticeTimer.current);
-    if (freeTrialModelNoticeTimer.current) clearTimeout(freeTrialModelNoticeTimer.current);
-  }, []);
+  useToolGroupMeta(id, isDraft, renderItems, session?.tool_group_meta);
 
-  const handleThinkingLevelChange = useCallback((level: 'off' | 'low' | 'medium' | 'high' | 'auto') => {
-    if (!id) return;
-    dispatch(updateSessionThinkingLevel({ sessionId: id, level }));
-    if (!isDraft) dispatch(updateThinkingLevel({ sessionId: id, level }));
-  }, [id, isDraft, dispatch]);
-
-  const handleApprove = (requestId: string, updatedInput?: Record<string, any>, trustPattern?: boolean, alwaysAllow?: boolean) => {
-    dispatch(handleApproval({ requestId, behavior: 'allow', updatedInput, trustPattern, setAlwaysAllow: alwaysAllow }));
-  };
-
-  const handleDeny = (requestId: string, message?: string) => {
-    dispatch(handleApproval({ requestId, behavior: 'deny', message }));
-  };
-
-  const handleStop = useCallback(() => {
-    if (!id) return;
-    // A watched live workflow run mirrors the workflow card's Stop: fully stop the run, not just pause the agent. Test Agent + plain chats stop the session.
-    if (linkedSidecar?.kind === 'watching' && linkedSidecar.runId) {
-      dispatch(controlWorkflowRun({ runId: linkedSidecar.runId, action: 'stop' }));
-      return;
-    }
-    dispatch(stopAgent({ sessionId: id }));
-  }, [id, dispatch, linkedSidecar]);
-
-  // Finished Test Agent card: drop the tether + remove this card, and either commit the workflow draft (Save, same as the edit card's "save now") or leave the draft untouched so the user keeps editing.
-  const onTestContinueEditing = useCallback(() => {
-    if (linkedWorkflowId) dispatch(setCardSidecar({ workflowId: linkedWorkflowId, sessionId: null, kind: null }));
-    if (id) dispatch(removeCard(id));
-  }, [linkedWorkflowId, id, dispatch]);
-
-  const onTestSaveWorkflow = useCallback(async () => {
-    if (linkedWorkflowId) {
-      try {
-        await dispatch(commitDraft(linkedWorkflowId)).unwrap();
-      } catch {
-        return;
-      }
-      dispatch(updateWorkflowCard({ workflowId: linkedWorkflowId, patch: { view: 'saved' } }));
-      dispatch(setCardSidecar({ workflowId: linkedWorkflowId, sessionId: null, kind: null }));
-    }
-    if (id) dispatch(removeCard(id));
-  }, [linkedWorkflowId, id, dispatch]);
-
-  const handleResume = useCallback(() => {
-    if (!id) return;
-    setShowResumeBubble(false);
-    dispatch(sendMessageThunk({
-      sessionId: id,
-      prompt: "Continue your previous response from exactly where it was cut off. Do not repeat anything you already wrote; pick up mid-sentence if you need to and keep going.",
-      mode,
-      model,
-      hidden: true,
-    }));
-  }, [id, mode, model, dispatch]);
-
-  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
-
-  const handleSaveEdit = useCallback(
-    (messageId: string, newContent: string) => {
-      if (!id) return;
-      dispatch(editMessage({ sessionId: id, messageId, content: newContent }));
-      setEditingMessageId(null);
-    },
-    [id, dispatch]
-  );
-
-  const handleCancelEdit = useCallback(() => {
-    setEditingMessageId(null);
-  }, []);
-
-  const activeBranchMessages = useMemo(() => {
-    if (!session) return [];
-    const branchId = session.active_branch_id || 'main';
-    const branch = session.branches?.[branchId];
-
-    if (!branch || !branch.fork_point_message_id) {
-      return session.messages.filter((m) => m.branch_id === 'main' || m.branch_id === branchId);
-    }
-
-    const segments: Array<{ branchId: string; upToMessageId?: string }> = [];
-    let cur = branch;
-    let curId = branchId;
-    while (cur && cur.fork_point_message_id) {
-      segments.unshift({ branchId: curId, upToMessageId: cur.fork_point_message_id });
-      curId = cur.parent_branch_id || 'main';
-      cur = session.branches?.[curId];
-    }
-    segments.unshift({ branchId: curId });
-
-    const result: typeof session.messages = [];
-    for (let i = 0; i < segments.length; i++) {
-      const seg = segments[i];
-      const nextForkMsgId = seg.upToMessageId;
-      if (nextForkMsgId) {
-        const forkIdx = session.messages.findIndex((m) => m.id === nextForkMsgId);
-        const pre = session.messages
-          .slice(0, forkIdx)
-          .filter((m) => m.branch_id === seg.branchId);
-        result.push(...pre);
-      } else if (i < segments.length - 1) {
-        const nextFork = segments[i + 1].upToMessageId;
-        const forkIdx = nextFork
-          ? session.messages.findIndex((m) => m.id === nextFork)
-          : session.messages.length;
-        result.push(
-          ...session.messages.slice(0, forkIdx).filter((m) => m.branch_id === seg.branchId)
-        );
-      } else {
-        result.push(...session.messages.filter((m) => m.branch_id === seg.branchId));
-      }
-    }
-    const leafMsgs = session.messages.filter((m) => m.branch_id === branchId);
-    if (!result.some((m) => m.branch_id === branchId)) {
-      result.push(...leafMsgs);
-    }
-    return result;
-  }, [session?.messages, session?.active_branch_id, session?.branches]);
-
-  const handleRegenerate = useCallback(
-    (assistantMsg: AgentMessage) => {
-      if (!id) return;
-      const idx = activeBranchMessages.findIndex((m) => m.id === assistantMsg.id);
-      for (let i = idx - 1; i >= 0; i--) {
-        if (activeBranchMessages[i].role === 'user') {
-          const userMsg = activeBranchMessages[i];
-          const content = typeof userMsg.content === 'string' ? userMsg.content : JSON.stringify(userMsg.content);
-          dispatch(editMessage({ sessionId: id, messageId: userMsg.id, content }));
-          break;
-        }
-      }
-    },
-    [id, activeBranchMessages, dispatch]
-  );
-
-  const handleBranchChat = useCallback(async (upToMessageId: string) => {
-    if (!id) return;
-    const dashId = session?.dashboard_id;
-    const action = await dispatch(duplicateSession({ sessionId: id, dashboardId: dashId, upToMessageId }));
-    if (duplicateSession.fulfilled.match(action)) {
-      if (onBranch) {
-        onBranch(action.payload.id);
-      } else {
-        dispatch(setActiveSession(action.payload.id));
-      }
-    }
-  }, [id, dispatch, onBranch, session?.dashboard_id]);
-
-  const contextEstimate = useMemo(() => {
-    // Prefer the live API-reported input token count once we have one (session.tokens.input includes the full request: messages + system + tool defs + cached prefix). That number is authoritative because Anthropic counts it against the context window. Before the first turn completes, fall back to a char/4 estimate of visible message content as a rough pre-send hint.
-    let limit = 0;
-    for (const ms of Object.values(modelsByProvider)) {
-      const hit = ms.find((m) => m.value === model);
-      if (hit?.context_window) { limit = hit.context_window; break; }
-    }
-    if (!limit) limit = (session?.context_window) || CONTEXT_WINDOWS[model] || 200_000;
-    const liveInput = session?.tokens?.input ?? 0;
-    if (liveInput > 0) {
-      return { used: liveInput, limit };
-    }
-    let totalChars = 0;
-    if (session?.system_prompt) totalChars += session.system_prompt.length;
-    for (const msg of activeBranchMessages) {
-      totalChars += stringifyContent(msg.content).length;
-    }
-    const used = Math.round(totalChars / 4);
-    return { used, limit };
-    // Streaming content's contribution to the context estimate is no longer included here: we'd have to subscribe to the streaming text and re-run this sum on every painted character, defeating the whole point of isolating AgentChat from delta updates. The header gauge will catch up when stream_end commits the message.
-  }, [activeBranchMessages, session?.system_prompt, session?.tokens?.input, session?.context_window, streamingMessageId, model, modelsByProvider]);
-
-  const sessionRunning = session?.status === 'running' || session?.status === 'waiting_approval';
-  const lastPendingAskCallId = useMemo(
-    () => extractPendingAskUi(session?.messages || [])?.call.id ?? null,
-    [session?.messages],
-  );
-
-  const renderItems: RenderItem[] = useMemo(() => {
-    const items: RenderItem[] = [];
-    let i = 0;
-    // Live-updating cards: repeated ShowUI calls with the SAME component+props.id are one card that
-    // UPDATES IN PLACE at its first position (progress advances, data refreshes), never a stack of
-    // stale snapshots. Pre-scan maps each id key to its first slot and its latest call+result.
-    const firstCallIdByKey = new Map<string, string>();
-    const latestByKey = new Map<string, { call: (typeof activeBranchMessages)[number]; result: (typeof activeBranchMessages)[number] | null }>();
-    const keyByCallId = new Map<string, string>();
-    for (let s = 0; s < activeBranchMessages.length; s++) {
-      const m = activeBranchMessages[s];
-      const mc = m.content;
-      if (m.role !== 'tool_call' || typeof mc !== 'object' || !/(^|__)ShowUI$/.test(String(mc?.tool || ''))) continue;
-      const input = mc?.input as { component?: unknown; props?: { id?: unknown } } | undefined;
-      const compId = input?.props?.id;
-      if (!input?.component || typeof compId !== 'string' || !compId) continue;
-      const key = `${input.component}:${compId}`;
-      keyByCallId.set(m.id, key);
-      if (!firstCallIdByKey.has(key)) firstCallIdByKey.set(key, m.id);
-      const next = activeBranchMessages[s + 1];
-      latestByKey.set(key, { call: m, result: next && next.role === 'tool_result' ? next : null });
-    }
-    // Narration that led INTO a tool phase; folds into that phase's group on a finished session.
-    let leadNotes: typeof activeBranchMessages = [];
-    while (i < activeBranchMessages.length) {
-      const msg = activeBranchMessages[i];
-      if (msg.role === 'tool_call' || msg.role === 'tool_result') {
-        const group: typeof activeBranchMessages = [];
-        // On a finished session the whole tool PHASE folds into one quiet row: short narration
-        // LEADING INTO or BETWEEN tool runs is absorbed (readable on expand), only the final
-        // answer stays out. While running, narration streams visibly, so the phase never folds live.
-        const noteMarks: Array<{ afterCall: number; msg: (typeof activeBranchMessages)[number] }> =
-          leadNotes.map((m) => ({ afterCall: 0, msg: m }));
-        leadNotes = [];
-        let callsSoFar = 0;
-        while (i < activeBranchMessages.length) {
-          const m = activeBranchMessages[i];
-          if (m.role === 'tool_call' || m.role === 'tool_result') {
-            group.push(m);
-            if (m.role === 'tool_call') callsSoFar++;
-            i++;
-            continue;
-          }
-          if (!sessionRunning && m.role === 'assistant') {
-            let j = i;
-            while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
-            const next = activeBranchMessages[j];
-            const absorbable = activeBranchMessages.slice(i, j).every((a) => isNarration(a.content));
-            // A long or structured message is the answer, not narration. Absorbing it hides the whole deliverable in a grey tool row and strips its markdown, which is worse than showing one redundant line.
-            if (next && absorbable && (next.role === 'tool_call' || next.role === 'tool_result')) {
-              for (let k = i; k < j; k++) {
-                if (!activeBranchMessages[k].hidden) noteMarks.push({ afterCall: callsSoFar, msg: activeBranchMessages[k] });
-              }
-              i = j;
-              continue;
-            }
-          }
-          break;
-        }
-
-        const allCalls = group.filter((m) => m.role === 'tool_call');
-        const results = group.filter((m) => m.role === 'tool_result');
-        // Index pairing mispairs any parallel batch (first-completing result lands on the first call, killing a live AskUI card, ENG-232); pair by tool_use_id when the result carries one, index only for legacy unkeyed results.
-        const resultById = new Map<string, (typeof results)[number]>();
-        for (const r of results) {
-          const rid = resultToolUseId(r);
-          if (rid && !resultById.has(rid)) resultById.set(rid, r);
-        }
-        const allPairs: ToolPair[] = allCalls.map((call, idx) => {
-          const byId = resultById.get(callToolUseId(call));
-          const indexed = results[idx] || null;
-          return {
-            type: 'tool_pair' as const,
-            id: `pair-${call.id}`,
-            call,
-            result: byId ?? (indexed && !resultToolUseId(indexed) ? indexed : null),
-          };
-        });
-
-        // ShowUI/AskUI calls render as inline components, never buried inside a collapsed group.
-        // They typically cap a run of work, so the quiet group row stays above the widget.
-        const showUiPairs = allPairs.filter((p) => isShowUiPair(p) || isAskUiPair(p));
-        const pairs = allPairs.filter((p) => !isShowUiPair(p) && !isAskUiPair(p));
-        const calls = pairs.map((p) => p.call);
-
-        // Folded narration goes back at its original position among the visible pairs.
-        const groupEntries: ToolGroupEntry[] | undefined = (() => {
-          if (noteMarks.length === 0) return undefined;
-          const entries: ToolGroupEntry[] = [];
-          let noteIdx = 0;
-          const noteText = (m: (typeof activeBranchMessages)[number]) =>
-            typeof m.content === 'string' ? m.content : '';
-          allPairs.forEach((pair, idx) => {
-            while (noteIdx < noteMarks.length && noteMarks[noteIdx].afterCall <= idx) {
-              entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
-              noteIdx++;
-            }
-            if (!isShowUiPair(pair) && !isAskUiPair(pair)) entries.push({ kind: 'pair', pair });
-          });
-          while (noteIdx < noteMarks.length) {
-            entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
-            noteIdx++;
-          }
-          return entries;
-        })();
-
-        const mcpServers = new Set(
-          calls.map((m) => {
-            const tool = typeof m.content === 'object' ? m.content.tool || '' : '';
-            const match = tool.match(/^mcp__([^_]+(?:-[^_]+)*)__/);
-            return match ? match[1] : '';
-          }).filter(Boolean)
-        );
-        // Only wrap MCP calls in a group when there's more than one; a lone call would just double up the group header on top of its own (e.g. "Browser Navigation 1/1" over "Opened a browser"), so render it bare instead.
-        const allSameMcp = mcpServers.size === 1 && pairs.length > 1;
-
-        if (allSameMcp) {
-          const mcpServer = [...mcpServers][0];
-          const toolNames = new Set(
-            calls.map((m) => (typeof m.content === 'object' ? m.content.tool : ''))
-          );
-          const label =
-            toolNames.size === 1 ? calls[0].content?.tool || 'Tool calls' : `${calls.length} tool calls`;
-          items.push({
-            type: 'tool_group',
-            id: `group-${group[0].id}`,
-            pairs,
-            label,
-            callCount: calls.length,
-            mcpServer,
-            entries: groupEntries,
-          } satisfies ToolGroup);
-        } else if (sessionRunning && pairs.length <= 2 && !groupEntries) {
-          // Live turns keep bare rows for streaming detail; finished transcripts always rest as the quiet group row.
-          items.push(...pairs);
-        } else if (pairs.length > 0) {
-          const toolNames = new Set(
-            calls.map((m) => (typeof m.content === 'object' ? m.content.tool : ''))
-          );
-          const label =
-            toolNames.size === 1 ? calls[0].content?.tool || 'Tool calls' : `${calls.length} tool calls`;
-          items.push({
-            type: 'tool_group',
-            id: `group-${group[0].id}`,
-            pairs,
-            label,
-            callCount: calls.length,
-            entries: groupEntries,
-          } satisfies ToolGroup);
-        } else if (noteMarks.length > 0) {
-          // Phase held only ShowUI/AskUI pairs: narration has no group to fold into, keep it visible.
-          for (const nm of noteMarks) items.push(nm.msg);
-        }
-        for (const p of showUiPairs) {
-          const key = keyByCallId.get(p.call.id);
-          if (!key || isAskUiPair(p)) {
-            items.push(p);
-            continue;
-          }
-          // Later updates render nowhere themselves; the first slot always shows the latest call
-          // under a STABLE key so React updates the mounted component instead of remounting it.
-          if (p.call.id !== firstCallIdByKey.get(key)) continue;
-          const latest = latestByKey.get(key);
-          items.push({
-            type: 'tool_pair' as const,
-            id: `showui-${key}`,
-            call: latest ? latest.call : p.call,
-            result: latest ? latest.result : p.result,
-          });
-        }
-      } else {
-        if (!sessionRunning && msg.role === 'assistant') {
-          let j = i;
-          while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
-          const next = activeBranchMessages[j];
-          if (next && (next.role === 'tool_call' || next.role === 'tool_result')) {
-            leadNotes = activeBranchMessages.slice(i, j).filter((m) => !m.hidden);
-            i = j;
-            continue;
-          }
-        }
-        if (!msg.hidden) {
-          items.push(msg);
-        }
-        i++;
-      }
-    }
-    return items;
-  }, [activeBranchMessages, sessionRunning]);
-
-  // The docked browser anchors at the LAST browser-agent tool row (one live browser, latest work site wins); no row yet falls back to the end-of-transcript slot.
-  const browserAnchorItemId = useMemo((): string | null => {
-    const isBrowserCall = (m: AgentMessage): boolean =>
-      m.role === 'tool_call' && typeof m.content === 'object' && String((m.content as { tool?: string })?.tool || '').toLowerCase().endsWith('browseragent');
-    let anchor: string | null = null;
-    for (const item of renderItems) {
-      if (isToolGroup(item)) { if (item.pairs.some((p) => isBrowserCall(p.call))) anchor = item.id; }
-      else if (isToolPair(item)) { if (isBrowserCall(item.call)) anchor = item.id; }
-      else if (isBrowserCall(item as AgentMessage)) anchor = item.id;
-    }
-    return anchor;
-  }, [renderItems]);
-
-  React.useLayoutEffect(() => {
-    const total = renderItems.length;
-    renderItemsLengthRef.current = total;
-    renderItemsRef.current = renderItems;
-    const seed = initialSeedItems(viewportHeight);
-    let start = windowStartRef.current;
-    let end = windowEndRef.current;
-    if (isAtBottomRef.current || end === 0) {
-      // Following the live tail: keep the newest item mounted and unload the oldest beyond a bounded recent slice so memory stays flat as the transcript grows. The pixel solver refines this seed on the next scroll.
-      end = total;
-      start = Math.max(0, end - seed);
-    } else {
-      // Scrolled up: just keep the existing window valid against the new length.
-      end = Math.min(end, total);
-      start = Math.min(start, Math.max(0, end - 1));
-    }
-    if (start !== windowStartRef.current) { windowStartRef.current = start; setWindowStart(start); }
-    if (end !== windowEndRef.current) { windowEndRef.current = end; setWindowEnd(end); }
-  }, [id, renderItems, viewportHeight]);
-
-  const total = renderItems.length;
-  // Small chats render whole (no windowing): forces the full slice so both spacer loops sum to 0, which removes the recompute-driven scroll jump entirely.
-  const windowingActive = total >= WINDOW_MIN_ITEMS;
-  const safeWindowEnd = !windowingActive ? total : (windowEnd > 0 ? Math.min(windowEnd, total) : total);
-  const safeWindowStart = !windowingActive ? 0 : Math.min(Math.max(0, windowStart), Math.max(0, safeWindowEnd - 1));
-  const visibleStartIndex = safeWindowStart;
-  const visibleRenderItems = useMemo(
-    () => renderItems.slice(safeWindowStart, safeWindowEnd),
-    [renderItems, safeWindowStart, safeWindowEnd]
-  );
-  const renderedVisibleItems = useMemo(
-    () => visibleRenderItems.filter((item) => !streamingMessageId || item.id !== streamingMessageId),
-    [streamingMessageId, visibleRenderItems]
-  );
-  // Keep the ref the height estimator reads in sync with the live viewport width.
-  viewportWidthRef.current = viewportWidth;
-
-  // Measure mounted item heights so the spacers that stand in for unmounted items keep the scrollbar geometry stable (no jump when unloading above).
-  React.useLayoutEffect(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-    let changed = false;
-    el.querySelectorAll<HTMLElement>('[data-window-item-id]').forEach((node) => {
-      const itemId = node.dataset.windowItemId;
-      if (!itemId) return;
-      const h = node.offsetHeight;
-      if (h <= 0) return;
-      const prev = itemHeightsRef.current.get(itemId);
-      if (prev === undefined || Math.abs(prev - h) > 1) {
-        itemHeightsRef.current.set(itemId, h);
-        changed = true;
-      }
-    });
-    // Guarded so this converges: once heights stop moving, no more version bumps.
-    if (changed) setHeightVersion((v) => v + 1);
-  });
-
-  // Spacers reserve the cumulative height of the unmounted items above/below the window. heightVersion gates recompute off the ref-held measurements; we index the render-scope renderItems directly so id->height stays correct on the frame the transcript changes.
-  const topSpacerHeight = useMemo(() => {
-    let h = 0;
-    for (let i = 0; i < safeWindowStart; i++) h += reservedHeightForItem(renderItems[i]);
-    return h;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [renderItems, safeWindowStart, heightVersion, reservedHeightForItem]);
-  const bottomSpacerHeight = useMemo(() => {
-    let h = 0;
-    for (let i = safeWindowEnd; i < total; i++) h += reservedHeightForItem(renderItems[i]);
-    return h;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [renderItems, safeWindowEnd, total, heightVersion, reservedHeightForItem]);
-
-  React.useLayoutEffect(() => {
-    if (pendingInitialBottomScrollRef.current) {
-      const el = scrollContainerRef.current;
-      if (!el || visibleRenderItems.length === 0) return;
-      let frame = 0;
-      const FRAMES = 8;
-      const pin = () => {
-        const c = scrollContainerRef.current;
-        if (!c) return;
-        lastVisibleItemRef.current?.scrollIntoView({ block: 'end' });
-        c.scrollTop = Math.max(0, Math.min(c.scrollTop, c.scrollHeight - c.clientHeight));
-        lastScrollHeightRef.current = c.scrollHeight;
-        isAtBottomRef.current = true;
-        setShowScrollButton(false);
-        if (++frame < FRAMES) {
-          initialPinRafRef.current = requestAnimationFrame(pin);
-        } else {
-          initialPinRafRef.current = null;
-          initialBottomScrollSettledRef.current = true;
-          // The open slice is sized by item COUNT; now that we're settled and measured, trim it down to the pixel-based band so tall messages high in the slice unload instead of sitting fully rendered off-screen.
-          scheduleWindowRecompute();
-          // Re-evaluate visibility now the open jump has settled, so an oversized newest message isn't left stuck as a placeholder.
-          c.dispatchEvent(new CustomEvent(RECHECK_VISIBILITY_EVENT));
-        }
-      };
-      if (initialPinRafRef.current != null) {
-        cancelAnimationFrame(initialPinRafRef.current);
-        initialPinRafRef.current = null;
-      }
-      pendingInitialBottomScrollRef.current = false;
-      pin();
-    }
-  }, [id, session?.active_branch_id, renderItems.length, renderedVisibleItems.length, visibleStartIndex]);
-
-  const lastAssistantIdsInTurn = useMemo(() => {
-    const ids = new Set<string>();
-    let lastAssistantId: string | null = null;
-    for (const item of renderItems) {
-      if (!isToolGroup(item) && !isToolPair(item)) {
-        const msg = item as AgentMessage;
-        if (msg.role === 'assistant') {
-          lastAssistantId = msg.id;
-        } else if (msg.role === 'user') {
-          if (lastAssistantId) ids.add(lastAssistantId);
-          lastAssistantId = null;
-        }
-      }
-    }
-    if (lastAssistantId) ids.add(lastAssistantId);
-    return ids;
-  }, [renderItems]);
-
-  const groupMetaRequestedRef = useRef<Set<string>>(new Set());
-  const groupMetaRefinedRef = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (!id || isDraft) return;
-    const toolGroups = renderItems.filter(isToolGroup) as ToolGroup[];
-    const meta = session?.tool_group_meta ?? {};
-
-    for (const group of toolGroups) {
-      const allDone = group.pairs.every((p) => p.result !== null);
-
-      if (!groupMetaRequestedRef.current.has(group.id) && !meta[group.id]) {
-        groupMetaRequestedRef.current.add(group.id);
-        const toolCalls = group.pairs.map((p) => {
-          const c = p.call.content;
-          const tool = typeof c === 'object' ? c.tool || '' : '';
-          const input = typeof c === 'object' ? c.input : '';
-          const mcp = parseMcpToolName(tool);
-          const friendly = mcp.isMcp ? getMcpInputSummary(input, mcp.action, mcp.serverSlug) : '';
-          const summary = friendly || (typeof input === 'string' ? input.slice(0, 120) : JSON.stringify(input).slice(0, 120));
-          return { tool, input_summary: summary };
-        });
-        dispatch(generateGroupMeta({ sessionId: id, groupId: group.id, toolCalls }));
-      }
-
-      if (allDone && meta[group.id] && !meta[group.id].is_refined && !groupMetaRefinedRef.current.has(group.id)) {
-        groupMetaRefinedRef.current.add(group.id);
-        const toolCalls = group.pairs.map((p) => {
-          const c = p.call.content;
-          const tool = typeof c === 'object' ? c.tool || '' : '';
-          const input = typeof c === 'object' ? c.input : '';
-          const mcp = parseMcpToolName(tool);
-          const friendly = mcp.isMcp ? getMcpInputSummary(input, mcp.action, mcp.serverSlug) : '';
-          const summary = friendly || (typeof input === 'string' ? input.slice(0, 120) : JSON.stringify(input).slice(0, 120));
-          return { tool, input_summary: summary };
-        });
-        const resultsSummary = group.pairs
-          .filter((p) => p.result)
-          .map((p) => {
-            const rc = p.result!.content;
-            const text = typeof rc === 'string' ? rc : typeof rc === 'object' && rc?.text ? rc.text : JSON.stringify(rc);
-            return text.slice(0, 150);
-          });
-        dispatch(generateGroupMeta({ sessionId: id, groupId: group.id, toolCalls, resultsSummary, isRefinement: true }));
-      }
-    }
-  }, [renderItems, id, isDraft, session?.tool_group_meta, dispatch]);
-
-  const getSiblingBranches = useCallback(
-    (messageId: string): string[] => {
-      if (!session?.branches) return [];
-
-      const directForks = Object.values(session.branches)
-        .filter((b) => b.fork_point_message_id === messageId)
-        .map((b) => b.id);
-      if (directForks.length > 0) {
-        const originalMsg = session.messages.find((m) => m.id === messageId);
-        const parentBranchId = originalMsg?.branch_id || 'main';
-        return [parentBranchId, ...directForks];
-      }
-
-      const msg = session.messages.find((m) => m.id === messageId);
-      if (!msg || msg.role !== 'user') return [];
-      const msgBranch = session.branches[msg.branch_id];
-      if (!msgBranch?.fork_point_message_id) return [];
-      const branchUserMsgs = session.messages.filter(
-        (m) => m.branch_id === msg.branch_id && m.role === 'user'
-      );
-      if (branchUserMsgs.length === 0 || branchUserMsgs[0].id !== messageId) return [];
-
-      const forkPointId = msgBranch.fork_point_message_id;
-      const siblingBranches = Object.values(session.branches)
-        .filter((b) => b.fork_point_message_id === forkPointId)
-        .map((b) => b.id);
-      const parentBranchId = msgBranch.parent_branch_id || 'main';
-      return [parentBranchId, ...siblingBranches];
-    },
-    [session?.branches, session?.messages]
-  );
+  const {
+    editingMessageId, setEditingMessageId, handleSaveEdit, handleCancelEdit,
+    handleRegenerate, handleBranchChat, handleSwitchBranch,
+  } = useBranchActions({ id, session, activeBranchMessages, onBranch });
 
   if (!session) {
     return (
@@ -1545,1014 +169,86 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   }
 
   const branchNavLocked = agentBusy || hasStreaming;
-  const statusStyle = STATUS_STYLES[session.status] || { color: c.text.tertiary, bg: c.bg.secondary };
+  // Structured view model for the per-item transcript render (TranscriptItem); rebuilt each render,
+  // same staleness semantics as the previously-inline closures.
+  const itemVm: TranscriptItemVm = {
+    session, id, c, renderItems, sessionRunning, awaitingResponse, justStreamedId, lastPendingAskCallId, seenMessageIds,
+    editingMessageId, lastAssistantIdsInTurn, branchNavLocked,
+    viewportHeight: scroll.viewportHeight,
+    viewportWidth: scroll.viewportWidth,
+    scrollRoot: scroll.scrollRoot,
+    getSiblingBranches,
+    onSaveEdit: handleSaveEdit,
+    onCancelEdit: handleCancelEdit,
+    onStartEdit: setEditingMessageId,
+    onRegenerate: handleRegenerate,
+    onBranch: handleBranchChat,
+    onSwitchBranch: handleSwitchBranch,
+    onStreamGrew: stickToBottomIfNeeded,
+  };
 
   return (
     <Box sx={{ display: 'flex', height: '100%', ...(fullscreenWash && { background: fullscreenWash }) }}>
       <ContextDrawer />
       <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, overflow: 'hidden', ...(fullscreenChat && { maxWidth: FULLSCREEN_READING_MAX_W, width: '100%', mx: 'auto' }) }}>
         {!embedded && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1.5,
-              px: 2,
-              py: 1.5,
-              // No seam: the header is just a band of typography inside the chat panel; transparent bg + air carry it, no hairline. (An earlier bg.surface here read lighter than the body and pulled focus.)
-              bgcolor: 'transparent',
-            }}
-          >
-            <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Typewriter
-                  value={displayChatTitle(session)}
-                  enabled={!!session.name && !isLegacyAutoName(session.name)}
-                >
-                  {(t) => <Typography noWrap sx={{ color: c.text.primary, fontWeight: 600 }}>{t}</Typography>}
-                </Typewriter>
-                {!isDraft && statusStyle && session.status !== 'completed' && session.status !== 'stopped' && (
-                  // Status speaks only when it needs the user; finished work sits quiet.
-                  <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
-                    <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.text.tertiary, whiteSpace: 'nowrap' }}>
-                      {friendlyStatusLabel(session.status)}
-                    </Typography>
-                  </Box>
-                )}
-              </Box>
-              {(!isDraft || session.is_welcome_draft) && (
-                // Welcome draft shows just the model so the header isn't bare; real runs add branch + cost.
-                <Box sx={{ display: 'flex', gap: 1.5, mt: 0.25, alignItems: 'center' }}>
-                  <Typography variant="caption" sx={{ color: c.text.tertiary }}>
-                    {resolveModelLabel(session.model)}
-                  </Typography>
-                  {!isDraft && session.branch_name && (
-                    <Typography variant="caption" sx={{ color: c.text.tertiary }}>
-                      {session.branch_name}
-                    </Typography>
-                  )}
-                  {(() => {
-                    if (!(session.cost_usd > 0)) return null;
-                    // The SDK reports a per-call $ figure regardless of how the request was routed. For requests that went through a subscription path, that figure is misleading, the user pays flat-rate. Show "subscription" instead in those cases. Show $ only when the call was actually metered (Anthropic API key, OpenAI API key, etc.). Model-id signals (these are short_name values from the BUILTIN_MODELS registry): - `*-api` → pinned Anthropic API key (METERED) - `*-cc` → pinned Claude Pro/Max via 9Router (sub) - plain sonnet/opus/haiku + openswarm-pro mode → Pro proxy (sub) - plain sonnet/opus/haiku + own_key mode → API key (METERED) - gpt-5.4* / gpt-5.3* → ChatGPT Plus/Pro via 9Router (sub) - gemini-*  → Gemini Advanced via 9Router (sub)
-                    const m = (session.model || '').toLowerCase();
-                    const isApiRoute = m.endsWith('-api');
-                    if (isApiRoute) {
-                      return (
-                        <Typography variant="caption" sx={{ color: c.accent.primary }}>
-                          ${session.cost_usd.toFixed(4)}
-                        </Typography>
-                      );
-                    }
-                    const isCcRoute = m.endsWith('-cc');
-                    const isPlainAnthropic = m === 'sonnet' || m === 'opus' || m === 'haiku';
-                    const isProRoute = isPlainAnthropic && connectionMode === 'openswarm-pro';
-                    const isOwnKeyAnthropic = isPlainAnthropic && connectionMode !== 'openswarm-pro';
-                    const isOpenAISub = m.startsWith('gpt-5') || m.startsWith('gpt-4') || m.startsWith('o1') || m.startsWith('o3') || m.startsWith('o4');
-                    const isGeminiSub = m.startsWith('gemini-');
-                    const isSubscriptionRouted = isCcRoute || isProRoute || isOpenAISub || isGeminiSub;
-                    if (isSubscriptionRouted) {
-                      return (
-                        <Typography
-                          variant="caption"
-                          sx={{ color: c.text.tertiary }}
-                          title="Routed through subscription, flat-rate, per-call cost not metered"
-                        >
-                          subscription
-                        </Typography>
-                      );
-                    }
-                    // own-key Anthropic OR anything else → real $ figure.
-                    void isOwnKeyAnthropic;
-                    return (
-                      <Typography variant="caption" sx={{ color: c.accent.primary }}>
-                        ${session.cost_usd.toFixed(4)}
-                      </Typography>
-                    );
-                  })()}
-                  {(() => {
-                    const mcpCount = session.active_mcps?.length ?? 0;
-                    if (mcpCount === 0) return null;
-                    return (
-                      <Typography
-                        variant="caption"
-                        sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontVariantNumeric: 'tabular-nums' }}
-                        title={`${mcpCount} tool${mcpCount === 1 ? '' : 's'} connected.`}
-                      >
-                        <Box component="span" sx={{ color: c.text.tertiary }}>
-                          {mcpCount} tool{mcpCount === 1 ? '' : 's'}
-                        </Box>
-                      </Typography>
-                    );
-                  })()}
-                </Box>
-              )}
-            </Box>
-            {!isDraft && id && (
-              <Tooltip title="Reset history">
-                <IconButton
-                  size="small"
-                  onClick={async () => {
-                    const sid = id;
-                    // Reset local UI state first; clearSessionMessages only touches Redux session.messages, so showResumeBubble/awaitingResponse/the queue otherwise survive and a "thinking" or "Resume agent response" bubble lingers on a now-empty chat.
-                    setShowResumeBubble(false);
-                    setAwaitingResponse(false);
-                    messageQueueRef.current = [];
-                    setQueueLength(0);
-                    setQueueExpanded(false);
-                    setEditingQueueIdx(null);
-                    setEditingQueueText('');
-                    try {
-                      const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
-                      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-                      if (tok) headers['Authorization'] = `Bearer ${tok}`;
-                      await fetch(`${API_BASE}/agents/sessions/${sid}/clear`, { method: 'POST', headers });
-                    } catch { /* surfaced via context_status */ }
-                    dispatch(clearSessionMessages(sid));
-                  }}
-                  sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}
-                >
-                  <RestartAltIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            )}
-            {onClose && (
-              <IconButton onClick={onClose} size="small" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            )}
-          </Box>
+          <AgentChatHeader
+            session={session}
+            isDraft={isDraft}
+            id={id}
+            connectionMode={connectionMode}
+            c={c}
+            resolveModelLabel={resolveModelLabel}
+            onClose={onClose}
+            onResetHistory={handleResetHistory}
+          />
         )}
 
-        <Box sx={{ flex: 1, minHeight: 0, position: 'relative' }}>
-          <Box
-            ref={scrollContainerRef}
-            onScroll={handleScroll}
-            // Right-clicking transcript CONTENT gets the OS text menu (copy, spellcheck), never the card menu with Delete chat in it.
-            data-chat-transcript
-            sx={{
-              height: '100%',
-              overflow: 'auto',
-              scrollbarGutter: 'stable',
-              // Top-aligned natural flow: messages start at the top and grow down (standard chat). The earlier flex-column + mt:auto bottom-anchor clustered short chats at the bottom under a big void, reading broken.
-              px: 2,
-              py: 1,
-              // Fullscreen: the scroller breaks OUT of the reading column so its scrollbar rides the window edge; matching padding keeps the content at the 760px measure.
-              ...(fullscreenChat && {
-                mr: `min(0px, calc((${FULLSCREEN_READING_MAX_W}px - 100vw) / 2))`,
-                pr: `max(16px, calc((100vw - ${FULLSCREEN_READING_MAX_W}px) / 2))`,
-              }),
-              // Smoothness bundle (perf-only, no behavior change): 1. overflow-anchor: auto, Chromium's native scroll anchoring keeps the viewport pinned to the user's visible content as siblings above/below resize. Eliminates the "transcript snaps back" feel during streaming and parallel tool fan-outs. Runs on the compositor thread, free. 2. contain: layout, tells the browser layout shifts inside this scroll container don't affect siblings outside it. Prevents reflow from cascading up to the dashboard layout when bubbles grow. 3. overscroll-behavior: contain, keeps over-scroll gestures from leaking up to the dashboard pan/zoom when the user hits the chat top/bottom.
-              overflowAnchor: 'auto',
-              contain: 'layout',
-              overscrollBehavior: 'contain',
-              // Hidden until the user is in the chat: the thumb is transparent at rest and fades in on hover, so a resizing thumb never draws the eye.
-              '&::-webkit-scrollbar': { width: 6 },
-              '&::-webkit-scrollbar-track': { background: 'transparent' },
-              '&::-webkit-scrollbar-thumb': {
-                background: 'transparent',
-                borderRadius: 3,
-                minHeight: 48,
-                transition: 'background 0.2s',
-              },
-              '&:hover::-webkit-scrollbar-thumb': { background: c.border.medium },
-              '&:hover::-webkit-scrollbar-thumb:hover': { background: c.border.strong },
-              scrollbarWidth: 'thin',
-              scrollbarColor: 'transparent transparent',
-              '&:hover': { scrollbarColor: `${c.border.medium} transparent` },
-            }}
-          >
-            {/* The welcome greeting is the FIRST thing and it's the agent talking, no user message above it, so give it real air under the header instead of sitting flush at the top. */}
-            {/* Non-welcome chats still need headroom: at pt 0 the first user bubble's top edge clipped under the header. */}
-            {/* Fullscreen carries the window title bar OVER the transcript, so the first message (and any attachment chips above it) needs to start below that chrome, not under it. */}
-            <Box sx={{ pt: fullscreenChat ? 7 : session.is_welcome_draft ? 4 : 2 }}>
-            {session.context_overflow && (() => {
-              const reason = session.context_overflow.reason;
-              const isAuth = reason === 'openswarm_pro_auth_expired' || reason === 'anthropic_auth_invalid' || reason === 'auth_error';
-              const isOutOfTokens = reason === 'out_of_tokens';
-              const title = isOutOfTokens ? 'Out of tokens' : isAuth ? 'Sign-in required' : 'Context full';
-              const primaryLabel = isOutOfTokens ? 'Got it' : isAuth ? 'Open Settings' : 'Start a fresh chat';
-              // In the workflow build chat, switching models here also sets the workflow's scheduled run model, so spell that consequence out.
-              const message = isOutOfTokens && workflowEditId
-                ? `${session.context_overflow.message} Whichever model you switch to here becomes the model this workflow runs on.`
-                : session.context_overflow.message;
-              const onPrimary = () => {
-                if (isOutOfTokens) {
-                  if (id) dispatch(clearContextOverflow({ sessionId: id }));
-                } else if (isAuth) {
-                  dispatch(openSettingsCard({ tab: 'models' }));
-                } else {
-                  const did = session?.dashboard_id;
-                  window.location.hash = did ? `#/dashboard/${did}` : '#/';
-                }
-              };
-              return (
-                <Box sx={{
-                  mt: 1,
-                  mb: 1.5,
-                  p: 1.5,
-                  borderRadius: 1.5,
-                  border: `1px solid ${c.border.strong}`,
-                  bgcolor: c.bg.secondary,
-                }}>
-                  <Typography variant="body2" sx={{ color: c.text.primary, fontWeight: 500, mb: 0.5 }}>
-                    {title}
-                  </Typography>
-                  <Typography variant="caption" sx={{ color: c.text.secondary, display: 'block', mb: 1.25 }}>
-                    {message}
-                  </Typography>
-                  <Box sx={{ display: 'flex', gap: 1 }}>
-                    <Typography
-                      component="button"
-                      variant="caption"
-                      onClick={onPrimary}
-                      sx={{
-                        cursor: 'pointer',
-                        border: `1px solid ${c.border.medium}`,
-                        borderRadius: 1,
-                        px: 1.25,
-                        py: 0.5,
-                        bgcolor: 'transparent',
-                        color: c.text.primary,
-                        '&:hover': { bgcolor: c.bg.elevated },
-                      }}
-                    >
-                      {primaryLabel}
-                    </Typography>
-                  </Box>
-                </Box>
-              );
-            })()}
-            {/* Stand-in for items unmounted ABOVE the window. Its measured
-                height keeps the scrollbar geometry and scroll position stable
-                while overflow-anchor pins the visible content. */}
-            {topSpacerHeight > 0 && (
-              <Box aria-hidden data-window-spacer="top" sx={{ height: topSpacerHeight, flexShrink: 0, overflowAnchor: 'none' }} />
-            )}
-            {renderedVisibleItems.map((item, itemIdx) => {
-              const rendered = ((): React.ReactNode => {
-              const isLastVisibleItem = itemIdx === renderedVisibleItems.length - 1;
-              const isCompactionAnchor = !!session.compacted_through_msg_id && item.id === session.compacted_through_msg_id;
-              const compactionChip = isCompactionAnchor ? (
-                <CompactionMarker
-                  key={`compaction-${item.id}`}
-                  collapsedCount={
-                    Math.max(0, renderItems.findIndex((it) => it.id === session.compacted_through_msg_id) + 1)
-                  }
-                />
-              ) : null;
-
-              if (isToolGroup(item)) {
-                const groupMeta = session.tool_group_meta?.[item.id];
-                return (
-                  <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                    <ToolGroupBubble group={item} isSessionRunning={sessionRunning && itemIdx === renderedVisibleItems.length - 1} meta={groupMeta} sessionId={session.id} />
-                    {compactionChip}
-                  </Box>
-                );
-              }
-              if (isToolPair(item)) {
-                const isPending = item.result === null && sessionRunning;
-                if (isAskUiPair(item)) {
-                  // A dead ask (timeout prose or a validation bounce) is not answerable; rendering it full-size is the "two identical cards, only one works" dupe (ENG-232).
-                  if (isDeadAskResult(item)) {
-                    return (
-                      <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                        <ToolCallBubble call={item.call} result={item.result} isPending={false} sessionId={session.id} suppressReveal />
-                        {compactionChip}
-                      </Box>
-                    );
-                  }
-                  // Only the LATEST unanswered question is live (the backend parks one component); an
-                  // older pending ask renders as a quiet row instead of a second clickable form.
-                  if (item.result === null && lastPendingAskCallId !== null && item.call.id !== lastPendingAskCallId) {
-                    return (
-                      <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                        <ToolCallBubble call={item.call} result={item.result} isPending={false} sessionId={session.id} suppressReveal />
-                        {compactionChip}
-                      </Box>
-                    );
-                  }
-                  return (
-                    <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                      <AskUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} />
-                      {compactionChip}
-                    </Box>
-                  );
-                }
-                if (isShowUiPair(item)) {
-                  return (
-                    <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                      <ToolUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} sessionRunning={sessionRunning} />
-                      {compactionChip}
-                    </Box>
-                  );
-                }
-                return (
-                  <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                    <ToolCallBubble call={item.call} result={item.result} isPending={isPending} sessionId={session.id} suppressReveal={item.call.id === justStreamedId} />
-                    {compactionChip}
-                  </Box>
-                );
-              }
-              const msg = item;
-              const isEditing = editingMessageId === msg.id;
-              // First pass after open/hop seeds the set; later unseen assistant ids arrived live.
-              if (seenMessageIdsRef.current === null) {
-                seenMessageIdsRef.current = new Set(renderItems.map((it) => it.id));
-              }
-              const burstAnimate =
-                msg.role === 'assistant' &&
-                typeof msg.content === 'string' &&
-                !isEditing &&
-                !seenMessageIdsRef.current.has(msg.id) &&
-                msg.id !== justStreamedId &&
-                (sessionRunning || awaitingResponse);
-              seenMessageIdsRef.current.add(msg.id);
-              const siblings = getSiblingBranches(msg.id);
-              const hasBranches = siblings.length > 0;
-              const currentBranchIdx = hasBranches
-                ? siblings.indexOf(session.active_branch_id || 'main')
-                : 0;
-              const rawText = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
-
-              return (
-                <Box key={msg.id} data-window-item-id={msg.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                  <Box
-                  onContextMenu={(e: React.MouseEvent) => {
-                    // ENG-148: the hover action bar's verbs, reachable by right-click on any message; typing surfaces (the edit box) keep the OS menu.
-                    if (isEditing || isNativeMenuTarget(e)) return;
-                    const selection = window.getSelection()?.toString() ?? '';
-                    const items: CardMenuRow[] = [];
-                    if (selection) items.push({ label: 'Copy selection', onClick: () => { void navigator.clipboard.writeText(selection); } });
-                    items.push({ label: 'Copy message', onClick: () => { void navigator.clipboard.writeText(rawText); } });
-                    if (msg.role === 'user') items.push({ label: 'Edit message', onClick: () => setEditingMessageId(msg.id) });
-                    if (msg.role === 'assistant' && lastAssistantIdsInTurn.has(msg.id)) {
-                      items.push({ kind: 'separator' });
-                      items.push({ label: 'Regenerate', onClick: () => handleRegenerate(msg) });
-                      items.push({ label: 'Branch chat', onClick: () => handleBranchChat(msg.id) });
-                    }
-                    openCardContextMenu(e, { items });
-                  }}
-                  sx={{
-                    '&:hover .msg-actions': { opacity: 1 },
-                    // Cheap virtualization: tells the browser to skip paint + layout for bubbles outside the scroll viewport. `contain-intrinsic-size: auto N` reserves a placeholder height so the scrollbar doesn't jump, and `auto` lets the browser remember the actual height after first render. Works alongside the container's overflow-anchor. Chrome 85+ (Electron covers this).
-                    contentVisibility: 'auto',
-                    containIntrinsicSize: 'auto 120px',
-                  }}
-                >
-                  {msg.role === 'assistant' && typeof msg.content === 'string' && !isEditing ? (
-                    <BurstRevealBubble
-                      message={msg}
-                      animate={burstAnimate}
-                      onGrew={stickToBottomIfNeeded}
-                      viewportHeight={viewportHeight}
-                      viewportWidth={viewportWidth}
-                      scrollRoot={scrollRoot}
-                    />
-                  ) : (
-                    <MessageBubble
-                      message={msg}
-                      editing={isEditing}
-                      onSaveEdit={handleSaveEdit}
-                      onCancelEdit={handleCancelEdit}
-                      viewportHeight={viewportHeight}
-                      viewportWidth={viewportWidth}
-                      scrollRoot={scrollRoot}
-                    />
-                  )}
-                  {!isEditing && (msg.role === 'user' || (msg.role === 'assistant' && lastAssistantIdsInTurn.has(msg.id))) && (
-                    <MessageActionBar
-                      role={msg.role as 'user' | 'assistant'}
-                      sessionId={session.id}
-                      messageId={msg.id}
-                      onCopy={() => navigator.clipboard.writeText(rawText)}
-                      onEdit={msg.role === 'user' ? () => setEditingMessageId(msg.id) : undefined}
-                      onRegenerate={msg.role === 'assistant' ? () => handleRegenerate(msg) : undefined}
-                      onBranch={msg.role === 'assistant' ? () => handleBranchChat(msg.id) : undefined}
-                      branchNav={
-                        hasBranches
-                          ? {
-                              currentIndex: Math.max(0, currentBranchIdx),
-                              totalBranches: siblings.length,
-                              disabled: branchNavLocked,
-                              onPrevious: () => {
-                                if (branchNavLocked) return;
-                                const prevBranch = siblings[Math.max(0, currentBranchIdx - 1)];
-                                if (prevBranch && id) dispatch(switchBranch({ sessionId: id, branchId: prevBranch }));
-                              },
-                              onNext: () => {
-                                if (branchNavLocked) return;
-                                const nextBranch = siblings[Math.min(siblings.length - 1, currentBranchIdx + 1)];
-                                if (nextBranch && id) dispatch(switchBranch({ sessionId: id, branchId: nextBranch }));
-                              },
-                            }
-                          : undefined
-                      }
-                    />
-                  )}
-                  {compactionChip}
-                </Box>
-                </Box>
-              );
-              })();
-              // The live browser anchors AT the browser tool row (ChatGPT-agent model): the view sits where the work happened, above the answer that follows it.
-              if (hasDockedBrowser && browserAnchorItemId && item.id === browserAnchorItemId) {
-                return (
-                  <React.Fragment key={`${item.id}-with-browser`}>
-                    {rendered}
-                    <Box data-browser-slot={id} ref={announceBrowserSlot} sx={browserSlotSx}>{browserSlotBody}</Box>
-                  </React.Fragment>
-                );
-              }
-              return rendered;
-            })}
-            {/* Stand-in for items unmounted BELOW the window (newer items not yet
-                scrolled into view). Zero while following the live tail. */}
-            {bottomSpacerHeight > 0 && (
-              <Box aria-hidden data-window-spacer="bottom" sx={{ height: bottomSpacerHeight, flexShrink: 0, overflowAnchor: 'none' }} />
-            )}
-            {/* overflow-anchor: none on the two elements that grow every frame
-                (live stream + thinking dots) keeps Chromium's scroll anchoring
-                from fighting our jam-to-bottom for the scroll position. The
-                committed messages above keep the default anchor, so resizing a
-                tool row while the user has scrolled up still holds their view. */}
-            {id && (
-              <Box sx={{ overflowAnchor: 'none' }}>
-                <StreamingBubble
-                  sessionId={id}
-                  activeBranchId={session.active_branch_id || 'main'}
-                  turnLabel={session.turn_label?.label}
-                  onStreamGrew={stickToBottomIfNeeded}
-                />
-              </Box>
-            )}
-            {/* Connect offer sits BELOW the latest reply (where the eye is), not at the top of the
-                transcript where the auto-scroll-to-bottom buries it. Suggest-only; activation is the
-                user's click through the gated MCPActivate endpoint. */}
-            {(session.mcp_suggestions && session.mcp_suggestions.length > 0) && (
-              <Box sx={{ mt: 1, mb: 1, px: 0.5, display: 'flex', flexDirection: 'column', gap: 0.5, overflowAnchor: 'none' }}>
-                {session.mcp_suggestions.map((s) => (
-                  <Box key={s.id} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="caption" sx={{ color: c.text.secondary, flex: 1, minWidth: 0 }}>
-                      Connect{' '}
-                      <Box component="span" sx={{ color: c.text.primary, fontWeight: 500 }}>{s.title}</Box>
-                      {' '}so the agent can do this
-                    </Typography>
-                    <Typography
-                      component="button"
-                      variant="caption"
-                      disabled={activatingMcp === s.id}
-                      onClick={async () => {
-                        if (activatingMcp) return;
-                        setActivateError(null);
-                        setActivatingMcp(s.id);
-                        try {
-                          const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-                          const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
-                          if (tok) headers['Authorization'] = `Bearer ${tok}`;
-                          const r = await fetch(`${API_BASE}/mcp-meta/activate`, {
-                            method: 'POST',
-                            headers,
-                            body: JSON.stringify({
-                              server_name: s.id.toLowerCase().replace(/\s+/g, '-'),
-                              reason: s.reason || 'preflight suggestion',
-                              parent_session_id: session.id,
-                            }),
-                          });
-                          const body = await r.json().catch(() => ({} as any));
-                          if (!r.ok) {
-                            setActivateError(`Activation failed (${r.status})`);
-                          } else if (body?.status === 'unknown_server') {
-                            // Not yet connected; jump to Actions so the user can finish OAuth.
-                            openMarketplace('my-connectors');
-                          } else if (id) {
-                            dispatch(clearMcpSuggestions({ sessionId: id }));
-                          }
-                        } catch (e: any) {
-                          setActivateError(e?.message || 'Activation failed');
-                        } finally {
-                          setActivatingMcp(null);
-                        }
-                      }}
-                      sx={{
-                        border: 'none',
-                        background: 'none',
-                        p: 0,
-                        color: c.accent.primary,
-                        cursor: activatingMcp === s.id ? 'wait' : 'pointer',
-                        opacity: activatingMcp === s.id ? 0.5 : 1,
-                        '&:hover': { textDecoration: activatingMcp ? 'none' : 'underline' },
-                        flexShrink: 0,
-                      }}
-                    >
-                      {activatingMcp === s.id ? 'Connecting…' : 'Connect'}
-                    </Typography>
-                  </Box>
-                ))}
-                {activateError && (
-                  <Typography variant="caption" sx={{ display: 'block', color: c.status.error }}>
-                    {activateError}
-                  </Typography>
-                )}
-                <Box
-                  role="button"
-                  aria-label="Dismiss"
-                  onClick={() => id && dispatch(clearMcpSuggestions({ sessionId: id }))}
-                  sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.75rem', '&:hover': { color: c.text.secondary } }}
-                >
-                  Dismiss
-                </Box>
-              </Box>
-            )}
-            {/* The surfaces this agent is driving, live inside the chat: browser snapshots + built
-                apps, each one click from popping out onto the canvas. */}
-            {!isDraft && id && <InlineSurfaceEmbeds c={c} sessionId={id} fullscreen={fullscreenChat} />}
-            {/* First-run welcome chips: sit UNDER the streamed greeting, appear once it finishes,
-                vanish the moment the user answers. The greeting itself is a real assistant bubble. */}
-            {session.is_welcome_draft && isDraft && welcomeGreetingDone && !session.messages.some((m) => m.role === 'user') && (
-              <WelcomeQuickReplies
-                c={c}
-                onPick={(p) => handleSend(p)}
-                onPickBuilder={(p) => chatInputRef.current?.setContent(p)}
-              />
-            )}
-            {(preSendActivityLabel || awaitingResponse || (session.status === 'running' && !streamingMessageId)) && (
-              <Box sx={{ overflowAnchor: 'none' }}>
-                <ThinkingBubble
-                  label={preSendActivityLabel || session.turn_label?.label}
-                />
-              </Box>
-            )}
-            {showResumeBubble && session.status === 'stopped' && !isWorkflowRunSidecar && !readOnly && (
-              <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
-                <Box
-                  onClick={handleResume}
-                  sx={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 0.5,
-                    px: 1.5,
-                    py: 0.75,
-                    borderRadius: '12px',
-                    cursor: 'pointer',
-                    bgcolor: `${c.accent.primary}10`,
-                    border: `1px solid ${c.accent.primary}30`,
-                    transition: 'all 0.15s',
-                    '&:hover': {
-                      bgcolor: `${c.accent.primary}1a`,
-                      border: `1px solid ${c.accent.primary}50`,
-                    },
-                  }}
-                >
-                  <PlayArrowIcon sx={{ fontSize: 14, color: c.accent.primary }} />
-                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.accent.primary }}>
-                    Resume Agent Response
-                  </Typography>
-                </Box>
-              </Box>
-            )}
-            {/* Fallback dock slot for a browser that docked before any browser tool row exists (or whose row was compacted away); once a row appears the slot anchors at it instead (see browserAnchorItemId). The real card overlays this rect geometrically, so the webview never remounts; the mini hides itself when its slot scrolls mostly out of view, since a live webview can't be clipped by the scroller. */}
-            {hasDockedBrowser && !browserAnchorItemId && (
-              <Box data-browser-slot={id} ref={announceBrowserSlot} sx={browserSlotSx}>{browserSlotBody}</Box>
-            )}
-            </Box>
-          </Box>
-          {showScrollButton && (
-            <Tooltip title="Scroll to bottom">
-              <IconButton
-                onClick={scrollToBottom}
-                sx={{
-                  position: 'absolute',
-                  bottom: 12,
-                  left: '50%',
-                  transform: 'translateX(-50%)',
-                  bgcolor: c.bg.surface,
-                  border: `1px solid ${c.border.medium}`,
-                  color: c.accent.primary,
-                  width: 36,
-                  height: 36,
-                  '&:hover': { bgcolor: c.bg.secondary },
-                  boxShadow: c.shadow.md,
-                  zIndex: 1,
-                }}
-              >
-                <KeyboardArrowDownIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          )}
-        </Box>
+        <MessageListBody
+          scroll={scroll}
+          c={c}
+          fullscreenChat={fullscreenChat}
+          isWelcomeDraft={session.is_welcome_draft}
+          header={<ContextOverflowCard session={session} id={id} workflowEditId={workflowEditId} c={c} />}
+          footer={
+            <TranscriptFooter
+              vm={{
+                session, id, c, mcpActivation, isDraft, welcomeGreetingDone,
+                preSendActivityLabel, awaitingResponse, streamingMessageId,
+                showResumeBubble, isWorkflowRunSidecar, readOnly, fullscreenChat,
+                fallbackBrowserSlot: browserAnchorItemId ? null : browserSlot,
+                onPickQuickReply: (p) => handleSend(p),
+                onPickBuilder: (p) => chatInputRef.current?.setContent(p),
+                onResume: handleResume,
+                onStreamGrew: stickToBottomIfNeeded,
+              }}
+            />
+          }
+          renderItem={(item, { isLastVisibleItem }) => <TranscriptItem item={item} vm={itemVm} isLastVisibleItem={isLastVisibleItem} />}
+          // The live browser anchors AT the browser tool row (ChatGPT-agent model): the view sits where the work happened, above the answer that follows it.
+          renderItemTrailer={(item) => (browserAnchorItemId && item.id === browserAnchorItemId ? browserSlot : null)}
+        />
 
-        {session.pending_approvals.length > 1 ? (
-          <BatchApprovalBar requests={session.pending_approvals} onApprove={handleApprove} onDeny={handleDeny} />
-        ) : (
-          session.pending_approvals.map((req) => (
-            <ApprovalBar key={req.id} request={req} onApprove={handleApprove} onDeny={handleDeny} />
-          ))
-        )}
+        <PendingApprovalBars requests={session.pending_approvals} />
 
         <RateLimitPill sessionId={session.id} />
         <ProviderRetryPill sessionId={session.id} />
         <ContextRecoveredPill sessionId={session.id} />
 
         {isGlowing ? (
-          <Box
-            onClick={(e) => { e.stopPropagation(); onDismissGlow?.(); }}
-            sx={{
-              mx: 1.5,
-              mb: 1.5,
-              py: 1.25,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: 2.5,
-              cursor: 'pointer',
-              fontWeight: 600,
-              fontSize: '0.875rem',
-              color: c.accent.primary,
-              border: `1.5px solid ${c.accent.primary}`,
-              background: `${c.accent.primary}08`,
-              boxShadow: `0 0 12px ${c.accent.primary}25, inset 0 0 12px ${c.accent.primary}08`,
-              transition: 'background 0.15s, box-shadow 0.15s',
-              '&:hover': {
-                background: `${c.accent.primary}14`,
-                boxShadow: `0 0 24px ${c.accent.primary}50, inset 0 0 20px ${c.accent.primary}18`,
-              },
-            }}
-          >
-            Continue chat
-          </Box>
+          <ContinueChatGlow onDismissGlow={onDismissGlow} c={c} />
         ) : (
-          <ClickAwayListener onClickAway={() => { if (queueExpanded) { setQueueExpanded(false); setEditingQueueIdx(null); } }}>
+          <ClickAwayListener onClickAway={() => { if (queue.expanded) { queue.setExpanded(false); queue.setEditingIdx(null); } }}>
             <Box>
-              {queueLength > 0 && (
-                <Box sx={{ ml: 3, mr: 1.5 }}>
-                  <Box
-                    onClick={() => { setQueueExpanded((v) => !v); setEditingQueueIdx(null); }}
-                    sx={{
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      gap: 0.5,
-                      px: 1.25,
-                      py: 0.25,
-                      borderRadius: '8px 8px 0 0',
-                      bgcolor: c.bg.surface,
-                      border: `1px solid ${c.border.subtle}`,
-                      borderBottom: 'none',
-                      cursor: 'pointer',
-                      userSelect: 'none',
-                      '&:hover': { bgcolor: c.bg.secondary },
-                      transition: 'background 0.12s',
-                    }}
-                  >
-                    {queueExpanded
-                      ? <KeyboardArrowDownIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
-                      : <KeyboardArrowUpIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
-                    }
-                    <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
-                      {queueLength} queued
-                    </Typography>
-                    <Tooltip title="Clear all">
-                      <IconButton
-                        size="small"
-                        onClick={(e) => { e.stopPropagation(); messageQueueRef.current = []; setQueueLength(0); setQueueExpanded(false); setEditingQueueIdx(null); }}
-                        sx={{ p: 0.15, color: c.text.tertiary, '&:hover': { color: c.status.error } }}
-                      >
-                        <CloseIcon sx={{ fontSize: 10 }} />
-                      </IconButton>
-                    </Tooltip>
-                  </Box>
-
-                  {queueExpanded && (
-                    <Box
-                      sx={{
-                        bgcolor: c.bg.surface,
-                        border: `1px solid ${c.border.subtle}`,
-                        borderBottom: 'none',
-                        borderRadius: '0 8px 0 0',
-                        maxHeight: 240,
-                        overflowY: 'auto',
-                        '&::-webkit-scrollbar': { width: 4 },
-                        '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 2 },
-                      }}
-                    >
-                      {messageQueueRef.current.map((msg, idx) => (
-                        <Box
-                          key={idx}
-                          draggable={editingQueueIdx !== idx}
-                          onDragStart={(e) => {
-                            setDragIdx(idx);
-                            e.dataTransfer.effectAllowed = 'move';
-                          }}
-                          onDragOver={(e) => {
-                            e.preventDefault();
-                            e.dataTransfer.dropEffect = 'move';
-                            if (dragIdx !== null && dragIdx !== idx) setDropTargetIdx(idx);
-                          }}
-                          onDragLeave={() => { if (dropTargetIdx === idx) setDropTargetIdx(null); }}
-                          onDrop={(e) => {
-                            e.preventDefault();
-                            if (dragIdx !== null && dragIdx !== idx) {
-                              const q = messageQueueRef.current;
-                              const [item] = q.splice(dragIdx, 1);
-                              q.splice(idx, 0, item);
-                              setQueueLength(q.length);
-                            }
-                            setDragIdx(null);
-                            setDropTargetIdx(null);
-                          }}
-                          onDragEnd={() => { setDragIdx(null); setDropTargetIdx(null); }}
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            gap: 0.75,
-                            px: 1.5,
-                            py: 1,
-                            borderBottom: idx < queueLength - 1 ? `1px solid ${c.border.subtle}` : 'none',
-                            '&:hover': { bgcolor: c.bg.secondary },
-                            transition: 'background 0.1s, opacity 0.15s',
-                            ...(dragIdx === idx ? { opacity: 0.35 } : {}),
-                            ...(dropTargetIdx === idx && dragIdx !== null && dragIdx !== idx
-                              ? { borderTop: `2px solid ${c.accent.primary}` }
-                              : {}),
-                          }}
-                        >
-                          <Box
-                            sx={{
-                              cursor: editingQueueIdx === idx ? 'default' : 'grab',
-                              display: 'flex',
-                              alignItems: 'center',
-                              mt: 0.3,
-                              color: c.text.ghost,
-                              '&:hover': { color: c.text.tertiary },
-                              '&:active': { cursor: 'grabbing' },
-                            }}
-                          >
-                            <DragIndicatorIcon sx={{ fontSize: 14 }} />
-                          </Box>
-                          {editingQueueIdx === idx ? (
-                            <Box sx={{ flex: 1, display: 'flex', gap: 0.5, alignItems: 'flex-start' }}>
-                              <TextField
-                                multiline
-                                fullWidth
-                                size="small"
-                                value={editingQueueText}
-                                onChange={(e) => setEditingQueueText(e.target.value)}
-                                autoFocus
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter' && !e.shiftKey) {
-                                    e.preventDefault();
-                                    const trimmed = editingQueueText.trim();
-                                    if (trimmed) {
-                                      messageQueueRef.current[idx] = { ...messageQueueRef.current[idx], prompt: trimmed };
-                                      setQueueLength(messageQueueRef.current.length);
-                                    }
-                                    setEditingQueueIdx(null);
-                                  }
-                                  if (e.key === 'Escape') setEditingQueueIdx(null);
-                                }}
-                                sx={{
-                                  '& .MuiOutlinedInput-root': {
-                                    fontSize: '0.75rem',
-                                    color: c.text.primary,
-                                    '& fieldset': { borderColor: c.border.medium },
-                                    '&.Mui-focused fieldset': { borderColor: c.accent.primary },
-                                  },
-                                }}
-                              />
-                              <IconButton
-                                size="small"
-                                onClick={() => {
-                                  const trimmed = editingQueueText.trim();
-                                  if (trimmed) {
-                                    messageQueueRef.current[idx] = { ...messageQueueRef.current[idx], prompt: trimmed };
-                                    setQueueLength(messageQueueRef.current.length);
-                                  }
-                                  setEditingQueueIdx(null);
-                                }}
-                                sx={{ p: 0.25, color: c.accent.primary, mt: 0.25 }}
-                              >
-                                <CheckIcon sx={{ fontSize: 14 }} />
-                              </IconButton>
-                            </Box>
-                          ) : (
-                            <Typography
-                              sx={{
-                                flex: 1,
-                                fontSize: '0.75rem',
-                                color: c.text.secondary,
-                                lineHeight: 1.5,
-                                overflow: 'hidden',
-                                display: '-webkit-box',
-                                WebkitLineClamp: 3,
-                                WebkitBoxOrient: 'vertical',
-                                wordBreak: 'break-word',
-                              }}
-                            >
-                              {msg.prompt}
-                            </Typography>
-                          )}
-                          {editingQueueIdx !== idx && (
-                            <Box sx={{ display: 'flex', gap: 0.25, flexShrink: 0, mt: 0.15 }}>
-                              <Tooltip title="Edit">
-                                <IconButton
-                                  size="small"
-                                  onClick={() => { setEditingQueueIdx(idx); setEditingQueueText(msg.prompt); }}
-                                  sx={{ p: 0.25, color: c.text.tertiary, '&:hover': { color: c.text.primary } }}
-                                >
-                                  <EditOutlinedIcon sx={{ fontSize: 13 }} />
-                                </IconButton>
-                              </Tooltip>
-                              <Tooltip title="Remove">
-                                <IconButton
-                                  size="small"
-                                  onClick={() => {
-                                    messageQueueRef.current.splice(idx, 1);
-                                    setQueueLength(messageQueueRef.current.length);
-                                    if (messageQueueRef.current.length === 0) setQueueExpanded(false);
-                                  }}
-                                  sx={{ p: 0.25, color: c.text.tertiary, '&:hover': { color: c.status.error } }}
-                                >
-                                  <DeleteOutlineIcon sx={{ fontSize: 13 }} />
-                                </IconButton>
-                              </Tooltip>
-                            </Box>
-                          )}
-                        </Box>
-                      ))}
-                    </Box>
-                  )}
-                </Box>
-              )}
-              {(() => {
-                // Proactive Haiku-overflow warning. Each connected MCP adds a sizeable tools-schema chunk to every Claude request; Haiku 4.5's window is 5x smaller than Sonnet/Opus, so 5+ simultaneously-enabled MCPs reliably push a one-line message past the limit. We surface this BEFORE the user sends so they don't waste a turn on "Prompt is too long".
-                const isHaiku = (model || '').toLowerCase().startsWith('haiku');
-                const enabledMcpCount = Object.values(toolItems).filter(
-                  (t) => t.enabled && t.mcp_config && Object.keys(t.mcp_config).length > 0,
-                ).length;
-                if (!isHaiku || enabledMcpCount < 5) return null;
-                return (
-                  <Box
-                    sx={{
-                      mx: 2,
-                      mb: 1,
-                      p: 1.5,
-                      borderRadius: `${c.radius.lg}px`,
-                      border: `1px solid ${c.status.warning}40`,
-                      bgcolor: `${c.status.warning}10`,
-                      display: 'flex',
-                      alignItems: 'flex-start',
-                      gap: 1.2,
-                    }}
-                  >
-                    <Box sx={{ flexShrink: 0, mt: 0.2 }}>
-                      <ErrorSlime size={20} />
-                    </Box>
-                    <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
-                        Haiku may run out of room with {enabledMcpCount} apps connected
-                      </Typography>
-                      <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.45 }}>
-                        Haiku is the fastest Claude model but holds the least at once.
-                        Each connected app adds instructions Claude has to read first.
-                        If your message fails with “Prompt is too long,” turn off a few
-                        apps (Microsoft 365 is the heaviest) or switch to Sonnet/Opus,
-                        both have 5× more room.
-                      </Typography>
-                    </Box>
-                  </Box>
-                );
-              })()}
-              {(() => {
-                const list = session.mcp_suggestions ?? [];
-                if (list.length) mcpSnapshotRef.current = list;
-                const display = mcpSnapshotRef.current;
-                return (
-                  <Fade in={list.length > 0} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
-                    <Box sx={{
-                      mx: 2,
-                      mb: 1,
-                      p: 1.5,
-                      borderRadius: 1.5,
-                      border: `1px solid ${c.border.medium}`,
-                      bgcolor: c.bg.secondary,
-                      position: 'relative',
-                    }}>
-                      <Box
-                        role="button"
-                        aria-label="Dismiss integration suggestion"
-                        onClick={() => {
-                          if (!id) return;
-                          dispatch(clearMcpSuggestions({ sessionId: id }));
-                          dispatch(dismissMcpSuggestion(display.map((s) => s.id)));
-                        }}
-                        sx={{
-                          position: 'absolute',
-                          top: 6,
-                          right: 8,
-                          width: 20,
-                          height: 20,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          fontSize: '1rem',
-                          lineHeight: 1,
-                          color: c.text.muted,
-                          cursor: 'pointer',
-                          borderRadius: 0.75,
-                          '&:hover': { color: c.text.primary, bgcolor: c.bg.elevated },
-                        }}
-                      >
-                        ×
-                      </Box>
-                      <Typography variant="body2" sx={{ color: c.text.primary, fontWeight: 500, mb: 0.5, pr: 3 }}>
-                        Looks like this might need an integration
-                      </Typography>
-                      <Typography variant="caption" sx={{ color: c.text.secondary, display: 'block', mb: 1 }}>
-                        Activating one of these will let the agent answer in a single round-trip.
-                      </Typography>
-                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-                        {display.map((s) => (
-                          <Box key={s.id} sx={{ flexBasis: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
-                            <Box sx={{ flex: 1, minWidth: 0 }}>
-                              <Typography variant="caption" sx={{ color: c.text.primary, fontWeight: 500 }}>
-                                {s.title}
-                              </Typography>
-                              {s.reason && (
-                                <Typography variant="caption" sx={{ display: 'block', color: c.text.tertiary }}>
-                                  {s.reason}
-                                </Typography>
-                              )}
-                            </Box>
-                            <Typography
-                              component="button"
-                              variant="caption"
-                              disabled={activatingMcp === s.id}
-                              onClick={async () => {
-                                if (activatingMcp) return;
-                                setActivateError(null);
-                                setActivatingMcp(s.id);
-                                try {
-                                  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-                                  const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
-                                  if (tok) headers['Authorization'] = `Bearer ${tok}`;
-                                  const r = await fetch(`${API_BASE}/mcp-meta/activate`, {
-                                    method: 'POST',
-                                    headers,
-                                    body: JSON.stringify({
-                                      server_name: s.id.toLowerCase().replace(/\s+/g, '-'),
-                                      reason: s.reason || 'preflight suggestion',
-                                      parent_session_id: session.id,
-                                    }),
-                                  });
-                                  const body = await r.json().catch(() => ({} as any));
-                                  if (!r.ok) {
-                                    setActivateError(`Activation failed (${r.status})`);
-                                  } else if (body?.status === 'unknown_server') {
-                                    // Not yet connected; jump straight to Actions so the user can finish OAuth. Nothing here can do it on their behalf.
-                                    openMarketplace('my-connectors');
-                                  } else if (id) {
-                                    // Activation succeeded; clear the banner so the user gets visual confirmation the click did something.
-                                    dispatch(clearMcpSuggestions({ sessionId: id }));
-                                  }
-                                } catch (e: any) {
-                                  setActivateError(e?.message || 'Activation failed');
-                                } finally {
-                                  setActivatingMcp(null);
-                                }
-                              }}
-                              sx={{
-                                cursor: activatingMcp === s.id ? 'wait' : 'pointer',
-                                border: `1px solid ${c.border.medium}`,
-                                borderRadius: 1,
-                                px: 1.25,
-                                py: 0.5,
-                                bgcolor: 'transparent',
-                                color: c.text.primary,
-                                opacity: activatingMcp === s.id ? 0.5 : 1,
-                                '&:hover': { bgcolor: activatingMcp ? 'transparent' : c.bg.elevated },
-                                flexShrink: 0,
-                              }}
-                            >
-                              {activatingMcp === s.id ? 'Activating…' : 'Activate'}
-                            </Typography>
-                          </Box>
-                        ))}
-                      </Box>
-                      {activateError && (
-                        <Typography variant="caption" sx={{ display: 'block', mt: 0.75, color: c.status.error }}>
-                          {activateError}
-                        </Typography>
-                      )}
-                    </Box>
-                  </Fade>
-                );
-              })()}
+              <QueuePanel queue={queue} c={c} />
+              <HaikuMcpWarning model={model} c={c} />
+              <McpSuggestionsBanner session={session} id={id} c={c} mcpActivation={mcpActivation} />
               {readOnly ? null : isStoppableSidecar ? (
                 <ForceStopAgentBar onStop={handleStop} onSaveWorkflow={onTestSaveWorkflow} onContinueEditing={onTestContinueEditing} testState={testState} />
               ) : (
                 <Box sx={{ position: 'relative' }}>
-                  <WorkflowModelNotice c={c} label={workflowModelNotice} />
-                  <FreeTrialModelNotice c={c} notice={freeTrialModelNotice} />
+                  <WorkflowModelNotice c={c} label={workflowNotice} />
+                  <FreeTrialModelNotice c={c} notice={freeTrialNotice} />
                   <FollowupChips
                     sessionId={id}
                     busy={agentBusy}
@@ -2561,26 +257,26 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                     onPick={(p) => handleSend(p)}
                   />
                   <ChatInput
-                  ref={chatInputRef}
-                  onSend={handleSend}
-                  disabled={false}
-                  mode={mode}
-                  onModeChange={handleModeChange}
-                  model={model}
-                  onModelChange={handleModelChange}
-                  isRunning={agentBusy}
-                  onStop={handleStop}
-                  queueLength={queueLength}
-                  contextEstimate={contextEstimate}
-                  sessionId={id}
-                  autoFocus={autoFocus}
-                  prefillPrompt={prefillPrompt}
-                  placeholderOverride={runContext ? 'Ask about this run...' : embedded ? composerPlaceholder(session.id, (session.messages || []).some((mm) => mm.role === 'assistant')) : undefined}
-                  runContext={runContext}
-                  onClearRunContext={onClearRunContext}
-                  thinkingLevel={session?.thinking_level ?? 'auto'}
-                  onThinkingLevelChange={handleThinkingLevelChange}
-                  onActivityLabelChange={setPreSendActivityLabel}
+                    ref={chatInputRef}
+                    onSend={handleSend}
+                    disabled={false}
+                    mode={mode}
+                    onModeChange={handleModeChange}
+                    model={model}
+                    onModelChange={handleModelChange}
+                    isRunning={agentBusy}
+                    onStop={handleStop}
+                    queueLength={queue.length}
+                    contextEstimate={contextEstimate}
+                    sessionId={id}
+                    autoFocus={autoFocus}
+                    prefillPrompt={prefillPrompt}
+                    placeholderOverride={runContext ? 'Ask about this run...' : embedded ? composerPlaceholder(session.id, (session.messages || []).some((mm) => mm.role === 'assistant')) : undefined}
+                    runContext={runContext}
+                    onClearRunContext={onClearRunContext}
+                    thinkingLevel={session?.thinking_level ?? 'auto'}
+                    onThinkingLevelChange={handleThinkingLevelChange}
+                    onActivityLabelChange={setPreSendActivityLabel}
                   />
                 </Box>
               )}
@@ -2592,55 +288,4 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   );
 };
 
-// Brief toast above the build chat's composer confirming a model switch also changes the model the scheduled workflow will run on. Holds the last label in a ref so the exit fade renders content instead of blanking mid-animation.
-function WorkflowModelNotice({ c, label }: { c: ReturnType<typeof useClaudeTokens>; label: string | null }) {
-  const last = React.useRef<string | null>(null);
-  if (label) last.current = label;
-  const display = last.current;
-  if (!display) return null;
-  return (
-    <Fade in={!!label} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
-      <Box sx={{
-        position: 'absolute', left: 8, right: 8, bottom: 'calc(100% + 8px)',
-        display: 'flex', alignItems: 'center', gap: 1,
-        bgcolor: c.bg.surface, border: `1px solid ${c.border.medium}`,
-        boxShadow: c.shadow.md, borderRadius: '12px',
-        px: 1.75, py: 1, zIndex: 6,
-      }}>
-        <SwapHorizRoundedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
-          This workflow will now be using <b>{display}</b>.
-        </Box>
-      </Box>
-    </Fade>
-  );
-}
-
-function FreeTrialModelNotice({ c, notice }: { c: ReturnType<typeof useClaudeTokens>; notice: { kind: 'connect' | 'spent'; label: string } | null }) {
-  const last = React.useRef<{ kind: 'connect' | 'spent'; label: string } | null>(null);
-  if (notice) last.current = notice;
-  const display = last.current;
-  if (!display) return null;
-  return (
-    <Fade in={!!notice} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
-      <Box sx={{
-        position: 'absolute', left: 8, right: 8, bottom: 'calc(100% + 8px)',
-        display: 'flex', alignItems: 'center', gap: 1,
-        bgcolor: c.bg.surface, border: `1px solid ${c.border.medium}`,
-        boxShadow: c.shadow.md, borderRadius: '12px',
-        px: 1.75, py: 1, zIndex: 6,
-      }}>
-        <InfoOutlinedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
-          {display.kind === 'spent' ? (
-            <>You're out of free runs, connect a model in Settings to use <b>{display.label}</b>.</>
-          ) : (
-            <>Connect a provider in Settings to use <b>{display.label}</b>.</>
-          )}
-        </Box>
-      </Box>
-    </Fade>
-  );
-}
-
 export default AgentChat;
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/hooks/useInitialContextPaths.ts b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useInitialContextPaths.ts
new file mode 100644
index 000000000..4cd8ee5f9
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useInitialContextPaths.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import type { ContextPath } from '@/app/components/editor/DirectoryBrowser';
+import type { ChatInputHandle } from '../types';
+
+// One-shot seed of the caller's initial context paths into the composer (a card opened "with these files"). Applied once per mount, after the editor has had a tick to mount its handle. Lifted verbatim from AgentChat.
+export function useInitialContextPaths(chatInputRef: RefObject<ChatInputHandle>, initialContextPaths: ContextPath[] | undefined): void {
+  const initialContextApplied = useRef(false);
+  useEffect(() => {
+    if (initialContextApplied.current || !initialContextPaths?.length) return;
+    const timer = setTimeout(() => {
+      chatInputRef.current?.setContent('', initialContextPaths);
+      initialContextApplied.current = true;
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [chatInputRef, initialContextPaths]);
+}
diff --git a/frontend/src/app/pages/AgentChat/bubbles/useBurstRevealTracking.ts b/frontend/src/app/pages/AgentChat/bubbles/useBurstRevealTracking.ts
new file mode 100644
index 000000000..a4b7f8ae2
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/bubbles/useBurstRevealTracking.ts
@@ -0,0 +1,13 @@
+import React, { useRef } from 'react';
+
+// Burst-reveal bookkeeping: ids present at open (or after a session/branch hop) are HISTORY and
+// never animate; only ids that appear later, while the agent is working, type themselves out. The
+// ref is seeded lazily by the first item render after a hop (TranscriptItem), and reset here in the
+// same layout phase as the scroll subsystem's session/branch reset (useMessageScroll).
+export function useBurstRevealTracking(id: string | undefined, activeBranchId: string | undefined) {
+  const seenMessageIdsRef = useRef<Set<string> | null>(null);
+  React.useLayoutEffect(() => {
+    seenMessageIdsRef.current = null;
+  }, [id, activeBranchId]);
+  return seenMessageIdsRef;
+}
diff --git a/frontend/src/app/pages/AgentChat/composer/ContinueChatGlow.tsx b/frontend/src/app/pages/AgentChat/composer/ContinueChatGlow.tsx
new file mode 100644
index 000000000..8493b90c7
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/composer/ContinueChatGlow.tsx
@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// The glowing "Continue chat" bar that replaces the composer while this chat card is glow-highlighted
+// (e.g. a browser card handed the user here). Clicking dismisses the glow. Lifted verbatim from
+// AgentChat.
+export function ContinueChatGlow({ onDismissGlow, c }: { onDismissGlow?: () => void; c: ReturnType<typeof useClaudeTokens> }) {
+  return (
+    <Box
+      onClick={(e) => { e.stopPropagation(); onDismissGlow?.(); }}
+      sx={{
+        mx: 1.5,
+        mb: 1.5,
+        py: 1.25,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 2.5,
+        cursor: 'pointer',
+        fontWeight: 600,
+        fontSize: '0.875rem',
+        color: c.accent.primary,
+        border: `1.5px solid ${c.accent.primary}`,
+        background: `${c.accent.primary}08`,
+        boxShadow: `0 0 12px ${c.accent.primary}25, inset 0 0 12px ${c.accent.primary}08`,
+        transition: 'background 0.15s, box-shadow 0.15s',
+        '&:hover': {
+          background: `${c.accent.primary}14`,
+          boxShadow: `0 0 24px ${c.accent.primary}50, inset 0 0 20px ${c.accent.primary}18`,
+        },
+      }}
+    >
+      Continue chat
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/composer/HaikuMcpWarning.tsx b/frontend/src/app/pages/AgentChat/composer/HaikuMcpWarning.tsx
new file mode 100644
index 000000000..1734722a5
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/composer/HaikuMcpWarning.tsx
@@ -0,0 +1,51 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useAppSelector } from '@/shared/hooks';
+import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// Proactive Haiku-overflow warning. Each connected MCP adds a sizeable tools-schema chunk to every
+// Claude request; Haiku 4.5's window is 5x smaller than Sonnet/Opus, so 5+ simultaneously-enabled MCPs
+// reliably push a one-line message past the limit. We surface this BEFORE the user sends so they don't
+// waste a turn on "Prompt is too long". Lifted verbatim from AgentChat; self-gating (renders null
+// unless Haiku + 5 or more enabled MCPs).
+export function HaikuMcpWarning({ model, c }: { model: string; c: ReturnType<typeof useClaudeTokens> }) {
+  // Each connected MCP adds a meaningful chunk of tool-schema tokens to every request; Haiku 4.5's 200K window can't hold 5+ of them.
+  const toolItems = useAppSelector((state) => state.tools.items);
+  const isHaiku = (model || '').toLowerCase().startsWith('haiku');
+  const enabledMcpCount = Object.values(toolItems).filter(
+    (t) => t.enabled && t.mcp_config && Object.keys(t.mcp_config).length > 0,
+  ).length;
+  if (!isHaiku || enabledMcpCount < 5) return null;
+  return (
+    <Box
+      sx={{
+        mx: 2,
+        mb: 1,
+        p: 1.5,
+        borderRadius: `${c.radius.lg}px`,
+        border: `1px solid ${c.status.warning}40`,
+        bgcolor: `${c.status.warning}10`,
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 1.2,
+      }}
+    >
+      <Box sx={{ flexShrink: 0, mt: 0.2 }}>
+        <ErrorSlime size={20} />
+      </Box>
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
+          Haiku may run out of room with {enabledMcpCount} apps connected
+        </Typography>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.45 }}>
+          Haiku is the fastest Claude model but holds the least at once.
+          Each connected app adds instructions Claude has to read first.
+          If your message fails with “Prompt is too long,” turn off a few
+          apps (Microsoft 365 is the heaviest) or switch to Sonnet/Opus,
+          both have 5× more room.
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/composer/McpSuggestionsBanner.tsx b/frontend/src/app/pages/AgentChat/composer/McpSuggestionsBanner.tsx
new file mode 100644
index 000000000..21ba43c49
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/composer/McpSuggestionsBanner.tsx
@@ -0,0 +1,119 @@
+import { useRef } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Fade from '@mui/material/Fade';
+import { useAppDispatch } from '@/shared/hooks';
+import { clearMcpSuggestions, type AgentSession } from '@/shared/state/agentsSlice';
+import { dismissMcpSuggestion } from '@/shared/state/settingsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { useMcpActivation } from '../model/useMcpActivation';
+
+// The docked "Looks like this might need an integration" banner above the composer. Lifted verbatim
+// from AgentChat. Shares the caller's useMcpActivation instance so activation state stays consistent
+// with the in-transcript McpConnectOffer.
+export function McpSuggestionsBanner({
+  session,
+  id,
+  c,
+  mcpActivation,
+}: {
+  session: AgentSession;
+  id: string | undefined;
+  c: ReturnType<typeof useClaudeTokens>;
+  mcpActivation: ReturnType<typeof useMcpActivation>;
+}) {
+  const dispatch = useAppDispatch();
+  // Holds the last non-empty suggestions so the docked banner's exit fade renders them instead of going blank the instant the array is cleared.
+  const mcpSnapshotRef = useRef<Array<{ id: string; title: string; description: string; reason?: string }>>([]);
+  const list = session.mcp_suggestions ?? [];
+  if (list.length) mcpSnapshotRef.current = list;
+  const display = mcpSnapshotRef.current;
+  return (
+    <Fade in={list.length > 0} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
+      <Box sx={{
+        mx: 2,
+        mb: 1,
+        p: 1.5,
+        borderRadius: 1.5,
+        border: `1px solid ${c.border.medium}`,
+        bgcolor: c.bg.secondary,
+        position: 'relative',
+      }}>
+        <Box
+          role="button"
+          aria-label="Dismiss integration suggestion"
+          onClick={() => {
+            if (!id) return;
+            dispatch(clearMcpSuggestions({ sessionId: id }));
+            dispatch(dismissMcpSuggestion(display.map((s) => s.id)));
+          }}
+          sx={{
+            position: 'absolute',
+            top: 6,
+            right: 8,
+            width: 20,
+            height: 20,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '1rem',
+            lineHeight: 1,
+            color: c.text.muted,
+            cursor: 'pointer',
+            borderRadius: 0.75,
+            '&:hover': { color: c.text.primary, bgcolor: c.bg.elevated },
+          }}
+        >
+          ×
+        </Box>
+        <Typography variant="body2" sx={{ color: c.text.primary, fontWeight: 500, mb: 0.5, pr: 3 }}>
+          Looks like this might need an integration
+        </Typography>
+        <Typography variant="caption" sx={{ color: c.text.secondary, display: 'block', mb: 1 }}>
+          Activating one of these will let the agent answer in a single round-trip.
+        </Typography>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+          {display.map((s) => (
+            <Box key={s.id} sx={{ flexBasis: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography variant="caption" sx={{ color: c.text.primary, fontWeight: 500 }}>
+                  {s.title}
+                </Typography>
+                {s.reason && (
+                  <Typography variant="caption" sx={{ display: 'block', color: c.text.tertiary }}>
+                    {s.reason}
+                  </Typography>
+                )}
+              </Box>
+              <Typography
+                component="button"
+                variant="caption"
+                disabled={mcpActivation.activatingId === s.id}
+                onClick={() => mcpActivation.activate(s, session.id)}
+                sx={{
+                  cursor: mcpActivation.activatingId === s.id ? 'wait' : 'pointer',
+                  border: `1px solid ${c.border.medium}`,
+                  borderRadius: 1,
+                  px: 1.25,
+                  py: 0.5,
+                  bgcolor: 'transparent',
+                  color: c.text.primary,
+                  opacity: mcpActivation.activatingId === s.id ? 0.5 : 1,
+                  '&:hover': { bgcolor: mcpActivation.activatingId ? 'transparent' : c.bg.elevated },
+                  flexShrink: 0,
+                }}
+              >
+                {mcpActivation.activatingId === s.id ? 'Activating…' : 'Activate'}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+        {mcpActivation.error && (
+          <Typography variant="caption" sx={{ display: 'block', mt: 0.75, color: c.status.error }}>
+            {mcpActivation.error}
+          </Typography>
+        )}
+      </Box>
+    </Fade>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/model/ModelNotices.tsx b/frontend/src/app/pages/AgentChat/model/ModelNotices.tsx
new file mode 100644
index 000000000..862454df4
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/model/ModelNotices.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// Brief toast above the build chat's composer confirming a model switch also changes the model the scheduled workflow will run on. Holds the last label in a ref so the exit fade renders content instead of blanking mid-animation.
+export function WorkflowModelNotice({ c, label }: { c: ReturnType<typeof useClaudeTokens>; label: string | null }) {
+  const last = React.useRef<string | null>(null);
+  if (label) last.current = label;
+  const display = last.current;
+  if (!display) return null;
+  return (
+    <Fade in={!!label} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
+      <Box sx={{
+        position: 'absolute', left: 8, right: 8, bottom: 'calc(100% + 8px)',
+        display: 'flex', alignItems: 'center', gap: 1,
+        bgcolor: c.bg.surface, border: `1px solid ${c.border.medium}`,
+        boxShadow: c.shadow.md, borderRadius: '12px',
+        px: 1.75, py: 1, zIndex: 6,
+      }}>
+        <SwapHorizRoundedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
+          This workflow will now be using <b>{display}</b>.
+        </Box>
+      </Box>
+    </Fade>
+  );
+}
+
+export function FreeTrialModelNotice({ c, notice }: { c: ReturnType<typeof useClaudeTokens>; notice: { kind: 'connect' | 'spent'; label: string } | null }) {
+  const last = React.useRef<{ kind: 'connect' | 'spent'; label: string } | null>(null);
+  if (notice) last.current = notice;
+  const display = last.current;
+  if (!display) return null;
+  return (
+    <Fade in={!!notice} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
+      <Box sx={{
+        position: 'absolute', left: 8, right: 8, bottom: 'calc(100% + 8px)',
+        display: 'flex', alignItems: 'center', gap: 1,
+        bgcolor: c.bg.surface, border: `1px solid ${c.border.medium}`,
+        boxShadow: c.shadow.md, borderRadius: '12px',
+        px: 1.75, py: 1, zIndex: 6,
+      }}>
+        <InfoOutlinedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
+          {display.kind === 'spent' ? (
+            <>You're out of free runs, connect a model in Settings to use <b>{display.label}</b>.</>
+          ) : (
+            <>Connect a provider in Settings to use <b>{display.label}</b>.</>
+          )}
+        </Box>
+      </Box>
+    </Fade>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/model/useMcpActivation.ts b/frontend/src/app/pages/AgentChat/model/useMcpActivation.ts
new file mode 100644
index 000000000..233ccba55
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/model/useMcpActivation.ts
@@ -0,0 +1,62 @@
+import { useCallback, useState } from 'react';
+import { API_BASE, getAuthToken } from '@/shared/config';
+import { openMarketplace } from '@/app/pages/Directory/openMarketplace';
+import { clearMcpSuggestions } from '@/shared/state/agentsSlice';
+import type { useAppDispatch } from '@/shared/hooks';
+
+export interface McpSuggestion {
+  id: string;
+  title: string;
+  description: string;
+  reason?: string;
+}
+
+// Shared activation state + handler for the preflight MCP-connect suggestions, which render in two places
+// (the in-transcript connect offer and the docked composer banner). Owns the in-flight id + error so both
+// surfaces stay in lockstep. `ownerId` is the session whose suggestions get cleared on success.
+export interface McpActivation {
+  activatingId: string | null;
+  error: string | null;
+  activate: (s: McpSuggestion, parentSessionId: string) => Promise<void>;
+}
+
+export function useMcpActivation(dispatch: ReturnType<typeof useAppDispatch>, ownerId: string | undefined): McpActivation {
+  const [activatingId, setActivatingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const activate = useCallback(async (s: McpSuggestion, parentSessionId: string) => {
+    if (activatingId) return;
+    setError(null);
+    setActivatingId(s.id);
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
+      if (tok) headers['Authorization'] = `Bearer ${tok}`;
+      const r = await fetch(`${API_BASE}/mcp-meta/activate`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+          server_name: s.id.toLowerCase().replace(/\s+/g, '-'),
+          reason: s.reason || 'preflight suggestion',
+          parent_session_id: parentSessionId,
+        }),
+      });
+      const body = await r.json().catch(() => ({} as any));
+      if (!r.ok) {
+        setError(`Activation failed (${r.status})`);
+      } else if (body?.status === 'unknown_server') {
+        // Not yet connected; jump to the store's connectors so the user can finish OAuth. Nothing here can do it on their behalf.
+        openMarketplace('my-connectors');
+      } else if (ownerId) {
+        // Activation succeeded; clear the banner so the user gets visual confirmation the click did something.
+        dispatch(clearMcpSuggestions({ sessionId: ownerId }));
+      }
+    } catch (e: any) {
+      setError(e?.message || 'Activation failed');
+    } finally {
+      setActivatingId(null);
+    }
+  }, [activatingId, ownerId, dispatch]);
+
+  return { activatingId, error, activate };
+}
diff --git a/frontend/src/app/pages/AgentChat/model/useModelSwitchNotices.ts b/frontend/src/app/pages/AgentChat/model/useModelSwitchNotices.ts
new file mode 100644
index 000000000..c4ccc2d38
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/model/useModelSwitchNotices.ts
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface FreeTrialNotice {
+  kind: 'connect' | 'spent';
+  label: string;
+}
+
+// Owns the two model-switch toast states + their auto-clear timers (workflow-run-model change, and the
+// free-trial "can't use this model" warning). Each show() replaces any pending timer; the notices fade
+// themselves out after the window. Timers are cleared on unmount.
+export interface ModelSwitchNotices {
+  workflowNotice: string | null;
+  freeTrialNotice: FreeTrialNotice | null;
+  showWorkflow: (label: string) => void;
+  showFreeTrial: (kind: 'connect' | 'spent', label: string) => void;
+  clearFreeTrial: () => void;
+}
+
+export function useModelSwitchNotices(): ModelSwitchNotices {
+  const [workflowNotice, setWorkflowNotice] = useState<string | null>(null);
+  const workflowTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [freeTrialNotice, setFreeTrialNotice] = useState<FreeTrialNotice | null>(null);
+  const freeTrialTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const showWorkflow = useCallback((label: string) => {
+    setWorkflowNotice(label);
+    if (workflowTimer.current) clearTimeout(workflowTimer.current);
+    workflowTimer.current = setTimeout(() => setWorkflowNotice(null), 5000);
+  }, []);
+
+  const showFreeTrial = useCallback((kind: 'connect' | 'spent', label: string) => {
+    setFreeTrialNotice({ kind, label });
+    if (freeTrialTimer.current) clearTimeout(freeTrialTimer.current);
+    freeTrialTimer.current = setTimeout(() => setFreeTrialNotice(null), 6000);
+  }, []);
+
+  // Picked a usable model: drop any stale free-trial notice now (fades out in ~220ms) instead of letting it sit out its timer.
+  const clearFreeTrial = useCallback(() => {
+    setFreeTrialNotice(null);
+    if (freeTrialTimer.current) clearTimeout(freeTrialTimer.current);
+  }, []);
+
+  useEffect(() => () => {
+    if (workflowTimer.current) clearTimeout(workflowTimer.current);
+    if (freeTrialTimer.current) clearTimeout(freeTrialTimer.current);
+  }, []);
+
+  return { workflowNotice, freeTrialNotice, showWorkflow, showFreeTrial, clearFreeTrial };
+}
diff --git a/frontend/src/app/pages/AgentChat/queue/QueuePanel.tsx b/frontend/src/app/pages/AgentChat/queue/QueuePanel.tsx
new file mode 100644
index 000000000..d25d01982
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/queue/QueuePanel.tsx
@@ -0,0 +1,206 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import CloseIcon from '@mui/icons-material/Close';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import CheckIcon from '@mui/icons-material/Check';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { MessageQueue } from './useMessageQueue';
+
+// The pending-send queue chip + expandable, editable, reorderable list above the composer. Renders nothing
+// when the queue is empty. All queue mutation lives in the useMessageQueue hook; this is presentational.
+export function QueuePanel({ queue, c }: { queue: MessageQueue; c: ReturnType<typeof useClaudeTokens> }) {
+  if (queue.length === 0) return null;
+  return (
+    <Box sx={{ ml: 3, mr: 1.5 }}>
+      <Box
+        onClick={() => { queue.setExpanded((v) => !v); queue.setEditingIdx(null); }}
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.5,
+          px: 1.25,
+          py: 0.25,
+          borderRadius: '8px 8px 0 0',
+          bgcolor: c.bg.surface,
+          border: `1px solid ${c.border.subtle}`,
+          borderBottom: 'none',
+          cursor: 'pointer',
+          userSelect: 'none',
+          '&:hover': { bgcolor: c.bg.secondary },
+          transition: 'background 0.12s',
+        }}
+      >
+        {queue.expanded
+          ? <KeyboardArrowDownIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
+          : <KeyboardArrowUpIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
+        }
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
+          {queue.length} queued
+        </Typography>
+        <Tooltip title="Clear all">
+          <IconButton
+            size="small"
+            onClick={(e) => { e.stopPropagation(); queue.clear(); }}
+            sx={{ p: 0.15, color: c.text.tertiary, '&:hover': { color: c.status.error } }}
+          >
+            <CloseIcon sx={{ fontSize: 10 }} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {queue.expanded && (
+        <Box
+          sx={{
+            bgcolor: c.bg.surface,
+            border: `1px solid ${c.border.subtle}`,
+            borderBottom: 'none',
+            borderRadius: '0 8px 0 0',
+            maxHeight: 240,
+            overflowY: 'auto',
+            '&::-webkit-scrollbar': { width: 4 },
+            '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 2 },
+          }}
+        >
+          {queue.ref.current.map((msg, idx) => (
+            <Box
+              key={idx}
+              draggable={queue.editingIdx !== idx}
+              onDragStart={(e) => {
+                queue.setDragIdx(idx);
+                e.dataTransfer.effectAllowed = 'move';
+              }}
+              onDragOver={(e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                if (queue.dragIdx !== null && queue.dragIdx !== idx) queue.setDropTargetIdx(idx);
+              }}
+              onDragLeave={() => { if (queue.dropTargetIdx === idx) queue.setDropTargetIdx(null); }}
+              onDrop={(e) => {
+                e.preventDefault();
+                if (queue.dragIdx !== null && queue.dragIdx !== idx) {
+                  queue.reorder(queue.dragIdx, idx);
+                }
+                queue.setDragIdx(null);
+                queue.setDropTargetIdx(null);
+              }}
+              onDragEnd={() => { queue.setDragIdx(null); queue.setDropTargetIdx(null); }}
+              sx={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 0.75,
+                px: 1.5,
+                py: 1,
+                borderBottom: idx < queue.length - 1 ? `1px solid ${c.border.subtle}` : 'none',
+                '&:hover': { bgcolor: c.bg.secondary },
+                transition: 'background 0.1s, opacity 0.15s',
+                ...(queue.dragIdx === idx ? { opacity: 0.35 } : {}),
+                ...(queue.dropTargetIdx === idx && queue.dragIdx !== null && queue.dragIdx !== idx
+                  ? { borderTop: `2px solid ${c.accent.primary}` }
+                  : {}),
+              }}
+            >
+              <Box
+                sx={{
+                  cursor: queue.editingIdx === idx ? 'default' : 'grab',
+                  display: 'flex',
+                  alignItems: 'center',
+                  mt: 0.3,
+                  color: c.text.ghost,
+                  '&:hover': { color: c.text.tertiary },
+                  '&:active': { cursor: 'grabbing' },
+                }}
+              >
+                <DragIndicatorIcon sx={{ fontSize: 14 }} />
+              </Box>
+              {queue.editingIdx === idx ? (
+                <Box sx={{ flex: 1, display: 'flex', gap: 0.5, alignItems: 'flex-start' }}>
+                  <TextField
+                    multiline
+                    fullWidth
+                    size="small"
+                    value={queue.editingText}
+                    onChange={(e) => queue.setEditingText(e.target.value)}
+                    autoFocus
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        const trimmed = queue.editingText.trim();
+                        if (trimmed) queue.commitEdit(idx, trimmed);
+                        queue.setEditingIdx(null);
+                      }
+                      if (e.key === 'Escape') queue.setEditingIdx(null);
+                    }}
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        fontSize: '0.75rem',
+                        color: c.text.primary,
+                        '& fieldset': { borderColor: c.border.medium },
+                        '&.Mui-focused fieldset': { borderColor: c.accent.primary },
+                      },
+                    }}
+                  />
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      const trimmed = queue.editingText.trim();
+                      if (trimmed) queue.commitEdit(idx, trimmed);
+                      queue.setEditingIdx(null);
+                    }}
+                    sx={{ p: 0.25, color: c.accent.primary, mt: 0.25 }}
+                  >
+                    <CheckIcon sx={{ fontSize: 14 }} />
+                  </IconButton>
+                </Box>
+              ) : (
+                <Typography
+                  sx={{
+                    flex: 1,
+                    fontSize: '0.75rem',
+                    color: c.text.secondary,
+                    lineHeight: 1.5,
+                    overflow: 'hidden',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {msg.prompt}
+                </Typography>
+              )}
+              {queue.editingIdx !== idx && (
+                <Box sx={{ display: 'flex', gap: 0.25, flexShrink: 0, mt: 0.15 }}>
+                  <Tooltip title="Edit">
+                    <IconButton
+                      size="small"
+                      onClick={() => { queue.setEditingIdx(idx); queue.setEditingText(msg.prompt); }}
+                      sx={{ p: 0.25, color: c.text.tertiary, '&:hover': { color: c.text.primary } }}
+                    >
+                      <EditOutlinedIcon sx={{ fontSize: 13 }} />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Remove">
+                    <IconButton
+                      size="small"
+                      onClick={() => queue.remove(idx)}
+                      sx={{ p: 0.25, color: c.text.tertiary, '&:hover': { color: c.status.error } }}
+                    >
+                      <DeleteOutlineIcon sx={{ fontSize: 13 }} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/queue/useMessageQueue.ts b/frontend/src/app/pages/AgentChat/queue/useMessageQueue.ts
new file mode 100644
index 000000000..ec6494eca
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/queue/useMessageQueue.ts
@@ -0,0 +1,91 @@
+import { useCallback, useRef, useState } from 'react';
+
+// A message queued while the agent is busy; drained in order once the turn goes terminal.
+export interface QueuedMessage {
+  prompt: string;
+  images?: Array<{ data: string; media_type: string }>;
+  contextPaths?: Array<{ path: string; type: 'file' | 'directory' }>;
+  forcedTools?: string[];
+  attachedSkills?: Array<{ id: string; name: string; content: string }>;
+  selectedBrowserIds?: string[];
+  selectedAppIds?: string[];
+  attachedRunId?: string;
+  selectedSettingIds?: string[];
+}
+
+// Owns the pending-send queue. The ref is the source of truth (synchronous push/drain from effects and
+// callbacks that must not wait for a render); `length` is the render mirror, re-synced after every ref
+// mutation. UI state (expanded, editing) lives here too since it only makes sense against the queue.
+export interface MessageQueue {
+  ref: React.MutableRefObject<QueuedMessage[]>;
+  length: number;
+  expanded: boolean;
+  editingIdx: number | null;
+  editingText: string;
+  dragIdx: number | null;
+  dropTargetIdx: number | null;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  setEditingIdx: (idx: number | null) => void;
+  setEditingText: React.Dispatch<React.SetStateAction<string>>;
+  setDragIdx: (idx: number | null) => void;
+  setDropTargetIdx: (idx: number | null) => void;
+  enqueue: (msg: QueuedMessage) => void;
+  drainNext: () => QueuedMessage | undefined;
+  remove: (idx: number) => void;
+  reorder: (from: number, to: number) => void;
+  commitEdit: (idx: number, prompt: string) => void;
+  clear: () => void;
+}
+
+export function useMessageQueue(): MessageQueue {
+  const ref = useRef<QueuedMessage[]>([]);
+  const [length, setLength] = useState(0);
+  const [expanded, setExpanded] = useState(false);
+  const [editingIdx, setEditingIdx] = useState<number | null>(null);
+  const [editingText, setEditingText] = useState('');
+  const [dragIdx, setDragIdx] = useState<number | null>(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState<number | null>(null);
+
+  const enqueue = useCallback((msg: QueuedMessage) => {
+    ref.current.push(msg);
+    setLength(ref.current.length);
+  }, []);
+
+  const drainNext = useCallback(() => {
+    const next = ref.current.shift();
+    if (next) setLength(ref.current.length);
+    return next;
+  }, []);
+
+  const remove = useCallback((idx: number) => {
+    ref.current.splice(idx, 1);
+    setLength(ref.current.length);
+    if (ref.current.length === 0) setExpanded(false);
+  }, []);
+
+  const reorder = useCallback((from: number, to: number) => {
+    const q = ref.current;
+    const [item] = q.splice(from, 1);
+    q.splice(to, 0, item);
+    setLength(q.length);
+  }, []);
+
+  const commitEdit = useCallback((idx: number, prompt: string) => {
+    ref.current[idx] = { ...ref.current[idx], prompt };
+    setLength(ref.current.length);
+  }, []);
+
+  const clear = useCallback(() => {
+    ref.current = [];
+    setLength(0);
+    setExpanded(false);
+    setEditingIdx(null);
+    setEditingText('');
+  }, []);
+
+  return {
+    ref, length, expanded, editingIdx, editingText, dragIdx, dropTargetIdx,
+    setExpanded, setEditingIdx, setEditingText, setDragIdx, setDropTargetIdx,
+    enqueue, drainNext, remove, reorder, commitEdit, clear,
+  };
+}
diff --git a/frontend/src/app/pages/AgentChat/render/AgentChatHeader.tsx b/frontend/src/app/pages/AgentChat/render/AgentChatHeader.tsx
new file mode 100644
index 000000000..2c0f3df36
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/render/AgentChatHeader.tsx
@@ -0,0 +1,145 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import CloseIcon from '@mui/icons-material/Close';
+import { Typewriter } from '@/app/components/feedback/Animated';
+import { friendlyStatusLabel } from '@/shared/statusLabel';
+import { displayChatTitle, isLegacyAutoName } from '@/shared/state/sessionDisplay';
+import type { AgentSession } from '@/shared/state/agentsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+interface AgentChatHeaderProps {
+  session: AgentSession;
+  isDraft: boolean;
+  id: string | undefined;
+  connectionMode: string | undefined;
+  c: ReturnType<typeof useClaudeTokens>;
+  resolveModelLabel: (value: string | null | undefined) => string;
+  onClose?: () => void;
+  onResetHistory: () => void;
+}
+
+// Chat header band: title (+ live status) over model/branch/cost/tool meta, with reset-history + close.
+// Presentational — the reset handler is passed in so this stays free of session-mutation logic.
+export function AgentChatHeader({
+  session, isDraft, id, connectionMode, c, resolveModelLabel, onClose, onResetHistory,
+}: AgentChatHeaderProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1.5,
+        px: 2,
+        py: 1.5,
+        // No seam: the header is just a band of typography inside the chat panel; transparent bg + air carry it, no hairline. (An earlier bg.surface here read lighter than the body and pulled focus.)
+        bgcolor: 'transparent',
+      }}
+    >
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typewriter
+            value={displayChatTitle(session)}
+            enabled={!!session.name && !isLegacyAutoName(session.name)}
+          >
+            {(t) => <Typography noWrap sx={{ color: c.text.primary, fontWeight: 600 }}>{t}</Typography>}
+          </Typewriter>
+          {/* statusStyle was a vacuous guard here (its lookup always fell back to a truthy default and
+              the colors were never read), so the prop was dropped in the follow-up split. */}
+          {!isDraft && session.status !== 'completed' && session.status !== 'stopped' && (
+            // Status speaks only when it needs the user; finished work sits quiet.
+            <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
+              <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.text.tertiary, whiteSpace: 'nowrap' }}>
+                {friendlyStatusLabel(session.status)}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+        {(!isDraft || session.is_welcome_draft) && (
+          // Welcome draft shows just the model so the header isn't bare; real runs add branch + cost.
+          <Box sx={{ display: 'flex', gap: 1.5, mt: 0.25, alignItems: 'center' }}>
+            <Typography variant="caption" sx={{ color: c.text.tertiary }}>
+              {resolveModelLabel(session.model)}
+            </Typography>
+            {!isDraft && session.branch_name && (
+              <Typography variant="caption" sx={{ color: c.text.tertiary }}>
+                {session.branch_name}
+              </Typography>
+            )}
+            {(() => {
+              if (!(session.cost_usd > 0)) return null;
+              // The SDK reports a per-call $ figure regardless of how the request was routed. For requests that went through a subscription path, that figure is misleading, the user pays flat-rate. Show "subscription" instead in those cases. Show $ only when the call was actually metered (Anthropic API key, OpenAI API key, etc.). Model-id signals (these are short_name values from the BUILTIN_MODELS registry): - `*-api` → pinned Anthropic API key (METERED) - `*-cc` → pinned Claude Pro/Max via 9Router (sub) - plain sonnet/opus/haiku + openswarm-pro mode → Pro proxy (sub) - plain sonnet/opus/haiku + own_key mode → API key (METERED) - gpt-5.4* / gpt-5.3* → ChatGPT Plus/Pro via 9Router (sub) - gemini-*  → Gemini Advanced via 9Router (sub)
+              const m = (session.model || '').toLowerCase();
+              const isApiRoute = m.endsWith('-api');
+              if (isApiRoute) {
+                return (
+                  <Typography variant="caption" sx={{ color: c.accent.primary }}>
+                    ${session.cost_usd.toFixed(4)}
+                  </Typography>
+                );
+              }
+              const isCcRoute = m.endsWith('-cc');
+              const isPlainAnthropic = m === 'sonnet' || m === 'opus' || m === 'haiku';
+              const isProRoute = isPlainAnthropic && connectionMode === 'openswarm-pro';
+              const isOwnKeyAnthropic = isPlainAnthropic && connectionMode !== 'openswarm-pro';
+              const isOpenAISub = m.startsWith('gpt-5') || m.startsWith('gpt-4') || m.startsWith('o1') || m.startsWith('o3') || m.startsWith('o4');
+              const isGeminiSub = m.startsWith('gemini-');
+              const isSubscriptionRouted = isCcRoute || isProRoute || isOpenAISub || isGeminiSub;
+              if (isSubscriptionRouted) {
+                return (
+                  <Typography
+                    variant="caption"
+                    sx={{ color: c.text.tertiary }}
+                    title="Routed through subscription, flat-rate, per-call cost not metered"
+                  >
+                    subscription
+                  </Typography>
+                );
+              }
+              // own-key Anthropic OR anything else → real $ figure.
+              void isOwnKeyAnthropic;
+              return (
+                <Typography variant="caption" sx={{ color: c.accent.primary }}>
+                  ${session.cost_usd.toFixed(4)}
+                </Typography>
+              );
+            })()}
+            {(() => {
+              const mcpCount = session.active_mcps?.length ?? 0;
+              if (mcpCount === 0) return null;
+              return (
+                <Typography
+                  variant="caption"
+                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontVariantNumeric: 'tabular-nums' }}
+                  title={`${mcpCount} tool${mcpCount === 1 ? '' : 's'} connected.`}
+                >
+                  <Box component="span" sx={{ color: c.text.tertiary }}>
+                    {mcpCount} tool{mcpCount === 1 ? '' : 's'}
+                  </Box>
+                </Typography>
+              );
+            })()}
+          </Box>
+        )}
+      </Box>
+      {!isDraft && id && (
+        <Tooltip title="Reset history">
+          <IconButton
+            size="small"
+            onClick={onResetHistory}
+            sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}
+          >
+            <RestartAltIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      )}
+      {onClose && (
+        <IconButton onClick={onClose} size="small" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      )}
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/render/McpConnectOffer.tsx b/frontend/src/app/pages/AgentChat/render/McpConnectOffer.tsx
new file mode 100644
index 000000000..8378b5bdf
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/render/McpConnectOffer.tsx
@@ -0,0 +1,63 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { McpSuggestion } from '../model/useMcpActivation';
+
+// In-transcript "Connect <tool> so the agent can do this" offer for preflight MCP suggestions.
+// Presentational — activation state + handler come from useMcpActivation via props. Suggest-only:
+// activation is the user's click through the gated MCPActivate endpoint.
+export function McpConnectOffer({
+  suggestions, activatingId, error, onActivate, onDismiss, c,
+}: {
+  suggestions: McpSuggestion[];
+  activatingId: string | null;
+  error: string | null;
+  onActivate: (s: McpSuggestion) => void;
+  onDismiss: () => void;
+  c: ReturnType<typeof useClaudeTokens>;
+}) {
+  return (
+    <Box sx={{ mt: 1, mb: 1, px: 0.5, display: 'flex', flexDirection: 'column', gap: 0.5, overflowAnchor: 'none' }}>
+      {suggestions.map((s) => (
+        <Box key={s.id} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography variant="caption" sx={{ color: c.text.secondary, flex: 1, minWidth: 0 }}>
+            Connect{' '}
+            <Box component="span" sx={{ color: c.text.primary, fontWeight: 500 }}>{s.title}</Box>
+            {' '}so the agent can do this
+          </Typography>
+          <Typography
+            component="button"
+            variant="caption"
+            disabled={activatingId === s.id}
+            onClick={() => onActivate(s)}
+            sx={{
+              border: 'none',
+              background: 'none',
+              p: 0,
+              color: c.accent.primary,
+              cursor: activatingId === s.id ? 'wait' : 'pointer',
+              opacity: activatingId === s.id ? 0.5 : 1,
+              '&:hover': { textDecoration: activatingId ? 'none' : 'underline' },
+              flexShrink: 0,
+            }}
+          >
+            {activatingId === s.id ? 'Connecting…' : 'Connect'}
+          </Typography>
+        </Box>
+      ))}
+      {error && (
+        <Typography variant="caption" sx={{ display: 'block', color: c.status.error }}>
+          {error}
+        </Typography>
+      )}
+      <Box
+        role="button"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+        sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.75rem', '&:hover': { color: c.text.secondary } }}
+      >
+        Dismiss
+      </Box>
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/render/ResumeAgentButton.tsx b/frontend/src/app/pages/AgentChat/render/ResumeAgentButton.tsx
new file mode 100644
index 000000000..8c3f756d3
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/render/ResumeAgentButton.tsx
@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// "Resume Agent Response" pill shown after a stopped turn. Presentational; the caller owns when it shows.
+export function ResumeAgentButton({ onResume, c }: { onResume: () => void; c: ReturnType<typeof useClaudeTokens> }) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
+      <Box
+        onClick={onResume}
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.5,
+          px: 1.5,
+          py: 0.75,
+          borderRadius: '12px',
+          cursor: 'pointer',
+          bgcolor: `${c.accent.primary}10`,
+          border: `1px solid ${c.accent.primary}30`,
+          transition: 'all 0.15s',
+          '&:hover': {
+            bgcolor: `${c.accent.primary}1a`,
+            border: `1px solid ${c.accent.primary}50`,
+          },
+        }}
+      >
+        <PlayArrowIcon sx={{ fontSize: 14, color: c.accent.primary }} />
+        <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.accent.primary }}>
+          Resume Agent Response
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/scroll/MessageListBody.tsx b/frontend/src/app/pages/AgentChat/scroll/MessageListBody.tsx
new file mode 100644
index 000000000..e017d8430
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/MessageListBody.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { RenderItem } from '../tool-bubbles/ToolGroupBubble';
+import type { MessageScrollApi } from './useMessageScroll';
+import { ScrollToBottomButton } from './ScrollToBottomButton';
+
+// Full size view reads like a chat page, not a card: the transcript + composer center in one
+// column at a comfortable measure (assistant-ui parks at 44rem, LibreChat 48rem; 760 splits them).
+export const FULLSCREEN_READING_MAX_W = 760;
+
+// The transcript's scroll surface (AGENTCHAT_SPLIT_PLAN step 6: MessageListBody + spacers move with the
+// scroll mechanism). Owns the scroll container, the top/bottom spacers that stand in for unmounted
+// items, the data-window-item-id wrapper each mounted item is measured through, the lastVisibleItemRef
+// used by the initial bottom pin, and the scroll-to-bottom button. Domain content stays with the
+// caller: `renderItem` renders a transcript item's inner content, `renderItemTrailer` renders an
+// optional sibling AFTER the measured wrapper (the docked-browser slot), `header`/`footer` are slots
+// for the non-windowed content above/below the item window (overflow card / streaming bubble cluster).
+export function MessageListBody({
+  scroll,
+  c,
+  fullscreenChat,
+  isWelcomeDraft,
+  header,
+  footer,
+  renderItem,
+  renderItemTrailer,
+}: {
+  scroll: MessageScrollApi;
+  c: ReturnType<typeof useClaudeTokens>;
+  fullscreenChat?: boolean;
+  isWelcomeDraft?: boolean;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  renderItem: (item: RenderItem, ctx: { isLastVisibleItem: boolean }) => React.ReactNode;
+  renderItemTrailer?: (item: RenderItem) => React.ReactNode;
+}) {
+  return (
+    <Box sx={{ flex: 1, minHeight: 0, position: 'relative' }}>
+      <Box
+        ref={scroll.scrollContainerRef}
+        onScroll={scroll.onScroll}
+        // Right-clicking transcript CONTENT gets the OS text menu (copy, spellcheck), never the card menu with Delete chat in it.
+        data-chat-transcript
+        sx={{
+          height: '100%',
+          overflow: 'auto',
+          scrollbarGutter: 'stable',
+          // Top-aligned natural flow: messages start at the top and grow down (standard chat). The earlier flex-column + mt:auto bottom-anchor clustered short chats at the bottom under a big void, reading broken.
+          px: 2,
+          py: 1,
+          // Fullscreen: the scroller breaks OUT of the reading column so its scrollbar rides the window edge; matching padding keeps the content at the 760px measure.
+          ...(fullscreenChat && {
+            mr: `min(0px, calc((${FULLSCREEN_READING_MAX_W}px - 100vw) / 2))`,
+            pr: `max(16px, calc((100vw - ${FULLSCREEN_READING_MAX_W}px) / 2))`,
+          }),
+          // Smoothness bundle (perf-only, no behavior change): 1. overflow-anchor: auto, Chromium's native scroll anchoring keeps the viewport pinned to the user's visible content as siblings above/below resize. Eliminates the "transcript snaps back" feel during streaming and parallel tool fan-outs. Runs on the compositor thread, free. 2. contain: layout, tells the browser layout shifts inside this scroll container don't affect siblings outside it. Prevents reflow from cascading up to the dashboard layout when bubbles grow. 3. overscroll-behavior: contain, keeps over-scroll gestures from leaking up to the dashboard pan/zoom when the user hits the chat top/bottom.
+          overflowAnchor: 'auto',
+          contain: 'layout',
+          overscrollBehavior: 'contain',
+          // Hidden until the user is in the chat: the thumb is transparent at rest and fades in on hover, so a resizing thumb never draws the eye.
+          '&::-webkit-scrollbar': { width: 6 },
+          '&::-webkit-scrollbar-track': { background: 'transparent' },
+          '&::-webkit-scrollbar-thumb': {
+            background: 'transparent',
+            borderRadius: 3,
+            minHeight: 48,
+            transition: 'background 0.2s',
+          },
+          '&:hover::-webkit-scrollbar-thumb': { background: c.border.medium },
+          '&:hover::-webkit-scrollbar-thumb:hover': { background: c.border.strong },
+          scrollbarWidth: 'thin',
+          scrollbarColor: 'transparent transparent',
+          '&:hover': { scrollbarColor: `${c.border.medium} transparent` },
+        }}
+      >
+        {/* The welcome greeting is the FIRST thing and it's the agent talking, no user message above it, so give it real air under the header instead of sitting flush at the top. */}
+        {/* Non-welcome chats still need headroom: at pt 0 the first user bubble's top edge clipped under the header. */}
+        {/* Fullscreen carries the window title bar OVER the transcript, so the first message (and any attachment chips above it) needs to start below that chrome, not under it. */}
+        <Box sx={{ pt: fullscreenChat ? 7 : isWelcomeDraft ? 4 : 2 }}>
+          {header}
+          {/* Stand-in for items unmounted ABOVE the window. Its measured
+              height keeps the scrollbar geometry and scroll position stable
+              while overflow-anchor pins the visible content. */}
+          {scroll.topSpacerHeight > 0 && (
+            <Box aria-hidden data-window-spacer="top" sx={{ height: scroll.topSpacerHeight, flexShrink: 0, overflowAnchor: 'none' }} />
+          )}
+          {scroll.renderedVisibleItems.map((item, itemIdx) => {
+            const isLastVisibleItem = itemIdx === scroll.renderedVisibleItems.length - 1;
+            const rendered = (
+              <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? scroll.lastVisibleItemRef : undefined}>
+                {renderItem(item, { isLastVisibleItem })}
+              </Box>
+            );
+            const trailer = renderItemTrailer?.(item);
+            if (!trailer) return rendered;
+            // The trailer rides OUTSIDE the measured wrapper (it is not transcript content), as a keyed sibling.
+            return (
+              <React.Fragment key={`${item.id}-with-trailer`}>
+                {rendered}
+                {trailer}
+              </React.Fragment>
+            );
+          })}
+          {/* Stand-in for items unmounted BELOW the window (newer items not yet
+              scrolled into view). Zero while following the live tail. */}
+          {scroll.bottomSpacerHeight > 0 && (
+            <Box aria-hidden data-window-spacer="bottom" sx={{ height: scroll.bottomSpacerHeight, flexShrink: 0, overflowAnchor: 'none' }} />
+          )}
+          {footer}
+        </Box>
+      </Box>
+      <ScrollToBottomButton visible={scroll.showScrollButton} onScrollToBottom={scroll.scrollToBottom} c={c} />
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/scroll/ScrollToBottomButton.tsx b/frontend/src/app/pages/AgentChat/scroll/ScrollToBottomButton.tsx
new file mode 100644
index 000000000..f78dabeaa
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/ScrollToBottomButton.tsx
@@ -0,0 +1,35 @@
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// The floating "scroll to bottom" affordance. Presentational: visibility + click come from the scroll
+// cluster in AgentChat (step 6 owns when it shows / what it scrolls); this is only the button.
+export function ScrollToBottomButton({
+  visible, onScrollToBottom, c,
+}: { visible: boolean; onScrollToBottom: () => void; c: ReturnType<typeof useClaudeTokens> }) {
+  if (!visible) return null;
+  return (
+    <Tooltip title="Scroll to bottom">
+      <IconButton
+        onClick={onScrollToBottom}
+        sx={{
+          position: 'absolute',
+          bottom: 12,
+          left: '50%',
+          transform: 'translateX(-50%)',
+          bgcolor: c.bg.surface,
+          border: `1px solid ${c.border.medium}`,
+          color: c.accent.primary,
+          width: 36,
+          height: 36,
+          '&:hover': { bgcolor: c.bg.secondary },
+          boxShadow: c.shadow.md,
+          zIndex: 1,
+        }}
+      >
+        <KeyboardArrowDownIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/scroll/pinningCore.ts b/frontend/src/app/pages/AgentChat/scroll/pinningCore.ts
new file mode 100644
index 000000000..954aa25b1
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/pinningCore.ts
@@ -0,0 +1,166 @@
+import type React from 'react';
+import { getScrollFocusedCard } from '@/shared/cardScrollFocus';
+import { RECHECK_VISIBILITY_EVENT } from '../bubbles/markdownMeasure';
+
+// Private rAF pin/stick internals behind useMessageScroll (the single public scroll API). Each routine
+// takes the hook's refs through a typed controller object instead of owning any React state itself, so
+// the hook file keeps every declaration (and the effect firing order) while the multi-frame pin loops
+// live here. None of this runs meaningfully in jsdom (zero-height layout, no ResizeObserver) — behavior
+// is verified in the packaged app.
+
+type RafRef = React.MutableRefObject<number | null>;
+
+export interface PinCtl {
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  isAtBottomRef: React.MutableRefObject<boolean>;
+  lastScrollHeightRef: React.MutableRefObject<number>;
+}
+
+// Prevent scroll from leaking into the dashboard canvas when at boundaries.
+export function attachWheelBoundaryGuard(el: HTMLElement): () => void {
+  const onWheel = (e: WheelEvent) => {
+    // Pinch-to-zoom (ctrl/meta + wheel) must reach the canvas viewport so the dashboard zooms when the cursor is over an agent's chat panel. Without this early-out the unconditional stopPropagation below kills ctrl+wheel and the canvas listener never fires.
+    if (e.ctrlKey || e.metaKey) return;
+    // Horizontal-dominant gestures must also reach the canvas so a sideways swipe pans the dashboard (chat has no horizontal scroll to absorb).
+    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+    // Google Maps model: a plain wheel over a chat you haven't clicked INTO belongs to the canvas, so let it through instead of swallowing it here (this is what made zoom look dead over any chat).
+    const cardId = el.closest('[data-select-id]')?.getAttribute('data-select-id') ?? null;
+    if (cardId && cardId !== getScrollFocusedCard()) return;
+    const atTop = el.scrollTop <= 0;
+    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    const scrollingDown = e.deltaY > 0;
+    const scrollingUp = e.deltaY < 0;
+    if ((scrollingUp && atTop) || (scrollingDown && atBottom)) {
+      e.preventDefault();
+    }
+    e.stopPropagation();
+  };
+  el.addEventListener('wheel', onWheel, { passive: false });
+  return () => el.removeEventListener('wheel', onWheel);
+}
+
+// While a stream is LIVE, pin every frame: smooth-text grows between onStreamGrew callbacks, and the
+// callback's own rAF deferral let the bottom drift up to ~100px for several frames. Parks the moment the
+// stream ends (the calling effect's cleanup), so idle cost is zero.
+export function runLiveStreamPin(ctl: PinCtl): () => void {
+  let raf = 0;
+  const pin = () => {
+    const el = ctl.scrollContainerRef.current;
+    if (el && ctl.isAtBottomRef.current && el.scrollHeight !== ctl.lastScrollHeightRef.current) {
+      ctl.lastScrollHeightRef.current = el.scrollHeight;
+      el.scrollTop = el.scrollHeight;
+    }
+    raf = requestAnimationFrame(pin);
+  };
+  raf = requestAnimationFrame(pin);
+  return () => cancelAnimationFrame(raf);
+}
+
+// Multi-frame jam-to-bottom for the scroll-to-bottom jump. A single scrollTop=scrollHeight lands short
+// because the bottom spacer collapses and the freshly-mounted items replace their estimates with real
+// measured heights, changing scrollHeight while the jump settles.
+export function runBottomJumpPin(ctl: PinCtl, rafRef: RafRef): void {
+  if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+  let frame = 0;
+  const FRAMES = 16; // ~260ms, enough for the window + oversized blocks to settle
+  const pin = () => {
+    const c = ctl.scrollContainerRef.current;
+    if (!c) { rafRef.current = null; return; }
+    c.scrollTop = c.scrollHeight;
+    ctl.lastScrollHeightRef.current = c.scrollHeight;
+    ctl.isAtBottomRef.current = true;
+    if (++frame < FRAMES) {
+      rafRef.current = requestAnimationFrame(pin);
+    } else {
+      rafRef.current = null;
+      // Jump has settled: re-evaluate oversized message / block visibility synchronously so nothing now in view is stuck as a placeholder.
+      c.dispatchEvent(new CustomEvent(RECHECK_VISIBILITY_EVENT));
+    }
+  };
+  pin();
+}
+
+// Stream-end re-stick pin window (see the calling effect in useMessageScroll for the full rationale):
+// pin to bottom across a short multi-frame window that OVERRIDES the completion-commit's layout-induced
+// isAtBottom flip; a genuine user scroll-away gesture during the window aborts the pin. Returns the
+// cleanup for the calling effect.
+export function runStreamEndRepin(
+  el: HTMLElement,
+  ctl: PinCtl,
+  pinRafRef: RafRef,
+  pinAbortRef: React.MutableRefObject<boolean>,
+): () => void {
+  // Abort the pin only on a deliberate scroll-away gesture, not the layout-induced onScroll the commit itself triggers.
+  const onUserScrollAway = (e: Event) => {
+    if ((e as WheelEvent).deltaY != null && (e as WheelEvent).deltaY < 0) pinAbortRef.current = true; // wheel up
+    else if (e.type === 'touchmove') pinAbortRef.current = true;
+  };
+  el.addEventListener('wheel', onUserScrollAway, { passive: true });
+  el.addEventListener('touchmove', onUserScrollAway, { passive: true });
+  let frame = 0;
+  const FRAMES = 18; // ~300ms at 60fps, long enough for async highlight/layout
+  const pin = () => {
+    if (pinAbortRef.current) { cleanup(); return; }
+    const c = ctl.scrollContainerRef.current;
+    if (c) { c.scrollTop = c.scrollHeight; ctl.lastScrollHeightRef.current = c.scrollHeight; ctl.isAtBottomRef.current = true; }
+    if (++frame < FRAMES) { pinRafRef.current = requestAnimationFrame(pin); }
+    else cleanup();
+  };
+  const cleanup = () => {
+    el.removeEventListener('wheel', onUserScrollAway);
+    el.removeEventListener('touchmove', onUserScrollAway);
+    if (pinRafRef.current != null) { cancelAnimationFrame(pinRafRef.current); pinRafRef.current = null; }
+  };
+  pinRafRef.current = requestAnimationFrame(pin);
+  return cleanup;
+}
+
+export interface InitialPinCtl extends PinCtl {
+  lastVisibleItemRef: React.RefObject<HTMLDivElement>;
+  initialPinRafRef: RafRef;
+  initialBottomScrollSettledRef: React.MutableRefObject<boolean>;
+}
+
+// Initial open-at-bottom pin: scrollIntoView the last mounted item across a few frames while the seed
+// slice measures in, then flag settled and hand off to the pixel solver via onSettled.
+export function runInitialBottomPin(
+  ctl: InitialPinCtl,
+  hideScrollButton: () => void,
+  onSettled: () => void,
+): void {
+  let frame = 0;
+  const FRAMES = 8;
+  const pin = () => {
+    const c = ctl.scrollContainerRef.current;
+    if (!c) return;
+    ctl.lastVisibleItemRef.current?.scrollIntoView({ block: 'end' });
+    c.scrollTop = Math.max(0, Math.min(c.scrollTop, c.scrollHeight - c.clientHeight));
+    ctl.lastScrollHeightRef.current = c.scrollHeight;
+    ctl.isAtBottomRef.current = true;
+    hideScrollButton();
+    if (++frame < FRAMES) {
+      ctl.initialPinRafRef.current = requestAnimationFrame(pin);
+    } else {
+      ctl.initialPinRafRef.current = null;
+      ctl.initialBottomScrollSettledRef.current = true;
+      onSettled();
+      // Re-evaluate visibility now the open jump has settled, so an oversized newest message isn't left stuck as a placeholder.
+      c.dispatchEvent(new CustomEvent(RECHECK_VISIBILITY_EVENT));
+    }
+  };
+  if (ctl.initialPinRafRef.current != null) {
+    cancelAnimationFrame(ctl.initialPinRafRef.current);
+    ctl.initialPinRafRef.current = null;
+  }
+  pin();
+}
+
+// Unmount cleanup: cancel any in-flight rAF loops.
+export function cancelRafRefs(refs: RafRef[]): void {
+  for (const r of refs) {
+    if (r.current != null) {
+      cancelAnimationFrame(r.current);
+      r.current = null;
+    }
+  }
+}
diff --git a/frontend/src/app/pages/AgentChat/scroll/useMessageScroll.ts b/frontend/src/app/pages/AgentChat/scroll/useMessageScroll.ts
new file mode 100644
index 000000000..a5480de00
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/useMessageScroll.ts
@@ -0,0 +1,291 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { WINDOW_MIN_ITEMS, initialSeedItems } from '../windowing/messageWindow';
+import type { RenderItem } from '../tool-bubbles/ToolGroupBubble';
+import { measureMountedHeights, nextWindowForItems, reservedHeightFor, solveWindowFromScroll, sumReservedHeights } from './windowingCore';
+import { attachWheelBoundaryGuard, cancelRafRefs, runBottomJumpPin, runInitialBottomPin, runLiveStreamPin, runStreamEndRepin } from './pinningCore';
+
+const SCROLL_THRESHOLD = 50;
+
+export interface MessageScrollInputs {
+  renderItems: RenderItem[];
+  streamingMessageId: string | null;
+  sessionId: string | undefined;
+  activeBranchId: string | undefined;
+  messagesLength: number | undefined;
+  id: string | undefined;
+}
+
+export type MessageScrollApi = ReturnType<typeof useMessageScroll>;
+
+// The transcript's virtualization + scroll-pinning subsystem, lifted out of AgentChat verbatim. Owns the
+// mounted window (which render items are live), the measured-height spacers that keep scroll geometry
+// stable, and every rAF pin path (open, per-delta stick, stream-end re-pin, scroll-to-bottom). This is
+// the single public scroll API; the solver math and pin loops live in windowingCore/pinningCore, while
+// every hook declaration — and with it the EFFECT FIRING ORDER — stays in this file, in original source
+// order. None of this is meaningfully testable in jsdom (scrollTop/scrollHeight/getBoundingClientRect
+// are 0) — it is verified in the real app. The component owns `renderItems` (domain) and the per-item
+// render; this owns the scroll mechanism and returns the visible slice + spacer heights + refs/handlers
+// the render consumes.
+export function useMessageScroll({
+  renderItems, streamingMessageId, sessionId, activeBranchId, messagesLength, id,
+}: MessageScrollInputs) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const lastVisibleItemRef = useRef<HTMLDivElement>(null);
+  const isAtBottomRef = useRef(true);
+  const pendingInitialBottomScrollRef = useRef(false);
+  const initialBottomScrollSettledRef = useRef(false);
+  const renderItemsLengthRef = useRef(0);
+  const renderItemsRef = useRef<RenderItem[]>([]);
+  const itemHeightsRef = useRef<Map<string, number>>(new Map());
+  const estimateCacheRef = useRef<Map<string, number>>(new Map());
+  const viewportWidthRef = useRef(0);
+  const windowStartRef = useRef(0);
+  const windowEndRef = useRef(0);
+  const windowScrollRafRef = useRef<number | null>(null);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [scrollRoot, setScrollRoot] = useState<HTMLDivElement | null>(null);
+  const [windowStart, setWindowStart] = useState(0);
+  const [windowEnd, setWindowEnd] = useState(0);
+  const [heightVersion, setHeightVersion] = useState(0);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  const reservedHeightForItem = useCallback((item: RenderItem | undefined): number =>
+    reservedHeightFor(item, itemHeightsRef.current, estimateCacheRef.current, viewportWidthRef.current), []);
+
+  // Measured-or-estimated pixel height of render item at `index`, for the window solver (reads the renderItems ref so it is valid inside rAF callbacks).
+  const heightOf = useCallback((index: number): number => {
+    return reservedHeightForItem(renderItemsRef.current[index]);
+  }, [reservedHeightForItem]);
+
+  // Solve the mounted window from the live scroll position and push it to state when it changes.
+  const applyWindowFromScroll = useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    if (!initialBottomScrollSettledRef.current) return;
+    const total = renderItemsLengthRef.current;
+    // Below the windowing threshold the whole transcript is mounted; recomputing a window here would only churn the spacers and shift scroll. Leave it alone.
+    if (total < WINDOW_MIN_ITEMS) return;
+    const next = solveWindowFromScroll(el, total, windowStartRef.current, windowEndRef.current, isAtBottomRef.current, heightOf);
+    if (!next) return;
+    windowStartRef.current = next.start;
+    windowEndRef.current = next.end;
+    setWindowStart(next.start);
+    setWindowEnd(next.end);
+  }, [heightOf]);
+
+  const scheduleWindowRecompute = useCallback(() => {
+    if (windowScrollRafRef.current != null) return;
+    windowScrollRafRef.current = requestAnimationFrame(() => {
+      windowScrollRafRef.current = null;
+      applyWindowFromScroll();
+    });
+  }, [applyWindowFromScroll]);
+
+  useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    setScrollRoot(el);
+
+    const updateViewport = () => {
+      setViewportHeight(el.clientHeight);
+      setViewportWidth(el.clientWidth);
+      // Width drives the char-per-line estimate; drop cached estimates so they recompute at the new width (measured heights are unaffected and kept).
+      estimateCacheRef.current.clear();
+      // Resize changes the budgets and how many items fit; re-solve the window off the current scroll position WITHOUT resetting it (only session / branch changes reset). overflow-anchor holds the visible content.
+      scheduleWindowRecompute();
+    };
+
+    updateViewport();
+    const observer = new ResizeObserver(updateViewport);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      if (windowScrollRafRef.current != null) {
+        cancelAnimationFrame(windowScrollRafRef.current);
+        windowScrollRafRef.current = null;
+      }
+      setScrollRoot(null);
+    };
+  }, [id, sessionId, scheduleWindowRecompute]);
+
+  React.useLayoutEffect(() => {
+    const seed = initialSeedItems(viewportHeight);
+    const total = renderItemsLengthRef.current;
+    const end = total;
+    const start = Math.max(0, end - seed);
+    windowStartRef.current = start;
+    windowEndRef.current = end;
+    setWindowStart(start);
+    setWindowEnd(end);
+    itemHeightsRef.current.clear();
+    estimateCacheRef.current.clear();
+    if (initialPinRafRef.current != null) {
+      cancelAnimationFrame(initialPinRafRef.current);
+      initialPinRafRef.current = null;
+    }
+    pendingInitialBottomScrollRef.current = true;
+    initialBottomScrollSettledRef.current = false;
+    isAtBottomRef.current = true;
+    setShowScrollButton(false);
+  }, [id, activeBranchId]);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    // Measure against the real content bottom, not the locked-height pad below it.
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < SCROLL_THRESHOLD;
+    isAtBottomRef.current = atBottom;
+    setShowScrollButton(!atBottom);
+    // Slide the mounted window to follow the viewport (loads newer/older items and unloads ones that drifted past the buffer on either side).
+    scheduleWindowRecompute();
+  }, [scheduleWindowRecompute]);
+
+  // Prevent scroll from leaking into the dashboard canvas when at boundaries.
+  useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    return attachWheelBoundaryGuard(el);
+  }, []);
+
+  const scrollToBottomRafRef = useRef<number | null>(null);
+  const scrollToBottom = useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    isAtBottomRef.current = true;
+    setShowScrollButton(false);
+    // When scrolled far up the newest items are unmounted behind the bottom spacer (estimated height). Jump the window to the bottom slice so they actually mount, then pin across several frames (runBottomJumpPin).
+    const total = renderItemsLengthRef.current;
+    const start = Math.max(0, total - initialSeedItems(el.clientHeight));
+    windowStartRef.current = start;
+    windowEndRef.current = total;
+    setWindowStart(start);
+    setWindowEnd(total);
+    runBottomJumpPin({ scrollContainerRef, isAtBottomRef, lastScrollHeightRef }, scrollToBottomRafRef);
+  }, []);
+
+  const scrollRafRef = useRef<number | null>(null);
+  const pinRafRef = useRef<number | null>(null);
+  const initialPinRafRef = useRef<number | null>(null);
+  const lastScrollHeightRef = useRef<number>(0);
+  // Shared scroll-stick routine. Used both by the structural-events useEffect below (new message lands / stream starts/ends) and by StreamingBubble's onStreamGrew callback (per-delta growth). RAF + height-grew gate ensures we only set scrollTop when needed.
+  const stickToBottomIfNeeded = useCallback(() => {
+    if (!isAtBottomRef.current) return;
+    if (scrollRafRef.current != null) return;
+    scrollRafRef.current = requestAnimationFrame(() => {
+      scrollRafRef.current = null;
+      if (!isAtBottomRef.current) return;
+      const el = scrollContainerRef.current;
+      if (!el) return;
+      const newHeight = el.scrollHeight;
+      if (newHeight === lastScrollHeightRef.current) return;
+      lastScrollHeightRef.current = newHeight;
+      el.scrollTop = newHeight;
+    });
+  }, []);
+  useEffect(() => {
+    stickToBottomIfNeeded();
+    // Structural triggers only: a new message lands or a stream starts/ends. Streaming content updates trigger this via <StreamingBubble onStreamGrew={stickToBottomIfNeeded} /> instead so AgentChat stays dormant during the 30Hz delta storm.
+  }, [messagesLength, streamingMessageId, stickToBottomIfNeeded]);
+
+  // Live-stream per-frame pin (runLiveStreamPin): the per-delta stick above defers by one rAF and let the bottom drift; this holds it every frame and parks the moment the stream ends.
+  useEffect(() => {
+    if (!streamingMessageId) return undefined;
+    return runLiveStreamPin({ scrollContainerRef, isAtBottomRef, lastScrollHeightRef });
+  }, [streamingMessageId]);
+
+  // Stream-end re-stick. When a stream finishes, the live bubble (smooth-revealed text) is replaced by the committed bubble rendering FULL markdown with contentVisibility placeholders; as those resolve, Chromium's overflow-anchor re-anchors to an EARLIER element (the user message), yanking the view up to "the top of the user input". A single deferred scroll loses the race because that anchor shift fires an onScroll that flips isAtBottomRef false before we run. Fix: snapshot the "was following" intent the moment streaming stops (captured continuously during the stream, before any completion re-render), then pin to bottom across a short multi-frame window that OVERRIDES the layout-induced flip. A genuine user scroll-away (wheel/touch) during that window aborts the pin, honoring "unless the user scrolls up".
+  const prevStreamingIdRef = useRef<string | null>(null);
+  const wasFollowingRef = useRef(true);
+  const pinAbortRef = useRef(false);
+  // Keep the follow-intent fresh while streaming so it's accurate at the instant the stream ends (handleScroll updates isAtBottomRef on every real scroll).
+  if (streamingMessageId) wasFollowingRef.current = isAtBottomRef.current;
+  useEffect(() => {
+    const prev = prevStreamingIdRef.current;
+    prevStreamingIdRef.current = streamingMessageId;
+    if (!(prev && !streamingMessageId)) return;
+    if (!wasFollowingRef.current) return; // user had scrolled up; leave them be
+    pinAbortRef.current = false;
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    return runStreamEndRepin(el, { scrollContainerRef, isAtBottomRef, lastScrollHeightRef }, pinRafRef, pinAbortRef);
+  }, [streamingMessageId]);
+
+  useEffect(() => () =>
+    cancelRafRefs([scrollRafRef, pinRafRef, initialPinRafRef, scrollToBottomRafRef]), []);
+
+  React.useLayoutEffect(() => {
+    const total = renderItems.length;
+    renderItemsLengthRef.current = total;
+    renderItemsRef.current = renderItems;
+    const next = nextWindowForItems(total, viewportHeight, windowStartRef.current, windowEndRef.current, isAtBottomRef.current);
+    if (next.start !== windowStartRef.current) { windowStartRef.current = next.start; setWindowStart(next.start); }
+    if (next.end !== windowEndRef.current) { windowEndRef.current = next.end; setWindowEnd(next.end); }
+  }, [id, renderItems, viewportHeight]);
+
+  const total = renderItems.length;
+  // Small chats render whole (no windowing): forces the full slice so both spacer loops sum to 0, which removes the recompute-driven scroll jump entirely.
+  const windowingActive = total >= WINDOW_MIN_ITEMS;
+  const safeWindowEnd = !windowingActive ? total : (windowEnd > 0 ? Math.min(windowEnd, total) : total);
+  const safeWindowStart = !windowingActive ? 0 : Math.min(Math.max(0, windowStart), Math.max(0, safeWindowEnd - 1));
+  const visibleStartIndex = safeWindowStart;
+  const visibleRenderItems = useMemo(
+    () => renderItems.slice(safeWindowStart, safeWindowEnd),
+    [renderItems, safeWindowStart, safeWindowEnd]
+  );
+  const renderedVisibleItems = useMemo(
+    () => visibleRenderItems.filter((item) => !streamingMessageId || item.id !== streamingMessageId),
+    [streamingMessageId, visibleRenderItems]
+  );
+  // Keep the ref the height estimator reads in sync with the live viewport width.
+  viewportWidthRef.current = viewportWidth;
+
+  // Measure mounted item heights so the spacers stand in at true size (no jump when unloading above).
+  React.useLayoutEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    // Guarded so this converges: once heights stop moving, no more version bumps.
+    if (measureMountedHeights(el, itemHeightsRef.current)) setHeightVersion((v) => v + 1);
+  });
+
+  // Spacers reserve the cumulative height of the unmounted items above/below the window. heightVersion gates recompute off the ref-held measurements; we index the render-scope renderItems directly so id->height stays correct on the frame the transcript changes.
+  const topSpacerHeight = useMemo(
+    () => sumReservedHeights(renderItems, 0, safeWindowStart, reservedHeightForItem),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [renderItems, safeWindowStart, heightVersion, reservedHeightForItem]
+  );
+  const bottomSpacerHeight = useMemo(
+    () => sumReservedHeights(renderItems, safeWindowEnd, total, reservedHeightForItem),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [renderItems, safeWindowEnd, total, heightVersion, reservedHeightForItem]
+  );
+
+  React.useLayoutEffect(() => {
+    if (pendingInitialBottomScrollRef.current) {
+      const el = scrollContainerRef.current;
+      if (!el || visibleRenderItems.length === 0) return;
+      pendingInitialBottomScrollRef.current = false;
+      runInitialBottomPin(
+        { scrollContainerRef, isAtBottomRef, lastScrollHeightRef, lastVisibleItemRef, initialPinRafRef, initialBottomScrollSettledRef },
+        () => setShowScrollButton(false),
+        // The open slice is sized by item COUNT; once settled and measured, trim it down to the pixel-based band so tall messages high in the slice unload instead of sitting fully rendered off-screen.
+        scheduleWindowRecompute,
+      );
+    }
+  }, [id, activeBranchId, renderItems.length, renderedVisibleItems.length, visibleStartIndex]);
+
+  return {
+    scrollContainerRef,
+    lastVisibleItemRef,
+    onScroll: handleScroll,
+    scrollToBottom,
+    stickToBottomIfNeeded,
+    showScrollButton,
+    renderedVisibleItems,
+    topSpacerHeight,
+    bottomSpacerHeight,
+    scrollRoot,
+    viewportWidth,
+    viewportHeight,
+  };
+}
diff --git a/frontend/src/app/pages/AgentChat/scroll/windowingCore.test.ts b/frontend/src/app/pages/AgentChat/scroll/windowingCore.test.ts
new file mode 100644
index 000000000..a6839682b
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/windowingCore.test.ts
@@ -0,0 +1,88 @@
+// Step-6 gate (AGENTCHAT_SPLIT_PLAN §6): the windowing solver internals behind useMessageScroll are
+// pure functions over explicit inputs, so the hysteresis + follow-the-tail window rules pin down here
+// (the rAF pinning side is real-app-verified; jsdom has no layout).
+import { describe, test } from 'node:test';
+import assert from 'node:assert/strict';
+import { RENDER_ITEM_ESTIMATED_HEIGHT } from '../windowing/messageWindow';
+import {
+  measureMountedHeights,
+  nextWindowForItems,
+  reservedHeightFor,
+  solveWindowFromScroll,
+  sumReservedHeights,
+} from './windowingCore';
+import type { RenderItem } from '../tool-bubbles/ToolGroupBubble';
+
+const msg = (id: string): RenderItem =>
+  ({ id, role: 'assistant', content: 'x'.repeat(40), branch_id: 'main' }) as unknown as RenderItem;
+
+// A fake scroll container: the solver only reads scrollTop/clientHeight.
+const el = (scrollTop: number, clientHeight: number) => ({ scrollTop, clientHeight }) as HTMLElement;
+const flat100 = () => 100; // every item 100px tall
+
+describe('reservedHeightFor', () => {
+  test('measured height wins over the estimate and the fallback', () => {
+    const measured = new Map([['a', 77]]);
+    assert.equal(reservedHeightFor(msg('a'), measured, new Map(), 800), 77);
+    assert.equal(reservedHeightFor(undefined, measured, new Map(), 800), RENDER_ITEM_ESTIMATED_HEIGHT);
+  });
+
+  test('estimates are computed once and cached per id', () => {
+    const estimates = new Map<string, number>();
+    const first = reservedHeightFor(msg('a'), new Map(), estimates, 800);
+    estimates.set('a', 999); // poke the cache to prove the second call reads it
+    assert.equal(reservedHeightFor(msg('a'), new Map(), estimates, 800), 999);
+    assert.ok(first > 0);
+  });
+});
+
+test('sumReservedHeights sums [from, to) through the reserve fn', () => {
+  const items = [msg('a'), msg('b'), msg('c')];
+  assert.equal(sumReservedHeights(items, 0, 2, () => 10), 20);
+  assert.equal(sumReservedHeights(items, 2, 2, () => 10), 0);
+});
+
+describe('solveWindowFromScroll', () => {
+  // clientHeight 500 → tight buffer 1500px, loose 2000px. 100 flat-100px items.
+  test('returns null when the window is already correct (no churn)', () => {
+    assert.equal(solveWindowFromScroll(el(0, 500), 100, 0, 20, false, flat100), null);
+  });
+
+  test('hysteresis: an already-mounted edge inside the loose band is kept', () => {
+    // curEnd 23 sits past the tight end (20) but inside loose (25): unchanged → null, no flip-flop.
+    assert.equal(solveWindowFromScroll(el(0, 500), 100, 0, 23, false, flat100), null);
+  });
+
+  test('following pins the window end to the newest item', () => {
+    assert.deepEqual(solveWindowFromScroll(el(0, 500), 100, 0, 20, true, flat100), { start: 0, end: 100 });
+  });
+
+  test('scrolling to the middle slides the window to the viewport band', () => {
+    assert.deepEqual(solveWindowFromScroll(el(5000, 500), 100, 0, 20, false, flat100), { start: 30, end: 70 });
+  });
+});
+
+describe('nextWindowForItems', () => {
+  test('following keeps the newest item and seeds a bounded recent slice', () => {
+    const next = nextWindowForItems(100, 500, 0, 0, true);
+    assert.equal(next.end, 100);
+    assert.ok(next.start > 0); // bounded, not the whole transcript
+    assert.ok(next.start < 100);
+  });
+
+  test('scrolled up only clamps the existing window against the new length', () => {
+    assert.deepEqual(nextWindowForItems(40, 500, 10, 50, false), { start: 10, end: 40 });
+  });
+});
+
+test('measureMountedHeights records offsetHeights and reports change once (converges)', () => {
+  // The function reads only querySelectorAll / dataset / offsetHeight, so a structural stand-in
+  // keeps the case DOM-free under node:test.
+  const child = { dataset: { windowItemId: 'a' }, offsetHeight: 120 };
+  const container = { querySelectorAll: () => [child] } as unknown as HTMLElement;
+  const measured = new Map<string, number>();
+  assert.equal(measureMountedHeights(container, measured), true);
+  assert.equal(measured.get('a'), 120);
+  // Same heights again: no change reported, so the caller's version bump converges.
+  assert.equal(measureMountedHeights(container, measured), false);
+});
diff --git a/frontend/src/app/pages/AgentChat/scroll/windowingCore.ts b/frontend/src/app/pages/AgentChat/scroll/windowingCore.ts
new file mode 100644
index 000000000..5c14e927e
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/scroll/windowingCore.ts
@@ -0,0 +1,112 @@
+import {
+  RENDER_ITEM_ESTIMATED_HEIGHT,
+  WINDOW_BUFFER_SCREENS_PER_SIDE,
+  computeDesiredWindow,
+  estimateItemHeight,
+  initialSeedItems,
+} from '../windowing/messageWindow';
+import type { RenderItem } from '../tool-bubbles/ToolGroupBubble';
+
+// Private windowing internals behind useMessageScroll (the single public scroll API). Plain functions
+// over explicit inputs — no hooks, no refs of their own — so every useRef/useState/useEffect declaration
+// (and with it the effect firing order) stays in useMessageScroll.ts while the solver math lives here.
+
+// Reserved pixel height for a render item: the measured height once we have one, otherwise a
+// content-aware estimate (cached per id). The spacer math and the window solver both go through this so
+// unmounted spacers, freshly-mounted placeholders, and the real rendered bubble all reserve the same
+// space.
+export function reservedHeightFor(
+  item: RenderItem | undefined,
+  measured: Map<string, number>,
+  estimates: Map<string, number>,
+  viewportWidth: number,
+): number {
+  if (!item) return RENDER_ITEM_ESTIMATED_HEIGHT;
+  const m = measured.get(item.id);
+  if (m != null) return m;
+  const cached = estimates.get(item.id);
+  if (cached != null) return cached;
+  const est = estimateItemHeight(item, viewportWidth);
+  estimates.set(item.id, est);
+  return est;
+}
+
+// Solve the mounted window from the live scroll position. Scroll position itself is preserved by the
+// container's overflow-anchor plus the measured-height spacers, so the caller never touches scrollTop
+// here. Following (pinned to bottom) always keeps the newest item. Returns null when the window is
+// unchanged.
+export function solveWindowFromScroll(
+  el: HTMLElement,
+  total: number,
+  curStart: number,
+  curEnd: number,
+  isAtBottom: boolean,
+  heightOf: (index: number) => number,
+): { start: number; end: number } | null {
+  const clientHeight = Math.max(1, el.clientHeight);
+  const tightPx = WINDOW_BUFFER_SCREENS_PER_SIDE * clientHeight;
+  // Mount with the tight buffer, but keep already-mounted items until they drift a full extra screen past it. Without this, an item sitting right on the buffer edge flip-flops mounted/unmounted forever: mounting it shifts content above the viewport, overflow-anchor nudges scrollTop a few px, that re-runs the solver, which now excludes it, and round it goes.
+  const loosePx = tightPx + clientHeight;
+  const tight = computeDesiredWindow(el.scrollTop, clientHeight, total, heightOf, tightPx);
+  const loose = computeDesiredWindow(el.scrollTop, clientHeight, total, heightOf, loosePx);
+  // Must-mount the tight band; keep current edges only while still inside loose.
+  let start = Math.max(loose.start, Math.min(curStart, tight.start));
+  let end = Math.min(loose.end, Math.max(curEnd, tight.end));
+  if (isAtBottom) end = total;
+  start = Math.max(0, Math.min(start, Math.max(0, end - 1)));
+  if (start === curStart && end === curEnd) return null;
+  return { start, end };
+}
+
+// Window update when the transcript itself changes (new items land or the branch slice is rebuilt).
+export function nextWindowForItems(
+  total: number,
+  viewportHeight: number,
+  curStart: number,
+  curEnd: number,
+  following: boolean,
+): { start: number; end: number } {
+  const seed = initialSeedItems(viewportHeight);
+  let start = curStart;
+  let end = curEnd;
+  if (following || end === 0) {
+    // Following the live tail: keep the newest item mounted and unload the oldest beyond a bounded recent slice so memory stays flat as the transcript grows. The pixel solver refines this seed on the next scroll.
+    end = total;
+    start = Math.max(0, end - seed);
+  } else {
+    // Scrolled up: just keep the existing window valid against the new length.
+    end = Math.min(end, total);
+    start = Math.min(start, Math.max(0, end - 1));
+  }
+  return { start, end };
+}
+
+// Measure mounted item heights so the spacers that stand in for unmounted items keep the scrollbar
+// geometry stable (no jump when unloading above). Returns whether any measurement changed.
+export function measureMountedHeights(el: HTMLElement, measured: Map<string, number>): boolean {
+  let changed = false;
+  el.querySelectorAll<HTMLElement>('[data-window-item-id]').forEach((node) => {
+    const itemId = node.dataset.windowItemId;
+    if (!itemId) return;
+    const h = node.offsetHeight;
+    if (h <= 0) return;
+    const prev = measured.get(itemId);
+    if (prev === undefined || Math.abs(prev - h) > 1) {
+      measured.set(itemId, h);
+      changed = true;
+    }
+  });
+  return changed;
+}
+
+// Cumulative reserved height of the unmounted items in [from, to) — the spacer heights.
+export function sumReservedHeights(
+  items: RenderItem[],
+  from: number,
+  to: number,
+  reserve: (item: RenderItem | undefined) => number,
+): number {
+  let h = 0;
+  for (let i = from; i < to; i++) h += reserve(items[i]);
+  return h;
+}
diff --git a/frontend/src/app/pages/AgentChat/session/useModeModel.ts b/frontend/src/app/pages/AgentChat/session/useModeModel.ts
new file mode 100644
index 000000000..d33595f24
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/session/useModeModel.ts
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { updateSessionMode, updateSessionModel, updateSessionThinkingLevel, updateThinkingLevel, type AgentSession } from '@/shared/state/agentsSlice';
+import { fetchModes } from '@/shared/state/modesSlice';
+import { useModelSwitchNotices } from '../model/useModelSwitchNotices';
+
+// The composer's mode/model/thinking selection state and its change handlers, including the free-trial
+// and workflow-model-switch notice policy (AGENTCHAT_SPLIT_PLAN follow-up). Lifted verbatim from
+// AgentChat.
+export function useModeModel({
+  id,
+  isDraft,
+  session,
+  workflowEditId,
+  connectionMode,
+}: {
+  id: string | undefined;
+  isDraft: boolean;
+  session: AgentSession | undefined;
+  workflowEditId?: string;
+  connectionMode: string | undefined;
+}) {
+  const dispatch = useAppDispatch();
+  const modelsByProvider = useAppSelector((state) => state.models.byProvider);
+  const modesMap = useAppSelector((state) => state.modes.items);
+  const freeTrialRemaining = useAppSelector((s) => s.settings.data.free_trial_remaining);
+  // Seed from the loaded session so a mounted chat doesn't pay a mode/model reconcile render (the effects below still track later changes); the literals are the fresh-draft defaults.
+  const [mode, setMode] = useState(session?.mode ?? 'agent');
+  const [model, setModel] = useState(session?.model ?? 'opus-5');
+  // Workflow build chat only ("this model now runs the workflow") + free-trial "can't use this model" toasts, with their auto-clear timers.
+  const {
+    workflowNotice,
+    freeTrialNotice,
+    showWorkflow,
+    showFreeTrial,
+    clearFreeTrial,
+  } = useModelSwitchNotices();
+
+  // Stored value → curated picker label, with a tidy fallback for unknowns.
+  const resolveModelLabel = useCallback((value: string | null | undefined): string => {
+    if (!value) return '';
+    for (const models of Object.values(modelsByProvider)) {
+      for (const m of models as any[]) {
+        if (m.value === value) return m.label;
+      }
+    }
+    let s = String(value);
+    if (s.startsWith('or:')) s = s.slice(3);
+    if (s.includes('/')) s = s.split('/').pop() || s;
+    return s;
+  }, [modelsByProvider]);
+
+  useEffect(() => {
+    if (session) setMode(session.mode);
+  }, [session?.mode]);
+
+  useEffect(() => {
+    if (session) setModel(session.model);
+  }, [session?.model]);
+
+  useEffect(() => {
+    if (Object.keys(modesMap).length === 0) dispatch(fetchModes());
+  }, [dispatch, modesMap]);
+
+  const handleModeChange = useCallback((newMode: string) => {
+    setMode(newMode);
+    if (id && !isDraft) dispatch(updateSessionMode({ sessionId: id, mode: newMode }));
+  }, [id, isDraft, dispatch]);
+
+  const handleModelChange = useCallback((newModel: string) => {
+    // On the trial only Haiku is funded; picking anything else needs a connected provider, and once runs are spent nothing local works, so warn and keep the funded model instead of snagging.
+    if (connectionMode === 'free-trial') {
+      const kind: 'connect' | 'spent' | null =
+        (freeTrialRemaining ?? 0) <= 0 ? 'spent' : (newModel !== 'haiku' ? 'connect' : null);
+      if (kind) {
+        showFreeTrial(kind, resolveModelLabel(newModel));
+        return;
+      }
+    }
+    if (workflowEditId && newModel !== model) {
+      showWorkflow(resolveModelLabel(newModel));
+    }
+    clearFreeTrial();
+    setModel(newModel);
+    if (id && !isDraft) dispatch(updateSessionModel({ sessionId: id, model: newModel }));
+  }, [id, isDraft, dispatch, workflowEditId, model, resolveModelLabel, connectionMode, freeTrialRemaining, showFreeTrial, showWorkflow, clearFreeTrial]);
+
+  const handleThinkingLevelChange = useCallback((level: 'off' | 'low' | 'medium' | 'high' | 'auto') => {
+    if (!id) return;
+    dispatch(updateSessionThinkingLevel({ sessionId: id, level }));
+    if (!isDraft) dispatch(updateThinkingLevel({ sessionId: id, level }));
+  }, [id, isDraft, dispatch]);
+
+  return {
+    mode,
+    setMode,
+    model,
+    modesMap,
+    resolveModelLabel,
+    handleModeChange,
+    handleModelChange,
+    handleThinkingLevelChange,
+    workflowNotice,
+    freeTrialNotice,
+  };
+}
diff --git a/frontend/src/app/pages/AgentChat/session/useSendPipeline.ts b/frontend/src/app/pages/AgentChat/session/useSendPipeline.ts
new file mode 100644
index 000000000..4296e0ac2
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/session/useSendPipeline.ts
@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import { API_BASE, getAuthToken } from '@/shared/config';
+import {
+  sendMessage as sendMessageThunk,
+  launchAndSendFirstMessage,
+  generateTitle,
+  updateSessionMode,
+  clearSessionMessages,
+  type AgentSession,
+} from '@/shared/state/agentsSlice';
+import { setGlowingBrowserCards, fadeGlowingBrowserCards, clearGlowingBrowserCards } from '@/shared/state/dashboardLayoutSlice';
+import type { useMessageQueue, QueuedMessage } from '../queue/useMessageQueue';
+
+// The send/turn pipeline (AGENTCHAT_SPLIT_PLAN follow-up): dispatching a message (draft launch vs live
+// send vs run-context question), the busy gate, the terminal-status transition (drain queue / show
+// resume / auto-advance mode), resume + reset-history, and the pre-send activity label. Lifted verbatim
+// from AgentChat; every callback returned here is a stable useCallback whose identity feeds ChatInput's
+// memo (callback-identity rule — destructure members, never dep on this hook's return object).
+export function useSendPipeline({
+  id,
+  isDraft,
+  session,
+  mode,
+  model,
+  setMode,
+  modesMap,
+  queue,
+  isWorkflowRunSidecar,
+  streamingMessageId,
+  onSendRunQuestion,
+}: {
+  id: string | undefined;
+  isDraft: boolean;
+  session: AgentSession | undefined;
+  mode: string;
+  model: string;
+  setMode: (mode: string) => void;
+  modesMap: Record<string, any>;
+  queue: ReturnType<typeof useMessageQueue>;
+  isWorkflowRunSidecar: boolean;
+  streamingMessageId: string | null;
+  onSendRunQuestion?: (prompt: string, runId: string) => Promise<void>;
+}) {
+  const dispatch = useAppDispatch();
+  const [showResumeBubble, setShowResumeBubble] = useState(false);
+  const [awaitingResponse, setAwaitingResponse] = useState(false);
+  const [preSendActivityLabel, setPreSendActivityLabel] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isWorkflowRunSidecar) setShowResumeBubble(false);
+  }, [isWorkflowRunSidecar]);
+
+  // Read live in the stable dispatchMessage closure without busting its memo (ChatInput leans on handleSend identity holding across renders).
+  const onSendRunQuestionRef = useRef(onSendRunQuestion);
+  onSendRunQuestionRef.current = onSendRunQuestion;
+
+  const dispatchMessage = useCallback((msg: QueuedMessage) => {
+    if (!id) return;
+    setShowResumeBubble(false);
+    setAwaitingResponse(true);
+    if (isDraft) {
+      const config: Record<string, any> = { model, mode };
+      if (session?.system_prompt) config.system_prompt = session.system_prompt;
+      if (session?.target_directory) config.target_directory = session.target_directory;
+      // Carry the draft's dashboard so the launched session stays ON this dashboard; without it the session lands dashboard_id=null, drops out of the reconcile filter, and its card vanishes the instant you send (looked like "the chat quit when I clicked an option").
+      if (session?.dashboard_id) config.dashboard_id = session.dashboard_id;
+      // Editing an existing app: bind the launch to it so the backend edits in place instead of seeding a duplicate empty app (App Builder mode only).
+      if (msg.selectedAppIds?.length) config.selected_app_output_ids = msg.selectedAppIds;
+      dispatch(
+        launchAndSendFirstMessage({ draftId: id, config, prompt: msg.prompt, mode, model, images: msg.images, contextPaths: msg.contextPaths, forcedTools: msg.forcedTools, attachedSkills: msg.attachedSkills, selectedBrowserIds: msg.selectedBrowserIds, selectedAppIds: msg.selectedAppIds, selectedSettingIds: msg.selectedSettingIds })
+      ).then((action) => {
+        if (launchAndSendFirstMessage.fulfilled.match(action)) {
+          const realId = action.payload.session.id;
+          dispatch(generateTitle({ sessionId: realId, prompt: msg.prompt }));
+          if (msg.selectedBrowserIds?.length) {
+            dispatch(setGlowingBrowserCards({ browserIds: msg.selectedBrowserIds, sessionId: realId, label: 'Use Browser' }));
+          }
+        }
+      });
+    } else if (msg.attachedRunId && onSendRunQuestionRef.current) {
+      // Run-context question: the backend folds the run transcript into this one turn and echoes the user bubble + answer over WS, so no optimistic thunk.
+      onSendRunQuestionRef.current(msg.prompt, msg.attachedRunId).catch(() => setAwaitingResponse(false));
+    } else {
+      if (msg.selectedBrowserIds?.length) {
+        dispatch(setGlowingBrowserCards({ browserIds: msg.selectedBrowserIds, sessionId: id, label: 'Use Browser' }));
+      }
+      dispatch(sendMessageThunk({ sessionId: id, prompt: msg.prompt, mode, model, images: msg.images, contextPaths: msg.contextPaths, forcedTools: msg.forcedTools, attachedSkills: msg.attachedSkills, selectedBrowserIds: msg.selectedBrowserIds, selectedAppIds: msg.selectedAppIds, selectedSettingIds: msg.selectedSettingIds }))
+        .then((action) => {
+          if (sendMessageThunk.rejected.match(action)) {
+            setAwaitingResponse(false);
+          }
+        });
+    }
+  }, [id, isDraft, mode, model, session?.system_prompt, session?.target_directory, session?.dashboard_id, dispatch]);
+
+  const agentBusy = awaitingResponse || (!isDraft && (session?.status === 'running' || session?.status === 'waiting_approval'));
+
+  const prevStatusRef = useRef(session?.status);
+  useEffect(() => {
+    const prev = prevStatusRef.current;
+    const curr = session?.status;
+    prevStatusRef.current = curr;
+    let didDispatchQueued = false;
+
+    const wasActive = prev === 'running' || prev === 'waiting_approval';
+    const isTerminal = curr === 'completed' || curr === 'stopped' || curr === 'error';
+
+    if (wasActive && isTerminal) {
+      if (id) {
+        dispatch(fadeGlowingBrowserCards(id));
+        setTimeout(() => dispatch(clearGlowingBrowserCards(id)), 600);
+      }
+
+      const nextQueued = queue.drainNext();
+      if (nextQueued) {
+        dispatchMessage(nextQueued);
+        didDispatchQueued = true;
+      } else {
+        if (curr === 'stopped') {
+          setShowResumeBubble(!isWorkflowRunSidecar);
+        }
+      }
+
+      const currentMode = modesMap[mode];
+      if (currentMode?.default_next_mode && modesMap[currentMode.default_next_mode]) {
+        setMode(currentMode.default_next_mode);
+        if (id && !isDraft) {
+          dispatch(updateSessionMode({ sessionId: id, mode: currentMode.default_next_mode as any }));
+        }
+      }
+    }
+    if (curr === 'running') {
+      setShowResumeBubble(false);
+    }
+    if (curr !== 'draft' && !didDispatchQueued) {
+      setAwaitingResponse(false);
+    }
+  }, [session?.status, mode, modesMap, id, isDraft, dispatch, dispatchMessage, isWorkflowRunSidecar]);
+
+  // A reload remounts past the live running->stopped transition that first shows the resume button, so re-derive it once from the persisted 'stopped' status (transcript-gated so a cleared chat can't resurrect it).
+  const resumeHydratedRef = useRef(false);
+  useEffect(() => {
+    if (resumeHydratedRef.current) return;
+    if (session?.status === 'stopped' && (session?.messages?.length ?? 0) > 0) {
+      resumeHydratedRef.current = true;
+      setShowResumeBubble(true);
+    }
+  }, [session?.status, session?.messages?.length]);
+
+  useEffect(() => {
+    if (
+      streamingMessageId ||
+      session?.turn_label?.label ||
+      session?.status === 'completed' ||
+      session?.status === 'error' ||
+      session?.status === 'stopped'
+    ) {
+      setPreSendActivityLabel(null);
+    }
+  }, [streamingMessageId, session?.turn_label?.label, session?.status]);
+
+  const handleResume = useCallback(() => {
+    if (!id) return;
+    setShowResumeBubble(false);
+    dispatch(sendMessageThunk({
+      sessionId: id,
+      prompt: "Continue your previous response from exactly where it was cut off. Do not repeat anything you already wrote; pick up mid-sentence if you need to and keep going.",
+      mode,
+      model,
+      hidden: true,
+    }));
+  }, [id, mode, model, dispatch]);
+
+  const clearQueue = queue.clear;
+  const handleResetHistory = useCallback(async () => {
+    if (!id) return;
+    const sid = id;
+    // Reset local UI state first; clearSessionMessages only touches Redux session.messages, so showResumeBubble/awaitingResponse/the queue otherwise survive and a "thinking" or "Resume agent response" bubble lingers on a now-empty chat.
+    setShowResumeBubble(false);
+    setAwaitingResponse(false);
+    clearQueue();
+    try {
+      const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (tok) headers['Authorization'] = `Bearer ${tok}`;
+      await fetch(`${API_BASE}/agents/sessions/${sid}/clear`, { method: 'POST', headers });
+    } catch { /* surfaced via context_status */ }
+    dispatch(clearSessionMessages(sid));
+  }, [id, dispatch, clearQueue]);
+
+  return {
+    dispatchMessage,
+    agentBusy,
+    awaitingResponse,
+    showResumeBubble,
+    preSendActivityLabel,
+    setPreSendActivityLabel,
+    handleResume,
+    handleResetHistory,
+  };
+}
diff --git a/frontend/src/app/pages/AgentChat/session/useSessionWs.ts b/frontend/src/app/pages/AgentChat/session/useSessionWs.ts
new file mode 100644
index 000000000..e2db26091
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/session/useSessionWs.ts
@@ -0,0 +1,84 @@
+import { useEffect, useRef } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import { fetchSession } from '@/shared/state/agentsSlice';
+import { store } from '@/shared/state/store';
+import { createSessionWs, acquireSessionWs, releaseSessionWs, seedSessionSeq } from '@/shared/ws/WebSocketManager';
+
+// The session's transport lifecycle (AGENTCHAT_SPLIT_PLAN follow-up): REST-hydrate-then-WS-connect on
+// mount/id change, active-aware release on unmount, and the idle reconcile poll. Lifted verbatim from
+// AgentChat.
+export function useSessionWs(
+  id: string | undefined,
+  isDraft: boolean,
+  status: string | undefined,
+  activity: { messageCount: number; hasStreaming: boolean },
+) {
+  const dispatch = useAppDispatch();
+  const wsRef = useRef<ReturnType<typeof createSessionWs> | null>(null);
+  // Current status for the WS-cleanup closure (effect deps can't include it). Written every render so
+  // it is fresh at cleanup time — same timing as the previous inline render-scope write.
+  const statusRef = useRef<string | undefined>(undefined);
+  statusRef.current = status;
+
+  useEffect(() => {
+    if (!id || isDraft) return;
+    let cancelled = false;
+    let ws: ReturnType<typeof createSessionWs> | null = null;
+    // Order matters: hydrate the persisted message list from REST FIRST, THEN connect the WS. The WS resume protocol replays buffered events starting at last_seq=0, which includes every stream_* event for messages that finished before the disconnect. The replay-skip guard in WebSocketManager._messageAlreadyComplete checks `session.messages` to decide whether to drop deltas, so if we connect first, the slice is empty when the replay arrives, the guard returns false, and the user sees the chat type itself out again. Awaiting fetchSession before connect makes the slice authoritative before any replay event lands.
+    (async () => {
+      // The await exists so the slice isn't EMPTY at replay time. A warm store (remount after a hop) already satisfies that, so connect immediately and let the fetch reconcile in the background; awaiting serialized a slow round trip in front of the live stream on every reopen.
+      const warm = !!store.getState().agents.sessions[id]?.messages?.length;
+      if (warm) {
+        dispatch(fetchSession(id));
+      } else {
+        try {
+          const action = await dispatch(fetchSession(id));
+          // Seed the resume cursor from the snapshot's seq so the connect below doesn't replay the whole ring buffer we just hydrated over REST.
+          if (fetchSession.fulfilled.match(action)) {
+            const seq = (action.payload as { event_seq?: number }).event_seq;
+            if (typeof seq === 'number') seedSessionSeq(id, seq);
+          }
+        } catch {
+          // Even if the REST hydrate fails, still connect, the WS resume protocol can hydrate from buffered events as a fallback.
+        }
+      }
+      if (cancelled) return;
+      // acquireSessionWs reuses a still-open socket kept alive from the last hop, so an active agent's stream resumes with no reconnect handshake. connect() is a no-op when the reused socket is already open.
+      ws = acquireSessionWs(id);
+      ws.connect();
+      wsRef.current = ws;
+    })();
+    return () => {
+      cancelled = true;
+      if (ws) {
+        const st = statusRef.current;
+        const active = st === 'running' || st === 'waiting_approval';
+        releaseSessionWs(id, ws, active);
+      }
+      wsRef.current = null;
+    };
+  }, [id, isDraft, dispatch]);
+
+  // Idle reconcile: if the session has been 'running' for 5s with no WebSocket activity (no new messages, no streaming updates), do a single GET to fetch the real status from the backend. Catches the case where the completion WebSocket event was dropped (network blip, sleep/wake, SDK subprocess dying). Resets on every activity signal so it never fires during normal streaming.
+  const reconcileTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (reconcileTimer.current) {
+      clearTimeout(reconcileTimer.current);
+      reconcileTimer.current = null;
+    }
+
+    if (!id || status !== 'running') return;
+
+    reconcileTimer.current = setTimeout(() => {
+      reconcileTimer.current = null;
+      dispatch(fetchSession(id));
+    }, 5000);
+
+    return () => {
+      if (reconcileTimer.current) {
+        clearTimeout(reconcileTimer.current);
+        reconcileTimer.current = null;
+      }
+    };
+  }, [id, status, activity.messageCount, activity.hasStreaming, dispatch]);
+}
diff --git a/frontend/src/app/pages/AgentChat/session/useWorkflowSidecar.ts b/frontend/src/app/pages/AgentChat/session/useWorkflowSidecar.ts
new file mode 100644
index 000000000..882d88a10
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/session/useWorkflowSidecar.ts
@@ -0,0 +1,70 @@
+import { useCallback } from 'react';
+import { shallowEqual } from 'react-redux';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { stopAgent } from '@/shared/state/agentsSlice';
+import { removeCard } from '@/shared/state/dashboardLayoutSlice';
+import { setCardSidecar, commitDraft, updateWorkflowCard, controlWorkflowRun } from '@/shared/state/workflowsSlice';
+
+// How this chat relates to a workflow card (AGENTCHAT_SPLIT_PLAN follow-up): the linked-sidecar
+// selectors plus the stop/save/continue handlers that act on that link. Lifted verbatim from AgentChat.
+export function useWorkflowSidecar(id: string | undefined) {
+  const dispatch = useAppDispatch();
+  // A card linked as a workflow sidecar (Test Agent, or a watched run) swaps its composer for a Force Stop button: continuing the chat is meaningless, but killing the run is the common need. Once a Test Agent finishes, the button flips to a green "close" (see workflow_test_state + ForceStopAgentBar).
+  const linkedSidecar = useAppSelector((s) => {
+    const found = Object.values(s.workflows.openCards).find(
+      (cd) => cd.sidecarSessionId === id && (cd.sidecarKind === 'testing' || cd.sidecarKind === 'watching'),
+    );
+    return found
+      ? { workflowId: found.workflowId, runId: found.runId ?? null, kind: found.sidecarKind ?? null }
+      : null;
+  }, shallowEqual);
+  const linkedWorkflowId = linkedSidecar?.workflowId ?? null;
+  const isStoppableSidecar = !!linkedWorkflowId;
+  // A live workflow run being watched owns pause/resume from its workflow card, so the chat's own "Resume Agent Response" bubble is redundant and would go stale against the card's Resume. Suppress it for any workflow-run sidecar, not just the fragile exact "watching" value. Test-run sidecars keep their chat-level resume behavior.
+  const isWorkflowRunSidecar = useAppSelector((s) => {
+    if (!id) return false;
+    for (const cd of Object.values(s.workflows.openCards)) {
+      if (cd.sidecarSessionId !== id || cd.sidecarKind === 'testing') continue;
+      if (cd.runId) {
+        const run = (s.workflows.runs[cd.workflowId] || []).find((r) => r.id === cd.runId);
+        if (!run || run.session_id === id) return true;
+      }
+      if (cd.sidecarKind === 'watching' || cd.sidecarKind === 'viewing-completed' || cd.sidecarKind === 'viewing-error') return true;
+    }
+    return Object.values(s.workflows.runs).some((runs) =>
+      runs.some((r) => r.session_id === id && r.status === 'running'),
+    );
+  });
+  const testState = useAppSelector((s) => (id ? s.agents.sessions[id]?.workflow_test_state : null) ?? null);
+
+  const handleStop = useCallback(() => {
+    if (!id) return;
+    // A watched live workflow run mirrors the workflow card's Stop: fully stop the run, not just pause the agent. Test Agent + plain chats stop the session.
+    if (linkedSidecar?.kind === 'watching' && linkedSidecar.runId) {
+      dispatch(controlWorkflowRun({ runId: linkedSidecar.runId, action: 'stop' }));
+      return;
+    }
+    dispatch(stopAgent({ sessionId: id }));
+  }, [id, dispatch, linkedSidecar]);
+
+  // Finished Test Agent card: drop the tether + remove this card, and either commit the workflow draft (Save, same as the edit card's "save now") or leave the draft untouched so the user keeps editing.
+  const onTestContinueEditing = useCallback(() => {
+    if (linkedWorkflowId) dispatch(setCardSidecar({ workflowId: linkedWorkflowId, sessionId: null, kind: null }));
+    if (id) dispatch(removeCard(id));
+  }, [linkedWorkflowId, id, dispatch]);
+
+  const onTestSaveWorkflow = useCallback(async () => {
+    if (linkedWorkflowId) {
+      try {
+        await dispatch(commitDraft(linkedWorkflowId)).unwrap();
+      } catch {
+        return;
+      }
+      dispatch(updateWorkflowCard({ workflowId: linkedWorkflowId, patch: { view: 'saved' } }));
+      dispatch(setCardSidecar({ workflowId: linkedWorkflowId, sessionId: null, kind: null }));
+    }
+    if (id) dispatch(removeCard(id));
+  }, [linkedWorkflowId, id, dispatch]);
+
+  return { isStoppableSidecar, isWorkflowRunSidecar, testState, handleStop, onTestContinueEditing, onTestSaveWorkflow };
+}
diff --git a/frontend/src/app/pages/AgentChat/shell/PendingApprovalBars.tsx b/frontend/src/app/pages/AgentChat/shell/PendingApprovalBars.tsx
new file mode 100644
index 000000000..cbf55cbb3
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/shell/PendingApprovalBars.tsx
@@ -0,0 +1,14 @@
+import { useAppDispatch } from '@/shared/hooks';
+import { handleApproval, type ApprovalRequest } from '@/shared/state/agentsSlice';
+import ApprovalBar, { BatchApprovalBar } from './ApprovalBar';
+
+// The pending-approval strip above the composer: one bar per request, or the batch bar once more than
+// one is waiting. Both route through the same allow/deny thunk. Lifted verbatim from AgentChat's render.
+export function PendingApprovalBars({ requests }: { requests: ApprovalRequest[] }) {
+  const dispatch = useAppDispatch();
+  const onApprove = (requestId: string, updatedInput?: Record<string, any>, trustPattern?: boolean, alwaysAllow?: boolean) =>
+    dispatch(handleApproval({ requestId, behavior: 'allow', updatedInput, trustPattern, setAlwaysAllow: alwaysAllow }));
+  const onDeny = (requestId: string, message?: string) => dispatch(handleApproval({ requestId, behavior: 'deny', message }));
+  if (requests.length > 1) return <BatchApprovalBar requests={requests} onApprove={onApprove} onDeny={onDeny} />;
+  return <>{requests.map((req) => <ApprovalBar key={req.id} request={req} onApprove={onApprove} onDeny={onDeny} />)}</>;
+}
diff --git a/frontend/src/app/pages/AgentChat/shell/useDockedBrowserSlot.tsx b/frontend/src/app/pages/AgentChat/shell/useDockedBrowserSlot.tsx
new file mode 100644
index 000000000..f5748b949
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/shell/useDockedBrowserSlot.tsx
@@ -0,0 +1,87 @@
+import React, { useCallback, useMemo } from 'react';
+import Box from '@mui/material/Box';
+import { useAppSelector } from '@/shared/hooks';
+import type { AgentMessage } from '@/shared/state/agentsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { getMinimizedShot } from '@/app/pages/Dashboard/desktop/minimizedShots';
+import { type RenderItem, isToolGroup, isToolPair } from '../tool-bubbles/ToolGroupBubble';
+
+// The in-transcript dock slot for a spawned surface (browser or built app) that calls this chat home.
+// The real card overlays the slot rect geometrically, so the webview never remounts; this hook owns
+// the slot's selectors, sizing, mount announcement, frozen-shot backdrop, and where in the transcript
+// it anchors (the LAST browser-agent tool row, else the end-of-transcript fallback). Lifted from
+// AgentChat.
+export function useDockedBrowserSlot({
+  id,
+  c,
+  renderItems,
+}: {
+  id: string | undefined;
+  c: ReturnType<typeof useClaudeTokens>;
+  renderItems: RenderItem[];
+}) {
+  // True while a spawned surface (browser or built app) calls this chat home; gates the dock slot the real card overlays.
+  const hasDockedBrowser = useAppSelector((st) =>
+    Object.values(st.dashboardLayout.browserCards).some((bc) => bc.docked_to === id) ||
+    Object.values(st.dashboardLayout.viewCards).some((vc) => vc.docked_to === id));
+  // The docked surface's aspect ratio, so the inline slot hugs the browser's shape instead of reserving a fixed letterbox band (primitive selectors so no fresh-object rerenders). Highest z wins, mirroring BrowserCard's dock-owner election, so a dead rival's stale dock never feeds dims or shots.
+  const pickTopDocked = (st: { dashboardLayout: { zOrders: Record<string, number>; browserCards: Record<string, { browser_id: string; docked_to?: string | null; width: number; height: number; zOrder: number }> } }) => {
+    let best: { browser_id: string; width: number; height: number; zOrder: number } | null = null;
+    let bestZ = -1;
+    const zOf = (b: { browser_id: string; zOrder: number }): number => st.dashboardLayout.zOrders[b.browser_id] ?? b.zOrder ?? 0;
+    for (const b of Object.values(st.dashboardLayout.browserCards)) {
+      if (b.docked_to !== id) continue;
+      if (!best || zOf(b) > bestZ) { best = b; bestZ = zOf(b); }
+    }
+    return best;
+  };
+  const dockedSurfaceW = useAppSelector((st) => pickTopDocked(st)?.width ?? 0);
+  const dockedSurfaceH = useAppSelector((st) => pickTopDocked(st)?.height ?? 0);
+  const dockedSurfaceId = useAppSelector((st) => pickTopDocked(st)?.browser_id ?? null);
+  // Shared by the anchor slot and the fallback slot so both read as the same framed block.
+  const browserSlotSx = {
+    position: 'relative',
+    // When the height cap bites, the WIDTH shrinks to keep the slot at the page's exact aspect (a maxHeight that broke the ratio left the live overlay letterboxed inside its own frame).
+    width: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? `min(100%, calc(min(480px, 52vh) * ${dockedSurfaceW / dockedSurfaceH}))` : '100%',
+    aspectRatio: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? `${dockedSurfaceW} / ${dockedSurfaceH}` : undefined,
+    height: dockedSurfaceW > 0 && dockedSurfaceH > 0 ? 'auto' : 'min(360px, 38vh)',
+    minHeight: 140,
+    mx: 'auto',
+    mt: 1,
+    mb: 0.5,
+    borderRadius: '12px',
+    overflow: 'hidden',
+    border: `1px solid ${c.border.medium}`,
+    // The live overlay stamps data-mini-live; while it paints, the frozen-shot backdrop must not (the clamped overlay leaves margins where a misaligned second copy of the page peeked through).
+    '&[data-mini-live="1"] img': { opacity: 0 },
+  } as const;
+  // The slot announces its own (re)mount so the docked mini re-measures exactly then, instead of polling rects on a timer (the windowed transcript remounts it with no resize/pan event firing).
+  const announceBrowserSlot = useCallback((el: HTMLElement | null) => {
+    if (el) window.dispatchEvent(new CustomEvent('openswarm:browser-slot-mounted', { detail: { id } }));
+  }, [id]);
+  // A live webview cannot be clipped by the scroller, so the OVERLAY only shows while fully in view; this frozen shot is what scrolls and clips underneath it, ChatGPT-style.
+  const dockedShot = dockedSurfaceId ? getMinimizedShot(dockedSurfaceId) : undefined;
+  const browserSlotBody = dockedShot ? (
+    <Box component="img" src={dockedShot} alt="" sx={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
+  ) : null;
+
+  // The docked browser anchors at the LAST browser-agent tool row (one live browser, latest work site wins); no row yet falls back to the end-of-transcript slot.
+  const browserAnchorItemId = useMemo((): string | null => {
+    const isBrowserCall = (m: AgentMessage): boolean =>
+      m.role === 'tool_call' && typeof m.content === 'object' && String((m.content as { tool?: string })?.tool || '').toLowerCase().endsWith('browseragent');
+    let anchor: string | null = null;
+    for (const item of renderItems) {
+      if (isToolGroup(item)) { if (item.pairs.some((p) => isBrowserCall(p.call))) anchor = item.id; }
+      else if (isToolPair(item)) { if (isBrowserCall(item.call)) anchor = item.id; }
+      else if (isBrowserCall(item as AgentMessage)) anchor = item.id;
+    }
+    return anchor;
+  }, [renderItems]);
+
+  // One slot element for both homes: rendered right after the anchor row when one exists, else at the transcript tail (fallback for a browser that docked before any browser tool row exists, or whose row was compacted away). The mini hides itself when its slot scrolls mostly out of view, since a live webview can't be clipped by the scroller.
+  const browserSlot: React.ReactNode = hasDockedBrowser
+    ? <Box data-browser-slot={id} ref={announceBrowserSlot} sx={browserSlotSx}>{browserSlotBody}</Box>
+    : null;
+
+  return { hasDockedBrowser, browserAnchorItemId, browserSlot };
+}
diff --git a/frontend/src/app/pages/AgentChat/streaming/ThinkingBubble.tsx b/frontend/src/app/pages/AgentChat/streaming/ThinkingBubble.tsx
new file mode 100644
index 000000000..bfeba7106
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/streaming/ThinkingBubble.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { THINKING_LABELS } from '../thinkingLabels';
+
+const thinkingShimmerKeyframes = `
+@keyframes thinking-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+`;
+
+export const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
+  const c = useClaudeTokens();
+  const shimmerBase = c.text.tertiary;
+  const shimmerHighlight = c.text.primary;
+  // Aux-LLM label wins; otherwise the pill stays plain "Thinking". The whimsical verbs read as personality
+  // in the per-message thinking bubble (MessageBubble), but as a vague, confusing status on a working card.
+  const display = label ? `${label}…` : `${THINKING_LABELS[0].live}…`;
+  // A quiet shimmer LINE, not a bordered card: status shares one visual language with the
+  // per-message thinking row, so only real content gets bubbles (the ChatGPT/Claude pattern).
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
+      <style>{thinkingShimmerKeyframes}</style>
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75, py: 0.5, px: 1, ml: -1 }}>
+        <Box
+          component="span"
+          sx={{
+            fontSize: '0.8125rem',
+            fontWeight: 500,
+            background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
+            backgroundSize: '200% 100%',
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            color: 'transparent',
+            animation: 'thinking-shimmer 2s linear infinite',
+            transition: 'opacity 0.25s',
+          }}
+        >
+          {display}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/frontend/src/app/pages/AgentChat/streaming/useJustStreamed.ts b/frontend/src/app/pages/AgentChat/streaming/useJustStreamed.ts
new file mode 100644
index 000000000..8f601b578
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/streaming/useJustStreamed.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef, useState } from 'react';
+
+// A tool's live pill is already on screen when it commits, so re-running the mount reveal on the committed bubble flashes the exact same row. Remember the id that just stopped streaming for a beat and let that one bubble skip its entrance, so the hand-off is seamless. 500ms is slack for the commit render to land after the stream clears (they don't always arrive on the same frame).
+export function useJustStreamed(streamingMessageId: string | null): string | null {
+  const [justStreamedId, setJustStreamedId] = useState<string | null>(null);
+  const prevRef = useRef<string | null>(null);
+  useEffect(() => {
+    const prev = prevRef.current;
+    prevRef.current = streamingMessageId;
+    if (prev && !streamingMessageId) {
+      setJustStreamedId(prev);
+      const t = setTimeout(() => setJustStreamedId(null), 500);
+      return () => clearTimeout(t);
+    }
+  }, [streamingMessageId]);
+  return justStreamedId;
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/ContextOverflowCard.tsx b/frontend/src/app/pages/AgentChat/transcript/ContextOverflowCard.tsx
new file mode 100644
index 000000000..c93ea03c1
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/ContextOverflowCard.tsx
@@ -0,0 +1,80 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useAppDispatch } from '@/shared/hooks';
+import { openSettingsCard } from '@/shared/state/dashboardLayoutSlice';
+import { clearContextOverflow, type AgentSession } from '@/shared/state/agentsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// The in-transcript "Context full" / "Out of tokens" / "Sign-in required" card, shown at the top of the
+// scroll surface when the backend flags session.context_overflow. Lifted verbatim from AgentChat's
+// render; returns null when there is no overflow so the caller can pass it unconditionally as the
+// MessageListBody header slot.
+export function ContextOverflowCard({
+  session,
+  id,
+  workflowEditId,
+  c,
+}: {
+  session: AgentSession;
+  id: string | undefined;
+  workflowEditId?: string;
+  c: ReturnType<typeof useClaudeTokens>;
+}) {
+  const dispatch = useAppDispatch();
+  if (!session.context_overflow) return null;
+  const reason = session.context_overflow.reason;
+  const isAuth = reason === 'openswarm_pro_auth_expired' || reason === 'anthropic_auth_invalid' || reason === 'auth_error';
+  const isOutOfTokens = reason === 'out_of_tokens';
+  const title = isOutOfTokens ? 'Out of tokens' : isAuth ? 'Sign-in required' : 'Context full';
+  const primaryLabel = isOutOfTokens ? 'Got it' : isAuth ? 'Open Settings' : 'Start a fresh chat';
+  // In the workflow build chat, switching models here also sets the workflow's scheduled run model, so spell that consequence out.
+  const message = isOutOfTokens && workflowEditId
+    ? `${session.context_overflow.message} Whichever model you switch to here becomes the model this workflow runs on.`
+    : session.context_overflow.message;
+  const onPrimary = () => {
+    if (isOutOfTokens) {
+      if (id) dispatch(clearContextOverflow({ sessionId: id }));
+    } else if (isAuth) {
+      dispatch(openSettingsCard({ tab: 'models' }));
+    } else {
+      const did = session.dashboard_id;
+      window.location.hash = did ? `#/dashboard/${did}` : '#/';
+    }
+  };
+  return (
+    <Box sx={{
+      mt: 1,
+      mb: 1.5,
+      p: 1.5,
+      borderRadius: 1.5,
+      border: `1px solid ${c.border.strong}`,
+      bgcolor: c.bg.secondary,
+    }}>
+      <Typography variant="body2" sx={{ color: c.text.primary, fontWeight: 500, mb: 0.5 }}>
+        {title}
+      </Typography>
+      <Typography variant="caption" sx={{ color: c.text.secondary, display: 'block', mb: 1.25 }}>
+        {message}
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <Typography
+          component="button"
+          variant="caption"
+          onClick={onPrimary}
+          sx={{
+            cursor: 'pointer',
+            border: `1px solid ${c.border.medium}`,
+            borderRadius: 1,
+            px: 1.25,
+            py: 0.5,
+            bgcolor: 'transparent',
+            color: c.text.primary,
+            '&:hover': { bgcolor: c.bg.elevated },
+          }}
+        >
+          {primaryLabel}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/TranscriptFooter.tsx b/frontend/src/app/pages/AgentChat/transcript/TranscriptFooter.tsx
new file mode 100644
index 000000000..61afe988f
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/TranscriptFooter.tsx
@@ -0,0 +1,98 @@
+import Box from '@mui/material/Box';
+import { useAppDispatch } from '@/shared/hooks';
+import { clearMcpSuggestions, type AgentSession } from '@/shared/state/agentsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type React from 'react';
+import StreamingBubble from '../bubbles/StreamingBubble';
+import WelcomeQuickReplies from '../WelcomeQuickReplies';
+import InlineSurfaceEmbeds from '../shell/InlineSurfaceEmbeds';
+import { ThinkingBubble } from '../streaming/ThinkingBubble';
+import { McpConnectOffer } from '../render/McpConnectOffer';
+import { ResumeAgentButton } from '../render/ResumeAgentButton';
+import type { useMcpActivation } from '../model/useMcpActivation';
+
+// Everything the below-the-items transcript tail needs, as one structured view model built fresh each
+// render by AgentChat (same staleness semantics as the previously-inline JSX).
+export interface TranscriptFooterVm {
+  session: AgentSession;
+  id: string | undefined;
+  c: ReturnType<typeof useClaudeTokens>;
+  mcpActivation: ReturnType<typeof useMcpActivation>;
+  isDraft: boolean;
+  welcomeGreetingDone: boolean;
+  preSendActivityLabel: string | null;
+  awaitingResponse: boolean;
+  streamingMessageId: string | null;
+  showResumeBubble: boolean;
+  isWorkflowRunSidecar: boolean;
+  readOnly: boolean | undefined;
+  fullscreenChat: boolean | undefined;
+  // The docked-surface slot when no browser tool row anchors it yet (useDockedBrowserSlot); null otherwise.
+  fallbackBrowserSlot: React.ReactNode;
+  onPickQuickReply: (prompt: string) => void;
+  onPickBuilder: (prompt: string) => void;
+  onResume: () => void;
+  onStreamGrew: () => void;
+}
+
+// The non-windowed tail of the transcript: live stream bubble, MCP connect offer, the agent's live
+// surfaces, first-run welcome chips, thinking dots, the resume pill, and the fallback dock slot. Lifted
+// verbatim from AgentChat's render; sits inside the MessageListBody footer slot, below the bottom spacer.
+export function TranscriptFooter({ vm }: { vm: TranscriptFooterVm }) {
+  const { session, id, c, mcpActivation } = vm;
+  const dispatch = useAppDispatch();
+  return (
+    <>
+      {/* overflow-anchor: none on the two elements that grow every frame
+          (live stream + thinking dots) keeps Chromium's scroll anchoring
+          from fighting our jam-to-bottom for the scroll position. The
+          committed messages above keep the default anchor, so resizing a
+          tool row while the user has scrolled up still holds their view. */}
+      {id && (
+        <Box sx={{ overflowAnchor: 'none' }}>
+          <StreamingBubble
+            sessionId={id}
+            activeBranchId={session.active_branch_id || 'main'}
+            turnLabel={session.turn_label?.label}
+            onStreamGrew={vm.onStreamGrew}
+          />
+        </Box>
+      )}
+      {/* Connect offer sits BELOW the latest reply (where the eye is), not at the top of the
+          transcript where the auto-scroll-to-bottom buries it. Suggest-only; activation is the
+          user's click through the gated MCPActivate endpoint. */}
+      {(session.mcp_suggestions && session.mcp_suggestions.length > 0) && (
+        <McpConnectOffer
+          suggestions={session.mcp_suggestions}
+          activatingId={mcpActivation.activatingId}
+          error={mcpActivation.error}
+          onActivate={(s) => mcpActivation.activate(s, session.id)}
+          onDismiss={() => id && dispatch(clearMcpSuggestions({ sessionId: id }))}
+          c={c}
+        />
+      )}
+      {/* The surfaces this agent is driving, live inside the chat: browser snapshots + built
+          apps, each one click from popping out onto the canvas. */}
+      {!vm.isDraft && id && <InlineSurfaceEmbeds c={c} sessionId={id} fullscreen={vm.fullscreenChat} />}
+      {/* First-run welcome chips: sit UNDER the streamed greeting, appear once it finishes,
+          vanish the moment the user answers. The greeting itself is a real assistant bubble. */}
+      {session.is_welcome_draft && vm.isDraft && vm.welcomeGreetingDone && !session.messages.some((m) => m.role === 'user') && (
+        <WelcomeQuickReplies
+          c={c}
+          onPick={vm.onPickQuickReply}
+          onPickBuilder={vm.onPickBuilder}
+        />
+      )}
+      {(vm.preSendActivityLabel || vm.awaitingResponse || (session.status === 'running' && !vm.streamingMessageId)) && (
+        <Box sx={{ overflowAnchor: 'none' }}>
+          <ThinkingBubble label={vm.preSendActivityLabel || session.turn_label?.label} />
+        </Box>
+      )}
+      {vm.showResumeBubble && session.status === 'stopped' && !vm.isWorkflowRunSidecar && !vm.readOnly && (
+        <ResumeAgentButton onResume={vm.onResume} c={c} />
+      )}
+      {/* Fallback dock slot for a browser that docked before any browser tool row exists (or whose row was compacted away); once a row appears the slot anchors at it instead (see browserAnchorItemId). */}
+      {vm.fallbackBrowserSlot}
+    </>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/TranscriptItem.tsx b/frontend/src/app/pages/AgentChat/transcript/TranscriptItem.tsx
new file mode 100644
index 000000000..cee96f00e
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/TranscriptItem.tsx
@@ -0,0 +1,201 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import type { AgentMessage, AgentSession } from '@/shared/state/agentsSlice';
+import type { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { openCardContextMenu, isNativeMenuTarget, type CardMenuRow } from '../../Dashboard/desktop/openCardContextMenu';
+import MessageBubble from '../bubbles/MessageBubble';
+import BurstRevealBubble from '../bubbles/BurstRevealBubble';
+import CompactionMarker from '../bubbles/CompactionMarker';
+import MessageActionBar from '../shell/MessageActionBar';
+import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
+import ToolGroupBubble, { type RenderItem, isToolGroup, isToolPair } from '../tool-bubbles/ToolGroupBubble';
+import ToolUiBubble from '../tool-ui/ToolUiBubble';
+import AskUiBubble from '../tool-ui/AskUiBubble';
+import { isShowUiPair, isAskUiPair, isDeadAskResult } from '../tool-ui/showUiPayload';
+
+// Everything one transcript item's inner content needs, as a single structured view model built fresh
+// each render by AgentChat (same staleness semantics as the previously-inline closures). The
+// data-window-item-id measurement wrapper around this content belongs to MessageListBody (mechanism).
+export interface TranscriptItemVm {
+  session: AgentSession;
+  id: string | undefined;
+  c: ReturnType<typeof useClaudeTokens>;
+  renderItems: RenderItem[];
+  sessionRunning: boolean;
+  awaitingResponse: boolean;
+  justStreamedId: string | null;
+  // Only the LATEST unanswered question is live (the backend parks one component); older pending asks render as quiet rows.
+  lastPendingAskCallId: string | null;
+  // Burst-reveal history set (useBurstRevealTracking): null right after open/hop, seeded by the first item render.
+  seenMessageIds: React.MutableRefObject<Set<string> | null>;
+  editingMessageId: string | null;
+  lastAssistantIdsInTurn: Set<string>;
+  branchNavLocked: boolean;
+  viewportHeight: number;
+  viewportWidth: number;
+  scrollRoot: HTMLDivElement | null;
+  getSiblingBranches: (messageId: string) => string[];
+  onSaveEdit: (messageId: string, newContent: string) => void;
+  onCancelEdit: () => void;
+  onStartEdit: (messageId: string) => void;
+  onRegenerate: (msg: AgentMessage) => void;
+  onBranch: (messageId: string) => void;
+  onSwitchBranch: (branchId: string) => void;
+  onStreamGrew: () => void;
+}
+
+// One transcript item: a tool group, a tool pair (plain, ShowUI widget, or AskUI form), or a message
+// bubble with its action bar, plus the compaction chip when this item is the compaction anchor. Lifted
+// verbatim from AgentChat's render.
+export function TranscriptItem({ item, vm, isLastVisibleItem }: { item: RenderItem; vm: TranscriptItemVm; isLastVisibleItem: boolean }) {
+  const { session } = vm;
+  const isCompactionAnchor = !!session.compacted_through_msg_id && item.id === session.compacted_through_msg_id;
+  const compactionChip = isCompactionAnchor ? (
+    <CompactionMarker
+      key={`compaction-${item.id}`}
+      collapsedCount={
+        Math.max(0, vm.renderItems.findIndex((it) => it.id === session.compacted_through_msg_id) + 1)
+      }
+    />
+  ) : null;
+
+  if (isToolGroup(item)) {
+    const groupMeta = session.tool_group_meta?.[item.id];
+    // Only the newest tool row can glow as running; older groups on a live turn rest quiet.
+    return (
+      <>
+        <ToolGroupBubble group={item} isSessionRunning={vm.sessionRunning && isLastVisibleItem} meta={groupMeta} sessionId={session.id} />
+        {compactionChip}
+      </>
+    );
+  }
+  if (isToolPair(item)) {
+    const isPending = item.result === null && vm.sessionRunning;
+    if (isAskUiPair(item)) {
+      // A dead ask (timeout prose or a validation bounce) is not answerable; rendering it full-size is the "two identical cards, only one works" dupe (ENG-232).
+      // Likewise an older pending ask when a newer one is live: a quiet row instead of a second clickable form.
+      const quiet = isDeadAskResult(item) || (item.result === null && vm.lastPendingAskCallId !== null && item.call.id !== vm.lastPendingAskCallId);
+      return (
+        <>
+          {quiet
+            ? <ToolCallBubble call={item.call} result={item.result} isPending={false} sessionId={session.id} suppressReveal />
+            : <AskUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === vm.justStreamedId} />}
+          {compactionChip}
+        </>
+      );
+    }
+    if (isShowUiPair(item)) {
+      return (
+        <>
+          <ToolUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === vm.justStreamedId} sessionRunning={vm.sessionRunning} />
+          {compactionChip}
+        </>
+      );
+    }
+    return (
+      <>
+        <ToolCallBubble call={item.call} result={item.result} isPending={isPending} sessionId={session.id} suppressReveal={item.call.id === vm.justStreamedId} />
+        {compactionChip}
+      </>
+    );
+  }
+  const msg = item;
+  const isEditing = vm.editingMessageId === msg.id;
+  // First pass after open/hop seeds the set; later unseen assistant ids arrived live.
+  if (vm.seenMessageIds.current === null) {
+    vm.seenMessageIds.current = new Set(vm.renderItems.map((it) => it.id));
+  }
+  const burstAnimate =
+    msg.role === 'assistant' &&
+    typeof msg.content === 'string' &&
+    !isEditing &&
+    !vm.seenMessageIds.current.has(msg.id) &&
+    msg.id !== vm.justStreamedId &&
+    (vm.sessionRunning || vm.awaitingResponse);
+  vm.seenMessageIds.current.add(msg.id);
+  const siblings = vm.getSiblingBranches(msg.id);
+  const hasBranches = siblings.length > 0;
+  const currentBranchIdx = hasBranches
+    ? siblings.indexOf(session.active_branch_id || 'main')
+    : 0;
+  const rawText = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
+  const canRegenerate = msg.role === 'assistant' && vm.lastAssistantIdsInTurn.has(msg.id);
+
+  return (
+    <Box
+      onContextMenu={(e: React.MouseEvent) => {
+        // ENG-148: the hover action bar's verbs, reachable by right-click on any message; typing surfaces (the edit box) keep the OS menu.
+        if (isEditing || isNativeMenuTarget(e)) return;
+        const selection = window.getSelection()?.toString() ?? '';
+        const items: CardMenuRow[] = [];
+        if (selection) items.push({ label: 'Copy selection', onClick: () => { void navigator.clipboard.writeText(selection); } });
+        items.push({ label: 'Copy message', onClick: () => { void navigator.clipboard.writeText(rawText); } });
+        if (msg.role === 'user') items.push({ label: 'Edit message', onClick: () => vm.onStartEdit(msg.id) });
+        if (canRegenerate) {
+          items.push({ kind: 'separator' });
+          items.push({ label: 'Regenerate', onClick: () => vm.onRegenerate(msg) });
+          items.push({ label: 'Branch chat', onClick: () => vm.onBranch(msg.id) });
+        }
+        openCardContextMenu(e, { items });
+      }}
+      sx={{
+        '&:hover .msg-actions': { opacity: 1 },
+        // Cheap virtualization: tells the browser to skip paint + layout for bubbles outside the scroll viewport. `contain-intrinsic-size: auto N` reserves a placeholder height so the scrollbar doesn't jump, and `auto` lets the browser remember the actual height after first render. Works alongside the container's overflow-anchor. Chrome 85+ (Electron covers this).
+        contentVisibility: 'auto',
+        containIntrinsicSize: 'auto 120px',
+      }}
+    >
+      {msg.role === 'assistant' && typeof msg.content === 'string' && !isEditing ? (
+        <BurstRevealBubble
+          message={msg}
+          animate={burstAnimate}
+          onGrew={vm.onStreamGrew}
+          viewportHeight={vm.viewportHeight}
+          viewportWidth={vm.viewportWidth}
+          scrollRoot={vm.scrollRoot}
+        />
+      ) : (
+        <MessageBubble
+          message={msg}
+          editing={isEditing}
+          onSaveEdit={vm.onSaveEdit}
+          onCancelEdit={vm.onCancelEdit}
+          viewportHeight={vm.viewportHeight}
+          viewportWidth={vm.viewportWidth}
+          scrollRoot={vm.scrollRoot}
+        />
+      )}
+      {!isEditing && (msg.role === 'user' || canRegenerate) && (
+        <MessageActionBar
+          role={msg.role as 'user' | 'assistant'}
+          sessionId={session.id}
+          messageId={msg.id}
+          onCopy={() => navigator.clipboard.writeText(rawText)}
+          onEdit={msg.role === 'user' ? () => vm.onStartEdit(msg.id) : undefined}
+          onRegenerate={msg.role === 'assistant' ? () => vm.onRegenerate(msg) : undefined}
+          onBranch={msg.role === 'assistant' ? () => vm.onBranch(msg.id) : undefined}
+          branchNav={
+            hasBranches
+              ? {
+                  currentIndex: Math.max(0, currentBranchIdx),
+                  totalBranches: siblings.length,
+                  disabled: vm.branchNavLocked,
+                  onPrevious: () => {
+                    if (vm.branchNavLocked) return;
+                    const prevBranch = siblings[Math.max(0, currentBranchIdx - 1)];
+                    if (prevBranch && vm.id) vm.onSwitchBranch(prevBranch);
+                  },
+                  onNext: () => {
+                    if (vm.branchNavLocked) return;
+                    const nextBranch = siblings[Math.min(siblings.length - 1, currentBranchIdx + 1)];
+                    if (nextBranch && vm.id) vm.onSwitchBranch(nextBranch);
+                  },
+                }
+              : undefined
+          }
+        />
+      )}
+      {compactionChip}
+    </Box>
+  );
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/buildRenderItems.ts b/frontend/src/app/pages/AgentChat/transcript/buildRenderItems.ts
new file mode 100644
index 000000000..334e8b12e
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/buildRenderItems.ts
@@ -0,0 +1,203 @@
+import type { AgentMessage } from '@/shared/state/agentsSlice';
+import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
+import type { RenderItem, ToolGroup, ToolGroupEntry } from '../tool-bubbles/ToolGroupBubble';
+import { isShowUiPair, isAskUiPair, callToolUseId, resultToolUseId } from '../tool-ui/showUiPayload';
+import { isNarration } from '../parsing/isNarration';
+
+// Live-updating cards: repeated ShowUI calls with the SAME component+props.id are one card that
+// UPDATES IN PLACE at its first position (progress advances, data refreshes), never a stack of
+// stale snapshots. Pre-scan maps each id key to its first slot and its latest call+result.
+function indexShowUiCards(messages: AgentMessage[]) {
+  const firstCallIdByKey = new Map<string, string>();
+  const latestByKey = new Map<string, { call: AgentMessage; result: AgentMessage | null }>();
+  const keyByCallId = new Map<string, string>();
+  for (let s = 0; s < messages.length; s++) {
+    const m = messages[s];
+    const mc = m.content;
+    if (m.role !== 'tool_call' || typeof mc !== 'object' || !/(^|__)ShowUI$/.test(String(mc?.tool || ''))) continue;
+    const input = mc?.input as { component?: unknown; props?: { id?: unknown } } | undefined;
+    const compId = input?.props?.id;
+    if (!input?.component || typeof compId !== 'string' || !compId) continue;
+    const key = `${input.component}:${compId}`;
+    keyByCallId.set(m.id, key);
+    if (!firstCallIdByKey.has(key)) firstCallIdByKey.set(key, m.id);
+    const next = messages[s + 1];
+    latestByKey.set(key, { call: m, result: next && next.role === 'tool_result' ? next : null });
+  }
+  return { firstCallIdByKey, latestByKey, keyByCallId };
+}
+
+// Index pairing mispairs any parallel batch (first-completing result lands on the first call, killing a live AskUI card, ENG-232); pair by tool_use_id when the result carries one, index only for legacy unkeyed results.
+function pairCalls(allCalls: AgentMessage[], results: AgentMessage[]): ToolPair[] {
+  const resultById = new Map<string, AgentMessage>();
+  for (const r of results) {
+    const rid = resultToolUseId(r);
+    if (rid && !resultById.has(rid)) resultById.set(rid, r);
+  }
+  return allCalls.map((call, idx) => {
+    const byId = resultById.get(callToolUseId(call));
+    const indexed = results[idx] || null;
+    return {
+      type: 'tool_pair' as const,
+      id: `pair-${call.id}`,
+      call,
+      result: byId ?? (indexed && !resultToolUseId(indexed) ? indexed : null),
+    };
+  });
+}
+
+interface NoteMark { afterCall: number; msg: AgentMessage }
+
+// Folded narration goes back at its original position among the visible pairs.
+function foldNotes(allPairs: ToolPair[], noteMarks: NoteMark[]): ToolGroupEntry[] | undefined {
+  if (noteMarks.length === 0) return undefined;
+  const entries: ToolGroupEntry[] = [];
+  let noteIdx = 0;
+  const noteText = (m: AgentMessage) => (typeof m.content === 'string' ? m.content : '');
+  allPairs.forEach((pair, idx) => {
+    while (noteIdx < noteMarks.length && noteMarks[noteIdx].afterCall <= idx) {
+      entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
+      noteIdx++;
+    }
+    if (!isShowUiPair(pair) && !isAskUiPair(pair)) entries.push({ kind: 'pair', pair });
+  });
+  while (noteIdx < noteMarks.length) {
+    entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
+    noteIdx++;
+  }
+  return entries;
+}
+
+function groupLabel(calls: AgentMessage[]): string {
+  const toolNames = new Set(calls.map((m) => (typeof m.content === 'object' ? m.content.tool : '')));
+  return toolNames.size === 1 ? calls[0].content?.tool || 'Tool calls' : `${calls.length} tool calls`;
+}
+
+// Groups the active-branch messages into the transcript's render items: tool phases fold into groups
+// (with narration absorbed on a finished session), ShowUI/AskUI pairs surface as inline components with
+// in-place updates, plain messages pass through. Pure; the hook memoizes it. Lifted from AgentChat.
+export function buildRenderItems(activeBranchMessages: AgentMessage[], sessionRunning: boolean): RenderItem[] {
+  const items: RenderItem[] = [];
+  let i = 0;
+  const { firstCallIdByKey, latestByKey, keyByCallId } = indexShowUiCards(activeBranchMessages);
+  // Narration that led INTO a tool phase; folds into that phase's group on a finished session.
+  let leadNotes: AgentMessage[] = [];
+  while (i < activeBranchMessages.length) {
+    const msg = activeBranchMessages[i];
+    if (msg.role === 'tool_call' || msg.role === 'tool_result') {
+      const group: AgentMessage[] = [];
+      // On a finished session the whole tool PHASE folds into one quiet row: short narration
+      // LEADING INTO or BETWEEN tool runs is absorbed (readable on expand), only the final
+      // answer stays out. While running, narration streams visibly, so the phase never folds live.
+      const noteMarks: NoteMark[] = leadNotes.map((m) => ({ afterCall: 0, msg: m }));
+      leadNotes = [];
+      let callsSoFar = 0;
+      while (i < activeBranchMessages.length) {
+        const m = activeBranchMessages[i];
+        if (m.role === 'tool_call' || m.role === 'tool_result') {
+          group.push(m);
+          if (m.role === 'tool_call') callsSoFar++;
+          i++;
+          continue;
+        }
+        if (!sessionRunning && m.role === 'assistant') {
+          let j = i;
+          while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
+          const next = activeBranchMessages[j];
+          const absorbable = activeBranchMessages.slice(i, j).every((a) => isNarration(a.content));
+          // A long or structured message is the answer, not narration. Absorbing it hides the whole deliverable in a grey tool row and strips its markdown, which is worse than showing one redundant line.
+          if (next && absorbable && (next.role === 'tool_call' || next.role === 'tool_result')) {
+            for (let k = i; k < j; k++) {
+              if (!activeBranchMessages[k].hidden) noteMarks.push({ afterCall: callsSoFar, msg: activeBranchMessages[k] });
+            }
+            i = j;
+            continue;
+          }
+        }
+        break;
+      }
+
+      const allCalls = group.filter((m) => m.role === 'tool_call');
+      const results = group.filter((m) => m.role === 'tool_result');
+      const allPairs = pairCalls(allCalls, results);
+
+      // ShowUI/AskUI calls render as inline components, never buried inside a collapsed group.
+      // They typically cap a run of work, so the quiet group row stays above the widget.
+      const showUiPairs = allPairs.filter((p) => isShowUiPair(p) || isAskUiPair(p));
+      const pairs = allPairs.filter((p) => !isShowUiPair(p) && !isAskUiPair(p));
+      const calls = pairs.map((p) => p.call);
+      const groupEntries = foldNotes(allPairs, noteMarks);
+
+      const mcpServers = new Set(
+        calls.map((m) => {
+          const tool = typeof m.content === 'object' ? m.content.tool || '' : '';
+          const match = tool.match(/^mcp__([^_]+(?:-[^_]+)*)__/);
+          return match ? match[1] : '';
+        }).filter(Boolean)
+      );
+      // Only wrap MCP calls in a group when there's more than one; a lone call would just double up the group header on top of its own (e.g. "Browser Navigation 1/1" over "Opened a browser"), so render it bare instead.
+      const allSameMcp = mcpServers.size === 1 && pairs.length > 1;
+
+      if (allSameMcp) {
+        const mcpServer = [...mcpServers][0];
+        items.push({
+          type: 'tool_group',
+          id: `group-${group[0].id}`,
+          pairs,
+          label: groupLabel(calls),
+          callCount: calls.length,
+          mcpServer,
+          entries: groupEntries,
+        } satisfies ToolGroup);
+      } else if (sessionRunning && pairs.length <= 2 && !groupEntries) {
+        // Live turns keep bare rows for streaming detail; finished transcripts always rest as the quiet group row.
+        items.push(...pairs);
+      } else if (pairs.length > 0) {
+        items.push({
+          type: 'tool_group',
+          id: `group-${group[0].id}`,
+          pairs,
+          label: groupLabel(calls),
+          callCount: calls.length,
+          entries: groupEntries,
+        } satisfies ToolGroup);
+      } else if (noteMarks.length > 0) {
+        // Phase held only ShowUI/AskUI pairs: narration has no group to fold into, keep it visible.
+        for (const nm of noteMarks) items.push(nm.msg);
+      }
+      for (const p of showUiPairs) {
+        const key = keyByCallId.get(p.call.id);
+        if (!key || isAskUiPair(p)) {
+          items.push(p);
+          continue;
+        }
+        // Later updates render nowhere themselves; the first slot always shows the latest call
+        // under a STABLE key so React updates the mounted component instead of remounting it.
+        if (p.call.id !== firstCallIdByKey.get(key)) continue;
+        const latest = latestByKey.get(key);
+        items.push({
+          type: 'tool_pair' as const,
+          id: `showui-${key}`,
+          call: latest ? latest.call : p.call,
+          result: latest ? latest.result : p.result,
+        });
+      }
+    } else {
+      if (!sessionRunning && msg.role === 'assistant') {
+        let j = i;
+        while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
+        const next = activeBranchMessages[j];
+        if (next && (next.role === 'tool_call' || next.role === 'tool_result')) {
+          leadNotes = activeBranchMessages.slice(i, j).filter((m) => !m.hidden);
+          i = j;
+          continue;
+        }
+      }
+      if (!msg.hidden) {
+        items.push(msg);
+      }
+      i++;
+    }
+  }
+  return items;
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/useBranchActions.ts b/frontend/src/app/pages/AgentChat/transcript/useBranchActions.ts
new file mode 100644
index 000000000..7faf921f9
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/useBranchActions.ts
@@ -0,0 +1,83 @@
+import { useCallback, useState } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import {
+  editMessage,
+  switchBranch,
+  duplicateSession,
+  setActiveSession,
+  type AgentMessage,
+  type AgentSession,
+} from '@/shared/state/agentsSlice';
+
+// Message edit / regenerate / branch actions (AGENTCHAT_SPLIT_PLAN follow-up): the editing-message
+// state and every handler the transcript action bar fires. Lifted verbatim from AgentChat.
+export function useBranchActions({
+  id,
+  session,
+  activeBranchMessages,
+  onBranch,
+}: {
+  id: string | undefined;
+  session: AgentSession | undefined;
+  activeBranchMessages: AgentMessage[];
+  onBranch?: (newSessionId: string) => void;
+}) {
+  const dispatch = useAppDispatch();
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+
+  const handleSaveEdit = useCallback(
+    (messageId: string, newContent: string) => {
+      if (!id) return;
+      dispatch(editMessage({ sessionId: id, messageId, content: newContent }));
+      setEditingMessageId(null);
+    },
+    [id, dispatch]
+  );
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingMessageId(null);
+  }, []);
+
+  const handleRegenerate = useCallback(
+    (assistantMsg: AgentMessage) => {
+      if (!id) return;
+      const idx = activeBranchMessages.findIndex((m) => m.id === assistantMsg.id);
+      for (let i = idx - 1; i >= 0; i--) {
+        if (activeBranchMessages[i].role === 'user') {
+          const userMsg = activeBranchMessages[i];
+          const content = typeof userMsg.content === 'string' ? userMsg.content : JSON.stringify(userMsg.content);
+          dispatch(editMessage({ sessionId: id, messageId: userMsg.id, content }));
+          break;
+        }
+      }
+    },
+    [id, activeBranchMessages, dispatch]
+  );
+
+  const handleBranchChat = useCallback(async (upToMessageId: string) => {
+    if (!id) return;
+    const dashId = session?.dashboard_id;
+    const action = await dispatch(duplicateSession({ sessionId: id, dashboardId: dashId, upToMessageId }));
+    if (duplicateSession.fulfilled.match(action)) {
+      if (onBranch) {
+        onBranch(action.payload.id);
+      } else {
+        dispatch(setActiveSession(action.payload.id));
+      }
+    }
+  }, [id, dispatch, onBranch, session?.dashboard_id]);
+
+  const handleSwitchBranch = useCallback((branchId: string) => {
+    if (id) dispatch(switchBranch({ sessionId: id, branchId }));
+  }, [id, dispatch]);
+
+  return {
+    editingMessageId,
+    setEditingMessageId,
+    handleSaveEdit,
+    handleCancelEdit,
+    handleRegenerate,
+    handleBranchChat,
+    handleSwitchBranch,
+  };
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/useToolGroupMeta.ts b/frontend/src/app/pages/AgentChat/transcript/useToolGroupMeta.ts
new file mode 100644
index 000000000..b00587bf6
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/useToolGroupMeta.ts
@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import { generateGroupMeta, type AgentSession } from '@/shared/state/agentsSlice';
+import { parseMcpToolName, getMcpInputSummary } from '@/shared/mcpToolMeta';
+import { type RenderItem, type ToolGroup, isToolGroup } from '../tool-bubbles/ToolGroupBubble';
+
+// Tool-group label generation (AGENTCHAT_SPLIT_PLAN follow-up): request a friendly group label once per
+// group as it appears, then refine it once when every call in the group has a result. The requested/
+// refined sets are refs so re-renders never duplicate a request. Lifted verbatim from AgentChat.
+export function useToolGroupMeta(
+  id: string | undefined,
+  isDraft: boolean,
+  renderItems: RenderItem[],
+  toolGroupMeta: AgentSession['tool_group_meta'] | undefined,
+) {
+  const dispatch = useAppDispatch();
+  const groupMetaRequestedRef = useRef<Set<string>>(new Set());
+  const groupMetaRefinedRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!id || isDraft) return;
+    const toolGroups = renderItems.filter(isToolGroup) as ToolGroup[];
+    const meta = toolGroupMeta ?? {};
+
+    for (const group of toolGroups) {
+      const allDone = group.pairs.every((p) => p.result !== null);
+
+      if (!groupMetaRequestedRef.current.has(group.id) && !meta[group.id]) {
+        groupMetaRequestedRef.current.add(group.id);
+        const toolCalls = group.pairs.map((p) => {
+          const c = p.call.content;
+          const tool = typeof c === 'object' ? c.tool || '' : '';
+          const input = typeof c === 'object' ? c.input : '';
+          const mcp = parseMcpToolName(tool);
+          const friendly = mcp.isMcp ? getMcpInputSummary(input, mcp.action, mcp.serverSlug) : '';
+          const summary = friendly || (typeof input === 'string' ? input.slice(0, 120) : JSON.stringify(input).slice(0, 120));
+          return { tool, input_summary: summary };
+        });
+        dispatch(generateGroupMeta({ sessionId: id, groupId: group.id, toolCalls }));
+      }
+
+      if (allDone && meta[group.id] && !meta[group.id].is_refined && !groupMetaRefinedRef.current.has(group.id)) {
+        groupMetaRefinedRef.current.add(group.id);
+        const toolCalls = group.pairs.map((p) => {
+          const c = p.call.content;
+          const tool = typeof c === 'object' ? c.tool || '' : '';
+          const input = typeof c === 'object' ? c.input : '';
+          const mcp = parseMcpToolName(tool);
+          const friendly = mcp.isMcp ? getMcpInputSummary(input, mcp.action, mcp.serverSlug) : '';
+          const summary = friendly || (typeof input === 'string' ? input.slice(0, 120) : JSON.stringify(input).slice(0, 120));
+          return { tool, input_summary: summary };
+        });
+        const resultsSummary = group.pairs
+          .filter((p) => p.result)
+          .map((p) => {
+            const rc = p.result!.content;
+            const text = typeof rc === 'string' ? rc : typeof rc === 'object' && rc?.text ? rc.text : JSON.stringify(rc);
+            return text.slice(0, 150);
+          });
+        dispatch(generateGroupMeta({ sessionId: id, groupId: group.id, toolCalls, resultsSummary, isRefinement: true }));
+      }
+    }
+  }, [renderItems, id, isDraft, toolGroupMeta, dispatch]);
+}
diff --git a/frontend/src/app/pages/AgentChat/transcript/useTranscriptDerivations.ts b/frontend/src/app/pages/AgentChat/transcript/useTranscriptDerivations.ts
new file mode 100644
index 000000000..5dea3432e
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/transcript/useTranscriptDerivations.ts
@@ -0,0 +1,165 @@
+import { useCallback, useMemo } from 'react';
+import { useAppSelector } from '@/shared/hooks';
+import type { AgentMessage, AgentSession } from '@/shared/state/agentsSlice';
+import { type RenderItem, isToolGroup, isToolPair } from '../tool-bubbles/ToolGroupBubble';
+import { extractPendingAskUi } from '../tool-ui/showUiPayload';
+import { stringifyContent } from '../windowing/messageWindow';
+import { buildRenderItems } from './buildRenderItems';
+
+const CONTEXT_WINDOWS: Record<string, number> = {
+  'opus-4-8': 1_000_000,
+  'opus-4-7': 1_000_000,
+  opus: 1_000_000,
+  sonnet: 1_000_000,
+  haiku: 200_000,
+};
+
+// Pure derivations from the session transcript (AGENTCHAT_SPLIT_PLAN follow-up): the active-branch
+// message slice, the grouped render items the windowing layer consumes (buildRenderItems), the per-turn
+// last-assistant set, the latest live AskUI id, the context gauge estimate, and the sibling-branch
+// resolver. All memos/callbacks, no effects — lifted verbatim from AgentChat.
+export function useTranscriptDerivations({
+  session,
+  model,
+  streamingMessageId,
+  sessionRunning,
+}: {
+  session: AgentSession | undefined;
+  model: string;
+  streamingMessageId: string | null;
+  sessionRunning: boolean;
+}) {
+  const modelsByProvider = useAppSelector((state) => state.models.byProvider);
+
+  const activeBranchMessages = useMemo(() => {
+    if (!session) return [];
+    const branchId = session.active_branch_id || 'main';
+    const branch = session.branches?.[branchId];
+
+    if (!branch || !branch.fork_point_message_id) {
+      return session.messages.filter((m) => m.branch_id === 'main' || m.branch_id === branchId);
+    }
+
+    const segments: Array<{ branchId: string; upToMessageId?: string }> = [];
+    let cur = branch;
+    let curId = branchId;
+    while (cur && cur.fork_point_message_id) {
+      segments.unshift({ branchId: curId, upToMessageId: cur.fork_point_message_id });
+      curId = cur.parent_branch_id || 'main';
+      cur = session.branches?.[curId];
+    }
+    segments.unshift({ branchId: curId });
+
+    const result: typeof session.messages = [];
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const nextForkMsgId = seg.upToMessageId;
+      if (nextForkMsgId) {
+        const forkIdx = session.messages.findIndex((m) => m.id === nextForkMsgId);
+        const pre = session.messages
+          .slice(0, forkIdx)
+          .filter((m) => m.branch_id === seg.branchId);
+        result.push(...pre);
+      } else if (i < segments.length - 1) {
+        const nextFork = segments[i + 1].upToMessageId;
+        const forkIdx = nextFork
+          ? session.messages.findIndex((m) => m.id === nextFork)
+          : session.messages.length;
+        result.push(
+          ...session.messages.slice(0, forkIdx).filter((m) => m.branch_id === seg.branchId)
+        );
+      } else {
+        result.push(...session.messages.filter((m) => m.branch_id === seg.branchId));
+      }
+    }
+    const leafMsgs = session.messages.filter((m) => m.branch_id === branchId);
+    if (!result.some((m) => m.branch_id === branchId)) {
+      result.push(...leafMsgs);
+    }
+    return result;
+  }, [session?.messages, session?.active_branch_id, session?.branches]);
+
+  const contextEstimate = useMemo(() => {
+    // Prefer the live API-reported input token count once we have one (session.tokens.input includes the full request: messages + system + tool defs + cached prefix). That number is authoritative because Anthropic counts it against the context window. Before the first turn completes, fall back to a char/4 estimate of visible message content as a rough pre-send hint.
+    let limit = 0;
+    for (const ms of Object.values(modelsByProvider)) {
+      const hit = ms.find((m) => m.value === model);
+      if (hit?.context_window) { limit = hit.context_window; break; }
+    }
+    if (!limit) limit = (session?.context_window) || CONTEXT_WINDOWS[model] || 200_000;
+    const liveInput = session?.tokens?.input ?? 0;
+    if (liveInput > 0) {
+      return { used: liveInput, limit };
+    }
+    let totalChars = 0;
+    if (session?.system_prompt) totalChars += session.system_prompt.length;
+    for (const msg of activeBranchMessages) {
+      totalChars += stringifyContent(msg.content).length;
+    }
+    const used = Math.round(totalChars / 4);
+    return { used, limit };
+    // Streaming content's contribution to the context estimate is no longer included here: we'd have to subscribe to the streaming text and re-run this sum on every painted character, defeating the whole point of isolating AgentChat from delta updates. The header gauge will catch up when stream_end commits the message.
+  }, [activeBranchMessages, session?.system_prompt, session?.tokens?.input, session?.context_window, streamingMessageId, model, modelsByProvider]);
+
+  const renderItems: RenderItem[] = useMemo(
+    () => buildRenderItems(activeBranchMessages, sessionRunning),
+    [activeBranchMessages, sessionRunning],
+  );
+
+  const lastPendingAskCallId = useMemo(
+    () => extractPendingAskUi(session?.messages || [])?.call.id ?? null,
+    [session?.messages],
+  );
+
+  const lastAssistantIdsInTurn = useMemo(() => {
+    const ids = new Set<string>();
+    let lastAssistantId: string | null = null;
+    for (const item of renderItems) {
+      if (!isToolGroup(item) && !isToolPair(item)) {
+        const msg = item as AgentMessage;
+        if (msg.role === 'assistant') {
+          lastAssistantId = msg.id;
+        } else if (msg.role === 'user') {
+          if (lastAssistantId) ids.add(lastAssistantId);
+          lastAssistantId = null;
+        }
+      }
+    }
+    if (lastAssistantId) ids.add(lastAssistantId);
+    return ids;
+  }, [renderItems]);
+
+  const getSiblingBranches = useCallback(
+    (messageId: string): string[] => {
+      if (!session?.branches) return [];
+
+      const directForks = Object.values(session.branches)
+        .filter((b) => b.fork_point_message_id === messageId)
+        .map((b) => b.id);
+      if (directForks.length > 0) {
+        const originalMsg = session.messages.find((m) => m.id === messageId);
+        const parentBranchId = originalMsg?.branch_id || 'main';
+        return [parentBranchId, ...directForks];
+      }
+
+      const msg = session.messages.find((m) => m.id === messageId);
+      if (!msg || msg.role !== 'user') return [];
+      const msgBranch = session.branches[msg.branch_id];
+      if (!msgBranch?.fork_point_message_id) return [];
+      const branchUserMsgs = session.messages.filter(
+        (m) => m.branch_id === msg.branch_id && m.role === 'user'
+      );
+      if (branchUserMsgs.length === 0 || branchUserMsgs[0].id !== messageId) return [];
+
+      const forkPointId = msgBranch.fork_point_message_id;
+      const siblingBranches = Object.values(session.branches)
+        .filter((b) => b.fork_point_message_id === forkPointId)
+        .map((b) => b.id);
+      const parentBranchId = msgBranch.parent_branch_id || 'main';
+      return [parentBranchId, ...siblingBranches];
+    },
+    [session?.branches, session?.messages]
+  );
+
+  return { activeBranchMessages, renderItems, lastAssistantIdsInTurn, lastPendingAskCallId, contextEstimate, getSiblingBranches };
+}
diff --git a/frontend/src/app/pages/AgentChat/windowing/messageWindow.test.ts b/frontend/src/app/pages/AgentChat/windowing/messageWindow.test.ts
new file mode 100644
index 000000000..30c0cdbee
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/windowing/messageWindow.test.ts
@@ -0,0 +1,89 @@
+// Step-1 gate (AGENTCHAT_SPLIT_PLAN §6): pins the pure window math before any stateful extraction.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  MIN_WINDOW_BUFFER_ITEMS,
+  RENDER_ITEM_ESTIMATED_HEIGHT,
+  WINDOW_BUFFER_SCREENS_PER_SIDE,
+  computeDesiredWindow,
+  estimateItemHeight,
+  initialSeedItems,
+  stringifyContent,
+} from './messageWindow';
+import type { RenderItem } from '../tool-bubbles/ToolGroupBubble';
+
+const uniform = (h: number) => () => h;
+
+test('initialSeedItems floors at the buffer minimum for tiny viewports', () => {
+  assert.equal(initialSeedItems(0), MIN_WINDOW_BUFFER_ITEMS);
+  assert.equal(initialSeedItems(1), MIN_WINDOW_BUFFER_ITEMS);
+});
+
+test('initialSeedItems seeds ONE screen (plus a quarter) at the shared row estimate, not the full buffer band', () => {
+  // First paint mounts the minimum that fills the viewport; the post-settle recompute widens to the pixel band.
+  const viewport = 1000;
+  const expected = Math.ceil((1.25 * viewport) / RENDER_ITEM_ESTIMATED_HEIGHT);
+  assert.equal(initialSeedItems(viewport), expected);
+  assert.ok(expected < Math.ceil(((1 + WINDOW_BUFFER_SCREENS_PER_SIDE) * viewport) / RENDER_ITEM_ESTIMATED_HEIGHT));
+});
+
+test('computeDesiredWindow returns the empty window for an empty transcript', () => {
+  assert.deepEqual(computeDesiredWindow(0, 500, 0, uniform(100), 1500), { start: 0, end: 0 });
+});
+
+test('computeDesiredWindow mounts everything when the keep band covers the transcript', () => {
+  assert.deepEqual(computeDesiredWindow(0, 5000, 20, uniform(100), 1500), { start: 0, end: 20 });
+});
+
+test('computeDesiredWindow slices a pixel band around the viewport for a mid-scroll position', () => {
+  // keepTop=500, keepBottom=4000 over 100px rows: first bottom>500 is index 5; last top<4000 is index 39.
+  assert.deepEqual(computeDesiredWindow(2000, 500, 50, uniform(100), 1500), { start: 5, end: 40 });
+});
+
+test('computeDesiredWindow buffer is pixel-based, so tall items shrink the mounted count', () => {
+  const tall = computeDesiredWindow(2000, 500, 50, uniform(500), 1500);
+  const short = computeDesiredWindow(2000, 500, 50, uniform(100), 1500);
+  assert.ok(tall.end - tall.start < short.end - short.start);
+});
+
+test('computeDesiredWindow reaches the item-count floor by pulling start back mid-transcript', () => {
+  // keepTop=4000/keepBottom=4010 over 200px rows selects {20,21}; the floor pulls start back to 15.
+  assert.deepEqual(computeDesiredWindow(4000, 10, 50, uniform(200), 0), { start: 15, end: 21 });
+});
+
+test('computeDesiredWindow floor is start-pullback only: near the top the window stays band-covering but smaller', () => {
+  // The clamp never extends end forward, so at the transcript top {0,3} (600px mounted) is the contract.
+  assert.deepEqual(computeDesiredWindow(400, 10, 50, uniform(200), 0), { start: 0, end: 3 });
+});
+
+test('computeDesiredWindow clamps a past-the-end scroll to a floored tail window', () => {
+  // Content is 100px total; scrollTop far beyond it must not strand an empty window.
+  assert.deepEqual(computeDesiredWindow(1000, 100, 10, uniform(10), 0), { start: 4, end: 10 });
+});
+
+test('stringifyContent passes strings through, empties null, serializes objects', () => {
+  assert.equal(stringifyContent('hi'), 'hi');
+  assert.equal(stringifyContent(null), '');
+  assert.equal(stringifyContent(undefined), '');
+  assert.equal(stringifyContent({ a: 1 }), '{"a":1}');
+});
+
+test('estimateItemHeight uses the collapsed fallback for tool rows', () => {
+  const group = { type: 'tool_group' } as unknown as RenderItem;
+  const pair = { type: 'tool_pair' } as unknown as RenderItem;
+  assert.equal(estimateItemHeight(group, 800), 44);
+  assert.equal(estimateItemHeight(pair, 800), 44);
+});
+
+test('estimateItemHeight uses the small flat estimate for thinking/system rows', () => {
+  const thinking = { role: 'thinking', content: 'x' } as unknown as RenderItem;
+  const system = { role: 'system', content: 'x' } as unknown as RenderItem;
+  assert.equal(estimateItemHeight(thinking, 800), 60);
+  assert.equal(estimateItemHeight(system, 800), 60);
+});
+
+test('estimateItemHeight scales message bubbles with content length', () => {
+  const short = { role: 'assistant', content: 'hi' } as unknown as RenderItem;
+  const long = { role: 'assistant', content: 'word '.repeat(500) } as unknown as RenderItem;
+  assert.ok(estimateItemHeight(long, 800) > estimateItemHeight(short, 800));
+});
diff --git a/frontend/src/app/pages/AgentChat/windowing/messageWindow.ts b/frontend/src/app/pages/AgentChat/windowing/messageWindow.ts
new file mode 100644
index 000000000..941966e04
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/windowing/messageWindow.ts
@@ -0,0 +1,71 @@
+// Pure window math for the virtualized transcript (AGENTCHAT_SPLIT_PLAN step 1) — no React, no DOM.
+import type { AgentMessage } from '@/shared/state/agentsSlice';
+import { estimateRenderedTextHeight } from '../bubbles/markdownMeasure';
+import { isToolGroup, isToolPair, type RenderItem } from '../tool-bubbles/ToolGroupBubble';
+
+// Only a fallback for never-rendered items; real heights are measured once on screen.
+export const RENDER_ITEM_ESTIMATED_HEIGHT = 140;
+// Conservative estimate for an unmeasured tool row: tool groups/pairs render collapsed (~40-50px) far more often than expanded. Leaning low keeps scrollHeight (and the scrollbar thumb) from jumping when a tool row measures shorter.
+const COLLAPSED_TOOL_ROW_HEIGHT = 44;
+// How many screens of real content to keep mounted on EACH side of the viewport. Beyond it, items unmount and are replaced by a measured-height spacer, so render/memory stays bounded no matter how long the transcript is.
+export const WINDOW_BUFFER_SCREENS_PER_SIDE = 3;
+// Below this item count the transcript renders WHOLE, no spacers, no windowing. Virtualization only earns its keep on huge chats; on a normal chat the spacer-height recompute just fights the scroll position (the "jumps up and down" glitch), so we skip it entirely until a chat is genuinely long.
+export const WINDOW_MIN_ITEMS = 60;
+// Floor on the mounted item count so a single very tall item can't strand us with an effectively empty window.
+export const MIN_WINDOW_BUFFER_ITEMS = 6;
+
+// Bootstrap count for the initial bottom-anchored slice (on open and on scroll-to-bottom): ONE screen's worth, so first paint mounts the minimum that fills the viewport. The post-settle recompute (scheduleWindowRecompute after the pin) widens to the full pixel band, so the buffer arrives a few frames later instead of taxing open-to-paint.
+export function initialSeedItems(viewportHeight: number): number {
+  const fillPx = 1.25 * Math.max(1, viewportHeight);
+  return Math.max(MIN_WINDOW_BUFFER_ITEMS, Math.ceil(fillPx / RENDER_ITEM_ESTIMATED_HEIGHT));
+}
+
+// Pure window solver: given the current scroll position and a per-index height accessor (measured where known, estimated otherwise), return the [start, end) slice of render items that should be mounted. The buffer is measured in PIXELS (N screens of real content on each side of the viewport), not item count, so a few very tall messages can't blow the mounted set up to the whole transcript. A huge viewport naturally yields start=0/end=total (mount all).
+export function computeDesiredWindow(
+  scrollTop: number,
+  clientHeight: number,
+  total: number,
+  heightOf: (index: number) => number,
+  bufferPx: number,
+): { start: number; end: number } {
+  if (total <= 0) return { start: 0, end: 0 };
+  const keepTop = scrollTop - bufferPx;
+  const keepBottom = scrollTop + clientHeight + bufferPx;
+  let offset = 0;
+  let start = -1;
+  let end = total;
+  for (let i = 0; i < total; i++) {
+    const h = heightOf(i);
+    const itemTop = offset;
+    const itemBottom = offset + h;
+    if (start === -1 && itemBottom > keepTop) start = i;
+    if (itemTop < keepBottom) {
+      end = i + 1;
+    } else {
+      // Everything past here starts below the keep band.
+      break;
+    }
+    offset += h;
+  }
+  if (start === -1) start = Math.max(0, total - 1);
+  end = Math.min(total, Math.max(end, start + 1));
+  // Always keep at least a small floor of items mounted around the viewport so a single under-measured item can't strand us with an empty window.
+  if (end - start < MIN_WINDOW_BUFFER_ITEMS) {
+    start = Math.max(0, Math.min(start, end - MIN_WINDOW_BUFFER_ITEMS));
+  }
+  return { start: Math.max(0, start), end };
+}
+
+export function stringifyContent(content: any): string {
+  if (content == null) return '';
+  if (typeof content === 'string') return content;
+  return JSON.stringify(content);
+}
+
+// Content-aware height estimate for a render item that has never been measured. Tool rows and tiny system/thinking rows keep the flat fallback; message bubbles scale with their FULL text length (messages render in full once on-screen, so the estimate matches both the rendered bubble and MessageBubble's placeholder fallback).
+export function estimateItemHeight(item: RenderItem, viewportWidth: number): number {
+  if (isToolGroup(item) || isToolPair(item)) return COLLAPSED_TOOL_ROW_HEIGHT;
+  const msg = item as AgentMessage;
+  if (msg.role === 'thinking' || msg.role === 'system') return 60;
+  return estimateRenderedTextHeight(stringifyContent(msg.content), viewportWidth);
+}
diff --git a/frontend/src/shared/backendConnection.ts b/frontend/src/shared/backendConnection.ts
index e93237e10..c410bfc04 100644
--- a/frontend/src/shared/backendConnection.ts
+++ b/frontend/src/shared/backendConnection.ts
@@ -80,4 +80,7 @@ export function noteRequestStalled(): void {
 }
 
 // Harness/debug handle: lets a live session (CDP, support) read the signal without a store import.
-(window as unknown as { __OSW_CONN?: object }).__OSW_CONN = { backendReachable, onBackendReachability };
+// Guarded: reducers that import this module also run under node:test, where there is no window.
+if (typeof window !== 'undefined') {
+  (window as unknown as { __OSW_CONN?: object }).__OSW_CONN = { backendReachable, onBackendReachability };
+}
diff --git a/frontend/src/shared/config.ts b/frontend/src/shared/config.ts
index c0aec765f..f92bbe614 100644
--- a/frontend/src/shared/config.ts
+++ b/frontend/src/shared/config.ts
@@ -1,6 +1,9 @@
 import { noteBackendFailure, noteBackendSuccess, noteRequestStalled, setBackendProber } from '@/shared/backendConnection';
 
-const _w = window as any;
+// Import-safe outside a renderer: reducers that import API_BASE also run under node:test, where there
+// is no window. The module then answers with the defaults and installs nothing.
+const hasWindow = typeof window !== 'undefined';
+const _w = (hasWindow ? window : {}) as any;
 // Prefer the preload-injected port; if it's missing (preload raced the backend port being picked), re-query the live value before falling back to 8324. The bare 8324 guess is wrong on any machine where the backend landed on a fallback port (e.g. 8324 was held by a leftover backend); see the self-heal below.
 const port =
   _w.__OPENSWARM_PORT__ ||
@@ -8,7 +11,7 @@ const port =
     ? _w.openswarm.getBackendPortLive()
     : 0) ||
   8324;
-const host = window.location.hostname || 'localhost';
+const host = (hasWindow && window.location.hostname) || 'localhost';
 
 export const API_BASE = `http://${host}:${port}/api`;
 export const WS_BASE = `ws://${host}:${port}`;
@@ -217,5 +220,7 @@ function _installAuthFetchInterceptor() {
   };
 }
 
-_installAuthFetchInterceptor();
-ensureAuthToken();
+if (hasWindow) {
+  _installAuthFetchInterceptor();
+  ensureAuthToken();
+}
diff --git a/frontend/src/shared/safeMode.ts b/frontend/src/shared/safeMode.ts
index c8c3f6e93..432fb7691 100644
--- a/frontend/src/shared/safeMode.ts
+++ b/frontend/src/shared/safeMode.ts
@@ -11,7 +11,10 @@ export interface SafeModeInfo {
 
 let cached: SafeModeInfo = { safeMode: false, dirtyCount: 0, fingerprint: null };
 
-const api = (window as unknown as { openswarm?: { getSafeMode?: () => Promise<SafeModeInfo> } }).openswarm;
+// Import-safe outside a renderer: the layout slice imports this, and its reducer tests run under node:test.
+const api = typeof window === 'undefined'
+  ? undefined
+  : (window as unknown as { openswarm?: { getSafeMode?: () => Promise<SafeModeInfo> } }).openswarm;
 if (api?.getSafeMode) {
   void api.getSafeMode().then((info) => {
     if (info && typeof info.safeMode === 'boolean') cached = info;