diff --git a/apps/code/snapshots.yml b/apps/code/snapshots.yml
index a607126f14..5d93040e53 100644
--- a/apps/code/snapshots.yml
+++ b/apps/code/snapshots.yml
@@ -344,14 +344,6 @@ snapshots:
         hash: v1.k4693efd2.602ee87d6d7a745d4b09d9e49bd12a70e52299b78ca97a48b5ca73a01532d801.F_1XKDzCxzMm_opEt9FvzczBb_2n-vyvOyGFXHGJmTk
     features-sessions-conversationview--with-pending-prompt--light:
         hash: v1.k4693efd2.1636dfc3ee0dd9d28065166f2fff0193f2d499692c74749d3afa7585aae898b5.YxTPa4CsqI2YuGLUdck8340ITZQrpna_C6z-SgII4Ws
-    features-sessions-scrollbarrail--pure--dark:
-        hash: v1.k4693efd2.6baec21b1942848a3a376d2b90ca106b2c1b94de74382b4cd05673695d2649ee.UDDPtLDf1J2E3d3Oiy9is77Nm5xRSIfB7q5z0uUZRSQ
-    features-sessions-scrollbarrail--pure--light:
-        hash: v1.k4693efd2.33f02943fdbb1ea9774881f8909b580ab03ba02749614c533af1bf51dd817dca.ieP2bhDz0U_PTB4M6Zplvit0XlSTFiUn083GYBFNuC0
-    features-sessions-scrollbarrail--scrollable-conversation--dark:
-        hash: v1.k4693efd2.203b62b52d6365d6ec222f7529c35b3f46b17cd07ca792a8ce2de594af4d589b.3dfpnVM8yxor1PNO5aPk0pxn5THZjK4otA6mbz3XhtA
-    features-sessions-scrollbarrail--scrollable-conversation--light:
-        hash: v1.k4693efd2.fa7ef9cbdb09aef6108efcd3606cee32d889b3ad3b8f8be1ac637aed4e80cc72.0XcIKzM-sZHVG9hTZkAHdnBIPSrBiKmjq56QRQ6nasc
     features-sessions-toolcallblock--create-new-file--dark:
         hash: v1.k4693efd2.8847f96037682460aba47f0e0f5113037918235fc98596933f2d1d06fd6f8f92.SHetexoVOtozsZGZQMcVbmpBlbk7M5D5Q0R_TJvPnyc
     features-sessions-toolcallblock--create-new-file--light:
diff --git a/packages/ui/src/features/sessions/components/ConversationView.tsx b/packages/ui/src/features/sessions/components/ConversationView.tsx
index eed2c93f66..5a049e930a 100644
--- a/packages/ui/src/features/sessions/components/ConversationView.tsx
+++ b/packages/ui/src/features/sessions/components/ConversationView.tsx
@@ -34,8 +34,6 @@ import type { CollapseMode } from "@posthog/ui/features/sessions/components/new-
 import { createIncrementalThreadGrouper } from "@posthog/ui/features/sessions/components/new-thread/incrementalThreadGrouping";
 import { ToolCallGroupChip } from "@posthog/ui/features/sessions/components/new-thread/ToolCallGroupChip";
 import { SessionFooter } from "@posthog/ui/features/sessions/components/SessionFooter";
-import { MessageScrollbarRail } from "@posthog/ui/features/sessions/components/scrollbar-rail/MessageScrollbarRail";
-import { useMessageRailMarkers } from "@posthog/ui/features/sessions/components/scrollbar-rail/useMessageRailMarkers";
 import {
   type RenderItem,
   SessionUpdateView,
@@ -75,8 +73,8 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useReducer,
   useRef,
+  useState,
 } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -108,57 +106,6 @@ export interface ConversationViewProps {
   promptRecallRef?: RefObject<PromptRecallHandler | null>;
 }
 
