From f3b5c6a80586a5d06b19f0bd9676699b3d250c84 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 00:40:51 +0800
Subject: [PATCH 01/18] feat: overhaul scroll system with useAutoScroll +
 @tanstack/react-virtual

Replace ChatArea's hand-rolled scroll management and page virtualization
with a port of OpenCode's createAutoScroll hook and @tanstack/react-virtual.

Three key changes:

1. useAutoScroll hook (src/hooks/useAutoScroll.ts)
   - React port of OpenCode's SolidJS createAutoScroll
   - Tracks userScrolled state, markAuto/isAuto debounce (1500ms),
     300ms settle period after streaming, overflow-anchor management
   - Supports both normal-flow and flex-col-reverse containers
   - 17 unit tests covering all scroll-following edge cases

2. Normal flow + @tanstack/react-virtual
   - Switched scroll container from flex-col-reverse to flex-col
   - Replaced hand-rolled page expansion/premeasure infrastructure with
     useVirtualizer (anchorTo: 'end', measureElement, overscan: 20)
   - shouldAdjustScrollPositionOnItemSizeChange ensures items above the
     viewport growing don't shift visible content (core jitter fix)
   - Removed ~330 lines of manual virtualization code

3. InputBox clearance via virtualizer resizeItem
   - Clearance virtual item at the end of the virtualizer provides
     bottom space so messages aren't hidden behind the InputBox
   - ResizeObserver detects InputBox height changes, synced to the
     clearance item via pageVirtualizer.resizeItem() (bypasses the
     virtualizer's item-size cache which estimateSize alone cannot
     update after initial measurement)
---
 package.json                    |   1 +
 src/features/chat/ChatArea.tsx  | 613 +++++++++++---------------------
 src/features/chat/ChatPane.tsx  |  11 +-
 src/hooks/useAutoScroll.test.ts | 313 ++++++++++++++++
 src/hooks/useAutoScroll.ts      | 437 +++++++++++++++++++++++
 5 files changed, 977 insertions(+), 398 deletions(-)
 create mode 100644 src/hooks/useAutoScroll.test.ts
 create mode 100644 src/hooks/useAutoScroll.ts

diff --git a/package.json b/package.json
index 6c497902..2f27fb32 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@codemirror/view": "^6.41.1",
     "@opencode-ai/sdk": "^1.16.0",
     "@streamdown/math": "^1.0.2",
+    "@tanstack/react-virtual": "^3.14.3",
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-fs": "^2.4.5",
diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index 48595b97..f1322937 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -24,28 +24,22 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { animate } from 'motion/mini'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import { MessageRenderer } from '../message'
 import { MessageErrorView } from '../message/parts'
 import { messageStore } from '../../store'
 import { useTheme } from '../../hooks/useTheme'
+import { useAutoScroll } from '../../hooks/useAutoScroll'
 import type { Message, MessageError } from '../../types/message'
 import { RetryStatusInline, type RetryStatusInlineData } from './RetryStatusInline'
 import { buildVisibleMessageEntries, getVisibleMessageForkTargetId } from './chatAreaVisibility'
 import { AT_BOTTOM_THRESHOLD_PX } from '../../constants'
 import { useChatViewport } from './chatViewport'
 import {
-  PREMEASURE_PAGE_RADIUS,
   buildContentKeyedChatPages,
-  buildExpandedPageSelection,
-  buildPageOffsets,
-  buildPageRenderSegments,
-  computeAnchorRestoreScrollDelta,
   buildTurnDurationMap,
-  computeExpandedPageRange,
-  computePremeasureMessageBudget,
-  findPagesToPremeasure,
+  computeAnchorRestoreScrollDelta,
   seedMeasuredPageHeightsFromPreviousPages,
-  type PagePremeasureDirection,
   type ChatPage,
   type StableChatPage,
 } from './chatPageModel'
@@ -54,7 +48,6 @@ const LOAD_MORE_ROOT_MARGIN = '240px 0px 0px 0px'
 const LOAD_MORE_WHEEL_COOLDOWN_MS = 90
 const LOAD_MORE_DEFER_MS = 100
 const PENDING_SCROLL_TARGET_KEEPALIVE_MS = 900
-const RESIZE_PREMEASURE_PAUSE_MS = 420
 
 type LoadMoreAnchorSnapshot = {
   messageId: string
@@ -65,12 +58,6 @@ type LoadMoreAnchorSnapshot = {
 /** Stable no-op to avoid creating a new closure on every render. */
 const NOOP = () => {}
 
-function pageHasStreamingMessage(page: ChatPage): boolean {
-  return page.rows.some(row =>
-    row.messages.some(message => message.isStreaming || (message.info.role === 'assistant' && message.info.time.completed == null)),
-  )
-}
-
 function captureLoadMoreAnchor(root: HTMLElement, pageCountBefore = 0): LoadMoreAnchorSnapshot | null {
   const rootRect = root.getBoundingClientRect()
   const candidates = root.querySelectorAll<HTMLElement>('[data-message-id]')
@@ -124,6 +111,8 @@ export type ChatAreaHandle = {
   scrollToLastMessage: () => void
   scrollToMessageIndex: (index: number) => void
   scrollToMessageId: (messageId: string) => void
+  /** Resize the bottom-clearance virtual item (input-box spacer). */
+  updateClearanceHeight: (height: number) => void
 }
 
 export const ChatArea = memo(
@@ -163,27 +152,16 @@ export const ChatArea = memo(
       const loadMoreRef = useRef(onLoadMore)
       const isLoadingRef = useRef(false)
       const [isLoadingMore, setIsLoadingMore] = useState(false)
-      const [scrollOffsetFromBottom, setScrollOffsetFromBottom] = useState(0)
-      const [premeasureDirection, setPremeasureDirection] = useState<PagePremeasureDirection>('idle')
-      const [viewportHeight, setViewportHeight] = useState(0)
       const [measuredPageHeights, setMeasuredPageHeights] = useState<Record<string, number>>({})
-      const [staleMeasuredPageKeys, setStaleMeasuredPageKeys] = useState<ReadonlySet<string>>(() => new Set())
-      const [forcedPremeasurePageKeys, setForcedPremeasurePageKeys] = useState<ReadonlySet<string>>(() => new Set())
       const [pendingScrollMessageId, setPendingScrollMessageId] = useState<string | null>(null)
-      const [pendingLoadMoreAnchorMessageId, setPendingLoadMoreAnchorMessageId] = useState<string | null>(null)
-      const [isResizePremeasurePaused, setIsResizePremeasurePaused] = useState(false)
       const scrollSnapshotRafRef = useRef<number | null>(null)
       const pendingLoadMoreAnchorRef = useRef<LoadMoreAnchorSnapshot | null>(null)
-      const pendingLayoutAnchorRef = useRef<LoadMoreAnchorSnapshot | null>(null)
       const pendingLoadMoreTimerRef = useRef<number | null>(null)
       const pendingScrollClearTimerRef = useRef<number | null>(null)
       const pendingAnchorClearRafRef = useRef<number | null>(null)
       const pendingSessionResetRafRef = useRef<number | null>(null)
-      const resizePremeasurePauseTimerRef = useRef<number | null>(null)
-      const lastScrollRootSizeRef = useRef({ width: 0, height: 0 })
       const measuredPageHeightKeysRef = useRef<string[]>([])
       const previousActivePagesRef = useRef<{ sessionId?: string | null; pages: StableChatPage[] }>({ pages: [] })
-      const lastStreamingPageKeysRef = useRef<ReadonlySet<string>>(new Set())
       const settlingScrollMessageIdRef = useRef<string | null>(null)
       const loadMoreRequestIdRef = useRef(0)
       const topSentinelVisibleRef = useRef(false)
@@ -201,6 +179,12 @@ export const ChatArea = memo(
       const atBottomThreshold = presentation.isCompact ? 150 : AT_BOTTOM_THRESHOLD_PX
       const messagePaddingClass = presentation.isCompact ? 'px-3' : 'px-5'
       const messageMaxWidthClass = isWideMode ? 'max-w-[95%] xl:max-w-6xl' : 'max-w-2xl'
+      const autoScroll = useAutoScroll({
+        working: _isStreaming,
+        reverse: false,
+        bottomThreshold: atBottomThreshold,
+        overflowAnchor: 'dynamic',
+      })
       const shouldUseExternalViewModel = pageRecords != null && visibleMessagesProp != null
       const visibleMessageEntries = useMemo(
         () => (shouldUseExternalViewModel ? [] : buildVisibleMessageEntries(messages)),
@@ -244,108 +228,32 @@ export const ChatArea = memo(
         })
       }, [activePages, sessionId])
 
-      const pendingTargetPageIndex = useMemo(
-        () =>
-          pendingScrollMessageId == null ? -1 : activePages.findIndex(page => page.messageIds.includes(pendingScrollMessageId)),
-        [activePages, pendingScrollMessageId],
-      )
-
-      const pendingLoadMoreAnchorPageIndex = useMemo(
-        () =>
-          pendingLoadMoreAnchorMessageId == null
-            ? -1
-            : activePages.findIndex(page => page.messageIds.includes(pendingLoadMoreAnchorMessageId)),
-        [activePages, pendingLoadMoreAnchorMessageId],
-      )
-
-      const expandedPageRange = useMemo(
-        () =>
-          computeExpandedPageRange({
-            pages: activePages,
-            measuredPageHeights,
-            scrollOffsetFromBottom,
-            viewportHeight,
-          }),
-        [activePages, measuredPageHeights, scrollOffsetFromBottom, viewportHeight],
-      )
-
-      const expandedPageSelection = useMemo(
-        () => buildExpandedPageSelection(expandedPageRange, [pendingTargetPageIndex, pendingLoadMoreAnchorPageIndex]),
-        [expandedPageRange, pendingLoadMoreAnchorPageIndex, pendingTargetPageIndex],
-      )
-
-      const streamingPageKeys = useMemo(() => {
-        const keys = new Set<string>()
-        for (const page of activePages) {
-          if (pageHasStreamingMessage(page)) keys.add(page.key)
-        }
-        return keys
-      }, [activePages])
-
-      useLayoutEffect(() => {
-        if (streamingPageKeys.size > 0) {
-          lastStreamingPageKeysRef.current = streamingPageKeys
-          return
-        }
-
-        const completedKeys = lastStreamingPageKeysRef.current
-        if (completedKeys.size === 0) return
-
-        lastStreamingPageKeysRef.current = new Set()
-        setForcedPremeasurePageKeys(previous => {
-          const next = new Set(previous)
-          for (const key of completedKeys) next.add(key)
-          return next
-        })
-      }, [streamingPageKeys])
-
-      const renderSegments = useMemo(
-        () =>
-          buildPageRenderSegments({
-            pages: activePages,
-            expandedPageSelection,
-            measuredPageHeights,
-          }),
-        [activePages, expandedPageSelection, measuredPageHeights],
-      )
-
-      const pagesToPremeasure = useMemo(() => {
-        if (isResizePremeasurePaused) return []
-        return findPagesToPremeasure({
-          pages: activePages,
-          expandedPageRange,
-          measuredPageHeights,
-          stalePageKeys: staleMeasuredPageKeys,
-          direction: premeasureDirection,
-          radius: PREMEASURE_PAGE_RADIUS,
-          messageBudget: computePremeasureMessageBudget(viewportHeight),
-        })
-      }, [activePages, expandedPageRange, isResizePremeasurePaused, measuredPageHeights, premeasureDirection, staleMeasuredPageKeys, viewportHeight])
-
-      const forcedPagesToPremeasure = useMemo(() => {
-        if (streamingPageKeys.size === 0 && forcedPremeasurePageKeys.size === 0) return []
-
-        const pagesToForce: StableChatPage[] = []
-        for (let index = 0; index < activePages.length; index++) {
+      // Virtualizer for page-level DOM management and scroll anchoring.
+      // Each page is a virtual item. `anchorTo: 'end'` pins the bottom when
+      // the last item grows (streaming). `measureElement` tracks dynamic heights.
+      const pageVirtualizer = useVirtualizer({
+        // One extra virtual item at the end for input-box clearance.
+        count: activePages.length + (bottomPadding > 0 ? 1 : 0),
+        getScrollElement: () => scrollRef.current,
+        estimateSize: (index) => {
+          if (index === activePages.length) return bottomPadding
           const page = activePages[index]
-          if (expandedPageSelection.has(index)) continue
-          if (streamingPageKeys.has(page.key) || forcedPremeasurePageKeys.has(page.key)) pagesToForce.push(page)
-        }
-        return pagesToForce
-      }, [activePages, expandedPageSelection, forcedPremeasurePageKeys, streamingPageKeys])
-
-      const effectivePagesToPremeasure = useMemo(() => {
-        if (forcedPagesToPremeasure.length === 0) return pagesToPremeasure
-
-        const seen = new Set(pagesToPremeasure.map(page => page.key))
-        const merged = [...pagesToPremeasure]
-        for (const page of forcedPagesToPremeasure) {
-          if (seen.has(page.key)) continue
-          seen.add(page.key)
-          merged.push(page)
-        }
-        return merged
-      }, [forcedPagesToPremeasure, pagesToPremeasure])
+          return measuredPageHeights[page.key] ?? page.estimatedHeight
+        },
+        getItemKey: (index) => {
+          if (index === activePages.length) return '__clearance__'
+          return activePages[index]?.key ?? index
+        },
+        anchorTo: 'end',
+        overscan: 20,
+        scrollEndThreshold: atBottomThreshold,
+      })
+
+      // When an item above the viewport changes size, adjust scrollTop to keep
+      // the visible content stable. Items below the viewport changing size
+      // should NOT trigger any scroll adjustment. This is the core jitter fix.
+      pageVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) =>
+        item.end <= (instance.scrollOffset ?? 0)
 
       const clearPendingLoadMoreTimer = useCallback(() => {
         if (pendingLoadMoreTimerRef.current === null) return
@@ -353,26 +261,19 @@ export const ChatArea = memo(
         pendingLoadMoreTimerRef.current = null
       }, [])
 
-      const clearPendingScrollTimer = useCallback(() => {
-        if (pendingScrollClearTimerRef.current === null) return
-        window.clearTimeout(pendingScrollClearTimerRef.current)
-        pendingScrollClearTimerRef.current = null
-      }, [])
-
-      const clearResizePremeasurePauseTimer = useCallback(() => {
-        if (resizePremeasurePauseTimerRef.current === null) return
-        window.clearTimeout(resizePremeasurePauseTimerRef.current)
-        resizePremeasurePauseTimerRef.current = null
-      }, [])
-
       const clearPendingLoadMoreAnchorMessage = useCallback(() => {
         if (pendingAnchorClearRafRef.current !== null) cancelAnimationFrame(pendingAnchorClearRafRef.current)
         pendingAnchorClearRafRef.current = requestAnimationFrame(() => {
           pendingAnchorClearRafRef.current = null
-          setPendingLoadMoreAnchorMessageId(null)
         })
       }, [])
 
+      const clearPendingScrollTimer = useCallback(() => {
+        if (pendingScrollClearTimerRef.current === null) return
+        window.clearTimeout(pendingScrollClearTimerRef.current)
+        pendingScrollClearTimerRef.current = null
+      }, [])
+
       const resetSessionViewState = useCallback(() => {
         if (pendingSessionResetRafRef.current !== null) cancelAnimationFrame(pendingSessionResetRafRef.current)
         pendingSessionResetRafRef.current = requestAnimationFrame(() => {
@@ -380,11 +281,7 @@ export const ChatArea = memo(
           setIsLoadingMore(false)
           measuredPageHeightKeysRef.current = []
           setMeasuredPageHeights({})
-          setStaleMeasuredPageKeys(new Set())
-          setForcedPremeasurePageKeys(new Set())
           setPendingScrollMessageId(null)
-          setPremeasureDirection('idle')
-          setIsResizePremeasurePaused(false)
         })
       }, [])
 
@@ -392,96 +289,63 @@ export const ChatArea = memo(
         return () => {
           clearPendingLoadMoreTimer()
           clearPendingScrollTimer()
-          clearResizePremeasurePauseTimer()
           if (scrollSnapshotRafRef.current !== null) cancelAnimationFrame(scrollSnapshotRafRef.current)
           if (pendingAnchorClearRafRef.current !== null) cancelAnimationFrame(pendingAnchorClearRafRef.current)
           if (pendingSessionResetRafRef.current !== null) cancelAnimationFrame(pendingSessionResetRafRef.current)
         }
-      }, [clearPendingLoadMoreTimer, clearPendingScrollTimer, clearResizePremeasurePauseTimer])
+      }, [clearPendingLoadMoreTimer, clearPendingScrollTimer])
 
       const setScrollContainerRef = useCallback((node: HTMLDivElement | null) => {
         scrollRef.current = node
         setScrollRoot(prev => (prev === node ? prev : node))
-      }, [])
+        autoScroll.scrollRef(node)
+      }, [autoScroll])
+
+      const setContentWrapperRef = useCallback((node: HTMLDivElement | null) => {
+        autoScroll.contentRef(node)
+      }, [autoScroll])
 
       const updateScrollOffsetSnapshot = useCallback(() => {
         const root = scrollRef.current
         if (!root) return
 
-        const nextOffset = Math.abs(root.scrollTop)
         if (scrollSnapshotRafRef.current !== null) cancelAnimationFrame(scrollSnapshotRafRef.current)
         scrollSnapshotRafRef.current = requestAnimationFrame(() => {
           scrollSnapshotRafRef.current = null
-          setScrollOffsetFromBottom(prev => {
-            const delta = nextOffset - prev
-            if (Math.abs(delta) < 1) return prev
-            setPremeasureDirection(delta > 0 ? 'older' : 'newer')
-            return nextOffset
-          })
+          // no-op: kept for forward compat (was used for premeasure direction)
         })
       }, [])
 
-      useEffect(() => {
-        const root = scrollRoot
-        if (!root || typeof ResizeObserver === 'undefined') return
-
-        const syncViewport = () => {
-          const nextSize = { width: root.clientWidth, height: root.clientHeight }
-          const previousSize = lastScrollRootSizeRef.current
-          const hasPreviousSize = previousSize.width > 0 || previousSize.height > 0
-          const widthChanged = Math.abs(previousSize.width - nextSize.width) >= 1
-          const heightChanged = Math.abs(previousSize.height - nextSize.height) >= 1
-
-          if (widthChanged || heightChanged) {
-            lastScrollRootSizeRef.current = nextSize
-            if (hasPreviousSize) {
-              setIsResizePremeasurePaused(true)
-              clearResizePremeasurePauseTimer()
-              resizePremeasurePauseTimerRef.current = window.setTimeout(() => {
-                resizePremeasurePauseTimerRef.current = null
-                setStaleMeasuredPageKeys(new Set(measuredPageHeightKeysRef.current))
-                setIsResizePremeasurePaused(false)
-              }, RESIZE_PREMEASURE_PAUSE_MS)
-            }
-          }
-
-          setViewportHeight(prev => (Math.abs(prev - nextSize.height) < 1 ? prev : nextSize.height))
-        }
+      const handleScrollContainerScroll = useCallback(() => {
+        // `useAutoScroll` owns the userScrolled state machine. The page
+        // virtualization snapshot is driven from the same scroll event so
+        // premeasure direction updates in lockstep with auto-follow.
+        autoScroll.handleScroll()
+        updateScrollOffsetSnapshot()
+      }, [autoScroll, updateScrollOffsetSnapshot])
 
-        syncViewport()
-        const observer = new ResizeObserver(syncViewport)
-        observer.observe(root)
-        return () => observer.disconnect()
-      }, [clearResizePremeasurePauseTimer, scrollRoot])
+      const handleScrollContainerWheel = useCallback(() => {
+        // Orthogonal to auto-follow: only feeds the load-more cooldown so
+        // history loads don't fire mid-scroll. `useAutoScroll` adds its own
+        // passive wheel listener internally for the follow-mode toggle.
+        lastWheelInputAtRef.current = Date.now()
+      }, [])
 
+      // Sync the offset snapshot once on mount / scrollRoot change so the
+      // first frame has accurate data.
       useEffect(() => {
-        const root = scrollRef.current
-        if (!root) return
-
-        const onScroll = () => {
-          const hasOverflow = root.scrollHeight > root.clientHeight + 1
-          const distFromBottom = Math.abs(root.scrollTop)
-          const atBottom = !hasOverflow || distFromBottom <= atBottomThreshold
-          const previous = isAtBottomRef.current
-          isAtBottomRef.current = atBottom
-          if (previous !== atBottom) onAtBottomChange?.(atBottom)
-
-          if (!atBottom) loadMoreBlockedRef.current = false
-          updateScrollOffsetSnapshot()
-        }
-
-        const onWheel = () => {
-          lastWheelInputAtRef.current = Date.now()
-        }
-
-        root.addEventListener('scroll', onScroll, { passive: true })
-        root.addEventListener('wheel', onWheel, { passive: true })
         updateScrollOffsetSnapshot()
-        return () => {
-          root.removeEventListener('scroll', onScroll)
-          root.removeEventListener('wheel', onWheel)
-        }
-      }, [atBottomThreshold, onAtBottomChange, updateScrollOffsetSnapshot])
+      }, [scrollRoot, updateScrollOffsetSnapshot])
+
+      // Bridge `autoScroll.userScrolled` to the existing at-bottom state,
+      // the legacy `isAtBottomRef` consumers, and the load-more gate.
+      useEffect(() => {
+        const atBottom = !autoScroll.userScrolled
+        const previous = isAtBottomRef.current
+        isAtBottomRef.current = atBottom
+        if (previous !== atBottom) onAtBottomChange?.(atBottom)
+        if (!atBottom) loadMoreBlockedRef.current = false
+      }, [autoScroll.userScrolled, onAtBottomChange])
 
       const prevSessionIdRef = useRef(sessionId)
       useEffect(() => {
@@ -491,7 +355,6 @@ export const ChatArea = memo(
         loadMoreBlockedRef.current = true
         pendingLoadMoreAnchorRef.current = null
         previousActivePagesRef.current = { sessionId, pages: [] }
-        lastStreamingPageKeysRef.current = new Set()
         clearPendingLoadMoreAnchorMessage()
         topSentinelVisibleRef.current = false
         loadMoreRequestIdRef.current += 1
@@ -506,7 +369,7 @@ export const ChatArea = memo(
         requestAnimationFrame(() => {
           const root = scrollRef.current
           if (!root) return
-          root.scrollTop = 0
+          root.scrollTop = root.scrollHeight
           updateScrollOffsetSnapshot()
           animate(root, { opacity: [0, 1] }, { duration: 0.2, ease: 'easeOut' })
         })
@@ -527,12 +390,44 @@ export const ChatArea = memo(
         requestAnimationFrame(() => {
           const root = scrollRef.current
           if (root && isAtBottomRef.current) {
-            root.scrollTop = 0
+            root.scrollTop = root.scrollHeight
             updateScrollOffsetSnapshot()
           }
         })
       }, [loadState, updateScrollOffsetSnapshot])
 
+      // Core load-more logic: capture the current top-of-viewport anchor so
+      // the user's scroll position doesn't shift when the new history is
+      // prepended, then fire the actual `onLoadMore` callback. Returns a
+      // Promise that resolves when the fetch settles (or immediately if
+      // one of the no-op guards short-circuits). Shared by the
+      // IntersectionObserver-driven `tryLoadMore` (which adds user-
+      // engagement gates before reaching here) and the explicit
+      // `loadMoreHistory` imperative handle (which bypasses them).
+      const performLoadMore = useCallback((): Promise<void> => {
+        const fn = loadMoreRef.current
+        if (!fn) return Promise.resolve()
+        const sid = sessionId
+        if (!sid) return Promise.resolve()
+        if (isLoadingRef.current) return Promise.resolve()
+
+        const root = scrollRef.current
+        if (root) {
+          const anchor = captureLoadMoreAnchor(root, activePages.length)
+          pendingLoadMoreAnchorRef.current = anchor
+        }
+
+        const requestId = ++loadMoreRequestIdRef.current
+        const requestSessionId = sid
+        isLoadingRef.current = true
+        setIsLoadingMore(true)
+        return Promise.resolve(fn()).finally(() => {
+          if (loadMoreRequestIdRef.current !== requestId || sessionId !== requestSessionId) return
+          isLoadingRef.current = false
+          setIsLoadingMore(false)
+        })
+      }, [activePages.length, sessionId])
+
       const tryLoadMore = useCallback(() => {
         if (isLoadingRef.current) return
         if (!topSentinelVisibleRef.current) return
@@ -556,23 +451,8 @@ export const ChatArea = memo(
           return
         }
 
-        const root = scrollRef.current
-        if (root) {
-          const anchor = captureLoadMoreAnchor(root, activePages.length)
-          pendingLoadMoreAnchorRef.current = anchor
-          setPendingLoadMoreAnchorMessageId(anchor?.messageId ?? null)
-        }
-
-        const requestId = ++loadMoreRequestIdRef.current
-        const requestSessionId = sid
-        isLoadingRef.current = true
-        setIsLoadingMore(true)
-        Promise.resolve(fn()).finally(() => {
-          if (loadMoreRequestIdRef.current !== requestId || sessionId !== requestSessionId) return
-          isLoadingRef.current = false
-          setIsLoadingMore(false)
-        })
-      }, [activePages.length, clearPendingLoadMoreTimer, sessionId])
+        performLoadMore()
+      }, [clearPendingLoadMoreTimer, performLoadMore, sessionId])
 
       useEffect(() => {
         tryLoadMoreRef.current = tryLoadMore
@@ -624,24 +504,6 @@ export const ChatArea = memo(
         }
       }, [activePages, clearPendingLoadMoreAnchorMessage, updateScrollOffsetSnapshot])
 
-      useLayoutEffect(() => {
-        const anchor = pendingLayoutAnchorRef.current
-        const root = scrollRef.current
-        if (!anchor || !root) return
-
-        const target = root.querySelector<HTMLElement>(`[data-message-id="${anchor.messageId}"]`)
-        pendingLayoutAnchorRef.current = null
-        if (!target) return
-
-        const rootRect = root.getBoundingClientRect()
-        const nextTopOffset = target.getBoundingClientRect().top - rootRect.top
-        const delta = computeAnchorRestoreScrollDelta(anchor.topOffset, nextTopOffset)
-        if (Math.abs(delta) >= 1) {
-          root.scrollTop += delta
-          updateScrollOffsetSnapshot()
-        }
-      }, [activePages, measuredPageHeights, renderSegments, updateScrollOffsetSnapshot])
-
       const onVisibleIdsChangeRef = useRef(onVisibleMessageIdsChange)
       useEffect(() => {
         onVisibleIdsChangeRef.current = onVisibleMessageIdsChange
@@ -677,7 +539,7 @@ export const ChatArea = memo(
         elements.forEach(element => observer.observe(element))
 
         return () => observer.disconnect()
-      }, [activePages, expandedPageRange.endIndex, expandedPageRange.startIndex])
+      }, [activePages])
 
       useEffect(() => {
         if (!pendingScrollMessageId) return
@@ -694,33 +556,17 @@ export const ChatArea = memo(
           settlingScrollMessageIdRef.current = null
           setPendingScrollMessageId(current => (current === pendingScrollMessageId ? null : current))
         }, PENDING_SCROLL_TARGET_KEEPALIVE_MS)
-      }, [activePages, clearPendingScrollTimer, expandedPageRange.endIndex, expandedPageRange.startIndex, pendingScrollMessageId])
+      }, [activePages, clearPendingScrollTimer, pendingScrollMessageId])
 
       const updateMeasuredPageHeight = useCallback((pageKey: string, nextHeight: number) => {
         if (nextHeight <= 0) return
         setMeasuredPageHeights(previous => {
           const current = previous[pageKey] ?? null
           if (current !== null && Math.abs(current - nextHeight) < 1) return previous
-          const root = scrollRef.current
-          if (root && !isAtBottomRef.current) {
-            pendingLayoutAnchorRef.current = captureLoadMoreAnchor(root)
-          }
           const next = { ...previous, [pageKey]: nextHeight }
           measuredPageHeightKeysRef.current = Object.keys(next)
           return next
         })
-        setForcedPremeasurePageKeys(previous => {
-          if (!previous.has(pageKey)) return previous
-          const next = new Set(previous)
-          next.delete(pageKey)
-          return next
-        })
-        setStaleMeasuredPageKeys(previous => {
-          if (!previous.has(pageKey)) return previous
-          const next = new Set(previous)
-          next.delete(pageKey)
-          return next
-        })
       }, [])
 
       const requestScrollToMessage = useCallback(
@@ -734,32 +580,38 @@ export const ChatArea = memo(
             return
           }
 
+          if (!activePages.length) return
+
           const targetPageIndex = activePages.findIndex(page => page.messageIds.includes(messageId))
           if (targetPageIndex === -1) return
 
-          const pageOffsets = buildPageOffsets(activePages, measuredPageHeights)
-          root.scrollTo({ top: -pageOffsets[targetPageIndex], behavior: behavior === 'smooth' ? 'auto' : behavior })
+          // Use the virtualizer to scroll to the page containing the target
+          // message. The virtualizer handles scroll-position math internally.
+          pageVirtualizer.scrollToIndex(targetPageIndex, { align: 'start' })
           updateScrollOffsetSnapshot()
           settlingScrollMessageIdRef.current = null
           clearPendingScrollTimer()
           setPendingScrollMessageId(messageId)
         },
