🤖 tests: add Settings Modes story for Chromatic

Change-Id: I8d55fb7ca4c3173706e390846b77416f7540af59
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

.storybook/mocks/orpc.ts

@@ -21,6 +21,10 @@ import {
   type SubagentAiDefaults,
   type TaskSettings,
 } from "@/common/types/tasks";
+import {
+  normalizeModeAiDefaults,
+  type ModeAiDefaults,
+} from "@/common/types/modeAiDefaults";
 import { createAsyncMessageQueue } from "@/common/utils/asyncMessageQueue";
 import { isWorkspaceArchived } from "@/common/utils/archive";
 
@@ -57,6 +61,8 @@ export interface MockORPCClientOptions {
   workspaces?: FrontendWorkspaceMetadata[];
   /** Initial task settings for config.getConfig (e.g., Settings → Tasks section) */
   taskSettings?: Partial<TaskSettings>;
+  /** Initial mode AI defaults for config.getConfig (e.g., Settings → Modes section) */
+  modeAiDefaults?: ModeAiDefaults;
   /** Initial per-subagent AI defaults for config.getConfig (e.g., Settings → Tasks section) */
   subagentAiDefaults?: SubagentAiDefaults;
   /** Per-workspace chat callback. Return messages to emit, or use the callback for streaming. */
@@ -140,6 +146,7 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
     mcpOverrides = new Map(),
     mcpTestResults = new Map(),
     taskSettings: initialTaskSettings,
+    modeAiDefaults: initialModeAiDefaults,
     subagentAiDefaults: initialSubagentAiDefaults,
   } = options;
 
@@ -158,6 +165,7 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
   };
 
   const workspaceMap = new Map(workspaces.map((w) => [w.id, w]));
+  let modeAiDefaults = normalizeModeAiDefaults(initialModeAiDefaults ?? {});
   let taskSettings = normalizeTaskSettings(initialTaskSettings ?? DEFAULT_TASK_SETTINGS);
   let subagentAiDefaults = normalizeSubagentAiDefaults(initialSubagentAiDefaults ?? {});
 
@@ -193,14 +201,18 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
       setSshHost: async () => undefined,
     },
     config: {
-      getConfig: async () => ({ taskSettings, subagentAiDefaults }),
+      getConfig: async () => ({ taskSettings, subagentAiDefaults, modeAiDefaults }),
       saveConfig: async (input: { taskSettings: unknown; subagentAiDefaults?: unknown }) => {
         taskSettings = normalizeTaskSettings(input.taskSettings);
         if (input.subagentAiDefaults !== undefined) {
           subagentAiDefaults = normalizeSubagentAiDefaults(input.subagentAiDefaults);
         }
         return undefined;
       },
+      updateModeAiDefaults: async (input: { modeAiDefaults: unknown }) => {
+        modeAiDefaults = normalizeModeAiDefaults(input.modeAiDefaults);
+        return undefined;
+      },
     },
     providers: {
       list: async () => providersList,

src/browser/stories/App.settings.stories.tsx

@@ -3,8 +3,10 @@
  *
  * Shows different sections and states of the Settings modal:
  * - General (theme toggle)
+ * - Agents (task parallelism / nesting)
  * - Providers (API key configuration)
  * - Models (custom model management)
+ * - Modes (per-mode default model / reasoning)
  * - Experiments
  *
  * NOTE: Projects/MCP stories live in App.mcp.stories.tsx
@@ -19,6 +21,7 @@ import { selectWorkspace } from "./storyHelpers";
 import { createMockORPCClient } from "../../../.storybook/mocks/orpc";
 import { within, userEvent, waitFor } from "@storybook/test";
 import { getExperimentKey, EXPERIMENT_IDS } from "@/common/constants/experiments";
+import type { ModeAiDefaults } from "@/common/types/modeAiDefaults";
 import type { TaskSettings } from "@/common/types/tasks";
 
 export default {
@@ -34,6 +37,7 @@ export default {
 function setupSettingsStory(options: {
   providersConfig?: Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>;
   providersList?: string[];
+  modeAiDefaults?: ModeAiDefaults;
   taskSettings?: Partial<TaskSettings>;
   /** Pre-set experiment states in localStorage before render */
   experiments?: Partial<Record<string, boolean>>;
@@ -54,6 +58,7 @@ function setupSettingsStory(options: {
     projects: groupWorkspacesByProject(workspaces),
     workspaces,
     providersConfig: options.providersConfig ?? {},
+    modeAiDefaults: options.modeAiDefaults,
     providersList: options.providersList ?? ["anthropic", "openai", "xai"],
     taskSettings: options.taskSettings,
   });
@@ -229,6 +234,35 @@ export const ModelsConfigured: AppStory = {
   },
 };
 
+/** Modes section - global default model/reasoning per mode */
+export const Modes: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        setupSettingsStory({
+          modeAiDefaults: {
+            plan: { modelString: "anthropic:claude-sonnet-4-5", thinkingLevel: "medium" },
+            exec: { modelString: "openai:gpt-5.2", thinkingLevel: "xhigh" },
+            compact: { modelString: "openai:gpt-5.2-pro", thinkingLevel: "high" },
+          },
+        })
+      }
+    />
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await openSettingsToSection(canvasElement, "modes");
+
+    const body = within(canvasElement.ownerDocument.body);
+    const dialog = await body.findByRole("dialog");
+    const modal = within(dialog);
+
+    await modal.findByText(/Mode Defaults/i);
+    await modal.findByText(/^Plan$/i);
+    await modal.findByText(/^Exec$/i);
+    await modal.findByText(/^Compact$/i);
+  },
+};
+
 /** Experiments section - shows available experiments */
 export const Experiments: AppStory = {
   render: () => <AppWithMocks setup={() => setupSettingsStory({})} />,