tui: scroll-driven loading + windowing in session view

Wires the new pagination helpers into the chat surface:

- maybeLoadOlderMessages / maybeLoadNewerMessages run after every
  scroll input (key bindings: page/half-page/line up & down, first
  & last; mouse wheel via onMouseScroll). They fire only when the
  viewport is within five rows of the corresponding edge and a
  cursor is available.
- After a successful prepend, the view restores the previous logical
  scroll position by adjusting for the height delta so the user does
  not jump.
- When the in-memory window grows past 200 messages and the user is
  far from the opposite edge (>4 viewports away), the matching trim
  helper evicts the now-distant side; the streaming guard inside
  trimNewerMessages prevents dropping an in-flight assistant message.
- A loader spinner is shown at the top of the scrollbox while older
  messages are being fetched, and at the bottom while newer ones are
  being recovered after eviction.

Timeline dialog kicks off `loadAllMessages` on mount so every prompt
in the session becomes selectable, even ones that were never within
the live window.

Author: vpetrigo

packages/opencode/src/cli/cmd/tui/routes/session/dialog-timeline.tsx

@@ -17,6 +17,7 @@ export function DialogTimeline(props: {
 
   onMount(() => {
     dialog.setSize("large")
+    void sync.session.loadAllMessages(props.sessionID)
   })
 
   const options = createMemo((): DialogSelectOption<string>[] => {

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -405,6 +405,61 @@ export function Session() {
     }, 50)
   }
 
+  // Pagination + asymmetric windowing
+  const WINDOW_CAP = 200
+  const NEAR_TOP_THRESHOLD = 5
+  const NEAR_BOTTOM_THRESHOLD = 5
+
+  async function maybeLoadOlderMessages() {
+    if (!scroll || scroll.isDestroyed) return
+    if (!sync.data.messageOlderCursor[route.sessionID]) return
+    if (sync.data.messageOlderLoading[route.sessionID]) return
+    if (scroll.y > NEAR_TOP_THRESHOLD) return
+    const prevScrollHeight = scroll.scrollHeight
+    const prevY = scroll.y
+    await sync.session.loadOlderMessages(route.sessionID)
+    // Trim from the bottom if the user is well above it - only safe when
+    // there's room above the live tail and no message there is still
+    // streaming. trimNewerMessages itself enforces the streaming guard.
+    const messages = sync.data.message[route.sessionID] ?? []
+    if (messages.length > WINDOW_CAP && scroll.scrollHeight - prevY > scroll.height * 4) {
+      sync.session.trimNewerMessages(route.sessionID, WINDOW_CAP)
+    }
+    setTimeout(() => {
+      if (!scroll || scroll.isDestroyed) return
+      scroll.scrollTo(prevY + (scroll.scrollHeight - prevScrollHeight))
+    }, 0)
+  }
+
+  async function maybeLoadNewerMessages() {
+    if (!scroll || scroll.isDestroyed) return
+    if (!sync.data.messageNewerCursor[route.sessionID]) return
+    if (sync.data.messageNewerLoading[route.sessionID]) return
+    const distanceFromBottom = scroll.scrollHeight - scroll.height - scroll.y
+    if (distanceFromBottom > NEAR_BOTTOM_THRESHOLD) return
+    const prevScrollHeight = scroll.scrollHeight
+    const prevY = scroll.y
+    await sync.session.loadNewerMessages(route.sessionID)
+    // Trim from the top - older messages can always be re-fetched via the
+    // older cursor, no streaming concern.
+    const messages = sync.data.message[route.sessionID] ?? []
+    if (messages.length > WINDOW_CAP && prevY > scroll.height * 4) {
+      sync.session.trimOlderMessages(route.sessionID, WINDOW_CAP)
+    }
+    setTimeout(() => {
+      if (!scroll || scroll.isDestroyed) return
+      // After append, scroll position relative to top is unchanged. After
+      // top-trim, content above shrinks - keep the same logical position.
+      const heightDelta = scroll.scrollHeight - prevScrollHeight
+      if (heightDelta < 0) scroll.scrollTo(Math.max(0, prevY + heightDelta))
+    }, 0)
+  }
+
+  function maybeLoadAdjacent() {
+    void maybeLoadOlderMessages()
+    void maybeLoadNewerMessages()
+  }
+
   const local = useLocal()
 
   function moveFirstChild() {
@@ -730,6 +785,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(-scroll.height / 2)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -740,6 +796,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(scroll.height / 2)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -750,6 +807,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(-1)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -760,6 +818,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(1)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -770,6 +829,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(-scroll.height / 4)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -780,6 +840,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollBy(scroll.height / 4)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -790,6 +851,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollTo(0)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -800,6 +862,7 @@ export function Session() {
       hidden: true,
       run: () => {
         scroll.scrollTo(scroll.scrollHeight)
+        maybeLoadAdjacent()
         dialog.clear()
       },
     },
@@ -1117,7 +1180,17 @@ export function Session() {
                 stickyStart="bottom"
                 flexGrow={1}
                 scrollAcceleration={scrollAcceleration()}
+                onMouseScroll={() => {
+                  // Defer until after the scrollbox has applied the scroll
+                  // delta so scroll.y reflects the post-event position.
+                  setTimeout(() => maybeLoadAdjacent(), 0)
+                }}
               >
+                <Show when={sync.data.messageOlderLoading[route.sessionID]}>
+                  <box paddingLeft={3} flexShrink={0}>
+                    <Spinner color={theme.textMuted}>Loading older messages…</Spinner>
+                  </box>
+                </Show>
                 <box height={1} />
                 <For each={messages()}>
                   {(message, index) => (
@@ -1214,6 +1287,11 @@ export function Session() {
                     </Switch>
                   )}
                 </For>
+                <Show when={sync.data.messageNewerLoading[route.sessionID]}>
+                  <box paddingLeft={3} flexShrink={0}>
+                    <Spinner color={theme.textMuted}>Loading newer messages…</Spinner>
+                  </box>
+                </Show>
               </scrollbox>
               <box flexShrink={0}>
                 <Show when={permissions().length > 0}>