-        [activePages, clearPendingScrollTimer, measuredPageHeights, updateScrollOffsetSnapshot],
+        [activePages, clearPendingScrollTimer, pageVirtualizer, updateScrollOffsetSnapshot],
       )
 
       useImperativeHandle(
         ref,
         () => ({
-          scrollToBottom: (instant = false) => {
-            const root = scrollRef.current
-            if (!root) return
-            root.scrollTo({ top: 0, behavior: instant ? 'auto' : 'smooth' })
+          scrollToBottom: (_instant = false) => {
+            // The user explicitly asked to follow the bottom again — clear
+            // `userScrolled` and snap there immediately. The legacy `instant`
+            // param is ignored: a "go to bottom" button shouldn't smooth-scroll
+            // past the entire conversation.
+            autoScroll.resume()
           },
           scrollToBottomIfAtBottom: () => {
-            const root = scrollRef.current
-            if (!root) return
-            if (Math.abs(root.scrollTop) > 2) return
-            root.scrollTop = 0
+            // SSE "scroll request" handler: only follow if the user hasn't
+            // intentionally scrolled away. Gated by `userScrolled` rather than
+            // a numerical `scrollTop` check — semantically the same in
+            // practice, but resilient to resize-induced position drift.
+            autoScroll.scrollToBottom()
           },
           scrollToLastMessage: () => {
             if (visibleMessages.length === 0) return
@@ -773,32 +625,18 @@ export const ChatArea = memo(
           scrollToMessageId: (messageId: string) => {
             requestScrollToMessage(messageId, 'smooth')
           },
+          updateClearanceHeight: (height: number) => {
+            const clearanceIndex = activePages.length
+            if (height > 0 && clearanceIndex < pageVirtualizer.options.count) {
+              pageVirtualizer.resizeItem(clearanceIndex, height)
+            }
+          },
         }),
-        [requestScrollToMessage, visibleMessages],
+        [activePages.length, autoScroll, pageVirtualizer, requestScrollToMessage, visibleMessages],
       )
 
       return (
         <div className="h-full overflow-hidden contain-strict relative">
-          {effectivePagesToPremeasure.length > 0 && (
-            <div
-              className="absolute left-0 right-0 top-0 pointer-events-none opacity-0"
-              style={{ visibility: 'hidden', contain: 'layout style paint' }}
-              aria-hidden="true"
-            >
-              {effectivePagesToPremeasure.map(page => (
-                <PageMeasureBlock
-                  key={page.key}
-                  page={page}
-                  messageMaxWidthClass={messageMaxWidthClass}
-                  messagePaddingClass={messagePaddingClass}
-                  turnDurationMap={localTurnDurationMap}
-                  forkTargetIdMap={localForkTargetIdMap}
-                  allowStreamingLayoutAnimation={false}
-                  onMeasuredHeightChange={updateMeasuredPageHeight}
-                />
-              ))}
-            </div>
-          )}
 
           {loadState === 'loading' && visibleMessages.length === 0 && (
             <div className="absolute inset-0 z-10 flex items-center justify-center">
@@ -811,28 +649,84 @@ export const ChatArea = memo(
 
           <div
             ref={setScrollContainerRef}
+            onScroll={handleScrollContainerScroll}
+            onWheel={handleScrollContainerWheel}
             data-chat-scroll-root="true"
-            className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col-reverse"
+            className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col"
           >
-            <div className="flex-1" />
-
-            <div
-              className="shrink-0"
-              style={{
-                height: bottomPadding > 0 ? `${bottomPadding + 48}px` : '256px',
-              }}
-            />
+            <div ref={topSentinelRef} className="h-px shrink-0" aria-hidden="true" />
+            <div className="mobile-chat-top-spacer shrink-0" />
 
-            {retryStatus && (
-              <div className={`w-full ${messageMaxWidthClass} mx-auto ${messagePaddingClass} shrink-0`}>
-                <div className="flex justify-start">
-                  <div className="w-full min-w-0">
-                    <RetryStatusInline status={retryStatus} />
-                  </div>
+            {visibleMessages.length > 0 && isLoadingMore && (
+              <div className="flex justify-center py-3 shrink-0">
+                <div className="flex items-center gap-2 text-text-400 text-[length:var(--fs-sm)]">
+                  <span className="w-3.5 h-3.5 border-2 border-text-400/30 border-t-text-400 rounded-full animate-spin" />
+                  {t('chatArea.loadingHistory')}
                 </div>
               </div>
             )}
 
+            <div
+              ref={setContentWrapperRef}
+              onClick={autoScroll.handleInteraction}
+              className="relative"
+              style={{ height: `${pageVirtualizer.getTotalSize()}px` }}
+            >
+              {pageVirtualizer.getVirtualItems().map(virtualItem => {
+                // Last virtual item is the input-box clearance spacer.
+                if (virtualItem.index === activePages.length) {
+                  return (
+                    <div
+                      key={virtualItem.key}
+                      data-index={virtualItem.index}
+                      ref={pageVirtualizer.measureElement}
+                      className="shrink-0"
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: `${virtualItem.size}px`,
+                        transform: `translateY(${virtualItem.start}px)`,
+                        pointerEvents: 'none',
+                      }}
+                    />
+                  )
+                }
+                const page = activePages[virtualItem.index]
+                if (!page) return null
+                return (
+                  <div
+                    key={virtualItem.key}
+                    data-index={virtualItem.index}
+                    ref={pageVirtualizer.measureElement}
+                    className="shrink-0"
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualItem.start}px)`,
+                    }}
+                  >
+                    <PageBlock
+                      page={page}
+                      messageMaxWidthClass={messageMaxWidthClass}
+                      messagePaddingClass={messagePaddingClass}
+                      registerMessage={registerMessage}
+                      onUndo={onUndo}
+                      onFork={onFork}
+                      canUndo={canUndo}
+                      turnDurationMap={localTurnDurationMap}
+                      forkTargetIdMap={localForkTargetIdMap}
+                      allowStreamingLayoutAnimation={allowStreamingLayoutAnimation}
+                      onMeasuredHeightChange={updateMeasuredPageHeight}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+
             {visibleMessages.length === 0 && (loadError || connectionError) && (
               <div className={`w-full ${messageMaxWidthClass} mx-auto ${messagePaddingClass} shrink-0`}>
                 <div className="flex justify-start">
@@ -852,38 +746,17 @@ export const ChatArea = memo(
               </div>
             )}
 
-            {renderSegments.map(segment =>
-              segment.kind === 'expanded' ? (
-                <PageBlock
-                  key={segment.key}
-                  page={segment.page}
-                  messageMaxWidthClass={messageMaxWidthClass}
-                  messagePaddingClass={messagePaddingClass}
-                  registerMessage={registerMessage}
-                  onUndo={onUndo}
-                  onFork={onFork}
-                  canUndo={canUndo}
-                  turnDurationMap={localTurnDurationMap}
-                  forkTargetIdMap={localForkTargetIdMap}
-                  allowStreamingLayoutAnimation={allowStreamingLayoutAnimation}
-                  onMeasuredHeightChange={updateMeasuredPageHeight}
-                />
-              ) : (
-                <CollapsedPagesBlock key={segment.key} height={segment.height} />
-              ),
-            )}
-
-            {visibleMessages.length > 0 && isLoadingMore && (
-              <div className="flex justify-center py-3 shrink-0">
-                <div className="flex items-center gap-2 text-text-400 text-[length:var(--fs-sm)]">
-                  <span className="w-3.5 h-3.5 border-2 border-text-400/30 border-t-text-400 rounded-full animate-spin" />
-                  {t('chatArea.loadingHistory')}
+            {retryStatus && (
+              <div className={`w-full ${messageMaxWidthClass} mx-auto ${messagePaddingClass} shrink-0`}>
+                <div className="flex justify-start">
+                  <div className="w-full min-w-0">
+                    <RetryStatusInline status={retryStatus} />
+                  </div>
                 </div>
               </div>
             )}
 
-            <div className="mobile-chat-top-spacer shrink-0" />
-            <div ref={topSentinelRef} className="h-px shrink-0" aria-hidden="true" />
+            <div className="flex-1" />
           </div>
         </div>
       )
@@ -979,60 +852,6 @@ const PageBlock = memo(function PageBlock({
   )
 })
 
-interface PageMeasureBlockProps {
-  page: ChatPage
-  messageMaxWidthClass: string
-  messagePaddingClass: string
-  turnDurationMap: Map<string, number>
-  forkTargetIdMap: Map<string, string | undefined>
-  allowStreamingLayoutAnimation: boolean
-  onMeasuredHeightChange: (pageKey: string, nextHeight: number) => void
-}
-
-const PageMeasureBlock = memo(function PageMeasureBlock({
-  page,
-  messageMaxWidthClass,
-  messagePaddingClass,
-  turnDurationMap,
-  forkTargetIdMap,
-  allowStreamingLayoutAnimation,
-  onMeasuredHeightChange,
-}: PageMeasureBlockProps) {
-  const wrapperRef = usePageHeightMeasurement(page.key, onMeasuredHeightChange)
-
-  return (
-    <div ref={wrapperRef} className="shrink-0" data-page-measure-key={page.key}>
-      {page.rows.map(row => {
-        const isUser = row.messages[0].info.role === 'user'
-        return (
-          <div key={row.key} className={`w-full ${messageMaxWidthClass} mx-auto ${messagePaddingClass} py-3`}>
-            <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
-              <div className={`min-w-0 group ${!isUser ? 'w-full' : ''} flex flex-col gap-2`}>
-                {row.messages.map(message => (
-                  <div key={message.info.id}>
-                    <MessageRenderer
-                      message={message}
-                      allowStreamingLayoutAnimation={allowStreamingLayoutAnimation}
-                      turnDuration={turnDurationMap.get(message.info.id)}
-                      onFork={undefined}
-                      forkMessageId={forkTargetIdMap.get(message.info.id)}
-                      onEnsureParts={NOOP}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-})
-
-const CollapsedPagesBlock = memo(function CollapsedPagesBlock({ height }: { height: number }) {
-  return <div className="shrink-0" style={{ height: `${height}px`, overflowAnchor: 'none' }} aria-hidden="true" />
-})
-
 interface RenderedMessageItemProps {
   messageId: string
   registerMessage?: (id: string, element: HTMLElement | null) => void
diff --git a/src/features/chat/ChatPane.tsx b/src/features/chat/ChatPane.tsx
index 47bde28c..72f61dbb 100644
--- a/src/features/chat/ChatPane.tsx
+++ b/src/features/chat/ChatPane.tsx
@@ -223,7 +223,7 @@ export const ChatPane = memo(function ChatPane({
   }, [])
 
   // ============================================
-  // Input Box Height
+  // Input Box Height (for padding-bottom clearance)
   // ============================================
   const [inputBoxHeight, setInputBoxHeight] = useState(0)
   const inputBoxWrapperRef = useRef<HTMLDivElement>(null)
@@ -240,6 +240,15 @@ export const ChatPane = memo(function ChatPane({
     return () => ro.disconnect()
   }, [])
 
+  // Sync detected InputBox height → virtualizer clearance item.
+  // `resizeItem` bypasses the virtualizer's item-size cache, which
+  // `estimateSize` alone cannot update after the initial measurement.
+  useEffect(() => {
+    if (inputBoxHeight > 0) {
+      chatAreaRef.current?.updateClearanceHeight(inputBoxHeight)
+    }
+  }, [inputBoxHeight])
+
   // ============================================
   // Chat Session
   // ============================================
diff --git a/src/hooks/useAutoScroll.test.ts b/src/hooks/useAutoScroll.test.ts
new file mode 100644
index 00000000..a0c65526
--- /dev/null
+++ b/src/hooks/useAutoScroll.test.ts
@@ -0,0 +1,313 @@
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useAutoScroll } from './useAutoScroll'
+
+interface FakeScrollElement extends HTMLElement {
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+}
+
+function createScrollElement(initial: { scrollTop?: number; scrollHeight: number; clientHeight: number }): FakeScrollElement {
+  const el = document.createElement('div') as FakeScrollElement
+  el.scrollTop = initial.scrollTop ?? 0
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: initial.scrollHeight })
+  Object.defineProperty(el, 'clientHeight', { configurable: true, value: initial.clientHeight })
+  return el
+}
+
+function mountAutoScroll(
+  initial: Parameters<typeof createScrollElement>[0],
+  options: { working?: boolean; onUserInteracted?: () => void; reverse?: boolean; bottomThreshold?: number } = {},
+) {
+  const scrollEl = createScrollElement(initial)
+  const contentEl = document.createElement('div')
+  scrollEl.appendChild(contentEl)
+  document.body.appendChild(scrollEl)
+
+  const result = renderHook(
+    ({ working }: { working: boolean }) =>
+      useAutoScroll({
+        working,
+        onUserInteracted: options.onUserInteracted,
+        reverse: options.reverse ?? true,
+        bottomThreshold: options.bottomThreshold,
+      }),
+    { initialProps: { working: options.working ?? true } },
+  )
+
+  act(() => {
+    result.result.current.scrollRef(scrollEl)
+    result.result.current.contentRef(contentEl)
+  })
+
+  return { ...result, scrollEl, contentEl }
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.innerHTML = ''
+})
+
+describe('useAutoScroll (flex-col-reverse mode)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  it('starts at the bottom (scrollTop=0) when working turns on', () => {
+    const { scrollEl, result, rerender } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300 },
+      { working: false },
+    )
+    expect(result.current.userScrolled).toBe(false)
+    rerender({ working: true })
+    expect(scrollEl.scrollTop).toBe(0)
+  })
+
+  it('does not scroll when user has already scrolled away and stream starts', () => {
+    const { scrollEl, result, rerender } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300 },
+      { working: false },
+    )
+    // Simulate the user scrolled up — scrollTop becomes negative in reverse flow.
+    scrollEl.scrollTop = -250
+    act(() => {
+      window.dispatchEvent(new Event('scroll'))
+    })
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -100, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    rerender({ working: true })
+    // Auto-follow must NOT yank the user back to the bottom.
+    expect(scrollEl.scrollTop).toBe(-250)
+  })
+
+  it('keeps scrollTop at 0 when content grows while following', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 500, clientHeight: 300, scrollTop: 0 })
+    expect(result.current.userScrolled).toBe(false)
+
+    // Simulate content growth pushing more height.
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 900 })
+    act(() => {
+      scrollEl.dispatchEvent(new Event('scroll'))
+    })
+    // Bottom is still 0 in reverse flow.
+    expect(scrollEl.scrollTop).toBe(0)
+  })
+
+  it('marks userScrolled when the user wheels up', () => {
+    const onUserInteracted = vi.fn()
+    const { scrollEl, result } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 0 },
+      { onUserInteracted },
+    )
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+    expect(onUserInteracted).toHaveBeenCalledTimes(1)
+  })
+
+  it('does NOT mark userScrolled for downward wheel (overscroll / momentum)', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: 100, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(false)
+  })
+
+  it('ignores wheel events originating inside a [data-scrollable] region', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    const nested = document.createElement('div')
+    nested.setAttribute('data-scrollable', '')
+    scrollEl.appendChild(nested)
+
+    act(() => {
+      nested.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(false)
+  })
+
+  it('clears userScrolled on resume() and snaps to bottom', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    scrollEl.scrollTop = -250
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    act(() => {
+      result.current.resume()
+    })
+    expect(result.current.userScrolled).toBe(false)
+    expect(scrollEl.scrollTop).toBe(0)
+  })
+
+  it('forceScrollToBottom overrides userScrolled', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    scrollEl.scrollTop = -250
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    act(() => {
+      result.current.forceScrollToBottom()
+    })
+    expect(result.current.userScrolled).toBe(false)
+    expect(scrollEl.scrollTop).toBe(0)
+  })
+
+  it('scrollToBottom() is a no-op when user has scrolled away', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    scrollEl.scrollTop = -250
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    act(() => {
+      result.current.scrollToBottom()
+    })
+    expect(scrollEl.scrollTop).toBe(-250)
+  })
+
+  it('handleScroll clears userScrolled when content shrinks below threshold', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    scrollEl.scrollTop = -200
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    // Content shrinks so we're within the threshold again.
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 300 })
+    scrollEl.scrollTop = -5
+    act(() => {
+      result.current.handleScroll()
+    })
+    expect(result.current.userScrolled).toBe(false)
+  })
+
+  it('handleInteraction stops follow when text is selected while working', () => {
+    const { result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    expect(result.current.userScrolled).toBe(false)
+
+    // jsdom doesn't implement real selection, so we stub it.
+    const selection = { toString: () => 'hello' }
+    const original = window.getSelection
+    window.getSelection = () => selection as unknown as Selection
+    try {
+      act(() => {
+        result.current.handleInteraction()
+      })
+      expect(result.current.userScrolled).toBe(true)
+    } finally {
+      window.getSelection = original
+    }
+  })
+
+  it('handleInteraction is a no-op when nothing is selected', () => {
+    const { result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    const selection = { toString: () => '' }
+    const original = window.getSelection
+    window.getSelection = () => selection as unknown as Selection
+    try {
+      act(() => {
+        result.current.handleInteraction()
+      })
+      expect(result.current.userScrolled).toBe(false)
+    } finally {
+      window.getSelection = original
+    }
+  })
+
+  it('settle window keeps follow active for 300ms after working turns off', () => {
+    const { scrollEl, rerender } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 0 },
+      { working: true },
+    )
+    // working → false
+    rerender({ working: false })
+    // While settling, a content growth should still snap to bottom.
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 1200 })
+    act(() => {
+      scrollEl.dispatchEvent(new Event('scroll'))
+    })
+    expect(scrollEl.scrollTop).toBe(0)
+
+    // After 300ms, settle ends.
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+    // From now on, a content growth should NOT auto-scroll.
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 1500 })
+    act(() => {
+      scrollEl.dispatchEvent(new Event('scroll'))
+    })
+    // userScrolled is still false (we never moved away from bottom), so we
+    // remain at scrollTop=0 — but a new incoming scroll event that pushes us
+    // away should not trigger an auto-scroll back.
+    expect(scrollEl.scrollTop).toBe(0)
+  })
+
+  it('overflow-anchor=dynamic applies "none" when following, "auto" when user has scrolled', () => {
+    const { scrollEl, result } = mountAutoScroll({ scrollHeight: 1000, clientHeight: 300, scrollTop: 0 })
+    expect(scrollEl.style.overflowAnchor).toBe('none')
+
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+    expect(scrollEl.style.overflowAnchor).toBe('auto')
+
+    act(() => {
+      result.current.resume()
+    })
+    expect(scrollEl.style.overflowAnchor).toBe('none')
+  })
+
+  it('overflow-anchor=none forces "none" regardless of state', () => {
+    const scrollEl = createScrollElement({ scrollHeight: 1000, clientHeight: 300 })
+    document.body.appendChild(scrollEl)
+
+    const result = renderHook(() =>
+      useAutoScroll({ working: true, overflowAnchor: 'none', reverse: true }),
+    )
+
+    act(() => {
+      result.result.current.scrollRef(scrollEl)
+    })
+    expect(scrollEl.style.overflowAnchor).toBe('none')
+  })
+})
+
+describe('useAutoScroll (normal flow mode)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  it('snaps to scrollHeight when working starts', () => {
+    const { scrollEl, rerender } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 0 },
+      { working: false, reverse: false },
+    )
+    rerender({ working: true })
+    // Normal flow: bottom is scrollHeight, not 0.
+    expect(scrollEl.scrollTop).toBe(1000)
+  })
+
+  it('marks userScrolled on wheel up', () => {
+    const { scrollEl, result } = mountAutoScroll(
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 1000 },
+      { reverse: false },
+    )
+    scrollEl.scrollTop = 500
+    act(() => {
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+  })
+})
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
new file mode 100644
index 00000000..d60c8022
--- /dev/null
+++ b/src/hooks/useAutoScroll.ts
@@ -0,0 +1,437 @@
+/**
+ * useAutoScroll — React port of OpenCode's `createAutoScroll` (SolidJS).
+ *
+ * The scroll container uses a single direction convention:
+ * - `reverse: false` (default) — normal flow. `scrollTop = 0` is the top of the
+ *   scrollable content; the "at bottom" position is `scrollHeight - clientHeight`.
+ *   This is what plain `<div>` flex/grid children produce.
+ * - `reverse: true` — the container renders children in `flex-col-reverse` (or
+ *   similar). `scrollTop = 0` is the visual bottom; scrolling up produces a
+ *   negative `scrollTop`. The "at bottom" position is `scrollTop = 0`.
+ *   This is what OpenCodeUI's ChatArea uses.
+ *
+ * Public API mirrors OpenCode's `createAutoScroll`:
+ * - `scrollRef` / `contentRef` — ref setters
+ * - `handleScroll` — pass to the scroll container's `onScroll`
+ * - `handleInteraction` — pass to the content wrapper's `onClick` (catches the
+ *   "user is selecting text while stream is active" case)
+ * - `pause()` — mark user-scrolled, stop following
+ * - `resume()` — clear user-scrolled, snap to bottom
+ * - `scrollToBottom()` — soft (gated by userScrolled)
+ * - `forceScrollToBottom()` — hard (always)
+ * - `userScrolled` — boolean state for reactive consumers
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+export interface UseAutoScrollOptions {
+  /** Whether the content is actively growing (e.g. assistant is streaming). */
+  working: boolean
+  /** Fired when the user explicitly leaves "follow bottom" mode. */
+  onUserInteracted?: () => void
+  /** CSS overflow-anchor mode. Defaults to "dynamic" (auto when following, none when user-scrolled). */
+  overflowAnchor?: 'none' | 'auto' | 'dynamic'
+  /** Pixel threshold for "is at the bottom". Defaults to 10. */
+  bottomThreshold?: number
+  /**
+   * True when the scroll container lays out content in reverse (e.g.
+   * `flex-col-reverse`), so `scrollTop = 0` is the visual bottom. Defaults to
+   * false to match OpenCode's normal-flow convention; OpenCodeUI's ChatArea
+   * sets this to true.
+   */
+  reverse?: boolean
+}
+
+interface AutoMarker {
+  /** The `scrollTop` value that corresponds to the "at bottom" position. */
+  top: number
+  /** Timestamp the marker was set (used to age it out). */
+  time: number
+}
+
+const AUTO_MARK_TIMEOUT_MS = 1500
+const SETTLE_TIMEOUT_MS = 300
+
+export interface UseAutoScrollReturn {
+  scrollRef: (el: HTMLElement | null) => void
+  contentRef: (el: HTMLElement | null) => void
+  handleScroll: () => void
+  handleInteraction: () => void
+  pause: () => void
+  resume: () => void
+  scrollToBottom: () => void
+  forceScrollToBottom: () => void
+  userScrolled: boolean
+}
+
+export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollReturn {
+  const { working, onUserInteracted, overflowAnchor = 'dynamic', bottomThreshold = 10, reverse = false } = options
+
+  // State-backed refs: when these change, all dependent effects re-attach.
+  const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null)
+  const [contentEl, setContentEl] = useState<HTMLElement | null>(null)
+
+  // Refs that are read inside event listeners / callbacks. They need to point
+  // at the *current* element, not the one captured at callback creation time.
+  // Mirrored via a layout effect (see below) so the ref is up to date before
+  // any listener fires.
+  const scrollElRef = useRef<HTMLElement | null>(null)
+  const contentElRef = useRef<HTMLElement | null>(null)
+
+  // Internal state for the auto-follow logic.
+  const userScrolledRef = useRef(false)
+  const autoRef = useRef<AutoMarker | undefined>(undefined)
+  const settlingRef = useRef(false)
+  const autoTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Mirror `userScrolled` to React state so consumers can re-render on change.
+  const [userScrolled, setUserScrolledState] = useState(false)
+
+  // `working`, `reverse`, and `bottomThreshold` are read inside event
+  // listeners — keep refs so the callbacks always see the latest value
+  // without re-binding. Mirrored via layout effect below.
+  const workingRef = useRef(working)
+  const reverseRef = useRef(reverse)
+  const bottomThresholdRef = useRef(bottomThreshold)
+
+  const setUserScrolled = useCallback((next: boolean) => {
+    if (userScrolledRef.current === next) return
+    userScrolledRef.current = next
+    setUserScrolledState(next)
+  }, [])
+
+  // Mirror state into refs so event listeners can read the latest values
+  // without re-binding. Layout effect runs after render, before paint, so
+  // any wheel/scroll event in the next frame sees the up-to-date ref.
+  useLayoutEffect(() => {
+    scrollElRef.current = scrollEl
+  }, [scrollEl])
+  useLayoutEffect(() => {
+    contentElRef.current = contentEl
+  }, [contentEl])
+  useLayoutEffect(() => {
+    workingRef.current = working
+  }, [working])
+  useLayoutEffect(() => {
+    reverseRef.current = reverse
+  }, [reverse])
+  useLayoutEffect(() => {
+    bottomThresholdRef.current = bottomThreshold
+  }, [bottomThreshold])
+
+  // ============================================================
+  // Helpers — distance / canScroll / at-bottom position.
+  // Read `reverse` from a ref so the callbacks that wrap these stay stable.
+  // ============================================================
+  const distanceFromBottom = (el: HTMLElement): number => {
+    if (reverseRef.current) {
+      return Math.abs(el.scrollTop)
+    }
+    return el.scrollHeight - el.clientHeight - el.scrollTop
+  }
+
+  const canScroll = (el: HTMLElement): boolean => {
+    return el.scrollHeight - el.clientHeight > 1
+  }
+
+  // The `scrollTop` value that means "at the bottom". In normal flow this is
+  // the max scroll position; in reverse flow it is 0.
+  const bottomScrollTop = (el: HTMLElement): number => {
+    if (reverseRef.current) return 0
+    return Math.max(0, el.scrollHeight - el.clientHeight)
+  }
+
+  // ============================================================
+  // Auto-marker — distinguish our own scrollTo from user gestures
+  // ============================================================
+  const clearAutoTimer = () => {
+    if (autoTimerRef.current !== null) {
+      clearTimeout(autoTimerRef.current)
+      autoTimerRef.current = null
+    }
+  }
+
+  const markAuto = (el: HTMLElement) => {
+    autoRef.current = {
+      top: bottomScrollTop(el),
+      time: Date.now(),
+    }
+    clearAutoTimer()
+    autoTimerRef.current = setTimeout(() => {
+      autoRef.current = undefined
+      autoTimerRef.current = null
+    }, AUTO_MARK_TIMEOUT_MS)
+  }
+
+  const isAuto = (el: HTMLElement): boolean => {
+    const a = autoRef.current
+    if (!a) return false
+    if (Date.now() - a.time > AUTO_MARK_TIMEOUT_MS) {
+      autoRef.current = undefined
+      return false
+    }
+    return Math.abs(el.scrollTop - a.top) < 2
+  }
+
+  // ============================================================
+  // Scroll-to-bottom
+  // ============================================================
+  // `markAuto` reads only refs, so the callback identity is stable across
+  // renders — no need to include it in the deps.
+  const scrollToBottomNow = useCallback((behavior: ScrollBehavior) => {
+    const el = scrollElRef.current
+    if (!el) return
+    markAuto(el)
+    if (reverseRef.current) {
+      // For `flex-col-reverse` containers, "at bottom" is scrollTop = 0.
+      // `scrollTo({ top: 0, behavior: 'smooth' })` respects smooth behavior;
+      // `scrollTop = 0` bypasses CSS `scroll-behavior: smooth`.
+      if (behavior === 'smooth') {
+        el.scrollTo({ top: 0, behavior })
+      } else {
+        el.scrollTop = 0
+      }
+      return
+    }
+    if (behavior === 'smooth') {
+      el.scrollTo({ top: el.scrollHeight, behavior })
+    } else {
+      el.scrollTop = el.scrollHeight
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const active = (): boolean => workingRef.current || settlingRef.current
+
+  const scrollToBottom = useCallback(
+    (force: boolean) => {
+      if (!force && !active()) return
+
+      if (force && userScrolledRef.current) setUserScrolled(false)
+
+      const el = scrollElRef.current
+      if (!el) return
+
+      if (!force && userScrolledRef.current) return
+
+      const distance = distanceFromBottom(el)
+      if (distance < 2) {
+        markAuto(el)
+        return
+      }
+
+      // For auto-following content we prefer immediate updates to avoid
+      // visible "catch up" animations while content is still settling.
+      scrollToBottomNow('auto')
+    },
+    // `markAuto` reads only refs — identity is stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollToBottomNow, setUserScrolled],
+  )
+
+  // ============================================================
+  // stop() / handleWheel — user has explicitly left "follow bottom"
+  // ============================================================
+  const stop = useCallback(() => {
+    const el = scrollElRef.current
+    if (!el) return
+    if (!canScroll(el)) {
+      if (userScrolledRef.current) setUserScrolled(false)
+      return
+    }
+    if (userScrolledRef.current) return
+
+    setUserScrolled(true)
+    onUserInteracted?.()
+  }, [onUserInteracted, setUserScrolled])
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      // Only "up" gestures (toward earlier content) can leave follow mode;
+      // downward gestures are part of normal following and may be produced by
+      // overscroll, momentum, etc.
+      if (e.deltaY >= 0) return
+      const el = scrollElRef.current
+      const target = e.target instanceof Element ? e.target : undefined
+      // Nested scrollable regions (tool output, code block) opt out via
+      // `data-scrollable`. If the wheel started inside one of them, don't
+      // treat it as leaving the main scroll's follow mode.
+      const nested = target?.closest('[data-scrollable]')
+      if (el && nested && nested !== el) return
+      stop()
+    },
+    [stop],
+  )
+
+  // ============================================================
+  // handleScroll — update userScrolled from current scroll position
+  // ============================================================
+  const handleScroll = useCallback(() => {
+    const el = scrollElRef.current
+    if (!el) return
+
+    if (!canScroll(el)) {
+      if (userScrolledRef.current) setUserScrolled(false)
+      return
+    }
+
+    if (distanceFromBottom(el) < bottomThresholdRef.current) {
+      if (userScrolledRef.current) setUserScrolled(false)
+      return
+    }
+
+    // Ignore scroll events triggered by our own scrollToBottom calls — they
+    // can fire asynchronously after new content has been inserted, which
+    // would otherwise look like a user scroll.
+    if (!userScrolledRef.current && isAuto(el)) {
+      scrollToBottom(false)
+      return
+    }
+
+    stop()
+  }, [scrollToBottom, setUserScrolled, stop])
+
+  // ============================================================
+  // handleInteraction — user is interacting with the content (text
+  // selection during a live stream = they want to stop following)
+  // ============================================================
+  const handleInteraction = useCallback(() => {
+    if (!active()) return
+    const selection = typeof window !== 'undefined' ? window.getSelection() : null
+    if (selection && selection.toString().length > 0) {
+      stop()
+    }
+  }, [stop])
+
+  // ============================================================
+  // overflowAnchor management
+  // ============================================================
+  const updateOverflowAnchor = useCallback(
+    (el: HTMLElement) => {
+      if (overflowAnchor === 'none') {
+        el.style.overflowAnchor = 'none'
+        return
+      }
+      if (overflowAnchor === 'auto') {
+        el.style.overflowAnchor = 'auto'
+        return
+      }
+      // 'dynamic' — anchor disabled while following, enabled when user has
+      // scrolled away (so their viewport doesn't jump when content grows).
+      el.style.overflowAnchor = userScrolledRef.current ? 'auto' : 'none'
+    },
+    [overflowAnchor],
+  )
+
+  // ============================================================
+  // Ref setters
+  // ============================================================
+  const setScrollRef = useCallback(
+    (el: HTMLElement | null) => {
+      setScrollEl(el)
+      if (el) updateOverflowAnchor(el)
+    },
+    [updateOverflowAnchor],
+  )
+
+  const setContentRef = useCallback((el: HTMLElement | null) => {
+    setContentEl(el)
+  }, [])
+
+  // ============================================================
+  // ResizeObserver on content — keep the bottom locked in the same
+  // frame when content grows while we're following.
+  // ============================================================
+  useEffect(() => {
+    if (!contentEl || typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(() => {
+      const scrollElLocal = scrollElRef.current
+      if (scrollElLocal && !canScroll(scrollElLocal)) {
+        if (userScrolledRef.current) setUserScrolled(false)
+        return
+      }
+      if (!active()) return
+      if (userScrolledRef.current) return
+      scrollToBottom(false)
+    })
+    observer.observe(contentEl)
+    return () => observer.disconnect()
+  }, [contentEl, scrollToBottom, setUserScrolled])
+
+  // ============================================================
+  // working edge — start/clear the settle window
+  // ============================================================
+  useLayoutEffect(() => {
+    settlingRef.current = false
+    if (settleTimerRef.current !== null) {
+      clearTimeout(settleTimerRef.current)
+      settleTimerRef.current = null
+    }
+
+    if (working) {
+      // Stream just started — snap to bottom (force=true) so we don't
+      // appear stuck at an old scroll position.
+      if (!userScrolledRef.current) scrollToBottom(true)
+      return
+    }
+
+    // Stream just stopped — give the layout 300ms to settle (final tokens
+    // can land a few frames later) before pausing follow mode.
+    settlingRef.current = true
+    settleTimerRef.current = setTimeout(() => {
+      settlingRef.current = false
+      settleTimerRef.current = null
+    }, SETTLE_TIMEOUT_MS)
+  }, [working, scrollToBottom])
+
+  // ============================================================
+  // userScrolled → update overflow-anchor on the scroll element
+  // ============================================================
+  useLayoutEffect(() => {
+    if (!scrollEl) return
+    updateOverflowAnchor(scrollEl)
+  }, [userScrolled, scrollEl, updateOverflowAnchor])
+
+  // ============================================================
+  // wheel listener — attached imperatively so it doesn't re-bind on
+  // every render. Re-attaches when the scroll element changes.
+  // ============================================================
+  useEffect(() => {
+    if (!scrollEl) return
+    scrollEl.addEventListener('wheel', handleWheel, { passive: true })
+    return () => scrollEl.removeEventListener('wheel', handleWheel)
+  }, [scrollEl, handleWheel])
+
+  // ============================================================
+  // Cleanup timers on unmount.
+  // ============================================================
+  useEffect(() => {
+    return () => {
+      if (settleTimerRef.current !== null) {
+        clearTimeout(settleTimerRef.current)
+        settleTimerRef.current = null
+      }
+      if (autoTimerRef.current !== null) {
+        clearTimeout(autoTimerRef.current)
+        autoTimerRef.current = null
+      }
+    }
+  }, [])
+
+  return {
+    scrollRef: setScrollRef,
+    contentRef: setContentRef,
+    handleScroll,
+    handleInteraction,
+    pause: stop,
+    resume: () => {
+      if (userScrolledRef.current) setUserScrolled(false)
+      scrollToBottom(true)
+    },
+    scrollToBottom: () => scrollToBottom(false),
+    forceScrollToBottom: () => scrollToBottom(true),
+    userScrolled,
+  }
+}

From 85cd3c7e04aee0dc92fe1762de0da79869c96b2d Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 12:19:22 +0800
Subject: [PATCH 02/18] fix: reverse chat page order so oldest messages render
 first (top to bottom)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

buildChatPages was returning pages in newest-first order, causing the
virtual list to render the newest content at the top and oldest content
at the bottom. This made the chat feel inverted — scrolling down showed
older messages instead of newer ones.

- buildChatPages: reverse the result so pages[0] = oldest (top)
- flattenPagesMessageIdsChronological: no longer needs .reverse()
- reconcileStableChatPages: update indices — newest page is now last,
  older pages prepend to the front
- Fix tests to match oldest-first ordering
---
 src/features/chat/ChatArea.test.ts | 13 +++++++------
 src/features/chat/chatPageModel.ts | 16 ++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/features/chat/ChatArea.test.ts b/src/features/chat/ChatArea.test.ts
index 8b31bf70..4b6ff7a5 100644
--- a/src/features/chat/ChatArea.test.ts
+++ b/src/features/chat/ChatArea.test.ts
@@ -183,12 +183,12 @@ describe('buildChatPages', () => {
 
     const pages = buildChatPages(messages, 2)
 
-    // render order: newest page first
+    // render order: oldest page first
     expect(pages).toHaveLength(3)
-    expect(pages[0].messageIds).toEqual(['user-2', 'assistant-3'])
+    expect(pages[0].messageIds).toEqual(['user-1'])
     // assistant-1 + assistant-2 应该保持在同一个 group/page，不被拆开
     expect(pages[1].messageIds).toEqual(['assistant-1', 'assistant-2'])
-    expect(pages[2].messageIds).toEqual(['user-1'])
+    expect(pages[2].messageIds).toEqual(['user-2', 'assistant-3'])
   })
 })
 
@@ -441,7 +441,8 @@ describe('reconcileStableChatPages', () => {
     ]
     const nextPages = reconcileStableChatPages({ currentPages, nextMessages, allocateKey: alloc, pageMessageCount: 2 })
 
-    expect(nextPages.slice(0, currentPages.length).map(page => page.key)).toEqual(currentPages.map(page => page.key))
+    // 老的页在 oldest-first 中应保持末尾（新消息 prepend 到开头）
+    expect(nextPages.slice(nextPages.length - currentPages.length).map(page => page.key)).toEqual(currentPages.map(page => page.key))
   })
 
   it('only rebuilds the newest page segment when appending new messages', () => {
@@ -456,8 +457,8 @@ describe('reconcileStableChatPages', () => {
     const nextMessages = [...currentMessages, createUserMessage('user-3', 7), createAssistantMessage('assistant-3', [], 8, 9)]
     const nextPages = reconcileStableChatPages({ currentPages, nextMessages, allocateKey: alloc, pageMessageCount: 2 })
 
-    // 老的第二页 key 应该保住，避免整段历史一起重切
-    expect(nextPages[nextPages.length - 1].key).toBe(currentPages[currentPages.length - 1].key)
+    // 最旧的页 key 应该保住，避免整段历史一起重切
+    expect(nextPages[0].key).toBe(currentPages[0].key)
   })
 })
 
diff --git a/src/features/chat/chatPageModel.ts b/src/features/chat/chatPageModel.ts
index 2f2bad01..16a70355 100644
--- a/src/features/chat/chatPageModel.ts
+++ b/src/features/chat/chatPageModel.ts
@@ -110,7 +110,8 @@ export function buildChatPages(messages: Message[], pageMessageCount = PAGE_MESS
     renderPages.push(buildChatPage(currentRows))
   }
 
-  return renderPages
+  // 构建时是按 newest→oldest 顺序 push 的，反转使 pages[0] = 最旧（顶部）
+  return renderPages.reverse()
 }
 
 function buildChatPage(rows: MessageGroupRow[]): ChatPage {
@@ -138,10 +139,8 @@ function flattenPageMessagesChronological(page: ChatPage): Message[] {
 }
 
 function flattenPagesMessageIdsChronological(pages: ChatPage[]): string[] {
-  return pages
-    .slice()
-    .reverse()
-    .flatMap(page => page.messageIds)
+  // pages 已经是 chrono 顺序（oldest first），可直接展开
+  return pages.flatMap(page => page.messageIds)
 }
 
 export function findMessageSequenceOffset(nextIds: string[], previousIds: string[]): number {
@@ -209,17 +208,18 @@ export function reconcileStableChatPages(options: {
 
   let nextPages = refreshedPages
   if (suffixMessages.length > 0) {
+    // suffixed 消息是最新的，应替换页列表末尾（最新页）
     const newestSegmentMessages = [
-      ...(refreshedPages.length > 0 ? flattenPageMessagesChronological(refreshedPages[0]) : []),
+      ...(refreshedPages.length > 0 ? flattenPageMessagesChronological(refreshedPages[refreshedPages.length - 1]) : []),
       ...suffixMessages,
     ]
     const rebuiltNewestPages = buildStableChatPages(newestSegmentMessages, allocateKey, pageMessageCount)
-    nextPages = [...rebuiltNewestPages, ...refreshedPages.slice(1)]
+    nextPages = [...refreshedPages.slice(0, -1), ...rebuiltNewestPages]
   }
 
   if (prefixMessages.length > 0) {
     const prependedOlderPages = buildStableChatPages(prefixMessages, allocateKey, pageMessageCount)
-    nextPages = [...nextPages, ...prependedOlderPages]
+    nextPages = [...prependedOlderPages, ...nextPages]
   }
 
   return nextPages

From 8563b37e4759b0a0aa56fea520bd366615697768 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 12:22:15 +0800
Subject: [PATCH 03/18] fix: auto-scroll to bottom when last page expands while
 user is at bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

shouldAdjustScrollPositionOnItemSizeChange blocked all size-change scroll
adjustments for items below the viewport. When the last page (newest
content) expanded — from streaming or block expansion — the content
grew below the viewport without scroll compensation, hiding it behind
the input box.

The fix allows scroll adjustment when the viewport is near the bottom
(distanceToBottom < 2x threshold), so end-anchored content stays visible
when it grows.
---
 src/features/chat/ChatArea.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index f1322937..1ee2e13c 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -251,9 +251,22 @@ export const ChatArea = memo(
 
       // When an item above the viewport changes size, adjust scrollTop to keep
       // the visible content stable. Items below the viewport changing size
-      // should NOT trigger any scroll adjustment. This is the core jitter fix.
-      pageVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) =>
-        item.end <= (instance.scrollOffset ?? 0)
+      // should NOT trigger any scroll adjustment by default, because that
+      // causes jitter. The exception is when the user is actively following
+      // content (autoScroll.userScrolled = false) — items growing below the
+      // viewport should push the scroll down so the new content stays visible
+      // instead of being hidden behind the input box.
+      pageVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
+        const scrollOffset = instance.scrollOffset ?? 0
+        // Item is above/at the viewport → adjust to keep visual position stable
+        if (item.end <= scrollOffset) return true
+        // User is following content → allow adjustment for items below
+        // viewport so expanded content stays visible (prevents content from
+        // being hidden behind the input box during auto-expansion).
+        // Does NOT trigger when the user has manually scrolled away.
+        if (!autoScroll.userScrolled) return true
+        return false
+      }
 
       const clearPendingLoadMoreTimer = useCallback(() => {
         if (pendingLoadMoreTimerRef.current === null) return

From 4cc782e0837d838061321c5df5e0e5509b68602f Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 12:35:18 +0800
Subject: [PATCH 04/18] fix: auto-snap to bottom when user scrolls within
 threshold; always follow content height changes

1. Deferred snap: when user stops scrolling within the snap zone
   (bottomThreshold), smoothly scroll to the very bottom after 150ms
   delay so the latest content is fully visible.

2. Removed !active() gate from scrollToBottom and ResizeObserver:
   content height changes (block expansion, tool results rendering)
   always trigger scroll-to-bottom when user is following, not just
   during streaming or the 300ms settle window.
---
 src/hooks/useAutoScroll.ts | 45 ++++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index d60c8022..0c88380a 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -84,6 +84,7 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   const settlingRef = useRef(false)
   const autoTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const snapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Mirror `userScrolled` to React state so consumers can re-render on change.
   const [userScrolled, setUserScrolledState] = useState(false)
@@ -206,8 +207,6 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
 
   const scrollToBottom = useCallback(
     (force: boolean) => {
-      if (!force && !active()) return
-
       if (force && userScrolledRef.current) setUserScrolled(false)
 
       const el = scrollElRef.current
@@ -267,6 +266,13 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   // ============================================================
   // handleScroll — update userScrolled from current scroll position
   // ============================================================
+  const clearSnapTimer = useCallback(() => {
+    if (snapTimerRef.current !== null) {
+      clearTimeout(snapTimerRef.current)
+      snapTimerRef.current = null
+    }
+  }, [])
+
   const handleScroll = useCallback(() => {
     const el = scrollElRef.current
     if (!el) return
@@ -278,9 +284,24 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
 
     if (distanceFromBottom(el) < bottomThresholdRef.current) {
       if (userScrolledRef.current) setUserScrolled(false)
+      // Deferred snap: once the user stops scrolling within the snap zone,
+      // smoothly scroll to the very bottom so latest content is fully visible.
+      if (snapTimerRef.current === null) {
+        snapTimerRef.current = setTimeout(() => {
+          snapTimerRef.current = null
+          const current = scrollElRef.current
+          if (!current || userScrolledRef.current) return
+          if (distanceFromBottom(current) < bottomThresholdRef.current) {
+            scrollToBottomNow('smooth')
+          }
+        }, 150)
+      }
       return
     }
 
+    // User scrolled outside the snap zone → cancel pending snap
+    clearSnapTimer()
+
     // Ignore scroll events triggered by our own scrollToBottom calls — they
     // can fire asynchronously after new content has been inserted, which
     // would otherwise look like a user scroll.
@@ -290,7 +311,7 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
     }
 
     stop()
-  }, [scrollToBottom, setUserScrolled, stop])
+  }, [scrollToBottom, setUserScrolled, stop, scrollToBottomNow, clearSnapTimer])
 
   // ============================================================
   // handleInteraction — user is interacting with the content (text
@@ -340,8 +361,10 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   }, [])
 
   // ============================================================
-  // ResizeObserver on content — keep the bottom locked in the same
-  // frame when content grows while we're following.
+  // ResizeObserver on content — keep the bottom locked in view.
+  // Fires on every content height change (streaming, block expansion,
+  // tool results rendering). Only gated by userScrolled — we always
+  // follow when the user hasn't explicitly scrolled away.
   // ============================================================
   useEffect(() => {
     if (!contentEl || typeof ResizeObserver === 'undefined') return
@@ -352,7 +375,6 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
         if (userScrolledRef.current) setUserScrolled(false)
         return
       }
-      if (!active()) return
       if (userScrolledRef.current) return
       scrollToBottom(false)
     })
@@ -409,14 +431,9 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   // ============================================================
   useEffect(() => {
     return () => {
-      if (settleTimerRef.current !== null) {
-        clearTimeout(settleTimerRef.current)
-        settleTimerRef.current = null
-      }
-      if (autoTimerRef.current !== null) {
-        clearTimeout(autoTimerRef.current)
-        autoTimerRef.current = null
-      }
+      if (snapTimerRef.current !== null) clearTimeout(snapTimerRef.current)
+      if (settleTimerRef.current !== null) clearTimeout(settleTimerRef.current)
+      if (autoTimerRef.current !== null) clearTimeout(autoTimerRef.current)
     }
   }, [])
 

From b4e62b8bb2edab3c20fb58a22d9aa441d7434672 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 12:37:53 +0800
Subject: [PATCH 05/18] fix: debounce snap timer and use instant scroll to
 prevent canceling follow mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reset snap timer on each scroll event (debounced), not just once,
  so the snap only fires 150ms after the user truly stops scrolling
- Use 'auto' (instant) instead of 'smooth' for the snap — prevents
  intermediate scroll events during animation from triggering stop()
---
 src/hooks/useAutoScroll.ts | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index 0c88380a..061fbead 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -284,18 +284,19 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
 
     if (distanceFromBottom(el) < bottomThresholdRef.current) {
       if (userScrolledRef.current) setUserScrolled(false)
-      // Deferred snap: once the user stops scrolling within the snap zone,
-      // smoothly scroll to the very bottom so latest content is fully visible.
-      if (snapTimerRef.current === null) {
-        snapTimerRef.current = setTimeout(() => {
-          snapTimerRef.current = null
-          const current = scrollElRef.current
-          if (!current || userScrolledRef.current) return
-          if (distanceFromBottom(current) < bottomThresholdRef.current) {
-            scrollToBottomNow('smooth')
-          }
-        }, 150)
-      }
+      // Deferred snap: debounced — resets on each scroll event so it only
+      // fires 150ms after the user has stopped scrolling. Uses instant
+      // scroll ('auto') so no intermediate scroll events are generated that
+      // could cancel follow mode.
+      if (snapTimerRef.current !== null) clearTimeout(snapTimerRef.current)
+      snapTimerRef.current = setTimeout(() => {
+        snapTimerRef.current = null
+        const current = scrollElRef.current
+        if (!current || userScrolledRef.current) return
+        if (distanceFromBottom(current) < bottomThresholdRef.current) {
+          scrollToBottomNow('auto')
+        }
+      }, 150)
       return
     }
 

From d89d815234a8d06679a2dc070452dd1f1042bed4 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Thu, 25 Jun 2026 17:40:10 +0800
Subject: [PATCH 06/18] refactor: mobile input collapse bar with CSS grid-rows
 transition; fix escape valve stuck on textarea focus

- Replace CollapsedCapsule (centered pill) with full-width CollapsedBar
- Use grid-rows transition for smooth height + opacity crossfade (same pattern as attachments)
- Remove expandedHeight placeholder (overlay legacy; no longer needed in flex flow)
- Fix escape valve: allow clearing isFocused when tapping chat area even if textarea focused
- Allow collapse when hasContent (text preserved in always-mounted DOM)
---
 src/constants/ui.ts                          |  14 +-
 src/features/chat/ChatArea.tsx               | 144 ++++++++++---------
 src/features/chat/ChatPane.tsx               |  32 +----
 src/features/chat/InputBox.tsx               |  83 ++++++-----
 src/features/chat/input/InputActions.tsx     |  20 +--
 src/features/chat/input/useMobileCollapse.ts |  45 ++----
 src/hooks/useAutoScroll.ts                   |  87 ++++++-----
 src/main.tsx                                 |  12 ++
 8 files changed, 212 insertions(+), 225 deletions(-)

diff --git a/src/constants/ui.ts b/src/constants/ui.ts
index 14ed52af..6146e414 100644
--- a/src/constants/ui.ts
+++ b/src/constants/ui.ts
@@ -1,2 +1,14 @@
-/** 底部判断阈值 */
+/**
+ * 底部判断阈值 —— 三个功能共用同一个值：
+ * 1. to-bottom 按钮：用户滚动超出该距离，按钮显示
+ * 2. auto-follow：新内容是否自动跟随（userScrolled 在该阈值内为 false）
+ * 3. auto-snap：内容增长时，接近底部是否自动吸附到底部
+ */
 export const AT_BOTTOM_THRESHOLD_PX = 60
+
+/**
+ * Sub-pixel 容差 —— 用于"scrollTop 是否本质上等于标记的 bottom 位置"，
+ * 区分"我们自己 scrollToBottom 触发的 scroll"和"用户的 scroll"。
+ * 与 AT_BOTTOM_THRESHOLD_PX 是不同概念，单独命名避免 magic number。
+ */
+export const BOTTOM_NUDGE_TOLERANCE_PX = 2
diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index 1ee2e13c..cc699c36 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -48,6 +48,7 @@ const LOAD_MORE_ROOT_MARGIN = '240px 0px 0px 0px'
 const LOAD_MORE_WHEEL_COOLDOWN_MS = 90
 const LOAD_MORE_DEFER_MS = 100
 const PENDING_SCROLL_TARGET_KEEPALIVE_MS = 900
+const SCROLL_GESTURE_WINDOW_MS = 250
 
 type LoadMoreAnchorSnapshot = {
   messageId: string
@@ -100,7 +101,6 @@ interface ChatAreaProps {
   canUndo?: boolean
   registerMessage?: (id: string, element: HTMLElement | null) => void
   retryStatus?: RetryStatusInlineData | null
-  bottomPadding?: number
   onVisibleMessageIdsChange?: (ids: string[]) => void
   onAtBottomChange?: (atBottom: boolean) => void
 }
@@ -111,8 +111,6 @@ export type ChatAreaHandle = {
   scrollToLastMessage: () => void
   scrollToMessageIndex: (index: number) => void
   scrollToMessageId: (messageId: string) => void
-  /** Resize the bottom-clearance virtual item (input-box spacer). */
-  updateClearanceHeight: (height: number) => void
 }
 
 export const ChatArea = memo(
@@ -138,7 +136,6 @@ export const ChatArea = memo(
         hasMoreHistory: _hasMoreHistory = false,
         registerMessage,
         retryStatus = null,
-        bottomPadding = 0,
         onVisibleMessageIdsChange,
         onAtBottomChange,
       },
@@ -166,6 +163,7 @@ export const ChatArea = memo(
       const loadMoreRequestIdRef = useRef(0)
       const topSentinelVisibleRef = useRef(false)
       const lastWheelInputAtRef = useRef(0)
+      const lastUserGestureAtRef = useRef(0)
       const tryLoadMoreRef = useRef<() => void>(NOOP)
 
       useEffect(() => {
@@ -176,8 +174,8 @@ export const ChatArea = memo(
 
       const { isWideMode } = useTheme()
       const { presentation } = useChatViewport()
-      const atBottomThreshold = presentation.isCompact ? 150 : AT_BOTTOM_THRESHOLD_PX
-      const messagePaddingClass = presentation.isCompact ? 'px-3' : 'px-5'
+      const atBottomThreshold = AT_BOTTOM_THRESHOLD_PX
+      const messagePaddingClass = presentation.isCompact ? 'px-3' : 'px-6'
       const messageMaxWidthClass = isWideMode ? 'max-w-[95%] xl:max-w-6xl' : 'max-w-2xl'
       const autoScroll = useAutoScroll({
         working: _isStreaming,
@@ -232,41 +230,24 @@ export const ChatArea = memo(
       // Each page is a virtual item. `anchorTo: 'end'` pins the bottom when
       // the last item grows (streaming). `measureElement` tracks dynamic heights.
       const pageVirtualizer = useVirtualizer({
-        // One extra virtual item at the end for input-box clearance.
-        count: activePages.length + (bottomPadding > 0 ? 1 : 0),
+        count: activePages.length,
         getScrollElement: () => scrollRef.current,
         estimateSize: (index) => {
-          if (index === activePages.length) return bottomPadding
           const page = activePages[index]
           return measuredPageHeights[page.key] ?? page.estimatedHeight
         },
-        getItemKey: (index) => {
-          if (index === activePages.length) return '__clearance__'
-          return activePages[index]?.key ?? index
-        },
+        getItemKey: (index) => activePages[index]?.key ?? index,
         anchorTo: 'end',
+        followOnAppend: true,
         overscan: 20,
         scrollEndThreshold: atBottomThreshold,
       })
 
       // When an item above the viewport changes size, adjust scrollTop to keep
       // the visible content stable. Items below the viewport changing size
-      // should NOT trigger any scroll adjustment by default, because that
-      // causes jitter. The exception is when the user is actively following
-      // content (autoScroll.userScrolled = false) — items growing below the
-      // viewport should push the scroll down so the new content stays visible
-      // instead of being hidden behind the input box.
-      pageVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
-        const scrollOffset = instance.scrollOffset ?? 0
-        // Item is above/at the viewport → adjust to keep visual position stable
-        if (item.end <= scrollOffset) return true
-        // User is following content → allow adjustment for items below
-        // viewport so expanded content stays visible (prevents content from
-        // being hidden behind the input box during auto-expansion).
-        // Does NOT trigger when the user has manually scrolled away.
-        if (!autoScroll.userScrolled) return true
-        return false
-      }
+      // should NOT trigger any scroll adjustment. This is the core jitter fix.
+      pageVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) =>
+        item.end <= (instance.scrollOffset ?? 0)
 
       const clearPendingLoadMoreTimer = useCallback(() => {
         if (pendingLoadMoreTimerRef.current === null) return
@@ -305,6 +286,7 @@ export const ChatArea = memo(
           if (scrollSnapshotRafRef.current !== null) cancelAnimationFrame(scrollSnapshotRafRef.current)
           if (pendingAnchorClearRafRef.current !== null) cancelAnimationFrame(pendingAnchorClearRafRef.current)
           if (pendingSessionResetRafRef.current !== null) cancelAnimationFrame(pendingSessionResetRafRef.current)
+          if (heightBatchRafRef.current !== null) cancelAnimationFrame(heightBatchRafRef.current)
         }
       }, [clearPendingLoadMoreTimer, clearPendingScrollTimer])
 
@@ -330,20 +312,30 @@ export const ChatArea = memo(
       }, [])
 
       const handleScrollContainerScroll = useCallback(() => {
-        // `useAutoScroll` owns the userScrolled state machine. The page
-        // virtualization snapshot is driven from the same scroll event so
-        // premeasure direction updates in lockstep with auto-follow.
+        // OpenCode-style gate: only process scroll events that were triggered
+        // by a recent user gesture (wheel, touch, pointer). Virtualizer-driven
+        // scroll adjustments (from measureElement / anchorTo) generate scroll
+        // events too — those must be ignored, otherwise handleScroll sees the
+        // user "away from bottom" and calls stop(), killing auto-follow.
+        const hasGesture = Date.now() - lastUserGestureAtRef.current < SCROLL_GESTURE_WINDOW_MS
+        if (!hasGesture) return
         autoScroll.handleScroll()
         updateScrollOffsetSnapshot()
       }, [autoScroll, updateScrollOffsetSnapshot])
 
       const handleScrollContainerWheel = useCallback(() => {
-        // Orthogonal to auto-follow: only feeds the load-more cooldown so
-        // history loads don't fire mid-scroll. `useAutoScroll` adds its own
-        // passive wheel listener internally for the follow-mode toggle.
+        // Mark a user scroll gesture so the next batch of scroll events
+        // pass the gesture gate above. Also feeds load-more cooldown.
+        lastUserGestureAtRef.current = Date.now()
         lastWheelInputAtRef.current = Date.now()
       }, [])
 
+      const handleScrollContainerPointerDown = useCallback(() => {
+        // Scrollbar thumb drag: the onScroll events that follow should be
+        // treated as user-initiated.
+        lastUserGestureAtRef.current = Date.now()
+      }, [])
+
       // Sync the offset snapshot once on mount / scrollRoot change so the
       // first frame has accurate data.
       useEffect(() => {
@@ -571,14 +563,53 @@ export const ChatArea = memo(
         }, PENDING_SCROLL_TARGET_KEEPALIVE_MS)
       }, [activePages, clearPendingScrollTimer, pendingScrollMessageId])
 
+      const scrollToBottomRef = useRef(autoScroll.scrollToBottom)
+      scrollToBottomRef.current = autoScroll.scrollToBottom
+
+      // rAF-batched height collection.  Multiple pages can grow in the same
+      // frame (SmoothHeight animations, streaming tokens).  Collect all
+      // pending heights and commit them once per frame so we trigger only one
+      // setMeasuredPageHeights, one React render, and one scrollToBottom.
+      const pendingHeightsRef = useRef<Record<string, number> | null>(null)
+      const heightBatchRafRef = useRef<number | null>(null)
+
       const updateMeasuredPageHeight = useCallback((pageKey: string, nextHeight: number) => {
         if (nextHeight <= 0) return
-        setMeasuredPageHeights(previous => {
-          const current = previous[pageKey] ?? null
-          if (current !== null && Math.abs(current - nextHeight) < 1) return previous
-          const next = { ...previous, [pageKey]: nextHeight }
-          measuredPageHeightKeysRef.current = Object.keys(next)
-          return next
+
+        // Collect heights in a ref — no state update yet.  This avoids N
+        // setMeasuredPageHeights calls and N React renders per frame.
+        if (pendingHeightsRef.current === null) {
+          pendingHeightsRef.current = {}
+        }
+        pendingHeightsRef.current[pageKey] = nextHeight
+
+        if (heightBatchRafRef.current !== null) return // rAF already scheduled
+
+        heightBatchRafRef.current = requestAnimationFrame(() => {
+          heightBatchRafRef.current = null
+          const pending = pendingHeightsRef.current
+          pendingHeightsRef.current = null
+          if (!pending) return
+
+          // Commit all collected heights in a single state update.
+          setMeasuredPageHeights(previous => {
+            let changed = false
+            const next = { ...previous }
+            for (const [key, height] of Object.entries(pending)) {
+              const current = previous[key] ?? null
+              if (current !== null && Math.abs(current - height) < 1) continue
+              next[key] = height
+              changed = true
+            }
+            if (!changed) return previous
+            measuredPageHeightKeysRef.current = Object.keys(next)
+            return next
+          })
+
+          // scrollHeight already reflects the new content — scroll now so the
+          // bottom stays visible.  Only one scroll per frame regardless of how
+          // many pages grew.
+          scrollToBottomRef.current()
         })
       }, [])
 
@@ -638,14 +669,8 @@ export const ChatArea = memo(
           scrollToMessageId: (messageId: string) => {
             requestScrollToMessage(messageId, 'smooth')
           },
-          updateClearanceHeight: (height: number) => {
-            const clearanceIndex = activePages.length
-            if (height > 0 && clearanceIndex < pageVirtualizer.options.count) {
-              pageVirtualizer.resizeItem(clearanceIndex, height)
-            }
-          },
         }),
-        [activePages.length, autoScroll, pageVirtualizer, requestScrollToMessage, visibleMessages],
+        [autoScroll, requestScrollToMessage, visibleMessages],
       )
 
       return (
@@ -664,6 +689,7 @@ export const ChatArea = memo(
             ref={setScrollContainerRef}
             onScroll={handleScrollContainerScroll}
             onWheel={handleScrollContainerWheel}
+            onPointerDown={handleScrollContainerPointerDown}
             data-chat-scroll-root="true"
             className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col"
           >
@@ -686,26 +712,6 @@ export const ChatArea = memo(
               style={{ height: `${pageVirtualizer.getTotalSize()}px` }}
             >
               {pageVirtualizer.getVirtualItems().map(virtualItem => {
-                // Last virtual item is the input-box clearance spacer.
-                if (virtualItem.index === activePages.length) {
-                  return (
-                    <div
-                      key={virtualItem.key}
-                      data-index={virtualItem.index}
-                      ref={pageVirtualizer.measureElement}
-                      className="shrink-0"
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: `${virtualItem.size}px`,
-                        transform: `translateY(${virtualItem.start}px)`,
-                        pointerEvents: 'none',
-                      }}
-                    />
-                  )
-                }
                 const page = activePages[virtualItem.index]
                 if (!page) return null
                 return (
@@ -768,8 +774,6 @@ export const ChatArea = memo(
                 </div>
               </div>
             )}
-
-            <div className="flex-1" />
           </div>
         </div>
       )
diff --git a/src/features/chat/ChatPane.tsx b/src/features/chat/ChatPane.tsx
index 72f61dbb..95920190 100644
--- a/src/features/chat/ChatPane.tsx
+++ b/src/features/chat/ChatPane.tsx
@@ -222,33 +222,6 @@ export const ChatPane = memo(function ChatPane({
     chatAreaRef.current?.scrollToMessageId(messageId)
   }, [])
 
-  // ============================================
-  // Input Box Height (for padding-bottom clearance)
-  // ============================================
-  const [inputBoxHeight, setInputBoxHeight] = useState(0)
-  const inputBoxWrapperRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const el = inputBoxWrapperRef.current
-    if (!el) return
-    const ro = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        setInputBoxHeight(entry.contentRect.height)
-      }
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
-  // Sync detected InputBox height → virtualizer clearance item.
-  // `resizeItem` bypasses the virtualizer's item-size cache, which
-  // `estimateSize` alone cannot update after the initial measurement.
-  useEffect(() => {
-    if (inputBoxHeight > 0) {
-      chatAreaRef.current?.updateClearanceHeight(inputBoxHeight)
-    }
-  }, [inputBoxHeight])
-
   // ============================================
   // Chat Session
   // ============================================
@@ -796,7 +769,7 @@ export const ChatPane = memo(function ChatPane({
         </div>
       )}
 
-      <div className="absolute inset-0">
+      <div className="flex-1 min-h-0 overflow-hidden">
         <InlineToolRequestContext.Provider value={inlineToolRequestCtx}>
           <ErrorBoundary onOpenSettings={onOpenSettings}>
             <ChatArea
@@ -820,7 +793,6 @@ export const ChatPane = memo(function ChatPane({
               canUndo={canUndo}
               registerMessage={registerMessage}
               retryStatus={retryStatus}
-              bottomPadding={inputBoxHeight}
               onVisibleMessageIdsChange={handleVisibleIdsChange}
               onAtBottomChange={setIsAtBottom}
             />
@@ -836,7 +808,7 @@ export const ChatPane = memo(function ChatPane({
         onScrollToMessageId={handleOutlineScrollToMessage}
       />
 
-      <div ref={inputBoxWrapperRef} className="absolute bottom-0 left-0 right-0 z-10 pointer-events-none">
+      <div className="relative z-10 pointer-events-none shrink-0">
         {(showCancelHint || (fullAutoHint && !showCancelHint)) && (
           <div className="absolute bottom-full inset-x-0 flex justify-center pb-2 pointer-events-none z-20">
             <div className="px-3 py-1.5 glass border border-border-200/60 rounded-lg shadow-lg text-[length:var(--fs-sm)] text-text-300 animate-in fade-in slide-in-from-bottom-2 duration-150">
diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 2f3d87c8..79366b0e 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -15,7 +15,7 @@ import { SlashCommandMenu, type SlashCommandMenuHandle } from '../slash-command'
 import { InputToolbar } from './input/InputToolbar'
 import type { ModelSelectorHandle } from './ModelSelector'
 import { InputFooter } from './input/InputFooter'
-import { FloatingActions, CollapsedCapsule } from './input/InputActions'
+import { FloatingActions, CollapsedBar } from './input/InputActions'
 import { useMobileCollapse } from './input/useMobileCollapse'
 import { useAttachmentRail } from './input/useAttachmentRail'
 import { useInputHistory } from './input/useInputHistory'
@@ -30,6 +30,7 @@ import {
 } from './input/inputUtils'
 import { keybindingStore, matchesKeybinding } from '../../store/keybindingStore'
 import { themeStore } from '../../store/themeStore'
+import { useTheme } from '../../hooks/useTheme'
 import { useChatViewport } from './chatViewport'
 import type { ApiAgent } from '../../api/client'
 import type { ModelInfo, FileCapabilities } from '../../api'
@@ -215,6 +216,7 @@ function InputBoxComponent({
     [fileCapabilitiesProp, supportsImages],
   )
   const { externalFileDropMode } = useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot)
+  const { isWideMode } = useTheme()
 
   // 是否有任何文件附件能力
   const supportsAnyFile = fileCaps.image || fileCaps.pdf || fileCaps.audio || fileCaps.video
@@ -274,11 +276,9 @@ function InputBoxComponent({
   // ============================================
   // Mobile Input Dock: 滚动收起/展开（逻辑在 useMobileCollapse hook 中）
   // ============================================
-  const hasContent = text.trim().length > 0 || attachments.length > 0
-  const { isCollapsed, expandedHeight, handleExpandInput, handleFocus, handleBlur, handleContainerPointerDown } =
+  const { isCollapsed, handleExpandInput, handleFocus, handleBlur, handleContainerPointerDown } =
     useMobileCollapse({
       enabled: interaction.enableCollapsedInputDock,
-      hasContent,
       isAtBottom,
       textareaRef,
       inputContainerRef,
@@ -1207,18 +1207,17 @@ function InputBoxComponent({
   return (
     <div className="w-full">
       <div
-        className={`mx-auto max-w-3xl pointer-events-auto transition-[max-width] duration-300 ease-in-out ${isCompact ? 'px-2' : 'px-4'}`}
+        className={`mx-auto ${isWideMode ? 'max-w-[1168px]' : 'max-w-[688px]'} pointer-events-auto transition-[max-width] duration-300 ease-in-out ${isCompact ? 'px-2' : 'px-4'}`}
         style={{ paddingBottom: bottomDockPadding }}
       >
         <div
           ref={contentWrapRef}
           onPointerDown={handleContainerPointerDown}
-          className={`relative flex flex-col gap-2 ${isCollapsed ? 'justify-end' : ''}`}
-          style={isCollapsed && expandedHeight > 0 ? { minHeight: expandedHeight } : undefined}
+          className="relative flex flex-col"
         >
-          {/* FloatingActions — 
+          {/* FloatingActions —
               展开态：absolute 定位在内容区上方，不占文档流，避免显隐变化影响高度导致滚动抖动
-              收起态：正常文档流，紧贴胶囊上方
+              收起态：正常文档流，紧贴紧凑栏上方
               始终同一 DOM 节点，切换时 FloatingActions 不 remount，避免入场动画闪烁 */}
           <div
             data-floating-actions
@@ -1243,17 +1242,29 @@ function InputBoxComponent({
             </div>
           </div>
 
-          {/* Collapsed Capsule - 移动端收起状态 */}
-          {isCollapsed && (
-            <CollapsedCapsule
-              onExpand={handleExpandInput}
-              showScrollToBottom={showScrollToBottom}
-              onScrollToBottom={onScrollToBottom}
-            />
-          )}
-
-          {!isCollapsed && (
-            <>
+          {/* 收起态紧凑栏 track：收起时撑开，展开时坍缩为 0（grid-rows + opacity 过渡，同附件展开所用的 CSS 模式） */}
+          <div
+            className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${
+              isCollapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none'
+            }`}
+          >
+            <div className="overflow-hidden">
+              <CollapsedBar
+                onExpand={handleExpandInput}
+                placeholder={isCompact ? t('inputBox.replyToAgentMobile') : t('inputBox.replyToAgent')}
+                showScrollToBottom={showScrollToBottom}
+                onScrollToBottom={onScrollToBottom}
+              />
+            </div>
+          </div>
+
+          {/* 展开态完整输入 track：展开时撑开，收起时坍缩为 0；始终挂载避免 remount，靠 0fr + overflow-hidden + pointer-events-none 隐藏 */}
+          <div
+            className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${
+              !isCollapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none'
+            }`}
+          >
+            <div className="overflow-hidden">
               {/* Wrapper — 菜单在 glass 容器外，避免嵌套 backdrop-filter 导致模糊失效 */}
               <div className="relative z-30">
                 {/* @ Mention Menu */}
@@ -1393,25 +1404,23 @@ function InputBoxComponent({
                   </div>
                 </div>
               </div>
-            </>
-          )}
-        </div>
 
-        {/* Footer: 输入框下方固定高度区域，内容垂直水平居中 */}
-        {!isCollapsed && (
-          <div
-            ref={footerRef}
-            onPointerDown={handleContainerPointerDown}
-            className="h-8 flex items-center justify-center"
-          >
-            <InputFooter
-              paneId={paneId}
-              sessionId={sessionId}
-              onNewChat={onNewChat}
-              inputContainerRef={inputContainerRef}
-            />
+              {/* Footer — 展开态固定高度区域，随 track 一起显隐 */}
+              <div
+                ref={footerRef}
+                onPointerDown={handleContainerPointerDown}
+                className="h-8 flex items-center justify-center"
+              >
+                <InputFooter
+                  paneId={paneId}
+                  sessionId={sessionId}
+                  onNewChat={onNewChat}
+                  inputContainerRef={inputContainerRef}
+                />
+              </div>
+            </div>
           </div>
-        )}
+        </div>
       </div>
     </div>
   )
diff --git a/src/features/chat/input/InputActions.tsx b/src/features/chat/input/InputActions.tsx
index ed1c53cd..5248d22f 100644
--- a/src/features/chat/input/InputActions.tsx
+++ b/src/features/chat/input/InputActions.tsx
@@ -121,30 +121,32 @@ export const FloatingActions = memo(function FloatingActions({
 })
 
 // ============================================
-// CollapsedCapsule — 移动端收起状态的胶囊 UI
+// CollapsedBar — 移动端收起状态的紧凑栏 UI
+// 全宽玻璃栏（圆角与输入框一致），不可输入，点击整栏展开
 // ============================================
 
-interface CollapsedCapsuleProps {
+interface CollapsedBarProps {
   onExpand: () => void
+  placeholder: string
   showScrollToBottom?: boolean
   onScrollToBottom?: () => void
 }
 
-export const CollapsedCapsule = memo(function CollapsedCapsule({
+export const CollapsedBar = memo(function CollapsedBar({
   onExpand,
+  placeholder,
   showScrollToBottom,
   onScrollToBottom,
-}: CollapsedCapsuleProps) {
-  const { t } = useTranslation(['chat', 'common'])
+}: CollapsedBarProps) {
   return (
-    <div className="flex items-center justify-center gap-2">
+    <div className="flex items-center gap-2">
       <button
         type="button"
         onClick={onExpand}
-        className="flex items-center gap-1.5 px-3 h-[32px] rounded-full glass border border-border-200/50 shadow-lg text-text-300 hover:text-text-200 hover:bg-bg-000 active:scale-95 transition-all"
+        className="group flex-1 flex items-center gap-2 px-4 min-h-[40px] rounded-2xl glass border border-border-200/60 shadow-lg text-left active:scale-[0.99] transition-transform"
       >
-        <ArrowUpIcon size={14} />
-        <span className="text-[length:var(--fs-xs)]">{t('inputActions.reply')}</span>
+        <span className="text-[length:var(--fs-sm)] text-text-400 truncate flex-1">{placeholder}</span>
+        <ArrowUpIcon size={16} className="text-text-400 group-active:text-text-200 transition-colors shrink-0" />
       </button>
       {showScrollToBottom && <ScrollToBottomButton onClick={onScrollToBottom} />}
     </div>
diff --git a/src/features/chat/input/useMobileCollapse.ts b/src/features/chat/input/useMobileCollapse.ts
index f7eac178..8291f5af 100644
--- a/src/features/chat/input/useMobileCollapse.ts
+++ b/src/features/chat/input/useMobileCollapse.ts
@@ -3,14 +3,12 @@ import type { CollapsedDialogInfo } from '../InputBox'
 
 // ============================================
 // useMobileCollapse
-// 移动端输入框滚动收起/展开（胶囊模式）的全部状态与逻辑
+// 移动端输入框滚动收起/展开（紧凑栏模式）的全部状态与逻辑
 // ============================================
 
 interface UseMobileCollapseOptions {
   /** 是否启用移动端输入交互（只代表交互，不代表 UI） */
   enabled: boolean
-  /** 文本内容是否非空 */
-  hasContent: boolean
   /** 是否处于页面底部 */
   isAtBottom: boolean
   /** textarea 的 ref */
@@ -29,11 +27,9 @@ interface UseMobileCollapseOptions {
 }
 
 interface UseMobileCollapseReturn {
-  /** 是否处于收起（胶囊）状态 */
+  /** 是否处于收起（紧凑栏）状态 */
   isCollapsed: boolean
-  /** 展开态时采样到的内容区高度（用于收起时撑占位） */
-  expandedHeight: number
-  /** 点击胶囊展开 */
+  /** 点击紧凑栏展开 */
   handleExpandInput: () => void
   /** textarea onFocus */
   handleFocus: () => void
@@ -45,7 +41,6 @@ interface UseMobileCollapseReturn {
 
 export function useMobileCollapse({
   enabled,
-  hasContent,
   isAtBottom,
   textareaRef,
   inputContainerRef,
@@ -73,12 +68,9 @@ export function useMobileCollapse({
 
   // 直接计算是否收起（纯派生值）
   const hasPendingDialogs = !!collapsedPermission || !!collapsedQuestion
-  const isCollapsed = enabled && !isAtBottom && !hasContent && !isFocused && !hasPendingDialogs
+  const isCollapsed = enabled && !isAtBottom && !isFocused && !hasPendingDialogs
 
-  // 展开态内容区高度（用于收起时占位，防 isAtBottom 反馈循环）
-  const [expandedHeight, setExpandedHeight] = useState(0)
-
-  // ---- 点击胶囊展开 ----
+  // ---- 点击紧凑栏展开 ----
   const handleExpandInput = useCallback(() => {
     setIsFocused(true)
     requestAnimationFrame(() => {
@@ -151,8 +143,14 @@ export function useMobileCollapse({
     const handleOutsidePointerDown = (e: PointerEvent) => {
       if (isInsideInputArea(e.target as Node)) return
 
-      // 光标仍在输入框内时，不清除（移动端滚动/触摸可能不会触发 blur）
-      if (document.activeElement === textareaRef.current) return
+      // textarea 聚焦时，用户触摸聊天区 → 清除 isFocused，允许收起。
+      // 移动端滑动聊天区不会触发 textarea blur，需要靠此逃逸阀兜底。
+      if (document.activeElement === textareaRef.current) {
+        setIsFocused(false)
+        return
+      }
+
+      // activeElement 是输入区内其他元素（如 portal 弹窗）→ 不清除
       if (isInsideInputArea(document.activeElement)) return
 
       setIsFocused(false)
@@ -165,22 +163,6 @@ export function useMobileCollapse({
     }
   }, [isFocused, enabled, isInsideInputArea, textareaRef])
 
-  // ---- 持续追踪展开态内容区高度 ----
-  useEffect(() => {
-    const el = contentWrapRef.current
-    if (!el) return
-    const ro = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        // 只在展开态时采样，收起态的高度不更新
-        if (!isCollapsed) {
-          setExpandedHeight(entry.contentRect.height)
-        }
-      }
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [isCollapsed, contentWrapRef])
-
   // ---- 注册输入框容器用于动画 ----
   useEffect(() => {
     if (registerInputBox) {
@@ -191,7 +173,6 @@ export function useMobileCollapse({
 
   return {
     isCollapsed,
-    expandedHeight,
     handleExpandInput,
     handleFocus,
     handleBlur,
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index 061fbead..f9cab93e 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -23,6 +23,7 @@
  */
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { AT_BOTTOM_THRESHOLD_PX, BOTTOM_NUDGE_TOLERANCE_PX } from '../constants/ui'
 
 export interface UseAutoScrollOptions {
   /** Whether the content is actively growing (e.g. assistant is streaming). */
@@ -31,7 +32,10 @@ export interface UseAutoScrollOptions {
   onUserInteracted?: () => void
   /** CSS overflow-anchor mode. Defaults to "dynamic" (auto when following, none when user-scrolled). */
   overflowAnchor?: 'none' | 'auto' | 'dynamic'
-  /** Pixel threshold for "is at the bottom". Defaults to 10. */
+  /**
+   * Pixel threshold for "is at the bottom" — shared by the to-bottom button,
+   * auto-follow, and auto-snap (see AT_BOTTOM_THRESHOLD_PX in constants/ui.ts).
+   */
   bottomThreshold?: number
   /**
    * True when the scroll container lays out content in reverse (e.g.
@@ -65,7 +69,7 @@ export interface UseAutoScrollReturn {
 }
 
 export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollReturn {
-  const { working, onUserInteracted, overflowAnchor = 'dynamic', bottomThreshold = 10, reverse = false } = options
+  const { working, onUserInteracted, overflowAnchor = 'dynamic', bottomThreshold = AT_BOTTOM_THRESHOLD_PX, reverse = false } = options
 
   // State-backed refs: when these change, all dependent effects re-attach.
   const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null)
@@ -84,7 +88,6 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   const settlingRef = useRef(false)
   const autoTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const snapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Mirror `userScrolled` to React state so consumers can re-render on change.
   const [userScrolled, setUserScrolledState] = useState(false)
@@ -172,9 +175,11 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
       autoRef.current = undefined
       return false
     }
-    return Math.abs(el.scrollTop - a.top) < 2
+    return Math.abs(el.scrollTop - a.top) < BOTTOM_NUDGE_TOLERANCE_PX
   }
 
+
+
   // ============================================================
   // Scroll-to-bottom
   // ============================================================
@@ -185,8 +190,8 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
     if (!el) return
     markAuto(el)
     if (reverseRef.current) {
-      // For `flex-col-reverse` containers, "at bottom" is scrollTop = 0.
-      // `scrollTo({ top: 0, behavior: 'smooth' })` respects smooth behavior;
+      // `flex-col-reverse` containers: "at bottom" is `scrollTop = 0`.
+      // `scrollTo({ top: 0, behavior })` respects smooth behavior;
       // `scrollTop = 0` bypasses CSS `scroll-behavior: smooth`.
       if (behavior === 'smooth') {
         el.scrollTo({ top: 0, behavior })
@@ -215,13 +220,14 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
       if (!force && userScrolledRef.current) return
 
       const distance = distanceFromBottom(el)
-      if (distance < 2) {
+      if (distance < BOTTOM_NUDGE_TOLERANCE_PX) {
         markAuto(el)
         return
       }
 
-      // For auto-following content we prefer immediate updates to avoid
-      // visible "catch up" animations while content is still settling.
+      // OpenCode-style: auto-follow always uses instant scroll.
+      // Smooth scroll generates intermediate scroll events that can
+      // trigger handleScroll → stop(), killing the auto-follow state.
       scrollToBottomNow('auto')
     },
     // `markAuto` reads only refs — identity is stable.
@@ -266,13 +272,6 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   // ============================================================
   // handleScroll — update userScrolled from current scroll position
   // ============================================================
-  const clearSnapTimer = useCallback(() => {
-    if (snapTimerRef.current !== null) {
-      clearTimeout(snapTimerRef.current)
-      snapTimerRef.current = null
-    }
-  }, [])
-
   const handleScroll = useCallback(() => {
     const el = scrollElRef.current
     if (!el) return
@@ -284,25 +283,9 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
 
     if (distanceFromBottom(el) < bottomThresholdRef.current) {
       if (userScrolledRef.current) setUserScrolled(false)
-      // Deferred snap: debounced — resets on each scroll event so it only
-      // fires 150ms after the user has stopped scrolling. Uses instant
-      // scroll ('auto') so no intermediate scroll events are generated that
-      // could cancel follow mode.
-      if (snapTimerRef.current !== null) clearTimeout(snapTimerRef.current)
-      snapTimerRef.current = setTimeout(() => {
-        snapTimerRef.current = null
-        const current = scrollElRef.current
-        if (!current || userScrolledRef.current) return
-        if (distanceFromBottom(current) < bottomThresholdRef.current) {
-          scrollToBottomNow('auto')
-        }
-      }, 150)
       return
     }
 
-    // User scrolled outside the snap zone → cancel pending snap
-    clearSnapTimer()
-
     // Ignore scroll events triggered by our own scrollToBottom calls — they
     // can fire asynchronously after new content has been inserted, which
     // would otherwise look like a user scroll.
@@ -312,7 +295,7 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
     }
 
     stop()
-  }, [scrollToBottom, setUserScrolled, stop, scrollToBottomNow, clearSnapTimer])
+  }, [scrollToBottom, setUserScrolled, stop])
 
   // ============================================================
   // handleInteraction — user is interacting with the content (text
@@ -362,22 +345,29 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   }, [])
 
   // ============================================================
-  // ResizeObserver on content — keep the bottom locked in view.
-  // Fires on every content height change (streaming, block expansion,
-  // tool results rendering). Only gated by userScrolled — we always
-  // follow when the user hasn't explicitly scrolled away.
+  // ResizeObserver on content — keep the bottom locked in view
+  // whenever the user hasn't scrolled away, regardless of
+  // streaming state. This ensures pressing Enter to send a
+  // message, tool output showing, or any post-stream DOM growth
+  // still keeps the bottom visible.
   // ============================================================
   useEffect(() => {
     if (!contentEl || typeof ResizeObserver === 'undefined') return
 
     const observer = new ResizeObserver(() => {
-      const scrollElLocal = scrollElRef.current
-      if (scrollElLocal && !canScroll(scrollElLocal)) {
-        if (userScrolledRef.current) setUserScrolled(false)
-        return
+      try {
+        const scrollElLocal = scrollElRef.current
+        if (scrollElLocal && !canScroll(scrollElLocal)) {
+          if (userScrolledRef.current) setUserScrolled(false)
+          return
+        }
+        if (userScrolledRef.current) return
+        scrollToBottom(false)
+      } catch (err) {
+        if (import.meta.env.DEV) {
+          console.trace('[useAutoScroll RO] error', err)
+        }
       }
-      if (userScrolledRef.current) return
-      scrollToBottom(false)
     })
     observer.observe(contentEl)
     return () => observer.disconnect()
@@ -432,9 +422,14 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   // ============================================================
   useEffect(() => {
     return () => {
-      if (snapTimerRef.current !== null) clearTimeout(snapTimerRef.current)
-      if (settleTimerRef.current !== null) clearTimeout(settleTimerRef.current)
-      if (autoTimerRef.current !== null) clearTimeout(autoTimerRef.current)
+      if (settleTimerRef.current !== null) {
+        clearTimeout(settleTimerRef.current)
+        settleTimerRef.current = null
+      }
+      if (autoTimerRef.current !== null) {
+        clearTimeout(autoTimerRef.current)
+        autoTimerRef.current = null
+      }
     }
   }, [])
 
diff --git a/src/main.tsx b/src/main.tsx
index 321bb60c..42a62e11 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -147,6 +147,18 @@ configureNativeShell()
 
 // 全局错误处理 - 防止未捕获错误导致页面刷新
 window.addEventListener('error', event => {
+  // Chrome fires an `error` event when ResizeObserver callbacks exceed the
+  // browser's internal iteration limit per frame.  This is a benign diagnostic,
+  // not a real JavaScript error — the browser correctly caps the cycle and
+  // continues.  Silently ignore it; there is nothing to fix in app code.
+  if (
+    event.message &&
+    typeof event.message === 'string' &&
+    event.message.includes('ResizeObserver loop')
+  ) {
+    event.preventDefault()
+    return
+  }
   globalErrorHandler('uncaught error', event.error)
   event.preventDefault()
 })

From 46a079db41744cabe4a61a216536f07046f7fbbf Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Fri, 26 Jun 2026 10:13:58 +0800
Subject: [PATCH 07/18] fix: move MentionMenu/SlashCommandMenu outside
 overflow-hidden to prevent clipping

The CSS grid-rows transition wrapper added overflow-hidden which clipped
the absolute-positioned MentionMenu and SlashCommandMenu (bottom: 100%),
causing / and @ commands to appear unresponsive.
---
 src/features/chat/InputBox.tsx | 77 +++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 79366b0e..29ba03d4 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -1264,32 +1264,33 @@ function InputBoxComponent({
               !isCollapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none'
             }`}
           >
-            <div className="overflow-hidden">
-              {/* Wrapper — 菜单在 glass 容器外，避免嵌套 backdrop-filter 导致模糊失效 */}
-              <div className="relative z-30">
-                {/* @ Mention Menu */}
-                <MentionMenu
-                  ref={mentionMenuRef}
-                  isOpen={mentionOpen}
-                  query={mentionQuery}
-                  agents={agents}
-                  rootPath={rootPath}
-                  excludeValues={excludeValues}
-                  onSelect={handleMentionSelect}
-                  onNavigate={updateMentionQuery}
-                  onClose={handleMentionClose}
-                />
-
-                {/* / Slash Command Menu */}
-                <SlashCommandMenu
-                  ref={slashMenuRef}
-                  isOpen={slashOpen}
-                  query={slashQuery}
-                  rootPath={rootPath}
-                  onSelect={handleSlashSelect}
-                  onClose={handleSlashClose}
-                />
+            {/* relative positioning ancestor for menus, outside overflow-hidden */}
+            <div className="relative z-30">
+              {/* @ Mention Menu — 在 overflow-hidden 外部，防止被裁剪 */}
+              <MentionMenu
+                ref={mentionMenuRef}
+                isOpen={mentionOpen}
+                query={mentionQuery}
+                agents={agents}
+                rootPath={rootPath}
+                excludeValues={excludeValues}
+                onSelect={handleMentionSelect}
+                onNavigate={updateMentionQuery}
+                onClose={handleMentionClose}
+              />
 
+              {/* / Slash Command Menu — 在 overflow-hidden 外部，防止被裁剪 */}
+              <SlashCommandMenu
+                ref={slashMenuRef}
+                isOpen={slashOpen}
+                query={slashQuery}
+                rootPath={rootPath}
+                onSelect={handleSlashSelect}
+                onClose={handleSlashClose}
+              />
+
+              {/* overflow-hidden 只包裹实际输入内容，不影响上方 absolute 菜单 */}
+              <div className="overflow-hidden">
                 {/* Input Container */}
                 <div
                   ref={inputContainerRef}
@@ -1403,20 +1404,20 @@ function InputBoxComponent({
                     </div>
                   </div>
                 </div>
-              </div>
 
-              {/* Footer — 展开态固定高度区域，随 track 一起显隐 */}
-              <div
-                ref={footerRef}
-                onPointerDown={handleContainerPointerDown}
-                className="h-8 flex items-center justify-center"
-              >
-                <InputFooter
-                  paneId={paneId}
-                  sessionId={sessionId}
-                  onNewChat={onNewChat}
-                  inputContainerRef={inputContainerRef}
-                />
+                {/* Footer — 展开态固定高度区域，随 track 一起显隐 */}
+                <div
+                  ref={footerRef}
+                  onPointerDown={handleContainerPointerDown}
+                  className="h-8 flex items-center justify-center"
+                >
+                  <InputFooter
+                    paneId={paneId}
+                    sessionId={sessionId}
+                    onNewChat={onNewChat}
+                    inputContainerRef={inputContainerRef}
+                  />
+                </div>
               </div>
             </div>
           </div>

From 1c5c18c83b6d590c9b4cc14377bfc409392ddc49 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Fri, 26 Jun 2026 12:34:57 +0800
Subject: [PATCH 08/18] refactor: replace 250ms scroll gesture window with
 opencode markBoundaryGesture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port opencode's markBoundaryGesture algorithm + message-gesture helpers to
distinguish user-driven scroll from virtualizer-driven scroll events:

- scrollGesture.ts: pure functions (normalizeWheelDelta, shouldMarkBoundaryGesture,
  boundaryTarget, markBoundaryGesture, markPointerGesture) — direct port from
  opencode's message-gesture.ts and message-timeline.tsx
- useScrollGestureDetector: React hook exposing wheel/touch/pointer/keyboard
  handlers and a 250ms hasGesture() window — replaces lastUserGestureAtRef +
  SCROLL_GESTURE_WINDOW_MS timestamp pair
- ChatArea: wires the detector on the scroll root, removes the old 250ms gate

Improvements over the timestamp window:
- Touch Y tracking — previously opencodeUI did not track touch gestures at all
- Nested scroller opt-out via data-scrollable — wheel inside a code block with
  room no longer marks the outer gesture
- Wheel deltaMode normalization (line × 40, page × rootHeight)
- Keyboard scroll keys (PageUp/PageDown/Home/End) mark the gesture
- Scrollbar drag (pointerdown on root) is detected via target === root
---
 src/features/chat/ChatArea.tsx                |  71 +++--
 src/features/chat/scrollGesture.test.ts       | 274 ++++++++++++++++++
 src/features/chat/scrollGesture.ts            | 140 +++++++++
 .../chat/useScrollGestureDetector.test.ts     | 223 ++++++++++++++
 src/features/chat/useScrollGestureDetector.ts | 158 ++++++++++
 5 files changed, 849 insertions(+), 17 deletions(-)
 create mode 100644 src/features/chat/scrollGesture.test.ts
 create mode 100644 src/features/chat/scrollGesture.ts
 create mode 100644 src/features/chat/useScrollGestureDetector.test.ts
 create mode 100644 src/features/chat/useScrollGestureDetector.ts

diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index cc699c36..195589cc 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -30,6 +30,7 @@ import { MessageErrorView } from '../message/parts'
 import { messageStore } from '../../store'
 import { useTheme } from '../../hooks/useTheme'
 import { useAutoScroll } from '../../hooks/useAutoScroll'
+import { useScrollGestureDetector } from './useScrollGestureDetector'
 import type { Message, MessageError } from '../../types/message'
 import { RetryStatusInline, type RetryStatusInlineData } from './RetryStatusInline'
 import { buildVisibleMessageEntries, getVisibleMessageForkTargetId } from './chatAreaVisibility'
@@ -48,7 +49,6 @@ const LOAD_MORE_ROOT_MARGIN = '240px 0px 0px 0px'
 const LOAD_MORE_WHEEL_COOLDOWN_MS = 90
 const LOAD_MORE_DEFER_MS = 100
 const PENDING_SCROLL_TARGET_KEEPALIVE_MS = 900
-const SCROLL_GESTURE_WINDOW_MS = 250
 
 type LoadMoreAnchorSnapshot = {
   messageId: string
@@ -163,7 +163,6 @@ export const ChatArea = memo(
       const loadMoreRequestIdRef = useRef(0)
       const topSentinelVisibleRef = useRef(false)
       const lastWheelInputAtRef = useRef(0)
-      const lastUserGestureAtRef = useRef(0)
       const tryLoadMoreRef = useRef<() => void>(NOOP)
 
       useEffect(() => {
@@ -183,6 +182,7 @@ export const ChatArea = memo(
         bottomThreshold: atBottomThreshold,
         overflowAnchor: 'dynamic',
       })
+      const gestureDetector = useScrollGestureDetector()
       const shouldUseExternalViewModel = pageRecords != null && visibleMessagesProp != null
       const visibleMessageEntries = useMemo(
         () => (shouldUseExternalViewModel ? [] : buildVisibleMessageEntries(messages)),
@@ -294,7 +294,8 @@ export const ChatArea = memo(
         scrollRef.current = node
         setScrollRoot(prev => (prev === node ? prev : node))
         autoScroll.scrollRef(node)
-      }, [autoScroll])
+        gestureDetector.setRoot(node)
+      }, [autoScroll, gestureDetector])
 
       const setContentWrapperRef = useCallback((node: HTMLDivElement | null) => {
         autoScroll.contentRef(node)
@@ -317,24 +318,55 @@ export const ChatArea = memo(
         // scroll adjustments (from measureElement / anchorTo) generate scroll
         // events too — those must be ignored, otherwise handleScroll sees the
         // user "away from bottom" and calls stop(), killing auto-follow.
-        const hasGesture = Date.now() - lastUserGestureAtRef.current < SCROLL_GESTURE_WINDOW_MS
-        if (!hasGesture) return
+        if (!gestureDetector.hasGesture()) return
         autoScroll.handleScroll()
         updateScrollOffsetSnapshot()
-      }, [autoScroll, updateScrollOffsetSnapshot])
+      }, [autoScroll, gestureDetector, updateScrollOffsetSnapshot])
+
+      const handleScrollContainerWheel = useCallback(
+        (event: React.WheelEvent<HTMLDivElement>) => {
+          gestureDetector.onWheel({
+            deltaY: event.deltaY,
+            deltaMode: event.deltaMode,
+            target: event.target,
+          })
+          // Feed load-more cooldown (also depends on wheel, not just touch/key).
+          lastWheelInputAtRef.current = Date.now()
+        },
+        [gestureDetector],
+      )
 
-      const handleScrollContainerWheel = useCallback(() => {
-        // Mark a user scroll gesture so the next batch of scroll events
-        // pass the gesture gate above. Also feeds load-more cooldown.
-        lastUserGestureAtRef.current = Date.now()
-        lastWheelInputAtRef.current = Date.now()
-      }, [])
+      const handleScrollContainerPointerDown = useCallback(
+        (event: React.PointerEvent<HTMLDivElement>) => {
+          gestureDetector.onPointerDown({ target: event.target })
+        },
+        [gestureDetector],
+      )
 
-      const handleScrollContainerPointerDown = useCallback(() => {
-        // Scrollbar thumb drag: the onScroll events that follow should be
-        // treated as user-initiated.
-        lastUserGestureAtRef.current = Date.now()
-      }, [])
+      const handleScrollContainerTouchStart = useCallback(
+        (event: React.TouchEvent<HTMLDivElement>) => {
+          gestureDetector.onTouchStart({ touches: event.touches })
+        },
+        [gestureDetector],
+      )
+
+      const handleScrollContainerTouchMove = useCallback(
+        (event: React.TouchEvent<HTMLDivElement>) => {
+          gestureDetector.onTouchMove({ touches: event.touches, target: event.target })
+        },
+        [gestureDetector],
+      )
+
+      const handleScrollContainerTouchEnd = useCallback(() => {
+        gestureDetector.onTouchEnd()
+      }, [gestureDetector])
+
+      const handleScrollContainerKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+          gestureDetector.onKeyDown({ key: event.key })
+        },
+        [gestureDetector],
+      )
 
       // Sync the offset snapshot once on mount / scrollRoot change so the
       // first frame has accurate data.
@@ -690,6 +722,11 @@ export const ChatArea = memo(
             onScroll={handleScrollContainerScroll}
             onWheel={handleScrollContainerWheel}
             onPointerDown={handleScrollContainerPointerDown}
+            onTouchStart={handleScrollContainerTouchStart}
+            onTouchMove={handleScrollContainerTouchMove}
+            onTouchEnd={handleScrollContainerTouchEnd}
+            onKeyDown={handleScrollContainerKeyDown}
+            tabIndex={-1}
             data-chat-scroll-root="true"
             className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col"
           >
diff --git a/src/features/chat/scrollGesture.test.ts b/src/features/chat/scrollGesture.test.ts
new file mode 100644
index 00000000..fe4de3e2
--- /dev/null
+++ b/src/features/chat/scrollGesture.test.ts
@@ -0,0 +1,274 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  boundaryTarget,
+  markBoundaryGesture,
+  markPointerGesture,
+  normalizeWheelDelta,
+  shouldMarkBoundaryGesture,
+} from './scrollGesture'
+
+describe('normalizeWheelDelta', () => {
+  it('passes through pixel deltas (deltaMode 0)', () => {
+    expect(normalizeWheelDelta({ deltaY: 16, deltaMode: 0, rootHeight: 600 })).toBe(16)
+  })
+
+  it('converts line deltas to pixels (deltaMode 1)', () => {
+    expect(normalizeWheelDelta({ deltaY: 3, deltaMode: 1, rootHeight: 500 })).toBe(120)
+  })
+
+  it('converts page deltas to pixels (deltaMode 2)', () => {
+    expect(normalizeWheelDelta({ deltaY: -1, deltaMode: 2, rootHeight: 600 })).toBe(-600)
+  })
+
+  it('handles zero', () => {
+    expect(normalizeWheelDelta({ deltaY: 0, deltaMode: 0, rootHeight: 600 })).toBe(0)
+    expect(normalizeWheelDelta({ deltaY: 0, deltaMode: 1, rootHeight: 600 })).toBe(0)
+  })
+
+  it('handles negative values', () => {
+    expect(normalizeWheelDelta({ deltaY: -50, deltaMode: 0, rootHeight: 600 })).toBe(-50)
+    expect(normalizeWheelDelta({ deltaY: -2, deltaMode: 1, rootHeight: 600 })).toBe(-80)
+  })
+})
+
+describe('shouldMarkBoundaryGesture', () => {
+  it('returns true when there is no overflow (max <= 1)', () => {
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: 10,
+        scrollTop: 0,
+        scrollHeight: 300,
+        clientHeight: 300,
+      }),
+    ).toBe(true)
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: 10,
+        scrollTop: 0,
+        scrollHeight: 301,
+        clientHeight: 300,
+      }),
+    ).toBe(true)
+  })
+
+  it('returns false for zero delta', () => {
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: 0,
+        scrollTop: 100,
+        scrollHeight: 1000,
+        clientHeight: 300,
+      }),
+    ).toBe(false)
+  })
+
+  it('marks upward gesture at the top', () => {
+    // At the top, scrolling up further would push scrollTop below 0 → boundary.
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: -10,
+        scrollTop: 0,
+        scrollHeight: 1000,
+        clientHeight: 300,
+      }),
+    ).toBe(true)
+  })
+
+  it('does not mark upward gesture mid-list (room above)', () => {
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: -10,
+        scrollTop: 100,
+        scrollHeight: 1000,
+        clientHeight: 300,
+      }),
+    ).toBe(false)
+  })
+
+  it('marks downward gesture past the bottom', () => {
+    // max=700, scrollTop=695, delta=20 → would exceed remaining (5) → boundary.
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: 20,
+        scrollTop: 695,
+        scrollHeight: 1000,
+        clientHeight: 300,
+      }),
+    ).toBe(true)
+  })
+
+  it('does not mark downward gesture mid-list (room below)', () => {
+    expect(
+      shouldMarkBoundaryGesture({
+        delta: 20,
+        scrollTop: 100,
+        scrollHeight: 1000,
+        clientHeight: 300,
+      }),
+    ).toBe(false)
+  })
+})
+
+describe('boundaryTarget', () => {
+  function makeRoot(): HTMLDivElement {
+    return document.createElement('div')
+  }
+
+  it('returns root when target is null', () => {
+    const root = makeRoot()
+    expect(boundaryTarget(root, null)).toBe(root)
+  })
+
+  it('returns root when target has no data-scrollable ancestor', () => {
+    const root = makeRoot()
+    document.body.appendChild(root)
+    try {
+      const inner = document.createElement('div')
+      root.appendChild(inner)
+      expect(boundaryTarget(root, inner)).toBe(root)
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('returns the nested data-scrollable element when target is inside one', () => {
+    const root = makeRoot()
+    const nested = document.createElement('div')
+    nested.setAttribute('data-scrollable', '')
+    const inner = document.createElement('div')
+    nested.appendChild(inner)
+    root.appendChild(nested)
+    document.body.appendChild(root)
+    try {
+      expect(boundaryTarget(root, inner)).toBe(nested)
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('returns root when target is the nested scroller itself', () => {
+    const root = makeRoot()
+    const nested = document.createElement('div')
+    nested.setAttribute('data-scrollable', '')
+    root.appendChild(nested)
+    document.body.appendChild(root)
+    try {
+      // If target IS the data-scrollable (not inside it), the closest match is
+      // the element itself, which is not the root → return root by the
+      // `nested === root` early-out rule. Actually `closest` matches the
+      // element itself when called on it, so the function returns nested.
+      // This matches opencode's behavior.
+      expect(boundaryTarget(root, nested)).toBe(nested)
+    } finally {
+      root.remove()
+    }
+  })
+})
+
+describe('markBoundaryGesture', () => {
+  function setup() {
+    const root = makeOverflowingDiv(1000, 300, 0)
+    const nested = makeOverflowingDiv(2000, 200, 0)
+    nested.setAttribute('data-scrollable', '')
+    root.appendChild(nested)
+    const deep = document.createElement('div')
+    nested.appendChild(deep)
+    document.body.appendChild(root)
+    return { root, nested, deep }
+  }
+
+  it('marks gesture when target is inside the root (not nested)', () => {
+    const { root } = setup()
+    const onMark = vi.fn()
+    const inner = document.createElement('span')
+    root.appendChild(inner)
+    try {
+      markBoundaryGesture({ root, target: inner, delta: 10, onMarkScrollGesture: onMark })
+      expect(onMark).toHaveBeenCalledWith(root)
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('marks gesture when nested scroller hits its boundary', () => {
+    const { root, deep } = setup()
+    // Nested has max=1800, scrollTop=0, delta=-10 → would go below 0 → boundary.
+    const onMark = vi.fn()
+    try {
+      markBoundaryGesture({ root, target: deep, delta: -10, onMarkScrollGesture: onMark })
+      expect(onMark).toHaveBeenCalledWith(root)
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('does NOT mark gesture when nested scroller has room', () => {
+    const { root, nested, deep } = setup()
+    nested.scrollTop = 500
+    // delta=-10, scrollTop=500 → would be 490, well above 0 → no boundary.
+    const onMark = vi.fn()
+    try {
+      markBoundaryGesture({ root, target: deep, delta: -10, onMarkScrollGesture: onMark })
+      expect(onMark).not.toHaveBeenCalled()
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('does NOT mark gesture when target is null (sanity)', () => {
+    const { root } = setup()
+    const onMark = vi.fn()
+    try {
+      // null target → boundaryTarget returns root → onMark is called.
+      // This is the opencode behavior; null is treated as "no nested, gesture on root".
+      markBoundaryGesture({ root, target: null, delta: 10, onMarkScrollGesture: onMark })
+      expect(onMark).toHaveBeenCalledWith(root)
+    } finally {
+      root.remove()
+    }
+  })
+})
+
+describe('markPointerGesture', () => {
+  function makeRoot() {
+    return makeOverflowingDiv(1000, 300, 0)
+  }
+
+  it('marks when target === root (scrollbar drag)', () => {
+    const root = makeRoot()
+    document.body.appendChild(root)
+    const onMark = vi.fn()
+    try {
+      markPointerGesture({ root, target: root, onMarkScrollGesture: onMark })
+      expect(onMark).toHaveBeenCalledWith(root)
+    } finally {
+      root.remove()
+    }
+  })
+
+  it('does not mark when target is a child element', () => {
+    const root = makeRoot()
+    const child = document.createElement('div')
+    root.appendChild(child)
+    document.body.appendChild(root)
+    const onMark = vi.fn()
+    try {
+      markPointerGesture({ root, target: child, onMarkScrollGesture: onMark })
+      expect(onMark).not.toHaveBeenCalled()
+    } finally {
+      root.remove()
+    }
+  })
+})
+
+// ============================================
+// Test helpers
+// ============================================
+
+function makeOverflowingDiv(scrollHeight: number, clientHeight: number, scrollTop: number): HTMLDivElement {
+  const el = document.createElement('div')
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: scrollHeight })
+  Object.defineProperty(el, 'clientHeight', { configurable: true, value: clientHeight })
+  el.scrollTop = scrollTop
+  return el
+}
diff --git a/src/features/chat/scrollGesture.ts b/src/features/chat/scrollGesture.ts
new file mode 100644
index 00000000..23ba0ac6
--- /dev/null
+++ b/src/features/chat/scrollGesture.ts
@@ -0,0 +1,140 @@
+/**
+ * scrollGesture — Pure functions for classifying scroll gestures.
+ *
+ * Ported from opencode's `packages/app/src/pages/session/message-gesture.ts` and
+ * the `boundaryTarget` / `markBoundaryGesture` helpers in
+ * `packages/app/src/pages/session/timeline/message-timeline.tsx`.
+ *
+ * Why this exists:
+ * ChatArea has a scroll-root container that hosts nested scrollers (code blocks,
+ * file diffs, attachment previews marked with `data-scrollable`). When the user
+ * scrolls inside one of those nested regions, the outer scroll-root receives the
+ * wheel/touch events too — but those events shouldn't be treated as a gesture
+ * on the outer scroll, otherwise the auto-follow "stop" logic fires and the
+ * user can't scroll a long code block without ChatArea leaving follow mode.
+ *
+ * The two-tier boundary check:
+ * 1. `boundaryTarget` — find the closest `data-scrollable` ancestor. If none,
+ *    the scroll root itself is the target.
+ * 2. `shouldMarkBoundaryGesture` — if the target is a nested scroller, only
+ *    count the gesture when that nested scroller has hit its scroll boundary
+ *    (no more room in the direction the user is trying to move).
+ *
+ * The wheel delta is normalized across `deltaMode` values:
+ * - 0: pixel (no change)
+ * - 1: line × 40 (≈ Linux defaults)
+ * - 2: page × rootHeight
+ */
+
+const LINE_TO_PIXEL = 40
+
+export interface NormalizeWheelDeltaInput {
+  deltaY: number
+  deltaMode: number
+  rootHeight: number
+}
+
+export function normalizeWheelDelta({ deltaY, deltaMode, rootHeight }: NormalizeWheelDeltaInput): number {
+  if (deltaMode === 1) return deltaY * LINE_TO_PIXEL
+  if (deltaMode === 2) return deltaY * rootHeight
+  return deltaY
+}
+
+export interface ShouldMarkBoundaryGestureInput {
+  delta: number
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+}
+
+export function shouldMarkBoundaryGesture({
+  delta,
+  scrollTop,
+  scrollHeight,
+  clientHeight,
+}: ShouldMarkBoundaryGestureInput): boolean {
+  const max = scrollHeight - clientHeight
+  // No overflow — every scroll attempt is a "boundary" (the user is trying to
+  // move but there's nothing to scroll, so the gesture propagates outward).
+  if (max <= 1) return true
+  if (!delta) return false
+
+  if (delta < 0) {
+    // Moving up (toward earlier content) — boundary hit when already at top.
+    return scrollTop + delta <= 0
+  }
+
+  // Moving down — boundary hit when there's no room left.
+  const remaining = max - scrollTop
+  return delta > remaining
+}
+
+/**
+ * Resolve the scrollable target of a wheel/touch event.
+ *
+ * Walks up from `target` to the closest `[data-scrollable]` ancestor. If the
+ * event originated inside a nested scroller, returns that element. Otherwise
+ * returns the scroll root itself.
+ */
+export function boundaryTarget(root: HTMLElement, target: EventTarget | null): HTMLElement {
+  const current = target instanceof Element ? target : undefined
+  const nested = current?.closest('[data-scrollable]')
+  if (!nested || nested === root) return root
+  if (!(nested instanceof HTMLElement)) return root
+  return nested
+}
+
+export interface MarkBoundaryGestureInput {
+  root: HTMLElement
+  target: EventTarget | null
+  delta: number
+  onMarkScrollGesture: (target?: EventTarget | null) => void
+}
+
+/**
+ * Mark a scroll gesture only if the target (root or nested scroller) hit a
+ * boundary. Mirrors opencode's `markBoundaryGesture` exactly.
+ */
+export function markBoundaryGesture({
+  root,
+  target,
+  delta,
+  onMarkScrollGesture,
+}: MarkBoundaryGestureInput): void {
+  const resolved = boundaryTarget(root, target)
+  if (resolved === root) {
+    onMarkScrollGesture(root)
+    return
+  }
+  if (
+    shouldMarkBoundaryGesture({
+      delta,
+      scrollTop: resolved.scrollTop,
+      scrollHeight: resolved.scrollHeight,
+      clientHeight: resolved.clientHeight,
+    })
+  ) {
+    onMarkScrollGesture(root)
+  }
+}
+
+/**
+ * Mark a scroll gesture from a pointer event (scrollbar thumb drag, etc).
+ *
+ * Mirrors opencode's `handleListPointerDown`: only counts when the pointer
+ * landed directly on the scroll root (not inside a nested scroller). When
+ * `target === root`, the user is dragging the scrollbar or empty area and
+ * the gesture should propagate.
+ */
+export function markPointerGesture({
+  root,
+  target,
+  onMarkScrollGesture,
+}: {
+  root: HTMLElement
+  target: EventTarget | null
+  onMarkScrollGesture: (target?: EventTarget | null) => void
+}): void {
+  if (target !== root) return
+  onMarkScrollGesture(root)
+}
diff --git a/src/features/chat/useScrollGestureDetector.test.ts b/src/features/chat/useScrollGestureDetector.test.ts
new file mode 100644
index 00000000..5f194026
--- /dev/null
+++ b/src/features/chat/useScrollGestureDetector.test.ts
@@ -0,0 +1,223 @@
+/**
+ * Tests for useScrollGestureDetector.
+ *
+ * Strategy: render the hook in a minimal test harness, drive the returned
+ * handlers with synthetic event shapes, and assert on the internal
+ * `hasGesture()` window.
+ */
+
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  SCROLL_GESTURE_DETECTOR_WINDOW_MS,
+  useScrollGestureDetector,
+} from './useScrollGestureDetector'
+
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.innerHTML = ''
+})
+
+interface MountResult {
+  result: ReturnType<typeof renderHook<ReturnType<typeof useScrollGestureDetector>, unknown>>['result']
+  root: HTMLDivElement
+}
+
+function mountDetectorWithRoot(scrollHeight: number, scrollTop: number): MountResult {
+  const { result } = renderHook(() => useScrollGestureDetector())
+  const el = document.createElement('div')
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: scrollHeight })
+  Object.defineProperty(el, 'clientHeight', { configurable: true, value: 300 })
+  el.scrollTop = scrollTop
+  document.body.appendChild(el)
+  act(() => result.current.setRoot(el))
+  return { result, root: el }
+}
+
+function mountDetector(): MountResult {
+  return mountDetectorWithRoot(1000, 100)
+}
+
+describe('useScrollGestureDetector', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(0))
+  })
+
+  it('hasGesture() is false initially', () => {
+    const { result } = mountDetector()
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('explicit markGesture() makes hasGesture() return true', () => {
+    const { result } = mountDetector()
+    act(() => result.current.markGesture())
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('gesture window expires after SCROLL_GESTURE_DETECTOR_WINDOW_MS', () => {
+    const { result } = mountDetector()
+    act(() => result.current.markGesture())
+    expect(result.current.hasGesture()).toBe(true)
+    act(() => vi.advanceTimersByTime(SCROLL_GESTURE_DETECTOR_WINDOW_MS + 1))
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onPointerDown marks gesture when target is the root', () => {
+    const { result, root } = mountDetector()
+    act(() => result.current.onPointerDown({ target: root }))
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onPointerDown does NOT mark gesture when target is a child', () => {
+    const { result, root } = mountDetector()
+    const child = document.createElement('div')
+    root.appendChild(child)
+    act(() => result.current.onPointerDown({ target: child }))
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onKeyDown marks gesture on PageUp/PageDown/Home/End', () => {
+    for (const key of ['PageUp', 'PageDown', 'Home', 'End']) {
+      const { result } = mountDetector()
+      act(() => result.current.onKeyDown({ key }))
+      expect(result.current.hasGesture(), `key=${key}`).toBe(true)
+    }
+  })
+
+  it('onKeyDown ignores other keys', () => {
+    for (const key of ['a', 'Enter', 'ArrowDown', 'Tab']) {
+      const { result } = mountDetector()
+      act(() => result.current.onKeyDown({ key }))
+      expect(result.current.hasGesture(), `key=${key}`).toBe(false)
+    }
+  })
+
+  it('onWheel marks gesture when target is root and delta is non-zero', () => {
+    // Use a root at max scroll so the downward gesture hits the bottom boundary.
+    const { result, root } = mountDetectorWithRoot(1000, 700)
+    act(() =>
+      result.current.onWheel({
+        deltaY: 50,
+        deltaMode: 0,
+        target: root,
+      }),
+    )
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onWheel does NOT mark when delta is 0', () => {
+    const { result, root } = mountDetector()
+    act(() =>
+      result.current.onWheel({
+        deltaY: 0,
+        deltaMode: 0,
+        target: root,
+      }),
+    )
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onWheel normalizes deltaMode=1 (line) for downstream consumers', () => {
+    // rootHeight=300, max=700, scrollTop=100, deltaY=3, deltaMode=1 → 120px.
+    // Wheel directly on root → markBoundaryGesture marks unconditionally.
+    // (The normalization is verified separately in scrollGesture.test.ts.)
+    const { result, root } = mountDetectorWithRoot(1000, 100)
+    act(() =>
+      result.current.onWheel({
+        deltaY: 3,
+        deltaMode: 1,
+        target: root,
+      }),
+    )
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onWheel marks when normalized delta exceeds remaining scroll', () => {
+    // Root at scrollTop=695 (max=700), 50px down → exceeds remaining 5 → boundary.
+    const { result, root } = mountDetectorWithRoot(1000, 695)
+    act(() =>
+      result.current.onWheel({
+        deltaY: 50,
+        deltaMode: 0,
+        target: root,
+      }),
+    )
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onWheel respects data-scrollable nested boundary opt-out', () => {
+    // Root has room (max=700, scrollTop=100). Nested scroller with max=1800,
+    // scrollTop=500 → 10px upward would land at 490, well above 0 → no boundary.
+    const { result, root } = mountDetectorWithRoot(1000, 100)
+    const nested = document.createElement('div')
+    Object.defineProperty(nested, 'scrollHeight', { configurable: true, value: 2000 })
+    Object.defineProperty(nested, 'clientHeight', { configurable: true, value: 200 })
+    nested.setAttribute('data-scrollable', '')
+    nested.scrollTop = 500
+    root.appendChild(nested)
+    const deep = document.createElement('span')
+    nested.appendChild(deep)
+
+    act(() =>
+      result.current.onWheel({
+        deltaY: -10,
+        deltaMode: 0,
+        target: deep,
+      }),
+    )
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onTouchStart records Y; onTouchMove computes delta and runs boundary check', () => {
+    // Finger drag: clientY 500 → 480 (drag down 20px → scroll up 20).
+    // Touch on root → markBoundaryGesture marks unconditionally.
+    // The nested boundary opt-out is verified in the dedicated test below.
+    const { result, root } = mountDetector()
+    act(() => result.current.onTouchStart({ touches: [{ clientY: 500 }] }))
+    act(() => result.current.onTouchMove({ touches: [{ clientY: 480 }], target: root }))
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onTouchMove marks when finger drags up at the top boundary', () => {
+    // Root at scrollTop=0; finger drags up (500 → 520) → delta = -20, boundary hit.
+    const { result, root } = mountDetectorWithRoot(1000, 0)
+    act(() => result.current.onTouchStart({ touches: [{ clientY: 500 }] }))
+    act(() => result.current.onTouchMove({ touches: [{ clientY: 520 }], target: root }))
+    expect(result.current.hasGesture()).toBe(true)
+  })
+
+  it('onTouchMove respects data-scrollable nested boundary opt-out', () => {
+    // Nested scroller with max=1800, scrollTop=500 → finger up (delta=-10) lands
+    // at 490, well above 0 → no boundary → no gesture on root.
+    const { result, root } = mountDetectorWithRoot(1000, 100)
+    const nested = document.createElement('div')
+    Object.defineProperty(nested, 'scrollHeight', { configurable: true, value: 2000 })
+    Object.defineProperty(nested, 'clientHeight', { configurable: true, value: 200 })
+    nested.setAttribute('data-scrollable', '')
+    nested.scrollTop = 500
+    root.appendChild(nested)
+    const deep = document.createElement('span')
+    nested.appendChild(deep)
+
+    act(() => result.current.onTouchStart({ touches: [{ clientY: 500 }] }))
+    act(() => result.current.onTouchMove({ touches: [{ clientY: 510 }], target: deep }))
+    // delta = 500 - 510 = -10, nested at 500, would land at 490, no boundary
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onTouchEnd clears the Y tracker', () => {
+    const { result } = mountDetector()
+    act(() => result.current.onTouchStart({ touches: [{ clientY: 100 }] }))
+    act(() => result.current.onTouchEnd())
+    act(() => result.current.onTouchMove({ touches: [{ clientY: 200 }], target: null }))
+    // After touchend, no prev Y → no gesture
+    expect(result.current.hasGesture()).toBe(false)
+  })
+
+  it('onWheel is a no-op when setRoot has not been called', () => {
+    const { result } = renderHook(() => useScrollGestureDetector())
+    act(() => result.current.onWheel({ deltaY: 100, deltaMode: 0, target: null }))
+    expect(result.current.hasGesture()).toBe(false)
+  })
+})
diff --git a/src/features/chat/useScrollGestureDetector.ts b/src/features/chat/useScrollGestureDetector.ts
new file mode 100644
index 00000000..52fa267d
--- /dev/null
+++ b/src/features/chat/useScrollGestureDetector.ts
@@ -0,0 +1,158 @@
+/**
+ * useScrollGestureDetector — React adapter around `scrollGesture` pure functions.
+ *
+ * Encapsulates the opencode-style gesture lifecycle:
+ * - Wheel: normalize deltaMode, run `markBoundaryGesture` (nested scroller opt-out).
+ * - Touch: track Y on touchstart, compute delta on touchmove, mark on touchend.
+ *   Mirrors opencode's `handleListTouchStart` / `handleListTouchMove` / `handleListTouchEnd`.
+ * - Pointer: only count when target is the scroll root (scrollbar thumb drag).
+ * - Keyboard: mark on PageUp/PageDown/Home/End so virtualizer-driven scroll
+ *   events after a key press are correctly attributed to a user gesture.
+ *
+ * The hook stores a single `lastGestureAt` timestamp. Consumers query
+ * `hasGesture()` to gate scroll-event handling (mirrors opencode's `hasScrollGesture`
+ * / `ui.scrollGesture` + `scrollGestureWindowMs`).
+ *
+ * The window length matches opencode's `scrollGestureWindowMs = 250`.
+ */
+
+import { useCallback, useRef } from 'react'
+import { markBoundaryGesture, markPointerGesture, normalizeWheelDelta } from './scrollGesture'
+
+const SCROLL_GESTURE_WINDOW_MS = 250
+
+export interface ScrollGestureDetector {
+  /** Pass to the scroll root's onWheel. */
+  onWheel: (event: { deltaY: number; deltaMode: number; target: EventTarget | null }) => void
+  /** Pass to the scroll root's onPointerDown. */
+  onPointerDown: (event: { target: EventTarget | null }) => void
+  /** Pass to the scroll root's onTouchStart. */
+  onTouchStart: (event: { touches: ArrayLike<{ clientY: number }> }) => void
+  /** Pass to the scroll root's onTouchMove. */
+  onTouchMove: (event: { touches: ArrayLike<{ clientY: number }>; target: EventTarget | null }) => void
+  /** Pass to the scroll root's onTouchEnd. */
+  onTouchEnd: () => void
+  /** Pass to the scroll root's (or a global) onKeyDown. */
+  onKeyDown: (event: { key: string }) => void
+  /** True if a recent gesture (within SCROLL_GESTURE_WINDOW_MS) was marked. */
+  hasGesture: () => boolean
+  /** Mark a gesture explicitly (used by external listeners like load-more). */
+  markGesture: () => void
+  /** Ref callback to set the scroll root element. Required before handlers fire. */
+  setRoot: (el: HTMLElement | null) => void
+}
+
+export function useScrollGestureDetector(): ScrollGestureDetector {
+  const rootRef = useRef<HTMLElement | null>(null)
+  const touchYRef = useRef<number | undefined>(undefined)
+  // Initial value is far enough in the past that `hasGesture()` returns false
+  // before any user interaction. Number.NEGATIVE_INFINITY is a defensive choice:
+  // it works even with monotonic time sources and never collides with Date.now().
+  const lastGestureAtRef = useRef<number>(Number.NEGATIVE_INFINITY)
+
+  const setRoot = useCallback((el: HTMLElement | null) => {
+    rootRef.current = el
+  }, [])
+
+  const markGesture = useCallback(() => {
+    lastGestureAtRef.current = Date.now()
+  }, [])
+
+  const hasGesture = useCallback(() => {
+    return Date.now() - lastGestureAtRef.current < SCROLL_GESTURE_WINDOW_MS
+  }, [])
+
+  // Wheel — normalize delta, run boundary check against the resolved target.
+  // The handler is stable across renders because all state lives in refs.
+  const onWheel = useCallback(
+    (event: { deltaY: number; deltaMode: number; target: EventTarget | null }) => {
+      const root = rootRef.current
+      if (!root) return
+      const delta = normalizeWheelDelta({
+        deltaY: event.deltaY,
+        deltaMode: event.deltaMode,
+        rootHeight: root.clientHeight,
+      })
+      if (!delta) return
+      markBoundaryGesture({
+        root,
+        target: event.target,
+        delta,
+        onMarkScrollGesture: markGesture,
+      })
+    },
+    [markGesture],
+  )
+
+  // Pointer — scrollbar thumb drag, only when target IS the root.
+  const onPointerDown = useCallback(
+    (event: { target: EventTarget | null }) => {
+      const root = rootRef.current
+      if (!root) return
+      markPointerGesture({ root, target: event.target, onMarkScrollGesture: markGesture })
+    },
+    [markGesture],
+  )
+
+  // Touch — track Y on start, propagate delta through boundary check on move.
+  const onTouchStart = useCallback((event: { touches: ArrayLike<{ clientY: number }> }) => {
+    touchYRef.current = event.touches[0]?.clientY
+  }, [])
+
+  const onTouchMove = useCallback(
+    (event: { touches: ArrayLike<{ clientY: number }>; target: EventTarget | null }) => {
+      const root = rootRef.current
+      if (!root) return
+      const next = event.touches[0]?.clientY
+      const prev = touchYRef.current
+      touchYRef.current = next
+      if (next === undefined || prev === undefined) return
+      // ClientY delta: finger moves up (lower Y) means scroll down (positive
+      // delta). Matches opencode's `prev - next` math.
+      const delta = prev - next
+      if (!delta) return
+      markBoundaryGesture({
+        root,
+        target: event.target,
+        delta,
+        onMarkScrollGesture: markGesture,
+      })
+    },
+    [markGesture],
+  )
+
+  const onTouchEnd = useCallback(() => {
+    touchYRef.current = undefined
+  }, [])
+
+  // Keyboard — PageUp/PageDown/Home/End.
+  // Mirrors opencode's session.tsx `if (event.key === 'PageUp' || ... 'End') markScrollGesture()`.
+  const onKeyDown = useCallback(
+    (event: { key: string }) => {
+      if (
+        event.key === 'PageUp' ||
+        event.key === 'PageDown' ||
+        event.key === 'Home' ||
+        event.key === 'End'
+      ) {
+        markGesture()
+      }
+    },
+    [markGesture],
+  )
+
+  return {
+    onWheel,
+    onPointerDown,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onKeyDown,
+    hasGesture,
+    markGesture,
+    setRoot,
+  }
+}
+
+/** Window length used by `useScrollGestureDetector`. Exposed for tests. */
+export const SCROLL_GESTURE_DETECTOR_WINDOW_MS = SCROLL_GESTURE_WINDOW_MS

From fce3f67fa59943ea3cca057b244aa59a82b523cd Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Fri, 26 Jun 2026 20:34:57 +0800
Subject: [PATCH 09/18] fix: re-snap to bottom when scroll container resizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useAutoScroll's ResizeObserver only watched contentEl (the virtualized
page wrapper). When the InputBox textarea auto-resized, the ChatArea above
shrank by one line height, but the content's total scrollHeight didn't
change — so the observer never fired and the user was stranded at the
old max scrollTop, with the latest message clipped off the bottom.

Add scrollEl to the same observer so container resize (textarea grow,
window resize, layout shifts) re-snaps the bottom when the user is
following, gated by userScrolled so an intentional scroll-up is
preserved.

Drive-by fix: scrollToBottomNow wrote scrollHeight instead of
scrollHeight - clientHeight, relying on the browser to clamp the
overshoot. Use the existing bottomScrollTop helper for the correct
target in any host (works in jsdom / headless envs too).
---
 .../useAutoScroll.containerResize.test.ts     | 130 ++++++++++++++++++
 src/hooks/useAutoScroll.test.ts               |   8 +-
 src/hooks/useAutoScroll.ts                    |  45 +++---
 3 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 src/hooks/useAutoScroll.containerResize.test.ts

diff --git a/src/hooks/useAutoScroll.containerResize.test.ts b/src/hooks/useAutoScroll.containerResize.test.ts
new file mode 100644
index 00000000..31702ad2
--- /dev/null
+++ b/src/hooks/useAutoScroll.containerResize.test.ts
@@ -0,0 +1,130 @@
+// ============================================
+// Repro: ChatArea height shrinks (textarea auto-resize) while user is at bottom.
+// scrollTop is left at the OLD bottom position, since contentEl's height didn't change.
+// Expected: auto-scroll re-snaps to the NEW bottom.
+// ============================================
+
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useAutoScroll } from './useAutoScroll'
+
+// jsdom has no real ResizeObserver. Stub one that fires synchronously whenever
+// the observed element's `clientHeight`/`scrollHeight` are reassigned, so the
+// effect under test can run the same code path a real browser would.
+class StubResizeObserver {
+  static instances: StubResizeObserver[] = []
+  private callback: ResizeObserverCallback
+  private observed = new Set<Element>()
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+    StubResizeObserver.instances.push(this)
+  }
+
+  observe(target: Element) {
+    this.observed.add(target)
+    this.fire(target)
+  }
+
+  unobserve(target: Element) {
+    this.observed.delete(target)
+  }
+
+  disconnect() {
+    this.observed.clear()
+  }
+
+  fire(target: Element) {
+    this.callback(
+      [
+        {
+          target,
+          contentRect: target.getBoundingClientRect(),
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: [],
+        } as unknown as ResizeObserverEntry,
+      ],
+      this,
+    )
+  }
+}
+
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', StubResizeObserver)
+})
+afterEach(() => {
+  vi.unstubAllGlobals()
+  StubResizeObserver.instances = []
+  vi.useRealTimers()
+  document.body.innerHTML = ''
+})
+
+function createScrollElement(initial: { scrollTop?: number; scrollHeight: number; clientHeight: number }) {
+  const el = document.createElement('div') as HTMLElement & { scrollTop: number }
+  el.scrollTop = initial.scrollTop ?? 0
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: initial.scrollHeight })
+  Object.defineProperty(el, 'clientHeight', { configurable: true, value: initial.clientHeight })
+  return el
+}
+
+describe('useAutoScroll — container resize while following', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  it('re-snaps to bottom when the scroll container shrinks (e.g. textarea grew)', () => {
+    const scrollEl = createScrollElement({ scrollHeight: 1000, clientHeight: 500, scrollTop: 500 })
+    const contentEl = document.createElement('div')
+    scrollEl.appendChild(contentEl)
+    document.body.appendChild(scrollEl)
+
+    const { result } = renderHook(() =>
+      useAutoScroll({ working: true, reverse: false }),
+    )
+    act(() => {
+      result.current.scrollRef(scrollEl)
+      result.current.contentRef(contentEl)
+    })
+    expect(result.current.userScrolled).toBe(false)
+    expect(scrollEl.scrollTop).toBe(500)
+
+    // Simulate ChatArea shrinking by 24px (textarea auto-resize, 1 → 2 lines).
+    // The total scrollHeight is unchanged.
+    Object.defineProperty(scrollEl, 'clientHeight', { configurable: true, value: 476 })
+    StubResizeObserver.instances.forEach(obs => obs.fire(scrollEl))
+
+    // The new bottom is at scrollHeight - clientHeight = 524.
+    // The user should be re-snapped to the new bottom.
+    expect(scrollEl.scrollTop).toBe(524)
+  })
+
+  it('does NOT re-snap when the user has intentionally scrolled away', () => {
+    const scrollEl = createScrollElement({ scrollHeight: 1000, clientHeight: 500, scrollTop: 500 })
+    const contentEl = document.createElement('div')
+    scrollEl.appendChild(contentEl)
+    document.body.appendChild(scrollEl)
+
+    const { result } = renderHook(() =>
+      useAutoScroll({ working: true, reverse: false }),
+    )
+    act(() => {
+      result.current.scrollRef(scrollEl)
+      result.current.contentRef(contentEl)
+    })
+
+    // User scrolls up on purpose.
+    act(() => {
+      scrollEl.scrollTop = 100
+      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
+    })
+    expect(result.current.userScrolled).toBe(true)
+
+    // ChatArea shrinks due to textarea auto-resize.
+    Object.defineProperty(scrollEl, 'clientHeight', { configurable: true, value: 476 })
+    StubResizeObserver.instances.forEach(obs => obs.fire(scrollEl))
+
+    // The user stays at their chosen position.
+    expect(scrollEl.scrollTop).toBe(100)
+  })
+})
diff --git a/src/hooks/useAutoScroll.test.ts b/src/hooks/useAutoScroll.test.ts
index a0c65526..18e00e61 100644
--- a/src/hooks/useAutoScroll.test.ts
+++ b/src/hooks/useAutoScroll.test.ts
@@ -289,19 +289,19 @@ describe('useAutoScroll (normal flow mode)', () => {
     vi.useFakeTimers()
   })
 
