From eeecf77b462c876aa23deaaccd3575b01c8480a8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 23 Jul 2026 23:29:49 +0000
Subject: [PATCH 1/6] feat(chat-thread): virtualize the experimental thread
 past a row threshold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users report the app locking up in long threads with the experimental
(ChatX) thread UI: unlike the legacy ConversationView (always-on
VirtualizedList), it mounts every row and re-reconciles the whole
transcript per streamed chunk, with content-visibility only bounding
paint — not React or DOM cost.

Following the upstream MessageScroller guidance (virtualization lives
outside the primitive; add a virtualizer when the transcript needs it),
the thread now ratchets once past 150 flat rows into a windowed body:
the quill viewport stays the scroll element and @tanstack/react-virtual
owns the rows inside ChatMessageScrollerContent. Below the threshold
nothing changes, keeping the engine's anchor-scroll UX and native
find/selection for typical sessions.

- Agent turns flatten to one row per item so a single giant turn
  (autonomous sessions) can't defeat windowing; turn grouping survives
  via per-row flags, and the completed-turn timestamp rides the turn's
  last row.
- Follow-bottom uses the proven VirtualizedList recipe (anchorTo end,
  followOnAppend, footer height as paddingEnd, totalSize re-pin,
  settle-at-end loop) plus the submit-from-anywhere recapture the
  non-virtualized ThreadAutoFollow provides.
- Sticky header, jump picker, keyboard nav, and the scrollbar rail get
  windowed implementations (virtualizer measurements + scrollToIndex);
  the rail already interpolates unmounted rows.
- Crossing the threshold mid-session resumes from the scroll state the
  non-virtualized body records, so the flip doesn't yank the viewport.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PZje6JV5QZEqmhFKrhLDZ7
---
 .../components/chat-thread/ChatThread.tsx     | 782 ++++++++++++++++--
 .../chat-thread/threadVirtualization.test.ts  | 188 +++++
 .../chat-thread/threadVirtualization.ts       | 139 ++++
 3 files changed, 1023 insertions(+), 86 deletions(-)
 create mode 100644 packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.test.ts
 create mode 100644 packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts

diff --git a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
index 1365e714ff..b3f52ae3f8 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -48,11 +48,21 @@ import {
   type PromptRecallHandler,
 } from "@posthog/ui/features/sessions/components/chat-thread/composerPromptRecall";
 import { MessageJumpPicker } from "@posthog/ui/features/sessions/components/chat-thread/MessageJumpPicker";
-import {
-  ToolGroup,
-  type ToolGroupItem,
-} from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
+import { ToolGroup } from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
 import { THREAD_HOTKEY_OPTIONS } from "@posthog/ui/features/sessions/components/chat-thread/threadHotkeys";
+import {
+  type AgentTurn,
+  CHAT_THREAD_VIRTUALIZATION_THRESHOLD,
+  completedTurnTimestamp,
+  computeStickyAnchor,
+  countFlatRows,
+  type FlatThreadRow,
+  flattenTurnRows,
+  type StickyAnchorEntry,
+  type StickyAnchorState,
+  type ThreadItem,
+  type TurnRow,
+} from "@posthog/ui/features/sessions/components/chat-thread/threadVirtualization";
 import { usePromptRecallSource } from "@posthog/ui/features/sessions/components/chat-thread/usePromptRecallSource";
 import { GitActionMessage } from "@posthog/ui/features/sessions/components/GitActionMessage";
 import { GitActionResult } from "@posthog/ui/features/sessions/components/GitActionResult";
