tui: bidirectional message pagination with asymmetric windowing

Replaces the unbounded "load all messages on session sync" path with
a windowed loader that keeps memory bounded for long sessions while
still letting the user reach any message via scrolling or the
Timeline.

sync.tsx (TUI sync context):
- Initial sync now fetches the most-recent 100 messages and captures
  the `X-Next-Cursor` response header into `messageOlderCursor`.
- New helpers:
  - loadOlderMessages: fetches a 50-message page using the older
    cursor and prepends.
  - loadNewerMessages: fetches a 50-message page using the newer
    cursor and appends. Used after eviction to recover the live tail.
  - trimNewerMessages / trimOlderMessages: cap the in-memory window
    by dropping from the tail/head and recording a cursor for
    re-fetch. Eviction skips assistant messages still streaming
    (`time.completed` unset) so live output is never lost mid-turn.
  - loadAllMessages: paginate exhaustively in both directions
    (consumed by the Timeline dialog).
- Live event handling honours the eviction state:
  - `message.updated` for an ID past the windowed tail is dropped
    when `messageNewerCursor` is set; insertions for IDs already in
    the window still update normally.
  - `message.part.updated` no longer creates orphan entries for
    evicted messages.

SDK v2 client:
- SessionMessagesData and OpencodeClient.messages now accept the new
  `after` query parameter.
- openapi.json mirrors the schema change.

Author: vpetrigo

packages/opencode/src/cli/cmd/tui/context/sync.tsx

@@ -78,6 +78,18 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       }
       formatter: FormatterStatus[]
       vcs: VcsInfo | undefined
