New Tab composer: quiet focus rim and theme-surface fill by teamleaderleo · Pull Request #20561 · manaflow-ai/cmux

teamleaderleo · 2026-10-14T10:28:52Z

Lawrence's feedback on the New Tab composer, plus Leo's and cg-design-judge's follow-ups (10-14). I checked current feat-cmux-next first: both defects were still there.

Focus ("don't like this focus thing"): focus drew a second ring over the box's one-device-pixel rim. It was one CSS pixel wide (two device pixels at 2x) and 40% accent, which under the default neutral accent is a bright light outline, and it still drew under appearance.borders none. Focus now keeps the rim at its own width (--cmux-hairline, Composer and New Tab rims draw one device pixel, concentric at every scale #20481) and only lifts its tone 8% toward the text. borders: none clears the rim whether or not the box is focused. Increase Contrast keeps the shared focus ring.
Fill ("same bg kinda weird"; Leo: the composer was darker than the page): a new token, --acpmux-composer-surface (composerStates.css), derived from the theme's opaque page color with light-dark(). In a light theme it is the page lifted toward white, so the composer is lighter than the page and near white. In a dark theme it is one small step toward the text, about where it was. The New Tab box and the chat composer both paint it, solid over a wallpaper. The New Tab hover lift (from base) now lays --cmux-hover over this surface instead of repainting the old tint.
Shadow (cg-design-judge): both composers cast --elevation-1 in a light theme and no shadow in a dark one, where a drop shadow shows nothing. This uses Subtle elevation: one shared shadow scale, no big halos #20519's scale tokens and adds no new shadow.

Ring, fill and shadow only. No layout changes, and the chat composer's focus ring is unchanged. Behaviour change: the New Tab box no longer follows a custom New Tab page surface override (appearance.surfaces) for its fill; it follows the page color the theme reports.

Testing

webviews/test/newtab-quiet-focus.test.ts (Chromium, dark and light, 1x and 2x) covers:
- the focus rim's width and tone, with no accent;
- borders: none while focused;
- both composers solid and lighter than the page;
- the shadow: --elevation-1 in light, none in dark.
Each part was committed red first: the whole file on the merge base, the fill cases on ec036cd, and the shadow cases on 24fbd8f (the merged head). All green on the fix: CMUX_BROWSER_TESTS=1 bun test test/newtab-quiet-focus.test.ts.
Updated composer-rim-hairline, new-tab-field-on-art and subtle-elevation to match. Those three and new-tab-omnibar-pointer are green locally.
bun run check passed before the base merge. After it, I ran only the focused tests and the python checks (layers, type scale, system blue, text focus rings) because big-red is short on memory. CI web / react-apps-check runs the full check.
In-app captures: Mac-built fleet DEV builds of the merge base (a661eeb) and this head (cmux-ci jobs 98addb1c246aaba698068d14 and 0a5c31f99c2abd63e9cfcb3d), on capture slot cua-3, over the Starry Night wallpaper. Themes were switched live through the slot's own config. The mini's host name is masked.

New Tab composer, three light themes, unfocused and focused (left: before, right: after):

New Tab composer, default dark and three dark themes:

Chat composer, three light and four dark themes:

Focusing the New Tab composer (dark default, then Catppuccin Latte). I watched each clip: the rim stays one pixel and there is no flash.

	before	after
dark
Catppuccin Latte

Changelog

Fixed: The composer no longer draws a bright outline when focused, and in light themes it is lighter than the page instead of a gray slab.

🤖 Generated with Claude Code

…vated surface Red on base: focus draws a second, wider ring (1 CSS px, two device px at 2x) in the accent at 40%, still drawn under appearance.borders none, and the fill is the composer tint's 13% text gray over the surface. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…face Focus drew a second ring over the box's one-device-pixel rim: one CSS pixel (two device pixels at 2x) in the accent at 40%, which under the default neutral accent is a bright light outline, and it still drew under appearance.borders none. Focus now keeps the rim at its own width and only lifts its tone a little toward the text; borders none clears it. The box's fill was the composer tint (13% text) over the solid surface, a flat gray slab on a wallpaper. It is now --cmux-elevated-background, the theme surface one small step toward the text that the shared page cards and ui surface use, still solid over art. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

cursor · 2026-10-14T10:28:56Z

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

coderabbitai · 2026-10-14T10:29:02Z

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: 34104c88-0ee2-4eef-8a41-5f3c253c46f3

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.}

Review: over black the light theme's near-black rim hid any lift. The rim now composites over the elevated fill per theme, and a parse failure can no longer pass as a transparent rim. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

teamleaderleo · 2026-10-14T10:35:47Z

Bead cx-4hyqt created for this PR by the cmux coordinator.

