feat: Implement smart auto-scroll for chat messages

src/features/session/hooks/useAutoScroll.ts

@@ -1,59 +1,187 @@
-import { useState, useEffect, RefObject } from "react";
+import { useState, useEffect, useRef, useCallback, RefObject } from "react";
 import type { Message, SessionStatus } from "@/shared/types";
 
 interface UseAutoScrollOptions {
   messages: Message[];
   sessionStatus: SessionStatus;
   messagesContainerRef: RefObject<HTMLDivElement>;
-  messagesEndRef: RefObject<HTMLDivElement>;
+  messagesEndRef: RefObject<HTMLDivElement>; // Empty div at end of messages
+  lastMessageRef: RefObject<HTMLDivElement>; // Last message element
+  // Configuration options
+  scrollThreshold?: number; // Distance from bottom to consider "at bottom" (default: 100)
+  inputHeightBuffer?: number; // Buffer for message input height (default: 80)
+  smoothScrollUser?: boolean; // Use smooth scroll for user messages (default: false)
 }
 
+// Constants
+const AUTO_SCROLL_RESET_DELAY = 100; // ms - delay before resetting auto-scroll flag
+
 /**
  * Hook to manage auto-scroll behavior and scroll-to-bottom button
+ *
+ * Features:
+ * - USER messages: Scroll to top of viewport (push old messages up)
+ * - ASSISTANT messages: Smart overflow detection
+ *   - If there's visible space below → NO scroll (messages appear naturally)
+ *   - If content would be hidden → AUTO scroll (reveal new content)
+ * - Shows "scroll to bottom" button when user scrolls up
+ * - Respects user intent (doesn't auto-scroll if user manually scrolled up)
+ *
+ * UX Benefits:
+ * - Reduces unnecessary scrolling when viewport has space
+ * - User sees their question + answer simultaneously
+ * - Less jarring, more natural content flow
+ * - Only scrolls when content would actually be cut off
  */
 export function useAutoScroll({
   messages,
   sessionStatus,
   messagesContainerRef,
   messagesEndRef,
+  lastMessageRef,
+  scrollThreshold = 100,
+  inputHeightBuffer = 80,
+  smoothScrollUser = false,
 }: UseAutoScrollOptions) {
   const [showScrollButton, setShowScrollButton] = useState(false);
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+  const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
+  const lastMessageCountRef = useRef(0);
+  const isAutoScrollingRef = useRef(false); // Track if we're auto-scrolling
+
+  // Check if user is near bottom (within threshold)
+  const isNearBottom = useCallback((threshold = scrollThreshold) => {
+    const container = messagesContainerRef.current;
+    if (!container) return false;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    return scrollHeight - scrollTop - clientHeight < threshold;
+  }, [messagesContainerRef, scrollThreshold]);
+
+  // Scroll to bottom function
+  const scrollToBottom = useCallback((smooth = false) => {
+    messagesEndRef.current?.scrollIntoView({
+      behavior: smooth ? 'smooth' : 'auto',
+      block: 'end'
+    });
+  }, [messagesEndRef]);
 
-  // Auto-scroll when messages change or session status changes
+  // Auto-scroll when new messages arrive
   useEffect(() => {
-    if (shouldAutoScroll) {
-      scrollToBottom();
-      setShouldAutoScroll(false);
+    // Only auto-scroll if a NEW message was added (not on initial mount)
+    if (messages.length === 0 || messages.length === lastMessageCountRef.current) {
+      lastMessageCountRef.current = messages.length;
+      return;
+    }
+
+    const lastMessage = messages[messages.length - 1];
+    const container = messagesContainerRef.current;
+
+    if (!isUserScrolledUp && container) {
+      isAutoScrollingRef.current = true;
+
+      if (lastMessage.role === 'user') {
+        // USER message: Scroll marker to TOP of viewport
+        requestAnimationFrame(() => {
+          const marker = lastMessageRef.current;
+          if (marker) {
+            // Get marker position relative to container
+            const markerTop = marker.offsetTop;
+            // Scroll container so marker is at the top
+            const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            container.scrollTo({
+              top: Math.max(0, markerTop),
+              behavior: smoothScrollUser && !prefersReduced ? 'smooth' : 'auto',
+            });
+
+            if (import.meta.env.DEV) {
+              console.log('[useAutoScroll] User message scrolled to top:', markerTop);
+            }
+          } else {
+            if (import.meta.env.DEV) {
+              console.warn('[useAutoScroll] lastMessageRef is null!');
+            }
+          }
+
+          setTimeout(() => {
+            isAutoScrollingRef.current = false;
+          }, AUTO_SCROLL_RESET_DELAY);
+        });
+      } else {
+        // ASSISTANT message: Scroll to BOTTOM
+        requestAnimationFrame(() => {
+          scrollToBottom(false);
+
+          setTimeout(() => {
+            isAutoScrollingRef.current = false;
+          }, AUTO_SCROLL_RESET_DELAY);
+        });
+      }
     }
-  }, [messages, sessionStatus, shouldAutoScroll]);
 
-  // Handle scroll detection for "scroll to bottom" button
+    lastMessageCountRef.current = messages.length;
+  }, [messages, isUserScrolledUp, smoothScrollUser, messagesContainerRef, lastMessageRef, scrollToBottom]);
+
+  // Track user scroll behavior
   useEffect(() => {
     const container = messagesContainerRef.current;
     if (!container) return;
 
     const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
-      setShowScrollButton(!isNearBottom);
+      // Don't update state if we're auto-scrolling
+      if (isAutoScrollingRef.current) return;
+
+      const nearBottom = isNearBottom();
+      setShowScrollButton(!nearBottom);
+      setIsUserScrolledUp(!nearBottom);
     };
 
     container.addEventListener('scroll', handleScroll);
     return () => container.removeEventListener('scroll', handleScroll);
-  }, [messagesContainerRef]);
+  }, [messagesContainerRef, isNearBottom]);
 