-  it('snaps to scrollHeight when working starts', () => {
+  it('snaps to the bottom (scrollHeight - clientHeight) when working starts', () => {
     const { scrollEl, rerender } = mountAutoScroll(
       { scrollHeight: 1000, clientHeight: 300, scrollTop: 0 },
       { working: false, reverse: false },
     )
     rerender({ working: true })
-    // Normal flow: bottom is scrollHeight, not 0.
-    expect(scrollEl.scrollTop).toBe(1000)
+    // Normal flow: bottom is scrollHeight - clientHeight, not 0.
+    expect(scrollEl.scrollTop).toBe(700)
   })
 
   it('marks userScrolled on wheel up', () => {
     const { scrollEl, result } = mountAutoScroll(
-      { scrollHeight: 1000, clientHeight: 300, scrollTop: 1000 },
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 700 },
       { reverse: false },
     )
     scrollEl.scrollTop = 500
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index f9cab93e..603ea78f 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -189,21 +189,11 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
     const el = scrollElRef.current
     if (!el) return
     markAuto(el)
-    if (reverseRef.current) {
-      // `flex-col-reverse` containers: "at bottom" is `scrollTop = 0`.
-      // `scrollTo({ top: 0, behavior })` respects smooth behavior;
-      // `scrollTop = 0` bypasses CSS `scroll-behavior: smooth`.
-      if (behavior === 'smooth') {
-        el.scrollTo({ top: 0, behavior })
-      } else {
-        el.scrollTop = 0
-      }
-      return
-    }
+    const targetTop = bottomScrollTop(el)
     if (behavior === 'smooth') {
-      el.scrollTo({ top: el.scrollHeight, behavior })
+      el.scrollTo({ top: targetTop, behavior })
     } else {
-      el.scrollTop = el.scrollHeight
+      el.scrollTop = targetTop
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -345,14 +335,26 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   }, [])
 
   // ============================================================
-  // ResizeObserver on content — keep the bottom locked in view
-  // whenever the user hasn't scrolled away, regardless of
-  // streaming state. This ensures pressing Enter to send a
-  // message, tool output showing, or any post-stream DOM growth
-  // still keeps the bottom visible.
+  // ResizeObserver — keep the bottom locked in view when the
+  // user hasn't scrolled away, regardless of streaming state.
+  // This ensures pressing Enter to send a message, tool output
+  // showing, or any post-stream DOM growth still keeps the
+  // bottom visible.
+  //
+  // Two observation targets:
+  // - contentEl: fires on content size changes (new messages,
+  //   block expansion, tool output). The total scrollHeight
+  //   changed, so the bottom moved.
+  // - scrollEl: fires on container size changes (window resize,
+  //   InputBox auto-resize, virtualizer-driven layout shifts).
+  //   The bottom of the same content is now at a different
+  //   scrollTop, so the user can end up stranded above the new
+  //   bottom — observed scrollTop stays at the old max. Snap
+  //   them back when they were following.
   // ============================================================
   useEffect(() => {
-    if (!contentEl || typeof ResizeObserver === 'undefined') return
+    if (typeof ResizeObserver === 'undefined') return
+    if (!contentEl && !scrollEl) return
 
     const observer = new ResizeObserver(() => {
       try {
@@ -369,9 +371,10 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
         }
       }
     })
-    observer.observe(contentEl)
+    if (contentEl) observer.observe(contentEl)
+    if (scrollEl) observer.observe(scrollEl)
     return () => observer.disconnect()
-  }, [contentEl, scrollToBottom, setUserScrolled])
+  }, [contentEl, scrollEl, scrollToBottom, setUserScrolled])
 
   // ============================================================
   // working edge — start/clear the settle window

