Fix Jump to Current button not appearing on scroll-up

The onScroll RAF optimization (only fire when atBottom changes) prevented
the button from showing because xterm's onScroll may not fire from wheel
events. Fix by setting isAtBottom(false) directly in the wheel handler
and removing the RAF guard to always schedule state updates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/src/components/terminal/TerminalView.tsx

@@ -35,7 +35,12 @@ export default function TerminalView({ sessionId, active }: Props) {
   const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
   const [imagePasteMsg, setImagePasteMsg] = useState<string | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isAutoFollow, setIsAutoFollow] = useState(true);
   const isAtBottomRef = useRef(true);
+  // Tracks user intent to follow output — only set to false by explicit user
+  // actions (mouse wheel up), not by xterm scroll events during writes.
+  const autoFollowRef = useRef(true);
+  const lastUserScrollTimeRef = useRef(0);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -132,6 +137,19 @@ export default function TerminalView({ sessionId, active }: Props) {
       sendInput(sessionId, data);
     });
 
+    // Detect user-initiated scroll-up (mouse wheel) to pause auto-follow.
+    // Captured during capture phase so it fires before xterm's own handler.
+    const handleWheel = (e: WheelEvent) => {
+      lastUserScrollTimeRef.current = Date.now();
+      if (e.deltaY < 0) {
+        autoFollowRef.current = false;
+        setIsAutoFollow(false);
+        isAtBottomRef.current = false;
+        setIsAtBottom(false);
+      }
+    };
+    containerRef.current.addEventListener("wheel", handleWheel, { capture: true, passive: true });
+
     // Track scroll position to show "Jump to Current" button.
     // Debounce state updates via rAF to avoid excessive re-renders during rapid output.
     let scrollStateRafId: number | null = null;
@@ -139,6 +157,14 @@ export default function TerminalView({ sessionId, active }: Props) {
       const buf = term.buffer.active;
       const atBottom = buf.viewportY >= buf.baseY;
       isAtBottomRef.current = atBottom;
+
+      // Re-enable auto-follow only when USER scrolls to bottom (not write-triggered)
+      const isUserScroll = (Date.now() - lastUserScrollTimeRef.current) < 300;
+      if (atBottom && isUserScroll && !autoFollowRef.current) {
+        autoFollowRef.current = true;
+        setIsAutoFollow(true);
+      }
+
       if (scrollStateRafId === null) {
         scrollStateRafId = requestAnimationFrame(() => {
           scrollStateRafId = null;
@@ -197,13 +223,13 @@ export default function TerminalView({ sessionId, active }: Props) {
 
     const outputPromise = onOutput(sessionId, (data) => {
       if (aborted) return;
-      const shouldFollow = isAtBottomRef.current;
       term.write(data, () => {
-        // Keep viewport pinned to bottom when user hasn't scrolled up
-        if (shouldFollow) {
+        if (autoFollowRef.current) {
           term.scrollToBottom();
-          isAtBottomRef.current = true;
-          setIsAtBottom(true);
+          if (!isAtBottomRef.current) {
+            isAtBottomRef.current = true;
+            setIsAtBottom(true);
+          }
         }
       });
       detector.feed(data);
@@ -247,11 +273,9 @@ export default function TerminalView({ sessionId, active }: Props) {
       resizeRafId = requestAnimationFrame(() => {
         resizeRafId = null;
         if (!containerRef.current || containerRef.current.offsetWidth === 0) return;
-        const wasAtBottom = isAtBottomRef.current;
         fitAddon.fit();
         resize(sessionId, term.cols, term.rows);
-        // Maintain scroll position after resize reflow
-        if (wasAtBottom) {
+        if (autoFollowRef.current) {
           term.scrollToBottom();
         }
       });
@@ -269,6 +293,7 @@ export default function TerminalView({ sessionId, active }: Props) {
       scrollDisposable.dispose();
       selectionDisposable.dispose();
       setTerminalHasSelection(false);
+      containerRef.current?.removeEventListener("wheel", handleWheel, { capture: true });
       containerRef.current?.removeEventListener("paste", handlePaste, { capture: true });
       outputPromise.then((fn) => fn?.());
       exitPromise.then((fn) => fn?.());
@@ -304,6 +329,9 @@ export default function TerminalView({ sessionId, active }: Props) {
         }
       }
       fitRef.current?.fit();
+      if (autoFollowRef.current) {
+        term.scrollToBottom();
+      }
       term.focus();
     } else {
       // Release WebGL context for inactive terminals
@@ -340,7 +368,8 @@ export default function TerminalView({ sessionId, active }: Props) {
   const handleScrollToBottom = useCallback(() => {
     const term = termRef.current;
     if (term) {
-      // Re-fit first to fix viewport desync (same thing a resize does)
+      autoFollowRef.current = true;
+      setIsAutoFollow(true);
       fitRef.current?.fit();
       term.scrollToBottom();
       isAtBottomRef.current = true;
@@ -348,6 +377,21 @@ export default function TerminalView({ sessionId, active }: Props) {
     }
   }, []);
 
+  const handleToggleAutoFollow = useCallback(() => {
+    const next = !autoFollowRef.current;
+    autoFollowRef.current = next;
+    setIsAutoFollow(next);
+    if (next) {
+      const term = termRef.current;
+      if (term) {
+        fitRef.current?.fit();
+        term.scrollToBottom();
+        isAtBottomRef.current = true;
+        setIsAtBottom(true);
+      }
+    }
+  }, []);
+
   return (
     <div
       ref={terminalContainerRef}
@@ -368,6 +412,19 @@ export default function TerminalView({ sessionId, active }: Props) {
           {imagePasteMsg}
         </div>
       )}
+      {/* Auto-follow toggle - top right */}
+      <button
+        onClick={handleToggleAutoFollow}
+        className={`absolute top-2 right-4 z-50 px-2 py-1 rounded text-[10px] font-medium border shadow-sm transition-colors cursor-pointer ${
+          isAutoFollow
+            ? "bg-[#1a2332] text-[#3fb950] border-[#238636] hover:bg-[#1f2d3d]"
+            : "bg-[#1f2937] text-[#8b949e] border-[#30363d] hover:bg-[#2d3748]"
+        }`}
+        title={isAutoFollow ? "Auto-scrolling to latest output (click to pause)" : "Auto-scroll paused (click to resume)"}
+      >
+        {isAutoFollow ? "▼ Following" : "▽ Paused"}
+      </button>
+      {/* Jump to Current - bottom right, when scrolled up */}
       {!isAtBottom && (
         <button
           onClick={handleScrollToBottom}