[teamleaderleo]

Part of the cmux NEXT design-system pass (Leo: "there's just tons of design systems related stuff for spacing gutters icons etc whatever like we don't yet feel "designed" yet"). This is the lint piece: new code outside webviews/src/ui/ can no longer hand-roll a popup widget or write a raw design value, while today's tree passes on a shrinking allowlist.

What changes

1. hand-set-role in scripts/check-ui-review.ts (fails)

• Flags role="menu" | "menuitem" | "menuitemradio" | "menuitemcheckbox" | "listbox" | "option" | "dialog" | "tablist" | "tab" written in TSX outside src/ui/: a JSX attribute (including a conditional such as role={x ? "option" : undefined}) or a role: "option" property in a props object. querySelector('[role="menu"]') strings, other roles (group, alert, status), src/ui/, tests and gallery files are not flagged.
• Fingerprint <role>|<tag or props>|<enclosing component>, so moving lines does not churn the allowlist.
• Today's 55 occurrences (DiffToolbar, BranchBasePicker, the slash/palette/file-search listboxes, New Tab, History, Apps, the inspector tabs, and others) are in ui-review-allowlist.jsonl. The checker's own scan generated them.
• hand-set-role is the one rule in FAILING_RULES. A new occurrence fails, and so does a stale entry (the code is fixed but the entry is still listed), so the list only shrinks. The copy and row rules still only warn, as before.
• check:ui-review is already in check:pieces, so this adds no CI job or step.

2. Token literals in scripts/check-design-tokens.ts (fails, same ratchet)

The existing per-file baseline ratchet now also counts, in CSS and in TSX inline style={{}} objects:

kind	flagged	allowed
color	raw #hex, rgb/rgba/hsl/hsla/hwb/lab/lch/oklab/oklch/color()	var() and its fallback, a colour function or color-mix that takes a token, masks, --x: token definitions
spacing	margin*, inset*, top/right/bottom/left (padding/gap as before)	0/4/8/12/16/24/32 + 40/48/56 layout gaps (abs value, so -4px is fine)
radius	border-radius*	0/4/6/8/12/16, >= 999px capsules, tokens (menu 5 comes from --cmux-menu-*)
font-weight	anything else, bold, and 700	400, 600, normal, var(); 700 for monograms lives in the baseline
duration	a literal transition/animation duration other than 0	var(--cmux-motion-*)
easing	cubic-bezier(), ease, ease-in, ease-out, ease-in-out	var(--cmux-ease-out), linear

• The token file pages/shared/desktop.css and generated CSS are not scanned for the new kinds. Font sizes stay with the existing type-scale ratchet (scripts/cmux-next/check-type-scale.py), which already counts every literal font size; this PR does not duplicate it.
• Baseline: the 1,463 existing rows are byte-for-byte unchanged; 1,107 new rows record today's counts (spacing 2,220 occurrences incl. padding/gap, radius 415, font-weight 186, color 57, duration 40, easing 34). These match the static audit's totals (radius 403, font-weight 185, raw colour 87 including about 30 mask stops that are not colours).

How a migration PR shrinks the lists

After moving a surface onto ui/ and tokens, run from webviews/:

bun scripts/check-ui-review.ts --shrink-allowlist && bun scripts/check-design-tokens.ts --update-baseline

--shrink-allowlist drops only stale entries and never adds one; --update-baseline refuses to grow any count. Both checks fail until the fixed entries are removed, so no list ever grows back.

Overlap

• cmux NEXT webviews: icons draw on one scale (12/14/16/20), with a ratcheting icon-scale check #33595 (icon-scale check) also edits check-design-tokens.ts (how height is judged for icon boxes) and the baseline. The two changes are in separate functions; whichever lands second rebases and re-runs --update-baseline.
• The parallel grid migration PRs will remove rows; each one runs the command above.

Tests

test/check-ui-review.test.ts: positive (JSX, conditional, props object, every role), negative (other roles, selector strings, ui/, gallery, tests, .ts), allowlisted passes, new fails, stale entry fails until --shrink-allowlist, shrinking never adds, today's tree passes. test/design-tokens.test.ts: each kind positive and negative, var/fallback/token-composing colour, TSX inline styles, ratchet new/allowlisted/shrink.

Observed / Not run

• Ran on the fleet (cmux-ci test): both test files, bun scripts/check-ui-review.ts, bun scripts/check-design-tokens.ts, vp check --no-fmt --no-lint. 64 tests pass, both checkers pass on today's tree, no type errors.
• vp fmt --check clean. No runtime or rendering code changes, so no Performance table and no captures; no new loops, timers or observers.

Changelog

none

Agent session: agent session

🤖 Generated with Claude Code

---

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

---

Summary by cubic

Adds two failing design-system lint rules so new code outside webviews/src/ui/ can't hand-roll a popup widget or write a raw design value.