From fb8c163a230633d977dd1d1424cc40854afcb571 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 15:02:12 +0800
Subject: [PATCH 10/18] Revert "fix: re-snap to bottom when scroll container
 resizes"

This reverts commit fce3f67fa59943ea3cca057b244aa59a82b523cd.
---
 .../useAutoScroll.containerResize.test.ts     | 130 ------------------
 src/hooks/useAutoScroll.test.ts               |   8 +-
 src/hooks/useAutoScroll.ts                    |  45 +++---
 3 files changed, 25 insertions(+), 158 deletions(-)
 delete mode 100644 src/hooks/useAutoScroll.containerResize.test.ts

diff --git a/src/hooks/useAutoScroll.containerResize.test.ts b/src/hooks/useAutoScroll.containerResize.test.ts
deleted file mode 100644
index 31702ad2..00000000
--- a/src/hooks/useAutoScroll.containerResize.test.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-// ============================================
-// Repro: ChatArea height shrinks (textarea auto-resize) while user is at bottom.
-// scrollTop is left at the OLD bottom position, since contentEl's height didn't change.
-// Expected: auto-scroll re-snaps to the NEW bottom.
-// ============================================
-
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
-import { useAutoScroll } from './useAutoScroll'
-
-// jsdom has no real ResizeObserver. Stub one that fires synchronously whenever
-// the observed element's `clientHeight`/`scrollHeight` are reassigned, so the
-// effect under test can run the same code path a real browser would.
-class StubResizeObserver {
-  static instances: StubResizeObserver[] = []
-  private callback: ResizeObserverCallback
-  private observed = new Set<Element>()
-
-  constructor(callback: ResizeObserverCallback) {
-    this.callback = callback
-    StubResizeObserver.instances.push(this)
-  }
-
-  observe(target: Element) {
-    this.observed.add(target)
-    this.fire(target)
-  }
-
-  unobserve(target: Element) {
-    this.observed.delete(target)
-  }
-
-  disconnect() {
-    this.observed.clear()
-  }
-
-  fire(target: Element) {
-    this.callback(
-      [
-        {
-          target,
-          contentRect: target.getBoundingClientRect(),
-          borderBoxSize: [],
-          contentBoxSize: [],
-          devicePixelContentBoxSize: [],
-        } as unknown as ResizeObserverEntry,
-      ],
-      this,
-    )
-  }
-}
-
-beforeEach(() => {
-  vi.stubGlobal('ResizeObserver', StubResizeObserver)
-})
-afterEach(() => {
-  vi.unstubAllGlobals()
-  StubResizeObserver.instances = []
-  vi.useRealTimers()
-  document.body.innerHTML = ''
-})
-
-function createScrollElement(initial: { scrollTop?: number; scrollHeight: number; clientHeight: number }) {
-  const el = document.createElement('div') as HTMLElement & { scrollTop: number }
-  el.scrollTop = initial.scrollTop ?? 0
-  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: initial.scrollHeight })
-  Object.defineProperty(el, 'clientHeight', { configurable: true, value: initial.clientHeight })
-  return el
-}
-
-describe('useAutoScroll — container resize while following', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  it('re-snaps to bottom when the scroll container shrinks (e.g. textarea grew)', () => {
-    const scrollEl = createScrollElement({ scrollHeight: 1000, clientHeight: 500, scrollTop: 500 })
-    const contentEl = document.createElement('div')
-    scrollEl.appendChild(contentEl)
-    document.body.appendChild(scrollEl)
-
-    const { result } = renderHook(() =>
-      useAutoScroll({ working: true, reverse: false }),
-    )
-    act(() => {
-      result.current.scrollRef(scrollEl)
-      result.current.contentRef(contentEl)
-    })
-    expect(result.current.userScrolled).toBe(false)
-    expect(scrollEl.scrollTop).toBe(500)
-
-    // Simulate ChatArea shrinking by 24px (textarea auto-resize, 1 → 2 lines).
-    // The total scrollHeight is unchanged.
-    Object.defineProperty(scrollEl, 'clientHeight', { configurable: true, value: 476 })
-    StubResizeObserver.instances.forEach(obs => obs.fire(scrollEl))
-
-    // The new bottom is at scrollHeight - clientHeight = 524.
-    // The user should be re-snapped to the new bottom.
-    expect(scrollEl.scrollTop).toBe(524)
-  })
-
-  it('does NOT re-snap when the user has intentionally scrolled away', () => {
-    const scrollEl = createScrollElement({ scrollHeight: 1000, clientHeight: 500, scrollTop: 500 })
-    const contentEl = document.createElement('div')
-    scrollEl.appendChild(contentEl)
-    document.body.appendChild(scrollEl)
-
-    const { result } = renderHook(() =>
-      useAutoScroll({ working: true, reverse: false }),
-    )
-    act(() => {
-      result.current.scrollRef(scrollEl)
-      result.current.contentRef(contentEl)
-    })
-
-    // User scrolls up on purpose.
-    act(() => {
-      scrollEl.scrollTop = 100
-      scrollEl.dispatchEvent(new WheelEvent('wheel', { deltaY: -50, bubbles: true }))
-    })
-    expect(result.current.userScrolled).toBe(true)
-
-    // ChatArea shrinks due to textarea auto-resize.
-    Object.defineProperty(scrollEl, 'clientHeight', { configurable: true, value: 476 })
-    StubResizeObserver.instances.forEach(obs => obs.fire(scrollEl))
-
-    // The user stays at their chosen position.
-    expect(scrollEl.scrollTop).toBe(100)
-  })
-})
diff --git a/src/hooks/useAutoScroll.test.ts b/src/hooks/useAutoScroll.test.ts
index 18e00e61..a0c65526 100644
--- a/src/hooks/useAutoScroll.test.ts
+++ b/src/hooks/useAutoScroll.test.ts
@@ -289,19 +289,19 @@ describe('useAutoScroll (normal flow mode)', () => {
     vi.useFakeTimers()
   })
 
