fix(app): make session navigation stable and fast (#33569)

Co-authored-by: Brendan Allan <git@brendonovich.dev>

packages/app/src/pages/directory-layout.tsx

@@ -11,6 +11,7 @@ import { decode64 } from "@/utils/base64"
 import { Schema } from "effect"
 import type { ServerConnection } from "@/context/server"
 import { sessionHref } from "@/utils/session-route"
+import { useGlobal } from "@/context/global"
 
 export function DirectoryDataProvider(
   props: ParentProps<{
@@ -23,6 +24,7 @@ export function DirectoryDataProvider(
   const navigate = useNavigate()
   const params = useParams()
   const sync = useSync()
+  const global = useGlobal()
   const directory = () => (typeof props.directory === "function" ? props.directory() : props.directory)
   const slug = createMemo(() => base64Encode(directory()))
   const href = (sessionID: string) => {
@@ -52,7 +54,11 @@ export function DirectoryDataProvider(
     <DataProvider
       data={sync().data}
       directory={directory()}
-      onNavigateToSession={(sessionID: string) => navigate(href(sessionID))}
+      onNavigateToSession={(sessionID: string) => {
+        const server = props.server?.()
+        if (server && params.id) global.sessionPlacement.inherit(server, params.id, sessionID)
+        navigate(href(sessionID))
+      }}
       onSessionHref={href}
     >
       <LocalProvider>{props.children}</LocalProvider>

packages/app/src/pages/home.tsx

@@ -3,6 +3,7 @@ import {
   batch,
   createEffect,
   createMemo,
+  createRoot,
   For,
   Match,
   on,
@@ -58,6 +59,8 @@ import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { type ServerHealth } from "@/utils/server-health"
 import { Persist, persisted } from "@/utils/persist"
+import { useMarked } from "@opencode-ai/ui/context/marked"
+import { preloadMarkdown } from "@opencode-ai/ui/markdown-cache"
 
 const HOME_SESSION_LIMIT = 64
 const HOME_ROW_LAYOUT =
@@ -134,9 +137,10 @@ export function NewHome() {
   const server = useServer()
   const language = useLanguage()
   const global = useGlobal()
+  const tabs = useTabs()
   const command = useCommand()
   const notification = useNotification()
-  const tabs = useTabs()
+  const marked = useMarked()
   let focusSessionSearch: (() => void) | undefined
   const [state, setState] = createStore({
     search: "",
@@ -199,6 +203,41 @@ export function NewHome() {
   })
   const searchOpen = createMemo(() => state.searchFocused && search().length > 0)
   const groups = createMemo(() => groupSessions(records(), language))
+  const prefetched = new Set<string>()
+
+  createEffect(() => {
+    const ctx = focusedServerCtx()
+    if (!ctx) return
+    records()
+      .slice(0, 2)
+      .forEach((record) => {
+        const key = `${ServerConnection.key(focusedServer()!)}\0${record.session.id}`
+        if (prefetched.has(key)) return
+        prefetched.add(key)
+        createRoot((dispose) => {
+          try {
+            const directory = ctx.sync.createDirSyncContext(record.session.directory)
+            void directory.session
+              .sync(record.session.id)
+              .then(() => {
+                const store = ctx.sync.child(record.session.directory)[0]
+                return Promise.all(
+                  (store.message[record.session.id] ?? []).flatMap((message) =>
+                    (store.part[message.id] ?? []).flatMap((part) => {
+                      if (part.type !== "text" || !part.text) return []
+                      return preloadMarkdown(part.text, part.id, marked)
+                    }),
+                  ),
+                )
+              })
+              .catch(() => {})
+              .finally(dispose)
+          } catch {
+            dispose()
+          }
+        })
+      })
+  })
 
   function setSelection(next: HomeProjectSelection) {
     batch(() => {
@@ -304,6 +343,12 @@ export function NewHome() {
     if (!conn) return
     const directory = project?.worktree ?? session.directory
     const ctx = global.createServerCtx(conn)
+    global.sessionPlacement.set({
+      server: ServerConnection.key(conn),
+      leafID: session.id,
+      rootID: session.id,
+      directory: session.directory,
+    })
     ctx.projects.open(directory)
     ctx.projects.touch(directory)
     startTransition(() => {

packages/app/src/pages/session.tsx

@@ -287,7 +287,7 @@ export default function Page() {
       })
     }
     return key
-  }, sessionKey())
+  })
 
   let reviewFrame: number | undefined
   let todoFrame: number | undefined
@@ -693,6 +693,7 @@ export default function Page() {
   }
 
   createEffect(() => {
+    if (!sync().project) return
     const list = changesOptions()
     if (list.includes(store.changes)) return
     const next = list[0]
@@ -1128,13 +1129,34 @@ export default function Page() {
 
   let captureHistoryAnchor = () => {}
   let restoreHistoryAnchor = (_done: boolean) => {}
-  const loadOlder = () =>
-    timeline.history.loadOlder({ before: () => captureHistoryAnchor(), after: restoreHistoryAnchor })
+  let historyRequest = false
+  let historyContinuationFrame: number | undefined
+  const loadOlder = async () => {
+    if (historyRequest || historyLoading()) return
+    historyRequest = true
+    const before = timeline.messages().length
+    try {
+      await timeline.history.loadOlder({ before: () => captureHistoryAnchor(), after: restoreHistoryAnchor })
+    } finally {
+      historyRequest = false
+    }
+    if (timeline.messages().length <= before) return
+    if (!autoScroll.userScrolled() || !scroller || scroller.scrollTop >= 200 || !historyMore()) return
+    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
+    historyContinuationFrame = requestAnimationFrame(() => {
+      historyContinuationFrame = undefined
+      onHistoryScroll()
+    })
+  }
   const onHistoryScroll = () => {
-    if (!autoScroll.userScrolled() || !scroller || scroller.scrollTop >= 200) return
+    if (historyRequest || historyLoading() || !autoScroll.userScrolled() || !scroller || scroller.scrollTop >= 200) return
     void loadOlder()
   }
 
+  onCleanup(() => {
+    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
+  })
+
   fill = () => {
     if (fillFrame !== undefined) return
 

packages/app/src/pages/session/timeline/model.test.ts

@@ -15,37 +15,29 @@ describe("timeline model", () => {
     expect(selectVisibleUserMessages(users)).toBe(users)
   })
 
-  test("loads pages until a visible user turn is added", async () => {
-    let loaded = 10
-    let visible = 2
+  test("loads exactly one opaque cursor page", async () => {
     let calls = 0
     const anchors: Array<string | boolean> = []
 
     await loadOlderTimeline({
       sessionID: () => "ses_test",
-      loaded: () => loaded,
-      visible: () => visible,
       more: () => true,
       loading: () => false,
       loadMore: async () => {
         calls += 1
-        loaded += 3
-        if (calls === 2) visible += 1
       },
       before: () => anchors.push("before"),
       after: (done) => anchors.push("after", done),
     })
 
-    expect(calls).toBe(2)
-    expect(anchors).toEqual(["before", "after", false, "after", true])
+    expect(calls).toBe(1)
+    expect(anchors).toEqual(["before", "after", true])
   })
 
   test("stops when a page adds no raw messages", async () => {
     let calls = 0
     await loadOlderTimeline({
       sessionID: () => "ses_test",
-      loaded: () => 10,
-      visible: () => 2,
       more: () => true,
       loading: () => false,
       loadMore: async () => {
@@ -62,8 +54,6 @@ describe("timeline model", () => {
 
     await loadOlderTimeline({
       sessionID: () => sessionID,
-      loaded: () => 10,
-      visible: () => 2,
       more: () => true,
       loading: () => false,
       loadMore: async () => {
@@ -83,8 +73,6 @@ describe("timeline model", () => {
     await expect(
       loadOlderTimeline({
         sessionID: () => "ses_test",
-        loaded: () => 10,
-        visible: () => 2,
         more: () => true,
         loading: () => false,
         loadMore: async () => {

packages/app/src/pages/session/timeline/model.ts

@@ -74,8 +74,6 @@ export function createTimelineModel(input: {
   const loadOlder = async (options?: { before?: () => void; after?: (done: boolean) => void }) => {
     return loadOlderTimeline({
       sessionID: input.sessionID,
-      loaded: () => messages().length,
-      visible: () => visibleUserMessages().length,
       more,
       loading,
       loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
@@ -115,8 +113,6 @@ export function selectVisibleUserMessages(messages: UserMessage[], revertMessage
 
 export async function loadOlderTimeline(input: {
   sessionID: Accessor<string | undefined>
-  loaded: Accessor<number>
-  visible: Accessor<number>
   more: Accessor<boolean>
   loading: Accessor<boolean>
   loadMore: (sessionID: string) => Promise<void>
@@ -126,23 +122,11 @@ export async function loadOlderTimeline(input: {
   const id = input.sessionID()
   if (!id || !input.more() || input.loading()) return
 
-  // A history page may contain only assistant messages or user turns hidden by a revert boundary.
-  const beforeVisible = input.visible()
-  let loaded = input.loaded()
   input.before?.()
-  while (true) {
-    await input.loadMore(id).catch((error) => {
-      if (input.sessionID() === id) input.after?.(true)
-      throw error
-    })
-    if (input.sessionID() !== id) return
-
-    const nextLoaded = input.loaded()
-    const growth = input.visible() - beforeVisible
-    const raw = nextLoaded - loaded
-    loaded = nextLoaded
-    const done = growth > 0 || raw <= 0 || !input.more()
-    input.after?.(done)
-    if (done) return
-  }
+  await input.loadMore(id).catch((error) => {
+    if (input.sessionID() === id) input.after?.(true)
+    throw error
+  })
+  if (input.sessionID() !== id) return
+  input.after?.(true)
 }