feat(infinity-ui): virtualize chat-view diffs - #85
Open
shadaj wants to merge 1 commit into
Open
Conversation
Deploying infinity with
|
| Latest commit: |
f4ff633
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://daf91026.infinity-dc7.pages.dev |
| Branch Preview URL: | https://sandbox-29ea1df5-13a0-4334-8.infinity-dc7.pages.dev |
shadaj
changed the title
shadaj
added a commit
that referenced
this pull request
Jul 28, 2026
Previously every `PatchDiff` in the chat message list rendered its full DOM, so sessions with many tool-call diffs bloated the DOM and slowed scrolling. ## Virtualization (`infinity-ui`) * `MessageList` now creates Pierre's core `Virtualizer` (`@pierre/diffs`) in a lazily initialized `useRef` and attaches it to the existing scroll container via a merged callback ref (`setup()` on mount, `cleanUp()` on unmount). The inner content element is auto-discovered as the container's first child. * The instance is provided through `VirtualizerContext` (`@pierre/diffs/react`), which makes every `PatchDiff` rendered in `MessageItem` automatically upgrade to a `VirtualizedFileDiff`: off-screen diffs are swapped for fixed-height placeholders and only re-materialized when scrolled near the viewport (default 1000px overscan). * Providing the context directly (instead of wrapping in the library's `<Virtualizer>` component) keeps `MessageList`'s scroll container and its scroll-to-bottom/`onScroll` logic untouched. * The `DiffView` side panel needed no changes — `CodeView` already virtualizes internally. ## E2E coverage for diff rendering The web e2e suite never actually rendered a diff in the chat view, leaving the `PatchDiff` path (and the new virtualization wiring) untested. * `rap-test-servers`: add `start_stub_diff_server()`, a stub RAP server exposing an `edit_file` tool (with a `displayScript`) that answers with a `Diff` display segment. The patch is built by `stub_diff_patch()` exactly like sandbox-core's `build_edit_diff` (`similar` unified diff, context radius 3, path headers, trailing whitespace trimmed), so the test exercises the same wire shape as production. * `web_e2e.rs`: new `diff_tool_result_renders_diff_view` test — the mock model calls `edit_file`, and the test asserts the displayScript label renders, the patch's added/removed lines are visible in the diff viewer (Playwright pierces the shadow DOM), the raw text fallback is *not* shown, and the page matches a new golden screenshot (`chat-diff-result.png`). Since the message list now provides a `Virtualizer` context, this covers the virtualized `PatchDiff` mount end to end. Verified with `tsc -b`, prettier, clippy (incl. `e2e-web`), rustfmt, and the full Playwright web e2e suite (7/7, strict 0-pixel screenshots). Co-authored-by: Infinity 🤖 <infinity@hydro.run> PR: #85
shadaj
force-pushed
the
sandbox-29ea1df5-13a0-4334-8a33-fa14ddc4aeaa
branch
from
July 28, 2026 00:02
26c3456 to
029f6ec
Compare
Base automatically changed from
sandbox-a179c018-4d8a-40c0-9a3d-9bd0926bdeff
to
main
July 28, 2026 00:02
shadaj
force-pushed
the
sandbox-29ea1df5-13a0-4334-8a33-fa14ddc4aeaa
branch
from
July 28, 2026 00:06
029f6ec to
59fc787
Compare
shadaj
added a commit
that referenced
this pull request
Jul 28, 2026
Previously every `PatchDiff` in the chat message list rendered its full DOM, so sessions with many tool-call diffs bloated the DOM and slowed scrolling. ## Virtualization (`infinity-ui`) * `MessageList` now creates Pierre's core `Virtualizer` (`@pierre/diffs`) in a lazily initialized `useRef` and attaches it to the existing scroll container via a merged callback ref (`setup()` on mount, `cleanUp()` on unmount). The inner content element is auto-discovered as the container's first child. * The instance is provided through `VirtualizerContext` (`@pierre/diffs/react`), which makes every `PatchDiff` rendered in `MessageItem` automatically upgrade to a `VirtualizedFileDiff`: off-screen diffs are swapped for fixed-height placeholders and only re-materialized when scrolled near the viewport (default 1000px overscan). * Providing the context directly (instead of wrapping in the library's `<Virtualizer>` component) keeps `MessageList`'s scroll container and its scroll-to-bottom/`onScroll` logic untouched. * The `DiffView` side panel needed no changes — `CodeView` already virtualizes internally. ## E2E coverage for diff rendering The web e2e suite never actually rendered a diff in the chat view, leaving the `PatchDiff` path (and the new virtualization wiring) untested. * `rap-test-servers`: add `start_stub_diff_server()`, a stub RAP server exposing an `edit_file` tool (with a `displayScript`) that answers with a `Diff` display segment. The patch is built by `stub_diff_patch()` exactly like sandbox-core's `build_edit_diff` (`similar` unified diff, context radius 3, path headers, trailing whitespace trimmed), so the test exercises the same wire shape as production. * `web_e2e.rs`: new `diff_tool_result_renders_diff_view` test — the mock model calls `edit_file`, and the test asserts the displayScript label renders, the patch's added/removed lines are visible in the diff viewer (Playwright pierces the shadow DOM), the raw text fallback is *not* shown, and the page matches a new golden screenshot (`chat-diff-result.png`). Since the message list now provides a `Virtualizer` context, this covers the virtualized `PatchDiff` mount end to end. Verified with `tsc -b`, prettier, clippy (incl. `e2e-web`), rustfmt, and the full Playwright web e2e suite (7/7, strict 0-pixel screenshots). Co-authored-by: Infinity 🤖 <infinity@hydro.run> PR: #85
shadaj
added a commit
that referenced
this pull request
Jul 29, 2026
Previously every `PatchDiff` in the chat message list rendered its full DOM, so sessions with many tool-call diffs bloated the DOM and slowed scrolling. ## Virtualization (`infinity-ui`) * `MessageList` now creates Pierre's core `Virtualizer` (`@pierre/diffs`) in a lazily initialized `useRef` and attaches it to the existing scroll container via a merged callback ref (`setup()` on mount, `cleanUp()` on unmount). The inner content element is auto-discovered as the container's first child. * The instance is provided through `VirtualizerContext` (`@pierre/diffs/react`), which makes every `PatchDiff` rendered in `MessageItem` automatically upgrade to a `VirtualizedFileDiff`: off-screen diffs are swapped for fixed-height placeholders and only re-materialized when scrolled near the viewport (default 1000px overscan). * Providing the context directly (instead of wrapping in the library's `<Virtualizer>` component) keeps `MessageList`'s scroll container and its scroll-to-bottom/`onScroll` logic untouched. * The `DiffView` side panel needed no changes — `CodeView` already virtualizes internally. ## E2E coverage for diff rendering The web e2e suite never actually rendered a diff in the chat view, leaving the `PatchDiff` path (and the new virtualization wiring) untested. * `rap-test-servers`: add `start_stub_diff_server()`, a stub RAP server exposing an `edit_file` tool (with a `displayScript`) that answers with a `Diff` display segment. The patch is built by `stub_diff_patch()` exactly like sandbox-core's `build_edit_diff` (`similar` unified diff, context radius 3, path headers, trailing whitespace trimmed), so the test exercises the same wire shape as production. * `web_e2e.rs`: new `diff_tool_result_renders_diff_view` test — the mock model calls `edit_file`, and the test asserts the displayScript label renders, the patch's added/removed lines are visible in the diff viewer (Playwright pierces the shadow DOM), the raw text fallback is *not* shown, and the page matches a new golden screenshot (`chat-diff-result.png`). Since the message list now provides a `Virtualizer` context, this covers the virtualized `PatchDiff` mount end to end. Verified with `tsc -b`, prettier, clippy (incl. `e2e-web`), rustfmt, and the full Playwright web e2e suite (7/7, strict 0-pixel screenshots). Co-authored-by: Infinity 🤖 <infinity@hydro.run> PR: #85
shadaj
force-pushed
the
sandbox-29ea1df5-13a0-4334-8a33-fa14ddc4aeaa
branch
from
July 29, 2026 00:07
59fc787 to
c4110cf
Compare
Previously every `PatchDiff` in the chat message list rendered its full DOM, so sessions with many tool-call diffs bloated the DOM and slowed scrolling. ## Virtualization (`infinity-ui`) * `MessageList` now creates Pierre's core `Virtualizer` (`@pierre/diffs`) in a lazily initialized `useRef` and attaches it to the existing scroll container via a merged callback ref (`setup()` on mount, `cleanUp()` on unmount). The inner content element is auto-discovered as the container's first child. * The instance is provided through `VirtualizerContext` (`@pierre/diffs/react`), which makes every `PatchDiff` rendered in `MessageItem` automatically upgrade to a `VirtualizedFileDiff`: off-screen diffs are swapped for fixed-height placeholders and only re-materialized when scrolled near the viewport (default 1000px overscan). * Providing the context directly (instead of wrapping in the library's `<Virtualizer>` component) keeps `MessageList`'s scroll container and its scroll-to-bottom/`onScroll` logic untouched. * The `DiffView` side panel needed no changes — `CodeView` already virtualizes internally. ## E2E coverage for diff rendering The web e2e suite never actually rendered a diff in the chat view, leaving the `PatchDiff` path (and the new virtualization wiring) untested. * `rap-test-servers`: add `start_stub_diff_server()`, a stub RAP server exposing an `edit_file` tool (with a `displayScript`) that answers with a `Diff` display segment. The patch is built by `stub_diff_patch()` exactly like sandbox-core's `build_edit_diff` (`similar` unified diff, context radius 3, path headers, trailing whitespace trimmed), so the test exercises the same wire shape as production. * `web_e2e.rs`: new `diff_tool_result_renders_diff_view` test — the mock model calls `edit_file`, and the test asserts the displayScript label renders, the patch's added/removed lines are visible in the diff viewer (Playwright pierces the shadow DOM), the raw text fallback is *not* shown, and the page matches a new golden screenshot (`chat-diff-result.png`). Since the message list now provides a `Virtualizer` context, this covers the virtualized `PatchDiff` mount end to end. Verified with `tsc -b`, prettier, clippy (incl. `e2e-web`), rustfmt, and the full Playwright web e2e suite (7/7, strict 0-pixel screenshots). Co-authored-by: Infinity 🤖 <infinity@hydro.run> PR: #85
shadaj
force-pushed
the
sandbox-29ea1df5-13a0-4334-8a33-fa14ddc4aeaa
branch
from
July 29, 2026 22:21
c4110cf to
f4ff633
Compare
shadaj
marked this pull request as ready for review
July 29, 2026 22:21
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
1 participant
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.
Rendering every chat
PatchDiffin full can cause substantial DOM bloat in sessions with many or large tool-call diffs.Virtualize chat diffs
VirtualizerinMessageListwith a lazily initializeduseRef.VirtualizerContext.PatchDiffs render asVirtualizedFileDiffs: off-screen diffs become height-preserving placeholders and materialize near the viewport.onScrollbehavior by using the current scroll container rather than introducing a wrapper.DiffViewneeds no change becauseCodeViewalready virtualizes internally.Cover the diff path in web e2e
rap-test-serversstubedit_fileRAP server that returns a production-shapedDiffdisplay segment.diff_tool_result_renders_diff_view, which verifies the displayScript label, added and removed diff lines, suppression of the text fallback, and a strict golden screenshot (chat-diff-result.png).Validation
tsc -bcargo fmt --checke2e-web