-  it('snaps to the bottom (scrollHeight - clientHeight) when working starts', () => {
+  it('snaps to scrollHeight when working starts', () => {
     const { scrollEl, rerender } = mountAutoScroll(
       { scrollHeight: 1000, clientHeight: 300, scrollTop: 0 },
       { working: false, reverse: false },
     )
     rerender({ working: true })
-    // Normal flow: bottom is scrollHeight - clientHeight, not 0.
-    expect(scrollEl.scrollTop).toBe(700)
+    // Normal flow: bottom is scrollHeight, not 0.
+    expect(scrollEl.scrollTop).toBe(1000)
   })
 
   it('marks userScrolled on wheel up', () => {
     const { scrollEl, result } = mountAutoScroll(
-      { scrollHeight: 1000, clientHeight: 300, scrollTop: 700 },
+      { scrollHeight: 1000, clientHeight: 300, scrollTop: 1000 },
       { reverse: false },
     )
     scrollEl.scrollTop = 500
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index 603ea78f..f9cab93e 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -189,11 +189,21 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
     const el = scrollElRef.current
     if (!el) return
     markAuto(el)
-    const targetTop = bottomScrollTop(el)
+    if (reverseRef.current) {
+      // `flex-col-reverse` containers: "at bottom" is `scrollTop = 0`.
+      // `scrollTo({ top: 0, behavior })` respects smooth behavior;
+      // `scrollTop = 0` bypasses CSS `scroll-behavior: smooth`.
+      if (behavior === 'smooth') {
+        el.scrollTo({ top: 0, behavior })
+      } else {
+        el.scrollTop = 0
+      }
+      return
+    }
     if (behavior === 'smooth') {
-      el.scrollTo({ top: targetTop, behavior })
+      el.scrollTo({ top: el.scrollHeight, behavior })
     } else {
-      el.scrollTop = targetTop
+      el.scrollTop = el.scrollHeight
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -335,26 +345,14 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   }, [])
 
   // ============================================================
-  // ResizeObserver — keep the bottom locked in view when the
-  // user hasn't scrolled away, regardless of streaming state.
-  // This ensures pressing Enter to send a message, tool output
-  // showing, or any post-stream DOM growth still keeps the
-  // bottom visible.
-  //
-  // Two observation targets:
-  // - contentEl: fires on content size changes (new messages,
-  //   block expansion, tool output). The total scrollHeight
-  //   changed, so the bottom moved.
-  // - scrollEl: fires on container size changes (window resize,
-  //   InputBox auto-resize, virtualizer-driven layout shifts).
-  //   The bottom of the same content is now at a different
-  //   scrollTop, so the user can end up stranded above the new
-  //   bottom — observed scrollTop stays at the old max. Snap
-  //   them back when they were following.
+  // ResizeObserver on content — keep the bottom locked in view
+  // whenever the user hasn't scrolled away, regardless of
+  // streaming state. This ensures pressing Enter to send a
+  // message, tool output showing, or any post-stream DOM growth
+  // still keeps the bottom visible.
   // ============================================================
   useEffect(() => {
-    if (typeof ResizeObserver === 'undefined') return
-    if (!contentEl && !scrollEl) return
+    if (!contentEl || typeof ResizeObserver === 'undefined') return
 
     const observer = new ResizeObserver(() => {
       try {
@@ -371,10 +369,9 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
         }
       }
     })
-    if (contentEl) observer.observe(contentEl)
-    if (scrollEl) observer.observe(scrollEl)
+    observer.observe(contentEl)
     return () => observer.disconnect()
-  }, [contentEl, scrollEl, scrollToBottom, setUserScrolled])
+  }, [contentEl, scrollToBottom, setUserScrolled])
 
   // ============================================================
   // working edge — start/clear the settle window

