feat(app): make session timelines much faster AND without flicker or scroll jumps (#32331)

packages/app/src/context/global-sync/event-reducer.test.ts

@@ -134,6 +134,26 @@ describe("applyGlobalEvent", () => {
 })
 
 describe("applyDirectoryEvent", () => {
+  test("initializes text delta accumulation from the current part text", () => {
+    const part = { ...textPart("part", "session", "message"), text: "existing" }
+    const [store, setStore] = createStore(baseState({ part: { message: [part] } }))
+
+    applyDirectoryEvent({
+      event: {
+        type: "message.part.delta",
+        properties: { messageID: "message", partID: "part", field: "text", delta: " appended" },
+      },
+      store,
+      setStore,
+      push() {},
+      directory: "/tmp",
+      loadLsp() {},
+    })
+
+    expect(store.part_text_accum_delta.part).toBe("existing appended")
+    expect((store.part.message?.[0] as { text: string }).text).toBe("existing appended")
+  })
+
   test("preserves a Home-specific retained session limit", () => {
     const [store, setStore] = createStore(
       baseState({

packages/app/src/context/global-sync/event-reducer.ts

@@ -282,7 +282,13 @@ export function applyDirectoryEvent(input: {
       if (!parts) break
       const result = Binary.search(parts, props.partID, (p) => p.id)
       if (!result.found) break
-      input.setStore("part_text_accum_delta", props.partID, (existing) => (existing ?? "") + props.delta)
+      const field = props.field as keyof (typeof parts)[number]
+      const current = parts[result.index]?.[field]
+      input.setStore(
+        "part_text_accum_delta",
+        props.partID,
+        (existing) => (existing ?? (typeof current === "string" ? current : "")) + props.delta,
+      )
       input.setStore(
         "part",
         props.messageID,

packages/app/src/context/server-sdk.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
-import { resumeStreamAfterPageShow } from "./server-sdk"
+import { coalesceServerEvents, resumeStreamAfterPageShow } from "./server-sdk"
+import type { Event } from "@opencode-ai/sdk/v2/client"
 
 describe("resumeStreamAfterPageShow", () => {
   test("restarts a stream only after a back-forward cache restore", () => {
@@ -12,3 +13,41 @@ describe("resumeStreamAfterPageShow", () => {
     expect(starts).toBe(1)
   })
 })
+
+describe("coalesceServerEvents", () => {
+  const delta = (value: string, field = "text") => ({
+    directory: "/repo",
+    payload: {
+      type: "message.part.delta",
+      properties: { messageID: "msg", partID: "part", field, delta: value },
+    } as Event,
+  })
+
+  test("merges adjacent deltas for the same field", () => {
+    const result = coalesceServerEvents([delta("hello "), delta("world")])
+
+    expect(result).toHaveLength(1)
+    expect(result[0]?.payload).toMatchObject({ properties: { delta: "hello world" } })
+  })
+
+  test("preserves event boundaries and distinct fields", () => {
+    const status = {
+      directory: "/repo",
+      payload: { type: "session.status", properties: { sessionID: "ses", status: { type: "idle" } } } as Event,
+    }
+    const result = coalesceServerEvents([delta("a"), delta("b", "metadata"), status, delta("c")])
+
+    expect(result.map((event) => event.payload.type)).toEqual([
+      "message.part.delta",
+      "message.part.delta",
+      "session.status",
+      "message.part.delta",
+    ])
+  })
+
+  test("drops stale deltas", () => {
+    const result = coalesceServerEvents([delta("stale")], new Set(["/repo:msg:part"]))
+
+    expect(result).toEqual([])
+  })
+})

packages/app/src/context/server-sdk.tsx

@@ -15,6 +15,39 @@ const isAbortError = (error: unknown) =>
   error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
 
 const isStreamClosed = (error: unknown, signal?: AbortSignal) => isAbortError(error) || signal?.aborted === true
+type QueuedServerEvent = { directory: string; payload: Event }
+
+const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
+
+export function coalesceServerEvents(events: QueuedServerEvent[], stale?: Set<string>) {
+  const output: QueuedServerEvent[] = []
+  const deltas = new Map<string, number>()
+  events.forEach((event) => {
+    if (stale && event.payload.type === "message.part.delta") {
+      const props = event.payload.properties
+      if (stale.has(deltaKey(event.directory, props.messageID, props.partID))) return
+    }
+    if (event.payload.type !== "message.part.delta") {
+      deltas.clear()
+      output.push(event)
+      return
+    }
+    const props = event.payload.properties
+    const id = `${deltaKey(event.directory, props.messageID, props.partID)}:${props.field}`
+    const index = deltas.get(id)
+    const existing = index === undefined ? undefined : output[index]
+    if (!existing || existing.payload.type !== "message.part.delta") {
+      deltas.set(id, output.length)
+      output.push({
+        directory: event.directory,
+        payload: { ...event.payload, properties: { ...props } },
+      })
+      return
+    }
+    existing.payload.properties.delta += props.delta
+  })
+  return output
+}
 
 export function resumeStreamAfterPageShow(event: PageTransitionEvent, start: () => unknown) {
   if (!event.persisted) return
@@ -45,7 +78,7 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
     [key: string]: Event
   }>()
 
-  type Queued = { directory: string; payload: Event }
+  type Queued = QueuedServerEvent
   const FLUSH_FRAME_MS = 16
   const STREAM_YIELD_MS = 8
   const RECONNECT_DELAY_MS = 250
@@ -57,8 +90,6 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
   let timer: ReturnType<typeof setTimeout> | undefined
   let last = 0
 
-  const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
-
   const key = (directory: string, payload: Event) => {
     if (payload.type === "session.status") return `session.status:${directory}:${payload.properties.sessionID}`
     if (payload.type === "lsp.updated") return `lsp.updated:${directory}`
@@ -83,14 +114,9 @@ function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerS
     staleDeltas.clear()
 
     last = Date.now()
+    const output = coalesceServerEvents(events, skip)
     batch(() => {
-      for (const event of events) {
-        if (skip && event.payload.type === "message.part.delta") {
-          const props = event.payload.properties
-          if (skip.has(deltaKey(event.directory, props.messageID, props.partID))) continue
-        }
-        emitter.emit(event.directory, event.payload)
-      }
+      output.forEach((event) => emitter.emit(event.directory, event.payload))
     })
 
     buffer.length = 0