…t themes Leo 10-14: our composer is darker than the background. Both the New Tab box and the chat composer must be a solid surface lighter than the page: the page lifted toward white in a light theme, a small step toward the text in a dark one. Red on the previous head (the box equals the page without the elevated token; the chat composer is a translucent tint). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Leo 10-14: our composer was darker than the background. One token, --acpmux-composer-surface, derived from the theme's opaque page color: in a light theme the page lifted toward white (near white, as Aside's and ChatGPT's composers are); in a dark theme one small step toward the text. The New Tab box and the chat composer both paint it, solid over a wallpaper. Shadows and layout are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-10-14T10:58:54Z

all web/size checks green

github-actions · 2026-10-14T10:59:13Z

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 e22730381a (run 38595178461 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 · 2026-10-14T10:59:28Z

CI fast guards failed on 04741da90b (https://github.com/manaflow-ai/cmux/actions/runs/38585285759). 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 · 2026-10-14T11:05:26Z

cmux-next tour of 04741da90b852e218570d354ac2aa7f0ba17eb8d (run)

The tour job failed before the tour ran (build or setup); the run log has the output.

The tour produced no media.

_{Tours are data in scripts/cmux-next/media/tours: add a step or a tour file to show your feature.}

github-actions · 2026-10-14T11:07:24Z

Gallery

Review in feed

316 states changed: agent-pane.new-tab/template-composer, agent-pane.new-tab/typed-red-duplicates, agent-pane.new-tab/typed-reddit, agent-pane.new-tab/typed-tab-match, agent-pane.new-tab/typed-over-note, ... · 71 play checks failed

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

State	Before · after
agent-pane.new-tab/template-composer (Apple System Colors Light, webkit)
agent-pane.new-tab/template-composer (Apple System Colors Light, chromium)
agent-pane.new-tab/template-composer (Apple System Colors Light, webkit)
agent-pane.new-tab/template-composer (Apple System Colors Light, chromium)
agent-pane.new-tab/typed-red-duplicates (Apple System Colors Light, webkit)
agent-pane.new-tab/typed-red-duplicates (Apple System Colors Light, chromium)

310 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/template-composer: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/template-composer
agent-pane.new-tab/typed-red-duplicates: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/typed-red-duplicates
agent-pane.new-tab/typed-reddit: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/typed-reddit
agent-pane.new-tab/typed-tab-match: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/typed-tab-match
agent-pane.new-tab/typed-over-note: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/typed-over-note
agent-pane.new-tab/no-harness-installed: /wt/op-next-theme-quiet-composer-focus/?entry=agent-pane.new-tab#/agent-pane.new-tab/no-harness-installed
97 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.new-tab/typed-red-duplicates (Apple System Colors Light, chromium): step 1 type "red": layout shift 0.0226 (limit 0.02)
agent-pane.artifact-panel/versions (Apple System Colors, webkit): play: waitFor did not hold within 5000 ms
agent-pane.artifact-panel/versions (Apple System Colors Light, webkit): play: no element for button "Open preview"
agent-pane.artifact-panel/html (Apple System Colors Light, webkit): play: no element for button "Open preview"
agent-pane.artifact-panel/versions (Apple System Colors Light, chromium): play: no element for button "Open preview"
agent-pane.new-tab/typed-red-duplicates (Apple System Colors, chromium): step 1 type "red": layout shift 0.0226 (limit 0.02)
292 more on the diff page

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

_{1523 unchanged · base 635c0b0 · head e227303}

…theme/quiet-composer-focus # Conflicts: # webviews/src/agent-session/acpmux/newtab/screen.css

cg-design-judge (10-14): a drop shadow on a dark page shows nothing. Red on the merged head: both composers cast --elevation-2 in every theme, and the New Tab hover lift from base (9a27760) paints the composer tint back over the surface at rest. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

cg-design-judge (10-14): the composer's drop shadow does nothing on a dark page. Both composers now cast --acpmux-composer-shadow: --elevation-1 in a light theme, a clear layer in a dark one (data-theme). The New Tab hover lift that landed on base now lays the native hover fill (--cmux-hover) over the composer surface, clear at rest, instead of repainting the old composer tint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- vp fmt webviews/src/pages/home-channels/DaemonGate.tsx - vp fmt webviews/src/pages/home-channels/daemonHome.ts Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38583623921

…theme/quiet-composer-focus # Conflicts: # webviews/src/pages/home-channels/daemonHome.ts

#20561 mixes the light composer surface toward a literal white on purpose (lighter than the page, from the theme's page color), which the theme-colors ratchet counts as a fresh literal color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

#20561 lifted the light composer surface toward white with a literal `white` in color-mix, which theme-colors.test.ts reports as a fresh literal color in a migrated stylesheet (red on feat-cmux-next). The white is the lift direction and the theme surface keeps 35%, so mark the line theme-fixed like the other intentional literals. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…ral white (fixes theme-colors base red from #20561) (#20688) --cmux-tone-light names the tonal scale's light end, the one place that keeps white (theme-fixed), as native ThemeTokens.opaqueOverlayFill mixes a light page toward .white. Same pixels in light themes; the dark branch is unchanged. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

…ace (#20678) * test: chat composer focus is as quiet as New Tab's; suggestions are the popup surface Red on base: the chat composer's focus draws a 1 CSS px ring at 38% accent (two device px at 2x), still under appearance.borders none, and under Increase Contrast that ring wins over the shared focus ring. The New Tab suggestions popover paints the old composer tint over the popup surface. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix: chat composer focus is quiet; New Tab suggestions are the popup surface The chat composer's focus drew a 1 CSS px ring at 38% accent over its one-device-pixel rim, still under appearance.borders none, and it overrode the shared Increase Contrast ring. Focus now keeps the rim and lifts its tone one 8% step toward the text, as the New Tab box does; borders none clears it, and Increase Contrast gets the shared ring. The New Tab suggestions popover painted the old composer tint over the popup surface. It is a floating menu, portaled and detached from the box, so it now paints --surface-popup alone, as every pane popup does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix: mark the light composer lift theme-fixed #20561 lifted the light composer surface toward white with a literal `white` in color-mix, which theme-colors.test.ts reports as a fresh literal color in a migrated stylesheet (red on feat-cmux-next). The white is the lift direction and the theme surface keeps 35%, so mark the line theme-fixed like the other intentional literals. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

* test: composer gallery plays wait out a cold Vite's first compile The first page of each composer play file waits on Vite compiling the gallery, which takes over 30 s on a busy runner: composer-search-files-key and composer-capture failed their first case on the readiness wait alone (the play passes once the frame is ready). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix: mark the composer surface's lift toward white as theme-fixed #20561 mixes the light composer surface toward a literal white on purpose (lighter than the page, from the theme's page color), which the theme-colors ratchet counts as a fresh literal color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

teamleaderleo and others added 2 commits October 14, 2026 03:27

teamleaderleo and others added 2 commits October 14, 2026 03:39

This comment has been minimized.

Sign in to view

teamleaderleo mentioned this pull request Oct 14, 2026

cmux NEXT: New Tab style switch looks as a Debug Settings choice #20598

Closed

teamleaderleo and others added 3 commits October 14, 2026 07:43

Merge commit 'a661eeb684bc801f00ef7e70956d78ef62aef1fc' into op-next-…

f5f12b5

…theme/quiet-composer-focus # Conflicts: # webviews/src/agent-session/acpmux/newtab/screen.css

teamleaderleo requested a review from lawrencecchen as a code owner October 14, 2026 14:47

teamleaderleo temporarily deployed to cmux-tui-merge-tree October 14, 2026 14:47 — with GitHub Actions Inactive

chore(next): PR autofix at d56968e

04741da

- vp fmt webviews/src/pages/home-channels/DaemonGate.tsx - vp fmt webviews/src/pages/home-channels/daemonHome.ts Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38583623921

manaflow-cmux-pr-autofix Bot temporarily deployed to cmux-tui-merge-tree October 14, 2026 14:58 Inactive

Merge commit '635c0b037dc9b11f4fd312ee167e3fc71a6bf29f' into op-next-…

e227303

…theme/quiet-composer-focus # Conflicts: # webviews/src/pages/home-channels/daemonHome.ts

teamleaderleo merged commit 56d4746 into feat-cmux-next Oct 14, 2026
44 checks passed

teamleaderleo deleted the op-next-theme/quiet-composer-focus branch October 14, 2026 16:06

teamleaderleo mentioned this pull request Oct 14, 2026

Chat composer: quiet focus rim; New Tab suggestions on the popup surface #20678

Merged

Navigation Menu

Repository navigation

New Tab composer: quiet focus rim and theme-surface fill - #20561

New Tab composer: quiet focus rim and theme-surface fill#20561
teamleaderleo merged 10 commits into
feat-cmux-nextfrom
op-next-theme/quiet-composer-focus

teamleaderleo commented Oct 14, 2026 •

edited

Loading

Uh oh!

cursor Bot commented Oct 14, 2026

Uh oh!

coderabbitai Bot commented Oct 14, 2026 •

edited

Loading

Review skipped

Uh oh!

teamleaderleo commented Oct 14, 2026

Uh oh!

This comment has been minimized.

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 14, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

teamleaderleo commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Changelog

Uh oh!

cursor Bot commented Oct 14, 2026

Bugbot needs on-demand usage enabled

Uh oh!

coderabbitai Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

teamleaderleo commented Oct 14, 2026

Uh oh!

This comment has been minimized.

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Gallery

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

teamleaderleo commented Oct 14, 2026 •

edited

Loading

coderabbitai Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading

github-actions Bot commented Oct 14, 2026 •

edited

Loading