Virtualize session timeline rendering for long active sessions

[hsteude]

Context

Long-running active sessions can make the local Web UI tab sluggish or unresponsive over time. The local dev server and OpenCode API server respond quickly during these incidents, so the bottleneck is likely browser-side rendering/state work rather than server availability.

Recent PRs reduce streaming update cost, including PR #449 and PR #450, but our timeline architecture still differs substantially from upstream OpenCode. Upstream now renders a projected row timeline with @tanstack/solid-virtual and reuses row references, while this repo still renders loaded conversation turns as larger cards. Even with initial lazy loading, a session that stays open and active can accumulate more rendered DOM/reactive work over time.

Upstream reference files:

• /tmp/opencode-ref/packages/app/src/pages/session/timeline/message-timeline.tsx
• /tmp/opencode-ref/packages/app/src/pages/session/timeline/projection.ts
• /tmp/opencode-ref/packages/app/src/pages/session/timeline/row-reconciliation.ts
• /tmp/opencode-ref/packages/app/src/context/server-session.ts

Do not copy upstream code verbatim. Use it to guide a prefix-aware, minimal implementation in this repo.

Goal

Make long active sessions remain responsive by virtualizing timeline rendering so the browser only keeps visible conversation content plus overscan in the DOM.

Likely Files

• app-prefixable/src/components/message-timeline.tsx
• app-prefixable/src/components/message-turn.tsx
• app-prefixable/src/pages/session.tsx
• app-prefixable/package.json, if adding @tanstack/solid-virtual or another virtualization dependency

Implementation Notes

• Preserve existing visual design and current turn grouping unless a row projection is necessary.
• Prefer a minimal virtualized turn list first: virtualize rendered turns with stable keys and scroll anchoring.
• Keep auto-scroll-to-bottom behavior working during streaming.
• Keep Load earlier / historical turns behavior working or replace it with equivalent virtualized history behavior.
• Avoid re-rendering/re-measuring all old turns on text deltas in the active turn.
• Ensure expanded/collapsed turn state remains stable across virtualization mount/unmount.
• Preserve prefix-aware routing and existing base-path conventions.

Acceptance Criteria

• Long active sessions do not accumulate all rendered turns in the DOM when only the latest content is visible.
• Streaming text updates only update the active visible turn/row and do not force full timeline reconstruction.
• Auto-scroll remains correct when the user is near the bottom; user scroll position is preserved when scrolled up.
• Loading earlier turns does not jump the viewport unexpectedly.
• Expanded/collapsed state for turns is preserved when scrolling away and back.
• passes.
• passes.

Verification Ideas

• Use a session with many turns and inspect DOM node count while scrolling and streaming.
• Compare CPU behavior in Firefox during a long active session before/after.
• Confirm the local server remains responsive with while the browser is streaming.

Related

• PR fix: reduce UI load during streaming sessions #449: reduce UI load during streaming sessions
• PR perf: reduce long session streaming render cost #450: reduce long session streaming render cost