cmux-next: the agent page's diff and highlighting code loads after its first frame (cx-z9kz0)
Summary
The agent page's first script no longer carries the diff, file-tree and syntax-highlighting packages (@pierre/diffs, @pierre/trees, shiki). A New Tab page never shows them, and parsing them sat on the path to the page's first paint (cx-z9kz0). They move into chunks that load once the page has painted:
- The changes view (
DiffPanel) loads lazily. The file-type icon, the only user of@pierre/trees, moves fromchangeIcons.tsxintochanges/FileTypeIcon.tsxbesideFileHeader. - A fenced code card's highlighted body (
HighlightedCode.tsx) loads lazily. Until it has loaded, the card draws as the plain-text card it already uses for over-limit and slow highlights, so a restored chat never shows a gap. - An edit card (
EditDiff) shows its header (name, +/โ, copy) at once; only its lines (EditDiffHunks.tsx) load lazily. Edit rows open closed, and the permission panel's card keeps its header from the first frame. - Right after the page reports its first paint, it starts all three chunks, so opening a diff or a code card later waits on nothing.
The first script's source shrinks by about 25%.
Timing
Interleaved A/B on one capture mini against the merged base, cold launches: three rounds of four per side, round medians in ms from process start.
| mark | base | head |
|---|---|---|
| page phase (painted minus loaded) | 105 / 108 / 110 | 74 / 74 / 74 |
| New Tab painted (live) | 584 / 594 / 623 | 548 / 562 / 554 |
Verification
- Release compile on the exact head.
- webviews
bun run check,test/ui-rules.test.ts,test/gallery-coverage.test.ts,test/agent-pane-styles.test.ts, and the transcript, code card, tool row and permission panel tests (41 pass).
Changelog
Changed: cmux NEXT's first agent page goes live about 35 ms sooner on a cold launch.
๐ค Generated with Claude Code
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.
Summary by cubic
Moves the diff, file-tree, and syntax-highlighting packages out of the agent page's first script into lazily loaded chunks, so a New Tab page never parses packages it doesn't show. First paint is about 35 ms sooner on cold launch, and the first script shrinks by about 25%.
DiffPaneland the file-type icon (moved tochanges/FileTypeIcon.tsx) load lazily.- Highlighted code cards draw as plain text until their chunk loads; edit cards show their header immediately, with only their lines loading lazily.
- All three chunks start loading right after the page paints, so opening a diff later waits on nothing.