Skip to content

cmux NEXT composer: chips press like Codex's (arrow cursor, instant press tone, no stray focus ring, 28 px folder target) - #21051

Merged
teamleaderleo merged 8 commits into
feat-cmux-nextfrom
cg-composer/click-polish
Oct 16, 2026
Merged

teamleaderleo merged 8 commits into
feat-cmux-nextfrom
cg-composer/click-polish

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Oct 15, 2026 •

Copy link
Copy Markdown
Collaborator

Problem

Clicking the composer's chips (the + menu, model, reasoning and permission chips, and the folder chip on the location strip) felt off next to Codex desktop:

  • The pointer hand showed over the chat composer's chips and Plan. Everything else in the pane, and the New Tab composer's chips, use the arrow.
  • A press eased into its tone over the 80 ms hover transition, so the button went down a beat late.
  • After typing, a mouse click left a focus ring: on the + button, and as a thick system-blue outline around the whole permission and reasoning menus. WebKit draws focus moved by script as keyboard focus once a key has been pressed.
  • The strip's folder chip took a press over only 22 px.

Change

  • The arrow cursor over the chat composer's chips and Plan.
  • :active drops the transition, so the press tone shows the moment the button goes down. Nothing moves; the open chip keeps its wash.
  • Hover washes apply only under (hover: hover) and (pointer: fine).
  • The + menu focuses its button with focusVisible: false when a mouse press opens it, so keys still reach the menu. An open menu (.ui-popup.ui-menu) never draws an outline around itself; its rows show the highlight.
  • The folder chip's press target reaches 28 px through a ::before on the button, without moving anything.

Footer layout, label step-down and gaps are untouched (composerRowFit.ts and the row geometry belong to op-next-composer-footer-cx). The effort menu's layout lines from #20787 and #20796 are untouched.

Codex reference. In Codex desktop the composer pickers are menu buttons with the arrow cursor, a tonal press, no ring after a click, and they open on the press. references/ has no frame of Codex's composer menus mid-click, so this follows the behaviour rather than a still.

Borrowed from AI Elements. The trigger keeps its wash while the menu is open (aria-expanded:bg-muted), the ring is focus-visible only, menu rows use cursor-default, and touch is gated separately (pointer-coarse). AI Elements nudges a pressed button down 1 px (active:translate-y-px) but not a menu trigger; we keep a tonal step with no shift.

