Ghost buttons: one balanced primitive for icon+label buttons (cx-s6zvc) by teamleaderleo · Pull Request #19771 · manaflow-ai/cmux

teamleaderleo · 2026-10-12T07:23:18Z

Icon+label ghost buttons now share one primitive with optical padding, so their hover pills look even and their rows read tight (cx-s6zvc, Leo's polish note).

The primitive (webviews/src/ui/ghost.css, .ui-ghost):

Optical balance: the inset before an icon is the inset after the label minus the icon's side bearing. A 14 px stroke icon's ink starts about 2 px inside its box, so at 28 px tall that's 6 px before the icon and 8 px after the label. A trailing chevron sets its own bearing.
Icon-to-label gap: 6 px.
Rows (.ui-ghost-row): 2 px apart, tighter than a button's own inset, so neighboring hover pills nearly touch.
Labels: medium weight (500), with Apple's tracking for the size (0 at 12 px).
Small size (.ui-ghost-sm): 22 px tall, 4.5/6 px insets, 4 px gap, for the composer footer.

The agent pane doesn't load ui.css, so the pane imports ghost.css on its own, and ui.css imports it for the other pages. Callers keep their own colors.

Moved onto it:

Surface	Before	After
New Tab tools (Changes, Terminal, Files, Side chat)	11 px before icon, 9 px gap, 10 px after label, weight 400	6 / 6 / 8, weight 500; Terminal's menu chevron 20 px wide instead of 28
No-agent "Integrate a harness"	same as the tools	same as the tools
Composer footer folder and branch	6 px before icon, 4 px gap, 6 px before the chevron (ink 2.5 px heavier on the left)	4.5 / 4 / 2 (ink even)
Other New Tab style's "All chats ›"	link with no padding	ghost button, row hangs 8 px so the text keeps its edge

Checked, not changed: the settings rows and the toolbars have no icon+label buttons. Their buttons are text-only (Commit, Push, settings buttons) or icon-only. op-next-motion's removal of Integrate a harness from the tools row landed during this PR; the base merge takes that.

Before and after: this PR's gallery render jobs (base vs head) show the New Tab page and agent-pane.composer-context. These are the stages the test measures.

Verification

Red, then green: test/ghost-button-balance.test.ts (Chromium, on the real gallery stages). Red on base plus the test: New Tab's ink before the icon vs. the inset after the label off by 3 px; the footer's folder vs. chevron off by 2.5 px. Green: 2 pass.
bun run check, ui-rules, gallery-coverage, composer-location-side, new-tab-no-agent, new-tab-default-agent and chat-new-worktree pass.
No new strings.

Changelog

Changed: icon and label buttons (New Tab tools, the composer's folder and branch) have even padding and sit closer together.

🤖 Generated with Claude Code

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

Summary by cubic

Fixes uneven padding on icon+label ghost buttons so hover pills look optically balanced: the inset before an icon is now the inset after the label minus the icon's side bearing, and rows of buttons sit tight together.

Refactors

Moves New Tab tools, "Integrate a harness", the composer footer's folder and branch, and the other New Tab style's "All chats ›" onto the shared .ui-ghost primitive; callers keep their own colors.
The agent pane imports ghost.css on its own since it doesn't load ui.css; ui.css imports it for other pages.
Adds a Chromium test measuring the real gallery stages: New Tab's ink imbalance dropped from 3 px to within 0.6 px, the footer's from 2.5 px.

^{Written for commit 66e5cff. Summary will update on new commits.}

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/ghost.css: the inset before an icon is the inset after the label minus the icon's side bearing (8 - 2 px at 28 px, 6 - 1.5 px at 22 px; a trailing chevron sets its own bearing), a 6 px icon gap (4 px small), rows 2 px apart, medium labels with Apple's tracking for the size. New Tab's tools and Integrate a harness, the other New Tab style's actions, and the composer footer's folder and branch buttons use it; the pane loads ghost.css on its own since it does not load ui.css. Settings rows and toolbars have no icon+label buttons (text or icon only), so they are unchanged. Red: New Tab ink-before vs after off by 3 px, footer by 2.5 px. Green: bun test test/ghost-button-balance.test.ts (Chromium, gallery stages), 2 pass. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…ghost-buttons # Conflicts: # webviews/src/agent-session/acpmux/NewTabPage.tsx # webviews/src/agent-session/acpmux/newtab/NewTabScreen.tsx

coderabbitai · 2026-10-12T07:23:28Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository: manaflow-ai/cmux/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Advanced
Run ID: 03357a3c-fc97-4229-b903-d04e84a8271f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Base's ghost buttons (#19771) restyled the New Tab tools row this branch removes: the "Integrate a harness" note keeps the ghost classes, and the ghost balance test measures the composer footer's folder button only. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-10-12T08:03:32Z

Gallery

Review in feed

1570 states changed: agent-pane.new-tab/tool-menu-open, agent-pane.new-tab/tool-menu-keyboard, agent-pane.new-tab/from-location, agent-pane.new-tab/omnibar-row-kinds, agent-pane.new-tab/switcher-off, ... · 16 broken states · 75 play checks failed

Diff page and renders (the run's gallery-pr artifact)

State	Before · after
agent-pane.new-tab/tool-menu-open (Apple System Colors Light, chromium)
agent-pane.new-tab/tool-menu-open (Apple System Colors Light, webkit)
agent-pane.new-tab/tool-menu-open (Apple System Colors, chromium)
agent-pane.new-tab/tool-menu-open (Apple System Colors, webkit)
agent-pane.new-tab/tool-menu-keyboard (Apple System Colors Light, chromium)
agent-pane.new-tab/from-location (Apple System Colors Light, chromium)

1564 more on the diff page.

Live preview (follows this branch; start it with scripts/gallery-live.sh up <branch> from an hq checkout):

agent-pane.new-tab/tool-menu-open: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/tool-menu-open
agent-pane.new-tab/tool-menu-keyboard: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/tool-menu-keyboard
agent-pane.new-tab/from-location: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/from-location
agent-pane.new-tab/omnibar-row-kinds: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/omnibar-row-kinds
agent-pane.new-tab/switcher-off: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/switcher-off
agent-pane.new-tab/typed-prompt: /wt/op-next-ghost-buttons/?entry=agent-pane.new-tab#/agent-pane.new-tab/typed-prompt
241 more on the diff page

Play checks failed (0 px anchor movement, 0 layout shift, no frame over 33 ms unless the entry gives a reason):

agent-pane.composer/attach-screenshot (Apple System Colors Light, chromium): step 2 click .acpmux-composer-plus [data-value="screenshot"]: layout shift 0.0902 (limit 0.05)
agent-pane.composer/image-attached (Apple System Colors Light, chromium): step 1 hover .acpmux-attachment-image: layout shift 0.0902 (limit 0)
agent-pane.composer/model-menu-keyboard (Apple System Colors Light, chromium): step 4 press ArrowDown: layout shift 0.0411 (limit 0.03)
agent-pane.composer/attach-screenshot (Apple System Colors, chromium): step 2 click .acpmux-composer-plus [data-value="screenshot"]: layout shift 0.0902 (limit 0.05)
agent-pane.composer/image-attached (Apple System Colors, chromium): step 1 hover .acpmux-attachment-image: layout shift 0.0902 (limit 0)
agent-pane.composer/model-menu-keyboard (Apple System Colors, chromium): step 4 press ArrowDown: layout shift 0.0411 (limit 0.03)
382 more on the diff page

401 nondeterministic states differed from a second render of the same head (a clock or fixture leak) and are not counted as changes.

_{2761 unchanged · base afeb8ac · head 66e5cff}

* test(agent-pane): the shipped page carries every stylesheet the pane imports The pane bundle drops CSS and build-agent-pane-web.sh writes the page's style from a fixed list, so ui/ghost.css (#19771), addProject.css, harnesses.css, replay.css and markdown-task-checkbox.css never reach the app. bundle.mjs --css-inputs lists the imported sheets; the test checks each one's rules are in the built index.html. Fails on the current base. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(agent-pane): ship ghost, harnesses, replay, add-project and task-checkbox styles The pane bundle drops CSS imports, so the page build concatenates sheets from a hand-kept list. Five imported sheets were missing from it, leaving New Tab's quick tools, Harnesses, Replay, Add Project and reply checkboxes unstyled in the app. Add them, and fail the build when the bundle imports a sheet the page does not contain. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * test(agent-pane): read the imported sheets without compiling the pane The style test bundled the whole pane through the React Compiler, which ran alongside the browser tests on CI and slowed them into timeouts. --css-inputs-only lists the sheets with esbuild alone in about a second. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

teamleaderleo and others added 3 commits October 12, 2026 00:16

test: icon+label ghost buttons look even and sit close (cx-s6zvc)

85c01ef

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge commit 'afeb8ac6993279311feaa8a35b49047efd66bb4a' into op-next-…

66e5cff

…ghost-buttons # Conflicts: # webviews/src/agent-session/acpmux/NewTabPage.tsx # webviews/src/agent-session/acpmux/newtab/NewTabScreen.tsx

teamleaderleo merged commit df755a9 into feat-cmux-next Oct 12, 2026
86 of 87 checks passed

teamleaderleo deleted the op-next-ghost-buttons branch October 12, 2026 07:34

teamleaderleo mentioned this pull request Oct 12, 2026

cmux-next: ship every stylesheet the agent pane imports #19801

Merged

Navigation Menu

Repository navigation

Ghost buttons: one balanced primitive for icon+label buttons (cx-s6zvc) - #19771

Ghost buttons: one balanced primitive for icon+label buttons (cx-s6zvc)#19771
teamleaderleo merged 3 commits into
feat-cmux-nextfrom
op-next-ghost-buttons

teamleaderleo commented Oct 12, 2026 •

edited by cubic-dev-ai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 12, 2026

Review skipped

Uh oh!

Uh oh!

github-actions Bot commented Oct 12, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

teamleaderleo commented Oct 12, 2026 • edited by cubic-dev-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Verification

Changelog

Summary by cubic

Uh oh!

coderabbitai Bot commented Oct 12, 2026

Review skipped

Uh oh!

Uh oh!

github-actions Bot commented Oct 12, 2026

Gallery

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

teamleaderleo commented Oct 12, 2026 •

edited by cubic-dev-ai Bot

Loading