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

Packages/macOS/CmuxNext/Sources/CmuxNextAgentPane/AgentPaneNewTab.swift

@@ -40,6 +40,8 @@ public nonisolated struct AgentPaneNewTab: Codable, Sendable, Equatable {
     /// The template (`tabs.newTabTemplate`: "cards", "default", "composer", "threads", "console",
     /// "classic" or "terminal"); nil follows `layout`. The page validates it.
     public var template: String?
+    /// The style switch's look (Debug Settings `newTab.styleSwitch`); nil is the page's default.
+    public var styleSwitch: String?
     /// The agent last picked.
     public var lastAgent: String?
     /// The harness and model picked last, anywhere and per folder; nil when none was.
@@ -82,6 +84,7 @@ public nonisolated struct AgentPaneNewTab: Codable, Sendable, Equatable {
         self.projects = projects
         self.layout = layout
         self.template = template
+        self.styleSwitch = AgentPaneTunables.newTabStyleSwitch.override?.rawValue
         self.lastAgent = lastAgent
         self.lastPicks = lastPicks
         self.home = home

Packages/macOS/CmuxNext/Sources/CmuxNextAgentPane/AgentPaneTunables+NewTabStyleSwitch.swift

@@ -0,0 +1,27 @@
+public import CmuxNextDesign
+
+nonisolated extension AgentPaneTunables {
+    /// The New Tab page's style switch look. The page draws round for no override, so only an
+    /// override is sent (`AgentPaneNewTab.styleSwitch`).
+    public static let newTabStyleSwitch = Tunable<AgentPaneNewTabStyleSwitch>.choice(
+        "newTab.styleSwitch", .tabs, "New tab style switch",
+        help: "How the New Tab page shows its styles. Applies to the next new tab.",
+        default: .round, code: "AgentPaneTunables.newTabStyleSwitch")
+}
+
+/// The New Tab page's style switch looks (webviews newtab/templates.ts STYLE_SWITCHES). Round is
+/// the page's own look (#20473); the others are opt-in in Debug Settings (Lawrence 2026-10-14: no
+/// Labs; a look moves to Settings once it earns it).
+public nonisolated enum AgentPaneNewTabStyleSwitch: String, Sendable, CaseIterable, TunableChoice {
+    case round, hint, dots, strip, names
+
+    public var tunableTitle: String {
+        switch self {
+        case .round: "Round dots (#20473)"
+        case .hint: "Dots that name a pick"
+        case .dots: "Chip dots (before #20127)"
+        case .strip: "Layout sketches"
+        case .names: "Style names (#20336)"
+        }
+    }
+}

Packages/macOS/CmuxNext/Sources/CmuxNextAgentPane/AgentPaneTunables.swift

@@ -374,6 +374,7 @@ public nonisolated struct AgentPaneTunables {
             modelMenu.descriptor,
             pagesFollowLinkPlacement.descriptor,
             newTabPrivateChatLists.descriptor,
+            newTabStyleSwitch.descriptor,
             newTabWidgets.descriptor,
             pageHost.descriptor,
             reasoningSlider.descriptor,

Packages/macOS/CmuxNext/Tests/CmuxNextAppTests/NewTabStyleSwitchTests.swift

@@ -1,5 +1,6 @@
 @testable import CmuxNextAgentPane
 @testable import CmuxNextApp
+import AppKit
 import CmuxNextActions
 import CmuxNextDesign
 import CmuxNextSettings
@@ -55,4 +56,23 @@ struct NewTabStyleSwitchTests {
         for save in saves { await save.value }
         #expect(settings.snapshot.newTabTemplate == .threads)
     }
+
+    /// Every look the New Tab style switch has is a Debug Settings choice (`newTab.styleSwitch`; no
+    /// Labs, Lawrence 2026-10-14) that reaches the next New Tab; with none set the page draws its
+    /// own look, round dots.
+    @Test func eachDebugStyleSwitchLookReachesTheNextNewTab() throws {
+        _ = NSApplication.shared
+        let services = AppServices(environment: AppEnvironment.current([:]))
+        let store = TunableStore.shared
+        store.activate(file: nil)
+        store.register(AgentPaneTunables.all)
+        defer { store.reset([AgentPaneTunables.newTabStyleSwitch.key]) }
+
+        #expect(NewTabPage.sparePage(services).styleSwitch == nil)
+        for look in AgentPaneNewTabStyleSwitch.allCases {
+            #expect(store.set(AgentPaneTunables.newTabStyleSwitch.key, .choice(look.rawValue)) != nil)
+            #expect(NewTabPage.sparePage(services).styleSwitch == look.rawValue)
+        }
+        #expect(Set(AgentPaneNewTabStyleSwitch.allCases.map(\.rawValue)) == ["round", "hint", "dots", "strip", "names"])
+    }
 }

webviews/src/agent-session/acpmux/App.tsx

@@ -6577,6 +6577,7 @@ function AcpmuxPane() {
           {!harnessesOpen && showNewTab && !newTab.history && (
             // The page's style, under it; a pick shows in place at once.
             <StyleSwitch
+              look={newTab.styleSwitch}
               current={pageStyle(shownTemplate(newTab))}
               onCancel={() => window.dispatchEvent(new Event(FOCUS_LOCATION_EVENT))}
               onPick={(style) =>

webviews/src/agent-session/acpmux/NewTabPage.tsx

@@ -27,7 +27,7 @@ import {
   type AcpmuxSessionEntry,
 } from "./sessionList";
 import { type StringKey, type Translate, translate, useT } from "./i18n";
-import { parseNewTabTemplate, type NewTabTemplate } from "./newtab/templates";
+import { parseNewTabTemplate, parseStyleSwitch, type NewTabTemplate, type StyleSwitchLook } from "./newtab/templates";
 import { seedWarmNewTab } from "./newtab/warmSnapshot";
 
 /// The three things a new tab can become (#16620). Order is the switch's order and Tab's cycle.
@@ -89,6 +89,8 @@ export type NewTabHost = {
   layout: "a" | "b";
   /// The saved template (`tabs.newTabTemplate`); unset follows `layout` (newtab/templates.ts).
   template?: NewTabTemplate;
+  /// The style switch's look (Debug Settings `newTab.styleSwitch`); unset is the default look.
+  styleSwitch?: StyleSwitchLook;
   /// The agent last picked (decision Q3).
   lastAgent?: string;
   /// The home folder, so `~/path` reads as a folder.
@@ -125,6 +127,7 @@ export function newTabHost(handshake: { newTab?: unknown; cwd?: unknown }): NewT
   const omnibar = omnibarContext(object.omnibar);
   const openTabs = Array.isArray(object.openTabs) ? omnibarContext({ tabs: object.openTabs })?.tabs : undefined;
   const template = parseNewTabTemplate(object.template);
+  const styleSwitch = parseStyleSwitch(object.styleSwitch);
   return {
     hotkeys,
     initialKind,
@@ -142,6 +145,7 @@ export function newTabHost(handshake: { newTab?: unknown; cwd?: unknown }): NewT
       : {}),
     layout: object.layout === "a" ? "a" : "b",
     ...(template ? { template } : {}),
+    ...(styleSwitch ? { styleSwitch } : {}),
     ...(typeof object.lastAgent === "string" && object.lastAgent ? { lastAgent: object.lastAgent } : {}),
     ...(typeof object.home === "string" && object.home.startsWith("/") ? { home: object.home } : {}),
     ...(typeof object.inputToken === "string" && object.inputToken ? { inputToken: object.inputToken } : {}),

webviews/src/agent-session/acpmux/newtab/NewTabScreen.gallery.ts

@@ -157,6 +157,18 @@ async function waitForTabJump(
   );
 }
 
+/// Picks Threads on the style switch and waits for the save and the check (every look is radios).
+const pickThreads = async (ctx: PlayContext) => {
+  await ctx.waitFor(() => ctx.document.querySelector(".nt-style input[value=default]:checked"));
+  await ctx.click({ role: "radio", name: "Threads" });
+  await ctx.waitFor(() =>
+    galleryNativeCalls(ctx.document).some(
+      (call) => call.method === "newTab.setTemplate" && call.params?.template === "threads",
+    ),
+  );
+  await ctx.waitFor(() => ctx.document.querySelector(".nt-style input[value=threads]:checked"));
+};
+
 /// Types a prompt, pastes an image and starts Now Playing, then checks that the composer's card
 /// and its field are where the empty page drew them (Leo 2026-10-19: the composer kept moving).
 async function holdsItsPlace(ctx: PlayContext): Promise<void> {
@@ -1060,19 +1072,34 @@ export default agentPaneEntry({
       },
     },
     "style-switch": {
-      note: "The New Tab style dots (Leo 2026-10-14): one small round dot per style under the page, the current one in the accent and the accent dot sliding to a pick. A pointer over a dot shows its name; a pick shows the picked name for a moment, then fades it, and is saved as tabs.newTabTemplate.",
+      note: "The New Tab style dots with nothing set in Debug Settings (Leo 2026-10-14, #20473): one small round dot per style under the page, the current one in the accent and the accent dot sliding to a pick. A pointer over a dot shows its name; a pick shows the picked name for a moment, then fades it, and is saved as tabs.newTabTemplate.",
       ready: newTab({ template: "default" }),
       snapshot: noChat(manySessions(4)),
-      play: async (ctx) => {
-        await ctx.waitFor(() => ctx.document.querySelector(".nt-style input[value=default]:checked"));
-        await ctx.click({ role: "radio", name: "Threads" });
-        await ctx.waitFor(() =>
-          galleryNativeCalls(ctx.document).some(
-            (call) => call.method === "newTab.setTemplate" && call.params?.template === "threads",
-          ),
-        );
-        await ctx.waitFor(() => ctx.document.querySelector(".nt-style input[value=threads]:checked"));
-      },
+      play: pickThreads,
+    },
+    "style-switch-hint": {
+      note: "Debug Settings newTab.styleSwitch = hint: a dot per style on a chip, its name as the tooltip, and a pick's name over the dots for about a second.",
+      ready: newTab({ template: "default", styleSwitch: "hint" }),
+      snapshot: noChat(manySessions(4)),
+      play: pickThreads,
+    },
+    "style-switch-dots": {
+      note: "Debug Settings newTab.styleSwitch = dots: the dots as they were before #20127, named by tooltip.",
+      ready: newTab({ template: "default", styleSwitch: "dots" }),
+      snapshot: noChat(manySessions(4)),
+      play: pickThreads,
+    },
+    "style-switch-strip": {
+      note: "Debug Settings newTab.styleSwitch = strip: a 14px sketch of each style's layout, named by tooltip.",
+      ready: newTab({ template: "default", styleSwitch: "strip" }),
+      snapshot: noChat(manySessions(4)),
+      play: pickThreads,
+    },
+    "style-switch-names": {
+      note: "Debug Settings newTab.styleSwitch = names: the style names of #20336, the current one on a small fill that slides to a pick.",
+      ready: newTab({ template: "default", styleSwitch: "names" }),
+      snapshot: noChat(manySessions(4)),
+      play: pickThreads,
     },
     "no-template-dots": {
       note: "New Tab shows no template dots and no default-kind toggle: the template is set in Settings, and a terminal opens only when picked (Leo 2026-10-12). The host payload is what it sent before, dots on.",