+      messageOlderCursor: {
+        [sessionID: string]: string | null
+      }
+      messageNewerCursor: {
+        [sessionID: string]: string | null
+      }
+      messageOlderLoading: {
+        [sessionID: string]: boolean
+      }
+      messageNewerLoading: {
+        [sessionID: string]: boolean
+      }
     }>({
       provider_next: {
         all: [],
@@ -105,6 +117,10 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       mcp_resource: {},
       formatter: [],
       vcs: undefined,
+      messageOlderCursor: {},
+      messageNewerCursor: {},
+      messageOlderLoading: {},
+      messageNewerLoading: {},
     })
 
     const event = useEvent()
@@ -251,19 +267,33 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         }
 
         case "message.updated": {
-          const messages = store.message[event.properties.info.sessionID]
+          const sessionID = event.properties.info.sessionID
+          const messages = store.message[sessionID]
           if (!messages) {
-            setStore("message", event.properties.info.sessionID, [event.properties.info])
+            setStore("message", sessionID, [event.properties.info])
             break
           }
           const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
           if (result.found) {
-            setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
+            setStore("message", sessionID, result.index, reconcile(event.properties.info))
             break
           }
+          // If the bottom of the window has been evicted (messageNewerCursor
+          // is set), drop messages that arrive past our visible tail. They
+          // will be loaded on demand when the user scrolls back down.
+          if (store.messageNewerCursor[sessionID]) {
+            const last = messages[messages.length - 1]
+            if (last) {
+              const incoming = event.properties.info
+              const isPastTail =
+                incoming.time.created > last.time.created ||
+                (incoming.time.created === last.time.created && incoming.id > last.id)
+              if (isPastTail) break
+            }
+          }
           setStore(
             "message",
-            event.properties.info.sessionID,
+            sessionID,
             produce((draft) => {
               draft.splice(result.index, 0, event.properties.info)
             }),
@@ -285,19 +315,30 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           break
         }
         case "message.part.updated": {
-          const parts = store.part[event.properties.part.messageID]
+          const sessionID = event.properties.part.sessionID
+          const messageID = event.properties.part.messageID
+          const parts = store.part[messageID]
+          // If the parent message isn't in our window AND the window's
+          // bottom has been evicted, drop the part - it would otherwise
+          // be orphaned in store.part with no message to attach to.
+          const inWindow = (() => {
+            const messages = store.message[sessionID]
+            if (!messages) return true
+            return Binary.search(messages, messageID, (m) => m.id).found
+          })()
           if (!parts) {
-            setStore("part", event.properties.part.messageID, [event.properties.part])
+            if (!inWindow && store.messageNewerCursor[sessionID]) break
+            setStore("part", messageID, [event.properties.part])
             break
           }
           const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
           if (result.found) {
-            setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
+            setStore("part", messageID, result.index, reconcile(event.properties.part))
             break
           }
           setStore(
             "part",
-            event.properties.part.messageID,
+            messageID,
             produce((draft) => {
               draft.splice(result.index, 0, event.properties.part)
             }),
@@ -503,10 +544,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           if (fullSyncedSessions.has(sessionID)) return
           const [session, messages, todo, diff] = await Promise.all([
             sdk.client.session.get({ sessionID }, { throwOnError: true }),
-            sdk.client.session.messages({ sessionID }),
+            sdk.client.session.messages({ sessionID, limit: INITIAL_PAGE_SIZE }),
             sdk.client.session.todo({ sessionID }),
             sdk.client.session.diff({ sessionID }),
           ])
+          const olderCursor = (messages.response?.headers.get("X-Next-Cursor") as string | null | undefined) ?? null
           setStore(
             produce((draft) => {
               const match = Binary.search(draft.session, sessionID, (s) => s.id)
@@ -520,13 +562,129 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
               }
               draft.message[sessionID] = infos
               draft.session_diff[sessionID] = diff.data ?? []
+              draft.messageOlderCursor[sessionID] = olderCursor
+              draft.messageNewerCursor[sessionID] = null
+            }),
+          )
+          if (!olderCursor) fullSyncedSessions.add(sessionID)
+        },
+        async loadOlderMessages(sessionID: string) {
+          const cursor = store.messageOlderCursor[sessionID]
+          if (!cursor || store.messageOlderLoading[sessionID]) return
+          setStore("messageOlderLoading", sessionID, true)
+          try {
+            const res = await sdk.client.session.messages({ sessionID, limit: PAGE_SIZE, before: cursor })
+            const nextCursor = (res.response?.headers.get("X-Next-Cursor") as string | null | undefined) ?? null
+            setStore(
+              produce((draft) => {
+                const existing = draft.message[sessionID] ?? []
+                const prepend: Message[] = []
+                for (const m of res.data ?? []) {
+                  draft.part[m.info.id] = m.parts
+                  prepend.push(m.info)
+                }
+                draft.message[sessionID] = [...prepend, ...existing]
+                draft.messageOlderCursor[sessionID] = nextCursor
+              }),
+            )
+            if (!nextCursor && !store.messageNewerCursor[sessionID]) fullSyncedSessions.add(sessionID)
+          } finally {
+            setStore("messageOlderLoading", sessionID, false)
+          }
+        },
+        async loadNewerMessages(sessionID: string) {
+          const cursor = store.messageNewerCursor[sessionID]
+          if (!cursor || store.messageNewerLoading[sessionID]) return
+          setStore("messageNewerLoading", sessionID, true)
+          try {
+            const res = await sdk.client.session.messages({ sessionID, limit: PAGE_SIZE, after: cursor })
+            const nextCursor = (res.response?.headers.get("X-Next-Cursor") as string | null | undefined) ?? null
+            setStore(
+              produce((draft) => {
+                const existing = draft.message[sessionID] ?? []
+                const append: Message[] = []
+                for (const m of res.data ?? []) {
+                  draft.part[m.info.id] = m.parts
+                  append.push(m.info)
+                }
+                draft.message[sessionID] = [...existing, ...append]
+                draft.messageNewerCursor[sessionID] = nextCursor
+              }),
+            )
+            if (!nextCursor && !store.messageOlderCursor[sessionID]) fullSyncedSessions.add(sessionID)
+          } finally {
+            setStore("messageNewerLoading", sessionID, false)
+          }
+        },
+        trimNewerMessages(sessionID: string, cap: number) {
+          const messages = store.message[sessionID]
+          if (!messages || messages.length <= cap) return
+          // Find the largest "safe" prefix length we can keep without
+          // discarding a message that's still in flight (assistants
+          // currently streaming) - those need to remain pinned so live
+          // events can update them.
+          let target = cap
+          while (target < messages.length) {
+            const tail = messages.slice(target)
+            const hasInflight = tail.some(
+              (m) => m.role === "assistant" && !m.time?.completed,
+            )
+            if (!hasInflight) break
+            target++
+          }
+          if (target >= messages.length) return
+          const evicted = messages.slice(target)
+          const newLast = messages[target - 1]
+          if (!newLast) return
+          const cursorVal = encodeMessageCursor({ id: newLast.id, time: newLast.time.created })
+          setStore(
+            produce((draft) => {
+              const arr = draft.message[sessionID]
+              for (const ev of evicted) delete draft.part[ev.id]
+              arr.length = target
+              draft.messageNewerCursor[sessionID] = cursorVal
             }),
           )
-          fullSyncedSessions.add(sessionID)
+          fullSyncedSessions.delete(sessionID)
+        },
+        trimOlderMessages(sessionID: string, cap: number) {
+          const messages = store.message[sessionID]
+          if (!messages || messages.length <= cap) return
+          const drop = messages.length - cap
+          const evicted = messages.slice(0, drop)
+          const newFirst = messages[drop]
+          if (!newFirst) return
+          const cursorVal = encodeMessageCursor({ id: newFirst.id, time: newFirst.time.created })
+          setStore(
+            produce((draft) => {
+              const arr = draft.message[sessionID]
+              for (const ev of evicted) delete draft.part[ev.id]
+              arr.splice(0, drop)
+              draft.messageOlderCursor[sessionID] = cursorVal
+            }),
+          )
+          fullSyncedSessions.delete(sessionID)
+        },
+        async loadAllMessages(sessionID: string) {
+          // Page through both directions until exhausted. Used by the
+          // Timeline dialog so it can render every prompt in the session.
+          while (store.messageOlderCursor[sessionID]) {
+            await result.session.loadOlderMessages(sessionID)
+          }
+          while (store.messageNewerCursor[sessionID]) {
+            await result.session.loadNewerMessages(sessionID)
+          }
         },
       },
       bootstrap,
     }
     return result
   },
 })
