Reader mode pages back too — which is what was asked for

The windowing went into the Trace pane, and the Trace pane is not where anyone
reads a conversation. Reader mode is, and it still fetched the last 400 turns in
one request and stopped there: 702 KB on a 19 MB session, "1,020 earlier
messages are not shown", and no way to reach them. It also re-fetched all 400
every three seconds while the agent worked, each one a full re-parse of the
transcript on the server.

Reader mode now opens on a window of the end, pages backwards when you scroll to
the top, and follows the end with `after=`. Measured on the 19 MB / 1,420-turn
session: the open drops 702 KB → 84 KB, and the poll while an agent works drops
702 KB + a whole-file parse → 359 bytes and a bounded read. Paging back reaches
the first turn in 34 windows.

The paging itself moved to lib/traceWindows.ts and both surfaces use it. Writing
it twice was not an option — the cursor handling, the single-flight guard, the
generation stamp that stops a load outliving its source, the gap and blocked
cases, are all things a review round found rather than things that were obvious.
What stays with each surface is presentation: the Trace pane measures rows and
virtualizes; reader mode renders exchanges and does not.

Anchoring had to differ, and that is the interesting part. The Trace pane pins a
row by its own geometry. Reader mode cannot: its unit is an exchange, and an
exchange at the top of the list is a fragment whose prompt was in the window we
had not read yet — when that window arrives the two become ONE exchange, so the
element the reader was looking at ceases to exist. What does not change is that
everything new is added above, so it restores the distance to the bottom
instead. Verified by what is under the middle of the pane rather than by element
identity: same text before and after.

No virtualization in reader mode yet, because measurement says it is not needed:
the whole 1,420-turn conversation paged in is 2,719 DOM nodes scrolling at a
16.6 ms median frame (worst 19.3 ms). Windowing by exchange (spec §10.7) is
still the right next step for a session an order of magnitude longer.

Two bugs this shook out, both mine, both caught by the browser checks rather than
by reasoning:

- the shared hook has to say whether turns arrived at the FRONT or the BACK. A
single "the array grew" path prepended height slots for an append too, which
silently misaligned the Trace pane's height model on every live poll.
- a prepend's scroll anchor must outrank a measurement's. The ResizeObserver
captures an anchor to keep the view still across a re-measure; landing between
a prepend's capture and its restore, it overwrote the anchor with the OLD
indexing, and the view was restored a whole window away from where the reader
was — which then triggered another load, and another.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/src/components/TracePane.tsx

@@ -17,28 +17,16 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import type { ReactNode } from 'react';
 import type { Session } from '../types';
 import * as api from '../api';
-import type { TraceBlock, TraceCursor, TraceSummary, TraceTurn, TraceWindow } from '../api';
+import type { TraceBlock, TraceTurn } from '../api';
+import { useTraceWindows, type TraceHeadInfo, type TraceSource } from '../lib/traceWindows';
 import { renderMarkdown } from '../lib/markdown';
 import Logo from './Logo';
 import { CloseGlyph } from './icons';
 
-// How much transcript the first request asks for. Measured on the longest trace
-// on this box (19 MB / 1,395 turns): 384 KB is ~60 turns, 95 KB of JSON and
-// ~35 ms of server time, and renders in a frame — the smallest window that still
-// opens on a complete-looking conversation rather than a stub. See the PR.
-const WINDOW_BYTES = 384 * 1024;
 const ROW_EST = 44;        // unmeasured row height, collapsed
 const OVERSCAN_PX = 600;
 const NEAR_TOP_PX = 400;   // start fetching older turns before the reader arrives
 const STICK_PX = 24;       // "at the bottom" tolerance for following a live trace
-// Following a trace that is still being written. Nothing in here knows whether
-// an agent is running — but a transcript whose newest turn is seconds old is one
-// being written, so the cadence follows the trace itself: quick while it moves,
-// slow once it has gone quiet, which is also how it notices movement resuming.
-const LIVE_MS = 3_000;
-const IDLE_MS = 10_000;
-const FRESH_MS = 120_000;
-const SUMMARY_DELAY_MS = 400; // let the first paint happen before the whole-file read
 
 const fmtTs = (ms?: number) => (ms ? new Date(ms).toLocaleTimeString() : '');
 const fmtNum = (n: number) => n.toLocaleString();
