feat(tui): wire pagination UI and Home/End jumps

Author: CasualDeveloper

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

@@ -123,6 +123,7 @@ export function Session() {
       .toSorted((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
   })
   const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
+  const paging = createMemo(() => sync.data.message_page[route.sessionID])
   const permissions = createMemo(() => {
     if (session()?.parentID) return []
     return children().flatMap((x) => sync.data.permission[x.id] ?? [])
@@ -132,6 +133,53 @@ export function Session() {
     return children().flatMap((x) => sync.data.question[x.id] ?? [])
   })
 
+  const LOAD_MORE_THRESHOLD = 5
+
+  const loadOlder = () => {
+    const page = paging()
+    if (!page?.hasOlder || page.loading || !scroll) return
+    if (scroll.scrollTop > LOAD_MORE_THRESHOLD) return
+
+    const anchor = (() => {
+      const scrollTop = scroll.scrollTop
+      const children = scroll.getChildren()
+      for (const child of children) {
+        if (!child.id) continue
+        if (child.y + child.height > scrollTop) {
+          return { id: child.id, offset: scrollTop - child.y }
+        }
+      }
+      return undefined
+    })()
+
+    const height = scroll.scrollHeight
+    const scrollTop = scroll.scrollTop
+    sync.session.loadOlder(route.sessionID).then(() => {
+      queueMicrotask(() => {
+        requestAnimationFrame(() => {
+          if (anchor) {
+            const child = scroll.getChildren().find((item) => item.id === anchor.id)
+            if (child) {
+              scroll.scrollTo(child.y + anchor.offset)
+              return
+            }
+          }
+
+          const delta = scroll.scrollHeight - height
+          if (delta > 0) scroll.scrollTo(scrollTop + delta)
+        })
+      })
+    })
+  }
+
+  const loadNewer = () => {
+    const page = paging()
+    if (!page?.hasNewer || page.loading || !scroll) return
+    const bottomDistance = scroll.scrollHeight - scroll.scrollTop - scroll.viewport.height
+    if (bottomDistance > LOAD_MORE_THRESHOLD) return
+    sync.session.loadNewer(route.sessionID)
+  }
+
   const pending = createMemo(() => {
     return messages().findLast((x) => x.role === "assistant" && !x.time.completed)?.id
   })
@@ -247,7 +295,7 @@ export function Session() {
   const findNextVisibleMessage = (direction: "next" | "prev"): string | null => {
     const children = scroll.getChildren()
     const messagesList = messages()
-    const scrollTop = scroll.y
+    const scrollTop = scroll.scrollTop
 
     // Get visible messages sorted by position, filtering for valid non-synthetic, non-ignored content
     const visibleMessages = children
@@ -285,7 +333,7 @@ export function Session() {
     }
 
     const child = scroll.getChildren().find((c) => c.id === targetID)
-    if (child) scroll.scrollBy(child.y - scroll.y - 1)
+    if (child) scroll.scrollBy(child.y - scroll.scrollTop - 1)
     dialog.clear()
   }
 
@@ -365,7 +413,7 @@ export function Session() {
               const child = scroll.getChildren().find((child) => {
                 return child.id === messageID
               })
-              if (child) scroll.scrollBy(child.y - scroll.y - 1)
+              if (child) scroll.scrollBy(child.y - scroll.scrollTop - 1)
             }}
             sessionID={route.sessionID}
             setPrompt={(promptInfo) => prompt.set(promptInfo)}
@@ -388,7 +436,7 @@ export function Session() {
               const child = scroll.getChildren().find((child) => {
                 return child.id === messageID
               })
-              if (child) scroll.scrollBy(child.y - scroll.y - 1)
+              if (child) scroll.scrollBy(child.y - scroll.scrollTop - 1)
             }}
             sessionID={route.sessionID}
           />
@@ -650,7 +698,16 @@ export function Session() {
       category: "Session",
       hidden: true,
       onSelect: (dialog) => {
-        scroll.scrollTo(0)
+        const page = paging()
+        if (page?.hasOlder && !page.loading) {
+          sync.session.jumpToOldest(route.sessionID).then(() => {
+            requestAnimationFrame(() => {
+              if (scroll) scroll.scrollTo(0)
+            })
+          })
+        } else {
+          scroll.scrollTo(0)
+        }
         dialog.clear()
       },
     },
@@ -661,7 +718,16 @@ export function Session() {
       category: "Session",
       hidden: true,
       onSelect: (dialog) => {
-        scroll.scrollTo(scroll.scrollHeight)
+        const page = paging()
+        if (page?.hasNewer && !page.loading) {
+          sync.session.jumpToLatest(route.sessionID).then(() => {
+            requestAnimationFrame(() => {
+              if (scroll) scroll.scrollTo(scroll.scrollHeight)
+            })
+          })
+        } else {
+          scroll.scrollTo(scroll.scrollHeight)
+        }
         dialog.clear()
       },
     },
@@ -691,7 +757,7 @@ export function Session() {
             const child = scroll.getChildren().find((child) => {
               return child.id === message.id
             })
-            if (child) scroll.scrollBy(child.y - scroll.y - 1)
+            if (child) scroll.scrollBy(child.y - scroll.scrollTop - 1)
             break
           }
         }
@@ -961,8 +1027,38 @@ export function Session() {
             <Show when={!sidebarVisible() || !wide()}>
               <Header />
             </Show>
+            <Show when={paging()?.loading && paging()?.loadingDirection === "older"}>
+              <box flexShrink={0} paddingLeft={1}>
+                <text fg={theme.textMuted}>Loading older messages...</text>
+              </box>
+            </Show>
+            <Show when={!paging()?.loading && paging()?.hasOlder}>
+              <box flexShrink={0} paddingLeft={1}>
+                <text fg={theme.textMuted}>(scroll up for more)</text>
+              </box>
+            </Show>
+            <Show when={paging()?.error}>
+              <box flexShrink={0} paddingLeft={1}>
+                <text fg={theme.error}>Failed to load: {paging()?.error}</text>
+                <text fg={theme.textMuted}> (scroll to retry)</text>
+              </box>
+            </Show>
             <scrollbox
               ref={(r) => (scroll = r)}
+              onMouseScroll={() => {
+                loadOlder()
+                loadNewer()
+              }}
+              onKeyDown={(e) => {
+                // Standard scroll triggers incremental load
+                if (["up", "pageup", "home"].includes(e.name)) {
+                  setTimeout(loadOlder, 0)
+                }
+                if (["down", "pagedown", "end"].includes(e.name)) {
+                  setTimeout(loadNewer, 0)
+                }
+              }}
+              viewportCulling={true}
               viewportOptions={{
                 paddingRight: showScrollbar() ? 1 : 0,
               }}
@@ -1075,6 +1171,16 @@ export function Session() {
                 )}
               </For>
             </scrollbox>
+            <Show when={paging()?.loading && paging()?.loadingDirection === "newer"}>
+              <box flexShrink={0} paddingLeft={1}>
+                <text fg={theme.textMuted}>Loading newer messages...</text>
+              </box>
+            </Show>
+            <Show when={!paging()?.loading && paging()?.hasNewer}>
+              <box flexShrink={0} paddingLeft={1}>
+                <text fg={theme.textMuted}>(scroll down for more)</text>
+              </box>
+            </Show>
             <box flexShrink={0}>
               <Show when={permissions().length > 0}>
                 <PermissionPrompt request={permissions()[0]} />