From 6d701c3dde904f0954a62b9e3b660715395f591a Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Wed, 4 Nov 2026 22:12:45 +0800
Subject: [PATCH 1/6] fix: stabilize history turns and device session
 navigation

---
 docs/architecture/peer-device-mode.md         |  22 +
 .../services/services-integrations/AGENTS.md  |   5 +
 .../remote_connect/host_stream_subscriber.rs  | 280 +++++++++-
 .../src/remote_connect/session_records.rs     |  10 +
 .../tests/remote_connect_contracts.rs         |   8 +
 .../AgentCompanionDesktopPet.scss             |  45 +-
 .../AgentCompanionDesktopPetStyles.test.ts    |  27 +-
 .../src/app/components/NavPanel/NavPanel.scss |  32 +-
 .../components/DeviceStatusControl.test.tsx   |  38 ++
 .../components/DeviceStatusControl.tsx        |   8 +-
 .../devices/BackgroundSessionList.tsx         |   3 -
 .../sections/sessions/SessionsSection.tsx     |   4 +-
 .../sessions/useSessionNavExpansion.test.tsx  |  52 +-
 .../sessions/useSessionNavExpansion.ts        |  92 ++--
 .../workspaces/workspaceDisclosure.ts         |   4 +-
 .../NavPanel/workspaceSessionView.ts          |   6 +-
 .../btw/BtwVirtualSessionList.test.tsx        |   4 +
 .../src/flow_chat/components/modern/AGENTS.md |  45 +-
 .../modern/FLOWCHAT_HISTORY_PAGING.md         | 494 ++++--------------
 .../modern/FLOWCHAT_SCROLL_STABILITY.md       | 175 +++----
 .../modern/FLOWCHAT_VERIFICATION.md           |  12 +-
 .../modern/FLOWCHAT_VIEWPORT_REGISTER.md      |  18 +-
 .../modern/FLOWCHAT_VIRTUALIZATION.md         | 120 ++---
 .../modern/FlowChatPrependSnapshot.test.tsx   |  20 +-
 .../modern/FlowChatPrependSnapshot.tsx        |  29 +-
 .../modern/FlowChatScrollOriginBoundary.tsx   |  37 ++
 ...irtualMessageList.history-prepend.test.tsx | 216 ++++++++
 .../modern/VirtualMessageList.resize.test.tsx | 221 ++++++++
 .../components/modern/VirtualMessageList.scss |  47 ++
 ...rtualMessageList.session-boundary.test.tsx |  23 +-
 ...rtualMessageList.timeline-prepend.test.tsx | 396 ++++++++++++++
 .../components/modern/VirtualMessageList.tsx  | 383 +++++++++-----
 .../modern/flowChatScrollCoordinates.ts       |  22 +
 .../modern/flowChatViewportGeometry.test.ts   |  20 +
 .../modern/flowChatViewportGeometry.ts        |  16 +-
 ...eFlowChatFollowOutput.measurement.test.tsx |   4 +
 .../modern/useFlowChatFollowOutput.test.tsx   |  68 ++-
 .../modern/useFlowChatFollowOutput.ts         |  91 +++-
 .../modern/useFlowChatLeadingExtent.test.tsx  |  19 +-
 .../modern/useFlowChatLeadingExtent.ts        |  47 +-
 .../modern/useFlowChatViewportOwner.test.tsx  |  35 ++
 .../modern/useFlowChatViewportOwner.ts        |   5 +-
 .../useFlowChatVirtualizer.aim.test.tsx       |   5 +
 .../useFlowChatVirtualizer.cascade.test.tsx   |   4 +
 .../useFlowChatVirtualizer.follow.test.tsx    | 127 +++++
 ...lowChatVirtualizer.initial-window.test.tsx |   4 +
 ...seFlowChatVirtualizer.measurement.test.tsx |  34 +-
 .../modern/useFlowChatVirtualizer.ts          | 270 +++++++---
 .../services/RelaySessionHistory.test.ts      |  34 +-
 .../flow_chat/services/RelaySessionHistory.ts |  54 +-
 .../services/backgroundSurfaceSeeding.test.ts |  11 +
 .../services/backgroundSurfaceSeeding.ts      |  11 +-
 .../src/flow_chat/store/FlowChatStore.test.ts |  34 +-
 .../src/flow_chat/store/FlowChatStore.ts      |  11 +-
 54 files changed, 2769 insertions(+), 1033 deletions(-)
 create mode 100644 src/web-ui/src/flow_chat/components/modern/FlowChatScrollOriginBoundary.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/modern/VirtualMessageList.history-prepend.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/modern/flowChatScrollCoordinates.ts
 create mode 100644 src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.test.ts
 create mode 100644 src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.follow.test.tsx

diff --git a/docs/architecture/peer-device-mode.md b/docs/architecture/peer-device-mode.md
index a4106b4fd0..2e0985c3c6 100644
--- a/docs/architecture/peer-device-mode.md
+++ b/docs/architecture/peer-device-mode.md
@@ -125,6 +125,18 @@ records and responses from a device that is no longer rendered. Desktop
 `RelaySessionHistory` owns the subscription across initial loading, realtime
 delivery and older-page prefetch.
 
+Desktop/Web FlowChat history publishes complete Turns. New host Turn roots
+carry optional `turnRecordIds` membership on the record envelope. The Rust
+subscriber joins byte/event-bounded pages until all listed members arrive;
+a terminal root alone is not proof, since live updates can move it ahead of
+unchanged items. Legacy hosts without membership remain readable: the controller
+finishes the available history read before publication, which can make their
+first open slower. Missing members, non-advancing pages and epoch changes fail
+without exposing a partial Turn. No persisted shape or command changed.
+`RelaySessionHistory` stages the resulting replay outside the store replica until
+ready; timers and direct live-control flushes cannot publish its intermediate
+records. Normal live updates retain their incremental behavior.
+
 Native mobile history keeps these record-page boundaries; a page is not a
 complete conversation turn. The initial replay and each older-history request
 reduce all received records before publishing one transcript projection. A turn
@@ -251,6 +263,16 @@ the same before, during and after a switch. Seeds carry no history or state
 machine; they are promoted through the normal metadata path before any open,
 and a seed that has been opened is never replaced by a later seed.
 
+The displayed row count belongs to the surface/workspace/source view and is
+published when the user expands or collapses it. Live and background lists
+read the same snapshot during replacement; an unmount-time handoff is too late
+for React's incoming render. Collapsing a workspace resets its source views;
+Collapse All resets every view. Counts are window-local presentation state.
+Disconnecting a control attachment disposes transcripts but leaves the
+independent catalog read lease intact. Disposal invalidates the projection's
+array deduplication and immediately reseeds metadata from that catalog, so
+the still-visible sidebar does not empty while waiting for another read.
+
 A cross-device open publishes a `DeviceOpenIntent` for its whole duration. While
 it is set, every device keeps its background rows (the rendered device hands
 over to its live list once, after the open, so the live list's reads never
diff --git a/src/crates/services/services-integrations/AGENTS.md b/src/crates/services/services-integrations/AGENTS.md
index 1ce4f32bb0..a1b9503a47 100644
--- a/src/crates/services/services-integrations/AGENTS.md
+++ b/src/crates/services/services-integrations/AGENTS.md
@@ -45,6 +45,11 @@ slices that are outside pure product logic but still platform-neutral.
   `limit` is a budget for history reads: a page grows to the first record of its
   oldest turn so no turn splits across pages, within the hard event and byte
   bounds. Controllers must not assume a page holds at most `limit` events.
+  Root records carry optional `turnRecordIds` membership. The Rust subscriber
+  joins bounded history pages until those members are present, even if a live
+  root moved ahead of its unchanged children; legacy hosts without membership
+  finish their available history read before presentation. Never treat a page
+  limit, a terminal header or a timeout as proof of a complete Turn.
 - The `remote-persistence` feature is the lightweight persisted-shape owner shared
   by Remote Connect, remote SSH, and offline migration. Keep it free of network,
   SSH transport, and runtime orchestration dependencies so owner readers and
diff --git a/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs b/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
index 9a704f3e3e..c54181d994 100644
--- a/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
+++ b/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
@@ -7,16 +7,19 @@ use super::{
 };
 use anyhow::{anyhow, bail, Context, Result};
 use serde::Deserialize;
-use std::{sync::Arc, time::Duration};
+use std::{
+    collections::{HashMap, HashSet},
+    sync::Arc,
+    time::Duration,
+};
 use tokio::sync::{broadcast, mpsc, oneshot};
 
 const KEEPALIVE: Duration = Duration::from_secs(4 * 60);
 /// Event budget of the first page of an open: enough to fill a transcript view,
 /// so the session shows after one small read instead of a full 200-event /
 /// 768 KiB page over the relay. Older pages follow in the background. Every
-/// host honours `limit`, so no capability is needed; current hosts extend the
-/// page to the first record of the turn the budget ran out in, older ones cut it
-/// mid-turn and their boundary turn fills in with the next page.
+/// host honours `limit`. Transport pages are joined until their Turn membership
+/// is complete; no transport budget is a presentation boundary.
 const FIRST_PAGE_EVENTS: usize = 48;
 const UNSUPPORTED_HOST_MESSAGE: &str = "The controlled device runs an older OpenBitFun version that does not support on-demand session streaming. Update OpenBitFun on that device to continue.";
 
@@ -130,6 +133,101 @@ impl Reader {
         Ok(page)
     }
 
+    /// A root's optional membership list proves which records form a whole
+    /// Turn, even when live updates moved that root ahead of unchanged items.
+    /// Old hosts have no such proof: finish their bounded pages before exposing
+    /// history, rather than guessing from a header, count, or elapsed time.
+    async fn read_history(&self, request: StreamReadRequest) -> Result<StreamPage> {
+        let mut page = self.read(request).await?;
+        let mut record_ids = HashSet::<String>::new();
+        let mut turns = HashMap::<String, Option<(u64, Vec<String>)>>::new();
+        let mut batches = Vec::new();
+        loop {
+            for event in &page.events {
+                if event.event != "session-record" {
+                    continue;
+                }
+                let payload = &event.payload;
+                let Some(id) = payload["id"].as_str() else {
+                    continue;
+                };
+                record_ids.insert(id.to_owned());
+                let Some(turn_id) = payload.pointer("/turn/turnId").and_then(|id| id.as_str())
+                else {
+                    continue;
+                };
+                let membership = turns.entry(turn_id.to_owned()).or_default();
+                if id == format!("turn/{turn_id}") {
+                    if let Some(ids) = payload.get("turnRecordIds") {
+                        let ids: Vec<String> = serde_json::from_value(ids.clone())
+                            .context("Invalid history Turn membership")?;
+                        if !ids.iter().any(|key| key == id) {
+                            bail!("History Turn membership omitted its root");
+                        }
+                        let revision = payload["revision"].as_u64().unwrap_or(event.seq);
+                        if membership.as_ref().is_none_or(|(old, _)| revision > *old) {
+                            *membership = Some((revision, ids));
+                        }
+                    }
+                }
+            }
+            let complete = !turns.is_empty()
+                && turns.values().all(|membership| {
+                    membership
+                        .as_ref()
+                        .is_some_and(|(_, ids)| ids.iter().all(|id| record_ids.contains(id)))
+                });
+            let missing_record = turns
+                .values()
+                .flatten()
+                .any(|(_, ids)| ids.iter().any(|id| !record_ids.contains(id)));
+            if complete || !page.has_more {
+                if !complete && (page.truncated || missing_record) {
+                    bail!("The host could not provide a complete history Turn; reopen the session to retry");
+                }
+                // Reads travel backwards; delivery stays chronological. This
+                // also preserves ordering of runtime controls between records.
+                for batch in batches.into_iter().rev() {
+                    page.events.extend(batch);
+                }
+                return Ok(page);
+            }
+            let before = page
+                .events
+                .first()
+                .map(|event| event.seq)
+                .context("History page did not advance")?;
+            let older = self
+                .read(StreamReadRequest {
+                    stream_id: self.session_id.clone(),
+                    before: Some(before),
+                    epoch: Some(page.epoch),
+                    subscribe: true,
+                    ..Default::default()
+                })
+                .await?;
+            if older.epoch != page.epoch {
+                bail!(
+                    "Session history restarted while reading a Turn; reopen the session to retry"
+                );
+            }
+            if older
+                .events
+                .first()
+                .is_some_and(|event| event.seq >= before)
+                || (older.events.is_empty() && older.has_more)
+            {
+                bail!("History page did not advance");
+            }
+            batches.push(page.events);
+            // Forward catch-up starts at the snapshot with which this read
+            // began. Later appends must still be delivered by catch_up.
+            let cursor = page.cursor;
+            page = older;
+            page.cursor = cursor;
+        }
+    }
+
     fn emit_page(&self, page: &StreamPage) -> Result<()> {
         for event in &page.events {
             (self.emit)(SessionEvent {
@@ -152,7 +250,7 @@ impl Reader {
     /// Latest page first, like opening a chat at its bottom.
     async fn resync(&mut self) -> Result<()> {
         let page = self
-            .read(StreamReadRequest {
+            .read_history(StreamReadRequest {
                 stream_id: self.session_id.clone(),
                 subscribe: true,
                 limit: Some(FIRST_PAGE_EVENTS),
@@ -214,7 +312,7 @@ impl Reader {
             return Ok(true);
         }
         let page = self
-            .read(StreamReadRequest {
+            .read_history(StreamReadRequest {
                 stream_id: self.session_id.clone(),
                 before: Some(self.oldest),
                 epoch: Some(self.epoch),
@@ -502,7 +600,175 @@ mod tests {
     }
 
     fn record(session: &str, turn: &str, status: &str) -> serde_json::Value {
-        serde_json::json!({"sessionId":session,"id":format!("turn/{turn}"),"turn":{"turnId":turn,"sessionId":session,"status":status}})
+        serde_json::json!({"sessionId":session,"id":format!("turn/{turn}"),"turnRecordIds":[format!("turn/{turn}")],"turn":{"turnId":turn,"sessionId":session,"status":status}})
+    }
+
+    struct ScriptedHistory {
+        pages: Mutex<std::collections::VecDeque<StreamPage>>,
+        reads: Mutex<Vec<StreamReadRequest>>,
+    }
+    #[async_trait::async_trait]
+    impl StreamTransport for ScriptedHistory {
+        async fn read_stream(&self, request: StreamReadRequest) -> Result<StreamPage> {
+            self.reads.lock().unwrap().push(request);
+            self.pages
+                .lock()
+                .unwrap()
+                .pop_front()
+                .context("Unexpected history read")
+        }
+        async fn unsubscribe_stream(&self, _: &str) -> Result<()> {
+            Ok(())
+        }
+    }
+    fn history_page(seq: u64, records: Vec<serde_json::Value>, has_more: bool) -> StreamPage {
+        use super::super::host_stream::StreamEvent;
+        StreamPage {
+            stream_id: "s".into(),
+            epoch: 1,
+            events: records
+                .into_iter()
+                .enumerate()
+                .map(|(index, mut payload)| {
+                    payload["revision"] = (seq + index as u64).into();
+                    StreamEvent {
+                        seq: seq + index as u64,
+                        event: "session-record".into(),
+                        payload,
+                    }
+                })
+                .collect(),
+            has_more,
+            cursor: 100,
+            oldest_seq: 1,
+            truncated: false,
+        }
+    }
+    fn scripted_reader(
+        pages: Vec<StreamPage>,
+    ) -> (Reader, Arc<ScriptedHistory>, Arc<Mutex<Vec<SessionEvent>>>) {
+        let transport = Arc::new(ScriptedHistory {
+            pages: Mutex::new(pages.into()),
+            reads: Mutex::new(Vec::new()),
+        });
+        let events = Arc::new(Mutex::new(Vec::new()));
+        let output = events.clone();
+        (
+            Reader {
+                transport: transport.clone(),
+                session_id: "s".into(),
+                emit: Arc::new(move |event| {
+                    output.lock().unwrap().push(event);
+                    Ok(())
+                }),
+                epoch: 0,
+                cursor: 0,
+                oldest: 1,
+                has_more: false,
+            },
+            transport,
+            events,
+        )
+    }
+    fn item(id: &str) -> serde_json::Value {
+        serde_json::json!({"sessionId":"s","id":format!("item/{id}"),"turn":{"turnId":"one","sessionId":"s","status":"completed"},"round":{"id":"r","turnId":"one"},"item":{"type":"text","data":{"id":id}}})
+    }
+
+    #[tokio::test]
+    async fn history_waits_for_all_members_even_when_the_terminal_root_arrived_first() {
+        let mut root = record("s", "one", "completed");
+        root["turnRecordIds"] = serde_json::json!(["turn/one", "item/a", "item/b", "item/c"]);
+        let (mut reader, transport, events) = scripted_reader(vec![
+            history_page(8, vec![root, item("c")], true),
+            history_page(5, vec![item("b")], true),
+            history_page(2, vec![item("a")], true),
+        ]);
+        reader.resync().await.unwrap();
+        let reads = transport.reads.lock().unwrap();
+        assert_eq!(
+            reads.iter().map(|read| read.before).collect::<Vec<_>>(),
+            vec![None, Some(8), Some(5)]
+        );
+        let events = events.lock().unwrap();
+        assert_eq!(events.len(), 5);
+        assert_eq!(events[0].payload["id"], "item/a");
+        assert_eq!(events[3].payload["id"], "item/c");
+        assert_eq!(events[4].event, "relay://session-ready");
+        assert_eq!(events[4].payload["hasMore"], true);
+        assert_eq!(events[4].payload["oldestSeq"], 2);
+        assert_eq!(events[4].payload["cursor"], 100);
+    }
+
+    #[tokio::test]
+    async fn legacy_pages_without_membership_remain_readable_and_publish_once_complete() {
+        let mut root = record("s", "one", "completed");
+        root.as_object_mut().unwrap().remove("turnRecordIds");
+        // Round trip the old wire shape, without inventing a new capability.
+        let first: StreamPage = serde_json::from_value(
+            serde_json::to_value(history_page(8, vec![root], true)).unwrap(),
+        )
+        .unwrap();
+        let (mut reader, transport, events) = scripted_reader(vec![
+            first,
+            history_page(5, vec![item("b")], true),
+            history_page(1, vec![item("a")], false),
+        ]);
+        reader.resync().await.unwrap();
+        assert_eq!(transport.reads.lock().unwrap().len(), 3);
+        let events = events.lock().unwrap();
+        assert_eq!(events.len(), 4);
+        assert_eq!(events.last().unwrap().payload["hasMore"], false);
+        assert_eq!(events[0].payload["item"]["data"]["id"], "a");
+    }
+
+    #[tokio::test]
+    async fn missing_members_and_failed_continuations_never_emit_partial_turns() {
+        for has_more in [false, true] {
+            let mut root = record("s", "one", "completed");
+            root["turnRecordIds"] = serde_json::json!(["turn/one", "item/missing"]);
+            let (mut reader, _, events) =
+                scripted_reader(vec![history_page(8, vec![root], has_more)]);
+            assert!(reader.resync().await.is_err());
+            assert!(events.lock().unwrap().is_empty());
+        }
+    }
+
+    #[tokio::test]
+    async fn continuation_epoch_changes_and_stalled_cursors_never_publish_fragments() {
+        for kind in ["epoch", "empty", "same-cursor"] {
+            let mut root = record("s", "one", "completed");
+            root["turnRecordIds"] = serde_json::json!(["turn/one", "item/a"]);
+            let mut older = history_page(
+                if kind == "same-cursor" { 8 } else { 2 },
+                vec![item("a")],
+                true,
+            );
+            if kind == "epoch" {
+                older.epoch = 2;
+            }
+            if kind == "empty" {
+                older.events.clear();
+            }
+            let (mut reader, _, events) =
+                scripted_reader(vec![history_page(8, vec![root], true), older]);
+            assert!(reader.resync().await.is_err(), "{kind}");
+            assert!(events.lock().unwrap().is_empty(), "{kind}");
+        }
+    }
+
+    #[tokio::test]
+    async fn a_control_only_page_does_not_complete_an_empty_transcript() {
+        let mut controls = history_page(8, vec![serde_json::json!({"sessionId":"s"})], true);
+        controls.events[0].event = "session-interaction-changed".into();
+        let (mut reader, transport, events) = scripted_reader(vec![
+            controls,
+            history_page(2, vec![record("s", "one", "completed")], true),
+        ]);
+        reader.resync().await.unwrap();
+        assert_eq!(transport.reads.lock().unwrap().len(), 2);
+        let events = events.lock().unwrap();
+        assert_eq!(events[0].payload["id"], "turn/one");
+        assert_eq!(events[2].event, "relay://session-ready");
     }
 
     #[tokio::test]
diff --git a/src/crates/services/services-integrations/src/remote_connect/session_records.rs b/src/crates/services/services-integrations/src/remote_connect/session_records.rs
index a9aa177067..6d9112be03 100644
--- a/src/crates/services/services-integrations/src/remote_connect/session_records.rs
+++ b/src/crates/services/services-integrations/src/remote_connect/session_records.rs
@@ -64,6 +64,7 @@ pub fn records_from_turns(
 ) -> Result<Vec<Value>> {
     let mut records = Vec::new();
     for source in turns {
+        let turn_start = records.len();
         let mut turn = serde_json::to_value(source)?;
         turn.as_object_mut()
             .expect("turn serializes as object")
@@ -95,6 +96,15 @@ pub fn records_from_turns(
                 }
             }
         }
+        // A transport page is byte/event bounded and can split even one Turn.
+        // Put membership on its root only, so a controller can prove it has the
+        // whole snapshot without duplicating this list on every item. This is
+        // an optional wire field; persisted Turns and older readers are unchanged.
+        let record_ids: Vec<Value> = records[turn_start..]
+            .iter()
+            .map(|record| record["id"].clone())
+            .collect();
+        records[turn_start]["turnRecordIds"] = Value::Array(record_ids);
     }
     Ok(records)
 }
diff --git a/src/crates/services/services-integrations/tests/remote_connect_contracts.rs b/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
index 52ba3d88f0..7927f8848a 100644
--- a/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
+++ b/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
@@ -476,6 +476,14 @@ fn relay_records_carry_attachment_pixels_on_the_turn_record_alone() {
         .iter()
         .find(|record| record["id"] == "turn/turn-1")
         .expect("turn record is published");
+    assert_eq!(
+        turn_record["turnRecordIds"],
+        serde_json::json!(["turn/turn-1", "round/round-1", "item/item-1"])
+    );
+    assert!(records
+        .iter()
+        .skip(1)
+        .all(|record| record.get("turnRecordIds").is_none()));
     assert_eq!(
         images_of(turn_record),
         vec![
diff --git a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
index 3618010a71..717143b9e0 100644
--- a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
+++ b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
@@ -364,30 +364,18 @@
     width: 180px;
     max-width: 100%;
     box-sizing: border-box;
-    /* Same language as the device overview: the opaque themed surface lit
-       from the corner nearest the title by the task state, a faint ring in
-       that light, and the tail corner pointing at the pet. */
+    /* Both themes use an 80% opaque neutral surface. Task color belongs to the
+       status glyph; a neutral inset edge keeps the bubble clear on any desktop. */
     --_bubble-light: var(--openbitfun-color-accent-default);
-    --_bubble-glow: radial-gradient(
-      130% 150% at 0% 0%,
-      color-mix(in srgb, var(--_bubble-light) 20%, transparent),
-      transparent 68%
-    );
-    /* No border: the bubble is defined by its surface, the state light, the
-       theme's top highlight and a soft tinted drop shadow cast down and to
-       the right at 45 degrees. Its reach stays inside the column: none to the
-       left, and the column's inline-end room covers the right. */
     --_bubble-edge:
-      var(--openbitfun-shadow-inner-highlight),
-      10px 10px 24px -10px color-mix(in srgb, var(--_bubble-light) 40%, transparent);
+      inset 0 0 0 var(--openbitfun-border-width-default) var(--openbitfun-color-border-subtle),
+      var(--openbitfun-shadow-raised);
     padding: 9px 12px;
     border: none;
     border-radius: 14px 14px 4px 14px;
-    background-color: var(--openbitfun-color-surface-raised);
-    background-image: var(--_bubble-glow);
+    background-color: color-mix(in srgb, var(--openbitfun-color-surface-raised) 80%, transparent);
     color: var(--openbitfun-color-content-primary);
     box-shadow: var(--_bubble-edge);
-    backdrop-filter: blur(10px);
     cursor: pointer;
     position: relative;
     z-index: 0;
@@ -518,15 +506,9 @@
     }
   }
 
-  /* Each state sets the light and lays its status tint over the opaque themed
-     surface, fading away from the lit corner so the bubble stays calm. */
+  /* All task states share the translucent surface; glyphs carry the status color. */
   &__bubble--attention {
     --_bubble-light: var(--openbitfun-color-status-warning-content);
-    background-image: linear-gradient(
-      135deg,
-      var(--openbitfun-color-status-warning-surface),
-      transparent 72%
-    ), var(--_bubble-glow);
     box-shadow:
       var(--_bubble-edge),
       inset 0 0 0 1px color-mix(in srgb, var(--openbitfun-color-status-warning-content) 40%, transparent);
@@ -535,30 +517,15 @@
 
   &__bubble--waiting {
     --_bubble-light: var(--openbitfun-color-status-warning-content);
-    background-image: linear-gradient(
-      135deg,
-      var(--openbitfun-color-status-warning-surface),
-      transparent 72%
-    ), var(--_bubble-glow);
   }
 
   &__bubble--completed {
     --_bubble-light: var(--openbitfun-color-status-success-content);
-    background-image: linear-gradient(
-      135deg,
-      var(--openbitfun-color-status-success-surface),
-      transparent 72%
-    ), var(--_bubble-glow);
   }
 
   &__bubble--error,
   &__bubble--interrupted {
     --_bubble-light: var(--openbitfun-color-status-danger-content);
-    background-image: linear-gradient(
-      135deg,
-      var(--openbitfun-color-status-danger-surface),
-      transparent 72%
-    ), var(--_bubble-glow);
   }
 
   .openbitfun-agent-companion-pet {
diff --git a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPetStyles.test.ts b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPetStyles.test.ts
index 496d56400d..fed96d99fc 100644
--- a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPetStyles.test.ts
+++ b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPetStyles.test.ts
@@ -42,7 +42,7 @@ describe('AgentCompanionDesktopPet styles', () => {
     const output = extractBlock(stylesheet, '&__bubble-output');
     const composerInput = extractBlock(stylesheet, '&__bubble-composer-input');
 
-    expect(bubble).toContain('background-color: var(--openbitfun-color-surface-raised);');
+    expect(bubble).toContain('background-color: color-mix(in srgb, var(--openbitfun-color-surface-raised) 80%, transparent);');
     expect(bubble).toContain('color: var(--openbitfun-color-content-primary);');
     // Status words are drawn as a glyph; the text stays for assistive tech only.
     expect(status).toContain('clip-path: inset(50%);');
@@ -62,19 +62,26 @@ describe('AgentCompanionDesktopPet styles', () => {
     );
   });
 
-  it('layers translucent task-state colors over the opaque themed bubble surface', () => {
+  it('keeps the themed bubble background 20% transparent without fading its content', () => {
     const stylesheet = readStylesheet();
+    const bubble = extractBlock(stylesheet, '&__bubble');
+
+    expect(bubble).toContain('background-color: color-mix(in srgb, var(--openbitfun-color-surface-raised) 80%, transparent);');
+    expect(bubble).not.toMatch(/^\s*opacity\s*:/m);
+    expect(bubble).not.toMatch(/gradient\(|background-image:|backdrop-filter:/);
+    expect(bubble).toContain('var(--openbitfun-color-border-subtle)');
+    expect(bubble).toContain('var(--openbitfun-shadow-raised)');
+    expect(stylesheet).not.toContain('--_bubble-glow');
 
-    for (const [selector, surfaceToken] of [
-      ['&__bubble--attention', '--openbitfun-color-status-warning-surface'],
-      ['&__bubble--waiting', '--openbitfun-color-status-warning-surface'],
-      ['&__bubble--completed', '--openbitfun-color-status-success-surface'],
-      ['&__bubble--error,\n  &__bubble--interrupted', '--openbitfun-color-status-danger-surface'],
+    for (const [selector, contentToken] of [
+      ['&__bubble--attention', '--openbitfun-color-status-warning-content'],
+      ['&__bubble--waiting', '--openbitfun-color-status-warning-content'],
+      ['&__bubble--completed', '--openbitfun-color-status-success-content'],
+      ['&__bubble--error,\n  &__bubble--interrupted', '--openbitfun-color-status-danger-content'],
     ] as const) {
       const state = extractBlock(stylesheet, selector);
-      expect(state).toContain('background-image: linear-gradient(');
-      expect(state).toContain(`var(${surfaceToken})`);
-      expect(state).not.toContain(`background: var(${surfaceToken});`);
+      expect(state).toContain(`--_bubble-light: var(${contentToken});`);
+      expect(state).not.toMatch(/background(?:-color|-image)?:|gradient\(/);
     }
   });
 
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 03471b0891..1187c38a19 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1561,8 +1561,7 @@ $_section-header-height: 22px;
 // Device overview — one compact model, local and connected states
 // ──────────────────────────────────────────────
 
-// The light that fills the card is the displayed device's state; registering it
-// lets the whole surface cross-fade between devices instead of snapping.
+// State color is limited to the device controls; the card stays neutral.
 @property --_device-overview-light {
   syntax: '<color>';
   inherits: true;
@@ -1577,10 +1576,8 @@ $_section-header-height: 22px;
   --_device-overview-inline-size: min(312px, calc(100vw - 16px));
   --_device-overview-stage-size: 120px;
   --_device-overview-inset: var(--openbitfun-space-4);
-  // Silver until a device is under control: this device and a device not yet
-  // connected share one neutral light; only a live connection turns green.
+  // Local and disconnected devices use neutral controls; a live connection is green.
   --_device-overview-light: var(--openbitfun-color-content-secondary);
-  --_device-overview-light-strength: 16%;
   position: fixed;
   z-index: var(--openbitfun-layer-popover);
   width: var(--_device-overview-inline-size);
@@ -1589,25 +1586,10 @@ $_section-header-height: 22px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background:
-    radial-gradient(
-      120% 78% at 50% 0%,
-      color-mix(in srgb, var(--_device-overview-light) var(--_device-overview-light-strength), transparent),
-      transparent 74%
-    ),
-    radial-gradient(
-      90% 55% at 100% 100%,
-      color-mix(in srgb, var(--_device-overview-light) calc(var(--_device-overview-light-strength) / 3), transparent),
-      transparent 70%
-    ),
-    var(--openbitfun-color-surface-raised);
+  background: var(--openbitfun-color-surface-raised);
   transition: --_device-overview-light var(--openbitfun-motion-duration-slow) var(--openbitfun-motion-easing-standard);
   animation: openbitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
 
-  :where([data-color-scheme='dark']) & {
-    --_device-overview-light-strength: 26%;
-  }
-
   &[data-control-state='active'] {
     --_device-overview-light: var(--openbitfun-color-status-success-content);
   }
@@ -1937,7 +1919,7 @@ $_section-header-height: 22px;
   }
 }
 
-// A soft top-lit fill reads as a material rather than a flat cut-out.
+// A single neutral fill keeps the device silhouette legible on the solid card.
 .openbitfun-device-overview__artwork-glyph {
   position: relative;
   justify-self: center;
@@ -1945,11 +1927,7 @@ $_section-header-height: 22px;
   height: 56%;
   margin-block-end: var(--openbitfun-space-2);
   aspect-ratio: 140 / 78;
-  background: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--openbitfun-color-content-primary) 72%, transparent),
-    color-mix(in srgb, var(--openbitfun-color-content-primary) 42%, transparent)
-  );
+  background: var(--openbitfun-color-content-secondary);
   mask: url('./assets/device.svg') center / contain no-repeat;
 }
 
diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx
index e1cde0d5aa..c3c700db41 100644
--- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx
@@ -208,6 +208,44 @@ afterEach(() => {
 });
 
 describe('device status card', () => {
+  it.each(['signed-out', 'loading', 'authorizing'])(
+    'opens device management directly when account identity is %s', status => {
+      state.identity = { status, me: null };
+      render(false);
+
+      act(() => element('nav-footer-device-status').click());
+
+      expect(onManageDevices).toHaveBeenCalledOnce();
+      expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+      expect(element('nav-footer-device-status').getAttribute('aria-expanded')).toBe('false');
+      expect(document.querySelector('[data-testid="nav-device-status-popover"]')).toBeNull();
+      expect(state.refresh).not.toHaveBeenCalled();
+      expect(state.accountListDevices).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each([false, true])('toggles the overview when signed in (peer active: %s)', async peerActive => {
+    state.identity = { status: 'signed-in', me: { user: { accountId: 'acct' } } };
+    state.overview = overview({ peer: peerActive ? { deviceId: 'peer-1', deviceName: 'Remote Mac' } : null });
+    state.getDeviceInfo.mockResolvedValue({ device_id: 'local', device_name: 'Workstation' });
+    state.accountListDevices.mockResolvedValue([]);
+    function Footer() {
+      const [open, setOpen] = React.useState(false);
+      return <DeviceStatusControl open={open} onOpenChange={setOpen} onManageDevices={onManageDevices} />;
+    }
+    act(() => root.render(<Footer />));
+
+    await act(async () => { element('nav-footer-device-status').click(); });
+    expect(element('nav-footer-device-status').getAttribute('aria-expanded')).toBe('true');
+    expect(element('nav-device-status-popover')).not.toBeNull();
+    expect(onManageDevices).not.toHaveBeenCalled();
+
+    act(() => element('nav-footer-device-status').click());
+    expect(element('nav-footer-device-status').getAttribute('aria-expanded')).toBe('false');
+    expect(document.querySelector('[data-testid="nav-device-status-popover"]')).toBeNull();
+    expect(onManageDevices).not.toHaveBeenCalled();
+  });
+
   it('pins an upward card by its bottom edge so height changes never reposition it', () => {
     render(false);
     const rect = (top: number, height: number, width: number) => ({
diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
index eb3245b12b..a5c7ffbe1f 100644
--- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
@@ -418,7 +418,13 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
           aria-label={accessibleSummary}
           aria-expanded={open}
           aria-haspopup="dialog"
-          onClick={() => onOpenChange(!open)}
+          onClick={() => {
+            if (identity.status !== 'signed-in') {
+              handleManageDevices();
+              return;
+            }
+            onOpenChange(!open);
+          }}
           data-testid="nav-footer-device-status"
           data-openbitfun-component="nav-panel"
           data-openbitfun-part="deviceStatus"
diff --git a/src/web-ui/src/app/components/NavPanel/sections/devices/BackgroundSessionList.tsx b/src/web-ui/src/app/components/NavPanel/sections/devices/BackgroundSessionList.tsx
index c7d08069f2..70ea510255 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/devices/BackgroundSessionList.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/devices/BackgroundSessionList.tsx
@@ -36,7 +36,6 @@ import {
   SESSIONS_PREFETCH_COUNT,
 } from '../sessions/sessionNavExpand';
 import { useSessionNavExpansion } from '../sessions/useSessionNavExpansion';
-import { isWorkspaceSessionsCollapsed } from '../workspaces/workspaceDisclosure';
 import { SessionStatusMark } from '../sessions/SessionStatusIndicator';
 import { useCatalogSessionStatus } from './catalogSessionStatus';
 import { openDeviceSession } from './openOnDevice';
@@ -269,8 +268,6 @@ export const BackgroundSessionList: React.FC<{
   const primaryWorkspaceId = workspaceIds[0] ?? '';
   const { displayCount, setDisplayCount } = useSessionNavExpansion(
     `${surfaceScopedKey(slot.surfaceId, flat ? undefined : primaryWorkspaceId)}:${sourceAgent}`,
-    // Unmounted by a collapse: reopening starts at the first rows.
-    { shouldHandOff: () => flat || !isWorkspaceSessionsCollapsed(slot.surfaceId, primaryWorkspaceId) },
   );
 
   const isRunning = useCallback((session: Session) => (
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index 0b90f8b189..afbaf359f0 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -276,12 +276,10 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
   const dispatchTransportByJobId = useDispatchJobStore(state => state.transportByJobId);
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
   const [editingTitle, setEditingTitle] = useState('');
-  const isVisibleRef = useRef(isVisible);
-  isVisibleRef.current = isVisible;
   const { displayCount, setDisplayCount } = useSessionNavExpansion(
     `${surfaceScopedKey(getActiveSurfaceId(), workspaceId)}:${sourceAgent}`,
     // Collapsing a workspace and opening it again starts at the first rows.
-    { visible: isVisible, shouldHandOff: () => isVisibleRef.current },
+    { visible: isVisible },
   );
   const surface = getActiveSurfaceScope();
   const initialMetadataKey = surface.key(workspaceId, surface.epoch);
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.test.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.test.tsx
index ce596f6bb6..ea60c297dc 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.test.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.test.tsx
@@ -3,7 +3,12 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { getSessionDisplayLimit, nextSessionDisplayCount } from './sessionNavExpand';
-import { useSessionNavExpansion } from './useSessionNavExpansion';
+import { resetSessionNavExpansion, useSessionNavExpansion } from './useSessionNavExpansion';
+import { surfaceScopedKey } from '@/infrastructure/peer-device/deviceSurface';
+import { setWorkspaceSessionsCollapsed } from '../workspaces/workspaceDisclosure';
+import { useWorkspaceSessionViewStore } from '../../workspaceSessionView';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 describe('session list expansion state', () => {
   let container: HTMLDivElement;
@@ -11,7 +16,7 @@ describe('session list expansion state', () => {
   const renders: Array<{ scope: string; rows: number }> = [];
 
   function List({ scope, count, visible = true }: { scope: string; count: number; visible?: boolean }) {
-    const { displayCount, setDisplayCount } = useSessionNavExpansion(scope, { visible, shouldHandOff: () => visible });
+    const { displayCount, setDisplayCount } = useSessionNavExpansion(scope, { visible });
     const rows = getSessionDisplayLimit({ loadedTopLevelCount: count, displayCount, showAllWithoutLimit: false });
     renders.push({ scope, rows });
     return <>
@@ -25,6 +30,7 @@ describe('session list expansion state', () => {
   const count = () => Number(container.querySelector('output')?.textContent);
 
   beforeEach(() => {
+    resetSessionNavExpansion();
     renders.length = 0;
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -68,6 +74,35 @@ describe('session list expansion state', () => {
     expect(count()).toBe(3);
   });
 
+  it('keeps the count when live and background lists replace each other in the same commit', () => {
+    const scope = 'same-commit:project:all';
+    const replace = (key: string) => act(() => {
+      root.render(<List key={key} scope={scope} count={12} />);
+    });
+    replace('live');
+    click();
+    expect(count()).toBe(8);
+    renders.length = 0;
+    replace('background');
+    expect(renders.every(entry => entry.rows === 8)).toBe(true);
+    expect(count()).toBe(8);
+    click();
+    click();
+    expect(count()).toBe(3);
+    renders.length = 0;
+    replace('live-again');
+    expect(renders.every(entry => entry.rows === 3)).toBe(true);
+  });
+
+  it('does not let StrictMode replay consume a previous expansion', () => {
+    const scope = 'strict:project:all';
+    act(() => root.render(<React.StrictMode><List key="live" scope={scope} count={12} /></React.StrictMode>));
+    click();
+    renders.length = 0;
+    act(() => root.render(<React.StrictMode><List key="background" scope={scope} count={12} /></React.StrictMode>));
+    expect(renders.every(entry => entry.rows === 8)).toBe(true);
+  });
+
   it('starts over at three rows when a collapsed workspace opens again', () => {
     render('local:project:all', 30);
     click();
@@ -77,6 +112,19 @@ describe('session list expansion state', () => {
     expect(count()).toBe(3);
   });
 
+  it('collapses all source views of one workspace without resetting the same workspace on another device', () => {
+    const local = `${surfaceScopedKey('local', 'shared')}:all`;
+    const peer = `${surfaceScopedKey('peer', 'shared')}:all`;
+    const source = `${surfaceScopedKey('peer', 'shared')}:codex`;
+    for (const scope of [local, peer, source]) { render(scope, 12); click(); }
+    act(() => setWorkspaceSessionsCollapsed('peer', 'shared', true));
+    for (const scope of [peer, source]) { render(scope, 12); expect(count()).toBe(3); }
+    render(local, 12);
+    expect(count()).toBe(8);
+    act(() => useWorkspaceSessionViewStore.getState().requestCollapseAll());
+    expect(count()).toBe(3);
+  });
+
   it('does not hand a collapsed list count to the next mount', () => {
     act(() => { root.render(<List scope="peer:project:all" count={30} />); });
     click();
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.ts b/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.ts
index 63af6a370f..26d2c0e7d0 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/useSessionNavExpansion.ts
@@ -1,65 +1,45 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useSyncExternalStore } from 'react';
 import { SESSIONS_INITIAL_COUNT } from './sessionNavExpand';
 
 /**
- * A device switch remounts a workspace's rows (background projection to live
- * list and back). The count a list showed when it unmounted is handed to the
- * next list mounting with the same scope shortly after, so "show more" stays
- * expanded through the switch. A scope change inside one list still starts
- * compact.
+ * Expansion belongs to the device/workspace/source view, not either of its
+ * live and background React projections. Publish a click immediately: during
+ * replacement React renders the new list before cleaning up the old one.
+ * An unmount hand-off therefore always arrives too late (and can leave an
+ * older expanded value for the next switch).
  */
-const HANDOFF_MS = 30_000;
-const handoffs = new Map<string, { displayCount: number; at: number }>();
+const counts = new Map<string, number>();
+const listeners = new Set<() => void>();
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+};
+const notify = () => { for (const listener of listeners) listener(); };
 
-function takeHandoff(scope: string) {
-  const entry = handoffs.get(scope);
-  handoffs.delete(scope);
-  return entry && Date.now() - entry.at <= HANDOFF_MS ? entry : undefined;
-}
-
-/** Data discovery never expands the list. Each workspace/source view starts
- * compact, even when another view already has hundreds of metadata rows. */
-export function useSessionNavExpansion(
-  scope: string,
-  options: {
-    /** A collapsed list starts over at the first rows when reopened. */
-    visible?: boolean;
-    /** Checked on unmount: only a remount (device switch) keeps the count. */
-    shouldHandOff?: () => boolean;
-  } = {},
-) {
-  const { visible = true } = options;
-  const shouldHandOff = useRef(options.shouldHandOff);
-  shouldHandOff.current = options.shouldHandOff;
-  const [state, setState] = useState(() => ({
-    scope, displayCount: takeHandoff(scope)?.displayCount ?? SESSIONS_INITIAL_COUNT,
-  }));
-  const latest = useRef(state);
-  latest.current = state;
-  useEffect(() => () => {
-    const { scope: last, displayCount } = latest.current;
-    if (displayCount > SESSIONS_INITIAL_COUNT && (shouldHandOff.current?.() ?? true)) {
-      const now = Date.now();
-      // Unclaimed hand-offs (a list that never remounted) lapse here.
-      for (const [key, entry] of handoffs) if (now - entry.at > HANDOFF_MS) handoffs.delete(key);
-      handoffs.set(last, { displayCount, at: now });
+/** Reset one workspace's source views, or every view for Collapse All. */
+export function resetSessionNavExpansion(workspaceScope?: string): void {
+  let changed = false;
+  for (const key of counts.keys()) {
+    if (workspaceScope === undefined || key === workspaceScope || key.startsWith(`${workspaceScope}:`)) {
+      counts.delete(key);
+      changed = true;
     }
-  }, []);
-  useEffect(() => {
-    if (!visible) setState(previous => previous.displayCount === SESSIONS_INITIAL_COUNT ? previous : { scope, displayCount: SESSIONS_INITIAL_COUNT });
-  }, [scope, visible]);
-  useEffect(() => {
-    setState(previous => previous.scope === scope ? previous : { scope, displayCount: SESSIONS_INITIAL_COUNT });
-  }, [scope]);
+  }
+  if (changed) notify();
+}
 
-  const setDisplayCount = useCallback((displayCount: number) => {
-    setState({ scope, displayCount: Math.max(SESSIONS_INITIAL_COUNT, displayCount) });
+export function useSessionNavExpansion(scope: string, { visible = true }: { visible?: boolean } = {}) {
+  const read = useCallback(() => counts.get(scope) ?? SESSIONS_INITIAL_COUNT, [scope]);
+  const displayCount = useSyncExternalStore(subscribe, read, read);
+  // Retained live lists also support visibility without being unmounted.
+  // Background lists reset at the workspace disclosure action, before unmount.
+  useLayoutEffect(() => { if (!visible) resetSessionNavExpansion(scope); }, [scope, visible]);
+  const setDisplayCount = useCallback((value: number) => {
+    const next = Math.max(SESSIONS_INITIAL_COUNT, value);
+    if (next === (counts.get(scope) ?? SESSIONS_INITIAL_COUNT)) return;
+    if (next === SESSIONS_INITIAL_COUNT) counts.delete(scope);
+    else counts.set(scope, next);
+    notify();
   }, [scope]);
-
-  return {
-    // Limit the very first render after a filter/device switch, before effects
-    // run, so the previous view cannot briefly mount its entire expanded list.
-    displayCount: state.scope === scope ? state.displayCount : SESSIONS_INITIAL_COUNT,
-    setDisplayCount,
-  };
+  return { displayCount: visible ? displayCount : SESSIONS_INITIAL_COUNT, setDisplayCount };
 }
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/workspaceDisclosure.ts b/src/web-ui/src/app/components/NavPanel/sections/workspaces/workspaceDisclosure.ts
index d82c51ef07..5c0b900b6f 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/workspaceDisclosure.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/workspaceDisclosure.ts
@@ -1,6 +1,7 @@
 import { create } from 'zustand';
-import type { DeviceSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
+import { surfaceScopedKey, type DeviceSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
 import { useWorkspaceSessionViewStore } from '../../workspaceSessionView';
+import { resetSessionNavExpansion } from '../sessions/useSessionNavExpansion';
 
 /**
  * Which project rows are collapsed, per device. Window-wide rather than
@@ -33,6 +34,7 @@ export function isWorkspaceSessionsCollapsed(surfaceId: DeviceSurfaceId, workspa
 }
 
 export function setWorkspaceSessionsCollapsed(surfaceId: DeviceSurfaceId, workspaceId: string, collapsed: boolean): void {
+  if (collapsed) resetSessionNavExpansion(surfaceScopedKey(surfaceId, workspaceId));
   const requestId = useWorkspaceSessionViewStore.getState().collapseAllRequestId;
   useWorkspaceDisclosureStore.setState(state => ({
     requestId,
diff --git a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
index 366c219127..4bec7eb845 100644
--- a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
+++ b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
@@ -3,6 +3,7 @@ import { DEFAULT_SESSION_VIEW_KEY } from '@/flow_chat/services/workspaceSessionT
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { Session } from '@/flow_chat/types/flow-chat';
 import { isWorktreeIsolatedSession } from '@/flow_chat/utils/sessionOrdering';
+import { resetSessionNavExpansion } from './sections/sessions/useSessionNavExpansion';
 import { EXTERNAL_SESSION_NAMES, isExternalSessionEcosystem, type ExternalSessionEcosystem } from '@/shared/types/external-session';
 
 export type WorkspaceSessionGrouping = 'grouped' | 'all';
@@ -127,7 +128,10 @@ export const useWorkspaceSessionViewStore = create<WorkspaceSessionViewState>()(
         sourceAgent: 'all',
         explicitAllFilters: DEFAULT_WORKSPACE_SESSION_VIEW.explicitAllFilters,
       }),
-      requestCollapseAll: () => set(state => ({ collapseAllRequestId: state.collapseAllRequestId + 1 })),
+      requestCollapseAll: () => {
+        resetSessionNavExpansion();
+        set(state => ({ collapseAllRequestId: state.collapseAllRequestId + 1 }));
+      },
     }),
     {
       name: 'openbitfun.workspace-session-view.v2',
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
index 00a6c1e549..b9f9b2170e 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
@@ -97,6 +97,10 @@ describe('BtwVirtualSessionList', () => {
       return nextFrame;
     });
     vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
     vi.stubGlobal('ResizeObserver', class {
       targets = new Set<Element>();
       constructor(callback: ResizeObserverCallback) {
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 00b5c954d8..1840efff55 100644
--- a/src/web-ui/src/flow_chat/components/modern/AGENTS.md
+++ b/src/web-ui/src/flow_chat/components/modern/AGENTS.md
@@ -114,7 +114,7 @@ before reporting a defect as new.
   38px user message to a 5012px model round.
 - Request completion and presentation layout are separate events, in either
   order. A page must pass both before another page can dispatch. Notify layout
-  only after measurement/prepend compensation; do not use timers as commit proof.
+  only after measurement/window reconciliation; do not use timers as commit proof.
 - After the first ask, another page requires fresh directional reader demand.
   Coalesce demand received during a request; clear it when the reader reverses
   or the boundary leaves the prefetch lead. Layout/resize/compensation alone
@@ -137,16 +137,28 @@ before reporting a defect as new.
 - `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.
+- Historical publication is atomic per complete Turn. Transport pages, timeouts
+  and terminal headers do not prove completeness; do not expose staged fragments.
+- Historical viewing uses a native bottom scroll origin. Older complete Turns
+  grow upward without prepend compensation,
+  leading-extent floors or passive follow writes. Unmounted row estimates select
+  virtual windows; they must not determine the historical tail's position.
+  Keep the latest complete Turn in a viewport-sized CSS shell with trailing
+  flexible space, so short Turns start at the top and older Turns insert outside
+  its reservation. Historical virtual ranges admit complete Turns together.
+- Do not select layout from `Session.isHistorical`: it is a hydration flag that
+  clears at the first page. Keep the native history layout until actual runtime
+  processing or submission, or an explicit presentation-mode handoff.
+- Keep chronological public indexes, DOM order and persisted top offsets stable.
+  Reverse internal indexes belong only to `useFlowChatVirtualizer`; native offset
+  conversion belongs to `flowChatScrollCoordinates` and the viewport register.
+- Reader demand and the DOM reading anchor use native scroll travel, not changes
+  in the total history range. An idle edge gesture can request a page without
+  anchoring a stationary bubble or manufacturing a new scroll position.
+- A reader repair uses an actually painted block. Publish its accepted offset
+  before releasing retained rows; delayed native scroll events must not remove
+  and recreate the same visible content. Live top-origin prepend compatibility
+  remains separate from native historical tail loading.
 - 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
@@ -206,6 +218,17 @@ before reporting a defect as new.
 - 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.
+- Width reflow is one layout placement around the current visible content.
+  Preserve measured/reserved history coordinates; never clear all sizes and
+  animate back after selecting a window from replacement estimates. Retain
+  fractional row heights so virtual padding replaces their exact occupied space.
+- When a live-layout reflow releases an old extent, snapshot the viewport before changing
+  the range. Browser clamping is part of that transaction, never reader travel
+  and never a second displacement to animate.
+- An insertion before the internal virtual window retains the committed visible
+  keys until reading repair and offset readback are complete. Release retention
+  in that layout commit so newly visible blocks materialize. Native older pages
+  append after the internal window and require no prefix displacement.
 
 ## Verification
 
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
index 61fd3d3605..e3e892cc53 100644
--- 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
@@ -45,71 +45,79 @@ read never navigates to the tail as a fallback. Session, surface and navigation
 generation fence the result. Failures expose retry, while stale reads may warm
 the cache without replacing a newer reader intent.
 
-## Prepend geometry snapshot
-
-`FlowChatPrependSnapshot` captures the old DOM scroll height in React's
-`getSnapshotBeforeUpdate`, only when a new head precedes the previous first
-item. The parent layout effect consumes that snapshot after mutation using the
-existing compensation bounds and viewport register. Ordinary virtual-window
-updates, tail appends and head trims do not read scroll height for this baseline.
-This avoids a synchronous layout read on every scroll-driven commit while
-including geometry changes since the last React render. Tests model growth at
-DOM mutation and verify snapshot ordering; runtime performance and remote
-scenarios require separate validation.
-
-The anchor renews its settle budget only when a correction reduces its measured
-residual (or reaches tolerance), or while a missing Turn is still awaited.
-An ineffective correction is remembered for that exact anchor/viewport geometry;
-it is retried after geometry changes or a new anchor is captured, not on every
-frame. Identical resize notifications do not renew the budget. The comparison
-includes the anchor's content coordinate, so displacement at unchanged total
-height still opens a settle. Item changes, snapshot restores and host resumes
-remain explicit settle triggers. No sign-change count or overall time limit
-terminates valid corrections.
-
-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 decides proximity, not permission.** `historyBoundariesReached`
-reports the physical item boundary; `historyBoundariesForVisibleRange` adds the
-one-screen prefetch lead. Permission belongs to `FlowChatHistoryPager`.
+## Complete Turns are the history publication unit
+
+A history transport page is not a render transaction. The Rust controller joins
+bounded record pages until each Turn's root membership (`turnRecordIds`) is
+present, including unchanged items older than a republished terminal root.
+Only then does it emit the records followed by ready. Missing members, a stalled
+cursor or an epoch change fail the read without publishing fragments. The field
+is optional and lives on the wire root, never on persisted Turns or every child.
+For older hosts without membership evidence, the controller completes the
+available history read before publishing; their first open can take longer.
+
+`RelaySessionHistory` stages replay records outside the replica until ready.
+There is no 250ms history flush: timers, document visibility, immediate terminal
+records, mailbox reads and direct runtime flushes cannot expose half a Turn.
+Live updates after a ready batch retain frame batching and immediate terminal
+settling. Already published history survives a failed read; retry replays the
+unpublished batch. Local restore/window APIs already return whole Turn bodies.
+
+## Native history origin
+
+Historical viewing uses a native bottom scroll origin. The scroller is a
+`column-reverse` flex container with one non-shrinking extent; rows inside that
+extent remain in chronological DOM order. The latest complete Turn has a CSS
+minimum extent of one viewport minus the header gap, with flexible trailing
+space after its content. A short Turn therefore starts at the top; older Turns
+insert outside that reservation. No content-height estimate determines its
+position. Native `scrollTop` is zero at the latest content and
+negative toward earlier content.
+
+Earlier complete Turns extend the extent upward. Partial historical Turns never
+enter the rendered projection. Neither the old first item's
+estimated height nor the total height difference determines the viewport.
+`FlowChatPrependSnapshot`, leading-extent floors and passive follow corrections
+are disabled for this layout. The container's repeated `scrollToTurnEnd` opening
+request only acknowledges a rendered latest row; it cannot re-aim the native
+history tail when the Turn-summary count changes. Delayed card measurements and width reflow above
+the visible tail do not need scroll writes or animation.
+
+The virtualizer traverses this layout from newest to oldest. An older prepend
+appends to that internal sequence, leaving the tail's coordinates unchanged.
+Height estimates reserve unmounted rows for range selection; they never decide
+how far to move the historical tail. The adapter translates back to chronological
+indexes for renderers, selection, navigation and pagination. See
+`FLOWCHAT_VIRTUALIZATION.md` for measurement and index details.
+
+Layout lifetime is separate from hydration. `Session.isHistorical` becomes false
+when the first page is ready, so it cannot select the coordinate convention.
+An idle transcript opens in native history layout and keeps it through all
+background pages. Actual runtime processing or explicit submission hands it to
+the live layout. Explicit history-reading mode selects native history layout.
+`FlowChatScrollOriginBoundary` preserves an existing painted row during that
+coordinate handoff and publishes the new offset before window selection.
+A page arriving in the same layout never enters this transaction.
+
+The reading anchor still preserves a reader-selected, actually mounted block
+when content below it changes. It measures that block's screen relationship,
+not unseen prefix heights. The anchor and reader-demand accounting use native
+scroll travel: increasing the history range is not a user scroll. A wheel at a
+short transcript's stationary tail asks for earlier content without selecting
+a stationary user bubble as an anchor. New older content continues upward.
+
+Navigation and persisted snapshots retain their existing top-origin convention.
+`flowChatScrollCoordinates.ts` converts those offsets at the viewport adapter.
+Old bookmarks remain readable; no stored field or remote protocol changes.
+
+## A page is asked for a screenful early
+
+`HISTORY_BOUNDARY_LEAD_SCREENS` requests a page while its boundary is within a
+viewport of the reader, with the existing item-boundary fallback for short
+transcripts. The lead is a proximity signal; the pager still owns permission,
+request tickets, commit acknowledgement and fresh directional reader demand.
+Do not use overscan rows as a visible range, or infer user travel from a growing
+native history range.
 
 ## Request, Layout, and Reader Demand
 
@@ -134,7 +142,7 @@ never reached the physical boundary had the same structural weakness.
 
 The list reserves a ticket before invoking the handler. Its existing
 `prepareViewportForPresentationCommit` callback checks that the ticket is still
-current. A layout effect **after** measurement, prepend compensation, and
+current. A layout effect **after** measurement, window reconciliation, and
 prepared navigation acknowledges the presentation. Layout can precede or follow
 the promise result. A completion acknowledgement also renders when the returned
 page was already projected. This acknowledges a commit, not convergence of all
@@ -143,7 +151,7 @@ future row measurements; later measurement callbacks cannot create reader demand
 Directional wheel/touch/key intent can ask even at scrollTop=0, where no native
 scroll event occurs. Native travel covers scrollbar dragging and inertia. The
 viewport register subtracts its actual synchronous writes/shifts (including
-clamping), so a delayed scroll event caused by compensation adds no demand.
+clamping), so a delayed scroll event caused by a registered repair adds no demand.
 Owned smooth navigation/follow scrolls are excluded. Content commits rebaseline
 travel because replacing content can clamp the browser's scroll position.
 
@@ -171,332 +179,32 @@ resolved in the September 22 reproduction. The broader input-device matrix and
 remote transports still require separate manual validation; unit geometry is
 not performance evidence.
 
-## 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 or a navigation still reaching its
-Turn.
-
-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 inside the reserved blank. 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 consumes the remaining settle budget rather than
-refreshing it. The cost is a `querySelectorAll` and two rect reads per frame for
-the bounded settle window. A correction or a Turn still waiting to render
-refreshes the window, while a stable anchor winds it down and another owner
-holding the viewport still stands it down.
-
-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.
+## Reading continuity and live-layout compatibility
+
+Native historical tail loading has no prepend compensation pass. Its earlier
+content grows above the fixed native origin, including delayed measurements.
+When the reader scrolls into history, the existing DOM anchor tracks the actual
+visible block. Structural changes below that block preserve its screen offset
+through `TimelineMutationBoundary` and the viewport register. Publish accepted
+reader repairs to the virtualizer immediately; waiting for a native scroll event
+can select an intermediate window that removes and recreates the same row.
+
+The live layout retains its top-origin leading extent, prepend snapshot and
+follow rules. Those apply to an active reply and its reserved trailing space,
+not to the default historical open. A history-to-live handoff preserves current
+DOM identity; a submitted message then performs its existing one-shot placement.
+The virtualizer refreshes its measurement-index attributes at that handoff so
+later ResizeObserver entries cannot resize the old index.
+
+`VirtualMessageList.timeline-prepend.test.tsx` exercises the production timeline
+with real virtualization, ownership and follow hooks. It covers complete-Turn publication, structural edits above a reader, short text
+and tool histories, consecutive pages, delayed sizes,
+width-independent origin lifetime, navigation, existing bookmark shapes and live
+handoff on local and simulated Peer surfaces. Native-history tail assertions
+require the same DOM node and screen position before observer callbacks, and
+zero scroll writes through the page/measurement sequence. Geometry is supplied
+because jsdom has no layout engine; these are not native WebView or live remote
+verification results.
 
 ## The Ask Is Derived From the Transcript, Not From the Window
 
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 1d01cdb3c9..2cebd405eb 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
@@ -31,6 +31,12 @@ 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.
 
+Historical layout reserves the final complete Turn's minimum extent through
+CSS, based only on viewport height and the header gap. Flex places unused space
+below its content. Older Turns insert before this shell, never consume its
+trailing space, and do not change the final user row's inset through a new public
+index. The live spacer/follow contract below remains separate.
+
 ## Opening Reveal
 
 The opening transcript uses opacity and `aria-hidden` until its existing reveal
@@ -58,6 +64,20 @@ runtime confirmation using the read-only reveal probes.
 
 ## Transcript Width
 
+WebKit omits the leading `stable both-edges` gutter when its scroller uses
+reverse flex layout. `centerFlowChatExtent` normalizes the actual extent's
+horizontal centre against the scroller, before paint and on width/origin changes.
+It reads actual rectangles; `clientWidth` cannot infer both gutters in WebKit.
+A static WKWebView fixture with a 1000px panel/900px reading column reproduced
+15px displacement, then verified matching 58px text/composer edges and an 8px
+short-Turn top inset before and after an 800px prepend. This is layout evidence,
+not live desktop interaction or remote-transport acceptance.
+
+
+Native history holds its bottom origin through width changes. The leading-extent
+and reflow translation described in this section apply to the live layout.
+
+
 `FlowChatWidthBoundary` projects the controller-local Appearance width preference
 onto the ChatPane's transcript-width token, shared by the transcript and composer.
 The existing default is 900px and the preference minimum is two thirds (600px).
@@ -76,10 +96,11 @@ cancellation, capture loss, window blur, pane deactivation/resize and unmount
 cancel it and restore the previous preference. Arrow keys resize in physical
 directions (Shift uses a larger step); Home/End select bounds and double-click
 restores the default. Dragging suspends width-derived measurement through the
-existing pane-resize contract. The committed content width also enters the
-virtualizer's estimate context and layout signature, since a reading column can
-reflow while its full-width scroller keeps the same box. No new viewport writer
-or follow policy is introduced.
+existing pane-resize contract. Mounted-row ResizeObserver measurements remain
+active during preview; the full measurement pass runs at the settled width.
+The follow owner samples actual column geometry, so the preview and final
+preference update use the same atomic placement even when the scroller keeps
+the same box. No new viewport writer is introduced.
 
 The scroller's `--_flow-chat-top-mask-start` is registered as non-inheriting:
 only its own edge mask consumes the value. An opening trace placed a 562.3ms
@@ -157,40 +178,23 @@ 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.
+An idle historical transcript opens with a native bottom scroll origin. Earlier
+content extends upward, including pages completing an existing Turn. Follow
+retains its ownership state for navigation policy but performs no passive
+viewport writes, leading-extent calculation or follow animation in that layout.
+See `FLOWCHAT_HISTORY_PAGING.md` for its lifetime and reading contract.
+
+An already active reply opens in the live top-origin layout. Its initial window
+is seeded near the tail and opening follow places the measured target without
+animation. Its trailing reservation, submission placement and output easing
+continue to use the rules below. Actual runtime processing or submission switches
+an idle history view to live layout; clearing the hydration flag does not.
+
+Both layouts retain the opening paint gate and semantic reveal condition: the
+last virtual row is rendered with its end inside the viewport and the viewport
+has reached its target. A stationary unmeasured total height is not reveal proof.
+Old reading bookmarks restore the semantic item and offset before reveal, using
+the same persisted coordinate convention.
 
 ## Revealing a New Turn
 
@@ -393,57 +397,45 @@ viewport resting in the reserved blank is an intentional reader-controlled
 state. A gesture stops the loop before it can hide anything, and no later settle
 step reclaims the viewport.
 
-## 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.
+## Reflow Is One Layout Placement
+
+The existing visible content is the reference for a width/height change. A
+settled answer must not move down on one paint and then ease back over later
+frames. The follower samples the actual row-column width and scroller height
+with each layout signal. Container resize handling first measures all mounted
+rows: row-observer and container-observer delivery order must yield the same
+placement, otherwise the same displacement is applied twice. This includes
+the CSS-only preview of a column drag:
+the persisted preference and the outer scroller can both remain unchanged.
+
+A reflow translates the current offset and follow target by the same layout
+displacement, synchronously before paint. Only lag from actual output growth
+continues easing. The former leading floor is released for this reflow and
+captured again at the resulting position; ordinary collapse and reader-owned
+positions keep their floors. Capture the previous offset **before** releasing
+that floor: shrinking the scroll range can clamp the native offset immediately.
+Translating the already-clamped value subtracts the shrink twice, showing a jump
+and then an animated return. A higher-priority owner prevents both floor release
+and the write; the pending layout revision remains available for the next sample.
+
+The virtualizer retains measured sizes and existing estimate reservations across
+width/font changes. Mounted rows replace them with their actual geometry;
+unmounted rows keep their reservation until they return. Resetting the entire
+cache to estimates first can select a different window before the original
+visible anchor has been placed. Normal-flow rows are measured in fractional CSS
+pixels, through ResizeObserver border boxes or synchronous rectangles. Padding
+must replace exactly the occupied height, not a separately rounded height for
+each row.
+
+A reader keeps the existing visible block anchor. The resize observer restores
+that relationship before paint instead of capturing a new anchor after the
+content has moved. A column rewrap can still change the line breaks *inside* a
+long block; this is a block anchor, not a text-character anchor. The native scroll
+path continues to replace it when the reader moves.
+
+There is no callback-count window for reflow. Later output at the same layout
+revision follows its ordinary streaming policy. Native `overflow-anchor` remains
+`none`; the existing viewport register owns the atomic coordinate translation.
 
 ## An Animation Only as Far as the Reader Can Follow
 
@@ -616,11 +608,6 @@ content such as history state and `RuntimeStatusSlot`.
   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 range is intentionally draggable and no longer bounces back.
 - The opening reveal has a hard frame cap. A session that pages for longer than
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
index c242b73fc6..1072eff1f1 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -41,16 +41,21 @@ each missing what the other had.
 | `modelRoundItemMemo.test.ts` | settled rows refresh continuation labels and tool grouping hints without invalidating equivalent hints |
 | `flowChatTailFollow.test.ts` | the three-quarter reservation and `hold-tail` geometry |
 | `flowChatCollapseMotion.test.ts` | collapse does not move earlier content |
-| `useFlowChatFollowOutput.test.tsx` | one-shot new-Turn reveal, frame loop, blank crossing, resize realign, opening readback publication and ownership/lifecycle gates |
+| `useFlowChatFollowOutput.test.tsx` | one-shot new-Turn reveal, frame loop, blank crossing, atomic reflow across native clamping, preserved output lag, opening readback publication and ownership/lifecycle gates |
 | `../../tool-cards/useToolCardHeightContract.test.tsx` | tool cards reflow rather than compensate |
 | `flowChatHistoryBoundary.test.ts` | the screenful lead and physical boundary geometry |
+| `flowChatViewportGeometry.test.ts` | actual gutter centring, symmetric/omitted leading gutter and origin handoff without accumulated horizontal offset |
+| `../../services/RelaySessionHistory.test.ts`, `../../store/FlowChatStore.test.ts` | replay staging outside the replica, no timeout/visibility/direct-flush partial Turn publication, failed-read retention, retry and live-record batching |
 | `flowChatHistoryPager.test.ts` | request/layout ordering, coalesced demand, prefetch without physical arrival, stale tickets, exhaustion and retry eligibility |
-| `useFlowChatViewportOwner.test.tsx` | synchronous write/shift accounting preserves reader travel and actual clamping |
+| `useFlowChatViewportOwner.test.tsx` | top/native coordinate conversion, older-range growth creates no reader demand, synchronous write/shift accounting preserves reader travel and actual clamping |
 | `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 |
 | `useFlowChatLeadingExtent.test.tsx` | shared event geometry without repeated rectangle reads; fresh layout reads after resize and collection |
 | `VirtualMessageList.session-boundary.test.tsx` | prepend compensation, consecutive paging with/without queued input, passive scroll suppression, navigation-target current Turn with gesture/follow/session handoff, search placement only outside the readable viewport, and real viewport-register acknowledgement before trajectory details/highlights commit for user/search/model/folded-tool/history targets |
+| `VirtualMessageList.resize.test.tsx` | first-frame node and screen-position retention during repeated CSS-only width previews, release, fractional row geometry, native clamping, both row/container observer orders and delayed scroll delivery; completed follow and reader-owned positions on local/simulated peer surfaces, not native or live-transport evidence |
+| `VirtualMessageList.history-prepend.test.tsx` | full list with real virtualization/follow/ownership: stable row identity and screen offset through short/long completed answers, consecutive/dense prepends, delayed measurement/native scroll and reader-chosen positions on local/simulated peer surfaces; supplied row/DOM geometry, not native or live-transport evidence |
+| `VirtualMessageList.timeline-prepend.test.tsx`, `FlowChatPrependSnapshot.test.tsx` | production timeline whole/compound/single-Turn pages; native bottom-origin continuity before observer delivery and zero passive scroll writes, stable hydration lifetime, fractional measurements, bounded long histories, chronological navigation, existing bookmark coordinates, live handoff and reader-selected block retention; supplied DOM geometry on local/simulated Peer, not native paint or live transport evidence |
 | `flowChatScrollbarMask.test.ts`, `VirtualMessageList.session-boundary.test.tsx` | idle gutter masking with symmetric, one-sided and overlay scrollbars; overflow restoration and content/viewport resizing without scroll writes; supplied DOM geometry, not native rendering or live remote evidence |
 | `VirtualMessageList.edgeFade.test.ts`, `VirtualMessageList.session-boundary.test.tsx` | repeated scroll-away/back restores the opaque top edge even when an earlier native listener synchronously commits a virtual window; fractional/top-overscroll offsets, one follow notification per event, current gesture callbacks and old-session cleanup; DOM/CSS contracts, not native repaint or live remote evidence |
 | `FlowChatOpeningBoundary.test.tsx` | opening-only activation/scroll isolation, bidirectional focus skipping, programmatic focus return, and reveal cleanup; DOM contracts only |
@@ -58,7 +63,8 @@ each missing what the other had.
 | `ModernFlowChatContainer.history-state.test.tsx` | history presentation and the submission event |
 | `flowChatViewportOwnership.test.ts` | the priority order, preemption, expiry |
 | `useFlowChatVirtualizer.test.ts` | the offsets-and-positions boundary |
-| `useFlowChatVirtualizer.measurement.test.tsx` | `measureRenderedItems` against a real virtualizer |
+| `useFlowChatVirtualizer.measurement.test.tsx` | `measureRenderedItems` against a real virtualizer, fractional normal-flow sizes and offscreen size reservations across reflow |
+| `useFlowChatVirtualizer.follow.test.tsx` | post-reveal history measurement shifts both follow coordinates before paint, stable tail row identity with delayed scroll delivery, and visible output still eases; real hooks with supplied DOM geometry, not native or live-peer evidence |
 | `useFlowChatVirtualizer.cascade.test.tsx` | bounded synchronous measurement notifications, cross-frame convergence, ordinary synchronous opening, reader takeover and StrictMode/session cleanup; real hooks with supplied geometry, not native paint evidence |
 | `useFlowChatVirtualizer.initial-window.test.tsx` | tail-first window, empty hydration, head default, one-time seed, user-scroll takeover, newly attached rows measured during gestures before observer delivery, smooth-aim target stability and immediate measurement on reader takeover, opening readbacks before native events, suspended viewport, measured-window reconciliation with delayed scroll/scroll-end delivery; supplied DOM geometry, not performance validation |
 | `useFlowChatVirtualizer.aim.test.tsx` | the re-aim, and giving it up on takeover |
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
index 2ca92aed0e..85081ee951 100644
--- 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
@@ -14,6 +14,21 @@ 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.
 
+## Coordinate conventions
+
+Public navigation targets and persisted viewport snapshots remain top-origin.
+`flowChatScrollCoordinates.ts` reads that logical offset and the register converts
+writes to the scroller's native convention. Historical scrollers have a bottom
+origin: native zero is the latest position and negative values move toward older
+content. A growing older prefix changes the logical top offset without any
+native scroll travel or deliberate viewport write.
+
+`readReaderScrollPosition` and the DOM reading anchor therefore account native
+travel, not total scroll range. `shift` is a signed native displacement in both
+conventions. Explicit history/live origin handoffs preserve an actual visible
+row through the existing register; the virtualizer receives immediate readback
+before releasing its retained window.
+
 ## Who May Move the Viewport at All
 
 Continuous movement belongs to `useFlowChatFollowOutput`; one-shot navigation
@@ -43,7 +58,8 @@ be undone.
 
 **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
+both use `viewportOwner.shift`. Prepend compensation belongs only to the live
+top-origin layout; historical tail loading uses no compensation. See
 `FLOWCHAT_HISTORY_PAGING.md`.
 
 **Taking ownership and writing are one call.** Adding a writer without declaring
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
index 4ebb48ff91..1da1f50035 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
@@ -2,49 +2,53 @@
 
 ## Historical scrolling and measurement
 
-Manual scrolling keeps the host's native wheel/touch behavior. Perceived
-smoothness depends on stable content coordinates as well as frame time; adding
-an easing loop to a height correction would expose the correction as motion.
-The implementation follows the read-before-write guidance in
-[rendering performance](https://web.dev/articles/rendering-performance) and
-[layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing).
-No new motion is introduced, so the existing reduced-motion policy and follow
-targets remain unchanged.
-
-Newly attached rows are measured as one batch in the layout phase, including
-while the reader is scrolling. The library's `measureElement` still registers
-observation, but it skips its inline size update during a gesture; the adapter
-therefore supplies the already-read height through `resizeItem` in that commit.
-In this flow layout the real row heights affect following content immediately.
-Waiting for ResizeObserver lets the old virtual padding and real rows disagree
-for a visible frame.
-
-Explicit item/offset aims retain the library's own attachment-measurement policy.
-A smooth aim intentionally leaves distant rows estimated: forcing their sizes
-can move its target and make the library replace the animation with an `auto`
-jump. Reader intent cancels the aim before scrolling, so newly attached rows
-resume synchronous measurement in the first reader-controlled commit.
-
-Above-viewport measurement shifts pass through the viewport register and credit
-the DOM anchor with the **actual applied** displacement. Otherwise the anchor
-counts that repair as reader travel and applies it again. The anchor remains
-independent of the virtualizer; the list joins these two owners.
-
-The native scroll handler shares one `flowChatViewportGeometry` sample among
-leading-extent, anchor and session-snapshot readers. It is local to that event,
-and discarded if a follow write changes the offset. Layout commits, resize and
-navigation read fresh geometry; this is not a cross-frame cache.
-
-The packaged macOS WebView fixture (80 Turns with Markdown, code, tables and
-collapsed tool groups) reproduced 17 reverse frames during 72 fast upward wheel
-actions, with a maximum 499.45px reversal. After these changes the same five
-slow/fast bidirectional phases had zero reversals over 4px and zero blank frames;
-row/scroller rectangle reads fell from 37,331 to 28,489 across those phases.
-Fast-up frame intervals still reached 26ms at p95 and 53ms at maximum in the
-final run; continuity is established here, not a constant 60fps guarantee.
-These are instrumented native-WebView samples, not physical trackpad or
-cross-platform latency measurements. See `FLOWCHAT_VERIFICATION.md` for the
-repeatable fixture and its limits.
+`useFlowChatVirtualizer` supports two coordinate conventions behind one public
+API. Live output uses chronological indexes and a top-origin native scroller.
+History uses a bottom-origin scroller and newest-first internal indexes. Public
+row indexes, stable keys, DOM order, navigation and viewport snapshots remain
+chronological. `data-virtual-index` is public; `data-flowchat-measure-index` is
+private to the adapter and is refreshed for surviving rows after each commit.
+
+For native history, internal offset is `-scrollTop`, index zero is the newest
+row, and the footer is the scroll margin. The internal window's before/after
+padding maps to physical bottom/top padding. Earlier records extend only the
+older side of the virtual range. Selecting a window does not require adding up
+unseen prefix heights to place the latest content.
+
+Historical range selection admits all blocks of each selected Turn together.
+The latest complete Turn stays resident and owns the CSS trailing-space shell;
+older Turns still virtualize. Stable Turn wrappers are present in live layout
+as well, so changing the origin does not reparent/remount visible blocks. An
+unmounted interval between selected Turns lives outside the tail's reservation.
+This trades per-block residency inside an individual historical Turn for atomic
+Turn presentation; a very large single Turn still requires rendering that Turn.
+
+Estimates still reserve space for unmounted content. Keyed measurements and
+fractional border-box sizes replace those reservations as rows mount. Preserve
+surviving reservations across width/font changes, prune retired keys, and keep
+range selection based on viewport overscan, expanded to complete Turns. An older measurement cannot
+shift the historical tail. Only a measured newer row wholly below a reader can
+shift their chosen position; that uses the viewport register and publishes its
+actual readback before another window is selected.
+
+History rows stay in normal chronological DOM flow inside the bottom-origin
+extent. No CSS transform reverses text or selection. The scroller's native
+layout holds visible tail content while earlier rows arrive or reflow, before
+any ResizeObserver callback. The history layout does not run prepend snapshots,
+leading extent calculation or passive follow easing.
+
+For insertion inside the reader's window, retain committed keys until the
+registered reading relationship and offset readback are complete. Pure older
+history append in the internal sequence requires no retained-window correction.
+The live layout keeps its prior reservation/follow behavior. Switching origins
+preserves the same visible row and refreshes mounted measurement indexes.
+
+Regression fixtures cover actual timeline projection, hydration flags, short and
+long histories, width changes, delayed measurements, native-scroll delivery,
+search/Turn navigation and existing bookmark coordinates. Native tail cases
+assert zero scroll writes as well as node and screen-position continuity.
+These supplied-geometry tests do not establish native paint or live remote
+behavior.
 
 ## Accepted steering display
 
@@ -280,7 +284,7 @@ than its content's.
 
 ## What Belongs to the Virtualizer
 
-On a tail-following open, the virtualizer seeds its initial offset at the last
+On a live top-origin open, the virtualizer seeds its initial offset at the last
 item's estimated start. A desktop trace previously mounted rows 0..13 before
 moving to 22..33, with 372.3ms charged to the first head-row measurement. The
 seed selects a tail window without first mounting the head; real heights and
@@ -325,13 +329,9 @@ takeover; runtime savings and remote behavior still require separate validation.
 
 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`.
+coordinates and gets them back. History's reverse internal indexes and native
+negative offsets are converted only in this adapter. Measurements remain cached
+against stable item keys in either convention.
 
 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
@@ -344,9 +344,10 @@ directly. The estimate is owned by the data shape in
 Explore groups, and tool families each derive a bounded height from their
 content, status, width, and expansion state. This code is pure and runs before
 a row has a DOM node. Once mounted, DOM measurement remains authoritative and
-replaces the estimate. Width and volatile Explore expansion changes invalidate
-only the derived position pass; TanStack's key-based measured-size cache is
-retained.
+replaces the estimate. Estimate inputs apply when a key first reserves space. Existing reservations
+stay stable across width changes; actual mounted measurements replace them.
+Collected rows still receive their explicit known-height updates. TanStack's
+key-based measured-size cache is retained.
 
 **Items stay in normal flow inside a padded window**, not absolutely positioned.
 Everything outside the window stands in as `padding-top` and `padding-bottom`
@@ -357,8 +358,9 @@ the items have not moved yet.
 
 **The virtualizer does not use TanStack's own late-measurement adjustment.**
 `shouldAdjustScrollPositionOnItemSizeChange` reads the real scroller position
-and asks the viewport owner to apply the delta only when the whole item is above
-the viewport. A partly visible row is left alone because its changed content is
+and asks the viewport owner to apply a real measured delta only when the whole
+item precedes the viewport in its internal coordinate direction: above the
+reader for live layout, below the reader for bottom-origin history. A partly visible row is left alone because its changed content is
 inside what the reader is looking at. TanStack's adjustment is always refused:
 it applies its delta to `scrollOffset`, the library's copy refreshed only from
 scroll events. Every continuous writer here assigns `scrollTop` directly and
@@ -373,13 +375,13 @@ 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`.
+history layout and reading contracts are 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 gap above a top-aligned Turn is `scrollPaddingStart` in live layout and
+`scrollPaddingEnd` in native history, 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.
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.test.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.test.tsx
index 46983483f4..29d99fc8e8 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.test.tsx
@@ -2,21 +2,22 @@
 import React, { act, useLayoutEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { expect, it, vi } from 'vitest';
-import { FlowChatPrependSnapshot } from './FlowChatPrependSnapshot';
+import { FlowChatPrependSnapshot, type FlowChatPrependGeometrySnapshot } from './FlowChatPrependSnapshot';
 
-it('captures current pre-mutation geometry only for a prepend, before parent layout effects', () => {
+it('captures prefix and interior insertions before mutation, without reading for append or trim', () => {
   globalThis.IS_REACT_ACT_ENVIRONMENT = true;
   const host = document.createElement('div');
   document.body.append(host);
   const root = createRoot(host);
   const scrollerRef = { current: null as HTMLDivElement | null };
-  const snapshotRef = { current: null as { firstKey: string; scrollHeight: number } | null };
+  const snapshotRef = { current: null as FlowChatPrependGeometrySnapshot | null };
   const reads = vi.fn(() => Number(scrollerRef.current?.dataset.height));
+  const captureAnchor = vi.fn(() => ({ key: 'c', offsetPx: Number(scrollerRef.current?.dataset.offset) }));
   const observed: unknown[] = [];
   function List({ keys, height }: { keys: string[]; height: number }) {
     useLayoutEffect(() => { observed.push(snapshotRef.current); });
-    return <FlowChatPrependSnapshot itemKeys={keys} scrollerRef={scrollerRef} snapshotRef={snapshotRef}>
-      <div ref={scrollerRef} data-height={height} />
+    return <FlowChatPrependSnapshot itemKeys={keys} scrollerRef={scrollerRef} snapshotRef={snapshotRef} captureAnchor={captureAnchor}>
+      <div ref={scrollerRef} data-height={height} data-offset={height / 10} />
     </FlowChatPrependSnapshot>;
   }
   try {
@@ -25,16 +26,21 @@ it('captures current pre-mutation geometry only for a prepend, before parent lay
     act(() => root.render(<List keys={['b', 'c']} height={150} />));
     act(() => root.render(<List keys={['b', 'c', 'd']} height={200} />));
     expect(reads).not.toHaveBeenCalled();
+    expect(captureAnchor).not.toHaveBeenCalled();
     // A layout change between React commits must be reflected in the baseline.
     scrollerRef.current!.dataset.height = '225';
     act(() => root.render(<List keys={['a', 'b', 'c', 'd']} height={400} />));
     expect(reads).toHaveBeenCalledOnce();
-    expect(observed.at(-1)).toEqual({ firstKey: 'b', scrollHeight: 225 });
+    expect(observed.at(-1)).toEqual({ firstKey: 'b', scrollHeight: 225, anchor: { key: 'c', offsetPx: 20 } });
     expect(scrollerRef.current!.dataset.height).toBe('400');
     act(() => root.render(<List keys={['b', 'c', 'd']} height={200} />));
     expect(observed.at(-1)).toBeNull();
+    act(() => root.render(<List keys={['b', 'inside', 'c', 'd']} height={250} />));
+    expect(observed.at(-1)).toEqual({ firstKey: 'b', scrollHeight: 200, anchor: { key: 'c', offsetPx: 20 } });
     act(() => root.render(<List keys={['x', 'y']} height={300} />));
-    expect(reads).toHaveBeenCalledOnce();
+    expect(observed.at(-1)).toBeNull();
+    expect(reads).toHaveBeenCalledTimes(2);
+    expect(captureAnchor).toHaveBeenCalledTimes(2);
   } finally {
     act(() => root.unmount());
     host.remove();
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.tsx
index 5ee67b7ce2..029767088b 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatPrependSnapshot.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
 
+export interface FlowChatPrependGeometrySnapshot {
+  firstKey: string;
+  scrollHeight: number;
+  anchor?: { key: string; offsetPx: number };
+}
+
 interface Props {
+  enabled?: boolean;
   itemKeys: readonly string[];
   scrollerRef: React.RefObject<HTMLElement | null>;
-  snapshotRef: React.MutableRefObject<{ firstKey: string; scrollHeight: number } | null>;
+  snapshotRef: React.MutableRefObject<FlowChatPrependGeometrySnapshot | null>;
+  captureAnchor?: (displacedKeys: ReadonlySet<string>) => FlowChatPrependGeometrySnapshot['anchor'];
   children: React.ReactNode;
 }
 
-/** Read the old DOM only when history is actually inserted before its head.
+/** Read the old DOM only when history is inserted before existing content.
+ * Record pages can also fill earlier blocks inside an already loaded Turn.
  * A height saved after the previous commit can become stale as images or fonts
  * settle between commits. Capture immediately before mutation instead; the
  * viewport owner still decides and bounds compensation after mutation.
@@ -15,11 +24,21 @@ interface Props {
 export class FlowChatPrependSnapshot extends React.Component<Props> {
   getSnapshotBeforeUpdate(previous: Props): null {
     this.props.snapshotRef.current = null;
+    if (this.props.enabled === false) return null;
+    // Streaming and tail appends leave every existing index unchanged.
+    if (previous.itemKeys === this.props.itemKeys
+      || previous.itemKeys.every((key, index) => this.props.itemKeys[index] === key)) return null;
     const firstKey = previous.itemKeys[0];
-    if (firstKey && this.props.itemKeys[0] !== firstKey
-      && this.props.itemKeys.indexOf(firstKey) > 0) {
+    const nextIndexes = new Map(this.props.itemKeys.map((key, index) => [key, index]));
+    const displacedKeys = new Set(previous.itemKeys.filter((key, index) => (nextIndexes.get(key) ?? -1) > index));
+    if (firstKey && displacedKeys.size > 0) {
       const scroller = this.props.scrollerRef.current;
-      if (scroller) this.props.snapshotRef.current = { firstKey, scrollHeight: scroller.scrollHeight };
+      if (scroller) {
+        const anchor = this.props.captureAnchor?.(displacedKeys);
+        this.props.snapshotRef.current = {
+          firstKey, scrollHeight: scroller.scrollHeight, ...(anchor ? { anchor } : {}),
+        };
+      }
     }
     return null;
   }
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatScrollOriginBoundary.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatScrollOriginBoundary.tsx
new file mode 100644
index 0000000000..c09abd8662
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatScrollOriginBoundary.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { readFlowChatScrollTop } from './flowChatScrollCoordinates';
+
+interface Props {
+  endOrigin: boolean;
+  scrollerRef: React.RefObject<HTMLElement | null>;
+  write: (top: number) => boolean;
+  children: React.ReactNode;
+}
+interface Snapshot { element: HTMLElement | null; top: number; offset: number }
+
+/** A history-to-live handoff changes the coordinate convention once. History
+ * pages and reflows never enter this transaction or write the viewport. */
+export class FlowChatScrollOriginBoundary extends React.Component<Props, object, Snapshot | null> {
+  getSnapshotBeforeUpdate(previous: Props): Snapshot | null {
+    if (previous.endOrigin === this.props.endOrigin) return null;
+    const scroller = this.props.scrollerRef.current;
+    if (!scroller) return null;
+    const viewportTop = scroller.getBoundingClientRect().top;
+    const element = [...scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper')]
+      .find(row => {
+        const rect = row.getBoundingClientRect();
+        return row.closest('[data-flowchat-scroller]') === scroller
+          && rect.bottom > viewportTop && rect.top < viewportTop + scroller.clientHeight;
+      }) ?? null;
+    return { element, top: element?.getBoundingClientRect().top ?? 0, offset: readFlowChatScrollTop(scroller) };
+  }
+  componentDidUpdate(_previous: Props, _state: object, snapshot: Snapshot | null) {
+    const scroller = this.props.scrollerRef.current;
+    if (!snapshot || !scroller) return;
+    const top = snapshot.element?.isConnected
+      ? readFlowChatScrollTop(scroller) + snapshot.element.getBoundingClientRect().top - snapshot.top
+      : snapshot.offset;
+    this.props.write(top);
+  }
+  render() { return this.props.children; }
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.history-prepend.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.history-prepend.test.tsx
new file mode 100644
index 0000000000..d5122fa7ad
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.history-prepend.test.tsx
@@ -0,0 +1,216 @@
+// @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 { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+import { VirtualMessageList } from './VirtualMessageList';
+import { getVirtualItemStableKey } from './virtualItemIdentity';
+import type { VirtualItem } from '../../store/modernFlowChatStore';
+import type { Session } from '../../types/flow-chat';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const state = vi.hoisted(() => ({ items: [] as VirtualItem[], session: null as Session | null }));
+vi.mock('../../store/modernFlowChatStore', () => {
+  const store = Object.assign((select: (state: unknown) => unknown) => select({ visibleTurnInfo: null }),
+    { getState: () => ({ setVisibleTurnInfo() {} }) });
+  return { useVirtualItems: () => state.items, useActiveSession: () => state.session,
+    useModernFlowChatStore: store, useModernFlowChatStoreApi: () => store };
+});
+vi.mock('../../timeline/useConversationTimeline', async () => {
+  const { FlowChatReaderState } = await import('../../timeline/readerState');
+  const reader = new FlowChatReaderState();
+  return { useConversationTimeline: (items: VirtualItem[]) => ({ items, reader }) };
+});
+vi.mock('../../hooks/useActiveSessionState', () => ({ useActiveSessionState: () => ({ isProcessing: false }) }));
+vi.mock('../../store/chatInputStateStore', () => ({ useChatInputState: (select: (state: unknown) => unknown) => select({ inputHeight: 100 }) }));
+vi.mock('../../hooks/useScrollToTurnHeader', () => ({ useScrollToTurnHeader: () => ({ shouldShowButton: false, handleClick() {} }) }));
+vi.mock('./RuntimeStatusSlot', () => ({ RuntimeStatusSlot: () => null }));
+vi.mock('../ScrollToLatestBar', () => ({ ScrollToLatestBar: () => null }));
+vi.mock('../ScrollToTurnHeaderButton', () => ({ ScrollToTurnHeaderButton: () => null }));
+vi.mock('./VirtualItemRenderer', () => ({
+  VirtualItemRenderer: ({ item, index, measureRef }: {
+    item: VirtualItem; index: number; measureRef: (element: HTMLElement | null) => void;
+  }) => <div ref={measureRef} className="virtual-item-wrapper"
+    data-item-type={item.type} data-turn-id={item.turnId} data-virtual-index={index}
+    data-virtual-item-key={getVirtualItemStableKey(item)} />,
+}));
+
+// Full list, virtualizer, viewport owners and follow controller. Only row
+// contents and jsdom's absent layout engine are supplied by this fixture.
+describe('history prepends retain the painted conversation', () => {
+  let root: Root, host: HTMLDivElement;
+  let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
+  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element> }>;
+  const heights = new Map<string, number>();
+  const offsets = new WeakMap<HTMLElement, number>();
+  const px = (value: string) => Number.parseFloat(value || '0') || 0;
+  const reversed = (element: HTMLElement) => element.dataset.flowchatScrollOrigin === 'end';
+  function height(element: HTMLElement): number {
+    if (element.hasAttribute('data-flowchat-scroller')) return 600;
+    if (element.dataset.virtualItemKey) return heights.get(element.dataset.virtualItemKey) ?? 100;
+    if (element.style.height) return px(element.style.height);
+    const scroller = element.closest<HTMLElement>('[data-flowchat-scroller]');
+    if (scroller && reversed(scroller)) {
+      const minimum = px(scroller.style.getPropertyValue('--_flow-chat-history-turn-min-height'));
+      if (element.classList.contains('virtual-message-list__footer-block')) {
+        const turn = element.parentElement!;
+        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        return Math.max(natural, minimum - preceding);
+      }
+      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+    }
+    return Math.max(element.classList.contains('virtual-message-list__extent') && reversed(element.parentElement!) ? 600 : px(element.style.minHeight), px(element.style.paddingTop) + px(element.style.paddingBottom)
+      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+  }
+  function contentTop(element: HTMLElement): number {
+    let top = 0;
+    let current = element;
+    while (current.parentElement && !current.hasAttribute('data-flowchat-scroller')) {
+      let sibling = current.previousElementSibling;
+      while (sibling) { top += height(sibling as HTMLElement); sibling = sibling.previousElementSibling; }
+      current = current.parentElement;
+      top += px(current.style.paddingTop);
+      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement);
+    }
+    return top;
+  }
+  function turn(id: string, answerHeight: number): VirtualItem[] {
+    const items = [
+      { type: 'user-message', turnId: id, data: { id: `user-${id}`, content: id } },
+      { type: 'model-round', turnId: id, data: { id: `answer-${id}`, items: [], content: id }, isLastRound: true, isTurnComplete: true },
+    ] as VirtualItem[];
+    heights.set(getVirtualItemStableKey(items[0]), 44);
+    heights.set(getVirtualItemStableKey(items[1]), answerHeight);
+    return items;
+  }
+  const render = () => act(() => root.render(<VirtualMessageList latestTurnId="latest" />));
+  const tick = () => {
+    now += 16;
+    const pending = [...frames.values()]; frames.clear();
+    act(() => pending.forEach(callback => callback(now)));
+  };
+  const resize = () => act(() => {
+    for (const observer of [...observers]) {
+      const entries = [...observer.targets].filter(target => target.isConnected).map(target => ({
+        target, borderBoxSize: [{ inlineSize: 900, blockSize: height(target as HTMLElement) }],
+        contentRect: target.getBoundingClientRect(),
+      }) as ResizeObserverEntry);
+      if (entries.length) observer.callback(entries, {} as ResizeObserver);
+    }
+  });
+  const latest = () => host.querySelector<HTMLElement>('[data-virtual-item-key="model-round:latest:answer-latest"]');
+
+  beforeEach(() => {
+    activateSurface('local');
+    frames = new Map(); frameId = 0; now = 0; observers = []; heights.clear();
+    vi.useFakeTimers();
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
+    vi.stubGlobal('ResizeObserver', class {
+      targets = new Set<Element>();
+      constructor(public callback: ResizeObserverCallback) { observers.push(this); }
+      observe(target: Element) { this.targets.add(target); }
+      unobserve(target: Element) { this.targets.delete(target); }
+      disconnect() { this.targets.clear(); }
+    });
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () { return height(this); });
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () { return height(this); });
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+      return this.hasAttribute('data-flowchat-scroller') ? height(this.firstElementChild as HTMLElement) : height(this);
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'get').mockImplementation(function () {
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      return reversed(this) ? Math.max(-range, Math.min(0, offsets.get(this) ?? 0)) : Math.min(offsets.get(this) ?? 0, range);
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'set').mockImplementation(function (value) {
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      offsets.set(this, reversed(this) ? Math.max(-range, Math.min(0, value)) : Math.max(0, Math.min(value, range)));
+    });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const scroller = this.closest<HTMLElement>('[data-flowchat-scroller]');
+      const top = this === scroller ? 0 : contentTop(this) - (scroller?.scrollTop ?? 0);
+      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this), height: height(this), width: 900, toJSON() {} };
+    });
+    state.items = turn('latest', 180);
+    state.session = { sessionId: 'history-session', config: {}, dialogTurns: [], isHistorical: false } as unknown as Session;
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount()); host.remove(); activateSurface('local');
+    vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers();
+  });
+
+  it.each([
+    { surface: 'local', answerHeight: 180 }, { surface: 'peer-history', answerHeight: 180 },
+    { surface: 'local', answerHeight: 1400 }, { surface: 'peer-history', answerHeight: 1400 },
+  ].flatMap(value => [ { ...value, compact: false }, { ...value, compact: true } ]))(
+    'preserves the visible row through older pages on $surface with a $answerHeight px answer, compact=$compact',
+    ({ surface, answerHeight, compact }) => {
+    activateSurface(surface);
+    state.items = turn('latest', answerHeight);
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    expect(host.querySelector('[data-open-viewport-settled="true"]')).not.toBeNull();
+    const row = latest()!;
+    expect(row).not.toBeNull();
+    const top = row.getBoundingClientRect().top;
+    for (const batch of ['a', 'b']) {
+      state.items = [...Array.from({ length: compact ? 64 : 8 }, (_, index) =>
+        turn(`${batch}-${index}`, compact ? 16 : 150 + index * 400)).flat(), ...state.items];
+      render();
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      for (let frame = 0; frame < 12; frame++) {
+        resize(); tick();
+        if (frame === 2) act(() => row.closest('[data-flowchat-scroller]')!.dispatchEvent(new Event('scroll')));
+        if (frame === 5) act(() => vi.advanceTimersByTime(200));
+        expect(latest()).toBe(row);
+        expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      }
+    }
+    // The older rows can finish rendering Markdown/images after the page has
+    // committed. Their growth and shrink must also be invisible at this edge.
+    const older = [...host.querySelectorAll<HTMLElement>('[data-item-type="model-round"]')]
+      .findLast(element => element.dataset.turnId !== 'latest')!;
+    const key = older.dataset.virtualItemKey!;
+    for (const delta of [900, -700, 500]) {
+      heights.set(key, heights.get(key)! + delta);
+      resize();
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      for (let frame = 0; frame < 8; frame++) {
+        tick();
+        expect(latest()).toBe(row);
+        expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      }
+    }
+  });
+
+  it('preserves a manually chosen position inside a long answer while history arrives', () => {
+    state.items = turn('latest', 1400);
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    act(() => {
+      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -200 }));
+      scroller.scrollTop -= 200;
+      scroller.dispatchEvent(new Event('scroll'));
+    });
+    const row = latest()!;
+    const top = row.getBoundingClientRect().top;
+    state.items = [...Array.from({ length: 12 }, (_, index) => turn(`earlier-${index}`, 1200)).flat(), ...state.items];
+    render();
+    expect(latest()).toBe(row);
+    expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    for (let frame = 0; frame < 12; frame++) {
+      resize(); tick();
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    }
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
new file mode 100644
index 0000000000..3aca830ce8
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
@@ -0,0 +1,221 @@
+// @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 { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+import { VirtualMessageList } from './VirtualMessageList';
+import { getVirtualItemStableKey } from './virtualItemIdentity';
+import type { VirtualItem } from '../../store/modernFlowChatStore';
+import type { Session } from '../../types/flow-chat';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const state = vi.hoisted(() => ({ items: [] as VirtualItem[], session: null as Session | null }));
+vi.mock('../../store/modernFlowChatStore', () => {
+  const store = Object.assign((select: (state: unknown) => unknown) => select({ visibleTurnInfo: null }),
+    { getState: () => ({ setVisibleTurnInfo() {} }) });
+  return { useVirtualItems: () => state.items, useActiveSession: () => state.session,
+    useModernFlowChatStore: store, useModernFlowChatStoreApi: () => store };
+});
+vi.mock('../../timeline/useConversationTimeline', async () => {
+  const { FlowChatReaderState } = await import('../../timeline/readerState');
+  const reader = new FlowChatReaderState();
+  return { useConversationTimeline: (items: VirtualItem[]) => ({ items, reader }) };
+});
+vi.mock('../../hooks/useActiveSessionState', () => ({ useActiveSessionState: () => ({ isProcessing: false }) }));
+vi.mock('../../store/chatInputStateStore', () => ({ useChatInputState: (select: (state: unknown) => unknown) => select({ inputHeight: 100 }) }));
+vi.mock('../../hooks/useScrollToTurnHeader', () => ({ useScrollToTurnHeader: () => ({ shouldShowButton: false, handleClick() {} }) }));
+vi.mock('./RuntimeStatusSlot', () => ({ RuntimeStatusSlot: () => null }));
+vi.mock('../ScrollToLatestBar', () => ({ ScrollToLatestBar: () => null }));
+vi.mock('../ScrollToTurnHeaderButton', () => ({ ScrollToTurnHeaderButton: () => null }));
+vi.mock('./VirtualItemRenderer', () => ({
+  VirtualItemRenderer: ({ item, index, measureRef }: {
+    item: VirtualItem; index: number; measureRef: (element: HTMLElement | null) => void;
+  }) => <div ref={measureRef} className="virtual-item-wrapper"
+    data-item-type={item.type} data-turn-id={item.turnId} data-virtual-index={index}
+    data-virtual-item-key={getVirtualItemStableKey(item)} />,
+}));
+
+// Full list, virtualizer, viewport owners and follow controller. Only row
+// contents and jsdom's absent layout engine are supplied by this fixture.
+describe('settled transcript resizing (real controllers, supplied DOM geometry)', () => {
+  let root: Root, host: HTMLDivElement;
+  let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
+  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element> }>;
+  let columnWidth = 900;
+  let containerFirst = false;
+  const heights = new Map<string, number>();
+  const offsets = new WeakMap<HTMLElement, number>();
+  const px = (value: string) => Number.parseFloat(value || '0') || 0;
+  const reversed = (element: HTMLElement) => element.dataset.flowchatScrollOrigin === 'end';
+  function height(element: HTMLElement): number {
+    if (element.hasAttribute('data-flowchat-scroller')) return 600;
+    if (element.dataset.virtualItemKey) return heights.get(element.dataset.virtualItemKey) ?? 100;
+    if (element.style.height) return px(element.style.height);
+    const scroller = element.closest<HTMLElement>('[data-flowchat-scroller]');
+    if (scroller && reversed(scroller)) {
+      const minimum = px(scroller.style.getPropertyValue('--_flow-chat-history-turn-min-height'));
+      if (element.classList.contains('virtual-message-list__footer-block')) {
+        const turn = element.parentElement!;
+        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        return Math.max(natural, minimum - preceding);
+      }
+      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+    }
+    return Math.max(element.classList.contains('virtual-message-list__extent') && reversed(element.parentElement!) ? 600 : px(element.style.minHeight), px(element.style.paddingTop) + px(element.style.paddingBottom)
+      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+  }
+  function contentTop(element: HTMLElement): number {
+    let top = 0;
+    let current = element;
+    while (current.parentElement && !current.hasAttribute('data-flowchat-scroller')) {
+      let sibling = current.previousElementSibling;
+      while (sibling) { top += height(sibling as HTMLElement); sibling = sibling.previousElementSibling; }
+      current = current.parentElement;
+      top += px(current.style.paddingTop);
+      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement);
+    }
+    return top;
+  }
+  function turn(id: string, answerHeight: number): VirtualItem[] {
+    const items = [
+      { type: 'user-message', turnId: id, data: { id: `user-${id}`, content: id } },
+      { type: 'model-round', turnId: id, data: { id: `answer-${id}`, items: [], content: id }, isLastRound: true, isTurnComplete: true },
+    ] as VirtualItem[];
+    heights.set(getVirtualItemStableKey(items[0]), 44);
+    heights.set(getVirtualItemStableKey(items[1]), answerHeight);
+    return items;
+  }
+  const render = (contentWidth = 900, measurementSuspended = false) => act(() => root.render(
+    <VirtualMessageList latestTurnId="latest" contentWidth={contentWidth} measurementSuspended={measurementSuspended} />,
+  ));
+  const tick = () => {
+    now += 16;
+    const pending = [...frames.values()]; frames.clear();
+    act(() => pending.forEach(callback => callback(now)));
+  };
+  const resize = () => act(() => {
+    for (const observer of (containerFirst ? [...observers].reverse() : [...observers])) {
+      const entries = [...observer.targets].filter(target => target.isConnected).map(target => ({
+        target, borderBoxSize: [{ inlineSize: 900, blockSize: height(target as HTMLElement) }],
+        contentRect: target.getBoundingClientRect(),
+      }) as ResizeObserverEntry);
+      if (entries.length) observer.callback(entries, {} as ResizeObserver);
+    }
+  });
+  const latest = () => host.querySelector<HTMLElement>('[data-virtual-item-key="model-round:latest:answer-latest"]');
+
+  beforeEach(() => {
+    activateSurface('local'); columnWidth = 900; containerFirst = false;
+    frames = new Map(); frameId = 0; now = 0; observers = []; heights.clear();
+    vi.useFakeTimers();
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
+    vi.stubGlobal('ResizeObserver', class {
+      targets = new Set<Element>();
+      constructor(public callback: ResizeObserverCallback) { observers.push(this); }
+      observe(target: Element) { this.targets.add(target); }
+      unobserve(target: Element) { this.targets.delete(target); }
+      disconnect() { this.targets.clear(); }
+    });
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () { return Math.round(height(this)); });
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () { return Math.round(height(this)); });
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+      return Math.round(this.hasAttribute('data-flowchat-scroller') ? height(this.firstElementChild as HTMLElement) : height(this));
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'get').mockImplementation(function () {
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      return reversed(this) ? Math.max(-range, Math.min(0, offsets.get(this) ?? 0)) : Math.min(offsets.get(this) ?? 0, range);
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'set').mockImplementation(function (value) {
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      offsets.set(this, reversed(this) ? Math.max(-range, Math.min(0, value)) : Math.max(0, Math.min(value, range)));
+    });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const scroller = this.closest<HTMLElement>('[data-flowchat-scroller]');
+      const top = this === scroller ? 0 : contentTop(this) - (scroller?.scrollTop ?? 0);
+      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this), height: height(this), width: this.classList.contains('virtual-item-wrapper') ? columnWidth : 900, toJSON() {} };
+    });
+    state.items = turn('latest', 180);
+    state.session = { sessionId: 'history-session', config: {}, dialogTurns: [], isHistorical: false } as unknown as Session;
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount()); host.remove(); activateSurface('local');
+    vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers();
+  });
+
+  it.each(['local', 'peer-resize'].flatMap(surface => [false, true].map(first => ({ surface, first }))))(
+    'keeps a loaded transcript fixed on $surface, container observer first=$first', ({ surface, first }) => {
+    containerFirst = first;
+    activateSurface(surface);
+    state.items = [...Array.from({ length: 16 }, (_, index) => turn(`old-${index}`, 400.25 + index * 23.5)).flat(), ...turn('latest', 1400.25)];
+    render();
+    for (let i = 0; i < 60; i++) { resize(); tick(); }
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    expect(host.querySelector('[data-open-viewport-settled="true"]')).not.toBeNull();
+    const row = latest()!;
+    const bottom = row.getBoundingClientRect().bottom;
+    const assertPlacement = () => {
+      expect(latest()).toBe(row);
+      expect(Math.abs(row.getBoundingClientRect().bottom - bottom)).toBeLessThanOrEqual(1);
+    };
+    for (const width of [800, 700, 600, 800, 1000, 900]) {
+      render(900, true); // The persisted preference stays unchanged during the CSS preview.
+      columnWidth = width;
+      for (const item of state.items) {
+        if (item.type === 'model-round') heights.set(getVirtualItemStableKey(item), (item.turnId === 'latest' ? 1400.25 : 600.25) * 900 / width);
+      }
+      resize(); assertPlacement(); // Before any RAF or native scroll event.
+      tick(); assertPlacement();
+      render(width, false); assertPlacement();
+      resize(); tick();
+      // No new output arrives after this completed reflow.
+      assertPlacement();
+      for (let i = 0; i < 60; i++) {
+        resize(); tick();
+        assertPlacement();
+        if (i === 2) act(() => scroller.dispatchEvent(new Event('scroll')));
+      }
+    }
+  });
+
+  it.each(['local', 'peer-resize'].flatMap(surface => [false, true].map(first => ({ surface, first }))))(
+    'keeps the reading row fixed on $surface, container observer first=$first', ({ surface, first }) => {
+    containerFirst = first;
+    activateSurface(surface);
+    state.items = [...Array.from({ length: 16 }, (_, index) => turn(`old-${index}`, 400.25 + index * 23.5)).flat(), ...turn('latest', 1400.25)];
+    render();
+    for (let i = 0; i < 60; i++) { resize(); tick(); }
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    act(() => {
+      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -250 }));
+      scroller.scrollTop -= 250;
+      scroller.dispatchEvent(new Event('scroll'));
+    });
+    const row = latest()!;
+    const top = row.getBoundingClientRect().top;
+    for (const width of [700, 1000, 650, 900]) {
+      render(900, true);
+      columnWidth = width;
+      for (const item of state.items) {
+        if (item.type === 'model-round' && item.turnId !== 'latest') {
+          heights.set(getVirtualItemStableKey(item), 600.25 * 900 / width);
+        }
+      }
+      resize();
+      expect(latest()).toBe(row);
+      expect(Math.abs(row.getBoundingClientRect().top - top)).toBeLessThanOrEqual(1);
+      render(width, false);
+      for (let frame = 0; frame < 20; frame++) {
+        resize(); tick();
+        expect(latest()).toBe(row);
+        expect(Math.abs(row.getBoundingClientRect().top - top)).toBeLessThanOrEqual(1);
+      }
+    }
+  });
+});
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 845f03ed96..8358117d1f 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
@@ -215,12 +215,59 @@
   }
 
   &__extent {
+    position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    min-width: 0;
     min-height: 100%;
   }
 
+  &__turn {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+
+    > * { flex-shrink: 0; }
+  }
+
+  &__turn[data-history-tail='true'] {
+    flex: 1 0 auto;
+  }
+
+  &__footer-block {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+  }
+
+  // History's coordinate origin is the bottom. Adding or resizing anything
+  // earlier extends the native scroll range upward without moving scrollTop.
+  // DOM order remains chronological for selection, keyboard and screen readers.
+  &__scroller[data-flowchat-scroll-origin='end'] {
+    display: flex;
+    flex-direction: column-reverse;
+
+    .virtual-message-list__extent {
+      flex: 0 0 auto;
+    }
+
+    // Reserve a viewport for the final complete Turn, not for the entire
+    // transcript. Short Turns start at the top and CSS puts unused space below
+    // them. Older Turns insert before this shell without consuming that space.
+    .virtual-message-list__turn[data-history-tail='true'] {
+      min-height: var(--_flow-chat-history-turn-min-height);
+
+      // Prepending older Turns changes public indexes, not this Turn's inset.
+      > .virtual-item-wrapper[data-item-type='user-message'] { padding-top: 0; }
+    }
+  }
+
   &__items {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     flex-shrink: 0;
   }
 
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 ca9570378a..00f05fd9f4 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
@@ -49,6 +49,7 @@ const mocks = vi.hoisted(() => ({
   isFollowingOutput: false,
   followsNow: false,
   scheduleFollowToLatest: vi.fn(),
+  shiftFollowLayout: vi.fn(() => false),
   startAtTailOnMount: true,
   virtualizerStartsAtTail: false,
   estimateWidth: undefined as number | undefined,
@@ -223,7 +224,8 @@ vi.mock('../../store/modernFlowChatStore', () => {
 vi.mock('../../trajectory/trajectoryPanel', () => ({ openTrajectoryPanel: mocks.trajectoryPanel }));
 
 vi.mock('../../hooks/useActiveSessionState', () => ({
-  useActiveSessionState: () => ({ isProcessing: false }),
+  // This suite supplies top-origin virtual bounds for the live layout.
+  useActiveSessionState: () => ({ isProcessing: true }),
 }));
 
 vi.mock('../../store/chatInputStateStore', () => ({
@@ -248,6 +250,7 @@ vi.mock('./useFlowChatFollowOutput', () => ({
       enterFollowOutput: mocks.enterFollowOutput,
       exitFollowOutput: mocks.exitFollowOutput,
       scheduleFollowToLatest: mocks.scheduleFollowToLatest,
+      shiftLayout: mocks.shiftFollowLayout,
       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.
@@ -401,6 +404,7 @@ describe('VirtualMessageList natural scroll contract', () => {
     mocks.handleUserScrollIntent.mockReset();
     mocks.handleFollowScroll.mockReset();
     mocks.scheduleFollowToLatest.mockReset();
+    mocks.shiftFollowLayout.mockReset().mockReturnValue(false);
     mocks.startAtTailOnMount = true;
     mocks.placeSubmittedMessage = null;
     mocks.viewportOwner = null;
@@ -515,6 +519,18 @@ describe('VirtualMessageList natural scroll contract', () => {
     } finally { restore(); }
   });
 
+  it('passes a measured displacement refused by follow ownership back to its follower', () => {
+    act(() => root.render(<VirtualMessageList />));
+    mocks.viewportOwner!.claim('follow-output');
+    mocks.shiftFollowLayout.mockReturnValue(true);
+    act(() => { expect(mocks.shiftMeasurement!(-120)).toBe(true); });
+    expect(mocks.shiftFollowLayout).toHaveBeenCalledWith(-120);
+    mocks.shiftFollowLayout.mockClear();
+    mocks.viewportOwner!.claim('user-gesture');
+    act(() => { expect(mocks.shiftMeasurement!(80)).toBe(true); });
+    expect(mocks.shiftFollowLayout).not.toHaveBeenCalled();
+  });
+
   it.each([false, true])('restores the unfaded start after scroll round trips with synchronous virtualizer commits=%s', async commitDuringScroll => {
     const restoreLayout = fakeLayout({ clientHeight: 800, scrollHeight: 4000, turnTopFromScrollerTop: 0 });
     try {
@@ -1931,6 +1947,7 @@ describe('VirtualMessageList natural scroll contract', () => {
       const render = (history = false) => root.render(
         <VirtualMessageList
           presentationMode={history ? 'history-window' : 'tail'}
+          viewportMode="live-tail"
           historyWindow={history ? {
             startOrdinal: 36, endOrdinalExclusive: 46, targetTurnId: null, mode: 'history-window',
           } : null}
@@ -2188,7 +2205,7 @@ describe('VirtualMessageList natural scroll contract', () => {
       Object.defineProperty(scroller, 'scrollTop', {
         configurable: true,
         writable: true,
-        value: 400,
+        value: -1000, // Native end origin; persisted top offset remains 400.
       });
 
       const snapshot = listRef.current?.captureViewportSnapshot();
@@ -2209,7 +2226,7 @@ describe('VirtualMessageList natural scroll contract', () => {
       });
 
       expect(restored).toBe(true);
-      expect(scroller.scrollTop).toBe(540);
+      expect(scroller.scrollTop).toBe(-860);
     } finally {
       restoreLayout();
     }
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
new file mode 100644
index 0000000000..1d5cf2bb5d
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
@@ -0,0 +1,396 @@
+// @vitest-environment jsdom
+import React, { act, createRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { activateSurface, getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { isSubmittedMessageScrollIntentPending, registerSubmittedMessageScrollIntent } from '../../services/submittedMessageScrollIntent';
+import { VirtualMessageList, type VirtualMessageListRef } from './VirtualMessageList';
+import { getVirtualItemStableKey } from './virtualItemIdentity';
+import type { VirtualItem } from '../../store/modernFlowChatStore';
+import type { FlowToolItem, Session } from '../../types/flow-chat';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const state = vi.hoisted(() => ({ items: [] as VirtualItem[], session: null as Session | null, processing: false }));
+vi.mock('../../store/modernFlowChatStore', () => {
+  const store = Object.assign((select: (state: unknown) => unknown) => select({ visibleTurnInfo: null }),
+    { getState: () => ({ setVisibleTurnInfo() {} }) });
+  return { useVirtualItems: () => state.items, useActiveSession: () => state.session,
+    useModernFlowChatStore: store, useModernFlowChatStoreApi: () => store };
+});
+vi.mock('../../hooks/useActiveSessionState', () => ({ useActiveSessionState: () => ({ isProcessing: state.processing }) }));
+vi.mock('../../store/chatInputStateStore', () => ({ useChatInputState: (select: (state: unknown) => unknown) => select({ inputHeight: 100 }) }));
+vi.mock('../../hooks/useScrollToTurnHeader', () => ({ useScrollToTurnHeader: () => ({ shouldShowButton: false, handleClick() {} }) }));
+vi.mock('./RuntimeStatusSlot', () => ({ RuntimeStatusSlot: () => null }));
+vi.mock('../ScrollToLatestBar', () => ({ ScrollToLatestBar: () => null }));
+vi.mock('../ScrollToTurnHeaderButton', () => ({ ScrollToTurnHeaderButton: () => null }));
+vi.mock('./VirtualItemRenderer', () => ({
+  VirtualItemRenderer: ({ item, index, measureRef }: {
+    item: VirtualItem; index: number; measureRef: (element: HTMLElement | null) => void;
+  }) => <div ref={measureRef} className="virtual-item-wrapper"
+    data-item-type={item.type} data-timeline-kind={item.timeline?.kind} data-turn-id={item.turnId} data-virtual-index={index}
+    data-virtual-item-key={getVirtualItemStableKey(item)} />,
+}));
+
+// Full list, virtualizer, viewport owners and follow controller. Only row
+// contents and jsdom's absent layout engine are supplied by this fixture.
+describe('completed history with the production timeline projection', () => {
+  let root: Root, host: HTMLDivElement;
+  let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
+  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element> }>;
+  let writes: number[];
+  const listRef = createRef<VirtualMessageListRef>();
+  const heights = new Map<string, number>();
+  const offsets = new WeakMap<HTMLElement, number>();
+  const px = (value: string) => Number.parseFloat(value || '0') || 0;
+  const reversed = (element: HTMLElement) => element.dataset.flowchatScrollOrigin === 'end';
+  function height(element: HTMLElement): number {
+    if (element.hasAttribute('data-flowchat-scroller')) return 600;
+    if (element.dataset.virtualItemKey) return heights.get(element.dataset.virtualItemKey) ?? 100;
+    if (element.style.height) return px(element.style.height);
+    const scroller = element.closest<HTMLElement>('[data-flowchat-scroller]');
+    if (scroller && reversed(scroller)) {
+      const minimum = px(scroller.style.getPropertyValue('--_flow-chat-history-turn-min-height'));
+      if (element.classList.contains('virtual-message-list__footer-block')) {
+        const turn = element.parentElement!;
+        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        return Math.max(natural, minimum - preceding);
+      }
+      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+    }
+    return Math.max(element.classList.contains('virtual-message-list__extent') && reversed(element.parentElement!) ? 600 : px(element.style.minHeight), px(element.style.paddingTop) + px(element.style.paddingBottom)
+      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+  }
+  function contentTop(element: HTMLElement): number {
+    let top = 0;
+    let current = element;
+    while (current.parentElement && !current.hasAttribute('data-flowchat-scroller')) {
+      let sibling = current.previousElementSibling;
+      while (sibling) { top += height(sibling as HTMLElement); sibling = sibling.previousElementSibling; }
+      current = current.parentElement;
+      top += px(current.style.paddingTop);
+      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement);
+    }
+    return top;
+  }
+  function turn(id: string, answerHeight: number, blocks = 10): VirtualItem[] {
+    const members = Array.from({ length: blocks }, (_, index) => ({
+      id: `answer-${id}-${index}`, type: 'text', status: 'completed', isStreaming: false,
+      content: `Completed paragraph ${index}. `.repeat(8), timestamp: 1,
+    }));
+    const items = [
+      { type: 'user-message', turnId: id, data: { id: `user-${id}`, content: id } },
+      { type: 'model-round', turnId: id,
+        data: { id: `round-${id}`, items: members, status: 'completed', isComplete: true, isStreaming: false },
+        isLastRound: true, isTurnComplete: true },
+    ] as VirtualItem[];
+    heights.set(`block:user-message:${id}:user-${id}`, 44);
+    members.forEach((item, index) => heights.set(`block:${id}:${item.id}`, index === blocks - 1 ? answerHeight : 100));
+    heights.set(`block:${id}:round-${id}:footer`, 32);
+    return items;
+  }
+  const render = () => act(() => root.render(<VirtualMessageList ref={listRef} latestTurnId="latest" />));
+  const tick = () => {
+    now += 16;
+    const pending = [...frames.values()]; frames.clear();
+    act(() => pending.forEach(callback => callback(now)));
+  };
+  const resize = () => act(() => {
+    for (const observer of [...observers]) {
+      const entries = [...observer.targets].filter(target => target.isConnected).map(target => ({
+        target, borderBoxSize: [{ inlineSize: 900, blockSize: height(target as HTMLElement) }],
+        contentRect: target.getBoundingClientRect(),
+      }) as ResizeObserverEntry);
+      if (entries.length) observer.callback(entries, {} as ResizeObserver);
+    }
+  });
+  const latest = () => host.querySelector<HTMLElement>('[data-virtual-item-key="block:latest:answer-latest-9"]');
+
+  beforeEach(() => {
+    activateSurface('local'); state.processing = false; writes = [];
+    frames = new Map(); frameId = 0; now = 0; observers = []; heights.clear();
+    vi.useFakeTimers();
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
+    vi.stubGlobal('ResizeObserver', class {
+      targets = new Set<Element>();
+      constructor(public callback: ResizeObserverCallback) { observers.push(this); }
+      observe(target: Element) { this.targets.add(target); }
+      unobserve(target: Element) { this.targets.delete(target); }
+      disconnect() { this.targets.clear(); }
+    });
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () { return height(this); });
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () { return height(this); });
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(900);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+      return this.hasAttribute('data-flowchat-scroller') ? height(this.firstElementChild as HTMLElement) : height(this);
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'get').mockImplementation(function () {
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      return reversed(this) ? Math.max(-range, Math.min(0, offsets.get(this) ?? 0)) : Math.min(offsets.get(this) ?? 0, range);
+    });
+    vi.spyOn(HTMLElement.prototype, 'scrollTop', 'set').mockImplementation(function (value) {
+      if (this.hasAttribute('data-flowchat-scroller')) writes.push(value);
+      const range = Math.max(0, this.scrollHeight - this.clientHeight);
+      offsets.set(this, reversed(this) ? Math.max(-range, Math.min(0, value)) : Math.max(0, Math.min(value, range)));
+    });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const scroller = this.closest<HTMLElement>('[data-flowchat-scroller]');
+      const top = this === scroller ? 0 : contentTop(this) - (scroller?.scrollTop ?? 0);
+      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this), height: height(this), width: 900, toJSON() {} };
+    });
+    state.items = turn('latest', 180);
+    state.session = { sessionId: 'history-session', config: {}, dialogTurns: [], isHistorical: false } as unknown as Session;
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount()); host.remove(); activateSurface('local');
+    vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers();
+  });
+
+  const pages = [
+    { page: 'whole older turn', partial: false, addsTurn: true },
+    { page: 'older turn plus missing earlier blocks', partial: true, addsTurn: true },
+    { page: 'missing earlier blocks within the loaded head', partial: true, addsTurn: false },
+  ];
+  it.each(['local', 'peer-history'].flatMap(surface => pages.flatMap(page =>
+    [false, true].map(reading => ({ surface, ...page, reading })))),
+  )('holds the painted row for $page on $surface, reading=$reading', ({ surface, partial, addsTurn, reading }) => {
+    activateSurface(surface);
+    const previous = turn('previous', 700);
+    const tail = turn('latest', 1400);
+    // Relay records are paged newest first. The first loaded Turn can still
+    // lack earlier blocks even though its user message and status are present.
+    const partialPrevious = previous.map(item => item.type === 'model-round'
+      ? { ...item, data: { ...item.data, items: item.data.items.slice(6) } } : item);
+    state.items = [...(partial ? partialPrevious : previous), ...tail];
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    expect(host.querySelector('[data-open-viewport-settled="true"]')).not.toBeNull();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    if (reading) act(() => {
+      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -160 }));
+      scroller.scrollTop -= 160;
+      scroller.dispatchEvent(new Event('scroll'));
+    });
+    const row = latest()!;
+    expect(row).not.toBeNull();
+    const top = row.getBoundingClientRect().top;
+    state.items = [...(addsTurn ? turn('earliest', 900) : []), ...previous, ...tail];
+    render();
+    expect(latest()).toBe(row);
+    expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    for (let frame = 0; frame < 30; frame++) {
+      resize(); tick();
+      if (frame === 2) act(() => scroller.dispatchEvent(new Event('scroll')));
+      if (frame === 5) act(() => vi.advanceTimersByTime(200));
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    }
+  });
+
+  it('renders inserted blocks below the reading edge even when that edge needs no displacement', () => {
+    const previous = turn('previous', 700);
+    const tail = turn('latest', 1400);
+    state.items = [...previous.map(item => item.type === 'model-round'
+      ? { ...item, data: { ...item.data, items: item.data.items.slice(6) } } : item), ...tail];
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    act(() => {
+      scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -4000 }));
+      scroller.scrollTop = reversed(scroller) ? -(scroller.scrollHeight - scroller.clientHeight) : 0;
+      scroller.dispatchEvent(new Event('scroll'));
+    });
+    for (let frame = 0; frame < 5; frame++) {
+      resize(); tick();
+      act(() => { scroller.scrollTop = -(scroller.scrollHeight - scroller.clientHeight); scroller.dispatchEvent(new Event('scroll')); });
+    }
+    const row = host.querySelector<HTMLElement>('[data-virtual-item-key="block:user-message:previous:user-previous"]')!;
+    expect(row).not.toBeNull();
+    const top = row.getBoundingClientRect().top;
+    state.items = [...previous, ...tail];
+    render();
+    expect(row.isConnected).toBe(true);
+    expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    expect(host.querySelector('[data-virtual-item-key="block:previous:answer-previous-0"]')).not.toBeNull();
+  });
+
+  it.each(['local', 'peer-history'].flatMap(surface => ['text', 'tools'].map(content => ({ surface, content }))))(
+    'keeps the visible $content of a short single Turn in place on $surface', ({ surface, content }) => {
+    activateSurface(surface);
+    const complete = turn('latest', 20).map(item => item.type === 'model-round' && content === 'tools'
+      ? { ...item, data: { ...item.data, items: item.data.items.map((member, index): FlowToolItem => ({
+        id: member.id, type: 'tool', timestamp: 1, status: 'completed',
+        toolName: index >= 6 && index <= 8 ? 'ComputerUse' : 'DesktopCard',
+        toolCall: { id: member.id, input: { action: index === 6 ? 'list_windows'
+          : index === 7 || index === 8 ? 'get_app_state' : 'update' } },
+        toolResult: { success: true, result: {} },
+      })) } } : item);
+    for (let index = 0; index < 10; index++) heights.set(`block:latest:answer-latest-${index}`, 20);
+    heights.set('block:latest:group:round-latest:interface:answer-latest-7', 32);
+    state.items = complete;
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    const row = latest()!;
+    const user = host.querySelector<HTMLElement>('[data-item-type="user-message"]')!;
+    expect(user.getBoundingClientRect().top).toBeCloseTo(8, 1);
+    expect(row.getBoundingClientRect().bottom).toBeLessThan(scroller.clientHeight);
+    if (content === 'tools') expect(host.querySelector('[data-timeline-kind="group-header"]')).not.toBeNull();
+    const top = row.getBoundingClientRect().top;
+    expect(scroller.dataset.flowchatScrollOrigin).toBe('end');
+    expect(scroller.scrollTop).toBe(0);
+    writes = [];
+    // Each admitted history unit is complete. Older Turns insert outside the
+    // tail's CSS reservation, leaving the complete short Turn at the top.
+    for (const count of [1, 2]) {
+      state.items = [...Array.from({ length: count }, (_, i) => turn(`older-${i}`, 700)).flat(), ...complete];
+      render();
+      // ModernFlowChatContainer retries this when Turn summaries change.
+      act(() => { expect(listRef.current!.scrollToTurnEnd('latest')).toBe(true); });
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      resize(); tick();
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    }
+    for (let frame = 0; frame < 30; frame++) {
+      // Late measurements of newly inserted predecessors, including a card
+      // still partly visible above the formerly first output, cannot restart ease.
+      if (frame === 3) heights.set('block:older-0:answer-older-0-5', 164.25);
+      if (frame === 8) heights.set('block:older-0:answer-older-0-5', 28.5);
+      // Native layout already holds the output before React/observers run.
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      resize(); tick();
+      if (frame === 2) act(() => scroller.dispatchEvent(new Event('scroll')));
+      expect(latest()).toBe(row);
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    }
+    expect(writes).toEqual([]); // No height-delta write, easing or delayed repair.
+    // A real runtime start hands the same DOM to live output. Ordinary history
+    // hydration above did not change origin or manufacture a follow animation.
+    state.processing = true;
+    render(); resize();
+    for (let frame = 0; frame < 40; frame++) tick();
+    expect(scroller.dataset.flowchatScrollOrigin).toBe('start');
+    expect(latest()).toBe(row);
+    const beforeGrowth = scroller.scrollTop;
+    heights.set('block:latest:answer-latest-9', 700);
+    resize();
+    expect(scroller.scrollTop).toBeCloseTo(beforeGrowth, 1);
+    const target = scroller.scrollHeight - scroller.clientHeight;
+    tick();
+    expect(scroller.scrollTop).toBeGreaterThan(beforeGrowth);
+    expect(scroller.scrollTop).toBeLessThan(target);
+  });
+
+  it('lets an edge gesture request older history without turning a stationary bubble into an anchor', () => {
+    const complete = turn('latest', 20);
+    for (let index = 0; index < 10; index++) heights.set(`block:latest:answer-latest-${index}`, 20);
+    state.items = complete;
+    render();
+    for (let i = 0; i < 45; i++) tick();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    const row = latest()!;
+    const top = row.getBoundingClientRect().top;
+    act(() => scroller.dispatchEvent(new WheelEvent('wheel', { deltaY: -120 })));
+    state.items = [...turn('older', 700), ...complete];
+    render();
+    for (let frame = 0; frame < 30; frame++) {
+      expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      resize(); tick();
+      if (frame === 2) act(() => scroller.dispatchEvent(new Event('scroll')));
+      if (frame === 5) act(() => vi.advanceTimersByTime(200));
+    }
+    expect(row.isConnected).toBe(true);
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it.each(['local', 'peer-history'])('keeps the native origin after hydration clears its historical flag on %s', surface => {
+    activateSurface(surface);
+    state.session!.isHistorical = true;
+    render();
+    for (let frame = 0; frame < 45; frame++) tick();
+    const row = latest()!;
+    const top = row.getBoundingClientRect().top;
+    writes = [];
+    state.session = { ...state.session!, isHistorical: false };
+    state.items = [...turn('older', 3000), ...state.items];
+    render(); resize(); tick();
+    expect(latest()).toBe(row);
+    expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+    expect(host.querySelector<HTMLElement>('[data-flowchat-scroller]')!.dataset.flowchatScrollOrigin).toBe('end');
+    expect(writes).toEqual([]);
+  });
+
+  it('navigates in chronological coordinates and restores an existing bookmark in native history', () => {
+    state.items = [...Array.from({ length: 30 }, (_, i) => turn(`old-${i}`, 500)).flat(), ...turn('latest', 900)];
+    render();
+    for (let frame = 0; frame < 45; frame++) tick();
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    expect(host.querySelectorAll('.virtual-item-wrapper').length).toBeLessThan(40);
+    act(() => { expect(listRef.current!.navigateToTurn('old-12', { behavior: 'auto' })).toBe(true); });
+    for (let frame = 0; frame < 20; frame++) { resize(); tick(); act(() => scroller.dispatchEvent(new Event('scroll'))); }
+    const user = host.querySelector<HTMLElement>('[data-virtual-item-key="block:user-message:old-12:user-old-12"]')!;
+    expect(user).not.toBeNull();
+    expect(user.getBoundingClientRect().top).toBeCloseTo(8, 1);
+    const snapshot = listRef.current!.captureViewportSnapshot()!;
+    expect(snapshot.scrollTopPx).toBeGreaterThan(0); // Existing persisted convention.
+    act(() => listRef.current!.scrollToLatestEndPosition());
+    for (let frame = 0; frame < 80; frame++) { if (frame < 3) resize(); tick(); }
+    expect(scroller.scrollTop).toBe(0);
+    act(() => listRef.current!.prepareItemNavigation());
+    for (let frame = 0; frame < 20; frame++) {
+      act(() => { listRef.current!.restoreViewportSnapshot(snapshot); });
+      resize(); tick();
+    }
+    const restored = listRef.current!.captureViewportSnapshot()!;
+    expect(restored.anchorItemKey).toBe(snapshot.anchorItemKey);
+    expect(restored.anchorOffsetPx).toBeCloseTo(snapshot.anchorOffsetPx!, 1);
+  });
+
+
+  it('hands a long historical viewport to resumed output without remounting the visible tail', () => {
+    state.items = [...Array.from({ length: 30 }, (_, i) => turn(`old-${i}`, 500)).flat(), ...turn('latest', 900)];
+    render();
+    for (let frame = 0; frame < 45; frame++) tick();
+    const row = latest()!;
+    const scroller = host.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+    const bottom = row.getBoundingClientRect().bottom;
+    state.processing = true;
+    render();
+    expect(scroller.dataset.flowchatScrollOrigin).toBe('start');
+    expect(latest()).toBe(row);
+    for (let frame = 0; frame < 10; frame++) {
+      resize(); tick();
+      expect(latest()).toBe(row);
+    }
+    // Live output now owns its usual reading line, with the same concrete row.
+    expect(row.getBoundingClientRect().bottom).toBeLessThanOrEqual(bottom);
+    expect(row.getBoundingClientRect().bottom).toBeGreaterThan(0);
+  });
+
+
+  it.each(['local', 'peer-history'])('places an explicitly submitted message once after leaving native history on %s', surface => {
+    activateSurface(surface);
+    state.items = [...Array.from({ length: 20 }, (_, i) => turn(`old-${i}`, 500)).flat(), ...turn('latest', 900)];
+    render();
+    for (let frame = 0; frame < 45; frame++) tick();
+    const oldRow = latest()!;
+    let intent!: NonNullable<ReturnType<typeof registerSubmittedMessageScrollIntent>>;
+    act(() => { intent = registerSubmittedMessageScrollIntent(getActiveSurfaceScope(), 'history-session', 'submitted', 'user-submitted')!; });
+    expect(latest()).toBe(oldRow);
+    state.items = [...state.items, turn('submitted', 0)[0]];
+    render();
+    for (let frame = 0; frame < 10; frame++) { resize(); tick(); }
+    const user = host.querySelector<HTMLElement>('[data-virtual-item-key="block:user-message:submitted:user-submitted"]')!;
+    expect(user).not.toBeNull();
+    expect(user.getBoundingClientRect().top).toBeCloseTo(8, 1);
+    expect(host.querySelector<HTMLElement>('[data-flowchat-scroller]')!.dataset.flowchatScrollOrigin).toBe('start');
+    expect(isSubmittedMessageScrollIntentPending(intent)).toBe(false);
+  });
+
+});
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 9ace9e4499..c6a1f94bcf 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -1,11 +1,11 @@
 /**
- * Virtualized FlowChat transcript with natural browser scroll range.
- *
- * The physical bottom keeps a short latest Turn at top, then places taller
- * output at the reading line. Its minimum extent survives card collapse; flex
- * layout supplies only the space needed. The follow controller owns scrolling.
+ * Idle history grows upward from a native bottom origin. Live output retains
+ * its top-origin submission placement and trailing reservation. The shared
+ * viewport register owns navigation across both coordinate conventions.
  */
 
+import { readFlowChatScrollTop } from './flowChatScrollCoordinates';
+import { FlowChatScrollOriginBoundary } from './FlowChatScrollOriginBoundary';
 import React, {
   forwardRef,
   useCallback,
@@ -84,7 +84,7 @@ import {
   type HistoryBoundaryProximity,
 } from './flowChatHistoryBoundary';
 import { VirtualItemRenderer } from './VirtualItemRenderer';
-import { FlowChatPrependSnapshot } from './FlowChatPrependSnapshot';
+import { FlowChatPrependSnapshot, type FlowChatPrependGeometrySnapshot } from './FlowChatPrependSnapshot';
 import { revealContainedRange } from '@openbitfun/flow-chat-presentation/scroll';
 import { FlowChatOpeningBoundary } from './FlowChatOpeningBoundary';
 import { useFlowChatVolatileContext } from './FlowChatContext';
@@ -106,6 +106,7 @@ import type { ConversationExcerptContext } from '@/shared/types/context';
 import { findExcerptSource, resolveExcerptRange } from '../../selection/flowChatSelection';
 import { highlightExcerptRange } from '../../selection/locateConversationExcerpt';
 import './VirtualMessageList.scss';
+import { centerFlowChatExtent } from './flowChatViewportGeometry';
 import { Icon } from '@openbitfun/ui';
 import { isSubmittedMessageScrollIntentPending, type SubmittedMessageScrollIntent } from '../../services/submittedMessageScrollIntent';
 
@@ -120,6 +121,7 @@ const OPEN_REVEAL_MAX_FRAMES = 40;
  * top, which would otherwise make the edge fade flicker back on.
  */
 const FLOWCHAT_SCROLL_START_THRESHOLD_PX = 1;
+const virtualItemTurn = (item: VirtualItem) => item.turnId;
 
 function readableViewportBounds(scroller: HTMLElement, inputOverlayInsetPx: number) {
   const top = scroller.getBoundingClientRect().top;
@@ -127,22 +129,10 @@ function readableViewportBounds(scroller: HTMLElement, inputOverlayInsetPx: numb
     getComputedStyle(scroller).getPropertyValue('--openbitfun-space-12'),
   ) || 0;
   return {
-    top: top + (scroller.scrollTop <= FLOWCHAT_SCROLL_START_THRESHOLD_PX ? 0 : edgeFadePx),
+    top: top + (readFlowChatScrollTop(scroller) <= FLOWCHAT_SCROLL_START_THRESHOLD_PX ? 0 : edgeFadePx),
     bottom: top + scroller.clientHeight - inputOverlayInsetPx - edgeFadePx,
   };
 }
-/**
- * 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'];
 /**
  * Transcripts mounted this session, counted.
@@ -420,6 +410,13 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const activeSession = useActiveSession();
   const dispatchJobId = activeSession?.config?.dispatchJobId;
   const activeSessionState = useActiveSessionState();
+  // isHistorical is a hydration flag and becomes false as soon as the first
+  // page is ready. Layout must survive that transition and all later pages.
+  const [liveLayout, setLiveLayout] = useState(activeSessionState.isProcessing);
+  const endOrigin = !liveLayout || viewportMode === 'history-reading';
+  useLayoutEffect(() => {
+    if (activeSessionState.isProcessing) setLiveLayout(true);
+  }, [activeSessionState.isProcessing]);
   const activeSessionId = activeSession?.sessionId ?? null;
   const { items: virtualItems, reader } = useConversationTimeline(sourceItems, activeSessionId ?? undefined, 'main');
   const timelineItemsRef = useRef(virtualItems);
@@ -453,6 +450,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const isViewportActiveRef = useRef(isViewportActive);
   isViewportActiveRef.current = isViewportActive;
   const scrollerElementRef = useRef<HTMLElement | null>(null);
+  const footerElementRef = useRef<HTMLDivElement | null>(null);
   /**
    * 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
@@ -473,8 +471,9 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const [scrollerElement, setScrollerElement] = useState<HTMLElement | null>(null);
   const [viewportHeightPx, setViewportHeightPx] = useState(0);
   const [viewportWidthPx, setViewportWidthPx] = useState(0);
-  /** Last scroller box the resize observer saw, to tell it apart from a content change. */
-  const observedViewportBoxRef = useRef<{ width: number; height: number } | null>(null);
+  useLayoutEffect(() => {
+    if (scrollerElement && extentElementRef.current) centerFlowChatExtent(scrollerElement, extentElementRef.current);
+  }, [scrollerElement, viewportWidthPx, endOrigin]);
   /** Native minimization withdraws the scroller without unmounting the session. */
   const isViewportSuspendedRef = useRef(false);
   const measurementSuspendedRef = useRef(measurementSuspended);
@@ -483,9 +482,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const pendingViewportWidthRef = useRef<number | null>(null);
   const suspendedViewportScrollTopRef = useRef<number | null>(null);
   const viewportResumeFrameRef = useRef<number | null>(null);
-  /** 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. */
+  /** Synchronous tail band used by viewport snapshots. */
   const isAtTailRef = useRef(true);
   /** A pointer is held on the scrollbar, so the scrolling it causes is intent. */
   const isScrollbarPressRef = useRef(false);
@@ -537,22 +534,33 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
 
   const reconcileOpeningMeasurementRef = useRef<() => boolean>(() => false);
   const absorbMeasurementShiftRef = useRef<(byPx: number) => void>(() => {});
+  const shiftFollowLayoutRef = useRef<(byPx: number) => boolean>(() => false);
+  const measurementAnchorKeyRef = useRef<() => string | null>(() => null);
   const shiftMeasuredViewport = useCallback((byPx: number) => {
     const scroller = scrollerElementRef.current;
     if (!scroller) return false;
-    const before = scroller.scrollTop;
-    const applied = viewportOwner.shift(byPx);
+    const before = readFlowChatScrollTop(scroller);
+    const applied = viewportOwner.shift(byPx) || shiftFollowLayoutRef.current(byPx);
     // A measured row above the reader already moved both the content and the
     // viewport. Credit that repair before the anchor's next settle, otherwise
     // it mistakes the registered shift for reader travel and repairs it twice.
-    if (applied) absorbMeasurementShiftRef.current(scroller.scrollTop - before);
+    if (applied) absorbMeasurementShiftRef.current(readFlowChatScrollTop(scroller) - before);
     return applied;
   }, [viewportOwner]);
   const isExpandingSearchSourceRef = useRef(false);
   const readerInteractionRef = useRef<(kind: TimelineReaderInteraction) => void>(() => {});
   const interactionKeys = useTimelineInteraction(scrollerElementRef, reader, () => viewportOwner.currentOwner() === 'follow-output', undefined, kind => readerInteractionRef.current(kind));
-  const pinnedKeys = useMemo(() => submissionKey
-    ? new Set([...interactionKeys, submissionKey]) : interactionKeys, [interactionKeys, submissionKey]);
+  const displayedTailTurnId = virtualItems.at(-1)?.turnId;
+  const pinnedKeys = useMemo(() => {
+    const keys = new Set(interactionKeys);
+    if (submissionKey) keys.add(submissionKey);
+    // The last complete Turn owns the CSS trailing space. Keep that one Turn
+    // resident while older Turns virtualize above it.
+    if (endOrigin) virtualItems.forEach(item => {
+      if (item.turnId === displayedTailTurnId) keys.add(getVirtualItemStableKey(item));
+    });
+    return keys;
+  }, [interactionKeys, submissionKey, endOrigin, virtualItems, displayedTailTurnId]);
   // A quiet stream re-renders this list on every flush; collator-sorting the
   // disclosure map is only worth paying when the map itself changed.
   const availableWidthPx = contentWidth === undefined
@@ -567,6 +575,8 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       .join(','),
   ].join('|'), [availableWidthPx, activeSession?.isHistorical, exploreGroupStates]);
   const virtualizer = useFlowChatVirtualizer({
+    endOrigin,
+    footerRef: footerElementRef,
     pinnedKeys,
     items: virtualItems,
     startAtTailOnMount: presentationMode !== 'history-window' && !shouldRestoreInitialSnapshot,
@@ -574,6 +584,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     scrollerRef: scrollerElementRef,
     headerRef: headerElementRef,
     getItemKey: getVirtualItemStableKey,
+    getItemGroupKey: endOrigin ? virtualItemTurn : undefined,
     estimateItemHeightPx: estimateVirtualMessageItemHeightWithContext,
     getKnownItemHeightPx: getKnownVirtualItemHeightPx,
     estimateContext: {
@@ -587,6 +598,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     scrollPaddingStartPx: FLOWCHAT_TURN_TOP_GAP_PX,
     writeViewport: viewportOwner.write,
     shiftViewport: shiftMeasuredViewport,
+    getViewportAnchorKey: () => measurementAnchorKeyRef.current(),
   });
 
   const userMessageItems = useMemo(() => virtualItems
@@ -611,7 +623,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const inputOverlayInsetPx = computeFlowChatInputOverlayInsetPx(inputHeight);
   const bottomLayoutInsetPx = computeFlowChatInputStackFooterPx(inputHeight);
 
-  const tailSpacerPx = tailSpacerPxForViewport(viewportHeightPx, bottomLayoutInsetPx);
+  const tailSpacerPx = endOrigin ? 0 : tailSpacerPxForViewport(viewportHeightPx, bottomLayoutInsetPx);
 
   /** Read the latest session during deferred placement without rebuilding it. */
   const activeSessionRef = useRef(activeSession);
@@ -667,7 +679,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     const element = getRenderedUserMessageElement(turnId);
     if (!scroller || !element) return null;
     return turnTopScrollTop(
-      scroller.scrollTop
+      readFlowChatScrollTop(scroller)
         + element.getBoundingClientRect().top
         - scroller.getBoundingClientRect().top,
     );
@@ -675,15 +687,23 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
 
   const tailTurnId = presentationMode === 'tail' ? virtualItems.at(-1)?.turnId : undefined;
   const rebaseLeadingAnchorRef = useRef<() => void>(() => {});
-  const { capture: captureLeadingExtent, refresh: refreshLeadingExtent, snapshot: snapshotLeadingExtent } = useFlowChatLeadingExtent({
+  const { capture: captureLeadingExtent, refresh: refreshLeadingExtent, restore: restoreLeadingExtent, snapshot: snapshotLeadingExtent,
+    releaseForReflow } = useFlowChatLeadingExtent({
+    enabled: !endOrigin,
     scope: JSON.stringify([activeSessionId, presentationMode, tailTurnId]),
     items: virtualItems, virtualizer, scrollerRef: scrollerElementRef, extentRef: extentElementRef,
     onAnchorRebased: () => rebaseLeadingAnchorRef.current(),
+    readReaderScrollPosition: viewportOwner.readReaderScrollPosition,
   });
+  measurementAnchorKeyRef.current = () => snapshotLeadingExtent()?.key ?? null;
   const readLayoutTarget = useCallback(() => {
     const scroller = scrollerElementRef.current;
     const extent = extentElementRef.current;
     if (!scroller || !extent) return 0;
+    if (endOrigin) {
+      refreshLeadingExtent(null); // Clear a live Turn's floor on an explicit history handoff.
+      return readContentEndScrollTop(scroller);
+    }
     const index = tailTurnId === undefined ? undefined : userMessageIndexes.get(tailTurnId);
     const bounds = index === undefined ? null : virtualizer.getItemBounds(index);
     // This is a property of the current Turn, not a consumable send receipt.
@@ -698,7 +718,15 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     // Reading only changes layout, never ownership or scroll position. Follow,
     // jump and the native scrollbar share this actual reachable endpoint.
     return readContentEndScrollTop(scroller);
-  }, [readContentEndScrollTop, refreshLeadingExtent, resolveTurnTopScrollTop, tailTurnId, userMessageIndexes, virtualizer]);
+  }, [endOrigin, readContentEndScrollTop, refreshLeadingExtent, resolveTurnTopScrollTop, tailTurnId, userMessageIndexes, virtualizer]);
+
+  const readLayoutRevision = useCallback(() => {
+    const scroller = scrollerElementRef.current;
+    const column = scroller?.querySelector<HTMLElement>('.virtual-item-wrapper');
+    // A drag preview changes the column's CSS without changing the preference
+    // or the full-width scroller. Observe the geometry that actually wraps text.
+    return `${scroller?.clientHeight}:${column?.getBoundingClientRect().width ?? scroller?.clientWidth}`;
+  }, []);
 
   const publishFollowOffset = useCallback((offset: number) => {
     virtualizer.syncViewportOffset(offset);
@@ -708,13 +736,17 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   }, [captureLeadingExtent, isOpeningViewport, virtualizer]);
   useLayoutEffect(() => {
     if (isOpenViewportSettled && scrollerElementRef.current) {
-      captureLeadingExtent(scrollerElementRef.current.scrollTop, true);
+      captureLeadingExtent(readFlowChatScrollTop(scrollerElementRef.current), true);
     }
     // Only on reveal. Layout changes resolve the existing anchor, never replace it.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpenViewportSettled]);
 
   const placeSubmittedMessage = useCallback((intent: SubmittedMessageScrollIntent): number | null => {
+    if (endOrigin) {
+      setLiveLayout(true);
+      return null;
+    }
     const item = virtualItems.find(candidate => candidate.turnId === intent.turnId && candidate.type === 'user-message');
     const turn = activeSessionRef.current?.dialogTurns.find(candidate => candidate.id === intent.turnId);
     if (!item || item.type !== 'user-message' || item.data.id !== intent.messageId
@@ -737,11 +769,11 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     if (top === null) return null;
     extentElementRef.current.style.minHeight = `${top + scroller.clientHeight}px`;
     if (!viewportOwner.write({ owner: 'follow-output', topPx: top })) return null;
-    virtualizer.syncViewportOffset(scroller.scrollTop);
-    captureLeadingExtent(scroller.scrollTop, true);
+    virtualizer.syncViewportOffset(readFlowChatScrollTop(scroller));
+    captureLeadingExtent(readFlowChatScrollTop(scroller), true);
     updateSubmissionKey(null);
-    return scroller.scrollTop;
-  }, [captureLeadingExtent, getRenderedUserMessageElement, resolveTurnTopScrollTop, updateSubmissionKey, viewportOwner, virtualItems, virtualizer]);
+    return readFlowChatScrollTop(scroller);
+  }, [captureLeadingExtent, endOrigin, getRenderedUserMessageElement, resolveTurnTopScrollTop, updateSubmissionKey, viewportOwner, virtualItems, virtualizer]);
   const outputTurns = useMemo(() => new Set(virtualItems.filter(item => item.type !== 'user-message').map(item => item.turnId)), [virtualItems]);
 
   const {
@@ -754,9 +786,12 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     handleUserScrollIntent,
     handleTurnsRolledBack,
     handleScroll,
-    handleViewportResize,
     getFollowTargetScrollTop,
+    shiftLayout,
   } = useFlowChatFollowOutput({
+    nativeEndOrigin: endOrigin,
+    readLayoutRevision,
+    onLayoutReflow: releaseForReflow,
     activeSessionId: activeSessionId ?? undefined,
     virtualItemCount: virtualItems.length,
     isStreaming: isStreamingOutput,
@@ -774,6 +809,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     viewportOwner,
     viewportId,
   });
+  shiftFollowLayoutRef.current = shiftLayout;
 
   reconcileOpeningMeasurementRef.current = () => {
     if (isOpenViewportSettledRef.current || isViewportSuspendedRef.current
@@ -799,12 +835,17 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
    * follow-output — see `flowChatViewportOwnership.ts`.
    */
   const isViewportOwnedElsewhere = useCallback(() => (
-    isViewportSuspendedRef.current || !viewportOwner.canShift() || isOpeningViewport()
-  ), [isOpeningViewport, viewportOwner]);
+    // A wheel at the bottom of a short history asks for older content; no
+    // reading position has moved yet. Let that content expand upward natively.
+    (endOrigin && (scrollerElementRef.current?.scrollTop ?? 0) >= -1)
+    || isViewportSuspendedRef.current || !viewportOwner.canShift() || isOpeningViewport()
+  ), [endOrigin, isOpeningViewport, viewportOwner]);
 
   const shiftAnchorCorrection = useCallback((byPx: number) => {
-    viewportOwner.shift(byPx);
-  }, [viewportOwner]);
+    if (viewportOwner.shift(byPx) && endOrigin && scrollerElementRef.current) {
+      virtualizer.syncViewportOffset(readFlowChatScrollTop(scrollerElementRef.current));
+    }
+  }, [endOrigin, viewportOwner, virtualizer]);
 
   const viewportAnchor = useFlowChatViewportAnchor({
     scrollerRef: scrollerElementRef,
@@ -834,15 +875,42 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
    *   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.
+   * Once content is painted, its own pre-mutation screen position is the
+   * baseline. A record page may fill earlier blocks inside the loaded head as
+   * well as prepend a whole Turn, so the former first item's displacement alone
+   * is insufficient. The bounded prefix calculation remains only for opening
+   * or a window with no surviving visible block.
    */
   const firstItemKeyRef = useRef<string | null>(null);
-  const prependSnapshotRef = useRef<{ firstKey: string; scrollHeight: number } | null>(null);
+  const prependSnapshotRef = useRef<FlowChatPrependGeometrySnapshot | null>(null);
   const prependItemKeys = useMemo(() => virtualItems.map(getVirtualItemStableKey), [virtualItems]);
+  const capturePrependAnchor = useCallback((displacedKeys: ReadonlySet<string>): FlowChatPrependGeometrySnapshot['anchor'] => {
+    const scroller = scrollerElementRef.current;
+    if (!scroller || isOpeningViewport() || isViewportSuspendedRef.current) return;
+    const surviving = new Set(prependItemKeys);
+    const top = scroller.getBoundingClientRect().top;
+    const following = isFollowingOutputNow();
+    let firstVisible: FlowChatPrependGeometrySnapshot['anchor'];
+    let followedOutput: FlowChatPrependGeometrySnapshot['anchor'];
+    for (const row of scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper')) {
+      if (row.closest('[data-flowchat-scroller]') !== scroller) continue;
+      const key = row.dataset.virtualItemKey;
+      if (!key || !surviving.has(key)) continue;
+      const rect = row.getBoundingClientRect();
+      if (rect.height <= 0 || rect.bottom <= top || rect.top >= top + scroller.clientHeight) continue;
+      const anchor = { key, offsetPx: rect.top - top };
+      firstVisible ??= anchor;
+      if (!following) return anchor;
+      // Follow owns the latest visible output, including when a stationary user
+      // bubble or previously loaded history is also visible. A footer must not
+      // turn growth inside that output into an above-anchor measurement shift.
+      if (displacedKeys.has(key) && row.dataset.itemType !== 'user-message'
+        && row.dataset.timelineKind !== 'round-footer' && row.dataset.timelineKind !== 'round-header') {
+        followedOutput = anchor;
+      }
+    }
+    return followedOutput ?? firstVisible;
+  }, [isFollowingOutputNow, isOpeningViewport, prependItemKeys]);
   useLayoutEffect(() => {
     const previousFirstKey = firstItemKeyRef.current;
     const nextFirstKey = virtualItems[0] ? getVirtualItemStableKey(virtualItems[0]) : null;
@@ -853,8 +921,32 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     const snapshot = prependSnapshotRef.current;
     prependSnapshotRef.current = null;
     if (isViewportSuspendedRef.current) return;
-    if (previousFirstKey === null || previousFirstKey === nextFirstKey) return;
+    if (endOrigin || previousFirstKey === null) return;
     if (!snapshot || snapshot.firstKey !== previousFirstKey) return;
+    if (snapshot.anchor) {
+      // A record page is not necessarily a pure prefix: it can complete the
+      // earlier half of a Turn already on screen as well as add older Turns.
+      // Measure first, then repair the remaining displacement of the same
+      // painted block. Prefix height alone misses those interior insertions.
+      virtualizer.measureRenderedItems();
+      const row = [...scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper')]
+        .find(element => element.dataset.virtualItemKey === snapshot.anchor!.key
+          && element.closest('[data-flowchat-scroller]') === scroller);
+      if (row) {
+        const following = viewportOwner.currentOwner() === 'follow-output';
+        if (following) restoreLeadingExtent(snapshot.anchor);
+        const delta = row.getBoundingClientRect().top - scroller.getBoundingClientRect().top - snapshot.anchor.offsetPx;
+        const before = readFlowChatScrollTop(scroller);
+        if (Math.abs(delta) > 0.5 && (viewportOwner.shift(delta)
+          || (following && viewportOwner.write({ owner: 'follow-output', topPx: before + delta })))) {
+          virtualizer.syncViewportOffset(readFlowChatScrollTop(scroller));
+          viewportAnchor.absorbViewportShift(readFlowChatScrollTop(scroller) - before);
+          if (following) scheduleFollowToLatest();
+        }
+        return;
+      }
+    }
+    if (previousFirstKey === nextFirstKey) return;
     const previousScrollHeightPx = snapshot.scrollHeight;
     // Absent means the head was trimmed rather than extended, and there is no
     // prepended height to account for.
@@ -885,7 +977,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
      * reader is scrolling up into it, so routing this through the priority
      * order refused every compensation there ever was.
      */
-    const fromPx = scroller.scrollTop;
+    const fromPx = readFlowChatScrollTop(scroller);
     /*
      * Three bounds on how far the reader has to move, and the smallest wins.
      *
@@ -923,7 +1015,10 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
      * `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);
+    if (compensated) {
+      virtualizer.syncViewportOffset(readFlowChatScrollTop(scroller));
+      viewportAnchor.absorbViewportShift(readFlowChatScrollTop(scroller) - fromPx);
+    }
     /*
      * A refusal leaves the displacement to whoever holds a target — so make
      * sure they are awake to take it.
@@ -956,13 +1051,15 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
        * the loop's own target stays authoritative afterwards.
        */
       if (viewportOwner.write({ owner: 'follow-output', topPx: fromPx + shiftedPx })) {
-        virtualizer.syncViewportOffset(scroller.scrollTop);
-        viewportAnchor.absorbViewportShift(shiftedPx);
+        virtualizer.syncViewportOffset(readFlowChatScrollTop(scroller));
+        viewportAnchor.absorbViewportShift(readFlowChatScrollTop(scroller) - fromPx);
       }
       scheduleFollowToLatest();
     }
   }, [
+    endOrigin,
     readContentEndScrollTop,
+    restoreLeadingExtent,
     scheduleFollowToLatest,
     viewportAnchor,
     viewportOwner,
@@ -1046,7 +1143,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
 
   const notifyUserScrollIntent = useCallback((direction?: SessionHistoryWindowDirection, interaction?: TimelineReaderInteraction) => {
     const scroller = scrollerElementRef.current;
-    if (scroller && !isViewportSuspendedRef.current) captureLeadingExtent(scroller.scrollTop, true);
+    if (scroller && !isViewportSuspendedRef.current) captureLeadingExtent(readFlowChatScrollTop(scroller), true);
     if (direction) historyPager.readerIntent(direction);
     /*
      * The reader outranks everything, and the claim is what makes that true of
@@ -1136,15 +1233,15 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     };
   }, [activeSessionId, historyWindow, presentationMode, viewportMode]);
 
-  const snapshotVirtualizerRef = useRef(virtualizer);
-  snapshotVirtualizerRef.current = virtualizer;
+  const currentVirtualizerRef = useRef(virtualizer);
+  currentVirtualizerRef.current = virtualizer;
   const restoreViewportSnapshot = useCallback((snapshot: FlowChatViewportSnapshot): boolean => {
     if (snapshot.sessionId !== activeSessionId) return false;
     const scroller = scrollerElementRef.current;
     if (!scroller || snapshot.anchorTurnId === null || snapshot.anchorOffsetPx === null) {
       return false;
     }
-    const currentVirtualizer = snapshotVirtualizerRef.current;
+    const currentVirtualizer = currentVirtualizerRef.current;
     currentVirtualizer.measureRenderedItems();
     const exactAnchor = snapshot.anchorItemKey
       ? Array.from(
@@ -1173,11 +1270,11 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       const targetPx = bounds
         ? Math.min(bounds.startPx - snapshot.anchorOffsetPx, Math.max(bounds.startPx, bounds.endPx - 1))
         : snapshot.scrollTopPx;
-      const materializeByPx = targetPx - scroller.scrollTop;
+      const materializeByPx = targetPx - readFlowChatScrollTop(scroller);
       if (Math.abs(materializeByPx) > 0.5) {
         viewportOwner.shift(materializeByPx);
       }
-      currentVirtualizer.syncViewportOffset(scroller.scrollTop);
+      currentVirtualizer.syncViewportOffset(readFlowChatScrollTop(scroller));
       return false;
     }
     const currentOffsetPx = anchor.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
@@ -1312,7 +1409,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         `.virtual-item-wrapper[data-virtual-index="${lastVirtualIndex}"]`,
       );
       const contentEnd = readContentEndScrollTop(scrollerElement);
-      const inPosition = Math.abs(scrollerElement.scrollTop - contentEnd) <= AT_CONTENT_END_THRESHOLD_PX;
+      const inPosition = Math.abs(readFlowChatScrollTop(scrollerElement) - contentEnd) <= AT_CONTENT_END_THRESHOLD_PX;
       const tailVisible = lastItem !== null
         && lastItem.getBoundingClientRect().bottom
           <= scrollerElement.getBoundingClientRect().bottom + AT_CONTENT_END_THRESHOLD_PX;
@@ -1363,7 +1460,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
      * in the reserved blank is in.
      */
     const atTail = isFollowCorrectingViewport() || isViewportAtTail({
-      scrollTop: scroller.scrollTop,
+      scrollTop: readFlowChatScrollTop(scroller),
       contentEndScrollTop: contentEnd,
       // Nothing owns an offset outside follow, so the band collapses onto the
       // content end.
@@ -1379,7 +1476,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const updateIsAtScrollStart = useCallback(() => {
     const scroller = scrollerElementRef.current;
     if (!scroller) return;
-    const nextIsAtScrollStart = scroller.scrollTop <= FLOWCHAT_SCROLL_START_THRESHOLD_PX;
+    const nextIsAtScrollStart = readFlowChatScrollTop(scroller) <= FLOWCHAT_SCROLL_START_THRESHOLD_PX;
     const nextAttribute = nextIsAtScrollStart ? 'true' : 'false';
     if (scroller.dataset.scrollAtStart !== nextAttribute) {
       // This attribute drives only the CSS mask. Keeping it out of React state
@@ -1502,10 +1599,10 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       // Synchronous corrections are removed by the register. Smooth owned
       // navigation/follow scrolls are excluded here; unowned momentum counts.
       if (direction && (owner === null || owner === 'user-gesture')) {
-        captureLeadingExtent(scrollerElement.scrollTop, true, geometry);
+        captureLeadingExtent(readFlowChatScrollTop(scrollerElement), true, geometry);
         historyPager.readerIntent(direction);
       }
-      if (owner === 'one-shot-navigation') captureLeadingExtent(scrollerElement.scrollTop, true, geometry);
+      if (owner === 'one-shot-navigation') captureLeadingExtent(readFlowChatScrollTop(scrollerElement), true, geometry);
       /*
        * 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
@@ -1525,9 +1622,9 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
        * 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(scrollerElement.scrollTop === geometry.scrollTop ? geometry : undefined);
+      viewportAnchor.captureAnchorForScroll(readFlowChatScrollTop(scrollerElement) === geometry.scrollTop ? geometry : undefined);
       scheduleVisibleTurnInfoUpdate();
-      publishViewportSnapshot(scrollerElement.scrollTop === geometry.scrollTop ? geometry : undefined);
+      publishViewportSnapshot(readFlowChatScrollTop(scrollerElement) === geometry.scrollTop ? geometry : undefined);
       /*
        * 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
@@ -1612,8 +1709,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       if (!isUsableFlowChatViewportRect(nextViewportBox)) {
         if (!isViewportSuspendedRef.current) {
           isViewportSuspendedRef.current = true;
-          suspendedViewportScrollTopRef.current = scrollerElement.scrollTop;
-          tailRealignCallbacksRef.current = 0;
+          suspendedViewportScrollTopRef.current = readFlowChatScrollTop(scrollerElement);
         }
         if (viewportResumeFrameRef.current !== null) {
           cancelAnimationFrame(viewportResumeFrameRef.current);
@@ -1624,7 +1720,6 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       updateIsAtScrollStart();
       const isResumingSuspendedViewport = isViewportSuspendedRef.current;
       if (isResumingSuspendedViewport) {
-        observedViewportBoxRef.current = nextViewportBox;
         setViewportHeightPx(nextViewportBox.height);
         setViewportWidthPx(nextViewportBox.width);
         if (viewportResumeFrameRef.current === null) {
@@ -1632,22 +1727,6 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         }
         return;
       }
-      /*
-       * 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 = previousViewportBox !== null && (
-        nextViewportBox.width !== previousViewportBox.width
-        || nextViewportBox.height !== previousViewportBox.height
-      );
-      observedViewportBoxRef.current = nextViewportBox;
-      if (viewportBoxChanged) {
-        tailRealignCallbacksRef.current = TAIL_REALIGN_RESIZE_CALLBACKS;
-      }
       setViewportHeightPx(nextViewportBox.height);
       /*
        * A divider drag changes this scroller's width every frame, and both the
@@ -1666,31 +1745,20 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
        * 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.
+       * still be invisible. Keep the previous reading relationship throughout
+       * the layout transaction, including changes to the column's width.
        */
       // Resolve the leading extent before any reader-anchor restoration. The
       // shortened tail must not drag visible preceding content downward.
+      // ResizeObserver callbacks are not an ordering contract. Commit all row
+      // sizes before resolving a layout target/anchor, including when this
+      // container's observer runs before the virtualizer's row observer.
+      currentVirtualizerRef.current.measureRenderedItems();
       scheduleFollowToLatest();
-      if (viewportBoxChanged) {
-        viewportAnchor.captureAnchor();
-      } else {
-        viewportAnchor.openSettleWindow('resize');
-      }
-
-      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,
-        });
-      }
+      // Width reflow preserves the existing reading anchor; capturing here
+      // would accept its displaced position as the new baseline. Follow owns
+      // its own synchronous layout placement above.
+      viewportAnchor.openSettleWindow('resize');
 
       scheduleVisibleTurnInfoUpdate();
       scheduleViewportSnapshot();
@@ -1709,7 +1777,6 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     observer.observe(scrollerElement);
     return () => observer.disconnect();
   }, [
-    handleViewportResize,
     resumeSuspendedViewport,
     scheduleFollowToLatest,
     scheduleViewportSnapshot,
@@ -1796,7 +1863,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
     });
     if (scroller && turnTopAlignmentEntersReservedBlank({
-      turnTopScrollTop: scroller.scrollTop,
+      turnTopScrollTop: readFlowChatScrollTop(scroller),
       // Placing the viewport can remeasure the transcript and its content end.
       contentEndScrollTop: readContentEndScrollTop(scroller),
     })) {
@@ -1906,7 +1973,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       ? readableHeight / 3
       : (readableHeight - elementRect.height) / 2);
     const topPx = Math.max(0, Math.min(scroller.scrollHeight - scroller.clientHeight,
-      scroller.scrollTop + sourceTop - targetTop));
+      readFlowChatScrollTop(scroller) + sourceTop - targetTop));
     viewportAnchor.reanchorAfterNavigation();
     // Replace any earlier Turn/item aim so later measurements cannot pull the
     // opening line back beneath the top fade.
@@ -1983,6 +2050,12 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       }
     }
     const scroller = scrollerElementRef.current;
+    if (endOrigin && targetIndex === virtualItems.length - 1 && targetIndex >= 0) {
+      // The container repeats this opening request when a history page adds
+      // Turn summaries. Native history is already attached to its bottom;
+      // aiming at an estimated row end would move it underneath the composer.
+      return Boolean(scroller?.querySelector(`[data-virtual-index="${targetIndex}"]`));
+    }
     const bounds = targetIndex < 0 ? null : virtualizer.getItemBounds(targetIndex);
     if (!bounds || !scroller) return false;
     // Deliberately does not exit follow-output. This is the session-open
@@ -1997,7 +2070,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       owner: 'follow-output',
     });
     return true;
-  }, [virtualItems, virtualizer]);
+  }, [endOrigin, virtualItems, virtualizer]);
 
   const isTurnRenderedInViewport = useCallback((turnId: string) => {
     const scroller = scrollerElementRef.current;
@@ -2142,7 +2215,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       viewportAnchor.reanchorAfterNavigation();
       const topPx = Math.max(0, Math.min(
         scroller.scrollHeight - scroller.clientHeight,
-        scroller.scrollTop + (rangeRect.top + rangeRect.bottom) / 2
+        readFlowChatScrollTop(scroller) + (rangeRect.top + rangeRect.bottom) / 2
           - (readableTop + readableBottom) / 2,
       ));
       virtualizer.scrollToOffset(topPx, {
@@ -2210,8 +2283,8 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     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),
+      aboveViewportPx: readFlowChatScrollTop(scroller) - head.startPx,
+      belowViewportPx: tail.endPx - (readFlowChatScrollTop(scroller) + scroller.clientHeight),
       viewportHeightPx: scroller.clientHeight,
     };
   }, [virtualItems.length, virtualizer]);
@@ -2312,8 +2385,6 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         syncFlowChatScrollbarMask(scroller, readContentEndScrollTop(scroller) > 0);
         setViewportHeightPx(initialViewportBox.height);
         setViewportWidthPx(initialViewportBox.width);
-        // Seed the box so the observer's first callback is not read as a resize.
-        observedViewportBoxRef.current = initialViewportBox;
       }
     }
   }, [readContentEndScrollTop, updateIsAtScrollStart]);
@@ -2427,6 +2498,28 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     ) : null
   ), [dispatchJobId, historyBoundaryState.after, presentationMode, requestHistoryBoundary, t]);
 
+  const renderedTurns = new Map<string, React.ReactNode[]>();
+  const leadingTurnGaps = new Map<string, number>();
+  virtualizer.rows.forEach((row, rowIndex) => {
+    const item = virtualItems[row.index];
+    const nextItem = virtualItems[nextVisibleItemIndexes[row.index]];
+    const nodes = renderedTurns.get(item.turnId) ?? [];
+    renderedTurns.set(item.turnId, nodes);
+    if (rowIndex > 0 && row.startPx > virtualizer.rows[rowIndex - 1].endPx) {
+      const gap = row.startPx - virtualizer.rows[rowIndex - 1].endPx;
+      if (nodes.length === 0) leadingTurnGaps.set(item.turnId, gap);
+      else nodes.push(<div key={`gap:${row.key}`} aria-hidden="true" style={{ height: gap }} />);
+    }
+    nodes.push(<VirtualItemRenderer key={row.key} item={item} index={row.index}
+      isLatestTurn={item.turnId === latestTurnId}
+      endsBeforeUserTurn={nextItem?.type === 'user-message'}
+      continuesAmbientToolRunAfter={isAmbientToolRunContinuationAfter(item, nextItem, pendingPermissionToolCallIds)}
+      measureRef={virtualizer.measureRowElement} />);
+  });
+  // The tail shell has a stable parent in both coordinate modes. A handoff to
+  // live output must not remount every measured row.
+  if (displayedTailTurnId && !renderedTurns.has(displayedTailTurnId)) renderedTurns.set(displayedTailTurnId, []);
+
   if (virtualItems.length === 0) {
     return (
       <div
@@ -2448,8 +2541,18 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     <TimelineMutationBoundary itemKeys={prependItemKeys} scrollerRef={scrollerElementRef}
       canRepair={() => !isViewportSuspendedRef.current && !isViewportOwnedElsewhere()} shift={viewportOwner.shift}
       snapshotAnchor={snapshotLeadingExtent}
-      onRepaired={viewportAnchor.captureAnchor}>
-    <FlowChatPrependSnapshot itemKeys={prependItemKeys} scrollerRef={scrollerElementRef} snapshotRef={prependSnapshotRef}>
+      onRepaired={() => {
+        if (scrollerElementRef.current) virtualizer.syncViewportOffset(readFlowChatScrollTop(scrollerElementRef.current));
+        viewportAnchor.captureAnchor();
+      }}>
+    <FlowChatPrependSnapshot enabled={!endOrigin} itemKeys={prependItemKeys} scrollerRef={scrollerElementRef}
+      snapshotRef={prependSnapshotRef} captureAnchor={capturePrependAnchor}>
+    <FlowChatScrollOriginBoundary endOrigin={endOrigin} scrollerRef={scrollerElementRef}
+      write={topPx => {
+        const applied = viewportOwner.write({ owner: viewportOwner.currentOwner() ?? 'layout-correction', topPx });
+        if (applied && scrollerElementRef.current) virtualizer.syncViewportOffset(readFlowChatScrollTop(scrollerElementRef.current));
+        return applied;
+      }}>
     <FlowChatOpeningBoundary
       data-openbitfun-component="virtual-message-list"
       data-openbitfun-part="root"
@@ -2465,10 +2568,12 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         ref={handleScrollerRef}
         className="virtual-message-list__scroller"
         data-flowchat-scroller="true"
+        data-flowchat-scroll-origin={endOrigin ? 'end' : 'start'}
         data-testid="flowchat-scroller"
         data-openbitfun-viewport-inset-bottom={inputOverlayInsetPx}
         style={{
           '--_flow-chat-input-overlay-inset': `${inputOverlayInsetPx}px`,
+          '--_flow-chat-history-turn-min-height': `${Math.max(0, viewportHeightPx - FLOWCHAT_TURN_TOP_GAP_PX)}px`,
         } as React.CSSProperties}
       >
         <div className="virtual-message-list__extent" ref={extentElementRef}>
@@ -2488,35 +2593,24 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
           data-testid="flowchat-item-list"
           style={{
             paddingTop: `${virtualizer.paddingTopPx}px`,
-            paddingBottom: `${virtualizer.paddingBottomPx}px`,
           }}
         >
-          {virtualizer.rows.map((row, rowIndex) => {
-            const item = virtualItems[row.index];
-            const nextItem = virtualItems[nextVisibleItemIndexes[row.index]];
-            return (
-              <React.Fragment key={row.key}>
-              {rowIndex > 0 && row.startPx > virtualizer.rows[rowIndex - 1].endPx &&
-                <div aria-hidden="true" style={{ height: row.startPx - virtualizer.rows[rowIndex - 1].endPx }} />}
-              <VirtualItemRenderer
-                key={row.key}
-                item={item}
-                index={row.index}
-                isLatestTurn={item.turnId === latestTurnId}
-                endsBeforeUserTurn={nextItem?.type === 'user-message'}
-                continuesAmbientToolRunAfter={isAmbientToolRunContinuationAfter(item, nextItem, pendingPermissionToolCallIds)}
-                measureRef={virtualizer.measureRowElement}
-              />
-              </React.Fragment>
-            );
-          })}
+          {[...renderedTurns].map(([turnId, nodes]) => (
+            <React.Fragment key={turnId}>
+            {leadingTurnGaps.has(turnId) && <div aria-hidden="true" style={{ height: leadingTurnGaps.get(turnId), flexShrink: 0 }} />}
+            <div className="virtual-message-list__turn" data-history-tail={turnId === displayedTailTurnId ? 'true' : undefined}>
+              {nodes}
+              {turnId === displayedTailTurnId && <>
+                <div aria-hidden="true" style={{ height: virtualizer.paddingBottomPx }} />
+                <div ref={footerElementRef} className="virtual-message-list__footer-block">
+                  <FlowChatListFooter bottomLayoutInsetPx={bottomLayoutInsetPx} tailSpacerPx={tailSpacerPx}
+                    nextHistoryBoundaryStatusNode={nextHistoryBoundaryStatusNode} runtimeStatusSessionId={activeSessionId} />
+                </div>
+              </>}
+            </div>
+            </React.Fragment>
+          ))}
         </div>
-        <FlowChatListFooter
-          bottomLayoutInsetPx={bottomLayoutInsetPx}
-          tailSpacerPx={tailSpacerPx}
-          nextHistoryBoundaryStatusNode={nextHistoryBoundaryStatusNode}
-          runtimeStatusSessionId={activeSessionId}
-        />
         </div>
       </div>
 
@@ -2534,6 +2628,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         inputHeight={inputHeight}
       />
     </FlowChatOpeningBoundary>
+    </FlowChatScrollOriginBoundary>
     </FlowChatPrependSnapshot>
     </TimelineMutationBoundary>
     </FlowChatReaderProvider>
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatScrollCoordinates.ts b/src/web-ui/src/flow_chat/components/modern/flowChatScrollCoordinates.ts
new file mode 100644
index 0000000000..01b78369b1
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatScrollCoordinates.ts
@@ -0,0 +1,22 @@
+/**
+ * History has a native bottom scroll origin (column-reverse). Its scrollTop is
+ * zero at the latest content and negative toward older content. Keep that
+ * physical coordinate inside the adapter; navigation still speaks top offsets.
+ */
+export function hasFlowChatEndOrigin(scroller: HTMLElement): boolean {
+  return scroller.dataset.flowchatScrollOrigin === 'end';
+}
+
+export function flowChatScrollRange(scroller: HTMLElement): number {
+  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+}
+
+export function readFlowChatScrollTop(scroller: HTMLElement): number {
+  return hasFlowChatEndOrigin(scroller)
+    ? flowChatScrollRange(scroller) + scroller.scrollTop
+    : scroller.scrollTop;
+}
+
+export function toFlowChatNativeScrollTop(scroller: HTMLElement, top: number): number {
+  return hasFlowChatEndOrigin(scroller) ? top - flowChatScrollRange(scroller) : top;
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.test.ts
new file mode 100644
index 0000000000..bcead4e689
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.test.ts
@@ -0,0 +1,20 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { centerFlowChatExtent } from './flowChatViewportGeometry';
+
+describe('transcript and composer panel axis', () => {
+  it.each([0, 15])('centres a reverse-flex extent starting at %s without accumulating an offset', origin => {
+    const scroller = document.createElement('div');
+    const extent = document.createElement('div');
+    scroller.getBoundingClientRect = () => ({ left: 200, width: 1000 }) as DOMRect;
+    extent.getBoundingClientRect = () => ({ left: 200 + origin + (Number.parseFloat(extent.style.left) || 0), width: 970 }) as DOMRect;
+    centerFlowChatExtent(scroller, extent);
+    expect(extent.getBoundingClientRect().left + 970 / 2).toBe(700);
+    centerFlowChatExtent(scroller, extent);
+    expect(extent.getBoundingClientRect().left + 970 / 2).toBe(700);
+    // Returning to normal flow restores the leading gutter in WebKit.
+    extent.getBoundingClientRect = () => ({ left: 215 + (Number.parseFloat(extent.style.left) || 0), width: 970 }) as DOMRect;
+    centerFlowChatExtent(scroller, extent);
+    expect(extent.getBoundingClientRect().left + 970 / 2).toBe(700);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.ts b/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.ts
index c5f2729d3c..cf94b58d3d 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatViewportGeometry.ts
@@ -1,3 +1,17 @@
+import { readFlowChatScrollTop } from './flowChatScrollCoordinates';
+
+/** WebKit omits the leading stable scrollbar gutter from a reverse flex
+ * child's origin. Centre the actual extent on the panel axis in either layout;
+ * do not infer gutter width from clientWidth (WebKit reports only one gutter). */
+export function centerFlowChatExtent(scroller: HTMLElement, extent: HTMLElement): void {
+  const viewport = scroller.getBoundingClientRect();
+  const content = extent.getBoundingClientRect();
+  if (viewport.width <= 0 || content.width <= 0) return;
+  const correction = viewport.left + (viewport.width - content.width) / 2 - content.left;
+  if (Math.abs(correction) < 0.01) return;
+  const current = Number.parseFloat(extent.style.left) || 0;
+  extent.style.left = `${current + correction}px`;
+}
 /** One read phase for the consumers of a native transcript scroll event. */
 export interface FlowChatViewportGeometry {
   scroller: HTMLElement;
@@ -20,7 +34,7 @@ export function readFlowChatViewportGeometry(scroller: HTMLElement): FlowChatVie
   const rect = scroller.getBoundingClientRect();
   return {
     scroller, top: rect.top, bottom: rect.bottom,
-    scrollTop: scroller.scrollTop, height: scroller.clientHeight,
+    scrollTop: readFlowChatScrollTop(scroller), height: scroller.clientHeight,
     rows: Array.from(scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper')).map(element => {
       const bounds = element.getBoundingClientRect();
       return { element, key: element.dataset.virtualItemKey, turnId: element.dataset.turnId ?? null,
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.measurement.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.measurement.test.tsx
index 7f36efac6a..99e36c8ecb 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.measurement.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.measurement.test.tsx
@@ -16,6 +16,10 @@ afterEach(() => { vi.restoreAllMocks(); vi.unstubAllGlobals(); activateSurface('
 // synchronous resizeItem notifications, not native WebView rendering.
 it('places once through real measurement notifications and remains idle after deactivation', async () => {
   activateSurface('local');
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+  });
   vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} });
   vi.stubGlobal('requestAnimationFrame', vi.fn().mockReturnValue(1));
   vi.stubGlobal('cancelAnimationFrame', vi.fn());
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 e4e3f9a1c0..933ebd1281 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
@@ -21,6 +21,7 @@ describe('desktop follow ownership and lifecycle (supplied geometry, not visual
   let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
   let normalTarget: number, floor: number | null, sentTop: number, output: boolean, renderable: boolean;
   let cancelledPlacements: number;
+  let layoutRevision: number;
   let duringPlacement: (() => void) | undefined;
   let props: { session: string; active: boolean; suspended: boolean; opening: boolean; count: number; startAtTail: boolean; streaming: boolean };
   let reader: FlowChatReaderState;
@@ -36,6 +37,8 @@ describe('desktop follow ownership and lifecycle (supplied geometry, not visual
       scrollerRef: ref, viewportOwner: owner, viewportId: 1,
       isOpeningViewport: () => props.opening, onViewportOffset: value => readbacks.push(value),
       readLayoutTarget: () => Math.max(normalTarget, floor ?? 0),
+      readLayoutRevision: () => String(layoutRevision),
+      onLayoutReflow: () => { floor = null; },
       placeSubmittedMessage: intent => {
         if (!renderable) return null;
         floor = sentTop;
@@ -68,7 +71,7 @@ describe('desktop follow ownership and lifecycle (supplied geometry, not visual
     host = document.createElement('div'); scroller = document.createElement('div');
     document.body.append(host, scroller); root = createRoot(host);
     normalTarget = 1000; floor = null; sentTop = 1400; output = false; renderable = true;
-    cancelledPlacements = 0;
+    cancelledPlacements = 0; layoutRevision = 0;
     duringPlacement = undefined;
     props = { session: 'session', active: true, suspended: false, opening: false, count: 2, startAtTail: true, streaming: true };
     reader = new FlowChatReaderState();
@@ -91,6 +94,67 @@ describe('desktop follow ownership and lifecycle (supplied geometry, not visual
     expect(frames.size).toBe(0); expect(controller.isFollowingOutputNow()).toBe(true);
     normalTarget = 1250; signal(); expect(scroller.scrollTop).toBe(1250);
   });
+  it('repairs measured history above the viewport immediately without easing or losing stream lag', () => {
+    render(); settle();
+    normalTarget += 200;
+    signal(); tick();
+    const before = scroller.scrollTop;
+    const lag = controller.getFollowTargetScrollTop()! - before;
+    expect(lag).toBeGreaterThan(0);
+    normalTarget -= 300;
+    act(() => { expect(controller.shiftLayout(-300)).toBe(true); });
+    expect(scroller.scrollTop).toBe(before - 300);
+    expect(controller.getFollowTargetScrollTop()! - scroller.scrollTop).toBeCloseTo(lag);
+    signal(); settle();
+    expect(scroller.scrollTop).toBe(900);
+    normalTarget += 450;
+    act(() => { expect(controller.shiftLayout(450)).toBe(true); });
+    expect(scroller.scrollTop).toBe(1350);
+    signal(); settle();
+    expect(scroller.scrollTop).toBe(1350);
+  });
+  it('translates a reflow once across a native clamp and preserves only genuine output lag', () => {
+    let actual = 0;
+    Object.defineProperty(scroller, 'scrollTop', {
+      configurable: true,
+      get: () => Math.min(actual, scroller.scrollHeight - scroller.clientHeight),
+      set: value => { actual = Math.max(0, Math.min(value, scroller.scrollHeight - scroller.clientHeight)); },
+    });
+    render(); settle();
+    normalTarget = 1400; signal(); tick();
+    const before = scroller.scrollTop;
+    const lag = controller.getFollowTargetScrollTop()! - before;
+    floor = 1400; normalTarget = 1000; layoutRevision++;
+    signal(); // Releasing the floor clamps the browser before the registered write.
+    expect(scroller.scrollTop).toBeCloseTo(before - 400);
+    expect(controller.getFollowTargetScrollTop()! - scroller.scrollTop).toBeCloseTo(lag);
+    settle(); expect(scroller.scrollTop).toBe(1000);
+    floor = 1000; normalTarget = 600; layoutRevision++;
+    signal();
+    expect(scroller.scrollTop).toBe(600);
+    settle(); expect(scroller.scrollTop).toBe(600);
+  });
+  it('does not release layout space while another owner is navigating', () => {
+    render(); settle();
+    act(() => owner.claim('one-shot-navigation'));
+    floor = 1000; normalTarget = 600; layoutRevision++;
+    signal();
+    expect(floor).toBe(1000);
+    expect(scroller.scrollTop).toBe(1000);
+    act(() => owner.release('one-shot-navigation'));
+    act(() => owner.claim('follow-output'));
+    signal();
+    expect(floor).toBeNull(); expect(scroller.scrollTop).toBe(600);
+  });
+  it('does not use a layout correction to take ownership from a reader or navigation', () => {
+    render(); settle();
+    act(() => owner.claim('one-shot-navigation'));
+    expect(controller.shiftLayout(200)).toBe(false);
+    expect(scroller.scrollTop).toBe(1000);
+    depart();
+    expect(controller.shiftLayout(200)).toBe(false);
+    expect(controller.getFollowTargetScrollTop()).toBeNull();
+  });
   it('places a submitted user message once, waits at top until output crosses the reading line, then eases monotonically', () => {
     render(); submit(); expect(scroller.scrollTop).toBe(1400);
     output = true; normalTarget = 1350; signal(); settle();
@@ -206,7 +270,7 @@ describe('desktop follow ownership and lifecycle (supplied geometry, not visual
   });
   it('releases a cancelled submission before its row has rendered', async () => {
     render(); renderable = false; submit();
-    cancelledPlacements = 0;
+    cancelledPlacements = 0; layoutRevision = 0;
     const intent = claimSubmittedMessageScrollIntent(props.session, 1, true)!;
     await act(async () => {
       finishSubmittedMessageScrollIntent(intent);
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 5624906018..8a2dce76bd 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatFollowOutput.ts
@@ -1,3 +1,4 @@
+import { readFlowChatScrollTop } from './flowChatScrollCoordinates';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
 import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
 import {
@@ -14,6 +15,8 @@ export type FollowOutputExitReason = 'session-changed' | 'viewport-inactive' | '
 export interface ViewportResizeInput { viewportHeightDeltaPx: number; wasAtTail: boolean }
 
 interface Options {
+  /** History's native scroll origin already holds the tail through reflow. */
+  nativeEndOrigin?: boolean;
   activeSessionId?: string;
   virtualItemCount: number;
   isStreaming: boolean;
@@ -23,6 +26,10 @@ interface Options {
   scrollerRef: RefObject<HTMLElement | null>;
   /** Refresh layout geometry once per layout signal; frames reuse this result. */
   readLayoutTarget: () => number;
+  /** Actual reading-column geometry, including CSS-only drag previews. */
+  readLayoutRevision?: () => string;
+  /** Release a previous wrapping-dependent floor before resolving a reflow. */
+  onLayoutReflow?: () => void;
   /** Returns the measured top placement, or null while materializing the row. */
   placeSubmittedMessage: (intent: SubmittedMessageScrollIntent) => number | null;
   hasRenderedOutput: (turnId: string) => boolean;
@@ -49,6 +56,7 @@ export function useFlowChatFollowOutput(options: Options) {
   const placingSubmission = useRef(false);
   const submittedTurn = useRef<string | null>(null);
   const target = useRef(0);
+  const layoutRevision = useRef<string>();
   const frame = useRef<number | null>(null);
   const lastFrameAt = useRef<number | null>(null);
   const downward = useRef<{ position: number } | null>(null);
@@ -106,11 +114,12 @@ export function useFlowChatFollowOutput(options: Options) {
       lastFrameAt.current = null;
       return;
     }
-    const from = scroller.scrollTop;
+    const from = readFlowChatScrollTop(scroller);
     // The browser may already have clamped a shrinking layout before its
     // ResizeObserver is delivered. Never animate toward an unreachable cache
     // entry, or leave an idle RAF chasing it until the next token arrives.
-    const reachableTarget = Math.min(target.current, Math.max(0, scroller.scrollHeight - scroller.clientHeight));
+    const reachableTarget = o.nativeEndOrigin ? o.readLayoutTarget()
+      : Math.min(target.current, Math.max(0, scroller.scrollHeight - scroller.clientHeight));
     const elapsed = lastFrameAt.current === null ? 16 : Math.min(64, now - lastFrameAt.current);
     lastFrameAt.current = now;
     const opening = o.isOpeningViewport();
@@ -120,11 +129,11 @@ export function useFlowChatFollowOutput(options: Options) {
     if (Math.abs(reachableTarget - from) > EPSILON) {
       // Refusal leaves the target intact. A short live gesture can outlast the
       // reader's deliberate arrival at bottom; it still outranks every write.
-      if (o.viewportOwner.write({ owner: 'follow-output', topPx: next })) o.onViewportOffset?.(scroller.scrollTop);
+      if (o.viewportOwner.write({ owner: 'follow-output', topPx: next })) o.onViewportOffset?.(readFlowChatScrollTop(scroller));
     } else if (from !== reachableTarget) {
-      if (o.viewportOwner.write({ owner: 'follow-output', topPx: reachableTarget })) o.onViewportOffset?.(scroller.scrollTop);
+      if (o.viewportOwner.write({ owner: 'follow-output', topPx: reachableTarget })) o.onViewportOffset?.(readFlowChatScrollTop(scroller));
     }
-    if (Math.abs(scroller.scrollTop - reachableTarget) > EPSILON) wake();
+    if (Math.abs(readFlowChatScrollTop(scroller) - reachableTarget) > EPSILON) wake();
     else lastFrameAt.current = null;
   };
 
@@ -141,14 +150,16 @@ export function useFlowChatFollowOutput(options: Options) {
     setFollowing(true);
     phase.current = 'following';
     target.current = o.readLayoutTarget();
+    layoutRevision.current = o.readLayoutRevision?.();
     const scroller = o.scrollerRef.current!;
     const animate = reason === 'jump-to-latest' && resolveAnimatedJumpBehavior({
-      fromPx: scroller.scrollTop, targetPx: target.current, clientHeight: scroller.clientHeight,
+      fromPx: readFlowChatScrollTop(scroller), targetPx: target.current, clientHeight: scroller.clientHeight,
     }) === 'smooth';
-    if (!animate && reason !== 'reader-at-bottom') {
-      if (o.viewportOwner.write({ owner: 'follow-output', topPx: target.current })) o.onViewportOffset?.(scroller.scrollTop);
+    if (!animate && reason !== 'reader-at-bottom'
+      && !(o.nativeEndOrigin && reason === 'session-open')) {
+      if (o.viewportOwner.write({ owner: 'follow-output', topPx: target.current })) o.onViewportOffset?.(readFlowChatScrollTop(scroller));
     }
-    wake();
+    if (!o.nativeEndOrigin || reason === 'jump-to-latest') wake();
   }, [available, discardPending, setFollowing, wake]);
 
   const trySubmission = useCallback(() => {
@@ -220,10 +231,27 @@ export function useFlowChatFollowOutput(options: Options) {
     }
   }, [available, exitFollowOutput, setFollowing, stop]);
 
-  const scheduleFollowToLatest = useCallback(() => {
+  const scheduleFollowToLatest = useCallback((layoutOnly = false) => {
     if (!available()) return;
     if (trySubmission()) return;
     const o = current.current;
+    if (o.nativeEndOrigin) {
+      // Earlier history changes neither the native offset nor the tail. Keep
+      // navigation's target current without manufacturing a scroll correction.
+      target.current = o.readLayoutTarget();
+      return;
+    }
+    const revision = o.readLayoutRevision?.();
+    const reflow = layoutOnly || (layoutRevision.current !== undefined && revision !== layoutRevision.current);
+    // Do not release a geometric floor underneath a higher-priority writer.
+    // Keep the old revision so the next permitted layout sample can place it.
+    if (reflow && following.current && o.viewportOwner.currentOwner() !== 'follow-output') return;
+    layoutRevision.current = revision;
+    // Releasing the old extent can synchronously clamp scrollTop. Capture the
+    // previous coordinate first; translating the clamped value applies the
+    // same shrink twice and paints precisely the jump-then-ease-back failure.
+    const beforeLayout = readFlowChatScrollTop(o.scrollerRef.current!);
+    if (reflow && following.current) o.onLayoutReflow?.();
     const next = o.readLayoutTarget();
     if (!following.current) return; // Growth can never take control from a reader.
     if (phase.current === 'awaiting-output') {
@@ -231,14 +259,40 @@ export function useFlowChatFollowOutput(options: Options) {
       if (next <= target.current + EPSILON) return;
       phase.current = 'following';
     }
+    const previousTarget = target.current;
     target.current = next;
-    if (o.isOpeningViewport()) {
-      if (o.viewportOwner.write({ owner: 'follow-output', topPx: next })) o.onViewportOffset?.(o.scrollerRef.current!.scrollTop);
+    if (reflow || o.isOpeningViewport()) {
+      // Reflow is a single layout placement. Animating it exposes the old
+      // coordinates first and then drags already-visible content back.
+      // Translate both coordinates so any genuine output lag remains intact.
+      const topPx = o.isOpeningViewport() ? next : Math.max(0, beforeLayout + next - previousTarget);
+      if (o.viewportOwner.write({ owner: 'follow-output', topPx })) o.onViewportOffset?.(readFlowChatScrollTop(o.scrollerRef.current!));
     }
     wake();
   }, [available, trySubmission, wake]);
   refresh.current = scheduleFollowToLatest;
 
+  // A measured row wholly above the viewport moved the coordinate system,
+  // not the output being followed. Translate both ends of the ongoing ease
+  // before paint so any remaining stream lag stays exactly the same.
+  const shiftLayout = useCallback((byPx: number): boolean => {
+    const o = current.current;
+    if (o.nativeEndOrigin) return false;
+    if (!following.current || !available() || o.viewportOwner.currentOwner() !== 'follow-output') return false;
+    const scroller = o.scrollerRef.current!;
+    const next = Math.max(0, readFlowChatScrollTop(scroller) + byPx);
+    // A short visible Turn keeps leading space beyond its natural content end.
+    // Its predecessors already reflowed in the DOM, but that floor may still
+    // describe the previous layout. Resolve it before a positive correction
+    // can be clamped; easing the missing distance later would expose the shift.
+    if (next > scroller.scrollHeight - scroller.clientHeight) o.readLayoutTarget();
+    if (!o.viewportOwner.write({ owner: 'follow-output', topPx: next })) return false;
+    target.current = Math.max(0, target.current + byPx);
+    // The virtualizer publishes the actual offset after updating its size
+    // cache. Publishing here would capture an anchor against the old sizes.
+    return true;
+  }, [available]);
+
   const handleScroll = useCallback(() => {
     const o = current.current;
     const demand = downward.current;
@@ -248,7 +302,7 @@ export function useFlowChatFollowOutput(options: Options) {
     // A passive layout/scroll event is not downward reader travel.
     if (position < demand.position - 0.5) { downward.current = null; return; }
     if (position > demand.position + 0.5
-      && Math.abs(scroller.scrollTop - o.readLayoutTarget()) <= 2) {
+      && Math.abs(readFlowChatScrollTop(scroller) - o.readLayoutTarget()) <= 2) {
       enterFollowOutput('reader-at-bottom');
     }
   }, [available, enterFollowOutput]);
@@ -258,7 +312,7 @@ export function useFlowChatFollowOutput(options: Options) {
     if (direction === 'after') {
       downward.current = { position: o.viewportOwner.readReaderScrollPosition() };
       const scroller = o.scrollerRef.current;
-      if (scroller && Math.abs(scroller.scrollTop - o.readLayoutTarget()) <= 2) {
+      if (scroller && Math.abs(readFlowChatScrollTop(scroller) - o.readLayoutTarget()) <= 2) {
         enterFollowOutput('reader-at-bottom');
       }
     }
@@ -307,13 +361,14 @@ export function useFlowChatFollowOutput(options: Options) {
   // Completion changes no policy or target. The final rendered layout wakes
   // the same follower, including typewriter frames delivered after completion.
   return {
-    isFollowingOutput, enterFollowOutput, exitFollowOutput, scheduleFollowToLatest,
+    isFollowingOutput, enterFollowOutput, exitFollowOutput, scheduleFollowToLatest, shiftLayout,
     isFollowingOutputNow: useCallback(() => following.current, []),
-    isFollowCorrectingViewport: useCallback(() => following.current, []),
-    getFollowTargetScrollTop: useCallback(() => following.current ? target.current : null, []),
+    isFollowCorrectingViewport: useCallback(() => following.current && !current.current.nativeEndOrigin, []),
+    getFollowTargetScrollTop: useCallback(() => following.current
+      ? current.current.nativeEndOrigin ? current.current.readLayoutTarget() : target.current : null, []),
     handleUserScrollIntent, handleScroll,
     handleTurnsRolledBack: useCallback(() => enterFollowOutput('turns-rolled-back'), [enterFollowOutput]),
     // Reading keeps its top anchor; following recomputes the reading line.
-    handleViewportResize: useCallback((_input: ViewportResizeInput) => scheduleFollowToLatest(), [scheduleFollowToLatest]),
+    handleViewportResize: useCallback((_input: ViewportResizeInput) => scheduleFollowToLatest(true), [scheduleFollowToLatest]),
   };
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.test.tsx
index df427cd1f5..1ea867a9b6 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.test.tsx
@@ -17,7 +17,7 @@ const item = (id: string, kind = 'content') => ({ type: 'model-round', turnId: '
 const cleanups: Array<() => void> = [];
 afterEach(() => { cleanups.splice(0).forEach(cleanup => cleanup()); });
 
-function setup() {
+function setup(readReaderScrollPosition?: () => number) {
   const host = document.createElement('div');
   const scroller = document.createElement('div');
   const extent = document.createElement('div');
@@ -35,7 +35,8 @@ function setup() {
   let rebases = 0;
   function Test({ scope }: { scope: string }) {
     api = useFlowChatLeadingExtent({ scope, items, virtualizer: { getItemBounds: index => bounds[index] ?? null },
-      scrollerRef: { current: scroller }, extentRef: { current: extent }, onAnchorRebased: () => { rebases++; } });
+      scrollerRef: { current: scroller }, extentRef: { current: extent }, readReaderScrollPosition,
+      onAnchorRebased: () => { rebases++; } });
     return null;
   }
   const render = (scope = 'session:turn') => act(() => root.render(<Test scope={scope} />));
@@ -50,6 +51,20 @@ function setup() {
 }
 
 describe('desktop leading extent lifecycle', () => {
+  it('rejects a stale leading row when native reader travel precedes its scroll listener', () => {
+    let readerPosition = 2200;
+    const view = setup(() => readerPosition);
+    view.scroller.scrollTop = 2200;
+    view.api.capture(2200);
+    expect(view.api.snapshot()?.key).toBe('block:member');
+    // Registered displacements do not change this reader-travel coordinate.
+    view.scroller.scrollTop = 2600;
+    expect(view.api.snapshot()?.key).toBe('block:member');
+    readerPosition += 300;
+    expect(view.api.snapshot()).toBeNull();
+    view.api.capture(2500);
+    expect(view.api.snapshot()?.key).toBe('block:member');
+  });
   it('reuses the current scroll read phase without measuring rows again', () => {
     const view = setup();
     const row = document.createElement('div');
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.ts
index e8df02b5e7..71ee1de4f1 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatLeadingExtent.ts
@@ -18,23 +18,29 @@ type Anchor = {
   measurement: Measurement;
   group?: { key: string; measurement: Measurement };
 };
-type State = { scope: string; anchor: Anchor | null; turnFloor: number; measured: Map<string, Measurement> };
+type State = { scope: string; anchor: Anchor | null; readerPosition: number | null; turnFloor: number; measured: Map<string, Measurement> };
 const boundsOf = (measurement: Measurement) => measurement.mounted ?? measurement.cached;
-const newState = (scope: string): State => ({ scope, anchor: null, turnFloor: 0, measured: new Map() });
+const newState = (scope: string): State => ({ scope, anchor: null, readerPosition: null, turnFloor: 0, measured: new Map() });
 
 /** Layout only. The follow/reader owners remain the only viewport writers. */
 export function useFlowChatLeadingExtent(options: {
+  enabled?: boolean;
   scope: string;
   items: readonly VirtualItem[];
   virtualizer: Virtualizer;
   scrollerRef: RefObject<HTMLElement | null>;
   extentRef: RefObject<HTMLElement | null>;
   onAnchorRebased: () => void;
+  readReaderScrollPosition?: () => number;
 }) {
   const { items, virtualizer, scrollerRef, extentRef, scope } = options;
+  const enabled = useRef(options.enabled !== false);
+  enabled.current = options.enabled !== false;
   const state = useRef<State | null>(null);
   const onAnchorRebased = useRef(options.onAnchorRebased);
   onAnchorRebased.current = options.onAnchorRebased;
+  const readReaderScrollPosition = useRef(options.readReaderScrollPosition);
+  readReaderScrollPosition.current = options.readReaderScrollPosition;
   const indexes = useMemo(() => new Map(items.map((item, index) => [getVirtualItemStableKey(item), index])), [items]);
   const groupHeaders = useMemo(() => {
     const headers = new Map<string, number>();
@@ -51,6 +57,7 @@ export function useFlowChatLeadingExtent(options: {
     const extent = extentRef.current;
     const scroller = scrollerRef.current;
     if (!extent || !scroller?.clientHeight) return;
+    if (!enabled.current) { extent.style.minHeight = ''; return; }
     const value = floor === null ? '' : `${floor + scroller.clientHeight}px`;
     if (extent.style.minHeight !== value) extent.style.minHeight = value;
   }, [extentRef, scrollerRef]);
@@ -88,6 +95,7 @@ export function useFlowChatLeadingExtent(options: {
   }, [groupHeaders, items, measurementAt]);
 
   const capture = useCallback((offset: number, exact = false, sample?: FlowChatViewportGeometry) => {
+    if (!enabled.current) return;
     const scroller = scrollerRef.current;
     if (!scroller?.clientHeight || !items.length) return;
     const s = current();
@@ -116,12 +124,14 @@ export function useFlowChatLeadingExtent(options: {
     const bounds = boundsOf(measurement);
     if (bounds.startPx >= offset + scroller.clientHeight) return;
     s.anchor = { key, scrollTopPx: offset, heightPx: bounds.endPx - bounds.startPx, measurement, group: groupAt(index) };
+    s.readerPosition = readReaderScrollPosition.current?.() ?? null;
     // Install before any later shrink, so native clamping cannot paint a frame
     // at the shortened tail before a ResizeObserver could repair it.
     install(Math.max(s.turnFloor, offset));
   }, [current, groupAt, indexes, install, items, measureLayout, measurementAt, scrollerRef, virtualizer]);
 
   const refresh = useCallback((turnFloor: number | null) => {
+    if (!enabled.current) { install(null); return; }
     const s = current();
     measureLayout();
     s.turnFloor = turnFloor ?? 0;
@@ -168,11 +178,37 @@ export function useFlowChatLeadingExtent(options: {
     install(floor);
   }, [current, groupAt, indexes, install, items, measureLayout, measurementAt]);
 
+  // An insertion inside a short Turn can leave its user message stationary
+  // while moving the visible output. Carry that output's painted position into
+  // this same semantic extent before a viewport write can clamp to the old floor.
+  const restore = useCallback((anchor: { key: string; offsetPx: number }) => {
+    if (!enabled.current) return;
+    const index = indexes.get(anchor.key);
+    if (index === undefined) return;
+    measureLayout();
+    const measurement = measurementAt(index);
+    if (!measurement) return;
+    const s = current();
+    const bounds = boundsOf(measurement);
+    const offset = Math.max(0, bounds.startPx - anchor.offsetPx);
+    s.anchor = { key: anchor.key, scrollTopPx: offset, measurement,
+      heightPx: bounds.endPx - bounds.startPx, group: groupAt(index) };
+    s.readerPosition = readReaderScrollPosition.current?.() ?? null;
+    install(Math.max(s.turnFloor, offset));
+  }, [current, groupAt, indexes, install, measureLayout, measurementAt]);
+
   // Structural transactions use the same leading edge. Choosing a surviving
   // successor instead would cancel the upward movement of content after a fold.
   const snapshot = useCallback(() => {
-    const anchor = current().anchor;
+    if (!enabled.current) return null;
+    const s = current();
+    const anchor = s.anchor;
     if (!anchor) return null;
+    // A native scroll can synchronously render a new window before the list's
+    // scroll listener captures its new reading edge. Never reuse the old row
+    // in that interval. Registered layout/follow shifts are already subtracted.
+    if (s.readerPosition !== null && readReaderScrollPosition.current
+      && Math.abs(readReaderScrollPosition.current() - s.readerPosition) > 0.5) return null;
     if (indexes.has(anchor.key)) return { key: anchor.key, offset: boundsOf(anchor.measurement).startPx - anchor.scrollTopPx };
     if (anchor.group && indexes.has(anchor.group.key)) return {
       key: anchor.group.key,
@@ -180,5 +216,8 @@ export function useFlowChatLeadingExtent(options: {
     };
     return null;
   }, [current, indexes]);
-  return { capture, refresh, snapshot };
+  // Reflow while following owns a new reading-line placement. The old floor
+  // protects a deliberate reading position/collapse, not the old line wrapping.
+  const releaseForReflow = useCallback(() => { current().anchor = null; }, [current]);
+  return { capture, refresh, restore, snapshot, releaseForReflow };
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.test.tsx
index 3b6b919844..9fe489dd38 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.test.tsx
@@ -3,10 +3,45 @@ import React, { act, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { describe, expect, it } from 'vitest';
 import { useFlowChatViewportOwner, type FlowChatViewportOwnerApi } from './useFlowChatViewportOwner';
+import { readFlowChatScrollTop } from './flowChatScrollCoordinates';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 describe('viewport reader travel', () => {
+  it('keeps history extent growth out of reader demand and converts existing navigation offsets', async () => {
+    const host = document.createElement('div');
+    const scroller = document.createElement('div');
+    scroller.dataset.flowchatScrollOrigin = 'end';
+    let height = 1600;
+    Object.defineProperties(scroller, {
+      clientHeight: { get: () => 600 },
+      scrollHeight: { get: () => height },
+    });
+    const root = createRoot(host);
+    let owner!: FlowChatViewportOwnerApi;
+    function Harness() {
+      owner = useFlowChatViewportOwner(useRef(scroller));
+      return null;
+    }
+    try {
+      await act(async () => root.render(<Harness />));
+      expect(readFlowChatScrollTop(scroller)).toBe(1000);
+      height += 3000; // Older content extends above the bottom origin.
+      expect(owner.readReaderScrollPosition()).toBe(0);
+      expect(readFlowChatScrollTop(scroller)).toBe(4000);
+      owner.write({ owner: 'one-shot-navigation', topPx: 1000 });
+      expect(scroller.scrollTop).toBe(-3000);
+      expect(readFlowChatScrollTop(scroller)).toBe(1000);
+      expect(owner.readReaderScrollPosition()).toBe(0);
+      scroller.scrollTop -= 80;
+      expect(owner.readReaderScrollPosition()).toBe(-80);
+      height += 1000;
+      expect(owner.readReaderScrollPosition()).toBe(-80);
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+
   it('removes registered writes and shifts but keeps intervening reader travel', async () => {
     const host = document.createElement('div');
     const scroller = document.createElement('div');
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts
index 38f2e2bb97..3195873fe2 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatViewportOwner.ts
@@ -1,3 +1,4 @@
+import { toFlowChatNativeScrollTop } from './flowChatScrollCoordinates';
 /**
  * The register, wired to a live scroller.
  *
@@ -116,13 +117,13 @@ export function useFlowChatViewportOwner(
     );
     if (!granted) return false;
     if (behavior === 'smooth') {
-      scroller.scrollTo({ top: request.topPx, behavior });
+      scroller.scrollTo({ top: toFlowChatNativeScrollTop(scroller, request.topPx), behavior });
     } 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.
       const before = scroller.scrollTop;
-      scroller.scrollTop = request.topPx;
+      scroller.scrollTop = toFlowChatNativeScrollTop(scroller, request.topPx);
       writtenTravelRef.current += scroller.scrollTop - before;
     }
     return true;
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
index 29d8cc6aea..0fa438d84e 100644
--- 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
@@ -96,6 +96,10 @@ describe('useFlowChatVirtualizer aim', () => {
   }
 
   beforeEach(() => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
     vi.stubGlobal('ResizeObserver', class {
       observe() {}
       unobserve() {}
@@ -149,6 +153,7 @@ describe('useFlowChatVirtualizer aim', () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
 
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.cascade.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.cascade.test.tsx
index c7cba580fe..d196c096c5 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.cascade.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.cascade.test.tsx
@@ -93,6 +93,10 @@ describe('virtual measurement cascades', () => {
       return frameId;
     });
     vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
     vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} });
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
       return this.hasAttribute('data-scroller') ? 500 : this.hasAttribute('data-virtual-index') ? height : 0;
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.follow.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.follow.test.tsx
new file mode 100644
index 0000000000..bf2d904858
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.follow.test.tsx
@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+import React, { act, useRef } 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';
+import { useFlowChatFollowOutput } from './useFlowChatFollowOutput';
+import { useFlowChatViewportOwner } from './useFlowChatViewportOwner';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('measured history with real virtualization and follow (supplied DOM geometry)', () => {
+  let host: HTMLDivElement, root: Root, api: FlowChatVirtualizer;
+  let follow: ReturnType<typeof useFlowChatFollowOutput>;
+  let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
+  let opening: boolean;
+  const heights = new Map<number, number>();
+  const items = Array.from({ length: 34 }, (_, index) => index);
+  function Harness() {
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const headerRef = useRef<HTMLDivElement>(null);
+    const followRef = useRef<typeof follow>();
+    const owner = useFlowChatViewportOwner(scrollerRef);
+    api = useFlowChatVirtualizer({
+      items, scrollerRef, headerRef, getItemKey: String,
+      estimateItemHeightPx: () => 80, startAtTailOnMount: true,
+      scrollPaddingStartPx: 0, writeViewport: owner.write,
+      shiftViewport: delta => owner.shift(delta) || followRef.current?.shiftLayout(delta) === true,
+      reconcileOpeningMeasurement: () => {
+        if (!opening || !followRef.current?.isFollowingOutputNow()) return false;
+        followRef.current.scheduleFollowToLatest();
+        return true;
+      },
+    });
+    follow = useFlowChatFollowOutput({
+      activeSessionId: 'peer-session', virtualItemCount: items.length,
+      isViewportActive: true, isStreaming: false, startAtTailOnMount: true,
+      scrollerRef, viewportOwner: owner,
+      isOpeningViewport: () => opening,
+      readLayoutTarget: () => Math.max(0, (scrollerRef.current?.scrollHeight ?? 0) - 500),
+      onViewportOffset: offset => api.syncViewportOffset(offset),
+      placeSubmittedMessage: () => null, hasRenderedOutput: () => false,
+      cancelPendingPlacement: () => {}, cancelNavigation: api.cancelAim,
+    });
+    followRef.current = follow;
+    return <div ref={scrollerRef} data-scroller>
+      <div ref={headerRef} />
+      <div data-items style={{ paddingTop: api.paddingTopPx, paddingBottom: api.paddingBottomPx }}>
+        {api.rows.map(row => <div key={row.key} data-virtual-index={row.index} ref={api.measureRowElement} />)}
+      </div>
+    </div>;
+  }
+  const tick = () => {
+    now += 16;
+    const callbacks = [...frames.values()]; frames.clear();
+    act(() => callbacks.forEach(callback => callback(now)));
+  };
+  beforeEach(() => {
+    heights.clear(); frames = new Map(); frameId = 0; now = 0; opening = true;
+    vi.useFakeTimers();
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      frames.set(++frameId, callback); return frameId;
+    });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
+    vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} });
+    vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
+      if (this.hasAttribute('data-scroller')) return 500;
+      return this.hasAttribute('data-virtual-index') ? heights.get(Number(this.dataset.virtualIndex)) ?? 80 : 0;
+    });
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(800);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(500);
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+      const content = this.querySelector<HTMLElement>('[data-items]');
+      return content ? Number.parseFloat(content.style.paddingTop || '0')
+        + Number.parseFloat(content.style.paddingBottom || '0')
+        + [...content.children].reduce((total, row) => total + (row as HTMLElement).offsetHeight, 0) : 0;
+    });
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host);
+    act(() => root.render(<Harness />));
+    for (let i = 0; i < 8; i++) tick();
+    opening = false;
+  });
+  afterEach(() => {
+    act(() => root.unmount()); host.remove();
+    vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers();
+  });
+
+  it.each([-50, 120])('keeps the visible tail still when an older row measures %+dpx after reveal', delta => {
+    const scroller = host.querySelector<HTMLElement>('[data-scroller]')!;
+    const tail = host.querySelector('[data-virtual-index="33"]');
+    const previousOffset = scroller.scrollTop;
+    const previousTailTop = api.getItemBounds(33)!.startPx - previousOffset;
+    const row = api.rows.find(candidate => candidate.endPx < previousOffset)!;
+    expect(row).toBeDefined();
+    heights.set(row.index, 80 + delta);
+    act(() => api.measureRenderedItems());
+    // Before any RAF/native scroll/resize notification, history displacement
+    // must already be repaired. Easing it paints a jump and then a slide back.
+    expect(api.getItemBounds(33)!.startPx - scroller.scrollTop).toBe(previousTailTop);
+    expect(scroller.scrollTop).toBe(previousOffset + delta);
+    expect(host.querySelector('[data-virtual-index="33"]')).toBe(tail);
+    act(() => follow.scheduleFollowToLatest());
+    for (let i = 0; i < 8; i++) tick();
+    expect(scroller.scrollTop).toBe(previousOffset + delta);
+    act(() => {
+      scroller.dispatchEvent(new Event('scroll'));
+      vi.advanceTimersByTime(200);
+    });
+    expect(host.querySelector('[data-virtual-index="33"]')).toBe(tail);
+  });
+
+  it('still eases actual output growth in the visible last row', () => {
+    const scroller = host.querySelector<HTMLElement>('[data-scroller]')!;
+    const before = scroller.scrollTop;
+    heights.set(33, 180);
+    act(() => { api.measureRenderedItems(); follow.scheduleFollowToLatest(); });
+    expect(scroller.scrollTop).toBe(before);
+    tick();
+    expect(scroller.scrollTop).toBeGreaterThan(before);
+    expect(scroller.scrollTop).toBeLessThan(before + 100);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.initial-window.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.initial-window.test.tsx
index 3830e62dbd..5a2dd6d61e 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.initial-window.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.initial-window.test.tsx
@@ -70,6 +70,10 @@ describe('initial virtual window with the real virtualizer', () => {
     vi.useFakeTimers();
     vi.stubGlobal('requestAnimationFrame', vi.fn().mockReturnValue(1));
     vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
     vi.stubGlobal('ResizeObserver', class {
       observe() {}
       unobserve() {}
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
index 8f532a376e..dc54b1dcbb 100644
--- 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
@@ -70,17 +70,22 @@ describe('useFlowChatVirtualizer measurement', () => {
   /**
    * 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.
+   * Supply the fractional box and the separately rounded offsetHeight, as a
+   * browser does. The adapter must use the occupied box for virtual padding.
    */
   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 });
+    Object.defineProperty(element, 'offsetHeight', { configurable: true, value: Math.round(heightPx) });
+    element.getBoundingClientRect = () => ({ top: 0, bottom: heightPx, height: heightPx, width: 500 }) as DOMRect;
     scroller.appendChild(element);
   }
 
   beforeEach(() => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const height = this.offsetHeight;
+      return { top: 0, bottom: height, height, width: this.offsetWidth } as DOMRect;
+    });
     vi.stubGlobal('ResizeObserver', class {
       observe() {}
       unobserve() {}
@@ -107,6 +112,7 @@ describe('useFlowChatVirtualizer measurement', () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
 
@@ -144,6 +150,28 @@ describe('useFlowChatVirtualizer measurement', () => {
     ]);
   });
 
+  it('replaces normal-flow rows with their full fractional occupied height', () => {
+    [0, 1, 2].forEach(index => renderRow(index, 40.25));
+    expect(measureAndRead([1, 2])).toEqual([
+      { startPx: 40.25, endPx: 80.5 }, { startPx: 80.5, endPx: 120.75 },
+    ]);
+  });
+
+  it('keeps offscreen measured history as its reservation when the column width changes', () => {
+    renderRow(0, 340.25);
+    measureAndRead([1]);
+    scroller.querySelector('[data-virtual-index="0"]')!.remove();
+    for (const widthPx of [600, 800, 500]) {
+      act(() => root.render(<Harness scroller={scroller} header={header}
+        items={[{ key: 'a' }, { key: 'b' }, { key: 'c' }]} widthPx={widthPx}
+        onApi={next => { api = next; }} />));
+      expect(api.getItemBounds(1)?.startPx).toBe(340.25);
+    }
+    // A returning row is measured at its new width before it is displayed.
+    renderRow(0, 420.5);
+    expect(measureAndRead([1])[0]?.startPx).toBe(420.5);
+  });
+
   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.
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
index 7c53c5191e..e389d0c86d 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
@@ -1,36 +1,16 @@
 /**
- * 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.
+ * The virtualization boundary keeps public indexes chronological. Live output
+ * uses a top origin; native history traverses from the bottom so older pages
+ * extend the far end of the index space without moving visible tail content.
+ * Rows remain in normal DOM flow and measured sizes are keyed by identity.
  */
 
+import { flowChatScrollRange, readFlowChatScrollTop } from './flowChatScrollCoordinates';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, type RefObject } from 'react';
 import { flushSync } from 'react-dom';
 import {
   observeElementOffset as observeTanStackElementOffset,
   observeElementRect as observeTanStackElementRect,
-  measureElement as measureTanStackElement,
   Virtualizer,
   type Rect,
   type VirtualizerOptions,
@@ -197,6 +177,11 @@ export function isItemFullyAboveViewport(itemEndPx: number, scrollTopPx: number)
   return itemEndPx <= scrollTopPx;
 }
 
+/** Normal-flow padding must replace the exact occupied box, including fractions. */
+function measureRowHeight(element: HTMLElement, entry?: ResizeObserverEntry): number {
+  return entry?.borderBoxSize?.[0]?.blockSize ?? element.getBoundingClientRect().height;
+}
+
 /**
  * The measurement pass, which the published types keep to themselves.
  *
@@ -213,6 +198,9 @@ interface MeasuringVirtualizer {
 }
 
 export interface UseFlowChatVirtualizerOptions<T> {
+  /** Native history grows toward negative scrollTop; indexes start at its tail. */
+  endOrigin?: boolean;
+  footerRef?: RefObject<HTMLElement | null>;
   pinnedKeys?: ReadonlySet<string>;
   items: readonly T[];
   scrollerRef: RefObject<HTMLElement | null>;
@@ -225,6 +213,8 @@ export interface UseFlowChatVirtualizerOptions<T> {
    */
   headerRef: RefObject<HTMLElement | null>;
   getItemKey: (item: T) => string;
+  /** Historical presentation mounts every block of an admitted Turn together. */
+  getItemGroupKey?: (item: T) => string;
   estimateItemHeightPx: (item: T, context?: VirtualItemHeightEstimateContext) => number;
   /** Exact size for rows whose content was collected into another stable row. */
   getKnownItemHeightPx?: (item: T) => number | undefined;
@@ -271,6 +261,8 @@ export interface UseFlowChatVirtualizerOptions<T> {
   }) => boolean;
   /** Shift the viewport before a measurement changes row heights. */
   shiftViewport?: (byPx: number) => boolean;
+  /** Stable leading row while its earlier estimated rows finish measuring. */
+  getViewportAnchorKey?: () => string | null;
 }
 
 export interface FlowChatVirtualizer {
@@ -405,11 +397,14 @@ export function virtualWindowPaddingPx(
 }
 
 export function useFlowChatVirtualizer<T>({
-  items,
+  items: sourceItems,
+  endOrigin = false,
+  footerRef,
   pinnedKeys,
   scrollerRef,
   headerRef,
   getItemKey,
+  getItemGroupKey,
   estimateItemHeightPx,
   getKnownItemHeightPx,
   estimateContext,
@@ -421,9 +416,24 @@ export function useFlowChatVirtualizer<T>({
   scrollPaddingStartPx,
   writeViewport,
   shiftViewport = () => false,
+  getViewportAnchorKey,
 }: UseFlowChatVirtualizerOptions<T>): FlowChatVirtualizer {
+  const items = useMemo(() => endOrigin ? [...sourceItems].reverse() : sourceItems, [sourceItems, endOrigin]);
+  const groupIndexes = useMemo(() => {
+    const groups = new Map<string, number[]>();
+    if (getItemGroupKey) items.forEach((item, index) => {
+      const key = getItemGroupKey(item);
+      const indexes = groups.get(key);
+      if (indexes) indexes.push(index);
+      else groups.set(key, [index]);
+    });
+    return groups;
+  }, [items, getItemGroupKey]);
+  const endOriginRef = useRef(endOrigin);
+  endOriginRef.current = endOrigin;
   const itemsRef = useRef(items);
   itemsRef.current = items;
+  const toVirtualIndex = useCallback((index: number) => endOriginRef.current ? itemsRef.current.length - 1 - index : index, []);
   useLayoutEffect(() => {
     const scroller = scrollerRef.current;
     if (scroller && !scroller.hasAttribute('data-flowchat-virtual-viewport')) scroller.setAttribute('data-flowchat-virtual-viewport', '');
@@ -520,6 +530,7 @@ export function useFlowChatVirtualizer<T>({
     return next;
   }, [items, itemKeyOf, getItemKey]);
   itemKeysRef.current = itemKeyState.keys;
+  const keyIndexes = useMemo(() => new Map(itemKeyState.keys.map((key, index) => [key, index])), [itemKeyState.keys]);
   const estimateItemHeightRef = useRef(estimateItemHeightPx);
   estimateItemHeightRef.current = estimateItemHeightPx;
   const estimateContextRef = useRef(estimateContext);
@@ -531,15 +542,15 @@ export function useFlowChatVirtualizer<T>({
 
   const [contentStartPx, setContentStartPx] = useState(0);
   useEffect(() => {
-    const header = headerRef.current;
-    if (!header) return;
+    const originInset = endOrigin ? footerRef?.current : headerRef.current;
+    if (!originInset) return;
     const observer = new ResizeObserver(() => {
-      setContentStartPx(header.offsetHeight);
+      setContentStartPx(originInset.offsetHeight);
     });
-    observer.observe(header, { box: 'border-box' });
-    setContentStartPx(header.offsetHeight);
+    observer.observe(originInset, { box: 'border-box' });
+    setContentStartPx(originInset.offsetHeight);
     return () => observer.disconnect();
-  }, [headerRef]);
+  }, [endOrigin, footerRef, headerRef]);
 
   /*
    * Stable across renders on purpose. The virtualizer keys its measurement pass
@@ -548,16 +559,28 @@ export function useFlowChatVirtualizer<T>({
    * 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 reservedEstimatesRef = useRef(new Map<string, number>());
   const estimateSize = useCallback((index: number) => {
     const item = itemsRef.current[index];
-    return item === undefined ? 0 : estimateItemHeightRef.current(item, estimateContextRef.current);
+    if (item === undefined) return 0;
+    const key = itemKeysRef.current[index] ?? getItemKeyRef.current(item);
+    const reservations = reservedEstimatesRef.current;
+    let height = reservations.get(key);
+    if (height === undefined) {
+      height = estimateItemHeightRef.current(item, estimateContextRef.current);
+      reservations.set(key, height);
+    }
+    // Estimates are reservations in the current coordinate system. A new
+    // width may change a future measurement, but must not move unseen history
+    // before the visible anchor has even been laid out.
+    return height;
   }, []);
 
   const itemKeyRevision = itemKeyState.revision;
   const resolveItemKey = useCallback((index: number) => {
-    // Recreate the callback when estimate inputs change. TanStack uses the
-    // callback identity to invalidate its derived measurement positions while
-    // retaining DOM-measured sizes in its key cache.
+    // Recreate the key resolver when the projection changes. Existing size
+    // reservations survive estimate-context changes; mounted rows replace them
+    // through measurement in the same layout commit.
     void estimateContextRevision;
     void itemKeyRevision;
     const item = itemsRef.current[index];
@@ -566,6 +589,20 @@ export function useFlowChatVirtualizer<T>({
 
   const attachingRowsRef = useRef(new Set<HTMLElement>());
   const measurementBatchRef = useRef<Map<Element, number> | null>(null);
+  const [, finishWindowCommit] = useReducer((revision: number) => revision + 1, 0);
+  const committedWindowRef = useRef<Array<{ key: string; index: number }>>([]);
+  const previousWindow = committedWindowRef.current;
+  const insertedBeforeWindow = previousWindow.some(row => (keyIndexes.get(row.key) ?? -1) > row.index);
+  // Insertion before the internal window changes its address. Keep painted
+  // keys until the owning reading/layout transaction publishes the new offset.
+  // Native older pages append after the window and do not enter this path.
+  const retainedIndexes = useMemo(() => {
+    if (!insertedBeforeWindow) return null;
+    return previousWindow.flatMap(({ key }) => {
+      const index = keyIndexes.get(key);
+      return index === undefined ? [] : [index];
+    });
+  }, [keyIndexes, insertedBeforeWindow, previousWindow]);
 
   const virtualizer = useMeasuredVirtualizer({
     // A live-tail open previously mounted rows 0..13 before moving to 22..33;
@@ -576,7 +613,7 @@ export function useFlowChatVirtualizer<T>({
     // at 1540.3 -> 806.7ms. These are single-trace timings, not paint guarantees.
     // Keep an empty hydration from consuming the one-time initial offset.
     enabled: !initialTailRef.current || hasInitialItemsRef.current,
-    initialOffset: () => initialTailRef.current
+    initialOffset: () => !endOrigin && initialTailRef.current
       ? itemsRef.current.slice(0, -1).reduce((offset, item) => (
         offset + estimateItemHeightRef.current(item, estimateContextRef.current)
       ), 0)
@@ -590,7 +627,9 @@ export function useFlowChatVirtualizer<T>({
       const publish = (actualOffsetPx?: number) => {
         const scroller = instance.scrollElement;
         if (!scroller || scroller !== scrollerRef.current || isViewportSuspendedRef.current()) return;
-        const actualOffset = actualOffsetPx ?? scroller.scrollTop;
+        const actualOffset = endOriginRef.current
+          ? actualOffsetPx === undefined ? -scroller.scrollTop : flowChatScrollRange(scroller) - actualOffsetPx
+          : actualOffsetPx ?? scroller.scrollTop;
         synchronized = true;
         viewportOffsetEstablishedRef.current = true;
         // false avoids a nested flushSync while React is attaching measured rows.
@@ -605,7 +644,7 @@ export function useFlowChatVirtualizer<T>({
           synchronized = false;
           viewportOffsetEstablishedRef.current = true;
         }
-        callback(offset, isScrolling);
+        callback(endOriginRef.current ? -offset : offset, isScrolling);
       });
       return () => {
         cleanup?.();
@@ -623,7 +662,7 @@ export function useFlowChatVirtualizer<T>({
       // then publish the real offset before React selects the next window.
       // Retest: five row cleanups became zero; post-reveal sampling advanced
       // from 786.8ms to 596.4ms (single desktop trace, not paint timing).
-      const reconciled = reconcileOpeningMeasurementRef.current?.();
+      const reconciled = !endOriginRef.current && reconcileOpeningMeasurementRef.current?.();
       // Ordinary reading also shifts the real viewport when measured rows above
       // it shrink. Publish that readback after the size cache updates, before
       // selecting a window from the old offset and unmounting those same rows.
@@ -633,22 +672,28 @@ export function useFlowChatVirtualizer<T>({
       if (reconciled || shifted || viewportOffsetEstablishedRef.current) publishMeasuredOffsetRef.current?.();
     },
     estimateSize,
-    measureElement: (element, entry, instance) => measurementBatchRef.current?.get(element)
-      ?? measureTanStackElement(element, entry, instance),
+    measureElement: (element, entry) => measurementBatchRef.current?.get(element)
+      ?? measureRowHeight(element, entry),
     getItemKey: resolveItemKey,
     // Items carry their own index attribute already; measuring reads it back.
-    indexAttribute: 'data-virtual-index',
+    indexAttribute: 'data-flowchat-measure-index',
     overscan: 0,
     rangeExtractor: range => {
-      const indexes = new Set(timelineOverscanRange(range.startIndex, range.endIndex, range.count,
-        scrollerRef.current?.clientHeight ?? 0, estimateSize));
+      const indexes = new Set(retainedIndexes?.length ? retainedIndexes
+        : timelineOverscanRange(range.startIndex, range.endIndex, range.count,
+          scrollerRef.current?.clientHeight ?? 0, estimateSize));
       if (pinnedKeys?.size) itemsRef.current.forEach((item, index) => {
         if (pinnedKeys.has(getItemKeyRef.current(item))) indexes.add(index);
       });
+      if (getItemGroupKey) {
+        const selectedGroups = new Set([...indexes].map(index => getItemGroupKey(items[index])));
+        for (const key of selectedGroups) for (const index of groupIndexes.get(key) ?? []) indexes.add(index);
+      }
       return [...indexes].sort((a, b) => a - b);
     },
     scrollMargin: contentStartPx,
-    scrollPaddingStart: scrollPaddingStartPx,
+    scrollPaddingStart: endOrigin ? 0 : scrollPaddingStartPx,
+    scrollPaddingEnd: endOrigin ? scrollPaddingStartPx : 0,
     /*
      * 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
@@ -659,7 +704,7 @@ export function useFlowChatVirtualizer<T>({
       if (isViewportSuspendedRef.current()) return;
       writeViewportRef.current({
         owner: aimOwnerRef.current,
-        topPx: offsetPx,
+        topPx: endOriginRef.current && scrollerRef.current ? flowChatScrollRange(scrollerRef.current) - offsetPx : offsetPx,
         behavior,
         holdForMs: aimHoldForMsRef.current,
       });
@@ -673,6 +718,13 @@ export function useFlowChatVirtualizer<T>({
     const scroller = scrollerRef.current;
     if (!scroller) return false;
     if (isViewportSuspendedRef.current()) return false;
+    if (endOriginRef.current) {
+      // Older history lies after the reader in this index space and needs no
+      // scroll repair. Only a measured newer row below a reader can displace
+      // their chosen position; following owns the bottom and refuses the shift.
+      if (item.end <= -scroller.scrollTop && shiftViewport(-delta)) pendingMeasurementShiftRef.current = true;
+      return false;
+    }
     const beforeScrollTopPx = scroller.scrollTop;
     // A row that merely starts above the viewport may still be visible. Its
     // resize changes content inside the reader rather than moving content that
@@ -680,7 +732,14 @@ export function useFlowChatVirtualizer<T>({
     // by the size of a row they are looking at (history model rounds can be
     // several thousand pixels). Only a row whose end is above the viewport can
     // move the reader's existing content and needs a viewport shift.
-    const fullyAboveViewport = isItemFullyAboveViewport(item.end, beforeScrollTopPx);
+    const anchorKey = getViewportAnchorKey?.();
+    const anchorIndex = anchorKey ? keyIndexes.get(anchorKey) : undefined;
+    // Estimated bounds are not proof that an older row is now visible. During
+    // a prepend a predecessor can grow through the old viewport coordinates;
+    // its identity still precedes the reading row and its whole delta is owed.
+    const fullyAboveViewport = anchorIndex === undefined
+      ? isItemFullyAboveViewport(item.end, beforeScrollTopPx)
+      : item.index < anchorIndex;
     const applied = fullyAboveViewport ? shiftViewport(delta) : false;
     if (applied) pendingMeasurementShiftRef.current = true;
     /*
@@ -727,31 +786,56 @@ export function useFlowChatVirtualizer<T>({
   const virtualRows = virtualizer.getVirtualItems();
   const totalSizePx = virtualizer.getTotalSize();
 
+  // Only navigation exposes top-origin positions. Window selection and history
+  // continuity use distance from the bottom, independent of all earlier sizes.
+  const contentExtentPx = endOrigin ? Math.max(scrollerRef.current?.clientHeight ?? 0,
+    (headerRef.current?.offsetHeight ?? 0) + totalSizePx + (footerRef?.current?.offsetHeight ?? 0)) : 0;
   const rows = useMemo<FlowChatVirtualRow[]>(() => virtualRows.map(row => ({
-    index: row.index,
+    index: endOrigin ? sourceItems.length - 1 - row.index : row.index,
     key: String(row.key),
-    startPx: row.start,
-    endPx: row.end,
-  })), [virtualRows]);
+    startPx: endOrigin ? contentExtentPx - row.end : row.start,
+    endPx: endOrigin ? contentExtentPx - row.start : row.end,
+  })).sort((a, b) => a.index - b.index), [virtualRows, endOrigin, sourceItems.length, contentExtentPx]);
+  useLayoutEffect(() => {
+    committedWindowRef.current = virtualRows.map(({ key, index }) => ({ key: String(key), index }));
+    // Retention lasts one layout commit, including when the insertion was
+    // below the reading edge and no scroll write publishes a new offset.
+    // Otherwise its inter-row reservation can remain a visible empty gap.
+    if (insertedBeforeWindow) finishWindowCommit();
+  });
 
-  const { paddingTopPx, paddingBottomPx } = virtualWindowPaddingPx(
-    rows,
-    totalSizePx,
-    contentStartPx,
-  );
+  const padding = virtualWindowPaddingPx(virtualRows.map(row => ({
+    index: row.index, key: String(row.key), startPx: row.start, endPx: row.end,
+  })), totalSizePx, contentStartPx);
+  const paddingTopPx = endOrigin ? padding.paddingBottomPx : padding.paddingTopPx;
+  const paddingBottomPx = endOrigin ? padding.paddingTopPx : padding.paddingBottomPx;
 
   // Ref attachment interleaves with descendant layout effects. Reading each
   // row here used to force a separate style/layout pass for every new card.
   const measureRowElement = useCallback((element: HTMLElement | null) => {
-    if (element) attachingRowsRef.current.add(element);
-  }, []);
+    if (element) {
+      element.setAttribute('data-flowchat-measure-index', String(toVirtualIndex(Number(element.getAttribute('data-virtual-index')))));
+      attachingRowsRef.current.add(element);
+    }
+  }, [toVirtualIndex]);
+  const measuredOriginRef = useRef(endOrigin);
   useLayoutEffect(() => {
-    const attached = [...attachingRowsRef.current].filter(element => element.isConnected);
+    const scroller = scrollerRef.current;
+    const originChanged = measuredOriginRef.current !== endOrigin;
+    measuredOriginRef.current = endOrigin;
+    // Stable DOM rows keep their chronological index while an origin handoff
+    // changes the library index. ResizeObserver must see the new mapping too.
+    const mountedRows = [...(scroller?.querySelectorAll<HTMLElement>('[data-virtual-index]') ?? [])]
+      .filter(element => element.closest('[data-flowchat-virtual-viewport]') === scroller);
+    for (const element of mountedRows) {
+      element.setAttribute('data-flowchat-measure-index', String(toVirtualIndex(Number(element.getAttribute('data-virtual-index')))));
+    }
+    const attached = originChanged ? mountedRows : [...attachingRowsRef.current].filter(element => element.isConnected);
     attachingRowsRef.current.clear();
     virtualizer.measureElement(null);
     if (!attached.length || isViewportSuspendedRef.current()) return;
     // Read before any viewport shift or size-cache notification can write.
-    measurementBatchRef.current = new Map(attached.map(element => [element, element.offsetHeight]));
+    measurementBatchRef.current = new Map(attached.map(element => [element, measureRowHeight(element)]));
     try {
       for (const element of attached) {
         virtualizer.measureElement(element);
@@ -764,7 +848,7 @@ export function useFlowChatVirtualizer<T>({
         // measurement during scrolling. In our flow layout their real heights
         // already displace the following rows in this commit. Reconcile before
         // paint, rather than showing the displacement until ResizeObserver.
-        const index = Number(element.getAttribute('data-virtual-index'));
+        const index = toVirtualIndex(Number(element.getAttribute('data-virtual-index')));
         if (Number.isInteger(index) && index >= 0 && index < itemsRef.current.length) {
           virtualizer.resizeItem(index, measurementBatchRef.current.get(element)!);
         }
@@ -779,7 +863,7 @@ export function useFlowChatVirtualizer<T>({
   const getVisibleItemRange = useCallback((): FlowChatVisibleItemRange | null => {
     const scroller = scrollerRef.current;
     if (!scroller) return null;
-    return visibleRowRange(rowsRef.current, scroller.scrollTop, scroller.clientHeight);
+    return visibleRowRange(rowsRef.current, readFlowChatScrollTop(scroller), scroller.clientHeight);
   }, [scrollerRef]);
 
   /**
@@ -812,8 +896,9 @@ export function useFlowChatVirtualizer<T>({
     const measurements: Array<[number, number]> = [];
     for (const element of elements) {
       if (element.closest('[data-flowchat-virtual-viewport]') !== scroller) continue;
-      const index = Number(element.getAttribute('data-virtual-index'));
+      const index = toVirtualIndex(Number(element.getAttribute('data-virtual-index')));
       if (!Number.isInteger(index)) continue;
+      element.setAttribute('data-flowchat-measure-index', String(index));
       measurements.push([index, virtualizer.options.measureElement(element, undefined, virtualizer)]);
     }
     // measure() clears keyed sizes but leaves the previous derived positions.
@@ -822,7 +907,7 @@ export function useFlowChatVirtualizer<T>({
     // and fall back to estimates until another resize or scroll arrives.
     (virtualizer as unknown as MeasuringVirtualizer).getMeasurements();
     for (const [index, height] of measurements) virtualizer.resizeItem(index, height);
-  }, [scrollerRef, virtualizer]);
+  }, [scrollerRef, toVirtualIndex, virtualizer]);
 
   const [fontRevision, setFontRevision] = useState(0);
   useEffect(() => {
@@ -840,7 +925,10 @@ export function useFlowChatVirtualizer<T>({
   const pendingLayoutMeasureRef = useRef(false);
   useLayoutEffect(() => {
     const keys = new Set(itemKeysRef.current);
-    for (const key of previousKeysRef.current) if (!keys.has(key)) retiredMeasurementsRef.current++;
+    for (const key of previousKeysRef.current) if (!keys.has(key)) {
+      retiredMeasurementsRef.current++;
+      reservedEstimatesRef.current.delete(key);
+    }
     previousKeysRef.current = keys;
     if (measuredLayoutRef.current === layoutSignature && retiredMeasurementsRef.current < 2048
       && !pendingLayoutMeasureRef.current) return;
@@ -857,29 +945,37 @@ export function useFlowChatVirtualizer<T>({
       return;
     }
     if (isViewportSuspendedRef.current()) return;
-    const scroller = scrollerRef.current;
-    const before = (virtualizer as unknown as MeasuringVirtualizer).getMeasurements();
-    const anchorIndex = before.findIndex(row => row.end > (scroller?.scrollTop ?? 0));
-    const anchorStart = before[anchorIndex]?.start;
-    resettingMeasurementsRef.current = true;
-    try { virtualizer.measure(); measureRenderedItems(); }
-    finally { resettingMeasurementsRef.current = false; }
-    const after = (virtualizer as unknown as MeasuringVirtualizer).getMeasurements()[anchorIndex]?.start;
-    if (after !== undefined && anchorStart !== undefined && Math.abs(after - anchorStart) > 0.5) {
-      shiftViewport(after - anchorStart);
-      publishMeasuredOffsetRef.current?.();
+    // A width/font change does not make offscreen content disappear. Keep its
+    // last occupied size as the reservation until that row mounts again.
+    // Clearing every size first replaced real history with unrelated estimates,
+    // selected another window, then made follow animate back to the old one.
+    // Only prune retired keys, preserving every surviving row's reservation.
+    if (retiredMeasurementsRef.current >= 2048) {
+      const retained = (virtualizer as unknown as MeasuringVirtualizer).getMeasurements()
+        .map(row => row.end - row.start);
+      resettingMeasurementsRef.current = true;
+      try {
+        virtualizer.measure();
+        (virtualizer as unknown as MeasuringVirtualizer).getMeasurements();
+        retained.forEach((height, index) => virtualizer.resizeItem(index, height));
+      } finally { resettingMeasurementsRef.current = false; }
     }
+    measureRenderedItems();
     measuredLayoutRef.current = layoutSignature;
     retiredMeasurementsRef.current = 0;
     pendingLayoutMeasureRef.current = false;
-  }, [itemKeyRevision, layoutSignature, items, measureRenderedItems, scrollerRef, shiftViewport, virtualizer,
+  }, [itemKeyRevision, layoutSignature, items, measureRenderedItems, virtualizer,
     measurementSuspended]);
 
   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]);
+      .getMeasurements()[toVirtualIndex(index)];
+    if (!measurement) return null;
+    if (!endOriginRef.current) return { startPx: measurement.start, endPx: measurement.end };
+    const extent = Math.max(scrollerRef.current?.clientHeight ?? 0,
+      (headerRef.current?.offsetHeight ?? 0) + virtualizer.getTotalSize() + (footerRef?.current?.offsetHeight ?? 0));
+    return { startPx: extent - measurement.end, endPx: extent - measurement.start };
+  }, [footerRef, headerRef, scrollerRef, toVirtualIndex, virtualizer]);
 
   const scrollItemIntoView = useCallback((
     index: number,
@@ -893,11 +989,11 @@ export function useFlowChatVirtualizer<T>({
     aimOwnerRef.current = options.owner;
     aimHoldForMsRef.current = options.holdForMs;
     aimStartedAtMsRef.current = performance.now();
-    virtualizer.scrollToIndex(index, {
-      align: options.align,
+    virtualizer.scrollToIndex(toVirtualIndex(index), {
+      align: endOriginRef.current && options.align === 'start' ? 'end' : options.align,
       behavior: options.behavior ?? 'auto',
     });
-  }, [virtualizer]);
+  }, [toVirtualIndex, virtualizer]);
 
   const scrollToOffset = useCallback((
     offsetPx: number,
@@ -910,11 +1006,11 @@ export function useFlowChatVirtualizer<T>({
     aimOwnerRef.current = options.owner;
     aimHoldForMsRef.current = options.holdForMs;
     aimStartedAtMsRef.current = performance.now();
-    virtualizer.scrollToOffset(offsetPx, {
+    virtualizer.scrollToOffset(endOriginRef.current && scrollerRef.current ? flowChatScrollRange(scrollerRef.current) - offsetPx : offsetPx, {
       align: 'start',
       behavior: options.behavior ?? 'auto',
     });
-  }, [virtualizer]);
+  }, [scrollerRef, virtualizer]);
 
   const cancelAim = useCallback(() => {
     const startedAtMs = aimStartedAtMsRef.current;
@@ -937,7 +1033,7 @@ export function useFlowChatVirtualizer<T>({
      */
     aimOwnerRef.current = 'layout-correction';
     aimHoldForMsRef.current = undefined;
-    const givenUpAtPx = scroller.scrollTop;
+    const givenUpAtPx = endOriginRef.current ? -scroller.scrollTop : scroller.scrollTop;
     virtualizer.scrollToOffset(givenUpAtPx, { align: 'start', behavior: 'auto' });
   }, [scrollerRef, virtualizer]);
 
diff --git a/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts b/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
index 93172932cb..b489a3bbec 100644
--- a/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
+++ b/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
@@ -135,12 +135,12 @@ describe('RelaySessionHistory', () => {
       name: 'RelayHistoryFirstPageOverdueError', retryable: true, sessionId: 'session',
     });
     await vi.advanceTimersByTimeAsync(0);
-    // Records that did arrive are known history and must stay rendered.
+    // A received fragment is not a complete Turn and must never be published.
     fixture.record?.({ sessionId: 'session', id: 'item/known' });
     await vi.advanceTimersByTimeAsync(15_000);
     await outcome;
 
-    expect(apply).toHaveBeenCalledOnce();
+    expect(apply).not.toHaveBeenCalled();
     expect(flushed).toHaveBeenCalled();
     // A blocking question is answerable from the mailbox without the page.
     expect(resumed).toHaveBeenCalledOnce();
@@ -186,7 +186,7 @@ describe('RelaySessionHistory', () => {
     await closing;
     await vi.advanceTimersByTimeAsync(15_000);
     expect(closedError).not.toHaveBeenCalled();
-    expect(closedResume).not.toHaveBeenCalled();
+    expect(closedResume).toHaveBeenCalledOnce(); // Opening read only; no work after close.
 
     const switchedError = vi.fn();
     const switchedResume = vi.fn(async () => {});
@@ -197,7 +197,7 @@ describe('RelaySessionHistory', () => {
     await vi.advanceTimersByTimeAsync(15_000);
     await switching;
     expect(switchedError).not.toHaveBeenCalled();
-    expect(switchedResume).not.toHaveBeenCalled();
+    expect(switchedResume).toHaveBeenCalledOnce(); // Opening read only; no work on the new surface.
   });
 
   it('drops stale replay and unsubscribes when the surface changes during grant', async () => {
@@ -227,15 +227,19 @@ describe('RelaySessionHistory', () => {
     history.close();
   });
 
-  it('keeps a page in one batch across frames but cannot be stalled by it', async () => {
+  it('does not expose historical fragments through timers, visibility, or close', async () => {
     vi.useFakeTimers();
+    const listeners: Array<() => void> = [];
+    vi.stubGlobal('document', { visibilityState: 'visible',
+      addEventListener: (_: string, listener: () => void) => listeners.push(listener), removeEventListener: vi.fn() });
     fixture.subscribe.mockImplementation(async () => {
       fixture.ready?.({ sessionId: 'session', hasMore: true, oldestSeq: 50, cursor: 150 });
       return 'subscription';
     });
     fixture.older.mockImplementation(() => new Promise<void>(() => {}));
     const flush = vi.fn();
-    const history = new RelaySessionHistory('session', vi.fn(), vi.fn(), vi.fn(), undefined, flush);
+    const apply = vi.fn();
+    const history = new RelaySessionHistory('session', apply, vi.fn(), vi.fn(), undefined, flush);
     await history.open();
     flush.mockClear();
 
@@ -245,14 +249,13 @@ describe('RelaySessionHistory', () => {
       fixture.record?.({ sessionId: 'session', id: `item/${index}` });
       await vi.advanceTimersByTimeAsync(5);
     }
+    await vi.advanceTimersByTimeAsync(1000);
+    listeners.forEach(listener => listener());
+    expect(apply).not.toHaveBeenCalled();
     expect(flush).not.toHaveBeenCalled();
     fixture.ready?.({ sessionId: 'session', hasMore: false, oldestSeq: 1, cursor: 150 });
+    expect(apply).toHaveBeenCalledTimes(20);
     expect(flush).toHaveBeenCalledOnce();
-
-    void history.loadOlder().catch(() => {});
-    fixture.record?.({ sessionId: 'session', id: 'item/stalled' });
-    await vi.advanceTimersByTimeAsync(250);
-    expect(flush).toHaveBeenCalledTimes(2);
     history.close();
   });
 
@@ -341,7 +344,7 @@ describe('RelaySessionHistory', () => {
     expect(ready).not.toHaveBeenCalled();
   });
 
-  it('renders received records before a sync error and on close', async () => {
+  it('flushes admitted live records on failure and rejects delivery from the failed read', async () => {
     vi.useFakeTimers();
     fixture.subscribe.mockImplementation(async () => {
       fixture.ready?.({ sessionId: 'session', hasMore: false, oldestSeq: 1, cursor: 0 });
@@ -358,9 +361,9 @@ describe('RelaySessionHistory', () => {
 
     fixture.record?.({ sessionId: 'session', id: 'item/2' });
     history.close();
-    expect(flush).toHaveBeenCalledTimes(2);
+    expect(flush).toHaveBeenCalledOnce();
     await vi.advanceTimersByTimeAsync(16);
-    expect(flush).toHaveBeenCalledTimes(2);
+    expect(flush).toHaveBeenCalledOnce();
   });
 
   it('leaves records pending when the surface changed before the flush', async () => {
@@ -392,6 +395,7 @@ describe('RelaySessionHistory', () => {
     await history.open();
     fixture.older.mockImplementation(async () => {
       fixture.record?.({ sessionId: 'session', id: 'invalid' });
+      fixture.ready?.({ sessionId: 'session', hasMore: false, oldestSeq: 1, cursor: 150 });
     });
     await expect(history.loadOlder()).rejects.toThrow('Invalid historical record');
     history.close();
@@ -426,7 +430,7 @@ describe('RelaySessionHistory', () => {
 
 });
 
-it('refreshes the small mailbox on initial ready and reconnect, but never on older-page ready', async () => {
+it('refreshes the small mailbox at open and reconnect, but never on older-page ready', async () => {
   fixture.current = true;
   const resumed = vi.fn(async () => {});
   fixture.subscribe.mockImplementation(async () => { fixture.ready?.({sessionId:'session',hasMore:true,oldestSeq:5,cursor:10}); return 'subscription'; });
diff --git a/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts b/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
index a8ca0ce3dd..bb6c46db2a 100644
--- a/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
+++ b/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
@@ -12,12 +12,6 @@ const log = createLogger('RelaySessionHistory');
  */
 const RECORD_FLUSH_DELAY_MS = 16;
 
-/**
- * A page in flight renders as one batch at its ready event, even when its record
- * events span frames. Only a backstop, so a stalled page cannot hold live records.
- */
-const PAGE_RECORD_FLUSH_DELAY_MS = 250;
-
 /**
  * How long opening may wait for the host's first page. Past it, opening fails
  * with a retryable error instead of parking the surface in hydration.
@@ -109,6 +103,7 @@ export class RelaySessionHistory {
   private readonly listeners: Array<() => void> = [];
   private subscriptionId: string | null = null;
   private closed = false;
+  private failed = false;
   private ready: RelayHistoryReady | null = null;
   private resolveReady!: () => void;
   private rejectReady!: (error: unknown) => void;
@@ -124,6 +119,10 @@ export class RelaySessionHistory {
   private visible = false;
   private prefetchCredit = 0;
   private flushTimer: ReturnType<typeof setTimeout> | null = null;
+  // History enters the replica only at ready. Otherwise direct runtime/mailbox
+  // flushes can expose half a Turn even when this owner's timer is disabled.
+  private collectingHistory = true;
+  private historyRecords: SessionRecord[] = [];
   private readonly fail: (error: unknown) => void;
   private readonly resumeInteraction: (() => Promise<void>) | undefined;
   private readonly warm: WarmSessionStream | undefined;
@@ -146,16 +145,24 @@ export class RelaySessionHistory {
     private readonly onFlush?: () => void,
     onResync?: () => void,
   ) {
-    this.fail = error => { this.rejectReady(error); this.rejectPage?.(error); onError(error); };
+    this.fail = error => {
+      if (this.failed) return;
+      this.failed = true;
+      this.rejectReady(error); this.rejectPage?.(error); onError(error);
+    };
     this.resumeInteraction = onResumed;
     // Taken before this owner listens, so no event is both buffered and live.
     this.warm = takeWarmStream(this.scope.surfaceId, sessionId);
     // Register before asking Rust to replay its cache or fetch the first page.
     this.listeners.push(remoteConnectAPI.onSessionRecord(this.handlers.record = value => {
-      if (!this.isCurrent()) return;
+      if (!this.isCurrent() || this.failed) return;
       const record = value as SessionRecord;
       if (record.sessionId !== this.sessionId) return;
       try {
+        if (this.collectingHistory) {
+          this.historyRecords.push(record);
+          return;
+        }
         if (onRecord(record) === true) this.flush();
         else this.scheduleFlush();
       } catch (error) { this.fail(error); }
@@ -167,6 +174,8 @@ export class RelaySessionHistory {
     this.listeners.push(remoteConnectAPI.onSessionGap(this.handlers.gap = gap => {
       if (!this.isCurrent() || gap.sessionId !== this.sessionId || gap.resync !== true) return;
       this.flush();
+      this.collectingHistory = true;
+      this.historyRecords = [];
       try { onResync?.(); } catch (error) { this.fail(error); }
     }));
     this.listeners.push(remoteConnectAPI.onSessionSyncError(this.handlers.syncError = error => {
@@ -176,9 +185,14 @@ export class RelaySessionHistory {
       this.fail(new Error(error.message));
     }));
     this.listeners.push(remoteConnectAPI.onSessionReady(this.handlers.ready = ready => {
-      if (!this.isCurrent() || ready.sessionId !== this.sessionId) return;
+      if (!this.isCurrent() || this.failed || ready.sessionId !== this.sessionId) return;
+      try {
+        for (const record of this.historyRecords) onRecord(record);
+        this.historyRecords = [];
+        this.collectingHistory = false;
+      } catch (error) { this.fail(error); return; }
       if (!this.flush()) return;
-      const resumed = this.pageApplied === null;
+      const resumed = this.ready !== null && this.pageApplied === null;
       this.ready = ready;
       if (resumed && onResumed) void onResumed().catch(error => {
         log.warn('Session interaction mailbox refresh failed', { sessionId: this.sessionId, error });
@@ -208,8 +222,7 @@ export class RelaySessionHistory {
 
   private scheduleFlush(): void {
     if (this.flushTimer !== null) return;
-    const pageInFlight = this.ready === null || this.pageApplied !== null;
-    this.flushTimer = setTimeout(() => this.flush(), pageInFlight ? PAGE_RECORD_FLUSH_DELAY_MS : RECORD_FLUSH_DELAY_MS);
+    this.flushTimer = setTimeout(() => this.flush(), RECORD_FLUSH_DELAY_MS);
   }
 
   private flush(): boolean {
@@ -238,6 +251,11 @@ export class RelaySessionHistory {
   private async start(): Promise<void> {
     this.scope.assertCurrent('open relay session history');
     if (this.closed) throw new Error('Session subscription is closed');
+    // History may span several transport pages on an older host. Its blocking
+    // interactions must be answerable while the complete Turn is still loading.
+    if (this.resumeInteraction) void this.resumeInteraction().catch(error => {
+      log.warn('Session interaction mailbox refresh failed', { sessionId: this.sessionId, error });
+    });
     try {
       // A stream warmed by the click: what it buffered is applied first, in order.
       const warm = this.warm;
@@ -281,11 +299,6 @@ export class RelaySessionHistory {
     if (!this.isCurrent()) throw error;
     log.warn('Relay session first page overdue; failing the open as retryable', { sessionId: this.sessionId });
     this.flush();
-    if (this.resumeInteraction) {
-      void this.resumeInteraction().catch(mailboxError => {
-        log.warn('Session interaction mailbox refresh failed', { sessionId: this.sessionId, error: mailboxError });
-      });
-    }
     this.fail(error);
     throw error;
   }
@@ -319,9 +332,15 @@ export class RelaySessionHistory {
     this.scope.assertCurrent('load older relay history');
     if (!this.ready?.hasMore) return false;
     if (!this.subscriptionId) throw new Error('Session subscription is closed');
+    if (this.flushTimer !== null) this.flush();
+    this.collectingHistory = true;
     const applied = new Promise<void>((resolve, reject) => { this.pageApplied = resolve; this.rejectPage = reject; });
     try {
       await Promise.all([remoteConnectAPI.loadOlderSession(this.subscriptionId), applied]);
+    } catch (error) {
+      this.fail(error);
+      this.close();
+      throw error;
     } finally { this.pageApplied = null; this.rejectPage = null; }
     this.scope.assertCurrent('finish loading older relay history');
     return true;
@@ -333,6 +352,7 @@ export class RelaySessionHistory {
     if (this.flushTimer !== null) this.flush();
     if (this.closed) return;
     this.closed = true;
+    this.historyRecords = [];
     if (this.historyTimer !== null) clearTimeout(this.historyTimer);
     this.historyTimer = null;
     this.listeners.splice(0).forEach(unlisten => unlisten());
diff --git a/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.test.ts b/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.test.ts
index 34bae2dca8..7f85961dcf 100644
--- a/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.test.ts
+++ b/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.test.ts
@@ -72,4 +72,15 @@ describe('background surface seeding across a switch', () => {
     for (const listener of [...catalog.listeners]) listener('peer-seed');
     expect(flowChatStore.getSurfaceSessions('peer-seed').get('r1')?.title).toBe('new title');
   });
+
+  it('keeps directory rows when an explicit disconnect disposes the previously rendered container', () => {
+    publish('peer-seed', { repos: [record('r1', 'repos'), record('r2', 'repos')] });
+    activateSurface('peer-seed');
+    activateSurface('local');
+    flowChatStore.discardSurfaceState('peer-seed');
+    // No new RPC or changed record array: the still-visible device catalog
+    // owns these metadata rows independently of the disposed transcript.
+    expect(ids('peer-seed')).toEqual(['r1', 'r2']);
+    expect(flowChatStore.getSurfaceSessions('peer-seed').get('r1')?.historyState).toBe('metadata-only');
+  });
 });
diff --git a/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.ts b/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.ts
index 1d58fab11f..3ed7184fdc 100644
--- a/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.ts
+++ b/src/web-ui/src/flow_chat/services/backgroundSurfaceSeeding.ts
@@ -139,6 +139,15 @@ export function installBackgroundSurfaceSeeding(): () => void {
   installs += 1;
   if (installs === 1) {
     const unsubscribe = deviceWorkspaceCatalog.subscribe(seedBackgroundSurface);
+    const unsubscribeDisposal = flowChatStore.subscribeSurfaceSessions((surfaceId, change) => {
+      if (change !== 'discarded') return;
+      // Attachment disposal retires transcript/runtime state. The directory
+      // has an independent read lease and still owns its metadata rows. A
+      // previously projected array is not proof that the new container has it.
+      seededRecords.delete(surfaceId);
+      listedIds.delete(surfaceId);
+      seedBackgroundSurface(surfaceId);
+    });
     for (const surfaceId of deviceWorkspaceCatalog.loadedSurfaces()) seedBackgroundSurface(surfaceId);
     // Synchronous with the activation commit, before navigation draws the
     // device just left from its container.
@@ -148,7 +157,7 @@ export function installBackgroundSurfaceSeeding(): () => void {
       rendered = getActiveSurfaceId();
       if (left !== rendered) seedLeftSurface(left);
     });
-    teardown = () => { unsubscribe(); unsubscribeActivation(); };
+    teardown = () => { unsubscribe(); unsubscribeActivation(); unsubscribeDisposal(); };
   }
   let released = false;
   return () => {
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 912ef8e4ba..136e6eb4a3 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
@@ -8690,12 +8690,13 @@ describe('FlowChatStore device surfaces', () => {
       // Known history and paging state survive; nothing claims a complete empty transcript.
       expect(session().historyState).toBe('failed');
       expect(session().isPartial).toBe(true);
-      expect(texts('peer-overdue')).toHaveLength(2);
+      expect(texts('peer-overdue')).toHaveLength(1);
       // The stalled read is closed, so its late page cannot mark it ready.
       expect(apiMocks.relayReady).toBeNull();
 
       // The retry receives the late page from the host cache and recovers.
       apiMocks.subscribeRelaySession.mockImplementationOnce(async () => {
+        apiMocks.relayRecord?.(itemRecord('peer-overdue', 0, 1));
         apiMocks.relayRecord?.(itemRecord('peer-overdue', 0, 2));
         apiMocks.relayReady?.({ sessionId: 'peer-overdue', hasMore: false, oldestSeq: 1, cursor: 9 });
         return 'peer-overdue-retry';
@@ -8705,16 +8706,36 @@ describe('FlowChatStore device surfaces', () => {
       expect(texts('peer-overdue')).toHaveLength(3);
     });
 
-    it('applies each drained page in one pass', async () => {
+    it('keeps an incomplete historical Turn out of the replica and publishes all its items together', async () => {
+      activateSurface(PEER_SURFACE_ID);
+      seedSession('peer-atomic');
+      vi.useFakeTimers();
+      try {
+        apiMocks.subscribeRelaySession.mockResolvedValueOnce('peer-atomic-subscription');
+        const opening = flowChatStore.loadRelaySessionHistory('peer-atomic');
+        await vi.advanceTimersByTimeAsync(0);
+        apiMocks.relayRecord?.(itemRecord('peer-atomic', 0, 0));
+        await vi.advanceTimersByTimeAsync(1000);
+        // Runtime/mailbox controls may flush while a page is crossing the bridge.
+        flowChatStore.settleRelaySessionRecords('peer-atomic');
+        expect(flowChatStore.getState().sessions.get('peer-atomic')!.dialogTurns).toHaveLength(0);
+        apiMocks.relayRecord?.(itemRecord('peer-atomic', 0, 1));
+        apiMocks.relayReady?.({ sessionId: 'peer-atomic', hasMore: false, oldestSeq: 1, cursor: 2 });
+        await opening;
+        expect(texts('peer-atomic')).toHaveLength(2);
+      } finally { vi.useRealTimers(); }
+    });
+
+    it('applies each admitted whole-Turn batch in one pass', async () => {
       activateSurface(PEER_SURFACE_ID);
       seedSession('peer-drain');
       const pages = 6;
       const recordsPerPage = 50;
       const deliver = (page: number) => {
-        // Newest first, as the host reads history backward through one long turn.
+        // Newest Turn first; Rust admits whole Turns before the ready boundary.
         const start = (pages - 1 - page) * recordsPerPage;
         for (let index = 0; index < recordsPerPage; index += 1) {
-          apiMocks.relayRecord?.(itemRecord('peer-drain', 0, start + index));
+          apiMocks.relayRecord?.(itemRecord('peer-drain', pages - 1 - page, index));
         }
         apiMocks.relayReady?.({ sessionId: 'peer-drain', hasMore: page < pages - 1, oldestSeq: start + 1, cursor: pages * recordsPerPage });
       };
@@ -8748,7 +8769,8 @@ describe('FlowChatStore device surfaces', () => {
       snapshot.mockRestore();
       // Ready and catalog bookkeeping add a small constant per page, not per record.
       expect(storeUpdates).toBeLessThanOrEqual(pages * 4);
-      expect(texts('peer-drain')).toHaveLength(pages * recordsPerPage);
+      expect(session().dialogTurns).toHaveLength(pages);
+      for (let turn = 0; turn < pages; turn++) expect(texts('peer-drain', turn)).toHaveLength(recordsPerPage);
     });
 
     it('renders good turns past a failed one, stays failed, and retries the held turn', async () => {
@@ -9350,7 +9372,7 @@ describe('background device session seeding', () => {
     expect([...seeded.keys()]).toEqual(['s-1']);
     expect(seeded.get('s-1')).toMatchObject({ workspaceId: 'peer-ws', historyState: 'metadata-only', dialogTurns: [] });
     expect(flowChatStore.getState().sessions.has('local-1')).toBe(false);
-    expect(listener).toHaveBeenCalledWith('peer-seed');
+    expect(listener).toHaveBeenCalledWith('peer-seed', 'updated');
     // An identical page does not notify again.
     listener.mockClear();
     flowChatStore.subscribeSurfaceSessions(listener);
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
index c6804fdf4b..0b2809b6b6 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
@@ -6039,6 +6039,7 @@ export class FlowChatStore {
     if (surfaceId === getActiveSurfaceId()) {
       this.notifyListeners();
     }
+    this.notifySurfaceSessions(surfaceId, 'discarded');
     return removedSessionIds;
   }
 
@@ -8040,23 +8041,23 @@ export class FlowChatStore {
     return false;
   }
 
-  private surfaceSessionListeners = new Set<(surfaceId: DeviceSurfaceId) => void>();
+  private surfaceSessionListeners = new Set<(surfaceId: DeviceSurfaceId, change: 'updated' | 'discarded') => void>();
 
   /** Sessions of any surface's container, for background-device navigation. */
   public getSurfaceSessions(surfaceId: DeviceSurfaceId): ReadonlyMap<string, Session> {
     return this.surfaceContainers.get(surfaceId)?.state.sessions ?? EMPTY_SESSION_MAP;
   }
 
-  /** Fires when a surface's sessions change: background seeding and active-state updates. */
-  public subscribeSurfaceSessions(listener: (surfaceId: DeviceSurfaceId) => void): () => void {
+  /** Directory projections also need to know when their container was disposed. */
+  public subscribeSurfaceSessions(listener: (surfaceId: DeviceSurfaceId, change: 'updated' | 'discarded') => void): () => void {
     this.surfaceSessionListeners.add(listener);
     return () => { this.surfaceSessionListeners.delete(listener); };
   }
 
-  private notifySurfaceSessions(surfaceId: DeviceSurfaceId): void {
+  private notifySurfaceSessions(surfaceId: DeviceSurfaceId, change: 'updated' | 'discarded' = 'updated'): void {
     for (const listener of Array.from(this.surfaceSessionListeners)) {
       try {
-        listener(surfaceId);
+        listener(surfaceId, change);
       } catch (error) {
         log.warn('Surface session listener threw', { error });
       }

From c0102161d282b18eaa09e471a1badc7b43870b51 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Wed, 4 Nov 2026 23:22:59 +0800
Subject: [PATCH 2/6] perf: open local and peer sessions from the latest
 complete turn

---
 docs/architecture/peer-device-mode.md         |  34 +-
 .../services/services-integrations/AGENTS.md  |  21 +-
 .../src/remote_connect.rs                     |   3 +-
 .../src/remote_connect/host_stream.rs         |  41 +-
 .../host_stream/turn_history.rs               | 546 ++++++++++++++++++
 .../remote_connect/host_stream_subscriber.rs  | 371 +++++++++++-
 .../tests/remote_connect_contracts.rs         |   4 +-
 .../src/flow_chat/components/modern/AGENTS.md |   4 +
 .../modern/FLOWCHAT_HISTORY_PAGING.md         |  48 +-
 .../modern/FLOWCHAT_VERIFICATION.md           |  15 +-
 .../modern/HistorySessionLoadingBoundary.tsx  |   8 +-
 .../modern/ModernFlowChatContainer.tsx        |   6 +-
 ...rtualMessageList.timeline-prepend.test.tsx |   3 +
 .../services/RelaySessionHistory.test.ts      |  35 ++
 .../flow_chat/services/RelaySessionHistory.ts |  20 +-
 .../flow-chat-manager/SessionModule.test.ts   |  18 +
 .../flow-chat-manager/SessionModule.ts        |   9 +-
 .../src/flow_chat/store/FlowChatStore.test.ts |  40 +-
 .../src/flow_chat/store/FlowChatStore.ts      |  27 +-
 .../api/service-api/RemoteConnectAPI.ts       |   2 +-
 .../src/infrastructure/peer-device/README.md  |  19 +-
 21 files changed, 1184 insertions(+), 90 deletions(-)
 create mode 100644 src/crates/services/services-integrations/src/remote_connect/host_stream/turn_history.rs

diff --git a/docs/architecture/peer-device-mode.md b/docs/architecture/peer-device-mode.md
index 2e0985c3c6..28fa6c7eaa 100644
--- a/docs/architecture/peer-device-mode.md
+++ b/docs/architecture/peer-device-mode.md
@@ -125,17 +125,29 @@ records and responses from a device that is no longer rendered. Desktop
 `RelaySessionHistory` owns the subscription across initial loading, realtime
 delivery and older-page prefetch.
 
-Desktop/Web FlowChat history publishes complete Turns. New host Turn roots
-carry optional `turnRecordIds` membership on the record envelope. The Rust
-subscriber joins byte/event-bounded pages until all listed members arrive;
-a terminal root alone is not proof, since live updates can move it ahead of
-unchanged items. Legacy hosts without membership remain readable: the controller
-finishes the available history read before publication, which can make their
-first open slower. Missing members, non-advancing pages and epoch changes fail
-without exposing a partial Turn. No persisted shape or command changed.
-`RelaySessionHistory` stages the resulting replay outside the store replica until
-ready; timers and direct live-control flushes cannot publish its intermediate
-records. Normal live updates retain their incremental behavior.
+Desktop/Web FlowChat history publishes complete Turns. The Rust subscriber offers
+`turn_history: {version: 1}` on `read_stream`; a response acknowledgement enables
+single-Turn snapshots. Hosts also advertise `host_stream_turn_history_v1`. The
+first read selects only the last Turn, independently of the ordering of live
+events. Large Turns travel in byte/event-bounded packets of one immutable snapshot;
+packet offsets and the older-Turn boundary are separate. The live cursor captured
+before source IO fences snapshot revisions, and normal live publication resumes
+after it. Snapshots are ephemeral, controller scoped, epoch fenced and byte bounded
+(one oversized Turn may exceed the budget); they add no persisted format or relay
+storage. Identity-only tombstone tracking preserves deletions without suppressing
+live publication to another controller.
+
+Hosts that omit the acknowledgement keep the record-page path: optional root
+`turnRecordIds` membership proves completeness across pages, including unchanged
+items older than a republished root. Older hosts without membership remain
+readable by finishing their available history before publication, so their first
+open can be slower. Missing records, non-advancing packets and epoch changes fail
+without exposing fragments. A terminal header alone never proves completeness.
+`RelaySessionHistory` stages controller-annotated `historyReplay` records outside
+the replica until ready. Live records remain incremental even while an older Turn
+is loading. After the last Turn is visibly presented, a visible view may prefetch
+one adjacent Turn; further reads follow reader demand. Switching back to a partial
+session does not automatically drain its history.
 
 Native mobile history keeps these record-page boundaries; a page is not a
 complete conversation turn. The initial replay and each older-history request
diff --git a/src/crates/services/services-integrations/AGENTS.md b/src/crates/services/services-integrations/AGENTS.md
index a1b9503a47..47dc024928 100644
--- a/src/crates/services/services-integrations/AGENTS.md
+++ b/src/crates/services/services-integrations/AGENTS.md
@@ -35,14 +35,25 @@ slices that are outside pure product logic but still platform-neutral.
   reader. Neither the relay nor any client persists stream content; do not add
   relay-stored history, `get_session_key`, or a durable stream cache here.
 - Session history reads use `HostStreamHub::read_history` with a Core-owned
-  source loader. Backfill allocates decreasing JS-safe sequences below the
+  source loader. The optional `turn_history` v1 offer selects exactly one Turn;
+  its response acknowledgement enables the mode, while older hosts retain the
+  existing record-page reader. Hosts advertise `host_stream_turn_history_v1`.
+  The immutable snapshot spans bounded packets, carries an older-Turn boundary
+  separately from its packet offset, and uses the live cursor captured before
+  source IO as its revision fence. It never allocates live event sequences.
+  Snapshot IDs are controller/stream scoped and epoch fenced; retained bodies
+  are byte bounded and expire with leases/grace (one oversized Turn may exceed
+  the budget). Identity-only tombstone tracking must not suppress subsequent
+  live publication to other controllers. The subscriber publishes only a
+  validated complete snapshot and catches up live events during older reads.
+  Legacy record-page backfill allocates decreasing JS-safe sequences below the
   live sequence range; it never advances the forward cursor. One source gate
   orders backfill, live publication, and history invalidation. Undo/import and
   cache misses across evicted pages require an epoch fence, never silent skips.
   Only the requested page's bodies enter the bounded log; the pending source
-  batch is at most one persisted turn, which can itself be large. No wire or
-  persisted-format migration is required; all controllers retain `read_stream`.
-  `limit` is a budget for history reads: a page grows to the first record of its
+  batch is at most one persisted turn, which can itself be large. No persisted
+  migration is required; the optional wire fields keep `read_stream` compatible.
+  In legacy record paging, `limit` is a budget: a page grows to the first record of its
   oldest turn so no turn splits across pages, within the hard event and byte
   bounds. Controllers must not assume a page holds at most `limit` events.
   Root records carry optional `turnRecordIds` membership. The Rust subscriber
@@ -149,7 +160,7 @@ cargo test -p openbitfun-services-integrations --no-default-features --features
 cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-ssh-concrete --lib remote_ssh::relay_deploy::tests::
 cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-connect --lib remote_connect::account::tests
 cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-connect --lib remote_connect::relay_client::tests::
-cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-connect --lib remote_connect::host_stream::tests::
+cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-connect --lib remote_connect::host_stream::
 cargo test --locked -p openbitfun-services-integrations --no-default-features --features remote-connect --lib remote_connect::host_stream_subscriber::tests::
 cargo test -p openbitfun-services-integrations --no-default-features --features file-watch --test file_watch_contracts
 cargo test --locked -p openbitfun-services-integrations --no-default-features --features workspace-search --test workspace_search_contracts
diff --git a/src/crates/services/services-integrations/src/remote_connect.rs b/src/crates/services/services-integrations/src/remote_connect.rs
index 3f1bc7cf9f..bcf40734b7 100644
--- a/src/crates/services/services-integrations/src/remote_connect.rs
+++ b/src/crates/services/services-integrations/src/remote_connect.rs
@@ -572,7 +572,7 @@ pub const REMOTE_CAPABILITY_PLAN_BUILD_V1: &str = "plan_build_v1";
 /// must check this string before offering the write; a host without it can
 /// still answer `get_model_catalog` read-only.
 pub const REMOTE_CAPABILITY_DEVICE_MODEL_DEFAULTS_V1: &str = "device_model_defaults_v1";
-pub use host_stream::REMOTE_CAPABILITY_HOST_STREAM_V1;
+pub use host_stream::{REMOTE_CAPABILITY_HOST_STREAM_V1, REMOTE_CAPABILITY_TURN_HISTORY_V1};
 
 fn remote_host_capabilities() -> Vec<String> {
     vec![
@@ -586,6 +586,7 @@ fn remote_host_capabilities() -> Vec<String> {
         REMOTE_CAPABILITY_USER_QUESTION_INTERACTION_V1.to_string(),
         REMOTE_CAPABILITY_BACKGROUND_RESULT_DELIVERY_V1.to_string(),
         REMOTE_CAPABILITY_HOST_STREAM_V1.to_string(),
+        REMOTE_CAPABILITY_TURN_HISTORY_V1.to_string(),
         REMOTE_CAPABILITY_DEVICE_MODEL_DEFAULTS_V1.to_string(),
     ]
 }
diff --git a/src/crates/services/services-integrations/src/remote_connect/host_stream.rs b/src/crates/services/services-integrations/src/remote_connect/host_stream.rs
index acf19362e8..72ccedb0de 100644
--- a/src/crates/services/services-integrations/src/remote_connect/host_stream.rs
+++ b/src/crates/services/services-integrations/src/remote_connect/host_stream.rs
@@ -14,6 +14,10 @@ use std::{
     time::{Duration, Instant},
 };
 
+mod turn_history;
+use turn_history::TurnSnapshot;
+pub use turn_history::{TurnHistoryPage, TurnHistoryRequest};
+
 /// Contains a separator rejected by runtime Session IDs, so control metadata
 /// cannot alias a user's session.
 pub const HOST_CATALOG_ID: &str = "@host/catalog";
@@ -21,6 +25,7 @@ pub const HOST_CATALOG_ID: &str = "@host/catalog";
 pub const HOST_STREAM_CHANGED_EVENT: &str = "host-stream-changed";
 /// Advertised in `get_workspace_info.capabilities` by hosts serving `read_stream`.
 pub const REMOTE_CAPABILITY_HOST_STREAM_V1: &str = "host_stream_v1";
+pub const REMOTE_CAPABILITY_TURN_HISTORY_V1: &str = "host_stream_turn_history_v1";
 /// Returned to controllers that still ask for a relay-stored session key.
 pub const RELAY_SESSION_HISTORY_RETIRED_MESSAGE: &str = "Relay-stored session history has been retired; session content is now read directly from the online host. Update the controlling app to continue.";
 
@@ -59,6 +64,9 @@ pub struct StreamPage {
     /// Older history was evicted from host memory; `has_more=false` then means
     /// "unavailable", not "complete".
     pub truncated: bool,
+    /// Present only when the host accepted the optional single-Turn read offer.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub turn_history: Option<TurnHistoryPage>,
 }
 
 /// A stream read request as carried by `RemoteCommand::ReadStream`.
@@ -79,6 +87,9 @@ pub struct StreamReadRequest {
     /// Keep (or start) receiving change hints for this stream.
     #[serde(default)]
     pub subscribe: bool,
+    /// Optional read negotiation. Older hosts ignore it and return ordinary pages.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub turn_history: Option<TurnHistoryRequest>,
 }
 
 /// Delivers an encrypted `DeviceEvent` hint to one subscribed device. Hosts own
@@ -143,6 +154,10 @@ struct StreamLog {
     truncated: bool,
     subscribers: HashMap<String, Instant>,
     last_activity: Instant,
+    turn_snapshots: HashMap<String, TurnSnapshot>,
+    /// Snapshot identities participate in tombstones, but must not suppress a
+    /// later live publication that other subscribers have not received yet.
+    snapshot_record_turns: HashMap<String, String>,
 }
 
 impl StreamLog {
@@ -158,6 +173,8 @@ impl StreamLog {
             truncated: false,
             subscribers: HashMap::new(),
             last_activity: Instant::now(),
+            turn_snapshots: HashMap::new(),
+            snapshot_record_turns: HashMap::new(),
         }
     }
 
@@ -358,6 +375,7 @@ impl StreamLog {
             cursor: self.latest(),
             oldest_seq: self.oldest(),
             truncated: self.truncated,
+            turn_history: None,
         })
     }
 }
@@ -471,6 +489,10 @@ impl HostStreamHub {
                 let now = Instant::now();
                 state.streams.retain(|_, log| {
                     log.subscribers.retain(|_, expires| *expires > now);
+                    log.turn_snapshots.retain(|_, snapshot| {
+                        now.duration_since(snapshot.last_activity) < STREAM_GRACE
+                            && log.subscribers.contains_key(&snapshot.device)
+                    });
                     !log.subscribers.is_empty()
                         || now.duration_since(log.last_activity) < STREAM_GRACE
                 });
@@ -553,7 +575,10 @@ impl HostStreamHub {
         let Some(log) = state.streams.get_mut(session_id) else {
             return false;
         };
-        if log.history.is_none() {
+        if log.history.is_none()
+            && log.turn_snapshots.is_empty()
+            && log.snapshot_record_turns.is_empty()
+        {
             return false;
         }
         let subscribers = std::mem::take(&mut log.subscribers);
@@ -595,6 +620,9 @@ impl HostStreamHub {
         F: FnMut(Option<usize>) -> Fut,
         Fut: std::future::Future<Output = Result<HistoryBatch>>,
     {
+        if let Some(history) = &request.turn_history {
+            return self.read_turn_history(device, request, history, load).await;
+        }
         if request.after.is_some() && request.before.is_some() {
             bail!("read_stream accepts either after or before, not both");
         }
@@ -758,6 +786,8 @@ impl HostStreamHub {
         let mut state = self.lock();
         if let Some(log) = state.streams.get_mut(stream_id) {
             log.subscribers.remove(source_device_id);
+            log.turn_snapshots
+                .retain(|_, snapshot| snapshot.device != source_device_id);
             log.last_activity = Instant::now();
         }
     }
@@ -769,6 +799,8 @@ impl HostStreamHub {
         for log in state.streams.values_mut() {
             log.subscribers
                 .retain(|device, _| online_device_ids.iter().any(|id| id == device));
+            log.turn_snapshots
+                .retain(|_, snapshot| online_device_ids.contains(&snapshot.device));
         }
     }
 
@@ -930,11 +962,16 @@ fn diff_records(
     let removed: Vec<String> = log
         .record_index
         .iter()
-        .filter(|(id, entry)| !present.contains(*id) && (full || scope.contains(&entry.turn)))
+        .map(|(id, entry)| (id, &entry.turn))
+        .chain(log.snapshot_record_turns.iter())
+        .filter(|(id, turn)| !present.contains(*id) && (full || scope.contains(*turn)))
         .map(|(id, _)| id.clone())
+        .collect::<HashSet<_>>()
+        .into_iter()
         .collect();
     for id in removed {
         log.record_index.remove(&id);
+        log.snapshot_record_turns.remove(&id);
         changed.push(serde_json::json!({"sessionId":session_id,"id":id,"deleted":true}));
     }
     if changed.is_empty() {
diff --git a/src/crates/services/services-integrations/src/remote_connect/host_stream/turn_history.rs b/src/crates/services/services-integrations/src/remote_connect/host_stream/turn_history.rs
new file mode 100644
index 0000000000..68d99295d1
--- /dev/null
+++ b/src/crates/services/services-integrations/src/remote_connect/host_stream/turn_history.rs
@@ -0,0 +1,546 @@
+//! Optional single-Turn snapshots over the existing encrypted stream RPC.
+//! The source, replica and live stream keep their owners. A snapshot only pins
+//! one source read across bounded packets; it is not an offline history cache.
+use super::*;
+
+const VERSION: u32 = 1;
+
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct TurnHistoryRequest {
+    pub version: u32,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub before_turn: Option<usize>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub snapshot_id: Option<String>,
+    #[serde(default)]
+    pub offset: usize,
+}
+
+impl TurnHistoryRequest {
+    pub fn latest() -> Self {
+        Self {
+            version: VERSION,
+            before_turn: None,
+            snapshot_id: None,
+            offset: 0,
+        }
+    }
+}
+
+/// Echoing version 1 accepts the controller's offer. An absent field is an
+/// older host, so the controller must keep the ordinary stream-page reader.
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+pub struct TurnHistoryPage {
+    pub version: u32,
+    pub snapshot_id: String,
+    pub turn_id: Option<String>,
+    pub record_count: usize,
+    pub offset: usize,
+    pub next_offset: Option<usize>,
+    pub before_turn: Option<usize>,
+}
+
+pub(super) struct TurnSnapshot {
+    pub(super) device: String,
+    pub(super) last_activity: Instant,
+    bytes: usize,
+    cursor: u64,
+    before_turn: Option<usize>,
+    turn_id: Option<String>,
+    events: Vec<(StreamEvent, usize)>,
+}
+
+impl HostStreamHub {
+    pub(super) async fn read_turn_history<F, Fut>(
+        &self,
+        device: &str,
+        request: &StreamReadRequest,
+        history: &TurnHistoryRequest,
+        mut load: F,
+    ) -> Result<StreamPage>
+    where
+        F: FnMut(Option<usize>) -> Fut,
+        Fut: std::future::Future<Output = Result<HistoryBatch>>,
+    {
+        if history.version != VERSION {
+            bail!("Unsupported Turn history version");
+        }
+        if request.stream_id.is_empty() || request.after.is_some() || request.before.is_some() {
+            bail!("Turn history reads cannot use event cursors");
+        }
+        if history.snapshot_id.is_none() && history.offset != 0 {
+            bail!("Turn history offset requires a snapshot");
+        }
+        let gate = self.source_gate(&request.stream_id).await;
+        let _source = gate.lock().await;
+        let cursor = {
+            let mut state = self.lock();
+            let log = state
+                .streams
+                .entry(request.stream_id.clone())
+                .or_insert_with(Self::paged_log);
+            // A materialized but empty legacy log has no positive revision yet.
+            if log.latest() == 0 {
+                log.next_seq = HISTORY_SEQUENCE_CEILING;
+            }
+            log.last_activity = Instant::now();
+            if request.subscribe {
+                log.subscribers
+                    .insert(device.to_owned(), Instant::now() + SUBSCRIPTION_LEASE);
+            }
+            if request.epoch.is_some_and(|epoch| epoch != log.epoch) {
+                // No stale snapshot content: the normal epoch fence tells the
+                // reader to reopen, including after undo/import/host restart.
+                return log.read(&request.stream_id, request);
+            }
+            if let Some(id) = &history.snapshot_id {
+                return log.read_turn_snapshot(
+                    device,
+                    &request.stream_id,
+                    id,
+                    history.offset,
+                    request.limit,
+                );
+            }
+            // Capture BEFORE IO. Controls may append while the source is read;
+            // catch-up must still deliver them. Canonical record publication
+            // shares this source gate, so subsequent revisions exceed this fence.
+            log.latest()
+        };
+        let started = Instant::now();
+        let batch = load(history.before_turn).await?;
+        if history
+            .before_turn
+            .zip(batch.before)
+            .is_some_and(|(old, next)| next >= old)
+        {
+            bail!("Turn history source did not advance");
+        }
+        let mut turn_id = None;
+        let mut identities = HashSet::new();
+        let mut events = Vec::with_capacity(batch.records.len());
+        let mut bytes = 0;
+        for mut payload in batch.records {
+            if payload["sessionId"].as_str() != Some(request.stream_id.as_str()) {
+                bail!("Turn snapshot session identity mismatch");
+            }
+            let turn = payload
+                .pointer("/turn/turnId")
+                .and_then(Value::as_str)
+                .context("Turn snapshot identity missing")?
+                .to_owned();
+            if turn_id.as_ref().is_some_and(|selected| selected != &turn) {
+                bail!("Turn history source returned more than one Turn");
+            }
+            turn_id = Some(turn);
+            let id = payload["id"]
+                .as_str()
+                .context("Turn snapshot record identity missing")?
+                .to_owned();
+            if !identities.insert(id) {
+                bail!("Duplicate Turn snapshot record");
+            }
+            // These records describe the same atomic source snapshot at the
+            // receive fence. They do not allocate live event sequences. A later
+            // live upsert/tombstone has a greater revision in the same replica.
+            payload["revision"] = cursor.into();
+            let size = estimate_bytes(&payload) + 48;
+            bytes += size;
+            events.push((
+                StreamEvent {
+                    seq: cursor,
+                    event: "session-record".into(),
+                    payload,
+                },
+                size,
+            ));
+        }
+        if let Some(turn) = &turn_id {
+            if !identities.contains(&format!("turn/{turn}")) {
+                bail!("Turn snapshot root missing");
+            }
+        } else if batch.before.is_some() {
+            bail!("Empty Turn history source did not exhaust history");
+        }
+        let id = format!(
+            "{:016x}{:016x}",
+            rand::random::<u64>(),
+            rand::random::<u64>()
+        );
+        let mut state = self.lock();
+        let log = state
+            .streams
+            .get_mut(&request.stream_id)
+            .context("History stream expired")?;
+        for record in identities {
+            log.snapshot_record_turns
+                .insert(record, turn_id.clone().unwrap());
+        }
+        log.turn_snapshots.insert(
+            id.clone(),
+            TurnSnapshot {
+                device: device.to_owned(),
+                last_activity: Instant::now(),
+                bytes,
+                cursor,
+                before_turn: batch.before,
+                turn_id,
+                events,
+            },
+        );
+        // Keep only reconstructable bounded state. As with the source's pending
+        // Turn, one oversized Turn may exceed the budget; competing snapshots
+        // are evicted explicitly and their readers receive a retryable error.
+        let now = Instant::now();
+        log.turn_snapshots.retain(|key, snapshot| {
+            key == &id || now.duration_since(snapshot.last_activity) < STREAM_GRACE
+        });
+        while log.turn_snapshots.len() > 1
+            && log
+                .turn_snapshots
+                .values()
+                .map(|snapshot| snapshot.bytes)
+                .sum::<usize>()
+                > STREAM_BYTES_BUDGET
+        {
+            let oldest = log
+                .turn_snapshots
+                .iter()
+                .filter(|(key, _)| *key != &id)
+                .min_by_key(|(_, snapshot)| snapshot.last_activity)
+                .map(|(key, _)| key.clone())
+                .unwrap();
+            log.turn_snapshots.remove(&oldest);
+        }
+        log::debug!(
+            "Read single Turn history: stream_id={} records={} bytes={} has_more={} elapsed_ms={}",
+            request.stream_id,
+            log.turn_snapshots[&id].events.len(),
+            bytes,
+            batch.before.is_some(),
+            started.elapsed().as_millis()
+        );
+        log.read_turn_snapshot(device, &request.stream_id, &id, 0, request.limit)
+    }
+}
+
+impl StreamLog {
+    fn read_turn_snapshot(
+        &mut self,
+        device: &str,
+        stream: &str,
+        id: &str,
+        offset: usize,
+        limit: Option<usize>,
+    ) -> Result<StreamPage> {
+        let snapshot = self
+            .turn_snapshots
+            .get_mut(id)
+            .context("Turn history snapshot expired; retry the read")?;
+        if snapshot.device != device {
+            bail!("Turn history snapshot belongs to another controller");
+        }
+        if offset > snapshot.events.len() {
+            bail!("Invalid Turn history snapshot offset");
+        }
+        snapshot.last_activity = Instant::now();
+        let mut bytes = 0;
+        let mut events = Vec::new();
+        for (event, size) in snapshot.events.iter().skip(offset) {
+            if !events.is_empty()
+                && (events.len()
+                    >= limit
+                        .unwrap_or(DEFAULT_PAGE_EVENTS)
+                        .clamp(1, MAX_PAGE_EVENTS)
+                    || bytes + size > PAGE_BYTES)
+            {
+                break;
+            }
+            bytes += size;
+            events.push(event.clone());
+        }
+        let end = offset + events.len();
+        Ok(StreamPage {
+            stream_id: stream.to_owned(),
+            epoch: self.epoch,
+            events,
+            has_more: snapshot.before_turn.is_some(),
+            cursor: snapshot.cursor,
+            oldest_seq: snapshot.cursor,
+            truncated: false,
+            turn_history: Some(TurnHistoryPage {
+                version: VERSION,
+                snapshot_id: id.to_owned(),
+                turn_id: snapshot.turn_id.clone(),
+                record_count: snapshot.events.len(),
+                offset,
+                next_offset: (end < snapshot.events.len()).then_some(end),
+                before_turn: snapshot.before_turn,
+            }),
+        })
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::sync::atomic::{AtomicUsize, Ordering};
+
+    struct Quiet;
+    impl HostStreamNotifier for Quiet {
+        fn notify(&self, _: &str, _: Value) {}
+    }
+    fn request() -> StreamReadRequest {
+        StreamReadRequest {
+            stream_id: "s".into(),
+            subscribe: true,
+            turn_history: Some(TurnHistoryRequest::latest()),
+            ..Default::default()
+        }
+    }
+    pub(super) fn records(index: usize, items: usize) -> Vec<Value> {
+        let turn = serde_json::json!({"turnId":format!("t{index}"),"sessionId":"s","turnIndex":index,"status":"completed"});
+        let mut records =
+            vec![serde_json::json!({"sessionId":"s","id":format!("turn/t{index}"),"turn":turn})];
+        for item in 0..items {
+            records.push(
+                serde_json::json!({"sessionId":"s","id":format!("item/{index}-{item}"),"turn":turn,
+                "round":{"id":format!("r{index}"),"turnId":format!("t{index}"),"roundIndex":0},
+                "item":{"type":"text","data":{"id":format!("{index}-{item}"),"content":"body"}}}),
+            );
+        }
+        records
+    }
+    fn continuation(page: &StreamPage) -> StreamReadRequest {
+        let history = page.turn_history.as_ref().unwrap();
+        StreamReadRequest {
+            epoch: Some(page.epoch),
+            turn_history: Some(TurnHistoryRequest {
+                snapshot_id: Some(history.snapshot_id.clone()),
+                offset: history.next_offset.unwrap(),
+                ..TurnHistoryRequest::latest()
+            }),
+            ..request()
+        }
+    }
+
+    #[tokio::test]
+    async fn opens_only_the_last_turn_independently_of_total_history_size_or_live_event_order() {
+        let hub = HostStreamHub::start(Arc::new(Quiet));
+        hub.activate("s");
+        hub.synchronize_records("s".into(), false, || async { Ok(records(0, 2)) })
+            .await
+            .unwrap();
+        let reads = AtomicUsize::new(0);
+        let first = hub
+            .read_history("desktop", &request(), |before| {
+                reads.fetch_add(1, Ordering::SeqCst);
+                assert!(before.is_none());
+                async {
+                    Ok(HistoryBatch {
+                        records: records(999, 1),
+                        before: Some(999),
+                    })
+                }
+            })
+            .await
+            .unwrap();
+        assert_eq!(reads.load(Ordering::SeqCst), 1);
+        assert_eq!(first.events.len(), 2);
+        assert!(first
+            .events
+            .iter()
+            .all(|event| event.payload["turn"]["turnIndex"] == 999));
+        assert_eq!(first.turn_history.as_ref().unwrap().next_offset, None);
+        assert!(first.has_more);
+        // No source scan to fill 48/200 events, even for a two-record last Turn.
+        let older_request = StreamReadRequest {
+            epoch: Some(first.epoch),
+            turn_history: Some(TurnHistoryRequest {
+                before_turn: first.turn_history.as_ref().unwrap().before_turn,
+                ..TurnHistoryRequest::latest()
+            }),
+            ..request()
+        };
+        let older = hub
+            .read_history("desktop", &older_request, |before| {
+                assert_eq!(before, Some(999));
+                async {
+                    Ok(HistoryBatch {
+                        records: records(998, 1),
+                        before: Some(998),
+                    })
+                }
+            })
+            .await
+            .unwrap();
+        assert_eq!(older.turn_history.unwrap().turn_id.as_deref(), Some("t998"));
+    }
+
+    #[tokio::test]
+    async fn large_turn_packets_are_immutable_and_live_updates_and_deletions_resume_after_the_fence(
+    ) {
+        let hub = HostStreamHub::start(Arc::new(Quiet));
+        let first = hub
+            .read_history(
+                "desktop",
+                &StreamReadRequest {
+                    limit: Some(2),
+                    ..request()
+                },
+                |_| async {
+                    Ok(HistoryBatch {
+                        records: records(5, 5),
+                        before: Some(5),
+                    })
+                },
+            )
+            .await
+            .unwrap();
+        assert_eq!(first.events.len(), 2);
+        let mut changed = records(5, 4); // Delete the final item while the snapshot is in flight.
+        changed[1]["item"]["data"]["content"] = "new live content".into();
+        hub.synchronize_records("s".into(), false, || async { Ok(changed) })
+            .await
+            .unwrap();
+        let second_request = continuation(&first);
+        let second = hub
+            .read_history("desktop", &second_request, |_| async {
+                panic!("continuations never reread the source")
+            })
+            .await
+            .unwrap();
+        let retried = hub
+            .read_history("desktop", &second_request, |_| async {
+                panic!("retry is the same immutable packet")
+            })
+            .await
+            .unwrap();
+        assert_eq!(second, retried);
+        assert_eq!(second.events.len(), 4);
+        assert!(second
+            .events
+            .iter()
+            .all(|event| event.payload["item"]["data"]["content"] == "body"));
+        assert_eq!(second.cursor, first.cursor);
+        assert_eq!(second.turn_history.unwrap().next_offset, None);
+        let live = hub
+            .read(
+                "desktop",
+                &StreamReadRequest {
+                    stream_id: "s".into(),
+                    after: Some(first.cursor),
+                    epoch: Some(first.epoch),
+                    subscribe: true,
+                    ..Default::default()
+                },
+            )
+            .unwrap();
+        assert!(live.events.iter().all(|event| event.seq > first.cursor));
+        assert!(live
+            .events
+            .iter()
+            .any(|event| event.payload["item"]["data"]["content"] == "new live content"));
+        assert!(live
+            .events
+            .iter()
+            .any(|event| event.payload["id"] == "item/5-4" && event.payload["deleted"] == true));
+    }
+
+    #[tokio::test]
+    async fn packets_keep_byte_bounds_and_snapshots_are_controller_scoped_and_epoch_fenced() {
+        let hub = HostStreamHub::start(Arc::new(Quiet));
+        let mut body = records(0, 2);
+        body[1]["item"]["data"]["content"] = "a".repeat(PAGE_BYTES).into();
+        let first = hub
+            .read_history("desktop", &request(), |_| {
+                let records = body.clone();
+                async {
+                    Ok(HistoryBatch {
+                        records,
+                        before: None,
+                    })
+                }
+            })
+            .await
+            .unwrap();
+        assert_eq!(first.events.len(), 1);
+        let next = continuation(&first);
+        assert!(hub
+            .read_history("other", &next, |_| async { unreachable!() })
+            .await
+            .is_err());
+        let second = hub
+            .read_history("desktop", &next, |_| async { unreachable!() })
+            .await
+            .unwrap();
+        assert_eq!(second.events.len(), 1); // A single oversized event travels alone.
+        assert!(hub.invalidate_paged_history("s").await);
+        let stale = hub
+            .read_history("desktop", &continuation(&second), |_| async {
+                unreachable!()
+            })
+            .await
+            .unwrap();
+        assert_ne!(stale.epoch, first.epoch);
+        assert!(stale.turn_history.is_none());
+        assert!(stale.events.is_empty());
+    }
+
+    #[tokio::test]
+    async fn live_publication_is_not_suppressed_by_a_snapshot_seen_by_only_one_controller() {
+        let hub = HostStreamHub::start(Arc::new(Quiet));
+        let snapshot = hub
+            .read_history("a", &request(), |_| async {
+                Ok(HistoryBatch {
+                    records: records(0, 1),
+                    before: None,
+                })
+            })
+            .await
+            .unwrap();
+        hub.synchronize_records("s".into(), false, || async { Ok(records(0, 1)) })
+            .await
+            .unwrap();
+        let live = hub
+            .read(
+                "b",
+                &StreamReadRequest {
+                    stream_id: "s".into(),
+                    after: Some(snapshot.cursor),
+                    ..Default::default()
+                },
+            )
+            .unwrap();
+        assert_eq!(live.events.len(), 2);
+        hub.unsubscribe("a", "s");
+        assert!(hub.lock().streams["s"].turn_snapshots.is_empty());
+    }
+
+    #[test]
+    fn legacy_wire_shapes_round_trip_without_new_fields_and_ignore_the_read_offer() {
+        let old = serde_json::json!({"stream_id":"s","subscribe":true,"limit":48});
+        let read: StreamReadRequest = serde_json::from_value(old.clone()).unwrap();
+        assert!(read.turn_history.is_none());
+        assert_eq!(serde_json::to_value(read).unwrap(), old);
+        #[derive(Deserialize)]
+        struct LegacyRequest {
+            stream_id: String,
+            limit: Option<usize>,
+            subscribe: bool,
+        }
+        let offered = serde_json::to_value(StreamReadRequest {
+            limit: Some(48),
+            ..request()
+        })
+        .unwrap();
+        let legacy: LegacyRequest = serde_json::from_value(offered).unwrap();
+        assert_eq!(legacy.stream_id, "s");
+        assert_eq!(legacy.limit, Some(48));
+        assert!(legacy.subscribe);
+        let old_page = serde_json::json!({"stream_id":"s","epoch":1,"events":[],"has_more":false,"cursor":1,"oldest_seq":1,"truncated":false});
+        let page: StreamPage = serde_json::from_value(old_page.clone()).unwrap();
+        assert!(page.turn_history.is_none());
+        assert_eq!(serde_json::to_value(page).unwrap(), old_page);
+    }
+}
diff --git a/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs b/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
index c54181d994..142586996d 100644
--- a/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
+++ b/src/crates/services/services-integrations/src/remote_connect/host_stream_subscriber.rs
@@ -3,7 +3,7 @@
 //! RPC, and closing the subscriber only stops observing that host.
 use super::{
     account::{AccountClient, AccountSession, StreamHint},
-    host_stream::{StreamPage, StreamReadRequest},
+    host_stream::{StreamPage, StreamReadRequest, TurnHistoryRequest},
 };
 use anyhow::{anyhow, bail, Context, Result};
 use serde::Deserialize;
@@ -68,6 +68,7 @@ impl StreamTransport for DeviceRpcTransport {
             "epoch": request.epoch,
             "limit": request.limit,
             "subscribe": request.subscribe,
+            "turn_history": request.turn_history,
         });
         let response = AccountClient::new()
             .device_rpc(
@@ -114,6 +115,7 @@ pub struct HostStreamSubscriber {
     unsubscribe: Option<Box<dyn FnOnce() + Send>>,
 }
 
+#[derive(Clone)]
 struct Reader {
     transport: Arc<dyn StreamTransport>,
     session_id: String,
@@ -122,6 +124,9 @@ struct Reader {
     cursor: u64,
     oldest: u64,
     has_more: bool,
+    /// Set only after a host acknowledges the optional Turn-history offer.
+    turn_history: bool,
+    before_turn: Option<usize>,
 }
 
 impl Reader {
@@ -138,7 +143,17 @@ impl Reader {
     /// Old hosts have no such proof: finish their bounded pages before exposing
     /// history, rather than guessing from a header, count, or elapsed time.
     async fn read_history(&self, request: StreamReadRequest) -> Result<StreamPage> {
+        let expected_epoch = request.epoch;
         let mut page = self.read(request).await?;
+        if expected_epoch.is_some_and(|epoch| epoch != page.epoch) {
+            return Ok(page);
+        }
+        if page.turn_history.is_some() {
+            return self.join_turn_snapshot(page).await;
+        }
+        if self.turn_history && expected_epoch.is_some() {
+            bail!("The host stopped supporting Turn history; reopen the session to retry");
+        }
         let mut record_ids = HashSet::<String>::new();
         let mut turns = HashMap::<String, Option<(u64, Vec<String>)>>::new();
         let mut batches = Vec::new();
@@ -228,12 +243,110 @@ impl Reader {
         }
     }
 
-    fn emit_page(&self, page: &StreamPage) -> Result<()> {
+    async fn join_turn_snapshot(&self, mut page: StreamPage) -> Result<StreamPage> {
+        let snapshot = page
+            .turn_history
+            .clone()
+            .context("Turn history acknowledgement missing")?;
+        if snapshot.version != 1 || snapshot.offset != 0 {
+            bail!("Invalid Turn history acknowledgement");
+        }
+        let mut events = Vec::new();
+        loop {
+            let part = page
+                .turn_history
+                .as_ref()
+                .context("Turn history continuation is unsupported")?;
+            if part.version != snapshot.version
+                || part.snapshot_id != snapshot.snapshot_id
+                || part.turn_id != snapshot.turn_id
+                || part.record_count != snapshot.record_count
+                || part.before_turn != snapshot.before_turn
+                || part.offset != events.len()
+                || page.has_more != snapshot.before_turn.is_some()
+            {
+                bail!("Turn history snapshot changed during the read");
+            }
+            let next = part.next_offset;
+            events.append(&mut page.events);
+            if events.len() > snapshot.record_count {
+                bail!("Turn history exceeded its record count");
+            }
+            let Some(offset) = next else {
+                break;
+            };
+            if offset != events.len() || offset <= part.offset || offset >= snapshot.record_count {
+                bail!("Turn history continuation did not advance");
+            }
+            let older = self
+                .read(StreamReadRequest {
+                    stream_id: self.session_id.clone(),
+                    epoch: Some(page.epoch),
+                    subscribe: true,
+                    turn_history: Some(TurnHistoryRequest {
+                        version: 1,
+                        snapshot_id: Some(snapshot.snapshot_id.clone()),
+                        offset,
+                        before_turn: None,
+                    }),
+                    ..Default::default()
+                })
+                .await?;
+            if older.epoch != page.epoch || older.cursor != page.cursor {
+                bail!(
+                    "Session history restarted while reading a Turn; reopen the session to retry"
+                );
+            }
+            page = older;
+        }
+        if events.len() != snapshot.record_count {
+            bail!("Incomplete Turn history snapshot");
+        }
+        let mut ids = HashSet::new();
+        for event in &events {
+            if event.event != "session-record"
+                || event.payload["sessionId"].as_str() != Some(self.session_id.as_str())
+                || event
+                    .payload
+                    .pointer("/turn/turnId")
+                    .and_then(|id| id.as_str())
+                    != snapshot.turn_id.as_deref()
+                || event.payload["revision"].as_u64() != Some(page.cursor)
+                || !event.payload["id"]
+                    .as_str()
+                    .is_some_and(|id| ids.insert(id))
+            {
+                bail!("Invalid Turn history snapshot record");
+            }
+        }
+        if let Some(turn) = &snapshot.turn_id {
+            if !ids.contains(format!("turn/{turn}").as_str()) {
+                bail!("Turn history snapshot root missing");
+            }
+        } else if !events.is_empty() {
+            bail!("Turn history snapshot identity missing");
+        }
+        page.events = events;
+        page.turn_history = Some(super::host_stream::TurnHistoryPage {
+            offset: 0,
+            next_offset: None,
+            ..snapshot
+        });
+        Ok(page)
+    }
+
+    fn emit_page(&self, page: &StreamPage, history: bool) -> Result<()> {
         for event in &page.events {
+            let mut payload = event.payload.clone();
+            if history && event.event == "session-record" {
+                // Controller-local annotation: the frontend stages only replay
+                // records, so an older read cannot hold up live output.
+                payload["historyReplay"] = true.into();
+            }
             (self.emit)(SessionEvent {
                 session_id: self.session_id.clone(),
                 event: event.event.clone(),
-                payload: event.payload.clone(),
+                payload,
             })?;
         }
         Ok(())
@@ -243,17 +356,19 @@ impl Reader {
         (self.emit)(SessionEvent {
             session_id: self.session_id.clone(),
             event: "relay://session-ready".into(),
-            payload: serde_json::json!({"sessionId":self.session_id,"hasMore":self.has_more,"oldestSeq":self.oldest,"cursor":self.cursor}),
+            payload: serde_json::json!({"sessionId":self.session_id,"hasMore":self.has_more,"oldestSeq":self.oldest,"cursor":self.cursor,"historyBatches":true}),
         })
     }
 
     /// Latest page first, like opening a chat at its bottom.
     async fn resync(&mut self) -> Result<()> {
+        let started = std::time::Instant::now();
         let page = self
             .read_history(StreamReadRequest {
                 stream_id: self.session_id.clone(),
                 subscribe: true,
                 limit: Some(FIRST_PAGE_EVENTS),
+                turn_history: Some(TurnHistoryRequest::latest()),
                 ..Default::default()
             })
             .await?;
@@ -265,7 +380,14 @@ impl Reader {
             .map(|event| event.seq)
             .unwrap_or(page.cursor + 1);
         self.has_more = page.has_more;
-        self.emit_page(&page)?;
+        self.turn_history = page.turn_history.is_some();
+        self.before_turn = page
+            .turn_history
+            .as_ref()
+            .and_then(|history| history.before_turn);
+        log::debug!("Session first history ready: session_id={} turn_snapshot={} records={} has_more={} elapsed_ms={}",
+            self.session_id, self.turn_history, page.events.len(), page.has_more, started.elapsed().as_millis());
+        self.emit_page(&page, true)?;
         self.emit_ready()
     }
 
@@ -284,7 +406,7 @@ impl Reader {
             if page.epoch != self.epoch {
                 return Ok(false);
             }
-            self.emit_page(&page)?;
+            self.emit_page(&page, false)?;
             if let Some(last) = page.events.last() {
                 self.cursor = self.cursor.max(last.seq);
             }
@@ -307,31 +429,49 @@ impl Reader {
         self.resync().await
     }
 
-    async fn load_older(&mut self) -> Result<bool> {
-        if !self.has_more {
-            return Ok(true);
-        }
-        let page = self
-            .read_history(StreamReadRequest {
-                stream_id: self.session_id.clone(),
-                before: Some(self.oldest),
-                epoch: Some(self.epoch),
-                subscribe: true,
-                ..Default::default()
-            })
-            .await?;
+    async fn read_older_page(&self) -> Result<StreamPage> {
+        self.read_history(StreamReadRequest {
+            stream_id: self.session_id.clone(),
+            before: (!self.turn_history).then_some(self.oldest),
+            turn_history: self.turn_history.then(|| TurnHistoryRequest {
+                before_turn: self.before_turn,
+                ..TurnHistoryRequest::latest()
+            }),
+            epoch: Some(self.epoch),
+            subscribe: true,
+            ..Default::default()
+        })
+        .await
+    }
+
+    fn apply_older_page(&mut self, page: StreamPage) -> Result<bool> {
         if page.epoch != self.epoch {
             return Ok(false);
         }
-        self.emit_page(&page)?;
+        if self.turn_history && page.turn_history.is_none() {
+            bail!("The host stopped supporting Turn history; reopen the session to retry");
+        }
+        self.emit_page(&page, true)?;
         if let Some(first) = page.events.first() {
             self.oldest = first.seq;
         }
         self.has_more = page.has_more;
+        self.before_turn = page
+            .turn_history
+            .as_ref()
+            .and_then(|history| history.before_turn);
         self.emit_ready()?;
         Ok(true)
     }
 
+    async fn load_older(&mut self) -> Result<bool> {
+        if !self.has_more {
+            return Ok(true);
+        }
+        let page = self.read_older_page().await?;
+        self.apply_older_page(page)
+    }
+
     /// Announce a restarted stream. A full replay from the latest page always
     /// follows, so `resync` tells the controller to rebuild its records from
     /// that replay: the new epoch carries no tombstones for what it dropped.
@@ -387,6 +527,8 @@ impl HostStreamSubscriber {
             cursor: 0,
             oldest: 1,
             has_more: false,
+            turn_history: false,
+            before_turn: None,
         };
         // The first page is awaited so an unsupported or offline host fails the
         // open call instead of retrying silently in the background.
@@ -421,7 +563,38 @@ impl HostStreamSubscriber {
                 let result = match wake {
                     Wake::Refresh => reader.refresh().await,
                     Wake::Older(reply) => {
-                        let result = match reader.load_older().await {
+                        // A large historical Turn may span several RPCs. Its
+                        // immutable snapshot lets live catch-up keep running;
+                        // no user message or approval waits behind those bytes.
+                        let read = if reader.turn_history && reader.has_more {
+                            let history_reader = reader.clone();
+                            let page = history_reader.read_older_page();
+                            tokio::pin!(page);
+                            let result = loop {
+                                tokio::select! {
+                                    result = &mut page => break result,
+                                    hint = hints.recv() => {
+                                        let refresh = match hint {
+                                            Ok(Some(hint)) => reader.hint_is_new(&hint, &target),
+                                            Ok(None) | Err(broadcast::error::RecvError::Lagged(_)) => true,
+                                            Err(broadcast::error::RecvError::Closed) => return,
+                                        };
+                                        if refresh {
+                                            if let Err(failure) = reader.refresh().await {
+                                                error(describe_stream_error(&failure));
+                                            }
+                                            if reader.epoch != history_reader.epoch {
+                                                break Err(anyhow!("Session history restarted during the older read"));
+                                            }
+                                        }
+                                    }
+                                }
+                            };
+                            result.and_then(|page| reader.apply_older_page(page))
+                        } else {
+                            reader.load_older().await
+                        };
+                        let result = match read {
                             Ok(true) => Ok(()),
                             Ok(false) => {
                                 let _ = reader.gap("host stream restarted");
@@ -642,6 +815,7 @@ mod tests {
             cursor: 100,
             oldest_seq: 1,
             truncated: false,
+            turn_history: None,
         }
     }
     fn scripted_reader(
@@ -665,6 +839,8 @@ mod tests {
                 cursor: 0,
                 oldest: 1,
                 has_more: false,
+                turn_history: false,
+                before_turn: None,
             },
             transport,
             events,
@@ -771,6 +947,159 @@ mod tests {
         assert_eq!(events[2].event, "relay://session-ready");
     }
 
+    #[tokio::test]
+    async fn turn_snapshot_chunks_publish_once_and_reject_a_changed_snapshot_without_fragments() {
+        for invalid in [false, true] {
+            let mut first = history_page(8, vec![record("s", "one", "completed"), item("a")], true);
+            let mut next = history_page(5, vec![item("b")], true);
+            for (page, offset, next_offset) in [(&mut first, 0, Some(2)), (&mut next, 2, None)] {
+                for event in &mut page.events {
+                    event.seq = 100;
+                    event.payload["revision"] = 100.into();
+                }
+                page.turn_history = Some(super::super::host_stream::TurnHistoryPage {
+                    version: 1,
+                    snapshot_id: "snapshot".into(),
+                    turn_id: Some("one".into()),
+                    record_count: 3,
+                    offset,
+                    next_offset,
+                    before_turn: Some(1),
+                });
+            }
+            if invalid {
+                next.cursor += 1;
+            }
+            let (mut reader, transport, events) = scripted_reader(vec![first, next]);
+            let result = reader.resync().await;
+            if invalid {
+                assert!(result.is_err());
+                assert!(events.lock().unwrap().is_empty());
+            } else {
+                result.unwrap();
+                assert_eq!(transport.reads.lock().unwrap().len(), 2);
+                assert!(reader.turn_history);
+                assert_eq!(reader.before_turn, Some(1));
+                let emitted = events.lock().unwrap();
+                assert_eq!(emitted.len(), 4);
+                assert!(emitted[..3]
+                    .iter()
+                    .all(|event| event.payload["historyReplay"] == true));
+                assert_eq!(emitted[3].event, "relay://session-ready");
+            }
+        }
+    }
+
+    #[tokio::test]
+    async fn older_snapshot_io_does_not_block_live_catch_up_and_never_publishes_half_a_turn() {
+        use super::super::host_stream::HistoryBatch;
+        use std::sync::atomic::{AtomicUsize, Ordering};
+        struct Transport {
+            hub: Arc<HostStreamHub>,
+            blocked: tokio::sync::Notify,
+            release: tokio::sync::Notify,
+            reads: AtomicUsize,
+        }
+        #[async_trait::async_trait]
+        impl StreamTransport for Transport {
+            async fn read_stream(&self, request: StreamReadRequest) -> Result<StreamPage> {
+                if request
+                    .turn_history
+                    .as_ref()
+                    .is_some_and(|history| history.offset > 0)
+                {
+                    self.blocked.notify_one();
+                    self.release.notified().await;
+                }
+                self.hub
+                    .read_history("controller", &request, |before| {
+                        self.reads.fetch_add(1, Ordering::SeqCst);
+                        async move {
+                            if before.is_none() {
+                                return Ok(HistoryBatch {
+                                    records: vec![record("s", "latest", "inprogress")],
+                                    before: Some(1),
+                                });
+                            }
+                            assert_eq!(before, Some(1));
+                            let mut records = vec![record("s", "one", "completed")];
+                            records.extend((0..201).map(|index| item(&index.to_string())));
+                            Ok(HistoryBatch {
+                                records,
+                                before: None,
+                            })
+                        }
+                    })
+                    .await
+            }
+            async fn unsubscribe_stream(&self, session: &str) -> Result<()> {
+                self.hub.unsubscribe("controller", session);
+                Ok(())
+            }
+        }
+        let (hints, _) = broadcast::channel(16);
+        let hub = HostStreamHub::start(Arc::new(HintFanout(hints.clone(), "desktop".into())));
+        let transport = Arc::new(Transport {
+            hub: hub.clone(),
+            blocked: Default::default(),
+            release: Default::default(),
+            reads: AtomicUsize::new(0),
+        });
+        let events = Arc::new(Mutex::new(Vec::<SessionEvent>::new()));
+        let live = Arc::new(tokio::sync::Notify::new());
+        let output = events.clone();
+        let live_signal = live.clone();
+        let errors = Arc::new(Mutex::new(Vec::new()));
+        let failures = errors.clone();
+        let subscriber = HostStreamSubscriber::start_with_transport(
+            transport.clone(),
+            hints.subscribe(),
+            "desktop".into(),
+            "s".into(),
+            Arc::new(move |event| {
+                if event.payload["id"] == "turn/latest" && event.payload["historyReplay"].is_null()
+                {
+                    live_signal.notify_one();
+                }
+                output.lock().unwrap().push(event);
+                Ok(())
+            }),
+            Arc::new(move |error| failures.lock().unwrap().push(error)),
+        )
+        .await
+        .unwrap();
+        assert_eq!(transport.reads.load(Ordering::SeqCst), 1);
+        assert_eq!(events.lock().unwrap().len(), 2); // Only latest + ready.
+        let older = tokio::spawn(subscriber.load_older());
+        tokio::time::timeout(Duration::from_secs(2), transport.blocked.notified())
+            .await
+            .unwrap();
+        assert_eq!(events.lock().unwrap().len(), 2); // No older fragment escaped.
+        hub.synchronize_records("s".into(), false, || async {
+            Ok(vec![record("s", "latest", "completed")])
+        })
+        .await
+        .unwrap();
+        tokio::time::timeout(Duration::from_secs(2), live.notified())
+            .await
+            .unwrap();
+        assert!(!older.is_finished());
+        assert_eq!(events.lock().unwrap().len(), 3); // Live output arrived during blocked history IO.
+        transport.release.notify_one();
+        older.await.unwrap().unwrap();
+        let events = events.lock().unwrap();
+        assert_eq!(events.last().unwrap().event, "relay://session-ready");
+        assert_eq!(
+            events
+                .iter()
+                .filter(|event| event.payload["turn"]["turnId"] == "one")
+                .count(),
+            202
+        );
+        assert_eq!(transport.reads.load(Ordering::SeqCst), 2); // One source read per Turn, not per packet.
+        assert!(errors.lock().unwrap().is_empty());
+    }
+
     #[tokio::test]
     async fn opening_reads_the_latest_page_from_the_host_and_reports_ready() {
         let lab = lab();
diff --git a/src/crates/services/services-integrations/tests/remote_connect_contracts.rs b/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
index 7927f8848a..bd02a6201c 100644
--- a/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
+++ b/src/crates/services/services-integrations/tests/remote_connect_contracts.rs
@@ -53,7 +53,7 @@ use openbitfun_services_integrations::remote_connect::{
     REMOTE_CAPABILITY_DEVICE_MODEL_DEFAULTS_V1, REMOTE_CAPABILITY_DIALOG_STEER_V1,
     REMOTE_CAPABILITY_HARNESS_PROFILES_V1, REMOTE_CAPABILITY_HOST_STREAM_V1,
     REMOTE_CAPABILITY_PLAN_BUILD_V1, REMOTE_CAPABILITY_SESSION_ROLLBACK_V1,
-    REMOTE_FILE_MAX_CHUNK_BYTES, REMOTE_FILE_MAX_READ_BYTES,
+    REMOTE_CAPABILITY_TURN_HISTORY_V1, REMOTE_FILE_MAX_CHUNK_BYTES, REMOTE_FILE_MAX_READ_BYTES,
 };
 use std::path::PathBuf;
 use std::sync::{Arc, Mutex};
@@ -2371,6 +2371,7 @@ fn remote_connect_workspace_response_helpers_own_wire_shape() {
             "user_question_interaction_v1",
             "background_result_delivery_v1",
             REMOTE_CAPABILITY_HOST_STREAM_V1,
+            REMOTE_CAPABILITY_TURN_HISTORY_V1,
             REMOTE_CAPABILITY_DEVICE_MODEL_DEFAULTS_V1
         ])
     );
@@ -2621,6 +2622,7 @@ fn remote_connect_session_response_helpers_own_pagination_and_timestamps() {
             "user_question_interaction_v1",
             "background_result_delivery_v1",
             REMOTE_CAPABILITY_HOST_STREAM_V1,
+            REMOTE_CAPABILITY_TURN_HISTORY_V1,
             REMOTE_CAPABILITY_DEVICE_MODEL_DEFAULTS_V1
         ])
     );
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 1840efff55..c872621827 100644
--- a/src/web-ui/src/flow_chat/components/modern/AGENTS.md
+++ b/src/web-ui/src/flow_chat/components/modern/AGENTS.md
@@ -96,6 +96,10 @@ before reporting a defect as new.
 
 ## History Paging and the Anchor
 
+- Ordinary opens request only the last Turn on local, SSH and capable peer hosts.
+  Bookmark/search navigation retains its requested range. Optional adjacent
+  prefetch begins only after visible presentation and never recursively drains
+  history or fills a short last Turn's reserved blank space.
 - 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. `flowChatHistoryPager.ts` owns request eligibility;
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
index e3e892cc53..72506a5bff 100644
--- 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
@@ -12,7 +12,7 @@ re-keyed or scrolled by this boundary.
 
 All abstract marks finish fading before the transcript's outer paint layer
 reveals. Its presentation callback releases the existing two-paint barrier for
-background history completion, so measurable but still hidden text does not
+background history reads, so measurable but still hidden text does not
 count as a painted conversation. Interaction and focus stay guarded through
 that handoff. Session and surface-activation identity changes cancel old work;
 failures, inactive scenes,
@@ -23,6 +23,28 @@ The old `historyOpenIntentSpinner` appearance part remains a hidden compatibilit
 slot so installed appearance packages still validate; the new visual is exposed
 through `historySkeleton`.
 
+## Last-Turn opening
+
+Ordinary local and SSH restore requests ask for one Turn. The peer subscriber
+negotiates the same scope through the optional single-Turn snapshot protocol.
+The first presentation depends only on that Turn, never on filling an event page
+with older Turns. Bookmark restoration and explicit navigation still resolve
+their requested range before presentation.
+
+After visible presentation, local/SSH views may warm the preceding range in the
+existing window cache without replacing the rendered tail. Peer views may read
+one preceding complete Turn and add it above the native tail reservation. Further
+history follows reader demand; switching back to a partial, catalog-backed local
+or peer session does not trigger full-history completion. Legacy local hosts
+without window catalogs retain their full-history fallback.
+
+The native CSS shell below supplies the same opening layout at every content
+length: short last Turns start at the top with trailing blank space, long ones
+show their end, and older history stays above the reserved shell. Do not fill a
+short first screen with older history or classify Turns using measured heights.
+Source-read, hydrate and first-content-paint trace phases distinguish transport
+wait from presentation wait; fixture timings are not live-device performance.
+
 ## Inactive history residency
 
 Reader bookmarks retain the semantic snapshot, intent and ordinal range, never
@@ -47,19 +69,23 @@ the cache without replacing a newer reader intent.
 
 ## Complete Turns are the history publication unit
 
-A history transport page is not a render transaction. The Rust controller joins
-bounded record pages until each Turn's root membership (`turnRecordIds`) is
-present, including unchanged items older than a republished terminal root.
-Only then does it emit the records followed by ready. Missing members, a stalled
-cursor or an epoch change fail the read without publishing fragments. The field
-is optional and lives on the wire root, never on persisted Turns or every child.
-For older hosts without membership evidence, the controller completes the
-available history read before publishing; their first open can take longer.
+A history transport packet is not a render transaction. A negotiated single-Turn
+snapshot carries its identity, total record count, packet offset, older-Turn
+boundary and live cursor. The Rust subscriber validates and joins its packets
+before emitting records followed by ready. It continues live catch-up during an
+older read; historical revisions cannot overwrite newer live revisions.
+
+Hosts without the optional acknowledgement retain bounded record paging. The
+controller joins pages until each root's optional `turnRecordIds` membership is
+present, including unchanged items older than a republished terminal root. Missing
+members, a stalled cursor or an epoch change fail without publishing fragments.
+Hosts without membership evidence finish the available history before publication;
+their first open can take longer. None of these fields changes persisted Turns.
 
-`RelaySessionHistory` stages replay records outside the replica until ready.
+`RelaySessionHistory` stages annotated replay records outside the replica until ready.
 There is no 250ms history flush: timers, document visibility, immediate terminal
 records, mailbox reads and direct runtime flushes cannot expose half a Turn.
-Live updates after a ready batch retain frame batching and immediate terminal
+Live updates, including during older reads, retain frame batching and immediate terminal
 settling. Already published history survives a failed read; retry replays the
 unpublished batch. Local restore/window APIs already return whole Turn bodies.
 
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
index 1072eff1f1..39d6fe5cad 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -45,7 +45,7 @@ each missing what the other had.
 | `../../tool-cards/useToolCardHeightContract.test.tsx` | tool cards reflow rather than compensate |
 | `flowChatHistoryBoundary.test.ts` | the screenful lead and physical boundary geometry |
 | `flowChatViewportGeometry.test.ts` | actual gutter centring, symmetric/omitted leading gutter and origin handoff without accumulated horizontal offset |
-| `../../services/RelaySessionHistory.test.ts`, `../../store/FlowChatStore.test.ts` | replay staging outside the replica, no timeout/visibility/direct-flush partial Turn publication, failed-read retention, retry and live-record batching |
+| `../../services/RelaySessionHistory.test.ts`, `../../store/FlowChatStore.test.ts`, `../../services/flow-chat-manager/SessionModule.test.ts` | local/SSH one-Turn restore, paint-gated adjacent prefetch without tail replacement, partial reopen without full-history drain, replay staging, live updates during older reads, failed-read retention and retry; transport fixtures, not live remote evidence |
 | `flowChatHistoryPager.test.ts` | request/layout ordering, coalesced demand, prefetch without physical arrival, stale tickets, exhaustion and retry eligibility |
 | `useFlowChatViewportOwner.test.tsx` | top/native coordinate conversion, older-range growth creates no reader demand, synchronous write/shift accounting preserves reader travel and actual clamping |
 | `flowChatLiveTailWindow.test.ts` | "does the transcript still reach the newest Turn" |
@@ -358,11 +358,14 @@ checks; mobile Remote Control uses its own message renderer.
 
 ### 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 in the one-shot tail reveal, with the
-   history above neither moving nor reloading.
+1. On local and peer devices, open a long session whose last Turn is short.
+   Only that Turn starts at the top, with blank space below; background history
+   must not fill the blank. Repeat with a long last Turn: its end is visible.
+   After the first presentation, any adjacent prefetch adds content above without
+   remounting or moving the visible rows. Switch away and back: no full-history
+   drain or new placement. Test an older peer host separately for its compatible,
+   potentially slower record-page fallback. Then send a message: it appears in
+   the one-shot live-tail reveal without reloading the history above.
 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
diff --git a/src/web-ui/src/flow_chat/components/modern/HistorySessionLoadingBoundary.tsx b/src/web-ui/src/flow_chat/components/modern/HistorySessionLoadingBoundary.tsx
index fb253cbc08..646a1fa38e 100644
--- a/src/web-ui/src/flow_chat/components/modern/HistorySessionLoadingBoundary.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/HistorySessionLoadingBoundary.tsx
@@ -14,15 +14,17 @@ interface Props {
 }
 
 type Phase = 'idle' | 'loading' | 'exiting' | 'revealing';
-const EXIT_DURATION = 240;
-const REVEAL_DURATION = 200;
+// Readiness already includes the viewport's layout commit. Keep the handoff
+// brief: decoration must not add nearly half a second to a complete read.
+const EXIT_DURATION = 80;
+const REVEAL_DURATION = 100;
 /**
  * A load shorter than this never showed its skeleton (it fades in after a
  * delay, see the stylesheet): the transcript just fades in, without the
  * skeleton hand-over, so a fast open is not made to wait on choreography.
  */
 const QUICK_LOAD_MS = 260;
-const QUICK_REVEAL_DURATION = 140;
+const QUICK_REVEAL_DURATION = 80;
 
 /** Presentation only. The existing viewport owner decides when the transcript is settled. */
 export function HistorySessionLoadingBoundary({
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 f23546d6c3..3a31ee5e61 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -1527,14 +1527,11 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
 
   useEffect(() => {
     const sessionId = activeSession?.sessionId;
+    if (!isViewportActive) releasedHistoryCompletionKeyRef.current = null;
     if (
       !isViewportActive ||
       !sessionId ||
       activeSession.historyState !== 'ready' ||
-      (
-        activeSession.contextRestoreState !== 'pending' &&
-        !hasPendingHistoryCompletion
-      ) ||
       !latestTurnId
     ) {
       return;
@@ -1619,6 +1616,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     isHistoryContentPresented,
     isViewportActive,
     latestTurnId,
+    surfaceScope.surfaceId,
     turnSummaries.length,
   ]);
 
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
index 1d5cf2bb5d..7f466e56a3 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
@@ -256,6 +256,9 @@ describe('completed history with the production timeline projection', () => {
       expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
       resize(); tick();
       expect(row.getBoundingClientRect().top).toBeCloseTo(top, 1);
+      for (const previous of host.querySelectorAll<HTMLElement>('.virtual-item-wrapper:not([data-turn-id="latest"])')) {
+        expect(previous.getBoundingClientRect().bottom).toBeLessThanOrEqual(scroller.getBoundingClientRect().top + 8);
+      }
     }
     for (let frame = 0; frame < 30; frame++) {
       // Late measurements of newly inserted predecessors, including a card
diff --git a/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts b/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
index b489a3bbec..592271683d 100644
--- a/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
+++ b/src/web-ui/src/flow_chat/services/RelaySessionHistory.test.ts
@@ -417,6 +417,9 @@ describe('RelaySessionHistory', () => {
     expect(fixture.older).not.toHaveBeenCalled();
     history.setVisible(true);
     expect(fixture.older).not.toHaveBeenCalled();
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(fixture.older).not.toHaveBeenCalled();
+    history.markPresented();
     await vi.advanceTimersByTimeAsync(250);
     expect(fixture.older).toHaveBeenCalledOnce();
     history.setVisible(false);
@@ -428,6 +431,38 @@ describe('RelaySessionHistory', () => {
     history.close();
   });
 
+  it('keeps live output flowing while a negotiated older replay is still being fetched', async () => {
+    vi.useFakeTimers();
+    fixture.subscribe.mockImplementation(async () => {
+      fixture.record?.({ sessionId: 'session', id: 'turn/latest', historyReplay: true });
+      fixture.ready?.({ sessionId: 'session', hasMore: true, oldestSeq: 50, cursor: 150, historyBatches: true });
+      return 'subscription';
+    });
+    let finish!: () => void;
+    fixture.older.mockImplementation(() => new Promise<void>(resolve => { finish = resolve; }));
+    const apply = vi.fn();
+    const flush = vi.fn();
+    const history = new RelaySessionHistory('session', apply, vi.fn(), vi.fn(), undefined, flush);
+    await history.open();
+    apply.mockClear(); flush.mockClear();
+    const reading = history.loadOlder();
+    await Promise.resolve();
+    fixture.record?.({ sessionId: 'session', id: 'item/live' });
+    fixture.record?.({ sessionId: 'session', id: 'turn/older', historyReplay: true });
+    await vi.advanceTimersByTimeAsync(16);
+    expect(apply).toHaveBeenCalledTimes(1);
+    expect(apply).toHaveBeenLastCalledWith({ sessionId: 'session', id: 'item/live' });
+    expect(flush).toHaveBeenCalledOnce();
+    fixture.record?.({ sessionId: 'session', id: 'item/older', historyReplay: true });
+    expect(apply).toHaveBeenCalledTimes(1);
+    fixture.ready?.({ sessionId: 'session', hasMore: false, oldestSeq: 1, cursor: 151, historyBatches: true });
+    finish();
+    await reading;
+    expect(apply.mock.calls.map(([record]) => record.id)).toEqual(['item/live', 'turn/older', 'item/older']);
+    expect(flush).toHaveBeenCalledTimes(2);
+    history.close();
+  });
+
 });
 
 it('refreshes the small mailbox at open and reconnect, but never on older-page ready', async () => {
diff --git a/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts b/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
index bb6c46db2a..b571180013 100644
--- a/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
+++ b/src/web-ui/src/flow_chat/services/RelaySessionHistory.ts
@@ -95,6 +95,7 @@ export interface RelayHistoryReady {
   hasMore: boolean;
   oldestSeq: number;
   cursor: number;
+  historyBatches?: boolean;
 }
 
 /** One session subscription, shared by opening history and receiving live records. */
@@ -117,6 +118,7 @@ export class RelaySessionHistory {
   private pageApplied: (() => void) | null = null;
   private rejectPage: ((error: unknown) => void) | null = null;
   private visible = false;
+  private presented = false;
   private prefetchCredit = 0;
   private flushTimer: ReturnType<typeof setTimeout> | null = null;
   // History enters the replica only at ready. Otherwise direct runtime/mailbox
@@ -159,7 +161,8 @@ export class RelaySessionHistory {
       const record = value as SessionRecord;
       if (record.sessionId !== this.sessionId) return;
       try {
-        if (this.collectingHistory) {
+        if ((record as SessionRecord & { historyReplay?: boolean }).historyReplay === true
+          || (this.collectingHistory && this.ready?.historyBatches !== true)) {
           this.historyRecords.push(record);
           return;
         }
@@ -237,12 +240,19 @@ export class RelaySessionHistory {
     if (visible === this.visible) return;
     this.visible = visible;
     if (visible) { this.prefetchCredit = 1; this.scheduleHistoryPrefetch(); }
-    else if (this.historyTimer !== null) {
-      clearTimeout(this.historyTimer);
+    else {
+      this.presented = false;
+      if (this.historyTimer !== null) clearTimeout(this.historyTimer);
       this.historyTimer = null;
     }
   }
 
+  /** The viewport's paint acknowledgement, not a timer or mounted lease. */
+  markPresented(): void {
+    this.presented = true;
+    this.scheduleHistoryPrefetch();
+  }
+
   open(): Promise<void> {
     if (!this.opening) this.opening = this.start();
     return this.opening;
@@ -306,11 +316,11 @@ export class RelaySessionHistory {
   // Warm one adjacent page after a visible open or reader request. Never drain
   // an entire remote transcript merely because its live subscription is open.
   private scheduleHistoryPrefetch(): void {
-    if (!this.isCurrent() || !this.visible || this.prefetchCredit === 0
+    if (!this.isCurrent() || !this.visible || !this.presented || this.prefetchCredit === 0
       || !this.ready?.hasMore || this.historyTimer !== null || !resourceBudget.canPrefetch()) return;
     this.historyTimer = setTimeout(() => {
       this.historyTimer = null;
-      if (!this.isCurrent() || !this.visible || !resourceBudget.canPrefetch()
+      if (!this.isCurrent() || !this.visible || !this.presented || !resourceBudget.canPrefetch()
         || (typeof document !== 'undefined' && document.visibilityState === 'hidden')) return;
       this.prefetchCredit = 0;
       void this.loadOlder(true).catch(error => {
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
index 6a0d0c5b88..49aaeba4fb 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
@@ -1050,6 +1050,24 @@ describe('SessionModule historical session coordination', () => {
     );
   });
 
+  it.each(['local', 'peer'])('retains a paged %s tail on reopen without downloading the whole conversation', async surface => {
+    activateSurface(surface);
+    const session = createSession({
+      isHistorical: false, historyState: 'ready', isPartial: true,
+      dialogTurns: [{ id: 'tail', userMessage: { id: 'user-tail', content: 'Latest', timestamp: 1 },
+        modelRounds: [{ items: [{ type: 'text', text: 'Answer' }] }], status: 'completed' } as any],
+      loadedTurnCount: 1, totalTurnCount: 100,
+    });
+    if (surface === 'local') session.turnCatalog = {
+      sessionId: session.sessionId, revision: 'catalog', totalTurnCount: 100, entries: [],
+    } as any;
+    const { context, flowChatStore } = createContext(session, { activeSessionId: 'other' });
+    await switchChatSession(context, session.sessionId);
+    expect(flowChatStore.switchSession).toHaveBeenCalledWith(session.sessionId);
+    expect(flowChatStore.ensureSessionFullHistory).not.toHaveBeenCalled();
+    expect(flowChatStore.loadSessionHistory).not.toHaveBeenCalled();
+  });
+
   it('touches only the latest active session during rapid switches', async () => {
     const firstSession = createSession({
       sessionId: 'history-1',
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
index e4c7b0a6a2..e02f843c1b 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
@@ -329,10 +329,11 @@ function shouldHydrateHistoricalSessionBeforeSwitch(session: Session | undefined
 }
 
 function shouldCompletePartialHistoryAfterSwitch(session: Session | undefined): boolean {
-  // A live session can retain only its restored tail while still being marked
-  // non-historical. Completing it after an explicit switch restores the
-  // assistant rounds that cannot come from the user-only turn catalog.
-  return session?.isHistorical !== true
+  // Only legacy local hosts without a Turn-window catalog need this fallback.
+  // Opening a paged local or peer tail must not drain all history in the background.
+  return getActiveSurfaceScope().surfaceId === 'local'
+    && session?.turnCatalog?.sessionId !== session?.sessionId
+    && session?.isHistorical !== true
     && session?.historyState === 'ready'
     && session.isPartial === true
     && session.externalHistory?.mode !== 'follow';
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 136e6eb4a3..56b378b7c6 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.test.ts
@@ -4793,10 +4793,10 @@ describe('FlowChatStore historical session hydration state', () => {
       expect(apiMocks.restoreSessionView).toHaveBeenNthCalledWith(
         1,
         'history-1',
-        'test-workspace-2',
+        fixtureWorkspaceId('D:/workspace/OpenBitFun'),
         expect.any(String),
         undefined,
-        3,
+        1,
       );
       expect(
         flowChatStore.getState().sessions.get('history-1')?.dialogTurns.map(turn => turn.userMessage.content)
@@ -4817,7 +4817,7 @@ describe('FlowChatStore historical session hydration state', () => {
       expect(apiMocks.restoreSessionView).toHaveBeenNthCalledWith(
         2,
         'history-1',
-        'test-workspace-2',
+        fixtureWorkspaceId('D:/workspace/OpenBitFun'),
         expect.stringContaining('full'),
         undefined,
         undefined,
@@ -5519,10 +5519,10 @@ describe('FlowChatStore historical session hydration state', () => {
     expect(apiMocks.restoreSessionView).toHaveBeenNthCalledWith(
       1,
       'history-remote',
-      'test-workspace-2',
+      fixtureWorkspaceId('D:/workspace/OpenBitFun'),
       expect.any(String),
       undefined,
-      3,
+      1,
     );
   });
 
@@ -6500,6 +6500,36 @@ describe('FlowChatStore historical session hydration state', () => {
     expect(apiMocks.loadSessionTurnWindow).toHaveBeenCalledTimes(1);
   });
 
+  it.each(['local', 'ssh'])('opens %s history with one Turn and warms an adjacent range only after paint without replacing the tail', async location => {
+    const catalog = createTurnCatalog(100);
+    const session = createSession({ sessionId: 'history-1', isHistorical: true, historyState: 'metadata-only',
+      ...(location === 'ssh' ? { remoteConnectionId: 'ssh-host', remoteSshHost: 'host.example' } : {}),
+    });
+    apiMocks.restoreSessionView.mockResolvedValueOnce({
+      session: { sessionId: 'history-1', sessionName: 'History', agentType: 'Standard', state: 'Idle', turnCount: 100, createdAt: 1 },
+      turns: [createPersistedTurn(99)], turnCatalog: catalog, contextRestoreState: 'pending',
+      isPartial: true, loadedTurnCount: 1, totalTurnCount: 100,
+    });
+    apiMocks.loadSessionTurnWindow.mockResolvedValueOnce({
+      status: 'ready', catalogRevision: catalog.revision, totalTurnCount: 100,
+      startOrdinal: 98, endOrdinalExclusive: 100, targetTurnId: 'turn-98',
+      turns: [98, 99].map(index => createPersistedTurn(index)),
+    });
+    flowChatStore.setState(() => ({ sessions: new Map([[session.sessionId, session]]), activeSessionId: session.sessionId }));
+    await flowChatStore.loadSessionHistory(session.sessionId);
+    expect(apiMocks.restoreSessionView).toHaveBeenCalledWith(session.sessionId, session.workspaceId, expect.any(String), undefined, 1);
+    expect(apiMocks.loadSessionTurnWindow).not.toHaveBeenCalled();
+    const tail = flowChatStore.getState().sessions.get(session.sessionId)!.dialogTurns;
+    expect(tail.map(turn => turn.id)).toEqual(['turn-99']);
+    flowChatStore.releaseSessionHistoryCompletionAfterInitialPaint(session.sessionId);
+    await flushAsyncWork();
+    expect(apiMocks.loadSessionTurnWindow).toHaveBeenCalledTimes(1);
+    expect(apiMocks.loadSessionTurnWindow).toHaveBeenCalledWith(expect.objectContaining({ targetStorageTurnIndex: 98, before: 0, after: 1 }));
+    expect(flowChatStore.getState().sessions.get(session.sessionId)!.dialogTurns).toBe(tail);
+    expect(flowChatStore.getSessionHistoryViewState(session.sessionId)?.activeRange).toBeNull();
+    expect(flowChatStore.hasPendingSessionHistoryCompletion(session.sessionId)).toBe(false);
+  });
+
 
   it('caches an optimistic turn after a partial restored tail at its absolute ordinal', async () => {
     const catalog = createTurnCatalog(23);
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
index 0b2809b6b6..05ecd39862 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
@@ -348,10 +348,10 @@ function sameDispatchTargetIdentity(
 }
 
 const METADATA_LIST_RECENT_DEDUPE_TTL_MS = 1000;
-const HISTORICAL_SESSION_INITIAL_REMOTE_TAIL_TURN_COUNT = 3;
-const HISTORICAL_SESSION_INITIAL_LOCAL_TAIL_TURN_COUNT = 3;
+const HISTORICAL_SESSION_INITIAL_REMOTE_TAIL_TURN_COUNT = 1;
+const HISTORICAL_SESSION_INITIAL_LOCAL_TAIL_TURN_COUNT = 1;
 /** Turns a session keeps in memory when the history budget evicts it. */
-const RESIDENT_TAIL_TURN_COUNT = HISTORICAL_SESSION_INITIAL_LOCAL_TAIL_TURN_COUNT;
+const RESIDENT_TAIL_TURN_COUNT = 3;
 const HISTORICAL_SESSION_FULL_HISTORY_IDLE_TIMEOUT_MS = 1500;
 const HISTORICAL_SESSION_PREVIOUS_WINDOW_TURN_COUNT = 12;
 const PEER_SESSION_REFRESH_TAIL_TURN_COUNT = 3;
@@ -4083,6 +4083,22 @@ export class FlowChatStore {
     sessionId: string,
     options?: FullHistoryHydrationReleaseOptions
   ): boolean {
+    this.activeSurface.relaySessionHistory.get(sessionId)?.markPresented();
+    const session = this.state.sessions.get(sessionId);
+    // Warm one adjacent range without changing the rendered tail. The native
+    // history shell intentionally leaves blank space below a short last Turn;
+    // cached older Turns are presented only when the reader asks for them.
+    if (getActiveSurfaceId() === 'local' && session?.isPartial && resourceBudget.canPrefetch()
+      && session.turnCatalog?.sessionId === sessionId && this.state.activeSessionId === sessionId) {
+      const first = canonicalSessionTurns(session)[0];
+      const firstOrdinal = session.turnCatalog.entries.find(entry => entry.turnId === first?.id)?.ordinal;
+      if (firstOrdinal !== undefined && firstOrdinal > 0) {
+        void this.loadSessionTurnWindow(sessionId, firstOrdinal - 1, { before: 0, after: 1, source: 'prefetch' })
+          .catch(error => {
+            if (!isSurfaceChangedError(error)) log.debug('Adjacent session history prefetch stopped', { sessionId, error });
+          });
+      }
+    }
     let released = false;
     for (const request of this.fullHistoryHydrationRequests.values()) {
       if (!this.ownedByActiveSurface(request) || request.sessionId !== sessionId) {
@@ -9320,6 +9336,11 @@ export class FlowChatStore {
       if (!open) this.setSessionHistoryState(sessionId, 'hydrating');
       await this.loadRelaySessionHistory(sessionId);
       scope.assertCurrent('load relay session history');
+      startupTrace.markPhase('historical_session_hydrate_end', {
+        remote: true, sessionId, sessionTraceId, surfaceId: scope.surfaceId,
+        turnCount: this.state.sessions.get(sessionId)?.dialogTurns.length ?? 0,
+        durationMs: elapsedMs(traceStartedAt),
+      });
       return;
     }
     const suppressInitialHydratingState =
diff --git a/src/web-ui/src/infrastructure/api/service-api/RemoteConnectAPI.ts b/src/web-ui/src/infrastructure/api/service-api/RemoteConnectAPI.ts
index 0be75d4971..a19e5f65e7 100644
--- a/src/web-ui/src/infrastructure/api/service-api/RemoteConnectAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/RemoteConnectAPI.ts
@@ -501,7 +501,7 @@ class RemoteConnectAPIService {
     return api.listen('session-interaction-changed', callback);
   }
 
-  onSessionReady(callback: (event: { sessionId: string; hasMore: boolean; oldestSeq: number; cursor: number }) => void): () => void {
+  onSessionReady(callback: (event: { sessionId: string; hasMore: boolean; oldestSeq: number; cursor: number; historyBatches?: boolean }) => void): () => void {
     return api.listen('relay://session-ready', callback);
   }
 
diff --git a/src/web-ui/src/infrastructure/peer-device/README.md b/src/web-ui/src/infrastructure/peer-device/README.md
index e6017af02b..e7424aef33 100644
--- a/src/web-ui/src/infrastructure/peer-device/README.md
+++ b/src/web-ui/src/infrastructure/peer-device/README.md
@@ -18,16 +18,21 @@ starts when the host accepts the draft.
 `SessionRecordReplica` applies both replayed pages and live canonical records
 using stable IDs, revisions and tombstones; every page comes from the online
 host, and a stream-epoch change (host restart) drops the replica before replay.
-The latest page paints first; older pages share one in-flight reader. A visible
-open or explicit reader request can warm one adjacent page while the document is
-visible and the shared resource budget permits it. This never recursively drains
+With negotiated Turn snapshots, only the last complete Turn paints first; older
+hosts retain the complete-record-page fallback. Older reads share one in-flight
+reader. The viewport must acknowledge visible presentation before a visible open
+can warm one adjacent Turn, while the document is visible and the shared resource
+budget permits it. Reader requests can renew that prefetch credit. Switching back
+to a partial session preserves its loaded content. This never recursively drains
 the transcript. Hiding a view pauses optional prefetch only; live records,
 reconnect and interaction-mailbox delivery keep their subscriptions.
 
-The host sends each record of a page as its own event. Records reduce into the
-replica as they arrive; rendering the changed turns is coalesced to one store
-update per frame, and a page in flight renders as one batch before its ready
-event. Rendering per record is quadratic in the items of a long turn and freezes the UI thread. Live
+The Rust subscriber emits each record as its own event. Controller-local
+`historyReplay` records stage outside the replica until ready; `historyBatches`
+on ready identifies that annotation contract. Older controller bridges retain
+the sequential replay fallback. Live records reduce as they arrive, including
+during an older snapshot read; rendering is coalesced to one store update per
+frame. Rendering per record is quadratic in the items of a long turn and freezes the UI thread. Live
 pages have no ready event, so the frame timer publishes them; it is a timer
 rather than an animation frame so hidden windows keep applying records. A running
 turn reaching a terminal status, a visibility change, and any direct turn, round

From 5cc7c25542c389c9d687b6c82dbd6cb540e81c41 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Wed, 4 Nov 2026 23:25:31 +0800
Subject: [PATCH 3/6] test: avoid redundant layout work in history viewport
 fixtures

---
 .../modern/FLOWCHAT_VERIFICATION.md           |  6 +++
 .../modern/VirtualMessageList.resize.test.tsx | 53 +++++++++++++------
 ...rtualMessageList.timeline-prepend.test.tsx | 53 +++++++++++++------
 3 files changed, 78 insertions(+), 34 deletions(-)

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
index 39d6fe5cad..eec9a17dc6 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -84,6 +84,12 @@ each missing what the other had.
 | `SessionTreePopover.test.tsx` | Agent selection/cancellation/deletion menus, type-only metadata, active branch filtering with ancestor retention, restoring all agents, and the active empty state |
 | `../../services/deleteSessionTreeBranch.test.ts` | Unloaded descendant deletion in child-first order, remote location forwarding, failure retention, and device surface guards |
 
+The resize and production-timeline geometry fixtures cache recursive heights only
+within one synchronous read and deliver ResizeObserver entries only for changed
+boxes. Their caches never span a DOM/style/row-height change. This keeps repeated
+frame checks affordable on CI without relaxing position assertions or timeouts;
+test duration is not a product performance measurement.
+
 ## Native history-scroll fixture
 
 When UI verification is authorized, build Desktop and current frontend assets,
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
index 3aca830ce8..85a8c443c8 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.resize.test.tsx
@@ -40,14 +40,23 @@ vi.mock('./VirtualItemRenderer', () => ({
 describe('settled transcript resizing (real controllers, supplied DOM geometry)', () => {
   let root: Root, host: HTMLDivElement;
   let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
-  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element> }>;
+  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element>; sizes: WeakMap<Element, string> }>;
   let columnWidth = 900;
   let containerFirst = false;
   const heights = new Map<string, number>();
   const offsets = new WeakMap<HTMLElement, number>();
   const px = (value: string) => Number.parseFloat(value || '0') || 0;
   const reversed = (element: HTMLElement) => element.dataset.flowchatScrollOrigin === 'end';
-  function height(element: HTMLElement): number {
+  // Cache only within one synchronous geometry read. DOM/style and supplied
+  // row heights can change between any two reads, so no frame-level cache is safe.
+  function height(element: HTMLElement, measured = new WeakMap<HTMLElement, number>()): number {
+    const cached = measured.get(element);
+    if (cached !== undefined) return cached;
+    const result = measureHeight(element, measured);
+    measured.set(element, result);
+    return result;
+  }
+  function measureHeight(element: HTMLElement, measured: WeakMap<HTMLElement, number>): number {
     if (element.hasAttribute('data-flowchat-scroller')) return 600;
     if (element.dataset.virtualItemKey) return heights.get(element.dataset.virtualItemKey) ?? 100;
     if (element.style.height) return px(element.style.height);
@@ -56,24 +65,24 @@ describe('settled transcript resizing (real controllers, supplied DOM geometry)'
       const minimum = px(scroller.style.getPropertyValue('--_flow-chat-history-turn-min-height'));
       if (element.classList.contains('virtual-message-list__footer-block')) {
         const turn = element.parentElement!;
-        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement), 0);
-        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement, measured), 0);
+        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0);
         return Math.max(natural, minimum - preceding);
       }
-      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0));
     }
     return Math.max(element.classList.contains('virtual-message-list__extent') && reversed(element.parentElement!) ? 600 : px(element.style.minHeight), px(element.style.paddingTop) + px(element.style.paddingBottom)
-      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0));
   }
-  function contentTop(element: HTMLElement): number {
+  function contentTop(element: HTMLElement, measured: WeakMap<HTMLElement, number>): number {
     let top = 0;
     let current = element;
     while (current.parentElement && !current.hasAttribute('data-flowchat-scroller')) {
       let sibling = current.previousElementSibling;
-      while (sibling) { top += height(sibling as HTMLElement); sibling = sibling.previousElementSibling; }
+      while (sibling) { top += height(sibling as HTMLElement, measured); sibling = sibling.previousElementSibling; }
       current = current.parentElement;
       top += px(current.style.paddingTop);
-      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement);
+      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement, measured);
     }
     return top;
   }
@@ -96,10 +105,18 @@ describe('settled transcript resizing (real controllers, supplied DOM geometry)'
   };
   const resize = () => act(() => {
     for (const observer of (containerFirst ? [...observers].reverse() : [...observers])) {
-      const entries = [...observer.targets].filter(target => target.isConnected).map(target => ({
-        target, borderBoxSize: [{ inlineSize: 900, blockSize: height(target as HTMLElement) }],
-        contentRect: target.getBoundingClientRect(),
-      }) as ResizeObserverEntry);
+      // ResizeObserver delivers changed boxes, not every observed node on every
+      // frame. Collect sizes before calling back, since callbacks can mutate DOM.
+      const measured = new WeakMap<HTMLElement, number>();
+      const entries = [...observer.targets].filter(target => target.isConnected).flatMap(target => {
+        const blockSize = height(target as HTMLElement, measured);
+        const inlineSize = target.classList.contains('virtual-item-wrapper') ? columnWidth : 900;
+        const size = `${inlineSize}:${blockSize}`;
+        if (observer.sizes.get(target) === size) return [];
+        observer.sizes.set(target, size);
+        return [{ target, borderBoxSize: [{ inlineSize, blockSize }],
+          contentRect: target.getBoundingClientRect() } as ResizeObserverEntry];
+      });
       if (entries.length) observer.callback(entries, {} as ResizeObserver);
     }
   });
@@ -115,10 +132,11 @@ describe('settled transcript resizing (real controllers, supplied DOM geometry)'
     vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
     vi.stubGlobal('ResizeObserver', class {
       targets = new Set<Element>();
+      sizes = new WeakMap<Element, string>();
       constructor(public callback: ResizeObserverCallback) { observers.push(this); }
       observe(target: Element) { this.targets.add(target); }
-      unobserve(target: Element) { this.targets.delete(target); }
-      disconnect() { this.targets.clear(); }
+      unobserve(target: Element) { this.targets.delete(target); this.sizes.delete(target); }
+      disconnect() { this.targets.clear(); this.sizes = new WeakMap(); }
     });
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () { return Math.round(height(this)); });
     vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () { return Math.round(height(this)); });
@@ -136,9 +154,10 @@ describe('settled transcript resizing (real controllers, supplied DOM geometry)'
       offsets.set(this, reversed(this) ? Math.max(-range, Math.min(0, value)) : Math.max(0, Math.min(value, range)));
     });
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const measured = new WeakMap<HTMLElement, number>();
       const scroller = this.closest<HTMLElement>('[data-flowchat-scroller]');
-      const top = this === scroller ? 0 : contentTop(this) - (scroller?.scrollTop ?? 0);
-      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this), height: height(this), width: this.classList.contains('virtual-item-wrapper') ? columnWidth : 900, toJSON() {} };
+      const top = this === scroller ? 0 : contentTop(this, measured) - (scroller?.scrollTop ?? 0);
+      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this, measured), height: height(this, measured), width: this.classList.contains('virtual-item-wrapper') ? columnWidth : 900, toJSON() {} };
     });
     state.items = turn('latest', 180);
     state.session = { sessionId: 'history-session', config: {}, dialogTurns: [], isHistorical: false } as unknown as Session;
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
index 7f466e56a3..5c3f2f7026 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.timeline-prepend.test.tsx
@@ -36,14 +36,23 @@ vi.mock('./VirtualItemRenderer', () => ({
 describe('completed history with the production timeline projection', () => {
   let root: Root, host: HTMLDivElement;
   let frames: Map<number, FrameRequestCallback>, frameId: number, now: number;
-  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element> }>;
+  let observers: Array<{ callback: ResizeObserverCallback; targets: Set<Element>; sizes: WeakMap<Element, string> }>;
   let writes: number[];
   const listRef = createRef<VirtualMessageListRef>();
   const heights = new Map<string, number>();
   const offsets = new WeakMap<HTMLElement, number>();
   const px = (value: string) => Number.parseFloat(value || '0') || 0;
   const reversed = (element: HTMLElement) => element.dataset.flowchatScrollOrigin === 'end';
-  function height(element: HTMLElement): number {
+  // Cache only within one synchronous geometry read. DOM/style and supplied
+  // row heights can change between any two reads, so no frame-level cache is safe.
+  function height(element: HTMLElement, measured = new WeakMap<HTMLElement, number>()): number {
+    const cached = measured.get(element);
+    if (cached !== undefined) return cached;
+    const result = measureHeight(element, measured);
+    measured.set(element, result);
+    return result;
+  }
+  function measureHeight(element: HTMLElement, measured: WeakMap<HTMLElement, number>): number {
     if (element.hasAttribute('data-flowchat-scroller')) return 600;
     if (element.dataset.virtualItemKey) return heights.get(element.dataset.virtualItemKey) ?? 100;
     if (element.style.height) return px(element.style.height);
@@ -52,24 +61,24 @@ describe('completed history with the production timeline projection', () => {
       const minimum = px(scroller.style.getPropertyValue('--_flow-chat-history-turn-min-height'));
       if (element.classList.contains('virtual-message-list__footer-block')) {
         const turn = element.parentElement!;
-        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement), 0);
-        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0);
+        const preceding = [...turn.children].filter(child => child !== element).reduce((sum, child) => sum + height(child as HTMLElement, measured), 0);
+        const natural = [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0);
         return Math.max(natural, minimum - preceding);
       }
-      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+      if (element.dataset.historyTail === 'true') return Math.max(minimum, [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0));
     }
     return Math.max(element.classList.contains('virtual-message-list__extent') && reversed(element.parentElement!) ? 600 : px(element.style.minHeight), px(element.style.paddingTop) + px(element.style.paddingBottom)
-      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement), 0));
+      + [...element.children].reduce((sum, child) => sum + height(child as HTMLElement, measured), 0));
   }
-  function contentTop(element: HTMLElement): number {
+  function contentTop(element: HTMLElement, measured: WeakMap<HTMLElement, number>): number {
     let top = 0;
     let current = element;
     while (current.parentElement && !current.hasAttribute('data-flowchat-scroller')) {
       let sibling = current.previousElementSibling;
-      while (sibling) { top += height(sibling as HTMLElement); sibling = sibling.previousElementSibling; }
+      while (sibling) { top += height(sibling as HTMLElement, measured); sibling = sibling.previousElementSibling; }
       current = current.parentElement;
       top += px(current.style.paddingTop);
-      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement);
+      if (current.hasAttribute('data-flowchat-scroller') && reversed(current)) top += 600 - height(current.firstElementChild as HTMLElement, measured);
     }
     return top;
   }
@@ -97,10 +106,18 @@ describe('completed history with the production timeline projection', () => {
   };
   const resize = () => act(() => {
     for (const observer of [...observers]) {
-      const entries = [...observer.targets].filter(target => target.isConnected).map(target => ({
-        target, borderBoxSize: [{ inlineSize: 900, blockSize: height(target as HTMLElement) }],
-        contentRect: target.getBoundingClientRect(),
-      }) as ResizeObserverEntry);
+      // ResizeObserver delivers changed boxes, not every observed node on every
+      // frame. Collect sizes before calling back, since callbacks can mutate DOM.
+      const measured = new WeakMap<HTMLElement, number>();
+      const entries = [...observer.targets].filter(target => target.isConnected).flatMap(target => {
+        const blockSize = height(target as HTMLElement, measured);
+        const inlineSize = 900;
+        const size = `${inlineSize}:${blockSize}`;
+        if (observer.sizes.get(target) === size) return [];
+        observer.sizes.set(target, size);
+        return [{ target, borderBoxSize: [{ inlineSize, blockSize }],
+          contentRect: target.getBoundingClientRect() } as ResizeObserverEntry];
+      });
       if (entries.length) observer.callback(entries, {} as ResizeObserver);
     }
   });
@@ -116,10 +133,11 @@ describe('completed history with the production timeline projection', () => {
     vi.stubGlobal('matchMedia', vi.fn(() => ({ matches: false, addEventListener() {}, removeEventListener() {} })));
     vi.stubGlobal('ResizeObserver', class {
       targets = new Set<Element>();
+      sizes = new WeakMap<Element, string>();
       constructor(public callback: ResizeObserverCallback) { observers.push(this); }
       observe(target: Element) { this.targets.add(target); }
-      unobserve(target: Element) { this.targets.delete(target); }
-      disconnect() { this.targets.clear(); }
+      unobserve(target: Element) { this.targets.delete(target); this.sizes.delete(target); }
+      disconnect() { this.targets.clear(); this.sizes = new WeakMap(); }
     });
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () { return height(this); });
     vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () { return height(this); });
@@ -138,9 +156,10 @@ describe('completed history with the production timeline projection', () => {
       offsets.set(this, reversed(this) ? Math.max(-range, Math.min(0, value)) : Math.max(0, Math.min(value, range)));
     });
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const measured = new WeakMap<HTMLElement, number>();
       const scroller = this.closest<HTMLElement>('[data-flowchat-scroller]');
-      const top = this === scroller ? 0 : contentTop(this) - (scroller?.scrollTop ?? 0);
-      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this), height: height(this), width: 900, toJSON() {} };
+      const top = this === scroller ? 0 : contentTop(this, measured) - (scroller?.scrollTop ?? 0);
+      return { x: 0, y: top, left: 0, right: 900, top, bottom: top + height(this, measured), height: height(this, measured), width: 900, toJSON() {} };
     });
     state.items = turn('latest', 180);
     state.session = { sessionId: 'history-session', config: {}, dialogTurns: [], isHistorical: false } as unknown as Session;

From 295ca3bdaf4908e2b6fb0c3a4ef5803c38ba3eaa Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Thu, 5 Nov 2026 00:13:21 +0800
Subject: [PATCH 4/6] ci: restart checks after hosted runner scheduling failure


From 857e355d3f8b5d95761e4615bd00c73aaf036316 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Thu, 5 Nov 2026 00:56:16 +0800
Subject: [PATCH 5/6] ci: pin macOS validation to the Intel hosted runner pool

---
 .github/workflows/ci.yml                              |  8 +++++---
 docs/architecture/rust-build-dependency-boundaries.md |  1 +
 scripts/check-github-config.test.mjs                  | 11 ++++++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f397348a74..5c96e25e11 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -129,8 +129,10 @@ jobs:
         include:
           - os: ubuntu-latest
             cache_key: ubuntu
-          - os: macos-15
-            cache_key: macos
+          # Pin the Intel pool for macOS OS-contract validation; release jobs
+          # select their Apple Silicon / Intel targets independently.
+          - os: macos-15-intel
+            cache_key: macos-intel
           - os: windows-latest
             cache_key: windows
     steps:
@@ -211,7 +213,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          - macos-15
+          - macos-15-intel
           - windows-latest
     steps:
       - uses: actions/checkout@v5
diff --git a/docs/architecture/rust-build-dependency-boundaries.md b/docs/architecture/rust-build-dependency-boundaries.md
index ea5487fd96..0a7f548bb8 100644
--- a/docs/architecture/rust-build-dependency-boundaries.md
+++ b/docs/architecture/rust-build-dependency-boundaries.md
@@ -223,6 +223,7 @@ CI 负责 workspace 级检查、真实产品 feature 组合、跨平台、完整
 
 ### 7.1 Hosted CI 关键路径与缓存
 
+- 日常 Rust/CLI 验证保留 Linux、Windows 和 macOS 三个平台，macOS 固定使用标准 Intel macOS 15 runner（`macos-15-intel`），避免默认标签的架构迁移和 ARM64 托管资源池分配失败阻塞 OS 契约验证。CLI 与 Rust 使用相同平台矩阵，缓存键区分 Intel。这提供 macOS x64 原生测试证据，不代表 Apple Silicon 运行验证；ARM64/x64 发布目标仍由发布 workflow 的矩阵拥有。
 - 验证 job 只依赖自身的编译期前置条件。Tauri `check`/`test` 只要求配置中的前端和资源目录存在时，Rust job 自行创建空目录，不等待或传递可发布前端产物；真实静态资源仍由前端构建和产品打包 owner 负责。
 - Rust/CLI 影响分类必须保守且 fail-closed：只有活动路径全部位于 `src/web-ui/**` 时才允许跳过 Rust 与 CLI matrix；仓库根目录/`docs/**` 的 Markdown 和 `png/**` 可作为已知中性伴随路径。其他嵌套 Markdown 可能是 `include_str!`/`include_bytes!` 输入，workflow 不得宽泛忽略全部 Markdown。空变更、非法或不可用 diff range、Rust/build 输入、CI 脚本、其他产品 surface 和所有未识别路径都必须运行完整验证，不能依赖易漏维护的“已知 Rust 目录”名单。PR 使用 base/head 的 merge-base range，只分类 PR 自身改动；`main` push 使用事件 before/head 的 direct range，保留 force-push 或回退提交的实际影响。
 - “纯 Web”前提必须是可执行边界：影响分类 job 在计算 diff 前，从 Git 跟踪文件列表扫描全仓 `.rs`（包括 workspace 外 Installer 和根 build script）。除逐行精确登记的既有测试 fixture 外，非注释 Rust 源码不得出现 `web-ui` 路径 token；因此 `include_dir!`、编译嵌入、分段 `PathBuf::join` 和间接路径变量都会在分类前失败。Frontend job 同时显式运行边界 contract tests 和真实 repository boundary check；跨 surface 的命令注册和调用分别由 owner 测试看护。新增类似源码读取时应修复所有权，而不是给影响分类器追加隐式例外。
diff --git a/scripts/check-github-config.test.mjs b/scripts/check-github-config.test.mjs
index 46679d4da0..0e6a428bc4 100644
--- a/scripts/check-github-config.test.mjs
+++ b/scripts/check-github-config.test.mjs
@@ -429,7 +429,7 @@ test('keeps Rust CI independent, restore-only on PRs, and target-focused', () =>
   );
   assert.deepEqual(
     rustJob.strategy.matrix.os,
-    ['ubuntu-latest', 'macos-15', 'windows-latest'],
+    ['ubuntu-latest', 'macos-15-intel', 'windows-latest'],
     'Rust validation must retain the reviewed Linux, macOS, and Windows matrix',
   );
   assert.equal(
@@ -472,6 +472,15 @@ test('keeps Rust CI independent, restore-only on PRs, and target-focused', () =>
   }
 
   const cliJob = workflow.jobs['cli-test'];
+  assert.deepEqual(
+    cliJob.strategy.matrix.include.map((entry) => entry.os),
+    rustJob.strategy.matrix.os,
+    'CLI and Rust validation must exercise the same Linux, Intel macOS, and Windows hosts',
+  );
+  assert.equal(
+    cliJob.strategy.matrix.include.find((entry) => entry.os === 'macos-15-intel').cache_key,
+    'macos-intel',
+  );
   assert.equal(cliJob['timeout-minutes'], 30);
   assert.ok(
     cliJob.strategy.matrix.include.some((entry) => entry.os === 'windows-latest'),

From 522abaf65c78e947106bf3875a5f4cb92dca5596 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Thu, 5 Nov 2026 09:07:33 +0800
Subject: [PATCH 6/6] ci: allow cold Intel macOS CLI builds to finish

---
 .github/workflows/ci.yml             | 6 +++++-
 scripts/check-github-config.test.mjs | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5c96e25e11..5c3fd4343d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -122,19 +122,23 @@ jobs:
     needs: build-impact
     if: ${{ !cancelled() && needs.build-impact.outputs.rust_required != 'false' }}
     runs-on: ${{ matrix.os }}
-    timeout-minutes: 30
+    timeout-minutes: ${{ matrix.timeout_minutes }}
     strategy:
       fail-fast: false
       matrix:
         include:
           - os: ubuntu-latest
             cache_key: ubuntu
+            timeout_minutes: 30
           # Pin the Intel pool for macOS OS-contract validation; release jobs
           # select their Apple Silicon / Intel targets independently.
           - os: macos-15-intel
             cache_key: macos-intel
+            # A cold Intel build can still be compiling the CLI at 30 minutes.
+            timeout_minutes: 75
           - os: windows-latest
             cache_key: windows
+            timeout_minutes: 30
     steps:
       - uses: actions/checkout@v5
 
diff --git a/scripts/check-github-config.test.mjs b/scripts/check-github-config.test.mjs
index 0e6a428bc4..fab2c78af0 100644
--- a/scripts/check-github-config.test.mjs
+++ b/scripts/check-github-config.test.mjs
@@ -481,7 +481,12 @@ test('keeps Rust CI independent, restore-only on PRs, and target-focused', () =>
     cliJob.strategy.matrix.include.find((entry) => entry.os === 'macos-15-intel').cache_key,
     'macos-intel',
   );
-  assert.equal(cliJob['timeout-minutes'], 30);
+  assert.equal(cliJob['timeout-minutes'], '${{ matrix.timeout_minutes }}');
+  assert.deepEqual(
+    cliJob.strategy.matrix.include.map((entry) => entry.timeout_minutes),
+    [30, 75, 30],
+    'Only the cold Intel macOS CLI build needs a longer job budget',
+  );
   assert.ok(
     cliJob.strategy.matrix.include.some((entry) => entry.os === 'windows-latest'),
     'Windows ConPTY contracts must run before Nightly',