fix(cmux-next gallery): the model picker draws with the pane's stylesheet

Merged
TE
15d ago
+32-0

Layout pass, running list (lane: layout-pass; full list in cmuxterm-hq knowledge/layout-pass.md)

  • Merged: #22785 Settings, #22825 Markdown toolbar, #22839 Chief latency bars, #22847 Harnesses, #22862 gallery Settings cascade
  • Open: #22872 code editor find pill in a narrow pane
  • This PR: the gallery draws the model picker with the pane's stylesheet
  • Next: diff toolbar covering its dropdown at 560, passwords header at 360

What

In every round-2 capture, the gallery showed the open model picker as bare browser buttons:

  • grey slabs centred in a column
  • a raw search input
  • the checkmark on its own row
  • "More models10" with the chevron wrapped

The app draws none of that. The picker is built from the pane's Tailwind utilities (flex, size-6, text-muted, border-edge). The gallery loads the pane's stylesheet, Tailwind included (agentPaneCSS in dev-server/galleryHost.ts), only for pane entries (pane: true). The model picker's entry wasn't one, and neither were three others that draw the same utilities.

  • agent-pane.model-picker, agent-pane.effort-picker, agent-pane.composer-context and agent-pane.composer-context-side are now pane entries.
  • New test/gallery-pane-tailwind.test.ts requires it. Any component entry that covers an agent-session/ component using the pane's theme utilities (text|bg|border|…-(fg|muted|dim|edge|hover), the names acpmux/tailwind.css defines in @theme) must set pane: true.

Gallery only. The app is unchanged: it always compiles the pane's Tailwind into its stylesheet (build-agent-pane-web.sh).

Test

bun test test/gallery-pane-tailwind.test.ts

  • Base (red commit): fails and lists the four entries.
  • Head: passes. After review, the check covers every @theme name in acpmux/tailwind.css (accent, base, dim, edge, fg, hover, menu, muted, and shadow-menu).

Screenshots

Gallery agent-pane.model-picker / curated at 420px, with the menu open. "Before" is the base gallery. "After" is the same frame with the pane stylesheet the gallery build already emits (assets/agent-pane.css) linked first, as pane: true loads it. The advisory capture renders base, then exits before the head stage.

BeforeAfter
Dark
Light

Observed / Not run

  • Observed: the test above, red then green. prepush-gate.py: no new violations. oxlint and vp fmt --check are clean on the new test.
  • test/gallery-coverage.test.ts lists pages/apps/CloudFeature.tsx. That's red on base and unrelated.
  • Not run locally: bun run check and a gallery build, because heavy jobs moved off huge-blue. CI runs both.

Changelog

none

Agent session: huge-blue

🤖 Generated with Claude Code