@@ -208,39 +196,9 @@ function Row({ turn, index }: { turn: TraceTurn; index: number }) {
 // turns arrive one window at a time as you scroll back into them. The only read
 // that touches the whole trace is the summary, which buys the header an honest
 // turn count and is asked for after the first paint.
-export interface TraceSource {
-  window: (req: api.TraceReq, bytes?: number) => Promise<TraceWindow>;
-  summary: () => Promise<TraceSummary>;
-}
-
-/** What a host pane's toolbar needs. `total` is null until the summary lands. */
-export type TraceHeadInfo = Omit<TraceWindow, 'turns' | 'window'> & {
-  /** turns the reader is holding right now */
-  loaded: number;
-  /** the first turn of the conversation is loaded — there is nothing above */
-  atStart: boolean;
-};
-
-type Meta = Omit<TraceWindow, 'turns' | 'window'>;
-
-// Keep whichever value actually says something: a window that doesn't reach the
-// start of the trace reports no session start and no session cost, and must not
-// blank out what an earlier response already told us. Identity is preserved when
-// nothing changed — a poll that learns nothing must not look like new state.
-const mergeMeta = (prev: Meta | null, next: Meta): Meta => {
-  if (!prev) return next;
-  const out = { ...prev } as Record<string, unknown>;
-  let changed = false;
-  for (const [k, v] of Object.entries(next)) {
-    // A window OLDER than what we hold describes an older stretch of the same
-    // conversation. Two of its facts must not travel backwards: `lastTs` drives
-    // how often we look for new turns (scrolling back would otherwise slow the
-    // live tail to a crawl), and `model` is the one the session is running now.
-    if ((k === 'lastTs' || k === 'model') && out[k] && (k !== 'lastTs' || (v as number) <= (out[k] as number))) continue;
-    if ((v || !(k in out)) && out[k] !== v) { out[k] = v; changed = true; }
-  }
-  return changed ? (out as Meta) : prev;
-};
+// The source and the head shape now live with the paging itself, so reader mode
+// can use the same ones — see lib/traceWindows.ts.
+export type { TraceSource, TraceHeadInfo } from '../lib/traceWindows';
 
 export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }: {
   src: TraceSource;
@@ -251,25 +209,6 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
   onHead?: (head: TraceHeadInfo | null) => void;
   onNav?: (go: (dir: -1 | 1) => void) => void;
 }) {
-  const [meta, setMeta] = useState<Meta | null>(null);
-  const [summary, setSummary] = useState<TraceSummary | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const turns = useRef<TraceTurn[]>([]);
-  const cursor = useRef<TraceCursor | null>(null);
-  // ONE request at a time. Flicking the wheel at the top of a long trace fires
-  // scroll events by the dozen, and each one would otherwise start its own load;
-  // they would arrive out of order and prepend the same turns twice.
-  const loading = useRef(false);
-  // Which source the turns in hand belong to. Every load reads this before its
-  // await and checks it after: switch files in the Files pane while a window is
-  // in flight and it would otherwise be prepended to the NEW file's turns, with
-  // the old file's byte cursors and header — a conversation spliced out of two
-  // different transcripts.
-  const gen = useRef(0);
-  const [tick, setTick] = useState(0);
-  const bump = useCallback(() => setTick((n) => n + 1), []);
-
   const scroller = useRef<HTMLDivElement | null>(null);
   const heights = useRef<number[]>([]);
   // Bumped whenever a row is measured: the values live in a ref (so the
@@ -307,26 +246,11 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
   // before the first layout it is 0 because nothing has been placed, and before
   // the first measurement the whole list is 44 px per row, so a window of 19
   // dense turns looks 800 px tall when it is really 3,600 — near enough to the
-  // top to fetch a window of older turns nobody asked for. (Seen on a codex
-  // rollout on the Space; a Claude transcript's 60-turn window hid it.)
+  // top to fetch a window of older turns nobody asked for.
   const positioned = useRef(false);
   const measured = useRef(false);
-
-  // ---- windowing ----
-  // Prefix sums over measured (or estimated) row heights. n is bounded by what
-  // the reader has actually loaded, so a full recompute is cheap and happens
-  // only when a row is measured, turns arrive, or the window moves.
-  const offsets = useMemo(() => {
-    const n = turns.current.length;
-    const acc = new Float64Array(n + 1);
-    for (let i = 0; i < n; i++) acc[i + 1] = acc[i] + (heights.current[i] || ROW_EST);
-    return acc;
-  }, [range, tick, heightsVersion]); // eslint-disable-line react-hooks/exhaustive-deps
-  // The loaders need the offsets as they are NOW, not as they were when the
-  // callback was made.
-  const offsetsRef = useRef(offsets);
-  offsetsRef.current = offsets;
-
+  const wanted = useRef<number | null>(null);
+  const tries = useRef(0);
   // Rendered rows, by index — the ResizeObserver measures through these, and the
   // anchor reads its geometry from them.
   const rowRefs = useRef(new Map<number, HTMLElement>());
@@ -358,173 +282,58 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
     return true;
   };
 
