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

TE
8d ago
+497-170

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

ValueWhat it drawsLightDark
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 lightround dark
hintThe chip dots from before #20127. A pick's name shows over them for about a second.hint lighthint dark
dotsThose chip dots, named only by tooltip.dots lightdots dark
stripA 14px sketch of each style's layout, named by tooltip.strip lightstrip dark
names#20336's style names.names lightnames dark

Round dots: point at each dot, then pick.

round clip

Full quality:

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

hint clip

Full quality:

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