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 b9fdafb61d..abe9043f0b 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,
@@ -49,12 +47,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 {
-  ToolGroup,
-  type ToolGroupItem,
-} from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
+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,
+  countFlatRows,
+  type FlatThreadRow,
+  flattenTurnRows,
+  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";
@@ -90,7 +99,6 @@ import {
   type DiffWorkerFactory,
 } from "@posthog/ui/shell/diffWorkerHost";
 import { IconButton, Tooltip } from "@radix-ui/themes";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import {
   memo,
   type ReactNode,
@@ -104,18 +112,6 @@ 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;
-
-/**
- * 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.
- */
-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" }>;
 
 function isToolCallItem(item: ConversationItem): item is SessionUpdateItem {
@@ -472,119 +468,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 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.
-  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 && (
-          <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>
-        )}
-      </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
@@ -664,21 +547,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.
@@ -820,6 +688,7 @@ function ThreadKeyboardNav({
   keyboardFocusedMessageId,
   setKeyboardFocusedMessageId,
   promptRecallRef,
+  jumpToMessage,
 }: {
   items: ConversationItem[];
   jumpPickerOpen: boolean;
@@ -827,8 +696,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(
     () =>
@@ -874,13 +750,13 @@ function ThreadKeyboardNav({
 
       useSettingsStore.getState().markHintLearned(PROMPT_RECALL_HINT_KEY);
       setKeyboardFocusedMessageId(nextId);
-      scrollToMessage(nextId);
+      jump(nextId);
     },
     [
       keyboardFocusedMessageId,
       userMessageIds,
       setKeyboardFocusedMessageId,
-      scrollToMessage,
+      jump,
     ],
   );
 
@@ -901,9 +777,9 @@ function ThreadKeyboardNav({
   const handleJumpToMessage = useCallback(
     (id: string) => {
       setKeyboardFocusedMessageId(id);
-      scrollToMessage(id);
+      jump(id);
     },
-    [scrollToMessage, setKeyboardFocusedMessageId],
+    [jump, setKeyboardFocusedMessageId],
   );
 
   return (
@@ -916,6 +792,29 @@ function ThreadKeyboardNav({
   );
 }
 
+/**
+ * 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,
+}: {
+  stateRef: RefObject<ThreadScrollResume>;
+}) {
+  const { end } = useChatMessageScrollerScrollable();
+  const { currentAnchorId } = useChatMessageScrollerVisibility();
+
+  useEffect(() => {
+    stateRef.current = { atBottom: !end, anchorId: currentAnchorId ?? null };
+  }, [end, currentAnchorId, stateRef]);
+
+  return null;
+}
+
 /** The scroll body, under the Provider so the overlay + scroll-button hooks can read engine state. */
 function ThreadScrollBody({
   items,
@@ -924,6 +823,7 @@ function ThreadScrollBody({
   footer,
   keyboardFocusedMessageId,
   onUserInteract,
+  resumeStateRef,
 }: {
   items: ConversationItem[];
   rows: TurnRow[];
@@ -933,6 +833,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;
@@ -951,6 +853,7 @@ function ThreadScrollBody({
     >
       <StickyHeaderOverlay items={items} />
       <ThreadAutoFollow items={items} />
+      <ThreadScrollStateRecorder stateRef={resumeStateRef} />
       <ChatMessageScrollerViewport>
         <ChatMessageScrollerContent
           className="gap-4 py-4 pb-8"
@@ -979,6 +882,64 @@ function ThreadScrollBody({
   );
 }
 
+const EMPTY_FLAT_ROWS: FlatThreadRow[] = [];
+
+/**
+ * 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,
+);
+
 /**
  * Thread renderer built on the ChatX (quill) primitives.
  *
@@ -1072,6 +1033,26 @@ 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 threadResumeRef = useRef<ThreadScrollResume>({
+    atBottom: true,
+    anchorId: null,
+  });
+
   const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
   const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
     string | null
@@ -1143,6 +1124,44 @@ function ChatThreadRenderer({
     [repoPath],
   );
 
+  const footer = (
+    <>
+      <CloudArtifactDownloads taskId={taskId} task={task} />
+      <ChatThreadFooter
+        events={footerEvents}
+        isPromptPending={isPromptPending}
+        promptStartedAt={promptStartedAt}
+        task={task}
+        taskId={taskId}
+      />
+    </>
+  );
+
+  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}
@@ -1151,42 +1170,41 @@ 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={
-                <>
-                  <CloudArtifactDownloads taskId={taskId} task={task} />
-                  <ChatThreadFooter
-                    events={footerEvents}
-                    isPromptPending={isPromptPending}
-                    promptStartedAt={promptStartedAt}
-                    task={task}
-                    taskId={taskId}
-                  />
-                </>
-              }
-            />
-            <ThreadKeyboardNav
-              items={items}
-              jumpPickerOpen={jumpPickerOpen}
-              setJumpPickerOpen={setJumpPickerOpen}
-              keyboardFocusedMessageId={keyboardFocusedMessageId}
-              setKeyboardFocusedMessageId={setKeyboardFocusedMessageId}
-              promptRecallRef={promptRecallRef}
-            />
+            {virtualized ? (
+              <VirtualThreadScrollBody
+                items={items}
+                flatRows={flatRows}
+                renderRow={renderWindowedRow}
+                onUserInteract={clearKeyboardFocus}
+                footer={footer}
+                renderNav={renderNav}
+                resumeRef={threadResumeRef}
+              />
+            ) : (
+              <>
+                <ThreadScrollBody
+                  items={items}
+                  rows={rows}
+                  renderItem={renderItem}
+                  keyboardFocusedMessageId={keyboardFocusedMessageId}
+                  onUserInteract={clearKeyboardFocus}
+                  footer={footer}
+                  resumeStateRef={threadResumeRef}
+                />
+                {renderNav()}
+              </>
+            )}
           </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..46fa6131f3
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/VirtualThreadScrollBody.tsx
@@ -0,0 +1,482 @@
+import {
+  ChatMessageScroller,
+  ChatMessageScrollerButton,
+  ChatMessageScrollerContent,
+  ChatMessageScrollerViewport,
+} 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 { 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, used to derive the sticky-header anchor. */
+interface UserRow {
+  id: 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[],
+  totalSize: number,
+) {
+  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, 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 () => {
+      if (frameRef.current != null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [schedule, totalSize]);
+
+  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]);
+}
+
+/**
+ * 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.
+ */
+export function VirtualThreadScrollBody({
+  items,
+  flatRows,
+  renderRow,
+  footer,
+  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;
+  /** 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 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, 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 totalSize = virtualizer.getTotalSize();
+
+  const { state: stickyState, schedule: scheduleStickyRecompute } =
+    useStickyAnchor(virtualizer, viewportRef, userRows, totalSize);
+
+  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]);
+
+  useFollowBottom({
+    virtualizer,
+    totalSize,
+    items,
+    isAtBottomRef,
+    settleAtEnd,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  return (
+    <>
+      <ChatMessageScroller
+        className="group/thread"
+        onPointerDownCapture={onUserInteract}
+      >
+        <VirtualStickyHeader
+          items={items}
+          anchorId={stickyState.anchorId}
+          offscreen={stickyState.offscreen}
+          onJump={jumpToMessage}
+        />
+        <ChatMessageScrollerViewport ref={viewportRef} 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 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.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..2b713eb735
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/chat-thread/threadVirtualization.ts
@@ -0,0 +1,169 @@
+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.
+ *
+ * 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.
+ *
+ * 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
+ * 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 = 250;
+
+/**
+ * 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
+ * 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 };
+}