+
+const INITIAL_PAGE_SIZE = 100
+const PAGE_SIZE = 50
+
+function encodeMessageCursor(input: { id: string; time: number }): string {
+  return Buffer.from(JSON.stringify(input)).toString("base64url")
+}

packages/sdk/js/src/gen/types.gen.ts

@@ -2556,6 +2556,8 @@ export type SessionMessagesData = {
   query?: {
     directory?: string
     limit?: number
+    before?: string
+    after?: string
   }
   url: "/session/{id}/message"
 }

packages/sdk/js/src/v2/gen/sdk.gen.ts

@@ -3289,6 +3289,7 @@ export class Session2 extends HeyApiClient {
       workspace?: string
       limit?: number
       before?: string
+      after?: string
     },
     options?: Options<never, ThrowOnError>,
   ) {
@@ -3302,6 +3303,7 @@ export class Session2 extends HeyApiClient {
             { in: "query", key: "workspace" },
             { in: "query", key: "limit" },
             { in: "query", key: "before" },
+            { in: "query", key: "after" },
           ],
         },
       ],

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -5474,6 +5474,7 @@ export type SessionMessagesData = {
     workspace?: string
     limit?: number
     before?: string
+    after?: string
   }
   url: "/session/{sessionID}/message"
 }

packages/sdk/openapi.json

@@ -5103,6 +5103,14 @@
               "type": "string"
             },
             "required": false
+          },
+          {
+            "name": "after",
+            "in": "query",
+            "schema": {
+              "type": "string"
+            },
+            "required": false
           }
         ],
         "responses": {