diff --git a/web/src/chat/outline.test.ts b/web/src/chat/outline.test.ts
index 39fa19cc..b801b13f 100644
--- a/web/src/chat/outline.test.ts
+++ b/web/src/chat/outline.test.ts
@@ -2,13 +2,19 @@ import { describe, expect, it } from 'vitest'
 import type { AgentEvent, ChatBlock } from '@/chat/types'
 import { buildConversationOutline, truncateOutlineLabel } from '@/chat/outline'
 
-function userBlock(id: string, text: string, createdAt: number): ChatBlock {
+function userBlock(
+    id: string,
+    text: string,
+    createdAt: number,
+    overrides: Partial<Extract<ChatBlock, { kind: 'user-text' }>> = {}
+): ChatBlock {
     return {
         kind: 'user-text',
         id,
         localId: null,
         createdAt,
-        text
+        text,
+        ...overrides
     }
 }
 
@@ -54,6 +60,17 @@ describe('conversation outline', () => {
         expect(truncateOutlineLabel('a '.repeat(80), 20)).toBe('a a a a a a a a a...')
     })
 
+    it('filters queued user messages that are not yet locatable in the thread', () => {
+        const items = buildConversationOutline([
+            userBlock('queued', 'Queued prompt', 1000, { status: 'queued', invokedAt: null }),
+            userBlock('sent', 'Visible prompt', 2000, { status: 'sent', invokedAt: 2500 }),
+        ])
+
+        expect(items.map((item) => item.id)).toEqual([
+            'outline:user:sent'
+        ])
+    })
+
     it('keeps block order stable', () => {
         const items = buildConversationOutline([
             userBlock('first', 'First', 1000),
diff --git a/web/src/chat/outline.ts b/web/src/chat/outline.ts
index d70a9ed2..24134abd 100644
--- a/web/src/chat/outline.ts
+++ b/web/src/chat/outline.ts
@@ -33,11 +33,16 @@ function userBlockToOutlineItem(block: UserTextBlock): ConversationOutlineItem {
     }
 }
 
+function isLocatableOutlineBlock(block: ChatBlock): block is UserTextBlock {
+    return block.kind === 'user-text'
+        && !(block.invokedAt === null && block.status !== 'failed')
+}
+
 export function buildConversationOutline(blocks: readonly ChatBlock[]): ConversationOutlineItem[] {
     const items: ConversationOutlineItem[] = []
 
     for (const block of blocks) {
-        if (block.kind === 'user-text') {
+        if (isLocatableOutlineBlock(block)) {
             items.push(userBlockToOutlineItem(block))
         }
     }
diff --git a/web/src/components/AssistantChat/HappyThread.test.tsx b/web/src/components/AssistantChat/HappyThread.test.tsx
index 45176b53..f3ea814c 100644
--- a/web/src/components/AssistantChat/HappyThread.test.tsx
+++ b/web/src/components/AssistantChat/HappyThread.test.tsx
@@ -6,6 +6,7 @@ import {
     ConversationOutlinePanel,
     captureScrollAnchor,
     getScrollIntent,
+    locateOutlineTargetMessage,
     restoreScrollAnchor,
     shouldCancelInitialScrollSettling,
 } from '@/components/AssistantChat/HappyThread'
@@ -183,3 +184,46 @@ describe('scroll anchor helpers', () => {
         viewport.remove()
     })
 })
+
+describe('outline target loading', () => {
+    it('loads older messages through the scroll-preserving wrapper until the target appears', async () => {
+        const loadOlderPreservingScroll = vi.fn<() => Promise<boolean>>()
+        let loadCount = 0
+        loadOlderPreservingScroll.mockImplementation(async () => {
+            loadCount += 1
+            return true
+        })
+
+        const findTarget = vi.fn((anchorId: string) => {
+            if (anchorId !== 'hapi-message-user:target') {
+                return null
+            }
+            return loadCount >= 2 ? document.createElement('div') : null
+        })
+
+        const target = await locateOutlineTargetMessage({
+            targetMessageId: 'user:target',
+            findTarget,
+            hasMoreMessages: () => loadCount < 2,
+            loadOlderPreservingScroll
+        })
+
+        expect(target).toBeInstanceOf(HTMLElement)
+        expect(loadOlderPreservingScroll).toHaveBeenCalledTimes(2)
+        expect(findTarget).toHaveBeenCalledWith('hapi-message-user:target')
+    })
+
+    it('stops when history is exhausted before the target is loaded', async () => {
+        const loadOlderPreservingScroll = vi.fn(async () => false)
+
+        const target = await locateOutlineTargetMessage({
+            targetMessageId: 'user:missing',
+            findTarget: () => null,
+            hasMoreMessages: () => true,
+            loadOlderPreservingScroll
+        })
+
+        expect(target).toBeNull()
+        expect(loadOlderPreservingScroll).toHaveBeenCalledTimes(1)
+    })
+})
diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index 0494bb18..8c4d1dbe 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -36,6 +36,13 @@ type ScrollIntent = {
     isScrollingUp: boolean
 }
 
+type LocateOutlineTargetOptions = {
+    targetMessageId: string
+    findTarget: (anchorId: string) => HTMLElement | null
+    hasMoreMessages: () => boolean
+    loadOlderPreservingScroll: () => Promise<boolean>
+}
+
 export function getScrollIntent(params: {
     scrollTop: number
     scrollHeight: number
@@ -82,6 +89,19 @@ export function restoreScrollAnchor(viewport: HTMLElement, anchor: ScrollAnchor)
     return true
 }
 
+export async function locateOutlineTargetMessage(options: LocateOutlineTargetOptions): Promise<HTMLElement | null> {
+    const anchorId = getConversationMessageAnchorId(options.targetMessageId)
+    let target = options.findTarget(anchorId)
+    while (!target && options.hasMoreMessages()) {
+        const loaded = await options.loadOlderPreservingScroll()
+        if (!loaded) {
+            break
+        }
+        target = options.findTarget(anchorId)
+    }
+    return target
+}
+
 function NewMessagesIndicator(props: { count: number; onClick: () => void }) {
     const { t } = useTranslation()
     if (props.count === 0) {
@@ -254,8 +274,12 @@ export function HappyThread(props: {
     const isLoadingMoreRef = useRef(props.isLoadingMoreMessages)
     const hasMoreMessagesRef = useRef(props.hasMoreMessages)
     const isLoadingMessagesRef = useRef(props.isLoadingMessages)
+    const messagesVersionRef = useRef(props.messagesVersion)
     const onLoadMoreRef = useRef(props.onLoadMore)
     const handleLoadMoreRef = useRef<() => void>(() => {})
+    const pendingLoadPromiseRef = useRef<Promise<boolean> | null>(null)
+    const pendingLoadResolveRef = useRef<((value: boolean) => void) | null>(null)
+    const pendingLoadBaselineRef = useRef<{ messagesVersion: number; hasMoreMessages: boolean } | null>(null)
     const atBottomRef = useRef(true)
     const onAtBottomChangeRef = useRef(props.onAtBottomChange)
     const onFlushPendingRef = useRef(props.onFlushPending)
@@ -280,6 +304,9 @@ export function HappyThread(props: {
     useEffect(() => {
         isLoadingMessagesRef.current = props.isLoadingMessages
     }, [props.isLoadingMessages])
+    useEffect(() => {
+        messagesVersionRef.current = props.messagesVersion
+    }, [props.messagesVersion])
     useEffect(() => {
         onLoadMoreRef.current = props.onLoadMore
     }, [props.onLoadMore])
@@ -299,6 +326,25 @@ export function HappyThread(props: {
         initialScrollTimersRef.current = []
     }, [])
 
+    const settlePendingLoad = useCallback((result: boolean) => {
+        const resolve = pendingLoadResolveRef.current
+        const baseline = pendingLoadBaselineRef.current
+        pendingLoadResolveRef.current = null
+        pendingLoadPromiseRef.current = null
+        pendingLoadBaselineRef.current = null
+        if (!resolve) {
+            return
+        }
+        if (!result || !baseline) {
+            resolve(result)
+            return
+        }
+        resolve(
+            messagesVersionRef.current !== baseline.messagesVersion
+            || hasMoreMessagesRef.current !== baseline.hasMoreMessages
+        )
+    }, [])
+
     // Track scroll position to toggle autoScroll (stable listener using refs)
     useEffect(() => {
         const viewport = viewportRef.current
@@ -393,10 +439,14 @@ export function HappyThread(props: {
         atBottomRef.current = true
         onAtBottomChangeRef.current(true)
         forceScrollTokenRef.current = props.forceScrollToken
+        pendingScrollRef.current = null
+        loadLockRef.current = false
+        loadStartedRef.current = false
         initialScrollSessionRef.current = null
         initialScrollDeadlineRef.current = 0
         clearInitialScrollTimers()
-    }, [props.sessionId, clearInitialScrollTimers])
+        settlePendingLoad(false)
+    }, [props.sessionId, clearInitialScrollTimers, settlePendingLoad])
 
     useLayoutEffect(() => {
         if (
@@ -438,8 +488,9 @@ export function HappyThread(props: {
     useEffect(() => {
         return () => {
             clearInitialScrollTimers()
+            settlePendingLoad(false)
         }
-    }, [clearInitialScrollTimers])
+    }, [clearInitialScrollTimers, settlePendingLoad])
 
     useEffect(() => {
         if (forceScrollTokenRef.current === props.forceScrollToken) {
@@ -449,7 +500,10 @@ export function HappyThread(props: {
         scrollToBottom()
     }, [props.forceScrollToken, scrollToBottom])
 
-    const handleLoadMore = useCallback(() => {
+    const loadOlderPreservingScroll = useCallback((): Promise<boolean> => {
+        if (pendingLoadPromiseRef.current) {
+            return pendingLoadPromiseRef.current
+        }
         if (
             isInitialScrollSettling()
             || isLoadingMessagesRef.current
@@ -457,11 +511,11 @@ export function HappyThread(props: {
             || isLoadingMoreRef.current
             || loadLockRef.current
         ) {
-            return
+            return Promise.resolve(false)
         }
         const viewport = viewportRef.current
         if (!viewport) {
-            return
+            return Promise.resolve(false)
         }
         pendingScrollRef.current = {
             anchor: captureScrollAnchor(viewport),
@@ -471,39 +525,58 @@ export function HappyThread(props: {
         autoScrollEnabledRef.current = false
         loadLockRef.current = true
         loadStartedRef.current = false
-        let loadPromise: Promise<unknown>
+        pendingLoadBaselineRef.current = {
+            messagesVersion: messagesVersionRef.current,
+            hasMoreMessages: hasMoreMessagesRef.current
+        }
+        const loadPromise = new Promise<boolean>((resolve) => {
+            pendingLoadResolveRef.current = resolve
+        })
+        pendingLoadPromiseRef.current = loadPromise
         try {
-            loadPromise = onLoadMoreRef.current()
+            void onLoadMoreRef.current().catch((error) => {
+                pendingScrollRef.current = null
+                loadLockRef.current = false
+                settlePendingLoad(false)
+                console.error('Failed to load older messages:', error)
+            }).finally(() => {
+                if (!loadStartedRef.current && !isLoadingMoreRef.current) {
+                    if (pendingScrollRef.current) {
+                        pendingScrollRef.current = null
+                        loadLockRef.current = false
+                    }
+                    settlePendingLoad(true)
+                }
+            })
         } catch (error) {
             pendingScrollRef.current = null
             loadLockRef.current = false
-            throw error
-        }
-        void loadPromise.catch((error) => {
-            pendingScrollRef.current = null
-            loadLockRef.current = false
+            settlePendingLoad(false)
             console.error('Failed to load older messages:', error)
-        }).finally(() => {
-            if (!loadStartedRef.current && !isLoadingMoreRef.current && pendingScrollRef.current) {
-                pendingScrollRef.current = null
-                loadLockRef.current = false
-            }
-        })
-    }, [isInitialScrollSettling])
+        }
+        return loadPromise
+    }, [isInitialScrollSettling, settlePendingLoad])
 
-    const handleOutlineSelect = useCallback((item: ConversationOutlineItem) => {
-        const target = document.getElementById(getConversationMessageAnchorId(item.targetMessageId))
+    const handleOutlineSelect = useCallback(async (item: ConversationOutlineItem) => {
+        const target = await locateOutlineTargetMessage({
+            targetMessageId: item.targetMessageId,
+            findTarget: (anchorId) => document.getElementById(anchorId),
+            hasMoreMessages: () => hasMoreMessagesRef.current,
+            loadOlderPreservingScroll
+        })
         if (target) {
             target.scrollIntoView({ block: 'start', behavior: 'smooth' })
             autoScrollEnabledRef.current = false
         }
         props.onOutlineItemClick?.(item)
         props.onOutlineOpenChange(false)
-    }, [props.onOutlineItemClick, props.onOutlineOpenChange])
+    }, [loadOlderPreservingScroll, props.onOutlineItemClick, props.onOutlineOpenChange])
 
     useEffect(() => {
-        handleLoadMoreRef.current = handleLoadMore
-    }, [handleLoadMore])
+        handleLoadMoreRef.current = () => {
+            void loadOlderPreservingScroll()
+        }
+    }, [loadOlderPreservingScroll])
 
     useEffect(() => {
         const sentinel = topSentinelRef.current
@@ -573,24 +646,28 @@ export function HappyThread(props: {
             lastScrollTopRef.current = viewport.scrollTop
             pendingScrollRef.current = null
             loadLockRef.current = false
+            settlePendingLoad(true)
             return
         }
         if (atBottomRef.current && autoScrollEnabledRef.current) {
             scrollToBottomInstant()
         }
-    }, [props.messagesVersion, scrollToBottomInstant])
+    }, [props.messagesVersion, scrollToBottomInstant, settlePendingLoad])
 
     useEffect(() => {
         isLoadingMoreRef.current = props.isLoadingMoreMessages
         if (props.isLoadingMoreMessages) {
             loadStartedRef.current = true
         }
-        if (prevLoadingMoreRef.current && !props.isLoadingMoreMessages && pendingScrollRef.current) {
-            pendingScrollRef.current = null
-            loadLockRef.current = false
+        if (prevLoadingMoreRef.current && !props.isLoadingMoreMessages) {
+            if (pendingScrollRef.current) {
+                pendingScrollRef.current = null
+                loadLockRef.current = false
+            }
+            settlePendingLoad(true)
         }
         prevLoadingMoreRef.current = props.isLoadingMoreMessages
-    }, [props.isLoadingMoreMessages])
+    }, [props.isLoadingMoreMessages, settlePendingLoad])
 
     const showSkeleton = props.isLoadingMessages && props.rawMessagesCount === 0 && props.pendingCount === 0
 
@@ -630,7 +707,9 @@ export function HappyThread(props: {
                                                 <Button
                                                     variant="outline"
                                                     size="sm"
-                                                    onClick={handleLoadMore}
+                                                    onClick={() => {
+                                                        void loadOlderPreservingScroll()
+                                                    }}
                                                     disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
                                                     aria-busy={props.isLoadingMoreMessages}
                                                     className="gap-1.5 text-xs opacity-80 hover:opacity-100"
@@ -678,7 +757,9 @@ export function HappyThread(props: {
                             items={props.outlineItems}
                             hasMoreMessages={props.hasMoreMessages}
                             isLoadingMoreMessages={props.isLoadingMoreMessages}
-                            onLoadMore={handleLoadMore}
+                            onLoadMore={() => {
+                                void loadOlderPreservingScroll()
+                            }}
                             onSelect={handleOutlineSelect}
                             onClose={() => props.onOutlineOpenChange(false)}
                         />
diff --git a/web/src/hooks/queries/useMessages.ts b/web/src/hooks/queries/useMessages.ts
index 4b8822be..b75d6187 100644
--- a/web/src/hooks/queries/useMessages.ts
+++ b/web/src/hooks/queries/useMessages.ts
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useSyncExternalStore } from 'react'
 import type { ApiClient } from '@/api/client'
 import type { DecryptedMessage } from '@/types/api'
 import {
-    clearMessageWindow,
     fetchLatestMessages,
     fetchOlderMessages,
     flushPendingMessages,
@@ -63,15 +62,6 @@ export function useMessages(api: ApiClient | null, sessionId: string | null): {
         void fetchLatestMessages(api, sessionId)
     }, [api, sessionId])
 
-    useEffect(() => {
-        if (!sessionId) {
-            return
-        }
-        return () => {
-            clearMessageWindow(sessionId)
-        }
-    }, [sessionId])
-
     const loadMore = useCallback(async () => {
         if (!api || !sessionId) return
         if (!state.hasMore || state.isLoadingMore) return
diff --git a/web/src/lib/message-window-store.test.ts b/web/src/lib/message-window-store.test.ts
index 0d4a9162..a8dd85fb 100644
--- a/web/src/lib/message-window-store.test.ts
+++ b/web/src/lib/message-window-store.test.ts
@@ -1,14 +1,16 @@
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import type { ApiClient } from '@/api/client'
 import type { DecryptedMessage, MessageStatus } from '@/types/api'
 import {
     appendOptimisticMessage,
     clearMessageWindow,
     fetchLatestMessages,
+    fetchOlderMessages,
     getMessageWindowState,
     ingestIncomingMessages,
     markMessagesConsumed,
     removeOptimisticMessage,
+    setAtBottom,
     VISIBLE_WINDOW_SIZE,
     updateMessageStatus,
 } from '@/lib/message-window-store'
@@ -109,6 +111,19 @@ function makeAgentRunMessage(props: {
     } as DecryptedMessage
 }
 
+function makeAgentMessagePage(props: {
+    idPrefix: string
+    startSeq: number
+    count: number
+    startCreatedAt: number
+}): DecryptedMessage[] {
+    return Array.from({ length: props.count }, (_, index) => makeAgentMessage({
+        id: `${props.idPrefix}-${index}`,
+        seq: props.startSeq + index,
+        createdAt: props.startCreatedAt + index,
+    }))
+}
+
 describe('removeOptimisticMessage', () => {
     const SESSION = 'test-session-remove'
 
@@ -181,6 +196,172 @@ describe('removeOptimisticMessage', () => {
     })
 })
 
+function deferred<T>() {
+    let resolve!: (value: T | PromiseLike<T>) => void
+    let reject!: (reason?: unknown) => void
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res
+        reject = rej
+    })
+    return { promise, resolve, reject }
+}
+
+describe('message-window-store async generations', () => {
+    const SESSION_ID = 'session-message-window-generation-test'
+
+    afterEach(() => {
+        clearMessageWindow(SESSION_ID)
+        sessionStorage.clear()
+    })
+
+    it('does not let a stale failed retry overwrite a newer reset-and-reload state', async () => {
+        const firstRequest = deferred<Awaited<ReturnType<ApiClient['getMessages']>>>()
+        const api = {
+            getMessages: vi.fn(async (_sessionId: string) => {
+                if (api.getMessages.mock.calls.length === 1) {
+                    return await firstRequest.promise
+                }
+                return {
+                    messages: [
+                        makeAgentMessage({
+                            id: 'fresh-message',
+                            seq: 10,
+                            createdAt: 1_700_000_300_000
+                        })
+                    ],
+                    page: {
+                        limit: 50,
+                        nextBeforeSeq: null,
+                        nextBeforeAt: null,
+                        hasMore: false
+                    }
+                }
+            })
+        } as Pick<ApiClient, 'getMessages'> & {
+            getMessages: ReturnType<typeof vi.fn>
+        }
+
+        const staleLoad = fetchLatestMessages(api as unknown as ApiClient, SESSION_ID)
+        clearMessageWindow(SESSION_ID)
+        await fetchLatestMessages(api as unknown as ApiClient, SESSION_ID)
+
+        firstRequest.reject(new Error('stale failure'))
+        await staleLoad
+
+        const state = getMessageWindowState(SESSION_ID)
+        expect(state.warning).toBeNull()
+        expect(state.messages.map((message) => message.id)).toEqual(['fresh-message'])
+    })
+
+    it('hydrates persisted window state for progressive re-entry', async () => {
+        ingestIncomingMessages(SESSION_ID, [
+            makeAgentMessage({
+                id: 'persisted-message',
+                seq: 11,
+                createdAt: 1_700_000_301_000
+            })
+        ])
+
+        await new Promise((resolve) => setTimeout(resolve, 250))
+        vi.resetModules()
+
+        const reloadedStore = await import('@/lib/message-window-store')
+        const state = reloadedStore.getMessageWindowState(SESSION_ID)
+
+        expect(state.messages.map((message) => message.id)).toEqual(['persisted-message'])
+        reloadedStore.clearMessageWindow(SESSION_ID)
+    })
+
+    it('does not let a latest refresh wedge an in-flight older load', async () => {
+        const latestPage = makeAgentMessagePage({
+            idPrefix: 'latest',
+            startSeq: 101,
+            count: 50,
+            startCreatedAt: 1_700_000_400_000,
+        })
+        const olderPage = makeAgentMessagePage({
+            idPrefix: 'older',
+            startSeq: 51,
+            count: 50,
+            startCreatedAt: 1_700_000_300_000,
+        })
+        const oldestPage = makeAgentMessagePage({
+            idPrefix: 'oldest',
+            startSeq: 1,
+            count: 50,
+            startCreatedAt: 1_700_000_200_000,
+        })
+        const olderRequest = deferred<Awaited<ReturnType<ApiClient['getMessages']>>>()
+        const callLog: Array<{ beforeAt?: number | null; beforeSeq?: number | null; byPosition?: boolean; limit?: number }> = []
+        const api = {
+            getMessages: vi.fn(async (_sessionId: string, options: { beforeAt?: number | null; beforeSeq?: number | null; byPosition?: boolean; limit?: number } = {}) => {
+                callLog.push(options)
+                const callIndex = callLog.length
+                if (callIndex === 1 || callIndex === 3) {
+                    return {
+                        messages: latestPage,
+                        page: {
+                            limit: options.limit ?? 50,
+                            nextBeforeSeq: 101,
+                            nextBeforeAt: 1_700_000_400_000,
+                            hasMore: true,
+                        }
+                    }
+                }
+                if (callIndex === 2) {
+                    return await olderRequest.promise
+                }
+                return {
+                    messages: oldestPage,
+                    page: {
+                        limit: options.limit ?? 50,
+                        nextBeforeSeq: null,
+                        nextBeforeAt: null,
+                        hasMore: false,
+                    }
+                }
+            })
+        } as Pick<ApiClient, 'getMessages'> & {
+            getMessages: ReturnType<typeof vi.fn>
+        }
+
+        await fetchLatestMessages(api as unknown as ApiClient, SESSION_ID)
+
+        const olderLoad = fetchOlderMessages(api as unknown as ApiClient, SESSION_ID)
+        await Promise.resolve()
+        expect(getMessageWindowState(SESSION_ID).isLoadingMore).toBe(true)
+
+        setAtBottom(SESSION_ID, false)
+        await fetchLatestMessages(api as unknown as ApiClient, SESSION_ID)
+
+        olderRequest.resolve({
+            messages: olderPage,
+            page: {
+                limit: 50,
+                nextBeforeSeq: 51,
+                nextBeforeAt: 1_700_000_300_000,
+                hasMore: true,
+            }
+        })
+        await olderLoad
+
+        const recoveredState = getMessageWindowState(SESSION_ID)
+        expect(recoveredState.isLoadingMore).toBe(false)
+        expect(recoveredState.messages.some((message) => message.id === 'older-0')).toBe(true)
+
+        await fetchOlderMessages(api as unknown as ApiClient, SESSION_ID)
+
+        const finalState = getMessageWindowState(SESSION_ID)
+        expect(finalState.isLoadingMore).toBe(false)
+        expect(callLog).toEqual([
+            { byPosition: true, limit: 50 },
+            { byPosition: true, beforeAt: 1_700_000_400_000, beforeSeq: 101, limit: 50 },
+            { byPosition: true, limit: 50 },
+            { byPosition: true, beforeAt: 1_700_000_300_000, beforeSeq: 51, limit: 50 },
+        ])
+    })
+})
+
 describe('message-window-store status updates', () => {
     const SESSION_ID = 'session-message-window-store-test'
 
diff --git a/web/src/lib/message-window-store.ts b/web/src/lib/message-window-store.ts
index 45c96c05..b0220353 100644
--- a/web/src/lib/message-window-store.ts
+++ b/web/src/lib/message-window-store.ts
@@ -30,6 +30,8 @@ type InternalState = MessageWindowState & {
     pendingOverflowCount: number
     pendingVisibleCount: number
     pendingOverflowVisibleCount: number
+    latestGeneration: number
+    olderGeneration: number
     // V8 composite cursor: defined when hub responded with nextBeforeAt
     oldestPositionAt: number | null
     // Paired with oldestPositionAt — the server returns both as a cursor; keep them
@@ -44,6 +46,20 @@ type PendingVisibilityCacheEntry = {
     visible: boolean
 }
 
+type AsyncGenerationKind = 'latest' | 'older'
+
+type PersistedMessageWindowState = {
+    messages: DecryptedMessage[]
+    pending: DecryptedMessage[]
+    pendingOverflowCount: number
+    pendingOverflowVisibleCount: number
+    hasMore: boolean
+    oldestPositionAt: number | null
+    oldestPositionSeq: number | null
+    warning: string | null
+    atBottom: boolean
+}
+
 const states = new Map<string, InternalState>()
 const listeners = new Map<string, Set<() => void>>()
 const pendingVisibilityCacheBySession = new Map<string, Map<string, PendingVisibilityCacheEntry>>()
@@ -52,8 +68,12 @@ const pendingVisibilityCacheBySession = new Map<string, Map<string, PendingVisib
 // notification per NOTIFY_THROTTLE_MS during streaming. This prevents
 // Windows UI jank caused by excessive React re-renders during SSE streaming.
 const NOTIFY_THROTTLE_MS = 150
+const PERSIST_THROTTLE_MS = 200
+const STORAGE_KEY_PREFIX = 'hapi:message-window:v1:'
 const pendingNotifySessionIds = new Set<string>()
+const pendingPersistSessionIds = new Set<string>()
 let notifyRafId: ReturnType<typeof requestAnimationFrame> | null = null
+let persistTimerId: ReturnType<typeof setTimeout> | null = null
 let lastNotifyAt = 0
 
 function scheduleNotify(sessionId: string): void {
@@ -90,6 +110,92 @@ function flushNotifications(): void {
     }
 }
 
+function getStorageKey(sessionId: string): string {
+    return `${STORAGE_KEY_PREFIX}${sessionId}`
+}
+
+function isSessionStorageAvailable(): boolean {
+    try {
+        return typeof sessionStorage?.getItem === 'function'
+    } catch {
+        return false
+    }
+}
+
+function toNullableNumber(value: unknown): number | null {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function shouldPersistState(state: InternalState): boolean {
+    return state.messages.length > 0
+        || state.pending.length > 0
+        || state.pendingOverflowCount > 0
+        || state.pendingOverflowVisibleCount > 0
+        || state.hasMore
+        || state.warning !== null
+}
+
+function persistState(sessionId: string, state: InternalState): void {
+    if (!isSessionStorageAvailable()) {
+        return
+    }
+    try {
+        if (!shouldPersistState(state)) {
+            sessionStorage.removeItem(getStorageKey(sessionId))
+            return
+        }
+        const persisted: PersistedMessageWindowState = {
+            messages: state.messages,
+            pending: state.pending,
+            pendingOverflowCount: state.pendingOverflowCount,
+            pendingOverflowVisibleCount: state.pendingOverflowVisibleCount,
+            hasMore: state.hasMore,
+            oldestPositionAt: state.oldestPositionAt,
+            oldestPositionSeq: state.oldestPositionSeq,
+            warning: state.warning,
+            atBottom: state.atBottom,
+        }
+        sessionStorage.setItem(getStorageKey(sessionId), JSON.stringify(persisted))
+    } catch {
+    }
+}
+
+function clearPersistedState(sessionId: string): void {
+    pendingPersistSessionIds.delete(sessionId)
+    if (!isSessionStorageAvailable()) {
+        return
+    }
+    try {
+        sessionStorage.removeItem(getStorageKey(sessionId))
+    } catch {
+    }
+}
+
+function flushPersistedStates(): void {
+    persistTimerId = null
+    const sessionIds = Array.from(pendingPersistSessionIds)
+    pendingPersistSessionIds.clear()
+    for (const sessionId of sessionIds) {
+        const state = states.get(sessionId)
+        if (!state) {
+            clearPersistedState(sessionId)
+            continue
+        }
+        persistState(sessionId, state)
+    }
+}
+
+function schedulePersist(sessionId: string): void {
+    if (!isSessionStorageAvailable()) {
+        return
+    }
+    pendingPersistSessionIds.add(sessionId)
+    if (persistTimerId !== null) {
+        return
+    }
+    persistTimerId = setTimeout(flushPersistedStates, PERSIST_THROTTLE_MS)
+}
+
 function getPendingVisibilityCache(sessionId: string): Map<string, PendingVisibilityCacheEntry> {
     const existing = pendingVisibilityCacheBySession.get(sessionId)
     if (existing) {
@@ -157,6 +263,40 @@ function createState(sessionId: string): InternalState {
         atBottom: true,
         messagesVersion: 0,
         pendingOverflowCount: 0,
+        latestGeneration: 0,
+        olderGeneration: 0,
+    }
+}
+
+function hydrateState(sessionId: string): InternalState | null {
+    if (!isSessionStorageAvailable()) {
+        return null
+    }
+    try {
+        const raw = sessionStorage.getItem(getStorageKey(sessionId))
+        if (!raw) {
+            return null
+        }
+        const parsed = JSON.parse(raw) as Partial<PersistedMessageWindowState> | null
+        if (!parsed || !Array.isArray(parsed.messages) || !Array.isArray(parsed.pending)) {
+            clearPersistedState(sessionId)
+            return null
+        }
+        const base = createState(sessionId)
+        return buildState(base, {
+            messages: parsed.messages,
+            pending: parsed.pending,
+            pendingOverflowCount: typeof parsed.pendingOverflowCount === 'number' ? parsed.pendingOverflowCount : 0,
+            pendingOverflowVisibleCount: typeof parsed.pendingOverflowVisibleCount === 'number' ? parsed.pendingOverflowVisibleCount : 0,
+            hasMore: parsed.hasMore === true,
+            oldestPositionAt: toNullableNumber(parsed.oldestPositionAt),
+            oldestPositionSeq: toNullableNumber(parsed.oldestPositionSeq),
+            warning: typeof parsed.warning === 'string' ? parsed.warning : null,
+            atBottom: parsed.atBottom !== false,
+        })
+    } catch {
+        clearPersistedState(sessionId)
+        return null
     }
 }
 
@@ -165,7 +305,7 @@ function getState(sessionId: string): InternalState {
     if (existing) {
         return existing
     }
-    const created = createState(sessionId)
+    const created = hydrateState(sessionId) ?? createState(sessionId)
     states.set(sessionId, created)
     return created
 }
@@ -185,6 +325,7 @@ function notifyImmediate(sessionId: string): void {
 
 function setState(sessionId: string, next: InternalState, immediate?: boolean): void {
     states.set(sessionId, next)
+    schedulePersist(sessionId)
     if (immediate) {
         notifyImmediate(sessionId)
     } else {
@@ -200,6 +341,48 @@ function updateState(sessionId: string, updater: (prev: InternalState) => Intern
     }
 }
 
+function beginAsyncGeneration(
+    sessionId: string,
+    kind: AsyncGenerationKind,
+    updates: Parameters<typeof buildState>[1]
+): number {
+    let generation = 0
+    updateState(sessionId, (prev) => {
+        generation = getGeneration(prev, kind) + 1
+        return setGeneration(buildState(prev, updates), kind, generation)
+    })
+    return generation
+}
+
+function getGeneration(state: InternalState, kind: AsyncGenerationKind): number {
+    return kind === 'latest' ? state.latestGeneration : state.olderGeneration
+}
+
+function setGeneration(state: InternalState, kind: AsyncGenerationKind, generation: number): InternalState {
+    return kind === 'latest'
+        ? { ...state, latestGeneration: generation }
+        : { ...state, olderGeneration: generation }
+}
+
+function isCurrentGeneration(sessionId: string, kind: AsyncGenerationKind, generation: number): boolean {
+    return getGeneration(getState(sessionId), kind) === generation
+}
+
+function updateStateForGeneration(
+    sessionId: string,
+    kind: AsyncGenerationKind,
+    generation: number,
+    updater: (prev: InternalState) => InternalState,
+    immediate?: boolean
+): void {
+    updateState(sessionId, (prev) => {
+        if (getGeneration(prev, kind) !== generation) {
+            return prev
+        }
+        return updater(prev)
+    }, immediate)
+}
+
 function deriveSeqBounds(messages: DecryptedMessage[]): { oldestSeq: number | null; newestSeq: number | null } {
     let oldest: number | null = null
     let newest: number | null = null
@@ -284,7 +467,8 @@ function sameCursor(a: MessagesResponse, b: MessagesResponse): boolean {
 async function backfillColdLoadMessages(
     api: ApiClient,
     sessionId: string,
-    first: MessagesResponse
+    first: MessagesResponse,
+    isCurrent?: () => boolean
 ): Promise<MessagesResponse> {
     let combined = first
     let regularCount = countRegularMessages(combined.messages)
@@ -295,6 +479,9 @@ async function backfillColdLoadMessages(
     // never fetched. Walk older pages until the initial window has a small root
     // conversation floor, or until history is exhausted.
     while (combined.page.hasMore && regularCount < COLD_LOAD_REGULAR_TARGET) {
+        if (isCurrent && !isCurrent()) {
+            return combined
+        }
         if (combined.page.nextBeforeSeq === null) break
 
         const older = hasV8Cursor(combined)
@@ -309,6 +496,10 @@ async function backfillColdLoadMessages(
                 limit: COLD_LOAD_BACKFILL_PAGE_SIZE
             })
 
+        if (isCurrent && !isCurrent()) {
+            return combined
+        }
+
         if (older.messages.length === 0 || sameCursor(combined, older)) {
             combined = {
                 messages: combined.messages,
@@ -530,7 +721,6 @@ export function subscribeMessageWindow(sessionId: string, listener: () => void):
         current.delete(listener)
         if (current.size === 0) {
             listeners.delete(sessionId)
-            states.delete(sessionId)
             clearPendingVisibilityCache(sessionId)
         }
     }
@@ -538,10 +728,16 @@ export function subscribeMessageWindow(sessionId: string, listener: () => void):
 
 export function clearMessageWindow(sessionId: string): void {
     clearPendingVisibilityCache(sessionId)
-    if (!states.has(sessionId)) {
+    clearPersistedState(sessionId)
+    const previous = states.get(sessionId)
+    if (!previous) {
         return
     }
-    setState(sessionId, createState(sessionId), true)
+    setState(sessionId, {
+        ...createState(sessionId),
+        latestGeneration: previous.latestGeneration + 1,
+        olderGeneration: previous.olderGeneration + 1,
+    }, true)
 }
 
 export function seedMessageWindowFromSession(fromSessionId: string, toSessionId: string): void {
@@ -563,7 +759,11 @@ export function seedMessageWindowFromSession(fromSessionId: string, toSessionId:
         isLoading: false,
         isLoadingMore: false,
     })
-    setState(toSessionId, next)
+    setState(toSessionId, {
+        ...next,
+        latestGeneration: source.latestGeneration,
+        olderGeneration: source.olderGeneration,
+    })
 }
 
 export async function fetchLatestMessages(api: ApiClient, sessionId: string): Promise<void> {
@@ -571,7 +771,7 @@ export async function fetchLatestMessages(api: ApiClient, sessionId: string): Pr
     if (initial.isLoading) {
         return
     }
-    updateState(sessionId, (prev) => buildState(prev, { isLoading: true, warning: null }))
+    const generation = beginAsyncGeneration(sessionId, 'latest', { isLoading: true, warning: null })
 
     try {
         // Always request byPosition mode (V8). If the hub is V7 it ignores byPosition and
@@ -579,8 +779,11 @@ export async function fetchLatestMessages(api: ApiClient, sessionId: string): Pr
         // to seq-cursor mode seamlessly.
         const firstResponse = await api.getMessages(sessionId, { byPosition: true, limit: PAGE_SIZE })
         const response = initial.atBottom
-            ? await backfillColdLoadMessages(api, sessionId, firstResponse)
+            ? await backfillColdLoadMessages(api, sessionId, firstResponse, () => isCurrentGeneration(sessionId, 'latest', generation))
             : firstResponse
+        if (!isCurrentGeneration(sessionId, 'latest', generation)) {
+            return
+        }
         // Derive composite cursor pair from server response. Both values come from
         // the same row on the server; we keep them paired so the next older fetch
         // doesn't mix `beforeAt` from the server with a recomputed minimum `seq`.
@@ -588,7 +791,7 @@ export async function fetchLatestMessages(api: ApiClient, sessionId: string): Pr
         const nextBeforeSeq = response.page.nextBeforeSeq ?? null
         const isV8Cursor = nextBeforeAt !== null && nextBeforeSeq !== null
 
-        updateState(sessionId, (prev) => {
+        updateStateForGeneration(sessionId, 'latest', generation, (prev) => {
             if (prev.atBottom) {
                 const merged = mergeMessages(prev.messages, [...prev.pending, ...response.messages])
                 const trimmed = trimVisible(merged, 'append')
@@ -622,8 +825,11 @@ export async function fetchLatestMessages(api: ApiClient, sessionId: string): Pr
             })
         })
     } catch (error) {
+        if (!isCurrentGeneration(sessionId, 'latest', generation)) {
+            return
+        }
         const message = error instanceof Error ? error.message : 'Failed to load messages'
-        updateState(sessionId, (prev) => buildState(prev, { isLoading: false, warning: message }))
+        updateStateForGeneration(sessionId, 'latest', generation, (prev) => buildState(prev, { isLoading: false, warning: message }))
     }
 }
 
@@ -635,7 +841,7 @@ export async function fetchOlderMessages(api: ApiClient, sessionId: string): Pro
     if (initial.oldestSeq === null) {
         return
     }
-    updateState(sessionId, (prev) => buildState(prev, { isLoadingMore: true }))
+    const generation = beginAsyncGeneration(sessionId, 'older', { isLoadingMore: true })
 
     try {
         // V8 mode: use the server-provided cursor pair as-is. Mixing `beforeAt` from
@@ -655,7 +861,7 @@ export async function fetchOlderMessages(api: ApiClient, sessionId: string): Pro
         const nextBeforeSeq = response.page.nextBeforeSeq ?? null
         const isV8Cursor = nextBeforeAt !== null && nextBeforeSeq !== null
 
-        updateState(sessionId, (prev) => {
+        updateStateForGeneration(sessionId, 'older', generation, (prev) => {
             const merged = mergeMessages(response.messages, prev.messages)
             const trimmed = trimVisible(merged, 'prepend')
             return buildState(prev, {
@@ -667,8 +873,11 @@ export async function fetchOlderMessages(api: ApiClient, sessionId: string): Pro
             })
         })
     } catch (error) {
+        if (!isCurrentGeneration(sessionId, 'older', generation)) {
+            return
+        }
         const message = error instanceof Error ? error.message : 'Failed to load messages'
-        updateState(sessionId, (prev) => buildState(prev, { isLoadingMore: false, warning: message }))
+        updateStateForGeneration(sessionId, 'older', generation, (prev) => buildState(prev, { isLoadingMore: false, warning: message }))
     }
 }