diff --git a/package.json b/package.json
index 2144d0a8a3..b7fabec0b0 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
     "theme:color-audit:test": "node --test scripts/audit-theme-colors.test.mjs scripts/audit-cli-theme-colors.test.mjs",
     "theme:visual-contract": "node scripts/validate-theme-visual-contract.mjs",
     "appearance:contract-audit": "node scripts/audit-appearance-contracts.mjs",
+    "flowchat:log:analyze": "node scripts/diagnostics/analyze-flowchat-log.mjs",
+    "flowchat:log:analyze:test": "node --test scripts/diagnostics/analyze-flowchat-log.test.mjs",
     "check:repo-hygiene": "node scripts/check-repo-hygiene.mjs && node scripts/update-models-dev-snapshot.mjs --check",
     "models-dev:check": "node scripts/update-models-dev-snapshot.mjs --check",
     "models-dev:update": "node scripts/update-models-dev-snapshot.mjs",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 769d91a40a..e37b659f9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -338,8 +338,8 @@ importers:
         specifier: ^15.6.6
         version: 15.6.6(react@18.3.1)
       react-virtuoso:
-        specifier: ^4.14.1
-        version: 4.18.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^4.18.11
+        version: 4.18.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
@@ -4666,8 +4666,8 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
-  react-virtuoso@4.18.1:
-    resolution: {integrity: sha512-KF474cDwaSb9+SJ380xruBB4P+yGWcVkcu26HtMqYNMTYlYbrNy8vqMkE+GpAApPPufJqgOLMoWMFG/3pJMXUA==}
+  react-virtuoso@4.18.11:
+    resolution: {integrity: sha512-Qeeq9vqa5seCxACvzbQTUeq3s2/Bu+VlwOMF0jfy3E/ZKHLiXWwJpXBhv2rckqYkvm1XRVFLCBMCmqCU8JNEJg==}
     peerDependencies:
       react: '>=16 || >=17 || >= 18 || >= 19'
       react-dom: '>=16 || >=17 || >= 18 || >=19'
@@ -10614,7 +10614,7 @@ snapshots:
       react: 18.3.1
       refractor: 3.6.0
 
-  react-virtuoso@4.18.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-virtuoso@4.18.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
diff --git a/scripts/diagnostics/analyze-flowchat-log.mjs b/scripts/diagnostics/analyze-flowchat-log.mjs
index 5cc894753c..081250c44b 100644
--- a/scripts/diagnostics/analyze-flowchat-log.mjs
+++ b/scripts/diagnostics/analyze-flowchat-log.mjs
@@ -1,16 +1,75 @@
+/**
+ * Read `flowchat.log` and answer the questions the viewport trail exists for.
+ *
+ * The log is JSONL, one object per entry, written by
+ * `src/web-ui/src/infrastructure/diagnostics/flowChatDiagnostics.ts` behind
+ * `app.logging.flow_chat_diagnostics`. Viewport entries carry the tag
+ * `viewport`; history paging carries `history-paging`.
+ *
+ * The reports here are not a frequency count with extra steps. Each one
+ * corresponds to a fault that has actually shipped:
+ *
+ * - **Placements that did not stick.** A Turn that lands and is dragged away
+ *   and a Turn that never landed leave the same final position, so every
+ *   placement is recorded with what became of it and the drift is what
+ *   separates them.
+ * - **Fights.** Travel far exceeding net displacement is two writers undoing
+ *   each other — the shape of a snap back reissued 958 times without arriving.
+ * - **Refusals.** Who was outranked, by whom. A write that never happened is
+ *   invisible in the DOM and in every other log.
+ * - **Silent declines.** Each writer's reason for not moving. "Nothing
+ *   happened" has been the report more often than "it moved wrongly".
+ *
+ * Entries carry a `repeated` summary when the frontend coalesced a run of
+ * identical events, so every count here weighs an entry by what it stands for
+ * rather than by one. Ignoring that would under-report exactly the runaway
+ * loops the log is for.
+ */
+
 import { createReadStream } from 'node:fs';
 import { createInterface } from 'node:readline';
+import { fileURLToPath } from 'node:url';
+
+/** Joins the parts of a composite map key; cannot occur inside one. */
+const KEY_SEPARATOR = String.fromCharCode(31);
+
+const VIEWPORT_TAG = 'viewport';
+const WRITE_LOCATION = 'viewportOwner.write';
+const OUTCOME_SUFFIX = '.outcome';
+const DROPPED_ENTRY_LOCATION = 'FlowChatDiagnosticsRecorder.flush';
+
+/** Locations whose whole purpose is to record a movement that did not happen. */
+const DECLINE_LOCATIONS = new Set([
+  'anchor.dropped',
+  'anchor.stoodDown',
+  'followOutput.deferNewTurn',
+  'historyPaging.refused',
+  'snapBack.declined',
+  'snapBack.notNeeded',
+  'turnNavigation.rejected',
+]);
+
+export const DEFAULT_OPTIONS = {
+  top: 20,
+  minDrift: 8,
+  gapMs: 750,
+  around: null,
+  radius: 12,
+  tags: [],
+};
 
 function printUsage() {
   console.log(`Usage:
   node scripts/diagnostics/analyze-flowchat-log.mjs <flowchat.log> [options]
 
 Options:
-  --top <count>       Maximum rows per summary table (default: 20)
-  --min-delta <px>    Minimum positive reservation jump to show (default: 100)
-  --around <sequence> Show a compact event window around a sequence
-  --radius <count>    Sequence radius for --around (default: 8)
-  --help              Show this help`);
+  --top <count>        Maximum rows per table (default: ${DEFAULT_OPTIONS.top})
+  --min-drift <px>     Report a placement as unstuck past this drift (default: ${DEFAULT_OPTIONS.minDrift})
+  --gap <ms>           Quiet period that ends an episode (default: ${DEFAULT_OPTIONS.gapMs})
+  --around <sequence>  Print the raw entries around a sequence number
+  --radius <count>     Sequence radius for --around (default: ${DEFAULT_OPTIONS.radius})
+  --tag <name>         Only entries with this hypothesis tag; repeatable
+  --help               Show this help`);
 }
 
 function parseNumberOption(args, index, optionName) {
@@ -22,7 +81,11 @@ function parseNumberOption(args, index, optionName) {
   return value;
 }
 
-function parseArgs(argv) {
+export function parseArgs(rawArgv) {
+  // `npm run … -- <path>` forwards the separator itself; pnpm forwards it too
+  // when it is typed. Either way it is not an argument.
+  const argv = rawArgv[0] === '--' ? rawArgv.slice(1) : rawArgv;
+
   if (argv.includes('--help')) {
     printUsage();
     process.exit(0);
@@ -34,21 +97,18 @@ function parseArgs(argv) {
     throw new Error('A FlowChat JSONL log path is required');
   }
 
-  const options = {
-    logPath,
-    top: 20,
-    minDelta: 100,
-    around: null,
-    radius: 8,
-  };
+  const options = { ...DEFAULT_OPTIONS, tags: [], logPath };
 
   for (let index = 1; index < argv.length; index += 1) {
     const arg = argv[index];
     if (arg === '--top') {
       options.top = Math.max(1, Math.floor(parseNumberOption(argv, index, arg)));
       index += 1;
-    } else if (arg === '--min-delta') {
-      options.minDelta = Math.max(0, parseNumberOption(argv, index, arg));
+    } else if (arg === '--min-drift') {
+      options.minDrift = Math.max(0, parseNumberOption(argv, index, arg));
+      index += 1;
+    } else if (arg === '--gap') {
+      options.gapMs = Math.max(0, parseNumberOption(argv, index, arg));
       index += 1;
     } else if (arg === '--around') {
       options.around = Math.floor(parseNumberOption(argv, index, arg));
@@ -56,6 +116,11 @@ function parseArgs(argv) {
     } else if (arg === '--radius') {
       options.radius = Math.max(0, Math.floor(parseNumberOption(argv, index, arg)));
       index += 1;
+    } else if (arg === '--tag') {
+      const tag = argv[index + 1];
+      if (!tag || tag.startsWith('--')) throw new Error('--tag requires a name');
+      options.tags.push(tag);
+      index += 1;
     } else {
       throw new Error(`Unknown option: ${arg}`);
     }
@@ -70,11 +135,26 @@ function finiteNumber(value) {
 }
 
 function round(value) {
-  return Math.round(finiteNumber(value) * 100) / 100;
+  return Math.round(finiteNumber(value) * 10) / 10;
 }
 
-function reservationTotal(reservation) {
-  return finiteNumber(reservation?.collapse?.px) + finiteNumber(reservation?.pin?.px);
+/**
+ * What one entry stands for.
+ *
+ * A coalesced entry is one line describing a run, so counting it as one event
+ * would report a 300-write fight as a handful of writes. Travel is the same
+ * question for distance.
+ */
+export function entryWeight(entry) {
+  return 1 + Math.max(0, Math.floor(finiteNumber(entry?.data?.repeated?.suppressedCount)));
+}
+
+export function entryTravelPx(entry) {
+  const data = entry?.data ?? {};
+  const own = data.toPx === undefined || data.fromPx === undefined
+    ? 0
+    : Math.abs(finiteNumber(data.toPx) - finiteNumber(data.fromPx));
+  return own + Math.abs(finiteNumber(data.repeated?.suppressedTravelPx));
 }
 
 function compactData(data) {
@@ -83,131 +163,330 @@ function compactData(data) {
   return serialized.length <= 240 ? serialized : `${serialized.slice(0, 237)}...`;
 }
 
-async function analyze(options) {
-  const eventCounts = new Map();
-  const reservationJumps = [];
-  const collapseIntents = [];
-  const sequenceWindow = [];
-  let lineCount = 0;
-  let eventCount = 0;
-  let parseErrorCount = 0;
-
-  const input = createReadStream(options.logPath, { encoding: 'utf8' });
-  const lines = createInterface({ input, crlfDelay: Infinity });
+function increment(map, key, by = 1) {
+  map.set(key, (map.get(key) ?? 0) + by);
+}
 
-  for await (const line of lines) {
-    lineCount += 1;
-    if (!line.trim()) continue;
+/**
+ * Group viewport writes into stretches of activity.
+ *
+ * A fault is a period, not an entry: "it flickered for a second when I opened
+ * the session" is one episode with several owners in it. The gap that ends one
+ * is wall-clock, because the interesting silence is the reader looking at a
+ * still transcript.
+ */
+export function collectEpisodes(writes, gapMs) {
+  const episodes = [];
+  let current = null;
 
-    let event;
-    try {
-      event = JSON.parse(line);
-    } catch {
-      parseErrorCount += 1;
-      continue;
+  for (const write of writes) {
+    const atMs = finiteNumber(write.performanceTimeMs);
+    if (current === null || atMs - current.endMs > gapMs) {
+      current = {
+        firstSequence: write.sequence,
+        lastSequence: write.sequence,
+        startMs: atMs,
+        endMs: atMs,
+        writes: 0,
+        refusals: 0,
+        travelPx: 0,
+        fromPx: null,
+        toPx: null,
+        owners: new Map(),
+      };
+      episodes.push(current);
     }
-    eventCount += 1;
 
-    const countKey = `${event.location ?? ''}\u0000${event.message ?? ''}`;
-    const existingCount = eventCounts.get(countKey);
-    if (existingCount) {
-      existingCount.count += 1;
+    const weight = entryWeight(write);
+    const granted = write.data?.granted !== false;
+    current.lastSequence = write.sequence;
+    current.endMs = atMs;
+    current.travelPx += entryTravelPx(write);
+    if (granted) {
+      current.writes += weight;
+      if (current.fromPx === null) current.fromPx = finiteNumber(write.data?.fromPx);
+      current.toPx = finiteNumber(write.data?.toPx);
     } else {
-      eventCounts.set(countKey, {
-        count: 1,
-        location: event.location ?? '',
-        message: event.message ?? '',
-      });
+      current.refusals += weight;
     }
+    increment(current.owners, String(write.data?.owner ?? 'unknown'), weight);
+  }
+
+  return episodes.map(episode => {
+    const netPx = episode.fromPx === null ? 0 : episode.toPx - episode.fromPx;
+    return {
+      sequences: `${episode.firstSequence}-${episode.lastSequence}`,
+      durationMs: Math.round(episode.endMs - episode.startMs),
+      writes: episode.writes,
+      refusals: episode.refusals,
+      travelPx: round(episode.travelPx),
+      netPx: round(netPx),
+      /*
+       * Distance travelled per pixel of progress. One means a clean move;
+       * anything large is writers undoing each other, and it is the number to
+       * sort by when the report is "it shook".
+       */
+      churn: Math.abs(netPx) < 1
+        ? round(episode.travelPx)
+        : round(episode.travelPx / Math.abs(netPx)),
+      owners: [...episode.owners.entries()]
+        .sort((left, right) => right[1] - left[1])
+        .map(([owner, count]) => `${owner}x${count}`)
+        .join(' '),
+    };
+  });
+}
 
-    if (
-      event.location === 'VirtualMessageList.updateBottomReservationState' &&
-      event.data?.before &&
-      event.data?.after
-    ) {
-      const before = reservationTotal(event.data.before);
-      const after = reservationTotal(event.data.after);
-      const delta = after - before;
-      if (delta >= options.minDelta) {
-        reservationJumps.push({
-          sequence: event.sequence,
-          deltaPx: round(delta),
-          beforePx: round(before),
-          afterPx: round(after),
-          collapsePx: round(event.data.after.collapse?.px),
-          pinPx: round(event.data.after.pin?.px),
-          coordinatorMode: event.data.coordinatorMode ?? '',
-          following: event.data.isFollowingOutput === true,
-          streaming: event.data.isStreamingOutput === true,
-        });
+/**
+ * Pair every placement with the sample taken after it settled.
+ *
+ * Matched first-in-first-out per location: an outcome lands hundreds of
+ * milliseconds after its placement, so another placement of the same kind can
+ * begin in between, and the queue keeps them in order. An outcome with nothing
+ * pending is reported rather than dropped — it means the log starts mid-flight.
+ */
+export function joinPlacements(entries) {
+  const pending = new Map();
+  const placements = [];
+  const orphanedOutcomes = [];
+
+  for (const entry of entries) {
+    const location = String(entry.location ?? '');
+    if (location.endsWith(OUTCOME_SUFFIX)) {
+      const placedLocation = location.slice(0, -OUTCOME_SUFFIX.length);
+      const queue = pending.get(placedLocation);
+      const placement = queue?.shift();
+      if (!placement) {
+        orphanedOutcomes.push({ sequence: entry.sequence, location: placedLocation });
+        continue;
       }
+      placement.outcome = entry;
+      continue;
     }
+    if (entry.data?.placedPx === undefined) continue;
+
+    const placement = { placed: entry, outcome: null };
+    placements.push(placement);
+    const queue = pending.get(location);
+    if (queue) queue.push(placement);
+    else pending.set(location, [placement]);
+  }
+
+  return { placements, orphanedOutcomes };
+}
+
+export function summarizePlacements(placements) {
+  return placements.map(({ placed, outcome }) => {
+    const data = placed.data ?? {};
+    const outcomeData = outcome?.data ?? {};
+    return {
+      sequence: placed.sequence,
+      location: String(placed.location ?? ''),
+      branch: String(data.branch ?? data.reason ?? ''),
+      beforePx: round(data.beforePx),
+      placedPx: round(data.placedPx),
+      targetPx: data.targetPx === undefined ? round(data.placedPx) : round(data.targetPx),
+      settledPx: outcome ? round(outcomeData.settledPx) : null,
+      driftPx: outcome ? round(outcomeData.driftPx) : null,
+      /*
+       * No outcome is not "no drift". The sample is scheduled on a timer, so a
+       * placement at the end of the log, or one whose view unmounted first,
+       * never reports — and reading that as a clean landing is how a report
+       * turns into a false negative.
+       */
+      settled: outcome ? 'yes' : 'unknown',
+    };
+  });
+}
 
-    if (
-      event.location === 'VirtualMessageList.handleToolCardCollapseIntent' &&
-      event.message === 'Tool card collapse reservation calculated'
-    ) {
-      const current = finiteNumber(event.data?.currentTotalCompensationPx);
-      const provisional = finiteNumber(event.data?.provisionalTotalCompensationPx);
-      collapseIntents.push({
-        sequence: event.sequence,
-        tool: event.data?.nextIntent?.toolName ?? '',
-        cardHeightPx: round(event.data?.estimatedShrink),
-        distancePx: round(event.data?.effectiveDistanceFromBottom),
-        addedPx: round(provisional - current),
-        totalPx: round(provisional),
-        coordinatorMode: event.data?.coordinatorMode ?? '',
-      });
+export function analyzeEntries(entries, options) {
+  const settings = { ...DEFAULT_OPTIONS, ...options };
+  const tags = new Set(settings.tags ?? []);
+  const kept = tags.size === 0
+    ? entries
+    : entries.filter(entry => tags.has(String(entry.hypothesis ?? '')));
+
+  const viewportEntries = kept.filter(entry => entry.hypothesis === VIEWPORT_TAG);
+  const writes = viewportEntries.filter(entry => entry.location === WRITE_LOCATION);
+
+  const refusals = new Map();
+  const ownerActivity = new Map();
+  for (const write of writes) {
+    const weight = entryWeight(write);
+    const owner = String(write.data?.owner ?? 'unknown');
+    const activity = ownerActivity.get(owner) ?? { owner, writes: 0, refusals: 0, travelPx: 0 };
+    activity.travelPx += entryTravelPx(write);
+    if (write.data?.granted === false) {
+      activity.refusals += weight;
+      increment(refusals, `${owner}${KEY_SEPARATOR}${String(write.data?.heldBy ?? 'nobody')}`, weight);
+    } else {
+      activity.writes += weight;
     }
+    ownerActivity.set(owner, activity);
+  }
+
+  const declines = new Map();
+  for (const entry of viewportEntries) {
+    const location = String(entry.location ?? '');
+    if (!DECLINE_LOCATIONS.has(location)) continue;
+    const reason = String(entry.data?.reason ?? entry.data?.branch ?? '');
+    increment(declines, `${location}${KEY_SEPARATOR}${reason}`, entryWeight(entry));
+  }
+
+  const frequency = new Map();
+  for (const entry of kept) {
+    const key = `${String(entry.hypothesis ?? '')}${KEY_SEPARATOR}${String(entry.location ?? '')}`;
+    increment(frequency, key, entryWeight(entry));
+  }
+
+  const { placements, orphanedOutcomes } = joinPlacements(viewportEntries);
+  const summarized = summarizePlacements(placements);
 
-    if (
-      options.around !== null &&
-      finiteNumber(event.sequence) >= options.around - options.radius &&
-      finiteNumber(event.sequence) <= options.around + options.radius
-    ) {
-      sequenceWindow.push({
-        sequence: event.sequence,
-        location: event.location ?? '',
-        message: event.message ?? '',
-        data: compactData(event.data),
-      });
+  const droppedEntries = kept
+    .filter(entry => entry.location === DROPPED_ENTRY_LOCATION)
+    .reduce((total, entry) => total + finiteNumber(entry.data?.droppedEntries), 0);
+
+  return {
+    entryCount: kept.length,
+    viewportEntryCount: viewportEntries.length,
+    droppedEntries,
+    sequenceRange: kept.length === 0
+      ? null
+      : { first: kept[0].sequence, last: kept[kept.length - 1].sequence },
+    episodes: collectEpisodes(writes, settings.gapMs)
+      .sort((left, right) => right.churn - left.churn),
+    unstuckPlacements: summarized
+      .filter(placement => placement.driftPx !== null
+        && Math.abs(placement.driftPx) >= settings.minDrift)
+      .sort((left, right) => Math.abs(right.driftPx) - Math.abs(left.driftPx)),
+    unsampledPlacements: summarized.filter(placement => placement.settled === 'unknown'),
+    placementCount: summarized.length,
+    orphanedOutcomes,
+    refusals: [...refusals.entries()]
+      .map(([key, count]) => {
+        const [owner, heldBy] = key.split(KEY_SEPARATOR);
+        return { owner, refusedBy: heldBy, count };
+      })
+      .sort((left, right) => right.count - left.count),
+    ownerActivity: [...ownerActivity.values()]
+      .map(activity => ({ ...activity, travelPx: round(activity.travelPx) }))
+      .sort((left, right) => right.writes + right.refusals - (left.writes + left.refusals)),
+    declines: [...declines.entries()]
+      .map(([key, count]) => {
+        const [location, reason] = key.split(KEY_SEPARATOR);
+        return { location, reason, count };
+      })
+      .sort((left, right) => right.count - left.count),
+    frequency: [...frequency.entries()]
+      .map(([key, count]) => {
+        const [tag, location] = key.split(KEY_SEPARATOR);
+        return { tag, location, count };
+      })
+      .sort((left, right) => right.count - left.count),
+    window: settings.around === null ? [] : kept
+      .filter(entry => finiteNumber(entry.sequence) >= settings.around - settings.radius
+        && finiteNumber(entry.sequence) <= settings.around + settings.radius)
+      .map(entry => ({
+        sequence: entry.sequence,
+        tag: String(entry.hypothesis ?? ''),
+        location: String(entry.location ?? ''),
+        message: String(entry.message ?? ''),
+        data: compactData(entry.data),
+      })),
+  };
+}
+
+export async function readEntries(logPath) {
+  const entries = [];
+  let lineCount = 0;
+  let parseErrorCount = 0;
+
+  const input = createReadStream(logPath, { encoding: 'utf8' });
+  const lines = createInterface({ input, crlfDelay: Infinity });
+  for await (const line of lines) {
+    lineCount += 1;
+    if (!line.trim()) continue;
+    try {
+      entries.push(JSON.parse(line));
+    } catch {
+      parseErrorCount += 1;
     }
   }
 
-  console.log(`FlowChat log: ${options.logPath}`);
-  console.log(`Lines: ${lineCount}, events: ${eventCount}, parse errors: ${parseErrorCount}`);
+  return { entries, lineCount, parseErrorCount };
+}
 
-  console.log('\nMost frequent events');
-  console.table(
-    [...eventCounts.values()]
-      .sort((left, right) => right.count - left.count)
-      .slice(0, options.top),
+function reportTable(title, rows, top) {
+  console.log(`\n${title}`);
+  if (rows.length === 0) {
+    console.log('  (none)');
+    return;
+  }
+  console.table(rows.slice(0, top));
+  if (rows.length > top) {
+    console.log(`  ... ${rows.length - top} more`);
+  }
+}
+
+export function printReport(report, options, source) {
+  console.log(`FlowChat log: ${source.logPath}`);
+  console.log(
+    `Lines: ${source.lineCount}, entries: ${report.entryCount}`
+    + ` (viewport: ${report.viewportEntryCount}), parse errors: ${source.parseErrorCount}`,
   );
+  if (report.sequenceRange) {
+    console.log(`Sequences: ${report.sequenceRange.first}-${report.sequenceRange.last}`);
+  }
+  if (report.droppedEntries > 0) {
+    // Said loudly: every count below is a lower bound once entries were lost.
+    console.log(
+      `WARNING: ${report.droppedEntries} entries were dropped before reaching the log.`
+      + ' Counts below are lower bounds.',
+    );
+  }
 
-  console.log(`\nLargest reservation increases (>= ${options.minDelta}px)`);
-  console.table(
-    reservationJumps
-      .sort((left, right) => right.deltaPx - left.deltaPx)
-      .slice(0, options.top),
+  reportTable(
+    'Episodes of viewport activity, worst churn first (travel per pixel of progress)',
+    report.episodes,
+    options.top,
   );
+  reportTable(
+    `Placements that did not stick (drift >= ${options.minDrift}px)`,
+    report.unstuckPlacements,
+    options.top,
+  );
+  reportTable('Refusals: who was outranked, by whom', report.refusals, options.top);
+  reportTable('Declines: a writer choosing not to move, and why', report.declines, options.top);
+  reportTable('Per owner', report.ownerActivity, options.top);
+  reportTable('Most frequent locations', report.frequency, options.top);
 
-  console.log('\nLargest collapse-intent estimates');
-  console.table(
-    collapseIntents
-      .sort((left, right) => right.addedPx - left.addedPx)
-      .slice(0, options.top),
+  console.log(
+    `\nPlacements: ${report.placementCount},`
+    + ` never sampled: ${report.unsampledPlacements.length},`
+    + ` outcomes with no placement in this log: ${report.orphanedOutcomes.length}`,
   );
 
   if (options.around !== null) {
-    console.log(`\nEvents around sequence ${options.around} (+/- ${options.radius})`);
-    console.table(sequenceWindow);
+    reportTable(
+      `Entries around sequence ${options.around} (+/- ${options.radius})`,
+      report.window,
+      report.window.length,
+    );
   }
 }
 
-try {
+async function main() {
   const options = parseArgs(process.argv.slice(2));
-  await analyze(options);
-} catch (error) {
-  console.error(error instanceof Error ? error.message : String(error));
-  process.exitCode = 1;
+  const source = await readEntries(options.logPath);
+  const report = analyzeEntries(source.entries, options);
+  printReport(report, options, { ...source, logPath: options.logPath });
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  try {
+    await main();
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+  }
 }
diff --git a/scripts/diagnostics/analyze-flowchat-log.test.mjs b/scripts/diagnostics/analyze-flowchat-log.test.mjs
new file mode 100644
index 0000000000..152f583596
--- /dev/null
+++ b/scripts/diagnostics/analyze-flowchat-log.test.mjs
@@ -0,0 +1,190 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+  analyzeEntries,
+  collectEpisodes,
+  entryTravelPx,
+  entryWeight,
+  joinPlacements,
+  parseArgs,
+} from './analyze-flowchat-log.mjs';
+
+let nextSequence = 0;
+
+function entry(location, data, overrides = {}) {
+  nextSequence += 1;
+  return {
+    sequence: nextSequence,
+    timestamp: '2026-08-11T00:00:00.000Z',
+    performanceTimeMs: nextSequence * 16,
+    hypothesis: 'viewport',
+    location,
+    message: location,
+    data,
+    ...overrides,
+  };
+}
+
+function write(owner, fromPx, toPx, overrides = {}) {
+  return entry('viewportOwner.write', {
+    owner,
+    granted: true,
+    heldBy: null,
+    fromPx,
+    toPx,
+    ...overrides.data,
+  }, overrides.entry);
+}
+
+test('parseArgs requires a log path and rejects unknown options', () => {
+  assert.throws(() => parseArgs([]), /log path is required/);
+  assert.throws(() => parseArgs(['flowchat.log', '--nope']), /Unknown option/);
+
+  const options = parseArgs(['flowchat.log', '--min-drift', '20', '--tag', 'viewport']);
+  assert.equal(options.logPath, 'flowchat.log');
+  assert.equal(options.minDrift, 20);
+  assert.deepEqual(options.tags, ['viewport']);
+
+  // `npm run … -- <path>` hands the separator through as an argument.
+  assert.equal(parseArgs(['--', 'flowchat.log']).logPath, 'flowchat.log');
+});
+
+test('a coalesced entry counts as the run it stands for', () => {
+  const coalesced = write('follow-output', 100, 102, {
+    data: { repeated: { suppressedCount: 59, suppressedTravelPx: 118, suppressedForMs: 480 } },
+  });
+
+  assert.equal(entryWeight(coalesced), 60);
+  assert.equal(entryTravelPx(coalesced), 120);
+  // An entry with no run behind it still stands for itself.
+  assert.equal(entryWeight(write('follow-output', 0, 10)), 1);
+});
+
+test('episodes split on a quiet gap and score a fight by its churn', () => {
+  nextSequence = 0;
+  const fight = [
+    write('snap-back', 1000, 1000.7),
+    write('anchor-correction', 1000.7, 1000),
+    write('snap-back', 1000, 1000.7),
+    write('anchor-correction', 1000.7, 1000),
+  ];
+  const later = write('follow-output', 1000, 2000, {
+    entry: { performanceTimeMs: 20_000 },
+  });
+
+  const episodes = collectEpisodes([...fight, later], 750);
+
+  assert.equal(episodes.length, 2);
+  // Four writes that went nowhere: travel without progress is the whole signal.
+  assert.equal(episodes[0].writes, 4);
+  assert.equal(episodes[0].netPx, 0);
+  assert.ok(episodes[0].churn >= 2, `expected churn, got ${episodes[0].churn}`);
+  assert.equal(episodes[1].netPx, 1000);
+  assert.equal(episodes[1].churn, 1);
+});
+
+test('refused writes are counted apart from the ones that moved', () => {
+  nextSequence = 0;
+  const episodes = collectEpisodes([
+    write('follow-output', 500, 600),
+    write('anchor-correction', 600, 500, { data: { granted: false, heldBy: 'user-gesture' } }),
+  ], 750);
+
+  assert.equal(episodes[0].writes, 1);
+  assert.equal(episodes[0].refusals, 1);
+  // A refusal moved nothing, so it cannot contribute to net displacement.
+  assert.equal(episodes[0].netPx, 100);
+});
+
+test('placements pair with their outcome in order, and a stray outcome is reported', () => {
+  nextSequence = 0;
+  const first = entry('turnNavigation.placed', { beforePx: 0, placedPx: 800, targetPx: 800 });
+  const second = entry('turnNavigation.placed', { beforePx: 800, placedPx: 1600, targetPx: 1600 });
+  const firstOutcome = entry('turnNavigation.placed.outcome', { settledPx: 40, driftPx: -760 });
+  const secondOutcome = entry('turnNavigation.placed.outcome', { settledPx: 1600, driftPx: 0 });
+  const stray = entry('visibleTask.scrollToTask.outcome', { settledPx: 10, driftPx: -5 });
+
+  const { placements, orphanedOutcomes } = joinPlacements([
+    first,
+    second,
+    firstOutcome,
+    secondOutcome,
+    stray,
+  ]);
+
+  assert.equal(placements.length, 2);
+  assert.equal(placements[0].outcome, firstOutcome);
+  assert.equal(placements[1].outcome, secondOutcome);
+  assert.deepEqual(orphanedOutcomes, [
+    { sequence: stray.sequence, location: 'visibleTask.scrollToTask' },
+  ]);
+});
+
+test('analyzeEntries reports what did not stick, who was refused, and who declined', () => {
+  nextSequence = 0;
+  const report = analyzeEntries([
+    entry('visibleTask.scrollToTask', { beforePx: 0, placedPx: 900, targetPx: 900 }),
+    write('anchor-correction', 900, 120),
+    entry('visibleTask.scrollToTask.outcome', { settledPx: 120, driftPx: -780 }),
+    write('follow-output', 120, 200, { data: { granted: false, heldBy: 'user-gesture' } }),
+    entry('snapBack.declined', { reason: 'follow-correcting' }),
+    entry('snapBack.declined', { reason: 'follow-correcting' }),
+    entry('followOutput.deferNewTurn', { turnId: 't-42' }),
+    { ...entry('history_paging_requested', { direction: 'before' }), hypothesis: 'history-paging' },
+  ], { minDrift: 8 });
+
+  assert.equal(report.unstuckPlacements.length, 1);
+  assert.equal(report.unstuckPlacements[0].driftPx, -780);
+  assert.equal(report.unstuckPlacements[0].location, 'visibleTask.scrollToTask');
+
+  assert.deepEqual(report.refusals, [
+    { owner: 'follow-output', refusedBy: 'user-gesture', count: 1 },
+  ]);
+
+  const declined = report.declines.find(row => row.location === 'snapBack.declined');
+  assert.deepEqual(declined, {
+    location: 'snapBack.declined',
+    reason: 'follow-correcting',
+    count: 2,
+  });
+  assert.ok(report.declines.some(row => row.location === 'followOutput.deferNewTurn'));
+
+  // The paging tag is counted but never mistaken for viewport activity.
+  assert.equal(report.viewportEntryCount, 7);
+  assert.ok(report.frequency.some(row => row.tag === 'history-paging'));
+});
+
+test('a placement whose outcome never arrived is not reported as having stuck', () => {
+  nextSequence = 0;
+  const report = analyzeEntries([
+    entry('navigation.scrollIntoView', { beforePx: 0, placedPx: 300 }),
+  ], {});
+
+  assert.equal(report.placementCount, 1);
+  assert.equal(report.unstuckPlacements.length, 0);
+  assert.equal(report.unsampledPlacements.length, 1);
+  assert.equal(report.unsampledPlacements[0].settled, 'unknown');
+});
+
+test('dropped entries are surfaced, because every count becomes a lower bound', () => {
+  nextSequence = 0;
+  const report = analyzeEntries([
+    { ...entry('FlowChatDiagnosticsRecorder.flush', { droppedEntries: 128 }), hypothesis: 'I' },
+    write('follow-output', 0, 100),
+  ], {});
+
+  assert.equal(report.droppedEntries, 128);
+});
+
+test('--tag keeps only the requested stream', () => {
+  nextSequence = 0;
+  const report = analyzeEntries([
+    write('follow-output', 0, 100),
+    { ...entry('history_paging_requested', { direction: 'before' }), hypothesis: 'history-paging' },
+  ], { tags: ['history-paging'] });
+
+  assert.equal(report.entryCount, 1);
+  assert.equal(report.viewportEntryCount, 0);
+  assert.equal(report.episodes.length, 0);
+});
diff --git a/src/apps/cli/src/agent/runtime_client.rs b/src/apps/cli/src/agent/runtime_client.rs
index 07ffd5d564..906a667ffc 100644
--- a/src/apps/cli/src/agent/runtime_client.rs
+++ b/src/apps/cli/src/agent/runtime_client.rs
@@ -13,8 +13,8 @@ use tokio::sync::{broadcast, Mutex};
 
 use bitfun_agent_runtime::sdk::{
     AgentDialogSteerRequest, AgentDialogTurnExecution, AgentDialogTurnRequest, AgentEventReceiver,
-    AgentInputAttachment, AgentLocalCommandTurnRecordRequest,
-    AgentMessageWorkspaceReferencesRequest, AgentRuntime, AgentSessionCompactionRequest,
+    AgentInputAttachment, AgentMessageWorkspaceReferencesRequest, AgentRuntime,
+    AgentSessionCompactionRequest,
     AgentSessionCreateRequest, AgentSessionDeleteRequest, AgentSessionForkBeforeTurnRequest,
     AgentSessionForkRequest, AgentSessionForkResult, AgentSessionLineageCancellationRequest,
     AgentSessionLineageInspection, AgentSessionLineageRequest, AgentSessionLineageSnapshot,
@@ -485,17 +485,6 @@ impl ExecAgentRuntimeClient {
         }
     }
 
-    pub(crate) async fn record_completed_local_command_turn(
-        &self,
-        request: AgentLocalCommandTurnRecordRequest,
-    ) -> Result<()> {
-        self.embedded_runtime("recording local command turns")?
-            .record_completed_local_command_turn(request)
-            .await
-            .map(|_| ())
-            .map_err(|error| anyhow::anyhow!(error.into_message()))
-    }
-
     pub(crate) fn set_approval_policy(&self, policy: CliApprovalPolicy) {
         *self
             .approval_policy
diff --git a/src/apps/cli/src/agent/tui_client.rs b/src/apps/cli/src/agent/tui_client.rs
index bd5fc646bb..03b521f71a 100644
--- a/src/apps/cli/src/agent/tui_client.rs
+++ b/src/apps/cli/src/agent/tui_client.rs
@@ -33,8 +33,8 @@ use bitfun_product_domains::tool_permissions::{
 use bitfun_runtime_ports::{
     put_agent_workspace_references, AgentContextReloadRequest, AgentDialogSteerRequest,
     AgentDialogTurnExecution, AgentDialogTurnRequest, AgentInputAttachment,
-    AgentLocalCommandTurnRecordRequest, AgentMessageWorkspaceReferencesRequest,
-    AgentSessionCompactionRequest, AgentSessionCreateRequest, AgentSessionDeleteRequest,
+    AgentMessageWorkspaceReferencesRequest, AgentSessionCompactionRequest,
+    AgentSessionCreateRequest, AgentSessionDeleteRequest,
     AgentSessionLineageCancellationRequest, AgentSessionLineageInspection,
     AgentSessionLineageRequest, AgentSessionLineageSnapshot, AgentSessionLineageTranscriptRequest,
     AgentSessionListRequest, AgentSessionModeUpdateRequest, AgentSessionModelUpdateRequest,
@@ -769,16 +769,6 @@ impl TuiAgentClient {
         Ok(())
     }
 
-    pub(crate) async fn record_completed_local_command_turn(
-        &self,
-        request: AgentLocalCommandTurnRecordRequest,
-    ) -> Result<()> {
-        self.backend
-            .record_local_command_turn(RecordLocalCommandTurnRequest(request))
-            .await?;
-        Ok(())
-    }
-
     pub(crate) fn set_approval_policy(&self, policy: CliApprovalPolicy) {
         *self
             .approval_policy
diff --git a/src/apps/cli/src/modes/chat.rs b/src/apps/cli/src/modes/chat.rs
index 82aa7d6513..bba902a043 100644
--- a/src/apps/cli/src/modes/chat.rs
+++ b/src/apps/cli/src/modes/chat.rs
@@ -23,10 +23,9 @@ use tokio::sync::broadcast::error::TryRecvError;
 use bitfun_app_server_protocol::model::{AddModelRequest, UpdateModelRequest};
 use bitfun_app_server_protocol::skill::SkillSummary;
 use bitfun_app_server_protocol::subagent::SubagentSummary;
-use bitfun_core_types::SessionUsageReport;
 use bitfun_events::{AgenticEvent, ToolEventData, ToolEventIdentity};
 use bitfun_runtime_ports::{
-    AgentLocalCommandTurnRecordRequest, AgentSessionComposerUpdate, AgentSessionLineageEntry,
+    AgentSessionComposerUpdate, AgentSessionLineageEntry,
     AgentSessionLineageInspection, AgentSessionLineageSnapshot, AgentSessionUsageRequest,
     AgentTurnCancellationResult, AgentWorkspaceReferenceSearchResult, SessionTranscript,
     WorkspaceDiffSnapshot,
diff --git a/src/apps/cli/src/modes/chat/selection.rs b/src/apps/cli/src/modes/chat/selection.rs
index 4435319964..d9048ee44f 100644
--- a/src/apps/cli/src/modes/chat/selection.rs
+++ b/src/apps/cli/src/modes/chat/selection.rs
@@ -92,20 +92,6 @@ fn apply_agent_mode_feedback(
     }
 }
 
-fn usage_report_metadata(report: &SessionUsageReport) -> Result<serde_json::Value> {
-    let usage_report = serde_json::to_value(report)
-        .map_err(|error| anyhow!("Failed to serialize usage report: {error}"))?;
-    Ok(serde_json::json!({
-        "localCommandKind": "usage_report",
-        "reportId": report.report_id,
-        "schemaVersion": report.schema_version,
-        "generatedAt": report.generated_at,
-        "modelVisible": false,
-        "usageReport": usage_report,
-        "usageReportStatus": "completed",
-    }))
-}
-
 fn apply_model_selection_feedback(
     chat_state: &mut ChatState,
     selected_display_name: &str,
@@ -252,6 +238,17 @@ impl ChatMode {
             .or_else(|| Some(self.agent.workspace_path_string()));
         let agent = self.agent.clone();
 
+        /*
+         * Rendered into the conversation view and nowhere else. A report about
+         * a session is not an event in it, and this used to write one as a
+         * `local_command` Turn as well — which the desktop then loaded from
+         * disk and gave a numbered slot in its Turn rail, because the ordinals
+         * come from the backend catalog and the catalog counts what is stored.
+         *
+         * `add_assistant_message` is already the UI-only path: `turn_id: None`,
+         * never persisted, never in model context. In a terminal the scrollback
+         * is the record, so nothing here needs to replace what is being removed.
+         */
         let report_result: Result<bitfun_core::service::session_usage::SessionUsageReport> =
             tokio::task::block_in_place(|| {
                 let session_id = session_id.clone();
@@ -262,39 +259,21 @@ impl ChatMode {
                         .filter(|path| !path.trim().is_empty())
                         .ok_or_else(|| anyhow!("Workspace path is required for usage reports"))?;
 
-                    let report = agent
+                    agent
                         .generate_session_usage_report(AgentSessionUsageRequest {
-                            session_id: session_id.clone(),
+                            session_id,
                             workspace_path: Some(workspace_path),
                             remote_connection_id: None,
                             remote_ssh_host: None,
                             include_hidden_subagents: true,
                         })
-                        .await?;
-
-                    let markdown = render_usage_report_markdown(&report);
-                    let generated_at = u64::try_from(report.generated_at).unwrap_or_default();
-                    let metadata = usage_report_metadata(&report)?;
-                    agent
-                        .record_completed_local_command_turn(AgentLocalCommandTurnRecordRequest {
-                            session_id,
-                            content: markdown,
-                            turn_id: Some(format!("local-usage-{}", report.report_id)),
-                            timestamp_ms: Some(generated_at),
-                            metadata: metadata.as_object().cloned().ok_or_else(|| {
-                                anyhow!("Usage report metadata must be an object")
-                            })?,
-                        })
-                        .await?;
-
-                    Ok(report)
+                        .await
                 })
             });
 
         match report_result {
             Ok(report) => {
-                let markdown = render_usage_report_markdown(&report);
-                chat_state.add_assistant_message(markdown);
+                chat_state.add_assistant_message(render_usage_report_markdown(&report));
                 chat_view.set_status(Some("Usage report added to conversation".to_string()));
             }
             Err(error) => {
@@ -857,10 +836,7 @@ fn session_update_unavailable_message(setting_name: &str, is_processing: bool) -
 
 #[cfg(test)]
 mod usage_metadata_tests {
-    use super::{
-        session_update_allowed, session_update_unavailable_message, usage_report_metadata,
-        SessionUsageReport,
-    };
+    use super::{session_update_allowed, session_update_unavailable_message};
 
     #[test]
     fn session_update_is_rechecked_when_an_idle_popup_outlives_turn_start() {
@@ -878,21 +854,4 @@ mod usage_metadata_tests {
             "Agent mode cannot be changed during the current turn."
         );
     }
-
-    #[test]
-    fn usage_metadata_preserves_the_existing_tui_transcript_schema() {
-        let mut report = SessionUsageReport::partial_unavailable("session-1", 1_778_347_200_000);
-        report.report_id = "usage-session-1-1778347200000".to_string();
-
-        let metadata = usage_report_metadata(&report).expect("usage metadata");
-
-        assert_eq!(metadata["localCommandKind"], "usage_report");
-        assert_eq!(metadata["reportId"], report.report_id);
-        assert_eq!(metadata["schemaVersion"], report.schema_version);
-        assert_eq!(metadata["generatedAt"], report.generated_at);
-        assert_eq!(metadata["modelVisible"], false);
-        assert_eq!(metadata["usageReportStatus"], "completed");
-        assert_eq!(metadata["usageReport"]["sessionId"], "session-1");
-        assert_eq!(metadata.as_object().map(serde_json::Map::len), Some(7));
-    }
 }
diff --git a/src/apps/cli/src/shared_runtime.rs b/src/apps/cli/src/shared_runtime.rs
index 3c2cad6a38..a5af4e4b6c 100644
--- a/src/apps/cli/src/shared_runtime.rs
+++ b/src/apps/cli/src/shared_runtime.rs
@@ -593,12 +593,6 @@ impl RuntimeIpcRequestHandler for SharedRuntimeHandler {
                     .remove(&request.tool_id);
                 Ok(RuntimeIpcOperationResult::Unit)
             }
-            RuntimeIpcOperation::RecordLocalCommandTurn { request } => self
-                .runtime
-                .record_completed_local_command_turn(request)
-                .await
-                .map(|record| RuntimeIpcOperationResult::LocalCommandTurnRecorded { record })
-                .map_err(runtime_ipc_error),
         }
     }
 
diff --git a/src/apps/cli/src/shared_tui_backend.rs b/src/apps/cli/src/shared_tui_backend.rs
index fc7061cf86..8c7d3871cf 100644
--- a/src/apps/cli/src/shared_tui_backend.rs
+++ b/src/apps/cli/src/shared_tui_backend.rs
@@ -502,21 +502,6 @@ impl TuiBackend for SharedTuiBackend {
         Ok(SubmitUserAnswersResponse {})
     }
 
-    async fn record_local_command_turn(
-        &self,
-        request: RecordLocalCommandTurnRequest,
-    ) -> Result<RecordLocalCommandTurnResponse, TuiBackendError> {
-        match self
-            .request(RuntimeIpcOperation::RecordLocalCommandTurn { request: request.0 })
-            .await?
-        {
-            RuntimeIpcOperationResult::LocalCommandTurnRecorded { record } => {
-                Ok(RecordLocalCommandTurnResponse(record))
-            }
-            other => Err(unexpected("record_local_command_turn", other)),
-        }
-    }
-
     async fn respond_permission(
         &self,
         request: RespondPermissionRequest,
@@ -1209,7 +1194,6 @@ fn tui_capabilities(management: &AppManagementCapabilities) -> Vec<CapabilityDes
             "session",
             vec![
                 "session/sync",
-                "session/recordLocalCommandTurn",
                 "session/rename",
                 "session/updateModel",
                 "session/updateMode",
diff --git a/src/apps/cli/src/tui_backend.rs b/src/apps/cli/src/tui_backend.rs
index 4aa747bdc7..36f7ab618a 100644
--- a/src/apps/cli/src/tui_backend.rs
+++ b/src/apps/cli/src/tui_backend.rs
@@ -147,10 +147,6 @@ pub(crate) trait TuiBackend: Send + Sync {
         &self,
         request: SubmitUserAnswersRequest,
     ) -> Result<SubmitUserAnswersResponse, TuiBackendError>;
-    async fn record_local_command_turn(
-        &self,
-        request: RecordLocalCommandTurnRequest,
-    ) -> Result<RecordLocalCommandTurnResponse, TuiBackendError>;
     async fn respond_permission(
         &self,
         request: RespondPermissionRequest,
@@ -503,13 +499,6 @@ impl TuiBackend for AppServerTuiBackend {
         map_client(self.client.submit_user_answers(request).await)
     }
 
-    async fn record_local_command_turn(
-        &self,
-        request: RecordLocalCommandTurnRequest,
-    ) -> Result<RecordLocalCommandTurnResponse, TuiBackendError> {
-        map_client(self.client.record_local_command_turn(request).await)
-    }
-
     async fn respond_permission(
         &self,
         request: RespondPermissionRequest,
diff --git a/src/apps/cli/tests/cli_command_contracts/product_assembly_cli.rs b/src/apps/cli/tests/cli_command_contracts/product_assembly_cli.rs
index 2f453a9c95..da2cb83a06 100644
--- a/src/apps/cli/tests/cli_command_contracts/product_assembly_cli.rs
+++ b/src/apps/cli/tests/cli_command_contracts/product_assembly_cli.rs
@@ -249,10 +249,19 @@ fn peer_session_control_and_usage_persistence_use_runtime_sdk() {
             "Peer Host session control must route {sdk_operation} through the Runtime SDK"
         );
     }
+    // Inverted, along with the behaviour it described. `/usage` renders into
+    // the conversation view and writes nothing: a report about a session is not
+    // an event in it, and the Turn this used to persist was loaded back by the
+    // desktop and given a numbered slot in its Turn rail. `add_assistant_message`
+    // is the UI-only path — `turn_id: None`, never persisted — and in a terminal
+    // the scrollback is the record.
+    //
+    // Source text only. This says the call is absent, not that nothing persists;
+    // a behavioural guarantee would have to come from the runtime port's own
+    // tests.
     assert!(
-        CHAT_SELECTION.contains("record_completed_local_command_turn")
-            && !CHAT_SELECTION.contains("append_completed_local_command_turn"),
-        "TUI usage persistence must use the fixed-semantics Runtime SDK port"
+        !CHAT_SELECTION.contains("record_completed_local_command_turn"),
+        "/usage must not write a local_command Turn: it renders into the          conversation view and persists nothing"
     );
 
     for removed_compatibility_method in [
@@ -350,14 +359,13 @@ fn chat_context_reload_uses_the_same_tui_backend_as_session_operations() {
 }
 
 #[test]
-fn tui_client_covers_interactive_permission_and_local_turn_operations() {
+fn tui_client_covers_interactive_permission_operations() {
     const TUI_CLIENT: &str = include_str!("../../src/agent/tui_client.rs");
 
     for sdk_operation in [
         "subscribe_permission_requests",
         "pending_permission_requests",
         "respond_permission",
-        "record_completed_local_command_turn",
     ] {
         assert!(
             TUI_CLIENT.contains(sdk_operation),
diff --git a/src/apps/desktop/src/api/remote_workspace_policy.rs b/src/apps/desktop/src/api/remote_workspace_policy.rs
index 0715b1d8b3..2bed249162 100644
--- a/src/apps/desktop/src/api/remote_workspace_policy.rs
+++ b/src/apps/desktop/src/api/remote_workspace_policy.rs
@@ -1384,10 +1384,6 @@ pub const REMOTE_WORKSPACE_COMMAND_POLICIES: &[(&str, RemoteWorkspacePolicy)] =
     ("read_file_content", RemoteWorkspacePolicy::LegacyUnaudited),
     ("read_mcp_resource", RemoteWorkspacePolicy::LegacyUnaudited),
     ("record_file_change", RemoteWorkspacePolicy::LegacyUnaudited),
-    (
-        "record_local_command_turn",
-        RemoteWorkspacePolicy::RemoteRouted,
-    ),
     (
         "refresh_model_client",
         RemoteWorkspacePolicy::LegacyUnaudited,
diff --git a/src/apps/desktop/src/api/session_api.rs b/src/apps/desktop/src/api/session_api.rs
index abacb34899..17623bea85 100644
--- a/src/apps/desktop/src/api/session_api.rs
+++ b/src/apps/desktop/src/api/session_api.rs
@@ -12,7 +12,7 @@ use bitfun_core::agentic::persistence::{SessionBranchResult, SessionMetadataPage
 use bitfun_core::service::remote_ssh::normalize_remote_workspace_path;
 use bitfun_core::service::session::{
     DialogTurnData, SessionKind, SessionMetadata, SessionStatus, SessionTranscriptExport,
-    SessionTranscriptExportOptions, SessionTurnCatalog,
+    SessionTranscriptExportOptions,
 };
 use bitfun_core::service::session_usage::SessionUsageReport;
 use bitfun_core::service::workspace::WorkspaceKind;
@@ -89,25 +89,6 @@ pub struct SaveSessionTurnRequest {
     pub remote_ssh_host: Option<String>,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct RecordLocalCommandTurnRequest {
-    pub turn_data: DialogTurnData,
-    pub workspace_path: String,
-    #[serde(default, skip_serializing_if = "Option::is_none")]
-    pub remote_connection_id: Option<String>,
-    #[serde(default, skip_serializing_if = "Option::is_none")]
-    pub remote_ssh_host: Option<String>,
-}
-
-#[derive(Debug, Clone, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct RecordLocalCommandTurnResponse {
-    pub turn_id: String,
-    pub storage_turn_index: usize,
-    pub total_turn_count: usize,
-    pub turn_catalog: SessionTurnCatalog,
-}
-
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct SaveSessionMetadataRequest {
     pub metadata: SessionMetadata,
@@ -502,36 +483,6 @@ pub async fn save_session_turn(
     Ok(())
 }
 
-#[tauri::command]
-pub async fn record_local_command_turn(
-    request: RecordLocalCommandTurnRequest,
-    runtime: State<'_, DesktopRuntimeContext>,
-) -> Result<RecordLocalCommandTurnResponse, String> {
-    let recorded = runtime
-        .session_application()
-        .record_local_command_turn(
-            desktop_session_scope(
-                request.workspace_path.clone(),
-                request.remote_connection_id,
-                request.remote_ssh_host,
-            ),
-            &request.turn_data,
-        )
-        .await
-        .map_err(|error| format!("Failed to record local command turn: {error}"))?;
-
-    crate::api::remote_connect_api::notify_session_changed(
-        &request.turn_data.session_id,
-        &request.workspace_path,
-    );
-    Ok(RecordLocalCommandTurnResponse {
-        turn_id: recorded.turn_id,
-        storage_turn_index: recorded.storage_turn_index,
-        total_turn_count: recorded.total_turn_count,
-        turn_catalog: recorded.turn_catalog,
-    })
-}
-
 #[tauri::command]
 pub async fn save_session_metadata(
     request: SaveSessionMetadataRequest,
diff --git a/src/apps/desktop/src/lib.rs b/src/apps/desktop/src/lib.rs
index 71737837dc..0eefe56740 100644
--- a/src/apps/desktop/src/lib.rs
+++ b/src/apps/desktop/src/lib.rs
@@ -1508,7 +1508,6 @@ pub async fn run() {
             load_session_turns,
             get_session_usage_report,
             save_session_turn,
-            record_local_command_turn,
             save_session_metadata,
             export_session_transcript,
             delete_persisted_session,
diff --git a/src/apps/desktop/src/runtime/session_application.rs b/src/apps/desktop/src/runtime/session_application.rs
index 671bbc3add..5dcc080387 100644
--- a/src/apps/desktop/src/runtime/session_application.rs
+++ b/src/apps/desktop/src/runtime/session_application.rs
@@ -131,14 +131,6 @@ pub(crate) struct DesktopSessionViewRestore {
     pub timings: SessionViewRestoreTiming,
 }
 
-#[derive(Debug, Clone)]
-pub(crate) struct DesktopRecordedLocalCommandTurn {
-    pub turn_id: String,
-    pub storage_turn_index: usize,
-    pub total_turn_count: usize,
-    pub turn_catalog: SessionTurnCatalog,
-}
-
 #[derive(Debug)]
 pub(crate) struct DesktopSessionWithTurnsRestore {
     pub session: Session,
@@ -517,55 +509,6 @@ impl DesktopSessionApplication {
             .map_err(desktop_core_session_error)
     }
 
-    pub(crate) async fn record_local_command_turn(
-        &self,
-        request: DesktopSessionScopeRequest,
-        turn: &DialogTurnData,
-    ) -> DesktopSessionApplicationResult<DesktopRecordedLocalCommandTurn> {
-        let scope = self.resolved_scope(request).await;
-        self.ensure_runtime_ownership(&scope)?;
-        let storage_path = self.storage_path(&scope);
-        self.compatibility
-            .ensure_session_loaded_from_storage_path(&storage_path, &turn.session_id, false)
-            .await
-            .map_err(desktop_core_session_error)?;
-        let local_command = local_command_turn_record_request(turn)?.ok_or_else(|| {
-            DesktopSessionApplicationError::Validation(
-                "record_local_command_turn accepts only local_command Turns".to_string(),
-            )
-        })?;
-        let recorded = self
-            .agent_runtime
-            .record_completed_local_command_turn(local_command)
-            .await
-            .map_err(desktop_runtime_session_error)?;
-        let (_, _, total_turn_count, turn_catalog, _) = self
-            .compatibility
-            .restore_session_view_from_storage_path(&storage_path, &turn.session_id, false, Some(1))
-            .await
-            .map_err(desktop_core_session_error)?;
-        let catalog_entry = turn_catalog
-            .entries
-            .iter()
-            .find(|entry| {
-                entry.turn_id.as_deref() == Some(recorded.turn_id.as_str())
-                    && entry.storage_turn_index == recorded.storage_turn_index
-            })
-            .ok_or_else(|| {
-                DesktopSessionApplicationError::OutcomeUnknown(format!(
-                    "Recorded local command Turn is missing from the authoritative catalog: {}",
-                    recorded.turn_id
-                ))
-            })?;
-
-        Ok(DesktopRecordedLocalCommandTurn {
-            turn_id: recorded.turn_id,
-            storage_turn_index: catalog_entry.storage_turn_index,
-            total_turn_count,
-            turn_catalog,
-        })
-    }
-
     pub(crate) async fn touch_session(
         &self,
         request: DesktopSessionScopeRequest,
diff --git a/src/crates/adapters/agent-runtime-ipc/src/operation.rs b/src/crates/adapters/agent-runtime-ipc/src/operation.rs
index c655c651c4..5dd337d4a9 100644
--- a/src/crates/adapters/agent-runtime-ipc/src/operation.rs
+++ b/src/crates/adapters/agent-runtime-ipc/src/operation.rs
@@ -1,7 +1,6 @@
 use bitfun_product_domains::tool_permissions::{PermissionReply, PermissionRequest};
 use bitfun_runtime_ports::{
     AgentContextReloadRequest, AgentDialogSteerRequest, AgentDialogTurnRequest,
-    AgentLocalCommandTurnRecordRequest, AgentLocalCommandTurnRecordResult,
     AgentMessageWorkspaceReferencesRequest, AgentSessionCompactionRequest,
     AgentSessionCreateRequest, AgentSessionCreateResult, AgentSessionLineageCancellationRequest,
     AgentSessionLineageInspection, AgentSessionLineageRequest, AgentSessionLineageSnapshot,
@@ -183,9 +182,6 @@ pub enum RuntimeIpcOperation {
     SubmitUserAnswers {
         request: RuntimeUserAnswersRequest,
     },
-    RecordLocalCommandTurn {
-        request: AgentLocalCommandTurnRecordRequest,
-    },
 }
 
 impl RuntimeIpcOperation {
@@ -229,7 +225,6 @@ impl RuntimeIpcOperation {
             Self::PendingPermissions { session_id }
             | Self::RespondPermission { session_id, .. } => Some(session_id),
             Self::SubmitUserAnswers { request } => Some(&request.session_id),
-            Self::RecordLocalCommandTurn { request } => Some(&request.session_id),
             Self::Health
             | Self::ListAgentModes { session_id: None }
             | Self::ListSessions { .. }
@@ -280,9 +275,6 @@ impl RuntimeIpcOperation {
             | Self::SubmitUserAnswers { .. } => {
                 RuntimeIpcOperationRules::new(CurrentController, false, false, true)
             }
-            Self::RecordLocalCommandTurn { .. } => {
-                RuntimeIpcOperationRules::new(CurrentController, true, false, true)
-            }
             Self::PendingPermissions { .. } => {
                 RuntimeIpcOperationRules::new(CurrentController, false, false, false)
             }
@@ -404,9 +396,6 @@ pub enum RuntimeIpcOperationResult {
     WorkspaceDiff {
         snapshot: WorkspaceDiffSnapshot,
     },
-    LocalCommandTurnRecorded {
-        record: AgentLocalCommandTurnRecordResult,
-    },
 }
 
 #[cfg(test)]
diff --git a/src/crates/interfaces/app-server-client/src/lib.rs b/src/crates/interfaces/app-server-client/src/lib.rs
index 8b4c59439f..6d558c008b 100644
--- a/src/crates/interfaces/app-server-client/src/lib.rs
+++ b/src/crates/interfaces/app-server-client/src/lib.rs
@@ -383,14 +383,6 @@ impl AppServerClient {
             .await
     }
 
-    pub async fn record_local_command_turn(
-        &self,
-        request: RecordLocalCommandTurnRequest,
-    ) -> Result<RecordLocalCommandTurnResponse, ClientError> {
-        self.request_with_timeout(|cx| Ok(cx.send_request(request)), SIDE_EFFECT_TIMEOUT)
-            .await
-    }
-
     pub async fn respond_permission(
         &self,
         request: RespondPermissionRequest,
diff --git a/src/crates/interfaces/app-server-protocol/src/schemas/session.rs b/src/crates/interfaces/app-server-protocol/src/schemas/session.rs
index f6eb86d78f..c2ad96c846 100644
--- a/src/crates/interfaces/app-server-protocol/src/schemas/session.rs
+++ b/src/crates/interfaces/app-server-protocol/src/schemas/session.rs
@@ -4,8 +4,7 @@ use agent_client_protocol::{JsonRpcRequest, JsonRpcResponse};
 use bitfun_core_types::SessionUsageReport;
 use bitfun_product_domains::tool_permissions::PermissionRequest;
 use bitfun_runtime_ports::{
-    AgentContextReloadRequest, AgentLocalCommandTurnRecordRequest,
-    AgentLocalCommandTurnRecordResult, AgentSessionCompactionRequest, AgentSessionCompactionResult,
+    AgentContextReloadRequest, AgentSessionCompactionRequest, AgentSessionCompactionResult,
     AgentSessionForkBeforeTurnRequest, AgentSessionForkRequest, AgentSessionForkResult,
     AgentSessionLineageCancellationRequest, AgentSessionLineageInspection,
     AgentSessionLineageRequest, AgentSessionLineageSnapshot, AgentSessionLineageTranscriptRequest,
@@ -92,13 +91,6 @@ pub struct ResolveWorkspaceRequest(pub AgentSessionWorkspaceRequest);
 #[derive(Debug, Clone, Serialize, Deserialize, JsonRpcResponse)]
 pub struct ResolveWorkspaceResponse(pub Option<AgentSessionWorkspaceBinding>);
 
-#[derive(Debug, Clone, Serialize, Deserialize, JsonRpcRequest)]
-#[request(method = "session/recordLocalCommandTurn", response = RecordLocalCommandTurnResponse)]
-pub struct RecordLocalCommandTurnRequest(pub AgentLocalCommandTurnRecordRequest);
-
-#[derive(Debug, Clone, Serialize, Deserialize, JsonRpcResponse)]
-pub struct RecordLocalCommandTurnResponse(pub AgentLocalCommandTurnRecordResult);
-
 #[derive(Debug, Clone, Serialize, Deserialize, JsonRpcRequest)]
 #[request(method = "session/rename", response = RenameSessionResponse)]
 pub struct RenameSessionRequest(pub AgentSessionRenameRequest);
diff --git a/src/crates/interfaces/app-server/src/server/handlers/app.rs b/src/crates/interfaces/app-server/src/server/handlers/app.rs
index 84b81cb020..21a6abf1fe 100644
--- a/src/crates/interfaces/app-server/src/server/handlers/app.rs
+++ b/src/crates/interfaces/app-server/src/server/handlers/app.rs
@@ -113,7 +113,6 @@ fn registered_capabilities(
                 "session/sync",
                 "session/readTranscript",
                 "session/resolveWorkspace",
-                "session/recordLocalCommandTurn",
                 "session/rename",
                 "session/setArchived",
                 "session/updateModel",
diff --git a/src/crates/interfaces/app-server/src/server/handlers/session.rs b/src/crates/interfaces/app-server/src/server/handlers/session.rs
index 59ce5cb9b4..ed7a249842 100644
--- a/src/crates/interfaces/app-server/src/server/handlers/session.rs
+++ b/src/crates/interfaces/app-server/src/server/handlers/session.rs
@@ -5,7 +5,7 @@ use bitfun_agent_runtime::sdk::{AgentSessionRestoreRequest, ProcessingPhase, Ses
 use bitfun_app_server_protocol::session::{
     CancelLineageRequest, CancelLineageResponse, CompactSessionRequest, CompactSessionResponse,
     InspectLineageRequest, InspectLineageResponse, ReadTranscriptRequest, ReadTranscriptResponse,
-    RecordLocalCommandTurnRequest, RecordLocalCommandTurnResponse, RedoSessionRequest,
+    RedoSessionRequest,
     ReloadContextRequest, ReloadContextResponse, ResolveWorkspaceRequest, ResolveWorkspaceResponse,
     RevertSessionResponse, SessionLineageRequest, SessionLineageResponse, SessionProcessingPhase,
     SessionRuntimeState, SessionUsageRequest, SessionUsageResponse, SyncSessionRequest,
@@ -223,25 +223,7 @@ pub(in crate::server) fn builder(
             },
             agent_client_protocol::on_receive_request!(),
         )
-        .on_receive_request(
-            {
-                let runtime = runtime.clone();
-                async move |request: RecordLocalCommandTurnRequest, responder, _cx| {
-                    let session_id = request.0.session_id.clone();
-                    responder.respond_with_result(
-                        runtime
-                            .runtime()
-                            .record_completed_local_command_turn(request.0)
-                            .await
-                            .map(RecordLocalCommandTurnResponse)
-                            .map_err(|error| {
-                                BitfunAppRuntime::session_runtime_error(&session_id, error)
-                            }),
-                    )
-                }
-            },
-            agent_client_protocol::on_receive_request!(),
-        )
+
         .on_receive_request(
             {
                 let runtime = runtime.clone();
diff --git a/src/crates/interfaces/app-server/tests/agent_kernel.rs b/src/crates/interfaces/app-server/tests/agent_kernel.rs
index b17051fa93..1c1ab052e5 100644
--- a/src/crates/interfaces/app-server/tests/agent_kernel.rs
+++ b/src/crates/interfaces/app-server/tests/agent_kernel.rs
@@ -301,7 +301,6 @@ struct Phase2Provider {
     steers: Mutex<Vec<ports::AgentDialogSteerRequest>>,
     shell_commands: Mutex<Vec<ports::AgentUserShellCommandRequest>>,
     answers: Mutex<Vec<ports::AgentUserAnswersRequest>>,
-    local_commands: Mutex<Vec<ports::AgentLocalCommandTurnRecordRequest>>,
     compactions: Mutex<Vec<ports::AgentSessionCompactionRequest>>,
     settlements: Mutex<Vec<ports::AgentTurnSettlementRequest>>,
     reloads: Mutex<Vec<ports::AgentContextReloadRequest>>,
@@ -468,7 +467,6 @@ impl ports::AgentLocalCommandTurnPort for Phase2Provider {
         &self,
         request: ports::AgentLocalCommandTurnRecordRequest,
     ) -> PortResult<ports::AgentLocalCommandTurnRecordResult> {
-        self.local_commands.lock().unwrap().push(request.clone());
         Ok(ports::AgentLocalCommandTurnRecordResult {
             turn_id: request
                 .turn_id
@@ -860,20 +858,6 @@ async fn phase2_mutations_route_through_runtime_owner_ports() {
                 })
                 .await
                 .expect("submit user answers");
-            let local_turn = client
-                .record_local_command_turn(protocol_session::RecordLocalCommandTurnRequest(
-                    ports::AgentLocalCommandTurnRecordRequest {
-                        session_id: "session-1".to_string(),
-                        content: "usage: 12 tokens".to_string(),
-                        turn_id: Some("local-turn".to_string()),
-                        timestamp_ms: Some(100),
-                        metadata: serde_json::Map::new(),
-                    },
-                ))
-                .await
-                .expect("record local command turn");
-            assert_eq!(local_turn.0.turn_id, "local-turn");
-
             client
                 .compact_session(protocol_session::CompactSessionRequest(
                     ports::AgentSessionCompactionRequest {
@@ -922,7 +906,6 @@ async fn phase2_mutations_route_through_runtime_owner_ports() {
                 "cargo test"
             );
             assert_eq!(provider.answers.lock().unwrap().len(), 1);
-            assert_eq!(provider.local_commands.lock().unwrap().len(), 1);
             assert_eq!(provider.compactions.lock().unwrap().len(), 1);
             assert_eq!(provider.reloads.lock().unwrap().len(), 1);
             client.shutdown().await;
diff --git a/src/web-ui/package.json b/src/web-ui/package.json
index 4ab46996af..510c7dea28 100644
--- a/src/web-ui/package.json
+++ b/src/web-ui/package.json
@@ -62,7 +62,7 @@
     "react-i18next": "^16.5.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
-    "react-virtuoso": "^4.14.1",
+    "react-virtuoso": "^4.18.11",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
diff --git a/src/web-ui/src/app/App.tsx b/src/web-ui/src/app/App.tsx
index 4a5b190778..889bd4b6ff 100644
--- a/src/web-ui/src/app/App.tsx
+++ b/src/web-ui/src/app/App.tsx
@@ -10,6 +10,7 @@ import { NotificationContainer, notificationService } from '../shared/notificati
 import { NotificationCenter } from '../shared/notification-system/components/NotificationCenter';
 import { AnnouncementProvider } from '../shared/announcement-system';
 import { ConfirmDialogRenderer } from '../component-library';
+import { SessionUsageModal } from '../flow_chat/components/usage/SessionUsageModal';
 import { createLogger } from '@/shared/utils/logger';
 import { startupTrace } from '@/shared/utils/startupTrace';
 import { isTauriRuntime } from '@/infrastructure/runtime';
@@ -898,6 +899,11 @@ function App() {
             {/* Confirm dialog */}
             <ConfirmDialogRenderer />
 
+            {/* Session usage report. Mounted here rather than in a chat view:
+                the request runs below any component, and the report outlives
+                whichever session view is on screen. */}
+            <SessionUsageModal />
+
             {/* Announcement / feature-demo / tips system */}
             <AnnouncementProvider />
 
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 796a5578c4..6d4ed693a8 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -3296,11 +3296,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           noWorkspaceMessage: t('chatInput.usageNoWorkspace'),
           failedTitle: t('chatInput.usageFailed'),
           unknownErrorMessage: t('error.unknown'),
-          loadingMarkdown: t('usage.loading.markdown'),
         },
       );
 
-      if (result.inserted) {
+      if (result.shown) {
         dispatchInput({ type: 'DEACTIVATE' });
       }
     } catch (error) {
diff --git a/src/web-ui/src/flow_chat/components/FlowItemRenderer.tsx b/src/web-ui/src/flow_chat/components/FlowItemRenderer.tsx
deleted file mode 100644
index 3a41a47c8e..0000000000
--- a/src/web-ui/src/flow_chat/components/FlowItemRenderer.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Streaming item renderer
- * Dispatches to the right component by item type
- * Uses React.memo to avoid unnecessary re-renders
- */
-
-import React from 'react';
-import { FlowItem, FlowTextItem, FlowToolItem, FlowThinkingItem, FlowUserSteeringItem, type ToolRejectOptions } from '../types/flow-chat';
-import { FlowTextBlock } from './FlowTextBlock';
-import { FlowToolCard } from './FlowToolCard';
-import { ModelThinkingDisplay } from '../tool-cards/ModelThinkingDisplay';
-import { UserSteeringBubble } from './UserSteeringBubble';
-
-interface FlowItemRendererProps {
-  item: FlowItem;
-  onFileViewRequest?: (filePath: string) => void;
-  onTabOpen?: (tabInfo: any) => void;
-  onConfirm?: (toolId: string, permissionOptionId?: string, approve?: boolean) => void;
-  onReject?: (toolId: string, options?: ToolRejectOptions) => void;
-  sessionId?: string;
-}
-
-const FlowItemRendererComponent: React.FC<FlowItemRendererProps> = ({
-  item,
-  onFileViewRequest,
-  onTabOpen,
-  onConfirm,
-  onReject,
-  sessionId
-}) => {
-  if (item.type === 'text') {
-    const textItem = item as FlowTextItem;
-    return <FlowTextBlock textItem={textItem} />;
-  }
-  
-  if (item.type === 'thinking') {
-    return <ModelThinkingDisplay thinkingItem={item as FlowThinkingItem} />;
-  }
-  
-  if (item.type === 'user-steering') {
-    return <UserSteeringBubble item={item as FlowUserSteeringItem} />;
-  }
-
-  if (item.type === 'tool') {
-    const toolItem = item as FlowToolItem;
-    return (
-      <div className="flowchat-tool-wrapper">
-        <FlowToolCard
-          toolItem={toolItem}
-          onConfirm={onConfirm}
-          onReject={onReject}
-          onOpenInEditor={onFileViewRequest}
-          onOpenInPanel={onTabOpen}
-          sessionId={sessionId}
-        />
-      </div>
-    );
-  }
-  
-  return null;
-};
-
-// Key optimization: React.memo
-export const FlowItemRenderer = React.memo(
-  FlowItemRendererComponent,
-  (prev, next) => {
-    // Re-render if ID changes
-    if (prev.item.id !== next.item.id) return false;
-    
-    // Re-render if status changes
-    if (prev.item.status !== next.item.status) return false;
-    
-    // Compare text content for text items
-    if (prev.item.type === 'text' && next.item.type === 'text') {
-      const prevText = prev.item as FlowTextItem;
-      const nextText = next.item as FlowTextItem;
-      return prevText.content === nextText.content &&
-             prevText.isStreaming === nextText.isStreaming;
-    }
-    
-    // Compare tool results and streaming params for tool items
-    if (prev.item.type === 'tool' && next.item.type === 'tool') {
-      const prevTool = prev.item as FlowToolItem;
-      const nextTool = next.item as FlowToolItem;
-      // Compare streaming params to re-render when they update
-      return prevTool.toolResult === nextTool.toolResult &&
-             prevTool.interruptionReason === nextTool.interruptionReason &&
-             prevTool.acpPermission === nextTool.acpPermission &&
-             prevTool.isParamsStreaming === nextTool.isParamsStreaming &&
-             JSON.stringify(prevTool.partialParams) === JSON.stringify(nextTool.partialParams);
-    }
-    
-    return true;
-  }
-);
-
-FlowItemRenderer.displayName = 'FlowItemRenderer';
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx b/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
index a008ed8dac..6ebf00d39c 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
@@ -7,9 +7,9 @@
  * UX notes:
  * - Click anywhere on the preview text to start editing.
  * - Cmd/Ctrl+Enter saves the edit; Esc cancels.
- * - Clicking "send now" eagerly inserts a UserSteeringBubble into the live
- *   round so the user sees feedback instantly; the backend confirmation event
- *   is deduped via `steeringId`.
+ * - Clicking "send now" eagerly inserts a steering message into the live round
+ *   so the user sees feedback instantly; the backend confirmation event is
+ *   deduped via `steeringId`.
  */
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
diff --git a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
index 11fa36380e..52b95bb3b6 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
@@ -7,7 +7,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  top: 57px; // Keep in sync with `.message-list-header` height.
+  top: 0; // FlowChatHeader is stacked above the list, so start at the viewport top.
   z-index: 10;
   pointer-events: none;
 
@@ -98,7 +98,7 @@
 // ========== Responsive tweaks ==========
 @media (max-width: 768px) {
   .scroll-to-turn-header-trigger {
-    top: 57px;
+    top: 0;
     height: 64px;
 
     &__btn {
diff --git a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.appearance.ts b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.appearance.ts
deleted file mode 100644
index 3f4bc2d016..0000000000
--- a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.appearance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const stickyTaskIndicatorAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'sticky-task-indicator',
-  parts: [
-    { id: 'root' }, { id: 'gradient' }, { id: 'content' }, { id: 'button' },
-    { id: 'icon' }, { id: 'label' }, { id: 'arrow' },
-  ],
-  states: [{ id: 'visible', selector: { kind: 'self', suffix: '[data-bf-state~="visible"]' } }],
-};
diff --git a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss
deleted file mode 100644
index bd0ee94bbc..0000000000
--- a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Sticky task indicator styles.
- * Fixed at the top of the flowchat message list with a gradient fade.
- */
-
-.sticky-task-indicator {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 93px; // Below FlowChatHeader (36px) + ScrollToTurnHeaderButton hover zone (57px).
-  z-index: 10;
-  pointer-events: none;
-
-  // Trigger area height: 40px hover zone + 20px gradient.
-  height: 60px;
-
-  opacity: 0;
-  transition: opacity 140ms ease;
-
-  // ========== Visible state ==========
-  &--visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  // ========== Gradient background layer ==========
-  &__gradient {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-
-    background: linear-gradient(
-      to bottom,
-      var(--bf-appearance-token-color-bg-scene) 0%,
-      color-mix(in srgb, var(--bf-appearance-token-color-bg-scene) 80%, transparent) 40%,
-      color-mix(in srgb, var(--bf-appearance-token-color-bg-scene) 40%, transparent) 70%,
-      transparent 100%
-    );
-  }
-
-  // ========== Content layer ==========
-  &__content {
-    position: absolute;
-    top: 8px;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
-  }
-
-  // ========== Task label button ==========
-  &__btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    max-width: min(480px, 70vw);
-    height: 28px;
-    padding: 0 10px;
-    border-radius: 999px;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    background: var(--bf-appearance-token-color-bg-scene);
-    color: var(--bf-appearance-token-color-text-muted);
-    cursor: pointer;
-    font-size: var(--bf-appearance-token-flowchat-font-size-xs);
-    line-height: 1;
-    white-space: nowrap;
-
-    box-shadow: 0 6px 16px var(--bf-appearance-token-color-overlay-black-15);
-    transition:
-      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
-      opacity 120ms ease;
-
-    &:hover {
-      border-color: var(--bf-appearance-token-border-medium);
-      color: var(--bf-appearance-token-color-text-primary);
-      transform: translateY(-1px);
-    }
-
-    &:active {
-      transform: scale(0.97);
-    }
-
-    &:focus-visible {
-      outline: none;
-      border-color: var(--bf-appearance-token-border-strong);
-      color: var(--bf-appearance-token-color-text-primary);
-      box-shadow: 0 0 0 1.5px var(--bf-appearance-token-border-strong);
-    }
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    opacity: 0.75;
-  }
-
-  &__label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__arrow {
-    flex-shrink: 0;
-    opacity: 0.6;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sticky-task-indicator,
-  .sticky-task-indicator__content,
-  .sticky-task-indicator__btn {
-    transition-duration: 0ms;
-  }
-}
-
-// ========== Responsive tweaks ==========
-@media (max-width: 768px) {
-  .sticky-task-indicator {
-    top: 93px;
-    height: 52px;
-
-    &__btn {
-      height: 26px;
-      padding: 0 8px;
-      max-width: min(320px, 80vw);
-    }
-  }
-}
diff --git a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx
deleted file mode 100644
index e6dec703a9..0000000000
--- a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Sticky task indicator.
- * Shows at the top of the message list when the user has scrolled past a Task
- * tool card, indicating which Task they are currently reading.
- * Clicking the indicator scrolls the Task to the viewport top.
- */
-
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Split, ChevronUp } from 'lucide-react';
-import { Tooltip } from '@/component-library';
-import type { VisibleTaskInfo } from '../hooks/useVisibleTaskInfo';
-import './StickyTaskIndicator.scss';
-
-interface StickyTaskIndicatorProps {
-  visible: boolean;
-  taskInfo: VisibleTaskInfo | null;
-  onClick: () => void;
-}
-
-export const StickyTaskIndicator: React.FC<StickyTaskIndicatorProps> = ({
-  visible,
-  taskInfo,
-  onClick,
-}) => {
-  const { t } = useTranslation('flow-chat');
-
-  const label = taskInfo?.label || t('toolCards.taskTool.defaultAgentKind');
-  const tooltip = t('stickyTaskIndicator.tooltip');
-
-  return (
-    <div data-bf-component="sticky-task-indicator" data-bf-part="root" data-bf-state={visible ? 'visible' : ''}
-      className={`sticky-task-indicator ${visible ? 'sticky-task-indicator--visible' : ''}`}
-      aria-hidden={!visible}
-    >
-      <div data-bf-component="sticky-task-indicator" data-bf-part="gradient" className="sticky-task-indicator__gradient" />
-      <div data-bf-component="sticky-task-indicator" data-bf-part="content" className="sticky-task-indicator__content">
-        <Tooltip content={tooltip} placement="bottom">
-          <button
-            data-bf-component="sticky-task-indicator"
-            data-bf-part="button"
-            className="sticky-task-indicator__btn"
-            onClick={onClick}
-            aria-label={tooltip}
-            tabIndex={visible ? 0 : -1}
-          >
-            <Split size={12} data-bf-component="sticky-task-indicator" data-bf-part="icon" className="sticky-task-indicator__icon" />
-            <span data-bf-component="sticky-task-indicator" data-bf-part="label" className="sticky-task-indicator__label" title={label}>
-              {label}
-            </span>
-            <ChevronUp size={12} data-bf-component="sticky-task-indicator" data-bf-part="arrow" className="sticky-task-indicator__arrow" />
-          </button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-StickyTaskIndicator.displayName = 'StickyTaskIndicator';
diff --git a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.appearance.ts b/src/web-ui/src/flow_chat/components/TurnHistoryPanel.appearance.ts
deleted file mode 100644
index bf4ceb90ae..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.appearance.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const turnHistoryPanelAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'turn-history-panel',
-  parts: [
-    { id: 'root' }, { id: 'loading' }, { id: 'empty' }, { id: 'header' },
-    { id: 'count' }, { id: 'list' }, { id: 'item' }, { id: 'itemHeader' },
-    { id: 'files' }, { id: 'filesList' }, { id: 'time' },
-  ],
-  states: [{ id: 'current', selector: { kind: 'self', suffix: '[data-bf-state~="current"]' } }],
-};
diff --git a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.scss b/src/web-ui/src/flow_chat/components/TurnHistoryPanel.scss
deleted file mode 100644
index 8ab8cf6332..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-@use '../../component-library/styles/_extended-mixins' as mixins;
-
-.turn-history-panel {
-  padding: 16px;
-  background: var(--bf-appearance-token-color-bg-primary);
-  border-radius: 8px;
-  box-shadow: var(--bf-appearance-token-shadow-sm);
-
-  .turn-history-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--bf-appearance-token-border-base);
-
-    h3 {
-      margin: 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--bf-appearance-token-color-text-primary);
-    }
-
-    .turn-count {
-      font-size: var(--bf-appearance-token-tool-card-action-font-size);
-      color: var(--bf-appearance-token-color-text-secondary);
-      background: var(--bf-appearance-token-element-bg-soft);
-      padding: 4px 8px;
-      border-radius: 4px;
-    }
-  }
-
-  .turn-history-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    max-height: 500px;
-    overflow-y: auto;
-
-  }
-
-  .turn-history-item {
-    padding: 12px;
-    border: 1px solid var(--bf-appearance-token-border-base);
-    border-radius: 6px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      border-color: var(--bf-appearance-token-color-accent-600);
-      box-shadow: 0 2px 4px color-mix(in srgb, var(--bf-appearance-token-color-accent-600) 10%, transparent);
-    }
-
-    &.current {
-      background: var(--bf-appearance-token-color-accent-100);
-      border-color: var(--bf-appearance-token-color-accent-600);
-    }
-
-    .turn-item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-
-      .turn-index {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--bf-appearance-token-color-text-primary);
-      }
-    }
-
-    .turn-item-files {
-      margin: 8px 0;
-      padding: 8px;
-      background: var(--bf-appearance-token-element-bg-subtle);
-      border-radius: 4px;
-
-      .files-label {
-        font-size: var(--bf-appearance-token-tool-card-action-font-size);
-        color: var(--bf-appearance-token-color-text-secondary);
-        font-weight: 500;
-        display: block;
-        margin-bottom: 4px;
-      }
-
-      .files-list {
-        margin: 0;
-        padding-left: 16px;
-
-        .file-item {
-          font-size: var(--bf-appearance-token-tool-card-action-font-size);
-          color: var(--bf-appearance-token-color-text-secondary);
-          margin: 2px 0;
-          font-family: var(--bf-appearance-token-font-family-mono);
-        }
-
-        .file-item-more {
-          font-size: var(--bf-appearance-token-tool-card-action-font-size);
-          color: var(--bf-appearance-token-color-text-muted);
-          font-style: italic;
-          list-style: none;
-          margin-left: -16px;
-        }
-      }
-    }
-
-    .turn-item-time {
-      font-size: var(--bf-appearance-token-flowchat-font-size-xs);
-      color: var(--bf-appearance-token-color-text-muted);
-      margin-top: 8px;
-    }
-  }
-}
-
-.turn-history-panel-loading {
-  padding: 40px;
-  text-align: center;
-  color: var(--bf-appearance-token-color-text-secondary);
-  font-size: 14px;
-}
-
-.turn-history-panel-empty {
-  padding: 40px;
-  text-align: center;
-
-  p {
-    margin: 8px 0;
-    color: var(--bf-appearance-token-color-text-secondary);
-    font-size: 14px;
-
-    &.hint {
-      font-size: var(--bf-appearance-token-tool-card-action-font-size);
-      color: var(--bf-appearance-token-color-text-muted);
-    }
-  }
-}
diff --git a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.tsx b/src/web-ui/src/flow_chat/components/TurnHistoryPanel.tsx
deleted file mode 100644
index 0ccc75ad1e..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnHistoryPanel.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { snapshotAPI } from '@/infrastructure/api';
-import { useI18n } from '@/infrastructure/i18n';
-import type { TurnSnapshot } from '@/infrastructure/api/service-api/SnapshotAPI';
-import { TurnRollbackButton } from './TurnRollbackButton';
-import { createLogger } from '@/shared/utils/logger';
-import './TurnHistoryPanel.scss';
-
-const log = createLogger('TurnHistoryPanel');
-
-interface TurnHistoryPanelProps {
-  sessionId: string;
-}
-
-/**
- * Turn history panel.
- * Shows all turns in the current session and allows rollback.
- */
-export const TurnHistoryPanel: React.FC<TurnHistoryPanelProps> = ({ sessionId }) => {
-  const { formatDate } = useI18n('flow-chat');
-  const [turns, setTurns] = useState<TurnSnapshot[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [currentTurnIndex, setCurrentTurnIndex] = useState<number>(-1);
-
-  const loadTurns = useCallback(async () => {
-    if (!sessionId) return;
-    
-    setLoading(true);
-    try {
-      const turnList = await snapshotAPI.getSessionTurnSnapshots(sessionId);
-      setTurns(turnList);
-      setCurrentTurnIndex(turnList.length > 0 ? turnList.length - 1 : -1);
-    } catch (error) {
-      log.error('Failed to load turn snapshots', { sessionId, error });
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId]);
-
-  useEffect(() => {
-    void loadTurns();
-  }, [loadTurns]);
-
-  const handleRollbackComplete = () => {
-    void loadTurns();
-  };
-
-  if (loading) {
-    return <div data-bf-component="turn-history-panel" data-bf-part="loading" className="turn-history-panel-loading">Loading...</div>;
-  }
-
-  if (turns.length === 0) {
-    return (
-      <div data-bf-component="turn-history-panel" data-bf-part="empty" className="turn-history-panel-empty">
-        <p>No turn history available.</p>
-        <p className="hint">A snapshot is created after each AI response.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div data-bf-component="turn-history-panel" data-bf-part="root" className="turn-history-panel">
-      <div data-bf-component="turn-history-panel" data-bf-part="header" className="turn-history-header">
-        <h3>Session history</h3>
-        <span data-bf-component="turn-history-panel" data-bf-part="count" className="turn-count">{turns.length} turns</span>
-      </div>
-
-      <div data-bf-component="turn-history-panel" data-bf-part="list" className="turn-history-list">
-        {turns.map((turn, index) => (
-          <div 
-            key={`${turn.sessionId}-${turn.turnIndex}`} 
-            data-bf-component="turn-history-panel"
-            data-bf-part="item"
-            data-bf-state={index === currentTurnIndex ? 'current' : ''}
-            className={`turn-history-item ${index === currentTurnIndex ? 'current' : ''}`}
-          >
-            <div data-bf-component="turn-history-panel" data-bf-part="itemHeader" className="turn-item-header">
-              <span className="turn-index">Turn {index + 1}</span>
-              <TurnRollbackButton
-                sessionId={turn.sessionId}
-                turnIndex={turn.turnIndex}
-                isCurrent={index === currentTurnIndex}
-                onRollbackComplete={handleRollbackComplete}
-              />
-            </div>
-            
-            {turn.modifiedFiles.length > 0 && (
-              <div data-bf-component="turn-history-panel" data-bf-part="files" className="turn-item-files">
-                <span className="files-label">Modified files:</span>
-                <ul data-bf-component="turn-history-panel" data-bf-part="filesList" className="files-list">
-                  {turn.modifiedFiles.slice(0, 3).map((file: string, fileIndex: number) => (
-                    <li key={fileIndex} className="file-item">{file}</li>
-                  ))}
-                  {turn.modifiedFiles.length > 3 && (
-                    <li className="file-item-more">
-                      {turn.modifiedFiles.length - 3} more files...
-                    </li>
-                  )}
-                </ul>
-              </div>
-            )}
-
-            <div data-bf-component="turn-history-panel" data-bf-part="time" className="turn-item-time">
-              {formatDate(new Date(turn.timestamp * 1000), {
-                dateStyle: 'medium',
-                timeStyle: 'short',
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/src/web-ui/src/flow_chat/components/TurnRollbackButton.appearance.ts b/src/web-ui/src/flow_chat/components/TurnRollbackButton.appearance.ts
deleted file mode 100644
index 24c889ab06..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnRollbackButton.appearance.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const turnRollbackButtonAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'turn-rollback-button',
-  parts: [{ id: 'root' }],
-  facets: [{ id: 'mode', attribute: 'data-bf-mode', values: ['current', 'action'] }],
-  states: [{ id: 'loading', selector: { kind: 'self', suffix: '[data-bf-state~="loading"]' } }],
-};
diff --git a/src/web-ui/src/flow_chat/components/TurnRollbackButton.scss b/src/web-ui/src/flow_chat/components/TurnRollbackButton.scss
deleted file mode 100644
index 0e68fba3f6..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnRollbackButton.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.turn-rollback-button {
-  padding: 4px 12px;
-  font-size: var(--bf-appearance-token-tool-card-action-font-size);
-  font-weight: 500;
-  background: var(--bf-appearance-token-color-accent-600);
-  color: var(--bf-appearance-token-color-static-white);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-
-  &:hover {
-    background: var(--bf-appearance-token-color-accent-700);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px color-mix(in srgb, var(--bf-appearance-token-color-accent-600) 30%, transparent);
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:disabled {
-    opacity: var(--bf-appearance-token-opacity-disabled);
-    cursor: default;
-    transform: none;
-    box-shadow: none;
-  }
-}
-
-.turn-rollback-button-current {
-  padding: 4px 12px;
-  font-size: var(--bf-appearance-token-tool-card-action-font-size);
-  font-weight: 500;
-  background: var(--bf-appearance-token-color-success);
-  color: var(--bf-appearance-token-color-static-white);
-  border-radius: 4px;
-  display: inline-block;
-  white-space: nowrap;
-}
diff --git a/src/web-ui/src/flow_chat/components/TurnRollbackButton.tsx b/src/web-ui/src/flow_chat/components/TurnRollbackButton.tsx
deleted file mode 100644
index 2d34d814ce..0000000000
--- a/src/web-ui/src/flow_chat/components/TurnRollbackButton.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { snapshotAPI } from '@/infrastructure/api';
-import { notificationService } from '@/shared/notification-system';
-import { confirmDanger } from '@/component-library';
-import { createLogger } from '@/shared/utils/logger';
-import './TurnRollbackButton.scss';
-
-const log = createLogger('TurnRollbackButton');
-
-interface TurnRollbackButtonProps {
-  sessionId: string;
-  turnIndex: number;
-  isCurrent: boolean;
-  onRollbackComplete?: () => void;
-}
-
-export const TurnRollbackButton: React.FC<TurnRollbackButtonProps> = ({
-  sessionId,
-  turnIndex,
-  isCurrent,
-  onRollbackComplete,
-}) => {
-  const { t } = useTranslation('flow-chat');
-  const [loading, setLoading] = useState(false);
-  
-  const handleRollback = async () => {
-    if (isCurrent || loading) return;
-
-    const index = turnIndex + 1;
-    const confirmed = await confirmDanger(
-      t('message.rollbackPanelDialogTitle', { index }),
-      (
-        <>
-          <p className="confirm-dialog__message-intro">{t('message.rollbackPanelDialogIntro')}</p>
-          <ul className="confirm-dialog__bullet-list">
-            <li>{t('message.rollbackPanelBulletRestore', { index })}</li>
-            <li>{t('message.rollbackPanelBulletUndo', { index })}</li>
-            <li>{t('message.rollbackPanelBulletHistory')}</li>
-          </ul>
-        </>
-      )
-    );
-
-    if (!confirmed) return;
-    
-    setLoading(true);
-    try {
-      const restoredFiles = await snapshotAPI.rollbackToTurn(sessionId, turnIndex);
-      
-      log.debug('Rollback completed', { sessionId, turnIndex, restoredFilesCount: restoredFiles.length });
-      
-      // Notify related components to refresh.
-      const { globalEventBus } = await import('@/infrastructure/event-bus');
-      
-      // Refresh file tree.
-      globalEventBus.emit('file-tree:refresh');
-      
-      // Refresh open files in the editor.
-      restoredFiles.forEach(filePath => {
-        globalEventBus.emit('editor:file-changed', { filePath });
-      });
-      
-      // Refresh snapshot state.
-      globalEventBus.emit('snapshot:rollback-completed', { 
-        sessionId,
-        turnIndex,
-        restoredFiles
-      });
-      
-      // Notify parent.
-      if (onRollbackComplete) {
-        onRollbackComplete();
-      }
-      
-    } catch (error) {
-      log.error('Rollback failed', { sessionId, turnIndex, error });
-      notificationService.error(
-        `${t('message.rollbackFailed')}: ${error instanceof Error ? error.message : String(error)}`
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-  
-  if (isCurrent) {
-    return <span data-bf-component="turn-rollback-button" data-bf-part="root" data-bf-mode="current" className="turn-rollback-button-current">Current</span>;
-  }
-  
-  return (
-    <button data-bf-component="turn-rollback-button" data-bf-part="root" data-bf-mode="action" data-bf-state={loading ? 'loading' : ''}
-      className="turn-rollback-button"
-      onClick={handleRollback}
-      disabled={loading}
-      title={`Rollback to turn ${turnIndex + 1}`}
-    >
-      {loading ? 'Rolling back...' : 'Rollback'}
-    </button>
-  );
-};
-
-
diff --git a/src/web-ui/src/flow_chat/components/UserMessage.appearance.ts b/src/web-ui/src/flow_chat/components/UserMessage.appearance.ts
deleted file mode 100644
index 62cec8eba6..0000000000
--- a/src/web-ui/src/flow_chat/components/UserMessage.appearance.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const userMessageAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'user-message',
-  parts: [
-    { id: 'root' }, { id: 'content' }, { id: 'inlineContent' },
-    { id: 'footer' }, { id: 'timestamp' }, { id: 'snapshotAction' },
-  ],
-  states: [
-    { id: 'expanded', selector: { kind: 'self', suffix: '[data-bf-state~="expanded"]' } },
-    { id: 'collapsed', selector: { kind: 'self', suffix: '[data-bf-state~="collapsed"]' } },
-  ],
-};
diff --git a/src/web-ui/src/flow_chat/components/UserMessage.scss b/src/web-ui/src/flow_chat/components/UserMessage.scss
deleted file mode 100644
index c05f5efa36..0000000000
--- a/src/web-ui/src/flow_chat/components/UserMessage.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/* User message component styles. */
-
-@use '../../component-library/styles/tokens' as *;
-
-.user-message {
-  margin-bottom: 1rem;
-  padding: 1rem 1.25rem;
-  background: var(--bf-appearance-token-element-bg-medium);
-  border: 1px solid var(--bf-appearance-token-border-medium);
-  border-radius: 12px;
-  max-width: 100%;
-  width: 100%;
-  min-width: 200px;
-  max-height: 60vh;
-  display: block;
-  visibility: visible;
-  box-sizing: border-box;
-  position: relative;
-  animation: user-message-slide-in 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-  overflow-y: auto;
-  
-  &:focus-within {
-    border-color: var(--bf-appearance-token-border-prominent);
-  }
-
-  // Collapsed state
-  &--collapsed {
-    .message-inline-content {
-      display: -webkit-box !important;
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: pre-wrap;
-    }
-  }
-
-  // Expanded state
-  &--expanded {
-    .message-inline-content {
-      display: inline;
-    }
-  }
-}
-
-.message-content {
-  font-weight: 500;
-  line-height: var(--bf-appearance-token-flowchat-text-line-height);
-  color: var(--bf-appearance-token-color-text-primary);
-  position: relative;
-  z-index: 1;
-  font-size: 1em;
-  user-select: text;
-}
-
-.message-inline-content {
-  line-height: var(--bf-appearance-token-flowchat-text-line-height);
-  word-break: break-word;
-  white-space: pre-wrap;
-}
-
-.message-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 0.75rem;
-}
-
-.message-timestamp {
-  font-size: 0.75em;
-  color: var(--bf-appearance-token-color-text-muted);
-  font-weight: 400;
-}
-
-.message-snapshot-action {
-  display: flex;
-  align-items: center;
-}
-
-// ==================== Inline context tags ====================
-
-.inline-context-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  margin: 0 0.25rem;
-  border-radius: 0.375rem;
-  border: 1px solid;
-  font-size: 0.875em;
-  font-weight: 500;
-  vertical-align: middle;
-  white-space: nowrap;
-  transition: all 0.2s ease;
-  cursor: default;
-
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px var(--bf-appearance-token-color-overlay-black-12);
-  }
-}
-
-// ==================== Animations ====================
-
-@keyframes user-message-slide-in {
-  from {
-    opacity: 0;
-    transform: translateX(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}
-
diff --git a/src/web-ui/src/flow_chat/components/UserMessage.tsx b/src/web-ui/src/flow_chat/components/UserMessage.tsx
deleted file mode 100644
index 54e2fd3f82..0000000000
--- a/src/web-ui/src/flow_chat/components/UserMessage.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * User message component.
- * Parses and renders inline context tags inside user text.
- */
-
-import React, { useMemo, useState, useRef, useEffect } from 'react';
-import { File, Folder, Code, Image, Terminal, GitBranch, Link, FileText, GitPullRequest } from 'lucide-react';
-import { Tag } from '@/component-library';
-import { useI18n } from '@/infrastructure/i18n';
-import { shouldIgnoreCardToggleClick } from '@/shared/utils/textSelection';
-import { observeElementResize } from '@/shared/utils/sharedResizeObserver';
-import { SnapshotRollbackButton } from './SnapshotRollbackButton';
-import './UserMessage.scss';
-
-export interface UserMessageProps {
-  message?: string; // New API
-  content?: string; // Legacy API
-  timestamp?: number;
-  showTimestamp?: boolean;
-  className?: string;
-  // Turn snapshot support
-  sessionId?: string;
-  turnIndex?: number;
-  turnId?: string;
-  showSnapshotButton?: boolean;
-  isCurrentTurn?: boolean;
-}
-
-// Content segment type: text or tag.
-type ContentPart = 
-  | { type: 'text'; content: string }
-  | { type: 'tag'; tagType: string; label: string };
-
-type InlineTagColor = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'gray';
-
-// Tag metadata
-const TAG_CONFIG = {
-  file: { icon: File, tagColor: 'blue' as InlineTagColor, label: 'File' },
-  dir: { icon: Folder, tagColor: 'purple' as InlineTagColor, label: 'Directory' },
-  code: { icon: Code, tagColor: 'green' as InlineTagColor, label: 'Code' },
-  img: { icon: Image, tagColor: 'yellow' as InlineTagColor, label: 'Image' },
-  cmd: { icon: Terminal, tagColor: 'gray' as InlineTagColor, label: 'Command' },
-  chart: { icon: FileText, tagColor: 'gray' as InlineTagColor, label: 'Chart' },
-  git: { icon: GitBranch, tagColor: 'red' as InlineTagColor, label: 'Git' },
-  link: { icon: Link, tagColor: 'blue' as InlineTagColor, label: 'Link' },
-  pr: { icon: GitPullRequest, tagColor: 'purple' as InlineTagColor, label: 'Pull Request' }
-};
-
-/**
- * Parse message content into inline segments.
- * Supported format: #type:value
- *
- * Tag formats:
- * - #file:filename - File reference
- * - #dir:dirname - Directory reference
- * - #code:file:10-20 - Code snippet
- * - #img:image - Image reference
- * - #cmd:command - Command reference
- * - #chart:chart - Chart reference
- * - #git:branch - Git reference
- * - #link:URL - Link reference
- */
-function parseMessageContent(content: string): ContentPart[] {
-  const parts: ContentPart[] = [];
-  
-  // Match #type:value until whitespace or line break.
-  const tagPattern = /#(file|dir|code|img|cmd|chart|git|link|pr):([^\s\n]+)/g;
-  
-  let lastIndex = 0;
-  let match;
-  
-  while ((match = tagPattern.exec(content)) !== null) {
-    if (match.index > lastIndex) {
-      const textBefore = content.slice(lastIndex, match.index);
-      if (textBefore) {
-        parts.push({ type: 'text', content: textBefore });
-      }
-    }
-    
-    const tagType = match[1];
-    const label = match[2];
-    
-    parts.push({
-      type: 'tag',
-      tagType,
-      label
-    });
-    
-    lastIndex = match.index + match[0].length;
-  }
-  
-  if (lastIndex < content.length) {
-    const textAfter = content.slice(lastIndex);
-    if (textAfter) {
-      parts.push({ type: 'text', content: textAfter });
-    }
-  }
-  
-  if (parts.length === 0) {
-    parts.push({ type: 'text', content });
-  }
-  
-  return parts;
-}
-
-/**
- * Inline context tag component.
- */
-const InlineContextTag: React.FC<{ tagType: string; label: string }> = ({ tagType, label }) => {
-  const config = TAG_CONFIG[tagType as keyof typeof TAG_CONFIG] || TAG_CONFIG.file;
-  const IconComponent = config.icon;
-  
-  return (
-    <Tag 
-      color={config.tagColor}
-      size="small"
-      className="inline-context-tag"
-      title={`${config.label}: ${label}`}
-    >
-      <IconComponent size={12} style={{ marginRight: '4px', display: 'inline-flex', verticalAlign: 'middle' }} />
-      <span>{label}</span>
-    </Tag>
-  );
-};
-
-export const UserMessage: React.FC<UserMessageProps> = React.memo(({
-  message,
-  content,
-  timestamp,
-  showTimestamp = false,
-  className = '',
-  sessionId,
-  turnIndex,
-  turnId,
-  showSnapshotButton = false,
-  isCurrentTurn = false
-}) => {
-  const { formatDate } = useI18n('flow-chat');
-  const messageContent = message || content || '';
-  const parts = useMemo(() => parseMessageContent(messageContent), [messageContent]);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [hasOverflow, setHasOverflow] = useState(false);
-  const messageRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  
-  // Shared ResizeObserver instead of a per-message window resize listener:
-  // observer callbacks run after layout, avoiding forced reflow per message.
-  useEffect(() => {
-    const element = contentRef.current;
-    if (!element || isExpanded) {
-      setHasOverflow(false);
-      return;
-    }
-
-    const checkOverflow = () => {
-      const isOverflowing = element.scrollHeight > element.clientHeight ||
-                            element.scrollWidth > element.clientWidth;
-      setHasOverflow(isOverflowing);
-    };
-
-    checkOverflow();
-
-    return observeElementResize(element, checkOverflow);
-  }, [messageContent, isExpanded]);
-  
-  const toggleExpand = (e: React.MouseEvent) => {
-    if (shouldIgnoreCardToggleClick(e, contentRef.current)) {
-      return;
-    }
-
-    if (!hasOverflow && !isExpanded) {
-      return;
-    }
-    e.stopPropagation();
-    setIsExpanded(prev => !prev);
-  };
-  
-  useEffect(() => {
-    if (!isExpanded) {
-      return;
-    }
-    
-    const handleClickOutside = (event: MouseEvent) => {
-      if (messageRef.current && !messageRef.current.contains(event.target as Node)) {
-        setIsExpanded(false);
-      }
-    };
-    
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('click', handleClickOutside, true);
-    }, 100);
-    
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, [isExpanded]);
-  
-  const currentClassName = `user-message ${className} ${isExpanded ? 'user-message--expanded' : 'user-message--collapsed'}`;
-  
-  return (
-    <div
-      data-bf-component="user-message"
-      data-bf-part="root"
-      data-bf-state={isExpanded ? 'expanded' : 'collapsed'}
-      ref={messageRef}
-      className={currentClassName}
-    >
-      <div 
-        data-bf-component="user-message"
-        data-bf-part="content"
-        className="message-content" 
-        onClick={toggleExpand}
-        style={{ cursor: (hasOverflow || isExpanded) ? 'pointer' : 'text' }}
-      >
-        <div data-bf-component="user-message" data-bf-part="inlineContent" className="message-inline-content" ref={contentRef}>
-          {parts.map((part, index) => {
-            if (part.type === 'text') {
-              return part.content.split('\n').map((line, lineIndex) => (
-                <React.Fragment key={`text-${index}-${lineIndex}`}>
-                  {lineIndex > 0 && <br />}
-                  {line}
-                </React.Fragment>
-              ));
-            } else {
-              return (
-                <InlineContextTag
-                  key={`tag-${index}`}
-                  tagType={part.tagType}
-                  label={part.label}
-                />
-              );
-            }
-          })}
-        </div>
-      </div>
-      
-      <div data-bf-component="user-message" data-bf-part="footer" className="message-footer">
-        {showTimestamp && timestamp && (
-          <div data-bf-component="user-message" data-bf-part="timestamp" className="message-timestamp">
-            {formatDate(new Date(timestamp), {
-              hour: '2-digit',
-              minute: '2-digit',
-            })}
-          </div>
-        )}
-        
-        {showSnapshotButton && sessionId && turnId !== undefined && turnIndex !== undefined && (
-          <div data-bf-component="user-message" data-bf-part="snapshotAction" className="message-snapshot-action">
-            <SnapshotRollbackButton
-              sessionId={sessionId}
-              turnIndex={turnIndex}
-              turnId={turnId}
-              isCurrentTurn={isCurrentTurn}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});
-
-UserMessage.displayName = 'UserMessage';
diff --git a/src/web-ui/src/flow_chat/components/UserSteeringBubble.appearance.ts b/src/web-ui/src/flow_chat/components/UserSteeringBubble.appearance.ts
deleted file mode 100644
index 29db31ce20..0000000000
--- a/src/web-ui/src/flow_chat/components/UserSteeringBubble.appearance.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const userSteeringBubbleAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'user-steering-bubble',
-  parts: [
-    { id: 'images' }, { id: 'image' },
-  ],
-};
diff --git a/src/web-ui/src/flow_chat/components/UserSteeringBubble.scss b/src/web-ui/src/flow_chat/components/UserSteeringBubble.scss
deleted file mode 100644
index e9764b4aa7..0000000000
--- a/src/web-ui/src/flow_chat/components/UserSteeringBubble.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Attachments on a steering message, matching the turn-level user message so
-// an image reads the same whether it was sent at a turn boundary or injected
-// into a running turn.
-.bitfun-user-steering-bubble__images {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.bitfun-user-steering-bubble__image {
-  // Attachment-sized, not a hero image: the text stays the primary content.
-  width: 72px;
-  height: 72px;
-  border-radius: 5px;
-  overflow: hidden;
-  border: 1px solid var(--bf-appearance-token-border-base);
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-}
diff --git a/src/web-ui/src/flow_chat/components/UserSteeringBubble.tsx b/src/web-ui/src/flow_chat/components/UserSteeringBubble.tsx
deleted file mode 100644
index 131739cd3c..0000000000
--- a/src/web-ui/src/flow_chat/components/UserSteeringBubble.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Renders a `user-steering` flow item as a normal user message in the
- * conversation flow. The backend confirmation still updates this item by
- * `steeringId`, but the user-facing surface is intentionally identical to a
- * message sent from the composer — attachments included.
- *
- * The item is appended to the *current* model round's items, so it visually
- * sits after whatever thinking / text / tool-call content has already
- * streamed. When the backend finishes the current atomic step and starts a
- * new model round, that next round renders below it — matching the user's
- * mental model of "the agent reads my steering and responds in a new turn".
- */
-
-import { UserMessage } from './UserMessage';
-import type { FlowUserSteeringItem, SteeringImage } from '../types/flow-chat';
-import './UserSteeringBubble.scss';
-
-interface UserSteeringBubbleProps {
-  item: FlowUserSteeringItem;
-}
-
-function imageSource(image: SteeringImage): string | undefined {
-  if (image.dataUrl) return image.dataUrl;
-  if (image.imagePath) {
-    return `https://asset.localhost/${encodeURIComponent(image.imagePath)}`;
-  }
-  return undefined;
-}
-
-export function UserSteeringBubble({ item }: UserSteeringBubbleProps): JSX.Element {
-  const images = item.images ?? [];
-  return (
-    <>
-      <UserMessage
-        message={item.content}
-        timestamp={item.timestamp}
-      />
-      {images.length > 0 && (
-        <div
-          data-bf-component="user-steering-bubble"
-          data-bf-part="images"
-          className="bitfun-user-steering-bubble__images"
-        >
-          {images.map(image => {
-            const src = imageSource(image);
-            return src ? (
-              <div
-                data-bf-component="user-steering-bubble"
-                data-bf-part="image"
-                key={image.id}
-                className="bitfun-user-steering-bubble__image"
-              >
-                <img src={src} alt={image.name ?? image.id} />
-              </div>
-            ) : null;
-          })}
-        </div>
-      )}
-    </>
-  );
-}
-
-export default UserSteeringBubble;
diff --git a/src/web-ui/src/flow_chat/components/modern/AGENTS.md b/src/web-ui/src/flow_chat/components/modern/AGENTS.md
index d96a429bbe..6799e08752 100644
--- a/src/web-ui/src/flow_chat/components/modern/AGENTS.md
+++ b/src/web-ui/src/flow_chat/components/modern/AGENTS.md
@@ -1,127 +1,205 @@
-# FlowChat Scroll Stability Instructions
+# FlowChat Scroll Instructions
 
 This file applies to the modern FlowChat viewport implementation under this
-directory.
+directory. It is the rules. The reasoning, the measurements, and the failures
+each rule was written against live in the documents below — read the one that
+covers what you are about to change.
+
+Also follow the repository and Web UI instructions in the parent guides.
 
 ## Required Reading
 
-Before changing FlowChat rendering, projection, virtualization, scrolling,
-tool-card collapse behavior, footer reservations, runtime-status slots, or
-typewriter/reveal behavior, read:
-
-- `FLOWCHAT_SCROLL_STABILITY.md`
-
-Also follow the repository and Web UI instructions in the parent `AGENTS.md`
-files.
-
-The stability document describes the current contracts and the failure modes
-that have caused visible flashes, header drops, stale tail whitespace, and
-scroll ownership races. Treat it as part of the implementation contract, not
-as background documentation.
-
-## Stability Model
-
-The central invariant is single ownership of viewport motion:
-
-- `FlowChatViewportCoordinator` owns semantic viewport modes and anchors:
-  `pinned-item`, `following-tail`, and `preserving-element`.
-- `useFlowChatFollowOutput` owns the continuous streaming tail-follow RAF loop.
-  It is the only continuous writer that advances the viewport toward the
-  streaming tail and it must yield while an element anchor or collapse
-  transaction owns the viewport.
-- `VirtualMessageList` keeps Virtuoso's `followOutput={false}`. Do not enable
-  Virtuoso's autonomous follow behavior or introduce another effect that writes
-  the outer FlowChat viewport tail position. Independent writers are what
-  produce the drop-then-restore flash. Local scroll surfaces inside a thinking,
-  explore, terminal, or subagent card have their own narrowly scoped behavior.
-- Tool cards must not calculate `scrollTop`, `scrollBy`, compensation pixels,
-  or anchor offsets. They dispatch
-  `flowchat:tool-card-collapse-intent` before a known height reduction and use
-  `useToolCardHeightContract` for the state transition.
-- Direct `scrollTop` / `scrollTo` writes are not categorically forbidden, but
-  outer-viewport writes are restricted to the coordinator, the follow
-  controller, and the narrowly scoped `VirtualMessageList` navigation,
-  physical-bottom recovery, and reservation transactions. Every new write
-  needs an explicit owner, a user-intent guard, and a reason why the existing
-  coordinator or follow controller cannot perform it.
-- Footer `collapse` and `pin` reservations provide physical range while the
-  DOM or Virtuoso measurements settle. Apply footer compensation synchronously
-  before restoring an anchor; do not replace this with React-state-only footer
-  rendering.
-
-Stable virtual-item keys and projection identity are equally important. Do not
-split one `ModelRound` into multiple `model-round` virtual items, add
-mount-triggered animations, or use a timer to reclassify projection/grouping.
-Card-local completion preview timers are allowed only when they leave the
-virtual projection unchanged and use the existing height contract when they
-eventually collapse a card.
-
-## Required Verification
-
-Choose focused tests for the code you changed, then run the normal Web UI
-checks:
-
-```text
-pnpm run type-check:web
-pnpm --dir src/web-ui run lint
-pnpm --dir src/web-ui run test:run <focused-test-files>
-```
-
-Relevant stability tests include:
-
-- `src/flow_chat/components/modern/FlowChatViewportCoordinator.test.ts`
-- `src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx`
-- `src/flow_chat/components/modern/VirtualMessageList.layout.test.ts`
-- `src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx`
-- `src/flow_chat/components/modern/flowChatCollapseMotion.test.ts`
-
-For tool-card or collapse-contract changes, also run the nearest focused card
-tests, for example the `FileOperationToolCard`, `ExecProcessToolCardView`,
-`TaskToolDisplay`, `useToolCardHeightContract`, or `SmoothHeightCollapse` tests.
-Do not claim the stability behavior is verified from type-check/lint alone.
-
-## Manual Verification
-
-For changes that affect viewport ownership, tail follow, pinning, collapse
-height, session handoff, or scroll event handling, **require the user to perform
-the following manual verification before considering the change complete**.
-These interactions are too stateful and timing-sensitive for an Agent to verify
-reliably; an Agent may run static checks and automated tests, but must not claim
-these manual results without explicit user confirmation. Use a real streaming
-conversation and check all of the following:
-
-1. Start a new round and confirm the new user message is pinned to the intended
-   top position without a visible jump.
-2. Do not touch the viewport while output streams. When the output reaches the
-   bottom, confirm it transitions naturally into follow-output mode instead of
-   stopping short or waiting for the round to finish.
-3. While output is streaming and following, scroll upward and downward by hand.
-   Confirm the user's scroll intent immediately wins: auto-follow must not pull
-   the viewport back or re-pin it unexpectedly.
-4. Switch to another conversation during an active round, then return to the
-   original conversation. Confirm the viewport resumes the correct follow mode
-   when appropriate, without a black/empty tail, excessive synthetic footer
-   space, or a delayed recovery that depends on another user scroll.
-5. Exercise completed `Write`, `Edit`, `ExecCommand`, and terminal/tool-card
-   collapses both at the tail and in the middle of the transcript. Confirm the
-   header stays at the same viewport position while the body contracts.
-6. Repeat the flow around thinking, explore groups, runtime-status/footer
-   visibility, and at least one multi-tool round. Confirm there is no visible
-   flash, drop-then-snap-back, permanent fall, accumulating tail whitespace, or
-   one-frame loss of the pinned header.
-
-When a manual check fails, enable the FlowChat diagnostics setting and inspect
-the session `flowchat.log` before changing ownership rules. Keep diagnostic
-payloads bounded and free of message content, tool arguments, and file data.
-
-## Change Discipline
-
-- Do not add a competing scroll writer, persistent scroll lock, or ad hoc
-  `scrollBy`/`scrollTo` call from a card or renderer.
-- Do not bypass `flowchat:tool-card-collapse-intent` for a known shrink.
-- Do not clear footer reservations or semantic anchors merely to make a test
-  pass; determine which viewport owner still needs them.
-- Preserve user scroll intent, session/generation cancellation, and cleanup of
-  pending RAF/timer work.
-- Update `FLOWCHAT_SCROLL_STABILITY.md` whenever the ownership model,
-  reservation contract, collapse lifecycle, or required verification changes.
+| Changing | Read |
+|---|---|
+| the tail spacer, the follow target, pinning, holding, the snap back, resizing, the footer, the reveal | `FLOWCHAT_SCROLL_STABILITY.md` |
+| history paging, the prepend, the viewport anchor, history presentation | `FLOWCHAT_HISTORY_PAGING.md` |
+| anything that writes `scrollTop`, one-shot navigation, the diagnostic trail | `FLOWCHAT_VIEWPORT_REGISTER.md` |
+| the virtualizer, item measurement, item keys, anything a row renders | `FLOWCHAT_VIRTUALIZATION.md` |
+
+`FLOWCHAT_SCROLL_STABILITY.md` also carries *Known Gaps* for all four — check it
+before reporting a defect as new.
+
+## Reservation and Follow
+
+- FlowChat reserves a resident tail spacer of about one viewport, sized from
+  `scroller.clientHeight` and nothing else.
+- Static reservation is allowed; reactive compensation is not. Do not derive any
+  reserved height from a measured content height, a collapse delta, an animation
+  duration, or a streaming rate.
+- Do not add sticky Turn modes, pre-collapse compensation, or persistent
+  element-anchor guards.
+- The follow target lives in `flowChatTailFollow.ts` as pure functions over
+  geometry. Keep it free of timers and mutation observers.
+- `scheduleFollowToLatest` must not force the content end — the hold rule is
+  what keeps a collapse from moving the viewport.
+- `useFlowChatFollowOutput` is the only continuous outer viewport writer.
+- The follow's **write** may be eased; its **target** may not. Everything that
+  reads the follow — the settle budget, the at-tail band, the snap back — reads
+  the offset the rule owns, never how far behind the ease is riding. The ease
+  stands down while the transcript is opening, where the target is
+  authoritative.
+- A follow the frame loop is still correcting counts as being at the tail.
+  Ownership cannot stand in for that: it outlives the loop, which is exactly the
+  state a viewport stranded in the reserved blank is in.
+- The loop's stand-down for its own animated scroll is timed in milliseconds at
+  both ends — how long it waits for the animation to move, and how long it
+  waits for the animation at all. Neither may be a frame count: a frame count
+  is not a duration, and a smooth scroll eases in slowly enough that its first
+  frames do not move at all on a high-refresh display.
+- Footer height represents only the current input-stack layout and real footer
+  content such as history state and `RuntimeStatusSlot`. The tail spacer is a
+  separate sibling and must not be folded into it.
+- "At bottom" is measured against the end of real content, which sits above the
+  tail spacer, so no alignment to the last item can express it.
+
+## The Viewport Register
+
+- Every deliberate viewport write goes through `useFlowChatViewportOwner`, named
+  with the owner it belongs to, and holds that ownership for as long as it is
+  moving — an animation included. Never assign `scrollTop` or call `scrollTo`
+  on the FlowChat scroller directly.
+- Adding an owner means adding it to `FLOWCHAT_VIEWPORT_OWNERS` in priority
+  order and to its test, not adding a condition to anyone else's predicate.
+- The virtualizer's own writes are registered through its `scrollToFn` option
+  and attributed to whoever asked for the aim. Do not bypass it.
+- A writer that declines to move the viewport says so through
+  `flowChatViewportDiagnostics.ts`. The register records the writes; a write
+  that never happened is invisible everywhere else, and "nothing happened" is
+  the more common report. Anything reachable every frame goes through
+  `traceViewportRepeating`, keyed by what distinguishes one run from another —
+  **including the magnitude a reader would feel and the subject it is about**. A
+  run collapses to its first sample and turns the rest into a sum, so a key too
+  coarse to separate a rounding correction from a 400px one hides exactly the
+  events worth having: two rounds of diagnosis in a row read `0.7px` against
+  458.7px of suppressed travel spanning three different anchors.
+- There are no viewport writes outside the register. Adding one means wrapping
+  it in `traceViewportPlacement` and having a reason it cannot be a register
+  write; both writers that used to be outside are gone.
+- One user action gets one painted placement. A focus request that first
+  navigates to a Turn and then aims at an item inside it does both in the same
+  task — two placements a few frames apart are two movements the reader sees,
+  and the sampled drift lands on the first one, not the second.
+- Centring a flow item is `VirtualMessageListRef.focusFlowItem`, not
+  `element.scrollIntoView`. The virtualizer aligns *items*, so it cannot express
+  "this tool call inside this Turn"; the computed offset is the contract's
+  carve-out for a target that is not an item, and it still goes through the
+  register.
+- One-shot Turn/search/history navigation remains inside `VirtualMessageList`.
+- A gesture ends an aim, it does not merely outrank it. The library's re-aim
+  runs for 5s and cannot see a refusal, while a gesture's hold lasts 200ms, so
+  `notifyUserScrollIntent` calls `cancelAim`. Anything else that hands the
+  viewport to a new owner mid-aim owes the same call.
+
+## History Paging and the Anchor
+
+- Deciding *that* a history boundary is worth asking about belongs to
+  `flowChatHistoryBoundary.ts` and reads only a visible item range and the
+  scroll distance to each end. Deciding whether the ask is honoured stays in the
+  container, which declines while follow-output owns the viewport and until the
+  visible range has left that boundary since the last page.
+- A page asks for what lies past the *rendered* transcript, never past the
+  window the store cut. The continuous projection makes those differ, and the
+  window's end is then an ordinal already on screen.
+- Every path out of a boundary intent records an outcome and leaves the boundary
+  status in a state it can be seen in. A silent return is a status the reader
+  keeps looking at, and `loading` is not a resting state.
+- A boundary status is labelled by what it is. An `error` rendered with the
+  `loading` label is a permanent failure shown as permanent progress.
+- The ask goes out a screenful before the boundary, so the junction lands off
+  screen. Do not express that lead in items: one item here is anything from a
+  38px user message to a 5012px model round.
+- The arming latch re-arms from `historyBoundariesReached`, never from the ask.
+  Sharing one predicate makes a boundary the reader can never be off, and the
+  direction stays disarmed for the rest of the session.
+- A *visible* item range is `getVisibleItemRange`, never the rendered rows. The
+  rendered window carries overscan and reports both ends present for any
+  transcript short enough to render whole.
+- Boundaries are evaluated on scroll **intent**, not only on `scroll` events. A
+  reader already at the top produces no scroll event, so the one signal that
+  they want more history is the gesture itself. Evaluate after ownership has
+  been released, so the ask is theirs rather than our placement's.
+- Ownership is read through `isFollowingOutputNow()`, never a render-time mirror
+  of `isFollowingOutput`. A gesture releases it synchronously and asks in the
+  same handler; the mirror still reports the ownership that gesture just ended.
+- `exhausted` is latched per *window*, not per session. It answers "nothing
+  before this start ordinal", so the latch clears whenever the window's ordinals
+  change — not only when a page is `applied`.
+- A history prepend must be compensated for in `VirtualMessageList`, by the
+  height of the items that arrived above. Keying measurements on item identity
+  covers the measurements; it does not move the scroll offset. The compensation
+  cannot finish the job on its own — most of the movement is the arrived items
+  measuring over the frames after it, and only the anchor's relationship
+  survives that.
+- That compensation and the viewport anchor are displacements, not positions:
+  `viewportOwner.shift`, never a write with an owner. A gesture must not be able
+  to refuse either — paging up happens only while the reader is scrolling up, so
+  anything a gesture can refuse here is refused every time.
+- A scroll re-anchors the reader, except while the anchored Turn is missing from
+  the rendered window. A correction is owed there and cannot be measured yet, so
+  the anchor is carried through the scroll — credited with the reader's own
+  travel — never replaced by whatever else happens to be rendered.
+- The anchor's settle window is refreshed by what a frame *observed*, never by a
+  counter left over from an earlier one. A frame that stood down for another
+  owner looked at nothing, so it refreshes nothing — otherwise the loop runs at
+  frame rate for as long as that owner rests on the viewport, which at the tail
+  is indefinitely.
+- The viewport anchor lives in `flowChatViewportAnchor.ts` and
+  `useFlowChatViewportAnchor.ts` and must stay independent of the virtualizer:
+  it may read the scroller and the Turns rendered inside it, and nothing else.
+  Virtualizer-specific compensation stays in `VirtualMessageList`.
+- "A new Turn" is `activeSession.dialogTurns.at(-1)`, never the end of the
+  projection. Do not qualify that identity by whether the Turn is on screen —
+  that belongs to the response, which defers until the Turn can be aligned.
+- Detecting one means the ledger **grew**, not that the identity changed. A
+  rollback truncates `dialogTurns` and moves that identity backwards onto a Turn
+  that was always there; read as an arrival it pins the survivor to the top.
+- An action that rewrites `dialogTurns` and wants the viewport moved announces
+  it — `FLOWCHAT_MESSAGE_SUBMITTED_EVENT` for giving up a navigated history
+  window, `FLOWCHAT_TURNS_ROLLED_BACK_EVENT` for settling on a new tail. The
+  ledger cannot tell a Turn the reader sent from one that arrived from
+  elsewhere, nor a rollback from a window re-cut, and there are two dozen
+  writers of that array. Do not infer either from a count.
+
+## Virtualization and Rendering
+
+- `useFlowChatVirtualizer.ts` is the only module that may import a virtualization
+  library. It speaks in scroller offsets and item positions; anything that would
+  make a caller aware of which library is underneath belongs inside it.
+- Prefer `scrollItemIntoView` over computing an offset. The virtualizer re-aims
+  while items below the target measure, and an offset computed once cannot.
+  Compute one only when the target is not an item.
+- Anything reading an item position in the commit that changed the items calls
+  `measureRenderedItems()` first. The library skips its inline measurement while
+  the reader is scrolling, which is exactly when history arrives, so the cache
+  holds reserved estimates until the ResizeObserver delivers a frame later.
+- The virtualizer must not adjust the scroll for its own re-measurements. It
+  replays a delta against a scroll position it learns about a frame late, and
+  every continuous writer here assigns `scrollTop` directly.
+- The virtualizer never follows output.
+- No mount or enter animation inside `.virtual-item-wrapper`, no mount-triggered
+  motion that changes transcript geometry, and nothing keyed on a state change a
+  scroll can replay. A row mounts when it enters the rendered window, not when
+  its content arrives, so the animation runs again on every page up and every
+  scroll back. Cancel it at the wrapper rather than in the component — this has
+  been patched locally four times and recurred each time.
+- Tool cards reflow naturally and dispatch only `tool-card-toggle` after an
+  expanded-state change so the virtualizer can remeasure.
+- Stable virtual-item keys and projection identity must be preserved. Do not
+  split one `ModelRound` into multiple virtual items or reclassify projection
+  from a timer.
+
+## Verification
+
+`FLOWCHAT_VERIFICATION.md` is the single list — the automated checks, mapped to
+the contract each one holds, and the manual ones grouped by scenario. Do not
+keep a second copy here.
+
+Do not perform UI interaction verification. Report the manual checks as pending
+unless the user confirms them.
+
+## Keeping These Documents True
+
+Update the document that owns the area you changed, and this file only if a rule
+changed. A rule belongs here when a reviewer could catch its violation by
+reading a diff; everything else — the reasoning, the numbers, the failure it was
+written against — belongs in the document.
diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx b/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
index c75ea5e40d..cb1b094182 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
@@ -129,14 +129,10 @@ export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.m
   // One-shot auto-collapse: fires exactly once when the group transitions from
   // tail (wasCutByCritical=false) to cut (wasCutByCritical=true).
   //
-  // IMPORTANT: do NOT use `isExpanded` to guard this effect. When wasCutByCritical
-  // flips to true, the same render also recomputes isExpanded = false (because
-  // defaultExpanded = !wasCutByCritical). So `justGotCut && isExpanded` would
-  // always be false and the collapse-intent would never fire.
-  //
-  // No explicit state means the group was expanded by the live-tail default,
-  // so dispatch the height-contract event before compacting it. An explicit
-  // state is user intent and must not be overwritten by a later auto event.
+  // Do not use `isExpanded` to guard this effect. The render that flips
+  // `wasCutByCritical` also recomputes the default expanded state. No explicit
+  // state means the live-tail default may collapse naturally; an explicit
+  // state is user intent and must not be overwritten.
   useLayoutEffect(() => {
     const justGotCut = wasCutByCritical && !prevWasCutRef.current;
     prevWasCutRef.current = wasCutByCritical;
@@ -147,8 +143,6 @@ export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.m
 
     applyExpandedState(true, false, () => {
       onCollapseGroup?.(groupId);
-    }, {
-      reason: 'auto',
     });
   }, [
     applyExpandedState,
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_HISTORY_PAGING.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_HISTORY_PAGING.md
new file mode 100644
index 0000000000..4a18afba17
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_HISTORY_PAGING.md
@@ -0,0 +1,673 @@
+# FlowChat History Paging
+
+Older Turns are fetched when the reader approaches the head of the loaded
+window, prepended above them, and paid for by moving the viewport down by
+exactly what arrived. This document covers the whole of that: when the ask goes
+out, what may refuse it, how the displacement is repaid, and how the reading
+position survives the measurement that follows.
+
+Read alongside `FLOWCHAT_VIEWPORT_REGISTER.md` — the two repairs described here
+are the only writers that do not take their turn in the priority order — and
+`FLOWCHAT_VIRTUALIZATION.md`, which owns the measurement behaviour they depend
+on.
+
+## A Page Is Asked For a Screenful Early
+
+A history page is not a quiet event, and no amount of care makes it one. The
+items arrive above the reader and everything below them moves; the virtualizer
+picks its window from a scroll offset it only learns from scroll events, so for
+one commit it renders from a position the reader has already been moved off and
+the transcript below the junction goes blank; the rows then measure and the
+whole thing settles a second time. Watched frame by frame, at 1/8 speed: the
+loading notice disappears, the tail of the previous Turn leaks out, everything
+past the junction goes white, the viewport shifts up and clips the top of a user
+message, and then it is fine. Four frames, twice, at the two junctions the
+reader crossed.
+
+Every one of those steps is correct. The reader still called it a flicker and a
+jolt, because they were looking at it.
+
+So the ask goes out while the boundary is still a screenful away —
+`HISTORY_BOUNDARY_LEAD_SCREENS`, measured against live geometry rather than an
+item count, since one item here is anything from a 38px user message to a
+5012px model round. The page then lands above the viewport: the mis-aimed
+window, the blank and the re-measurement all happen where nobody is looking, and
+the reader scrolls up into content that is already there and already measured.
+It costs one page of history fetched sooner than strictly needed, and nothing on
+session open, where the boundary is a whole transcript away.
+
+The pixel rule is a union with the item rule, not a replacement. A window short
+enough that its head is on screen has no screenful of lead to offer, and that
+case is the one the item slack was written for.
+
+**The lead widens the ask and nothing else.** `historyBoundariesReached` is a
+separate function for that reason: the arming latch below disarms a direction on
+dispatch and re-arms it when the reader is no longer at the boundary, so serving
+the latch from the wider answer leaves a boundary the reader can never be off.
+Measured, with the two sharing one predicate: a 43-Turn session loaded one
+window of five Turns, and every ask afterwards was refused as `not-rearmed` —
+39 refusals over six minutes, the reader scrolling into a wall two Turns from
+the top of what was loaded. The two questions look alike and are not: *has the
+reader arrived* is about them, *is it worth asking* is about the fetch.
+
+A pass can therefore re-arm and ask in the same breath, which is the point
+rather than an oversight — "off the boundary, and a screen from it" is exactly
+the state the lead exists to serve.
+
+The lead is one screen rather than several because it only has to outlast the
+fetch. At a brisk wheel scroll the reader covers a few hundred pixels in the
+time a page takes to arrive from local storage; a longer lead just loads history
+nobody reaches.
+
+## Two Refusals Stand Between an Ask and a Page
+
+`flowChatHistoryBoundary.ts` decides that a boundary is worth asking about.
+Whether the ask is honoured is the container's, and it declines twice:
+
+**While follow-output owns the viewport.** The position the ask was derived from
+is then our own placement, not the reader's — as true of a history window being
+opened as of the live tail, so the test is ownership and not presentation mode.
+Ownership ends the moment the reader scrolls, which is exactly when the ask
+starts meaning something.
+
+**Until the visible range has left that boundary.** Prepend compensation puts
+the viewport back on the reader's content, but the virtualizer places its rows
+from a scroll offset it refreshes a frame later, so for one commit the visible
+range is still read against the head. A direction is disarmed on dispatch and
+armed again by the range leaving it — by `historyBoundariesReached`, never by
+the wider ask; an ask that resolves to anything other than `applied` re-arms
+immediately, because nothing was prepended and the range sitting at the boundary
+is still the reader's own position.
+
+Both were free under react-virtuoso: `firstItemIndex` moved the reported range
+with the prepend, so the local start index jumped by the number of items added
+and the rule stopped applying by itself.
+
+**A gesture that moves nothing still asks.** The evaluation used to hang off
+the `scroll` event, which is the one signal a reader at the top cannot produce:
+the wheel changes no offset, so no event fires, so nothing asks. Combined with
+the ownership refusal that is a closed loop, and it was measured as one. A tail
+window of three Turns fitted inside the viewport, which put the entire scroll
+range inside the reserved blank:
+
+- at the bottom of that range no row intersects the viewport at all, so
+  `getVisibleItemRange` returns nothing and there is no position to judge;
+- the snap back returns the reader to offset 0 and hands the viewport to
+  follow-output, so the one evaluation that does land at the head is refused as
+  our own placement — four times in the log, each three milliseconds after a
+  `followOutput.enter`;
+- and at offset 0 the reader's own gestures produced twenty `user-gesture`
+  claims over seven seconds with no scroll event, no anchor capture, and not
+  one evaluation.
+
+Scrolling up did nothing, permanently. So `notifyUserScrollIntent` evaluates
+too, after it has cleared follow-output's ownership — which makes the ask the
+reader's rather than our placement's, and gives the top of the range a signal
+it can actually emit.
+
+The empty visible range is traced (`historyPaging.noVisibleRange`) rather than
+returned from in silence. Reading that session, the absence of an anchor
+capture was the only way to tell "nobody asked" from "the ask was refused".
+
+**The ask reads ownership as of now, not as of the last render.** A gesture
+releases follow-output synchronously and then asks, so a render-time mirror of
+`isFollowingOutput` reports the ownership the gesture has just ended.
+`isFollowingOutputNow` is the hook's own ref, and the refusal reads it — in the
+log, `followOutput.exit` and `historyPaging.refused:
+follow-output-owns-the-viewport` sat at the same millisecond, three entries
+apart, and the ask was refused for an ownership one line older than itself.
+
+**`exhausted` describes the window that asked, not the session.** "There is
+nothing before this" is a fact about a start ordinal. Navigating to the first
+Turn asks `before`, the store answers `reached-start` for `targetOrdinal: -1`,
+and that is correct — but only until the window moves. Only `applied` used to
+clear the latch, which is the single case where the window moves *because* of
+the page; every other way it moves left the old answer standing. Measured: 3
+Turns of 43 loaded, `before` latched from a visit to Turn 1, and after jumping
+back to the tail the reader could not page at all.
+`warnHistoryPagingRefusedWithPendingTurns` fired
+(`latched-exhausted-while-partial`) and nothing acted on it. The latch is now
+cleared whenever the window's ordinals change.
+
+## Keeping the Viewport on the Reader's Content
+
+When history is prepended, the items arriving above the reader push their content
+down by their own height while `scrollTop` stays the number it was.
+`VirtualMessageList` adds that height back, in a layout effect, before anything
+else observes the new transcript. The amount is read from the virtualizer's
+placement of the item that *used to be first* — the height of exactly what
+arrived, a delta and not a total.
+
+This is the half of `firstItemIndex` that keying measurements on item identity
+does not supply, and it was left out of the TanStack migration. Everything
+downstream assumes it holds, and three separate failures were that one
+assumption breaking:
+
+- The virtualizer re-windows from its own scroll offset, which lags a frame, so
+  it renders the head. The paging rule reads that as the reader having arrived
+  at the head, and pages again — **five pages in 890ms on session open, and a
+  single junction paging a transcript back to its first Turn**.
+- The anchored Turn falls outside that window, so the anchor cannot find its
+  element, drops the anchor, and corrects nothing. Measured: **655px of history
+  arrived and `scrollTop` held at 23**, leaving the reader at the top of a block
+  they never asked to see.
+- With the reader left at the head, the paging boundary never re-arms and
+  history becomes unreachable.
+
+The arriving items are estimates until they measure, so this lands close rather
+than exactly; the anchor — which can now find its Turn — takes it the rest of the
+way. It writes as `layout-correction`, so the register refuses it while anything
+above is moving the viewport on purpose: a navigation reaching a Turn, or the
+follow loop re-asserting its target, both of which already say where the reader
+belongs.
+
+## A Displacement Is Not a Movement
+
+Two things repair displacement rather than choose a position, and neither goes
+through the priority order in `FLOWCHAT_VIEWPORT_REGISTER.md`: the prepend
+compensation, and the viewport anchor. Both are `viewportOwner.shift`, which
+asks a different question — content moving under the reader changes what their
+offset *means*, and restoring that meaning is not competing with anyone over
+where the viewport should be. So they are refused only by an owner that holds a
+target and will re-assert it: follow-output, a navigation still reaching its
+Turn, a snap back mid-animation.
+
+The two are not redundant. The compensation is a pixel delta applied in the
+commit that prepends, and it is the only thing that can act when the reader's
+Turn is not rendered. The anchor restores a relationship, so it is the only
+thing that can act on a re-measurement landing *after* that commit — which is
+the majority of the movement, since the arrived items measure over the frames
+that follow. Measured: a compensation of exactly the DOM's own growth (949px)
+still left the reader at the end of the transcript, because the transcript then
+shrank 200px in the next 21ms.
+
+**The anchor cannot act in the prepend commit itself.** The virtualizer chooses
+its rendered window from a scroll offset it only learns from scroll events
+(`calculateRange` is memoised on `getScrollOffset()`, and `scrollOffset` is
+assigned in the `observeElementOffset` callback and nowhere else), so the commit
+that prepends is still windowing the position the reader has just been moved
+off. Their Turn is in the DOM a frame later. This is why the anchor keeps an
+anchor whose Turn is missing rather than dropping it on the first miss: dropping
+threw the reading position away one frame before it could be used, at four
+junctions in a row and not one correction between them.
+
+**A gesture is not one of them, and must not be.** The reader chose a position
+in the transcript, not a number of pixels. Ranking these under `user-gesture`
+was a total failure rather than an intermittent one, because history pages in
+*only* while the reader scrolls up into the boundary — so the gesture was
+holding the viewport every single time either of them had work to do. Measured:
+2494px of history arrived and the compensation was refused, `scrollTop` held at
+40, and the transcript jumped back thirteen Turns; in the same session the
+anchor stood down 23 times and corrected nothing at all.
+
+Correcting during a gesture is safe for the reason the anchor already re-anchors
+on every scroll of the reader's: within that window the anchor is tracking them,
+so a correction is zero unless something else really moved. Outside it, nothing
+changed — the claim had already lapsed.
+
+**The amount is the smallest of three bounds**, because each of them
+over-states and they do so for different reasons:
+
+| Bound | Over-states when |
+|---|---|
+| `prependedPx` — height the arrived items measure, read back from the cache | the arrived items are not all rendered, so some of them are still estimates |
+| `scrollRangeGrowthPx` — what the scroll range actually gained | the transcript also grew *below* the reader in the same commit |
+| `contentEndPx - scrollTop` — what the range can absorb | never; content arriving above the reader cannot push them past the end |
+
+Overshooting is the expensive direction. It puts the reader below the content
+end, where the snap back correctly reads them as parked in the reserved blank
+and returns them to the tail — and since paging happens only while scrolling up,
+it then does that on every attempt, which is what "scrolling up loops back to
+the end" was. Undershooting leaves them looking at slightly earlier content,
+which the anchor removes.
+
+**The cache is measured before it is read.** Left alone it is not close:
+measured twice in one session, 2174px reserved against 670px of real growth,
+then 2494px against 949px — and the whole nineteen-item transcript came to
+1236px once measured. That gap is not a virtualizer being approximate, it is a
+guard in the library. `measureElement` resizes an item inline only when the
+reader is holding still:
+
+```js
+if ((!this.isScrolling || this.scrollState) && ...) this.resizeItem(...)
+```
+
+History pages in precisely when they are not. So at a junction the rows are in
+the DOM at their real heights, the cache holds the estimates it reserved for
+them, and the ResizeObserver that would have reconciled the two does not deliver
+until after the layout effects of the commit that added them — one frame later
+than the compensation, which has to move the reader in the same paint as the
+rows that displaced them. `virtualizer.measureRenderedItems()` does that
+reconciliation itself, first thing: the same work, a frame earlier, and free for
+any row whose height was already right (`resizeItem` returns on a zero delta).
+
+`prependCompensated` still records all three numbers, so the remaining gap
+between `prependedPx` and `scrollRangeGrowthPx` is a reading rather than an
+inference — and now it is a reading of how much of the arrived block was never
+rendered, not of how far behind the cache is.
+
+## The Viewport Anchor Owns Scroll Compensation
+
+A virtualizer places items in the scroll range before it knows how tall they
+are, so every late measurement rewrites the offset of everything below it.
+Correcting for that is unavoidable. Doing it with `scrollTop` is not possible:
+the same number means a different place after every measurement. The reading
+position is therefore recorded as a **Turn and its offset from the viewport
+top**, and restored as a relationship rather than replayed as a delta. That
+makes the correction idempotent — when nothing moved it is zero.
+
+**The anchor is the only compensator.** The virtualizer's own adjustment is
+turned off (see `FLOWCHAT_VIRTUALIZATION.md`) because it replays a delta against
+a scroll position it learns about a frame late. Restoring a relationship has no
+base to go stale, which is the whole reason this is the one that stays.
+
+This was not always true, and what happened when it was not is why the rule is
+written down. react-virtuoso corrected by the change in *total* list height,
+which assumes the change happened above the viewport — scrolling up into a
+freshly paged block guarantees it did not, and one item measuring 38px -> 1003px
+moved the viewport 965px, across a whole Turn. Worse, the correction was gated
+on scroll direction, and its own prepend compensation set that direction to
+`down`, disabling it for exactly the measurements that followed: `scrollHeight`
+went 8393 -> 10073 with `scrollTop` held at 1133 and no correction at all,
+sliding the transcript down by the full 1680px. Those corrections had to be
+intercepted at `scrollBy` and answered by re-anchoring. **Do not reintroduce a
+compensator whose amount is a total rather than a delta.**
+
+**Capture is qualified by intent, not by geometry.** A scroll event cannot say
+whether the user moved or the transcript moved under them, so a *new* Turn is
+taken as the reading position only within `USER_DRIVEN_SCROLL_WINDOW_MS` of a
+wheel, touch, key, or scrollbar press — the same distinction follow-output
+draws. Two rules were tried and measured first, and both failed in ways worth
+recording:
+
+- Capturing at the intent event itself records the position *before* the scroll
+  it causes, which drags a scrolling viewport backwards.
+- Gating on "the content height did not change" blocks almost every capture,
+  because lazy measurement changes it on nearly every frame: 1075 blocked
+  captures against 8 accepted ones, and a 1037px correction issued against the
+  user's own gesture.
+
+**A scroll may not replace an anchor that is owed a repair.** While the anchored
+Turn is missing from the rendered window the displacement exists and cannot yet
+be measured, and re-reading the anchor from the DOM takes whatever *is* rendered
+at its already-displaced position — which files the displacement away as the
+reader's own choice. Measured across five history junctions: the anchor was owed
+104px, then 140px, then an amount never established, and at three of the five a
+scroll 77ms later replaced it before the Turn came back. Two of the three were
+never corrected at all.
+
+Refusing the scroll outright is not the answer either — paging up is something
+the reader does *while scrolling*, so the anchor would fight them for the whole
+settle. So the anchor is **carried** instead: their travel is a change to
+`scrollTop`, and it is subtracted from where the Turn is expected to be, leaving
+only the part the transcript moved outstanding. When the Turn renders, the
+correction is that part and none of their scrolling — however far they got.
+
+**Falling outside the intent window is not grounds for ignoring a scroll.** The
+window runs from the *input* event while the scrolling it authorises outlives
+it: a wheel notch smooth-scrolls for longer than 200ms, and a main thread busy
+with streaming delivers one coalesced event carrying the whole travel after the
+window has closed. Ignoring it leaves the reader's own movement credited to
+nobody, and the next settle undoes it in full. Measured over 181 seconds of
+reading: fourteen gestures, **one** capture, and seven corrections between 308px
+and 618px that each returned the viewport to exactly where its gesture had
+started — the reader could not get anywhere.
+
+So a scroll has three answers, not two, and the third is the same **carry**:
+
+| | |
+|---|---|
+| **Captured** | A recent intent event. The Turn they arrived at is the new reading position. |
+| **Carried** | Not provably theirs, and no registered writer owns the viewport. Nothing else changes `scrollTop`, so it is theirs. |
+| **Left alone** | A registered writer owns the viewport. It chose that position; the stored relationship is not rewritten on its account. |
+
+Carrying is safe here for the same reason it is safe anywhere: a displacement
+moves the transcript *under* a viewport whose `scrollTop` does not change, so
+carrying is a no-op for exactly the case the anchor exists to repair.
+
+The third row changes nothing the reader can see — a restore carries the anchor
+through whatever moved the viewport anyway, by the rule below — and it is kept
+because the stored offset then goes on meaning "where the Turn was when the
+reader last agreed to it", which is what the trail is read as.
+
+**A displacement moves the transcript under a `scrollTop` that stays put.** That
+is what makes it a displacement, and it is the rule the correction is computed
+from: whatever `scrollTop` has changed by since the anchor's offset was agreed
+belongs to whoever changed it, and only what is left over is drift to repair.
+
+The alternative was in place for a long time and is what "scrolling down pulls
+me back" turned out to be. The settle loop reads `scrollTop` from the DOM; a
+commit opens a window on almost every frame; the scroll event carrying the
+reader's travel is delivered after all of that. So a correction routinely runs
+against a reading position agreed hundreds of pixels ago, with no capture in
+between, and reads their own scrolling as drift. Measured over one reproduction,
+ten corrections: **every one of them was the reader's travel**, the largest
+putting a 508px scroll back where it started while the transcript had really
+moved 7.8px.
+
+Note what this does *not* weaken. A displacement contributes nothing to
+`scrollTop`, so taking the movement out never takes any of the repair with it —
+when the reader has not moved, the correction is what it always was.
+
+**The offset and the viewport position it was agreed at are two halves of one
+fact, and every writer moves both.** That is the invariant, and it is the whole
+of why the movement is taken *into* the anchor at the top of a restore rather
+than subtracted inside the correction. Subtracting it leaves the two halves free
+to drift apart: a frame with nothing to correct advanced only the position, and
+the reader's travel became a debt the next frame collected. Measured, with the
+subtraction in place: a 32px scroll and an 81px scroll each reported back a
+frame later as a correction of exactly itself, the anchored Turn provably not
+having moved. Worse, the subtraction made that frame the *ordinary* outcome —
+with the movement taken out, a frame in which only the reader moved corrects by
+exactly zero.
+
+There is one movement of `scrollTop` that must not be taken into the offset, and
+it is the repair itself: the shift puts the Turn back at the stored offset, so
+the position advances by the correction and the offset stays.
+
+The baseline is therefore carried, not re-taken. It used to be re-set to the
+current position every time a settle window opened, on the grounds that the
+prepend compensation had written from the layout effect just before and that
+write is not the reader — which was true of the compensation and false of
+everything else the reset swallowed, the reader's own travel first among them.
+The compensation now says so itself, through `absorbViewportShift`: it is the
+one movement made on the anchor's behalf, so it is the one that must not count
+as somebody moving the viewport.
+
+**The anchor must be a Turn the reader can see, at both edges.** A Turn's marker
+is its user message, which is short, so a reader inside an answer taller than
+the viewport has no marker on screen — and "the first marker below the top
+edge" then answers with the *next* Turn, however far down it is. Measured: an
+anchor held at an offset of 1695.5px in a scroller at most 1325.7px tall, at
+least 370px past the bottom edge.
+
+The two directions are not symmetrical, which is why the bottom edge is a bound
+and not a preference. Content above the viewport re-measuring moves everything
+below it, the on-screen transcript included, so a marker above the fold is a
+faithful proxy for what the reader sees. Content *below* the viewport
+re-measuring moves nothing they can see — so a marker down there reports
+movement that never reached the screen, and correcting to it **creates** a
+displacement instead of repairing one. No anchor is the honest answer, and it is
+what this already gave once every marker had gone off the top.
+
+**A navigation replaces the reading position; it does not displace it.** Standing
+down for the register is not enough — that postpones the correction for the
+length of the hold and no longer. A Turn navigation therefore drops the anchor
+outright before it aims, and the settle window opened by the commit that renders
+the placement takes the new one. Measured over four clicks on one Turn: the aim
+placed the viewport at 287px each time, and each time the anchor put it back
+1653px away on the first frame after `ONE_SHOT_NAVIGATION_HOLD_MS` lapsed, still
+anchored to the Turn the reader had jumped away from. The re-capture cannot
+happen in the aim's own task: the target is commonly outside the rendered window
+when the aim is issued, so reading the DOM there anchors to whatever the reader
+was moved off.
+
+**Restoring needs a window, not a callback.** A prepend settles over several
+frames — a margin holds the position, the real heights land in padding, then the
+margin is released — and *a margin change fires no ResizeObserver at all*, so no
+single callback covers it. Every signal that the transcript moved therefore
+opens `ANCHOR_SETTLE_FRAMES`, and a frame that had to correct refreshes it — as
+does one still waiting for the anchored Turn to be rendered, since "not there
+yet" is neither a repair nor a failure. Without that, the settle outlasts the
+wait only for as long as `ANCHOR_SETTLE_FRAMES` and
+`ANCHOR_MISSING_TURN_ATTEMPTS` happen to be the same number, which is a
+coincidence and not a design. Measured before the window existed: four
+consecutive painted frames displaced by 896px.
+
+The observer feeding this had to be repointed. `scrollerRef.firstElementChild`
+is a viewport-sized box that stays at the scroller's height no matter how much
+transcript there is — it never reported a content change at all, despite a
+comment claiming it watched content. The item list is the element that grows,
+and `border-box` is required because the virtualizer parks item space in
+padding.
+
+**The keeper does not know there is a virtualizer.** It lives in
+`flowChatViewportAnchor.ts` (geometry and the DOM contract for the anchor
+element) and `useFlowChatViewportAnchor.ts` (capture, restore, and the settle
+window), and it talks to a scroller element and the Turns rendered inside it and
+to nothing else. That is what let the virtualizer underneath it be replaced
+without the keeper changing at all.
+
+One consequence of the refresh rule is worth stating plainly: a frame that finds
+the anchor already in place still counts as answered, so an open transcript that
+no other writer owns holds one animation frame in flight indefinitely. The cost
+is a `querySelectorAll` and two rect reads per frame. That is accepted; the
+window winds down when there is no anchor to keep, and when another owner holds
+the viewport.
+
+The anchor is skipped entirely while follow-output owns the viewport. Restoring
+a pre-prepend position is only meaningful when the user owns it — and a frame
+spent standing down is *not* evidence the settle is still running. It looked at
+nothing. The loop used to refresh on the missing-Turn count instead, which is a
+fact about the last frame that did look, and that count can only advance on a
+frame that does not stand down: the same condition jammed the loop and put its
+only exit out of reach. Measured at the tail after a jump-to-latest, where
+follow-output does not release because resting there is what it is for: 27
+seconds of `anchor.stoodDown`, one per frame, zero travel, ending only when the
+reader scrolled. The wait it reported for that — `waitedFrames: 6609`,
+`waitedForMs: 28116`, against 20 attempts — was of a reading position that had
+been correct the whole time.
+
+So the outcome of a restore is five-valued inside the loop, not a boolean.
+`false` covers a stand-down, a Turn not rendered yet, and no anchor at all, and
+the loop has to treat those differently; the public `restoreAnchor` still
+answers the only question its other callers ask.
+
+**What the anchor cannot fix on its own** is a scroll range that was wrong to
+begin with. Holding the reading position across a burst of measurement is worth
+nothing if the burst blocks the main thread for 295ms. That is a property of how
+unmeasured items are reserved, not of the anchor, and it is why the virtualizer
+underneath it takes a per-item estimate.
+
+## The Ask Is Derived From the Transcript, Not From the Window
+
+**A page asks for what lies past the transcript on screen.** Those are the same
+range only until the continuous projection splices a window starting at ordinal
+0 with the live tail: the rendered transcript then runs to the newest Turn while
+the store's window still ends where it was paged in. `resolveHistoryBoundaryTarget`
+therefore takes the *rendered* range, and the store's window stays what the
+extension below operates on.
+
+Deriving the ask from the store's window instead asks to load a Turn that is
+already on screen. Measured, in a live session: a window paged in from the tail
+ended at ordinal 6 while the session had grown to 10, so the reader was sitting
+on the newest output with a `history-window` presentation behind it. Reaching
+the bottom asked for ordinal 6 — which the *turn catalog* could not resolve
+either, because it still held the six entries it was built with. 266 asks, every
+one answered `not-found`, none of them recorded, and a boundary status the
+reader was shown as history being prepared for a transcript that was already
+complete.
+
+Three things had to be true for that to reach a reader, and each is fixed where
+it belongs:
+
+- The ask used the wrong range. That is the bug; the rest is how it stayed
+  visible.
+- **`reached-latest` is not `beyond-known-total`.** Asking past the newest Turn
+  is what the bottom edge of a live transcript answers every time the reader
+  arrives at it, and it must not raise the missing-history alarm. Asking past
+  the known total going *backwards* still does.
+- **A load that fails records an outcome.** `not-ready` and the superseded
+  cancel both returned silently, which is why the trail held 266 asks and no
+  answers at all. The cancel also left the boundary status reading `loading`
+  forever; the status is ours to clear even when the load was not ours to
+  finish.
+
+The status the reader sees is separate again, and is in
+`FLOWCHAT_SCROLL_STABILITY.md`'s footer contract only insofar as the sentinel
+lives there: **a boundary in `error` must not be labelled as one in
+`loading`.** Both ends now pick their label by state. One label for both is why
+a permanent failure read as permanent progress, and why cancelling the Turn did
+not clear it — nothing about the Turn was ever involved.
+
+## Reading History Is About the Transcript, Not the Intent
+
+`viewportMode: 'history-reading'` does two things — it suppresses streaming
+follow, and it pins the jump-to-latest bar open and routes it through a
+presentation reset. Both are asking one question: **does the transcript on
+screen still reach the newest Turn?**
+
+A turn-navigation viewport intent used to answer that faithfully, because turn
+navigation was the only thing that activated a history window. It is not any
+more. A session whose loaded tail is shorter than the viewport pages older Turns
+in the moment it opens, with nobody navigating, and the first paging step has to
+set a turn intent — `isShowingHistoryPresentation` requires one, so without it
+the paged-in Turns would not render at all. The viewport sitting on the newest
+output was therefore reported as reading history: the bar was visible from the
+moment the session opened, clicking it dropped the window and paged it straight
+back in, and streaming output was not followed at all.
+
+`flowChatLiveTailWindow.ts` answers it from the window's own ordinals instead.
+These are ledger numbers, not measurements — the rule against inferring intent
+from geometry is about ambiguous quantities like `scrollTop`, and does not
+apply. The answer also keeps up on its own: a Turn arriving past the end of the
+window flips it back with no help, where a flag recorded at activation time
+would go stale and leave no way to the live tail.
+
+`isReadingTurnViewport` keeps its old meaning for the auto-tail placement, which
+asks a third question again — who owns the viewport. Merging those two is the
+mistake this separates.
+
+**A tail-anchored window must grow with the session.** It stops at the newest
+Turn that existed when it was cut, and nothing moves its end afterwards, so an
+appended Turn is simply not rendered. That is worse than it sounds: `latestTurnId`
+is read off the rendered items, so follow-output never learns the Turn exists —
+no pin, no follow, and nothing to scroll to. `resolveTailWindowGrowth` is
+level-triggered for that reason. An edge — "it reached the tail last render and
+does not now" — is consumed whether or not the extension succeeded, stranding
+the window permanently on one failure; the current state stays `'extend'` until
+the window is actually repaired. A window the user navigated to has a different
+end, so the session growing says nothing about it and it is left alone. When the
+store cannot extend far enough, the fallback drops back to the canonical tail:
+that costs a visible re-page of the history above, which is why it is the
+fallback, but it is the only branch that always shows the message just sent.
+
+## A New Turn Is a Fact About the Session
+
+`latestTurnId` comes from `activeSession.dialogTurns`, never from
+`virtualItems.at(-1)`. The projection answers where the presentation currently
+*ends*, and a history window re-cut moves that to a Turn which has existed for
+hours: measured, navigating to Turn 2 landed correctly and was then overwritten
+twice, because each window loaded on the way ended somewhere new and each of
+those read as a submission, pinning the window's last Turn to the top.
+
+**Whether the Turn can be acted on is a second question, and it does not belong
+in the identity.** Qualifying `latestTurnId` by "and it is on screen" makes a
+Turn that merely came into view look new — the same bug with the opposite sign,
+and it is how navigating to Turn 29 ended on Turn 38.
+
+**An arrival is not a change.** Getting the identity right does not settle how
+to *detect* one, and the detector asked whether `latestTurnId` differed from
+last render. A rollback truncates `dialogTurns`, which moves that identity
+backwards onto a Turn that has been there all along — so undoing a message
+pinned the Turn *before* it to the viewport top. `dialogTurnCount` separates the
+two: an arrival grows the ledger, and nothing else that rewrites `dialogTurns`
+— a history page merging in above, a window re-cut, a hydration — moves the
+last Turn at all, so requiring growth costs nothing and excludes every
+truncation.
+
+**A rollback then says where to land, because the ledger cannot.** A shorter
+`dialogTurns` is also what a window re-cut and a hydration merge look like, and
+two dozen call sites write that array; inferring an action from its size is the
+same mistake as inferring intent from `scrollTop`. So the rollback announces
+itself through `FLOWCHAT_TURNS_ROLLED_BACK_EVENT`, exactly as a submission does,
+and the transcript settles on the new tail — the Turn it was pinning is one of
+the ones that stopped existing.
+
+It takes the viewport whether or not follow owned it, on the same asymmetry that
+licenses the snap back. A rollback at Turn N removes N *and everything after
+it*, and the reader had N on screen — they clicked its own button. So the new
+tail is always within a Turn of where they already are, and there is no history
+below them to be pulled out of. Gating it on ownership instead — the first
+attempt — made it dead code in the case it was written for: reaching a Turn far
+enough up to want it gone means scrolling, and scrolling is what hands the
+viewport back to the reader. The viewport anchor then answered instead, and
+answered a different question: it holds the reader's Turn at its offset from the
+viewport top, so an 8-Turn session rolled back at Turn 7 came to rest showing
+Turns 2..6, with the new last Turn's answer below the fold. Nothing was wrong
+with the anchor. It was the only thing still running.
+
+The snap back cannot cover this either, and for two reasons worth keeping: it
+runs only from a gesture coming to rest, and a truncation is not a gesture; and
+`tailSnapBackScrollTop` returns nothing unless the viewport is *below* the
+follow target, where a rollback leaves it above.
+
+The event fires a frame after the truncation, because the answer is a scroll to
+the end of *real content* and that has to be read from a DOM the truncation has
+already been committed to. Edit-and-rerun does not announce: its truncation is
+followed by a rerun whose Turn really is new, and announcing would spend a
+visible movement on the way to it.
+
+So the response carries it instead. A new Turn is answered by pinning it to the
+viewport top; until it is in the transcript on screen there is nothing to align,
+and the fallback — the end of real content — is not a stand-in, because it
+would leave the Turn unpinned or pull a reader out of a history window. The
+answer is therefore **deferred, not dropped**: held in `pendingNewTurnIdRef` and
+retried when the transcript next changes, which is exactly when the presentation
+is restored to the live tail.
+
+**Submitting is what gives up a navigated window.** `resolveTailWindowGrowth`
+leaves such a window alone as the session grows, and that is right — a Turn
+arriving from anywhere else must not take a reader out of the history they are
+in. Nothing in the ledger separates that from a Turn the reader sent themselves,
+so the composer says so directly: `useMessageSender` announces
+`FLOWCHAT_MESSAGE_SUBMITTED_EVENT`, and the container gives up the window only
+when the transcript does not already reach the latest Turn. Measured before it
+existed: a message sent while parked on the first Turn left the transcript on a
+24-item window it was never in, with follow-output holding an answer it had
+nothing to align.
+
+## Diagnosing History Paging
+
+Older Turns are paged in when the viewport reaches the head of the loaded
+window. Every way that handshake can fail is **silent and identical in the UI**:
+the boundary status returns to `idle` and no indicator is shown, so "declined to
+load" is indistinguishable from "there is no more history". The failure is also
+intermittent, so it is traced permanently rather than reproduced on demand.
+
+`historySessionDiagnostics` keeps a per-session ring buffer shared with the
+hydration timeline, and the two log channels carry different things:
+
+| | `flowchat.log` | `webview.log` |
+|---|---|---|
+| carries | the full paging step stream | the refusal alarm + its trail |
+| enabled by | `app.logging.flow_chat_diagnostics` | always on |
+| written via | `flowChatDiagnostics.trace` | `log.warn` |
+
+The in-memory trail is kept regardless of the flag, so
+`warnHistoryPagingRefusedWithPendingTurns` is **self-sufficient** — the recent
+events travel with the warning and no one has to reproduce the fault with
+diagnostics turned on first. It warns once per session, so scrolling against a
+dead boundary cannot flood the log. Turn the flag on only when the trail's
+30-event cap is not enough.
+
+Two detectors raise it:
+
+- `exhausted` returned for `beyond-known-total`. That result **latches the
+  direction off for the rest of the session** and only `applied` clears it, so
+  reaching it on an unknown or contradictory total is how history goes
+  permanently missing rather than merely late.
+- A `before` request blocked by that latch while the session is still
+  `isPartial`. This fires at the moment the user scrolls up and nothing happens.
+
+When the report is "scrolling up shows no history, but the Turn Rail can still
+load those Turns", search the log for `declined to page older Turns`. Turn Rail
+navigation goes through `loadSessionTurnWindow` directly and bypasses the
+boundary latch entirely, which is why it keeps working. The accompanying
+`FlowChat history paging trail` warning carries the preceding events, including
+`anchor_capture_failed` — `captureHistoryPrependAnchor` returning `false`
+cancels a window that was already fetched.
+
+The viewport side of the same junction is traced separately; see *Diagnosing the
+Viewport* in `FLOWCHAT_VIEWPORT_REGISTER.md`, and in particular the pair of
+numbers that separates "the compensation overshot" from "the transcript
+re-measured".
+
+## Related Files
+
+- `flowChatHistoryBoundary.ts`
+- `flowChatViewportAnchor.ts`
+- `useFlowChatViewportAnchor.ts`
+- `flowChatLiveTailWindow.ts`
+- `VirtualMessageList.tsx`
+- `ModernFlowChatContainer.tsx`
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
index 4aefe19c57..052f725cea 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
@@ -1,788 +1,456 @@
 # FlowChat Scroll Stability
 
-This document explains the scroll-stability mechanism used by `VirtualMessageList.tsx`.
-
-## Rule Zero: Do Not Create Motion For This Mechanism To Chase
-
-Every rule below is compensation for content that changes size on its own. The
-cheapest way to keep the pane stable is to not generate the movement in the
-first place. Five invariants hold across the message list, and breaking any of
-them reintroduces the "the chat keeps refreshing itself" report:
-
-1. **Keep a live action's top-level projection identity stable.** A rendered
-   `ModelRound` remains one `model-round` virtual item, and an explore-only
-   round remains one `explore-group` virtual item with a stable key. Within a
-   `ModelRound`, an active collapsible tool is intentionally kept as a critical
-   item; after it settles it may join the surrounding explore grouping. That
-   inner grouping transition must not split the round into multiple virtual
-   items or replace the item/round keys, which would unmount the card and look
-   like a flash. Likewise, never hide the old location with `display: none` as
-   a handoff mechanism.
-2. **No mount-triggered animation on anything the list renders.** The list is
-   virtualized: an item that scrolls out of view unmounts and remounts, so a
-   `fadeIn` / `slideInUp` keyed off mount replays on every pass. Same for an
-   animation keyed off `--streaming` → `--complete`: it replays when the
-   typewriter drains. `getModelRoundItemClassName` deliberately has no `--enter`
-   modifier, and `.user-message-item` deliberately has no enter animation.
-3. **Keep wall-clock state out of projection and grouping.**
-   `sessionToVirtualItems` and `buildModelRoundItemGroups` remain pure
-   functions of session data. A timer must not reclassify a round, change a
-   `VirtualItem` key, or create a recently-completed projection. The card layer
-   does have a bounded completion-preview timer (documented below), but it only
-   changes local expanded state after the card is already rendered; it does not
-   restructure the virtual list.
-4. **Do not compact a live tail in the same completion commit.** The execution
-   and file-operation cards use a short completion-preview grace period while
-   they remain the expanded tail. A newer item still collapses them immediately;
-   if no newer item arrives, they compact after the grace period. Task,
-   question, thinking, and explore-group components retain their own
-   status/last-item policies and are not implicitly covered by this timer. When
-   an automatic collapse starts, it **may animate** for
-   `FLOWCHAT_COLLAPSE_DURATION_MS` (300ms) as long as
-   `flowchat:tool-card-collapse-intent` stays active for that full window plus
-   settle frames. Instant collapse is reserved for `prefers-reduced-motion` or
-   an explicit `disableAnimation` opt-out. Height, opacity, and transform must
-   share one duration (see `flowChatCollapseMotion.ts` /
-   `SmoothHeightCollapse`). Do not hard-swap `BaseToolCard` ↔ `CompactToolCard`
-   for expand/collapse — that remounts the body with no height transition.
-5. **Keep the leading edge stable across collapse states.** A revealed body
-   must not add `margin-inline-start`, `padding-inline-start`, or an equivalent
-   left offset relative to its collapsed header. Expanded thinking, explore
-   rows, tool details, image previews, and subagent projections all begin on
-   their owning message/card edge. Vertical and trailing-edge spacing may
-   remain, but a leading inset reads as a horizontal jump during collapse.
-
-A sixth, related rule lives in `useTypewriter`: `replayOnMount` defaults to
-false, so a still-streaming block that remounts continues from its current text
-instead of resetting to an empty string and re-growing.
-
-Read this before changing any of the following:
-
-- footer height / footer rendering in `VirtualMessageList.tsx`
-- scroll compensation state or refs
-- semantic anchor lifetime and one-shot fallback restoration
-- `ResizeObserver` / `MutationObserver` / transition listeners
-- `flowchat:tool-card-collapse-intent`
-- `tool-card-toggle`
-- `overflow-anchor` styles in `VirtualMessageList.scss`
-
-## Problem
-
-FlowChat uses `react-virtuoso` for virtualization. When the user is already at or near the bottom, collapsing content near the end of the list can shrink total content height.
-
-Without compensation, the browser clamps `scrollTop` downward immediately because the previous bottom position no longer exists. That causes the visible header/content above to drop.
-
-If we compensate too late, the user sees a flash:
-
-1. browser clamps `scrollTop`
-2. code restores `scrollTop`
-3. header appears to drop and jump back
-
-If we restore without enough compensation, the final position is still wrong.
-
-The goal of this mechanism is:
-
-- keep the visible header/content vertically stable
-- allow temporary invisible blank space at the bottom
-- avoid the collapse flash
-
-## High-Level Strategy
-
-The fix is a two-stage approach:
-
-1. Pre-compensate before a known collapse starts.
-2. Reconcile with the real measured height delta after layout updates.
-
-This prevents the "drop first, restore later" behavior while still using the actual measured shrink amount to settle on the correct final compensation.
-
-## Core Building Blocks
-
-## 1. Bottom Reservations
-
-The footer uses a unified bottom-reservation model. Each reservation contributes
-temporary tail space, but keeps its own semantics:
-
-- `collapse`: shrink protection for height loss near the bottom
-- `pin`: viewport positioning space for "pin turn to top" navigation
-
-The rendered footer height is the sum of all active reservations.
-
-A non-zero `collapse` reservation must have an explicit semantic owner: an
-active or retained tool collapse, input-stack shrink, preserved-element range,
-late-shrink clamp, or protected-range transfer from a pin. Ordinary Virtuoso
-measurement convergence has no such owner. An idle measurement with no owner
-must only rebase the measured height and must never create Footer space from a
-negative `scrollHeight` delta alone.
-
-Reservation state is ref-owned first and mirrored into React state. A Virtuoso
-Footer remount must synchronously read the ref-owned value; otherwise one stale
-React commit can remove exactly the reserved scroll range for a frame.
-
-The Virtuoso Footer does not receive reservation pixels through React context.
-Its stable DOM node is updated imperatively, and its ref callback restores the
-current ref-owned height on mount. This keeps reservation updates from causing
-an additional measurement-sensitive Virtuoso render.
-
-Important details:
-
-- the real footer height is `MESSAGE_LIST_FOOTER_HEIGHT + totalBottomReservationPx`
-- reservation space is not real content height
-- reservations may define a `floorPx`
-- a floor prevents unrelated shrink reconciliation from dropping live scroll range
-- collapse floors still drain from measured content growth or deliberate downward
-  user navigation; pin floors drain only through the sticky-pin settlement path
-- all measurements that compare old vs new content height must use:
-
-```ts
-effectiveScrollHeight = scroller.scrollHeight - getTotalBottomCompensationPx()
+FlowChat reserves a resident tail spacer below the transcript, and pairs it with
+a follow target that does not move backwards for free. Together these give a
+newly submitted Turn a top-aligned position and keep a tool-card collapse from
+dragging earlier content down.
+
+That is this document. Four siblings carry the rest.
+
+## Which Document
+
+| Changing | Read |
+|---|---|
+| the tail spacer, the follow target, pinning, holding, the snap back, resizing, the footer | this file |
+| history paging, the prepend, the viewport anchor, history presentation | `FLOWCHAT_HISTORY_PAGING.md` |
+| anything that writes `scrollTop`, one-shot navigation, the diagnostic trail | `FLOWCHAT_VIEWPORT_REGISTER.md` |
+| the virtualizer, item measurement, item keys, anything a row renders | `FLOWCHAT_VIRTUALIZATION.md` |
+| what to run before claiming it works | `FLOWCHAT_VERIFICATION.md` |
+
+*Known Gaps* below is the whole list for all five — accepted defects are easier
+to keep in one place than to hunt for.
+
+## The Rule That Matters
+
+**Static reservation is allowed. Reactive compensation is not.**
+
+The tail spacer's height is a function of the viewport and the input-stack
+inset. It must never be derived from a measured content height, a collapse
+delta, an animation duration, or a streaming rate. The moment its height reacts
+to content, it stops being a reservation and becomes the compensation engine
+that was removed in "remove synthetic tail-space scrolling" — do not rebuild
+that under a new name.
+
+## How Much To Reserve
+
+The spacer keeps two offsets inside the scroll range, and is the larger of what
+they need. Both are bounds, not estimates: reserving more than the larger one is
+pure blank at the end of the scroll range, and reserving less than either is a
+clamp.
+
+- **A pinned Turn.** Worst case its user message is the newest item with nothing
+  answering it yet, so the message, the input inset and the spacer are all that
+  lie below the message top. `clientHeight - bottomInsetPx -
+  PINNED_TURN_MIN_ITEM_HEIGHT_PX` is exactly enough to put it on the top edge.
+- **A held collapse gap.** `hold-tail` parks up to `tailHoldMaxGapPx` past the
+  content end, and an offset the browser clamps is one the hold rule does not
+  actually get to hold.
+
+`PINNED_TURN_MIN_ITEM_HEIGHT_PX` must stay an **under**estimate of a
+user-message item. Too low costs a few spare pixels of blank; too high puts the
+pinned offset past the end of the scroll range, and the Turn is clamped back
+down from the viewport top while the follow loop rewrites the clamped offset
+every frame.
+
+While the pin reserve is the binding bound, the spacer and the footer sum to a
+constant: growing the composer moves the content end without moving the end of
+the scroll range. Under the hold-gap floor the spacer stops tracking the inset
+and the range grows with the composer, exactly as it did when the spacer was a
+flat viewport.
+
+## Why Both Halves Are Required
+
+The spacer alone fixes nothing. It only removes the browser's forced `scrollTop`
+clamp when content shrinks, which is *permission* to hold position. A follow
+target that re-aligns the content end to the viewport bottom every frame will
+still drag earlier content down by the collapse delta, spacer or not.
+
+`flowChatTailFollow.ts` supplies the second half:
+
+- `pin-turn-top` holds a freshly submitted Turn's user message at the viewport
+  top while its answer is shorter than one viewport, then hands off at the
+  crossover. The blank below a pinned Turn is the mode, not a defect.
+- `hold-tail` keeps its previous offset when content shrinks, and gives ground
+  only once the blank below the live output exceeds `tailHoldMaxGapPx`
+  (a share of the viewport, not a measured delta).
+
+Both are pure functions over geometry. They hold no timers and observe no
+mutation.
+
+`useFlowChatFollowOutput` is the only continuous outer viewport writer. Three
+things about how it runs are load-bearing:
+
+- **`scheduleFollowToLatest` re-asserts ownership after a layout change but does
+  not force the content end.** A collapse resizes content too, and the hold rule
+  is what keeps that from moving the viewport.
+- **The pinned Turn's offset is re-resolved from live layout every frame.**
+  Items above it are estimates until they are measured, so a cached absolute
+  offset would drift.
+- **When streaming stops, `hold-tail` settles any remaining blank with one
+  smooth scroll.** A pinned Turn does not settle.
+
+`tailHoldMaxGapPx` is a **streaming allowance**. Blank below the live output is
+tolerable only because more output is about to fill it. Do not reuse it to
+absorb anything else — applied to a foreign forward move it parks the content
+end mid-viewport permanently, since nothing pulls the target back down.
+
+## Opening a Session
+
+A session mounts against an unsettled transcript: item heights are still
+estimates, and an `isPartial` session pages older Turns in for hundreds of
+milliseconds. The end of content can travel thousands of pixels after the first
+alignment, so opening is its own phase with its own rules.
+
+**While opening, the transcript is hidden and the follow target is
+authoritative.** It tracks the content end exactly — no remembered offset, no
+gap tolerance, and no accommodation of a foreign `scrollTop` write. The
+virtualizer writes during this window too, as items measure and it corrects for
+the ones above the viewport; fighting it is invisible because nothing is
+painted, and accommodating it would be permanent once paging stops.
+
+Nothing places the opening viewport by aligning to an item. The end of *real
+content* is above the resident tail spacer, and no item knows where that is, so
+the follow target writes the offset and the reveal waits for it.
+
+Session open enters follow-output as `session-open`, even with nothing
+streaming. The frame loop then runs on a `SETTLE_FRAMES` budget that refreshes
+whenever the target actually moves, so it tracks measurement and paging and then
+goes quiet. Without it nothing owns the viewport after the one-shot alignment,
+and the transcript strands wherever that early shot landed. `scrollToTurnEnd`
+deliberately does **not** exit follow-output for the same reason: it is the
+session-open placement and wants the same position the settle is converging on,
+and releasing ownership there hands the viewport back to nobody.
+
+**After the reveal, the follow target is cooperative.** The gap tolerance
+applies again, because from then on a shrinking content end means a card
+collapsed, not that measurement is still catching up.
+
+The reveal waits for a *semantic* signal — the last virtual item rendered with
+its end inside the viewport, plus the viewport in position — not for geometry to
+stop changing. Before the virtualizer renders anything, `scrollHeight` and the
+end sit unchanged at their unmeasured values, which is indistinguishable from
+having finished; a stability test reveals on frame 3 and shows the whole settle.
+
+## Snapping Back Out of the Reserved Blank
+
+The spacer is a full viewport the user can scroll into, and under slow streaming
+it can take a long time for output to push it away. So a gesture that comes to
+rest **below the follow target** returns to that target and hands the viewport
+to follow, whether or not follow owned it before.
+
+Three properties carry the whole design:
+
+**The target is the follow target, never the content end.** A short new Turn is
+pinned above the content end, so snapping to the content end would scroll *up*
+and shove the message the user just sent into the middle of the viewport. A
+held collapse gap is likewise a legitimate offset up to `tailHoldMaxGapPx` past
+the content end; judged against the content end it would read as an overshoot
+and fight the hold rule on every collapse. `memorylessFollowState` computes the
+target from live geometry with no remembered offset, because the offset the hold
+rule was protecting stopped being meaningful the moment the user took over.
+
+**It acts on rest, never during the gesture.** `scrollend` where available, a
+quiet period after the last scroll event where it is not. Correcting inside a
+`scroll` handler fights momentum and the virtualizer's own writes; correcting
+after the gesture ends fights nothing.
+
+**Re-entering follow here does not violate "no intent from geometry".** The
+region below the follow target is reserved blank — it carries no content, so a
+gesture ending there can only mean "take me to the end". Scrolling up to read
+history can never satisfy the condition. That asymmetry is the licence; do not
+extend it to any position that has content in it.
+
+The pin's *identity* therefore outlives a user takeover; only its *activity*
+stops. Three things retire a pin: the crossover to `hold-tail`, a newer Turn,
+and a session change. The crossover has to be one-way — a collapse can pull
+content back under one viewport, and re-pinning there would jump the viewport
+backwards. Since nothing re-pins a Turn whose identity was dropped, that is
+automatic.
+
+The snap completes on a second settle, and only when the viewport actually
+arrived: a gesture that overrode the animation mid-flight belongs to the user
+and keeps the viewport.
+
+**The snap asks whether follow is *correcting* the viewport, not whether it owns
+it.** Ownership outlives the frame loop deliberately — streaming has to be able
+to resume follow after the settle budget runs out — so the two questions differ.
+A live loop gets the viewport to itself, since it reaches its target in one
+frame and a snap back would only race it. An asleep one does not: a viewport
+left in the reserved blank under a sleeping loop is stranded, and nothing else
+was watching for it. This is the half of the scrollbar problem that is fixed
+everywhere, including where the drag itself cannot be recognised.
+
+**Where a jump to latest lands.** Every entry into follow-output resumes at the
+end of real content, with one exception: a jump to latest while the **newest**
+Turn is still pinned returns to the pin. That mode only holds while the Turn's
+answer is shorter than one viewport, so everything it has produced is already on
+screen, and aiming at the content end would scroll *up* and shove the message
+the user just sent into the middle. It is also the landing place the snap back
+picks for the same viewport state — having the two disagree would be worse than
+either choice. The exemption therefore outlives the Turn: a short Turn stays
+pinned until a newer one replaces it.
+
+## The Follow Eases Its Write, Never Its Target
+
+The follow target moves when the transcript reflows, and Markdown reflows a
+line at a time. A loop that assigns the target outright therefore spends 24px
+on one frame out of seven and nothing on the other six, which is what a reader
+reports as the output jumping rather than scrolling. `flowChatTailEase.ts`
+spends the same distance over all seven.
+
+It buys latency, not speed. Under steady growth the eased offset settles where
+its per-frame catch-up equals the growth, so the visible step converges on *the
+content's growth per frame* whatever the fraction is; smoothing spreads a lumpy
+motion evenly across frames it already had. What `TAIL_EASE_ALPHA` actually
+sets is how far behind the tail the offset rides, and that lag is what has to be
+given back when the stream stops.
+
+**Only the write is eased.** `followStateRef` still holds the offset the rule
+owns, so the settle budget, the at-tail band and the snap back all keep reading
+a target rather than a position in transit. An ease that leaked into the target
+would make every one of them chase the lag.
+
+Four boundaries, and none of them is a matter of taste:
+
+- **Past `TAIL_EASE_SNAP_ABOVE_PX` it jumps.** The first frame of an ease covers
+  a quarter of the distance, so beyond four lines the ease's *opening step* is
+  already bigger than the jump it set out to replace.
+- **A target above the current offset is never eased.** That is content getting
+  shorter — a card collapsing, a table reflowing — and easing down through it
+  reads as the transcript being clawed backwards.
+- **Not while the transcript is opening.** There the target is authoritative and
+  nothing is painted, so an ease is travel nobody can see, holding open the one
+  phase whose whole point is to end. The reveal is watching for the viewport to
+  reach the content end.
+- **An ease in flight keeps the loop alive.** The settle budget is refreshed by
+  the *target* travelling, so without this a correction arriving on the last
+  budgeted frame would be abandoned partway. It terminates on its own: the ease
+  halves what is left every frame, and a write the register refuses moves
+  nothing and so books no further frame.
+
+A step of the list's own scroll offset changes no layout, and the worry that it
+would still be charged for — the virtualizer re-windows from the scroll events
+it produces, and each one is also an anchor carry and a visible-Turn pass — did
+not show up in the measurement. Over 1580 steps and 8435px of following, list
+commits held between 15/s and 28/s while the step rate varied from 29/s to
+119/s, so the cost per step *falls* as the follow gets busier. The two highest
+commit rates in the session, 46/s and 51/s, were windows where the list follow
+took no step at all and a thinking card was growing instead. Commits track
+content changing height, which is also what moves the follow target, and the
++0.80 correlation between the two is that shared cause rather than a price.
+
+What the ease actually did, over the same run: no step over a line that was not
+a deliberate snap, 99% of steps under 12px, 67% under 4px, and every window's
+largest step exactly `TAIL_EASE_ALPHA` of its largest lag — 0.242 to 0.261
+against a nominal 0.25, which is also the evidence that nothing else was
+writing the viewport in between.
+
+"At bottom" is a band, not a point: from the end of real content down to
+whatever the follow rule owns. A pinned Turn and a held collapse gap are both
+inside it, so neither raises the jump-to-latest affordance; the reserved blank
+is outside it, so parking there does. No virtualizer-reported "at bottom" can
+express this: the end of the scroll range is the bottom of the reserved blank,
+not the end of content.
+
+The band is recomputed on scroll, on resize, **and when follow ownership
+changes** — its lower edge is the follow target, which can move while the
+viewport is perfectly still. A snap back completes at rest by construction,
+and a jump to latest that lands on a pin the viewport already sits on writes
+nothing at all. Driving the band from scroll events alone left the affordance
+visible over a viewport that was at the tail, and clicking it then had nothing
+to do — an inert button is worse than a missing one.
+
+**A follow the frame loop is still correcting is inside the band by
+definition.** The eased write rides behind the offset it owns, so a burst of
+two or three lines would otherwise drop the viewport out of the band for a few
+frames and flash the affordance over a transcript that is following the newest
+output. Ownership cannot express this: it outlives the loop deliberately, and a
+viewport stranded in the reserved blank under a sleeping loop is the case the
+snap back exists for. A gesture stops the loop before it can hide anything —
+that is what makes reading the loop safe here and reading ownership not.
+
+## Resizing Anchors the Viewport Bottom
+
+A plain scroller preserves `scrollTop` across a resize, which anchors the **top**
+edge — the bottom is where content gets revealed or swallowed. For a transcript
+that is backwards, because the interesting end is the bottom.
+`handleViewportResize` anchors there instead. Follow output already behaves this
+way for a viewport it owns; this is the same rule for one it does not, so the
+same drag stops producing two different results depending on whether the user
+had scrolled.
+
+The two halves are not equally capable, and the difference is the useful part:
+
+- **A height change moves no content.** Preserving `scrollTop + clientHeight` is
+  exact and needs no judgement about what the user was doing, so it is applied
+  unconditionally. It also preserves the distance to the content end, which
+  makes "was at the end, stays at the end" fall out for free rather than being a
+  case. Growing the viewport is additionally a *restoration*: the browser used
+  to clamp a bottom-anchored viewport at `scrollHeight - clientHeight`, and the
+  resident spacer removed that clamp.
+- **A width change reflows the transcript.** Where the line that was on the
+  bottom edge went is a DOM question, and by the time the resize is observed the
+  reflow has already happened, so it cannot be answered after the fact.
+  Answering it would mean sampling an element anchor on the scroll path, which
+  is a `getBoundingClientRect` per scroll event. Instead only the one position
+  that can be recomputed from geometry is restored — the end of the transcript —
+  which needs `wasAtTail`, the band check from *before* the resize.
+  `VirtualMessageList` mirrors `isAtBottom` into a ref for that, and calls the
+  handler ahead of recomputing it.
+
+**One correction is not enough.** A width change reflows every item and a height
+change makes the virtualizer render a different number of them; either way it
+re-measures over the following passes, so the content end keeps moving after the
+first callback. The correction therefore repeats over
+`TAIL_REALIGN_RESIZE_CALLBACKS`, a window opened only by a change to the
+scroller's own box. Streaming content growth arrives through the same observer
+and must never inherit that window — it moves the content end away from a
+resting viewport and can never strand it, so reacting to it would be all risk
+and no benefit.
+
+Two properties are shared with the gesture path, and one is not:
+
+- **Instant, never animated.** A height change moves the viewport by exactly the
+  height that was added or removed, so nothing appears to move at all; the rest
+  is a correction the user is already watching happen under the cursor. An
+  animation would add a scroll nobody asked for.
+- **No transfer of ownership** — unlike the gesture path. A gesture ending in
+  the blank says "take me to the end"; a layout change says nothing. The
+  browser's clamp never changed who owned the viewport either.
+
+Native scroll anchoring cannot help here: `overflow-anchor: none` is set
+throughout the transcript, because it fights the virtualizer.
+
+## The Frame Loop Yields to Its Own Animated Scrolls
+
+`applyFollowTarget` assigns `scrollTop` outright, which cancels an in-flight
+smooth scroll on the very next frame. Both `'smooth'` requests in
+`useFlowChatFollowOutput` — the jump to latest and the post-streaming settle —
+were therefore jumps in practice, so the loop stands down while one travels.
+
+**What ends the stand-down is the viewport having sat still for
+`SMOOTH_SCROLL_STALL_MS`.** That says the animation is over, or was cancelled,
+or never started; either way there is nothing left to yield to. Arriving on
+target ends it as well, and sooner.
+
+**Neither half of this may be counted in frames, and both were.** A frame count
+is not a duration, and the two failures are the same mistake at opposite ends
+of the animation:
+
+- The budget was 45 frames — 0.75s at 60Hz, 0.52s on a busy 200Hz display — so
+  what a caller bought depended on the machine. The browser scales a smooth
+  scroll's duration with its distance, and a jump to latest from the top of a
+  transcript is the longest thing this issues; measured, one aimed at 8717px
+  animated 5480 of them and was finished by the loop in a single 3290px write,
+  38% short.
+- The stall check was then two frames, which is 10ms at 200Hz. A programmatic
+  smooth scroll *eases in* — measured, 2px in its first 50ms against 9734px to
+  travel — and with scroll offsets quantised to 0.8px the early frames
+  genuinely do not move. So the stand-down ended 21ms after it began, having
+  animated nothing, and the jump to latest lost its animation entirely.
+
+`SMOOTH_SCROLL_STALL_MS` is therefore derived from the curve's start rather
+than from the platform's startup latency, which is the shorter of the two:
+visible increments arrive up to ~40ms apart early on, and the constant is that
+doubled. `SMOOTH_SCROLL_YIELD_MS` remains as a backstop for an animation that
+never ends at all — also a wall-clock fact, and now written as one.
+
+`followOutput.animatedScrollEnded` says which of the three ended it and how far
+the animation actually got. Both bugs above were a stand-down ending early, and
+both were invisible in the trail: the loop simply started writing, exactly as
+it does when an animation finishes properly.
+
+The stand-down ends *by falling through to the write*, not by returning. An
+animation aims at the offset it was issued for, and content arrives while it
+travels, so the frame that reclaims the viewport is also the frame that covers
+whatever grew — one catch-up step rather than one wasted frame and then a
+bigger one.
+
+The whole mechanism is *intra-owner* and deliberately outside the register:
+this is follow-output yielding to its own animation, and the register
+arbitrates between writers rather than inside one. See
+`FLOWCHAT_VIEWPORT_REGISTER.md`.
+
+## Footer Contract
+
+The footer below the items holds two independent pieces, and they must stay
+separate:
+
+```text
+message-list-footer      = current input-stack height + bottom inset + clearance
+message-list-tail-spacer = tailSpacerPxForViewport(clientHeight, footer)
 ```
 
-If you forget to subtract reservation space, future shrink/growth calculations become wrong.
-
-`pin` reservations use this extra metadata:
-
-- `targetTurnId`: which user turn the viewport should align to
-- `mode: 'transient' | 'sticky-latest'`
-- `floorPx`: the minimum tail space needed to keep the pinned target stable
-
-`sticky-latest` is used for the "latest turn should stay pinned to top" behavior.
-Its floor grows when live DOM measurements require more range and drains only
-from measured positive content growth.
-The pinned item may hand off to tail-follow only after both the complete pin
-reservation (`px`, not only `floorPx`) and collapse reservation reach zero.
-
-## 2. Synchronous Footer DOM Apply
-
-React state alone is not enough here.
-
-`applyFooterCompensationNow()` writes footer height directly to the DOM and forces layout reads:
-
-- `footer.style.height`
-- `footer.style.minHeight`
-- `footer.offsetHeight`
-- `scroller.scrollHeight`
-
-This is intentional. It ensures the browser uses the new footer height in the same turn, before we restore the anchor.
-
-If you move compensation back to "React render only", the flash can return because the DOM may still be one frame behind when `scrollTop` is restored.
-
-## 3. Semantic Anchor Coordinator
-
-`FlowChatViewportCoordinator` owns the semantic viewport anchor. It tracks one
-primary mode at a time: pinned item, following tail, or preserving an element.
-Tool cards supply an anchor element but never calculate scroll offsets or
-heights. The coordinator records the element's viewport-relative position and
-restores it after the list remeasures. While an element anchor is active, the
-coordinator also owns virtualizer compensation corrections, so independent
-scroll writers cannot fight the pinned header.
-
-The logical `isFollowingOutput` flag follows the same ownership rule: it is
-only true while the coordinator owns `following-tail`. A `sticky-latest` pin
-clears the flag and arms its turn for handoff. Once collapse protection and
-unsettled pin growth have drained, the handoff re-enters tail follow when
-either the pin reservation is empty or the natural content tail (excluding
-Footer reservations) reaches the viewport bottom. The latter condition avoids
-making real content grow through stale synthetic pin space before follow can
-start. This prevents a stale React render from allowing follow effects to
-overwrite a pinned header.
-The armed turn identity is owned only by `useFlowChatFollowOutput`; the list
-must not mirror it in a second ref because session resume and pin preparation
-can otherwise update the two identities in different commits.
-
-Collapse anchors have three phases: active while CSS layout is changing,
-retained-provisional while delayed virtualizer measurements may still arrive,
-and settled-grace after the provisional estimate has been reconciled to current
-DOM geometry. A short negative-layout quiet window ends the provisional phase.
-The Footer is then reduced atomically to the minimum physical range needed by
-the captured `scrollTop`; an anchor at `scrollTop === 0` needs no overflow range.
-The semantic anchor remains retained through one final grace window, so a late
-Virtuoso shrink can extend the range and restart settlement without exposing a
-clamped frame. User navigation, a new pin, session reset, DOM disconnection, or
-a quiet grace with no further correction releases it. Scroll
-events enqueue semantic-element restores into the coordinator's single pending
-animation frame. A transaction-owned non-user clamp may additionally extend its
-physical range and restore the captured raw position synchronously before paint.
-Active preservation blocks automatic tail takeover, while retained preservation
-allows the tail controller to take ownership when its normal distance and intent
-rules say that following should resume.
-
-There is no persistent raw `scrollTop` lock or scroll-listener lock. An
-unsignaled shrink may adjust an already owned protected range, but it may not
-create a collapse reservation from idle geometry alone. Without a semantic
-owner, the list accepts the new Virtuoso measurement and rebases its height and
-scroll baselines. Subsequent layout changes are handled by the semantic anchor
-(when present), the owned reservation transaction, or follow mode.
-
-An element anchor also owns the minimum physical scroll range needed to restore
-its offset. After writing `scrollTop`, the coordinator remeasures the actual DOM
-offset. If a positive correction remains because the browser clamped at the
-bottom, the range host synchronously extends the matching reservation, flushes
-layout, and retries in the same frame. The post-write DOM measurement is the
-source of truth because integer `scrollHeight` can overstate the browser's
-subpixel scroll limit.
-
-Physical-bottom synchronization must yield whenever the coordinator owns an
-element anchor. It also yields while streaming `following-tail` owns the
-viewport, because the single tail loop is the writer for content-growth motion.
-Outside tail follow, physical-bottom synchronization is limited to a real
-viewport `clientHeight` change. A message, round footer, or other content growth
-changes `scrollHeight` only and must remain below the existing viewport instead
-of moving the transcript upward to reach the new physical bottom.
-A sticky pin intentionally sits at the physical bottom created by its
-reservation; treating that geometry as tail-follow causes every content growth
-measurement to push the pinned header upward before the coordinator can restore
-it. Pinned, anchored, and non-streaming paths keep the normal physical-bottom
-synchronization behavior.
-
-Sticky pin floors are not reduced from a transient target rect. Positive
-effective content growth first enters a short settlement ledger (currently
-300 ms) instead of immediately removing physical bottom range. An unsignaled
-negative height correction cancels matching unsettled growth; a known collapse
-does not. Growth that reaches the complete remaining pin floor settles
-immediately because the sticky viewport has reached its tail-follow handoff
-boundary; if a collapse transaction is still active, that settlement resumes
-as soon as the transaction finishes. Sub-threshold growth still waits for the
-quiet window. Stable growth consumes the pin floor in one synchronous Footer
-update. Live pin reconciliation may increase a floor immediately, but cannot
-shrink it while Virtuoso item measurements are still moving. Stream end performs
-one final pin measurement when the target is available, transfers all remaining
-pin range into protected collapse space, and releases `pinned-item` ownership in
-the same transaction. A temporarily virtualized target must not block this
-release: the existing physical range is retained until a later explicit drain.
-Pending pin retries and growth settlement are canceled at that boundary.
-
-When a sticky target is temporarily virtualized, its provisional range must be
-computed from `scrollHeight - currentPinPx`. Reusing physical `scrollHeight`
-directly feeds the synthetic footer back into the next retry and grows the range
-on every frame. Provisional pins remain at `floorPx: 0`; if the request expires
-without capturing an element anchor, that range is removed atomically.
-
-The pin-owned portion of the footer is capped at one viewport. A rendered
-target can never require more than `clientHeight` of extra range to align its
-top inside the viewport, and one viewport is also sufficient to materialize a
-virtualized target. This cap applies to provisional and established pin ranges.
-It does not apply to collapse compensation or the total footer: a large card or
-several cumulative collapses can legitimately require more than one viewport to
-preserve the current semantic anchor.
-
-Pending pin retries carry a synchronous generation plus the owning session and
-turn. Canceling or replacing a request increments the generation before React
-state is updated, so already-queued animation frames cannot restore a canceled
-reservation. User navigation drops a provisional sticky range instead of
-transferring it into protected collapse. Established pins keep the existing
-protected-range handoff.
-
-Arbitrary-turn navigation is a materialize-then-align transaction. Starting a
-new request exits tail follow, but it does not remove the previous established
-pin reservation before the target DOM exists. That reservation remains only as
-physical scroll range; the active request prevents the old sticky target from
-reconciling it. Once the requested user message is rendered, the shared pin
-resolver applies the request's alignment policy. Exact requests replace the old
-reservation, align the message to the 57px viewport offset, and start bounded
-transient stabilization. Turn-rail requests use best-effort alignment: they
-still align exactly when the natural range is sufficient, but when the target
-cannot reach the 57px offset without synthetic tail space, they remove the
-transient pin reservation, clamp to the natural maximum, and release
-`pinned-item` ownership immediately. The natural boundary is an expected
-content limit, not a pending transaction, so it must not retry until TTL expiry.
-`sticky-latest` always uses the exact policy because streaming follow-output
-depends on its protected pin range. An expired request releases semantic
-ownership while preserving the current physical range, so failure cannot
-silently clamp the pane to the bottom.
-
-`rangeChanged` is a target-materialization signal, not a source of turn
-identity. It retries the active generation against real DOM geometry. RAF
-retries remain as a bounded fallback for browsers that coalesce range updates.
-Transient navigation remains pending until the requested turn stays aligned for
-two consecutive geometry samples. During that bounded transaction, Virtuoso's
-materialization range expands to two viewport heights in both directions so
-height-estimate reconciliation cannot immediately evict the target. If the
-pinned DOM element still disconnects, the coordinator drops the stale element
-anchor but retains logical `pinned-item` ownership while the active generation
-rematerializes it. User intent, replacement, expiry, and explicit handoff still
-release that ownership.
-Virtuoso mounts on the first initial-history commit. A target prepared before
-its ref is available becomes `initialTopMostItemIndex`; targets selected after
-mount enter the normal immediate materialize-then-align transaction. The
-left-side
-`FlowChatTurnRail` is mounted outside the scroller and delegates navigation to
-the same container-owned turn-pin request, so it does not need to rebind across
-renderer handoffs or write the FlowChat viewport directly.
-
-Mounting an already-streaming session is not a new-turn event. Session entry
-resumes tail follow directly, while sticky pinning remains reserved for a new
-turn that appears in the currently mounted session.
-
-## 4. Collapse Intent
-
-Some collapses are predictable before layout actually shrinks.
-
-`flowchat:tool-card-collapse-intent` is emitted before a known collapsible UI
-shrinks. `VirtualMessageList` uses that event to:
-
-- capture the card root as the semantic header anchor
-- capture the pre-collapse anchor `scrollTop`
-- capture the bottom distance before collapse
-- estimate required compensation from current card height
-- apply provisional compensation immediately
-
-This pre-compensation is what avoids the flash.
-
-Runtime status is transient session UI state, not a `FlowItem`. The always-mounted
-`RuntimeStatusSlot` occupies the first 24px of the existing Footer spacer and
-switches only `visibility`; showing, hiding, and clearing it never change list
-height or enter collapse reconciliation. Subagent projections use the same
-fixed-height slot inside their local scroll surface.
-
-If the list waits until `ResizeObserver` sees the shrink, the browser may already have clamped `scrollTop`.
-
-### Completion-preview grace period
-
-`useToolCardCompletionGracePeriod.ts` provides the bounded tail-preview window
-used by `ExecProcessToolCardView`, `TerminalToolCard`, and
-`FileOperationToolCard`. Its default is
-`TOOL_CARD_COMPLETION_PREVIEW_GRACE_MS = 800`.
-
-The timer starts only when a card that was expanded during execution is still
-the last rendered item and has not been manually toggled. A newer item, user
-interaction, unmount, or loss of tail ownership cancels the pending preview.
-For ExecProcess/Terminal cards this covers terminal completion, cancellation,
-errors, and rejections. For successful Write/Edit cards, the timer starts after
-the typewriter reveal finishes so the completed content is not truncated. The
-timer does not change `isLastItem`; an empty next round can still leave the
-previous card as the rendered tail, but the grace period bounds that wait. The
-timer expiry calls the existing height-contract collapse path, so footer
-pre-compensation and semantic-anchor handling remain the same as for a
-successor-driven collapse.
-
-This is deliberately separate from the VirtualMessageList collapse-intent TTL
-and settlement timers: the former controls when a card may compact, while the
-latter protects the viewport while its height changes.
-
-## Runtime Flow
-
-## A. Known Tool Card Collapse
-
-When a helper-backed card or region is about to collapse:
-
-1. it dispatches `flowchat:tool-card-collapse-intent` with its anchor element before the collapse state is applied
-2. `VirtualMessageList` estimates the upcoming shrink using `cardHeight`
-3. `VirtualMessageList` adds provisional footer compensation immediately
-4. `VirtualMessageList` applies the provisional footer synchronously and records
-   the semantic anchor's viewport offset
-5. actual layout shrink happens
-6. `ResizeObserver` / `MutationObserver` / transition listeners trigger `measureHeightChange()`
-7. measured shrink reconciles the compensation to the real final value
-8. the coordinator restores the anchor element's exact viewport-relative position
-
-Common examples:
-
-- `FileOperationToolCard`
-- `ModelThinkingDisplay`
-- `TerminalToolCard`
-- `ExploreGroupRenderer`
-
-## B. Unknown or Unsignaled Shrink
-
-If a shrink happens without a collapse intent:
-
-1. `measureHeightChange()` detects the negative height delta
-2. compensation falls back to `shrinkAmount - distanceFromBottom`
-3. `restoreScrollPositionOnce()` makes one clamped fallback restore using the
-   previously known scroll position
-
-This path is safer than doing nothing, but it is more likely to show visible movement than the pre-compensation path.
-
-## C. Initial-History Snapshot Handoff
-
-Virtuoso is the only initial-history scroller and mounts on the first commit.
-For sessions that still need the initial history render budget, a bounded recent
-projection is rendered above it as a non-interactive snapshot. The snapshot:
-
-- has no scroll container, spacers, pagination handlers, or viewport writer
-- uses `pointer-events: none` and cannot consume wheel, touch, keyboard, or
-  scrollbar intent
-- keeps the previous pixels visible while Virtuoso measures its initial range
-- releases immediately when the user starts scrolling so the real Virtuoso
-  motion is never hidden behind a frozen frame
-- retargets its release condition when Turn navigation begins during handoff
-- disappears only after the requested Turn has visible text, the session
-  changes, or the bounded handoff timeout expires
-
-All Turn navigation, search materialization, boundary pagination, bottom state,
-and follow-output transitions run through the mounted Virtuoso instance even
-while the snapshot is visible. A catalog-backed partial session still keeps
-only its restored tail as the default data presentation; this rendering change
-does not imply full-history hydration.
-
-## D. Arbitrary Turn Navigation Through Virtuoso
-
-The left-side turn rail delegates to the container-owned top-aligned pin
-transaction:
-
-1. record generation, session, target turn, behavior, and pin mode
-2. exit tail follow without removing established physical range
-3. if the target is absent, issue an immediate `scrollToIndex(..., align:
-   'start')`
-4. retry from `rangeChanged` and bounded RAF work until the target user message
-   exists
-5. replace the prior pin reservation with the target's measured reservation
-6. align the target to the shared 57px header offset and stabilize delayed
-   Virtuoso measurements
-7. cancel stale work on a newer request, user intent, session switch, jump to
-   latest, or timeout
-
-Every turn-rail marker, including the canonical latest Turn, uses this same
-immediate transient top-pin transaction. Selecting the latest marker means
-"show this Turn header"; it does not restore the tail presentation or resume
-follow-output. Only the explicit jump-to-latest action restores the canonical
-tail presentation and re-enters live-tail following. This separation keeps
-turn navigation consistent and treats every rail selection as user reading
-intent, including while the latest Turn is streaming.
-
-Do not clear the previous pin/footer range in step 2. The target may be outside
-the current Virtuoso range, and removing the footer first lets the browser clamp
-the old position to the physical bottom before materialization succeeds.
-
-The turn rail is an independent overlay surface. Its height is bounded to 60%
-of the FlowChat content area; overflow scrolls only the rail, and keeping the
-current marker visible may update only the rail list's `scrollTop`. Rail wheel,
-keyboard, hover, and tooltip behavior must never become another writer for the
-outer FlowChat viewport.
-
-The existing visible-turn DOM measurement also collects every distinct turn
-whose rendered items intersect the readable viewport. The first intersecting
-turn remains the semantic current turn, while every intersecting turn marker
-uses the same rail emphasis. Publish a new ordered `visibleTurnIds` snapshot
-only when membership or order changes so ordinary scroll frames do not cause
-redundant rail renders.
-
-### Catalog-backed history loading
-
-Catalog, loaded Turn cache, and active presentation are separate layers. Keep
-these ownership rules intact:
-
-- `Session.dialogTurns` remains the live restored tail unless an explicit
-  full-history consumer calls `ensureSessionFullHistory`.
-- Data residency, viewport intent, and follow-output ownership are independent.
-  A cached history presentation may remain resident after the viewport returns
-  to the live tail, but it must not keep the UI in history-reading mode,
-  suppress live-tail anchoring, or imply that follow-output is active.
-- For a small session whose cached presentation is contiguous from ordinal zero
-  through the current total (`[0, totalTurnCount)`) and stays within the
-  continuous projection budgets (24 Turns and 200 virtual items), explicit
-  jump-to-latest changes only the viewport intent and follow-output ownership.
-  The rendered projection and its stable virtual-item keys remain unchanged;
-  `historyWindow` is disabled so boundary loading cannot start while following
-  the tail. Canonical overlapping Turns are still overlaid by stable id, and a
-  newly appended canonical Turn extends the projection at the end.
-- Incomplete, discontinuous, or over-budget presentations retain the fallback
-  behavior: explicit jump-to-latest clears the Store's `activeRange`, restores
-  the canonical tail data source, and keeps the most recent component
-  presentation only as a reactivation hint. The Store LRU remains authoritative:
-  reactivation must find the complete range in `loadedRanges`, touch it as MRU,
-  and otherwise fall back to the ordinary window-load transaction.
-- Turn-rail navigation and sequential boundary loading use
-  `load_session_turn_window`; neither path writes the FlowChat scroller.
-- Upward user intent at the restored-tail boundary loads the adjacent ordinal
-  window without holding viewport ownership. Presentation activation then waits
-  for a bounded 320 ms quiet window after the latest wheel, touch, keyboard, or
-  scrollbar intent. New input resets that wait; session changes and newer
-  presentation-owner generations cancel it. Only after the quiet window is
-  acquired does the list capture the current element anchor and change to one
-  contiguous history-window presentation. This keeps a multi-thousand-pixel
-  prepend commit out of an active wheel gesture while still allowing the data
-  request itself to prefetch in parallel. Never expose a later cached range
-  across an unloaded gap.
-- Derive the restored-tail boundary from the canonical `Session.dialogTurns`
-  ordinal interval, never from the start of a merged `loadedRanges` entry.
-  Cache residency may extend to the first Turn while the canonical tail still
-  renders only recent Turns. Reaching ordinal zero is an exhausted boundary,
-  not a not-ready or failed load.
-- Appending below the current presentation does not require compensation.
-  Prepending or trimming above it must retain the existing element-anchor
-  transaction until the same user message returns to its captured viewport
-  offset.
-- A rejected or failed adjacent-window request must release only the element
-  anchor lease created during its commit preparation, if any. A stale
-  completion must never release a newer navigation or layout-preservation
-  transaction.
-- The non-tail loaded Turn cache uses a 48-Turn soft budget and a 64-Turn hard
-  budget. Crossing the hard budget evicts least-recently-used ordinals back
-  toward the soft budget. The live tail, active presentation, pending target,
-  and in-flight request intervals are protected; merged cached ranges may be
-  sliced, but the active presentation is never trimmed by cache eviction.
-- Passive live-tail updates outside the presented history range remain hidden
-  while the user reads history. When the history range overlaps canonical live
-  Turns, stable Turn ids select the canonical objects instead of cached
-  snapshots so streaming or recently completed content stays current without
-  changing the viewport intent. An explicit `send-message` Turn-pin request
-  first restores the tail presentation, then lets the existing sticky-latest
-  pin materialize the newly submitted Turn.
-- Cross-feature focus requests identify a Turn by stable `turnId` whenever one
-  is available, with `turnIndex` reserved for the absolute one-based visible
-  ordinal. They delegate to the same catalog/window materialization transaction
-  as the Turn rail. Never pass that absolute ordinal to `scrollToTurn` on a
-  partial tail or bounded history presentation; that method only understands
-  the currently rendered local list.
-- Search, edit, rollback, and compatibility fallback are explicit full-history
-  consumers. Their shared ensure operation deduplicates an existing request and
-  applies the completed projection only after the caller asks for it.
-- A Host without `turnCatalog`, or without `load_session_turn_window`, retains
-  the legacy full-restore fallback. This compatibility path must not cause a
-  catalog-capable Host to resume unconditional background hydration.
-
-## Why Transition Tracking Exists
-
-User-initiated expand/collapse still uses animated layout properties such as:
-
-- `grid-template-rows`
-- `height`
-- `max-height`
-
-Automatic and manual collapses both animate through the shared motion contract
-unless animation is explicitly disabled.
-
-During those transitions, the DOM may report intermediate sizes for multiple frames.
-
-The collapse intent carries a hard TTL (`expiresAtMs`, currently 1000 ms), but
-that TTL only bounds collapse measurement and reservation settlement; it does
-not expire the semantic element anchor. Automatic collapses are
-finalized after `FLOWCHAT_COLLAPSE_DURATION_MS` plus a short settle-frame window;
-manual or otherwise unsignaled intents use the TTL timer. The scroll handler keeps only a throttled-background
-timer fallback for browsers that delay timers. While the intent is alive, the
-grow branch of `measureHeightChange` protects the collapse reservation, but it
-may still consume measured content growth from the sticky pin reservation.
-Intent settlement follows the current semantic viewport owner. A sticky pinned
-turn always reconciles provisional collapse space back into a freshly measured
-pin reservation, even when the active transaction established a non-zero
-collapse floor. That floor protects the pin only while layout is moving; it
-must not cause the full-card estimate to survive into the next collapse. If the
-pinned target is temporarily unavailable, settlement retries without dropping
-the current range. A following tail instead enters retained-provisional quiet
-settlement, while a collapsing header that owns `preserving-element` reduces
-the footer atomically to the minimum range needed by its captured `scrollTop`.
-A detached protected viewport uses the same geometric settlement against its
-current `scrollTop`, without retaining provisional pixels above that range.
-These owner-specific transactions prevent both clear-and-reacquire frames and
-cumulative provisional whitespace. Any deferred follow is then replayed.
-
-## E. Follow-Output Mode (continuous tail)
-
-When the viewport is in follow-output mode and the latest turn is still
-streaming, the user's intent is "keep the tail visible". After the viewport
-coordinator has entered `following-tail`, one RAF loop eases `scrollTop` toward
-the effective bottom. Follow events only wake this loop; they do not launch
-additional scroll writers. The target subtracts the current Footer
-reservation, and large gaps snap directly to the target instead of leaving the
-user visibly behind the output.
-
-The loop is dormant while `pinned-item`, `preserving-element`, or a collapse
-transaction owns the viewport. It never clears reservations or calls
-`followTail()` from inside the animation frame. This keeps the semantic
-handoff and Virtuoso compensation paths authoritative while allowing small
-line-height growth to move over several frames. Explicit "jump to latest"
-navigation keeps its native smooth scroll; the RAF loop waits for that motion
-to settle before writing.
-
-Collapses interact with follow mode in three mutually exclusive ways:
-
-1. **Known collapse while follow + streaming is active:** the intent applies
-   synchronous Footer pre-compensation before the card shrinks. The active
-   intent allows shrink reconciliation even though tail follow is running.
-    When the CSS window ends, the transaction becomes a retained-provisional
-   collapse anchor instead of shrinking the Footer from a signed net-height
-   estimate. Virtuoso
-   can publish the matching item measurement after the CSS transition and after
-   stream end; reducing synthetic range before that measurement clamps the
-   viewport by exactly the removed pixels.
-   The retained transaction records the latest safe follow position. After a
-   negative-layout quiet window, it replaces both the provisional `px` and stale
-   `floorPx` with the minimum geometrically required Footer range. The final
-   release uses one timer plus a geometry generation: any effective height
-   change invalidates that timer's snapshot, and the timer performs one more
-   quiet check instead of every token allocating new timer work. If a later
-   measurement clamps below that position, the scroll handler synchronously
-   extends the range and restores it before paint. Real content growth and
-   downward follow movement consume the range one-for-one. User intent, a new
-   pin, session reset, or a final quiet grace releases the retained anchor.
-   Stream end restarts the same settlement path;
-   it does not preserve the provisional full-card estimate indefinitely.
-2. **Unsignaled shrink while follow + streaming is active:** a strict physical
-   clamp signature (the previous and current geometries are both at their
-   physical bottoms, the range shrink matches the negative `scrollTop` delta,
-   viewport height is stable, and there is no user intent) starts a
-   `late-shrink` viewport transaction. The scroll handler extends the Footer and
-   restores the pre-clamp position synchronously, covering virtualizer size
-   commits that arrive after the originating collapse transaction was released.
-   Other unsignaled shrinks remain owned by the tail loop; it follows only
-   downward toward the new effective bottom on the next frame.
-   A negative `scrollBy` issued by Virtuoso after a virtualized height
-   reduction is also suppressed when the previous geometry was already at the
-   physical bottom. That compensation would move the viewport away from the
-   tail; the next follow frame owns the single tail correction instead.
-3. **Not following (user reading older content):** the intent +
-   pre-compensation + semantic-anchor path applies as described above, and
-   `shouldSuspendAutoFollow` keeps event-driven follow scheduling
-   deferred until the intent's TTL lapses.
-
-The loop is cancelled as soon as follow exits (user upward scroll,
-session change, or streaming end). Explicit "jump to latest" navigation pauses
-the writer while its native smooth scroll completes, then resumes the same
-single tail loop.
-
-## Why `overflow-anchor: none` Must Stay
-
-`VirtualMessageList.scss` disables native browser scroll anchoring on:
-
-- `[data-virtuoso-scroller]`
-- `.message-list-footer`
-
-This is required because the browser's built-in anchoring fights the manual compensation logic.
-
-If you remove `overflow-anchor: none`, the browser may apply its own anchor correction on top of our compensation and produce unstable or inconsistent results.
-
-## Required Event Contract
-
-`tool-card-toggle`
-
-- dispatch after a generic expand/collapse action that changes height
-- purpose: schedule a follow-up measurement
-
-`flowchat:tool-card-collapse-intent`
-
-- dispatch before a collapse that can reduce list height near the bottom
-- include the card root as `anchorElement`; its top edge represents the stable header position
-- include `cardHeight` when possible
-- purpose: pre-compensate before the browser clamps scroll position
-
-Current producer:
-
-- `useToolCardHeightContract.ts` (used by most tool cards, including
-  `ExecProcessToolCardView`, `FileOperationToolCard`, and `TerminalToolCard`)
-- `ModelThinkingDisplay.tsx`
-- `ExploreGroupRenderer.tsx`
-
-Most tool cards now emit these events through `useToolCardHeightContract`.
-The helper measures the visible `cardRootRef` and retains recent visible
-measurements so state-driven collapses still report the pre-collapse height.
-Never substitute an inner scroll container's `scrollHeight`; hidden overflow is
-not layout height removed from the FlowChat list.
-
-If a future collapsible component shows the same "header drops" or "flash on collapse" symptom, it should likely emit `flowchat:tool-card-collapse-intent` before collapsing.
-
-## Invariants To Preserve
-
-- Footer compensation must remain additive temporary space, not real content.
-- Effective height comparisons must subtract current compensation.
-- Footer DOM compensation must be applied synchronously before anchor restore.
-- Anchor restore must clamp against current `maxScrollTop`.
-- A stalled positive anchor correction must extend physical bottom range and
-  retry before paint.
-- Resize and height observers must not synchronize to the physical bottom while
-  a semantic element anchor owns the viewport.
-- Sticky pin floors must shrink from measured content growth, not a transient
-  target-element position.
-- A user gesture that exits pinned mode must release the semantic anchor and
-  atomically transfer the pin reservation to a protected collapse range in the
-  same operation; an idle coordinator must never retain a live pin reservation.
-- Stream end or cancellation must perform that same protected-range transfer
-  before releasing `pinned-item`, even when the pinned DOM target is unavailable.
-- Scroll-handler anchor corrections must be coalesced through the coordinator's
-  animation-frame restore queue; they must not write `scrollTop` synchronously.
-- A retained collapse transaction may synchronously restore only a non-user
-  downward clamp. It is transaction-scoped, advances with downward tail follow,
-  and must release on user intent; it is not a general `scrollTop` lock.
-- Following-tail collapse finalization must never reduce Footer range directly
-  from a signed net-height estimate. It may reduce the retained estimate only
-  after the negative-layout quiet window, using current DOM geometry while the
-  anchor remains protected through the final grace.
-- Unsignaled shrink reconciliation must not reduce a protected collapse floor;
-  only measured growth, downward navigation, bottom arrival, or an explicit
-  reservation reset may consume it.
-- Unsignaled shrink reconciliation must not create a collapse reservation when
-  no collapse transaction owns the range. Session-open and history-projection
-  handoffs rebase their measurements instead of treating estimate convergence
-  as content collapse.
-- Pre-collapse intent must capture the anchor before the component shrinks.
-- Compensation must not be consumed too early during active layout transitions.
-- Session changes and empty-list resets must clear compensation and anchor state.
-
-## Common Ways To Break This
-
-- Adding a mount-triggered CSS animation to a virtualized list item, or animating
-  an automatic collapse without keeping collapse-intent protection alive for the
-  full `FLOWCHAT_COLLAPSE_DURATION_MS` window (see Rule Zero).
-- Feeding `Date.now()` back into `sessionToVirtualItems` /
-  `buildModelRoundItemGroups`, or splitting one `ModelRound` into several
-  `model-round` virtual items — both swap stable Virtuoso keys for new ones and
-  remount visible content.
-- Replacing `applyFooterCompensationNow()` with state-only rendering.
-- Measuring raw `scrollHeight` deltas without subtracting existing compensation.
-- Removing `flowchat:tool-card-collapse-intent` from a helper-backed collapsible component.
-- Finalizing an active collapse intent when a new one arrives mid-burst instead of
-  coalescing TTL / provisional shrink (drops footer protection for a frame).
-- Dispatching collapse intent after `setState` instead of before it.
-- Removing `overflow-anchor: none`.
-- Removing the intent TTL, settle-frame finalizer, or the throttled scroll
-  fallback that covers delayed background timers.
-- Reintroducing a persistent scroll-listener lock or allowing multiple competing
-  scroll writers. Semantic anchors and the bounded fallback must remain separate.
-- Passing reservation pixels through Virtuoso context or React-owned Footer
-  styles. The stable Footer DOM and ref-owned reservation are the hot path.
-- Restoring the blanket follow-mode early return in
-  `handleToolCardCollapseIntent` or applying it to an active known intent in
-  `measureHeightChange`. Known streaming collapses require synchronous range
-  reservation; only unsignaled shrinks are delegated entirely to the RAF loop.
-- Removing the `shouldSuspendAutoFollow` gate from event-driven follow
-  scheduling. Outside follow mode it keeps deferred follows from firing while a
-  collapse intent is still protecting the anchor.
-- Removing the continuous RAF follow loop. Event-driven follow alone cannot
-  keep up with dense token streams without visible jitter outside collapse
-  windows.
-
-## If You Need To Change This Logic
-
-### Opt-in viewport diagnostics
-
-Enable `app.logging.flow_chat_diagnostics` from the logging settings only while
-reproducing a viewport stability issue. The frontend records bounded JSONL
-batches to `flowchat.log` in the current session log directory. When disabled,
-probe payloads are not evaluated and no timer, IPC request, or file is created.
-
-The diagnostic schema groups events by hypothesis:
-
-- `A`: user scroll intent, pin release, reservation transfer, and tail handoff
-- `B`: semantic anchor capture, correction, release, or unexpected reacquisition
-- `C`: content measurement, Footer compensation, and physical range changes
-- `D`: Virtuoso scroll compensation and tail-follow ownership
-- `E`: streaming tool-card collapse intent and anchor preservation
-
-Do not add message content, tool arguments, file contents, or other sensitive
-payloads to this channel. Keep all data producers lazy and guard hot-path probes
-with `flowChatDiagnostics.isEnabled()` before allocating probe objects.
-
-Use this checklist:
-
-1. Verify a just-completed ExecCommand/Write tail keeps its preview during the
-   short grace period, then compacts if no follow-on item arrives.
-2. Verify manual collapse of a completed `Write` / `Edit` tool card.
-3. Verify a newer item still causes immediate automatic compaction before the
-   grace period expires.
-4. Verify repeated expand/collapse near the bottom.
-5. Verify thinking / explore / other collapsible sections still schedule measurements correctly.
-6. Verify there is no visible "drop then snap back" flash.
-7. Verify the final header position remains stable after collapse.
+The footer must not retain an earlier input height or include an estimated card
+shrink. The spacer reads the footer to size itself, but the two must not be
+folded into one number: the footer is content the transcript clears, the spacer
+is range past the end of content, and only the footer is inside the content end.
+
+Footer height represents only the current input-stack layout and real footer
+content such as history state and `RuntimeStatusSlot`.
+
+## Known Gaps
+
+- The eased follow raises the scroll-event rate from one a line to one a frame
+  while output streams — 1247 of them in one 120-second session, each an anchor
+  stand-down and a visible-Turn pass. It does not show in list commits, and
+  nothing here counts the DOM reads themselves, so what is actually known is
+  that the rendering cost did not move. Re-measure with the `tailFollow` probe
+  before changing `TAIL_EASE_ALPHA`.
+- Easing is bounded by the frames the display gives it. The step it converges
+  on is the content's growth *per frame*, so the same stream smooths less at
+  60Hz than on the ~200Hz display these numbers come from, and a fast enough
+  stream is a line a frame anywhere — at which point the ease is spending its
+  lag and buying nothing.
+- `SMOOTH_SCROLL_YIELD_MS` is only a backstop now, but it is still a guess: an
+  animation that stalls mid-flight without ever resuming holds the follow off
+  for its whole duration. Nothing observed has done that — the stall check ends
+  every real animation long before it — and the cost if one did is the follow
+  resuming late, not the viewport landing wrong.
+- A scrollbar drag is recognised from the gutter the bar occupies, so it is
+  invisible where the platform draws overlay scrollbars that take no layout
+  width — WebKit-backed builds, where `scrollbar-gutter: stable` reserves
+  nothing either. There the drag still fights the frame loop while output
+  streams; it no longer strands the viewport, because the snap back now asks
+  whether follow is correcting rather than whether it owns. Closing the rest
+  means either a signal that does not depend on the bar having a box, or a
+  scrollbar of our own — which would also stop the thumb from reaching the
+  reserved blank at all, and take the empty-range gap below with it.
+- A collapse larger than `tailHoldMaxGapPx` still moves the viewport, by the
+  excess only.
+- An animated scroll aims at the target it was issued for. Jumping to latest
+  while output is arriving therefore ends with one catch-up step covering
+  whatever content grew during the animation — under the ease's snap threshold
+  at ordinary streaming rates, and a visible jump above them.
+- A width change anchors the viewport bottom only for a viewport that was at the
+  end of the transcript. Everywhere else the reflow moves content out from under
+  the bottom edge and nothing puts it back, because the anchor would have to be
+  captured before the reflow. Closing this means sampling an element anchor on
+  the scroll path.
+- On a very short transcript the scrollbar exposes a viewport of empty range.
+  The snap back makes this more visible, not less: the range is draggable and
+  bounces back.
+- The opening reveal has a hard frame cap. A session that pages for longer than
+  the cap is revealed mid-settle; raising the cap trades that against a longer
+  blank on open.
+- **Estimates are still estimates.** A page of history is now reserved per item
+  rather than at one scalar, so the range it takes up is close instead of wrong
+  by an order of magnitude — but `estimateVirtualMessageItemHeight` cannot know
+  how a model round wraps. Corrections shrink; they do not reach zero. And the
+  cost of rendering a heavy item is a separate axis: less measurement is forced
+  at once, but the work each one costs is unchanged. See
+  `FLOWCHAT_VIRTUALIZATION.md`.
+- A junction still costs one frame at the first page of a session, measured at
+  93px: the commit paints before the settle frame that would correct it. Slower
+  frames swallow both and show nothing. Closing it means a tighter estimator,
+  not a further correction — the correction already equals the change in the
+  scroll range every time it runs.
 
 ## Related Files
 
-- `src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx`
-- `src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.ts`
-- `src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss`
-- `src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.ts`
-- `src/web-ui/src/flow_chat/tool-cards/useToolCardCompletionGracePeriod.ts`
-- `src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.tsx`
-- `src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx`
-- `src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx`
-- `src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx`
-- `src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx`
+- `flowChatTailFollow.ts`
+- `useFlowChatFollowOutput.ts`
+- `../../utils/flowChatScrollLayout.ts`
+- `../../tool-cards/useToolCardHeightContract.ts`
+- `VirtualMessageList.tsx`
+- `ModernFlowChatContainer.tsx`
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
new file mode 100644
index 0000000000..68d63fc03b
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -0,0 +1,212 @@
+# FlowChat Viewport Verification
+
+The automated checks, and the manual ones agents may not run.
+
+## Automated
+
+```text
+pnpm run type-check:web
+pnpm --dir src/web-ui run lint
+pnpm --dir src/web-ui run test:run <the files below that your change touches>
+```
+
+Pick by what you changed rather than running the whole column — but this is the
+whole column, and it is the only list. Two divergent copies of it used to exist,
+each missing what the other had.
+
+| Test | Contract it holds |
+|---|---|
+| `flowChatTailFollow.test.ts` | the follow target, `pin-turn-top`, `hold-tail` |
+| `flowChatCollapseMotion.test.ts` | collapse does not move earlier content |
+| `useFlowChatFollowOutput.test.tsx` | the frame loop, snap back, resize realign |
+| `../../tool-cards/useToolCardHeightContract.test.tsx` | tool cards reflow rather than compensate |
+| `flowChatHistoryBoundary.test.ts` | the screenful lead, and the latch's own predicate |
+| `flowChatLiveTailWindow.test.ts` | "does the transcript still reach the newest Turn" |
+| `flowChatViewportAnchor.test.ts` | anchor geometry and the DOM contract |
+| `useFlowChatViewportAnchor.test.tsx` | capture, restore, carry, the settle window |
+| `VirtualMessageList.session-boundary.test.tsx` | prepend compensation and the ask |
+| `ModernFlowChatContainer.history-state.test.tsx` | history presentation and the submission event |
+| `flowChatViewportOwnership.test.ts` | the priority order, preemption, expiry |
+| `../../../infrastructure/diagnostics/flowChatViewportDiagnostics.test.ts` | coalescing, placement sampling, the switch |
+| `useFlowChatVirtualizer.test.ts` | the offsets-and-positions boundary |
+| `useFlowChatVirtualizer.measurement.test.tsx` | `measureRenderedItems` against a real virtualizer |
+| `useFlowChatVirtualizer.aim.test.tsx` | the re-aim, and giving it up on takeover |
+| `VirtualMessageList.layout.test.ts` | the item-height estimate and the spacer |
+
+## Manual
+
+**Agents must not perform UI interaction verification.** Report these as pending
+unless a human confirms them. They are grouped so that adding a check to one
+group does not renumber the others.
+
+### Opening a session
+
+1. Session open lands at the end of the transcript, not inside the spacer.
+2. Open a long `isPartial` session and leave it alone. Nothing may page in
+   behind the reveal: the transcript opens on its loaded tail and stays there.
+   Five pages arriving over 890ms is what this checks for, and the reveal only
+   hides the first frame of it.
+3. Open a long session and check the scrollbar thumb: its size should be close
+   to right on the first painted frame, and it should not jump as items
+   measure. This is the per-item estimate doing its job, and it is the single
+   most visible symptom if the estimate ever regresses.
+4. Session switching and history paging do not restore stale footer height.
+
+### Submitting and pinning
+
+1. A newly submitted Turn opens at the viewport top with room below it.
+2. Send a one-line message and let it pin. It must come to rest at the top with
+   the same small gap above it as the very first Turn of the session, and the
+   pin must hold steady rather than creeping down — a pinned offset past the
+   end of the scroll range is clamped, and the follow loop will rewrite it
+   every frame.
+3. Scroll down into the blank and let go right after submitting a short Turn:
+   it returns that Turn to the viewport top, not to the content end.
+4. Send a message from the live tail, and again while parked deep in history.
+   Both must end with the new Turn at the viewport top; the second also has to
+   leave the history window to get there.
+5. Send a message, let it pin, then roll it back from its own message actions.
+   The transcript must come to rest with the surviving last Turn at the
+   *bottom* — not with it pinned to the top, which is what reading the
+   truncation as an arrival used to do.
+6. Roll a Turn back from further up a transcript, having scrolled to reach it.
+   The surviving last Turn must end at the bottom here too — scrolling to reach
+   the button hands the viewport to the reader, and the answer has to run
+   anyway. Leaving it to the anchor is what showed Turns 2..6 of an 8-Turn
+   session with the new last Turn's answer below the fold.
+7. Edit a message and rerun it. There must be one movement, not two — the
+   truncation is silent and the rerun's Turn pins as usual.
+
+### Streaming and follow
+
+1. Streaming follows the tail until the user scrolls, and the pinned Turn hands
+   off once its answer overflows the viewport.
+2. With output streaming, scroll up and hold still. Follow must not write while
+   the gesture is recent, and must resume once it goes quiet.
+3. Jump to latest is animated rather than an instant jump — including from the
+   top of a long transcript, which is the longest animation anything here
+   issues and the one a frame-counted stand-down used to cut short. It must
+   glide the whole way, with at most a small catch-up for content that arrived
+   while it travelled.
+4. While reading a history window, let output arrive from somewhere else. The
+   viewport must not move — this is the case the submission event exists to
+   stay out of.
+5. Watch a Markdown answer stream past the bottom of the viewport. It must
+   scroll rather than step: no move of a whole line, and none of the ease's
+   lag left behind once the stream stops.
+6. Stream a burst — a code fence or a table arriving at once — and confirm it
+   goes the whole way in one move rather than gliding through content nobody
+   has seen, and that the jump-to-latest bar does not flash while it does.
+7. Turn on `prefers-reduced-motion` and stream again. The follow must step
+   straight to its target, as it did before the ease.
+
+### Collapse
+
+1. An auto-collapsing TodoWrite or ExecCommand card leaves earlier content
+   visually still.
+2. Expand and collapse a tall tool card near the top of the viewport, and one
+   below it, and confirm earlier content stays put in both cases.
+
+### The reserved blank and the snap back
+
+1. Scrolling down into the reserved blank and letting go returns to the end of
+   real content, and streaming resumes following from there.
+2. Pressing End scrolls to the bottom of the scroll range and then comes back —
+   that key is the cheapest way to land deep in the spacer.
+3. Scroll to the very bottom and confirm the transcript ends where content
+   ends, with the reserved blank below it reachable but not where the session
+   opens.
+4. Wheel down into the reserved blank and stop. The transcript must return to
+   the content end in one smooth movement, not shudder in place.
+5. With a short Turn pinned, scroll up, jump to latest, then scroll down into
+   the blank and let go. After the snap back the jump-to-latest affordance must
+   be gone — this is the one path where the viewport arrives at the tail
+   without a scroll event to notice it.
+
+### The scrollbar
+
+1. Drag the scrollbar to the very bottom. The screen must not be entirely
+   blank: the last Turn and the input clearance stay visible above the
+   reservation. Repeat with the composer expanded, which is where the reserve
+   falls back to the hold-gap floor.
+2. Drag the scrollbar, without touching the wheel first, down into the reserved
+   blank and let go: it must snap back. Then drag it while output streams: the
+   transcript must follow the thumb without the frame loop fighting it. A press
+   on the thumb that moves nothing must leave the viewport alone.
+
+### Resizing
+
+1. With the viewport resting at the end but *not* following — scroll away and
+   back, and check the jump-to-latest affordance is hidden — resizing the
+   window keeps content against the bottom in every direction: taller reveals
+   more history above, shorter does not cut the last lines off, and narrower
+   does not push them off screen as the text rewraps. Repeat while reading
+   history: nothing should move.
+
+### History paging
+
+1. Open a session long enough to be `isPartial` — the loaded tail is shorter
+   than the viewport, so it pages older Turns in on its own. No jump-to-latest
+   bar should appear, and streaming output should be followed. Then send a
+   message: it must appear immediately and pin to the viewport top, with the
+   history above neither moving nor reloading.
+2. Scroll up to a junction. **One** page loads, the Turn under the cursor stays
+   where it is, and paging stops until the head is reached again. Then keep
+   going: every junction must behave the same way all the way to the first
+   Turn, with no run of pages and no point where scrolling up stops doing
+   anything.
+3. Open a long `isPartial` session and scroll up slowly through several paging
+   junctions. The Turn under the cursor must not move — not backwards, not
+   forwards, and not for a single frame. A stall while a page is measured is a
+   known gap and reads differently from a jump: the picture freezes and
+   resumes in place, rather than showing different content and snapping back.
+   Then scroll up fast through the same junctions, which is where the anchor
+   and the user's gesture are most likely to disagree.
+4. During that scroll, check that a paging junction does not leave the viewport
+   stuck: keep scrolling past it, then wheel back down, and confirm the
+   transcript still tracks the gesture in both directions. Nothing on screen may
+   fade or slide as rows come back — a row entering the rendered window is not
+   its content arriving.
+5. Navigate to the first Turn of a long session, then jump to latest. The tail
+   window it lands on can be short enough to fit inside the viewport, which
+   puts the whole scroll range inside the reserved blank. Scroll up from there:
+   history must load. This is the case where the reader is at the top, so the
+   wheel emits no scroll event and the gesture is the only thing to go on.
+6. In an `isPartial` session that paged on open and is now streaming, scroll
+   down into the reserved blank and let the snap back return you. No history
+   status may appear at either end of the transcript — the transcript already
+   reaches the newest Turn, so there is nothing past its bottom to load. This
+   is the case that showed "preparing the conversation history" under a
+   complete transcript, permanently, and survived cancelling the Turn.
+
+### Turn navigation
+
+1. Turn Rail and Usage Report navigation can top-align the final Turns.
+2. Click the last Turn on the Turn Rail while it is short. It must land in one
+   movement at the end of the transcript — no top-align followed by a slide
+   back down. Do it from near the tail *and* from the top of a long session:
+   those are the rendered and unrendered branches, and they take different
+   paths. Then click a final Turn whose answer is longer than the viewport: it
+   must still top-align.
+3. Navigate to a Turn from the Turn Rail — a near one, a far one, and one close
+   enough to the end that the window loaded for it reaches the newest Turn. All
+   three must come to rest on that Turn at the viewport top and stay there.
+4. Navigate to a far Turn and start scrolling with the wheel before it comes to
+   rest. The gesture wins immediately and nothing pulls the viewport back to
+   the Turn afterwards, including several seconds later.
+5. From the Session Usage report, click a tool call and a slow span. Each must
+   come to rest with that item centred, in **one** movement — no landing on the
+   Turn followed by a slide onto the item a few frames later.
+6. **While a Turn is streaming**, click a Turn well up the history. It must land
+   on that Turn and stay there — not drift back to where you were reading half a
+   second later, which is when the navigation's hold lapses. Then click the same
+   Turn again from where you land: the second and later clicks used to fail
+   where the first appeared to work.
+7. While a Turn is streaming, scroll up with the wheel and let it stop. The
+   viewport stays where the gesture left it. Repeat several times in a row and
+   keep going after streaming ends: the failure was a scroll that came to rest
+   and was then returned, in full, to where that gesture had started.
+8. Scroll **down** through a long answer in several flicks, in a session with
+   enough history to keep re-measuring. Each flick keeps its distance — the
+   failure was arriving and then sliding back part of the way, every time, so
+   that a given point in the transcript could not be passed at all.
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md
new file mode 100644
index 0000000000..dd4cc8b261
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md
@@ -0,0 +1,323 @@
+# FlowChat Viewport Register
+
+Every deliberate write to the FlowChat scroller goes through one register, which
+decides whether the writer may act. This document covers the register, what it
+replaced, the two writers that stand outside it, and the trail it leaves.
+
+## Who May Move the Viewport at All
+
+Continuous movement belongs to `useFlowChatFollowOutput`; one-shot navigation
+belongs to `VirtualMessageList`. The virtualizer never follows output. Card
+renderers and tool cards must not write the outer FlowChat `scrollTop` — local
+scroll surfaces inside a thinking, explore, terminal, or subagent card may
+manage their own scroll position, but they must not dispatch an outer viewport
+compensation request.
+
+## The Register and Its Order
+
+Every deliberate write goes through `useFlowChatViewportOwner`, which asks
+`flowChatViewportOwnership.ts` whether the writer may act. The order is the
+design:
+
+| | Owner | Held while |
+|---|---|---|
+| 1 | `user-gesture` | 200ms from the last wheel, touch, key, or scrollbar press |
+| 2 | `one-shot-navigation` | a Turn, search hit, or focus request is being reached |
+| 3 | `snap-back` | the return from the reserved blank is animating |
+| 4 | `follow-output` | the continuous writer owns the viewport |
+| 5 | `layout-correction` | the scroller's box changed and a resting viewport is re-aligned |
+
+The register decides **whether**, never **where** — targets stay with the writer
+that owns them, and the anchor's correction stays idempotent. Ordering answers
+what idempotency cannot: whether a movement was ours on purpose or something to
+be undone. The anchor is idempotent and still destroyed the snap back, because
+it restored a relationship we had deliberately changed.
+
+**Repairing a displacement is not on this list**, and putting it there was a
+mistake worth keeping recorded. The prepend compensation and the viewport anchor
+both use `viewportOwner.shift` — see *A Displacement Is Not a Movement* in
+`FLOWCHAT_HISTORY_PAGING.md`.
+
+**Taking ownership and writing are one call.** Adding a writer without declaring
+it means not using the helper, which is visible in review — where the previous
+scheme needed the new writer added by hand to every other writer's private
+predicate, and a single missed pair was a bug. The failure that made this
+explicit: a snap back was missing from the hand-written predicate that preceded
+the register, so it belonged to nobody while it animated. The snap travelled
+0.7px, the anchor wrote it back, the write cancelled the animation, the
+cancellation read as a gesture coming to rest, and the snap was issued again —
+**958 times over 20 seconds, arriving nowhere**.
+
+**Only an owner that releases may hold the viewport indefinitely**, and
+follow-output is the only one — a claim with no expiry and no release is a
+viewport nothing below it can ever write again. Every other writer states its
+own window: a gesture goes quiet, an animation may never report completion, a
+re-aim runs while measurements settle. Saying nothing means the write is
+instantaneous and owns only itself, which is what a correction wants; the claim
+still resolves against whoever holds the viewport, because that is the question
+deciding whether the write happens at all.
+
+The first thing this caught was its own: the virtualizer places the scroller
+against its own state on mount, before any aim of ours exists. That 0px write
+was attributed to a navigation and took an unbounded claim, so follow-output was
+refused for the whole opening reveal and a long session opened at the head of
+its loaded window instead of on the newest Turn. A library write nobody asked
+for is now attributed to `layout-correction`, which is what it is.
+
+**The opening reveal is not an owner.** It is a phase, and the thing moving the
+viewport during it is follow-output, so a claim standing in for the reveal would
+outrank follow-output and refuse it. One slot cannot hold a phase and a writer
+at once, so the reveal remains an explicit condition beside the register.
+
+Not everything collapsed into it, and the difference is worth keeping straight.
+`smoothScrollFramesRef` is follow-output yielding to *its own* animation, which
+is intra-owner; `settleFramesRef` is a frame budget; `pendingSnapBackTargetRef`
+still answers "did our snap land here"; `boundaryArmedRef` is paging policy.
+Only the parts that were really answering "is someone else moving the viewport"
+are gone.
+
+## What Counts as a Gesture
+
+Ordinary `scroll` events do not transfer viewport ownership; only explicit
+wheel, touch, or keyboard navigation exits follow-output. A gesture that comes
+to rest inside the reserved blank hands it back — see *Snapping Back Out of the
+Reserved Blank* in `FLOWCHAT_SCROLL_STABILITY.md`.
+
+A scrollbar drag is the one exception, and the press is what makes it one: a
+pointer held past the content box's trailing edge is on the bar, so the
+scrolling it causes *is* intent. The press only arms it — `scrollbar-gutter:
+stable` keeps the gutter reserved whether or not a bar is drawn there, so a
+press that scrolls nothing changes nothing. Unqualified, a drag never released
+the viewport: measured on WebView2, follow-output rewrote its target against the
+thumb every frame for a 100px oscillation, and a drag that came to rest in the
+reserved blank was skipped by the snap back because follow still nominally owned
+it — with the frame loop long since asleep, so nothing corrected it.
+
+## Reaching a Turn Is One Shot
+
+One-shot Turn, search and history navigation lives in `VirtualMessageList`, and
+holds `one-shot-navigation` for as long as it is still arriving.
+
+**Alignment is asked for, not computed, wherever it fits.** A navigation
+correcting its own scroll must re-issue through the virtualizer, never by
+writing the scroller. The virtualizer keeps re-aiming at its last target for as
+long as the measurements under it move, and only another scroll issued through
+it replaces that. Writing the scroller directly is what left the tail Turn
+top-aligning, being pulled to the content end, and being re-aimed at the top
+again.
+
+**The clamp branches on what is knowable, not on where the Turn is.** A rendered
+Turn resolves its own offset, so the decision is made before anything moves and
+the requested `behavior` survives. An unrendered one is known only to the
+virtualizer, so it is placed with `behavior: 'auto'` and the landing read back;
+an animated placement would not have arrived yet, so there would be nothing to
+read. Both writes land in the same task, so the correction costs a second scroll
+but not a second visible movement.
+
+**Turn navigation never scrolls into the reserved blank to top-align a Turn.** A
+Turn whose top lies past the content end is stopped at the content end instead,
+which is where the tail rests. The blank belongs to follow-output — `pin-turn-top`
+holds it for output that is arriving, and nothing arrives under a Turn the user
+navigated to. There is no "is this the last Turn" test and no measurement of
+what lies below it: a Turn with a viewport of content under it has its top above
+the content end already, so the clamp does not bind and the final Turns of a
+long transcript still top-align. Before the resident spacer the browser did this
+for free by clamping at the end of the scroll range.
+
+**Top-aligning a Turn aims at `FLOWCHAT_TURN_TOP_GAP_PX` above its user
+message**, not at the message itself. The first Turn already sits below that gap
+for free, because `.message-list-header` occupies it at the head of the scroll
+content; every other Turn used to land flat on the top edge, and the two read as
+different alignments. The header renders at the same constant so they cannot
+drift. Both the one-shot scroll and the offset the follow loop re-asserts every
+frame carry it — if only one did, they would fight.
+
+**A gesture preempts a navigation still in flight, and ends it.** The library's
+re-aim keeps computing for up to 5s after the aim that started it, recomputing
+the target offset from measurements that are still landing and writing again
+whenever it moves.
+
+Refusing those writes is not enough, and this is the one place the register's
+guarantee stops short on its own. The refusal is invisible to the library — it
+has no return value to read — so it keeps its schedule either way, and the
+gesture's hold is `USER_DRIVEN_SCROLL_WINDOW_MS`, 200ms after the last wheel
+notch. A measurement landing after the reader has stopped, and inside the
+remaining five seconds, is granted. Measured on a rail click into a long
+history window: placed at 5358, the reader took over 6ms later, and 12ms after
+that the re-aim asked for 7784 and was refused — with nothing having ended it.
+
+So `notifyUserScrollIntent` gives the aim up outright, through `cancelAim`. It
+aims at the offset the scroller already holds: an offset aim carries no index,
+the re-aim recomputes its target *from* the index, and writing again is the only
+thing it does when that target changes. The library's `scrollState` is private,
+and a cast into it is the kind of thing a version bump breaks silently.
+
+The cost is accepted, and it is what the reader asked for: a distant navigation
+the wheel brushes stops where it is and is not corrected further. In the
+measured case that is 2460px short of the Turn that was clicked — the placement
+is deliberately approximate, and the re-aim is what would have finished it.
+
+**A hold postpones a corrector; it does not cancel one.** Standing down for the
+register keeps a correction from landing while the hold is live, and hands it
+over intact the moment the hold lapses. Where the movement being held off was a
+*change of intent* rather than a displacement, that is not what was wanted, and
+the register cannot know the difference — it ranks writers, it does not carry
+meaning. Whoever changes the intent has to say so: a Turn navigation drops the
+viewport anchor before it aims, because otherwise the anchor spends the hold
+waiting and then undoes the jump. Measured over four clicks on one Turn: 1653px
+back, four times out of four, each on the first frame after
+`ONE_SHOT_NAVIGATION_HOLD_MS` lapsed.
+
+This is also why a placement's outcome is sampled *after* the hold rather than
+inside it. `turnNavigation.placed.outcome` used to read back at 400ms against a
+600ms hold and reported `driftPx: 0` on a placement that was dragged 1653px away
+11ms later — the probe could not see the one thing the hold was postponing.
+
+## Why There Was No Coordinator Before, and What Changed
+
+There was one — `FlowChatViewportCoordinator.ts`, removed alongside the
+compensation engine, and it was a compensation engine itself: reservations,
+pin and collapse compensation, element-anchor leases, a synthetic bottom range.
+Nothing here does any of that.
+
+The argument recorded against replacing it was that single-writer semantics were
+unreachable, because the virtualizer writes `scrollTop` from inside the library —
+its own re-aim, and its adjustment for a re-measured item — so a coordinator
+could only serialise *our* writes while the conflicts in practice were with that
+third writer. Two things retired that premise:
+
+- The library's adjustment for a re-measured item is **off**
+  (`shouldAdjustScrollPositionOnItemSizeChange`), because it replayed a delta
+  against a scroll offset it learns about a frame late.
+- **`scrollToFn` is a first-class virtualizer option.** Every write the library
+  makes — `scrollToIndex`, `scrollToOffset`, and the re-aim that follows them —
+  goes through a function we supply, so it is registered like any other.
+
+What remains outside the register is the reader and the browser, and browser
+scroll anchoring is off. A library write is attributed to whoever asked for the
+aim, which is also what lets a gesture preempt a navigation still chasing its
+Turn.
+
+## Diagnosing the Viewport
+
+Viewport faults are intermittent, leave nothing in the DOM once they are over,
+and read identically to two or three other causes: a Turn that lands and is
+dragged away and a Turn that never landed are the same complaint. So the trail
+is permanent, in `flowchat.log`, behind `app.logging.flow_chat_diagnostics` —
+the same switch history paging uses — and tagged `viewport`.
+
+`flowChatViewportDiagnostics.ts` records two different kinds of thing:
+
+| | Where | What |
+|---|---|---|
+| **Writes** | the register, `viewportOwner.write` / `.claim` / `.release` | who moved the viewport, from where to where, and **who was refused** |
+| **Decisions** | each writer | why it wanted to move, and why it did not |
+
+The second half is the one that pays. A write that never happened leaves nothing
+at the register to find, and "nothing happened" has been the report more often
+than a wrong move has: a deferred new Turn, an anchor whose Turn left the
+rendered window, a snap back declined because the settle belonged to the opening
+reveal, a boundary that never re-armed. Each of those is now one line saying
+which.
+
+**A placement is recorded with what became of it.** `traceViewportPlacement`
+samples the offset on the next frame and again once things have settled, and
+reports the drift from the target. Read against the register's writes in the
+same window, the drift says *who* took it away. Every deliberate write now goes
+through the register; the two that did not are both gone, and what the sampling
+found before they went is worth keeping, because in both cases it was not what
+the probe was written to catch.
+
+**The focus request was overriding, not overridden.** A usage-report click
+lands a Turn navigation through the register and then centres the flow item
+that was actually clicked — a tool call inside the Turn. The comment on the
+second write predicted the anchor undoing it, since a focus request carries no
+gesture. It never did: measured over four clicks the anchor stood down 93 times
+and the register refused nothing, and the two item aims drifted 0px. The drift
+was on the *first* write. The Turn navigation settled 178px and 334.7px from
+where it had put itself, because the item aim arrived 41ms — three frames —
+later, and `nextFramePx` equalled the Turn placement both times, so the reader
+watched the transcript land and then move. The aim now goes through
+`focusFlowItem` on the list, which is a register write, and is attempted in the
+same task as the Turn navigation so that only the final position is painted.
+When the item is not rendered yet the retry loop still runs, and the Turn
+placement is what is on screen until it lands — that part is unavoidable.
+
+**The sticky Task indicator had never run at all.** Its selector wanted
+`.flowchat-flow-item[data-flow-item-id][data-tool-name]` on one element, and
+`data-tool-name` has only ever been on the tool card *inside* that wrapper —
+added two months later, by a commit adding e2e locators, for an unrelated
+reason. So its probe could not have fired either, which is why there was no
+evidence rather than no problem. Deleted; if the affordance is wanted again it
+needs registering as well as fixing.
+
+`traceViewportPlacement` stays for the next writer that has to sit outside the
+register, and for what it proved here: read against the register's writes, it
+answers *which of two placements won* as readily as *who undid one*.
+
+Everything here can fire on every frame, so repeated identical events collapse
+into one entry per 500ms carrying the count and travel it stands for. The key
+includes whatever makes one run a different run — the owner, the outcome, the
+direction — so a *transition* always emits immediately. A thousand copies of a
+steady state would only bury the transitions, which are the point.
+
+**A duration is reported once, when it ends.** Coalescing is what makes the
+per-frame traces readable, and it is also why they cannot answer "how long did
+that last": only the first of a run is emitted, and the rest are a count.
+`anchor.turnReturned` and `anchor.waitAbandoned` therefore report the whole of a
+wait for the anchored Turn — milliseconds, settle frames, restore attempts, and
+the reader travel carried through it — at the one moment the whole of it exists.
+That wait is what decides whether a junction is seen, so it is the number to
+read first. These are the only traces here that go through `traceViewport`
+rather than the coalescer, because they fire once per wait and their payload is
+the point rather than a sample of it.
+
+**Read the state out before the state changes.** A `data` callback is evaluated
+by `flowChatDiagnostics.trace`, synchronously, so a thunk over refs is normally
+exactly right. It is not right when the caller resets those refs on the next
+line, and the wait report does: it takes its numbers eagerly and closes over
+them.
+
+**Two numbers say whether a correction was a mistake.** `scrollRangePx` is
+recorded on `prependCompensated` and on every `anchor.correct`, because a
+correction and the reason for one read the same otherwise. Measured over five
+junctions, the correction equalled the change in the scroll range every time
+(−94/−93.4, +76/+76.5, +26/+30.7, +8/+7.6): the compensation had not over-shot,
+the transcript above the reader had re-measured, and the anchor was following
+it. A correction with the range *unchanged* would be the other diagnosis.
+
+Nothing evaluates a payload while the switch is off.
+
+### Reading the log
+
+```text
+pnpm run flowchat:log:analyze -- <path-to-flowchat.log> [--around <sequence>]
+```
+
+`scripts/diagnostics/analyze-flowchat-log.mjs` reports, in this order:
+
+1. **Episodes** of viewport activity, worst *churn* first — travel per pixel of
+   progress. A clean move is 1. The snap back that never arrived would be
+   hundreds, and that number is the difference between "it moved wrongly" and
+   "it fought".
+2. **Placements that did not stick**, ranked by drift. A placement with no
+   outcome sampled is listed separately rather than counted as clean.
+3. **Refusals**, as owner × who outranked them.
+4. **Declines**, as writer × reason.
+
+Two things it is careful about, because both would otherwise flatter the
+result: a coalesced entry is weighed by the run it stands for, not as one event;
+and dropped entries are reported at the top, since every count below one is a
+lower bound.
+
+The paging side of the same fault is traced separately; see *Diagnosing History
+Paging* in `FLOWCHAT_HISTORY_PAGING.md`.
+
+## Related Files
+
+- `flowChatViewportOwnership.ts`
+- `useFlowChatViewportOwner.ts`
+- `@/infrastructure/diagnostics/flowChatViewportDiagnostics.ts`
+- `VirtualMessageList.tsx`
+- `useFlowChatNavigation.ts`
+- `scripts/diagnostics/analyze-flowchat-log.mjs`
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
new file mode 100644
index 0000000000..e9ce863a89
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
@@ -0,0 +1,138 @@
+# FlowChat Virtualization
+
+What the virtualization library is allowed to decide, what stays ours, and the
+one rule about rendering that only makes sense once a row's lifetime is shorter
+than its content's.
+
+## What Belongs to the Virtualizer
+
+FlowChat virtualizes with **TanStack Virtual**, behind `useFlowChatVirtualizer.ts`.
+Nothing else imports it. The rest of FlowChat asks for offsets in scroller
+coordinates and gets them back; there is no index space of the virtualizer's own
+to convert at the edges, because measurements are cached against **item keys**,
+so a history prepend leaves every measured item exactly where it was.
+
+That is only half of what react-virtuoso's `firstItemIndex` did, and the other
+half has to be supplied — see *Keeping the Viewport on the Reader's Content* in
+`FLOWCHAT_HISTORY_PAGING.md`.
+
+The reason it is TanStack and not react-virtuoso is one line of its measurement
+pass: `size = measured ?? estimateSize(i)`. A per-item estimate for everything
+unmeasured. react-virtuoso reserves a single scalar (`lastSize`) for all of
+them, and this transcript alternates 38px user messages with model rounds up to
+5012px, so the scroll range was wrong by an order of magnitude until an item was
+actually measured. `estimateVirtualMessageItemHeight` now feeds it directly.
+
+**Items stay in normal flow inside a padded window**, not absolutely positioned.
+Everything outside the window stands in as `padding-top` and `padding-bottom`
+(`virtualWindowPaddingPx`). This matters for more than tidiness: when an item
+inside the window changes height, the browser reflows the ones below it in the
+same layout pass, so there is no frame where the scroll has been corrected but
+the items have not moved yet.
+
+**The virtualizer does not compensate for its own late measurements.**
+`shouldAdjustScrollPositionOnItemSizeChange` is set to refuse, always. Its rule
+is the right shape — this item's delta, only for an item above the viewport —
+but it applies that delta to `scrollOffset`, the library's own copy of the
+scroll position, refreshed only from scroll events. Every continuous writer here
+assigns `scrollTop` directly and the matching scroll event lands a frame later,
+so a measurement arriving in between is compensated from a position the viewport
+has already left. Measured on session open: **nine corrections across two frames
+walked the viewport from 7440 back to 3556**, and the follow loop wrote 7440
+again on the next frame. The interception this replaces was written for
+react-virtuoso and removed on the assumption that TanStack asked the right
+question. It does — from a stale base.
+
+**Measurement is forced before any position is read in the commit that changed
+the items.** The library skips its inline resize while the reader is scrolling,
+which is exactly when history arrives, so the cache holds reserved estimates
+until the ResizeObserver delivers a frame later.
+`virtualizer.measureRenderedItems()` does that reconciliation itself — the same
+work, a frame earlier, free for any row whose height was already right. The
+evidence and the numbers are in *A Displacement Is Not a Movement* in
+`FLOWCHAT_HISTORY_PAGING.md`.
+
+**Alignment is asked for, not computed, wherever it fits.** `scrollItemIntoView`
+goes through the virtualizer so that its re-aim keeps chasing the item while the
+measurements under it move; an offset computed once is already stale by then.
+The gap above a top-aligned Turn is the virtualizer's `scrollPaddingStart`, for
+the same reason. Only two places compute an offset by hand, and both do it
+because the target is not an item: the end of *real content*, which is above the
+resident tail spacer, and the end of a Turn.
+
+Two things that look like they belong here do not:
+
+- **Positions in `virtualItems`.** That array is FlowChat's own projection, so
+  an index into it means the same thing under any virtualizer. `scrollToIndex`,
+  `scrollToSearchMatch`, and `data-virtual-index` all carry one and are left
+  alone.
+- **When to page.** `historyBoundariesForVisibleRange` decides that a boundary
+  is worth asking about, from where the reader stands and nothing else. Its
+  thresholds are the ones that decide *where* a junction happens, which is why
+  they are named and tested rather than inline.
+
+**Visible is not rendered.** `getVisibleItemRange` intersects the rows with the
+scroller box; the rendered window carries overscan, and a transcript short
+enough to render whole reports the first *and* last item present wherever the
+viewport stands. Feeding the rendered window to a rule that means "has the
+reader arrived here" asks whether the item exists instead. Measured: a 21-item
+transcript rendered rows 0..20 from index 0 no matter where the reader was, so
+the head boundary read as reached forever. It has to be a callback rather than a
+value, because a scroll moves the viewport across the window without changing
+it.
+
+react-virtuoso remains a dependency: the file tree (`VirtualFileTree.tsx`) still
+uses it. Nothing under `flow_chat/` does.
+
+## The Projection Is the Stable Thing
+
+Stable virtual-item keys and projection identity are required. Do not split one
+`ModelRound` into multiple virtual items, and do not reclassify projection from
+a timer.
+
+`getVirtualItemStableKey` keys on type, Turn and content id — never on an index.
+That is what lets a prepend renumber every row without React unmounting any of
+them, and it is what the measurement cache is keyed on underneath.
+
+Tool cards reflow naturally and dispatch only `tool-card-toggle` after an
+expanded-state change, so the virtualizer can remeasure. There is no
+pre-collapse intent event and no per-card compensation.
+
+## A Row's Mount Is Not an Arrival
+
+**No mount or enter animation may live inside `.virtual-item-wrapper`**, no
+mount-triggered motion may change transcript geometry, and nothing may be keyed
+on a state change a scroll can replay.
+
+Outside a virtualized list an element's insertion means its content arrived, and
+a fade or a slide says so honestly. Here insertion means the row entered the
+rendered window. Paging up mounts the Turns the page brought, the rows the
+junction's own correction scrolls past, and every row the reader scrolls back
+over afterwards — each one replaying whatever its stylesheet attached to mount.
+`--streaming` to `--complete` is the same mistake in a different key: it fires
+when the typewriter finishes, which is not when the reader is looking.
+
+The one that shipped was `.markdown-renderer`, from the shared component
+library: `animation: fadeIn var(--bf-appearance-token-motion-base) ease-out`,
+350ms from `opacity: 0`. Once the junction displacement was down to tens of
+pixels that fade was the entire remaining complaint — most of the screen
+dimming and coming back on every page up. `VirtualItemRenderer.scss` cancels it
+for anything inside a row and leaves the library alone, where a markdown block
+really is mounted once.
+
+The rule is stated here because four correct local fixes could not reach it.
+`ModelRoundItem.scss` and `UserMessageItem.scss` each refuse an enter animation
+of their own, in comments that name this reason. `FlowTextBlock`'s typewriter
+refuses to replay on mount, because a streaming block that scrolled out and
+back would restart from an empty string and re-grow. `FlowTextBlock.scss`
+cancels this very fade — but only under `.streaming`, so the one block still
+being written was exempt and the whole of history was not. Each author saw the
+defect, guarded their own file, and had no way to guard a component in another
+package.
+
+## Related Files
+
+- `useFlowChatVirtualizer.ts`
+- `virtualMessageListLayout.ts`
+- `VirtualItemRenderer.tsx` + `.scss`
+- `VirtualMessageList.tsx`
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts b/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
index b40a5c4ff1..32cb3ce771 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
@@ -114,13 +114,3 @@ describe('FlowChat collapse spacing', () => {
     );
   });
 });
-
-describe('FlowChat initial projection alignment', () => {
-  it('reserves the Virtuoso scrollbar gutter in the handoff overlay', () => {
-    const stylesheet = readSource('./VirtualMessageList.scss');
-
-    expect(stylesheet).toMatch(
-      /&__projection-handoff-overlay\s*\{[\s\S]*?scrollbar-gutter:\s*stable;/,
-    );
-  });
-});
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
index 6befe113e7..32baff1de8 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
@@ -8,44 +8,18 @@
   justify-content: space-between;
   gap: $size-gap-1;
   padding: 0 $size-gap-3;
-  border-bottom: 1px dashed var(--bf-appearance-token-border-base);
+  border-bottom: 1px solid var(--bf-appearance-token-border-base);
+
+  // Opaque bar stacked above the message list, so message geometry stays
+  // independent of the header.
+  background: var(--bf-appearance-token-color-bg-scene);
 
-  // Frosted glass effect.
-  background: color-mix(in srgb, var(--bf-appearance-token-color-bg-elevated) 45%, transparent);
-  backdrop-filter: blur(20px) saturate(1.3);
-  -webkit-backdrop-filter: blur(20px) saturate(1.3);
-  
   height: 36px;
   min-height: 36px;
   flex-shrink: 0;
   transition: all $motion-base $easing-standard;
   position: relative;
   z-index: 10;
-  
-  // ==================== Bottom gradient blur ====================
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 100%;
-    height: 16px;
-    pointer-events: none;
-    
-    background: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--bf-appearance-token-color-bg-elevated) 35%, transparent) 0%,
-      color-mix(in srgb, var(--bf-appearance-token-color-bg-elevated) 20%, transparent) 35%,
-      color-mix(in srgb, var(--bf-appearance-token-color-bg-elevated) 8%, transparent) 65%,
-      transparent 100%
-    );
-
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-
-    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-  }
 
   &__btw-back {
     flex: 0 0 auto;
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
index 6553cf9563..3cd97ede3c 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
@@ -464,9 +464,13 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
     count: backgroundCommandCount,
   });
 
-  if (!visible || totalTurns === 0) {
+  // The header occupies a row above the message list, so its mount state must
+  // not depend on turn measurement: unmounting on a transient `totalTurns === 0`
+  // would resize the list mid-session. Only the centre message is withheld.
+  if (!visible) {
     return null;
   }
+  const hasTurnInfo = totalTurns > 0;
 
   return (
     <div
@@ -484,37 +488,39 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
         <SessionFilesBadge sessionId={sessionId} />
       </div>
 
-      <Tooltip content={currentUserMessage} placement="bottom">
-        <div
-          className="flowchat-header__message"
-          data-bf-component="flow-chat-header"
-          data-bf-part="message"
-          role="button"
-          tabIndex={0}
-          onClick={onJumpToCurrentTurn}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              onJumpToCurrentTurn?.();
-            }
-          }}
-          aria-label={t('flowChatHeader.jumpToCurrentTurn', {
-            turn: currentTurn
-          })}
-        >
-          <span
-            className="flowchat-header__turn-badge"
-            aria-label={turnBadgeLabel}
+      {hasTurnInfo ? (
+        <Tooltip content={currentUserMessage} placement="bottom">
+          <div
+            className="flowchat-header__message"
             data-bf-component="flow-chat-header"
-            data-bf-part="turnBadge"
+            data-bf-part="message"
+            role="button"
+            tabIndex={0}
+            onClick={onJumpToCurrentTurn}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onJumpToCurrentTurn?.();
+              }
+            }}
+            aria-label={t('flowChatHeader.jumpToCurrentTurn', {
+              turn: currentTurn
+            })}
           >
-            <span>{turnBadgeLabel}</span>
-          </span>
-          <span className="flowchat-header__message-text">
-            {truncatedMessage}
-          </span>
-        </div>
-      </Tooltip>
+            <span
+              className="flowchat-header__turn-badge"
+              aria-label={turnBadgeLabel}
+              data-bf-component="flow-chat-header"
+              data-bf-part="turnBadge"
+            >
+              <span>{turnBadgeLabel}</span>
+            </span>
+            <span className="flowchat-header__message-text">
+              {truncatedMessage}
+            </span>
+          </div>
+        </Tooltip>
+      ) : null}
 
       <div
         className="flowchat-header__actions"
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.test.ts b/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.test.ts
deleted file mode 100644
index a5a68e37d4..0000000000
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.test.ts
+++ /dev/null
@@ -1,532 +0,0 @@
-// @vitest-environment jsdom
-
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import {
-  canHandoffPinnedItemToTail,
-  FlowChatViewportCoordinator,
-} from './FlowChatViewportCoordinator';
-
-function setRect(element: HTMLElement, top: number): void {
-  Object.defineProperty(element, 'getBoundingClientRect', {
-    configurable: true,
-    value: () => ({
-      bottom: top + 40,
-      height: 40,
-      left: 0,
-      right: 300,
-      top,
-      width: 300,
-      x: 0,
-      y: top,
-      toJSON: () => ({}),
-    }),
-  });
-}
-
-function setScrollerGeometry(scroller: HTMLElement, scrollTop: number): void {
-  Object.defineProperties(scroller, {
-    clientHeight: { configurable: true, value: 500 },
-    scrollHeight: { configurable: true, value: 2000 },
-    scrollTop: { configurable: true, writable: true, value: scrollTop },
-  });
-}
-
-afterEach(() => {
-  document.body.replaceChildren();
-  vi.restoreAllMocks();
-});
-
-describe('FlowChatViewportCoordinator', () => {
-  it('hands off after the pin drains or natural content reaches the viewport tail', () => {
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 1029,
-      collapseReservationPx: 0,
-      pendingStickyPinGrowthPx: 0,
-      hasPendingCollapseIntent: false,
-      viewport: {
-        scrollTop: 900,
-        clientHeight: 1000,
-        naturalContentHeight: 1899,
-      },
-    })).toBe(false);
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 1029,
-      collapseReservationPx: 0,
-      pendingStickyPinGrowthPx: 0,
-      hasPendingCollapseIntent: false,
-      viewport: {
-        scrollTop: 900,
-        clientHeight: 1000,
-        naturalContentHeight: 1900,
-      },
-    })).toBe(true);
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 1029,
-      collapseReservationPx: 200,
-      pendingStickyPinGrowthPx: 0,
-      hasPendingCollapseIntent: false,
-      viewport: {
-        scrollTop: 900,
-        clientHeight: 1000,
-        naturalContentHeight: 2000,
-      },
-    })).toBe(false);
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 1029,
-      collapseReservationPx: 0,
-      pendingStickyPinGrowthPx: 20,
-      hasPendingCollapseIntent: false,
-      viewport: {
-        scrollTop: 900,
-        clientHeight: 1000,
-        naturalContentHeight: 2000,
-      },
-    })).toBe(false);
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 1029,
-      collapseReservationPx: 0,
-      pendingStickyPinGrowthPx: 0,
-      hasPendingCollapseIntent: true,
-      viewport: {
-        scrollTop: 900,
-        clientHeight: 1000,
-        naturalContentHeight: 2000,
-      },
-    })).toBe(false);
-    expect(canHandoffPinnedItemToTail({
-      pinReservationPx: 0,
-      collapseReservationPx: 0,
-      pendingStickyPinGrowthPx: 0,
-      hasPendingCollapseIntent: false,
-      viewport: null,
-    })).toBe(true);
-  });
-
-  it('restores a collapsing card header to its captured viewport offset', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.preserveElement(card)).toBe(true);
-
-    setRect(card, 80);
-    expect(coordinator.restoreElementAnchor(scroller)).toBe(true);
-    expect(scroller.scrollTop).toBe(860);
-  });
-
-  it('does not let automatic tail follow replace a preserved card anchor', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.preserveElement(card);
-
-    expect(coordinator.followTail()).toBe(false);
-    expect(coordinator.getMode()).toBe('preserving-element');
-    expect(coordinator.followTail({ force: true })).toBe(true);
-    expect(coordinator.getMode()).toBe('following-tail');
-  });
-
-  it('retains a settled card anchor without a wall-clock expiry', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const now = vi.spyOn(performance, 'now').mockReturnValue(1_000);
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.preserveElement(card)).toBe(true);
-    expect(coordinator.settleElementPreservation('test-settled')).toBe(true);
-
-    now.mockReturnValue(60_000);
-    expect(coordinator.ownsElementAnchor()).toBe(true);
-    expect(coordinator.getMode()).toBe('preserving-element');
-
-    setRect(card, 80);
-    expect(coordinator.restoreElementAnchor(scroller, 'test-delayed-layout')).toBe(true);
-    expect(scroller.scrollTop).toBe(860);
-  });
-
-  it('allows automatic tail follow to take ownership from a retained anchor', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.preserveElement(card);
-    coordinator.settleElementPreservation('test-settled');
-
-    expect(coordinator.followTail()).toBe(true);
-    expect(coordinator.getMode()).toBe('following-tail');
-    expect(coordinator.ownsElementAnchor()).toBe(false);
-  });
-
-  it('releases a retained anchor when its DOM element disconnects', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.preserveElement(card);
-    coordinator.settleElementPreservation('test-settled');
-    card.remove();
-
-    expect(coordinator.ownsElementAnchor()).toBe(false);
-    expect(coordinator.getMode()).toBe('idle');
-  });
-
-  it('does not let a stale element-anchor lease release a newer preservation transaction', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const firstCard = document.createElement('div');
-    const secondCard = document.createElement('div');
-    scroller.append(firstCard, secondCard);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(firstCard, 120);
-    setRect(secondCard, 180);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    const firstLease = coordinator.preserveElementWithLease(firstCard);
-    const secondLease = coordinator.preserveElementWithLease(secondCard);
-
-    expect(firstLease).not.toBeNull();
-    expect(secondLease).not.toBeNull();
-    expect(coordinator.releaseElementPreservationLease(
-      firstLease!,
-      'stale-request-finished',
-    )).toBe(false);
-    expect(coordinator.ownsElementAnchor()).toBe(true);
-    expect(coordinator.releaseElementPreservationLease(
-      secondLease!,
-      'current-request-finished',
-    )).toBe(true);
-    expect(coordinator.getMode()).toBe('idle');
-  });
-
-  it('keeps a pinned item anchored until follow mode takes ownership', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const item = document.createElement('div');
-    scroller.append(item);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(item, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.pinElement(item)).toBe(true);
-
-    setRect(item, 87);
-    expect(coordinator.restoreElementAnchor(scroller)).toBe(true);
-    expect(scroller.scrollTop).toBe(730);
-    expect(coordinator.getMode()).toBe('pinned-item');
-
-    coordinator.followTail({ force: true });
-    setRect(item, 117);
-    expect(coordinator.restoreElementAnchor(scroller)).toBe(false);
-  });
-
-  it('retains logical pin ownership while Virtuoso rematerializes a disconnected item', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const item = document.createElement('div');
-    scroller.append(item);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(item, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.pinElement(item)).toBe(true);
-
-    item.remove();
-    expect(coordinator.ownsElementAnchor()).toBe(false);
-    expect(coordinator.getMode()).toBe('pinned-item');
-
-    coordinator.release('test-cleanup');
-    expect(coordinator.getMode()).toBe('idle');
-  });
-
-  it('does not let a tool-card collapse replace an active pinned-item anchor', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    const toolCard = document.createElement('div');
-    scroller.append(pinnedItem, toolCard);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-    setRect(toolCard, 300);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.pinElement(pinnedItem);
-
-    expect(coordinator.preserveElement(toolCard)).toBe(false);
-    expect(coordinator.getMode()).toBe('pinned-item');
-  });
-
-  it('owns virtualizer scroll compensation while an element anchor is active', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.ownsElementAnchor()).toBe(false);
-    coordinator.pinElement(pinnedItem);
-    expect(coordinator.ownsElementAnchor()).toBe(true);
-    coordinator.followTail({ force: true });
-    expect(coordinator.ownsElementAnchor()).toBe(false);
-  });
-
-  it('restores an idle viewport position once without creating a persistent lock', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.restoreScrollPositionOnce(scroller, 1200, 'test-idle')).toBe(true);
-    expect(scroller.scrollTop).toBe(1200);
-
-    scroller.scrollTop = 900;
-    expect(coordinator.getMode()).toBe('idle');
-    expect(scroller.scrollTop).toBe(900);
-  });
-
-  it('clamps the idle fallback restore to the current physical scroll range', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    expect(coordinator.restoreScrollPositionOnce(scroller, 5000, 'test-clamp')).toBe(true);
-    expect(scroller.scrollTop).toBe(1500);
-  });
-
-  it('delegates one-shot restoration to the semantic anchor when it owns the viewport', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.pinElement(pinnedItem);
-    setRect(pinnedItem, 87);
-
-    expect(coordinator.restoreScrollPositionOnce(scroller, 0, 'test-semantic')).toBe(true);
-    expect(scroller.scrollTop).toBe(730);
-  });
-
-  it('extends the physical bottom range before retrying a stalled semantic restore', () => {
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-
-    let scrollHeight = 1200;
-    const clientHeight = 500;
-    let scrollTop = 700;
-    let itemTop = 57;
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, get: () => clientHeight },
-      scrollHeight: { configurable: true, get: () => scrollHeight },
-      scrollTop: {
-        configurable: true,
-        get: () => scrollTop,
-        set: (requested: number) => {
-          const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
-          const applied = Math.min(maxScrollTop, Math.max(0, requested));
-          itemTop -= applied - scrollTop;
-          scrollTop = applied;
-        },
-      },
-    });
-    setRect(scroller, 0);
-    vi.spyOn(pinnedItem, 'getBoundingClientRect').mockImplementation(() => ({
-      bottom: itemTop + 40,
-      height: 40,
-      left: 0,
-      right: 300,
-      top: itemTop,
-      width: 300,
-      x: 0,
-      y: itemTop,
-      toJSON: () => ({}),
-    }));
-
-    const ensureBottomRange = vi.fn(({ additionalPx }: { additionalPx: number }) => {
-      scrollHeight += additionalPx;
-      return true;
-    });
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.setRangeHost({ ensureBottomRange });
-    coordinator.pinElement(pinnedItem);
-
-    scrollHeight = 1150;
-    scroller.scrollTop = 700;
-    expect(scrollTop).toBe(650);
-    expect(itemTop).toBe(107);
-
-    expect(coordinator.restoreElementAnchor(scroller, 'test-range-recovery')).toBe(true);
-    expect(ensureBottomRange).toHaveBeenCalledWith(expect.objectContaining({
-      additionalPx: 51,
-      mode: 'pinned-item',
-      source: 'test-range-recovery',
-    }));
-    expect(scrollTop).toBe(700);
-    expect(itemTop).toBe(57);
-    coordinator.release('test-cleanup');
-  });
-
-  it('reconciles a pinned anchor from the internal animation-frame guard', () => {
-    let scheduledFrame: FrameRequestCallback | null = null;
-    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
-      scheduledFrame = callback;
-      return 1;
-    });
-    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
-
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.pinElement(pinnedItem);
-    setRect(pinnedItem, 157);
-
-    expect(scheduledFrame).not.toBeNull();
-    (scheduledFrame as FrameRequestCallback)(0);
-    expect(scroller.scrollTop).toBe(800);
-    coordinator.release('test-cleanup');
-  });
-
-  it('coalesces scheduled anchor restores into the existing frame using the latest request', () => {
-    let scheduledFrame: FrameRequestCallback | null = null;
-    const requestFrame = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
-      scheduledFrame = callback;
-      return 1;
-    });
-    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
-
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.pinElement(pinnedItem);
-    const restoreAnchor = vi.spyOn(coordinator, 'restoreElementAnchor');
-    setRect(pinnedItem, 87);
-
-    expect(coordinator.scheduleElementAnchorRestore(scroller, 'scroll-handler:first')).toBe(true);
-    expect(coordinator.scheduleElementAnchorRestore(scroller, 'scroll-handler:latest')).toBe(true);
-    expect(requestFrame).toHaveBeenCalledTimes(1);
-
-    expect(scheduledFrame).not.toBeNull();
-    (scheduledFrame as FrameRequestCallback)(0);
-    expect(restoreAnchor).toHaveBeenCalledTimes(1);
-    expect(restoreAnchor).toHaveBeenCalledWith(scroller, 'scroll-handler:latest');
-    expect(scroller.scrollTop).toBe(730);
-    coordinator.release('test-cleanup');
-  });
-
-  it('cancels a scheduled anchor restore when semantic ownership is released', () => {
-    let scheduledFrame: FrameRequestCallback | null = null;
-    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
-      scheduledFrame = callback;
-      return 17;
-    });
-    const cancelFrame = vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
-
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const pinnedItem = document.createElement('div');
-    scroller.append(pinnedItem);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 700);
-    setRect(scroller, 0);
-    setRect(pinnedItem, 57);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.pinElement(pinnedItem);
-    const restoreAnchor = vi.spyOn(coordinator, 'restoreElementAnchor');
-    coordinator.scheduleElementAnchorRestore(scroller, 'scroll-handler');
-    coordinator.release('stream-end-pinned-item');
-
-    expect(cancelFrame).toHaveBeenCalledWith(17);
-    expect(scheduledFrame).not.toBeNull();
-    (scheduledFrame as FrameRequestCallback)(0);
-    expect(restoreAnchor).not.toHaveBeenCalled();
-    expect(coordinator.getMode()).toBe('idle');
-  });
-
-  it('stops the animation-frame guard after element preservation settles', () => {
-    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(() => 17);
-    const cancelFrame = vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
-
-    const scroller = document.createElement('div');
-    scroller.dataset.virtuosoScroller = 'true';
-    const card = document.createElement('div');
-    scroller.append(card);
-    document.body.append(scroller);
-    setScrollerGeometry(scroller, 900);
-    setRect(scroller, 0);
-    setRect(card, 120);
-
-    const coordinator = new FlowChatViewportCoordinator();
-    coordinator.preserveElement(card);
-    coordinator.settleElementPreservation('test-settled');
-
-    expect(cancelFrame).toHaveBeenCalledWith(17);
-    expect(coordinator.ownsElementAnchor()).toBe(true);
-  });
-});
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.ts b/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.ts
deleted file mode 100644
index 32e4589cd8..0000000000
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatViewportCoordinator.ts
+++ /dev/null
@@ -1,482 +0,0 @@
-import { flowChatDiagnostics } from '@/infrastructure/diagnostics/flowChatDiagnostics';
-
-export type FlowChatViewportAnchorMode =
-  | 'idle'
-  | 'pinned-item'
-  | 'following-tail'
-  | 'preserving-element';
-
-export interface FlowChatViewportRangeHost {
-  ensureBottomRange(options: {
-    additionalPx: number;
-    mode: Extract<FlowChatViewportAnchorMode, 'pinned-item' | 'preserving-element'>;
-    source: string;
-  }): boolean;
-}
-
-export type FlowChatElementAnchorLease = number;
-
-type ElementAnchor = {
-  element: HTMLElement;
-  scroller: HTMLElement;
-  offsetFromScrollerTop: number;
-  preservationPhase: 'active' | 'retained' | null;
-  lease: FlowChatElementAnchorLease;
-};
-
-type PendingElementAnchorRestore = {
-  scroller: HTMLElement;
-  source: string;
-};
-
-const ELEMENT_ANCHOR_EPSILON_PX = 0.5;
-const ELEMENT_ANCHOR_RANGE_GUARD_PX = 1;
-
-export function canHandoffPinnedItemToTail(options: {
-  pinReservationPx: number;
-  collapseReservationPx: number;
-  pendingStickyPinGrowthPx: number;
-  hasPendingCollapseIntent: boolean;
-  viewport: {
-    scrollTop: number;
-    clientHeight: number;
-    naturalContentHeight: number;
-  } | null;
-}): boolean {
-  if (
-    options.collapseReservationPx > ELEMENT_ANCHOR_EPSILON_PX ||
-    options.pendingStickyPinGrowthPx > ELEMENT_ANCHOR_EPSILON_PX ||
-    options.hasPendingCollapseIntent
-  ) {
-    return false;
-  }
-
-  if (options.pinReservationPx <= ELEMENT_ANCHOR_EPSILON_PX) {
-    return true;
-  }
-
-  const viewport = options.viewport;
-  if (
-    !viewport ||
-    !Number.isFinite(viewport.scrollTop) ||
-    !Number.isFinite(viewport.clientHeight) ||
-    !Number.isFinite(viewport.naturalContentHeight) ||
-    viewport.clientHeight <= ELEMENT_ANCHOR_EPSILON_PX
-  ) {
-    return false;
-  }
-
-  return (
-    viewport.naturalContentHeight + ELEMENT_ANCHOR_EPSILON_PX >=
-    viewport.scrollTop + viewport.clientHeight
-  );
-}
-
-/** Owns anchor priority independently from the virtualizer implementation. */
-export class FlowChatViewportCoordinator {
-  private mode: FlowChatViewportAnchorMode = 'idle';
-  private elementAnchor: ElementAnchor | null = null;
-  private anchorGuardFrame: number | null = null;
-  private pendingElementAnchorRestore: PendingElementAnchorRestore | null = null;
-  private rangeHost: FlowChatViewportRangeHost | null = null;
-  private nextElementAnchorLease = 0;
-
-  setRangeHost(host: FlowChatViewportRangeHost | null): void {
-    this.rangeHost = host;
-  }
-
-  getMode(): FlowChatViewportAnchorMode {
-    this.validateElementAnchor('get-mode');
-    return this.mode;
-  }
-
-  ownsElementAnchor(): boolean {
-    this.validateElementAnchor('owns-element-anchor');
-    return Boolean(
-      this.elementAnchor &&
-      (this.mode === 'pinned-item' || this.mode === 'preserving-element'),
-    );
-  }
-
-  pinItem(reason = 'unspecified'): void {
-    const previousMode = this.mode;
-    this.cancelElementAnchorRestoreWork();
-    this.elementAnchor = null;
-    this.mode = 'pinned-item';
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'B',
-        location: 'FlowChatViewportCoordinator.pinItem',
-        message: 'Viewport coordinator entered pinned item mode',
-        data: () => ({ previousMode, reason }),
-      });
-    }
-  }
-
-  pinElement(element: HTMLElement | null | undefined): boolean {
-    return this.captureElement(element, 'pinned-item') !== null;
-  }
-
-  followTail(options?: { force?: boolean }): boolean {
-    this.validateElementAnchor('follow-tail');
-    const hasActiveElementPreservation = (
-      this.mode === 'preserving-element' &&
-      this.elementAnchor?.preservationPhase === 'active'
-    );
-    if (hasActiveElementPreservation && !options?.force) {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'B',
-          location: 'FlowChatViewportCoordinator.followTail',
-          message: 'Tail follow rejected during active element preservation',
-          data: () => ({
-            mode: this.mode,
-            preservationPhase: this.elementAnchor?.preservationPhase ?? null,
-            force: options?.force === true,
-          }),
-        });
-      }
-      return false;
-    }
-
-    const previousMode = this.mode;
-    this.cancelElementAnchorRestoreWork();
-    this.elementAnchor = null;
-    this.mode = 'following-tail';
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'B',
-        location: 'FlowChatViewportCoordinator.followTail',
-        message: 'Viewport coordinator entered tail follow mode',
-        data: () => ({ previousMode, force: options?.force === true }),
-      });
-    }
-    return true;
-  }
-
-  preserveElement(element: HTMLElement | null | undefined): boolean {
-    return this.preserveElementWithLease(element) !== null;
-  }
-
-  preserveElementWithLease(
-    element: HTMLElement | null | undefined,
-  ): FlowChatElementAnchorLease | null {
-    this.validateElementAnchor('preserve-element');
-    if (!element || this.mode === 'following-tail' || this.mode === 'pinned-item') {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'E',
-          location: 'FlowChatViewportCoordinator.preserveElement',
-          message: 'Element preservation request rejected',
-          data: () => ({ hasElement: Boolean(element), mode: this.mode }),
-        });
-      }
-      return null;
-    }
-
-    return this.captureElement(
-      element,
-      'preserving-element',
-    );
-  }
-
-  releaseElementPreservationLease(
-    lease: FlowChatElementAnchorLease,
-    reason = 'unspecified',
-  ): boolean {
-    this.validateElementAnchor(`release-element-preservation-lease:${reason}`);
-    if (
-      this.mode !== 'preserving-element'
-      || this.elementAnchor?.lease !== lease
-    ) {
-      return false;
-    }
-
-    this.release(reason);
-    return true;
-  }
-
-  settleElementPreservation(source = 'unspecified'): boolean {
-    this.validateElementAnchor('settle-element-preservation');
-    const anchor = this.elementAnchor;
-    if (!anchor || this.mode !== 'preserving-element') {
-      return false;
-    }
-
-    const previousPhase = anchor.preservationPhase;
-    anchor.preservationPhase = 'retained';
-    this.stopAnchorGuard();
-    this.startAnchorGuard();
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'E',
-        location: 'FlowChatViewportCoordinator.settleElementPreservation',
-        message: 'Element preservation retained after layout settlement',
-        data: () => ({ previousPhase, source }),
-      });
-    }
-    return true;
-  }
-
-  private captureElement(
-    element: HTMLElement | null | undefined,
-    mode: 'pinned-item' | 'preserving-element',
-  ): FlowChatElementAnchorLease | null {
-    if (!element) {
-      return null;
-    }
-
-    const scroller = element.closest<HTMLElement>('[data-virtuoso-scroller="true"]');
-    if (!scroller) {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'B',
-          location: 'FlowChatViewportCoordinator.captureElement',
-          message: 'Element anchor capture failed without a scroller',
-          data: () => ({ mode }),
-        });
-      }
-      return null;
-    }
-
-    const elementRect = element.getBoundingClientRect();
-    const scrollerRect = scroller.getBoundingClientRect();
-    const lease = ++this.nextElementAnchorLease;
-    this.cancelElementAnchorRestoreWork();
-    this.elementAnchor = {
-      element,
-      scroller,
-      offsetFromScrollerTop: elementRect.top - scrollerRect.top,
-      preservationPhase: mode === 'preserving-element' ? 'active' : null,
-      lease,
-    };
-    this.mode = mode;
-    this.startAnchorGuard();
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: mode === 'preserving-element' ? 'E' : 'B',
-        location: 'FlowChatViewportCoordinator.captureElement',
-        message: 'Semantic element anchor captured',
-        data: () => ({
-          mode,
-          preservationPhase: this.elementAnchor?.preservationPhase ?? null,
-          lease,
-          elementConnected: element.isConnected,
-          offsetFromScrollerTop: this.elementAnchor?.offsetFromScrollerTop ?? null,
-          scrollTop: scroller.scrollTop,
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-        }),
-      });
-    }
-    return lease;
-  }
-
-  restoreElementAnchor(scroller: HTMLElement, source = 'external'): boolean {
-    this.validateElementAnchor(`restore:${source}`);
-    const anchor = this.elementAnchor;
-    if (!anchor || (this.mode !== 'preserving-element' && this.mode !== 'pinned-item')) {
-      return false;
-    }
-
-    const readCorrection = () => {
-      const elementRect = anchor.element.getBoundingClientRect();
-      const scrollerRect = scroller.getBoundingClientRect();
-      return elementRect.top - scrollerRect.top - anchor.offsetFromScrollerTop;
-    };
-    const applyCorrection = (correction: number) => {
-      const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      const desiredScrollTop = scroller.scrollTop + correction;
-      const requestedScrollTop = Math.min(maxScrollTop, Math.max(0, desiredScrollTop));
-      scroller.scrollTop = requestedScrollTop;
-    };
-
-    const initialCorrection = readCorrection();
-    if (Math.abs(initialCorrection) <= ELEMENT_ANCHOR_EPSILON_PX) {
-      return false;
-    }
-
-    const diagnosticsEnabled = flowChatDiagnostics.isEnabled();
-    const scrollTopBefore = diagnosticsEnabled ? scroller.scrollTop : null;
-    applyCorrection(initialCorrection);
-    let remainingCorrection = readCorrection();
-    if (diagnosticsEnabled) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'B',
-        location: 'FlowChatViewportCoordinator.restoreElementAnchor',
-        message: 'Semantic anchor correction applied',
-        data: () => ({
-          mode: this.mode,
-          source,
-          initialCorrection,
-          remainingCorrection,
-          scrollTopBefore,
-          scrollTopAfter: scroller.scrollTop,
-          maxScrollTop: Math.max(0, scroller.scrollHeight - scroller.clientHeight),
-        }),
-      });
-    }
-
-    if (
-      remainingCorrection > ELEMENT_ANCHOR_EPSILON_PX &&
-      this.rangeHost &&
-      (this.mode === 'pinned-item' || this.mode === 'preserving-element')
-    ) {
-      const rangeExtended = this.rangeHost.ensureBottomRange({
-        additionalPx: remainingCorrection + ELEMENT_ANCHOR_RANGE_GUARD_PX,
-        mode: this.mode,
-        source,
-      });
-      if (rangeExtended) {
-        void scroller.scrollHeight;
-        remainingCorrection = readCorrection();
-        if (Math.abs(remainingCorrection) > ELEMENT_ANCHOR_EPSILON_PX) {
-          applyCorrection(remainingCorrection);
-        }
-      }
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'C',
-          location: 'FlowChatViewportCoordinator.restoreElementAnchor',
-          message: 'Semantic anchor requested additional bottom range',
-          data: () => ({
-            mode: this.mode,
-            source,
-            rangeExtended,
-            remainingCorrection,
-            scrollTop: scroller.scrollTop,
-            scrollHeight: scroller.scrollHeight,
-            clientHeight: scroller.clientHeight,
-          }),
-        });
-      }
-    }
-    return true;
-  }
-
-  scheduleElementAnchorRestore(scroller: HTMLElement, source = 'external'): boolean {
-    this.validateElementAnchor(`schedule-restore:${source}`);
-    if (
-      !this.elementAnchor ||
-      (this.mode !== 'preserving-element' && this.mode !== 'pinned-item')
-    ) {
-      return false;
-    }
-
-    this.pendingElementAnchorRestore = { scroller, source };
-    if (typeof requestAnimationFrame === 'undefined') {
-      this.pendingElementAnchorRestore = null;
-      return this.restoreElementAnchor(scroller, source);
-    }
-
-    this.startAnchorGuard();
-    return true;
-  }
-
-  restoreScrollPositionOnce(
-    scroller: HTMLElement,
-    targetScrollTop: number,
-    source = 'unspecified',
-  ): boolean {
-    if (this.ownsElementAnchor()) {
-      this.restoreElementAnchor(scroller, source);
-      return true;
-    }
-
-    const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-    const previousScrollTop = scroller.scrollTop;
-    const nextScrollTop = Math.min(maxScrollTop, Math.max(0, targetScrollTop));
-    if (Math.abs(nextScrollTop - previousScrollTop) <= ELEMENT_ANCHOR_EPSILON_PX) {
-      return false;
-    }
-
-    scroller.scrollTop = nextScrollTop;
-    return true;
-  }
-
-  release(reason = 'unspecified'): void {
-    const previousMode = this.mode;
-    const hadElementAnchor = Boolean(this.elementAnchor);
-    const previousPreservationPhase = this.elementAnchor?.preservationPhase ?? null;
-    this.cancelElementAnchorRestoreWork();
-    this.elementAnchor = null;
-    this.mode = 'idle';
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'B',
-        location: 'FlowChatViewportCoordinator.release',
-        message: 'Viewport coordinator released semantic ownership',
-        data: () => ({ previousMode, previousPreservationPhase, hadElementAnchor, reason }),
-      });
-    }
-  }
-
-  private validateElementAnchor(source: string): void {
-    const anchor = this.elementAnchor;
-    if (anchor && (!anchor.element.isConnected || !anchor.scroller.isConnected)) {
-      if (this.mode === 'pinned-item' && anchor.scroller.isConnected) {
-        this.cancelElementAnchorRestoreWork();
-        this.elementAnchor = null;
-        return;
-      }
-      this.release(`element-anchor-disconnected:${source}`);
-    }
-  }
-
-  private startAnchorGuard(): void {
-    const shouldContinuouslyGuard = (
-      this.mode === 'pinned-item' ||
-      (
-        this.mode === 'preserving-element' &&
-        this.elementAnchor?.preservationPhase === 'active'
-      )
-    );
-    if (
-      this.anchorGuardFrame !== null ||
-      typeof requestAnimationFrame === 'undefined' ||
-      (!shouldContinuouslyGuard && !this.pendingElementAnchorRestore)
-    ) {
-      return;
-    }
-    this.anchorGuardFrame = requestAnimationFrame(this.runAnchorGuardFrame);
-  }
-
-  private stopAnchorGuard(): void {
-    if (this.anchorGuardFrame === null || typeof cancelAnimationFrame === 'undefined') {
-      this.anchorGuardFrame = null;
-      return;
-    }
-    cancelAnimationFrame(this.anchorGuardFrame);
-    this.anchorGuardFrame = null;
-  }
-
-  private cancelElementAnchorRestoreWork(): void {
-    this.pendingElementAnchorRestore = null;
-    this.stopAnchorGuard();
-  }
-
-  private runAnchorGuardFrame = (): void => {
-    this.anchorGuardFrame = null;
-    this.validateElementAnchor('anchor-guard');
-    const anchor = this.elementAnchor;
-    if (
-      !anchor ||
-      (this.mode !== 'pinned-item' && this.mode !== 'preserving-element') ||
-      (
-        this.mode === 'preserving-element' &&
-        anchor.preservationPhase === 'retained' &&
-        !this.pendingElementAnchorRestore
-      )
-    ) {
-      return;
-    }
-
-    const pendingRestore = this.pendingElementAnchorRestore;
-    this.pendingElementAnchorRestore = null;
-    this.restoreElementAnchor(
-      pendingRestore?.scroller ?? anchor.scroller,
-      pendingRestore?.source ?? 'anchor-guard',
-    );
-    this.startAnchorGuard();
-  };
-}
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.history-state.test.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.history-state.test.tsx
index 0f2e7e2613..c2a93cd4a6 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.history-state.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.history-state.test.tsx
@@ -1,2454 +1,21 @@
-// @vitest-environment jsdom
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
 
-import React, { act } from 'react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createRoot, type Root } from 'react-dom/client';
-import { ModernFlowChatContainer } from './ModernFlowChatContainer';
-import type { HistoryWindowBoundaryIntentResult } from './VirtualMessageList';
-import type { Session } from '../../types/flow-chat';
-import { flowChatStore } from '../../store/FlowChatStore';
-import {
-  clearHistorySessionOpenTransition,
-  dispatchHistorySessionOpenIntent,
-  HISTORY_SESSION_OPEN_INTENT_EVENT,
-} from '../../services/sessionOpenIntent';
-import { FLOWCHAT_TURN_RAIL_ROW_HEIGHT_PX } from './flowChatTurnRailWindow';
+const componentSource = fs.readFileSync(
+  path.resolve(__dirname, 'ModernFlowChatContainer.tsx'),
+  'utf8',
+);
 
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-
-const stateMocks = vi.hoisted(() => ({
-  activeSession: null as Session | null,
-  virtualItems: [] as unknown[],
-  visibleTurnInfo: null as unknown,
-}));
-
-const switchChatSessionMock = vi.hoisted(() => vi.fn());
-const virtualListMock = vi.hoisted(() => ({
-  scrollToTurn: vi.fn(),
-  scrollToIndex: vi.fn(),
-  scrollToSearchMatch: vi.fn(),
-  clearSearchMatch: vi.fn(),
-  scrollToPhysicalBottomAndClearPin: vi.fn(),
-  scrollToTurnEndAndClearPin: vi.fn(() => true),
-  scrollToLatestEndPosition: vi.fn(),
-  isTurnRenderedInViewport: vi.fn(() => false),
-  isTurnTextRenderedInViewport: vi.fn(() => false),
-  pinTurnToTop: vi.fn(() => true),
-  pinTurnToTopWithStatus: vi.fn(() => 'settled' as const),
-  prepareTurnPinToTop: vi.fn(() => 'pending' as const),
-}));
-const virtualListActionClickMock = vi.hoisted(() => vi.fn());
-const startupTraceMock = vi.hoisted(() => ({
-  markPhase: vi.fn(),
-}));
-const historySessionDiagnosticsMock = vi.hoisted(() => ({
-  beginHistorySessionDiagnostics: vi.fn(() => 'diag-1'),
-  recordHistorySessionDiagnosticEvent: vi.fn(),
-  warnHistorySessionLoadingLayerStalled: vi.fn(),
-}));
-const searchStateMock = vi.hoisted(() => ({
-  searchQuery: '',
-  onSearchChange: vi.fn(),
-  matches: [] as unknown[],
-  matchIndices: [] as number[],
-  currentMatchIndex: -1,
-  currentMatchVirtualIndex: -1,
-  goToNext: vi.fn(),
-  goToPrev: vi.fn(),
-  clearSearch: vi.fn(),
-}));
-const headerPropsMock = vi.hoisted(() => ({
-  latest: null as Record<string, unknown> | null,
-}));
-const virtualListPropsMock = vi.hoisted(() => ({
-  latest: null as Record<string, unknown> | null,
-}));
-const navigationOptionsMock = vi.hoisted(() => ({
-  latest: null as Record<string, unknown> | null,
-}));
-const agentApiMock = vi.hoisted(() => ({
-  listBackgroundCommandActivities: vi.fn(() => Promise.resolve({ activities: [] })),
-  onPermissionRequestEvent: vi.fn(() => vi.fn()),
-  subscribePermissionRequests: vi.fn(() => Promise.resolve()),
-  listPendingPermissionRequests: vi.fn(() => Promise.resolve([])),
-}));
-
-vi.mock('react-i18next', () => ({
-  initReactI18next: {
-    type: '3rdParty',
-    init: () => undefined,
-  },
-  useTranslation: () => ({
-    t: (key: string) => {
-      const labels: Record<string, string> = {
-        'historyState.loadingTitle': 'Loading saved session',
-        'historyState.loadingDescription': 'Preparing the conversation history.',
-        'historyState.failedTitle': 'Session history did not load',
-        'historyState.failedDescription': 'Retry loading the saved conversation.',
-        'historyState.retry': 'Retry',
-      };
-      return labels[key] ?? key;
-    },
-  }),
-}));
-
-vi.mock('@/infrastructure/hooks/useShortcut', () => ({
-  useShortcut: vi.fn(),
-}));
-
-vi.mock('@/flow_chat/services/FlowChatManager', () => ({
-  FlowChatManager: {
-    getInstance: () => ({
-      cancelCurrentTask: vi.fn(),
-      createChatSession: vi.fn(),
-      switchChatSession: switchChatSessionMock,
-    }),
-  },
-}));
-
-vi.mock('@/app/stores/sessionModeStore', () => ({
-  useSessionModeStore: {
-    getState: () => ({
-      setMode: vi.fn(),
-    }),
-  },
-}));
-
-vi.mock('@/infrastructure/contexts/WorkspaceContext', () => ({
-  useWorkspaceContext: () => ({
-    workspacePath: 'D:/workspace/BitFun',
-  }),
-}));
-
-vi.mock('@/infrastructure/api/service-api/AgentAPI', () => ({
-  agentAPI: agentApiMock,
-}));
-
-vi.mock('../../utils/acpSession', () => ({
-  isAcpFlowSession: () => false,
-}));
-
-vi.mock('../../store/modernFlowChatStore', () => ({
-  sessionToVirtualItems: (session: Session | null) => (session?.dialogTurns ?? []).map(turn => ({
-    type: 'user-message',
-    turnId: turn.id,
-    data: turn.userMessage,
-  })),
-  useVirtualItems: () => stateMocks.virtualItems,
-  useActiveSession: () => stateMocks.activeSession,
-  useVisibleTurnInfo: () => stateMocks.visibleTurnInfo,
-}));
-
-vi.mock('./VirtualMessageList', () => ({
-  VirtualMessageList: React.forwardRef((props: Record<string, unknown>, ref) => {
-    virtualListPropsMock.latest = props;
-    React.useImperativeHandle(ref, () => virtualListMock);
-    return (
-      <div data-testid="virtual-list">
-        <button type="button" data-testid="virtual-list-action" onClick={virtualListActionClickMock}>
-          Hidden action
-        </button>
-      </div>
-    );
-  }),
-}));
-
-vi.mock('@/shared/utils/startupTrace', () => ({
-  isRemoteTraceContext: () => false,
-  startupTrace: startupTraceMock,
-}));
-
-vi.mock('../../services/historySessionDiagnostics', () => historySessionDiagnosticsMock);
-
-vi.mock('./FlowChatHeader', () => ({
-  FlowChatHeader: (props: Record<string, unknown>) => {
-    headerPropsMock.latest = props;
-    return <div data-testid="flowchat-header" />;
-  },
-}));
-
-vi.mock('../WelcomePanel', () => ({
-  WelcomePanel: () => <div data-testid="welcome-panel">Welcome panel</div>,
-}));
-
-vi.mock('./useExploreGroupState', () => ({
-  useExploreGroupState: () => ({
-    exploreGroupStates: {},
-    onExploreGroupToggle: vi.fn(),
-    onExpandGroup: vi.fn(),
-    onExpandAllInTurn: vi.fn(),
-    onCollapseGroup: vi.fn(),
-  }),
-}));
-
-vi.mock('./useFlowChatFileActions', () => ({
-  useFlowChatFileActions: () => ({
-    handleFileViewRequest: vi.fn(),
-  }),
-}));
-
-vi.mock('./useFlowChatNavigation', () => ({
-  useFlowChatNavigation: (options: Record<string, unknown>) => {
-    navigationOptionsMock.latest = options;
-  },
-}));
-
-vi.mock('./useFlowChatCopyDialog', () => ({
-  useFlowChatCopyDialog: vi.fn(),
-}));
-
-vi.mock('./useFlowChatSync', () => ({
-  useFlowChatSync: vi.fn(),
-}));
-
-vi.mock('./useFlowChatToolActions', () => ({
-  useFlowChatToolActions: () => ({
-    handleToolConfirm: vi.fn(),
-    handleToolReject: vi.fn(),
-  }),
-}));
-
-vi.mock('./useFlowChatSearch', () => ({
-  useFlowChatSearch: () => searchStateMock,
-}));
-
-function createSession(overrides: Partial<Session> = {}): Session {
-  return {
-    sessionId: 'session-1',
-    title: 'Saved session',
-    dialogTurns: [],
-    status: 'idle',
-    config: { agentType: 'agentic' },
-    createdAt: 1,
-    lastActiveAt: 1,
-    error: null,
-    isHistorical: true,
-    todos: [],
-    mode: 'agentic',
-    workspacePath: 'D:/workspace/BitFun',
-    sessionKind: 'normal',
-    ...overrides,
-  };
-}
-
-function createTurn(id: string, content: string, status: 'completed' | 'processing' = 'completed') {
-  return {
-    id,
-    turnId: id,
-    sessionId: 'session-1',
-    timestamp: 1,
-    userMessage: { id: `user-${id}`, content, timestamp: 1 },
-    modelRounds: [],
-    startTime: 1,
-    status,
-  };
-}
-
-let rafCallbacks: FrameRequestCallback[] = [];
-
-function flushAnimationFrame() {
-  const callbacks = rafCallbacks;
-  rafCallbacks = [];
-  act(() => {
-    callbacks.forEach(callback => callback(performance.now()));
-  });
-}
-
-function clickTurnRailItem(container: HTMLElement, turnId: string) {
-  const item = container.querySelector<HTMLButtonElement>(`[data-turn-id="${turnId}"]`);
-  expect(item).not.toBeNull();
-  act(() => {
-    item?.click();
-  });
-}
-
-function scrollTurnRailToOrdinal(
-  container: HTMLElement,
-  ordinal: number,
-  clientHeight = FLOWCHAT_TURN_RAIL_ROW_HEIGHT_PX * 5,
-) {
-  const list = container.querySelector<HTMLDivElement>('.flowchat-turn-rail__list');
-  expect(list).not.toBeNull();
-  if (!list) return;
-
-  Object.defineProperty(list, 'clientHeight', { configurable: true, value: clientHeight });
-  list.scrollTop = ordinal * FLOWCHAT_TURN_RAIL_ROW_HEIGHT_PX;
-  act(() => {
-    list.dispatchEvent(new Event('scroll', { bubbles: true }));
-  });
-}
-
-describe('ModernFlowChatContainer historical empty state', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    vi.restoreAllMocks();
-    rafCallbacks = [];
-    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      rafCallbacks.push(callback);
-      return rafCallbacks.length;
-    }));
-    vi.stubGlobal('cancelAnimationFrame', vi.fn());
-    // jsdom in vitest 4.x may expose window.localStorage without a callable
-    // getItem; provide a minimal storage so shouldShowMockBackgroundActivities
-    // does not crash during render.
-    vi.stubGlobal('localStorage', {
-      getItem: vi.fn(() => null),
-      setItem: vi.fn(),
-      removeItem: vi.fn(),
-      clear: vi.fn(),
-      key: vi.fn(() => null),
-      length: 0,
-    });
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-    stateMocks.virtualItems = [];
-    stateMocks.visibleTurnInfo = null;
-    switchChatSessionMock.mockReset();
-    virtualListMock.scrollToTurn.mockReset();
-    virtualListMock.scrollToIndex.mockReset();
-    virtualListMock.scrollToSearchMatch.mockReset();
-    virtualListMock.clearSearchMatch.mockReset();
-    virtualListMock.scrollToPhysicalBottomAndClearPin.mockReset();
-    virtualListMock.scrollToTurnEndAndClearPin.mockReset();
-    virtualListMock.scrollToTurnEndAndClearPin.mockReturnValue(true);
-    virtualListMock.scrollToLatestEndPosition.mockReset();
-    virtualListMock.isTurnRenderedInViewport.mockReset();
-    virtualListMock.isTurnRenderedInViewport.mockReturnValue(false);
-    virtualListMock.isTurnTextRenderedInViewport.mockReset();
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-    virtualListMock.pinTurnToTop.mockReset();
-    virtualListMock.pinTurnToTop.mockReturnValue(true);
-    virtualListMock.pinTurnToTopWithStatus.mockReset();
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('settled');
-    virtualListMock.prepareTurnPinToTop.mockReset();
-    virtualListMock.prepareTurnPinToTop.mockReturnValue('pending');
-    virtualListActionClickMock.mockReset();
-    startupTraceMock.markPhase.mockReset();
-    historySessionDiagnosticsMock.beginHistorySessionDiagnostics.mockReset();
-    historySessionDiagnosticsMock.beginHistorySessionDiagnostics.mockReturnValue('diag-1');
-    historySessionDiagnosticsMock.recordHistorySessionDiagnosticEvent.mockReset();
-    historySessionDiagnosticsMock.warnHistorySessionLoadingLayerStalled.mockReset();
-    agentApiMock.listBackgroundCommandActivities.mockClear();
-    agentApiMock.listBackgroundCommandActivities.mockResolvedValue({ activities: [] });
-    searchStateMock.searchQuery = '';
-    searchStateMock.onSearchChange.mockReset();
-    searchStateMock.matches = [];
-    searchStateMock.matchIndices = [];
-    searchStateMock.currentMatchIndex = -1;
-    searchStateMock.currentMatchVirtualIndex = -1;
-    searchStateMock.goToNext.mockReset();
-    searchStateMock.goToPrev.mockReset();
-    searchStateMock.clearSearch.mockReset();
-    headerPropsMock.latest = null;
-    virtualListPropsMock.latest = null;
-    navigationOptionsMock.latest = null;
-    clearHistorySessionOpenTransition();
-  });
-
-  afterEach(() => {
-    if (root) {
-      act(() => {
-        root.unmount();
-      });
-    }
-    container?.remove();
-    stateMocks.activeSession = null;
-    clearHistorySessionOpenTransition();
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-  });
-
-  it('shows a history loading shell for metadata-only sessions instead of the new-session welcome', () => {
-    stateMocks.activeSession = createSession({ historyState: 'metadata-only' } as Partial<Session>);
-
-    act(() => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.textContent).toContain('Loading saved session');
-    expect(container.querySelector('[data-testid="welcome-panel"]')).toBeNull();
-  });
-
-  it('defers viewport anchoring while the host scene is inactive', () => {
-    const turn = createTurn('turn-1', 'One');
-    stateMocks.activeSession = createSession({
-      dialogTurns: [turn],
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-    });
-    stateMocks.virtualItems = [{
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }];
-
-    act(() => {
-      root.render(<ModernFlowChatContainer isViewportActive={false} />);
-    });
-
-    expect(virtualListPropsMock.latest).toMatchObject({ isViewportActive: false });
-    expect(virtualListMock.scrollToTurnEndAndClearPin).not.toHaveBeenCalled();
-
-    act(() => {
-      root.render(<ModernFlowChatContainer isViewportActive />);
-    });
-
-    expect(virtualListPropsMock.latest).toMatchObject({ isViewportActive: true });
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledWith(turn.id);
-  });
-
-  it('keeps the loading shell while historical sessions are hydrating', () => {
-    stateMocks.activeSession = createSession({ historyState: 'hydrating' } as Partial<Session>);
-
-    act(() => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.textContent).toContain('Loading saved session');
-    expect(container.querySelector('[data-testid="welcome-panel"]')).toBeNull();
-  });
-
-  it('renders a host-provided empty state instead of the generic welcome panel', () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'new',
-      dialogTurns: [],
-    } as Partial<Session>);
-
-    act(() => {
-      root.render(
-        <ModernFlowChatContainer
-          emptyState={<div data-testid="miniapp-welcome">MiniApp welcome</div>}
-        />
-      );
-    });
-
-    expect(container.querySelector('[data-testid="miniapp-welcome"]')).not.toBeNull();
-    expect(container.querySelector('[data-testid="welcome-panel"]')).toBeNull();
-  });
-
-  it('reports a stalled history loading layer after the diagnostic threshold', async () => {
-    vi.useFakeTimers();
-    stateMocks.activeSession = createSession({
-      sessionId: 'history-session',
-      historyState: 'metadata-only',
-      dialogTurns: [],
-    } as Partial<Session>);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.textContent).toContain('Loading saved session');
-    expect(historySessionDiagnosticsMock.warnHistorySessionLoadingLayerStalled).not.toHaveBeenCalled();
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(799);
-    });
-
-    expect(historySessionDiagnosticsMock.warnHistorySessionLoadingLayerStalled).not.toHaveBeenCalled();
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1);
-    });
-
-    expect(historySessionDiagnosticsMock.warnHistorySessionLoadingLayerStalled).toHaveBeenCalledWith(
-      'history-session',
-      expect.objectContaining({
-        durationMs: 800,
-        historyState: 'metadata-only',
-        isHistorical: true,
-        isRemote: false,
-        activeSessionIdMatches: true,
-        hasRenderableContent: false,
-        dialogTurnCount: 0,
-      }),
-    );
-  });
-
-  it('does not show the new-session welcome while a restored session is waiting for virtual items', () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [{
-        id: 'turn-1',
-        turnId: 'turn-1',
-        sessionId: 'session-1',
-        timestamp: 1,
-        userMessage: { id: 'user-1', content: 'Saved prompt', timestamp: 1 },
-        modelRounds: [],
-        startTime: 1,
-        status: 'completed',
-      }],
-    } as Partial<Session>);
-
-    act(() => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.textContent).toContain('Loading saved session');
-    expect(container.querySelector('[data-testid="welcome-panel"]')).toBeNull();
-  });
-
-  it('covers the current message list after a historical session open intent', async () => {
-    stateMocks.activeSession = createSession({
-      sessionId: 'current-session',
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [createTurn('turn-1', 'Current visible prompt')],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Current visible prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-
-    act(() => {
-      window.dispatchEvent(new CustomEvent(HISTORY_SESSION_OPEN_INTENT_EVENT, {
-        detail: { sessionId: 'history-session', sessionTitle: 'Saved investigation' },
-      }));
-    });
-
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-open-intent-shield')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-open-intent-spinner')).not.toBeNull();
-    expect(container.textContent).toContain('Hidden action');
-    expect(container.textContent).not.toContain('Saved investigation');
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-open-intent-overlay'))
-      .toBe('true');
-    (container.querySelector('[data-testid="virtual-list-action"]') as HTMLButtonElement | null)?.click();
-    expect(virtualListActionClickMock).not.toHaveBeenCalled();
-
-    stateMocks.activeSession = createSession({
-      sessionId: 'history-session',
-      historyState: 'metadata-only',
-    } as Partial<Session>);
-    stateMocks.virtualItems = [];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-    expect(container.querySelector('[data-testid="welcome-panel"]')).toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-open-intent-shield')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-loading-layer'))
-      .toBe('false');
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-open-intent-overlay'))
-      .toBe('true');
-
-    stateMocks.activeSession = createSession({
-      sessionId: 'history-session',
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [createTurn('turn-2', 'Restored latest prompt')],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Restored latest prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-open-intent-shield')).toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-open-intent-overlay'))
-      .toBe('false');
+describe('ModernFlowChatContainer natural navigation contract', () => {
+  it('restores historical tails through natural end alignment', () => {
+    expect(componentSource).toContain('scrollToTurnEnd(latestTurnId)');
+    expect(componentSource).toContain('prepareTurnNavigation');
   });
 
-  it('removes the loading layer when a hydrating session receives its initial tail turns', async () => {
-    stateMocks.activeSession = createSession({
-      sessionId: 'history-session',
-      historyState: 'hydrating',
-      dialogTurns: [],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    const initialOverlay = container.querySelector('.modern-flowchat-container__history-overlay');
-    expect(initialOverlay).not.toBeNull();
-    expect(container.querySelector('[data-testid="virtual-list"]')).toBeNull();
-
-    stateMocks.activeSession = createSession({
-      sessionId: 'history-session',
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).not.toBe(initialOverlay);
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-transition-overlay'))
-      .toBe('true');
-  });
-
-  it('keeps restored content visible while restored latest text is not ready', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-    expect(container.querySelector('.modern-flowchat-container__messages')?.getAttribute('data-show-history-transition-overlay'))
-      .toBe('true');
-
-    flushAnimationFrame();
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(true);
-    flushAnimationFrame();
-
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-  });
-
-  it('does not show the initial history progress again when full hydration adds older turns', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(true);
-    flushAnimationFrame();
-
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-0', 'Restored older prompt'),
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-0', data: { id: 'user-turn-0', content: 'Restored older prompt' } },
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-  });
-
-  it('blocks pointer activation until restored latest text is visible', async () => {
-    const releaseSpy = vi
-      .spyOn(flowChatStore, 'releaseSessionHistoryCompletionAfterInitialPaint')
-      .mockReturnValue(true);
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    const hiddenAction = container.querySelector('[data-testid="virtual-list-action"]') as HTMLButtonElement;
-    expect(hiddenAction).not.toBeNull();
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-
-    act(() => {
-      hiddenAction.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-    });
-
-    expect(virtualListActionClickMock).not.toHaveBeenCalled();
-
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(true);
-    flushAnimationFrame();
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(container.querySelector('.modern-flowchat-container__history-overlay')).toBeNull();
-    expect(releaseSpy).toHaveBeenCalledWith('session-1');
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_initial_content_painted',
-      expect.objectContaining({
-        sessionId: 'session-1',
-        latestTurnId: 'turn-2',
-        released: true,
-      }),
-    );
-
-    act(() => {
-      hiddenAction.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-    });
-
-    expect(virtualListActionClickMock).toHaveBeenCalledTimes(1);
-    releaseSpy.mockRestore();
-  });
-
-  it('defers background command snapshot until restored latest text is visible and painted', async () => {
-    const releaseSpy = vi
-      .spyOn(flowChatStore, 'releaseSessionHistoryCompletionAfterInitialPaint')
-      .mockReturnValue(true);
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(true);
-    flushAnimationFrame();
-    expect(releaseSpy).not.toHaveBeenCalled();
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    flushAnimationFrame();
-    expect(releaseSpy).not.toHaveBeenCalled();
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    flushAnimationFrame();
-    expect(releaseSpy).toHaveBeenCalledWith('session-1');
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    flushAnimationFrame();
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    flushAnimationFrame();
-    expect(agentApiMock.listBackgroundCommandActivities).toHaveBeenCalledTimes(1);
-    expect(agentApiMock.listBackgroundCommandActivities).toHaveBeenCalledWith({
-      agentSessionId: 'session-1',
-    });
-
-    releaseSpy.mockRestore();
-  });
-
-  it('skips stale background command snapshot when another history session open starts first', async () => {
-    const releaseSpy = vi
-      .spyOn(flowChatStore, 'releaseSessionHistoryCompletionAfterInitialPaint')
-      .mockReturnValue(true);
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(true);
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    act(() => {
-      dispatchHistorySessionOpenIntent('session-2', 'Next saved session');
-    });
-    flushAnimationFrame();
-
-    expect(releaseSpy).toHaveBeenCalledWith('session-1');
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(agentApiMock.listBackgroundCommandActivities).not.toHaveBeenCalled();
-
-    releaseSpy.mockRestore();
-  });
-
-  it('keeps full history projection deferred when latest text visibility signal is missed', async () => {
-    const releaseSpy = vi
-      .spyOn(flowChatStore, 'releaseSessionHistoryCompletionAfterInitialPaint')
-      .mockReturnValue(true);
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    for (let index = 0; index < 30; index += 1) {
-      flushAnimationFrame();
-    }
-
-    expect(container.textContent).not.toContain('Loading saved session');
-    expect(releaseSpy).not.toHaveBeenCalled();
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_initial_content_paint_signal_missed',
-      expect.objectContaining({ attempts: 30 }),
-    );
-
-    releaseSpy.mockRestore();
-  });
-
-  it('requests full history when search starts from a partial session', async () => {
-    const ensureSpy = vi
-      .spyOn(flowChatStore, 'ensureSessionFullHistory')
-      .mockResolvedValue(true);
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.isTurnTextRenderedInViewport.mockReturnValue(false);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    await act(async () => {
-      (headerPropsMock.latest?.onSearchChange as ((query: string) => void) | undefined)?.(
-        'older prompt',
-      );
-      await Promise.resolve();
-    });
-
-    expect(searchStateMock.onSearchChange).toHaveBeenCalledWith('older prompt');
-    expect(ensureSpy).toHaveBeenCalledWith('session-1', 'flowchat-search');
-  });
-
-  it('repositions an unchanged virtual match when the search query changes', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [createTurn('turn-1', 'Searchable prompt')],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Searchable prompt' } },
-    ];
-    searchStateMock.searchQuery = 'search';
-    searchStateMock.matches = [{
-      virtualItemIndex: 0,
-      turnId: 'turn-1',
-      type: 'user-message',
-      occurrenceIndex: 0,
-    }];
-    searchStateMock.currentMatchIndex = 0;
-    searchStateMock.currentMatchVirtualIndex = 0;
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToSearchMatch).toHaveBeenLastCalledWith({
-      virtualItemIndex: 0,
-      query: 'search',
-      flowItemId: undefined,
-      occurrenceIndex: 0,
-      expandableIds: undefined,
-    });
-
-    searchStateMock.searchQuery = 'searchable';
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToSearchMatch).toHaveBeenCalledTimes(2);
-    expect(virtualListMock.scrollToSearchMatch).toHaveBeenLastCalledWith({
-      virtualItemIndex: 0,
-      query: 'searchable',
-      flowItemId: undefined,
-      occurrenceIndex: 0,
-      expandableIds: undefined,
-    });
-  });
-
-  it('keeps the new-session welcome for genuinely new empty sessions', () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'new',
-    } as Partial<Session>);
-
-    act(() => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="welcome-panel"]')).not.toBeNull();
-  });
-
-  it('shows retry for failed history loads', () => {
-    stateMocks.activeSession = createSession({ historyState: 'failed' } as Partial<Session>);
-
-    act(() => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    const retryButton = Array.from(container.querySelectorAll('button'))
-      .find(button => button.textContent?.includes('Retry'));
-    expect(container.textContent).toContain('Session history did not load');
-    expect(retryButton).toBeTruthy();
-
-    act(() => {
-      retryButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(switchChatSessionMock).toHaveBeenCalledWith('session-1');
-  });
-
-  it('shows global turn numbers for partial tail history while navigation stays within loaded turns', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 2,
-      totalTurnCount: 100,
-      dialogTurns: [
-        createTurn('turn-99', 'Recent restored prompt'),
-        createTurn('turn-100', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-99', data: { id: 'user-turn-99', content: 'Recent restored prompt' } },
-      { type: 'user-message', turnId: 'turn-100', data: { id: 'user-turn-100', content: 'Latest restored prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-100',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest restored prompt',
-      visibleTurnIds: ['turn-99', 'turn-100'],
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 100,
-      totalTurns: 100,
-    });
-    const previousTurnRailItem = container.querySelector<HTMLButtonElement>('[data-turn-id="turn-99"]');
-    const currentTurnRailItem = container.querySelector<HTMLButtonElement>('[data-turn-id="turn-100"]');
-    expect(previousTurnRailItem?.dataset.turnIndex).toBe('99');
-    expect(currentTurnRailItem?.dataset.turnIndex).toBe('100');
-    expect(currentTurnRailItem?.getAttribute('aria-current')).toBe('step');
-    expect(previousTurnRailItem?.className).toContain('flowchat-turn-rail__item--visible');
-    expect(currentTurnRailItem?.className).toContain('flowchat-turn-rail__item--visible');
-
-    clickTurnRailItem(container, 'turn-99');
-
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-99', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-
-  });
-
-  it('treats the latest streaming Turn marker as transient immediate navigation', async () => {
-    const streamingTurn = {
-      ...createTurn('turn-2', 'Streaming prompt', 'processing'),
-      modelRounds: [{
-        id: 'round-2',
-        index: 0,
-        items: [{
-          id: 'text-2',
-          type: 'text' as const,
-          content: 'Streaming output',
-          isStreaming: true,
-          timestamp: 1,
-          status: 'streaming' as const,
-        }],
-        isStreaming: true,
-        isComplete: false,
-        status: 'streaming' as const,
-        startTime: 1,
-      }],
-    } as Session['dialogTurns'][number];
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        streamingTurn,
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Streaming prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-1',
-      turnIndex: 1,
-      totalTurns: 2,
-      userMessage: 'Older prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    const restoreTailSpy = vi.spyOn(flowChatStore, 'restoreSessionTailPresentation');
-    const latestEndCallCount = virtualListMock.scrollToLatestEndPosition.mock.calls.length;
-    clickTurnRailItem(container, 'turn-2');
-
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-2', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(restoreTailSpy).not.toHaveBeenCalled();
-    expect(virtualListMock.scrollToLatestEndPosition.mock.calls.length).toBe(latestEndCallCount);
-
-    restoreTailSpy.mockRestore();
-  });
-
-  it('keeps an active history presentation when its latest Turn marker is selected', async () => {
-    const presentationTurns = Array.from(
-      { length: 8 },
-      (_, index) => createTurn(`turn-${index + 3}`, `Prompt ${index + 3}`),
-    );
-    const catalog = {
-      schemaVersion: 1,
-      sessionId: 'session-1',
-      revision: 'catalog-v1',
-      totalTurnCount: 10,
-      complete: true,
-      entries: Array.from({ length: 10 }, (_, ordinal) => ({
-        ordinal,
-        storageTurnIndex: ordinal,
-        turnId: `turn-${ordinal + 1}`,
-        preview: `Prompt ${ordinal + 1}`,
-        previewTruncated: false,
-      })),
-    };
-    const loadSpy = vi.spyOn(flowChatStore, 'loadSessionTurnWindow').mockResolvedValue({
-      status: 'ready',
-      sessionId: 'session-1',
-      targetOrdinal: 4,
-      targetTurnId: 'turn-5',
-      navigationGeneration: 7,
-      isCurrent: true,
-      cacheHit: true,
-      catalog,
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 10,
-        turns: presentationTurns,
-        lastAccessedAt: 1,
-        source: 'target',
-      },
-    });
-    const activateSpy = vi.spyOn(flowChatStore, 'activateSessionHistoryWindow').mockReturnValue({
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 10,
-        targetTurnId: 'turn-5',
-        mode: 'history-window',
-      },
-      turns: presentationTurns,
-    });
-    stateMocks.activeSession = createSession({
-      historyState: 'ready',
-      isPartial: true,
-      totalTurnCount: 10,
-      turnCatalog: catalog,
-      dialogTurns: [
-        createTurn('turn-9', 'Recent prompt'),
-        createTurn('turn-10', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>('[data-turn-id="turn-5"]')?.click();
-      await Promise.resolve();
-    });
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-
-    const restoreTailSpy = vi.spyOn(flowChatStore, 'restoreSessionTailPresentation');
-    const latestEndCallCount = virtualListMock.scrollToLatestEndPosition.mock.calls.length;
-    scrollTurnRailToOrdinal(container, 9);
-    clickTurnRailItem(container, 'turn-10');
-
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-10', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(restoreTailSpy).not.toHaveBeenCalled();
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-    expect(virtualListMock.scrollToLatestEndPosition.mock.calls.length).toBe(latestEndCallCount);
-
-    stateMocks.activeSession = {
-      ...stateMocks.activeSession,
-      dialogTurns: [
-        createTurn('turn-9', 'Recent prompt'),
-        createTurn('turn-10', 'Latest live update', 'processing'),
-      ],
-    };
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    const liveLatestItem = (virtualListPropsMock.latest?.items as Array<{
-      type: string;
-      turnId?: string;
-      data?: { content?: string };
-    }>).find(item => item.type === 'user-message' && item.turnId === 'turn-10');
-    expect(liveLatestItem?.data?.content).toBe('Latest live update');
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-
-    await act(async () => {
-      (virtualListPropsMock.latest?.onRequestJumpToLatest as (() => void) | undefined)?.();
-    });
-    flushAnimationFrame();
-    expect(restoreTailSpy).toHaveBeenCalledOnce();
-    expect(restoreTailSpy).toHaveBeenLastCalledWith('session-1');
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'tail' });
-    expect(virtualListMock.scrollToLatestEndPosition.mock.calls.length).toBe(latestEndCallCount + 1);
-
-    const tailAnchorCallCount = virtualListMock.scrollToTurnEndAndClearPin.mock.calls.length;
-    stateMocks.activeSession = {
-      ...stateMocks.activeSession,
-      totalTurnCount: 11,
-      dialogTurns: [
-        ...stateMocks.activeSession.dialogTurns,
-        createTurn('turn-11', 'New completed prompt'),
-      ],
-    };
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'tail' });
-    expect(virtualListMock.scrollToTurnEndAndClearPin.mock.calls.length).toBe(tailAnchorCallCount + 1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-11');
-
-    const reactivateSpy = vi.spyOn(flowChatStore, 'reactivateSessionHistoryWindow').mockReturnValue({
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 10,
-        targetTurnId: 'turn-5',
-        mode: 'history-window',
-      },
-      turns: presentationTurns,
-    });
-    scrollTurnRailToOrdinal(container, 4);
-    clickTurnRailItem(container, 'turn-5');
-    expect(reactivateSpy).toHaveBeenCalledWith('session-1', {
-      startOrdinal: 2,
-      endOrdinalExclusive: 10,
-      targetTurnId: 'turn-5',
-      mode: 'history-window',
-    });
-    expect(loadSpy).toHaveBeenCalledTimes(1);
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-
-    reactivateSpy.mockRestore();
-    restoreTailSpy.mockRestore();
-    loadSpy.mockRestore();
-    activateSpy.mockRestore();
-  });
-
-  it('retains a complete small history projection when jumping to the latest Turn', async () => {
-    const presentationTurns = Array.from(
-      { length: 10 },
-      (_, index) => createTurn(`turn-${index + 1}`, `Prompt ${index + 1}`),
-    );
-    const catalog = {
-      schemaVersion: 1,
-      sessionId: 'session-1',
-      revision: 'catalog-complete-v1',
-      totalTurnCount: 10,
-      complete: true,
-      entries: Array.from({ length: 10 }, (_, ordinal) => ({
-        ordinal,
-        storageTurnIndex: ordinal,
-        turnId: `turn-${ordinal + 1}`,
-        preview: `Prompt ${ordinal + 1}`,
-        previewTruncated: false,
-      })),
-    };
-    const loadSpy = vi.spyOn(flowChatStore, 'loadSessionTurnWindow').mockResolvedValue({
-      status: 'ready',
-      sessionId: 'session-1',
-      targetOrdinal: 4,
-      targetTurnId: 'turn-5',
-      navigationGeneration: 8,
-      isCurrent: true,
-      cacheHit: true,
-      catalog,
-      range: {
-        startOrdinal: 0,
-        endOrdinalExclusive: 10,
-        turns: presentationTurns,
-        lastAccessedAt: 1,
-        source: 'target',
-      },
-    });
-    const activateSpy = vi.spyOn(flowChatStore, 'activateSessionHistoryWindow').mockReturnValue({
-      range: {
-        startOrdinal: 0,
-        endOrdinalExclusive: 10,
-        targetTurnId: 'turn-5',
-        mode: 'history-window',
-      },
-      turns: presentationTurns,
-    });
-    stateMocks.activeSession = createSession({
-      historyState: 'ready',
-      isPartial: true,
-      totalTurnCount: 10,
-      turnCatalog: catalog,
-      dialogTurns: [
-        createTurn('turn-9', 'Recent prompt'),
-        createTurn('turn-10', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>('[data-turn-id="turn-5"]')?.click();
-      await Promise.resolve();
-    });
-
-    expect(loadSpy).toHaveBeenCalledWith('session-1', 4, { source: 'target' });
-    expect(virtualListPropsMock.latest).toMatchObject({
-      presentationMode: 'history-window',
-      viewportMode: 'history-reading',
-    });
-    expect((virtualListPropsMock.latest?.items as Array<{ turnId: string }>).map(item => item.turnId))
-      .toEqual(presentationTurns.map(turn => turn.id));
-
-    const restoreTailSpy = vi.spyOn(flowChatStore, 'restoreSessionTailPresentation');
-    const initialItems = virtualListPropsMock.latest?.items;
-    await act(async () => {
-      (virtualListPropsMock.latest?.onRequestJumpToLatest as (() => void) | undefined)?.();
-    });
-
-    expect(restoreTailSpy).not.toHaveBeenCalled();
-    expect(virtualListPropsMock.latest).toMatchObject({
-      presentationMode: 'history-window',
-      viewportMode: 'live-tail',
-      historyWindow: null,
-    });
-    expect(virtualListPropsMock.latest?.items).toBe(initialItems);
-
-    stateMocks.activeSession = {
-      ...stateMocks.activeSession,
-      totalTurnCount: 11,
-      dialogTurns: [
-        createTurn('turn-10', 'Latest live update', 'processing'),
-        createTurn('turn-11', 'New live prompt', 'processing'),
-      ],
-    };
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(virtualListPropsMock.latest).toMatchObject({
-      presentationMode: 'history-window',
-      viewportMode: 'live-tail',
-    });
-    expect((virtualListPropsMock.latest?.items as Array<{ turnId: string }>).map(item => item.turnId))
-      .toEqual([...presentationTurns.map(turn => turn.id), 'turn-11']);
-    const liveLatestItem = (virtualListPropsMock.latest?.items as Array<{
-      turnId: string;
-      data?: { content?: string };
-    }>).find(item => item.turnId === 'turn-10');
-    expect(liveLatestItem?.data?.content).toBe('Latest live update');
-
-    restoreTailSpy.mockRestore();
-    loadSpy.mockRestore();
-    activateSpy.mockRestore();
-  });
-
-  it('retries turn-rail selection without advancing visible-turn state until the virtual list accepts it', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        createTurn('turn-2', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-2',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest prompt',
-    };
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('rejected');
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    clickTurnRailItem(container, 'turn-1');
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-1', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('settled');
-    stateMocks.virtualItems = [
-      ...stateMocks.virtualItems,
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-1', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-1',
-      turnIndex: 1,
-      totalTurns: 2,
-      userMessage: 'Older prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 1,
-      totalTurns: 2,
-    });
-  });
-
-  it('delegates accepted turn-rail selections to the list without container-level retry', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        createTurn('turn-2', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-2',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest prompt',
-    };
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('settled');
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    clickTurnRailItem(container, 'turn-1');
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-1', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    const acceptedCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    flushAnimationFrame();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(acceptedCallCount);
-
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-1',
-      turnIndex: 1,
-      totalTurns: 2,
-      userMessage: 'Older prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 1,
-      totalTurns: 2,
-    });
-    const settledCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    flushAnimationFrame();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(settledCallCount);
-  });
-
-  it('accepts list-owned pending turn pins without retrying from the container', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        createTurn('turn-2', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-2',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest prompt',
-    };
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('pending');
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    clickTurnRailItem(container, 'turn-1');
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-1', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    const pendingCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(pendingCallCount);
-  });
-
-  it('does not render stale turn-rail targets', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        createTurn('turn-2', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-2',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    const beforeSelectionCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    expect(container.querySelector('[data-turn-id="turn-missing"]')).toBeNull();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(beforeSelectionCallCount);
-  });
-
-  it('keeps long-session turn-rail selections single-shot after the list accepts the pin', async () => {
-    const turns = Array.from({ length: 25 }, (_, index) => {
-      const turnNumber = index + 1;
-      return createTurn(`turn-${turnNumber}`, `Prompt ${turnNumber}`);
-    });
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: turns,
-    } as Partial<Session>);
-    stateMocks.virtualItems = turns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: { id: `user-${turn.id}`, content: turn.userMessage.content },
-    }));
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-25',
-      turnIndex: 25,
-      totalTurns: 25,
-      userMessage: 'Prompt 25',
-    };
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('settled');
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 25,
-      totalTurns: 25,
-    });
-    expect(container.querySelector('[data-testid="flowchat-turn-rail"]')?.getAttribute(
-      'data-total-turn-count',
-    )).toBe('25');
-    expect(container.querySelectorAll('.flowchat-turn-rail__item').length).toBeLessThan(25);
-
-    scrollTurnRailToOrdinal(container, 6);
-
-    const beforeSelectionCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    clickTurnRailItem(container, 'turn-7');
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(beforeSelectionCallCount + 1);
-    expect(virtualListMock.pinTurnToTopWithStatus).toHaveBeenLastCalledWith('turn-7', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-
-    flushAnimationFrame();
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(beforeSelectionCallCount + 1);
-  });
-
-  it('cancels a not-yet-accepted turn-navigation retry when the user scrolls manually', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older prompt'),
-        createTurn('turn-2', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-2',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest prompt',
-    };
-    virtualListMock.pinTurnToTopWithStatus.mockReturnValue('rejected');
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    clickTurnRailItem(container, 'turn-1');
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    flushAnimationFrame();
-    const retryCallCount = virtualListMock.pinTurnToTopWithStatus.mock.calls.length;
-    expect(retryCallCount).toBeGreaterThan(1);
-
-    await act(async () => {
-      (virtualListPropsMock.latest?.onUserScrollIntent as (() => void) | undefined)?.();
-    });
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 2,
-      totalTurns: 2,
-    });
-
-    flushAnimationFrame();
-    expect(virtualListMock.pinTurnToTopWithStatus.mock.calls.length).toBe(retryCallCount);
-  });
-
-  it('renders ordinal navigation placeholders for old hosts without a turn catalog', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 2,
-      totalTurnCount: 100,
-      dialogTurns: [
-        createTurn('turn-99', 'Recent restored prompt'),
-        createTurn('turn-100', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-99', data: { id: 'user-turn-99', content: 'Recent restored prompt' } },
-      { type: 'user-message', turnId: 'turn-100', data: { id: 'user-turn-100', content: 'Latest restored prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-99',
-      turnIndex: 1,
-      totalTurns: 2,
-      userMessage: 'Recent restored prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(headerPropsMock.latest).toMatchObject({
-      currentTurn: 99,
-      totalTurns: 100,
-    });
-    expect(container.querySelector('[data-testid="flowchat-turn-rail"]')?.getAttribute(
-      'data-total-turn-count',
-    )).toBe('100');
-    expect(container.querySelectorAll('.flowchat-turn-rail__item').length).toBeLessThan(100);
-    expect(container.querySelector('[data-turn-key="storage:0"]')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-98"]')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-99"]')?.getAttribute('aria-disabled')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-100"]')?.getAttribute('aria-disabled')).toBeNull();
-
-    scrollTurnRailToOrdinal(container, 0);
-
-    expect(container.querySelector('[data-turn-key="storage:0"]')?.getAttribute('aria-disabled')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-99"]')).toBeNull();
-    expect(virtualListMock.pinTurnToTopWithStatus).not.toHaveBeenCalled();
-  });
-
-  it('windows catalog markers while resolving loaded tail identities', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 2,
-      totalTurnCount: 100,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-1',
-        revision: 'catalog-1',
-        totalTurnCount: 100,
-        complete: false,
-        entries: Array.from({ length: 100 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          ...(ordinal === 98
-            ? { turnId: 'turn-99', preview: 'Stale catalog preview' }
-            : ordinal === 99
-              ? { turnId: 'turn-100', preview: 'Latest catalog preview' }
-              : {}),
-          previewTruncated: false,
-        })),
-      },
-      dialogTurns: [
-        createTurn('turn-99', 'Recent restored prompt'),
-        createTurn('turn-100', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-99', data: { id: 'user-turn-99', content: 'Recent restored prompt' } },
-      { type: 'user-message', turnId: 'turn-100', data: { id: 'user-turn-100', content: 'Latest restored prompt' } },
-    ];
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-100',
-      turnIndex: 2,
-      totalTurns: 2,
-      userMessage: 'Latest restored prompt',
-      visibleTurnIds: ['turn-99', 'turn-100'],
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="flowchat-turn-rail"]')?.getAttribute(
-      'data-total-turn-count',
-    )).toBe('100');
-    expect(container.querySelectorAll('.flowchat-turn-rail__item').length).toBeLessThan(100);
-    expect(container.querySelector('[data-turn-key="storage:0"]')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-99"]')?.getAttribute('aria-disabled')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-100"]')?.getAttribute('aria-disabled')).toBeNull();
-
-    scrollTurnRailToOrdinal(container, 0);
-
-    expect(container.querySelector('[data-turn-key="storage:0"]')?.getAttribute('aria-disabled')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-100"]')).toBeNull();
-  });
-
-  it('requests the unified full-history fallback for an unloaded catalog target', async () => {
-    const ensureSpy = vi
-      .spyOn(flowChatStore, 'ensureSessionFullHistory')
-      .mockResolvedValue(true);
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 2,
-      totalTurnCount: 100,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-1',
-        revision: 'complete-catalog',
-        totalTurnCount: 100,
-        complete: true,
-        entries: Array.from({ length: 100 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          turnId: `turn-${ordinal + 1}`,
-          preview: `Prompt ${ordinal + 1}`,
-          previewTruncated: false,
-        })),
-      },
-      dialogTurns: [
-        createTurn('turn-99', 'Recent restored prompt'),
-        createTurn('turn-100', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-99', data: { id: 'user-turn-99', content: 'Recent restored prompt' } },
-      { type: 'user-message', turnId: 'turn-100', data: { id: 'user-turn-100', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>('[data-turn-id="turn-1"]')?.click();
-      await Promise.resolve();
-    });
-
-    expect(ensureSpy).toHaveBeenCalledWith('session-1', 'turn-rail-navigation');
-    expect(virtualListMock.pinTurnToTopWithStatus).not.toHaveBeenCalledWith(
-      'turn-1',
-      expect.anything(),
-    );
-  });
-
-  it('materializes a loaded Turn window for cross-feature focus before reusing the shared pin transaction', async () => {
-    const targetTurn = createTurn('turn-5', 'Target prompt');
-    const loadSpy = vi.spyOn(flowChatStore, 'loadSessionTurnWindow').mockResolvedValue({
-      status: 'ready',
-      sessionId: 'session-1',
-      targetOrdinal: 4,
-      targetTurnId: 'turn-5',
-      navigationGeneration: 7,
-      isCurrent: true,
-      cacheHit: false,
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 7,
-        turns: Array.from({ length: 5 }, (_, index) => createTurn(`turn-${index + 3}`, `Prompt ${index + 3}`)),
-        lastAccessedAt: 1,
-        source: 'target',
-      },
-    });
-    const activateSpy = vi.spyOn(flowChatStore, 'activateSessionHistoryWindow').mockReturnValue({
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 7,
-        targetTurnId: targetTurn.id,
-        mode: 'history-window',
-      },
-      turns: Array.from({ length: 5 }, (_, index) => createTurn(`turn-${index + 3}`, `Prompt ${index + 3}`)),
-    });
-    stateMocks.activeSession = createSession({
-      historyState: 'ready',
-      isPartial: true,
-      totalTurnCount: 10,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-1',
-        revision: 'catalog-v1',
-        totalTurnCount: 10,
-        complete: true,
-        entries: Array.from({ length: 10 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          turnId: `turn-${ordinal + 1}`,
-          preview: `Prompt ${ordinal + 1}`,
-          previewTruncated: false,
-        })),
-      },
-      dialogTurns: [
-        createTurn('turn-9', 'Recent prompt'),
-        createTurn('turn-10', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    const target = container.querySelector<HTMLButtonElement>('[data-turn-id="turn-5"]');
-    expect(target).not.toBeNull();
-    await act(async () => {
-      const onNavigateToFocusTurn = navigationOptionsMock.latest?.onNavigateToFocusTurn as (
-        request: {
-          sessionId: string;
-          turnIndex: number;
-          source: 'usage-report';
-        },
-      ) => Promise<boolean>;
-      await expect(onNavigateToFocusTurn({
-        sessionId: 'session-1',
-        turnIndex: 5,
-        source: 'usage-report',
-      })).resolves.toBe(true);
-    });
-
-    expect(loadSpy).toHaveBeenCalledWith('session-1', 4, { source: 'target' });
-    expect(virtualListMock.prepareTurnPinToTop).toHaveBeenCalledWith('turn-5', {
-      behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
-    });
-    expect(activateSpy).toHaveBeenCalledWith('session-1', 4, 7);
-    expect(virtualListPropsMock.latest).toMatchObject({
-      presentationMode: 'history-window',
-      presentationRevision: 1,
-    });
-    expect((virtualListPropsMock.latest?.items as Array<{ turnId: string }>).map(item => item.turnId)).toEqual([
-      'turn-3',
-      'turn-4',
-      'turn-5',
-      'turn-6',
-      'turn-7',
-    ]);
-    expect(stateMocks.activeSession.dialogTurns.map(turn => turn.id)).toEqual(['turn-9', 'turn-10']);
-    expect(virtualListMock.prepareTurnPinToTop.mock.invocationCallOrder[0]).toBeLessThan(
-      activateSpy.mock.invocationCallOrder[0],
-    );
-
-    const latestTailPinCallCount = virtualListMock.pinTurnToTop.mock.calls.length;
-    const latestTailEndCallCount = virtualListMock.scrollToTurnEndAndClearPin.mock.calls.length;
-    stateMocks.activeSession = {
-      ...stateMocks.activeSession,
-      totalTurnCount: 11,
-      dialogTurns: [
-        ...stateMocks.activeSession.dialogTurns,
-        createTurn('turn-11', 'Streaming prompt', 'processing'),
-      ],
-    };
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    flushAnimationFrame();
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-    expect(virtualListMock.pinTurnToTop.mock.calls.length).toBe(latestTailPinCallCount);
-    expect(virtualListMock.scrollToTurnEndAndClearPin.mock.calls.length).toBe(latestTailEndCallCount);
-
-    const restoreTailSpy = vi.spyOn(flowChatStore, 'restoreSessionTailPresentation');
-    const latestEndCallCountBeforeSend = virtualListMock.scrollToLatestEndPosition.mock.calls.length;
-    await act(async () => {
-      const onBeforeTurnPinRequest = navigationOptionsMock.latest?.onBeforeTurnPinRequest as (
-        request: {
-          sessionId: string;
-          turnId: string;
-          source: 'send-message';
-          behavior: 'auto';
-          pinMode: 'sticky-latest';
-        },
-      ) => void;
-      onBeforeTurnPinRequest({
-        sessionId: 'session-1',
-        turnId: 'turn-11',
-        source: 'send-message',
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-      });
-    });
-    expect(restoreTailSpy).toHaveBeenCalledTimes(1);
-    expect(restoreTailSpy).toHaveBeenLastCalledWith('session-1');
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'tail' });
-    expect((virtualListPropsMock.latest?.items as Array<{ turnId: string }>).map(item => item.turnId)).toEqual([
-      'turn-9',
-      'turn-10',
-      'turn-11',
-    ]);
-    expect(virtualListMock.scrollToLatestEndPosition.mock.calls.length).toBe(latestEndCallCountBeforeSend);
-
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>('[data-turn-id="turn-5"]')?.click();
-      await Promise.resolve();
-    });
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'history-window' });
-
-    await act(async () => {
-      (virtualListPropsMock.latest?.onRequestJumpToLatest as (() => void) | undefined)?.();
-    });
-    flushAnimationFrame();
-    expect(restoreTailSpy).toHaveBeenCalledTimes(2);
-    expect(restoreTailSpy).toHaveBeenLastCalledWith('session-1');
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'tail' });
-    expect(virtualListMock.scrollToLatestEndPosition.mock.calls.length).toBe(latestEndCallCountBeforeSend + 1);
-
-    restoreTailSpy.mockRestore();
-    loadSpy.mockRestore();
-    activateSpy.mockRestore();
-  });
-
-  it('materializes an adjacent catalog window when tail history requests older turns', async () => {
-    const catalog = {
-      schemaVersion: 1,
-      sessionId: 'session-1',
-      revision: 'catalog-1',
-      totalTurnCount: 10,
-      complete: true,
-      entries: Array.from({ length: 10 }, (_, ordinal) => ({
-        ordinal,
-        storageTurnIndex: ordinal,
-        turnId: `turn-${ordinal + 1}`,
-        preview: `Prompt ${ordinal + 1}`,
-        previewTruncated: false,
-      })),
-    };
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 2,
-      totalTurnCount: 10,
-      turnCatalog: catalog,
-      dialogTurns: [
-        createTurn('turn-9', 'Recent prompt'),
-        createTurn('turn-10', 'Latest prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = stateMocks.activeSession.dialogTurns.map(turn => ({
-      type: 'user-message',
-      turnId: turn.id,
-      data: turn.userMessage,
-    }));
-    const presentationTurns = Array.from(
-      { length: 8 },
-      (_, index) => createTurn(`turn-${index + 3}`, `Prompt ${index + 3}`),
-    );
-    const cachedTurns = Array.from(
-      { length: 10 },
-      (_, index) => createTurn(`turn-${index + 1}`, `Prompt ${index + 1}`),
-    );
-    vi.spyOn(flowChatStore, 'getState').mockReturnValue({
-      sessions: new Map([['session-1', stateMocks.activeSession]]),
-      activeSessionId: 'session-1',
-    });
-    vi.spyOn(flowChatStore, 'getSessionHistoryViewState').mockReturnValue({
-      catalog,
-      loadedRanges: [{
-        startOrdinal: 0,
-        endOrdinalExclusive: 10,
-        turns: cachedTurns,
-        lastAccessedAt: 1,
-        source: 'prefetch',
-      }],
-      activeRange: null,
-      pendingTargetOrdinal: null,
-      navigationGeneration: 0,
-    });
-    vi.spyOn(flowChatStore, 'getSessionCanonicalTailRange').mockReturnValue({
-      startOrdinal: 8,
-      endOrdinalExclusive: 10,
-    });
-    const loadSpy = vi.spyOn(flowChatStore, 'loadSessionTurnWindow').mockResolvedValue({
-      status: 'ready',
-      sessionId: 'session-1',
-      targetOrdinal: 7,
-      targetTurnId: 'turn-8',
-      navigationGeneration: 0,
-      isCurrent: true,
-      cacheHit: true,
-      catalog,
-    });
-    const activateSpy = vi.spyOn(
-      flowChatStore,
-      'activateSessionHistoryWindowFromTail',
-    ).mockReturnValue({
-      range: {
-        startOrdinal: 2,
-        endOrdinalExclusive: 10,
-        targetTurnId: null,
-        mode: 'history-window',
-      },
-      turns: presentationTurns,
-    });
-    let resolveViewportPreparation: ((ready: boolean) => void) | undefined;
-    const viewportPreparation = new Promise<boolean>(resolve => {
-      resolveViewportPreparation = resolve;
-    });
-    const prepareViewportForPresentationCommit = vi.fn(() => viewportPreparation);
-    const cancelViewportPresentationCommit = vi.fn();
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-    let boundaryIntent: Promise<HistoryWindowBoundaryIntentResult> | undefined;
-    await act(async () => {
-      boundaryIntent = (
-        virtualListPropsMock.latest?.onHistoryWindowBoundaryIntent as
-          | ((
-            direction: 'before' | 'after',
-            options?: {
-              prepareViewportForPresentationCommit?: () => (
-                boolean | void | Promise<boolean | void>
-              );
-              cancelViewportPresentationCommit?: () => void;
-            },
-          ) => Promise<HistoryWindowBoundaryIntentResult>)
-          | undefined
-      )?.('before', {
-        prepareViewportForPresentationCommit,
-        cancelViewportPresentationCommit,
-      });
-      await Promise.resolve();
-    });
-
-    expect(prepareViewportForPresentationCommit).toHaveBeenCalledOnce();
-    expect(cancelViewportPresentationCommit).not.toHaveBeenCalled();
-    expect(activateSpy).not.toHaveBeenCalled();
-    expect(virtualListPropsMock.latest).toMatchObject({ presentationMode: 'tail' });
-
-    await act(async () => {
-      resolveViewportPreparation?.(true);
-      expect(await boundaryIntent).toBe('applied');
-    });
-
-    expect(loadSpy).toHaveBeenCalledWith('session-1', 7, {
-      source: 'prefetch',
-      before: 12,
-      after: 1,
-    });
-    expect(activateSpy).toHaveBeenCalledWith('session-1', 7);
-    expect(virtualListPropsMock.latest).toMatchObject({
-      presentationMode: 'history-window',
-      presentationRevision: 1,
-    });
-  });
-
-  it('lets streaming restored sessions use follow-output instead of container sticky anchoring', async () => {
-    stateMocks.activeSession = createSession({
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt', 'processing'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(container.querySelector('[data-testid="virtual-list"]')).not.toBeNull();
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_latest_anchor_skipped',
-      expect.objectContaining({ reason: 'streaming_follow_output', mode: 'follow-output' }),
-    );
-  });
-
-  it('scrolls completed restored history to the tail after hydration clears isHistorical', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledWith('turn-2');
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_latest_anchor_attempt',
-      expect.objectContaining({ accepted: true, attempt: 1, mode: 'bottom' }),
-    );
-  });
-
-  it('retries completed history tail anchoring when the virtual list is not ready on the first frame', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-2', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-2', data: { id: 'user-turn-2', content: 'Latest restored prompt' } },
-    ];
-    virtualListMock.scrollToTurnEndAndClearPin
-      .mockReturnValueOnce(false)
-      .mockReturnValueOnce(true);
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-2');
-
-    flushAnimationFrame();
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(2);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-2');
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_latest_anchor_attempt',
-      expect.objectContaining({ accepted: false, attempt: 1, mode: 'bottom' }),
-    );
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_latest_anchor_attempt',
-      expect.objectContaining({ accepted: true, attempt: 2, mode: 'bottom' }),
-    );
-  });
-
-  it('does not re-anchor local restored history after full hydration expands the same latest turn', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
-    expect(startupTraceMock.markPhase).toHaveBeenCalledWith(
-      'historical_session_latest_anchor_skipped',
-      expect.objectContaining({ reason: 'local_full_history_projection' }),
-    );
-  });
-
-  it('does not re-anchor local full hydration when the latest restored turn is already visible', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-80',
-      turnIndex: 1,
-      totalTurns: 1,
-      userMessage: 'Latest restored prompt',
-    };
-    virtualListMock.isTurnRenderedInViewport.mockReturnValue(true);
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
-  });
-
-  it('does not repeat immediate latest anchoring after visible turn info catches up', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: true,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-80',
-      turnIndex: 1,
-      totalTurns: 1,
-      userMessage: 'Latest restored prompt',
-    };
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
-  });
-
-  it('does not re-anchor local full hydration when visible turn info is stale after prepending older turns', async () => {
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-
-    stateMocks.visibleTurnInfo = {
-      turnId: 'turn-80',
-      turnIndex: 1,
-      totalTurns: 1,
-      userMessage: 'Latest restored prompt',
-    };
-    virtualListMock.isTurnRenderedInViewport.mockReturnValue(false);
-    stateMocks.activeSession = createSession({
-      isHistorical: false,
-      historyState: 'ready',
-      dialogTurns: [
-        createTurn('turn-1', 'Older restored prompt'),
-        createTurn('turn-44', 'Middle restored prompt'),
-        createTurn('turn-80', 'Latest restored prompt'),
-      ],
-    } as Partial<Session>);
-    stateMocks.virtualItems = [
-      { type: 'user-message', turnId: 'turn-1', data: { id: 'user-turn-1', content: 'Older restored prompt' } },
-      { type: 'user-message', turnId: 'turn-44', data: { id: 'user-turn-44', content: 'Middle restored prompt' } },
-      { type: 'user-message', turnId: 'turn-80', data: { id: 'user-turn-80', content: 'Latest restored prompt' } },
-    ];
-
-    await act(async () => {
-      root.render(<ModernFlowChatContainer />);
-    });
-
-    flushAnimationFrame();
-
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenCalledTimes(1);
-    expect(virtualListMock.scrollToTurnEndAndClearPin).toHaveBeenLastCalledWith('turn-80');
-    expect(virtualListMock.pinTurnToTop).not.toHaveBeenCalled();
+  it('does not recreate sticky latest or pin reservation modes', () => {
+    expect(componentSource).not.toContain('sticky-latest');
+    expect(componentSource).not.toContain('pinTurnToTop');
+    expect(componentSource).not.toContain('prepareTurnPinToTop');
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
index 9944df23b3..4687cdf51c 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
@@ -16,24 +16,13 @@
   display: flex;
   flex-direction: column;
   background: var(--bf-appearance-token-color-bg-scene);
-  position: relative; // Positioning context for floating header.
-  
-  // Header overlays message list for glass effect.
-  > .flowchat-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 20; // Ensure it stays above the message list.
-  }
-  
+  position: relative; // Positioning context for the permission panel and overlays.
+
   &__messages {
-    // Messages fill the container, including header area.
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    // Header and messages stack vertically; messages take the remaining space.
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
     overflow: hidden;
     background: transparent;
   }
@@ -143,7 +132,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 76px;
+  padding-top: 40px;
   pointer-events: auto;
   background: var(--bf-appearance-token-color-bg-scene);
   contain: paint;
@@ -152,10 +141,10 @@
 .modern-flowchat-container__history-open-intent-shield::before {
   content: "";
   position: absolute;
-  top: 116px;
+  top: 80px;
   left: 50%;
   width: min(720px, calc(100% - 48px));
-  height: min(220px, calc(100% - 168px));
+  height: min(220px, calc(100% - 132px));
   min-height: 120px;
   transform: translateX(-50%);
   border-radius: 8px;
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
index 58df5f33e4..be34c18719 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -10,7 +10,7 @@ import { FlowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { useSessionModeStore } from '@/app/stores/sessionModeStore';
 import {
   VirtualMessageList,
-  type FlowChatTurnPinRequestStatus,
+  type FlowChatTurnNavigationStatus,
   type HistoryWindowBoundaryIntentResult,
   type HistoryWindowBoundaryIntentOptions,
   type VirtualMessageListRef,
@@ -51,9 +51,10 @@ import type {
   SessionHistoryPresentation,
 } from '../../types/flow-chat';
 import type { SessionHistoryWindowDirection } from '../../store/FlowChatStore';
-import type {
-  FlowChatFocusItemRequest,
-  FlowChatPinTurnToTopRequest,
+import {
+  FLOWCHAT_MESSAGE_SUBMITTED_EVENT,
+  type FlowChatFocusItemRequest,
+  type FlowChatMessageSubmittedRequest,
 } from '../../events/flowchatNavigation';
 import {
   useBackgroundCommandActivityStore,
@@ -77,7 +78,6 @@ import { resolveThreadGoalHeaderTitle } from '../../utils/threadGoalDisplay';
 import { hasActiveSessionLineageDescendants } from '../../utils/sessionLineage';
 import {
   findDialogTurn,
-  shouldUseStickyLatestPin,
   shouldUseLatestTurnFollowOutput,
 } from '../../utils/flowChatTurnScrollPolicy';
 import { isRemoteTraceContext, startupTrace } from '@/shared/utils/startupTrace';
@@ -92,9 +92,17 @@ import {
   type HistorySessionOpenIntentDetail,
 } from '../../services/sessionOpenIntent';
 import {
+  recordHistoryPagingEvent,
   recordHistorySessionDiagnosticEvent,
+  warnHistoryPagingRefusedWithPendingTurns,
   warnHistorySessionLoadingLayerStalled,
 } from '../../services/historySessionDiagnostics';
+import {
+  resolveHistoryBoundaryTarget,
+  resolveTailWindowGrowth,
+  transcriptReachesLatestTurn,
+  type RenderedTranscriptRange,
+} from './flowChatLiveTailWindow';
 import './ModernFlowChatContainer.scss';
 import { PermissionRequestPanel } from './PermissionRequestPanel';
 import { pendingPermissionToolCallIdsForSession } from './permissionRequestRouting';
@@ -111,7 +119,6 @@ import {
 
 const log = createLogger('ModernFlowChatContainer');
 
-
 interface ModernFlowChatContainerProps {
   className?: string;
   config?: Partial<FlowChatConfig>;
@@ -387,6 +394,44 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
       ? canonicalizedHistoryPresentation
       : null;
   const isRenderingHistoryProjection = Boolean(renderedHistoryPresentation);
+  /**
+   * The range the reader is actually looking at, for the paging ask.
+   *
+   * Deliberately the *rendered* presentation and not `historyPresentationRef`,
+   * which holds the window the store cut. The continuous projection makes those
+   * two differ — see `resolveHistoryBoundaryTarget`.
+   */
+  const renderedHistoryPresentationRef = useRef(renderedHistoryPresentation);
+  renderedHistoryPresentationRef.current = renderedHistoryPresentation;
+  /*
+   * Whether the transcript on screen still reaches the newest Turn.
+   *
+   * Both consumers of `history-reading` — suppressing streaming follow, and the
+   * jump-to-latest affordance — are asking this, not "did the user navigate".
+   * A turn intent used to answer it faithfully because only navigation ever
+   * activated a history window. Automatic tail paging activates one with nobody
+   * navigating: a session whose loaded tail is shorter than the viewport pages
+   * on open, and the viewport sitting on the newest output was then reported as
+   * reading history, which pinned the jump-to-latest bar open and routed it
+   * through a presentation reset that dropped the window and paged it back in.
+   *
+   * The window's own ordinal bookkeeping answers it exactly — these are ledger
+   * numbers, not measurements — and keeps answering it as the session grows: a
+   * Turn arriving past the end of the window flips this back on its own, where
+   * a provenance flag recorded at activation time would stay stale and leave no
+   * way back to the live tail.
+   *
+   * `isReadingTurnViewport` deliberately keeps its old meaning for the auto-tail
+   * placement below, which asks a different question again: who owns the
+   * viewport. Merging those two is the mistake this fixes.
+   */
+  const renderedTranscriptReachesLatestTurn = transcriptReachesLatestTurn({
+    windowEndOrdinalExclusive: renderedHistoryPresentation?.range.endOrdinalExclusive ?? null,
+    knownTurnCount: activeSessionKnownTurnCount,
+  });
+  const isViewportDetachedFromLiveTail = (
+    isReadingTurnViewport && !renderedTranscriptReachesLatestTurn
+  );
   const virtualItems = useMemo(() => {
     if (!activeSession || !renderedHistoryPresentation) {
       return canonicalVirtualItems;
@@ -433,12 +478,12 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   const [stoppingBackgroundCommandIds, setStoppingBackgroundCommandIds] = useState<Set<string>>(() => new Set());
   const [backgroundCommandInputTarget, setBackgroundCommandInputTarget] = useState<FlowChatHeaderCommandSummary | null>(null);
   const [isSendingBackgroundCommandInput, setIsSendingBackgroundCommandInput] = useState(false);
-  const autoPinnedTurnKeyRef = useRef<string | null>(null);
+  const autoTailTurnKeyRef = useRef<string | null>(null);
   const releasedHistoryCompletionKeyRef = useRef<string | null>(null);
   const visibleTurnInfoRef = useRef<VisibleTurnInfo | null>(visibleTurnInfo);
   const turnSummariesRef = useRef<FlowChatTurnSummary[]>([]);
   const turnRailTurnIdsRef = useRef<Set<string>>(new Set());
-  const requestTurnNavigationPinRef = useRef<((turnId: string) => FlowChatTurnPinRequestStatus) | null>(null);
+  const requestTurnNavigationRef = useRef<((turnId: string) => FlowChatTurnNavigationStatus) | null>(null);
   const searchFullHistorySessionIdRef = useRef<string | null>(null);
   const virtualListRef = useRef<VirtualMessageListRef>(null);
   const chatScopeRef = useRef<HTMLDivElement>(null);
@@ -534,18 +579,6 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     setQueuedTurnNavigation(null);
   }, [activeSession?.sessionId, continuousHistoryProjectionEligible, updateViewportIntent]);
 
-  const handleBeforeTurnPinRequest = useCallback((request: FlowChatPinTurnToTopRequest) => {
-    const currentViewportIntent = viewportIntentRef.current;
-    if (
-      request.source === 'send-message'
-      && currentViewportIntent?.sessionId === request.sessionId
-      && currentViewportIntent.kind === 'turn'
-      && currentViewportIntent.source === 'history-range'
-    ) {
-      switchToLiveTailForSession(request.sessionId);
-    }
-  }, [switchToLiveTailForSession]);
-
   useEffect(() => {
     historyPresentationRef.current = historyPresentation;
   }, [historyPresentation]);
@@ -1027,7 +1060,6 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     [activeSession?.dialogTurns, latestTurnId],
   );
   const latestTurnUsesFollowOutput = shouldUseLatestTurnFollowOutput(latestTurn);
-  const latestTurnUsesStickyPin = shouldUseStickyLatestPin(latestTurn);
 
   const navigationVisibleTurnInfo = useMemo<VisibleTurnInfo | null>(() => {
     if (!visibleTurnInfo) {
@@ -1084,19 +1116,17 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     return effectiveVisibleTurnInfo?.userMessage ?? '';
   }, [effectiveVisibleTurnInfo?.turnId, effectiveVisibleTurnInfo?.userMessage, renderedTurns, resolveLocalCommandHeaderTitle]);
 
-  const requestTurnNavigationPin = useCallback((turnId: string): FlowChatTurnPinRequestStatus => {
+  const requestTurnNavigation = useCallback((turnId: string): FlowChatTurnNavigationStatus => {
     if (!isViewportActive) {
       return 'rejected';
     }
-    return virtualListRef.current?.pinTurnToTopWithStatus(turnId, {
+    return virtualListRef.current?.navigateToTurnWithStatus(turnId, {
       behavior: 'auto',
-      pinMode: 'transient',
-      alignmentPolicy: 'best-effort',
     }) ?? 'rejected';
   }, [isViewportActive]);
   useEffect(() => {
-    requestTurnNavigationPinRef.current = requestTurnNavigationPin;
-  }, [requestTurnNavigationPin]);
+    requestTurnNavigationRef.current = requestTurnNavigation;
+  }, [requestTurnNavigation]);
   const handleVirtualListUserScrollIntent = useCallback(() => {
     setQueuedTurnNavigation(null);
   }, []);
@@ -1140,8 +1170,8 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         return;
       }
 
-      const pinStatus = requestTurnNavigationPinRef.current?.(queuedTurnId) ?? 'rejected';
-      if (pinStatus === 'settled' || pinStatus === 'pending') {
+      const navigationStatus = requestTurnNavigationRef.current?.(queuedTurnId) ?? 'rejected';
+      if (navigationStatus === 'settled' || navigationStatus === 'pending') {
         setQueuedTurnNavigation(null);
         return;
       }
@@ -1170,7 +1200,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   ]);
 
   useLayoutEffect(() => {
-    autoPinnedTurnKeyRef.current = null;
+    autoTailTurnKeyRef.current = null;
     releasedHistoryCompletionKeyRef.current = null;
     searchFullHistorySessionIdRef.current = null;
   }, [activeSession?.sessionId]);
@@ -1187,163 +1217,47 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
       ? `${sessionId}:${latestTurnId}:${turnSummaries.length}`
       : null;
     if (
-      !isViewportActive
-      ||
-      !sessionId
-      || isReadingTurnViewport
-      || !latestTurnId
-      || autoPinnedTurnKeyRef.current === latestTurnKey
+      !isViewportActive ||
+      !sessionId ||
+      isReadingTurnViewport ||
+      !latestTurnId ||
+      !latestTurnKey ||
+      autoTailTurnKeyRef.current === latestTurnKey
     ) {
       return;
     }
 
-    const resolvedLatestTurnId = latestTurnId;
-    const resolvedLatestTurnKey = latestTurnKey;
-    const pinMode = latestTurnUsesStickyPin
-      ? 'sticky-latest'
-      : null;
     if (latestTurnUsesFollowOutput) {
-      autoPinnedTurnKeyRef.current = resolvedLatestTurnKey;
-      startupTrace.markPhase('historical_session_latest_anchor_skipped', {
-        sessionId,
-        latestTurnId,
-        reason: 'streaming_follow_output',
-        mode: pinMode ?? 'follow-output',
-        turnCount: turnSummaries.length,
-      });
+      autoTailTurnKeyRef.current = latestTurnKey;
       return;
     }
-    const previousAnchoredLatestTurnKeyPrefix = `${sessionId}:${latestTurnId}:`;
-    const hasPreviouslyAnchoredSameLatestTurn =
-      autoPinnedTurnKeyRef.current?.startsWith(previousAnchoredLatestTurnKeyPrefix) === true;
-    const latestTurnRenderedInViewport = virtualListRef.current?.isTurnRenderedInViewport(latestTurnId) === true;
-    const sameLatestTurnCountChanged =
-      hasPreviouslyAnchoredSameLatestTurn &&
-      autoPinnedTurnKeyRef.current !== resolvedLatestTurnKey;
-    const shouldSkipLocalFullHistoryReanchor =
-      sameLatestTurnCountChanged &&
-      !isRemoteTraceContext(activeSession.remoteConnectionId, activeSession.remoteSshHost);
-    const shouldForceLatestAnchorAfterTurnCountChange =
-      sameLatestTurnCountChanged &&
-      !shouldSkipLocalFullHistoryReanchor;
-    if (shouldSkipLocalFullHistoryReanchor) {
-      autoPinnedTurnKeyRef.current = resolvedLatestTurnKey;
-      startupTrace.markPhase('historical_session_latest_anchor_skipped', {
-        sessionId,
-        latestTurnId,
-        reason: 'local_full_history_projection',
-        mode: pinMode ?? 'bottom',
-        turnCount: turnSummaries.length,
-      });
-      return;
-    }
-    if (
-      !shouldForceLatestAnchorAfterTurnCountChange &&
-      hasPreviouslyAnchoredSameLatestTurn &&
-      visibleTurnInfo?.turnId === latestTurnId &&
-      latestTurnRenderedInViewport
-    ) {
-      autoPinnedTurnKeyRef.current = resolvedLatestTurnKey;
-      startupTrace.markPhase('historical_session_latest_anchor_skipped', {
-        sessionId,
-        latestTurnId,
-        reason: 'latest_turn_already_visible',
-        mode: pinMode ?? 'bottom',
-      });
-      return;
-    }
-    if (
-      hasPreviouslyAnchoredSameLatestTurn &&
-      visibleTurnInfo?.turnId === latestTurnId &&
-      !latestTurnRenderedInViewport
-    ) {
-      startupTrace.markPhase('historical_session_latest_anchor_stale_visible_info', {
-        sessionId,
-        latestTurnId,
-        mode: pinMode ?? 'bottom',
-      });
-    }
 
-    let frameId: number | null = null;
     let cancelled = false;
+    let frameId: number | null = null;
     let attempts = 0;
-
-    const attemptLatestViewportAnchor = () => {
-      if (cancelled) {
-        return;
-      }
-
+    const scrollLatestTurnToNaturalEnd = () => {
+      if (cancelled) return;
       attempts += 1;
-      let accepted = false;
-      const list = virtualListRef.current;
-
-      if (pinMode) {
-        accepted = list?.pinTurnToTop(resolvedLatestTurnId, {
-          behavior: 'auto',
-          pinMode,
-        }) ?? false;
-      } else if (list) {
-        accepted = list.scrollToTurnEndAndClearPin(resolvedLatestTurnId);
-      }
-
-      startupTrace.markPhase('historical_session_latest_anchor_attempt', {
-        sessionId,
-        latestTurnId: resolvedLatestTurnId,
-        accepted,
-        attempt: attempts,
-        mode: pinMode ?? 'bottom',
-      });
-
-      if (accepted) {
-        autoPinnedTurnKeyRef.current = resolvedLatestTurnKey;
+      if (virtualListRef.current?.scrollToTurnEnd(latestTurnId)) {
+        autoTailTurnKeyRef.current = latestTurnKey;
         return;
       }
-
-      if (attempts >= LATEST_TURN_AUTO_PIN_MAX_ATTEMPTS) {
-        startupTrace.markPhase('historical_session_latest_anchor_failed', {
-          sessionId,
-          latestTurnId: resolvedLatestTurnId,
-          attempts,
-          mode: pinMode ?? 'bottom',
-        });
-        return;
+      if (attempts < LATEST_TURN_AUTO_PIN_MAX_ATTEMPTS) {
+        frameId = requestAnimationFrame(scrollLatestTurnToNaturalEnd);
       }
-
-      frameId = requestAnimationFrame(attemptLatestViewportAnchor);
     };
-
-    const shouldAttemptLatestAnchorImmediately =
-      shouldForceLatestAnchorAfterTurnCountChange ||
-      activeSession?.isHistorical === true ||
-      activeSession?.contextRestoreState === 'pending' ||
-      hasPendingHistoryCompletion;
-
-    if (shouldAttemptLatestAnchorImmediately) {
-      attemptLatestViewportAnchor();
-    } else {
-      frameId = requestAnimationFrame(attemptLatestViewportAnchor);
-    }
-
+    frameId = requestAnimationFrame(scrollLatestTurnToNaturalEnd);
     return () => {
       cancelled = true;
-      if (frameId !== null) {
-        cancelAnimationFrame(frameId);
-      }
+      if (frameId !== null) cancelAnimationFrame(frameId);
     };
   }, [
     activeSession?.sessionId,
-    activeSession?.isHistorical,
-    activeSession?.contextRestoreState,
-    activeSession?.remoteConnectionId,
-    activeSession?.remoteSshHost,
-    hasPendingHistoryCompletion,
-    isViewportActive,
     isReadingTurnViewport,
+    isViewportActive,
     latestTurnId,
     latestTurnUsesFollowOutput,
-    latestTurnUsesStickyPin,
     turnSummaries.length,
-    visibleTurnInfo?.turnId,
   ]);
 
   useEffect(() => {
@@ -1527,10 +1441,108 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     return true;
   }, [activeSession?.sessionId, switchToLiveTailForSession]);
 
+  /*
+   * Keep a tail-anchored history window anchored as the session grows.
+   *
+   * A window paged in from the tail stops at the newest Turn that existed when
+   * it was cut. The session then appends a Turn and nothing moves the window's
+   * end, so the transcript on screen silently stops at the previous Turn: the
+   * message the user just sent is not rendered at all, and because
+   * `latestTurnId` is read off the rendered items, follow-output never even
+   * learns a new Turn exists — no pin, no follow, and no way to scroll to it.
+   *
+   * `resolveTailWindowGrowth` carries the reasoning and the reason it is not
+   * edge-triggered; this effect is only the plumbing.
+   */
+  const tailAnchoredWindowEndRef = useRef<number | null>(null);
+  useEffect(() => {
+    const sessionId = activeSession?.sessionId;
+    const windowEndOrdinalExclusive = sessionId
+      ? renderedHistoryPresentation?.range.endOrdinalExclusive ?? null
+      : null;
+    const growth = resolveTailWindowGrowth({
+      windowEndOrdinalExclusive,
+      knownTurnCount: activeSessionKnownTurnCount,
+      tailAnchoredWindowEnd: tailAnchoredWindowEndRef.current,
+    });
+
+    if (growth === 'release') {
+      tailAnchoredWindowEndRef.current = null;
+      return;
+    }
+    if (growth === 'anchor') {
+      tailAnchoredWindowEndRef.current = windowEndOrdinalExclusive;
+      return;
+    }
+    if (growth === 'none' || !sessionId || windowEndOrdinalExclusive === null) {
+      return;
+    }
+
+    const extended = flowChatStore.extendSessionHistoryWindow(sessionId, 'after');
+    // Requiring real growth keeps a store that declines to extend from being
+    // re-applied under an ever-rising revision forever.
+    if (extended && extended.range.endOrdinalExclusive > windowEndOrdinalExclusive) {
+      tailAnchoredWindowEndRef.current = extended.range.endOrdinalExclusive;
+      applyHistoryPresentation(sessionId, extended, { completedBoundary: 'after' });
+      return;
+    }
+
+    // The newest Turn is not inside the loaded range this window was cut from.
+    // Dropping back to the canonical tail costs a visible re-page of the
+    // history above, which is why it is the fallback and not the rule — but it
+    // is the only branch that always shows the message the user just sent.
+    restoreTailPresentation();
+  }, [
+    activeSession?.sessionId,
+    activeSessionKnownTurnCount,
+    applyHistoryPresentation,
+    renderedHistoryPresentation,
+    restoreTailPresentation,
+  ]);
+
   const jumpToLiveTail = useCallback(() => {
     return restoreTailPresentation({ followLatest: true });
   }, [restoreTailPresentation]);
 
+  /*
+   * A message sent from the composer gives up whatever history window is on
+   * screen.
+   *
+   * `resolveTailWindowGrowth` deliberately leaves a navigated window alone as
+   * the session grows, because a Turn arriving from elsewhere is no reason to
+   * take a reader out of the history they are in. A Turn they submitted
+   * themselves is, and nothing in the ledger tells the two apart — measured, a
+   * message sent while parked on the first Turn left the transcript on a
+   * 24-item window it was never in, with follow-output holding an answer it
+   * had nothing to align.
+   *
+   * Deliberately not `followLatest`. Restoring the tail is enough: the Turn
+   * comes into the transcript, and follow-output pins it to the viewport top
+   * the way it pins any newly submitted Turn.
+   */
+  useEffect(() => {
+    const handleMessageSubmitted = (event: Event) => {
+      const { sessionId } = (event as CustomEvent<FlowChatMessageSubmittedRequest>).detail ?? {};
+      const reaches = transcriptReachesLatestTurn({
+        windowEndOrdinalExclusive: renderedHistoryPresentation?.range.endOrdinalExclusive ?? null,
+        knownTurnCount: activeSessionKnownTurnCount,
+      });
+      if (!sessionId || sessionId !== activeSessionIdRef.current) return;
+      if (reaches) {
+        return;
+      }
+      restoreTailPresentation();
+    };
+    window.addEventListener(FLOWCHAT_MESSAGE_SUBMITTED_EVENT, handleMessageSubmitted);
+    return () => {
+      window.removeEventListener(FLOWCHAT_MESSAGE_SUBMITTED_EVENT, handleMessageSubmitted);
+    };
+  }, [
+    activeSessionKnownTurnCount,
+    renderedHistoryPresentation,
+    restoreTailPresentation,
+  ]);
+
   const handleSearchChange = useCallback((query: string) => {
     setSearchQuery(query);
     const sessionId = activeSession?.sessionId;
@@ -1573,8 +1585,8 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         turnId: renderedTargetId,
         source: isRenderingHistoryProjection ? 'history-range' : 'canonical-tail',
       });
-      const pinStatus = requestTurnNavigationPin(renderedTargetId);
-      if (pinStatus === 'settled' || pinStatus === 'pending') {
+      const navigationStatus = requestTurnNavigation(renderedTargetId);
+      if (navigationStatus === 'settled' || navigationStatus === 'pending') {
         setQueuedTurnNavigation(null);
         return true;
       }
@@ -1606,12 +1618,10 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         recentHistoryPresentation.range,
       );
       if (reactivatedPresentation) {
-        const preparedPin = virtualListRef.current?.prepareTurnPinToTop(recentHistoryTurn.id, {
+        const preparedNavigation = virtualListRef.current?.prepareTurnNavigation(recentHistoryTurn.id, {
           behavior: 'auto',
-          pinMode: 'transient',
-          alignmentPolicy: 'best-effort',
         }) ?? 'rejected';
-        if (preparedPin !== 'rejected') {
+        if (preparedNavigation !== 'rejected') {
           applyHistoryPresentation(sessionId, reactivatedPresentation, {
             viewportTarget: {
               ordinal: targetItem.ordinal,
@@ -1647,12 +1657,10 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         return false;
       }
 
-      const preparedPin = virtualListRef.current?.prepareTurnPinToTop(targetTurnId, {
+      const preparedNavigation = virtualListRef.current?.prepareTurnNavigation(targetTurnId, {
         behavior: 'auto',
-        pinMode: 'transient',
-        alignmentPolicy: 'best-effort',
       }) ?? 'rejected';
-      if (preparedPin === 'rejected') {
+      if (preparedNavigation === 'rejected') {
         return false;
       }
       const presentation = flowChatStore.activateSessionHistoryWindow(
@@ -1702,7 +1710,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     applyHistoryPresentation,
     isRenderingHistoryProjection,
     renderedTurnSummaries,
-    requestTurnNavigationPin,
+    requestTurnNavigation,
     restoreTailPresentation,
     turnRailItems,
     updateViewportIntent,
@@ -1774,7 +1782,6 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     virtualItems,
     virtualListRef,
     onExpandExploreGroup: handleExpandGroup,
-    onBeforeTurnPinRequest: handleBeforeTurnPinRequest,
     onNavigateToFocusTurn: handleNavigateToFocusTurn,
   });
 
@@ -1815,28 +1822,105 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         historyView?.catalog?.totalTurnCount ?? 0,
         session?.totalTurnCount ?? 0,
       );
-      let targetOrdinal: number;
-      if (presentation) {
-        targetOrdinal = direction === 'before'
-          ? presentation.range.startOrdinal - 1
-          : presentation.range.endOrdinalExclusive;
-      } else {
+      const loadedTurnCount = session?.dialogTurns.length ?? 0;
+      recordHistoryPagingEvent(sessionId, 'requested', {
+        direction,
+        hasPresentation: presentation !== null,
+        isPartial: session?.isPartial,
+        historyState: session?.historyState,
+        turnCatalogMatches: session?.turnCatalog?.sessionId === sessionId,
+        catalogTotalTurnCount: historyView?.catalog?.totalTurnCount ?? null,
+        sessionTotalTurnCount: session?.totalTurnCount ?? null,
+        resolvedTotalTurnCount: totalTurnCount,
+        loadedTurnCount,
+        loadedRangeCount: historyView?.loadedRanges.length ?? null,
+      });
+
+      /*
+       * The range the ask is derived from is the one on screen, which is the
+       * continuous projection when that is what is rendered. `presentation`
+       * stays the store's window, because the extension below operates on it.
+       */
+      let renderedRange: RenderedTranscriptRange | null =
+        renderedHistoryPresentationRef.current?.sessionId === sessionId
+          ? renderedHistoryPresentationRef.current.range
+          : null;
+      if (!presentation) {
         if (
           direction !== 'before'
           || session?.isPartial !== true
           || session.turnCatalog?.sessionId !== sessionId
         ) {
+          recordHistoryPagingEvent(sessionId, 'outcome_cancelled', {
+            direction,
+            reason: 'precondition',
+            isPartial: session?.isPartial,
+            turnCatalogMatches: session?.turnCatalog?.sessionId === sessionId,
+          });
           return 'cancelled';
         }
         const canonicalTailRange = flowChatStore.getSessionCanonicalTailRange(sessionId);
         if (!canonicalTailRange) {
+          recordHistoryPagingEvent(sessionId, 'outcome_not_ready', {
+            direction,
+            reason: 'no-canonical-tail-range',
+          });
           return 'not-ready';
         }
-        targetOrdinal = canonicalTailRange.startOrdinal - 1;
+        // No window, so the transcript on screen is the canonical tail: it
+        // starts where that range does and runs to the newest Turn.
+        renderedRange = {
+          startOrdinal: canonicalTailRange.startOrdinal,
+          endOrdinalExclusive: totalTurnCount,
+        };
+        recordHistoryPagingEvent(sessionId, 'target_resolved', {
+          direction,
+          canonicalTailStartOrdinal: canonicalTailRange.startOrdinal,
+          targetOrdinal: canonicalTailRange.startOrdinal - 1,
+        });
+      }
+      if (!renderedRange) {
+        recordHistoryPagingEvent(sessionId, 'outcome_not_ready', {
+          direction,
+          reason: 'no-rendered-range',
+        });
+        return 'not-ready';
       }
-      if (targetOrdinal < 0 || targetOrdinal >= totalTurnCount) {
+      const target = resolveHistoryBoundaryTarget({
+        direction,
+        renderedRange,
+        knownTurnCount: totalTurnCount,
+      });
+      if (target.status === 'exhausted') {
+        recordHistoryPagingEvent(sessionId, 'outcome_exhausted', {
+          direction,
+          reason: target.reason,
+          renderedStartOrdinal: renderedRange.startOrdinal,
+          renderedEndOrdinalExclusive: renderedRange.endOrdinalExclusive,
+          windowEndOrdinalExclusive: presentation?.range.endOrdinalExclusive ?? null,
+          totalTurnCount,
+        });
+        /*
+         * `exhausted` latches the direction off until the window moves, so
+         * reaching it on an unknown or contradictory total is how history goes
+         * silently missing rather than merely late.
+         *
+         * `reached-latest` is not that. It is what the bottom edge of a live
+         * transcript answers every time the reader arrives at it.
+         */
+        if (target.reason === 'beyond-known-total') {
+          warnHistoryPagingRefusedWithPendingTurns(sessionId, {
+            direction,
+            reason: totalTurnCount <= 0 ? 'exhausted-on-unknown-total' : 'exhausted-beyond-total',
+            isPartial: session?.isPartial,
+            loadedTurnCount,
+            totalTurnCount,
+            targetOrdinal: renderedRange.startOrdinal - 1,
+          });
+        }
         return 'exhausted';
       }
+      const targetOrdinal = target.targetOrdinal;
 
       setHistoryBoundaryState(previous => ({ ...previous, [direction]: 'loading' }));
       let viewportPreparationStarted = false;
@@ -1847,6 +1931,22 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
           after: direction === 'after' ? 12 : 1,
         });
         if (!result.isCurrent || activeSessionIdRef.current !== sessionId) {
+          recordHistoryPagingEvent(sessionId, 'outcome_cancelled', {
+            direction,
+            reason: 'superseded',
+            targetOrdinal,
+            resultIsCurrent: result.isCurrent,
+            activeSessionIsCurrent: activeSessionIdRef.current === sessionId,
+          });
+          /*
+           * The status is ours to clear even though the load was not ours to
+           * finish. Left as it was, this returns silently with the boundary
+           * still reading `loading`, and the reader is shown history being
+           * prepared by nobody for the rest of the session.
+           */
+          if (activeSessionIdRef.current === sessionId) {
+            setHistoryBoundaryState(previous => ({ ...previous, [direction]: 'idle' }));
+          }
           return 'cancelled';
         }
         if (result.status !== 'ready') {
@@ -1856,10 +1956,27 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
               'sequential-history-navigation',
             );
             if (historyReady && activeSessionIdRef.current === sessionId) {
+              recordHistoryPagingEvent(sessionId, 'outcome_applied', {
+                direction,
+                targetOrdinal,
+                reason: 'full-history-hydrated',
+              });
               setHistoryBoundaryState(previous => ({ ...previous, [direction]: 'idle' }));
               return 'applied';
             }
           }
+          /*
+           * A refusal the reader is shown. It was silent here, and a status the
+           * boundary keeps forever deserves a line saying which load produced
+           * it: 266 asks in one session all landed on `not-found` and left the
+           * status standing, with nothing in the trail between the ask and the
+           * complaint.
+           */
+          recordHistoryPagingEvent(sessionId, 'outcome_not_ready', {
+            direction,
+            reason: `load-${result.status}`,
+            targetOrdinal,
+          });
           setHistoryBoundaryState(previous => ({ ...previous, [direction]: 'error' }));
           return 'not-ready';
         }
@@ -1875,6 +1992,26 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
           || !activeSessionIsCurrent
           || !presentationOwnerIsCurrent
         ) {
+          recordHistoryPagingEvent(sessionId, 'outcome_cancelled', {
+            direction,
+            reason: 'viewport-preparation',
+            preparationResult: preparationResult ?? null,
+            activeSessionIsCurrent,
+            presentationOwnerIsCurrent,
+          });
+          if (preparationResult === false && activeSessionIsCurrent) {
+            // The window was fetched and then thrown away: the Turns exist but
+            // never reach the transcript, and the boundary status goes back to
+            // idle exactly as if there were none.
+            warnHistoryPagingRefusedWithPendingTurns(sessionId, {
+              direction,
+              reason: 'viewport-preparation-declined',
+              isPartial: session?.isPartial,
+              loadedTurnCount,
+              totalTurnCount,
+              targetOrdinal,
+            });
+          }
           if (viewportPreparationStarted) {
             options?.cancelViewportPresentationCommit?.();
           }
@@ -1891,6 +2028,11 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
           if (viewportPreparationStarted) {
             options?.cancelViewportPresentationCommit?.();
           }
+          recordHistoryPagingEvent(sessionId, 'outcome_not_ready', {
+            direction,
+            reason: 'no-next-presentation',
+            targetOrdinal,
+          });
           setHistoryBoundaryState(previous => ({ ...previous, [direction]: 'error' }));
           return 'not-ready';
         }
@@ -1905,6 +2047,12 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
             },
           } : {}),
         });
+        recordHistoryPagingEvent(sessionId, 'outcome_applied', {
+          direction,
+          targetOrdinal,
+          startOrdinal: nextPresentation.range.startOrdinal,
+          endOrdinalExclusive: nextPresentation.range.endOrdinalExclusive,
+        });
         return 'applied';
       } catch (error) {
         if (viewportPreparationStarted) {
@@ -2376,7 +2524,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
                   items={virtualItems}
                   isViewportActive={isViewportActive}
                   presentationMode={isRenderingHistoryProjection ? 'history-window' : 'tail'}
-                  viewportMode={isReadingTurnViewport ? 'history-reading' : 'live-tail'}
+                  viewportMode={isViewportDetachedFromLiveTail ? 'history-reading' : 'live-tail'}
                   historyWindow={isShowingHistoryPresentation ? activeHistoryPresentation?.range ?? null : null}
                   presentationRevision={isShowingHistoryPresentation ? activeHistoryPresentation?.revision ?? 0 : 0}
                   historyBoundaryState={historyBoundaryState}
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
index d8b1a0a21c..e585de21d7 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
@@ -12,6 +12,10 @@ import { flowChatManager } from '../../services/FlowChatManager';
 import { useFlowChatContext } from './FlowChatContext';
 import { useActiveSession } from '../../store/modernFlowChatStore';
 import { flowChatStore } from '../../store/FlowChatStore';
+import {
+  FLOWCHAT_TURNS_ROLLED_BACK_EVENT,
+  type FlowChatTurnsRolledBackRequest,
+} from '../../events/flowchatNavigation';
 import { useMessageEditStore } from '../../store/messageEditStore';
 import { snapshotAPI } from '@/infrastructure/api';
 import { useI18n } from '@/infrastructure/i18n';
@@ -298,6 +302,24 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
         // 1) Truncate local dialog turns from this index.
         flowChatStore.truncateDialogTurnsFrom(resolvedSessionId, hydratedTurnIndex);
 
+        /*
+         * 1b) Tell the transcript the ledger got shorter, so it can settle on
+         *     the new tail rather than leave the viewport on a Turn that no
+         *     longer exists. Nothing in `dialogTurns` distinguishes this from a
+         *     window re-cut, which is why it is announced — the same reason a
+         *     submission announces itself.
+         *
+         *     On the next frame, because the answer is a scroll to the end of
+         *     real content and that has to be read from a DOM the truncation
+         *     has already been committed to.
+         */
+        requestAnimationFrame(() => {
+          window.dispatchEvent(new CustomEvent<FlowChatTurnsRolledBackRequest>(
+            FLOWCHAT_TURNS_ROLLED_BACK_EVENT,
+            { detail: { sessionId: resolvedSessionId, fromTurnIndex: hydratedTurnIndex } },
+          ));
+        });
+
         // 2) Refresh file tree and open editors.
         const { globalEventBus } = await import('@/infrastructure/event-bus');
         globalEventBus.emit('file-tree:refresh');
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
index daa9aa97f6..560680ee97 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
@@ -20,6 +20,25 @@
     max-width: 100%;
   }
 
+  /*
+   * No mount animation survives inside a virtualized row.
+   *
+   * `.markdown-renderer` carries `animation: fadeIn 0.35s` from the shared
+   * component library, where a block is mounted once and a fade reads as the
+   * content arriving. Here a row mounts every time it enters the rendered
+   * window: the four Turns a history page brings, the rows the junction's own
+   * correction scrolls into view, and every row the reader scrolls back over
+   * afterwards. Each one fades from transparent, so a page up reads as the
+   * transcript dimming and coming back — the same reason `ModelRoundItem.scss`
+   * and the typewriter's `replayOnMount` refuse a mount animation of their own.
+   *
+   * Scoped to the wrapper rather than removed from the library: outside the
+   * list — docs, previews, panels — a markdown block really is mounted once.
+   */
+  .markdown-renderer {
+    animation: none;
+  }
+
   &--search-match {
     outline: 1px solid color-mix(in srgb, var(--bf-appearance-token-color-accent-500) 35%, transparent);
     outline-offset: -1px;
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
index 00497c479c..e5c9e1dbc3 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
@@ -18,10 +18,17 @@ import './VirtualItemRenderer.scss';
 interface VirtualItemRendererProps {
   item: VirtualItem;
   index: number;
+  /**
+   * Ref callback the virtualizer measures this item through.
+   *
+   * It reads `data-virtual-index` back off the element, so the attribute below
+   * and this callback have to land on the same node.
+   */
+  measureRef?: (element: HTMLElement | null) => void;
 }
 
 export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
-  ({ item, index }) => {
+  ({ item, index, measureRef }) => {
     const { searchMatchIndices, searchCurrentMatchVirtualIndex } = useFlowChatVolatileContext();
     const isSearchMatch = searchMatchIndices != null && searchMatchIndices.size > 0
       ? searchMatchIndices.has(index)
@@ -109,6 +116,7 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
 
     return (
       <div
+        ref={measureRef}
         data-bf-component="virtual-item"
         data-bf-part="root"
         data-bf-state={[isSearchMatch && 'searchMatch', isSearchCurrent && 'searchCurrent'].filter(Boolean).join(' ')}
@@ -125,7 +133,8 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
   },
   (prev, next) => (
     prev.item === next.item &&
-    prev.index === next.index
+    prev.index === next.index &&
+    prev.measureRef === next.measureRef
   )
 );
 VirtualItemRenderer.displayName = 'VirtualItemRenderer';
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
index 373b2be22f..3f9c6395d8 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
@@ -29,26 +29,42 @@
   }
   
   
-  // Ensure the Virtuoso container has correct sizing.
-  > div:first-child {
+  /*
+   * The scroller. It spans the full panel width even though message content
+   * inside it is max-width constrained, and `overflow-anchor: none` keeps the
+   * browser from adding a second opinion about where the viewport belongs —
+   * the viewport anchor is the only one.
+   */
+  &__scroller {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1; // Keep scroll content below overlays.
-    overflow-x: hidden; // Disable horizontal scrolling.
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-anchor: none;
+    scrollbar-gutter: stable;
   }
 
-  // Ensure the real scroller always spans the full panel width,
-  // even when inner message content is max-width constrained.
-  [data-virtuoso-scroller='true'],
-  [data-virtuoso-scroller] {
-    width: 100% !important;
-    max-width: none !important;
-    margin: 0 !important;
+  /*
+   * The rendered window. Everything outside it stands in as padding, so this
+   * element's height is the whole transcript's and it is what the resize
+   * observer watches for a content change.
+   */
+  &__items {
+    width: 100%;
     overflow-anchor: none;
-    scrollbar-gutter: stable;
   }
   
+  /*
+   * The opening viewport settles over several frames as items measure and
+   * history pages in. Keep it laid out and measurable but unpainted until then;
+   * see the opening-reveal effect in VirtualMessageList.tsx.
+   */
+  &[data-open-viewport-settled='false'] {
+    visibility: hidden;
+  }
+
   &--empty {
     display: flex;
     align-items: center;
@@ -62,11 +78,16 @@
     padding: 2rem;
   }
   
-  // Reserve space for the floating FlowChatHeader.
-  // Header height (36px) + border (1px) + blur area (16px) + extra gap (4px) = 57px.
+  // FlowChatHeader sits above the list in normal flow, so only a small
+  // breathing gap is needed before the first item. Its height is supplied
+  // inline from `FLOWCHAT_TURN_TOP_GAP_PX`, which every top-aligned Turn also
+  // scrolls to — the gap must be one number, not two that happen to match.
+  .message-list-header-block {
+    flex-shrink: 0;
+    overflow-anchor: none;
+  }
+
   .message-list-header {
-    height: 57px;
-    min-height: 57px;
     flex-shrink: 0;
   }
 
@@ -112,42 +133,20 @@
   }
   
   .message-list-footer {
-    /* Inline height from VirtualMessageList (measured drop-zone + bottom inset + tail clearance). */
-    height: 120px;
-    min-height: 72px;
+    /* Current input-stack inset is supplied inline by VirtualMessageList. */
     overflow-anchor: none;
   }
 
-  &__projection-handoff-items {
+  /*
+   * Resident tail reservation (~1 viewport, supplied inline). It exists so the
+   * browser cannot clamp scrollTop when content shrinks; see
+   * `flowChatTailFollow.ts`. Height must stay a function of the viewport only.
+   */
+  .message-list-tail-spacer {
     width: 100%;
-  }
-
-  &__projection-handoff-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    overflow: hidden;
-    scrollbar-gutter: stable;
+    flex-shrink: 0;
     pointer-events: none;
-    background: var(--bf-appearance-token-color-bg-scene);
-    contain: paint;
-  }
-
-  &__projection-handoff-content {
-    width: 100%;
-    will-change: transform;
-
-    &--bottom {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      transform: none;
-    }
+    overflow-anchor: none;
   }
 
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
index 8c292f2968..d1c73a2054 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
@@ -1,444 +1,247 @@
 // @vitest-environment jsdom
 
-import React from 'react';
-import { act } from 'react';
+import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-  VirtualMessageList,
-  type VirtualMessageListRef,
-} from './VirtualMessageList';
-import { getLeadingVirtualItemIndexDelta } from './virtualMessageListLayout';
-import { FlowChatViewportCoordinator } from './FlowChatViewportCoordinator';
-import {
-  clampPinReservationPxToViewport,
-  consumeBottomReservationForContentGrowth,
-  ensureCollapseReservationForScrollTop,
-  getCanceledUnsettledStickyPinGrowthPx,
-  isTurnPinRequestIdentityCurrent,
-  protectCurrentCollapseReservation,
-  reconcileUnsignaledShrinkReservation,
-  releasePinReservationForUserNavigation,
-  resolveAutoCollapseAnchorScrollTop,
-  resolveCollapseIntentSettlementStrategy,
-  resolveFollowingTailShrinkClampRecovery,
-  resolveProvisionalStickyPinReservationPx,
-  resolveStickyPinGrowthSettlementStrategy,
-  settleRetainedCollapseReservationForAnchor,
-  settleCollapseReservationForViewport,
-  shouldBypassShrinkCompensationInTailFollow,
-  shouldClearExpiredProvisionalStickyPin,
-  shouldSyncPhysicalBottom,
-  shouldSuppressFollowingTailNegativeScrollBy,
-  transferCollapseReservationToPin,
-  transferPinReservationToProtectedCollapse,
-} from './flowChatScrollStability';
-import { activeSessionHistoryProjectionHandoff } from './historyProjectionHandoff';
-import type { Session } from '../../types/flow-chat';
-import type { VirtualItem } from '../../store/modernFlowChatStore';
+import { tailSpacerPxForViewport } from './flowChatTailFollow';
+import { ONE_SHOT_NAVIGATION_HOLD_MS } from './flowChatViewportOwnership';
+import { VirtualMessageList, type VirtualMessageListRef } from './VirtualMessageList';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-const stateMocks = vi.hoisted(() => ({
-  activeSession: null as Session | null,
-  virtualItems: [] as VirtualItem[],
-  visibleTurnInfo: null as unknown,
+const mocks = vi.hoisted(() => ({
+  items: [] as Array<Record<string, unknown>>,
+  activeSession: null as Record<string, unknown> | null,
+  scrollItemIntoView: vi.fn(),
+  scrollToOffset: vi.fn(),
+  cancelAim: vi.fn(),
   setVisibleTurnInfo: vi.fn(),
-}));
-const virtuosoMocks = vi.hoisted(() => ({
-  renderedRange: null as { start: number; end: number } | null,
-  scrollerScrollTo: vi.fn(),
-  scrollToIndex: vi.fn(),
-  initialTopMostItemIndex: null as unknown,
-  initialTopMostItemIndexHistory: [] as unknown[],
-  increaseViewportBy: null as unknown,
-  rangeChanged: null as (() => void) | null,
-}));
-const flowStoreMocks = vi.hoisted(() => ({
-  hasPendingSessionHistoryCompletion: vi.fn(() => false),
-  hasDeferredSessionHistoryProjection: vi.fn(() => false),
-  revealPreviousSessionHistoryWindow: vi.fn(() => false),
-  releaseSessionHistoryCompletionAfterInitialPaint: vi.fn(() => false),
-}));
-const inputStateMocks = vi.hoisted(() => ({
-  isActive: false,
-  isExpanded: false,
-  inputHeight: 0,
-}));
-const activeSessionStateMocks = vi.hoisted(() => ({
-  isProcessing: false,
-}));
-const flowDiagnosticsMocks = vi.hoisted(() => ({
-  enabled: false,
-  trace: vi.fn(),
-}));
-const resizeObserverMocks = vi.hoisted(() => ({
-  callbacks: [] as Array<() => void>,
-}));
-
-vi.mock('@/infrastructure/diagnostics/flowChatDiagnostics', () => ({
-  flowChatDiagnostics: {
-    isEnabled: () => flowDiagnosticsMocks.enabled,
-    trace: flowDiagnosticsMocks.trace,
-  },
+  enterFollowOutput: vi.fn(),
+  exitFollowOutput: vi.fn(),
+  handleUserScrollIntent: vi.fn(),
+  /**
+   * The two answers to "does follow own the viewport", which the real hook
+   * gives at two different moments: `isFollowingOutput` is a render value, and
+   * `followsNow` is the ref a gesture clears synchronously before it asks.
+   * Keeping both here is what lets a test put them out of step, which is the
+   * state the paging refusal used to read from the wrong side of.
+   */
+  isFollowingOutput: false,
+  followsNow: false,
+  /** False stands in for a Turn the virtualizer can place but the DOM cannot. */
+  renderItemMetadata: true,
 }));
 
-vi.mock('react-i18next', () => ({
-  initReactI18next: {
-    type: '3rdParty',
-    init: vi.fn(),
-  },
-  useTranslation: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        'historyState.preparingOlderHistory': 'Preparing older history...',
-        'historyState.olderHistoryNotReady': 'Older history is not ready yet.',
-      };
-      return translations[key] ?? key;
-    },
-  }),
-}));
+/** Input-stack footer the chat-input mock produces: 140 + 4 + 24. */
+const BOTTOM_INSET = 168;
 
-vi.mock('react-virtuoso', () => ({
-  Virtuoso: React.forwardRef((props: any, ref) => {
-    const scrollerRef = React.useRef<HTMLDivElement | null>(null);
-    const [, rerender] = React.useReducer((value: number) => value + 1, 0);
-    virtuosoMocks.initialTopMostItemIndex = props.initialTopMostItemIndex;
-    virtuosoMocks.initialTopMostItemIndexHistory.push(props.initialTopMostItemIndex);
-    virtuosoMocks.increaseViewportBy = props.increaseViewportBy;
-    virtuosoMocks.rangeChanged = props.rangeChanged ?? null;
-    React.useImperativeHandle(ref, () => ({
-      scrollTo: vi.fn(),
-      scrollToIndex: vi.fn((options: { index: number }) => {
-        virtuosoMocks.scrollToIndex(options);
-        const localIndex = Math.max(0, options.index);
-        virtuosoMocks.renderedRange = {
-          start: localIndex,
-          end: Math.min(props.data?.length ?? 0, localIndex + 4),
-        };
-        rerender();
-      }),
-    }));
-
-    React.useLayoutEffect(() => {
-      if (!scrollerRef.current) {
-        return;
-      }
+/**
+ * jsdom has no layout engine, so both halves of the navigation clamp have to be
+ * supplied: the scroller's own box, and where a user message sits inside it.
+ */
+function fakeLayout(options: {
+  clientHeight: number;
+  /** A function where the range has to grow, as it does when history arrives. */
+  scrollHeight: number | (() => number);
+  turnTopFromScrollerTop: number;
+}) {
+  const readScrollHeight = typeof options.scrollHeight === 'function'
+    ? options.scrollHeight
+    : () => options.scrollHeight as number;
+  const originals = (['clientHeight', 'scrollHeight'] as const).map(name => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, name);
+    Object.defineProperty(HTMLElement.prototype, name, {
+      configurable: true,
+      get: () => (name === 'clientHeight' ? options.clientHeight : readScrollHeight()),
+    });
+    return [name, descriptor] as const;
+  });
+  const originalRect = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function getRect(this: HTMLElement) {
+    const top = this.classList.contains('virtual-item-wrapper')
+      ? options.turnTopFromScrollerTop
+      : 0;
+    return { ...new DOMRect(0, top, 0, 40), top, bottom: top + 40 } as DOMRect;
+  };
 
-      if (typeof scrollerRef.current.scrollTo !== 'function') {
-        Object.defineProperty(scrollerRef.current, 'scrollTo', {
-          configurable: true,
-          writable: true,
-          value: (options?: ScrollToOptions) => {
-            virtuosoMocks.scrollerScrollTo(options);
-            if (typeof options?.top === 'number') {
-              scrollerRef.current!.scrollTop = options.top;
-            }
-          },
-        });
+  return () => {
+    HTMLElement.prototype.getBoundingClientRect = originalRect;
+    originals.forEach(([name, descriptor]) => {
+      if (descriptor) {
+        Object.defineProperty(HTMLElement.prototype, name, descriptor);
+      } else {
+        delete (HTMLElement.prototype as unknown as Record<string, unknown>)[name];
       }
+    });
+  };
+}
 
-      props.scrollerRef?.(scrollerRef.current);
-      return () => {
-        props.scrollerRef?.(null);
+/*
+ * The virtualizer is mocked at FlowChat's own seam rather than at the library.
+ * These tests are about which scroll the list decides to ask for, and the seam
+ * is where that decision is expressed; the library's own behaviour belongs to
+ * the library. Every item is rendered, which is what a list shorter than the
+ * viewport would do anyway.
+ */
+vi.mock('./useFlowChatVirtualizer', async () => {
+  // The visible range is real geometry, and the paging rule reads it. Faking it
+  // would leave the rule tested against an answer no viewport can produce.
+  const actual = await vi.importActual<typeof import('./useFlowChatVirtualizer')>(
+    './useFlowChatVirtualizer',
+  );
+  return {
+    ...actual,
+    useFlowChatVirtualizer: (options: {
+      items: Array<Record<string, unknown>>;
+      getItemKey: (item: Record<string, unknown>) => string;
+      scrollerRef: { current: HTMLElement | null };
+    }) => {
+      const rows = options.items.map((item, index) => ({
+        index,
+        key: options.getItemKey(item),
+        startPx: index * 40,
+        endPx: index * 40 + 40,
+      }));
+      return {
+        rows,
+        paddingTopPx: 0,
+        paddingBottomPx: 0,
+        measureRowElement: () => {},
+        getItemBounds: (index: number) => (
+          index >= 0 && index < rows.length
+            ? { startPx: index * 40, endPx: index * 40 + 40 }
+            : null
+        ),
+        // The real one flushes the DOM's heights into the library's cache;
+        // these rows are placed by arithmetic, so there is nothing to flush.
+        measureRenderedItems: () => {},
+        getVisibleItemRange: () => {
+          const scroller = options.scrollerRef.current;
+          return scroller
+            ? actual.visibleRowRange(rows, scroller.scrollTop, scroller.clientHeight)
+            : null;
+        },
+        scrollItemIntoView: mocks.scrollItemIntoView,
+        scrollToOffset: mocks.scrollToOffset,
+        cancelAim: mocks.cancelAim,
       };
-    }, [props]);
-
-    React.useEffect(() => {
-      if (props.data?.[0]?.turnId === 'turn-a') {
-        props.atBottomStateChange?.(false);
-      }
-    }, [props]);
-
-    return (
-      <div
-        ref={scrollerRef}
-        data-testid="virtuoso"
-        data-virtuoso-scroller="true"
-        data-session-id={stateMocks.activeSession?.sessionId ?? ''}
-        tabIndex={0}
-      >
-        {props.components?.Header ? <props.components.Header context={props.context} /> : null}
-        {props.data
-          ?.map((item: VirtualItem, index: number) => ({ item, index }))
-          .filter(({ index }: { index: number }) => {
-            const range = virtuosoMocks.renderedRange;
-            return !range || (index >= range.start && index < range.end);
-          })
-          .map(({ item, index }: { item: VirtualItem; index: number }) => (
-            <div
-              key={`${item.type}:${item.turnId}`}
-              className="virtual-item-wrapper"
-              data-turn-id={item.turnId}
-              data-virtual-index={index}
-              data-item-type={item.type}
-            >
-              {item.type === 'user-message' ? item.data.content : item.turnId}
-            </div>
-          ))}
-        {props.components?.Footer ? <props.components.Footer context={props.context} /> : null}
-      </div>
-    );
-  }),
-}));
+    },
+  };
+});
 
 vi.mock('../../store/modernFlowChatStore', () => {
-  const useModernFlowChatStore = (selector: (state: any) => unknown) => selector({
-    visibleTurnInfo: stateMocks.visibleTurnInfo,
-  });
-  useModernFlowChatStore.getState = () => ({
-    visibleTurnInfo: stateMocks.visibleTurnInfo,
-    setVisibleTurnInfo: stateMocks.setVisibleTurnInfo,
-  });
-
+  const useModernFlowChatStore = Object.assign(
+    (selector: (state: Record<string, unknown>) => unknown) => selector({ visibleTurnInfo: null }),
+    { getState: () => ({ setVisibleTurnInfo: mocks.setVisibleTurnInfo }) },
+  );
   return {
-    useActiveSession: () => stateMocks.activeSession,
-    useVirtualItems: () => stateMocks.virtualItems,
+    useVirtualItems: () => mocks.items,
+    useActiveSession: () => mocks.activeSession,
     useModernFlowChatStore,
   };
 });
 
 vi.mock('../../hooks/useActiveSessionState', () => ({
-  useActiveSessionState: () => ({
-    isProcessing: activeSessionStateMocks.isProcessing,
-    processingPhase: null,
-  }),
+  useActiveSessionState: () => ({ isProcessing: false }),
 }));
 
 vi.mock('../../store/chatInputStateStore', () => ({
-  useChatInputState: (selector: (state: any) => unknown) => selector(inputStateMocks),
-}));
-
-vi.mock('../../store/FlowChatStore', () => ({
-  flowChatStore: {
-    getState: () => ({
-      sessions: new Map(stateMocks.activeSession ? [[stateMocks.activeSession.sessionId, stateMocks.activeSession]] : []),
-    }),
-    hasPendingSessionHistoryCompletion: flowStoreMocks.hasPendingSessionHistoryCompletion,
-    hasDeferredSessionHistoryProjection: flowStoreMocks.hasDeferredSessionHistoryProjection,
-    revealPreviousSessionHistoryWindow: flowStoreMocks.revealPreviousSessionHistoryWindow,
-    releaseSessionHistoryCompletionAfterInitialPaint: flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint,
-  },
+  useChatInputState: (selector: (state: Record<string, unknown>) => unknown) => selector({
+    isActive: false,
+    isExpanded: false,
+    inputHeight: 140,
+  }),
 }));
 
-vi.mock('@/shared/utils/startupTrace', () => ({
-  startupTrace: { markPhase: vi.fn() },
+vi.mock('./useFlowChatFollowOutput', () => ({
+  useFlowChatFollowOutput: () => ({
+    isFollowingOutput: mocks.isFollowingOutput,
+    enterFollowOutput: mocks.enterFollowOutput,
+    exitFollowOutput: mocks.exitFollowOutput,
+    scheduleFollowToLatest: vi.fn(),
+    isFollowingOutputNow: () => mocks.followsNow,
+    // Nothing streams here, so the frame loop is never correcting: the band is
+    // judged on the viewport itself, exactly as it is for a resting transcript.
+    isFollowCorrectingViewport: () => false,
+    handleUserScrollIntent: () => {
+      // What the real one does first: release, synchronously.
+      mocks.followsNow = false;
+      mocks.handleUserScrollIntent();
+    },
+    handleTurnsRolledBack: vi.fn(),
+    handleScroll: vi.fn(),
+    handleScrollSettled: vi.fn(),
+    handleViewportResize: vi.fn(),
+    // Follow owns nothing here, which is what the real hook returns when
+    // `isFollowingOutput` is false.
+    getFollowTargetScrollTop: () => null,
+  }),
 }));
 
 vi.mock('./VirtualItemRenderer', () => ({
-  VirtualItemRenderer: ({ item, index }: { item: VirtualItem; index: number }) => (
-    <div className="virtual-item-wrapper" data-turn-id={item.turnId} data-virtual-index={index} data-item-type={item.type}>
-      {item.turnId}
+  VirtualItemRenderer: ({ item, index, measureRef }: {
+    item: any;
+    index: number;
+    measureRef?: (element: HTMLElement | null) => void;
+  }) => (
+    <div
+      ref={measureRef}
+      className="virtual-item-wrapper"
+      data-item-type={mocks.renderItemMetadata ? item.type : undefined}
+      data-turn-id={item.turnId}
+      data-virtual-index={index}
+    >
+      {item.data?.content ?? item.turnId}
     </div>
   ),
 }));
 
-vi.mock('../ScrollToLatestBar', () => ({
-  ScrollToLatestBar: ({ visible, onClick }: { visible: boolean; onClick?: () => void }) => (
-    <button type="button" data-testid="scroll-to-latest" data-visible={visible ? 'true' : 'false'} onClick={onClick} />
-  ),
-}));
-
-vi.mock('../ScrollToTurnHeaderButton', () => ({
-  ScrollToTurnHeaderButton: () => null,
-}));
-
 vi.mock('../../hooks/useScrollToTurnHeader', () => ({
-  useScrollToTurnHeader: () => ({
-    shouldShowButton: false,
-    handleClick: vi.fn(),
-  }),
+  useScrollToTurnHeader: () => ({ shouldShowButton: false, handleClick: vi.fn() }),
 }));
 
-vi.mock('../../hooks/useVisibleTaskInfo', () => ({
-  useVisibleTaskInfo: () => ({
-    visibleTaskInfo: null,
-    scrollToTask: vi.fn(),
-  }),
-}));
-
-vi.mock('../StickyTaskIndicator', () => ({
-  StickyTaskIndicator: () => null,
-}));
+vi.mock('./RuntimeStatusSlot', () => ({ RuntimeStatusSlot: () => <div data-runtime-status /> }));
+vi.mock('../ScrollToLatestBar', () => ({ ScrollToLatestBar: () => null }));
+vi.mock('../ScrollToTurnHeaderButton', () => ({ ScrollToTurnHeaderButton: () => null }));
 
-function createSession(sessionId: string, turnId: string, overrides: Partial<Session> = {}): Session {
-  return {
-    sessionId,
-    title: sessionId,
-    dialogTurns: [{
-      id: turnId,
-      sessionId,
-      userMessage: { id: `user-${turnId}`, content: turnId, timestamp: 1 },
-      modelRounds: [],
-      status: 'completed',
-      startTime: 1,
-    }],
-    status: 'idle',
-    config: { agentType: 'agentic' },
-    createdAt: 1,
-    lastActiveAt: 1,
-    error: null,
-    isHistorical: false,
-    todos: [],
-    mode: 'agentic',
-    sessionKind: 'normal',
-    ...overrides,
-  } as Session;
-}
-
-function createItem(turnId: string): VirtualItem {
+function userMessage(turnId: string, id: string, content: string) {
   return {
     type: 'user-message',
     turnId,
-    data: {
-      id: `user-${turnId}`,
-      content: turnId,
-      timestamp: 1,
-    },
-  } as VirtualItem;
-}
-
-function createModelItem(turnId: string): VirtualItem {
-  return {
-    type: 'model-round',
-    turnId,
-    isLastRound: true,
-    isTurnComplete: true,
-    data: {
-      id: `round-${turnId}`,
-      status: 'completed',
-      isStreaming: false,
-      items: [{
-        id: `text-${turnId}`,
-        type: 'text',
-        content: 'x'.repeat(2_000),
-        status: 'completed',
-        timestamp: 1,
-      }],
-    },
-  } as VirtualItem;
-}
-
-function createSessionWithTurns(sessionId: string, turnIds: string[], overrides: Partial<Session> = {}): Session {
-  return createSession(sessionId, turnIds[0] ?? 'turn-a', {
-    dialogTurns: turnIds.map((turnId, index) => ({
-      id: turnId,
-      sessionId,
-      userMessage: { id: `user-${turnId}`, content: turnId, timestamp: index + 1 },
-      modelRounds: [],
-      status: 'completed',
-      startTime: index + 1,
-    })),
-    ...overrides,
-  });
-}
-
-function setScrollerGeometry(scroller: HTMLElement, metrics: {
-  scrollHeight: number;
-  clientHeight: number;
-  scrollTop?: number;
-}): void {
-  Object.defineProperty(scroller, 'scrollHeight', {
-    configurable: true,
-    value: metrics.scrollHeight,
-  });
-  Object.defineProperty(scroller, 'clientHeight', {
-    configurable: true,
-    value: metrics.clientHeight,
-  });
-  if (metrics.scrollTop !== undefined) {
-    scroller.scrollTop = metrics.scrollTop;
-  }
-}
-
-function createRect(overrides: Partial<DOMRect>): DOMRect {
-  const left = overrides.left ?? 0;
-  const top = overrides.top ?? 0;
-  const width = overrides.width ?? 0;
-  const height = overrides.height ?? 0;
-  const right = overrides.right ?? left + width;
-  const bottom = overrides.bottom ?? top + height;
-
-  return {
-    x: overrides.x ?? left,
-    y: overrides.y ?? top,
-    left,
-    top,
-    width,
-    height,
-    right,
-    bottom,
-    toJSON: () => ({}),
-  } as DOMRect;
+    data: { id, content },
+  };
 }
 
-describe('VirtualMessageList session boundary', () => {
+describe('VirtualMessageList natural scroll contract', () => {
   let container: HTMLDivElement;
   let root: Root;
-  let rafCallbacks: FrameRequestCallback[];
-
-  const flushAnimationFrame = () => {
-    const callbacks = rafCallbacks;
-    rafCallbacks = [];
-    act(() => {
-      callbacks.forEach(callback => callback(performance.now()));
-    });
-  };
 
   beforeEach(() => {
-    rafCallbacks = [];
-    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      rafCallbacks.push(callback);
-      return rafCallbacks.length;
-    }));
-    vi.stubGlobal('cancelAnimationFrame', vi.fn());
-    vi.stubGlobal('ResizeObserver', class {
-      constructor(callback: ResizeObserverCallback) {
-        resizeObserverMocks.callbacks.push(() => {
-          callback([], this as unknown as ResizeObserver);
-        });
-      }
-      observe = vi.fn();
-      unobserve = vi.fn();
-      disconnect = vi.fn();
-    });
     container = document.createElement('div');
     document.body.appendChild(container);
     root = createRoot(container);
-    stateMocks.visibleTurnInfo = null;
-    stateMocks.setVisibleTurnInfo.mockReset();
-    virtuosoMocks.renderedRange = null;
-    virtuosoMocks.scrollerScrollTo.mockReset();
-    virtuosoMocks.scrollToIndex.mockReset();
-    virtuosoMocks.initialTopMostItemIndex = null;
-    virtuosoMocks.initialTopMostItemIndexHistory = [];
-    virtuosoMocks.increaseViewportBy = null;
-    virtuosoMocks.rangeChanged = null;
-    flowStoreMocks.hasPendingSessionHistoryCompletion.mockReset();
-    flowStoreMocks.hasPendingSessionHistoryCompletion.mockReturnValue(false);
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReset();
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(false);
-    flowStoreMocks.revealPreviousSessionHistoryWindow.mockReset();
-    flowStoreMocks.revealPreviousSessionHistoryWindow.mockReturnValue(false);
-    flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint.mockReset();
-    flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint.mockReturnValue(false);
-    inputStateMocks.isActive = false;
-    inputStateMocks.isExpanded = false;
-    inputStateMocks.inputHeight = 0;
-    activeSessionStateMocks.isProcessing = false;
-    flowDiagnosticsMocks.enabled = false;
-    flowDiagnosticsMocks.trace.mockReset();
-    resizeObserverMocks.callbacks = [];
-  });
-
-  it('keeps Virtuoso absolute indexes stable across prepend and remote-side trimming', () => {
-    const previous = ['turn-3', 'turn-4', 'turn-5', 'turn-6'].map(createItem);
-    const prepended = ['turn-1', 'turn-2', 'turn-3', 'turn-4', 'turn-5'].map(createItem);
-    const trimmed = ['turn-4', 'turn-5', 'turn-6', 'turn-7'].map(createItem);
-
-    const getStableKey = (item: VirtualItem) => `${item.type}:${item.turnId}`;
-    expect(getLeadingVirtualItemIndexDelta(previous, prepended, getStableKey)).toBe(-2);
-    expect(getLeadingVirtualItemIndexDelta(previous, trimmed, getStableKey)).toBe(1);
+    mocks.items = [
+      userMessage('turn-1', 'message-1', 'First'),
+      userMessage('turn-2', 'message-2', 'Second'),
+    ];
+    mocks.activeSession = {
+      sessionId: 'session-1',
+      dialogTurns: [],
+    };
+    mocks.isFollowingOutput = false;
+    mocks.followsNow = false;
+    mocks.scrollItemIntoView.mockReset();
+    mocks.scrollToOffset.mockReset();
+    mocks.cancelAim.mockReset();
+    mocks.enterFollowOutput.mockReset();
+    mocks.exitFollowOutput.mockReset();
+    mocks.handleUserScrollIntent.mockReset();
+    mocks.setVisibleTurnInfo.mockReset();
+    mocks.renderItemMetadata = true;
+    vi.stubGlobal('ResizeObserver', class {
+      observe() {}
+      disconnect() {}
+    });
   });
 
   afterEach(() => {
@@ -447,3437 +250,608 @@ describe('VirtualMessageList session boundary', () => {
     vi.unstubAllGlobals();
   });
 
-  it('keeps the Virtuoso footer mounted across parent rerenders', () => {
-    stateMocks.activeSession = createSession('session-a', 'turn-a');
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-    const firstFooter = container.querySelector('.message-list-footer');
-    expect(firstFooter).not.toBeNull();
-    if (!(firstFooter instanceof HTMLElement)) {
-      return;
-    }
-    firstFooter.style.height = '900px';
-    firstFooter.style.minHeight = '900px';
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(container.querySelector('.message-list-footer')).toBe(firstFooter);
-    expect(firstFooter.style.height).toBe('900px');
-    expect(firstFooter.style.minHeight).toBe('900px');
+  it('renders only the current input layout inset in the Footer', () => {
+    act(() => root.render(<VirtualMessageList />));
+    const footer = container.querySelector<HTMLElement>('.message-list-footer');
+    expect(footer?.style.height).toBe('168px');
+    expect(footer?.style.minHeight).toBe('168px');
   });
 
-  it('rebases retained viewport geometry without converting inactive zero size into footer space', () => {
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    stateMocks.virtualItems = ['turn-a', 'turn-b'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList isViewportActive />);
+  it('reserves a tail spacer sized from the viewport and nothing else', () => {
+    // The session opens on the end of *real content*, which is above this
+    // reservation. Nothing aligns to the last item any more: the end of the
+    // scroll range is reserved blank, and opening there is opening on nothing.
+    const originalClientHeight = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      'clientHeight',
+    );
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+      configurable: true,
+      get: () => 600,
     });
 
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    if (!scroller || !footer) {
-      return;
+    try {
+      act(() => root.render(<VirtualMessageList />));
+
+      const expectedSpacerPx = tailSpacerPxForViewport(600, BOTTOM_INSET);
+      expect(expectedSpacerPx).toBeLessThan(600);
+      const spacer = container.querySelector<HTMLElement>('.message-list-tail-spacer');
+      expect(spacer?.style.height).toBe(`${expectedSpacerPx}px`);
+      // The input-stack footer stays a separate reservation. It feeds the
+      // spacer's size, but the two are never folded into one number.
+      expect(container.querySelector<HTMLElement>('.message-list-footer')?.style.height)
+        .toBe('168px');
+    } finally {
+      if (originalClientHeight) {
+        Object.defineProperty(HTMLElement.prototype, 'clientHeight', originalClientHeight);
+      } else {
+        delete (HTMLElement.prototype as unknown as Record<string, unknown>).clientHeight;
+      }
     }
+  });
 
-    let hidden = false;
-    let naturalContentHeight = 36_000;
-    let scrollTop = 34_500;
-    Object.defineProperties(scroller, {
-      clientHeight: {
-        configurable: true,
-        get: () => hidden ? 0 : 1_000,
-      },
-      scrollHeight: {
-        configurable: true,
-        get: () => hidden
-          ? 0
-          : naturalContentHeight + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: {
-        configurable: true,
-        get: () => scrollTop,
-        set: (value: number) => {
-          scrollTop = value;
-        },
-      },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockImplementation(() => createRect({
-      top: 0,
-      bottom: hidden ? 0 : 1_000,
-      height: hidden ? 0 : 1_000,
-    }));
-
-    act(() => {
-      root.render(<VirtualMessageList isViewportActive />);
-    });
-    const baselineFooterHeight = Number.parseFloat(footer.style.height);
-
+  it('navigates a Turn with best-effort start alignment and no range reservation', () => {
+    const listRef = React.createRef<VirtualMessageListRef>();
+    act(() => root.render(<VirtualMessageList ref={listRef} />));
+    let accepted = false;
     act(() => {
-      root.render(<VirtualMessageList isViewportActive={false} />);
+      accepted = listRef.current?.navigateToTurn('turn-2', { behavior: 'auto' }) ?? false;
     });
-    hidden = true;
-    scrollTop = 0;
-    act(() => {
-      resizeObserverMocks.callbacks.at(-1)?.();
+    expect(accepted).toBe(true);
+    expect(mocks.exitFollowOutput).toHaveBeenCalledWith('scroll-to-turn');
+    // The breathing gap above a top-aligned Turn is the virtualizer's
+    // `scrollPaddingStart`, so an aim re-taken while items measure keeps it.
+    expect(mocks.scrollItemIntoView).toHaveBeenCalledWith(1, {
+      align: 'start',
+      behavior: 'auto',
+      // The aim carries its owner, so the re-aims it produces are still the
+      // navigation's and are refused for anything that outranks it.
+      owner: 'one-shot-navigation',
+      holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
     });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
-    }
-
-    expect(Number.parseFloat(footer.style.height)).toBe(baselineFooterHeight);
+    expect(container.querySelector('.message-list-footer')?.getAttribute('style')).toContain('168px');
+  });
 
-    naturalContentHeight += 600;
-    hidden = false;
-    act(() => {
-      root.render(<VirtualMessageList isViewportActive />);
+  it('top-aligns a Turn that still has a transcript below it', () => {
+    const listRef = React.createRef<VirtualMessageListRef>();
+    // Content end at 3000 - 392 - 600 = 2008, well below the Turn's top at 492.
+    const restoreLayout = fakeLayout({
+      clientHeight: 600,
+      scrollHeight: 3000,
+      turnTopFromScrollerTop: 500,
     });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
+    try {
+      act(() => root.render(<VirtualMessageList ref={listRef} />));
+      act(() => { listRef.current?.navigateToTurn('turn-2', { behavior: 'smooth' }); });
+
+      expect(mocks.scrollItemIntoView).toHaveBeenCalledTimes(1);
+      expect(mocks.scrollItemIntoView).toHaveBeenCalledWith(1, {
+        align: 'start',
+        // A resolvable Turn is clamped before anything moves, so the requested
+        // animation survives.
+        behavior: 'smooth',
+        owner: 'one-shot-navigation',
+        holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+      });
+    } finally {
+      restoreLayout();
     }
-
-    expect(Number.parseFloat(footer.style.height)).toBeLessThanOrEqual(
-      baselineFooterHeight + 1,
-    );
-    expect(scroller.scrollTop).toBeGreaterThan(0);
-    expect(scroller.scrollHeight).toBeLessThan(40_000);
   });
 
-  it('does not convert Virtuoso estimate convergence into anonymous footer space', () => {
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    stateMocks.virtualItems = ['turn-a', 'turn-b'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList isViewportActive />);
+  it('stops a short tail Turn at the content end rather than in the blank', () => {
+    const listRef = React.createRef<VirtualMessageListRef>();
+    // Content end at 1000 - 392 - 600 = 8; top-aligning would mean 492, which
+    // is a screen of reserved blank nothing is going to fill.
+    const restoreLayout = fakeLayout({
+      clientHeight: 600,
+      scrollHeight: 1000,
+      turnTopFromScrollerTop: 500,
     });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    if (!scroller || !footer) {
-      return;
+    try {
+      act(() => root.render(<VirtualMessageList ref={listRef} />));
+      act(() => { listRef.current?.navigateToTurn('turn-2', { behavior: 'smooth' }); });
+
+      // Aimed at the end of real content, read off live geometry — not at the
+      // last item, whose end is the bottom of the reserved blank.
+      expect(mocks.scrollItemIntoView).not.toHaveBeenCalled();
+      expect(mocks.scrollToOffset).toHaveBeenCalledTimes(1);
+      expect(mocks.scrollToOffset).toHaveBeenCalledWith(
+        1000 - tailSpacerPxForViewport(600, BOTTOM_INSET) - 600,
+        {
+          behavior: 'smooth',
+          owner: 'one-shot-navigation',
+          // The clamp is still the navigation, so it states the same window.
+          // Without one it would hold the viewport for the rest of the session.
+          holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+        },
+      );
+    } finally {
+      restoreLayout();
     }
+  });
 
-    let naturalContentHeight = 14_457;
-    let scrollTop = 13_561.3330078125;
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, get: () => 1_020 },
-      scrollHeight: {
-        configurable: true,
-        get: () => naturalContentHeight + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: {
+  it('reads an unrendered Turn back from the virtualizer, and corrects through it', () => {
+    const listRef = React.createRef<VirtualMessageListRef>();
+    const restoreLayout = fakeLayout({
+      clientHeight: 600,
+      scrollHeight: 1000,
+      turnTopFromScrollerTop: 500,
+    });
+    try {
+      mocks.renderItemMetadata = false;
+      act(() => root.render(<VirtualMessageList ref={listRef} />));
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      Object.defineProperty(scroller, 'scrollTop', {
         configurable: true,
-        get: () => scrollTop,
-        set: (value: number) => {
-          scrollTop = value;
+        writable: true,
+        value: 0,
+      });
+      // Only the virtualizer knows where the Turn is; it lands the viewport in
+      // the reserved blank.
+      mocks.scrollItemIntoView.mockImplementation(() => { scroller.scrollTop = 900; });
+
+      act(() => { listRef.current?.navigateToTurn('turn-2', { behavior: 'smooth' }); });
+
+      // Placed instantly, because an animation would not have arrived yet and
+      // there would be nothing to read back.
+      expect(mocks.scrollItemIntoView).toHaveBeenCalledTimes(1);
+      expect(mocks.scrollItemIntoView).toHaveBeenCalledWith(1, {
+        align: 'start',
+        owner: 'one-shot-navigation',
+        holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+      });
+      // Corrected through the virtualizer, not the scroller: a direct write
+      // would leave the first call's re-aim pending, and it aims at the top.
+      expect(mocks.scrollToOffset).toHaveBeenCalledWith(
+        1000 - tailSpacerPxForViewport(600, BOTTOM_INSET) - 600,
+        {
+          behavior: 'auto',
+          owner: 'one-shot-navigation',
+          holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
         },
-      },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_020,
-      height: 1_020,
-    }));
-
-    act(() => {
-      root.render(<VirtualMessageList isViewportActive />);
-      resizeObserverMocks.callbacks.at(-1)?.();
-    });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
+      );
+    } finally {
+      restoreLayout();
     }
-    const baselineFooterHeight = Number.parseFloat(footer.style.height);
+  });
 
-    const convergenceSteps = [10_902, 7_529, 4_601, 3_693];
-    for (const nextNaturalContentHeight of convergenceSteps) {
-      naturalContentHeight = nextNaturalContentHeight;
-      scrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  describe('scrollbar drags release the viewport', () => {
+    // Content box ends at 0 + 1384; the gutter runs from there to 1394.
+    const CONTENT_BOX_WIDTH = 1384;
+
+    function pressAt(clientX: number) {
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      Object.defineProperty(scroller, 'clientWidth', {
+        configurable: true,
+        value: CONTENT_BOX_WIDTH,
+      });
       act(() => {
-        resizeObserverMocks.callbacks.at(-1)?.();
+        // jsdom has no PointerEvent; only `clientX` is read.
+        scroller.dispatchEvent(new MouseEvent('pointerdown', { clientX, bubbles: true }));
+        scroller.dispatchEvent(new Event('scroll'));
       });
-      for (let frame = 0; frame < 4; frame += 1) {
-        flushAnimationFrame();
-      }
     }
 
-    expect(Number.parseFloat(footer.style.height)).toBeCloseTo(baselineFooterHeight, 2);
-    expect(scroller.scrollHeight).toBeLessThan(4_000);
-  });
+    it('treats a scroll under a scrollbar press as intent', () => {
+      act(() => root.render(<VirtualMessageList />));
+      pressAt(CONTENT_BOX_WIDTH + 6);
+      expect(mocks.handleUserScrollIntent).toHaveBeenCalled();
+    });
 
-  it('reconciles a stream that ends while its viewport is inactive after reactivation', () => {
-    flowDiagnosticsMocks.enabled = true;
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const session = createSession('session-a', 'turn-a');
-    session.dialogTurns[0].status = 'processing';
-    session.dialogTurns[0].modelRounds = [{
-      id: 'round-turn-a',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof session.dialogTurns[number]['modelRounds'][number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = [createItem('turn-a'), createModelItem('turn-a')];
+    it('leaves a scroll under a press on the transcript alone', () => {
+      // Layout growth and virtualizer remeasurement emit scroll events too, so
+      // the press is what qualifies one — not the event itself.
+      act(() => root.render(<VirtualMessageList />));
+      pressAt(CONTENT_BOX_WIDTH - 200);
+      expect(mocks.handleUserScrollIntent).not.toHaveBeenCalled();
+    });
 
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} isViewportActive />);
+    it('gives up an aim still in flight, which the claim alone cannot reach', () => {
+      /*
+       * The register refuses the re-aim's writes only while the gesture's hold
+       * is live — 200ms after the last notch, against a five-second re-aim —
+       * and the library never learns it was refused. Measured: a navigation
+       * placed at 5358, the reader took over 6ms later, and the re-aim asked
+       * for 7784 12ms after that.
+       */
+      act(() => root.render(<VirtualMessageList />));
+      pressAt(CONTENT_BOX_WIDTH + 6);
+      expect(mocks.cancelAim).toHaveBeenCalled();
     });
 
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const target = container.querySelector<HTMLElement>(
-      '[data-turn-id="turn-a"][data-item-type="user-message"]',
-    );
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(target).not.toBeNull();
-    if (!scroller || !footer || !target) {
-      return;
+    it('disarms on release, so a later scroll is not intent', () => {
+      act(() => root.render(<VirtualMessageList />));
+      pressAt(CONTENT_BOX_WIDTH + 6);
+      mocks.handleUserScrollIntent.mockClear();
+
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      act(() => {
+        window.dispatchEvent(new MouseEvent('pointerup'));
+        scroller.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(mocks.handleUserScrollIntent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('history arriving above the viewport', () => {
+    /**
+     * A scroller whose range grows with the transcript, which is what makes the
+     * compensation measurable at all: the reserved height and the real height
+     * disagree while the arrived items are still estimates.
+     */
+    function withGrowingRange(
+      options: { scrollHeightPx: number; growthPx: number; scrollTopPx?: number },
+      run: (scroller: HTMLElement) => void,
+    ) {
+      let scrollHeightPx = options.scrollHeightPx;
+      const restoreLayout = fakeLayout({
+        clientHeight: 600,
+        scrollHeight: () => scrollHeightPx,
+        turnTopFromScrollerTop: 500,
+      });
+      try {
+        act(() => root.render(<VirtualMessageList />));
+        const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+        scroller.scrollTop = options.scrollTopPx ?? 500;
+        scrollHeightPx += options.growthPx;
+        run(scroller);
+      } finally {
+        restoreLayout();
+      }
     }
 
-    let hidden = false;
-    let scrollTop = 200;
-    Object.defineProperties(scroller, {
-      clientHeight: {
-        configurable: true,
-        get: () => hidden ? 0 : 1_000,
-      },
-      scrollHeight: {
-        configurable: true,
-        get: () => hidden
-          ? 0
-          : 1_200 + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: {
-        configurable: true,
-        get: () => scrollTop,
-        set: (value: number) => {
-          scrollTop = value;
-        },
-      },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockImplementation(() => createRect({
-      top: 0,
-      bottom: hidden ? 0 : 1_000,
-      height: hidden ? 0 : 1_000,
-    }));
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = hidden ? 0 : 700 - scrollTop;
-      return createRect({ top, bottom: top + 40, height: hidden ? 0 : 40 });
-    });
+    function prependOlderTurns(count: number) {
+      mocks.items = [
+        ...Array.from({ length: count }, (_unused, index) => (
+          userMessage(`turn-old-${index}`, `message-old-${index}`, 'Older')
+        )),
+        ...mocks.items,
+      ];
+      act(() => root.render(<VirtualMessageList />));
+    }
 
-    act(() => {
-      listRef.current?.pinTurnToTopWithStatus('turn-a', {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
+    it('moves the viewport by the height that was prepended', () => {
+      // Three 40px items arrived above, so the reader's content is 120px lower
+      // and the viewport follows it. Anything less leaves them looking at
+      // history they never asked to be shown.
+      withGrowingRange({ scrollHeightPx: 3000, growthPx: 120 }, scroller => {
+        prependOlderTurns(3);
+        expect(scroller.scrollTop).toBe(620);
       });
     });
-    expect(Number.parseFloat(footer.style.height)).toBeGreaterThan(0);
 
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} isViewportActive={false} />);
+    it('moves it even while the reader is scrolling, because that is when history arrives', () => {
+      /*
+       * Paging up happens only while the reader scrolls up into the boundary,
+       * so a gesture that could refuse this would refuse all of it. Measured
+       * before this was a displacement rather than a position: 2494px arrived,
+       * `scrollTop` held at 40, the transcript jumped back thirteen Turns, and
+       * the boundary never re-armed because the reader was still at the head.
+       */
+      withGrowingRange({ scrollHeightPx: 3000, growthPx: 80 }, scroller => {
+        act(() => { scroller.dispatchEvent(new Event('wheel')); });
+        prependOlderTurns(2);
+        expect(scroller.scrollTop).toBe(580);
+      });
     });
-    hidden = true;
-    scrollTop = 0;
-    stateMocks.activeSession = {
-      ...session,
-      dialogTurns: session.dialogTurns.map(turn => ({
-        ...turn,
-        status: 'completed',
-        modelRounds: turn.modelRounds.map(round => ({
-          ...round,
-          status: 'completed',
-          isStreaming: false,
-        })),
-      })),
-    };
-    flowDiagnosticsMocks.trace.mockClear();
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} isViewportActive={false} />);
-      resizeObserverMocks.callbacks.at(-1)?.();
+
+    it('trusts the range the transcript actually gained over the height reserved for it', () => {
+      /*
+       * The arrived items are estimates in the virtualizer's cache while the
+       * DOM already holds their real heights, and the cache is the one that
+       * over-states. Measured twice in one session: 2174px reserved against
+       * 670px of real growth, then 2494px against 949px. Compensating by the
+       * reserved amount walks the reader down the transcript a page at a time.
+       */
+      withGrowingRange({ scrollHeightPx: 3000, growthPx: 50 }, scroller => {
+        prependOlderTurns(3);
+        expect(scroller.scrollTop).toBe(550);
+      });
     });
-    expect(flowDiagnosticsMocks.trace).not.toHaveBeenCalledWith(expect.objectContaining({
-      location: 'VirtualMessageList.streamEndReconciliation',
-    }));
 
-    hidden = false;
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} isViewportActive />);
+    it('never compensates past the end of real content', () => {
+      /*
+       * Content arriving above the reader cannot push them past the end of the
+       * transcript, so needing more than the range can absorb is proof the
+       * amount is wrong. Overshooting leaves them inside the reserved blank,
+       * where the snap back correctly returns them to the tail — which, since
+       * paging happens only while scrolling up, it then does every time.
+       */
+      const contentEndPx = 1000 - tailSpacerPxForViewport(600, BOTTOM_INSET) - 600;
+      withGrowingRange({ scrollHeightPx: 900, growthPx: 100, scrollTopPx: 0 }, scroller => {
+        prependOlderTurns(3);
+        expect(scroller.scrollTop).toBe(contentEndPx);
+      });
     });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
-    }
 
-    expect(flowDiagnosticsMocks.trace).toHaveBeenCalledWith(expect.objectContaining({
-      location: 'VirtualMessageList.streamEndReconciliation',
-    }));
-    expect(Number.parseFloat(footer.style.height)).toBeLessThanOrEqual(1_124);
-    expect(scroller.scrollHeight).toBeLessThan(3_000);
-  });
+    it('leaves the viewport alone when the transcript grows at the end', () => {
+      act(() => root.render(<VirtualMessageList />));
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      scroller.scrollTop = 500;
 
-  it('routes jump-to-latest through the presentation owner while reading a history window', () => {
-    const onRequestJumpToLatest = vi.fn();
-    stateMocks.activeSession = createSession('session-a', 'turn-10');
-    stateMocks.virtualItems = [createItem('turn-10')];
+      mocks.items = [...mocks.items, userMessage('turn-3', 'message-3', 'Newer')];
+      act(() => root.render(<VirtualMessageList />));
 
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 2,
-            endOrdinalExclusive: 7,
-            targetTurnId: 'turn-5',
-            mode: 'history-window',
-          }}
-          presentationRevision={1}
-          onRequestJumpToLatest={onRequestJumpToLatest}
-        />,
-      );
+      expect(scroller.scrollTop).toBe(500);
     });
 
-    const jumpButton = container.querySelector<HTMLButtonElement>('[data-testid="scroll-to-latest"]');
-    expect(jumpButton?.dataset.visible).toBe('true');
-    act(() => jumpButton?.click());
-    expect(onRequestJumpToLatest).toHaveBeenCalledOnce();
-  });
+    it('leaves the viewport alone when the head is trimmed', () => {
+      act(() => root.render(<VirtualMessageList />));
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      scroller.scrollTop = 500;
 
-  it('keeps canonical streaming output hidden from tail follow in history-window mode', () => {
-    activeSessionStateMocks.isProcessing = true;
-    stateMocks.activeSession = createSession('session-a', 'turn-10', {
-      dialogTurns: [{
-        ...createSession('session-a', 'turn-10').dialogTurns[0],
-        status: 'processing',
-      }],
-    });
-    const historyItems = ['turn-3', 'turn-4', 'turn-5'].map(createItem);
-    stateMocks.virtualItems = historyItems;
+      // The item that was first is gone rather than moved, so there is no
+      // arrived height to account for and nothing to compensate with.
+      mocks.items = mocks.items.slice(1);
+      act(() => root.render(<VirtualMessageList />));
 
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          items={historyItems}
-          presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 2,
-            endOrdinalExclusive: 5,
-            targetTurnId: 'turn-4',
-            mode: 'history-window',
-          }}
-          presentationRevision={1}
-        />,
-      );
+      expect(scroller.scrollTop).toBe(500);
     });
-
-    expect(container.querySelector('[data-testid="flowchat-message-list"]')?.getAttribute(
-      'data-streaming-output',
-    )).toBe('false');
   });
 
-  it('allows live-tail follow while retaining a history-window projection', () => {
-    activeSessionStateMocks.isProcessing = true;
-    stateMocks.activeSession = createSession('session-a', 'turn-10', {
-      dialogTurns: [{
-        ...createSession('session-a', 'turn-10').dialogTurns[0],
-        status: 'processing',
-      }],
-    });
-    const historyItems = ['turn-3', 'turn-4', 'turn-5'].map(createItem);
-    stateMocks.virtualItems = historyItems;
-    const onRequestJumpToLatest = vi.fn();
+  describe('asking for older Turns', () => {
+    /** Twenty 40px rows, seen through a 200px viewport. */
+    const ROW_PX = 40;
+    const VIEWPORT_PX = 200;
 
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          items={historyItems}
-          presentationMode="history-window"
-          viewportMode="live-tail"
-          historyWindow={null}
-          presentationRevision={1}
-          onRequestJumpToLatest={onRequestJumpToLatest}
-        />,
-      );
-    });
+    /** A scroll, and the microtasks a boundary request resolves through. */
+    async function scrollTo(scroller: HTMLElement, topPx: number) {
+      await act(async () => {
+        scroller.scrollTop = topPx;
+        scroller.dispatchEvent(new Event('scroll'));
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+    }
+
+    /**
+     * A transcript with a page already behind it.
+     *
+     * The list opens at the top, so it asks and disarms `before` on mount. That
+     * is the state both of these are about: one page dispatched, and what has
+     * to happen for the next one. `asked` is cleared afterwards so it counts
+     * only what the scrolls produced.
+     */
+    async function withPagedTranscript(
+      run: (scroller: HTMLElement, asked: string[]) => Promise<void>,
+    ) {
+      mocks.items = Array.from({ length: 20 }, (_unused, index) => (
+        userMessage(`turn-${index}`, `message-${index}`, 'Body')
+      ));
+      const restoreLayout = fakeLayout({
+        clientHeight: VIEWPORT_PX,
+        scrollHeight: 20 * ROW_PX,
+        turnTopFromScrollerTop: 0,
+      });
+      const asked: string[] = [];
+      try {
+        await act(async () => {
+          root.render(
+            <VirtualMessageList
+              onHistoryWindowBoundaryIntent={direction => {
+                asked.push(direction);
+                return 'applied';
+              }}
+            />,
+          );
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        expect(asked).toEqual(['before']);
+        asked.length = 0;
+        await run(container.querySelector<HTMLElement>('[data-flowchat-scroller]')!, asked);
+      } finally {
+        restoreLayout();
+      }
+    }
 
-    expect(container.querySelector('[data-testid="flowchat-message-list"]')?.getAttribute(
-      'data-viewport-mode',
-    )).toBe('live-tail');
-    expect(container.querySelector('[data-testid="flowchat-message-list"]')?.getAttribute(
-      'data-streaming-output',
-    )).toBe('true');
-
-    const jumpButton = container.querySelector<HTMLButtonElement>('[data-testid="scroll-to-latest"]');
-    expect(jumpButton).not.toBeNull();
-    act(() => jumpButton?.click());
-    expect(onRequestJumpToLatest).not.toHaveBeenCalled();
-  });
+    it('asks again once the reader is off the boundary, still within the lead', async () => {
+      /*
+       * The latch re-arms on the reader being *off* the boundary, and the ask
+       * goes out a screenful before they reach it — so those cannot be the same
+       * predicate. When they were, one page landed and everything after it was
+       * refused as `not-rearmed`: measured, six minutes of refusals while the
+       * reader scrolled into a wall two Turns from the top of what was loaded.
+       */
+      await withPagedTranscript(async (scroller, asked) => {
+        // Rows 3..7 are on screen, so nothing is reached; the head is 120px up,
+        // which is inside the one-screen lead.
+        await scrollTo(scroller, 120);
+        expect(asked).toEqual(['before']);
+      });
+    });
+
+    it('does not ask again while the reader is still on the head', async () => {
+      // The latch's own job, unchanged: after a prepend the visible range reads
+      // as the head for a commit, and that must not dispatch a second page.
+      await withPagedTranscript(async (scroller, asked) => {
+        await scrollTo(scroller, ROW_PX);
+        expect(asked).toEqual([]);
+      });
+    });
+
+    it('asks on a gesture that moves nothing, because at the top none of them do', async () => {
+      /*
+       * The deadlock this closes, measured on a tail window of three Turns that
+       * fitted inside the viewport — so the whole scroll range was reserved
+       * blank and the reader sat at offset 0 with the head already on screen.
+       *
+       * A wheel there changes no offset, so the scroller emits no `scroll`
+       * event and the evaluation that hangs off it never runs. The log shows
+       * twenty `user-gesture` claims across seven seconds with no scroll event,
+       * no anchor capture and not one boundary evaluation; the only evaluations
+       * in that session landed in the three milliseconds after a snap back
+       * handed the viewport to follow-output, and were refused for exactly that
+       * reason. Scrolling up did nothing, permanently.
+       */
+      mocks.items = Array.from({ length: 20 }, (_unused, index) => (
+        userMessage(`turn-${index}`, `message-${index}`, 'Body')
+      ));
+      const restoreLayout = fakeLayout({
+        clientHeight: VIEWPORT_PX,
+        scrollHeight: 20 * ROW_PX,
+        turnTopFromScrollerTop: 0,
+      });
+      const asked: string[] = [];
+      try {
+        await act(async () => {
+          root.render(
+            <VirtualMessageList
+              onHistoryWindowBoundaryIntent={direction => {
+                asked.push(direction);
+                // Not applied, so the direction arms again rather than waiting
+                // for a prepend that never comes — the state the reader is in.
+                return 'not-ready';
+              }}
+            />,
+          );
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        expect(asked).toEqual(['before']);
+        asked.length = 0;
+
+        const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+        // A wheel and nothing else: no scroll event, because there is nowhere
+        // for the offset to go.
+        await act(async () => {
+          scroller.dispatchEvent(new Event('wheel'));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
 
-  it('waits for quiet scroll input before capturing an adjacent history anchor', async () => {
-    let prepareViewportForPresentationCommit:
-      | (() => boolean | void | Promise<boolean | void>)
-      | undefined;
-    let resolveBoundaryIntent: ((handled: boolean) => void) | undefined;
-    const boundaryIntent = new Promise<boolean>(resolve => {
-      resolveBoundaryIntent = resolve;
+        expect(asked).toEqual(['before']);
+      } finally {
+        restoreLayout();
+      }
     });
-    const onBoundaryIntent = vi.fn((
-      _direction: 'before' | 'after',
-      options?: {
-        prepareViewportForPresentationCommit?: () => boolean | void | Promise<boolean | void>;
-      },
-    ) => {
-      prepareViewportForPresentationCommit = options?.prepareViewportForPresentationCommit;
-      return boundaryIntent;
+
+    it('asks as the reader, not as the ownership their own gesture just ended', async () => {
+      /*
+       * `exitFollowOutput` clears ownership synchronously, but the list mirrored
+       * `isFollowingOutput` into a ref at render time — and no render happens
+       * inside an event handler. So the gesture released the viewport and then
+       * asked, and the ask was refused for an ownership that had already ended
+       * one line earlier. In the log: `followOutput.exit` and
+       * `historyPaging.refused: follow-output-owns-the-viewport` at the same
+       * millisecond, three entries apart.
+       */
+      mocks.items = Array.from({ length: 20 }, (_unused, index) => (
+        userMessage(`turn-${index}`, `message-${index}`, 'Body')
+      ));
+      // Follow owns the viewport as of the last render — a snap back has just
+      // landed — and the gesture below releases it without a render in between.
+      mocks.isFollowingOutput = true;
+      mocks.followsNow = true;
+      const restoreLayout = fakeLayout({
+        clientHeight: VIEWPORT_PX,
+        scrollHeight: 20 * ROW_PX,
+        turnTopFromScrollerTop: 0,
+      });
+      const asked: string[] = [];
+      try {
+        await act(async () => {
+          root.render(
+            <VirtualMessageList
+              onHistoryWindowBoundaryIntent={direction => {
+                asked.push(direction);
+                return 'not-ready';
+              }}
+            />,
+          );
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        // Refused on mount, correctly: follow owned it and nobody had gestured.
+        expect(asked).toEqual([]);
+
+        const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+        await act(async () => {
+          scroller.dispatchEvent(new Event('wheel'));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+
+        expect(asked).toEqual(['before']);
+      } finally {
+        restoreLayout();
+      }
     });
-    stateMocks.activeSession = createSession('session-a', 'turn-10');
-    const initialItems = ['turn-3', 'turn-4', 'turn-5', 'turn-6', 'turn-7'].map(createItem);
-    stateMocks.virtualItems = initialItems;
 
-    act(() => {
-      root.render(
+    it('stops treating a boundary as exhausted once the window has moved', async () => {
+      /*
+       * `exhausted` is a fact about a start ordinal, not about the session.
+       * Navigating to the first Turn asks `before`, the store answers
+       * `reached-start` for `targetOrdinal: -1` — correctly — and the latch then
+       * outlived that window. Measured: 3 Turns of 43 loaded, the reader jumped
+       * back to the tail, and `before` stayed latched off for good.
+       */
+      mocks.items = Array.from({ length: 20 }, (_unused, index) => (
+        userMessage(`turn-${index}`, `message-${index}`, 'Body')
+      ));
+      const restoreLayout = fakeLayout({
+        clientHeight: VIEWPORT_PX,
+        scrollHeight: 20 * ROW_PX,
+        turnTopFromScrollerTop: 0,
+      });
+      const asked: string[] = [];
+      const atFirstTurn = { startOrdinal: 0, endOrdinalExclusive: 8, targetTurnId: null, mode: 'history-window' as const };
+      const atTail = { startOrdinal: 35, endOrdinalExclusive: 43, targetTurnId: null, mode: 'history-window' as const };
+      const list = (window: typeof atFirstTurn) => (
         <VirtualMessageList
-          items={initialItems}
           presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 2,
-            endOrdinalExclusive: 7,
-            targetTurnId: 'turn-5',
-            mode: 'history-window',
+          historyWindow={window}
+          onHistoryWindowBoundaryIntent={direction => {
+            asked.push(direction);
+            // Nothing before the first Turn — true of this window, and only it.
+            return 'exhausted';
           }}
-          presentationRevision={1}
-          historyBoundaryState={{ before: 'idle', after: 'idle' }}
-          onHistoryWindowBoundaryIntent={onBoundaryIntent}
-        />,
+        />
       );
-    });
 
-    const scroller = container.querySelector<HTMLElement>('[data-testid="virtuoso"]');
-    const anchor = container.querySelector<HTMLElement>('[data-turn-id="turn-3"]');
-    expect(scroller).not.toBeNull();
-    expect(anchor).not.toBeNull();
-    if (!scroller || !anchor) return;
-
-    for (let frame = 0; frame < 8 && rafCallbacks.length > 0; frame += 1) {
-      flushAnimationFrame();
-    }
+      try {
+        await act(async () => {
+          root.render(list(atFirstTurn));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        expect(asked).toContain('before');
+        asked.length = 0;
+
+        // Latched: asking again from the same window changes nothing.
+        const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+        await act(async () => {
+          scroller.dispatchEvent(new Event('wheel'));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        expect(asked).toEqual([]);
+
+        // The reader jumps back to the tail. The answer was about where they
+        // were, so it does not survive their leaving.
+        await act(async () => {
+          root.render(list(atTail));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+        await act(async () => {
+          scroller.dispatchEvent(new Event('wheel'));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
 
-    setScrollerGeometry(scroller, {
-      clientHeight: 100,
-      scrollHeight: 500,
-      scrollTop: 40,
+        expect(asked).toContain('before');
+      } finally {
+        restoreLayout();
+      }
     });
-    scroller.getBoundingClientRect = () => createRect({ top: 0, bottom: 100, height: 100 });
-    let anchorDocumentTop = 60;
-    anchor.getBoundingClientRect = () => {
-      const top = anchorDocumentTop - scroller.scrollTop;
-      return createRect({ top, bottom: top + 20, height: 20 });
-    };
-
-    vi.useFakeTimers();
-    try {
-      act(() => {
-        scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -20, bubbles: true }));
-      });
-      expect(onBoundaryIntent).toHaveBeenCalledWith('before', expect.objectContaining({
-        prepareViewportForPresentationCommit: expect.any(Function),
-      }));
-
-      scroller.scrollTop = 80;
-      let preparationSettled = false;
-      const preparation = Promise.resolve(prepareViewportForPresentationCommit?.()).then(result => {
-        preparationSettled = true;
-        return result;
-      });
-
-      act(() => {
-        vi.advanceTimersByTime(319);
-        scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -20, bubbles: true }));
-        vi.advanceTimersByTime(319);
-      });
-      await Promise.resolve();
-      expect(preparationSettled).toBe(false);
-
-      await act(async () => {
-        vi.advanceTimersByTime(1);
-        expect(await preparation).not.toBe(false);
-      });
-
-      const extendedItems = ['turn-1', 'turn-2', ...initialItems.map(item => item.turnId)].map(createItem);
-      act(() => {
-        anchorDocumentTop = 120;
-        root.render(
-          <VirtualMessageList
-            items={extendedItems}
-            presentationMode="history-window"
-            historyWindow={{
-              startOrdinal: 0,
-              endOrdinalExclusive: 7,
-              targetTurnId: 'turn-5',
-              mode: 'history-window',
-            }}
-            presentationRevision={2}
-            historyBoundaryState={{ before: 'loading', after: 'idle' }}
-            onHistoryWindowBoundaryIntent={onBoundaryIntent}
-          />,
-        );
-        resolveBoundaryIntent?.(true);
-      });
-      await act(async () => {
-        await boundaryIntent;
-      });
-      flushAnimationFrame();
-      flushAnimationFrame();
-
-      expect(scroller.scrollTop).toBe(140);
-      expect(container.querySelector('[data-history-paging-sentinel="loading"]')).not.toBeNull();
-
-      act(() => {
-        root.render(
-          <VirtualMessageList
-            items={extendedItems}
-            presentationMode="history-window"
-            historyWindow={{
-              startOrdinal: 0,
-              endOrdinalExclusive: 7,
-              targetTurnId: 'turn-5',
-              mode: 'history-window',
-            }}
-            presentationRevision={2}
-            historyBoundaryState={{ before: 'idle', after: 'idle' }}
-            onHistoryWindowBoundaryIntent={onBoundaryIntent}
-          />,
-        );
-      });
-      expect(container.querySelector('[data-history-paging-sentinel]')).toBeNull();
-    } finally {
-      vi.useRealTimers();
-    }
   });
 
-  it('releases the visible element anchor when an adjacent history request is not handled', async () => {
-    const onBoundaryIntent = vi.fn(async () => false);
-    stateMocks.activeSession = createSession('session-a', 'turn-10');
-    const initialItems = ['turn-3', 'turn-4', 'turn-5', 'turn-6', 'turn-7'].map(createItem);
-    stateMocks.virtualItems = initialItems;
-
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          items={initialItems}
-          presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 2,
-            endOrdinalExclusive: 7,
-            targetTurnId: 'turn-5',
-            mode: 'history-window',
-          }}
-          presentationRevision={1}
-          historyBoundaryState={{ before: 'idle', after: 'idle' }}
-          onHistoryWindowBoundaryIntent={onBoundaryIntent}
-        />,
-      );
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-testid="virtuoso"]');
-    const anchor = container.querySelector<HTMLElement>('[data-turn-id="turn-3"]');
-    expect(scroller).not.toBeNull();
-    expect(anchor).not.toBeNull();
-    if (!scroller || !anchor) return;
-
-    for (let frame = 0; frame < 8 && rafCallbacks.length > 0; frame += 1) {
-      flushAnimationFrame();
-    }
-
-    setScrollerGeometry(scroller, {
-      clientHeight: 100,
-      scrollHeight: 500,
-      scrollTop: 40,
-    });
-    scroller.getBoundingClientRect = () => createRect({ top: 0, bottom: 100, height: 100 });
-    let anchorDocumentTop = 60;
-    anchor.getBoundingClientRect = () => {
-      const top = anchorDocumentTop - scroller.scrollTop;
-      return createRect({ top, bottom: top + 20, height: 20 });
-    };
-
-    act(() => {
-      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -20, bubbles: true }));
-    });
-    await act(async () => {
-      await Promise.resolve();
-    });
-    expect(onBoundaryIntent).toHaveBeenCalledWith('before', expect.objectContaining({
-      prepareViewportForPresentationCommit: expect.any(Function),
-    }));
-
-    scroller.scrollTop = 80;
-    anchorDocumentTop = 60;
-    flushAnimationFrame();
-
-    expect(scroller.scrollTop).toBe(80);
-  });
-
-  it('reports every turn intersecting the readable viewport in DOM order', () => {
-    stateMocks.setVisibleTurnInfo.mockImplementation((info: unknown) => {
-      stateMocks.visibleTurnInfo = info;
-    });
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    stateMocks.virtualItems = [
-      createItem('turn-a'),
-      createModelItem('turn-a'),
-      createItem('turn-b'),
-      createModelItem('turn-b'),
-    ];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const renderedItems = Array.from(
-      container.querySelectorAll<HTMLElement>('.virtual-item-wrapper[data-turn-id]'),
-    );
-    expect(scroller).not.toBeNull();
-    expect(renderedItems).toHaveLength(4);
-    if (!scroller || renderedItems.length !== 4) return;
-
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 300,
-      height: 300,
-    }));
-    const itemRects = [
-      { top: 0, bottom: 50 },
-      { top: 50, bottom: 150 },
-      { top: 150, bottom: 210 },
-      { top: 210, bottom: 280 },
-    ];
-    renderedItems.forEach((item, index) => {
-      const rect = itemRects[index];
-      vi.spyOn(item, 'getBoundingClientRect').mockReturnValue(createRect({
-        top: rect.top,
-        bottom: rect.bottom,
-        height: rect.bottom - rect.top,
-      }));
-    });
-
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
-    }
-
-    expect(stateMocks.setVisibleTurnInfo).toHaveBeenLastCalledWith(expect.objectContaining({
-      turnId: 'turn-a',
-      visibleTurnIds: ['turn-a', 'turn-b'],
-    }));
-    const publishCount = stateMocks.setVisibleTurnInfo.mock.calls.length;
-
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-    for (let frame = 0; frame < 4; frame += 1) {
-      flushAnimationFrame();
-    }
-
-    expect(stateMocks.setVisibleTurnInfo).toHaveBeenCalledTimes(publishCount);
-  });
-
-  it('transfers collapse space to a sticky pin in one reservation state', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 1_583, floorPx: 181 },
-      pin: {
-        kind: 'pin' as const,
-        px: 0,
-        floorPx: 0,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-    const nextPin = {
-      ...currentState.pin,
-      px: 559,
-      floorPx: 559,
-    };
-
-    expect(transferCollapseReservationToPin(currentState, nextPin)).toEqual({
-      collapse: { kind: 'collapse', px: 0, floorPx: 0 },
-      pin: nextPin,
-    });
-  });
-
-  it('transfers a released pin into a protected viewport range', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 12, floorPx: 4 },
-      pin: {
-        kind: 'pin' as const,
-        px: 100,
-        floorPx: 100,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-
-    expect(transferPinReservationToProtectedCollapse(currentState)).toEqual({
-      collapse: { kind: 'collapse', px: 112, floorPx: 104 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    });
-  });
-
-  it('invalidates pending turn pin work by generation, session, and target', () => {
-    const request = {
-      generation: 7,
-      sessionId: 'session-a',
-      turnId: 'turn-a',
-    };
-
-    expect(isTurnPinRequestIdentityCurrent(request, request)).toBe(true);
-    expect(isTurnPinRequestIdentityCurrent(request, {
-      ...request,
-      generation: 8,
-    })).toBe(false);
-    expect(isTurnPinRequestIdentityCurrent(request, {
-      ...request,
-      sessionId: 'session-b',
-    })).toBe(false);
-    expect(isTurnPinRequestIdentityCurrent(request, {
-      ...request,
-      turnId: 'turn-b',
-    })).toBe(false);
-  });
-
-  it('drops a provisional sticky pin on user intent without protecting its range', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 12, floorPx: 4 },
-      pin: {
-        kind: 'pin' as const,
-        px: 3_780,
-        floorPx: 0,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-
-    expect(releasePinReservationForUserNavigation(currentState, {
-      preserveCurrentRange: true,
-      ownsElementAnchor: false,
-    })).toEqual({
-      collapse: currentState.collapse,
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    });
-  });
-
-  it('protects an established sticky pin range when user intent exits it', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 12, floorPx: 4 },
-      pin: {
-        kind: 'pin' as const,
-        px: 100,
-        floorPx: 100,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-
-    expect(releasePinReservationForUserNavigation(currentState, {
-      preserveCurrentRange: true,
-      ownsElementAnchor: true,
-    })).toEqual(transferPinReservationToProtectedCollapse(currentState));
-  });
-
-  it('keeps unresolved sticky pin fallback reservation idempotent and viewport-bounded', () => {
-    expect(resolveProvisionalStickyPinReservationPx({
-      scrollHeight: 3_803,
-      clientHeight: 1_023,
-      currentPinPx: 0,
-    })).toBe(1_023);
-    expect(resolveProvisionalStickyPinReservationPx({
-      scrollHeight: 4_826,
-      clientHeight: 1_023,
-      currentPinPx: 1_023,
-    })).toBe(1_023);
-    expect(resolveProvisionalStickyPinReservationPx({
-      scrollHeight: 6_583,
-      clientHeight: 1_023,
-      currentPinPx: 5_560,
-    })).toBe(1_023);
-
-    expect(clampPinReservationPxToViewport(640, 1_023)).toBe(640);
-    expect(clampPinReservationPxToViewport(2_780, 1_023)).toBe(1_023);
-  });
-
-  it('clears only expired provisional sticky pins without an element anchor', () => {
-    const pinReservation = {
-      kind: 'pin' as const,
-      px: 2_780,
-      floorPx: 0,
-      mode: 'sticky-latest' as const,
-      targetTurnId: 'turn-a',
-    };
-    const baseOptions = {
-      requestTurnId: 'turn-a',
-      requestPinMode: 'sticky-latest' as const,
-      pinReservation,
-      ownsElementAnchor: false,
-    };
-
-    expect(shouldClearExpiredProvisionalStickyPin(baseOptions)).toBe(true);
-    expect(shouldClearExpiredProvisionalStickyPin({
-      ...baseOptions,
-      ownsElementAnchor: true,
-    })).toBe(false);
-    expect(shouldClearExpiredProvisionalStickyPin({
-      ...baseOptions,
-      pinReservation: { ...pinReservation, floorPx: 200 },
-    })).toBe(false);
-    expect(shouldClearExpiredProvisionalStickyPin({
-      ...baseOptions,
-      requestTurnId: 'turn-b',
-    })).toBe(false);
-  });
-
-  it('protects a settled element range from later unsignaled shrink reconciliation', () => {
-    const settledState = settleCollapseReservationForViewport({
-      collapse: { kind: 'collapse', px: 1_022, floorPx: 670 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    }, {
-      scrollTop: 686,
-      scrollHeight: 2_030,
-      clientHeight: 1_023,
-    });
-    expect(settledState.collapse).toEqual({
-      kind: 'collapse',
-      px: 702,
-      floorPx: 702,
-    });
-
-    const settledPinnedRange = settleCollapseReservationForViewport({
-      collapse: { kind: 'collapse', px: 152.7, floorPx: 67.7 },
-      pin: {
-        kind: 'pin',
-        px: 674.6,
-        floorPx: 674.6,
-        mode: 'sticky-latest',
-        targetTurnId: 'turn-a',
-      },
-    }, {
-      scrollTop: 5_122,
-      scrollHeight: 6_235,
-      clientHeight: 1_027,
-    });
-    expect(settledPinnedRange.collapse.px).toBeCloseTo(67.7, 1);
-    expect(settledPinnedRange.collapse.floorPx).toBeCloseTo(67.7, 1);
-
-    const protectedState = protectCurrentCollapseReservation({
-      collapse: { kind: 'collapse', px: 784, floorPx: 670 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    });
-
-    expect(protectedState.collapse).toEqual({
-      kind: 'collapse',
-      px: 784,
-      floorPx: 784,
-    });
-    expect(reconcileUnsignaledShrinkReservation(protectedState, 2).collapse).toEqual({
-      kind: 'collapse',
-      px: 784,
-      floorPx: 784,
-    });
-    expect(reconcileUnsignaledShrinkReservation({
-      ...protectedState,
-      collapse: { kind: 'collapse', px: 784, floorPx: 0 },
-    }, 2).collapse).toEqual({
-      kind: 'collapse',
-      px: 2,
-      floorPx: 0,
-    });
-    expect(reconcileUnsignaledShrinkReservation({
-      ...protectedState,
-      collapse: { kind: 'collapse', px: 0, floorPx: 0 },
-    }, 907.333, false).collapse).toEqual({
-      kind: 'collapse',
-      px: 0,
-      floorPx: 0,
-    });
-    expect(reconcileUnsignaledShrinkReservation({
-      ...protectedState,
-      collapse: { kind: 'collapse', px: 0, floorPx: 0 },
-    }, 907.333, true).collapse).toEqual({
-      kind: 'collapse',
-      px: 907.333,
-      floorPx: 0,
-    });
-  });
-
-  it('extends and protects collapse range needed to restore a captured scroll position', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 111.5, floorPx: 0 },
-      pin: {
-        kind: 'pin' as const,
-        px: 0,
-        floorPx: 0,
-        mode: 'transient' as const,
-        targetTurnId: null,
-      },
-    };
-
-    const ensured = ensureCollapseReservationForScrollTop(currentState, {
-      targetScrollTop: 933.33,
-      scrollHeight: 1_897,
-      clientHeight: 1_023,
-    });
-
-    expect(ensured.collapse.px).toBeCloseTo(171.83, 2);
-    expect(ensured.collapse.floorPx).toBeCloseTo(171.83, 2);
-  });
-
-  it('does not synchronously shrink surplus collapse range while retaining an anchor', () => {
-    const retained = ensureCollapseReservationForScrollTop({
-      collapse: { kind: 'collapse', px: 205.85, floorPx: 0 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    }, {
-      targetScrollTop: 1_003.33,
-      scrollHeight: 2_242,
-      clientHeight: 1_023,
-    });
-
-    expect(retained).toEqual({
-      collapse: { kind: 'collapse', px: 205.85, floorPx: 0 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    });
-  });
-
-  it('does not reserve a viewport merely to keep scrollTop zero reachable', () => {
-    const retained = ensureCollapseReservationForScrollTop({
-      collapse: { kind: 'collapse', px: 559.49, floorPx: 559.49 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    }, {
-      targetScrollTop: 0,
-      scrollHeight: 1_023,
-      clientHeight: 1_023,
-    });
-
-    expect(retained.collapse).toEqual({
-      kind: 'collapse',
-      px: 559.49,
-      floorPx: 559.49,
-    });
-    expect(settleRetainedCollapseReservationForAnchor(retained, {
-      targetScrollTop: 0,
-      scrollHeight: 1_023,
-      clientHeight: 1_023,
-    }).collapse).toEqual({
-      kind: 'collapse',
-      px: 0,
-      floorPx: 0,
-    });
-  });
-
-  it('settles retained collapse estimates to the physical range required by the anchor', () => {
-    const settled = settleRetainedCollapseReservationForAnchor({
-      collapse: { kind: 'collapse', px: 1_669.04813, floorPx: 559.48962 },
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    }, {
-      targetScrollTop: 662,
-      scrollHeight: 3_354,
-      clientHeight: 1_023,
-    });
-
-    expect(settled.collapse.px).toBeCloseTo(1.04813, 4);
-    expect(settled.collapse.floorPx).toBeCloseTo(1.04813, 4);
-  });
-
-  it('drains a sticky pin floor only from measured content growth', () => {
-    const currentState = {
-      collapse: { kind: 'collapse' as const, px: 20, floorPx: 0 },
-      pin: {
-        kind: 'pin' as const,
-        px: 100,
-        floorPx: 100,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-
-    expect(consumeBottomReservationForContentGrowth(currentState, 35, true)).toEqual({
-      collapse: { kind: 'collapse', px: 0, floorPx: 0 },
-      pin: {
-        ...currentState.pin,
-        px: 85,
-        floorPx: 85,
-      },
-    });
-    expect(consumeBottomReservationForContentGrowth(currentState, 35, false)).toEqual({
-      collapse: { kind: 'collapse', px: 0, floorPx: 0 },
-      pin: currentState.pin,
-    });
-    expect(consumeBottomReservationForContentGrowth(currentState, 35, true, true)).toEqual({
-      collapse: currentState.collapse,
-      pin: {
-        ...currentState.pin,
-        px: 65,
-        floorPx: 65,
-      },
-    });
-
-    expect(consumeBottomReservationForContentGrowth({
-      ...currentState,
-      collapse: { kind: 'collapse', px: 30, floorPx: 20 },
-    }, 25, false)).toEqual({
-      collapse: { kind: 'collapse', px: 5, floorPx: 5 },
-      pin: currentState.pin,
-    });
-  });
-
-  it('syncs the physical bottom only for a real viewport-height change', () => {
-    expect(shouldSyncPhysicalBottom({
-      viewportHeightChanged: true,
-      collapseProtectionActive: false,
-      wasAtPhysicalBottom: true,
-      ownsElementAnchor: true,
-      isFollowingTail: false,
-    })).toBe(false);
-    expect(shouldSyncPhysicalBottom({
-      viewportHeightChanged: true,
-      collapseProtectionActive: false,
-      wasAtPhysicalBottom: true,
-      ownsElementAnchor: false,
-      isFollowingTail: false,
-    })).toBe(true);
-    expect(shouldSyncPhysicalBottom({
-      viewportHeightChanged: true,
-      collapseProtectionActive: false,
-      wasAtPhysicalBottom: true,
-      ownsElementAnchor: false,
-      isFollowingTail: true,
-    })).toBe(false);
-    expect(shouldSyncPhysicalBottom({
-      viewportHeightChanged: false,
-      collapseProtectionActive: false,
-      wasAtPhysicalBottom: true,
-      ownsElementAnchor: false,
-      isFollowingTail: false,
-    })).toBe(false);
-  });
-
-  it('suppresses only negative virtualizer compensation while following the streaming tail', () => {
-    expect(shouldSuppressFollowingTailNegativeScrollBy({
-      requestedTop: -242,
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      wasAtPhysicalBottom: true,
-    })).toBe(true);
-    expect(shouldSuppressFollowingTailNegativeScrollBy({
-      requestedTop: 36,
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      wasAtPhysicalBottom: true,
-    })).toBe(false);
-    expect(shouldSuppressFollowingTailNegativeScrollBy({
-      requestedTop: -242,
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      wasAtPhysicalBottom: false,
-    })).toBe(false);
-    expect(shouldSuppressFollowingTailNegativeScrollBy({
-      requestedTop: -242,
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-      wasAtPhysicalBottom: true,
-    })).toBe(false);
-  });
-
-  it('recognizes only a non-user physical-bottom clamp from a shrinking scroll range', () => {
-    const clampGeometry = {
-      previousGeometry: {
-        scrollTop: 645.3333129882812,
-        scrollHeight: 1_673,
-        clientHeight: 1_027,
-      },
-      currentGeometry: {
-        scrollTop: 402.6666564941406,
-        scrollHeight: 1_430,
-        clientHeight: 1_027,
-      },
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      hasRecentUserUpwardIntent: false,
-      scrollbarPointerInteractionActive: false,
-      collapseProtectionActive: false,
-    };
-
-    const recovery = resolveFollowingTailShrinkClampRecovery(clampGeometry);
-    expect(recovery?.targetScrollTop).toBe(645.3333129882812);
-    expect(recovery?.rangeShrinkPx).toBe(243);
-    expect(recovery?.scrollClampPx).toBeCloseTo(242.6666564941406, 10);
-    expect(resolveFollowingTailShrinkClampRecovery({
-      ...clampGeometry,
-      hasRecentUserUpwardIntent: true,
-    })).toBeNull();
-    expect(resolveFollowingTailShrinkClampRecovery({
-      ...clampGeometry,
-      isFollowingOutput: false,
-    })).toBeNull();
-    expect(resolveFollowingTailShrinkClampRecovery({
-      ...clampGeometry,
-      currentGeometry: {
-        ...clampGeometry.currentGeometry,
-        scrollTop: 500,
-      },
-    })).toBeNull();
-    expect(resolveFollowingTailShrinkClampRecovery({
-      ...clampGeometry,
-      currentGeometry: {
-        ...clampGeometry.currentGeometry,
-        clientHeight: 900,
-      },
-    })).toBeNull();
-  });
-
-  it('cancels unsettled sticky pin growth only for unsignaled height corrections', () => {
-    expect(getCanceledUnsettledStickyPinGrowthPx({
-      pendingGrowthPx: 207,
-      shrinkPx: 207,
-      hasActiveCollapseIntent: false,
-    })).toBe(207);
-    expect(getCanceledUnsettledStickyPinGrowthPx({
-      pendingGrowthPx: 207,
-      shrinkPx: 55,
-      hasActiveCollapseIntent: false,
-    })).toBe(55);
-    expect(getCanceledUnsettledStickyPinGrowthPx({
-      pendingGrowthPx: 207,
-      shrinkPx: 207,
-      hasActiveCollapseIntent: true,
-    })).toBe(0);
-  });
-
-  it('settles sticky pin growth as soon as it exhausts the remaining pin floor', () => {
-    expect(resolveStickyPinGrowthSettlementStrategy({
-      pendingGrowthPx: 0,
-      pinFloorPx: 11.77,
-      hasActiveCollapseIntent: false,
-    })).toBe('none');
-    expect(resolveStickyPinGrowthSettlementStrategy({
-      pendingGrowthPx: 10,
-      pinFloorPx: 11.77,
-      hasActiveCollapseIntent: false,
-    })).toBe('wait-for-quiet');
-    expect(resolveStickyPinGrowthSettlementStrategy({
-      pendingGrowthPx: 126,
-      pinFloorPx: 11.77,
-      hasActiveCollapseIntent: true,
-    })).toBe('wait-for-collapse');
-    expect(resolveStickyPinGrowthSettlementStrategy({
-      pendingGrowthPx: 126,
-      pinFloorPx: 11.77,
-      hasActiveCollapseIntent: false,
-    })).toBe('settle-now');
-  });
-
-  it('selects an explicit settlement strategy for each collapse viewport owner', () => {
-    const stickyReservation = {
-      collapse: { kind: 'collapse' as const, px: 152.7, floorPx: 67.7 },
-      pin: {
-        kind: 'pin' as const,
-        px: 674.6,
-        floorPx: 674.6,
-        mode: 'sticky-latest' as const,
-        targetTurnId: 'turn-a',
-      },
-    };
-
-    expect(resolveCollapseIntentSettlementStrategy({
-      coordinatorMode: 'pinned-item',
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-      reservation: stickyReservation,
-    })).toBe('reconcile-sticky-pin');
-    expect(resolveCollapseIntentSettlementStrategy({
-      coordinatorMode: 'following-tail',
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      reservation: stickyReservation,
-    })).toBe('retain-following-tail');
-    expect(resolveCollapseIntentSettlementStrategy({
-      coordinatorMode: 'preserving-element',
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-      reservation: stickyReservation,
-    })).toBe('settle-preserved-element');
-    expect(resolveCollapseIntentSettlementStrategy({
-      coordinatorMode: 'idle',
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-      reservation: stickyReservation,
-    })).toBe('settle-protected-viewport');
-    expect(resolveCollapseIntentSettlementStrategy({
-      coordinatorMode: 'idle',
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-      reservation: {
-        ...stickyReservation,
-        collapse: { ...stickyReservation.collapse, floorPx: 0 },
-      },
-    })).toBe('drain');
-  });
-
-  it('lets known streaming collapses reconcile without bypassing active intents', () => {
-    expect(shouldBypassShrinkCompensationInTailFollow({
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      hasActiveCollapseIntent: false,
-    })).toBe(true);
-    expect(shouldBypassShrinkCompensationInTailFollow({
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-      hasActiveCollapseIntent: true,
-    })).toBe(false);
-  });
-
-  it('recovers the last stable scroll position when an auto collapse arrives after clamp', () => {
-    expect(resolveAutoCollapseAnchorScrollTop({
-      currentScrollTop: 1127.33,
-      previousStableScrollTop: 1302.67,
-      reason: 'auto',
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-    })).toBe(1302.67);
-    expect(resolveAutoCollapseAnchorScrollTop({
-      currentScrollTop: 1127.33,
-      previousStableScrollTop: 1302.67,
-      reason: 'manual',
-      isFollowingOutput: true,
-      isStreamingOutput: true,
-    })).toBe(1127.33);
-    expect(resolveAutoCollapseAnchorScrollTop({
-      currentScrollTop: 1127.33,
-      previousStableScrollTop: 1302.67,
-      reason: 'auto',
-      isFollowingOutput: false,
-      isStreamingOutput: true,
-    })).toBe(1127.33);
-  });
-
-  it('resets viewport-local at-bottom state when the active session changes', () => {
-    stateMocks.activeSession = createSession('session-a', 'turn-a');
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(container.querySelector('[data-testid="scroll-to-latest"]')?.getAttribute('data-visible')).toBe('true');
-
-    stateMocks.activeSession = createSession('session-b', 'turn-b');
-    stateMocks.virtualItems = [createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(container.querySelector('[data-testid="scroll-to-latest"]')?.getAttribute('data-visible')).toBe('false');
-  });
-
-  it('resumes tail follow when a mounted streaming session receives its initial items', () => {
-    const session = createSession('session-a', 'turn-a');
-    session.dialogTurns[0].status = 'processing';
-    session.dialogTurns[0].modelRounds = [{
-      id: 'round-turn-a',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof session.dialogTurns[number]['modelRounds'][number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = [];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-    virtuosoMocks.scrollerScrollTo.mockClear();
-
-    stateMocks.virtualItems = [createItem('turn-a'), createModelItem('turn-a')];
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(virtuosoMocks.scrollerScrollTo).toHaveBeenCalledWith(expect.objectContaining({
-      behavior: 'auto',
-    }));
-  });
-
-  it('restores a following-tail collapse anchor when delayed measurement clamps scrollTop', () => {
-    const session = createSession('session-a', 'turn-a');
-    session.dialogTurns[0].status = 'processing';
-    session.dialogTurns[0].modelRounds = [{
-      id: 'round-turn-a',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof session.dialogTurns[number]['modelRounds'][number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = [createItem('turn-a'), createModelItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const anchor = container.querySelector<HTMLElement>('[data-turn-id="turn-a"]');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(anchor).not.toBeNull();
-    if (!scroller || !footer || !anchor) {
-      return;
-    }
-
-    let contentHeight = 2_076;
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => contentHeight + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 1_100 },
-    });
-    const footerHeightBeforeCollapse = Number.parseFloat(footer.style.height);
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    act(() => {
-      window.dispatchEvent(new CustomEvent('flowchat:tool-card-collapse-intent', {
-        detail: {
-          toolId: 'tool-a',
-          toolName: 'Write',
-          cardHeight: 200,
-          anchorElement: anchor,
-          reason: 'auto',
-        },
-      }));
-    });
-    expect(Number.parseFloat(footer.style.height)).toBeCloseTo(
-      footerHeightBeforeCollapse + 100,
-      2,
-    );
-
-    contentHeight -= 250;
-    scroller.scrollTop = 1_050;
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    expect(scroller.scrollTop).toBe(1_100);
-    expect(Number.parseFloat(footer.style.height)).toBeCloseTo(
-      footerHeightBeforeCollapse + 151,
-      2,
-    );
-  });
-
-  it('recovers a late following-tail shrink clamp after collapse protection was released', () => {
-    flowDiagnosticsMocks.enabled = true;
-    const session = createSession('session-a', 'turn-a');
-    session.dialogTurns[0].status = 'processing';
-    session.dialogTurns[0].modelRounds = [{
-      id: 'round-turn-a',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof session.dialogTurns[number]['modelRounds'][number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = [createItem('turn-a'), createModelItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    if (!scroller || !footer) {
-      return;
-    }
-
-    let contentHeight = 2_076;
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => contentHeight + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 0 },
-    });
-    const footerHeightBeforeClamp = Number.parseFloat(footer.style.height);
-    const stableScrollTop = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = stableScrollTop;
-    act(() => {
-      window.dispatchEvent(new Event('resize'));
-    });
-
-    contentHeight -= 250;
-    scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    expect(scroller.scrollTop).toBe(stableScrollTop);
-    expect(Number.parseFloat(footer.style.height)).toBeCloseTo(
-      footerHeightBeforeClamp + 251,
-      2,
-    );
-    expect(flowDiagnosticsMocks.trace).toHaveBeenCalledWith(expect.objectContaining({
-      location: 'VirtualMessageList.handleScroll',
-      message: 'Following-tail shrink clamp recovered as a viewport transaction',
-    }));
-  });
-
-  it('retains following-tail collapse protection after the animation finalizer', () => {
-    flowDiagnosticsMocks.enabled = true;
-    const session = createSession('session-a', 'turn-a');
-    session.dialogTurns[0].status = 'processing';
-    session.dialogTurns[0].modelRounds = [{
-      id: 'round-turn-a',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof session.dialogTurns[number]['modelRounds'][number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = [createItem('turn-a'), createModelItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const anchor = container.querySelector<HTMLElement>('[data-turn-id="turn-a"]');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(anchor).not.toBeNull();
-    if (!scroller || !footer || !anchor) {
-      return;
-    }
-
-    let contentHeight = 2_076;
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => contentHeight + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 1_100 },
-    });
-    const footerHeightBeforeCollapse = Number.parseFloat(footer.style.height);
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    vi.useFakeTimers();
-    try {
-      act(() => {
-        window.dispatchEvent(new CustomEvent('flowchat:tool-card-collapse-intent', {
-          detail: {
-            toolId: 'tool-a',
-            toolName: 'Write',
-            cardHeight: 200,
-            anchorElement: anchor,
-            reason: 'auto',
-          },
-        }));
-      });
-      expect(Number.parseFloat(footer.style.height)).toBeCloseTo(
-        footerHeightBeforeCollapse + 100,
-        2,
-      );
-
-      rafCallbacks = [];
-      act(() => {
-        vi.advanceTimersByTime(300);
-      });
-      for (let frame = 0; frame < 4; frame += 1) {
-        flushAnimationFrame();
-      }
-      const provisionalFooterHeight = Number.parseFloat(footer.style.height);
-      expect(provisionalFooterHeight).toBeCloseTo(
-        footerHeightBeforeCollapse + 100,
-        2,
-      );
-      const findRetainTrace = () => flowDiagnosticsMocks.trace.mock.calls.find(([event]) => (
-        event.location === 'VirtualMessageList.retainCollapseRangeForQuietSettlement'
-      ));
-      if (!findRetainTrace()) {
-        act(() => {
-          vi.advanceTimersByTime(1_000);
-        });
-      }
-      expect(findRetainTrace()).toBeDefined();
-
-      act(() => {
-        vi.advanceTimersByTime(120);
-      });
-      for (let frame = 0; frame < 4; frame += 1) {
-        flushAnimationFrame();
-      }
-      const settledFooterHeight = Number.parseFloat(footer.style.height);
-      const settleTrace = flowDiagnosticsMocks.trace.mock.calls.find(([event]) => (
-        event.location === 'VirtualMessageList.settleRetainedCollapseRange'
-      ));
-      expect(settleTrace).toBeDefined();
-      expect(settledFooterHeight).toBeLessThan(provisionalFooterHeight);
-      expect(scroller.scrollTop).toBe(1_100);
-
-      stateMocks.activeSession = {
-        ...session,
-        dialogTurns: session.dialogTurns.map(turn => ({
-          ...turn,
-          status: 'completed',
-          modelRounds: turn.modelRounds.map(round => ({
-            ...round,
-            status: 'completed',
-            isStreaming: false,
-          })),
-        })),
-      };
-      act(() => {
-        root.render(<VirtualMessageList />);
-      });
-      expect(Number.parseFloat(footer.style.height)).toBeCloseTo(settledFooterHeight, 2);
-
-      contentHeight -= 250;
-      scroller.scrollTop = 1_050;
-      act(() => {
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-
-      expect(scroller.scrollTop).toBe(1_100);
-      expect(Number.parseFloat(footer.style.height)).toBeGreaterThan(settledFooterHeight);
-
-      act(() => {
-        vi.advanceTimersByTime(120);
-      });
-      for (let frame = 0; frame < 4; frame += 1) {
-        flushAnimationFrame();
-      }
-      const wasSettledAnchorReleased = () => flowDiagnosticsMocks.trace.mock.calls.some(([event]) => (
-        event.location === 'VirtualMessageList.releaseSettledCollapseAnchor'
-      ));
-      for (let attempt = 0; attempt < 3 && !wasSettledAnchorReleased(); attempt += 1) {
-        act(() => {
-          vi.runOnlyPendingTimers();
-        });
-        for (let frame = 0; frame < 4; frame += 1) {
-          flushAnimationFrame();
-        }
-      }
-      expect(wasSettledAnchorReleased()).toBe(true);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('keeps the initial Virtuoso position when background updates arrive after an upward scroll', () => {
-    let nowMs = 1_000;
-    const nowSpy = vi.spyOn(performance, 'now').mockImplementation(() => nowMs);
-
-    try {
-      stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-        isHistorical: false,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: true,
-      });
-      stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-      act(() => {
-        root.render(<VirtualMessageList />);
-      });
-
-      const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-      expect(scroller).not.toBeNull();
-      if (!scroller) {
-        return;
-      }
-
-      setScrollerGeometry(scroller, {
-        scrollHeight: 5_000,
-        clientHeight: 1_000,
-        scrollTop: 4_000,
-      });
-
-      act(() => {
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-
-      act(() => {
-        scroller.dispatchEvent(new WheelEvent('wheel', {
-          deltaY: -720,
-          bubbles: true,
-        }));
-        scroller.scrollTop = 1_800;
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-      flushAnimationFrame();
-      expect(scroller.scrollTop).toBe(1_800);
-
-      nowMs = 2_000;
-      stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b', 'turn-c'], {
-        isHistorical: false,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: true,
-      });
-      stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b'), createItem('turn-c')];
-
-      act(() => {
-        root.render(<VirtualMessageList />);
-      });
-
-      expect(scroller.scrollTop).toBe(1_800);
-    } finally {
-      nowSpy.mockRestore();
-    }
-  });
-
-  it('materializes an unrendered turn with an immediate auto index jump', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from(
-      { length: 24 },
-      (_, index) => `turn-${String(index + 1).padStart(2, '0')}`,
-    );
-    const targetTurnId = 'turn-02';
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds);
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 40, end: 48 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-    setScrollerGeometry(scroller, {
-      scrollHeight: 6_000,
-      clientHeight: 1_000,
-      scrollTop: 4_000,
-    });
-
-    expect(
-      container.querySelector(
-        `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-      ),
-    ).toBeNull();
-    virtuosoMocks.scrollToIndex.mockClear();
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus(targetTurnId, {
-        behavior: 'smooth',
-        pinMode: 'transient',
-      }) ?? 'rejected';
-    });
-
-    expect(status).toBe('pending');
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      index: 2,
-      align: 'start',
-      behavior: 'auto',
-    }));
-    expect(virtuosoMocks.increaseViewportBy).toEqual({
-      top: 2_000,
-      bottom: 2_000,
-    });
-
-    const target = container.querySelector<HTMLElement>(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    );
-    expect(target).not.toBeNull();
-    if (!target) {
-      return;
-    }
-
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    const targetDocumentTop = 4_500;
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = targetDocumentTop - scroller.scrollTop;
-      return createRect({
-        top,
-        bottom: top + 40,
-        height: 40,
-      });
-    });
-
-    flushAnimationFrame();
-    flushAnimationFrame();
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(scroller.scrollTop).toBe(4_443);
-    expect(target.getBoundingClientRect().top).toBe(57);
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledTimes(1);
-    expect(virtuosoMocks.increaseViewportBy).toEqual({
-      top: 600,
-      bottom: 600,
-    });
-  });
-
-  it('materializes the first turn before pinning when it is outside the rendered range', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from(
-      { length: 9 },
-      (_, index) => `turn-${String(index + 1).padStart(2, '0')}`,
-    );
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds);
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 12, end: 18 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    expect(virtuosoMocks.initialTopMostItemIndexHistory).toContainEqual({
-      index: 17,
-      align: 'end',
-    });
-    expect(virtuosoMocks.initialTopMostItemIndex).toBeUndefined();
-    expect(container.querySelector(
-      '[data-turn-id="turn-01"][data-item-type="user-message"]',
-    )).toBeNull();
-    virtuosoMocks.scrollToIndex.mockClear();
-    const navigationRenderStart = virtuosoMocks.initialTopMostItemIndexHistory.length;
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus('turn-01', {
-        behavior: 'auto',
-        pinMode: 'transient',
-      }) ?? 'rejected';
-    });
-
-    expect(status).toBe('pending');
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      index: 0,
-      align: 'start',
-      behavior: 'auto',
-    }));
-    expect(virtuosoMocks.initialTopMostItemIndex).toBeUndefined();
-    const navigationInitialPositionProps =
-      virtuosoMocks.initialTopMostItemIndexHistory.slice(navigationRenderStart);
-    expect(navigationInitialPositionProps.length).toBeGreaterThan(0);
-    expect(navigationInitialPositionProps.every(value => value === undefined)).toBe(true);
-    expect(container.querySelector(
-      '[data-turn-id="turn-01"][data-item-type="user-message"]',
-    )).not.toBeNull();
-  });
-
-  it('settles best-effort navigation at the natural maximum without pin footer space', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const target = container.querySelector<HTMLElement>(
-      '[data-turn-id="turn-b"][data-item-type="user-message"]',
-    );
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(target).not.toBeNull();
-    if (!scroller || !footer || !target) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 1_200,
-      clientHeight: 1_000,
-      scrollTop: 0,
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = 900 - scroller.scrollTop;
-      return createRect({ top, bottom: top + 40, height: 40 });
-    });
-    const footerHeightBefore = footer.style.height;
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus('turn-b', {
-        behavior: 'auto',
-        pinMode: 'transient',
-        alignmentPolicy: 'best-effort',
-      }) ?? 'rejected';
-    });
-
-    expect(status).toBe('settled');
-    expect(scroller.scrollTop).toBe(200);
-    expect(footer.style.height).toBe(footerHeightBefore);
-    expect(target.getBoundingClientRect().top).toBeGreaterThan(57);
-  });
-
-  it('keeps sticky-latest exact even when a best-effort policy is supplied', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    const latestTurn = stateMocks.activeSession.dialogTurns[1];
-    latestTurn.status = 'processing';
-    latestTurn.modelRounds = [{
-      id: 'round-turn-b',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof latestTurn.modelRounds[number]];
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const target = container.querySelector<HTMLElement>(
-      '[data-turn-id="turn-b"][data-item-type="user-message"]',
-    );
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(target).not.toBeNull();
-    if (!scroller || !footer || !target) {
-      return;
-    }
-
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => 1_200 + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 200 },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = 700 - scroller.scrollTop;
-      return createRect({ top, bottom: top + 40, height: 40 });
-    });
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus('turn-b', {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-        alignmentPolicy: 'best-effort',
-      }) ?? 'rejected';
-    });
-
-    expect(status).toBe('settled');
-    expect(Number.parseFloat(footer.style.height)).toBeGreaterThan(0);
-    expect(target.getBoundingClientRect().top).toBe(57);
-  });
-
-  it('uses a prepared turn only for the initial Virtuoso mount', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = ['turn-01', 'turn-02', 'turn-03'];
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds);
-    stateMocks.virtualItems = [];
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-    act(() => {
-      listRef.current?.prepareTurnPinToTop('turn-02', {
-        behavior: 'auto',
-        pinMode: 'transient',
-      });
-    });
-
-    virtuosoMocks.initialTopMostItemIndexHistory = [];
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    expect(virtuosoMocks.initialTopMostItemIndexHistory).toContainEqual({
-      index: 2,
-      align: 'start',
-    });
-    expect(virtuosoMocks.initialTopMostItemIndex).toBeUndefined();
-  });
-
-  it('keeps the existing sticky range while a distant turn is materialized', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from({ length: 24 }, (_, index) => `turn-${String(index + 1).padStart(2, '0')}`);
-    const latestTurnId = turnIds[turnIds.length - 1];
-    const targetTurnId = turnIds[1];
-    const session = createSessionWithTurns('session-a', turnIds);
-    const latestTurn = session.dialogTurns[session.dialogTurns.length - 1];
-    latestTurn.status = 'processing';
-    latestTurn.modelRounds = [{
-      id: `round-${latestTurnId}`,
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof latestTurn.modelRounds[number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 40, end: 48 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const latestTarget = container.querySelector<HTMLElement>(
-      `[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`,
-    );
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(latestTarget).not.toBeNull();
-    if (!scroller || !footer || !latestTarget) {
-      return;
-    }
-
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => 1_200 + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 200 },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    const latestTargetDocumentTop = 700;
-    vi.spyOn(latestTarget, 'getBoundingClientRect').mockImplementation(() => {
-      const top = latestTargetDocumentTop - scroller.scrollTop;
-      return createRect({ top, bottom: top + 40, height: 40 });
-    });
-
-    let latestPinStatus: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      latestPinStatus = listRef.current?.pinTurnToTopWithStatus(latestTurnId, {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-      }) ?? 'rejected';
-    });
-    expect(latestPinStatus).toBe('settled');
-    const stickyFooterHeight = Number.parseFloat(footer.style.height);
-    expect(stickyFooterHeight).toBeGreaterThan(0);
-
-    virtuosoMocks.scrollToIndex.mockClear();
-    let targetPinStatus: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      targetPinStatus = listRef.current?.pinTurnToTopWithStatus(targetTurnId, {
-        behavior: 'auto',
-        pinMode: 'transient',
-      }) ?? 'rejected';
-    });
-
-    expect(targetPinStatus).toBe('pending');
-    expect(Number.parseFloat(footer.style.height)).toBe(stickyFooterHeight);
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      align: 'start',
-      behavior: 'auto',
-    }));
-
-    const target = container.querySelector<HTMLElement>(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    );
-    expect(target).not.toBeNull();
-    if (!target) {
-      return;
-    }
-    const targetDocumentTop = 800;
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = targetDocumentTop - scroller.scrollTop;
-      return createRect({ top, bottom: top + 40, height: 40 });
-    });
-
-    act(() => {
-      virtuosoMocks.rangeChanged?.();
-    });
-
-    expect(target.getBoundingClientRect().top).toBe(57);
-    expect(Number.parseFloat(footer.style.height)).toBeGreaterThan(0);
-  });
-
-  it('routes turn navigation through Virtuoso while the initial snapshot is visible', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from({ length: 8 }, (_, index) => `turn-${index}`);
-    const targetTurnId = 'turn-1';
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds, {
-      contextRestoreState: 'pending',
-      isPartial: true,
-      historyState: 'ready',
-    });
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 12, end: 16 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-    expect(container.querySelector('[data-initial-history-snapshot="true"]')).not.toBeNull();
-    virtuosoMocks.scrollToIndex.mockClear();
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus(targetTurnId, {
-        behavior: 'smooth',
-        pinMode: 'transient',
-      }) ?? 'rejected';
-    });
-
-    expect(status).toBe('pending');
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      index: 2,
-      align: 'start',
-      behavior: 'auto',
-    }));
-    expect(container.querySelector('[data-history-projection-handoff="true"]')?.getAttribute(
-      'data-target-turn-id',
-    )).toBe(targetTurnId);
-  });
-
-  it('releases the initial snapshot after Virtuoso renders readable target content', () => {
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-      contextRestoreState: 'pending',
-      isPartial: true,
-      historyState: 'ready',
-    });
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-    expect(container.querySelector('[data-initial-history-snapshot="true"]')).not.toBeNull();
-
-    const scroller = container.querySelector<HTMLElement>('[data-testid="virtuoso"]');
-    const target = scroller?.querySelector<HTMLElement>(
-      '[data-turn-id="turn-b"][data-item-type="user-message"]',
-    );
-    expect(scroller).not.toBeNull();
-    expect(target).not.toBeNull();
-    if (!scroller || !target) {
-      return;
-    }
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    vi.spyOn(target, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 200,
-      bottom: 240,
-      width: 400,
-      height: 40,
-    }));
-    Object.defineProperty(target, 'innerText', {
-      configurable: true,
-      value: 'turn-b',
-    });
-
-    for (let frame = 0; frame < 5; frame += 1) {
-      flushAnimationFrame();
-    }
-
-    expect(container.querySelector('[data-initial-history-snapshot="true"]')).toBeNull();
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-  });
-
-  it('does not render an initial projection handoff over a history-window presentation', () => {
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-      contextRestoreState: 'pending',
-      isPartial: true,
-      historyState: 'ready',
-    });
-    const tailItems = [createItem('turn-a'), createItem('turn-b')];
-    stateMocks.virtualItems = tailItems;
-
-    act(() => {
-      root.render(<VirtualMessageList items={tailItems} />);
-    });
-    expect(container.querySelector('[data-history-projection-handoff="true"]')).not.toBeNull();
-
-    const historyItems = [
-      createItem('turn-a'),
-      createModelItem('turn-a'),
-      createItem('turn-b'),
-      createModelItem('turn-b'),
-    ];
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          items={historyItems}
-          presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 0,
-            endOrdinalExclusive: 2,
-            targetTurnId: 'turn-a',
-            mode: 'history-window',
-          }}
-          presentationRevision={1}
-        />,
-      );
-    });
-
-    expect(container.querySelector('[data-history-projection-handoff="true"]')).toBeNull();
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-  });
-
-  it('does not let a canceled pending sticky pin RAF restore provisional footer space', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from(
-      { length: 24 },
-      (_, index) => `turn-${String(index + 1).padStart(2, '0')}`,
-    );
-    const latestTurnId = turnIds[turnIds.length - 1];
-    const session = createSessionWithTurns('session-a', turnIds);
-    const latestTurn = session.dialogTurns[session.dialogTurns.length - 1];
-    latestTurn.status = 'processing';
-    latestTurn.modelRounds = [{
-      id: `round-${latestTurnId}`,
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof latestTurn.modelRounds[number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 0, end: 4 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    if (!scroller || !footer) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 5_000,
-      clientHeight: 1_000,
-      scrollTop: 0,
-    });
-    const baselineFooterHeight = Number.parseFloat(footer.style.height);
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus(latestTurnId, {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-      }) ?? 'rejected';
-    });
-    expect(status).toBe('pending');
-    expect(Number.parseFloat(footer.style.height)).toBeGreaterThan(baselineFooterHeight);
-    expect(Number.parseFloat(footer.style.height) - baselineFooterHeight)
-      .toBeLessThanOrEqual(scroller.clientHeight);
-
-    const target = container.querySelector<HTMLElement>(
-      `[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`,
-    );
-    expect(target).not.toBeNull();
-    if (!target) {
-      return;
-    }
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    vi.spyOn(target, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 4_500,
-      bottom: 4_540,
-      height: 40,
-    }));
-
-    act(() => {
-      scroller.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    expect(Number.parseFloat(footer.style.height)).toBe(baselineFooterHeight);
-
-    flushAnimationFrame();
-    expect(Number.parseFloat(footer.style.height)).toBe(baselineFooterHeight);
-  });
-
-  it('releases a settled sticky pin at stream end even when its target is no longer rendered', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const session = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    const latestTurn = session.dialogTurns[session.dialogTurns.length - 1];
-    latestTurn.status = 'processing';
-    latestTurn.modelRounds = [{
-      id: 'round-turn-b',
-      status: 'streaming',
-      isStreaming: true,
-      items: [],
-      startTime: 1,
-    } as typeof latestTurn.modelRounds[number]];
-    stateMocks.activeSession = session;
-    stateMocks.virtualItems = ['turn-a', 'turn-b'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    const footer = container.querySelector<HTMLElement>('.message-list-footer');
-    const target = container.querySelector<HTMLElement>(
-      '[data-turn-id="turn-b"][data-item-type="user-message"]',
-    );
-    expect(scroller).not.toBeNull();
-    expect(footer).not.toBeNull();
-    expect(target).not.toBeNull();
-    if (!scroller || !footer || !target) {
-      return;
-    }
-
-    Object.defineProperties(scroller, {
-      clientHeight: { configurable: true, value: 1_000 },
-      scrollHeight: {
-        configurable: true,
-        get: () => 1_200 + (Number.parseFloat(footer.style.height) || 0),
-      },
-      scrollTop: { configurable: true, writable: true, value: 200 },
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 1_000,
-      height: 1_000,
-    }));
-    const targetDocumentTop = 700;
-    vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-      const top = targetDocumentTop - scroller.scrollTop;
-      return createRect({ top, bottom: top + 40, height: 40 });
-    });
-
-    let status: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      status = listRef.current?.pinTurnToTopWithStatus('turn-b', {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-      }) ?? 'rejected';
-    });
-    expect(status).toBe('settled');
-    expect(scroller.scrollTop).toBe(643);
-    const footerHeightBeforeStreamEnd = Number.parseFloat(footer.style.height);
-    expect(footerHeightBeforeStreamEnd).toBe(443);
-
-    const release = vi.spyOn(FlowChatViewportCoordinator.prototype, 'release');
-    virtuosoMocks.renderedRange = { start: 0, end: 2 };
-    stateMocks.activeSession = {
-      ...session,
-      dialogTurns: session.dialogTurns.map(turn => turn.id === latestTurn.id
-        ? {
-          ...turn,
-          status: 'completed',
-          modelRounds: turn.modelRounds.map(round => ({
-            ...round,
-            status: 'completed',
-            isStreaming: false,
-          })),
-        }
-        : turn),
-    };
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    expect(container.querySelector(
-      '[data-turn-id="turn-b"][data-item-type="user-message"]',
-    )).toBeNull();
-    expect(release).toHaveBeenCalledWith('stream-end-pinned-item');
-    expect(Number.parseFloat(footer.style.height)).toBe(footerHeightBeforeStreamEnd);
-  });
-
-  it('centers the exact text range when navigating to a search match', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b']);
-    stateMocks.virtualItems = [
-      createItem('turn-a'),
-      {
-        ...createItem('turn-b'),
-        data: {
-          ...createItem('turn-b').data,
-          content: 'prefix needle suffix',
-        },
-      },
-    ];
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 2_000,
-      clientHeight: 500,
-      scrollTop: 0,
-    });
-    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-      top: 0,
-      bottom: 500,
-      height: 500,
-    }));
-    Object.defineProperty(Range.prototype, 'getBoundingClientRect', {
-      configurable: true,
-      value: vi.fn(() => createRect({
-        top: 800,
-        bottom: 820,
-        height: 20,
-      })),
-    });
-    virtuosoMocks.scrollToIndex.mockClear();
-
-    act(() => {
-      listRef.current?.scrollToSearchMatch({
-        virtualItemIndex: 1,
-        query: 'needle',
-      });
-    });
-    flushAnimationFrame();
-
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      align: 'center',
-      behavior: 'auto',
-    }));
-    expect(scroller.scrollTop).toBe(560);
-    delete (Range.prototype as Range & {
-      getBoundingClientRect?: () => DOMRect;
-    }).getBoundingClientRect;
-  });
-
-  it('keeps the initial snapshot bounded while search navigation uses Virtuoso', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from({ length: 8 }, (_, index) => `turn-${index}`);
-    const targetTurnId = 'turn-1';
-    const latestTurnId = 'turn-7';
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds, {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-    });
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 12, end: 16 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const initialSnapshot = container.querySelector<HTMLElement>('[data-initial-history-snapshot="true"]');
-    expect(initialSnapshot).not.toBeNull();
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-    expect(initialSnapshot?.querySelectorAll('.virtual-item-wrapper').length)
-      .toBeLessThan(stateMocks.virtualItems.length);
-    expect(initialSnapshot?.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).toBeNull();
-    expect(initialSnapshot?.querySelector(
-      `[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).toBeNull();
-    virtuosoMocks.scrollToIndex.mockClear();
-
-    act(() => {
-      listRef.current?.scrollToSearchMatch({
-        virtualItemIndex: 2,
-        query: targetTurnId,
-      });
-    });
-
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      index: 2,
-      align: 'center',
-      behavior: 'auto',
-    }));
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-  });
-
-  it('keeps Virtuoso navigation stable while an initial snapshot handoff is active', () => {
-    let nowMs = 1_000;
-    const nowSpy = vi.spyOn(performance, 'now').mockImplementation(() => nowMs);
-    const listRef = React.createRef<VirtualMessageListRef>();
-
-    try {
-      stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-        isHistorical: false,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: true,
-      });
-      stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-      act(() => {
-        root.render(<VirtualMessageList ref={listRef} />);
-      });
-
-      const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-      const target = container.querySelector<HTMLElement>('[data-turn-id="turn-a"][data-item-type="user-message"]');
-      expect(scroller).not.toBeNull();
-      expect(target).not.toBeNull();
-      if (!scroller || !target) {
-        return;
-      }
-
-      setScrollerGeometry(scroller, {
-        scrollHeight: 5_000,
-        clientHeight: 1_000,
-        scrollTop: 4_000,
-      });
-      Object.defineProperty(scroller, 'scrollTo', {
-        configurable: true,
-        value: vi.fn((options?: ScrollToOptions) => {
-          if (typeof options?.top === 'number') {
-            scroller.scrollTop = options.top;
-          }
-        }),
-      });
-      vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue(createRect({
-        top: 40,
-        bottom: 1_040,
-        height: 1_000,
-      }));
-      const targetDocumentTop = 2_800;
-      vi.spyOn(target, 'getBoundingClientRect').mockImplementation(() => {
-        const top = targetDocumentTop - scroller.scrollTop;
-        return createRect({
-          top,
-          bottom: top + 40,
-          height: 40,
-        });
-      });
-
-      act(() => {
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-
-      stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b', 'turn-c'], {
-        isHistorical: false,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: true,
-      });
-      stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b'), createItem('turn-c')];
-      setScrollerGeometry(scroller, {
-        scrollHeight: 5_200,
-        clientHeight: 1_000,
-      });
-
-      act(() => {
-        root.render(<VirtualMessageList ref={listRef} />);
-      });
-
-      expect(scroller.scrollTop).toBe(4_000);
-
-      let didPin = false;
-      act(() => {
-        didPin = listRef.current?.pinTurnToTop('turn-a', { behavior: 'auto' }) ?? false;
-      });
-
-      expect(didPin).toBe(true);
-      const pinnedScrollTop = scroller.scrollTop;
-      expect(pinnedScrollTop).toBe(2_703);
-      expect(target.getBoundingClientRect().top).toBe(97);
-
-      expect(rafCallbacks.length).toBeGreaterThan(0);
-      for (let frame = 0; frame < 4; frame += 1) {
-        nowMs += 16;
-        flushAnimationFrame();
-        expect(scroller.scrollTop).toBe(pinnedScrollTop);
-      }
-    } finally {
-      nowSpy.mockRestore();
-    }
-  });
-
-  it('keeps latest reachable after Virtuoso materializes an older turn during snapshot handoff', () => {
-    const listRef = React.createRef<VirtualMessageListRef>();
-    const onUserScrollIntent = vi.fn();
-    const turnIds = Array.from({ length: 8 }, (_, index) => `turn-${index}`);
-    const targetTurnId = 'turn-1';
-    const latestTurnId = 'turn-7';
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds, {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-    });
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 12, end: 16 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} onUserScrollIntent={onUserScrollIntent} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-
-    Object.defineProperty(scroller, 'clientHeight', {
-      configurable: true,
-      value: 1_000,
-    });
-    Object.defineProperty(scroller, 'scrollHeight', {
-      configurable: true,
-      get: () => (
-        container.querySelector(`[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`)
-          ? 12_000
-          : 9_000
-      ),
-    });
-    scroller.scrollTop = 11_000;
-    Object.defineProperty(scroller, 'scrollTo', {
-      configurable: true,
-      value: vi.fn((options?: ScrollToOptions) => {
-        if (typeof options?.top === 'number') {
-          scroller.scrollTop = options.top;
-        }
-      }),
-    });
-
-    expect(container.querySelector(`[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`)).toBeNull();
-    expect(container.querySelector(`[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`)).not.toBeNull();
-
-    let pinStatus: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      pinStatus = listRef.current?.pinTurnToTopWithStatus(targetTurnId, {
-        behavior: 'auto',
-      }) ?? 'rejected';
-    });
-
-    expect(pinStatus).toBe('pending');
-    expect(scroller.scrollTop).toBe(11_000);
-    expect(container.querySelector(`[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`)).not.toBeNull();
-    expect(container.querySelector(
-      `[data-testid="virtuoso"] [data-turn-id="${latestTurnId}"][data-item-type="user-message"]`,
-    )).toBeNull();
-
-    act(() => {
-      container.querySelector<HTMLElement>('[data-testid="scroll-to-latest"]')?.dispatchEvent(
-        new MouseEvent('click', { bubbles: true }),
-      );
-    });
-
-    expect(onUserScrollIntent).toHaveBeenCalledTimes(1);
-    expect(scroller.scrollTop).toBe(11_000);
-  });
-
-  it('keeps a Virtuoso history pin when materialization reports the old bottom first', () => {
+  it('prepares history navigation without manufacturing bottom range', () => {
     const listRef = React.createRef<VirtualMessageListRef>();
-    const turnIds = Array.from({ length: 8 }, (_, index) => `turn-${index}`);
-    const targetTurnId = 'turn-1';
-    const latestTurnId = 'turn-7';
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', turnIds, {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-    });
-    stateMocks.virtualItems = turnIds.flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-    virtuosoMocks.renderedRange = { start: 12, end: 16 };
-
-    act(() => {
-      root.render(<VirtualMessageList ref={listRef} />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 6_275,
-      clientHeight: 1_027,
-      scrollTop: 5_248,
-    });
-    const scrollTo = vi.fn((options?: ScrollToOptions) => {
-      if (options?.behavior !== 'smooth' && typeof options?.top === 'number') {
-        scroller.scrollTop = options.top;
-      }
-    });
-    Object.defineProperty(scroller, 'scrollTo', {
-      configurable: true,
-      value: scrollTo,
-    });
-
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).toBeNull();
-    expect(container.querySelector(
-      `[data-turn-id="${latestTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-
-    let pinStatus: ReturnType<VirtualMessageListRef['pinTurnToTopWithStatus']> = 'rejected';
-    act(() => {
-      pinStatus = listRef.current?.pinTurnToTopWithStatus(targetTurnId, {
-        behavior: 'smooth',
-      }) ?? 'rejected';
-    });
-
-    expect(pinStatus).toBe('pending');
-    expect(virtuosoMocks.scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({
-      index: 2,
-      align: 'start',
-      behavior: 'auto',
-    }));
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-
-    // The browser clamps the old bottom position when the target window is
-    // materialized, before the smooth scroll animation has moved the pane.
-    setScrollerGeometry(scroller, {
-      scrollHeight: 2_693,
-      clientHeight: 1_027,
-      scrollTop: 1_666,
-    });
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-
-    // A real downward user gesture is still allowed to return to the latest
-    // window once the pane reaches its physical bottom.
-    act(() => {
-      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: 120, bubbles: true }));
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    expect(container.querySelector(
-      `[data-turn-id="${targetTurnId}"][data-item-type="user-message"]`,
-    )).not.toBeNull();
-  });
-
-  it('keeps the initial Virtuoso position when footer height changes after an upward scroll', () => {
-    let nowMs = 1_000;
-    const nowSpy = vi.spyOn(performance, 'now').mockImplementation(() => nowMs);
-
-    try {
-      stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-        isHistorical: false,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: true,
-      });
-      stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-      act(() => {
-        root.render(<VirtualMessageList />);
-      });
-
-      const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-      expect(scroller).not.toBeNull();
-      if (!scroller) {
-        return;
-      }
-
-      setScrollerGeometry(scroller, {
-        scrollHeight: 5_000,
-        clientHeight: 1_000,
-        scrollTop: 4_000,
-      });
-
-      act(() => {
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-
-      act(() => {
-        scroller.dispatchEvent(new WheelEvent('wheel', {
-          deltaY: -720,
-          bubbles: true,
-        }));
-        scroller.scrollTop = 1_800;
-        scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      });
-      flushAnimationFrame();
-      expect(scroller.scrollTop).toBe(1_800);
-
-      nowMs = 2_000;
-      inputStateMocks.isActive = true;
-      inputStateMocks.inputHeight = 320;
-      setScrollerGeometry(scroller, {
-        scrollHeight: 5_320,
-        clientHeight: 1_000,
-      });
-
-      act(() => {
-        root.render(<VirtualMessageList />);
-      });
-
-      expect(scroller.scrollTop).toBe(1_800);
-    } finally {
-      nowSpy.mockRestore();
-    }
-  });
-
-  it('does not let the initial snapshot become a collapse scroll writer', () => {
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b'], {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-    });
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 5_000,
-      clientHeight: 1_000,
-      scrollTop: 4_000,
-    });
-
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-      window.dispatchEvent(new CustomEvent('flowchat:tool-card-collapse-intent', {
-        detail: {
-          toolId: 'tool-a',
-          cardHeight: 300,
-          reason: 'test-collapse',
-        },
-      }));
-    });
-    setScrollerGeometry(scroller, {
-      scrollHeight: 5_300,
-      clientHeight: 1_000,
-      scrollTop: 4_000,
-    });
-
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a', 'turn-b', 'turn-c'], {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-    });
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b'), createItem('turn-c')];
-    setScrollerGeometry(scroller, {
-      scrollHeight: 5_600,
-      clientHeight: 1_000,
-    });
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(scroller.scrollTop).toBe(4_000);
-  });
-
-  it('does not expose stale history projection handoff snapshots across sessions', () => {
-    const snapshot = {
-      sessionId: 'session-a',
-      reason: 'session-open',
-      createdAtMs: 1,
-      items: [createItem('turn-a')],
-      mode: 'bottom-tail',
-      targetTurnId: 'turn-a',
-      footerHeightPx: 0,
-    } as const;
-
-    expect(activeSessionHistoryProjectionHandoff(snapshot, 'session-a')).toBe(snapshot);
-    expect(activeSessionHistoryProjectionHandoff(snapshot, 'session-b')).toBeNull();
-    expect(activeSessionHistoryProjectionHandoff(snapshot, null)).toBeNull();
-    expect(activeSessionHistoryProjectionHandoff(null, 'session-a')).toBeNull();
-  });
-
-  it('does not request full history projection for ordinary upward reading scroll', () => {
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(true);
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a'], {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'older loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-        {
-          id: 'turn-b',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-b', content: 'latest loaded prompt', timestamp: 2 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 2,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).toHaveBeenCalledWith('session-a', 'wheel-up');
-  });
-
-  it('paginates partial history through Virtuoso after upward intent', () => {
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(true);
-    flowStoreMocks.revealPreviousSessionHistoryWindow.mockReturnValue(true);
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-3', 'turn-4', 'turn-5'], {
-      isHistorical: true,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 6,
-    });
-    stateMocks.virtualItems = ['turn-3', 'turn-4', 'turn-5'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    expect(container.querySelector('[data-testid="virtuoso"]')).not.toBeNull();
-    expect(container.querySelector('[data-initial-history-snapshot="true"]')).not.toBeNull();
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-
-    expect(container.querySelector('[data-initial-history-snapshot="true"]')).toBeNull();
-    expect(container.querySelector('[data-turn-id="turn-3"]')).not.toBeNull();
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).toHaveBeenCalledWith('session-a', 'wheel-up');
-
-    stateMocks.activeSession = createSessionWithTurns(
-      'session-a',
-      ['turn-0', 'turn-1', 'turn-2', 'turn-3', 'turn-4', 'turn-5'],
-      {
-        isHistorical: true,
-        historyState: 'ready',
-        contextRestoreState: 'pending',
-        isPartial: false,
-        loadedTurnCount: 6,
-        totalTurnCount: 6,
-      },
-    );
-    stateMocks.virtualItems = ['turn-0', 'turn-1', 'turn-2', 'turn-3', 'turn-4', 'turn-5'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    expect(container.querySelector('[data-turn-id="turn-3"]')).not.toBeNull();
-    expect(container.querySelector('[data-history-paging-sentinel]')).toBeNull();
-  });
-
-  it('waits until the Virtuoso history boundary is near before starting pagination', () => {
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(true);
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-3', 'turn-4', 'turn-5'], {
-      isHistorical: true,
-      historyState: 'ready',
-      contextRestoreState: 'pending',
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 6,
-    });
-    stateMocks.virtualItems = ['turn-3', 'turn-4', 'turn-5'].flatMap(turnId => [
-      createItem(turnId),
-      createModelItem(turnId),
-    ]);
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (!scroller) {
-      return;
-    }
-
-    setScrollerGeometry(scroller, {
-      scrollHeight: 5_000,
-      clientHeight: 1_000,
-      scrollTop: 2_000,
-    });
-
-    act(() => {
-      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -120, bubbles: true }));
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-
-    scroller.scrollTop = 1_000;
-    act(() => {
-      scroller.dispatchEvent(new Event('scroll', { bubbles: true }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).toHaveBeenCalledWith('session-a', 'scroll-near-partial-history-boundary');
-  });
-
-  it('does not reveal previous history for upward scroll away from the history boundary', () => {
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(true);
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'older loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-        {
-          id: 'turn-b',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-b', content: 'latest loaded prompt', timestamp: 2 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 2,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a'), createItem('turn-b')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector<HTMLElement>('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    if (scroller) {
-      scroller.scrollTop = 2000;
-    }
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-    expect(container.querySelector('[data-history-boundary-status]')).toBeNull();
-  });
-
-  it('requests an adjacent Turn window for catalog-backed tail history', async () => {
-    const onHistoryWindowBoundaryIntent = vi.fn(async (
-      _direction: 'before' | 'after',
-      _options?: {
-        prepareViewportForPresentationCommit?: () => boolean | void | Promise<boolean | void>;
-      },
-    ) => {
-      return true;
-    });
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 1,
-      totalTurnCount: 20,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-a',
-        revision: 'catalog-1',
-        totalTurnCount: 20,
-        complete: true,
-        entries: Array.from({ length: 20 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          turnId: `turn-${ordinal + 1}`,
-          preview: `Prompt ${ordinal + 1}`,
-          previewTruncated: false,
-        })),
-      },
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'latest loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(
-        <VirtualMessageList onHistoryWindowBoundaryIntent={onHistoryWindowBoundaryIntent} />,
-      );
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(onHistoryWindowBoundaryIntent).toHaveBeenCalledWith('before', expect.objectContaining({
-      prepareViewportForPresentationCommit: expect.any(Function),
-    }));
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-    expect(flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint).not.toHaveBeenCalled();
-  });
-
-  it('treats an exhausted catalog boundary as complete without showing a not-ready error', async () => {
-    const onHistoryWindowBoundaryIntent = vi.fn(async () => 'exhausted' as const);
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 1,
-      totalTurnCount: 1,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-a',
-        revision: 'catalog-1',
-        totalTurnCount: 1,
-        complete: true,
-        entries: [{
-          ordinal: 0,
-          storageTurnIndex: 0,
-          turnId: 'turn-a',
-          preview: 'Prompt 1',
-          previewTruncated: false,
-        }],
-      },
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(
-        <VirtualMessageList onHistoryWindowBoundaryIntent={onHistoryWindowBoundaryIntent} />,
-      );
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(onHistoryWindowBoundaryIntent).toHaveBeenCalledOnce();
-    expect(container.querySelector('[data-history-boundary-status]')).toBeNull();
-  });
-
-  it('releases a pending catalog boundary transaction when returning from history to tail', () => {
-    const pendingBoundary = new Promise<'applied'>(() => {});
-    const onHistoryWindowBoundaryIntent = vi.fn(() => pendingBoundary);
-    stateMocks.activeSession = createSessionWithTurns('session-a', ['turn-a'], {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      loadedTurnCount: 1,
-      totalTurnCount: 2,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-a',
-        revision: 'catalog-1',
-        totalTurnCount: 2,
-        complete: true,
-        entries: Array.from({ length: 2 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          turnId: `turn-${ordinal + 1}`,
-          preview: `Prompt ${ordinal + 1}`,
-          previewTruncated: false,
-        })),
-      },
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          presentationMode="tail"
-          onHistoryWindowBoundaryIntent={onHistoryWindowBoundaryIntent}
-        />,
-      );
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(onHistoryWindowBoundaryIntent).toHaveBeenCalledOnce();
-
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          presentationMode="history-window"
-          historyWindow={{
-            startOrdinal: 0,
-            endOrdinalExclusive: 2,
-            targetTurnId: null,
-            mode: 'history-window',
-          }}
-          onHistoryWindowBoundaryIntent={onHistoryWindowBoundaryIntent}
-        />,
-      );
-    });
-    act(() => {
-      root.render(
-        <VirtualMessageList
-          presentationMode="tail"
-          onHistoryWindowBoundaryIntent={onHistoryWindowBoundaryIntent}
-        />,
-      );
-    });
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-    expect(onHistoryWindowBoundaryIntent).toHaveBeenCalledTimes(2);
-  });
-
-  it('surfaces a not-ready boundary state when a deferred history window cannot be revealed', () => {
-    flowStoreMocks.hasDeferredSessionHistoryProjection.mockReturnValue(true);
-    flowStoreMocks.revealPreviousSessionHistoryWindow.mockReturnValue(false);
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'latest loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).toHaveBeenCalledWith('session-a', 'wheel-up');
-    expect(container.querySelector('[data-history-boundary-status="not-ready"]')?.textContent).toBe('Older history is not ready yet.');
-  });
-
-  it('starts background cache preparation for ordinary upward scroll before deferred cache is ready', () => {
-    flowStoreMocks.hasPendingSessionHistoryCompletion.mockReturnValue(true);
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'latest loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-    expect(flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint).toHaveBeenCalledWith('session-a', {
-      immediate: true,
-      reason: 'wheel-up',
-    });
-    expect(container.querySelector('[data-history-boundary-status="preparing"]')?.textContent).toBe('Preparing older history...');
-  });
-
-  it('surfaces a not-ready boundary state when older history work is unavailable', () => {
-    stateMocks.activeSession = createSession('session-a', 'turn-a', {
-      isHistorical: false,
-      historyState: 'ready',
-      contextRestoreState: 'ready',
-      isPartial: true,
-      dialogTurns: [
-        {
-          id: 'turn-a',
-          sessionId: 'session-a',
-          userMessage: { id: 'user-turn-a', content: 'latest loaded prompt', timestamp: 1 },
-          modelRounds: [],
-          status: 'completed',
-          startTime: 1,
-        },
-      ],
-    });
-    stateMocks.virtualItems = [createItem('turn-a')];
-
-    act(() => {
-      root.render(<VirtualMessageList />);
-    });
-
-    const scroller = container.querySelector('[data-virtuoso-scroller="true"]');
-    expect(scroller).not.toBeNull();
-
-    act(() => {
-      scroller?.dispatchEvent(new WheelEvent('wheel', {
-        deltaY: -120,
-        bubbles: true,
-      }));
-    });
-    flushAnimationFrame();
-    flushAnimationFrame();
-
-    expect(flowStoreMocks.revealPreviousSessionHistoryWindow).not.toHaveBeenCalled();
-    expect(flowStoreMocks.releaseSessionHistoryCompletionAfterInitialPaint).not.toHaveBeenCalled();
-    expect(container.querySelector('[data-history-boundary-status="not-ready"]')?.textContent).toBe('Older history is not ready yet.');
+    act(() => root.render(<VirtualMessageList ref={listRef} />));
+    expect(listRef.current?.prepareTurnNavigation('turn-2')).toBe('pending');
+    expect(container.querySelector('.message-list-footer')?.getAttribute('style')).toContain('168px');
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
index 39a53c8838..4646f91388 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -1,222 +1,123 @@
 /**
- * Virtualized message list.
- * Renders a flattened DialogTurn stream (user messages + model rounds).
+ * Virtualized FlowChat transcript with natural browser scroll range.
  *
- * Scroll policy (simplified):
- * - The list preserves the current viewport by default.
- * - A new turn first pins the latest user message near the top for reading.
- * - Follow mode starts explicitly via "jump to latest", or automatically once
- *   the latest turn's streaming output grows enough to consume the sticky tail space.
- * - User upward scroll intent exits follow and cancels any pending auto-follow arm.
- * - "Scroll to latest" bar appears whenever the list is not at bottom.
+ * The list never manufactures tail space for turn alignment or layout
+ * preservation. Navigation is best-effort within the physical content range,
+ * card collapses reflow naturally, and useFlowChatFollowOutput is the only
+ * continuous writer that follows streaming output.
  */
 
-import React, { useRef, useState, useCallback, useEffect, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
-import {
-  Virtuoso,
-  VirtuosoHandle,
-  type Components,
-  type ContextProp,
-} from 'react-virtuoso';
-import { useTranslation } from 'react-i18next';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { useActiveSessionState } from '../../hooks/useActiveSessionState';
-import { VirtualItemRenderer } from './VirtualItemRenderer';
-import { ScrollToLatestBar } from '../ScrollToLatestBar';
-import { ScrollToTurnHeaderButton } from '../ScrollToTurnHeaderButton';
 import { useScrollToTurnHeader } from '../../hooks/useScrollToTurnHeader';
-import { useVisibleTaskInfo } from '../../hooks/useVisibleTaskInfo';
-import { StickyTaskIndicator } from '../StickyTaskIndicator';
-import { RuntimeStatusSlot } from './RuntimeStatusSlot';
-import { useFlowChatFollowOutput } from './useFlowChatFollowOutput';
-import type { FlowChatPinTurnToTopMode } from '../../events/flowchatNavigation';
-import type { ActiveTurnRenderRange } from '../../types/flow-chat';
 import type { SessionHistoryWindowDirection } from '../../store/FlowChatStore';
-import { useVirtualItems, useActiveSession, useModernFlowChatStore, type VisibleTurnInfo, type VirtualItem } from '../../store/modernFlowChatStore';
-import { useChatInputState } from '../../store/chatInputStateStore';
-import {
-  computeFlowChatInputStackFooterPx,
-  FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX,
-} from '../../utils/flowChatScrollLayout';
-import {
-  findDialogTurn,
-  shouldUseStickyLatestPin,
-} from '../../utils/flowChatTurnScrollPolicy';
-import { flowChatStore } from '../../store/FlowChatStore';
-import { startupTrace } from '@/shared/utils/startupTrace';
-import { createLogger } from '@/shared/utils/logger';
-import { flowChatDiagnostics } from '@/infrastructure/diagnostics/flowChatDiagnostics';
 import {
-  estimateVirtualMessageItemHeight,
-  getLeadingVirtualItemIndexDelta,
-  getVirtualMessageDefaultItemHeight,
-  selectInitialHistoryRenderWindow,
-} from './virtualMessageListLayout';
+  FLOWCHAT_TURNS_ROLLED_BACK_EVENT,
+  type FlowChatTurnsRolledBackRequest,
+} from '../../events/flowchatNavigation';
 import {
-  activeSessionHistoryProjectionHandoff,
-  type HistoryProjectionHandoffSnapshot,
-} from './historyProjectionHandoff';
+  useActiveSession,
+  useModernFlowChatStore,
+  useVirtualItems,
+  type VirtualItem,
+} from '../../store/modernFlowChatStore';
+import { useChatInputState } from '../../store/chatInputStateStore';
+import type { ActiveTurnRenderRange } from '../../types/flow-chat';
+import { computeFlowChatInputStackFooterPx } from '../../utils/flowChatScrollLayout';
+import { ScrollToLatestBar } from '../ScrollToLatestBar';
+import { ScrollToTurnHeaderButton } from '../ScrollToTurnHeaderButton';
 import {
   findElementWithDataValue,
   findFlowChatSearchTextRanges,
   getFlowChatSearchTextRoot,
   setFlowChatSearchHighlight,
 } from './flowChatSearchDom';
+import { RuntimeStatusSlot } from './RuntimeStatusSlot';
+import { useFlowChatFollowOutput } from './useFlowChatFollowOutput';
+import { findRenderedTurnAnchorElement } from './flowChatViewportAnchor';
+import { useFlowChatViewportAnchor } from './useFlowChatViewportAnchor';
 import {
-  areBottomReservationStatesEqual,
-  clampPinReservationPxToViewport,
-  COMPENSATION_EPSILON_PX,
-  consumeBottomReservationForContentGrowth,
-  createInitialBottomReservationState,
-  ensureCollapseReservationForScrollTop,
-  getCanceledUnsettledStickyPinGrowthPx,
-  getReservationTotalPx,
-  isTurnPinRequestIdentityCurrent,
-  protectCurrentCollapseReservation,
-  reconcileUnsignaledShrinkReservation,
-  releasePinReservationForUserNavigation,
-  resolveAutoCollapseAnchorScrollTop,
-  resolveCollapseIntentSettlementStrategy,
-  resolveFollowingTailShrinkClampRecovery,
-  resolveProvisionalStickyPinReservationPx,
-  resolveStickyPinGrowthSettlementStrategy,
-  sanitizeBottomReservationState,
-  settleCollapseReservationForViewport,
-  settleRetainedCollapseReservationForAnchor,
-  shouldBypassShrinkCompensationInTailFollow,
-  shouldClearExpiredProvisionalStickyPin,
-  shouldSuppressFollowingTailNegativeScrollBy,
-  shouldSyncPhysicalBottom,
-  transferCollapseReservationToPin,
-  type BottomReservationState,
-  type PinBottomReservation,
-} from './flowChatScrollStability';
+  contentEndScrollTop,
+  FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX as AT_CONTENT_END_THRESHOLD_PX,
+  FLOWCHAT_TURN_TOP_GAP_PX,
+  isViewportAtTail,
+  tailSpacerPxForViewport,
+  turnTopAlignmentEntersReservedBlank,
+} from './flowChatTailFollow';
+import { useFlowChatVirtualizer } from './useFlowChatVirtualizer';
+import { useFlowChatViewportOwner } from './useFlowChatViewportOwner';
 import {
-  canHandoffPinnedItemToTail,
-  FlowChatViewportCoordinator,
-  type FlowChatViewportRangeHost,
-} from './FlowChatViewportCoordinator';
+  ONE_SHOT_NAVIGATION_HOLD_MS,
+  type FlowChatViewportOwner,
+} from './flowChatViewportOwnership';
+import { USER_DRIVEN_SCROLL_WINDOW_MS } from './flowChatViewportAnchor';
+import {
+  historyBoundariesForVisibleRange,
+  historyBoundariesReached,
+  type HistoryBoundaryProximity,
+} from './flowChatHistoryBoundary';
+import { VirtualItemRenderer } from './VirtualItemRenderer';
+import {
+  estimateVirtualMessageItemHeight,
+} from './virtualMessageListLayout';
+import { resolveVisibleFlowChatTurnIds } from './flowChatVisibleTurns';
+import { warnHistoryPagingRefusedWithPendingTurns } from '../../services/historySessionDiagnostics';
 import {
-  FLOWCHAT_AUTO_COLLAPSE_SETTLE_FRAMES,
-  FLOWCHAT_COLLAPSE_DURATION_MS,
-  FLOWCHAT_COLLAPSE_INTENT_TTL_MS,
-} from './flowChatCollapseMotion';
+  VIEWPORT_PLACEMENT_SETTLE_MS,
+  roundViewportPx,
+  traceViewport,
+  traceViewportPlacement,
+  traceViewportRepeating,
+} from '@/infrastructure/diagnostics/flowChatViewportDiagnostics';
+import { noteFlowListCommit } from '@/infrastructure/diagnostics/flowChatTailFollowDiagnostics';
 import './VirtualMessageList.scss';
 
-const log = createLogger('VirtualMessageList');
-
-const PINNED_TURN_VIEWPORT_OFFSET_PX = 57; // Keep in sync with `.message-list-header`.
-const TOUCH_SCROLL_INTENT_EXIT_THRESHOLD_PX = 6;
-const USER_UPWARD_SCROLL_INTENT_WINDOW_MS = 800;
-const LATEST_END_ANCHOR_STABILIZATION_MAX_ATTEMPTS = 120;
-const LATEST_END_ANCHOR_STABILIZATION_MIN_ATTEMPTS = 12;
-const LATEST_END_ANCHOR_STABLE_VISIBLE_FRAMES = 8;
-const LATEST_END_ANCHOR_VISIBILITY_MARGIN_PX = 4;
-const LATEST_END_ANCHOR_STABLE_EPSILON_PX = 1;
-const VIRTUOSO_FIRST_ITEM_INDEX_BASE = 1_000_000;
-const PARTIAL_HISTORY_INITIAL_TAIL_TURN_BUDGET = 16;
-const PARTIAL_HISTORY_FULL_PROJECTION_TOP_THRESHOLD_PX = 1200;
-const HISTORY_PROJECTION_HANDOFF_MAX_DURATION_MS = 5000;
-const TURN_PIN_REQUEST_TTL_MS = 5000;
-const TRANSIENT_TURN_PIN_STABLE_FRAME_COUNT = 2;
-const TRANSIENT_TURN_PIN_VIEWPORT_MULTIPLIER = 2;
-const SESSION_OPEN_HANDOFF_ITEM_BUDGET = 24;
-const PREVIOUS_HISTORY_BOUNDARY_STATUS_DURATION_MS = 2500;
 const SEARCH_NAVIGATION_MAX_ATTEMPTS = 24;
-const COLLAPSE_INTENT_TTL_MS = FLOWCHAT_COLLAPSE_INTENT_TTL_MS;
-const AUTO_COLLAPSE_SETTLE_FRAMES = FLOWCHAT_AUTO_COLLAPSE_SETTLE_FRAMES;
-const STICKY_PIN_GROWTH_SETTLE_MS = 300;
-const RETAINED_COLLAPSE_QUIET_SETTLE_MS = 120;
-const RETAINED_COLLAPSE_QUIET_SETTLE_FRAMES = 2;
-const RETAINED_COLLAPSE_RELEASE_QUIET_MS = COLLAPSE_INTENT_TTL_MS;
-const HISTORY_PRESENTATION_COMMIT_SCROLL_QUIET_MS = 320;
+/** Consecutive quiet frames that mark the opening viewport as settled. */
+const OPEN_REVEAL_QUIET_FRAMES = 2;
+/** Hard cap so the transcript is always revealed, settled or not. */
+const OPEN_REVEAL_MAX_FRAMES = 40;
+/**
+ * Quiet period after the last scroll event that stands in for `scrollend`.
+ *
+ * Only used where the event is missing. It has to outlast the gap between
+ * frames of a momentum scroll without making the snap back feel detached from
+ * the gesture that caused it.
+ */
+const SCROLL_SETTLE_FALLBACK_MS = 140;
+/**
+ * Resize callbacks over which a viewport resting at the end is re-aligned after
+ * the scroller's own box changes.
+ *
+ * One correction is not enough. A width change reflows every item, and a height
+ * change makes the virtualizer render a different number of them; either way it
+ * re-measures over the following passes, so the content end keeps moving after
+ * the first callback. The window closes on its own so that
+ * streaming content growth, which arrives through the same observer, never
+ * inherits it.
+ */
+const TAIL_REALIGN_RESIZE_CALLBACKS = 6;
+const HISTORY_WINDOW_DIRECTIONS: readonly SessionHistoryWindowDirection[] = ['before', 'after'];
 const IDLE_HISTORY_WINDOW_BOUNDARY_STATE: Record<
   SessionHistoryWindowDirection,
   'idle' | 'loading' | 'error'
 > = { before: 'idle', after: 'idle' };
 
-type FlowChatVirtuosoContext = {
-  footerRef: React.RefCallback<HTMLDivElement>;
-  previousHistoryBoundaryStatusNode: React.ReactNode;
-  nextHistoryBoundaryStatusNode: React.ReactNode;
-  runtimeStatusSessionId: string | null;
-};
-
-const FlowChatVirtuosoHeader = ({ context }: ContextProp<FlowChatVirtuosoContext>) => (
-  <>
-    <div className="message-list-header"  data-bf-component="virtual-message-list" data-bf-part="header"/>
-    {context.previousHistoryBoundaryStatusNode}
-  </>
-);
-
-const FlowChatHistoryPagingSentinel = ({
-  state,
-  label,
-}: {
-  state: 'idle' | 'loading' | 'error';
-  label: string;
-}) => (
-  <div
-    className="virtual-message-list__history-paging-sentinel"
-    data-history-paging-sentinel={state}
-    data-history-boundary-status={state === 'loading' ? 'preparing' : state === 'error' ? 'not-ready' : undefined}
-    aria-hidden={state === 'idle'}
-    role={state === 'idle' ? undefined : 'status'}
-    aria-live={state === 'idle' ? undefined : 'polite'}
-  >
-    {state === 'loading' ? (
-      <Loader2 size={14} aria-hidden className="virtual-message-list__history-paging-spinner" />
-    ) : null}
-    <span>{label}</span>
-  </div>
-);
-
-const FlowChatVirtuosoFooter = ({ context }: ContextProp<FlowChatVirtuosoContext>) => (
-  <div
-    ref={context.footerRef}
-    className="message-list-footer"
-    data-bf-component="virtual-message-list"
-    data-bf-part="footer"
-  >
-    {context.nextHistoryBoundaryStatusNode}
-    <RuntimeStatusSlot sessionId={context.runtimeStatusSessionId} placement="footer" />
-  </div>
-);
-
-const FLOW_CHAT_VIRTUOSO_COMPONENTS: Components<VirtualItem, FlowChatVirtuosoContext> = {
-  Header: FlowChatVirtuosoHeader,
-  Footer: FlowChatVirtuosoFooter,
-};
-const FLOW_CHAT_VIRTUOSO_OVERSCAN = { main: 600, reverse: 600 } as const;
-const FLOW_CHAT_VIRTUOSO_VIEWPORT_INCREASE = { top: 600, bottom: 600 } as const;
-
-type LatestEndAnchorResolveReason =
-  | 'raf'
-  | 'range-changed'
-  | 'resize-observer'
-  | 'transition-finish';
-
-type InitialHistoryTransitionState = {
-  key: string;
-  sessionId: string;
-  isPartial: boolean;
-  contextRestoreState: string;
-  usesInitialHistoryRenderBudget: boolean;
-};
-
-// Read `FLOWCHAT_SCROLL_STABILITY.md` before changing collapse compensation logic.
-
-/**
- * Methods exposed by VirtualMessageList.
- */
-export type FlowChatTurnPinRequestStatus = 'rejected' | 'pending' | 'settled';
-
-export type TurnPinAlignmentPolicy = 'exact' | 'best-effort';
+export type FlowChatTurnNavigationStatus = 'rejected' | 'pending' | 'settled';
 
-export interface TurnPinOptions {
+export interface TurnNavigationOptions {
   behavior?: ScrollBehavior;
-  pinMode?: FlowChatPinTurnToTopMode;
-  alignmentPolicy?: TurnPinAlignmentPolicy;
 }
 
 export type HistoryWindowBoundaryIntentResult =
@@ -230,10 +131,14 @@ type HistoryWindowBoundaryIntentResponse =
   | boolean
   | void;
 
+export interface HistoryWindowBoundaryIntentOptions {
+  prepareViewportForPresentationCommit?: () => boolean | void | Promise<boolean | void>;
+  cancelViewportPresentationCommit?: () => void;
+}
+
 export interface VirtualMessageListRef {
   scrollToTurn: (turnIndex: number) => void;
   scrollToIndex: (index: number) => void;
-  // Materializes a virtual item, reveals collapsed search content, and centers the exact text range.
   scrollToSearchMatch: (target: {
     virtualItemIndex: number;
     query: string;
@@ -242,27 +147,29 @@ export interface VirtualMessageListRef {
     expandableIds?: readonly string[];
   }) => void;
   clearSearchMatch: () => void;
-  // Clears pin reservation first, then scrolls to the physical bottom.
-  scrollToPhysicalBottomAndClearPin: () => void;
-  // Clears pin reservation first, then keeps the target turn visible near the natural tail.
-  scrollToTurnEndAndClearPin: (turnId: string) => boolean;
-  // Checks the current rendered DOM instead of the possibly stale visible-turn store.
+  scrollToPhysicalBottom: () => void;
+  scrollToTurnEnd: (turnId: string) => boolean;
   isTurnRenderedInViewport: (turnId: string) => boolean;
-  // Checks whether the current rendered DOM has visible, readable text for the turn.
   isTurnTextRenderedInViewport: (turnId: string) => boolean;
-  // Preserves any existing pin reservation and behaves like an End-key scroll.
   scrollToLatestEndPosition: () => void;
-  // Aligns the target turn's user message to the viewport top.
-  pinTurnToTop: (turnId: string, options?: TurnPinOptions) => boolean;
-  // Detailed status for callers that must distinguish immediate feedback from deferred virtual-list settling.
-  pinTurnToTopWithStatus: (turnId: string, options?: TurnPinOptions) => FlowChatTurnPinRequestStatus;
-  // Establishes the existing pin transaction before a different presentation window is committed.
-  prepareTurnPinToTop: (turnId: string, options?: TurnPinOptions) => FlowChatTurnPinRequestStatus;
+  navigateToTurn: (turnId: string, options?: TurnNavigationOptions) => boolean;
+  navigateToTurnWithStatus: (
+    turnId: string,
+    options?: TurnNavigationOptions,
+  ) => FlowChatTurnNavigationStatus;
+  prepareTurnNavigation: (
+    turnId: string,
+    options?: TurnNavigationOptions,
+  ) => FlowChatTurnNavigationStatus;
+  /**
+   * Centre a flow item inside its Turn, through the register.
+   * `false` means it is not rendered yet, so the caller should ask again.
+   */
+  focusFlowItem: (flowItemId: string) => boolean;
 }
 
 export interface VirtualMessageListProps {
   items?: VirtualItem[];
-  /** Whether the host scene currently owns a visible, measurable viewport. */
   isViewportActive?: boolean;
   presentationMode?: 'tail' | 'history-window';
   viewportMode?: 'live-tail' | 'history-reading';
@@ -277,202 +184,115 @@ export interface VirtualMessageListProps {
   onUserScrollIntent?: () => void;
 }
 
-export interface HistoryWindowBoundaryIntentOptions {
-  prepareViewportForPresentationCommit?: () => boolean | void | Promise<boolean | void>;
-  cancelViewportPresentationCommit?: () => void;
-}
-
-interface PendingCollapseIntentState {
-  active: boolean;
-  anchorScrollTop: number;
-  toolId: string | null;
-  toolName: string | null;
-  expiresAtMs: number;
-  distanceFromBottomBeforeCollapse: number;
-  baseTotalCompensationPx: number;
-  cumulativeShrinkPx: number;
-}
-
-interface RetainedCollapseAnchorState {
-  anchorScrollTop: number;
-  toolId: string | null;
-  toolName: string | null;
-}
-
-type CollapseReservationOwnerKind =
-  | 'tool-collapse'
-  | 'retained-collapse'
-  | 'input-stack-shrink'
-  | 'preserved-element'
-  | 'late-shrink-clamp'
-  | 'protected-range';
-
-interface CollapseReservationOwnerState {
-  kind: CollapseReservationOwnerKind;
-  generation: number;
-}
-
-interface HistoryPresentationCommitQuietWaiter {
-  cancel: () => void;
-  restart: () => void;
-}
-
-interface PendingHistoryPrependAnchorState {
+type PreparedTurnNavigation = {
   turnId: string;
-  offsetFromScrollerTop: number;
-  beforeItemCount: number;
-  handoffRestored: boolean;
-  prependRestored: boolean;
-}
+  behavior: ScrollBehavior;
+};
 
-function createInactiveCollapseIntentState(): PendingCollapseIntentState {
-  return {
-    active: false,
-    anchorScrollTop: 0,
-    toolId: null,
-    toolName: null,
-    expiresAtMs: 0,
-    distanceFromBottomBeforeCollapse: 0,
-    baseTotalCompensationPx: 0,
-    cumulativeShrinkPx: 0,
-  };
-}
+/**
+ * The gap the first Turn sits below.
+ *
+ * Every other Turn is top-aligned to the same gap explicitly, so this height is
+ * the shared constant rather than a style of its own. It is also what the
+ * virtualizer's `scrollPaddingStart` reserves, so an aim that is re-taken while
+ * items measure keeps the same gap.
+ *
+ * Anything else rendered here is above the items in the scroll range, which is
+ * why the virtualizer measures this element rather than assuming its height.
+ */
+const FlowChatListHeader = forwardRef<HTMLDivElement, {
+  previousHistoryBoundaryStatusNode: React.ReactNode;
+}>(({ previousHistoryBoundaryStatusNode }, ref) => (
+  <div ref={ref} className="message-list-header-block">
+    <div
+      className="message-list-header"
+      data-bf-component="virtual-message-list"
+      data-bf-part="header"
+      style={{
+        height: `${FLOWCHAT_TURN_TOP_GAP_PX}px`,
+        minHeight: `${FLOWCHAT_TURN_TOP_GAP_PX}px`,
+      }}
+    />
+    {previousHistoryBoundaryStatusNode}
+  </div>
+));
+FlowChatListHeader.displayName = 'FlowChatListHeader';
+
+const FlowChatListFooter = ({
+  bottomLayoutInsetPx,
+  tailSpacerPx,
+  nextHistoryBoundaryStatusNode,
+  runtimeStatusSessionId,
+}: {
+  bottomLayoutInsetPx: number;
+  tailSpacerPx: number;
+  nextHistoryBoundaryStatusNode: React.ReactNode;
+  runtimeStatusSessionId: string | null;
+}) => (
+  <>
+    <div
+      className="message-list-footer"
+      data-bf-component="virtual-message-list"
+      data-bf-part="footer"
+      style={{
+        height: `${bottomLayoutInsetPx}px`,
+        minHeight: `${bottomLayoutInsetPx}px`,
+      }}
+    >
+      {nextHistoryBoundaryStatusNode}
+      <RuntimeStatusSlot sessionId={runtimeStatusSessionId} placement="footer" />
+    </div>
+    {/*
+      Resident tail reservation of roughly one viewport. Its height tracks the
+      viewport and nothing else — it must never react to a measured content
+      change, or it becomes the compensation scheme this replaced.
+    */}
+    <div
+      className="message-list-tail-spacer"
+      data-bf-component="virtual-message-list"
+      data-bf-part="tailSpacer"
+      aria-hidden="true"
+      style={{
+        height: `${tailSpacerPx}px`,
+        minHeight: `${tailSpacerPx}px`,
+      }}
+    />
+  </>
+);
+
+const FlowChatHistoryPagingSentinel = ({
+  state,
+  label,
+}: {
+  state: 'idle' | 'loading' | 'error';
+  label: string;
+}) => (
+  <div
+    className="virtual-message-list__history-paging-sentinel"
+    data-bf-component="virtual-message-list"
+    data-bf-part="boundaryStatus"
+    data-bf-state={state === 'loading' ? 'preparing' : state === 'error' ? 'unavailable' : undefined}
+    data-history-paging-sentinel={state}
+    data-history-boundary-status={state === 'loading' ? 'preparing' : state === 'error' ? 'not-ready' : undefined}
+    aria-hidden={state === 'idle'}
+    role={state === 'idle' ? undefined : 'status'}
+    aria-live={state === 'idle' ? undefined : 'polite'}
+  >
+    {state === 'loading' ? (
+      <Loader2 size={14} aria-hidden className="virtual-message-list__history-paging-spinner" />
+    ) : null}
+    <span>{label}</span>
+  </div>
+);
 
-function normalizeHistoryWindowBoundaryIntentResult(
+function normalizeBoundaryResult(
   result: HistoryWindowBoundaryIntentResponse,
 ): HistoryWindowBoundaryIntentResult {
-  if (result === true) {
-    return 'applied';
-  }
-  if (result === false || result === undefined) {
-    return 'not-ready';
-  }
+  if (result === true) return 'applied';
+  if (result === false || result === undefined) return 'not-ready';
   return result;
 }
 
-interface LatestEndAnchorRequestState {
-  turnId: string;
-  targetIndex: number;
-  attempts: number;
-  visibleFrames: number;
-  stableVisibleFrames: number;
-  lastScrollHeight: number | null;
-  lastScrollTop: number | null;
-  lastTargetTop: number | null;
-  lastTargetBottom: number | null;
-}
-
-type InitialTopMostItemIndex =
-  | number
-  | { index: number; align: 'start' | 'end' };
-
-interface ScrollerGeometrySnapshot {
-  scrollTop: number;
-  scrollHeight: number;
-  clientHeight: number;
-}
-
-interface PendingTurnPinState {
-  generation: number;
-  sessionId: string;
-  turnId: string;
-  behavior: ScrollBehavior;
-  pinMode: FlowChatPinTurnToTopMode;
-  alignmentPolicy: TurnPinAlignmentPolicy;
-  expiresAtMs: number;
-  attempts: number;
-}
-
-interface TransientTurnPinStabilizationState extends PendingTurnPinState {
-  stableAlignedFrames: number;
-  lastScrollTop: number | null;
-  lastTargetTop: number | null;
-}
-
-interface PreparedHistoryTurnPinState {
-  turnId: string;
-  behavior: ScrollBehavior;
-  pinMode: FlowChatPinTurnToTopMode;
-  alignmentPolicy: TurnPinAlignmentPolicy;
-}
-
-type TurnPinResolution =
-  | { kind: 'pending' }
-  | { kind: 'exact'; targetScrollTop: number }
-  | { kind: 'best-effort'; targetScrollTop: number };
-
-function sanitizeReservationPx(value: number): number {
-  return Number.isFinite(value) ? Math.max(0, value) : 0;
-}
-
-function isEditableElement(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false;
-  }
-
-  return (
-    target.isContentEditable ||
-    target.closest('input, textarea, select, [contenteditable="true"]') !== null
-  );
-}
-
-function isUpwardScrollIntentKey(event: KeyboardEvent): boolean {
-  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
-    return false;
-  }
-
-  return (
-    event.key === 'ArrowUp' ||
-    event.key === 'PageUp' ||
-    event.key === 'Home' ||
-    (event.key === ' ' && event.shiftKey)
-  );
-}
-
-function isScrollIntentKey(event: KeyboardEvent): boolean {
-  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
-    return false;
-  }
-
-  return (
-    event.key === 'ArrowUp' ||
-    event.key === 'ArrowDown' ||
-    event.key === 'PageUp' ||
-    event.key === 'PageDown' ||
-    event.key === 'Home' ||
-    event.key === 'End' ||
-    event.key === ' '
-  );
-}
-
-function isPointerOnScrollbarGutter(
-  scroller: HTMLElement,
-  clientX: number,
-  clientY: number,
-): boolean {
-  const rect = scroller.getBoundingClientRect();
-  const verticalScrollbarWidth = Math.max(0, scroller.offsetWidth - scroller.clientWidth);
-  const horizontalScrollbarHeight = Math.max(0, scroller.offsetHeight - scroller.clientHeight);
-
-  const isWithinVerticalScrollbar = (
-    verticalScrollbarWidth > 0 &&
-    clientX >= rect.right - verticalScrollbarWidth &&
-    clientX <= rect.right &&
-    clientY >= rect.top &&
-    clientY <= rect.bottom
-  );
-
-  const isWithinHorizontalScrollbar = (
-    horizontalScrollbarHeight > 0 &&
-    clientY >= rect.bottom - horizontalScrollbarHeight &&
-    clientY <= rect.bottom &&
-    clientX >= rect.left &&
-    clientX <= rect.right
-  );
-
-  return isWithinVerticalScrollbar || isWithinHorizontalScrollbar;
-}
-
 function getVirtualItemStableKey(item: VirtualItem): string {
   switch (item.type) {
     case 'user-message':
@@ -485,6365 +305,1138 @@ function getVirtualItemStableKey(item: VirtualItem): string {
     case 'turn-completion-notice':
       return `${item.type}:${item.turnId}:${item.data.reasonCode}`;
     case 'turn-failure-notice':
-      return `${item.type}:${item.turnId}`;
     case 'image-analyzing':
       return `${item.type}:${item.turnId}`;
   }
 }
 
+/**
+ * Whether a pointer press landed on the scroller's scrollbar rather than on the
+ * transcript.
+ *
+ * `clientWidth` stops at the scrollbar, so anything past the content box's
+ * trailing edge is the bar or its track. Measured on WebView2: a 10px gutter,
+ * a press on the transcript at `clientX` 1497 against a content box ending at
+ * 1641, and presses on the bar at 1643-1647.
+ *
+ * Chromium does dispatch `pointerdown` for a scrollbar press. WebKit-backed
+ * builds draw overlay scrollbars that take no layout width, leaving no gutter
+ * to test against, so this returns false there and the drag stays unnoticed.
+ */
+function isScrollbarPress(event: PointerEvent, scroller: HTMLElement): boolean {
+  return event.clientX > scroller.getBoundingClientRect().left + scroller.clientWidth;
+}
+
+function isElementVisibleInScroller(element: HTMLElement, scroller: HTMLElement): boolean {
+  const elementRect = element.getBoundingClientRect();
+  const scrollerRect = scroller.getBoundingClientRect();
+  return elementRect.bottom > scrollerRect.top && elementRect.top < scrollerRect.bottom;
+}
+
 const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessageListProps>(({
   items,
   isViewportActive = true,
   presentationMode = 'tail',
   viewportMode = presentationMode === 'history-window' ? 'history-reading' : 'live-tail',
   historyWindow = null,
-  presentationRevision = 0,
+  presentationRevision: _presentationRevision = 0,
   historyBoundaryState = IDLE_HISTORY_WINDOW_BOUNDARY_STATE,
   onHistoryWindowBoundaryIntent,
   onRequestJumpToLatest,
   onUserScrollIntent,
 }, ref) => {
   const { t } = useTranslation('flow-chat');
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  /**
+   * This render, counted.
+   *
+   * The price of following the tail by growing an item is paid here: a height
+   * change makes the virtualizer re-measure, which lands back in this component.
+   * A follow that scrolls inside an item instead claims to cost nothing, and
+   * this is the counter that claim is checked against. Deliberately dependency
+   * free — every commit counts, whatever caused it.
+   */
+  useEffect(() => {
+    noteFlowListCommit();
+  });
   const canonicalVirtualItems = useVirtualItems();
   const virtualItems = items ?? canonicalVirtualItems;
   const activeSession = useActiveSession();
-  const hasPendingHistoryCompletion = activeSession?.sessionId
-    ? flowChatStore.hasPendingSessionHistoryCompletion(activeSession.sessionId)
-    : false;
-  const hasPartialHistoryInitialViewport =
-    activeSession?.historyState === 'ready' &&
-    activeSession.contextRestoreState === 'pending' &&
-    (activeSession.dialogTurns.length ?? 0) <= PARTIAL_HISTORY_INITIAL_TAIL_TURN_BUDGET;
-  const useInitialHistoryRenderBudget = hasPendingHistoryCompletion || hasPartialHistoryInitialViewport;
-  const virtuosoIndexStateRef = useRef<{
-    sessionId: string | null;
-    firstItemIndex: number;
-    virtualItems: VirtualItem[];
-  }>({
-    sessionId: null,
-    firstItemIndex: VIRTUOSO_FIRST_ITEM_INDEX_BASE,
-    virtualItems: [],
-  });
-  const virtuosoIndexState = virtuosoIndexStateRef.current;
+  const activeSessionState = useActiveSessionState();
   const activeSessionId = activeSession?.sessionId ?? null;
-  if (virtuosoIndexState.sessionId !== activeSessionId) {
-    virtuosoIndexState.sessionId = activeSessionId;
-    virtuosoIndexState.firstItemIndex = VIRTUOSO_FIRST_ITEM_INDEX_BASE;
-    virtuosoIndexState.virtualItems = virtualItems;
-  } else if (virtuosoIndexState.virtualItems !== virtualItems) {
-    const leadingIndexDelta = getLeadingVirtualItemIndexDelta(
-      virtuosoIndexState.virtualItems,
-      virtualItems,
-      getVirtualItemStableKey,
-    );
-    if (leadingIndexDelta !== 0) {
-      virtuosoIndexState.firstItemIndex = Math.max(
-        0,
-        virtuosoIndexState.firstItemIndex + leadingIndexDelta,
-      );
-    }
-    virtuosoIndexState.virtualItems = virtualItems;
-  }
-  const virtuosoFirstItemIndex = virtuosoIndexState.firstItemIndex;
-
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const [scrollerElement, setScrollerElement] = useState<HTMLElement | null>(null);
-  const [viewportActivityRevision, setViewportActivityRevision] = useState(0);
-  const [bottomReservationState, setBottomReservationState] = useState<BottomReservationState>(
-    () => createInitialBottomReservationState()
-  );
-  const [pendingTurnPin, setPendingTurnPin] = useState<PendingTurnPinState | null>(null);
-  const [historyProjectionHandoff, setHistoryProjectionHandoff] = useState<HistoryProjectionHandoffSnapshot | null>(null);
-  const [initialHistorySnapshotActive, setInitialHistorySnapshotActive] = useState(useInitialHistoryRenderBudget);
-  const [historyPagingActive, setHistoryPagingActive] = useState(false);
-  const [historyPagingLoading, setHistoryPagingLoading] = useState(false);
-  const [historyPagingAnchorTurnId, setHistoryPagingAnchorTurnId] = useState<string | null>(null);
-  const [previousHistoryBoundaryStatus, setPreviousHistoryBoundaryStatus] = useState<{
-    sessionId: string;
-    reason: string;
-    state: 'preparing' | 'not-ready';
-  } | null>(null);
-
+  /**
+   * The newest Turn the session has, which is what "a new Turn" means.
+   *
+   * Deliberately a fact about the ledger and not about the projection.
+   * `virtualItems.at(-1)` answers where the presentation currently *ends*, and
+   * a history window re-cut moves that to a Turn which has existed for hours:
+   * measured, navigating to Turn 2 landed correctly and was then overwritten
+   * twice, because each window loaded on the way ended somewhere new and each
+   * of those read as a submission, pinning the window's last Turn to the top.
+   *
+   * Whether the Turn can be *acted on* is a second question, and it belongs
+   * with the response rather than the identity — qualifying the identity by
+   * visibility instead makes a Turn that merely came into view look new, which
+   * is the same bug wearing the opposite sign.
+   */
+  const latestTurnId = activeSession?.dialogTurns.at(-1)?.id ?? null;
   const scrollerElementRef = useRef<HTMLElement | null>(null);
-  const footerElementRef = useRef<HTMLDivElement | null>(null);
-  const activeSessionIdRef = useRef<string | null>(null);
-  const isViewportActiveRef = useRef(isViewportActive);
-  const viewportGeometrySuspendedRef = useRef(!isViewportActive);
-  const viewportActivityGenerationRef = useRef(0);
-  const viewportReactivationFrameRef = useRef<number | null>(null);
-  const suspendedViewportScrollTopRef = useRef(0);
-  const historyProjectionHandoffRef = useRef<HistoryProjectionHandoffSnapshot | null>(null);
-  const historyProjectionHandoffReleaseFrameRef = useRef<number | null>(null);
-  const clearHistoryProjectionHandoffRef = useRef<(reason: string) => void>(() => {});
-  const latestVisibleHistoryTailSnapshotRef = useRef<HistoryProjectionHandoffSnapshot | null>(null);
-  const previousInitialHistoryTransitionStateRef = useRef<InitialHistoryTransitionState | null>(null);
-  const fullHistoryProjectionIntentFrameRef = useRef<number | null>(null);
-  const pendingFullHistoryProjectionReasonRef = useRef<string | null>(null);
-  const previousHistoryBoundaryStatusTimerRef = useRef<number | null>(null);
-  const sessionOpenHandoffSessionIdRef = useRef<string | null>(null);
-  const previousActiveSessionIdForOpenHandoffRef = useRef<string | null | undefined>(undefined);
-  const viewportCoordinatorRef = useRef(new FlowChatViewportCoordinator());
-  const bottomReservationStateRef = useRef<BottomReservationState>(createInitialBottomReservationState());
-  const collapseReservationOwnerRef = useRef<CollapseReservationOwnerState | null>(null);
-  const collapseReservationOwnerGenerationRef = useRef(0);
-  const restoreScrollerMethodsRef = useRef<(() => void) | null>(null);
-  const previousMeasuredHeightRef = useRef<number | null>(null);
-  const previousScrollTopRef = useRef(0);
-  const previousScrollerGeometryRef = useRef<ScrollerGeometrySnapshot | null>(null);
-  const markedInitialHistoryRenderWindowKeyRef = useRef<string | null>(null);
-  const initialHistorySnapshotCreatedAtMsRef = useRef(performance.now());
-  const pendingHistoryPrependAnchorRef = useRef<PendingHistoryPrependAnchorState | null>(null);
-  const historyPagingActiveRef = useRef(false);
-  const historyPagingRetryTimerRef = useRef<number | null>(null);
-  const catalogHistoryWindowRequestRef = useRef<Promise<HistoryWindowBoundaryIntentResult> | null>(null);
-  const previousViewportModeRef = useRef<'live-tail' | 'history-reading'>(viewportMode);
-  const lastUserScrollIntentAtMsRef = useRef(Number.NEGATIVE_INFINITY);
-  const historyPresentationCommitQuietGenerationRef = useRef(0);
-  const historyPresentationCommitQuietWaitersRef = useRef(
-    new Set<HistoryPresentationCommitQuietWaiter>(),
-  );
-  const preparedHistoryTurnPinRef = useRef<PreparedHistoryTurnPinState | null>(null);
-  const measureFrameRef = useRef<number | null>(null);
-  const visibleTurnMeasureFrameRef = useRef<number | null>(null);
-  const pinReservationReconcileFrameRef = useRef<number | null>(null);
-  const turnPinStabilizationFrameRef = useRef<number | null>(null);
-  const turnPinRequestGenerationRef = useRef(0);
-  const pendingTurnPinGenerationRef = useRef<number | null>(null);
-  const activeTurnPinRequestRef = useRef<PendingTurnPinState | null>(null);
-  const latestEndAnchorStabilizationFrameRef = useRef<number | null>(null);
-  const searchNavigationRequestIdRef = useRef(0);
-  const latestEndAnchorRequestRef = useRef<LatestEndAnchorRequestState | null>(null);
-  const virtuosoMountStateRef = useRef<{
-    sessionId: string | null;
-    mounted: boolean;
-  }>({
-    sessionId: null,
-    mounted: false,
+  /**
+   * Who is moving the viewport, for everything in this transcript that moves
+   * it. Declared here because the scroller is, and every writer below takes it
+   * from this one place rather than keeping its own opinion of the others.
+   */
+  const viewportOwner = useFlowChatViewportOwner(scrollerElementRef);
+  const headerElementRef = useRef<HTMLDivElement | null>(null);
+  const [scrollerElement, setScrollerElement] = useState<HTMLElement | null>(null);
+  const [viewportHeightPx, setViewportHeightPx] = useState(0);
+  /** Last scroller box the resize observer saw, to tell it apart from a content change. */
+  const observedViewportBoxRef = useRef({ width: 0, height: 0 });
+  /** Remaining resize callbacks over which to keep a resting viewport at the end. */
+  const tailRealignCallbacksRef = useRef(0);
+  /** Synchronous mirror of `isAtBottom`, read by a resize for the pre-resize answer. */
+  const isAtTailRef = useRef(true);
+  /** A pointer is held on the scrollbar, so the scrolling it causes is intent. */
+  const isScrollbarPressRef = useRef(false);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isOpenViewportSettled, setIsOpenViewportSettled] = useState(false);
+  const preparedTurnNavigationRef = useRef<PreparedTurnNavigation | null>(null);
+  const boundaryRequestRef = useRef<Record<SessionHistoryWindowDirection, Promise<void> | null>>({
+    before: null,
+    after: null,
   });
-  const resolveLatestEndAnchorStabilizationRef = useRef<((reason: LatestEndAnchorResolveReason) => boolean) | null>(null);
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  const mutationObserverRef = useRef<MutationObserver | null>(null);
-  const touchScrollIntentStartYRef = useRef<number | null>(null);
-  const scrollbarPointerInteractionActiveRef = useRef(false);
-  // Timestamp until which we treat any upward scroll as user-initiated. Set by
-  // wheel/touch/keyboard/scrollbar handlers BEFORE the browser actually moves
-  // the scroller. Used by the handleScroll "shrink-clamp restore" intercept
-  // (below) to distinguish a genuine user upward scroll from a browser auto
-  // clamp caused by content shrinking near the bottom in follow mode.
-  const userInitiatedUpwardScrollUntilMsRef = useRef(0);
-  const pendingCollapseIntentRef = useRef<PendingCollapseIntentState>(
-    createInactiveCollapseIntentState(),
-  );
-  const retainedCollapseAnchorRef = useRef<RetainedCollapseAnchorState | null>(null);
-  const collapseIntentFinalizeTimerRef = useRef<number | null>(null);
-  const collapseIntentAnimationTimerRef = useRef<number | null>(null);
-  const collapseIntentSettleFrameRef = useRef<number | null>(null);
-  const retainedCollapseSettleTimerRef = useRef<number | null>(null);
-  const retainedCollapseSettleFrameRef = useRef<number | null>(null);
-  const retainedCollapseReleaseTimerRef = useRef<number | null>(null);
-  const retainedCollapseSettleGenerationRef = useRef(0);
-  const retainedCollapseGeometryGenerationRef = useRef(0);
-  const pendingStickyPinGrowthRef = useRef<{
-    targetTurnId: string | null;
-    amountPx: number;
-  }>({
-    targetTurnId: null,
-    amountPx: 0,
+  const exhaustedBoundaryRef = useRef<Record<SessionHistoryWindowDirection, boolean>>({
+    before: false,
+    after: false,
   });
-  const stickyPinGrowthSettleTimerRef = useRef<number | null>(null);
-  const settlePendingStickyPinGrowthRef = useRef<(reason: string) => void>(() => {});
-  const cancelUnresolvedTurnPinRef = useRef<() => void>(() => {});
-  const maybeHandoffPinnedTurnToTailRef = useRef<(reason: string) => boolean>(() => false);
-  const preparePinnedTurnFollowHandoffRef = useRef<() => void>(() => {});
-  const finalizeCollapseIntentRef = useRef<(
-    reason: string,
-    options?: { expectedExpiresAtMs?: number; suppressHandoff?: boolean },
-  ) => boolean>(() => false);
-  const exitPinnedViewportForUserIntentRef = useRef<(reason: string) => void>((reason) => {
-    viewportCoordinatorRef.current.release(reason);
+  /**
+   * `exhausted` describes the window that asked, not the session.
+   *
+   * "There is nothing before this" is true of a *start ordinal*. Navigate to
+   * the first Turn and the store answers `reached-start` for `targetOrdinal:
+   * -1`, correctly — and the latch then outlived the window by the rest of the
+   * session. Measured: 3 Turns of 43 loaded, `before` latched off from a visit
+   * to Turn 1, and after jumping back to the tail the reader could not page at
+   * all. The alarm fired (`latched-exhausted-while-partial`) and nothing acted
+   * on it.
+   *
+   * So the latch is cleared whenever the window moves. Only `applied` used to
+   * clear it, which is the one case where the window moves *because* of the
+   * page — every other way it moves left a stale answer behind.
+   */
+  const windowBoundsKey = historyWindow
+    ? `${historyWindow.startOrdinal}:${historyWindow.endOrdinalExclusive}`
+    : presentationMode;
+  const previousWindowBoundsKeyRef = useRef(windowBoundsKey);
+  if (previousWindowBoundsKeyRef.current !== windowBoundsKey) {
+    previousWindowBoundsKeyRef.current = windowBoundsKey;
+    exhaustedBoundaryRef.current = { before: false, after: false };
+  }
+  /**
+   * Whether a boundary may be asked about again.
+   *
+   * Prepend compensation puts the viewport back on the reader's content, but
+   * the virtualizer places its rows from a scroll offset it only refreshes on
+   * the next frame, so for one commit the visible range is still read against
+   * the head. Asking from that commit pages again and produces another one just
+   * like it: measured, a single junction paged a transcript back to its first
+   * Turn while the reader held still.
+   *
+   * A direction is armed by the visible range leaving it. react-virtuoso had
+   * this for free — the range it reported was absolute, so a prepend moved the
+   * local start index by the number of items added and the rule stopped
+   * applying by itself.
+   */
+  const boundaryArmedRef = useRef<Record<SessionHistoryWindowDirection, boolean>>({
+    before: true,
+    after: true,
   });
-  const followOutputControllerRef = useRef<{
-    handleUserScrollIntent: () => void;
-    handleScroll: () => void;
-    scheduleFollowToLatest: (reason: string) => void;
-  }>({
-    handleUserScrollIntent: () => {},
-    handleScroll: () => {},
-    scheduleFollowToLatest: () => {},
+  /** Assigned below, once the boundary evaluation it stands for exists. */
+  const evaluateHistoryBoundariesRef = useRef<() => void>(() => {});
+  const searchNavigationRequestIdRef = useRef(0);
+  const visibleTurnUpdateFrameRef = useRef<number | null>(null);
+
+  const virtualizer = useFlowChatVirtualizer({
+    items: virtualItems,
+    scrollerRef: scrollerElementRef,
+    headerRef: headerElementRef,
+    getItemKey: getVirtualItemStableKey,
+    estimateItemHeightPx: estimateVirtualMessageItemHeight,
+    scrollPaddingStartPx: FLOWCHAT_TURN_TOP_GAP_PX,
+    writeViewport: viewportOwner.write,
   });
-  const deferredFollowReasonRef = useRef<string | null>(null);
-  // Mirror of `isFollowingOutput` for use inside listeners that are registered
-  // once per mount. When follow mode is active we deliberately bypass collapse
-  // pre-compensation and semantic-anchor restoration so the continuous follow
-  // loop can keep tracking the bottom without fighting layout stabilization.
-  const isFollowingOutputRef = useRef(false);
-  const isStreamingOutputRef = useRef(false);
-  const previousIsStreamingOutputRef = useRef(false);
-  const transientTurnPinStabilizationRef = useRef<TransientTurnPinStabilizationState | null>(null);
-  const scheduleTransientTurnPinStabilizationRef = useRef<(frames?: number) => void>(() => {});
-  activeSessionIdRef.current = activeSessionId;
-  isViewportActiveRef.current = isViewportActive;
-  if (!isViewportActive) {
-    viewportGeometrySuspendedRef.current = true;
-  }
 
-  const isScrollerViewportMeasurable = useCallback((scroller: HTMLElement | null): scroller is HTMLElement => (
-    Boolean(
-      isViewportActiveRef.current &&
-      scroller?.isConnected &&
-      (
-        scroller.clientHeight > COMPENSATION_EPSILON_PX ||
-        scroller.getBoundingClientRect().height > COMPENSATION_EPSILON_PX
+  const userMessageItems = useMemo(() => virtualItems
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => item.type === 'user-message'), [virtualItems]);
+
+  const isStreamingOutput = useMemo(() => {
+    if (viewportMode === 'history-reading') return false;
+    if (activeSessionState.isProcessing) return true;
+    const latestTurn = activeSession?.dialogTurns.at(-1);
+    return Boolean(
+      latestTurn && (
+        latestTurn.status === 'processing' ||
+        latestTurn.status === 'finishing' ||
+        latestTurn.status === 'image_analyzing' ||
+        latestTurn.modelRounds.some(round => round.isStreaming)
       )
-    )
-  ), []);
-
-  const canProcessViewportGeometry = useCallback((scroller: HTMLElement | null): scroller is HTMLElement => (
-    !viewportGeometrySuspendedRef.current && isScrollerViewportMeasurable(scroller)
-  ), [isScrollerViewportMeasurable]);
-
-  const canCoordinateViewport = useCallback(() => (
-    isViewportActiveRef.current && !viewportGeometrySuspendedRef.current
-  ), []);
-
-  useEffect(() => {
-    const previousMode = previousViewportModeRef.current;
-    if (previousMode === 'history-reading' && viewportMode === 'live-tail') {
-      historyPresentationCommitQuietGenerationRef.current += 1;
-      Array.from(historyPresentationCommitQuietWaitersRef.current).forEach(waiter => waiter.cancel());
-      if (historyPagingRetryTimerRef.current !== null) {
-        window.clearTimeout(historyPagingRetryTimerRef.current);
-        historyPagingRetryTimerRef.current = null;
-      }
-      if (fullHistoryProjectionIntentFrameRef.current !== null) {
-        cancelAnimationFrame(fullHistoryProjectionIntentFrameRef.current);
-        fullHistoryProjectionIntentFrameRef.current = null;
-      }
-      if (previousHistoryBoundaryStatusTimerRef.current !== null) {
-        window.clearTimeout(previousHistoryBoundaryStatusTimerRef.current);
-        previousHistoryBoundaryStatusTimerRef.current = null;
-      }
-      pendingFullHistoryProjectionReasonRef.current = null;
-      catalogHistoryWindowRequestRef.current = null;
-      pendingHistoryPrependAnchorRef.current = null;
-      historyPagingActiveRef.current = false;
-      setHistoryPagingActive(false);
-      setHistoryPagingLoading(false);
-      setHistoryPagingAnchorTurnId(null);
-      setPreviousHistoryBoundaryStatus(null);
-    }
-    if (previousMode !== viewportMode) {
-      previousViewportModeRef.current = viewportMode;
-    }
-  }, [viewportMode]);
+    );
+  }, [activeSession, activeSessionState.isProcessing, viewportMode]);
 
   const isInputActive = useChatInputState(state => state.isActive);
   const isInputExpanded = useChatInputState(state => state.isExpanded);
   const inputHeight = useChatInputState(state => state.inputHeight);
+  const bottomLayoutInsetPx = computeFlowChatInputStackFooterPx(inputHeight);
 
-  const inputStackFooterPxRef = useRef(0);
-  const previousInputStackFooterPxRef = useRef(0);
-  // Snapshot scrollTop during render, before React commits the new (smaller)
-  // footer height.  The browser has not yet clamped, so this is the accurate
-  // pre-clamp value.  Used by the useLayoutEffect below to restore scrollTop
-  // after footer-shrink compensation.
-  const footerShrinkPreScrollTopRef = useRef(0);
-  const inputStackFooterPx = computeFlowChatInputStackFooterPx(inputHeight, isInputActive);
-  // Snapshot pre-commit scrollTop before we update the footer px ref.
-  // The scrollerElement may not be set on first mount; that's fine —
-  // useLayoutEffect checks scroller !== null before restoring.
-  if (scrollerElement && canProcessViewportGeometry(scrollerElement)) {
-    footerShrinkPreScrollTopRef.current = scrollerElement.scrollTop;
-  }
-  inputStackFooterPxRef.current = inputStackFooterPx;
-
-  const activeSessionState = useActiveSessionState();
-  const isProcessing = activeSessionState.isProcessing;
+  const tailSpacerPx = tailSpacerPxForViewport(viewportHeightPx, bottomLayoutInsetPx);
+  const tailSpacerPxRef = useRef(tailSpacerPx);
+  useLayoutEffect(() => {
+    tailSpacerPxRef.current = tailSpacerPx;
+  }, [tailSpacerPx]);
+  const getTailSpacerPx = useCallback(() => tailSpacerPxRef.current, []);
+
+  /*
+   * The paging diagnostics need a few session facts, but `activeSession` is a
+   * fresh object on every streaming flush: depending on it would rebuild
+   * `requestHistoryBoundary` and therefore the rendered-range effect many times
+   * a second. Hold the session itself by reference — one assignment per render,
+   * no allocation — and read the fields only on the rare diagnostic path.
+   */
+  const activeSessionRef = useRef(activeSession);
+  activeSessionRef.current = activeSession;
+
+  const isOpenViewportSettledRef = useRef(isOpenViewportSettled);
+  isOpenViewportSettledRef.current = isOpenViewportSettled;
+  const isOpeningViewport = useCallback(() => !isOpenViewportSettledRef.current, []);
+
+  const getRenderedUserMessageElement = useCallback((turnId: string) => (
+    findRenderedTurnAnchorElement(scrollerElementRef.current, turnId)
+  ), []);
 
-  const getFooterHeightPx = useCallback((compensationPx: number) => {
-    return inputStackFooterPxRef.current + compensationPx;
-  }, []);
+  const readContentEndScrollTop = useCallback((scroller: HTMLElement) => (
+    contentEndScrollTop({
+      scrollHeight: scroller.scrollHeight,
+      clientHeight: scroller.clientHeight,
+      tailSpacerPx: tailSpacerPxRef.current,
+    })
+  ), []);
 
-  const getTotalBottomCompensationPx = useCallback((state: BottomReservationState = bottomReservationStateRef.current) => {
-    return getReservationTotalPx(state.collapse) + getReservationTotalPx(state.pin);
-  }, []);
+  /**
+   * The content-end scroll, issued *through the virtualizer*.
+   *
+   * Writing the scroller directly is cheaper, but it leaves any pending re-aim
+   * in place — the virtualizer keeps chasing its last target for as long as the
+   * measurements under it move. A caller correcting one of its own scrolls has
+   * to replace that chase rather than outrun it, and only another scroll issued
+   * through the virtualizer does.
+   *
+   * The target is read off live geometry rather than aligned to the last item,
+   * because the end of *real content* is above the resident tail spacer and no
+   * item knows where that is.
+   */
+  const scrollToContentEndThroughVirtualizer = useCallback((
+    behavior: 'auto' | 'smooth',
+    owner: FlowChatViewportOwner = 'follow-output',
+    // A one-shot owner has to state its window here as anywhere else. Only a
+    // writer that releases may hold the viewport without one.
+    holdForMs?: number,
+  ) => {
+    const scroller = scrollerElementRef.current;
+    if (!scroller) return;
+    virtualizer.scrollToOffset(readContentEndScrollTop(scroller), {
+      behavior,
+      owner,
+      holdForMs,
+    });
+  }, [readContentEndScrollTop, virtualizer]);
 
-  const acquireCollapseReservationOwner = useCallback((kind: CollapseReservationOwnerKind) => {
-    const currentOwner = collapseReservationOwnerRef.current;
-    if (currentOwner?.kind === kind) {
-      return currentOwner;
-    }
-    const nextOwner: CollapseReservationOwnerState = {
-      kind,
-      generation: collapseReservationOwnerGenerationRef.current + 1,
-    };
-    collapseReservationOwnerGenerationRef.current = nextOwner.generation;
-    collapseReservationOwnerRef.current = nextOwner;
-    return nextOwner;
-  }, []);
-
-  const clearCollapseReservationOwner = useCallback(() => {
-    collapseReservationOwnerRef.current = null;
-  }, []);
-
-  const clearRetainedCollapseSettlement = useCallback(() => {
-    retainedCollapseSettleGenerationRef.current += 1;
-    retainedCollapseGeometryGenerationRef.current = 0;
-    if (retainedCollapseSettleTimerRef.current !== null) {
-      window.clearTimeout(retainedCollapseSettleTimerRef.current);
-      retainedCollapseSettleTimerRef.current = null;
-    }
-    if (retainedCollapseSettleFrameRef.current !== null) {
-      cancelAnimationFrame(retainedCollapseSettleFrameRef.current);
-      retainedCollapseSettleFrameRef.current = null;
-    }
-    if (retainedCollapseReleaseTimerRef.current !== null) {
-      window.clearTimeout(retainedCollapseReleaseTimerRef.current);
-      retainedCollapseReleaseTimerRef.current = null;
-    }
-  }, []);
-
-  const applyFooterHeightToElement = useCallback((footer: HTMLDivElement, compensationPx: number) => {
-    const heightPx = getFooterHeightPx(compensationPx);
-    footer.style.height = `${heightPx}px`;
-    footer.style.minHeight = `${heightPx}px`;
-  }, [getFooterHeightPx]);
-
-  const handleFooterElementRef = useCallback((element: HTMLDivElement | null) => {
-    footerElementRef.current = element;
-    if (!element) {
-      return;
-    }
-
-    // Virtuoso may replace its Footer during a measurement commit. Reapply
-    // the ref-owned reservation synchronously so the physical scroll range
-    // never falls back to a stale React render for one frame.
-    applyFooterHeightToElement(element, getTotalBottomCompensationPx());
-    void element.offsetHeight;
-    void scrollerElementRef.current?.scrollHeight;
-  }, [applyFooterHeightToElement, getTotalBottomCompensationPx]);
-
-  const snapshotMeasuredContentHeight = useCallback((
-    scroller: HTMLElement,
-    reservationState: BottomReservationState = bottomReservationStateRef.current,
-  ) => {
-    const compensationPx = getTotalBottomCompensationPx(reservationState);
-    return Math.max(0, scroller.scrollHeight - compensationPx - inputStackFooterPxRef.current);
-  }, [getTotalBottomCompensationPx]);
-
-  const recordScrollerGeometry = useCallback((scroller: HTMLElement) => {
-    if (!canCoordinateViewport()) {
-      return;
-    }
-    previousScrollerGeometryRef.current = {
-      scrollTop: scroller.scrollTop,
-      scrollHeight: scroller.scrollHeight,
-      clientHeight: scroller.clientHeight,
-    };
-  }, [canCoordinateViewport]);
-
-  const rebaseViewportMeasurements = useCallback(() => {
+  const scrollToContentEnd = useCallback((behavior: ScrollBehavior) => {
     const scroller = scrollerElementRef.current;
-    if (!canProcessViewportGeometry(scroller)) {
-      previousMeasuredHeightRef.current = null;
-      previousScrollerGeometryRef.current = null;
-      return;
-    }
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-    previousScrollTopRef.current = scroller.scrollTop;
-    recordScrollerGeometry(scroller);
-  }, [canProcessViewportGeometry, recordScrollerGeometry, snapshotMeasuredContentHeight]);
-
-  const recordScrollerGeometryIfLayoutStable = useCallback((scroller: HTMLElement) => {
-    const previousGeometry = previousScrollerGeometryRef.current;
-    if (
-      previousGeometry &&
-      (
-        Math.abs(scroller.clientHeight - previousGeometry.clientHeight) > COMPENSATION_EPSILON_PX ||
-        Math.abs(scroller.scrollHeight - previousGeometry.scrollHeight) > COMPENSATION_EPSILON_PX
-      )
-    ) {
+    if (scroller) {
+      viewportOwner.write({
+        owner: 'follow-output',
+        topPx: readContentEndScrollTop(scroller),
+        behavior,
+      });
       return;
     }
-    recordScrollerGeometry(scroller);
-  }, [recordScrollerGeometry]);
-
-  const restartHistoryPresentationCommitQuietWaiters = useCallback(() => {
-    historyPresentationCommitQuietWaitersRef.current.forEach(waiter => waiter.restart());
-  }, []);
-
-  const cancelHistoryPresentationCommitQuietWaiters = useCallback(() => {
-    historyPresentationCommitQuietGenerationRef.current += 1;
-    const waiters = Array.from(historyPresentationCommitQuietWaitersRef.current);
-    waiters.forEach(waiter => waiter.cancel());
-  }, []);
+    scrollToContentEndThroughVirtualizer(behavior === 'smooth' ? 'smooth' : 'auto');
+  }, [readContentEndScrollTop, scrollToContentEndThroughVirtualizer, viewportOwner]);
 
-  const waitForHistoryPresentationCommitQuiet = useCallback((sessionId: string): Promise<boolean> => {
-    const generation = historyPresentationCommitQuietGenerationRef.current;
+  const scrollTurnToTop = useCallback((turnId: string) => {
+    const targetIndex = virtualItems.findIndex(item => (
+      item.turnId === turnId && item.type === 'user-message'
+    ));
+    if (targetIndex < 0) return false;
+    // Follow-output's answer to a new Turn, not a navigation: it is the same
+    // continuous writer, and a pin it cannot hold is not a pin.
+    virtualizer.scrollItemIntoView(targetIndex, { align: 'start', owner: 'follow-output' });
+    return true;
+  }, [virtualItems, virtualizer]);
 
-    return new Promise(resolve => {
-      let timerId: number | null = null;
-      let settled = false;
-      let waiter: HistoryPresentationCommitQuietWaiter | null = null;
+  // Must agree with `scrollTurnToTop` down to the pixel: this is the offset the
+  // follow loop re-asserts every frame, so a disagreement is a fight.
+  const resolveTurnTopScrollTop = useCallback((turnId: string) => {
+    const scroller = scrollerElementRef.current;
+    const element = getRenderedUserMessageElement(turnId);
+    if (!scroller || !element) return null;
+    return Math.max(
+      0,
+      scroller.scrollTop
+        + element.getBoundingClientRect().top
+        - scroller.getBoundingClientRect().top
+        - FLOWCHAT_TURN_TOP_GAP_PX,
+    );
+  }, [getRenderedUserMessageElement]);
 
-      const finish = (ready: boolean) => {
-        if (settled) {
-          return;
-        }
-        settled = true;
-        if (timerId !== null) {
-          window.clearTimeout(timerId);
-          timerId = null;
-        }
-        if (waiter) {
-          historyPresentationCommitQuietWaitersRef.current.delete(waiter);
-        }
-        resolve(ready);
-      };
+  const {
+    isFollowingOutput,
+    enterFollowOutput,
+    exitFollowOutput,
+    scheduleFollowToLatest,
+    isFollowingOutputNow,
+    isFollowCorrectingViewport,
+    handleUserScrollIntent,
+    handleTurnsRolledBack,
+    handleScroll,
+    handleScrollSettled,
+    handleViewportResize,
+    getFollowTargetScrollTop,
+  } = useFlowChatFollowOutput({
+    activeSessionId: activeSessionId ?? undefined,
+    latestTurnId,
+    dialogTurnCount: activeSession?.dialogTurns.length ?? 0,
+    virtualItemCount: virtualItems.length,
+    isStreaming: isStreamingOutput,
+    isViewportActive,
+    scrollerRef: scrollerElementRef,
+    getTailSpacerPx,
+    scrollToContentEnd,
+    scrollTurnToTop,
+    resolveTurnTopScrollTop,
+    isOpeningViewport,
+    viewportOwner,
+  });
 
-      const check = () => {
-        timerId = null;
-        const scroller = scrollerElementRef.current;
-        if (
-          generation !== historyPresentationCommitQuietGenerationRef.current
-          || activeSessionIdRef.current !== sessionId
-          || !scroller?.isConnected
-        ) {
-          finish(false);
-          return;
-        }
 
-        const hasActivePointerGesture = (
-          touchScrollIntentStartYRef.current !== null
-          || scrollbarPointerInteractionActiveRef.current
-        );
-        const quietForMs = performance.now() - lastUserScrollIntentAtMsRef.current;
-        if (!hasActivePointerGesture && quietForMs >= HISTORY_PRESENTATION_COMMIT_SCROLL_QUIET_MS) {
-          finish(true);
-          return;
-        }
+  /**
+   * The anchor stands down for anyone aiming at a target of their own — and for
+   * nobody else, the reader included.
+   *
+   * Its correction is a displacement repair, the same kind of act as the
+   * prepend compensation, so it asks the register the same question. Measured:
+   * with the anchor ranked under the gesture it stood down 23 times and
+   * corrected nothing at all, while the transcript shrank 200px under a reader
+   * who had not moved — and the compensation, which is a pixel delta, cannot
+   * follow a re-measurement that lands after it.
+   *
+   * The opening reveal is the one term left beside the register, because it is
+   * a phase rather than a writer and the thing moving the viewport during it is
+   * follow-output — see `flowChatViewportOwnership.ts`.
+   */
+  const isViewportOwnedElsewhere = useCallback(() => (
+    !viewportOwner.canShift() || isOpeningViewport()
+  ), [isOpeningViewport, viewportOwner]);
+
+  const shiftAnchorCorrection = useCallback((byPx: number) => {
+    viewportOwner.shift(byPx);
+  }, [viewportOwner]);
+
+  const viewportAnchor = useFlowChatViewportAnchor({
+    scrollerRef: scrollerElementRef,
+    isViewportOwnedElsewhere,
+    shiftViewport: shiftAnchorCorrection,
+  });
 
-        const remainingQuietMs = hasActivePointerGesture
-          ? HISTORY_PRESENTATION_COMMIT_SCROLL_QUIET_MS
-          : HISTORY_PRESENTATION_COMMIT_SCROLL_QUIET_MS - quietForMs;
-        timerId = window.setTimeout(check, Math.max(1, remainingQuietMs));
-      };
+  /**
+   * Keep the viewport on the same content when history is prepended.
+   *
+   * This is the half of react-virtuoso's `firstItemIndex` that nothing replaced.
+   * Keying measurements on item identity means a prepend invalidates none of
+   * them, which is the other half — but the scroll offset is still a number,
+   * and items arriving above it push the reader's content down by their height
+   * while it stays where it was.
+   *
+   * Everything downstream assumes this does not happen, and all three of the
+   * failures measured here were that assumption breaking:
+   *
+   * - The virtualizer re-windows from its own scroll offset, which lags by a
+   *   frame, so it renders the head. The paging rule reads that as the reader
+   *   having arrived at the head and pages again, and again.
+   * - The anchored Turn falls outside that window, so the anchor cannot find
+   *   its element, drops the anchor and corrects nothing — measured, 655px of
+   *   history arrived and `scrollTop` held at 23.
+   * - With the reader left at the head, the boundary never re-arms.
+   *
+   * The amount is a delta and not a total: the height of exactly the items that
+   * arrived above, read from the virtualizer's own placement of the item that
+   * used to be first. Their heights are estimates until they measure, so this
+   * lands close rather than exactly, and the anchor — which can now find its
+   * Turn — takes it the rest of the way.
+   */
+  const firstItemKeyRef = useRef<string | null>(null);
+  /**
+   * The scroll range as of the last render, so a prepend can be told what the
+   * transcript actually grew by rather than only what was reserved for it.
+   */
+  const previousScrollHeightRef = useRef(0);
+  useLayoutEffect(() => {
+    const previousFirstKey = firstItemKeyRef.current;
+    const nextFirstKey = virtualItems[0] ? getVirtualItemStableKey(virtualItems[0]) : null;
+    firstItemKeyRef.current = nextFirstKey;
 
-      waiter = {
-        cancel: () => finish(false),
-        restart: () => {
-          if (settled) {
-            return;
-          }
-          if (timerId !== null) {
-            window.clearTimeout(timerId);
-            timerId = null;
-          }
-          timerId = window.setTimeout(check, HISTORY_PRESENTATION_COMMIT_SCROLL_QUIET_MS);
-        },
-      };
-      historyPresentationCommitQuietWaitersRef.current.add(waiter);
-      check();
+    const scroller = scrollerElementRef.current;
+    if (!scroller) return;
+    const previousScrollHeightPx = previousScrollHeightRef.current;
+    previousScrollHeightRef.current = scroller.scrollHeight;
+    if (previousFirstKey === null || previousFirstKey === nextFirstKey) return;
+    // Absent means the head was trimmed rather than extended, and there is no
+    // prepended height to account for.
+    const movedTo = virtualItems.findIndex(
+      item => getVirtualItemStableKey(item) === previousFirstKey,
+    );
+    if (movedTo <= 0) return;
+    /*
+     * The rows that arrived are already in the DOM at their real heights, and
+     * the cache still holds the estimates it reserved for them: the library
+     * skips its inline measurement while the reader is scrolling, and history
+     * arrives only then. Measuring here is the difference between a
+     * compensation derived from a guess and one derived from the layout the
+     * reader is looking at.
+     */
+    virtualizer.measureRenderedItems();
+    const arrived = virtualizer.getItemBounds(movedTo);
+    const head = virtualizer.getItemBounds(0);
+    if (!arrived || !head) return;
+    const prependedPx = arrived.startPx - head.startPx;
+    if (prependedPx <= 0) return;
+    /*
+     * A displacement, not a position, which is why it is a shift and not a
+     * write. It is left to whoever already holds a target — the follow loop
+     * re-asserting it, a navigation reaching a Turn — and to nobody else.
+     *
+     * A gesture in particular cannot refuse it. History pages in only while the
+     * reader is scrolling up into it, so routing this through the priority
+     * order refused every compensation there ever was.
+     */
+    const fromPx = scroller.scrollTop;
+    /*
+     * Three bounds on how far the reader has to move, and the smallest wins.
+     *
+     * Each is an upper bound on the true amount, and they fail in different
+     * directions, so the smallest is the only one that cannot overshoot:
+     *
+     * - `prependedPx` is what the virtualizer *reserved* for the items that
+     *   arrived. It over-states while they are estimates, and they are
+     *   estimates exactly when this runs: the DOM has already rendered them at
+     *   their real heights, and the measurement cache has not heard yet.
+     *   Measured, twice in one session: 2174px reserved against 670px of real
+     *   growth, then 2494px against 949px.
+     * - `scrollRangeGrowthPx` is what the scroll range actually gained, which
+     *   is the DOM's own answer. It over-states only if the transcript also
+     *   grew below the reader in the same commit.
+     * - What the range can absorb before the reader is inside the reserved
+     *   blank. Content arriving above them cannot push them past the end of the
+     *   transcript, so needing more than this is proof the amount is wrong.
+     *
+     * Overshooting is the expensive direction: it puts the reader below the
+     * content end, where the snap back correctly reads them as parked in the
+     * blank and returns them to the tail — which, since paging happens only
+     * while scrolling up, it then did on every attempt. Undershooting leaves
+     * them looking at slightly earlier content, which the anchor removes.
+     */
+    const contentEndPx = readContentEndScrollTop(scroller);
+    const scrollRangeGrowthPx = scroller.scrollHeight - previousScrollHeightPx;
+    const shiftedPx = Math.max(0, Math.min(
+      prependedPx,
+      scrollRangeGrowthPx,
+      contentEndPx - fromPx,
+    ));
+    const compensated = shiftedPx > 0 && viewportOwner.shift(shiftedPx);
+    /*
+     * This one movement is made on the anchor's behalf, so it is the one it
+     * must not read as the reader having scrolled. Everything else that changes
+     * `scrollTop` between two of its corrections is somebody's deliberate
+     * movement, and the anchor is right to leave those alone.
+     */
+    if (compensated) viewportAnchor.absorbViewportShift(shiftedPx);
+    /*
+     * Both amounts, because their disagreement is the diagnosis. `prependedPx`
+     * against what the scroll range actually grew by says how far the cache is
+     * ahead of the DOM; against `shiftedPx` it says how much of the
+     * compensation had to be given up, which is what the reader feels as a
+     * jump that the anchor then has to finish undoing.
+     */
+    traceViewport({
+      location: 'virtualMessageList.prependCompensated',
+      message: 'history arrived above the reader',
+      data: () => ({
+        compensated,
+        prependedPx: roundViewportPx(prependedPx),
+        shiftedPx: roundViewportPx(shiftedPx),
+        scrollRangeGrowthPx: roundViewportPx(scrollRangeGrowthPx),
+        itemsAbove: movedTo,
+        fromPx: roundViewportPx(fromPx),
+        contentEndPx: roundViewportPx(contentEndPx),
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+        // The baseline every later `anchor.correct` in this settle is read
+        // against: a correction that arrives with the range unchanged is a
+        // compensation that over-shot, and one that arrives with the range
+        // smaller is the transcript above the reader measuring down.
+        scrollRangePx: roundViewportPx(scroller.scrollHeight),
+        presentationMode,
+      }),
     });
-  }, []);
+  }, [
+    presentationMode,
+    readContentEndScrollTop,
+    viewportAnchor,
+    viewportOwner,
+    virtualItems,
+    virtualizer,
+  ]);
 
-  const notifyUserScrollIntent = useCallback((reason = 'user-scroll-intent') => {
-    lastUserScrollIntentAtMsRef.current = performance.now();
-    restartHistoryPresentationCommitQuietWaiters();
-    if (historyProjectionHandoffRef.current) {
-      clearHistoryProjectionHandoffRef.current(reason);
-    }
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.notifyUserScrollIntent',
-        message: 'User scroll intent requested viewport ownership release',
-        data: () => {
-          const scroller = scrollerElementRef.current;
-          return {
-            reason,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-            isFollowingOutput: isFollowingOutputRef.current,
-            isStreamingOutput: isStreamingOutputRef.current,
-            reservation: bottomReservationStateRef.current,
-            pendingCollapseIntent: pendingCollapseIntentRef.current.active,
-            scrollTop: scroller?.scrollTop ?? null,
-            scrollHeight: scroller?.scrollHeight ?? null,
-            clientHeight: scroller?.clientHeight ?? null,
-          };
-        },
-      });
-    }
-    clearRetainedCollapseSettlement();
-    retainedCollapseAnchorRef.current = null;
-    exitPinnedViewportForUserIntentRef.current(reason);
-    followOutputControllerRef.current.handleUserScrollIntent();
+  useLayoutEffect(() => {
+    viewportAnchor.openSettleWindow();
+  }, [viewportAnchor, virtualItems]);
+
+  const notifyUserScrollIntent = useCallback(() => {
+    /*
+     * The reader outranks everything, and the claim is what makes that true of
+     * writers that are already in flight rather than only of ones yet to
+     * start. It lapses on its own after the same window the anchor uses to
+     * decide a scroll was theirs — a gesture has no completion event, so the
+     * hold has to end by itself or nothing below it could ever write again.
+     */
+    viewportOwner.claim('user-gesture', { holdForMs: USER_DRIVEN_SCROLL_WINDOW_MS });
+    /*
+     * The claim alone does not reach the library's re-aim. It goes on
+     * recomputing its target for five seconds and writes again whenever a
+     * measurement moves it, and the claim only refuses those writes while the
+     * gesture's own hold is live — 200ms after the last wheel notch, against a
+     * five-second re-aim. Measured: a Turn navigation placed at 5358, the
+     * reader took over 6ms later, and 12ms after that the re-aim asked for
+     * 7784 and was refused. Nothing had ended it; it was still armed when the
+     * recording stopped.
+     */
+    virtualizer.cancelAim();
+    viewportAnchor.markUserScrollIntent();
+    handleUserScrollIntent();
     onUserScrollIntent?.();
+    /*
+     * A gesture that moves nothing is still the reader asking to go up, and it
+     * is the only signal there is once they are already at the top: the wheel
+     * emits no `scroll` event when the offset cannot change, so the scroll
+     * handler's evaluation never runs.
+     *
+     * Measured on a tail window of three Turns that fitted inside the viewport,
+     * so the whole scroll range was reserved blank: twenty gestures over seven
+     * seconds produced twenty `user-gesture` claims, no scroll events, and not
+     * one boundary evaluation. The only evaluations in that session landed in
+     * the three milliseconds after each snap back handed the viewport to
+     * follow-output, and were refused for that reason. Nothing could ever page.
+     *
+     * After `handleUserScrollIntent`, which clears follow-output's ownership
+     * synchronously — so this asks as the reader rather than as our placement.
+     */
+    evaluateHistoryBoundariesRef.current();
   }, [
-    clearRetainedCollapseSettlement,
+    handleUserScrollIntent,
     onUserScrollIntent,
-    restartHistoryPresentationCommitQuietWaiters,
+    viewportAnchor,
+    viewportOwner,
+    virtualizer,
   ]);
 
-  const syncPhysicalBottomAfterViewportResize = useCallback((scroller: HTMLElement): boolean => {
-    if (!canProcessViewportGeometry(scroller)) {
-      return false;
-    }
-    const previousGeometry = previousScrollerGeometryRef.current;
-    if (!previousGeometry) {
-      return false;
-    }
-
-    // A growing message/footer changes scrollHeight, not the viewport. Only a
-    // client-height change is a real viewport resize that should preserve a
-    // physical-bottom anchor; otherwise a newly appended footer would push the
-    // existing transcript upward by re-pinning to the new bottom.
-    const viewportHeightChanged =
-      Math.abs(scroller.clientHeight - previousGeometry.clientHeight) > COMPENSATION_EPSILON_PX;
-    if (
-      !viewportHeightChanged ||
-      pendingCollapseIntentRef.current.active ||
-      retainedCollapseAnchorRef.current !== null
-    ) {
-      return false;
-    }
-
-    const previousMaxScrollTop = Math.max(0, previousGeometry.scrollHeight - previousGeometry.clientHeight);
-    const wasAtPhysicalBottom =
-      Math.abs(previousMaxScrollTop - previousGeometry.scrollTop) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX;
-    if (!wasAtPhysicalBottom) {
-      return false;
-    }
-
-    const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-    const ownsElementAnchor = viewportCoordinatorRef.current.ownsElementAnchor();
-    const isFollowingTail = (
-      isFollowingOutputRef.current &&
-      isStreamingOutputRef.current &&
-      viewportCoordinatorRef.current.getMode() === 'following-tail'
-    );
-    const willWrite = shouldSyncPhysicalBottom({
-      viewportHeightChanged,
-      collapseProtectionActive: pendingCollapseIntentRef.current.active,
-      wasAtPhysicalBottom,
-      ownsElementAnchor,
-      isFollowingTail,
-    }) && Math.abs(maxScrollTop - scroller.scrollTop) > COMPENSATION_EPSILON_PX;
-    if (ownsElementAnchor) {
-      viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'viewport-resize');
-      previousScrollTopRef.current = scroller.scrollTop;
-      recordScrollerGeometry(scroller);
-      return true;
-    }
-
-    if (willWrite) {
-      scroller.scrollTop = maxScrollTop;
-    }
-    previousScrollTopRef.current = scroller.scrollTop;
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-    recordScrollerGeometry(scroller);
-    return true;
-  }, [canProcessViewportGeometry, recordScrollerGeometry, snapshotMeasuredContentHeight]);
-
-  const updateBottomReservationState = useCallback((
-    updater: BottomReservationState | ((prev: BottomReservationState) => BottomReservationState),
-  ) => {
-    const previous = bottomReservationStateRef.current;
-    const rawNext = typeof updater === 'function' ? updater(previous) : updater;
-    const sanitizedNext = sanitizeBottomReservationState(rawNext);
-    const hasNextCollapseReservation = (
-      sanitizedNext.collapse.px > COMPENSATION_EPSILON_PX ||
-      sanitizedNext.collapse.floorPx > COMPENSATION_EPSILON_PX
-    );
-    const next = hasNextCollapseReservation && collapseReservationOwnerRef.current === null
-      ? sanitizeBottomReservationState({
-        ...sanitizedNext,
-        collapse: {
-          ...sanitizedNext.collapse,
-          px: 0,
-          floorPx: 0,
-        },
-      })
-      : sanitizedNext;
-    if (
-      hasNextCollapseReservation &&
-      collapseReservationOwnerRef.current === null &&
-      flowChatDiagnostics.isEnabled()
-    ) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'C',
-        location: 'VirtualMessageList.updateBottomReservationState',
-        message: 'Anonymous collapse reservation was rejected',
-        data: () => ({
-          before: previous,
-          rejected: sanitizedNext,
-          accepted: next,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-        }),
-      });
-    }
-    if (
-      next.collapse.px <= COMPENSATION_EPSILON_PX &&
-      !pendingCollapseIntentRef.current.active &&
-      retainedCollapseAnchorRef.current === null
-    ) {
-      clearCollapseReservationOwner();
-    }
-    if (
-      flowChatDiagnostics.isEnabled() &&
-      !areBottomReservationStatesEqual(previous, next)
-    ) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.updateBottomReservationState',
-        message: 'Bottom reservation state changed',
-        data: () => ({
-          before: previous,
-          after: next,
-          collapseReservationOwner: collapseReservationOwnerRef.current,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-        }),
-      });
-    }
-    bottomReservationStateRef.current = next;
-    setBottomReservationState(prev => {
-      return areBottomReservationStatesEqual(next, prev) ? prev : next;
+  const updateVisibleTurnInfoFromViewport = useCallback(() => {
+    const scroller = scrollerElementRef.current;
+    if (!scroller) return;
+    const scrollerRect = scroller.getBoundingClientRect();
+    const viewportEntries = Array.from(
+      scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper[data-turn-id]'),
+    ).map(element => {
+      const rect = element.getBoundingClientRect();
+      return {
+        turnId: element.dataset.turnId ?? null,
+        itemType: element.dataset.itemType ?? null,
+        top: rect.top,
+        bottom: rect.bottom,
+      };
     });
-  }, [clearCollapseReservationOwner]);
-
-  const clearTurnPinRequest = useCallback(() => {
-    turnPinRequestGenerationRef.current += 1;
-    pendingTurnPinGenerationRef.current = null;
-    activeTurnPinRequestRef.current = null;
-    preparedHistoryTurnPinRef.current = null;
-    transientTurnPinStabilizationRef.current = null;
-
-    if (turnPinStabilizationFrameRef.current !== null) {
-      cancelAnimationFrame(turnPinStabilizationFrameRef.current);
-      turnPinStabilizationFrameRef.current = null;
-    }
-
-    setPendingTurnPin(null);
-  }, []);
-
-  const settleBestEffortTurnPin = useCallback((request: PendingTurnPinState) => {
-    if (request.alignmentPolicy !== 'best-effort') {
-      return false;
-    }
-
-    transientTurnPinStabilizationRef.current = null;
-    if (viewportCoordinatorRef.current.getMode() === 'pinned-item') {
-      viewportCoordinatorRef.current.release('best-effort-turn-pin-settled');
-    }
-    clearTurnPinRequest();
-    return true;
-  }, [clearTurnPinRequest]);
-
-  const cancelLatestEndAnchorStabilization = useCallback(() => {
-    if (latestEndAnchorStabilizationFrameRef.current !== null) {
-      cancelAnimationFrame(latestEndAnchorStabilizationFrameRef.current);
-      latestEndAnchorStabilizationFrameRef.current = null;
-    }
-    latestEndAnchorRequestRef.current = null;
-  }, []);
+    const visibleTurnIds = resolveVisibleFlowChatTurnIds(
+      viewportEntries,
+      scrollerRect.top,
+      scrollerRect.bottom,
+    );
+    const currentTurnId = visibleTurnIds[0] ?? null;
+    const currentTurn = currentTurnId
+      ? userMessageItems.find(({ item }) => item.turnId === currentTurnId)
+      : undefined;
+    const store = useModernFlowChatStore.getState();
 
-  const activateTransientTurnPinStabilization = useCallback((request: PendingTurnPinState) => {
-    if (request.pinMode !== 'transient') {
+    if (!currentTurn || currentTurn.item.type !== 'user-message') {
+      if (store.visibleTurnInfo !== null) store.setVisibleTurnInfo(null);
       return;
     }
 
-    const current = transientTurnPinStabilizationRef.current;
-    const continuesCurrentRequest = current?.generation === request.generation;
-    transientTurnPinStabilizationRef.current = {
-      ...request,
-      behavior: 'auto',
-      attempts: continuesCurrentRequest
-        ? Math.max(request.attempts + 1, current.attempts)
-        : request.attempts + 1,
-      stableAlignedFrames: continuesCurrentRequest ? current.stableAlignedFrames : 0,
-      lastScrollTop: continuesCurrentRequest ? current.lastScrollTop : null,
-      lastTargetTop: continuesCurrentRequest ? current.lastTargetTop : null,
+    const nextVisibleTurnInfo = {
+      turnIndex: userMessageItems.indexOf(currentTurn) + 1,
+      totalTurns: userMessageItems.length,
+      userMessage: currentTurn.item.data.content ?? '',
+      turnId: currentTurn.item.turnId,
+      visibleTurnIds,
     };
-  }, []);
+    const previous = store.visibleTurnInfo;
+    const unchanged = previous?.turnId === nextVisibleTurnInfo.turnId
+      && previous.turnIndex === nextVisibleTurnInfo.turnIndex
+      && previous.totalTurns === nextVisibleTurnInfo.totalTurns
+      && previous.userMessage === nextVisibleTurnInfo.userMessage
+      && previous.visibleTurnIds.length === visibleTurnIds.length
+      && previous.visibleTurnIds.every((turnId, index) => turnId === visibleTurnIds[index]);
+    if (!unchanged) store.setVisibleTurnInfo(nextVisibleTurnInfo);
+  }, [userMessageItems]);
 
-  const resetBottomReservations = useCallback(() => {
-    clearCollapseReservationOwner();
-    updateBottomReservationState(createInitialBottomReservationState());
-  }, [clearCollapseReservationOwner, updateBottomReservationState]);
+  const scheduleVisibleTurnInfoUpdate = useCallback(() => {
+    if (visibleTurnUpdateFrameRef.current !== null) return;
+    visibleTurnUpdateFrameRef.current = requestAnimationFrame(() => {
+      visibleTurnUpdateFrameRef.current = null;
+      updateVisibleTurnInfoFromViewport();
+    });
+  }, [updateVisibleTurnInfoFromViewport]);
 
-  const consumeBottomCompensation = useCallback((
-    amountPx: number,
-    options?: {
-      consumeStickyPinFloor?: boolean;
-      preserveCollapseReservation?: boolean;
-    },
-  ) => {
-    if (amountPx <= COMPENSATION_EPSILON_PX) {
-      return bottomReservationStateRef.current;
+  useEffect(() => () => {
+    if (visibleTurnUpdateFrameRef.current !== null) {
+      cancelAnimationFrame(visibleTurnUpdateFrameRef.current);
+      visibleTurnUpdateFrameRef.current = null;
     }
+  }, []);
 
-    let resolvedNextState = bottomReservationStateRef.current;
-    updateBottomReservationState(prev => {
-      const nextState = consumeBottomReservationForContentGrowth(
-        prev,
-        amountPx,
-        options?.consumeStickyPinFloor === true,
-        options?.preserveCollapseReservation === true,
+  /*
+   * Opening reveal.
+   *
+   * A session mounts against an unmeasured transcript: for the first frames the
+   * real content is a few hundred pixels of estimate, so the end of content
+   * genuinely *is* the top, and the settle then walks the viewport down as items
+   * measure and history pages in. Every step of that walk is correct and every
+   * step is visible, which reads as a flash. Hold the transcript hidden — laid
+   * out and measurable, just not painted — until it stops moving.
+   */
+  useLayoutEffect(() => {
+    if (!scrollerElement || isOpenViewportSettled) return;
+
+    let frame = 0;
+    let quietFrames = 0;
+    let rafId: number | null = null;
+    const lastVirtualIndex = virtualItems.length - 1;
+
+    const check = () => {
+      frame += 1;
+      /*
+       * Geometry stability is not a settle signal on its own: before the virtualizer
+       * renders anything, `scrollHeight` and the content end sit unchanged at
+       * their unmeasured values, which is indistinguishable from having
+       * finished. Require the last item to actually be rendered with its end
+       * inside the viewport — that is the thing the reveal is waiting for.
+       */
+      const lastItem = scrollerElement.querySelector<HTMLElement>(
+        `.virtual-item-wrapper[data-virtual-index="${lastVirtualIndex}"]`,
       );
-      resolvedNextState = nextState;
-      return nextState;
-    });
-    return resolvedNextState;
-  }, [updateBottomReservationState]);
+      const contentEnd = readContentEndScrollTop(scrollerElement);
+      const inPosition = Math.abs(scrollerElement.scrollTop - contentEnd) <= AT_CONTENT_END_THRESHOLD_PX;
+      const tailVisible = lastItem !== null
+        && lastItem.getBoundingClientRect().bottom
+          <= scrollerElement.getBoundingClientRect().bottom + AT_CONTENT_END_THRESHOLD_PX;
+      quietFrames = tailVisible && inPosition ? quietFrames + 1 : 0;
+
+      if (quietFrames >= OPEN_REVEAL_QUIET_FRAMES || frame >= OPEN_REVEAL_MAX_FRAMES) {
+        /*
+         * Revealed on the frame cap rather than on quiet means the transcript
+         * was still moving when it became visible, which is what the reader
+         * reports as the session flickering on open.
+         */
+        traceViewport({
+          location: 'virtualMessageList.openReveal',
+          message: 'transcript revealed',
+          data: () => ({
+            settled: quietFrames >= OPEN_REVEAL_QUIET_FRAMES,
+            frames: frame,
+            itemCount: virtualItems.length,
+            scrollTopPx: roundViewportPx(scrollerElement.scrollTop),
+            contentEndPx: roundViewportPx(readContentEndScrollTop(scrollerElement)),
+          }),
+        });
+        setIsOpenViewportSettled(true);
+        return;
+      }
+      rafId = requestAnimationFrame(check);
+    };
+    rafId = requestAnimationFrame(check);
 
-  const applyFooterCompensationNow = useCallback((compensation: BottomReservationState) => {
-    const footer = footerElementRef.current;
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [isOpenViewportSettled, readContentEndScrollTop, scrollerElement, virtualItems.length]);
+
+  /*
+   * "At the bottom" is a band, not a point. Its upper edge is the end of real
+   * content and its lower edge is whatever the follow rule owns, so a pinned
+   * Turn and a held collapse gap both count as being at the end — neither is a
+   * reason to offer a jump to the latest output. Below the band is reserved
+   * blank, which is: without the lower edge, parking a viewport deep in the
+   * spacer read as "at the bottom" and hid the only way back.
+   */
+  const updateIsAtBottom = useCallback(() => {
     const scroller = scrollerElementRef.current;
-    if (!footer || !scroller) return;
-
-    const appliedState = areBottomReservationStatesEqual(
-      compensation,
-      bottomReservationStateRef.current,
-    )
-      ? compensation
-      : bottomReservationStateRef.current;
-    const compensationPx = getTotalBottomCompensationPx(appliedState);
-    applyFooterHeightToElement(footer, compensationPx);
-    void footer.offsetHeight;
-    void scroller.scrollHeight;
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'C',
-        location: 'VirtualMessageList.applyFooterCompensationNow',
-        message: 'Footer compensation applied synchronously',
-        data: () => ({
-          compensationPx,
-          renderedHeight: footer.getBoundingClientRect().height,
-          scrollTop: scroller.scrollTop,
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-        }),
-      });
-    }
-  }, [applyFooterHeightToElement, getTotalBottomCompensationPx]);
-
-  const clearBottomReservationsForUserBrowsing = useCallback(() => {
-    const currentState = bottomReservationStateRef.current;
-    const nextState = createInitialBottomReservationState();
-    pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-    retainedCollapseAnchorRef.current = null;
-    clearCollapseReservationOwner();
+    if (!scroller) return;
+    const contentEnd = readContentEndScrollTop(scroller);
+    /*
+     * A follow still travelling counts as being at the end.
+     *
+     * The follow's write is eased, so it rides a little behind the offset it
+     * owns by design, and what it is behind is arriving on its own. Judged on
+     * the raw offset, a burst of two or three lines drops the viewport out of
+     * the band for a few frames and flashes the jump-to-latest bar over a
+     * transcript that is already following the newest output — and clicking it
+     * would have nothing to do. Ownership alone cannot stand in for this: it
+     * outlives the frame loop, which is exactly the state a viewport stranded
+     * in the reserved blank is in.
+     */
+    const atTail = isFollowCorrectingViewport() || isViewportAtTail({
+      scrollTop: scroller.scrollTop,
+      contentEndScrollTop: contentEnd,
+      // Nothing owns an offset outside follow, so the band collapses onto the
+      // content end.
+      followTargetScrollTop: getFollowTargetScrollTop() ?? contentEnd,
+      thresholdPx: AT_CONTENT_END_THRESHOLD_PX,
+    });
+    // Mirrored to a ref because a resize needs the answer from before it, and
+    // the state update does not land until the next render.
+    isAtTailRef.current = atTail;
+    setIsAtBottom(atTail);
+  }, [getFollowTargetScrollTop, isFollowCorrectingViewport, readContentEndScrollTop]);
+
+  /*
+   * The band's lower edge is whatever the follow rule owns, so it moves when
+   * ownership changes — and that can happen with the viewport perfectly still.
+   * A snap back completes at rest by construction, and a jump to latest that
+   * lands on a pin the viewport is already on writes nothing. Neither produces
+   * a scroll event, so without this the affordance stays as the last scroll
+   * left it: visible, over a viewport that is already at the tail, and inert
+   * because clicking it has nothing left to do.
+   */
+  useEffect(() => {
+    updateIsAtBottom();
+  }, [isFollowingOutput, updateIsAtBottom]);
+
+  /*
+   * Snap out of the reserved blank once a gesture is over.
+   *
+   * `scrollend` is the accurate signal — it knows when momentum has actually
+   * died, which a quiet timer can only approximate — but it is recent enough
+   * that the WebKit-backed builds may not have it. Where it is missing, a quiet
+   * period after the last scroll event stands in.
+   */
+  useEffect(() => {
+    if (!scrollerElement) return;
 
-    if (areBottomReservationStatesEqual(currentState, nextState)) {
-      return;
+    if ('onscrollend' in window) {
+      const handleScrollEnd = () => {
+        handleScrollSettled();
+      };
+      scrollerElement.addEventListener('scrollend', handleScrollEnd, { passive: true });
+      return () => scrollerElement.removeEventListener('scrollend', handleScrollEnd);
     }
 
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
+    let settleTimer: number | null = null;
+    const handleScrollTick = () => {
+      if (settleTimer !== null) window.clearTimeout(settleTimer);
+      settleTimer = window.setTimeout(() => {
+        settleTimer = null;
+        handleScrollSettled();
+      }, SCROLL_SETTLE_FALLBACK_MS);
+    };
+    scrollerElement.addEventListener('scroll', handleScrollTick, { passive: true });
+    return () => {
+      if (settleTimer !== null) window.clearTimeout(settleTimer);
+      scrollerElement.removeEventListener('scroll', handleScrollTick);
+    };
+  }, [handleScrollSettled, scrollerElement]);
+
+  /*
+   * A rollback removed Turns from the session, so the transcript ends somewhere
+   * it did not a moment ago — and the Turn follow-output was pinning may be one
+   * of the ones that stopped existing. The follow rule settles on the new tail;
+   * it declines for a reader who owns the viewport, which is the case when the
+   * rollback came from the middle of a transcript they were reading.
+   */
+  useEffect(() => {
+    const handleTurnsRolledBackEvent = (event: Event) => {
+      const detail = (event as CustomEvent<FlowChatTurnsRolledBackRequest>).detail;
+      if (!detail?.sessionId || detail.sessionId !== activeSessionId) return;
+      handleTurnsRolledBack();
+    };
+    window.addEventListener(FLOWCHAT_TURNS_ROLLED_BACK_EVENT, handleTurnsRolledBackEvent);
+    return () => {
+      window.removeEventListener(FLOWCHAT_TURNS_ROLLED_BACK_EVENT, handleTurnsRolledBackEvent);
+    };
+  }, [activeSessionId, handleTurnsRolledBack]);
 
-    const scroller = scrollerElementRef.current;
-    if (scroller) {
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextState);
-      recordScrollerGeometry(scroller);
-    }
+  useEffect(() => {
+    if (!scrollerElement) return;
+    const handleNativeScroll = () => {
+      /*
+       * A scroll under a scrollbar press is the one case where a plain scroll
+       * event does carry intent — the press is what qualifies it. Left
+       * unqualified, a drag never released the viewport: follow-output kept
+       * writing its target every frame against the thumb (measured: a 100px
+       * oscillation, every frame, for as long as the drag lasted), and a drag
+       * that came to rest in the reserved blank was skipped by the snap back
+       * because follow still nominally owned it.
+       */
+      if (isScrollbarPressRef.current) notifyUserScrollIntent();
+      updateIsAtBottom();
+      handleScroll();
+      /*
+       * Re-anchor to wherever the user has arrived, and only there. The rule
+       * for "was this scroll the user's" lives with the anchor.
+       */
+      viewportAnchor.captureAnchorForScroll();
+      scheduleVisibleTurnInfoUpdate();
+      /*
+       * Paging is a question about where the reader is, so a scroll is its
+       * primary input. Through a ref: this listener must not be torn down and
+       * re-attached every time the transcript changes.
+       */
+      evaluateHistoryBoundariesRef.current();
+    };
+    const handleWheel = () => notifyUserScrollIntent();
+    const handleTouchMove = () => notifyUserScrollIntent();
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(event.key)) {
+        notifyUserScrollIntent();
+      }
+    };
+    /*
+     * Arming rather than releasing outright: `scrollbar-gutter: stable` keeps
+     * the gutter reserved whether or not a bar is drawn in it, so a press there
+     * is only intent once something actually scrolls. A click on the thumb that
+     * moves nothing leaves the viewport where it was.
+     */
+    const handlePointerDown = (event: PointerEvent) => {
+      isScrollbarPressRef.current = isScrollbarPress(event, scrollerElement);
+    };
+    const handlePointerRelease = () => {
+      isScrollbarPressRef.current = false;
+    };
+    scrollerElement.addEventListener('scroll', handleNativeScroll, { passive: true });
+    scrollerElement.addEventListener('wheel', handleWheel, { passive: true });
+    scrollerElement.addEventListener('touchmove', handleTouchMove, { passive: true });
+    scrollerElement.addEventListener('keydown', handleKeyDown);
+    scrollerElement.addEventListener('pointerdown', handlePointerDown, { passive: true });
+    // On the window: a drag can be released anywhere, including outside it.
+    window.addEventListener('pointerup', handlePointerRelease, { passive: true });
+    window.addEventListener('pointercancel', handlePointerRelease, { passive: true });
+    return () => {
+      scrollerElement.removeEventListener('scroll', handleNativeScroll);
+      scrollerElement.removeEventListener('wheel', handleWheel);
+      scrollerElement.removeEventListener('touchmove', handleTouchMove);
+      scrollerElement.removeEventListener('keydown', handleKeyDown);
+      scrollerElement.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('pointerup', handlePointerRelease);
+      window.removeEventListener('pointercancel', handlePointerRelease);
+    };
   }, [
-    applyFooterCompensationNow,
-    clearCollapseReservationOwner,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
+    handleScroll,
+    notifyUserScrollIntent,
+    scheduleVisibleTurnInfoUpdate,
+    scrollerElement,
+    updateIsAtBottom,
+    viewportAnchor,
   ]);
 
-  const preserveCollapseAnchorScrollTop = useCallback((
-    scroller: HTMLElement,
-    targetScrollTop: number,
-    source: string,
-  ) => {
-    const currentState = bottomReservationStateRef.current;
-    const nextState = ensureCollapseReservationForScrollTop(currentState, {
-      targetScrollTop,
-      scrollHeight: scroller.scrollHeight,
-      clientHeight: scroller.clientHeight,
-    });
-    const reservationChanged = !areBottomReservationStatesEqual(currentState, nextState);
-    if (reservationChanged) {
-      if (
-        nextState.collapse.px > COMPENSATION_EPSILON_PX &&
-        collapseReservationOwnerRef.current === null
-      ) {
-        acquireCollapseReservationOwner('preserved-element');
+  useEffect(() => {
+    if (!scrollerElement) return;
+    const observer = new ResizeObserver(() => {
+      const nextViewportBox = {
+        width: scrollerElement.clientWidth,
+        height: scrollerElement.clientHeight,
+      };
+      /*
+       * This observer watches the content too. Content growth moves the follow
+       * target away from a resting viewport and can never strand it, so only a
+       * change to the scroller's own box opens the re-alignment window — a
+       * width change reflows the transcript, a height change moves the content
+       * end directly, and both keep settling for a few callbacks afterwards.
+       */
+      const previousViewportBox = observedViewportBoxRef.current;
+      const viewportBoxChanged = nextViewportBox.width !== previousViewportBox.width
+        || nextViewportBox.height !== previousViewportBox.height;
+      if (viewportBoxChanged) {
+        observedViewportBoxRef.current = nextViewportBox;
+        tailRealignCallbacksRef.current = TAIL_REALIGN_RESIZE_CALLBACKS;
+      }
+      setViewportHeightPx(nextViewportBox.height);
+
+      /*
+       * Before paint, and ahead of everything below: this observer is the one
+       * callback the browser delivers between the transcript changing height
+       * and the frame being painted, which is the only place a correction can
+       * still be invisible. A viewport box change is not a content shift, so a
+       * genuine resize re-anchors instead of correcting.
+       */
+      if (viewportBoxChanged) {
+        viewportAnchor.captureAnchor();
+      } else {
+        viewportAnchor.openSettleWindow();
+      }
+
+      if (tailRealignCallbacksRef.current > 0) {
+        tailRealignCallbacksRef.current -= 1;
+        handleViewportResize({
+          // Non-zero only on the callback that carries the change itself; the
+          // rest of the window is there for the reflow settling afterwards.
+          viewportHeightDeltaPx: viewportBoxChanged
+            ? nextViewportBox.height - previousViewportBox.height
+            : 0,
+          // The band check from before this resize, so this must run ahead of
+          // `updateIsAtBottom` below.
+          wasAtTail: isAtTailRef.current,
+        });
       }
-      updateBottomReservationState(nextState);
-      applyFooterCompensationNow(nextState);
-    }
 
-    const scrollTopBefore = scroller.scrollTop;
-    const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-    const restoredScrollTop = Math.min(maxScrollTop, Math.max(scrollTopBefore, targetScrollTop));
-    const scrollTopChanged = restoredScrollTop - scrollTopBefore > COMPENSATION_EPSILON_PX;
-    if (scrollTopChanged) {
-      scroller.scrollTop = restoredScrollTop;
-    }
-
-    if (flowChatDiagnostics.isEnabled() && (reservationChanged || scrollTopChanged)) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'E',
-        location: 'VirtualMessageList.preserveCollapseAnchorScrollTop',
-        message: 'Collapse anchor range restored synchronously',
-        data: () => ({
-          source,
-          targetScrollTop,
-          scrollTopBefore,
-          scrollTopAfter: scroller.scrollTop,
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-          reservationBefore: currentState,
-          reservationAfter: bottomReservationStateRef.current,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-        }),
-      });
-    }
-
-    previousScrollTopRef.current = scroller.scrollTop;
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(
-      scroller,
-      bottomReservationStateRef.current,
-    );
-    recordScrollerGeometry(scroller);
-    return reservationChanged || scrollTopChanged;
+      scheduleFollowToLatest();
+      scheduleVisibleTurnInfoUpdate();
+      updateIsAtBottom();
+    });
+    /*
+     * The virtualizer's own first child is a viewport-sized box — it stays at
+     * the scroller's height no matter how much transcript there is, so
+     * observing it never reported a content change at all. The item list is
+     * the element that grows, and its padding is where the virtualizer parks
+     * item space, which the content box does not include.
+     */
+    const content = scrollerElement.querySelector('[data-testid="flowchat-item-list"]')
+      ?? scrollerElement.firstElementChild;
+    if (content) observer.observe(content, { box: 'border-box' });
+    observer.observe(scrollerElement);
+    return () => observer.disconnect();
   }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
+    handleViewportResize,
+    scheduleFollowToLatest,
+    scheduleVisibleTurnInfoUpdate,
+    scrollerElement,
+    updateIsAtBottom,
+    viewportAnchor,
   ]);
 
-  const settleRetainedCollapseRange = useCallback((reason: string, generation: number) => {
-    if (generation !== retainedCollapseSettleGenerationRef.current) {
-      return;
-    }
-    const retainedAnchor = retainedCollapseAnchorRef.current;
-    const scroller = scrollerElementRef.current;
-    if (!retainedAnchor || !scroller || pendingCollapseIntentRef.current.active) {
-      return;
+  /**
+   * Top-align a Turn, without scrolling into the reserved blank to do it.
+   *
+   * The branch is on what is *knowable*, not on where the Turn is. A rendered
+   * Turn has a resolvable offset, so the clamp is decided before anything
+   * moves and the requested behaviour survives. An unrendered one is known
+   * only to the virtualizer, so it is placed instantly and the answer read back —
+   * both writes land in the same task, so the correction costs a second scroll
+   * but not a second visible movement.
+   */
+  const navigateToTurnWithStatus = useCallback((
+    turnId: string,
+    options?: TurnNavigationOptions,
+  ): FlowChatTurnNavigationStatus => {
+    const targetIndex = virtualItems.findIndex(item => (
+      item.turnId === turnId && item.type === 'user-message'
+    ));
+    if (targetIndex < 0) {
+      traceViewport({
+        location: 'turnNavigation.rejected',
+        message: 'the requested Turn is not in the presentation',
+        data: () => ({ turnId, itemCount: virtualItems.length, presentationMode }),
+      });
+      return 'rejected';
     }
-
-    const targetScrollTop = Math.max(retainedAnchor.anchorScrollTop, scroller.scrollTop);
-    retainedAnchor.anchorScrollTop = targetScrollTop;
-    const currentState = bottomReservationStateRef.current;
-    const nextState = settleRetainedCollapseReservationForAnchor(currentState, {
-      targetScrollTop,
-      scrollHeight: scroller.scrollHeight,
-      clientHeight: scroller.clientHeight,
+    exitFollowOutput('scroll-to-turn');
+    /*
+     * Ahead of the placement, so that nothing between here and the commit that
+     * renders it can restore the position being left. The reading position the
+     * reader is choosing is the one they are about to land on.
+     */
+    viewportAnchor.reanchorAfterNavigation();
+
+    const behavior = options?.behavior === 'smooth' ? 'smooth' : 'auto';
+    const alignTurnToTop = () => virtualizer.scrollItemIntoView(targetIndex, {
+      align: 'start',
+      behavior,
+      owner: 'one-shot-navigation',
+      holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
     });
-    const reservationChanged = !areBottomReservationStatesEqual(currentState, nextState);
-    if (reservationChanged) {
-      updateBottomReservationState(nextState);
-      applyFooterCompensationNow(nextState);
-    }
-    preserveCollapseAnchorScrollTop(scroller, targetScrollTop, `quiet-settle:${reason}`);
-
-    const releaseGeneration = retainedCollapseSettleGenerationRef.current;
-    retainedCollapseGeometryGenerationRef.current += 1;
-    const scheduleReleaseWhenQuiet = (geometryGeneration: number) => {
-      retainedCollapseReleaseTimerRef.current = window.setTimeout(() => {
-        retainedCollapseReleaseTimerRef.current = null;
-        if (releaseGeneration !== retainedCollapseSettleGenerationRef.current) {
-          return;
-        }
-        const currentGeometryGeneration = retainedCollapseGeometryGenerationRef.current;
-        if (currentGeometryGeneration !== geometryGeneration) {
-          scheduleReleaseWhenQuiet(currentGeometryGeneration);
-          return;
-        }
-        retainedCollapseAnchorRef.current = null;
-        retainedCollapseGeometryGenerationRef.current = 0;
-        if (bottomReservationStateRef.current.collapse.px <= COMPENSATION_EPSILON_PX) {
-          clearCollapseReservationOwner();
-        }
-        if (flowChatDiagnostics.isEnabled()) {
-          flowChatDiagnostics.trace({
-            hypothesis: 'F',
-            location: 'VirtualMessageList.releaseSettledCollapseAnchor',
-            message: 'Settled collapse anchor released after layout remained quiet',
-            data: () => ({
-              reason,
-              retainedAnchor,
-              reservation: bottomReservationStateRef.current,
-              scrollTop: scroller.scrollTop,
-              scrollHeight: scroller.scrollHeight,
-              clientHeight: scroller.clientHeight,
-              coordinatorMode: viewportCoordinatorRef.current.getMode(),
-            }),
-          });
-        }
-      }, RETAINED_COLLAPSE_RELEASE_QUIET_MS);
+    const scroller = scrollerElementRef.current;
+    const renderedTurnTopScrollTop = resolveTurnTopScrollTop(turnId);
+    /*
+     * Which branch ran is most of the diagnosis. "It stopped on the wrong Turn"
+     * has already been a re-aim chasing a target below a moving measurement, a
+     * clamp into the reserved blank, and a window re-cut arriving underneath —
+     * and the branch, the target index and the drift afterwards tell them
+     * apart. The drift in particular: a navigation that lands and is then taken
+     * away leaves the same final position as one that never aimed right.
+     */
+    const traceNavigation = (branch: string, place: () => void, targetPx?: number) => {
+      traceViewportPlacement(
+        scroller,
+        {
+          location: 'turnNavigation.placed',
+          message: 'Turn navigation placed the viewport',
+          targetPx,
+          /*
+           * Past the navigation's own hold, always. Everything the hold is
+           * postponing happens on the frame it lapses, so a sample taken
+           * inside it can only ever report success — measured: a placement
+           * reported `driftPx: 0` at 400ms and was dragged 1653px away 11ms
+           * later, while three identical placements that were sampled after
+           * the hold all reported the drift.
+           */
+          settleAfterMs: ONE_SHOT_NAVIGATION_HOLD_MS
+            + (behavior === 'smooth' ? 900 : VIEWPORT_PLACEMENT_SETTLE_MS),
+          data: () => ({
+            branch,
+            turnId,
+            targetIndex,
+            itemCount: virtualItems.length,
+            behavior,
+            presentationMode,
+          }),
+        },
+        place,
+      );
     };
-    scheduleReleaseWhenQuiet(retainedCollapseGeometryGenerationRef.current);
 
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'F',
-        location: 'VirtualMessageList.settleRetainedCollapseRange',
-        message: 'Retained collapse range settled to current anchor geometry',
-        data: () => ({
-          reason,
-          retainedAnchor,
-          targetScrollTop,
-          reservationBefore: currentState,
-          reservationAfter: bottomReservationStateRef.current,
-          releasedPx: Math.max(
-            0,
-            getReservationTotalPx(currentState.collapse) -
-              getReservationTotalPx(bottomReservationStateRef.current.collapse),
+    if (scroller && renderedTurnTopScrollTop !== null) {
+      if (turnTopAlignmentEntersReservedBlank({
+        turnTopScrollTop: renderedTurnTopScrollTop,
+        contentEndScrollTop: readContentEndScrollTop(scroller),
+      })) {
+        traceNavigation(
+          'rendered-clamped-to-content-end',
+          () => scrollToContentEndThroughVirtualizer(
+            behavior,
+            'one-shot-navigation',
+            ONE_SHOT_NAVIGATION_HOLD_MS,
           ),
-          scrollTop: scroller.scrollTop,
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-        }),
+        );
+      } else {
+        traceNavigation('rendered-top-aligned', alignTurnToTop, renderedTurnTopScrollTop);
+      }
+      return 'settled';
+    }
+
+    // Placed instantly on purpose: an animated scroll has not arrived yet, so
+    // there would be nothing to read back. The requested behaviour is spent on
+    // the placement, which is what turn-rail navigation already asks for.
+    traceNavigation('unrendered-placed-instantly', () => {
+      virtualizer.scrollItemIntoView(targetIndex, {
+        align: 'start',
+        owner: 'one-shot-navigation',
+        holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
       });
+    });
+    if (scroller && turnTopAlignmentEntersReservedBlank({
+      turnTopScrollTop: scroller.scrollTop,
+      // Re-read: placing the viewport renders items, which re-measures the
+      // transcript and moves the content end with it.
+      contentEndScrollTop: readContentEndScrollTop(scroller),
+    })) {
+      traceNavigation(
+        'unrendered-clamped-to-content-end',
+        () => scrollToContentEndThroughVirtualizer(
+          'auto',
+          'one-shot-navigation',
+          ONE_SHOT_NAVIGATION_HOLD_MS,
+        ),
+      );
     }
+    return 'settled';
   }, [
-    applyFooterCompensationNow,
-    clearCollapseReservationOwner,
-    preserveCollapseAnchorScrollTop,
-    updateBottomReservationState,
+    exitFollowOutput,
+    presentationMode,
+    readContentEndScrollTop,
+    resolveTurnTopScrollTop,
+    scrollToContentEndThroughVirtualizer,
+    viewportAnchor,
+    virtualItems,
+    virtualizer,
   ]);
 
-  const scheduleRetainedCollapseSettlement = useCallback((reason: string) => {
-    if (
-      retainedCollapseAnchorRef.current === null ||
-      pendingCollapseIntentRef.current.active
-    ) {
-      return;
-    }
-
-    clearRetainedCollapseSettlement();
-    retainedCollapseGeometryGenerationRef.current += 1;
-    const generation = retainedCollapseSettleGenerationRef.current;
-    retainedCollapseSettleTimerRef.current = window.setTimeout(() => {
-      retainedCollapseSettleTimerRef.current = null;
-      const settleAfterFrames = (remainingFrames: number) => {
-        retainedCollapseSettleFrameRef.current = requestAnimationFrame(() => {
-          if (generation !== retainedCollapseSettleGenerationRef.current) {
-            retainedCollapseSettleFrameRef.current = null;
-            return;
-          }
-          if (remainingFrames > 1) {
-            settleAfterFrames(remainingFrames - 1);
-            return;
-          }
-          retainedCollapseSettleFrameRef.current = null;
-          settleRetainedCollapseRange(reason, generation);
-        });
-      };
-      settleAfterFrames(RETAINED_COLLAPSE_QUIET_SETTLE_FRAMES);
-    }, RETAINED_COLLAPSE_QUIET_SETTLE_MS);
-  }, [clearRetainedCollapseSettlement, settleRetainedCollapseRange]);
-
-  const retainCollapseRangeForQuietSettlement = useCallback((
-    anchor: RetainedCollapseAnchorState,
-    reason: string,
-  ) => {
-    acquireCollapseReservationOwner(
-      anchor.toolName === 'late-shrink-clamp' ? 'late-shrink-clamp' : 'retained-collapse',
-    );
-    const scroller = scrollerElementRef.current;
-    const currentState = bottomReservationStateRef.current;
-    if (currentState.collapse.px <= COMPENSATION_EPSILON_PX) {
-      clearRetainedCollapseSettlement();
-      retainedCollapseAnchorRef.current = null;
-      clearCollapseReservationOwner();
-      return;
-    }
-    const previousRetainedAnchor = retainedCollapseAnchorRef.current;
-    const nextRetainedAnchor: RetainedCollapseAnchorState = {
-      anchorScrollTop: Math.max(
-        anchor.anchorScrollTop,
-        previousRetainedAnchor?.anchorScrollTop ?? 0,
-        scroller?.scrollTop ?? 0,
-      ),
-      toolId: anchor.toolId ?? previousRetainedAnchor?.toolId ?? null,
-      toolName: anchor.toolName ?? previousRetainedAnchor?.toolName ?? null,
-    };
-    retainedCollapseAnchorRef.current = nextRetainedAnchor;
-
-    const nextState = scroller
-      ? ensureCollapseReservationForScrollTop(currentState, {
-        targetScrollTop: nextRetainedAnchor.anchorScrollTop,
-        scrollHeight: scroller.scrollHeight,
-        clientHeight: scroller.clientHeight,
-      })
-      : protectCurrentCollapseReservation(currentState);
-    if (!areBottomReservationStatesEqual(currentState, nextState)) {
-      updateBottomReservationState(nextState);
-      applyFooterCompensationNow(nextState);
-    }
-    if (scroller) {
-      preserveCollapseAnchorScrollTop(
-        scroller,
-        nextRetainedAnchor.anchorScrollTop,
-        `retain:${reason}`,
-      );
-    }
-    scheduleRetainedCollapseSettlement(reason);
-
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'E',
-        location: 'VirtualMessageList.retainCollapseRangeForQuietSettlement',
-        message: 'Collapse range retained until delayed measurements settle',
-        data: () => ({
-          reason,
-          retainedAnchor: nextRetainedAnchor,
-          reservationBefore: currentState,
-          reservationAfter: bottomReservationStateRef.current,
-          scrollTop: scroller?.scrollTop ?? null,
-          scrollHeight: scroller?.scrollHeight ?? null,
-          clientHeight: scroller?.clientHeight ?? null,
-        }),
-      });
-    }
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    clearCollapseReservationOwner,
-    clearRetainedCollapseSettlement,
-    preserveCollapseAnchorScrollTop,
-    scheduleRetainedCollapseSettlement,
-    updateBottomReservationState,
-  ]);
-
-  const clearPendingStickyPinGrowth = useCallback((_reason: string) => {
-    if (stickyPinGrowthSettleTimerRef.current !== null) {
-      window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-      stickyPinGrowthSettleTimerRef.current = null;
-    }
-    pendingStickyPinGrowthRef.current = {
-      targetTurnId: null,
-      amountPx: 0,
-    };
-  }, []);
-
-  const settlePendingStickyPinGrowth = useCallback((reason: string) => {
-    stickyPinGrowthSettleTimerRef.current = null;
-    const pending = pendingStickyPinGrowthRef.current;
-    if (pending.amountPx <= COMPENSATION_EPSILON_PX || !pending.targetTurnId) {
-      return;
-    }
-
-    const currentState = bottomReservationStateRef.current;
-    const pinReservation = currentState.pin;
-    if (
-      pinReservation.mode !== 'sticky-latest' ||
-      pinReservation.targetTurnId !== pending.targetTurnId ||
-      !viewportCoordinatorRef.current.ownsElementAnchor()
-    ) {
-      clearPendingStickyPinGrowth(`${reason}:pin-owner-changed`);
-      return;
-    }
-
-    if (pendingCollapseIntentRef.current.active) {
-      stickyPinGrowthSettleTimerRef.current = window.setTimeout(() => {
-        settlePendingStickyPinGrowthRef.current('collapse-settled-retry');
-      }, 50);
-      return;
-    }
-
-    const consumedPx = Math.min(pending.amountPx, pinReservation.floorPx);
-    pendingStickyPinGrowthRef.current = {
-      targetTurnId: null,
-      amountPx: 0,
-    };
-    if (consumedPx <= COMPENSATION_EPSILON_PX) {
-      clearPendingStickyPinGrowth(`${reason}:nothing-consumable`);
-      return;
-    }
-
-    const nextState = sanitizeBottomReservationState({
-      ...currentState,
-      pin: {
-        ...pinReservation,
-        px: pinReservation.px - consumedPx,
-        floorPx: pinReservation.floorPx - consumedPx,
-      },
-    });
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
-    const scroller = scrollerElementRef.current;
-    if (scroller) {
-      viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'sticky-pin-growth-settled');
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextState);
-      recordScrollerGeometry(scroller);
-    }
-    maybeHandoffPinnedTurnToTailRef.current(`sticky-pin-growth-settled:${reason}`);
-  }, [
-    applyFooterCompensationNow,
-    clearPendingStickyPinGrowth,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-  settlePendingStickyPinGrowthRef.current = settlePendingStickyPinGrowth;
-
-  const reconcilePendingStickyPinGrowthSettlement = useCallback((
-    reason: string,
-    options?: { preserveExistingQuietTimer?: boolean },
-  ) => {
-    const pending = pendingStickyPinGrowthRef.current;
-    const strategy = resolveStickyPinGrowthSettlementStrategy({
-      pendingGrowthPx: pending.amountPx,
-      pinFloorPx: bottomReservationStateRef.current.pin.floorPx,
-      hasActiveCollapseIntent: pendingCollapseIntentRef.current.active,
-    });
-
-    if (strategy === 'none') {
-      clearPendingStickyPinGrowth(`${reason}:nothing-pending`);
-      return;
-    }
-    if (strategy === 'settle-now') {
-      if (stickyPinGrowthSettleTimerRef.current !== null) {
-        window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-        stickyPinGrowthSettleTimerRef.current = null;
-      }
-      settlePendingStickyPinGrowthRef.current(`${reason}:threshold-reached`);
-      return;
-    }
-    if (strategy === 'wait-for-collapse') {
-      if (stickyPinGrowthSettleTimerRef.current !== null) {
-        window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-        stickyPinGrowthSettleTimerRef.current = null;
-      }
-      return;
-    }
-    if (
-      options?.preserveExistingQuietTimer &&
-      stickyPinGrowthSettleTimerRef.current !== null
-    ) {
-      return;
-    }
-
-    if (stickyPinGrowthSettleTimerRef.current !== null) {
-      window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-    }
-    stickyPinGrowthSettleTimerRef.current = window.setTimeout(() => {
-      settlePendingStickyPinGrowthRef.current('settle-timeout');
-    }, STICKY_PIN_GROWTH_SETTLE_MS);
-  }, [clearPendingStickyPinGrowth]);
-
-  const queuePendingStickyPinGrowth = useCallback((targetTurnId: string, amountPx: number) => {
-    const sanitizedAmountPx = sanitizeReservationPx(amountPx);
-    if (sanitizedAmountPx <= COMPENSATION_EPSILON_PX) {
-      return;
-    }
-
-    const previousPending = pendingStickyPinGrowthRef.current;
-    const nextPending = previousPending.targetTurnId === targetTurnId
-      ? {
-        targetTurnId,
-        amountPx: previousPending.amountPx + sanitizedAmountPx,
-      }
-      : {
-        targetTurnId,
-        amountPx: sanitizedAmountPx,
-      };
-    pendingStickyPinGrowthRef.current = nextPending;
-    reconcilePendingStickyPinGrowthSettlement('growth-queued');
-  }, [reconcilePendingStickyPinGrowthSettlement]);
-
-  useEffect(() => () => {
-    if (stickyPinGrowthSettleTimerRef.current !== null) {
-      window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-      stickyPinGrowthSettleTimerRef.current = null;
-    }
-  }, []);
-
-  const ensureSemanticAnchorRange = useCallback((
-    options: Parameters<FlowChatViewportRangeHost['ensureBottomRange']>[0],
-  ) => {
-    const additionalPx = sanitizeReservationPx(options.additionalPx);
-    const footer = footerElementRef.current;
-    const scroller = scrollerElementRef.current;
-    if (
-      additionalPx <= COMPENSATION_EPSILON_PX ||
-      !footer ||
-      !canProcessViewportGeometry(scroller)
-    ) {
-      return false;
-    }
-
-    const previousState = bottomReservationStateRef.current;
-    const nextState: BottomReservationState = options.mode === 'pinned-item'
-      ? {
-        ...previousState,
-        pin: {
-          ...previousState.pin,
-          px: previousState.pin.px + additionalPx,
-          floorPx: previousState.pin.mode === 'sticky-latest'
-            ? previousState.pin.floorPx + additionalPx
-            : previousState.pin.floorPx,
-        },
-      }
-      : {
-        ...previousState,
-        collapse: {
-          ...previousState.collapse,
-          px: previousState.collapse.px + additionalPx,
-        },
-      };
-
-    if (
-      options.mode !== 'pinned-item' &&
-      collapseReservationOwnerRef.current === null
-    ) {
-      acquireCollapseReservationOwner('preserved-element');
-    }
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextState);
-    return true;
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    canProcessViewportGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-
-  useLayoutEffect(() => {
-    const coordinator = viewportCoordinatorRef.current;
-    coordinator.setRangeHost({
-      ensureBottomRange: ensureSemanticAnchorRange,
-    });
-    return () => {
-      coordinator.setRangeHost(null);
-    };
-  }, [ensureSemanticAnchorRange]);
-
-  // When the input collapses (e.g. user sends a message), preserve its previous
-  // space as a reservation before synchronizing the ref-owned Footer height.
-  // The Virtuoso Footer has no React-owned height, so this layout effect is the
-  // single writer for input-stack height changes and cannot expose a smaller
-  // intermediate Footer to the browser.
-  //
-  // Detect the footer shrink in a useLayoutEffect (fires synchronously after
-  // commit, before paint) and extend the bottom collapse reservation by the
-  // shrink amount so the total footer height stays unchanged.  The reservation
-  // is later consumed organically by the grow branch of measureHeightChange as
-  // streaming content arrives.
-  useLayoutEffect(() => {
-    const prevFooterPx = previousInputStackFooterPxRef.current;
-    const currFooterPx = inputStackFooterPx;
-    previousInputStackFooterPxRef.current = currFooterPx;
-
-    const scroller = scrollerElementRef.current;
-    if (!canProcessViewportGeometry(scroller)) {
-      return;
-    }
-
-    const shrinkAmount = prevFooterPx - currFooterPx;
-    if (shrinkAmount <= COMPENSATION_EPSILON_PX) {
-      applyFooterCompensationNow(bottomReservationStateRef.current);
-      return;
-    }
-
-    // Use the pre-commit scrollTop captured during render. It also protects
-    // against any unrelated virtualizer measurement committed in this render.
-    const preClampScrollTop = footerShrinkPreScrollTopRef.current;
-
-    const baseState = bottomReservationStateRef.current;
-    const currentCollapsePx = getReservationTotalPx(baseState.collapse);
-    const nextReservationState: BottomReservationState = {
-      ...baseState,
-      collapse: {
-        ...baseState.collapse,
-        px: currentCollapsePx + shrinkAmount,
-      },
-    };
-    if (collapseReservationOwnerRef.current === null) {
-      acquireCollapseReservationOwner('input-stack-shrink');
-    }
-    updateBottomReservationState(nextReservationState);
-    applyFooterCompensationNow(nextReservationState);
-
-    // Restore scrollTop to the pre-clamp position if the browser already
-    // clamped it during the commit.  After extending the footer via
-    // compensation, the total scrollHeight is back to its pre-shrink value,
-    // so restoring the old scrollTop is safe.
-    if (scroller && preClampScrollTop !== undefined) {
-      const maxScrollTop = Math.max(
-        0,
-        scroller.scrollHeight - scroller.clientHeight,
-      );
-      scroller.scrollTop = Math.min(preClampScrollTop, maxScrollTop);
-    }
-
-    // If no streaming is in progress, schedule a consumption pass to drain
-    // the compensation added above. Without streaming, the grow branch of
-    // measureHeightChange never fires, so the residual collapse.px would
-    // persist as permanent footer whitespace (issue #1176).
-    if (!isStreamingOutputRef.current) {
-      requestAnimationFrame(() => {
-        const scrollerNow = scrollerElementRef.current;
-        if (!canProcessViewportGeometry(scrollerNow)) {
-          return;
-        }
-        // Do not drain if a collapse intent is still protecting an ongoing
-        // CSS transition or delayed virtualizer measurement.
-        const intent = pendingCollapseIntentRef.current;
-        if (intent.active || retainedCollapseAnchorRef.current) return;
-        const collapsePx = getReservationTotalPx(bottomReservationStateRef.current.collapse);
-        if (collapsePx <= COMPENSATION_EPSILON_PX) return;
-        const distanceFromBottom = Math.max(
-          0,
-          scrollerNow.scrollHeight - scrollerNow.clientHeight - scrollerNow.scrollTop,
-        );
-        if (distanceFromBottom <= COMPENSATION_EPSILON_PX) {
-          // User is at the bottom — safe to drain all collapse compensation.
-          const drained: BottomReservationState = {
-            ...bottomReservationStateRef.current,
-            collapse: {
-              ...bottomReservationStateRef.current.collapse,
-              px: 0,
-              floorPx: 0,
-            },
-          };
-          updateBottomReservationState(drained);
-          applyFooterCompensationNow(drained);
-        }
-      });
-    }
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    canProcessViewportGeometry,
-    inputStackFooterPx,
-    updateBottomReservationState,
-  ]);
-
-  const measureHeightChange = useCallback(() => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) return;
-    if (!canProcessViewportGeometry(scroller)) {
-      return;
-    }
-
-    const currentScrollTop = scroller.scrollTop;
-    const previousScrollTop = previousScrollTopRef.current;
-    const previousScrollerGeometry = previousScrollerGeometryRef.current;
-    const viewportHeightChanged = Boolean(
-      previousScrollerGeometry &&
-      Math.abs(scroller.clientHeight - previousScrollerGeometry.clientHeight) > COMPENSATION_EPSILON_PX
-    );
-    const wasAtPhysicalBottom = Boolean(
-      previousScrollerGeometry &&
-      Math.abs(
-        Math.max(0, previousScrollerGeometry.scrollHeight - previousScrollerGeometry.clientHeight) -
-        previousScrollerGeometry.scrollTop
-      ) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX
-    );
-    const currentTotalCompensation = getTotalBottomCompensationPx();
-    const effectiveScrollHeight = Math.max(
-      0,
-      scroller.scrollHeight - currentTotalCompensation - inputStackFooterPxRef.current,
-    );
-    const previousMeasuredHeight = previousMeasuredHeightRef.current;
-    previousMeasuredHeightRef.current = effectiveScrollHeight;
-
-    if (previousMeasuredHeight === null) {
-      previousScrollTopRef.current = currentScrollTop;
-      recordScrollerGeometry(scroller);
-      return;
-    }
-
-    const heightDelta = effectiveScrollHeight - previousMeasuredHeight;
-    if (Math.abs(heightDelta) <= COMPENSATION_EPSILON_PX) {
-      previousScrollTopRef.current = currentScrollTop;
-      recordScrollerGeometry(scroller);
-      return;
-    }
-
-    if (retainedCollapseAnchorRef.current !== null) {
-      retainedCollapseGeometryGenerationRef.current += 1;
-    }
-
-    if (
-      heightDelta < -COMPENSATION_EPSILON_PX &&
-      retainedCollapseAnchorRef.current !== null &&
-      !pendingCollapseIntentRef.current.active
-    ) {
-      scheduleRetainedCollapseSettlement('delayed-negative-measurement');
-    }
-
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'C',
-        location: 'VirtualMessageList.measureHeightChange',
-        message: 'Effective content height changed',
-        data: () => ({
-          heightDelta,
-          previousMeasuredHeight,
-          effectiveScrollHeight,
-          currentScrollTop,
-          previousScrollTop,
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-          reservation: bottomReservationStateRef.current,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-          collapseIntentActive: pendingCollapseIntentRef.current.active,
-          retainedCollapseAnchor: retainedCollapseAnchorRef.current,
-          wasAtPhysicalBottom,
-          viewportHeightChanged,
-        }),
-      });
-    }
-
-    const ownsElementAnchor = viewportCoordinatorRef.current.ownsElementAnchor();
-    const isFollowingTail = (
-      isFollowingOutputRef.current &&
-      isStreamingOutputRef.current &&
-      viewportCoordinatorRef.current.getMode() === 'following-tail'
-    );
-    const hasCollapseAnchorProtection = (
-      pendingCollapseIntentRef.current.active ||
-      retainedCollapseAnchorRef.current !== null
-    );
-    if (shouldSyncPhysicalBottom({
-      viewportHeightChanged,
-      collapseProtectionActive: hasCollapseAnchorProtection,
-      wasAtPhysicalBottom,
-      ownsElementAnchor,
-      isFollowingTail,
-    })) {
-      if (wasAtPhysicalBottom) {
-        const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        if (Math.abs(maxScrollTop - scroller.scrollTop) > COMPENSATION_EPSILON_PX) {
-          if (flowChatDiagnostics.isEnabled()) {
-            flowChatDiagnostics.trace({
-              hypothesis: 'C',
-              location: 'VirtualMessageList.measureHeightChange',
-              message: 'Content measurement synchronized the physical bottom',
-              data: () => ({
-                scrollTopBefore: scroller.scrollTop,
-                requestedScrollTop: maxScrollTop,
-                heightDelta,
-              }),
-            });
-          }
-          scroller.scrollTop = maxScrollTop;
-        }
-      }
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-      recordScrollerGeometry(scroller);
-      return;
-    }
-
-    const distanceFromBottom = Math.max(
-      0,
-      scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop
-    );
-
-    // Content grew: consume temporary footer padding first.
-    if (heightDelta > 0) {
-      const collapseIntent0 = pendingCollapseIntentRef.current;
-      const collapseProtectionActive = collapseIntent0.active;
-      const previousReservationState = bottomReservationStateRef.current;
-      const pinReservation = previousReservationState.pin;
-      const canSettleStickyPinGrowth = (
-        pinReservation.mode === 'sticky-latest' &&
-        Boolean(pinReservation.targetTurnId) &&
-        viewportCoordinatorRef.current.ownsElementAnchor()
-      );
-      const nextReservationState = consumeBottomCompensation(heightDelta, {
-        consumeStickyPinFloor: false,
-        preserveCollapseReservation: collapseProtectionActive,
-      });
-      const immediatelyConsumedPx = Math.max(
-        0,
-        getTotalBottomCompensationPx(previousReservationState) -
-        getTotalBottomCompensationPx(nextReservationState),
-      );
-      const unsettledGrowthPx = Math.max(0, heightDelta - immediatelyConsumedPx);
-      applyFooterCompensationNow(nextReservationState);
-      viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'measure-grow');
-      previousScrollTopRef.current = scroller.scrollTop;
-      recordScrollerGeometry(scroller);
-      if (canSettleStickyPinGrowth && pinReservation.targetTurnId) {
-        // Queue after applying the measured state. Threshold settlement may
-        // synchronously shrink the Footer and hand ownership to tail-follow.
-        queuePendingStickyPinGrowth(
-          pinReservation.targetTurnId,
-          Math.min(unsettledGrowthPx, nextReservationState.pin.floorPx),
-        );
-      }
-      return;
-    }
-
-    // Content shrank: preserve the current visual anchor by extending the footer
-    // when the user does not already have enough distance from the bottom.
-    //
-    // Unsignaled shrinks in streaming tail-follow remain owned by the follow
-    // loop. A known collapse intent is different: its synchronous Footer
-    // reservation keeps both the physical bottom and the card header stable,
-    // so it must continue through the reconciliation path below.
-    const collapseIntent = pendingCollapseIntentRef.current;
-    const retainedCollapseAnchor = retainedCollapseAnchorRef.current;
-    if (retainedCollapseAnchor) {
-      preserveCollapseAnchorScrollTop(
-        scroller,
-        retainedCollapseAnchor.anchorScrollTop,
-        'measure-retained-shrink',
-      );
-      return;
-    }
-    if (shouldBypassShrinkCompensationInTailFollow({
-      isFollowingOutput: isFollowingOutputRef.current,
-      isStreamingOutput: isStreamingOutputRef.current,
-      hasActiveCollapseIntent: collapseIntent.active,
-    })) {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'D',
-          location: 'VirtualMessageList.measureHeightChange',
-          message: 'Unsignaled shrink delegated to streaming tail follow',
-          data: () => ({ heightDelta, currentScrollTop, previousScrollTop }),
-        });
-      }
-      previousScrollTopRef.current = currentScrollTop;
-      recordScrollerGeometry(scroller);
-      return;
-    }
-
-    const pendingStickyPinGrowth = pendingStickyPinGrowthRef.current;
-    const canceledPendingGrowthPx = getCanceledUnsettledStickyPinGrowthPx({
-      pendingGrowthPx: pendingStickyPinGrowth.amountPx,
-      shrinkPx: -heightDelta,
-      hasActiveCollapseIntent: collapseIntent.active,
-    });
-    if (canceledPendingGrowthPx > COMPENSATION_EPSILON_PX) {
-      pendingStickyPinGrowthRef.current = {
-        targetTurnId: pendingStickyPinGrowth.amountPx - canceledPendingGrowthPx > COMPENSATION_EPSILON_PX
-          ? pendingStickyPinGrowth.targetTurnId
-          : null,
-        amountPx: Math.max(0, pendingStickyPinGrowth.amountPx - canceledPendingGrowthPx),
-      };
-      if (
-        pendingStickyPinGrowthRef.current.amountPx <= COMPENSATION_EPSILON_PX &&
-        stickyPinGrowthSettleTimerRef.current !== null
-      ) {
-        window.clearTimeout(stickyPinGrowthSettleTimerRef.current);
-        stickyPinGrowthSettleTimerRef.current = null;
-      }
-    }
-    const shrinkAmount = Math.max(0, -heightDelta - canceledPendingGrowthPx);
-    if (shrinkAmount <= COMPENSATION_EPSILON_PX) {
-      viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'measure-unsettled-growth-reverted');
-      previousScrollTopRef.current = scroller.scrollTop;
-      recordScrollerGeometry(scroller);
-      return;
-    }
-    const hasValidCollapseIntent = collapseIntent.active;
-    // For unsignaled shrinks, the visible gap to the bottom determines the
-    // required compensation. We no longer ratchet up via Math.max with the
-    // previous collapse.px: stale compensation from an earlier protected
-    // collapse is intentionally allowed to shrink when the current shrink
-    // needs less, preventing permanent whitespace accumulation (issue #1176).
-    const fallbackRequiredCollapseCompensation = Math.max(0, shrinkAmount - distanceFromBottom);
-    const cumulativeShrinkPx = hasValidCollapseIntent
-      ? collapseIntent.cumulativeShrinkPx + shrinkAmount
-      : 0;
-    const resolvedIntentCompensation = hasValidCollapseIntent
-      ? collapseIntent.baseTotalCompensationPx + Math.max(0, cumulativeShrinkPx - collapseIntent.distanceFromBottomBeforeCollapse)
-      : 0;
-    const reconciledOwnedState = hasValidCollapseIntent
-      ? null
-      : reconcileUnsignaledShrinkReservation(
-        bottomReservationStateRef.current,
-        fallbackRequiredCollapseCompensation,
-        collapseReservationOwnerRef.current !== null,
-      );
-    const nextTotalCompensation = hasValidCollapseIntent
-      ? Math.max(currentTotalCompensation, resolvedIntentCompensation)
-      : getTotalBottomCompensationPx(
-        reconciledOwnedState ?? bottomReservationStateRef.current,
-      );
-    if (hasValidCollapseIntent) {
-      pendingCollapseIntentRef.current = {
-        ...collapseIntent,
-        cumulativeShrinkPx,
-      };
-    }
-
-    if (!hasValidCollapseIntent && fallbackRequiredCollapseCompensation <= COMPENSATION_EPSILON_PX) {
-      // If the user is already far enough from the bottom, this shrink does not
-      // need protection. Reusing stale bottom compensation here makes the
-      // scroll listener restore an older anchor during upward scroll and causes
-      // the visible "wall hit" jitter.
-      previousScrollTopRef.current = currentScrollTop;
-      recordScrollerGeometry(scroller);
-      return;
-    }
-
-    const nextReservationState: BottomReservationState = reconciledOwnedState ?? {
-      ...bottomReservationStateRef.current,
-      collapse: {
-        ...bottomReservationStateRef.current.collapse,
-        px: Math.max(0, nextTotalCompensation - getReservationTotalPx(bottomReservationStateRef.current.pin)),
-      },
-    };
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: hasValidCollapseIntent ? 'E' : 'C',
-        location: 'VirtualMessageList.measureHeightChange',
-        message: 'Content shrink resolved bottom compensation',
-        data: () => ({
-          heightDelta,
-          shrinkAmount,
-          distanceFromBottom,
-          hasValidCollapseIntent,
-          fallbackRequiredCollapseCompensation,
-          currentTotalCompensation,
-          nextTotalCompensation,
-          reservationBefore: bottomReservationStateRef.current,
-          reservationAfter: nextReservationState,
-        }),
-      });
-    }
-    updateBottomReservationState(nextReservationState);
-    if (nextTotalCompensation > COMPENSATION_EPSILON_PX) {
-      const anchorTarget =
-        hasValidCollapseIntent
-          ? collapseIntent.anchorScrollTop
-          : previousScrollTop;
-
-      applyFooterCompensationNow(nextReservationState);
-      if (hasValidCollapseIntent) {
-        preserveCollapseAnchorScrollTop(
-          scroller,
-          collapseIntent.anchorScrollTop,
-          'measure-active-collapse',
-        );
-      } else if (!(isFollowingOutputRef.current && isStreamingOutputRef.current)) {
-        viewportCoordinatorRef.current.restoreScrollPositionOnce(
-          scroller,
-          anchorTarget,
-          hasValidCollapseIntent ? 'transition-shrink' : 'instant-shrink',
-        );
-      }
-    }
-
-    previousScrollTopRef.current = scroller.scrollTop;
-    recordScrollerGeometry(scroller);
-  }, [
-    applyFooterCompensationNow,
-    canProcessViewportGeometry,
-    consumeBottomCompensation,
-    getTotalBottomCompensationPx,
-    queuePendingStickyPinGrowth,
-    preserveCollapseAnchorScrollTop,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    scheduleRetainedCollapseSettlement,
-    updateBottomReservationState,
-  ]);
-
-  const scheduleHeightMeasure = useCallback((frames: number = 1) => {
-    if (measureFrameRef.current !== null) {
-      cancelAnimationFrame(measureFrameRef.current);
-      measureFrameRef.current = null;
-    }
-
-    const run = (remainingFrames: number) => {
-      measureFrameRef.current = requestAnimationFrame(() => {
-        if (remainingFrames > 1) {
-          run(remainingFrames - 1);
-          return;
-        }
-
-        measureFrameRef.current = null;
-        measureHeightChange();
-      });
-    };
-
-    run(Math.max(1, frames));
-  }, [measureHeightChange]);
-
-  const userMessageItems = React.useMemo(() => {
-    return virtualItems
-      .map((item, index) => ({ item, index }))
-      .filter(({ item }) => item.type === 'user-message');
-  }, [virtualItems]);
-
-  const latestTurnId = userMessageItems[userMessageItems.length - 1]?.item.turnId ?? null;
-  const latestUserMessageIndex = userMessageItems[userMessageItems.length - 1]?.index ?? 0;
-  const isTurnPinRequestCurrent = useCallback((request: PendingTurnPinState) => {
-    const currentSessionId = activeSessionIdRef.current;
-    const currentTargetTurnId = request.pinMode === 'sticky-latest'
-      ? latestTurnId
-      : request.turnId;
-    if (!currentSessionId || !currentTargetTurnId) {
-      return false;
-    }
-
-    return isTurnPinRequestIdentityCurrent(request, {
-      generation: turnPinRequestGenerationRef.current,
-      sessionId: currentSessionId,
-      turnId: currentTargetTurnId,
-    });
-  }, [latestTurnId]);
-  const hasPrimedMountedStreamingTurnFollowRef = useRef(false);
-  const previousLatestTurnIdForFollowRef = useRef<string | null>(latestTurnId);
-  const previousSessionIdForFollowRef = useRef<string | undefined>(activeSession?.sessionId);
-
-  const visibleTurnInfoByTurnId = React.useMemo(() => {
-    const infoMap = new Map<string, Omit<VisibleTurnInfo, 'visibleTurnIds'>>();
-
-    userMessageItems.forEach(({ item }, index) => {
-      if (item.type !== 'user-message') return;
-
-      infoMap.set(item.turnId, {
-        turnIndex: index + 1,
-        totalTurns: userMessageItems.length,
-        userMessage: item.data?.content || '',
-        turnId: item.turnId,
-      });
-    });
-
-    return infoMap;
-  }, [userMessageItems]);
-
-  const measureVisibleTurn = useCallback(() => {
-    const setVisibleTurnInfo = useModernFlowChatStore.getState().setVisibleTurnInfo;
-    const currentVisibleTurnInfo = useModernFlowChatStore.getState().visibleTurnInfo;
-
-    if (userMessageItems.length === 0) {
-      if (currentVisibleTurnInfo !== null) {
-        setVisibleTurnInfo(null);
-      }
-      return;
-    }
-
-    const scroller = scrollerElementRef.current;
-    if (scroller && !canProcessViewportGeometry(scroller)) {
-      return;
-    }
-    if (!scroller) {
-      const fallbackBaseInfo = visibleTurnInfoByTurnId.get(userMessageItems[0]?.item.turnId ?? '') ?? null;
-      const fallbackInfo: VisibleTurnInfo | null = fallbackBaseInfo
-        ? { ...fallbackBaseInfo, visibleTurnIds: [] }
-        : null;
-      if (
-        currentVisibleTurnInfo?.turnId !== fallbackInfo?.turnId ||
-        currentVisibleTurnInfo?.turnIndex !== fallbackInfo?.turnIndex ||
-        currentVisibleTurnInfo?.totalTurns !== fallbackInfo?.totalTurns ||
-        currentVisibleTurnInfo?.userMessage !== fallbackInfo?.userMessage ||
-        (currentVisibleTurnInfo?.visibleTurnIds?.length ?? 0) !== 0
-      ) {
-        setVisibleTurnInfo(fallbackInfo);
-      }
-      return;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const viewportTop = scrollerRect.top + PINNED_TURN_VIEWPORT_OFFSET_PX;
-    const viewportBottom = scrollerRect.bottom;
-    const renderedItems = Array.from(
-      scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper[data-turn-id]')
-    );
-
-    const visibleTurnIds: string[] = [];
-    const visibleTurnIdSet = new Set<string>();
-    let topVisibleTurnId: string | null = null;
-    for (const node of renderedItems) {
-      const rect = node.getBoundingClientRect();
-      if (rect.bottom <= viewportTop || rect.top >= viewportBottom) {
-        continue;
-      }
-
-      const turnId = node.dataset.turnId;
-      if (!turnId) {
-        continue;
-      }
-
-      topVisibleTurnId ??= turnId;
-      if (!visibleTurnIdSet.has(turnId)) {
-        visibleTurnIdSet.add(turnId);
-        visibleTurnIds.push(turnId);
-      }
-    }
-
-    const nextTurnId = topVisibleTurnId ?? userMessageItems[0]?.item.turnId ?? null;
-    const nextBaseInfo = nextTurnId ? (visibleTurnInfoByTurnId.get(nextTurnId) ?? null) : null;
-    const nextInfo: VisibleTurnInfo | null = nextBaseInfo
-      ? { ...nextBaseInfo, visibleTurnIds }
-      : null;
-    const currentVisibleTurnIds = currentVisibleTurnInfo?.visibleTurnIds ?? [];
-    const visibleTurnIdsUnchanged =
-      currentVisibleTurnIds.length === visibleTurnIds.length &&
-      currentVisibleTurnIds.every((turnId, index) => turnId === visibleTurnIds[index]);
-
-    if (
-      currentVisibleTurnInfo?.turnId === nextInfo?.turnId &&
-      currentVisibleTurnInfo?.turnIndex === nextInfo?.turnIndex &&
-      currentVisibleTurnInfo?.totalTurns === nextInfo?.totalTurns &&
-      currentVisibleTurnInfo?.userMessage === nextInfo?.userMessage &&
-      visibleTurnIdsUnchanged
-    ) {
-      return;
-    }
-
-    setVisibleTurnInfo(nextInfo);
-  }, [canProcessViewportGeometry, userMessageItems, visibleTurnInfoByTurnId]);
-
-  const scheduleVisibleTurnMeasure = useCallback((frames: number = 1) => {
-    if (visibleTurnMeasureFrameRef.current !== null) {
-      cancelAnimationFrame(visibleTurnMeasureFrameRef.current);
-      visibleTurnMeasureFrameRef.current = null;
-    }
-
-    const run = (remainingFrames: number) => {
-      visibleTurnMeasureFrameRef.current = requestAnimationFrame(() => {
-        if (remainingFrames > 1) {
-          run(remainingFrames - 1);
-          return;
-        }
-
-        visibleTurnMeasureFrameRef.current = null;
-        measureVisibleTurn();
-      });
-    };
-
-    run(Math.max(1, frames));
-  }, [measureVisibleTurn]);
-
-  const escapeTurnIdSelector = useCallback((turnId: string) => (
-    typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
-      ? CSS.escape(turnId)
-      : turnId.replace(/["\\]/g, '\\$&')
-  ), []);
-
-  const getRenderedTurnElements = useCallback((turnId: string, options?: { includeHistoryProjectionHandoff?: boolean }) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) return [];
-
-    const escapedTurnId = escapeTurnIdSelector(turnId);
-    const nodes = Array.from(scroller.querySelectorAll<HTMLElement>(
-      `.virtual-item-wrapper[data-turn-id="${escapedTurnId}"]`,
-    ));
-
-    if (options?.includeHistoryProjectionHandoff === false) {
-      return nodes.filter(node => !node.closest('[data-history-projection-handoff="true"]'));
-    }
-
-    return nodes;
-  }, [escapeTurnIdSelector]);
-
-  const getRenderedUserMessageElement = useCallback((turnId: string) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) return null;
-
-    const escapedTurnId = escapeTurnIdSelector(turnId);
-    return scroller.querySelector<HTMLElement>(
-      `.virtual-item-wrapper[data-item-type="user-message"][data-turn-id="${escapedTurnId}"]`,
-    );
-  }, [escapeTurnIdSelector]);
-
-  const getRenderedVirtualItemElement = useCallback((itemIndex: number) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) return null;
-
-    return scroller.querySelector<HTMLElement>(
-      `.virtual-item-wrapper[data-virtual-index="${itemIndex}"]`,
-    );
-  }, []);
-
-  const isTurnRenderedInViewport = useCallback((turnId: string) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return false;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const nodes = getRenderedTurnElements(turnId);
-
-    return nodes.some(node => {
-      const rect = node.getBoundingClientRect();
-      return rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
-    });
-  }, [getRenderedTurnElements]);
-
-  const isTurnTextRenderedInViewport = useCallback((turnId: string) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return false;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const nodes = getRenderedTurnElements(turnId);
-
-    return nodes.some(node => {
-      const rect = node.getBoundingClientRect();
-      const visible = rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
-      return visible && (node.innerText?.trim().length ?? 0) > 0;
-    });
-  }, [getRenderedTurnElements]);
-
-  const isTurnTextRenderedInViewportOutsideHandoff = useCallback((turnId: string) => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return false;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const nodes = getRenderedTurnElements(turnId, { includeHistoryProjectionHandoff: false });
-
-    return nodes.some(node => {
-      const rect = node.getBoundingClientRect();
-      const visible = rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
-      return visible && (node.innerText?.trim().length ?? 0) > 0;
-    });
-  }, [getRenderedTurnElements]);
-
-  const hasVisibleRenderedVirtualItem = useCallback(() => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return false;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const nodes = Array.from(
-      scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper[data-turn-id]'),
-    );
-
-    return nodes.some(node => {
-      const rect = node.getBoundingClientRect();
-      const style = window.getComputedStyle(node);
-      return (
-        rect.bottom > scrollerRect.top &&
-        rect.top < scrollerRect.bottom &&
-        rect.width > 0 &&
-        rect.height > 0 &&
-        style.visibility !== 'hidden' &&
-        style.display !== 'none' &&
-        (node.innerText?.trim().length ?? 0) > 0
-      );
-    });
-  }, []);
-
-  const isHistoryProjectionHandoffTargetReady = useCallback((snapshot: HistoryProjectionHandoffSnapshot) => {
-    if (snapshot.targetTurnId) {
-      return isTurnTextRenderedInViewportOutsideHandoff(snapshot.targetTurnId);
-    }
-
-    return hasVisibleRenderedVirtualItem();
-  }, [
-    hasVisibleRenderedVirtualItem,
-    isTurnTextRenderedInViewportOutsideHandoff,
-  ]);
-
-  const clearHistoryProjectionHandoff = useCallback((reason: string) => {
-    if (historyProjectionHandoffReleaseFrameRef.current !== null) {
-      cancelAnimationFrame(historyProjectionHandoffReleaseFrameRef.current);
-      historyProjectionHandoffReleaseFrameRef.current = null;
-    }
-
-    const snapshot = historyProjectionHandoffRef.current;
-    historyProjectionHandoffRef.current = null;
-    setHistoryProjectionHandoff(null);
-    if (reason === 'session-reset' || reason === 'session-changed') {
-      previousMeasuredHeightRef.current = null;
-      previousScrollerGeometryRef.current = null;
-    }
-
-    if (snapshot) {
-      startupTrace.markPhase('flowchat_history_projection_handoff_cleared', {
-        sessionId: snapshot.sessionId,
-        reason,
-        handoffReason: snapshot.reason,
-        durationMs: Math.round(performance.now() - snapshot.createdAtMs),
-      });
-    }
-  }, []);
-  clearHistoryProjectionHandoffRef.current = clearHistoryProjectionHandoff;
-
-  useLayoutEffect(() => {
-    rebaseViewportMeasurements();
-  }, [historyProjectionHandoff, rebaseViewportMeasurements]);
-
-  const scheduleHistoryProjectionHandoffRelease = useCallback((frames = 1) => {
-    if (historyProjectionHandoffReleaseFrameRef.current !== null) {
-      cancelAnimationFrame(historyProjectionHandoffReleaseFrameRef.current);
-      historyProjectionHandoffReleaseFrameRef.current = null;
-    }
-
-    const run = (remainingFrames: number) => {
-      historyProjectionHandoffReleaseFrameRef.current = requestAnimationFrame(() => {
-        historyProjectionHandoffReleaseFrameRef.current = null;
-
-        const snapshot = historyProjectionHandoffRef.current;
-        if (!snapshot) {
-          return;
-        }
-
-        if (remainingFrames > 1) {
-          run(remainingFrames - 1);
-          return;
-        }
-
-        if (activeSessionIdRef.current !== snapshot.sessionId) {
-          clearHistoryProjectionHandoff('session-changed');
-          return;
-        }
-
-        if (isHistoryProjectionHandoffTargetReady(snapshot)) {
-          clearHistoryProjectionHandoff('target-content-ready');
-          return;
-        }
-
-        if (performance.now() - snapshot.createdAtMs >= HISTORY_PROJECTION_HANDOFF_MAX_DURATION_MS) {
-          clearHistoryProjectionHandoff('timeout');
-          return;
-        }
-
-        run(1);
-      });
-    };
-
-    run(Math.max(1, frames));
-  }, [clearHistoryProjectionHandoff, isHistoryProjectionHandoffTargetReady]);
-
-  const retargetHistoryProjectionHandoff = useCallback((turnId: string) => {
-    const snapshot = historyProjectionHandoffRef.current;
-    if (!snapshot || snapshot.targetTurnId === turnId) {
-      return;
-    }
-
-    const nextSnapshot: HistoryProjectionHandoffSnapshot = {
-      ...snapshot,
-      targetTurnId: turnId,
-      createdAtMs: performance.now(),
-    };
-    historyProjectionHandoffRef.current = nextSnapshot;
-    setHistoryProjectionHandoff(nextSnapshot);
-    scheduleHistoryProjectionHandoffRelease(2);
-  }, [scheduleHistoryProjectionHandoffRelease]);
-
-  const buildPinReservation = useCallback((
-    turnId: string,
-    pinMode: FlowChatPinTurnToTopMode,
-    requiredTailSpacePx: number,
-    maxPinReservationPx: number,
-    currentPinReservation: PinBottomReservation = bottomReservationStateRef.current.pin,
-  ): PinBottomReservation => {
-    const resolvedRequiredTailSpacePx = clampPinReservationPxToViewport(
-      requiredTailSpacePx,
-      maxPinReservationPx,
-    );
-    const nextFloorPx = pinMode === 'sticky-latest'
-      ? resolvedRequiredTailSpacePx
-      : 0;
-    // Only preserve a sticky pin after a real floor has been measured.
-    // Provisional fallback reservations should shrink on the next resolve.
-    const shouldPreserveCurrentPx = (
-      currentPinReservation.mode === pinMode &&
-      currentPinReservation.targetTurnId === turnId &&
-      (
-        pinMode === 'transient' ||
-        currentPinReservation.floorPx > COMPENSATION_EPSILON_PX
-      )
-    );
-    const preservedPx = shouldPreserveCurrentPx
-      ? clampPinReservationPxToViewport(currentPinReservation.px, maxPinReservationPx)
-      : 0;
-    const shouldRetainTarget = (
-      pinMode === 'sticky-latest' ||
-      resolvedRequiredTailSpacePx > COMPENSATION_EPSILON_PX ||
-      shouldPreserveCurrentPx
-    );
-
-    return {
-      kind: 'pin',
-      px: Math.max(nextFloorPx, resolvedRequiredTailSpacePx, preservedPx),
-      floorPx: nextFloorPx,
-      mode: pinMode,
-      targetTurnId: shouldRetainTarget ? turnId : null,
-    };
-  }, []);
-
-  const resolveTurnPinMetrics = useCallback((turnId: string, ignoredTailSpacePx: number = 0) => {
-    const scroller = scrollerElementRef.current;
-    if (!canProcessViewportGeometry(scroller)) {
-      return null;
-    }
-
-    const targetElement = getRenderedUserMessageElement(turnId);
-    if (!targetElement) return null;
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const targetRect = targetElement.getBoundingClientRect();
-    const viewportTop = scrollerRect.top + PINNED_TURN_VIEWPORT_OFFSET_PX;
-    const desiredScrollTop = Math.max(0, scroller.scrollTop + (targetRect.top - viewportTop));
-    const effectiveScrollHeight = Math.max(0, scroller.scrollHeight - Math.max(0, ignoredTailSpacePx));
-    const rawMaxScrollTop = effectiveScrollHeight - scroller.clientHeight;
-    const maxScrollTop = Math.max(0, rawMaxScrollTop);
-    // When content is shorter than the viewport, the clamped max scroll range is 0
-    // even though we still need to reserve the underflow gap before the target can pin.
-    const rawMissingTailSpace = Math.max(0, desiredScrollTop - rawMaxScrollTop);
-    const missingTailSpace = clampPinReservationPxToViewport(
-      rawMissingTailSpace,
-      scroller.clientHeight,
-    );
-    if (
-      flowChatDiagnostics.isEnabled() &&
-      rawMissingTailSpace - missingTailSpace > COMPENSATION_EPSILON_PX
-    ) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'F',
-        location: 'VirtualMessageList.resolveTurnPinMetrics',
-        message: 'Pin reservation exceeded the viewport and was clamped',
-        data: () => ({
-          turnId,
-          rawMissingTailSpace,
-          missingTailSpace,
-          clientHeight: scroller.clientHeight,
-          desiredScrollTop,
-          rawMaxScrollTop,
-          effectiveScrollHeight,
-          ignoredTailSpacePx,
-        }),
-      });
-    }
-
-    return {
-      targetElement,
-      viewportTop,
-      desiredScrollTop,
-      maxScrollTop,
-      missingTailSpace,
-    };
-  }, [canProcessViewportGeometry, getRenderedUserMessageElement]);
-
-  const reconcileStickyPinReservation = useCallback(() => {
-    const scroller = scrollerElementRef.current;
-    const currentState = bottomReservationStateRef.current;
-    const pinReservation = currentState.pin;
-    if (
-      !canProcessViewportGeometry(scroller) ||
-      pinReservation.mode !== 'sticky-latest' ||
-      !pinReservation.targetTurnId
-    ) {
-      return false;
-    }
-
-    // A new arbitrary-turn navigation may be materializing a distant target
-    // while the previous sticky-latest footer still provides physical range.
-    // Do not let the old sticky target rewrite that reservation until the new
-    // request has either aligned or been cancelled.
-    const activeTurnPinTargetId = activeTurnPinRequestRef.current?.turnId ??
-      preparedHistoryTurnPinRef.current?.turnId ??
-      null;
-    if (
-      activeTurnPinTargetId &&
-      activeTurnPinTargetId !== pinReservation.targetTurnId
-    ) {
-      return false;
-    }
-
-    const collapseIntent = pendingCollapseIntentRef.current;
-    const hasActiveCollapseProtection = (
-      collapseIntent.active
-    );
-    // During a collapse animation, let collapse compensation own the footer space.
-    // Recomputing sticky pin floor from intermediate DOM heights causes the two
-    // reservations to fight each other and reintroduces visible vertical jitter.
-    if (hasActiveCollapseProtection) {
-      return false;
-    }
-
-    const resolvedMetrics = resolveTurnPinMetrics(
-      pinReservation.targetTurnId,
-      pinReservation.px,
-    );
-    if (!resolvedMetrics) {
-      return false;
-    }
-
-    const requiredFloorPx = clampPinReservationPxToViewport(
-      resolvedMetrics.missingTailSpace,
-      scroller.clientHeight,
-    );
-    const boundedCurrentPx = clampPinReservationPxToViewport(
-      pinReservation.px,
-      scroller.clientHeight,
-    );
-    const boundedCurrentFloorPx = clampPinReservationPxToViewport(
-      pinReservation.floorPx,
-      scroller.clientHeight,
-    );
-    const currentReservationExceedsViewport = (
-      pinReservation.px - boundedCurrentPx > COMPENSATION_EPSILON_PX ||
-      pinReservation.floorPx - boundedCurrentFloorPx > COMPENSATION_EPSILON_PX
-    );
-    // A live target rect is transient while Virtuoso is reconciling item
-    // measurements. It is safe to increase the range from that snapshot, but
-    // reducing the floor can remove scroll range for a frame and strand the
-    // semantic anchor at the physical bottom. Real content growth drains the
-    // floor through measureHeightChange instead; the viewport cap is the only
-    // synchronous reduction allowed here.
-    if (
-      requiredFloorPx <= pinReservation.floorPx + COMPENSATION_EPSILON_PX &&
-      !currentReservationExceedsViewport
-    ) {
-      return false;
-    }
-
-    const nextFloorPx = Math.max(requiredFloorPx, boundedCurrentFloorPx);
-    const nextPinReservation: PinBottomReservation = {
-      ...pinReservation,
-      px: clampPinReservationPxToViewport(
-        Math.max(nextFloorPx, boundedCurrentPx),
-        scroller.clientHeight,
-      ),
-      floorPx: nextFloorPx,
-    };
-
-    if (
-      Math.abs(nextPinReservation.px - pinReservation.px) <= COMPENSATION_EPSILON_PX &&
-      Math.abs(nextPinReservation.floorPx - pinReservation.floorPx) <= COMPENSATION_EPSILON_PX
-    ) {
-      return false;
-    }
-
-    const nextState: BottomReservationState = {
-      ...currentState,
-      pin: nextPinReservation,
-    };
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
-    viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'pin-reservation-grow');
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextState);
-    return true;
-  }, [
-    applyFooterCompensationNow,
-    canProcessViewportGeometry,
-    resolveTurnPinMetrics,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-
-  const schedulePinReservationReconcile = useCallback((frames: number = 1) => {
-    if (pinReservationReconcileFrameRef.current !== null) {
-      cancelAnimationFrame(pinReservationReconcileFrameRef.current);
-      pinReservationReconcileFrameRef.current = null;
-    }
-
-    const run = (remainingFrames: number) => {
-      pinReservationReconcileFrameRef.current = requestAnimationFrame(() => {
-        if (remainingFrames > 1) {
-          run(remainingFrames - 1);
-          return;
-        }
-
-        pinReservationReconcileFrameRef.current = null;
-        reconcileStickyPinReservation();
-      });
-    };
-
-    run(Math.max(1, frames));
-  }, [reconcileStickyPinReservation]);
-
-  const clearExpiredProvisionalStickyPin = useCallback((request: PendingTurnPinState) => {
-    const currentState = bottomReservationStateRef.current;
-    if (!shouldClearExpiredProvisionalStickyPin({
-      requestTurnId: request.turnId,
-      requestPinMode: request.pinMode,
-      pinReservation: currentState.pin,
-      ownsElementAnchor: viewportCoordinatorRef.current.ownsElementAnchor(),
-    })) {
-      return false;
-    }
-
-    const nextState: BottomReservationState = {
-      ...currentState,
-      pin: {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      },
-    };
-    viewportCoordinatorRef.current.release('unresolved-turn-pin-expired');
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
-
-    const scroller = scrollerElementRef.current;
-    if (scroller) {
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextState);
-      recordScrollerGeometry(scroller);
-    }
-    return true;
-  }, [
-    applyFooterCompensationNow,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-
-  const tryResolvePendingTurnPin = useCallback((request: PendingTurnPinState): TurnPinResolution => {
-    if (!isTurnPinRequestCurrent(request)) {
-      return { kind: 'pending' };
-    }
-
-    const scroller = scrollerElementRef.current;
-    const virtuoso = virtuosoRef.current;
-
-    if (!canCoordinateViewport() || !scroller || !virtuoso) {
-      startupTrace.markPhase('flowchat_turn_pin_resolve', {
-        result: 'inactive_or_missing_scroller_or_virtuoso',
-        turnId: request.turnId,
-        pinMode: request.pinMode,
-        attempt: request.attempts,
-        hasScroller: Boolean(scroller),
-        isViewportActive: isViewportActiveRef.current,
-        viewportGeometrySuspended: viewportGeometrySuspendedRef.current,
-        hasVirtuoso: Boolean(virtuoso),
-      });
-      return { kind: 'pending' };
-    }
-
-    const targetItem = userMessageItems.find(({ item }) => item.turnId === request.turnId);
-    if (!targetItem) {
-      startupTrace.markPhase('flowchat_turn_pin_resolve', {
-        result: 'missing_target_item',
-        turnId: request.turnId,
-        pinMode: request.pinMode,
-        attempt: request.attempts,
-        userMessageCount: userMessageItems.length,
-      });
-      return { kind: 'pending' };
-    }
-
-    const currentPinReservation = bottomReservationStateRef.current.pin;
-    // Existing pin tail space is synthetic footer reservation, not real content.
-    // Ignore it when resolving a new pin target so maxScrollTop is computed against
-    // the effective content height instead of the previous pin reservation.
-    let ignoredTailSpacePx = 0;
-    if (currentPinReservation.px > COMPENSATION_EPSILON_PX) {
-      ignoredTailSpacePx = currentPinReservation.px;
-    }
-    const resolvedMetrics = resolveTurnPinMetrics(request.turnId, ignoredTailSpacePx);
-    if (!resolvedMetrics) {
-      // A far smooth scroll can leave the target virtualized long enough for the
-      // deferred pin to expire. Materialize it first, then let the existing live
-      // geometry pass perform the exact alignment and stabilization.
-      const fallbackBehavior: ScrollBehavior = 'auto';
-      const provisionalPinPx = request.pinMode === 'sticky-latest'
-        ? resolveProvisionalStickyPinReservationPx({
-          scrollHeight: scroller.scrollHeight,
-          clientHeight: scroller.clientHeight,
-          currentPinPx: currentPinReservation.px,
-        })
-        : 0;
-
-      if (request.pinMode === 'sticky-latest' && provisionalPinPx > COMPENSATION_EPSILON_PX) {
-        // Reserve enough tail space before the target is rendered so the first
-        // fallback scroll does not briefly land on the physical bottom.
-        const nextReservationState: BottomReservationState = {
-          ...bottomReservationStateRef.current,
-          pin: {
-            kind: 'pin',
-            px: provisionalPinPx,
-            floorPx: 0,
-            mode: request.pinMode,
-            targetTurnId: request.turnId,
-          },
-        };
-        updateBottomReservationState(nextReservationState);
-        applyFooterCompensationNow(nextReservationState);
-        previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextReservationState);
-      }
-
-      virtuoso.scrollToIndex({
-        index: targetItem.index,
-        align: 'start',
-        behavior: fallbackBehavior,
-      });
-      startupTrace.markPhase('flowchat_turn_pin_resolve', {
-        result: 'target_not_rendered_fallback_scroll_to_index',
-        turnId: request.turnId,
-        pinMode: request.pinMode,
-        attempt: request.attempts,
-        targetIndex: targetItem.index,
-        scrollTop: scroller.scrollTop,
-        scrollHeight: scroller.scrollHeight,
-        clientHeight: scroller.clientHeight,
-      });
-      return { kind: 'pending' };
-    }
-
-    const hasInsufficientNaturalRange = (
-      request.alignmentPolicy === 'best-effort' &&
-      resolvedMetrics.missingTailSpace > COMPENSATION_EPSILON_PX
-    );
-    const isBestEffortTransientPin = (
-      request.alignmentPolicy === 'best-effort' &&
-      request.pinMode === 'transient'
-    );
-    const nextPinReservation: PinBottomReservation = isBestEffortTransientPin
-      ? {
-        kind: 'pin',
-        px: 0,
-        floorPx: 0,
-        mode: 'transient',
-        targetTurnId: null,
-      }
-      : buildPinReservation(
-        request.turnId,
-        request.pinMode,
-        resolvedMetrics.missingTailSpace,
-        scroller.clientHeight,
-      );
-    const nextReservationState: BottomReservationState = {
-      ...bottomReservationStateRef.current,
-      pin: nextPinReservation,
-    };
-    updateBottomReservationState(nextReservationState);
-    applyFooterCompensationNow(nextReservationState);
-
-    const resolvedMaxScrollTop = hasInsufficientNaturalRange
-      ? resolvedMetrics.maxScrollTop
-      : Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-    const targetScrollTop = Math.min(resolvedMetrics.desiredScrollTop, resolvedMaxScrollTop);
-    if (Math.abs(scroller.scrollTop - targetScrollTop) > COMPENSATION_EPSILON_PX) {
-      scroller.scrollTop = targetScrollTop;
-    }
-
-    // Some turn jumps align correctly at first, then drift on the next frame as
-    // Virtuoso finishes layout stabilization. Re-check the live DOM before we
-    // decide the pin has truly settled.
-    const verifyPinAlignment = (frameLabel: string) => {
-      const liveTargetElement = getRenderedUserMessageElement(request.turnId);
-      const liveRect = liveTargetElement?.getBoundingClientRect();
-      const viewportTop = liveTargetElement
-        ? scroller.getBoundingClientRect().top + PINNED_TURN_VIEWPORT_OFFSET_PX
-        : null;
-      const deltaToViewportTop = liveRect && viewportTop != null
-        ? liveRect.top - viewportTop
-        : null;
-
-      const stickyPinStillTargetsRequest = (
-        bottomReservationStateRef.current.pin.mode === 'sticky-latest' &&
-        bottomReservationStateRef.current.pin.targetTurnId === request.turnId
-      );
-      // Sticky latest pins should keep correcting post-layout drift until the
-      // target stabilizes, while transient jumps still back off if the user
-      // has already moved away from the requested position.
-      const shouldRealign = (
-        !hasInsufficientNaturalRange &&
-        frameLabel !== 'immediate' &&
-        deltaToViewportTop != null &&
-        Math.abs(deltaToViewportTop) > 1.5 &&
-        (
-          request.pinMode === 'transient'
-            ? Math.abs(scroller.scrollTop - targetScrollTop) <= 2
-            : stickyPinStillTargetsRequest
-        )
-      );
-      if (!shouldRealign) {
-        return;
-      }
-
-      const correctedMaxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      const correctedScrollTop = Math.min(
-        correctedMaxScrollTop,
-        Math.max(0, scroller.scrollTop + deltaToViewportTop),
-      );
-      if (Math.abs(correctedScrollTop - scroller.scrollTop) <= COMPENSATION_EPSILON_PX) {
-        return;
-      }
-
-      scroller.scrollTop = correctedScrollTop;
-      previousScrollTopRef.current = correctedScrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(
-        scroller,
-        bottomReservationStateRef.current,
-      );
-      recordScrollerGeometry(scroller);
-      scheduleVisibleTurnMeasure(2);
-      schedulePinReservationReconcile(2);
-    };
-    verifyPinAlignment('immediate');
-    // The observed drift lands after the initial alignment, so sample two
-    // follow-up frames and realign only if the target actually shifts.
-    requestAnimationFrame(() => {
-      verifyPinAlignment('raf-1');
-      requestAnimationFrame(() => {
-        verifyPinAlignment('raf-2');
-      });
-    });
-
-    previousScrollTopRef.current = targetScrollTop;
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextReservationState);
-    recordScrollerGeometry(scroller);
-
-    const alignedRect = resolvedMetrics.targetElement.getBoundingClientRect();
-    const alignedWithinTolerance = Math.abs(alignedRect.top - resolvedMetrics.viewportTop) <= 1.5;
-    if (alignedWithinTolerance && !hasInsufficientNaturalRange) {
-      viewportCoordinatorRef.current.pinElement(resolvedMetrics.targetElement);
-    }
-    startupTrace.markPhase('flowchat_turn_pin_resolve', {
-      result: hasInsufficientNaturalRange
-        ? 'best_effort_clamped'
-        : alignedWithinTolerance
-          ? 'aligned'
-          : 'not_aligned_after_scroll',
-      turnId: request.turnId,
-      pinMode: request.pinMode,
-      attempt: request.attempts,
-      targetIndex: targetItem.index,
-      targetScrollTop,
-      scrollTop: scroller.scrollTop,
-      targetTop: alignedRect.top,
-      viewportTop: resolvedMetrics.viewportTop,
-    });
-
-    if (hasInsufficientNaturalRange) {
-      return { kind: 'best-effort', targetScrollTop };
-    }
-
-    return alignedWithinTolerance
-      ? { kind: 'exact', targetScrollTop }
-      : { kind: 'pending' };
-  }, [
-    buildPinReservation,
-    applyFooterCompensationNow,
-    canCoordinateViewport,
-    getRenderedUserMessageElement,
-    isTurnPinRequestCurrent,
-    recordScrollerGeometry,
-    resolveTurnPinMetrics,
-    schedulePinReservationReconcile,
-    scheduleVisibleTurnMeasure,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-    userMessageItems,
-  ]);
-
-  const reconcileTransientTurnPinStabilization = useCallback(() => {
-    const request = transientTurnPinStabilizationRef.current;
-    if (!request) {
-      return;
-    }
-    if (!canProcessViewportGeometry(scrollerElementRef.current)) {
-      return;
-    }
-
-
-    if (request.pinMode !== 'transient' || performance.now() > request.expiresAtMs) {
-      transientTurnPinStabilizationRef.current = null;
-      if (activeTurnPinRequestRef.current?.generation === request.generation) {
-        cancelUnresolvedTurnPinRef.current();
-      } else {
-        pendingTurnPinGenerationRef.current = null;
-        setPendingTurnPin(current => (
-          current?.generation === request.generation ? null : current
-        ));
-      }
-      return;
-    }
-
-    if (viewportCoordinatorRef.current.getMode() === 'idle') {
-      viewportCoordinatorRef.current.pinItem('transient-turn-pin-rematerializing');
-    }
-
-    const nextRequest: TransientTurnPinStabilizationState = {
-      ...request,
-      behavior: 'auto',
-      attempts: request.attempts + 1,
-    };
-    const resolved = tryResolvePendingTurnPin(nextRequest);
-    if (resolved.kind === 'best-effort' && settleBestEffortTurnPin(nextRequest)) {
-      scheduleVisibleTurnMeasure(2);
-      return;
-    }
-    const scroller = scrollerElementRef.current;
-    const targetElement = getRenderedUserMessageElement(nextRequest.turnId);
-    const targetRect = targetElement?.getBoundingClientRect();
-    const viewportTop = scroller
-      ? scroller.getBoundingClientRect().top + PINNED_TURN_VIEWPORT_OFFSET_PX
-      : null;
-    const aligned = Boolean(
-      resolved.kind === 'exact' &&
-      scroller &&
-      targetRect &&
-      viewportTop !== null &&
-      Math.abs(targetRect.top - viewportTop) <= 1.5
-    );
-    const geometryStable = Boolean(
-      aligned &&
-      request.lastScrollTop !== null &&
-      request.lastTargetTop !== null &&
-      scroller &&
-      targetRect &&
-      Math.abs(scroller.scrollTop - request.lastScrollTop) <= 1 &&
-      Math.abs(targetRect.top - request.lastTargetTop) <= 1
-    );
-    nextRequest.stableAlignedFrames = aligned
-      ? (geometryStable ? request.stableAlignedFrames + 1 : 1)
-      : 0;
-    nextRequest.lastScrollTop = aligned && scroller ? scroller.scrollTop : null;
-    nextRequest.lastTargetTop = aligned && targetRect ? targetRect.top : null;
-
-    if (nextRequest.stableAlignedFrames >= TRANSIENT_TURN_PIN_STABLE_FRAME_COUNT) {
-      if (activeTurnPinRequestRef.current?.generation === nextRequest.generation) {
-        activeTurnPinRequestRef.current = null;
-      }
-      transientTurnPinStabilizationRef.current = null;
-      pendingTurnPinGenerationRef.current = null;
-      setPendingTurnPin(current => (
-        current?.generation === nextRequest.generation ? null : current
-      ));
-      scheduleVisibleTurnMeasure(2);
-      return;
-    }
-
-    transientTurnPinStabilizationRef.current = nextRequest;
-    if (resolved.kind !== 'pending') {
-      scheduleVisibleTurnMeasure(2);
-    }
-    scheduleTransientTurnPinStabilizationRef.current(1);
-  }, [
-    canProcessViewportGeometry,
-    getRenderedUserMessageElement,
-    scheduleVisibleTurnMeasure,
-    settleBestEffortTurnPin,
-    tryResolvePendingTurnPin,
-  ]);
-
-  const scheduleTransientTurnPinStabilization = useCallback((frames: number = 1) => {
-    if (!transientTurnPinStabilizationRef.current) {
-      return;
-    }
-    if (!canProcessViewportGeometry(scrollerElementRef.current)) {
-      return;
-    }
-
-    if (turnPinStabilizationFrameRef.current !== null) {
-      cancelAnimationFrame(turnPinStabilizationFrameRef.current);
-      turnPinStabilizationFrameRef.current = null;
-    }
-
-    const run = (remainingFrames: number) => {
-      turnPinStabilizationFrameRef.current = requestAnimationFrame(() => {
-        if (remainingFrames > 1) {
-          run(remainingFrames - 1);
-          return;
-        }
-
-        turnPinStabilizationFrameRef.current = null;
-        reconcileTransientTurnPinStabilization();
-      });
-    };
-
-    run(Math.max(1, frames));
-  }, [canProcessViewportGeometry, reconcileTransientTurnPinStabilization]);
-  scheduleTransientTurnPinStabilizationRef.current = scheduleTransientTurnPinStabilization;
-
-  const drainCollapseReservationPreservingPinnedItem = useCallback((reason: string) => {
-    const currentState = bottomReservationStateRef.current;
-    if (getReservationTotalPx(currentState.collapse) <= COMPENSATION_EPSILON_PX) {
-      return currentState;
-    }
-
-    const scroller = scrollerElementRef.current;
-    const ownsPinnedItem = viewportCoordinatorRef.current.getMode() === 'pinned-item';
-    const stickyPinTarget = (
-      ownsPinnedItem &&
-      currentState.pin.mode === 'sticky-latest' &&
-      currentState.pin.targetTurnId
-    )
-      ? currentState.pin.targetTurnId
-      : null;
-    const resolvedPinMetrics = scroller && stickyPinTarget
-      ? resolveTurnPinMetrics(
-        stickyPinTarget,
-        getTotalBottomCompensationPx(currentState),
-      )
-      : null;
-    if (stickyPinTarget && !resolvedPinMetrics) {
-      return null;
-    }
-
-    const nextPinReservation = stickyPinTarget && resolvedPinMetrics && scroller
-      ? buildPinReservation(
-        stickyPinTarget,
-        'sticky-latest',
-        resolvedPinMetrics.missingTailSpace,
-        scroller.clientHeight,
-        currentState.pin,
-      )
-      : currentState.pin;
-    const nextState = transferCollapseReservationToPin(currentState, nextPinReservation);
-    updateBottomReservationState(nextState);
-    applyFooterCompensationNow(nextState);
-    if (scroller && stickyPinTarget) {
-      viewportCoordinatorRef.current.restoreElementAnchor(
-        scroller,
-        `collapse-drain:${reason}`,
-      );
-    }
-    return nextState;
-  }, [
-    applyFooterCompensationNow,
-    buildPinReservation,
-    getTotalBottomCompensationPx,
-    resolveTurnPinMetrics,
-    updateBottomReservationState,
-  ]);
-
-  const clearCollapseIntentScheduling = useCallback(() => {
-    if (collapseIntentFinalizeTimerRef.current !== null) {
-      window.clearTimeout(collapseIntentFinalizeTimerRef.current);
-      collapseIntentFinalizeTimerRef.current = null;
-    }
-    if (collapseIntentAnimationTimerRef.current !== null) {
-      window.clearTimeout(collapseIntentAnimationTimerRef.current);
-      collapseIntentAnimationTimerRef.current = null;
-    }
-    if (collapseIntentSettleFrameRef.current !== null) {
-      cancelAnimationFrame(collapseIntentSettleFrameRef.current);
-      collapseIntentSettleFrameRef.current = null;
-    }
-  }, []);
-
-  const finalizeCollapseIntent = useCallback((
-    reason: string,
-    options?: { expectedExpiresAtMs?: number; suppressHandoff?: boolean },
-  ) => {
-    const intent = pendingCollapseIntentRef.current;
-    if (
-      !intent.active ||
-      (
-        options?.expectedExpiresAtMs !== undefined &&
-        intent.expiresAtMs !== options.expectedExpiresAtMs
-      )
-    ) {
-      return false;
-    }
-
-    const coordinatorMode = viewportCoordinatorRef.current.getMode();
-    const reservationBeforeSettlement = bottomReservationStateRef.current;
-    const settlementStrategy = resolveCollapseIntentSettlementStrategy({
-      coordinatorMode,
-      isFollowingOutput: isFollowingOutputRef.current,
-      isStreamingOutput: isStreamingOutputRef.current,
-      reservation: reservationBeforeSettlement,
-    });
-
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'E',
-        location: 'VirtualMessageList.finalizeCollapseIntent',
-        message: 'Collapse intent finalization started',
-        data: () => ({
-          reason,
-          intent,
-          coordinatorMode,
-          settlementStrategy,
-          reservation: reservationBeforeSettlement,
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-        }),
-      });
-    }
-
-    clearCollapseIntentScheduling();
-    pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-    if (settlementStrategy === 'retain-following-tail') {
-      retainCollapseRangeForQuietSettlement(intent, reason);
-      if (deferredFollowReasonRef.current) {
-        const deferredReason = deferredFollowReasonRef.current;
-        deferredFollowReasonRef.current = null;
-        followOutputControllerRef.current.scheduleFollowToLatest(
-          `${deferredReason}-after-collapse`,
-        );
-      }
-      return true;
-    }
-
-    const scroller = scrollerElementRef.current;
-    const nextState = (() => {
-      switch (settlementStrategy) {
-        case 'reconcile-sticky-pin':
-        case 'drain':
-          return drainCollapseReservationPreservingPinnedItem(reason);
-        case 'settle-preserved-element':
-        case 'settle-protected-viewport':
-          return scroller
-            ? settleCollapseReservationForViewport(
-              bottomReservationStateRef.current,
-              {
-                scrollTop: scroller.scrollTop,
-                scrollHeight: scroller.scrollHeight,
-                clientHeight: scroller.clientHeight,
-              },
-            )
-            : protectCurrentCollapseReservation(bottomReservationStateRef.current);
-      }
-    })();
-    if (nextState === null) {
-      pendingCollapseIntentRef.current = intent;
-      collapseIntentFinalizeTimerRef.current = window.setTimeout(() => {
-        collapseIntentFinalizeTimerRef.current = null;
-        finalizeCollapseIntentRef.current('collapse-intent-target-retry', {
-          expectedExpiresAtMs: intent.expiresAtMs,
-          suppressHandoff: options?.suppressHandoff,
-        });
-      }, 50);
-      return false;
-    }
-
-    if (!areBottomReservationStatesEqual(bottomReservationStateRef.current, nextState)) {
-      updateBottomReservationState(nextState);
-      applyFooterCompensationNow(nextState);
-    }
-    if (nextState.collapse.px <= COMPENSATION_EPSILON_PX) {
-      clearCollapseReservationOwner();
-    }
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.finalizeCollapseIntent',
-        message: 'Collapse intent reservation settlement completed',
-        data: () => ({
-          reason,
-          settlementStrategy,
-          coordinatorMode,
-          reservationBefore: reservationBeforeSettlement,
-          reservationAfter: bottomReservationStateRef.current,
-        }),
-      });
-    }
-    if (coordinatorMode === 'preserving-element' && scroller) {
-      viewportCoordinatorRef.current.restoreElementAnchor(
-        scroller,
-        `collapse-finalized:${reason}`,
-      );
-      const restoredState = protectCurrentCollapseReservation(
-        bottomReservationStateRef.current,
-      );
-      if (!areBottomReservationStatesEqual(bottomReservationStateRef.current, restoredState)) {
-        updateBottomReservationState(restoredState);
-        applyFooterCompensationNow(restoredState);
-      }
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-      recordScrollerGeometry(scroller);
-    }
-    if (coordinatorMode === 'preserving-element') {
-      viewportCoordinatorRef.current.settleElementPreservation(
-        `collapse-finalized:${reason}`,
-      );
-    }
-
-    reconcilePendingStickyPinGrowthSettlement(
-      `collapse-finalized:${reason}`,
-      { preserveExistingQuietTimer: true },
-    );
-
-    if (deferredFollowReasonRef.current) {
-      const deferredReason = deferredFollowReasonRef.current;
-      deferredFollowReasonRef.current = null;
-      followOutputControllerRef.current.scheduleFollowToLatest(`${deferredReason}-after-collapse`);
-    }
-    if (!options?.suppressHandoff) {
-      maybeHandoffPinnedTurnToTailRef.current(`collapse-finalized:${reason}`);
-    }
-    return true;
-  }, [
-    applyFooterCompensationNow,
-    clearCollapseIntentScheduling,
-    clearCollapseReservationOwner,
-    drainCollapseReservationPreservingPinnedItem,
-    reconcilePendingStickyPinGrowthSettlement,
-    recordScrollerGeometry,
-    retainCollapseRangeForQuietSettlement,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-  finalizeCollapseIntentRef.current = finalizeCollapseIntent;
-
-  const scheduleCollapseIntentFinalization = useCallback((
-    intent: PendingCollapseIntentState,
-    reason: string | null | undefined,
-  ) => {
-    clearCollapseIntentScheduling();
-    const expectedExpiresAtMs = intent.expiresAtMs;
-    collapseIntentFinalizeTimerRef.current = window.setTimeout(() => {
-      collapseIntentFinalizeTimerRef.current = null;
-      finalizeCollapseIntentRef.current('collapse-intent-timeout', {
-        expectedExpiresAtMs,
-      });
-    }, Math.max(0, expectedExpiresAtMs - performance.now()));
-
-    if (reason !== 'auto') {
-      return;
-    }
-
-    // Auto collapses animate for FLOWCHAT_COLLAPSE_DURATION_MS. Finalize only
-    // after that window plus a short settle so reservation tracks the moving
-    // height instead of ending while the box is still closing.
-    const settle = (remainingFrames: number) => {
-      collapseIntentSettleFrameRef.current = requestAnimationFrame(() => {
-        if (remainingFrames > 1) {
-          settle(remainingFrames - 1);
-          return;
-        }
-        collapseIntentSettleFrameRef.current = null;
-        finalizeCollapseIntentRef.current('auto-collapse-layout-settled', {
-          expectedExpiresAtMs,
-        });
-      });
-    };
-    collapseIntentAnimationTimerRef.current = window.setTimeout(() => {
-      collapseIntentAnimationTimerRef.current = null;
-      settle(AUTO_COLLAPSE_SETTLE_FRAMES);
-    }, FLOWCHAT_COLLAPSE_DURATION_MS);
-  }, [clearCollapseIntentScheduling]);
-
-  useEffect(() => clearCollapseIntentScheduling, [clearCollapseIntentScheduling]);
-
-  const handleScrollerRef = useCallback((el: HTMLElement | Window | null) => {
-    restoreScrollerMethodsRef.current?.();
-    restoreScrollerMethodsRef.current = null;
-
-    if (el && el instanceof HTMLElement) {
-      const originalScrollTo = el.scrollTo;
-      const originalScrollBy = el.scrollBy;
-      const wrapScrollMethod = (
-        method: 'scrollTo' | 'scrollBy',
-        original: typeof el.scrollTo,
-      ): typeof el.scrollTo => {
-        return ((...args: unknown[]) => {
-          let requestedTop: number | null = null;
-          const firstArg = args[0];
-          if (typeof firstArg === 'number' && typeof args[1] === 'number') {
-            requestedTop = args[1];
-          } else if (
-            firstArg !== null &&
-            typeof firstArg === 'object' &&
-            'top' in firstArg &&
-            typeof firstArg.top === 'number'
-          ) {
-            requestedTop = firstArg.top;
-          }
-          const previousGeometry = previousScrollerGeometryRef.current;
-          const previousMaxScrollTop = previousGeometry
-            ? Math.max(0, previousGeometry.scrollHeight - previousGeometry.clientHeight)
-            : null;
-          const wasAtPhysicalBottomBeforeScrollBy = Boolean(
-            previousGeometry &&
-            previousMaxScrollTop !== null &&
-            Math.abs(previousMaxScrollTop - previousGeometry.scrollTop) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX
-          );
-          const hasSemanticAnchor = (
-            method === 'scrollBy' &&
-            viewportCoordinatorRef.current.ownsElementAnchor()
-          );
-          const suppressVirtualizerCompensation = (
-            hasSemanticAnchor ||
-            (
-              method === 'scrollBy' &&
-              shouldSuppressFollowingTailNegativeScrollBy({
-                requestedTop,
-                isFollowingOutput: isFollowingOutputRef.current,
-                isStreamingOutput: isStreamingOutputRef.current,
-                wasAtPhysicalBottom: wasAtPhysicalBottomBeforeScrollBy,
-              })
-            )
-          );
-          const diagnosticsEnabled = flowChatDiagnostics.isEnabled();
-          const scrollTopBefore = diagnosticsEnabled ? el.scrollTop : null;
-          if (!suppressVirtualizerCompensation) {
-            Reflect.apply(original, el, args);
-          }
-          if (diagnosticsEnabled) {
-            flowChatDiagnostics.trace({
-              hypothesis: 'D',
-              location: `VirtualMessageList.scroller.${method}`,
-              message: suppressVirtualizerCompensation
-                ? 'Virtualizer scroll request suppressed'
-                : 'Virtualizer scroll request applied',
-              data: () => ({
-                method,
-                requestedTop,
-                suppressVirtualizerCompensation,
-                hasSemanticAnchor,
-                wasAtPhysicalBottomBeforeScrollBy,
-                isFollowingOutput: isFollowingOutputRef.current,
-                isStreamingOutput: isStreamingOutputRef.current,
-                coordinatorMode: viewportCoordinatorRef.current.getMode(),
-                scrollTopBefore,
-                scrollTopAfter: el.scrollTop,
-                scrollHeight: el.scrollHeight,
-                clientHeight: el.clientHeight,
-              }),
-            });
-          }
-        }) as typeof el.scrollTo;
-      };
-      const wrappedScrollTo = typeof originalScrollTo === 'function'
-        ? wrapScrollMethod('scrollTo', originalScrollTo)
-        : null;
-      const wrappedScrollBy = typeof originalScrollBy === 'function'
-        ? wrapScrollMethod('scrollBy', originalScrollBy)
-        : null;
-      if (wrappedScrollTo) {
-        el.scrollTo = wrappedScrollTo;
-      }
-      if (wrappedScrollBy) {
-        el.scrollBy = wrappedScrollBy;
-      }
-      restoreScrollerMethodsRef.current = () => {
-        if (wrappedScrollTo && el.scrollTo === wrappedScrollTo) {
-          el.scrollTo = originalScrollTo;
-        }
-        if (wrappedScrollBy && el.scrollBy === wrappedScrollBy) {
-          el.scrollBy = originalScrollBy;
-        }
-      };
-      virtuosoMountStateRef.current = {
-        sessionId: activeSessionIdRef.current,
-        mounted: true,
-      };
-      scrollerElementRef.current = el;
-      setScrollerElement(el);
-      return;
-    }
-
-    scrollerElementRef.current = null;
-    setScrollerElement(null);
-  }, []);
-
-  const clearPreviousHistoryBoundaryStatus = useCallback(() => {
-    if (previousHistoryBoundaryStatusTimerRef.current !== null) {
-      window.clearTimeout(previousHistoryBoundaryStatusTimerRef.current);
-      previousHistoryBoundaryStatusTimerRef.current = null;
-    }
-    setPreviousHistoryBoundaryStatus(null);
-  }, []);
-
-  const showPreviousHistoryBoundaryStatus = useCallback((
-    sessionId: string,
-    reason: string,
-    state: 'preparing' | 'not-ready'
-  ) => {
-    if (previousHistoryBoundaryStatusTimerRef.current !== null) {
-      window.clearTimeout(previousHistoryBoundaryStatusTimerRef.current);
-      previousHistoryBoundaryStatusTimerRef.current = null;
-    }
-
-    setPreviousHistoryBoundaryStatus({
-      sessionId,
-      reason,
-      state,
-    });
-
-    previousHistoryBoundaryStatusTimerRef.current = window.setTimeout(() => {
-      previousHistoryBoundaryStatusTimerRef.current = null;
-      setPreviousHistoryBoundaryStatus(current => {
-        if (
-          current?.sessionId === sessionId &&
-          current.reason === reason &&
-          current.state === state
-        ) {
-          return null;
-        }
-        return current;
-      });
-    }, PREVIOUS_HISTORY_BOUNDARY_STATUS_DURATION_MS);
-  }, []);
-
-  useEffect(() => () => {
-    if (previousHistoryBoundaryStatusTimerRef.current !== null) {
-      window.clearTimeout(previousHistoryBoundaryStatusTimerRef.current);
-      previousHistoryBoundaryStatusTimerRef.current = null;
-    }
-    if (historyPagingRetryTimerRef.current !== null) {
-      window.clearTimeout(historyPagingRetryTimerRef.current);
-      historyPagingRetryTimerRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    setPreviousHistoryBoundaryStatus(current => {
-      if (current && current.sessionId !== activeSessionId) {
-        return null;
-      }
-      return current;
-    });
-  }, [activeSessionId]);
-
-  const captureHistoryPrependAnchor = useCallback(() => {
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return null;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const nodes = Array.from(scroller.querySelectorAll<HTMLElement>(
-      '.virtual-item-wrapper[data-item-type="user-message"][data-turn-id]',
-    ));
-    const visibleNode = nodes.find(node => {
-      const rect = node.getBoundingClientRect();
-      return rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
-    });
-    const node = visibleNode ?? nodes[0];
-    const turnId = node?.dataset.turnId;
-    if (!node || !turnId) {
-      return null;
-    }
-
-    return {
-      turnId,
-      offsetFromScrollerTop: node.getBoundingClientRect().top - scrollerRect.top,
-      element: node,
-    };
-  }, []);
-
-  const requestHistoryWindowBoundaryForUserIntent = useCallback((
-    direction: SessionHistoryWindowDirection,
-    reason: string,
-    options?: { force?: boolean },
-  ) => {
-    if (
-      presentationMode !== 'history-window'
-      || !historyWindow
-      || !onHistoryWindowBoundaryIntent
-      || historyBoundaryState[direction] === 'loading'
-    ) {
-      return false;
-    }
-
-    const scroller = scrollerElementRef.current;
-    const sessionId = activeSessionIdRef.current;
-    if (!scroller || !sessionId) {
-      return false;
-    }
-    const thresholdPx = Math.max(
-      PARTIAL_HISTORY_FULL_PROJECTION_TOP_THRESHOLD_PX,
-      scroller.clientHeight * 2,
-    );
-    const distanceFromBoundary = direction === 'before'
-      ? scroller.scrollTop
-      : Math.max(0, scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop);
-    if (!options?.force && distanceFromBoundary > thresholdPx) {
-      return false;
-    }
-
-    let preparedAnchorState: PendingHistoryPrependAnchorState | null = null;
-    const cancelViewportPresentationCommit = () => {
-      if (
-        preparedAnchorState
-        && pendingHistoryPrependAnchorRef.current === preparedAnchorState
-      ) {
-        pendingHistoryPrependAnchorRef.current = null;
-        setHistoryPagingAnchorTurnId(null);
-      }
-      setHistoryPagingLoading(false);
-      clearPreviousHistoryBoundaryStatus();
-    };
-    const prepareViewportForPresentationCommit = async () => {
-      const quietReady = await waitForHistoryPresentationCommitQuiet(sessionId);
-      if (!quietReady || activeSessionIdRef.current !== sessionId) {
-        return false;
-      }
-      const anchor = captureHistoryPrependAnchor();
-      if (anchor) {
-        historyPagingActiveRef.current = true;
-        setHistoryPagingActive(true);
-        setHistoryPagingAnchorTurnId(anchor.turnId);
-        preparedAnchorState = {
-          ...anchor,
-          beforeItemCount: virtualItems.length,
-          handoffRestored: true,
-          prependRestored: false,
-        };
-        pendingHistoryPrependAnchorRef.current = preparedAnchorState;
-      }
-      return true;
-    };
-    startupTrace.markPhase('flowchat_history_window_boundary_requested', {
-      sessionId: activeSessionIdRef.current,
-      direction,
-      reason,
-      startOrdinal: historyWindow.startOrdinal,
-      endOrdinalExclusive: historyWindow.endOrdinalExclusive,
-      presentationRevision,
-    });
-    try {
-      void Promise.resolve(onHistoryWindowBoundaryIntent(direction, {
-        prepareViewportForPresentationCommit,
-        cancelViewportPresentationCommit,
-      })).catch(() => {});
-    } catch {
-      return false;
-    }
-    return true;
-  }, [
-    captureHistoryPrependAnchor,
-    clearPreviousHistoryBoundaryStatus,
-    historyBoundaryState,
-    historyWindow,
-    onHistoryWindowBoundaryIntent,
-    presentationMode,
-    presentationRevision,
-    virtualItems.length,
-    waitForHistoryPresentationCommitQuiet,
-  ]);
-
-  const revealPreviousHistoryWindowForUserIntent = useCallback((reason: string) => {
-    const sessionId = activeSession?.sessionId;
-    if (
-      presentationMode === 'history-window' ||
-      !sessionId ||
-      activeSession.historyState !== 'ready' ||
-      activeSession.isPartial !== true
-    ) {
-      return;
-    }
-
-    const usesCatalogHistoryWindow = (
-      activeSession.turnCatalog?.sessionId === sessionId
-      && Boolean(onHistoryWindowBoundaryIntent)
-    );
-
-    if (!historyPagingActiveRef.current) {
-      const anchor = usesCatalogHistoryWindow ? null : captureHistoryPrependAnchor();
-      historyPagingActiveRef.current = true;
-      setHistoryPagingActive(true);
-      setHistoryPagingLoading(true);
-      if (anchor) {
-        setHistoryPagingAnchorTurnId(anchor.turnId);
-        pendingHistoryPrependAnchorRef.current = {
-          ...anchor,
-          beforeItemCount: virtualItems.length,
-          handoffRestored: false,
-          prependRestored: false,
-        };
-      }
-      showPreviousHistoryBoundaryStatus(sessionId, reason, 'preparing');
-    }
-
-    if (usesCatalogHistoryWindow && onHistoryWindowBoundaryIntent) {
-      setHistoryPagingLoading(true);
-      if (catalogHistoryWindowRequestRef.current) {
-        return;
-      }
-      let preparedAnchorState: PendingHistoryPrependAnchorState | null = null;
-      const resetCatalogHistoryPagingState = () => {
-        if (
-          preparedAnchorState
-          && pendingHistoryPrependAnchorRef.current === preparedAnchorState
-        ) {
-          pendingHistoryPrependAnchorRef.current = null;
-        }
-        historyPagingActiveRef.current = false;
-        setHistoryPagingActive(false);
-        setHistoryPagingLoading(false);
-        setHistoryPagingAnchorTurnId(null);
-        clearPreviousHistoryBoundaryStatus();
-      };
-      const cancelViewportPresentationCommit = resetCatalogHistoryPagingState;
-      const prepareViewportForPresentationCommit = async () => {
-        const quietReady = await waitForHistoryPresentationCommitQuiet(sessionId);
-        if (!quietReady || activeSessionIdRef.current !== sessionId) {
-          return false;
-        }
-        const anchor = captureHistoryPrependAnchor();
-        if (anchor) {
-          setHistoryPagingAnchorTurnId(anchor.turnId);
-          preparedAnchorState = {
-            ...anchor,
-            beforeItemCount: virtualItems.length,
-            handoffRestored: true,
-            prependRestored: false,
-          };
-          pendingHistoryPrependAnchorRef.current = preparedAnchorState;
-        }
-        return true;
-      };
-      const request = Promise.resolve(onHistoryWindowBoundaryIntent('before', {
-        prepareViewportForPresentationCommit,
-        cancelViewportPresentationCommit,
-      }))
-        .then(handled => {
-          const result = normalizeHistoryWindowBoundaryIntentResult(handled);
-          if (activeSessionIdRef.current !== sessionId) {
-            return result;
-          }
-          if (result === 'applied') {
-            if (!preparedAnchorState) {
-              resetCatalogHistoryPagingState();
-            }
-            return result;
-          }
-          if (result === 'exhausted' || result === 'cancelled') {
-            resetCatalogHistoryPagingState();
-            return result;
-          }
-          resetCatalogHistoryPagingState();
-          showPreviousHistoryBoundaryStatus(sessionId, reason, 'not-ready');
-          return result;
-        })
-        .catch(error => {
-          if (activeSessionIdRef.current === sessionId) {
-            resetCatalogHistoryPagingState();
-            showPreviousHistoryBoundaryStatus(sessionId, reason, 'not-ready');
-          }
-          log.warn('Failed to request an older catalog Turn window', {
-            sessionId,
-            error,
-          });
-          return 'not-ready' as const;
-        })
-        .finally(() => {
-          if (catalogHistoryWindowRequestRef.current === request) {
-            catalogHistoryWindowRequestRef.current = null;
-          }
-        });
-      catalogHistoryWindowRequestRef.current = request;
-      return;
-    }
-
-    const pendingAnchor = pendingHistoryPrependAnchorRef.current;
-    if (!pendingAnchor || pendingAnchor.prependRestored) {
-      const anchor = captureHistoryPrependAnchor();
-      if (anchor) {
-        setHistoryPagingAnchorTurnId(anchor.turnId);
-        pendingHistoryPrependAnchorRef.current = {
-          ...anchor,
-          beforeItemCount: virtualItems.length,
-          handoffRestored: true,
-          prependRestored: false,
-        };
-      }
-    }
-    setHistoryPagingLoading(true);
-
-    if (!flowChatStore.hasDeferredSessionHistoryProjection(sessionId)) {
-      if (flowChatStore.hasPendingSessionHistoryCompletion(sessionId)) {
-        const released = flowChatStore.releaseSessionHistoryCompletionAfterInitialPaint(sessionId, {
-          immediate: true,
-          reason,
-        });
-        showPreviousHistoryBoundaryStatus(sessionId, reason, 'preparing');
-        startupTrace.markPhase('flowchat_previous_history_window_preparing', {
-          sessionId,
-          reason,
-          released,
-        });
-        if (historyPagingRetryTimerRef.current === null) {
-          historyPagingRetryTimerRef.current = window.setTimeout(() => {
-            historyPagingRetryTimerRef.current = null;
-            if (activeSessionIdRef.current === sessionId && historyPagingActiveRef.current) {
-              revealPreviousHistoryWindowForUserIntent('history-ready-after-scroll');
-            }
-          }, 50);
-        }
-      } else {
-        setHistoryPagingLoading(false);
-        showPreviousHistoryBoundaryStatus(sessionId, reason, 'not-ready');
-        startupTrace.markPhase('flowchat_previous_history_window_not_ready', {
-          sessionId,
-          reason,
-        });
-      }
-      return;
-    }
-
-    const revealed = flowChatStore.revealPreviousSessionHistoryWindow(sessionId, reason);
-    if (historyPagingRetryTimerRef.current !== null) {
-      window.clearTimeout(historyPagingRetryTimerRef.current);
-      historyPagingRetryTimerRef.current = null;
-    }
-    if (revealed) {
-      clearPreviousHistoryBoundaryStatus();
-    } else {
-      setHistoryPagingLoading(false);
-      showPreviousHistoryBoundaryStatus(sessionId, reason, 'not-ready');
-    }
-    startupTrace.markPhase('flowchat_previous_history_window_requested', {
-      sessionId,
-      reason,
-      revealed,
-    });
-  }, [
-    activeSession?.historyState,
-    activeSession?.isPartial,
-    activeSession?.sessionId,
-    activeSession?.turnCatalog,
-    captureHistoryPrependAnchor,
-    clearPreviousHistoryBoundaryStatus,
-    showPreviousHistoryBoundaryStatus,
-    presentationMode,
-    onHistoryWindowBoundaryIntent,
-    virtualItems.length,
-    waitForHistoryPresentationCommitQuiet,
-  ]);
-
-  const shouldRevealPreviousHistoryWindowForUserIntent = useCallback((options?: { force?: boolean }) => {
-    if (options?.force === true) {
-      return true;
-    }
-
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return false;
-    }
-
-    const topThresholdPx = Math.max(
-      PARTIAL_HISTORY_FULL_PROJECTION_TOP_THRESHOLD_PX,
-      scroller.clientHeight * 1.5,
-    );
-    return scroller.scrollTop <= topThresholdPx;
-  }, []);
-
-  const schedulePreviousHistoryWindowForUserIntent = useCallback((reason: string, options?: { force?: boolean }) => {
-    const scheduledSessionId = activeSession?.sessionId ?? null;
-    pendingFullHistoryProjectionReasonRef.current = reason;
-    if (fullHistoryProjectionIntentFrameRef.current !== null) {
-      cancelAnimationFrame(fullHistoryProjectionIntentFrameRef.current);
-      fullHistoryProjectionIntentFrameRef.current = null;
-    }
-
-    fullHistoryProjectionIntentFrameRef.current = requestAnimationFrame(() => {
-      fullHistoryProjectionIntentFrameRef.current = requestAnimationFrame(() => {
-        fullHistoryProjectionIntentFrameRef.current = null;
-        const pendingReason = pendingFullHistoryProjectionReasonRef.current;
-        pendingFullHistoryProjectionReasonRef.current = null;
-        if (!pendingReason || activeSessionIdRef.current !== scheduledSessionId) {
-          return;
-        }
-
-        if (!shouldRevealPreviousHistoryWindowForUserIntent(options)) {
-          return;
-        }
-
-        revealPreviousHistoryWindowForUserIntent(pendingReason);
-      });
-    });
-  }, [
-    activeSession?.sessionId,
-    revealPreviousHistoryWindowForUserIntent,
-    shouldRevealPreviousHistoryWindowForUserIntent,
-  ]);
-
-  const shouldSuspendAutoFollow = useCallback(() => {
-    const collapseIntent = pendingCollapseIntentRef.current;
-    return (
-      !isViewportActiveRef.current ||
-      viewportGeometrySuspendedRef.current ||
-      collapseIntent.active
-    );
-  }, []);
-
-  const scheduleFollowToLatestWithViewportState = useCallback((reason: string) => {
-    const collapseIntentActive = shouldSuspendAutoFollow();
-    if (collapseIntentActive) {
-      deferredFollowReasonRef.current = reason;
-      return;
-    }
-    deferredFollowReasonRef.current = null;
-    followOutputControllerRef.current.scheduleFollowToLatest(reason);
-  }, [shouldSuspendAutoFollow]);
-
-  useLayoutEffect(() => {
-    previousMeasuredHeightRef.current = null;
-    previousScrollTopRef.current = 0;
-    cancelHistoryPresentationCommitQuietWaiters();
-    viewportCoordinatorRef.current.release('session-reset');
-    clearTurnPinRequest();
-    cancelLatestEndAnchorStabilization();
-    clearCollapseIntentScheduling();
-    clearRetainedCollapseSettlement();
-    clearPendingStickyPinGrowth('session-reset');
-    pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-    retainedCollapseAnchorRef.current = null;
-    previousScrollerGeometryRef.current = null;
-    preparedHistoryTurnPinRef.current = null;
-    historyPagingActiveRef.current = false;
-    if (historyPagingRetryTimerRef.current !== null) {
-      window.clearTimeout(historyPagingRetryTimerRef.current);
-      historyPagingRetryTimerRef.current = null;
-    }
-    catalogHistoryWindowRequestRef.current = null;
-    pendingHistoryPrependAnchorRef.current = null;
-    setHistoryPagingActive(false);
-    setHistoryPagingLoading(false);
-    setHistoryPagingAnchorTurnId(null);
-    const currentSessionId = activeSession?.sessionId ?? null;
-    const activeHandoff = historyProjectionHandoffRef.current;
-    if (!activeHandoff || activeHandoff.sessionId !== currentSessionId) {
-      clearHistoryProjectionHandoff('session-reset');
-    }
-    resetBottomReservations();
-  }, [
-    activeSession?.sessionId,
-    cancelHistoryPresentationCommitQuietWaiters,
-    cancelLatestEndAnchorStabilization,
-    clearCollapseIntentScheduling,
-    clearRetainedCollapseSettlement,
-    clearPendingStickyPinGrowth,
-    clearHistoryProjectionHandoff,
-    clearTurnPinRequest,
-    resetBottomReservations,
-  ]);
-
-  useEffect(() => {
-    previousIsStreamingOutputRef.current = false;
-  }, [activeSession?.sessionId]);
-
-  useEffect(() => {
-    if (virtualItems.length === 0) {
-      previousMeasuredHeightRef.current = null;
-      clearTurnPinRequest();
-      cancelLatestEndAnchorStabilization();
-      clearPendingStickyPinGrowth('empty-list');
-      resetBottomReservations();
-    }
-  }, [
-    virtualItems.length,
-    cancelLatestEndAnchorStabilization,
-    clearPendingStickyPinGrowth,
-    clearTurnPinRequest,
-    resetBottomReservations,
-  ]);
-
-  useEffect(() => {
-    return () => {
-      cancelHistoryPresentationCommitQuietWaiters();
-      clearRetainedCollapseSettlement();
-      cancelLatestEndAnchorStabilization();
-      if (historyProjectionHandoffReleaseFrameRef.current !== null) {
-        cancelAnimationFrame(historyProjectionHandoffReleaseFrameRef.current);
-        historyProjectionHandoffReleaseFrameRef.current = null;
-      }
-    };
-  }, [
-    cancelHistoryPresentationCommitQuietWaiters,
-    cancelLatestEndAnchorStabilization,
-    clearRetainedCollapseSettlement,
-  ]);
-
-  useEffect(() => {
-    if (!scrollerElement) {
-      previousMeasuredHeightRef.current = null;
-      previousScrollerGeometryRef.current = null;
-      return;
-    }
-
-    const resizeTarget =
-      scrollerElement.firstElementChild instanceof HTMLElement
-        ? scrollerElement.firstElementChild
-        : scrollerElement;
-
-    if (canProcessViewportGeometry(scrollerElement)) {
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scrollerElement);
-      previousScrollTopRef.current = scrollerElement.scrollTop;
-      recordScrollerGeometry(scrollerElement);
-    } else {
-      recordScrollerGeometry(scrollerElement);
-    }
-
-    // Batch observer-triggered work into a single rAF per frame
-    let observerBatchPending = false;
-    const scheduleObserverBatch = () => {
-      if (observerBatchPending) return;
-      observerBatchPending = true;
-      requestAnimationFrame(() => {
-        observerBatchPending = false;
-        scheduleHeightMeasure(2);
-        scheduleVisibleTurnMeasure(2);
-        schedulePinReservationReconcile(2);
-        scheduleTransientTurnPinStabilization(2);
-        scheduleFollowToLatestWithViewportState('observer');
-        scheduleHistoryProjectionHandoffRelease(1);
-      });
-    };
-
-    resizeObserverRef.current?.disconnect();
-    resizeObserverRef.current = new ResizeObserver(() => {
-      if (!canProcessViewportGeometry(scrollerElement)) {
-        return;
-      }
-      syncPhysicalBottomAfterViewportResize(scrollerElement);
-      resolveLatestEndAnchorStabilizationRef.current?.('resize-observer');
-      scheduleObserverBatch();
-    });
-    resizeObserverRef.current.observe(resizeTarget);
-    if (resizeTarget !== scrollerElement) {
-      resizeObserverRef.current.observe(scrollerElement);
-    }
-
-    const handleWindowResize = () => {
-      if (!canProcessViewportGeometry(scrollerElement)) {
-        return;
-      }
-      syncPhysicalBottomAfterViewportResize(scrollerElement);
-      resolveLatestEndAnchorStabilizationRef.current?.('resize-observer');
-      scheduleObserverBatch();
-    };
-    window.addEventListener('resize', handleWindowResize);
-    window.visualViewport?.addEventListener('resize', handleWindowResize);
-
-    mutationObserverRef.current?.disconnect();
-    let mutationPending = false;
-    mutationObserverRef.current = new MutationObserver((mutations) => {
-      if (mutationPending) return;
-      if (!canProcessViewportGeometry(scrollerElement)) {
-        return;
-      }
-      if (!isProcessing) {
-        return;
-      }
-      const characterDataMutations = mutations.filter(mutation => mutation.type === 'characterData');
-      const attributesMutations = mutations.filter(mutation => mutation.type === 'attributes');
-      const hasSemanticMutation = (
-        characterDataMutations.length > 0 ||
-        attributesMutations.length > 0
-      );
-      if (!hasSemanticMutation) {
-        return;
-      }
-      mutationPending = true;
-      requestAnimationFrame(() => {
-        mutationPending = false;
-        scheduleObserverBatch();
-      });
-    });
-    mutationObserverRef.current.observe(scrollerElement, {
-      subtree: true,
-      childList: true,
-      characterData: true,
-    });
-
-    // The owned timer/frame finalizer does not depend on scroll events. Keep
-    // this check only as a backup for browsers that throttle background timers.
-    const replayDeferredFollowIfSettled = () => {
-      const now = performance.now();
-      const intent = pendingCollapseIntentRef.current;
-      if (intent.active && intent.expiresAtMs < now) {
-        finalizeCollapseIntent('collapse-intent-scroll-backup', {
-          expectedExpiresAtMs: intent.expiresAtMs,
-        });
-      }
-    };
-
-    const handleScroll = () => {
-      if (!canProcessViewportGeometry(scrollerElement)) {
-        return;
-      }
-      const now = performance.now();
-      const intent = pendingCollapseIntentRef.current;
-      const retainedCollapseAnchor = retainedCollapseAnchorRef.current;
-      const collapseProtectionActive = intent.active || retainedCollapseAnchor !== null;
-
-      // Reactive shrink-clamp restore: in follow + streaming mode, an upward
-      // jump in scrollTop that we did NOT request from JS and that is NOT
-      // attributable to a user gesture is the browser auto-clamping scrollTop
-      // because `scrollHeight` shrunk below `scrollTop + clientHeight`
-      // (typical cause: an unsignaled item shrink from Virtuoso re-measure
-      // or a tool result finalizing). With `overflow-anchor: none` we cannot
-      // ask the browser to keep the visual anchor for us.
-      //
-      // Unsignaled follow-mode shrink remains owned by the continuous tail loop.
-      // A known active or retained collapse is different: its transaction owns
-      // a bounded target and can restore a non-user clamp synchronously.
-      const intentCheckScrollTop = scrollerElement.scrollTop;
-      const intentCheckPreviousScrollTop = previousScrollTopRef.current;
-      const intentCheckScrollDelta = intentCheckScrollTop - intentCheckPreviousScrollTop;
-      const hasRecentUserUpwardIntent = now <= userInitiatedUpwardScrollUntilMsRef.current;
-      const pendingHistoryAnchor = pendingHistoryPrependAnchorRef.current;
-      if (pendingHistoryAnchor && !pendingHistoryAnchor.prependRestored) {
-        const anchorElement = getRenderedUserMessageElement(pendingHistoryAnchor.turnId);
-        if (anchorElement) {
-          const scrollerRect = scrollerElement.getBoundingClientRect();
-          pendingHistoryAnchor.offsetFromScrollerTop =
-            anchorElement.getBoundingClientRect().top - scrollerRect.top;
-        }
-      }
-      if (
-        flowChatDiagnostics.isEnabled() &&
-        Math.abs(intentCheckScrollDelta) > COMPENSATION_EPSILON_PX
-      ) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.handleScroll',
-          message: 'Scroller position changed',
-          data: () => ({
-            scrollTop: intentCheckScrollTop,
-            previousScrollTop: intentCheckPreviousScrollTop,
-            scrollDelta: intentCheckScrollDelta,
-            scrollHeight: scrollerElement.scrollHeight,
-            clientHeight: scrollerElement.clientHeight,
-            hasRecentUserUpwardIntent,
-            scrollbarPointerInteractionActive: scrollbarPointerInteractionActiveRef.current,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-            reservation: bottomReservationStateRef.current,
-            isFollowingOutput: isFollowingOutputRef.current,
-            isStreamingOutput: isStreamingOutputRef.current,
-            collapseProtectionActive,
-          }),
-        });
-      }
-      const collapseAnchorScrollTop = intent.active
-        ? intent.anchorScrollTop
-        : retainedCollapseAnchor?.anchorScrollTop ?? null;
-      if (
-        collapseAnchorScrollTop !== null &&
-        intentCheckScrollDelta < -COMPENSATION_EPSILON_PX &&
-        !hasRecentUserUpwardIntent &&
-        collapseAnchorScrollTop - intentCheckScrollTop > COMPENSATION_EPSILON_PX
-      ) {
-        preserveCollapseAnchorScrollTop(
-          scrollerElement,
-          collapseAnchorScrollTop,
-          intent.active ? 'scroll-active-collapse' : 'scroll-retained-collapse',
-        );
-        if (!intent.active) {
-          scheduleRetainedCollapseSettlement('delayed-scroll-clamp');
-        }
-        return;
-      }
-      const isFollowingTailShrinkClampCandidate = (
-        intentCheckScrollDelta < -COMPENSATION_EPSILON_PX &&
-        isFollowingOutputRef.current &&
-        isStreamingOutputRef.current &&
-        !hasRecentUserUpwardIntent &&
-        !scrollbarPointerInteractionActiveRef.current &&
-        !collapseProtectionActive
-      );
-      const previousScrollerGeometry = isFollowingTailShrinkClampCandidate
-        ? previousScrollerGeometryRef.current
-        : null;
-      const previousShrinkClampGeometry = previousScrollerGeometry
-        ? {
-          ...previousScrollerGeometry,
-          scrollTop: intentCheckPreviousScrollTop,
-        }
-        : null;
-      const currentScrollerGeometry: ScrollerGeometrySnapshot | null = (
-        isFollowingTailShrinkClampCandidate && previousShrinkClampGeometry
-      )
-        ? {
-          scrollTop: intentCheckScrollTop,
-          scrollHeight: scrollerElement.scrollHeight,
-          clientHeight: scrollerElement.clientHeight,
-        }
-        : null;
-      const followingTailShrinkClampRecovery = currentScrollerGeometry
-        ? resolveFollowingTailShrinkClampRecovery({
-          previousGeometry: previousShrinkClampGeometry,
-          currentGeometry: currentScrollerGeometry,
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-          hasRecentUserUpwardIntent,
-          scrollbarPointerInteractionActive: scrollbarPointerInteractionActiveRef.current,
-          collapseProtectionActive,
-        })
-        : null;
-      if (followingTailShrinkClampRecovery) {
-        acquireCollapseReservationOwner('late-shrink-clamp');
-        retainedCollapseAnchorRef.current = {
-          anchorScrollTop: followingTailShrinkClampRecovery.targetScrollTop,
-          toolId: null,
-          toolName: 'late-shrink-clamp',
-        };
-        preserveCollapseAnchorScrollTop(
-          scrollerElement,
-          followingTailShrinkClampRecovery.targetScrollTop,
-          'scroll-following-tail-late-shrink-clamp',
-        );
-        scheduleRetainedCollapseSettlement('following-tail-late-shrink-clamp');
-        if (flowChatDiagnostics.isEnabled()) {
-          flowChatDiagnostics.trace({
-            hypothesis: 'G',
-            location: 'VirtualMessageList.handleScroll',
-            message: 'Following-tail shrink clamp recovered as a viewport transaction',
-            data: () => ({
-              recovery: followingTailShrinkClampRecovery,
-              previousGeometry: previousScrollerGeometry,
-              currentGeometry: currentScrollerGeometry,
-              reservation: bottomReservationStateRef.current,
-              scrollTopAfter: scrollerElement.scrollTop,
-            }),
-          });
-        }
-        return;
-      }
-      if (
-        retainedCollapseAnchorRef.current &&
-        intentCheckScrollDelta > COMPENSATION_EPSILON_PX &&
-        !hasRecentUserUpwardIntent &&
-        !scrollbarPointerInteractionActiveRef.current
-      ) {
-        retainedCollapseAnchorRef.current.anchorScrollTop = Math.max(
-          retainedCollapseAnchorRef.current.anchorScrollTop,
-          intentCheckScrollTop,
-        );
-      }
-      if (
-        intentCheckScrollDelta < -COMPENSATION_EPSILON_PX &&
-        isFollowingOutputRef.current &&
-        isStreamingOutputRef.current &&
-        !hasRecentUserUpwardIntent &&
-        !collapseProtectionActive
-      ) {
-        if (flowChatDiagnostics.isEnabled()) {
-          flowChatDiagnostics.trace({
-            hypothesis: 'D',
-            location: 'VirtualMessageList.handleScroll',
-            message: 'Upward clamp delegated to the streaming follow loop',
-            data: () => ({
-              scrollTop: intentCheckScrollTop,
-              previousScrollTop: intentCheckPreviousScrollTop,
-              scrollDelta: intentCheckScrollDelta,
-            }),
-          });
-        }
-        // Follow+streaming: do not inject compensation or restore old
-        // scrollTop. Let the follow loop handle the scroll naturally on the
-        // next animation frame. Return here to prevent the downstream follow
-        // controller (followOutputControllerRef.current.handleScroll) from
-        // seeing the browser-clamp delta and misclassifying it as a user
-        // upward scroll, which would incorrectly exit follow mode.
-        previousScrollTopRef.current = intentCheckScrollTop;
-        recordScrollerGeometry(scrollerElement);
-        return;
-      }
-
-      const currentTotalCompensation = getTotalBottomCompensationPx();
-      if (
-        currentTotalCompensation > COMPENSATION_EPSILON_PX &&
-        !intent.active
-      ) {
-        const nextScrollTop = scrollerElement.scrollTop;
-        const scrollDelta = nextScrollTop - previousScrollTopRef.current;
-        if (scrollDelta > COMPENSATION_EPSILON_PX) {
-          const nextCompensationState = consumeBottomCompensation(scrollDelta);
-          applyFooterCompensationNow(nextCompensationState);
-          if (retainedCollapseAnchorRef.current) {
-            retainedCollapseAnchorRef.current.anchorScrollTop = Math.max(
-              retainedCollapseAnchorRef.current.anchorScrollTop,
-              scrollerElement.scrollTop,
-            );
-          }
-          previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(
-            scrollerElement,
-            nextCompensationState,
-          );
-        }
-      }
-
-      if (viewportCoordinatorRef.current.scheduleElementAnchorRestore(scrollerElement, 'scroll-handler')) {
-        previousScrollTopRef.current = scrollerElement.scrollTop;
-        recordScrollerGeometry(scrollerElement);
-        return;
-      }
-      previousScrollTopRef.current = scrollerElement.scrollTop;
-      recordScrollerGeometryIfLayoutStable(scrollerElement);
-      scheduleVisibleTurnMeasure();
-      followOutputControllerRef.current.handleScroll();
-      if (
-        performance.now() <= userInitiatedUpwardScrollUntilMsRef.current ||
-        scrollbarPointerInteractionActiveRef.current
-      ) {
-        schedulePreviousHistoryWindowForUserIntent('scroll-near-partial-history-boundary');
-      }
-
-      replayDeferredFollowIfSettled();
-    };
-    scrollerElement.addEventListener('scroll', handleScroll, { passive: true });
-
-    const handleWheel = (event: WheelEvent) => {
-      if (flowChatDiagnostics.isEnabled() && event.deltaY !== 0) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.handleWheel',
-          message: 'Wheel scroll intent observed',
-          data: () => ({
-            deltaY: event.deltaY,
-            scrollTop: scrollerElement.scrollTop,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          }),
-        });
-      }
-      if (event.deltaY !== 0) {
-        notifyUserScrollIntent();
-        clearTurnPinRequest();
-        cancelLatestEndAnchorStabilization();
-      }
-
-      if (event.deltaY > 0) {
-        requestHistoryWindowBoundaryForUserIntent('after', 'wheel-down');
-      } else if (event.deltaY < 0) {
-        requestHistoryWindowBoundaryForUserIntent('before', 'wheel-up');
-      }
-
-      if (event.deltaY < 0) {
-        userInitiatedUpwardScrollUntilMsRef.current =
-          performance.now() + USER_UPWARD_SCROLL_INTENT_WINDOW_MS;
-        schedulePreviousHistoryWindowForUserIntent('wheel-up');
-        followOutputControllerRef.current.handleUserScrollIntent();
-      }
-    };
-
-    const handleTouchStart = (event: TouchEvent) => {
-      touchScrollIntentStartYRef.current = event.touches[0]?.clientY ?? null;
-    };
-
-    const handleTouchMove = (event: TouchEvent) => {
-      const startY = touchScrollIntentStartYRef.current;
-      const currentY = event.touches[0]?.clientY;
-      if (startY === null || currentY === undefined) {
-        return;
-      }
-
-      if (Math.abs(currentY - startY) > TOUCH_SCROLL_INTENT_EXIT_THRESHOLD_PX) {
-        if (flowChatDiagnostics.isEnabled()) {
-          flowChatDiagnostics.trace({
-            hypothesis: 'A',
-            location: 'VirtualMessageList.handleTouchMove',
-            message: 'Touch scroll intent crossed the exit threshold',
-            data: () => ({ deltaY: currentY - startY, scrollTop: scrollerElement.scrollTop }),
-          });
-        }
-        notifyUserScrollIntent();
-        clearTurnPinRequest();
-        cancelLatestEndAnchorStabilization();
-
-        if (currentY - startY < -TOUCH_SCROLL_INTENT_EXIT_THRESHOLD_PX) {
-          requestHistoryWindowBoundaryForUserIntent('after', 'touch-scroll-down');
-        } else {
-          requestHistoryWindowBoundaryForUserIntent('before', 'touch-scroll-up');
-        }
-      }
-
-      if (currentY - startY > TOUCH_SCROLL_INTENT_EXIT_THRESHOLD_PX) {
-        clearBottomReservationsForUserBrowsing();
-        touchScrollIntentStartYRef.current = currentY;
-        userInitiatedUpwardScrollUntilMsRef.current =
-          performance.now() + USER_UPWARD_SCROLL_INTENT_WINDOW_MS;
-        schedulePreviousHistoryWindowForUserIntent('touch-scroll-up');
-        followOutputControllerRef.current.handleUserScrollIntent();
-      }
-      if (Math.abs(currentY - startY) > TOUCH_SCROLL_INTENT_EXIT_THRESHOLD_PX) {
-        touchScrollIntentStartYRef.current = currentY;
-      }
-    };
-
-    const resetTouchScrollIntent = () => {
-      touchScrollIntentStartYRef.current = null;
-      restartHistoryPresentationCommitQuietWaiters();
-    };
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isScrollIntentKey(event) || isEditableElement(event.target)) {
-        return;
-      }
-
-      notifyUserScrollIntent();
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.handleKeyDown',
-          message: 'Keyboard scroll intent observed',
-          data: () => ({ key: event.key, scrollTop: scrollerElement.scrollTop }),
-        });
-      }
-      clearTurnPinRequest();
-      cancelLatestEndAnchorStabilization();
-
-      if (!isUpwardScrollIntentKey(event)) {
-        requestHistoryWindowBoundaryForUserIntent('after', `keyboard-${event.key}`);
-        return;
-      }
-
-      userInitiatedUpwardScrollUntilMsRef.current =
-        performance.now() + USER_UPWARD_SCROLL_INTENT_WINDOW_MS;
-      schedulePreviousHistoryWindowForUserIntent('keyboard-scroll-up', { force: event.key === 'Home' });
-      requestHistoryWindowBoundaryForUserIntent('before', `keyboard-${event.key}`, {
-        force: event.key === 'Home',
-      });
-      followOutputControllerRef.current.handleUserScrollIntent();
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.pointerType === 'touch' || event.button !== 0) {
-        return;
-      }
-
-      if (!isPointerOnScrollbarGutter(scrollerElement, event.clientX, event.clientY)) {
-        return;
-      }
-
-      scrollbarPointerInteractionActiveRef.current = true;
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.handlePointerDown',
-          message: 'Scrollbar pointer interaction started',
-          data: () => ({ scrollTop: scrollerElement.scrollTop }),
-        });
-      }
-      notifyUserScrollIntent();
-      clearTurnPinRequest();
-      cancelLatestEndAnchorStabilization();
-      userInitiatedUpwardScrollUntilMsRef.current =
-        performance.now() + USER_UPWARD_SCROLL_INTENT_WINDOW_MS;
-      schedulePreviousHistoryWindowForUserIntent('scrollbar-pointer-down');
-      requestHistoryWindowBoundaryForUserIntent('before', 'scrollbar-pointer-down');
-      requestHistoryWindowBoundaryForUserIntent('after', 'scrollbar-pointer-down');
-      followOutputControllerRef.current.handleUserScrollIntent();
-    };
-
-    const handlePointerMove = (event: PointerEvent) => {
-      if (!scrollbarPointerInteractionActiveRef.current || event.pointerType === 'touch') {
-        return;
-      }
-
-      if ((event.buttons & 1) !== 1) {
-        scrollbarPointerInteractionActiveRef.current = false;
-        return;
-      }
-
-      clearBottomReservationsForUserBrowsing();
-      clearTurnPinRequest();
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.handlePointerMove',
-          message: 'Scrollbar pointer interaction moved',
-          data: () => ({ scrollTop: scrollerElement.scrollTop }),
-        });
-      }
-      notifyUserScrollIntent();
-      cancelLatestEndAnchorStabilization();
-      userInitiatedUpwardScrollUntilMsRef.current =
-        performance.now() + USER_UPWARD_SCROLL_INTENT_WINDOW_MS;
-      schedulePreviousHistoryWindowForUserIntent('scrollbar-pointer-move');
-      requestHistoryWindowBoundaryForUserIntent('before', 'scrollbar-pointer-move');
-      requestHistoryWindowBoundaryForUserIntent('after', 'scrollbar-pointer-move');
-      followOutputControllerRef.current.handleUserScrollIntent();
-    };
-
-    const endScrollbarPointerInteraction = () => {
-      scrollbarPointerInteractionActiveRef.current = false;
-      restartHistoryPresentationCommitQuietWaiters();
-    };
-
-    scrollerElement.addEventListener('wheel', handleWheel, { passive: true });
-    scrollerElement.addEventListener('touchstart', handleTouchStart, { passive: true });
-    scrollerElement.addEventListener('touchmove', handleTouchMove, { passive: true });
-    scrollerElement.addEventListener('touchend', resetTouchScrollIntent, { passive: true });
-    scrollerElement.addEventListener('touchcancel', resetTouchScrollIntent, { passive: true });
-    scrollerElement.addEventListener('keydown', handleKeyDown, true);
-    scrollerElement.addEventListener('pointerdown', handlePointerDown, true);
-    window.addEventListener('pointermove', handlePointerMove, true);
-    window.addEventListener('pointerup', endScrollbarPointerInteraction, true);
-    window.addEventListener('pointercancel', endScrollbarPointerInteraction, true);
-
-    const handleToolCardToggle = () => {
-      scheduleHeightMeasure(2);
-      scheduleVisibleTurnMeasure(2);
-      schedulePinReservationReconcile(2);
-      scheduleHistoryProjectionHandoffRelease(1);
-    };
-
-    const handleToolCardCollapseIntent = (event: Event) => {
-      if (!canProcessViewportGeometry(scrollerElement)) {
-        return;
-      }
-      const detail = (event as CustomEvent<{
-        toolId?: string | null;
-        toolName?: string | null;
-        cardHeight?: number | null;
-        anchorElement?: HTMLElement | null;
-        filePath?: string | null;
-        reason?: string | null;
-      }>).detail;
-      acquireCollapseReservationOwner('tool-collapse');
-      const previousIntent = pendingCollapseIntentRef.current;
-      clearRetainedCollapseSettlement();
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'E',
-          location: 'VirtualMessageList.handleToolCardCollapseIntent',
-          message: 'Tool card collapse intent received',
-          data: () => ({
-            reason: detail?.reason ?? null,
-            toolName: detail?.toolName ?? null,
-            cardHeight: detail?.cardHeight ?? null,
-            hasAnchorElement: Boolean(detail?.anchorElement),
-            anchorElementConnected: detail?.anchorElement?.isConnected ?? null,
-            previousIntent,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-            reservation: bottomReservationStateRef.current,
-            scrollTop: scrollerElement.scrollTop,
-            scrollHeight: scrollerElement.scrollHeight,
-            clientHeight: scrollerElement.clientHeight,
-            isFollowingOutput: isFollowingOutputRef.current,
-            isStreamingOutput: isStreamingOutputRef.current,
-          }),
-        });
-      }
-      // Coalesce overlapping collapses instead of finalizing the previous
-      // intent. Finalizing mid-animation can briefly drop footer protection and
-      // flash the pane when several cards compact in the same stream burst.
-      if (detail?.anchorElement) {
-        viewportCoordinatorRef.current.preserveElement(detail.anchorElement);
-      } else if (!previousIntent.active) {
-        viewportCoordinatorRef.current.preserveElement(null);
-      }
-
-      const baseTotalCompensationPx = previousIntent.active
-        ? previousIntent.baseTotalCompensationPx
-        : getTotalBottomCompensationPx();
-      const currentScrollTop = scrollerElement.scrollTop;
-      const previousStableScrollTop = previousScrollTopRef.current;
-      const anchorScrollTop = previousIntent.active
-        ? previousIntent.anchorScrollTop
-        : resolveAutoCollapseAnchorScrollTop({
-          currentScrollTop,
-          previousStableScrollTop,
-          reason: detail?.reason,
-          isFollowingOutput: isFollowingOutputRef.current,
-          isStreamingOutput: isStreamingOutputRef.current,
-        });
-      const distanceFromBottom = Math.max(
-        0,
-        scrollerElement.scrollHeight - scrollerElement.clientHeight - currentScrollTop
-      );
-      const currentTotalCompensationPx = getTotalBottomCompensationPx();
-      const effectiveDistanceFromBottom = previousIntent.active
-        ? previousIntent.distanceFromBottomBeforeCollapse
-        : Math.max(0, distanceFromBottom - currentTotalCompensationPx);
-      const estimatedShrink = Math.max(0, detail?.cardHeight ?? 0);
-      const cumulativeShrinkPx = previousIntent.active
-        ? previousIntent.cumulativeShrinkPx
-        : 0;
-      const provisionalTotalCompensationPx = Math.max(
-        currentTotalCompensationPx,
-        baseTotalCompensationPx + Math.max(
-          0,
-          cumulativeShrinkPx + estimatedShrink - effectiveDistanceFromBottom,
-        ),
-      );
-      const nextIntent: PendingCollapseIntentState = {
-        active: true,
-        anchorScrollTop,
-        toolId: detail?.toolId ?? previousIntent.toolId ?? null,
-        toolName: detail?.toolName ?? previousIntent.toolName ?? null,
-        expiresAtMs: performance.now() + COLLAPSE_INTENT_TTL_MS,
-        distanceFromBottomBeforeCollapse: effectiveDistanceFromBottom,
-        baseTotalCompensationPx,
-        cumulativeShrinkPx,
-      };
-      pendingCollapseIntentRef.current = nextIntent;
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'E',
-          location: 'VirtualMessageList.handleToolCardCollapseIntent',
-          message: 'Tool card collapse reservation calculated',
-          data: () => ({
-            nextIntent,
-            baseTotalCompensationPx,
-            currentTotalCompensationPx,
-            provisionalTotalCompensationPx,
-            effectiveDistanceFromBottom,
-            estimatedShrink,
-            currentScrollTop,
-            previousStableScrollTop,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          }),
-        });
-      }
-      if (provisionalTotalCompensationPx - baseTotalCompensationPx > COMPENSATION_EPSILON_PX) {
-        const nextReservationState: BottomReservationState = {
-          ...bottomReservationStateRef.current,
-          collapse: {
-            ...bottomReservationStateRef.current.collapse,
-            px: Math.max(0, provisionalTotalCompensationPx - getReservationTotalPx(bottomReservationStateRef.current.pin)),
-          },
-        };
-        updateBottomReservationState(nextReservationState);
-        applyFooterCompensationNow(nextReservationState);
-      }
-
-      if (anchorScrollTop - currentScrollTop > COMPENSATION_EPSILON_PX) {
-        let maxScrollTop = Math.max(
-          0,
-          scrollerElement.scrollHeight - scrollerElement.clientHeight,
-        );
-        let rangeExtensionPx = 0;
-        if (anchorScrollTop - maxScrollTop > COMPENSATION_EPSILON_PX) {
-          rangeExtensionPx = anchorScrollTop - maxScrollTop + 1;
-          const currentState = bottomReservationStateRef.current;
-          const extendedState: BottomReservationState = {
-            ...currentState,
-            collapse: {
-              ...currentState.collapse,
-              px: currentState.collapse.px + rangeExtensionPx,
-            },
-          };
-          updateBottomReservationState(extendedState);
-          applyFooterCompensationNow(extendedState);
-          maxScrollTop = Math.max(
-            0,
-            scrollerElement.scrollHeight - scrollerElement.clientHeight,
-          );
-        }
-        scrollerElement.scrollTop = Math.min(anchorScrollTop, maxScrollTop);
-        previousScrollTopRef.current = scrollerElement.scrollTop;
-        recordScrollerGeometry(scrollerElement);
-      }
-
-      scheduleCollapseIntentFinalization(nextIntent, detail?.reason);
-
-      scheduleVisibleTurnMeasure(2);
-      schedulePinReservationReconcile(2);
-    };
-
-    window.addEventListener('tool-card-toggle', handleToolCardToggle);
-    window.addEventListener('flowchat:tool-card-collapse-intent', handleToolCardCollapseIntent as EventListener);
-    scheduleVisibleTurnMeasure(2);
-
-    return () => {
-      scrollerElement.removeEventListener('scroll', handleScroll);
-      scrollerElement.removeEventListener('wheel', handleWheel);
-      scrollerElement.removeEventListener('touchstart', handleTouchStart);
-      scrollerElement.removeEventListener('touchmove', handleTouchMove);
-      scrollerElement.removeEventListener('touchend', resetTouchScrollIntent);
-      scrollerElement.removeEventListener('touchcancel', resetTouchScrollIntent);
-      scrollerElement.removeEventListener('keydown', handleKeyDown, true);
-      scrollerElement.removeEventListener('pointerdown', handlePointerDown, true);
-      window.removeEventListener('pointermove', handlePointerMove, true);
-      window.removeEventListener('pointerup', endScrollbarPointerInteraction, true);
-      window.removeEventListener('pointercancel', endScrollbarPointerInteraction, true);
-      window.removeEventListener('tool-card-toggle', handleToolCardToggle);
-      window.removeEventListener('flowchat:tool-card-collapse-intent', handleToolCardCollapseIntent as EventListener);
-      window.removeEventListener('resize', handleWindowResize);
-      window.visualViewport?.removeEventListener('resize', handleWindowResize);
-      resizeObserverRef.current?.disconnect();
-      resizeObserverRef.current = null;
-      mutationObserverRef.current?.disconnect();
-      mutationObserverRef.current = null;
-      touchScrollIntentStartYRef.current = null;
-      scrollbarPointerInteractionActiveRef.current = false;
-
-      if (measureFrameRef.current !== null) {
-        cancelAnimationFrame(measureFrameRef.current);
-        measureFrameRef.current = null;
-      }
-
-      if (visibleTurnMeasureFrameRef.current !== null) {
-        cancelAnimationFrame(visibleTurnMeasureFrameRef.current);
-        visibleTurnMeasureFrameRef.current = null;
-      }
-
-      if (pinReservationReconcileFrameRef.current !== null) {
-        cancelAnimationFrame(pinReservationReconcileFrameRef.current);
-        pinReservationReconcileFrameRef.current = null;
-      }
-
-      if (turnPinStabilizationFrameRef.current !== null) {
-        cancelAnimationFrame(turnPinStabilizationFrameRef.current);
-        turnPinStabilizationFrameRef.current = null;
-      }
-
-      if (fullHistoryProjectionIntentFrameRef.current !== null) {
-        cancelAnimationFrame(fullHistoryProjectionIntentFrameRef.current);
-        fullHistoryProjectionIntentFrameRef.current = null;
-      }
-      pendingFullHistoryProjectionReasonRef.current = null;
-    };
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    canProcessViewportGeometry,
-    cancelLatestEndAnchorStabilization,
-    clearBottomReservationsForUserBrowsing,
-    consumeBottomCompensation,
-    clearRetainedCollapseSettlement,
-    clearTurnPinRequest,
-    finalizeCollapseIntent,
-    getRenderedUserMessageElement,
-    getTotalBottomCompensationPx,
-    latestTurnId,
-    notifyUserScrollIntent,
-    pendingTurnPin?.pinMode,
-    pendingTurnPin?.turnId,
-    preserveCollapseAnchorScrollTop,
-    recordScrollerGeometry,
-    recordScrollerGeometryIfLayoutStable,
-    scheduleHeightMeasure,
-    scheduleFollowToLatestWithViewportState,
-    schedulePreviousHistoryWindowForUserIntent,
-    scheduleHistoryProjectionHandoffRelease,
-    schedulePinReservationReconcile,
-    requestHistoryWindowBoundaryForUserIntent,
-    restartHistoryPresentationCommitQuietWaiters,
-    scheduleRetainedCollapseSettlement,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    scrollerElement,
-    scheduleCollapseIntentFinalization,
-    snapshotMeasuredContentHeight,
-    syncPhysicalBottomAfterViewportResize,
-    isProcessing,
-    updateBottomReservationState,
-  ]);
-
-  const resolveLatestEndAnchorStabilization = useCallback((reason: LatestEndAnchorResolveReason) => {
-    const request = latestEndAnchorRequestRef.current;
-    if (!request) {
-      return false;
-    }
-    if (!canProcessViewportGeometry(scrollerElementRef.current)) {
-      return false;
-    }
-
-    const scheduleNextResolve = () => {
-      if (latestEndAnchorStabilizationFrameRef.current === null) {
-        latestEndAnchorStabilizationFrameRef.current = requestAnimationFrame(() => {
-          latestEndAnchorStabilizationFrameRef.current = null;
-          resolveLatestEndAnchorStabilization('raf');
-        });
-      }
-    };
-
-    const scroller = scrollerElementRef.current;
-    const virtuoso = virtuosoRef.current;
-    if (!scroller) {
-      request.attempts += 1;
-      if (request.attempts >= LATEST_END_ANCHOR_STABILIZATION_MAX_ATTEMPTS) {
-        cancelLatestEndAnchorStabilization();
-        startupTrace.markPhase('flowchat_latest_end_anchor_unresolved', {
-          attempts: request.attempts,
-          reason,
-          targetIndex: request.targetIndex,
-          turnId: request.turnId,
-          cause: 'missing_scroller',
-        });
-        return false;
-      }
-
-      scheduleNextResolve();
-      return false;
-    }
-
-    let targetIndex = request.targetIndex;
-    if (targetIndex < 0 || virtualItems[targetIndex]?.turnId !== request.turnId) {
-      targetIndex = -1;
-      for (let index = virtualItems.length - 1; index >= 0; index -= 1) {
-        if (virtualItems[index]?.turnId === request.turnId) {
-          targetIndex = index;
-          break;
-        }
-      }
-      request.targetIndex = targetIndex;
-    }
-
-    if (targetIndex < 0) {
-      cancelLatestEndAnchorStabilization();
-      return false;
-    }
-
-    request.attempts += 1;
-    const shouldSnapTargetToPhysicalBottom =
-      targetIndex >= virtualItems.length - 1 ||
-      request.turnId === latestTurnId;
-    const targetElement = getRenderedVirtualItemElement(targetIndex);
-    const scrollerRect = scroller.getBoundingClientRect();
-    const inputOverlayInsetPx = Math.max(
-      0,
-      inputStackFooterPxRef.current - FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX,
-    );
-    const visibleTop = scrollerRect.top + LATEST_END_ANCHOR_VISIBILITY_MARGIN_PX;
-    const visibleBottom = Math.max(
-      visibleTop + 1,
-      scrollerRect.bottom - inputOverlayInsetPx - LATEST_END_ANCHOR_VISIBILITY_MARGIN_PX,
-    );
-
-    const readTargetEndState = (currentTargetElement: HTMLElement | null) => {
-      if (!currentTargetElement) {
-        return null;
-      }
-      const rect = currentTargetElement.getBoundingClientRect();
-      const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      const endDeltaPx = rect.bottom - visibleBottom;
-      const physicalBottomAnchored =
-        Math.abs(maxScrollTop - scroller.scrollTop) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX;
-      const endAnchored = shouldSnapTargetToPhysicalBottom
-        ? physicalBottomAnchored
-        : (
-          Math.abs(endDeltaPx) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX ||
-          (endDeltaPx > 0 && physicalBottomAnchored) ||
-          (endDeltaPx < 0 && scroller.scrollTop <= LATEST_END_ANCHOR_STABLE_EPSILON_PX)
-        );
-      return {
-        endAnchored,
-        endDeltaPx,
-        maxScrollTop,
-        rect,
-        visible: rect.bottom > visibleTop && rect.top < visibleBottom,
-      };
-    };
-
-    const settleIfStableEndAnchored = () => {
-      const currentTargetElement = getRenderedVirtualItemElement(targetIndex);
-      const state = readTargetEndState(currentTargetElement);
-      if (!state?.visible || !state.endAnchored) {
-        request.visibleFrames = 0;
-        request.stableVisibleFrames = 0;
-        return false;
-      }
-
-      const scrollHeight = scroller.scrollHeight;
-      const scrollTop = scroller.scrollTop;
-      const geometryStable = (
-        request.lastScrollHeight !== null &&
-        request.lastScrollTop !== null &&
-        request.lastTargetTop !== null &&
-        request.lastTargetBottom !== null &&
-        Math.abs(scrollHeight - request.lastScrollHeight) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX &&
-        Math.abs(scrollTop - request.lastScrollTop) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX &&
-        Math.abs(state.rect.top - request.lastTargetTop) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX &&
-        Math.abs(state.rect.bottom - request.lastTargetBottom) <= LATEST_END_ANCHOR_STABLE_EPSILON_PX
-      );
-
-      request.lastScrollHeight = scrollHeight;
-      request.lastScrollTop = scrollTop;
-      request.lastTargetTop = state.rect.top;
-      request.lastTargetBottom = state.rect.bottom;
-      request.visibleFrames += 1;
-      request.stableVisibleFrames = geometryStable ? request.stableVisibleFrames + 1 : 1;
-
-      if (
-        request.attempts < LATEST_END_ANCHOR_STABILIZATION_MIN_ATTEMPTS ||
-        request.stableVisibleFrames < LATEST_END_ANCHOR_STABLE_VISIBLE_FRAMES
-      ) {
-        scheduleNextResolve();
-        return true;
-      }
-
-      startupTrace.markPhase('flowchat_latest_end_anchor_settled', {
-        attempts: request.attempts,
-        reason,
-        stableVisibleFrames: request.stableVisibleFrames,
-        targetIndex,
-        turnId: request.turnId,
-      });
-      cancelLatestEndAnchorStabilization();
-      scheduleVisibleTurnMeasure(1);
-      return true;
-    };
-
-    if (settleIfStableEndAnchored()) {
-      return true;
-    }
-
-    request.visibleFrames = 0;
-    request.stableVisibleFrames = 0;
-    request.lastScrollHeight = null;
-    request.lastScrollTop = null;
-    request.lastTargetTop = null;
-    request.lastTargetBottom = null;
-
-    if (targetElement) {
-      const state = readTargetEndState(targetElement);
-      let nextScrollTop = scroller.scrollTop;
-      if (state) {
-        nextScrollTop = shouldSnapTargetToPhysicalBottom
-          ? state.maxScrollTop
-          : Math.max(
-            0,
-            Math.min(state.maxScrollTop, scroller.scrollTop + state.endDeltaPx),
-          );
-      }
-
-      if (Math.abs(nextScrollTop - scroller.scrollTop) > COMPENSATION_EPSILON_PX) {
-        scroller.scrollTop = nextScrollTop;
-        previousScrollTopRef.current = nextScrollTop;
-        previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-        recordScrollerGeometry(scroller);
-      }
-    } else if (virtuoso) {
-      request.visibleFrames = 0;
-      virtuoso.scrollToIndex({
-        index: targetIndex,
-        align: 'end',
-        behavior: 'auto',
-      });
-      const shouldUseTailFallback =
-        targetIndex >= virtualItems.length - 1 ||
-        request.turnId === latestTurnId;
-      if (shouldUseTailFallback) {
-        const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        if (Math.abs(maxScrollTop - scroller.scrollTop) > COMPENSATION_EPSILON_PX) {
-          scroller.scrollTop = maxScrollTop;
-          previousScrollTopRef.current = maxScrollTop;
-          previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-          recordScrollerGeometry(scroller);
-        }
-      }
-    } else {
-      request.visibleFrames = 0;
-      const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      if (Math.abs(maxScrollTop - scroller.scrollTop) > COMPENSATION_EPSILON_PX) {
-        scroller.scrollTop = maxScrollTop;
-        previousScrollTopRef.current = maxScrollTop;
-        previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-        recordScrollerGeometry(scroller);
-      }
-    }
-
-    if (settleIfStableEndAnchored()) {
-      return true;
-    }
-
-    if (request.attempts >= LATEST_END_ANCHOR_STABILIZATION_MAX_ATTEMPTS) {
-      cancelLatestEndAnchorStabilization();
-      scheduleVisibleTurnMeasure(1);
-      startupTrace.markPhase('flowchat_latest_end_anchor_unresolved', {
-        attempts: request.attempts,
-        reason,
-        targetIndex,
-        turnId: request.turnId,
-      });
-      return false;
-    }
-
-    scheduleNextResolve();
-
-    return false;
-  }, [
-    cancelLatestEndAnchorStabilization,
-    canProcessViewportGeometry,
-    getRenderedVirtualItemElement,
-    latestTurnId,
-    recordScrollerGeometry,
-    scheduleVisibleTurnMeasure,
-    snapshotMeasuredContentHeight,
-    virtualItems,
-  ]);
-  resolveLatestEndAnchorStabilizationRef.current = resolveLatestEndAnchorStabilization;
-
-  const resolvePendingTurnPinFromRangeChange = useCallback(() => {
-    if (
-      !pendingTurnPin ||
-      !isTurnPinRequestCurrent(pendingTurnPin) ||
-      performance.now() > pendingTurnPin.expiresAtMs
-    ) {
-      return;
-    }
-
-    const nextRequest: PendingTurnPinState = {
-      ...pendingTurnPin,
-      attempts: pendingTurnPin.attempts + 1,
-      behavior: 'auto',
-    };
-    const resolution = tryResolvePendingTurnPin(nextRequest);
-    if (resolution.kind === 'pending') {
-      setPendingTurnPin(current => (
-        current?.generation === nextRequest.generation ? nextRequest : current
-      ));
-      return;
-    }
-
-    if (resolution.kind === 'best-effort' && settleBestEffortTurnPin(nextRequest)) {
-      scheduleVisibleTurnMeasure(2);
-      return;
-    }
-
-    if (nextRequest.pinMode === 'transient') {
-      activateTransientTurnPinStabilization(nextRequest);
-      scheduleTransientTurnPinStabilization(2);
-      setPendingTurnPin(current => (
-        current?.generation === nextRequest.generation ? nextRequest : current
-      ));
-    } else {
-      clearTurnPinRequest();
-    }
-    scheduleVisibleTurnMeasure(2);
-  }, [
-    activateTransientTurnPinStabilization,
-    clearTurnPinRequest,
-    isTurnPinRequestCurrent,
-    pendingTurnPin,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    settleBestEffortTurnPin,
-    tryResolvePendingTurnPin,
-  ]);
-
-  // `rangeChanged` is affected by overscan/increaseViewportBy, so treat it as a
-  // "rendered DOM changed" signal and derive the pinned turn from real DOM visibility.
-  const handleRangeChanged = useCallback(() => {
-    if (!canProcessViewportGeometry(scrollerElementRef.current)) {
-      return;
-    }
-    resolvePendingTurnPinFromRangeChange();
-    resolveLatestEndAnchorStabilization('range-changed');
-    scheduleVisibleTurnMeasure(2);
-    schedulePinReservationReconcile(2);
-    scheduleTransientTurnPinStabilization(2);
-    scheduleFollowToLatestWithViewportState('range-changed');
-    // Reset the handoff release timer rather than accelerating it.
-    // A session-open projection handoff needs the Virtuoso measurement
-    // to settle before releasing; calling with 3 resets the countdown
-    // so the handoff stays until 3 frames of stability pass.
-    scheduleHistoryProjectionHandoffRelease(3);
-  }, [
-    resolvePendingTurnPinFromRangeChange,
-    canProcessViewportGeometry,
-    resolveLatestEndAnchorStabilization,
-    scheduleFollowToLatestWithViewportState,
-    scheduleHistoryProjectionHandoffRelease,
-    schedulePinReservationReconcile,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-  ]);
-
-  useEffect(() => {
-    if (userMessageItems.length === 0) {
-      const setVisibleTurnInfo = useModernFlowChatStore.getState().setVisibleTurnInfo;
-      setVisibleTurnInfo(null);
-      return;
-    }
-
-    scheduleVisibleTurnMeasure(2);
-    schedulePinReservationReconcile(2);
-    scheduleTransientTurnPinStabilization(2);
-  }, [
-    activeSession?.sessionId,
-    schedulePinReservationReconcile,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    scrollerElement,
-    userMessageItems,
-    virtualItems.length,
-  ]);
-
-  useEffect(() => {
-    if (!pendingTurnPin) return;
-    if (!isViewportActive || viewportGeometrySuspendedRef.current) {
-      return;
-    }
-
-    if (!isTurnPinRequestCurrent(pendingTurnPin)) {
-      pendingTurnPinGenerationRef.current = null;
-      setPendingTurnPin(prev => (
-        prev?.generation === pendingTurnPin.generation ? null : prev
-      ));
-      return;
-    }
-
-    if (performance.now() > pendingTurnPin.expiresAtMs) {
-      if (clearExpiredProvisionalStickyPin(pendingTurnPin)) {
-        clearTurnPinRequest();
-        followOutputControllerRef.current.scheduleFollowToLatest(
-          'unresolved-turn-pin-expired',
-        );
-      } else {
-        cancelUnresolvedTurnPinRef.current();
-      }
-      return;
-    }
-
-    const frameId = requestAnimationFrame(() => {
-      if (pendingTurnPinGenerationRef.current !== pendingTurnPin.generation) {
-        return;
-      }
-      const resolved = tryResolvePendingTurnPin(pendingTurnPin);
-      if (resolved.kind !== 'pending') {
-        if (resolved.kind === 'best-effort' && settleBestEffortTurnPin(pendingTurnPin)) {
-          scheduleVisibleTurnMeasure(2);
-          return;
-        }
-        if (
-          pendingTurnPin.pinMode === 'transient' &&
-          performance.now() <= pendingTurnPin.expiresAtMs
-        ) {
-          activateTransientTurnPinStabilization(pendingTurnPin);
-          scheduleTransientTurnPinStabilization(2);
-          scheduleVisibleTurnMeasure(2);
-          return;
-        }
-
-        clearTurnPinRequest();
-        scheduleVisibleTurnMeasure(2);
-        return;
-      }
-
-      setPendingTurnPin(prev => {
-        if (
-          !prev ||
-          prev.generation !== pendingTurnPin.generation ||
-          !isTurnPinRequestCurrent(pendingTurnPin)
-        ) {
-          return prev;
-        }
-
-        return {
-          ...prev,
-          attempts: prev.attempts + 1,
-          behavior: 'auto',
-        };
-      });
-    });
-
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }, [
-    activateTransientTurnPinStabilization,
-    clearExpiredProvisionalStickyPin,
-    clearTurnPinRequest,
-    isTurnPinRequestCurrent,
-    pendingTurnPin,
-    isViewportActive,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    settleBestEffortTurnPin,
-    tryResolvePendingTurnPin,
-  ]);
-
-  // ── Navigation helpers ────────────────────────────────────────────────
-  const clearAllBottomReservationsForUserNavigation = useCallback(() => {
-    const currentState = bottomReservationStateRef.current;
-    const scroller = scrollerElementRef.current;
-    const nextReservationState = createInitialBottomReservationState();
-    const hasActiveReservation = !areBottomReservationStatesEqual(currentState, nextReservationState);
-
-    viewportCoordinatorRef.current.release('clear-all-reservations');
-    clearTurnPinRequest();
-    clearCollapseIntentScheduling();
-    clearPendingStickyPinGrowth('clear-all-reservations');
-    pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-    retainedCollapseAnchorRef.current = null;
-    clearCollapseReservationOwner();
-
-    if (!hasActiveReservation) {
-      return;
-    }
-
-    bottomReservationStateRef.current = nextReservationState;
-    updateBottomReservationState(nextReservationState);
-    applyFooterCompensationNow(nextReservationState);
-
-    if (scroller) {
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextReservationState);
-      recordScrollerGeometry(scroller);
-    }
-  }, [
-    applyFooterCompensationNow,
-    clearTurnPinRequest,
-    clearCollapseIntentScheduling,
-    clearCollapseReservationOwner,
-    clearPendingStickyPinGrowth,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-
-  const clearPinReservationForUserNavigation = useCallback((
-    reason = 'user-navigation',
-    options?: { preserveCurrentRange?: boolean },
-  ) => {
-    const currentState = bottomReservationStateRef.current;
-    const scroller = scrollerElementRef.current;
-    const hasActivePin = (
-      currentState.pin.px > COMPENSATION_EPSILON_PX ||
-      currentState.pin.floorPx > COMPENSATION_EPSILON_PX ||
-      currentState.pin.targetTurnId !== null ||
-      currentState.pin.mode !== 'transient'
-    );
-
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.clearPinReservationForUserNavigation',
-        message: 'User navigation began pin reservation release',
-        data: () => ({
-          reason,
-          preserveCurrentRange: options?.preserveCurrentRange === true,
-          hasActivePin,
-          reservationBefore: currentState,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          scrollTop: scroller?.scrollTop ?? null,
-          scrollHeight: scroller?.scrollHeight ?? null,
-          clientHeight: scroller?.clientHeight ?? null,
-        }),
-      });
-    }
-
-    clearTurnPinRequest();
-    clearPendingStickyPinGrowth(reason);
-
-    if (!hasActivePin) {
-      return;
-    }
-
-    const nextReservationState = releasePinReservationForUserNavigation(currentState, {
-      preserveCurrentRange: options?.preserveCurrentRange === true,
-      ownsElementAnchor: viewportCoordinatorRef.current.ownsElementAnchor(),
-    });
-    if (
-      nextReservationState.collapse.px > COMPENSATION_EPSILON_PX &&
-      collapseReservationOwnerRef.current === null
-    ) {
-      acquireCollapseReservationOwner('protected-range');
-    }
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.clearPinReservationForUserNavigation',
-        message: 'Pin reservation released for user navigation',
-        data: () => ({
-          reason,
-          preserveCurrentRange: options?.preserveCurrentRange === true,
-          reservationBefore: currentState,
-          reservationAfter: nextReservationState,
-        }),
-      });
-    }
-    updateBottomReservationState(nextReservationState);
-    applyFooterCompensationNow(nextReservationState);
-
-    if (scroller) {
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller, nextReservationState);
-      recordScrollerGeometry(scroller);
-    }
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    clearPendingStickyPinGrowth,
-    clearTurnPinRequest,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-  ]);
-
-  cancelUnresolvedTurnPinRef.current = () => {
-    clearPinReservationForUserNavigation('unresolved-turn-pin-expired', {
-      preserveCurrentRange: true,
-    });
-    viewportCoordinatorRef.current.release('unresolved-turn-pin-expired');
-  };
-
-  exitPinnedViewportForUserIntentRef.current = reason => {
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'A',
-        location: 'VirtualMessageList.exitPinnedViewportForUserIntent',
-        message: 'User intent exited the pinned viewport',
-        data: () => ({
-          reason,
-          coordinatorModeBefore: viewportCoordinatorRef.current.getMode(),
-          reservationBefore: bottomReservationStateRef.current,
-        }),
-      });
-    }
-    viewportCoordinatorRef.current.release(reason);
-    clearPinReservationForUserNavigation(reason, { preserveCurrentRange: true });
-  };
-
-  const isStreamingOutput = React.useMemo(() => {
-    if (viewportMode === 'history-reading') {
-      return false;
-    }
-    if (isProcessing) {
-      return true;
-    }
-
-    const dialogTurns = activeSession?.dialogTurns;
-    const lastDialogTurn = dialogTurns && dialogTurns.length > 0
-      ? dialogTurns[dialogTurns.length - 1]
-      : undefined;
-
-    if (!lastDialogTurn) {
-      return false;
-    }
-
-    if (
-      lastDialogTurn.status === 'processing' ||
-      lastDialogTurn.status === 'finishing' ||
-      lastDialogTurn.status === 'image_analyzing'
-    ) {
-      return true;
-    }
-
-    return lastDialogTurn.modelRounds.some(round => round.isStreaming);
-  }, [activeSession, isProcessing, viewportMode]);
-  if (virtuosoMountStateRef.current.sessionId !== activeSessionId) {
-    virtuosoMountStateRef.current = {
-      sessionId: activeSessionId,
-      mounted: false,
-    };
-  }
-  if (virtualItems.length === 0) {
-    virtuosoMountStateRef.current.mounted = false;
-  }
-  const initialTopMostItemIndexCandidate = React.useMemo<InitialTopMostItemIndex>(() => {
-    const preparedTurnId = preparedHistoryTurnPinRef.current?.turnId;
-    if (preparedTurnId) {
-      const preparedTargetIndex = virtualItems.findIndex(item => (
-        item.turnId === preparedTurnId && item.type === 'user-message'
-      ));
-      if (preparedTargetIndex >= 0) {
-        return {
-          index: preparedTargetIndex,
-          align: 'start',
-        };
-      }
-    }
-
-    if (historyPagingActive && historyPagingAnchorTurnId) {
-      const anchorIndex = virtualItems.findIndex(item => (
-        item.turnId === historyPagingAnchorTurnId && item.type === 'user-message'
-      ));
-      if (anchorIndex >= 0) {
-        return {
-          index: anchorIndex,
-          align: 'start',
-        };
-      }
-    }
-
-    if (isStreamingOutput) {
-      return latestUserMessageIndex;
-    }
-
-    return {
-      index: Math.max(0, virtualItems.length - 1),
-      align: 'end',
-    };
-  }, [
-    historyPagingActive,
-    historyPagingAnchorTurnId,
-    isStreamingOutput,
-    latestUserMessageIndex,
-    virtualItems,
-  ]);
-  const initialTopMostItemIndex = virtuosoMountStateRef.current.mounted
-    ? undefined
-    : initialTopMostItemIndexCandidate;
-  const virtuosoViewportIncrease = React.useMemo(() => {
-    if (!pendingTurnPin) {
-      return FLOW_CHAT_VIRTUOSO_VIEWPORT_INCREASE;
-    }
-    const navigationRangePx = Math.max(
-      FLOW_CHAT_VIRTUOSO_VIEWPORT_INCREASE.top,
-      (scrollerElement?.clientHeight ?? 0) * TRANSIENT_TURN_PIN_VIEWPORT_MULTIPLIER,
-    );
-    return {
-      top: navigationRangePx,
-      bottom: navigationRangePx,
-    };
-  }, [pendingTurnPin, scrollerElement]);
-
-  useLayoutEffect(() => {
-    if (!historyPagingActive || !historyPagingAnchorTurnId) {
-      return;
-    }
-
-    const pendingAnchor = pendingHistoryPrependAnchorRef.current;
-    if (!pendingAnchor || pendingAnchor.turnId !== historyPagingAnchorTurnId) {
-      return;
-    }
-    const isPrependCommit = virtualItems.length > pendingAnchor.beforeItemCount;
-    if (isPrependCommit ? pendingAnchor.prependRestored : pendingAnchor.handoffRestored) {
-      return;
-    }
-
-    const scroller = scrollerElementRef.current;
-    const anchorElement = getRenderedUserMessageElement(historyPagingAnchorTurnId);
-    if (!scroller || !anchorElement) {
-      return;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const actualOffset = anchorElement.getBoundingClientRect().top - scrollerRect.top;
-    const correction = actualOffset - pendingAnchor.offsetFromScrollerTop;
-    if (Math.abs(correction) > COMPENSATION_EPSILON_PX) {
-      scroller.scrollTop = Math.max(0, scroller.scrollTop + correction);
-    }
-    if (presentationMode === 'history-window') {
-      viewportCoordinatorRef.current.preserveElement(anchorElement);
-    }
-    if (isPrependCommit) {
-      pendingAnchor.prependRestored = true;
-      pendingHistoryPrependAnchorRef.current = null;
-      setHistoryPagingLoading(false);
-      setHistoryPagingAnchorTurnId(null);
-      clearPreviousHistoryBoundaryStatus();
-    } else {
-      pendingAnchor.handoffRestored = true;
-    }
-    previousScrollTopRef.current = scroller.scrollTop;
-    previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-    recordScrollerGeometry(scroller);
-  }, [
-    clearPreviousHistoryBoundaryStatus,
-    getRenderedUserMessageElement,
-    historyPagingActive,
-    historyPagingAnchorTurnId,
-    presentationMode,
-    recordScrollerGeometry,
-    scrollerElement,
-    snapshotMeasuredContentHeight,
-    virtualItems,
-  ]);
-
-  useLayoutEffect(() => {
-    if (presentationMode !== 'history-window' || presentationRevision <= 0) {
-      return;
-    }
-    const scroller = scrollerElementRef.current;
-    if (!scroller || !viewportCoordinatorRef.current.ownsElementAnchor()) {
-      return;
-    }
-
-    viewportCoordinatorRef.current.scheduleElementAnchorRestore(
-      scroller,
-      'history-window-presentation-commit',
-    );
-    let secondFrameId: number | null = null;
-    const firstFrameId = requestAnimationFrame(() => {
-      viewportCoordinatorRef.current.scheduleElementAnchorRestore(
-        scroller,
-        'history-window-presentation-measured',
-      );
-      secondFrameId = requestAnimationFrame(() => {
-        viewportCoordinatorRef.current.restoreElementAnchor(
-          scroller,
-          'history-window-presentation-settled',
-        );
-        viewportCoordinatorRef.current.settleElementPreservation(
-          'history-window-presentation-settled',
-        );
-        previousScrollTopRef.current = scroller.scrollTop;
-        previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-        recordScrollerGeometry(scroller);
-      });
-    });
-
-    return () => {
-      cancelAnimationFrame(firstFrameId);
-      if (secondFrameId !== null) {
-        cancelAnimationFrame(secondFrameId);
-      }
-    };
-  }, [
-    presentationMode,
-    presentationRevision,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-  ]);
-
-  useEffect(() => {
-    if (!isViewportActive || viewportGeometrySuspendedRef.current) {
-      return;
-    }
-    const wasStreaming = previousIsStreamingOutputRef.current;
-    previousIsStreamingOutputRef.current = isStreamingOutput;
-    if (!wasStreaming || isStreamingOutput) {
-      return;
-    }
-
-    const scroller = scrollerElementRef.current;
-
-    // Collapse compensation can be much larger than the tail space needed to
-    // keep a sticky user message pinned. Transfer it to the pin reservation in
-    // one DOM update so reducing the footer cannot temporarily remove the scroll
-    // range beneath the semantic anchor.
-    const currentReservationState = bottomReservationStateRef.current;
-    const coordinatorModeBefore = viewportCoordinatorRef.current.getMode();
-    const ownsElementAnchorBefore = viewportCoordinatorRef.current.ownsElementAnchor();
-    const collapsePx = getReservationTotalPx(currentReservationState.collapse);
-    const activeCollapseIntent = pendingCollapseIntentRef.current;
-    const retainedCollapseAnchor = retainedCollapseAnchorRef.current;
-    const collapseAnchorToRetain = activeCollapseIntent.active
-      ? activeCollapseIntent
-      : retainedCollapseAnchor;
-    const shouldRetainFollowingTailCollapse = (
-      coordinatorModeBefore === 'following-tail' &&
-      collapsePx > COMPENSATION_EPSILON_PX &&
-      collapseAnchorToRetain !== null
-    );
-    if (shouldRetainFollowingTailCollapse && collapseAnchorToRetain) {
-      retainCollapseRangeForQuietSettlement(
-        collapseAnchorToRetain,
-        'stream-end',
-      );
-    }
-    const pendingStickyPinGrowthPx = pendingStickyPinGrowthRef.current.amountPx;
-    const stickyPinTarget = (
-      currentReservationState.pin.mode === 'sticky-latest' &&
-      currentReservationState.pin.targetTurnId
-    )
-      ? currentReservationState.pin.targetTurnId
-      : null;
-    if (
-      !shouldRetainFollowingTailCollapse &&
-      (
-        collapsePx > COMPENSATION_EPSILON_PX ||
-        pendingStickyPinGrowthPx > COMPENSATION_EPSILON_PX ||
-        stickyPinTarget
-      )
-    ) {
-      const resolvedPinMetrics = scroller && stickyPinTarget
-        ? resolveTurnPinMetrics(
-          stickyPinTarget,
-          getTotalBottomCompensationPx(currentReservationState),
-        )
-        : null;
-      const requiredPinPx = resolvedPinMetrics
-        ? sanitizeReservationPx(resolvedPinMetrics.missingTailSpace)
-        : 0;
-      const nextPinReservation = stickyPinTarget && resolvedPinMetrics
-        ? {
-          ...currentReservationState.pin,
-          px: requiredPinPx,
-          floorPx: requiredPinPx,
-          mode: 'sticky-latest' as const,
-          targetTurnId: stickyPinTarget,
-        }
-        : currentReservationState.pin;
-      if (!stickyPinTarget || resolvedPinMetrics) {
-        const reconciledReservationState = transferCollapseReservationToPin(
-          currentReservationState,
-          nextPinReservation,
-        );
-        updateBottomReservationState(reconciledReservationState);
-        applyFooterCompensationNow(reconciledReservationState);
-      }
-      if (scroller && ownsElementAnchorBefore) {
-        viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'stream-end-reservation-transfer');
-      }
-    }
-
-    // Stream end is an ownership boundary. Preserve the current physical range
-    // while removing the pin reservation, then release the semantic anchor so a
-    // residual floor cannot keep the coordinator alive after cancellation.
-    const shouldReleaseStreamPin = (
-      coordinatorModeBefore === 'pinned-item' ||
-      bottomReservationStateRef.current.pin.mode === 'sticky-latest'
-    );
-    if (shouldReleaseStreamPin) {
-      const releasedReservationState = releasePinReservationForUserNavigation(
-        bottomReservationStateRef.current,
-        {
-          preserveCurrentRange: true,
-          ownsElementAnchor: true,
-        },
-      );
-      if (
-        releasedReservationState.collapse.px > COMPENSATION_EPSILON_PX &&
-        collapseReservationOwnerRef.current === null
-      ) {
-        acquireCollapseReservationOwner('protected-range');
-      }
-      updateBottomReservationState(releasedReservationState);
-      applyFooterCompensationNow(releasedReservationState);
-    }
-    if (
-      coordinatorModeBefore === 'pinned-item' ||
-      (shouldReleaseStreamPin && coordinatorModeBefore === 'idle')
-    ) {
-      viewportCoordinatorRef.current.release('stream-end-pinned-item');
-    }
-
-    // Clear timer-owned work. A following-tail collapse anchor remains retained
-    // until delayed virtualizer measurements and real range consumption settle.
-    clearTurnPinRequest();
-    clearCollapseIntentScheduling();
-    clearPendingStickyPinGrowth('stream-end-reconciled');
-    pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-    if (!shouldReleaseStreamPin) {
-      viewportCoordinatorRef.current.settleElementPreservation('stream-end-reconciled');
-      maybeHandoffPinnedTurnToTailRef.current('stream-end');
-    }
-
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'B',
-        location: 'VirtualMessageList.streamEndReconciliation',
-        message: 'Streaming viewport ownership reconciled',
-        data: () => ({
-          coordinatorModeBefore,
-          coordinatorModeAfter: viewportCoordinatorRef.current.getMode(),
-          ownsElementAnchorBefore,
-          reservationBefore: currentReservationState,
-          reservationAfter: bottomReservationStateRef.current,
-          scrollTop: scroller?.scrollTop ?? null,
-          scrollHeight: scroller?.scrollHeight ?? null,
-          clientHeight: scroller?.clientHeight ?? null,
-        }),
-      });
-    }
-
-    if (scroller) {
-      previousScrollTopRef.current = scroller.scrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(
-        scroller,
-        bottomReservationStateRef.current,
-      );
-      recordScrollerGeometry(scroller);
-    }
-
-  }, [
-    applyFooterCompensationNow,
-    acquireCollapseReservationOwner,
-    clearCollapseIntentScheduling,
-    clearPendingStickyPinGrowth,
-    clearTurnPinRequest,
-    getTotalBottomCompensationPx,
-    isViewportActive,
-    isStreamingOutput,
-    recordScrollerGeometry,
-    retainCollapseRangeForQuietSettlement,
-    resolveTurnPinMetrics,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-    viewportActivityRevision,
-  ]);
-
-  const scrollToLatestEndPositionInternal = useCallback((behavior: 'auto' | 'smooth') => {
-    const scroller = scrollerElementRef.current;
-    if (!canCoordinateViewport() || !scroller) {
-      return;
-    }
-
-    if (behavior === 'auto' && isStreamingOutputRef.current) {
-      clearPinReservationForUserNavigation();
-    }
-
-    const compensationPx = getTotalBottomCompensationPx();
-    // Auto-follow during streaming with active collapse compensation: scroll
-    // to the EFFECTIVE bottom (the top edge of the footer reservation), and
-    // preserve the reservation. Clearing it here would shrink `scrollHeight`
-    // by the full compensation amount in one frame, which clamps `scrollTop`
-    // downward and produces a visible whole-conversation "sink-down" jump.
-    // The reservation drains organically as the grow branch in
-    // `measureHeightChange` consumes it while new tokens stream in.
-    // 'smooth' is reserved for explicit user navigation ("jump to latest"),
-    // which intentionally clears reservations.
-    if (behavior === 'auto' && compensationPx > COMPENSATION_EPSILON_PX) {
-      const effectiveBottomTop = Math.max(
-        0,
-        scroller.scrollHeight - scroller.clientHeight - compensationPx,
-      );
-      // Only ever move DOWNWARD here. If `effectiveBottomTop` is above the
-      // current scrollTop (e.g. because the bottom reservation just grew to
-      // absorb an unsignaled shrink via the handleScroll auto-clamp restore),
-      // pulling scrollTop upward would itself produce a visible "sink-down"
-      // jump. Hold position; the reservation will be drained by future grow
-      // events.
-      if (effectiveBottomTop - scroller.scrollTop > COMPENSATION_EPSILON_PX) {
-        scroller.scrollTo({ top: effectiveBottomTop, behavior: 'auto' });
-      }
-      setIsAtBottom(true);
-      return;
-    }
-
-    if (behavior !== 'auto') {
-      clearAllBottomReservationsForUserNavigation();
-    }
-    scroller.scrollTo({
-      top: Math.max(0, scroller.scrollHeight - scroller.clientHeight),
-      behavior,
-    });
-    setIsAtBottom(true);
-  }, [
-    clearAllBottomReservationsForUserNavigation,
-    clearPinReservationForUserNavigation,
-    canCoordinateViewport,
-    getTotalBottomCompensationPx,
-  ]);
-
-  const requestTurnPinToTop = useCallback((turnId: string, options?: TurnPinOptions): FlowChatTurnPinRequestStatus => {
-    const requestedPinMode = options?.pinMode ?? 'transient';
-    const requestedBehavior = options?.behavior ?? 'auto';
-    const requestedAlignmentPolicy = requestedPinMode === 'sticky-latest'
-      ? 'exact'
-      : options?.alignmentPolicy ?? 'exact';
-    const targetTurn = findDialogTurn(activeSession?.dialogTurns, turnId);
-    if (requestedPinMode === 'sticky-latest' && !shouldUseStickyLatestPin(targetTurn)) {
-      return 'rejected';
-    }
-    const targetItem = userMessageItems.find(({ item }) => item.turnId === turnId);
-    if (!targetItem) {
-      return 'rejected';
-    }
-
-    // Replacing a pending navigation must invalidate its RAF/state generation,
-    // but it must not remove the footer range that keeps the current viewport
-    // physically reachable while the new target is being materialized.
-    clearTurnPinRequest();
-    retargetHistoryProjectionHandoff(turnId);
-
-    if (!canCoordinateViewport() || !virtuosoRef.current) {
-      preparedHistoryTurnPinRef.current = {
-        turnId,
-        behavior: requestedBehavior,
-        pinMode: requestedPinMode,
-        alignmentPolicy: requestedAlignmentPolicy,
-      };
-      return 'pending';
-    }
-
-    retainedCollapseAnchorRef.current = null;
-    if (requestedPinMode === 'sticky-latest' && turnId === latestTurnId) {
-      preparePinnedTurnFollowHandoffRef.current();
-    }
-    viewportCoordinatorRef.current.pinItem();
-
-    // The first turn is only deterministic after Virtuoso has materialized it.
-    // Keep it in the same materialize-then-align transaction as every other
-    // target; a loaded virtual item is not necessarily mounted in the DOM.
-
-    const requestSessionId = activeSessionIdRef.current;
-    if (!requestSessionId) {
-      return 'rejected';
-    }
-
-    const request: PendingTurnPinState = {
-      generation: turnPinRequestGenerationRef.current + 1,
-      sessionId: requestSessionId,
-      turnId,
-      behavior: requestedBehavior,
-      pinMode: requestedPinMode,
-      alignmentPolicy: requestedAlignmentPolicy,
-      expiresAtMs: performance.now() + TURN_PIN_REQUEST_TTL_MS,
-      attempts: 0,
-    };
-    turnPinRequestGenerationRef.current = request.generation;
-    activeTurnPinRequestRef.current = request;
-
-    startupTrace.markPhase('flowchat_turn_pin_request', {
-      turnId,
-      pinMode: requestedPinMode,
-      targetIndex: targetItem.index,
-      userMessageCount: userMessageItems.length,
-    });
-
-    const resolution = tryResolvePendingTurnPin(request);
-    if (resolution.kind !== 'pending') {
-      if (resolution.kind === 'best-effort' && settleBestEffortTurnPin(request)) {
-        scheduleVisibleTurnMeasure(2);
-        return 'settled';
-      }
-      if (requestedPinMode === 'transient') {
-        activateTransientTurnPinStabilization(request);
-        scheduleTransientTurnPinStabilization(2);
-      } else {
-        clearTurnPinRequest();
-      }
-      scheduleVisibleTurnMeasure(2);
-      return 'settled';
-    }
-
-    pendingTurnPinGenerationRef.current = request.generation;
-    setPendingTurnPin(request);
-    return 'pending';
-  }, [
-    activeSession?.dialogTurns,
-    activateTransientTurnPinStabilization,
-    canCoordinateViewport,
-    clearTurnPinRequest,
-    latestTurnId,
-    retargetHistoryProjectionHandoff,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    settleBestEffortTurnPin,
-    tryResolvePendingTurnPin,
-    userMessageItems,
-  ]);
-
-  useLayoutEffect(() => {
-    if (
-      !canCoordinateViewport() ||
-      !virtuosoRef.current ||
-      pendingTurnPin
-    ) {
-      return;
-    }
-
-    const preparedTurnPin = preparedHistoryTurnPinRef.current;
-    if (
-      !preparedTurnPin
-      || !userMessageItems.some(({ item }) => item.turnId === preparedTurnPin.turnId)
-    ) {
-      return;
-    }
-
-    preparedHistoryTurnPinRef.current = null;
-    requestTurnPinToTop(preparedTurnPin.turnId, {
-      behavior: preparedTurnPin.behavior,
-      pinMode: preparedTurnPin.pinMode,
-      alignmentPolicy: preparedTurnPin.alignmentPolicy,
-    });
-  }, [
-    pendingTurnPin,
-    canCoordinateViewport,
-    isViewportActive,
-    requestTurnPinToTop,
-    scrollerElement,
-    userMessageItems,
-    virtualItems.length,
-  ]);
-
-  const performAutoFollowSync = useCallback(() => {
-    if (!viewportCoordinatorRef.current.followTail()) {
-      return;
-    }
-    scrollToLatestEndPositionInternal('auto');
-  }, [scrollToLatestEndPositionInternal]);
-
-  const {
-    isFollowingOutput,
-    enterFollowOutput,
-    exitFollowOutput,
-    preparePinnedTurnFollowHandoff,
-    armFollowOutputForNewTurn,
-    resumeFollowOutputForMountedStream,
-    activateArmedFollowOutput,
-    cancelPendingAutoFollowArm,
-    scheduleFollowToLatest,
-    handleUserScrollIntent,
-    handleScroll: handleFollowOutputScroll,
-  } = useFlowChatFollowOutput({
-    activeSessionId: activeSession?.sessionId,
-    latestTurnId,
-    virtualItemCount: virtualItems.length,
-    isStreaming: isStreamingOutput,
-    scrollerRef: scrollerElementRef,
-    performUserFollowScroll: () => {
-      viewportCoordinatorRef.current.followTail({ force: true });
-      scrollToLatestEndPositionInternal('smooth');
-    },
-    performAutoFollowScroll: performAutoFollowSync,
-    performLatestTurnStickyPin: () => {
-      if (!latestTurnId) {
-        return;
-      }
-      const latestTurn = findDialogTurn(activeSession?.dialogTurns, latestTurnId);
-      if (!shouldUseStickyLatestPin(latestTurn)) {
-        return;
-      }
-      retainedCollapseAnchorRef.current = null;
-      requestTurnPinToTop(latestTurnId, {
-        behavior: 'auto',
-        pinMode: 'sticky-latest',
-      });
-    },
-    shouldSuspendAutoFollow,
-    canAnimateTailFollow: () => (
-      canProcessViewportGeometry(scrollerElementRef.current) &&
-      viewportCoordinatorRef.current.getMode() === 'following-tail' &&
-      !viewportCoordinatorRef.current.ownsElementAnchor()
-    ),
-    // Subtract the bottom-reservation footer so the follow controller treats
-    // synthetic footer space as "already at the bottom". Without this, the
-    // post-collapse footer (kept around to preserve the upper anchor) would be
-    // classified as "user fell behind the tail" and trigger
-    // `performAutoFollowScroll` -> `clearAllBottomReservationsForUserNavigation`,
-    // which snaps scrollTop down by the entire compensation amount and produces
-    // the visible "sink-down" jump the user reported. With this subtraction,
-    // the loop and the deferred-follow path stay quiet while the grow-branch in
-    // `measureHeightChange` consumes the footer organically as streaming tokens
-    // refill the bottom space.
-    getAutoFollowTargetScrollTop: (scroller) => {
-      const compensationPx = getTotalBottomCompensationPx();
-      return Math.max(
-        0,
-        scroller.scrollHeight - scroller.clientHeight - compensationPx,
-      );
-    },
-    onContinuousFollowFrame: undefined,
-  });
-  preparePinnedTurnFollowHandoffRef.current = preparePinnedTurnFollowHandoff;
-
-  useEffect(() => {
-    if (viewportMode !== 'history-reading') {
-      return;
-    }
-    cancelPendingAutoFollowArm();
-    exitFollowOutput('pin-turn-to-top');
-  }, [cancelPendingAutoFollowArm, exitFollowOutput, viewportMode]);
-
-  useEffect(() => {
-    if (hasPrimedMountedStreamingTurnFollowRef.current) {
-      return;
-    }
-
-    if (!isStreamingOutput) {
-      hasPrimedMountedStreamingTurnFollowRef.current = true;
-      return;
-    }
-    if (!latestTurnId) {
-      return;
-    }
-
-    previousLatestTurnIdForFollowRef.current = latestTurnId;
-    hasPrimedMountedStreamingTurnFollowRef.current = resumeFollowOutputForMountedStream();
-  }, [
-    activeSession?.sessionId,
-    isStreamingOutput,
-    latestTurnId,
-    resumeFollowOutputForMountedStream,
-    virtualItems.length,
-  ]);
-
-  useEffect(() => {
-    const previousSessionId = previousSessionIdForFollowRef.current;
-    if (previousSessionId !== activeSession?.sessionId) {
-      previousSessionIdForFollowRef.current = activeSession?.sessionId;
-      previousLatestTurnIdForFollowRef.current = latestTurnId;
-      const hasUnread = activeSession?.hasUnreadCompletion;
-      const isFinished = !isStreamingOutput;
-      if (hasUnread && isFinished && virtuosoRef.current && virtualItems.length > 0) {
-        // Use scrollToIndex instead of scrollTo({ top: largeNumber }) because
-        // Virtuoso's scrollHeight may not be stable immediately after a session
-        // switch; scrolling by index lets Virtuoso resolve the correct position.
-        const scrollToBottom = () => {
-          virtuosoRef.current?.scrollToIndex({
-            index: virtualItems.length - 1,
-            align: 'end',
-            behavior: 'auto',
-          });
-        };
-        // Allow two frames for virtual items to settle before scrolling.
-        requestAnimationFrame(() => {
-          requestAnimationFrame(scrollToBottom);
-        });
-      }
-
-      // When switching to a streaming session, resume tail follow so the
-      // viewport tracks new content as it arrives. Without this, the
-      // Virtuoso stays at initialTopMostItemIndex (the user message),
-      // and if that position is not yet rendered or measured the
-      // viewport may show blank space.
-      if (isStreamingOutput) {
-        hasPrimedMountedStreamingTurnFollowRef.current = resumeFollowOutputForMountedStream();
-      }
-
-      return;
-    }
-
-    const previousLatestTurnId = previousLatestTurnIdForFollowRef.current;
-    if (previousLatestTurnId === latestTurnId) {
-      return;
-    }
-
-    previousLatestTurnIdForFollowRef.current = latestTurnId;
-
-    if (!latestTurnId) {
-      cancelPendingAutoFollowArm();
-      return;
-    }
-
-    armFollowOutputForNewTurn();
-  }, [
-    activeSession?.sessionId,
-    activeSession?.hasUnreadCompletion,
-    armFollowOutputForNewTurn,
-    cancelPendingAutoFollowArm,
-    isStreamingOutput,
-    latestTurnId,
-    resumeFollowOutputForMountedStream,
-    virtualItems.length,
-  ]);
-
-  const maybeHandoffPinnedTurnToTail = useCallback((reason: string) => {
-    if (
-      !latestTurnId ||
-      isFollowingOutput ||
-      !canProcessViewportGeometry(scrollerElementRef.current)
-    ) {
-      return false;
-    }
-
-    const hasPendingLatestStickyPin = (
-      pendingTurnPin?.turnId === latestTurnId &&
-      pendingTurnPin.pinMode === 'sticky-latest'
-    );
-    if (hasPendingLatestStickyPin) {
-      return false;
-    }
-
-    const reservationState = bottomReservationStateRef.current;
-    if (
-      reservationState.pin.mode !== 'sticky-latest' ||
-      reservationState.pin.targetTurnId !== latestTurnId
-    ) {
-      return false;
-    }
-
-    const collapseIntent = pendingCollapseIntentRef.current;
-    const hasPendingCollapseIntent = (
-      collapseIntent.active
-    );
-    const pendingStickyPinGrowthPx = pendingStickyPinGrowthRef.current.amountPx;
+  const navigateToTurn = useCallback((turnId: string, options?: TurnNavigationOptions) => (
+    navigateToTurnWithStatus(turnId, options) !== 'rejected'
+  ), [navigateToTurnWithStatus]);
+
+  /**
+   * Centre a flow item — a tool call, a text block — inside its Turn.
+   *
+   * The virtualizer cannot be asked for this: it aligns *items*, and a flow
+   * item lives inside one, so a centred model round is not a centred tool call.
+   * That is the carve-out the contract already makes for a target that is not
+   * an item, and the offset goes through the register like every other write.
+   *
+   * Returns whether the item was there to aim at. A focus request arriving
+   * before its Turn has rendered asks again on the next frame.
+   */
+  const focusFlowItem = useCallback((flowItemId: string): boolean => {
     const scroller = scrollerElementRef.current;
-    const viewport = scroller
-      ? {
-        scrollTop: scroller.scrollTop,
-        clientHeight: scroller.clientHeight,
-        naturalContentHeight: snapshotMeasuredContentHeight(scroller, reservationState),
-      }
-      : null;
-    if (!canHandoffPinnedItemToTail({
-      pinReservationPx: reservationState.pin.px,
-      collapseReservationPx: reservationState.collapse.px,
-      pendingStickyPinGrowthPx,
-      hasPendingCollapseIntent,
-      viewport,
-    })) {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.maybeHandoffPinnedTurnToTail',
-          message: 'Pinned item to tail handoff remained blocked',
-          data: () => ({
-            reason,
-            reservation: reservationState,
-            pendingStickyPinGrowthPx,
-            hasPendingCollapseIntent,
-            viewport,
-            coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          }),
-        });
-      }
-      return false;
-    }
-
-    if (activateArmedFollowOutput()) {
-      if (flowChatDiagnostics.isEnabled()) {
-        flowChatDiagnostics.trace({
-          hypothesis: 'A',
-          location: 'VirtualMessageList.maybeHandoffPinnedTurnToTail',
-          message: 'Pinned item handed off to tail follow',
-          data: () => ({
-            reason,
-            reservation: reservationState,
-            pendingStickyPinGrowthPx,
-            viewport,
-          }),
-        });
-      }
-      return true;
-    }
-    return false;
-  }, [
-    activateArmedFollowOutput,
-    canProcessViewportGeometry,
-    isFollowingOutput,
-    latestTurnId,
-    pendingTurnPin?.pinMode,
-    pendingTurnPin?.turnId,
-    snapshotMeasuredContentHeight,
-  ]);
-  maybeHandoffPinnedTurnToTailRef.current = maybeHandoffPinnedTurnToTail;
-
-  useLayoutEffect(() => {
-    const generation = viewportActivityGenerationRef.current + 1;
-    viewportActivityGenerationRef.current = generation;
-
-    if (!isViewportActive) {
-      const scroller = scrollerElementRef.current;
-      if (
-        scroller?.isConnected &&
-        scroller.clientHeight > COMPENSATION_EPSILON_PX
-      ) {
-        suspendedViewportScrollTopRef.current = scroller.scrollTop;
-      } else {
-        suspendedViewportScrollTopRef.current = previousScrollTopRef.current;
-      }
-
-      viewportGeometrySuspendedRef.current = true;
-
-      const outstandingPinRequest = activeTurnPinRequestRef.current ?? pendingTurnPin;
-      if (outstandingPinRequest) {
-        preparedHistoryTurnPinRef.current = {
-          turnId: outstandingPinRequest.turnId,
-          behavior: 'auto',
-          pinMode: outstandingPinRequest.pinMode,
-          alignmentPolicy: outstandingPinRequest.alignmentPolicy,
-        };
-        clearTurnPinRequest();
-      }
-
-      cancelLatestEndAnchorStabilization();
-      clearCollapseIntentScheduling();
-      clearRetainedCollapseSettlement();
-      clearPendingStickyPinGrowth('viewport-suspended');
-      pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-      retainedCollapseAnchorRef.current = null;
-
-      [
-        measureFrameRef,
-        visibleTurnMeasureFrameRef,
-        pinReservationReconcileFrameRef,
-        turnPinStabilizationFrameRef,
-        fullHistoryProjectionIntentFrameRef,
-      ].forEach(frameRef => {
-        if (frameRef.current !== null) {
-          cancelAnimationFrame(frameRef.current);
-          frameRef.current = null;
-        }
-      });
-      pendingFullHistoryProjectionReasonRef.current = null;
-      return;
-    }
-
-    if (!viewportGeometrySuspendedRef.current) {
-      return;
-    }
-
-    const restoreVisibleViewport = () => {
-      viewportReactivationFrameRef.current = null;
-      if (
-        generation !== viewportActivityGenerationRef.current ||
-        !isViewportActiveRef.current
-      ) {
-        return;
-      }
-
-      const scroller = scrollerElementRef.current;
-      if (!isScrollerViewportMeasurable(scroller)) {
-        viewportReactivationFrameRef.current = requestAnimationFrame(restoreVisibleViewport);
-        return;
-      }
-
-      viewportGeometrySuspendedRef.current = false;
-
-      clearCollapseIntentScheduling();
-      clearRetainedCollapseSettlement();
-      clearPendingStickyPinGrowth('viewport-reactivated');
-      pendingCollapseIntentRef.current = createInactiveCollapseIntentState();
-      retainedCollapseAnchorRef.current = null;
-
-      const currentState = bottomReservationStateRef.current;
-      let nextState: BottomReservationState = {
-        ...currentState,
-        collapse: {
-          kind: 'collapse',
-          px: 0,
-          floorPx: 0,
-        },
-      };
-      let stickyPinMetrics: ReturnType<typeof resolveTurnPinMetrics> = null;
-      const stickyPinTarget = (
-        currentState.pin.mode === 'sticky-latest' &&
-        currentState.pin.targetTurnId
-      )
-        ? currentState.pin.targetTurnId
-        : null;
-      if (stickyPinTarget) {
-        stickyPinMetrics = resolveTurnPinMetrics(
-          stickyPinTarget,
-          getTotalBottomCompensationPx(currentState),
-        );
-        if (stickyPinMetrics) {
-          const requiredPinPx = clampPinReservationPxToViewport(
-            stickyPinMetrics.missingTailSpace,
-            scroller.clientHeight,
-          );
-          nextState = {
-            ...nextState,
-            pin: {
-              kind: 'pin',
-              px: requiredPinPx,
-              floorPx: requiredPinPx,
-              mode: 'sticky-latest',
-              targetTurnId: stickyPinTarget,
-            },
-          };
-        }
-      }
-
-      updateBottomReservationState(nextState);
-      applyFooterCompensationNow(nextState);
-
-      if (stickyPinTarget && stickyPinMetrics) {
-        viewportCoordinatorRef.current.pinItem('viewport-reactivated-sticky-pin');
-        const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        scroller.scrollTop = Math.min(stickyPinMetrics.desiredScrollTop, maxScrollTop);
-      } else if (isFollowingOutputRef.current && isStreamingOutputRef.current) {
-        viewportCoordinatorRef.current.followTail({ force: true });
-        scrollToLatestEndPositionInternal('auto');
-      } else if (viewportCoordinatorRef.current.ownsElementAnchor()) {
-        viewportCoordinatorRef.current.restoreElementAnchor(scroller, 'viewport-reactivated');
-      } else {
-        const maxScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        scroller.scrollTop = Math.min(suspendedViewportScrollTopRef.current, maxScrollTop);
-      }
-
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(
-        scroller,
-        bottomReservationStateRef.current,
-      );
-      previousScrollTopRef.current = scroller.scrollTop;
-      recordScrollerGeometry(scroller);
-      setViewportActivityRevision(revision => revision + 1);
-
-      const preparedTurnPin = preparedHistoryTurnPinRef.current;
-      if (
-        preparedTurnPin &&
-        userMessageItems.some(({ item }) => item.turnId === preparedTurnPin.turnId)
-      ) {
-        preparedHistoryTurnPinRef.current = null;
-        requestTurnPinToTop(preparedTurnPin.turnId, {
-          behavior: 'auto',
-          pinMode: preparedTurnPin.pinMode,
-          alignmentPolicy: preparedTurnPin.alignmentPolicy,
-        });
-      }
-
-      scheduleHeightMeasure(2);
-      scheduleVisibleTurnMeasure(2);
-      schedulePinReservationReconcile(2);
-      scheduleTransientTurnPinStabilization(2);
-      maybeHandoffPinnedTurnToTailRef.current('viewport-reactivated');
-      if (isFollowingOutputRef.current && isStreamingOutputRef.current) {
-        scheduleFollowToLatestWithViewportState('viewport-reactivated');
-      }
-    };
-
-    viewportReactivationFrameRef.current = requestAnimationFrame(restoreVisibleViewport);
-    return () => {
-      if (viewportReactivationFrameRef.current !== null) {
-        cancelAnimationFrame(viewportReactivationFrameRef.current);
-        viewportReactivationFrameRef.current = null;
-      }
-    };
-  }, [
-    applyFooterCompensationNow,
-    cancelLatestEndAnchorStabilization,
-    clearCollapseIntentScheduling,
-    clearPendingStickyPinGrowth,
-    clearRetainedCollapseSettlement,
-    clearTurnPinRequest,
-    getTotalBottomCompensationPx,
-    isScrollerViewportMeasurable,
-    isViewportActive,
-    pendingTurnPin,
-    recordScrollerGeometry,
-    requestTurnPinToTop,
-    resolveTurnPinMetrics,
-    scheduleFollowToLatestWithViewportState,
-    scheduleHeightMeasure,
-    schedulePinReservationReconcile,
-    scheduleTransientTurnPinStabilization,
-    scheduleVisibleTurnMeasure,
-    scrollToLatestEndPositionInternal,
-    snapshotMeasuredContentHeight,
-    updateBottomReservationState,
-    userMessageItems,
-  ]);
-
-  useEffect(() => {
-    maybeHandoffPinnedTurnToTail('reservation-state-change');
-  }, [
-    bottomReservationState.collapse.px,
-    bottomReservationState.pin.floorPx,
-    bottomReservationState.pin.mode,
-    bottomReservationState.pin.px,
-    bottomReservationState.pin.targetTurnId,
-    isStreamingOutput,
-    maybeHandoffPinnedTurnToTail,
-  ]);
-
-  followOutputControllerRef.current = {
-    handleUserScrollIntent,
-    handleScroll: handleFollowOutputScroll,
-    scheduleFollowToLatest,
-  };
-  isFollowingOutputRef.current = isFollowingOutput;
-  isStreamingOutputRef.current = isStreamingOutput;
-
-  useEffect(() => {
-    if (flowChatDiagnostics.isEnabled()) {
-      flowChatDiagnostics.trace({
-        hypothesis: 'D',
-        location: 'VirtualMessageList.followOutputEffect',
-        message: 'Follow output state synchronized with the viewport coordinator',
-        data: () => ({
-          isFollowingOutput,
-          isStreamingOutput,
-          coordinatorMode: viewportCoordinatorRef.current.getMode(),
-          reservation: bottomReservationStateRef.current,
-        }),
-      });
-    }
-    const coordinatorMode = viewportCoordinatorRef.current.getMode();
-    if (isFollowingOutput && coordinatorMode === 'pinned-item') {
-      const pinReservation = bottomReservationStateRef.current.pin;
-      const isPendingLatestStickyPin = (
-        pendingTurnPin?.pinMode === 'sticky-latest' &&
-        pendingTurnPin.turnId === latestTurnId
-      );
-      if (
-        (
-          pinReservation.mode === 'sticky-latest' &&
-          pinReservation.targetTurnId === latestTurnId
-        ) || isPendingLatestStickyPin
-      ) {
-        // React effects may still carry the previous render's follow value
-        // after a synchronous sticky-pin request. Repair the logical state
-        // without dropping the armed handoff.
-        preparePinnedTurnFollowHandoff();
-      } else {
-        exitFollowOutput('pin-turn-to-top');
-      }
-      return;
-    }
-    if (isFollowingOutput) {
-      viewportCoordinatorRef.current.followTail({ force: true });
-      return;
-    }
-    if (coordinatorMode === 'following-tail') {
-      viewportCoordinatorRef.current.release('follow-ended');
-    }
-  }, [
-    exitFollowOutput,
-    isFollowingOutput,
-    isStreamingOutput,
-    latestTurnId,
-    pendingTurnPin?.pinMode,
-    pendingTurnPin?.turnId,
-    preparePinnedTurnFollowHandoff,
-  ]);
-
-  // When entering follow-output during streaming, end any active protection
-  // window but keep its reservation. Once the intent is inactive, real content
-  // growth can consume that range without exposing a one-frame shrink.
-  const previousIsFollowingOutputRef = useRef(false);
-  useEffect(() => {
-    if (!previousIsFollowingOutputRef.current && isFollowingOutput && isStreamingOutput) {
-      const intent = pendingCollapseIntentRef.current;
-      if (intent.active) {
-        finalizeCollapseIntent('follow-output-entered', {
-          expectedExpiresAtMs: intent.expiresAtMs,
-          suppressHandoff: true,
-        });
-      }
-    }
-    previousIsFollowingOutputRef.current = isFollowingOutput;
-  }, [
-    finalizeCollapseIntent,
-    isFollowingOutput,
-    isStreamingOutput,
-  ]);
-
-  const scrollToTurn = useCallback((turnIndex: number) => {
-    if (!virtuosoRef.current) return;
-    if (turnIndex < 1 || turnIndex > userMessageItems.length) return;
-
-    const targetItem = userMessageItems[turnIndex - 1];
-    if (!targetItem) return;
-
-    retainedCollapseAnchorRef.current = null;
-    exitFollowOutput('scroll-to-turn');
-    clearPinReservationForUserNavigation();
-    retargetHistoryProjectionHandoff(targetItem.item.turnId);
-
-    if (targetItem.index === 0) {
-      virtuosoRef.current.scrollTo({ top: 0, behavior: 'smooth' });
-    } else {
-      virtuosoRef.current.scrollToIndex({
-        index: targetItem.index,
-        behavior: 'smooth',
-        align: 'center',
-      });
-    }
-  }, [
-    clearPinReservationForUserNavigation,
-    exitFollowOutput,
-    retargetHistoryProjectionHandoff,
-    userMessageItems,
-  ]);
-
-  const scrollToIndex = useCallback((index: number) => {
-    if (!virtuosoRef.current) return;
-    if (index < 0 || index >= virtualItems.length) return;
-
-    retainedCollapseAnchorRef.current = null;
-    exitFollowOutput('scroll-to-index');
-    clearPinReservationForUserNavigation();
-    const targetTurnId = virtualItems[index]?.turnId;
-    if (targetTurnId) {
-      retargetHistoryProjectionHandoff(targetTurnId);
-    }
-
-    if (index === 0) {
-      virtuosoRef.current.scrollTo({ top: 0, behavior: 'auto' });
-    } else {
-      virtuosoRef.current.scrollToIndex({ index, align: 'center', behavior: 'auto' });
-    }
-  }, [
-    clearPinReservationForUserNavigation,
-    exitFollowOutput,
-    retargetHistoryProjectionHandoff,
-    virtualItems,
-  ]);
-
-  const clearSearchMatch = useCallback(() => {
-    searchNavigationRequestIdRef.current += 1;
-    setFlowChatSearchHighlight(null);
-  }, []);
-
-  const scrollToSearchMatch = useCallback((target: {
-    virtualItemIndex: number;
-    query: string;
-    flowItemId?: string;
-    occurrenceIndex?: number;
-    expandableIds?: readonly string[];
-  }) => {
-    const query = target.query.trim();
-    if (
-      !query ||
-      target.virtualItemIndex < 0 ||
-      target.virtualItemIndex >= virtualItems.length
-    ) {
-      clearSearchMatch();
-      return;
-    }
-
-    const requestId = searchNavigationRequestIdRef.current + 1;
-    searchNavigationRequestIdRef.current = requestId;
-    setFlowChatSearchHighlight(null);
-    retainedCollapseAnchorRef.current = null;
-    exitFollowOutput('scroll-to-index');
-    clearPinReservationForUserNavigation();
-    const targetTurnId = virtualItems[target.virtualItemIndex]?.turnId;
-    if (targetTurnId) {
-      retargetHistoryProjectionHandoff(targetTurnId);
-    }
-
-    const virtuoso = virtuosoRef.current;
-    if (virtuoso) {
-      if (target.virtualItemIndex === 0) {
-        virtuoso.scrollTo({ top: 0, behavior: 'auto' });
-      } else {
-        virtuoso.scrollToIndex({
-          index: target.virtualItemIndex,
-          align: 'center',
-          behavior: 'auto',
-        });
-      }
-    }
-
-    let attempts = 0;
-    let revealedCollapsedContent = false;
-    // Scroll position the previous successful pass settled on. Expanding
-    // collapsed content reflows everything below it, so one more pass is needed
-    // after the expansion — but only until the answer stops moving. Re-arming
-    // unconditionally kept re-running the full tree-walk, re-highlight and
-    // ancestor `getComputedStyle` scan for all 24 attempts, roughly 22 of them
-    // recomputing a position that had already converged.
-    let lastResolvedScrollTop: number | null = null;
-    const resolveExactTextPosition = () => {
-      if (searchNavigationRequestIdRef.current !== requestId) {
-        return;
-      }
-
-      attempts += 1;
-      const scroller = scrollerElementRef.current;
-      const wrapper = getRenderedVirtualItemElement(target.virtualItemIndex);
-      if (!scroller || !wrapper) {
-        if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-          requestAnimationFrame(resolveExactTextPosition);
-        }
-        return;
-      }
-
-      for (const expandableId of target.expandableIds ?? []) {
-        const expandable = findElementWithDataValue(
-          wrapper,
-          'data-tool-card-id',
-          expandableId,
-        );
-        if (!expandable) {
-          if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-            requestAnimationFrame(resolveExactTextPosition);
-          }
-          return;
-        }
-
-        if (expandable.dataset.expanded === 'false') {
-          const toggle = expandable.querySelector<HTMLElement>(
-            '[data-testid="chat-explore-group-toggle"], [data-testid="chat-thinking-toggle"]',
-          );
-          if (toggle) {
-            revealedCollapsedContent = true;
-            toggle.click();
-          }
-          if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-            requestAnimationFrame(resolveExactTextPosition);
-          }
-          return;
-        }
-      }
-
-      if (target.flowItemId) {
-        const flowItem = findElementWithDataValue(
-          wrapper,
-          'data-flow-item-id',
-          target.flowItemId,
-        );
-        const thinkingItem = findElementWithDataValue(
-          wrapper,
-          'data-tool-card-id',
-          target.flowItemId,
-        );
-        if (!flowItem && !thinkingItem) {
-          if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-            requestAnimationFrame(resolveExactTextPosition);
-          }
-          return;
-        }
-      }
-
-      const textRoot = getFlowChatSearchTextRoot(wrapper, target.flowItemId);
-      const userMessage = textRoot.closest<HTMLElement>('.user-message-item');
-      if (
-        userMessage &&
-        !userMessage.classList.contains('user-message-item--expanded') &&
-        textRoot.scrollHeight > textRoot.clientHeight + 1
-      ) {
-        revealedCollapsedContent = true;
-        textRoot.click();
-        if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-          requestAnimationFrame(resolveExactTextPosition);
-        }
-        return;
-      }
-
-      const ranges = findFlowChatSearchTextRanges(textRoot, query);
-      if (ranges.length === 0) {
-        if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) {
-          requestAnimationFrame(resolveExactTextPosition);
-        }
-        return;
-      }
-
-      // Markdown syntax can make the raw-content occurrence count exceed the
-      // rendered one; clamping still lands navigation on a real occurrence.
-      const rangeIndex = Math.min(Math.max(target.occurrenceIndex ?? 0, 0), ranges.length - 1);
-      const range = ranges[rangeIndex];
-      setFlowChatSearchHighlight(range, ranges.filter((_, index) => index !== rangeIndex));
-
-      let ancestor = range.startContainer.parentElement;
-      while (ancestor && ancestor !== scroller && wrapper.contains(ancestor)) {
-        const styles = ancestor.ownerDocument.defaultView?.getComputedStyle(ancestor);
-        const canScrollVertically = (
-          ancestor.scrollHeight > ancestor.clientHeight + 1 &&
-          (styles?.overflowY === 'auto' || styles?.overflowY === 'scroll')
-        );
-        if (canScrollVertically) {
-          const rangeRect = range.getBoundingClientRect();
-          const ancestorRect = ancestor.getBoundingClientRect();
-          const nextScrollTop = ancestor.scrollTop +
-            rangeRect.top -
-            ancestorRect.top -
-            Math.max(0, (ancestor.clientHeight - rangeRect.height) / 2);
-          ancestor.scrollTop = Math.max(
-            0,
-            Math.min(nextScrollTop, ancestor.scrollHeight - ancestor.clientHeight),
-          );
-        }
-        ancestor = ancestor.parentElement;
-      }
-
-      const rangeRect = range.getBoundingClientRect();
-      const scrollerRect = scroller.getBoundingClientRect();
-      const nextScrollTop = scroller.scrollTop +
-        rangeRect.top -
-        scrollerRect.top -
-        Math.max(0, (scroller.clientHeight - rangeRect.height) / 2);
-      scroller.scrollTop = Math.max(
-        0,
-        Math.min(nextScrollTop, scroller.scrollHeight - scroller.clientHeight),
-      );
-      previousScrollTopRef.current = scroller.scrollTop;
-      recordScrollerGeometry(scroller);
-      scheduleVisibleTurnMeasure(2);
-
-      const settled =
-        lastResolvedScrollTop !== null
-        && Math.abs(scroller.scrollTop - lastResolvedScrollTop) <= 1;
-      lastResolvedScrollTop = scroller.scrollTop;
-      if (
-        revealedCollapsedContent
-        && !settled
-        && attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS
-      ) {
-        requestAnimationFrame(resolveExactTextPosition);
-      }
-    };
-
-    requestAnimationFrame(resolveExactTextPosition);
-  }, [
-    clearPinReservationForUserNavigation,
-    clearSearchMatch,
-    exitFollowOutput,
-    getRenderedVirtualItemElement,
-    recordScrollerGeometry,
-    retargetHistoryProjectionHandoff,
-    scheduleVisibleTurnMeasure,
-    virtualItems,
-  ]);
-
-  useEffect(() => () => {
-    searchNavigationRequestIdRef.current += 1;
-    setFlowChatSearchHighlight(null);
-  }, []);
-
-  const pinTurnToTopWithStatus = useCallback((turnId: string, options?: TurnPinOptions): FlowChatTurnPinRequestStatus => {
-    const shouldExitFollowOutput = !(
-      options?.pinMode === 'sticky-latest' &&
-      turnId === latestTurnId
+    if (!scroller || !flowItemId) return false;
+    const element = scroller.querySelector<HTMLElement>(
+      `[data-flow-item-id="${CSS.escape(flowItemId)}"]`,
     );
-    if (shouldExitFollowOutput) {
-      exitFollowOutput('pin-turn-to-top');
-    }
-
-    return requestTurnPinToTop(turnId, options);
-  }, [
-    exitFollowOutput,
-    latestTurnId,
-    requestTurnPinToTop,
-  ]);
-
-  const prepareTurnPinToTop = useCallback((turnId: string, options?: TurnPinOptions): FlowChatTurnPinRequestStatus => {
-    if (!turnId || !activeSessionIdRef.current) {
-      return 'rejected';
-    }
-
-    exitFollowOutput('pin-turn-to-top');
-    clearTurnPinRequest();
-    cancelLatestEndAnchorStabilization();
-    retainedCollapseAnchorRef.current = null;
-    viewportCoordinatorRef.current.pinItem('prepare-history-window-turn-pin');
-    preparedHistoryTurnPinRef.current = {
-      turnId,
-      behavior: options?.behavior ?? 'auto',
-      pinMode: options?.pinMode ?? 'transient',
-      alignmentPolicy: options?.alignmentPolicy ?? 'exact',
-    };
-    retargetHistoryProjectionHandoff(turnId);
-    setIsAtBottom(false);
-    return 'pending';
-  }, [
-    cancelLatestEndAnchorStabilization,
-    clearTurnPinRequest,
-    exitFollowOutput,
-    retargetHistoryProjectionHandoff,
-  ]);
-
-  const pinTurnToTop = useCallback((turnId: string, options?: TurnPinOptions) => {
-    return pinTurnToTopWithStatus(turnId, options) !== 'rejected';
-  }, [pinTurnToTopWithStatus]);
-
-  const visibleTurnInfo = useModernFlowChatStore(state => state.visibleTurnInfo);
-
-  const handleJumpToCurrentTurn = useCallback(() => {
-    const currentTurnId = visibleTurnInfo?.turnId;
-    if (!currentTurnId) return;
-    pinTurnToTop(currentTurnId, { behavior: 'smooth', pinMode: 'transient' });
-  }, [visibleTurnInfo?.turnId, pinTurnToTop]);
-
-  const { shouldShowButton: shouldShowTurnHeaderButton, handleClick: handleTurnHeaderClick } = useScrollToTurnHeader({
-    scrollerRef: scrollerElementRef,
-    currentTurnId: visibleTurnInfo?.turnId ?? null,
-    currentTurnIndex: visibleTurnInfo?.turnIndex ?? 0,
-    visibleTurnInfo,
-    onJumpToCurrentTurn: handleJumpToCurrentTurn,
-  });
-
-  const { visibleTaskInfo, scrollToTask } = useVisibleTaskInfo({
-    scrollerRef: scrollerElementRef,
-    virtualItems,
-  });
-
-  const scrollToPhysicalBottomAndClearPin = useCallback(() => {
-    const scroller = scrollerElementRef.current;
-    if (canProcessViewportGeometry(scroller)) {
-      clearTurnPinRequest();
-      clearAllBottomReservationsForUserNavigation();
-      const nextScrollTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      scroller.scrollTo({
-        top: nextScrollTop,
-        behavior: 'auto',
-      });
-      previousScrollTopRef.current = nextScrollTop;
-      previousMeasuredHeightRef.current = snapshotMeasuredContentHeight(scroller);
-      recordScrollerGeometry(scroller);
-      setIsAtBottom(true);
-    }
-  }, [
-    clearAllBottomReservationsForUserNavigation,
-    clearTurnPinRequest,
-    canProcessViewportGeometry,
-    recordScrollerGeometry,
-    snapshotMeasuredContentHeight,
-  ]);
+    if (!element) return false;
 
-  const scrollToTurnEndAndClearPin = useCallback((turnId: string) => {
-    const scroller = scrollerElementRef.current;
-    const reject = (cause: string, extra: Record<string, unknown> = {}) => {
-      startupTrace.markPhase('flowchat_latest_end_anchor_rejected', {
-        cause,
-        turnId,
-        virtualItemCount: virtualItems.length,
-        hasVirtuoso: Boolean(virtuosoRef.current),
-        ...extra,
-      });
-      return false;
+    exitFollowOutput('scroll-to-index');
+    const scrollerRect = scroller.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const centred = scroller.scrollTop + elementRect.top - scrollerRect.top
+      - Math.max(0, (scroller.clientHeight - elementRect.height) / 2);
+    viewportOwner.write({
+      owner: 'one-shot-navigation',
+      holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+      topPx: Math.max(0, Math.min(scroller.scrollHeight - scroller.clientHeight, centred)),
+    });
+    return true;
+  }, [exitFollowOutput, viewportOwner]);
+
+  const prepareTurnNavigation = useCallback((
+    turnId: string,
+    options?: TurnNavigationOptions,
+  ): FlowChatTurnNavigationStatus => {
+    if (!turnId || !activeSessionId) return 'rejected';
+    exitFollowOutput('scroll-to-turn');
+    preparedTurnNavigationRef.current = {
+      turnId,
+      behavior: options?.behavior ?? 'auto',
     };
+    return 'pending';
+  }, [activeSessionId, exitFollowOutput]);
 
-    if (!canProcessViewportGeometry(scroller) || virtualItems.length === 0) {
-      return reject(
-        !scroller
-          ? 'missing_scroller'
-          : !canProcessViewportGeometry(scroller)
-            ? 'inactive_viewport'
-            : 'empty_virtual_items',
-      );
-    }
+  useLayoutEffect(() => {
+    const prepared = preparedTurnNavigationRef.current;
+    if (!prepared) return;
+    const status = navigateToTurnWithStatus(prepared.turnId, { behavior: prepared.behavior });
+    if (status === 'settled') preparedTurnNavigationRef.current = null;
+  }, [navigateToTurnWithStatus, virtualItems]);
+
+  const scrollToTurn = useCallback((turnIndex: number) => {
+    const target = userMessageItems[turnIndex - 1];
+    if (target) navigateToTurn(target.item.turnId, { behavior: 'smooth' });
+  }, [navigateToTurn, userMessageItems]);
+
+  const scrollToIndex = useCallback((index: number) => {
+    if (index < 0 || index >= virtualItems.length) return;
+    exitFollowOutput('scroll-to-index');
+    virtualizer.scrollItemIntoView(index, {
+      align: 'center',
+      owner: 'one-shot-navigation',
+      holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+    });
+  }, [exitFollowOutput, virtualItems.length, virtualizer]);
 
+  const scrollToTurnEnd = useCallback((turnId: string) => {
     let targetIndex = -1;
     for (let index = virtualItems.length - 1; index >= 0; index -= 1) {
       if (virtualItems[index]?.turnId === turnId) {
@@ -6851,500 +1444,405 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         break;
       }
     }
-
-    if (targetIndex < 0) {
-      return reject('missing_target_index');
-    }
-
-    exitFollowOutput('scroll-to-index');
-    clearTurnPinRequest();
-    clearAllBottomReservationsForUserNavigation();
-
-    if (!virtuosoRef.current) {
-      return reject('missing_virtuoso', { targetIndex });
-    }
-
-    latestEndAnchorRequestRef.current = {
-      turnId,
-      targetIndex,
-      attempts: 0,
-      visibleFrames: 0,
-      stableVisibleFrames: 0,
-      lastScrollHeight: null,
-      lastScrollTop: null,
-      lastTargetTop: null,
-      lastTargetBottom: null,
-    };
-    startupTrace.markPhase('flowchat_latest_end_anchor_request', {
-      targetIndex,
-      turnId,
-      virtualItemCount: virtualItems.length,
-    });
-    virtuosoRef.current.scrollToIndex({
-      index: targetIndex,
-      align: 'end',
-      behavior: 'auto',
+    const scroller = scrollerElementRef.current;
+    const bounds = targetIndex < 0 ? null : virtualizer.getItemBounds(targetIndex);
+    if (!bounds || !scroller) return false;
+    // Deliberately does not exit follow-output. This is the session-open
+    // placement, which wants the same position the tail follow is settling on;
+    // releasing ownership here strands the viewport wherever this one early
+    // shot landed, before item measurement and history paging have finished.
+    //
+    // Aligned by hand rather than by asking for the last item's end: the
+    // virtualizer's own end alignment runs to the bottom of the scroll range,
+    // and the resident tail spacer lives down there.
+    virtualizer.scrollToOffset(bounds.endPx - scroller.clientHeight, {
+      owner: 'follow-output',
     });
-    if (latestEndAnchorStabilizationFrameRef.current === null) {
-      latestEndAnchorStabilizationFrameRef.current = requestAnimationFrame(() => {
-        latestEndAnchorStabilizationFrameRef.current = null;
-        resolveLatestEndAnchorStabilization('raf');
-      });
-    }
-    scheduleVisibleTurnMeasure(2);
     return true;
-  }, [
-    clearAllBottomReservationsForUserNavigation,
-    clearTurnPinRequest,
-    canProcessViewportGeometry,
-    exitFollowOutput,
-    resolveLatestEndAnchorStabilization,
-    scheduleVisibleTurnMeasure,
-    virtualItems,
-  ]);
-
-  const scrollToLatestEndPosition = useCallback(() => {
-    retainedCollapseAnchorRef.current = null;
-    clearTurnPinRequest();
-    if (latestTurnId) {
-      retargetHistoryProjectionHandoff(latestTurnId);
-    }
-    onUserScrollIntent?.();
-    enterFollowOutput('jump-to-latest');
-  }, [
-    clearTurnPinRequest,
-    enterFollowOutput,
-    latestTurnId,
-    onUserScrollIntent,
-    retargetHistoryProjectionHandoff,
-  ]);
+  }, [virtualItems, virtualizer]);
 
-  const handleScrollToLatestRequest = useCallback(() => {
-    if (viewportMode === 'history-reading' && onRequestJumpToLatest) {
-      onRequestJumpToLatest();
-      return;
-    }
-    scrollToLatestEndPosition();
-  }, [onRequestJumpToLatest, scrollToLatestEndPosition, viewportMode]);
+  const isTurnRenderedInViewport = useCallback((turnId: string) => {
+    const scroller = scrollerElementRef.current;
+    const element = getRenderedUserMessageElement(turnId);
+    return Boolean(scroller && element && isElementVisibleInScroller(element, scroller));
+  }, [getRenderedUserMessageElement]);
 
-  useImperativeHandle(ref, () => ({
-    scrollToTurn,
-    scrollToIndex,
-    scrollToSearchMatch,
-    clearSearchMatch,
-    scrollToPhysicalBottomAndClearPin,
-    scrollToTurnEndAndClearPin,
-    isTurnRenderedInViewport,
-    isTurnTextRenderedInViewport,
-    scrollToLatestEndPosition,
-    pinTurnToTop,
-    pinTurnToTopWithStatus,
-    prepareTurnPinToTop,
-  }), [
-    isTurnRenderedInViewport,
-    isTurnTextRenderedInViewport,
-    pinTurnToTop,
-    pinTurnToTopWithStatus,
-    prepareTurnPinToTop,
-    clearSearchMatch,
-    scrollToTurn,
-    scrollToIndex,
-    scrollToSearchMatch,
-    scrollToPhysicalBottomAndClearPin,
-    scrollToTurnEndAndClearPin,
-    scrollToLatestEndPosition,
-  ]);
+  const isTurnTextRenderedInViewport = useCallback((turnId: string) => {
+    const scroller = scrollerElementRef.current;
+    const element = getRenderedUserMessageElement(turnId);
+    return Boolean(
+      scroller &&
+      element &&
+      element.textContent?.trim() &&
+      isElementVisibleInScroller(element, scroller)
+    );
+  }, [getRenderedUserMessageElement]);
 
-  const handleAtBottomStateChange = useCallback((atBottom: boolean) => {
-    setIsAtBottom(atBottom);
+  const clearSearchMatch = useCallback(() => {
+    searchNavigationRequestIdRef.current += 1;
+    setFlowChatSearchHighlight(null);
   }, []);
 
-  const footerHeightPx = getFooterHeightPx(getTotalBottomCompensationPx());
-  const initialHistoryTransitionState = React.useMemo<InitialHistoryTransitionState | null>(() => {
-    if (!activeSessionId || !latestTurnId) {
-      return null;
-    }
-
-    const contextRestoreState = activeSession?.contextRestoreState ?? 'unknown';
-    const isPartial = activeSession?.isPartial === true;
-    const usesInitialHistoryRenderBudget = useInitialHistoryRenderBudget;
-    return {
-      key: [
-        activeSessionId,
-        latestTurnId,
-        virtualItems.length,
-        isPartial ? 'partial' : 'full',
-        contextRestoreState,
-        usesInitialHistoryRenderBudget ? 'initial-budget' : 'normal',
-      ].join(':'),
-      sessionId: activeSessionId,
-      isPartial,
-      contextRestoreState,
-      usesInitialHistoryRenderBudget,
-    };
-  }, [
-    activeSession?.contextRestoreState,
-    activeSession?.isPartial,
-    activeSessionId,
-    latestTurnId,
-    useInitialHistoryRenderBudget,
-    virtualItems.length,
-  ]);
-  useLayoutEffect(() => {
-    const previousState = previousInitialHistoryTransitionStateRef.current;
-    previousInitialHistoryTransitionStateRef.current = initialHistoryTransitionState;
-
-    if (presentationMode === 'history-window') {
-      if (historyProjectionHandoffRef.current) {
-        clearHistoryProjectionHandoffRef.current('history-window-presentation');
+  const scrollToSearchMatch = useCallback((target: {
+    virtualItemIndex: number;
+    query: string;
+    flowItemId?: string;
+    occurrenceIndex?: number;
+    expandableIds?: readonly string[];
+  }) => {
+    clearSearchMatch();
+    exitFollowOutput('scroll-to-index');
+    const requestId = searchNavigationRequestIdRef.current;
+    virtualizer.scrollItemIntoView(target.virtualItemIndex, {
+      align: 'center',
+      owner: 'one-shot-navigation',
+      holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+    });
+    let attempts = 0;
+    const resolve = () => {
+      if (searchNavigationRequestIdRef.current !== requestId) return;
+      attempts += 1;
+      const scroller = scrollerElementRef.current;
+      const wrapper = Array.from(
+        scroller?.querySelectorAll<HTMLElement>('.virtual-item-wrapper') ?? [],
+      ).find(element => Number(element.dataset.virtualIndex) === target.virtualItemIndex);
+      if (!scroller || !wrapper) {
+        if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) requestAnimationFrame(resolve);
+        return;
       }
+      for (const expandableId of target.expandableIds ?? []) {
+        const expandable = findElementWithDataValue(wrapper, 'data-tool-card-id', expandableId);
+        if (expandable?.dataset.expanded === 'false') {
+          expandable.querySelector<HTMLElement>(
+            '[data-testid="chat-explore-group-toggle"], [data-testid="chat-thinking-toggle"]',
+          )?.click();
+          if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) requestAnimationFrame(resolve);
+          return;
+        }
+      }
+      const root = getFlowChatSearchTextRoot(wrapper, target.flowItemId);
+      const ranges = findFlowChatSearchTextRanges(root, target.query);
+      const rangeIndex = Math.min(target.occurrenceIndex ?? 0, Math.max(0, ranges.length - 1));
+      const range = ranges[rangeIndex] ?? null;
+      if (!range) return;
+      setFlowChatSearchHighlight(range, ranges.filter((_, index) => index !== rangeIndex));
+      const rangeRect = range.getBoundingClientRect();
+      const scrollerRect = scroller.getBoundingClientRect();
+      viewportOwner.write({
+        owner: 'one-shot-navigation',
+        holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
+        topPx: Math.max(
+          0,
+          Math.min(
+            scroller.scrollHeight - scroller.clientHeight,
+            scroller.scrollTop + rangeRect.top - scrollerRect.top -
+              Math.max(0, (scroller.clientHeight - rangeRect.height) / 2),
+          ),
+        ),
+      });
+    };
+    requestAnimationFrame(resolve);
+  }, [clearSearchMatch, exitFollowOutput, viewportOwner, virtualizer]);
+
+  useEffect(() => () => setFlowChatSearchHighlight(null), []);
+
+  const requestHistoryBoundary = useCallback((direction: SessionHistoryWindowDirection) => {
+    /*
+     * Two refusals, both asking whether the ask describes the reader.
+     *
+     * While the follow rule owns the viewport, the position the ask was derived
+     * from is our own placement — as true of a history window being opened as
+     * of the live tail, so the test is ownership and not which presentation is
+     * on screen. Ownership ends the moment the reader scrolls, which is exactly
+     * when the ask starts meaning something. Measured on session open: five
+     * pages landed in 890ms, each one displacing the viewport and so requesting
+     * the next, until history ran out.
+     *
+     * The second is the arming latch; see `boundaryArmedRef`.
+     *
+     * Both are invisible when they fire: the boundary status stays idle, which
+     * is also what "there is no more history" looks like. The faults have been
+     * at either extreme — pages arriving in a chain because neither refusal
+     * fired, and a boundary that never pages because the latch stayed shut — so
+     * the reason is recorded rather than inferred from what did not happen.
+     */
+    if (isFollowingOutputNow()) {
+      traceViewportRepeating(`paging|${direction}|following`, {
+        location: 'historyPaging.refused',
+        message: 'the boundary was reached by our own placement, not by the reader',
+        data: () => ({ direction, reason: 'follow-output-owns-the-viewport' }),
+      });
       return;
     }
-
-    const shouldProtectTransition = Boolean(
-      previousState &&
-      initialHistoryTransitionState &&
-      previousState.sessionId === initialHistoryTransitionState.sessionId &&
-      previousState.key !== initialHistoryTransitionState.key &&
-      (
-        previousState.usesInitialHistoryRenderBudget ||
-        initialHistoryTransitionState.usesInitialHistoryRenderBudget ||
-        previousState.isPartial !== initialHistoryTransitionState.isPartial ||
-        previousState.contextRestoreState !== initialHistoryTransitionState.contextRestoreState
-      )
-    );
-
+    if (!boundaryArmedRef.current[direction]) {
+      traceViewportRepeating(`paging|${direction}|unarmed`, {
+        location: 'historyPaging.refused',
+        message: 'the boundary has not been left since the last page',
+        data: () => ({ direction, reason: 'not-rearmed' }),
+      });
+      return;
+    }
+    const latchedExhausted = exhaustedBoundaryRef.current[direction];
     if (
-      !shouldProtectTransition ||
-      !initialHistoryTransitionState ||
-      !activeSessionId ||
-      historyProjectionHandoffRef.current?.sessionId === activeSessionId
+      !onHistoryWindowBoundaryIntent ||
+      boundaryRequestRef.current[direction] ||
+      latchedExhausted
     ) {
+      /*
+       * The user has reached the head of the loaded window and we are declining
+       * to fetch more. That is correct once history really is exhausted, and a
+       * silent data loss when it is not — the boundary status stays idle either
+       * way, so the transcript looks like it simply has no earlier Turns.
+       */
+      const session = activeSessionRef.current;
+      if (latchedExhausted && session?.sessionId && session.isPartial === true) {
+        warnHistoryPagingRefusedWithPendingTurns(session.sessionId, {
+          direction,
+          reason: 'latched-exhausted-while-partial',
+          isPartial: true,
+          latchedExhausted: true,
+          loadedTurnCount: session.dialogTurns.length,
+          totalTurnCount: session.totalTurnCount ?? 0,
+        });
+      }
       return;
     }
-
-    const snapshot = latestVisibleHistoryTailSnapshotRef.current;
-    if (!snapshot || snapshot.sessionId !== activeSessionId || snapshot.items.length === 0) {
+    // Disarmed for as long as this page is the reason the window sits at the
+    // boundary. Only the window moving off it arms the direction again.
+    boundaryArmedRef.current[direction] = false;
+    const request = Promise.resolve(onHistoryWindowBoundaryIntent(direction)).then(
+      normalizeBoundaryResult,
+    ).then(result => {
+      if (result === 'exhausted') {
+        exhaustedBoundaryRef.current[direction] = true;
+      } else if (result === 'applied') {
+        exhaustedBoundaryRef.current[direction] = false;
+      }
+      // Nothing was prepended, so the window sitting at the boundary is still
+      // the reader's own position rather than a consequence of this page.
+      if (result !== 'applied') {
+        boundaryArmedRef.current[direction] = true;
+      }
+    }).finally(() => {
+      boundaryRequestRef.current[direction] = null;
+    });
+    boundaryRequestRef.current[direction] = request;
+  }, [isFollowingOutputNow, onHistoryWindowBoundaryIntent]);
+
+  /**
+   * Whether either end of the loaded transcript is on screen, and act on it.
+   *
+   * Reads live geometry rather than the rendered window. The window carries
+   * overscan and, for a transcript short enough to render whole, reports the
+   * first and last item as present wherever the viewport is — which makes it
+   * mute on the only question being asked. Measured: a 21-item transcript
+   * rendered 21 rows from index 0 no matter where the reader stood, so the
+   * head boundary read as reached forever and the tail never re-armed.
+   *
+   * A scroll moves the viewport across the window without changing it, so this
+   * has to be a callback that both the scroll handler and the item-change
+   * effect can invoke, rather than a value either of them derives.
+   */
+  const readHistoryBoundaryProximity = useCallback((): HistoryBoundaryProximity | null => {
+    const scroller = scrollerElementRef.current;
+    if (!scroller) return null;
+    const head = virtualizer.getItemBounds(0);
+    const tail = virtualizer.getItemBounds(virtualItems.length - 1);
+    if (!head || !tail) return null;
+    return {
+      aboveViewportPx: scroller.scrollTop - head.startPx,
+      belowViewportPx: tail.endPx - (scroller.scrollTop + scroller.clientHeight),
+      viewportHeightPx: scroller.clientHeight,
+    };
+  }, [virtualItems.length, virtualizer]);
+
+  const evaluateHistoryBoundaries = useCallback(() => {
+    const range = virtualizer.getVisibleItemRange();
+    if (!range) {
+      /*
+       * No row intersects the viewport, so there is no reader position to
+       * derive a boundary from. That is a real state and not a degenerate one:
+       * a transcript shorter than the viewport puts the whole scroll range
+       * inside the reserved blank, and the bottom of it shows no Turn at all.
+       *
+       * Traced because the silence was the hard part to read. A session stuck
+       * here logged nothing for seven seconds while the reader kept scrolling,
+       * and the only way to tell "nobody asked" from "the ask was refused" was
+       * the absence of an anchor capture.
+       */
+      traceViewportRepeating('paging|no-visible-range', {
+        location: 'historyPaging.noVisibleRange',
+        message: 'no row is in the viewport, so there is no boundary to judge',
+        data: () => ({
+          itemCount: virtualItems.length,
+          scrollTopPx: roundViewportPx(scrollerElementRef.current?.scrollTop ?? 0),
+        }),
+      });
       return;
     }
-
-    const handoff: HistoryProjectionHandoffSnapshot = {
-      ...snapshot,
-      reason: 'initial-history-content-transition',
-      createdAtMs: performance.now(),
-      targetTurnId: latestTurnId,
-      footerHeightPx,
-    };
-
-    historyProjectionHandoffRef.current = handoff;
-    setHistoryProjectionHandoff(handoff);
-    startupTrace.markPhase('flowchat_history_projection_handoff_activated', {
-      sessionId: handoff.sessionId,
-      reason: handoff.reason,
-      previousItemCount: handoff.items.length,
-      nextItemCount: virtualItems.length,
-      previousInitialHistoryBudget: previousState?.usesInitialHistoryRenderBudget ?? false,
-      nextInitialHistoryBudget: initialHistoryTransitionState.usesInitialHistoryRenderBudget,
-    });
-    scheduleHistoryProjectionHandoffRelease(2);
+    /*
+     * Two answers, and the latch takes the narrower one.
+     *
+     * `reached` is where the reader actually is; `asking` adds the screenful of
+     * lead. Arming from `asking` walls the latch shut, because a boundary that
+     * counts as reached from a screen away is one the reader is never off:
+     * measured, one page fetched and then `not-rearmed` for the next six
+     * minutes while they kept scrolling into it.
+     *
+     * Re-arming and asking in the same pass is the point rather than an
+     * oversight — "the reader is not on the boundary, and is a screen from it"
+     * is exactly the state the lead exists to serve.
+     */
+    const reached = new Set(historyBoundariesReached(
+      range,
+      virtualItems.length,
+      presentationMode,
+    ));
+    const asking = new Set(historyBoundariesForVisibleRange(
+      range,
+      virtualItems.length,
+      presentationMode,
+      readHistoryBoundaryProximity(),
+    ));
+    for (const direction of HISTORY_WINDOW_DIRECTIONS) {
+      // Off the boundary: whatever the last page added has been absorbed, and
+      // arriving there again will be the reader's own doing.
+      if (!reached.has(direction)) {
+        boundaryArmedRef.current[direction] = true;
+      }
+      if (asking.has(direction)) requestHistoryBoundary(direction);
+    }
   }, [
-    activeSessionId,
-    footerHeightPx,
-    initialHistoryTransitionState,
-    latestTurnId,
     presentationMode,
-    scheduleHistoryProjectionHandoffRelease,
+    readHistoryBoundaryProximity,
+    requestHistoryBoundary,
     virtualItems.length,
+    virtualizer,
   ]);
-  useLayoutEffect(() => {
-    if (!activeSessionId || !latestTurnId || virtualItems.length === 0) {
-      return;
-    }
-
-    if (!isTurnTextRenderedInViewportOutsideHandoff(latestTurnId)) {
-      return;
-    }
 
-    const scroller = scrollerElementRef.current;
-    if (!scroller) {
-      return;
-    }
+  evaluateHistoryBoundariesRef.current = evaluateHistoryBoundaries;
 
-    const tailStartIndex = Math.max(0, virtualItems.length - SESSION_OPEN_HANDOFF_ITEM_BUDGET);
-    latestVisibleHistoryTailSnapshotRef.current = {
-      sessionId: activeSessionId,
-      reason: 'latest-visible-history-tail',
-      createdAtMs: performance.now(),
-      items: virtualItems.slice(tailStartIndex),
-      mode: 'bottom-tail',
-      targetTurnId: latestTurnId,
-      footerHeightPx,
-    };
+  useEffect(() => {
+    scheduleVisibleTurnInfoUpdate();
+    evaluateHistoryBoundaries();
   }, [
-    activeSessionId,
-    footerHeightPx,
-    isTurnTextRenderedInViewportOutsideHandoff,
-    latestTurnId,
-    virtualItems,
+    evaluateHistoryBoundaries,
+    /*
+     * Follow-output releasing the viewport is a reason to ask again, not only a
+     * reason the last ask was declined.
+     */
+    isFollowingOutput,
+    scheduleVisibleTurnInfoUpdate,
+    virtualizer.rows,
   ]);
-  const initialHistoryRenderWindow = React.useMemo(() => {
-    return selectInitialHistoryRenderWindow(virtualItems);
-  }, [virtualItems]);
-  const initialHistoryRenderKey = [
-    activeSessionId ?? 'no-active-session',
-    latestTurnId ?? 'no-latest-turn',
-    virtualItems.length,
-    initialHistoryRenderWindow.startIndex,
-  ].join(':');
-  const initialHistorySnapshot = React.useMemo<HistoryProjectionHandoffSnapshot | null>(() => {
-    if (
-      !initialHistorySnapshotActive
-      || !useInitialHistoryRenderBudget
-      || !activeSessionId
-      || !latestTurnId
-      || initialHistoryRenderWindow.items.length === 0
-    ) {
-      return null;
-    }
 
-    return {
-      sessionId: activeSessionId,
-      reason: 'initial-history-snapshot',
-      createdAtMs: initialHistorySnapshotCreatedAtMsRef.current,
-      items: initialHistoryRenderWindow.items,
-      mode: 'bottom-tail',
-      targetTurnId: preparedHistoryTurnPinRef.current?.turnId ?? latestTurnId,
-      footerHeightPx,
-    };
-  }, [
-    activeSessionId,
-    footerHeightPx,
-    initialHistoryRenderWindow.items,
-    initialHistorySnapshotActive,
-    latestTurnId,
-    useInitialHistoryRenderBudget,
-  ]);
   useLayoutEffect(() => {
-    if (!initialHistorySnapshot) {
-      if (initialHistorySnapshotActive && !useInitialHistoryRenderBudget) {
-        setInitialHistorySnapshotActive(false);
-      }
-      return;
-    }
+    scheduleVisibleTurnInfoUpdate();
+  }, [scheduleVisibleTurnInfoUpdate, virtualItems]);
 
-    historyProjectionHandoffRef.current = initialHistorySnapshot;
-    setHistoryProjectionHandoff(initialHistorySnapshot);
-    setInitialHistorySnapshotActive(false);
-    if (markedInitialHistoryRenderWindowKeyRef.current !== initialHistoryRenderKey) {
-      markedInitialHistoryRenderWindowKeyRef.current = initialHistoryRenderKey;
-      startupTrace.markPhase('flowchat_initial_history_snapshot_activated', {
-        sessionId: activeSessionId,
-        startIndex: initialHistoryRenderWindow.startIndex,
-        renderedItemCount: initialHistoryRenderWindow.items.length,
-        totalItemCount: virtualItems.length,
-      });
+  useEffect(() => {
+    if (userMessageItems.length === 0) {
+      useModernFlowChatStore.getState().setVisibleTurnInfo(null);
     }
-    scheduleHistoryProjectionHandoffRelease(3);
-  }, [
-    activeSessionId,
-    initialHistoryRenderKey,
-    initialHistoryRenderWindow.items.length,
-    initialHistoryRenderWindow.startIndex,
-    initialHistorySnapshot,
-    initialHistorySnapshotActive,
-    scheduleHistoryProjectionHandoffRelease,
-    useInitialHistoryRenderBudget,
-    virtualItems.length,
-  ]);
-  const sessionOpenProjectionHandoff = React.useMemo<HistoryProjectionHandoffSnapshot | null>(() => {
-    const previousActiveSessionId = previousActiveSessionIdForOpenHandoffRef.current;
-    const isSessionSwitch = (
-      previousActiveSessionId !== undefined &&
-      previousActiveSessionId !== activeSessionId
-    );
+  }, [userMessageItems.length]);
 
-    if (
-      !activeSessionId ||
-      !isSessionSwitch ||
-      activeSession?.historyState !== 'ready' ||
-      activeSession?.isPartial === true ||
-      !latestTurnId ||
-      virtualItems.length < SESSION_OPEN_HANDOFF_ITEM_BUDGET ||
-      sessionOpenHandoffSessionIdRef.current === activeSessionId ||
-      historyProjectionHandoff?.sessionId === activeSessionId
-    ) {
-      return null;
+  const handleScrollerRef = useCallback((element: HTMLElement | null) => {
+    const scroller = element;
+    scrollerElementRef.current = scroller;
+    setScrollerElement(scroller);
+    if (scroller) {
+      setViewportHeightPx(scroller.clientHeight);
+      // Seed the box so the observer's first callback is not read as a resize.
+      observedViewportBoxRef.current = {
+        width: scroller.clientWidth,
+        height: scroller.clientHeight,
+      };
     }
+  }, []);
 
-    const budgetStartIndex = Math.max(0, virtualItems.length - SESSION_OPEN_HANDOFF_ITEM_BUDGET);
-    const latestStartIndex = Math.max(0, Math.min(latestUserMessageIndex, virtualItems.length - 1));
-    const startIndex = Math.min(budgetStartIndex, latestStartIndex);
-    const items = virtualItems.slice(startIndex);
-    if (items.length === 0) {
-      return null;
-    }
+  const scrollToPhysicalBottom = useCallback(() => {
+    enterFollowOutput('jump-to-latest');
+    updateIsAtBottom();
+  }, [enterFollowOutput, updateIsAtBottom]);
 
-    return {
-      sessionId: activeSessionId,
-      reason: 'session-open',
-      createdAtMs: performance.now(),
-      items,
-      mode: 'bottom-tail',
-      targetTurnId: latestTurnId,
-      footerHeightPx,
-    };
-  }, [
-    activeSession?.historyState,
-    activeSession?.isPartial,
-    activeSessionId,
-    footerHeightPx,
-    historyProjectionHandoff?.sessionId,
-    latestTurnId,
-    latestUserMessageIndex,
-    virtualItems,
+  const scrollToLatestEndPosition = useCallback(() => {
+    onUserScrollIntent?.();
+    enterFollowOutput('jump-to-latest');
+    // Entering follow can leave the viewport exactly where it is, which
+    // produces no scroll event to recompute the band from.
+    updateIsAtBottom();
+  }, [enterFollowOutput, onUserScrollIntent, updateIsAtBottom]);
+
+  useImperativeHandle(ref, () => ({
+    scrollToTurn,
+    scrollToIndex,
+    scrollToSearchMatch,
+    clearSearchMatch,
+    scrollToPhysicalBottom,
+    scrollToTurnEnd,
+    isTurnRenderedInViewport,
+    isTurnTextRenderedInViewport,
+    scrollToLatestEndPosition,
+    navigateToTurn,
+    navigateToTurnWithStatus,
+    prepareTurnNavigation,
+    focusFlowItem,
+  }), [
+    clearSearchMatch,
+    focusFlowItem,
+    isTurnRenderedInViewport,
+    isTurnTextRenderedInViewport,
+    navigateToTurn,
+    navigateToTurnWithStatus,
+    prepareTurnNavigation,
+    scrollToIndex,
+    scrollToLatestEndPosition,
+    scrollToPhysicalBottom,
+    scrollToSearchMatch,
+    scrollToTurn,
+    scrollToTurnEnd,
   ]);
-  useLayoutEffect(() => {
-    if (
-      !sessionOpenProjectionHandoff ||
-      sessionOpenHandoffSessionIdRef.current === sessionOpenProjectionHandoff.sessionId
-    ) {
-      return;
-    }
 
-    historyProjectionHandoffRef.current = sessionOpenProjectionHandoff;
-    sessionOpenHandoffSessionIdRef.current = sessionOpenProjectionHandoff.sessionId;
-    setHistoryProjectionHandoff(sessionOpenProjectionHandoff);
-    startupTrace.markPhase('flowchat_history_projection_handoff_activated', {
-      sessionId: sessionOpenProjectionHandoff.sessionId,
-      reason: sessionOpenProjectionHandoff.reason,
-      previousItemCount: 0,
-      nextItemCount: virtualItems.length,
+  const visibleTurnInfo = useModernFlowChatStore(state => state.visibleTurnInfo);
+  const handleJumpToCurrentTurn = useCallback(() => {
+    if (visibleTurnInfo?.turnId) {
+      navigateToTurn(visibleTurnInfo.turnId, { behavior: 'smooth' });
+    }
+  }, [navigateToTurn, visibleTurnInfo?.turnId]);
+  const { shouldShowButton: shouldShowTurnHeaderButton, handleClick: handleTurnHeaderClick } =
+    useScrollToTurnHeader({
+      scrollerRef: scrollerElementRef,
+      currentTurnId: visibleTurnInfo?.turnId ?? null,
+      currentTurnIndex: visibleTurnInfo?.turnIndex ?? 0,
+      visibleTurnInfo,
+      onJumpToCurrentTurn: handleJumpToCurrentTurn,
     });
-    // Use a longer initial delay (5 frames).  rangeChanged accelerations
-    // have been removed so the handoff is only released once the Virtuoso
-    // has had enough time to measure and position items, preventing a
-    // blank viewport ("white screen") on session switches.
-    scheduleHistoryProjectionHandoffRelease(5);
-  }, [
-    scheduleHistoryProjectionHandoffRelease,
-    sessionOpenProjectionHandoff,
-    virtualItems.length,
-  ]);
-  useLayoutEffect(() => {
-    previousActiveSessionIdForOpenHandoffRef.current = activeSessionId;
-  }, [activeSessionId]);
-  const activeHistoryProjectionHandoff = presentationMode === 'history-window'
-    ? null
-    : activeSessionHistoryProjectionHandoff(historyProjectionHandoff, activeSessionId) ??
-      activeSessionHistoryProjectionHandoff(sessionOpenProjectionHandoff, activeSessionId) ??
-      activeSessionHistoryProjectionHandoff(initialHistorySnapshot, activeSessionId);
-  const hasCompactHistoricalProjection = virtualItems.length >= 6 && virtualItems
-    .slice(-16)
-    .every(item =>
-      item.type === 'user-message' ||
-      item.type === 'user-steering-message' ||
-      item.type === 'turn-completion-notice' ||
-      item.type === 'turn-failure-notice' ||
-      item.type === 'explore-group'
-    );
-  const hasInitialHistoryModelRoundProjection =
-    useInitialHistoryRenderBudget &&
-    virtualItems.slice(-16).some(item => item.type === 'model-round');
-  const defaultItemHeight = getVirtualMessageDefaultItemHeight({
-    isHistorical: activeSession?.isHistorical === true,
-    hasCompactHistoricalProjection,
-    hasInitialHistoryModelRoundProjection,
-  });
-  const initialHistoryHeightEstimates = React.useMemo(
-    () => useInitialHistoryRenderBudget
-      ? virtualItems.map(estimateVirtualMessageItemHeight)
-      : undefined,
-    [useInitialHistoryRenderBudget, virtualItems],
-  );
-  const previousHistoryBoundaryStatusNode = React.useMemo(
-    () => previousHistoryBoundaryStatus?.sessionId === activeSessionId && (
-      previousHistoryBoundaryStatus.state === 'not-ready' || !historyPagingActive
-    ) ? (
-      <div
-        className="virtual-message-list__history-boundary-status"
-        data-history-boundary-status={previousHistoryBoundaryStatus.state}
-        role="status"
-        aria-live="polite"
-       data-bf-component="virtual-message-list" data-bf-part="boundaryStatus" data-bf-state={previousHistoryBoundaryStatus.state === 'preparing' ? 'preparing' : 'unavailable'}>
-        {previousHistoryBoundaryStatus.state === 'preparing'
-          ? t('historyState.preparingOlderHistory')
-          : t('historyState.olderHistoryNotReady')}
-      </div>
-    ) : null,
-    [activeSessionId, historyPagingActive, previousHistoryBoundaryStatus, t],
-  );
-  const historyPagingSentinelNode = React.useMemo(
-    () => (
-      presentationMode === 'tail'
-      && historyPagingActive
-      && activeSession?.isPartial === true
-    ) ? (
-      <FlowChatHistoryPagingSentinel
-        state={historyPagingLoading ? 'loading' : 'idle'}
-        label={t('historyState.preparingOlderHistory')}
-      />
-    ) : null,
-    [activeSession?.isPartial, historyPagingActive, historyPagingLoading, presentationMode, t],
-  );
-  const previousHistoryWindowSentinelNode = React.useMemo(() => {
-    if (presentationMode !== 'history-window' || historyBoundaryState.before === 'idle') {
-      return null;
-    }
-    return (
+  const previousHistoryBoundaryStatusNode = useMemo(() => (
+    historyBoundaryState.before !== 'idle' ? (
       <FlowChatHistoryPagingSentinel
         state={historyBoundaryState.before}
         label={historyBoundaryState.before === 'error'
           ? t('historyState.olderHistoryNotReady')
           : t('historyState.preparingOlderHistory')}
       />
-    );
-  }, [historyBoundaryState.before, presentationMode, t]);
-  const nextHistoryWindowSentinelNode = React.useMemo(() => {
-    if (presentationMode !== 'history-window' || historyBoundaryState.after === 'idle') {
-      return null;
-    }
-    return (
+    ) : null
+  ), [historyBoundaryState.before, t]);
+  const nextHistoryBoundaryStatusNode = useMemo(() => (
+    presentationMode === 'history-window' && historyBoundaryState.after !== 'idle' ? (
       <FlowChatHistoryPagingSentinel
         state={historyBoundaryState.after}
-        label={t('historyState.loadingDescription')}
+        /*
+         * By state, like the boundary above it. One label for both read as
+         * history being prepared forever whenever a page failed, which is the
+         * one case where the reader is owed the opposite of "hold on".
+         */
+        label={historyBoundaryState.after === 'error'
+          ? t('historyState.newerHistoryNotReady')
+          : t('historyState.loadingDescription')}
       />
-    );
-  }, [historyBoundaryState.after, presentationMode, t]);
-  const virtuosoContext = React.useMemo<FlowChatVirtuosoContext>(() => ({
-    // Reservation pixels are applied imperatively to the stable Footer node.
-    // Keeping them out of context prevents a measurement-sensitive Virtuoso
-    // render for every compensation update.
-    footerRef: handleFooterElementRef,
-    previousHistoryBoundaryStatusNode: <>
-      {previousHistoryWindowSentinelNode}
-      {historyPagingSentinelNode}
-      {previousHistoryBoundaryStatusNode}
-    </>,
-    nextHistoryBoundaryStatusNode: nextHistoryWindowSentinelNode,
-    runtimeStatusSessionId: activeSessionId,
-  }), [
-    activeSessionId,
-    handleFooterElementRef,
-    historyPagingSentinelNode,
-    nextHistoryWindowSentinelNode,
-    previousHistoryWindowSentinelNode,
-    previousHistoryBoundaryStatusNode,
-  ]);
-  const computeVirtuosoItemKey = useCallback((_: number, item: VirtualItem) => (
-    `${activeSessionId ?? 'no-active-session'}:${getVirtualItemStableKey(item)}`
-  ), [activeSessionId]);
-  const renderVirtuosoItem = useCallback((index: number, item: VirtualItem) => (
-    <VirtualItemRenderer
-      item={item}
-      index={index - virtuosoFirstItemIndex}
-    />
-  ), [virtuosoFirstItemIndex]);
-  // ── Render ────────────────────────────────────────────────────────────
+    ) : null
+  ), [historyBoundaryState.after, presentationMode, t]);
+
   if (virtualItems.length === 0) {
     return (
       <div
@@ -7370,96 +1868,60 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       data-presentation-mode={presentationMode}
       data-viewport-mode={viewportMode}
       data-streaming-output={isStreamingOutput ? 'true' : 'false'}
+      data-open-viewport-settled={isOpenViewportSettled ? 'true' : 'false'}
     >
-      <Virtuoso
-        key={activeSessionId ?? 'no-active-session'}
-        ref={virtuosoRef}
-        data={virtualItems}
-        computeItemKey={computeVirtuosoItemKey}
-        itemContent={renderVirtuosoItem}
-        followOutput={false}
-
-        alignToBottom={false}
-        firstItemIndex={virtuosoFirstItemIndex}
-        // New mounts start near the latest user turn to avoid flashing older
-        // content before sticky pin logic can finish.
-        initialTopMostItemIndex={initialTopMostItemIndex}
-        overscan={FLOW_CHAT_VIRTUOSO_OVERSCAN}
-
-        atBottomThreshold={50}
-        atBottomStateChange={handleAtBottomStateChange}
-
-        rangeChanged={handleRangeChanged}
-
-        // Historical sessions often restore into compact user/explore rows.
-        // Keep live sessions on the legacy estimate because active assistant
-        // output can be much taller while streaming.
-        defaultItemHeight={defaultItemHeight}
-        heightEstimates={initialHistoryHeightEstimates}
-
-        increaseViewportBy={virtuosoViewportIncrease}
-
-        scrollerRef={handleScrollerRef}
-        context={virtuosoContext}
-        components={FLOW_CHAT_VIRTUOSO_COMPONENTS}
-      />
-
-      {activeHistoryProjectionHandoff ? (
+      <div
+        ref={handleScrollerRef}
+        className="virtual-message-list__scroller"
+        data-flowchat-scroller="true"
+        data-testid="flowchat-scroller"
+      >
+        <FlowChatListHeader
+          ref={headerElementRef}
+          previousHistoryBoundaryStatusNode={previousHistoryBoundaryStatusNode}
+        />
+        {/*
+          The window of rendered items, with the rest of the transcript standing
+          in as padding above and below. Items stay in normal flow so that one
+          growing reflows the ones under it in the same layout pass.
+        */}
         <div
-          className="virtual-message-list__projection-handoff-overlay"
+          className="virtual-message-list__items"
           data-bf-component="virtual-message-list"
-          data-bf-part="handoffOverlay"
-          data-history-projection-handoff="true"
-          data-initial-history-snapshot={
-            activeHistoryProjectionHandoff.reason === 'initial-history-snapshot' ? 'true' : 'false'
-          }
-          data-session-id={activeHistoryProjectionHandoff.sessionId}
-          data-target-turn-id={activeHistoryProjectionHandoff.targetTurnId ?? ''}
-          aria-hidden="true"
+          data-bf-part="items"
+          data-testid="flowchat-item-list"
+          style={{
+            paddingTop: `${virtualizer.paddingTopPx}px`,
+            paddingBottom: `${virtualizer.paddingBottomPx}px`,
+          }}
         >
-          <div
-            className="virtual-message-list__projection-handoff-content virtual-message-list__projection-handoff-content--bottom"
-            data-bf-component="virtual-message-list"
-            data-bf-part="handoffContent"
-          >
-            <div className="message-list-header" data-bf-component="virtual-message-list" data-bf-part="header" />
-            <div className="virtual-message-list__projection-handoff-items" data-bf-component="virtual-message-list" data-bf-part="items">
-              {activeHistoryProjectionHandoff.items.map((item, index) => (
-                <VirtualItemRenderer
-                  key={`history-projection-handoff:${activeHistoryProjectionHandoff.sessionId}:${getVirtualItemStableKey(item)}`}
-                  item={item}
-                  index={index}
-                />
-              ))}
-            </div>
-            <div
-              className="message-list-footer"
-              data-bf-component="virtual-message-list"
-              data-bf-part="footer"
-              style={{
-                height: `${activeHistoryProjectionHandoff.footerHeightPx}px`,
-                minHeight: `${activeHistoryProjectionHandoff.footerHeightPx}px`,
-              }}
+          {virtualizer.rows.map(row => (
+            <VirtualItemRenderer
+              key={row.key}
+              item={virtualItems[row.index]}
+              index={row.index}
+              measureRef={virtualizer.measureRowElement}
             />
-          </div>
+          ))}
         </div>
-      ) : null}
+        <FlowChatListFooter
+          bottomLayoutInsetPx={bottomLayoutInsetPx}
+          tailSpacerPx={tailSpacerPx}
+          nextHistoryBoundaryStatusNode={nextHistoryBoundaryStatusNode}
+          runtimeStatusSessionId={activeSessionId}
+        />
+      </div>
 
       <ScrollToTurnHeaderButton
         visible={shouldShowTurnHeaderButton}
         onClick={handleTurnHeaderClick}
         turnLabel={visibleTurnInfo ? `Turn ${visibleTurnInfo.turnIndex}` : undefined}
       />
-
-      <StickyTaskIndicator
-        visible={!!visibleTaskInfo}
-        taskInfo={visibleTaskInfo}
-        onClick={scrollToTask}
-      />
-
       <ScrollToLatestBar
         visible={(viewportMode === 'history-reading' || !isAtBottom) && virtualItems.length > 0}
-        onClick={handleScrollToLatestRequest}
+        onClick={viewportMode === 'history-reading' && onRequestJumpToLatest
+          ? onRequestJumpToLatest
+          : scrollToLatestEndPosition}
         isInputActive={isInputActive}
         isInputExpanded={isInputExpanded}
         inputHeight={inputHeight}
@@ -7472,9 +1934,7 @@ VirtualMessageListSession.displayName = 'VirtualMessageListSession';
 
 export const VirtualMessageList = forwardRef<VirtualMessageListRef, VirtualMessageListProps>((props, ref) => {
   const activeSession = useActiveSession();
-  const sessionKey = activeSession?.sessionId ?? 'no-active-session';
-
-  return <VirtualMessageListSession key={sessionKey} ref={ref} {...props} />;
+  return <VirtualMessageListSession key={activeSession?.sessionId ?? 'no-active-session'} ref={ref} {...props} />;
 });
 
 VirtualMessageList.displayName = 'VirtualMessageList';
diff --git a/src/web-ui/src/flow_chat/components/modern/appearance.ts b/src/web-ui/src/flow_chat/components/modern/appearance.ts
index 80e2c6af15..2245580aa5 100644
--- a/src/web-ui/src/flow_chat/components/modern/appearance.ts
+++ b/src/web-ui/src/flow_chat/components/modern/appearance.ts
@@ -10,8 +10,7 @@ export const virtualMessageListAppearanceDescriptor: AppearanceSurfaceDescriptor
     { id: 'boundaryStatus' },
     { id: 'items' },
     { id: 'footer' },
-    { id: 'handoffOverlay' },
-    { id: 'handoffContent' },
+    { id: 'tailSpacer' },
   ],
   states: [
     { id: 'empty', selector: { kind: 'self', suffix: '[data-bf-state~="empty"]' } },
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.test.ts
index 4e0a7c1a10..822e246e0b 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.test.ts
@@ -1,15 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
 import {
-  FLOWCHAT_AUTO_COLLAPSE_SETTLE_FRAMES,
   FLOWCHAT_COLLAPSE_DURATION_MS,
-  FLOWCHAT_COLLAPSE_INTENT_TTL_MS,
+  FLOWCHAT_COLLAPSE_EASING,
 } from './flowChatCollapseMotion';
 
 describe('flowChatCollapseMotion', () => {
-  it('keeps intent TTL above the animated collapse window', () => {
+  it('keeps automatic and manual collapse motion aligned', () => {
     expect(FLOWCHAT_COLLAPSE_DURATION_MS).toBe(300);
-    expect(FLOWCHAT_AUTO_COLLAPSE_SETTLE_FRAMES).toBeGreaterThan(0);
-    expect(FLOWCHAT_COLLAPSE_INTENT_TTL_MS).toBeGreaterThan(FLOWCHAT_COLLAPSE_DURATION_MS);
+    expect(FLOWCHAT_COLLAPSE_EASING).toContain('cubic-bezier');
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.ts b/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.ts
index 64a640dadf..418e2c2035 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatCollapseMotion.ts
@@ -1,16 +1,9 @@
 /**
  * Shared FlowChat collapse / expand motion contract.
  *
- * Auto-collapse and manual toggles share one duration so VirtualMessageList
- * collapse-intent protection can cover the full animated height change.
+ * Auto-collapse and manual toggles share one local animation duration.
  */
 
 export const FLOWCHAT_COLLAPSE_DURATION_MS = 300;
 
 export const FLOWCHAT_COLLAPSE_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
-
-/** Extra rAF frames after the CSS duration before finalizing an auto collapse intent. */
-export const FLOWCHAT_AUTO_COLLAPSE_SETTLE_FRAMES = 4;
-
-/** Hard backup TTL; must stay above duration + settle margin. */
-export const FLOWCHAT_COLLAPSE_INTENT_TTL_MS = 1000;
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatFocusTarget.ts b/src/web-ui/src/flow_chat/components/modern/flowChatFocusTarget.ts
index d2455687df..be6d5b9b9e 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatFocusTarget.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatFocusTarget.ts
@@ -13,7 +13,7 @@ export interface ResolvedFocusTarget {
   resolvedTurnIndex?: number;
   focusItemId?: string;
   expandExploreGroupId?: string;
-  preferPinnedTurnNavigation: boolean;
+  preferTurnNavigation: boolean;
 }
 
 export function resolveFlowChatFocusTarget(
@@ -74,6 +74,6 @@ export function resolveFlowChatFocusTarget(
     resolvedTurnIndex,
     focusItemId: itemId,
     expandExploreGroupId,
-    preferPinnedTurnNavigation: source === 'btw-back',
+    preferTurnNavigation: source === 'btw-back',
   };
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.test.ts
new file mode 100644
index 0000000000..cb690173b1
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.test.ts
@@ -0,0 +1,174 @@
+import { describe, expect, it } from 'vitest';
+import {
+  HISTORY_BOUNDARY_LEAD_SCREENS,
+  historyBoundariesForVisibleRange,
+  historyBoundariesReached,
+} from './flowChatHistoryBoundary';
+
+const ITEM_COUNT = 40;
+const VIEWPORT_PX = 600;
+const LEAD_PX = VIEWPORT_PX * HISTORY_BOUNDARY_LEAD_SCREENS;
+
+/** Far enough from both ends that only the argument under test can decide. */
+function proximity(overrides: { aboveViewportPx?: number; belowViewportPx?: number }) {
+  return {
+    aboveViewportPx: LEAD_PX * 10,
+    belowViewportPx: LEAD_PX * 10,
+    viewportHeightPx: VIEWPORT_PX,
+    ...overrides,
+  };
+}
+
+describe('historyBoundariesForVisibleRange', () => {
+  it('asks for nothing from the middle of the window', () => {
+    expect(historyBoundariesForVisibleRange(
+      { startIndex: 12, endIndex: 20 },
+      ITEM_COUNT,
+      'history-window',
+    )).toEqual([]);
+  });
+
+  it('reaches for older Turns before the leading item is alone on screen', () => {
+    // One item of slack: the leading item is a user message a couple of dozen
+    // pixels tall, so waiting for index 0 would start the fetch after the blank.
+    expect(historyBoundariesForVisibleRange({ startIndex: 1, endIndex: 9 }, ITEM_COUNT, 'tail'))
+      .toEqual(['before']);
+    expect(historyBoundariesForVisibleRange({ startIndex: 2, endIndex: 9 }, ITEM_COUNT, 'tail'))
+      .toEqual([]);
+  });
+
+  it('reaches for newer Turns near the end of a history window', () => {
+    expect(historyBoundariesForVisibleRange(
+      { startIndex: 30, endIndex: ITEM_COUNT - 2 },
+      ITEM_COUNT,
+      'history-window',
+    )).toEqual(['after']);
+    expect(historyBoundariesForVisibleRange(
+      { startIndex: 30, endIndex: ITEM_COUNT - 3 },
+      ITEM_COUNT,
+      'history-window',
+    )).toEqual([]);
+  });
+
+  it('never reaches past the end of a tail presentation', () => {
+    // A tail is already anchored to the newest Turn: there is nothing after it.
+    expect(historyBoundariesForVisibleRange(
+      { startIndex: 30, endIndex: ITEM_COUNT + 4 },
+      ITEM_COUNT,
+      'tail',
+    )).toEqual([]);
+  });
+
+  it('asks in both directions when the whole window fits on screen', () => {
+    expect(historyBoundariesForVisibleRange(
+      { startIndex: 0, endIndex: 5 },
+      6,
+      'history-window',
+    )).toEqual(['before', 'after']);
+  });
+
+  it('asks for older Turns first, so a reader scrolling up is served first', () => {
+    const [first] = historyBoundariesForVisibleRange(
+      { startIndex: 0, endIndex: 5 },
+      6,
+      'history-window',
+    );
+    expect(first).toBe('before');
+  });
+
+  describe('the lead time', () => {
+    it('reaches back a screenful before the head is on screen at all', () => {
+      // The whole point: the junction happens where the reader is not looking.
+      // The item range says the head is nowhere near, and it still asks.
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 12, endIndex: 20 },
+        ITEM_COUNT,
+        'history-window',
+        proximity({ aboveViewportPx: LEAD_PX - 1 }),
+      )).toEqual(['before']);
+    });
+
+    it('stays quiet a screenful and one pixel out', () => {
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 12, endIndex: 20 },
+        ITEM_COUNT,
+        'history-window',
+        proximity({ aboveViewportPx: LEAD_PX + 1 }),
+      )).toEqual([]);
+    });
+
+    it('reaches forward a screenful before the end of a history window', () => {
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 12, endIndex: 20 },
+        ITEM_COUNT,
+        'history-window',
+        proximity({ belowViewportPx: LEAD_PX - 1 }),
+      )).toEqual(['after']);
+    });
+
+    it('does not reach past the end of a tail, however close it is', () => {
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 12, endIndex: 20 },
+        ITEM_COUNT,
+        'tail',
+        proximity({ belowViewportPx: 0 }),
+      )).toEqual([]);
+    });
+
+    it('still answers from the item range when there is no geometry to read', () => {
+      // A boundary genuinely on screen is never missed for want of a
+      // measurement; only the lead is lost.
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 0, endIndex: 9 },
+        ITEM_COUNT,
+        'tail',
+        null,
+      )).toEqual(['before']);
+    });
+
+    it('asks once, not once per rule, when both agree', () => {
+      expect(historyBoundariesForVisibleRange(
+        { startIndex: 0, endIndex: 9 },
+        ITEM_COUNT,
+        'tail',
+        proximity({ aboveViewportPx: 0 }),
+      )).toEqual(['before']);
+    });
+  });
+});
+
+describe('historyBoundariesReached', () => {
+  /*
+   * The arming latch's question, and the reason it is a second function. The
+   * latch disarms a direction on dispatch and re-arms it when the reader is no
+   * longer at the boundary — so if "at the boundary" reached a screen out, the
+   * latch had no way back. Measured: one page fetched, then `not-rearmed`
+   * refusals for the next six minutes while the reader scrolled into a wall.
+   */
+  it('says nothing is reached from a screenful away, however keen the ask is', () => {
+    const near = proximity({ aboveViewportPx: 0, belowViewportPx: 0 });
+    const range = { startIndex: 12, endIndex: 20 };
+
+    expect(historyBoundariesForVisibleRange(range, ITEM_COUNT, 'history-window', near))
+      .toEqual(['before', 'after']);
+    expect(historyBoundariesReached(range, ITEM_COUNT, 'history-window')).toEqual([]);
+  });
+
+  it('says a boundary on screen is reached', () => {
+    expect(historyBoundariesReached({ startIndex: 1, endIndex: 9 }, ITEM_COUNT, 'tail'))
+      .toEqual(['before']);
+    expect(historyBoundariesReached(
+      { startIndex: 30, endIndex: ITEM_COUNT - 2 },
+      ITEM_COUNT,
+      'history-window',
+    )).toEqual(['after']);
+  });
+
+  it('never reports the end of a tail as reached', () => {
+    expect(historyBoundariesReached(
+      { startIndex: 30, endIndex: ITEM_COUNT + 4 },
+      ITEM_COUNT,
+      'tail',
+    )).toEqual([]);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.ts b/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.ts
new file mode 100644
index 0000000000..8897486544
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatHistoryBoundary.ts
@@ -0,0 +1,152 @@
+/**
+ * When looking at the transcript should pull more of it in.
+ *
+ * This is the policy half of history paging: it decides *that* a boundary is
+ * worth asking about, from where the reader is and nothing else. Whether the
+ * ask is honoured — budgets, in-flight requests, exhausted directions — belongs
+ * to the container, and how the position was arrived at belongs to whatever is
+ * placing the items.
+ *
+ * Two questions, deliberately two functions, because one predicate cannot serve
+ * both and it was tried:
+ *
+ * - **Has the reader arrived?** `historyBoundariesReached`, from the item range
+ *   alone. This is what the container's arming latch turns on.
+ * - **Is it worth asking?** `historyBoundariesForVisibleRange`, which adds a
+ *   screenful of lead so the page lands off screen.
+ *
+ * Serving the latch from the wider answer walls it shut. The latch disarms a
+ * direction on dispatch and re-arms it when the reader is no longer at the
+ * boundary, so a boundary that counts as reached from a screen away is one the
+ * reader can never be off — measured: one page fetched, then `not-rearmed`
+ * refusals for eleven seconds while the reader kept scrolling into a wall.
+ */
+
+import type { SessionHistoryWindowDirection } from '../../store/FlowChatStore';
+
+export interface VisibleItemRange {
+  startIndex: number;
+  endIndex: number;
+}
+
+/**
+ * How close to the first item counts as reaching for older Turns.
+ *
+ * One item of slack, not zero: the leading item is a user message a couple of
+ * dozen pixels tall, so a reader who has arrived at it is already looking at
+ * the top of the window, and waiting for it to be the *only* thing on screen
+ * would start the fetch after the blank appears rather than before.
+ */
+const LEADING_ITEM_SLACK = 1;
+
+/**
+ * How close to the last item counts as reaching for newer Turns.
+ *
+ * Two items, because the trailing edge of a Turn is a model round followed by
+ * its user message, and reaching the round means the window ends within a
+ * screen or so.
+ */
+const TRAILING_ITEM_SLACK = 2;
+
+/**
+ * How far ahead of the boundary the fetch goes out, in screenfuls.
+ *
+ * A page is not a quiet event. The items arrive above the reader and everything
+ * below them moves; the virtualizer picks its window from a scroll offset it
+ * only learns from scroll events, so for one commit it renders from a position
+ * the reader has already been moved off and the transcript under them goes
+ * blank; the rows then measure and the whole thing settles a second time. All
+ * of that is correct and all of it is visible — the reader described it as a
+ * flicker and a jolt, at the junction, every time.
+ *
+ * None of it is visible if it happens off screen. Asking a screenful early puts
+ * the junction above the viewport: the reader keeps scrolling into content that
+ * is already there and already measured. It costs one page of history fetched
+ * slightly sooner than it is needed, and nothing at all on session open, where
+ * the boundary is a whole transcript away.
+ *
+ * One screen rather than two because the lead only has to outlast the fetch. At
+ * a brisk wheel scroll the reader covers a few hundred pixels in the time a
+ * page takes to arrive from local storage, and a lead longer than it needs to
+ * be just loads history nobody reaches.
+ */
+export const HISTORY_BOUNDARY_LEAD_SCREENS = 1;
+
+/**
+ * How much transcript is left between the reader and each end of what is loaded.
+ *
+ * In scroller coordinates, so these are distances the reader still has to
+ * travel — the same space `scrollTop` is in. The heights they are composed of
+ * are estimates wherever an item has not been rendered yet, which is exactly
+ * the space above a reader who is scrolling up; that makes this an honest
+ * measure of remaining scroll and a poor one of remaining content, and
+ * remaining scroll is the question.
+ */
+export interface HistoryBoundaryProximity {
+  /** From the top edge of the viewport back to the start of the first item. */
+  aboveViewportPx: number;
+  /** From the bottom edge of the viewport on to the end of the last item. */
+  belowViewportPx: number;
+  /** One screenful, which is the unit the lead is expressed in. */
+  viewportHeightPx: number;
+}
+
+/**
+ * Directions the visible range is sitting on — the reader has arrived.
+ *
+ * The arming latch's question, and only ever this one. It has to be answerable
+ * as false while the reader is still near the boundary, or a direction disarmed
+ * on dispatch has no way back.
+ *
+ * `'after'` only applies to a history window. A tail presentation is already
+ * anchored to the newest Turn, so there is nothing past its end to fetch.
+ */
+export function historyBoundariesReached(
+  range: VisibleItemRange,
+  itemCount: number,
+  presentationMode: 'tail' | 'history-window',
+): SessionHistoryWindowDirection[] {
+  const directions: SessionHistoryWindowDirection[] = [];
+  if (range.startIndex <= LEADING_ITEM_SLACK) {
+    directions.push('before');
+  }
+  if (presentationMode === 'history-window' && range.endIndex >= itemCount - TRAILING_ITEM_SLACK) {
+    directions.push('after');
+  }
+  return directions;
+}
+
+/**
+ * Directions worth asking about from where the reader stands.
+ *
+ * Everything already reached, plus everything within a screenful of being
+ * reached. Never the other way round: the lead is an argument for asking
+ * sooner, not for calling a boundary arrived at.
+ *
+ * `proximity` is null when the geometry cannot be read — no scroller, or an end
+ * of the transcript the virtualizer has no place for yet. The item range still
+ * answers, so a boundary that is genuinely on screen is never missed for want
+ * of a measurement; only the lead is lost.
+ */
+export function historyBoundariesForVisibleRange(
+  range: VisibleItemRange,
+  itemCount: number,
+  presentationMode: 'tail' | 'history-window',
+  proximity: HistoryBoundaryProximity | null = null,
+): SessionHistoryWindowDirection[] {
+  const reached = new Set(historyBoundariesReached(range, itemCount, presentationMode));
+  if (proximity === null) return [...reached];
+
+  const leadPx = Math.max(0, proximity.viewportHeightPx) * HISTORY_BOUNDARY_LEAD_SCREENS;
+  const directions: SessionHistoryWindowDirection[] = [];
+  if (reached.has('before') || proximity.aboveViewportPx <= leadPx) {
+    directions.push('before');
+  }
+  if (
+    presentationMode === 'history-window' &&
+    (reached.has('after') || proximity.belowViewportPx <= leadPx)
+  ) {
+    directions.push('after');
+  }
+  return directions;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.test.ts
new file mode 100644
index 0000000000..0f73fecf04
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.test.ts
@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest';
+import {
+  resolveHistoryBoundaryTarget,
+  resolveTailWindowGrowth,
+  transcriptReachesLatestTurn,
+} from './flowChatLiveTailWindow';
+
+describe('transcriptReachesLatestTurn', () => {
+  it('counts the canonical transcript, which always holds the live tail', () => {
+    expect(transcriptReachesLatestTurn({
+      windowEndOrdinalExclusive: null,
+      knownTurnCount: 28,
+    })).toBe(true);
+  });
+
+  it('counts a window paged in from the tail', () => {
+    // The window the automatic paging produces on open: it ends exactly where
+    // the session does, so the viewport on it is on the newest output.
+    expect(transcriptReachesLatestTurn({
+      windowEndOrdinalExclusive: 27,
+      knownTurnCount: 27,
+    })).toBe(true);
+  });
+
+  it('excludes a window the session has since grown past', () => {
+    expect(transcriptReachesLatestTurn({
+      windowEndOrdinalExclusive: 27,
+      knownTurnCount: 28,
+    })).toBe(false);
+  });
+
+  it('excludes a window the user navigated into the middle of', () => {
+    expect(transcriptReachesLatestTurn({
+      windowEndOrdinalExclusive: 10,
+      knownTurnCount: 28,
+    })).toBe(false);
+  });
+});
+
+describe('resolveTailWindowGrowth', () => {
+  it('remembers the end of a window that reaches the newest Turn', () => {
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 27,
+      knownTurnCount: 27,
+      tailAnchoredWindowEnd: null,
+    })).toBe('anchor');
+  });
+
+  it('grows the tail-anchored window when a Turn is appended', () => {
+    // Without this the newest Turn is not rendered at all: the message the user
+    // just sent is missing, and since the follow rule reads the latest Turn off
+    // the rendered items it never learns the Turn exists.
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 27,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: 27,
+    })).toBe('extend');
+  });
+
+  it('keeps asking until the window is actually repaired', () => {
+    // The whole reason this is not edge-triggered. A failed extension leaves
+    // the state untouched, and the next render asks again.
+    const stillBroken = {
+      windowEndOrdinalExclusive: 27,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: 27,
+    };
+    expect(resolveTailWindowGrowth(stillBroken)).toBe('extend');
+    expect(resolveTailWindowGrowth(stillBroken)).toBe('extend');
+  });
+
+  it('re-anchors once the window has caught up', () => {
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 28,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: 27,
+    })).toBe('anchor');
+  });
+
+  it('grows again when a partial extension still falls short', () => {
+    // Two Turns arrived and the loaded range only covered one of them.
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 28,
+      knownTurnCount: 29,
+      tailAnchoredWindowEnd: 28,
+    })).toBe('extend');
+  });
+
+  it('leaves a window the user navigated to alone', () => {
+    // Its end is not where a tail-reaching window's end was, so the session
+    // growing says nothing about it.
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 10,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: 27,
+    })).toBe('none');
+  });
+
+  it('leaves a mid-session window alone even with no anchor on record', () => {
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: 10,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: null,
+    })).toBe('none');
+  });
+
+  it('releases the anchor when no window is rendered', () => {
+    expect(resolveTailWindowGrowth({
+      windowEndOrdinalExclusive: null,
+      knownTurnCount: 28,
+      tailAnchoredWindowEnd: 27,
+    })).toBe('release');
+  });
+});
+
+describe('resolveHistoryBoundaryTarget', () => {
+  it('asks for the Turn before the transcript on screen', () => {
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'before',
+      renderedRange: { startOrdinal: 12, endOrdinalExclusive: 24 },
+      knownTurnCount: 40,
+    })).toEqual({ status: 'ask', targetOrdinal: 11 });
+  });
+
+  it('asks for the Turn after the transcript on screen', () => {
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'after',
+      renderedRange: { startOrdinal: 12, endOrdinalExclusive: 24 },
+      knownTurnCount: 40,
+    })).toEqual({ status: 'ask', targetOrdinal: 24 });
+  });
+
+  it('is exhausted at the head of the session', () => {
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'before',
+      renderedRange: { startOrdinal: 0, endOrdinalExclusive: 24 },
+      knownTurnCount: 40,
+    })).toEqual({ status: 'exhausted', reason: 'reached-start' });
+  });
+
+  it('is exhausted at the newest Turn, and says which nothing that is', () => {
+    /*
+     * The reported case, in ordinals. A window paged in from the tail ended at
+     * 6 while the session had grown to 10, the continuous projection spliced
+     * the two so the transcript on screen ran to the newest Turn, and reaching
+     * its bottom asked to load ordinal 6 — a Turn already on screen, which the
+     * catalog could not resolve. 266 asks, every one answered `not-found`, and
+     * a boundary status the reader read as history being prepared forever.
+     *
+     * Judged against the rendered range there is nothing to ask for, which is
+     * the honest answer and the one that latches the direction quiet.
+     */
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'after',
+      renderedRange: { startOrdinal: 0, endOrdinalExclusive: 10 },
+      knownTurnCount: 10,
+    })).toEqual({ status: 'exhausted', reason: 'reached-latest' });
+  });
+
+  it('would still ask against the window the store cut, which is the bug', () => {
+    // The same session, judged against the store's window instead of the
+    // transcript: an ordinal that is both already rendered and unresolvable.
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'after',
+      renderedRange: { startOrdinal: 0, endOrdinalExclusive: 6 },
+      knownTurnCount: 10,
+    })).toEqual({ status: 'ask', targetOrdinal: 6 });
+  });
+
+  it('separates asking past the head from asking past the newest Turn', () => {
+    // Only the first is a symptom: it means Turns the session claims to have
+    // are not reachable, which is how history goes missing rather than late.
+    expect(resolveHistoryBoundaryTarget({
+      direction: 'before',
+      renderedRange: { startOrdinal: 41, endOrdinalExclusive: 48 },
+      knownTurnCount: 40,
+    })).toEqual({ status: 'exhausted', reason: 'beyond-known-total' });
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.ts b/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.ts
new file mode 100644
index 0000000000..6bffae4f26
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatLiveTailWindow.ts
@@ -0,0 +1,128 @@
+/**
+ * Where a rendered history window stands relative to the live tail.
+ *
+ * Both questions here used to be answered by the viewport intent, which was a
+ * faithful proxy only while turn navigation was the sole thing that activated a
+ * window. Automatic tail paging activates one with nobody navigating, and the
+ * proxy then reports "the user is reading history" for a viewport sitting on
+ * the newest output. These are the ordinal facts the callers actually need —
+ * ledger numbers, not measurements.
+ */
+
+export interface RenderedWindowPosition {
+  /** End of the rendered history window, or `null` when none is rendered. */
+  windowEndOrdinalExclusive: number | null;
+  /** Turns the session is known to hold, loaded or not. */
+  knownTurnCount: number;
+}
+
+/**
+ * Whether the transcript on screen still reaches the newest Turn.
+ *
+ * Rendering no window means rendering the canonical transcript, which contains
+ * the live tail by definition.
+ */
+export function transcriptReachesLatestTurn(input: RenderedWindowPosition): boolean {
+  return input.windowEndOrdinalExclusive === null
+    || input.windowEndOrdinalExclusive >= input.knownTurnCount;
+}
+
+export type TailWindowGrowthAction =
+  /** No window is rendered; forget any remembered tail anchor. */
+  | 'release'
+  /** The window reaches the newest Turn; remember its end as the tail anchor. */
+  | 'anchor'
+  /** The session grew out from under the tail-anchored window; grow it too. */
+  | 'extend'
+  /** A window that was never anchored to the tail. Leave it where it is. */
+  | 'none';
+
+export interface TailWindowGrowthInput extends RenderedWindowPosition {
+  /** End of the window last seen reaching the newest Turn, if any. */
+  tailAnchoredWindowEnd: number | null;
+}
+
+/**
+ * Decide what a rendered history window owes the live tail.
+ *
+ * This is deliberately a function of the *current* state rather than of a
+ * transition. An edge — "it reached the tail last render and does not now" — is
+ * consumed whether or not the caller managed to act on it, which strands the
+ * window permanently on a single failure. Here the answer stays `'extend'`
+ * until the window is actually repaired, so every render retries it.
+ *
+ * `tailAnchoredWindowEnd` is what separates a window paged in from the tail
+ * from one the user navigated to: only a window whose end is exactly where a
+ * tail-reaching window's end was may grow. A window sitting in the middle of
+ * the session has a different end and is left alone.
+ */
+export function resolveTailWindowGrowth(
+  input: TailWindowGrowthInput,
+): TailWindowGrowthAction {
+  if (input.windowEndOrdinalExclusive === null) {
+    return 'release';
+  }
+  if (transcriptReachesLatestTurn(input)) {
+    return 'anchor';
+  }
+  return input.tailAnchoredWindowEnd === input.windowEndOrdinalExclusive
+    ? 'extend'
+    : 'none';
+}
+
+export interface RenderedTranscriptRange {
+  startOrdinal: number;
+  endOrdinalExclusive: number;
+}
+
+export type HistoryBoundaryTargetResolution =
+  /** The ordinal a page in this direction has to load. */
+  | { status: 'ask'; targetOrdinal: number }
+  /** There is nothing in this direction, and which nothing it is. */
+  | {
+      status: 'exhausted';
+      reason: 'reached-start' | 'reached-latest' | 'beyond-known-total';
+    };
+
+/**
+ * What paging past an edge of the transcript on screen would have to load.
+ *
+ * **The range is the one the reader is looking at, never the window the store
+ * cut.** Those are the same thing only until the continuous projection splices
+ * a window that starts at ordinal 0 with the live tail: the rendered transcript
+ * then runs to the newest Turn while the store's window still ends where it was
+ * paged in.
+ *
+ * Deriving the ask from the store's window there asks to load a Turn that is
+ * already on screen, and it fails in the worst available way. Measured: a
+ * window ending at ordinal 6 against a session of 10, projected continuous, so
+ * the reader was at the newest output; reaching the bottom asked for ordinal 6,
+ * which the *catalog* — six entries, and not extended as the session streamed —
+ * could not resolve. 266 asks in one session, every one answered `not-found`,
+ * every one leaving a boundary status the reader saw as "preparing history"
+ * over a transcript that was already complete.
+ *
+ * `reached-latest` is separated from `beyond-known-total` because only the
+ * second is a symptom. Asking past the newest Turn is what the bottom edge of a
+ * live transcript does every time the reader reaches it; asking past the known
+ * total in the *other* direction means Turns have gone missing.
+ */
+export function resolveHistoryBoundaryTarget(input: {
+  direction: 'before' | 'after';
+  renderedRange: RenderedTranscriptRange;
+  knownTurnCount: number;
+}): HistoryBoundaryTargetResolution {
+  const targetOrdinal = input.direction === 'before'
+    ? input.renderedRange.startOrdinal - 1
+    : input.renderedRange.endOrdinalExclusive;
+  if (targetOrdinal < 0) {
+    return { status: 'exhausted', reason: 'reached-start' };
+  }
+  if (targetOrdinal >= input.knownTurnCount) {
+    return {
+      status: 'exhausted',
+      reason: input.direction === 'after' ? 'reached-latest' : 'beyond-known-total',
+    };
+  }
+  return { status: 'ask', targetOrdinal };
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatScrollStability.ts b/src/web-ui/src/flow_chat/components/modern/flowChatScrollStability.ts
deleted file mode 100644
index 9c06e9ff59..0000000000
--- a/src/web-ui/src/flow_chat/components/modern/flowChatScrollStability.ts
+++ /dev/null
@@ -1,659 +0,0 @@
-import type { FlowChatPinTurnToTopMode } from '../../events/flowchatNavigation';
-import type { FlowChatViewportAnchorMode } from './FlowChatViewportCoordinator';
-
-export const COMPENSATION_EPSILON_PX = 0.5;
-const FOLLOWING_TAIL_SHRINK_CLAMP_TOLERANCE_PX = 2;
-
-type BottomReservationKind = 'collapse' | 'pin';
-
-interface BottomReservationBase {
-  kind: BottomReservationKind;
-  px: number;
-  floorPx: number;
-}
-
-interface CollapseBottomReservation extends BottomReservationBase {
-  kind: 'collapse';
-}
-
-export interface PinBottomReservation extends BottomReservationBase {
-  kind: 'pin';
-  mode: FlowChatPinTurnToTopMode;
-  targetTurnId: string | null;
-}
-
-export interface BottomReservationState {
-  collapse: CollapseBottomReservation;
-  pin: PinBottomReservation;
-}
-
-export interface TurnPinRequestIdentity {
-  generation: number;
-  sessionId: string;
-  turnId: string;
-}
-
-export function isTurnPinRequestIdentityCurrent(
-  request: TurnPinRequestIdentity,
-  current: TurnPinRequestIdentity,
-): boolean {
-  return (
-    request.generation === current.generation &&
-    request.sessionId === current.sessionId &&
-    request.turnId === current.turnId
-  );
-}
-
-export function transferCollapseReservationToPin(
-  currentState: BottomReservationState,
-  nextPinReservation: PinBottomReservation,
-): BottomReservationState {
-  return {
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: 0,
-      floorPx: 0,
-    },
-    pin: nextPinReservation,
-  };
-}
-
-export function transferPinReservationToProtectedCollapse(
-  currentState: BottomReservationState,
-): BottomReservationState {
-  const transferredPx = getReservationTotalPx(currentState.pin);
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: currentState.collapse.px + transferredPx,
-      floorPx: currentState.collapse.floorPx + transferredPx,
-    },
-    pin: {
-      kind: 'pin',
-      px: 0,
-      floorPx: 0,
-      mode: 'transient',
-      targetTurnId: null,
-    },
-  });
-}
-
-export function releasePinReservationForUserNavigation(
-  currentState: BottomReservationState,
-  options: {
-    preserveCurrentRange: boolean;
-    ownsElementAnchor: boolean;
-  },
-): BottomReservationState {
-  const isProvisionalStickyPin = (
-    currentState.pin.mode === 'sticky-latest' &&
-    currentState.pin.floorPx <= COMPENSATION_EPSILON_PX &&
-    !options.ownsElementAnchor
-  );
-  if (options.preserveCurrentRange && !isProvisionalStickyPin) {
-    return transferPinReservationToProtectedCollapse(currentState);
-  }
-
-  return sanitizeBottomReservationState({
-    ...currentState,
-    pin: {
-      kind: 'pin',
-      px: 0,
-      floorPx: 0,
-      mode: 'transient',
-      targetTurnId: null,
-    },
-  });
-}
-
-export function protectCurrentCollapseReservation(
-  currentState: BottomReservationState,
-): BottomReservationState {
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      floorPx: currentState.collapse.px,
-    },
-  });
-}
-
-export function settleCollapseReservationForViewport(
-  currentState: BottomReservationState,
-  geometry: {
-    scrollTop: number;
-    scrollHeight: number;
-    clientHeight: number;
-    rangeGuardPx?: number;
-  },
-): BottomReservationState {
-  const currentTotalPx = getReservationTotalPx(currentState.collapse) +
-    getReservationTotalPx(currentState.pin);
-  const contentHeightWithoutReservation = Math.max(
-    0,
-    geometry.scrollHeight - currentTotalPx,
-  );
-  const requiredTotalPx = Math.max(
-    getRequiredTotalPxForScrollTop({
-      targetScrollTop: geometry.scrollTop,
-      contentHeightWithoutReservation,
-      clientHeight: geometry.clientHeight,
-      rangeGuardPx: geometry.rangeGuardPx,
-    }),
-  );
-  const protectedTotalPx = Math.max(
-    getReservationTotalPx(currentState.pin) + currentState.collapse.floorPx,
-    requiredTotalPx,
-  );
-  const settledTotalPx = Math.min(currentTotalPx, protectedTotalPx);
-  const settledCollapsePx = Math.max(
-    0,
-    settledTotalPx - getReservationTotalPx(currentState.pin),
-  );
-
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: settledCollapsePx,
-      floorPx: settledCollapsePx,
-    },
-  });
-}
-
-export function ensureCollapseReservationForScrollTop(
-  currentState: BottomReservationState,
-  geometry: {
-    targetScrollTop: number;
-    scrollHeight: number;
-    clientHeight: number;
-    rangeGuardPx?: number;
-  },
-): BottomReservationState {
-  const currentPinPx = getReservationTotalPx(currentState.pin);
-  const currentCollapsePx = getReservationTotalPx(currentState.collapse);
-  const currentTotalPx = currentCollapsePx + currentPinPx;
-  const contentHeightWithoutReservation = Math.max(
-    0,
-    sanitizeReservationPx(geometry.scrollHeight) - currentTotalPx,
-  );
-  const requiredTotalPx = Math.max(
-    currentPinPx,
-    getRequiredTotalPxForScrollTop({
-      targetScrollTop: geometry.targetScrollTop,
-      contentHeightWithoutReservation,
-      clientHeight: geometry.clientHeight,
-      rangeGuardPx: geometry.rangeGuardPx,
-    }),
-  );
-  const requiredCollapsePx = Math.max(0, requiredTotalPx - currentPinPx);
-  const nextCollapsePx = Math.max(currentCollapsePx, requiredCollapsePx);
-
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: nextCollapsePx,
-      floorPx: Math.max(currentState.collapse.floorPx, requiredCollapsePx),
-    },
-  });
-}
-
-export function settleRetainedCollapseReservationForAnchor(
-  currentState: BottomReservationState,
-  geometry: {
-    targetScrollTop: number;
-    scrollHeight: number;
-    clientHeight: number;
-    rangeGuardPx?: number;
-  },
-): BottomReservationState {
-  const currentPinPx = getReservationTotalPx(currentState.pin);
-  const currentCollapsePx = getReservationTotalPx(currentState.collapse);
-  const contentHeightWithoutReservation = Math.max(
-    0,
-    sanitizeReservationPx(geometry.scrollHeight) - currentPinPx - currentCollapsePx,
-  );
-  const requiredTotalPx = Math.max(
-    currentPinPx,
-    getRequiredTotalPxForScrollTop({
-      targetScrollTop: geometry.targetScrollTop,
-      contentHeightWithoutReservation,
-      clientHeight: geometry.clientHeight,
-      rangeGuardPx: geometry.rangeGuardPx,
-    }),
-  );
-  const requiredCollapsePx = Math.max(0, requiredTotalPx - currentPinPx);
-
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: requiredCollapsePx,
-      floorPx: requiredCollapsePx,
-    },
-  });
-}
-
-export function reconcileUnsignaledShrinkReservation(
-  currentState: BottomReservationState,
-  fallbackRequiredCollapsePx: number,
-  hasCollapseOwner = (
-    currentState.collapse.px > COMPENSATION_EPSILON_PX ||
-    currentState.collapse.floorPx > COMPENSATION_EPSILON_PX
-  ),
-): BottomReservationState {
-  if (!hasCollapseOwner) {
-    return sanitizeBottomReservationState({
-      ...currentState,
-      collapse: {
-        ...currentState.collapse,
-        px: 0,
-        floorPx: 0,
-      },
-    });
-  }
-
-  return sanitizeBottomReservationState({
-    ...currentState,
-    collapse: {
-      ...currentState.collapse,
-      px: Math.max(
-        currentState.collapse.floorPx,
-        sanitizeReservationPx(fallbackRequiredCollapsePx),
-      ),
-    },
-  });
-}
-
-export function clampPinReservationPxToViewport(
-  reservationPx: number,
-  clientHeight: number,
-): number {
-  return Math.min(
-    sanitizeReservationPx(reservationPx),
-    sanitizeReservationPx(clientHeight),
-  );
-}
-
-export function resolveProvisionalStickyPinReservationPx(options: {
-  scrollHeight: number;
-  clientHeight: number;
-  currentPinPx: number;
-}): number {
-  const currentPinPx = sanitizeReservationPx(options.currentPinPx);
-  const effectiveScrollHeight = Math.max(
-    0,
-    sanitizeReservationPx(options.scrollHeight) - currentPinPx,
-  );
-  const effectiveMaxScrollTop = Math.max(
-    0,
-    effectiveScrollHeight - sanitizeReservationPx(options.clientHeight),
-  );
-  return clampPinReservationPxToViewport(
-    Math.max(currentPinPx, effectiveMaxScrollTop),
-    options.clientHeight,
-  );
-}
-
-export function shouldClearExpiredProvisionalStickyPin(options: {
-  requestTurnId: string;
-  requestPinMode: FlowChatPinTurnToTopMode;
-  pinReservation: PinBottomReservation;
-  ownsElementAnchor: boolean;
-}): boolean {
-  return (
-    options.requestPinMode === 'sticky-latest' &&
-    options.pinReservation.mode === 'sticky-latest' &&
-    options.pinReservation.targetTurnId === options.requestTurnId &&
-    options.pinReservation.floorPx <= COMPENSATION_EPSILON_PX &&
-    !options.ownsElementAnchor
-  );
-}
-
-export function createInitialBottomReservationState(): BottomReservationState {
-  return {
-    collapse: {
-      kind: 'collapse',
-      px: 0,
-      floorPx: 0,
-    },
-    pin: {
-      kind: 'pin',
-      px: 0,
-      floorPx: 0,
-      mode: 'transient',
-      targetTurnId: null,
-    },
-  };
-}
-
-function sanitizeReservationPx(value: number): number {
-  return Number.isFinite(value) ? Math.max(0, value) : 0;
-}
-
-function getRequiredTotalPxForScrollTop(geometry: {
-  targetScrollTop: number;
-  contentHeightWithoutReservation: number;
-  clientHeight: number;
-  rangeGuardPx?: number;
-}): number {
-  const targetScrollTop = sanitizeReservationPx(geometry.targetScrollTop);
-  if (targetScrollTop <= COMPENSATION_EPSILON_PX) {
-    return 0;
-  }
-  return Math.max(
-    0,
-    targetScrollTop +
-      sanitizeReservationPx(geometry.clientHeight) -
-      sanitizeReservationPx(geometry.contentHeightWithoutReservation) +
-      sanitizeReservationPx(geometry.rangeGuardPx ?? 1),
-  );
-}
-
-export function sanitizeBottomReservationState(state: BottomReservationState): BottomReservationState {
-  const collapsePx = sanitizeReservationPx(state.collapse.px);
-  const collapseFloorPx = Math.min(collapsePx, sanitizeReservationPx(state.collapse.floorPx));
-  const pinPx = sanitizeReservationPx(state.pin.px);
-  const pinFloorPx = Math.min(pinPx, sanitizeReservationPx(state.pin.floorPx));
-
-  return {
-    collapse: {
-      kind: 'collapse',
-      px: collapsePx,
-      floorPx: collapseFloorPx,
-    },
-    pin: {
-      kind: 'pin',
-      px: pinPx,
-      floorPx: pinFloorPx,
-      mode: state.pin.mode ?? 'transient',
-      targetTurnId: state.pin.targetTurnId ?? null,
-    },
-  };
-}
-
-export function areBottomReservationStatesEqual(
-  left: BottomReservationState,
-  right: BottomReservationState,
-): boolean {
-  return (
-    Math.abs(left.collapse.px - right.collapse.px) <= COMPENSATION_EPSILON_PX &&
-    Math.abs(left.collapse.floorPx - right.collapse.floorPx) <= COMPENSATION_EPSILON_PX &&
-    Math.abs(left.pin.px - right.pin.px) <= COMPENSATION_EPSILON_PX &&
-    Math.abs(left.pin.floorPx - right.pin.floorPx) <= COMPENSATION_EPSILON_PX &&
-    left.pin.mode === right.pin.mode &&
-    left.pin.targetTurnId === right.pin.targetTurnId
-  );
-}
-
-export function getReservationTotalPx(reservation: BottomReservationBase): number {
-  return Math.max(0, reservation.px);
-}
-
-function getReservationConsumablePx(reservation: BottomReservationBase): number {
-  return Math.max(0, reservation.px - reservation.floorPx);
-}
-
-export function consumeBottomReservationForContentGrowth(
-  state: BottomReservationState,
-  amountPx: number,
-  consumeStickyPinFloor: boolean,
-  preserveCollapseReservation = false,
-): BottomReservationState {
-  let remaining = Math.max(0, amountPx);
-
-  const collapseConsumablePx = preserveCollapseReservation
-    ? 0
-    : getReservationConsumablePx(state.collapse);
-  const collapseAboveFloorConsumed = Math.min(collapseConsumablePx, remaining);
-  remaining -= collapseAboveFloorConsumed;
-  const collapseFloorConsumed = preserveCollapseReservation
-    ? 0
-    : Math.min(state.collapse.floorPx, remaining);
-  const collapseConsumed = collapseAboveFloorConsumed + collapseFloorConsumed;
-  remaining -= collapseFloorConsumed;
-
-  const pinConsumablePx = getReservationConsumablePx(state.pin);
-  const pinConsumed = Math.min(pinConsumablePx, remaining);
-  remaining -= pinConsumed;
-
-  const stickyPinFloorConsumed = consumeStickyPinFloor && state.pin.mode === 'sticky-latest'
-    ? Math.min(state.pin.floorPx, remaining)
-    : 0;
-
-  return sanitizeBottomReservationState({
-    collapse: {
-      ...state.collapse,
-      px: state.collapse.px - collapseConsumed,
-      floorPx: state.collapse.floorPx - collapseFloorConsumed,
-    },
-    pin: {
-      ...state.pin,
-      px: state.pin.px - pinConsumed - stickyPinFloorConsumed,
-      floorPx: state.pin.floorPx - stickyPinFloorConsumed,
-    },
-  });
-}
-
-export function shouldSyncPhysicalBottom(options: {
-  viewportHeightChanged: boolean;
-  collapseProtectionActive: boolean;
-  wasAtPhysicalBottom: boolean;
-  ownsElementAnchor: boolean;
-  isFollowingTail: boolean;
-}): boolean {
-  return (
-    options.viewportHeightChanged &&
-    !options.collapseProtectionActive &&
-    options.wasAtPhysicalBottom &&
-    !options.ownsElementAnchor &&
-    !options.isFollowingTail
-  );
-}
-
-export function shouldSuppressFollowingTailNegativeScrollBy(options: {
-  requestedTop: number | null;
-  isFollowingOutput: boolean;
-  isStreamingOutput: boolean;
-  wasAtPhysicalBottom: boolean;
-}): boolean {
-  return (
-    options.requestedTop !== null &&
-    options.requestedTop < -COMPENSATION_EPSILON_PX &&
-    options.isFollowingOutput &&
-    options.isStreamingOutput &&
-    options.wasAtPhysicalBottom
-  );
-}
-
-export interface FollowingTailShrinkClampRecovery {
-  targetScrollTop: number;
-  rangeShrinkPx: number;
-  scrollClampPx: number;
-}
-
-/** Distinguishes a browser range clamp from user or programmatic upward scrolling. */
-export function resolveFollowingTailShrinkClampRecovery(options: {
-  previousGeometry: {
-    scrollTop: number;
-    scrollHeight: number;
-    clientHeight: number;
-  } | null;
-  currentGeometry: {
-    scrollTop: number;
-    scrollHeight: number;
-    clientHeight: number;
-  };
-  isFollowingOutput: boolean;
-  isStreamingOutput: boolean;
-  hasRecentUserUpwardIntent: boolean;
-  scrollbarPointerInteractionActive: boolean;
-  collapseProtectionActive: boolean;
-}): FollowingTailShrinkClampRecovery | null {
-  if (
-    !options.previousGeometry ||
-    !options.isFollowingOutput ||
-    !options.isStreamingOutput ||
-    options.hasRecentUserUpwardIntent ||
-    options.scrollbarPointerInteractionActive ||
-    options.collapseProtectionActive
-  ) {
-    return null;
-  }
-
-  const previous = options.previousGeometry;
-  const current = options.currentGeometry;
-  const values = [
-    previous.scrollTop,
-    previous.scrollHeight,
-    previous.clientHeight,
-    current.scrollTop,
-    current.scrollHeight,
-    current.clientHeight,
-  ];
-  if (values.some(value => !Number.isFinite(value))) {
-    return null;
-  }
-
-  if (
-    Math.abs(previous.clientHeight - current.clientHeight) >
-      FOLLOWING_TAIL_SHRINK_CLAMP_TOLERANCE_PX
-  ) {
-    return null;
-  }
-
-  const previousMaxScrollTop = Math.max(0, previous.scrollHeight - previous.clientHeight);
-  const currentMaxScrollTop = Math.max(0, current.scrollHeight - current.clientHeight);
-  const rangeShrinkPx = previousMaxScrollTop - currentMaxScrollTop;
-  const scrollClampPx = previous.scrollTop - current.scrollTop;
-  if (
-    rangeShrinkPx <= COMPENSATION_EPSILON_PX ||
-    scrollClampPx <= COMPENSATION_EPSILON_PX ||
-    Math.abs(previousMaxScrollTop - previous.scrollTop) >
-      FOLLOWING_TAIL_SHRINK_CLAMP_TOLERANCE_PX ||
-    Math.abs(currentMaxScrollTop - current.scrollTop) >
-      FOLLOWING_TAIL_SHRINK_CLAMP_TOLERANCE_PX ||
-    Math.abs(rangeShrinkPx - scrollClampPx) >
-      FOLLOWING_TAIL_SHRINK_CLAMP_TOLERANCE_PX
-  ) {
-    return null;
-  }
-
-  return {
-    targetScrollTop: previous.scrollTop,
-    rangeShrinkPx,
-    scrollClampPx,
-  };
-}
-
-export function getCanceledUnsettledStickyPinGrowthPx(options: {
-  pendingGrowthPx: number;
-  shrinkPx: number;
-  hasActiveCollapseIntent: boolean;
-}): number {
-  if (options.hasActiveCollapseIntent) {
-    return 0;
-  }
-  return Math.min(
-    sanitizeReservationPx(options.pendingGrowthPx),
-    sanitizeReservationPx(options.shrinkPx),
-  );
-}
-
-export type StickyPinGrowthSettlementStrategy =
-  | 'none'
-  | 'wait-for-quiet'
-  | 'wait-for-collapse'
-  | 'settle-now';
-
-export function resolveStickyPinGrowthSettlementStrategy(options: {
-  pendingGrowthPx: number;
-  pinFloorPx: number;
-  hasActiveCollapseIntent: boolean;
-}): StickyPinGrowthSettlementStrategy {
-  const pendingGrowthPx = sanitizeReservationPx(options.pendingGrowthPx);
-  const pinFloorPx = sanitizeReservationPx(options.pinFloorPx);
-  if (
-    pendingGrowthPx <= COMPENSATION_EPSILON_PX ||
-    pinFloorPx <= COMPENSATION_EPSILON_PX
-  ) {
-    return 'none';
-  }
-
-  if (pendingGrowthPx + COMPENSATION_EPSILON_PX < pinFloorPx) {
-    return 'wait-for-quiet';
-  }
-
-  return options.hasActiveCollapseIntent
-    ? 'wait-for-collapse'
-    : 'settle-now';
-}
-
-export function shouldBypassShrinkCompensationInTailFollow(options: {
-  isFollowingOutput: boolean;
-  isStreamingOutput: boolean;
-  hasActiveCollapseIntent: boolean;
-}): boolean {
-  return (
-    options.isFollowingOutput &&
-    options.isStreamingOutput &&
-    !options.hasActiveCollapseIntent
-  );
-}
-
-export type CollapseIntentSettlementStrategy =
-  | 'reconcile-sticky-pin'
-  | 'retain-following-tail'
-  | 'settle-preserved-element'
-  | 'settle-protected-viewport'
-  | 'drain';
-
-export function resolveCollapseIntentSettlementStrategy(options: {
-  coordinatorMode: FlowChatViewportAnchorMode;
-  isFollowingOutput: boolean;
-  isStreamingOutput: boolean;
-  reservation: BottomReservationState;
-}): CollapseIntentSettlementStrategy {
-  const ownsStickyPin = (
-    options.coordinatorMode === 'pinned-item' &&
-    options.reservation.pin.mode === 'sticky-latest' &&
-    Boolean(options.reservation.pin.targetTurnId)
-  );
-  if (ownsStickyPin) {
-    return 'reconcile-sticky-pin';
-  }
-  if (
-    options.coordinatorMode === 'following-tail' &&
-    options.isFollowingOutput &&
-    options.isStreamingOutput
-  ) {
-    return 'retain-following-tail';
-  }
-  if (options.coordinatorMode === 'preserving-element') {
-    return 'settle-preserved-element';
-  }
-  if (options.reservation.collapse.floorPx > COMPENSATION_EPSILON_PX) {
-    return 'settle-protected-viewport';
-  }
-  return 'drain';
-}
-
-export function resolveAutoCollapseAnchorScrollTop(options: {
-  currentScrollTop: number;
-  previousStableScrollTop: number;
-  reason: string | null | undefined;
-  isFollowingOutput: boolean;
-  isStreamingOutput: boolean;
-}): number {
-  if (
-    options.reason !== 'auto' ||
-    !options.isFollowingOutput ||
-    !options.isStreamingOutput
-  ) {
-    return options.currentScrollTop;
-  }
-  return Math.max(options.currentScrollTop, options.previousStableScrollTop);
-}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.test.ts
new file mode 100644
index 0000000000..5e4b362ed9
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.test.ts
@@ -0,0 +1,327 @@
+import { describe, expect, it } from 'vitest';
+import {
+  contentEndScrollTop,
+  FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX,
+  isViewportAtTail,
+  memorylessFollowState,
+  nextTailFollowState,
+  tailHoldMaxGapPx,
+  tailSnapBackScrollTop,
+  tailSpacerPxForViewport,
+  turnTopAlignmentEntersReservedBlank,
+  type TailFollowState,
+} from './flowChatTailFollow';
+
+const VIEWPORT = 800;
+const BOTTOM_INSET = 168;
+const SPACER = tailSpacerPxForViewport(VIEWPORT, BOTTOM_INSET);
+const MAX_GAP = tailHoldMaxGapPx(VIEWPORT);
+const THRESHOLD = FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX;
+
+function holding(target: number): TailFollowState {
+  return { mode: 'hold-tail', target };
+}
+
+function pinning(target: number): TailFollowState {
+  return { mode: 'pin-turn-top', target };
+}
+
+describe('tailSpacerPxForViewport', () => {
+  it('reserves exactly enough to put a bare new Turn on the top edge', () => {
+    // Worst case for the pin: the user message is the newest item and nothing
+    // has answered it, so the message, the input inset and the spacer are all
+    // that lie below its top. One viewport of them is what the pin needs.
+    const spacer = tailSpacerPxForViewport(VIEWPORT, BOTTOM_INSET);
+    const smallestUserMessagePx = VIEWPORT - BOTTOM_INSET - spacer;
+    expect(smallestUserMessagePx).toBeGreaterThan(0);
+    expect(smallestUserMessagePx).toBeLessThan(64);
+  });
+
+  it('never reserves less than the gap the hold rule may be holding', () => {
+    // A composer expanded most of the way up the viewport leaves the pin almost
+    // nothing to reserve, but `hold-tail` still parks up to `tailHoldMaxGapPx`
+    // past the content end — and an offset the browser clamps is an offset the
+    // hold rule does not get to hold.
+    expect(tailSpacerPxForViewport(VIEWPORT, VIEWPORT - 80))
+      .toBe(tailHoldMaxGapPx(VIEWPORT));
+  });
+
+  it('stays well under a full viewport, so the scroll range does not end in blank', () => {
+    expect(tailSpacerPxForViewport(VIEWPORT, BOTTOM_INSET)).toBeLessThan(VIEWPORT);
+  });
+
+  it('reserves nothing before the scroller has been measured', () => {
+    expect(tailSpacerPxForViewport(0, BOTTOM_INSET)).toBe(0);
+  });
+});
+
+describe('turnTopAlignmentEntersReservedBlank', () => {
+  it('leaves a Turn with content below it top-aligned', () => {
+    expect(turnTopAlignmentEntersReservedBlank({
+      turnTopScrollTop: 400,
+      contentEndScrollTop: 3000,
+    })).toBe(false);
+  });
+
+  it('clamps a Turn whose top lies past the end of real content', () => {
+    // Everything below it is the reserved blank, which follow-output holds for
+    // output that is arriving. Nothing arrives under a navigated Turn.
+    expect(turnTopAlignmentEntersReservedBlank({
+      turnTopScrollTop: 3200,
+      contentEndScrollTop: 3000,
+    })).toBe(true);
+  });
+
+  it('asks nothing about which Turn it is', () => {
+    // The last Turn of a long transcript top-aligns like any other; short and
+    // long is the result of the comparison, not an input to it.
+    expect(turnTopAlignmentEntersReservedBlank({
+      turnTopScrollTop: 3000 - VIEWPORT,
+      contentEndScrollTop: 3000,
+    })).toBe(false);
+  });
+
+  it('treats the content end itself as still on the transcript', () => {
+    expect(turnTopAlignmentEntersReservedBlank({
+      turnTopScrollTop: 3000,
+      contentEndScrollTop: 3000,
+    })).toBe(false);
+  });
+});
+
+describe('contentEndScrollTop', () => {
+  it('excludes the resident tail spacer from the tail target', () => {
+    expect(contentEndScrollTop({
+      scrollHeight: 5000 + SPACER,
+      clientHeight: VIEWPORT,
+      tailSpacerPx: SPACER,
+    })).toBe(5000 - VIEWPORT);
+  });
+
+  it('clamps to the top when the transcript is shorter than the viewport', () => {
+    expect(contentEndScrollTop({
+      scrollHeight: 300 + SPACER,
+      clientHeight: VIEWPORT,
+      tailSpacerPx: SPACER,
+    })).toBe(0);
+  });
+});
+
+describe('nextTailFollowState hold-tail', () => {
+  it('follows content growth', () => {
+    const next = nextTailFollowState(holding(4000), {
+      desiredScrollTop: 4200,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next).toEqual({ mode: 'hold-tail', target: 4200 });
+  });
+
+  it('holds its offset when a collapse fits the tolerated gap', () => {
+    // A card above the live output collapses by 300px: the tail rises, but the
+    // viewport must not move or earlier content would visually drop by 300px.
+    const next = nextTailFollowState(holding(4000), {
+      desiredScrollTop: 3700,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next.target).toBe(4000);
+  });
+
+  it('gives ground only past the tolerated gap, and only by the excess', () => {
+    const next = nextTailFollowState(holding(4000), {
+      desiredScrollTop: 1000,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next.target).toBe(1000 + MAX_GAP);
+  });
+
+  it('never drops below the content-end target', () => {
+    const next = nextTailFollowState(holding(100), {
+      desiredScrollTop: 900,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next.target).toBe(900);
+  });
+});
+
+describe('nextTailFollowState pin-turn-top', () => {
+  it('holds a new Turn at the viewport top while its answer is short', () => {
+    const next = nextTailFollowState(pinning(0), {
+      desiredScrollTop: 4300,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next).toEqual({ mode: 'pin-turn-top', target: 5000 });
+  });
+
+  it('ignores the gap tolerance while pinned', () => {
+    // The blank below a freshly submitted Turn is the point of the mode.
+    const next = nextTailFollowState(pinning(5000), {
+      desiredScrollTop: 4300,
+      pinScrollTop: 5000,
+      maxGapPx: 10,
+    });
+    expect(next.target).toBe(5000);
+  });
+
+  it('stays put while a collapse shrinks content under the pin', () => {
+    const first = nextTailFollowState(pinning(0), {
+      desiredScrollTop: 4400,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    const afterCollapse = nextTailFollowState(first, {
+      desiredScrollTop: 4100,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    expect(afterCollapse.target).toBe(5000);
+  });
+
+  it('hands off to hold-tail once the answer overflows the viewport', () => {
+    const next = nextTailFollowState(pinning(5000), {
+      desiredScrollTop: 5000,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next).toEqual({ mode: 'hold-tail', target: 5000 });
+  });
+
+  it('does not regress after handing off', () => {
+    const handoff = nextTailFollowState(pinning(5000), {
+      desiredScrollTop: 5200,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    expect(handoff.mode).toBe('hold-tail');
+    const afterCollapse = nextTailFollowState(handoff, {
+      desiredScrollTop: 5000,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    });
+    expect(afterCollapse.target).toBe(5200);
+  });
+
+  it('falls back to the tail target until the Turn can be measured', () => {
+    const next = nextTailFollowState(pinning(0), {
+      desiredScrollTop: 4300,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    });
+    expect(next).toEqual({ mode: 'pin-turn-top', target: 4300 });
+  });
+});
+
+describe('memorylessFollowState', () => {
+  it('drops a held collapse gap the user has already scrolled away from', () => {
+    // The hold rule's refusal to move backwards protects a viewport it has been
+    // holding continuously. After a takeover there is nothing left to protect,
+    // and reinstating the old offset would land on a position nobody chose.
+    expect(memorylessFollowState('hold-tail', {
+      desiredScrollTop: 3700,
+      pinScrollTop: null,
+      maxGapPx: MAX_GAP,
+    }).target).toBe(3700);
+  });
+
+  it('still prefers a pinned Turn over the content end', () => {
+    expect(memorylessFollowState('pin-turn-top', {
+      desiredScrollTop: 4300,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    })).toEqual({ mode: 'pin-turn-top', target: 5000 });
+  });
+
+  it('reports the crossover so a suspended pin can be retired', () => {
+    // No frame loop runs while the user owns the viewport, so this is the only
+    // place a pin whose answer outgrew the viewport can be noticed.
+    expect(memorylessFollowState('pin-turn-top', {
+      desiredScrollTop: 5200,
+      pinScrollTop: 5000,
+      maxGapPx: MAX_GAP,
+    })).toEqual({ mode: 'hold-tail', target: 5200 });
+  });
+});
+
+describe('tailSnapBackScrollTop', () => {
+  it('returns the follow target when the viewport rests below it', () => {
+    expect(tailSnapBackScrollTop({
+      scrollTop: 4000 + SPACER,
+      followTargetScrollTop: 4000,
+      thresholdPx: THRESHOLD,
+    })).toBe(4000);
+  });
+
+  it('ignores an overshoot inside the tolerance', () => {
+    expect(tailSnapBackScrollTop({
+      scrollTop: 4000 + THRESHOLD,
+      followTargetScrollTop: 4000,
+      thresholdPx: THRESHOLD,
+    })).toBeNull();
+  });
+
+  it('never fires while the user reads history above the target', () => {
+    // Reading upwards is the case the whole rule must stay away from: the
+    // region below the target carries no content, the region above is the
+    // transcript.
+    expect(tailSnapBackScrollTop({
+      scrollTop: 100,
+      followTargetScrollTop: 4000,
+      thresholdPx: THRESHOLD,
+    })).toBeNull();
+  });
+
+  it('leaves a pinned Turn alone even though it sits past the content end', () => {
+    // The pin *is* the target here, so the blank below it is not an overshoot.
+    expect(tailSnapBackScrollTop({
+      scrollTop: 5000,
+      followTargetScrollTop: 5000,
+      thresholdPx: THRESHOLD,
+    })).toBeNull();
+  });
+});
+
+describe('isViewportAtTail', () => {
+  const contentEnd = 4000;
+
+  it('counts the content end itself', () => {
+    expect(isViewportAtTail({
+      scrollTop: contentEnd,
+      contentEndScrollTop: contentEnd,
+      followTargetScrollTop: contentEnd,
+      thresholdPx: THRESHOLD,
+    })).toBe(true);
+  });
+
+  it('counts a pinned Turn, which is at the tail by its own rule', () => {
+    expect(isViewportAtTail({
+      scrollTop: 5000,
+      contentEndScrollTop: contentEnd,
+      followTargetScrollTop: 5000,
+      thresholdPx: THRESHOLD,
+    })).toBe(true);
+  });
+
+  it('excludes a viewport parked in the reserved blank', () => {
+    // The one-sided test this replaced reported "at the bottom" here, which hid
+    // the jump-to-latest affordance on a screen with nothing on it.
+    expect(isViewportAtTail({
+      scrollTop: contentEnd + SPACER,
+      contentEndScrollTop: contentEnd,
+      followTargetScrollTop: contentEnd,
+      thresholdPx: THRESHOLD,
+    })).toBe(false);
+  });
+
+  it('excludes a viewport scrolled up into the transcript', () => {
+    expect(isViewportAtTail({
+      scrollTop: 100,
+      contentEndScrollTop: contentEnd,
+      followTargetScrollTop: contentEnd,
+      thresholdPx: THRESHOLD,
+    })).toBe(false);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.ts b/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.ts
new file mode 100644
index 0000000000..529a07ef26
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatTailFollow.ts
@@ -0,0 +1,250 @@
+/**
+ * FlowChat tail-follow geometry.
+ *
+ * The transcript keeps a resident tail spacer below the real content, sized
+ * from the viewport and the current input-stack inset. The spacer is static: it
+ * never reacts to a measured content change, so it is a reservation rather than
+ * a compensation.
+ *
+ * The spacer alone does not stabilise the viewport. It only removes the
+ * browser's forced `scrollTop` clamp when content shrinks; the follow target
+ * below is what then chooses to stay where it is instead of dragging earlier
+ * content down. Both halves are required.
+ */
+
+/** Blank tail tolerated below the live output, as a share of the viewport. */
+export const FLOWCHAT_TAIL_HOLD_GAP_RATIO = 0.6;
+
+/**
+ * Distance from an owned offset still treated as being on it.
+ *
+ * One constant deliberately serves both "the viewport is at the end" and "the
+ * viewport has come to rest too far below the end". They are the two sides of
+ * the same band; separate tolerances would leave a seam where the jump-to-latest
+ * affordance is shown but nothing snaps back, or the reverse.
+ */
+export const FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX = 50;
+
+export type TailFollowMode = 'pin-turn-top' | 'hold-tail';
+
+export interface TailFollowState {
+  mode: TailFollowMode;
+  /** Scroll offset the viewport currently owns. */
+  target: number;
+}
+
+export interface TailFollowGeometry {
+  scrollHeight: number;
+  clientHeight: number;
+  tailSpacerPx: number;
+}
+
+export interface TailFollowInput {
+  /** Offset placing the end of real content at the viewport bottom. */
+  desiredScrollTop: number;
+  /** Offset placing the pinned Turn's user message at the viewport top. */
+  pinScrollTop: number | null;
+  /** Largest blank tail the hold rule accepts before it gives ground. */
+  maxGapPx: number;
+}
+
+/**
+ * Breathing gap held above a Turn whose user message is aligned to the viewport
+ * top.
+ *
+ * The first Turn gets this for free: `.message-list-header` sits above it in
+ * the scroll content, so a transcript resting at `scrollTop: 0` already shows
+ * the gap. Every other Turn is reached by a scroll that lands its message flat
+ * on the top edge, which read as a different alignment rather than the same one
+ * — so top-aligning aims at `top - this` instead, and the header renders at
+ * exactly this height so the two cannot drift apart.
+ */
+export const FLOWCHAT_TURN_TOP_GAP_PX = 8;
+
+/**
+ * Lower bound on the rendered height of a user-message item.
+ *
+ * This sizes the pin reserve below, so it must be an *under*estimate. Too low
+ * only leaves the pin a few spare pixels; too high makes the pinned offset
+ * exceed the scroll range, and the browser clamps the Turn back down from the
+ * viewport top with the follow loop rewriting the clamped offset every frame.
+ * A single line with no timestamp row is comfortably above this at any
+ * supported font size, and the item is free to be taller.
+ */
+const PINNED_TURN_MIN_ITEM_HEIGHT_PX = 40;
+
+/**
+ * Height of the resident tail spacer.
+ *
+ * The spacer exists to keep two offsets inside the scroll range, and it is
+ * sized to the larger of what they need — one viewport was simply the cheapest
+ * bound that covered both, and it costs a full screen of blank at the end of
+ * the scroll range.
+ *
+ * - **A pinned Turn.** Worst case its user message is the newest item and
+ *   nothing has answered it yet, so everything below the message top is the
+ *   message, the input-stack inset, and this spacer. Reserving
+ *   `clientHeight - bottomInsetPx - PINNED_TURN_MIN_ITEM_HEIGHT_PX` is exactly
+ *   enough to put that message on the top edge.
+ * - **A held collapse gap.** `hold-tail` keeps an offset up to
+ *   `tailHoldMaxGapPx` past the content end, and an offset the browser clamps
+ *   is an offset the hold rule does not actually get to hold.
+ *
+ * `bottomInsetPx` is the input-stack footer, which grows as the composer does.
+ * That is a layout input, not a content measurement — and while the pin reserve
+ * is the binding bound the two sum to a constant, so growing the composer moves
+ * the content end without moving the end of the scroll range.
+ */
+export function tailSpacerPxForViewport(
+  clientHeight: number,
+  bottomInsetPx: number,
+): number {
+  const pinnedTurnReservePx = clientHeight - bottomInsetPx - PINNED_TURN_MIN_ITEM_HEIGHT_PX;
+  return Math.max(0, Math.round(Math.max(pinnedTurnReservePx, tailHoldMaxGapPx(clientHeight))));
+}
+
+/**
+ * Scroll offset that places the end of real content at the viewport bottom.
+ * The tail spacer sits below that point and is deliberately excluded.
+ */
+export function contentEndScrollTop(geometry: TailFollowGeometry): number {
+  return Math.max(
+    0,
+    geometry.scrollHeight - geometry.tailSpacerPx - geometry.clientHeight,
+  );
+}
+
+export function tailHoldMaxGapPx(clientHeight: number): number {
+  return Math.max(0, Math.round(clientHeight * FLOWCHAT_TAIL_HOLD_GAP_RATIO));
+}
+
+export interface TurnTopAlignmentInput {
+  /** Offset that would place the Turn's user message at the viewport top. */
+  turnTopScrollTop: number;
+  contentEndScrollTop: number;
+}
+
+/**
+ * Whether top-aligning a Turn would park the viewport in the reserved blank.
+ *
+ * The blank belongs to follow-output. `pin-turn-top` holds it for output that
+ * is on its way, and nothing is on its way under a Turn the user navigated to
+ * — so a navigation that lands there shows a screen of nothing, and the snap
+ * back then reclaims it as a second, visible movement.
+ *
+ * A clamp at the content end is the whole rule. There is no "is this the last
+ * Turn" test and no measurement of what lies below it: a Turn with a viewport
+ * of content under it has its top above the content end already, so this
+ * returns false and the alignment stands. Before the resident spacer the
+ * browser did exactly this for free, by clamping at the end of the scroll
+ * range; reserving the blank is what removed the clamp.
+ */
+export function turnTopAlignmentEntersReservedBlank(
+  input: TurnTopAlignmentInput,
+): boolean {
+  return input.turnTopScrollTop > input.contentEndScrollTop;
+}
+
+/**
+ * Resolve the next follow target.
+ *
+ * `pin-turn-top` holds a freshly submitted Turn at the viewport top while its
+ * answer is still shorter than one viewport, then hands off to `hold-tail` at
+ * the crossover. The pinned phase ignores `maxGapPx`: the blank below a new
+ * Turn is the point of the mode, not a failure of it.
+ *
+ * `hold-tail` never moves backwards for free. It keeps its previous offset when
+ * content shrinks, which is what leaves earlier content visually still, and
+ * only gives ground once the blank below the live output exceeds `maxGapPx`.
+ */
+export function nextTailFollowState(
+  previous: TailFollowState,
+  input: TailFollowInput,
+): TailFollowState {
+  if (previous.mode === 'pin-turn-top') {
+    if (input.pinScrollTop === null) {
+      // The Turn is not measurable yet; behave like a plain tail follow so the
+      // viewport is never stranded, and pin once the element resolves.
+      return { mode: 'pin-turn-top', target: input.desiredScrollTop };
+    }
+    if (input.desiredScrollTop < input.pinScrollTop) {
+      return { mode: 'pin-turn-top', target: input.pinScrollTop };
+    }
+    return { mode: 'hold-tail', target: input.desiredScrollTop };
+  }
+
+  return {
+    mode: 'hold-tail',
+    target: Math.max(
+      input.desiredScrollTop,
+      Math.min(previous.target, input.desiredScrollTop + input.maxGapPx),
+    ),
+  };
+}
+
+/**
+ * The state the follow rule would hold right now, judged from live geometry
+ * alone.
+ *
+ * `hold-tail` normally refuses to move backwards, and that refusal is what
+ * keeps a collapse from dragging earlier content down. The memory it refuses
+ * with belongs to a viewport the follow rule has been holding continuously;
+ * once the user has taken over and come to rest somewhere else there is nothing
+ * left to preserve, and carrying the stale offset forward would land them on a
+ * position neither side chose.
+ *
+ * The returned mode still matters: a pinned Turn whose answer has outgrown the
+ * viewport reports `hold-tail`, which is how a caller learns the pin has
+ * crossed over even though no follow loop was running to notice.
+ */
+export function memorylessFollowState(
+  mode: TailFollowMode,
+  input: TailFollowInput,
+): TailFollowState {
+  return nextTailFollowState({ mode, target: input.desiredScrollTop }, input);
+}
+
+export interface TailSnapBackInput {
+  scrollTop: number;
+  /** Offset the follow rule owns, from `memorylessFollowTarget`. */
+  followTargetScrollTop: number;
+  thresholdPx: number;
+}
+
+/**
+ * Offset to snap back to once a gesture has come to rest below the follow
+ * target, or `null` when it has not.
+ *
+ * Only the region *below* the target qualifies, and that region is the reserved
+ * tail spacer. It carries no content, so a gesture ending there can only mean
+ * "take me to the end" — the one direction in which reading intent from
+ * geometry is unambiguous. Scrolling up to read history can never satisfy this,
+ * and neither can a pinned Turn or a held collapse gap, because both are the
+ * target rather than a departure from it.
+ */
+export function tailSnapBackScrollTop(input: TailSnapBackInput): number | null {
+  return input.scrollTop - input.followTargetScrollTop > input.thresholdPx
+    ? input.followTargetScrollTop
+    : null;
+}
+
+export interface ViewportAtTailInput {
+  scrollTop: number;
+  contentEndScrollTop: number;
+  /** Upper bound of the band; the content end when nothing owns the viewport. */
+  followTargetScrollTop: number;
+  thresholdPx: number;
+}
+
+/**
+ * Whether the viewport counts as being at the end of the transcript.
+ *
+ * The band runs from the content end down to whatever the follow rule owns, so
+ * a pinned Turn and a held collapse gap both sit inside it — neither is a
+ * reason to offer a jump to the latest output. Past the lower bound is reserved
+ * blank, which is.
+ */
+export function isViewportAtTail(input: ViewportAtTailInput): boolean {
+  return input.scrollTop >= input.contentEndScrollTop - input.thresholdPx
+    && input.scrollTop <= input.followTargetScrollTop + input.thresholdPx;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.test.ts
new file mode 100644
index 0000000000..ace2fed234
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.test.ts
@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+import {
+  ANCHOR_SETTLE_FRAMES,
+  USER_DRIVEN_SCROLL_WINDOW_MS,
+  selectViewportAnchor,
+  shouldCaptureViewportAnchorOnScroll,
+  viewportAnchorCorrectionPx,
+  type ViewportAnchorCandidate,
+} from './flowChatViewportAnchor';
+
+function candidate(
+  turnId: string | null,
+  top: number,
+  height = 40,
+): ViewportAnchorCandidate {
+  return {
+    turnId,
+    offsetFromScrollerTop: top,
+    bottomOffsetFromScrollerTop: top + height,
+  };
+}
+
+const VIEWPORT_HEIGHT = 800;
+
+describe('selectViewportAnchor', () => {
+  it('anchors to the topmost Turn the viewport still shows', () => {
+    expect(selectViewportAnchor([
+      candidate('turn-1', -900),
+      // Scrolled past the top edge, but its Turn still fills the screen.
+      candidate('turn-2', -120, 300),
+      candidate('turn-3', 260),
+    ], VIEWPORT_HEIGHT)).toEqual({ turnId: 'turn-2', offsetFromScrollerTop: -120 });
+  });
+
+  it('keeps a Turn that is scrolled past the top edge but still on screen', () => {
+    // Its top is above the viewport and its bottom is not: this is what the
+    // reader is looking at, and the offset that describes it is negative.
+    expect(selectViewportAnchor([candidate('turn-1', -30)], VIEWPORT_HEIGHT))
+      .toEqual({ turnId: 'turn-1', offsetFromScrollerTop: -30 });
+  });
+
+  it('has no anchor when every Turn is above the viewport', () => {
+    expect(selectViewportAnchor([
+      candidate('turn-1', -900),
+      candidate('turn-2', -400, 300),
+    ], VIEWPORT_HEIGHT)).toBeNull();
+  });
+
+  it('has no anchor when every Turn is below the viewport', () => {
+    /*
+     * The reader is inside an answer taller than the screen, so the Turn they
+     * are reading has no marker on it and the next one is far past the bottom
+     * edge. Measured: an anchor taken at an offset of 1695.5px in a scroller at
+     * most 1325.7px tall — at least 370px out of sight.
+     *
+     * Anchoring there inverts what the anchor is for. Content below the
+     * viewport re-measuring moves nothing the reader can see, so every
+     * correction against a marker down there is a displacement being created
+     * rather than repaired.
+     */
+    expect(selectViewportAnchor([
+      candidate('turn-1', -1_700),
+      candidate('turn-2', 1_695.5),
+    ], VIEWPORT_HEIGHT)).toBeNull();
+  });
+
+  it('has no anchor when the topmost visible candidate carries no Turn', () => {
+    // Falling through to the next one would anchor to a Turn further down the
+    // screen than the reading position belongs to.
+    expect(selectViewportAnchor([
+      candidate(null, -30),
+      candidate('turn-2', 260),
+    ], VIEWPORT_HEIGHT)).toBeNull();
+  });
+
+  it('anchors to the last Turn on screen when it is the only one', () => {
+    // The bottom edge is a bound, not a preference: a marker just inside it is
+    // still something the reader can see.
+    expect(selectViewportAnchor(
+      [candidate('turn-9', VIEWPORT_HEIGHT - 1)],
+      VIEWPORT_HEIGHT,
+    )).toEqual({ turnId: 'turn-9', offsetFromScrollerTop: VIEWPORT_HEIGHT - 1 });
+  });
+
+  it('has no anchor when nothing is rendered', () => {
+    expect(selectViewportAnchor([], VIEWPORT_HEIGHT)).toBeNull();
+  });
+});
+
+describe('viewportAnchorCorrectionPx', () => {
+  it('reports the drift as the amount scrollTop has to grow', () => {
+    const anchor = { turnId: 'turn-1', offsetFromScrollerTop: -120 };
+    // The Turn ended up 880px further down the screen than it was.
+    expect(viewportAnchorCorrectionPx(anchor, 760)).toBe(880);
+  });
+
+  it('is negative when the transcript moved up under the reader', () => {
+    const anchor = { turnId: 'turn-1', offsetFromScrollerTop: 200 };
+    expect(viewportAnchorCorrectionPx(anchor, -60)).toBe(-260);
+  });
+
+  it('is zero when the Turn is where it was', () => {
+    const anchor = { turnId: 'turn-1', offsetFromScrollerTop: 200 };
+    expect(viewportAnchorCorrectionPx(anchor, 200)).toBe(0);
+  });
+});
+
+describe('shouldCaptureViewportAnchorOnScroll', () => {
+  it('captures a scroll the user drove', () => {
+    expect(shouldCaptureViewportAnchorOnScroll(true, 40)).toBe(true);
+  });
+
+  it('ignores a scroll nobody asked for', () => {
+    // The transcript moved under the reader. Re-anchoring here would adopt the
+    // displacement as the new reading position.
+    expect(shouldCaptureViewportAnchorOnScroll(true, USER_DRIVEN_SCROLL_WINDOW_MS + 1))
+      .toBe(false);
+  });
+
+  it('captures without intent when there is no anchor yet', () => {
+    expect(shouldCaptureViewportAnchorOnScroll(false, 10_000)).toBe(true);
+  });
+});
+
+describe('the anchor constants', () => {
+  it('holds the anchor over more than a couple of frames', () => {
+    // A prepend settles through a margin, then padding, then a margin release,
+    // and no single callback covers all of it.
+    expect(ANCHOR_SETTLE_FRAMES).toBeGreaterThan(2);
+  });
+
+  it('keeps the intent window shorter than a deliberate pause', () => {
+    expect(USER_DRIVEN_SCROLL_WINDOW_MS).toBeLessThan(500);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.ts
new file mode 100644
index 0000000000..72e8a6baf3
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportAnchor.ts
@@ -0,0 +1,229 @@
+/**
+ * Geometry for the element-anchored viewport keeper.
+ *
+ * The keeper restores a *relationship* — a Turn at an offset from the viewport
+ * top — rather than replaying a scroll delta. That is what makes it idempotent:
+ * applying it when nothing moved is a no-op, and applying it twice is the same
+ * as applying it once. Every offset here is measured from the scroller's top
+ * edge for the same reason. No absolute `scrollTop` survives a re-measure, but
+ * the offset of a rendered Turn from the viewport top does.
+ *
+ * Nothing here knows which virtualizer placed the items, or that there is one.
+ */
+
+/**
+ * DOM contract for the anchor element.
+ *
+ * A Turn's user message is the anchor: it is the one item every Turn has, it is
+ * short enough that its own height rarely changes under a re-measure, and it is
+ * what the reader is looking for when they scroll back through history.
+ */
+const TURN_ANCHOR_SELECTOR = '.virtual-item-wrapper[data-item-type="user-message"]';
+
+/**
+ * Where the user is reading, expressed as a Turn rather than an offset.
+ *
+ * `scrollTop` is not a stable description of a reading position in a list whose
+ * item heights are discovered lazily: every late measurement rewrites the offset
+ * of everything below it, so the same number means a different place.
+ */
+export interface ViewportAnchor {
+  turnId: string;
+  offsetFromScrollerTop: number;
+}
+
+export interface ViewportAnchorCandidate {
+  turnId: string | null;
+  offsetFromScrollerTop: number;
+  bottomOffsetFromScrollerTop: number;
+}
+
+/**
+ * How long after a wheel, touch, key, or scrollbar press the scrolling it
+ * causes still counts as the user's.
+ *
+ * The anchor has to distinguish "the user went somewhere" from "the transcript
+ * moved underneath them", and a scroll event says nothing about which. Intent
+ * events do — but they fire *before* the scroll they cause, so the position
+ * worth recording is the one that arrives shortly after, not the one at the
+ * moment of the gesture. Recording at the gesture instead is what drags a
+ * scrolling viewport backwards.
+ *
+ * Short enough that a mutation arriving in a pause is not mistaken for the
+ * user. Deliberately *not* long enough to cover every scroll a gesture causes,
+ * and it cannot be: the window runs from the input event while the scrolling it
+ * authorises outlives it, and a busy main thread delivers the whole travel in
+ * one event after it has closed. Measured over 181 seconds of reading:
+ * fourteen gestures produced one capture.
+ *
+ * So this decides whether a *new* Turn is taken as the reading position, not
+ * whether the reader's travel counts. A scroll that falls outside it and that
+ * no registered writer owns is carried instead — see `captureAnchorForScroll`.
+ */
+export const USER_DRIVEN_SCROLL_WINDOW_MS = 200;
+
+/**
+ * Frames the viewport anchor keeps being re-asserted after the transcript moves.
+ *
+ * A virtualizer settles a prepend over several frames — a margin holds the
+ * position, then the real item heights land in padding, then the margin is
+ * released — and a margin change fires no ResizeObserver at all. There is
+ * therefore no single callback that can catch every step, so the anchor is
+ * re-asserted for a window instead. Measured: four consecutive painted frames
+ * displaced by 896px before the correction arrived, which is the flicker.
+ *
+ * Refreshed whenever a correction is actually needed, so a long settle keeps
+ * the window open rather than running out halfway through it.
+ */
+export const ANCHOR_SETTLE_FRAMES = 20;
+
+/**
+ * Attempts an anchored Turn may be missing from the rendered window before the
+ * anchor is given up on.
+ *
+ * Absent for one frame is normal and absent for good is not, and only time
+ * tells them apart. The virtualizer windows from a scroll offset it learns from
+ * scroll events, so the commit that prepends history renders the position the
+ * reader has just been moved off — the Turn arrives a frame later. Dropping on
+ * the first miss threw the reading position away exactly there, at four
+ * junctions in a row.
+ *
+ * Long enough to outlast that, and to cover the settle window it usually runs
+ * inside; short enough that a Turn scrolled far out of the window is released
+ * rather than held onto, since a stale anchor is a correction waiting to
+ * happen. Reaching the end is not a failure — the next scroll anchors to a Turn
+ * that is actually on screen.
+ */
+export const ANCHOR_MISSING_TURN_ATTEMPTS = 20;
+
+/** Below this a correction is rounding, not movement. */
+export const ANCHOR_CORRECTION_EPSILON_PX = 0.5;
+
+/**
+ * Above this a correction is something the reader can feel.
+ *
+ * Used to keep the two apart in the trail, and only there. Corrections repeat
+ * at frame rate so they are coalesced, and a single run collapses whatever it
+ * spans into its first sample: two rounds of diagnosis in a row read `0.7px`
+ * against a suppressed travel of 458.7px over seven samples, which is a
+ * different fault entirely and could not be attributed to any anchor. A run
+ * that a real correction can fall into unseen is not a trail.
+ */
+export const ANCHOR_NOTABLE_CORRECTION_PX = 8;
+
+/**
+ * The topmost Turn the viewport still shows any part of.
+ *
+ * A candidate that has not reached the top edge yet is the one the reader is
+ * looking at, so the first one whose bottom is inside the viewport wins. If
+ * that candidate carries no Turn there is no anchor at all — falling through to
+ * the next one would anchor to a Turn further down the screen than the one the
+ * reading position belongs to.
+ *
+ * **Both edges are tested, and the bottom one is not optional.** A Turn marker
+ * is the Turn's user message, which is short, so a reader inside an answer
+ * taller than the viewport has no marker on screen at all — and "the first one
+ * below the top edge" then answers with the *next* Turn, however far down that
+ * is. Measured: anchored at an offset of 1695.5px with the scroller at most
+ * 1325.7px tall, so the anchor was at least 370px below the bottom edge.
+ *
+ * That is not a near miss, it inverts what the anchor is for. Content above the
+ * viewport re-measuring moves everything below it, the on-screen transcript
+ * included, so a marker above the fold is a faithful proxy for what the reader
+ * sees. Content *below* the viewport re-measuring moves nothing they can see —
+ * so a marker below the fold reports movement that did not happen, and the
+ * correction manufactures the displacement instead of repairing one.
+ *
+ * No anchor is the honest answer there, and it is the one this already gives
+ * when every marker has gone off the top. A reader with no marker on screen
+ * gets no correction; the next scroll takes one as soon as a Turn is visible.
+ */
+export function selectViewportAnchor(
+  candidates: readonly ViewportAnchorCandidate[],
+  viewportHeightPx: number,
+): ViewportAnchor | null {
+  const candidate = candidates.find(entry => (
+    entry.bottomOffsetFromScrollerTop > 0 && entry.offsetFromScrollerTop < viewportHeightPx
+  ));
+  if (!candidate?.turnId) return null;
+  return {
+    turnId: candidate.turnId,
+    offsetFromScrollerTop: candidate.offsetFromScrollerTop,
+  };
+}
+
+/**
+ * How far the anchored Turn has drifted from where it was.
+ *
+ * Positive means it moved down the screen, which is also how much `scrollTop`
+ * has to grow to put it back — the sign is the correction, not its opposite.
+ *
+ * **Only meaningful against an anchor whose offset was agreed at the viewport
+ * position it is being measured from.** A displacement moves the transcript
+ * underneath a `scrollTop` that does not change; that is what makes it a
+ * displacement. So any change to `scrollTop` since the offset was agreed
+ * belongs to whoever made it, and has to be taken into the anchor before this
+ * is asked — the caller does that, and the two halves move together there.
+ *
+ * Subtracting it here instead was tried and is why this note exists. It leaves
+ * the offset and the position it was agreed at free to drift apart, and a frame
+ * with nothing to correct then banks the reader's travel as a debt the next
+ * frame collects: measured as a 32px scroll and an 81px scroll each reported
+ * back as a correction of exactly itself.
+ */
+export function viewportAnchorCorrectionPx(
+  anchor: ViewportAnchor,
+  currentOffsetFromScrollerTop: number,
+): number {
+  return currentOffsetFromScrollerTop - anchor.offsetFromScrollerTop;
+}
+
+/**
+ * Whether a scroll event should move the anchor to where the viewport now is.
+ *
+ * Keying off "did the content height change" instead does not work: lazy
+ * measurement changes it on almost every frame, so the anchor froze seconds in
+ * the past and the keeper spent its corrections dragging a scrolling viewport
+ * backwards. Measured: 1075 blocked captures against 8 accepted ones, and a
+ * 1037px correction against the user's own gesture.
+ *
+ * Having no anchor overrides the window, which is also what bootstraps the very
+ * first one.
+ *
+ * False is not "ignore this scroll". It only means the scroll is not proof of a
+ * new reading position; whether the reader's travel is credited is a separate
+ * question, answered by who owns the viewport.
+ */
+export function shouldCaptureViewportAnchorOnScroll(
+  hasAnchor: boolean,
+  msSinceUserScrollIntent: number,
+): boolean {
+  return !hasAnchor || msSinceUserScrollIntent <= USER_DRIVEN_SCROLL_WINDOW_MS;
+}
+
+export function readViewportAnchorCandidates(scroller: HTMLElement): ViewportAnchorCandidate[] {
+  const scrollerTop = scroller.getBoundingClientRect().top;
+  return Array.from(
+    scroller.querySelectorAll<HTMLElement>(TURN_ANCHOR_SELECTOR),
+  ).map(element => {
+    const rect = element.getBoundingClientRect();
+    return {
+      turnId: element.dataset.turnId ?? null,
+      offsetFromScrollerTop: rect.top - scrollerTop,
+      bottomOffsetFromScrollerTop: rect.bottom - scrollerTop,
+    };
+  });
+}
+
+export function findRenderedTurnAnchorElement(
+  scroller: HTMLElement | null,
+  turnId: string,
+): HTMLElement | null {
+  return Array.from(
+    scroller?.querySelectorAll<HTMLElement>(TURN_ANCHOR_SELECTOR) ?? [],
+  ).find(element => element.dataset.turnId === turnId) ?? null;
+}
+
+export function readTurnAnchorOffsetPx(scroller: HTMLElement, element: HTMLElement): number {
+  return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.test.ts
new file mode 100644
index 0000000000..7237a89619
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it } from 'vitest';
+import {
+  activeViewportClaim,
+  canOwnViewport,
+  canShiftViewport,
+  claimViewport,
+  defaultViewportHoldMs,
+  FLOWCHAT_VIEWPORT_OWNERS,
+  releaseViewport,
+  type ViewportClaim,
+} from './flowChatViewportOwnership';
+
+const NOW = 1_000;
+
+/**
+ * A claim already standing. An omitted hold is the shape only an owner that
+ * releases can have — see `defaultViewportHoldMs`.
+ */
+function heldBy(
+  owner: ViewportClaim['owner'],
+  options?: { holdForMs?: number; atMs?: number },
+): ViewportClaim {
+  const claimedAtMs = options?.atMs ?? NOW;
+  return {
+    owner,
+    claimedAtMs,
+    expiresAtMs: options?.holdForMs === undefined
+      ? Number.POSITIVE_INFINITY
+      : claimedAtMs + options.holdForMs,
+  };
+}
+
+describe('the order of viewport owners', () => {
+  it('puts the reader first and the corrections last', () => {
+    // The order is the whole design, so it is asserted rather than assumed.
+    expect(FLOWCHAT_VIEWPORT_OWNERS).toEqual([
+      'user-gesture',
+      'one-shot-navigation',
+      'snap-back',
+      'follow-output',
+      'layout-correction',
+    ]);
+  });
+
+  it('does not rank a displacement repair, which is a different question', () => {
+    // Putting the reader back where a prepend or a late measurement moved them
+    // is `canShiftViewport`, and its answer for the reader's own gesture is the
+    // opposite of what any ranking here could give it.
+    expect(FLOWCHAT_VIEWPORT_OWNERS).not.toContain('anchor-correction');
+  });
+
+  it('does not rank the opening reveal, which is a phase and not a writer', () => {
+    // Follow-output is what moves the viewport while the transcript is hidden.
+    // A claim standing in for the reveal would outrank it and refuse it.
+    expect(FLOWCHAT_VIEWPORT_OWNERS).not.toContain('opening-reveal');
+  });
+});
+
+describe('claimViewport', () => {
+  it('grants an unheld viewport to anyone', () => {
+    const outcome = claimViewport(null, { owner: 'layout-correction', nowMs: NOW });
+    expect(outcome.granted).toBe(true);
+    expect(outcome.claim?.owner).toBe('layout-correction');
+  });
+
+  it('lets a gesture take the viewport from the follow loop', () => {
+    const outcome = claimViewport(heldBy('follow-output'), {
+      owner: 'user-gesture',
+      nowMs: NOW,
+    });
+    expect(outcome.granted).toBe(true);
+    expect(outcome.claim?.owner).toBe('user-gesture');
+  });
+
+  it('refuses a correction while a snap back is animating', () => {
+    // The failure this register exists for: the anchor read the snap's own
+    // travel as a displacement, and the write cancelled the animation. It is
+    // `canShiftViewport` that refuses the anchor now, on the same grounds.
+    const outcome = claimViewport(heldBy('snap-back', { holdForMs: 1_200 }), {
+      owner: 'layout-correction',
+      nowMs: NOW,
+    });
+    expect(outcome.granted).toBe(false);
+    expect(outcome.claim?.owner).toBe('snap-back');
+  });
+
+  it('leaves the register untouched when it refuses', () => {
+    const held = heldBy('one-shot-navigation', { holdForMs: 600 });
+    const outcome = claimViewport(held, { owner: 'follow-output', nowMs: NOW });
+    expect(outcome.granted).toBe(false);
+    expect(outcome.claim).toEqual(held);
+  });
+
+  it('lets an owner renew its own claim', () => {
+    // How a continuous writer holds on, and how a correction runs on
+    // consecutive frames.
+    const outcome = claimViewport(heldBy('follow-output'), {
+      owner: 'follow-output',
+      nowMs: NOW + 16,
+    });
+    expect(outcome.granted).toBe(true);
+    expect(outcome.claim?.claimedAtMs).toBe(NOW + 16);
+  });
+
+  it('grants a lapsed viewport to a lower priority', () => {
+    const gesture = heldBy('user-gesture', { holdForMs: 200 });
+    const outcome = claimViewport(gesture, {
+      owner: 'layout-correction',
+      nowMs: NOW + 201,
+    });
+    expect(outcome.granted).toBe(true);
+    expect(outcome.claim?.owner).toBe('layout-correction');
+  });
+
+  it('holds a claim without an expiry until it is released', () => {
+    const outcome = claimViewport(null, { owner: 'follow-output', nowMs: NOW });
+    expect(outcome.claim?.expiresAtMs).toBe(Number.POSITIVE_INFINITY);
+    expect(canOwnViewport(outcome.claim, 'layout-correction', NOW + 1_000_000)).toBe(false);
+  });
+
+  it('only lets an owner that releases hold the viewport indefinitely', () => {
+    // Follow-output is the one writer with an `exitFollowOutput`. Everything
+    // else that said nothing about a window would hold the viewport for the
+    // rest of the session, and nothing below it could ever write again.
+    for (const owner of FLOWCHAT_VIEWPORT_OWNERS) {
+      expect(defaultViewportHoldMs(owner)).toBe(
+        owner === 'follow-output' ? Number.POSITIVE_INFINITY : 0,
+      );
+    }
+  });
+
+  it('lapses a one-shot claim that named no window, rather than starving follow', () => {
+    /*
+     * Measured on session open: the virtualizer placed the scroller at 0 before
+     * any aim of ours, the write took an unbounded claim, and follow-output was
+     * refused for the whole opening reveal — the transcript stayed at the top
+     * of its loaded window instead of at the newest Turn.
+     */
+    const stray = claimViewport(null, { owner: 'one-shot-navigation', nowMs: NOW });
+    expect(stray.granted).toBe(true);
+
+    const follow = claimViewport(stray.claim, { owner: 'follow-output', nowMs: NOW });
+    expect(follow.granted).toBe(true);
+    expect(follow.claim?.owner).toBe('follow-output');
+  });
+
+  it('still resolves a correction against whoever holds the viewport', () => {
+    // A zero-length hold is not the absence of a claim: the question it answers
+    // is whether the write happens at all.
+    const outcome = claimViewport(heldBy('snap-back', { holdForMs: 1_200 }), {
+      owner: 'layout-correction',
+      nowMs: NOW + 16,
+    });
+    expect(outcome.granted).toBe(false);
+  });
+});
+
+describe('canShiftViewport', () => {
+  it('lets a displacement through while the reader holds the viewport', () => {
+    /*
+     * The failure this separates out: history pages in only while the reader
+     * scrolls up into it, so a gesture refusing the compensation refused all of
+     * them. 2494px of history arrived, `scrollTop` stayed at 40, and the
+     * transcript jumped back thirteen Turns.
+     */
+    expect(canShiftViewport(heldBy('user-gesture', { holdForMs: 200 }), NOW)).toBe(true);
+  });
+
+  it('leaves the displacement to anyone holding a target', () => {
+    // All three re-assert a position of their own, so a shift underneath is
+    // either redundant or a fight.
+    expect(canShiftViewport(heldBy('follow-output'), NOW)).toBe(false);
+    expect(canShiftViewport(heldBy('one-shot-navigation', { holdForMs: 600 }), NOW)).toBe(false);
+    expect(canShiftViewport(heldBy('snap-back', { holdForMs: 1_200 }), NOW)).toBe(false);
+  });
+
+  it('shifts an unheld viewport, and one held only by a correction', () => {
+    expect(canShiftViewport(null, NOW)).toBe(true);
+    expect(canShiftViewport(heldBy('layout-correction', { holdForMs: 0 }), NOW)).toBe(true);
+  });
+
+  it('shifts once a target holder has lapsed', () => {
+    expect(canShiftViewport(heldBy('one-shot-navigation', { holdForMs: 600 }), NOW + 601))
+      .toBe(true);
+  });
+});
+
+describe('activeViewportClaim', () => {
+  it('reports a claim that has not lapsed', () => {
+    const claim = heldBy('user-gesture', { holdForMs: 200 });
+    expect(activeViewportClaim(claim, NOW + 199)).toBe(claim);
+  });
+
+  it('reports nothing once the hold has elapsed', () => {
+    // A missed release costs a bounded wait, never a viewport nobody may write.
+    expect(activeViewportClaim(heldBy('snap-back', { holdForMs: 200 }), NOW + 200)).toBeNull();
+  });
+});
+
+describe('releaseViewport', () => {
+  it('gives the viewport back', () => {
+    expect(releaseViewport(heldBy('follow-output'), 'follow-output')).toBeNull();
+  });
+
+  it('ignores a release from an owner that was preempted', () => {
+    // Finishing late must not clear the claim of whoever took over: that
+    // release is indistinguishable from the new owner having finished, and it
+    // would hand the viewport to the next corrector mid-movement.
+    const held = heldBy('user-gesture');
+    expect(releaseViewport(held, 'follow-output')).toEqual(held);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.ts
new file mode 100644
index 0000000000..4ef3c80686
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportOwnership.ts
@@ -0,0 +1,244 @@
+/**
+ * Who is moving the FlowChat viewport right now.
+ *
+ * Several things move it, and each of them has to know not to fight the
+ * others. That was a hand-written predicate per writer, which is O(n²) pairs
+ * and fails the moment one is forgotten: a snap back was missing from the
+ * anchor's copy, so the anchor undid the snap's own 0.7px of travel, the write
+ * cancelled the animation, the cancellation read as a gesture coming to rest,
+ * and the snap was re-issued 958 times over 20 seconds without arriving.
+ *
+ * The pairs collapse into one register. A writer claims the viewport for as
+ * long as it is moving it, and everything else asks the register rather than
+ * asking about each writer.
+ *
+ * The register decides *whether* someone may write. It never decides where the
+ * viewport should go — targets stay with the writer that owns them, and the
+ * correction that restores a reading position stays idempotent. Ordering
+ * answers the question idempotency cannot: whether a movement was ours on
+ * purpose or something to be undone.
+ */
+
+/**
+ * Ordered most authoritative first. The order is the design; everything else
+ * here is bookkeeping.
+ *
+ * - `user-gesture` — the reader's own hands, which nothing overrides.
+ * - `one-shot-navigation` — a Turn, search hit, or focus request being reached.
+ * - `snap-back` — returning from the reserved blank to the follow target.
+ * - `follow-output` — the continuous writer that follows streaming output.
+ * - `layout-correction` — the scroller's own box changed and a viewport nobody
+ *   was following has to be re-aligned to the end it was resting against.
+ *
+ * The last is a correction rather than a movement: it holds the viewport for
+ * the frame it acts in and yields to anything above it, because a movement made
+ * on purpose is not a displacement to undo.
+ *
+ * **Repairing a displacement is not on this list at all.** Putting the reader
+ * back after history arrived above them, or after a late measurement moved the
+ * transcript under them, is `canShiftViewport` — a different question, with a
+ * different answer for the reader's own gesture. See below.
+ *
+ * **The opening reveal is not here, and that is deliberate.** It is a phase
+ * rather than a writer — the thing actually moving the viewport while the
+ * transcript is hidden is follow-output — so ranking it above follow-output
+ * would have follow refused by a claim standing in for itself. One slot cannot
+ * hold a phase and a writer at the same time, so the reveal stays an explicit
+ * condition where corrections are suppressed, alongside this register.
+ */
+export const FLOWCHAT_VIEWPORT_OWNERS = [
+  'user-gesture',
+  'one-shot-navigation',
+  'snap-back',
+  'follow-output',
+  'layout-correction',
+] as const;
+
+export type FlowChatViewportOwner = (typeof FLOWCHAT_VIEWPORT_OWNERS)[number];
+
+function priorityOf(owner: FlowChatViewportOwner): number {
+  return FLOWCHAT_VIEWPORT_OWNERS.indexOf(owner);
+}
+
+/**
+ * How long a one-shot navigation keeps the viewport after issuing its aim.
+ *
+ * The virtualizer re-aims while the measurements under the target move, and
+ * those later writes are the same request — so they have to still be allowed
+ * when they land. There is no signal for the aim settling, so this is a
+ * backstop: long enough to cover the re-aim, short enough that a transcript
+ * which then starts streaming is not held off for noticeably long. A gesture
+ * ends it immediately regardless, which is the rule that matters.
+ */
+export const ONE_SHOT_NAVIGATION_HOLD_MS = 600;
+
+/**
+ * How long a snap back holds the viewport while it animates.
+ *
+ * Released on the settle that follows; this is only the backstop for a
+ * `scrollend` that never comes, because a snap that is never released would
+ * leave the viewport unwritable by everything below it.
+ */
+export const SNAP_BACK_HOLD_MS = 1_200;
+
+/**
+ * The owners that give the viewport back.
+ *
+ * This is the whole of who may hold it indefinitely, because a claim with no
+ * expiry and no release is a viewport nobody below it can ever write again.
+ * Measured, from the trail this register keeps: a library write at session open
+ * took an unbounded claim, and follow-output was refused eleven times over half
+ * a second while the transcript stood at the top of its loaded window — the
+ * session opened on the wrong Turn and stayed there.
+ *
+ * Everything else states its own window. A gesture goes quiet, an animation may
+ * never report completion, a re-aim runs while measurements settle: each of
+ * those ends by wall clock, and saying nothing means the write is instantaneous
+ * and owns only itself.
+ */
+const OWNERS_THAT_RELEASE: ReadonlySet<FlowChatViewportOwner> = new Set([
+  'follow-output',
+]);
+
+/**
+ * How long a claim stands when the writer does not say.
+ *
+ * Zero is not "no claim": the write still resolves against whoever holds the
+ * viewport, which is the question that decides whether it happens at all. It
+ * only means nothing is held afterwards.
+ */
+export function defaultViewportHoldMs(owner: FlowChatViewportOwner): number {
+  return OWNERS_THAT_RELEASE.has(owner) ? Number.POSITIVE_INFINITY : 0;
+}
+
+export interface ViewportClaim {
+  owner: FlowChatViewportOwner;
+  claimedAtMs: number;
+  /**
+   * When the claim lapses without being renewed.
+   *
+   * Only an owner that releases carries `Infinity`; see `OWNERS_THAT_RELEASE`.
+   * Anything whose end is a wall-clock fact carries its own expiry, so that a
+   * missed release costs a bounded wait rather than a viewport nobody may
+   * write.
+   */
+  expiresAtMs: number;
+}
+
+export interface ViewportClaimRequest {
+  owner: FlowChatViewportOwner;
+  nowMs: number;
+  /** Omitted takes `defaultViewportHoldMs`, which only a releaser may hold. */
+  holdForMs?: number;
+}
+
+export interface ViewportClaimOutcome {
+  granted: boolean;
+  /** The register afterwards, whether or not the claim was granted. */
+  claim: ViewportClaim | null;
+}
+
+/** The claim still standing at `nowMs`, or null once it has lapsed. */
+export function activeViewportClaim(
+  claim: ViewportClaim | null,
+  nowMs: number,
+): ViewportClaim | null {
+  if (!claim) return null;
+  return nowMs < claim.expiresAtMs ? claim : null;
+}
+
+/**
+ * Whether `owner` may write the viewport right now.
+ *
+ * An owner is never blocked by itself: renewing is how a continuous writer
+ * holds on, and re-entering is how a correction runs on consecutive frames.
+ */
+export function canOwnViewport(
+  claim: ViewportClaim | null,
+  owner: FlowChatViewportOwner,
+  nowMs: number,
+): boolean {
+  const held = activeViewportClaim(claim, nowMs);
+  return held === null || priorityOf(owner) <= priorityOf(held.owner);
+}
+
+/**
+ * Take the viewport, if the register allows it.
+ *
+ * A refused claim leaves the register untouched — the point of refusing is that
+ * the writer does not act, and a refusal that still recorded something would
+ * make the next writer's answer depend on who has been turned away.
+ */
+export function claimViewport(
+  claim: ViewportClaim | null,
+  request: ViewportClaimRequest,
+): ViewportClaimOutcome {
+  const held = activeViewportClaim(claim, request.nowMs);
+  if (!canOwnViewport(claim, request.owner, request.nowMs)) {
+    return { granted: false, claim: held };
+  }
+  const holdForMs = request.holdForMs ?? defaultViewportHoldMs(request.owner);
+  return {
+    granted: true,
+    claim: {
+      owner: request.owner,
+      claimedAtMs: request.nowMs,
+      expiresAtMs: request.nowMs + holdForMs,
+    },
+  };
+}
+
+/**
+ * The owners that hold a target and re-assert it.
+ *
+ * `follow-output` recomputes its target every frame, a navigation's aim is
+ * re-taken by the virtualizer while the measurements under it settle, and a
+ * snap back is animating towards a resolved offset. All three already say where
+ * the reader belongs, so a displacement applied underneath them is either
+ * redundant or a fight.
+ *
+ * `user-gesture` is deliberately not one of them, and that is the whole point
+ * of this being a separate question.
+ */
+const OWNERS_THAT_HOLD_A_TARGET: ReadonlySet<FlowChatViewportOwner> = new Set([
+  'one-shot-navigation',
+  'snap-back',
+  'follow-output',
+]);
+
+/**
+ * Whether the viewport may be shifted by a displacement right now.
+ *
+ * A shift is not a movement and does not go through the priority order. It says
+ * "whatever the reader is looking at moved by this much, put it back" — content
+ * arriving above them changes what their offset *means*, and restoring that
+ * meaning is not competing with anyone for where the viewport should be.
+ *
+ * Which is why a gesture cannot refuse one. The reader chose a position in the
+ * transcript, not a number of pixels; refusing on their behalf leaves them
+ * somewhere they did not ask to be. Measured: history pages in only while the
+ * reader scrolls up into it, so a gesture holding the viewport refused every
+ * compensation there was — 2494px of history arrived, `scrollTop` stayed at 40,
+ * and the transcript jumped back thirteen Turns. The boundary then never
+ * re-armed, because the reader was still sitting at the head of the window they
+ * had just been moved to.
+ */
+export function canShiftViewport(claim: ViewportClaim | null, nowMs: number): boolean {
+  const held = activeViewportClaim(claim, nowMs);
+  return held === null || !OWNERS_THAT_HOLD_A_TARGET.has(held.owner);
+}
+
+/**
+ * Give the viewport back.
+ *
+ * Only the current holder can, so a writer that was preempted and finishes
+ * late cannot clear the claim of whoever took it — that release would be
+ * indistinguishable from the new owner having finished, and the register would
+ * hand the viewport to the next corrector mid-movement.
+ */
+export function releaseViewport(
+  claim: ViewportClaim | null,
+  owner: FlowChatViewportOwner,
+): ViewportClaim | null {
+  return claim === null || claim.owner === owner ? null : claim;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.test.ts
new file mode 100644
index 0000000000..a6ea145987
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { resolveVisibleFlowChatTurnIds } from './flowChatVisibleTurns';
+
+describe('resolveVisibleFlowChatTurnIds', () => {
+  it('excludes mounted overscan items that are outside the physical viewport', () => {
+    expect(resolveVisibleFlowChatTurnIds([
+      { turnId: 'turn-1', top: -180, bottom: -20 },
+      { turnId: 'turn-2', top: 40, bottom: 260 },
+    ], 0, 800)).toEqual(['turn-2']);
+  });
+
+  it('keeps a Turn visible through its content after its user-message header is gone', () => {
+    expect(resolveVisibleFlowChatTurnIds([
+      { turnId: 'turn-2', top: -120, bottom: 420 },
+      { turnId: 'turn-2', top: 420, bottom: 900 },
+    ], 0, 800)).toEqual(['turn-2']);
+  });
+
+  it('deduplicates visible Turn ids while preserving transcript order', () => {
+    expect(resolveVisibleFlowChatTurnIds([
+      { turnId: 'turn-1', top: -30, bottom: 100 },
+      { turnId: 'turn-1', top: 100, bottom: 300 },
+      { turnId: 'turn-2', top: 300, bottom: 700 },
+    ], 0, 600)).toEqual(['turn-1', 'turn-2']);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.ts b/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.ts
new file mode 100644
index 0000000000..9d3eb5f13d
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatVisibleTurns.ts
@@ -0,0 +1,35 @@
+export interface FlowChatTurnViewportEntry {
+  turnId: string | null;
+  top: number;
+  bottom: number;
+}
+
+/**
+ * Resolve visible Turns from physical item geometry, not the virtualizer's
+ * rendered range. The rendered range includes overscan and a Turn can remain
+ * visible after its user-message header has been virtualized away.
+ */
+export function resolveVisibleFlowChatTurnIds(
+  entries: readonly FlowChatTurnViewportEntry[],
+  viewportTop: number,
+  viewportBottom: number,
+): string[] {
+  const visibleTurnIds: string[] = [];
+  const seenTurnIds = new Set<string>();
+
+  for (const entry of entries) {
+    const { turnId } = entry;
+    if (
+      !turnId
+      || seenTurnIds.has(turnId)
+      || entry.bottom <= viewportTop
+      || entry.top >= viewportBottom
+    ) {
+      continue;
+    }
+    seenTurnIds.add(turnId);
+    visibleTurnIds.push(turnId);
+  }
+
+  return visibleTurnIds;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/historyProjectionHandoff.ts b/src/web-ui/src/flow_chat/components/modern/historyProjectionHandoff.ts
deleted file mode 100644
index c924cd6489..0000000000
--- a/src/web-ui/src/flow_chat/components/modern/historyProjectionHandoff.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { VirtualItem } from '../../store/modernFlowChatStore';
-
-export interface HistoryProjectionHandoffSnapshot {
-  sessionId: string;
-  reason: string;
-  createdAtMs: number;
-  items: VirtualItem[];
-  mode: 'bottom-tail';
-  targetTurnId: string | null;
-  footerHeightPx: number;
-}
-
-export function activeSessionHistoryProjectionHandoff(
-  snapshot: HistoryProjectionHandoffSnapshot | null,
-  activeSessionId: string | null
-): HistoryProjectionHandoffSnapshot | null {
-  return snapshot?.sessionId === activeSessionId ? snapshot : null;
-}
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx
index 5daf1ac810..a832cb973a 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx
@@ -3,19 +3,32 @@
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { tailSpacerPxForViewport } from './flowChatTailFollow';
 import {
-  computeContinuousFollowStep,
-  useFlowChatFollowOutput,
-} from './useFlowChatFollowOutput';
+  TAIL_EASE_ALPHA,
+  TAIL_EASE_LINE_PX,
+  TAIL_EASE_SNAP_ABOVE_PX,
+} from '../../utils/flowChatTailEase';
+import { SMOOTH_SCROLL_STALL_MS, useFlowChatFollowOutput } from './useFlowChatFollowOutput';
+import { useFlowChatViewportOwner } from './useFlowChatViewportOwner';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-type FollowOutputController = ReturnType<typeof useFlowChatFollowOutput>;
+type Controller = ReturnType<typeof useFlowChatFollowOutput>;
+
+const VIEWPORT = 500;
+/** Input-stack footer the harness renders below the transcript. */
+const BOTTOM_INSET = 100;
+/** The spacer the component would render for a given viewport. */
+const spacerFor = (clientHeight: number) => tailSpacerPxForViewport(clientHeight, BOTTOM_INSET);
+const TAIL_SPACER = spacerFor(VIEWPORT);
+/** Matches `tailHoldMaxGapPx(VIEWPORT)`. */
+const MAX_GAP = 300;
 
 function setScrollerMetrics(
   scroller: HTMLElement,
   metrics: { scrollHeight: number; clientHeight: number; scrollTop: number },
-): void {
+) {
   Object.defineProperties(scroller, {
     scrollHeight: { configurable: true, value: metrics.scrollHeight },
     clientHeight: { configurable: true, value: metrics.clientHeight },
@@ -23,412 +36,1254 @@ function setScrollerMetrics(
   });
 }
 
+/**
+ * `turn-N` is the Nth Turn of the session, so the ledger holds N of them.
+ *
+ * A Turn arriving grows the ledger, which is what every test walking `turn-1`
+ * to `turn-2` means. A rollback is the one case where the identity moves and
+ * the ledger does not grow, and those tests state the count themselves.
+ */
+const turnCountFor = (turnId: string) => Number(turnId.replace('turn-', '')) || 1;
+
+interface HarnessProps {
+  latestTurnId: string;
+  /** Turns in the session ledger. Defaults to what `latestTurnId` implies. */
+  dialogTurnCount?: number;
+  isStreaming?: boolean;
+  scroller: HTMLElement;
+  scrollToContentEnd?: (behavior: ScrollBehavior) => void;
+  scrollTurnToTop?: (turnId: string) => boolean;
+  resolveTurnTopScrollTop?: (turnId: string) => number | null;
+  isOpeningViewport?: boolean;
+  onController: (controller: Controller) => void;
+}
+
 function Harness({
+  latestTurnId,
+  dialogTurnCount = turnCountFor(latestTurnId),
+  isStreaming = true,
   scroller,
+  scrollToContentEnd = () => {},
+  scrollTurnToTop = () => false,
+  resolveTurnTopScrollTop = () => null,
+  isOpeningViewport = false,
   onController,
-  performAutoFollowScroll,
-  performLatestTurnStickyPin = vi.fn(),
-  canAnimateTailFollow,
-  getAutoFollowTargetScrollTop,
-}: {
-  scroller: HTMLElement;
-  onController: (controller: FollowOutputController) => void;
-  performAutoFollowScroll: () => void;
-  performLatestTurnStickyPin?: () => void;
-  canAnimateTailFollow?: () => boolean;
-  getAutoFollowTargetScrollTop?: (scroller: HTMLElement) => number;
-}) {
+}: HarnessProps) {
   const scrollerRef = React.useRef<HTMLElement | null>(scroller);
-  scrollerRef.current = scroller;
-
+  // The real register, not a stand-in: what this hook is allowed to write is
+  // now part of its behaviour, so a permissive fake would test the wrong thing.
+  const viewportOwner = useFlowChatViewportOwner(scrollerRef);
   const controller = useFlowChatFollowOutput({
     activeSessionId: 'session-1',
-    latestTurnId: 'turn-2',
-    virtualItemCount: 20,
-    isStreaming: true,
+    latestTurnId,
+    dialogTurnCount,
+    virtualItemCount: 2,
+    isStreaming,
+    isViewportActive: true,
     scrollerRef,
-    performUserFollowScroll: vi.fn(),
-    performAutoFollowScroll,
-    performLatestTurnStickyPin,
-    canAnimateTailFollow,
-    getAutoFollowTargetScrollTop,
+    // Sized from live layout, exactly as the component's state does.
+    getTailSpacerPx: () => tailSpacerPxForViewport(scroller.clientHeight, BOTTOM_INSET),
+    scrollToContentEnd,
+    scrollTurnToTop,
+    resolveTurnTopScrollTop,
+    isOpeningViewport: () => isOpeningViewport,
+    viewportOwner,
   });
-
   onController(controller);
-  return <div data-following-output={String(controller.isFollowingOutput)} />;
+  return <div data-following={String(controller.isFollowingOutput)} />;
 }
 
 describe('useFlowChatFollowOutput', () => {
   let container: HTMLDivElement;
   let root: Root;
-  let controller: FollowOutputController | null;
+  let scroller: HTMLDivElement;
+  let controller: Controller | null;
+  let frames: FrameRequestCallback[];
+  let scrollTo: ReturnType<typeof vi.fn>;
+
+  function runNextFrame() {
+    const frame = frames.shift();
+    expect(frame).toBeDefined();
+    act(() => frame?.(16));
+  }
 
   beforeEach(() => {
     container = document.createElement('div');
-    document.body.appendChild(container);
+    scroller = document.createElement('div');
+    document.body.append(container, scroller);
+    // jsdom has no layout engine, so the animated scroll is a no-op here and
+    // the tests place the viewport where the animation would have left it.
+    scrollTo = vi.fn();
+    scroller.scrollTo = scrollTo as unknown as HTMLElement['scrollTo'];
     root = createRoot(container);
     controller = null;
+    frames = [];
     vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      void callback;
-      return 1;
+      frames.push(callback);
+      return frames.length;
     }));
     vi.stubGlobal('cancelAnimationFrame', vi.fn());
   });
 
   afterEach(() => {
-    act(() => {
-      root.unmount();
-    });
+    act(() => root.unmount());
     container.remove();
+    scroller.remove();
     vi.unstubAllGlobals();
   });
 
-  it('eases a small tail gap without using a second full-scroll action', () => {
-    expect(computeContinuousFollowStep(24, 1000 / 60)).toBeGreaterThan(0);
-    expect(computeContinuousFollowStep(24, 1000 / 60)).toBeLessThan(24);
-    expect(computeContinuousFollowStep(240, 1000 / 60)).toBeLessThanOrEqual(32);
-    expect(computeContinuousFollowStep(Number.NaN, 1000 / 60)).toBe(0);
-
-    const queuedFrames: FrameRequestCallback[] = [];
-    let nextFrameId = 0;
-    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      queuedFrames.push(callback);
-      nextFrameId += 1;
-      return nextFrameId;
-    }));
-
-    const scroller = document.createElement('div');
-    setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
-      scrollTop: 1000,
-    });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-    });
+  it('opens a newly submitted Turn at the viewport top instead of the tail', () => {
+    const scrollTurnToTop = vi.fn(() => true);
+    const scrollToContentEnd = vi.fn();
+    const props = {
+      scroller,
+      scrollToContentEnd,
+      scrollTurnToTop,
+      onController: (next: Controller) => { controller = next; },
+    };
 
     act(() => {
-      root.render(
-        <Harness
-          scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
-        />,
-      );
+      root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
     });
+    // Mount settles on the content end; only the *new Turn* must not.
+    expect(scrollToContentEnd).toHaveBeenCalledWith('auto');
+    scrollToContentEnd.mockClear();
 
     act(() => {
-      controller?.enterFollowOutput('auto-follow');
+      root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
     });
-    expect(performAutoFollowScroll).toHaveBeenCalledTimes(1);
 
-    setScrollerMetrics(scroller, {
-      scrollHeight: 1524,
-      clientHeight: 500,
-      scrollTop: 1000,
-    });
-    const firstFollowFrame = queuedFrames.shift();
-    expect(firstFollowFrame).toBeDefined();
+    expect(scrollTurnToTop).toHaveBeenCalledWith('turn-2');
+    expect(scrollToContentEnd).not.toHaveBeenCalled();
+    expect(controller?.isFollowingOutput).toBe(true);
+  });
+
+  it('does not read a rolled-back Turn as a newly arrived one', () => {
+    /*
+     * Measured as a report: send a message, watch it pin, roll it back, and the
+     * Turn *before* it takes the viewport top. `latestTurnId` is right — it is
+     * the ledger's last Turn — but the detector asked whether the identity had
+     * changed, and a truncation changes it without anything having arrived.
+     */
+    const scrollTurnToTop = vi.fn(() => true);
+    const props = {
+      scroller,
+      scrollTurnToTop,
+      onController: (next: Controller) => { controller = next; },
+    };
 
     act(() => {
-      firstFollowFrame?.(1000 / 60);
+      root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
     });
+    scrollTurnToTop.mockClear();
 
+    // The rollback removes turn-2, so the ledger's last Turn is turn-1 again.
     act(() => {
-      controller?.scheduleFollowToLatest('observer-growth');
+      root.render(
+        <Harness {...props} latestTurnId="turn-1" dialogTurnCount={1} isStreaming={false} />,
+      );
     });
 
-    expect(performAutoFollowScroll).toHaveBeenCalledTimes(1);
-    expect(scroller.scrollTop).toBeGreaterThan(1000);
-    expect(scroller.scrollTop).toBeLessThan(1024);
+    expect(scrollTurnToTop).not.toHaveBeenCalled();
   });
 
-  it('does not animate until the tail coordinator owns the viewport', () => {
-    const queuedFrames: FrameRequestCallback[] = [];
-    let nextFrameId = 0;
-    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      queuedFrames.push(callback);
-      nextFrameId += 1;
-      return nextFrameId;
-    }));
+  it('returns to the end of the transcript when a rollback takes the Turn it was following', () => {
+    const scrollToContentEnd = vi.fn();
+    const props = {
+      scroller,
+      scrollToContentEnd,
+      scrollTurnToTop: () => true,
+      onController: (next: Controller) => { controller = next; },
+    };
 
-    const scroller = document.createElement('div');
-    setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
-      scrollTop: 1000,
+    act(() => {
+      root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
     });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
+    scrollToContentEnd.mockClear();
+
+    act(() => {
+      root.render(
+        <Harness {...props} latestTurnId="turn-1" dialogTurnCount={1} isStreaming={false} />,
+      );
     });
+    // Nothing on its own: a shorter ledger is not a reason to move, because
+    // hydration and window merges write it too.
+    expect(scrollToContentEnd).not.toHaveBeenCalled();
 
+    // The rollback says so itself, and the answer is the tail.
+    act(() => { controller?.handleTurnsRolledBack(); });
+    expect(scrollToContentEnd).toHaveBeenCalledWith('auto');
+  });
+
+  it('settles a rollback on the new tail even after the reader took the viewport', () => {
+    /*
+     * Gating this on ownership made it dead code in the case it was written
+     * for. Reaching a Turn far enough up to want it gone means scrolling, and
+     * scrolling is what hands the viewport back to the reader — so the answer
+     * never ran, the anchor held the reader's Turn at its offset from the
+     * viewport top, and an 8-Turn session rolled back at Turn 7 came to rest on
+     * Turns 2..6 with the new last Turn's answer below the fold.
+     *
+     * Taking it is safe for the reason the snap back's is: a rollback at Turn N
+     * removes N and everything after it, and N was on screen. The new tail is
+     * within a Turn of where the reader already is.
+     */
+    const scrollToContentEnd = vi.fn();
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-2"
+          isStreaming={false}
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
-          canAnimateTailFollow={() => false}
+          scrollToContentEnd={scrollToContentEnd}
+          onController={next => { controller = next; }}
         />,
       );
     });
+    act(() => { controller?.handleUserScrollIntent(); });
+    expect(controller?.isFollowingOutput).toBe(false);
+    scrollToContentEnd.mockClear();
+
+    act(() => { controller?.handleTurnsRolledBack(); });
+    expect(scrollToContentEnd).toHaveBeenCalledWith('auto');
+    expect(controller?.isFollowingOutput).toBe(true);
+  });
 
+  it('settles on the content end when a session opens without streaming', () => {
+    const scrollToContentEnd = vi.fn();
     act(() => {
-      controller?.enterFollowOutput('auto-follow');
+      root.render(
+        <Harness
+          latestTurnId="turn-1"
+          isStreaming={false}
+          scroller={scroller}
+          scrollToContentEnd={scrollToContentEnd}
+          onController={next => { controller = next; }}
+        />,
+      );
     });
+
+    expect(scrollToContentEnd).toHaveBeenCalledWith('auto');
+    expect(controller?.isFollowingOutput).toBe(true);
+  });
+
+  it('tracks the content end exactly while the transcript is still opening', () => {
+    // The virtualizer compensates a history prepend by writing scrollTop before the
+    // prepended heights reach the DOM. While opening, the transcript is hidden
+    // and we are authoritative — accommodating that write would be invisible
+    // now and permanent once paging stops.
     setScrollerMetrics(scroller, {
-      scrollHeight: 1524,
-      clientHeight: 500,
-      scrollTop: 1000,
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
     });
-    const firstFollowFrame = queuedFrames.shift();
-    expect(firstFollowFrame).toBeDefined();
-
     act(() => {
-      firstFollowFrame?.(1000 / 60);
+      root.render(
+        <Harness
+          latestTurnId="turn-1"
+          scroller={scroller}
+          isOpeningViewport
+          onController={next => { controller = next; }}
+        />,
+      );
     });
+    runNextFrame();
+    expect(scroller.scrollTop).toBe(1000);
 
-    expect(performAutoFollowScroll).toHaveBeenCalledTimes(1);
+    scroller.scrollTop = 1000 + 380;
+    runNextFrame();
     expect(scroller.scrollTop).toBe(1000);
   });
 
-  it('does not animate upward when the effective target moves backward', () => {
-    const queuedFrames: FrameRequestCallback[] = [];
-    let nextFrameId = 0;
-    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
-      queuedFrames.push(callback);
-      nextFrameId += 1;
-      return nextFrameId;
-    }));
-
-    const scroller = document.createElement('div');
+  it('does not strand the viewport inside the tail spacer after opening', () => {
+    // Regression: the gap tolerance is a streaming allowance. Applied to a
+    // foreign forward move it parked the content end mid-viewport forever,
+    // because nothing pulls the target back down once paging stops.
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
-      scrollTop: 1000,
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
     });
-    const performAutoFollowScroll = vi.fn();
-
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-1"
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
-          getAutoFollowTargetScrollTop={() => 980}
+          isOpeningViewport
+          onController={next => { controller = next; }}
         />,
       );
     });
+    runNextFrame();
+
+    scroller.scrollTop = 1000 + 380;
+    runNextFrame();
+    expect(scroller.scrollTop).toBe(1000);
+    expect(1000).toBeLessThan(1000 + MAX_GAP);
+  });
+
+  it('falls back to the content end when the new Turn cannot be targeted', () => {
+    const scrollToContentEnd = vi.fn();
+    const props = {
+      scroller,
+      scrollToContentEnd,
+      scrollTurnToTop: () => false,
+      onController: (next: Controller) => { controller = next; },
+    };
 
     act(() => {
-      controller?.enterFollowOutput('auto-follow');
+      root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
     });
-    const firstFollowFrame = queuedFrames.shift();
-    expect(firstFollowFrame).toBeDefined();
-
     act(() => {
-      firstFollowFrame?.(1000 / 60);
+      root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
     });
 
-    expect(scroller.scrollTop).toBe(1000);
+    expect(scrollToContentEnd).toHaveBeenCalledWith('auto');
+    expect(controller?.isFollowingOutput).toBe(true);
   });
 
-  it('exits output follow immediately when explicit user scroll intent is already away from bottom', () => {
-    const scroller = document.createElement('div');
+  it('holds the pinned Turn at the top while its answer is shorter than the viewport', () => {
+    // Real content ends at 1200, so the tail target is 700 — well above the
+    // pinned Turn at 900. The pin must win until the answer overflows.
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
-      scrollTop: 1000,
-    });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = 1000;
+      scrollHeight: 1200 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 900,
     });
+    const props = {
+      scroller,
+      scrollTurnToTop: () => true,
+      resolveTurnTopScrollTop: () => 900,
+      onController: (next: Controller) => { controller = next; },
+    };
 
     act(() => {
-      root.render(
-        <Harness
-          scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
-        />,
-      );
+      root.render(<Harness {...props} latestTurnId="turn-1" />);
     });
-
     act(() => {
-      controller?.enterFollowOutput('auto-follow');
+      root.render(<Harness {...props} latestTurnId="turn-2" />);
     });
 
-    expect(controller?.isFollowingOutput).toBe(true);
+    scroller.scrollTop = 0;
+    runNextFrame();
+    expect(scroller.scrollTop).toBe(900);
+  });
 
+  it('hands the pinned Turn off to tail follow once the answer overflows', () => {
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
-      scrollTop: 600,
+      scrollHeight: 2000 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 900,
     });
+    const props = {
+      scroller,
+      scrollTurnToTop: () => true,
+      resolveTurnTopScrollTop: () => 900,
+      onController: (next: Controller) => { controller = next; },
+    };
 
     act(() => {
-      controller?.handleUserScrollIntent();
+      root.render(<Harness {...props} latestTurnId="turn-1" />);
+    });
+    act(() => {
+      root.render(<Harness {...props} latestTurnId="turn-2" />);
     });
 
-    expect(controller?.isFollowingOutput).toBe(false);
+    runNextFrame();
+    // Content end (2000 - 500) has overtaken the pin, so the tail owns it.
+    expect(scroller.scrollTop).toBe(1500);
   });
 
-  it('exits output follow for explicit upward intent before browser scroll metrics move', () => {
-    const scroller = document.createElement('div');
+  it('follows content growth against the content end, not the tail spacer', () => {
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
       scrollTop: 1000,
     });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = 1000;
-    });
 
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-1"
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
+          onController={next => { controller = next; }}
         />,
       );
     });
+    expect(controller?.isFollowingOutput).toBe(true);
 
-    act(() => {
-      controller?.enterFollowOutput('auto-follow');
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1800 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 1000,
     });
+    runNextFrame();
 
-    expect(controller?.isFollowingOutput).toBe(true);
+    expect(scroller.scrollTop).toBe(1300);
+  });
 
+  it('holds its offset when a collapse shrinks content under the viewport', () => {
+    // The regression this whole mechanism exists for: a tool card collapsing
+    // above the live output must not drag earlier content down.
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
+    });
     act(() => {
-      controller?.handleUserScrollIntent();
+      root.render(
+        <Harness
+          latestTurnId="turn-1"
+          scroller={scroller}
+          onController={next => { controller = next; }}
+        />,
+      );
     });
+    runNextFrame();
+    expect(scroller.scrollTop).toBe(1000);
 
-    expect(controller?.isFollowingOutput).toBe(false);
-  });
-
-  it('cancels armed auto-follow when upward intent arrives during the programmatic guard', () => {
-    const scroller = document.createElement('div');
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
+      scrollHeight: 1200 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
       scrollTop: 1000,
     });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = 1000;
-    });
+    runNextFrame();
 
+    expect(scroller.scrollTop).toBe(1000);
+  });
+
+  it('gives ground only past the tolerated gap after a very large collapse', () => {
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
+    });
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-1"
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
+          onController={next => { controller = next; }}
         />,
       );
     });
+    runNextFrame();
 
-    act(() => {
-      controller?.armFollowOutputForNewTurn();
+    setScrollerMetrics(scroller, {
+      scrollHeight: 700 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 1000,
     });
+    runNextFrame();
 
-    expect(controller?.isFollowingOutput).toBe(false);
+    expect(scroller.scrollTop).toBe(200 + MAX_GAP);
+  });
 
+  it('does not force the content end when a resize re-asserts follow', () => {
+    const scrollToContentEnd = vi.fn();
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
+    });
     act(() => {
-      controller?.handleUserScrollIntent();
+      root.render(
+        <Harness
+          latestTurnId="turn-1"
+          scroller={scroller}
+          scrollToContentEnd={scrollToContentEnd}
+          onController={next => { controller = next; }}
+        />,
+      );
     });
+    runNextFrame();
+    scrollToContentEnd.mockClear();
 
-    let activated = true;
-    act(() => {
-      activated = controller?.activateArmedFollowOutput() ?? true;
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1200 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 1000,
     });
+    act(() => controller?.scheduleFollowToLatest());
 
-    expect(activated).toBe(false);
-    expect(controller?.isFollowingOutput).toBe(false);
+    expect(scrollToContentEnd).not.toHaveBeenCalled();
+    expect(scroller.scrollTop).toBe(1000);
   });
 
-  it('keeps a sticky pin armed while clearing logical follow ownership', () => {
-    const scroller = document.createElement('div');
+  it('settles the held blank once streaming stops', () => {
+    const scrollToContentEnd = vi.fn();
+    const props = {
+      scroller,
+      scrollToContentEnd,
+      onController: (next: Controller) => { controller = next; },
+    };
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
+      scrollTop: 0,
+    });
+    act(() => {
+      root.render(<Harness {...props} latestTurnId="turn-1" />);
+    });
+    runNextFrame();
+
+    setScrollerMetrics(scroller, {
+      scrollHeight: 1200 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
       scrollTop: 1000,
     });
-    const performAutoFollowScroll = vi.fn();
+    runNextFrame();
+    scrollToContentEnd.mockClear();
+
+    act(() => {
+      root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
+    });
+
+    expect(scrollToContentEnd).toHaveBeenCalledWith('smooth');
+  });
 
+  it('lets explicit user scroll intent exit follow immediately', () => {
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-1"
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
+          onController={next => { controller = next; }}
         />,
       );
     });
+    act(() => controller?.enterFollowOutput('jump-to-latest'));
+    expect(controller?.isFollowingOutput).toBe(true);
 
-    act(() => {
-      controller?.enterFollowOutput('auto-follow');
-      controller?.preparePinnedTurnFollowHandoff();
-    });
-
+    act(() => controller?.handleUserScrollIntent());
     expect(controller?.isFollowingOutput).toBe(false);
+    expect(cancelAnimationFrame).toHaveBeenCalled();
+  });
 
-    let activated = false;
+  it('uses smooth behavior only for an explicit jump to latest', () => {
+    const scrollToContentEnd = vi.fn();
     act(() => {
-      activated = controller?.activateArmedFollowOutput() ?? false;
+      root.render(
+        <Harness
+          latestTurnId="turn-1"
+          scroller={scroller}
+          scrollToContentEnd={scrollToContentEnd}
+          onController={next => { controller = next; }}
+        />,
+      );
     });
-
-    expect(activated).toBe(true);
-    expect(controller?.isFollowingOutput).toBe(true);
+    act(() => controller?.enterFollowOutput('jump-to-latest'));
+    expect(scrollToContentEnd).toHaveBeenCalledWith('smooth');
   });
 
-  it('resumes a mounted streaming session at the tail without replaying sticky pin', () => {
-    const scroller = document.createElement('div');
+  it('yields the frame loop to its own animated scroll instead of overwriting it', () => {
+    // The loop assigns scrollTop outright, which cancels an in-flight smooth
+    // scroll on the very next frame: `jump-to-latest` asked for an animation
+    // and got a jump.
     setScrollerMetrics(scroller, {
-      scrollHeight: 1500,
-      clientHeight: 500,
+      scrollHeight: 1500 + TAIL_SPACER,
+      clientHeight: VIEWPORT,
       scrollTop: 0,
     });
-    const performAutoFollowScroll = vi.fn(() => {
-      scroller.scrollTop = 1000;
-    });
-    const performLatestTurnStickyPin = vi.fn();
-
     act(() => {
       root.render(
         <Harness
+          latestTurnId="turn-1"
           scroller={scroller}
-          onController={nextController => {
-            controller = nextController;
-          }}
-          performAutoFollowScroll={performAutoFollowScroll}
-          performLatestTurnStickyPin={performLatestTurnStickyPin}
+          onController={next => { controller = next; }}
         />,
       );
     });
+    runNextFrame();
+    expect(scroller.scrollTop).toBe(1000);
+
+    scroller.scrollTop = 0;
+    act(() => controller?.enterFollowOutput('jump-to-latest'));
+    runNextFrame();
+
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  describe('standing down for its own animated scroll', () => {
+    /**
+     * A clock the test moves by hand.
+     *
+     * The stand-down ends on a *duration* without travel, so a test that runs
+     * its frames in microseconds of real time proves nothing about it either
+     * way. Every frame below states how much time it took.
+     */
+    let nowMs = 0;
+    let nowSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      nowMs = 1_000;
+      nowSpy = vi.spyOn(performance, 'now').mockImplementation(() => nowMs);
+    });
 
-    let resumed = false;
-    act(() => {
-      resumed = controller?.resumeFollowOutputForMountedStream() ?? false;
+    afterEach(() => {
+      nowSpy.mockRestore();
     });
 
-    expect(resumed).toBe(true);
-    expect(controller?.isFollowingOutput).toBe(true);
-    expect(performAutoFollowScroll).toHaveBeenCalledTimes(1);
-    expect(performLatestTurnStickyPin).not.toHaveBeenCalled();
+    /**
+     * Mounts a transcript whose content ends at 4500, settles there, and then
+     * issues an animated jump to latest from the top.
+     *
+     * jsdom does not animate, so the animation is played by hand below. That is
+     * the point of these tests: what ends the stand-down is the viewport having
+     * stopped moving, and only a test that moves it can tell that apart from a
+     * budget running out.
+     */
+    function jumpToLatestFromTheTop() {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 5000 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      runNextFrame();
+      expect(scroller.scrollTop).toBe(4500);
+      scroller.scrollTop = 0;
+      act(() => controller?.enterFollowOutput('jump-to-latest'));
+    }
+
+    /** One frame, `forMs` after the last, in which the animation moved `byPx`. */
+    function animateFrame(byPx: number, forMs = 5) {
+      nowMs += forMs;
+      scroller.scrollTop += byPx;
+      runNextFrame();
+    }
+
+    it('stays out of the way for as long as the animation is still travelling', () => {
+      // The stand-down used to be 45 frames, which is 0.75s at 60Hz and 0.52s
+      // on a busy 200Hz display — measured, a jump issued for 8717px animated
+      // 5480 of them and was finished by the loop in one 3290px write.
+      jumpToLatestFromTheTop();
+
+      for (let frame = 0; frame < 60; frame += 1) {
+        animateFrame(50);
+        expect(scroller.scrollTop).toBe(50 * (frame + 1));
+      }
+    });
+
+    it('sits through the frames a smooth scroll takes to visibly start', () => {
+      /*
+       * The regression this pair of constants exists for. A programmatic smooth
+       * scroll eases in — measured on WebView2, 2px in its first 50ms against
+       * 9734px to travel — and with scroll offsets quantised to 0.8px the early
+       * frames genuinely do not move. Counting two still *frames* took the
+       * viewport back 21ms after asking for the animation, and the reader saw
+       * an instant jump.
+       */
+      jumpToLatestFromTheTop();
+
+      for (let frame = 0; frame < 20; frame += 1) {
+        animateFrame(0);
+      }
+      expect(scroller.scrollTop).toBe(0);
+
+      // 100ms in, still inside the window, and the animation finally shows.
+      animateFrame(0.8);
+      expect(scroller.scrollTop).toBe(0.8);
+    });
+
+    it('resumes once the animation stops moving the viewport', () => {
+      jumpToLatestFromTheTop();
+      animateFrame(50);
+
+      // Still inside the window a stalling animation is given.
+      animateFrame(0, SMOOTH_SCROLL_STALL_MS - 10);
+      expect(scroller.scrollTop).toBe(50);
+
+      animateFrame(0, 20);
+      expect(scroller.scrollTop).toBe(4500);
+    });
+
+    it('takes the viewport back on the backstop when the animation never ends', () => {
+      jumpToLatestFromTheTop();
+      // Travelling the whole time, so nothing but the backstop can end this.
+      for (let frame = 0; frame < 12; frame += 1) {
+        animateFrame(1, 100);
+      }
+
+      expect(scroller.scrollTop).toBe(4500);
+    });
+  });
+
+  describe('easing the follow across the frames it has', () => {
+    /** Mounts a streaming transcript resting exactly on its content end. */
+    function followFromContentEnd() {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 1000,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+    }
+
+    /** Grows real content by `byPx`, which is what moves the follow target. */
+    function growContentBy(byPx: number) {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + byPx + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: scroller.scrollTop,
+      });
+    }
+
+    it('spends a line of growth over the frames that were empty', () => {
+      // Markdown reflows a line at a time, so an outright write puts all 24px
+      // on one frame out of seven and none on the rest.
+      followFromContentEnd();
+      growContentBy(TAIL_EASE_LINE_PX);
+
+      runNextFrame();
+
+      expect(scroller.scrollTop).toBeCloseTo(1000 + TAIL_EASE_LINE_PX * TAIL_EASE_ALPHA, 5);
+      expect(scroller.scrollTop - 1000).toBeLessThan(TAIL_EASE_LINE_PX);
+    });
+
+    it('keeps stepping until it has landed on the target', () => {
+      followFromContentEnd();
+      growContentBy(TAIL_EASE_LINE_PX);
+
+      let previousPx = 1000;
+      for (let frame = 0; frame < 20; frame += 1) {
+        runNextFrame();
+        // Every step is under a line: that is the bar the ease has to clear to
+        // be worth having, since a line is what it set out to replace.
+        expect(scroller.scrollTop - previousPx).toBeLessThan(TAIL_EASE_LINE_PX);
+        previousPx = scroller.scrollTop;
+      }
+
+      // Inside the loop's own `BOTTOM_EPSILON_PX`, where it stops writing at
+      // all — the ease converges on the target rather than stalling short of
+      // it or ringing around it.
+      expect(1000 + TAIL_EASE_LINE_PX - scroller.scrollTop).toBeLessThan(2);
+      expect(scroller.scrollTop).toBeLessThanOrEqual(1000 + TAIL_EASE_LINE_PX);
+    });
+
+    it('jumps when an ease would open with a bigger step than the jump it replaces', () => {
+      // A burst arriving further behind than four lines: a quarter of that is
+      // already worse than having simply gone the whole way.
+      followFromContentEnd();
+      growContentBy(TAIL_EASE_SNAP_ABOVE_PX + 100);
+
+      runNextFrame();
+
+      expect(scroller.scrollTop).toBe(1000 + TAIL_EASE_SNAP_ABOVE_PX + 100);
+    });
+
+    it('does not ease while the transcript is still opening', () => {
+      // The reveal waits for the viewport to reach the content end, and while
+      // it waits nothing is painted — so an ease there is travel nobody sees,
+      // holding open the one phase whose whole point is to be over.
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 1000,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            scroller={scroller}
+            isOpeningViewport
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      growContentBy(TAIL_EASE_LINE_PX);
+
+      runNextFrame();
+
+      expect(scroller.scrollTop).toBe(1000 + TAIL_EASE_LINE_PX);
+    });
+
+    it('goes the whole way at once when content shrinks under the viewport', () => {
+      // Easing down through a shrink reads as the transcript being clawed
+      // backwards, which is worse than the jump it would replace.
+      followFromContentEnd();
+      setScrollerMetrics(scroller, {
+        scrollHeight: 700 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 1000,
+      });
+
+      runNextFrame();
+
+      // Past the tolerated gap, so the hold rule gives ground — in one step.
+      expect(scroller.scrollTop).toBe(200 + MAX_GAP);
+    });
+  });
+
+  describe('jumping to latest while the newest Turn is pinned', () => {
+    /** Pins `turn-2` at 900 with real content ending at 1200 (tail target 700). */
+    function pinLatestTurn(overrides?: { resolveTurnTopScrollTop?: () => number | null }) {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1200 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 900,
+      });
+      const props = {
+        scroller,
+        scrollTurnToTop: () => true,
+        resolveTurnTopScrollTop: overrides?.resolveTurnTopScrollTop ?? (() => 900),
+        onController: (next: Controller) => { controller = next; },
+      };
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
+      });
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
+      });
+    }
+
+    it('returns to the pin rather than the end of content', () => {
+      // Restoring the tail presentation asks for a jump to latest one frame
+      // after the Turn that caused it got pinned, which used to overwrite the
+      // pin. Aiming at the content end here also scrolls *up*, shoving the
+      // message the user just sent into the middle of the viewport.
+      const scrollToContentEnd = vi.fn();
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1200 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 900,
+      });
+      const props = {
+        scroller,
+        scrollToContentEnd,
+        scrollTurnToTop: () => true,
+        resolveTurnTopScrollTop: () => 900,
+        onController: (next: Controller) => { controller = next; },
+      };
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
+      });
+      scrollToContentEnd.mockClear();
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
+      });
+
+      act(() => controller?.enterFollowOutput('jump-to-latest'));
+
+      expect(scrollToContentEnd).not.toHaveBeenCalled();
+      scroller.scrollTop = 0;
+      runNextFrame();
+      expect(scroller.scrollTop).toBe(900);
+    });
+
+    it('animates back to the pin instead of jumping', () => {
+      // The frame loop assigns scrollTop outright, so without the yield budget
+      // this branch was an instant move where every other jump to latest is
+      // animated.
+      pinLatestTurn();
+      scroller.scrollTop = 0;
+      scrollTo.mockClear();
+
+      act(() => controller?.enterFollowOutput('jump-to-latest'));
+
+      expect(scrollTo).toHaveBeenCalledWith({ top: 900, behavior: 'smooth' });
+      runNextFrame();
+      // jsdom does not animate, so the loop must have left the viewport alone.
+      expect(scroller.scrollTop).toBe(0);
+    });
+
+    it('resumes at the content end once the pin has been retired', () => {
+      // The exemption is only for a Turn whose answer still fits one viewport.
+      // Past the crossover the pin is gone and the ordinary rule applies.
+      const scrollToContentEnd = vi.fn();
+      setScrollerMetrics(scroller, {
+        scrollHeight: 2000 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 900,
+      });
+      const props = {
+        scroller,
+        scrollToContentEnd,
+        scrollTurnToTop: () => true,
+        resolveTurnTopScrollTop: () => 900,
+        onController: (next: Controller) => { controller = next; },
+      };
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-1" isStreaming={false} />);
+      });
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-2" isStreaming={false} />);
+      });
+      // Content end (1500) has overtaken the pin, which retires it.
+      runNextFrame();
+      scrollToContentEnd.mockClear();
+
+      act(() => controller?.enterFollowOutput('jump-to-latest'));
+
+      expect(scrollToContentEnd).toHaveBeenCalledWith('smooth');
+    });
+  });
+
+  describe('snapping back out of the reserved blank', () => {
+    /** Places the viewport where a gesture into the tail spacer would leave it. */
+    function restInBlank(scrollTop: number) {
+      scroller.scrollTop = scrollTop;
+      act(() => controller?.handleScrollSettled());
+    }
+
+    it('returns an idle transcript to the end of real content', () => {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      act(() => controller?.handleUserScrollIntent());
+
+      restInBlank(1000 + TAIL_SPACER);
+
+      expect(scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: 'smooth' });
+    });
+
+    it('returns a viewport follow owns but is no longer correcting', () => {
+      /*
+       * Ownership outlives the frame loop by design, so "follow owns this" does
+       * not mean "something is bringing it back". A scrollbar drag reaches this
+       * state on every platform whose scrollbar leaves no gutter to recognise
+       * the press by; before this, the viewport simply stayed in the blank.
+       */
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      // Run the settle budget out: the loop stops, ownership does not.
+      while (frames.length > 0) runNextFrame();
+      expect(controller?.isFollowingOutput).toBe(true);
+
+      restInBlank(1000 + TAIL_SPACER);
+
+      expect(scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: 'smooth' });
+    });
+
+    it('leaves a viewport the frame loop is still correcting to the loop', () => {
+      // A live loop reaches its target in one frame; snapping back would only
+      // race it, and with an animation that the next frame would cancel.
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      scrollTo.mockClear();
+
+      restInBlank(1000 + TAIL_SPACER);
+
+      expect(scrollTo).not.toHaveBeenCalled();
+    });
+
+    it('returns a short new Turn to the viewport top, not to the content end', () => {
+      // The pin outlives the user takeover on purpose. Snapping to the content
+      // end here would scroll *up* and shove the message the user just sent
+      // into the middle of the viewport.
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1200 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 900,
+      });
+      const props = {
+        scroller,
+        scrollTurnToTop: () => true,
+        resolveTurnTopScrollTop: () => 900,
+        onController: (next: Controller) => { controller = next; },
+      };
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-1" />);
+      });
+      act(() => {
+        root.render(<Harness {...props} latestTurnId="turn-2" />);
+      });
+      act(() => controller?.handleUserScrollIntent());
+
+      restInBlank(1400);
+
+      expect(scrollTo).toHaveBeenCalledWith({ top: 900, behavior: 'smooth' });
+    });
+
+    it('leaves a viewport resting above the target alone', () => {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      act(() => controller?.handleUserScrollIntent());
+      scrollTo.mockClear();
+
+      restInBlank(200);
+
+      expect(scrollTo).not.toHaveBeenCalled();
+      expect(controller?.isFollowingOutput).toBe(false);
+    });
+
+    it('hands the viewport back to follow once the snap arrives', () => {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      act(() => controller?.handleUserScrollIntent());
+      restInBlank(1000 + TAIL_SPACER);
+
+      restInBlank(1000);
+
+      expect(controller?.isFollowingOutput).toBe(true);
+    });
+
+    it('does not take the viewport back when a gesture overrode the snap', () => {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + TAIL_SPACER,
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      act(() => controller?.handleUserScrollIntent());
+      restInBlank(1000 + TAIL_SPACER);
+
+      restInBlank(200);
+
+      expect(controller?.isFollowingOutput).toBe(false);
+    });
+  });
+
+  describe('anchoring the viewport bottom across a resize', () => {
+    /** Mounts at the content end, then hands the viewport to the user. */
+    function restAtContentEnd() {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + spacerFor(VIEWPORT),
+        clientHeight: VIEWPORT,
+        scrollTop: 0,
+      });
+      act(() => {
+        root.render(
+          <Harness
+            latestTurnId="turn-1"
+            isStreaming={false}
+            scroller={scroller}
+            onController={next => { controller = next; }}
+          />,
+        );
+      });
+      runNextFrame();
+      expect(scroller.scrollTop).toBe(1000);
+      act(() => controller?.handleUserScrollIntent());
+    }
+
+    /** Content and footer stay at 1500; only the viewport, and so the spacer, change. */
+    function resizeViewportTo(clientHeight: number, scrollTop: number) {
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1500 + spacerFor(clientHeight),
+        clientHeight,
+        scrollTop,
+      });
+    }
+
+    it('keeps content against the viewport bottom when the viewport grows', () => {
+      // A viewport 200px taller lowers the content end by 200px. Without the
+      // clamp the spacer removed, the resting viewport is left that far into
+      // the blank.
+      restAtContentEnd();
+      resizeViewportTo(VIEWPORT + 200, 1000);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 200,
+        wasAtTail: true,
+      }));
+
+      expect(scroller.scrollTop).toBe(800);
+    });
+
+    it('keeps content against the viewport bottom when the viewport shrinks', () => {
+      // The opposite direction: the content end moves down past the viewport,
+      // cutting off the bottom of what was on screen.
+      restAtContentEnd();
+      resizeViewportTo(VIEWPORT - 200, 1000);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: -200,
+        wasAtTail: true,
+      }));
+
+      expect(scroller.scrollTop).toBe(1200);
+    });
+
+    it('anchors the bottom for a viewport reading history too', () => {
+      // The rule is not about the tail. A plain scroller preserves scrollTop
+      // and reveals or swallows content at the bottom edge; for a transcript
+      // the bottom edge is the one worth holding still.
+      restAtContentEnd();
+      resizeViewportTo(VIEWPORT + 200, 600);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 200,
+        wasAtTail: false,
+      }));
+
+      expect(scroller.scrollTop).toBe(400);
+    });
+
+    it('does not drag a viewport reading history to the tail', () => {
+      restAtContentEnd();
+      resizeViewportTo(VIEWPORT - 200, 600);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: -200,
+        wasAtTail: false,
+      }));
+
+      // Bottom-anchored, and nowhere near the content end at 1200.
+      expect(scroller.scrollTop).toBe(800);
+    });
+
+    it('corrects instantly, since the content does not appear to move', () => {
+      restAtContentEnd();
+      scrollTo.mockClear();
+      resizeViewportTo(VIEWPORT + 200, 1000);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 200,
+        wasAtTail: true,
+      }));
+
+      expect(scrollTo).not.toHaveBeenCalled();
+    });
+
+    it('does not hand the viewport back to follow', () => {
+      // A gesture ending in the blank means "take me to the end"; a layout
+      // change means nothing at all.
+      restAtContentEnd();
+      resizeViewportTo(VIEWPORT + 200, 1000);
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 200,
+        wasAtTail: true,
+      }));
+
+      expect(controller?.isFollowingOutput).toBe(false);
+    });
+
+    it('follows the content end while a reflow keeps moving it', () => {
+      // A width change reflows every item, and arithmetic cannot track where
+      // the bottom line went. The end of the transcript is the one position
+      // that can be recomputed, so a viewport resting on it is put back on it —
+      // repeatedly, because the virtualizer re-estimates over several passes.
+      restAtContentEnd();
+
+      // Narrower: the same text wraps into 300px more content.
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1800 + spacerFor(VIEWPORT),
+        clientHeight: VIEWPORT,
+        scrollTop: 1000,
+      });
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 0,
+        wasAtTail: true,
+      }));
+      expect(scroller.scrollTop).toBe(1300);
+
+      // Re-measurement adds another 200px above the viewport.
+      setScrollerMetrics(scroller, {
+        scrollHeight: 2000 + spacerFor(VIEWPORT),
+        clientHeight: VIEWPORT,
+        scrollTop: 1300,
+      });
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 0,
+        wasAtTail: true,
+      }));
+      expect(scroller.scrollTop).toBe(1500);
+    });
+
+    it('leaves a reflow alone for a viewport that was not at the end', () => {
+      restAtContentEnd();
+      setScrollerMetrics(scroller, {
+        scrollHeight: 1800 + spacerFor(VIEWPORT),
+        clientHeight: VIEWPORT,
+        scrollTop: 200,
+      });
+
+      act(() => controller?.handleViewportResize({
+        viewportHeightDeltaPx: 0,
+        wasAtTail: false,
+      }));
+
+      expect(scroller.scrollTop).toBe(200);
+    });
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts
index 48c1557937..64c6264c1f 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts
@@ -1,552 +1,1113 @@
-/**
- * Follow-output controller for the modern virtualized FlowChat list.
- *
- * Keeps follow state local to the viewport layer while separating the
- * "when should we follow" policy from the low-level list scroll mechanics.
- */
-
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
-
-const PROGRAMMATIC_SCROLL_GUARD_MS = 160;
-const AUTO_FOLLOW_BOTTOM_THRESHOLD_PX = 24;
-const USER_SCROLL_DIRECTION_EPSILON_PX = 0.5;
-const USER_SCROLL_INTENT_WINDOW_MS = 450;
-const USER_SCROLL_INTENT_PROGRAMMATIC_GRACE_MS = 80;
-const CONTINUOUS_FOLLOW_TIME_CONSTANT_MS = 70;
-const CONTINUOUS_FOLLOW_MIN_STEP_PX = 0.75;
-const CONTINUOUS_FOLLOW_MAX_STEP_PX = 32;
-const CONTINUOUS_FOLLOW_SNAP_THRESHOLD_PX = 0.5;
-const CONTINUOUS_FOLLOW_MAX_ANIMATED_DISTANCE_PX = 96;
-const CONTINUOUS_FOLLOW_MAX_FRAME_DELTA_MS = 34;
-const NATIVE_SMOOTH_FOLLOW_GRACE_MS = 320;
-
-export function computeContinuousFollowStep(
-  distancePx: number,
-  frameDeltaMs: number,
-): number {
-  const distance = Number.isFinite(distancePx) ? Math.max(0, distancePx) : 0;
-  if (distance <= CONTINUOUS_FOLLOW_SNAP_THRESHOLD_PX) {
-    return distance;
-  }
-
-  const deltaMs = Number.isFinite(frameDeltaMs)
-    ? Math.min(CONTINUOUS_FOLLOW_MAX_FRAME_DELTA_MS, Math.max(0, frameDeltaMs))
-    : 0;
-  const easedStep = distance * (
-    1 - Math.exp(-deltaMs / CONTINUOUS_FOLLOW_TIME_CONSTANT_MS)
-  );
-  const step = Math.min(
-    distance,
-    CONTINUOUS_FOLLOW_MAX_STEP_PX,
-    Math.max(CONTINUOUS_FOLLOW_MIN_STEP_PX, easedStep),
-  );
-
-  return distance - step <= CONTINUOUS_FOLLOW_SNAP_THRESHOLD_PX
-    ? distance
-    : step;
-}
-
-export type FollowOutputEnterReason = 'jump-to-latest' | 'auto-follow';
+import {
+  roundViewportPx,
+  traceViewportRepeating,
+} from '@/infrastructure/diagnostics/flowChatViewportDiagnostics';
+import {
+  isTailFollowDiagnosticsEnabled,
+  noteTailFollowStep,
+} from '@/infrastructure/diagnostics/flowChatTailFollowDiagnostics';
+import {
+  nextEasedScrollTopPx,
+  shouldEaseTailFollow,
+} from '../../utils/flowChatTailEase';
+import type { FlowChatViewportOwnerApi } from './useFlowChatViewportOwner';
+import { SNAP_BACK_HOLD_MS } from './flowChatViewportOwnership';
+import {
+  contentEndScrollTop,
+  FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX,
+  memorylessFollowState,
+  nextTailFollowState,
+  tailHoldMaxGapPx,
+  tailSnapBackScrollTop,
+  type TailFollowState,
+} from './flowChatTailFollow';
+
+export type FollowOutputEnterReason =
+  | 'jump-to-latest'
+  | 'new-turn'
+  | 'session-open'
+  | 'streaming-resumed'
+  | 'tail-snap-back'
+  | 'turns-rolled-back';
 export type FollowOutputExitReason =
   | 'session-changed'
-  | 'user-scroll-up'
+  | 'user-scroll'
   | 'scroll-to-turn'
-  | 'scroll-to-index'
-  | 'pin-turn-to-top';
+  | 'scroll-to-index';
 
 interface UseFlowChatFollowOutputOptions {
   activeSessionId?: string;
   latestTurnId: string | null;
+  /**
+   * Turns in the session ledger, so that an arrival can be told from a
+   * truncation. `latestTurnId` alone cannot: a rollback moves it backwards to a
+   * Turn that has been there all along, which is a change and not an arrival.
+   */
+  dialogTurnCount: number;
   virtualItemCount: number;
   isStreaming: boolean;
+  isViewportActive: boolean;
   scrollerRef: RefObject<HTMLElement | null>;
-  performUserFollowScroll: () => void;
-  performAutoFollowScroll: () => void;
-  performLatestTurnStickyPin: () => void;
+  /** Height of the resident tail spacer currently rendered below the content. */
+  getTailSpacerPx: () => number;
+  /** One-shot scroll placing the end of real content at the viewport bottom. */
+  scrollToContentEnd: (behavior: ScrollBehavior) => void;
+  /** One-shot scroll placing a Turn's user message at the viewport top. */
+  scrollTurnToTop: (turnId: string) => boolean;
+  /** Offset that would place a Turn's user message at the viewport top, if rendered. */
+  resolveTurnTopScrollTop: (turnId: string) => number | null;
+  /** True while the transcript is still hidden for the opening reveal. */
+  isOpeningViewport: () => boolean;
   /**
-   * Returns true when auto-follow should be suspended for layout-protection
-   * reasons (collapse animation, layout transition, pending collapse intent).
-   * Both the event-driven `scheduleFollowToLatest` and the continuous follow
-   * loop honour this signal: while a known collapse animation is in flight we
-   * must not fight the anchor-lock + bottom-reservation machinery, otherwise
-   * the conversation visibly "sinks down" each time content above shrinks.
-   * The continuous loop keeps requesting frames while suspended and resumes
-   * bottom-tracking on the next frame after the suspension clears.
+   * Who is moving the viewport. Every write below goes through it, so that
+   * nothing else has to carry a private opinion about when this hook is busy.
    */
-  shouldSuspendAutoFollow?: () => boolean;
-  canAnimateTailFollow?: () => boolean;
-  getAutoFollowTargetScrollTop?: (scroller: HTMLElement) => number;
+  viewportOwner: FlowChatViewportOwnerApi;
+}
+
+export interface ViewportResizeInput {
+  /** Change in the scroller's client height; `0` on a reflow-only callback. */
+  viewportHeightDeltaPx: number;
   /**
-   * Optional per-frame hook invoked from inside the continuous follow loop.
-   * Used to reconcile sticky-latest pin floor in lockstep with the scroll
-   * adjustment so the pin reservation never lags behind a shrinking layout.
+   * Whether the viewport was resting at the end of the transcript *before* the
+   * resize. Afterwards that is unknowable — a viewport on the content end and
+   * one parked deliberately above it are the same geometry.
    */
-  onContinuousFollowFrame?: () => void;
+  wasAtTail: boolean;
 }
 
 interface UseFlowChatFollowOutputResult {
   isFollowingOutput: boolean;
   enterFollowOutput: (reason: FollowOutputEnterReason) => void;
   exitFollowOutput: (reason: FollowOutputExitReason) => void;
-  preparePinnedTurnFollowHandoff: () => void;
-  armFollowOutputForNewTurn: () => void;
-  resumeFollowOutputForMountedStream: () => boolean;
-  activateArmedFollowOutput: () => boolean;
-  cancelPendingAutoFollowArm: () => void;
-  scheduleFollowToLatest: (reason: string) => void;
+  scheduleFollowToLatest: () => void;
+  /** Whether follow-output owns the viewport now, not one render ago. */
+  isFollowingOutputNow: () => boolean;
+  /**
+   * Whether the frame loop is actively moving the viewport right now.
+   *
+   * Not the same question as ownership, which outlives the loop on purpose so
+   * that streaming can resume following after the settle budget runs out.
+   */
+  isFollowCorrectingViewport: () => boolean;
   handleUserScrollIntent: () => void;
+  /** Turns were rolled back out of the session; end on the new tail. */
+  handleTurnsRolledBack: () => void;
   handleScroll: () => void;
+  /** A scroll gesture has come to rest; snap out of the reserved blank if in it. */
+  handleScrollSettled: () => void;
+  /**
+   * The viewport was resized; keep whatever was on the bottom edge there.
+   */
+  handleViewportResize: (input: ViewportResizeInput) => void;
+  /** Offset the follow rule owns, or `null` when it does not own the viewport. */
+  getFollowTargetScrollTop: () => number | null;
 }
 
-function getDistanceFromBottom(scroller: HTMLElement): number {
-  return Math.max(0, scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop);
-}
+const BOTTOM_EPSILON_PX = 2;
+
+/**
+ * Frames a pinned Turn may stay unmeasurable before the pin is abandoned.
+ * The virtualizer renders the tail immediately, so this only guards against a Turn
+ * that never mounts at all.
+ */
+const PIN_RESOLVE_MAX_ATTEMPTS = 30;
+
+/**
+ * How long a programmatic smooth scroll of ours may own the viewport before the
+ * follow loop resumes writing.
+ *
+ * The loop assigns `scrollTop` outright, which cancels an in-flight smooth
+ * scroll on the very next frame — every `'smooth'` request in this hook was in
+ * practice a jump until it yielded.
+ *
+ * A backstop rather than the actual terminator: the yield normally ends when
+ * the animation stops moving the viewport, and this only covers an animation
+ * that never finishes at all. It was a *frame* count and could not be — 45
+ * frames is 0.75s at 60Hz and 0.52s on a busy 200Hz display, so the duration a
+ * caller was buying depended on the machine. Measured: a jump to latest issued
+ * for 8717px animated 5480 of them and was finished by the loop in one 3290px
+ * write, 38% short.
+ */
+const SMOOTH_SCROLL_YIELD_MS = 1_200;
+
+/**
+ * How long the viewport may sit still before our animated scroll counts as over.
+ *
+ * A duration and not a frame count, for the same reason the backstop above is:
+ * this was two frames, and two frames is 33ms at 60Hz and 10ms at 200Hz, where
+ * a smooth scroll has not visibly started. Measured on WebView2: a jump issued
+ * for 9734px was taken back 21ms after it was asked for, having animated
+ * nothing at all, and the reader saw an instant jump where the whole point was
+ * an animation.
+ *
+ * The number comes from the shape of the curve rather than from the platform's
+ * startup latency, which is the shorter of the two. A programmatic smooth
+ * scroll eases in: measured, 2px in its first 50ms against 9734px to travel.
+ * With scroll offsets quantised to 0.8px on that display, the early frames
+ * genuinely do not move, and visible increments arrive up to ~40ms apart. This
+ * is that, doubled.
+ *
+ * What it costs is the follow resuming this late after an animation that ends
+ * somewhere other than its target — which only happens while streaming moves
+ * the target underneath it, and is then a dozen pixels the ease absorbs.
+ * Arriving ends the yield immediately and does not wait for this.
+ */
+export const SMOOTH_SCROLL_STALL_MS = 120;
+
+/**
+ * Frames the follow target keeps being re-asserted after a non-streaming entry,
+ * refreshed whenever it actually moves.
+ *
+ * A session opens against an unsettled transcript: item heights are still
+ * estimates and `isPartial` sessions page older Turns in, so the end of content
+ * can travel thousands of pixels after the first alignment. The browser used to
+ * absorb that for free — a bottom-aligned scroll was clamped at `scrollHeight -
+ * clientHeight`, so any target at or past the end snapped onto it. The resident
+ * tail spacer removes that clamp, so the settle has to be explicit.
+ */
+const SETTLE_FRAMES = 90;
 
 export function useFlowChatFollowOutput({
   activeSessionId,
   latestTurnId,
+  dialogTurnCount,
   virtualItemCount,
   isStreaming,
+  isViewportActive,
   scrollerRef,
-  performUserFollowScroll,
-  performAutoFollowScroll,
-  performLatestTurnStickyPin,
-  shouldSuspendAutoFollow,
-  canAnimateTailFollow,
-  getAutoFollowTargetScrollTop,
-  onContinuousFollowFrame,
+  getTailSpacerPx,
+  scrollToContentEnd,
+  scrollTurnToTop,
+  resolveTurnTopScrollTop,
+  isOpeningViewport,
+  viewportOwner,
 }: UseFlowChatFollowOutputOptions): UseFlowChatFollowOutputResult {
   const [isFollowingOutput, setIsFollowingOutput] = useState(false);
-
-  const isFollowingOutputRef = useRef(isFollowingOutput);
-  const programmaticScrollUntilMsRef = useRef(0);
-  const explicitUserScrollIntentUntilMsRef = useRef(0);
-  const lastObservedScrollTopRef = useRef(0);
-  const previousSessionIdRef = useRef<string | undefined>(activeSessionId);
-  const armedAutoFollowTurnIdRef = useRef<string | null>(null);
-  const continuousFollowFrameRef = useRef<number | null>(null);
-  const lastContinuousFollowFrameMsRef = useRef<number | null>(null);
-  const nativeSmoothFollowUntilMsRef = useRef(0);
+  const isFollowingOutputRef = useRef(false);
   const isStreamingRef = useRef(isStreaming);
-  const onContinuousFollowFrameRef = useRef(onContinuousFollowFrame);
-  const canAnimateTailFollowRef = useRef(canAnimateTailFollow);
-  const getAutoFollowTargetScrollTopRef = useRef(getAutoFollowTargetScrollTop);
-  const shouldSuspendAutoFollowRef = useRef(shouldSuspendAutoFollow);
-
+  const isViewportActiveRef = useRef(isViewportActive);
+  const latestTurnIdRef = useRef(latestTurnId);
+  const followFrameRef = useRef<number | null>(null);
+  const previousSessionIdRef = useRef(activeSessionId);
+  const previousLatestTurnIdRef = useRef<string | null>(latestTurnId);
+  const previousDialogTurnCountRef = useRef(dialogTurnCount);
+  const hasMountedRef = useRef(false);
+  const wasStreamingRef = useRef(isStreaming);
+
+  const followStateRef = useRef<TailFollowState>({ mode: 'hold-tail', target: 0 });
+  const pinTurnIdRef = useRef<string | null>(null);
+  const pinScrollTopRef = useRef<number | null>(null);
+  const pinAttemptsRef = useRef(0);
+  /**
+   * A Turn that arrived while it was not in the transcript on screen.
+   *
+   * Submitting from inside a history window is the case: the session gains the
+   * Turn a beat before the presentation is restored to the live tail, so the
+   * one moment the arrival is *detectable* is not a moment it can be answered.
+   * The answer is deferred rather than dropped — kept until the Turn can
+   * actually be aligned, which is what the reader is waiting to see.
+   */
+  const pendingNewTurnIdRef = useRef<string | null>(null);
+  const settleFramesRef = useRef(0);
+  /** When the yield to our own animated scroll lapses, if it has not ended. */
+  const smoothScrollUntilMsRef = useRef(0);
+  /** Where the viewport was on the previous frame of that yield. */
+  const smoothScrollLastTopRef = useRef(0);
+  /** When that yield last saw the viewport move, which is what ends it. */
+  const smoothScrollLastMoveAtMsRef = useRef(0);
+  /** Where the animation started, so the trace can say how far it got. */
+  const smoothScrollFromPxRef = useRef(0);
+  const pendingSnapBackTargetRef = useRef<number | null>(null);
+
+  isFollowingOutputRef.current = isFollowingOutput;
   isStreamingRef.current = isStreaming;
-  onContinuousFollowFrameRef.current = onContinuousFollowFrame;
-  canAnimateTailFollowRef.current = canAnimateTailFollow;
-  getAutoFollowTargetScrollTopRef.current = getAutoFollowTargetScrollTop;
-  shouldSuspendAutoFollowRef.current = shouldSuspendAutoFollow;
-
-  const setFollowingOutput = useCallback((nextValue: boolean) => {
-    isFollowingOutputRef.current = nextValue;
-    setIsFollowingOutput(prev => (prev === nextValue ? prev : nextValue));
-    if (!nextValue && continuousFollowFrameRef.current !== null) {
-      cancelAnimationFrame(continuousFollowFrameRef.current);
-      continuousFollowFrameRef.current = null;
-    }
-    if (!nextValue) {
-      lastContinuousFollowFrameMsRef.current = null;
-      nativeSmoothFollowUntilMsRef.current = 0;
-    }
-  }, []);
+  isViewportActiveRef.current = isViewportActive;
+  latestTurnIdRef.current = latestTurnId;
 
-  const stopContinuousFollowLoop = useCallback(() => {
-    if (continuousFollowFrameRef.current !== null) {
-      cancelAnimationFrame(continuousFollowFrameRef.current);
-      continuousFollowFrameRef.current = null;
+  const stopFollowFrame = useCallback(() => {
+    if (followFrameRef.current !== null) {
+      cancelAnimationFrame(followFrameRef.current);
+      followFrameRef.current = null;
     }
-    lastContinuousFollowFrameMsRef.current = null;
   }, []);
 
   /**
-   * Continuous RAF-driven follow loop.
+   * Whether the frame loop is actively moving the viewport.
    *
-   * Why this exists:
-   *  - Streaming text + auto-collapsing tool cards generate dense bursts of
-   *    DOM mutations and CSS transitions. Event-driven follow (via observers)
-   *    is gated by `shouldSuspendAutoFollow` during transitions, which makes
-   *    the viewport visibly stall and then jump after the transition ends.
-   *  - This loop runs every animation frame while follow + streaming is
-   *    active, pushing scrollTop toward the latest token regardless of any
-   *    intermediate layout shrink. The result is a smooth, continuous tail.
+   * Ownership is the other question and outlives this one: the loop stops once
+   * the settle budget runs out, and follow keeps the viewport so that streaming
+   * can resume. Reading ownership as "something is correcting this" hands the
+   * viewport to a loop that is not running — measured, a drag came to rest
+   * 813px into the reserved blank with `isFollowingOutput` true, the loop
+   * asleep, and nothing to bring it back.
+   */
+  const isFollowCorrectingViewport = useCallback(() => (
+    isFollowingOutputRef.current && followFrameRef.current !== null
+  ), []);
+
+  const readContentEndScrollTop = useCallback((scroller: HTMLElement) => (
+    contentEndScrollTop({
+      scrollHeight: scroller.scrollHeight,
+      clientHeight: scroller.clientHeight,
+      tailSpacerPx: getTailSpacerPx(),
+    })
+  ), [getTailSpacerPx]);
+
+  /**
+   * Forget which Turn is pinned.
    *
-   * Safety:
-   *  - Programmatic scrolls inside this loop bump
-   *    `programmaticScrollUntilMsRef` so the user-intent detector does not
-   *    misclassify them as upward scrolls.
-   *  - The loop bails out as soon as follow is exited, streaming ends, the
-   *    scroller disappears, or the viewport is already pinned to the bottom.
+   * This is the pin's *identity*, not its activity. A user takeover only
+   * suspends the pin — it must survive so that a snap back out of the reserved
+   * blank returns a short new Turn to the viewport top instead of yanking it
+   * into the middle. Only three things retire a pin: the crossover to
+   * `hold-tail`, a newer Turn replacing it, and the session changing. The
+   * crossover is one-way by construction, since nothing re-pins a Turn whose
+   * identity has been dropped; a card collapse that pulls content back under one
+   * viewport must not resurrect the pin.
    */
-  const runContinuousFollowFrame = useCallback((nowMs: number) => {
-    continuousFollowFrameRef.current = null;
+  const retirePin = useCallback(() => {
+    pinTurnIdRef.current = null;
+    pinScrollTopRef.current = null;
+    pinAttemptsRef.current = 0;
+  }, []);
 
-    if (!isFollowingOutputRef.current || !isStreamingRef.current) {
-      lastContinuousFollowFrameMsRef.current = null;
-      return;
+  /**
+   * Resolve the pinned Turn's offset from live layout every frame rather than
+   * caching it once. Unrendered items are estimates until measured, and every
+   * measurement shifts the absolute offsets below it; a cached pin would drift.
+   */
+  const readPinScrollTop = useCallback((): number | null => {
+    const pinTurnId = pinTurnIdRef.current;
+    if (!pinTurnId) {
+      return null;
     }
 
-    const scroller = scrollerRef.current;
-    if (!scroller) {
-      lastContinuousFollowFrameMsRef.current = null;
-      return;
+    const resolved = resolveTurnTopScrollTop(pinTurnId);
+    if (resolved !== null) {
+      pinScrollTopRef.current = resolved;
+      pinAttemptsRef.current = 0;
+      return resolved;
     }
 
-    if (document.hidden) {
-      lastContinuousFollowFrameMsRef.current = null;
-      return;
+    if (pinScrollTopRef.current === null) {
+      pinAttemptsRef.current += 1;
+      if (pinAttemptsRef.current >= PIN_RESOLVE_MAX_ATTEMPTS) {
+        retirePin();
+      }
     }
+    return pinScrollTopRef.current;
+  }, [retirePin, resolveTurnTopScrollTop]);
 
-    const scheduleNextFrame = () => {
-      if (!isFollowingOutputRef.current || !isStreamingRef.current || document.hidden) {
-        return;
-      }
-      continuousFollowFrameRef.current = requestAnimationFrame(runContinuousFollowFrame);
-    };
+  /**
+   * Offset the follow rule would own for the current geometry, ignoring any
+   * offset it was holding. Used to decide, and to aim, a snap back — both of
+   * which happen while the viewport belongs to nobody.
+   *
+   * Retires a pin that has crossed over on the way past: with no frame loop
+   * running, this is the only place that crossover can be noticed.
+   */
+  const resolveFollowTargetScrollTop = useCallback((scroller: HTMLElement) => {
+    const desired = readContentEndScrollTop(scroller);
+    const next = memorylessFollowState(
+      pinTurnIdRef.current ? 'pin-turn-top' : 'hold-tail',
+      {
+        desiredScrollTop: desired,
+        pinScrollTop: readPinScrollTop(),
+        maxGapPx: tailHoldMaxGapPx(scroller.clientHeight),
+      },
+    );
+    if (next.mode === 'hold-tail') {
+      retirePin();
+    }
+    return next.target;
+  }, [readContentEndScrollTop, readPinScrollTop, retirePin]);
 
-    if (canAnimateTailFollowRef.current?.() === false) {
-      lastContinuousFollowFrameMsRef.current = null;
-      return;
+  /**
+   * Stand the frame loop down for an animated scroll this hook is about to
+   * issue. Taken from the viewport as it is now, so the first frame of the
+   * yield can tell travel from a stall.
+   */
+  const beginSmoothScrollYield = useCallback(() => {
+    const nowMs = performance.now();
+    smoothScrollUntilMsRef.current = nowMs + SMOOTH_SCROLL_YIELD_MS;
+    smoothScrollLastMoveAtMsRef.current = nowMs;
+    smoothScrollLastTopRef.current = scrollerRef.current?.scrollTop ?? 0;
+    smoothScrollFromPxRef.current = smoothScrollLastTopRef.current;
+  }, [scrollerRef]);
+
+  /**
+   * Take the viewport back, and say why.
+   *
+   * Every way this ends looks the same from outside — the follow simply starts
+   * writing again — and they are not the same fact. `stalled` after no travel
+   * at all is an animation that never ran, which is what a reader reports as
+   * the jump to latest having lost its animation; the same reason after most
+   * of the distance is the ordinary end of one.
+   */
+  const endSmoothScrollYield = useCallback((
+    reason: 'arrived' | 'stalled' | 'backstop' | 'superseded',
+  ) => {
+    if (smoothScrollUntilMsRef.current !== 0 && reason !== 'superseded') {
+      const travelledPx = (scrollerRef.current?.scrollTop ?? 0) - smoothScrollFromPxRef.current;
+      traceViewportRepeating(`smoothYield|${reason}|${Math.abs(travelledPx) < 1}`, {
+        location: 'followOutput.animatedScrollEnded',
+        message: 'the frame loop took the viewport back from its own animation',
+        travelPx: travelledPx,
+        data: () => ({
+          reason,
+          travelledPx: roundViewportPx(travelledPx),
+          fromPx: roundViewportPx(smoothScrollFromPxRef.current),
+          scrollTopPx: roundViewportPx(scrollerRef.current?.scrollTop ?? 0),
+        }),
+      });
     }
+    smoothScrollUntilMsRef.current = 0;
+  }, [scrollerRef]);
 
-    const previousFrameMs = lastContinuousFollowFrameMsRef.current;
-    const frameDeltaMs = previousFrameMs === null
-      ? 1000 / 60
-      : nowMs - previousFrameMs;
-    lastContinuousFollowFrameMsRef.current = nowMs;
+  /**
+   * Issue the one-shot content-end scroll, yielding the frame loop to it when
+   * it is animated. Without the yield the next frame overwrites `scrollTop` and
+   * the animation never plays.
+   */
+  const runContentEndScroll = useCallback((behavior: ScrollBehavior) => {
+    if (behavior === 'smooth') {
+      beginSmoothScrollYield();
+    } else {
+      // An instant scroll of ours replaces whatever was travelling.
+      endSmoothScrollYield('superseded');
+    }
+    scrollToContentEnd(behavior);
+  }, [beginSmoothScrollYield, endSmoothScrollYield, scrollToContentEnd]);
 
-    if (nowMs < nativeSmoothFollowUntilMsRef.current) {
-      scheduleNextFrame();
+  /** Move the viewport to whatever the follow state currently owns. */
+  const applyFollowTarget = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) {
       return;
     }
 
-    // While a known collapse animation / layout transition is in flight, the
-    // VirtualMessageList anchor-lock + bottom-reservation footer is preserving
-    // the upper visual anchor. The loop remains alive but must not write until
-    // that transaction releases ownership.
-    const isSuspended = shouldSuspendAutoFollowRef.current?.() === true;
-    if (!isSuspended) {
-      onContinuousFollowFrameRef.current?.();
-      const targetScrollTop = getAutoFollowTargetScrollTopRef.current?.(scroller)
-        ?? Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-      const distanceToTarget = Math.max(0, targetScrollTop - scroller.scrollTop);
-
-      if (distanceToTarget > CONTINUOUS_FOLLOW_SNAP_THRESHOLD_PX) {
-        const nextScrollTop = distanceToTarget > CONTINUOUS_FOLLOW_MAX_ANIMATED_DISTANCE_PX
-          ? targetScrollTop
-          : scroller.scrollTop + computeContinuousFollowStep(distanceToTarget, frameDeltaMs);
-        programmaticScrollUntilMsRef.current = nowMs + PROGRAMMATIC_SCROLL_GUARD_MS;
-        explicitUserScrollIntentUntilMsRef.current = 0;
-        scroller.scrollTop = Math.min(targetScrollTop, nextScrollTop);
-        lastObservedScrollTopRef.current = scroller.scrollTop;
-      }
+    const remembered = followStateRef.current;
+    const desired = readContentEndScrollTop(scroller);
+    /*
+     * While the transcript is opening it is still hidden, so nothing is gained
+     * by remembering an earlier offset: drop the memory and track the content
+     * end exactly. The virtualizer writes `scrollTop` too during this window — it
+     * compensates a history prepend from the item index before the prepended
+     * heights reach the DOM — and any accommodation of that is both invisible
+     * and, once paging stops, permanent. The gap tolerance is a *streaming*
+     * allowance: blank below the live output is acceptable only because more
+     * output is about to fill it.
+     */
+    const previous: TailFollowState = isOpeningViewport()
+      ? { mode: remembered.mode, target: desired }
+      : remembered;
+    const pin = readPinScrollTop();
+    const next = nextTailFollowState(previous, {
+      desiredScrollTop: desired,
+      pinScrollTop: pin,
+      maxGapPx: tailHoldMaxGapPx(scroller.clientHeight),
+    });
+    followStateRef.current = next;
+    if (next.mode === 'hold-tail') {
+      retirePin();
+    }
+    // Content is still moving, so keep the settle window open.
+    if (Math.abs(next.target - previous.target) > BOTTOM_EPSILON_PX) {
+      settleFramesRef.current = SETTLE_FRAMES;
     }
 
-    if (!isFollowingOutputRef.current || !isStreamingRef.current) {
-      return;
+    const onTarget = Math.abs(next.target - scroller.scrollTop) <= BOTTOM_EPSILON_PX;
+    if (smoothScrollUntilMsRef.current !== 0) {
+      /*
+       * An animated scroll of ours is in flight and heading for this same
+       * target. Track the state, but leave the writing to it.
+       *
+       * It ends when the viewport stops moving for `SMOOTH_SCROLL_STALL_MS`,
+       * which is the animation's own answer rather than a guess at how long it
+       * takes: the browser scales the duration with the distance, and a jump to
+       * latest from the top of a transcript takes longer than anything else
+       * this issues. Arriving ends it too, and sooner.
+       */
+      const nowMs = performance.now();
+      if (scroller.scrollTop !== smoothScrollLastTopRef.current) {
+        smoothScrollLastTopRef.current = scroller.scrollTop;
+        smoothScrollLastMoveAtMsRef.current = nowMs;
+      }
+      if (onTarget) {
+        endSmoothScrollYield('arrived');
+      } else if (nowMs >= smoothScrollUntilMsRef.current) {
+        endSmoothScrollYield('backstop');
+      } else if (nowMs - smoothScrollLastMoveAtMsRef.current >= SMOOTH_SCROLL_STALL_MS) {
+        endSmoothScrollYield('stalled');
+      } else {
+        return;
+      }
+      /*
+       * The animation is over, and the target has moved on under it — it aims
+       * at the offset it was issued for, and content arrives while it travels.
+       * Falling through rather than returning is what covers that growth on
+       * this frame instead of the next one.
+       */
     }
 
-    scheduleNextFrame();
-  }, [scrollerRef]);
+    if (!onTarget) {
+      const fromPx = scroller.scrollTop;
+      /*
+       * Eased across the frames the follow already has, rather than written in
+       * one step.
+       *
+       * The target moves when Markdown reflows, which is a whole line at a
+       * time with nothing in between, so an outright write spends a line of
+       * travel on one frame out of seven. This spends the same distance over
+       * all seven. It buys latency, not speed: under steady growth the offset
+       * settles where its per-frame catch-up equals the growth, so the step
+       * converges on the content's growth per frame whatever the fraction is.
+       *
+       * Only the *write* is eased. `followStateRef` still holds the true
+       * target, so the settle budget, the at-tail band and the snap back all
+       * keep reading the offset the follow rule owns rather than how far
+       * behind its own ease is riding.
+       *
+       * Not while the transcript is opening. There the target is authoritative
+       * and the transcript is hidden, so an ease would only make the reveal
+       * wait for travel nobody can see — and the reveal is watching for the
+       * viewport to reach the content end.
+       */
+      const step = !isOpeningViewport() && shouldEaseTailFollow({
+        scrollHeightPx: scroller.scrollHeight,
+        clientHeightPx: scroller.clientHeight,
+      })
+        ? nextEasedScrollTopPx(fromPx, next.target)
+        : { offsetPx: next.target, outcome: 'snapped' as const };
+      viewportOwner.write({ owner: 'follow-output', topPx: step.offsetPx });
+      /*
+       * Read back rather than taken from the step. The register can refuse
+       * this write outright, and a refused follow moves nothing — believing
+       * the step there would report a follow that is being outranked as the
+       * smoothest one in the session, and would book the frame below forever
+       * over travel that never happens.
+       */
+      const movedPx = scroller.scrollTop - fromPx;
+      /*
+       * An ease in flight is a reason to run again, and the only one it has
+       * once the target stops moving: the budget is refreshed by the *target*
+       * travelling, so a correction arriving on the last frame of a settle
+       * would otherwise be abandoned partway. Bounded by the ease itself,
+       * which halves what is left every frame and is inside `BOTTOM_EPSILON_PX`
+       * within a handful of them.
+       */
+      if (step.outcome === 'eased' && movedPx !== 0) {
+        settleFramesRef.current = Math.max(settleFramesRef.current, 1);
+      }
+      if (isTailFollowDiagnosticsEnabled()) {
+        noteTailFollowStep('list', {
+          stepPx: movedPx,
+          lagPx: next.target - fromPx,
+          innerScroll: true,
+          snapped: step.outcome === 'snapped',
+        });
+      }
+    }
+  }, [
+    endSmoothScrollYield,
+    isOpeningViewport,
+    readContentEndScrollTop,
+    readPinScrollTop,
+    retirePin,
+    scrollerRef,
+    viewportOwner,
+  ]);
 
-  const startContinuousFollowLoop = useCallback(() => {
-    if (continuousFollowFrameRef.current !== null) {
+  const runFollowFrame = useCallback(() => {
+    followFrameRef.current = null;
+    if (
+      !isFollowingOutputRef.current ||
+      !isViewportActiveRef.current ||
+      document.hidden
+    ) {
       return;
     }
-    if (!isFollowingOutputRef.current || !isStreamingRef.current) {
+    // Streaming holds the loop open indefinitely; anything else runs only
+    // until the transcript stops moving.
+    if (!isStreamingRef.current && settleFramesRef.current <= 0) {
       return;
     }
-    continuousFollowFrameRef.current = requestAnimationFrame(runContinuousFollowFrame);
-  }, [runContinuousFollowFrame]);
+    if (!isStreamingRef.current) {
+      settleFramesRef.current -= 1;
+    }
 
-  const cancelPendingAutoFollowArm = useCallback(() => {
-    armedAutoFollowTurnIdRef.current = null;
-  }, []);
+    applyFollowTarget();
+    followFrameRef.current = requestAnimationFrame(runFollowFrame);
+  }, [applyFollowTarget]);
 
-  const runProgrammaticScroll = useCallback((scrollAction: () => void) => {
-    programmaticScrollUntilMsRef.current = performance.now() + PROGRAMMATIC_SCROLL_GUARD_MS;
-    explicitUserScrollIntentUntilMsRef.current = 0;
-    scrollAction();
-    const scroller = scrollerRef.current;
-    if (scroller) {
-      lastObservedScrollTopRef.current = scroller.scrollTop;
+  const startFollowFrame = useCallback(() => {
+    if (
+      followFrameRef.current === null &&
+      isFollowingOutputRef.current &&
+      (isStreamingRef.current || settleFramesRef.current > 0)
+    ) {
+      followFrameRef.current = requestAnimationFrame(runFollowFrame);
     }
-  }, [scrollerRef]);
+  }, [runFollowFrame]);
 
   const enterFollowOutput = useCallback((reason: FollowOutputEnterReason) => {
-    cancelPendingAutoFollowArm();
-    explicitUserScrollIntentUntilMsRef.current = 0;
-    nativeSmoothFollowUntilMsRef.current = reason === 'jump-to-latest'
-      ? performance.now() + NATIVE_SMOOTH_FOLLOW_GRACE_MS
-      : 0;
-    setFollowingOutput(true);
-    const followAction = reason === 'jump-to-latest'
-      ? performUserFollowScroll
-      : performAutoFollowScroll;
-    runProgrammaticScroll(followAction);
-  }, [
-    cancelPendingAutoFollowArm,
-    performAutoFollowScroll,
-    performUserFollowScroll,
-    runProgrammaticScroll,
-    setFollowingOutput,
-  ]);
+    if (!isViewportActiveRef.current) {
+      return;
+    }
 
-  const exitFollowOutput = useCallback((_reason: FollowOutputExitReason) => {
-    cancelPendingAutoFollowArm();
-    explicitUserScrollIntentUntilMsRef.current = 0;
-    nativeSmoothFollowUntilMsRef.current = 0;
-    setFollowingOutput(false);
-    const scroller = scrollerRef.current;
-    if (scroller) {
-      lastObservedScrollTopRef.current = scroller.scrollTop;
+    /*
+     * A newly submitted Turn opens at the viewport top, and that is the whole
+     * of the answer to one arriving. Until it is in the transcript on screen
+     * there is nothing to align, and the fallback below — the end of real
+     * content — is not a stand-in for it: it would leave the Turn unpinned
+     * where the reader was, or pull them out of a history window entirely.
+     *
+     * So the answer waits for the Turn instead. Resolved before ownership
+     * changes hands, because waiting has to leave the viewport exactly as it
+     * was found.
+     */
+    const pinTurnId = reason === 'new-turn' ? latestTurnIdRef.current : null;
+    const pinnedTurnToTop = pinTurnId !== null && scrollTurnToTop(pinTurnId);
+    if (reason === 'new-turn') {
+      pendingNewTurnIdRef.current = pinnedTurnToTop ? null : pinTurnId;
+      if (!pinnedTurnToTop) {
+        /*
+         * The viewport is deliberately left exactly as it was, so the only
+         * evidence that a submission was answered at all is this line. A
+         * deferral with no `followOutput.enter` after it is the reader's
+         * "nothing happened when I sent a message".
+         */
+        traceViewportRepeating('follow|deferred-new-turn', {
+          location: 'followOutput.deferNewTurn',
+          message: 'new Turn is not in the transcript on screen yet, so the answer waits',
+          data: () => ({ turnId: pinTurnId }),
+        });
+        return;
+      }
     }
-  }, [cancelPendingAutoFollowArm, scrollerRef, setFollowingOutput]);
 
-  // Pinned latest turns are a handoff transaction: the pin owns the viewport
-  // until its reservation is consumed, then the armed turn may resume tail
-  // follow. Keep the arm while clearing logical follow ownership so the two
-  // semantic owners can never be active at the same time.
-  const preparePinnedTurnFollowHandoff = useCallback(() => {
-    if (!latestTurnId) {
+    isFollowingOutputRef.current = true;
+    setIsFollowingOutput(true);
+    settleFramesRef.current = SETTLE_FRAMES;
+    traceViewportRepeating(`follow|enter|${reason}`, {
+      location: 'followOutput.enter',
+      message: 'follow-output took the viewport',
+      data: () => ({
+        reason,
+        pinnedTurnId: pinnedTurnToTop ? pinTurnId : pinTurnIdRef.current,
+        isStreaming: isStreamingRef.current,
+        scrollTopPx: roundViewportPx(scrollerRef.current?.scrollTop ?? 0),
+      }),
+    });
+    /*
+     * Ownership is taken here rather than at each write, because following is
+     * continuous: between two frames of the loop the viewport is still ours,
+     * and a correction slipping into that gap is the thing this prevents. A
+     * refused claim is not a reason to stop following — the loop keeps its
+     * state and simply writes nothing until whoever outranks it is done.
+     */
+    viewportOwner.claim('follow-output');
+
+    const scroller = scrollerRef.current;
+    const contentEnd = scroller ? readContentEndScrollTop(scroller) : 0;
+
+    // A snap back has already placed the viewport on the target it chose, and
+    // that target was resolved under whichever mode still applies. Resume
+    // ownership without a second move.
+    if (reason === 'tail-snap-back') {
+      followStateRef.current = {
+        mode: pinTurnIdRef.current ? 'pin-turn-top' : 'hold-tail',
+        target: scroller?.scrollTop ?? contentEnd,
+      };
+      startFollowFrame();
       return;
     }
 
-    armedAutoFollowTurnIdRef.current = latestTurnId;
-    explicitUserScrollIntentUntilMsRef.current = 0;
-    nativeSmoothFollowUntilMsRef.current = 0;
-    setFollowingOutput(false);
-  }, [latestTurnId, setFollowingOutput]);
-
-  const armFollowOutputForNewTurn = useCallback(() => {
-    if (!latestTurnId) {
-      cancelPendingAutoFollowArm();
+    /*
+     * A pin on the newest Turn already satisfies "show me the latest output".
+     * The mode only holds while that Turn's answer is shorter than one
+     * viewport, so everything it has produced is on screen; re-aiming at the
+     * content end would scroll *up* and shove the message the user just sent
+     * into the middle of the viewport.
+     *
+     * This fires for real: restoring the tail presentation asks for a jump to
+     * latest one frame after the Turn that caused it got pinned, which
+     * overwrote the pin every time.
+     */
+    if (
+      reason === 'jump-to-latest' &&
+      pinTurnIdRef.current !== null &&
+      pinTurnIdRef.current === latestTurnIdRef.current
+    ) {
+      const pinTarget = readPinScrollTop() ?? scroller?.scrollTop ?? contentEnd;
+      followStateRef.current = { mode: 'pin-turn-top', target: pinTarget };
+      // Animated like every other jump to latest. The frame loop would cancel
+      // the animation on its next tick, so it stands down for it exactly as it
+      // does for `runContentEndScroll`.
+      if (scroller && Math.abs(scroller.scrollTop - pinTarget) > BOTTOM_EPSILON_PX) {
+        beginSmoothScrollYield();
+        viewportOwner.write({
+          owner: 'follow-output',
+          topPx: pinTarget,
+          behavior: 'smooth',
+        });
+      }
+      startFollowFrame();
       return;
     }
 
-    preparePinnedTurnFollowHandoff();
-    runProgrammaticScroll(performLatestTurnStickyPin);
+    // Every other entry reason resumes at the end of real content.
+    if (pinnedTurnToTop) {
+      pinTurnIdRef.current = pinTurnId;
+      pinScrollTopRef.current = null;
+      pinAttemptsRef.current = 0;
+      endSmoothScrollYield('superseded');
+      followStateRef.current = { mode: 'pin-turn-top', target: scroller?.scrollTop ?? contentEnd };
+    } else {
+      retirePin();
+      followStateRef.current = { mode: 'hold-tail', target: contentEnd };
+      runContentEndScroll(reason === 'jump-to-latest' ? 'smooth' : 'auto');
+    }
+
+    startFollowFrame();
   }, [
-    cancelPendingAutoFollowArm,
-    latestTurnId,
-    performLatestTurnStickyPin,
-    preparePinnedTurnFollowHandoff,
-    runProgrammaticScroll,
+    viewportOwner,
+    beginSmoothScrollYield,
+    endSmoothScrollYield,
+    readContentEndScrollTop,
+    readPinScrollTop,
+    retirePin,
+    runContentEndScroll,
+    scrollTurnToTop,
+    scrollerRef,
+    startFollowFrame,
   ]);
 
-  const resumeFollowOutputForMountedStream = useCallback(() => {
-    if (!latestTurnId || !isStreaming || virtualItemCount === 0) {
-      return false;
+  /**
+   * Release the viewport without forgetting the pin. The user owns it from
+   * here; the pin stays on record so a snap back can restore the mode rather
+   * than fall through to the tail.
+   */
+  const exitFollowOutput = useCallback((reason: FollowOutputExitReason) => {
+    if (isFollowingOutputRef.current) {
+      traceViewportRepeating(`follow|exit|${reason}`, {
+        location: 'followOutput.exit',
+        message: 'follow-output gave the viewport up',
+        data: () => ({
+          reason,
+          pinnedTurnId: pinTurnIdRef.current,
+          scrollTopPx: roundViewportPx(scrollerRef.current?.scrollTop ?? 0),
+        }),
+      });
     }
+    isFollowingOutputRef.current = false;
+    setIsFollowingOutput(false);
+    endSmoothScrollYield('superseded');
+    pendingSnapBackTargetRef.current = null;
+    viewportOwner.release('follow-output');
+    viewportOwner.release('snap-back');
+    stopFollowFrame();
+  }, [endSmoothScrollYield, scrollerRef, stopFollowFrame, viewportOwner]);
 
-    enterFollowOutput('auto-follow');
-    return true;
-  }, [enterFollowOutput, isStreaming, latestTurnId, virtualItemCount]);
-
-  const activateArmedFollowOutput = useCallback(() => {
-    const armedTurnId = armedAutoFollowTurnIdRef.current;
-    const isAlreadyFollowing = isFollowingOutputRef.current;
-    const isArmedForLatestTurn = Boolean(latestTurnId && armedTurnId === latestTurnId);
-    const isAutoFollowSuspended = shouldSuspendAutoFollow?.() === true;
-
-    if (!latestTurnId || !isArmedForLatestTurn || isAlreadyFollowing) {
-      return false;
+  /**
+   * Re-assert ownership after a layout change. This deliberately does not force
+   * the viewport to the content end: a tool-card collapse resizes the content
+   * too, and the hold rule is what keeps that from dragging earlier content
+   * down.
+   */
+  const scheduleFollowToLatest = useCallback(() => {
+    if (!isFollowingOutputRef.current || !isViewportActiveRef.current) {
+      return;
     }
+    settleFramesRef.current = SETTLE_FRAMES;
+    applyFollowTarget();
+    startFollowFrame();
+  }, [applyFollowTarget, startFollowFrame]);
 
-    if (isAutoFollowSuspended) {
-      return false;
-    }
+  const handleUserScrollIntent = useCallback(() => {
+    pendingSnapBackTargetRef.current = null;
+    exitFollowOutput('user-scroll');
+  }, [exitFollowOutput]);
 
-    cancelPendingAutoFollowArm();
-    nativeSmoothFollowUntilMsRef.current = 0;
-    setFollowingOutput(true);
-    runProgrammaticScroll(performAutoFollowScroll);
-    return true;
-  }, [
-    cancelPendingAutoFollowArm,
-    latestTurnId,
-    performAutoFollowScroll,
-    runProgrammaticScroll,
-    setFollowingOutput,
-    shouldSuspendAutoFollow,
-  ]);
+  /**
+   * Turns were rolled back out of the session.
+   *
+   * The ledger cannot say this on its own — a shorter `dialogTurns` is also
+   * what a window re-cut and a hydration merge look like — so the rollback
+   * announces it, the same way a submission does. What it asks for is the
+   * *absence* of the pin: the Turn that was pinned is one of the ones that just
+   * stopped existing, and the transcript now ends somewhere else.
+   *
+   * This takes the viewport whether or not follow owned it, which is the same
+   * licence the snap back has and rests on the same asymmetry. A rollback at
+   * Turn N removes N and everything after it, and the reader had N on screen —
+   * they clicked its own button. So the new tail is always within a Turn of
+   * where they already are, and there is no history below them to be pulled out
+   * of. Gating this on ownership instead made it dead code in the case it was
+   * written for: reaching a Turn far enough up to want it gone means scrolling,
+   * and scrolling is exactly what hands the viewport back to the reader.
+   *
+   * Without it the viewport anchor answers instead, and answers the wrong
+   * question — it holds the reader's Turn at its offset from the viewport top,
+   * so an 8-Turn session rolled back at Turn 7 came to rest showing Turns 2..6
+   * with the new last Turn's answer below the fold.
+   */
+  const handleTurnsRolledBack = useCallback(() => {
+    pendingNewTurnIdRef.current = null;
+    enterFollowOutput('turns-rolled-back');
+  }, [enterFollowOutput]);
 
-  const handleUserScrollIntent = useCallback(() => {
-    if (!isFollowingOutputRef.current && armedAutoFollowTurnIdRef.current === null) {
+  const handleScroll = useCallback(() => {
+    // Scroll events describe the resulting viewport position, but do not prove user intent.
+    // Layout growth and virtualizer remeasurement can emit them while output follow still owns
+    // the viewport. Explicit wheel, touch, and keyboard handlers release that ownership instead.
+  }, []);
+
+  /**
+   * A scroll gesture has come to rest.
+   *
+   * The reserved tail spacer is a full viewport of blank that the user can park
+   * in, and during slow streaming it can take a long time for output to push it
+   * away — with nothing on screen and, until the viewport is back in the tail
+   * band, no jump-to-latest affordance either. So resting below the follow
+   * target snaps back to it and hands the viewport to follow, whether or not
+   * follow owned it before.
+   *
+   * Acting on rest rather than on every scroll event is what keeps this from
+   * fighting momentum: the correction runs after the gesture is over, never
+   * during it.
+   */
+  const handleScrollSettled = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || !isViewportActiveRef.current) {
       return;
     }
 
-    const now = performance.now();
-    if (now <= programmaticScrollUntilMsRef.current) {
-      const scroller = scrollerRef.current;
-      const alreadyAwayFromBottom = scroller
-        ? getDistanceFromBottom(scroller) > AUTO_FOLLOW_BOTTOM_THRESHOLD_PX
-        : false;
-
-      if (
-        !alreadyAwayFromBottom &&
-        !isFollowingOutputRef.current &&
-        armedAutoFollowTurnIdRef.current === null
-      ) {
+    const pendingTarget = pendingSnapBackTargetRef.current;
+    if (pendingTarget !== null) {
+      pendingSnapBackTargetRef.current = null;
+      // The animation is over either way, so the hold ends here rather than
+      // waiting out its backstop.
+      viewportOwner.release('snap-back');
+      // Take the viewport back only if our own snap is what landed it here. A
+      // gesture that overrode the animation mid-flight belongs to the user.
+      const arrived = Math.abs(scroller.scrollTop - pendingTarget)
+        <= FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX;
+      traceViewportRepeating(`snapBack|settled|${arrived}`, {
+        location: 'snapBack.settled',
+        message: arrived
+          ? 'snap back arrived and handed the viewport to follow'
+          : 'snap back was overridden before it arrived',
+        data: () => ({
+          targetPx: roundViewportPx(pendingTarget),
+          scrollTopPx: roundViewportPx(scroller.scrollTop),
+        }),
+      });
+      if (arrived) {
+        enterFollowOutput('tail-snap-back');
         return;
       }
+    }
 
-      programmaticScrollUntilMsRef.current = Math.min(
-        programmaticScrollUntilMsRef.current,
-        now + USER_SCROLL_INTENT_PROGRAMMATIC_GRACE_MS,
+    /*
+     * Ownership is not correction, and the difference is deliberate — see
+     * `isFollowCorrectingViewport`.
+     *
+     * A live loop still gets the viewport to itself. It converges on its target
+     * within a few frames, so a snap back would only be racing it.
+     */
+    const isCorrecting = isFollowCorrectingViewport();
+    if (isCorrecting || isOpeningViewport()) {
+      // "The wheel went down and nothing brought me back" is this line or the
+      // one below it, and they are not the same fault.
+      traceViewportRepeating(
+        `snapBack|declined|${isCorrecting ? 'follow-correcting' : 'opening'}`,
+        {
+          location: 'snapBack.declined',
+          message: 'gesture came to rest, but the snap back is not this settle\'s business',
+          data: () => ({
+            reason: isCorrecting ? 'follow-correcting' : 'opening-reveal',
+            scrollTopPx: roundViewportPx(scroller.scrollTop),
+          }),
+        },
       );
+      return;
     }
-    explicitUserScrollIntentUntilMsRef.current = now + USER_SCROLL_INTENT_WINDOW_MS;
-    nativeSmoothFollowUntilMsRef.current = 0;
 
-    if (isFollowingOutputRef.current) {
-      // Input handlers see the upward intent before scrollTop necessarily moves.
-      exitFollowOutput('user-scroll-up');
+    const followTarget = resolveFollowTargetScrollTop(scroller);
+    const snapTo = tailSnapBackScrollTop({
+      scrollTop: scroller.scrollTop,
+      followTargetScrollTop: followTarget,
+      thresholdPx: FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX,
+    });
+    if (snapTo === null) {
+      traceViewportRepeating('snapBack|not-in-blank', {
+        location: 'snapBack.notNeeded',
+        message: 'gesture came to rest above the follow target, so nothing to snap back from',
+        data: () => ({
+          scrollTopPx: roundViewportPx(scroller.scrollTop),
+          followTargetPx: roundViewportPx(followTarget),
+        }),
+      });
       return;
     }
 
-    cancelPendingAutoFollowArm();
-  }, [cancelPendingAutoFollowArm, exitFollowOutput, scrollerRef]);
-
-  const scheduleFollowToLatest = useCallback((_reason: string) => {
-    if (
-      !isFollowingOutputRef.current ||
-      !isStreamingRef.current ||
-      virtualItemCount === 0 ||
-      shouldSuspendAutoFollow?.() === true
-    ) {
-      return;
+    /*
+     * Held for the animation, not just the write. Ownership passing to
+     * follow-output only on landing is what left the snap belonging to nobody
+     * while it travelled, and the anchor undid its first 0.7px 958 times.
+     */
+    const issued = viewportOwner.write({
+      owner: 'snap-back',
+      topPx: snapTo,
+      behavior: 'smooth',
+      holdForMs: SNAP_BACK_HOLD_MS,
+    });
+    traceViewportRepeating(`snapBack|issued|${issued}`, {
+      location: 'snapBack.issued',
+      message: issued ? 'snap back is on its way' : 'snap back was refused the viewport',
+      data: () => ({
+        fromPx: roundViewportPx(scroller.scrollTop),
+        targetPx: roundViewportPx(snapTo),
+        followTargetPx: roundViewportPx(followTarget),
+      }),
+    });
+    if (issued) {
+      pendingSnapBackTargetRef.current = snapTo;
     }
+  }, [
+    viewportOwner,
+    enterFollowOutput,
+    isFollowCorrectingViewport,
+    isOpeningViewport,
+    resolveFollowTargetScrollTop,
+    scrollerRef,
+  ]);
 
-    // Follow events only wake the single tail writer. They must not launch a
-    // second scroll action that competes with the RAF loop or the virtualizer.
-    startContinuousFollowLoop();
-  }, [shouldSuspendAutoFollow, startContinuousFollowLoop, virtualItemCount]);
+  const getFollowTargetScrollTop = useCallback(() => (
+    isFollowingOutputRef.current ? followStateRef.current.target : null
+  ), []);
 
-  const handleScroll = useCallback(() => {
+  /**
+   * Whether follow-output owns the viewport *now*.
+   *
+   * The `isFollowingOutput` state answers the same question one render later,
+   * which is a different answer inside an event handler that just released it.
+   * A reader's gesture releases ownership and then asks whether the boundary
+   * they are on is worth paging: mirroring the state into a ref at render time
+   * made that ask see the ownership it had itself just ended, and refuse.
+   */
+  const isFollowingOutputNow = useCallback(() => isFollowingOutputRef.current, []);
+
+  /**
+   * The viewport was resized. Keep whatever was on the bottom edge on the
+   * bottom edge.
+   *
+   * A plain scroller preserves `scrollTop`, which anchors the *top* edge: the
+   * bottom is where content gets revealed or swallowed. For a transcript that
+   * is backwards — the interesting end is the bottom — so this anchors there
+   * instead. Follow output already behaves this way for a viewport it owns;
+   * this is the same rule for one it does not.
+   *
+   * The two halves are not equally capable, and the difference is worth
+   * knowing:
+   *
+   * - **A height change moves no content.** Preserving `scrollTop +
+   *   clientHeight` is therefore exact and needs no judgement about what the
+   *   user was doing. It also preserves the distance to the content end, so a
+   *   viewport that was at the end stays at the end for free. Growing the
+   *   viewport is additionally a restoration: the browser used to clamp a
+   *   bottom-anchored viewport at `scrollHeight - clientHeight`, and the
+   *   resident spacer removed that clamp.
+   * - **A width change reflows the transcript.** Where the line that was on the
+   *   bottom edge went is a DOM question, and by the time a resize is observed
+   *   the reflow has already happened — answering it would mean sampling an
+   *   element anchor on the scroll path. The end of the transcript is the one
+   *   position that can be recomputed from geometry, so that case is handled
+   *   and the general one is not.
+   *
+   * Never animated. A height change moves the viewport by exactly the height
+   * that was added or removed, so nothing appears to move at all; the rest is a
+   * correction the user is already watching happen under their cursor.
+   * Ownership does not change either: a gesture ending in the blank expresses
+   * an intent to be at the end, a layout change expresses nothing.
+   */
+  const handleViewportResize = useCallback((input: ViewportResizeInput) => {
     const scroller = scrollerRef.current;
-    if (!scroller) {
+    if (!scroller || isFollowingOutputRef.current) {
+      // Follow re-asserts its own target through `scheduleFollowToLatest`.
       return;
     }
 
-    const currentScrollTop = scroller.scrollTop;
-    const previousScrollTop = lastObservedScrollTopRef.current;
-    lastObservedScrollTopRef.current = currentScrollTop;
-
-    if (!isFollowingOutputRef.current && armedAutoFollowTurnIdRef.current === null) {
-      return;
+    traceViewportRepeating(`resize|${input.wasAtTail}|${input.viewportHeightDeltaPx !== 0}`, {
+      location: 'followOutput.viewportResize',
+      message: 'the scroller box changed under a viewport nobody was following',
+      travelPx: input.viewportHeightDeltaPx,
+      data: () => ({
+        viewportHeightDeltaPx: roundViewportPx(input.viewportHeightDeltaPx),
+        wasAtTail: input.wasAtTail,
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+        clientHeightPx: scroller.clientHeight,
+      }),
+    });
+
+    if (input.viewportHeightDeltaPx !== 0) {
+      viewportOwner.write({
+        owner: 'layout-correction',
+        topPx: Math.max(0, scroller.scrollTop - input.viewportHeightDeltaPx),
+      });
     }
 
-    if (performance.now() <= programmaticScrollUntilMsRef.current) {
+    const followTarget = resolveFollowTargetScrollTop(scroller);
+    if (
+      input.wasAtTail &&
+      followTarget - scroller.scrollTop > FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX
+    ) {
+      viewportOwner.write({ owner: 'layout-correction', topPx: followTarget });
       return;
     }
 
-    const upwardDelta = previousScrollTop - currentScrollTop;
-    if (upwardDelta > USER_SCROLL_DIRECTION_EPSILON_PX) {
-      const now = performance.now();
-      const hasRecentExplicitUserIntent = now <= explicitUserScrollIntentUntilMsRef.current;
-      const distanceFromBottom = getDistanceFromBottom(scroller);
-      if (!hasRecentExplicitUserIntent) {
-        if (
-          isFollowingOutputRef.current &&
-          distanceFromBottom <= AUTO_FOLLOW_BOTTOM_THRESHOLD_PX
-        ) {
-          return;
-        }
-        return;
-      }
-
-      if (shouldSuspendAutoFollow?.() === true) {
-        if (isFollowingOutputRef.current && hasRecentExplicitUserIntent) {
-          exitFollowOutput('user-scroll-up');
-        }
-        explicitUserScrollIntentUntilMsRef.current = 0;
-        return;
-      }
-
-      explicitUserScrollIntentUntilMsRef.current = 0;
-
-      if (!isFollowingOutputRef.current) {
-        cancelPendingAutoFollowArm();
-        return;
-      }
-
-      exitFollowOutput('user-scroll-up');
+    // Whatever left the viewport below the target — a reflow, or a gesture that
+    // never settled — it must not stay there.
+    const snapTo = tailSnapBackScrollTop({
+      scrollTop: scroller.scrollTop,
+      followTargetScrollTop: followTarget,
+      thresholdPx: FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX,
+    });
+    if (snapTo !== null) {
+      viewportOwner.write({ owner: 'layout-correction', topPx: snapTo });
     }
-  }, [cancelPendingAutoFollowArm, exitFollowOutput, scrollerRef, shouldSuspendAutoFollow]);
+  }, [resolveFollowTargetScrollTop, scrollerRef, viewportOwner]);
 
   useEffect(() => {
-    const scroller = scrollerRef.current;
-    if (scroller) {
-      lastObservedScrollTopRef.current = scroller.scrollTop;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      if (virtualItemCount > 0) {
+        enterFollowOutput(isStreaming ? 'streaming-resumed' : 'session-open');
+      }
+      return;
     }
-  }, [scrollerRef]);
 
-  useEffect(() => {
-    const previousSessionId = previousSessionIdRef.current;
-    if (previousSessionId === activeSessionId) {
+    if (previousSessionIdRef.current !== activeSessionId) {
+      previousSessionIdRef.current = activeSessionId;
+      previousLatestTurnIdRef.current = latestTurnId;
+      previousDialogTurnCountRef.current = dialogTurnCount;
+      exitFollowOutput('session-changed');
+      retirePin();
+      // A Turn waiting to be shown belongs to the session that gained it.
+      pendingNewTurnIdRef.current = null;
+      if (virtualItemCount > 0) {
+        enterFollowOutput(isStreaming ? 'streaming-resumed' : 'session-open');
+      }
       return;
     }
 
-    previousSessionIdRef.current = activeSessionId;
-    cancelPendingAutoFollowArm();
-    explicitUserScrollIntentUntilMsRef.current = 0;
-    nativeSmoothFollowUntilMsRef.current = 0;
-    const nextFollowState = Boolean(activeSessionId && virtualItemCount === 0);
-
-    if (nextFollowState) {
-      setFollowingOutput(true);
+    /*
+     * An arrival, not a change. `latestTurnId` is the ledger's last Turn and it
+     * is the right identity — but a rollback truncates the ledger, which moves
+     * that identity *backwards* onto a Turn that has been there all along. Read
+     * as an arrival it pinned the survivor to the viewport top, which is the
+     * reader's "I undid my message and it jumped to the one before it".
+     *
+     * The ledger growing is what separates the two. Nothing else that rewrites
+     * `dialogTurns` — a history page merging in above, a window re-cut, a
+     * hydration — moves the last Turn, so requiring growth costs nothing and
+     * excludes every truncation.
+     */
+    const previousDialogTurnCount = previousDialogTurnCountRef.current;
+    previousDialogTurnCountRef.current = dialogTurnCount;
+    const isNewTurn = Boolean(
+      latestTurnId
+      && latestTurnId !== previousLatestTurnIdRef.current
+      && dialogTurnCount > previousDialogTurnCount,
+    );
+    previousLatestTurnIdRef.current = latestTurnId;
+    if (virtualItemCount === 0) {
       return;
     }
-
-    setFollowingOutput(false);
+    if (isNewTurn) {
+      enterFollowOutput('new-turn');
+      return;
+    }
+    /*
+     * The transcript changed without a new Turn, which is the moment a deferred
+     * one can become alignable — the presentation being restored to the live
+     * tail is exactly that. A retry that still cannot align it leaves the
+     * viewport alone and stays pending.
+     */
+    if (pendingNewTurnIdRef.current === latestTurnId && latestTurnId !== null) {
+      enterFollowOutput('new-turn');
+    }
   }, [
     activeSessionId,
-    cancelPendingAutoFollowArm,
+    dialogTurnCount,
+    enterFollowOutput,
+    exitFollowOutput,
+    isStreaming,
     latestTurnId,
-    setFollowingOutput,
+    retirePin,
     virtualItemCount,
   ]);
 
   useEffect(() => {
-    if (!isFollowingOutput || !isStreaming) {
-      stopContinuousFollowLoop();
+    if (!isViewportActive) {
+      stopFollowFrame();
       return;
     }
+    if (isFollowingOutput && isStreaming) {
+      scheduleFollowToLatest();
+    }
+  }, [isFollowingOutput, isStreaming, isViewportActive, scheduleFollowToLatest, stopFollowFrame]);
 
-    scheduleFollowToLatest('streaming-started');
-    startContinuousFollowLoop();
-  }, [isFollowingOutput, isStreaming, scheduleFollowToLatest, startContinuousFollowLoop, stopContinuousFollowLoop]);
+  // Settle any blank the hold rule accumulated once output stops arriving.
+  // A pinned Turn keeps its blank: that space is the mode, not a leftover.
+  useEffect(() => {
+    const wasStreaming = wasStreamingRef.current;
+    wasStreamingRef.current = isStreaming;
+    if (wasStreaming === isStreaming || isStreaming) {
+      return;
+    }
+    if (!isFollowingOutputRef.current || followStateRef.current.mode !== 'hold-tail') {
+      return;
+    }
+
+    const scroller = scrollerRef.current;
+    if (!scroller) {
+      return;
+    }
+    const contentEnd = readContentEndScrollTop(scroller);
+    if (followStateRef.current.target - contentEnd > BOTTOM_EPSILON_PX) {
+      followStateRef.current = { mode: 'hold-tail', target: contentEnd };
+      runContentEndScroll('smooth');
+    }
+  }, [isStreaming, readContentEndScrollTop, runContentEndScroll, scrollerRef]);
 
-  // Restart follow loop when the page becomes visible again
   useEffect(() => {
-    const handleVisibility = () => {
-      if (!document.hidden && isFollowingOutputRef.current && isStreamingRef.current) {
-        startContinuousFollowLoop();
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        scheduleFollowToLatest();
       }
     };
-    document.addEventListener('visibilitychange', handleVisibility);
-    return () => document.removeEventListener('visibilitychange', handleVisibility);
-  }, [startContinuousFollowLoop]);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [scheduleFollowToLatest]);
 
-  useEffect(() => {
-    return () => {
-      stopContinuousFollowLoop();
-    };
-  }, [stopContinuousFollowLoop]);
+  useEffect(() => stopFollowFrame, [stopFollowFrame]);
 
   return {
     isFollowingOutput,
     enterFollowOutput,
     exitFollowOutput,
-    preparePinnedTurnFollowHandoff,
-    armFollowOutputForNewTurn,
-    resumeFollowOutputForMountedStream,
-    activateArmedFollowOutput,
-    cancelPendingAutoFollowArm,
     scheduleFollowToLatest,
+    isFollowingOutputNow,
+    isFollowCorrectingViewport,
     handleUserScrollIntent,
+    handleTurnsRolledBack,
     handleScroll,
+    handleScrollSettled,
+    handleViewportResize,
+    getFollowTargetScrollTop,
   };
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx
new file mode 100644
index 0000000000..52770ff04f
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx
@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+/*
+ * The two properties this file exists for, both measured from a usage-report
+ * click before they held:
+ *
+ * - the aim goes through the register, not `element.scrollIntoView`;
+ * - it is attempted in the same task as the Turn navigation, so the reader is
+ *   not shown the Turn placement and then moved off it. Measured: the Turn
+ *   navigation settled 178px and 334.7px from where it put itself, because
+ *   this aim arrived three frames later and the intermediate frame was painted.
+ */
+
+const mocks = vi.hoisted(() => ({
+  resolveFlowChatFocusTarget: vi.fn(),
+  switchChatSession: vi.fn(),
+  activeSessionId: 'session-1' as string | undefined,
+}));
+
+vi.mock('../../services/FlowChatManager', () => ({
+  flowChatManager: { switchChatSession: mocks.switchChatSession },
+}));
+vi.mock('../../store/FlowChatStore', () => ({
+  flowChatStore: { getState: () => ({ sessions: new Map() }) },
+}));
+vi.mock('../../store/modernFlowChatStore', () => ({
+  useModernFlowChatStore: {
+    getState: () => ({ activeSession: { sessionId: mocks.activeSessionId } }),
+  },
+}));
+vi.mock('./flowChatFocusTarget', () => ({
+  resolveFlowChatFocusTarget: mocks.resolveFlowChatFocusTarget,
+}));
+
+const { globalEventBus } = await import('@/infrastructure/event-bus');
+const { FLOWCHAT_FOCUS_ITEM_EVENT } = await import('../../events/flowchatNavigation');
+const { useFlowChatNavigation } = await import('./useFlowChatNavigation');
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom ships no CSS.escape. The ids here need no escaping; this only has to
+// exist so the selector can be built.
+if (typeof globalThis.CSS === 'undefined') {
+  (globalThis as { CSS?: unknown }).CSS = {};
+}
+if (typeof CSS.escape !== 'function') {
+  CSS.escape = (value: string) => value.replace(/["\\]/g, '\\$&');
+}
+
+const FOCUS_ITEM_ID = 'call_00_zknuBLUKP7Y6JTioDI5Z8386';
+
+function Harness({ listRef }: { listRef: React.RefObject<any> }) {
+  useFlowChatNavigation({
+    activeSessionId: 'session-1',
+    virtualItems: [],
+    virtualListRef: listRef,
+  });
+  return null;
+}
+
+describe('useFlowChatNavigation focus placement', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let frames: FrameRequestCallback[];
+  let listRef: React.RefObject<any>;
+  let focusFlowItem: ReturnType<typeof vi.fn>;
+  let scrollIntoView: ReturnType<typeof vi.fn>;
+
+  function renderItem() {
+    const element = document.createElement('div');
+    element.dataset.flowItemId = FOCUS_ITEM_ID;
+    element.scrollIntoView = scrollIntoView as unknown as HTMLElement['scrollIntoView'];
+    document.body.append(element);
+    return element;
+  }
+
+  async function dispatchFocusRequest() {
+    await act(async () => {
+      globalEventBus.emit(FLOWCHAT_FOCUS_ITEM_EVENT, {
+        sessionId: 'session-1',
+        itemId: FOCUS_ITEM_ID,
+      });
+      // Let the handler's own awaits resolve, without granting it a frame.
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+  }
+
+  beforeEach(() => {
+    mocks.activeSessionId = 'session-1';
+    mocks.resolveFlowChatFocusTarget.mockReturnValue({ preferTurnNavigation: false });
+    scrollIntoView = vi.fn();
+    focusFlowItem = vi.fn(() => true);
+    listRef = { current: { focusFlowItem, navigateToTurn: vi.fn(), scrollToIndex: vi.fn(), scrollToTurn: vi.fn() } };
+    frames = [];
+    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
+      frames.push(callback);
+      return frames.length;
+    }));
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    act(() => root.render(<Harness listRef={listRef} />));
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.replaceChildren();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it('aims through the register rather than the element', async () => {
+    renderItem();
+    await dispatchFocusRequest();
+
+    expect(focusFlowItem).toHaveBeenCalledWith(FOCUS_ITEM_ID);
+    expect(scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it('aims without first yielding a frame to the Turn placement', async () => {
+    renderItem();
+    await dispatchFocusRequest();
+
+    // Nothing has been given a frame yet: every queued callback is still queued.
+    expect(frames).toHaveLength(0);
+    expect(focusFlowItem).toHaveBeenCalledTimes(1);
+  });
+
+  it('asks again on the next frame while the item is still unrendered', async () => {
+    await dispatchFocusRequest();
+    expect(focusFlowItem).not.toHaveBeenCalled();
+    expect(frames).toHaveLength(1);
+
+    renderItem();
+    await act(async () => { frames.shift()?.(16); });
+
+    expect(focusFlowItem).toHaveBeenCalledWith(FOCUS_ITEM_ID);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.test.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.test.ts
index 2827475dd9..f27a7f7a6f 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.test.ts
@@ -1,313 +1,17 @@
-// @vitest-environment jsdom
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
 
-import React, { act, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { describe, expect, it, vi } from 'vitest';
-import { globalEventBus } from '@/infrastructure/event-bus';
-import type { FlowToolItem, ModelRound, Session } from '../../types/flow-chat';
-import { useModernFlowChatStore, type VirtualItem } from '../../store/modernFlowChatStore';
-import {
-  FLOWCHAT_FOCUS_ITEM_EVENT,
-  FLOWCHAT_PIN_TURN_TO_TOP_EVENT,
-  type FlowChatFocusItemRequest,
-  type FlowChatPinTurnToTopRequest,
-} from '../../events/flowchatNavigation';
-import { resolveFlowChatFocusTarget } from './flowChatFocusTarget';
-import { useFlowChatNavigation } from './useFlowChatNavigation';
-import type { VirtualMessageListRef } from './VirtualMessageList';
+const source = fs.readFileSync(path.resolve(__dirname, 'useFlowChatNavigation.ts'), 'utf8');
 
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-
-function makeReadTool(id: string): FlowToolItem {
-  return {
-    id,
-    type: 'tool',
-    toolName: 'Read',
-    timestamp: 1000,
-    status: 'completed',
-    toolCall: {
-      id,
-      input: { file_path: 'src/main.rs' },
-    },
-    toolResult: {
-      result: 'file contents',
-      success: true,
-    },
-  };
-}
-
-function makeRound(items: FlowToolItem[]): ModelRound {
-  return {
-    id: 'round-1',
-    index: 0,
-    items,
-    isStreaming: false,
-    isComplete: true,
-    status: 'completed',
-    startTime: 1000,
-  };
-}
-
-function makeSession(round: ModelRound): Session {
-  return {
-    sessionId: 'session-1',
-    dialogTurns: [{
-      id: 'turn-1',
-      sessionId: 'session-1',
-      userMessage: {
-        id: 'user-1',
-        content: 'Inspect the file',
-        timestamp: 900,
-      },
-      modelRounds: [round],
-      status: 'completed',
-      startTime: 900,
-    }],
-    status: 'idle',
-    config: {},
-    createdAt: 800,
-    lastActiveAt: 1000,
-    error: null,
-    sessionKind: 'flow_chat',
-  };
-}
-
-describe('useFlowChatNavigation focus resolution', () => {
-  it('requests explore group expansion before focusing a grouped tool item', () => {
-    const tool = makeReadTool('tool-1');
-    const round = makeRound([tool]);
-    const session = makeSession(round);
-    const virtualItems: VirtualItem[] = [
-      {
-        type: 'user-message',
-        data: session.dialogTurns[0].userMessage,
-        turnId: 'turn-1',
-      },
-      {
-        type: 'explore-group',
-        turnId: 'turn-1',
-        data: {
-          groupId: 'round-1',
-          rounds: [round],
-          allItems: [tool],
-          stats: {
-            readCount: 1,
-            searchCount: 0,
-            commandCount: 0,
-          },
-          isGroupStreaming: false,
-          isLastGroupInTurn: true,
-        },
-      },
-    ];
-
-    const target = resolveFlowChatFocusTarget({
-      sessionId: session.sessionId,
-      turnIndex: 1,
-      itemId: tool.id,
-      source: 'usage-report',
-    }, virtualItems, session);
-
-    expect(target).toMatchObject({
-      resolvedVirtualIndex: 1,
-      resolvedTurnId: 'turn-1',
-      resolvedTurnIndex: 1,
-      expandExploreGroupId: 'round-1',
-      focusItemId: tool.id,
-      preferPinnedTurnNavigation: false,
-    });
-  });
-
-  it('resolves absolute Turn indexes through the catalog instead of the partial tail array', () => {
-    const session: Session = {
-      ...makeSession(makeRound([])),
-      dialogTurns: [98, 99, 100].map(turnIndex => ({
-        id: `turn-${turnIndex}`,
-        sessionId: 'session-1',
-        backendTurnIndex: turnIndex - 1,
-        userMessage: {
-          id: `user-${turnIndex}`,
-          content: `Prompt ${turnIndex}`,
-          timestamp: 1000,
-        },
-        modelRounds: [],
-        status: 'completed' as const,
-        startTime: 1000,
-      })),
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 100,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-1',
-        revision: 'catalog-1',
-        totalTurnCount: 100,
-        complete: true,
-        entries: Array.from({ length: 100 }, (_, ordinal) => ({
-          ordinal,
-          storageTurnIndex: ordinal,
-          turnId: `turn-${ordinal + 1}`,
-          preview: `Prompt ${ordinal + 1}`,
-          previewTruncated: false,
-        })),
-      },
-    };
-
-    expect(resolveFlowChatFocusTarget({
-      sessionId: session.sessionId,
-      turnIndex: 2,
-      source: 'usage-report',
-    }, [], session)).toMatchObject({
-      resolvedTurnId: 'turn-2',
-      resolvedTurnIndex: 2,
-    });
-    expect(resolveFlowChatFocusTarget({
-      sessionId: session.sessionId,
-      turnIndex: 99,
-      source: 'usage-report',
-    }, [], session)).toMatchObject({
-      resolvedTurnId: 'turn-99',
-      resolvedTurnIndex: 99,
-    });
-  });
-
-  it('treats an explicit stable Turn id as authoritative', () => {
-    const session = makeSession(makeRound([]));
-    const target = resolveFlowChatFocusTarget({
-      sessionId: session.sessionId,
-      turnId: 'persisted-parent-turn',
-      turnIndex: 1,
-      source: 'btw-back',
-    }, [], session);
-
-    expect(target).toMatchObject({
-      resolvedTurnId: 'persisted-parent-turn',
-      resolvedTurnIndex: 1,
-      preferPinnedTurnNavigation: true,
-    });
+describe('useFlowChatNavigation natural navigation contract', () => {
+  it('uses natural Turn navigation for resolved focus targets', () => {
+    expect(source).toContain('list.navigateToTurn(target.resolvedTurnId');
+    expect(source).not.toContain('pinTurnToTop');
   });
-});
-
-describe('useFlowChatNavigation Turn pin handling', () => {
-  it('does not reuse an absolute Turn index as a local index after delegated navigation fails', async () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    const scrollToTurn = vi.fn();
-    const onNavigateToFocusTurn = vi.fn(async () => false);
-    const partialSession: Session = {
-      ...makeSession(makeRound([])),
-      dialogTurns: [98, 99, 100].map(turnIndex => ({
-        id: `turn-${turnIndex}`,
-        sessionId: 'session-1',
-        backendTurnIndex: turnIndex - 1,
-        userMessage: {
-          id: `user-${turnIndex}`,
-          content: `Prompt ${turnIndex}`,
-          timestamp: 1000,
-        },
-        modelRounds: [],
-        status: 'completed' as const,
-        startTime: 1000,
-      })),
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 100,
-    };
-    useModernFlowChatStore.getState().setActiveSession(partialSession);
-
-    function Harness() {
-      const virtualListRef = useRef<VirtualMessageListRef | null>({
-        scrollToTurn,
-      } as unknown as VirtualMessageListRef);
-      useFlowChatNavigation({
-        activeSessionId: partialSession.sessionId,
-        virtualItems: useModernFlowChatStore.getState().virtualItems,
-        virtualListRef,
-        onNavigateToFocusTurn,
-      });
-      return null;
-    }
-
-    await act(async () => {
-      root.render(React.createElement(Harness));
-    });
-    const request: FlowChatFocusItemRequest = {
-      sessionId: partialSession.sessionId,
-      turnIndex: 2,
-      source: 'usage-report',
-    };
-    await act(async () => {
-      globalEventBus.emit(FLOWCHAT_FOCUS_ITEM_EVENT, request, 'test');
-      await new Promise(resolve => window.setTimeout(resolve, 0));
-    });
-
-    expect(onNavigateToFocusTurn).toHaveBeenCalledWith(request);
-    expect(scrollToTurn).not.toHaveBeenCalled();
-
-    await act(async () => {
-      root.unmount();
-    });
-    useModernFlowChatStore.getState().clear();
-    container.remove();
-  });
-
-  it('runs the pre-pin callback before pinning a newly submitted Turn', async () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    const onBeforeTurnPinRequest = vi.fn();
-    const pinTurnToTop = vi.fn(() => true);
-    const virtualItems: VirtualItem[] = [{
-      type: 'user-message',
-      turnId: 'turn-2',
-      data: {
-        id: 'user-2',
-        content: 'New prompt',
-        timestamp: 1000,
-      },
-    }];
-
-    function Harness() {
-      const virtualListRef = useRef<VirtualMessageListRef | null>({
-        pinTurnToTop,
-      } as unknown as VirtualMessageListRef);
-      useFlowChatNavigation({
-        activeSessionId: 'session-1',
-        virtualItems,
-        virtualListRef,
-        onBeforeTurnPinRequest,
-      });
-      return null;
-    }
-
-    await act(async () => {
-      root.render(React.createElement(Harness));
-    });
-    const request: FlowChatPinTurnToTopRequest = {
-      sessionId: 'session-1',
-      turnId: 'turn-2',
-      behavior: 'auto',
-      source: 'send-message',
-      pinMode: 'sticky-latest',
-    };
-    await act(async () => {
-      globalEventBus.emit(FLOWCHAT_PIN_TURN_TO_TOP_EVENT, request, 'test');
-      await Promise.resolve();
-    });
-
-    expect(onBeforeTurnPinRequest).toHaveBeenCalledWith(request);
-    expect(pinTurnToTop).toHaveBeenCalledWith('turn-2', {
-      behavior: 'auto',
-      pinMode: 'sticky-latest',
-    });
-    expect(onBeforeTurnPinRequest.mock.invocationCallOrder[0]).toBeLessThan(
-      pinTurnToTop.mock.invocationCallOrder[0],
-    );
 
-    await act(async () => {
-      root.unmount();
-    });
-    container.remove();
+  it('does not subscribe to a send-message positioning event', () => {
+    expect(source).not.toContain('sticky-latest');
+    expect(source).not.toContain('PIN_TURN_TO_TOP');
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.ts
index 69f457ba74..c5ebeac772 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.ts
@@ -1,11 +1,10 @@
 /**
  * FlowChat navigation side effects.
  *
- * Handles cross-session focus requests and turn pinning events for the modern
- * virtualized list.
+ * Handles cross-session focus requests for the modern virtualized list.
  */
 
-import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+import { useEffect, useLayoutEffect, useRef, type RefObject } from 'react';
 import { globalEventBus } from '@/infrastructure/event-bus';
 import { createLogger } from '@/shared/utils/logger';
 import { flowChatStore } from '../../store/FlowChatStore';
@@ -13,9 +12,7 @@ import { useModernFlowChatStore, type VirtualItem } from '../../store/modernFlow
 import { flowChatManager } from '../../services/FlowChatManager';
 import {
   FLOWCHAT_FOCUS_ITEM_EVENT,
-  FLOWCHAT_PIN_TURN_TO_TOP_EVENT,
   type FlowChatFocusItemRequest,
-  type FlowChatPinTurnToTopRequest,
 } from '../../events/flowchatNavigation';
 import type { VirtualMessageListRef } from './VirtualMessageList';
 import { resolveFlowChatFocusTarget, type ResolvedFocusTarget } from './flowChatFocusTarget';
@@ -27,7 +24,6 @@ interface UseFlowChatNavigationOptions {
   virtualItems: VirtualItem[];
   virtualListRef: RefObject<VirtualMessageListRef | null>;
   onExpandExploreGroup?: (groupId: string) => void;
-  onBeforeTurnPinRequest?: (request: FlowChatPinTurnToTopRequest) => void;
   onNavigateToFocusTurn?: (request: FlowChatFocusItemRequest) => Promise<boolean> | boolean;
 }
 
@@ -40,14 +36,6 @@ async function waitForCondition(predicate: () => boolean, timeoutMs: number): Pr
   return predicate();
 }
 
-async function waitForAnimationFrames(frameCount: number): Promise<void> {
-  let remaining = Math.max(0, frameCount);
-  while (remaining > 0) {
-    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
-    remaining -= 1;
-  }
-}
-
 function navigateToResolvedTarget(
   virtualListRef: RefObject<VirtualMessageListRef | null>,
   target: ResolvedFocusTarget,
@@ -56,8 +44,8 @@ function navigateToResolvedTarget(
   const list = virtualListRef.current;
   if (!list) return;
 
-  if (target.preferPinnedTurnNavigation && target.resolvedTurnId) {
-    list.pinTurnToTop(target.resolvedTurnId, { behavior: 'auto' });
+  if (target.preferTurnNavigation && target.resolvedTurnId) {
+    list.navigateToTurn(target.resolvedTurnId, { behavior: 'auto' });
     return;
   }
 
@@ -76,10 +64,8 @@ export function useFlowChatNavigation({
   virtualItems,
   virtualListRef,
   onExpandExploreGroup,
-  onBeforeTurnPinRequest,
   onNavigateToFocusTurn,
 }: UseFlowChatNavigationOptions): void {
-  const [pendingTurnPinRequest, setPendingTurnPinRequest] = useState<FlowChatPinTurnToTopRequest | null>(null);
   const virtualItemsRef = useRef(virtualItems);
   const onExpandExploreGroupRef = useRef(onExpandExploreGroup);
   const onNavigateToFocusTurnRef = useRef(onNavigateToFocusTurn);
@@ -90,35 +76,6 @@ export function useFlowChatNavigation({
     onNavigateToFocusTurnRef.current = onNavigateToFocusTurn;
   }, [onExpandExploreGroup, onNavigateToFocusTurn, virtualItems]);
 
-  useEffect(() => {
-    const unsubscribe = globalEventBus.on<FlowChatPinTurnToTopRequest>(FLOWCHAT_PIN_TURN_TO_TOP_EVENT, (request) => {
-      if (!request || request.sessionId !== activeSessionId) {
-        return;
-      }
-
-      onBeforeTurnPinRequest?.(request);
-      setPendingTurnPinRequest(request);
-    });
-
-    return unsubscribe;
-  }, [activeSessionId, onBeforeTurnPinRequest]);
-
-  useEffect(() => {
-    if (!pendingTurnPinRequest) return;
-    if (pendingTurnPinRequest.sessionId !== activeSessionId) {
-      setPendingTurnPinRequest(null);
-      return;
-    }
-
-    const accepted = virtualListRef.current?.pinTurnToTop(pendingTurnPinRequest.turnId, {
-      behavior: pendingTurnPinRequest.behavior ?? 'auto',
-      pinMode: pendingTurnPinRequest.pinMode,
-    }) ?? false;
-    if (accepted) {
-      setPendingTurnPinRequest(null);
-    }
-  }, [activeSessionId, pendingTurnPinRequest, virtualItems, virtualListRef]);
-
   useEffect(() => {
     const unsubscribe = globalEventBus.on<FlowChatFocusItemRequest>(FLOWCHAT_FOCUS_ITEM_EVENT, async (request) => {
       const { sessionId, itemId } = request;
@@ -183,8 +140,6 @@ export function useFlowChatNavigation({
 
       if (!itemId) return;
 
-      await waitForAnimationFrames(2);
-
       const maxAttempts = 120;
       let attempts = 0;
       let expandedExploreGroupId: string | null = null;
@@ -204,11 +159,11 @@ export function useFlowChatNavigation({
         }
         const focusItemId = currentTarget.focusItemId ?? itemId;
         const element = document.querySelector(`[data-flow-item-id="${CSS.escape(focusItemId)}"]`) as HTMLElement | null;
-        if (!element) {
+        if (!element || !virtualListRef.current?.focusFlowItem(focusItemId)) {
           if (
             attempts % 12 === 0
             && !delegatedTurnNavigationAttempted
-            && !currentTarget.preferPinnedTurnNavigation
+            && !currentTarget.preferTurnNavigation
           ) {
             navigateToResolvedTarget(virtualListRef, currentTarget);
           }
@@ -218,12 +173,24 @@ export function useFlowChatNavigation({
           return;
         }
 
-        element.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'auto' });
         element.classList.add('flowchat-flow-item--focused');
         window.setTimeout(() => element.classList.remove('flowchat-flow-item--focused'), 1600);
       };
 
-      requestAnimationFrame(tryFocus);
+      /*
+       * Tried in this task before yielding a frame, because the Turn navigation
+       * above has already placed the viewport and every frame between the two
+       * placements is one the reader watches the transcript land and jump
+       * again. Measured from two usage-report clicks: the Turn navigation
+       * settled 178px and 334.7px away from where it put itself, because this
+       * aim arrived 41ms — three frames — later, and the intermediate position
+       * was painted (`nextFramePx` equalled it both times).
+       *
+       * When the item is not rendered yet the retry loop below is unchanged,
+       * and the Turn placement is what the reader looks at until it is. That
+       * part is unavoidable: something has to be on screen while we wait.
+       */
+      tryFocus();
     });
 
     return unsubscribe;
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.test.tsx
new file mode 100644
index 0000000000..db5fe3f7f6
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.test.tsx
@@ -0,0 +1,640 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  ANCHOR_MISSING_TURN_ATTEMPTS,
+  ANCHOR_SETTLE_FRAMES,
+  USER_DRIVEN_SCROLL_WINDOW_MS,
+} from './flowChatViewportAnchor';
+import {
+  useFlowChatViewportAnchor,
+  type FlowChatViewportAnchorApi,
+} from './useFlowChatViewportAnchor';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+/*
+ * The one trace here that is asserted on rather than merely tolerated. The rest
+ * of the trail is coalesced and reports whatever the last of a series happened
+ * to hold; this one fires once per wait and its numbers are the whole point of
+ * it, so it is worth pinning that it fires exactly once and says the truth.
+ */
+const mocks = vi.hoisted(() => ({ traceViewport: vi.fn() }));
+vi.mock('@/infrastructure/diagnostics/flowChatViewportDiagnostics', async () => {
+  const actual = await vi.importActual<
+    typeof import('@/infrastructure/diagnostics/flowChatViewportDiagnostics')
+  >('@/infrastructure/diagnostics/flowChatViewportDiagnostics');
+  return { ...actual, traceViewport: mocks.traceViewport };
+});
+
+const VIEWPORT_HEIGHT = 500;
+const TURN_HEIGHT = 40;
+
+function rect(top: number, height: number): DOMRect {
+  return {
+    top,
+    bottom: top + height,
+    height,
+    left: 0,
+    right: 800,
+    width: 800,
+    x: 0,
+    y: top,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
+interface HarnessProps {
+  scroller: HTMLElement;
+  isViewportOwnedElsewhere: () => boolean;
+  onApi: (api: FlowChatViewportAnchorApi) => void;
+}
+
+function Harness({ scroller, isViewportOwnedElsewhere, onApi }: HarnessProps) {
+  const scrollerRef = React.useRef<HTMLElement | null>(scroller);
+  // The anchor no longer touches the scroller itself; the register does, and
+  // here that is the plain displacement it used to apply.
+  const shiftViewport = React.useCallback((byPx: number) => {
+    scroller.scrollTop += byPx;
+  }, []);
+  onApi(useFlowChatViewportAnchor({ scrollerRef, isViewportOwnedElsewhere, shiftViewport }));
+  return null;
+}
+
+describe('useFlowChatViewportAnchor', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let isMounted: boolean;
+  let scroller: HTMLDivElement;
+  let api: FlowChatViewportAnchorApi;
+  let frames: FrameRequestCallback[];
+  let now: number;
+  let isOwnedElsewhere: boolean;
+
+  /**
+   * Place Turns in the transcript's own coordinate space.
+   *
+   * Rects are read back relative to the viewport, so writing `scrollTop` moves
+   * them exactly as a real scroller would — which is what makes a correction
+   * observable, and a second correction a no-op.
+   */
+  function layoutTurns(turnTops: Record<string, number>) {
+    scroller.replaceChildren();
+    for (const [turnId, contentTop] of Object.entries(turnTops)) {
+      const element = document.createElement('div');
+      element.className = 'virtual-item-wrapper';
+      element.dataset.itemType = 'user-message';
+      element.dataset.turnId = turnId;
+      element.getBoundingClientRect = () => rect(contentTop - scroller.scrollTop, TURN_HEIGHT);
+      scroller.append(element);
+    }
+  }
+
+  function runFrame() {
+    const frame = frames.shift();
+    expect(frame).toBeDefined();
+    act(() => frame?.(16));
+  }
+
+  function unmount() {
+    if (!isMounted) return;
+    isMounted = false;
+    act(() => root.unmount());
+  }
+
+  beforeEach(() => {
+    mocks.traceViewport.mockReset();
+    container = document.createElement('div');
+    scroller = document.createElement('div');
+    document.body.append(container, scroller);
+    scroller.getBoundingClientRect = () => rect(0, VIEWPORT_HEIGHT);
+    // jsdom leaves this at 0, and the anchor uses it to tell a marker on screen
+    // from one past the bottom edge.
+    Object.defineProperty(scroller, 'clientHeight', {
+      configurable: true,
+      value: VIEWPORT_HEIGHT,
+    });
+    Object.defineProperty(scroller, 'scrollTop', { configurable: true, writable: true, value: 0 });
+    frames = [];
+    now = 10_000;
+    isOwnedElsewhere = false;
+    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
+      frames.push(callback);
+      return frames.length;
+    }));
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+
+    root = createRoot(container);
+    isMounted = true;
+    act(() => root.render(
+      <Harness
+        scroller={scroller}
+        isViewportOwnedElsewhere={() => isOwnedElsewhere}
+        onApi={next => { api = next; }}
+      />,
+    ));
+  });
+
+  afterEach(() => {
+    unmount();
+    container.remove();
+    scroller.remove();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('puts the anchored Turn back where the reader left it', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980, 'turn-4': 1440 });
+    api.captureAnchor();
+
+    // A late measurement above the viewport pushes everything down 880px.
+    layoutTurns({ 'turn-3': 1860, 'turn-4': 2320 });
+
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1880);
+  });
+
+  it('is idempotent, because it restores a relationship and not a delta', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+    layoutTurns({ 'turn-3': 1860 });
+
+    api.restoreAnchor();
+    const settled = scroller.scrollTop;
+    api.restoreAnchor();
+    api.restoreAnchor();
+
+    expect(scroller.scrollTop).toBe(settled);
+  });
+
+  it('reports that it could not answer when there is no anchor', () => {
+    layoutTurns({ 'turn-3': 100 });
+    // Nothing captured yet: the caller has to fall back on something coarser.
+    expect(api.restoreAnchor()).toBe(false);
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it('stays out of the way while another writer owns the viewport', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+    layoutTurns({ 'turn-3': 1860 });
+
+    isOwnedElsewhere = true;
+
+    expect(api.restoreAnchor()).toBe(false);
+    expect(scroller.scrollTop).toBe(1000);
+  });
+
+  it('keeps an anchor whose Turn is merely not rendered yet', () => {
+    /*
+     * One frame of absence is the normal case at a history junction: the
+     * virtualizer windows from a scroll offset it learns from scroll events, so
+     * the commit that prepends is still rendering the position the reader has
+     * just been moved off. Dropping there loses the reading position one frame
+     * before it could be used.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    layoutTurns({ 'turn-9': 980 });
+    expect(api.restoreAnchor()).toBe(false);
+    expect(scroller.scrollTop).toBe(1000);
+
+    // The Turn arrives, and the anchor is still the one the reader had.
+    layoutTurns({ 'turn-3': 1200, 'turn-9': 980 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1220);
+  });
+
+  it('drops an anchor whose Turn has stayed out of the rendered window', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    layoutTurns({ 'turn-9': 980 });
+    for (let attempt = 0; attempt < ANCHOR_MISSING_TURN_ATTEMPTS; attempt += 1) {
+      expect(api.restoreAnchor()).toBe(false);
+    }
+    expect(scroller.scrollTop).toBe(1000);
+
+    // Dropped rather than kept: the next scroll anchors to a Turn that is
+    // actually on screen, without waiting for an intent event to allow it.
+    layoutTurns({ 'turn-9': 1200 });
+    api.captureAnchorForScroll();
+    layoutTurns({ 'turn-9': 1700 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1500);
+  });
+
+  it('carries the anchor through a scroll while its Turn is still unrendered', () => {
+    /*
+     * The junction case, measured. The anchor was owed 104px, then 140px, then
+     * an amount never established; at each one a scroll 77ms later replaced it
+     * with a Turn at its displaced position, and two of the three were never
+     * corrected at all. The reader is always scrolling here — paging up is what
+     * they are doing — so refusing the scroll outright is not an option either.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980, 'turn-9': 3000 });
+    api.captureAnchor();
+
+    // History arrives: the transcript has moved 140px further down than it was
+    // compensated for, and the reader's own Turn is out of the rendered window,
+    // so the displacement cannot be measured yet.
+    layoutTurns({ 'turn-9': 3140 });
+    expect(api.restoreAnchor()).toBe(false);
+
+    // They keep scrolling up 200px while that repair is still owed. Re-reading
+    // the anchor here takes whatever *is* rendered, at its already-displaced
+    // position, and the 140px is gone for good.
+    scroller.scrollTop = 800;
+    api.markUserScrollIntent();
+    api.captureAnchorForScroll();
+
+    // Their Turn comes back, still 140px low. Nothing else has moved since, so
+    // the whole correction is that 140 — and none of the 200 they scrolled.
+    layoutTurns({ 'turn-3': 1120, 'turn-9': 3140 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(940);
+  });
+
+  it('reports what a wait for the anchored Turn cost, once, when it ends', async () => {
+    /*
+     * The wait is what decides whether a junction is seen: a correction that
+     * shares the prepend's frame costs nothing, and one a frame later is a
+     * visible jump. `attempts` cannot answer how long a wait ran — its trace is
+     * coalesced, so only the first of a series is ever emitted — so the whole
+     * of it is reported at the one moment it exists.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    layoutTurns({ 'turn-9': 980 });
+    api.openSettleWindow();
+    runFrame();
+    runFrame();
+    now += 48;
+
+    layoutTurns({ 'turn-3': 1100, 'turn-9': 980 });
+    runFrame();
+
+    const waits = mocks.traceViewport.mock.calls
+      .map(([probe]) => probe)
+      .filter(probe => probe.location === 'anchor.turnReturned');
+    expect(waits).toHaveLength(1);
+    expect(waits[0].data()).toMatchObject({
+      turnId: 'turn-3',
+      outcome: 'returned',
+      waitedForMs: 48,
+      // Two settle frames ran and still did not find it; the third did.
+      waitedFrames: 2,
+    });
+
+    // Ended, not merely reported: a second answered frame says nothing more.
+    runFrame();
+    expect(mocks.traceViewport.mock.calls
+      .filter(([probe]) => probe.location === 'anchor.turnReturned')).toHaveLength(1);
+  });
+
+  it('re-anchors on a scroll the user drove, and not on one they did not', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980, 'turn-4': 2500 });
+    api.captureAnchor();
+
+    // The transcript moved under the reader, with no gesture behind it.
+    layoutTurns({ 'turn-3': 1860, 'turn-4': 3380 });
+    now += 5_000;
+    api.captureAnchorForScroll();
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1880);
+
+    // The reader scrolls on: the position they arrived at is the new anchor,
+    // and turn-4 is what they are now looking at.
+    scroller.scrollTop = 3400;
+    api.markUserScrollIntent();
+    now += USER_DRIVEN_SCROLL_WINDOW_MS - 1;
+    api.captureAnchorForScroll();
+
+    layoutTurns({ 'turn-3': 2360, 'turn-4': 3880 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(3900);
+  });
+
+  it('credits a scroll to the reader when its event arrives after the window', () => {
+    /*
+     * The window is measured from the *input* event and the scrolling it
+     * authorises outlives it: a wheel notch smooth-scrolls for longer than the
+     * window, and a busy main thread delivers the scroll event carrying the
+     * whole travel after it has closed. Measured over 181 seconds: fourteen
+     * gestures, one capture, and seven corrections between 308px and 618px that
+     * each returned the viewport to exactly where its gesture had started.
+     *
+     * Nobody else can account for it — no owner holds the viewport — so it is
+     * theirs, and the anchor goes with them rather than undoing them.
+     */
+    scroller.scrollTop = 1450;
+    layoutTurns({ 'turn-3': 1500 });
+    api.captureAnchor();
+
+    api.markUserScrollIntent();
+    now += USER_DRIVEN_SCROLL_WINDOW_MS * 2;
+    scroller.scrollTop = 834;
+    api.captureAnchorForScroll();
+
+    // In place, not corrected: their 616px is where they asked to be.
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(834);
+  });
+
+  it('leaves a registered writer where it put the viewport, and still repairs', () => {
+    /*
+     * The other thing that changes `scrollTop`, and it is not drift either: a
+     * writer that owns the viewport chose that position, which is the whole
+     * point of the register. So its travel is taken out of the correction the
+     * same way the reader's is, and what is left is the displacement — here the
+     * 100px the transcript really moved while `scrollTop` stood still.
+     */
+    scroller.scrollTop = 1450;
+    layoutTurns({ 'turn-3': 1500 });
+    api.captureAnchor();
+
+    isOwnedElsewhere = true;
+    now += USER_DRIVEN_SCROLL_WINDOW_MS * 2;
+    scroller.scrollTop = 834;
+    api.captureAnchorForScroll();
+    isOwnedElsewhere = false;
+
+    layoutTurns({ 'turn-3': 1400 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(734);
+  });
+
+  it('does not undo a scroll the settle loop beat the scroll event to', () => {
+    /*
+     * The measured shape, and the one that survived two rounds of fixes. The
+     * settle loop reads `scrollTop` from the DOM, a commit opens a window on
+     * almost every frame, and the scroll event carrying the reader's travel is
+     * delivered after all of that — so a correction runs against a reading
+     * position agreed hundreds of pixels ago, with no capture in between.
+     *
+     * Measured: an anchor agreed at scrollTop 144.7 corrected by -515.8px with
+     * the reader at 652.7, of which 7.8px was the transcript actually moving.
+     */
+    scroller.scrollTop = 144.7;
+    layoutTurns({ 'turn-3': 303.5 });
+    api.captureAnchor();
+
+    // They scroll 508px and no scroll event has been delivered yet, so nothing
+    // re-anchors. Meanwhile the transcript moves 7.8px up underneath them.
+    scroller.scrollTop = 652.7;
+    layoutTurns({ 'turn-3': 295.7 });
+
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBeCloseTo(644.9, 6);
+  });
+
+  it('does not bank a frame with nothing to correct as a debt against the reader', () => {
+    /*
+     * The offset and the viewport position it was agreed at are two halves of
+     * one fact, and a frame that advances only one of them leaves the anchor
+     * claiming a repair it does not have. It is reached constantly: a frame in
+     * which only the reader moved has a correction of exactly zero, so this is
+     * the ordinary outcome of a settle rather than a rarity.
+     *
+     * Measured over one reproduction: a 32px scroll and an 81px scroll, each
+     * reported back a frame later as a correction of exactly itself, with the
+     * anchored Turn provably not having moved.
+     */
+    scroller.scrollTop = 414.7;
+    layoutTurns({ 'turn-3': 603.9 });
+    api.captureAnchor();
+
+    // They scroll 32px. Nothing else moved, so there is nothing to correct.
+    scroller.scrollTop = 446.7;
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBeCloseTo(446.7, 6);
+
+    // And still nothing on the frame after it.
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBeCloseTo(446.7, 6);
+  });
+
+  it('does not re-owe a correction it has just made', () => {
+    /*
+     * The same two halves, on the other branch. The shift puts the Turn back at
+     * the stored offset, so the position advances by the correction and the
+     * offset stays. Get that pair wrong and the repair is read as movement on
+     * the frame after it and undone — which only shows up when the reader has
+     * travelled since the anchor was agreed, so it is the case a repair made
+     * while they are scrolling always falls into.
+     */
+    scroller.scrollTop = 1_000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    // They scroll 100px with no scroll event delivered to re-anchor them, and
+    // the transcript moves 40px down underneath them in the same frame.
+    scroller.scrollTop = 1_100;
+    layoutTurns({ 'turn-3': 1_020 });
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1_140);
+
+    // Their 100px is theirs and the repair is not movement to undo.
+    expect(api.restoreAnchor()).toBe(true);
+    expect(scroller.scrollTop).toBe(1_140);
+  });
+
+  it('takes a new reading position from where a navigation landed', () => {
+    /*
+     * A navigation is not a displacement, and standing down for it only
+     * postpones the correction. Measured over four clicks on one Turn: the aim
+     * placed the viewport at 287px each time, and each time the anchor put it
+     * back 1653px away on the first frame after the hold lapsed, still anchored
+     * to the Turn the reader had jumped away from.
+     */
+    scroller.scrollTop = 1894;
+    layoutTurns({ 'turn-9': 2295 });
+    api.captureAnchor();
+
+    api.reanchorAfterNavigation();
+    // Nothing to restore in between, which is the point: the position being
+    // left has stopped being the one to put back.
+    expect(api.restoreAnchor()).toBe(false);
+    expect(scroller.scrollTop).toBe(1894);
+
+    // The aim lands, and the commit that renders it opens a settle window.
+    scroller.scrollTop = 287;
+    layoutTurns({ 'turn-1': 300, 'turn-9': 2295 });
+    api.openSettleWindow();
+
+    // A late measurement moves the transcript under the Turn they navigated to,
+    // and the correction is that displacement — not the jump.
+    layoutTurns({ 'turn-1': 400, 'turn-9': 2395 });
+    runFrame();
+    expect(scroller.scrollTop).toBe(387);
+  });
+
+  it('re-asserts the anchor across the frames a settle takes', () => {
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    api.openSettleWindow();
+    // Nothing has moved yet on the first frame — the heights land later.
+    runFrame();
+    expect(scroller.scrollTop).toBe(1000);
+
+    layoutTurns({ 'turn-3': 1860 });
+    runFrame();
+    expect(scroller.scrollTop).toBe(1880);
+
+    // And again, for a second batch of measurements in the same settle.
+    layoutTurns({ 'turn-3': 2500 });
+    runFrame();
+    expect(scroller.scrollTop).toBe(2520);
+  });
+
+  it('corrects in the caller\'s own frame, so the displacement is never painted', () => {
+    /*
+     * Measured at a history junction: the prepend compensation moved the
+     * viewport 949px in a layout effect and the anchor took 177px back on the
+     * next frame, so every page up was two visible movements. The caller is a
+     * layout effect or a ResizeObserver callback — both still beat the paint.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    layoutTurns({ 'turn-3': 1157 });
+    api.openSettleWindow();
+
+    expect(scroller.scrollTop).toBe(1177);
+    // The window still opens, for the measurements that land after this frame.
+    expect(frames).toHaveLength(1);
+  });
+
+  it('opens one settle window at a time', () => {
+    layoutTurns({ 'turn-3': 100 });
+    api.captureAnchor();
+
+    api.openSettleWindow();
+    api.openSettleWindow();
+    api.openSettleWindow();
+
+    expect(frames).toHaveLength(1);
+  });
+
+  it('winds the settle window down once there is no anchor to keep', () => {
+    // No anchor was ever captured, so every frame is a wasted one and the
+    // window has to end on its own rather than run forever.
+    api.openSettleWindow();
+    let ranFrames = 0;
+    while (frames.length > 0 && ranFrames < 100) {
+      runFrame();
+      ranFrames += 1;
+    }
+    expect(ranFrames).toBeGreaterThan(1);
+    expect(frames).toHaveLength(0);
+  });
+
+  it('keeps a frame in flight for as long as an anchor stands', () => {
+    /*
+     * A frame that answered refreshes the window, and a frame that found the
+     * anchor already in place counts as answered — so an open transcript that
+     * nobody else is writing to holds the loop open indefinitely. That is the
+     * shipped behaviour, and its cost is one `querySelectorAll` and two rect
+     * reads per frame for as long as a session is open.
+     */
+    layoutTurns({ 'turn-3': 100 });
+    api.captureAnchor();
+    api.openSettleWindow();
+
+    for (let index = 0; index < 60; index += 1) runFrame();
+
+    expect(frames).toHaveLength(1);
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it('winds the settle window down while another owner holds the viewport', () => {
+    /*
+     * Measured: 27 seconds of `anchor.stoodDown`, one per frame, with the
+     * viewport parked at 985.3 and follow-output resting on it — which at the
+     * tail is where it lives, not a transient. The loop read the missing-Turn
+     * count left by the frame *before* the stand-down as evidence it was still
+     * waiting for something, and refreshed its own budget on it; that count can
+     * only advance on a frame that does not stand down, so the one condition
+     * jammed the loop and made its only exit unreachable. It ended when the
+     * reader scrolled, and not before.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    // The anchored Turn leaves the rendered window, and then another writer
+    // takes the viewport — the order that left a stale count behind.
+    layoutTurns({ 'turn-9': 980 });
+    api.openSettleWindow();
+    runFrame();
+    isOwnedElsewhere = true;
+
+    let ranFrames = 0;
+    while (frames.length > 0 && ranFrames < 200) {
+      runFrame();
+      ranFrames += 1;
+    }
+
+    expect(ranFrames).toBeLessThanOrEqual(ANCHOR_SETTLE_FRAMES);
+    expect(frames).toHaveLength(0);
+    // Given up on nothing: the reader is still owed a correction, and the
+    // carry that depends on this count still has to work when the owner lets
+    // go and the transcript moves again.
+    expect(scroller.scrollTop).toBe(1000);
+  });
+
+  it('does not count a frame it stood down on as a frame spent waiting', () => {
+    /*
+     * `waitedFrames` is read as painted frames the reader spent in the wrong
+     * place. Frames the anchor never looked on are not that, and counting them
+     * reported a 6609-frame wait for a reading position that was correct
+     * throughout.
+     */
+    scroller.scrollTop = 1000;
+    layoutTurns({ 'turn-3': 980 });
+    api.captureAnchor();
+
+    layoutTurns({ 'turn-9': 980 });
+    api.openSettleWindow();
+    runFrame();
+
+    isOwnedElsewhere = true;
+    for (let index = 0; index < 5; index += 1) runFrame();
+
+    isOwnedElsewhere = false;
+    layoutTurns({ 'turn-3': 1100, 'turn-9': 980 });
+    runFrame();
+
+    const waits = mocks.traceViewport.mock.calls
+      .map(([probe]) => probe)
+      .filter(probe => probe.location === 'anchor.turnReturned');
+    expect(waits).toHaveLength(1);
+    expect(waits[0].data()).toMatchObject({ waitedFrames: 1 });
+  });
+
+  it('stops re-asserting after the component goes away', () => {
+    layoutTurns({ 'turn-3': 100 });
+    api.captureAnchor();
+    api.openSettleWindow();
+
+    unmount();
+
+    expect(cancelAnimationFrame).toHaveBeenCalled();
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.ts
new file mode 100644
index 0000000000..d246fe58cc
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportAnchor.ts
@@ -0,0 +1,733 @@
+/**
+ * The reading position, kept where the reader left it.
+ *
+ * A virtualizer places items in the scroll range before it knows how tall they
+ * are, so every late measurement rewrites the offset of everything below it.
+ * react-virtuoso's own correction for that is a scroll by the change in *total*
+ * list height, which assumes the change happened above the viewport, and it is
+ * gated on scroll direction and on no programmatic scroll being in flight.
+ * Measured on a 27-Turn session: one item measuring 38px -> 1003px produced a
+ * 965px scroll across a whole Turn, and a 1680px growth that really was above
+ * the viewport produced no correction at all — `scrollTop` held at 1133 while
+ * `scrollHeight` went 8393 -> 10073, sliding the transcript down by the full
+ * amount.
+ *
+ * So the correction cannot be delegated to whatever is doing the placing. This
+ * restores a relationship instead of a delta, which makes it idempotent: when
+ * the placement was right the correction is zero, and when it was wrong or
+ * never came, this is what makes it right.
+ *
+ * It is also why capture and restore are separate: the scheme this replaced
+ * captured once per prepend, in the commit that changed the item list, which is
+ * a frame before the heights it was meant to compensate reach the DOM.
+ * Measured corrections over three reproductions: +1, 0, 0.
+ *
+ * This hook talks to a scroller element and the DOM inside it, and to nothing
+ * else. It is deliberately independent of the virtualizer.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react';
+import {
+  roundViewportPx,
+  traceViewport,
+  traceViewportRepeating,
+} from '@/infrastructure/diagnostics/flowChatViewportDiagnostics';
+import {
+  ANCHOR_CORRECTION_EPSILON_PX,
+  ANCHOR_MISSING_TURN_ATTEMPTS,
+  ANCHOR_NOTABLE_CORRECTION_PX,
+  ANCHOR_SETTLE_FRAMES,
+  findRenderedTurnAnchorElement,
+  readTurnAnchorOffsetPx,
+  readViewportAnchorCandidates,
+  selectViewportAnchor,
+  shouldCaptureViewportAnchorOnScroll,
+  viewportAnchorCorrectionPx,
+  type ViewportAnchor,
+} from './flowChatViewportAnchor';
+
+export interface UseFlowChatViewportAnchorOptions {
+  scrollerRef: RefObject<HTMLElement | null>;
+  /**
+   * Someone is aiming the viewport at a target of their own, so the anchor must
+   * stay quiet.
+   *
+   * The anchor judges by geometry alone, which cannot tell a movement made on
+   * purpose from a displacement to undo — so it is told. The caller answers
+   * from the viewport register; this hook only needs the answer, which is what
+   * keeps it independent of everything that moves the viewport.
+   *
+   * Deliberately *not* true of the reader scrolling. A gesture chooses a
+   * position in the transcript; it does not stop the transcript from moving
+   * underneath them, and undoing that is all this hook does. The reader is also
+   * re-anchored on every scroll of theirs, so a correction during a gesture is
+   * zero unless something else really moved.
+   */
+  isViewportOwnedElsewhere: () => boolean;
+  /**
+   * Move the viewport *by* the correction. Supplied rather than performed here
+   * so that the repair is registered like every other one, without this hook
+   * having to know what else writes.
+   */
+  shiftViewport: (byPx: number) => void;
+}
+
+/**
+ * What an attempt to put the reading position back actually did.
+ *
+ * The settle window refreshes on evidence that the settle is still running, and
+ * only a frame that got as far as looking at the DOM has any. A boolean cannot
+ * carry that: `false` is a stand-down, a Turn not rendered yet, and no anchor at
+ * all, and the loop used to tell those apart by reading a counter that two of
+ * the three never touch. Measured: 27 seconds of `anchor.stoodDown`, one per
+ * frame, with the viewport parked and follow-output resting on it.
+ */
+type AnchorRestoreOutcome =
+  | 'corrected'
+  | 'in-place'
+  | 'awaiting-turn'
+  | 'stood-down'
+  | 'no-anchor';
+
+export interface FlowChatViewportAnchorApi {
+  /** Anchor to wherever the viewport is now, unconditionally. */
+  captureAnchor: () => void;
+  /**
+   * Somebody else moved the viewport to keep the reading position, and this
+   * much of where it now sits is not the reader.
+   *
+   * The anchor measures a correction against the viewport position its offset
+   * was agreed at, and treats every other change to `scrollTop` as somebody's
+   * deliberate movement rather than drift. A compensation is the one movement
+   * made *on the anchor's behalf*, so it has to be told, or the repair it was
+   * half of gets credited away and never finishes.
+   *
+   * This used to be a blanket "the viewport as of now is the baseline",
+   * re-taken every time a settle window opened. That also discarded whatever
+   * the reader had scrolled since the last capture — and a commit opens a
+   * window on almost every frame, so the discard was the common case, not the
+   * rare one.
+   */
+  absorbViewportShift: (byPx: number) => void;
+  /**
+   * The reader asked to be somewhere else, so the position they were at stops
+   * being the one to restore.
+   *
+   * A navigation is not a displacement. The anchor cannot tell the two apart by
+   * geometry — both are the viewport ending up somewhere it was not — and while
+   * a navigation holds the register the anchor merely stands down, which
+   * postpones the correction rather than cancelling it. Measured over four
+   * clicks on one Turn: the aim placed the viewport at 287px each time, and
+   * each time the anchor put it back 1653px away on the first frame after the
+   * hold lapsed, still anchored to the Turn the reader had jumped away from.
+   *
+   * So the old anchor is dropped here and a new one is taken from the placement
+   * once it has been rendered, in the settle window the commit opens. Between
+   * the two there is no anchor, which is the one state that cannot restore
+   * anything.
+   */
+  reanchorAfterNavigation: () => void;
+  /**
+   * Account for a scroll, by whichever of three answers fits it.
+   *
+   * A scroll event alone cannot say whether the user moved or the transcript
+   * moved under them, and the reading position has to survive either way:
+   *
+   * - **Captured**, when a recent intent event says the scroll was theirs. The
+   *   Turn they arrived at becomes the new reading position.
+   * - **Carried**, when it was not provably theirs and nobody else can account
+   *   for it. The anchored Turn is kept and only its expected offset moves, so
+   *   a repair that was still owed survives the scroll instead of being
+   *   forgotten at the displaced position. This covers both a Turn still
+   *   missing from the rendered window and a gesture whose scroll event was
+   *   delivered after the intent window closed.
+   * - **Left alone**, when a registered writer owns the viewport. That
+   *   movement is theirs and crediting it to the reader would drag the anchor
+   *   along with every follow, snap back and aim.
+   */
+  captureAnchorForScroll: () => void;
+  /** The user did something that scrolls, by their own hand. */
+  markUserScrollIntent: () => void;
+  /**
+   * Put the anchored Turn back where it was. False when there was no anchor to
+   * work from, which is the caller's signal to fall back on something coarser.
+   *
+   * Call where a correction can still beat the paint: a ResizeObserver
+   * callback, which the browser delivers after layout and before painting, or
+   * a layout effect.
+   */
+  restoreAnchor: () => boolean;
+  /**
+   * Correct now, and hold the anchor across the settle that follows.
+   *
+   * One callback per change is not enough, and no callback covers all of it, so
+   * every signal that the transcript moved opens a window and the anchor is
+   * re-asserted on each frame of it. A frame that had to correct refreshes the
+   * window, so a settle that runs long is followed to its end rather than
+   * abandoned partway.
+   *
+   * The first correction is synchronous because the caller is where the paint
+   * can still be beaten. It is not always *able* to correct there — at a
+   * history junction the anchored Turn is one frame away from being rendered —
+   * but where it is, the displacement and its repair are one paint instead of
+   * two.
+   */
+  openSettleWindow: () => void;
+}
+
+export function useFlowChatViewportAnchor({
+  scrollerRef,
+  isViewportOwnedElsewhere,
+  shiftViewport,
+}: UseFlowChatViewportAnchorOptions): FlowChatViewportAnchorApi {
+  const shiftViewportRef = useRef(shiftViewport);
+  shiftViewportRef.current = shiftViewport;
+  const anchorRef = useRef<ViewportAnchor | null>(null);
+  /** Consecutive attempts the anchored Turn has been missing from the window. */
+  const missingTurnAttemptsRef = useRef(0);
+  /**
+   * The viewport position the anchor's offset was last agreed against.
+   *
+   * Only read while the anchored Turn is missing. It is what lets the reader go
+   * on scrolling through a repair they are owed: a scroll they made is a change
+   * to `scrollTop`, and crediting it to the anchor keeps the rest — the part
+   * the transcript moved — outstanding.
+   */
+  const anchorScrollTopRef = useRef(0);
+  /*
+   * How long the anchored Turn has been out of the rendered window this time.
+   *
+   * The wait is the thing that decides whether a junction is seen. The
+   * synchronous correction in the commit is the one that costs nothing — it
+   * shares the paint with the displacement — and at a history junction it has
+   * never once been able to run, because the virtualizer windows from a scroll
+   * offset it only learns from scroll events and so renders the position the
+   * reader has just been moved off. Every correction therefore falls to the
+   * settle loop, and whether the reader sees it is a race: measured over five
+   * junctions, four corrections shared the prepend's frame and one landed 27ms
+   * into the next, visible as a 93px jump.
+   *
+   * `attempts` alone cannot answer how long the wait is. It counts restore
+   * calls, its trace is coalesced so only the first is ever emitted, and it
+   * says nothing about frames or milliseconds. These say what the wait cost, at
+   * the one moment it is known: when it ends.
+   */
+  const missingSinceMsRef = useRef<number | null>(null);
+  /** Settle frames that have run while the anchored Turn was missing. */
+  const missingFramesRef = useRef(0);
+  /** Reader travel credited to the anchor while it waited. */
+  const carriedDuringWaitPxRef = useRef(0);
+  /** The rAF timestamp of the frame a settle correction is running in, if any. */
+  const correctionFrameStartMsRef = useRef<number | null>(null);
+  /** When the user last did something that scrolls, by their own hand. */
+  const lastUserScrollIntentAtRef = useRef(0);
+  /** Frames left in which the anchor is still being re-asserted. */
+  const settleFramesRef = useRef(0);
+  /**
+   * The next settle window takes a reading position instead of restoring one.
+   *
+   * Set by a navigation, consumed by the commit that renders where it landed.
+   * Nothing else can say when the placement is on screen: the target is
+   * commonly outside the rendered window when the aim is issued, so reading the
+   * DOM in that same task anchors to whatever the reader was moved off.
+   */
+  const recaptureOnNextSettleRef = useRef(false);
+  const settleFrameRef = useRef<number | null>(null);
+  /*
+   * The settle loop is installed once and outlives every render, so it cannot
+   * close over anything that changes identity between them.
+   */
+  const isViewportOwnedElsewhereRef = useRef(isViewportOwnedElsewhere);
+  isViewportOwnedElsewhereRef.current = isViewportOwnedElsewhere;
+
+  /**
+   * Forget a wait, without reporting it. For the cases where the wait stopped
+   * being about anything rather than ending in an answer.
+   */
+  const endMissingTurnWait = useCallback(() => {
+    missingTurnAttemptsRef.current = 0;
+    missingSinceMsRef.current = null;
+    missingFramesRef.current = 0;
+    carriedDuringWaitPxRef.current = 0;
+  }, []);
+
+  /**
+   * What a wait for the anchored Turn cost, reported where it is known.
+   *
+   * Once per wait, at its end, because that is the only moment the whole of it
+   * exists. `outcome` separates the Turn coming back from the anchor being
+   * given up on: both end the wait, and only one of them can still repair
+   * anything.
+   */
+  const reportMissingTurnWait = useCallback((
+    scroller: HTMLElement,
+    turnId: string,
+    outcome: 'returned' | 'given-up',
+  ) => {
+    const startedAtMs = missingSinceMsRef.current;
+    if (startedAtMs === null) return;
+    /*
+     * Read out here rather than inside the thunk. The wait ends on the next
+     * line, and a `data` callback is evaluated by the trace, not by this — so
+     * a thunk over the refs would report the state after the reset every time.
+     */
+    const waited = {
+      turnId,
+      outcome,
+      waitedForMs: Math.round(performance.now() - startedAtMs),
+      waitedFrames: missingFramesRef.current,
+      waitedAttempts: missingTurnAttemptsRef.current,
+      carriedPx: roundViewportPx(carriedDuringWaitPxRef.current),
+      scrollTopPx: roundViewportPx(scroller.scrollTop),
+      scrollRangePx: roundViewportPx(scroller.scrollHeight),
+    };
+    endMissingTurnWait();
+    traceViewport({
+      location: outcome === 'returned' ? 'anchor.turnReturned' : 'anchor.waitAbandoned',
+      message: outcome === 'returned'
+        ? 'the anchored Turn came back into the rendered window'
+        : 'the anchored Turn never came back',
+      data: () => waited,
+    });
+  }, [endMissingTurnWait]);
+
+  /**
+   * Where the reading position is taken from, and when.
+   *
+   * Traced because capture is the half of this hook that decides what every
+   * correction afterwards will restore *to*, and it is otherwise invisible: a
+   * correction that returns the reader to a position the transcript held for
+   * one frame mid-settle looks exactly like a correction that worked. The
+   * source matters as much as the value — a scroll event carries no proof of
+   * whose scroll it was, and this hook's own writes produce them too.
+   */
+  const captureAnchorAt = useCallback((source: 'explicit' | 'scroll' | 'navigation') => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const previous = anchorRef.current;
+    const next = selectViewportAnchor(
+      readViewportAnchorCandidates(scroller),
+      scroller.clientHeight,
+    );
+    anchorRef.current = next;
+    anchorScrollTopRef.current = scroller.scrollTop;
+    // A new reading position is not the old one arriving, so whatever the old
+    // one was waiting for stops being a fact about anything.
+    endMissingTurnWait();
+    traceViewportRepeating(`anchor|captured|${source}|${next?.turnId ?? 'none'}`, {
+      location: 'anchor.captured',
+      message: 'reading position taken',
+      data: () => ({
+        source,
+        turnId: next?.turnId ?? null,
+        offsetFromScrollerTopPx: next === null ? null : roundViewportPx(next.offsetFromScrollerTop),
+        replacedTurnId: previous?.turnId ?? null,
+        replacedOffsetPx: previous === null
+          ? null
+          : roundViewportPx(previous.offsetFromScrollerTop),
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+        // Read against the offset: an anchor is only a proxy for what the
+        // reader sees while it is on screen, and the offset alone cannot say
+        // whether it is.
+        viewportHeightPx: roundViewportPx(scroller.clientHeight),
+      }),
+    });
+  }, [endMissingTurnWait, scrollerRef]);
+
+  const captureAnchor = useCallback(() => {
+    captureAnchorAt('explicit');
+  }, [captureAnchorAt]);
+
+  const absorbViewportShift = useCallback((byPx: number) => {
+    anchorScrollTopRef.current += byPx;
+  }, []);
+
+  const reanchorAfterNavigation = useCallback(() => {
+    const previous = anchorRef.current;
+    anchorRef.current = null;
+    endMissingTurnWait();
+    recaptureOnNextSettleRef.current = true;
+    traceViewport({
+      location: 'anchor.releasedForNavigation',
+      message: 'the reader asked to be somewhere else, so the old reading position was dropped',
+      data: () => ({
+        replacedTurnId: previous?.turnId ?? null,
+        replacedOffsetPx: previous === null
+          ? null
+          : roundViewportPx(previous.offsetFromScrollerTop),
+        scrollTopPx: roundViewportPx(scrollerRef.current?.scrollTop ?? 0),
+      }),
+    });
+  }, [endMissingTurnWait, scrollerRef]);
+
+  const markUserScrollIntent = useCallback(() => {
+    lastUserScrollIntentAtRef.current = performance.now();
+  }, []);
+
+  /**
+   * Carry the anchor through a scroll instead of replacing it.
+   *
+   * Take a movement of the viewport into the anchor instead of measuring
+   * against it.
+   *
+   * The offset and the viewport position it was agreed at are two halves of one
+   * fact, and this is the only thing that advances both. A change to
+   * `scrollTop` is somebody moving the viewport — the reader, most of the time
+   * — and never a displacement, because a displacement moves the transcript
+   * underneath a `scrollTop` that stays put. So it is subtracted from where the
+   * Turn is expected to be, and whatever remains is the drift to repair.
+   *
+   * Two callers, one rule:
+   *
+   * - **`awaiting-turn`** — a scroll while the anchored Turn is missing from
+   *   the rendered window, where a correction is owed and cannot yet be
+   *   measured. Re-reading the anchor from the DOM there accepts the reader's
+   *   movement *and* the transcript's as one, and files the displacement away
+   *   as the reader's own choice. Measured at three junctions in one session:
+   *   the anchor was owed 104px, then 140px, then an amount never established,
+   *   and at each of them a scroll 77ms later replaced it with a Turn at its
+   *   displaced position. Two of the three were never corrected at all.
+   * - **`viewport-moved`** — every restore, before anything is measured. The
+   *   settle loop reads the DOM directly and a commit opens a window on almost
+   *   every frame, so a correction routinely runs before the scroll event
+   *   carrying the reader's travel has been delivered.
+   */
+  const carryAnchorThroughScroll = useCallback((
+    scroller: HTMLElement,
+    reason: 'awaiting-turn' | 'unclaimed-scroll' | 'viewport-moved',
+  ) => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const travelledPx = scroller.scrollTop - anchorScrollTopRef.current;
+    anchorScrollTopRef.current = scroller.scrollTop;
+    if (travelledPx === 0) return;
+    if (missingSinceMsRef.current !== null) carriedDuringWaitPxRef.current += travelledPx;
+    anchorRef.current = {
+      ...anchor,
+      offsetFromScrollerTop: anchor.offsetFromScrollerTop - travelledPx,
+    };
+    traceViewportRepeating(`anchor|carried|${reason}|${anchor.turnId}`, {
+      location: 'anchor.carried',
+      message: 'the reader scrolled and the anchor went with them',
+      travelPx: travelledPx,
+      data: () => ({
+        reason,
+        turnId: anchor.turnId,
+        travelledPx: roundViewportPx(travelledPx),
+        expectedOffsetPx: roundViewportPx(anchor.offsetFromScrollerTop - travelledPx),
+        missingAttempts: missingTurnAttemptsRef.current,
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+      }),
+    });
+  }, []);
+
+  const captureAnchorForScroll = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    if (missingTurnAttemptsRef.current > 0) {
+      carryAnchorThroughScroll(scroller, 'awaiting-turn');
+      return;
+    }
+    const msSinceUserScrollIntent = performance.now() - lastUserScrollIntentAtRef.current;
+    if (shouldCaptureViewportAnchorOnScroll(anchorRef.current !== null, msSinceUserScrollIntent)) {
+      captureAnchorAt('scroll');
+      return;
+    }
+    /*
+     * Not provably the reader's — and still theirs, if nobody else can account
+     * for it.
+     *
+     * The window is measured from the *input* event, and the scrolling it
+     * authorises outlives it: a wheel notch smooth-scrolls for longer than the
+     * window, and under a busy main thread the scroll event carrying the whole
+     * travel is delivered after it has closed. Ignoring the event then leaves
+     * the reader's own movement credited to nobody, and the next settle undoes
+     * it in full. Measured over 181 seconds: fourteen gestures, one capture, and
+     * seven corrections of 308px to 618px that each returned the viewport to
+     * exactly where the gesture had started.
+     *
+     * Carrying is what "credited to nobody" was missing, and it is safe where a
+     * capture is not: it keeps the anchored Turn and only moves its expected
+     * offset, so a repair that was still owed survives instead of being
+     * forgotten at the displaced position.
+     *
+     * Owned elsewhere is the case this must not touch. A registered writer
+     * moving the viewport is the one other thing that changes `scrollTop`
+     * without the reader, and crediting *that* to them would carry the anchor
+     * along with every follow, snap back and aim.
+     */
+    if (!isViewportOwnedElsewhereRef.current()) {
+      carryAnchorThroughScroll(scroller, 'unclaimed-scroll');
+      return;
+    }
+    traceViewportRepeating('anchor|scroll-left-alone', {
+      location: 'anchor.scrollLeftAlone',
+      message: 'a scroll was neither the reader\'s nor ours to credit',
+      data: () => ({
+        turnId: anchorRef.current?.turnId ?? null,
+        msSinceUserScrollIntent: Math.round(msSinceUserScrollIntent),
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+      }),
+    });
+  }, [captureAnchorAt, carryAnchorThroughScroll, scrollerRef]);
+
+  const attemptRestore = useCallback((): AnchorRestoreOutcome => {
+    const scroller = scrollerRef.current;
+    const anchor = anchorRef.current;
+    if (!scroller || !anchor) return 'no-anchor';
+    /*
+     * Every way this declines is silent and looks like the transcript simply
+     * not moving, which is why each of them is traced. Standing down for
+     * another owner is the intended case; the other two are how a reading
+     * position gets lost, and they have both happened.
+     */
+    if (isViewportOwnedElsewhereRef.current()) {
+      traceViewportRepeating('anchor|owned-elsewhere', {
+        location: 'anchor.stoodDown',
+        message: 'anchor stood down for another owner',
+        data: () => ({ turnId: anchor.turnId, scrollTopPx: roundViewportPx(scroller.scrollTop) }),
+      });
+      return 'stood-down';
+    }
+    const element = findRenderedTurnAnchorElement(scroller, anchor.turnId);
+    /*
+     * The anchored Turn can be absent from the rendered window, and one frame
+     * of absence is not the same fact as the reader having left it behind.
+     *
+     * The single frame is the common case: the virtualizer chooses its window
+     * from a scroll offset it only learns from scroll events, so the commit
+     * that prepends history is still windowing the position the reader has just
+     * been moved off, and their Turn arrives a frame later. Dropping there threw
+     * away the only record of where they were reading, one frame before it
+     * could have been used — measured at four junctions in a row, every one a
+     * drop and not one correction.
+     */
+    if (!element) {
+      if (missingSinceMsRef.current === null) missingSinceMsRef.current = performance.now();
+      missingTurnAttemptsRef.current += 1;
+      const givingUp = missingTurnAttemptsRef.current >= ANCHOR_MISSING_TURN_ATTEMPTS;
+      traceViewportRepeating(`anchor|turn-not-rendered|${givingUp}`, {
+        location: givingUp ? 'anchor.dropped' : 'anchor.turnNotRendered',
+        message: givingUp
+          ? 'anchored Turn stayed out of the rendered window, so the anchor was given up'
+          : 'anchored Turn is not in the rendered window yet',
+        data: () => ({
+          turnId: anchor.turnId,
+          attempts: missingTurnAttemptsRef.current,
+          scrollTopPx: roundViewportPx(scroller.scrollTop),
+          scrollRangePx: roundViewportPx(scroller.scrollHeight),
+        }),
+      });
+      if (givingUp) {
+        reportMissingTurnWait(scroller, anchor.turnId, 'given-up');
+        anchorRef.current = null;
+        return 'no-anchor';
+      }
+      return 'awaiting-turn';
+    }
+    // The wait is reported before the correction it made possible, so the two
+    // read as cause and effect in the order they are written down.
+    reportMissingTurnWait(scroller, anchor.turnId, 'returned');
+    /*
+     * Whatever moved the viewport since the offset was agreed is taken into the
+     * anchor before anything is measured against it, and it is never a
+     * displacement — a displacement moves the transcript under a `scrollTop`
+     * that stays put. Almost always it is the reader, whose scroll event has
+     * simply not been delivered yet: the settle loop reads the DOM directly and
+     * a commit can open a window before the event arrives, so a correction gets
+     * there first and undoes them.
+     *
+     * Taken in *here* rather than subtracted in the correction, because the
+     * offset and the position it was agreed at are two halves of one fact and
+     * every writer has to move both. Subtracting it left the two branches below
+     * advancing only the position, and a frame with nothing to correct then
+     * banked the reader's travel as a debt the next frame collected. Measured:
+     * a 32px scroll and an 81px scroll, each reported back as a correction of
+     * exactly itself with `scrolledSincePx: 0`.
+     */
+    const scrolledSincePx = scroller.scrollTop - anchorScrollTopRef.current;
+    carryAnchorThroughScroll(scroller, 'viewport-moved');
+    const rebased = anchorRef.current ?? anchor;
+    const correction = viewportAnchorCorrectionPx(
+      rebased,
+      readTurnAnchorOffsetPx(scroller, element),
+    );
+    /*
+     * Already where it belongs, which still counts as answered — and is now the
+     * common outcome rather than a rarity, since a frame in which only the
+     * reader moved lands here exactly. Traced for that reason: it is reached
+     * every frame of every settle, and it is where a reading position that has
+     * quietly stopped meaning anything would sit unnoticed.
+     */
+    if (Math.abs(correction) < ANCHOR_CORRECTION_EPSILON_PX) {
+      traceViewportRepeating(`anchor|in-place|${rebased.turnId}`, {
+        location: 'anchor.inPlace',
+        message: 'the reading position is where it belongs',
+        data: () => ({
+          turnId: rebased.turnId,
+          anchoredOffsetPx: roundViewportPx(rebased.offsetFromScrollerTop),
+          scrolledSincePx: roundViewportPx(scrolledSincePx),
+          scrollTopPx: roundViewportPx(scroller.scrollTop),
+        }),
+      });
+      return 'in-place';
+    }
+    /*
+     * Keyed by which anchor and by whether the reader can feel it, because a
+     * coalesced run collapses to its first sample and the rest becomes a sum.
+     * Under one key, two rounds of diagnosis in a row read `correctionPx: 0.7`
+     * against 458.7px of suppressed travel spanning three different anchors —
+     * every correction that mattered was inside the summary, attributable to
+     * nothing.
+     */
+    const felt = Math.abs(correction) >= ANCHOR_NOTABLE_CORRECTION_PX;
+    traceViewportRepeating(`anchor|correcting|${felt ? 'felt' : 'rounding'}|${rebased.turnId}`, {
+      location: 'anchor.correct',
+      message: 'anchor put the reading position back',
+      travelPx: correction,
+      data: () => ({
+        turnId: rebased.turnId,
+        correctionPx: roundViewportPx(correction),
+        /*
+         * Where the anchored Turn is being held, against how much of the
+         * scroller there is to hold it in. A correction restores a marker the
+         * reader cannot see if this falls outside the viewport, and then it is
+         * reporting movement that never reached the screen.
+         */
+        anchoredOffsetPx: roundViewportPx(rebased.offsetFromScrollerTop),
+        viewportHeightPx: roundViewportPx(scroller.clientHeight),
+        /*
+         * The part of the drift that was somebody moving the viewport rather
+         * than the transcript moving. Read against `correctionPx`: what is
+         * left over is the displacement, and the two being equal and opposite
+         * is a correction that would have undone a scroll.
+         */
+        scrolledSincePx: roundViewportPx(scrolledSincePx),
+        frameStartMs: correctionFrameStartMsRef.current === null
+          ? null
+          : Math.round(correctionFrameStartMsRef.current),
+        scrollTopPx: roundViewportPx(scroller.scrollTop),
+        /*
+         * The scroll range, so a correction can be told apart from the reason
+         * for it. A large correction means either that whoever moved the
+         * viewport last over-shot, or that the transcript above the reader
+         * measured smaller than it had reserved — and those differ by whether
+         * the range changed since the change that opened this settle. Without
+         * it, a 412px correction and a 412px mistake read the same.
+         */
+        scrollRangePx: roundViewportPx(scroller.scrollHeight),
+      }),
+    });
+    shiftViewportRef.current(correction);
+    /*
+     * The shift put the Turn back at the stored offset, so advancing only the
+     * position keeps the two halves agreeing. This is the one movement of
+     * `scrollTop` that must not be taken into the offset — it is the repair.
+     */
+    anchorScrollTopRef.current = scroller.scrollTop;
+    return 'corrected';
+  }, [carryAnchorThroughScroll, reportMissingTurnWait, scrollerRef]);
+
+  const attemptRestoreRef = useRef(attemptRestore);
+  attemptRestoreRef.current = attemptRestore;
+
+  /*
+   * The public answer is "did this leave the reading position where it belongs",
+   * which the outcome refines rather than replaces. Callers outside the settle
+   * loop only ever needed the two.
+   */
+  const restoreAnchor = useCallback((): boolean => {
+    const outcome = attemptRestoreRef.current();
+    return outcome === 'corrected' || outcome === 'in-place';
+  }, []);
+
+  const openSettleWindow = useCallback(() => {
+    settleFramesRef.current = ANCHOR_SETTLE_FRAMES;
+    if (recaptureOnNextSettleRef.current) {
+      /*
+       * The first commit after a navigation, which is where the placement is
+       * finally on screen. Taking the reading position here rather than
+       * restoring one is the whole difference between a jump that holds and a
+       * jump that is undone the moment the register lets go.
+       */
+      recaptureOnNextSettleRef.current = false;
+      captureAnchorAt('navigation');
+    } else {
+      // In the caller's own frame, so the displacement and its correction are
+      // one paint rather than two. Callers are a layout effect or a
+      // ResizeObserver callback; both still run before the browser paints.
+      attemptRestoreRef.current();
+    }
+    if (settleFrameRef.current !== null) return;
+    const step = (frameStartMs: number) => {
+      settleFrameRef.current = null;
+      settleFramesRef.current -= 1;
+      /*
+       * The frame this correction belongs to, which is the only way to tell a
+       * repair the reader never saw from one they watched happen. A correction
+       * whose frame started before the displacement's own frame was painted is
+       * invisible; one a frame or more later is the flicker.
+       */
+      correctionFrameStartMsRef.current = frameStartMs;
+      /*
+       * A frame that answered refreshes the window — and so does one still
+       * waiting for the anchored Turn to be rendered. "Not there yet" is
+       * neither a repair nor a failure, and spending a frame on it makes the
+       * settle outlast the wait only for as long as `ANCHOR_SETTLE_FRAMES` and
+       * `ANCHOR_MISSING_TURN_ATTEMPTS` happen to be the same number. They are
+       * independent constants describing different things; this says what was
+       * meant instead of relying on them coinciding.
+       */
+      const outcome = attemptRestoreRef.current();
+      // Counted here rather than beside `attempts`, because it is frames the
+      // wait is measured in: a Turn that arrives in the next frame costs the
+      // reader nothing, and one that takes five is five painted frames of
+      // being in the wrong place. A frame that stood down is none of those —
+      // it never looked, and counting it reported a 28-second wait for a
+      // reading position that was correct the whole time.
+      if (outcome === 'awaiting-turn') missingFramesRef.current += 1;
+      /*
+       * Only a frame that looked can say the settle is still running. A
+       * stand-down looked at nothing — the owner it deferred to is placing the
+       * viewport, and while that owner rests on it, as follow-output does at
+       * the tail, nothing here will ever change. Refreshing on it kept the loop
+       * alive off a missing-Turn count left by the last frame that *did* look,
+       * and that count can only advance on a frame that does not stand down:
+       * the one condition jammed the loop and made its only exit unreachable.
+       */
+      if (outcome === 'corrected' || outcome === 'in-place' || outcome === 'awaiting-turn') {
+        settleFramesRef.current = ANCHOR_SETTLE_FRAMES;
+      }
+      correctionFrameStartMsRef.current = null;
+      if (settleFramesRef.current > 0) {
+        settleFrameRef.current = requestAnimationFrame(step);
+      }
+    };
+    settleFrameRef.current = requestAnimationFrame(step);
+  }, [captureAnchorAt]);
+
+  useEffect(() => () => {
+    if (settleFrameRef.current !== null) {
+      cancelAnimationFrame(settleFrameRef.current);
+      settleFrameRef.current = null;
+    }
+  }, []);
+
+  return useMemo(() => ({
+    captureAnchor,
+    absorbViewportShift,
+    reanchorAfterNavigation,
+    captureAnchorForScroll,
+    markUserScrollIntent,
+    restoreAnchor,
+    openSettleWindow,
+  }), [
+    absorbViewportShift,
+    captureAnchor,
+    captureAnchorForScroll,
+    markUserScrollIntent,
+    openSettleWindow,
+    reanchorAfterNavigation,
+    restoreAnchor,
+  ]);
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts
new file mode 100644
index 0000000000..adc56f4aa1
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts
@@ -0,0 +1,208 @@
+/**
+ * The register, wired to a live scroller.
+ *
+ * `flowChatViewportOwnership.ts` decides who may write; this holds the current
+ * claim and performs the write. The two are one call on purpose: taking
+ * ownership and moving the viewport being the same action is what keeps a new
+ * writer from being added without the rest of FlowChat knowing about it.
+ *
+ * Everything here is refs. A claim changes many times per frame — the follow
+ * loop renews on every one — and none of it belongs in a render.
+ */
+
+import { useCallback, useMemo, useRef, type RefObject } from 'react';
+import {
+  isViewportDiagnosticsEnabled,
+  roundViewportPx,
+  traceViewportRepeating,
+} from '@/infrastructure/diagnostics/flowChatViewportDiagnostics';
+import {
+  activeViewportClaim,
+  canShiftViewport,
+  claimViewport,
+  releaseViewport,
+  type FlowChatViewportOwner,
+  type ViewportClaim,
+} from './flowChatViewportOwnership';
+
+export interface ViewportWriteRequest {
+  owner: FlowChatViewportOwner;
+  /** Offset in scroller coordinates. */
+  topPx: number;
+  behavior?: ScrollBehavior;
+  /**
+   * How long ownership stands after this write.
+   *
+   * Omitted holds it for the frame the write happens in, which is what a
+   * correction wants. An animated write has to outlast its own animation, or
+   * the first frame of travel is read as a displacement by whatever corrects
+   * next — see the snap back in `FLOWCHAT_SCROLL_STABILITY.md`.
+   */
+  holdForMs?: number;
+}
+
+export interface FlowChatViewportOwnerApi {
+  /**
+   * Take the viewport without writing it yet, for a writer whose movement is
+   * issued by something else — a virtualizer aiming at an item, or a browser
+   * animation. Returns whether the claim was granted.
+   */
+  claim: (owner: FlowChatViewportOwner, options?: { holdForMs?: number }) => boolean;
+  /** Give it back. A writer that was preempted cannot release the new owner. */
+  release: (owner: FlowChatViewportOwner) => void;
+  /** Whether a displacement repair may act — see `canShiftViewport`. */
+  canShift: () => boolean;
+  /** The owner holding the viewport, for diagnostics. Null when it is free. */
+  currentOwner: () => FlowChatViewportOwner | null;
+  /**
+   * Move the viewport, if the register allows it. False means the write did
+   * not happen — the caller has been outranked and must not fall back to
+   * writing the scroller itself.
+   */
+  write: (request: ViewportWriteRequest) => boolean;
+  /**
+   * Move the viewport *by* an amount, because what it is showing moved by that
+   * amount. Takes no ownership: a displacement has no opinion about where the
+   * viewport belongs, so there is nothing for it to hold against anyone.
+   *
+   * Refused only by an owner that holds a target — see `canShiftViewport`. A
+   * gesture is not one, and must not be: the reader chose a position in the
+   * transcript, and this is what keeps that position meaning the same thing.
+   */
+  shift: (byPx: number) => boolean;
+}
+
+export function useFlowChatViewportOwner(
+  scrollerRef: RefObject<HTMLElement | null>,
+): FlowChatViewportOwnerApi {
+  const claimRef = useRef<ViewportClaim | null>(null);
+
+  /**
+   * Take the viewport and report who was holding it, which the register drops
+   * once the outcome is known. Both public entry points go through this so a
+   * write is one line in the log rather than a claim and a write.
+   */
+  const takeViewport = useCallback((
+    owner: FlowChatViewportOwner,
+    holdForMs: number | undefined,
+  ): { granted: boolean; heldBy: FlowChatViewportOwner | null } => {
+    const nowMs = performance.now();
+    // Read before the claim resolves: on a refusal this is who refused, and on
+    // a grant it is who was preempted, which is the same question either way.
+    const heldBy = activeViewportClaim(claimRef.current, nowMs)?.owner ?? null;
+    const outcome = claimViewport(claimRef.current, { owner, nowMs, holdForMs });
+    claimRef.current = outcome.claim;
+    return { granted: outcome.granted, heldBy };
+  }, []);
+
+  const claim = useCallback((
+    owner: FlowChatViewportOwner,
+    options?: { holdForMs?: number },
+  ): boolean => {
+    const { granted, heldBy } = takeViewport(owner, options?.holdForMs);
+    if (isViewportDiagnosticsEnabled()) {
+      traceViewportRepeating(`claim|${owner}|${granted}|${heldBy}`, {
+        location: 'viewportOwner.claim',
+        message: granted ? 'took the viewport' : 'refused the viewport',
+        data: () => ({ owner, granted, heldBy, holdForMs: options?.holdForMs ?? null }),
+      });
+    }
+    return granted;
+  }, [takeViewport]);
+
+  const release = useCallback((owner: FlowChatViewportOwner) => {
+    const heldBy = claimRef.current?.owner ?? null;
+    claimRef.current = releaseViewport(claimRef.current, owner);
+    if (isViewportDiagnosticsEnabled() && heldBy !== null) {
+      traceViewportRepeating(`release|${owner}|${heldBy}`, {
+        location: 'viewportOwner.release',
+        message: heldBy === owner
+          ? 'gave the viewport back'
+          : 'released nothing, having already been preempted',
+        data: () => ({ owner, heldBy }),
+      });
+    }
+  }, []);
+
+  const canShift = useCallback(() => (
+    canShiftViewport(claimRef.current, performance.now())
+  ), []);
+
+  const currentOwner = useCallback(() => {
+    const nowMs = performance.now();
+    const held = claimRef.current;
+    return held && nowMs < held.expiresAtMs ? held.owner : null;
+  }, []);
+
+  const write = useCallback((request: ViewportWriteRequest): boolean => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return false;
+    const { granted, heldBy } = takeViewport(request.owner, request.holdForMs);
+    /*
+     * The one place that sees every deliberate movement, and the only place a
+     * refusal is visible at all — a writer that was outranked leaves no trace
+     * anywhere else, and "nothing moved" is the more common complaint.
+     */
+    if (isViewportDiagnosticsEnabled()) {
+      const fromPx = scroller.scrollTop;
+      traceViewportRepeating(`write|${request.owner}|${granted}|${heldBy}`, {
+        location: 'viewportOwner.write',
+        message: granted ? 'moved the viewport' : 'was refused the viewport',
+        travelPx: request.topPx - fromPx,
+        data: () => ({
+          owner: request.owner,
+          granted,
+          heldBy,
+          fromPx: roundViewportPx(fromPx),
+          toPx: roundViewportPx(request.topPx),
+          behavior: request.behavior ?? 'auto',
+          holdForMs: request.holdForMs ?? null,
+        }),
+      });
+    }
+    if (!granted) return false;
+    if (request.behavior === 'smooth') {
+      scroller.scrollTo({ top: request.topPx, behavior: 'smooth' });
+    } else {
+      // Assigned rather than `scrollTo({behavior:'auto'})`: an assignment also
+      // cancels any animation still running, which is what a writer taking the
+      // viewport from an animated one means to do.
+      scroller.scrollTop = request.topPx;
+    }
+    return true;
+  }, [scrollerRef, takeViewport]);
+
+  const shift = useCallback((byPx: number): boolean => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return false;
+    const allowed = canShift();
+    if (isViewportDiagnosticsEnabled()) {
+      const fromPx = scroller.scrollTop;
+      traceViewportRepeating(`shift|${allowed}|${currentOwner()}`, {
+        location: 'viewportOwner.shift',
+        message: allowed
+          ? 'moved the viewport by what moved under it'
+          : 'left the displacement to whoever holds a target',
+        travelPx: byPx,
+        data: () => ({
+          allowed,
+          heldBy: currentOwner(),
+          fromPx: roundViewportPx(fromPx),
+          byPx: roundViewportPx(byPx),
+        }),
+      });
+    }
+    if (!allowed) return false;
+    scroller.scrollTop += byPx;
+    return true;
+  }, [canShift, currentOwner, scrollerRef]);
+
+  return useMemo(() => ({
+    claim,
+    release,
+    canShift,
+    currentOwner,
+    write,
+    shift,
+  }), [canShift, claim, currentOwner, release, shift, write]);
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.aim.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.aim.test.tsx
new file mode 100644
index 0000000000..29d8cc6aea
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.aim.test.tsx
@@ -0,0 +1,212 @@
+// @vitest-environment jsdom
+
+/**
+ * The re-aim, and giving it up.
+ *
+ * An aim at an item is not one write. The library recomputes the target offset
+ * every frame from measurements that are still landing, and writes again
+ * whenever it moves — for up to five seconds. That is the whole reason to
+ * prefer `scrollItemIntoView` over an offset, and it is also the reason a
+ * reader who takes the viewport over can be pulled back to where they were
+ * going seconds after they stopped going there.
+ *
+ * The first test here exists to prove the mechanism runs at all, because the
+ * second one is only meaningful if it does: "no second write" is what a
+ * re-aim that never armed looks like too.
+ */
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFlowChatVirtualizer, type FlowChatVirtualizer } from './useFlowChatVirtualizer';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+/** What the reservation says a row is before anything has measured. */
+const ESTIMATE_PX = 100;
+/** What the rows turn out to be — over by more than a factor of two. */
+const REAL_PX = 40;
+const TARGET_INDEX = 5;
+
+interface Item {
+  key: string;
+}
+
+interface HarnessProps {
+  scroller: HTMLElement;
+  header: HTMLElement;
+  items: Item[];
+  writeViewport: (request: { topPx: number }) => boolean;
+  onApi: (api: FlowChatVirtualizer) => void;
+}
+
+function Harness({ scroller, header, items, writeViewport, onApi }: HarnessProps) {
+  const scrollerRef = React.useRef<HTMLElement | null>(scroller);
+  const headerRef = React.useRef<HTMLElement | null>(header);
+  onApi(useFlowChatVirtualizer({
+    items,
+    scrollerRef,
+    headerRef,
+    getItemKey: (item: Item) => item.key,
+    estimateItemHeightPx: () => ESTIMATE_PX,
+    scrollPaddingStartPx: 0,
+    writeViewport,
+  }));
+  return null;
+}
+
+describe('useFlowChatVirtualizer aim', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let scroller: HTMLDivElement;
+  let header: HTMLDivElement;
+  let api: FlowChatVirtualizer;
+  let writes: number[];
+  let frames: FrameRequestCallback[];
+
+  /**
+   * A row at a height jsdom would otherwise report as zero. `offsetHeight`
+   * rather than a rect, because that is what the library's measurement reads.
+   */
+  function renderRow(index: number, heightPx: number) {
+    const element = document.createElement('div');
+    element.setAttribute('data-virtual-index', String(index));
+    Object.defineProperty(element, 'offsetHeight', { configurable: true, value: heightPx });
+    scroller.appendChild(element);
+  }
+
+  /**
+   * Shrink everything above the target, which is what moves the target's own
+   * offset: 5 rows reserved at 100px turn out to be 40px, so an aim placed at
+   * 500 belongs at 200.
+   */
+  function measureRowsAboveTarget() {
+    act(() => {
+      for (let index = 0; index < TARGET_INDEX; index += 1) renderRow(index, REAL_PX);
+      api.measureRenderedItems();
+    });
+  }
+
+  function runFrames(count: number) {
+    for (let index = 0; index < count; index += 1) {
+      const frame = frames.shift();
+      if (!frame) return;
+      act(() => frame(16));
+    }
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    });
+    frames = [];
+    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
+      frames.push(callback);
+      return frames.length;
+    }));
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    scroller = document.createElement('div');
+    header = document.createElement('div');
+    container.appendChild(scroller);
+    // Without a scroll range the library clamps every aim to 0, which would
+    // make all of these pass for the wrong reason.
+    Object.defineProperty(scroller, 'scrollHeight', { configurable: true, value: 10_000 });
+    Object.defineProperty(scroller, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(scroller, 'scrollTop', { configurable: true, writable: true, value: 0 });
+
+    writes = [];
+    const writeViewport = ({ topPx }: { topPx: number }) => {
+      writes.push(topPx);
+      // The register's granted write, and the scroll event it produces — which
+      // is the only way the library learns where the viewport actually is.
+      scroller.scrollTop = topPx;
+      scroller.dispatchEvent(new Event('scroll'));
+      return true;
+    };
+
+    const items = Array.from({ length: 10 }, (_, index) => ({ key: `item-${index}` }));
+    act(() => root.render(
+      <Harness
+        scroller={scroller}
+        header={header}
+        items={items}
+        writeViewport={writeViewport}
+        onApi={next => { api = next; }}
+      />,
+    ));
+    // The library places the scroller against its own state on mount. That
+    // write belongs to no aim, and counting it would hide the ones that do.
+    writes = [];
+    frames = [];
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('re-aims at the item when a measurement moves it', () => {
+    act(() => api.scrollItemIntoView(TARGET_INDEX, {
+      align: 'start',
+      owner: 'one-shot-navigation',
+    }));
+    expect(writes).toEqual([TARGET_INDEX * ESTIMATE_PX]);
+
+    measureRowsAboveTarget();
+    runFrames(1);
+
+    // The aim followed its item down rather than staying at the offset it was
+    // first given. This is the behaviour worth keeping.
+    expect(writes).toEqual([TARGET_INDEX * ESTIMATE_PX, TARGET_INDEX * REAL_PX]);
+  });
+
+  it('stops re-aiming once the aim has been given up', () => {
+    /*
+     * Measured: a Turn navigation placed the viewport at 5358, the reader took
+     * over 6ms later, and 12ms after that the re-aim asked for 7784 and was
+     * refused. The refusal is not the fix — the library never learns of it, and
+     * the gesture's hold in the register lasts 200ms against a five-second
+     * re-aim, so the write after the hold lapses is granted.
+     */
+    act(() => api.scrollItemIntoView(TARGET_INDEX, {
+      align: 'start',
+      owner: 'one-shot-navigation',
+    }));
+    act(() => api.cancelAim());
+    // The cancel aims at the offset the scroller already holds, which is how it
+    // leaves the re-aim with no index to recompute from.
+    expect(writes).toEqual([TARGET_INDEX * ESTIMATE_PX, TARGET_INDEX * ESTIMATE_PX]);
+
+    measureRowsAboveTarget();
+    runFrames(5);
+
+    expect(writes).toEqual([TARGET_INDEX * ESTIMATE_PX, TARGET_INDEX * ESTIMATE_PX]);
+  });
+
+  it('does nothing when there is no aim to give up', () => {
+    // Called on every wheel notch, so this is the common case by a long way.
+    act(() => api.cancelAim());
+    act(() => api.cancelAim());
+
+    expect(writes).toEqual([]);
+  });
+
+  it('gives up an aim only once', () => {
+    act(() => api.scrollItemIntoView(TARGET_INDEX, {
+      align: 'start',
+      owner: 'one-shot-navigation',
+    }));
+    act(() => api.cancelAim());
+    act(() => api.cancelAim());
+    act(() => api.cancelAim());
+
+    expect(writes).toHaveLength(2);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
new file mode 100644
index 0000000000..8bcfd76eb7
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+
+/**
+ * Item positions, against the DOM rather than against the reservation.
+ *
+ * This is the one place FlowChat depends on how the library keeps its
+ * measurement cache, and the dependency is invisible from the outside: a
+ * position read too early is a plausible number, not an error. It is also the
+ * dependency most likely to move under a version bump — `getMeasurements` is
+ * `private` in the published types, and `resizeItem` is the only public way in.
+ */
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFlowChatVirtualizer, type FlowChatVirtualizer } from './useFlowChatVirtualizer';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+/** What the estimate says before anything has been rendered. */
+const ESTIMATE_PX = 100;
+/** What the rows turn out to be, which is the whole gap this closes. */
+const REAL_PX = 40;
+
+interface Item {
+  key: string;
+}
+
+interface HarnessProps {
+  scroller: HTMLElement;
+  header: HTMLElement;
+  items: Item[];
+  onApi: (api: FlowChatVirtualizer) => void;
+}
+
+function Harness({ scroller, header, items, onApi }: HarnessProps) {
+  const scrollerRef = React.useRef<HTMLElement | null>(scroller);
+  const headerRef = React.useRef<HTMLElement | null>(header);
+  onApi(useFlowChatVirtualizer({
+    items,
+    scrollerRef,
+    headerRef,
+    getItemKey: (item: Item) => item.key,
+    estimateItemHeightPx: () => ESTIMATE_PX,
+    scrollPaddingStartPx: 0,
+    writeViewport: () => true,
+  }));
+  return null;
+}
+
+describe('useFlowChatVirtualizer measurement', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let scroller: HTMLDivElement;
+  let header: HTMLDivElement;
+  let api: FlowChatVirtualizer;
+
+  /**
+   * A row in the DOM, at a height jsdom would otherwise report as zero.
+   *
+   * `offsetHeight` and not a rect, because that is what the library's own
+   * `measureElement` reads — the border box as an integer.
+   */
+  function renderRow(index: number, heightPx: number) {
+    const element = document.createElement('div');
+    element.setAttribute('data-virtual-index', String(index));
+    Object.defineProperty(element, 'offsetHeight', { configurable: true, value: heightPx });
+    scroller.appendChild(element);
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    scroller = document.createElement('div');
+    header = document.createElement('div');
+    container.appendChild(scroller);
+
+    const items = [{ key: 'a' }, { key: 'b' }, { key: 'c' }];
+    act(() => root.render(
+      <Harness
+        scroller={scroller}
+        header={header}
+        items={items}
+        onApi={next => { api = next; }}
+      />,
+    ));
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('places items by estimate until something has measured', () => {
+    expect(api.getItemBounds(1)).toEqual({ startPx: ESTIMATE_PX, endPx: ESTIMATE_PX * 2 });
+  });
+
+  /**
+   * Measure and read without letting React in between, which is the only
+   * situation this exists for.
+   *
+   * The caller is a layout effect in the commit that prepended: the
+   * re-render `resizeItem` schedules has not run, so anything reading the
+   * `measurementsCache` field instead of the measurement pass still sees the
+   * reservation. Letting `act` flush first would hide exactly that.
+   */
+  function measureAndRead(indexes: number[]) {
+    let bounds: Array<{ startPx: number; endPx: number } | null> = [];
+    act(() => {
+      api.measureRenderedItems();
+      bounds = indexes.map(index => api.getItemBounds(index));
+    });
+    return bounds;
+  }
+
+  it('places them by what the DOM says once the rendered rows are measured', () => {
+    // The reservation was 100px a row and they are 40px, which is the shape of
+    // every history junction measured: over by more than a factor of two.
+    [0, 1, 2].forEach(index => renderRow(index, REAL_PX));
+
+    expect(measureAndRead([0, 1, 2])).toEqual([
+      { startPx: 0, endPx: REAL_PX },
+      { startPx: REAL_PX, endPx: REAL_PX * 2 },
+      { startPx: REAL_PX * 2, endPx: REAL_PX * 3 },
+    ]);
+  });
+
+  it('leaves an item that is not rendered on its estimate', () => {
+    // Only what has a height to read is read. The rest stay estimates, which is
+    // what a virtualizer is — but they move, because the item above them did.
+    renderRow(0, REAL_PX);
+
+    expect(measureAndRead([0, 1])).toEqual([
+      { startPx: 0, endPx: REAL_PX },
+      { startPx: REAL_PX, endPx: REAL_PX + ESTIMATE_PX },
+    ]);
+  });
+
+  it('ignores an element carrying no usable index', () => {
+    const stray = document.createElement('div');
+    stray.setAttribute('data-virtual-index', 'not-an-index');
+    Object.defineProperty(stray, 'offsetHeight', { configurable: true, value: 999 });
+    scroller.appendChild(stray);
+    renderRow(0, REAL_PX);
+
+    expect(measureAndRead([0])).toEqual([{ startPx: 0, endPx: REAL_PX }]);
+  });
+
+  it('reports nothing for an index the transcript has no item at', () => {
+    expect(api.getItemBounds(3)).toBeNull();
+    expect(api.getItemBounds(-1)).toBeNull();
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.test.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.test.ts
new file mode 100644
index 0000000000..daec9004d9
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+import {
+  virtualWindowPaddingPx,
+  visibleRowRange,
+  type FlowChatVirtualRow,
+} from './useFlowChatVirtualizer';
+
+/** Header above the items, which every offset below is measured past. */
+const CONTENT_START = 24;
+
+function row(index: number, startPx: number, sizePx: number): FlowChatVirtualRow {
+  return { index, key: `item-${index}`, startPx, endPx: startPx + sizePx };
+}
+
+describe('virtualWindowPaddingPx', () => {
+  it('stands in for the transcript on both sides of the window', () => {
+    // 40 items of 100px: the window holds 10..14, so 10 are above and 25 below.
+    const rows = [10, 11, 12, 13, 14].map(index => row(index, CONTENT_START + index * 100, 100));
+    expect(virtualWindowPaddingPx(rows, 4000, CONTENT_START)).toEqual({
+      paddingTopPx: 1000,
+      paddingBottomPx: 2500,
+    });
+  });
+
+  it('reserves nothing above a window that starts at the first item', () => {
+    const rows = [row(0, CONTENT_START, 100), row(1, CONTENT_START + 100, 100)];
+    expect(virtualWindowPaddingPx(rows, 4000, CONTENT_START)).toEqual({
+      paddingTopPx: 0,
+      paddingBottomPx: 3800,
+    });
+  });
+
+  it('reserves nothing below a window that ends at the last item', () => {
+    const rows = [row(38, CONTENT_START + 3800, 100), row(39, CONTENT_START + 3900, 100)];
+    expect(virtualWindowPaddingPx(rows, 4000, CONTENT_START)).toEqual({
+      paddingTopPx: 3800,
+      paddingBottomPx: 0,
+    });
+  });
+
+  it('reserves nothing at all for an empty window', () => {
+    // Nothing to be outside of. Deriving padding from a row that is not there
+    // would reserve the whole transcript on one side and nothing on the other.
+    expect(virtualWindowPaddingPx([], 4000, CONTENT_START)).toEqual({
+      paddingTopPx: 0,
+      paddingBottomPx: 0,
+    });
+  });
+
+  it('never reserves negative space while the header height is settling', () => {
+    // The header is measured, so for a frame its height can exceed the offsets
+    // computed against the previous one.
+    const rows = [row(0, 8, 100)];
+    expect(virtualWindowPaddingPx(rows, 4000, CONTENT_START)).toEqual({
+      paddingTopPx: 0,
+      paddingBottomPx: 3916,
+    });
+  });
+});
+
+describe('visibleRowRange', () => {
+  /** 21 items of 100px, all rendered — the transcript is barely one screen. */
+  const wholeTranscript = Array.from({ length: 21 }, (_, index) => (
+    row(index, CONTENT_START + index * 100, 100)
+  ));
+
+  it('answers where the reader is, not what is rendered', () => {
+    // The defect this exists for: every row is rendered wherever the viewport
+    // stands, so the rendered window reports index 0 as present forever.
+    expect(visibleRowRange(wholeTranscript, 1200, 500)).toEqual({
+      startIndex: 11,
+      endIndex: 16,
+    });
+  });
+
+  it('reports the head only when the first item is on screen', () => {
+    expect(visibleRowRange(wholeTranscript, 0, 500)).toEqual({
+      startIndex: 0,
+      endIndex: 4,
+    });
+  });
+
+  it('counts an item the viewport edge merely clips', () => {
+    // Half of item 4 and a sliver of item 9 are on screen, and both are things
+    // the reader can see.
+    expect(visibleRowRange(wholeTranscript, CONTENT_START + 450, 500)).toEqual({
+      startIndex: 4,
+      endIndex: 9,
+    });
+  });
+
+  it('excludes an item that ends exactly on the viewport top', () => {
+    expect(visibleRowRange(wholeTranscript, CONTENT_START + 500, 500)).toEqual({
+      startIndex: 5,
+      endIndex: 9,
+    });
+  });
+
+  it('reports no boundary from inside the reserved tail blank', () => {
+    // Past every item. The reader is at neither end of the loaded transcript,
+    // and answering "the last one" would page on a viewport full of nothing.
+    expect(visibleRowRange(wholeTranscript, 5000, 500)).toBeNull();
+  });
+
+  it('reports nothing when there is nothing rendered', () => {
+    expect(visibleRowRange([], 0, 500)).toBeNull();
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
new file mode 100644
index 0000000000..3348e30989
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
@@ -0,0 +1,513 @@
+/**
+ * FlowChat's virtualizer.
+ *
+ * Everything that knows which library places the items lives here. The rest of
+ * FlowChat asks for offsets in scroller coordinates and gets them back; it never
+ * sees an index space of the virtualizer's own, because there isn't one —
+ * measurements are cached against item keys, so a history prepend leaves every
+ * measured item exactly where it was.
+ *
+ * The reason this is TanStack Virtual and not react-virtuoso is one line of its
+ * measurement pass:
+ *
+ *     const size = measured ?? this.options.estimateSize(i)
+ *
+ * A per-item estimate for everything unmeasured. react-virtuoso reserves a
+ * single scalar for all of them, and this transcript alternates 38px user
+ * messages with model rounds up to 5012px, so the scroll range was wrong by an
+ * order of magnitude until an item was actually measured. Scrolling into a
+ * freshly paged block then forced a burst of measurement — stalls of 119ms and
+ * 295ms with no animation frame at all — and a correction of up to 11705px.
+ *
+ * Items are laid out in normal flow inside a padded window, not absolutely
+ * positioned. When an item inside the window changes height the browser reflows
+ * the ones below it in the same layout pass, so there is no frame where the
+ * scroll has been corrected but the items have not moved yet.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import {
+  roundViewportPx,
+  traceViewport,
+} from '@/infrastructure/diagnostics/flowChatViewportDiagnostics';
+import type { FlowChatViewportOwner } from './flowChatViewportOwnership';
+
+/** Item-count overscan. Roughly two Turns either side of the viewport. */
+const FLOW_CHAT_OVERSCAN_ITEMS = 6;
+
+/**
+ * How long the library goes on re-aiming after an aim, mirrored from it.
+ *
+ * `MAX_RECONCILE_MS` in `virtual-core`, which is a local constant inside
+ * `reconcileScroll` and so cannot be imported. Only ever read to decide that a
+ * cancel has nothing left to cancel, so being out of date by a version bump
+ * costs a redundant offset aim and nothing else.
+ */
+const VIRTUALIZER_REAIM_WINDOW_MS = 5_000;
+
+/**
+ * The virtualizer does not compensate for its own late measurements.
+ *
+ * Its rule is the right shape — adjust by *this item's* delta, and only for an
+ * item above the viewport — but it applies that delta to `scrollOffset`, which
+ * is the library's own copy of the scroll position and is refreshed only from
+ * scroll events. Every continuous writer here assigns `scrollTop` directly, and
+ * the scroll event for that assignment does not land until the following frame,
+ * so a measurement arriving in between is compensated from a position the
+ * viewport has already left. Measured on session open: nine corrections across
+ * two frames walked the viewport from 7440 back to 3556 before the follow loop
+ * wrote 7440 again.
+ *
+ * The viewport anchor is the compensator instead. It restores a relationship
+ * rather than replaying a delta, so it has no base to go stale.
+ */
+const neverAdjustScrollPositionOnItemResize = () => false;
+
+export interface FlowChatVirtualRow {
+  index: number;
+  key: string;
+  startPx: number;
+  endPx: number;
+}
+
+export interface FlowChatItemBounds {
+  startPx: number;
+  endPx: number;
+}
+
+/**
+ * The measurement pass, which the published types keep to themselves.
+ *
+ * `measurementsCache` is a public field, but it is only the place the memo
+ * behind `getMeasurements` leaves its answer — reading it returns whatever the
+ * last render put there, and a measurement arriving since then has invalidated
+ * the memo without re-running it. `getMeasurements` is `private` in the `.d.ts`
+ * although it is a plain instance field at runtime, so it is reached through
+ * this shape rather than through some other public call whose side effect
+ * happens to refresh the field.
+ */
+interface MeasuringVirtualizer {
+  getMeasurements: () => ReadonlyArray<{ start: number; end: number }>;
+}
+
+export interface UseFlowChatVirtualizerOptions<T> {
+  items: readonly T[];
+  scrollerRef: RefObject<HTMLElement | null>;
+  /**
+   * Content rendered above the items, inside the same scroller.
+   *
+   * Its height is the offset every item start is expressed against, so it is
+   * measured rather than assumed: the history paging sentinel appears and
+   * disappears inside it while the reader is scrolling.
+   */
+  headerRef: RefObject<HTMLElement | null>;
+  getItemKey: (item: T) => string;
+  estimateItemHeightPx: (item: T) => number;
+  /**
+   * Gap kept above a Turn that has been scrolled to the top of the viewport.
+   * Applied by the virtualizer itself so that its re-aim, which runs while
+   * items below the target are still measuring, keeps the same gap.
+   */
+  scrollPaddingStartPx: number;
+  /**
+   * Every write the library makes goes through this.
+   *
+   * `scrollToFn` is a first-class option, so `scrollToIndex`, `scrollToOffset`
+   * and the re-aim that follows them all arrive here — which is what makes
+   * "nothing moves the viewport unregistered" true rather than aspirational.
+   * The library's writes are a continuation of whoever asked for the aim, so
+   * they are attributed to that owner and not to the library.
+   */
+  writeViewport: (request: {
+    owner: FlowChatViewportOwner;
+    topPx: number;
+    behavior?: ScrollBehavior;
+    holdForMs?: number;
+  }) => boolean;
+}
+
+export interface FlowChatVirtualizer {
+  /** The window of items to render, in order. */
+  rows: FlowChatVirtualRow[];
+  /** Space standing in for the items above the window. */
+  paddingTopPx: number;
+  /** Space standing in for the items below the window. */
+  paddingBottomPx: number;
+  /** Ref callback for a rendered row's outermost element. */
+  measureRowElement: (element: HTMLElement | null) => void;
+  /** Where an item sits in scroller coordinates, or null if it has no place yet. */
+  getItemBounds: (index: number) => FlowChatItemBounds | null;
+  /**
+   * Bring the measurement cache level with the DOM for every rendered row.
+   *
+   * For callers that have to read a position in the same commit that changed
+   * the items, before the library's own measurement has caught up.
+   */
+  measureRenderedItems: () => void;
+  /**
+   * The items intersecting the viewport right now, read from live geometry.
+   *
+   * A callback rather than a value because it has to answer during a scroll,
+   * which moves the viewport across the rendered window without changing it.
+   */
+  getVisibleItemRange: () => FlowChatVisibleItemRange | null;
+  /**
+   * Scroll so that an item lands at the viewport's start or centre.
+   *
+   * Preferred over an offset wherever it fits: the virtualizer re-aims at the
+   * item for as long as the measurements under it keep moving, which an offset
+   * cannot do because the offset is already stale by then.
+   */
+  scrollItemIntoView: (
+    index: number,
+    options: {
+      align: 'start' | 'center';
+      behavior?: 'auto' | 'smooth';
+      /** Who the aim, and every re-aim it produces, belongs to. */
+      owner: FlowChatViewportOwner;
+      holdForMs?: number;
+    },
+  ) => void;
+  /** Scroll to an offset in scroller coordinates. */
+  scrollToOffset: (
+    offsetPx: number,
+    options: {
+      behavior?: 'auto' | 'smooth';
+      owner: FlowChatViewportOwner;
+      holdForMs?: number;
+    },
+  ) => void;
+  /**
+   * Give up an aim that is still chasing its target.
+   *
+   * For the reader taking the viewport over. The re-aim is the other half of
+   * `scrollItemIntoView` — it is what makes an aim at an item survive the
+   * measurements landing under it — and it has no idea a gesture happened.
+   *
+   * A no-op when no aim is in flight, so it is safe on every wheel notch.
+   */
+  cancelAim: () => void;
+}
+
+export interface FlowChatVisibleItemRange {
+  startIndex: number;
+  endIndex: number;
+}
+
+/**
+ * The items the reader can actually see.
+ *
+ * Deliberately not the rendered window: that carries overscan, and a transcript
+ * short enough to render whole reports the first and last item as rendered no
+ * matter where the viewport is. Anything asking "has the reader reached the end
+ * of what is loaded" needs this instead, or it is asking whether the item
+ * exists.
+ *
+ * Null when no item intersects the viewport at all, which is a real state — the
+ * reserved tail blank is below every item — and the honest answer is that the
+ * reader is at neither boundary.
+ */
+export function visibleRowRange(
+  rows: readonly FlowChatVirtualRow[],
+  scrollTopPx: number,
+  clientHeightPx: number,
+): FlowChatVisibleItemRange | null {
+  const viewportEndPx = scrollTopPx + clientHeightPx;
+  let startIndex = -1;
+  let endIndex = -1;
+  for (const row of rows) {
+    if (row.endPx <= scrollTopPx || row.startPx >= viewportEndPx) continue;
+    if (startIndex === -1) startIndex = row.index;
+    endIndex = row.index;
+  }
+  return startIndex === -1 ? null : { startIndex, endIndex };
+}
+
+export interface FlowChatVirtualWindowPadding {
+  paddingTopPx: number;
+  paddingBottomPx: number;
+}
+
+/**
+ * The space that stands in for the transcript outside the rendered window.
+ *
+ * The scroll range has to be the whole transcript's even though only a window
+ * of it exists, and this is what makes up the difference. Offsets arrive in
+ * scroller coordinates — measured from the top of the scroller, past whatever
+ * is rendered above the items — so `contentStartPx` comes back off both ends:
+ * padding is measured inside the element that holds the items.
+ *
+ * An empty window reserves nothing. There is no window to be outside of, and a
+ * padding derived from one row that is not there would be the whole transcript
+ * on one side and nothing on the other.
+ */
+export function virtualWindowPaddingPx(
+  rows: readonly FlowChatVirtualRow[],
+  totalSizePx: number,
+  contentStartPx: number,
+): FlowChatVirtualWindowPadding {
+  const first = rows[0];
+  const last = rows[rows.length - 1];
+  if (!first || !last) return { paddingTopPx: 0, paddingBottomPx: 0 };
+  return {
+    paddingTopPx: Math.max(0, first.startPx - contentStartPx),
+    paddingBottomPx: Math.max(0, totalSizePx - (last.endPx - contentStartPx)),
+  };
+}
+
+export function useFlowChatVirtualizer<T>({
+  items,
+  scrollerRef,
+  headerRef,
+  getItemKey,
+  estimateItemHeightPx,
+  scrollPaddingStartPx,
+  writeViewport,
+}: UseFlowChatVirtualizerOptions<T>): FlowChatVirtualizer {
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const writeViewportRef = useRef(writeViewport);
+  writeViewportRef.current = writeViewport;
+  /**
+   * Who the aim currently in flight belongs to.
+   *
+   * The library re-aims for as long as the measurements under its target keep
+   * moving, and those later writes arrive with no caller of ours on the stack.
+   * They are still the same request, so they are attributed to whoever made
+   * it — which is also what lets a gesture preempt a navigation that is still
+   * chasing its Turn.
+   *
+   * Until anyone has asked for an aim, the library still writes: it places the
+   * scroller against its own state on mount. That write belongs to no request
+   * of ours, so it is attributed to the lowest authority that describes it —
+   * the library putting content where it thinks it goes. Naming a navigation
+   * here instead let a 0px write on session open outrank follow-output for the
+   * whole of the opening reveal.
+   */
+  const aimOwnerRef = useRef<FlowChatViewportOwner>('layout-correction');
+  const aimHoldForMsRef = useRef<number | undefined>(undefined);
+  /**
+   * When the aim that is still being re-aimed at was made, if there is one.
+   *
+   * The library does not say when it stops, so this is how a cancel knows
+   * whether there is anything to cancel: cleared when it is given up, and read
+   * against the library's own window when it was not. Wrong only in the
+   * direction of cancelling an aim that had already finished, which writes
+   * nothing.
+   */
+  const aimStartedAtMsRef = useRef<number | null>(null);
+  const getItemKeyRef = useRef(getItemKey);
+  getItemKeyRef.current = getItemKey;
+  const estimateItemHeightRef = useRef(estimateItemHeightPx);
+  estimateItemHeightRef.current = estimateItemHeightPx;
+
+  const [contentStartPx, setContentStartPx] = useState(0);
+  useEffect(() => {
+    const header = headerRef.current;
+    if (!header) return;
+    const observer = new ResizeObserver(() => {
+      setContentStartPx(header.offsetHeight);
+    });
+    observer.observe(header, { box: 'border-box' });
+    setContentStartPx(header.offsetHeight);
+    return () => observer.disconnect();
+  }, [headerRef]);
+
+  /*
+   * Stable across renders on purpose. The virtualizer keys its measurement pass
+   * on the identity of these, so a fresh closure per render would re-measure
+   * the whole transcript every time a single streaming item changed. They read
+   * the current items through a ref instead, which is sound because a change
+   * that matters — an item added or removed — moves `count` as well.
+   */
+  const estimateSize = useCallback((index: number) => {
+    const item = itemsRef.current[index];
+    return item === undefined ? 0 : estimateItemHeightRef.current(item);
+  }, []);
+
+  const resolveItemKey = useCallback((index: number) => {
+    const item = itemsRef.current[index];
+    return item === undefined ? index : getItemKeyRef.current(item);
+  }, []);
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize,
+    getItemKey: resolveItemKey,
+    // Items carry their own index attribute already; measuring reads it back.
+    indexAttribute: 'data-virtual-index',
+    overscan: FLOW_CHAT_OVERSCAN_ITEMS,
+    scrollMargin: contentStartPx,
+    scrollPaddingStart: scrollPaddingStartPx,
+    /*
+     * The library's only way out to the DOM. Routing it through the register
+     * is what closes the gap the contract used to describe as unclosable: a
+     * write from inside the library is now a write like any other, refusable
+     * by whatever outranks the aim it came from.
+     */
+    scrollToFn: (offsetPx, { behavior }) => {
+      writeViewportRef.current({
+        owner: aimOwnerRef.current,
+        topPx: offsetPx,
+        behavior,
+        holdForMs: aimHoldForMsRef.current,
+      });
+    },
+  });
+  // An instance field rather than an option, so it is assigned here — before
+  // any measurement callback can reach `resizeItem`.
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = neverAdjustScrollPositionOnItemResize;
+
+  const virtualRows = virtualizer.getVirtualItems();
+  const totalSizePx = virtualizer.getTotalSize();
+
+  const rows = useMemo<FlowChatVirtualRow[]>(() => virtualRows.map(row => ({
+    index: row.index,
+    key: String(row.key),
+    startPx: row.start,
+    endPx: row.end,
+  })), [virtualRows]);
+
+  const { paddingTopPx, paddingBottomPx } = virtualWindowPaddingPx(
+    rows,
+    totalSizePx,
+    contentStartPx,
+  );
+
+  const measureRowElement = virtualizer.measureElement;
+
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+
+  const getVisibleItemRange = useCallback((): FlowChatVisibleItemRange | null => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return null;
+    return visibleRowRange(rowsRef.current, scroller.scrollTop, scroller.clientHeight);
+  }, [scrollerRef]);
+
+  /**
+   * Everything rendered, measured now rather than whenever the library gets to it.
+   *
+   * The library measures a row inline as its ref attaches, but only when the
+   * reader is holding still:
+   *
+   *     if ((!this.isScrolling || this.scrollState) && ...) this.resizeItem(...)
+   *
+   * History pages in exactly when they are not: the reader scrolls up into the
+   * boundary, the rows arrive in the DOM at their real heights, and the cache
+   * keeps the estimates it reserved for them. The ResizeObserver does catch
+   * them — after the layout effects of the commit that added them, which is a
+   * frame later than the one reader of these positions that cannot wait. The
+   * prepend compensation has to move the reader in the same paint as the rows
+   * that displaced them. Measured across four junctions, height reserved
+   * against scroll range actually gained: 2174/670, 2494/949, 2346/609,
+   * 2580/1917.
+   *
+   * Rendered rows only, because only they have a height to read; the rest stay
+   * estimates, which is what a virtualizer is. A row whose height has not
+   * changed costs nothing — `resizeItem` returns on a zero delta — so this is
+   * the same work the ResizeObserver was going to do, done a frame earlier.
+   */
+  const measureRenderedItems = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const elements = scroller.querySelectorAll<HTMLElement>('[data-virtual-index]');
+    for (const element of elements) {
+      const index = Number(element.getAttribute('data-virtual-index'));
+      if (!Number.isInteger(index)) continue;
+      virtualizer.resizeItem(
+        index,
+        virtualizer.options.measureElement(element, undefined, virtualizer),
+      );
+    }
+  }, [scrollerRef, virtualizer]);
+
+  const getItemBounds = useCallback((index: number): FlowChatItemBounds | null => {
+    const measurement = (virtualizer as unknown as MeasuringVirtualizer)
+      .getMeasurements()[index];
+    return measurement ? { startPx: measurement.start, endPx: measurement.end } : null;
+  }, [virtualizer]);
+
+  const scrollItemIntoView = useCallback((
+    index: number,
+    options: {
+      align: 'start' | 'center';
+      behavior?: 'auto' | 'smooth';
+      owner: FlowChatViewportOwner;
+      holdForMs?: number;
+    },
+  ) => {
+    aimOwnerRef.current = options.owner;
+    aimHoldForMsRef.current = options.holdForMs;
+    aimStartedAtMsRef.current = performance.now();
+    virtualizer.scrollToIndex(index, {
+      align: options.align,
+      behavior: options.behavior ?? 'auto',
+    });
+  }, [virtualizer]);
+
+  const scrollToOffset = useCallback((
+    offsetPx: number,
+    options: {
+      behavior?: 'auto' | 'smooth';
+      owner: FlowChatViewportOwner;
+      holdForMs?: number;
+    },
+  ) => {
+    aimOwnerRef.current = options.owner;
+    aimHoldForMsRef.current = options.holdForMs;
+    aimStartedAtMsRef.current = performance.now();
+    virtualizer.scrollToOffset(offsetPx, {
+      align: 'start',
+      behavior: options.behavior ?? 'auto',
+    });
+  }, [virtualizer]);
+
+  const cancelAim = useCallback(() => {
+    const startedAtMs = aimStartedAtMsRef.current;
+    if (startedAtMs === null) return;
+    aimStartedAtMsRef.current = null;
+    const scroller = scrollerRef.current;
+    // Already over, by the library's own clock. Aiming again would only start
+    // another reconcile to sit out.
+    if (!scroller || performance.now() - startedAtMs > VIRTUALIZER_REAIM_WINDOW_MS) return;
+    /*
+     * Aimed at the offset the scroller is already at, rather than by clearing
+     * the library's `scrollState`, which is private and would have to be
+     * reached through a cast that no version bump would warn us about.
+     *
+     * An offset aim carries no index, and the reconcile recomputes its target
+     * from the index — so with none, the target can never change again, and
+     * writing again is the only thing it does when the target changes. The
+     * write this makes goes to the position the scroller already holds, which
+     * is a no-op whether the register grants it or refuses it.
+     */
+    aimOwnerRef.current = 'layout-correction';
+    aimHoldForMsRef.current = undefined;
+    const givenUpAtPx = scroller.scrollTop;
+    virtualizer.scrollToOffset(givenUpAtPx, { align: 'start', behavior: 'auto' });
+    traceViewport({
+      location: 'virtualizer.aimCancelled',
+      message: 'an aim was given up because the reader took the viewport',
+      data: () => ({
+        givenUpAtPx: roundViewportPx(givenUpAtPx),
+        aimAgeMs: Math.round(performance.now() - startedAtMs),
+      }),
+    });
+  }, [scrollerRef, virtualizer]);
+
+  return {
+    rows,
+    paddingTopPx,
+    paddingBottomPx,
+    measureRowElement,
+    getItemBounds,
+    measureRenderedItems,
+    getVisibleItemRange,
+    scrollItemIntoView,
+    scrollToOffset,
+    cancelAim,
+  };
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
index 7b6125f8e9..80c4826e7c 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
@@ -209,6 +209,8 @@ vi.mock('react-i18next', async (importOriginal) => ({
         'usage.slowestKinds.turn': 'Turn',
         'usage.slowestLabels.modelCall': 'Turn {{turn}} model call',
         'usage.slowestLabels.modelCallUnknown': 'Model call',
+        'usage.slowestLabels.turn': 'Turn {{turn}}',
+        'usage.slowestLabels.turnUnknown': 'Turn',
         'usage.table.rowLimitSummary': 'Showing {{visible}} of {{total}} rows',
         'usage.table.showAllRows': 'Show all {{count}} rows',
         'usage.table.showFewerRows': 'Show first {{count}} rows',
@@ -306,6 +308,8 @@ const USAGE_LOCALE_REQUIRED_KEYS = [
   'usage.slowestKinds.turn',
   'usage.slowestLabels.modelCall',
   'usage.slowestLabels.modelCallUnknown',
+  'usage.slowestLabels.turn',
+  'usage.slowestLabels.turnUnknown',
 ];
 
 function getLocaleValue(messages: unknown, key: string): unknown {
@@ -1460,13 +1464,16 @@ describe('Session usage report UI components', () => {
     });
 
     expect(container.textContent).toContain('Slow spans are derived from recorded turn, model, and tool timestamps');
-    expect(container.textContent).toContain('turn 2');
+    // Built from `turnIndex: 2`, not the report's own `label: 'turn 2'`, which
+    // is hard-coded English numbered from zero.
+    expect(container.textContent).toContain('Turn 3');
+    expect(container.textContent).not.toContain('turn 2');
     expect(container.textContent).toContain('1m 35s');
     expect(container.textContent).toContain('Redacted');
     expect(container.textContent).not.toContain('secret shell command');
 
     const turnLink = container.querySelector<HTMLButtonElement>('.session-usage-panel__turn-link');
-    expect(turnLink?.textContent).toBe('turn 2');
+    expect(turnLink?.textContent).toBe('Turn 3');
     act(() => {
       turnLink?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
     });
@@ -1574,7 +1581,13 @@ describe('Session usage report UI components', () => {
       slowestTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
     });
 
-    expect(container.textContent).toContain('Turn 4 model call');
+    /*
+     * The same number the jump below asks for. This test asserted `Turn 4`
+     * here and `turnIndex: 5` there, four lines apart, and the disagreement
+     * was the defect: the report indexes Turns from zero, every other reader
+     * adds one, and only this label did not.
+     */
+    expect(container.textContent).toContain('Turn 5 model call');
     expect(container.textContent).toContain('Model call');
     expect(container.textContent).not.toContain('gpt-5.4');
     expect(container.querySelector('[data-tooltip="Model call in this turn. Model: gpt-5.4. Jump to this turn"]'))
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts
new file mode 100644
index 0000000000..8ea62b78c9
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts
@@ -0,0 +1,8 @@
+import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
+
+export const sessionUsageModalAppearanceDescriptor: AppearanceSurfaceDescriptor = {
+  id: 'session-usage-modal',
+  parts: [
+    { id: 'content' },
+  ],
+};
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
new file mode 100644
index 0000000000..0d9197629e
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
@@ -0,0 +1,24 @@
+@use '../../../component-library/styles/tokens' as *;
+
+/*
+ * The card was drawn to sit in the transcript: side margins that line it up
+ * with the message column, and a frame that separates it from the messages
+ * around it. Inside a dialog both are wrong — the margins indent it from a
+ * surface that is already inset, and the frame draws a box inside a box.
+ *
+ * Its own `padding` is kept, and becomes the dialog's inset. It is the spacing
+ * the report was drawn with, and it is equal on all four sides, which neither
+ * of the dialog's own options is: `.modal__content` ships `padding: 0`, and
+ * `contentInset` sets `padding-inline` only.
+ *
+ * Everything else inside the card is left exactly as the transcript renders
+ * it, which is the point of reusing the component rather than restyling it.
+ */
+.session-usage-modal__content {
+  .session-usage-report-card {
+    margin: 0;
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx
new file mode 100644
index 0000000000..b30331e21a
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx
@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+
+/**
+ * The two things the overlay does that the service cannot be asked about: it
+ * takes Escape away from the container, and opening the panel closes it.
+ */
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
+import { isChatPopupActive } from '../chatPopupState';
+import {
+  closeSessionUsageModal,
+  getSessionUsageModalState,
+  openSessionUsageModal,
+  showSessionUsageModalReport,
+} from './sessionUsageModalState';
+import { SessionUsageModal } from './SessionUsageModal';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+const mocks = vi.hoisted(() => ({ openSessionUsagePanel: vi.fn() }));
+vi.mock('../../services/openSessionUsageReport', () => ({
+  openSessionUsagePanel: mocks.openSessionUsagePanel,
+}));
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+
+const report = (): SessionUsageReport => ({
+  schemaVersion: 1,
+  reportId: 'usage-report-1',
+  sessionId: 'session-1',
+  generatedAt: 100,
+  workspace: { kind: 'local', pathLabel: 'D:/workspace/BitFun' },
+  scope: { kind: 'entire_session', turnCount: 3, includesSubagents: false },
+  coverage: { level: 'complete', available: [], missing: [], notes: [] },
+  time: { accounting: 'approximate', denominator: 'session_wall_time', wallTimeMs: 1000 },
+  tokens: {
+    source: 'token_usage_records',
+    inputTokens: 10,
+    outputTokens: 5,
+    totalTokens: 15,
+    cacheCoverage: 'unavailable',
+  },
+  models: [],
+  tools: [],
+  files: { scope: 'unavailable', files: [] },
+  compression: { compactionCount: 0, manualCompactionCount: 0, automaticCompactionCount: 0 },
+  errors: { totalErrors: 0, toolErrors: 0, modelErrors: 0, examples: [] },
+  slowest: [],
+  privacy: {
+    promptContentIncluded: false,
+    toolInputsIncluded: false,
+    commandOutputsIncluded: false,
+    fileContentsIncluded: false,
+    redactedFields: [],
+  },
+});
+
+describe('SessionUsageModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  function showReport() {
+    act(() => {
+      openSessionUsageModal({ sessionId: 'session-1', workspacePath: 'D:/workspace/BitFun' });
+      showSessionUsageModalReport({
+        sessionId: 'session-1',
+        report: report(),
+        markdown: '# Session Usage Report',
+      });
+    });
+  }
+
+  beforeEach(() => {
+    mocks.openSessionUsagePanel.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => root.render(<SessionUsageModal />));
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    closeSessionUsageModal();
+  });
+
+  it('renders nothing until there is a report to show', () => {
+    expect(document.querySelector('[data-testid="session-usage-modal"]')).toBeNull();
+    expect(isChatPopupActive()).toBe(false);
+  });
+
+  it('takes Escape away from the container while it is open', () => {
+    /*
+     * The container disables its own Escape shortcut while a chat popup is
+     * active. Without this latch, dismissing a report would also cancel
+     * whatever the session is running.
+     */
+    showReport();
+    expect(isChatPopupActive()).toBe(true);
+
+    act(() => closeSessionUsageModal());
+    expect(isChatPopupActive()).toBe(false);
+  });
+
+  it('gives Escape back when it goes away with the report still open', () => {
+    showReport();
+    act(() => root.unmount());
+    expect(isChatPopupActive()).toBe(false);
+    // The afterEach unmount would otherwise run against a torn-down root.
+    root = createRoot(container);
+  });
+
+  it('hands over to the panel rather than competing with it', async () => {
+    showReport();
+    const details = document.querySelector<HTMLButtonElement>(
+      '.session-usage-report-card__details-button',
+    );
+    expect(details).not.toBeNull();
+
+    await act(async () => {
+      details?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      // The panel module is imported on demand.
+      await Promise.resolve();
+    });
+
+    expect(mocks.openSessionUsagePanel).toHaveBeenCalledWith(expect.objectContaining({
+      sessionId: 'session-1',
+      workspacePath: 'D:/workspace/BitFun',
+      markdown: '# Session Usage Report',
+      expand: true,
+    }));
+    expect(getSessionUsageModalState().open).toBe(false);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx
new file mode 100644
index 0000000000..947c42b305
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx
@@ -0,0 +1,92 @@
+/**
+ * The session usage report, as a dismissable overlay.
+ *
+ * Mounted once at the app root, like `ConfirmDialogRenderer`, and driven from
+ * `sessionUsageModalState` — the request that produces a report runs several
+ * layers below any component, and the report is not owned by whichever session
+ * view happens to be mounted.
+ *
+ * The card inside is the same `SessionUsageReportCard` the transcript renders
+ * for reports written by earlier versions, including its own waiting state.
+ */
+
+import React, { useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@/component-library';
+import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
+import { setChatPopupActive } from '../chatPopupState';
+import { SessionUsageReportCard } from './SessionUsageReportCard';
+import type { SessionUsagePanelTab } from './sessionUsagePanelTypes';
+import {
+  closeSessionUsageModal,
+  getSessionUsageModalState,
+  subscribeSessionUsageModal,
+} from './sessionUsageModalState';
+import './SessionUsageModal.scss';
+
+export const SessionUsageModal: React.FC = () => {
+  const { t } = useTranslation('flow-chat');
+  const state = useSyncExternalStore(subscribeSessionUsageModal, getSessionUsageModalState);
+  const { open, isLoading, report, markdown, sessionId, workspacePath } = state;
+
+  /*
+   * The same latch the slash-command and @-mention popups use. Without it the
+   * container's global Escape shortcut fires alongside the modal's own, and
+   * dismissing a report would cancel whatever the session is running.
+   */
+  useEffect(() => {
+    if (!open) return undefined;
+    setChatPopupActive(true);
+    return () => setChatPopupActive(false);
+  }, [open]);
+
+  const handleOpenDetails = useCallback((
+    detailReport: SessionUsageReport,
+    initialTab?: SessionUsagePanelTab,
+  ) => {
+    void import('../../services/openSessionUsageReport').then(({ openSessionUsagePanel }) => {
+      openSessionUsagePanel({
+        report: detailReport,
+        markdown,
+        sessionId,
+        workspacePath,
+        initialTab,
+        title: t('usage.title'),
+        expand: true,
+      });
+      // The panel is the fuller answer to the same question, so the summary
+      // stops competing with it for the screen.
+      closeSessionUsageModal();
+    });
+  }, [markdown, sessionId, t, workspacePath]);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      isOpen
+      onClose={closeSessionUsageModal}
+      title={t('usage.title')}
+      size="large"
+      testId="session-usage-modal"
+    >
+      <div
+        className="session-usage-modal__content"
+        data-bf-component="session-usage-modal"
+        data-bf-part="content"
+      >
+        <SessionUsageReportCard
+          report={report}
+          markdown={markdown}
+          generatedAt={report?.generatedAt}
+          isLoading={isLoading}
+          onOpenDetails={report ? handleOpenDetails : undefined}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+SessionUsageModal.displayName = 'SessionUsageModal';
+
+export default SessionUsageModal;
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
index f8bb478de4..449acafac5 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
@@ -46,6 +46,7 @@ import {
   getUsageExportRedactPathsPreference,
   setUsageExportRedactPathsPreference,
   subscribeUsageExportRedactPathsPreference,
+  getDisplayTurnIndex,
 } from './usageReportUtils';
 import type { SessionUsagePanelTab } from './sessionUsagePanelTypes';
 import './SessionUsagePanel.scss';
@@ -543,10 +544,6 @@ function UsageFileTurnIndexesValue({
   );
 }
 
-function getDisplayTurnIndex(rawTurnIndex: number): number {
-  return Math.max(0, Math.trunc(rawTurnIndex)) + 1;
-}
-
 function getStableFileToolAnchorId(
   scope: SessionUsageReport['files']['scope'],
   file: SessionUsageReport['files']['files'][number]
diff --git a/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts b/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts
new file mode 100644
index 0000000000..73d90f8a14
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts
@@ -0,0 +1,107 @@
+/**
+ * The usage report, held for as long as it is on screen and no longer.
+ *
+ * It used to be a `DialogTurn` appended to `session.dialogTurns` and persisted
+ * to the backend as a `local_command` turn. A report about a session is not an
+ * event in it: the turn carried no user message and no model round, and the
+ * backend already answered "is this part of the conversation" with no in six
+ * places — `is_model_visible` and `is_transcript_visible` are both false for
+ * `LocalCommand`, and the usage report excludes its own turns from its own
+ * scope.
+ *
+ * The front end could not keep the same story straight. The turn grew
+ * `dialogTurns` and moved `at(-1)`, which is exactly what follow-output reads
+ * as a Turn arriving, so a report pinned itself to the top of the viewport. And
+ * the filter meant to keep it out of the Turn rail required
+ * `usageReportProvisional`, a flag that `commitLocalUsageReportTurn` deleted on
+ * successful persistence — so it worked until the moment persistence made it
+ * matter, and a `/usage` report then took a numbered Turn slot.
+ *
+ * Reports written by earlier versions are still on disk and still render, in
+ * `UserMessageItem`; only the writer is gone.
+ *
+ * Module state rather than React state because the caller is a service several
+ * layers below any component — the same shape as `chatPopupState.ts`.
+ */
+
+import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
+
+export interface SessionUsageModalState {
+  open: boolean;
+  sessionId: string;
+  workspacePath?: string;
+  /** The request is in flight; the card draws its own waiting state. */
+  isLoading: boolean;
+  report?: SessionUsageReport;
+  /** The rendered report, for copying and for the fallback view. */
+  markdown: string;
+}
+
+const CLOSED: SessionUsageModalState = {
+  open: false,
+  sessionId: '',
+  isLoading: false,
+  markdown: '',
+};
+
+let state: SessionUsageModalState = CLOSED;
+const listeners = new Set<() => void>();
+
+function setState(next: SessionUsageModalState) {
+  state = next;
+  listeners.forEach(listener => listener());
+}
+
+/*
+ * Identity is stable while nothing changes, which `useSyncExternalStore`
+ * requires of a snapshot — it re-reads on every render and treats a new object
+ * as a change.
+ */
+export function getSessionUsageModalState(): SessionUsageModalState {
+  return state;
+}
+
+export function subscribeSessionUsageModal(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+}
+
+/** Open on the waiting state, before the report exists. */
+export function openSessionUsageModal(params: {
+  sessionId: string;
+  workspacePath?: string;
+}): void {
+  setState({
+    open: true,
+    sessionId: params.sessionId,
+    workspacePath: params.workspacePath,
+    isLoading: true,
+    markdown: '',
+  });
+}
+
+/**
+ * Show the report that arrived.
+ *
+ * Ignored if the modal has been closed in the meantime: the reader dismissing
+ * the wait is them saying they no longer want it, and a request already in
+ * flight cannot be recalled.
+ */
+export function showSessionUsageModalReport(params: {
+  sessionId: string;
+  report: SessionUsageReport;
+  markdown: string;
+}): void {
+  if (!state.open || state.sessionId !== params.sessionId) return;
+  setState({
+    ...state,
+    isLoading: false,
+    report: params.report,
+    markdown: params.markdown,
+  });
+}
+
+export function closeSessionUsageModal(): void {
+  if (!state.open) return;
+  setState(CLOSED);
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/usageReportUtils.test.ts b/src/web-ui/src/flow_chat/components/usage/usageReportUtils.test.ts
index 770c71ca96..0a63b447c1 100644
--- a/src/web-ui/src/flow_chat/components/usage/usageReportUtils.test.ts
+++ b/src/web-ui/src/flow_chat/components/usage/usageReportUtils.test.ts
@@ -9,6 +9,7 @@ import {
   getModelHelp,
   getModelLabel,
   getSlowSpanHelp,
+  getDisplayTurnIndex,
   getSlowSpanLabel,
   getTopFiles,
 } from './usageReportUtils';
@@ -26,6 +27,8 @@ const t = (key: string, options?: Record<string, unknown>): string => {
   if (key === 'usage.help.slowestModelCall') return `Model call: ${options?.model}`;
   if (key === 'usage.slowestLabels.modelCall') return `Turn ${options?.turn} model call`;
   if (key === 'usage.slowestLabels.modelCallUnknown') return 'Model call';
+  if (key === 'usage.slowestLabels.turn') return `Turn ${options?.turn}`;
+  if (key === 'usage.slowestLabels.turnUnknown') return 'Turn';
   if (key === 'usage.redacted') return 'Redacted';
   return key;
 };
@@ -164,7 +167,46 @@ describe('usageReportUtils', () => {
       redacted: false,
       turnIndex: 3,
       modelIdSource: 'inferred_session_model',
-    }, t)).toBe('Turn 3 model call');
+    }, t)).toBe('Turn 4 model call');
+  });
+
+  it('numbers a slow span the way its own jump does', () => {
+    /*
+     * The report indexes Turns from zero and every reader adds one. This label
+     * did not, so a row read "Turn 7" while clicking it asked for Turn 8 — the
+     * Turn the rail, numbering the same way, also calls 8. Label and
+     * destination have to come from the same function, so here they do.
+     */
+    for (const rawTurnIndex of [0, 3, 7]) {
+      expect(getSlowSpanLabel({
+        label: 'gpt-5.4',
+        kind: 'model',
+        durationMs: 100,
+        redacted: false,
+        turnIndex: rawTurnIndex,
+      }, t)).toBe(`Turn ${getDisplayTurnIndex(rawTurnIndex)} model call`);
+    }
+    // And the offset itself: zero-based in, one-based out, never negative.
+    expect(getDisplayTurnIndex(0)).toBe(1);
+    expect(getDisplayTurnIndex(7)).toBe(8);
+    expect(getDisplayTurnIndex(-4)).toBe(1);
+  });
+
+  it('builds a Turn span label rather than rendering the report\'s own', () => {
+    /*
+     * The report synthesises this one itself — `format!("turn {}", turn_index)`
+     * — so it arrives hard-coded in English and numbered from zero. Rendered
+     * verbatim it read "turn 7" next to a row this file had numbered 8.
+     */
+    const span = {
+      label: 'turn 7',
+      kind: 'turn' as const,
+      durationMs: 100,
+      redacted: false,
+      turnIndex: 7,
+    };
+    expect(getSlowSpanLabel(span, t)).toBe('Turn 8');
+    expect(getSlowSpanLabel({ ...span, turnIndex: undefined }, t)).toBe('Turn');
   });
 
   it('returns model identity tooltip copy when the source is inferred or legacy', () => {
diff --git a/src/web-ui/src/flow_chat/components/usage/usageReportUtils.ts b/src/web-ui/src/flow_chat/components/usage/usageReportUtils.ts
index cff236e9b3..c430ae4253 100644
--- a/src/web-ui/src/flow_chat/components/usage/usageReportUtils.ts
+++ b/src/web-ui/src/flow_chat/components/usage/usageReportUtils.ts
@@ -201,6 +201,19 @@ export function getModelHelp(
   return undefined;
 }
 
+/**
+ * The Turn number a reader sees, from the report's own zero-based index.
+ *
+ * Exported because the report is read in two files and the offset used to be a
+ * convention rather than a function: every call site in the panel applied it,
+ * `getSlowSpanLabel` did not, and a row therefore read "Turn 7" while its own
+ * jump asked for Turn 8 — which is the Turn the rail, numbering the same way,
+ * calls 8. The label was the outlier; the navigation was right.
+ */
+export function getDisplayTurnIndex(rawTurnIndex: number): number {
+  return Math.max(0, Math.trunc(rawTurnIndex)) + 1;
+}
+
 export function getSlowSpanLabel(
   span: SessionUsageReport['slowest'][number],
   t: Translator
@@ -210,9 +223,21 @@ export function getSlowSpanLabel(
   }
   if (span.kind === 'model') {
     return typeof span.turnIndex === 'number' && Number.isFinite(span.turnIndex)
-      ? t('usage.slowestLabels.modelCall', { turn: span.turnIndex })
+      ? t('usage.slowestLabels.modelCall', { turn: getDisplayTurnIndex(span.turnIndex) })
       : t('usage.slowestLabels.modelCallUnknown');
   }
+  /*
+   * A Turn span's `label` is the one display string the report synthesises
+   * itself — `format!("turn {}", turn.turn_index)` — so it arrives hard-coded
+   * in English and numbered from zero, and rendering it put "turn 7" beside a
+   * row this file had already numbered 8. Built here instead, from the same
+   * index and the same offset as every other reader.
+   */
+  if (span.kind === 'turn') {
+    return typeof span.turnIndex === 'number' && Number.isFinite(span.turnIndex)
+      ? t('usage.slowestLabels.turn', { turn: getDisplayTurnIndex(span.turnIndex) })
+      : t('usage.slowestLabels.turnUnknown');
+  }
   return span.label;
 }
 
diff --git a/src/web-ui/src/flow_chat/events/flowchatNavigation.ts b/src/web-ui/src/flow_chat/events/flowchatNavigation.ts
index db94e9d953..987c1eee2a 100644
--- a/src/web-ui/src/flow_chat/events/flowchatNavigation.ts
+++ b/src/web-ui/src/flow_chat/events/flowchatNavigation.ts
@@ -3,11 +3,8 @@
  */
 
 export const FLOWCHAT_FOCUS_ITEM_EVENT = 'flowchat:focus-item';
-export const FLOWCHAT_PIN_TURN_TO_TOP_EVENT = 'flowchat:pin-turn-to-top';
 
 export type FlowChatFocusItemSource = 'btw-back' | 'usage-report' | 'background-activity';
-export type FlowChatPinTurnToTopSource = 'send-message' | 'usage-report';
-export type FlowChatPinTurnToTopMode = 'transient' | 'sticky-latest';
 
 export interface FlowChatFocusItemRequest {
   sessionId: string;
@@ -19,12 +16,35 @@ export interface FlowChatFocusItemRequest {
   source?: FlowChatFocusItemSource;
 }
 
-export interface FlowChatPinTurnToTopRequest {
+/**
+ * A message has been submitted to a Session from the composer.
+ *
+ * The transcript may be showing a history window the reader navigated to, and
+ * the Turn they just sent is not in it. Session growth alone cannot ask for
+ * that window to be given up — a Turn arriving from anywhere else must leave a
+ * reader where they are — so the submission says so itself.
+ */
+export const FLOWCHAT_MESSAGE_SUBMITTED_EVENT = 'flowchat:message-submitted';
+
+export interface FlowChatMessageSubmittedRequest {
+  sessionId: string;
+}
+
+/**
+ * Turns have been rolled back out of a Session, and the transcript now ends
+ * somewhere it did not a moment ago.
+ *
+ * The ledger cannot say this by itself. A shorter `dialogTurns` is also what a
+ * history window re-cut and a hydration merge look like, and there are two
+ * dozen writers of that array — so, as with a submission, the actor announces
+ * it rather than leaving the viewport to infer an action from a count.
+ */
+export const FLOWCHAT_TURNS_ROLLED_BACK_EVENT = 'flowchat:turns-rolled-back';
+
+export interface FlowChatTurnsRolledBackRequest {
   sessionId: string;
-  turnId: string;
-  behavior?: ScrollBehavior;
-  source?: FlowChatPinTurnToTopSource;
-  pinMode?: FlowChatPinTurnToTopMode;
+  /** First Turn index removed; everything from here on is gone. */
+  fromTurnIndex: number;
 }
 
 /**
diff --git a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
index 54be293991..f6d5b4da25 100644
--- a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
+++ b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
@@ -20,6 +20,10 @@ import type {
 import { createLogger } from '@/shared/utils/logger';
 import { formatContextForPrompt } from '@/shared/utils/contextPrompt';
 import { buildImagePayload } from '../utils/imagePayload';
+import {
+  FLOWCHAT_MESSAGE_SUBMITTED_EVENT,
+  type FlowChatMessageSubmittedRequest,
+} from '../events/flowchatNavigation';
 import {
   composerPresentationSessionReferences,
   type ComposerPresentation,
@@ -248,6 +252,16 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
       onExitTemplateMode?.();
 
       onSuccess?.(trimmedMessage);
+      /*
+       * The transcript may be showing a history window this Turn is not in, and
+       * only the submission knows that showing it was asked for. Announced
+       * rather than returned: the composer and the transcript are siblings, and
+       * every host that sends through this hook gets the behaviour.
+       */
+      window.dispatchEvent(new CustomEvent<FlowChatMessageSubmittedRequest>(
+        FLOWCHAT_MESSAGE_SUBMITTED_EVENT,
+        { detail: { sessionId } },
+      ));
       log.info('Message sent successfully', {
         sessionId,
         agentType: agentTypeForSend,
diff --git a/src/web-ui/src/flow_chat/hooks/useVisibleTaskInfo.ts b/src/web-ui/src/flow_chat/hooks/useVisibleTaskInfo.ts
deleted file mode 100644
index e2033a2c92..0000000000
--- a/src/web-ui/src/flow_chat/hooks/useVisibleTaskInfo.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Hook to detect the nearest Task tool item above the current viewport.
- * Used to show a sticky indicator of which Task the user is currently reading.
- *
- * - Scans virtualItems for FlowToolItem entries with toolName === 'Task'.
- * - Uses the DOM position of rendered Task items to determine which one is
- *   just above the viewport top.
- * - Returns the Task description and a callback to scroll to it.
- */
-
-import { useRef, useCallback, useState, useEffect } from 'react';
-import type { VirtualItem } from '../store/modernFlowChatStore';
-import type { FlowToolItem } from '../types/flow-chat';
-import { getEffectiveToolName, projectEffectiveToolItem } from '../utils/toolInvocationIdentity';
-
-const VIEWPORT_TOP_OFFSET_PX = 57; // Keep in sync with PINNED_TURN_VIEWPORT_OFFSET_PX.
-const TASK_TOOL_NAME = 'Task';
-
-export interface VisibleTaskInfo {
-  /** The virtual item index of the Task tool. */
-  virtualIndex: number;
-  /** The FlowItem id of the Task tool. */
-  itemId: string;
-  /** Display label for the Task (description or prompt). */
-  label: string;
-  /** The turnId this Task belongs to. */
-  turnId: string;
-}
-
-interface UseVisibleTaskInfoOptions {
-  scrollerRef: React.RefObject<HTMLElement | null>;
-  virtualItems: VirtualItem[];
-}
-
-interface UseVisibleTaskInfoReturn {
-  visibleTaskInfo: VisibleTaskInfo | null;
-  /** Scroll the list so the indicated Task is at the viewport top. */
-  scrollToTask: () => void;
-}
-
-function getTaskLabel(toolItem: FlowToolItem): string {
-  const input = projectEffectiveToolItem(toolItem).toolCall?.input;
-  if (!input) return '';
-  const desc = input.description || input.prompt || input.task || '';
-  return typeof desc === 'string' ? desc.trim() : '';
-}
-
-function findTaskVirtualItems(virtualItems: VirtualItem[]): Array<{
-  index: number;
-  itemId: string;
-  turnId: string;
-  label: string;
-}> {
-  const result: Array<{ index: number; itemId: string; turnId: string; label: string }> = [];
-
-  for (let i = 0; i < virtualItems.length; i++) {
-    const vItem = virtualItems[i];
-    if (vItem.type !== 'model-round') continue;
-
-    const round = vItem.data;
-    for (const flowItem of round.items) {
-      if (flowItem.type === 'tool' && getEffectiveToolName(flowItem as FlowToolItem) === TASK_TOOL_NAME) {
-        result.push({
-          index: i,
-          itemId: flowItem.id,
-          turnId: vItem.turnId,
-          label: getTaskLabel(flowItem as FlowToolItem),
-        });
-      }
-    }
-  }
-
-  return result;
-}
-
-export function useVisibleTaskInfo(options: UseVisibleTaskInfoOptions): UseVisibleTaskInfoReturn {
-  const { scrollerRef, virtualItems } = options;
-  const [visibleTaskInfo, setVisibleTaskInfo] = useState<VisibleTaskInfo | null>(null);
-  const lastVisibleRef = useRef<VisibleTaskInfo | null>(null);
-  const taskItemsRef = useRef(findTaskVirtualItems(virtualItems));
-
-  // Keep task items cache in sync without triggering re-renders.
-  useEffect(() => {
-    taskItemsRef.current = findTaskVirtualItems(virtualItems);
-  }, [virtualItems]);
-
-  const checkVisibleTask = useCallback(() => {
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-
-    const taskItems = taskItemsRef.current;
-    if (taskItems.length === 0) {
-      if (lastVisibleRef.current !== null) {
-        lastVisibleRef.current = null;
-        setVisibleTaskInfo(null);
-      }
-      return;
-    }
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const viewportTop = scrollerRect.top + VIEWPORT_TOP_OFFSET_PX;
-
-    // Find the last Task whose DOM element top is above the viewport top.
-    let matched: VisibleTaskInfo | null = null;
-
-    for (let i = taskItems.length - 1; i >= 0; i--) {
-      const task = taskItems[i];
-      const element = scroller.querySelector<HTMLElement>(
-        `.flowchat-flow-item[data-flow-item-id="${CSS.escape(task.itemId)}"][data-tool-name="${TASK_TOOL_NAME}"]`,
-      );
-      if (!element) continue;
-
-      const rect = element.getBoundingClientRect();
-      // Task element must be above or crossing the viewport top.
-      if (rect.top <= viewportTop) {
-        matched = {
-          virtualIndex: task.index,
-          itemId: task.itemId,
-          label: task.label,
-          turnId: task.turnId,
-        };
-        break;
-      }
-    }
-
-    if (
-      matched?.itemId !== lastVisibleRef.current?.itemId ||
-      matched?.label !== lastVisibleRef.current?.label
-    ) {
-      lastVisibleRef.current = matched;
-      setVisibleTaskInfo(matched);
-    }
-  }, [scrollerRef]);
-
-  useEffect(() => {
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-
-    let rafId: number | null = null;
-    const throttledCheck = () => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        checkVisibleTask();
-        rafId = null;
-      });
-    };
-
-    scroller.addEventListener('scroll', throttledCheck, { passive: true });
-    checkVisibleTask();
-
-    return () => {
-      scroller.removeEventListener('scroll', throttledCheck);
-      if (rafId) cancelAnimationFrame(rafId);
-    };
-  }, [checkVisibleTask, scrollerRef]);
-
-  // Reset when session / items change.
-  useEffect(() => {
-    lastVisibleRef.current = null;
-    setVisibleTaskInfo(null);
-  }, [virtualItems]);
-
-  const scrollToTask = useCallback(() => {
-    const info = lastVisibleRef.current ?? visibleTaskInfo;
-    if (!info) return;
-
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-
-    const element = scroller.querySelector<HTMLElement>(
-      `.flowchat-flow-item[data-flow-item-id="${CSS.escape(info.itemId)}"][data-tool-name="${TASK_TOOL_NAME}"]`,
-    );
-    if (!element) return;
-
-    const scrollerRect = scroller.getBoundingClientRect();
-    const elementRect = element.getBoundingClientRect();
-    const offset = elementRect.top - scrollerRect.top - VIEWPORT_TOP_OFFSET_PX + scroller.scrollTop;
-
-    scroller.scrollTo({ top: offset, behavior: 'smooth' });
-  }, [visibleTaskInfo, scrollerRef]);
-
-  return {
-    visibleTaskInfo,
-    scrollToTask,
-  };
-}
diff --git a/src/web-ui/src/flow_chat/services/FlowChatManager.ts b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
index aed4f64041..5e80f927f9 100644
--- a/src/web-ui/src/flow_chat/services/FlowChatManager.ts
+++ b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
@@ -767,11 +767,11 @@ export class FlowChatManager {
     return driverForSession(sessionId, session).compactSession(this.context, sessionId);
   }
 
-  /** Generate and insert the session usage report through its driver. */
+  /** Produce the session usage report and show it, through its driver. */
   async runSessionUsageReport(
     sessionId: string,
     uiParams: import('../session-drivers/types').UsageReportUiParams,
-  ): Promise<{ inserted: boolean }> {
+  ): Promise<{ shown: boolean }> {
     const session = this.context.flowChatStore.getState().sessions.get(sessionId);
     return driverForSession(sessionId, session).runUsageReport(this.context, sessionId, uiParams);
   }
diff --git a/src/web-ui/src/flow_chat/services/historySessionDiagnostics.test.ts b/src/web-ui/src/flow_chat/services/historySessionDiagnostics.test.ts
index a596556c42..669b6f6cdd 100644
--- a/src/web-ui/src/flow_chat/services/historySessionDiagnostics.test.ts
+++ b/src/web-ui/src/flow_chat/services/historySessionDiagnostics.test.ts
@@ -1,8 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   beginHistorySessionDiagnostics,
+  recordHistoryPagingEvent,
   recordHistorySessionDiagnosticEvent,
   resetHistorySessionDiagnosticsForTests,
+  warnHistoryPagingRefusedWithPendingTurns,
   warnHistorySessionLoadingLayerStalled,
 } from './historySessionDiagnostics';
 
@@ -15,6 +17,12 @@ vi.mock('@/shared/utils/logger', () => ({
   createLogger: () => loggerMock,
 }));
 
+const flowChatDiagnosticsMock = vi.hoisted(() => ({ trace: vi.fn() }));
+
+vi.mock('@/infrastructure/diagnostics/flowChatDiagnostics', () => ({
+  flowChatDiagnostics: flowChatDiagnosticsMock,
+}));
+
 describe('historySessionDiagnostics', () => {
   beforeEach(() => {
     loggerMock.debug.mockReset();
@@ -94,3 +102,111 @@ describe('historySessionDiagnostics', () => {
     );
   });
 });
+
+describe('history paging diagnostics', () => {
+  beforeEach(() => {
+    loggerMock.debug.mockReset();
+    loggerMock.warn.mockReset();
+    resetHistorySessionDiagnosticsForTests();
+  });
+
+  it('warns once with the paging trail when older Turns are refused', () => {
+    recordHistoryPagingEvent('paging-1', 'requested', {
+      direction: 'before',
+      resolvedTotalTurnCount: 0,
+      loadedTurnCount: 3,
+    });
+    recordHistoryPagingEvent('paging-1', 'outcome_exhausted', {
+      direction: 'before',
+      reason: 'beyond-known-total',
+      targetOrdinal: 2,
+      totalTurnCount: 0,
+    });
+
+    warnHistoryPagingRefusedWithPendingTurns('paging-1', {
+      direction: 'before',
+      reason: 'exhausted-on-unknown-total',
+      isPartial: true,
+      loadedTurnCount: 3,
+      totalTurnCount: 0,
+      targetOrdinal: 2,
+    });
+
+    expect(loggerMock.warn).toHaveBeenCalledTimes(2);
+    const [refusal, trail] = loggerMock.warn.mock.calls;
+    expect(refusal[0]).toContain('declined to page older Turns');
+    expect(refusal[1]).toMatchObject({
+      sessionId: 'paging-1',
+      reason: 'exhausted-on-unknown-total',
+      isPartial: true,
+      totalTurnCount: 0,
+    });
+    // The decisive prior step travels with the warning.
+    expect(refusal[1].lastOutcome).toBe('history_paging_outcome_exhausted');
+    expect(refusal[1].lastOutcomeData).toMatchObject({ reason: 'beyond-known-total' });
+    expect(trail[1].events.map((event: { event: string }) => event.event)).toEqual([
+      'history_paging_requested',
+      'history_paging_outcome_exhausted',
+      'history_paging_refused_with_pending_turns',
+    ]);
+  });
+
+  it('stays quiet on repeat refusals so scrolling cannot flood the log', () => {
+    const snapshot = {
+      direction: 'before',
+      reason: 'latched-exhausted-while-partial',
+      isPartial: true,
+      loadedTurnCount: 3,
+      totalTurnCount: 22,
+    };
+    warnHistoryPagingRefusedWithPendingTurns('paging-2', snapshot);
+    warnHistoryPagingRefusedWithPendingTurns('paging-2', snapshot);
+    warnHistoryPagingRefusedWithPendingTurns('paging-2', snapshot);
+
+    expect(loggerMock.warn).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps the latch per session', () => {
+    const snapshot = { direction: 'before', reason: 'latched-exhausted-while-partial' };
+    warnHistoryPagingRefusedWithPendingTurns('paging-3', snapshot);
+    warnHistoryPagingRefusedWithPendingTurns('paging-4', snapshot);
+
+    expect(loggerMock.warn).toHaveBeenCalledTimes(4);
+  });
+});
+
+describe('history paging log routing', () => {
+  beforeEach(() => {
+    loggerMock.debug.mockReset();
+    loggerMock.warn.mockReset();
+    flowChatDiagnosticsMock.trace.mockReset();
+    resetHistorySessionDiagnosticsForTests();
+  });
+
+  it('streams paging steps to flowchat.log and keeps them out of webview.log', () => {
+    recordHistoryPagingEvent('routing-1', 'requested', { direction: 'before' });
+
+    expect(loggerMock.debug).not.toHaveBeenCalled();
+    expect(flowChatDiagnosticsMock.trace).toHaveBeenCalledTimes(1);
+    const probe = flowChatDiagnosticsMock.trace.mock.calls[0][0];
+    expect(probe.hypothesis).toBe('history-paging');
+    expect(probe.location).toBe('historySessionDiagnostics.requested');
+    // Payload stays behind a thunk so a disabled channel costs nothing.
+    expect(typeof probe.data).toBe('function');
+    expect(probe.data()).toMatchObject({ sessionId: 'routing-1', direction: 'before' });
+  });
+
+  it('reports the refusal on both channels', () => {
+    warnHistoryPagingRefusedWithPendingTurns('routing-2', {
+      direction: 'before',
+      reason: 'latched-exhausted-while-partial',
+    });
+
+    // Always-on alarm, independent of the diagnostics flag.
+    expect(loggerMock.warn).toHaveBeenCalledTimes(2);
+    // Mirrored so the flowchat.log stream is self-contained.
+    expect(flowChatDiagnosticsMock.trace).toHaveBeenCalledTimes(1);
+    expect(flowChatDiagnosticsMock.trace.mock.calls[0][0].location)
+      .toBe('historySessionDiagnostics.refusedWithPendingTurns');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/services/historySessionDiagnostics.ts b/src/web-ui/src/flow_chat/services/historySessionDiagnostics.ts
index 35702d8bd5..bae7a642dc 100644
--- a/src/web-ui/src/flow_chat/services/historySessionDiagnostics.ts
+++ b/src/web-ui/src/flow_chat/services/historySessionDiagnostics.ts
@@ -1,8 +1,12 @@
 import { createLogger } from '@/shared/utils/logger';
 import { elapsedMs, nowMs, roundDurationMs } from '@/shared/utils/timing';
+import { flowChatDiagnostics } from '@/infrastructure/diagnostics/flowChatDiagnostics';
 
 const log = createLogger('HistorySessionDiagnostics');
 
+/** Probe tag for the older-history paging handshake in `flowchat.log`. */
+const HISTORY_PAGING_PROBE = 'history-paging';
+
 const RECENT_EVENT_LIMIT = 30;
 const WARN_EVENT_LIMIT = 15;
 const MAX_SESSION_DIAGNOSTICS = 50;
@@ -32,6 +36,7 @@ interface HistorySessionDiagnosticState {
   pendingHydrateStartedAtMs?: number;
   pendingHydrateData?: HistorySessionDiagnosticData;
   stalledWarned: boolean;
+  pagingRefusalWarned: boolean;
 }
 
 export interface HistorySessionLoadingStallSnapshot extends HistorySessionDiagnosticData {
@@ -44,6 +49,26 @@ export interface HistorySessionLoadingStallSnapshot extends HistorySessionDiagno
   dialogTurnCount?: number;
 }
 
+/**
+ * State captured when the transcript declines to page older Turns even though
+ * the session still reports unloaded ones.
+ *
+ * Every way this can fail — a precondition miss, a cancelled viewport
+ * preparation, a spurious `exhausted` that latches the direction off — looks
+ * identical in the UI to "there is no more history": the boundary status
+ * returns to idle and no indicator is shown. The trail is the only way to tell
+ * them apart after the fact, which matters because the failure is intermittent.
+ */
+export interface HistoryPagingRefusalSnapshot extends HistorySessionDiagnosticData {
+  direction: string;
+  reason: string;
+  isPartial?: boolean;
+  latchedExhausted?: boolean;
+  loadedTurnCount?: number;
+  totalTurnCount?: number;
+  targetOrdinal?: number;
+}
+
 const diagnosticsBySession = new Map<string, HistorySessionDiagnosticState>();
 let diagnosticSequence = 0;
 
@@ -75,6 +100,7 @@ function getOrCreateDiagnostic(sessionId: string): HistorySessionDiagnosticState
     startedAtMs: nowMs(),
     events: [],
     stalledWarned: false,
+    pagingRefusalWarned: false,
   };
   diagnosticsBySession.set(sessionId, created);
   trimOldDiagnostics();
@@ -141,6 +167,7 @@ export function beginHistorySessionDiagnostics(
     startedAtMs: nowMs(),
     events: [],
     stalledWarned: false,
+    pagingRefusalWarned: false,
   };
   diagnosticsBySession.set(sessionId, state);
   trimOldDiagnostics();
@@ -230,3 +257,78 @@ export function resetHistorySessionDiagnosticsForTests(): void {
   diagnosticsBySession.clear();
   diagnosticSequence = 0;
 }
+
+/**
+ * Record one step of the older-history paging handshake.
+ *
+ * The in-memory trail is always kept — it is what makes the refusal warning
+ * self-sufficient without asking the user to reproduce with a flag on. The full
+ * uncapped stream goes to `flowchat.log` through the FlowChat diagnostics
+ * channel, which is opt-in via `app.logging.flow_chat_diagnostics`, so it stays
+ * out of `webview.log`.
+ */
+export function recordHistoryPagingEvent(
+  sessionId: string,
+  event: string,
+  data?: HistorySessionDiagnosticData,
+): void {
+  const state = getOrCreateDiagnostic(sessionId);
+  pushEvent(state, `history_paging_${event}`, data, { logEvent: false });
+  flowChatDiagnostics.trace({
+    hypothesis: HISTORY_PAGING_PROBE,
+    location: `historySessionDiagnostics.${event}`,
+    message: `history paging ${event}`,
+    data: () => ({
+      diagnosticId: state.diagnosticId,
+      sessionId,
+      ...(data ?? {}),
+    }),
+  });
+}
+
+/**
+ * Report that older Turns were not loaded although the session still has some,
+ * together with the trail that led there. Warns once per session so a user
+ * scrolling repeatedly against a dead boundary does not flood the log.
+ */
+export function warnHistoryPagingRefusedWithPendingTurns(
+  sessionId: string,
+  snapshot: HistoryPagingRefusalSnapshot,
+): void {
+  const state = getOrCreateDiagnostic(sessionId);
+  if (state.pagingRefusalWarned) {
+    return;
+  }
+
+  state.pagingRefusalWarned = true;
+  pushEvent(state, 'history_paging_refused_with_pending_turns', snapshot, { logEvent: false });
+
+  const lastOutcome = findLastEvent(state, event => event.event.startsWith('history_paging_outcome'));
+  const lastRequest = findLastEvent(state, event => event.event.startsWith('history_paging_requested'));
+
+  log.warn('FlowChat declined to page older Turns while the session reports more', {
+    diagnosticId: state.diagnosticId,
+    sessionId,
+    ...snapshot,
+    lastOutcome: lastOutcome?.event,
+    lastOutcomeData: lastOutcome?.data,
+    lastRequestData: lastRequest?.data,
+  });
+  log.warn('FlowChat history paging trail', {
+    diagnosticId: state.diagnosticId,
+    sessionId,
+    events: summarizeEvents(state),
+  });
+  // Mirror the alarm into flowchat.log so that stream is self-contained when
+  // FlowChat diagnostics are on.
+  flowChatDiagnostics.trace({
+    hypothesis: HISTORY_PAGING_PROBE,
+    location: 'historySessionDiagnostics.refusedWithPendingTurns',
+    message: 'declined to page older Turns while the session reports more',
+    data: () => ({
+      diagnosticId: state.diagnosticId,
+      sessionId,
+      ...snapshot,
+    }),
+  });
+}
\ No newline at end of file
diff --git a/src/web-ui/src/flow_chat/services/usageReportService.test.ts b/src/web-ui/src/flow_chat/services/usageReportService.test.ts
index 4f722e3eaa..0eef2e2dfc 100644
--- a/src/web-ui/src/flow_chat/services/usageReportService.test.ts
+++ b/src/web-ui/src/flow_chat/services/usageReportService.test.ts
@@ -2,14 +2,15 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type {
   SessionUsageReport,
 } from '@/infrastructure/api/service-api/SessionAPI';
-import type { DialogTurnData } from '@/shared/types/session-history';
 import type { FlowChatState, Session } from '../types/flow-chat';
 import { flowChatStore } from '../store/FlowChatStore';
+import {
+  closeSessionUsageModal,
+  getSessionUsageModalState,
+} from '../components/usage/sessionUsageModalState';
 
 const sessionApiMocks = vi.hoisted(() => ({
   getSessionUsageReport: vi.fn(),
-  saveSessionTurn: vi.fn(),
-  recordLocalCommandTurn: vi.fn(),
 }));
 
 vi.mock('@/infrastructure/api/service-api/SessionAPI', () => ({
@@ -101,6 +102,18 @@ const usageReport = (overrides: Partial<SessionUsageReport> = {}): SessionUsageR
   ...overrides,
 });
 
+const uiParams = {
+  isProcessing: false,
+  busyMessage: 'busy',
+  noWorkspaceMessage: 'missing workspace',
+  failedTitle: 'failed',
+  unknownErrorMessage: 'unknown',
+};
+
+const transcriptOf = (sessionId = 'session-1') => (
+  flowChatStore.getState().sessions.get(sessionId)?.dialogTurns ?? []
+);
+
 describe('runUsageReportCommand', () => {
   beforeEach(() => {
     flowChatStore.setState((): FlowChatState => ({
@@ -108,79 +121,46 @@ describe('runUsageReportCommand', () => {
       activeSessionId: 'session-1',
     }));
     sessionApiMocks.getSessionUsageReport.mockReset();
-    sessionApiMocks.saveSessionTurn.mockReset();
-    sessionApiMocks.recordLocalCommandTurn.mockReset();
-    sessionApiMocks.saveSessionTurn.mockResolvedValue(undefined);
-    sessionApiMocks.recordLocalCommandTurn.mockImplementation(
-      async (turnData: DialogTurnData) => ({
-        turnId: turnData.turnId,
-        storageTurnIndex: 0,
-        totalTurnCount: 1,
-        turnCatalog: {
-          schemaVersion: 1,
-          sessionId: turnData.sessionId,
-          revision: 'catalog-1',
-          totalTurnCount: 1,
-          complete: true,
-          entries: [{
-            ordinal: 0,
-            storageTurnIndex: 0,
-            turnId: turnData.turnId,
-            previewTruncated: false,
-          }],
-        },
-      }),
-    );
   });
 
   afterEach(() => {
+    closeSessionUsageModal();
     flowChatStore.setState((): FlowChatState => ({
       sessions: new Map(),
       activeSessionId: null,
     }));
   });
 
-  it('inserts a loading usage card immediately and replaces it with the final report', async () => {
+  it('shows the waiting state immediately and replaces it with the report', async () => {
     let resolveReport: (report: SessionUsageReport) => void = () => {};
     sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(resolve => {
       resolveReport = resolve;
     }));
     const { runUsageReportCommand } = await import('./usageReportService');
 
-    const pending = runUsageReportCommand({
-      session: createSession(),
-      isProcessing: false,
-      busyMessage: 'busy',
-      noWorkspaceMessage: 'missing workspace',
-      failedTitle: 'failed',
-      unknownErrorMessage: 'unknown',
-      loadingMarkdown: 'Generating usage report...',
-    });
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
 
-    const loadingTurn = flowChatStore.getState().sessions.get('session-1')?.dialogTurns[0];
-    expect(loadingTurn?.userMessage.content).toBe('Generating usage report...');
-    expect(loadingTurn?.userMessage.metadata).toMatchObject({
-      localCommandKind: 'usage_report',
-      usageReportStatus: 'loading',
-      modelVisible: false,
+    // Open before the request resolves. The wait is the whole reason the report
+    // used to be inserted as a turn in two stages.
+    expect(getSessionUsageModalState()).toMatchObject({
+      open: true,
+      isLoading: true,
+      sessionId: 'session-1',
     });
+    expect(getSessionUsageModalState().report).toBeUndefined();
 
     resolveReport(usageReport());
     const result = await pending;
 
-    const finalTurn = flowChatStore.getState().sessions.get('session-1')?.dialogTurns[0];
-    expect(result.inserted).toBe(true);
-    expect(finalTurn?.id).toBe(loadingTurn?.id);
-    expect(finalTurn?.status).toBe('completed');
-    expect(finalTurn?.userMessage.content).toContain('# Session Usage Report');
-    expect(finalTurn?.userMessage.content).toContain('Session span');
-    expect(finalTurn?.userMessage.content).toContain('not reported');
-    expect(finalTurn?.userMessage.content).not.toContain('Wall time');
-    expect(finalTurn?.userMessage.content).not.toContain('Cached | unavailable');
-    expect(finalTurn?.userMessage.metadata).toMatchObject({
-      reportId: 'usage-report-1',
-      usageReportStatus: 'completed',
-    });
+    expect(result.shown).toBe(true);
+    const state = getSessionUsageModalState();
+    expect(state).toMatchObject({ open: true, isLoading: false });
+    expect(state.report?.reportId).toBe('usage-report-1');
+    expect(state.markdown).toContain('# Session Usage Report');
+    expect(state.markdown).toContain('Session span');
+    expect(state.markdown).toContain('not reported');
+    expect(state.markdown).not.toContain('Wall time');
+    expect(state.markdown).not.toContain('Cached | unavailable');
     expect(sessionApiMocks.getSessionUsageReport).toHaveBeenCalledWith({
       sessionId: 'session-1',
       workspacePath: 'D:/workspace/BitFun',
@@ -188,53 +168,51 @@ describe('runUsageReportCommand', () => {
       remoteSshHost: undefined,
       includeHiddenSubagents: true,
     });
-    expect(sessionApiMocks.recordLocalCommandTurn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        turnId: finalTurn?.id,
-        turnIndex: 0,
-        kind: 'local_command',
-      }),
-      'D:/workspace/BitFun',
-      undefined,
-      undefined,
-    );
-    const persistedTurn = sessionApiMocks.recordLocalCommandTurn.mock.calls[0][0] as DialogTurnData;
-    expect(persistedTurn.userMessage.metadata).not.toHaveProperty('usageReportProvisional');
-    expect(sessionApiMocks.saveSessionTurn).not.toHaveBeenCalled();
-    expect(finalTurn?.backendTurnIndex).toBe(0);
-    expect(finalTurn?.userMessage.metadata?.usageReportProvisional).toBeUndefined();
-    expect(flowChatStore.getState().sessions.get('session-1')).toMatchObject({
-      totalTurnCount: 1,
-      turnCatalog: { totalTurnCount: 1 },
-    });
   });
 
-  it('removes the provisional report when authoritative persistence fails', async () => {
+  it('leaves the transcript alone, which is the point of it', async () => {
+    /*
+     * A report about a session is not an event in it. As a turn it grew
+     * `dialogTurns` and moved `at(-1)`, which is what follow-output reads as a
+     * Turn arriving, so a report pinned itself to the top of the viewport; and
+     * once persisted it took a numbered slot in the Turn rail.
+     */
     sessionApiMocks.getSessionUsageReport.mockResolvedValue(usageReport());
-    sessionApiMocks.recordLocalCommandTurn.mockRejectedValueOnce(new Error('record failed'));
     const { runUsageReportCommand } = await import('./usageReportService');
 
-    await expect(runUsageReportCommand({
-      session: createSession(),
-      isProcessing: false,
-      busyMessage: 'busy',
-      noWorkspaceMessage: 'missing workspace',
-      failedTitle: 'failed',
-      unknownErrorMessage: 'unknown',
-      loadingMarkdown: 'Generating usage report...',
-    })).rejects.toThrow('record failed');
-
-    expect(flowChatStore.getState().sessions.get('session-1')?.dialogTurns).toEqual([]);
+    await runUsageReportCommand({ session: createSession(), ...uiParams });
+
+    expect(transcriptOf()).toEqual([]);
+  });
+
+  it('closes the waiting state when the report cannot be produced', async () => {
+    sessionApiMocks.getSessionUsageReport.mockRejectedValueOnce(new Error('report failed'));
+    const { runUsageReportCommand } = await import('./usageReportService');
+
+    await expect(runUsageReportCommand({ session: createSession(), ...uiParams }))
+      .rejects.toThrow('report failed');
+
+    // Left open it would wait forever: no second request is coming.
+    expect(getSessionUsageModalState().open).toBe(false);
+    expect(transcriptOf()).toEqual([]);
+  });
+
+  it('does not open at all when there is no workspace to report on', async () => {
+    const { runUsageReportCommand } = await import('./usageReportService');
+
+    const result = await runUsageReportCommand({
+      session: createSession({ workspacePath: undefined }),
+      ...uiParams,
+    });
+
+    expect(result).toMatchObject({ shown: false, reason: 'missing_workspace' });
+    expect(getSessionUsageModalState().open).toBe(false);
   });
 
   it('infers legacy model rows from the session model without showing raw missing-model copy', async () => {
     const session = createSession({
       config: { agentType: 'agentic', modelName: 'gpt-5.4' },
     });
-    flowChatStore.setState((): FlowChatState => ({
-      sessions: new Map([['session-1', session]]),
-      activeSessionId: 'session-1',
-    }));
     sessionApiMocks.getSessionUsageReport.mockResolvedValue(usageReport({
       models: [{
         modelId: 'unknown_model',
@@ -250,15 +228,7 @@ describe('runUsageReportCommand', () => {
     }));
     const { runUsageReportCommand } = await import('./usageReportService');
 
-    const result = await runUsageReportCommand({
-      session,
-      isProcessing: false,
-      busyMessage: 'busy',
-      noWorkspaceMessage: 'missing workspace',
-      failedTitle: 'failed',
-      unknownErrorMessage: 'unknown',
-      loadingMarkdown: 'Generating usage report...',
-    });
+    const result = await runUsageReportCommand({ session, ...uiParams });
 
     expect(result.report?.models[0]).toMatchObject({
       modelId: 'gpt-5.4',
@@ -270,15 +240,13 @@ describe('runUsageReportCommand', () => {
     });
     expect(result.report?.slowest[0].label).not.toBe('unknown_model');
 
-    const finalTurn = flowChatStore.getState().sessions.get('session-1')?.dialogTurns[0];
-    expect(finalTurn?.userMessage.metadata?.usageReport).toMatchObject({
-      models: [expect.objectContaining({
-        modelId: 'gpt-5.4',
-        modelIdSource: 'inferred_session_model',
-      })],
+    const state = getSessionUsageModalState();
+    expect(state.report?.models[0]).toMatchObject({
+      modelId: 'gpt-5.4',
+      modelIdSource: 'inferred_session_model',
     });
-    expect(finalTurn?.userMessage.content).toContain('gpt-5.4 (inferred)');
-    expect(finalTurn?.userMessage.content).not.toContain('Model not recorded');
+    expect(state.markdown).toContain('gpt-5.4 (inferred)');
+    expect(state.markdown).not.toContain('Model not recorded');
   });
 
   it('does not infer legacy model rows from opaque session model identifiers', async () => {
@@ -291,10 +259,6 @@ describe('runUsageReportCommand', () => {
       const session = createSession({
         config: { agentType: 'agentic', modelName: opaqueModelId },
       });
-      flowChatStore.setState((): FlowChatState => ({
-        sessions: new Map([['session-1', session]]),
-        activeSessionId: 'session-1',
-      }));
       sessionApiMocks.getSessionUsageReport.mockResolvedValueOnce(usageReport({
         models: [{
           modelId: 'unknown_model',
@@ -309,15 +273,7 @@ describe('runUsageReportCommand', () => {
         }],
       }));
 
-      const result = await runUsageReportCommand({
-        session,
-        isProcessing: false,
-        busyMessage: 'busy',
-        noWorkspaceMessage: 'missing workspace',
-        failedTitle: 'failed',
-        unknownErrorMessage: 'unknown',
-        loadingMarkdown: 'Generating usage report...',
-      });
+      const result = await runUsageReportCommand({ session, ...uiParams });
 
       expect(result.report?.models[0]).toMatchObject({
         modelId: 'unknown_model',
@@ -328,10 +284,11 @@ describe('runUsageReportCommand', () => {
         modelIdSource: 'legacy_missing',
       });
 
-      const finalTurn = flowChatStore.getState().sessions.get('session-1')?.dialogTurns[0];
-      expect(finalTurn?.userMessage.content).toContain('Legacy model not tracked');
-      expect(finalTurn?.userMessage.content).not.toContain(opaqueModelId);
-      expect(finalTurn?.userMessage.content).not.toContain('(inferred)');
+      const { markdown } = getSessionUsageModalState();
+      expect(markdown).toContain('Legacy model not tracked');
+      expect(markdown).not.toContain(opaqueModelId);
+      expect(markdown).not.toContain('(inferred)');
+      closeSessionUsageModal();
     }
   });
 
@@ -339,10 +296,6 @@ describe('runUsageReportCommand', () => {
     const session = createSession({
       config: { agentType: 'agentic', modelName: '019e0c07-c7bc-73f1-b1d6-5260ed215fe0' },
     });
-    flowChatStore.setState((): FlowChatState => ({
-      sessions: new Map([['session-1', session]]),
-      activeSessionId: 'session-1',
-    }));
     sessionApiMocks.getSessionUsageReport.mockResolvedValue(usageReport({
       models: [{
         modelId: 'model round 0',
@@ -358,15 +311,7 @@ describe('runUsageReportCommand', () => {
     }));
     const { runUsageReportCommand } = await import('./usageReportService');
 
-    const result = await runUsageReportCommand({
-      session,
-      isProcessing: false,
-      busyMessage: 'busy',
-      noWorkspaceMessage: 'missing workspace',
-      failedTitle: 'failed',
-      unknownErrorMessage: 'unknown',
-      loadingMarkdown: 'Generating usage report...',
-    });
+    const result = await runUsageReportCommand({ session, ...uiParams });
 
     expect(result.report?.models[0]).toMatchObject({
       modelId: 'unknown_model',
@@ -377,8 +322,9 @@ describe('runUsageReportCommand', () => {
       modelIdSource: 'legacy_missing',
     });
 
-    const finalTurn = flowChatStore.getState().sessions.get('session-1')?.dialogTurns[0];
-    expect(finalTurn?.userMessage.content).toContain('Legacy model not tracked');
-    expect(finalTurn?.userMessage.content).not.toContain('model round');
+    const { markdown } = getSessionUsageModalState();
+    expect(markdown).toContain('Legacy model not tracked');
+    expect(markdown).not.toContain('model round');
   });
 });
+
diff --git a/src/web-ui/src/flow_chat/services/usageReportService.ts b/src/web-ui/src/flow_chat/services/usageReportService.ts
index fdbd6bce33..4fc2d7a273 100644
--- a/src/web-ui/src/flow_chat/services/usageReportService.ts
+++ b/src/web-ui/src/flow_chat/services/usageReportService.ts
@@ -1,9 +1,12 @@
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
 import { notificationService } from '@/shared/notification-system';
-import type { DialogTurnData } from '@/shared/types/session-history';
-import { flowChatStore } from '../store/FlowChatStore';
-import type { DialogTurn, Session } from '../types/flow-chat';
+import {
+  closeSessionUsageModal,
+  openSessionUsageModal,
+  showSessionUsageModalReport,
+} from '../components/usage/sessionUsageModalState';
+import type { Session } from '../types/flow-chat';
 import { sessionProjectWorkspacePath } from '../utils/sessionWorkspace';
 
 const UNKNOWN_MODEL_ID = 'unknown_model';
@@ -18,54 +21,49 @@ export interface UsageReportCommandParams {
   noWorkspaceMessage: string;
   failedTitle: string;
   unknownErrorMessage: string;
-  loadingMarkdown: string;
   /**
    * Where the report comes from. Defaults to the local backend; a dispatch
    * projection supplies the target's `query` verb instead.
    */
   fetchReport?: () => Promise<SessionUsageReport>;
-  /**
-   * Persist the rendered turn to the backend session. Observer projections
-   * must not persist locally — their transcript cache captures the turn.
-   */
-  persistTurn?: boolean;
 }
 
 export interface UsageReportCommandResult {
-  inserted: boolean;
+  /** The report was produced and put on screen. */
+  shown: boolean;
   reason?: 'busy' | 'missing_workspace';
   report?: SessionUsageReport;
 }
 
+/**
+ * Produce the session usage report and show it.
+ *
+ * The report is not written into the transcript. It is a report *about* the
+ * session rather than an event in it, and the synthetic Turn it used to be read
+ * as a Turn arriving to everything downstream — see `sessionUsageModalState`.
+ */
 export async function runUsageReportCommand(
   params: UsageReportCommandParams
 ): Promise<UsageReportCommandResult> {
   if (params.isProcessing) {
     notificationService.warning(params.busyMessage);
-    return { inserted: false, reason: 'busy' };
+    return { shown: false, reason: 'busy' };
   }
 
   if (!params.session.workspacePath) {
     notificationService.error(params.noWorkspaceMessage);
-    return { inserted: false, reason: 'missing_workspace' };
+    return { shown: false, reason: 'missing_workspace' };
   }
 
-  const requestedAt = Date.now();
   const projectWorkspacePath = sessionProjectWorkspacePath(params.session);
   if (!projectWorkspacePath) {
     notificationService.error(params.noWorkspaceMessage);
-    return { inserted: false, reason: 'missing_workspace' };
+    return { shown: false, reason: 'missing_workspace' };
   }
-  const pendingReportId = `pending-${params.session.sessionId}-${requestedAt}`;
-  const pendingTurn = flowChatStore.addLocalUsageReportTurn({
+  openSessionUsageModal({
     sessionId: params.session.sessionId,
-    markdown: params.loadingMarkdown,
-    reportId: pendingReportId,
-    schemaVersion: 1,
-    generatedAt: requestedAt,
-    status: 'loading',
+    workspacePath: params.session.workspacePath,
   });
-  let provisionalTurnId = pendingTurn?.id;
 
   try {
     const rawReport = params.fetchReport
@@ -78,45 +76,15 @@ export async function runUsageReportCommand(
         includeHiddenSubagents: true,
       });
     const report = enrichUsageReportModelIdentity(rawReport, params.session);
-    const markdown = renderUsageReportMarkdown(report);
-    const turn = pendingTurn
-      ? updatePendingUsageReportTurn({
-        sessionId: params.session.sessionId,
-        dialogTurnId: pendingTurn.id,
-        markdown,
-        report,
-      })
-      : flowChatStore.addLocalUsageReportTurn({
-        sessionId: params.session.sessionId,
-        markdown,
-        reportId: report.reportId,
-        schemaVersion: report.schemaVersion,
-        generatedAt: report.generatedAt,
-        report: report as unknown as Record<string, any>,
-      });
-    provisionalTurnId = turn?.id ?? provisionalTurnId;
-
-    if (turn && params.persistTurn !== false) {
-      const recorded = await sessionAPI.recordLocalCommandTurn(
-        toPersistedLocalReportTurn(turn),
-        projectWorkspacePath,
-        params.session.remoteConnectionId,
-        params.session.remoteSshHost,
-      );
-      if (!flowChatStore.commitLocalUsageReportTurn({
-        sessionId: params.session.sessionId,
-        dialogTurnId: turn.id,
-        ...recorded,
-      })) {
-        throw new Error('Failed to reconcile persisted usage report turn');
-      }
-    }
+    showSessionUsageModalReport({
+      sessionId: params.session.sessionId,
+      report,
+      markdown: renderUsageReportMarkdown(report),
+    });
 
-    return { inserted: !!turn, report };
+    return { shown: true, report };
   } catch (error) {
-    if (provisionalTurnId) {
-      flowChatStore.deleteDialogTurn(params.session.sessionId, provisionalTurnId);
-    }
+    closeSessionUsageModal();
     notificationService.error(
       error instanceof Error ? error.message : params.unknownErrorMessage,
       {
@@ -158,42 +126,6 @@ export function enrichUsageReportModelIdentity(
   };
 }
 
-function updatePendingUsageReportTurn(params: {
-  sessionId: string;
-  dialogTurnId: string;
-  markdown: string;
-  report: SessionUsageReport;
-}): DialogTurn | null {
-  flowChatStore.updateDialogTurn(
-    params.sessionId,
-    params.dialogTurnId,
-    turn => ({
-      ...turn,
-      status: 'completed',
-      userMessage: {
-        ...turn.userMessage,
-        content: params.markdown,
-        timestamp: params.report.generatedAt,
-        metadata: {
-          ...turn.userMessage.metadata,
-          reportId: params.report.reportId,
-          schemaVersion: params.report.schemaVersion,
-          generatedAt: params.report.generatedAt,
-          usageReportStatus: 'completed',
-          usageReport: params.report as unknown as Record<string, any>,
-        },
-      },
-      startTime: params.report.generatedAt,
-      endTime: params.report.generatedAt,
-    }),
-    { touchActivity: false },
-  );
-
-  return flowChatStore.getState().sessions
-    .get(params.sessionId)
-    ?.dialogTurns.find(turn => turn.id === params.dialogTurnId) ?? null;
-}
-
 export function renderUsageReportMarkdown(report: SessionUsageReport): string {
   const lines: string[] = [
     '# Session Usage Report',
@@ -298,30 +230,6 @@ export function renderUsageReportMarkdown(report: SessionUsageReport): string {
   return lines.join('\n');
 }
 
-function toPersistedLocalReportTurn(turn: DialogTurn): DialogTurnData {
-  const metadata = { ...turn.userMessage.metadata };
-  delete metadata.usageReportProvisional;
-  return {
-    turnId: turn.id,
-    // Local commands receive their storage identity only after persistence.
-    turnIndex: 0,
-    sessionId: turn.sessionId,
-    timestamp: turn.startTime,
-    kind: 'local_command',
-    userMessage: {
-      id: turn.userMessage.id,
-      content: turn.userMessage.content,
-      timestamp: turn.userMessage.timestamp,
-      metadata,
-    },
-    modelRounds: [],
-    startTime: turn.startTime,
-    endTime: turn.endTime,
-    durationMs: 0,
-    status: 'completed',
-  };
-}
-
 function formatNumber(value: number | undefined): string {
   return value === undefined ? 'unavailable' : String(value);
 }
diff --git a/src/web-ui/src/flow_chat/session-drivers/dispatch/DispatchSessionDriver.ts b/src/web-ui/src/flow_chat/session-drivers/dispatch/DispatchSessionDriver.ts
index 3f45b39b39..be889b67cb 100644
--- a/src/web-ui/src/flow_chat/session-drivers/dispatch/DispatchSessionDriver.ts
+++ b/src/web-ui/src/flow_chat/session-drivers/dispatch/DispatchSessionDriver.ts
@@ -10,7 +10,6 @@
  */
 
 import { createLogger } from '@/shared/utils/logger';
-import { globalEventBus } from '@/infrastructure/event-bus';
 import { i18nService } from '@/infrastructure/i18n';
 import type {
   PermissionReplyKind,
@@ -32,10 +31,6 @@ import type {
   TurnTracker,
   UsageReportUiParams,
 } from '../types';
-import {
-  FLOWCHAT_PIN_TURN_TO_TOP_EVENT,
-  type FlowChatPinTurnToTopRequest,
-} from '../../events/flowchatNavigation';
 import {
   isDispatchJobTerminal,
   isNonLocalDispatchTarget,
@@ -117,20 +112,6 @@ function dispatchAttachments(
   return attachments;
 }
 
-function pinTurnToTop(sessionId: string, turnId: string): void {
-  globalEventBus.emit(
-    FLOWCHAT_PIN_TURN_TO_TOP_EVENT,
-    {
-      sessionId,
-      turnId,
-      behavior: 'auto',
-      source: 'send-message',
-      pinMode: 'sticky-latest',
-    } satisfies FlowChatPinTurnToTopRequest,
-    'DispatchSessionDriver',
-  );
-}
-
 async function appendToDispatchJob(
   sessionId: string,
   jobId: string,
@@ -230,7 +211,6 @@ async function continueDispatchJob(
     status: 'pending',
     startTime: Date.now(),
   });
-  pinTurnToTop(sessionId, optimisticTurnId);
 
   try {
     const response = await dispatchApi.continueJob(
@@ -542,7 +522,7 @@ export const dispatchSessionDriver: SessionDriver = {
     context: FlowChatContext,
     sessionId: string,
     uiParams: UsageReportUiParams,
-  ): Promise<{ inserted: boolean }> {
+  ): Promise<{ shown: boolean }> {
     const session = context.flowChatStore.getState().sessions.get(sessionId);
     if (!session) {
       throw new Error(
@@ -559,16 +539,14 @@ export const dispatchSessionDriver: SessionDriver = {
     const result = await runUsageReportCommand({
       session,
       ...uiParams,
-      // The target computes the report from its persisted session; the
-      // rendered turn stays in the projection (transcript cache), never in
-      // local session persistence.
+      // The target computes the report from its persisted session; nothing is
+      // written back, here or there.
       fetchReport: async () => {
         const response = await dispatchApi.query(jobId, 'usageReport');
         return response.report as SessionUsageReport;
       },
-      persistTurn: false,
     });
-    return { inserted: result.inserted };
+    return { shown: result.shown };
   },
 
   permissionRequestSource(sessionId: string) {
@@ -745,7 +723,6 @@ export const dispatchSessionDriver: SessionDriver = {
     };
     context.flowChatStore.addDialogTurn(sessionId, optimisticTurn);
     tracker.createdLocalTurnId = optimisticTurnId;
-    pinTurnToTop(sessionId, optimisticTurnId);
 
     const includeUncommitted = readySession.config.dispatchIncludeUncommitted ?? false;
     const baseRef = readySession.config.dispatchBaseRef?.trim() || 'HEAD';
diff --git a/src/web-ui/src/flow_chat/session-drivers/local/LocalSessionDriver.ts b/src/web-ui/src/flow_chat/session-drivers/local/LocalSessionDriver.ts
index a9dfe3858d..55b89414fb 100644
--- a/src/web-ui/src/flow_chat/session-drivers/local/LocalSessionDriver.ts
+++ b/src/web-ui/src/flow_chat/session-drivers/local/LocalSessionDriver.ts
@@ -12,7 +12,6 @@ import { agentAPI } from '@/infrastructure/api/service-api/AgentAPI';
 import { ACPClientAPI } from '@/infrastructure/api/service-api/ACPClientAPI';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import { worktreeAPI } from '@/infrastructure/api/service-api/WorktreeAPI';
-import { globalEventBus } from '@/infrastructure/event-bus';
 import { createLogger } from '@/shared/utils/logger';
 import { stateMachineManager } from '../../state-machine';
 import { SessionExecutionEvent, SessionExecutionState } from '../../state-machine/types';
@@ -27,10 +26,6 @@ import type {
   TurnTracker,
   UsageReportUiParams,
 } from '../types';
-import {
-  FLOWCHAT_PIN_TURN_TO_TOP_EVENT,
-  type FlowChatPinTurnToTopRequest,
-} from '../../events/flowchatNavigation';
 import {
   getModelMaxTokens,
   resolveReasoningPresetForSessionCreation,
@@ -246,14 +241,14 @@ export const localSessionDriver: SessionDriver = {
     context: FlowChatContext,
     sessionId: string,
     uiParams: UsageReportUiParams,
-  ): Promise<{ inserted: boolean }> {
+  ): Promise<{ shown: boolean }> {
     const session = context.flowChatStore.getState().sessions.get(sessionId);
     if (!session) {
       throw new Error(`Session does not exist: ${sessionId}`);
     }
     const { runUsageReportCommand } = await import('../../services/usageReportService');
     const result = await runUsageReportCommand({ session, ...uiParams });
-    return { inserted: result.inserted };
+    return { shown: result.shown };
   },
 
   permissionRequestSource(): 'live' {
@@ -323,15 +318,6 @@ export const localSessionDriver: SessionDriver = {
 
     context.flowChatStore.addDialogTurn(sessionId, dialogTurn);
     tracker.createdLocalTurnId = dialogTurnId;
-    const pinRequest: FlowChatPinTurnToTopRequest = {
-      sessionId,
-      turnId: dialogTurnId,
-      behavior: 'auto',
-      source: 'send-message',
-      pinMode: 'sticky-latest',
-    };
-    globalEventBus.emit(FLOWCHAT_PIN_TURN_TO_TOP_EVENT, pinRequest, 'MessageModule');
-
     const isRestoringHistoricalSession =
       readySession.isHistorical || context.pendingHistoryLoads.has(sessionId);
     if (isRestoringHistoricalSession) {
diff --git a/src/web-ui/src/flow_chat/session-drivers/types.ts b/src/web-ui/src/flow_chat/session-drivers/types.ts
index d39228b265..88e2207c88 100644
--- a/src/web-ui/src/flow_chat/session-drivers/types.ts
+++ b/src/web-ui/src/flow_chat/session-drivers/types.ts
@@ -104,7 +104,6 @@ export interface UsageReportUiParams {
   noWorkspaceMessage: string;
   failedTitle: string;
   unknownErrorMessage: string;
-  loadingMarkdown: string;
 }
 
 /**
@@ -228,15 +227,15 @@ export interface SessionDriver {
   compactSession(context: FlowChatContext, sessionId: string): Promise<void>;
 
   /**
-   * Generate and insert the session usage report turn. `uiParams` carries the
-   * caller's localized strings; the driver decides where the report data
-   * comes from and whether the rendered turn persists.
+   * Produce the session usage report and show it. `uiParams` carries the
+   * caller's localized strings; the driver decides where the report data comes
+   * from. The report is not written into the transcript.
    */
   runUsageReport(
     context: FlowChatContext,
     sessionId: string,
     uiParams: UsageReportUiParams,
-  ): Promise<{ inserted: boolean }>;
+  ): Promise<{ shown: boolean }>;
 
   /** How pending permission requests for this session are obtained. */
   permissionRequestSource(sessionId: string): PermissionRequestSource;
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
index e75c0e6eaa..9f80e58fcf 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
@@ -1181,104 +1181,6 @@ describe('FlowChatStore round attempts', () => {
   });
 });
 
-describe('FlowChatStore local usage reports', () => {
-  afterEach(() => {
-    resetStore();
-  });
-
-  it('inserts a local usage report as user-visible content', () => {
-    const session = createSession({ lastActiveAt: 1234 });
-    flowChatStore.setState(() => ({
-      sessions: new Map([[session.sessionId, session]]),
-      activeSessionId: session.sessionId,
-    }));
-
-    const turn = flowChatStore.addLocalUsageReportTurn({
-      sessionId: session.sessionId,
-      markdown: '# Session Usage Report',
-      reportId: 'usage-1',
-      schemaVersion: 1,
-      generatedAt: 10,
-    });
-
-    const stored = flowChatStore.getState().sessions.get(session.sessionId)?.dialogTurns[0];
-    expect(turn).not.toBeNull();
-    expect(stored?.kind).toBe('local_command');
-    expect(stored?.userMessage.content).toBe('# Session Usage Report');
-    expect(stored?.userMessage.metadata).toMatchObject({
-      localCommandKind: 'usage_report',
-      modelVisible: false,
-    });
-    expect(flowChatStore.getState().sessions.get(session.sessionId)?.lastActiveAt)
-      .toBe(1234);
-  });
-
-  it('can update local usage reports without touching session activity', () => {
-    const session = createSession({ lastActiveAt: 4321 });
-    flowChatStore.setState(() => ({
-      sessions: new Map([[session.sessionId, session]]),
-      activeSessionId: session.sessionId,
-    }));
-
-    const turn = flowChatStore.addLocalUsageReportTurn({
-      sessionId: session.sessionId,
-      markdown: '# Loading',
-      reportId: 'usage-1',
-      schemaVersion: 1,
-      generatedAt: 10,
-      status: 'loading',
-    });
-
-    expect(turn).not.toBeNull();
-    flowChatStore.updateDialogTurn(
-      session.sessionId,
-      turn!.id,
-      current => ({
-        ...current,
-        status: 'completed',
-        userMessage: {
-          ...current.userMessage,
-          content: '# Complete',
-        },
-      }),
-      { touchActivity: false },
-    );
-
-    const stored = flowChatStore.getState().sessions.get(session.sessionId);
-    expect(stored?.dialogTurns[0].userMessage.content).toBe('# Complete');
-    expect(stored?.lastActiveAt).toBe(4321);
-  });
-
-  it('appends repeated usage reports as separate snapshots', () => {
-    const session = createSession();
-    flowChatStore.setState(() => ({
-      sessions: new Map([[session.sessionId, session]]),
-      activeSessionId: session.sessionId,
-    }));
-
-    flowChatStore.addLocalUsageReportTurn({
-      sessionId: session.sessionId,
-      markdown: '# Usage 1',
-      reportId: 'usage-1',
-      schemaVersion: 1,
-      generatedAt: 10,
-    });
-    flowChatStore.addLocalUsageReportTurn({
-      sessionId: session.sessionId,
-      markdown: '# Usage 2',
-      reportId: 'usage-2',
-      schemaVersion: 1,
-      generatedAt: 20,
-    });
-
-    const turns = flowChatStore.getState().sessions.get(session.sessionId)?.dialogTurns || [];
-    expect(turns).toHaveLength(2);
-    expect(turns.map(turn => turn.id)).toEqual([
-      'local-usage-usage-1',
-      'local-usage-usage-2',
-    ]);
-  });
-});
 
 describe('FlowChatStore ACP context usage', () => {
   afterEach(() => {
@@ -4754,107 +4656,6 @@ describe('FlowChatStore historical session hydration state', () => {
     expect(apiMocks.loadSessionTurnWindow).toHaveBeenCalledTimes(1);
   });
 
-  it('commits a provisional usage report at its authoritative ordinal without corrupting the restored tail', async () => {
-    const catalog = createTurnCatalog(7);
-    apiMocks.restoreSessionView.mockResolvedValueOnce({
-      session: {
-        sessionId: 'history-1',
-        sessionName: 'History 1',
-        agentType: 'agentic',
-        state: 'Idle',
-        turnCount: 7,
-        createdAt: 1,
-      },
-      turns: [4, 5, 6].map(index => createPersistedTurn(index)),
-      turnCatalog: catalog,
-      contextRestoreState: 'pending',
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 7,
-    });
-    flowChatStore.setState(() => ({
-      sessions: new Map([[
-        'history-1',
-        createSession({
-          sessionId: 'history-1',
-          isHistorical: true,
-          historyState: 'metadata-only',
-        }),
-      ]]),
-      activeSessionId: 'history-1',
-    }));
-
-    await flowChatStore.loadSessionHistory('history-1', 'D:/workspace/BitFun');
-    const provisional = flowChatStore.addLocalUsageReportTurn({
-      sessionId: 'history-1',
-      markdown: '# Session Usage Report',
-      reportId: 'usage-1',
-      schemaVersion: 1,
-      generatedAt: 10,
-    });
-    expect(provisional?.backendTurnIndex).toBeUndefined();
-    expect(provisional?.userMessage.metadata?.usageReportProvisional).toBe(true);
-    expect(flowChatStore.getSessionHistoryViewState('history-1')?.loadedRanges).toMatchObject([{
-      startOrdinal: 4,
-      endOrdinalExclusive: 7,
-    }]);
-
-    const authoritativeCatalog = {
-      ...createTurnCatalog(8, 'catalog-2'),
-      entries: [
-        ...createTurnCatalog(8, 'catalog-2').entries.slice(0, 7),
-        {
-          ordinal: 7,
-          storageTurnIndex: 7,
-          turnId: provisional?.id,
-          preview: 'Session Usage Report',
-          previewTruncated: false,
-        },
-      ],
-    };
-    expect(flowChatStore.commitLocalUsageReportTurn({
-      sessionId: 'history-1',
-      dialogTurnId: provisional!.id,
-      turnId: provisional!.id,
-      storageTurnIndex: 7,
-      totalTurnCount: 8,
-      turnCatalog: authoritativeCatalog,
-    })).toBe(true);
-
-    const session = flowChatStore.getState().sessions.get('history-1');
-    expect(session).toMatchObject({
-      isPartial: true,
-      loadedTurnCount: 4,
-      totalTurnCount: 8,
-    });
-    expect(session?.dialogTurns.find(turn => turn.id === 'turn-4')?.backendTurnIndex).toBe(4);
-    const committedReport = session?.dialogTurns.find(turn => turn.id === provisional?.id);
-    expect(committedReport?.backendTurnIndex).toBe(7);
-    expect(committedReport?.userMessage.metadata).not.toHaveProperty('usageReportProvisional');
-    expect(flowChatStore.getSessionHistoryViewState('history-1')?.loadedRanges).toMatchObject([{
-      startOrdinal: 4,
-      endOrdinalExclusive: 8,
-    }]);
-
-    apiMocks.loadSessionTurnWindow.mockResolvedValueOnce({
-      status: 'ready',
-      catalogRevision: authoritativeCatalog.revision,
-      totalTurnCount: 8,
-      startOrdinal: 0,
-      endOrdinalExclusive: 4,
-      targetTurnId: 'turn-3',
-      turns: [0, 1, 2, 3].map(index => createPersistedTurn(index)),
-    });
-    await expect(flowChatStore.loadSessionTurnWindow('history-1', 3)).resolves.toMatchObject({
-      status: 'ready',
-      isCurrent: true,
-    });
-    expect(flowChatStore.activateSessionHistoryWindowFromTail('history-1', 3)?.range).toMatchObject({
-      startOrdinal: 0,
-      endOrdinalExclusive: 8,
-      mode: 'history-window',
-    });
-  });
 
   it('caches an optimistic turn after a partial restored tail at its absolute ordinal', async () => {
     const catalog = createTurnCatalog(23);
@@ -5032,52 +4833,6 @@ describe('FlowChatStore historical session hydration state', () => {
       .toMatchObject([{ startOrdinal: 20, endOrdinalExclusive: 24 }]);
   });
 
-  it('does not change projected counts when removing a provisional usage report', async () => {
-    const catalog = createTurnCatalog(23);
-    apiMocks.restoreSessionView.mockResolvedValueOnce({
-      session: {
-        sessionId: 'history-1',
-        sessionName: 'History 1',
-        agentType: 'agentic',
-        state: 'Idle',
-        turnCount: 23,
-        createdAt: 1,
-      },
-      turns: [20, 21, 22].map(index => createPersistedTurn(index)),
-      turnCatalog: catalog,
-      contextRestoreState: 'pending',
-      isPartial: true,
-      loadedTurnCount: 3,
-      totalTurnCount: 23,
-    });
-    flowChatStore.setState(() => ({
-      sessions: new Map([['history-1', createSession({
-        sessionId: 'history-1',
-        isHistorical: true,
-        historyState: 'metadata-only',
-      })]]),
-      activeSessionId: 'history-1',
-    }));
-    await flowChatStore.loadSessionHistory('history-1', 'D:/workspace/BitFun');
-    const provisional = flowChatStore.addLocalUsageReportTurn({
-      sessionId: 'history-1',
-      markdown: '# Loading',
-      reportId: 'usage-1',
-      schemaVersion: 1,
-      generatedAt: 24,
-      status: 'loading',
-    });
-
-    flowChatStore.deleteDialogTurn('history-1', provisional!.id);
-
-    expect(flowChatStore.getState().sessions.get('history-1')).toMatchObject({
-      loadedTurnCount: 3,
-      totalTurnCount: 23,
-      dialogTurns: [{ id: 'turn-20' }, { id: 'turn-21' }, { id: 'turn-22' }],
-    });
-    expect(flowChatStore.getSessionHistoryViewState('history-1')?.loadedRanges)
-      .toMatchObject([{ startOrdinal: 20, endOrdinalExclusive: 23 }]);
-  });
 
   it('invalidates cached history and catalog entries after truncating a complete session', async () => {
     const catalog = createTurnCatalog(10);
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
index 05be069b2d..199dcd7cc9 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
@@ -38,7 +38,6 @@ import { isPeerDeviceModeActive } from '@/infrastructure/peer-device/peerModeFla
 import { i18nService } from '@/infrastructure/i18n/core/I18nService';
 import type {
   DialogTurnData,
-  LocalCommandMetadata,
   SessionContextUsage,
   SessionKind,
   SessionTurnCatalog,
@@ -4873,169 +4872,6 @@ export class FlowChatStore {
     }
   }
 
-  public addLocalUsageReportTurn(params: {
-    sessionId: string;
-    markdown: string;
-    reportId: string;
-    schemaVersion: number;
-    generatedAt: number;
-    report?: Record<string, any>;
-    status?: 'loading' | 'completed';
-  }): DialogTurn | null {
-    const session = this.state.sessions.get(params.sessionId);
-    if (!session) {
-      log.warn('Session not found, cannot add local usage report', { sessionId: params.sessionId });
-      return null;
-    }
-
-    const metadata: LocalCommandMetadata = {
-      localCommandKind: 'usage_report',
-      reportId: params.reportId,
-      schemaVersion: params.schemaVersion,
-      generatedAt: params.generatedAt,
-      modelVisible: false,
-      usageReport: params.report,
-      usageReportStatus: params.status ?? 'completed',
-      usageReportProvisional: true,
-    };
-    const dialogTurn: DialogTurn = {
-      id: `local-usage-${params.reportId}`,
-      sessionId: params.sessionId,
-      kind: 'local_command',
-      userMessage: {
-        id: `local-usage-user-${params.reportId}`,
-        content: params.markdown,
-        timestamp: params.generatedAt,
-        metadata,
-      },
-      modelRounds: [],
-      status: params.status === 'loading' ? 'processing' : 'completed',
-      startTime: params.generatedAt,
-      endTime: params.generatedAt,
-    };
-
-    this.setState(prev => {
-      const currentSession = prev.sessions.get(params.sessionId);
-      if (!currentSession) return prev;
-
-      if (currentSession.dialogTurns.some(turn => turn.id === dialogTurn.id)) {
-        return prev;
-      }
-
-      const newSessions = new Map(prev.sessions);
-      newSessions.set(params.sessionId, {
-        ...currentSession,
-        dialogTurns: [...currentSession.dialogTurns, dialogTurn],
-      });
-
-      return {
-        ...prev,
-        sessions: newSessions,
-      };
-    });
-    return dialogTurn;
-  }
-
-  public commitLocalUsageReportTurn(params: {
-    sessionId: string;
-    dialogTurnId: string;
-    turnId: string;
-    storageTurnIndex: number;
-    totalTurnCount: number;
-    turnCatalog: SessionTurnCatalog;
-  }): boolean {
-    if (
-      params.turnCatalog.sessionId !== params.sessionId
-      || params.totalTurnCount !== params.turnCatalog.totalTurnCount
-      || !Number.isInteger(params.storageTurnIndex)
-      || params.storageTurnIndex < 0
-    ) {
-      log.warn('Cannot commit local usage report with an invalid authoritative catalog', {
-        sessionId: params.sessionId,
-        dialogTurnId: params.dialogTurnId,
-        turnId: params.turnId,
-        storageTurnIndex: params.storageTurnIndex,
-      });
-      return false;
-    }
-    const catalogEntry = params.turnCatalog.entries.find(entry =>
-      entry.turnId === params.turnId
-      && entry.storageTurnIndex === params.storageTurnIndex
-    );
-    if (!catalogEntry) {
-      log.warn('Cannot commit local usage report missing from authoritative catalog', {
-        sessionId: params.sessionId,
-        dialogTurnId: params.dialogTurnId,
-        turnId: params.turnId,
-        storageTurnIndex: params.storageTurnIndex,
-      });
-      return false;
-    }
-
-    let committedTurn: DialogTurn | null = null;
-    this.setState(prev => {
-      const session = prev.sessions.get(params.sessionId);
-      const provisionalTurn = session?.dialogTurns.find(turn => turn.id === params.dialogTurnId);
-      if (
-        !session
-        || !provisionalTurn
-        || provisionalTurn.id !== params.turnId
-        || !isProvisionalUsageReportTurn(provisionalTurn)
-      ) {
-        return prev;
-      }
-
-      const dialogTurns = session.dialogTurns.map(turn => {
-        if (turn.id !== params.dialogTurnId) {
-          return turn;
-        }
-        const metadata = { ...turn.userMessage.metadata } as LocalCommandMetadata;
-        delete metadata.usageReportProvisional;
-        const nextTurn: DialogTurn = {
-          ...turn,
-          storageTurnIndex: params.storageTurnIndex,
-          backendTurnIndex: params.storageTurnIndex,
-          userMessage: {
-            ...turn.userMessage,
-            metadata,
-          },
-        };
-        committedTurn = nextTurn;
-        return nextTurn;
-      });
-      const newSessions = new Map(prev.sessions);
-      newSessions.set(params.sessionId, {
-        ...session,
-        dialogTurns,
-        turnCatalog: params.turnCatalog,
-        totalTurnCount: params.totalTurnCount,
-        loadedTurnCount: canonicalSessionTurns({ dialogTurns }).length,
-      });
-      return {
-        ...prev,
-        sessions: newSessions,
-      };
-    });
-
-    if (!committedTurn) {
-      log.warn('Cannot commit missing provisional local usage report', {
-        sessionId: params.sessionId,
-        dialogTurnId: params.dialogTurnId,
-      });
-      return false;
-    }
-
-    this.ensureSessionHistoryView(params.sessionId, params.turnCatalog).catalog = params.turnCatalog;
-    this.cacheSessionLoadedTurnRange(params.sessionId, {
-      startOrdinal: catalogEntry.ordinal,
-      endOrdinalExclusive: catalogEntry.ordinal + 1,
-      turns: [committedTurn],
-      lastAccessedAt: Date.now(),
-      source: 'live',
-    }, params.turnCatalog, catalogEntry.ordinal);
-    return true;
-  }
-
   public deleteDialogTurn(sessionId: string, dialogTurnId: string): void {
     let deletedTurn: DialogTurn | undefined;
     let deletedOrdinal: number | undefined;
diff --git a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
index 589ff3dd40..13009ff98a 100644
--- a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
@@ -124,7 +124,7 @@ interface ModernFlowChatState {
  * adjacent explore groups to reduce visual noise from standalone "thinking N chars" lines.
  * Pure text rounds (like final replies) should not be collapsed.
  * Explore-capable rounds keep explore-group identity from the first render so
- * settling a streaming narrative cannot swap Virtuoso keys and remount the pane.
+ * settling a streaming narrative cannot swap virtual-item keys and remount the pane.
  * Typewriter remount risk is covered by useTypewriter(replayOnMount: false).
  */
 function hasTrailingVisibleText(round: ModelRound): boolean {
@@ -493,7 +493,7 @@ export function sessionToVirtualItems(session: Session | null): VirtualItem[] {
           groupIndex++;
         } else {
           // One round is always exactly one virtual item. Splitting a completed
-          // round into segments swaps a single Virtuoso key for N new keys,
+          // round into segments swaps a single virtual-item key for N new keys,
           // which remounts the visible assistant message and flashes the pane.
           items.push({
             type: 'model-round',
diff --git a/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.tsx b/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.tsx
index 51523a69f9..dddd50c3ec 100644
--- a/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.tsx
@@ -125,8 +125,6 @@ export const AskUserQuestionCard: React.FC<ToolCardProps> = ({
     if (shouldCompactCompleted) {
       applyExpandedState(true, false, (nextExpanded) => {
         setShowCompletedSummary(!nextExpanded);
-      }, {
-        reason: 'auto',
       });
       return;
     }
diff --git a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
index 7f9a973e55..09cca06d3c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
@@ -8,10 +8,11 @@
  * - Simple gray style, text brightens on hover
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { shouldIgnoreCardToggleClick } from '@/shared/utils/textSelection';
 import { BaseToolCard, type BaseToolCardProps } from './BaseToolCard';
 import { SmoothHeightCollapse } from '../components/modern/SmoothHeightCollapse';
+import { FLOWCHAT_COLLAPSE_DURATION_MS } from '../components/modern/flowChatCollapseMotion';
 import { ToolCardIconSlot } from './ToolCardIconSlot';
 import { ToolCardStatusIcon } from './ToolCardStatusIcon';
 import type { ToolCardHeaderAffordanceKind } from './ToolCardHeaderLayoutContext';
@@ -61,11 +62,53 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
     status === 'running' ||
     status === 'analyzing';
 
-  if (isExpanded && expandedContent) {
+  const hasExpandedContent = Boolean(expandedContent);
+  const collapseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [useExpandedShell, setUseExpandedShell] = useState(
+    Boolean(isExpanded && hasExpandedContent),
+  );
+
+  useEffect(() => {
+    if (collapseTimerRef.current !== null) {
+      clearTimeout(collapseTimerRef.current);
+      collapseTimerRef.current = null;
+    }
+
+    const isCurrentlyExpanded = Boolean(isExpanded && hasExpandedContent);
+
+    if (isCurrentlyExpanded) {
+      setUseExpandedShell(true);
+      return;
+    }
+
+    if (!hasExpandedContent) {
+      setUseExpandedShell(false);
+      return;
+    }
+
+    if (useExpandedShell && hasExpandedContent) {
+      collapseTimerRef.current = setTimeout(() => {
+        collapseTimerRef.current = null;
+        setUseExpandedShell(false);
+      }, FLOWCHAT_COLLAPSE_DURATION_MS);
+    }
+  }, [hasExpandedContent, isExpanded, useExpandedShell]);
+
+  useEffect(() => () => {
+    if (collapseTimerRef.current !== null) {
+      clearTimeout(collapseTimerRef.current);
+    }
+  }, []);
+
+  const shouldRenderExpandedShell = Boolean(
+    useExpandedShell || (isExpanded && hasExpandedContent),
+  );
+
+  if (shouldRenderExpandedShell) {
     return (
       <BaseToolCard
         status={status}
-        isExpanded
+        isExpanded={isExpanded}
         onClick={handleWrapperClick}
         className={`compact-tool-card-wrapper--expanded-card ${className}`.trim()}
         header={header}
diff --git a/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.test.tsx b/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.test.tsx
index 22788d9fc5..185657da00 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.test.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.test.tsx
@@ -253,5 +253,16 @@ describe('ExecProcessToolCardView', () => {
       vi.advanceTimersByTime(1);
     });
     expect(container.querySelector('.base-tool-card.expanded')).toBeNull();
+    expect(container.querySelector('.terminal-result-container')).not.toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(299);
+    });
+    expect(container.querySelector('.terminal-result-container')).not.toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(container.querySelector('.terminal-result-container')).toBeNull();
   });
 });
diff --git a/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.tsx b/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.tsx
index f63c1bfbed..db3e1b0fc8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ExecProcessToolCardView.tsx
@@ -11,7 +11,7 @@ import { ToolCardCopyAction, ToolCardHeaderActions } from './ToolCardHeaderActio
 import { CopyableTextPreview } from '../components/CopyableTextPreview';
 import { ToolTimeoutIndicator } from './ToolTimeoutIndicator';
 import { DotMatrixLoader } from '../../component-library';
-import { useToolCardHeightContract, type ToolCardCollapseReason } from './useToolCardHeightContract';
+import { useToolCardHeightContract } from './useToolCardHeightContract';
 import { useToolCardCompletionGracePeriod } from './useToolCardCompletionGracePeriod';
 import { formatSessionViewPreviewText } from '../utils/sessionViewPreview';
 import './ExecProcessToolCard.scss';
@@ -209,23 +209,17 @@ export const ExecProcessToolCardView: React.FC<ExecProcessToolCardViewProps> = (
       !userToggledRef.current,
   });
 
-  const applyExecExpandedState = useCallback((
-    nextExpanded: boolean,
-    options?: { reason?: ToolCardCollapseReason },
-  ) => {
+  const applyExecExpandedState = useCallback((nextExpanded: boolean) => {
     if (nextExpanded === isExpanded) {
       return;
     }
 
-    applyExpandedState(isExpanded, nextExpanded, setIsExpandedState, {
-      reason: options?.reason ?? 'manual',
-      onExpand,
-    });
+    applyExpandedState(isExpanded, nextExpanded, setIsExpandedState, { onExpand });
   }, [applyExpandedState, isExpanded, onExpand]);
 
   const toggleExpanded = useCallback(() => {
     userToggledRef.current = true;
-    applyExecExpandedState(!isExpanded, { reason: 'manual' });
+    applyExecExpandedState(!isExpanded);
   }, [applyExecExpandedState, isExpanded]);
 
   useLayoutEffect(() => {
@@ -236,7 +230,7 @@ export const ExecProcessToolCardView: React.FC<ExecProcessToolCardViewProps> = (
     const keepTailPreview = isCollapsedStatus(status) && beginCompletionPreview();
     const nextExpanded = getAutoExpandedStateForStatus(status, isLastItem, keepTailPreview);
     if (nextExpanded !== null) {
-      applyExecExpandedState(nextExpanded, { reason: 'auto' });
+      applyExecExpandedState(nextExpanded);
     }
   }, [
     applyExecExpandedState,
@@ -419,10 +413,6 @@ export const ExecProcessToolCardView: React.FC<ExecProcessToolCardViewProps> = (
   );
 
   const renderExpandedContent = () => {
-    if (!isExpanded) {
-      return null;
-    }
-
     if (status === 'completed') {
       return (
         <div data-bf-component="exec-process-tool-card" data-bf-part="result" className="terminal-result-container">
@@ -520,7 +510,10 @@ export const ExecProcessToolCardView: React.FC<ExecProcessToolCardViewProps> = (
         onClick={handleCardClick}
         className={`terminal-tool-card exec-process-tool-card${!isExpanded ? ' terminal-tool-card--compact-truncated' : ''}`}
         header={renderHeader()}
-        expandedContent={isExpanded ? renderExpandedContent() : null}
+        // Keep the previous result mounted while SmoothHeightCollapse animates
+        // from its measured height to zero. Removing it in the same render as
+        // isExpanded=false makes the collapse jump instead of animate.
+        expandedContent={renderExpandedContent()}
         errorContent={renderErrorContent()}
         isFailed={status === 'error'}
         requiresConfirmation={status === 'pending_confirmation'}
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index ffc0cf22dc..034f235963 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -2,15 +2,9 @@
  * File operation tool card - refactored based on BaseToolCard
  * Supports Write/Edit/Delete file operations
  *
- * Height-stability contract:
- * - Any state-driven height change must go through
- *   `useToolCardHeightContract.applyExpandedState(...)`.
- * - Any status/render-path change that removes expanded content without
- *   toggling local expand state must dispatch
- *   `flowchat:tool-card-collapse-intent` before the shrink happens.
- * - If preview/result variants stop sharing roughly the same visual height in
- *   the future, treat that as another shrink path and protect it explicitly
- *   instead of relying on `VirtualMessageList` fallback compensation.
+ * Card height changes reflow naturally. Expanded-state changes use
+ * `useToolCardHeightContract.applyExpandedState(...)` only to notify the virtualizer
+ * that it should remeasure the card after the transition.
  */
 
 import React, { useEffect, useCallback, useMemo, useState, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
@@ -142,7 +136,6 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
   const {
     cardRootRef,
     applyExpandedState: applyHeightContractExpandedState,
-    dispatchCollapseIntent,
     dispatchToolCardToggle,
   } = useToolCardHeightContract({
     toolId,
@@ -399,19 +392,14 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       isContentExpanded,
       nextExpanded,
       setIsContentExpanded,
-      { reason },
     );
   }, [applyHeightContractExpandedState, isContentExpanded]);
 
-  const applyErrorExpandedState = useCallback((
-    nextExpanded: boolean,
-    reason: 'manual' | 'auto',
-  ) => {
+  const applyErrorExpandedState = useCallback((nextExpanded: boolean) => {
     applyHeightContractExpandedState(
       isErrorExpanded,
       nextExpanded,
       setIsErrorExpanded,
-      { reason },
     );
   }, [applyHeightContractExpandedState, isErrorExpanded]);
 
@@ -588,13 +576,9 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       return;
     }
 
-    dispatchCollapseIntent('auto', {
-      filePath: currentFilePath || null,
-    });
     dispatchToolCardToggle();
   }, [
     currentFilePath,
-    dispatchCollapseIntent,
     dispatchToolCardToggle,
     isContentExpanded,
     status,
@@ -706,7 +690,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     }
     
     if (isFailed) {
-      applyErrorExpandedState(!isErrorExpanded, 'manual');
+      applyErrorExpandedState(!isErrorExpanded);
       return;
     }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
index 5b5d238d92..6d895af64d 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
@@ -252,9 +252,7 @@ export const MCPToolDisplay: React.FC<ToolCardProps> = ({
   // Auto-expand when MCP App UI is ready so user sees the interactive UI immediately
   useLayoutEffect(() => {
     if (mcpAppState?.html && !isExpanded) {
-      applyExpandedState(isExpanded, true, setIsExpanded, {
-        reason: 'auto',
-      });
+      applyExpandedState(isExpanded, true, setIsExpanded);
     }
   }, [applyExpandedState, isExpanded, mcpAppState?.html]);
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
index 1922502ef8..f7f3175053 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
@@ -14,6 +14,14 @@ import type { FlowThinkingItem } from '../types/flow-chat';
 import { useTypewriter } from '../hooks/useTypewriter';
 import { useReportTypewriterReveal } from '../hooks/typewriterRevealGateContext';
 import { useToolCardHeightContract } from './useToolCardHeightContract';
+import {
+  nextEasedScrollTopPx,
+  shouldEaseTailFollow,
+} from '../utils/flowChatTailEase';
+import {
+  isTailFollowDiagnosticsEnabled,
+  noteTailFollowStep,
+} from '@/infrastructure/diagnostics/flowChatTailFollowDiagnostics';
 import { Markdown } from '@/component-library/components/Markdown/Markdown';
 import './ModelThinkingDisplay.scss';
 
@@ -35,6 +43,8 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
   const shouldFollowTailRef = useRef(true);
   const tailFollowPauseVersionRef = useRef(0);
   const tailFollowUserPauseUntilMsRef = useRef(0);
+  /** Frame the follow has booked, and the sign that it is still travelling. */
+  const tailFollowFrameRef = useRef<number | null>(null);
   const touchScrollStartYRef = useRef<number | null>(null);
 
   const isActive = isStreaming || status === 'streaming';
@@ -55,9 +65,7 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
   useLayoutEffect(() => {
     if (userToggledRef.current) return;
     if (isExpanded !== shouldDefaultExpanded) {
-      applyExpandedState(isExpanded, shouldDefaultExpanded, setIsExpanded, {
-        reason: 'auto',
-      });
+      applyExpandedState(isExpanded, shouldDefaultExpanded, setIsExpanded);
     }
   }, [applyExpandedState, isExpanded, shouldDefaultExpanded]);
 
@@ -74,23 +82,74 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
     el.scrollHeight - el.scrollTop - el.clientHeight
   ), []);
 
-  const scrollThinkingToBottom = useCallback((expectedPauseVersion?: number) => {
-    const el = contentRef.current;
-    if (!el) return;
-    if (
-      expectedPauseVersion !== undefined &&
-      expectedPauseVersion !== tailFollowPauseVersionRef.current
-    ) {
-      return;
-    }
-    if (!shouldFollowTailRef.current) {
-      return;
-    }
+  const stopTailFollow = useCallback(() => {
+    if (tailFollowFrameRef.current === null) return;
+    cancelAnimationFrame(tailFollowFrameRef.current);
+    tailFollowFrameRef.current = null;
+  }, []);
+
+  /**
+   * Follow the tail across the frames it is given, rather than in one write.
+   *
+   * The card's box stops growing at its `max-height` and everything after that
+   * happens inside it, so this moves a scroll offset and no layout outside the
+   * card — which is why it can afford to run every frame where the message list
+   * cannot. Below that height it snaps, because easing there would mean easing
+   * a height and charging the virtualizer for each step.
+   *
+   * The pause version is captured for the whole run: a reader who scrolls up
+   * mid-follow bumps it, and the next frame stands down rather than dragging
+   * them back. A call arriving while a run is in flight is ignored — the run
+   * re-reads its target every frame and has already seen what prompted it.
+   */
+  const scheduleTailFollow = useCallback((expectedPauseVersion: number) => {
+    if (tailFollowFrameRef.current !== null) return;
+
+    const runFrame = () => {
+      tailFollowFrameRef.current = null;
+      const el = contentRef.current;
+      if (!el) return;
+      if (expectedPauseVersion !== tailFollowPauseVersionRef.current) return;
+      if (!shouldFollowTailRef.current) return;
 
-    el.scrollTop = el.scrollHeight;
-    shouldFollowTailRef.current = true;
+      const beforePx = el.scrollTop;
+      const targetPx = el.scrollHeight - el.clientHeight;
+      const step = shouldEaseTailFollow({
+        scrollHeightPx: el.scrollHeight,
+        clientHeightPx: el.clientHeight,
+      })
+        ? nextEasedScrollTopPx(beforePx, targetPx)
+        : { offsetPx: targetPx, outcome: 'snapped' as const };
+
+      el.scrollTop = step.offsetPx;
+      // Read back rather than taken from the step: the browser clamps to the
+      // scrollable range, and a platform without fractional scroll offsets
+      // rounds the last part of an ease away entirely. Believing the step there
+      // would book frames forever over a fraction of a pixel nobody can see.
+      const movedPx = el.scrollTop - beforePx;
+      shouldFollowTailRef.current = true;
+      if (step.outcome === 'eased' && movedPx !== 0) {
+        tailFollowFrameRef.current = requestAnimationFrame(runFrame);
+      }
+
+      if (isTailFollowDiagnosticsEnabled()) {
+        noteTailFollowStep('thinking', {
+          stepPx: movedPx,
+          lagPx: targetPx - beforePx,
+          // Below the card's `max-height` the box is still growing, so each of
+          // these steps also costs the list a re-measure. Above it, none do.
+          innerScroll: el.scrollHeight > el.clientHeight,
+          snapped: step.outcome === 'snapped',
+        });
+      }
+    };
+
+    tailFollowFrameRef.current = requestAnimationFrame(runFrame);
   }, []);
 
+  /** A follow in flight outlives neither the card nor its collapse. */
+  useEffect(() => stopTailFollow, [isExpanded, stopTailFollow]);
+
   const pauseTailFollowForUserScroll = useCallback(() => {
     shouldFollowTailRef.current = false;
     tailFollowPauseVersionRef.current += 1;
@@ -109,17 +168,14 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
       }
       const shouldScroll = shouldFollowTailRef.current || (wasNearBottom && !userPauseActive);
       if (shouldScroll) {
-        const scheduledPauseVersion = tailFollowPauseVersionRef.current;
-        requestAnimationFrame(() => {
-          scrollThinkingToBottom(scheduledPauseVersion);
-        });
+        scheduleTailFollow(tailFollowPauseVersionRef.current);
       }
     }
   }, [
     displayContent,
     getThinkingScrollGap,
     isExpanded,
-    scrollThinkingToBottom,
+    scheduleTailFollow,
   ]);
 
   useEffect(() => {
@@ -130,10 +186,7 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
 
     const observer = new ResizeObserver(() => {
       if (isActive && shouldFollowTailRef.current) {
-        const scheduledPauseVersion = tailFollowPauseVersionRef.current;
-        requestAnimationFrame(() => {
-          scrollThinkingToBottom(scheduledPauseVersion);
-        });
+        scheduleTailFollow(tailFollowPauseVersionRef.current);
       }
     });
 
@@ -144,7 +197,7 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
     }
 
     return () => observer.disconnect();
-  }, [isActive, isExpanded, scrollThinkingToBottom]);
+  }, [isActive, isExpanded, scheduleTailFollow]);
 
   // Scroll-state detection for fade gradients.
   const [scrollState, setScrollState] = useState({ hasScroll: false, atTop: true, atBottom: true });
@@ -156,7 +209,16 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
     const nextScrollState = {
       hasScroll: el.scrollHeight > el.clientHeight,
       atTop: el.scrollTop <= 5,
-      atBottom: gap <= 5,
+      /**
+       * A follow still travelling counts as being at the bottom.
+       *
+       * The bottom fade means "there is more below that you have not seen". An
+       * eased follow rides a little behind the tail by design, and what it is
+       * behind is arriving on its own — fading that would put a gradient under
+       * every streaming thinking card, which is the opposite of what the fade
+       * is for.
+       */
+      atBottom: gap <= 5 || tailFollowFrameRef.current !== null,
     };
     if (
       nextScrollState.atBottom &&
@@ -164,11 +226,19 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
     ) {
       shouldFollowTailRef.current = true;
     }
-    setScrollState({
-      hasScroll: nextScrollState.hasScroll,
-      atTop: nextScrollState.atTop,
-      atBottom: nextScrollState.atBottom,
-    });
+    // Scroll events arrive every frame once the follow is eased, and each one
+    // that changes nothing would still re-render the card.
+    setScrollState((current) => (
+      current.hasScroll === nextScrollState.hasScroll &&
+      current.atTop === nextScrollState.atTop &&
+      current.atBottom === nextScrollState.atBottom
+        ? current
+        : {
+          hasScroll: nextScrollState.hasScroll,
+          atTop: nextScrollState.atTop,
+          atBottom: nextScrollState.atBottom,
+        }
+    ));
   }, [getThinkingScrollGap]);
 
   useEffect(() => {
diff --git a/src/web-ui/src/flow_chat/tool-cards/README.md b/src/web-ui/src/flow_chat/tool-cards/README.md
index 99cb1f9e44..1fca399e6c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/README.md
+++ b/src/web-ui/src/flow_chat/tool-cards/README.md
@@ -56,44 +56,9 @@ Preferred pattern:
 
 ## Known Height Changes
 
-If a tool card performs a user-triggered or predictable collapse that can reduce
-its height near the bottom of the conversation, dispatch
-`flowchat:tool-card-collapse-intent` before the collapse happens so
-`VirtualMessageList` can pre-compensate.
-
-This applies to both:
-
-- manual expand/collapse actions
-- automatic status-driven collapses such as collapsing when a tool completes
-
-After a height-changing expand/collapse actually happens, also dispatch
-`tool-card-toggle` so `VirtualMessageList` can schedule follow-up measurement
-and reconcile the final layout.
-
-Tool cards should treat the list's bottom-spacing logic as an internal
-implementation detail. Do not couple card behavior to specific reservation or
-compensation fields inside `VirtualMessageList`; the stable contract for cards is
-still the event pair above plus `useToolCardHeightContract`.
-
-Preferred pattern:
-
-```tsx
-const cardHeight = cardRootRef.current?.getBoundingClientRect().height ?? null;
-
-if (willCollapse) {
-  window.dispatchEvent(new CustomEvent('flowchat:tool-card-collapse-intent', {
-    detail: {
-      toolId,
-      toolName,
-      cardHeight,
-      reason: 'manual', // or 'auto'
-    }
-  }));
-}
-
-setIsExpanded(nextExpanded);
-window.dispatchEvent(new CustomEvent('tool-card-toggle'));
-```
+Tool-card height changes use normal layout reflow. FlowChat does not reserve
+tail space or preserve a card header before a collapse. After a real
+expanded-state change, dispatch `tool-card-toggle` so Virtuoso can remeasure.
 
 Preferred implementation:
 
@@ -106,18 +71,11 @@ const { cardRootRef, applyExpandedState } = useToolCardHeightContract({
   toolName,
 });
 
-applyExpandedState(isExpanded, nextExpanded, setIsExpanded, {
-  reason: 'manual', // or 'auto'
-  detail: {
-    filePath,
-  },
-});
+applyExpandedState(isExpanded, nextExpanded, setIsExpanded);
 ```
 
-Attach `cardRootRef` to the visible outer box that actually collapses. Do not
-use an inner scroll container's `scrollHeight`: bounded cards can contain much
-more hidden scroll content than the layout height removed by a collapse, which
-would over-reserve FlowChat footer space.
+Attach `cardRootRef` to the visible outer box. Do not calculate or write the
+outer FlowChat viewport position from a card.
 
 Current examples:
 
@@ -129,4 +87,7 @@ Current examples:
 
 For details, read:
 
-- `src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md`
+- `src/web-ui/src/flow_chat/components/modern/AGENTS.md` — the rules, and a map
+  of which viewport document covers what. A card's height contract is in
+  `FLOWCHAT_SCROLL_STABILITY.md`; what a card may render inside a virtualized
+  row is in `FLOWCHAT_VIRTUALIZATION.md`.
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
index cc7bca2ed7..b9e6ecb130 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
@@ -299,7 +299,7 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
       /* Sync before the next commit paints so subagent wrapper + task card merge in one frame. */
       taskCollapseStateManager.setCollapsed(toolItem.id, !nextExpanded);
     }
-    applyExpandedState(isExpanded, nextExpanded, setIsExpanded, { reason });
+    applyExpandedState(isExpanded, nextExpanded, setIsExpanded);
   }, [applyExpandedState, isExpanded, toolItem.id]);
 
   useLayoutEffect(() => {
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index c4918e2555..a0c95b46aa 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -22,7 +22,7 @@ import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
 import { DotMatrixLoader, IconButton } from '../../component-library';
 import { LazyTerminalOutputRenderer } from '@/tools/terminal/components/LazyTerminalOutputRenderer';
 import { createLogger } from '@/shared/utils/logger';
-import { useToolCardHeightContract, type ToolCardCollapseReason } from './useToolCardHeightContract';
+import { useToolCardHeightContract } from './useToolCardHeightContract';
 import { useToolCardCompletionGracePeriod } from './useToolCardCompletionGracePeriod';
 import { getTerminalViewState, type TerminalViewState } from './terminalToolCardState';
 import { ToolTimeoutIndicator } from './ToolTimeoutIndicator';
@@ -303,23 +303,17 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
       isExpanded &&
       !userToggledRef.current,
   });
-  const applyTerminalExpandedState = useCallback((
-    nextExpanded: boolean,
-    options?: { reason?: ToolCardCollapseReason },
-  ) => {
+  const applyTerminalExpandedState = useCallback((nextExpanded: boolean) => {
     if (nextExpanded === isExpanded) {
       return;
     }
 
-    applyExpandedState(isExpanded, nextExpanded, setIsExpandedState, {
-      reason: options?.reason ?? 'manual',
-      onExpand,
-    });
+    applyExpandedState(isExpanded, nextExpanded, setIsExpandedState, { onExpand });
   }, [applyExpandedState, isExpanded, onExpand]);
 
   const toggleExpanded = useCallback(() => {
     userToggledRef.current = true;
-    applyTerminalExpandedState(!isExpanded, { reason: 'manual' });
+    applyTerminalExpandedState(!isExpanded);
   }, [applyTerminalExpandedState, isExpanded]);
 
   const [interruptRequested, setInterruptRequested] = useState(false);
@@ -340,7 +334,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
     const keepTailPreview = isCollapsedTerminalStatus(status) && beginCompletionPreview();
     const nextExpanded = getAutoExpandedStateForTerminalStatus(status, isLastItem, keepTailPreview);
     if (nextExpanded !== null) {
-      applyTerminalExpandedState(nextExpanded, { reason: 'auto' });
+      applyTerminalExpandedState(nextExpanded);
     }
   }, [
     applyTerminalExpandedState,
diff --git a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.test.tsx b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.test.tsx
index 1d17199494..7f44c366b8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.test.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.test.tsx
@@ -8,6 +8,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { FlowToolItem, ToolCardConfig } from '../types/flow-chat';
 import { createTodoRenderItems } from './todoRenderItems';
 import { TodoWriteDisplay } from './TodoWriteDisplay';
+import { FLOWCHAT_COLLAPSE_DURATION_MS } from '../components/modern/flowChatCollapseMotion';
 
 vi.mock('react-i18next', async (importOriginal) => ({
   ...await importOriginal<typeof import('react-i18next')>(),
@@ -93,38 +94,26 @@ describe('TodoWriteDisplay automatic collapse', () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    vi.useRealTimers();
     vi.restoreAllMocks();
   });
 
-  it('publishes an auto collapse intent before removing expanded todos', () => {
-    let receivedDetail: Record<string, unknown> | null = null;
-    let hadExpandedBodyWhenIntentFired = false;
-    const handleIntent = (event: Event) => {
-      receivedDetail = (event as CustomEvent<Record<string, unknown>>).detail;
-      hadExpandedBodyWhenIntentFired = Boolean(container.querySelector('.todo-expanded-body'));
-    };
-    window.addEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-
-    try {
-      act(() => {
-        root.render(<TodoWriteDisplay toolItem={createTodoWriteItem('pending')} config={config} />);
-      });
-      expect(container.querySelector('.todo-expanded-body')).not.toBeNull();
-
-      act(() => {
-        root.render(<TodoWriteDisplay toolItem={createTodoWriteItem('in_progress')} config={config} />);
-      });
-
-      expect(hadExpandedBodyWhenIntentFired).toBe(true);
-      expect(receivedDetail).toMatchObject({
-        toolId: 'todo-tool-a',
-        toolName: 'TodoWrite',
-        cardHeight: 320,
-        reason: 'auto',
-      });
-      expect(container.querySelector('.todo-expanded-body')).toBeNull();
-    } finally {
-      window.removeEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-    }
+  it('lets completed todo content collapse through normal layout state', () => {
+    vi.useFakeTimers();
+    act(() => {
+      root.render(<TodoWriteDisplay toolItem={createTodoWriteItem('pending')} config={config} />);
+    });
+    expect(container.querySelector('.todo-expanded-body')).not.toBeNull();
+
+    act(() => {
+      root.render(<TodoWriteDisplay toolItem={createTodoWriteItem('in_progress')} config={config} />);
+    });
+
+    expect(container.querySelector('.todo-expanded-body')).not.toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(FLOWCHAT_COLLAPSE_DURATION_MS);
+    });
+    expect(container.querySelector('.todo-expanded-body')).toBeNull();
   });
 });
diff --git a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
index 874e67067f..9b737aaf02 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
@@ -89,7 +89,6 @@ export const TodoWriteDisplay: React.FC<ToolCardProps> = ({
       automaticExpanded,
       desiredAutomaticExpanded,
       setAutomaticExpanded,
-      { reason: 'auto' },
     );
   }, [
     applyExpandedState,
diff --git a/src/web-ui/src/flow_chat/tool-cards/ViewImageToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/ViewImageToolCard.tsx
index f2d20fd5c1..8a3e2974cd 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ViewImageToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ViewImageToolCard.tsx
@@ -69,7 +69,7 @@ export const ViewImageToolCard: React.FC<ToolCardProps> = ({ toolItem, onExpand
   useLayoutEffect(() => {
     if (!source || didAutoExpand.current) return;
     didAutoExpand.current = true;
-    applyExpandedState(isExpanded, true, setIsExpanded, { reason: 'auto' });
+    applyExpandedState(isExpanded, true, setIsExpanded);
   }, [applyExpandedState, isExpanded, source]);
 
   useEffect(() => {
diff --git a/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.test.tsx b/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.test.tsx
index a2750a17b6..14d6759261 100644
--- a/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.test.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.test.tsx
@@ -1,72 +1,22 @@
 // @vitest-environment jsdom
 
-import React, { useLayoutEffect } from 'react';
-import { act } from 'react';
+import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useToolCardHeightContract } from './useToolCardHeightContract';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-function Harness({ height, collapse }: { height: number; collapse: boolean }) {
-  const { cardRootRef, dispatchCollapseIntent } = useToolCardHeightContract({
-    toolId: 'tool-a',
+function Harness({ expanded }: { expanded: boolean }) {
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const { cardRootRef, applyExpandedState } = useToolCardHeightContract({
+    toolId: 'tool-1',
     toolName: 'Write',
   });
-
-  useLayoutEffect(() => {
-    if (collapse) {
-      dispatchCollapseIntent('auto');
-    }
-  }, [collapse, dispatchCollapseIntent]);
-
-  return <div ref={cardRootRef} data-height={height} />;
-}
-
-function CustomAnchorHarness({ collapse }: { collapse: boolean }) {
-  const anchorRef = React.useRef<HTMLDivElement>(null);
-  const { cardRootRef, dispatchCollapseIntent } = useToolCardHeightContract({
-    toolId: 'thinking-a',
-    toolName: 'thinking',
-    getAnchorElement: () => anchorRef.current,
-  });
-
-  useLayoutEffect(() => {
-    if (collapse) {
-      dispatchCollapseIntent('auto');
-    }
-  }, [collapse, dispatchCollapseIntent]);
-
-  return (
-    <div ref={anchorRef} data-testid="custom-anchor">
-      <div ref={cardRootRef} data-height="240" />
-    </div>
-  );
-}
-
-function BoundedScrollableHarness({ collapse }: { collapse: boolean }) {
-  const contentRef = React.useRef<HTMLDivElement>(null);
-  const { cardRootRef, dispatchCollapseIntent } = useToolCardHeightContract({
-    toolId: 'thinking-bounded',
-    toolName: 'thinking',
-  });
-
-  useLayoutEffect(() => {
-    if (!contentRef.current) return;
-    Object.defineProperty(contentRef.current, 'scrollHeight', {
-      configurable: true,
-      value: 4_000,
-    });
-    if (collapse) {
-      dispatchCollapseIntent('auto');
-    }
-  }, [collapse, dispatchCollapseIntent]);
-
-  return (
-    <div ref={cardRootRef} data-height="320">
-      <div ref={contentRef} />
-    </div>
-  );
+  React.useEffect(() => {
+    applyExpandedState(isExpanded, expanded, setIsExpanded);
+  }, [applyExpandedState, expanded, isExpanded]);
+  return <div ref={cardRootRef} data-expanded={String(isExpanded)} />;
 }
 
 describe('useToolCardHeightContract', () => {
@@ -75,91 +25,31 @@ describe('useToolCardHeightContract', () => {
 
   beforeEach(() => {
     container = document.createElement('div');
-    document.body.append(container);
+    document.body.appendChild(container);
     root = createRoot(container);
-    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
-      const height = Number((this as HTMLElement).dataset.height ?? 0);
-      return {
-        bottom: height,
-        height,
-        left: 0,
-        right: 300,
-        top: 0,
-        width: 300,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    });
   });
 
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
-    vi.restoreAllMocks();
   });
 
-  it('reports the pre-collapse height and semantic anchor after a state-driven shrink', () => {
-    let receivedDetail: Record<string, unknown> | null = null;
-    const handleIntent = (event: Event) => {
-      receivedDetail = (event as CustomEvent<Record<string, unknown>>).detail;
-    };
-    window.addEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-
-    try {
-      act(() => root.render(<Harness height={320} collapse={false} />));
-      act(() => root.render(<Harness height={64} collapse />));
-
-      expect(receivedDetail).toMatchObject({
-        toolId: 'tool-a',
-        toolName: 'Write',
-        cardHeight: 320,
-        reason: 'auto',
-      });
-      expect(receivedDetail?.anchorElement).toBe(container.firstElementChild);
-    } finally {
-      window.removeEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-    }
+  it('notifies the virtualizer after an expanded-state change', () => {
+    const handleToggle = vi.fn();
+    window.addEventListener('tool-card-toggle', handleToggle);
+    act(() => root.render(<Harness expanded />));
+    act(() => root.render(<Harness expanded={false} />));
+    expect(handleToggle).toHaveBeenCalledOnce();
+    expect(container.firstElementChild?.getAttribute('data-expanded')).toBe('false');
+    window.removeEventListener('tool-card-toggle', handleToggle);
   });
 
-  it('supports a semantic anchor owned by a non-card wrapper', () => {
-    let receivedDetail: Record<string, unknown> | null = null;
-    const handleIntent = (event: Event) => {
-      receivedDetail = (event as CustomEvent<Record<string, unknown>>).detail;
-    };
-    window.addEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-
-    try {
-      act(() => root.render(<CustomAnchorHarness collapse />));
-      expect(receivedDetail).toMatchObject({
-        toolId: 'thinking-a',
-        toolName: 'thinking',
-        cardHeight: 240,
-      });
-      expect(receivedDetail?.anchorElement).toBe(
-        container.querySelector('[data-testid="custom-anchor"]'),
-      );
-    } finally {
-      window.removeEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-    }
-  });
-
-  it('reports visible card height instead of hidden scroll content height', () => {
-    let receivedDetail: Record<string, unknown> | null = null;
-    const handleIntent = (event: Event) => {
-      receivedDetail = (event as CustomEvent<Record<string, unknown>>).detail;
-    };
-    window.addEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-
-    try {
-      act(() => root.render(<BoundedScrollableHarness collapse />));
-      expect(receivedDetail).toMatchObject({
-        toolId: 'thinking-bounded',
-        toolName: 'thinking',
-        cardHeight: 320,
-      });
-    } finally {
-      window.removeEventListener('flowchat:tool-card-collapse-intent', handleIntent);
-    }
+  it('does not emit a pre-collapse viewport compensation event', () => {
+    const handleCollapseIntent = vi.fn();
+    window.addEventListener('flowchat:tool-card-collapse-intent', handleCollapseIntent);
+    act(() => root.render(<Harness expanded />));
+    act(() => root.render(<Harness expanded={false} />));
+    expect(handleCollapseIntent).not.toHaveBeenCalled();
+    window.removeEventListener('flowchat:tool-card-collapse-intent', handleCollapseIntent);
   });
 });
diff --git a/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.ts b/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.ts
index 18af27d0f2..6f5fc234c4 100644
--- a/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.ts
+++ b/src/web-ui/src/flow_chat/tool-cards/useToolCardHeightContract.ts
@@ -1,6 +1,4 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
-export type ToolCardCollapseReason = 'manual' | 'auto';
-
+import { useCallback, useRef } from 'react';
 interface UseToolCardHeightContractOptions {
   toolId: string | null | undefined;
   toolName: string;
@@ -8,66 +6,26 @@ interface UseToolCardHeightContractOptions {
 }
 
 interface ApplyHeightContractOptions {
-  reason?: ToolCardCollapseReason;
   onExpand?: () => void;
-  detail?: Record<string, unknown>;
 }
 
 export function useToolCardHeightContract({
-  toolId,
-  toolName,
-  getAnchorElement,
+  toolId: _toolId,
+  toolName: _toolName,
+  getAnchorElement: _getAnchorElement,
 }: UseToolCardHeightContractOptions) {
   const cardRootRef = useRef<HTMLDivElement>(null);
-  const lastMeasuredHeightRef = useRef(0);
-  const previousMeasuredHeightRef = useRef(0);
-
-  useLayoutEffect(() => {
-    const nextHeight = cardRootRef.current?.getBoundingClientRect().height ?? 0;
-    if (nextHeight <= 0) {
-      return;
-    }
-    previousMeasuredHeightRef.current = lastMeasuredHeightRef.current;
-    lastMeasuredHeightRef.current = nextHeight;
-  });
 
   const dispatchToolCardToggle = useCallback(() => {
     window.dispatchEvent(new CustomEvent('tool-card-toggle'));
   }, []);
 
-  const dispatchCollapseIntent = useCallback((
-    reason: ToolCardCollapseReason,
-    detail?: Record<string, unknown>,
-  ) => {
-    const measuredHeight = cardRootRef.current?.getBoundingClientRect().height ?? 0;
-    const cardHeight = Math.max(
-      measuredHeight,
-      lastMeasuredHeightRef.current,
-      previousMeasuredHeightRef.current,
-    ) || null;
-
-    window.dispatchEvent(new CustomEvent('flowchat:tool-card-collapse-intent', {
-      detail: {
-        ...detail,
-        toolId: toolId ?? null,
-        toolName,
-        cardHeight,
-        anchorElement: getAnchorElement?.() ?? cardRootRef.current,
-        reason,
-      },
-    }));
-  }, [getAnchorElement, toolId, toolName]);
-
   const applyExpandedState = useCallback((
     currentExpanded: boolean,
     nextExpanded: boolean,
     setExpanded: (nextExpanded: boolean) => void,
     options?: ApplyHeightContractOptions,
   ) => {
-    if (!nextExpanded && currentExpanded) {
-      dispatchCollapseIntent(options?.reason ?? 'manual', options?.detail);
-    }
-
     if (nextExpanded !== currentExpanded) {
       setExpanded(nextExpanded);
       dispatchToolCardToggle();
@@ -76,12 +34,11 @@ export function useToolCardHeightContract({
     if (nextExpanded) {
       options?.onExpand?.();
     }
-  }, [dispatchCollapseIntent, dispatchToolCardToggle]);
+  }, [dispatchToolCardToggle]);
 
   return {
     cardRootRef,
     dispatchToolCardToggle,
-    dispatchCollapseIntent,
     applyExpandedState,
   };
 }
diff --git a/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.test.ts b/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.test.ts
new file mode 100644
index 0000000000..2059217898
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import {
+  CHAT_INPUT_DROP_ZONE_BOTTOM_PX,
+  computeFlowChatInputStackFooterPx,
+  FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX,
+} from './flowChatScrollLayout';
+
+describe('computeFlowChatInputStackFooterPx', () => {
+  it('uses the current measured input height without retaining an active height', () => {
+    expect(computeFlowChatInputStackFooterPx(40)).toBe(
+      40 + CHAT_INPUT_DROP_ZONE_BOTTOM_PX + FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX,
+    );
+  });
+
+  it('uses a safe layout fallback only before an input height is measured', () => {
+    expect(computeFlowChatInputStackFooterPx(0)).toBe(
+      96 + CHAT_INPUT_DROP_ZONE_BOTTOM_PX + FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX,
+    );
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.ts b/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.ts
index 06bb42e9c4..82af930d13 100644
--- a/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.ts
+++ b/src/web-ui/src/flow_chat/utils/flowChatScrollLayout.ts
@@ -12,41 +12,20 @@ export const FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX = 24;
 /** Space above the scroll-to-latest control (tighter than message tail; sits in overlay) */
 export const SCROLL_TO_LATEST_INPUT_CLEARANCE_PX = 6;
 
-const FALLBACK_INPUT_BLOCK_ACTIVE_PX = 96;
 const NORMAL_INPUT_BLOCK_SAFE_PX = 96;
 
 /**
- * Height of the Virtuoso footer spacer needed so the last message clears the floating input.
+ * Height of the footer spacer needed so the last message clears the floating input.
  * `measuredInputHeight` is the drop-zone `offsetHeight` from ChatInput (excluding the viewport bottom inset in `CHAT_INPUT_DROP_ZONE_BOTTOM_PX`).
  *
- * When `isInputActive` transitions from `true` to `false` (user sends a message,
- * input collapses to capsule), the ResizeObserver on the drop-zone fires with the
- * *new* collapsed height on the same microtask. If we use that new height
- * immediately, the Virtuoso footer shrinks by ~40 px in one frame, the browser
- * clamps `scrollTop` downward, and the viewport briefly shows blank space at the
- * top ("white screen"). The user must scroll up to see content again.
- *
- * To avoid this, when the input is *not* active we ignore the measured height
- * and use the active fallback instead. The footer stays large enough to cover
- * the active input block until the next turn's content grows past it, at which
- * point the footer reservation is consumed organically by the grow branch of
- * `measureHeightChange`. The visual cost is a few extra pixels of blank tail
- * space at the bottom — invisible to the user.
+ * The footer reflects only the current layout. It does not retain an earlier
+ * input height or manufacture scroll range to protect a viewport anchor.
  */
 export function computeFlowChatInputStackFooterPx(
   measuredInputHeight: number,
-  isInputActive: boolean,
 ): number {
-  // When the input is collapsed, always use the active fallback so the footer
-  // does not shrink on the same frame as the input collapse transition. This
-  // prevents a scrollTop clamp that would push the viewport above the content.
-  const effectiveInputHeight = isInputActive
+  const inputBlock = measuredInputHeight > 0
     ? measuredInputHeight
-    : FALLBACK_INPUT_BLOCK_ACTIVE_PX;
-
-  const measuredInputBlock = effectiveInputHeight > 0
-    ? effectiveInputHeight
-    : FALLBACK_INPUT_BLOCK_ACTIVE_PX;
-  const inputBlock = Math.max(measuredInputBlock, NORMAL_INPUT_BLOCK_SAFE_PX);
+    : NORMAL_INPUT_BLOCK_SAFE_PX;
   return inputBlock + CHAT_INPUT_DROP_ZONE_BOTTOM_PX + FLOWCHAT_MESSAGE_TAIL_CLEARANCE_PX;
 }
diff --git a/src/web-ui/src/flow_chat/utils/flowChatTailEase.test.ts b/src/web-ui/src/flow_chat/utils/flowChatTailEase.test.ts
new file mode 100644
index 0000000000..011377e4ab
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/flowChatTailEase.test.ts
@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  nextEasedScrollTopPx,
+  shouldEaseTailFollow,
+  TAIL_EASE_ALPHA,
+  TAIL_EASE_LANDED_PX,
+  TAIL_EASE_LINE_PX,
+  TAIL_EASE_SNAP_ABOVE_PX,
+} from './flowChatTailEase';
+
+describe('nextEasedScrollTopPx', () => {
+  it('covers a fixed fraction of what is left', () => {
+    const step = nextEasedScrollTopPx(100, 180);
+
+    expect(step.outcome).toBe('eased');
+    expect(step.offsetPx).toBeCloseTo(100 + 80 * TAIL_EASE_ALPHA, 6);
+  });
+
+  it('converges rather than overshooting', () => {
+    let offsetPx = 0;
+    for (let frame = 0; frame < 60; frame += 1) {
+      const step = nextEasedScrollTopPx(offsetPx, 100);
+      expect(step.offsetPx).toBeLessThanOrEqual(100);
+      offsetPx = step.offsetPx;
+    }
+
+    expect(offsetPx).toBe(100);
+  });
+
+  it('writes out the last fraction of a pixel instead of halving it forever', () => {
+    const step = nextEasedScrollTopPx(100 - TAIL_EASE_LANDED_PX, 100);
+
+    expect(step).toEqual({ offsetPx: 100, outcome: 'landed' });
+  });
+
+  it('reports having landed when there is nowhere to go', () => {
+    expect(nextEasedScrollTopPx(100, 100)).toEqual({ offsetPx: 100, outcome: 'landed' });
+  });
+
+  it('jumps rather than animating through content nobody saw', () => {
+    const step = nextEasedScrollTopPx(0, TAIL_EASE_SNAP_ABOVE_PX + 1);
+
+    expect(step).toEqual({ offsetPx: TAIL_EASE_SNAP_ABOVE_PX + 1, outcome: 'snapped' });
+  });
+
+  it('eases right up to the snap threshold', () => {
+    expect(nextEasedScrollTopPx(0, TAIL_EASE_SNAP_ABOVE_PX).outcome).toBe('eased');
+  });
+
+  it('never takes an eased step bigger than the line it exists to break up', () => {
+    // The threshold is derived from this: past it the opening step of an ease
+    // is larger than the jump it replaces, so the follow jumps instead.
+    const worstEasedStepPx = nextEasedScrollTopPx(0, TAIL_EASE_SNAP_ABOVE_PX).offsetPx;
+
+    expect(worstEasedStepPx).toBeLessThanOrEqual(TAIL_EASE_LINE_PX);
+  });
+
+  it('goes straight to a target above it, because a shrink eased reads as a claw-back', () => {
+    const step = nextEasedScrollTopPx(400, 320);
+
+    expect(step).toEqual({ offsetPx: 320, outcome: 'landed' });
+  });
+
+  it('settles on the growth per frame under steady growth, whatever alpha is', () => {
+    // The point of the ease is even motion, not slower motion: at equilibrium
+    // it moves exactly as fast as the content grows.
+    const growthPerFramePx = 8;
+    let offsetPx = 0;
+    let targetPx = 0;
+    let lastStepPx = 0;
+    for (let frame = 0; frame < 200; frame += 1) {
+      targetPx += growthPerFramePx;
+      const step = nextEasedScrollTopPx(offsetPx, targetPx);
+      lastStepPx = step.offsetPx - offsetPx;
+      offsetPx = step.offsetPx;
+    }
+
+    expect(lastStepPx).toBeCloseTo(growthPerFramePx, 3);
+    // And the price of that evenness is riding a fixed distance behind: the
+    // frame's own growth is already in the target when the ease acts on it.
+    expect(targetPx - offsetPx).toBeCloseTo(
+      growthPerFramePx * (1 - TAIL_EASE_ALPHA) / TAIL_EASE_ALPHA,
+      3,
+    );
+  });
+});
+
+describe('shouldEaseTailFollow', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function stubReducedMotion(matches: boolean): void {
+    vi.stubGlobal('matchMedia', vi.fn(() => ({ matches })));
+  }
+
+  it('refuses while the box is still growing, where a smooth follow would cost a re-measure', () => {
+    stubReducedMotion(false);
+
+    expect(shouldEaseTailFollow({ scrollHeightPx: 200, clientHeightPx: 300 })).toBe(false);
+    expect(shouldEaseTailFollow({ scrollHeightPx: 300, clientHeightPx: 300 })).toBe(false);
+  });
+
+  it('eases once the box overflows and there is an offset to move', () => {
+    stubReducedMotion(false);
+
+    expect(shouldEaseTailFollow({ scrollHeightPx: 301, clientHeightPx: 300 })).toBe(true);
+  });
+
+  it('refuses when the reader asked for less motion', () => {
+    stubReducedMotion(true);
+
+    expect(shouldEaseTailFollow({ scrollHeightPx: 900, clientHeightPx: 300 })).toBe(false);
+  });
+
+  it('eases where matchMedia is unavailable rather than treating that as a preference', () => {
+    vi.stubGlobal('matchMedia', undefined);
+
+    expect(shouldEaseTailFollow({ scrollHeightPx: 900, clientHeightPx: 300 })).toBe(true);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/flowChatTailEase.ts b/src/web-ui/src/flow_chat/utils/flowChatTailEase.ts
new file mode 100644
index 0000000000..3c5a48ceea
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/flowChatTailEase.ts
@@ -0,0 +1,105 @@
+/**
+ * Easing a scroll offset towards the bottom of its own content.
+ *
+ * A follow that assigns the tail offset outright moves whenever the content
+ * reflows, which for Markdown means a whole line at a time with nothing in
+ * between. Easing spends the same distance over the frames that were empty.
+ *
+ * Worth being clear about what this can and cannot do, because it bounds what
+ * any tuning is allowed to promise. Under steady growth the eased offset
+ * settles where its per-frame catch-up equals the growth, so the visible step
+ * converges on *the content's growth per frame* whatever `TAIL_EASE_ALPHA` is.
+ * Smoothing does not make the tail move more slowly; it spreads a lumpy motion
+ * evenly across the frames it already had. At eight lines a second that turns
+ * one 24px jump every seven frames into 3px every frame; at thirty lines a
+ * second the frames run out and the step stays around half a line.
+ *
+ * `TAIL_EASE_ALPHA` therefore buys latency, not smoothness: it sets how far
+ * behind the tail the offset rides, which is what has to be given back when the
+ * stream stops.
+ *
+ * This eases an offset, not a height. Offsets are the cheap case — scrolling
+ * inside a box changes no layout outside it — which is why the decision here is
+ * about how it looks and not about what it costs.
+ */
+
+/** Fraction of the remaining distance covered each frame. */
+export const TAIL_EASE_ALPHA = 0.25;
+
+/**
+ * A line of FlowChat body text, near enough.
+ *
+ * Not used to lay anything out — it is the size of the step an unsmoothed
+ * follow makes, and so the bar this one has to stay under to be worth having.
+ */
+export const TAIL_EASE_LINE_PX = 24;
+
+/**
+ * Distance past which the follow gives up on easing and jumps.
+ *
+ * Derived rather than chosen: the first frame of an ease covers `TAIL_EASE_ALPHA`
+ * of the distance, so beyond a line's worth divided by that fraction, the ease's
+ * *opening step* is already bigger than the jump it set out to replace. A
+ * measured burst arriving 238px behind produced a single 59px step — two and a
+ * half lines — before settling, which is worse than having simply jumped.
+ *
+ * So above this the follow jumps and says so. Below it, no step it takes can
+ * exceed a line.
+ */
+export const TAIL_EASE_SNAP_ABOVE_PX = TAIL_EASE_LINE_PX / TAIL_EASE_ALPHA;
+
+/** Below this the remaining distance is written out rather than halved again. */
+export const TAIL_EASE_LANDED_PX = 0.5;
+
+export type TailEaseOutcome =
+  /** Moved part of the way; the follow should keep going next frame. */
+  | 'eased'
+  /** Went the whole way deliberately, because easing was not worth it. */
+  | 'snapped'
+  /** Arrived. Nothing more to do until the content moves again. */
+  | 'landed';
+
+export interface TailEaseStep {
+  offsetPx: number;
+  outcome: TailEaseOutcome;
+}
+
+/**
+ * Where a following scroll offset should be written this frame.
+ *
+ * A target *above* the current offset is not eased. It means the content got
+ * shorter — a fence closing, a table reflowing — and easing down through it
+ * reads as the view being clawed backwards, which is worse than the jump it
+ * replaces.
+ */
+export function nextEasedScrollTopPx(currentPx: number, targetPx: number): TailEaseStep {
+  const distancePx = targetPx - currentPx;
+  if (distancePx <= TAIL_EASE_LANDED_PX) {
+    return { offsetPx: targetPx, outcome: 'landed' };
+  }
+  if (distancePx > TAIL_EASE_SNAP_ABOVE_PX) {
+    return { offsetPx: targetPx, outcome: 'snapped' };
+  }
+  return { offsetPx: currentPx + distancePx * TAIL_EASE_ALPHA, outcome: 'eased' };
+}
+
+/**
+ * Whether this follow should ease at all.
+ *
+ * Two conditions, and both are about cost rather than taste. A box that is not
+ * yet overflowing has no scroll offset to ease — it is still growing, and
+ * moving *that* smoothly would mean animating a height, which every frame
+ * charges to the virtualizer. And a reader who asked for less motion is asking
+ * about exactly this.
+ */
+export function shouldEaseTailFollow(options: {
+  scrollHeightPx: number;
+  clientHeightPx: number;
+}): boolean {
+  if (options.scrollHeightPx <= options.clientHeightPx) return false;
+  return !prefersReducedMotion();
+}
+
+function prefersReducedMotion(): boolean {
+  return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+}
diff --git a/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.test.ts b/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.test.ts
index 6777fd6239..438232ac1c 100644
--- a/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.test.ts
+++ b/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.test.ts
@@ -4,7 +4,6 @@ import {
   isDialogTurnInFlight,
   isThreadGoalContinuationTurn,
   shouldUseLatestTurnFollowOutput,
-  shouldUseStickyLatestPin,
 } from './flowChatTurnScrollPolicy';
 
 function makeTurn(partial: Partial<DialogTurn>): DialogTurn {
@@ -29,7 +28,7 @@ describe('flowChatTurnScrollPolicy', () => {
     expect(isDialogTurnInFlight(turn)).toBe(false);
   });
 
-  it('skips sticky pin for thread goal continuation turns', () => {
+  it('skips natural tail follow for thread goal continuation turns', () => {
     const turn = makeTurn({
       status: 'processing',
       userMessage: {
@@ -41,10 +40,9 @@ describe('flowChatTurnScrollPolicy', () => {
     });
     expect(isThreadGoalContinuationTurn(turn)).toBe(true);
     expect(shouldUseLatestTurnFollowOutput(turn)).toBe(false);
-    expect(shouldUseStickyLatestPin(turn)).toBe(false);
   });
 
-  it('allows sticky pin for in-flight user turns', () => {
+  it('follows in-flight user turns at the natural tail', () => {
     const turn = makeTurn({
       status: 'processing',
       modelRounds: [{
@@ -56,13 +54,11 @@ describe('flowChatTurnScrollPolicy', () => {
       }],
     } as Partial<DialogTurn>);
     expect(shouldUseLatestTurnFollowOutput(turn)).toBe(true);
-    expect(shouldUseStickyLatestPin(turn)).toBe(true);
   });
 
-  it('lets follow-output own a newly submitted user-only turn before sticky pin starts', () => {
+  it('lets follow-output own a newly submitted user-only turn', () => {
     const turn = makeTurn({ status: 'processing', modelRounds: [] });
     expect(isDialogTurnInFlight(turn)).toBe(true);
     expect(shouldUseLatestTurnFollowOutput(turn)).toBe(true);
-    expect(shouldUseStickyLatestPin(turn)).toBe(false);
   });
 });
diff --git a/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.ts b/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.ts
index 1d1ceafd00..5fbe6cae44 100644
--- a/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.ts
+++ b/src/web-ui/src/flow_chat/utils/flowChatTurnScrollPolicy.ts
@@ -28,14 +28,6 @@ export function shouldUseLatestTurnFollowOutput(turn: DialogTurn | undefined): b
   return isDialogTurnInFlight(turn);
 }
 
-/** Sticky-latest pin starts only after model output exists. */
-export function shouldUseStickyLatestPin(turn: DialogTurn | undefined): boolean {
-  if (!turn || !shouldUseLatestTurnFollowOutput(turn)) {
-    return false;
-  }
-  return turn.modelRounds.length > 0;
-}
-
 export function findDialogTurn(
   dialogTurns: DialogTurn[] | undefined,
   turnId: string | null | undefined,
diff --git a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
index 1defb7f010..0704b63e44 100644
--- a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
@@ -1,6 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SessionAPI } from './SessionAPI';
-import type { DialogTurnData } from '@/shared/types/session-history';
 
 const invokeMock = vi.hoisted(() => vi.fn());
 
@@ -186,56 +185,4 @@ describe('SessionAPI paged metadata reads', () => {
       },
     });
   });
-
-  it('records local command turns through the authoritative catalog command', async () => {
-    const turnData: DialogTurnData = {
-      turnId: 'local-usage-1',
-      turnIndex: 0,
-      sessionId: 'session-1',
-      timestamp: 10,
-      kind: 'local_command',
-      userMessage: {
-        id: 'local-usage-user-1',
-        content: '# Session Usage Report',
-        timestamp: 10,
-        metadata: { localCommandKind: 'usage_report', modelVisible: false },
-      },
-      modelRounds: [],
-      startTime: 10,
-      endTime: 10,
-      status: 'completed',
-    };
-    const response = {
-      turnId: 'local-usage-1',
-      storageTurnIndex: 7,
-      totalTurnCount: 8,
-      turnCatalog: {
-        schemaVersion: 1,
-        sessionId: 'session-1',
-        revision: 'catalog-8',
-        totalTurnCount: 8,
-        complete: true,
-        entries: [{
-          ordinal: 7,
-          storageTurnIndex: 7,
-          turnId: 'local-usage-1',
-          previewTruncated: false,
-        }],
-      },
-    };
-    invokeMock.mockResolvedValueOnce(response);
-
-    await expect(
-      sessionAPI.recordLocalCommandTurn(turnData, '/repo', 'remote-1', 'host'),
-    ).resolves.toBe(response);
-
-    expect(invokeMock).toHaveBeenCalledWith('record_local_command_turn', {
-      request: {
-        turn_data: turnData,
-        workspace_path: '/repo',
-        remote_connection_id: 'remote-1',
-        remote_ssh_host: 'host',
-      },
-    });
-  });
 });
diff --git a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
index d9ced04a81..94ad07304e 100644
--- a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
@@ -4,7 +4,6 @@ import { createTauriCommandError } from '../errors/TauriCommandError';
 import type {
   DialogTurnData,
   SessionMetadata,
-  SessionTurnCatalog,
 } from '@/shared/types/session-history';
 import { normalizeRemoteSessionScope } from '@/shared/utils/remoteSessionScope';
 
@@ -222,13 +221,6 @@ export interface SessionUsageReport {
   };
 }
 
-export interface RecordLocalCommandTurnResponse {
-  turnId: string;
-  storageTurnIndex: number;
-  totalTurnCount: number;
-  turnCatalog: SessionTurnCatalog;
-}
-
 function remoteSessionFields(
   remoteConnectionId?: string,
   remoteSshHost?: string
@@ -386,28 +378,6 @@ export class SessionAPI {
     }
   }
 
-  async recordLocalCommandTurn(
-    turnData: DialogTurnData,
-    workspacePath: string,
-    remoteConnectionId?: string,
-    remoteSshHost?: string,
-  ): Promise<RecordLocalCommandTurnResponse> {
-    try {
-      return await api.invoke('record_local_command_turn', {
-        request: {
-          turn_data: turnData,
-          workspace_path: workspacePath,
-          ...remoteSessionFields(remoteConnectionId, remoteSshHost),
-        },
-      });
-    } catch (error) {
-      throw createTauriCommandError('record_local_command_turn', error, {
-        turnData,
-        workspacePath,
-      });
-    }
-  }
-
   async saveSessionMetadata(
     metadata: SessionMetadata,
     workspacePath: string,
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index dd7e854070..7dea4cc348 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -66,6 +66,7 @@ import { inlineDiffPreviewAppearanceDescriptor } from '@/flow_chat/components/In
 import { exportImageAppearanceDescriptor } from '@/flow_chat/components/modern/ExportImageButton.appearance';
 import { userMessageItemAppearanceDescriptor } from '@/flow_chat/components/modern/UserMessageItem.appearance';
 import { sessionUsageReportCardAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageReportCard.appearance';
+import { sessionUsageModalAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageModal.appearance';
 import { askUserQuestionCardAppearanceDescriptor } from '@/flow_chat/tool-cards/AskUserQuestionCard.appearance';
 import { createPlanDisplayAppearanceDescriptor } from '@/flow_chat/tool-cards/CreatePlanDisplay.appearance';
 import { execProcessToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/ExecProcessToolCardView.appearance';
@@ -178,7 +179,6 @@ import { exploreGroupAppearanceDescriptor } from '@/flow_chat/components/modern/
 import { pendingQueuePanelAppearanceDescriptor } from '@/flow_chat/components/PendingQueuePanel.appearance';
 import { subagentProjectionAppearanceDescriptor } from '@/flow_chat/components/subagent/SubagentProjectionView.appearance';
 import { threadGoalDialogsAppearanceDescriptor } from '@/flow_chat/components/thread-goal/ThreadGoalDialogs.appearance';
-import { userSteeringBubbleAppearanceDescriptor } from '@/flow_chat/components/UserSteeringBubble.appearance';
 import { welcomePanelAppearanceDescriptor } from '@/flow_chat/components/WelcomePanel.appearance';
 import { generativeWidgetToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/GenerativeWidgetToolCard.appearance';
 import { gitToolDisplayAppearanceDescriptor } from '@/flow_chat/tool-cards/GitToolDisplay.appearance';
@@ -228,7 +228,6 @@ import { reviewSessionSummaryCardAppearanceDescriptor } from '@/flow_chat/tool-c
 import { deepReviewConsentDialogAppearanceDescriptor } from '@/flow_chat/components/DeepReviewConsentDialog.appearance';
 import { flowTextBlockAppearanceDescriptor } from '@/flow_chat/components/FlowTextBlock.appearance';
 import { permissionRequestPanelAppearanceDescriptor } from '@/flow_chat/components/modern/PermissionRequestPanel.appearance';
-import { userMessageAppearanceDescriptor } from '@/flow_chat/components/UserMessage.appearance';
 import { toolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/BaseToolCard.appearance';
 import { canvasToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/CanvasToolCard.appearance';
 import { computerUseToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/ComputerUseToolCard.appearance';
@@ -261,9 +260,6 @@ import { tokenUsageIndicatorAppearanceDescriptor } from '@/flow_chat/components/
 import { toolApprovalBarAppearanceDescriptor } from '@/flow_chat/components/ToolApprovalBar.appearance';
 import { snapshotRollbackButtonAppearanceDescriptor } from '@/flow_chat/components/SnapshotRollbackButton.appearance';
 import { smartRecommendationsAppearanceDescriptor } from '@/flow_chat/components/smart-recommendations/SmartRecommendations.appearance';
-import { stickyTaskIndicatorAppearanceDescriptor } from '@/flow_chat/components/StickyTaskIndicator.appearance';
-import { turnHistoryPanelAppearanceDescriptor } from '@/flow_chat/components/TurnHistoryPanel.appearance';
-import { turnRollbackButtonAppearanceDescriptor } from '@/flow_chat/components/TurnRollbackButton.appearance';
 import { sessionRuntimeStatusEntryAppearanceDescriptor } from '@/flow_chat/components/usage/SessionRuntimeStatusEntry.appearance';
 import { runtimeStatusSlotAppearanceDescriptor } from '@/flow_chat/components/modern/RuntimeStatusSlot.appearance';
 import { sessionMenuAppearanceDescriptor } from '@/flow_chat/components/session-menu/SessionMenu.appearance';
@@ -349,6 +345,7 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(exportImageAppearanceDescriptor)
     .registerComponent(userMessageItemAppearanceDescriptor)
     .registerComponent(sessionUsageReportCardAppearanceDescriptor)
+    .registerComponent(sessionUsageModalAppearanceDescriptor)
     .registerComponent(askUserQuestionCardAppearanceDescriptor)
     .registerComponent(createPlanDisplayAppearanceDescriptor)
     .registerComponent(execProcessToolCardAppearanceDescriptor)
@@ -465,7 +462,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(pendingQueuePanelAppearanceDescriptor)
     .registerComponent(subagentProjectionAppearanceDescriptor)
     .registerComponent(threadGoalDialogsAppearanceDescriptor)
-    .registerComponent(userSteeringBubbleAppearanceDescriptor)
     .registerComponent(welcomePanelAppearanceDescriptor)
     .registerComponent(generativeWidgetToolCardAppearanceDescriptor)
     .registerComponent(gitToolDisplayAppearanceDescriptor)
@@ -489,7 +485,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(deepReviewConsentDialogAppearanceDescriptor)
     .registerComponent(flowTextBlockAppearanceDescriptor)
     .registerComponent(permissionRequestPanelAppearanceDescriptor)
-    .registerComponent(userMessageAppearanceDescriptor)
     .registerComponent(toolCardAppearanceDescriptor)
     .registerComponent(canvasToolCardAppearanceDescriptor)
     .registerComponent(computerUseToolCardAppearanceDescriptor)
@@ -522,9 +517,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(toolApprovalBarAppearanceDescriptor)
     .registerComponent(snapshotRollbackButtonAppearanceDescriptor)
     .registerComponent(smartRecommendationsAppearanceDescriptor)
-    .registerComponent(stickyTaskIndicatorAppearanceDescriptor)
-    .registerComponent(turnHistoryPanelAppearanceDescriptor)
-    .registerComponent(turnRollbackButtonAppearanceDescriptor)
     .registerComponent(sessionRuntimeStatusEntryAppearanceDescriptor)
     .registerComponent(runtimeStatusSlotAppearanceDescriptor)
     .registerComponent(sessionMenuAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.test.ts b/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.test.ts
new file mode 100644
index 0000000000..d4bbf28c75
--- /dev/null
+++ b/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.test.ts
@@ -0,0 +1,181 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const diagnosticsMocks = vi.hoisted(() => ({
+  trace: vi.fn(),
+  isEnabled: vi.fn(() => true),
+}));
+
+vi.mock('./flowChatDiagnostics', () => ({
+  flowChatDiagnostics: { trace: diagnosticsMocks.trace },
+  isFlowChatDiagnosticsEnabled: diagnosticsMocks.isEnabled,
+}));
+
+import {
+  accumulateTailFollowStep,
+  createTailFollowWindow,
+  FLOWCHAT_TAIL_FOLLOW_PROBE,
+  noteFlowListCommit,
+  noteTailFollowStep,
+  resetTailFollowDiagnosticsForTests,
+  summariseTailFollowWindow,
+  tailFollowStepBucket,
+  TAIL_FOLLOW_WINDOW_MS,
+  type TailFollowStepSample,
+} from './flowChatTailFollowDiagnostics';
+
+function step(overrides: Partial<TailFollowStepSample> = {}): TailFollowStepSample {
+  return { stepPx: 24, lagPx: 24, innerScroll: true, snapped: false, ...overrides };
+}
+
+describe('tailFollowStepBucket', () => {
+  it('puts a whole line in the bucket that means "no better than not smoothing"', () => {
+    expect(tailFollowStepBucket(24)).toBe('to28');
+  });
+
+  it('separates a genuine improvement from an imperceptible one', () => {
+    expect(tailFollowStepBucket(3.9)).toBe('under4');
+    expect(tailFollowStepBucket(4)).toBe('to12');
+    expect(tailFollowStepBucket(11.9)).toBe('to12');
+  });
+
+  it('flags a step worse than a line', () => {
+    expect(tailFollowStepBucket(28)).toBe('over28');
+    expect(tailFollowStepBucket(120)).toBe('over28');
+  });
+
+  it('buckets by magnitude, so a correction upwards is not a separate story', () => {
+    expect(tailFollowStepBucket(-24)).toBe('to28');
+  });
+});
+
+describe('accumulateTailFollowStep', () => {
+  it('keeps the peaks, which is what a mean would hide', () => {
+    let window = createTailFollowWindow(0, 0);
+    window = accumulateTailFollowStep(window, step({ stepPx: 2, lagPx: 2 }));
+    window = accumulateTailFollowStep(window, step({ stepPx: 96, lagPx: 140 }));
+    window = accumulateTailFollowStep(window, step({ stepPx: 2, lagPx: 2 }));
+
+    expect(window.maxStepPx).toBe(96);
+    expect(window.maxLagPx).toBe(140);
+    expect(window.travelPx).toBe(100);
+    expect(window.buckets).toEqual({ under4: 2, to12: 0, to28: 0, over28: 1 });
+  });
+
+  it('counts snaps and inner-scroll steps apart', () => {
+    let window = createTailFollowWindow(0, 0);
+    window = accumulateTailFollowStep(window, step({ snapped: true, innerScroll: false }));
+    window = accumulateTailFollowStep(window, step({ snapped: false, innerScroll: true }));
+
+    expect(window.snaps).toBe(1);
+    expect(window.innerScrollSteps).toBe(1);
+  });
+
+  it('does not mutate the window it is given', () => {
+    const window = createTailFollowWindow(0, 0);
+    accumulateTailFollowStep(window, step());
+
+    expect(window.steps).toBe(0);
+    expect(window.buckets.to28).toBe(0);
+  });
+});
+
+describe('summariseTailFollowWindow', () => {
+  it('reports list commits as the delta over the window, not the running total', () => {
+    const window = createTailFollowWindow(0, 40);
+    const summary = summariseTailFollowWindow(window, 1_000, 55);
+
+    expect(summary.listCommits).toBe(15);
+    expect(summary.listCommitsPerSec).toBe(15);
+  });
+
+  it('scales a short trailing window up so it compares with the full ones', () => {
+    let window = createTailFollowWindow(0, 0);
+    for (let index = 0; index < 5; index += 1) {
+      window = accumulateTailFollowStep(window, step());
+    }
+    const summary = summariseTailFollowWindow(window, 250, 0);
+
+    expect(summary.forMs).toBe(250);
+    expect(summary.steps).toBe(5);
+    expect(summary.stepsPerSec).toBe(20);
+  });
+
+  it('reports no average step for a window that recorded none', () => {
+    const summary = summariseTailFollowWindow(createTailFollowWindow(0, 0), 1_000, 0);
+
+    expect(summary.avgStepPx).toBe(0);
+  });
+});
+
+describe('noteTailFollowStep', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    diagnosticsMocks.trace.mockClear();
+    diagnosticsMocks.isEnabled.mockReturnValue(true);
+    resetTailFollowDiagnosticsForTests();
+  });
+
+  afterEach(() => {
+    resetTailFollowDiagnosticsForTests();
+    vi.useRealTimers();
+  });
+
+  it('records nothing while the diagnostics switch is off', () => {
+    diagnosticsMocks.isEnabled.mockReturnValue(false);
+
+    noteTailFollowStep('thinking', step());
+    vi.advanceTimersByTime(TAIL_FOLLOW_WINDOW_MS * 3);
+
+    expect(diagnosticsMocks.trace).not.toHaveBeenCalled();
+  });
+
+  it('summarises a run of frames into one entry rather than one per frame', () => {
+    for (let frame = 0; frame < 40; frame += 1) {
+      noteTailFollowStep('thinking', step({ stepPx: 6, lagPx: 18 }));
+      vi.advanceTimersByTime(16);
+    }
+    vi.advanceTimersByTime(TAIL_FOLLOW_WINDOW_MS * 2);
+
+    const entries = diagnosticsMocks.trace.mock.calls.map(([probe]) => probe);
+    expect(entries.length).toBeGreaterThan(0);
+    expect(entries.length).toBeLessThan(40);
+    expect(entries[0].hypothesis).toBe(FLOWCHAT_TAIL_FOLLOW_PROBE);
+    expect(entries[0].location).toBe('tailFollow.thinking');
+    const total = entries.reduce((sum, probe) => sum + probe.data().steps, 0);
+    expect(total).toBe(40);
+  });
+
+  it('closes out the last window of a stream, which nothing else would report', () => {
+    noteTailFollowStep('thinking', step());
+    expect(diagnosticsMocks.trace).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(TAIL_FOLLOW_WINDOW_MS * 2);
+
+    expect(diagnosticsMocks.trace).toHaveBeenCalledTimes(1);
+    expect(diagnosticsMocks.trace.mock.calls[0][0].data().steps).toBe(1);
+  });
+
+  it('attributes only the list commits that happened inside the window', () => {
+    noteFlowListCommit();
+    noteFlowListCommit();
+    noteTailFollowStep('thinking', step());
+    noteFlowListCommit();
+    vi.advanceTimersByTime(TAIL_FOLLOW_WINDOW_MS * 2);
+
+    expect(diagnosticsMocks.trace.mock.calls[0][0].data().listCommits).toBe(1);
+  });
+
+  it('ignores list commits while the switch is off, so the count is not backdated', () => {
+    diagnosticsMocks.isEnabled.mockReturnValue(false);
+    noteFlowListCommit();
+    diagnosticsMocks.isEnabled.mockReturnValue(true);
+
+    noteTailFollowStep('thinking', step());
+    noteFlowListCommit();
+    vi.advanceTimersByTime(TAIL_FOLLOW_WINDOW_MS * 2);
+
+    expect(diagnosticsMocks.trace.mock.calls[0][0].data().listCommits).toBe(1);
+  });
+});
diff --git a/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.ts b/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.ts
new file mode 100644
index 0000000000..6bd2de7553
--- /dev/null
+++ b/src/web-ui/src/infrastructure/diagnostics/flowChatTailFollowDiagnostics.ts
@@ -0,0 +1,279 @@
+/**
+ * What following the tail cost, and how rough it looked.
+ *
+ * Streaming output moves a viewport towards its own bottom, and there are two
+ * such viewports in FlowChat: the message list, and the thinking card's own
+ * scroll box once its content passes `max-height`. Both face the same question,
+ * and the answers differ enough that guessing is not safe:
+ *
+ * - **How rough is it?** Markdown reflows a line at a time, so an unsmoothed
+ *   follow moves in line-sized steps. Whether a smoothing attempt actually
+ *   helped is a question about the *distribution* of step sizes, not the mean:
+ *   a follow that is silky for a second and then jumps a line reads as jumpy.
+ * - **What did it cost?** Changing the height of a list item forces the
+ *   virtualizer to re-measure, which re-renders `VirtualMessageList`. Scrolling
+ *   *inside* an item does not. That difference decides whether smoothing is
+ *   affordable at all, and it is invisible from the outside — the two look
+ *   identical on screen and differ by an order of magnitude in commits.
+ *
+ * So both are recorded together, over the same window, gated on
+ * `app.logging.flow_chat_diagnostics`. Read against each other they answer the
+ * only question worth asking about a smoothing change: did the steps get
+ * smaller, and what did that buy or cost in list commits.
+ *
+ * Nothing here evaluates a payload while the switch is off, and a follow
+ * running at frame rate reports once per window rather than once per frame —
+ * sixty entries a second would bury the transition they exist to show.
+ */
+
+import { flowChatDiagnostics, isFlowChatDiagnosticsEnabled } from './flowChatDiagnostics';
+
+/** Probe tag for everything about tail following in `flowchat.log`. */
+export const FLOWCHAT_TAIL_FOLLOW_PROBE = 'tailFollow';
+
+/**
+ * How much following is summarised into one entry.
+ *
+ * A second is long enough for a rate to mean something and short enough to keep
+ * a burst distinguishable from the steady state around it.
+ */
+export const TAIL_FOLLOW_WINDOW_MS = 1000;
+
+/**
+ * Step-size buckets, cut at fractions of a line rather than round numbers.
+ *
+ * FlowChat body text sits around a 24px line, and a line is the step an
+ * unsmoothed follow produces. So the boundaries say something a reader can act
+ * on: `over28` is worse than not smoothing at all, `to28` is no better than it,
+ * `to12` is a genuine improvement, and `under4` is below what the eye resolves
+ * as a step.
+ */
+export const TAIL_FOLLOW_BUCKET_BOUNDS_PX = [4, 12, 28] as const;
+
+export interface TailFollowStepBuckets {
+  under4: number;
+  to12: number;
+  to28: number;
+  over28: number;
+}
+
+/**
+ * Which follow this is. One window is kept per subject.
+ *
+ * The two are never summed. They face the same question and pay for it
+ * differently, so an average over both would hide exactly the difference the
+ * cost half of this file exists to expose.
+ */
+export type TailFollowSubject = 'list' | 'thinking';
+
+export interface TailFollowStepSample {
+  /** How far the scroll offset actually moved on this write. */
+  stepPx: number;
+  /** How far it was from the tail before the write. Equals `stepPx` when the follow jumps. */
+  lagPx: number;
+  /**
+   * The box was already scrolling internally, so this write changed no layout.
+   * False means the element is still growing and every step costs a re-measure.
+   *
+   * Always true for `list`, whose scroller is a fixed box that only ever
+   * scrolls — which is the trap. That write is free of *layout* and still not
+   * free: the virtualizer re-windows from the scroll events it produces, so the
+   * list's price is `listCommits` and this flag cannot show it.
+   */
+  innerScroll: boolean;
+  /** The write skipped whatever smoothing is in force and went straight to the tail. */
+  snapped: boolean;
+}
+
+export interface TailFollowWindow {
+  startedAtMs: number;
+  listCommitsAtStart: number;
+  steps: number;
+  travelPx: number;
+  maxStepPx: number;
+  maxLagPx: number;
+  snaps: number;
+  innerScrollSteps: number;
+  buckets: TailFollowStepBuckets;
+}
+
+export interface TailFollowWindowSummary {
+  forMs: number;
+  steps: number;
+  stepsPerSec: number;
+  travelPx: number;
+  avgStepPx: number;
+  maxStepPx: number;
+  maxLagPx: number;
+  snaps: number;
+  innerScrollSteps: number;
+  listCommits: number;
+  listCommitsPerSec: number;
+  buckets: TailFollowStepBuckets;
+}
+
+/** Round to a tenth, matching the viewport probes. */
+export function roundTailFollowPx(value: number): number {
+  return Math.round(value * 10) / 10;
+}
+
+/**
+ * Whether a caller should bother measuring.
+ *
+ * Sampling a follow means reading `scrollTop` on both sides of the write, and a
+ * follow runs every frame. `noteTailFollowStep` refuses the same way, but a
+ * caller that would pay for the reads should ask first.
+ */
+export function isTailFollowDiagnosticsEnabled(): boolean {
+  return isFlowChatDiagnosticsEnabled();
+}
+
+export function tailFollowStepBucket(stepPx: number): keyof TailFollowStepBuckets {
+  const [small, medium, large] = TAIL_FOLLOW_BUCKET_BOUNDS_PX;
+  const magnitudePx = Math.abs(stepPx);
+  if (magnitudePx < small) return 'under4';
+  if (magnitudePx < medium) return 'to12';
+  if (magnitudePx < large) return 'to28';
+  return 'over28';
+}
+
+export function createTailFollowWindow(nowMs: number, listCommits: number): TailFollowWindow {
+  return {
+    startedAtMs: nowMs,
+    listCommitsAtStart: listCommits,
+    steps: 0,
+    travelPx: 0,
+    maxStepPx: 0,
+    maxLagPx: 0,
+    snaps: 0,
+    innerScrollSteps: 0,
+    buckets: { under4: 0, to12: 0, to28: 0, over28: 0 },
+  };
+}
+
+export function accumulateTailFollowStep(
+  window: TailFollowWindow,
+  sample: TailFollowStepSample,
+): TailFollowWindow {
+  const bucket = tailFollowStepBucket(sample.stepPx);
+  return {
+    ...window,
+    steps: window.steps + 1,
+    travelPx: window.travelPx + Math.abs(sample.stepPx),
+    maxStepPx: Math.max(window.maxStepPx, Math.abs(sample.stepPx)),
+    maxLagPx: Math.max(window.maxLagPx, Math.abs(sample.lagPx)),
+    snaps: window.snaps + (sample.snapped ? 1 : 0),
+    innerScrollSteps: window.innerScrollSteps + (sample.innerScroll ? 1 : 0),
+    buckets: { ...window.buckets, [bucket]: window.buckets[bucket] + 1 },
+  };
+}
+
+/**
+ * Turn a window into what gets logged.
+ *
+ * Rates are per second rather than per window so that a short trailing window —
+ * the one a stream ends on, which is often the interesting one — is comparable
+ * with the full ones before it.
+ */
+export function summariseTailFollowWindow(
+  window: TailFollowWindow,
+  nowMs: number,
+  listCommits: number,
+): TailFollowWindowSummary {
+  const forMs = Math.max(1, nowMs - window.startedAtMs);
+  const perSec = 1000 / forMs;
+  const windowListCommits = listCommits - window.listCommitsAtStart;
+  return {
+    forMs: Math.round(forMs),
+    steps: window.steps,
+    stepsPerSec: roundTailFollowPx(window.steps * perSec),
+    travelPx: roundTailFollowPx(window.travelPx),
+    avgStepPx: window.steps === 0 ? 0 : roundTailFollowPx(window.travelPx / window.steps),
+    maxStepPx: roundTailFollowPx(window.maxStepPx),
+    maxLagPx: roundTailFollowPx(window.maxLagPx),
+    snaps: window.snaps,
+    innerScrollSteps: window.innerScrollSteps,
+    listCommits: windowListCommits,
+    listCommitsPerSec: roundTailFollowPx(windowListCommits * perSec),
+    buckets: window.buckets,
+  };
+}
+
+let listCommits = 0;
+const windows = new Map<TailFollowSubject, TailFollowWindow>();
+let sweepTimer: number | null = null;
+
+/**
+ * One render of the virtualized message list.
+ *
+ * This is the cost a follow pays for changing an item's height, and the number
+ * a follow that scrolls inside an item is claiming not to move. Counted rather
+ * than logged: it only means something next to a window of steps.
+ */
+export function noteFlowListCommit(): void {
+  if (!isFlowChatDiagnosticsEnabled()) return;
+  listCommits += 1;
+}
+
+function emitTailFollowWindow(
+  subject: TailFollowSubject,
+  window: TailFollowWindow,
+  nowMs: number,
+): void {
+  const summary = summariseTailFollowWindow(window, nowMs, listCommits);
+  flowChatDiagnostics.trace({
+    hypothesis: FLOWCHAT_TAIL_FOLLOW_PROBE,
+    location: `tailFollow.${subject}`,
+    message: 'a window of tail following',
+    data: () => ({ subject, ...summary }),
+  });
+}
+
+/**
+ * Close out windows nothing has written to for a while.
+ *
+ * Without this the last window of a stream is never reported, and the end of a
+ * stream is where a smoothing change is most likely to misbehave.
+ */
+function scheduleTailFollowSweep(): void {
+  if (sweepTimer !== null || typeof globalThis.window === 'undefined') return;
+  sweepTimer = globalThis.window.setTimeout(() => {
+    sweepTimer = null;
+    const nowMs = performance.now();
+    for (const [subject, pending] of [...windows]) {
+      if (nowMs - pending.startedAtMs < TAIL_FOLLOW_WINDOW_MS) continue;
+      emitTailFollowWindow(subject, pending, nowMs);
+      windows.delete(subject);
+    }
+    if (windows.size > 0) scheduleTailFollowSweep();
+  }, TAIL_FOLLOW_WINDOW_MS);
+}
+
+/** Record one write of a following scroll offset. */
+export function noteTailFollowStep(
+  subject: TailFollowSubject,
+  sample: TailFollowStepSample,
+): void {
+  if (!isFlowChatDiagnosticsEnabled()) return;
+
+  const nowMs = performance.now();
+  let pending = windows.get(subject);
+  if (pending && nowMs - pending.startedAtMs >= TAIL_FOLLOW_WINDOW_MS) {
+    emitTailFollowWindow(subject, pending, nowMs);
+    pending = undefined;
+  }
+  windows.set(
+    subject,
+    accumulateTailFollowStep(pending ?? createTailFollowWindow(nowMs, listCommits), sample),
+  );
+  scheduleTailFollowSweep();
+}
+
+export function resetTailFollowDiagnosticsForTests(): void {
+  listCommits = 0;
+  windows.clear();
+  if (sweepTimer !== null && typeof globalThis.window !== 'undefined') {
+    globalThis.window.clearTimeout(sweepTimer);
+  }
+  sweepTimer = null;
+}
diff --git a/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.test.ts b/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.test.ts
new file mode 100644
index 0000000000..6c0099a8c2
--- /dev/null
+++ b/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.test.ts
@@ -0,0 +1,203 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const diagnosticsMocks = vi.hoisted(() => ({
+  trace: vi.fn(),
+  isEnabled: vi.fn(() => true),
+}));
+
+vi.mock('./flowChatDiagnostics', () => ({
+  flowChatDiagnostics: { trace: diagnosticsMocks.trace },
+  isFlowChatDiagnosticsEnabled: diagnosticsMocks.isEnabled,
+}));
+
+import {
+  coalesceViewportRepeat,
+  FLOWCHAT_VIEWPORT_PROBE,
+  resetViewportDiagnosticsForTests,
+  traceViewportPlacement,
+  traceViewportRepeating,
+  VIEWPORT_TRACE_REPEAT_INTERVAL_MS,
+} from './flowChatViewportDiagnostics';
+
+describe('coalesceViewportRepeat', () => {
+  it('emits the first sample of a run, which is the transition', () => {
+    const decision = coalesceViewportRepeat(null, { nowMs: 1_000 });
+
+    expect(decision.emit).toEqual({
+      suppressedCount: 0,
+      suppressedTravelPx: 0,
+      suppressedForMs: 0,
+    });
+  });
+
+  it('folds samples inside the interval into the next emission', () => {
+    let state = coalesceViewportRepeat(null, { nowMs: 0 }).state;
+    for (let frame = 1; frame <= 12; frame += 1) {
+      const decision = coalesceViewportRepeat(state, { nowMs: frame * 16, travelPx: -2 });
+      expect(decision.emit).toBeNull();
+      state = decision.state;
+    }
+
+    const emitted = coalesceViewportRepeat(state, {
+      nowMs: VIEWPORT_TRACE_REPEAT_INTERVAL_MS,
+      travelPx: -2,
+    });
+
+    expect(emitted.emit).toEqual({
+      suppressedCount: 12,
+      // Travel is accumulated as distance, so a run that never nets anywhere is
+      // still visible as movement.
+      suppressedTravelPx: 24,
+      suppressedForMs: VIEWPORT_TRACE_REPEAT_INTERVAL_MS - 16,
+    });
+  });
+
+  it('starts the suppression clock at the first suppressed sample, not the last emission', () => {
+    const first = coalesceViewportRepeat(null, { nowMs: 0 });
+    const suppressed = coalesceViewportRepeat(first.state, { nowMs: 400 });
+
+    expect(suppressed.state.firstSuppressedAtMs).toBe(400);
+    expect(coalesceViewportRepeat(suppressed.state, { nowMs: 500 }).emit).toMatchObject({
+      suppressedCount: 1,
+      suppressedForMs: 100,
+    });
+  });
+
+  it('reports nothing suppressed for a run that resumes after a quiet interval', () => {
+    const first = coalesceViewportRepeat(null, { nowMs: 0 });
+
+    expect(coalesceViewportRepeat(first.state, { nowMs: 5_000 }).emit).toEqual({
+      suppressedCount: 0,
+      suppressedTravelPx: 0,
+      suppressedForMs: 0,
+    });
+  });
+});
+
+describe('traceViewportRepeating', () => {
+  beforeEach(() => {
+    diagnosticsMocks.trace.mockReset();
+    diagnosticsMocks.isEnabled.mockReturnValue(true);
+    resetViewportDiagnosticsForTests();
+  });
+
+  it('emits once per key per interval and carries what it stands for', () => {
+    const nowSpy = vi.spyOn(performance, 'now');
+    nowSpy.mockReturnValue(0);
+    traceViewportRepeating('write|follow-output|granted', {
+      location: 'viewportOwner.write',
+      message: 'wrote',
+      travelPx: 10,
+    });
+    nowSpy.mockReturnValue(16);
+    traceViewportRepeating('write|follow-output|granted', {
+      location: 'viewportOwner.write',
+      message: 'wrote',
+      travelPx: 10,
+    });
+
+    expect(diagnosticsMocks.trace).toHaveBeenCalledTimes(1);
+
+    nowSpy.mockReturnValue(600);
+    traceViewportRepeating('write|follow-output|granted', {
+      location: 'viewportOwner.write',
+      message: 'wrote',
+      travelPx: 10,
+      data: () => ({ owner: 'follow-output' }),
+    });
+
+    expect(diagnosticsMocks.trace).toHaveBeenCalledTimes(2);
+    const probe = diagnosticsMocks.trace.mock.calls[1][0];
+    expect(probe.hypothesis).toBe(FLOWCHAT_VIEWPORT_PROBE);
+    expect(probe.data()).toEqual({
+      owner: 'follow-output',
+      repeated: { suppressedCount: 1, suppressedTravelPx: 10, suppressedForMs: 584 },
+    });
+    nowSpy.mockRestore();
+  });
+
+  it('keeps interleaved runs apart, so a change of outcome is never buried', () => {
+    traceViewportRepeating('write|follow-output|granted', {
+      location: 'viewportOwner.write',
+      message: 'wrote',
+    });
+    traceViewportRepeating('write|anchor-correction|refused', {
+      location: 'viewportOwner.write',
+      message: 'refused',
+    });
+
+    expect(diagnosticsMocks.trace).toHaveBeenCalledTimes(2);
+  });
+
+  it('evaluates nothing while diagnostics are off', () => {
+    diagnosticsMocks.isEnabled.mockReturnValue(false);
+    const data = vi.fn(() => ({ scrollTop: 1 }));
+
+    traceViewportRepeating('write|follow-output|granted', {
+      location: 'viewportOwner.write',
+      message: 'wrote',
+      data,
+    });
+
+    expect(data).not.toHaveBeenCalled();
+    expect(diagnosticsMocks.trace).not.toHaveBeenCalled();
+  });
+});
+
+describe('traceViewportPlacement', () => {
+  beforeEach(() => {
+    diagnosticsMocks.trace.mockReset();
+    diagnosticsMocks.isEnabled.mockReturnValue(true);
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('reports the drift a later writer introduced', () => {
+    const scroller = document.createElement('div');
+    Object.defineProperty(scroller, 'scrollTop', { value: 0, writable: true });
+
+    traceViewportPlacement(
+      scroller,
+      { location: 'navigation.scrollIntoView', message: 'placed', targetPx: 900 },
+      () => {
+        scroller.scrollTop = 900;
+      },
+    );
+    // Something else took the viewport back after the placement landed.
+    scroller.scrollTop = 120;
+    vi.runAllTimers();
+
+    expect(diagnosticsMocks.trace).toHaveBeenCalledTimes(2);
+    expect(diagnosticsMocks.trace.mock.calls[0][0].data()).toMatchObject({
+      beforePx: 0,
+      placedPx: 900,
+      targetPx: 900,
+    });
+    expect(diagnosticsMocks.trace.mock.calls[1][0].location)
+      .toBe('navigation.scrollIntoView.outcome');
+    expect(diagnosticsMocks.trace.mock.calls[1][0].data()).toMatchObject({
+      settledPx: 120,
+      driftPx: -780,
+    });
+  });
+
+  it('still performs the placement while diagnostics are off', () => {
+    diagnosticsMocks.isEnabled.mockReturnValue(false);
+    const place = vi.fn();
+
+    traceViewportPlacement(
+      document.createElement('div'),
+      { location: 'navigation.scrollIntoView', message: 'placed' },
+      place,
+    );
+    vi.runAllTimers();
+
+    expect(place).toHaveBeenCalledTimes(1);
+    expect(diagnosticsMocks.trace).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.ts b/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.ts
new file mode 100644
index 0000000000..a7b0e09ce7
--- /dev/null
+++ b/src/web-ui/src/infrastructure/diagnostics/flowChatViewportDiagnostics.ts
@@ -0,0 +1,249 @@
+/**
+ * What moved the FlowChat viewport, recorded for after the fact.
+ *
+ * Every viewport fault this transcript has produced is intermittent, invisible
+ * in the DOM once it is over, and identical in the UI to two or three other
+ * causes: a Turn that lands and is then dragged away looks exactly like a Turn
+ * that never landed. Reproducing one with temporary probes takes a round trip
+ * through the user, and the reproduction is rarely the same twice.
+ *
+ * So the trail is permanent and gated on `app.logging.flow_chat_diagnostics`,
+ * the same switch history paging uses. Nothing here evaluates a payload while
+ * the switch is off.
+ *
+ * Two kinds of thing are worth recording, and they are deliberately different:
+ *
+ * - **Writes**, at the register. Who moved the viewport, where to, and who was
+ *   refused. One place, because every deliberate write goes through one place.
+ * - **Decisions**, at each writer. Why it wanted to move, and — more
+ *   useful — why it did not. A write that never happened leaves nothing at the
+ *   register to find, and "nothing happened" has been the symptom more often
+ *   than a wrong move has.
+ *
+ * Both run at frame rate in the worst case, so repeated identical events
+ * collapse into one entry per interval carrying what it stands for. The point
+ * of the log is the transitions; a thousand copies of a steady state only bury
+ * them.
+ */
+
+import { flowChatDiagnostics, isFlowChatDiagnosticsEnabled } from './flowChatDiagnostics';
+
+/** Probe tag for everything about the viewport in `flowchat.log`. */
+export const FLOWCHAT_VIEWPORT_PROBE = 'viewport';
+
+/** Shortest gap between two emissions of the same repeating event. */
+export const VIEWPORT_TRACE_REPEAT_INTERVAL_MS = 500;
+
+/**
+ * How long after a placement its result is read back.
+ *
+ * Long enough for the writers that undo a placement to have done it — the
+ * anchor's settle window and the virtualizer's re-aim both act within a few
+ * frames — and short enough that the reader's next gesture is not what the
+ * sample ends up describing.
+ */
+export const VIEWPORT_PLACEMENT_SETTLE_MS = 400;
+
+/** Repeat keys tracked at once, past which the least recently seen is dropped. */
+const MAX_TRACKED_REPEAT_KEYS = 64;
+
+export interface ViewportTraceProbe {
+  /** `subject.event`, e.g. `viewportOwner.write` or `followOutput.enter`. */
+  location: string;
+  message: string;
+  data?: () => Record<string, unknown>;
+}
+
+/** Round to a tenth. Anchor corrections that mattered have been 0.7px. */
+export function roundViewportPx(value: number): number {
+  return Math.round(value * 10) / 10;
+}
+
+export function isViewportDiagnosticsEnabled(): boolean {
+  return isFlowChatDiagnosticsEnabled();
+}
+
+export function traceViewport(probe: ViewportTraceProbe): void {
+  flowChatDiagnostics.trace({ hypothesis: FLOWCHAT_VIEWPORT_PROBE, ...probe });
+}
+
+export interface ViewportRepeatState {
+  lastEmitAtMs: number;
+  suppressedCount: number;
+  suppressedTravelPx: number;
+  firstSuppressedAtMs: number;
+}
+
+/** What an emission stands for besides itself. Absent when it stands alone. */
+export interface ViewportRepeatSummary {
+  suppressedCount: number;
+  suppressedTravelPx: number;
+  suppressedForMs: number;
+}
+
+export interface ViewportRepeatDecision {
+  state: ViewportRepeatState;
+  /** Null when this sample is folded into a later emission instead. */
+  emit: ViewportRepeatSummary | null;
+}
+
+/**
+ * Whether a repeating event is emitted now or folded into the next one.
+ *
+ * An event never seen before always emits: the first of a run is the
+ * transition, which is the part worth having. Everything after it waits out the
+ * interval, and what waited is reported when the interval ends — a count and
+ * the travel it accounted for, so that a run of 60 one-pixel corrections is
+ * legible as exactly that rather than as one correction.
+ *
+ * Callers key by the fields that distinguish one run from another, so a change
+ * of owner, or of outcome, is a new key and emits at once.
+ */
+export function coalesceViewportRepeat(
+  state: ViewportRepeatState | null,
+  sample: { nowMs: number; travelPx?: number },
+  intervalMs: number = VIEWPORT_TRACE_REPEAT_INTERVAL_MS,
+): ViewportRepeatDecision {
+  const fresh: ViewportRepeatState = {
+    lastEmitAtMs: sample.nowMs,
+    suppressedCount: 0,
+    suppressedTravelPx: 0,
+    firstSuppressedAtMs: sample.nowMs,
+  };
+
+  if (state === null) {
+    return {
+      state: fresh,
+      emit: { suppressedCount: 0, suppressedTravelPx: 0, suppressedForMs: 0 },
+    };
+  }
+
+  if (sample.nowMs - state.lastEmitAtMs >= intervalMs) {
+    return {
+      state: fresh,
+      emit: {
+        suppressedCount: state.suppressedCount,
+        suppressedTravelPx: roundViewportPx(state.suppressedTravelPx),
+        suppressedForMs: state.suppressedCount === 0
+          ? 0
+          : Math.round(sample.nowMs - state.firstSuppressedAtMs),
+      },
+    };
+  }
+
+  return {
+    state: {
+      lastEmitAtMs: state.lastEmitAtMs,
+      suppressedCount: state.suppressedCount + 1,
+      suppressedTravelPx: state.suppressedTravelPx + Math.abs(sample.travelPx ?? 0),
+      firstSuppressedAtMs: state.suppressedCount === 0
+        ? sample.nowMs
+        : state.firstSuppressedAtMs,
+    },
+    emit: null,
+  };
+}
+
+const repeatStates = new Map<string, ViewportRepeatState>();
+
+/**
+ * Record something that can happen on every frame.
+ *
+ * `key` is the run's identity: include whatever makes one run a different run —
+ * the owner, the outcome, the direction — and leave out the measurements, which
+ * belong in `data`.
+ */
+export function traceViewportRepeating(
+  key: string,
+  probe: ViewportTraceProbe & { travelPx?: number },
+): void {
+  if (!isFlowChatDiagnosticsEnabled()) return;
+
+  const decision = coalesceViewportRepeat(repeatStates.get(key) ?? null, {
+    nowMs: performance.now(),
+    travelPx: probe.travelPx,
+  });
+  // Re-inserted so the map's insertion order is recency order.
+  repeatStates.delete(key);
+  repeatStates.set(key, decision.state);
+  if (repeatStates.size > MAX_TRACKED_REPEAT_KEYS) {
+    const oldest = repeatStates.keys().next().value;
+    if (oldest !== undefined) repeatStates.delete(oldest);
+  }
+
+  const summary = decision.emit;
+  if (!summary) return;
+  traceViewport({
+    location: probe.location,
+    message: probe.message,
+    data: () => ({
+      ...(probe.data?.() ?? {}),
+      ...(summary.suppressedCount > 0 ? { repeated: summary } : {}),
+    }),
+  });
+}
+
+/**
+ * Record a placement together with what became of it.
+ *
+ * A placement that is immediately undone and one that never happened are the
+ * same complaint from the reader's side, and the difference is only visible in
+ * the frames afterwards. So the offset is sampled on the next frame and again
+ * once things have settled, and the drift from the target is reported with it.
+ * Reading that against the register's own writes says who took it away.
+ *
+ * The placement runs whether or not diagnostics are on; only the sampling is
+ * conditional.
+ */
+export function traceViewportPlacement(
+  scroller: HTMLElement | null,
+  probe: ViewportTraceProbe & {
+    /** Where the placement was aiming, when that is known separately. */
+    targetPx?: number;
+    /** Longer for an animated placement, which is still travelling at 400ms. */
+    settleAfterMs?: number;
+  },
+  place: () => void,
+): void {
+  if (!isFlowChatDiagnosticsEnabled() || !scroller) {
+    place();
+    return;
+  }
+
+  const beforePx = scroller.scrollTop;
+  place();
+  const placedPx = scroller.scrollTop;
+  traceViewport({
+    location: probe.location,
+    message: probe.message,
+    data: () => ({
+      ...(probe.data?.() ?? {}),
+      beforePx: roundViewportPx(beforePx),
+      placedPx: roundViewportPx(placedPx),
+      ...(probe.targetPx === undefined ? {} : { targetPx: roundViewportPx(probe.targetPx) }),
+    }),
+  });
+
+  const targetPx = probe.targetPx ?? placedPx;
+  let nextFramePx: number | null = null;
+  requestAnimationFrame(() => {
+    nextFramePx = scroller.scrollTop;
+  });
+  window.setTimeout(() => {
+    const settledPx = scroller.scrollTop;
+    traceViewport({
+      location: `${probe.location}.outcome`,
+      message: 'where the placement ended up',
+      data: () => ({
+        targetPx: roundViewportPx(targetPx),
+        nextFramePx: nextFramePx === null ? null : roundViewportPx(nextFramePx),
+        settledPx: roundViewportPx(settledPx),
+        driftPx: roundViewportPx(settledPx - targetPx),
+      }),
+    });
+  }, probe.settleAfterMs ?? VIEWPORT_PLACEMENT_SETTLE_MS);
+}
+
+export function resetViewportDiagnosticsForTests(): void {
+  repeatStates.clear();
+}
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 5f32bb8431..2d18188d17 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -93,6 +93,7 @@
     "failedDescription": "Retry loading the saved conversation. If it was imported from another device, check your account and connection first.",
     "preparingOlderHistory": "Preparing older history...",
     "olderHistoryNotReady": "Older history is not ready yet.",
+    "newerHistoryNotReady": "Newer history is not ready yet.",
     "remoteSessionMissing": "The backend session data was not found. If you just reconnected an SSH remote workspace, close and reopen the remote project, or create a new session and try again.",
     "retry": "Retry"
   },
@@ -174,7 +175,6 @@
       "tokens": "{{value}} tokens"
     },
     "loading": {
-      "markdown": "Generating usage report...",
       "title": "Generating usage report",
       "description": "Reading local session records and preparing a privacy-safe summary.",
       "steps": {
@@ -315,7 +315,9 @@
     },
     "slowestLabels": {
       "modelCall": "Turn {{turn}} model call",
-      "modelCallUnknown": "Model call"
+      "modelCallUnknown": "Model call",
+      "turn": "Turn {{turn}}",
+      "turnUnknown": "Turn"
     },
     "slowest": {
       "details": {
@@ -485,11 +487,6 @@
     "rollbackDialogIntro": "This will:",
     "rollbackDialogBulletFiles": "Undo all file modifications from that turn onwards",
     "rollbackDialogBulletHistory": "Delete that turn and all following dialog records (irreversible)",
-    "rollbackPanelDialogTitle": "Roll back to before turn {{index}}?",
-    "rollbackPanelDialogIntro": "This will:",
-    "rollbackPanelBulletRestore": "Restore files to the state before turn {{index}}",
-    "rollbackPanelBulletUndo": "Undo all file changes from that turn onward",
-    "rollbackPanelBulletHistory": "Keep the session history (you can roll forward again anytime)",
     "rollbackSuccess": "Rolled back and deleted subsequent dialog records",
     "rollbackFailed": "Rollback failed",
     "saveEdit": "Save and rerun",
@@ -1325,9 +1322,6 @@
       "failed": "Command failed"
     }
   },
-  "stickyTaskIndicator": {
-    "tooltip": "Jump to current task"
-  },
   "sessionFilesBadge": {
     "files": "files",
     "filesSummaryCount": "{{count}} files",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 858c5559f7..30a00303cd 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -93,6 +93,7 @@
     "failedDescription": "可以重新加载已保存的会话内容；若会话来自其他设备，请先检查账号登录与网络连接。",
     "preparingOlderHistory": "正在准备更早的历史记录...",
     "olderHistoryNotReady": "更早的历史记录暂未准备好。",
+    "newerHistoryNotReady": "更新的历史记录暂未准备好。",
     "remoteSessionMissing": "在后端找不到该会话数据。若刚重新连接过 SSH 远程工作区，请关闭并重新打开该远程项目，或新建会话后再试。",
     "retry": "重试"
   },
@@ -174,7 +175,6 @@
       "tokens": "{{value}} Tokens"
     },
     "loading": {
-      "markdown": "正在生成用量报告...",
       "title": "正在生成用量报告",
       "description": "正在读取本地会话记录，并整理隐私安全的统计摘要。",
       "steps": {
@@ -280,7 +280,9 @@
     },
     "slowestLabels": {
       "modelCall": "第 {{turn}} 轮模型调用",
-      "modelCallUnknown": "模型调用"
+      "modelCallUnknown": "模型调用",
+      "turn": "第 {{turn}} 轮",
+      "turnUnknown": "轮次"
     },
     "slowest": {
       "details": {
@@ -485,11 +487,6 @@
     "rollbackDialogIntro": "将执行：",
     "rollbackDialogBulletFiles": "撤销从该轮开始的所有文件修改",
     "rollbackDialogBulletHistory": "删除该轮及之后的对话记录（不可恢复）",
-    "rollbackPanelDialogTitle": "回滚到第 {{index}} 轮之前？",
-    "rollbackPanelDialogIntro": "将执行：",
-    "rollbackPanelBulletRestore": "将文件恢复到第 {{index}} 轮之前的状态",
-    "rollbackPanelBulletUndo": "撤销从该轮开始的所有文件变更",
-    "rollbackPanelBulletHistory": "保留会话历史（之后仍可继续对话）",
     "rollbackSuccess": "已回滚并删除后续对话记录",
     "rollbackFailed": "回滚失败",
     "saveEdit": "保存并重跑",
@@ -1325,9 +1322,6 @@
       "failed": "命令失败"
     }
   },
-  "stickyTaskIndicator": {
-    "tooltip": "跳转到当前任务"
-  },
   "sessionFilesBadge": {
     "files": "文件",
     "filesSummaryCount": "{{count}} 个文件",
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index 5d3f65d735..48726b91d6 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -93,6 +93,7 @@
     "failedDescription": "可以重新載入已儲存的會話內容；若會話來自其他裝置，請先檢查帳號登入與網路連線。",
     "preparingOlderHistory": "正在準備更早的歷史記錄...",
     "olderHistoryNotReady": "更早的歷史記錄暫未準備好。",
+    "newerHistoryNotReady": "更新的歷史記錄暫未準備好。",
     "remoteSessionMissing": "在後端找不到該會話資料。若剛重新連接過 SSH 遠端工作區，請關閉並重新開啟該遠端項目，或新增會話後再試。",
     "retry": "重試"
   },
@@ -174,7 +175,6 @@
       "tokens": "{{value}} Tokens"
     },
     "loading": {
-      "markdown": "正在產生用量報告...",
       "title": "正在產生用量報告",
       "description": "正在讀取本機工作階段記錄，並整理隱私安全的統計摘要。",
       "steps": {
@@ -280,7 +280,9 @@
     },
     "slowestLabels": {
       "modelCall": "第 {{turn}} 回合模型呼叫",
-      "modelCallUnknown": "模型呼叫"
+      "modelCallUnknown": "模型呼叫",
+      "turn": "第 {{turn}} 回合",
+      "turnUnknown": "回合"
     },
     "slowest": {
       "details": {
@@ -485,11 +487,6 @@
     "rollbackDialogIntro": "將執行：",
     "rollbackDialogBulletFiles": "撤銷從該輪開始的所有檔案修改",
     "rollbackDialogBulletHistory": "刪除該輪及之後的對話記錄（不可恢復）",
-    "rollbackPanelDialogTitle": "回滾到第 {{index}} 輪之前？",
-    "rollbackPanelDialogIntro": "將執行：",
-    "rollbackPanelBulletRestore": "將檔案恢復到第 {{index}} 輪之前的狀態",
-    "rollbackPanelBulletUndo": "撤銷從該輪開始的所有檔案變更",
-    "rollbackPanelBulletHistory": "保留會話歷史（之後仍可繼續對話）",
     "rollbackSuccess": "已回滾並刪除後續對話記錄",
     "rollbackFailed": "回滾失敗",
     "saveEdit": "儲存並重跑",
@@ -1325,9 +1322,6 @@
       "failed": "命令失敗"
     }
   },
-  "stickyTaskIndicator": {
-    "tooltip": "跳轉到目前任務"
-  },
   "sessionFilesBadge": {
     "files": "檔案",
     "filesSummaryCount": "{{count}} 個檔案",
diff --git a/tests/e2e/specs/l1-chat-scroll-whitespace.spec.ts b/tests/e2e/specs/l1-chat-scroll-whitespace.spec.ts
index 6f4361380e..22bf40d7fe 100644
--- a/tests/e2e/specs/l1-chat-scroll-whitespace.spec.ts
+++ b/tests/e2e/specs/l1-chat-scroll-whitespace.spec.ts
@@ -33,8 +33,8 @@ async function dumpDomDiagnostics(): Promise<void> {
       if (tid && (tid.includes('chat') || tid.includes('session') || tid.includes('message'))) {
         testIdSet.add(tid);
       }
-      if (el.hasAttribute('data-virtuoso-scroller')) {
-        classSet.add('[data-virtuoso-scroller]');
+      if (el.hasAttribute('data-flowchat-scroller')) {
+        classSet.add('[data-flowchat-scroller]');
       }
     }
     // Read data attributes from the messages container
@@ -43,7 +43,7 @@ async function dumpDomDiagnostics(): Promise<void> {
       relevantClasses: Array.from(classSet).sort(),
       relevantTestIds: Array.from(testIdSet).sort(),
       virtualMessageList: !!document.querySelector('.virtual-message-list'),
-      virtuosoScroller: !!document.querySelector('[data-virtuoso-scroller]'),
+      flowChatScroller: !!document.querySelector('[data-flowchat-scroller]'),
       messageListFooter: !!document.querySelector('.message-list-footer'),
       chatInputContainer: !!document.querySelector('[data-testid="chat-input-container"]'),
       sessionScene: !!document.querySelector('.bitfun-session-scene'),
@@ -409,7 +409,7 @@ describe('L1 Chat Scroll Whitespace (#1176)', () => {
   }> {
     return browser.execute(() => {
       // Find the scroller DOM element
-      const scrollerEl = document.querySelector('[data-virtuoso-scroller]') as HTMLElement | null;
+      const scrollerEl = document.querySelector('[data-flowchat-scroller]') as HTMLElement | null;
       const footer = document.querySelector('.message-list-footer') as HTMLElement | null;
 
       // Try to find the React component instance via fiber
@@ -491,7 +491,7 @@ describe('L1 Chat Scroll Whitespace (#1176)', () => {
       // Strategy: Walk the fiber tree from DOM elements inside VirtualMessageList,
       // then traverse the hooks chain to find bottomReservationStateRef.
       const rootCandidates = [
-        document.querySelector('[data-virtuoso-scroller]'),
+        document.querySelector('[data-flowchat-scroller]'),
         document.querySelector('.virtual-message-list'),
         document.querySelector('.message-list-footer'),
       ];
@@ -569,7 +569,7 @@ describe('L1 Chat Scroll Whitespace (#1176)', () => {
       // Force layout reflow
       void footer.offsetHeight;
 
-      const scroller = document.querySelector('[data-virtuoso-scroller]') as HTMLElement | null;
+      const scroller = document.querySelector('[data-flowchat-scroller]') as HTMLElement | null;
       if (scroller) void scroller.scrollHeight;
 
       return true;
@@ -587,7 +587,7 @@ describe('L1 Chat Scroll Whitespace (#1176)', () => {
   }> {
     return browser.execute(() => {
       const el = (
-        document.querySelector('[data-virtuoso-scroller]') ||
+        document.querySelector('[data-flowchat-scroller]') ||
         document.querySelector('.virtual-message-list__static-scroller') ||
         document.querySelector('.virtual-message-list')
       ) as HTMLElement | null;
@@ -634,7 +634,7 @@ describe('L1 Chat Scroll Whitespace (#1176)', () => {
 
     // Verify scroller exists
     const scrollerExists = await browser.execute(() => {
-      return !!document.querySelector('[data-virtuoso-scroller]');
+      return !!document.querySelector('[data-flowchat-scroller]');
     });
     expect(scrollerExists).toBe(true);
 
diff --git a/tests/e2e/specs/l1-chat-turn-navigation-release.spec.ts b/tests/e2e/specs/l1-chat-turn-navigation-release.spec.ts
index 9728bf79f0..dd416a5c67 100644
--- a/tests/e2e/specs/l1-chat-turn-navigation-release.spec.ts
+++ b/tests/e2e/specs/l1-chat-turn-navigation-release.spec.ts
@@ -153,7 +153,7 @@ async function readTurnViewportMetrics(targetTurnId: string): Promise<TurnViewpo
       '.modern-flowchat-container__messages .virtual-message-list',
     );
     const scroller = root?.querySelector<HTMLElement>(
-      '[data-virtuoso-scroller="true"], [data-virtuoso-scroller], .virtual-message-list__static-scroller',
+      '[data-flowchat-scroller], .virtual-message-list__static-scroller',
     ) ?? null;
     const wrappers = Array.from(root?.querySelectorAll<HTMLElement>(
       '.virtual-item-wrapper[data-turn-id]',
@@ -237,7 +237,7 @@ async function waitForSessionHydrated(): Promise<void> {
         '.modern-flowchat-container__messages .virtual-message-list',
       );
       const scroller = root?.querySelector<HTMLElement>(
-        '[data-virtuoso-scroller="true"], [data-virtuoso-scroller], .virtual-message-list__static-scroller',
+        '[data-flowchat-scroller], .virtual-message-list__static-scroller',
       ) ?? null;
       const items = root?.querySelectorAll('.virtual-item-wrapper[data-turn-id]') ?? [];
       return {
@@ -298,8 +298,7 @@ async function readHeaderTurnListTexts(): Promise<string[]> {
 async function scrollToPreviousHistoryBoundary(): Promise<void> {
   await browser.execute(() => {
     const scroller = document.querySelector<HTMLElement>(
-      '.modern-flowchat-container__messages .virtual-message-list [data-virtuoso-scroller="true"], ' +
-      '.modern-flowchat-container__messages .virtual-message-list [data-virtuoso-scroller], ' +
+      '.modern-flowchat-container__messages .virtual-message-list [data-flowchat-scroller], ' +
       '.modern-flowchat-container__messages .virtual-message-list .virtual-message-list__static-scroller',
     );
     if (!scroller) {
@@ -362,8 +361,7 @@ async function revealHistoryUntilTurnListContains(targetTitle: string): Promise<
 async function scrollToLatest(targetTurnId: string): Promise<TurnViewportMetrics> {
   await browser.execute(() => {
     const scroller = document.querySelector<HTMLElement>(
-      '.modern-flowchat-container__messages .virtual-message-list [data-virtuoso-scroller="true"], ' +
-      '.modern-flowchat-container__messages .virtual-message-list [data-virtuoso-scroller], ' +
+      '.modern-flowchat-container__messages .virtual-message-list [data-flowchat-scroller], ' +
       '.modern-flowchat-container__messages .virtual-message-list .virtual-message-list__static-scroller',
     );
     if (!scroller) {
diff --git a/tests/e2e/specs/performance/startup-session-perf.spec.ts b/tests/e2e/specs/performance/startup-session-perf.spec.ts
index 673504ba41..201ab2f218 100644
--- a/tests/e2e/specs/performance/startup-session-perf.spec.ts
+++ b/tests/e2e/specs/performance/startup-session-perf.spec.ts
@@ -1013,7 +1013,7 @@ async function readLongSessionViewportState(expectedLatestTurnId?: string | null
       '.modern-flowchat-container__messages .virtual-message-list',
     );
     const scroller = root?.querySelector<HTMLElement>(
-      '[data-virtuoso-scroller="true"], [data-virtuoso-scroller]',
+      '[data-flowchat-scroller]',
     ) ?? null;
     const staticScroller = root?.querySelector<HTMLElement>('.virtual-message-list__static-scroller') ?? null;
     const staticItems = root?.querySelector<HTMLElement>('.virtual-message-list__static-items') ?? null;
@@ -1642,7 +1642,7 @@ async function startLongSessionViewportTimelineRecorder(
         };
       }
 
-      if (element.closest('[data-virtuoso-scroller], .virtual-message-list')) {
+      if (element.closest('[data-flowchat-scroller], .virtual-message-list')) {
         return {
           category: 'list-blank',
           itemType: null,
@@ -1839,7 +1839,7 @@ async function startLongSessionViewportTimelineRecorder(
         messages?.querySelectorAll<HTMLElement>('.virtual-message-list') ?? []
       );
       const scroller = messages?.querySelector<HTMLElement>(
-        '[data-virtuoso-scroller="true"], [data-virtuoso-scroller]',
+        '[data-flowchat-scroller]',
       ) ?? null;
       const virtualItems = Array.from(
         scroller?.querySelectorAll<HTMLElement>('.virtual-item-wrapper[data-turn-id]') ?? []
@@ -1946,7 +1946,7 @@ async function startLongSessionViewportTimelineRecorder(
         '.modern-flowchat-container__messages .virtual-message-list',
       );
       const scroller = root?.querySelector<HTMLElement>(
-        '[data-virtuoso-scroller="true"], [data-virtuoso-scroller]',
+        '[data-flowchat-scroller]',
       ) ?? null;
       const footer = scroller?.querySelector<HTMLElement>('.message-list-footer') ?? null;
       const footerRect = footer?.getBoundingClientRect() ?? null;
@@ -2351,7 +2351,7 @@ async function startLongSessionViewportTimelineRecorder(
         '.modern-flowchat-container__messages .virtual-message-list',
       );
       const scroller = root?.querySelector<HTMLElement>(
-        '[data-virtuoso-scroller="true"], [data-virtuoso-scroller]',
+        '[data-flowchat-scroller]',
       ) ?? null;
       const inputOverlay = document.querySelector<HTMLElement>('.bitfun-chat-input-drop-zone');
       const scrollerRect = scroller?.getBoundingClientRect() ?? null;
@@ -3809,8 +3809,7 @@ async function readLongSessionScrollerMetrics(): Promise<{
 }> {
   return browser.execute(() => {
     const scroller = document.querySelector<HTMLElement>(
-      '.modern-flowchat-container__messages [data-virtuoso-scroller="true"], ' +
-      '.modern-flowchat-container__messages [data-virtuoso-scroller]',
+      '.modern-flowchat-container__messages [data-flowchat-scroller]',
     );
     if (!scroller) {
       throw new Error('Could not find long-session scroller for post-visible interaction');
@@ -3882,8 +3881,7 @@ async function performLongSessionPostVisibleInteraction(
 
   return browser.execute((interactionType) => {
     const scroller = document.querySelector<HTMLElement>(
-      '.modern-flowchat-container__messages [data-virtuoso-scroller="true"], ' +
-      '.modern-flowchat-container__messages [data-virtuoso-scroller]',
+      '.modern-flowchat-container__messages [data-flowchat-scroller]',
     );
     if (!scroller) {
       throw new Error('Could not find long-session scroller for first-scroll interaction');