diff --git a/apps/code/snapshots.yml b/apps/code/snapshots.yml
index 3147f9a2f7..40ce40c1b2 100644
--- a/apps/code/snapshots.yml
+++ b/apps/code/snapshots.yml
@@ -332,6 +332,14 @@ 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 5a049e930a..cb5dcea1a4 100644
--- a/packages/ui/src/features/sessions/components/ConversationView.tsx
+++ b/packages/ui/src/features/sessions/components/ConversationView.tsx
@@ -34,6 +34,8 @@ 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,
@@ -73,8 +75,8 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useReducer,
   useRef,
-  useState,
 } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -106,6 +108,57 @@ 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,
@@ -134,7 +187,10 @@ export function ConversationView({
 
   const listRef = useRef<VirtualizedListHandle>(null);
   const isAtBottomRef = useRef(true);
-  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [viewState, dispatchViewState] = useReducer(
+    conversationViewReducer,
+    INITIAL_CONVERSATION_VIEW_STATE,
+  );
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const showDebugLogs = debugLogsCloudRuns;
 
@@ -169,14 +225,11 @@ export function ConversationView({
   }
   const firstUserMessageId = firstUserMessageIdRef.current;
 
-  const [initialItemIds] = useState(
-    () =>
-      new Set(
-        conversationItems
-          .filter((i) => i.type === "user_message")
-          .map((i) => i.id),
-      ),
+  const initialItemIdsRef = useRef<Set<string> | null>(null);
+  initialItemIdsRef.current ??= new Set(
+    conversationItems.filter((i) => i.type === "user_message").map((i) => i.id),
   );
+  const initialItemIds = initialItemIdsRef.current;
 
   const pendingPermissions = usePendingPermissionsForTask(taskId ?? "");
   const pendingPermissionsCount = pendingPermissions.size;
@@ -235,6 +288,10 @@ 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({
@@ -243,10 +300,8 @@ export function ConversationView({
     listRef: searchListRef,
   });
 
-  const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
-  const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
-    string | null
-  >(null);
+  const { jumpPickerOpen, keyboardFocusedMessageId, scrollElements } =
+    viewState;
 
   const userMessages = useMemo(() => {
     const result: Array<{ id: string; index: number; content: string }> = [];
@@ -292,7 +347,10 @@ export function ConversationView({
       if (!nextMessage) return;
 
       useSettingsStore.getState().markHintLearned(PROMPT_RECALL_HINT_KEY);
-      setKeyboardFocusedMessageId(nextMessage.id);
+      dispatchViewState({
+        type: "set-keyboard-focused-message",
+        value: nextMessage.id,
+      });
       scrollToUserMessage(nextMessage.id, nextMessage.index);
     },
     [keyboardFocusedMessageId, userMessages, scrollToUserMessage],
@@ -300,7 +358,11 @@ export function ConversationView({
 
   useHotkeys(
     SHORTCUTS.MESSAGE_JUMP,
-    () => setJumpPickerOpen((prev) => !prev),
+    () =>
+      dispatchViewState({
+        type: "set-jump-picker-open",
+        value: !jumpPickerOpen,
+      }),
     THREAD_HOTKEY_OPTIONS,
   );
 
@@ -317,34 +379,73 @@ export function ConversationView({
   );
 
   const clearKeyboardFocus = useCallback(() => {
-    setKeyboardFocusedMessageId(null);
+    dispatchViewState({ type: "set-keyboard-focused-message", value: null });
   }, []);
 
   const handleJumpToMessage = useCallback(
     (id: string) => {
       const message = userMessages.find((entry) => entry.id === id);
       if (!message) return;
-      setKeyboardFocusedMessageId(id);
+      dispatchViewState({ type: "set-keyboard-focused-message", value: 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;
-    setShowScrollButton(!isAtBottom);
+    dispatchViewState({
+      type: "set-show-scroll-button",
+      value: !isAtBottom,
+    });
   }, []);
 
   const scrollToBottom = useCallback(() => {
     listRef.current?.scrollToBottom();
-    setShowScrollButton(false);
+    dispatchViewState({ type: "set-show-scroll-button", value: false });
   }, []);
 
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (!document.hidden && isAtBottomRef.current) {
         listRef.current?.scrollToBottom();
-        setShowScrollButton(false);
+        dispatchViewState({ type: "set-show-scroll-button", value: false });
       }
     };
 
@@ -501,14 +602,16 @@ export function ConversationView({
 
         <MessageJumpPicker
           open={jumpPickerOpen}
-          onOpenChange={setJumpPickerOpen}
+          onOpenChange={(open) =>
+            dispatchViewState({ type: "set-jump-picker-open", value: open })
+          }
           items={items}
           onJumpToMessage={handleJumpToMessage}
         />
 
         <SessionTaskIdProvider taskId={taskId}>
           <VirtualizedList<ThreadRow>
-            ref={listRef}
+            ref={setListRef}
             items={threadRows}
             getItemKey={getRowKey}
             renderItem={renderRow}
@@ -521,7 +624,8 @@ export function ConversationView({
             scrollX={scrollX}
           />
         </SessionTaskIdProvider>
-        {showScrollButton && (
+        <MessageScrollbarRail markers={railMarkers} />
+        {viewState.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 ef5ae0e174..1e95107336 100644
--- a/packages/ui/src/features/sessions/components/VirtualizedList.tsx
+++ b/packages/ui/src/features/sessions/components/VirtualizedList.tsx
@@ -35,6 +35,14 @@ 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;
@@ -63,6 +71,7 @@ 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);
@@ -156,6 +165,8 @@ function VirtualizedListInner<T>(
         isAtBottomRef.current = false;
         virtualizer.scrollToIndex(index, { align: "center" });
       },
+      getScrollElement: () => parentRef.current,
+      getContentElement: () => contentRef.current,
     }),
     [virtualizer, settleAtEnd],
   );
@@ -258,6 +269,7 @@ 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 75a79c707a..df83afcd19 100644
--- a/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
+++ b/packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx
@@ -57,6 +57,8 @@ 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";
@@ -955,6 +957,10 @@ function ThreadScrollBody({
     >
       <StickyHeaderOverlay items={items} />
       <ThreadAutoFollow items={items} />
+      <ThreadScrollbarRail
+        items={items}
+        keyboardFocusedMessageId={keyboardFocusedMessageId}
+      />
       <ChatMessageScrollerViewport>
         <ChatMessageScrollerContent
           className="gap-4 py-4 pb-8"
@@ -983,6 +989,103 @@ 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
new file mode 100644
index 0000000000..904b4c5c83
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.stories.tsx
@@ -0,0 +1,188 @@
+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
new file mode 100644
index 0000000000..f27597709b
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.test.tsx
@@ -0,0 +1,89 @@
+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
new file mode 100644
index 0000000000..b1b5fd57da
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/MessageScrollbarRail.tsx
@@ -0,0 +1,87 @@
+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
new file mode 100644
index 0000000000..4b45d1d68a
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/messageRailTypes.ts
@@ -0,0 +1,40 @@
+/**
+ * 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
new file mode 100644
index 0000000000..73993f6bda
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/scrollbar-rail/useMessageRailMarkers.ts
@@ -0,0 +1,261 @@
+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(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]);
+
+  // 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 };
+}