Fix terminal auto-scroll on agent switch (#9)

Co-authored-by: rokt-clayschubiner <[email protected]>

Author: cschubiner

src/renderer/components/ChatInterface.tsx

@@ -94,7 +94,7 @@ const ChatInterface: React.FC<Props> = ({
   const { formatted: commentsContext } = useTaskComments(task.id);
 
   // Auto-scroll to bottom when this task becomes active
-  useAutoScrollOnTaskSwitch(true, task.id);
+  const { scrollToBottom } = useAutoScrollOnTaskSwitch(true, task.id);
 
   // Load conversations when task changes
   useEffect(() => {
@@ -519,6 +519,15 @@ const ChatInterface: React.FC<Props> = ({
     prevAgentRef.current = agent;
   }, [agent]);
 
+  // When switching agents/conversations, keep the terminal view pinned to the bottom
+  // if the user was already near the bottom.
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      scrollToBottom({ onlyIfNearBottom: true });
+    }, 150);
+    return () => clearTimeout(timeout);
+  }, [agent, activeConversationId, scrollToBottom]);
+
   useEffect(() => {
     const installed = currentAgentStatus?.installed === true;
     setIsAgentInstalled(installed);

src/renderer/components/MultiAgentTask.tsx

@@ -445,7 +445,7 @@ const MultiAgentTask: React.FC<Props> = ({ task }) => {
     if (variants.length > 0 && activeTabIndex >= 0 && activeTabIndex < variants.length) {
       // Small delay to ensure the tab content is rendered
       const timeout = setTimeout(() => {
-        scrollToBottom({ onlyIfNearTop: true });
+        scrollToBottom({ onlyIfNearBottom: true });
         // Focus the active terminal when switching tabs
         focusVariantByIndex(activeTabIndex);
       }, 150);

src/renderer/hooks/useAutoScrollOnTaskSwitch.ts

@@ -5,18 +5,18 @@ import { useEffect, useRef, useCallback } from 'react';
  */
 type ScrollOptions = {
   /**
-   * Only scroll if the user is already near the top of the pane (avoids yanking them
+   * Only scroll if the user is already near the bottom of the pane (avoids yanking them
    * away from where they were reading).
    */
-  onlyIfNearTop?: boolean;
+  onlyIfNearBottom?: boolean;
 };
 
 export function useAutoScrollOnTaskSwitch(isActive: boolean, taskId: string | null) {
   const previousTaskIdRef = useRef<string | null>(null);
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const scrollToBottom = useCallback((options: ScrollOptions = {}) => {
-    const { onlyIfNearTop = true } = options;
+    const { onlyIfNearBottom = true } = options;
 
     // Restrict to terminal panes so we don't accidentally scroll unrelated panels.
     const selectors = [
@@ -35,10 +35,12 @@ export function useAutoScrollOnTaskSwitch(isActive: boolean, taskId: string | nu
         container.getClientRects().length > 0 &&
         container.clientHeight > 0;
       const hasScrollableContent = container.scrollHeight > container.clientHeight;
-      const nearTop = container.scrollTop <= 32;
+      const distanceFromBottom =
+        container.scrollHeight - (container.scrollTop + container.clientHeight);
+      const nearBottom = distanceFromBottom <= 32;
 
       if (!isVisible || !hasScrollableContent) return;
-      if (onlyIfNearTop && !nearTop) return;
+      if (onlyIfNearBottom && !nearBottom) return;
 
       container.scrollTo({
         top: container.scrollHeight,
@@ -69,7 +71,7 @@ export function useAutoScrollOnTaskSwitch(isActive: boolean, taskId: string | nu
 
       // Delay scroll to allow content to render
       scrollTimeoutRef.current = setTimeout(() => {
-        scrollToBottom({ onlyIfNearTop: false });
+        scrollToBottom({ onlyIfNearBottom: false });
       }, 200);
     }