feat(frontend): add scroll-to-bottom button, improve scroll disengagement, and tall content detection

Author: chriswritescode-dev

frontend/src/components/message/FloatingTTSButton.tsx

@@ -92,7 +92,7 @@ export function FloatingTTSButton({ messageId, content }: FloatingTTSButtonProps
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
         onPointerLeave={handlePointerLeave}
-        className={`absolute -top-5 right-0 md:right-4 z-50 flex items-center transition-all duration-200 shadow-md backdrop-blur-md ring-1 ${buttonToneClasses} ${isLongPressVisual ? 'scale-95 opacity-80' : 'active:scale-95 hover:scale-105'} ${!hasContent && !autoPlay ? 'opacity-50 cursor-not-allowed' : ''}`}
+        className={`flex items-center transition-all duration-200 shadow-md backdrop-blur-md ring-1 ${buttonToneClasses} ${isLongPressVisual ? 'scale-95 opacity-80' : 'active:scale-95 hover:scale-105'} ${!hasContent && !autoPlay ? 'opacity-50 cursor-not-allowed' : ''}`}
         title={pillTitle}
         aria-label={pillAriaLabel}
         disabled={!hasContent && !autoPlay}

frontend/src/components/message/PromptInput.stt.test.tsx

@@ -380,5 +380,35 @@ describe('PromptInput STT Gesture Tests', () => {
         expect(mockStartRecording).toHaveBeenCalledTimes(1)
       })
     })
+
+    it('renders mobile mic even when showScrollButton is true and no voice feedback is active', async () => {
+      mocks.useMobile.mockReturnValue(true)
+
+      render(
+        <QueryClientProvider client={createTestQueryClient()}>
+          <PromptInput {...defaultProps} showScrollButton={true} />
+        </QueryClientProvider>
+      )
+
+      const allButtons = screen.getAllByRole('button')
+      const voiceButtons = allButtons.filter((btn) => {
+        const title = (btn.getAttribute('title') || '').toLowerCase()
+        return title.includes('tap to speak') || title.includes('tap to transcribe') || title.includes('hold to speak')
+      })
+
+      expect(voiceButtons.length).toBeGreaterThan(0)
+    })
+
+    it('does NOT render mobile in-row ArrowDown button', async () => {
+      mocks.useMobile.mockReturnValue(true)
+
+      render(
+        <QueryClientProvider client={createTestQueryClient()}>
+          <PromptInput {...defaultProps} showScrollButton={true} />
+        </QueryClientProvider>
+      )
+
+      expect(screen.queryByTitle('Scroll to bottom')).not.toBeInTheDocument()
+    })
   })
 })

frontend/src/components/message/PromptInput.tsx

