cmux-next: the agent page's diff and highlighting code loads after its first frame (cx-z9kz0)

Merged
TE
25d ago
+313-254

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 from changeIcons.tsx into changes/FileTypeIcon.tsx beside FileHeader.
  • 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.

markbasehead
page phase (painted minus loaded)105 / 108 / 11074 / 74 / 74
New Tab painted (live)584 / 594 / 623548 / 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


View with [code]smith Autofix with [code]smith
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%.

  • DiffPanel and the file-type icon (moved to changes/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.