feat(app): stabilize long session timelines#32331
Open
Hona wants to merge 13 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the desktop session timeline’s scroll stability and rendering performance for long, mixed-content conversations by migrating timeline virtualization to TanStack Virtual, tightening anchor/scroll preservation during history prepends, and moving streaming Markdown code highlighting off the main thread (while keeping code block DOM stable during streaming updates).
Changes:
- Replace
virtuatimeline virtualization with@tanstack/solid-virtualusing stable semantic row keys, overscan/lead tuning, and scroll anchoring for prepend/append scenarios. - Add streaming Markdown code highlighting via a dedicated Shiki worker and incremental token/DOM updates (plus updated Shiki/Pierre versions).
- Improve scrollbar thumb dragging logic to remain monotonic when content height changes; expand E2E coverage for scroll stability regressions.
Reviewed changes
Copilot reviewed 30 out of 31 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| patches/virtua@0.49.1.patch | Removes the repo’s virtua patch now that the timeline moves away from virtua. |
| patches/@TanStack%2Fsolid-virtual@3.13.28.patch | Patches Solid Virtual to stabilize updates/reconciliation behavior for virtual items. |
| packages/ui/src/pierre/virtualizer.ts | Updates Pierre virtual metrics API usage (fileGap → spacing). |
| packages/ui/src/pierre/index.ts | Adjusts diff CSS variable overrides for Pierre 1.2 behavior. |
| packages/ui/src/context/marked.tsx | Exports OpenCodeTheme for reuse (worker init), plus minor theme updates. |
| packages/ui/src/components/scroll-view.tsx | Reworks thumb-drag scrolling math to avoid inverted motion during content height changes. |
| packages/ui/src/components/scroll-view.test.ts | Adds unit tests for the new thumb-drag scroll mapping/clamping. |
| packages/ui/src/components/message-part.tsx | Introduces onContentRendered plumbing to notify parent virtualizers when async-sized content finishes rendering. |
| packages/ui/src/components/markdown.tsx | Refactors Markdown rendering into keyed blocks; adds streaming code highlighting with stable code DOM and incremental token updates. |
| packages/ui/src/components/markdown.css | Adds margin normalization for block-wrapped Markdown rendering. |
| packages/ui/src/components/markdown-worker.ts | Adds worker lifecycle + request/response management for streaming code highlighting. |
| packages/ui/src/components/markdown-worker-protocol.ts | Defines the worker protocol and stable/unstable token accumulation logic. |
| packages/ui/src/components/markdown-worker-protocol.test.ts | Adds unit tests for worker token accumulation/reset semantics. |
| packages/ui/src/components/markdown-stream.ts | Adds block projection to avoid re-parsing frozen blocks and to stream code fences more efficiently. |
| packages/ui/src/components/markdown-stream.test.ts | Extends tests for new block/projection behavior and code-fence streaming. |
| packages/ui/src/components/markdown-shiki.worker.ts | Implements the Shiki tokenizer/highlighter inside a dedicated worker. |
| packages/ui/src/components/file.tsx | Updates Pierre virtual metrics usage (fileGap → spacing). |
| packages/ui/package.json | Adds @shikijs/stream; removes virtua dependency from UI workspace. |
| packages/app/src/pages/session/message-timeline.tsx | Rebuilds timeline virtualization with TanStack Virtual; adds prepend anchor capture/restore and async content measurement integration. |
| packages/app/src/pages/session/message-timeline.data.ts | Adds a TurnGap row type and refactors spacing logic away from frame padding flags. |
| packages/app/src/pages/session.tsx | Hooks history loader into timeline anchor capture/restore; adjusts autoscroll integration (including overflowAnchor: "none"). |
| packages/app/src/context/global-sync/event-reducer.ts | Fixes streaming text delta accumulation to start from existing part content instead of only the latest delta. |
| packages/app/src/context/global-sync/event-reducer.test.ts | Adds regression test ensuring delta accumulation initializes from current part text. |
| packages/app/package.json | Adds @tanstack/solid-virtual; removes virtua from app workspace dependencies. |
| packages/app/e2e/utils/mock-server.ts | Adds message delay hooks and SSE retry: support to help reproduce timing-sensitive timeline scenarios. |
| packages/app/e2e/smoke/session-timeline.spec.ts | Adds smoke test asserting visible message position is preserved while history is prepended; verifies bottom spacer behavior. |
| packages/app/e2e/regression/session-timeline-context-resize.spec.ts | Removes logging; tweaks sampling to capture post-paint overlap behavior. |
| packages/app/e2e/regression/session-timeline-collapse-state.spec.ts | Strengthens regression assertions around diff/tool row stability; adds sticky header alignment regression test. |
| package.json | Bumps @pierre/diffs to 1.2.10, shiki to 4.2.0; adds @shikijs/stream and @tanstack/solid-virtual; removes virtua; wires patch for Solid Virtual. |
| bunfig.toml | Expands minimumReleaseAgeExcludes to include Pierre packages (diffs/theming). |
| bun.lock | Updates lockfile for dependency bumps/removals and patched dependencies list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
112
to
117
| while (true) { | ||
| await input.loadMore(id) | ||
| input.onAfterLoad?.() | ||
| if (input.sessionID() !== id) return | ||
|
|
||
| const nextLoaded = input.loaded() |
Comment on lines
+565
to
+573
| onBeforeElUpdated: (fromEl, toEl) => { | ||
| if ( | ||
| fromEl instanceof HTMLButtonElement && | ||
| toEl instanceof HTMLButtonElement && | ||
| fromEl.getAttribute("data-slot") === "markdown-copy-button" && | ||
| toEl.getAttribute("data-slot") === "markdown-copy-button" | ||
| ) { | ||
| return false | ||
| } |
Comment on lines
+595
to
+613
| const code = existing?.querySelector("code") | ||
| if (code instanceof HTMLElement) { | ||
| code.className = `language-${block.language}` | ||
| const previous = renderedCodeTokens.get(next) | ||
| const reset = !previous || previous.language !== block.language || block.stable.length < previous.stableCount | ||
| const stableCount = reset ? 0 : previous.stableCount | ||
| const tail = [...block.stable.slice(stableCount), ...block.unstable] | ||
| const prior = reset ? [] : previous.unstable | ||
| const prefix = prior.findIndex((token, index) => !sameToken(token, tail[index])) | ||
| const keep = stableCount + (prefix < 0 ? Math.min(prior.length, tail.length) : prefix) | ||
| while (code.children.length > keep) code.lastElementChild?.remove() | ||
| tail.slice(keep - stableCount).map(createTokenSpan).forEach((span) => code.appendChild(span)) | ||
| renderedCodeTokens.set(next, { | ||
| language: block.language, | ||
| stableCount: block.stable.length, | ||
| unstable: block.unstable, | ||
| }) | ||
| return | ||
| } |
…rtual-session # Conflicts: # bun.lock # package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TLDR;
Changelog
Added
Fixed
Changed
Perf
Benchmark setup used the same streaming-session workload at 30x CPU throttling unless noted. These numbers describe development profiling, not a CI performance gate.
parsePatchFiles: approximately 2.3x faster in the isolated parser benchmark. This is not a timeline FPS measurement.Verification
git diff --check