-  // ---- loading ----
-  const loadTail = useCallback(async () => {
-    loading.current = true;
-    const mine = gen.current;
-    try {
-      const { turns: got, window: win, ...m } = await src.window({ at: 'tail' }, WINDOW_BYTES);
-      if (mine !== gen.current) return;
-      turns.current = got;
-      heights.current = new Array(got.length);
-      cursor.current = win;
-      anchor.current = null;
-      stick.current = true;
-      positioned.current = false;
-      measured.current = false;
-      setMeta(m);
-      setError(null);
-      setRange({ start: 0, end: Math.min(got.length, 40) });
-      bump();
-      // Nothing to render means nothing to measure, so no measurement will ever
-      // arrive to unblock the paging: walk back until there is something. After
-      // this call returns, so the one-request-at-a-time guard still holds.
-      if (!got.length && !win.atStart) window.setTimeout(() => loadOlderRef.current(), 0);
-    } catch (e) {
-      if (mine !== gen.current) return;
-      // The server distinguishes "nothing to show yet" from a real failure and
-      // says which — pass its own words through rather than inventing a reason.
-      setError(e instanceof api.TraceUnavailable ? e.message : 'could not read the trace');
-    } finally {
-      if (mine === gen.current) loading.current = false;
-    }
-  }, [src, bump]);
-
-  // loadTail may need loadOlder before it is declared; the ref keeps that honest
-  // without reordering the two.
-  const loadOlderRef = useRef<() => Promise<number>>(async () => 0);
-
-  /** Fetch the window before the oldest turn held. Returns how many arrived. */
-  const loadOlder = useCallback(async () => {
-    const cur = cursor.current;
-    if (loading.current || !cur || cur.atStart || cur.blocked) return 0;
-    loading.current = true;
-    const mine = gen.current;
-    try {
-      let from = cur.start;
-      let atStart = false;
-      let got: TraceTurn[] = [];
-      let meta2: Meta | null = null;
-      let blocked = false;
-      // A window can legitimately hold no turns at all (a stretch of file-history
-      // lines, a run of harness metadata). Keep walking back until it holds
-      // something, the file starts, or the cursor stops moving.
-      for (let hop = 0; hop < 8 && !got.length && !atStart; hop++) {
-        const { turns: page, window: win, ...m } = await src.window({ at: 'before', cursor: from }, WINDOW_BYTES);
-        if (mine !== gen.current) return 0;
-        got = page;
-        meta2 = m;
-        // `blocked` is a line too big for any window — the server cannot get
-        // past it, so neither can we, and this is NOT the start of the trace.
-        blocked = !!win.blocked;
-        atStart = win.atStart || (!blocked && win.start >= from);
-        from = win.start;
-        if (blocked) break;
-      }
-      // Same row, `got.length` places further down the list — see `anchor`.
-      if (got.length && captureAnchor(got.length)) stick.current = false;
-      turns.current = [...got, ...turns.current];
-      heights.current = [...new Array(got.length), ...heights.current];
-      // Everything that names a row BY INDEX moves with the prepend: the keys,
-      // a pending jump, and an anchor captured before this landed. Missing the
-      // jump was worth a runaway — `wanted` kept addressing turn N of the newly
-      // prepended window, which sits a whole window before the turn asked for,
-      // and the restored scroll position then triggered another load.
-      keyBase.current -= got.length;
-      if (wanted.current != null) wanted.current += got.length;
-      // NOT the anchor: captureAnchor() above was already given this shift, and
-      // shifting it a second time threw the view a whole window forward.
-      cursor.current = { ...cur, start: from, atStart, blocked };
-      if (meta2) setMeta((p) => mergeMeta(p, meta2 as Meta));
-      if (got.length) setRange((r) => ({ start: r.start + got.length, end: r.end + got.length }));
-      bump();
-      return got.length;
-    } catch {
-      // Keep what is on screen; the next scroll retries.
-      return 0;
-    } finally {
-      if (mine === gen.current) loading.current = false;
-    }
-  }, [src, bump]);
-  loadOlderRef.current = loadOlder;
-
-  /** Whatever the agent has written since we last looked. */
-  const loadNewer = useCallback(async () => {
-    const cur = cursor.current;
-    if (loading.current || !cur) return;
-    loading.current = true;
-    const mine = gen.current;
-    try {
-      const { turns: got, window: win, ...m } = await src.window({ at: 'after', cursor: cur.end });
-      if (mine !== gen.current) return;
-      if (win.gap) {
-        // More was written than one window can carry. Splicing it in would leave
-        // a hole in the middle of the conversation with nothing to say so —
-        // start again from the new tail instead.
-        turns.current = got;
-        heights.current = new Array(got.length);
-        cursor.current = win;
-        anchor.current = null;
-        stick.current = true;
-        positioned.current = false;
-        measured.current = false;
-        setRange({ start: 0, end: Math.min(got.length, 40) });
-      } else {
-        if (got.length) {
-          turns.current = [...turns.current, ...got];
-          heights.current = [...heights.current, ...new Array(got.length)];
-        }
-        cursor.current = { ...cur, end: win.end, atEnd: win.atEnd };
-      }
-      setMeta((p) => mergeMeta(p, m));
-      if (got.length) bump();
-    } catch {
-      // A poll that fails must not throw away the conversation on screen.
-    } finally {
-      if (mine === gen.current) loading.current = false;
-    }
-  }, [src, bump]);
-
-  useEffect(() => {
-    gen.current += 1;
-    loading.current = false;
-    turns.current = [];
+  // Everything that names a row BY INDEX moves with a prepend: the keys, a
+  // pending jump, and the anchor (which captureAnchor is given the shift for).
+  const onPrepend = useCallback((count: number) => {
+    // Everything that names a row BY INDEX moves with the prepend: the heights,
+    // the keys, the rendered window, and a pending jump. (The anchor is given
+    // the shift by captureAnchor rather than moved afterwards — shifting it
+    // twice throws the view a whole window forward.)
+    heights.current = [...new Array(count), ...heights.current];
+    keyBase.current -= count;
+    if (wanted.current != null) wanted.current += count;
+    if (captureAnchor(count)) stick.current = false;
+    setRange((r) => ({ start: r.start + count, end: r.end + count }));
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onAppend = useCallback((count: number) => {
+    heights.current = [...heights.current, ...new Array(count)];
+  }, []);
+
+  const onReset = useCallback(() => {
     heights.current = [];
-    cursor.current = null;
     anchor.current = null;
     stick.current = true;
     positioned.current = false;
     measured.current = false;
-    setMeta(null);
-    setSummary(null);
     setRange({ start: 0, end: 40 });
-    loadTail();
-  }, [srcKey, loadTail]);
-
-  // The one read that touches the whole file, fired AFTER the first paint: it
-  // buys the header a real turn count, the session's token total and the date
-  // the conversation started — none of which a window can know. If it fails or
-  // is slow, the header simply says how much is loaded.
-  useEffect(() => {
-    let dead = false;
-    const h = window.setTimeout(() => {
-      src.summary().then((s) => { if (!dead) setSummary(s); }).catch(() => {});
-    }, SUMMARY_DELAY_MS);
-    return () => { dead = true; window.clearTimeout(h); };
-  }, [src, srcKey]);
-
-  // The transcript may still be being written — see LIVE_MS above. Except when
-  // "a window" costs a whole-file read: the SQLite harnesses have no byte
-  // offsets to seek, so every poll would re-parse the entire conversation (and
-  // evict the Overview's memo doing it). They are not polled at all, which is
-  // what this pane did for every harness before windows existed.
-  const lastTs = meta ? meta.lastTs : 0;
-  const seekable = cursor.current ? cursor.current.mode === 'bytes' : true;
-  useEffect(() => {
-    if (!seekable) return undefined;
-    const h = window.setInterval(loadNewer, lastTs && Date.now() - lastTs < FRESH_MS ? LIVE_MS : IDLE_MS);
-    return () => window.clearInterval(h);
-  }, [loadNewer, lastTs, seekable]);
+  }, []);
+
+  const { turns, head, error, version: tick, atStart, blocked, loadOlder } =
+    useTraceWindows(src, srcKey, { onPrepend, onReset });
+
+  // Prefix sums over measured (or estimated) row heights. n is bounded by what
+  // the reader has actually loaded, so a full recompute is cheap and happens
+  // only when a row is measured, turns arrive, or the window moves.
+  const offsets = useMemo(() => {
+    const n = turns.current.length;
+    const acc = new Float64Array(n + 1);
+    for (let i = 0; i < n; i++) acc[i + 1] = acc[i] + (heights.current[i] || ROW_EST);
+    return acc;
+  }, [range, tick, heightsVersion]); // eslint-disable-line react-hooks/exhaustive-deps
+  // The loaders need the offsets as they are NOW, not as they were when the
+  // callback was made.
+  const offsetsRef = useRef(offsets);
+  offsetsRef.current = offsets;
+
+  // heights are index-aligned with turns; the hook only ever prepends or appends,
+  // so re-derive the array length from it rather than tracking every mutation.
+  if (heights.current.length !== turns.current.length) {
+    const grew = turns.current.length - heights.current.length;
+    heights.current = grew > 0 && heights.current.length
+      ? [...new Array(grew), ...heights.current]   // older turns arrived on top
+      : new Array(turns.current.length);
+  }
 
   const recompute = useCallback(() => {
     const el = scroller.current;
@@ -545,13 +354,11 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
     if (positioned.current && wanted.current == null && el.scrollTop < NEAR_TOP_PX) loadOlder();
   }, [offsets, range.start, range.end, loadOlder]);
 
-  useEffect(() => { recompute(); }, [recompute, meta]);
+  useEffect(() => { recompute(); }, [recompute, head]);
 
   // ---- keeping the view still ----
   // Every layout change lands here: a jump to a prompt, a prepended window, a
   // row that just measured itself, a new turn while pinned to the bottom.
-  const wanted = useRef<number | null>(null);
-  const tries = useRef(0);
   useLayoutEffect(() => {
     const el = scroller.current;
     if (!el) return;
@@ -627,7 +434,7 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
     }
     // Let the prepend commit before looking again: the recursion would
     // otherwise read the pre-prepend prompt list and fetch another window.
-    if (!cursor.current?.atStart && await loadOlder()) {
+    if (!atStart && await loadOlder()) {
       await new Promise((r) => window.setTimeout(r, 0));
       goRef.current(dir);
       return;
@@ -649,7 +456,11 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
       measured.current = true;
       // Measuring changes the offsets of everything below — and of everything
       // above, if a row above the viewport grew. Pin the row being read.
-      if (!stick.current && wanted.current == null) captureAnchor(0);
+      // Not if an anchor is already waiting: a prepend captured that one against
+      // the indices it is about to shift, and a measurement landing in between
+      // would overwrite it with the OLD indexing — restoring to a row a whole
+      // window away from the one the reader was looking at.
+      if (!stick.current && wanted.current == null && !anchor.current) captureAnchor(0);
       setHeightsVersion((v) => v + 1);
     });
     for (const el of rowRefs.current.values()) ro.observe(el);
@@ -658,7 +469,7 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
     // moving) get measured too — otherwise they keep their 44px estimate and the
     // scroll height stays wrong. NOT heightsVersion: that's what the observer
     // sets, and re-attaching on it would churn on every measurement.
-  }, [range, tick, meta]);
+  }, [range, tick, head]);
 
   const setRowRef = (i: number) => (el: HTMLDivElement | null) => {
     if (el) rowRefs.current.set(i, el); else rowRefs.current.delete(i);
@@ -676,8 +487,6 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
   }, [query, tick, heightsVersion]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const n = turns.current.length;