@@ -1244,23 +1244,15 @@ return (
 
         </div>
 <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
-            {isMobile && showScrollButton && !showVoiceFeedback ? (
+            {!isMobile && (
               <button
                 onClick={onScrollToBottom}
-                className="px-4 py-2 rounded-lg bg-black hover:bg-zinc-900 text-white transition-all duration-200 active:scale-95 shadow-md flex items-center justify-center min-w-[52px] border border-zinc-700"
-                title="Scroll to bottom"
-              >
-                <ArrowDown className="w-5 h-5" />
-              </button>
-            ) : !isMobile ? (
-              <button
-                onClick={onScrollToBottom}
-                className={`p-2 rounded-lg bg-black hover:bg-zinc-900 text-white transition-all duration-200 active:scale-95 hover:scale-105 shadow-md border border-zinc-700 ${showScrollButton ? 'visible' : 'invisible'}`}
+                className={`p-2 rounded-lg bg-zinc-950/80 hover:bg-zinc-900/90 text-blue-300 hover:text-blue-200 transition-all duration-200 active:scale-95 hover:scale-105 shadow-md border border-blue-400/20 backdrop-blur-md ring-1 ring-blue-400/15 ${showScrollButton ? 'visible' : 'invisible'}`}
                 title="Scroll to bottom"
               >
                 <ArrowDown className="w-6 h-6" />
               </button>
-            ) : null}
+            )}
 {showStopButton && (
             <button
               onClick={handleStop}
@@ -1289,7 +1281,7 @@ return (
           {sttEnabled && sttSupported && (
             renderVoiceButton('desktop')
           )}
-          {isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession && (!showScrollButton || showVoiceFeedback) && (
+          {isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession && (
             renderVoiceButton('mobile')
           )}
             <button

frontend/src/hooks/__tests__/useTallScrollContent.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useTallScrollContent } from '../useTallScrollContent'
+
+let mockObserve: ReturnType<typeof vi.fn>
+let mockDisconnect: ReturnType<typeof vi.fn>
+let resizeCallback: ((entries: ResizeObserverEntry[]) => void) | null = null
+
+vi.stubGlobal('ResizeObserver', vi.fn((cb: (entries: ResizeObserverEntry[]) => void) => {
+  resizeCallback = cb
+  return {
+    observe: mockObserve,
+    disconnect: mockDisconnect,
+    unobserve: vi.fn(),
+  }
+}))
+
+describe('useTallScrollContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockObserve = vi.fn()
+    mockDisconnect = vi.fn()
+    resizeCallback = null
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function createContainerRef(scrollHeight: number, clientHeight: number) {
+    const el = document.createElement('div')
+    Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, configurable: true })
+    Object.defineProperty(el, 'clientHeight', { value: clientHeight, configurable: true })
+    return { current: el }
+  }
+
+  it('returns false when scrollHeight <= clientHeight * ratio', () => {
+    const ref = createContainerRef(500, 400)
+
+    const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject<HTMLElement>, 1.5))
+    expect(result.current).toBe(false)
+  })
+
+  it('returns true when scrollHeight > clientHeight * ratio', () => {
+    const ref = createContainerRef(2000, 800)
+
+    const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject<HTMLElement>, 1.5))
+    expect(result.current).toBe(true)
+  })
+
+  it('updates from false to true when ResizeObserver fires with taller content', () => {
+    const ref = createContainerRef(500, 400)
+
+    const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject<HTMLElement>, 1.5))
+    expect(result.current).toBe(false)
+
+    Object.defineProperty(ref.current, 'scrollHeight', { value: 2000 })
+    act(() => {
+      resizeCallback?.([] as ResizeObserverEntry[])
+    })
+
+    expect(result.current).toBe(true)
+  })
+
+  it('updates from true to false when ResizeObserver fires with smaller container', () => {
+    const ref = createContainerRef(2000, 800)
+
+    const { result } = renderHook(() => useTallScrollContent(ref as React.RefObject<HTMLElement>, 1.5))
+    expect(result.current).toBe(true)
+
+    Object.defineProperty(ref.current, 'clientHeight', { value: 2000 })
+    act(() => {
+      resizeCallback?.([] as ResizeObserverEntry[])
+    })
+
+    expect(result.current).toBe(false)
+  })
+})

frontend/src/hooks/useAutoScroll.ts