-interface ConversationViewState {
-  showScrollButton: boolean;
-  jumpPickerOpen: boolean;
-  keyboardFocusedMessageId: string | null;
-  scrollElements: {
-    scrollEl: HTMLElement | null;
-    contentEl: HTMLElement | null;
-  };
-}
-
-type ConversationViewAction =
-  | { type: "set-show-scroll-button"; value: boolean }
-  | { type: "set-jump-picker-open"; value: boolean }
-  | { type: "set-keyboard-focused-message"; value: string | null }
-  | {
-      type: "set-scroll-elements";
-      value: ConversationViewState["scrollElements"];
-    };
-
-const INITIAL_CONVERSATION_VIEW_STATE: ConversationViewState = {
-  showScrollButton: false,
-  jumpPickerOpen: false,
-  keyboardFocusedMessageId: null,
-  scrollElements: { scrollEl: null, contentEl: null },
-};
-
-function conversationViewReducer(
-  state: ConversationViewState,
-  action: ConversationViewAction,
-): ConversationViewState {
-  switch (action.type) {
-    case "set-show-scroll-button":
-      return state.showScrollButton === action.value
-        ? state
-        : { ...state, showScrollButton: action.value };
-    case "set-jump-picker-open":
-      return state.jumpPickerOpen === action.value
-        ? state
-        : { ...state, jumpPickerOpen: action.value };
-    case "set-keyboard-focused-message":
-      return state.keyboardFocusedMessageId === action.value
-        ? state
-        : { ...state, keyboardFocusedMessageId: action.value };
-    case "set-scroll-elements":
-      return state.scrollElements.scrollEl === action.value.scrollEl &&
-        state.scrollElements.contentEl === action.value.contentEl
-        ? state
-        : { ...state, scrollElements: action.value };
-  }
-}
-
 export function ConversationView({
   events,
   isPromptPending,
@@ -187,10 +134,7 @@ export function ConversationView({
 
   const listRef = useRef<VirtualizedListHandle>(null);
   const isAtBottomRef = useRef(true);
-  const [viewState, dispatchViewState] = useReducer(
-    conversationViewReducer,
-    INITIAL_CONVERSATION_VIEW_STATE,
-  );
+  const [showScrollButton, setShowScrollButton] = useState(false);
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const showDebugLogs = debugLogsCloudRuns;
 
@@ -225,16 +169,14 @@ export function ConversationView({
   }
   const firstUserMessageId = firstUserMessageIdRef.current;
 
-  const initialItemIdsRef = useRef<Set<string> | null>(null);
-  if (initialItemIdsRef.current === null) {
-    initialItemIdsRef.current = new Set<string>();
-    for (const item of conversationItems) {
-      if (item.type === "user_message") {
-        initialItemIdsRef.current.add(item.id);
-      }
-    }
-  }
-  const initialItemIds = initialItemIdsRef.current;
+  const [initialItemIds] = useState(
+    () =>
+      new Set(
+        conversationItems
+          .filter((i) => i.type === "user_message")
+          .map((i) => i.id),
+      ),
+  );
 
   const pendingPermissions = usePendingPermissionsForTask(taskId ?? "");
   const pendingPermissionsCount = pendingPermissions.size;
@@ -293,10 +235,6 @@ export function ConversationView({
         id != null ? itemIdToRowIndexRef.current.get(id) : undefined;
       listRef.current?.scrollToIndex(rowIdx ?? index);
     },
-    // Search doesn't read scroll/content geometry, so these forward to the real
-    // handle purely to satisfy the (now-extended) VirtualizedListHandle shape.
-    getScrollElement: () => listRef.current?.getScrollElement() ?? null,
-    getContentElement: () => listRef.current?.getContentElement() ?? null,
   });
 
   const search = useConversationSearch({
@@ -305,8 +243,10 @@ export function ConversationView({
     listRef: searchListRef,
   });
 
-  const { jumpPickerOpen, keyboardFocusedMessageId, scrollElements } =
-    viewState;
+  const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
+  const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
+    string | null
+  >(null);
 
   const userMessages = useMemo(() => {
     const result: Array<{ id: string; index: number; content: string }> = [];
@@ -352,10 +292,7 @@ export function ConversationView({
       if (!nextMessage) return;
 
       useSettingsStore.getState().markHintLearned(PROMPT_RECALL_HINT_KEY);
-      dispatchViewState({
-        type: "set-keyboard-focused-message",
-        value: nextMessage.id,
-      });
+      setKeyboardFocusedMessageId(nextMessage.id);
       scrollToUserMessage(nextMessage.id, nextMessage.index);
     },
     [keyboardFocusedMessageId, userMessages, scrollToUserMessage],
@@ -363,11 +300,7 @@ export function ConversationView({
 
   useHotkeys(
     SHORTCUTS.MESSAGE_JUMP,
-    () =>
-      dispatchViewState({
-        type: "set-jump-picker-open",
-        value: !jumpPickerOpen,
-      }),
+    () => setJumpPickerOpen((prev) => !prev),
     THREAD_HOTKEY_OPTIONS,
   );
 
@@ -384,73 +317,34 @@ export function ConversationView({
   );
 
   const clearKeyboardFocus = useCallback(() => {
-    dispatchViewState({ type: "set-keyboard-focused-message", value: null });
+    setKeyboardFocusedMessageId(null);
   }, []);
 
   const handleJumpToMessage = useCallback(
     (id: string) => {
       const message = userMessages.find((entry) => entry.id === id);
       if (!message) return;
-      dispatchViewState({ type: "set-keyboard-focused-message", value: id });
+      setKeyboardFocusedMessageId(id);
       scrollToUserMessage(id, message.index);
     },
     [userMessages, scrollToUserMessage],
   );
 
-  // The scrollbar marker rail needs the VirtualizedList's scroll + content
-  // elements. Resolve them from the list ref callback so the rail renders as
-  // soon as the imperative handle is attached, without mount-time state setup.
-  const setListRef = useCallback((handle: VirtualizedListHandle | null) => {
-    listRef.current = handle;
-    dispatchViewState({
-      type: "set-scroll-elements",
-      value: {
-        scrollEl: handle?.getScrollElement() ?? null,
-        contentEl: handle?.getContentElement() ?? null,
-      },
-    });
-  }, []);
-
-  const railUserMessages = useMemo(
-    () =>
-      userMessages.map((m) => ({
-        id: m.id,
-        content: m.content,
-        index: m.index,
-      })),
-    [userMessages],
-  );
-  const railMarkers = useMessageRailMarkers({
-    contentEl: scrollElements.contentEl,
-    scrollEl: scrollElements.scrollEl,
-    userMessages: railUserMessages,
-    onJump: (id) => {
-      const message = userMessages.find((entry) => entry.id === id);
-      if (!message) return;
-      dispatchViewState({ type: "set-keyboard-focused-message", value: id });
-      scrollToUserMessage(id, message.index);
-    },
-    activeId: keyboardFocusedMessageId,
-  });
-
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     isAtBottomRef.current = isAtBottom;
-    dispatchViewState({
-      type: "set-show-scroll-button",
-      value: !isAtBottom,
-    });
+    setShowScrollButton(!isAtBottom);
   }, []);
 
   const scrollToBottom = useCallback(() => {
     listRef.current?.scrollToBottom();
-    dispatchViewState({ type: "set-show-scroll-button", value: false });
+    setShowScrollButton(false);
   }, []);
 
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (!document.hidden && isAtBottomRef.current) {
         listRef.current?.scrollToBottom();
-        dispatchViewState({ type: "set-show-scroll-button", value: false });
+        setShowScrollButton(false);
       }
     };
 
@@ -607,16 +501,14 @@ export function ConversationView({
 
         <MessageJumpPicker
           open={jumpPickerOpen}
-          onOpenChange={(open) =>
-            dispatchViewState({ type: "set-jump-picker-open", value: open })
-          }
+          onOpenChange={setJumpPickerOpen}
           items={items}
           onJumpToMessage={handleJumpToMessage}
         />
 
         <SessionTaskIdProvider taskId={taskId}>
           <VirtualizedList<ThreadRow>
-            ref={setListRef}
+            ref={listRef}
             items={threadRows}
             getItemKey={getRowKey}
             renderItem={renderRow}
@@ -629,8 +521,7 @@ export function ConversationView({
             scrollX={scrollX}
           />
         </SessionTaskIdProvider>
-        <MessageScrollbarRail markers={railMarkers} />
-        {viewState.showScrollButton && (
+        {showScrollButton && (
           <Box className="absolute right-6 bottom-4 z-10">
             <Tooltip>
               <TooltipTrigger
diff --git a/packages/ui/src/features/sessions/components/VirtualizedList.tsx b/packages/ui/src/features/sessions/components/VirtualizedList.tsx
index 1e95107336..ef5ae0e174 100644
--- a/packages/ui/src/features/sessions/components/VirtualizedList.tsx
+++ b/packages/ui/src/features/sessions/components/VirtualizedList.tsx
@@ -35,14 +35,6 @@ interface VirtualizedListProps<T> {
 export interface VirtualizedListHandle {
   scrollToBottom: () => void;
   scrollToIndex: (index: number) => void;
-  /** The scrolling element (the `overflow-y-auto` viewport). Exposed so a
-   * scrollbar marker rail can read `scrollTop`/`scrollHeight` and refresh on
-   * scroll. `null` until the list mounts. */
-  getScrollElement: () => HTMLDivElement | null;
-  /** The inner content element whose height == the virtual total size. Rows
-   * (and their `data-conversation-item-id` stamps) live inside this, so a
-   * marker rail measures row offsets against it. `null` until the list mounts. */
-  getContentElement: () => HTMLDivElement | null;
 }
 
 const AT_BOTTOM_THRESHOLD = 50;
@@ -71,7 +63,6 @@ function VirtualizedListInner<T>(
   ref: React.ForwardedRef<VirtualizedListHandle>,
 ) {
   const parentRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
   const footerRef = useRef<HTMLDivElement>(null);
   const initializedRef = useRef(false);
   const isAtBottomRef = useRef(true);
@@ -165,8 +156,6 @@ function VirtualizedListInner<T>(
         isAtBottomRef.current = false;
         virtualizer.scrollToIndex(index, { align: "center" });
       },
-      getScrollElement: () => parentRef.current,
-      getContentElement: () => contentRef.current,
     }),
     [virtualizer, settleAtEnd],
   );
@@ -269,7 +258,6 @@ function VirtualizedListInner<T>(
         style={{ scrollbarGutter: "stable" }}
       >
         <div
-          ref={contentRef}
           style={{
             height: totalSize,
             position: "relative",
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..5e1fc63c67 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -57,8 +57,6 @@ import { usePromptRecallSource } from "@posthog/ui/features/sessions/components/
 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";
-import { MessageScrollbarRail } from "@posthog/ui/features/sessions/components/scrollbar-rail/MessageScrollbarRail";
-import { useMessageRailMarkers } from "@posthog/ui/features/sessions/components/scrollbar-rail/useMessageRailMarkers";
 import { extractCanvasInstructions } from "@posthog/ui/features/sessions/components/session-update/canvasInstructions";
 import { extractChannelContext } from "@posthog/ui/features/sessions/components/session-update/channelContext";
 import { extractCustomInstructions } from "@posthog/ui/features/sessions/components/session-update/customInstructions";
@@ -952,10 +950,6 @@ function ThreadScrollBody({
     >
       <StickyHeaderOverlay items={items} />
       <ThreadAutoFollow items={items} />
-      <ThreadScrollbarRail
-        items={items}
-        keyboardFocusedMessageId={keyboardFocusedMessageId}
-      />
       <ChatMessageScrollerViewport>
         <ChatMessageScrollerContent
           className="gap-4 py-4 pb-8"
@@ -984,103 +978,6 @@ function ThreadScrollBody({
   );
 }
 
-/**
- * Scrollbar marker rail for the (non-virtualized) ChatThread. One darker marker
- * per user message, positioned by that message's offset within the scroller;
- * click jumps to it (`scrollToMessage`), hover shows the first few words.
- *
- * Locates the quill scroller elements at runtime via a hidden probe (the same
- * `closest('[data-slot="chat-message-scroller"]')` pattern `StickyHeaderOverlay`
- * and `ThreadAutoFollow` use), since they're owned by quill and not handed to us
- * as refs. The viewport is the scroll element; the inner `ChatMessageScrollerContent`
- * is the content element (rows are its children, so their offsets within it are
- * scroll-invariant).
- */
-function ThreadScrollbarRail({
-  items,
-  keyboardFocusedMessageId,
-}: {
-  items: ConversationItem[];
-  keyboardFocusedMessageId?: string | null;
-}) {
-  const { scrollToMessage } = useChatMessageScroller();
-  const probeRef = useRef<HTMLSpanElement>(null);
-  const [els, setEls] = useState<{
-    scrollEl: HTMLElement | null;
-    contentEl: HTMLElement | null;
-  }>({ scrollEl: null, contentEl: null });
-
-  useLayoutEffect(() => {
-    const resolve = (): {
-      scrollEl: HTMLElement | null;
-      contentEl: HTMLElement | null;
-    } => {
-      const scroller = probeRef.current?.closest(
-        '[data-slot="chat-message-scroller"]',
-      );
-      return {
-        scrollEl:
-          (scroller?.querySelector(
-            '[data-slot="chat-message-scroller-viewport"]',
-          ) as HTMLElement | null) ?? null,
-        contentEl:
-          (scroller?.querySelector(
-            '[data-slot="chat-message-scroller-content"]',
-          ) as HTMLElement | null) ?? null,
-      };
-    };
-    const found = resolve();
-    setEls((prev) =>
-      prev.scrollEl === found.scrollEl && prev.contentEl === found.contentEl
-        ? prev
-        : found,
-    );
-    if (!found.scrollEl || !found.contentEl) {
-      // Re-resolve once the scroller's inner elements have mounted.
-      const raf = requestAnimationFrame(() => {
-        const again = resolve();
-        setEls((prev) =>
-          prev.scrollEl === again.scrollEl && prev.contentEl === again.contentEl
-            ? prev
-            : again,
-        );
-      });
-      return () => cancelAnimationFrame(raf);
-    }
-    return;
-  }, []);
-
-  const userMessages = useMemo(
-    () =>
-      items
-        .map((item, index) =>
-          item.type === "user_message"
-            ? { id: item.id, content: item.content, index }
-            : null,
-        )
-        .filter(
-          (x): x is { id: string; content: string; index: number } => x != null,
-        ),
-    [items],
-  );
-
-  const railMarkers = useMessageRailMarkers({
-    contentEl: els.contentEl,
-    scrollEl: els.scrollEl,
-    userMessages,
-    onJump: (id) => scrollToMessage(id),
-    activeId: keyboardFocusedMessageId,
-    rowAttribute: "data-message-id",
-  });
-
-  return (
-    <>
-      <span ref={probeRef} className="hidden" aria-hidden="true" />
-      <MessageScrollbarRail markers={railMarkers} />
-    </>
-  );
-}
-
 /**
  * Thread renderer built on the ChatX (quill) primitives.
  *
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.stories.tsx b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.stories.tsx
deleted file mode 100644
index 904b4c5c83..0000000000
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.stories.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { MessageScrollbarRail } from "@posthog/ui/features/sessions/components/scrollbar-rail/MessageScrollbarRail";
-import type { MessageRailMarker } from "@posthog/ui/features/sessions/components/scrollbar-rail/messageRailTypes";
-import { useMessageRailMarkers } from "@posthog/ui/features/sessions/components/scrollbar-rail/useMessageRailMarkers";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useCallback, useRef, useState } from "react";
-
-/**
- * Stories for the conversation scrollbar marker rail.
- *
- * `Pure` is the rail in isolation with a hand-built marker set (no scroll wiring)
- * — useful for eyeballing marker sizing / spacing / active state.
- *
- * `ScrollableConversation` is the real experience: a synthetic transcript that
- * scrolls, wired through `useMessageRailMarkers`, so you can scroll, click a
- * marker to jump to its message, and hover one to see its first few words.
- */
-const meta: Meta<typeof MessageScrollbarRail> = {
-  title: "Features/Sessions/ScrollbarRail",
-  component: MessageScrollbarRail,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof MessageScrollbarRail>;
-
-const ACCENT = "var(--accent-9)";
-
-function marker(overrides: Partial<MessageRailMarker>): MessageRailMarker {
-  return {
-    id: overrides.id ?? "m1",
-    topPct: overrides.topPct ?? 0,
-    heightPct: overrides.heightPct ?? 0.04,
-    label: overrides.label ?? "first few words",
-    active: overrides.active,
-    onClick: overrides.onClick ?? (() => {}),
-  };
-}
-
-export const Pure: Story = {
-  render: () => (
-    <div className="flex h-[90vh] items-center justify-center bg-(--gray-1)">
-      {/* A fixed-height box so the rail's `h-full` has something to fill. */}
-      <div className="relative h-[520px] w-[440px] rounded-(--radius-3) border border-(--gray-4) bg-(--gray-2)">
-        <MessageScrollbarRail
-          markers={[
-            marker({
-              id: "m1",
-              topPct: 0,
-              label: "How do I set up the dev env?",
-            }),
-            marker({
-              id: "m2",
-              topPct: 0.52,
-              label: "Add a marker to the scrollbar for my messages",
-              active: true,
-            }),
-          ]}
-        />
-        {/* Caption so the rail (8px, far right) isn't the only thing on screen. */}
-        <div className="flex h-full items-center justify-center px-12 text-center">
-          <p className="text-(--gray-10) text-[13px] leading-relaxed">
-            Each human message has one marker in the scrollbar gutter. Hover a
-            marker to preview the message; click to jump. The accent-colored
-            marker is active.
-          </p>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-/** A synthetic transcript used by the scrollable story. Each entry is one user
- * message followed by a tall agent reply, so there's something to scroll. */
-interface TranscriptEntry {
-  id: string;
-  prompt: string;
-  reply: string[];
-}
-
-function buildTranscript(): TranscriptEntry[] {
-  const prompts = [
-    "How do I set up the dev environment for this repo?",
-    "Add a darker marker to the scrollbar where my messages are",
-  ];
-  return prompts.map((prompt, i) => ({
-    id: `user-${i}`,
-    prompt,
-    reply: Array.from(
-      { length: 10 },
-      (_, paragraph) =>
-        `Response paragraph ${paragraph + 1}. Here's a thorough answer to "${prompt}" with enough detail to make the conversation scroll naturally.`,
-    ),
-  }));
-}
-
-/** Callback-ref helper: forwards the element to a state setter once attached. */
-function useRefState<T extends HTMLElement>() {
-  const [el, setEl] = useState<T | null>(null);
-  const ref = useCallback((node: T | null) => setEl(node), []);
-  return [el, ref] as const;
-}
-
-/** The scrollable transcript: a tall content element with `data-conversation-item-id`
- * rows, plus the rail wired through `useMessageRailMarkers`. Mirrors how the real
- * `ConversationView` mounts the rail (the content element is the measured offset
- * parent; the scroll element is the `overflow-y-auto` viewport). */
-function ScrollableConversationDemo() {
-  const transcript = useRef(buildTranscript()).current;
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  const [scrollEl, scrollRef] = useRefState<HTMLDivElement>();
-  const [contentEl, contentRef] = useRefState<HTMLDivElement>();
-
-  const userMessages = useRef(
-    transcript.map((entry, index) => ({
-      id: entry.id,
-      content: entry.prompt,
-      index,
-    })),
-  ).current;
-
-  const onJump = useCallback(
-    (id: string) => {
-      setActiveId(id);
-      const row = contentEl?.querySelector(
-        `[data-conversation-item-id="${CSS.escape(id)}"]`,
-      ) as HTMLElement | null;
-      row?.scrollIntoView({ block: "start", behavior: "smooth" });
-    },
-    [contentEl],
-  );
-
-  const markers = useMessageRailMarkers({
-    contentEl,
-    scrollEl,
-    userMessages,
-    onJump,
-    activeId,
-  });
-
-  return (
-    <div className="flex h-[90vh] flex-col bg-background">
-      <div className="border-(--gray-4) border-b px-4 py-2">
-        <span className="text-(--gray-11) text-[13px]">
-          Scroll the transcript, then click a marker in the scrollbar to jump to
-          that message, or hover one for a preview.
-        </span>
-      </div>
-      <div className="relative min-h-0 flex-1">
-        {/* Pin the scroll viewport to this bounded flex child, matching the real
-            ConversationView. Keeping the viewport out of normal flow prevents
-            the long mock transcript from making the rail content-height and
-            spreading most markers below the captured scene. `scrollbar-gutter:
-            stable` reserves the gutter the rail sits over. */}
-        <div
-          ref={scrollRef}
-          className="scroll-mask-8 absolute inset-0 overflow-y-auto"
-          style={{ scrollbarGutter: "stable" }}
-        >
-          <div ref={contentRef} className="relative">
-            {transcript.map((entry) => (
-              <div key={entry.id} className="mx-auto max-w-[640px] px-4 py-3">
-                <div
-                  data-conversation-item-id={entry.id}
-                  className="rounded-(--radius-2) px-3 py-2 text-[13px] text-white"
-                  style={{ backgroundColor: ACCENT }}
-                >
-                  {entry.prompt}
-                </div>
-                <div className="mt-2 space-y-3 text-(--gray-11) text-[13px] leading-relaxed">
-                  {entry.reply.map((paragraph) => (
-                    <p key={paragraph}>{paragraph}</p>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <MessageScrollbarRail markers={markers} />
-      </div>
-    </div>
-  );
-}
-
-export const ScrollableConversation: Story = {
-  render: () => <ScrollableConversationDemo />,
-};
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.test.tsx b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.test.tsx
deleted file mode 100644
index f27597709b..0000000000
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.test.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { MessageScrollbarRail } from "./MessageScrollbarRail";
-import {
-  MESSAGE_RAIL_LABEL_MAX_LENGTH,
-  type MessageRailMarker,
-  truncateMessageLabel,
-} from "./messageRailTypes";
-
-describe("truncateMessageLabel", () => {
-  it("collapses newlines and trims", () => {
-    expect(truncateMessageLabel("  hello\n\n  world  ", 80)).toBe(
-      "hello world",
-    );
-  });
-
-  it("collapses runs of spaces/tabs to one space", () => {
-    expect(truncateMessageLabel("hello\t\t   world", 80)).toBe("hello world");
-  });
-
-  it("returns short text unchanged", () => {
-    expect(truncateMessageLabel("hi there", 80)).toBe("hi there");
-  });
-
-  it("appends an ellipsis past the limit", () => {
-    const text = "a".repeat(MESSAGE_RAIL_LABEL_MAX_LENGTH + 10);
-    const out = truncateMessageLabel(text, MESSAGE_RAIL_LABEL_MAX_LENGTH);
-    expect(out.length).toBe(MESSAGE_RAIL_LABEL_MAX_LENGTH + 1);
-    expect(out.endsWith("…")).toBe(true);
-  });
-});
-
-function marker(overrides: Partial<MessageRailMarker>): MessageRailMarker {
-  return {
-    id: overrides.id ?? "m1",
-    topPct: overrides.topPct ?? 0,
-    heightPct: overrides.heightPct ?? 0.05,
-    label: overrides.label ?? "first few words",
-    active: overrides.active,
-    onClick: overrides.onClick ?? vi.fn(),
-  };
-}
-
-describe("MessageScrollbarRail", () => {
-  it("renders nothing when there are no markers", () => {
-    const { container } = render(<MessageScrollbarRail markers={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it("renders one marker button per user message", () => {
-    const { container } = render(
-      <MessageScrollbarRail
-        markers={[
-          marker({ id: "m1", topPct: 0, label: "hello" }),
-          marker({ id: "m2", topPct: 0.5, label: "world" }),
-        ]}
-      />,
-    );
-    // The rail is aria-hidden (the messages are already accessible in the
-    // transcript), so query buttons within the container rather than by role.
-    const buttons = container.querySelectorAll("button");
-    expect(buttons).toHaveLength(2);
-  });
-
-  it("positions each marker at its fractional top offset", () => {
-    const { container } = render(
-      <MessageScrollbarRail
-        markers={[
-          marker({ id: "m1", topPct: 0.25 }),
-          marker({ id: "m2", topPct: 0.75 }),
-        ]}
-      />,
-    );
-    const buttons = container.querySelectorAll("button");
-    expect(buttons[0].getAttribute("style")).toContain("top: 25%");
-    expect(buttons[1].getAttribute("style")).toContain("top: 75%");
-  });
-
-  it("calls onClick when a marker is clicked", () => {
-    const onClick = vi.fn();
-    const { container } = render(
-      <MessageScrollbarRail markers={[marker({ id: "m1", onClick })]} />,
-    );
-    const button = container.querySelector("button");
-    expect(button).not.toBeNull();
-    button?.click();
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.tsx b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.tsx
deleted file mode 100644
index b1b5fd57da..0000000000
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { cn, Tooltip, TooltipContent, TooltipTrigger } from "@posthog/quill";
-import type { MessageRailMarker } from "./messageRailTypes";
-
-export interface MessageScrollbarRailProps {
-  /**
-   * Markers to render, one per user message. The rail is responsible only for
-   * painting them at the given fractional positions and wiring click/tooltip.
-   */
-  markers: MessageRailMarker[];
-  /**
-   * The browser scrollbar's intrinsic width in CSS pixels — used to size the
-   * gutter the rail sits in so it lines up with (and visually replaces) the
-   * native thumb. Defaults to 8px (the global `::-webkit-scrollbar` width).
-   */
-  scrollbarWidth?: number;
-  /** Extra classes on the rail root. */
-  className?: string;
-}
-
-/**
- * A vertical marker rail drawn in the scrollbar gutter of a conversation view.
- *
- * Each marker is positioned by a fractional `topPct` / `heightPct` of the
- * scrollable content height (the consumer converts measured row offsets into
- * those fractions). Clicking a marker calls its `onClick` (scroll-to-message);
- * hovering shows a tooltip with the message's first few words.
- *
- * The rail is `position: absolute` and pinned to the right edge, sized to the
- * native scrollbar gutter so it reads as part of the scrollbar rather than a
- * floating overlay. Its marker buttons are labelled so keyboard and assistive
- * technology users can jump directly to a message as well.
- */
-export function MessageScrollbarRail({
-  markers,
-  scrollbarWidth = 8,
-  className,
-}: MessageScrollbarRailProps) {
-  if (markers.length === 0) return null;
-
-  return (
-    <div
-      className={cn(
-        "pointer-events-none absolute top-0 right-0 z-10 h-full",
-        className,
-      )}
-      style={{ width: scrollbarWidth }}
-    >
-      {markers.map((marker) => (
-        <Tooltip key={marker.id}>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={marker.onClick}
-                aria-labelledby={`message-rail-marker-${marker.id}`}
-                // The marker button spans the rail's full width; its vertical
-                // position is the fractional offset of the message within the
-                // scrollable content.
-                className="pointer-events-auto absolute left-0 w-full cursor-pointer border-0 bg-transparent p-0"
-                style={{
-                  top: `${marker.topPct * 100}%`,
-                  height: `${Math.max(marker.heightPct * 100, 0.6)}%`,
-                }}
-              >
-                <span
-                  id={`message-rail-marker-${marker.id}`}
-                  className="sr-only"
-                >
-                  Jump to message: {marker.label}
-                </span>
-                <span
-                  className={cn(
-                    "block h-full w-full rounded-full transition-colors",
-                    marker.active
-                      ? "bg-(--accent-9)"
-                      : "bg-(--gray-10) hover:bg-(--gray-11)",
-                  )}
-                />
-              </button>
-            }
-          />
-          <TooltipContent side="left">{marker.label}</TooltipContent>
-        </Tooltip>
-      ))}
-    </div>
-  );
-}
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/messageRailTypes.ts b/packages/ui/src/features/sessions/components/scrollbar-rail/messageRailTypes.ts
deleted file mode 100644
index 4b45d1d68a..0000000000
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/messageRailTypes.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * A single marker drawn on the conversation scrollbar rail, one per user message.
- *
- * `topPct` / `heightPct` position the marker within the rail as a fraction of the
- * scrollable content's total height (0–1, relative to the inner content, not the
- * viewport). The rail converts these to absolute pixels on render.
- *
- * `onClick` scrolls the conversation to this message; `label` is the first few
- * words, shown as a hover tooltip.
- */
-export interface MessageRailMarker {
-  /** Stable id — also used as the React key and the tooltip anchor. */
-  id: string;
-  /** Top offset as a fraction (0–1) of total scrollable content height. */
-  topPct: number;
-  /** Marker height as a fraction (0–1) of total scrollable content height. */
-  heightPct: number;
-  /** Tooltip text — the first few words of the message. */
-  label: string;
-  /** Whether this message is currently the keyboard-focused one. */
-  active?: boolean;
-  /** Scrolls the conversation to this message. */
-  onClick: () => void;
-}
-
-/**
- * Truncate a message body to a single-line label suitable for a hover tooltip.
- * Collapses all runs of whitespace (newlines, tabs, multiple spaces) to a single
- * space, trims, and cuts with an ellipsis past `maxLength` — the same intent as
- * the `MessageJumpPicker` truncation but whitespace-normalized so indented or
- * multi-line prompts read cleanly on one line.
- */
-export function truncateMessageLabel(text: string, maxLength: number): string {
-  const singleLine = text.replace(/\s+/g, " ").trim();
-  if (singleLine.length <= maxLength) return singleLine;
-  return `${singleLine.slice(0, maxLength)}…`;
-}
-
-/** Default cap for the rail tooltip label. */
-export const MESSAGE_RAIL_LABEL_MAX_LENGTH = 80;
diff --git a/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts b/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
deleted file mode 100644
index 86d337ab82..0000000000
--- a/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  MESSAGE_RAIL_LABEL_MAX_LENGTH,
-  type MessageRailMarker,
-  truncateMessageLabel,
-} from "./messageRailTypes";
-
-interface UserMessageEntry {
-  id: string;
-  content: string;
-  /** Item index within the conversation — used to order markers. */
-  index: number;
-}
-
-interface MeasuredOffset {
-  top: number;
-  height: number;
-}
-
-/**
- * Drives the scrollbar marker rail for a conversation view.
- *
- * Returns the markers the rail should paint. It measures each rendered
- * user-message row's `offsetTop`/`offsetHeight` inside `contentEl` (the scroll
- * container's inner content element), persists those measurements in a ref so a
- * marker stays put once its row has rendered even after it scrolls out of view,
- * 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.)
- *
- * @param contentEl       The scroll container's inner content element (the tall
- *                        div whose height == total content height). Offsets are
- *                        read relative to it.
- * @param scrollEl        The scrolling element (has `scrollTop`/`scrollHeight`).
- *                        Used to trigger marker refresh on scroll. If omitted,
- *                        only mutation/resize trigger refresh.
- * @param userMessages    Ordered `{ id, content, index }` entries, one per user
- *                        message in the conversation.
- * @param onJump          Scrolls the conversation to the message with this id.
- * @param activeId        Currently keyboard-focused message id (highlighted).
- * @param rowAttribute    The data attribute stamped on each message row, used to
- *                        locate it in the DOM. Defaults to
- *                        `data-conversation-item-id` (the legacy view); the new
- *                        `ChatThread` uses `data-message-id`.
- */
-export function useMessageRailMarkers({
-  contentEl,
-  scrollEl,
-  userMessages,
-  onJump,
-  activeId,
-  rowAttribute = "data-conversation-item-id",
-}: {
-  contentEl: HTMLElement | null;
-  scrollEl: HTMLElement | null;
-  userMessages: readonly UserMessageEntry[];
-  onJump: (id: string) => void;
-  activeId?: string | null;
-  rowAttribute?: string;
-}): MessageRailMarker[] {
-  // Persisted measurements keyed by item id. Stable across renders; updated by
-  // the measure pass. Keeping them in a ref (not state) avoids re-renders on
-  // every scroll tick — a `version` counter triggers the one re-render we need.
-  const measuredRef = useRef<Map<string, MeasuredOffset>>(new Map());
-  const [version, setVersion] = useState(0);
-
-  const bump = useCallback(() => setVersion((v) => v + 1), []);
-
-  // Hold the latest inputs in refs so `measure` is referentially stable —
-  // otherwise a fresh `userMessages` array each render would tear down and
-  // rebuild the scroll/mutation/resize observers every render.
-  const contentElRef = useRef(contentEl);
-  contentElRef.current = contentEl;
-  const userMessagesRef = useRef(userMessages);
-  userMessagesRef.current = userMessages;
-  const rowAttributeRef = useRef(rowAttribute);
-  rowAttributeRef.current = rowAttribute;
-
-  // Re-measure rendered user-message rows and persist their offsets.
-  const measure = useCallback(() => {
-    const content = contentElRef.current;
-    if (!content) return;
-    let changed = false;
-    const map = measuredRef.current;
-    const attr = rowAttributeRef.current;
-    // Content's top in viewport coords; subtracting it from each row's top
-    // yields the row's position within the content (scroll-invariant, since
-    // both move together). `offsetTop` can't be used directly because virtual
-    // list rows live in a `transform`-ed wrapper that becomes the offset parent.
-    const contentTop = content.getBoundingClientRect().top;
-    // Collect all rendered rows in a single DOM pass and index them by id,
-    // rather than one `querySelector` per message: in the long threads this
-    // rail targets, a per-message query on every scroll frame is hundreds or
-    // thousands of synchronous DOM lookups. `querySelectorAll` walks the
-    // (virtualized, bounded) rendered set once.
-    const rowById = new Map<string, HTMLElement>();
-    for (const row of content.querySelectorAll<HTMLElement>(`[${attr}]`)) {
-      const id = row.getAttribute(attr);
-      if (id != null) rowById.set(id, row);
-    }
-    for (const entry of userMessagesRef.current) {
-      const row = rowById.get(entry.id);
-      if (!row) continue;
-      const rect = row.getBoundingClientRect();
-      const top = rect.top - contentTop;
-      const height = rect.height;
-      const prev = map.get(entry.id);
-      if (!prev || prev.top !== top || prev.height !== height) {
-        map.set(entry.id, { top, height });
-        changed = true;
-      }
-    }
-    if (changed) bump();
-  }, [bump]);
-
-  // Coalesce observer/scroll-driven measures to at most one per animation
-  // frame — a burst of scroll or mutation events within a frame only needs a
-  // single re-measure. Cancelled on unmount via the ref below.
-  const frameRef = useRef<number | null>(null);
-  const scheduleMeasure = useCallback(() => {
-    if (frameRef.current != null) return;
-    frameRef.current = requestAnimationFrame(() => {
-      frameRef.current = null;
-      measure();
-    });
-  }, [measure]);
-
-  // Refresh on scroll (positions change as the thumb moves) + on DOM mutation
-  // (rows entering/leaving the virtualization window) + on content resize.
-  useEffect(() => {
-    if (!contentEl) return;
-    // Measure synchronously on mount so markers paint on the first frame; later
-    // event-driven measures are frame-coalesced through `scheduleMeasure`.
-    measure();
-    const mutation = new MutationObserver(scheduleMeasure);
-    mutation.observe(contentEl, { childList: true, subtree: true });
-    const resize = new ResizeObserver(() => {
-      // Virtualized layout changes can move offscreen rows without remounting
-      // them. Their cached offsets are no longer trustworthy, so drop them and
-      // let the next marker build interpolate from the freshly measured rows.
-      // Keeping stale values here can place markers outside the content bounds.
-      if (measuredRef.current.size > 0) {
-        measuredRef.current.clear();
-        bump();
-      }
-      scheduleMeasure();
-    });
-    resize.observe(contentEl);
-    const scroll = scrollEl ?? contentEl;
-    scroll.addEventListener("scroll", scheduleMeasure, { passive: true });
-    return () => {
-      mutation.disconnect();
-      resize.disconnect();
-      scroll.removeEventListener("scroll", scheduleMeasure);
-      if (frameRef.current != null) {
-        cancelAnimationFrame(frameRef.current);
-        frameRef.current = null;
-      }
-    };
-  }, [contentEl, scrollEl, measure, scheduleMeasure, bump]);
-
-  // Drop stale ids (removed messages) so markers don't linger after compaction.
-  useEffect(() => {
-    const map = measuredRef.current;
-    const keep = new Set(userMessages.map((m) => m.id));
-    let changed = false;
-    for (const id of map.keys()) {
-      if (!keep.has(id)) {
-        map.delete(id);
-        changed = true;
-      }
-    }
-    if (changed) bump();
-  }, [userMessages, bump]);
-
-  // Build the markers: fractional position = measured offset / total content
-  // height. Unmeasured rows are interpolated between their nearest measured
-  // neighbours by array position.
-  const markers: MessageRailMarker[] = [];
-  if (contentEl && userMessages.length > 0) {
-    const total = contentEl.scrollHeight;
-    const map = measuredRef.current;
-
-    for (let i = 0; i < userMessages.length; i++) {
-      const entry = userMessages[i];
-      const measured = map.get(entry.id);
-      let top: number;
-      let height: number;
-      if (measured) {
-        top = measured.top;
-        height = measured.height;
-      } else {
-        const interp = interpolateOffset(userMessages, map, i);
-        top = interp.top;
-        height = interp.height;
-      }
-      markers.push({
-        id: entry.id,
-        topPct: total > 0 ? top / total : 0,
-        heightPct: total > 0 ? height / total : 0,
-        label: truncateMessageLabel(
-          entry.content,
-          MESSAGE_RAIL_LABEL_MAX_LENGTH,
-        ),
-        active: activeId === entry.id,
-        onClick: () => onJump(entry.id),
-      });
-    }
-  }
-
-  // `version` is read here so the hook re-runs the build above when measurements
-  // update. Without referencing it, TS would flag it unused; keep the reference.
-  void version;
-  return markers;
-}
-
-/** Estimate the offset of an unmeasured row by interpolating between its nearest
- * measured neighbours by array position. Falls back to the estimate-size heuristic
- * (a per-row fraction of total height) when there are no neighbours at all. */
-function interpolateOffset(
-  userMessages: readonly UserMessageEntry[],
-  measured: Map<string, MeasuredOffset>,
-  index: number,
-): MeasuredOffset {
-  // Walk outward from `index` to find the previous and next measured entries.
-  let prevIdx = -1;
-  for (let i = index - 1; i >= 0; i--) {
-    if (measured.has(userMessages[i].id)) {
-      prevIdx = i;
-      break;
-    }
-  }
-  let nextIdx = -1;
-  for (let i = index + 1; i < userMessages.length; i++) {
-    if (measured.has(userMessages[i].id)) {
-      nextIdx = i;
-      break;
-    }
-  }
-
-  const prev = prevIdx >= 0 ? measured.get(userMessages[prevIdx].id) : null;
-  const next = nextIdx >= 0 ? measured.get(userMessages[nextIdx].id) : null;
-  const ESTIMATE = 80;
-
-  if (prev && next && nextIdx > prevIdx) {
-    // Lerp between the two measured neighbours.
-    const span = nextIdx - prevIdx;
-    const t = (index - prevIdx) / span;
-    const top = prev.top + (next.top - prev.top) * t;
-    return { top, height: ESTIMATE };
-  }
-  if (prev) {
-    return {
-      top: prev.top + prev.height + (index - prevIdx) * ESTIMATE,
-      height: ESTIMATE,
-    };
-  }
-  if (next) {
-    return {
-      top: Math.max(0, next.top - (nextIdx - index) * ESTIMATE),
-      height: ESTIMATE,
-    };
-  }
-  return { top: index * ESTIMATE, height: ESTIMATE };
-}