Verified

  • webviews/test/composer-chip-press.test.ts (new, real pointer events, Chromium and WebKit, 760 and 300 px, on a chat's composer, a new chat's and the New Tab page's): arrow cursor on every chip; the press tone is there the moment the button goes down and the box doesn't move; no ring on the chip or its menu after a mouse click, after typing too, while keyboard focus still draws one; every chip takes a press over at least 24 px; every menu row takes a press at its gutter, its trailing edge, its top and its bottom. Commit cd44a91 adds the test alone: 32 of 50 fail on the base. With the fix: 50 pass, and still 50 after merging feat-cmux-next (its own gallery fix, 589f575, replaces webviews: gallery reads Swift backslashes in WebTheme.bootstrapScript (base red) #21020's, which this branch no longer carries).
  • Related suites pass locally per file, browser lane included (composer-row-, composer-location-, menu-focus, model-picker-, new-tab-, reasoning-own-control, access-chip-pending-warning, popup-*, newtab-quiet-focus, text-field-focus, desktop-feel, ghost-button-balance and others). row-focus (4) and no-system-blue (1) fail the same way on the base on this Mac.
  • vp check passes (types, lint, format).
  • Tagged build cg-composer at 7c220e3 (CMUX_SKIP_ZIG_BUILD=1 ./scripts/reload.sh --tag cg-composer) built and launched. In the app, debug.agent_pane click delivers native clicks to the New Tab chips (model: pointerdown, mousedown, mouseup, click; reasoning: pointerdown, click). This Mac's display is locked, so the page is hidden (visibilityState: hidden, no animation frames) and menus never finish opening or closing. Menu state, focus rings and the cursor couldn't be observed in the app; the browser tests above cover them.

Stills

WebKit on the gallery stage (the app's engine), after typing a draft. Latte and Mocha at 760 and 400 px.

Permission chip held down (the press tone is there with no ease; the menu opens on the press and is fading in):

Latte 760 Mocha 760 Latte 400 Mocha 400
Before
After

Open permission menu after a click. Before: a system-blue ring around the whole menu. After: none.

Latte 760 Mocha 760 Latte 400 Mocha 400
Before
After

Open menu with the pointer over a row (Chromium; headless WebKit's synthetic mouse moves report no movement, so Base UI ignores them and draws no row hover):

Latte 760 Mocha 760 Latte 400 Mocha 400

One-press switch (model menu open, press on the permission chip held, released). One press switches; it already did on the base.

Latte 760

Latte 400

Mocha 760

Mocha 400

🤖 Generated with Claude Code

teamleaderleo and others added 5 commits October 15, 2026 03:43
…t backslashes

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

The color transition's rgba parser (cx-3rf4z) put a regular expression with
Swift-escaped backslashes in WebTheme.bootstrapScript. The gallery's reader
refused every backslash, so each gallery page answered 500 and the browser
lanes that load it could not run.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The arrow cursor over every chip, a press tone with no ease, no focus ring
after a mouse click (on the chip or its menu, after typing too), a press
target at least 24 px tall, and full-row menu hits, in Chromium and WebKit at
760 and 300 px, on a chat's composer, a new chat's and the New Tab page's.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ress, no stray ring, 28 px folder target)

- The arrow cursor over the composer's chips and Plan, as the pane's other
  controls (macOS), not the pointer hand.
- A press shows its tone the moment the button goes down: the hover's 80 ms
  ease no longer delays it.
- Hover washes apply only under a fine pointer; an open chip keeps its wash.
- A mouse click on the + menu no longer draws a focus ring on it (WebKit drew
  its programmatic focus as keyboard focus after typing), and an open menu
  never draws a ring around itself.
- The location strip's 22 px folder chip takes a press over 28 px, the bar
  chips' height, without moving anything.

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

coderabbitai Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

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: 9a651d20-3487-497a-bfc6-a69fbfd714e6

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.

@blacksmith-sh

blacksmith-sh Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

Found 2 test failures on Blacksmith runners:

Failures

Test View Logs
test/check-system-blue.test.ts/check-system-blue.test View Logs
test/check-system-blue.test.ts/check-system-blue.test View Logs

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

@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

red: web / Web status; do not merge until green; see lane-rules
red: web / react-apps-check; do not merge until green; see lane-rules

@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Unclear: web / react-apps-check failed: no known signature; failed step: Test webviews. This PR merged before its CI finished: fix forward on main.

CI failed on ffe3110d4d (run 38865157642 attempt 1): 1 unknown.

Job Verdict Why
web / react-apps-check unknown no known signature; failed step: Test webviews

Not re-run automatically: web / react-apps-check is not a machine failure.

Written by scripts/ci/classify_failures.py (ci-failure-attribution.yml); signatures are its SIGNATURES table. A machine verdict is the runner's fault, not this PR's; yours means the failing file is one this PR changes, also red on main that main's latest full suite fails the same way, seen on other PRs that it failed on another pull request's run lately.

@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

CI fast guards failed on 3563b7e893 (https://github.com/manaflow-ai/cmux/actions/runs/38739615425). It does not block the merge; a red guard merged into main breaks it for every open PR.
The log named no failed step; see the run.

Agents: python3 scripts/ci/guard_attribution.py fix applies the mechanical fixes locally. This comment is updated in place on each push.

@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Gallery

Review in feed

236 states changed: agent-pane.artifact-panel/markdown, agent-pane.artifact-panel/closed, agent-pane.chat-width/wide-blocks, agent-pane.transcript/long-code, agent-pane.transcript/side-chat-acpmux, ... · 106 play checks failed

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

State Before · after
agent-pane.artifact-panel/markdown (Apple System Colors, webkit)
agent-pane.artifact-panel/closed (Apple System Colors, chromium)
agent-pane.chat-width/wide-blocks (Apple System Colors, chromium)
agent-pane.transcript/long-code (Apple System Colors Light, chromium)
agent-pane.transcript/long-code (Apple System Colors Light, chromium)
agent-pane.transcript/long-code (Apple System Colors, chromium)

230 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.artifact-panel/markdown: /wt/cg-composer-click-polish/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/markdown
  • agent-pane.artifact-panel/closed: /wt/cg-composer-click-polish/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/closed
  • agent-pane.chat-width/wide-blocks: /wt/cg-composer-click-polish/?entry=agent-pane.chat-width#/agent-pane.chat-width/wide-blocks
  • agent-pane.transcript/long-code: /wt/cg-composer-click-polish/?entry=agent-pane.transcript#/agent-pane.transcript/long-code
  • agent-pane.transcript/side-chat-acpmux: /wt/cg-composer-click-polish/?entry=agent-pane.transcript#/agent-pane.transcript/side-chat-acpmux
  • agent-pane.chat-width/wide: /wt/cg-composer-click-polish/?entry=agent-pane.chat-width#/agent-pane.chat-width/wide
  • 111 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.artifact-panel/markdown (Apple System Colors, webkit): play: no element for button "Open preview"
  • agent-pane.composer/popup-surface (Apple System Colors, chromium): composer controls lost the flexible gap between left and right groups
  • agent-pane.composer/popup-surface (Apple System Colors Light, webkit): shared popup is missing glass material
  • agent-pane.composer/popup-surface (Apple System Colors, webkit): shared popup is missing glass material
  • agent-pane.composer/popup-surface (Apple System Colors Light, chromium): composer controls lost the flexible gap between left and right groups
  • agent-pane.composer/popup-surface (Apple System Colors Light, webkit): shared popup is missing glass material
  • 535 more on the diff page

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

3713 unchanged · base 50af7da · head ffe3110

@teamleaderleo
teamleaderleo merged commit 335602e into feat-cmux-next Oct 16, 2026
101 of 103 checks passed
@teamleaderleo
teamleaderleo deleted the cg-composer/click-polish branch October 16, 2026 07:13
lawrencecchen added a commit that referenced this pull request Nov 1, 2026
…efore it reads it (macOS base red) (#30779)

durable_agents stalled_turn::an_adopted_turn_whose_model_went_quiet_ends_as_stalled_and_frees_its_agent
read the session row right after `host_adopted` and asserted its
turn's startedAt. The daemon logs `host_adopted` before recovery
restores the turn in flight (hub/hosts.rs recover_work; documented on
until_turn_restored, #21051-era Ctrl-B test), so on a slow host the row
still had "turn": null: "the restart made the adopted turn new", left
Null. Red on macOS: in the full suite at feat fe81446 (932b72be) and
alone 1 of 5 at e27f116 (f0673748, also failed its gate rerun).

The test now waits with until_turn_restored, as the other adoption
tests do. The assertion still catches the bug it was written for (#25033:
a restart that made the adopted turn new gives another startedAt, not
null). Test fault, not product: the order is deliberate (the status is
set after recovery, see the comment there).

Co-authored-by: cmux-bot[bot] <348531757+cmux-bot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant