Standardize scrolling on TanStack Virtual API

Author: charlesvien

apps/twig/src/renderer/features/sessions/components/ConversationView.tsx

@@ -90,16 +90,27 @@ export function ConversationView({
   const { saveScrollPosition, getScrollPosition } = useSessionViewActions();
 
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const showScrollButtonRef = useRef(false);
   const hasRestoredScrollRef = useRef(false);
   const prevItemCountRef = useRef(0);
+  const prevPendingCountRef = useRef(0);
+  const prevEventsLengthRef = useRef(events.length);
 
   const queuedItems = useMemo<QueuedItem[]>(
-    () => queuedMessages.map((msg) => ({ type: "queued" as const, id: msg.id, message: msg })),
+    () =>
+      queuedMessages.map((msg) => ({
+        type: "queued" as const,
+        id: msg.id,
+        message: msg,
+      })),
     [queuedMessages],
   );
 
   const virtualizedItems = useMemo<VirtualizedItem[]>(
-    () => (queuedItems.length > 0 ? [...conversationItems, ...queuedItems] : conversationItems),
+    () =>
+      queuedItems.length > 0
+        ? [...conversationItems, ...queuedItems]
+        : conversationItems,
     [conversationItems, queuedItems],
   );
 
@@ -108,35 +119,37 @@ export function ConversationView({
 
     const savedPosition = getScrollPosition(taskId);
     if (savedPosition > 0) {
-      const virtualizer = listRef.current?.getVirtualizer();
-      if (virtualizer) {
-        virtualizer.scrollOffset = savedPosition;
-        hasRestoredScrollRef.current = true;
-      }
+      listRef.current?.scrollToOffset(savedPosition);
+      hasRestoredScrollRef.current = true;
     }
   }, [taskId, getScrollPosition]);
 
-  const isStreaming = lastTurn && !lastTurn.isComplete;
-
   useEffect(() => {
     const isNewContent = virtualizedItems.length > prevItemCountRef.current;
+    const isNewPending = pendingPermissionsCount > prevPendingCountRef.current;
+    const isNewEvents = events.length > prevEventsLengthRef.current;
     prevItemCountRef.current = virtualizedItems.length;
+    prevPendingCountRef.current = pendingPermissionsCount;
+    prevEventsLengthRef.current = events.length;
 
-    if (isNewContent && !showScrollButton) {
+    // Always force-scroll for new items or new permissions (needs attention)
+    if (isNewContent || isNewPending) {
       listRef.current?.scrollToBottom();
+      return;
     }
-  }, [virtualizedItems.length, showScrollButton]);
 
-  useEffect(() => {
-    if (isStreaming && !showScrollButton) {
+    // For streaming content growth, only scroll if user hasn't scrolled up
+    if (isNewEvents && !showScrollButtonRef.current) {
       listRef.current?.scrollToBottom();
     }
-  }, [isStreaming, showScrollButton]);
+  }, [events.length, virtualizedItems.length, pendingPermissionsCount]);
 
   const handleScroll = useCallback(
     (scrollOffset: number, scrollHeight: number, clientHeight: number) => {
       const distanceFromBottom = scrollHeight - scrollOffset - clientHeight;
-      setShowScrollButton(distanceFromBottom > SHOW_BUTTON_THRESHOLD);
+      const isScrolledUp = distanceFromBottom > SHOW_BUTTON_THRESHOLD;
+      showScrollButtonRef.current = isScrolledUp;
+      setShowScrollButton(isScrolledUp);
 
       if (taskId) {
         saveScrollPosition(taskId, scrollOffset);

apps/twig/src/renderer/features/sessions/components/VirtualizedList.tsx

@@ -1,7 +1,6 @@
 import {
   type ScrollToOptions,
   useVirtualizer,
-  type Virtualizer,
   type VirtualizerOptions,
 } from "@tanstack/react-virtual";
 import {
@@ -37,9 +36,9 @@ interface VirtualizedListProps<T> {
 
 export interface VirtualizedListHandle {
   scrollToIndex: (index: number, options?: ScrollToOptions) => void;
+  scrollToOffset: (offset: number, options?: ScrollToOptions) => void;
   scrollToBottom: () => void;
   measure: () => void;
-  getVirtualizer: () => Virtualizer<HTMLDivElement, Element>;
 }
 
 function VirtualizedListInner<T>(
@@ -75,18 +74,22 @@ function VirtualizedListInner<T>(
       : undefined,
   });
 
-  useImperativeHandle(ref, () => ({
-    scrollToIndex: (index, options) =>
-      virtualizer.scrollToIndex(index, options),
-    scrollToBottom: () => {
-      const el = scrollRef.current;
-      if (el) {
-        el.scrollTop = el.scrollHeight;
-      }
-    },
-    measure: () => virtualizer.measure(),
-    getVirtualizer: () => virtualizer,
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToIndex: (index, options) =>
+        virtualizer.scrollToIndex(index, options),
+      scrollToOffset: (offset, options) =>
+        virtualizer.scrollToOffset(offset, options),
+      scrollToBottom: () => {
+        if (items.length > 0) {
+          virtualizer.scrollToIndex(items.length - 1, { align: "end" });
+        }
+      },
+      measure: () => virtualizer.measure(),
+    }),
+    [virtualizer, items.length],
+  );
 
   useEffect(() => {
     if (autoScrollToBottom && items.length > 0) {