hand-set-role in check-ui-review.ts

• Flags menu, menuitem*, listbox, option, dialog, tablist, and tab roles set in TSX outside src/ui/ (tests, gallery, and ui/ files exempt).
• Today's 55 occurrences are allowlisted by file + fingerprint; a new finding or a stale entry fails the check, while the copy and row rules still warn.
• bun scripts/check-ui-review.ts --shrink-allowlist drops stale entries and never adds.

Token literals in check-design-tokens.ts

• Flags raw color literals, off-scale spacing/radius/font-weight, and non-token durations/easings in CSS and TSX inline style={{}} objects.
• The baseline was re-recorded against the current base, so it includes rows from surfaces that landed since (the next-step card, conversation margins, settings radii).
• bun scripts/check-design-tokens.ts --update-baseline re-records counts and refuses to grow any, so a count can only shrink.

^{Written for commit 0d32b47. Summary will update on new commits.}

[github-actions]

cmux status _{(one comment, edited in place; each line is updated by the job that owns it)}

Review 0d32b47: HQ feed card · gallery before/after runs · checks

App of this head (app.zip, kept 1 day)

gh workflow run reload-build.yml -R manaflow-ai/cmux --ref feat-cmux-next -f tag=pr33701 -f ref=lane/ui-system-lint -f platform=macos -f backend_mode=local

web and size checks: green

Shipped in:

• cmux NEXT nightly 1.0.0-nightly.4165528235801 (b08cc6f4d3)
• cmux NEXT nightly 1.0.0-nightly.4165709173201 (7f6fe51cc3)
• cmux NEXT nightly 1.0.0-nightly.4165880669801 (de5076464a)
• cmux NEXT nightly 1.0.0-nightly.4166004947701 (abcde7ea04)

[teamleaderleo]

Owned by an agent session · session

[blacksmith-sh]

Found 1 test failure on Blacksmith runners:

Failure

Test	View Logs
test_every_compile_job_names_its_warm_sources (main.ThisTree.test_every_compile_job _names_its_warm_sources)/ test_every_compile_job_names_its_warm_sources (main.ThisTree.test_every_compile_job _names_its_warm_sources)	View Logs

^{Need help on this PR? Tag @codesmith-bot with what you need.}

[teamleaderleo]

Review (codex, router-review): SHIP at 0bfb4d4

Reviewer: codex gpt-6.1-sol xhigh, fast tier.

Follow-ups: 3. Each lands as an issue in this repo that links this receipt; the lane that opened the PR fixes it forward.

SHIP at 0bfb4d4
Visual verdict: no images; Leo tries the build

1. [P2] [follow-up] check-design-tokens.ts:376 — Unwrap assertions and parentheses around style objects before scanning. style={{ color: "#fff", marginTop: 6 } as React.CSSProperties} produces no findings because the expression is an AsExpression. This common assertion, used with custom CSS properties, disables enforcement for the entire object. Add regression coverage.

2. [P2] [follow-up] check-design-tokens.ts:359 — Inspect logical fallback expressions alongside ??. style={{ color: customColor || "#fff", marginTop: customMargin || 6 }} produces no findings, allowing new raw values through the ratchet. Traverse the possible value branches and test these cases.

Follow-ups:

• [P2] [follow-up] Unwrap asserted and parenthesized style objects.
• [P2] [follow-up] Scan literals in logical fallback expressions.
• [P2] [follow-up] Missing after images; Leo tries the build.

[cmux-bot]

cmux-bot approves 0bfb4d4: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

[teamleaderleo]

Review (codex, router-review): SHIP at 0d32b47

Reviewer: codex gpt-6-astra high, fast tier.

Follow-ups: 3. Each lands as an issue in this repo that links this receipt; the lane that opened the PR fixes it forward.

SHIP at 0d32b47
Visual verdict: no images; Leo tries the build

1. [P2] [follow-up] check-design-tokens.ts:376: Unwrap style-object assertions before scanning. style={{ color: "#fff", padding: 6 } as React.CSSProperties} produces no findings because the expression is an AsExpression. This common syntax bypasses every inline-style rule.

2. [P2] [follow-up] check-design-tokens.ts:348: Don’t represent arbitrary interpolations as tokens. For example, background: `rgba(255, 0, 0, ${opacity})` becomes rgba(255, 0, 0, var(--expr)) and passes despite its hard-coded color. Preserve the distinction between unknown expressions and actual CSS tokens.

The CSS scan matches its baseline. Bun tests could not run because Bun and dependencies are absent.

Follow-ups:

• Unwrap asserted inline style objects and add regression coverage.
• Detect raw colors with interpolated opacity.
• [P2] [follow-up] Missing after images; Leo tries the build.

[cmux-bot]

cmux-bot approves 0d32b47: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.