cmux-next: ship every stylesheet the agent pane imports

Merged
TE
25d ago
+95-4

The agent pane's bundle drops CSS imports. scripts/cmux-next/build-agent-pane-web.sh writes the page's one <style> from a fixed list of sheets, so a sheet that a component imports but the list leaves out ships no rules. The dev server loads imports, so these components looked right there but rendered unstyled in the app.

Five sheets were missing:

  • ui/ghost.css (#19771): New Tab's tools (Changes, Terminal, Files, Side chat) lost their gap and padding. The icons touched their labels and the row wrapped onto three lines.
  • harnesses/harnesses.css: the Harnesses page.
  • replay/replay.css: the Replay screen.
  • addProject.css: the Add Project dialog.
  • markdown-task-checkbox.css: task-list checkboxes in agent replies.

Changes

  • The page now includes all five sheets.
  • bundle.mjs --css-inputs <file> lists every stylesheet the bundle imports, read from esbuild's metafile.
  • The build fails when an imported sheet is not in the page's styles, so the next new import cannot ship unstyled.
  • New test webviews/test/agent-pane-styles.test.ts checks that the built index.html contains the rules of every imported sheet.

Verification

  • The red commit adds only the test; the fix commit follows. The test runs in react-apps-check, against the bundles that job builds.
  • bun run check passes.

No new strings.

Changelog

  • Fixed: New Tab's quick tools, the Harnesses page, Replay, Add Project and reply checkboxes render with their styles in the app again.

🤖 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

Fixes the agent pane shipping without five stylesheets its components import, which left New Tab's quick tools, the Harnesses page, Replay, Add Project, and reply checkboxes unstyled in the app while the dev server looked correct.

  • bundle.mjs --css-inputs <file> lists every CSS file the bundle imports from esbuild's metafile; --css-inputs-only writes that list without compiling the pane, so the test stays fast on CI.
  • The build fails when an imported sheet is not in the page's styles, so future imports cannot ship unstyled.
  • Adds a test that checks the built index.html contains the rules of every imported sheet.