@@ -28,6 +28,7 @@ export function useAutoScroll({
   const userScrolledAtRef = useRef(0)
   const userDisengagedRef = useRef(false)
   const pointerStartYRef = useRef<number | null>(null)
+  const pointerActiveRef = useRef(false)
   const onScrollStateChangeRef = useRef(onScrollStateChange)
 
   onScrollStateChangeRef.current = onScrollStateChange
@@ -61,17 +62,19 @@ export function useAutoScroll({
 
     const handlePointerDown = (e: PointerEvent) => {
       pointerStartYRef.current = e.clientY
+      pointerActiveRef.current = true
     }
 
     const handlePointerMove = (e: PointerEvent) => {
       if (pointerStartYRef.current === null) return
-      if (e.clientY > pointerStartYRef.current) {
+      if (e.clientY > pointerStartYRef.current + 4) {
         markDisengaged()
       }
     }
 
     const handlePointerUp = () => {
       pointerStartYRef.current = null
+      pointerActiveRef.current = false
     }
 
     const handleWheel = (e: WheelEvent) => {
@@ -87,6 +90,7 @@ export function useAutoScroll({
     }
 
     const handleScroll = () => {
+      if (!hasInitialScrolledRef.current) return
       const { scrollTop, scrollHeight, clientHeight } = container
       const isAtBottom = scrollHeight - scrollTop - clientHeight < BOTTOM_THRESHOLD_PX
 
@@ -96,7 +100,7 @@ export function useAutoScroll({
           userDisengagedRef.current = false
           onScrollStateChangeRef.current?.(false)
         }
-      } else if (!userDisengagedRef.current) {
+      } else if (pointerActiveRef.current && !userDisengagedRef.current) {
         userScrolledAtRef.current = Date.now()
         userDisengagedRef.current = true
         onScrollStateChangeRef.current?.(true)
@@ -146,7 +150,7 @@ export function useAutoScroll({
     const timeSinceUserScroll = Date.now() - userScrolledAtRef.current
     const recentlyScrolled = timeSinceUserScroll < SCROLL_LOCK_MS
 
-    if (recentlyScrolled || userDisengagedRef.current) {
+    if (recentlyScrolled || userDisengagedRef.current || pointerActiveRef.current) {
       return
     }
 

frontend/src/hooks/useTallScrollContent.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from 'react'
+
+export function useTallScrollContent(
+  containerRef: React.RefObject<HTMLElement | null>,
+  ratio = 1.5
+): boolean {
+  const [isTall, setIsTall] = useState(false)
+  const observingRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const recompute = () => {
+      const el = containerRef.current
+      if (!el) return
+      setIsTall(el.scrollHeight > el.clientHeight * ratio)
+    }
+
+    const el = containerRef.current
+
+    if (!el || el === observingRef.current) return
+
+    observingRef.current = el
+    recompute()
+
+    const observer = new ResizeObserver(recompute)
+    observer.observe(el)
+    el.addEventListener('scroll', recompute)
+
+    return () => {
+      observer.disconnect()
+      el.removeEventListener('scroll', recompute)
+      observingRef.current = null
+    }
+  })
+
+  return isTall
+}

frontend/src/index.css

@@ -11,7 +11,7 @@
   --color-primary-foreground: #fafafa;
   --color-muted-foreground: #d4d4d8;
   --color-accent: #27272a;
-  --color-input: #27272a;
+  --color-input: #323232;
   --color-muted: #18181b;
   --color-popover: #18181b;
   --color-destructive: #dc2626;

frontend/src/pages/SessionDetail.tsx

@@ -5,7 +5,7 @@ import { getRepo, initializeAssistantMode } from "@/api/repos";
 import { MessageThread } from "@/components/message/MessageThread";
 import { PromptInput, type PromptInputHandle } from "@/components/message/PromptInput";
 import { FloatingTTSButton } from '@/components/message/FloatingTTSButton'
-import { X, CornerUpLeft } from "lucide-react";
+import { X, CornerUpLeft, ArrowDown } from "lucide-react";
 import { ModelSelectDialog } from "@/components/model/ModelSelectDialog";
 import { Header } from "@/components/ui/header";
 import { SessionList } from "@/components/session/SessionList";
@@ -27,6 +27,7 @@ import { useSettingsDialog } from "@/hooks/useSettingsDialog";
 import { useAutoScroll } from "@/hooks/useAutoScroll";
 import { useMobile } from "@/hooks/useMobile";
 import { useVisualViewport } from "@/hooks/useVisualViewport";
+import { useTallScrollContent } from "@/hooks/useTallScrollContent";
 import { useTTS } from "@/hooks/useTTS";
 import { getAssistantText, getLatestPlayableAssistantMessage, useAutoPlayLastResponse } from "@/hooks/useAutoPlayLastResponse";
 import { useEffect, useRef, useCallback, useMemo } from "react";
@@ -86,12 +87,14 @@ export function SessionDetail() {
   const [minimizedQuestion, setMinimizedQuestion] = useState<QuestionRequest | null>(null);
   const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const lastHeaderScrollTopRef = useRef(0);
+  const lastHeaderScrollHeightRef = useRef(0);
 
   const isMobile = useMobile();
   const { keyboardHeight } = useVisualViewport();
   const inputBottomOffset = isMobile ? keyboardHeight : 0;
   const promptOverlayRef = useRef<HTMLDivElement>(null);
   const [promptOverlayHeight, setPromptOverlayHeight] = useState(112);
+  const isContentTall = useTallScrollContent(messageContainerRef, 1.5);
 
   useEffect(() => {
     const el = promptOverlayRef.current;
@@ -216,27 +219,41 @@ export function SessionDetail() {
     if (!container) return
 
     lastHeaderScrollTopRef.current = container.scrollTop
+    lastHeaderScrollHeightRef.current = container.scrollHeight
     setIsHeaderVisible(true)
 
+    const SCROLL_DELTA_THRESHOLD = 8
+
     const handleScroll = () => {
       if (!isMobile) {
         setIsHeaderVisible(true)
         return
       }
       const currentScrollTop = container.scrollTop
       const previousScrollTop = lastHeaderScrollTopRef.current
-      const maxScrollTop = container.scrollHeight - container.clientHeight
-      const isAtBottom = maxScrollTop - currentScrollTop < 24
-      const isScrollingDown = currentScrollTop > previousScrollTop + 4
-      const isScrollingUp = currentScrollTop < previousScrollTop - 50
+      const currentScrollHeight = container.scrollHeight
+      const previousScrollHeight = lastHeaderScrollHeightRef.current
+
+      lastHeaderScrollTopRef.current = currentScrollTop
+      lastHeaderScrollHeightRef.current = currentScrollHeight
+
+      if (currentScrollHeight !== previousScrollHeight) return
+
+      const delta = currentScrollTop - previousScrollTop
+      if (Math.abs(delta) < SCROLL_DELTA_THRESHOLD) return
 
-      if (isAtBottom || isScrollingDown) {
+      const isAtTop = currentScrollTop < 24
+
+      if (isAtTop) {
         setIsHeaderVisible(true)
-      } else if (isScrollingUp) {
-        setIsHeaderVisible(false)
+        return
       }
 
-      lastHeaderScrollTopRef.current = currentScrollTop
+      if (delta > 0) {
+        setIsHeaderVisible(true)
+      } else {
+        setIsHeaderVisible(false)
+      }
     }
 
     container.addEventListener('scroll', handleScroll, { passive: true })
@@ -538,7 +555,7 @@ export function SessionDetail() {
             style={{ bottom: inputBottomOffset }}
           >
             <div className="relative w-[94%] md:max-w-4xl">
-              <div className="absolute -top-5 right-0 md:right-4 z-50 flex flex-col items-end gap-2">
+              <div className="absolute -top-9 right-0 z-50 flex flex-col items-end gap-2">
                 {ttsEnabled && !hasPromptContent && !isSessionActive && latestPlayableAssistant && (
                   <FloatingTTSButton
                     messageId={latestPlayableAssistant.message.info.id}
@@ -561,6 +578,18 @@ export function SessionDetail() {
                   </button>
                 )}
               </div>
+              {isMobile && showScrollButton && isContentTall && (
+                <div className="absolute -top-9 left-0 z-50 flex flex-col items-start gap-2">
+                  <button
+                    onClick={scrollToBottom}
+                    className="flex items-center justify-center px-3 py-1.5 rounded-lg bg-zinc-950/80 hover:bg-zinc-900/90 text-blue-300 hover:text-blue-200 border border-blue-400/20 shadow-md backdrop-blur-md transition-all duration-200 active:scale-95 hover:scale-105 ring-1 ring-blue-400/15"
+                    aria-label="Scroll to bottom"
+                    title="Scroll to bottom"
+                  >
+                    <ArrowDown className="w-5 h-5" />
+                  </button>
+                </div>
+              )}
               {leaderActive && (
                 <div className="absolute -top-12 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-xl bg-primary/90 text-primary-foreground border border-primary shadow-lg backdrop-blur-md animate-pulse">
                   <span className="text-sm font-medium">Waiting for shortcut key...</span>