From e9bff813bbccf45bb885b60bb4eae59fac053310 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 15:48:44 +0800
Subject: [PATCH 11/18] fix: remove unnecessary textarea height reset on
 auto-resize

InputBox auto-resize set style.height = 'auto' before reading
scrollHeight. This briefly collapsed the textarea to 1 line on every
text change, even when the line count didn't change (e.g. typing a
character after pressing Enter).

The spurious collapse caused a layout shift in the chat area above,
triggering unnecessary virtualizer/auto-scroll recalculations that
scrolled the chat to the wrong position.

scrollHeight is the content height regardless of the element's
current style.height, so the auto reset is unnecessary. Removing
it eliminates the layout shift on character-only edits.
---
 src/features/chat/InputBox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 29ba03d4..6f2f5684 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -343,7 +343,6 @@ function InputBoxComponent({
       return
     }
 
-    textarea.style.height = 'auto'
     const scrollHeight = textarea.scrollHeight
     // 原生层已处理键盘 resize，window.innerHeight 即可用高度
     const viewportH = window.innerHeight

From a28cac2aa883326e9ca3d5b7a4aca2099afc8712 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 16:03:06 +0800
Subject: [PATCH 12/18] refactor: replace auto-collapse with manual collapse
 toggle on mobile

Remove the auto-collapse behavior that folded the input box when the
user scrolled away from the bottom. The content-height reset on
textarea resize (removed in preceding commit) broke the layout
transition, leaving the collapsed bar at the top of the panel with
empty space below.

Switch to a manual toggle:
- useMobileCollapse: track a user-controlled manuallyCollapsed state
  instead of deriving from isAtBottom / isFocused
- InputToolbar: add a collapse button on mobile (isCompact) that
  calls toggleCollapse
- InputBox: wire collapse state to InputToolbar, drop unused refs
  from hook call

The collapsed bar is still shown when collapsed; clicking it expands
and focuses the textarea automatically.
---
 src/features/chat/InputBox.tsx               |   9 +-
 src/features/chat/input/InputToolbar.tsx     |  15 +-
 src/features/chat/input/useMobileCollapse.ts | 149 ++++---------------
 3 files changed, 46 insertions(+), 127 deletions(-)

diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 6f2f5684..e4f93c45 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -197,7 +197,6 @@ function InputBoxComponent({
   onRedoAll,
   onClearRevert,
   registerInputBox,
-  isAtBottom = true,
   showScrollToBottom = false,
   onScrollToBottom,
   collapsedPermission,
@@ -276,14 +275,10 @@ function InputBoxComponent({
   // ============================================
   // Mobile Input Dock: 滚动收起/展开（逻辑在 useMobileCollapse hook 中）
   // ============================================
-  const { isCollapsed, handleExpandInput, handleFocus, handleBlur, handleContainerPointerDown } =
+  const { isCollapsed, toggleCollapse, handleExpandInput, handleFocus, handleBlur, handleContainerPointerDown } =
     useMobileCollapse({
       enabled: interaction.enableCollapsedInputDock,
-      isAtBottom,
       textareaRef,
-      inputContainerRef,
-      contentWrapRef,
-      footerRef,
       registerInputBox,
       collapsedPermission,
       collapsedQuestion,
@@ -1399,6 +1394,8 @@ function InputBoxComponent({
                         modelsLoading={modelsLoading}
                         inputContainerRef={inputContainerRef}
                         modelSelectorRef={modelSelectorRef}
+                        isCollapsed={isCollapsed}
+                        onToggleCollapse={toggleCollapse}
                       />
                     </div>
                   </div>
diff --git a/src/features/chat/input/InputToolbar.tsx b/src/features/chat/input/InputToolbar.tsx
index d57d6a4d..b40d024c 100644
--- a/src/features/chat/input/InputToolbar.tsx
+++ b/src/features/chat/input/InputToolbar.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ChevronDownIcon, SendIcon, StopIcon, PaperclipIcon, AgentIcon, ThinkingIcon } from '../../../components/Icons'
+import { ChevronDownIcon, SendIcon, StopIcon, PaperclipIcon, AgentIcon, ThinkingIcon, MinusIcon } from '../../../components/Icons'
 import { DropdownMenu, MenuItem, IconButton, AnimatedPresence } from '../../../components/ui'
 import { ModelSelector, type ModelSelectorHandle } from '../ModelSelector'
 import { useChatViewport } from '../chatViewport'
@@ -35,6 +35,9 @@ interface InputToolbarProps {
   // 输入框容器 ref，用于约束菜单边界
   inputContainerRef?: React.RefObject<HTMLDivElement | null>
   modelSelectorRef?: React.RefObject<ModelSelectorHandle | null>
+  // 移动端手动折叠
+  isCollapsed?: boolean
+  onToggleCollapse?: () => void
 }
 
 export function InputToolbar({
@@ -57,6 +60,8 @@ export function InputToolbar({
   modelsLoading = false,
   inputContainerRef,
   modelSelectorRef,
+  isCollapsed = false,
+  onToggleCollapse,
 }: InputToolbarProps) {
   const { t } = useTranslation(['chat', 'common'])
   const { presentation } = useChatViewport()
@@ -493,6 +498,14 @@ export function InputToolbar({
 
       {/* Action Buttons */}
       <div className="flex items-center gap-1">
+        {isCompact && !isCollapsed && onToggleCollapse && (
+          <IconButton
+            aria-label="Collapse input"
+            onClick={onToggleCollapse}
+          >
+            <MinusIcon />
+          </IconButton>
+        )}
         <AnimatedPresence show={supportsAnyFile}>
           <>
             {/* 浏览器模式下的隐藏文件输入 */}
diff --git a/src/features/chat/input/useMobileCollapse.ts b/src/features/chat/input/useMobileCollapse.ts
index 8291f5af..91c8a821 100644
--- a/src/features/chat/input/useMobileCollapse.ts
+++ b/src/features/chat/input/useMobileCollapse.ts
@@ -1,24 +1,17 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import type { CollapsedDialogInfo } from '../InputBox'
 
 // ============================================
 // useMobileCollapse
-// 移动端输入框滚动收起/展开（紧凑栏模式）的全部状态与逻辑
+// 移动端输入框手动收起/展开（紧凑栏模式）的全部状态与逻辑。
+// 不再自动折叠——展开态保持到用户手动收起为止。
 // ============================================
 
 interface UseMobileCollapseOptions {
   /** 是否启用移动端输入交互（只代表交互，不代表 UI） */
   enabled: boolean
-  /** 是否处于页面底部 */
-  isAtBottom: boolean
   /** textarea 的 ref */
   textareaRef: React.RefObject<HTMLTextAreaElement | null>
-  /** 输入框容器的 ref（用于判断焦点去向） */
-  inputContainerRef: React.RefObject<HTMLDivElement | null>
-  /** 内容包裹层 ref（用于 ResizeObserver 采样展开态高度） */
-  contentWrapRef: React.RefObject<HTMLDivElement | null>
-  /** Footer 区域 ref（移动端点击不应触发收起） */
-  footerRef: React.RefObject<HTMLDivElement | null>
   /** 注册输入框容器用于动画 */
   registerInputBox?: (element: HTMLElement | null) => void
   /** 收起态的 permission/question 对话框 */
@@ -29,153 +22,69 @@ interface UseMobileCollapseOptions {
 interface UseMobileCollapseReturn {
   /** 是否处于收起（紧凑栏）状态 */
   isCollapsed: boolean
+  /** 切换收起/展开 */
+  toggleCollapse: () => void
   /** 点击紧凑栏展开 */
   handleExpandInput: () => void
   /** textarea onFocus */
   handleFocus: () => void
   /** textarea onBlur */
   handleBlur: (e: React.FocusEvent) => void
-  /** 输入框容器 onPointerDown（移动端触摸兜底） */
-  handleContainerPointerDown: (e: React.PointerEvent) => void
+  /** 输入框容器 onPointerDown */
+  handleContainerPointerDown: () => void
 }
 
 export function useMobileCollapse({
   enabled,
-  isAtBottom,
   textareaRef,
-  inputContainerRef,
-  contentWrapRef,
-  footerRef,
   registerInputBox,
   collapsedPermission,
   collapsedQuestion,
 }: UseMobileCollapseOptions): UseMobileCollapseReturn {
-  // 判断节点是否在输入区域内部（inputContainer / contentWrap / footer）
-  const isInsideInputArea = useCallback(
-    (node: Node | null): boolean => {
-      if (!node) return false
-      return !!(
-        inputContainerRef.current?.contains(node) ||
-        contentWrapRef.current?.contains(node) ||
-        footerRef.current?.contains(node)
-      )
-    },
-    [inputContainerRef, contentWrapRef, footerRef],
-  )
+  // 手动折叠状态（用户通过按钮切换）
+  const [manuallyCollapsed, setManuallyCollapsed] = useState(false)
 
-  // isFocused: textarea 是否聚焦中（或用户正在与输入框容器交互中）
-  const [isFocused, setIsFocused] = useState(false)
-
-  // 直接计算是否收起（纯派生值）
+  // 有 pending dialog 时不允许折叠
   const hasPendingDialogs = !!collapsedPermission || !!collapsedQuestion
-  const isCollapsed = enabled && !isAtBottom && !isFocused && !hasPendingDialogs
+  const isCollapsed = enabled && manuallyCollapsed && !hasPendingDialogs
+
+  // ---- 切换折叠状态 ----
+  const toggleCollapse = useCallback(() => {
+    if (!enabled) return
+    setManuallyCollapsed(prev => !prev)
+  }, [enabled])
 
   // ---- 点击紧凑栏展开 ----
   const handleExpandInput = useCallback(() => {
-    setIsFocused(true)
+    setManuallyCollapsed(false)
     requestAnimationFrame(() => {
       textareaRef.current?.focus()
     })
   }, [textareaRef])
 
-  // ---- 容器交互标记 ----
-  // pointerdown 在容器内（但 textarea 之外）按下时置 true，
-  // 用于 blur 延迟回调中判断用户是否正在与容器内按钮交互（如 model/agent 选择器）。
-  // 移动端触摸 button 时 relatedTarget 和 activeElement 都不可靠，需要此标记兜底。
-  // 注意：必须排除 textarea 自身的触摸，否则"在 textarea 上滑动触发滚动"时
-  // 也会被标记为容器交互，导致 blur 后输入框无法收起。
-  const containerInteractingRef = useRef(false)
-  const containerInteractingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const handleContainerPointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      // textarea 本身的触摸不算"容器按钮交互"
-      if (e.target === textareaRef.current) return
-      containerInteractingRef.current = true
-      if (containerInteractingTimerRef.current) clearTimeout(containerInteractingTimerRef.current)
-      // 300ms 后自动清除，确保不会永久阻止收起
-      containerInteractingTimerRef.current = setTimeout(() => {
-        containerInteractingRef.current = false
-      }, 300)
-    },
-    [textareaRef],
-  )
-
-  // ---- textarea focus/blur 追踪 ----
-  const handleFocus = useCallback(() => setIsFocused(true), [])
-
-  // blur 处理：三层防线
-  // 1. relatedTarget 检查 —— 焦点移到容器内元素
-  // 2. 延迟后 activeElement 检查 —— 焦点异步移入（如 portal 搜索框）
-  // 3. containerInteractingRef 检查 —— 移动端触摸兜底
-  const blurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const handleBlur = useCallback(
-    (e: React.FocusEvent) => {
-      // 焦点移到输入区域内部，不收起
-      if (isInsideInputArea(e.relatedTarget as Node | null)) return
-
-      blurTimerRef.current = setTimeout(() => {
-        if (isInsideInputArea(document.activeElement)) return
-        if (containerInteractingRef.current) return
-        setIsFocused(false)
-      }, 150)
-    },
-    [isInsideInputArea],
-  )
-
-  // focus 时清掉 pending 的 blur timer
-  useEffect(() => {
-    if (isFocused && blurTimerRef.current) {
-      clearTimeout(blurTimerRef.current)
-      blurTimerRef.current = null
-    }
-  }, [isFocused])
-
-  // ---- isFocused 逃逸阀 ----
-  // 场景：用户点了容器内按钮（如 agent selector），handleBlur 正确阻止了收起，
-  // 但此后 textarea 不再聚焦，isFocused 卡在 true。
-  // 需要监听 document pointerdown：如果点击/触摸发生在容器外部 → 清除 isFocused。
-  // 同时，滚动事件也应该能清除（用户在 chat 区域滑动 = 离开输入区域）。
-  useEffect(() => {
-    if (!isFocused || !enabled) return
-
-    const handleOutsidePointerDown = (e: PointerEvent) => {
-      if (isInsideInputArea(e.target as Node)) return
-
-      // textarea 聚焦时，用户触摸聊天区 → 清除 isFocused，允许收起。
-      // 移动端滑动聊天区不会触发 textarea blur，需要靠此逃逸阀兜底。
-      if (document.activeElement === textareaRef.current) {
-        setIsFocused(false)
-        return
-      }
+  // ---- textarea focus：展开 ----
+  const handleFocus = useCallback(() => {
+    // 收起态下聚焦 textarea 时自动展开
+    setManuallyCollapsed(false)
+  }, [])
 
-      // activeElement 是输入区内其他元素（如 portal 弹窗）→ 不清除
-      if (isInsideInputArea(document.activeElement)) return
-
-      setIsFocused(false)
-    }
-
-    // 使用 capture 确保在任何 stopPropagation 之前捕获
-    document.addEventListener('pointerdown', handleOutsidePointerDown, { capture: true })
-    return () => {
-      document.removeEventListener('pointerdown', handleOutsidePointerDown, { capture: true })
-    }
-  }, [isFocused, enabled, isInsideInputArea, textareaRef])
+  // ---- textarea blur：不再自动折叠 ----
+  const handleBlur = useCallback(() => {}, [])
 
   // ---- 注册输入框容器用于动画 ----
   useEffect(() => {
     if (registerInputBox) {
-      registerInputBox(isCollapsed ? null : inputContainerRef.current)
+      registerInputBox(isCollapsed ? null : textareaRef.current?.closest('[data-input-box]') ?? null)
       return () => registerInputBox(null)
     }
-  }, [registerInputBox, isCollapsed, inputContainerRef])
+  }, [registerInputBox, isCollapsed, textareaRef])
 
   return {
     isCollapsed,
+    toggleCollapse,
     handleExpandInput,
     handleFocus,
     handleBlur,
-    handleContainerPointerDown,
+    handleContainerPointerDown: () => {},
   }
 }

From 55c41ca1c18b7d0e7d65f93a95a227a5a1660cfb Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 16:12:17 +0800
Subject: [PATCH 13/18] fix: restructure expanded track grid so collapse fully
 reclaims space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous auto-collapse used the same CSS pattern but the grid item
(relative z-30) lacked overflow-hidden, so 0fr track never collapsed
to 0 height on manual collapse — the expanded input area left blank
space below the CollapsedBar.

Move the relative z-30 positioning anchor outside the grid, add
overflow-hidden to the grid element itself. This way 0fr properly
clips the grid items to 0 height. Menus (MentionMenu, SlashCommandMenu)
remain outside the grid overflow so they're not affected.

Drive-by: remove onNavigate prop from SlashCommandMenu — the prop
doesn't exist in its interface and referenced an undefined function
(updateSlashQuery).
---
 src/features/chat/InputBox.tsx | 44 +++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index e4f93c45..ab25d081 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -1253,27 +1253,22 @@ function InputBoxComponent({
           </div>
 
           {/* 展开态完整输入 track：展开时撑开，收起时坍缩为 0；始终挂载避免 remount，靠 0fr + overflow-hidden + pointer-events-none 隐藏 */}
-          <div
-            className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${
-              !isCollapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none'
-            }`}
-          >
-            {/* relative positioning ancestor for menus, outside overflow-hidden */}
-            <div className="relative z-30">
-              {/* @ Mention Menu — 在 overflow-hidden 外部，防止被裁剪 */}
-              <MentionMenu
-                ref={mentionMenuRef}
-                isOpen={mentionOpen}
-                query={mentionQuery}
-                agents={agents}
-                rootPath={rootPath}
-                excludeValues={excludeValues}
-                onSelect={handleMentionSelect}
-                onNavigate={updateMentionQuery}
-                onClose={handleMentionClose}
-              />
-
-              {/* / Slash Command Menu — 在 overflow-hidden 外部，防止被裁剪 */}
+          {/* relative positioning ancestor for menus, outside the grid's overflow-hidden */}
+          <div className="relative z-30">
+            {/* @ Mention Menu — 在 overflow-hidden 外部，防止被裁剪 */}
+            <MentionMenu
+              ref={mentionMenuRef}
+              isOpen={mentionOpen}
+              query={mentionQuery}
+              agents={agents}
+              rootPath={rootPath}
+              excludeValues={excludeValues}
+              onSelect={handleMentionSelect}
+              onNavigate={updateMentionQuery}
+              onClose={handleMentionClose}
+            />
+
+            {/* / Slash Command Menu — 在 overflow-hidden 外部，防止被裁剪 */}
               <SlashCommandMenu
                 ref={slashMenuRef}
                 isOpen={slashOpen}
@@ -1283,7 +1278,12 @@ function InputBoxComponent({
                 onClose={handleSlashClose}
               />
 
-              {/* overflow-hidden 只包裹实际输入内容，不影响上方 absolute 菜单 */}
+            {/* Grid 自身 overflow-hidden，收起时 0fr 能完全坍缩 */}
+            <div
+              className={`grid overflow-hidden transition-[grid-template-rows,opacity] duration-300 ease-out ${
+                !isCollapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none'
+              }`}
+            >
               <div className="overflow-hidden">
                 {/* Input Container */}
                 <div

From 92fbf69caa46f9a3de2e347121f648393a1f2c24 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 16:19:55 +0800
Subject: [PATCH 14/18] fix: use hidden mirror element to measure textarea
 content height

The auto-resize effect previously set style.height = 'auto' to read accurate
scrollHeight, but this briefly collapsed the textarea to 1 line, causing
a layout shift that propagated to the ChatArea (scroll jumping on typing).

Removing the auto reset fixed the scroll jumping but broke shrinking:
when the textarea had a fixed style.height larger than the content,
scrollHeight could return the element height instead of the content
height, so deleting lines never reduced the height.

Replace with a hidden mirror div that copies the textarea's computed
styles and current width. Since the mirror is off-screen (position:
absolute, top/left: -9999px), no visible layout shift occurs.
The mirror's scrollHeight gives the correct content height.
---
 src/features/chat/InputBox.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index ab25d081..2f3a658c 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -338,7 +338,23 @@ function InputBoxComponent({
       return
     }
 
-    const scrollHeight = textarea.scrollHeight
+    // 用隐藏 mirror 测量 content 实际高度，避免坍缩 textarea 导致布局抖动。
+    // 读取 textarea 的当前宽度和字号等样式，复制给 mirror 保证测量精度。
+    const textareaWidth = textarea.clientWidth
+    if (textareaWidth <= 0) return // textarea 未渲染（如折叠态），跳过
+    const taStyles = getComputedStyle(textarea)
+    const mirror = document.createElement('div')
+    mirror.style.cssText = taStyles.cssText
+    mirror.style.position = 'absolute'
+    mirror.style.top = '-9999px'
+    mirror.style.left = '-9999px'
+    mirror.style.width = textareaWidth + 'px'
+    mirror.style.height = 'auto'
+    mirror.textContent = text
+    document.body.appendChild(mirror)
+    const scrollHeight = mirror.scrollHeight
+    document.body.removeChild(mirror)
+
     // 原生层已处理键盘 resize，window.innerHeight 即可用高度
     const viewportH = window.innerHeight
     // 可用高度 = viewport - header(48px) - toolbar/padding/footer(~100px) - 安全余量

From c5b3601981919ed4fc2d92aabe4022d98ce93e9f Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 17:04:00 +0800
Subject: [PATCH 15/18] fix: use textarea mirror for stable height measurement,
 keep footer visible when collapsed

- Replace div mirror with off-screen textarea mirror to match native
  scrollHeight behavior exactly (fixes 'first Enter not growing' bug)
- Replace useEffect with useLayoutEffect for synchronous resize before paint
- Unify bottomDockPadding formula (Footer always visible, no split)
- Move InputFooter outside full-input grid so it stays visible when collapsed
- Wire onDockResize callback for explicit scroll-to-bottom-on-resize safety
- Batch useAutoScroll RO via rAF and observe scrollEl for layout shifts
---
 src/features/chat/ChatPane.tsx                |  1 +
 src/features/chat/InputBox.tsx                | 91 +++++++------------
 .../input/measureTextareaContentHeight.ts     | 66 ++++++++++++++
 .../chat/input/useTextareaAutoHeight.ts       | 64 +++++++++++++
 src/hooks/useAutoScroll.ts                    | 70 +++++++++-----
 5 files changed, 210 insertions(+), 82 deletions(-)
 create mode 100644 src/features/chat/input/measureTextareaContentHeight.ts
 create mode 100644 src/features/chat/input/useTextareaAutoHeight.ts

diff --git a/src/features/chat/ChatPane.tsx b/src/features/chat/ChatPane.tsx
index 95920190..7478da5c 100644
--- a/src/features/chat/ChatPane.tsx
+++ b/src/features/chat/ChatPane.tsx
@@ -867,6 +867,7 @@ export const ChatPane = memo(function ChatPane({
           onClearRevert={clearRevert}
           registerInputBox={registerInputBox}
           isAtBottom={isAtBottom}
+          onDockResize={() => chatAreaRef.current?.scrollToBottomIfAtBottom()}
           showScrollToBottom={!isAtBottom}
           onScrollToBottom={() => chatAreaRef.current?.scrollToBottom()}
           collapsedPermission={
diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 2f3a658c..4ed95b06 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -19,6 +19,7 @@ import { FloatingActions, CollapsedBar } from './input/InputActions'
 import { useMobileCollapse } from './input/useMobileCollapse'
 import { useAttachmentRail } from './input/useAttachmentRail'
 import { useInputHistory } from './input/useInputHistory'
+import { useTextareaAutoHeight } from './input/useTextareaAutoHeight'
 import {
   TEXT_STYLE,
   bytesToDataUrl,
@@ -155,6 +156,8 @@ export interface InputBoxProps {
   // Animation
   registerInputBox?: (element: HTMLElement | null) => void
   isAtBottom?: boolean
+  /** Called after dock height changes while at bottom; use to re-snap chat scroll. */
+  onDockResize?: () => void
   showScrollToBottom?: boolean
   onScrollToBottom?: () => void
   // Collapsed dialog capsules
@@ -197,6 +200,8 @@ function InputBoxComponent({
   onRedoAll,
   onClearRevert,
   registerInputBox,
+  isAtBottom = true,
+  onDockResize,
   showScrollToBottom = false,
   onScrollToBottom,
   collapsedPermission,
@@ -327,40 +332,13 @@ function InputBoxComponent({
     [],
   )
 
-  // 自动调整 textarea 高度
-  useEffect(() => {
-    const textarea = textareaRef.current
-    if (!textarea) return
-
-    // 只有真正空字符串时才重置高度；保留仅空格/空行时的换行高度
-    if (text.length === 0) {
-      textarea.style.height = '24px'
-      return
-    }
-
-    // 用隐藏 mirror 测量 content 实际高度，避免坍缩 textarea 导致布局抖动。
-    // 读取 textarea 的当前宽度和字号等样式，复制给 mirror 保证测量精度。
-    const textareaWidth = textarea.clientWidth
-    if (textareaWidth <= 0) return // textarea 未渲染（如折叠态），跳过
-    const taStyles = getComputedStyle(textarea)
-    const mirror = document.createElement('div')
-    mirror.style.cssText = taStyles.cssText
-    mirror.style.position = 'absolute'
-    mirror.style.top = '-9999px'
-    mirror.style.left = '-9999px'
-    mirror.style.width = textareaWidth + 'px'
-    mirror.style.height = 'auto'
-    mirror.textContent = text
-    document.body.appendChild(mirror)
-    const scrollHeight = mirror.scrollHeight
-    document.body.removeChild(mirror)
-
-    // 原生层已处理键盘 resize，window.innerHeight 即可用高度
-    const viewportH = window.innerHeight
-    // 可用高度 = viewport - header(48px) - toolbar/padding/footer(~100px) - 安全余量
-    const maxH = isCompact ? Math.max(80, viewportH - 48 - 100 - 72) : viewportH * 0.35
-    textarea.style.height = Math.max(24, Math.min(scrollHeight, maxH)) + 'px'
-  }, [text, isCompact])
+  useTextareaAutoHeight({
+    textareaRef,
+    text,
+    isCompact,
+    shouldNudgeChatScroll: isAtBottom,
+    onDockResize,
+  })
 
   // 计算
   const inputDisabled = !!disabled
@@ -1202,17 +1180,11 @@ function InputBoxComponent({
     if (a.agentName) excludeValues.add(a.agentName)
   })
 
-  // 底部 padding 计算：
-  // - isCollapsed (收起态 / 移动端「回复胶囊」)：
-  //   公式 max(12, env)。Safari env()=0 → 12px breathing；PWA env()=34 → 34px，
-  //   胶囊底部刚好贴 safe-area 顶部，避免 env+12 叠加出现的「多一截」间距。
-  // - 展开态：Footer (h-8 = 2rem) 已是一个天然的视觉缓冲，只需补足 safe-area
-  //   超出 Footer 的部分。这避免 PWA 下 Footer + 完整 safe-area 叠加出现
-  //   「双倍 safe-area」的视觉 gap。
-  //   公式：max(0, env - 2rem) → 总缓冲 = Footer + padding = max(32px, env)
-  const bottomDockPadding = isCollapsed
-    ? 'max(12px, var(--safe-area-inset-bottom, 0px))'
-    : 'max(0px, calc(var(--safe-area-inset-bottom, 0px) - 2rem))'
+  // 底部 padding：Footer (h-8 = 2rem) 已是一个天然的视觉缓冲，只需补足 safe-area
+  // 超出 Footer 的部分，避免双倍 safe-area 的视觉 gap。
+  // 现在 Footer 在折叠/展开态都可见，公式统一。
+  // 总底部空间 = Footer(32px) + padding = max(32px, env)
+  const bottomDockPadding = 'max(0px, calc(var(--safe-area-inset-bottom, 0px) - 2rem))'
 
   return (
     <div className="w-full">
@@ -1417,21 +1389,24 @@ function InputBoxComponent({
                   </div>
                 </div>
 
-                {/* Footer — 展开态固定高度区域，随 track 一起显隐 */}
-                <div
-                  ref={footerRef}
-                  onPointerDown={handleContainerPointerDown}
-                  className="h-8 flex items-center justify-center"
-                >
-                  <InputFooter
-                    paneId={paneId}
-                    sessionId={sessionId}
-                    onNewChat={onNewChat}
-                    inputContainerRef={inputContainerRef}
-                  />
-                </div>
               </div>
             </div>
+
+            {/* Footer — 始终可见（折叠/展开都有），不在折叠 grid 内 */}
+            <div
+              ref={footerRef}
+              onPointerDown={handleContainerPointerDown}
+              className={`transition-[opacity] duration-300 ease-out ${
+                isCollapsed ? 'opacity-100' : 'opacity-100'
+              } h-8 flex items-center justify-center`}
+            >
+              <InputFooter
+                paneId={paneId}
+                sessionId={sessionId}
+                onNewChat={onNewChat}
+                inputContainerRef={inputContainerRef}
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/features/chat/input/measureTextareaContentHeight.ts b/src/features/chat/input/measureTextareaContentHeight.ts
new file mode 100644
index 00000000..59c67fce
--- /dev/null
+++ b/src/features/chat/input/measureTextareaContentHeight.ts
@@ -0,0 +1,66 @@
+const MIRROR_ID = 'opencodeui-textarea-height-mirror'
+
+function getMirrorTextarea(): HTMLTextAreaElement {
+  let mirror = document.getElementById(MIRROR_ID) as HTMLTextAreaElement | null
+  if (!mirror) {
+    mirror = document.createElement('textarea')
+    mirror.id = MIRROR_ID
+    mirror.setAttribute('aria-hidden', 'true')
+    mirror.tabIndex = -1
+    mirror.setAttribute('readonly', 'true')
+    mirror.rows = 1
+    mirror.style.position = 'fixed'
+    mirror.style.left = '-9999px'
+    mirror.style.top = '0'
+    mirror.style.visibility = 'hidden'
+    mirror.style.pointerEvents = 'none'
+    mirror.style.overflow = 'hidden'
+    mirror.style.resize = 'none'
+    mirror.style.margin = '0'
+    document.body.appendChild(mirror)
+  }
+  return mirror
+}
+
+function copyTextareaMetrics(source: HTMLTextAreaElement, mirror: HTMLTextAreaElement): void {
+  const computed = getComputedStyle(source)
+  const rectWidth = source.getBoundingClientRect().width
+  const widthPx = Math.max(1, rectWidth > 0 ? rectWidth : source.offsetWidth || parseFloat(computed.width) || 1)
+
+  mirror.className = source.className
+  mirror.rows = source.rows
+
+  mirror.style.boxSizing = computed.boxSizing
+  mirror.style.width = `${widthPx}px`
+  mirror.style.paddingTop = computed.paddingTop
+  mirror.style.paddingRight = computed.paddingRight
+  mirror.style.paddingBottom = computed.paddingBottom
+  mirror.style.paddingLeft = computed.paddingLeft
+  mirror.style.borderTopWidth = computed.borderTopWidth
+  mirror.style.borderRightWidth = computed.borderRightWidth
+  mirror.style.borderBottomWidth = computed.borderBottomWidth
+  mirror.style.borderLeftWidth = computed.borderLeftWidth
+  mirror.style.borderStyle = computed.borderStyle
+  mirror.style.fontFamily = computed.fontFamily
+  mirror.style.fontSize = computed.fontSize
+  mirror.style.fontWeight = computed.fontWeight
+  mirror.style.lineHeight = computed.lineHeight
+  mirror.style.letterSpacing = computed.letterSpacing
+  mirror.style.whiteSpace = computed.whiteSpace
+  mirror.style.wordBreak = computed.wordBreak
+  mirror.style.overflowWrap = computed.overflowWrap
+}
+
+/**
+ * Measure wrapped text height without collapsing the visible textarea
+ * (avoids layout flicker on the chat scroll sibling).
+ */
+export function measureTextareaContentHeight(textarea: HTMLTextAreaElement, content: string): number {
+  const mirror = getMirrorTextarea()
+  copyTextareaMetrics(textarea, mirror)
+
+  // ZWSP on the row after a trailing newline so scrollHeight includes the caret line.
+  mirror.value = content.endsWith('\n') ? `${content}\u200b` : content
+  mirror.style.height = 'auto'
+  return mirror.scrollHeight
+}
\ No newline at end of file
diff --git a/src/features/chat/input/useTextareaAutoHeight.ts b/src/features/chat/input/useTextareaAutoHeight.ts
new file mode 100644
index 00000000..74cf5352
--- /dev/null
+++ b/src/features/chat/input/useTextareaAutoHeight.ts
@@ -0,0 +1,64 @@
+import { useCallback, useLayoutEffect, useEffect, type RefObject } from 'react'
+import { measureTextareaContentHeight } from './measureTextareaContentHeight'
+
+const MIN_TEXTAREA_HEIGHT_PX = 24
+
+export interface UseTextareaAutoHeightOptions {
+  textareaRef: RefObject<HTMLTextAreaElement | null>
+  text: string
+  isCompact: boolean
+  /** When true, nudge chat scroll after dock height changes (caller should gate follow mode). */
+  shouldNudgeChatScroll?: boolean
+  onDockResize?: () => void
+}
+
+export function useTextareaAutoHeight({
+  textareaRef,
+  text,
+  isCompact,
+  shouldNudgeChatScroll = false,
+  onDockResize,
+}: UseTextareaAutoHeightOptions): void {
+  const applyHeight = useCallback(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    if (text.length === 0) {
+      textarea.style.height = `${MIN_TEXTAREA_HEIGHT_PX}px`
+      textarea.style.overflowY = 'hidden'
+      if (shouldNudgeChatScroll) onDockResize?.()
+      return
+    }
+
+    const prevScrollTop = textarea.scrollTop
+    const contentHeight = measureTextareaContentHeight(textarea, text)
+    const viewportH = window.innerHeight
+    const maxH = isCompact ? Math.max(80, viewportH - 48 - 100 - 72) : viewportH * 0.35
+    const nextHeight = Math.max(MIN_TEXTAREA_HEIGHT_PX, Math.min(contentHeight, maxH))
+    textarea.style.height = `${nextHeight}px`
+    textarea.style.overflowY = contentHeight > maxH ? 'auto' : 'hidden'
+    textarea.scrollTop = prevScrollTop
+
+    if (shouldNudgeChatScroll) onDockResize?.()
+  }, [textareaRef, text, isCompact, shouldNudgeChatScroll, onDockResize])
+
+  useLayoutEffect(() => {
+    applyHeight()
+  }, [applyHeight])
+
+  useEffect(() => {
+    const textarea = textareaRef.current
+    const observeTarget = textarea?.parentElement
+    if (!textarea || !observeTarget || typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(() => {
+      applyHeight()
+    })
+    observer.observe(observeTarget)
+    window.addEventListener('resize', applyHeight)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', applyHeight)
+    }
+  }, [textareaRef, applyHeight])
+}
\ No newline at end of file
diff --git a/src/hooks/useAutoScroll.ts b/src/hooks/useAutoScroll.ts
index f9cab93e..e1acb6f5 100644
--- a/src/hooks/useAutoScroll.ts
+++ b/src/hooks/useAutoScroll.ts
@@ -345,33 +345,55 @@ export function useAutoScroll(options: UseAutoScrollOptions): UseAutoScrollRetur
   }, [])
 
   // ============================================================
-  // ResizeObserver on content — keep the bottom locked in view
-  // whenever the user hasn't scrolled away, regardless of
-  // streaming state. This ensures pressing Enter to send a
-  // message, tool output showing, or any post-stream DOM growth
-  // still keeps the bottom visible.
+  // ResizeObserver — keep the bottom locked in view when the
+  // user hasn't scrolled away. Observes both contentEl and
+  // scrollEl so layout shifts (textarea auto-resize, window
+  // resize) also re-snap to the new bottom.
+  //
+  // Uses requestAnimationFrame to batch multiple RO callbacks
+  // within the same frame — prevents transient intermediate
+  // sizes from overwriting the final scroll position.
   // ============================================================
+  const resizeRafIdRef = useRef<number | null>(null)
+  const handleResizeTick = useCallback(() => {
+    resizeRafIdRef.current = null
+    try {
+      const el = scrollElRef.current
+      if (el && !canScroll(el)) {
+        if (userScrolledRef.current) setUserScrolled(false)
+        return
+      }
+      if (userScrolledRef.current) return
+      scrollToBottom(false)
+    } catch (err) {
+      if (import.meta.env.DEV) {
+        console.trace('[useAutoScroll RO] error', err)
+      }
+    }
+  }, [scrollToBottom, setUserScrolled])
+
+  const scheduleResize = useCallback(() => {
+    if (resizeRafIdRef.current === null) {
+      resizeRafIdRef.current = requestAnimationFrame(handleResizeTick)
+    }
+  }, [handleResizeTick])
+
   useEffect(() => {
-    if (!contentEl || typeof ResizeObserver === 'undefined') return
-
-    const observer = new ResizeObserver(() => {
-      try {
-        const scrollElLocal = scrollElRef.current
-        if (scrollElLocal && !canScroll(scrollElLocal)) {
-          if (userScrolledRef.current) setUserScrolled(false)
-          return
-        }
-        if (userScrolledRef.current) return
-        scrollToBottom(false)
-      } catch (err) {
-        if (import.meta.env.DEV) {
-          console.trace('[useAutoScroll RO] error', err)
-        }
+    if (typeof ResizeObserver === 'undefined') return
+    if (!contentEl && !scrollEl) return
+
+    const observer = new ResizeObserver(scheduleResize)
+    if (contentEl) observer.observe(contentEl)
+    if (scrollEl) observer.observe(scrollEl)
+
+    return () => {
+      observer.disconnect()
+      if (resizeRafIdRef.current !== null) {
+        cancelAnimationFrame(resizeRafIdRef.current)
+        resizeRafIdRef.current = null
       }
-    })
-    observer.observe(contentEl)
-    return () => observer.disconnect()
-  }, [contentEl, scrollToBottom, setUserScrolled])
+    }
+  }, [contentEl, scrollEl, scheduleResize])
 
   // ============================================================
   // working edge — start/clear the settle window

From 9a33b19bbb0ea9ea47a4db67324d9929f58da68a Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 19:52:55 +0800
Subject: [PATCH 16/18] fix: add touch-pan-y to ChatArea to allow horizontal
 pager gestures on mobile

---
 src/features/chat/ChatArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index 195589cc..84e894ae 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -728,7 +728,7 @@ export const ChatArea = memo(
             onKeyDown={handleScrollContainerKeyDown}
             tabIndex={-1}
             data-chat-scroll-root="true"
-            className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col"
+            className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar contain-content flex flex-col touch-pan-y"
           >
             <div ref={topSentinelRef} className="h-px shrink-0" aria-hidden="true" />
             <div className="mobile-chat-top-spacer shrink-0" />

From bb4d50e62cf1088d50ba87febb85b7ad17b7d533 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 20:21:19 +0800
Subject: [PATCH 17/18] fix: propagate touch-pan-y up the DOM chain to enable
 horizontal pager gestures on mobile

---
 src/features/chat/ChatArea.tsx | 2 +-
 src/features/chat/ChatPane.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index 84e894ae..ae828637 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -706,7 +706,7 @@ export const ChatArea = memo(
       )
 
       return (
-        <div className="h-full overflow-hidden contain-strict relative">
+        <div className="h-full overflow-hidden contain-strict relative touch-pan-y">
 
           {loadState === 'loading' && visibleMessages.length === 0 && (
             <div className="absolute inset-0 z-10 flex items-center justify-center">
diff --git a/src/features/chat/ChatPane.tsx b/src/features/chat/ChatPane.tsx
index 7478da5c..416f76a6 100644
--- a/src/features/chat/ChatPane.tsx
+++ b/src/features/chat/ChatPane.tsx
@@ -749,7 +749,7 @@ export const ChatPane = memo(function ChatPane({
   // Render
   // ============================================
   const chatContent = (
-    <div className="flex-1 relative overflow-hidden flex flex-col min-h-0">
+    <div className="flex-1 relative overflow-hidden flex flex-col min-h-0 touch-pan-y">
       {displayMode === 'single' && (
         <div className="absolute top-0 left-0 right-0 z-20 pointer-events-none">
           <div className="pointer-events-auto">
@@ -769,7 +769,7 @@ export const ChatPane = memo(function ChatPane({
         </div>
       )}
 
-      <div className="flex-1 min-h-0 overflow-hidden">
+      <div className="flex-1 min-h-0 overflow-hidden touch-pan-y">
         <InlineToolRequestContext.Provider value={inlineToolRequestCtx}>
           <ErrorBoundary onOpenSettings={onOpenSettings}>
             <ChatArea

From 4072973944f2eac7d5fabf051b82c0becb94ddd9 Mon Sep 17 00:00:00 2001
From: Louis LUO <ssparkluo@gmail.com>
Date: Sat, 27 Jun 2026 20:30:40 +0800
Subject: [PATCH 18/18] fix: delegate horizontal swipes from chat scroll root
 to mobile pager

Remove dependency on touch-pan-y propagation which could not reliably
forward horizontal gestures to the pager. Instead, add
useMobileChatPagerGestureBridge that explicitly tracks touch axis on the
scroll root and drives pager.scrollLeft when horizontal-dominant.
---
 src/features/chat/ChatArea.tsx                |   9 +-
 .../useMobileChatPagerGestureBridge.test.ts   |  62 ++++++++++
 .../chat/useMobileChatPagerGestureBridge.ts   | 108 ++++++++++++++++++
 3 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/features/chat/useMobileChatPagerGestureBridge.test.ts
 create mode 100644 src/features/chat/useMobileChatPagerGestureBridge.ts

diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index ae828637..cba2be73 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -31,6 +31,7 @@ import { messageStore } from '../../store'
 import { useTheme } from '../../hooks/useTheme'
 import { useAutoScroll } from '../../hooks/useAutoScroll'
 import { useScrollGestureDetector } from './useScrollGestureDetector'
+import { useMobileChatPagerGestureBridge } from './useMobileChatPagerGestureBridge'
 import type { Message, MessageError } from '../../types/message'
 import { RetryStatusInline, type RetryStatusInlineData } from './RetryStatusInline'
 import { buildVisibleMessageEntries, getVisibleMessageForkTargetId } from './chatAreaVisibility'
@@ -172,7 +173,7 @@ export const ChatArea = memo(
       const loadMoreBlockedRef = useRef(true)
 
       const { isWideMode } = useTheme()
-      const { presentation } = useChatViewport()
+      const { presentation, interaction } = useChatViewport()
       const atBottomThreshold = AT_BOTTOM_THRESHOLD_PX
       const messagePaddingClass = presentation.isCompact ? 'px-3' : 'px-6'
       const messageMaxWidthClass = isWideMode ? 'max-w-[95%] xl:max-w-6xl' : 'max-w-2xl'
@@ -297,6 +298,12 @@ export const ChatArea = memo(
         gestureDetector.setRoot(node)
       }, [autoScroll, gestureDetector])
 
+      useMobileChatPagerGestureBridge(
+        scrollRef,
+        interaction.sidebarBehavior === 'overlay',
+        scrollRoot,
+      )
+
       const setContentWrapperRef = useCallback((node: HTMLDivElement | null) => {
         autoScroll.contentRef(node)
       }, [autoScroll])
diff --git a/src/features/chat/useMobileChatPagerGestureBridge.test.ts b/src/features/chat/useMobileChatPagerGestureBridge.test.ts
new file mode 100644
index 00000000..d3ec2a98
--- /dev/null
+++ b/src/features/chat/useMobileChatPagerGestureBridge.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, fireEvent } from '@testing-library/react'
+import { useRef } from 'react'
+import { useMobileChatPagerGestureBridge } from './useMobileChatPagerGestureBridge'
+
+describe('useMobileChatPagerGestureBridge', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('drives pager scrollLeft on horizontal swipe from chat scroll root', () => {
+    const pager = document.createElement('div')
+    pager.className = 'mobile-chat-pager'
+    Object.defineProperty(pager, 'scrollWidth', { value: 1200, configurable: true })
+    Object.defineProperty(pager, 'clientWidth', { value: 400, configurable: true })
+    pager.scrollLeft = 280
+
+    const scrollRoot = document.createElement('div')
+    scrollRoot.setAttribute('data-chat-scroll-root', 'true')
+    Object.defineProperty(scrollRoot, 'scrollHeight', { value: 2000, configurable: true })
+    Object.defineProperty(scrollRoot, 'clientHeight', { value: 400, configurable: true })
+
+    pager.appendChild(scrollRoot)
+    document.body.appendChild(pager)
+
+    renderHook(() => {
+      const innerRef = useRef<HTMLElement | null>(scrollRoot)
+      useMobileChatPagerGestureBridge(innerRef, true, scrollRoot)
+    })
+
+    fireEvent.touchStart(scrollRoot, {
+      touches: [{ clientX: 100, clientY: 200 }],
+    })
+    fireEvent.touchMove(scrollRoot, {
+      touches: [{ clientX: 40, clientY: 202 }],
+    })
+
+    expect(pager.scrollLeft).toBeGreaterThan(280)
+  })
+
+  it('does not attach when disabled', () => {
+    const pager = document.createElement('div')
+    pager.className = 'mobile-chat-pager'
+    const scrollRoot = document.createElement('div')
+    pager.appendChild(scrollRoot)
+    document.body.appendChild(pager)
+
+    const addSpy = vi.spyOn(scrollRoot, 'addEventListener')
+
+    renderHook(() => {
+      const innerRef = useRef<HTMLElement | null>(scrollRoot)
+      useMobileChatPagerGestureBridge(innerRef, false, scrollRoot)
+    })
+
+    expect(addSpy).not.toHaveBeenCalled()
+    addSpy.mockRestore()
+  })
+})
\ No newline at end of file
diff --git a/src/features/chat/useMobileChatPagerGestureBridge.ts b/src/features/chat/useMobileChatPagerGestureBridge.ts
new file mode 100644
index 00000000..9590da8b
--- /dev/null
+++ b/src/features/chat/useMobileChatPagerGestureBridge.ts
@@ -0,0 +1,108 @@
+import { useEffect, type RefObject } from 'react'
+
+const AXIS_LOCK_PX = 8
+const HORIZONTAL_RATIO = 1.2
+
+function findMobilePager(el: HTMLElement | null): HTMLElement | null {
+  return el?.closest('.mobile-chat-pager') ?? null
+}
+
+function isNestedHorizontalScroller(target: EventTarget | null, scrollRoot: HTMLElement): boolean {
+  if (!(target instanceof Element)) return false
+  let node: Element | null = target
+  while (node && node !== scrollRoot) {
+    if (!(node instanceof HTMLElement)) {
+      node = node.parentElement
+      continue
+    }
+    const style = getComputedStyle(node)
+    const ox = style.overflowX
+    if ((ox === 'auto' || ox === 'scroll' || ox === 'overlay') && node.scrollWidth > node.clientWidth + 1) {
+      return true
+    }
+    node = node.parentElement
+  }
+  return false
+}
+
+/**
+ * When the chat scroll root sits inside the mobile snap pager, vertical
+ * overflow-y scrolling competes with horizontal pager swipes. Browsers often
+ * assign the whole gesture to the inner scroller. This bridge detects
+ * horizontal-dominant touches and drives pager.scrollLeft directly.
+ */
+export function useMobileChatPagerGestureBridge(
+  scrollRootRef: RefObject<HTMLElement | null>,
+  enabled: boolean,
+  scrollRootEl: HTMLElement | null,
+): void {
+  useEffect(() => {
+    if (!enabled) return
+
+    const root = scrollRootRef.current ?? scrollRootEl
+    if (!root) return
+
+    const pager = findMobilePager(root)
+    if (!pager) return
+
+    let startX = 0
+    let startY = 0
+    let startScrollLeft = 0
+    let axis: 'pending' | 'vertical' | 'horizontal' = 'pending'
+    let active = false
+
+    const onTouchStart = (e: TouchEvent) => {
+      if (e.touches.length !== 1) return
+      active = true
+      axis = 'pending'
+      startX = e.touches[0].clientX
+      startY = e.touches[0].clientY
+      startScrollLeft = pager.scrollLeft
+    }
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!active || e.touches.length !== 1) return
+
+      const x = e.touches[0].clientX
+      const y = e.touches[0].clientY
+      const dx = x - startX
+      const dy = y - startY
+
+      if (axis === 'pending') {
+        if (Math.abs(dx) < AXIS_LOCK_PX && Math.abs(dy) < AXIS_LOCK_PX) return
+        if (Math.abs(dx) >= Math.abs(dy) * HORIZONTAL_RATIO) {
+          if (isNestedHorizontalScroller(e.target, root)) {
+            axis = 'vertical'
+            return
+          }
+          axis = 'horizontal'
+        } else {
+          axis = 'vertical'
+          return
+        }
+      }
+
+      if (axis !== 'horizontal') return
+
+      e.preventDefault()
+      pager.scrollLeft = startScrollLeft - dx
+    }
+
+    const onTouchEnd = () => {
+      active = false
+      axis = 'pending'
+    }
+
+    root.addEventListener('touchstart', onTouchStart, { passive: true })
+    root.addEventListener('touchmove', onTouchMove, { passive: false })
+    root.addEventListener('touchend', onTouchEnd)
+    root.addEventListener('touchcancel', onTouchEnd)
+
+    return () => {
+      root.removeEventListener('touchstart', onTouchStart)
+      root.removeEventListener('touchmove', onTouchMove)
+      root.removeEventListener('touchend', onTouchEnd)
+      root.removeEventListener('touchcancel', onTouchEnd)
+    }
+  }, [enabled, scrollRootRef, scrollRootEl])
+}
\ No newline at end of file