[teamleaderleo]

SHOW LEO: this PR acts on Leo's design feedback, so it holds for his OK on the before/after recording before merging.

Leo asked "what happened to the dots at the bottom, why's there text". #20336 (cx-txe89) replaced the New Tab style dots with a row of text radios. The pane does not load ui.css, so the radios' .ui-sr-only never applied: each name drew a native radio circle beside it, which looked clunky and left a gap before "Composer".

This brings back the dots and keeps what #20336 got right.

Changes

• Dots: one 6px round dot per style, on a 24px hit target. The current dot is in the accent and the rest are dim on the text ink.
• Accent slide: the accent dot slides to a pick, with no slide under Reduce Motion.
• Names: a pointer over a dot shows its name above that dot. A pick shows the picked name for a moment, then fades it. The names stay as the radios' accessible names in all 21 locales.
• Steady row: the name sits outside the row's layout, and every target is a fixed 24px, so the row never moves or shifts.
• Unchanged from cmux NEXT: the New Tab page chooses its style again, with a quiet switch #20336:
  • Arrow keys move between styles.
  • Return and Escape go back to the field, and a click goes back to the field.
  • A pick saves tabs.newTabTemplate.
• Radio fix: the radio fills its target unseen, through its own rule, so no native circle draws.
• The gallery state style-switch note is updated, and its play still picks Threads by role and name.

Testing

• New browser test webviews/test/new-tab-style-dots.test.ts renders the switch with the pane's real screen.css in Chromium. It checks five round dots of 5 to 8px, no visible radio or text at rest, targets of at least 20px, and one row box for every current style.
• webviews/test/new-tab-style-switch.test.tsx covers the dot names: none at rest, the name on hover, and a pick's name that then fades. It still covers values, accessible names and focus return.
  • This test uses the manual frames from Fix flaky New Tab style switch web test #20431 for the same race. Whichever of the two lands second merges the other.
• The tests were committed first (red) and then fixed (green). Results are in the comments below. The jsdom test fails on base locally (no name element).
• bun test test/ui-rules.test.ts passes. The full bun run check fails only on the base format red in modelPickerLayout.ts (webviews: one fix for the feat-cmux-next base reds (format, layers, pane-english, races, model picker side) #20464, webviews: format modelPickerLayout.ts (react-apps-check base red) #20470).
• Captures: real cmux NEXT DEV apps (Mac fleet builds, base de5ceb78 vs head 0cc23f2f), the New Tab page's style switch at rest, with the pointer over Default, after picking Threads, then Default again. Machine name masked. On a capture slot the system pointer can't hover the page, so the pointer reaches each option through a click (a click on the current style changes nothing).

Full quality: style-switch-before-after.mp4

Changelog

• Fixed: the New Tab page's style switch is a row of small round dots again, naming a style on hover and briefly after a pick.

🤖 Generated with Claude Code

---

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

---

Summary by cubic

Restores the New Tab style switch as fixed-size round dots with names on hover or briefly after a pick, and saves the selected style as before.

• Each style gets one 6px round dot on a 24px hit target; the current dot sits in the accent and slides to a new pick (no slide under Reduce Motion).
• A pointer over a dot shows its name above it; a pick shows the picked name for a moment, then fades it. The names stay as the radios' accessible names in all locales.
• The radio fills the target unseen, so no native circle draws (the pane does not load ui.css).

^{Written for commit 5df86d0. Summary will update on new commits.}

[coderabbitai]

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: ca49f1ad-7bee-45e4-8678-d29b12c26148

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

all web/size checks green

[github-actions]

Passes: CI passes on 5df86d03c8.

CI passes on 5df86d03c8 (run 38614905116 attempt 1).

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]

CI fast guards passes on 5df86d03c8 (https://github.com/manaflow-ai/cmux/actions/runs/38614905116). This covers only the fast guards, not CI: CI's result is the ci-status check, and the CI failure attribution comment names any failing test.

[teamleaderleo]

Leo OK'd this design (via coordinator); the before/after recording follows once a capture host is up.

Red: CI on the test-only commit (a6af665) never reached the tests. bun run check stopped on base reds (summary.css raw z-index, then formatting), which #20464 is folding. Locally on base, bun test test/new-tab-style-switch.test.tsx fails: TypeError: null is not an object (evaluating 'name().hasAttribute') (no dot name element). The Chromium test new-tab-style-dots.test.ts runs only in CI, so its first run is on the fix (36fc477); it has no red run.

[github-actions]

Gallery

Review in feed

288 states changed: agent-pane.transcript/long-code, agent-pane.artifact-panel/markdown, agent-pane.transcript/shell-grouped-commands, agent-pane.subagents/open-done, agent-pane.new-tab/dictation-menu, ... · 64 play checks failed

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

State	Before · after
agent-pane.transcript/long-code (Apple System Colors, webkit)
agent-pane.artifact-panel/markdown (Apple System Colors, webkit)
agent-pane.artifact-panel/markdown (Apple System Colors Light, webkit)
agent-pane.transcript/shell-grouped-commands (Apple System Colors Light, chromium)
agent-pane.subagents/open-done (Apple System Colors Light, webkit)
agent-pane.new-tab/dictation-menu (Apple System Colors Light, chromium)

282 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.transcript/long-code: /wt/op-next-style-dots/?entry=agent-pane.transcript#/agent-pane.transcript/long-code
• agent-pane.artifact-panel/markdown: /wt/op-next-style-dots/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/markdown
• agent-pane.transcript/shell-grouped-commands: /wt/op-next-style-dots/?entry=agent-pane.transcript#/agent-pane.transcript/shell-grouped-commands
• agent-pane.subagents/open-done: /wt/op-next-style-dots/?entry=agent-pane.subagents#/agent-pane.subagents/open-done
• agent-pane.new-tab/dictation-menu: /wt/op-next-style-dots/?entry=agent-pane.new-tab#/agent-pane.new-tab/dictation-menu
• agent-pane.new-tab/dictation-show: /wt/op-next-style-dots/?entry=agent-pane.new-tab#/agent-pane.new-tab/dictation-show
• 72 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.new-tab/typed-red-duplicates (Apple System Colors Light, chromium): step 1 type "red": layout shift 0.0226 (limit 0.02)
• agent-pane.new-tab/typed-red-duplicates (Apple System Colors, chromium): step 1 type "red": layout shift 0.0226 (limit 0.02)
• agent-pane.artifact-panel/versions (Apple System Colors Light, webkit): play: waitFor did not hold within 5000 ms
• agent-pane.new-tab/typed-address (Apple System Colors, chromium): step 1 type "localhost:3000": 1 frame(s) over 33 ms (longest 61.1 ms); settle latency 315.0 ms (limit 250 ms)
• agent-pane.new-tab/typed-over-note (Apple System Colors, chromium): step 1 type "fix the flaky upload": settle latency 369.8 ms (limit 250 ms)
• 285 more on the diff page

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

_{1657 unchanged · base cc3df7e · head 5df86d0}

[github-actions]

cmux-next tour of 0cc23f2f384c6b7b2dd8767e435317528ccadfce (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.}

[cursor]

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.

[blacksmith-sh]

Found 5 test failures on Blacksmith runners:

Failures

Test	View Logs
test/composer-capture.test.ts/composer-capture.test	View Logs
test/composer-search-files-key.test.ts/composer-search-files-key.test	View Logs
test/instructions-notice.test.ts/instructions-notice.test	View Logs
test/new-tab-add-project-layer.test.ts/new-tab-add-project-layer.test	View Logs
test/theme-colors.test.ts/theme-colors.test	View Logs

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