diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 42b98c65c..c2689fdb4 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -194,6 +194,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     unpinRight: unpinRightDrawer,
     closeLeft: closeLeftDrawer,
     closeRight: closeRightDrawer,
+    closeFloatingDrawersIfAny,
     leftAppBarButtonLabel,
     rightAppBarButtonLabel,
     leftAppBarButtonIcon,
@@ -202,6 +203,45 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     handleRightAppBarButtonClick,
   } = drawerChrome
 
+  // When the user switches away from this instance (e.g., taps a different
+  // instance/project tab while a floating drawer is open on phone), close any
+  // open floating drawers so the previous instance's drawer doesn't remain
+  // visually or interactively open when its tab regains focus later.
+  let wasActiveInstance = Boolean(props.isActiveInstance)
+  createEffect(() => {
+    const isActive = Boolean(props.isActiveInstance)
+    if (wasActiveInstance && !isActive) {
+      closeFloatingDrawersIfAny()
+    }
+    wasActiveInstance = isActive
+  })
+
+  onMount(() => {
+    if (typeof document === "undefined") return
+
+    const handleFloatingDrawerPointerDown = (event: PointerEvent) => {
+      if (!props.isActiveInstance) return
+
+      const hasFloatingDrawerOpen = (!leftPinned() && leftOpen()) || (!rightPinned() && rightOpen())
+      if (!hasFloatingDrawerOpen) return
+
+      const target = event.target
+      if (!(target instanceof Node)) return
+
+      const leftContent = leftDrawerContentEl()
+      const rightContent = rightDrawerContentEl()
+      const leftPaper = leftContent?.closest(".MuiDrawer-paper")
+      const rightPaper = rightContent?.closest(".MuiDrawer-paper")
+      if (leftPaper?.contains(target) || rightPaper?.contains(target)) return
+
+      if (!leftPinned() && leftOpen()) setLeftOpen(false)
+      if (!rightPinned() && rightOpen()) setRightOpen(false)
+    }
+
+    document.addEventListener("pointerdown", handleFloatingDrawerPointerDown, true)
+    onCleanup(() => document.removeEventListener("pointerdown", handleFloatingDrawerPointerDown, true))
+  })
+
   createEffect(() => {
     const instanceId = props.instance.id
     loadBackgroundProcesses(instanceId).catch((error) => {
@@ -607,7 +647,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         ModalProps={modalProps}
         sx={{
           zIndex: 60,
+          // The tab bar sits outside the floating drawer. Let its controls
+          // receive the gesture; click-away handling above still closes the
+          // drawer when the target is not inside the drawer content.
+          pointerEvents: "none",
           "& .MuiDrawer-paper": {
+            pointerEvents: "auto",
             width: isPhoneLayout() ? "100vw" : `${sessionSidebarWidth()}px`,
             boxSizing: "border-box",
             borderInlineEnd: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
@@ -620,8 +665,13 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             height: floatingHeight(),
           },
 
+          // Keep backdrop dismissal for the area below the tab bar without
+          // covering the tab bar itself.
           "& .MuiBackdrop-root": {
+            pointerEvents: "auto",
             backgroundColor: "transparent",
+            top: floatingTopPx(),
+            height: floatingHeight(),
           },
         }}
       >
@@ -723,7 +773,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         ModalProps={modalProps}
         sx={{
           zIndex: 60,
+          // See the matching override on the left drawer for rationale.
+          pointerEvents: "none",
           "& .MuiDrawer-paper": {
+            pointerEvents: "auto",
             width: isPhoneLayout() ? "100vw" : `${rightDrawerWidth()}px`,
             boxSizing: "border-box",
             borderInlineStart: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
@@ -736,7 +789,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             height: floatingHeight(),
           },
           "& .MuiBackdrop-root": {
+            pointerEvents: "auto",
             backgroundColor: "transparent",
+            top: floatingTopPx(),
+            height: floatingHeight(),
           },
         }}
       >
diff --git a/packages/ui/src/components/instance/shell/useDrawerChrome.ts b/packages/ui/src/components/instance/shell/useDrawerChrome.ts
index bccc84441..4b1238176 100644
--- a/packages/ui/src/components/instance/shell/useDrawerChrome.ts
+++ b/packages/ui/src/components/instance/shell/useDrawerChrome.ts
@@ -44,6 +44,7 @@ export interface DrawerChromeApi {
   unpinRight: () => void
   closeLeft: () => void
   closeRight: () => void
+  closeFloatingDrawersIfAny: () => boolean
   leftAppBarButtonLabel: Accessor<string>
   rightAppBarButtonLabel: Accessor<string>
   leftAppBarButtonIcon: Accessor<JSX.Element>
@@ -250,6 +251,7 @@ export function useDrawerChrome(options: UseDrawerChromeOptions): DrawerChromeAp
     unpinRight,
     closeLeft,
     closeRight,
+    closeFloatingDrawersIfAny,
     leftAppBarButtonLabel,
     rightAppBarButtonLabel,
     leftAppBarButtonIcon,
diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 07d6a9af7..1779b4c51 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -1076,6 +1076,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                     onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
                     selectedMessageIds={props.selectedMessageIds}
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
+                    onContentRendered={props.onContentRendered}
                   />
                 </Match>
                 <Match when={item().type === "compaction"}>
@@ -1135,6 +1136,7 @@ interface StepCardProps {
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   selectedMessageIds?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  onContentRendered?: () => void
 }
 
 interface CompactionCardProps {
@@ -1317,6 +1319,12 @@ function StepCard(props: StepCardProps) {
 
   const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
 
+  createEffect(() => {
+    if (props.kind !== "finish") return
+    if (!usageStats()) return
+    props.onContentRendered?.()
+  })
+
   const canDeleteMessage = () =>
     Boolean(props.showDeleteMessage && props.instanceId && props.sessionId && props.messageId) && !deletingMessage()
 
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index ea9fac707..a1142a2b6 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -5,12 +5,11 @@ import BrandedEmptyState from "./branded-empty-state"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
 import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
-import VirtualFollowList, { type VirtualFollowListApi, type VirtualFollowListState } from "./virtual-follow-list"
+import VirtualFollowList, { type VirtualFollowListApi, type VirtualFollowListState, type VirtualFollowScrollSnapshot } from "./virtual-follow-list"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useI18n } from "../lib/i18n"
-import { useScrollCache } from "../lib/hooks/use-scroll-cache"
 import { copyToClipboard } from "../lib/clipboard"
 import { showToastNotification } from "../lib/notifications"
 import { showAlertDialog } from "../stores/alerts"
@@ -39,12 +38,13 @@ export interface MessageSectionProps {
   onRevert?: (messageId: string) => void
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
-  registerScrollToBottom?: (fn: () => void) => void
+  registerScrollToBottom?: (fn: (() => void) | null) => void
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
   onQuoteSelection?: (text: string, mode: "quote" | "code") => void
   isActive?: boolean
+  sessionStreamingActive?: boolean
 }
 
 export default function MessageSection(props: MessageSectionProps) {
@@ -85,12 +85,6 @@ export default function MessageSection(props: MessageSectionProps) {
     })
   })
 
-  const scrollCache = useScrollCache({
-    instanceId: props.instanceId,
-    sessionId: props.sessionId,
-    scope: MESSAGE_SCROLL_CACHE_SCOPE,
-  })
-
   const sessionRevision = createMemo(() => store().getSessionRevision(props.sessionId))
   const usageSnapshot = createMemo(() => store().getSessionUsage(props.sessionId))
   const sessionInfo = createMemo(() =>
@@ -664,39 +658,113 @@ export default function MessageSection(props: MessageSectionProps) {
   const initialAutoScroll = createMemo(() => initialScrollSnapshot()?.atBottom ?? true)
 
   const [didRestoreScroll, setDidRestoreScroll] = createSignal(false)
+  const lastGoodScrollSnapshots = new Map<string, VirtualFollowScrollSnapshot>()
+  let restoringScrollSnapshot = false
+
+  function getLastGoodScrollSnapshot(sessionId: string) {
+    return lastGoodScrollSnapshots.get(sessionId) ?? store().getScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE)
+  }
+
+  function setLastGoodScrollSnapshot(sessionId: string, snapshot: VirtualFollowScrollSnapshot) {
+    lastGoodScrollSnapshots.set(sessionId, snapshot)
+  }
+
   createEffect(
     on(
       () => props.sessionId,
       () => {
         setDidRestoreScroll(false)
+        const snapshot = store().getScrollSnapshot(props.sessionId, MESSAGE_SCROLL_CACHE_SCOPE)
+        if (snapshot) setLastGoodScrollSnapshot(props.sessionId, snapshot)
+      },
+    ),
+  )
+
+  createEffect(
+    on(
+      isActive,
+      (active, wasActive) => {
+        if (active) {
+          if (wasActive === false) {
+            setDidRestoreScroll(false)
+          }
+          return
+        }
+        persistMessageScrollSnapshot({ requireActive: false })
       },
     ),
   )
 
+  function canCaptureScrollSnapshot(options?: { requireActive?: boolean }) {
+    const element = streamElement()
+    if (!element) return false
+    if ((options?.requireActive ?? true) && !isActive()) return false
+    if (restoringScrollSnapshot) return false
+    if (!element.isConnected) return false
+    if (element.clientHeight <= 0) return false
+    if (typeof getComputedStyle === "function" && getComputedStyle(element).display === "none") return false
+    return true
+  }
+
+  function persistMessageScrollSnapshot(options?: { sessionId?: string; allowCapture?: boolean; requireActive?: boolean }) {
+    if (restoringScrollSnapshot) return
+
+    const sessionId = options?.sessionId ?? props.sessionId
+    const allowCapture = options?.allowCapture ?? true
+    const canCapture = canCaptureScrollSnapshot({ requireActive: options?.requireActive })
+    if (allowCapture && canCapture) {
+      const snapshot = listApi()?.captureScrollSnapshot()
+      if (snapshot) {
+        setLastGoodScrollSnapshot(sessionId, snapshot)
+        store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, snapshot)
+        return
+      }
+    }
+
+    const lastGoodScrollSnapshot = getLastGoodScrollSnapshot(sessionId)
+    if (lastGoodScrollSnapshot) {
+      store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, lastGoodScrollSnapshot)
+      return
+    }
+
+    const element = streamElement()
+    if (!allowCapture || !canCapture) return
+    if (!element) return
+    const scrollTop = element.scrollTop
+    const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
+    const scrollRatio = maxScrollTop > 0 ? scrollTop / maxScrollTop : 0
+    const atBottom = element.scrollHeight - (element.scrollTop + element.clientHeight) <= 48
+    const snapshot = { scrollTop, scrollRatio, maxScrollTop, atBottom }
+    setLastGoodScrollSnapshot(sessionId, snapshot)
+    store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, snapshot)
+  }
+
   // Persist scroll position when switching sessions. This effect's cleanup runs
   // when `props.sessionId` changes, before the next session is rendered.
   createEffect(() => {
     const sessionId = props.sessionId
     onCleanup(() => {
-      const element = streamElement()
-      if (!element) return
-      const scrollTop = element.scrollTop
-      const atBottom = element.scrollHeight - (element.scrollTop + element.clientHeight) <= 48
-      store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, { scrollTop, atBottom })
+      persistMessageScrollSnapshot({ sessionId, requireActive: false })
     })
   })
 
   const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
 
-  const lastVisibleMessageId = createMemo(() => {
-    const ids = visibleMessageIds()
-    return ids[ids.length - 1] ?? null
+  const streamingAssistantTextMessageId = createMemo(() => {
+    const ids = messageIds()
+    for (let index = ids.length - 1; index >= 0; index -= 1) {
+      const messageId = ids[index]
+      if (isStreamingAssistantTextMessage(messageId)) return messageId
+    }
+    return null
   })
 
+  const streamingActive = createMemo(() => Boolean(props.sessionStreamingActive) && streamingAssistantTextMessageId() !== null)
+
   const autoPinHoldTargetKey = createMemo(() => {
     if (!holdLongAssistantRepliesEnabled()) return null
-    const messageId = lastVisibleMessageId()
-    return isStreamingAssistantTextMessage(messageId) ? messageId : null
+    if (!streamingActive()) return null
+    return streamingAssistantTextMessageId()
   })
 
   function toggleHoldLongAssistantReplies() {
@@ -711,10 +779,8 @@ export default function MessageSection(props: MessageSectionProps) {
     if (record.status !== "streaming") return false
 
     const info = resolvedStore.getMessageInfo(messageId)
-    if (!info) return false
     const timeInfo = info?.time as { end?: number } | undefined
-    const isStreaming = timeInfo?.end === undefined || timeInfo.end === 0
-    if (!isStreaming) return false
+    if (typeof timeInfo?.end === "number" && timeInfo.end > 0) return false
 
     const { orderedParts } = buildRecordDisplayData(props.instanceId, record)
     return orderedParts.some((part) => {
@@ -728,7 +794,8 @@ export default function MessageSection(props: MessageSectionProps) {
     const api = listApi()
     if (!api) return
     if (props.registerScrollToBottom) {
-      props.registerScrollToBottom(() => api.scrollToBottom({ immediate: true }))
+      props.registerScrollToBottom(() => api.scrollToBottom({ immediate: true, suppressHold: true }))
+      onCleanup(() => props.registerScrollToBottom?.(null))
     }
   })
 
@@ -737,26 +804,38 @@ export default function MessageSection(props: MessageSectionProps) {
     const element = streamElement()
     const api = listApi()
     if (!element || !api) return
+    if (!isActive()) return
     if (props.loading) return
     if (visibleMessageIds().length === 0) return
     if (didRestoreScroll()) return
 
-    scrollCache.restore(element, {
+    const snapshot = store().getScrollSnapshot(props.sessionId, MESSAGE_SCROLL_CACHE_SCOPE)
+    if (!snapshot) {
+      api.setAutoScroll(true)
+      api.scrollToBottom({ immediate: true })
+      setDidRestoreScroll(true)
+      return
+    }
+
+    restoringScrollSnapshot = true
+    api.restoreScrollSnapshot(snapshot, {
       behavior: "auto",
       fallback: () => {
         api.setAutoScroll(true)
         api.scrollToBottom({ immediate: true })
       },
-      onApplied: (snapshot) => {
+      onApplied: () => {
         // Keep follow mode consistent with the restored state.
-        api.setAutoScroll(snapshot?.atBottom ?? true)
+        api.setAutoScroll(snapshot.atBottom)
+        restoringScrollSnapshot = false
+        setLastGoodScrollSnapshot(props.sessionId, snapshot)
         setDidRestoreScroll(true)
       },
     })
   })
 
   onCleanup(() => {
-    scrollCache.persist(streamElement())
+    persistMessageScrollSnapshot({ requireActive: false })
   })
 
   function clearQuoteSelection() {
@@ -868,7 +947,6 @@ export default function MessageSection(props: MessageSectionProps) {
   }
  
   function handleContentRendered() {
-    if (props.loading) return
     listApi()?.notifyContentRendered()
   }
 
@@ -1246,11 +1324,10 @@ export default function MessageSection(props: MessageSectionProps) {
           items={visibleMessageIds}
           getKey={(messageId) => messageId}
           getAnchorId={getMessageAnchorId}
-          getKeyFromAnchorId={getMessageIdFromAnchorId}
           overscanPx={800}
           scrollSentinelMarginPx={SCROLL_SENTINEL_MARGIN_PX}
           suspendMeasurements={() => !isActive()}
-          loading={() => Boolean(props.loading)}
+          streamingActive={streamingActive}
           isActive={isActive}
           scrollToBottomOnActivate={() => false}
           initialScrollToBottom={() => false}
@@ -1265,7 +1342,7 @@ export default function MessageSection(props: MessageSectionProps) {
           }}
           onScroll={() => {
             clearQuoteSelection()
-            scrollCache.persist(streamElement())
+            persistMessageScrollSnapshot()
           }}
           onMouseUp={() => handleStreamMouseUp()}
           onClick={(e) => {
@@ -1300,6 +1377,7 @@ export default function MessageSection(props: MessageSectionProps) {
                 class="message-scroll-button"
                 data-active={holdLongAssistantRepliesEnabled() ? "true" : "false"}
                 onClick={toggleHoldLongAssistantReplies}
+                aria-pressed={holdLongAssistantRepliesEnabled()}
                 aria-label={
                   holdLongAssistantRepliesEnabled()
                     ? t("messageSection.scroll.disableHoldAriaLabel")
@@ -1329,7 +1407,7 @@ export default function MessageSection(props: MessageSectionProps) {
                 <button
                   type="button"
                   class="message-scroll-button"
-                  onClick={() => api.scrollToBottom()}
+                  onClick={() => api.scrollToBottom({ suppressHold: true })}
                   aria-label={t("messageSection.scroll.toLatestAriaLabel")}
                 >
                   <span class="message-scroll-icon" aria-hidden="true">
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index f151ca5e7..d20283e04 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -1,4 +1,4 @@
-import { Show, createMemo, createEffect, on, type Component } from "solid-js"
+import { Show, createMemo, createEffect, createSignal, on, type Component } from "solid-js"
 import type { Session } from "../../types/session"
 import type { Attachment } from "../../types/attachment"
 import type { ClientPart } from "../../types/message"
@@ -9,7 +9,7 @@ import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
 import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, markSessionIdleSeen, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
-import { clearSessionIdleFade, IDLE_STATUS_VISIBILITY_MS, isSessionBusy as getSessionBusyStatus, markSessionIdleFadeStarted } from "../../stores/session-status"
+import { clearSessionIdleFade, IDLE_STATUS_VISIBILITY_MS, getSessionStatus, isSessionBusy as getSessionBusyStatus, markSessionIdleFadeStarted } from "../../stores/session-status"
 import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
@@ -53,6 +53,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     if (!currentSession) return false
     return getSessionBusyStatus(props.instanceId, currentSession.id)
   })
+  const sessionStreamingActive = createMemo(() => {
+    const currentSession = session()
+    if (!currentSession) return false
+    return getSessionStatus(props.instanceId, currentSession.id) === "working"
+  })
 
   const sessionNeedsInput = createMemo(() => {
     const currentSession = session()
@@ -73,6 +78,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
   const pendingIdleSeenTimers = new Set<string>()
+  const [pendingSubmitBottomScrollTargetCount, setPendingSubmitBottomScrollTargetCount] = createSignal<number | null>(null)
 
   function shouldScrollToBottomOnActivate() {
     const current = session()
@@ -81,11 +87,15 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     return !snapshot || snapshot.atBottom
   }
 
-  function scheduleScrollToBottom() {
-    if (!scrollToBottomHandle) return
+  function scheduleScrollToBottom(options?: { force?: boolean }) {
+    if (!scrollToBottomHandle) return false
     requestAnimationFrame(() => {
-      requestAnimationFrame(() => scrollToBottomHandle?.())
+      requestAnimationFrame(() => {
+        if (!options?.force && !shouldScrollToBottomOnActivate()) return
+        scrollToBottomHandle?.()
+      })
     })
+    return true
   }
 
   function getSeenIdleEntries(currentSession: Session, keepUnseenSubagentIdleStatus: boolean): Array<{ id: string; idleSince: number }> {
@@ -197,6 +207,21 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     }
   })
 
+  createEffect(
+    on(
+      () => messageStore().getSessionMessageIds(props.sessionId).length,
+      (messageCount) => {
+        const targetCount = pendingSubmitBottomScrollTargetCount()
+        if (targetCount === null) return
+        const didSchedule = scheduleScrollToBottom({ force: true })
+        if (didSchedule && messageCount >= targetCount) {
+          setPendingSubmitBottomScrollTargetCount(null)
+        }
+      },
+      { defer: true },
+    ),
+  )
+
   function registerPromptInputApi(api: PromptInputApi) {
     promptInputApi = api
     props.registerSessionPromptApi?.(props.sessionId, api)
@@ -241,8 +266,17 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   }
  
   async function handleSendMessage(prompt: string, attachments: Attachment[]) {
-    scheduleScrollToBottom()
-    await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
+    const messageCount = messageStore().getSessionMessageIds(props.sessionId).length
+    setPendingSubmitBottomScrollTargetCount(messageCount + 2)
+    scheduleScrollToBottom({ force: true })
+    try {
+      await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
+      scheduleScrollToBottom({ force: true })
+      setPendingSubmitBottomScrollTargetCount(null)
+    } catch (error) {
+      setPendingSubmitBottomScrollTargetCount(null)
+      throw error
+    }
   }
 
   async function handleRunShell(command: string) {
@@ -297,13 +331,13 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       )
 
       const restoredText = getUserMessageText(messageId)
-       if (restoredText) {
-         if (promptInputApi) {
-           promptInputApi.setPromptText(restoredText, { focus: true })
-         } else {
-           pendingPromptText = restoredText
-         }
-       }
+      if (restoredText) {
+        if (promptInputApi) {
+          promptInputApi.setPromptText(restoredText, { focus: true })
+        } else {
+          pendingPromptText = restoredText
+        }
+      }
     } catch (error) {
       log.error("Failed to revert message", error)
       showAlertDialog(t("sessionView.alerts.revertFailed.message"), {
@@ -381,8 +415,6 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       })
     }
   }
-
-
   return (
     <Show
       when={session()}
@@ -404,12 +436,21 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                   instanceId={props.instanceId}
                   sessionId={activeSession.id}
                   loading={messagesLoading()}
+                  sessionStreamingActive={sessionStreamingActive()}
                   onRevert={handleRevert}
                   onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
                   onFork={handleFork}
                   isActive={props.isActive}
                   registerScrollToBottom={(fn) => {
-                    scrollToBottomHandle = fn
+                    scrollToBottomHandle = fn ?? undefined
+                    if (!fn) return
+                    const targetCount = pendingSubmitBottomScrollTargetCount()
+                    if (targetCount === null) return
+                    const didSchedule = scheduleScrollToBottom({ force: true })
+                    const messageCount = messageStore().getSessionMessageIds(props.sessionId).length
+                    if (didSchedule && messageCount >= targetCount) {
+                      setPendingSubmitBottomScrollTargetCount(null)
+                    }
                   }}
                   showSidebarToggle={props.showSidebarToggle}
                   onSidebarToggle={props.onSidebarToggle}
diff --git a/packages/ui/src/components/virtual-follow-behavior.test.ts b/packages/ui/src/components/virtual-follow-behavior.test.ts
new file mode 100644
index 000000000..1e20f0aa8
--- /dev/null
+++ b/packages/ui/src/components/virtual-follow-behavior.test.ts
@@ -0,0 +1,248 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import {
+  VirtualScrollController,
+  isAtBottom,
+  isAutoFollowing,
+  transitionFollowMode,
+  type FollowMode,
+  type ScrollControllerMetrics,
+} from "./virtual-follow-behavior.ts"
+
+const userScroll = (direction: "up" | "down" | null, atBottom: boolean, canPinToBottom = false) =>
+  ({ type: "user-scroll", direction, atBottom, canPinToBottom }) as const
+
+function metrics(offset: number, scrollHeight = 3000, clientHeight = 600): ScrollControllerMetrics {
+  return {
+    offset,
+    scrollHeight,
+    clientHeight,
+    sentinelMarginPx: 48,
+  }
+}
+
+describe("virtual follow behavior", () => {
+  it("escapes follow on upward user scroll", () => {
+    const next = transitionFollowMode({ type: "following" }, userScroll("up", false))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("does not rejoin follow when escaped user scrolls down above bottom without pin permission", () => {
+    const next = transitionFollowMode({ type: "escaped" }, userScroll("down", false))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("rejoins follow and pins bottom when escaped user scrolls down with pin permission", () => {
+    const next = transitionFollowMode({ type: "escaped" }, userScroll("down", false, true))
+
+    assert.deepEqual(next.mode, { type: "following" })
+    assert.deepEqual(next.effect, { type: "scroll-bottom", immediate: true, suppressHold: false })
+  })
+
+  it("rejoins follow when escaped user scrolls to the bottom", () => {
+    const next = transitionFollowMode({ type: "escaped" }, userScroll("down", true))
+
+    assert.deepEqual(next.mode, { type: "following" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("releases hold when the user scrolls down above bottom", () => {
+    const next = transitionFollowMode({ type: "holding", key: "message-1" }, userScroll("down", false, true))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("does not rejoin follow for directionless scroll above bottom", () => {
+    const next = transitionFollowMode({ type: "escaped" }, userScroll(null, false, true))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("does not rejoin follow on upward scroll at bottom", () => {
+    const next = transitionFollowMode({ type: "escaped" }, userScroll("up", true, true))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("releases hold for directionless user scroll away from bottom", () => {
+    const next = transitionFollowMode({ type: "holding", key: "message-1" }, userScroll(null, false, true))
+
+    assert.deepEqual(next.mode, { type: "escaped" })
+    assert.deepEqual(next.effect, { type: "none" })
+  })
+
+  it("pins content growth while following but not while escaped", () => {
+    const escaped = transitionFollowMode({ type: "escaped" }, { type: "content-grew", canPinToBottom: true })
+    const following = transitionFollowMode({ type: "following" }, { type: "content-grew", canPinToBottom: true })
+
+    assert.deepEqual(escaped.effect, { type: "none" })
+    assert.deepEqual(following.effect, { type: "scroll-bottom", immediate: true, suppressHold: false })
+  })
+
+  it("maintains hold alignment while held content grows", () => {
+    const next = transitionFollowMode({ type: "holding", key: "message-1" }, { type: "content-grew", canPinToBottom: true })
+
+    assert.deepEqual(next.mode, { type: "holding", key: "message-1" })
+    assert.deepEqual(next.effect, { type: "align-hold", key: "message-1" })
+  })
+
+  it("enters hold mode for a valid hold candidate", () => {
+    const next = transitionFollowMode({ type: "following" }, { type: "hold-candidate", key: "message-1", shouldHold: true })
+
+    assert.deepEqual(next.mode, { type: "holding", key: "message-1" })
+    assert.deepEqual(next.effect, { type: "align-hold", key: "message-1" })
+  })
+
+  it("explicit bottom jumps leave hold and suppress the next hold", () => {
+    const next = transitionFollowMode({ type: "holding", key: "message-1" }, { type: "jump-bottom", immediate: true, explicit: true })
+
+    assert.deepEqual(next.mode, { type: "following" })
+    assert.deepEqual(next.effect, { type: "scroll-bottom", immediate: true, suppressHold: true })
+  })
+
+  it("key jumps can opt into follow or escape mode", () => {
+    const follow = transitionFollowMode({ type: "escaped" }, { type: "jump-key", key: "a", block: "start", smooth: false, followAfter: true })
+    const escape = transitionFollowMode({ type: "following" }, { type: "jump-key", key: "b", block: "center", smooth: true, followAfter: false })
+
+    assert.deepEqual(follow.mode, { type: "following" })
+    assert.deepEqual(escape.mode, { type: "escaped" })
+  })
+
+  it("derives auto-follow from modes", () => {
+    const modes: Array<[FollowMode, boolean]> = [
+      [{ type: "following" }, true],
+      [{ type: "holding", key: "message-1" }, true],
+      [{ type: "escaped" }, false],
+    ]
+
+    for (const [mode, expected] of modes) {
+      assert.equal(isAutoFollowing(mode), expected)
+    }
+  })
+
+  it("pins content growth instead of escaping on transient upward render movement", () => {
+    const controller = new VirtualScrollController(true)
+    controller.recordProgrammaticOffset(2400, true)
+
+    const result = controller.contentRendered(metrics(2200), true)
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "scroll-bottom", immediate: true, suppressHold: false })
+  })
+
+  it("maintains hold alignment when held content renders", () => {
+    const controller = new VirtualScrollController(true)
+    controller.holdCandidate("message-1", true)
+
+    const result = controller.contentRendered(metrics(2200), true)
+
+    assert.deepEqual(result.state.mode, { type: "holding", key: "message-1" })
+    assert.deepEqual(result.effect, { type: "align-hold", key: "message-1" })
+  })
+
+  it("lets fresh user upward movement escape even during a programmatic window", () => {
+    const controller = new VirtualScrollController(true)
+    controller.recordProgrammaticOffset(2400, true)
+    controller.setUserIntent("up", 700)
+
+    const result = controller.observeViewport(metrics(2200), 100, true)
+
+    assert.deepEqual(result.state.mode, { type: "escaped" })
+  })
+
+  it("does not escape for owned programmatic upward movement", () => {
+    const controller = new VirtualScrollController(true)
+    controller.recordProgrammaticOffset(2400, true)
+
+    const result = controller.observeViewport(metrics(2200), 100, true)
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("does not resume follow on directionless scroll above bottom", () => {
+    const controller = new VirtualScrollController(false)
+    controller.recordProgrammaticOffset(2220, false)
+
+    const result = controller.observeViewport(metrics(2220), 100, false)
+
+    assert.deepEqual(result.state.mode, { type: "escaped" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("does not resume follow from pixel distance alone", () => {
+    const controller = new VirtualScrollController(false)
+    controller.recordProgrammaticOffset(2100, false)
+    controller.setUserIntent("down", 700)
+
+    const result = controller.observeViewport(metrics(2220), 100, false)
+
+    assert.deepEqual(result.state.mode, { type: "escaped" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("resumes follow only when downward movement reaches actual bottom", () => {
+    const controller = new VirtualScrollController(false)
+    controller.recordProgrammaticOffset(2300, false)
+    controller.setUserIntent("down", 700)
+
+    const result = controller.observeViewport(metrics(2400), 100, false)
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("still escapes follow on upward movement at bottom", () => {
+    const controller = new VirtualScrollController(true)
+    controller.recordProgrammaticOffset(1200, false)
+
+    const result = controller.observeViewport(metrics(1100), 100, false)
+
+    assert.deepEqual(result.state.mode, { type: "escaped" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("blocks content pinning while restoring", () => {
+    const controller = new VirtualScrollController(true)
+    controller.setRestoring(true)
+
+    const result = controller.contentRendered(metrics(2400), true)
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("does not pin content growth when the integration gate is closed", () => {
+    const controller = new VirtualScrollController(true)
+
+    const result = controller.contentRendered(metrics(2400), false)
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("blocks pre-pin upward reconciliation while restoring", () => {
+    const controller = new VirtualScrollController(true)
+    controller.recordProgrammaticOffset(2400, true)
+    controller.setRestoring(true)
+
+    const result = controller.beforeBottomPin(metrics(2200))
+
+    assert.deepEqual(result.state.mode, { type: "following" })
+    assert.deepEqual(result.effect, { type: "none" })
+  })
+
+  it("distinguishes close-to-bottom from at-bottom metrics", () => {
+    const closeButNotAtBottom = metrics(2351)
+
+    assert.equal(isAtBottom(closeButNotAtBottom), false)
+  })
+})
diff --git a/packages/ui/src/components/virtual-follow-behavior.ts b/packages/ui/src/components/virtual-follow-behavior.ts
new file mode 100644
index 000000000..e2e6e446b
--- /dev/null
+++ b/packages/ui/src/components/virtual-follow-behavior.ts
@@ -0,0 +1,307 @@
+export type FollowMode =
+  | { type: "following" }
+  | { type: "escaped" }
+  | { type: "holding"; key: string }
+
+export type FollowEffect =
+  | { type: "none" }
+  | { type: "scroll-top"; immediate: boolean }
+  | { type: "scroll-bottom"; immediate: boolean; suppressHold: boolean }
+  | { type: "scroll-key"; key: string; block: ScrollLogicalPosition; smooth: boolean }
+  | { type: "align-hold"; key: string }
+
+export type FollowEvent =
+  | { type: "user-scroll"; direction: "up" | "down" | null; atBottom: boolean; canPinToBottom: boolean }
+  | { type: "jump-top"; immediate: boolean }
+  | { type: "jump-bottom"; immediate: boolean; explicit: boolean }
+  | { type: "jump-key"; key: string; block: ScrollLogicalPosition; smooth: boolean; followAfter: boolean }
+  | { type: "content-grew"; canPinToBottom: boolean }
+  | { type: "hold-candidate"; key: string; shouldHold: boolean }
+  | { type: "hold-target-changed"; key: string | null; canPinToBottom: boolean }
+  | { type: "set-follow"; enabled: boolean }
+  | { type: "reset"; follow: boolean }
+
+export interface FollowTransition {
+  mode: FollowMode
+  effect: FollowEffect
+}
+
+export type ScrollDirection = "up" | "down" | null
+
+export interface ScrollControllerMetrics {
+  offset: number
+  scrollHeight: number
+  clientHeight: number
+  sentinelMarginPx: number
+}
+
+export interface ScrollControllerState {
+  mode: FollowMode
+  lastObservedOffset: number
+  lastObservedAtBottom: boolean
+  userIntentDirection: ScrollDirection
+  userIntentUntil: number
+  restoring: boolean
+}
+
+export interface ScrollControllerResult {
+  effect: FollowEffect
+  state: ScrollControllerState
+}
+
+export interface ScrollControllerSnapshot {
+  mode: FollowMode
+  lastObservedOffset: number
+  lastObservedAtBottom: boolean
+  userIntentDirection: ScrollDirection
+  userIntentUntil: number
+  restoring: boolean
+}
+
+const noFollowEffect: FollowEffect = { type: "none" }
+
+export function isAutoFollowing(mode: FollowMode) {
+  return mode.type === "following" || mode.type === "holding"
+}
+
+export function getHeldKey(mode: FollowMode) {
+  return mode.type === "holding" ? mode.key : null
+}
+
+export function transitionFollowMode(mode: FollowMode, event: FollowEvent): FollowTransition {
+  switch (event.type) {
+    case "user-scroll": {
+      if (event.direction === "up") {
+        return { mode: { type: "escaped" }, effect: noFollowEffect }
+      }
+      if (mode.type === "holding" && event.direction === null) {
+        return { mode: { type: "escaped" }, effect: noFollowEffect }
+      }
+      if (mode.type === "holding" && event.direction === "down") {
+        return { mode: { type: "escaped" }, effect: noFollowEffect }
+      }
+      if (mode.type === "escaped" && event.direction === "down" && event.canPinToBottom) {
+        return {
+          mode: { type: "following" },
+          effect: { type: "scroll-bottom", immediate: true, suppressHold: false },
+        }
+      }
+      if (event.atBottom && mode.type !== "holding") {
+        return { mode: { type: "following" }, effect: noFollowEffect }
+      }
+      return { mode, effect: noFollowEffect }
+    }
+
+    case "jump-top":
+      return { mode: { type: "escaped" }, effect: { type: "scroll-top", immediate: event.immediate } }
+
+    case "jump-bottom":
+      return {
+        mode: { type: "following" },
+        effect: { type: "scroll-bottom", immediate: event.immediate, suppressHold: event.explicit },
+      }
+
+    case "jump-key":
+      return {
+        mode: event.followAfter ? { type: "following" } : { type: "escaped" },
+        effect: { type: "scroll-key", key: event.key, block: event.block, smooth: event.smooth },
+      }
+
+    case "content-grew":
+      if (mode.type === "following" && event.canPinToBottom) {
+        return { mode, effect: { type: "scroll-bottom", immediate: true, suppressHold: false } }
+      }
+      if (mode.type === "holding" && event.canPinToBottom) {
+        return { mode, effect: { type: "align-hold", key: mode.key } }
+      }
+      return { mode, effect: noFollowEffect }
+
+    case "hold-candidate":
+      if (mode.type === "following" && event.shouldHold) {
+        return { mode: { type: "holding", key: event.key }, effect: { type: "align-hold", key: event.key } }
+      }
+      return { mode, effect: noFollowEffect }
+
+    case "hold-target-changed":
+      if (mode.type !== "holding" || event.key === mode.key) {
+        return { mode, effect: noFollowEffect }
+      }
+      return {
+        mode: { type: "following" },
+        effect: event.canPinToBottom ? { type: "scroll-bottom", immediate: false, suppressHold: false } : noFollowEffect,
+      }
+
+    case "set-follow":
+      return { mode: event.enabled ? { type: "following" } : { type: "escaped" }, effect: noFollowEffect }
+
+    case "reset":
+      return { mode: event.follow ? { type: "following" } : { type: "escaped" }, effect: noFollowEffect }
+  }
+}
+
+export function getDistanceFromBottom(metrics: ScrollControllerMetrics) {
+  return metrics.scrollHeight - (metrics.offset + metrics.clientHeight)
+}
+
+export function isAtBottom(metrics: ScrollControllerMetrics) {
+  return getDistanceFromBottom(metrics) <= metrics.sentinelMarginPx
+}
+
+export class VirtualScrollController {
+  private state: ScrollControllerState
+
+  constructor(initialFollow: boolean) {
+    this.state = {
+      mode: initialFollow ? { type: "following" } : { type: "escaped" },
+      lastObservedOffset: 0,
+      lastObservedAtBottom: false,
+      userIntentDirection: null,
+      userIntentUntil: 0,
+      restoring: false,
+    }
+  }
+
+  snapshot(): ScrollControllerSnapshot {
+    return { ...this.state, mode: { ...this.state.mode } }
+  }
+
+  isAutoFollowing() {
+    return isAutoFollowing(this.state.mode)
+  }
+
+  heldKey() {
+    return this.state.mode.type === "holding" ? this.state.mode.key : null
+  }
+
+  setUserIntent(direction: ScrollDirection, until: number) {
+    this.state.userIntentDirection = direction
+    this.state.userIntentUntil = until
+  }
+
+  clearExpiredUserIntent(now: number) {
+    if (now <= this.state.userIntentUntil) return false
+    this.state.userIntentDirection = null
+    return true
+  }
+
+  setRestoring(restoring: boolean) {
+    this.state.restoring = restoring
+  }
+
+  reset(follow: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "reset", follow })
+    this.state.mode = next.mode
+    this.state.lastObservedOffset = 0
+    this.state.lastObservedAtBottom = false
+    this.state.userIntentDirection = null
+    this.state.userIntentUntil = 0
+    this.state.restoring = false
+    return this.result(next.effect)
+  }
+
+  setFollow(enabled: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "set-follow", enabled })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  jumpTop(immediate: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "jump-top", immediate })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  jumpBottom(immediate: boolean, explicit: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "jump-bottom", immediate, explicit })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  jumpKey(key: string, block: ScrollLogicalPosition, smooth: boolean, followAfter: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "jump-key", key, block, smooth, followAfter })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  holdCandidate(key: string, shouldHold: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "hold-candidate", key, shouldHold })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  holdTargetChanged(key: string | null, canPinToBottom: boolean): ScrollControllerResult {
+    const next = transitionFollowMode(this.state.mode, { type: "hold-target-changed", key, canPinToBottom })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  observeViewport(metrics: ScrollControllerMetrics, now: number, programmatic: boolean, canPinToBottom = false): ScrollControllerResult {
+    const previousOffset = this.state.lastObservedOffset
+    const offset = metrics.offset
+    const scrolledUp = offset < previousOffset - 1
+    const scrolledDown = offset > previousOffset + 1
+    const atBottom = isAtBottom(metrics)
+
+    this.state.lastObservedOffset = offset
+    this.state.lastObservedAtBottom = this.isAutoFollowing() && atBottom
+    this.clearExpiredUserIntent(now)
+
+    const hasFreshIntent = now <= this.state.userIntentUntil
+    if (scrolledUp && this.isAutoFollowing() && !atBottom && this.heldKey() === null && (!programmatic || hasFreshIntent)) {
+      return this.setFollow(false)
+    }
+
+    const actualDirection: ScrollDirection = scrolledUp ? "up" : scrolledDown ? "down" : null
+    if (!hasFreshIntent && (!actualDirection || programmatic)) {
+      return this.result(noFollowEffect)
+    }
+
+    const direction = actualDirection ?? this.state.userIntentDirection
+    const canMagnetToBottom = hasFreshIntent && direction === "down" && canPinToBottom
+    const next = transitionFollowMode(this.state.mode, {
+      type: "user-scroll",
+      direction,
+      atBottom,
+      canPinToBottom: canMagnetToBottom,
+    })
+    this.state.mode = next.mode
+    this.state.lastObservedAtBottom = this.isAutoFollowing() && atBottom
+    return this.result(next.effect)
+  }
+
+  contentRendered(metrics: ScrollControllerMetrics, canPinToBottom: boolean): ScrollControllerResult {
+    if (this.state.restoring) return this.result(noFollowEffect)
+    if (!canPinToBottom || !this.isAutoFollowing()) {
+      const reconcile = this.reconcileUpwardDomMovement(metrics)
+      if (reconcile.effect.type !== "none") return reconcile
+    }
+
+    const next = transitionFollowMode(this.state.mode, { type: "content-grew", canPinToBottom })
+    this.state.mode = next.mode
+    return this.result(next.effect)
+  }
+
+  beforeBottomPin(metrics: ScrollControllerMetrics): ScrollControllerResult {
+    if (this.state.restoring) return this.result(noFollowEffect)
+    return this.reconcileUpwardDomMovement(metrics)
+  }
+
+  recordProgrammaticOffset(offset: number, atBottom: boolean) {
+    this.state.lastObservedOffset = offset
+    this.state.lastObservedAtBottom = this.isAutoFollowing() && atBottom
+  }
+
+  private reconcileUpwardDomMovement(metrics: ScrollControllerMetrics): ScrollControllerResult {
+    if (!this.isAutoFollowing()) return this.result(noFollowEffect)
+    if (this.heldKey() !== null) return this.result(noFollowEffect)
+    if (isAtBottom(metrics)) return this.result(noFollowEffect)
+    if (metrics.offset >= this.state.lastObservedOffset - 1) return this.result(noFollowEffect)
+    this.state.lastObservedOffset = metrics.offset
+    this.state.lastObservedAtBottom = false
+    return this.setFollow(false)
+  }
+
+  private result(effect: FollowEffect): ScrollControllerResult {
+    return { effect, state: this.snapshot() }
+  }
+}
diff --git a/packages/ui/src/components/virtual-follow-list.tsx b/packages/ui/src/components/virtual-follow-list.tsx
index 070e0b92a..107a0c18c 100644
--- a/packages/ui/src/components/virtual-follow-list.tsx
+++ b/packages/ui/src/components/virtual-follow-list.tsx
@@ -1,14 +1,17 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX, on } from "solid-js"
+import { Show, createEffect, createMemo, createSignal, type Accessor, type JSX, on, onCleanup } from "solid-js"
 import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
+import { getHeldKey, isAutoFollowing, isAtBottom, VirtualScrollController, type FollowEffect, type FollowEvent, type FollowMode, type ScrollControllerMetrics, type ScrollControllerResult } from "./virtual-follow-behavior.ts"
 
 const DEFAULT_SCROLL_SENTINEL_MARGIN_PX = 48
 const DEFAULT_HOLD_TARGET_TOP_THRESHOLD_PX = 8
+const DEFAULT_REJOIN_LAST_ITEM_COUNT = 2
 const USER_SCROLL_INTENT_WINDOW_MS = 600
 const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+const INTERACTIVE_KEY_TARGET_SELECTOR = "button, a, input, textarea, select, [contenteditable='true'], [role='button'], [role='textbox']"
 
 export interface VirtualFollowListApi {
   scrollToTop: (opts?: { immediate?: boolean }) => void
-  scrollToBottom: (opts?: { immediate?: boolean; suppressAutoAnchor?: boolean }) => void
+  scrollToBottom: (opts?: { immediate?: boolean; suppressAutoAnchor?: boolean; suppressHold?: boolean }) => void
   scrollToKey: (
     key: string,
     opts?: { behavior?: ScrollBehavior; block?: ScrollLogicalPosition; setAutoScroll?: boolean },
@@ -18,6 +21,23 @@ export interface VirtualFollowListApi {
   getAutoScroll: () => boolean
   getScrollElement: () => HTMLDivElement | undefined
   getShellElement: () => HTMLDivElement | undefined
+  captureScrollSnapshot: () => VirtualFollowScrollSnapshot | undefined
+  restoreScrollSnapshot: (snapshot: VirtualFollowScrollSnapshot, opts?: RestoreScrollSnapshotOptions) => void
+}
+
+export interface VirtualFollowScrollSnapshot {
+  scrollTop: number
+  scrollRatio?: number
+  maxScrollTop?: number
+  anchorKey?: string
+  anchorOffset?: number
+  atBottom: boolean
+}
+
+interface RestoreScrollSnapshotOptions {
+  behavior?: ScrollBehavior
+  fallback?: () => void
+  onApplied?: () => void
 }
 
 export interface VirtualFollowListState {
@@ -39,17 +59,11 @@ export interface VirtualFollowListProps<T> {
    */
   getAnchorId?: (key: string) => string
 
-  /**
-   * Decode an item key from an observed wrapper element id.
-   * Defaults to identity.
-   */
-  getKeyFromAnchorId?: (anchorId: string) => string
-
   overscanPx?: number
   scrollSentinelMarginPx?: number
   virtualizationEnabled?: Accessor<boolean>
   suspendMeasurements?: Accessor<boolean>
-  loading?: Accessor<boolean>
+  streamingActive?: Accessor<boolean>
   isActive?: Accessor<boolean>
 
   /**
@@ -154,28 +168,31 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
   const initialScrollToBottom = () => (props.initialScrollToBottom ? props.initialScrollToBottom() : true)
   const initialAutoScroll = () => (props.initialAutoScroll ? props.initialAutoScroll() : true)
   const externalSuspendAutoPinToBottom = () => (props.suspendAutoPinToBottom ? props.suspendAutoPinToBottom() : false)
+  const streamingActive = () => props.streamingActive?.() ?? false
   const holdTargetKey = () => (props.autoPinHoldTargetKey ? props.autoPinHoldTargetKey() : null)
   const holdTargetTopThresholdPx = () => props.autoPinHoldTopThresholdPx ?? DEFAULT_HOLD_TARGET_TOP_THRESHOLD_PX
 
-  const [autoScroll, setAutoScroll] = createSignal(Boolean(initialAutoScroll()))
+  const scrollController = new VirtualScrollController(initialAutoScroll())
+  const [followMode, setFollowMode] = createSignal<FollowMode>(scrollController.snapshot().mode)
+  const autoScroll = createMemo(() => isAutoFollowing(followMode()))
   const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
   const [activeKey, setActiveKey] = createSignal<string | null>(null)
-  const [activeHoldTargetKey, setActiveHoldTargetKey] = createSignal<string | null>(null)
+  const activeHoldTargetKey = createMemo(() => getHeldKey(followMode()))
   const [didTriggerHoldForCurrentTarget, setDidTriggerHoldForCurrentTarget] = createSignal(false)
   const effectiveSuspendAutoPinToBottom = () => externalSuspendAutoPinToBottom() || activeHoldTargetKey() !== null
 
   const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
   const itemElements = new Map<string, HTMLDivElement>()
 
-  let userScrollIntentUntil = 0
-  let lastUserScrollIntentDirection: "up" | "down" | null = null
   let detachScrollIntentListeners: (() => void) | undefined
   let lastResetKey: string | number | undefined
   let suppressAutoScrollOnce = false
+  let suppressHoldUntilTargetChanges = false
   let pendingInitialScroll = true
-  let lastObservedScrollOffset = 0
-  let lastObservedPinnedAtBottom = false
+  let programmaticScrollUntil = 0
+  let pendingBottomRepinAfterHold = false
+  let pendingContentRenderedFrame: number | null = null
 
   const state: VirtualFollowListState = {
     autoScroll,
@@ -187,24 +204,98 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
 
   function markUserScrollIntent(direction?: "up" | "down" | null) {
     const now = performance.now()
-    userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
-    if (direction) {
-      lastUserScrollIntentDirection = direction
-    }
+    scrollController.setUserIntent(direction ?? null, now + USER_SCROLL_INTENT_WINDOW_MS)
   }
 
-  function hasUserScrollIntent() {
-    return performance.now() <= userScrollIntentUntil
+  function markProgrammaticScroll() {
+    programmaticScrollUntil = performance.now() + 120
   }
 
-  function clearAutoPinHold(options?: { resumeBottom?: boolean }) {
-    if (activeHoldTargetKey() === null) return
-    setActiveHoldTargetKey(null)
-    if (options?.resumeBottom && autoScroll()) {
-      requestAnimationFrame(() => {
-        if (!autoScroll() || activeHoldTargetKey() !== null) return
-        scrollToBottom(false)
-      })
+  function hasProgrammaticScrollIntent() {
+    return performance.now() <= programmaticScrollUntil
+  }
+
+  function syncControllerResult(result: ScrollControllerResult) {
+    setFollowMode(result.state.mode)
+    applyFollowEffect(result.effect)
+  }
+
+  function escapeFollowIfDomMovedUp(element = scrollElement()) {
+    if (!element) return false
+    const result = scrollController.beforeBottomPin(getDomMetrics(element))
+    syncControllerResult(result)
+    return result.effect.type !== "none" || result.state.mode.type === "escaped"
+  }
+
+  function shouldHonorPrePinEscape() {
+    const snapshot = scrollController.snapshot()
+    return performance.now() <= snapshot.userIntentUntil && snapshot.userIntentDirection === "up"
+  }
+
+  function dispatchFollowEvent(event: FollowEvent) {
+    let result: ScrollControllerResult
+    switch (event.type) {
+      case "user-scroll": {
+        const metrics = getManualMetrics(event.atBottom)
+        result = scrollController.observeViewport(
+          metrics,
+          performance.now(),
+          hasProgrammaticScrollIntent(),
+          canRejoinFollowFromDownScroll(metrics),
+        )
+        break
+      }
+      case "jump-top":
+        result = scrollController.jumpTop(event.immediate)
+        break
+      case "jump-bottom":
+        result = scrollController.jumpBottom(event.immediate, event.explicit)
+        break
+      case "jump-key":
+        result = scrollController.jumpKey(event.key, event.block, event.smooth, event.followAfter)
+        break
+      case "content-grew": {
+        const element = scrollElement()
+        result = element
+          ? scrollController.contentRendered(getDomMetrics(element), event.canPinToBottom)
+          : scrollController.contentRendered(getManualMetrics(false), event.canPinToBottom)
+        break
+      }
+      case "hold-candidate":
+        result = scrollController.holdCandidate(event.key, event.shouldHold)
+        break
+      case "hold-target-changed":
+        result = scrollController.holdTargetChanged(event.key, event.canPinToBottom)
+        break
+      case "set-follow":
+        result = scrollController.setFollow(event.enabled)
+        break
+      case "reset":
+        result = scrollController.reset(event.follow)
+        break
+    }
+    syncControllerResult(result)
+  }
+
+  function applyFollowEffect(effect: FollowEffect) {
+    switch (effect.type) {
+      case "none":
+        return
+      case "scroll-top":
+        performScrollToTop(effect.immediate)
+        return
+      case "scroll-bottom":
+        if (effect.suppressHold) {
+          suppressHoldUntilTargetChanges = true
+        }
+        performScrollToBottom(effect.immediate)
+        return
+      case "scroll-key":
+        performScrollToKey(effect.key, { block: effect.block, smooth: effect.smooth })
+        return
+      case "align-hold":
+        alignHoldTarget(effect.key)
+        return
     }
   }
 
@@ -218,9 +309,13 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
       const dir: "up" | "down" | null = event.deltaY < 0 ? "up" : event.deltaY > 0 ? "down" : null
       markUserScrollIntent(dir)
     }
-    const handlePointerIntent = () => markUserScrollIntent(null)
+    const handlePointerIntent = (event: PointerEvent) => {
+      if ((event.target as HTMLElement | null)?.closest(INTERACTIVE_KEY_TARGET_SELECTOR)) return
+      markUserScrollIntent(null)
+    }
     const handleKeyIntent = (event: KeyboardEvent) => {
       if (!SCROLL_INTENT_KEYS.has(event.key)) return
+      if ((event.target as HTMLElement | null)?.closest(INTERACTIVE_KEY_TARGET_SELECTOR)) return
       const key = event.key
       const dir: "up" | "down" | null =
         key === "ArrowUp" || key === "PageUp" || key === "Home"
@@ -232,93 +327,334 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
                 ? "up"
                 : "down"
               : null
+      if (key === "End") {
+        event.preventDefault()
+        scrollToBottom(true)
+        return
+      }
       markUserScrollIntent(dir)
     }
     element.addEventListener("wheel", handleWheelIntent, { passive: true })
     element.addEventListener("pointerdown", handlePointerIntent)
-    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
     element.addEventListener("keydown", handleKeyIntent)
     detachScrollIntentListeners = () => {
       element.removeEventListener("wheel", handleWheelIntent)
       element.removeEventListener("pointerdown", handlePointerIntent)
-      element.removeEventListener("touchstart", handlePointerIntent)
       element.removeEventListener("keydown", handleKeyIntent)
     }
   }
 
+  function getCurrentScrollOffset(_element: HTMLDivElement, handle: VirtualizerHandle) {
+    return handle.scrollOffset
+  }
+
+  function getCurrentScrollSize(_element: HTMLDivElement, handle: VirtualizerHandle) {
+    return handle.scrollSize
+  }
+
+  function getDomMetrics(element: HTMLDivElement, handle = virtuaHandle(), offset = handle?.scrollOffset ?? element.scrollTop): ScrollControllerMetrics {
+    const scrollHeight = handle ? getCurrentScrollSize(element, handle) : element.scrollHeight
+    return {
+      offset,
+      scrollHeight,
+      clientHeight: handle?.viewportSize ?? element.clientHeight,
+      sentinelMarginPx: props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX,
+    }
+  }
+
+  function scrollToOffset(offset: number, atBottom: boolean) {
+    const handle = virtuaHandle()
+    const element = scrollElement()
+    if (!element) return
+    const maxOffset = Math.max((handle?.scrollSize ?? element.scrollHeight) - (handle?.viewportSize ?? element.clientHeight), 0)
+    const nextOffset = Math.min(Math.max(offset, 0), maxOffset)
+    markProgrammaticScroll()
+    if (handle) {
+      handle.scrollTo(nextOffset)
+    } else {
+      element.scrollTop = nextOffset
+    }
+    scrollController.recordProgrammaticOffset(nextOffset, atBottom)
+  }
+
+  function getManualMetrics(atBottom: boolean): ScrollControllerMetrics {
+    const clientHeight = 1000
+    const sentinelMarginPx = props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX
+    const distance = atBottom ? 0 : clientHeight
+    return {
+      offset: 0,
+      scrollHeight: clientHeight + distance,
+      clientHeight,
+      sentinelMarginPx,
+    }
+  }
+
+  function canRejoinFollowFromDownScroll(metrics: ScrollControllerMetrics) {
+    if (!streamingActive()) return false
+    if (effectiveSuspendAutoPinToBottom()) return false
+    if (activeHoldTargetKey() !== null) return false
+    const items = props.items()
+    if (items.length === 0) return false
+    if (isAtBottom(metrics)) return true
+
+    const handle = virtuaHandle()
+    if (!handle) return false
+    const viewportEndIndex = handle.findItemIndex(metrics.offset + metrics.clientHeight - 1)
+    return viewportEndIndex >= Math.max(items.length - DEFAULT_REJOIN_LAST_ITEM_COUNT, 0)
+  }
+
+  function getSnapshotMetrics(element: HTMLDivElement, handle?: VirtualizerHandle) {
+    const scrollTop = handle?.scrollOffset ?? element.scrollTop
+    const scrollHeight = handle ? getCurrentScrollSize(element, handle) : element.scrollHeight
+    const clientHeight = handle?.viewportSize ?? element.clientHeight
+    const maxScrollTop = Math.max(scrollHeight - clientHeight, 0)
+    const atBottom = scrollHeight - (scrollTop + clientHeight) <= (props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX)
+    return {
+      scrollTop,
+      scrollRatio: maxScrollTop > 0 ? scrollTop / maxScrollTop : 0,
+      maxScrollTop,
+      atBottom,
+    }
+  }
+
+  function findTopVisibleAnchor(element: HTMLDivElement) {
+    const containerRect = element.getBoundingClientRect()
+    let closestAbove: { key: string; offset: number } | null = null
+    let closestBelow: { key: string; offset: number } | null = null
+
+    for (const [key, itemElement] of itemElements) {
+      const rect = itemElement.getBoundingClientRect()
+      if (rect.bottom <= containerRect.top || rect.top >= containerRect.bottom) continue
+
+      const offset = rect.top - containerRect.top
+      if (offset <= 0) {
+        if (!closestAbove || offset > closestAbove.offset) closestAbove = { key, offset }
+      } else if (!closestBelow || offset < closestBelow.offset) {
+        closestBelow = { key, offset }
+      }
+    }
+
+    return closestAbove ?? closestBelow
+  }
+
+  function captureScrollSnapshot(): VirtualFollowScrollSnapshot | undefined {
+    const element = scrollElement()
+    if (!element) return undefined
+
+    const snapshot: VirtualFollowScrollSnapshot = getSnapshotMetrics(element, virtuaHandle())
+    if (!snapshot.atBottom) {
+      const anchor = findTopVisibleAnchor(element)
+      if (anchor) {
+        snapshot.anchorKey = anchor.key
+        snapshot.anchorOffset = anchor.offset
+      }
+    }
+    return snapshot
+  }
+
+  function applyPixelSnapshot(snapshot: VirtualFollowScrollSnapshot, behavior: ScrollBehavior) {
+    const element = scrollElement()
+    if (!element) return
+
+    const handle = virtuaHandle()
+    const maxScrollTop = Math.max((handle?.scrollSize ?? element.scrollHeight) - (handle?.viewportSize ?? element.clientHeight), 0)
+    const scrollRatio = snapshot.scrollRatio
+    const canUseRatio =
+      !snapshot.atBottom &&
+      typeof scrollRatio === "number" &&
+      Number.isFinite(scrollRatio) &&
+      snapshot.maxScrollTop !== maxScrollTop
+    const nextTop = snapshot.atBottom
+      ? maxScrollTop
+      : canUseRatio
+        ? Math.min(Math.max(scrollRatio, 0), 1) * maxScrollTop
+        : Math.min(snapshot.scrollTop, maxScrollTop)
+
+    if (behavior === "smooth" && !virtuaHandle()) {
+      markProgrammaticScroll()
+      element.scrollTo({ top: nextTop, behavior })
+      scrollController.recordProgrammaticOffset(nextTop, snapshot.atBottom)
+      return
+    }
+    scrollToOffset(nextTop, snapshot.atBottom)
+  }
+
+  function applyAnchorSnapshot(snapshot: VirtualFollowScrollSnapshot) {
+    const element = scrollElement()
+    if (!element || !snapshot.anchorKey || typeof snapshot.anchorOffset !== "number") return false
+
+    const itemWrapper = itemElements.get(snapshot.anchorKey)
+    if (!itemWrapper) return false
+
+    const containerRect = element.getBoundingClientRect()
+    const itemRect = itemWrapper.getBoundingClientRect()
+    const currentOffset = itemRect.top - containerRect.top
+    const delta = currentOffset - snapshot.anchorOffset
+    if (Math.abs(delta) > 1) {
+      scrollToOffset((virtuaHandle()?.scrollOffset ?? element.scrollTop) + delta, false)
+    }
+    return true
+  }
+
+  function applyBottomSnapshot() {
+    const element = scrollElement()
+    if (!element) return
+    const handle = virtuaHandle()
+    const maxOffset = Math.max((handle?.scrollSize ?? element.scrollHeight) - (handle?.viewportSize ?? element.clientHeight), 0)
+    scrollToOffset(maxOffset, true)
+  }
+
+  function restoreScrollSnapshot(snapshot: VirtualFollowScrollSnapshot, opts?: RestoreScrollSnapshotOptions) {
+    const element = scrollElement()
+    if (!element) {
+      opts?.fallback?.()
+      opts?.onApplied?.()
+      return
+    }
+
+    const behavior = opts?.behavior ?? "auto"
+    scrollController.setRestoring(true)
+    const finishRestore = () => {
+      scrollController.setRestoring(false)
+      opts?.onApplied?.()
+    }
+    if (snapshot.atBottom) {
+      applyBottomSnapshot()
+      requestAnimationFrame(() => {
+        applyBottomSnapshot()
+        finishRestore()
+      })
+      return
+    }
+
+    if (snapshot.anchorKey) {
+      const index = props.items().findIndex((item, i) => props.getKey(item, i) === snapshot.anchorKey)
+      if (index !== -1) {
+        markProgrammaticScroll()
+        virtuaHandle()?.scrollToIndex(index, { align: "start", smooth: behavior === "smooth" })
+        retryAnchorRestore(snapshot, behavior, 6, finishRestore)
+        return
+      }
+    }
+
+    applyPixelSnapshot(snapshot, behavior)
+    requestAnimationFrame(finishRestore)
+  }
+
+  function retryAnchorRestore(snapshot: VirtualFollowScrollSnapshot, behavior: ScrollBehavior, remainingFrames: number, onApplied?: () => void) {
+    requestAnimationFrame(() => {
+      const applied = applyAnchorSnapshot(snapshot)
+      if (applied) {
+        requestAnimationFrame(() => {
+          applyAnchorSnapshot(snapshot)
+          onApplied?.()
+        })
+        return
+      }
+
+      if (remainingFrames > 0) {
+        retryAnchorRestore(snapshot, behavior, remainingFrames - 1, onApplied)
+        return
+      }
+
+      applyPixelSnapshot(snapshot, behavior)
+      requestAnimationFrame(() => onApplied?.())
+    })
+  }
+
   function updateScrollButtons() {
     const handle = virtuaHandle()
     const element = scrollElement()
     if (!handle || !element) return
 
-    const offset = handle.scrollOffset
-    const scrolledUp = offset < lastObservedScrollOffset - 1
-    const wasPinnedAtBottom = lastObservedPinnedAtBottom
-    const scrollHeight = handle.scrollSize
-    const clientHeight = element.clientHeight
-    const atBottom = scrollHeight - (offset + clientHeight) <= (props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX)
+    const offset = getCurrentScrollOffset(element, handle)
+    const now = performance.now()
+    const programmatic = hasProgrammaticScrollIntent()
+    const metrics = getDomMetrics(element, handle, offset)
+    const atBottom = isAtBottom(metrics)
     const atTop = offset <= (props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX)
-    lastObservedScrollOffset = offset
 
     const hasItems = props.items().length > 0
     setShowScrollBottomButton(hasItems && !atBottom)
     setShowScrollTopButton(hasItems && !atTop)
 
-    // Keyboard/PageUp scrolls can move the viewport without ever hitting our
-    // local key intent listeners (for example after dragging the native
-    // scrollbar). If follow mode stays enabled, the next render notification
-    // snaps the list straight back to bottom. A real upward viewport move away
-    // from bottom should always break follow unless a hold target is active.
-    if (wasPinnedAtBottom && scrolledUp && autoScroll() && !atBottom && activeHoldTargetKey() === null) {
-      setAutoScroll(false)
-      lastObservedPinnedAtBottom = false
-      return
+    const result = scrollController.observeViewport(metrics, now, programmatic, canRejoinFollowFromDownScroll(metrics))
+    if (result.state.mode.type !== followMode().type || result.effect.type !== "none") {
+      suppressHoldUntilTargetChanges = false
     }
+    syncControllerResult(result)
+  }
 
-    // Sync autoScroll state based on scroll position if it was a user scroll
-    if (hasUserScrollIntent()) {
-      clearAutoPinHold()
-      if (atBottom && !autoScroll()) {
-        setAutoScroll(true)
-      } else if (!atBottom && autoScroll()) {
-        setAutoScroll(false)
-      }
+  function performScrollToBottom(immediate = true) {
+    const handle = virtuaHandle()
+    const element = scrollElement()
+    if (!handle || props.items().length === 0) return
+    if (immediate && element) {
+      markProgrammaticScroll()
+      handle.scrollToIndex(props.items().length - 1, { align: "end", smooth: false })
+      pinDomBottomAfterLayout()
+      return
     }
+    markProgrammaticScroll()
+    handle.scrollToIndex(props.items().length - 1, { align: "end", smooth: !immediate })
+  }
+
+  function pinDomBottomAfterLayout(remainingFrames = 2) {
+    const element = scrollElement()
+    if (!element) return
+    if (!autoScroll() || effectiveSuspendAutoPinToBottom() || scrollController.snapshot().restoring) return
+    if (shouldHonorPrePinEscape() && escapeFollowIfDomMovedUp(element)) return
 
-    lastObservedPinnedAtBottom = autoScroll() && atBottom
+    const handle = virtuaHandle()
+    const maxOffset = Math.max((handle?.scrollSize ?? element.scrollHeight) - (handle?.viewportSize ?? element.clientHeight), 0)
+    scrollToOffset(maxOffset, true)
+    if (remainingFrames <= 0) return
+
+    requestAnimationFrame(() => {
+      if (!autoScroll() || effectiveSuspendAutoPinToBottom() || scrollController.snapshot().restoring) return
+      pinDomBottomAfterLayout(remainingFrames - 1)
+    })
   }
 
-  function scrollToBottom(immediate = true, options?: { suppressAutoAnchor?: boolean }) {
+  function performScrollToTop(immediate = true) {
     const handle = virtuaHandle()
+    const element = scrollElement()
     if (!handle) return
+    if (immediate && element) {
+      scrollToOffset(0, false)
+      return
+    }
+    markProgrammaticScroll()
+    handle.scrollToIndex(0, { align: "start", smooth: !immediate })
+  }
+
+  function performScrollToKey(key: string, opts: { block: ScrollLogicalPosition; smooth: boolean }) {
+    const index = props.items().findIndex((item, i) => props.getKey(item, i) === key)
+    if (index === -1) return
+    markProgrammaticScroll()
+    virtuaHandle()?.scrollToIndex(index, { align: opts.block, smooth: opts.smooth })
+  }
+
+  function scrollToBottom(immediate = true, options?: { suppressAutoAnchor?: boolean; suppressHold?: boolean }) {
     if (options?.suppressAutoAnchor ?? !immediate) {
       suppressAutoScrollOnce = true
     }
-    handle.scrollToIndex(props.items().length - 1, { align: "end", smooth: !immediate })
-    setAutoScroll(true)
+    dispatchFollowEvent({ type: "jump-bottom", immediate, explicit: options?.suppressHold ?? false })
   }
 
   function scrollToTop(immediate = true) {
-    const handle = virtuaHandle()
-    if (!handle) return
-    handle.scrollToIndex(0, { align: "start", smooth: !immediate })
-    setAutoScroll(false)
+    dispatchFollowEvent({ type: "jump-top", immediate })
   }
 
   function handleScroll() {
-    const isUserScroll = hasUserScrollIntent()
-    if (isUserScroll) {
-      if (lastUserScrollIntentDirection === "up" && autoScroll()) {
-        setAutoScroll(false)
-      }
-    }
     updateScrollButtons()
     props.onScroll?.()
 
     // Find active key (roughly the first visible item)
     const handle = virtuaHandle()
-    if (handle) {
-      const start = handle.findItemIndex(handle.scrollOffset)
+    const element = scrollElement()
+    if (handle && element) {
+      const start = handle.findItemIndex(getCurrentScrollOffset(element, handle))
       const items = props.items()
       if (items[start]) {
         const key = props.getKey(items[start], start)
@@ -342,6 +678,21 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
     return props.getAnchorId ? props.getAnchorId(key) : key
   }
 
+  function alignHoldTarget(key: string) {
+    const element = scrollElement()
+    if (!element) return
+    const itemWrapper = itemElements.get(key)
+    if (!itemWrapper) return
+    const target = props.resolveAutoPinHoldElement?.(itemWrapper, key) ?? itemWrapper
+    const containerRect = element.getBoundingClientRect()
+    const targetRect = target.getBoundingClientRect()
+    const relativeTop = targetRect.top - containerRect.top
+    const alignDelta = relativeTop - holdTargetTopThresholdPx()
+    if (Math.abs(alignDelta) > 1) {
+      scrollToOffset((virtuaHandle()?.scrollOffset ?? element.scrollTop) + alignDelta, false)
+    }
+  }
+
   function updateAutoPinHold() {
     const element = scrollElement()
     if (!element) return
@@ -351,16 +702,18 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
 
     if (heldKey !== null) {
       if (targetKey !== heldKey) {
-        clearAutoPinHold({ resumeBottom: true })
+        dispatchFollowEvent({ type: "hold-target-changed", key: targetKey, canPinToBottom: !externalSuspendAutoPinToBottom() })
       }
 
       return
     }
 
+    if (!streamingActive()) return
     if (!autoScroll()) return
     if (externalSuspendAutoPinToBottom()) return
     if (!targetKey) return
     if (didTriggerHoldForCurrentTarget()) return
+    if (suppressHoldUntilTargetChanges) return
 
     const itemWrapper = itemElements.get(targetKey)
     if (!itemWrapper) return
@@ -372,36 +725,60 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
     const exceedsViewport = targetRect.height > element.clientHeight
 
     if (exceedsViewport && relativeTop < 0) {
-      const alignDelta = relativeTop - holdTargetTopThresholdPx()
-      if (Math.abs(alignDelta) > 1) {
-        element.scrollTop = Math.max(0, element.scrollTop + alignDelta)
-      }
-      setActiveHoldTargetKey(targetKey)
+      dispatchFollowEvent({ type: "hold-candidate", key: targetKey, shouldHold: true })
       setDidTriggerHoldForCurrentTarget(true)
     }
   }
 
+  function flushContentRendered() {
+    pendingContentRenderedFrame = null
+
+    if (shouldHonorPrePinEscape() && escapeFollowIfDomMovedUp()) {
+      updateScrollButtons()
+      return
+    }
+
+    updateAutoPinHold()
+    if (activeHoldTargetKey() !== null) {
+      if (autoScroll() && streamingActive()) pendingBottomRepinAfterHold = true
+      updateScrollButtons()
+      return
+    }
+
+    const canPinToBottom = autoScroll() && !effectiveSuspendAutoPinToBottom()
+    dispatchFollowEvent({ type: "content-grew", canPinToBottom })
+    updateScrollButtons()
+  }
+
   const api: VirtualFollowListApi = {
     scrollToTop: (opts) => scrollToTop(opts?.immediate ?? true),
-    scrollToBottom: (opts) => scrollToBottom(opts?.immediate ?? true, { suppressAutoAnchor: opts?.suppressAutoAnchor }),
+    scrollToBottom: (opts) => scrollToBottom(opts?.immediate ?? true, { suppressAutoAnchor: opts?.suppressAutoAnchor, suppressHold: opts?.suppressHold }),
     scrollToKey: (key, opts) => {
       const index = props.items().findIndex((item, i) => props.getKey(item, i) === key)
       if (index === -1) return
       const nextAutoScroll = opts?.setAutoScroll ?? false
-      setAutoScroll(nextAutoScroll)
-      virtuaHandle()?.scrollToIndex(index, { align: opts?.block ?? "start", smooth: opts?.behavior === "smooth" })
+      dispatchFollowEvent({
+        type: "jump-key",
+        key,
+        block: opts?.block ?? "start",
+        smooth: opts?.behavior === "smooth",
+        followAfter: nextAutoScroll,
+      })
     },
     notifyContentRendered: () => {
-      updateAutoPinHold()
-      if (activeHoldTargetKey() !== null) return
-      if (autoScroll() && !effectiveSuspendAutoPinToBottom()) {
-        scrollToBottom(true)
+      if (typeof requestAnimationFrame !== "function") {
+        flushContentRendered()
+        return
       }
+      if (pendingContentRenderedFrame !== null) return
+      pendingContentRenderedFrame = requestAnimationFrame(() => flushContentRendered())
     },
-    setAutoScroll: (enabled) => setAutoScroll(Boolean(enabled)),
+    setAutoScroll: (enabled) => dispatchFollowEvent({ type: "set-follow", enabled: Boolean(enabled) }),
     getAutoScroll: () => autoScroll(),
     getScrollElement: () => scrollElement(),
     getShellElement: () => shellElement(),
+    captureScrollSnapshot,
+    restoreScrollSnapshot,
   }
 
   createEffect(() => props.registerApi?.(api))
@@ -409,33 +786,50 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
 
   createEffect(on(() => props.resetKey?.(), () => {
     itemElements.clear()
-    setActiveHoldTargetKey(null)
     setDidTriggerHoldForCurrentTarget(false)
-    lastObservedScrollOffset = 0
-    lastObservedPinnedAtBottom = false
+    suppressHoldUntilTargetChanges = false
+    pendingBottomRepinAfterHold = false
   }))
 
   createEffect(on(holdTargetKey, (nextTargetKey, prevTargetKey) => {
     if (nextTargetKey !== prevTargetKey && didTriggerHoldForCurrentTarget()) {
       setDidTriggerHoldForCurrentTarget(false)
     }
+    if (nextTargetKey !== prevTargetKey) {
+      suppressHoldUntilTargetChanges = false
+    }
     if (activeHoldTargetKey() === null) return
     if (nextTargetKey === activeHoldTargetKey()) return
-    clearAutoPinHold({ resumeBottom: true })
+    dispatchFollowEvent({ type: "hold-target-changed", key: nextTargetKey, canPinToBottom: !externalSuspendAutoPinToBottom() })
+    if (pendingBottomRepinAfterHold) {
+      pendingBottomRepinAfterHold = false
+      requestAnimationFrame(() => pinDomBottomAfterLayout())
+    }
   }, { defer: true }))
 
   // Handle autoScroll (Follow) on items change
   createEffect(on(() => props.items().length, (len, prevLen) => {
+    if (pendingInitialScroll && isActive() && len > 0) {
+      pendingInitialScroll = false
+      if (initialScrollToBottom()) {
+        dispatchFollowEvent({ type: "jump-bottom", immediate: true, explicit: false })
+      }
+      suppressAutoScrollOnce = false
+      return
+    }
     if (len > (prevLen ?? 0) && autoScroll() && !effectiveSuspendAutoPinToBottom() && !suppressAutoScrollOnce) {
-      requestAnimationFrame(() => scrollToBottom(true))
+      requestAnimationFrame(() => {
+        dispatchFollowEvent({ type: "content-grew", canPinToBottom: autoScroll() && !effectiveSuspendAutoPinToBottom() })
+      })
     }
     suppressAutoScrollOnce = false
   }, { defer: true }))
 
   // Handle followToken change
   createEffect(on(() => props.followToken?.(), () => {
-    if (autoScroll() && !effectiveSuspendAutoPinToBottom()) {
-      scrollToBottom(true)
+    const canPinToBottom = autoScroll() && !effectiveSuspendAutoPinToBottom()
+    if (canPinToBottom) {
+      dispatchFollowEvent({ type: "content-grew", canPinToBottom })
     }
   }, { defer: true }))
 
@@ -443,22 +837,30 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
   createEffect(on(() => props.resetKey?.(), (nextKey) => {
     if (nextKey === lastResetKey) return
     lastResetKey = nextKey
-    setAutoScroll(initialAutoScroll())
+    dispatchFollowEvent({ type: "reset", follow: Boolean(initialAutoScroll()) })
     pendingInitialScroll = true
   }))
 
   // Initial scroll and session activation
-  createEffect(() => {
-    const active = isActive()
+  createEffect(on(isActive, (active) => {
     if (!active) return
     if (pendingInitialScroll && props.items().length > 0) {
       pendingInitialScroll = false
       if (initialScrollToBottom()) {
-        scrollToBottom(true)
+        dispatchFollowEvent({ type: "jump-bottom", immediate: true, explicit: false })
       }
     } else if (autoScroll() && scrollToBottomOnActivate()) {
-      scrollToBottom(true)
+      dispatchFollowEvent({ type: "jump-bottom", immediate: true, explicit: false })
+    }
+  }))
+
+  onCleanup(() => {
+    if (pendingContentRenderedFrame !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(pendingContentRenderedFrame)
+      pendingContentRenderedFrame = null
     }
+    detachScrollIntentListeners?.()
+    detachScrollIntentListeners = undefined
   })
 
   return (
@@ -523,7 +925,7 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
             </button>
           </Show>
           <Show when={showScrollBottomButton()}>
-            <button type="button" class="message-scroll-button" onClick={() => scrollToBottom()} aria-label={props.scrollToBottomAriaLabel!()}>
+            <button type="button" class="message-scroll-button" onClick={() => scrollToBottom(true, { suppressHold: true })} aria-label={props.scrollToBottomAriaLabel!()}>
               <span class="message-scroll-icon" aria-hidden="true">
                 ↓
               </span>
diff --git a/packages/ui/src/lib/hooks/use-scroll-cache.ts b/packages/ui/src/lib/hooks/use-scroll-cache.ts
deleted file mode 100644
index 1bbe956c2..000000000
--- a/packages/ui/src/lib/hooks/use-scroll-cache.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { type Accessor, createMemo } from "solid-js"
-import { messageStoreBus } from "../../stores/message-v2/bus"
-import type { ScrollSnapshot } from "../../stores/message-v2/types"
-
-interface UseScrollCacheParams {
-  instanceId: MaybeAccessor<string>
-  sessionId: MaybeAccessor<string>
-  scope: MaybeAccessor<string>
-}
-
-interface PersistScrollOptions {
-  atBottomOffset?: number
-}
-
-interface RestoreScrollOptions {
-  behavior?: ScrollBehavior
-  fallback?: () => void
-  onApplied?: (snapshot: ScrollSnapshot | undefined) => void
-}
-
-interface ScrollCacheHandle {
-  persist: (element: HTMLElement | null | undefined, options?: PersistScrollOptions) => ScrollSnapshot | undefined
-  restore: (element: HTMLElement | null | undefined, options?: RestoreScrollOptions) => void
-}
-
-const DEFAULT_BOTTOM_OFFSET = 48
-
-/**
- * Wraps the message-store scroll snapshot helpers so components can
- * persist/restore scroll positions without duplicating requestAnimationFrame
- * boilerplate.
- */
-export function useScrollCache(params: UseScrollCacheParams): ScrollCacheHandle {
-  const resolved = createMemo(() => ({
-    instanceId: resolveValue(params.instanceId),
-    sessionId: resolveValue(params.sessionId),
-    scope: resolveValue(params.scope),
-  }))
-
-  const store = createMemo(() => {
-    const { instanceId } = resolved()
-    return messageStoreBus.getOrCreate(instanceId)
-  })
-
-  function persist(element: HTMLElement | null | undefined, options?: PersistScrollOptions) {
-    if (!element) {
-      return undefined
-    }
-    const target = resolved()
-    if (!target.sessionId) {
-      return undefined
-    }
-    const snapshot: Omit<ScrollSnapshot, "updatedAt"> = {
-      scrollTop: element.scrollTop,
-      atBottom: isNearBottom(element, options?.atBottomOffset ?? DEFAULT_BOTTOM_OFFSET),
-    }
-    store().setScrollSnapshot(target.sessionId, target.scope, snapshot)
-    return { ...snapshot, updatedAt: Date.now() }
-  }
-
-  function restore(element: HTMLElement | null | undefined, options?: RestoreScrollOptions) {
-    const target = resolved()
-    if (!element || !target.sessionId) {
-      options?.fallback?.()
-      options?.onApplied?.(undefined)
-      return
-    }
-    const snapshot = store().getScrollSnapshot(target.sessionId, target.scope)
-    requestAnimationFrame(() => {
-      if (!element) {
-        options?.onApplied?.(snapshot)
-        return
-      }
-      if (!snapshot) {
-        options?.fallback?.()
-        options?.onApplied?.(undefined)
-        return
-      }
-      const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
-      const nextTop = snapshot.atBottom ? maxScrollTop : Math.min(snapshot.scrollTop, maxScrollTop)
-      const behavior = options?.behavior ?? "auto"
-      element.scrollTo({ top: nextTop, behavior })
-      options?.onApplied?.(snapshot)
-    })
-  }
-
-  return { persist, restore }
-}
-
-function isNearBottom(element: HTMLElement, offset: number) {
-  const { scrollTop, scrollHeight, clientHeight } = element
-  return scrollHeight - (scrollTop + clientHeight) <= offset
-}
-
-function resolveValue<T>(value: MaybeAccessor<T>): T {
-  if (typeof value === "function") {
-    return (value as Accessor<T>)()
-  }
-  return value
-}
-
-type MaybeAccessor<T> = T | Accessor<T>
diff --git a/packages/ui/src/stores/message-v2/types.ts b/packages/ui/src/stores/message-v2/types.ts
index 581a896e4..6208d475e 100644
--- a/packages/ui/src/stores/message-v2/types.ts
+++ b/packages/ui/src/stores/message-v2/types.ts
@@ -75,6 +75,10 @@ export interface InstanceQuestionState {
 
 export interface ScrollSnapshot {
   scrollTop: number
+  scrollRatio?: number
+  maxScrollTop?: number
+  anchorKey?: string
+  anchorOffset?: number
   atBottom: boolean
   updatedAt: number
 }