[teamleaderleo]

Leo's words (2026-11-03): "there's just tons of design systems related stuff for spacing guttters icons etc whatever like we don't yet feel "designed" yet nawmean" and "i generally also have disliked how we have like no sense of system at ALL for ANYTHING like we're not even looking at some shadcn type stuff".

Aligns the artifact side panel and render card chrome with the shared NEXT grid: tokenized tabs, row heights, half-step spacing, card body insets and action gaps. Existing preview isolation and inline/side-panel behavior stay unchanged.

References: apps/codex/web/artifact-viewer.webp, apps/claude/live/transcript-markdown-rendering.png.
Gallery before/after variants: agent-pane.artifact-panel, agent-pane.inline-preview, agent-pane.render-card.

Validation: bun scripts/check-ui-review.ts --shrink-allowlist; bun scripts/check-design-tokens.ts --update-baseline; git diff --check.

agent-identity footer --repo manaflow-ai/cmux

---

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

---

Summary by cubic

Aligns the artifact side panel and render card chrome with the shared design tokens, swapping hard-coded pixel spacing for --grid-* and --ds-* references. Updates the design token baseline to match. Preview isolation and inline/side-panel behavior are unchanged.

^{Written for commit 202518c. 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 202518c: 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=pr34303 -f ref=lane/ui-system-artifacts -f platform=macos -f backend_mode=local

Gallery before/after for 202518c: 16 states rendered, 4 images differ, 1683 more touched states not rendered. Images are in the run's artifact, not on this public PR; the independent review of this head reads them on its own, so the PR needs no hand-made screenshots of these states.

gh run download 41748779626 -R manaflow-ai/cmux -n gallery-advisory-34303-202518ccc8e81467d5c2a5384e212f4d866ef87a (then read gallery-review.json)

States

State	Theme	Status	Diff	Picked by
agent-pane.access-offer/turn-no-credits	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.access-offer/turn-no-credits	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.access-offer/turn-low-credits	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.access-offer/turn-low-credits	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.access-offer/turn-no-offer	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.access-offer/turn-no-offer	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.activity-line-looks/none	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.activity-line-looks/none	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.activity-line-looks/spinner	Apple System Colors Light	changed	0.0509%	own conversation.css
agent-pane.activity-line-looks/spinner	Apple System Colors	changed	0.0476%	own conversation.css
agent-pane.activity-line-looks/kind	Apple System Colors Light	changed	0.0261%	own conversation.css
agent-pane.activity-line-looks/kind	Apple System Colors	changed	0.0231%	own conversation.css
agent-pane.activity-line-looks/aligned	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.activity-line-looks/aligned	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/single	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/single	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/single-multiedit	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/single-multiedit	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped-multiedit	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped-multiedit	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/single-long	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/single-long	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped-long	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.approval-edits/grouped-long	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.attachment-source/before	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.attachment-source/before	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.attachment-source/corner	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.attachment-source/corner	Apple System Colors	unchanged	0%	own conversation.css
agent-pane.attachment-source/small	Apple System Colors Light	unchanged	0%	own conversation.css
agent-pane.attachment-source/small	Apple System Colors	unchanged	0%	own conversation.css

_{Pick other states with a Gallery: entry.id, entry.id/variant line in the PR body.}

web and size checks: green

Shipped in:

• cmux NEXT nightly 1.0.0-nightly.4177134165301 (4a7517355a)
• cmux NEXT nightly 1.0.0-nightly.4177399658201 (443d56f95d)
• cmux NEXT nightly 1.0.0-nightly.4177479261801 (0df62819ad)

[teamleaderleo]

Review (claude opus-5.5 medium): SHIP at 2f5f54b

Visual verdict: no images attached [follow-up]. From the code, the artifact panel is pixel-identical at interface scale 1. The render card / inline preview head shrinks by 4px.

Checked: every swapped token against pages/shared/desktop.css. --grid-half-step = 2px, --ds-radius-popup = 8px, --grid-pill = 24px × scale and --ds-space-3 = 12px, so the tabs, versions, actions and codeblock inset match today at scale 1 and now follow interface scale. The baseline edits match the removed literals. .acpmux-render-card-head goes from min-height: 36px to calc(var(--grid-row) + 2 × half-step) = 32px. RenderCard and InlinePreview share that head, so the two stay matched. The compact preview card (PREVIEW_COMPACT_HEIGHT = 36) is a separate row and is untouched.

Follow-ups:

• [follow-up] webviews/src/agent-session/acpmux/model.ts:1822-1823 still estimates the render card as 36 + RENDER_FRAME_MIN_HEIGHT + 8 (comment: "its 36px head"). The head is now 32px at scale 1 and scales with interface size, so an unmeasured render row is over-estimated by 4px and shifts when it is measured. Derive the estimate from the grid row, or use 32. If the 4px shrink wasn't intended, use --grid-row-comfortable (32px) or keep 36.

[blacksmith-sh]

Found 43 test failures on Blacksmith runners:

Failures

Test	View Logs
/tmp/tmpby_xh68x/summary-missing.json (live):/summary-missing.json (live):	View Logs
/tmp/tmprehh5iy4/summary-fail.json (live):/summary-fail.json (live):	View Logs
[new_workspaces] debug.new_workspace timed 0 of 50 new workspace rows/ [new_workspaces] debug.new_workspace timed 0 of 50 new workspace rows	View Logs
[new_workspaces] the window draws no frames/[new_workspaces] the window draws no frames	View Logs
[tabs] debug.tab_switch timed 0 of 40 switches/ [tabs] debug.tab_switch timed 0 of 40 switches	View Logs
[tabs] the window draws no frames/[tabs] the window draws no frames	View Logs
main.DeveloperIdAppTests.test_download_prints_the_active_profile_only/ test_download_prints_the_active_profile_only	View Logs
convention violations found (ERROR lines above)./ convention violations found (ERROR lines above).	View Logs
stubs: /System/Library/Frameworks/Security.framework/Versions/A/Security has no stub/ Security has no stub	View Logs
stubs: CoreFoundation.tbd: install-name /System/Library/Frameworks/ CoreFoundation.framework/Versions/A/CoreFoundation, missing 1: ['_CFRetain']/ CoreFoundation, missing 1: ['_CFRetain']	View Logs

...and 33 more test failures. View all on Blacksmith

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

[teamleaderleo]

Review (claude opus-5.5 medium): SHIP at 202518c

Visual verdict: no images at this head; at scale 1 the result matches base except the render card head (below). [follow-up] attach before/after images.

Checked each token against webviews/src/pages/shared/desktop.css at this head: --grid-half-step 2px, --grid-pill 24px × interface scale, --ds-radius-popup 8px, --ds-space-3 12px. The artifact tabs, version and action gaps, and code-block insets render the same at scale 1, and the tab height now follows interface scale. The design-token baseline changes match the literals removed. No checks fail so far.

Follow-ups:

• [follow-up] .acpmux-render-card-head min-height goes from 36px to calc(var(--grid-row) + var(--grid-half-step) * 2), which is 28 + 4 = 32px, so the render card head is 4px shorter. If that's meant (the grid row height), say so in the body. If not, use * 4, or --grid-row plus --ds-space-1 * 2.

[teamleaderleo]

Review (claude opus-5.5 medium): SHIP at 202518c