Skip to content

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

Closed
teamleaderleo wants to merge 37 commits into
feat-cmux-nextfrom
feat/newtab-style-variants
Closed

teamleaderleo wants to merge 37 commits into
feat-cmux-nextfrom
feat/newtab-style-variants

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Oct 14, 2026 •

Copy link
Copy Markdown
Collaborator

#20336 replaced the New Tab page's style dots with the five style names. #20473 then brought round dots back as the default. This PR keeps round dots as the default and adds every other look Leo compared as a Debug Settings choice, so a DEV or NIGHTLY build can show each one. There's no Labs row: opt-in looks go in Debug Settings until one earns a real setting (Lawrence 2026-10-14).

Hold for Leo (cg-ui-coord). Nothing changes for anyone who doesn't set the Debug Settings choice.

The looks

Debug Settings > Tabs > New tab style switch (newTab.styleSwitch, DEV and NIGHTLY only). It applies to the next New Tab page. With nothing set, the page draws round dots, exactly as on base. From automation: app call debug.tunables {"action":"set","key":"newTab.styleSwitch","value":"hint"}.

Value What it draws Light Dark
round (default, #20473) One small round dot per style, the current one in the accent. Pointing at a dot shows its name over it, and a pick shows the picked name for a moment. round light round dark
hint The chip dots from before #20127. A pick's name shows over them for about a second. hint light hint dark
dots Those chip dots, named only by tooltip. dots light dots dark
strip A 14px sketch of each style's layout, named by tooltip. strip light strip dark
names #20336's style names. names light names dark

Round dots: point at each dot, then pick.

round clip

Full quality: clip-round-light.mp4

Hint: two picks, each name showing for a moment.

hint clip

Full quality: clip-hint-light.mp4

Caveat on the captures: they come from a DEV build of an earlier head (3b533a1), when the looks were a Labs option. Two things differ from this head:

  • the round dots sat 2px lower. This head puts them at the same height as base (measured on a DEV capture of f3c3396, whose web code this head keeps: dot row centre 699.5px, the same as base);
  • the recent-chat rows had the harness mark first. That change is no longer in this PR.

Look only at the style switch row in them.

Every look is the same radio group with the same behavior:

  • the arrow keys move between styles;
  • a pick saves through newTab.setTemplate (tabs.newTabTemplate, unchanged);
  • a pointer pick hands focus back to the field;
  • a keyboard pick keeps focus on the switch.

The radio inputs fill their targets with opacity 0, so no native radio circle draws.

What changed

  • Web (webviews/src/agent-session/acpmux/newtab/): StyleSwitch.tsx draws the five looks. templates.ts has STYLE_SWITCHES and DEFAULT_STYLE_SWITCH = "round". screen.css scopes each look. The gallery has an entry per look.
  • Swift: AgentPaneTunables.newTabStyleSwitch (with the enum AgentPaneNewTabStyleSwitch) is the Debug Settings choice. AgentPaneNewTab sends its override as styleSwitch, or nothing when it isn't set. It lives with the agent pane so CmuxNextApp stays under its size cap.
  • No settings schema, strings, exports or defaults changes: the earlier Labs row (labs.newTabStyle) is gone.
  • Split out: the recent-chat rows change (harness mark first) is now a separate branch, feat/newtab-rows-harness-first, for Leo on its own.

Testing

  • Swift: NewTabStyleSwitchTests.eachDebugStyleSwitchLookReachesTheNextNewTab sets each look through the tunable store and checks the next New Tab (NewTabPage.sparePage) sends it, and that nothing set sends nothing. Green on the fleet at this head (Swift suites, light). There's no valid red for it: its test-first commit (b5fc9ab) didn't build, because of an unrelated CmuxConfigSnapshot.swift state the next base merge fixed. The web tests below did go red first.

  • Web: test/new-tab-style-switch.test.tsx covers:

    • each look's radio group and labels;
    • round as the look with nothing set;
    • round's name on pointer-over;
    • a pick saved through newTab.setTemplate;
    • keyboard focus kept after a key pick;
    • the hint name and its timeout;
    • no native radio dot.

    It went red first (a0ff10a, 0 pass) and is green now. tooltip-rules, ui-rules and bun run check pass locally (14 tests, 0 fail).

  • Release compile on the fleet at this head.

  • scripts/cmux-next/check-app-size.sh: CmuxNextApp is at its base size.

Changelog

none (Debug Settings only)

🤖 Generated with Claude Code

Agent session: cosmic-gray

teamleaderleo and others added 2 commits October 14, 2026 04:21
… pick by default

Leo 2026-10-14: #20336 replaced the template dots with the style names
without his look. The switch gets the looks to compare in one build
(Debug Settings newTab.styleSwitch, sent as styleSwitch): the dots as
before #20127, the dots that name a pick for a moment (the default), a
strip of layout glyphs, and #20336's names. Every look is one radio group
that saves through newTab.setTemplate, keeps focus on a keyboard pick and
hands it to the field after a pointer pick.

Red: bun test test/new-tab-style-switch.test.tsx fails on base (no
DEFAULT_STYLE_SWITCH, no look prop).

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

Leo 2026-10-14: #20336 replaced the template dots with the style names
without his look. The switch now draws one of four looks from one build,
picked in Debug Settings (newTab.styleSwitch, sent to the page as
styleSwitch only when set):

- hint (no knob set): one dot per style as before #20127, the name as an
  instant tooltip, and a pick's name over the dots for about a second;
- dots: the dots exactly as before #20127, named by tooltip;
- strip: a 14px sketch of each style's layout, named by tooltip;
- names: #20336's style names.

Every look keeps the radios, the newTab.setTemplate save and the focus
hand-off: a pointer pick asks for the field, a keyboard pick keeps focus
on the switch. A pointer press now marks only the change it causes, so an
arrow key right after a click keeps focus too.

Green: bun test test/new-tab-style-switch.test.tsx (6 pass).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo teamleaderleo added the hold cmux-next batch queue: keep this PR out of the batch (docs/ci/cmux-next-batch.md) label Oct 14, 2026
@coderabbitai

coderabbitai Bot commented Oct 14, 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: 2594fc6f-cc2a-48c6-a084-dbc8740855f5

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.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

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

@github-actions

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Not verified: macOS jobs did not run: compile and app tests were skipped on 17a5dc3192; ci-status is green without them.

CI passes on 17a5dc3192 (run 38702580448 attempt 1).
macOS jobs did not run: compile and app tests were skipped: Fast static checks skipped (the macos job needs both to succeed). Re-run CI once they pass, before merging.

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 14, 2026 •

Copy link
Copy Markdown
Contributor

CI fast guards passes on 17a5dc3192 (https://github.com/manaflow-ai/cmux/actions/runs/38702580448). 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.

@github-actions

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Gallery

Review in feed

103 states changed: agent-pane.transcript/long-code, agent-pane.artifact-panel/html, agent-pane.artifact-panel/markdown, agent-pane.artifact-panel/versions, agent-pane.composer-turn-cycle/cycle, ... · 21 new states · 53 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.transcript/long-code (Apple System Colors, chromium)
agent-pane.artifact-panel/html (Apple System Colors, webkit)
agent-pane.transcript/long-code (Apple System Colors Light, chromium)
agent-pane.artifact-panel/markdown (Apple System Colors Light, webkit)
agent-pane.artifact-panel/versions (Apple System Colors Light, webkit)

97 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/feat-newtab-style-variants/?entry=agent-pane.transcript#/agent-pane.transcript/long-code
  • agent-pane.artifact-panel/html: /wt/feat-newtab-style-variants/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/html
  • agent-pane.artifact-panel/markdown: /wt/feat-newtab-style-variants/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/markdown
  • agent-pane.artifact-panel/versions: /wt/feat-newtab-style-variants/?entry=agent-pane.artifact-panel#/agent-pane.artifact-panel/versions
  • agent-pane.composer-turn-cycle/cycle: /wt/feat-newtab-style-variants/?entry=agent-pane.composer-turn-cycle#/agent-pane.composer-turn-cycle/cycle
  • agent-pane.transcript/archive-chat-key: /wt/feat-newtab-style-variants/?entry=agent-pane.transcript#/agent-pane.transcript/archive-chat-key
  • 59 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/html (Apple System Colors, webkit): play: no element for button "Open preview"
  • agent-pane.artifact-panel/markdown (Apple System Colors Light, webkit): play: no element for button "Open preview"
  • agent-pane.artifact-panel/versions (Apple System Colors Light, webkit): play: no element for button "Open preview"
  • agent-pane.artifact-panel/versions (Apple System Colors Light, webkit): play: no element for button "Open preview"
  • agent-pane.artifact-panel/markdown (Apple System Colors Light, chromium): play: no element for button "Open preview"
  • agent-pane.artifact-panel/versions (Apple System Colors Light, chromium): play: no element for button "Open preview"
  • 279 more on the diff page

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

2071 unchanged · base 0664bd9 · head 17a5dc3

@blacksmith-sh

This comment has been minimized.

The agent pane does not load ui.css, so .ui-sr-only did nothing there and
the native radio circles drew over the switch (in #20336 too, over the
names). The switch hides its own radios, still focusable for keys and
VoiceOver.

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

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

cmux-next tour of 34dbfaf519115a2ce6487967f877e14edb22ce83 (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.

teamleaderleo and others added 2 commits October 14, 2026 05:59
# Conflicts:
#	webviews/src/agent-session/acpmux/newtab/screen.css
A blind design judge (2026-10-14, 14-2) preferred the harness mark at
the start of each recent-chat row: the eye runs down the left edge. The
mark moves to the row's start; the age stays the last column, right
aligned at its fixed 3.2em, so it never moves or resizes (Leo 10-13).
CSS only, list rows only; cards are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
teamleaderleo and others added 4 commits October 14, 2026 06:10
cg-design-judge: every style in the New Tab switch shows a browser-default
radio dot. StyleSwitch hides its inputs with ui.css's .ui-sr-only, which
the agent pane never loads. With only the page's own stylesheet, each
radio is static and auto-sized.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
StyleSwitch hid its radios with ui.css's .ui-sr-only, but the agent pane
never loads ui.css, so every style name had a browser-default radio dot
beside it (cg-design-judge). The page's own stylesheet now hides the
inputs (.nt-style-input), as conversation.css does for its screen-reader
text. Arrow keys, focus and the screen-reader names are unchanged.

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

# Conflicts:
#	webviews/src/agent-session/acpmux/newtab/StyleSwitch.tsx
#	webviews/src/agent-session/acpmux/newtab/screen.css
@teamleaderleo
teamleaderleo temporarily deployed to cmux-tui-merge-tree October 14, 2026 13:20 — with GitHub Actions Inactive
teamleaderleo and others added 2 commits October 14, 2026 16:13
…und dots (#20473) are the default look

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

cursor Bot commented Oct 14, 2026

Copy link
Copy Markdown

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.

teamleaderleo and others added 2 commits October 14, 2026 16:17
Settings > Experimental > Labs > New Tab Style Switch (labs.newTabStyle):
round dots (#20473, the default), dots that name a pick, chip dots, layout
sketches or style names (#20336). Replaces the Debug Settings
newTab.styleSwitch tunable, so release builds offer it too.

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

cursor Bot commented Oct 14, 2026

Copy link
Copy Markdown

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.

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

teamleaderleo commented Oct 14, 2026 •

Copy link
Copy Markdown
Collaborator Author

Visual preview of 46577c6: in the maintainers' private review feed.

@teamleaderleo
teamleaderleo temporarily deployed to cmux-tui-merge-tree October 15, 2026 01:10 — with GitHub Actions Inactive
…tab-style-variants

# Conflicts:
#	Packages/macOS/CmuxNext/Sources/CmuxNextSettings/Schema/SettingsSchema+AgentPolicy.swift
#	Packages/macOS/CmuxNext/Sources/CmuxNextSettings/Schema/SettingsSchema+Labs.generated.swift
#	schemas/defaults/cmux-next.json
#	schemas/settings/source/labs.json
@teamleaderleo
teamleaderleo temporarily deployed to cmux-tui-merge-tree October 15, 2026 01:34 — with GitHub Actions Inactive
teamleaderleo and others added 3 commits October 14, 2026 22:10
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Lawrence 2026-10-14: no Labs registry or UI; opt-in looks are Debug
Settings toggles until one earns real Settings. Drops labs.newTabStyle
(schema row, parser, strings, exports) and adds the Debug Settings choice
newTab.styleSwitch: round (#20473, the page's own look), hint, dots, strip,
names.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tab-style-variants

# Conflicts:
#	schemas/defaults/cmux-next.json
@teamleaderleo
teamleaderleo temporarily deployed to cmux-tui-merge-tree October 15, 2026 05:13 — with GitHub Actions Inactive
@cursor

cursor Bot commented Oct 15, 2026

Copy link
Copy Markdown

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

This comment has been minimized.

teamleaderleo and others added 2 commits October 15, 2026 00:57
The names and round looks draw the name and get no title; only a dot or a
sketch, which draw no text, does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Keeps CmuxNextApp under its size cap: the Debug Settings choice
newTab.styleSwitch and its looks move to AgentPaneTunables, and
AgentPaneNewTab reads the override itself.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo teamleaderleo changed the title cmux-next: New Tab style switch: dots back, two alternatives for Leo cmux NEXT: New Tab style switch looks as a Debug Settings choice Oct 15, 2026
@github-actions

github-actions Bot commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

cmux status (one comment, edited in place; each line is updated by the job that owns it)

Review b54b44a: 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=pr20598 -f ref=feat/newtab-style-variants -f platform=macos -f backend_mode=local

Unclear: web / react-apps-check (1) failed: no known signature; failed step: Build the web bundles.

CI failed on 6221a05ae6 (run 39541307257 attempt 1): 5 unknown.
macOS jobs did not run: compile and app tests were skipped: Fast static checks skipped.

Job Verdict Why
web / react-apps-check (1) unknown no known signature; failed step: Build the web bundles
web / react-apps-check (2) unknown no known signature; failed step: Build the web bundles
web / react-apps-check (3) unknown no known signature; failed step: Build the web bundles
web / react-apps-check (4) unknown no known signature; failed step: Build the web bundles
web / react-apps-check unknown no known signature; failed step: Check webview test shards

Not re-run automatically: web / react-apps-check (1), web / react-apps-check (2), web / react-apps-check (3), web / react-apps-check (4), web / react-apps-check are not machine failures.

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.

red: web / Web status; base red: the same failure on the base 262739c; does not block
red: web / react-apps-check; base red: the same failure on the base 262739c; does not block
red: web / react-apps-check (1); base red: the same failure on the base 262739c; does not block
red: web / react-apps-check (2); base red: the same failure on the base 262739c; does not block
red: web / react-apps-check (3); base red: the same failure on the base 262739c; does not block
red: web / react-apps-check (4); base red: the same failure on the base 262739c; does not block

CI fast guards failed on 6221a05ae6 (https://github.com/manaflow-ai/cmux/actions/runs/39541307257). 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.

@greptile-apps

greptile-apps Bot commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerView in GreptileConfidence Score: 4/5

[Low impact] The change reaches the New Tab style row and its developer-only choice.

The PR appears safe to merge, with a non-blocking layout issue in the optional names look.

Findings

  1. P2 Style names get clipped ▶

Summary

Adds five Debug Settings looks for the New Tab style switch while keeping round dots as the default.

  • The New Tab style switch can show five different looks.

Reviews (1) · Last reviewed commit: "Merge feat-cmux-next into feat/newtab-st..." · Reviewed by Greptile

.nt-style-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;appearance:none;cursor:inherit}
.nt-style-mark{position:absolute;top:0;left:0;height:100%;box-sizing:border-box;border-radius:5px;background:color-mix(in srgb,var(--agent-accent,var(--agent-text)) 10%,transparent);pointer-events:none}
.nt-style-options[data-settled] .nt-style-mark{transition:transform var(--agent-motion-move,190ms) var(--agent-ease-out,ease-out),width var(--agent-motion-move,190ms) var(--agent-ease-out,ease-out)}
.nt-style-option{position:relative;padding:3px 8px;border-radius:5px;color:var(--acpmux-composer-dim);font-size:var(--text-detail);line-height:var(--text-detail--line-height);white-space:nowrap;cursor:default;transition:color var(--agent-motion-hover,80ms) var(--agent-ease-out,ease-out),background-color var(--agent-motion-hover,80ms) var(--agent-ease-out,ease-out)}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Style names get clipped

The names look keeps all five labels on one line, and they cannot shrink below their text widths. Panes can be 200px wide by default, so the row overflows and the outer page clips the last options. Add horizontal scrolling or a compact fallback when the names do not fit.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

owner: 01a15ba2-88c3-7b82-8348-60abe314258e

teamleaderleo and others added 3 commits October 21, 2026 02:55
Base added the Cards style (six styles, Cards first). The style switch
spec now expects six radios with the new indexes, and the strip look
gets a Cards sketch; Default's sketch follows its stage layout
(composer at the foot). Tunables list keeps base's new entries and
adds newTabStyleSwitch in order. Gallery keeps both pickThreads and
base's holdsItsPlace.

Agent-Session: live-reload-loop-dd (cosmic-gray 76d6c13f)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s with motion off

AgentPaneTunables.swift grew past the god-file limits (419 lines, 9
types). newTabStyleSwitch and AgentPaneNewTabStyleSwitch move to
AgentPaneTunables+NewTabStyleSwitch.swift, like +NewTabWidgets and
+NewTabPicks; only the descriptor stays in all.

.nt-style-flash started at opacity 0 and relied on a 1.1s forwards
keyframe, so with data-cmux-motion=off (duration 0) the name never
showed. Visible is now its base style, the fade-in is decoration on
the motion variables, and StyleSwitch still removes it after
PICKED_NAME_MS.

Agent-Session: live-reload-loop-dd (cosmic-gray 76d6c13f)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Owned by an agent session · session

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Closing as stale. This branch is from 2026-10-14 and now conflicts with feat-cmux-next. Since then, base has reworked newtab/StyleSwitch.tsx: #24367 and #24395 turned the dots into the composer's look switch, and #27341 changed them again. The Debug Settings looks here no longer fit that surface. The hold waited on a pick from Leo that never came, and the gallery rule says we pick ourselves instead of waiting. If a New Tab look variant is still wanted, it should be rebuilt on the current dots, not rebased from this branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hold cmux-next batch queue: keep this PR out of the batch (docs/ci/cmux-next-batch.md)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant