🤖 tests: migrate settings stories to isolated colocated sections (#3045)

## Summary

Replace the monolithic `App.settings.stories.tsx` (which used
`AppWithMocks` + play-function navigation) with 10 colocated story files
— one per settings section component — that render sections directly in
isolation.

## Background

Settings stories previously booted the full app shell via
`AppWithMocks`, then used play functions to click through to each
section. This was slow, fragile (navigation-dependent), and coupled
stories to the app's routing/layout implementation. Colocated stories
render each section directly with only the providers it needs, making
them faster, more maintainable, and easier to iterate on.

## Implementation

**Shared harness** (`settingsStoryUtils.tsx`):
- `SettingsSectionStory` wrapper that composes the required provider
tree (`APIProvider` → `PolicyProvider` → `RouterProvider` →
`ProjectProvider` → `WorkspaceProvider` → `ExperimentsProvider` →
`UILayoutsProvider` → `SettingsProvider` → `ProviderOptionsProvider` →
`ConfirmDialogProvider`)
- Ported `setupSettingsStory()`, `setupSecurityStory()`, and
`MOCK_SERVER_AUTH_SESSIONS` from the old file

**10 colocated story files** (all in
`src/browser/features/Settings/Sections/`):

| File | Stories |
|---|---|
| `GeneralSection.stories.tsx` | `General` |
| `TasksSection.stories.tsx` | `Tasks` |
| `ProvidersSection.stories.tsx` | `ProvidersEmpty`,
`ProvidersConfigured`, `ProvidersExpanded` |
| `ModelsSection.stories.tsx` | `ModelsEmpty`, `ModelsConfigured` |
| `LayoutsSection.stories.tsx` | `LayoutsEmpty`, `LayoutsConfigured` |
| `System1Section.stories.tsx` | `System1` |
| `ServerAccessSection.stories.tsx` | `ServerAccess` |
| `ExperimentsSection.stories.tsx` | `Experiments`,
`ExperimentsToggleOn`, `ExperimentsToggleOff` |
| `KeybindsSection.stories.tsx` | `Keybinds` |
| `SecuritySection.stories.tsx` | `SecurityEmpty`, `SecurityMixedTrust`,
`SecurityAllTrusted`, `SecurityAllUntrusted` |

**Cleanup:**
- Deleted `src/browser/stories/App.settings.stories.tsx`
- Updated `docs/reference/storybook.mdx` references
- Regenerated `builtInSkillContent.generated.ts`

## Validation

- `make typecheck` ✅
- `make lint` ✅
- `make storybook-build` ✅
- Verified no `AppWithMocks` imports in new story files
- Verified no remaining references to `App.settings.stories`

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-6` • Thinking:
`xhigh` • Cost: `$6.83`_

<!-- mux-attribution: model=anthropic:claude-opus-4-6 thinking=xhigh
costs=6.83 -->

Author: jaaydenh

bun.lock

@@ -27,13 +27,14 @@ bun run storybook:build
 
 The output will be in `storybook-static/`.
 
-## Writing Stories (full app only)
+## Writing Stories
 
-Mux intentionally uses **full-app** stories (no isolated component stories).
+Mux uses two Storybook patterns:
 
-Stories live in `src/browser/stories/` and must be named `App.*.stories.tsx`.
+- **Full-app stories** for integration/routing coverage (for example `src/browser/stories/App.*.stories.tsx`)
+- **Colocated isolated stories** for Settings section-level testing (for example `src/browser/features/Settings/Sections/*.stories.tsx`)
 
-Storybook is configured to load `src/browser/stories/**/*.stories.@(ts|tsx)` (see `.storybook/main.ts`).
+Storybook loads stories from `src/browser/stories/**/*.stories.@(ts|tsx)`, `src/browser/components/**/*.stories.@(ts|tsx)`, and `src/browser/features/**/*.stories.@(ts|tsx)` (see `.storybook/main.ts`).
 
 ### Basic App story structure
 
@@ -81,7 +82,7 @@ See the existing stories for patterns:
 
 - `src/browser/stories/App.sidebar.stories.tsx`
 - `src/browser/stories/App.chat.stories.tsx`
-- `src/browser/stories/App.settings.stories.tsx`
+- `src/browser/features/Settings/Sections/<SectionName>.stories.tsx`
 
 ## Configuration
 

docs/reference/storybook.mdx

@@ -0,0 +1,44 @@
+import { lightweightMeta } from "@/browser/stories/meta.js";
+import { EXPERIMENT_IDS } from "@/common/constants/experiments";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ExperimentsSection } from "./ExperimentsSection.js";
+import { SettingsSectionStory, setupSettingsStory } from "./settingsStoryUtils.js";
+
+const meta: Meta = {
+  ...lightweightMeta,
+  title: "Settings/Sections/ExperimentsSection",
+  component: ExperimentsSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Experiments: Story = {
+  render: () => (
+    <SettingsSectionStory setup={() => setupSettingsStory({})}>
+      <ExperimentsSection />
+    </SettingsSectionStory>
+  ),
+};
+
+export const ExperimentsToggleOn: Story = {
+  render: () => (
+    <SettingsSectionStory
+      setup={() =>
+        setupSettingsStory({
+          experiments: { [EXPERIMENT_IDS.SYSTEM_1]: true },
+        })
+      }
+    >
+      <ExperimentsSection />
+    </SettingsSectionStory>
+  ),
+};
+
+export const ExperimentsToggleOff: Story = {
+  render: () => (
+    <SettingsSectionStory setup={() => setupSettingsStory({})}>
+      <ExperimentsSection />
+    </SettingsSectionStory>
+  ),
+};

src/browser/features/Settings/Sections/ExperimentsSection.stories.tsx

@@ -0,0 +1,29 @@
+import { lightweightMeta } from "@/browser/stories/meta.js";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { within } from "@storybook/test";
+import { GeneralSection } from "./GeneralSection.js";
+import { SettingsSectionStory, setupSettingsStory } from "./settingsStoryUtils.js";
+
+const meta: Meta = {
+  ...lightweightMeta,
+  title: "Settings/Sections/GeneralSection",
+  component: GeneralSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const General: Story = {
+  render: () => (
+    <SettingsSectionStory setup={() => setupSettingsStory({})}>
+      <GeneralSection />
+    </SettingsSectionStory>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText(/^Theme$/i);
+    await canvas.findByText(/^Terminal Font$/i);
+    await canvas.findByText(/^Terminal Font Size$/i);
+  },
+};

src/browser/features/Settings/Sections/GeneralSection.stories.tsx

@@ -0,0 +1,16 @@
+import { lightweightMeta } from "@/browser/stories/meta.js";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { KeybindsSection } from "./KeybindsSection.js";
+
+const meta: Meta = {
+  ...lightweightMeta,
+  title: "Settings/Sections/KeybindsSection",
+  component: KeybindsSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Keybinds: Story = {
+  render: () => <KeybindsSection />,
+};

src/browser/features/Settings/Sections/KeybindsSection.stories.tsx

@@ -0,0 +1,120 @@
+import { lightweightMeta } from "@/browser/stories/meta.js";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { within } from "@storybook/test";
+import { LayoutsSection } from "./LayoutsSection.js";
+import { SettingsSectionStory, setupSettingsStory } from "./settingsStoryUtils.js";
+
+const meta: Meta = {
+  ...lightweightMeta,
+  title: "Settings/Sections/LayoutsSection",
+  component: LayoutsSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LayoutsEmpty: Story = {
+  render: () => (
+    <SettingsSectionStory
+      setup={() =>
+        setupSettingsStory({
+          layoutPresets: {
+            version: 2,
+            slots: [],
+          },
+        })
+      }
+    >
+      <LayoutsSection />
+    </SettingsSectionStory>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByRole("heading", { name: /layout slots/i });
+    await canvas.findByText(/^Add layout$/i);
+
+    if (canvas.queryByText(/Slot 1/i)) {
+      throw new Error("Expected no slot rows to be rendered in the empty state");
+    }
+  },
+};
+
+export const LayoutsConfigured: Story = {
+  render: () => (
+    <SettingsSectionStory
+      setup={() =>
+        setupSettingsStory({
+          layoutPresets: {
+            version: 2,
+            slots: [
+              {
+                slot: 1,
+                preset: {
+                  id: "preset-1",
+                  name: "My Layout",
+                  leftSidebarCollapsed: false,
+                  rightSidebar: {
+                    collapsed: false,
+                    width: { mode: "px", value: 420 },
+                    layout: {
+                      version: 1,
+                      nextId: 2,
+                      focusedTabsetId: "tabset-1",
+                      root: {
+                        type: "tabset",
+                        id: "tabset-1",
+                        tabs: ["costs", "review", "terminal_new:t1"],
+                        activeTab: "review",
+                      },
+                    },
+                  },
+                },
+              },
+              {
+                slot: 10,
+                preset: {
+                  id: "preset-10",
+                  name: "Extra Layout",
+                  leftSidebarCollapsed: false,
+                  rightSidebar: {
+                    collapsed: true,
+                    width: { mode: "px", value: 400 },
+                    layout: {
+                      version: 1,
+                      nextId: 2,
+                      focusedTabsetId: "tabset-1",
+                      root: {
+                        type: "tabset",
+                        id: "tabset-1",
+                        tabs: ["costs"],
+                        activeTab: "costs",
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        })
+      }
+    >
+      <LayoutsSection />
+    </SettingsSectionStory>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByRole("heading", { name: /layout slots/i });
+
+    await canvas.findByText(/My Layout/i);
+    await canvas.findByText(/Extra Layout/i);
+    await canvas.findByText(/^Slot 1$/i);
+    await canvas.findByText(/^Slot 10$/i);
+    await canvas.findByText(/^Add layout$/i);
+
+    if (canvas.queryByText(/Slot 2/i)) {
+      throw new Error("Expected only configured layouts to render");
+    }
+  },
+};

src/browser/features/Settings/Sections/LayoutsSection.stories.tsx

@@ -0,0 +1,123 @@
+/**
+ * NOTE: ModelsSection contains an in-app CTA ("Go to Agent defaults") that calls
+ * openSettings("tasks"). In isolated section stories the CTA navigates to the
+ * agents section via settings context, but the visual section swap is only
+ * exercised in the SettingsPage smoke story.
+ */
+import { lightweightMeta } from "@/browser/stories/meta.js";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { waitFor, within } from "@storybook/test";
+import { ModelsSection } from "./ModelsSection.js";
+import { SettingsSectionStory, setupSettingsStory } from "./settingsStoryUtils.js";
+
+const meta: Meta = {
+  ...lightweightMeta,
+  title: "Settings/Sections/ModelsSection",
+  component: ModelsSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ModelsEmpty: Story = {
+  render: () => (
+    <SettingsSectionStory
+      setup={() =>
+        setupSettingsStory({
+          providersConfig: {
+            anthropic: {
+              apiKeySet: true,
+              isEnabled: true,
+              isConfigured: true,
+              baseUrl: "",
+              models: [],
+            },
+            openai: {
+              apiKeySet: true,
+              isEnabled: true,
+              isConfigured: true,
+              baseUrl: "",
+              models: [],
+            },
+          },
+        })
+      }
+    >
+      <ModelsSection />
+    </SettingsSectionStory>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(
+      () => {
+        if (canvas.queryAllByText(/Built-in Models/i).length === 0) {
+          throw new Error("Expected Built-in Models to render");
+        }
+      },
+      { timeout: 5000 }
+    );
+  },
+};
+
+export const ModelsConfigured: Story = {
+  render: () => (
+    <SettingsSectionStory
+      setup={() => {
+        window.localStorage.setItem(
+          "provider_options_anthropic",
+          JSON.stringify({ use1MContextModels: ["anthropic:claude-sonnet-4-20250514"] })
+        );
+
+        return setupSettingsStory({
+          providersConfig: {
+            anthropic: {
+              apiKeySet: true,
+              isEnabled: true,
+              isConfigured: true,
+              baseUrl: "",
+              models: ["claude-sonnet-4-20250514", "claude-opus-4-6"],
+            },
+            openai: {
+              apiKeySet: true,
+              isEnabled: true,
+              isConfigured: true,
+              baseUrl: "",
+              models: ["gpt-4o", "gpt-4o-mini", "o1-preview"],
+            },
+            xai: {
+              apiKeySet: false,
+              isEnabled: true,
+              isConfigured: false,
+              baseUrl: "",
+              models: ["grok-beta"],
+            },
+          },
+        });
+      }}
+    >
+      <ModelsSection />
+    </SettingsSectionStory>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(
+      () => {
+        if (canvas.queryAllByText(/claude-sonnet-4-20250514/i).length === 0) {
+          throw new Error("Expected claude-sonnet-4-20250514 to render");
+        }
+      },
+      { timeout: 5000 }
+    );
+
+    await waitFor(
+      () => {
+        if (canvas.queryAllByText(/^gpt-4o$/i).length === 0) {
+          throw new Error("Expected gpt-4o to render");
+        }
+      },
+      { timeout: 5000 }
+    );
+  },
+};