@@ -91,9 +101,11 @@ import {
   type DiffWorkerFactory,
 } from "@posthog/ui/shell/diffWorkerHost";
 import { IconButton, Tooltip } from "@radix-ui/themes";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import {
   memo,
+  type MouseEvent as ReactMouseEvent,
   type ReactNode,
   type RefObject,
   useCallback,
@@ -105,19 +117,13 @@ import {
 } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
-/** A row is either a parsed conversation item or a synthesized group of tool calls. */
-type ThreadItem = ConversationItem | ToolGroupItem;
+type SessionUpdateItem = Extract<ConversationItem, { type: "session_update" }>;
 
 /**
- * A contiguous run of non-user rows (assistant prose, tools, git actions, ...) shown as one
- * `bg-muted/30` block with tight internal spacing. Broken only by a user message.
+ * How far below the viewport top a user message may sit while still counting as the current
+ * anchor — shared by the engine (`scrollPreviousItemPeek`) and the virtualized sticky header.
  */
-type AgentTurn = { type: "agent_turn"; id: string; items: ThreadItem[] };
-
-/** Top-level row: a standalone user message, or a grouped agent turn. */
-type TurnRow = ThreadItem | AgentTurn;
-
-type SessionUpdateItem = Extract<ConversationItem, { type: "session_update" }>;
+const SCROLL_PREVIOUS_ITEM_PEEK = 64;
 
 function isToolCallItem(item: ConversationItem): item is SessionUpdateItem {
   return (
@@ -485,7 +491,6 @@ function MessageCopyButton({
 function StickyHeaderOverlay({ items }: { items: ConversationItem[] }) {
   const { currentAnchorId } = useChatMessageScrollerVisibility();
   const { scrollToMessage } = useChatMessageScroller();
-  const shouldReduceMotion = useReducedMotion();
   const [dismissedId, setDismissedId] = useState<string | null>(null);
   const [offscreen, setOffscreen] = useState(false);
   // Anchor element used only to locate the enclosing scroller/viewport in the DOM.
@@ -546,46 +551,100 @@ function StickyHeaderOverlay({ items }: { items: ConversationItem[] }) {
       <span ref={probeRef} className="hidden" aria-hidden="true" />
       <AnimatePresence>
         {active != null && offscreen && active.id !== dismissedId && (
-          <motion.div
-            key="chat-sticky-header"
-            // Slide in slightly from the top + fade (ease-out-cubic). Exit a touch faster.
-            initial={shouldReduceMotion ? false : { opacity: 0, y: -8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={
-              shouldReduceMotion
-                ? { opacity: 0 }
-                : { opacity: 0, y: -8, transition: { duration: 0.15 } }
-            }
-            transition={{ duration: 0.2, ease: [0.215, 0.61, 0.355, 1] }}
-            // pointer-events-none on the strip so only the button catches clicks — the rest stays
-            // transparent to the content scrolling underneath.
-            className="pointer-events-none absolute inset-x-0 top-2 z-10"
-          >
-            {/* Align to the content column's right edge (matches the message rows) rather than the
-                viewport edge, so the button reads in-context with the conversation. */}
-            <div
-              className="mx-auto flex w-full justify-end px-2"
-              style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
-            >
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                title="Jump to your message"
-                aria-label="Jump to your message"
-                onClick={() => dismiss(active.id)}
-                className="pointer-events-auto rounded-full bg-background shadow-md"
-              >
-                <ChatCircle />
-              </Button>
-            </div>
-          </motion.div>
+          <StickyHeaderJumpButton onClick={() => dismiss(active.id)} />
         )}
       </AnimatePresence>
     </>
   );
 }
 
+/**
+ * The floating "jump to your message" pill both sticky-header variants render. Must be a direct
+ * child of an `AnimatePresence` so its exit animation plays.
+ */
+function StickyHeaderJumpButton({ onClick }: { onClick: () => void }) {
+  const shouldReduceMotion = useReducedMotion();
+  return (
+    <motion.div
+      key="chat-sticky-header"
+      // Slide in slightly from the top + fade (ease-out-cubic). Exit a touch faster.
+      initial={shouldReduceMotion ? false : { opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={
+        shouldReduceMotion
+          ? { opacity: 0 }
+          : { opacity: 0, y: -8, transition: { duration: 0.15 } }
+      }
+      transition={{ duration: 0.2, ease: [0.215, 0.61, 0.355, 1] }}
+      // pointer-events-none on the strip so only the button catches clicks — the rest stays
+      // transparent to the content scrolling underneath.
+      className="pointer-events-none absolute inset-x-0 top-2 z-10"
+    >
+      {/* Align to the content column's right edge (matches the message rows) rather than the
+          viewport edge, so the button reads in-context with the conversation. */}
+      <div
+        className="mx-auto flex w-full justify-end px-2"
+        style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+      >
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          title="Jump to your message"
+          aria-label="Jump to your message"
+          onClick={onClick}
+          className="pointer-events-auto rounded-full bg-background shadow-md"
+        >
+          <ChatCircle />
+        </Button>
+      </div>
+    </motion.div>
+  );
+}
+
+/**
+ * Virtualized-mode sticky header. The engine's visibility state can't power it here — unmounted
+ * rows aren't observed — so the parent derives the anchor from the virtualizer's measurements
+ * (see {@link computeStickyAnchor}) and passes the result down. Dismissal semantics match
+ * {@link StickyHeaderOverlay}: hide immediately on click, return once the message has been back
+ * on screen.
+ */
+function VirtualStickyHeader({
+  items,
+  anchorId,
+  offscreen,
+  onJump,
+}: {
+  items: ConversationItem[];
+  anchorId: string | null;
+  offscreen: boolean;
+  onJump: (id: string) => void;
+}) {
+  const [dismissedId, setDismissedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!offscreen) setDismissedId(null);
+  }, [offscreen]);
+
+  const active = items.find(
+    (i): i is Extract<ConversationItem, { type: "user_message" }> =>
+      i.id === anchorId && i.type === "user_message",
+  );
+
+  return (
+    <AnimatePresence>
+      {active != null && offscreen && active.id !== dismissedId && (
+        <StickyHeaderJumpButton
+          onClick={() => {
+            setDismissedId(active.id);
+            onJump(active.id);
+          }}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
 /**
  * Start-aligned assistant prose bubble. Streamed tokens arrive in bursts; `useSmoothedText` reveals
  * them at a steady character rate so the text reads as even typing (text present on mount shows
@@ -665,21 +724,6 @@ function ThreadItemBody({
   return <>{renderItem(item)}</>;
 }
 
-/**
- * Completion time of an agent turn, taken from its last session-update item (tool groups count by
- * their last tool). Undefined while the turn is still streaming — the timestamp only appears once
- * the whole turn is done.
- */
-function completedTurnTimestamp(turn: AgentTurn): number | undefined {
-  for (let i = turn.items.length - 1; i >= 0; i--) {
-    const item = turn.items[i];
-    const last = item.type === "tool_group" ? item.tools.at(-1) : item;
-    if (last?.type !== "session_update") continue;
-    return last.turnContext.turnComplete ? last.timestamp : undefined;
-  }
-  return undefined;
-}
-
 /**
  * One transcript row. Memoized and scroll-state-free, so rows never re-render while scrolling — the
  * non-virtualized thread stays cheap. The pinned header is the separate overlay, not the rows.
@@ -821,6 +865,7 @@ function ThreadKeyboardNav({
   keyboardFocusedMessageId,
   setKeyboardFocusedMessageId,
   promptRecallRef,
+  jumpToMessage,
 }: {
   items: ConversationItem[];
   jumpPickerOpen: boolean;
@@ -828,8 +873,15 @@ function ThreadKeyboardNav({
   keyboardFocusedMessageId: string | null;
   setKeyboardFocusedMessageId: (id: string | null) => void;
   promptRecallRef?: RefObject<PromptRecallHandler | null>;
+  /**
+   * Override for the engine's `scrollToMessage`. The virtualized body supplies one that jumps by
+   * row index — the engine can only scroll to mounted rows, and a windowed thread keeps most rows
+   * unmounted.
+   */
+  jumpToMessage?: (id: string) => void;
 }) {
   const { scrollToMessage } = useChatMessageScroller();
+  const jump = jumpToMessage ?? scrollToMessage;
 
   const userMessages = useMemo(
     () =>
@@ -875,13 +927,13 @@ function ThreadKeyboardNav({
 
       useSettingsStore.getState().markHintLearned(PROMPT_RECALL_HINT_KEY);
       setKeyboardFocusedMessageId(nextId);
-      scrollToMessage(nextId);
+      jump(nextId);
     },
     [
       keyboardFocusedMessageId,
       userMessageIds,
       setKeyboardFocusedMessageId,
-      scrollToMessage,
+      jump,
     ],
   );
 
@@ -902,9 +954,9 @@ function ThreadKeyboardNav({
   const handleJumpToMessage = useCallback(
     (id: string) => {
       setKeyboardFocusedMessageId(id);
-      scrollToMessage(id);
+      jump(id);
     },
-    [scrollToMessage, setKeyboardFocusedMessageId],
+    [jump, setKeyboardFocusedMessageId],
   );
 
   return (
@@ -917,6 +969,47 @@ function ThreadKeyboardNav({
   );
 }
 
+/**
+ * Scroll state the non-virtualized body continuously records so the virtualized body can resume
+ * from roughly the same place when the thread crosses the virtualization threshold mid-session.
+ */
+type ThreadScrollResume = { atBottom: boolean; scrollTop: number };
+
+/**
+ * Keeps {@link ThreadScrollResume} current while the non-virtualized body is mounted. At-bottom
+ * comes from the engine's scrollable state (`end` is true while content extends below the fold);
+ * scrollTop comes from a passive listener on the engine viewport, located via the same hidden
+ * probe pattern the other engine-adjacent helpers use. Writes go to a ref — this must not
+ * re-render on scroll.
+ */
+function ThreadScrollStateRecorder({
+  stateRef,
+}: {
+  stateRef: RefObject<ThreadScrollResume>;
+}) {
+  const { end } = useChatMessageScrollerScrollable();
+  const probeRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    stateRef.current = { ...stateRef.current, atBottom: !end };
+  }, [end, stateRef]);
+
+  useEffect(() => {
+    const viewport = probeRef.current
+      ?.closest('[data-slot="chat-message-scroller"]')
+      ?.querySelector('[data-slot="chat-message-scroller-viewport"]');
+    if (!viewport) return;
+    const record = () => {
+      stateRef.current = { ...stateRef.current, scrollTop: viewport.scrollTop };
+    };
+    record();
+    viewport.addEventListener("scroll", record, { passive: true });
+    return () => viewport.removeEventListener("scroll", record);
+  }, [stateRef]);
+
+  return <span ref={probeRef} className="hidden" aria-hidden="true" />;
+}
+
 /** The scroll body, under the Provider so the overlay + scroll-button hooks can read engine state. */
 function ThreadScrollBody({
   items,
@@ -925,6 +1018,7 @@ function ThreadScrollBody({
   footer,
   keyboardFocusedMessageId,
   onUserInteract,
+  resumeStateRef,
 }: {
   items: ConversationItem[];
   rows: TurnRow[];
@@ -934,6 +1028,8 @@ function ThreadScrollBody({
   keyboardFocusedMessageId?: string | null;
   /** Clears keyboard-focused message state on any pointer interaction with the thread. */
   onUserInteract?: () => void;
+  /** Continuously updated so the virtualized body can take over mid-session (see {@link ThreadScrollResume}). */
+  resumeStateRef: RefObject<ThreadScrollResume>;
 }) {
   const keyedRows = useMemo(() => {
     let userTurn = 0;
@@ -952,6 +1048,7 @@ function ThreadScrollBody({
     >
       <StickyHeaderOverlay items={items} />
       <ThreadAutoFollow items={items} />
+      <ThreadScrollStateRecorder stateRef={resumeStateRef} />
       <ThreadScrollbarRail
         items={items}
         keyboardFocusedMessageId={keyboardFocusedMessageId}
@@ -1081,6 +1178,472 @@ function ThreadScrollbarRail({
   );
 }
 
+// Windowing geometry for the virtualized body. Estimate/overscan/drift values match the legacy
+// VirtualizedList, whose tuning these rows share (same item mix, same measure-then-settle churn).
+const VIRTUAL_ESTIMATED_ROW_SIZE = 80;
+const VIRTUAL_OVERSCAN = 12;
+/** Matches the Provider's `scrollEdgeThreshold` so "at bottom" agrees between engine and windowing. */
+const VIRTUAL_AT_BOTTOM_THRESHOLD = 100;
+// A real upward drift, not a 1-frame measure transient: the DOM bottom sits
+// this far below the viewport. Well above any single append's measure gap.
+const VIRTUAL_FAR_DRIFT_THRESHOLD = 400;
+/** Top of the virtual coordinate space — stands in for the non-virtualized content's `py-4`. */
+const VIRTUAL_PADDING_START = 16;
+
+const EMPTY_FLAT_ROWS: FlatThreadRow[] = [];
+
+/** Imperative surface the virtualized body hands to the nav layer rendered outside it. */
+interface VirtualJumpApi {
+  jumpToMessage: (id: string) => void;
+}
+
+/**
+ * One windowed row. Memoized against the row's *contents* rather than the row wrapper object —
+ * `flattenTurnRows` rebuilds wrappers on every streamed chunk, but the underlying conversation
+ * items are reused by reference for completed turns, so mounted rows outside the streaming tail
+ * skip re-rendering their markdown/diffs.
+ *
+ * `content-visibility` is forced off (the quill item class sets `auto`): the virtualizer already
+ * bounds the mounted set, and overscan rows must lay out for `measureElement` to size them before
+ * they scroll into view — skipped rendering would feed it the placeholder intrinsic size instead.
+ */
+const FlatRowView = memo(
+  function FlatRowView({
+    row,
+    renderItem,
+    keyboardFocused,
+  }: {
+    row: FlatThreadRow;
+    renderItem: (item: ConversationItem) => ReactNode;
+    keyboardFocused: boolean;
+  }) {
+    const { item } = row;
+    return (
+      <ChatMessageScrollerItem
+        messageId={item.id}
+        scrollAnchor={false}
+        className={cn(
+          // pb-4 stands in for the non-virtualized content's inter-row gap-4; an empty row
+          // collapses entirely (display:none hides the padding too), matching how flex gap
+          // skips hidden children there.
+          "mx-auto w-full pb-4 [content-visibility:visible] empty:hidden",
+          row.inTurn ? "group px-4" : "px-2.5 pt-1",
+        )}
+        style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+      >
+        <ThreadItemBody
+          item={item}
+          renderItem={renderItem}
+          isTrailing={row.isTrailingInTurn}
+          keyboardFocused={keyboardFocused}
+        />
+        {row.turnTimestamp != null && (
+          <RowTimestamp timestamp={row.turnTimestamp} />
+        )}
+      </ChatMessageScrollerItem>
+    );
+  },
+  (prev, next) =>
+    prev.row.item === next.row.item &&
+    prev.row.key === next.row.key &&
+    prev.row.inTurn === next.row.inTurn &&
+    prev.row.isTrailingInTurn === next.row.isTrailingInTurn &&
+    prev.row.turnTimestamp === next.row.turnTimestamp &&
+    prev.renderItem === next.renderItem &&
+    prev.keyboardFocused === next.keyboardFocused,
+);
+
+/**
+ * Windowed scroll body for long threads, following the upstream MessageScroller guidance:
+ * virtualization lives outside the primitive — the quill viewport stays the scroll element and a
+ * `@tanstack/react-virtual` virtualizer owns the rows inside `ChatMessageScrollerContent`.
+ *
+ * The engine still provides the chrome that only needs scroll geometry (the scroll-to-bottom
+ * button and edge state read real element measurements), while everything item-based gets a
+ * windowed implementation here: follow-bottom via `anchorTo: "end"` + `followOnAppend` (the
+ * legacy `VirtualizedList` recipe), message jumps via `scrollToIndex`, the sticky header via
+ * {@link computeStickyAnchor} over the virtualizer's measurements, and the scrollbar rail via its
+ * existing interpolate-unmounted-rows path.
+ */
+function VirtualThreadScrollBody({
+  items,
+  flatRows,
+  renderItem,
+  footer,
+  keyboardFocusedMessageId,
+  onUserInteract,
+  jumpApiRef,
+  resumeStateRef,
+}: {
+  items: ConversationItem[];
+  flatRows: FlatThreadRow[];
+  renderItem: (item: ConversationItem) => ReactNode;
+  /** Status row (duration / context usage) pinned as the last item in the thread. */
+  footer?: ReactNode;
+  keyboardFocusedMessageId?: string | null;
+  /** Clears keyboard-focused message state on any pointer interaction with the thread. */
+  onUserInteract?: () => void;
+  /** Filled with this body's jump implementation for the nav layer rendered outside it. */
+  jumpApiRef: RefObject<VirtualJumpApi | null>;
+  /** Scroll state recorded by the non-virtualized body, consumed once when this body takes over. */
+  resumeStateRef: RefObject<ThreadScrollResume>;
+}) {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [viewportEl, setViewportEl] = useState<HTMLDivElement | null>(null);
+  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
+  const footerRef = useRef<HTMLDivElement | null>(null);
+  const initializedRef = useRef(false);
+  // Seeded from the handoff state so a mid-session flip while reading above the fold doesn't
+  // immediately re-pin to the bottom.
+  const isAtBottomRef = useRef(resumeStateRef.current?.atBottom ?? true);
+  const lastScrollTopRef = useRef(0);
+  const settleRafRef = useRef<number | null>(null);
+
+  // The footer is real trailing content, NOT a fake virtual row — as a virtual row its constant
+  // key would always be last and permanently kill tanstack's followOnAppend. Its height is
+  // reserved as `paddingEnd` instead so the virtual coordinate space includes it (the
+  // VirtualizedList recipe).
+  const hasFooter = footer != null;
+  const [footerHeight, setFooterHeight] = useState(0);
+  useLayoutEffect(() => {
+    const el = footerRef.current;
+    if (!hasFooter || !el) {
+      setFooterHeight(0);
+      return;
+    }
+    setFooterHeight(el.offsetHeight);
+    const ro = new ResizeObserver(() => {
+      const h = el.offsetHeight;
+      setFooterHeight((prev) => (prev === h ? prev : h));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasFooter]);
+
+  const virtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => VIRTUAL_ESTIMATED_ROW_SIZE,
+    overscan: VIRTUAL_OVERSCAN,
+    anchorTo: "end",
+    followOnAppend: true,
+    scrollEndThreshold: VIRTUAL_AT_BOTTOM_THRESHOLD,
+    paddingStart: VIRTUAL_PADDING_START,
+    paddingEnd: footerHeight,
+    getItemKey: (index) => flatRows[index]?.key ?? index,
+  });
+
+  const cancelSettle = useCallback(() => {
+    if (settleRafRef.current !== null) {
+      cancelAnimationFrame(settleRafRef.current);
+      settleRafRef.current = null;
+    }
+  }, []);
+
+  // Pin to the true bottom, retrying across frames while rows measure taller than the estimate.
+  const settleAtEnd = useCallback(() => {
+    cancelSettle();
+    isAtBottomRef.current = true;
+    let attempts = 0;
+    const step = () => {
+      virtualizer.scrollToEnd();
+      if (virtualizer.isAtEnd(VIRTUAL_AT_BOTTOM_THRESHOLD) || ++attempts > 12) {
+        settleRafRef.current = null;
+        return;
+      }
+      settleRafRef.current = requestAnimationFrame(step);
+    };
+    step();
+  }, [virtualizer, cancelSettle]);
+
+  // Jump to a row, re-issuing across a few frames until the target offset stops drifting as the
+  // rows around it measure.
+  const settleToIndex = useCallback(
+    (index: number) => {
+      cancelSettle();
+      isAtBottomRef.current = false;
+      virtualizer.scrollToIndex(index, { align: "start" });
+      let attempts = 0;
+      const step = () => {
+        settleRafRef.current = null;
+        const viewport = viewportRef.current;
+        const target = virtualizer.getOffsetForIndex(index, "start")?.[0];
+        if (!viewport || target == null) return;
+        const maxScroll = Math.max(
+          0,
+          viewport.scrollHeight - viewport.clientHeight,
+        );
+        if (
+          Math.abs(viewport.scrollTop - Math.min(target, maxScroll)) <= 1 ||
+          ++attempts > 8
+        ) {
+          return;
+        }
+        virtualizer.scrollToIndex(index, { align: "start" });
+        settleRafRef.current = requestAnimationFrame(step);
+      };
+      settleRafRef.current = requestAnimationFrame(step);
+    },
+    [virtualizer, cancelSettle],
+  );
+
+  useEffect(() => cancelSettle, [cancelSettle]);
+
+  const userRows = useMemo(() => {
+    const result: Array<{ id: string; rowIndex: number; content: string }> = [];
+    flatRows.forEach((row, index) => {
+      if (row.item.type === "user_message") {
+        result.push({
+          id: row.item.id,
+          rowIndex: index,
+          content: row.item.content,
+        });
+      }
+    });
+    return result;
+  }, [flatRows]);
+
+  const rowIndexByMessageId = useMemo(() => {
+    const map = new Map<string, number>();
+    flatRows.forEach((row, index) => {
+      map.set(row.item.id, index);
+    });
+    return map;
+  }, [flatRows]);
+
+  const jumpToMessage = useCallback(
+    (id: string) => {
+      const index = rowIndexByMessageId.get(id);
+      if (index != null) settleToIndex(index);
+    },
+    [rowIndexByMessageId, settleToIndex],
+  );
+
+  useEffect(() => {
+    jumpApiRef.current = { jumpToMessage };
+    return () => {
+      jumpApiRef.current = null;
+    };
+  }, [jumpApiRef, jumpToMessage]);
+
+  // Initial position: resume near where the non-virtualized body left off (offsets are estimates
+  // until rows measure, so the landing is approximate and self-corrects), or settle at the bottom.
+  useLayoutEffect(() => {
+    if (initializedRef.current || flatRows.length === 0) return;
+    initializedRef.current = true;
+    const resume = resumeStateRef.current;
+    if (resume && !resume.atBottom) {
+      virtualizer.scrollToOffset(resume.scrollTop);
+      return;
+    }
+    settleAtEnd();
+  }, [flatRows.length, settleAtEnd, virtualizer, resumeStateRef]);
+
+  // Sticky-header anchor, derived from the virtualizer's measurements (estimated for rows that
+  // have never mounted; exact once measured). Recomputed at most once per frame on scroll and on
+  // content growth.
+  const [stickyState, setStickyState] = useState<StickyAnchorState>({
+    anchorId: null,
+    offscreen: false,
+  });
+  const recomputeSticky = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const cache = virtualizer.measurementsCache;
+    const entries: StickyAnchorEntry[] = userRows.map((user) => {
+      const measured = cache[user.rowIndex];
+      const start =
+        measured?.start ?? user.rowIndex * VIRTUAL_ESTIMATED_ROW_SIZE;
+      const end = measured?.end ?? start + VIRTUAL_ESTIMATED_ROW_SIZE;
+      return { id: user.id, start, end };
+    });
+    const next = computeStickyAnchor(
+      entries,
+      viewport.scrollTop,
+      SCROLL_PREVIOUS_ITEM_PEEK,
+    );
+    setStickyState((prev) =>
+      prev.anchorId === next.anchorId && prev.offscreen === next.offscreen
+        ? prev
+        : next,
+    );
+  }, [userRows, virtualizer]);
+
+  const stickyFrameRef = useRef<number | null>(null);
+  const scheduleStickyRecompute = useCallback(() => {
+    if (stickyFrameRef.current != null) return;
+    stickyFrameRef.current = requestAnimationFrame(() => {
+      stickyFrameRef.current = null;
+      recomputeSticky();
+    });
+  }, [recomputeSticky]);
+  useEffect(() => {
+    scheduleStickyRecompute();
+    return () => {
+      if (stickyFrameRef.current != null) {
+        cancelAnimationFrame(stickyFrameRef.current);
+        stickyFrameRef.current = null;
+      }
+    };
+  }, [scheduleStickyRecompute]);
+
+  const handleScroll = useCallback(() => {
+    const el = viewportRef.current;
+    const scrollTop = el?.scrollTop ?? 0;
+    // Tolerate sub-pixel jitter; only a real upward move counts as leaving end.
+    const scrolledUp = scrollTop < lastScrollTopRef.current - 1;
+    lastScrollTopRef.current = scrollTop;
+
+    const atEnd = virtualizer.isAtEnd(VIRTUAL_AT_BOTTOM_THRESHOLD);
+    // Genuine far drift (not a 1-frame measure transient): the DOM bottom sits well below the
+    // viewport, so follow can't get silently stuck mid-thread.
+    const farFromEnd = el
+      ? el.scrollHeight - el.clientHeight - scrollTop >
+        VIRTUAL_FAR_DRIFT_THRESHOLD
+      : false;
+    // Hysteresis: each append measures taller than the estimate, so for one frame isAtEnd reads
+    // false before followOnAppend/anchorTo re-pin. Re-arm at the end; only clear on a real
+    // upward scroll or a genuine drift.
+    if (atEnd) {
+      isAtBottomRef.current = true;
+    } else if (scrolledUp || farFromEnd) {
+      isAtBottomRef.current = false;
+    }
+    scheduleStickyRecompute();
+  }, [virtualizer, scheduleStickyRecompute]);
+
+  const totalSize = virtualizer.getTotalSize();
+
+  // Anything that changes the virtual height while following has to re-pin to the new bottom:
+  // rows remeasuring past the estimate, late async content (highlighting, diffs) growing rows,
+  // and the footer resize feeding paddingEnd. totalSize is the one value that moves for all of
+  // them. Layout effect so the re-pin lands before paint.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: totalSize is the trigger, not a body dependency
+  useLayoutEffect(() => {
+    if (!isAtBottomRef.current) return;
+    virtualizer.scrollToEnd();
+  }, [totalSize, virtualizer]);
+
+  // A prompt submitted from anywhere re-engages follow (same trigger ThreadAutoFollow uses in the
+  // non-virtualized body): settleAtEnd flips isAtBottomRef, and the totalSize re-pin plus
+  // followOnAppend keep the reply pinned from there.
+  const lastItem = items.at(-1);
+  const userMessageCount = useMemo(
+    () =>
+      items.reduce((n, item) => (item.type === "user_message" ? n + 1 : n), 0),
+    [items],
+  );
+  const prevUserCountRef = useRef(userMessageCount);
+  useLayoutEffect(() => {
+    const previous = prevUserCountRef.current;
+    prevUserCountRef.current = userMessageCount;
+    if (previous === 0 || userMessageCount <= previous) return;
+    if (lastItem?.type !== "user_message") return;
+    settleAtEnd();
+  }, [userMessageCount, lastItem, settleAtEnd]);
+
+  // Coming back to a backgrounded tab: ResizeObserver callbacks were throttled, so re-settle if
+  // we were following (the legacy view does the same).
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden && isAtBottomRef.current) settleAtEnd();
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [settleAtEnd]);
+
+  const railUserMessages = useMemo(
+    () =>
+      userRows.map((user) => ({
+        id: user.id,
+        content: user.content,
+        index: user.rowIndex,
+      })),
+    [userRows],
+  );
+  const railMarkers = useMessageRailMarkers({
+    contentEl,
+    scrollEl: viewportEl,
+    userMessages: railUserMessages,
+    onJump: jumpToMessage,
+    activeId: keyboardFocusedMessageId,
+    rowAttribute: "data-message-id",
+  });
+
+  return (
+    <ChatMessageScroller
+      className="group/thread"
+      onPointerDownCapture={onUserInteract}
+    >
+      <VirtualStickyHeader
+        items={items}
+        anchorId={stickyState.anchorId}
+        offscreen={stickyState.offscreen}
+        onJump={jumpToMessage}
+      />
+      <MessageScrollbarRail markers={railMarkers} />
+      <ChatMessageScrollerViewport
+        ref={(el: HTMLDivElement | null) => {
+          viewportRef.current = el;
+          setViewportEl(el);
+        }}
+        onScroll={handleScroll}
+      >
+        {/* `block` overrides the content's flex+gap layout — spacing moves into the rows
+            (pb-4) and the virtual paddings, so translateY offsets are the whole layout. */}
+        <ChatMessageScrollerContent className="block" density="default">
+          <div
+            ref={setContentEl}
+            className="relative w-full"
+            style={{ height: totalSize }}
+          >
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const row = flatRows[virtualItem.index];
+              if (!row) return null;
+              return (
+                <div
+                  key={virtualItem.key}
+                  ref={virtualizer.measureElement}
+                  data-index={virtualItem.index}
+                  className="absolute top-0 left-0 w-full"
+                  style={{ transform: `translateY(${virtualItem.start}px)` }}
+                >
+                  <FlatRowView
+                    row={row}
+                    renderItem={renderItem}
+                    keyboardFocused={row.item.id === keyboardFocusedMessageId}
+                  />
+                </div>
+              );
+            })}
+            {/* Footer occupies the reserved paddingEnd region at the very bottom of the virtual
+                space, so the DOM bottom == the virtual end. */}
+            {hasFooter && (
+              <div ref={footerRef} className="absolute bottom-0 left-0 w-full">
+                <div
+                  className="mx-auto w-full px-2.5 pb-8"
+                  style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+                >
+                  {footer}
+                </div>
+              </div>
+            )}
+          </div>
+        </ChatMessageScrollerContent>
+      </ChatMessageScrollerViewport>
+      <ChatMessageScrollerButton
+        onClick={(event: ReactMouseEvent) => {
+          // The engine's own scroll-to-end targets the current scrollHeight, which is an
+          // estimate until every row between here and the bottom has measured — settle instead.
+          event.preventDefault();
+          settleAtEnd();
+        }}
+      />
+    </ChatMessageScroller>
+  );
+}
+
 /**
  * Thread renderer built on the ChatX (quill) primitives.
  *
@@ -1174,6 +1737,34 @@ function ChatThreadRenderer({
     [items],
   );
 
+  // Virtualization ratchet: past the threshold the thread switches to the windowed body and
+  // stays there for the life of this mount (see CHAT_THREAD_VIRTUALIZATION_THRESHOLD). Long
+  // sessions start virtualized from the first render; a live session flips once mid-stream,
+  // resuming from the scroll state the non-virtualized body recorded.
+  const flatCount = useMemo(() => countFlatRows(rows), [rows]);
+  const [virtualized, setVirtualized] = useState(
+    () => flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD,
+  );
+  if (!virtualized && flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD) {
+    setVirtualized(true);
+  }
+  const flatRows = useMemo(
+    () => (virtualized ? flattenTurnRows(rows) : EMPTY_FLAT_ROWS),
+    [virtualized, rows],
+  );
+  const virtualJumpApiRef = useRef<VirtualJumpApi | null>(null);
+  const threadResumeRef = useRef<ThreadScrollResume>({
+    atBottom: true,
+    scrollTop: 0,
+  });
+  const jumpToMessage = useMemo(
+    () =>
+      virtualized
+        ? (id: string) => virtualJumpApiRef.current?.jumpToMessage(id)
+        : undefined,
+    [virtualized],
+  );
+
   const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
   const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
     string | null
@@ -1245,6 +1836,16 @@ function ChatThreadRenderer({
     [repoPath],
   );
 
+  const footer = (
+    <ChatThreadFooter
+      events={footerEvents}
+      isPromptPending={isPromptPending}
+      promptStartedAt={promptStartedAt}
+      task={task}
+      taskId={taskId}
+    />
+  );
+
   return (
     <WorkerPoolContextProvider
       poolOptions={diffsPoolOptions}
@@ -1253,31 +1854,39 @@ function ChatThreadRenderer({
       <SessionTaskIdProvider taskId={taskId}>
         <ChatThreadChromeProvider value={true}>
           <ChatMessageScrollerProvider
-            autoScroll
+            // The windowed body owns following itself (anchorTo end + followOnAppend) — the
+            // engine's own follow would fight it, so it only auto-scrolls when non-virtualized.
+            autoScroll={!virtualized}
             defaultScrollPosition="end"
             // Default is 8px: with the thread's bottom padding you're rarely that close, so
             // auto-follow ("following-bottom") would disengage on any stray trackpad wheel and
             // never re-engage. Within this band the engine recaptures follow on the next content
             // change; deliberate upward flicks travel past it and stay free-scrolling.
             scrollEdgeThreshold={100}
-            scrollPreviousItemPeek={64}
+            scrollPreviousItemPeek={SCROLL_PREVIOUS_ITEM_PEEK}
           >
-            <ThreadScrollBody
-              items={items}
-              rows={rows}
-              renderItem={renderItem}
-              keyboardFocusedMessageId={keyboardFocusedMessageId}
-              onUserInteract={clearKeyboardFocus}
-              footer={
-                <ChatThreadFooter
-                  events={footerEvents}
-                  isPromptPending={isPromptPending}
-                  promptStartedAt={promptStartedAt}
-                  task={task}
-                  taskId={taskId}
-                />
-              }
-            />
+            {virtualized ? (
+              <VirtualThreadScrollBody
+                items={items}
+                flatRows={flatRows}
+                renderItem={renderItem}
+                keyboardFocusedMessageId={keyboardFocusedMessageId}
+                onUserInteract={clearKeyboardFocus}
+                footer={footer}
+                jumpApiRef={virtualJumpApiRef}
+                resumeStateRef={threadResumeRef}
+              />
+            ) : (
+              <ThreadScrollBody
+                items={items}
+                rows={rows}
+                renderItem={renderItem}
+                keyboardFocusedMessageId={keyboardFocusedMessageId}
+                onUserInteract={clearKeyboardFocus}
+                footer={footer}
+                resumeStateRef={threadResumeRef}
+              />
+            )}
             <ThreadKeyboardNav
               items={items}
               jumpPickerOpen={jumpPickerOpen}
@@ -1285,6 +1894,7 @@ function ChatThreadRenderer({
               keyboardFocusedMessageId={keyboardFocusedMessageId}
               setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
               promptRecallRef={promptRecallRef}
+              jumpToMessage={jumpToMessage}
             />
           </ChatMessageScrollerProvider>
         </ChatThreadChromeProvider>
diff --git a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.test.ts b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.test.ts
new file mode 100644
index 0000000000..6a71221071
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.test.ts
@@ -0,0 +1,188 @@
+import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { describe, expect, it } from "vitest";
+import type { ToolGroupItem } from "./ToolGroup";
+import {
+  type AgentTurn,
+  computeStickyAnchor,
+  countFlatRows,
+  flattenTurnRows,
+  type StickyAnchorEntry,
+  type TurnRow,
+} from "./threadVirtualization";
+
+type SessionUpdateItem = Extract<ConversationItem, { type: "session_update" }>;
+
+function userMessage(id: string): ConversationItem {
+  return { type: "user_message", id, content: `msg ${id}`, timestamp: 1 };
+}
+
+function sessionUpdate(
+  id: string,
+  {
+    turnComplete = false,
+    timestamp,
+  }: { turnComplete?: boolean; timestamp?: number } = {},
+): SessionUpdateItem {
+  return {
+    type: "session_update",
+    id,
+    update: {
+      sessionUpdate: "agent_message_chunk",
+      content: { type: "text", text: `text ${id}` },
+    } as SessionUpdateItem["update"],
+    turnContext: {
+      toolCalls: new Map(),
+      childItems: new Map(),
+      turnCancelled: false,
+      turnComplete,
+    },
+    timestamp,
+  };
+}
+
+function toolGroup(id: string, tools: SessionUpdateItem[]): ToolGroupItem {
+  return { type: "tool_group", id, tools };
+}
+
+function agentTurn(id: string, items: TurnRow[]): AgentTurn {
+  return { type: "agent_turn", id, items: items as AgentTurn["items"] };
+}
+
+describe("flattenTurnRows", () => {
+  it("passes standalone rows through with ordinal keys for user messages", () => {
+    const rows: TurnRow[] = [
+      userMessage("u1"),
+      { type: "git_action", id: "g1", actionType: "commit" as never },
+      userMessage("u2"),
+    ];
+    const flat = flattenTurnRows(rows);
+    expect(flat.map((r) => r.key)).toEqual([
+      "user-turn-0",
+      "g1",
+      "user-turn-1",
+    ]);
+    expect(flat.every((r) => !r.inTurn && !r.isTrailingInTurn)).toBe(true);
+  });
+
+  it("flattens an agent turn to one row per item, flagging only the last as trailing", () => {
+    const a = sessionUpdate("a");
+    const b = toolGroup("b", [sessionUpdate("b1"), sessionUpdate("b2")]);
+    const c = sessionUpdate("c");
+    const flat = flattenTurnRows([
+      userMessage("u1"),
+      agentTurn("a", [a, b, c]),
+    ]);
+    expect(flat.map((r) => r.key)).toEqual(["user-turn-0", "a", "b", "c"]);
+    expect(flat.map((r) => r.inTurn)).toEqual([false, true, true, true]);
+    expect(flat.map((r) => r.isTrailingInTurn)).toEqual([
+      false,
+      false,
+      false,
+      true,
+    ]);
+  });
+
+  it("puts the completion timestamp only on the last row of a completed turn", () => {
+    const done = agentTurn("d", [
+      sessionUpdate("d1"),
+      sessionUpdate("d2", { turnComplete: true, timestamp: 1234 }),
+    ]);
+    const flat = flattenTurnRows([done]);
+    expect(flat.map((r) => r.turnTimestamp)).toEqual([undefined, 1234]);
+  });
+
+  it("reads a trailing tool group's timestamp from its last tool", () => {
+    const turn = agentTurn("t", [
+      sessionUpdate("t1"),
+      toolGroup("t2", [
+        sessionUpdate("t2a"),
+        sessionUpdate("t2b", { turnComplete: true, timestamp: 99 }),
+      ]),
+    ]);
+    const flat = flattenTurnRows([turn]);
+    expect(flat.at(-1)?.turnTimestamp).toBe(99);
+  });
+
+  it("leaves the timestamp unset while the turn is still streaming", () => {
+    const streaming = agentTurn("s", [
+      sessionUpdate("s1"),
+      sessionUpdate("s2", { turnComplete: false }),
+    ]);
+    const flat = flattenTurnRows([streaming]);
+    expect(flat.every((r) => r.turnTimestamp === undefined)).toBe(true);
+  });
+});
+
+describe("countFlatRows", () => {
+  it("matches the length flattenTurnRows produces", () => {
+    const rows: TurnRow[] = [
+      userMessage("u1"),
+      agentTurn("a", [sessionUpdate("a1"), sessionUpdate("a2")]),
+      userMessage("u2"),
+      { type: "git_action", id: "g1", actionType: "commit" as never },
+      agentTurn("b", [
+        sessionUpdate("b1"),
+        toolGroup("b2", [sessionUpdate("b2a")]),
+        sessionUpdate("b3"),
+      ]),
+    ];
+    expect(countFlatRows(rows)).toBe(flattenTurnRows(rows).length);
+    expect(countFlatRows(rows)).toBe(8);
+  });
+
+  it("is zero for an empty thread", () => {
+    expect(countFlatRows([])).toBe(0);
+  });
+});
+
+describe("computeStickyAnchor", () => {
+  const entries: StickyAnchorEntry[] = [
+    { id: "u1", start: 0, end: 100 },
+    { id: "u2", start: 500, end: 620 },
+    { id: "u3", start: 2000, end: 2080 },
+  ];
+
+  it("returns no anchor when scrolled above every user row", () => {
+    // u1 starts inside the peek band at scrollTop 0, so scroll "above" means a
+    // list whose first user row starts below the band.
+    const below: StickyAnchorEntry[] = [{ id: "u1", start: 300, end: 400 }];
+    expect(computeStickyAnchor(below, 0, 64)).toEqual({
+      anchorId: null,
+      offscreen: false,
+    });
+  });
+
+  it("keeps the anchor visible while its row is still on screen", () => {
+    expect(computeStickyAnchor(entries, 40, 64)).toEqual({
+      anchorId: "u1",
+      offscreen: false,
+    });
+  });
+
+  it("marks the anchor offscreen once its bottom clears the viewport top", () => {
+    expect(computeStickyAnchor(entries, 120, 64)).toEqual({
+      anchorId: "u1",
+      offscreen: true,
+    });
+  });
+
+  it("picks the last user row above the peek band", () => {
+    expect(computeStickyAnchor(entries, 900, 64)).toEqual({
+      anchorId: "u2",
+      offscreen: true,
+    });
+    expect(computeStickyAnchor(entries, 2000, 64)).toEqual({
+      anchorId: "u3",
+      offscreen: false,
+    });
+  });
+
+  it("counts a row entering the peek band as the new anchor", () => {
+    // u2 starts at 500; at scrollTop 440 its top sits 60px below the viewport
+    // top, inside the 64px band.
+    expect(computeStickyAnchor(entries, 440, 64)).toEqual({
+      anchorId: "u2",
+      offscreen: false,
+    });
+  });
+});
diff --git a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
new file mode 100644
index 0000000000..86c2434447
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
@@ -0,0 +1,139 @@
+import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import type { ToolGroupItem } from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
+
+/** A row is either a parsed conversation item or a synthesized group of tool calls. */
+export type ThreadItem = ConversationItem | ToolGroupItem;
+
+/**
+ * A contiguous run of non-user rows (assistant prose, tools, git actions, ...) shown as one
+ * block with tight internal spacing. Broken only by a user message.
+ */
+export type AgentTurn = { type: "agent_turn"; id: string; items: ThreadItem[] };
+
+/** Top-level row: a standalone user message, or a grouped agent turn. */
+export type TurnRow = ThreadItem | AgentTurn;
+
+/**
+ * Flat-row count past which the thread switches to the windowed (virtualized) renderer.
+ *
+ * Below it, every row stays mounted and the full quill scroller engine drives anchoring and
+ * visibility — `content-visibility: auto` keeps paint cheap and the DOM small enough that React
+ * commits stay fast. Past it, the unbounded DOM plus a full-thread reconcile per streamed chunk
+ * is what locks the app, so the windowed renderer caps the mounted set instead. The switch is a
+ * one-way ratchet per mounted thread: crossing the threshold flips once and never flips back,
+ * so the two modes can't flap against each other mid-session.
+ */
+export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 150;
+
+/**
+ * One row of the virtualized thread. Agent turns are flattened to one row per item — a single
+ * turn can contain thousands of tool calls (autonomous sessions), so windowing at turn
+ * granularity would still mount an unbounded card. The turn's visual grouping survives via
+ * per-row flags instead of a wrapper element.
+ */
+export interface FlatThreadRow {
+  /**
+   * Stable list key. User messages are keyed by ordinal so the optimistic->real id swap of a
+   * just-sent message doesn't remount its row (same scheme as the non-virtualized path).
+   */
+  key: string;
+  item: ThreadItem;
+  /** True when this row belongs to an agent turn (turn-card padding + hover scope). */
+  inTurn: boolean;
+  /** Last row of its turn — a trailing tool group of a streaming turn may still grow. */
+  isTrailingInTurn: boolean;
+  /** Set on the last row of a completed turn; renders the turn's hover timestamp under it. */
+  turnTimestamp?: number;
+}
+
+/**
+ * Completion time of an agent turn, taken from its last session-update item (tool groups count
+ * by their last tool). Undefined while the turn is still streaming — the timestamp only appears
+ * once the whole turn is done.
+ */
+export function completedTurnTimestamp(turn: AgentTurn): number | undefined {
+  for (let i = turn.items.length - 1; i >= 0; i--) {
+    const item = turn.items[i];
+    const last = item.type === "tool_group" ? item.tools.at(-1) : item;
+    if (last?.type !== "session_update") continue;
+    return last.turnContext.turnComplete ? last.timestamp : undefined;
+  }
+  return undefined;
+}
+
+/** Flatten turn rows into the windowed row list (see {@link FlatThreadRow}). */
+export function flattenTurnRows(rows: TurnRow[]): FlatThreadRow[] {
+  const out: FlatThreadRow[] = [];
+  let userTurn = 0;
+  for (const row of rows) {
+    if (row.type === "agent_turn") {
+      const timestamp = completedTurnTimestamp(row);
+      for (let i = 0; i < row.items.length; i++) {
+        const item = row.items[i];
+        const isTrailing = i === row.items.length - 1;
+        out.push({
+          key: item.id,
+          item,
+          inTurn: true,
+          isTrailingInTurn: isTrailing,
+          turnTimestamp: isTrailing ? timestamp : undefined,
+        });
+      }
+      continue;
+    }
+    out.push({
+      key: row.type === "user_message" ? `user-turn-${userTurn++}` : row.id,
+      item: row,
+      inTurn: false,
+      isTrailingInTurn: false,
+    });
+  }
+  return out;
+}
+
+/** Number of rows {@link flattenTurnRows} would produce, without building them. */
+export function countFlatRows(rows: TurnRow[]): number {
+  let count = 0;
+  for (const row of rows) {
+    count += row.type === "agent_turn" ? row.items.length : 1;
+  }
+  return count;
+}
+
+/** A user-message row's measured extent in the scroll space, in row order. */
+export interface StickyAnchorEntry {
+  id: string;
+  /** Row top offset within the scroll space. */
+  start: number;
+  /** Row bottom offset within the scroll space. */
+  end: number;
+}
+
+export interface StickyAnchorState {
+  anchorId: string | null;
+  /** True once the anchoring row's bottom has scrolled above the viewport top. */
+  offscreen: boolean;
+}
+
+/**
+ * The user message anchoring the current viewport: the last user row whose top sits at or above
+ * the viewport top plus `peek` — the same band the scroller engine's anchor scan uses in the
+ * non-virtualized thread. `offscreen` mirrors the sticky-header geometry there: the overlay only
+ * appears once the message's bottom clears the viewport top (4px tolerance).
+ */
+export function computeStickyAnchor(
+  entries: readonly StickyAnchorEntry[],
+  scrollTop: number,
+  peek: number,
+): StickyAnchorState {
+  let anchor: StickyAnchorEntry | null = null;
+  for (const entry of entries) {
+    if (entry.start <= scrollTop + peek) {
+      anchor = entry;
+    } else {
+      break;
+    }
+  }
+  if (!anchor) return { anchorId: null, offscreen: false };
+  return { anchorId: anchor.id, offscreen: anchor.end <= scrollTop + 4 };
+}

From a89574568c303acfd6b037cbd43187aca591243a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 24 Jul 2026 05:11:18 +0000
Subject: [PATCH 2/6] fix(chat-thread): address react-doctor findings in
 virtualized body

Replace the VirtualStickyHeader dismissal-clearing effect with a
render-phase state adjustment, and collapse the footer measure effect
to a single setState path.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PZje6JV5QZEqmhFKrhLDZ7
---
 .../components/chat-thread/ChatThread.tsx     | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
index b3f52ae3f8..ded1bd4374 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -622,9 +622,12 @@ function VirtualStickyHeader({
 }) {
   const [dismissedId, setDismissedId] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (!offscreen) setDismissedId(null);
-  }, [offscreen]);
+  // Clear a dismissal the moment the anchor is back on screen, so the header can return for the
+  // next offscreen episode. Render-phase adjustment, not an effect — the cleared state must not
+  // flash through a committed frame.
+  if (!offscreen && dismissedId !== null) {
+    setDismissedId(null);
+  }
 
   const active = items.find(
     (i): i is Extract<ConversationItem, { type: "user_message" }> =>
@@ -1307,15 +1310,13 @@ function VirtualThreadScrollBody({
   const [footerHeight, setFooterHeight] = useState(0);
   useLayoutEffect(() => {
     const el = footerRef.current;
-    if (!hasFooter || !el) {
-      setFooterHeight(0);
-      return;
-    }
-    setFooterHeight(el.offsetHeight);
-    const ro = new ResizeObserver(() => {
-      const h = el.offsetHeight;
-      setFooterHeight((prev) => (prev === h ? prev : h));
-    });
+    const measure = () => {
+      const height = hasFooter && el ? el.offsetHeight : 0;
+      setFooterHeight((prev) => (prev === height ? prev : height));
+    };
+    measure();
+    if (!hasFooter || !el) return;
+    const ro = new ResizeObserver(measure);
     ro.observe(el);
     return () => ro.disconnect();
   }, [hasFooter]);

From bd2e3771aefcd5035b1b2ca00da7df44de00c96e Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sun, 26 Jul 2026 05:39:31 +0100
Subject: [PATCH 3/6] refactor(chat-thread): split the windowed body out and
 fix the handoff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The virtualization PR grew ChatThread.tsx to ~1900 lines and react-doctor
flagged the windowed body as a giant component pushing live state to its
parent through a ref-filled effect.

- Move the windowed body to VirtualThreadScrollBody.tsx, decomposed into
  useReservedFooterHeight / useSettleControls / useStickyAnchor /
  useFollowBottom. Row rendering comes in as a `renderRow` prop, so the
  row markup stays in ChatThread and there is no import cycle.
- Move the sticky headers to ThreadStickyHeader.tsx and make the
  non-virtualized overlay clear its dismissal in render, like the
  windowed variant already did, instead of chaining through an effect.
- Replace the jump-API ref + effect with a `renderNav` render prop: the
  nav layer is now composed by the parent but rendered beside the
  scroller, so the body hands it the jump implementation directly.
- Fix the mid-session handoff. The two bodies do not share a scroll
  coordinate space (virtual offsets are 80px estimates until rows
  measure), so resuming from a recorded `scrollTop` landed anywhere,
  usually clamped to the bottom. Record the engine's anchored user
  message instead and resume with scrollToIndex. That also drops the
  recorder's scroll listener and DOM probe.
- Add a dev-only Advanced setting overriding the virtualization
  threshold, so the windowed path and the mid-session flip can be tested
  without a 150-row conversation, plus a dev-only amber ring and
  "windowed mounted/total" badge on the windowed body — the two
  renderers are otherwise pixel-identical.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WejU6Qw29peK7Md1WH2JqE
---
 .../components/chat-thread/ChatThread.tsx     | 716 ++----------------
 .../chat-thread/ThreadStickyHeader.tsx        | 187 +++++
 .../chat-thread/VirtualThreadScrollBody.tsx   | 536 +++++++++++++
 .../chat-thread/threadVirtualization.ts       |  17 +
 .../scrollbar-rail/useMessageRailMarkers.ts   |  12 +-
 .../settings/sections/AdvancedSettings.tsx    |  55 +-
 .../ui/src/features/settings/settingsStore.ts |  11 +
 7 files changed, 875 insertions(+), 659 deletions(-)
 create mode 100644 packages/ui/src/features/sessions/components/chat-thread/ThreadStickyHeader.tsx
 create mode 100644 packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx

diff --git a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
index ded1bd4374..7ebbd5aef7 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -1,6 +1,5 @@
 import {
   CaretDown,
-  ChatCircle,
   Check,
   Copy,
   FileText,
@@ -9,7 +8,6 @@ import {
 import { WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { useService } from "@posthog/di/react";
 import {
-  Button,
   ChatBubble,
   ChatBubbleContent,
   ChatMarker,
@@ -48,22 +46,23 @@ import {
   type PromptRecallHandler,
 } from "@posthog/ui/features/sessions/components/chat-thread/composerPromptRecall";
 import { MessageJumpPicker } from "@posthog/ui/features/sessions/components/chat-thread/MessageJumpPicker";
+import { StickyHeaderOverlay } from "@posthog/ui/features/sessions/components/chat-thread/ThreadStickyHeader";
 import { ToolGroup } from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
 import { THREAD_HOTKEY_OPTIONS } from "@posthog/ui/features/sessions/components/chat-thread/threadHotkeys";
 import {
   type AgentTurn,
   CHAT_THREAD_VIRTUALIZATION_THRESHOLD,
   completedTurnTimestamp,
-  computeStickyAnchor,
   countFlatRows,
   type FlatThreadRow,
   flattenTurnRows,
-  type StickyAnchorEntry,
-  type StickyAnchorState,
+  SCROLL_PREVIOUS_ITEM_PEEK,
   type ThreadItem,
+  type ThreadScrollResume,
   type TurnRow,
 } from "@posthog/ui/features/sessions/components/chat-thread/threadVirtualization";
 import { usePromptRecallSource } from "@posthog/ui/features/sessions/components/chat-thread/usePromptRecallSource";
+import { VirtualThreadScrollBody } from "@posthog/ui/features/sessions/components/chat-thread/VirtualThreadScrollBody";
 import { GitActionMessage } from "@posthog/ui/features/sessions/components/GitActionMessage";
 import { GitActionResult } from "@posthog/ui/features/sessions/components/GitActionResult";
 import { mergeConversationItems } from "@posthog/ui/features/sessions/components/mergeConversationItems";
@@ -101,11 +100,8 @@ import {
   type DiffWorkerFactory,
 } from "@posthog/ui/shell/diffWorkerHost";
 import { IconButton, Tooltip } from "@radix-ui/themes";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import {
   memo,
-  type MouseEvent as ReactMouseEvent,
   type ReactNode,
   type RefObject,
   useCallback,
@@ -119,12 +115,6 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 type SessionUpdateItem = Extract<ConversationItem, { type: "session_update" }>;
 
-/**
- * How far below the viewport top a user message may sit while still counting as the current
- * anchor — shared by the engine (`scrollPreviousItemPeek`) and the virtualized sticky header.
- */
-const SCROLL_PREVIOUS_ITEM_PEEK = 64;
-
 function isToolCallItem(item: ConversationItem): item is SessionUpdateItem {
   return (
     item.type === "session_update" && item.update.sessionUpdate === "tool_call"
@@ -479,175 +469,6 @@ function MessageCopyButton({
   );
 }
 
-/**
- * "Fake sticky" header. A real `position: sticky` row can't hand off in this flat list (every row
- * shares one containing block, so they'd pile at the top) and sticking causes reflow. Instead we
- * overlay a single header, out of flow, pinned over the viewport top — showing the current turn's
- * user message (the engine's anchor) once the real one has scrolled off. Click to scroll back to it.
- *
- * Only this small component subscribes to the engine's per-scroll visibility state, so the rows
- * themselves never re-render on scroll.
- */
-function StickyHeaderOverlay({ items }: { items: ConversationItem[] }) {
-  const { currentAnchorId } = useChatMessageScrollerVisibility();
-  const { scrollToMessage } = useChatMessageScroller();
-  const [dismissedId, setDismissedId] = useState<string | null>(null);
-  const [offscreen, setOffscreen] = useState(false);
-  // Anchor element used only to locate the enclosing scroller/viewport in the DOM.
-  const probeRef = useRef<HTMLSpanElement>(null);
-
-  const active = items.find(
-    (i): i is Extract<ConversationItem, { type: "user_message" }> =>
-      i.id === currentAnchorId && i.type === "user_message",
-  );
-  const activeId = active?.id ?? null;
-
-  // The engine's `visibleMessageIds` can't be used here: its IntersectionObserver excludes a band of
-  // `scrollPreviousItemPeek` px at the viewport top, which is exactly where a freshly-anchored turn
-  // message lands — so it reads as "not visible" while plainly on screen. Measure real geometry
-  // instead: the message is off-screen only once its bottom scrolls above the viewport top.
-  useEffect(() => {
-    // No reset when there's no anchor: the overlay render already guards on `active != null`, so a
-    // stale `offscreen` is never shown, and a fresh anchor re-measures synchronously below. (Avoids
-    // the prop-sync-in-effect pattern react-doctor flags.)
-    if (activeId == null) return;
-    const viewport = probeRef.current
-      ?.closest('[data-slot="chat-message-scroller"]')
-      ?.querySelector('[data-slot="chat-message-scroller-viewport"]');
-    if (!viewport) return;
-
-    const measure = () => {
-      const el = viewport.querySelector(
-        `[data-message-id="${CSS.escape(activeId)}"]`,
-      );
-      if (!el) {
-        setOffscreen(false);
-        return;
-      }
-      const messageBottom = el.getBoundingClientRect().bottom;
-      const viewportTop = viewport.getBoundingClientRect().top;
-      setOffscreen(messageBottom <= viewportTop + 4);
-    };
-
-    measure();
-    viewport.addEventListener("scroll", measure, { passive: true });
-    return () => viewport.removeEventListener("scroll", measure);
-  }, [activeId]);
-
-  // Once the real message is back on screen, clear the dismissal so the header can return later.
-  useEffect(() => {
-    if (!offscreen) setDismissedId(null);
-  }, [offscreen]);
-
-  const dismiss = (id: string) => {
-    // Hide immediately on click (don't wait for the scroll to bring the message into view), then
-    // jump to it.
-    setDismissedId(id);
-    scrollToMessage(id);
-  };
-
-  return (
-    <>
-      <span ref={probeRef} className="hidden" aria-hidden="true" />
-      <AnimatePresence>
-        {active != null && offscreen && active.id !== dismissedId && (
-          <StickyHeaderJumpButton onClick={() => dismiss(active.id)} />
-        )}
-      </AnimatePresence>
-    </>
-  );
-}
-
-/**
- * The floating "jump to your message" pill both sticky-header variants render. Must be a direct
- * child of an `AnimatePresence` so its exit animation plays.
- */
-function StickyHeaderJumpButton({ onClick }: { onClick: () => void }) {
-  const shouldReduceMotion = useReducedMotion();
-  return (
-    <motion.div
-      key="chat-sticky-header"
-      // Slide in slightly from the top + fade (ease-out-cubic). Exit a touch faster.
-      initial={shouldReduceMotion ? false : { opacity: 0, y: -8 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={
-        shouldReduceMotion
-          ? { opacity: 0 }
-          : { opacity: 0, y: -8, transition: { duration: 0.15 } }
-      }
-      transition={{ duration: 0.2, ease: [0.215, 0.61, 0.355, 1] }}
-      // pointer-events-none on the strip so only the button catches clicks — the rest stays
-      // transparent to the content scrolling underneath.
-      className="pointer-events-none absolute inset-x-0 top-2 z-10"
-    >
-      {/* Align to the content column's right edge (matches the message rows) rather than the
-          viewport edge, so the button reads in-context with the conversation. */}
-      <div
-        className="mx-auto flex w-full justify-end px-2"
-        style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
-      >
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          title="Jump to your message"
-          aria-label="Jump to your message"
-          onClick={onClick}
-          className="pointer-events-auto rounded-full bg-background shadow-md"
-        >
-          <ChatCircle />
-        </Button>
-      </div>
-    </motion.div>
-  );
-}
-
-/**
- * Virtualized-mode sticky header. The engine's visibility state can't power it here — unmounted
- * rows aren't observed — so the parent derives the anchor from the virtualizer's measurements
- * (see {@link computeStickyAnchor}) and passes the result down. Dismissal semantics match
- * {@link StickyHeaderOverlay}: hide immediately on click, return once the message has been back
- * on screen.
- */
-function VirtualStickyHeader({
-  items,
-  anchorId,
-  offscreen,
-  onJump,
-}: {
-  items: ConversationItem[];
-  anchorId: string | null;
-  offscreen: boolean;
-  onJump: (id: string) => void;
-}) {
-  const [dismissedId, setDismissedId] = useState<string | null>(null);
-
-  // Clear a dismissal the moment the anchor is back on screen, so the header can return for the
-  // next offscreen episode. Render-phase adjustment, not an effect — the cleared state must not
-  // flash through a committed frame.
-  if (!offscreen && dismissedId !== null) {
-    setDismissedId(null);
-  }
-
-  const active = items.find(
-    (i): i is Extract<ConversationItem, { type: "user_message" }> =>
-      i.id === anchorId && i.type === "user_message",
-  );
-
-  return (
-    <AnimatePresence>
-      {active != null && offscreen && active.id !== dismissedId && (
-        <StickyHeaderJumpButton
-          onClick={() => {
-            setDismissedId(active.id);
-            onJump(active.id);
-          }}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
 /**
  * Start-aligned assistant prose bubble. Streamed tokens arrive in bursts; `useSmoothedText` reveals
  * them at a steady character rate so the text reads as even typing (text present on mount shows
@@ -973,17 +794,12 @@ function ThreadKeyboardNav({
 }
 
 /**
- * Scroll state the non-virtualized body continuously records so the virtualized body can resume
- * from roughly the same place when the thread crosses the virtualization threshold mid-session.
- */
-type ThreadScrollResume = { atBottom: boolean; scrollTop: number };
-
-/**
- * Keeps {@link ThreadScrollResume} current while the non-virtualized body is mounted. At-bottom
- * comes from the engine's scrollable state (`end` is true while content extends below the fold);
- * scrollTop comes from a passive listener on the engine viewport, located via the same hidden
- * probe pattern the other engine-adjacent helpers use. Writes go to a ref — this must not
- * re-render on scroll.
+ * Keeps {@link ThreadScrollResume} current while the non-virtualized body is mounted, so the
+ * windowed body can pick up where this one left off if the thread crosses the threshold
+ * mid-session. Both values come from engine state the scroller already tracks — at-bottom from
+ * `scrollable.end` (true while content extends below the fold), and the anchored user message from
+ * the same visibility state the sticky header reads — so nothing here listens to scroll. Writes go
+ * to a ref: the recorder must never make the thread re-render.
  */
 function ThreadScrollStateRecorder({
   stateRef,
@@ -991,26 +807,13 @@ function ThreadScrollStateRecorder({
   stateRef: RefObject<ThreadScrollResume>;
 }) {
   const { end } = useChatMessageScrollerScrollable();
-  const probeRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    stateRef.current = { ...stateRef.current, atBottom: !end };
-  }, [end, stateRef]);
+  const { currentAnchorId } = useChatMessageScrollerVisibility();
 
   useEffect(() => {
-    const viewport = probeRef.current
-      ?.closest('[data-slot="chat-message-scroller"]')
-      ?.querySelector('[data-slot="chat-message-scroller-viewport"]');
-    if (!viewport) return;
-    const record = () => {
-      stateRef.current = { ...stateRef.current, scrollTop: viewport.scrollTop };
-    };
-    record();
-    viewport.addEventListener("scroll", record, { passive: true });
-    return () => viewport.removeEventListener("scroll", record);
-  }, [stateRef]);
+    stateRef.current = { atBottom: !end, anchorId: currentAnchorId ?? null };
+  }, [end, currentAnchorId, stateRef]);
 
-  return <span ref={probeRef} className="hidden" aria-hidden="true" />;
+  return null;
 }
 
 /** The scroll body, under the Provider so the overlay + scroll-button hooks can read engine state. */
@@ -1181,25 +984,8 @@ function ThreadScrollbarRail({
   );
 }
 
-// Windowing geometry for the virtualized body. Estimate/overscan/drift values match the legacy
-// VirtualizedList, whose tuning these rows share (same item mix, same measure-then-settle churn).
-const VIRTUAL_ESTIMATED_ROW_SIZE = 80;
-const VIRTUAL_OVERSCAN = 12;
-/** Matches the Provider's `scrollEdgeThreshold` so "at bottom" agrees between engine and windowing. */
-const VIRTUAL_AT_BOTTOM_THRESHOLD = 100;
-// A real upward drift, not a 1-frame measure transient: the DOM bottom sits
-// this far below the viewport. Well above any single append's measure gap.
-const VIRTUAL_FAR_DRIFT_THRESHOLD = 400;
-/** Top of the virtual coordinate space — stands in for the non-virtualized content's `py-4`. */
-const VIRTUAL_PADDING_START = 16;
-
 const EMPTY_FLAT_ROWS: FlatThreadRow[] = [];
 
-/** Imperative surface the virtualized body hands to the nav layer rendered outside it. */
-interface VirtualJumpApi {
-  jumpToMessage: (id: string) => void;
-}
-
 /**
  * One windowed row. Memoized against the row's *contents* rather than the row wrapper object —
  * `flattenTurnRows` rebuilds wrappers on every streamed chunk, but the underlying conversation
@@ -1256,395 +1042,6 @@ const FlatRowView = memo(
     prev.keyboardFocused === next.keyboardFocused,
 );
 
-/**
- * Windowed scroll body for long threads, following the upstream MessageScroller guidance:
- * virtualization lives outside the primitive — the quill viewport stays the scroll element and a
- * `@tanstack/react-virtual` virtualizer owns the rows inside `ChatMessageScrollerContent`.
- *
- * The engine still provides the chrome that only needs scroll geometry (the scroll-to-bottom
- * button and edge state read real element measurements), while everything item-based gets a
- * windowed implementation here: follow-bottom via `anchorTo: "end"` + `followOnAppend` (the
- * legacy `VirtualizedList` recipe), message jumps via `scrollToIndex`, the sticky header via
- * {@link computeStickyAnchor} over the virtualizer's measurements, and the scrollbar rail via its
- * existing interpolate-unmounted-rows path.
- */
-function VirtualThreadScrollBody({
-  items,
-  flatRows,
-  renderItem,
-  footer,
-  keyboardFocusedMessageId,
-  onUserInteract,
-  jumpApiRef,
-  resumeStateRef,
-}: {
-  items: ConversationItem[];
-  flatRows: FlatThreadRow[];
-  renderItem: (item: ConversationItem) => ReactNode;
-  /** Status row (duration / context usage) pinned as the last item in the thread. */
-  footer?: ReactNode;
-  keyboardFocusedMessageId?: string | null;
-  /** Clears keyboard-focused message state on any pointer interaction with the thread. */
-  onUserInteract?: () => void;
-  /** Filled with this body's jump implementation for the nav layer rendered outside it. */
-  jumpApiRef: RefObject<VirtualJumpApi | null>;
-  /** Scroll state recorded by the non-virtualized body, consumed once when this body takes over. */
-  resumeStateRef: RefObject<ThreadScrollResume>;
-}) {
-  const viewportRef = useRef<HTMLDivElement | null>(null);
-  const [viewportEl, setViewportEl] = useState<HTMLDivElement | null>(null);
-  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
-  const footerRef = useRef<HTMLDivElement | null>(null);
-  const initializedRef = useRef(false);
-  // Seeded from the handoff state so a mid-session flip while reading above the fold doesn't
-  // immediately re-pin to the bottom.
-  const isAtBottomRef = useRef(resumeStateRef.current?.atBottom ?? true);
-  const lastScrollTopRef = useRef(0);
-  const settleRafRef = useRef<number | null>(null);
-
-  // The footer is real trailing content, NOT a fake virtual row — as a virtual row its constant
-  // key would always be last and permanently kill tanstack's followOnAppend. Its height is
-  // reserved as `paddingEnd` instead so the virtual coordinate space includes it (the
-  // VirtualizedList recipe).
-  const hasFooter = footer != null;
-  const [footerHeight, setFooterHeight] = useState(0);
-  useLayoutEffect(() => {
-    const el = footerRef.current;
-    const measure = () => {
-      const height = hasFooter && el ? el.offsetHeight : 0;
-      setFooterHeight((prev) => (prev === height ? prev : height));
-    };
-    measure();
-    if (!hasFooter || !el) return;
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [hasFooter]);
-
-  const virtualizer = useVirtualizer({
-    count: flatRows.length,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: () => VIRTUAL_ESTIMATED_ROW_SIZE,
-    overscan: VIRTUAL_OVERSCAN,
-    anchorTo: "end",
-    followOnAppend: true,
-    scrollEndThreshold: VIRTUAL_AT_BOTTOM_THRESHOLD,
-    paddingStart: VIRTUAL_PADDING_START,
-    paddingEnd: footerHeight,
-    getItemKey: (index) => flatRows[index]?.key ?? index,
-  });
-
-  const cancelSettle = useCallback(() => {
-    if (settleRafRef.current !== null) {
-      cancelAnimationFrame(settleRafRef.current);
-      settleRafRef.current = null;
-    }
-  }, []);
-
-  // Pin to the true bottom, retrying across frames while rows measure taller than the estimate.
-  const settleAtEnd = useCallback(() => {
-    cancelSettle();
-    isAtBottomRef.current = true;
-    let attempts = 0;
-    const step = () => {
-      virtualizer.scrollToEnd();
-      if (virtualizer.isAtEnd(VIRTUAL_AT_BOTTOM_THRESHOLD) || ++attempts > 12) {
-        settleRafRef.current = null;
-        return;
-      }
-      settleRafRef.current = requestAnimationFrame(step);
-    };
-    step();
-  }, [virtualizer, cancelSettle]);
-
-  // Jump to a row, re-issuing across a few frames until the target offset stops drifting as the
-  // rows around it measure.
-  const settleToIndex = useCallback(
-    (index: number) => {
-      cancelSettle();
-      isAtBottomRef.current = false;
-      virtualizer.scrollToIndex(index, { align: "start" });
-      let attempts = 0;
-      const step = () => {
-        settleRafRef.current = null;
-        const viewport = viewportRef.current;
-        const target = virtualizer.getOffsetForIndex(index, "start")?.[0];
-        if (!viewport || target == null) return;
-        const maxScroll = Math.max(
-          0,
-          viewport.scrollHeight - viewport.clientHeight,
-        );
-        if (
-          Math.abs(viewport.scrollTop - Math.min(target, maxScroll)) <= 1 ||
-          ++attempts > 8
-        ) {
-          return;
-        }
-        virtualizer.scrollToIndex(index, { align: "start" });
-        settleRafRef.current = requestAnimationFrame(step);
-      };
-      settleRafRef.current = requestAnimationFrame(step);
-    },
-    [virtualizer, cancelSettle],
-  );
-
-  useEffect(() => cancelSettle, [cancelSettle]);
-
-  const userRows = useMemo(() => {
-    const result: Array<{ id: string; rowIndex: number; content: string }> = [];
-    flatRows.forEach((row, index) => {
-      if (row.item.type === "user_message") {
-        result.push({
-          id: row.item.id,
-          rowIndex: index,
-          content: row.item.content,
-        });
-      }
-    });
-    return result;
-  }, [flatRows]);
-
-  const rowIndexByMessageId = useMemo(() => {
-    const map = new Map<string, number>();
-    flatRows.forEach((row, index) => {
-      map.set(row.item.id, index);
-    });
-    return map;
-  }, [flatRows]);
-
-  const jumpToMessage = useCallback(
-    (id: string) => {
-      const index = rowIndexByMessageId.get(id);
-      if (index != null) settleToIndex(index);
-    },
-    [rowIndexByMessageId, settleToIndex],
-  );
-
-  useEffect(() => {
-    jumpApiRef.current = { jumpToMessage };
-    return () => {
-      jumpApiRef.current = null;
-    };
-  }, [jumpApiRef, jumpToMessage]);
-
-  // Initial position: resume near where the non-virtualized body left off (offsets are estimates
-  // until rows measure, so the landing is approximate and self-corrects), or settle at the bottom.
-  useLayoutEffect(() => {
-    if (initializedRef.current || flatRows.length === 0) return;
-    initializedRef.current = true;
-    const resume = resumeStateRef.current;
-    if (resume && !resume.atBottom) {
-      virtualizer.scrollToOffset(resume.scrollTop);
-      return;
-    }
-    settleAtEnd();
-  }, [flatRows.length, settleAtEnd, virtualizer, resumeStateRef]);
-
-  // Sticky-header anchor, derived from the virtualizer's measurements (estimated for rows that
-  // have never mounted; exact once measured). Recomputed at most once per frame on scroll and on
-  // content growth.
-  const [stickyState, setStickyState] = useState<StickyAnchorState>({
-    anchorId: null,
-    offscreen: false,
-  });
-  const recomputeSticky = useCallback(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    const cache = virtualizer.measurementsCache;
-    const entries: StickyAnchorEntry[] = userRows.map((user) => {
-      const measured = cache[user.rowIndex];
-      const start =
-        measured?.start ?? user.rowIndex * VIRTUAL_ESTIMATED_ROW_SIZE;
-      const end = measured?.end ?? start + VIRTUAL_ESTIMATED_ROW_SIZE;
-      return { id: user.id, start, end };
-    });
-    const next = computeStickyAnchor(
-      entries,
-      viewport.scrollTop,
-      SCROLL_PREVIOUS_ITEM_PEEK,
-    );
-    setStickyState((prev) =>
-      prev.anchorId === next.anchorId && prev.offscreen === next.offscreen
-        ? prev
-        : next,
-    );
-  }, [userRows, virtualizer]);
-
-  const stickyFrameRef = useRef<number | null>(null);
-  const scheduleStickyRecompute = useCallback(() => {
-    if (stickyFrameRef.current != null) return;
-    stickyFrameRef.current = requestAnimationFrame(() => {
-      stickyFrameRef.current = null;
-      recomputeSticky();
-    });
-  }, [recomputeSticky]);
-  useEffect(() => {
-    scheduleStickyRecompute();
-    return () => {
-      if (stickyFrameRef.current != null) {
-        cancelAnimationFrame(stickyFrameRef.current);
-        stickyFrameRef.current = null;
-      }
-    };
-  }, [scheduleStickyRecompute]);
-
-  const handleScroll = useCallback(() => {
-    const el = viewportRef.current;
-    const scrollTop = el?.scrollTop ?? 0;
-    // Tolerate sub-pixel jitter; only a real upward move counts as leaving end.
-    const scrolledUp = scrollTop < lastScrollTopRef.current - 1;
-    lastScrollTopRef.current = scrollTop;
-
-    const atEnd = virtualizer.isAtEnd(VIRTUAL_AT_BOTTOM_THRESHOLD);
-    // Genuine far drift (not a 1-frame measure transient): the DOM bottom sits well below the
-    // viewport, so follow can't get silently stuck mid-thread.
-    const farFromEnd = el
-      ? el.scrollHeight - el.clientHeight - scrollTop >
-        VIRTUAL_FAR_DRIFT_THRESHOLD
-      : false;
-    // Hysteresis: each append measures taller than the estimate, so for one frame isAtEnd reads
-    // false before followOnAppend/anchorTo re-pin. Re-arm at the end; only clear on a real
-    // upward scroll or a genuine drift.
-    if (atEnd) {
-      isAtBottomRef.current = true;
-    } else if (scrolledUp || farFromEnd) {
-      isAtBottomRef.current = false;
-    }
-    scheduleStickyRecompute();
-  }, [virtualizer, scheduleStickyRecompute]);
-
-  const totalSize = virtualizer.getTotalSize();
-
-  // Anything that changes the virtual height while following has to re-pin to the new bottom:
-  // rows remeasuring past the estimate, late async content (highlighting, diffs) growing rows,
-  // and the footer resize feeding paddingEnd. totalSize is the one value that moves for all of
-  // them. Layout effect so the re-pin lands before paint.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: totalSize is the trigger, not a body dependency
-  useLayoutEffect(() => {
-    if (!isAtBottomRef.current) return;
-    virtualizer.scrollToEnd();
-  }, [totalSize, virtualizer]);
-
-  // A prompt submitted from anywhere re-engages follow (same trigger ThreadAutoFollow uses in the
-  // non-virtualized body): settleAtEnd flips isAtBottomRef, and the totalSize re-pin plus
-  // followOnAppend keep the reply pinned from there.
-  const lastItem = items.at(-1);
-  const userMessageCount = useMemo(
-    () =>
-      items.reduce((n, item) => (item.type === "user_message" ? n + 1 : n), 0),
-    [items],
-  );
-  const prevUserCountRef = useRef(userMessageCount);
-  useLayoutEffect(() => {
-    const previous = prevUserCountRef.current;
-    prevUserCountRef.current = userMessageCount;
-    if (previous === 0 || userMessageCount <= previous) return;
-    if (lastItem?.type !== "user_message") return;
-    settleAtEnd();
-  }, [userMessageCount, lastItem, settleAtEnd]);
-
-  // Coming back to a backgrounded tab: ResizeObserver callbacks were throttled, so re-settle if
-  // we were following (the legacy view does the same).
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (!document.hidden && isAtBottomRef.current) settleAtEnd();
-    };
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () =>
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-  }, [settleAtEnd]);
-
-  const railUserMessages = useMemo(
-    () =>
-      userRows.map((user) => ({
-        id: user.id,
-        content: user.content,
-        index: user.rowIndex,
-      })),
-    [userRows],
-  );
-  const railMarkers = useMessageRailMarkers({
-    contentEl,
-    scrollEl: viewportEl,
-    userMessages: railUserMessages,
-    onJump: jumpToMessage,
-    activeId: keyboardFocusedMessageId,
-    rowAttribute: "data-message-id",
-  });
-
-  return (
-    <ChatMessageScroller
-      className="group/thread"
-      onPointerDownCapture={onUserInteract}
-    >
-      <VirtualStickyHeader
-        items={items}
-        anchorId={stickyState.anchorId}
-        offscreen={stickyState.offscreen}
-        onJump={jumpToMessage}
-      />
-      <MessageScrollbarRail markers={railMarkers} />
-      <ChatMessageScrollerViewport
-        ref={(el: HTMLDivElement | null) => {
-          viewportRef.current = el;
-          setViewportEl(el);
-        }}
-        onScroll={handleScroll}
-      >
-        {/* `block` overrides the content's flex+gap layout — spacing moves into the rows
-            (pb-4) and the virtual paddings, so translateY offsets are the whole layout. */}
-        <ChatMessageScrollerContent className="block" density="default">
-          <div
-            ref={setContentEl}
-            className="relative w-full"
-            style={{ height: totalSize }}
-          >
-            {virtualizer.getVirtualItems().map((virtualItem) => {
-              const row = flatRows[virtualItem.index];
-              if (!row) return null;
-              return (
-                <div
-                  key={virtualItem.key}
-                  ref={virtualizer.measureElement}
-                  data-index={virtualItem.index}
-                  className="absolute top-0 left-0 w-full"
-                  style={{ transform: `translateY(${virtualItem.start}px)` }}
-                >
-                  <FlatRowView
-                    row={row}
-                    renderItem={renderItem}
-                    keyboardFocused={row.item.id === keyboardFocusedMessageId}
-                  />
-                </div>
-              );
-            })}
-            {/* Footer occupies the reserved paddingEnd region at the very bottom of the virtual
-                space, so the DOM bottom == the virtual end. */}
-            {hasFooter && (
-              <div ref={footerRef} className="absolute bottom-0 left-0 w-full">
-                <div
-                  className="mx-auto w-full px-2.5 pb-8"
-                  style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
-                >
-                  {footer}
-                </div>
-              </div>
-            )}
-          </div>
-        </ChatMessageScrollerContent>
-      </ChatMessageScrollerViewport>
-      <ChatMessageScrollerButton
-        onClick={(event: ReactMouseEvent) => {
-          // The engine's own scroll-to-end targets the current scrollHeight, which is an
-          // estimate until every row between here and the bottom has measured — settle instead.
-          event.preventDefault();
-          settleAtEnd();
-        }}
-      />
-    </ChatMessageScroller>
-  );
-}
-
 /**
  * Thread renderer built on the ChatX (quill) primitives.
  *
@@ -1742,29 +1139,27 @@ function ChatThreadRenderer({
   // stays there for the life of this mount (see CHAT_THREAD_VIRTUALIZATION_THRESHOLD). Long
   // sessions start virtualized from the first render; a live session flips once mid-stream,
   // resuming from the scroll state the non-virtualized body recorded.
-  const flatCount = useMemo(() => countFlatRows(rows), [rows]);
-  const [virtualized, setVirtualized] = useState(
-    () => flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD,
+  //
+  // The threshold is overridable from Advanced settings in dev builds: lowering it below an open
+  // thread's row count flips that thread on the spot, which is how the handoff gets exercised
+  // without a 150-row conversation. Raising it back doesn't un-flip — reopen the session.
+  const thresholdOverride = useSettingsStore(
+    (s) => s.chatThreadVirtualizationThreshold,
   );
-  if (!virtualized && flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD) {
+  const threshold = thresholdOverride ?? CHAT_THREAD_VIRTUALIZATION_THRESHOLD;
+  const flatCount = useMemo(() => countFlatRows(rows), [rows]);
+  const [virtualized, setVirtualized] = useState(() => flatCount > threshold);
+  if (!virtualized && flatCount > threshold) {
     setVirtualized(true);
   }
   const flatRows = useMemo(
     () => (virtualized ? flattenTurnRows(rows) : EMPTY_FLAT_ROWS),
     [virtualized, rows],
   );
-  const virtualJumpApiRef = useRef<VirtualJumpApi | null>(null);
   const threadResumeRef = useRef<ThreadScrollResume>({
     atBottom: true,
-    scrollTop: 0,
+    anchorId: null,
   });
-  const jumpToMessage = useMemo(
-    () =>
-      virtualized
-        ? (id: string) => virtualJumpApiRef.current?.jumpToMessage(id)
-        : undefined,
-    [virtualized],
-  );
 
   const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
   const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
@@ -1847,6 +1242,31 @@ function ChatThreadRenderer({
     />
   );
 
+  const renderWindowedRow = useCallback(
+    (row: FlatThreadRow) => (
+      <FlatRowView
+        row={row}
+        renderItem={renderItem}
+        keyboardFocused={row.item.id === keyboardFocusedMessageId}
+      />
+    ),
+    [renderItem, keyboardFocusedMessageId],
+  );
+
+  // The nav layer sits beside the scroll body so it can be handed the windowed body's jump
+  // implementation — the engine's `scrollToMessage` only reaches mounted rows.
+  const renderNav = (jumpToMessage?: (id: string) => void) => (
+    <ThreadKeyboardNav
+      items={items}
+      jumpPickerOpen={jumpPickerOpen}
+      setJumpPickerOpen={setJumpPickerOpen}
+      keyboardFocusedMessageId={keyboardFocusedMessageId}
+      setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
+      promptRecallRef={promptRecallRef}
+      jumpToMessage={jumpToMessage}
+    />
+  );
+
   return (
     <WorkerPoolContextProvider
       poolOptions={diffsPoolOptions}
@@ -1870,33 +1290,27 @@ function ChatThreadRenderer({
               <VirtualThreadScrollBody
                 items={items}
                 flatRows={flatRows}
-                renderItem={renderItem}
+                renderRow={renderWindowedRow}
                 keyboardFocusedMessageId={keyboardFocusedMessageId}
                 onUserInteract={clearKeyboardFocus}
                 footer={footer}
-                jumpApiRef={virtualJumpApiRef}
-                resumeStateRef={threadResumeRef}
+                renderNav={renderNav}
+                resumeRef={threadResumeRef}
               />
             ) : (
-              <ThreadScrollBody
-                items={items}
-                rows={rows}
-                renderItem={renderItem}
-                keyboardFocusedMessageId={keyboardFocusedMessageId}
-                onUserInteract={clearKeyboardFocus}
-                footer={footer}
-                resumeStateRef={threadResumeRef}
-              />
+              <>
+                <ThreadScrollBody
+                  items={items}
+                  rows={rows}
+                  renderItem={renderItem}
+                  keyboardFocusedMessageId={keyboardFocusedMessageId}
+                  onUserInteract={clearKeyboardFocus}
+                  footer={footer}
+                  resumeStateRef={threadResumeRef}
+                />
+                {renderNav()}
+              </>
             )}
-            <ThreadKeyboardNav
-              items={items}
-              jumpPickerOpen={jumpPickerOpen}
-              setJumpPickerOpen={setJumpPickerOpen}
-              keyboardFocusedMessageId={keyboardFocusedMessageId}
-              setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
-              promptRecallRef={promptRecallRef}
-              jumpToMessage={jumpToMessage}
-            />
           </ChatMessageScrollerProvider>
         </ChatThreadChromeProvider>
       </SessionTaskIdProvider>
diff --git a/packages/ui/src/features/sessions/components/chat-thread/ThreadStickyHeader.tsx b/packages/ui/src/features/sessions/components/chat-thread/ThreadStickyHeader.tsx
new file mode 100644
index 0000000000..4f00d4cfbf
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/ThreadStickyHeader.tsx
@@ -0,0 +1,187 @@
+import { ChatCircle } from "@phosphor-icons/react";
+import {
+  Button,
+  useChatMessageScroller,
+  useChatMessageScrollerVisibility,
+} from "@posthog/quill";
+import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { CHAT_CONTENT_MAX_WIDTH } from "@posthog/ui/features/sessions/constants";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+
+type UserMessageItem = Extract<ConversationItem, { type: "user_message" }>;
+
+function findUserMessage(
+  items: ConversationItem[],
+  id: string | null,
+): UserMessageItem | undefined {
+  if (id == null) return undefined;
+  return items.find(
+    (item): item is UserMessageItem =>
+      item.id === id && item.type === "user_message",
+  );
+}
+
+/**
+ * The floating "jump to your message" pill both sticky-header variants render. Must be a direct
+ * child of an `AnimatePresence` so its exit animation plays.
+ */
+function StickyHeaderJumpButton({ onClick }: { onClick: () => void }) {
+  const shouldReduceMotion = useReducedMotion();
+  return (
+    <motion.div
+      key="chat-sticky-header"
+      // Slide in slightly from the top + fade (ease-out-cubic). Exit a touch faster.
+      initial={shouldReduceMotion ? false : { opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={
+        shouldReduceMotion
+          ? { opacity: 0 }
+          : { opacity: 0, y: -8, transition: { duration: 0.15 } }
+      }
+      transition={{ duration: 0.2, ease: [0.215, 0.61, 0.355, 1] }}
+      // pointer-events-none on the strip so only the button catches clicks — the rest stays
+      // transparent to the content scrolling underneath.
+      className="pointer-events-none absolute inset-x-0 top-2 z-10"
+    >
+      {/* Align to the content column's right edge (matches the message rows) rather than the
+          viewport edge, so the button reads in-context with the conversation. */}
+      <div
+        className="mx-auto flex w-full justify-end px-2"
+        style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+      >
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          title="Jump to your message"
+          aria-label="Jump to your message"
+          onClick={onClick}
+          className="pointer-events-auto rounded-full bg-background shadow-md"
+        >
+          <ChatCircle />
+        </Button>
+      </div>
+    </motion.div>
+  );
+}
+
+/**
+ * "Fake sticky" header. A real `position: sticky` row can't hand off in this flat list (every row
+ * shares one containing block, so they'd pile at the top) and sticking causes reflow. Instead we
+ * overlay a single header, out of flow, pinned over the viewport top — showing the current turn's
+ * user message (the engine's anchor) once the real one has scrolled off. Click to scroll back to it.
+ *
+ * Only this small component subscribes to the engine's per-scroll visibility state, so the rows
+ * themselves never re-render on scroll.
+ */
+export function StickyHeaderOverlay({ items }: { items: ConversationItem[] }) {
+  const { currentAnchorId } = useChatMessageScrollerVisibility();
+  const { scrollToMessage } = useChatMessageScroller();
+  const [dismissedId, setDismissedId] = useState<string | null>(null);
+  const [offscreen, setOffscreen] = useState(false);
+  // Anchor element used only to locate the enclosing scroller/viewport in the DOM.
+  const probeRef = useRef<HTMLSpanElement>(null);
+
+  const active = findUserMessage(items, currentAnchorId);
+  const activeId = active?.id ?? null;
+
+  // The engine's `visibleMessageIds` can't be used here: its IntersectionObserver excludes a band of
+  // `scrollPreviousItemPeek` px at the viewport top, which is exactly where a freshly-anchored turn
+  // message lands — so it reads as "not visible" while plainly on screen. Measure real geometry
+  // instead: the message is off-screen only once its bottom scrolls above the viewport top.
+  useEffect(() => {
+    // No reset when there's no anchor: the overlay render already guards on `active != null`, so a
+    // stale `offscreen` is never shown, and a fresh anchor re-measures synchronously below. (Avoids
+    // the prop-sync-in-effect pattern react-doctor flags.)
+    if (activeId == null) return;
+    const viewport = probeRef.current
+      ?.closest('[data-slot="chat-message-scroller"]')
+      ?.querySelector('[data-slot="chat-message-scroller-viewport"]');
+    if (!viewport) return;
+
+    const measure = () => {
+      const el = viewport.querySelector(
+        `[data-message-id="${CSS.escape(activeId)}"]`,
+      );
+      if (!el) {
+        setOffscreen(false);
+        return;
+      }
+      const messageBottom = el.getBoundingClientRect().bottom;
+      const viewportTop = viewport.getBoundingClientRect().top;
+      setOffscreen(messageBottom <= viewportTop + 4);
+    };
+
+    measure();
+    viewport.addEventListener("scroll", measure, { passive: true });
+    return () => viewport.removeEventListener("scroll", measure);
+  }, [activeId]);
+
+  // Once the real message is back on screen, clear the dismissal so the header can return later.
+  // Render-phase adjustment rather than an effect, matching {@link VirtualStickyHeader}.
+  if (!offscreen && dismissedId !== null) {
+    setDismissedId(null);
+  }
+
+  const dismiss = (id: string) => {
+    // Hide immediately on click (don't wait for the scroll to bring the message into view), then
+    // jump to it.
+    setDismissedId(id);
+    scrollToMessage(id);
+  };
+
+  return (
+    <>
+      <span ref={probeRef} className="hidden" aria-hidden="true" />
+      <AnimatePresence>
+        {active != null && offscreen && active.id !== dismissedId && (
+          <StickyHeaderJumpButton onClick={() => dismiss(active.id)} />
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+
+/**
+ * Windowed-mode sticky header. The engine's visibility state can't power it here — unmounted rows
+ * aren't observed — so the body derives the anchor from the virtualizer's measurements (see
+ * `computeStickyAnchor`) and passes the result down. Dismissal semantics match
+ * {@link StickyHeaderOverlay}: hide immediately on click, return once the message has been back on
+ * screen.
+ */
+export function VirtualStickyHeader({
+  items,
+  anchorId,
+  offscreen,
+  onJump,
+}: {
+  items: ConversationItem[];
+  anchorId: string | null;
+  offscreen: boolean;
+  onJump: (id: string) => void;
+}) {
+  const [dismissedId, setDismissedId] = useState<string | null>(null);
+
+  // Clear a dismissal the moment the anchor is back on screen, so the header can return for the
+  // next offscreen episode. Render-phase adjustment, not an effect — the cleared state must not
+  // flash through a committed frame.
+  if (!offscreen && dismissedId !== null) {
+    setDismissedId(null);
+  }
+
+  const active = findUserMessage(items, anchorId);
+
+  return (
+    <AnimatePresence>
+      {active != null && offscreen && active.id !== dismissedId && (
+        <StickyHeaderJumpButton
+          onClick={() => {
+            setDismissedId(active.id);
+            onJump(active.id);
+          }}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
new file mode 100644
index 0000000000..e128d78d68
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
@@ -0,0 +1,536 @@
+import {
+  ChatMessageScroller,
+  ChatMessageScrollerButton,
+  ChatMessageScrollerContent,
+  ChatMessageScrollerViewport,
+  cn,
+} from "@posthog/quill";
+import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { VirtualStickyHeader } from "@posthog/ui/features/sessions/components/chat-thread/ThreadStickyHeader";
+import {
+  computeStickyAnchor,
+  type FlatThreadRow,
+  SCROLL_PREVIOUS_ITEM_PEEK,
+  type StickyAnchorEntry,
+  type StickyAnchorState,
+  type ThreadScrollResume,
+} from "@posthog/ui/features/sessions/components/chat-thread/threadVirtualization";
+import { MessageScrollbarRail } from "@posthog/ui/features/sessions/components/scrollbar-rail/MessageScrollbarRail";
+import { useMessageRailMarkers } from "@posthog/ui/features/sessions/components/scrollbar-rail/useMessageRailMarkers";
+import { CHAT_CONTENT_MAX_WIDTH } from "@posthog/ui/features/sessions/constants";
+import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
+import {
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+// Windowing geometry. Estimate/overscan/drift values match the legacy VirtualizedList, whose
+// tuning these rows share (same item mix, same measure-then-settle churn).
+const ESTIMATED_ROW_SIZE = 80;
+const OVERSCAN = 12;
+/** Matches the Provider's `scrollEdgeThreshold` so "at bottom" agrees between engine and windowing. */
+const AT_BOTTOM_THRESHOLD = 100;
+// A real upward drift, not a 1-frame measure transient: the DOM bottom sits this far below the
+// viewport. Well above any single append's measure gap.
+const FAR_DRIFT_THRESHOLD = 400;
+/** Top of the virtual coordinate space — stands in for the non-virtualized content's `py-4`. */
+const PADDING_START = 16;
+/** Frames a programmatic scroll keeps re-issuing while rows around the target still measure. */
+const SETTLE_AT_END_ATTEMPTS = 12;
+const SETTLE_TO_INDEX_ATTEMPTS = 8;
+
+type ThreadVirtualizer = Virtualizer<HTMLDivElement, Element>;
+
+/** A user message's position in the flat row list, for the sticky anchor and the scrollbar rail. */
+interface UserRow {
+  id: string;
+  content: string;
+  index: number;
+}
+
+/**
+ * Reserves the footer's height as virtual `paddingEnd` rather than rendering it as a virtual row:
+ * a footer row's key would be constant and always last, which permanently kills tanstack's
+ * `followOnAppend` (it only fires when the last virtual key changes). With the footer out of the
+ * count the last virtual item is the real last message, and the virtual end still lines up with
+ * the real DOM bottom.
+ */
+function useReservedFooterHeight(
+  footerRef: RefObject<HTMLDivElement | null>,
+  hasFooter: boolean,
+): number {
+  const [footerHeight, setFooterHeight] = useState(0);
+  useLayoutEffect(() => {
+    const el = footerRef.current;
+    const measure = () => {
+      const height = hasFooter && el ? el.offsetHeight : 0;
+      setFooterHeight((prev) => (prev === height ? prev : height));
+    };
+    measure();
+    if (!hasFooter || !el) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasFooter, footerRef]);
+  return footerHeight;
+}
+
+/**
+ * Programmatic scrolls that survive measurement drift. Rows are estimated until they mount, so a
+ * single `scrollToEnd`/`scrollToIndex` lands short; both helpers re-issue across frames until the
+ * target offset stops moving. `isAtBottomRef` is the follow flag the rest of the body reads.
+ */
+function useSettleControls(
+  virtualizer: ThreadVirtualizer,
+  viewportRef: RefObject<HTMLDivElement | null>,
+) {
+  // Starts true; the mount-position effect below flips it if the handoff state says the reader was
+  // parked above the fold.
+  const isAtBottomRef = useRef(true);
+  const settleRafRef = useRef<number | null>(null);
+
+  const cancelSettle = useCallback(() => {
+    if (settleRafRef.current !== null) {
+      cancelAnimationFrame(settleRafRef.current);
+      settleRafRef.current = null;
+    }
+  }, []);
+
+  const settleAtEnd = useCallback(() => {
+    cancelSettle();
+    isAtBottomRef.current = true;
+    let attempts = 0;
+    const step = () => {
+      virtualizer.scrollToEnd();
+      if (
+        virtualizer.isAtEnd(AT_BOTTOM_THRESHOLD) ||
+        ++attempts > SETTLE_AT_END_ATTEMPTS
+      ) {
+        settleRafRef.current = null;
+        return;
+      }
+      settleRafRef.current = requestAnimationFrame(step);
+    };
+    step();
+  }, [virtualizer, cancelSettle]);
+
+  const settleToIndex = useCallback(
+    (index: number) => {
+      cancelSettle();
+      isAtBottomRef.current = false;
+      virtualizer.scrollToIndex(index, { align: "start" });
+      let attempts = 0;
+      const step = () => {
+        settleRafRef.current = null;
+        const viewport = viewportRef.current;
+        const target = virtualizer.getOffsetForIndex(index, "start")?.[0];
+        if (!viewport || target == null) return;
+        const maxScroll = Math.max(
+          0,
+          viewport.scrollHeight - viewport.clientHeight,
+        );
+        if (
+          Math.abs(viewport.scrollTop - Math.min(target, maxScroll)) <= 1 ||
+          ++attempts > SETTLE_TO_INDEX_ATTEMPTS
+        ) {
+          return;
+        }
+        virtualizer.scrollToIndex(index, { align: "start" });
+        settleRafRef.current = requestAnimationFrame(step);
+      };
+      settleRafRef.current = requestAnimationFrame(step);
+    },
+    [virtualizer, viewportRef, cancelSettle],
+  );
+
+  useEffect(() => cancelSettle, [cancelSettle]);
+
+  return { isAtBottomRef, settleAtEnd, settleToIndex };
+}
+
+/**
+ * Sticky-header anchor derived from the virtualizer's measurements (estimated for rows that have
+ * never mounted, exact once measured), recomputed at most once per frame. Returns the state plus
+ * the scheduler the scroll handler pokes.
+ */
+function useStickyAnchor(
+  virtualizer: ThreadVirtualizer,
+  viewportRef: RefObject<HTMLDivElement | null>,
+  userRows: readonly UserRow[],
+) {
+  const [state, setState] = useState<StickyAnchorState>({
+    anchorId: null,
+    offscreen: false,
+  });
+
+  const recompute = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const cache = virtualizer.measurementsCache;
+    const entries: StickyAnchorEntry[] = userRows.map((user) => {
+      const measured = cache[user.index];
+      const start = measured?.start ?? user.index * ESTIMATED_ROW_SIZE;
+      const end = measured?.end ?? start + ESTIMATED_ROW_SIZE;
+      return { id: user.id, start, end };
+    });
+    const next = computeStickyAnchor(
+      entries,
+      viewport.scrollTop,
+      SCROLL_PREVIOUS_ITEM_PEEK,
+    );
+    setState((prev) =>
+      prev.anchorId === next.anchorId && prev.offscreen === next.offscreen
+        ? prev
+        : next,
+    );
+  }, [userRows, virtualizer, viewportRef]);
+
+  const frameRef = useRef<number | null>(null);
+  const schedule = useCallback(() => {
+    if (frameRef.current != null) return;
+    frameRef.current = requestAnimationFrame(() => {
+      frameRef.current = null;
+      recompute();
+    });
+  }, [recompute]);
+
+  // Re-derive on mount and whenever the row set changes (content growth moves every anchor below).
+  useEffect(() => {
+    schedule();
+    return () => {
+      if (frameRef.current != null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [schedule]);
+
+  return { state, schedule };
+}
+
+/**
+ * Keeps the view pinned to the bottom while following. Three triggers, all of which the
+ * virtualizer's own `anchorTo`/`followOnAppend` miss:
+ * - `totalSize` moving (rows remeasuring past the estimate, late async content growing rows, the
+ *   footer resize feeding `paddingEnd`) — a layout effect so the re-pin lands before paint;
+ * - a prompt submitted from anywhere, which re-engages follow (the trigger `ThreadAutoFollow` uses
+ *   in the non-virtualized body);
+ * - returning to a backgrounded tab, where ResizeObserver callbacks were throttled.
+ */
+function useFollowBottom({
+  virtualizer,
+  totalSize,
+  items,
+  isAtBottomRef,
+  settleAtEnd,
+}: {
+  virtualizer: ThreadVirtualizer;
+  totalSize: number;
+  items: ConversationItem[];
+  isAtBottomRef: RefObject<boolean>;
+  settleAtEnd: () => void;
+}) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: totalSize is the trigger, not a body dependency
+  useLayoutEffect(() => {
+    if (!isAtBottomRef.current) return;
+    virtualizer.scrollToEnd();
+  }, [totalSize, virtualizer, isAtBottomRef]);
+
+  const lastItem = items.at(-1);
+  const userMessageCount = useMemo(
+    () =>
+      items.reduce((n, item) => (item.type === "user_message" ? n + 1 : n), 0),
+    [items],
+  );
+  const prevUserCountRef = useRef(userMessageCount);
+  useLayoutEffect(() => {
+    const previous = prevUserCountRef.current;
+    prevUserCountRef.current = userMessageCount;
+    if (previous === 0 || userMessageCount <= previous) return;
+    if (lastItem?.type !== "user_message") return;
+    settleAtEnd();
+  }, [userMessageCount, lastItem, settleAtEnd]);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden && isAtBottomRef.current) settleAtEnd();
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [settleAtEnd, isAtBottomRef]);
+}
+
+/**
+ * Dev-build overlay confirming the windowed renderer is live, and how much of the thread it is
+ * actually mounting. A mounted count that tracks the total instead of staying flat means windowing
+ * isn't doing its job.
+ */
+function WindowedDebugBadge({
+  mounted,
+  total,
+}: {
+  mounted: number;
+  total: number;
+}) {
+  return (
+    <div className="pointer-events-none absolute top-2 left-2 z-20 rounded bg-amber-9 px-1.5 py-0.5 font-mono text-[10px] text-white leading-none">
+      windowed {mounted}/{total}
+    </div>
+  );
+}
+
+/**
+ * Windowed scroll body for long threads, following the upstream MessageScroller guidance:
+ * virtualization lives outside the primitive — the quill viewport stays the scroll element and a
+ * `@tanstack/react-virtual` virtualizer owns the rows inside `ChatMessageScrollerContent`.
+ *
+ * The engine still provides the chrome that only needs scroll geometry (the scroll-to-bottom
+ * button and edge state read real element measurements), while everything item-based gets a
+ * windowed implementation here: follow-bottom via `anchorTo: "end"` + `followOnAppend` (the legacy
+ * `VirtualizedList` recipe), message jumps via `scrollToIndex`, the sticky header via
+ * `computeStickyAnchor` over the virtualizer's measurements, and the scrollbar rail via its
+ * existing interpolate-unmounted-rows path.
+ */
+export function VirtualThreadScrollBody({
+  items,
+  flatRows,
+  renderRow,
+  footer,
+  keyboardFocusedMessageId,
+  onUserInteract,
+  renderNav,
+  resumeRef,
+}: {
+  items: ConversationItem[];
+  flatRows: FlatThreadRow[];
+  renderRow: (row: FlatThreadRow) => ReactNode;
+  /** Status row (duration / context usage) pinned as the last item in the thread. */
+  footer?: ReactNode;
+  keyboardFocusedMessageId?: string | null;
+  /** Clears keyboard-focused message state on any pointer interaction with the thread. */
+  onUserInteract?: () => void;
+  /**
+   * Navigation layer, rendered as a sibling of the scroller so it can be handed this body's jump
+   * implementation — the engine's `scrollToMessage` only reaches mounted rows.
+   */
+  renderNav?: (jumpToMessage: (id: string) => void) => ReactNode;
+  /** Where the non-virtualized body left off, read once when this body takes over mid-session. */
+  resumeRef: RefObject<ThreadScrollResume>;
+}) {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [viewportEl, setViewportEl] = useState<HTMLDivElement | null>(null);
+  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
+  const footerRef = useRef<HTMLDivElement | null>(null);
+  const initializedRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+
+  const hasFooter = footer != null;
+  const footerHeight = useReservedFooterHeight(footerRef, hasFooter);
+
+  const virtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => ESTIMATED_ROW_SIZE,
+    overscan: OVERSCAN,
+    anchorTo: "end",
+    followOnAppend: true,
+    scrollEndThreshold: AT_BOTTOM_THRESHOLD,
+    paddingStart: PADDING_START,
+    paddingEnd: footerHeight,
+    getItemKey: (index) => flatRows[index]?.key ?? index,
+  });
+
+  const { isAtBottomRef, settleAtEnd, settleToIndex } = useSettleControls(
+    virtualizer,
+    viewportRef,
+  );
+
+  const userRows = useMemo(() => {
+    const result: UserRow[] = [];
+    flatRows.forEach((row, index) => {
+      if (row.item.type === "user_message") {
+        result.push({ id: row.item.id, content: row.item.content, index });
+      }
+    });
+    return result;
+  }, [flatRows]);
+
+  // Held in a ref so `jumpToMessage` stays referentially stable across appends — it is handed to
+  // the nav layer and to the sticky header, neither of which should re-render per streamed chunk.
+  const rowIndexByMessageId = useMemo(() => {
+    const map = new Map<string, number>();
+    flatRows.forEach((row, index) => {
+      map.set(row.item.id, index);
+    });
+    return map;
+  }, [flatRows]);
+  const rowIndexRef = useRef(rowIndexByMessageId);
+  rowIndexRef.current = rowIndexByMessageId;
+
+  const jumpToMessage = useCallback(
+    (id: string) => {
+      const index = rowIndexRef.current.get(id);
+      if (index != null) settleToIndex(index);
+    },
+    [settleToIndex],
+  );
+
+  // Initial position: resume at the message the non-virtualized body was anchored to, or settle at
+  // the bottom. Resuming by row index rather than by pixel offset is what makes the handoff land —
+  // the two bodies don't share a coordinate space (virtual offsets are estimates until rows
+  // measure), so a recorded `scrollTop` would mean nothing here.
+  useLayoutEffect(() => {
+    if (initializedRef.current || flatRows.length === 0) return;
+    initializedRef.current = true;
+    const { atBottom, anchorId } = resumeRef.current;
+    const anchorIndex =
+      anchorId != null ? rowIndexRef.current.get(anchorId) : undefined;
+    if (!atBottom && anchorIndex != null) {
+      settleToIndex(anchorIndex);
+      return;
+    }
+    settleAtEnd();
+  }, [flatRows.length, settleAtEnd, settleToIndex, resumeRef]);
+
+  const { state: stickyState, schedule: scheduleStickyRecompute } =
+    useStickyAnchor(virtualizer, viewportRef, userRows);
+
+  const handleScroll = useCallback(() => {
+    const el = viewportRef.current;
+    const scrollTop = el?.scrollTop ?? 0;
+    // Tolerate sub-pixel jitter; only a real upward move counts as leaving end.
+    const scrolledUp = scrollTop < lastScrollTopRef.current - 1;
+    lastScrollTopRef.current = scrollTop;
+
+    const atEnd = virtualizer.isAtEnd(AT_BOTTOM_THRESHOLD);
+    // Genuine far drift (not a 1-frame measure transient): the DOM bottom sits well below the
+    // viewport, so follow can't get silently stuck mid-thread.
+    const farFromEnd = el
+      ? el.scrollHeight - el.clientHeight - scrollTop > FAR_DRIFT_THRESHOLD
+      : false;
+    // Hysteresis: each append measures taller than the estimate, so for one frame isAtEnd reads
+    // false before followOnAppend/anchorTo re-pin. Re-arm at the end; only clear on a real upward
+    // scroll or a genuine drift.
+    if (atEnd) {
+      isAtBottomRef.current = true;
+    } else if (scrolledUp || farFromEnd) {
+      isAtBottomRef.current = false;
+    }
+    scheduleStickyRecompute();
+  }, [virtualizer, scheduleStickyRecompute, isAtBottomRef]);
+
+  const totalSize = virtualizer.getTotalSize();
+  useFollowBottom({
+    virtualizer,
+    totalSize,
+    items,
+    isAtBottomRef,
+    settleAtEnd,
+  });
+
+  const railMarkers = useMessageRailMarkers({
+    contentEl,
+    scrollEl: viewportEl,
+    userMessages: userRows,
+    onJump: jumpToMessage,
+    activeId: keyboardFocusedMessageId,
+    rowAttribute: "data-message-id",
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  return (
+    <>
+      <ChatMessageScroller
+        // The dev-only ring makes it obvious at a glance which renderer is live — the two bodies
+        // are otherwise pixel-identical, so "did the threshold actually trip?" is unanswerable
+        // without it. Inset so it doesn't shift layout.
+        className={cn(
+          "group/thread",
+          import.meta.env.DEV && "ring-1 ring-amber-8 ring-inset",
+        )}
+        onPointerDownCapture={onUserInteract}
+      >
+        {import.meta.env.DEV && (
+          <WindowedDebugBadge
+            mounted={virtualItems.length}
+            total={flatRows.length}
+          />
+        )}
+        <VirtualStickyHeader
+          items={items}
+          anchorId={stickyState.anchorId}
+          offscreen={stickyState.offscreen}
+          onJump={jumpToMessage}
+        />
+        <MessageScrollbarRail markers={railMarkers} />
+        <ChatMessageScrollerViewport
+          ref={(el: HTMLDivElement | null) => {
+            viewportRef.current = el;
+            setViewportEl(el);
+          }}
+          onScroll={handleScroll}
+        >
+          {/* `block` overrides the content's flex+gap layout — spacing moves into the rows
+              (pb-4) and the virtual paddings, so translateY offsets are the whole layout. */}
+          <ChatMessageScrollerContent className="block" density="default">
+            <div
+              ref={setContentEl}
+              className="relative w-full"
+              style={{ height: totalSize }}
+            >
+              {virtualItems.map((virtualItem) => {
+                const row = flatRows[virtualItem.index];
+                if (!row) return null;
+                return (
+                  <div
+                    key={virtualItem.key}
+                    ref={virtualizer.measureElement}
+                    data-index={virtualItem.index}
+                    className="absolute top-0 left-0 w-full"
+                    style={{ transform: `translateY(${virtualItem.start}px)` }}
+                  >
+                    {renderRow(row)}
+                  </div>
+                );
+              })}
+              {/* Footer occupies the reserved paddingEnd region at the very bottom of the virtual
+                  space, so the DOM bottom == the virtual end. */}
+              {hasFooter && (
+                <div
+                  ref={footerRef}
+                  className="absolute bottom-0 left-0 w-full"
+                >
+                  <div
+                    className="mx-auto w-full px-2.5 pb-8"
+                    style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+                  >
+                    {footer}
+                  </div>
+                </div>
+              )}
+            </div>
+          </ChatMessageScrollerContent>
+        </ChatMessageScrollerViewport>
+        <ChatMessageScrollerButton
+          onClick={(event: ReactMouseEvent) => {
+            // The engine's own scroll-to-end targets the current scrollHeight, which is an
+            // estimate until every row between here and the bottom has measured — settle instead.
+            // (The primitive skips its own handler once the event is defaultPrevented.)
+            event.preventDefault();
+            settleAtEnd();
+          }}
+        />
+      </ChatMessageScroller>
+      {renderNav?.(jumpToMessage)}
+    </>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
index 86c2434447..ef96d95c91 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
@@ -25,6 +25,23 @@ export type TurnRow = ThreadItem | AgentTurn;
  */
 export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 150;
 
+/**
+ * How far below the viewport top a user message may sit while still counting as the current
+ * anchor — shared by the engine (`scrollPreviousItemPeek`) and the windowed sticky header.
+ */
+export const SCROLL_PREVIOUS_ITEM_PEEK = 64;
+
+/**
+ * Where the non-virtualized body was when the thread crossed the virtualization threshold, so the
+ * windowed body can resume there. Recorded by row identity, not pixels: the two bodies don't share
+ * a scroll coordinate space (virtual offsets are row-size estimates until rows mount).
+ */
+export interface ThreadScrollResume {
+  atBottom: boolean;
+  /** Id of the user message the engine was anchored to, or null if above the first one. */
+  anchorId: string | null;
+}
+
 /**
  * One row of the virtualized thread. Agent turns are flattened to one row per item — a single
  * turn can contain thousands of tool calls (autonomous sessions), so windowing at turn
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts b/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
index 86d337ab82..35c9222737 100644
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
@@ -27,12 +27,12 @@ interface MeasuredOffset {
  * and recomputes the fractional positions whenever the content scrolls, resizes,
  * or the DOM mutates (rows entering/leaving the virtualization window).
  *
- * Rows not yet rendered (virtualized views, e.g. the legacy `ConversationView`)
- * have no DOM node and therefore no measured offset; their markers are placed
- * by linearly interpolating between the nearest measured neighbours using their
- * item indices, which is accurate enough for a click target and self-corrects the
- * moment the row renders. (Non-virtualized views like the new `ChatThread`
- * render every row, so every marker is measured directly.)
+ * Rows not yet rendered (windowed views: the legacy `ConversationView`, and
+ * `ChatThread` once it passes its virtualization threshold) have no DOM node and
+ * therefore no measured offset; their markers are placed by linearly interpolating
+ * between the nearest measured neighbours using their item indices, which is
+ * accurate enough for a click target and self-corrects the moment the row renders.
+ * A short `ChatThread` renders every row, so every marker is measured directly.
  *
  * @param contentEl       The scroll container's inner content element (the tall
  *                        div whose height == total content height). Offsets are
diff --git a/packages/ui/src/features/settings/sections/AdvancedSettings.tsx b/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
index 0a6afb8777..1527082be0 100644
--- a/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
+++ b/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
@@ -3,6 +3,7 @@ import { useHostTRPC } from "@posthog/host-router/react";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useLoopsPromoStore } from "@posthog/ui/features/loops/loopsPromoStore";
 import { useOnboardingStore } from "@posthog/ui/features/onboarding/onboardingStore";
+import { CHAT_THREAD_VIRTUALIZATION_THRESHOLD } from "@posthog/ui/features/sessions/components/chat-thread/threadVirtualization";
 import {
   DEV_MODE_CLIENT,
   type DevModeClient,
@@ -13,7 +14,14 @@ import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { useSetupStore } from "@posthog/ui/features/setup/setupStore";
 import { useTourStore } from "@posthog/ui/features/tour/tourStore";
 import { clearApplicationStorage } from "@posthog/ui/utils/clearStorage";
-import { Button, Checkbox, Flex, Switch, Text } from "@radix-ui/themes";
+import {
+  Button,
+  Checkbox,
+  Flex,
+  Switch,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { useSyncExternalStore } from "react";
 
@@ -135,7 +143,7 @@ export function AdvancedSettings() {
       <SettingRow
         label="Use new chat thread (experimental)"
         description="Render conversations with the new ChatX (quill) primitives instead of the virtualized thread"
-        noBorder={!devModeClient}
+        noBorder={!devModeClient && !import.meta.env.DEV}
       >
         <Switch
           checked={useNewChatThread}
@@ -143,11 +151,54 @@ export function AdvancedSettings() {
           size="1"
         />
       </SettingRow>
+      {import.meta.env.DEV && (
+        <ChatThreadVirtualizationRow noBorder={!devModeClient} />
+      )}
       {devModeClient && <DevModeRow client={devModeClient} />}
     </Flex>
   );
 }
 
+/**
+ * Dev-only override for the chat thread's virtualization threshold. Lowering it below an open
+ * thread's row count flips that thread to the windowed renderer on the spot, which is the only
+ * practical way to exercise the non-virtualized -> windowed handoff without a 150-row
+ * conversation. The switch is a one-way ratchet per mount, so raising the number back doesn't
+ * un-flip an already-windowed thread — reopen the session for that.
+ */
+function ChatThreadVirtualizationRow({ noBorder }: { noBorder: boolean }) {
+  const threshold = useSettingsStore(
+    (s) => s.chatThreadVirtualizationThreshold,
+  );
+  const setThreshold = useSettingsStore(
+    (s) => s.setChatThreadVirtualizationThreshold,
+  );
+
+  return (
+    <SettingRow
+      label="Chat thread virtualization threshold"
+      description={`Row count past which the new chat thread switches to windowed rendering. Blank uses the default (${CHAT_THREAD_VIRTUALIZATION_THRESHOLD}). Lower it below an open thread's row count to flip it mid-session.`}
+      noBorder={noBorder}
+    >
+      <TextField.Root
+        type="number"
+        min={0}
+        size="1"
+        className="w-[120px]"
+        placeholder={String(CHAT_THREAD_VIRTUALIZATION_THRESHOLD)}
+        value={threshold == null ? "" : String(threshold)}
+        onChange={(event) => {
+          const raw = event.currentTarget.value.trim();
+          const parsed = Number.parseInt(raw, 10);
+          setThreshold(
+            raw === "" || Number.isNaN(parsed) ? null : Math.max(0, parsed),
+          );
+        }}
+      />
+    </SettingRow>
+  );
+}
+
 function DevModeRow({ client }: { client: DevModeClient }) {
   const devMode = useSyncExternalStore(
     client.onDevModeChanged,
diff --git a/packages/ui/src/features/settings/settingsStore.ts b/packages/ui/src/features/settings/settingsStore.ts
index 2d71ae4c17..c27cdad771 100644
--- a/packages/ui/src/features/settings/settingsStore.ts
+++ b/packages/ui/src/features/settings/settingsStore.ts
@@ -249,6 +249,12 @@ interface SettingsStore {
   // the virtualized ConversationView. Local A/B toggle while the rebuild bakes.
   useNewChatThread: boolean;
   setUseNewChatThread: (enabled: boolean) => void;
+  // Debug override for CHAT_THREAD_VIRTUALIZATION_THRESHOLD. null uses the shipped default;
+  // lowering it makes a short thread window immediately, and lowering it below an open thread's
+  // row count flips that thread mid-session, which is how the non-virtualized -> windowed handoff
+  // is exercised without waiting for a 150-row conversation.
+  chatThreadVirtualizationThreshold: number | null;
+  setChatThreadVirtualizationThreshold: (threshold: number | null) => void;
   setHedgehogMode: (enabled: boolean) => void;
   setSlotMachineMode: (enabled: boolean) => void;
   setBrainrotMode: (enabled: boolean) => void;
@@ -469,6 +475,9 @@ export const useSettingsStore = create<SettingsStore>()(
       lastSeenChangelogVersion: null,
       useNewChatThread: false,
       setUseNewChatThread: (enabled) => set({ useNewChatThread: enabled }),
+      chatThreadVirtualizationThreshold: null,
+      setChatThreadVirtualizationThreshold: (threshold) =>
+        set({ chatThreadVirtualizationThreshold: threshold }),
       setHedgehogMode: (enabled) => set({ hedgehogMode: enabled }),
       setSlotMachineMode: (enabled) => set({ slotMachineMode: enabled }),
       setBrainrotMode: (enabled) => set({ brainrotMode: enabled }),
@@ -588,6 +597,8 @@ export const useSettingsStore = create<SettingsStore>()(
         dismissibleUpdateBanners: state.dismissibleUpdateBanners,
         lastSeenChangelogVersion: state.lastSeenChangelogVersion,
         useNewChatThread: state.useNewChatThread,
+        chatThreadVirtualizationThreshold:
+          state.chatThreadVirtualizationThreshold,
 
         // Onboarding hints
         hints: state.hints,

From adb306bc5f88debfc7b76924e234d74625813924 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sun, 26 Jul 2026 09:29:41 +0100
Subject: [PATCH 4/6] refactor(chat-thread): drop debug scaffolding, lower
 threshold to 50
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the dev-only windowed badge, amber ring, Advanced settings row
  and the persisted `chatThreadVirtualizationThreshold` store field. The
  threshold is a plain constant again.
- Lower CHAT_THREAD_VIRTUALIZATION_THRESHOLD from 150 to 50 and document
  that it counts flat rows, not turns or messages — an exchange is
  several rows (~5 on a tool-heavy thread), so 50 rows is well under 50
  turns.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WejU6Qw29peK7Md1WH2JqE
---
 .../components/chat-thread/ChatThread.tsx     | 14 ++---
 .../chat-thread/VirtualThreadScrollBody.tsx   | 34 +-----------
 .../chat-thread/threadVirtualization.ts       |  7 ++-
 .../settings/sections/AdvancedSettings.tsx    | 55 +------------------
 .../ui/src/features/settings/settingsStore.ts | 11 ----
 5 files changed, 13 insertions(+), 108 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
index 85ce2495ee..abe9043f0b 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -1037,17 +1037,11 @@ function ChatThreadRenderer({
   // stays there for the life of this mount (see CHAT_THREAD_VIRTUALIZATION_THRESHOLD). Long
   // sessions start virtualized from the first render; a live session flips once mid-stream,
   // resuming from the scroll state the non-virtualized body recorded.
-  //
-  // The threshold is overridable from Advanced settings in dev builds: lowering it below an open
-  // thread's row count flips that thread on the spot, which is how the handoff gets exercised
-  // without a 150-row conversation. Raising it back doesn't un-flip — reopen the session.
-  const thresholdOverride = useSettingsStore(
-    (s) => s.chatThreadVirtualizationThreshold,
-  );
-  const threshold = thresholdOverride ?? CHAT_THREAD_VIRTUALIZATION_THRESHOLD;
   const flatCount = useMemo(() => countFlatRows(rows), [rows]);
-  const [virtualized, setVirtualized] = useState(() => flatCount > threshold);
-  if (!virtualized && flatCount > threshold) {
+  const [virtualized, setVirtualized] = useState(
+    () => flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD,
+  );
+  if (!virtualized && flatCount > CHAT_THREAD_VIRTUALIZATION_THRESHOLD) {
     setVirtualized(true);
   }
   const flatRows = useMemo(
diff --git a/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
index a7c9e61b8c..f1ac054207 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
@@ -3,7 +3,6 @@ import {
   ChatMessageScrollerButton,
   ChatMessageScrollerContent,
   ChatMessageScrollerViewport,
-  cn,
 } from "@posthog/quill";
 import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
 import { VirtualStickyHeader } from "@posthog/ui/features/sessions/components/chat-thread/ThreadStickyHeader";
@@ -265,25 +264,6 @@ function useFollowBottom({
   }, [settleAtEnd, isAtBottomRef]);
 }
 
-/**
- * Dev-build overlay confirming the windowed renderer is live, and how much of the thread it is
- * actually mounting. A mounted count that tracks the total instead of staying flat means windowing
- * isn't doing its job.
- */
-function WindowedDebugBadge({
-  mounted,
-  total,
-}: {
-  mounted: number;
-  total: number;
-}) {
-  return (
-    <div className="pointer-events-none absolute top-2 left-2 z-20 rounded bg-amber-9 px-1.5 py-0.5 font-mono text-[10px] text-white leading-none">
-      windowed {mounted}/{total}
-    </div>
-  );
-}
-
 /**
  * Windowed scroll body for long threads, following the upstream MessageScroller guidance:
  * virtualization lives outside the primitive — the quill viewport stays the scroll element and a
@@ -433,21 +413,9 @@ export function VirtualThreadScrollBody({
   return (
     <>
       <ChatMessageScroller
-        // The dev-only ring makes it obvious at a glance which renderer is live — the two bodies
-        // are otherwise pixel-identical, so "did the threshold actually trip?" is unanswerable
-        // without it. Inset so it doesn't shift layout.
-        className={cn(
-          "group/thread",
-          import.meta.env.DEV && "ring-1 ring-amber-8 ring-inset",
-        )}
+        className="group/thread"
         onPointerDownCapture={onUserInteract}
       >
-        {import.meta.env.DEV && (
-          <WindowedDebugBadge
-            mounted={virtualItems.length}
-            total={flatRows.length}
-          />
-        )}
         <VirtualStickyHeader
           items={items}
           anchorId={stickyState.anchorId}
diff --git a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
index ef96d95c91..2867449d45 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
@@ -16,6 +16,11 @@ export type TurnRow = ThreadItem | AgentTurn;
 /**
  * Flat-row count past which the thread switches to the windowed (virtualized) renderer.
  *
+ * Counted in {@link FlatThreadRow}s, not turns or messages: a user message is one row, and an
+ * agent turn contributes one row per item it holds (each prose block, each tool group, each git
+ * action). A single exchange is therefore several rows — measured at roughly 5 on a
+ * tool-heavy thread — so this number is well below the equivalent turn count.
+ *
  * Below it, every row stays mounted and the full quill scroller engine drives anchoring and
  * visibility — `content-visibility: auto` keeps paint cheap and the DOM small enough that React
  * commits stay fast. Past it, the unbounded DOM plus a full-thread reconcile per streamed chunk
@@ -23,7 +28,7 @@ export type TurnRow = ThreadItem | AgentTurn;
  * one-way ratchet per mounted thread: crossing the threshold flips once and never flips back,
  * so the two modes can't flap against each other mid-session.
  */
-export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 150;
+export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 50;
 
 /**
  * How far below the viewport top a user message may sit while still counting as the current
diff --git a/packages/ui/src/features/settings/sections/AdvancedSettings.tsx b/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
index 1527082be0..0a6afb8777 100644
--- a/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
+++ b/packages/ui/src/features/settings/sections/AdvancedSettings.tsx
@@ -3,7 +3,6 @@ import { useHostTRPC } from "@posthog/host-router/react";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useLoopsPromoStore } from "@posthog/ui/features/loops/loopsPromoStore";
 import { useOnboardingStore } from "@posthog/ui/features/onboarding/onboardingStore";
-import { CHAT_THREAD_VIRTUALIZATION_THRESHOLD } from "@posthog/ui/features/sessions/components/chat-thread/threadVirtualization";
 import {
   DEV_MODE_CLIENT,
   type DevModeClient,
@@ -14,14 +13,7 @@ import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { useSetupStore } from "@posthog/ui/features/setup/setupStore";
 import { useTourStore } from "@posthog/ui/features/tour/tourStore";
 import { clearApplicationStorage } from "@posthog/ui/utils/clearStorage";
-import {
-  Button,
-  Checkbox,
-  Flex,
-  Switch,
-  Text,
-  TextField,
-} from "@radix-ui/themes";
+import { Button, Checkbox, Flex, Switch, Text } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { useSyncExternalStore } from "react";
 
@@ -143,7 +135,7 @@ export function AdvancedSettings() {
       <SettingRow
         label="Use new chat thread (experimental)"
         description="Render conversations with the new ChatX (quill) primitives instead of the virtualized thread"
-        noBorder={!devModeClient && !import.meta.env.DEV}
+        noBorder={!devModeClient}
       >
         <Switch
           checked={useNewChatThread}
@@ -151,54 +143,11 @@ export function AdvancedSettings() {
           size="1"
         />
       </SettingRow>
-      {import.meta.env.DEV && (
-        <ChatThreadVirtualizationRow noBorder={!devModeClient} />
-      )}
       {devModeClient && <DevModeRow client={devModeClient} />}
     </Flex>
   );
 }
 
-/**
- * Dev-only override for the chat thread's virtualization threshold. Lowering it below an open
- * thread's row count flips that thread to the windowed renderer on the spot, which is the only
- * practical way to exercise the non-virtualized -> windowed handoff without a 150-row
- * conversation. The switch is a one-way ratchet per mount, so raising the number back doesn't
- * un-flip an already-windowed thread — reopen the session for that.
- */
-function ChatThreadVirtualizationRow({ noBorder }: { noBorder: boolean }) {
-  const threshold = useSettingsStore(
-    (s) => s.chatThreadVirtualizationThreshold,
-  );
-  const setThreshold = useSettingsStore(
-    (s) => s.setChatThreadVirtualizationThreshold,
-  );
-
-  return (
-    <SettingRow
-      label="Chat thread virtualization threshold"
-      description={`Row count past which the new chat thread switches to windowed rendering. Blank uses the default (${CHAT_THREAD_VIRTUALIZATION_THRESHOLD}). Lower it below an open thread's row count to flip it mid-session.`}
-      noBorder={noBorder}
-    >
-      <TextField.Root
-        type="number"
-        min={0}
-        size="1"
-        className="w-[120px]"
-        placeholder={String(CHAT_THREAD_VIRTUALIZATION_THRESHOLD)}
-        value={threshold == null ? "" : String(threshold)}
-        onChange={(event) => {
-          const raw = event.currentTarget.value.trim();
-          const parsed = Number.parseInt(raw, 10);
-          setThreshold(
-            raw === "" || Number.isNaN(parsed) ? null : Math.max(0, parsed),
-          );
-        }}
-      />
-    </SettingRow>
-  );
-}
-
 function DevModeRow({ client }: { client: DevModeClient }) {
   const devMode = useSyncExternalStore(
     client.onDevModeChanged,
diff --git a/packages/ui/src/features/settings/settingsStore.ts b/packages/ui/src/features/settings/settingsStore.ts
index c27cdad771..2d71ae4c17 100644
--- a/packages/ui/src/features/settings/settingsStore.ts
+++ b/packages/ui/src/features/settings/settingsStore.ts
@@ -249,12 +249,6 @@ interface SettingsStore {
   // the virtualized ConversationView. Local A/B toggle while the rebuild bakes.
   useNewChatThread: boolean;
   setUseNewChatThread: (enabled: boolean) => void;
-  // Debug override for CHAT_THREAD_VIRTUALIZATION_THRESHOLD. null uses the shipped default;
-  // lowering it makes a short thread window immediately, and lowering it below an open thread's
-  // row count flips that thread mid-session, which is how the non-virtualized -> windowed handoff
-  // is exercised without waiting for a 150-row conversation.
-  chatThreadVirtualizationThreshold: number | null;
-  setChatThreadVirtualizationThreshold: (threshold: number | null) => void;
   setHedgehogMode: (enabled: boolean) => void;
   setSlotMachineMode: (enabled: boolean) => void;
   setBrainrotMode: (enabled: boolean) => void;
@@ -475,9 +469,6 @@ export const useSettingsStore = create<SettingsStore>()(
       lastSeenChangelogVersion: null,
       useNewChatThread: false,
       setUseNewChatThread: (enabled) => set({ useNewChatThread: enabled }),
-      chatThreadVirtualizationThreshold: null,
-      setChatThreadVirtualizationThreshold: (threshold) =>
-        set({ chatThreadVirtualizationThreshold: threshold }),
       setHedgehogMode: (enabled) => set({ hedgehogMode: enabled }),
       setSlotMachineMode: (enabled) => set({ slotMachineMode: enabled }),
       setBrainrotMode: (enabled) => set({ brainrotMode: enabled }),
@@ -597,8 +588,6 @@ export const useSettingsStore = create<SettingsStore>()(
         dismissibleUpdateBanners: state.dismissibleUpdateBanners,
         lastSeenChangelogVersion: state.lastSeenChangelogVersion,
         useNewChatThread: state.useNewChatThread,
-        chatThreadVirtualizationThreshold:
-          state.chatThreadVirtualizationThreshold,
 
         // Onboarding hints
         hints: state.hints,

From a8c4695d30f539fe3ea0fe1cf2a3758589dd7a2b Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sun, 26 Jul 2026 09:41:52 +0100
Subject: [PATCH 5/6] fix(chat-thread): set virtualization threshold to 250
 rows from usage data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prompts-per-task over 30 days (9,458 tasks): p50 3, p90 17, p99 72, max
2,007. At ~5 flat rows per exchange, 250 rows is ~50 prompts — the top
1.6% of threads, carrying 23% of all prompting. Lower thresholds
windowed a large share of ordinary conversations for no measured gain:
at 51 rows both renderers hold p50 8.3ms with one dropped frame in 300.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WejU6Qw29peK7Md1WH2JqE
---
 .../components/chat-thread/threadVirtualization.ts     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
index 2867449d45..2b713eb735 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
@@ -21,6 +21,14 @@ export type TurnRow = ThreadItem | AgentTurn;
  * action). A single exchange is therefore several rows — measured at roughly 5 on a
  * tool-heavy thread — so this number is well below the equivalent turn count.
  *
+ * 250 comes from the prompts-per-task distribution (30 days, 9,458 tasks): p50 is 3 prompts, p90
+ * is 17, p99 is 72, and the worst thread on record is 2,007. At ~5 rows per exchange, 250 rows is
+ * ~50 prompts — the top 1.6% of threads, which carry 23% of all prompting. Lower thresholds
+ * windowed a large share of ordinary conversations for no measured gain: at 51 rows both
+ * renderers hold the same frame budget (p50 8.3ms, one dropped frame in 300), and upstream
+ * MessageScroller documents the non-virtualized path as comfortable into the low thousands of
+ * turns. Windowing is for the tail that actually degrades, not the median thread.
+ *
  * Below it, every row stays mounted and the full quill scroller engine drives anchoring and
  * visibility — `content-visibility: auto` keeps paint cheap and the DOM small enough that React
  * commits stay fast. Past it, the unbounded DOM plus a full-thread reconcile per streamed chunk
@@ -28,7 +36,7 @@ export type TurnRow = ThreadItem | AgentTurn;
  * one-way ratchet per mounted thread: crossing the threshold flips once and never flips back,
  * so the two modes can't flap against each other mid-session.
  */
-export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 50;
+export const CHAT_THREAD_VIRTUALIZATION_THRESHOLD = 250;
 
 /**
  * How far below the viewport top a user message may sit while still counting as the current

From 252b9b3ff65eb8316329b53c2ad36b29e72e120f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 26 Jul 2026 09:38:55 +0000
Subject: [PATCH 6/6] fix(chat-thread): recompute sticky anchor when mounted
 rows remeasure

Async markdown/diff/tool content can grow a mounted row with no scroll
and no row-set change; the measurement cache moves but the sticky pill
held its stale anchor until the next scroll. totalSize is the cheapest
proxy for the cache moving, so use it as a recompute trigger.

Flagged by Greptile on #3781.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PZje6JV5QZEqmhFKrhLDZ7
---
 .../chat-thread/VirtualThreadScrollBody.tsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
index f1ac054207..46fa6131f3 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
@@ -160,6 +160,7 @@ function useStickyAnchor(
   virtualizer: ThreadVirtualizer,
   viewportRef: RefObject<HTMLDivElement | null>,
   userRows: readonly UserRow[],
+  totalSize: number,
 ) {
   const [state, setState] = useState<StickyAnchorState>({
     anchorId: null,
@@ -197,7 +198,11 @@ function useStickyAnchor(
     });
   }, [recompute]);
 
-  // Re-derive on mount and whenever the row set changes (content growth moves every anchor below).
+  // Re-derive on mount, whenever the row set changes, and whenever the measurement cache moves —
+  // `totalSize` is its cheapest proxy. Async markdown/diff/tool content can grow a mounted row
+  // with no scroll and no row-set change, shifting every anchor below it; without this trigger
+  // the pill holds the stale anchor until the next scroll.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: totalSize is the remeasure trigger, not a body dependency
   useEffect(() => {
     schedule();
     return () => {
@@ -206,7 +211,7 @@ function useStickyAnchor(
         frameRef.current = null;
       }
     };
-  }, [schedule]);
+  }, [schedule, totalSize]);
 
   return { state, schedule };
 }
@@ -372,8 +377,10 @@ export function VirtualThreadScrollBody({
     settleAtEnd();
   }, [flatRows.length, settleAtEnd, settleToIndex, resumeRef]);
 
+  const totalSize = virtualizer.getTotalSize();
+
   const { state: stickyState, schedule: scheduleStickyRecompute } =
-    useStickyAnchor(virtualizer, viewportRef, userRows);
+    useStickyAnchor(virtualizer, viewportRef, userRows, totalSize);
 
   const handleScroll = useCallback(() => {
     const el = viewportRef.current;
@@ -399,7 +406,6 @@ export function VirtualThreadScrollBody({
     scheduleStickyRecompute();
   }, [virtualizer, scheduleStickyRecompute, isAtBottomRef]);
 
-  const totalSize = virtualizer.getTotalSize();
   useFollowBottom({
     virtualizer,
     totalSize,