-  const atStart = !!cursor.current?.atStart;
-  const blocked = !!cursor.current?.blocked;
   const rows: ReactNode[] = [];
   for (let i = range.start; i < Math.min(range.end, n); i++) {
     rows.push(
@@ -697,24 +506,6 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
   // the session id. Taking only the numbers left a reader with no idea the
   // model's reasoning had been withheld, which is the one thing §12 of the spec
   // says must never be left implied.
-  const head = useMemo<TraceHeadInfo | null>(() => (meta ? {
-    ...meta,
-    total: summary ? summary.total : null,
-    userTurns: summary ? summary.userTurns : null,
-    usage: meta.usage || (summary ? summary.usage : null),
-    firstTs: meta.firstTs || (summary ? summary.firstTs : 0),
-    truncated: meta.truncated || !!(summary && summary.truncated),
-    note: meta.note || (summary ? summary.note : null),
-    title: meta.title || (summary ? summary.title : ''),
-    harnessLabel: meta.harnessLabel || (summary ? summary.harnessLabel : ''),
-    sessionId: meta.sessionId || (summary ? summary.sessionId : null),
-    model: meta.model || (summary ? summary.model : null),
-    cwd: meta.cwd || (summary ? summary.cwd : null),
-    source: meta.source || (summary ? summary.source : null),
-    sharedBy: meta.sharedBy || (summary ? summary.sharedBy : null),
-    loaded: turns.current.length,
-    atStart,
-  } : null), [meta, summary, tick, atStart]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { onNav?.((d: -1 | 1) => goRef.current(d)); }, [onNav]);
   useEffect(() => { onHead?.(head); }, [head, onHead]);
 
@@ -731,9 +522,9 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
         style={{ fontSize: `${(13 * zoom) / 100}px` }}
       >
         {error && <div className="tv-msg">{error}</div>}
-        {!error && !meta && <div className="tv-msg">reading…</div>}
+        {!error && !head && <div className="tv-msg">reading…</div>}
 
-        {!error && meta && matches && (
+        {!error && head && matches && (
           <div className="tv-matches">
             <div className="tv-msg">
               {matches.length} match{matches.length === 1 ? '' : 'es'} in the {fmtNum(n)} turns
@@ -743,7 +534,7 @@ export function TraceView({ src, srcKey, zoom = 100, query = '', onHead, onNav }
           </div>
         )}
 
-        {!error && meta && !matches && (
+        {!error && head && !matches && (
           <>
             {/* Fixed height whether it is loading, done, or at the beginning:
                 this line sits above every offset in the list, so changing its

web/src/components/conversation/ConversationView.tsx

@@ -5,21 +5,24 @@
 // reader's own: a line of session facts, search, turn navigation, and the same
 // ExchangeView the Overview card shows one of.
 //
-// Draft scope: this reads the tail of the trace in one request and renders every
-// turn in it. Windowing by exchange (§10.7) is the next step — a collapsed turn
-// is 2–3 rows, so the DOM stays small, but the measured-height machinery in
-// TraceView is what makes it survive a 5,000-turn session.
+// It opens on the END of the conversation and pages backwards: one window of the
+// transcript to start, another when you scroll to the top, anchored so the text
+// you are reading does not move under you. Before that it read the last 400
+// turns in a single request and stopped there — 702 KB on a 19 MB session, with
+// "1,020 earlier messages are not shown" and no way to reach them — and it
+// re-fetched all 400 every three seconds while the agent worked, each one a full
+// re-parse of the transcript on the server. The paging itself lives in
+// lib/traceWindows.ts, shared with the Trace pane.
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as api from '../../api';
-import type { TracePage, TraceTurn } from '../../api';
+import type { TraceTurn } from '../../api';
+import { useTraceWindows, type TraceSource } from '../../lib/traceWindows';
 import type { Session } from '../../types';
 import { fmtTok, splitExchanges } from './exchanges';
 import ExchangeView from './Exchange';
 import { SendGlyph } from '../icons';
 
-/** How much of the tail RENDER mode reads. The server caps a page at 500. */
-export const RENDER_TAIL = 400;
-const POLL_MS = 3_000;
+const NEAR_TOP_PX = 300;   // start fetching older turns before the reader arrives
 
 const fmtNum = (n: number) => n.toLocaleString();
 const fmtUsage = (u?: { in: number; out: number } | null) =>
@@ -34,8 +37,6 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
   readOnly?: boolean;
   onHandover?: () => void;
 }) {
-  const [page, setPage] = useState<TracePage | null>(null);
-  const [error, setError] = useState<string>('');
   const [query, setQuery] = useState('');
   const [hits, setHits] = useState(0);
   const [hit, setHit] = useState(0);
@@ -55,32 +56,39 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
 
   const live = session.state === 'working' && !paused;
 
-  const load = useCallback(async () => {
-    try {
-      // A negative offset reads from the end (server/src/traces.js pageOf).
-      const p = await api.getTracePage(session.id, -RENDER_TAIL, RENDER_TAIL);
-      setPage(p);
-      setError('');
-    } catch (e) {
-      // A failed REFRESH must not throw away the conversation on screen: this
-      // mount answers EIO now and then, and blanking mid-read is worse than
-      // going stale for three seconds.
-      setError(e instanceof Error ? e.message : 'could not read this trace');
-    }
-  }, [session.id]);
+  const src = useMemo<TraceSource>(() => ({
+    window: (req, bytes) => api.getTraceWindow(session.id, req, bytes),
+    summary: () => api.getTraceSummary(session.id),
+  }), [session.id]);
 
-  useEffect(() => { setPage(null); setError(''); load(); }, [load]);
-  // While the agent works, the trace is still being written.
-  useEffect(() => {
-    if (!live) return undefined;
-    const h = window.setInterval(load, POLL_MS);
-    return () => window.clearInterval(h);
-  }, [live, load]);
-  // Coming back into view, catch up at once rather than waiting for a tick.
-  useEffect(() => { if (!paused && page) load(); }, [paused]);  // eslint-disable-line react-hooks/exhaustive-deps
+  // React keys for the exchanges, and the reading position across a prepend.
+  // The keys are indices into a list that grows at the FRONT, so without a base
+  // that moves with it every exchange remounts when older turns arrive.
+  const keyBase = useRef(0);
+  // The anchor is the scroll height, not an element. Turns regroup here: an
+  // exchange at the top of the list is a fragment whose prompt was in the window
+  // we had not read yet, and when that window arrives the two become ONE
+  // exchange — so the element the reader was looking at can cease to exist as an
+  // element. What does not change is that everything new is added ABOVE, so
+  // keeping the distance to the bottom constant keeps the same text under the
+  // reader's eyes regardless of how the pieces were regrouped.
+  const anchor = useRef<number | null>(null);
+
+  const onPrepend = useCallback((count: number) => {
+    keyBase.current -= count;
+    const el = scroller.current;
+    if (!el) return;
+    anchor.current = el.scrollHeight - el.scrollTop;
+    stick.current = false;
+  }, []);
+
+  const onReset = useCallback(() => { anchor.current = null; stick.current = true; }, []);
 
-  const turns: TraceTurn[] = useMemo(() => page?.turns || [], [page]);
-  const exchanges = useMemo(() => splitExchanges(turns), [turns]);
+  const { turns: turnsRef, head, error, version, atStart, blocked, loadOlder, loadNewer } =
+    useTraceWindows(src, session.id, { onPrepend, onReset, paused });
+
+  const turns: TraceTurn[] = turnsRef.current;
+  const exchanges = useMemo(() => splitExchanges(turns), [version, turns]); // eslint-disable-line react-hooks/exhaustive-deps
   const last = exchanges[exchanges.length - 1];
 
   // The optimistic echo stands until the transcript catches up: a CLI writes it,
@@ -99,7 +107,7 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
       setDraft(''); setSent({ text, at: Date.now() });
       if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.blur(); }
       stick.current = true;
-      load();
+      loadNewer();
     } catch { setFailed(true); window.setTimeout(() => setFailed(false), 4000); }
     setSending(false);
   };
@@ -175,23 +183,31 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
   // never fights a decision to read further back.
   useLayoutEffect(() => {
     const el = scroller.current;
-    if (el && stick.current) el.scrollTop = el.scrollHeight;
-  }, [turns, live]);
+    if (!el) return;
+    if (stick.current) { el.scrollTop = el.scrollHeight; anchor.current = null; return; }
+    // Older turns just arrived above the reader: restore the distance to the
+    // bottom, which is the same text on screen however the exchanges regrouped.
+    const a = anchor.current;
+    if (a == null) return;
+    el.scrollTop = el.scrollHeight - a;
+    anchor.current = null;
+  }, [version, live]);
 
-  if (!page) return <div className="cxv-empty mono">{error || 'reading the trace…'}</div>;
+  if (!head) return <div className="cxv-empty mono">{error || 'reading the trace…'}</div>;
 
   return (
     <div className="cxv">
       {/* The reader's own controls, on their own row: on a phone the pane
           header above has no spare width. */}
       <div className="cxv-bar mono">
-        {page.model && <span className="cxv-chip">{page.model}</span>}
-        <span className="cxv-count" title={`${fmtNum(page.total)} messages`}>
+        {head.model && <span className="cxv-chip">{head.model}</span>}
+        <span className="cxv-count" title={head.total != null ? `${fmtNum(head.total)} messages in this conversation` : `${fmtNum(head.loaded)} messages loaded`}>
           {fmtNum(exchanges.length)} turn{exchanges.length === 1 ? '' : 's'}
+          {head.total != null && head.loaded < head.total ? ` of ${fmtNum(head.total)} messages` : ''}
         </span>
-        {page.usage && (
-          <span className="cxv-tok" title={page.usage.cacheRead ? `${fmtNum(page.usage.cacheRead)} cached` : undefined}>
-            {fmtUsage(page.usage)}
+        {head.usage && (
+          <span className="cxv-tok" title={head.usage.cacheRead ? `${fmtNum(head.usage.cacheRead)} cached` : undefined}>
+            {fmtUsage(head.usage)}
           </span>
         )}
         <span className="spacer" />
@@ -208,15 +224,20 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
         onScroll={(e) => {
           const el = e.currentTarget;
           stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+          // Reading back into the conversation: fetch the stretch in front of
+          // what we hold before the reader arrives at it.
+          if (el.scrollTop < NEAR_TOP_PX) loadOlder();
         }}>
         <div className="cxv-col">
           {error && <div className="cxv-msg bad mono">{error} · showing the last read</div>}
-          {(page.truncated || page.offset > 0) && (
-            <div className="cxv-msg mono">
-              {page.offset > 0 ? `${fmtNum(page.offset)} earlier messages are not shown` : 'earlier turns are not shown'}
-            </div>
-          )}
-          {page.note && <div className="cxv-msg mono">{page.note}</div>}
+          <div className="cxv-msg mono cxv-top">
+            {blocked
+              ? 'earlier turns can’t be read — one line here is larger than the reader’s window'
+              : atStart
+                ? 'beginning of the conversation'
+                : 'earlier turns load as you scroll up…'}
+          </div>
+          {head.note && <div className="cxv-msg mono">{head.note}</div>}
           {q && (
             <div className="cxv-msg mono">
               {shown.length} of {exchanges.length} turns match “{query}”
@@ -224,13 +245,17 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
             </div>
           )}
           {shown.map((x, i) => (
-            <div key={x.key} ref={(el) => { if (el) rows.current.set(i, el); else rows.current.delete(i); }}>
+            <div
+              key={keyBase.current + x.at}
+              data-x={String(keyBase.current + x.at)}
+              ref={(el) => { if (el) rows.current.set(i, el); else rows.current.delete(i); }}
+            >
               <ExchangeView
                 x={x}
                 n={exchanges.indexOf(x) + 1}
                 total={exchanges.length}
                 q={q || undefined}
-                baseModel={page.model || undefined}
+                baseModel={head.model || undefined}
                 running={live && x === exchanges[exchanges.length - 1]}
               />
             </div>
@@ -269,9 +294,9 @@ export default function ConversationView({ session, paused, isMobile, readOnly,
       {failed && <div className="ov-note cxv-note">failed to reach the agent</div>}
 
       <div className="cxv-foot mono">
-        <span className="cxv-path" title={page.cwd || undefined}>
-          {page.cwd}
-          {page.firstTs ? ` · ${new Date(page.firstTs).toLocaleDateString()}` : ''}
+        <span className="cxv-path" title={head.cwd || undefined}>
+          {head.cwd}
+          {head.firstTs ? ` · ${new Date(head.firstTs).toLocaleDateString()}` : ''}
         </span>
         <span className="spacer" />
         {onHandover && (

web/src/conversation.css

@@ -166,6 +166,10 @@ mark.cx-hit.on { background: var(--accent); color: var(--panel); }
 .cxv-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--panel); padding: 4px 14px 30px; }
 .cxv-col { display: flex; flex-direction: column; min-width: 0; }
 .cxv-msg { font-size: 11px; color: var(--muted); padding: 6px 0; }
+/* The line above the oldest loaded exchange. Fixed height on purpose: it sits
+   above everything in the column, so a line that grew or vanished when the
+   reader reached the start would shove the whole conversation. */
+.cxv-top { height: 1.5em; line-height: 1.5em; padding: 0; text-align: center; opacity: 0.75; }
 .cxv-foot {
   display: flex; align-items: center; gap: 8px; flex: none;
   padding: 5px 10px; border-top: 1px solid var(--border); background: var(--panel);

web/src/lib/traceWindows.ts

@@ -0,0 +1,273 @@
+// Reading a trace as WINDOWS, for whichever surface is doing the reading.
+//
+// The Trace pane and reader mode show the same conversation very differently —
+// one as rows of turns, the other as exchanges with a composer under them — but
+// they fetch it identically: open on the end, page backwards a window at a time,
+// follow the end while it is being written. That fetching is subtle in ways two
+// review rounds found the hard way (a load outliving its source, a second load
+// racing the first, a pointer to a window nobody read), so it lives here once
+// rather than twice.
+//
+// What stays with the caller is everything about presentation: how a row is
+// measured, what is virtualized, and how the reading position is anchored when
+// older turns arrive. The hook says WHEN turns are about to be prepended
+// (`onPrepend`) and when everything has been replaced (`onReset`); the caller
+// decides what that means for its own scroller.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as api from '../api';
+import type { TraceCursor, TraceSummary, TraceTurn, TraceWindow } from '../api';
+
+/** How much transcript the first request asks for. Measured on the longest trace
+ *  on this box (19 MB / 1,420 turns): 384 KB is ~60 turns, ~84 KB of JSON and
+ *  ~6 ms of server time, and renders in a frame — the smallest window that still
+ *  opens on a complete-looking conversation rather than a stub. */
+export const WINDOW_BYTES = 384 * 1024;
+// Following a trace that is still being written. Nothing in here knows whether
+// an agent is running — but a transcript whose newest turn is seconds old is one
+// being written, so the cadence follows the trace itself: quick while it moves,
+// slow once it has gone quiet, which is also how it notices movement resuming.
+const LIVE_MS = 3_000;
+const IDLE_MS = 10_000;
+const FRESH_MS = 120_000;
+const SUMMARY_DELAY_MS = 400; // let the first paint happen before the whole-file read
+
+export interface TraceSource {
+  window: (req: api.TraceReq, bytes?: number) => Promise<TraceWindow>;
+  summary: () => Promise<TraceSummary>;
+}
+
+export type Meta = Omit<TraceWindow, 'turns' | 'window'>;
+
+/** What a host's chrome needs. `total` is null until the summary lands. */
+export type TraceHeadInfo = Meta & {
+  /** turns the reader is holding right now */
+  loaded: number;
+  /** the first turn of the conversation is loaded — there is nothing above */
+  atStart: boolean;
+  /** one line is bigger than a window: nothing older can be reached */
+  blocked: boolean;
+};
+
+// Keep whichever value actually says something: a window that doesn't reach the
+// start of the trace reports no session start and no session cost, and must not
+// blank out what an earlier response already told us. Identity is preserved when
+// nothing changed — a poll that learns nothing must not look like new state.
+export const mergeMeta = (prev: Meta | null, next: Meta): Meta => {
+  if (!prev) return next;
+  const out = { ...prev } as Record<string, unknown>;
+  let changed = false;
+  for (const [k, v] of Object.entries(next)) {
+    // A window OLDER than what we hold describes an older stretch of the same
+    // conversation. Two of its facts must not travel backwards: `lastTs` drives
+    // how often we look for new turns (scrolling back would otherwise slow the
+    // live tail to a crawl), and `model` is the one the session is running now.
+    if ((k === 'lastTs' || k === 'model') && out[k] && (k !== 'lastTs' || (v as number) <= (out[k] as number))) continue;
+    if ((v || !(k in out)) && out[k] !== v) { out[k] = v; changed = true; }
+  }
+  return changed ? (out as Meta) : prev;
+};
+
+export function useTraceWindows(src: TraceSource, srcKey: string, opts: {
+  /** About to prepend `count` older turns — capture the reading position now. */
+  onPrepend?: (count: number) => void;
+  /** About to append `count` new turns at the end. */
+  onAppend?: (count: number) => void;
+  /** Everything replaced: a new source, or a gap too big to splice. */
+  onReset?: () => void;
+  /** The surface is off-screen: stop asking for turns nobody is looking at. */
+  paused?: boolean;
+} = {}) {
+  const [meta, setMeta] = useState<Meta | null>(null);
+  const [summary, setSummary] = useState<TraceSummary | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const turns = useRef<TraceTurn[]>([]);
+  const cursor = useRef<TraceCursor | null>(null);
+  // ONE request at a time. Flicking the wheel at the top of a long trace fires
+  // scroll events by the dozen, and each one would otherwise start its own load;
+  // they would arrive out of order and prepend the same turns twice.
+  const loading = useRef(false);
+  // Which source the turns in hand belong to. Every load reads this before its
+  // await and checks it after: switch files in the Files pane while a window is
+  // in flight and it would otherwise be prepended to the NEW file's turns, with
+  // the old file's byte cursors and header — a conversation spliced out of two
+  // different transcripts.
+  const gen = useRef(0);
+  const [version, setVersion] = useState(0);
+  const bump = useCallback(() => setVersion((n) => n + 1), []);
+
+  const cb = useRef(opts);
+  cb.current = opts;
+
+  const loadTail = useCallback(async () => {
+    loading.current = true;
+    const mine = gen.current;
+    try {
+      const { turns: got, window: win, ...m } = await src.window({ at: 'tail' }, WINDOW_BYTES);
+      if (mine !== gen.current) return;
+      turns.current = got;
+      cursor.current = win;
+      cb.current.onReset?.();
+      setMeta(m);
+      setError(null);
+      bump();
+      // Nothing to render means nothing to measure, so no measurement will ever
+      // arrive to unblock the paging: walk back until there is something. After
+      // this call returns, so the one-request-at-a-time guard still holds.
+      if (!got.length && !win.atStart) window.setTimeout(() => loadOlderRef.current(), 0);
+    } catch (e) {
+      if (mine !== gen.current) return;
+      // The server distinguishes "nothing to show yet" from a real failure and
+      // says which — pass its own words through rather than inventing a reason.
+      setError(e instanceof api.TraceUnavailable ? e.message : 'could not read the trace');
+    } finally {
+      if (mine === gen.current) loading.current = false;
+    }
+  }, [src, bump]);
+
+  const loadOlderRef = useRef<() => Promise<number>>(async () => 0);
+
+  /** Fetch the window before the oldest turn held. Returns how many arrived. */
+  const loadOlder = useCallback(async () => {
+    const cur = cursor.current;
+    if (loading.current || !cur || cur.atStart || cur.blocked) return 0;
+    loading.current = true;
+    const mine = gen.current;
+    try {
+      let from = cur.start;
+      let atStart = false;
+      let blocked = false;
+      let got: TraceTurn[] = [];
+      let meta2: Meta | null = null;
+      // A window can legitimately hold no turns at all (a stretch of file-history
+      // lines, a run of harness metadata). Keep walking back until it holds
+      // something, the file starts, or the cursor stops moving.
+      for (let hop = 0; hop < 8 && !got.length && !atStart; hop++) {
+        const { turns: page, window: win, ...m } = await src.window({ at: 'before', cursor: from }, WINDOW_BYTES);
+        if (mine !== gen.current) return 0;
+        got = page;
+        meta2 = m;
+        // `blocked` is a line too big for any window — the server cannot get
+        // past it, so neither can we, and this is NOT the start of the trace.
+        blocked = !!win.blocked;
+        atStart = win.atStart || (!blocked && win.start >= from);
+        from = win.start;
+        if (blocked) break;
+      }
+      if (got.length) cb.current.onPrepend?.(got.length);
+      turns.current = [...got, ...turns.current];
+      cursor.current = { ...cur, start: from, atStart, blocked };
+      if (meta2) setMeta((p) => mergeMeta(p, meta2 as Meta));
+      bump();
+      return got.length;
+    } catch {
+      // Keep what is on screen; the next scroll retries.
+      return 0;
+    } finally {
+      if (mine === gen.current) loading.current = false;
+    }
+  }, [src, bump]);
+  loadOlderRef.current = loadOlder;
+
+  /** Whatever the agent has written since we last looked. */
+  const loadNewer = useCallback(async () => {
+    const cur = cursor.current;
+    if (loading.current || !cur) return 0;
+    loading.current = true;
+    const mine = gen.current;
+    try {
+      const { turns: got, window: win, ...m } = await src.window({ at: 'after', cursor: cur.end });
+      if (mine !== gen.current) return 0;
+      if (win.gap) {
+        // More was written than one window can carry. Splicing it in would leave
+        // a hole in the middle of the conversation with nothing to say so —
+        // start again from the new tail instead.
+        turns.current = got;
+        cursor.current = win;
+        cb.current.onReset?.();
+      } else {
+        if (got.length) {
+          cb.current.onAppend?.(got.length);
+          turns.current = [...turns.current, ...got];
+        }
+        cursor.current = { ...cur, end: win.end, atEnd: win.atEnd };
+      }
+      setMeta((p) => mergeMeta(p, m));
+      if (got.length) bump();
+      return got.length;
+    } catch {
+      // A poll that fails must not throw away the conversation on screen.
+      return 0;
+    } finally {
+      if (mine === gen.current) loading.current = false;
+    }
+  }, [src, bump]);
+
+  useEffect(() => {
+    gen.current += 1;
+    loading.current = false;
+    turns.current = [];
+    cursor.current = null;
+    cb.current.onReset?.();
+    setMeta(null);
+    setSummary(null);
+    setError(null);
+    loadTail();
+  }, [srcKey, loadTail]);
+
+  // The one read that touches the whole file, fired AFTER the first paint: it
+  // buys the header a real turn count, the session's token total, the date the
+  // conversation started and the disclosures a window cannot see — none of which
+  // a window can know. If it fails or is slow, the header simply says how much
+  // is loaded.
+  useEffect(() => {
+    let dead = false;
+    const h = window.setTimeout(() => {
+      src.summary().then((s) => { if (!dead) setSummary(s); }).catch(() => {});
+    }, SUMMARY_DELAY_MS);
+    return () => { dead = true; window.clearTimeout(h); };
+  }, [src, srcKey]);
+
+  // The transcript may still be being written — see LIVE_MS above. Except when
+  // "a window" costs a whole-file read: the SQLite harnesses have no byte
+  // offsets to seek, so every poll would re-parse the entire conversation (and
+  // evict the Overview's memo doing it). They are not polled at all.
+  const lastTs = meta ? meta.lastTs : 0;
+  const seekable = cursor.current ? cursor.current.mode === 'bytes' : true;
+  const paused = !!opts.paused;
+  useEffect(() => {
+    if (!seekable || paused) return undefined;
+    const h = window.setInterval(loadNewer, lastTs && Date.now() - lastTs < FRESH_MS ? LIVE_MS : IDLE_MS);
+    return () => window.clearInterval(h);
+  }, [loadNewer, lastTs, seekable, paused]);
+
+  const atStart = !!cursor.current?.atStart;
+  const blocked = !!cursor.current?.blocked;
+  // What the pane knows about the trace: whatever this window could tell us,
+  // filled in from the summary for everything a window cannot know. That is not
+  // only the counts — a window of a codex rollout cannot count the session's
+  // encrypted reasoning steps (`note`), and a window of an STS file never sees
+  // the `{type:'session'}` first line that carries the title, the harness and
+  // the session id.
+  const head: TraceHeadInfo | null = meta ? {
+    ...meta,
+    total: summary ? summary.total : null,
+    userTurns: summary ? summary.userTurns : null,
+    usage: meta.usage || (summary ? summary.usage : null),
+    firstTs: meta.firstTs || (summary ? summary.firstTs : 0),
+    truncated: meta.truncated || !!(summary && summary.truncated),
+    note: meta.note || (summary ? summary.note : null),
+    title: meta.title || (summary ? summary.title : ''),
+    harnessLabel: meta.harnessLabel || (summary ? summary.harnessLabel : ''),
+    sessionId: meta.sessionId || (summary ? summary.sessionId : null),
+    model: meta.model || (summary ? summary.model : null),
+    cwd: meta.cwd || (summary ? summary.cwd : null),
+    source: meta.source || (summary ? summary.source : null),
+    sharedBy: meta.sharedBy || (summary ? summary.sharedBy : null),
+    loaded: turns.current.length,
+    atStart,
+    blocked,
+  } : null;
+
+  return { turns, head, meta, error, version, atStart, blocked, loadOlder, loadNewer, reload: loadTail };
+}