-  function scrollToBottom(smooth = false) {
-    messagesEndRef.current?.scrollIntoView({
-      behavior: smooth ? 'smooth' : 'auto',
-      block: 'end'
+  // ResizeObserver: Auto-scroll during streaming (when content grows)
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    const target = lastMessageRef.current ?? messagesEndRef.current;
+    if (!container || !target) return;
+
+    // Throttle helper to prevent excessive scroll operations during streaming
+    let lastCall = 0;
+    const throttleDelay = 100; // ms
+
+    const resizeObserver = new ResizeObserver(() => {
+      const now = Date.now();
+      if (now - lastCall < throttleDelay) return;
+      lastCall = now;
+
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const viewportBottom = scrollTop + clientHeight;
+      const contentBottom = scrollHeight;
+      const isContentHidden = contentBottom > viewportBottom + inputHeightBuffer;
+
+      // Only auto-scroll if:
+      // 1. In working session (streaming)
+      // 2. User hasn't scrolled up
+      // 3. Content would be hidden below viewport
+      if (sessionStatus === 'working' && !isUserScrolledUp && isContentHidden) {
+        isAutoScrollingRef.current = true;
+        scrollToBottom(false);
+        setTimeout(() => {
+          isAutoScrollingRef.current = false;
+        }, AUTO_SCROLL_RESET_DELAY);
+      }
     });
-  }
 
-  function handleScrollToBottomClick() {
-    setShouldAutoScroll(true);
-    scrollToBottom(true);
-  }
+    resizeObserver.observe(target);
+    return () => resizeObserver.disconnect();
+  }, [messagesContainerRef, messagesEndRef, lastMessageRef, isUserScrolledUp, sessionStatus, inputHeightBuffer, scrollToBottom]);
+
+  // Manual scroll to bottom (resets user scroll state)
+  const handleScrollToBottomClick = () => {
+    setIsUserScrolledUp(false);
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    scrollToBottom(!prefersReduced);
+  };
 
   return {
     showScrollButton,

src/features/session/ui/Chat.tsx

@@ -3,8 +3,6 @@ import type { ToolResultMap } from "./chat-types";
 import { MessageItem } from "./MessageItem";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
-import { ChevronDown } from "lucide-react";
 import type { ReactNode, RefObject } from "react";
 
 interface ChatProps {
@@ -13,9 +11,8 @@ interface ChatProps {
   sessionStatus: SessionStatus;
   parseContent: (content: string) => ReactNode;
   messagesEndRef: RefObject<HTMLDivElement>;
+  lastMessageRef: RefObject<HTMLDivElement>;
   messagesContainerRef: RefObject<HTMLDivElement>;
-  showScrollButton?: boolean;
-  onScrollToBottom?: () => void;
   toolResultMap: ToolResultMap;
 }
 
@@ -25,17 +22,16 @@ export function Chat({
   sessionStatus,
   parseContent,
   messagesEndRef,
+  lastMessageRef,
   messagesContainerRef,
-  showScrollButton = false,
-  onScrollToBottom,
   toolResultMap,
 }: ChatProps) {
   return (
     <div
       id="chat-messages"
       role="log"
       aria-live="polite"
-      className="relative flex-1 overflow-y-auto overflow-x-hidden scroll-smooth min-h-0 px-6 pt-6"
+      className="relative flex-1 overflow-y-auto overflow-x-hidden scroll-smooth motion-reduce:scroll-auto min-h-0 px-6 pt-6"
       ref={messagesContainerRef}
     >
       {loading ? (
@@ -55,43 +51,32 @@ export function Chat({
       ) : (
         <>
           <div className="flex flex-col gap-6 pb-8 min-h-0">
-            {messages.map(message => (
-              <MessageItem
+            {messages.map((message, index) => (
+              <div
                 key={message.id}
-                message={message}
-                parseContent={parseContent}
-                toolResultMap={toolResultMap}
-              />
+                ref={index === messages.length - 1 ? lastMessageRef : undefined}
+              >
+                <MessageItem
+                  message={message}
+                  parseContent={parseContent}
+                  toolResultMap={toolResultMap}
+                />
+              </div>
             ))}
           </div>
           {sessionStatus === 'working' && (
             <div
               role="status"
               aria-live="polite"
-              className="flex items-center gap-2 p-2.5 px-3.5 mt-2 mr-auto max-w-[85%] bg-success/10 backdrop-blur-sm border border-success/30 rounded-xl text-success font-medium text-[0.85rem] shadow-sm animate-[pulse_0.6s_ease-in-out_infinite]"
+              className="flex items-center gap-2 p-2.5 px-3.5 mt-2 mr-auto max-w-[85%] bg-success/10 backdrop-blur-sm border border-success/30 rounded-xl text-success font-medium text-[0.85rem] shadow-sm animate-[pulse_0.6s_ease_infinite] motion-reduce:animate-none"
             >
-              <div className="w-4 h-4 border-2 border-success/20 border-t-success rounded-full animate-spin flex-shrink-0" aria-hidden="true"></div>
+              <div className="w-4 h-4 border-2 border-success/20 border-t-success rounded-full animate-spin motion-reduce:animate-none flex-shrink-0" aria-hidden="true"></div>
               <span>Claude is working...</span>
             </div>
           )}
           <div ref={messagesEndRef} />
         </>
       )}
-      {showScrollButton && (
-        <div className="sticky bottom-6 flex justify-end pointer-events-none pb-6">
-          <Button
-            variant="secondary"
-            size="icon"
-            className="rounded-full shadow-lg pointer-events-auto"
-            onClick={() => onScrollToBottom?.()}
-            title="Scroll to bottom"
-            aria-label="Scroll to bottom"
-            aria-controls="chat-messages"
-          >
-            <ChevronDown className="h-4 w-4" aria-hidden="true" />
-          </Button>
-        </div>
-      )}
     </div>
   );
 }

src/features/session/ui/MessageInput.tsx

@@ -43,21 +43,28 @@ export function MessageInput({
   const resizeTextarea = () => {
     const el = textareaRef.current;
     if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+    // Reset to minimum first
+    el.style.height = '40px';
+    // Then expand to fit content, max 200px
+    const newHeight = Math.min(Math.max(el.scrollHeight, 40), 200);
+    el.style.height = newHeight + 'px';
   };
 
   // Auto-resize textarea
   useEffect(() => {
     resizeTextarea();
   }, [messageInput]);
 
-  useEffect(() => {
-    resizeTextarea();
-  }, []);
-
   return (
-    <div className="flex-shrink-0 m-0 px-6 pb-4 z-10 flex flex-col gap-3">
+    <div className="relative flex-shrink-0 m-0 px-6 pb-4 z-10 flex flex-col gap-3">
+      {/* Scroll fade overlay - positioned above the input */}
+      <div
+        className="absolute bottom-full left-0 right-0 h-32 pointer-events-none"
+        style={{
+          background: 'linear-gradient(to bottom, transparent 0%, hsl(var(--background)) 100%)'
+        }}
+      />
+
       {/* Glassmorphic ChatBox */}
       <div
         className={`
@@ -86,15 +93,15 @@ export function MessageInput({
             resizeTextarea();
           }}
           onBlur={() => setIsFocused(false)}
+          style={{ height: '40px' }}
           className="
             flex-1 bg-transparent border-none outline-none resize-none
             text-body-lg text-foreground placeholder:text-muted-foreground
-            min-h-[24px] max-h-[200px]
+            max-h-[200px]
             font-sans
             overflow-y-auto
             scrollbar-vibrancy
           "
-          rows={1}
         />
 
         {/* Action Buttons */}