cmux NEXT webviews: icons draw on one scale (12/14/16/20), with a ratcheting icon-scale check

Merged
TE
3d ago
+308-43

Leo-ask: ask-65aae6c0e2

"there's just tons of design systems related stuff for spacing guttters icons etc whatever like we don't yet feel "designed" yet nawmean"

This PR handles the icons part of that ask. Icons are the one design-system scale with no check. The spec (design/grid.md, "Icon sizes") puts icons at 12, 14, 16 or 20 (artwork at 24 or larger), but nothing enforced it, so the webviews still drew icons at 13, 15, 10 and 11 px. Icons that should match then sit 1–2 px apart.

What changes

  • A new icon-scale check (webviews/scripts/check-icon-scale.ts, bun run check:icon-scale, with test/check-icon-scale.test.ts). It reads three ways an icon size is set: a component size={N}, a square inline <svg width height>, and a square CSS box whose selector names an svg, icon, glyph, chevron or spinner. A size under 24 that isn't 12, 14, 16 or 20 fails unless its line says icon-scale-allow: <reason> or scripts/icon-scale-baseline.tsv records it. Like the design-token ratchet, the baseline can only shrink. Dots (::before/::after), buttons, <input size>, gallery files and prototypes are skipped.
  • 20 icons move onto the scale, each to the nearest step:
    • 13 → 14: the diff viewer's base-picker search and row icons, the toolbar menu check, the jump palette search, the file header menu, and New Tab's All chats search
    • 15 → 16: the diff file icon and the model picker rail's Starred star
    • 10/11 → 12: the chevrons in Files, New Tab and the folder popover, the feature tip's close mark, the question card check, the reply image lock, the video play mark, and the subagent stepper's +/−
  • The design-token check had a bug that worked against the icon scale. check-design-tokens.ts judged every height as a control height (20/24/28/32), so a 14 or 16 px icon counted as debt and an off-scale 13 px icon looked no worse. Now an icon box's height is judged by the icon scale. Its baseline loses those false rows (about 30 entries across 13 files).
  • What I left alone, with reasons:
    • Allow comments: the composer's own 18 px glyph set (the named exception), the 10 px check inside the 12 px plan mark, the 10 px check inside the 14 px markdown checkbox, and the classic diff pill's 19 px.
    • Kept in the baseline: the Chief area (pages/chief-views), the AppKit-metric 6 px menu chevrons, the 8 px close marks in attachment chips (they sit in tight corner badges and need a visual pass first), and the remaining 18 px harness and artwork marks.

design/grid.md (leo-workspace) gets a line pointing to the check.

Risk

Low. The change is CSS and SVG size attributes on icons (+1 or +2 px each), plus a new lint and a lint fix. No logic changes. Per the cmux rule against new CI gates, check:icon-scale is a package script and is not added to check:pieces; its regression test runs with the webview tests.

Changelog

none

Observed / Not run

  • Ran: bun test test/check-icon-scale.test.ts test/design-tokens.test.ts test/check-menu-gutters.test.ts (19 pass), bun scripts/check-icon-scale.ts, bun scripts/check-design-tokens.ts (pass after --update-baseline, which only shrank rows), scripts/web-lint.sh (pass; this host skips the type-aware vp lint/vp check, so CI runs those), and prepush-gate.py (no new violations).
  • Not run: gallery captures. These are +1/+2 px icon changes.

🤖 Generated with Claude Code

Agent session: agent session

Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

Summary by cubic

Draws webview icons at one scale (12, 14, 16 or 20 px; artwork 24+) so matching marks that previously sat 1–2 px apart now align, and adds a lint that enforces the scale.

  • New check:icon-scale script fails any icon under 24 px that isn't 12, 14, 16 or 20 unless allowed inline or recorded in a baseline that only shrinks; it's not added to the CI gate, and its test runs with the webview tests.
  • Moves 20 off-scale icons (13→14, 15→16, 10/11→12) across pickers, menus, chevrons, close marks and checks; leaves the composer's 18 px glyph set and a few recorded exceptions.
  • Fixes check-design-tokens so an icon box's height is judged by the icon scale instead of the control-height scale (20/24/28/32), removing false design-token debt rows.

The feat-cmux-next merge keeps the newtab chevron on the base's 12 px size and records ChiefWorkPanel's 10 px icon in the baseline, so no delivered code sits off the scale.