Add user-message marker rail to conversation scrollbar

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.65a8a9751978b1225ebcd43d2cf98fc9af4e08b360505f6341134b3b6f16bec1.A7iVr2e4YkBBM1Vh14gOW_miV7zmG8vny5n5FoM3MOI
+    features-sessions-scrollbarrail--pure--light:
+        hash: v1.k4693efd2.c08d498202dfe03b7eb796a373b695f2e213d48917e4440ad607f4ce6af02e2c.DWl3zrJX1AJEVdlcP2K0zl9wTzT-JbQ87NustHlt8KI
+    features-sessions-scrollbarrail--scrollable-conversation--dark:
+        hash: v1.k4693efd2.d063bb77a125bde7221b2ff96cc616aedf99128726bdfe8ecaf83d7631d49b99.kgO_IIZwLE5meW1Ju38huy1xcH-AyfF9t6M8ypLOIzg
+    features-sessions-scrollbarrail--scrollable-conversation--light:
+        hash: v1.k4693efd2.bef742a0769f0c76217537ba3e7b1e4fec91488b7749c39f80eddf690b37af8f.Fk7y9JBeORTnQJAlL0CAEntiC9gJC-6ThIMY_P5GIIo
     features-sessions-toolcallblock--create-new-file--dark:
         hash: v1.k4693efd2.8847f96037682460aba47f0e0f5113037918235fc98596933f2d1d06fd6f8f92.SHetexoVOtozsZGZQMcVbmpBlbk7M5D5Q0R_TJvPnyc
     features-sessions-toolcallblock--create-new-file--light:

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,
@@ -235,6 +237,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({
@@ -330,6 +336,54 @@ export function ConversationView({
     [userMessages, scrollToUserMessage],
   );
 
+  // The scrollbar marker rail needs the VirtualizedList's scroll + content
+  // elements. They're only available after mount, so resolve them into state from
+  // the imperative handle; the rail re-renders once they're populated. The list's
+  // internal refs are stable for its lifetime, so a mount-time resolve (with a
+  // rAF retry for the first paint where the ref isn't attached yet) is enough.
+  const [scrollElements, setScrollElements] = useState<{
+    scrollEl: HTMLElement | null;
+    contentEl: HTMLElement | null;
+  }>({ scrollEl: null, contentEl: null });
+  useEffect(() => {
+    const sync = () => {
+      const handle = listRef.current;
+      if (!handle) return;
+      const scrollEl = handle.getScrollElement();
+      const contentEl = handle.getContentElement();
+      setScrollElements((prev) =>
+        prev.scrollEl === scrollEl && prev.contentEl === contentEl
+          ? prev
+          : { scrollEl, contentEl },
+      );
+    };
+    sync();
+    const raf = requestAnimationFrame(sync);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  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;
+      setKeyboardFocusedMessageId(id);
+      scrollToUserMessage(id, message.index);
+    },
+    activeId: keyboardFocusedMessageId,
+  });
+
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     isAtBottomRef.current = isAtBottom;
     setShowScrollButton(!isAtBottom);
@@ -521,6 +575,7 @@ export function ConversationView({
             scrollX={scrollX}
           />
         </SessionTaskIdProvider>
+        <MessageScrollbarRail markers={railMarkers} />
         {showScrollButton && (
           <Box className="absolute right-6 bottom-4 z-10">
             <Tooltip>

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",