From d75dff908a69c5288f7dcd8bea1c5b7805914006 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sun, 4 Oct 2026 10:52:07 +0800
Subject: [PATCH 1/4] refactor(settings): consolidate pages and preserve legacy
 navigation

---
 .../technical/product-control-open-audit.json |   14 +-
 scripts/generate-interactive-capabilities.mjs |   53 +-
 scripts/i18n-dynamic-key-allowlist.json       |    2 +-
 scripts/interactive-capabilities.test.mjs     |   25 +-
 .../interactive-capabilities/catalog.json     |   14 +-
 .../interactiveCapabilityActivator.test.ts    |   22 +-
 .../interactiveCapabilityCatalog.ts           |   18 +-
 .../global-search/productActionActivator.ts   |    2 +-
 .../settingsCapabilityDestination.ts          |   21 +
 src/web-ui/src/app/scenes/settings/AGENTS.md  |   41 +
 .../SettingsContentTypography.test.ts         |    4 +-
 .../app/scenes/settings/SettingsNav.test.tsx  |   37 +-
 .../src/app/scenes/settings/SettingsNav.tsx   |  274 +--
 .../scenes/settings/SettingsScene.test.tsx    |    8 +-
 .../src/app/scenes/settings/SettingsScene.tsx |   14 +-
 .../src/app/scenes/settings/appearance.ts     |   20 +-
 .../components/KeyboardShortcutsTab.scss      |  108 -
 .../components/SettingsViewPage.appearance.ts |   16 -
 .../settings/components/SettingsViewPage.scss |   49 -
 .../settings/components/SettingsViewPage.tsx  |   82 -
 ...utomationSettingsPage.presentation.test.ts |   32 -
 .../pages/AutomationSettingsPage.scss         |   44 -
 .../settings/pages/AutomationSettingsPage.tsx |   59 -
 .../settings/pages/EditorSettingsPage.tsx     |    7 -
 .../settings/pages/ExecutionSettingsPage.tsx  |   11 -
 .../pages/ai/DefaultHarnessSection.test.tsx}  |    6 +-
 .../pages/ai/DefaultHarnessSection.tsx}       |   24 +-
 .../pages/ai/ExecutionSettingsPage.tsx        |  484 +++++
 ...emorySettingsSection.presentation.test.ts} |    8 +-
 .../pages/ai/MemorySettingsSection.tsx}       |   50 +-
 .../pages/ai}/ModelSettingsPage.appearance.ts |    0
 .../ModelSettingsPage.presentation.test.ts    |    0
 .../settings/pages/ai}/ModelSettingsPage.scss |    0
 .../settings/pages/ai}/ModelSettingsPage.tsx  | 1467 +++++++-------
 .../pages/ai/PermissionsSettingsPage.tsx      |  249 +++
 .../pages/ai}/ReviewCapacitySection.test.tsx  |    4 +-
 .../pages/ai}/ReviewCapacitySection.tsx       |   10 +-
 .../pages/ai/SessionMemorySettingsPage.tsx    |   19 +
 .../ai/SessionTitleSection.appearance.ts}     |    0
 .../SessionTitleSection.presentation.test.ts} |    4 +-
 .../pages/ai/SessionTitleSection.tsx}         |   22 +-
 .../pages/ai}/ToolJsonRepairSection.tsx       |    8 +-
 .../AppearanceSettingsPage.appearance.ts      |    4 +-
 .../application}/AppearanceSettingsPage.scss  |   13 -
 .../AppearanceSettingsPage.test.tsx           |   19 +-
 .../application/AppearanceSettingsPage.tsx    |   37 +
 .../pages/application/GeneralSettingsPage.tsx |  553 +++++
 .../pages/application/InputSettingsPage.tsx   |   12 +
 .../KeyboardShortcutsSection.appearance.ts}   |    2 +-
 ...oardShortcutsSection.presentation.test.ts} |   15 +-
 .../application/KeyboardShortcutsSection.scss |   69 +
 .../application/KeyboardShortcutsSection.tsx} |  539 +++--
 .../application/LanguageSettingsSection.tsx   |   40 +
 .../LocalVoiceModels.presentation.test.ts}    |    4 +-
 .../application/PetAssistantSettingsPage.tsx  |   13 +
 .../pages/application/PetSettingsSection.tsx  |  392 ++++
 .../RealtimeVoiceSettingsSection.test.tsx}    |   56 +-
 .../RealtimeVoiceSettingsSection.tsx          |  171 ++
 .../VoiceSettingsSection.appearance.ts}       |    0
 ...VoiceSettingsSection.presentation.test.ts} |   18 +-
 .../application/VoiceSettingsSection.tsx}     |  235 +--
 ...rchivedSessionsSettingsPage.appearance.ts} |    0
 .../data/ArchivedSessionsSettingsPage.scss}   |    0
 .../data/ArchivedSessionsSettingsPage.tsx}    |  116 +-
 .../pages/data/DiagnosticsSettingsPage.tsx    |  287 +++
 ...UsageStatisticsSettingsPage.appearance.ts} |    0
 .../data/UsageStatisticsSettingsPage.scss}    |    0
 .../UsageStatisticsSettingsPage.test.tsx}     |   10 +-
 .../data/UsageStatisticsSettingsPage.tsx}     |   28 +-
 .../EditorSettingsPage.appearance.ts}         |    0
 .../development/EditorSettingsPage.scss}      |    0
 .../development/EditorSettingsPage.test.tsx}  |    8 +-
 .../pages/development/EditorSettingsPage.tsx} |   84 +-
 .../GitCommitSettingsSection.test.tsx         |   60 +
 .../development/GitCommitSettingsSection.tsx  |   81 +
 .../development/TerminalSettingsPage.tsx      |  164 ++
 .../development/WorkspaceGitSettingsPage.tsx  |   14 +
 .../development/WorkspaceSearchSection.tsx    |   55 +
 .../WorktreeSettingsSection.appearance.ts}    |    0
 .../development/WorktreeSettingsSection.scss} |    0
 .../WorktreeSettingsSection.test.tsx}         |   31 +-
 .../development/WorktreeSettingsSection.tsx}  |   76 +-
 .../shared/ApplicationSettings.appearance.ts} |    2 +-
 .../ApplicationSettings.presentation.test.ts} |   28 +-
 .../pages/shared/ApplicationSettings.scss}    |    0
 .../shared/RuntimeSettings.appearance.ts}     |    6 +-
 .../RuntimeSettings.presentation.test.ts      |   90 +
 .../pages/shared/RuntimeSettings.scss}        |  158 +-
 .../pages/shared/RuntimeSettings.test.tsx}    |   32 +-
 .../settings/pages/shared/SettingsPage.tsx    |   26 +
 .../shared/SettingsPageComposition.test.ts    |   23 +
 .../shared/useSettingsSectionAnchor.test.tsx  |   46 +
 .../pages/shared/useSettingsSectionAnchor.ts  |   36 +
 .../AutomationSettingsPage.appearance.ts}     |    0
 .../pages/tools/AutomationSettingsPage.tsx    |   16 +
 .../pages/tools/DeviceControlSettingsPage.tsx |  825 ++++++++
 .../ExternalAgentsSettingsPage.tsx}           |   10 +-
 .../tools/HooksSettingsSection.test.tsx}      |   29 +-
 .../pages/tools/HooksSettingsSection.tsx}     |  225 +--
 .../settings/pages/tools/McpSettingsPage.tsx  |    1 +
 ...QuickActionsSettingsSection.appearance.ts} |    0
 ...tionsSettingsSection.presentation.test.ts} |    4 +-
 .../tools/QuickActionsSettingsSection.scss}   |    0
 .../tools/QuickActionsSettingsSection.tsx}    |  231 +--
 ...WebSearchSettingsPage.presentation.test.ts |    0
 .../pages/tools}/WebSearchSettingsPage.scss   |    0
 .../pages/tools}/WebSearchSettingsPage.tsx    |   23 +-
 .../scenes/settings/settingsDestination.ts    |   71 +-
 .../settingsDestinationMigrations.json        |  211 ++
 .../scenes/settings/settingsRegistry.test.ts  |  248 +--
 .../app/scenes/settings/settingsRegistry.ts   |  367 ++--
 .../src/app/scenes/settings/settingsStore.ts  |   37 +-
 .../src/app/scenes/settings/settingsTypes.ts  |   39 +-
 .../startupPerformanceContract.test.ts        |   50 +-
 .../src/flow_chat/components/ChatInput.tsx    |    2 +-
 .../components/voice/useComposerVoiceInput.ts |    2 +-
 .../components/voice/useRealtimeVoiceCall.ts  |    2 +-
 .../action-bar/DeepReviewActionBar.tsx        |    2 +-
 .../tool-cards/BuiltinMarketDialog.tsx        |    2 +-
 .../registry/defaultAppearanceRegistry.ts     |   28 +-
 .../config/components/AcpAgentsConfig.tsx     |    2 +-
 .../components/AppearanceSettingsPage.tsx     |   98 -
 .../components/ApplicationSettingsPages.tsx   | 1029 ----------
 .../GlobalPermissionRulesDialog.tsx           |    2 +-
 .../ModelServiceCollapse.presentation.test.ts |    4 +-
 .../ModelSettingsDialog.presentation.test.ts  |    4 +-
 .../RuntimeSettingsPages.presentation.test.ts |  115 --
 .../components/RuntimeSettingsPages.tsx       | 1789 -----------------
 .../components/common/ConfigPageLayout.tsx    |    4 +-
 .../infrastructure/config/components/index.ts |   16 -
 src/web-ui/src/infrastructure/config/index.ts |    2 -
 .../services/AgentCompanionPetService.ts      |   12 +
 src/web-ui/src/locales/en-US/settings.json    |   75 +-
 .../locales/en-US/settings/application.json   |    4 +-
 .../src/locales/en-US/settings/hooks.json     |    2 +-
 .../src/locales/en-US/settings/memory.json    |    7 +-
 .../src/locales/en-US/settings/runtime.json   |    2 +
 .../locales/en-US/settings/voice-input.json   |    5 +-
 src/web-ui/src/locales/zh-CN/settings.json    |   73 +-
 .../locales/zh-CN/settings/application.json   |    4 +-
 .../src/locales/zh-CN/settings/hooks.json     |    2 +-
 .../src/locales/zh-CN/settings/memory.json    |    7 +-
 .../src/locales/zh-CN/settings/runtime.json   |    2 +
 .../locales/zh-CN/settings/voice-input.json   |    5 +-
 src/web-ui/src/locales/zh-TW/settings.json    |   77 +-
 .../locales/zh-TW/settings/application.json   |    4 +-
 .../src/locales/zh-TW/settings/hooks.json     |    2 +-
 .../src/locales/zh-TW/settings/memory.json    |    7 +-
 .../src/locales/zh-TW/settings/runtime.json   |    2 +
 .../locales/zh-TW/settings/voice-input.json   |    5 +-
 .../DialogFooterComposition.contract.test.ts  |    8 +-
 151 files changed, 6663 insertions(+), 6117 deletions(-)
 create mode 100644 src/web-ui/src/app/global-search/settingsCapabilityDestination.ts
 create mode 100644 src/web-ui/src/app/scenes/settings/AGENTS.md
 delete mode 100644 src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
 delete mode 100644 src/web-ui/src/app/scenes/settings/components/SettingsViewPage.appearance.ts
 delete mode 100644 src/web-ui/src/app/scenes/settings/components/SettingsViewPage.scss
 delete mode 100644 src/web-ui/src/app/scenes/settings/components/SettingsViewPage.tsx
 delete mode 100644 src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.presentation.test.ts
 delete mode 100644 src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.scss
 delete mode 100644 src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.tsx
 delete mode 100644 src/web-ui/src/app/scenes/settings/pages/EditorSettingsPage.tsx
 delete mode 100644 src/web-ui/src/app/scenes/settings/pages/ExecutionSettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components/DefaultHarnessConfig.test.tsx => app/scenes/settings/pages/ai/DefaultHarnessSection.test.tsx} (97%)
 rename src/web-ui/src/{infrastructure/config/components/DefaultHarnessConfig.tsx => app/scenes/settings/pages/ai/DefaultHarnessSection.tsx} (95%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components/MemorySettingsPage.presentation.test.ts => app/scenes/settings/pages/ai/MemorySettingsSection.presentation.test.ts} (87%)
 rename src/web-ui/src/{infrastructure/config/components/MemorySettingsPage.tsx => app/scenes/settings/pages/ai/MemorySettingsSection.tsx} (96%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ModelSettingsPage.appearance.ts (100%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ModelSettingsPage.presentation.test.ts (100%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ModelSettingsPage.scss (100%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ModelSettingsPage.tsx (81%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ReviewCapacitySection.test.tsx (98%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ReviewCapacitySection.tsx (98%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/ai/SessionMemorySettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components/SessionTitleConfig.appearance.ts => app/scenes/settings/pages/ai/SessionTitleSection.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/SessionTitleConfig.presentation.test.ts => app/scenes/settings/pages/ai/SessionTitleSection.presentation.test.ts} (90%)
 rename src/web-ui/src/{infrastructure/config/components/SessionTitleConfig.tsx => app/scenes/settings/pages/ai/SessionTitleSection.tsx} (92%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/ai}/ToolJsonRepairSection.tsx (92%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/application}/AppearanceSettingsPage.appearance.ts (94%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/application}/AppearanceSettingsPage.scss (99%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/application}/AppearanceSettingsPage.test.tsx (76%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/InputSettingsPage.tsx
 rename src/web-ui/src/app/scenes/settings/{components/KeyboardShortcutsTab.appearance.ts => pages/application/KeyboardShortcutsSection.appearance.ts} (89%)
 rename src/web-ui/src/app/scenes/settings/{components/KeyboardShortcutsTab.presentation.test.ts => pages/application/KeyboardShortcutsSection.presentation.test.ts} (56%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.scss
 rename src/web-ui/src/app/scenes/settings/{components/KeyboardShortcutsTab.tsx => pages/application/KeyboardShortcutsSection.tsx} (59%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/LanguageSettingsSection.tsx
 rename src/web-ui/src/app/scenes/settings/pages/{VoiceSettingsPage.presentation.test.ts => application/LocalVoiceModels.presentation.test.ts} (86%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/PetAssistantSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx
 rename src/web-ui/src/{infrastructure/config/components/VoiceInputConfig.test.tsx => app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.test.tsx} (75%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.tsx
 rename src/web-ui/src/{infrastructure/config/components/VoiceInputConfig.appearance.ts => app/scenes/settings/pages/application/VoiceSettingsSection.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/VoiceInputConfig.presentation.test.ts => app/scenes/settings/pages/application/VoiceSettingsSection.presentation.test.ts} (87%)
 rename src/web-ui/src/{infrastructure/config/components/VoiceInputConfig.tsx => app/scenes/settings/pages/application/VoiceSettingsSection.tsx} (66%)
 rename src/web-ui/src/app/scenes/settings/{components/ArchivedSessionsConfig.appearance.ts => pages/data/ArchivedSessionsSettingsPage.appearance.ts} (100%)
 rename src/web-ui/src/app/scenes/settings/{components/ArchivedSessionsConfig.scss => pages/data/ArchivedSessionsSettingsPage.scss} (100%)
 rename src/web-ui/src/app/scenes/settings/{components/ArchivedSessionsConfig.tsx => pages/data/ArchivedSessionsSettingsPage.tsx} (87%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components/UsageStatisticsConfig.appearance.ts => app/scenes/settings/pages/data/UsageStatisticsSettingsPage.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/UsageStatisticsConfig.scss => app/scenes/settings/pages/data/UsageStatisticsSettingsPage.scss} (100%)
 rename src/web-ui/src/{infrastructure/config/components/UsageStatisticsConfig.test.tsx => app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx} (96%)
 rename src/web-ui/src/{infrastructure/config/components/UsageStatisticsConfig.tsx => app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx} (98%)
 rename src/web-ui/src/{infrastructure/config/components/EditorConfig.appearance.ts => app/scenes/settings/pages/development/EditorSettingsPage.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/EditorConfig.scss => app/scenes/settings/pages/development/EditorSettingsPage.scss} (100%)
 rename src/web-ui/src/{infrastructure/config/components/EditorConfig.test.tsx => app/scenes/settings/pages/development/EditorSettingsPage.test.tsx} (91%)
 rename src/web-ui/src/{infrastructure/config/components/EditorConfig.tsx => app/scenes/settings/pages/development/EditorSettingsPage.tsx} (98%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.test.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/development/WorkspaceGitSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx
 rename src/web-ui/src/{infrastructure/config/components/WorktreeSettingsPage.appearance.ts => app/scenes/settings/pages/development/WorktreeSettingsSection.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/WorktreeSettingsPage.scss => app/scenes/settings/pages/development/WorktreeSettingsSection.scss} (100%)
 rename src/web-ui/src/{infrastructure/config/components/WorktreeSettingsPage.test.tsx => app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx} (93%)
 rename src/web-ui/src/{infrastructure/config/components/WorktreeSettingsPage.tsx => app/scenes/settings/pages/development/WorktreeSettingsSection.tsx} (96%)
 rename src/web-ui/src/{infrastructure/config/components/ApplicationSettingsPages.appearance.ts => app/scenes/settings/pages/shared/ApplicationSettings.appearance.ts} (75%)
 rename src/web-ui/src/{infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts => app/scenes/settings/pages/shared/ApplicationSettings.presentation.test.ts} (66%)
 rename src/web-ui/src/{infrastructure/config/components/ApplicationSettingsPages.scss => app/scenes/settings/pages/shared/ApplicationSettings.scss} (100%)
 rename src/web-ui/src/{infrastructure/config/components/RuntimeSettingsPages.appearance.ts => app/scenes/settings/pages/shared/RuntimeSettings.appearance.ts} (92%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.presentation.test.ts
 rename src/web-ui/src/{infrastructure/config/components/RuntimeSettingsPages.scss => app/scenes/settings/pages/shared/RuntimeSettings.scss} (63%)
 rename src/web-ui/src/{infrastructure/config/components/RuntimeSettingsPages.test.tsx => app/scenes/settings/pages/shared/RuntimeSettings.test.tsx} (83%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/shared/SettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/shared/SettingsPageComposition.test.ts
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.test.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.ts
 rename src/web-ui/src/app/scenes/settings/pages/{appearance.ts => tools/AutomationSettingsPage.appearance.ts} (100%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/tools/DeviceControlSettingsPage.tsx
 rename src/web-ui/src/app/scenes/settings/pages/{AcpSettingsPage.tsx => tools/ExternalAgentsSettingsPage.tsx} (63%)
 rename src/web-ui/src/{infrastructure/config/components/HooksConfig.test.tsx => app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx} (93%)
 rename src/web-ui/src/{infrastructure/config/components/HooksConfig.tsx => app/scenes/settings/pages/tools/HooksSettingsSection.tsx} (81%)
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/tools/McpSettingsPage.tsx
 rename src/web-ui/src/{infrastructure/config/components/QuickActionsConfig.appearance.ts => app/scenes/settings/pages/tools/QuickActionsSettingsSection.appearance.ts} (100%)
 rename src/web-ui/src/{infrastructure/config/components/QuickActionsConfig.presentation.test.ts => app/scenes/settings/pages/tools/QuickActionsSettingsSection.presentation.test.ts} (90%)
 rename src/web-ui/src/{infrastructure/config/components/QuickActionsConfig.scss => app/scenes/settings/pages/tools/QuickActionsSettingsSection.scss} (100%)
 rename src/web-ui/src/{infrastructure/config/components/QuickActionsConfig.tsx => app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx} (74%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/tools}/WebSearchSettingsPage.presentation.test.ts (100%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/tools}/WebSearchSettingsPage.scss (100%)
 rename src/web-ui/src/{infrastructure/config/components => app/scenes/settings/pages/tools}/WebSearchSettingsPage.tsx (98%)
 create mode 100644 src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
 delete mode 100644 src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
 delete mode 100644 src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
 delete mode 100644 src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.presentation.test.ts
 delete mode 100644 src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx

diff --git a/docs/interactive-capabilities/technical/product-control-open-audit.json b/docs/interactive-capabilities/technical/product-control-open-audit.json
index 9dbb4c4993..535df60892 100644
--- a/docs/interactive-capabilities/technical/product-control-open-audit.json
+++ b/docs/interactive-capabilities/technical/product-control-open-audit.json
@@ -2639,7 +2639,7 @@
         "pageId": "application.shortcuts"
       },
       "evidence": [
-        "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#lists every known shortcut"
+        "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#lists every known shortcut"
       ]
     },
     {
@@ -2655,8 +2655,8 @@
         "pageId": "application.shortcuts"
       },
       "evidence": [
-        "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#buildFinalConflictMap",
-        "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#buildStoredKeybindings({})"
+        "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#buildFinalConflictMap",
+        "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#buildStoredKeybindings({})"
       ]
     },
     {
@@ -2795,9 +2795,9 @@
         "pageId": "ai.models"
       },
       "evidence": [
-        "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#custom_headers",
-        "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#custom_request_body",
-        "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#skip_ssl_verify"
+        "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#custom_headers",
+        "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#custom_request_body",
+        "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#skip_ssl_verify"
       ]
     },
     {
@@ -2882,7 +2882,7 @@
         "pageId": "workspace.session"
       },
       "evidence": [
-        "source:src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.tsx#DefaultHarnessConfig",
+        "source:src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx#DefaultHarnessSection",
         "source:src/web-ui/src/locales/zh-CN/settings/runtime.json#defaultHarness.title"
       ]
     },
diff --git a/scripts/generate-interactive-capabilities.mjs b/scripts/generate-interactive-capabilities.mjs
index 9b50a9b31a..f6967839bd 100644
--- a/scripts/generate-interactive-capabilities.mjs
+++ b/scripts/generate-interactive-capabilities.mjs
@@ -18,6 +18,10 @@ const APPEARANCE_BOOTSTRAP_PATH = path.join(
 );
 const SETTINGS_REGISTRY = path.join(REPO_ROOT, 'src/web-ui/src/app/scenes/settings/settingsRegistry.ts');
 const SETTINGS_TYPES = path.join(REPO_ROOT, 'src/web-ui/src/app/scenes/settings/settingsTypes.ts');
+const SETTINGS_MIGRATIONS = JSON.parse(readFileSync(
+  path.join(REPO_ROOT, 'src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json'),
+  'utf8',
+));
 const PRODUCT_ACTION_CATALOG = path.join(REPO_ROOT, 'src/web-ui/src/app/global-search/productActionCatalog.ts');
 const SCENE_TYPES = path.join(REPO_ROOT, 'src/web-ui/src/app/components/SceneBar/types.ts');
 const TOOL_PROVIDER_GROUPS = path.join(
@@ -381,6 +385,23 @@ function controlCoverage(source) {
   return coverage;
 }
 
+// Keep historical destinations on the wire for older presentation surfaces.
+// Validate coverage against the same migration data used by the current Web UI.
+export function projectSettingsCatalogDestination(capabilityId, destination, itemId) {
+  if (destination.kind !== 'settings') return destination;
+  const capability = SETTINGS_MIGRATIONS.capabilities[capabilityId];
+  const input = capability?.items?.[itemId] ?? capability?.destination ?? destination;
+  const migratedView = SETTINGS_MIGRATIONS.views[input.pageId]?.[input.viewId];
+  const migrated = migratedView ?? SETTINGS_MIGRATIONS.pages[input.pageId];
+  const sectionId = input.sectionId ?? migrated?.sectionId;
+  return {
+    kind: 'settings',
+    pageId: migrated?.pageId ?? input.pageId,
+    ...(sectionId ? { sectionId } : {}),
+    ...(!migratedView && input.viewId ? { viewId: input.viewId } : {}),
+  };
+}
+
 function validateSource(source) {
   if (source.schemaVersion !== 5) throw new Error('Interactive capability source must use schemaVersion 5');
   const capabilityIds = new Set();
@@ -389,6 +410,7 @@ function validateSource(source) {
     [...settingsSource.matchAll(/definePage\(\{\s*id:\s*'([^']+)'/gu)].map((match) => match[1]),
   );
   const settingsViewIds = extractTypeUnionIds(readFileSync(SETTINGS_TYPES, 'utf8'), 'SettingsViewId');
+  const settingsSectionIds = extractTypeUnionIds(readFileSync(SETTINGS_TYPES, 'utf8'), 'SettingsSectionId');
   const actionIds = extractSingleQuotedIds(readFileSync(PRODUCT_ACTION_CATALOG, 'utf8'));
   const sceneIds = new Set([
     ...readFileSync(SCENE_TYPES, 'utf8').matchAll(/^\s*\|\s*'([^']+)'/gmu),
@@ -396,7 +418,9 @@ function validateSource(source) {
   const productToolNames = extractProductToolNames(readFileSync(TOOL_PROVIDER_GROUPS, 'utf8'));
   const delegatedToolNames = new Set();
 
-  const validateDestination = (destination, owner) => {
+  const validateDestination = (original, capabilityId, itemId) => {
+    const owner = itemId ? `${capabilityId}.${itemId}` : capabilityId;
+    const destination = projectSettingsCatalogDestination(capabilityId, original, itemId);
     if (destination.kind === 'settings') {
       if (!settingsIds.has(destination.pageId)) {
         throw new Error(`${owner} targets unknown settings page ${destination.pageId}`);
@@ -404,6 +428,9 @@ function validateSource(source) {
       if (destination.viewId && !settingsViewIds.has(destination.viewId)) {
         throw new Error(`${owner} targets unknown settings view ${destination.viewId}`);
       }
+      if (destination.sectionId && !settingsSectionIds.has(destination.sectionId)) {
+        throw new Error(`${owner} targets unknown settings section ${destination.sectionId}`);
+      }
       return;
     }
     if (destination.kind === 'action' && !actionIds.has(destination.actionId)) {
@@ -470,7 +497,7 @@ function validateSource(source) {
       itemIds.add(item.id);
       assertBilingual({ ...item, id: `${capability.id}.${item.id}` }, 'title');
       if (item.destination) {
-        validateDestination(item.destination, `${capability.id}.${item.id}`);
+        validateDestination(item.destination, capability.id, item.id);
         if (
           item.destination.kind === 'settings'
           && capability.destination.kind === 'settings'
@@ -691,9 +718,16 @@ function validateSource(source) {
     throw new Error('User-facing capabilities may not silently ship as unsupported Agent controls');
   }
 
-  const semanticSettings = new Set(source.capabilities
+  const projectedSettingsDestinations = source.capabilities
     .filter(({ kind }) => kind === 'setting')
-    .map(({ destination }) => destination.kind === 'settings' ? destination.pageId : null)
+    .flatMap((capability) => [
+      projectSettingsCatalogDestination(capability.id, capability.destination),
+      ...capability.items.map((item) => projectSettingsCatalogDestination(
+        capability.id, item.destination ?? capability.destination, item.id,
+      )),
+    ]);
+  const semanticSettings = new Set(projectedSettingsDestinations
+    .map((destination) => destination.kind === 'settings' ? destination.pageId : null)
     .filter(Boolean));
   const missingSettings = [...settingsIds].filter((id) => !semanticSettings.has(id));
   const staleSettings = [...semanticSettings].filter((id) => !settingsIds.has(id));
@@ -704,10 +738,9 @@ function validateSource(source) {
     ].filter(Boolean).join('\n'));
   }
 
-  const semanticSettingsViews = new Set(source.capabilities.flatMap((capability) =>
-    capability.items
-      .map(({ destination }) => destination?.kind === 'settings' ? destination.viewId : null)
-      .filter(Boolean)));
+  const semanticSettingsViews = new Set(projectedSettingsDestinations
+    .map((destination) => destination.kind === 'settings' ? destination.viewId : null)
+    .filter(Boolean));
   const missingSettingsViews = [...settingsViewIds].filter((id) => !semanticSettingsViews.has(id));
   const staleSettingsViews = [...semanticSettingsViews].filter((id) => !settingsViewIds.has(id));
   if (missingSettingsViews.length || staleSettingsViews.length) {
@@ -1034,7 +1067,7 @@ function loadOwnerDefinitions() {
   const result = spawnSync(
     'cargo',
     ['run', '--quiet', '-p', 'openbitfun-product-domains', '--bin', PRODUCT_CONTROL_OWNER_EXPORT],
-    { cwd: REPO_ROOT, encoding: 'utf8', maxBuffer: 16 * 1024 * 1024 },
+    { cwd: REPO_ROOT, encoding: 'utf8', maxBuffer: 16 * 1024 * 1024, windowsHide: true },
   );
   if (result.status !== 0) {
     throw new Error([
@@ -1067,7 +1100,7 @@ export function loadRemoteSurfaceRegistry() {
   const result = spawnSync(
     'cargo',
     ['run', '--quiet', '-p', 'openbitfun-product-domains', '--bin', REMOTE_SURFACE_EXPORT],
-    { cwd: REPO_ROOT, encoding: 'utf8', maxBuffer: 16 * 1024 * 1024 },
+    { cwd: REPO_ROOT, encoding: 'utf8', maxBuffer: 16 * 1024 * 1024, windowsHide: true },
   );
   if (result.status !== 0) {
     throw new Error([
diff --git a/scripts/i18n-dynamic-key-allowlist.json b/scripts/i18n-dynamic-key-allowlist.json
index e02921e554..5702f0c196 100644
--- a/scripts/i18n-dynamic-key-allowlist.json
+++ b/scripts/i18n-dynamic-key-allowlist.json
@@ -83,7 +83,7 @@
       "id": "web-editor-option-metadata",
       "surface": "web-ui",
       "namespace": "settings/editor",
-      "owner": "src/web-ui/src/infrastructure/config/components/EditorConfig.tsx",
+      "owner": "src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx",
       "description": "Editor option descriptors store labelKey metadata resolved with the settings/editor namespace.",
       "sourceReferences": [
         "labelKey: 'appearance.cursorStyles.line'",
diff --git a/scripts/interactive-capabilities.test.mjs b/scripts/interactive-capabilities.test.mjs
index 8b16622bc4..e9275d4237 100644
--- a/scripts/interactive-capabilities.test.mjs
+++ b/scripts/interactive-capabilities.test.mjs
@@ -8,12 +8,33 @@ import {
   buildCapabilityCatalog,
   loadRemoteSurfaceRegistry,
   parseRegisteredCommands,
+  projectSettingsCatalogDestination,
   renderRemoteSurfaceTsBindings,
 } from './generate-interactive-capabilities.mjs';
 
 const repositoryRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const read = (relativePath) => readFile(path.join(repositoryRoot, relativePath), 'utf8');
 
+test('historical settings wire targets resolve through the current presentation migration', () => {
+  const { runtimeCatalog } = buildCapabilityCatalog();
+  const execution = runtimeCatalog.capabilities.find(({ id }) => id === 'setting.tools.execution');
+  const permissions = execution.items.find(({ id }) => id === 'permission-mode');
+  assert.deepEqual(permissions.destination, { kind: 'settings', pageId: 'tools.execution', viewId: 'common' });
+  assert.deepEqual(projectSettingsCatalogDestination(execution.id, permissions.destination, permissions.id), {
+    kind: 'settings', pageId: 'ai.permissions',
+  });
+  const automation = runtimeCatalog.capabilities.find(({ id }) => id === 'setting.tools.automation');
+  const hooks = automation.items.find(({ id }) => id === 'hooks-enabled');
+  assert.deepEqual(hooks.destination, { kind: 'settings', pageId: 'tools.automation', viewId: 'hooks' });
+  assert.deepEqual(projectSettingsCatalogDestination(automation.id, hooks.destination, hooks.id), {
+    kind: 'settings', pageId: 'tools.automation', sectionId: 'hooks',
+  });
+  const computerUse = runtimeCatalog.capabilities.find(({ id }) => id === 'feature.computer-use');
+  assert.deepEqual(projectSettingsCatalogDestination(computerUse.id, computerUse.destination), {
+    kind: 'settings', pageId: 'tools.desktop-control',
+  });
+});
+
 test('the public contract is a compact feature-and-settings manual', () => {
   const { publicCatalog, runtimeCatalog } = buildCapabilityCatalog();
   const featureCount = publicCatalog.capabilities.filter(({ kind }) => kind === 'feature').length;
@@ -352,7 +373,9 @@ test('docs, runtime, and technical views are generated projections of one semant
   assert.ok(interactionAudit.files.some(({ sourceFile }) =>
     sourceFile.endsWith('/AssistantDefaultsPage.tsx')));
   assert.ok(interactionAudit.files.some(({ sourceFile }) =>
-    sourceFile.endsWith('/AppearanceSettingsPage.tsx')));
+    sourceFile.endsWith('/LanguageSettingsSection.tsx')));
+  assert.ok(interactionAudit.files.some(({ sourceFile }) =>
+    sourceFile.endsWith('/AppearancePackageConfigSection.tsx')));
   assert.equal(publicCatalog.source, 'src/shared/interactive-capabilities/catalog.json');
 
   const appearance = runtimeCatalog.capabilities
diff --git a/src/shared/interactive-capabilities/catalog.json b/src/shared/interactive-capabilities/catalog.json
index 3c589192db..a8715ee327 100644
--- a/src/shared/interactive-capabilities/catalog.json
+++ b/src/shared/interactive-capabilities/catalog.json
@@ -6037,7 +6037,7 @@
             "reasonEn": "“Search and browse all app, scene, editor, and terminal shortcuts” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user."
           },
           "evidence": [
-            "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#lists every known shortcut"
+            "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#lists every known shortcut"
           ]
         },
         {
@@ -6055,8 +6055,8 @@
             "reasonEn": "“Record new shortcuts, detect conflicts, revert one binding, or reset all custom bindings” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user."
           },
           "evidence": [
-            "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#buildFinalConflictMap",
-            "source:src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx#buildStoredKeybindings({})"
+            "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#buildFinalConflictMap",
+            "source:src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx#buildStoredKeybindings({})"
           ]
         }
       ],
@@ -6666,9 +6666,9 @@
             "reasonEn": "Custom headers and request bodies may contain tokens or other secrets, so they must be edited in the protected model configuration flow and cannot enter Agent-readable discovery data."
           },
           "evidence": [
-            "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#custom_headers",
-            "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#custom_request_body",
-            "source:src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx#skip_ssl_verify"
+            "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#custom_headers",
+            "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#custom_request_body",
+            "source:src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx#skip_ssl_verify"
           ]
         },
         {
@@ -7076,7 +7076,7 @@
             "reasonEn": "“Make regular new sessions follow the last ChatInput selection or use a fixed Harness” is managed by related controls on the session settings page and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the selection visible to the user."
           },
           "evidence": [
-            "source:src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.tsx#DefaultHarnessConfig",
+            "source:src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx#DefaultHarnessSection",
             "source:src/web-ui/src/locales/zh-CN/settings/runtime.json#defaultHarness.title"
           ]
         },
diff --git a/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts b/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
index 582d6af2b9..fc062ba671 100644
--- a/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
+++ b/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
@@ -34,7 +34,7 @@ describe('activateInteractiveCapability', () => {
 
     expect(mocks.openDestination).toHaveBeenCalledWith({
       kind: 'settings',
-      pageId: 'application.shortcuts',
+      pageId: 'application.input', sectionId: 'shortcuts',
     });
     expect(mocks.openScene).toHaveBeenCalledWith('settings');
   });
@@ -45,7 +45,7 @@ describe('activateInteractiveCapability', () => {
     });
     expect(mocks.openDestination).toHaveBeenLastCalledWith({
       kind: 'settings',
-      pageId: 'application.terminal',
+      pageId: 'development.terminal',
     });
 
     await activateInteractiveCapability('setting.application.development', {
@@ -53,10 +53,26 @@ describe('activateInteractiveCapability', () => {
     });
     expect(mocks.openDestination).toHaveBeenLastCalledWith({
       kind: 'settings',
-      pageId: 'application.editor',
+      pageId: 'development.editor',
     });
   });
 
+
+  it.each([
+    ['feature.computer-use', undefined, { pageId: 'tools.desktop-control' }],
+    ['setting.application.input', 'voice-enabled', { pageId: 'application.input', sectionId: 'voice' }],
+    ['setting.application.appearance', 'language', { pageId: 'application.general' }],
+    ['setting.workspace.session', 'default-agent-harness', { pageId: 'ai.session-memory', sectionId: 'session' }],
+    ['setting.workspace.session', 'accelerated-search', { pageId: 'development.workspace', sectionId: 'workspace-search' }],
+    ['setting.tools.execution', 'permission-mode', { pageId: 'ai.permissions' }],
+    ['setting.tools.execution', 'timeouts', { pageId: 'ai.execution' }],
+    ['setting.tools.execution', 'computer-use', { pageId: 'tools.desktop-control' }],
+    ['setting.tools.automation', 'hooks-enabled', { pageId: 'tools.automation', sectionId: 'hooks' }],
+  ])('opens the reorganized destination for %s / %s using the stable host ID', async (capabilityId, itemId, destination) => {
+    await activateInteractiveCapability(capabilityId, { itemId });
+    expect(mocks.openDestination).toHaveBeenLastCalledWith({ kind: 'settings', ...destination });
+  });
+
   it('rejects stale item IDs instead of silently opening the wrong place', async () => {
     await expect(activateInteractiveCapability('setting.application.shortcuts', {
       itemId: 'missing-item',
diff --git a/src/web-ui/src/app/global-search/interactiveCapabilityCatalog.ts b/src/web-ui/src/app/global-search/interactiveCapabilityCatalog.ts
index 0b6058303c..6d4633c377 100644
--- a/src/web-ui/src/app/global-search/interactiveCapabilityCatalog.ts
+++ b/src/web-ui/src/app/global-search/interactiveCapabilityCatalog.ts
@@ -3,6 +3,7 @@ import type { SettingsDestination } from '@/app/scenes/settings/settingsTypes';
 import type { ProductActionId } from './productActionCatalog';
 import generatedCatalog from './generated/interactive-capabilities.json';
 import { WORKSPACE_SEARCH_AVAILABLE } from '@/infrastructure/config/workspaceSearchAvailability';
+import { projectSettingsCapabilityDestination } from './settingsCapabilityDestination';
 
 export type InteractiveCapabilityKind = 'feature' | 'setting';
 export type InteractiveCapabilityRisk = 'read' | 'write' | 'ui' | 'execute' | 'destructive';
@@ -142,7 +143,22 @@ export interface InteractiveCapabilityCatalog {
 }
 
 // Keep the host contract intact while filtering controls unavailable for the workspace.
-const catalog = generatedCatalog as InteractiveCapabilityCatalog;
+const hostCatalog = generatedCatalog as InteractiveCapabilityCatalog;
+const catalog: InteractiveCapabilityCatalog = {
+  ...hostCatalog,
+  capabilities: hostCatalog.capabilities.map(capability => ({
+    ...capability,
+    destination: projectSettingsCapabilityDestination(capability.id, capability.destination),
+    items: capability.items.map(item => ({
+      ...item,
+      destination: projectSettingsCapabilityDestination(capability.id, item.destination ?? capability.destination, item.id),
+    })),
+  })),
+  definitions: hostCatalog.definitions.map(definition => ({
+    ...definition,
+    presentationTarget: projectSettingsCapabilityDestination(definition.capabilityId, definition.presentationTarget, definition.itemIds[0]),
+  })),
+};
 const suspendedSearchItems = new Set(['accelerated-search', 'search-index']);
 export function getInteractiveCapabilityCatalog(
   workspaceSearchAvailable = WORKSPACE_SEARCH_AVAILABLE,
diff --git a/src/web-ui/src/app/global-search/productActionActivator.ts b/src/web-ui/src/app/global-search/productActionActivator.ts
index 7362465ff3..8d63c0adc3 100644
--- a/src/web-ui/src/app/global-search/productActionActivator.ts
+++ b/src/web-ui/src/app/global-search/productActionActivator.ts
@@ -78,7 +78,7 @@ export async function activateProductAction(
       return;
     case 'settings.shortcuts.open':
       useSettingsStore.getState().openDestination({
-        pageId: 'application.shortcuts',
+        pageId: 'application.input', sectionId: 'shortcuts',
       });
       sceneStore.openScene('settings');
       return;
diff --git a/src/web-ui/src/app/global-search/settingsCapabilityDestination.ts b/src/web-ui/src/app/global-search/settingsCapabilityDestination.ts
new file mode 100644
index 0000000000..09e7666afa
--- /dev/null
+++ b/src/web-ui/src/app/global-search/settingsCapabilityDestination.ts
@@ -0,0 +1,21 @@
+import { resolveSettingsDestination } from '@/app/scenes/settings/settingsDestination';
+import type { SettingsDestinationInput } from '@/app/scenes/settings/settingsDestination';
+import migrations from '@/app/scenes/settings/settingsDestinationMigrations.json';
+import type { InteractiveCapabilityDestination } from './interactiveCapabilityCatalog';
+
+// Capability IDs are stable host contracts. Only their frontend destinations move.
+const CAPABILITY_DESTINATIONS: Readonly<Record<string, {
+  destination?: SettingsDestinationInput;
+  items?: Readonly<Record<string, SettingsDestinationInput>>;
+}>> = migrations.capabilities;
+
+export function projectSettingsCapabilityDestination(
+  capabilityId: string,
+  destination: InteractiveCapabilityDestination,
+  itemId?: string,
+): InteractiveCapabilityDestination {
+  if (destination.kind !== 'settings') return destination;
+  const migration = CAPABILITY_DESTINATIONS[capabilityId];
+  const override = (itemId ? migration?.items?.[itemId] : undefined) ?? migration?.destination;
+  return { kind: 'settings', ...resolveSettingsDestination(override ?? destination) };
+}
diff --git a/src/web-ui/src/app/scenes/settings/AGENTS.md b/src/web-ui/src/app/scenes/settings/AGENTS.md
new file mode 100644
index 0000000000..7c3ccb6533
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/AGENTS.md
@@ -0,0 +1,41 @@
+# Settings scene
+
+Follow `src/web-ui/AGENTS.md` and the settings control sizing rules in
+`src/web-ui/src/infrastructure/config/AGENTS.md`.
+
+## Ownership
+
+- `settingsRegistry.ts` owns category order, page destinations, lazy loading,
+  namespace preloading, and searchable inline sections.
+- `pages/{application,ai,development,tools,data}` owns settings presentation.
+  Configuration services, persisted shapes, host adapters, and reusable
+  configuration editors remain in infrastructure or their feature owners.
+- Name destination components `*SettingsPage` and inline content `*Section`.
+  Composed pages use `pages/shared/SettingsPage.tsx` for one title and one scroll
+  owner. Sections must not add page shells or secondary navigation. Existing
+  ACP connection modes are owned by the external-agent editor.
+- Keep Pet & assistant as a separate page containing pet preferences and real-time
+  voice calls. Voice dictation stays in Input & interaction. Keyboard shortcuts use one searchable list;
+  shortcut scopes still determine runtime dispatch and conflict semantics.
+- Navigation aliases belong in `settingsDestinationMigrations.json`, shared by
+  `settingsDestination.ts` and the capability catalog validator. Preserve old page and
+  view payloads; new callers use canonical destinations. `sectionId` scrolls
+  inside the current page and must not discard drafts or trigger a leave prompt.
+- Stable product-control capability IDs are host contracts. Project their UI
+  destinations in `app/global-search/settingsCapabilityDestination.ts`; do not
+  rename generated protocol IDs to match sidebar labels.
+- Moving a setting must preserve its execution host, remote capability gates,
+  unsupported states, persistence keys, and draft registration.
+
+## Focused verification
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/scenes/settings src/app/global-search/interactiveCapabilityActivator.test.ts src/infrastructure/config/settingsDraftRegistry.test.ts
+pnpm --dir src/web-ui run test:run src/infrastructure/config/components/common/SettingsControlSizing.test.ts
+```
+
+Follow the parent guide for `check:web`, i18n, and Appearance registration checks.
+When changing destination migrations or catalog source evidence, also run
+`pnpm run capabilities:generate`, `pnpm run capabilities:check`, and
+`pnpm run capabilities:test`; retain historical wire destinations for older clients.
+These source and DOM tests do not establish visual or remote runtime behavior.
diff --git a/src/web-ui/src/app/scenes/settings/SettingsContentTypography.test.ts b/src/web-ui/src/app/scenes/settings/SettingsContentTypography.test.ts
index 7fd79a089d..b868fe226f 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsContentTypography.test.ts
+++ b/src/web-ui/src/app/scenes/settings/SettingsContentTypography.test.ts
@@ -11,8 +11,8 @@ const headerStyles = readSource('../../../infrastructure/config/components/commo
 const pageHeaderStyles = readSource('../../../../../../design-system/packages/ui/src/components/PageHeader/PageHeader.module.css');
 const layoutStyles = readSource('../../../infrastructure/config/components/common/ConfigPageLayout.scss');
 const formStyles = readSource('../../../infrastructure/config/components/ConfigForm.scss');
-const appearanceStyles = readSource('../../../infrastructure/config/components/AppearanceSettingsPage.scss');
-const shortcutStyles = readSource('./components/KeyboardShortcutsTab.scss');
+const appearanceStyles = readSource('./pages/application/AppearanceSettingsPage.scss');
+const shortcutStyles = readSource('./pages/application/KeyboardShortcutsSection.scss');
 
 describe('Settings content typography', () => {
   it('maps the shared settings hierarchy to canonical semantic type roles', () => {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
index 11235ccbef..a5434e6484 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
@@ -10,15 +10,24 @@ vi.mock('./settingsRegistry', () => {
   const pages = [
     { id: 'application.general', categoryId: 'application', labelKey: 'General' },
     { id: 'application.appearance', categoryId: 'application', labelKey: 'Appearance' },
+    {
+      id: 'application.pet', categoryId: 'application', labelKey: 'Pet & assistant',
+      descriptionKey: 'Desktop pet and realtime voice calls',
+      sections: [
+        { id: 'pet', labelKey: 'Pet', keywords: ['companion'], searchPhrases: [] },
+        { id: 'voice-call', labelKey: 'Realtime voice calls', keywords: ['volcengine'], searchPhrases: [] },
+      ],
+    },
     { id: 'ai.models', categoryId: 'ai', labelKey: 'Models' },
-  ].map((page) => ({ ...page, descriptionKey: 'Description', keywords: ['settings'], searchPhrases: [] }));
+  ].map((page) => ({ descriptionKey: 'Description', keywords: ['settings'], searchPhrases: [], ...page }));
   return {
     DEFAULT_SETTINGS_PAGE_ID: 'application.general',
     SETTINGS_PAGE_MANIFESTS: pages,
     SETTINGS_CATEGORIES: [
-      { id: 'application', labelKey: 'Application', pages: pages.slice(0, 2) },
-      { id: 'ai', labelKey: 'AI', pages: pages.slice(2) },
+      { id: 'application', labelKey: 'Application', pages: pages.slice(0, 3) },
+      { id: 'ai', labelKey: 'AI', pages: pages.slice(3) },
     ],
+    getSettingsPageManifest: (id: string) => pages.find(page => page.id === id),
     isSettingsPageId: (value: string) => pages.some((page) => page.id === value),
     preloadSettingsPage: vi.fn(async () => undefined),
   };
@@ -91,7 +100,7 @@ describe('SettingsNav shared component composition', () => {
     expect(content.querySelectorAll('[data-openbitfun-part="heading-label"]')).toHaveLength(2);
     const caption = content.querySelector('.openbitfun-settings-nav__category-label')!;
     expect(caption.parentElement?.getAttribute('data-openbitfun-part')).toBe('heading-label');
-    expect(content.querySelectorAll('[data-testid="settings-nav-page"]')).toHaveLength(3);
+    expect(content.querySelectorAll('[data-testid="settings-nav-page"]')).toHaveLength(4);
   });
 
   it('drives the shared selected state from the active destination', async () => {
@@ -113,7 +122,7 @@ describe('SettingsNav shared component composition', () => {
   it('keeps two-line search results and keyboard selection working with real navigation items', async () => {
     const input = await search('settings');
     const results = container.querySelector<HTMLDivElement>('[role="listbox"]')!;
-    expect(results.querySelectorAll('[role="option"]')).toHaveLength(3);
+    expect(results.querySelectorAll('[role="option"]')).toHaveLength(4);
     const first = results.querySelector('[role="option"]')!;
     const label = first.querySelector('[data-openbitfun-part="label"]')!;
     expect(label.querySelector('.openbitfun-settings-nav__search-result-line')).not.toBeNull();
@@ -137,7 +146,7 @@ describe('SettingsNav shared component composition', () => {
     expect(container.querySelector('[role="status"]')).not.toBeNull();
     act(() => pressKey(input, 'Escape'));
     expect(input.value).toBe('');
-    expect(container.querySelectorAll('[data-testid="settings-nav-page"]')).toHaveLength(3);
+    expect(container.querySelectorAll('[data-testid="settings-nav-page"]')).toHaveLength(4);
     expect(container.querySelector('[role="status"]')).toBeNull();
   });
 
@@ -158,4 +167,20 @@ describe('SettingsNav shared component composition', () => {
     expect(models?.querySelector('[data-openbitfun-part="dirtyMarker"]')).not.toBeNull();
     expect(general?.querySelector('[data-openbitfun-part="dirtyMarker"]')).toBeNull();
   });
+
+  it('opens a matching inline section without matching its siblings through the page description', async () => {
+    const input = await search('realtime');
+    expect(container.querySelectorAll('[role="option"]')).toHaveLength(1);
+    await act(async () => pressKey(input, 'Enter'));
+    expect(useSettingsStore.getState().activePageId).toBe('application.pet');
+    expect(useSettingsStore.getState().activeSectionId).toBe('voice-call');
+  });
+
+  it('offers the page when only its shared name matches', async () => {
+    const input = await search('assistant');
+    expect(container.querySelectorAll('[role="option"]')).toHaveLength(1);
+    await act(async () => pressKey(input, 'Enter'));
+    expect(useSettingsStore.getState().activePageId).toBe('application.pet');
+    expect(useSettingsStore.getState().activeSectionId).toBeNull();
+  });
 });
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
index 630a784742..8a03a68c85 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
@@ -1,14 +1,7 @@
-import React, {
-  startTransition,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import type { i18n as I18nApi } from 'i18next';
-import { useTranslation } from 'react-i18next';
-import { OverflowText,
+import { useSettingsDraftSnapshot } from '@/infrastructure/config/settingsDraftRegistry';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
+import { getInteractionMotion } from '@/shared/utils/motionPreference';
+import {
   Icon,
   NavigationPanel,
   NavigationPanelBody,
@@ -16,11 +9,20 @@ import { OverflowText,
   NavigationPanelHeader,
   NavigationPanelItem,
   NavigationPanelSection,
+  OverflowText,
   SearchField,
 } from '@openbitfun/ui';
-import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
-import { useSettingsDraftSnapshot } from '@/infrastructure/config/settingsDraftRegistry';
-import { getInteractionMotion } from '@/shared/utils/motionPreference';
+import type { i18n as I18nApi } from 'i18next';
+import React, {
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import './SettingsNav.scss';
 import {
   SETTINGS_CATEGORIES,
   SETTINGS_PAGE_MANIFESTS,
@@ -29,7 +31,6 @@ import {
 } from './settingsRegistry';
 import { useSettingsStore } from './settingsStore';
 import type { SettingsDestination, SettingsPageId } from './settingsTypes';
-import './SettingsNav.scss';
 
 const SEARCH_DEBOUNCE_MS = 150;
 type SettingsT = (key: string, options?: Record<string, unknown>) => unknown;
@@ -38,7 +39,7 @@ export interface SettingsSearchRow {
   destination: SettingsDestination;
   categoryLabel: string;
   pageLabel: string;
-  viewLabel?: string;
+  targetLabel?: string;
   description: string;
   haystack: string;
 }
@@ -70,33 +71,35 @@ function buildSettingsSearchIndex(t: SettingsT, i18n: I18nApi): SettingsSearchRo
     const pageContent = resolvePhrases(i18n, page.searchPhrases);
     const base = [categoryLabel, pageLabel, description, page.id, ...page.keywords, pageContent];
 
-    if (!page.views?.length) {
-      return [{
+    const targets = [
+      ...(page.sections ?? []).map(section => ({ ...section, destination: { pageId: page.id, sectionId: section.id } })),
+      ...(page.views ?? []).map(view => ({ ...view, destination: { pageId: page.id, viewId: view.id } })),
+    ];
+    return [
+      {
         destination: { pageId: page.id },
         categoryLabel,
         pageLabel,
         description,
         haystack: base.join(' ').toLowerCase(),
-      }];
-    }
-
-    return page.views.map((view) => {
-      const viewLabel = translateString(t, view.labelKey, view.id);
-      return {
-        destination: { pageId: page.id, viewId: view.id },
-        categoryLabel,
-        pageLabel,
-        viewLabel,
-        description,
-        haystack: [
-          ...base,
-          viewLabel,
-          view.id,
-          ...view.keywords,
-          resolvePhrases(i18n, view.searchPhrases),
-        ].join(' ').toLowerCase(),
-      };
-    });
+      },
+      ...targets.map((target) => {
+        const targetLabel = translateString(t, target.labelKey, target.id);
+        return {
+          destination: target.destination,
+          categoryLabel,
+          pageLabel,
+          targetLabel,
+          description,
+          haystack: [
+            targetLabel,
+            target.id,
+            ...target.keywords,
+            resolvePhrases(i18n, target.searchPhrases),
+          ].join(' ').toLowerCase(),
+        };
+      }),
+    ];
   });
 }
 
@@ -125,6 +128,7 @@ const SettingsNav: React.FC = () => {
   const { t: tComponents } = useI18n('components');
   const activePageId = useSettingsStore((state) => state.activePageId);
   const activeViewId = useSettingsStore((state) => state.activeViewId);
+  const activeSectionId = useSettingsStore((state) => state.activeSectionId);
   const { resources: draftResources } = useSettingsDraftSnapshot();
   const openDestination = useSettingsStore((state) => state.openDestination);
   const searchQuery = useSettingsStore((state) => state.searchQuery);
@@ -143,7 +147,12 @@ const SettingsNav: React.FC = () => {
   const searchIndex = useMemo(() => buildSettingsSearchIndex(t, i18n), [i18n, t]);
   const results = useMemo(() => {
     const query = searchQuery.trim().toLowerCase();
-    return query ? searchIndex.filter((row) => row.haystack.includes(query)) : [];
+    if (!query) return [];
+    const matches = searchIndex.filter((row) => row.haystack.includes(query));
+    const matchedSections = new Set(matches
+      .filter((row) => row.targetLabel)
+      .map((row) => row.destination.pageId));
+    return matches.filter((row) => row.targetLabel || !matchedSections.has(row.destination.pageId));
   }, [searchIndex, searchQuery]);
   const isSearchMode = draftQuery.trim().length > 0;
   const dirtyPageIds = useMemo(() => new Set(
@@ -266,102 +275,103 @@ const SettingsNav: React.FC = () => {
       <NavigationPanelBody>
         <NavigationPanelContent className="openbitfun-settings-nav__content">
           {isSearchMode ? (
-        results.length ? (
-          <div
-            ref={resultsRef}
-            id="settings-nav-results"
-            className="openbitfun-settings-nav__search-results"
-            data-openbitfun-component="settings-nav"
-            data-openbitfun-part="searchResults"
-            role="listbox"
-            tabIndex={results.length ? 0 : undefined}
-            onKeyDown={handleResultsKeyDown}
-            aria-activedescendant={highlightedIndex >= 0
-              ? `settings-nav-result-${highlightedIndex}`
-              : undefined}
-          >
-            {results.map((row, index) => {
-              const active = activePageId === row.destination.pageId
-                && (!row.destination.viewId || row.destination.viewId === activeViewId);
-              const selected = index === highlightedIndex;
-              const path = [row.categoryLabel, row.pageLabel, row.viewLabel].filter(Boolean).join(' › ');
-              return (
-                <NavigationPanelItem data-overflow-trigger
-                  key={`${row.destination.pageId}:${row.destination.viewId ?? ''}`}
-                  id={`settings-nav-result-${index}`}
-                  role="option"
-                  aria-selected={active}
-                  selected={active}
+            results.length ? (
+              <div
+                ref={resultsRef}
+                id="settings-nav-results"
+                className="openbitfun-settings-nav__search-results"
+                data-openbitfun-component="settings-nav"
+                data-openbitfun-part="searchResults"
+                role="listbox"
+                tabIndex={results.length ? 0 : undefined}
+                onKeyDown={handleResultsKeyDown}
+                aria-activedescendant={highlightedIndex >= 0
+                  ? `settings-nav-result-${highlightedIndex}`
+                  : undefined}
+              >
+                {results.map((row, index) => {
+                  const active = activePageId === row.destination.pageId
+                    && (!row.destination.viewId || row.destination.viewId === activeViewId)
+                    && (!row.destination.sectionId || row.destination.sectionId === activeSectionId);
+                  const selected = index === highlightedIndex;
+                  const path = [row.categoryLabel, row.pageLabel, row.targetLabel].filter(Boolean).join(' › ');
+                  return (
+                    <NavigationPanelItem data-overflow-trigger
+                      key={`${row.destination.pageId}:${row.destination.sectionId ?? row.destination.viewId ?? ''}`}
+                      id={`settings-nav-result-${index}`}
+                      role="option"
+                      aria-selected={active}
+                      selected={active}
+                      data-openbitfun-component="settings-nav"
+                      data-openbitfun-part="searchResult"
+                      data-openbitfun-state={[active && 'active', selected && 'selected'].filter(Boolean).join(' ') || undefined}
+                      className={[
+                        'openbitfun-settings-nav__search-result-item',
+                        selected && 'is-highlighted',
+                        active && 'is-active',
+                      ].filter(Boolean).join(' ')}
+                      onClick={() => activate(row.destination, true)}
+                      onMouseEnter={() => {
+                        setHighlightedIndex(index);
+                        preload(row.destination.pageId);
+                      }}
+                      onFocus={() => preload(row.destination.pageId)}
+                    >
+                      <span className="openbitfun-settings-nav__search-result-copy">
+                        <OverflowText behavior="marquee" className="openbitfun-settings-nav__search-result-line">
+                          {highlightFirstMatch(path, searchQuery)}
+                        </OverflowText>
+                        <OverflowText behavior="marquee" className="openbitfun-settings-nav__search-result-desc">
+                          {highlightFirstMatch(row.description, searchQuery)}
+                        </OverflowText>
+                      </span>
+                      {dirtyMarker(row.destination.pageId)}
+                    </NavigationPanelItem>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="openbitfun-settings-nav__search-empty" role="status" data-openbitfun-component="settings-nav" data-openbitfun-part="searchEmpty">
+                {t('navigation.search.empty')}
+              </div>
+            )
+          ) : SETTINGS_CATEGORIES.map((category) => (
+            <NavigationPanelSection
+              key={category.id}
+              className="openbitfun-settings-nav__category"
+              data-openbitfun-component="settings-nav"
+              data-openbitfun-part="category"
+              title={(
+                <span
+                  className="openbitfun-settings-nav__category-label"
                   data-openbitfun-component="settings-nav"
-                  data-openbitfun-part="searchResult"
-                  data-openbitfun-state={[active && 'active', selected && 'selected'].filter(Boolean).join(' ') || undefined}
-                  className={[
-                    'openbitfun-settings-nav__search-result-item',
-                    selected && 'is-highlighted',
-                    active && 'is-active',
-                  ].filter(Boolean).join(' ')}
-                  onClick={() => activate(row.destination, true)}
-                  onMouseEnter={() => {
-                    setHighlightedIndex(index);
-                    preload(row.destination.pageId);
-                  }}
-                  onFocus={() => preload(row.destination.pageId)}
+                  data-openbitfun-part="categoryHeader"
                 >
-                  <span className="openbitfun-settings-nav__search-result-copy">
-                    <OverflowText behavior="marquee" className="openbitfun-settings-nav__search-result-line">
-                      {highlightFirstMatch(path, searchQuery)}
-                    </OverflowText>
-                    <OverflowText behavior="marquee" className="openbitfun-settings-nav__search-result-desc">
-                      {highlightFirstMatch(row.description, searchQuery)}
-                    </OverflowText>
-                  </span>
-                  {dirtyMarker(row.destination.pageId)}
-                </NavigationPanelItem>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="openbitfun-settings-nav__search-empty" role="status" data-openbitfun-component="settings-nav" data-openbitfun-part="searchEmpty">
-            {t('navigation.search.empty')}
-          </div>
-        )
-      ) : SETTINGS_CATEGORIES.map((category) => (
-        <NavigationPanelSection
-          key={category.id}
-          className="openbitfun-settings-nav__category"
-          data-openbitfun-component="settings-nav"
-          data-openbitfun-part="category"
-          title={(
-            <span
-              className="openbitfun-settings-nav__category-label"
-              data-openbitfun-component="settings-nav"
-              data-openbitfun-part="categoryHeader"
+                  {t(category.labelKey)}
+                </span>
+              )}
             >
-              {t(category.labelKey)}
-            </span>
-          )}
-        >
-          <div className="openbitfun-settings-nav__items" data-openbitfun-component="settings-nav" data-openbitfun-part="items">
-          {category.pages.map((page) => (
-            <NavigationPanelItem data-overflow-trigger
-              key={page.id}
-              data-testid="settings-nav-page"
-              data-settings-page={page.id}
-              data-openbitfun-component="settings-nav"
-              data-openbitfun-part="item"
-              data-openbitfun-state={activePageId === page.id ? 'active' : undefined}
-              className="openbitfun-settings-nav__item"
-              selected={activePageId === page.id}
-              onClick={() => activate({ pageId: page.id })}
-              onPointerEnter={() => preload(page.id)}
-              onFocus={() => preload(page.id)}
-            >
-              <OverflowText className="openbitfun-settings-nav__item-label">{t(page.labelKey)}</OverflowText>
-              {dirtyMarker(page.id)}
-            </NavigationPanelItem>
-          ))}
-          </div>
-        </NavigationPanelSection>
+              <div className="openbitfun-settings-nav__items" data-openbitfun-component="settings-nav" data-openbitfun-part="items">
+                {category.pages.map((page) => (
+                  <NavigationPanelItem data-overflow-trigger
+                    key={page.id}
+                    data-testid="settings-nav-page"
+                    data-settings-page={page.id}
+                    data-openbitfun-component="settings-nav"
+                    data-openbitfun-part="item"
+                    data-openbitfun-state={activePageId === page.id ? 'active' : undefined}
+                    className="openbitfun-settings-nav__item"
+                    selected={activePageId === page.id}
+                    onClick={() => activate({ pageId: page.id })}
+                    onPointerEnter={() => preload(page.id)}
+                    onFocus={() => preload(page.id)}
+                  >
+                    <OverflowText className="openbitfun-settings-nav__item-label">{t(page.labelKey)}</OverflowText>
+                    {dirtyMarker(page.id)}
+                  </NavigationPanelItem>
+                ))}
+              </div>
+            </NavigationPanelSection>
           ))}
         </NavigationPanelContent>
       </NavigationPanelBody>
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
index f5c36cf583..21cc93460b 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
@@ -25,7 +25,8 @@ vi.mock('./settingsRegistry', () => {
     'tools.automation': {
       id: 'tools.automation',
       categoryId: 'tools',
-      component: ({ viewId }: { viewId?: string }) => <div data-testid="automation-page" data-view={viewId} />,
+      sections: [{ id: 'hooks' }],
+      component: ({ sectionId }: { sectionId?: string }) => <div data-testid="automation-page" data-section={sectionId} />,
     },
   };
   return {
@@ -56,6 +57,7 @@ describe('SettingsScene canonical page routing', () => {
     useSettingsStore.setState({
       activePageId: 'application.general',
       activeViewId: null,
+      activeSectionId: null,
       navigationRequestId: 0,
       pageTransitionTarget: null,
       pageTransitionMotion: 'instant',
@@ -76,13 +78,13 @@ describe('SettingsScene canonical page routing', () => {
     expect(container.querySelector('[data-settings-page="application.general"]')).not.toBeNull();
   });
 
-  it('passes an internal view destination without creating a sidebar page', async () => {
+  it('migrates an old internal view to an inline section without creating a sidebar page', async () => {
     useSettingsStore.getState().openDestination({
       pageId: 'tools.automation',
       viewId: 'hooks',
     });
     await act(async () => root.render(<SettingsScene />));
-    expect(container.querySelector('[data-testid="automation-page"]')?.getAttribute('data-view')).toBe('hooks');
+    expect(container.querySelector('[data-testid="automation-page"]')?.getAttribute('data-section')).toBe('hooks');
   });
 
   it('switches pages without retaining the outgoing page for instant navigation', async () => {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
index 094fb4473c..b862b13950 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
@@ -1,6 +1,3 @@
-import React, { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { ConfirmDialog } from '@openbitfun/ui';
-import { useTranslation } from 'react-i18next';
 import { NavigationTransitionBoundary } from '@/app/navigation/NavigationTransitionBoundary';
 import {
   cancelPendingSettingsNavigation,
@@ -8,14 +5,17 @@ import {
   saveAndContinueSettingsNavigation,
   useSettingsDraftSnapshot,
 } from '@/infrastructure/config/settingsDraftRegistry';
+import { ConfirmDialog } from '@openbitfun/ui';
+import React, { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   getSettingsPageManifest,
   isSettingsPageReady,
   preloadSettingsPage,
 } from './settingsRegistry';
+import './SettingsScene.scss';
 import { useSettingsStore } from './settingsStore';
 import type { SettingsPageId } from './settingsTypes';
-import './SettingsScene.scss';
 
 function SettingsSceneLoading() {
   return (
@@ -42,6 +42,7 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
   const { t } = useTranslation('settings');
   const activePageId = useSettingsStore((state) => state.activePageId);
   const activeViewId = useSettingsStore((state) => state.activeViewId);
+  const activeSectionId = useSettingsStore((state) => state.activeSectionId);
   const navigationRequestId = useSettingsStore((state) => state.navigationRequestId);
   const pageTransitionTarget = useSettingsStore((state) => state.pageTransitionTarget);
   const pageTransitionMotion = useSettingsStore((state) => state.pageTransitionMotion);
@@ -106,6 +107,7 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
               <Content
                 isActive={isActive}
                 viewId={activeViewId ?? undefined}
+                sectionId={activeSectionId ?? undefined}
                 navigationRequestId={navigationRequestId}
               />
             </Suspense>
@@ -119,8 +121,8 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
         message={pendingNavigation?.failed
           ? t('changeGuard.saveFailed')
           : t('changeGuard.message', {
-              count: pendingNavigation?.resourceLabels.length ?? 0,
-            })}
+            count: pendingNavigation?.resourceLabels.length ?? 0,
+          })}
         preview={pendingNavigation?.resourceLabels.length ? (
           <ul className="openbitfun-settings-scene__draft-list">
             {pendingNavigation.resourceLabels.map((label, index) => (
diff --git a/src/web-ui/src/app/scenes/settings/appearance.ts b/src/web-ui/src/app/scenes/settings/appearance.ts
index 659ceeb9f3..bdfd23d3d2 100644
--- a/src/web-ui/src/app/scenes/settings/appearance.ts
+++ b/src/web-ui/src/app/scenes/settings/appearance.ts
@@ -14,19 +14,19 @@ export const settingsAppearanceDescriptor: AppearanceSurfaceDescriptor = {
       'application.general',
       'application.appearance',
       'application.pet',
-      'application.voice',
-      'application.shortcuts',
-      'application.terminal',
-      'application.editor',
+      'application.input',
       'ai.models',
-      'ai.memory',
-      'workspace.session',
-      'workspace.worktrees',
-      'tools.execution',
+      'ai.session-memory',
+      'ai.execution',
+      'ai.permissions',
+      'development.editor',
+      'development.terminal',
+      'development.workspace',
+      'tools.web-search',
       'tools.desktop-control',
-      'tools.automation',
       'tools.mcp',
-      'tools.acp',
+      'tools.external-agents',
+      'tools.automation',
       'data.usage',
       'data.archived',
       'data.diagnostics',
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
deleted file mode 100644
index 4a38688700..0000000000
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.kb-shortcuts {
-  &__toolbar {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-  }
-
-  /** Design-system `SearchField` — align with settings nav capsule */
-  &__search {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-
-  &__error {
-    padding: 8px 12px;
-    margin-bottom: 16px;
-    border-radius: 6px;
-    background: var(--openbitfun-color-status-danger-surface);
-    color: var(--openbitfun-color-status-danger-content);
-    font-size: var(--openbitfun-type-label-md-font-size);
-  }
-
-  &__list {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    border-radius: 6px;
-
-    &:hover {
-      background: var(--openbitfun-color-action-neutral-surface-hover);
-    }
-
-    &--recording {
-      background: var(--openbitfun-color-action-secondary-background);
-    }
-
-    &--conflict {
-      background: var(--openbitfun-color-status-warning-surface);
-    }
-
-    &--modified .kb-shortcuts__item-name {
-      font-style: italic;
-    }
-  }
-
-  &__item-label {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__item-name {
-    font-size: var(--openbitfun-type-label-md-font-size);
-    color: var(--openbitfun-color-content-primary);
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &__item-hint {
-    font-size: var(--openbitfun-type-micro-font-size);
-    line-height: var(--openbitfun-type-meta-line-height);
-    color: var(--openbitfun-color-content-muted);
-    font-weight: var(--openbitfun-type-body-sm-font-weight);
-    white-space: normal;
-    opacity: 0.62;
-  }
-
-  &__item-conflict-hint {
-    font-size: var(--openbitfun-type-meta-font-size);
-    color: var(--openbitfun-color-status-warning-content);
-  }
-
-  &__item-key {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
-    margin-left: 16px;
-  }
-
-  &__item--merged {
-    opacity: 0.95;
-  }
-
-  &__empty {
-    padding: 32px;
-    text-align: center;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-body-md-font-size);
-  }
-}
diff --git a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.appearance.ts b/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.appearance.ts
deleted file mode 100644
index 65cd75c61f..0000000000
--- a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.appearance.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const settingsViewPageAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'settings-view-page',
-  parts: [
-    { id: 'root', propertyProfile: 'layout', visualRole: 'content' },
-    { id: 'loading', propertyProfile: 'overlay', visualRole: 'content' },
-    { id: 'loadingLine', propertyProfile: 'paint', visualRole: 'decoration' },
-    { id: 'loadingBlock', propertyProfile: 'paint', visualRole: 'decoration' },
-  ],
-  facets: [{
-    id: 'view',
-    attribute: 'data-openbitfun-view',
-    values: ['voice', 'shortcuts', 'editor', 'terminal', 'quick-actions', 'hooks'],
-  }],
-};
diff --git a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.scss b/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.scss
deleted file mode 100644
index 0191b39887..0000000000
--- a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.openbitfun-settings-view-page {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-
-  &__tabs {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
-
-  }
-
-  &__tab-list {
-    flex: 0 0 auto;
-    margin: var(--openbitfun-space-3) var(--openbitfun-space-6) 0;
-  }
-
-  &__tab-content {
-    flex: 1 1 auto;
-    width: 100%;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  &__loading {
-    display: grid;
-    gap: var(--openbitfun-space-3);
-    padding: var(--openbitfun-space-6);
-  }
-
-  &__loading-line,
-  &__loading-block {
-    border-radius: var(--openbitfun-radius-sm);
-    background: var(--openbitfun-color-surface-subtle);
-  }
-
-  &__loading-line {
-    width: min(320px, 70%);
-    height: 12px;
-  }
-
-  &__loading-block {
-    height: 96px;
-  }
-}
diff --git a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.tsx b/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.tsx
deleted file mode 100644
index 64f0c9dd82..0000000000
--- a/src/web-ui/src/app/scenes/settings/components/SettingsViewPage.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Suspense, useMemo } from 'react';
-import { TabGroup } from '@openbitfun/ui';
-import { useSettingsStore } from '../settingsStore';
-import type { SettingsPageProps, SettingsViewId } from '../settingsTypes';
-import './SettingsViewPage.scss';
-
-export interface SettingsViewDefinition {
-  id: SettingsViewId;
-  label: React.ReactNode;
-  content: React.ReactNode;
-}
-
-interface SettingsViewPageProps extends SettingsPageProps {
-  defaultViewId: SettingsViewId;
-  views: readonly SettingsViewDefinition[];
-}
-
-export const SettingsViewPage: React.FC<SettingsViewPageProps> = ({
-  defaultViewId,
-  views,
-  viewId,
-}) => {
-  const setActiveView = useSettingsStore((state) => state.setActiveView);
-  const allowedViewIds = useMemo(() => new Set(views.map((view) => view.id)), [views]);
-  const activeViewId = viewId && allowedViewIds.has(viewId) ? viewId : defaultViewId;
-  const activeView = views.find((view) => view.id === activeViewId) ?? views[0];
-  const tabItems = views.map((view) => ({
-    id: `settings-view-${view.id}-tab`,
-    label: view.label,
-    panelId: `settings-view-${view.id}-panel`,
-    value: view.id,
-  }));
-
-  const handleChange = (nextViewId: string) => {
-    if (!allowedViewIds.has(nextViewId as SettingsViewId)) return;
-    const next = nextViewId as SettingsViewId;
-    setActiveView(next);
-  };
-
-  return (
-    <div
-      className="openbitfun-settings-view-page"
-      data-openbitfun-component="settings-view-page"
-      data-openbitfun-part="root"
-      data-openbitfun-view={activeViewId}
-    >
-      <div className="openbitfun-settings-view-page__tabs">
-        <TabGroup
-          size="sm"
-          className="openbitfun-settings-view-page__tab-list"
-          items={tabItems}
-          onValueChange={handleChange}
-          value={activeViewId}
-        />
-        {activeView && (
-          <div
-            aria-labelledby={`settings-view-${activeView.id}-tab`}
-            className="openbitfun-settings-view-page__tab-content"
-            id={`settings-view-${activeView.id}-panel`}
-            role="tabpanel"
-          >
-            <Suspense fallback={(
-              <div
-                className="openbitfun-settings-view-page__loading"
-                data-openbitfun-component="settings-view-page"
-                data-openbitfun-part="loading"
-                aria-busy="true"
-                aria-hidden="true"
-              >
-                <span className="openbitfun-settings-view-page__loading-line" data-openbitfun-component="settings-view-page" data-openbitfun-part="loadingLine" />
-                <span className="openbitfun-settings-view-page__loading-line" data-openbitfun-component="settings-view-page" data-openbitfun-part="loadingLine" />
-                <span className="openbitfun-settings-view-page__loading-block" data-openbitfun-component="settings-view-page" data-openbitfun-part="loadingBlock" />
-              </div>
-            )}>
-              {activeView.content}
-            </Suspense>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.presentation.test.ts
deleted file mode 100644
index 2c0da20090..0000000000
--- a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.presentation.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { describe, expect, it } from 'vitest';
-
-function readSource(relativePath: string): string {
-  return readFileSync(
-    fileURLToPath(new URL(relativePath, import.meta.url)),
-    'utf8',
-  );
-}
-
-describe('AutomationSettingsPage structure', () => {
-  it('keeps quick actions and Hooks in one continuous page without tabs', () => {
-    const source = readSource('./AutomationSettingsPage.tsx');
-    const quickActionsIndex = source.indexOf('<QuickActionsConfig />');
-    const hooksIndex = source.indexOf('<HooksConfig />');
-
-    expect(quickActionsIndex).toBeGreaterThan(-1);
-    expect(hooksIndex).toBeGreaterThan(quickActionsIndex);
-    expect(source).not.toContain('SettingsViewPage');
-    expect(source).not.toContain('<Tabs');
-    expect(source).not.toContain('<TabPane');
-  });
-
-  it('separates quick actions and Hooks with whitespace instead of a divider', () => {
-    const styles = readSource('./AutomationSettingsPage.scss');
-    const hooksRule = styles.match(/&--hooks\s*{([^}]*)}/)?.[1] ?? '';
-
-    expect(hooksRule).toContain('margin-top');
-    expect(hooksRule).not.toContain('border');
-  });
-});
diff --git a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.scss
deleted file mode 100644
index bbe0af8ffe..0000000000
--- a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.openbitfun-automation-settings-page {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  /* ScrollArea owns overflow. */
-  background: var(--openbitfun-color-surface-scene);
-
-  &__section {
-    min-width: 0;
-    scroll-margin-top: var(--openbitfun-space-4);
-
-    > .openbitfun-config-page-layout {
-      height: auto;
-      overflow: visible;
-      background: transparent;
-    }
-
-    &:not(:last-child) > .openbitfun-config-page-layout > .openbitfun-config-page-layout__scroll-end-spacer {
-      height: 0;
-    }
-
-    &--hooks {
-      margin-top: var(--openbitfun-space-4);
-    }
-  }
-
-  &__loading {
-    display: grid;
-    gap: var(--openbitfun-space-3);
-    padding: var(--openbitfun-space-8);
-
-    > span {
-      width: min(320px, 70%);
-      height: 12px;
-      border-radius: var(--openbitfun-radius-sm);
-      background: var(--openbitfun-color-surface-subtle);
-    }
-
-    > .openbitfun-automation-settings-page__loading-block {
-      width: min(760px, 100%);
-      height: 96px;
-    }
-  }
-}
diff --git a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.tsx
deleted file mode 100644
index b98a28e05f..0000000000
--- a/src/web-ui/src/app/scenes/settings/pages/AutomationSettingsPage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { lazyWithRecovery } from '@/shared/utils/lazyWithRecovery';
-import { ScrollArea } from '@openbitfun/ui';
-import React, { Suspense, useEffect, useRef } from 'react';
-import type { SettingsPageProps } from '../settingsTypes';
-import './AutomationSettingsPage.scss';
-
-const QuickActionsConfig = lazyWithRecovery(() => import('@/infrastructure/config/components/QuickActionsConfig'));
-const HooksConfig = lazyWithRecovery(() => import('@/infrastructure/config/components/HooksConfig'));
-
-function AutomationSettingsLoading() {
-  return (
-    <div className="openbitfun-automation-settings-page__loading" aria-busy="true" aria-hidden="true">
-      <span />
-      <span />
-      <span className="openbitfun-automation-settings-page__loading-block" />
-    </div>
-  );
-}
-
-const AutomationSettingsPage: React.FC<SettingsPageProps> = ({ viewId, navigationRequestId }) => {
-  const quickActionsSectionRef = useRef<HTMLElement>(null);
-  const hooksSectionRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const target = viewId === 'hooks' ? hooksSectionRef.current : quickActionsSectionRef.current;
-    target?.scrollIntoView?.({ block: 'start' });
-  }, [navigationRequestId, viewId]);
-
-  return (
-    <ScrollArea
-      className="openbitfun-automation-settings-page"
-      data-openbitfun-component="automation-settings-page"
-      data-openbitfun-part="root"
-    >
-      <section
-        ref={quickActionsSectionRef}
-        className="openbitfun-automation-settings-page__section"
-        data-openbitfun-component="automation-settings-page"
-        data-openbitfun-part="quickActions"
-      >
-        <Suspense fallback={<AutomationSettingsLoading />}>
-          <QuickActionsConfig />
-        </Suspense>
-      </section>
-      <section
-        ref={hooksSectionRef}
-        className="openbitfun-automation-settings-page__section openbitfun-automation-settings-page__section--hooks"
-        data-openbitfun-component="automation-settings-page"
-        data-openbitfun-part="hooks"
-      >
-        <Suspense fallback={<AutomationSettingsLoading />}>
-          <HooksConfig />
-        </Suspense>
-      </section>
-    </ScrollArea>
-  );
-};
-
-export default AutomationSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/EditorSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/EditorSettingsPage.tsx
deleted file mode 100644
index ff3d6ee2b6..0000000000
--- a/src/web-ui/src/app/scenes/settings/pages/EditorSettingsPage.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import EditorConfig from '@/infrastructure/config/components/EditorConfig';
-import type { SettingsPageProps } from '../settingsTypes';
-
-const EditorSettingsPage: React.FC<SettingsPageProps> = () => <EditorConfig />;
-
-export default EditorSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/ExecutionSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ExecutionSettingsPage.tsx
deleted file mode 100644
index 281340326f..0000000000
--- a/src/web-ui/src/app/scenes/settings/pages/ExecutionSettingsPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {
-  ExecutionSettingsPage as RuntimeExecutionSettingsPage,
-} from '@/infrastructure/config/components/RuntimeSettingsPages';
-import type { SettingsPageProps } from '../settingsTypes';
-
-const ExecutionSettingsPage: React.FC<SettingsPageProps> = () => (
-  <RuntimeExecutionSettingsPage />
-);
-
-export default ExecutionSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.test.tsx
similarity index 97%
rename from src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.test.tsx
index 7a248201d9..2b5b5479b4 100644
--- a/src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.test.tsx
@@ -4,7 +4,7 @@ import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { ChatInputModePreference } from '@/flow_chat/services/ChatInputModePreferenceService';
-import { DefaultHarnessConfig } from './DefaultHarnessConfig';
+import { DefaultHarnessSection } from '@/app/scenes/settings/pages/ai/DefaultHarnessSection';
 
 const mocks = vi.hoisted(() => ({
   preference: {
@@ -70,7 +70,7 @@ vi.mock('@openbitfun/ui', async original => ({
   ),
 }));
 
-describe('DefaultHarnessConfig', () => {
+describe('DefaultHarnessSection', () => {
   let container: HTMLDivElement;
   let root: Root;
 
@@ -110,7 +110,7 @@ describe('DefaultHarnessConfig', () => {
   });
 
   const render = async () => {
-    await act(async () => root.render(<DefaultHarnessConfig />));
+    await act(async () => root.render(<DefaultHarnessSection />));
   };
 
   it('shows follow-last memory and reveals a seeded fixed selector when requested', async () => {
diff --git a/src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
similarity index 95%
rename from src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
index 9454c17f57..7bfd32400c 100644
--- a/src/web-ui/src/infrastructure/config/components/DefaultHarnessConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
@@ -5,27 +5,27 @@ import { useTranslation } from 'react-i18next';
 
 import {
   chatInputModePreferenceService,
-  type ChatInputDefaultModeStrategy,
-  type ChatInputModePreference,
   withChatInputDefaultModeStrategy,
   withFixedChatInputDefaultMode,
+  type ChatInputDefaultModeStrategy,
+  type ChatInputModePreference,
 } from '@/flow_chat/services/ChatInputModePreferenceService';
-import { createLogger } from '@/shared/utils/logger';
-import { notificationService } from '@/shared/notification-system';
 import {
   ConfigLoadingState,
   ConfigPageRow,
   ConfigPageSection,
   ConfigRetryState,
-} from './common';
+} from '@/infrastructure/config/components/common';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
 
-const log = createLogger('DefaultHarnessConfig');
+const log = createLogger('DefaultHarnessSection');
 
 function selectValue(value: string | number | (string | number)[]): string {
   return String(Array.isArray(value) ? value[0] ?? '' : value);
 }
 
-export function DefaultHarnessConfig(): React.ReactElement {
+export function DefaultHarnessSection(): React.ReactElement {
   const { t } = useTranslation('settings/runtime');
   const { t: tFlowChat } = useTranslation('flow-chat');
   const [preference, setPreference] = useState<ChatInputModePreference | null>(null);
@@ -156,11 +156,11 @@ export function DefaultHarnessConfig(): React.ReactElement {
   } else {
     const followLastDescription = preference.lastModeId
       ? t('defaultHarness.followLastDescription', {
-          name: labelForMode(preference.lastModeId),
-        })
+        name: labelForMode(preference.lastModeId),
+      })
       : t('defaultHarness.followLastEmptyDescription', {
-          name: labelForMode('Standard'),
-        });
+        name: labelForMode('Standard'),
+      });
     content = (
       <>
         <ConfigPageRow
@@ -220,4 +220,4 @@ export function DefaultHarnessConfig(): React.ReactElement {
   );
 }
 
-export default DefaultHarnessConfig;
+export default DefaultHarnessSection;
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
new file mode 100644
index 0000000000..eafa7bcfea
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
@@ -0,0 +1,484 @@
+import ReviewCapacitySection from '@/app/scenes/settings/pages/ai/ReviewCapacitySection';
+import ToolJsonRepairSection from '@/app/scenes/settings/pages/ai/ToolJsonRepairSection';
+import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
+import { useSceneStore } from '@/app/stores/sceneStore';
+import {
+  ConfigLoadingState,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigRetryState,
+  formatStandaloneUiText
+} from '@/infrastructure/config/components/common';
+import { useModelSelectPresentation } from '@/infrastructure/config/components/ModelSelectPresentation';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import type {
+  AIModelConfig,
+  SubagentModelSelection
+} from '@/infrastructure/config/types';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Combobox,
+  Icon,
+  IconButton,
+  NumberInput,
+  Select,
+  Switch,
+  Tooltip,
+  type ComboboxOption,
+  type SelectOption
+} from '@openbitfun/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+type DescribedSelectOption = SelectOption & { description?: string };
+
+const log = createLogger('ExecutionSettingsPage');
+
+type SubagentBatchExecutionPolicy = 'safe_only' | 'force_parallel' | 'serial';
+
+const DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY: SubagentBatchExecutionPolicy = 'force_parallel';
+
+const DEFAULT_SUBAGENT_MAX_CONCURRENCY = 5;
+
+const DEFAULT_SWARM_MAX_CONCURRENCY = 16;
+
+const SUBAGENT_MAX_CONCURRENCY_LIMIT = 32;
+
+const SWARM_MAX_CONCURRENCY_LIMIT = 64;
+
+function normalizeSubagentBatchExecutionPolicy(value: unknown): SubagentBatchExecutionPolicy {
+  return value === 'force_parallel' || value === 'serial' || value === 'safe_only'
+    ? value
+    : DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY;
+}
+
+const ExecutionSettingsPage: React.FC = () => {
+  const { t } = useTranslation('settings/runtime');
+
+  const { t: tTools } = useTranslation('settings/agentic-tools');
+
+  const { t: tModels } = useTranslation('settings/models');
+
+  const { buildModelOption } = useModelSelectPresentation();
+
+  const [subagentDefaultModel, setSubagentDefaultModel] = useState<SubagentModelSelection>({ kind: 'fixed', model_id: 'fast' });
+
+  const [configuredModels, setConfiguredModels] = useState<AIModelConfig[]>([]);
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [loadError, setLoadError] = useState(false);
+
+  const hasLoadedPageDataRef = useRef(false);
+
+  const [enableDeferredToolLoading, setEnableDeferredToolLoading] = useState(true);
+
+  const [subagentMaxConcurrency, setSubagentMaxConcurrency] = useState(DEFAULT_SUBAGENT_MAX_CONCURRENCY);
+
+  const [swarmMaxConcurrency, setSwarmMaxConcurrency] = useState(DEFAULT_SWARM_MAX_CONCURRENCY);
+
+  const [executionTimeout, setExecutionTimeout] = useState('');
+
+  const [userQuestionTimeout, setUserQuestionTimeout] = useState('180');
+
+  const [subagentBatchExecutionPolicy, setSubagentBatchExecutionPolicy] =
+    useState<SubagentBatchExecutionPolicy>(DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY);
+
+  const [toolExecConfigLoading, setToolExecConfigLoading] = useState(false);
+
+  const [deferredToolLoadingConfigSaving, setDeferredToolLoadingConfigSaving] = useState(false);
+
+  const subagentBatchExecutionPolicyOptions: DescribedSelectOption[] = [
+    {
+      value: 'safe_only',
+      label: tTools('config.subagentBatchPolicy.safeOnly'),
+      description: tTools('config.subagentBatchPolicy.safeOnlyDesc'),
+    },
+    {
+      value: 'force_parallel',
+      label: tTools('config.subagentBatchPolicy.forceParallel'),
+      description: tTools('config.subagentBatchPolicy.forceParallelDesc'),
+    },
+  ];
+
+  const handleDeferredToolLoadingChange = async (checked: boolean) => {
+    const previous = enableDeferredToolLoading;
+    setEnableDeferredToolLoading(checked);
+    setDeferredToolLoadingConfigSaving(true);
+    try {
+      await configManager.setConfig('ai.enable_deferred_tool_loading', checked);
+      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
+    } catch (error) {
+      log.error('Failed to save enable_deferred_tool_loading', error);
+      notificationService.error(
+        `${t('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
+      );
+      setEnableDeferredToolLoading(previous);
+    } finally {
+      setDeferredToolLoadingConfigSaving(false);
+    }
+  };
+
+  const handleSubagentBatchExecutionPolicyChange = async (value: string | number | (string | number)[]) => {
+    const nextPolicy = normalizeSubagentBatchExecutionPolicy(Array.isArray(value) ? value[0] : value);
+    const previousPolicy = subagentBatchExecutionPolicy;
+    setSubagentBatchExecutionPolicy(nextPolicy);
+    setToolExecConfigLoading(true);
+    try {
+      await configManager.setConfig('ai.subagent_batch_execution_policy', nextPolicy);
+      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
+      const { globalEventBus } = await import('@/infrastructure/event-bus');
+      globalEventBus.emit('mode:config:updated');
+    } catch (error) {
+      log.error('Failed to save subagent_batch_execution_policy', error);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
+      );
+      setSubagentBatchExecutionPolicy(previousPolicy);
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const subagentModelValue = subagentDefaultModel.kind === 'inherit' ? 'inherit' : subagentDefaultModel.model_id;
+
+  const subagentModelOptions: ComboboxOption[] = [
+    { value: 'inherit', label: tTools('config.subagentModelInherit') },
+    { value: 'fast', label: tModels('sessionTitle.model.fast') },
+    { value: 'primary', label: tModels('sessionTitle.model.primary') },
+    ...configuredModels.filter(model => model.enabled && model.id).map(buildModelOption),
+  ];
+
+  const handleSubagentDefaultModelChange = async (value: string | number) => {
+    const selection: SubagentModelSelection = value === 'inherit'
+      ? { kind: 'inherit' }
+      : { kind: 'fixed', model_id: String(value) };
+    setToolExecConfigLoading(true);
+    try {
+      await configManager.setConfig('ai.agent_model_defaults.subagents.default', selection);
+      setSubagentDefaultModel(selection);
+      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
+    } catch (error) {
+      log.error('Failed to save default subagent model', error);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
+      );
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const handleSwarmMaxConcurrencyChange = async (input: number) => {
+    if (!Number.isFinite(input)) return;
+    const value = Math.min(SWARM_MAX_CONCURRENCY_LIMIT, Math.max(1, Math.round(input)));
+    const previous = swarmMaxConcurrency;
+    setSwarmMaxConcurrency(value);
+    setToolExecConfigLoading(true);
+    try {
+      await configManager.setConfig('ai.swarm_max_concurrency', value);
+      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
+    } catch (error) {
+      log.error('Failed to save swarm_max_concurrency', error);
+      setSwarmMaxConcurrency(previous);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
+      );
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const handleSubagentMaxConcurrencyChange = async (input: number) => {
+    if (!Number.isFinite(input)) return;
+    const value = Math.min(SUBAGENT_MAX_CONCURRENCY_LIMIT, Math.max(1, Math.round(input)));
+    const previous = subagentMaxConcurrency;
+    setSubagentMaxConcurrency(value);
+    setToolExecConfigLoading(true);
+    try {
+      await configManager.setConfig('ai.subagent_max_concurrency', value);
+      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
+    } catch (error) {
+      log.error('Failed to save subagent_max_concurrency', error);
+      setSubagentMaxConcurrency(previous);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
+      );
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const handleToolTimeoutChange = async (value: string) => {
+    const configKey = 'ai.tool_execution_timeout_secs';
+    const trimmedValue = value.trim();
+    if (trimmedValue !== '') {
+      const numValue = parseInt(trimmedValue, 10);
+      if (Number.isNaN(numValue) || numValue < 0) return;
+    }
+    const previous = executionTimeout;
+    setExecutionTimeout(trimmedValue);
+    setToolExecConfigLoading(true);
+    const numValue = trimmedValue === '' ? null : parseInt(trimmedValue, 10);
+    try {
+      await configManager.setConfig(configKey, numValue);
+    } catch (error) {
+      log.error('Failed to save tool timeout config', { error });
+      setExecutionTimeout(previous);
+      notificationService.error(tTools('messages.saveFailed'));
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const handleUserQuestionTimeoutChange = async (value: string) => {
+    const trimmed = value.trim();
+    if (trimmed !== '' && (!/^\d+$/.test(trimmed) || Number(trimmed) > 3600)) return;
+    if (toolExecConfigLoading || Number(trimmed) === Number(userQuestionTimeout)) return;
+    const previous = userQuestionTimeout;
+    setUserQuestionTimeout(trimmed);
+    setToolExecConfigLoading(true);
+    try {
+      await configManager.setConfig('ai.user_question_timeout_secs', trimmed === '' ? null : Number(trimmed));
+    } catch (error) {
+      log.error('Failed to save user question timeout config', { error });
+      setUserQuestionTimeout(previous);
+      notificationService.error(tTools('messages.saveFailed'));
+    } finally {
+      setToolExecConfigLoading(false);
+    }
+  };
+
+  const loadPageData = useCallback(async () => {
+    const isInitialLoad = !hasLoadedPageDataRef.current;
+    if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
+    try {
+      const [
+        loadedSubagentDefaultModel,
+        loadedModels,
+        deferredToolLoadingEnabled,
+        loadedSubagentMaxConcurrency,
+        loadedSwarmMaxConcurrency,
+        execTimeout,
+        loadedSubagentBatchExecutionPolicy,
+        loadedUserQuestionTimeout,
+      ] = await Promise.all([
+        configManager.getConfig<SubagentModelSelection>('ai.agent_model_defaults.subagents.default'),
+        configManager.getConfig<AIModelConfig[]>('ai.models'),
+        configManager.getConfig<boolean>('ai.enable_deferred_tool_loading'),
+        configManager.getConfig<number | null>('ai.subagent_max_concurrency'),
+        configManager.getConfig<number | null>('ai.swarm_max_concurrency'),
+        configManager.getConfig<number | null>('ai.tool_execution_timeout_secs'),
+        configManager.getConfig<SubagentBatchExecutionPolicy>('ai.subagent_batch_execution_policy'),
+        configManager.getOptionalConfig<number | null>('ai.user_question_timeout_secs'),
+      ]);
+      setSubagentDefaultModel(loadedSubagentDefaultModel ?? { kind: 'fixed', model_id: 'fast' });
+      setConfiguredModels(loadedModels ?? []);
+      setEnableDeferredToolLoading(deferredToolLoadingEnabled ?? true);
+      setSubagentMaxConcurrency(loadedSubagentMaxConcurrency != null
+        ? loadedSubagentMaxConcurrency
+        : DEFAULT_SUBAGENT_MAX_CONCURRENCY);
+      setSwarmMaxConcurrency(loadedSwarmMaxConcurrency != null
+        ? loadedSwarmMaxConcurrency
+        : DEFAULT_SWARM_MAX_CONCURRENCY);
+      setExecutionTimeout(execTimeout != null ? String(execTimeout) : '');
+      setUserQuestionTimeout(loadedUserQuestionTimeout === undefined || loadedUserQuestionTimeout === 180
+        ? '180'
+        : loadedUserQuestionTimeout === null ? '0' : String(loadedUserQuestionTimeout));
+      setSubagentBatchExecutionPolicy(normalizeSubagentBatchExecutionPolicy(loadedSubagentBatchExecutionPolicy));
+
+      hasLoadedPageDataRef.current = true;
+    } catch (error) {
+      log.error('Failed to load settings page data', { error });
+      if (isInitialLoad) setLoadError(true);
+    } finally {
+      if (isInitialLoad) setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+
+    void loadPageData();
+  }, [loadPageData]);
+
+  if (!subagentModelOptions.some(option => option.value === subagentModelValue)) {
+    subagentModelOptions.push({
+      value: subagentModelValue,
+      label: tModels('sessionTitle.models.unavailable', { id: subagentModelValue }),
+      disabled: true,
+    });
+  }
+  return (
+    <SettingsPage pageId="ai.execution" className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view="execution">
+      {loadError ? (
+        <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void loadPageData()} />
+      ) : isLoading ? (
+        <ConfigLoadingState label={t('loading.text')} />
+      ) : (
+        <>
+
+          {/* ── Tool execution behavior ────────────────────────────── */}
+          <ConfigPageSection
+            title={t('toolExecution.sectionTitle')}
+            description={t('toolExecution.sectionDescription')}
+          >
+            <ConfigPageRow
+              label={tTools('config.executionTimeout')}
+              description={tTools('config.executionTimeoutDesc')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <NumberInput
+                  value={executionTimeout === '' ? 0 : parseInt(executionTimeout, 10)}
+                  onValueChange={(val) => handleToolTimeoutChange(val === 0 ? '' : String(val))}
+                  min={0}
+                  max={3600}
+                  step={5}
+                  unit={tTools('config.seconds')}
+                  size="sm"
+                  variant="compact"
+                  disabled={toolExecConfigLoading}
+                />
+              </div>
+            </ConfigPageRow>
+            <ConfigPageRow
+              label={tTools('config.userQuestionTimeout')}
+              description={tTools('config.userQuestionTimeoutDesc')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <NumberInput
+                  value={userQuestionTimeout === '' ? 0 : parseInt(userQuestionTimeout, 10)}
+                  onValueChange={(val) => void handleUserQuestionTimeoutChange(val === 0 ? '0' : String(val))}
+                  min={0}
+                  max={3600}
+                  step={5}
+                  unit={tTools('config.seconds')}
+                  size="sm"
+                  variant="compact"
+                  disabled={toolExecConfigLoading}
+                />
+              </div>
+            </ConfigPageRow>
+          </ConfigPageSection>
+
+          <ConfigPageSection
+            title={tTools('section.subagents.title')}
+            description={tTools('section.subagents.description')}
+          >
+            <ConfigPageRow
+              className="openbitfun-runtime-settings__subagent-model-row"
+              label={
+                <span className="openbitfun-runtime-settings__subagent-model-label">
+                  {tTools('config.subagentDefaultModel')}
+                  <Tooltip content={tTools('config.subagentModelSettings')}>
+                    <IconButton
+                      type="button"
+                      size="sm"
+                      className="openbitfun-runtime-settings__subagent-model-settings"
+                      aria-label={tTools('config.subagentModelSettings')}
+                      icon={<Icon name="settings" size="sm" />}
+                      onClick={() => useSceneStore.getState().openScene('agents')}
+                    />
+                  </Tooltip>
+                </span>
+              }
+              description={tTools('config.subagentDefaultModelDesc')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <Combobox
+                  value={subagentModelValue}
+                  options={subagentModelOptions}
+                  size="sm"
+                  disabled={toolExecConfigLoading}
+                  onValueChange={(value) => void handleSubagentDefaultModelChange(value)}
+                />
+              </div>
+            </ConfigPageRow>
+            <ConfigPageRow
+              label={tTools('config.subagentBatchPolicy.label')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <Select
+                  value={subagentBatchExecutionPolicy}
+                  options={subagentBatchExecutionPolicyOptions.map(option => ({
+                    disabled: option.disabled,
+                    label: option.description
+                      ? `${option.label} — ${formatStandaloneUiText(option.description)}`
+                      : option.label,
+                    value: option.value,
+                  }))}
+                  size="sm"
+                  disabled={toolExecConfigLoading}
+                  onValueChange={handleSubagentBatchExecutionPolicyChange}
+                />
+              </div>
+            </ConfigPageRow>
+            <ConfigPageRow
+              label={tTools('config.subagentMaxConcurrency')}
+              description={tTools('config.subagentMaxConcurrencyDesc')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <NumberInput
+                  value={subagentMaxConcurrency}
+                  onValueChange={(val) => void handleSubagentMaxConcurrencyChange(val)}
+                  min={1}
+                  max={SUBAGENT_MAX_CONCURRENCY_LIMIT}
+                  step={1}
+                  size="sm"
+                  variant="compact"
+                  disabled={toolExecConfigLoading}
+                />
+              </div>
+            </ConfigPageRow>
+            <ConfigPageRow
+              label={tTools('config.swarmMaxConcurrency')}
+              description={tTools('config.swarmMaxConcurrencyDesc')}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <NumberInput
+                  value={swarmMaxConcurrency}
+                  onValueChange={(val) => void handleSwarmMaxConcurrencyChange(val)}
+                  min={1}
+                  max={SWARM_MAX_CONCURRENCY_LIMIT}
+                  step={1}
+                  size="sm"
+                  variant="compact"
+                  disabled={toolExecConfigLoading}
+                />
+              </div>
+            </ConfigPageRow>
+          </ConfigPageSection>
+
+          <ConfigPageSection
+            title={t('deferredToolLoading.sectionTitle')}
+            description={t('deferredToolLoading.sectionDescription')}
+          >
+            <ConfigPageRow
+              label={t('common.enable')}
+              description={!enableDeferredToolLoading ? t('deferredToolLoading.warning') : undefined}
+              align="center"
+            >
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <Switch
+                  checked={enableDeferredToolLoading}
+                  onChange={(event) => handleDeferredToolLoadingChange(event.target.checked)}
+                  disabled={deferredToolLoadingConfigSaving}
+                />
+              </div>
+            </ConfigPageRow>
+          </ConfigPageSection>
+
+          <ToolJsonRepairSection />
+          <ReviewCapacitySection />
+
+        </>
+      )}
+    </SettingsPage>
+  );
+};
+
+export default ExecutionSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.presentation.test.ts
similarity index 87%
rename from src/web-ui/src/infrastructure/config/components/MemorySettingsPage.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.presentation.test.ts
index 85817595e8..50800a64a1 100644
--- a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.presentation.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest';
 
 function readSource(): string {
   return readFileSync(
-    fileURLToPath(new URL('./MemorySettingsPage.tsx', import.meta.url)),
+    fileURLToPath(new URL('./MemorySettingsSection.tsx', import.meta.url)),
     'utf8',
   ).replace(/\r\n/g, '\n');
 }
@@ -18,7 +18,7 @@ describe('Memory settings presentation', () => {
 
     expect(advancedStart).toBeGreaterThan(-1);
     expect(advancedEnd).toBeGreaterThan(advancedStart);
-    expect(source).not.toContain("import './MemoriesConfig.scss';");
+    expect(source).not.toContain("import '@/infrastructure/config/components/MemoriesConfig.scss';");
     expect(source).not.toContain('<details');
     expect(advancedSection).toContain("description={t('sections.advanced.description')}");
     expect(advancedSection).toContain('aria-expanded={advancedOpen}');
@@ -27,7 +27,7 @@ describe('Memory settings presentation', () => {
 
   it('places memory actions in Basics instead of the page header', () => {
     const source = readSource();
-    const contentStart = source.indexOf('<ConfigPageContent>', source.indexOf('const memoryEnabled'));
+    const contentStart = source.indexOf('<ConfigPageSectionStack>', source.indexOf('const memoryEnabled'));
     const headerStart = source.lastIndexOf('<ConfigPageHeader', contentStart);
     const header = source.slice(headerStart, contentStart);
     const basicStart = source.indexOf("title={t('sections.basic.title')}", contentStart);
@@ -35,7 +35,7 @@ describe('Memory settings presentation', () => {
     const basicSection = source.slice(basicStart, basicEnd);
 
     expect(contentStart).toBeGreaterThan(-1);
-    expect(headerStart).toBeGreaterThan(-1);
+    expect(headerStart).toBe(-1);
     expect(basicStart).toBeGreaterThan(contentStart);
     expect(basicEnd).toBeGreaterThan(basicStart);
     expect(header).not.toContain('extra=');
diff --git a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
similarity index 96%
rename from src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
index f37b6f87e2..52b657f7e3 100644
--- a/src/web-ui/src/infrastructure/config/components/MemorySettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
@@ -1,3 +1,4 @@
+import { ConfigLoadingState, ConfigRetryState } from '@/infrastructure/config/components/common';
 import {
   Button,
   ConfirmDialog,
@@ -6,30 +7,28 @@ import {
   MenuPopover,
   NumberInput,
   Select,
-  type MenuEntry,
-  type SelectOption,
   Switch,
   Tooltip,
+  type MenuEntry,
+  type SelectOption,
 } from '@openbitfun/ui';
+import { FolderOpen, RotateCcw } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FolderOpen, RotateCcw } from 'lucide-react';
-import { ConfigLoadingState, ConfigMessage, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
-import { useNotification } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
 import { agentAPI } from '@/infrastructure/api/service-api/AgentAPI';
 import { workspaceAPI } from '@/infrastructure/api/service-api/WorkspaceAPI';
-import { configManager } from '../services/ConfigManager';
-import { getModelDisplayName } from '../services/modelConfigs';
-import type { AIModelConfig, MemoriesConfig as MemoriesConfigShape } from '../types';
 import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
   ConfigPageRow,
   ConfigPageSection,
-} from './common';
+  ConfigPageSectionStack
+} from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { getModelDisplayName } from '@/infrastructure/config/services/modelConfigs';
+import type { AIModelConfig, MemoriesConfig as MemoriesConfigShape } from '@/infrastructure/config/types';
+import { useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('MemorySettings');
 
@@ -90,7 +89,7 @@ function isValidMemoryWindowConfig(config: MemoriesConfigShape): boolean {
   return config.max_rollout_age_days <= config.max_unused_days;
 }
 
-const MemorySettingsPage: React.FC = () => {
+const MemorySettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/memory');
   const { error: notifyError, success: notifySuccess } = useNotification();
   const [loading, setLoading] = useState(true);
@@ -303,15 +302,16 @@ const MemorySettingsPage: React.FC = () => {
     },
   ], [actionBusy, handleOpenMemoryDirectory, t]);
 
+  const sectionAnchor = useSettingsSectionAnchor('memory', !loading);
+
   if (loading || loadFailed) {
     return (
-      <ConfigPageLayout
+      <div id={sectionAnchor}
         className="openbitfun-memories-config"
         data-openbitfun-component="config"
         data-openbitfun-part="root"
       >
-        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-        <ConfigPageContent>
+        <ConfigPageSectionStack>
           {loading ? (
             <ConfigLoadingState label={t('messages.loading')} />
           ) : (
@@ -321,8 +321,8 @@ const MemorySettingsPage: React.FC = () => {
               onRetry={() => void loadData()}
             />
           )}
-        </ConfigPageContent>
-      </ConfigPageLayout>
+        </ConfigPageSectionStack>
+      </div>
     );
   }
 
@@ -330,14 +330,12 @@ const MemorySettingsPage: React.FC = () => {
   const memoryWorkDisabled = !memoryEnabled;
 
   return (
-    <ConfigPageLayout
+    <div id={sectionAnchor}
       className="openbitfun-memories-config"
       data-openbitfun-component="config"
       data-openbitfun-part="root"
     >
-      <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-      <ConfigPageContent>
-        <ConfigMessage message={{ type: 'info', text: t('scopeNotice') }} />
+      <ConfigPageSectionStack>
         <ConfigPageSection
           title={t('sections.basic.title')}
           description={t('sections.basic.description')}
@@ -588,7 +586,7 @@ const MemorySettingsPage: React.FC = () => {
             </>
           )}
         </ConfigPageSection>
-      </ConfigPageContent>
+      </ConfigPageSectionStack>
       <ConfirmDialog
         open={resetSettingsConfirmOpen}
         onOpenChange={() => setResetSettingsConfirmOpen(false)}
@@ -608,8 +606,8 @@ const MemorySettingsPage: React.FC = () => {
         confirmDanger
         confirmText={t('actions.resetMemoryConfirmAction')}
       />
-    </ConfigPageLayout>
+    </div>
   );
 };
 
-export default MemorySettingsPage;
+export default MemorySettingsSection;
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/ModelSettingsPage.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/ModelSettingsPage.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
rename to src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.scss
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
similarity index 81%
rename from src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
index 9a735d3e88..0115d7e905 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
@@ -1,108 +1,109 @@
-import { isOpenCodeApiKeyConfig, isOpenCodeZenOAuth, openCodeZenModels, resolveOpenCodeModelRoute, savedOpenCodeApiKeyRoute } from './openCodeApiKeyRouting';
-import { OverflowText,
-  Button,
-  Field,
-  StatusPill,
-  Combobox,
-  Icon,
-  IconButton,
-  Input,
-  MultiSelect,
-  NumberInput,
-  SearchField,
-  Select,
-  Switch,
-  Textarea,
-  Tooltip,
-  ScrollArea,
-  type ComboboxOption,
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogFooter,
-  DialogHeader,
-  DialogHeading,
-  DialogTitle,
-  ConfirmDialog,
-} from '@openbitfun/ui';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Wifi, Loader, AlertTriangle, EyeOff, FolderOpen } from 'lucide-react';
-import {
-  AIModelConfig as AIModelConfigType, 
-  ProxyConfig, 
-  ModelCategory,
-  ReasoningCatalogBinding,
-  ReasoningCatalogProjection,
-  ReasoningConfig,
-} from '../types';
-import { configManager } from '../services/ConfigManager';
-import { getCapabilitiesByCategory, resolveModelCategory } from '../services/modelCategory';
-import {
-  allocateModelConfigId,
-  countModelConfigReferences,
-  getModelDisplayName,
-  getProviderDisplayName,
-  getProviderGroupKey,
-  getProviderInstanceId,
-  getProviderTemplateId,
-  PROVIDER_INSTANCE_METADATA_KEY,
-  removeProviderModelConfigs,
-} from '../services/modelConfigs';
-import { resolveProviderTemplates } from '../services/builtinProviderCatalog';
-import { normalizeProviderBaseUrl } from '../services/providerCatalog';
-import { supportsResponsesReasoning } from '../utils/reasoning';
-import {
-  canonicalReasoningConfig,
-  cloneReasoningConfig,
-  validateReasoningConfig,
-} from '../utils/reasoningPresets';
+import '@/app/scenes/settings/pages/ai/ModelSettingsPage.scss';
 import { aiApi, systemAPI } from '@/infrastructure/api';
 import type {
   SubscriptionAccount,
   SubscriptionLoginMethod,
 } from '@/infrastructure/api/service-api/AIApi';
-import type { ProviderRegion } from '@/shared/types';
-import type { SubscriptionProvider } from '../types';
-import { useNotification } from '@/shared/notification-system';
 import {
   ConfigActionBar,
+  ConfigCollectionItem,
   ConfigEmptyState,
+  ConfigPageContent,
   ConfigPageHeader,
   ConfigPageLayout,
-  ConfigPageContent,
-  ConfigPageSection,
   ConfigPageRow,
-  ConfigCollectionItem,
+  ConfigPageSection,
   ConfigRetryState,
-} from './common';
-import {
-  useSettingsDraft,
-} from '@/infrastructure/config/settingsDraftRegistry';
+} from '@/infrastructure/config/components/common';
+import DefaultModelConfig from '@/infrastructure/config/components/DefaultModelConfig';
 import {
   configsNeedingAutoTest,
   providerConnectionChanged,
   stableJson,
-} from './modelConnectionTestPlan';
-import DefaultModelConfig from './DefaultModelConfig';
-import ReasoningConfigPanel, { type ReasoningConfigApplyResult } from './ReasoningConfigPanel';
-import { createLogger } from '@/shared/utils/logger';
-import { translateConnectionTestMessage } from '@/shared/utils/aiConnectionTestMessages';
-import { i18nService } from '@/infrastructure/i18n';
-import { isTauriRuntime } from '@/infrastructure/runtime';
-import { isPeerDeviceModeActive } from '@/infrastructure/peer-device/peerModeFlag';
-import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
-import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
-import { LONG_CONTEXT_WARNING_THRESHOLD_TOKENS } from '@/shared/constants/modelContext';
+} from '@/infrastructure/config/components/modelConnectionTestPlan';
+import { ModelDiscoveryCoordinator } from '@/infrastructure/config/components/modelDiscoveryCoordinator';
+import { isOpenCodeApiKeyConfig, isOpenCodeZenOAuth, openCodeZenModels, resolveOpenCodeModelRoute, savedOpenCodeApiKeyRoute } from '@/infrastructure/config/components/openCodeApiKeyRouting';
+import ReasoningConfigPanel, { type ReasoningConfigApplyResult } from '@/infrastructure/config/components/ReasoningConfigPanel';
 import {
   preferredSubscriptionLoginMethod,
   settleSubscriptionLoginStart,
-  subscriptionLoginRequiresLocalDevice,
   SubscriptionLoginCoordinator,
+  subscriptionLoginRequiresLocalDevice,
   type SubscriptionLoginOperation,
-} from './subscriptionLoginCoordinator';
-import { ModelDiscoveryCoordinator } from './modelDiscoveryCoordinator';
-import './ModelSettingsPage.scss';
+} from '@/infrastructure/config/components/subscriptionLoginCoordinator';
+import { resolveProviderTemplates } from '@/infrastructure/config/services/builtinProviderCatalog';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { getCapabilitiesByCategory, resolveModelCategory } from '@/infrastructure/config/services/modelCategory';
+import {
+  allocateModelConfigId,
+  countModelConfigReferences,
+  getModelDisplayName,
+  getProviderDisplayName,
+  getProviderGroupKey,
+  getProviderInstanceId,
+  getProviderTemplateId,
+  PROVIDER_INSTANCE_METADATA_KEY,
+  removeProviderModelConfigs,
+} from '@/infrastructure/config/services/modelConfigs';
+import { normalizeProviderBaseUrl } from '@/infrastructure/config/services/providerCatalog';
+import {
+  useSettingsDraft,
+} from '@/infrastructure/config/settingsDraftRegistry';
+import type { SubscriptionProvider } from '@/infrastructure/config/types';
+import {
+  AIModelConfig as AIModelConfigType,
+  ModelCategory,
+  ProxyConfig,
+  ReasoningCatalogBinding,
+  ReasoningCatalogProjection,
+  ReasoningConfig,
+} from '@/infrastructure/config/types';
+import { supportsResponsesReasoning } from '@/infrastructure/config/utils/reasoning';
+import {
+  canonicalReasoningConfig,
+  cloneReasoningConfig,
+  validateReasoningConfig,
+} from '@/infrastructure/config/utils/reasoningPresets';
+import { i18nService } from '@/infrastructure/i18n';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
+import { isPeerDeviceModeActive } from '@/infrastructure/peer-device/peerModeFlag';
+import { isTauriRuntime } from '@/infrastructure/runtime';
+import { LONG_CONTEXT_WARNING_THRESHOLD_TOKENS } from '@/shared/constants/modelContext';
+import { useNotification } from '@/shared/notification-system';
+import type { ProviderRegion } from '@/shared/types';
+import { translateConnectionTestMessage } from '@/shared/utils/aiConnectionTestMessages';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Button,
+  Combobox,
+  ConfirmDialog,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogHeading,
+  DialogTitle,
+  Field,
+  Icon,
+  IconButton,
+  Input,
+  MultiSelect,
+  NumberInput,
+  OverflowText,
+  ScrollArea,
+  SearchField,
+  Select,
+  StatusPill,
+  Switch,
+  Textarea,
+  Tooltip,
+  type ComboboxOption,
+} from '@openbitfun/ui';
+import { AlertTriangle, EyeOff, FolderOpen, Loader, Wifi } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const log = createLogger('ModelSettings');
 const MODELS_DEV_DOWNLOAD_URL = 'https://models.dev/api.json';
@@ -295,7 +296,6 @@ function generateProviderInstanceId(): string {
   return `provider_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
 
-
 /** Last line of defense: same logical model name once per save; prefer draft tied to an existing config id. */
 function dedupeSelectedModelDraftsByModelName(drafts: SelectedModelDraft[]): SelectedModelDraft[] {
   const out: SelectedModelDraft[] = [];
@@ -414,7 +414,7 @@ const ModelSettingsPage: React.FC = () => {
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [expandedProviderGroupKeys, setExpandedProviderGroupKeys] = useState<Set<string>>(new Set());
   const notification = useNotification();
-  
+
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
 
   const [creationMode, setCreationMode] = useState<'selection' | 'form' | null>(null);
@@ -567,10 +567,10 @@ const ModelSettingsPage: React.FC = () => {
       ]);
       setModelCatalog(localCatalogs
         ? {
-            ...hostCatalog,
-            provider_catalog: localCatalogs.provider_catalog,
-            models_dev_reasoning_catalog: localCatalogs.models_dev_reasoning_catalog,
-          }
+          ...hostCatalog,
+          provider_catalog: localCatalogs.provider_catalog,
+          models_dev_reasoning_catalog: localCatalogs.models_dev_reasoning_catalog,
+        }
         : hostCatalog);
     } catch (error) {
       setModelCatalog(null);
@@ -670,7 +670,7 @@ const ModelSettingsPage: React.FC = () => {
     const timer = window.setInterval(() => setSubscriptionLoginClock(Date.now()), 1000);
     return () => window.clearInterval(timer);
   }, [subscriptionLoginPanel]);
-  
+
   // Provider options with translations (must be at top level, before any conditional returns)
   const providerTemplates = useMemo(
     () => resolveProviderTemplates(modelCatalog?.provider_catalog),
@@ -823,8 +823,8 @@ const ModelSettingsPage: React.FC = () => {
 
         const catalogModel = selectedProviderId
           ? modelCatalog?.provider_catalog?.providers
-              .find(provider => provider.id === selectedProviderId)
-              ?.models.find(model => model.id === modelName)
+            .find(provider => provider.id === selectedProviderId)
+            ?.models.find(model => model.id === modelName)
           : undefined;
         return createModelDraft(modelName, draftBaseConfig, {
           configId: pinnedRowId,
@@ -937,9 +937,9 @@ const ModelSettingsPage: React.FC = () => {
     const nextModelNames = editingConfig?.id
       ? [trimmedModelName]
       : uniqModelNames([
-          ...selectedModelDrafts.map(draft => draft.modelName),
-          trimmedModelName,
-        ]);
+        ...selectedModelDrafts.map(draft => draft.modelName),
+        trimmedModelName,
+      ]);
 
     syncSelectedModelDrafts(nextModelNames, editingConfig || undefined, !!editingConfig?.id);
     setManualModelInput('');
@@ -1083,7 +1083,6 @@ const ModelSettingsPage: React.FC = () => {
     open();
   }, [editingConfig, editingModalHasUnsavedChanges, editingTargetKey, isEditing]);
 
-  
   const handleCreateNew = () => {
     requestEditorOpen('new-provider', () => {
       resetRemoteModelDiscovery();
@@ -1180,7 +1179,7 @@ const ModelSettingsPage: React.FC = () => {
         // Cancel immediately when the backend placeholder already exists;
         // `settleSubscriptionLoginStart` retries after start returns to cover
         // the opposite command-order race.
-        void aiApi.cancelSubscriptionLogin(pending.provider, pending.sessionId).catch(() => {});
+        void aiApi.cancelSubscriptionLogin(pending.provider, pending.sessionId).catch(() => { });
       }
     };
   }, []);
@@ -1423,13 +1422,13 @@ const ModelSettingsPage: React.FC = () => {
       setSubscriptionAccounts((current) => current.map((account) => (
         account.provider === request.account.provider
           ? {
-              ...account,
-              connected: false,
-              account: null,
-              expires_at: null,
-              reauthentication_required: false,
-              vault_unavailable: false,
-            }
+            ...account,
+            connected: false,
+            account: null,
+            expires_at: null,
+            reauthentication_required: false,
+            vault_unavailable: false,
+          }
           : account
       )));
       await refreshSubscriptionAccounts();
@@ -1471,7 +1470,6 @@ const ModelSettingsPage: React.FC = () => {
     }
   }, [notification, refreshSubscriptionAccounts, t]);
 
-  
   const handleSelectProvider = (providerId: string) => {
     const template = providerTemplates[providerId];
     if (!template) return;
@@ -1480,10 +1478,10 @@ const ModelSettingsPage: React.FC = () => {
     setShowApiKey(false);
     setSelectedProviderId(providerId);
     setEditingTargetKey(`new-provider:${providerId}`);
-    
+
     // Dynamically get translated name
     const providerName = t(`providers.${template.id}.name`);
-    
+
     setEditingConfig({
       name: providerName,
       base_url: template.baseUrl,
@@ -1507,7 +1505,6 @@ const ModelSettingsPage: React.FC = () => {
     setIsEditing(true);
   };
 
-  
   const handleSelectCustom = () => {
     resetRemoteModelDiscovery();
     setManualModelInput('');
@@ -1521,7 +1518,7 @@ const ModelSettingsPage: React.FC = () => {
       request_url: resolveRequestUrl('https://open.bigmodel.cn/api/paas/v4', 'openai'),
       api_key: '',
       model_name: '',
-      provider: 'openai',  
+      provider: 'openai',
       enabled: true,
       context_window: 300000,
       category: 'multimodal',
@@ -1531,7 +1528,7 @@ const ModelSettingsPage: React.FC = () => {
       inline_think_in_text: true,
     });
     setSelectedModelDrafts([]);
-    setShowAdvancedSettings(false);  
+    setShowAdvancedSettings(false);
     setCreationMode('form');
     setIsEditing(true);
   };
@@ -1671,7 +1668,7 @@ const ModelSettingsPage: React.FC = () => {
 
   const handleSave = async (): Promise<boolean> => {
     if (editorSavingRef.current) return false;
-    
+
     if (!editingConfig) return false;
     setShowModelValidation(true);
     const missingFields = [
@@ -1829,8 +1826,7 @@ const ModelSettingsPage: React.FC = () => {
       );
       setAiModels(updatedModels);
       // The host reconciles default selectors using model capabilities.
-      
-      
+
       setIsEditing(false);
       setEditingConfig(null);
       setCreationMode(null);
@@ -1840,15 +1836,12 @@ const ModelSettingsPage: React.FC = () => {
       setEditingTargetKey(null);
       setDraftCloseConfirmOpen(false);
       setDraftConflictConfirmOpen(false);
-      
-      
+
       const autoTestConfigIds = configsToAutoTest.map(config => config.id).filter((id): id is string => !!id);
       if (connectionTestSupported && autoTestConfigIds.length > 0) {
         setExpandedIds(prev => new Set([...prev, ...autoTestConfigIds]));
       }
-      
-      
-      
+
       if (connectionTestSupported) {
         void (async () => {
           for (const config of configsToAutoTest) {
@@ -2029,7 +2022,6 @@ const ModelSettingsPage: React.FC = () => {
     }
   };
 
-  
   const handleSaveProxy = async (): Promise<boolean> => {
     if (!isProxyDirty) return true;
     if (proxySavingRef.current) return false;
@@ -2224,7 +2216,6 @@ const ModelSettingsPage: React.FC = () => {
     });
   };
 
-  
   if (isConfigLoading || configLoadError) {
     return (
       <ConfigPageLayout className="openbitfun-model-settings" data-openbitfun-component="model-settings" data-openbitfun-part="root" data-openbitfun-view="settings">
@@ -2254,7 +2245,7 @@ const ModelSettingsPage: React.FC = () => {
 
         <ConfigPageContent className="openbitfun-model-settings__content openbitfun-model-settings__content--selection">
           <div className="openbitfun-model-settings__provider-selection" data-openbitfun-component="model-settings" data-openbitfun-part="providerSelection">
-            
+
             <button
               type="button"
               data-testid="settings-model-custom-config-btn"
@@ -2271,12 +2262,10 @@ const ModelSettingsPage: React.FC = () => {
               </div>
             </button>
 
-            
             <div className="openbitfun-model-settings__selection-divider" data-openbitfun-component="model-settings" data-openbitfun-part="selectionDivider">
               <span>{t('providerSelection.orSelectProvider')}</span>
             </div>
 
-
             <SearchField
               leadingIcon={<Icon name="search" size="lg" aria-hidden />}
               size="sm"
@@ -2294,7 +2283,6 @@ const ModelSettingsPage: React.FC = () => {
               }}
             />
 
-
             <div className="openbitfun-model-settings__provider-list" data-openbitfun-component="model-settings" data-openbitfun-part="providerList">
               {visibleProviders.map(provider => (
                 // The help link is a sibling of the select button, not a child:
@@ -2364,7 +2352,6 @@ const ModelSettingsPage: React.FC = () => {
               )}
             </div>
 
-
             <div className="openbitfun-model-settings__selection-actions" data-openbitfun-component="model-settings" data-openbitfun-part="selectionActions">
               <Button variant="fill" size="sm" onClick={() => setCreationMode(null)}>
                 {t('actions.cancel')}
@@ -2376,7 +2363,6 @@ const ModelSettingsPage: React.FC = () => {
     );
   }
 
-  
   const renderEditingForm = () => {
     if (!isEditing || !editingConfig) return null;
     const isFromTemplate = !editingConfig.id && !!currentTemplate;
@@ -2421,28 +2407,28 @@ const ModelSettingsPage: React.FC = () => {
       }));
     const fetchedOrPresetModelOptions: ComboboxOption[] = remoteModelOptions.length > 0
       ? remoteModelOptions.map(model => ({
-          label: model.display_name || model.id,
-          value: model.id,
-          description: model.display_name && model.display_name !== model.id ? model.id : undefined,
-          testId: 'settings-model-option',
-          testAttributes: {
-            'data-model-id': model.id,
-            'data-model-name': model.id,
-          },
-        }))
+        label: model.display_name || model.id,
+        value: model.id,
+        description: model.display_name && model.display_name !== model.id ? model.id : undefined,
+        testId: 'settings-model-option',
+        testAttributes: {
+          'data-model-id': model.id,
+          'data-model-name': model.id,
+        },
+      }))
       : editingConfig.auth?.type === 'subscription'
         ? []
         : catalogModelOptions.length > 0
-        ? catalogModelOptions
-        : (currentTemplate?.models || []).map(model => ({
-          label: model,
-          value: model,
-          testId: 'settings-model-option',
-          testAttributes: {
-            'data-model-id': model,
-            'data-model-name': model,
-          },
-        }));
+          ? catalogModelOptions
+          : (currentTemplate?.models || []).map(model => ({
+            label: model,
+            value: model,
+            testId: 'settings-model-option',
+            testAttributes: {
+              'data-model-id': model,
+              'data-model-name': model,
+            },
+          }));
     const selectedModelOptions: ComboboxOption[] = selectedModelDrafts.map(draft => ({
       label: draft.modelName,
       value: draft.modelName,
@@ -2503,14 +2489,14 @@ const ModelSettingsPage: React.FC = () => {
         : t('reasoningPresets.autoShort');
       return presetCount > 0
         ? t('reasoningPresets.summaryWithCustom', {
-            source: catalogLabel,
-            default: defaultLabel,
-            count: presetCount,
-          })
+          source: catalogLabel,
+          default: defaultLabel,
+          count: presetCount,
+        })
         : t('reasoningPresets.summary', {
-            source: catalogLabel,
-            default: defaultLabel,
-          });
+          source: catalogLabel,
+          default: defaultLabel,
+        });
     };
 
     const renderSelectedModelRows = () => {
@@ -2575,11 +2561,11 @@ const ModelSettingsPage: React.FC = () => {
                   aria-label={
                     canToggleExpand
                       ? t(
-                          isExpanded
-                            ? 'providerSelection.collapseModelSettings'
-                            : 'providerSelection.expandModelSettings',
-                          { name: modelDisplayName }
-                        )
+                        isExpanded
+                          ? 'providerSelection.collapseModelSettings'
+                          : 'providerSelection.expandModelSettings',
+                        { name: modelDisplayName }
+                      )
                       : undefined
                   }
                 >
@@ -2792,12 +2778,12 @@ const ModelSettingsPage: React.FC = () => {
             >
               {legacyOpenCode ? t('subscriptionAuth.openCodeRemoved') : matchedSubscription?.connected
                 ? t('subscriptionAuth.detected', {
-                    label: matchedSubscription.display_label,
-                    account: matchedSubscription.account || t('subscriptionAuth.unknownAccount'),
-                  })
+                  label: matchedSubscription.display_label,
+                  account: matchedSubscription.account || t('subscriptionAuth.unknownAccount'),
+                })
                 : t('subscriptionAuth.notConnected', {
-                    kind: selectedSubscriptionProvider || 'subscription',
-                  })}
+                  kind: selectedSubscriptionProvider || 'subscription',
+                })}
             </small>
           )}
         </div>
@@ -2834,494 +2820,494 @@ const ModelSettingsPage: React.FC = () => {
               className="openbitfun-model-settings__edit-section"
               fieldSurface="default"
             >
-            {isFromTemplate ? (
-              <>
-                <ConfigPageRow label={t('form.configName')} required align="center" wide>
-                  <Input
-                    data-testid="settings-model-provider-name-input"
-                    invalid={showModelValidation && missingModelFields.name}
-                    required
-                    value={editingConfig.name || ''}
-                    onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))}
-                    placeholder={t('form.configNamePlaceholder')}
-                    size="sm"
-                  />
-                </ConfigPageRow>
-                {renderAuthRow()}
-                {!authIsSubscription && renderApiKeyRow(t('form.apiKey'))}
-                {!authIsSubscription && (
-                  <>
-                    <ConfigPageRow label={t('form.baseUrl')} required align="center" wide>
-                      <div className="openbitfun-model-settings__control-stack">
-                        {currentTemplate?.baseUrlOptions && currentTemplate.baseUrlOptions.length > 0 && (
-                          <Combobox
-                            invalid={showModelValidation && missingModelFields.baseUrl}
-                            value={currentTemplate.baseUrlOptions.some(opt => opt.url === editingConfig.base_url) ? editingConfig.base_url : ''}
-                            onValueChange={(value) => {
-                              const selectedOption = currentTemplate.baseUrlOptions!.find(opt => opt.url === value);
-                              const newProvider = selectedOption?.format || editingConfig.provider || 'openai';
-                              resetRemoteModelDiscovery();
-                              setEditingConfig(prev => ({
-                                ...prev,
-                                base_url: value as string,
-                                request_url: resolveRequestUrl(value as string, newProvider, editingConfig.model_name || ''),
-                                provider: newProvider
-                              }));
-                            }}
-                            placeholder={t('form.baseUrl')}
-                            options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.note || opt.url, value: opt.url, description: `${opt.format.toUpperCase()} · ${opt.url}` }))}
-                            size="sm"
-                          />
-                        )}
-                        <Input
-                          data-testid="settings-model-base-url-input"
-                          invalid={showModelValidation && missingModelFields.baseUrl}
-                          required
-                          type="url"
-                          value={editingConfig.base_url || ''}
-                          onChange={(e) => {
-                            resetRemoteModelDiscovery();
-                            setEditingConfig(prev => ({
-                              ...prev,
-                              base_url: e.target.value,
-                              request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
-                            }));
-                          }}
-                          onFocus={(e) => e.target.select()}
-                          placeholder={currentTemplate?.baseUrl}
-                          size="sm"
-                        />
-                        {editingConfig.base_url && !automaticOpenCodeRouting && (
-                          <div className="openbitfun-model-settings__resolved-url">
-                            <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
-                            <span className="openbitfun-model-settings__resolved-url-value">
-                              {previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', selectedModelDrafts.length === 1 ? selectedModelDrafts[0].modelName : undefined)}
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                    </ConfigPageRow>
-                    {!automaticOpenCodeRouting && (
-                    <ConfigPageRow label={t('form.provider')} align="center" wide>
-                      <Select
-                        data-testid="settings-model-request-format-select"
-                        value={editingConfig.provider || 'openai'}
-                        onValueChange={(value) => {
-                          const provider = value as string;
-                          resetRemoteModelDiscovery();
-                          setEditingConfig(prev => ({
-                            ...prev,
-                            provider,
-                            request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || '')
-                          }));
-                        }}
-                        placeholder={t('form.providerPlaceholder')}
-                        options={requestFormatOptions}
-                        size="sm"
-                      />
-                    </ConfigPageRow>
-                    )}
-                  </>
-                )}
-                <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
-                  <div className="openbitfun-model-settings__control-stack">
-                    <div className="openbitfun-model-settings__model-picker-row">
-                      <MultiSelect
-                        aria-required="true"
-                        data-testid="settings-model-select"
-                        invalid={showModelValidation && missingModelFields.model}
-                        value={selectedModelValues}
-                        onValueChange={(value) => {
-                          const nextModelNames = value.map(item => String(item));
-                          syncSelectedModelDrafts(nextModelNames, editingConfig);
-                        }}
-                        placeholder={t('providerSelection.selectModel')}
-                        options={availableModelOptions}
-                        loading={isFetchingRemoteModels}
-                        onCreateValue={value => value}
-                        size="sm"
-                        onOpenChange={handleModelSelectionOpenChange}
-                      />
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        data-testid="settings-model-refresh-btn"
-                        disabled={isFetchingRemoteModels}
-                        onClick={() => void fetchRemoteModels(editingConfig, true)}
-                      >
-                        {t('providerSelection.refreshModels')}
-                      </Button>
-                    </div>
-                    <div className="openbitfun-model-settings__manual-model-entry">
-                      <Input
-                        data-testid="settings-model-manual-name-input"
-                        value={manualModelInput}
-                        onChange={(e) => setManualModelInput(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            e.preventDefault();
-                            addManualModelDraft();
-                          }
-                        }}
-                        placeholder={t('providerSelection.inputModelName')}
-                        size="sm"
-                      />
-                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
-                        {t('providerSelection.addCustomModel')}
-                      </Button>
-                    </div>
-                    {modelFetchHint && (
-                      <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
-                        {modelFetchHint}
-                      </small>
-                    )}
-                    {renderSelectedModelRows()}
-                  </div>
-                </ConfigPageRow>
-              </>
-            ) : (
-              <>
-                {isProviderScopedEditing && (
-                  <>
-                    <ConfigPageRow label={t('form.configName')} required align="center" wide>
-                      <Input
-                        data-testid="settings-model-provider-name-input"
-                        invalid={showModelValidation && missingModelFields.name}
-                        required
-                        value={editingConfig.name || ''}
-                        onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))}
-                        placeholder={t('form.configNamePlaceholder')}
-                        size="sm"
-                      />
-                    </ConfigPageRow>
-                    {renderAuthRow()}
-                    {!authIsSubscription && renderApiKeyRow(t('form.apiKey'))}
-                    {!authIsSubscription && (
-                      <>
-                        <ConfigPageRow label={t('form.baseUrl')} required align="center" wide>
-                          <div className="openbitfun-model-settings__control-stack">
-                            <Input
-                              data-testid="settings-model-base-url-input"
+              {isFromTemplate ? (
+                <>
+                  <ConfigPageRow label={t('form.configName')} required align="center" wide>
+                    <Input
+                      data-testid="settings-model-provider-name-input"
+                      invalid={showModelValidation && missingModelFields.name}
+                      required
+                      value={editingConfig.name || ''}
+                      onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))}
+                      placeholder={t('form.configNamePlaceholder')}
+                      size="sm"
+                    />
+                  </ConfigPageRow>
+                  {renderAuthRow()}
+                  {!authIsSubscription && renderApiKeyRow(t('form.apiKey'))}
+                  {!authIsSubscription && (
+                    <>
+                      <ConfigPageRow label={t('form.baseUrl')} required align="center" wide>
+                        <div className="openbitfun-model-settings__control-stack">
+                          {currentTemplate?.baseUrlOptions && currentTemplate.baseUrlOptions.length > 0 && (
+                            <Combobox
                               invalid={showModelValidation && missingModelFields.baseUrl}
-                              required
-                              type="url"
-                              value={editingConfig.base_url || ''}
-                              onChange={(e) => {
+                              value={currentTemplate.baseUrlOptions.some(opt => opt.url === editingConfig.base_url) ? editingConfig.base_url : ''}
+                              onValueChange={(value) => {
+                                const selectedOption = currentTemplate.baseUrlOptions!.find(opt => opt.url === value);
+                                const newProvider = selectedOption?.format || editingConfig.provider || 'openai';
                                 resetRemoteModelDiscovery();
                                 setEditingConfig(prev => ({
                                   ...prev,
-                                  base_url: e.target.value,
-                                  request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
+                                  base_url: value as string,
+                                  request_url: resolveRequestUrl(value as string, newProvider, editingConfig.model_name || ''),
+                                  provider: newProvider
                                 }));
                               }}
-                              onFocus={(e) => e.target.select()}
-                              placeholder={'https://open.bigmodel.cn/api/paas/v4/chat/completions'}
+                              placeholder={t('form.baseUrl')}
+                              options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.note || opt.url, value: opt.url, description: `${opt.format.toUpperCase()} · ${opt.url}` }))}
                               size="sm"
                             />
-                            {editingConfig.base_url && !automaticOpenCodeRouting && (
-                              <div className="openbitfun-model-settings__resolved-url">
-                                <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
-                                <span className="openbitfun-model-settings__resolved-url-value">
-                                  {previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', selectedModelDrafts.length === 1 ? selectedModelDrafts[0].modelName : undefined)}
-                                </span>
-                              </div>
-                            )}
-                          </div>
-                        </ConfigPageRow>
-                        {!automaticOpenCodeRouting && (
+                          )}
+                          <Input
+                            data-testid="settings-model-base-url-input"
+                            invalid={showModelValidation && missingModelFields.baseUrl}
+                            required
+                            type="url"
+                            value={editingConfig.base_url || ''}
+                            onChange={(e) => {
+                              resetRemoteModelDiscovery();
+                              setEditingConfig(prev => ({
+                                ...prev,
+                                base_url: e.target.value,
+                                request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
+                              }));
+                            }}
+                            onFocus={(e) => e.target.select()}
+                            placeholder={currentTemplate?.baseUrl}
+                            size="sm"
+                          />
+                          {editingConfig.base_url && !automaticOpenCodeRouting && (
+                            <div className="openbitfun-model-settings__resolved-url">
+                              <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
+                              <span className="openbitfun-model-settings__resolved-url-value">
+                                {previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', selectedModelDrafts.length === 1 ? selectedModelDrafts[0].modelName : undefined)}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </ConfigPageRow>
+                      {!automaticOpenCodeRouting && (
                         <ConfigPageRow label={t('form.provider')} align="center" wide>
-                          <Select data-testid="settings-model-request-format-select" value={editingConfig.provider || 'openai'} onValueChange={(value) => {
-                            const provider = value as string;
-                            resetRemoteModelDiscovery();
-                            setEditingConfig(prev => ({
-                              ...prev,
-                              provider,
-                              request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || ''),
-                            }));
-                          }} placeholder={t('form.providerPlaceholder')} options={requestFormatOptions} size="sm" />
+                          <Select
+                            data-testid="settings-model-request-format-select"
+                            value={editingConfig.provider || 'openai'}
+                            onValueChange={(value) => {
+                              const provider = value as string;
+                              resetRemoteModelDiscovery();
+                              setEditingConfig(prev => ({
+                                ...prev,
+                                provider,
+                                request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || '')
+                              }));
+                            }}
+                            placeholder={t('form.providerPlaceholder')}
+                            options={requestFormatOptions}
+                            size="sm"
+                          />
                         </ConfigPageRow>
-                        )}
-                      </>
-                    )}
-                  </>
-                )}
-              </>
-            )}
-
-            {!isFromTemplate && (
-              <>
-                <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
-                  <div className="openbitfun-model-settings__control-stack">
-                    <div className="openbitfun-model-settings__model-picker-row">
-                      {editingConfig.id ? (
-                        <Combobox
+                      )}
+                    </>
+                  )}
+                  <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
+                    <div className="openbitfun-model-settings__control-stack">
+                      <div className="openbitfun-model-settings__model-picker-row">
+                        <MultiSelect
                           aria-required="true"
                           data-testid="settings-model-select"
                           invalid={showModelValidation && missingModelFields.model}
-                          value={selectedModelValues[0] || ''}
+                          value={selectedModelValues}
                           onValueChange={(value) => {
-                            syncSelectedModelDrafts([String(value)], editingConfig, true);
+                            const nextModelNames = value.map(item => String(item));
+                            syncSelectedModelDrafts(nextModelNames, editingConfig);
                           }}
-                          placeholder="glm-5.2"
+                          placeholder={t('providerSelection.selectModel')}
                           options={availableModelOptions}
                           loading={isFetchingRemoteModels}
                           onCreateValue={value => value}
                           size="sm"
                           onOpenChange={handleModelSelectionOpenChange}
                         />
-                      ) : (
-                        <MultiSelect
-                          aria-required="true"
-                          data-testid="settings-model-select"
-                          invalid={showModelValidation && missingModelFields.model}
-                          value={selectedModelValues}
-                          onValueChange={(value) => {
-                            syncSelectedModelDrafts(value.map(item => String(item)), editingConfig, false);
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          data-testid="settings-model-refresh-btn"
+                          disabled={isFetchingRemoteModels}
+                          onClick={() => void fetchRemoteModels(editingConfig, true)}
+                        >
+                          {t('providerSelection.refreshModels')}
+                        </Button>
+                      </div>
+                      <div className="openbitfun-model-settings__manual-model-entry">
+                        <Input
+                          data-testid="settings-model-manual-name-input"
+                          value={manualModelInput}
+                          onChange={(e) => setManualModelInput(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              addManualModelDraft();
+                            }
                           }}
-                          placeholder="glm-5.2"
-                          options={availableModelOptions}
-                          loading={isFetchingRemoteModels}
-                          onCreateValue={value => value}
+                          placeholder={t('providerSelection.inputModelName')}
                           size="sm"
-                          onOpenChange={handleModelSelectionOpenChange}
                         />
+                        <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
+                          {t('providerSelection.addCustomModel')}
+                        </Button>
+                      </div>
+                      {modelFetchHint && (
+                        <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
+                          {modelFetchHint}
+                        </small>
                       )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        data-testid="settings-model-refresh-btn"
-                        disabled={isFetchingRemoteModels}
-                        onClick={() => void fetchRemoteModels(editingConfig, true)}
-                      >
-                        {t('providerSelection.refreshModels')}
-                      </Button>
+                      {renderSelectedModelRows()}
                     </div>
-                    <div className="openbitfun-model-settings__manual-model-entry">
-                      <Input
-                        data-testid="settings-model-manual-name-input"
-                        value={manualModelInput}
-                        onChange={(e) => setManualModelInput(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            e.preventDefault();
-                            addManualModelDraft();
-                          }
-                        }}
-                        placeholder={t('providerSelection.inputModelName')}
-                        size="sm"
-                      />
-                      <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
-                        {t('providerSelection.addCustomModel')}
-                      </Button>
+                  </ConfigPageRow>
+                </>
+              ) : (
+                <>
+                  {isProviderScopedEditing && (
+                    <>
+                      <ConfigPageRow label={t('form.configName')} required align="center" wide>
+                        <Input
+                          data-testid="settings-model-provider-name-input"
+                          invalid={showModelValidation && missingModelFields.name}
+                          required
+                          value={editingConfig.name || ''}
+                          onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))}
+                          placeholder={t('form.configNamePlaceholder')}
+                          size="sm"
+                        />
+                      </ConfigPageRow>
+                      {renderAuthRow()}
+                      {!authIsSubscription && renderApiKeyRow(t('form.apiKey'))}
+                      {!authIsSubscription && (
+                        <>
+                          <ConfigPageRow label={t('form.baseUrl')} required align="center" wide>
+                            <div className="openbitfun-model-settings__control-stack">
+                              <Input
+                                data-testid="settings-model-base-url-input"
+                                invalid={showModelValidation && missingModelFields.baseUrl}
+                                required
+                                type="url"
+                                value={editingConfig.base_url || ''}
+                                onChange={(e) => {
+                                  resetRemoteModelDiscovery();
+                                  setEditingConfig(prev => ({
+                                    ...prev,
+                                    base_url: e.target.value,
+                                    request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
+                                  }));
+                                }}
+                                onFocus={(e) => e.target.select()}
+                                placeholder={'https://open.bigmodel.cn/api/paas/v4/chat/completions'}
+                                size="sm"
+                              />
+                              {editingConfig.base_url && !automaticOpenCodeRouting && (
+                                <div className="openbitfun-model-settings__resolved-url">
+                                  <span className="openbitfun-model-settings__resolved-url-label">{t('form.resolvedUrlLabel')}</span>
+                                  <span className="openbitfun-model-settings__resolved-url-value">
+                                    {previewRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', selectedModelDrafts.length === 1 ? selectedModelDrafts[0].modelName : undefined)}
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          </ConfigPageRow>
+                          {!automaticOpenCodeRouting && (
+                            <ConfigPageRow label={t('form.provider')} align="center" wide>
+                              <Select data-testid="settings-model-request-format-select" value={editingConfig.provider || 'openai'} onValueChange={(value) => {
+                                const provider = value as string;
+                                resetRemoteModelDiscovery();
+                                setEditingConfig(prev => ({
+                                  ...prev,
+                                  provider,
+                                  request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || ''),
+                                }));
+                              }} placeholder={t('form.providerPlaceholder')} options={requestFormatOptions} size="sm" />
+                            </ConfigPageRow>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </>
+              )}
+
+              {!isFromTemplate && (
+                <>
+                  <ConfigPageRow label={t('form.modelSelection')} required multiline className="openbitfun-model-settings__model-selection-row">
+                    <div className="openbitfun-model-settings__control-stack">
+                      <div className="openbitfun-model-settings__model-picker-row">
+                        {editingConfig.id ? (
+                          <Combobox
+                            aria-required="true"
+                            data-testid="settings-model-select"
+                            invalid={showModelValidation && missingModelFields.model}
+                            value={selectedModelValues[0] || ''}
+                            onValueChange={(value) => {
+                              syncSelectedModelDrafts([String(value)], editingConfig, true);
+                            }}
+                            placeholder="glm-5.2"
+                            options={availableModelOptions}
+                            loading={isFetchingRemoteModels}
+                            onCreateValue={value => value}
+                            size="sm"
+                            onOpenChange={handleModelSelectionOpenChange}
+                          />
+                        ) : (
+                          <MultiSelect
+                            aria-required="true"
+                            data-testid="settings-model-select"
+                            invalid={showModelValidation && missingModelFields.model}
+                            value={selectedModelValues}
+                            onValueChange={(value) => {
+                              syncSelectedModelDrafts(value.map(item => String(item)), editingConfig, false);
+                            }}
+                            placeholder="glm-5.2"
+                            options={availableModelOptions}
+                            loading={isFetchingRemoteModels}
+                            onCreateValue={value => value}
+                            size="sm"
+                            onOpenChange={handleModelSelectionOpenChange}
+                          />
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          data-testid="settings-model-refresh-btn"
+                          disabled={isFetchingRemoteModels}
+                          onClick={() => void fetchRemoteModels(editingConfig, true)}
+                        >
+                          {t('providerSelection.refreshModels')}
+                        </Button>
+                      </div>
+                      <div className="openbitfun-model-settings__manual-model-entry">
+                        <Input
+                          data-testid="settings-model-manual-name-input"
+                          value={manualModelInput}
+                          onChange={(e) => setManualModelInput(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              addManualModelDraft();
+                            }
+                          }}
+                          placeholder={t('providerSelection.inputModelName')}
+                          size="sm"
+                        />
+                        <Button className="openbitfun-model-settings__manual-model-add" data-testid="settings-model-add-custom-btn" variant="outline" size="sm" onClick={addManualModelDraft}>
+                          {t('providerSelection.addCustomModel')}
+                        </Button>
+                      </div>
+                      {modelFetchHint && (
+                        <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
+                          {modelFetchHint}
+                        </small>
+                      )}
+                      {renderSelectedModelRows()}
                     </div>
-                    {modelFetchHint && (
-                      <small className={`resolved-url__hint openbitfun-model-settings__model-fetch-hint ${remoteModelsError ? 'openbitfun-model-settings__json-status--error' : ''}`}>
-                        {modelFetchHint}
-                      </small>
-                    )}
-                    {renderSelectedModelRows()}
-                  </div>
-                </ConfigPageRow>
-              </>
-            )}
-          </ConfigPageSection>
+                  </ConfigPageRow>
+                </>
+              )}
+            </ConfigPageSection>
 
-          {!authIsSubscription && (
-            <ConfigPageSection
-              title={t('advancedSettings.title')}
-              description={t('advancedSettings.description')}
-              className="openbitfun-model-settings__edit-section"
-              fieldSurface="default"
-            >
-              <ConfigPageRow className="openbitfun-model-settings__toggle-row" label={t('advancedSettings.title')} align="center">
-                <Switch checked={showAdvancedSettings} onChange={(e) => setShowAdvancedSettings(e.target.checked)} />
-              </ConfigPageRow>
+            {!authIsSubscription && (
+              <ConfigPageSection
+                title={t('advancedSettings.title')}
+                description={t('advancedSettings.description')}
+                className="openbitfun-model-settings__edit-section"
+                fieldSurface="default"
+              >
+                <ConfigPageRow className="openbitfun-model-settings__toggle-row" label={t('advancedSettings.title')} align="center">
+                  <Switch checked={showAdvancedSettings} onChange={(e) => setShowAdvancedSettings(e.target.checked)} />
+                </ConfigPageRow>
 
-              {showAdvancedSettings && (
-                <>
-                  {(editingConfig.provider === 'openai' || editingConfig.provider === 'anthropic') && (
+                {showAdvancedSettings && (
+                  <>
+                    {(editingConfig.provider === 'openai' || editingConfig.provider === 'anthropic') && (
+                      <ConfigPageRow
+                        label={t('advancedSettings.inlineThinkInText.label')}
+                        description={t('advancedSettings.inlineThinkInText.hint')}
+                        align="center"
+                        className="openbitfun-model-settings__toggle-row"
+                      >
+                        <Switch
+                          checked={editingConfig.inline_think_in_text ?? true}
+                          onChange={(e) => setEditingConfig(prev => ({ ...prev, inline_think_in_text: e.target.checked }))}
+                        />
+                      </ConfigPageRow>
+                    )}
                     <ConfigPageRow
-                      label={t('advancedSettings.inlineThinkInText.label')}
-                      description={t('advancedSettings.inlineThinkInText.hint')}
+                      label={t('advancedSettings.skipSslVerify.label')}
+                      description={editingConfig.skip_ssl_verify ? (
+                        <span className="openbitfun-model-settings__warning-inline">
+                          <AlertTriangle size={14} />
+                          <span>{t('advancedSettings.skipSslVerify.warning')}</span>
+                        </span>
+                      ) : undefined}
                       align="center"
                       className="openbitfun-model-settings__toggle-row"
                     >
                       <Switch
-                        checked={editingConfig.inline_think_in_text ?? true}
-                        onChange={(e) => setEditingConfig(prev => ({ ...prev, inline_think_in_text: e.target.checked }))}
+                        checked={editingConfig.skip_ssl_verify || false}
+                        onChange={(e) => setEditingConfig(prev => ({ ...prev, skip_ssl_verify: e.target.checked }))}
                       />
                     </ConfigPageRow>
-                  )}
-                  <ConfigPageRow
-                    label={t('advancedSettings.skipSslVerify.label')}
-                    description={editingConfig.skip_ssl_verify ? (
-                      <span className="openbitfun-model-settings__warning-inline">
-                        <AlertTriangle size={14} />
-                        <span>{t('advancedSettings.skipSslVerify.warning')}</span>
-                      </span>
-                    ) : undefined}
-                    align="center"
-                    className="openbitfun-model-settings__toggle-row"
-                  >
-                    <Switch
-                      checked={editingConfig.skip_ssl_verify || false}
-                      onChange={(e) => setEditingConfig(prev => ({ ...prev, skip_ssl_verify: e.target.checked }))}
-                    />
-                  </ConfigPageRow>
-                  <ConfigPageRow
-                    label={(
-                      <span className="openbitfun-model-settings__inline-header">
-                        <span className="openbitfun-model-settings__inline-header-main">
-                          <span>{t('advancedSettings.customHeaders.label')}</span>
-                          <Tooltip
-                            content={(
-                              <span className="openbitfun-model-settings__header-tooltip">
-                                <span>{t('advancedSettings.customHeaders.hint')}</span>
-                                <span>
-                                  {(editingConfig.custom_headers_mode || 'merge') === 'replace'
-                                    ? t('advancedSettings.customHeaders.modeReplaceHint')
-                                    : t('advancedSettings.customHeaders.modeMergeHint')}
+                    <ConfigPageRow
+                      label={(
+                        <span className="openbitfun-model-settings__inline-header">
+                          <span className="openbitfun-model-settings__inline-header-main">
+                            <span>{t('advancedSettings.customHeaders.label')}</span>
+                            <Tooltip
+                              content={(
+                                <span className="openbitfun-model-settings__header-tooltip">
+                                  <span>{t('advancedSettings.customHeaders.hint')}</span>
+                                  <span>
+                                    {(editingConfig.custom_headers_mode || 'merge') === 'replace'
+                                      ? t('advancedSettings.customHeaders.modeReplaceHint')
+                                      : t('advancedSettings.customHeaders.modeMergeHint')}
+                                  </span>
                                 </span>
-                              </span>
-                            )}
-                            placement="top"
-                          >
-                            <span
-                              className="openbitfun-model-settings__inline-header-info"
-                              role="button"
-                              tabIndex={0}
-                              aria-label={t('advancedSettings.customHeaders.hint')}
-                            >
-                              <Icon name="info" size="sm" />
-                            </span>
-                          </Tooltip>
-                        </span>
-                        <span className="openbitfun-model-settings__inline-header-actions">
-                          <Tooltip content={t('advancedSettings.customHeaders.modeMergeHint')} placement="top">
-                            <Button
-                              type="button"
-                              variant={(editingConfig.custom_headers_mode || 'merge') === 'merge' ? 'fill' : 'outline'}
-                              size="sm"
-                              className="openbitfun-model-settings__mode-button"
-                              onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers_mode: 'merge' }))}
+                              )}
+                              placement="top"
                             >
-                              {t('advancedSettings.customHeaders.modeMerge')}
-                            </Button>
-                          </Tooltip>
-                          <Tooltip content={t('advancedSettings.customHeaders.modeReplaceHint')} placement="top">
-                            <Button
-                              type="button"
-                              variant={editingConfig.custom_headers_mode === 'replace' ? 'fill' : 'outline'}
-                              size="sm"
-                              className="openbitfun-model-settings__mode-button"
-                              onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers_mode: 'replace' }))}
-                            >
-                              {t('advancedSettings.customHeaders.modeReplace')}
-                            </Button>
-                          </Tooltip>
+                              <span
+                                className="openbitfun-model-settings__inline-header-info"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={t('advancedSettings.customHeaders.hint')}
+                              >
+                                <Icon name="info" size="sm" />
+                              </span>
+                            </Tooltip>
+                          </span>
+                          <span className="openbitfun-model-settings__inline-header-actions">
+                            <Tooltip content={t('advancedSettings.customHeaders.modeMergeHint')} placement="top">
+                              <Button
+                                type="button"
+                                variant={(editingConfig.custom_headers_mode || 'merge') === 'merge' ? 'fill' : 'outline'}
+                                size="sm"
+                                className="openbitfun-model-settings__mode-button"
+                                onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers_mode: 'merge' }))}
+                              >
+                                {t('advancedSettings.customHeaders.modeMerge')}
+                              </Button>
+                            </Tooltip>
+                            <Tooltip content={t('advancedSettings.customHeaders.modeReplaceHint')} placement="top">
+                              <Button
+                                type="button"
+                                variant={editingConfig.custom_headers_mode === 'replace' ? 'fill' : 'outline'}
+                                size="sm"
+                                className="openbitfun-model-settings__mode-button"
+                                onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers_mode: 'replace' }))}
+                              >
+                                {t('advancedSettings.customHeaders.modeReplace')}
+                              </Button>
+                            </Tooltip>
+                          </span>
                         </span>
-                      </span>
-                    )}
-                    multiline
-                    className="openbitfun-model-settings__custom-headers-row"
-                  >
-                    <div className="openbitfun-model-settings__row-control--stack">
-                      <div className="openbitfun-model-settings__custom-headers">
-                        {Object.entries(editingConfig.custom_headers || {}).map(([key, value], index) => (
-                          <div key={index} className="openbitfun-model-settings__header-row">
-                            <Input
-                              value={key}
-                              onChange={(e) => { const nh = { ...editingConfig.custom_headers }; const ov = nh[key]; delete nh[key]; if (e.target.value) nh[e.target.value] = ov; setEditingConfig(prev => ({ ...prev, custom_headers: nh })); }}
-                              placeholder={t('advancedSettings.customHeaders.keyPlaceholder')}
-                              className="openbitfun-model-settings__header-key"
-                              size="sm"
-                            />
-                            <Input
-                              value={value}
-                              onChange={(e) => { const nh = { ...editingConfig.custom_headers }; nh[key] = e.target.value; setEditingConfig(prev => ({ ...prev, custom_headers: nh })); }}
-                              placeholder={t('advancedSettings.customHeaders.valuePlaceholder')}
-                              className="openbitfun-model-settings__header-value"
-                              size="sm"
-                            />
-                            <Tooltip content={t('actions.delete')}>
-                              <IconButton
-                                aria-label={t('actions.delete')}
+                      )}
+                      multiline
+                      className="openbitfun-model-settings__custom-headers-row"
+                    >
+                      <div className="openbitfun-model-settings__row-control--stack">
+                        <div className="openbitfun-model-settings__custom-headers">
+                          {Object.entries(editingConfig.custom_headers || {}).map(([key, value], index) => (
+                            <div key={index} className="openbitfun-model-settings__header-row">
+                              <Input
+                                value={key}
+                                onChange={(e) => { const nh = { ...editingConfig.custom_headers }; const ov = nh[key]; delete nh[key]; if (e.target.value) nh[e.target.value] = ov; setEditingConfig(prev => ({ ...prev, custom_headers: nh })); }}
+                                placeholder={t('advancedSettings.customHeaders.keyPlaceholder')}
+                                className="openbitfun-model-settings__header-key"
                                 size="sm"
-                                onClick={() => { const nh = { ...editingConfig.custom_headers }; delete nh[key]; setEditingConfig(prev => ({ ...prev, custom_headers: Object.keys(nh).length > 0 ? nh : undefined })); }}
-                                icon={<Icon name="xmark" size="sm" />}
                               />
-                            </Tooltip>
-                          </div>
-                        ))}
-                        <Button type="button" variant="outline" size="sm" onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers: { ...prev?.custom_headers, '': '' } }))} className="openbitfun-model-settings__add-header-btn" leadingIcon={<Icon name="plus" size="sm" />}>{t('advancedSettings.customHeaders.addHeader')}</Button>
+                              <Input
+                                value={value}
+                                onChange={(e) => { const nh = { ...editingConfig.custom_headers }; nh[key] = e.target.value; setEditingConfig(prev => ({ ...prev, custom_headers: nh })); }}
+                                placeholder={t('advancedSettings.customHeaders.valuePlaceholder')}
+                                className="openbitfun-model-settings__header-value"
+                                size="sm"
+                              />
+                              <Tooltip content={t('actions.delete')}>
+                                <IconButton
+                                  aria-label={t('actions.delete')}
+                                  size="sm"
+                                  onClick={() => { const nh = { ...editingConfig.custom_headers }; delete nh[key]; setEditingConfig(prev => ({ ...prev, custom_headers: Object.keys(nh).length > 0 ? nh : undefined })); }}
+                                  icon={<Icon name="xmark" size="sm" />}
+                                />
+                              </Tooltip>
+                            </div>
+                          ))}
+                          <Button type="button" variant="outline" size="sm" onClick={() => setEditingConfig(prev => ({ ...prev, custom_headers: { ...prev?.custom_headers, '': '' } }))} className="openbitfun-model-settings__add-header-btn" leadingIcon={<Icon name="plus" size="sm" />}>{t('advancedSettings.customHeaders.addHeader')}</Button>
+                        </div>
                       </div>
-                    </div>
-                  </ConfigPageRow>
-                  <ConfigPageRow
-                    label={(
-                      <span className="openbitfun-model-settings__inline-header">
-                        <span className="openbitfun-model-settings__inline-header-main">
-                          <span>{t('advancedSettings.customRequestBody.label')}</span>
-                          <Tooltip
-                            content={(
-                              <span className="openbitfun-model-settings__header-tooltip">
-                                <span>{t('advancedSettings.customRequestBody.hint')}</span>
-                                <span>{getCustomRequestBodyModeHint(editingConfig.provider, editingConfig.custom_request_body_mode)}</span>
-                              </span>
-                            )}
-                            placement="top"
-                          >
-                            <span
-                              className="openbitfun-model-settings__inline-header-info"
-                              role="button"
-                              tabIndex={0}
-                              aria-label={t('advancedSettings.customRequestBody.hint')}
-                            >
-                              <Icon name="info" size="sm" />
-                            </span>
-                          </Tooltip>
-                        </span>
-                        <span className="openbitfun-model-settings__inline-header-actions">
-                          <Tooltip content={t('advancedSettings.customRequestBody.modeMergeHint')} placement="top">
-                            <Button
-                              type="button"
-                              variant={(editingConfig.custom_request_body_mode || 'merge') === 'merge' ? 'fill' : 'outline'}
-                              size="sm"
-                              className="openbitfun-model-settings__mode-button"
-                              onClick={() => setEditingConfig(prev => ({ ...prev, custom_request_body_mode: 'merge' }))}
-                            >
-                              {t('advancedSettings.customRequestBody.modeMerge')}
-                            </Button>
-                          </Tooltip>
-                          <Tooltip content={getCustomRequestBodyTrimHint(editingConfig.provider)} placement="top">
-                            <Button
-                              type="button"
-                              variant={editingConfig.custom_request_body_mode === 'trim' ? 'fill' : 'outline'}
-                              size="sm"
-                              className="openbitfun-model-settings__mode-button"
-                              onClick={() => setEditingConfig(prev => ({ ...prev, custom_request_body_mode: 'trim' }))}
+                    </ConfigPageRow>
+                    <ConfigPageRow
+                      label={(
+                        <span className="openbitfun-model-settings__inline-header">
+                          <span className="openbitfun-model-settings__inline-header-main">
+                            <span>{t('advancedSettings.customRequestBody.label')}</span>
+                            <Tooltip
+                              content={(
+                                <span className="openbitfun-model-settings__header-tooltip">
+                                  <span>{t('advancedSettings.customRequestBody.hint')}</span>
+                                  <span>{getCustomRequestBodyModeHint(editingConfig.provider, editingConfig.custom_request_body_mode)}</span>
+                                </span>
+                              )}
+                              placement="top"
                             >
-                              {t('advancedSettings.customRequestBody.modeTrim')}
-                            </Button>
-                          </Tooltip>
+                              <span
+                                className="openbitfun-model-settings__inline-header-info"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={t('advancedSettings.customRequestBody.hint')}
+                              >
+                                <Icon name="info" size="sm" />
+                              </span>
+                            </Tooltip>
+                          </span>
+                          <span className="openbitfun-model-settings__inline-header-actions">
+                            <Tooltip content={t('advancedSettings.customRequestBody.modeMergeHint')} placement="top">
+                              <Button
+                                type="button"
+                                variant={(editingConfig.custom_request_body_mode || 'merge') === 'merge' ? 'fill' : 'outline'}
+                                size="sm"
+                                className="openbitfun-model-settings__mode-button"
+                                onClick={() => setEditingConfig(prev => ({ ...prev, custom_request_body_mode: 'merge' }))}
+                              >
+                                {t('advancedSettings.customRequestBody.modeMerge')}
+                              </Button>
+                            </Tooltip>
+                            <Tooltip content={getCustomRequestBodyTrimHint(editingConfig.provider)} placement="top">
+                              <Button
+                                type="button"
+                                variant={editingConfig.custom_request_body_mode === 'trim' ? 'fill' : 'outline'}
+                                size="sm"
+                                className="openbitfun-model-settings__mode-button"
+                                onClick={() => setEditingConfig(prev => ({ ...prev, custom_request_body_mode: 'trim' }))}
+                              >
+                                {t('advancedSettings.customRequestBody.modeTrim')}
+                              </Button>
+                            </Tooltip>
+                          </span>
                         </span>
-                      </span>
-                    )}
-                    multiline
-                    className="openbitfun-model-settings__custom-request-body-row"
-                  >
-                    <div className="openbitfun-model-settings__row-control--stack">
-                      <Textarea value={editingConfig.custom_request_body || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, custom_request_body: e.target.value }))} placeholder={t('advancedSettings.customRequestBody.placeholder')} rows={8} style={{ fontFamily: 'var(--openbitfun-type-code-md-font-family)', fontSize: 'var(--openbitfun-type-code-md-font-size)' }} />
-                      {editingConfig.custom_request_body && editingConfig.custom_request_body.trim() !== '' && (() => {
-                        try { JSON.parse(editingConfig.custom_request_body); return <small className="openbitfun-model-settings__json-status openbitfun-model-settings__json-status--success">{t('advancedSettings.customRequestBody.validJson')}</small>; }
-                        catch { return <small className="openbitfun-model-settings__json-status openbitfun-model-settings__json-status--error">{t('advancedSettings.customRequestBody.invalidJson')}</small>; }
-                      })()}
-                    </div>
-                  </ConfigPageRow>
-                </>
-              )}
-            </ConfigPageSection>
-          )}
+                      )}
+                      multiline
+                      className="openbitfun-model-settings__custom-request-body-row"
+                    >
+                      <div className="openbitfun-model-settings__row-control--stack">
+                        <Textarea value={editingConfig.custom_request_body || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, custom_request_body: e.target.value }))} placeholder={t('advancedSettings.customRequestBody.placeholder')} rows={8} style={{ fontFamily: 'var(--openbitfun-type-code-md-font-family)', fontSize: 'var(--openbitfun-type-code-md-font-size)' }} />
+                        {editingConfig.custom_request_body && editingConfig.custom_request_body.trim() !== '' && (() => {
+                          try { JSON.parse(editingConfig.custom_request_body); return <small className="openbitfun-model-settings__json-status openbitfun-model-settings__json-status--success">{t('advancedSettings.customRequestBody.validJson')}</small>; }
+                          catch { return <small className="openbitfun-model-settings__json-status openbitfun-model-settings__json-status--error">{t('advancedSettings.customRequestBody.invalidJson')}</small>; }
+                        })()}
+                      </div>
+                    </ConfigPageRow>
+                  </>
+                )}
+              </ConfigPageSection>
+            )}
           </div>
 
         </div>
@@ -3530,12 +3516,12 @@ const ModelSettingsPage: React.FC = () => {
     : undefined;
   const reasoningPanelProjectionRequest = reasoningPanelDraft && editingConfig
     ? {
-        provider: editingConfig.provider || 'openai',
-        modelName: reasoningPanelDraft.modelName,
-        baseUrl: editingConfig.base_url || '',
-        contextWindow: reasoningPanelDraft.contextWindow,
-        maxTokens: reasoningPanelDraft.maxTokens,
-      }
+      provider: editingConfig.provider || 'openai',
+      modelName: reasoningPanelDraft.modelName,
+      baseUrl: editingConfig.base_url || '',
+      contextWindow: reasoningPanelDraft.contextWindow,
+      maxTokens: reasoningPanelDraft.maxTokens,
+    }
     : undefined;
   const updateReasoningPanelDraft = (result: ReasoningConfigApplyResult) => {
     if (!reasoningPanelDraft) return;
@@ -3568,12 +3554,11 @@ const ModelSettingsPage: React.FC = () => {
     : t('modelsDevCatalog.loading');
   const modelsDevUpdatedAt = modelsDevStatus?.cache_updated_at_ms
     ? i18nService.formatDate(new Date(modelsDevStatus.cache_updated_at_ms), {
-        dateStyle: 'medium',
-        timeStyle: 'short',
-      })
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    })
     : t('modelsDevCatalog.noCache');
 
-  
   return (
     <ConfigPageLayout className="openbitfun-model-settings" data-openbitfun-component="model-settings" data-openbitfun-part="root" data-openbitfun-view="settings">
       <ConfigPageHeader
@@ -3914,8 +3899,8 @@ const ModelSettingsPage: React.FC = () => {
                 />
               </Tooltip>
               <Tooltip content={t(isRefreshingModelsDev
-                  ? 'modelsDevCatalog.refreshing'
-                  : 'modelsDevCatalog.refreshNow')}>
+                ? 'modelsDevCatalog.refreshing'
+                : 'modelsDevCatalog.refreshNow')}>
                 <IconButton
                   aria-label={t(isRefreshingModelsDev
                     ? 'modelsDevCatalog.refreshing'
@@ -4045,80 +4030,80 @@ const ModelSettingsPage: React.FC = () => {
           <DialogClose />
         </DialogHeader>
         <DialogBody inset="none">
-        <div className="openbitfun-model-settings__catalog-details">
-          <ConfigPageRow label={t('modelsDevCatalog.activeSource')} align="center">
-            <span className="openbitfun-model-settings__catalog-status-value">{modelsDevSourceLabel}</span>
-          </ConfigPageRow>
-          <ConfigPageRow label={t('modelsDevCatalog.catalogSize')} align="center">
-            <span className="openbitfun-model-settings__catalog-status-value">
-              {modelsDevStatus
-                ? t('modelsDevCatalog.catalogSizeValue', {
+          <div className="openbitfun-model-settings__catalog-details">
+            <ConfigPageRow label={t('modelsDevCatalog.activeSource')} align="center">
+              <span className="openbitfun-model-settings__catalog-status-value">{modelsDevSourceLabel}</span>
+            </ConfigPageRow>
+            <ConfigPageRow label={t('modelsDevCatalog.catalogSize')} align="center">
+              <span className="openbitfun-model-settings__catalog-status-value">
+                {modelsDevStatus
+                  ? t('modelsDevCatalog.catalogSizeValue', {
                     providers: i18nService.formatNumber(modelsDevStatus.provider_count),
                     models: i18nService.formatNumber(modelsDevStatus.reasoning_model_count),
                   })
-                : t('modelsDevCatalog.loading')}
-            </span>
-          </ConfigPageRow>
-          <ConfigPageRow label={t('modelsDevCatalog.cacheUpdatedAt')} align="center">
-            <span className="openbitfun-model-settings__catalog-status-value">{modelsDevUpdatedAt}</span>
-          </ConfigPageRow>
-          <ConfigPageRow label={t('modelsDevCatalog.cachePath')} align="center" wide>
-            <div className="openbitfun-model-settings__catalog-path">
-              <code title={modelsDevStatus?.cache_path}><OverflowText>{modelsDevStatus?.cache_path || '—'}</OverflowText></code>
-              <Tooltip content={t('modelsDevCatalog.reveal')}>
-                <IconButton
-                  aria-label={t('modelsDevCatalog.reveal')}
-                  size="sm"
-                  onClick={() => {
-                    void aiApi.revealModelsDevCacheDirectory().catch((error) => {
-                      log.warn('Failed to reveal models.dev cache', { error });
-                      notification.error(t('modelsDevCatalog.revealFailed'));
-                    });
-                  }}
-                  icon={<FolderOpen size={14} aria-hidden="true" />}
-                />
-              </Tooltip>
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow label={t('modelsDevCatalog.revision')} align="center">
-            <code className="openbitfun-model-settings__catalog-revision" title={modelsDevStatus?.revision}>
-              {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}…` : '—'}
-            </code>
-          </ConfigPageRow>
-          <div className="openbitfun-model-settings__catalog-offline-help" role="note">
-            <Icon name="info" size="sm" aria-hidden="true" />
-            <div>
-              <strong>{t('modelsDevCatalog.offlineTitle')}</strong>
-              <p>{t('modelsDevCatalog.offlineDescription')}</p>
-              <div className="openbitfun-model-settings__catalog-offline-actions">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => void systemAPI.openExternal(MODELS_DEV_DOWNLOAD_URL)}
-                  leadingIcon={<Icon name="arrow-up-right" size="sm" aria-hidden="true" />}
-                >
+                  : t('modelsDevCatalog.loading')}
+              </span>
+            </ConfigPageRow>
+            <ConfigPageRow label={t('modelsDevCatalog.cacheUpdatedAt')} align="center">
+              <span className="openbitfun-model-settings__catalog-status-value">{modelsDevUpdatedAt}</span>
+            </ConfigPageRow>
+            <ConfigPageRow label={t('modelsDevCatalog.cachePath')} align="center" wide>
+              <div className="openbitfun-model-settings__catalog-path">
+                <code title={modelsDevStatus?.cache_path}><OverflowText>{modelsDevStatus?.cache_path || '—'}</OverflowText></code>
+                <Tooltip content={t('modelsDevCatalog.reveal')}>
+                  <IconButton
+                    aria-label={t('modelsDevCatalog.reveal')}
+                    size="sm"
+                    onClick={() => {
+                      void aiApi.revealModelsDevCacheDirectory().catch((error) => {
+                        log.warn('Failed to reveal models.dev cache', { error });
+                        notification.error(t('modelsDevCatalog.revealFailed'));
+                      });
+                    }}
+                    icon={<FolderOpen size={14} aria-hidden="true" />}
+                  />
+                </Tooltip>
+              </div>
+            </ConfigPageRow>
+            <ConfigPageRow label={t('modelsDevCatalog.revision')} align="center">
+              <code className="openbitfun-model-settings__catalog-revision" title={modelsDevStatus?.revision}>
+                {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}…` : '—'}
+              </code>
+            </ConfigPageRow>
+            <div className="openbitfun-model-settings__catalog-offline-help" role="note">
+              <Icon name="info" size="sm" aria-hidden="true" />
+              <div>
+                <strong>{t('modelsDevCatalog.offlineTitle')}</strong>
+                <p>{t('modelsDevCatalog.offlineDescription')}</p>
+                <div className="openbitfun-model-settings__catalog-offline-actions">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void systemAPI.openExternal(MODELS_DEV_DOWNLOAD_URL)}
+                    leadingIcon={<Icon name="arrow-up-right" size="sm" aria-hidden="true" />}
+                  >
 
-                  {t('modelsDevCatalog.downloadOriginal')}
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    void aiApi.revealModelsDevCacheDirectory().catch((error) => {
-                      log.warn('Failed to reveal models.dev cache directory', { error });
-                      notification.error(t('modelsDevCatalog.revealFailed'));
-                    });
-                  }}
-                  leadingIcon={<FolderOpen size={14} aria-hidden="true" />}
-                >
+                    {t('modelsDevCatalog.downloadOriginal')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      void aiApi.revealModelsDevCacheDirectory().catch((error) => {
+                        log.warn('Failed to reveal models.dev cache directory', { error });
+                        notification.error(t('modelsDevCatalog.revealFailed'));
+                      });
+                    }}
+                    leadingIcon={<FolderOpen size={14} aria-hidden="true" />}
+                  >
 
-                  {t('modelsDevCatalog.openCacheDirectory')}
-                </Button>
+                    {t('modelsDevCatalog.openCacheDirectory')}
+                  </Button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-              </DialogBody>
+        </DialogBody>
       </Dialog>
 
       <Dialog
@@ -4134,26 +4119,26 @@ const ModelSettingsPage: React.FC = () => {
           <DialogClose />
         </DialogHeader>
         <DialogBody inset="none">
-        <div className="openbitfun-model-settings__subscription-logout-confirm" data-openbitfun-component="model-settings" data-openbitfun-part="logoutConfirm">
-          <p>
-            {subscriptionLogoutRequest?.affectedModels.length
-              ? t('subscriptionAuth.logoutAffectedModels', {
+          <div className="openbitfun-model-settings__subscription-logout-confirm" data-openbitfun-component="model-settings" data-openbitfun-part="logoutConfirm">
+            <p>
+              {subscriptionLogoutRequest?.affectedModels.length
+                ? t('subscriptionAuth.logoutAffectedModels', {
                   count: subscriptionLogoutRequest.affectedModels.length,
                 })
-              : t('subscriptionAuth.logoutNoAffectedModels')}
-          </p>
-          {!!subscriptionLogoutRequest?.affectedModels.length && (
-            <ScrollArea className="openbitfun-model-settings__subscription-logout-list">
-              <ul>
-                {subscriptionLogoutRequest.affectedModels.map((model) => (
-                  <li key={model.id}>{model.name} · {model.model_name}</li>
-                ))}
-              </ul>
-            </ScrollArea>
-          )}
-          <p>{t('subscriptionAuth.logoutConsequence')}</p>
-        </div>
-              </DialogBody>
+                : t('subscriptionAuth.logoutNoAffectedModels')}
+            </p>
+            {!!subscriptionLogoutRequest?.affectedModels.length && (
+              <ScrollArea className="openbitfun-model-settings__subscription-logout-list">
+                <ul>
+                  {subscriptionLogoutRequest.affectedModels.map((model) => (
+                    <li key={model.id}>{model.name} · {model.model_name}</li>
+                  ))}
+                </ul>
+              </ScrollArea>
+            )}
+            <p>{t('subscriptionAuth.logoutConsequence')}</p>
+          </div>
+        </DialogBody>
         <DialogFooter>{(
           <>
             <Button
@@ -4189,18 +4174,18 @@ const ModelSettingsPage: React.FC = () => {
         <DialogHeader>
           <DialogHeading>
             <DialogTitle>{reasoningPanelDraft
-          ? t('reasoningPresets.dialogTitle', {
-              provider: editingConfig?.name?.trim()
-                || currentTemplate?.name
-                || editingConfig?.provider
-                || '',
-              model: reasoningPanelDraft.modelName,
-            })
-          : editingConfig?.id
-            ? t('editModel')
-            : (getProviderInstanceId(editingConfig)
-              ? t('editProvider')
-              : (currentTemplate ? `${t('newProvider')} - ${currentTemplate.name}` : t('newProvider')))}</DialogTitle>
+              ? t('reasoningPresets.dialogTitle', {
+                provider: editingConfig?.name?.trim()
+                  || currentTemplate?.name
+                  || editingConfig?.provider
+                  || '',
+                model: reasoningPanelDraft.modelName,
+              })
+              : editingConfig?.id
+                ? t('editModel')
+                : (getProviderInstanceId(editingConfig)
+                  ? t('editProvider')
+                  : (currentTemplate ? `${t('newProvider')} - ${currentTemplate.name}` : t('newProvider')))}</DialogTitle>
           </DialogHeading>
           <DialogClose disabled={isEditorSaving} />
         </DialogHeader>
@@ -4209,26 +4194,26 @@ const ModelSettingsPage: React.FC = () => {
           aria-busy={isEditorSaving}
           {...(isEditorSaving ? { inert: '' } : {})}
         >
-        {reasoningPanelDraft ? (
-          <ReasoningConfigPanel
-            key={reasoningPanelDraft.key}
-            value={reasoningPanelDraft.reasoning}
-            generatedProjection={reasoningPanelProjection}
-            modelsDevReasoningCatalog={modelCatalog?.models_dev_reasoning_catalog}
-            projectionRequest={reasoningPanelProjectionRequest}
-            requestFormatLabel={reasoningPanelProjectionRequest
-              ? requestFormatLabelMap[reasoningPanelProjectionRequest.provider]
+          {reasoningPanelDraft ? (
+            <ReasoningConfigPanel
+              key={reasoningPanelDraft.key}
+              value={reasoningPanelDraft.reasoning}
+              generatedProjection={reasoningPanelProjection}
+              modelsDevReasoningCatalog={modelCatalog?.models_dev_reasoning_catalog}
+              projectionRequest={reasoningPanelProjectionRequest}
+              requestFormatLabel={reasoningPanelProjectionRequest
+                ? requestFormatLabelMap[reasoningPanelProjectionRequest.provider]
                 || reasoningPanelProjectionRequest.provider
-              : undefined}
-            onCancel={cancelReasoningPanel}
-            onDraftChange={updateReasoningPanelDraft}
-            onApply={(result: ReasoningConfigApplyResult) => {
-              updateReasoningPanelDraft(result);
-              finishReasoningPanel();
-            }}
-          />
-        ) : renderEditingForm()}
-              </DialogBody>
+                : undefined}
+              onCancel={cancelReasoningPanel}
+              onDraftChange={updateReasoningPanelDraft}
+              onApply={(result: ReasoningConfigApplyResult) => {
+                updateReasoningPanelDraft(result);
+                finishReasoningPanel();
+              }}
+            />
+          ) : renderEditingForm()}
+        </DialogBody>
         {!reasoningPanelDraft && (
           <DialogFooter appearance="floating">
             <Button variant="fill" size="sm" onClick={requestCloseEditingModal} disabled={isEditorSaving}>
@@ -4283,14 +4268,14 @@ const ModelSettingsPage: React.FC = () => {
           ? t(deleteRequest.discardsRetainedDraft
             ? 'providerDeleteConfirm.messageWithDraft'
             : 'providerDeleteConfirm.message', {
-              name: deleteRequest.providerName,
-              modelCount: deleteRequest.modelCount,
-              referenceCount: deleteRequest.referenceCount,
-            })
+            name: deleteRequest.providerName,
+            modelCount: deleteRequest.modelCount,
+            referenceCount: deleteRequest.referenceCount,
+          })
           : t('deleteConfirm.message', {
-              name: deleteRequest?.config.model_name || '',
-              count: deleteRequest?.referenceCount ?? 0,
-            })}
+            name: deleteRequest?.config.model_name || '',
+            count: deleteRequest?.referenceCount ?? 0,
+          })}
         confirmText={t(deleteRequest?.kind === 'provider'
           ? 'providerDeleteConfirm.confirm'
           : 'deleteConfirm.confirm')}
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
new file mode 100644
index 0000000000..8873af9115
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
@@ -0,0 +1,249 @@
+import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
+import {
+  ConfigLoadingState,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigRetryState
+} from '@/infrastructure/config/components/common';
+import { GlobalPermissionRulesDialog } from '@/infrastructure/config/components/GlobalPermissionRulesDialog';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import {
+  DEFAULT_TOOL_PERMISSION_CONFIG,
+  normalizeToolPermissionConfig,
+  permissionConfigService,
+} from '@/infrastructure/config/services/PermissionConfigService';
+import type {
+  PermissionRule,
+  ToolPermissionConfig
+} from '@/infrastructure/config/types';
+import { confirmDanger } from '@/infrastructure/confirm-dialog';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Button,
+  Select,
+  Switch
+} from '@openbitfun/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+const log = createLogger('PermissionsSettingsPage');
+
+type ToolPermissionMode = 'ask' | 'auto' | 'full_access';
+
+const SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH = 'app.flow_chat.show_permission_mode_control';
+
+function resolveToolPermissionMode(config: ToolPermissionConfig): ToolPermissionMode {
+  if (config.policy.preset === 'full_access') return 'full_access';
+  return config.interaction.auto_approve_ask ? 'auto' : 'ask';
+}
+
+const PermissionsSettingsPage: React.FC = () => {
+  const { t } = useTranslation('settings/runtime');
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [loadError, setLoadError] = useState(false);
+
+  const hasLoadedPageDataRef = useRef(false);
+
+  const toolPermissionSaveInFlightRef = useRef(false);
+
+  const [toolPermissionConfig, setToolPermissionConfig] = useState<ToolPermissionConfig>(DEFAULT_TOOL_PERMISSION_CONFIG);
+
+  const [permissionConfigSaving, setPermissionConfigSaving] = useState(false);
+
+  const [showPermissionModeControl, setShowPermissionModeControl] = useState(true);
+
+  const [permissionModeControlVisibilitySaving, setPermissionModeControlVisibilitySaving] = useState(false);
+
+  const [isGlobalPermissionRulesDialogOpen, setIsGlobalPermissionRulesDialogOpen] = useState(false);
+
+  const saveToolPermissionConfig = async (
+    nextConfig: ToolPermissionConfig,
+    previousConfig: ToolPermissionConfig,
+  ): Promise<boolean> => {
+    if (toolPermissionSaveInFlightRef.current) return false;
+    toolPermissionSaveInFlightRef.current = true;
+    setToolPermissionConfig(nextConfig);
+    setPermissionConfigSaving(true);
+    try {
+      await permissionConfigService.saveConfig(nextConfig);
+      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
+      return true;
+    } catch (error) {
+      log.error('Failed to save tool permission config', error);
+      setToolPermissionConfig(previousConfig);
+      notificationService.error(t('messages.saveFailed'));
+      return false;
+    } finally {
+      toolPermissionSaveInFlightRef.current = false;
+      setPermissionConfigSaving(false);
+    }
+  };
+
+  const handlePermissionModeChange = async (value: string | number | (string | number)[]) => {
+    const nextModeValue = String(Array.isArray(value) ? value[0] : value);
+    const nextMode: ToolPermissionMode = nextModeValue === 'full_access'
+      ? 'full_access'
+      : nextModeValue === 'auto'
+        ? 'auto'
+        : 'ask';
+    const previousConfig = toolPermissionConfig;
+    const currentMode = resolveToolPermissionMode(previousConfig);
+    if (nextMode === currentMode) return;
+
+    if (nextMode === 'full_access') {
+      const confirmed = await confirmDanger(
+        t('permissionPolicy.fullAccessWarningTitle'),
+        t('permissionPolicy.fullAccessWarningMessage'),
+        {
+          confirmText: t('permissionPolicy.fullAccessConfirm'),
+          cancelText: t('permissionPolicy.cancel'),
+        },
+      );
+      if (!confirmed) return;
+    }
+
+    await saveToolPermissionConfig(
+      {
+        policy: {
+          ...previousConfig.policy,
+          preset: nextMode === 'full_access' ? 'full_access' : 'ask',
+        },
+        interaction: {
+          ...previousConfig.interaction,
+          auto_approve_ask: nextMode === 'auto',
+        },
+      },
+      previousConfig,
+    );
+  };
+
+  const handleSaveGlobalPermissionRules = async (rules: PermissionRule[]): Promise<boolean> => {
+    const previousConfig = toolPermissionConfig;
+    return saveToolPermissionConfig(
+      { ...previousConfig, policy: { ...previousConfig.policy, rules } },
+      previousConfig,
+    );
+  };
+
+  const handlePermissionModeControlVisibilityChange = async (visible: boolean) => {
+    const previousVisibility = showPermissionModeControl;
+    setShowPermissionModeControl(visible);
+    setPermissionModeControlVisibilitySaving(true);
+    try {
+      await configManager.setConfig(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH, visible);
+      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
+    } catch (error) {
+      log.error('Failed to save permission mode control visibility', error);
+      setShowPermissionModeControl(previousVisibility);
+      notificationService.error(t('messages.saveFailed'));
+    } finally {
+      setPermissionModeControlVisibilitySaving(false);
+    }
+  };
+
+  const loadPageData = useCallback(async () => {
+    const isInitialLoad = !hasLoadedPageDataRef.current;
+    if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
+    try {
+      const [permissionConfig, permissionModeVisible] = await Promise.all([
+        permissionConfigService.getConfig(),
+        configManager.getOptionalConfig<boolean>(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH),
+      ]);
+      setToolPermissionConfig(normalizeToolPermissionConfig(permissionConfig));
+      setShowPermissionModeControl(permissionModeVisible !== false);
+      hasLoadedPageDataRef.current = true;
+    } catch (error) {
+      log.error('Failed to load settings page data', { error });
+      if (isInitialLoad) setLoadError(true);
+    } finally {
+      if (isInitialLoad) setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+
+    void loadPageData();
+  }, [loadPageData]);
+
+  return (
+    <SettingsPage pageId="ai.permissions" className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view="permissions">
+      {loadError ? (
+        <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void loadPageData()} />
+      ) : isLoading ? (
+        <ConfigLoadingState label={t('loading.text')} />
+      ) : <>
+        <ConfigPageSection
+          title={t('permissionPolicy.sectionTitle')}
+          description={t('permissionPolicy.sectionDescription')}
+        >
+          <ConfigPageRow
+            label={t('permissionPolicy.mode')}
+            description={`${resolveToolPermissionMode(toolPermissionConfig) === 'full_access'
+              ? t('permissionPolicy.fullAccessDescription')
+              : resolveToolPermissionMode(toolPermissionConfig) === 'auto'
+                ? t('permissionPolicy.autoApproveDescription')
+                : t('permissionPolicy.askDescription')} ${t('permissionPolicy.modeDescription')}`}
+            align="center"
+          >
+            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+              <Select
+                size="sm"
+                value={resolveToolPermissionMode(toolPermissionConfig)}
+                options={[
+                  { value: 'ask', label: t('permissionPolicy.ask') },
+                  { value: 'auto', label: t('permissionPolicy.autoApprove') },
+                  { value: 'full_access', label: t('permissionPolicy.fullAccess') },
+                ]}
+                disabled={permissionConfigSaving}
+                onValueChange={handlePermissionModeChange}
+              />
+            </div>
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('permissionPolicy.showInChatInput')}
+            description={t('permissionPolicy.showInChatInputDescription')}
+            align="center"
+          >
+            <div className="openbitfun-runtime-settings__row-control">
+              <Switch
+                checked={showPermissionModeControl}
+                disabled={permissionModeControlVisibilitySaving}
+                onChange={event => void handlePermissionModeControlVisibilityChange(event.target.checked)}
+              />
+            </div>
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('permissionPolicy.globalRules')}
+            description={t('permissionPolicy.globalRulesDescription')}
+            align="center"
+          >
+            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                disabled={permissionConfigSaving}
+                onClick={() => setIsGlobalPermissionRulesDialogOpen(true)}
+              >
+                {t('permissionPolicy.manageGlobalRules')}
+              </Button>
+            </div>
+          </ConfigPageRow>
+        </ConfigPageSection>
+
+        <GlobalPermissionRulesDialog
+          isOpen={isGlobalPermissionRulesDialogOpen}
+          rules={toolPermissionConfig.policy.rules}
+          isSaving={permissionConfigSaving}
+          onSave={handleSaveGlobalPermissionRules}
+          onClose={() => setIsGlobalPermissionRulesDialogOpen(false)}
+        />
+
+      </>}
+    </SettingsPage>
+  );
+};
+
+export default PermissionsSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.test.tsx
similarity index 98%
rename from src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.test.tsx
index 2430f38b1d..671aafd7e0 100644
--- a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
-import ReviewCapacitySection from './ReviewCapacitySection';
+import ReviewCapacitySection from '@/app/scenes/settings/pages/ai/ReviewCapacitySection';
 
 const loadDefaultReviewTeamMock = vi.hoisted(() => vi.fn());
 const saveDefaultReviewTeamConcurrencyPolicyMock = vi.hoisted(() => vi.fn());
@@ -66,7 +66,7 @@ vi.mock('@openbitfun/ui', () => ({
   ),
 }));
 
-vi.mock('./common', () => ({
+vi.mock('../../../../../infrastructure/config/components/common', () => ({
   ConfigLoadingState: ({ label }: { label: string }) => <div>{label}</div>,
   ConfigPageContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   ConfigPageHeader: ({ title, subtitle }: { title: string; subtitle: string }) => (
diff --git a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.tsx
similarity index 98%
rename from src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.tsx
index 26e13d2409..011b3fb4c2 100644
--- a/src/web-ui/src/infrastructure/config/components/ReviewCapacitySection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ReviewCapacitySection.tsx
@@ -1,8 +1,4 @@
-import { Button, NumberInput } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { RotateCcw } from 'lucide-react';
-import { ConfigLoadingState, ConfigPageRow, ConfigPageSection } from './common';
+import { ConfigLoadingState, ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { isTauriRuntime } from '@/infrastructure/runtime';
 import { useNotification } from '@/shared/notification-system';
@@ -12,6 +8,10 @@ import {
   type ReviewTeam,
   type ReviewTeamConcurrencyPolicy,
 } from '@/shared/services/reviewTeamService';
+import { Button, NumberInput } from '@openbitfun/ui';
+import { RotateCcw } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const ReviewCapacitySection: React.FC = () => {
   const { t } = useTranslation('settings/review-capacity');
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SessionMemorySettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SessionMemorySettingsPage.tsx
new file mode 100644
index 0000000000..3b00d77d01
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SessionMemorySettingsPage.tsx
@@ -0,0 +1,19 @@
+import { ConfigPageSectionStack } from '@/infrastructure/config/components/common';
+import { SettingsPage } from '../shared/SettingsPage';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
+import DefaultHarnessSection from './DefaultHarnessSection';
+import MemorySettingsSection from './MemorySettingsSection';
+import SessionTitleSection from './SessionTitleSection';
+
+export default function SessionMemorySettingsPage() {
+  const sessionAnchor = useSettingsSectionAnchor('session');
+  return (
+    <SettingsPage pageId="ai.session-memory">
+      <ConfigPageSectionStack id={sessionAnchor}>
+        <DefaultHarnessSection />
+        <SessionTitleSection />
+      </ConfigPageSectionStack>
+      <MemorySettingsSection />
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/SessionTitleConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.presentation.test.ts
similarity index 90%
rename from src/web-ui/src/infrastructure/config/components/SessionTitleConfig.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.presentation.test.ts
index 3099927ca2..1597b50f93 100644
--- a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.presentation.test.ts
@@ -3,11 +3,11 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 const source = readFileSync(
-  fileURLToPath(new URL('./SessionTitleConfig.tsx', import.meta.url)),
+  fileURLToPath(new URL('./SessionTitleSection.tsx', import.meta.url)),
   'utf8',
 );
 
-describe('SessionTitleConfig presentation', () => {
+describe('SessionTitleSection presentation', () => {
   it('keeps the enable switch in a content row instead of the section heading', () => {
     const sectionStart = source.lastIndexOf('<ConfigPageSection');
     const sectionEnd = source.indexOf('</ConfigPageSection>', sectionStart);
diff --git a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
similarity index 92%
rename from src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
index 544906aad6..bb9eca249b 100644
--- a/src/web-ui/src/infrastructure/config/components/SessionTitleConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
@@ -1,16 +1,16 @@
+import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
+import { ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { useModelSelectPresentation, type ModelSelectOption } from '@/infrastructure/config/components/ModelSelectPresentation';
+import { aiExperienceConfigService, type AIExperienceSettings } from '@/infrastructure/config/services/AIExperienceConfigService';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import type { AIModelConfig, TaskModelSelection, TaskModelsConfig } from '@/infrastructure/config/types';
+import { notificationService, useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
 import { Combobox, Switch } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNotification, notificationService } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
-import { aiExperienceConfigService, type AIExperienceSettings } from '../services/AIExperienceConfigService';
-import { configManager } from '../services/ConfigManager';
-import type { AIModelConfig, TaskModelSelection, TaskModelsConfig } from '../types';
-import { ConfigPageRow, ConfigPageSection, ConfigRetryState } from './common';
-import { type ModelSelectOption, useModelSelectPresentation } from './ModelSelectPresentation';
-import './RuntimeSettingsPages.scss';
 
-const log = createLogger('SessionTitleConfig');
+const log = createLogger('SessionTitleSection');
 
 const DEFAULT_TASK_MODELS: TaskModelsConfig = {
   session_title: { kind: 'fixed', model_id: 'fast' },
@@ -28,7 +28,7 @@ function normalizeSelectValue(value: string | number | (string | number)[]): str
   return String(Array.isArray(value) ? (value[0] ?? '') : value);
 }
 
-export const SessionTitleConfig: React.FC = () => {
+export const SessionTitleSection: React.FC = () => {
   const { t } = useTranslation('settings/models');
   const { success: notifySuccess, error: notifyError } = useNotification();
   const [isLoading, setIsLoading] = useState(true);
@@ -225,4 +225,4 @@ export const SessionTitleConfig: React.FC = () => {
   );
 };
 
-export default SessionTitleConfig;
+export default SessionTitleSection;
diff --git a/src/web-ui/src/infrastructure/config/components/ToolJsonRepairSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ToolJsonRepairSection.tsx
similarity index 92%
rename from src/web-ui/src/infrastructure/config/components/ToolJsonRepairSection.tsx
rename to src/web-ui/src/app/scenes/settings/pages/ai/ToolJsonRepairSection.tsx
index 56096418bc..901153ed12 100644
--- a/src/web-ui/src/infrastructure/config/components/ToolJsonRepairSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ToolJsonRepairSection.tsx
@@ -1,10 +1,10 @@
+import { ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
 import { Switch } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNotification } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
-import { configManager } from '../services/ConfigManager';
-import { ConfigPageRow, ConfigPageSection } from './common';
 
 const log = createLogger('ToolJsonRepairSettings');
 
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.appearance.ts
similarity index 94%
rename from src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.appearance.ts
index 6540d1c07e..ef79a8e1ef 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.appearance.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.appearance.ts
@@ -3,8 +3,8 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 export const appearanceSettingsAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'appearance-settings',
   parts: [
-    { id: 'root' }, { id: 'content' }, { id: 'settings' },
-    { id: 'settingsContent' }, { id: 'language' },
+    { id: 'root' }, { id: 'content' },
+
     { id: 'packageSection' }, { id: 'packagePreview' }, { id: 'packageBuiltinTheme' },
     { id: 'packageActions' },
     { id: 'packageDiagnostics' }, { id: 'packageDiagnosticsHeader' },
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
similarity index 99%
rename from src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
rename to src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
index b4c3e75775..5ca6947943 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
@@ -5,19 +5,6 @@
   padding: 0;
 }
 
-.appearance-settings {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 36px;
-    padding: 0;
-  }
-
-  &__language-select {
-    width: 100%;
-  }
-}
-
 .appearance-package-config {
   width: 100%;
   min-width: 0;
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.test.tsx
similarity index 76%
rename from src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.test.tsx
index 0cfb144f2e..8f9d7f5507 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.test.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
-import AppearanceSettingsPage from './AppearanceSettingsPage';
+import AppearanceSettingsPage from '@/app/scenes/settings/pages/application/AppearanceSettingsPage';
 
 vi.mock('react-i18next', () => ({
   useTranslation: (namespace: string) => ({
@@ -58,25 +58,18 @@ vi.mock('@/infrastructure/font-preference', () => ({
   FontPreferencePanel: () => <div data-testid="appearance-font-section" />,
 }));
 
-vi.mock('./AppearancePackageConfigSection', () => ({
+vi.mock('../../../../../infrastructure/config/components/AppearancePackageConfigSection', () => ({
   AppearancePackageConfigSection: () => <div data-testid="appearance-package-config" />,
   AppearancePackageFailurePanel: () => <div data-testid="appearance-package-failure" />,
 }));
 
 describe('AppearanceSettingsPage', () => {
-  it('keeps language in the interface section and delegates appearance selection to the card gallery', () => {
+  it('keeps appearance packages and fonts together while language belongs to General', () => {
     document.body.innerHTML = renderToStaticMarkup(<AppearanceSettingsPage />);
-
-    const interfaceSection = document.querySelector(
-      '[data-testid="appearance-settings-section"] .openbitfun-config-page-section',
-    );
-    const packageManagement = document.querySelector('[data-testid="appearance-package-config"]');
-
-    expect(interfaceSection).not.toBeNull();
-    expect(document.querySelector('[data-testid="appearance-language-select"]')).not.toBeNull();
+    expect(document.querySelector('[data-testid="appearance-package-config"]')).not.toBeNull();
+    expect(document.querySelector('[data-testid="appearance-font-section"]')).not.toBeNull();
+    expect(document.querySelector('[data-testid="appearance-language-select"]')).toBeNull();
     expect(document.querySelector('[data-testid="appearance-palette-select"]')).toBeNull();
     expect(document.querySelector('[data-testid="appearance-package-select"]')).toBeNull();
-    expect(packageManagement?.closest('.openbitfun-config-page-section')).toBeNull();
-    expect(packageManagement?.closest('.appearance-settings__content')).not.toBeNull();
   });
 });
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
new file mode 100644
index 0000000000..64b52c4e33
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
@@ -0,0 +1,37 @@
+import '@/app/scenes/settings/pages/application/AppearanceSettingsPage.scss';
+import { AppearancePackageConfigSection } from '@/infrastructure/config/components/AppearancePackageConfigSection';
+import {
+  ConfigPageContent,
+  ConfigPageHeader,
+  ConfigPageLayout,
+  ConfigPageSectionStack
+} from '@/infrastructure/config/components/common';
+import { FontPreferencePanel } from '@/infrastructure/font-preference';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const AppearanceSettingsPage: React.FC = () => {
+  const { t } = useTranslation('settings/appearance');
+
+  return (
+    <ConfigPageLayout
+      className="openbitfun-appearance-settings"
+      data-openbitfun-component="appearance-settings"
+      data-openbitfun-part="root"
+    >
+      <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
+      <ConfigPageContent
+        className="openbitfun-appearance-settings__content"
+        data-openbitfun-component="appearance-settings"
+        data-openbitfun-part="content"
+      >
+        <ConfigPageSectionStack data-testid="appearance-settings">
+          <AppearancePackageConfigSection />
+          <FontPreferencePanel />
+        </ConfigPageSectionStack>
+      </ConfigPageContent>
+    </ConfigPageLayout>
+  );
+};
+
+export default AppearanceSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
new file mode 100644
index 0000000000..80318025e9
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
@@ -0,0 +1,553 @@
+import '@/app/scenes/settings/pages/shared/ApplicationSettings.scss';
+import { configAPI } from '@/infrastructure/api';
+import type { CloseBehavior } from '@/infrastructure/api/service-api/SystemAPI';
+import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
+import { ConfigLoadingState, ConfigMessage, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { createLogger } from '@/shared/utils/logger';
+import { Button, Select, Switch } from '@openbitfun/ui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+import { LanguageSettingsSection } from './LanguageSettingsSection';
+const log = createLogger('GeneralSettingsPage');
+
+function LaunchAtLoginSetting() {
+  const { t } = useTranslation('settings/application');
+  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
+  const [enabled, setEnabled] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const loadData = useCallback(async () => {
+    if (!isTauri) return;
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      const value = await systemAPI.getLaunchAtLoginEnabled();
+      setEnabled(value);
+    } catch (error) {
+      log.error('Failed to load launch-at-login state', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [isTauri]);
+
+  useEffect(() => {
+    if (!isTauri) {
+      setLoading(false);
+      return;
+    }
+    void loadData().catch(() => undefined);
+  }, [isTauri, loadData]);
+
+  const handleToggle = useCallback(
+    async (next: boolean) => {
+      const previous = enabled;
+      setEnabled(next);
+      setSaving(true);
+      try {
+        await systemAPI.setLaunchAtLoginEnabled(next);
+      } catch (error) {
+        setEnabled(previous);
+        log.error('Failed to set launch-at-login', { next, error });
+        showMessage('error', t('launchAtLogin.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [enabled, showMessage, t]
+  );
+
+  if (!isTauri) {
+    return null;
+  }
+
+  if (loading || loadFailed) {
+    return (
+      <ConfigPageRow
+        label={t('launchAtLogin.toggleLabel')}
+        description={t(loading ? 'launchAtLogin.messages.loading' : 'launchAtLogin.messages.loadFailed')}
+        align="center"
+      >
+        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
+          {t('common.retry')}
+        </Button>
+      </ConfigPageRow>
+    );
+  }
+
+  return (
+    <>
+      <ConfigMessage message={message} />
+      <ConfigPageRow
+        label={t('launchAtLogin.toggleLabel')}
+        description={t('launchAtLogin.toggleDescription')}
+        align="center"
+      >
+        <div data-openbitfun-component="application-settings" data-openbitfun-part="launchAtLogin">
+          <Switch
+            checked={enabled}
+            onChange={(e) => {
+              void handleToggle(e.target.checked);
+            }}
+            disabled={saving}
+          />
+        </div>
+      </ConfigPageRow>
+    </>
+  );
+}
+
+function AutoUpdateSetting() {
+  const { t } = useTranslation('settings/application');
+  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
+  const [enabled, setEnabled] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const loadData = useCallback(async () => {
+    if (!isTauri) return;
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      setEnabled(await systemAPI.getAutoUpdateEnabled());
+    } catch (error) {
+      log.error('Failed to load app.auto_update', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [isTauri]);
+
+  useEffect(() => {
+    if (!isTauri) {
+      setLoading(false);
+      return;
+    }
+    void loadData();
+  }, [isTauri, loadData]);
+
+  const handleToggle = useCallback(
+    async (next: boolean) => {
+      const previous = enabled;
+      setEnabled(next);
+      setSaving(true);
+      try {
+        await systemAPI.setAutoUpdateEnabled(next);
+        showMessage('success', t('autoUpdate.messages.saved'));
+      } catch (error) {
+        setEnabled(previous);
+        log.error('Failed to set app.auto_update', { next, error });
+        showMessage('error', t('autoUpdate.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [enabled, showMessage, t]
+  );
+
+  if (!isTauri) {
+    return null;
+  }
+
+  if (loading || loadFailed) {
+    return (
+      <ConfigPageRow
+        label={t('autoUpdate.toggleLabel')}
+        description={t(loading ? 'autoUpdate.messages.loading' : 'autoUpdate.messages.loadFailed')}
+        align="center"
+      >
+        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
+          {t('common.retry')}
+        </Button>
+      </ConfigPageRow>
+    );
+  }
+
+  return (
+    <>
+      <ConfigMessage message={message} />
+      <ConfigPageRow
+        label={t('autoUpdate.toggleLabel')}
+        description={t('autoUpdate.toggleDescription')}
+        align="center"
+      >
+        <div data-openbitfun-component="application-settings" data-openbitfun-part="autoUpdate">
+          <Switch
+            checked={enabled}
+            onChange={(e) => {
+              void handleToggle(e.target.checked);
+            }}
+            disabled={saving}
+          />
+        </div>
+      </ConfigPageRow>
+    </>
+  );
+}
+
+function PreventSleepSetting() {
+  const { t } = useTranslation('settings/application');
+  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
+  const [enabled, setEnabled] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const loadData = useCallback(async () => {
+    if (!isTauri) return;
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      setEnabled(await systemAPI.getPreventSleepEnabled());
+    } catch (error) {
+      log.error('Failed to load prevent-sleep preference', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [isTauri]);
+
+  useEffect(() => {
+    if (!isTauri) {
+      setLoading(false);
+      return;
+    }
+    void loadData();
+  }, [isTauri, loadData]);
+
+  const handleToggle = useCallback(
+    async (next: boolean) => {
+      const previous = enabled;
+      setEnabled(next);
+      setSaving(true);
+      try {
+        await systemAPI.setPreventSleepEnabled(next);
+        showMessage('success', t('preventSleep.messages.saved'));
+      } catch (error) {
+        setEnabled(previous);
+        log.error('Failed to set prevent-sleep preference', { next, error });
+        showMessage('error', t('preventSleep.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [enabled, showMessage, t]
+  );
+
+  if (!isTauri) {
+    return null;
+  }
+
+  if (loading || loadFailed) {
+    return (
+      <ConfigPageRow
+        label={t('preventSleep.toggleLabel')}
+        description={t(loading ? 'preventSleep.messages.loading' : 'preventSleep.messages.loadFailed')}
+        align="center"
+      >
+        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
+          {t('common.retry')}
+        </Button>
+      </ConfigPageRow>
+    );
+  }
+
+  return (
+    <>
+      <ConfigMessage message={message} />
+      <ConfigPageRow
+        label={t('preventSleep.toggleLabel')}
+        description={t('preventSleep.toggleDescription')}
+        align="center"
+      >
+        <div data-openbitfun-component="application-settings" data-openbitfun-part="preventSleep">
+          <Switch
+            checked={enabled}
+            onChange={(event) => {
+              void handleToggle(event.target.checked);
+            }}
+            disabled={saving}
+          />
+        </div>
+      </ConfigPageRow>
+    </>
+  );
+}
+
+function WindowBehaviorSetting() {
+  const { t } = useTranslation('settings/application');
+  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
+  const [behavior, setBehavior] = useState<CloseBehavior>('quit');
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const behaviorOptions = useMemo(
+    () => [
+      { value: 'quit', label: t('windowBehavior.options.quit') },
+      { value: 'minimize_to_tray', label: t('windowBehavior.options.minimizeToTray') },
+      { value: 'ask', label: t('windowBehavior.options.ask') },
+    ],
+    [t]
+  );
+
+  const loadData = useCallback(async () => {
+    if (!isTauri) return;
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      const value = await configManager.getOptionalConfig<CloseBehavior>('app.close_button_behavior');
+      setBehavior(value ?? 'minimize_to_tray');
+    } catch (error) {
+      log.error('Failed to load close behavior', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [isTauri]);
+
+  useEffect(() => {
+    if (!isTauri) {
+      setLoading(false);
+      return;
+    }
+    void loadData();
+  }, [isTauri, loadData]);
+
+  const handleChange = useCallback(
+    async (value: string) => {
+      const previous = behavior;
+      const next = value as CloseBehavior;
+      setBehavior(next);
+      setSaving(true);
+      try {
+        await configManager.setConfig('app.close_button_behavior', next);
+        configManager.clearCache();
+        showMessage('success', t('windowBehavior.messages.saved'));
+      } catch (error) {
+        setBehavior(previous);
+        log.error('Failed to save close behavior', { next, error });
+        showMessage('error', t('windowBehavior.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [behavior, showMessage, t]
+  );
+
+  if (!isTauri) return null;
+
+  if (loading) {
+    return <ConfigLoadingState label={t('windowBehavior.messages.loading')} />;
+  }
+
+  if (loadFailed) {
+    return (
+      <ConfigRetryState
+        message={t('windowBehavior.messages.loadFailed')}
+        retryLabel={t('common.retry')}
+        onRetry={() => void loadData()}
+      />
+    );
+  }
+
+  return (
+    <>
+      <ConfigMessage message={message} />
+      <ConfigPageRow
+        label={t('windowBehavior.closeButtonLabel')}
+        description={t('windowBehavior.closeButtonDescription')}
+        align="center"
+      >
+        <div data-openbitfun-component="application-settings" data-openbitfun-part="windowBehavior">
+          <Select
+            size="sm"
+            value={behavior}
+            onValueChange={(v) => { void handleChange(v as string); }}
+            options={behaviorOptions}
+            disabled={saving}
+          />
+        </div>
+      </ConfigPageRow>
+    </>
+  );
+}
+
+function NotificationSettings() {
+  const { t } = useTranslation('settings/application');
+  const [dialogNotify, setDialogNotify] = useState(true);
+  const [permissionRequestNotify, setPermissionRequestNotify] = useState(true);
+  const [startupTips, setStartupTips] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      const [notify, permissionNotify, tips] = await Promise.all([
+        configManager.getOptionalConfig<boolean>('app.notifications.dialog_completion_notify'),
+        configManager.getOptionalConfig<boolean>('app.notifications.permission_request_notify'),
+        configManager.getOptionalConfig<boolean>('app.notifications.enable_startup_tips'),
+      ]);
+      setDialogNotify(notify !== false);
+      setPermissionRequestNotify(permissionNotify !== false);
+      setStartupTips(tips !== false);
+    } catch (error) {
+      log.error('Failed to load notification preferences', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadData();
+  }, [loadData]);
+
+  const handleDialogNotifyToggle = async (checked: boolean) => {
+    setSaving(true);
+    try {
+      await configAPI.setConfig('app.notifications.dialog_completion_notify', checked);
+      setDialogNotify(checked);
+      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
+    } catch {
+      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handlePermissionRequestNotifyToggle = async (checked: boolean) => {
+    setSaving(true);
+    try {
+      await configManager.setConfig('app.notifications.permission_request_notify', checked);
+      setPermissionRequestNotify(checked);
+      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
+    } catch {
+      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleStartupTipsToggle = async (checked: boolean) => {
+    setSaving(true);
+    try {
+      await configAPI.setConfig('app.notifications.enable_startup_tips', checked);
+      setStartupTips(checked);
+      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
+    } catch {
+      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <ConfigLoadingState label={t('notifications.messages.loading')} />;
+  }
+
+  if (loadFailed) {
+    return (
+      <ConfigRetryState
+        message={t('notifications.messages.loadFailed')}
+        retryLabel={t('common.retry')}
+        onRetry={() => void loadData()}
+      />
+    );
+  }
+
+  return (
+    <>
+      <ConfigMessage message={message} />
+      <ConfigPageRow
+        label={t('notifications.dialogCompletion.label')}
+        description={t('notifications.dialogCompletion.description')}
+        align="center"
+      >
+        <div data-openbitfun-component="application-settings" data-openbitfun-part="notifications">
+          <Switch
+            checked={dialogNotify}
+            onChange={(e) => { void handleDialogNotifyToggle(e.target.checked); }}
+            disabled={saving}
+          />
+        </div>
+      </ConfigPageRow>
+      <ConfigPageRow
+        label={t('notifications.permissionRequest.label')}
+        description={t('notifications.permissionRequest.description')}
+        align="center"
+      >
+        <Switch
+          checked={permissionRequestNotify}
+          onChange={(e) => { void handlePermissionRequestNotifyToggle(e.target.checked); }}
+          disabled={saving}
+        />
+      </ConfigPageRow>
+      <ConfigPageRow
+        label={t('notifications.startupTips.label')}
+        description={t('notifications.startupTips.description')}
+        align="center"
+      >
+        <Switch
+          checked={startupTips}
+          onChange={(e) => { void handleStartupTipsToggle(e.target.checked); }}
+          disabled={saving}
+        />
+      </ConfigPageRow>
+    </>
+  );
+}
+const GeneralSettingsPage: React.FC = () => {
+  const { t } = useTranslation('settings/application');
+  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
+  return (
+    <SettingsPage pageId="application.general" data-openbitfun-component="application-settings" data-openbitfun-part="root">
+      <LanguageSettingsSection />
+      {isTauri && (
+        <ConfigPageSection title={t('applicationGroups.startupAndUpdates.title')} description={t('applicationGroups.startupAndUpdates.description')}>
+          <LaunchAtLoginSetting />
+          <PreventSleepSetting />
+          <AutoUpdateSetting />
+        </ConfigPageSection>
+      )}
+      <ConfigPageSection title={t('applicationGroups.windowAndNotifications.title')} description={t('applicationGroups.windowAndNotifications.description')}>
+        <WindowBehaviorSetting />
+        <NotificationSettings />
+      </ConfigPageSection>
+    </SettingsPage>
+  );
+};
+export default GeneralSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/InputSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/InputSettingsPage.tsx
new file mode 100644
index 0000000000..92048eb38b
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/InputSettingsPage.tsx
@@ -0,0 +1,12 @@
+import { SettingsPage } from '../shared/SettingsPage';
+import KeyboardShortcutsSection from './KeyboardShortcutsSection';
+import VoiceSettingsSection from './VoiceSettingsSection';
+
+export default function InputSettingsPage() {
+  return (
+    <SettingsPage pageId="application.input">
+      <VoiceSettingsSection />
+      <KeyboardShortcutsSection />
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.appearance.ts
similarity index 89%
rename from src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.appearance.ts
index c8d56bccf2..8fc1bd5fae 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.appearance.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.appearance.ts
@@ -3,7 +3,7 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 export const keyboardShortcutsAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'keyboard-shortcuts',
   parts: [
-    { id: 'root' }, { id: 'header' }, { id: 'content' }, { id: 'toolbar' },
+    { id: 'root' }, { id: 'toolbar' },
     { id: 'search' }, { id: 'actions' }, { id: 'error' }, { id: 'list' },
     { id: 'item' }, { id: 'label' }, { id: 'key' }, { id: 'empty' },
   ],
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.presentation.test.ts
similarity index 56%
rename from src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.presentation.test.ts
index d602bb4d64..da809e6434 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.presentation.test.ts
@@ -10,10 +10,19 @@ function readSibling(filename: string): string {
 }
 
 describe('Keyboard shortcuts design-system composition', () => {
+  it('shows one continuous list without scope subcategories', () => {
+    const source = readSibling('./KeyboardShortcutsSection.tsx');
+    expect(source).not.toContain('SCOPE_DISPLAY_ORDER');
+    expect(source).not.toContain('SCOPE_LABEL_KEYS');
+    expect(source).not.toContain('scopeDescriptions');
+    expect(source.match(/<ConfigPageSection\b/g)).toHaveLength(1);
+    expect(source.match(/className="kb-shortcuts__list"/g)).toHaveLength(1);
+    expect(source).toContain('<FieldGroup appearance="subtle" fieldSurface="ambient" dividers={false}>');
+  });
   it('uses shared controls for shortcut badges and revert actions', () => {
-    const source = readSibling('./KeyboardShortcutsTab.tsx');
-    const stylesheet = readSibling('./KeyboardShortcutsTab.scss');
-    const appearance = readSibling('./KeyboardShortcutsTab.appearance.ts');
+    const source = readSibling('./KeyboardShortcutsSection.tsx');
+    const stylesheet = readSibling('./KeyboardShortcutsSection.scss');
+    const appearance = readSibling('./KeyboardShortcutsSection.appearance.ts');
 
     expect(source).toContain('IconButton');
     expect(source).toContain("variant={isRecording ? 'primary' : 'outline'}");
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.scss b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.scss
new file mode 100644
index 0000000000..586a676ebe
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.scss
@@ -0,0 +1,69 @@
+.kb-shortcuts {
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--openbitfun-space-3);
+    margin-bottom: var(--openbitfun-space-4);
+  }
+
+  /** Design-system `SearchField` — align with settings nav capsule */
+  &__search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-2);
+    flex-shrink: 0;
+  }
+
+  &__error {
+    padding: var(--openbitfun-space-4) var(--openbitfun-space-5);
+    margin-bottom: var(--openbitfun-space-4);
+    border-radius: var(--openbitfun-radius-md);
+    background: var(--openbitfun-color-status-danger-surface);
+    color: var(--openbitfun-color-status-danger-content);
+    font-size: var(--openbitfun-type-label-md-font-size);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__item {
+    &.kb-shortcuts__item--recording {
+      background: var(--openbitfun-color-action-secondary-background);
+    }
+
+    &.kb-shortcuts__item--conflict {
+      background: var(--openbitfun-color-status-warning-surface);
+    }
+
+    &--modified .kb-shortcuts__item-name {
+      font-style: italic;
+    }
+  }
+
+  &__item-conflict-hint {
+    display: block;
+    color: var(--openbitfun-color-status-warning-content);
+  }
+
+  &__item-key {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-2);
+    flex-shrink: 0;
+  }
+
+  &__empty {
+    padding: var(--openbitfun-space-8);
+    text-align: center;
+    color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-body-md-font-size);
+  }
+}
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx
similarity index 59%
rename from src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx
rename to src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx
index 8fe3012dc9..b7dd24a376 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/KeyboardShortcutsSection.tsx
@@ -1,8 +1,8 @@
 /**
- * KeyboardShortcutsTab — settings page for viewing and remapping keyboard shortcuts.
+ * KeyboardShortcutsSection — view and remap keyboard shortcuts in one list.
  *
  * Features:
- * - Grouped by scope with i18n labels
+ * - One searchable list of actions
  * - Search filter by action name or key combination
  * - Click-to-record new key binding (capture mode)
  * - Real-time conflict detection (highlighted in red)
@@ -10,41 +10,37 @@
  * - Reset button restores all defaults
  */
 
-import { OverflowText, Button, Icon, IconButton, SearchField, Tooltip } from '@openbitfun/ui';
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Button, FieldGroup, Icon, IconButton, OverflowText, SearchField, Tooltip } from '@openbitfun/ui';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { confirmWarning } from '@/infrastructure/confirm-dialog';
-import { useI18n } from '@/infrastructure/i18n';
+import '@/app/scenes/settings/pages/application/KeyboardShortcutsSection.scss';
 import {
   ConfigFieldStatus,
-  ConfigPageLayout,
-  ConfigPageHeader,
-  ConfigPageContent,
-  ConfigPageSection,
+  ConfigPageRow,
+  ConfigPageSection
 } from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { useSettingsDraft } from '@/infrastructure/config/settingsDraftRegistry';
+import { confirmWarning } from '@/infrastructure/confirm-dialog';
+import { useI18n } from '@/infrastructure/i18n';
 import {
-  shortcutManager,
-  parseStoredKeybindings,
   buildStoredKeybindings,
-  type ShortcutRegistration,
+  parseStoredKeybindings,
+  shortcutManager,
   type KeybindingOverrides,
+  type ShortcutRegistration,
 } from '@/infrastructure/services/ShortcutManager';
-import { configManager } from '@/infrastructure/config/services/ConfigManager';
-import type { ShortcutConfig, ShortcutScope } from '@/shared/types/shortcut';
 import {
   ALL_SHORTCUTS,
   compareShortcutScope,
-  SCOPE_ORDER,
-  SCOPE_LABEL_KEYS,
   getShortcutDescriptionI18nKey,
 } from '@/shared/constants/shortcuts';
+import type { ShortcutConfig } from '@/shared/types/shortcut';
 import { createLogger } from '@/shared/utils/logger';
-import './KeyboardShortcutsTab.scss';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
-const log = createLogger('KeyboardShortcutsTab');
+const log = createLogger('KeyboardShortcutsSection');
 
-const SCOPE_DISPLAY_ORDER: ShortcutScope[] = SCOPE_ORDER;
 
 /** SceneBar Alt+1–3: merged into one row in settings; not listed individually */
 const MERGED_SCENE_FOCUS_IDS = new Set(['scene.focus1', 'scene.focus2', 'scene.focus3']);
@@ -115,7 +111,7 @@ function mergeCatalogWithLive(live: ShortcutRegistration[]): ShortcutRegistratio
       out.push({
         id: def.id,
         config: shortcutManager.getEffectiveConfig(def.id, def.config),
-        callback: () => {},
+        callback: () => { },
         priority: 0,
         description: def.descriptionKey,
       });
@@ -304,7 +300,7 @@ function shortcutDisplayName(
   return reg.id.replace(/[._]/g, ' ');
 }
 
-const KeyboardShortcutsTab: React.FC = () => {
+const KeyboardShortcutsSection: React.FC = () => {
   const { t } = useI18n('settings');
   const { t: tComponents } = useI18n('components');
 
@@ -433,9 +429,9 @@ const KeyboardShortcutsTab: React.FC = () => {
       for (const [id, change] of Object.entries(pendingChanges)) {
         pendingOverrides[id] = {
           key: change.key,
-          ...(change.ctrl  ? { ctrl:  true } : {}),
+          ...(change.ctrl ? { ctrl: true } : {}),
           ...(change.shift ? { shift: true } : {}),
-          ...(change.alt   ? { alt:   true } : {}),
+          ...(change.alt ? { alt: true } : {}),
         };
       }
 
@@ -505,17 +501,13 @@ const KeyboardShortcutsTab: React.FC = () => {
   };
 
   // Filter by search query (match translated action name or key combo)
-  const filteredByScope = (scope: ShortcutScope): ShortcutRegistration[] => {
-    const q = searchQuery.toLowerCase();
-    return displayRegistrations.filter((r) => {
-      if ((r.config.scope ?? 'app') !== scope) return false;
-      if (!q) return true;
-      const name = shortcutDisplayName(r, t).toLowerCase();
-      const descMatch = name.includes(q) || r.id.toLowerCase().includes(q);
-      const keyMatch = formatKey(r).toLowerCase().includes(q);
-      return descMatch || keyMatch;
-    });
-  };
+  const visibleShortcuts = displayRegistrations.filter((registration) => {
+    if (MERGED_SCENE_FOCUS_IDS.has(registration.id) || MERGED_TAB_SWITCH_IDS.has(registration.id)) return false;
+    const query = searchQuery.trim().toLowerCase();
+    return !query || shortcutDisplayName(registration, t).toLowerCase().includes(query)
+      || registration.id.toLowerCase().includes(query)
+      || formatKey(registration, pendingChanges[registration.id]).toLowerCase().includes(query);
+  });
 
   /** Whether the merged SceneBar row matches the current search query */
   const mergedSceneRowVisible = useMemo(() => {
@@ -591,30 +583,7 @@ const KeyboardShortcutsTab: React.FC = () => {
     [pendingChanges]
   );
 
-  const appShortcutsWithoutMerged = filteredByScope('app').filter(
-    (r) => !MERGED_SCENE_FOCUS_IDS.has(r.id)
-  );
-  const canvasShortcutsWithoutMerged = filteredByScope('canvas').filter(
-    (r) => !MERGED_TAB_SWITCH_IDS.has(r.id)
-  );
-  const hasAnyVisibleShortcut =
-    mergedTabSwitchRowVisible ||
-    mergedSceneRowVisible ||
-    appShortcutsWithoutMerged.length > 0 ||
-    canvasShortcutsWithoutMerged.length > 0 ||
-    filteredByScope('chat').length > 0 ||
-    filteredByScope('filetree').length > 0 ||
-    filteredByScope('git').length > 0;
-
-  const scopeDescriptions: Record<ShortcutScope, string> = {
-    app: t('keyboard.scopeDescriptions.app'),
-    chat: t('keyboard.scopeDescriptions.chat'),
-    editor: t('keyboard.scopeDescriptions.editor'),
-    terminal: t('keyboard.scopeDescriptions.terminal'),
-    canvas: t('keyboard.scopeDescriptions.canvas'),
-    filetree: t('keyboard.scopeDescriptions.filetree'),
-    git: t('keyboard.scopeDescriptions.git'),
-  };
+  const hasAnyVisibleShortcut = mergedTabSwitchRowVisible || mergedSceneRowVisible || visibleShortcuts.length > 0;
 
   const hasPendingChanges = Object.keys(pendingChanges).length > 0;
   const discardPendingChanges = useCallback(() => {
@@ -623,9 +592,11 @@ const KeyboardShortcutsTab: React.FC = () => {
     setSaveError(null);
   }, []);
 
+  const sectionAnchor = useSettingsSectionAnchor('shortcuts', true);
+
   useSettingsDraft({
     id: 'keyboard-shortcuts',
-    pageId: 'application.shortcuts',
+    pageId: 'application.input',
     label: t('keyboard.title'),
     dirty: hasPendingChanges,
     saving,
@@ -634,15 +605,8 @@ const KeyboardShortcutsTab: React.FC = () => {
   });
 
   return (
-    <ConfigPageLayout data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="root">
-      <ConfigPageHeader
-        className="kb-shortcuts-page-header"
-        title={t('keyboard.title')}
-        subtitle={t('keyboard.description')}
-        data-openbitfun-component="keyboard-shortcuts"
-        data-openbitfun-part="header"
-      />
-      <ConfigPageContent data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="content">
+    <div id={sectionAnchor} data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="root">
+      <ConfigPageSection title={t('keyboard.title')} description={t('keyboard.description')} bodySurface={false}>
         {/* Search + actions bar */}
         <div className="kb-shortcuts__toolbar" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="toolbar">
           <SearchField
@@ -692,232 +656,227 @@ const KeyboardShortcutsTab: React.FC = () => {
           </div>
         )}
 
-        {/* Shortcuts grouped by scope */}
-        {SCOPE_DISPLAY_ORDER.map((scope) => {
-          const rawItems = filteredByScope(scope);
-          const showMergedTab = scope === 'canvas' && mergedTabSwitchRowVisible;
-          const showMergedScene = scope === 'app' && mergedSceneRowVisible;
-          const items =
-            scope === 'app'
-              ? rawItems.filter((r) => !MERGED_SCENE_FOCUS_IDS.has(r.id))
-              : scope === 'canvas'
-              ? rawItems.filter((r) => !MERGED_TAB_SWITCH_IDS.has(r.id))
-              : rawItems;
-          if (items.length === 0 && !showMergedScene && !showMergedTab) return null;
-
-          return (
-            <ConfigPageSection
-              key={scope}
-              title={t(SCOPE_LABEL_KEYS[scope])}
-              description={scopeDescriptions[scope]}
-            >
-              <div className="kb-shortcuts__list" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="list">
-                {showMergedTab && (
-                  <div
-                    data-openbitfun-component="keyboard-shortcuts"
-                    data-openbitfun-part="item"
-                    data-openbitfun-state={[
-                      recordingId === MERGED_TAB_RECORD_ID && 'recording',
-                      mergedTabConflict && 'conflict',
-                      mergedTabPending && 'modified',
-                    ].filter(Boolean).join(' ') || undefined}
-                    className={[
-                      'kb-shortcuts__item kb-shortcuts__item--merged',
-                      recordingId === MERGED_TAB_RECORD_ID ? 'kb-shortcuts__item--recording' : '',
-                      mergedTabConflict ? 'kb-shortcuts__item--conflict' : '',
-                      mergedTabPending ? 'kb-shortcuts__item--modified' : '',
-                    ]
-                      .filter(Boolean)
-                      .join(' ')}
-                    key="tab-switch-merged"
-                  >
-                    <div className="kb-shortcuts__item-label" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
-                      <OverflowText className="kb-shortcuts__item-name">{t('keyboard.shortcuts.tab.switchMerged')}</OverflowText>
-                      <span className="kb-shortcuts__item-hint">{t('keyboard.shortcuts.tab.switchMergedHint')}</span>
-                      {mergedTabConflict && (
-                        <span className="kb-shortcuts__item-conflict-hint">
-                          {t('keyboard.conflict')}: {shortcutDisplayName(mergedTabConflict, t)}
-                        </span>
-                      )}
-                    </div>
-                    <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
-                      <Tooltip content={t('keyboard.clickToRecord')} placement="top">
-                        <Button
-                          aria-pressed={recordingId === MERGED_TAB_RECORD_ID}
-                          size="xs"
-                          tone={mergedTabConflict ? 'danger' : 'neutral'}
-                          variant={recordingId === MERGED_TAB_RECORD_ID ? 'primary' : 'outline'}
-                          onClick={() =>
-                            setRecordingId(recordingId === MERGED_TAB_RECORD_ID ? null : MERGED_TAB_RECORD_ID)
-                          }
-                        >
-                          {recordingId === MERGED_TAB_RECORD_ID ? t('keyboard.recording') : mergedTabKeyLabel}
-                        </Button>
-                      </Tooltip>
-                      {mergedTabPending && recordingId !== MERGED_TAB_RECORD_ID && (
-                        <Tooltip content={t('keyboard.revertChange')} placement="top">
-                          <IconButton
-                            aria-label={t('keyboard.revertChange')}
-                            icon="↩"
-                            size="xs"
-                            variant="quiet"
-                            onClick={() => {
-                              setPendingChanges((prev) => {
-                                const next = { ...prev };
-                                for (const id of TAB_SWITCH_ORDER) delete next[id];
-                                return next;
-                              });
-                            }}
-                          />
-                        </Tooltip>
-                      )}
-                    </div>
-                  </div>
+        <FieldGroup appearance="subtle" fieldSurface="ambient" dividers={false}>
+          <div className="kb-shortcuts__list" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="list">
+            {mergedTabSwitchRowVisible && (
+              <ConfigPageRow
+                align="center"
+                data-openbitfun-component="keyboard-shortcuts"
+                data-openbitfun-part="item"
+                data-openbitfun-state={[
+                  recordingId === MERGED_TAB_RECORD_ID && 'recording',
+                  mergedTabConflict && 'conflict',
+                  mergedTabPending && 'modified',
+                ].filter(Boolean).join(' ') || undefined}
+                className={[
+                  'kb-shortcuts__item',
+                  recordingId === MERGED_TAB_RECORD_ID ? 'kb-shortcuts__item--recording' : '',
+                  mergedTabConflict ? 'kb-shortcuts__item--conflict' : '',
+                  mergedTabPending ? 'kb-shortcuts__item--modified' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key="tab-switch-merged"
+                label={(
+                  <OverflowText className="kb-shortcuts__item-name" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
+                    {t('keyboard.shortcuts.tab.switchMerged')}
+                  </OverflowText>
+                )}
+                description={(
+                  <>
+                    {t('keyboard.shortcuts.tab.switchMergedHint')}
+                    {mergedTabConflict && (
+                      <span className="kb-shortcuts__item-conflict-hint">
+                        {t('keyboard.conflict')}: {shortcutDisplayName(mergedTabConflict, t)}
+                      </span>
+                    )}
+                  </>
+                )}
+              >
+                <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
+                  <Tooltip content={t('keyboard.clickToRecord')} placement="top">
+                    <Button
+                      aria-pressed={recordingId === MERGED_TAB_RECORD_ID}
+                      size="xs"
+                      tone={mergedTabConflict ? 'danger' : 'neutral'}
+                      variant={recordingId === MERGED_TAB_RECORD_ID ? 'primary' : 'outline'}
+                      onClick={() =>
+                        setRecordingId(recordingId === MERGED_TAB_RECORD_ID ? null : MERGED_TAB_RECORD_ID)
+                      }
+                    >
+                      {recordingId === MERGED_TAB_RECORD_ID ? t('keyboard.recording') : mergedTabKeyLabel}
+                    </Button>
+                  </Tooltip>
+                  {mergedTabPending && recordingId !== MERGED_TAB_RECORD_ID && (
+                    <Tooltip content={t('keyboard.revertChange')} placement="top">
+                      <IconButton
+                        aria-label={t('keyboard.revertChange')}
+                        icon="↩"
+                        size="xs"
+                        variant="quiet"
+                        onClick={() => {
+                          setPendingChanges((prev) => {
+                            const next = { ...prev };
+                            for (const id of TAB_SWITCH_ORDER) delete next[id];
+                            return next;
+                          });
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+              </ConfigPageRow>
+            )}
+            {mergedSceneRowVisible && (
+              <ConfigPageRow
+                align="center"
+                data-openbitfun-component="keyboard-shortcuts"
+                data-openbitfun-part="item"
+                data-openbitfun-state={[
+                  recordingId === MERGED_SCENE_RECORD_ID && 'recording',
+                  mergedSceneConflict && 'conflict',
+                  mergedScenePending && 'modified',
+                ].filter(Boolean).join(' ') || undefined}
+                className={[
+                  'kb-shortcuts__item',
+                  recordingId === MERGED_SCENE_RECORD_ID ? 'kb-shortcuts__item--recording' : '',
+                  mergedSceneConflict ? 'kb-shortcuts__item--conflict' : '',
+                  mergedScenePending ? 'kb-shortcuts__item--modified' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key="scene-focus-merged"
+                label={(
+                  <OverflowText className="kb-shortcuts__item-name" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
+                    {t('keyboard.shortcuts.scene.focusMerged')}
+                  </OverflowText>
                 )}
-                {showMergedScene && (
-                  <div
-                    data-openbitfun-component="keyboard-shortcuts"
-                    data-openbitfun-part="item"
-                    data-openbitfun-state={[
-                      recordingId === MERGED_SCENE_RECORD_ID && 'recording',
-                      mergedSceneConflict && 'conflict',
-                      mergedScenePending && 'modified',
-                    ].filter(Boolean).join(' ') || undefined}
-                    className={[
-                      'kb-shortcuts__item kb-shortcuts__item--merged',
-                      recordingId === MERGED_SCENE_RECORD_ID ? 'kb-shortcuts__item--recording' : '',
-                      mergedSceneConflict ? 'kb-shortcuts__item--conflict' : '',
-                      mergedScenePending ? 'kb-shortcuts__item--modified' : '',
-                    ]
-                      .filter(Boolean)
-                      .join(' ')}
-                    key="scene-focus-merged"
-                  >
-                    <div className="kb-shortcuts__item-label" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
-                      <OverflowText className="kb-shortcuts__item-name">{t('keyboard.shortcuts.scene.focusMerged')}</OverflowText>
-                      <span className="kb-shortcuts__item-hint">{t('keyboard.shortcuts.scene.focusMergedHint')}</span>
-                      {mergedSceneConflict && (
-                        <span className="kb-shortcuts__item-conflict-hint">
-                          {t('keyboard.conflict')}: {shortcutDisplayName(mergedSceneConflict, t)}
-                        </span>
-                      )}
-                    </div>
-                    <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
-                      <Tooltip content={t('keyboard.clickToRecord')} placement="top">
-                        <Button
-                          aria-pressed={recordingId === MERGED_SCENE_RECORD_ID}
+                description={(
+                  <>
+                    {t('keyboard.shortcuts.scene.focusMergedHint')}
+                    {mergedSceneConflict && (
+                      <span className="kb-shortcuts__item-conflict-hint">
+                        {t('keyboard.conflict')}: {shortcutDisplayName(mergedSceneConflict, t)}
+                      </span>
+                    )}
+                  </>
+                )}
+              >
+                <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
+                  <Tooltip content={t('keyboard.clickToRecord')} placement="top">
+                    <Button
+                      aria-pressed={recordingId === MERGED_SCENE_RECORD_ID}
+                      size="xs"
+                      tone={mergedSceneConflict ? 'danger' : 'neutral'}
+                      variant={recordingId === MERGED_SCENE_RECORD_ID ? 'primary' : 'outline'}
+                      onClick={() =>
+                        setRecordingId(recordingId === MERGED_SCENE_RECORD_ID ? null : MERGED_SCENE_RECORD_ID)
+                      }
+                    >
+                      {recordingId === MERGED_SCENE_RECORD_ID ? t('keyboard.recording') : mergedSceneKeyLabel}
+                    </Button>
+                  </Tooltip>
+                  {mergedScenePending && recordingId !== MERGED_SCENE_RECORD_ID && (
+                    <Tooltip content={t('keyboard.revertChange')} placement="top">
+                      <IconButton
+                        aria-label={t('keyboard.revertChange')}
+                        icon="↩"
+                        size="xs"
+                        variant="quiet"
+                        onClick={() => {
+                          setPendingChanges((prev) => {
+                            const next = { ...prev };
+                            for (const id of SCENE_FOCUS_ORDER) delete next[id];
+                            return next;
+                          });
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+              </ConfigPageRow>
+            )}
+            {visibleShortcuts.map((reg) => {
+              const pending = pendingChanges[reg.id];
+              const isRecording = recordingId === reg.id;
+              const conflict = finalConflicts.get(reg.id) ?? null;
+              const displayName = shortcutDisplayName(reg, t);
+              const formattedKey = formatKey(reg, pending);
+
+              return (
+                <ConfigPageRow
+                  align="center"
+                  data-openbitfun-component="keyboard-shortcuts"
+                  data-openbitfun-part="item"
+                  data-openbitfun-state={[
+                    isRecording && 'recording',
+                    conflict && 'conflict',
+                    pending && 'modified',
+                  ].filter(Boolean).join(' ') || undefined}
+                  key={reg.id}
+                  className={[
+                    'kb-shortcuts__item',
+                    isRecording ? 'kb-shortcuts__item--recording' : '',
+                    conflict ? 'kb-shortcuts__item--conflict' : '',
+                    pending ? 'kb-shortcuts__item--modified' : '',
+                  ].filter(Boolean).join(' ')}
+                  label={(
+                    <OverflowText className="kb-shortcuts__item-name" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
+                      {displayName}
+                    </OverflowText>
+                  )}
+                  description={conflict ? (
+                    <span className="kb-shortcuts__item-conflict-hint">
+                      {t('keyboard.conflict')}: {shortcutDisplayName(conflict, t)}
+                    </span>
+                  ) : undefined}
+                >
+                  <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
+                    <Tooltip content={t('keyboard.clickToRecord')} placement="top">
+                      <Button
+                        aria-pressed={isRecording}
+                        size="xs"
+                        tone={conflict ? 'danger' : 'neutral'}
+                        variant={isRecording ? 'primary' : 'outline'}
+                        onClick={() => setRecordingId(isRecording ? null : reg.id)}
+                      >
+                        {isRecording
+                          ? t('keyboard.recording')
+                          : formattedKey}
+                      </Button>
+                    </Tooltip>
+                    {pending && !isRecording && (
+                      <Tooltip content={t('keyboard.revertChange')} placement="top">
+                        <IconButton
+                          aria-label={t('keyboard.revertChange')}
+                          icon="↩"
                           size="xs"
-                          tone={mergedSceneConflict ? 'danger' : 'neutral'}
-                          variant={recordingId === MERGED_SCENE_RECORD_ID ? 'primary' : 'outline'}
-                          onClick={() =>
-                            setRecordingId(recordingId === MERGED_SCENE_RECORD_ID ? null : MERGED_SCENE_RECORD_ID)
-                          }
-                        >
-                          {recordingId === MERGED_SCENE_RECORD_ID ? t('keyboard.recording') : mergedSceneKeyLabel}
-                        </Button>
+                          variant="quiet"
+                          onClick={() => {
+                            setPendingChanges((prev) => {
+                              const next = { ...prev };
+                              delete next[reg.id];
+                              return next;
+                            });
+                          }}
+                        />
                       </Tooltip>
-                      {mergedScenePending && recordingId !== MERGED_SCENE_RECORD_ID && (
-                        <Tooltip content={t('keyboard.revertChange')} placement="top">
-                          <IconButton
-                            aria-label={t('keyboard.revertChange')}
-                            icon="↩"
-                            size="xs"
-                            variant="quiet"
-                            onClick={() => {
-                              setPendingChanges((prev) => {
-                                const next = { ...prev };
-                                for (const id of SCENE_FOCUS_ORDER) delete next[id];
-                                return next;
-                              });
-                            }}
-                          />
-                        </Tooltip>
-                      )}
-                    </div>
+                    )}
                   </div>
-                )}
-                {items.map((reg) => {
-                  const pending = pendingChanges[reg.id];
-                  const isRecording = recordingId === reg.id;
-                  const conflict = finalConflicts.get(reg.id) ?? null;
-                  const displayName = shortcutDisplayName(reg, t);
-                  const formattedKey = formatKey(reg, pending);
-
-                  return (
-                    <div
-                      data-openbitfun-component="keyboard-shortcuts"
-                      data-openbitfun-part="item"
-                      data-openbitfun-state={[
-                        isRecording && 'recording',
-                        conflict && 'conflict',
-                        pending && 'modified',
-                      ].filter(Boolean).join(' ') || undefined}
-                      key={reg.id}
-                      className={[
-                        'kb-shortcuts__item',
-                        isRecording ? 'kb-shortcuts__item--recording' : '',
-                        conflict ? 'kb-shortcuts__item--conflict' : '',
-                        pending ? 'kb-shortcuts__item--modified' : '',
-                      ].filter(Boolean).join(' ')}
-                    >
-                      <div className="kb-shortcuts__item-label" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="label">
-                        <OverflowText className="kb-shortcuts__item-name">
-                          {displayName}
-                        </OverflowText>
-                        {conflict && (
-                          <span className="kb-shortcuts__item-conflict-hint">
-                            {t('keyboard.conflict')}: {shortcutDisplayName(conflict, t)}
-                          </span>
-                        )}
-                      </div>
-                      <div className="kb-shortcuts__item-key" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="key">
-                        <Tooltip content={t('keyboard.clickToRecord')} placement="top">
-                          <Button
-                            aria-pressed={isRecording}
-                            size="xs"
-                            tone={conflict ? 'danger' : 'neutral'}
-                            variant={isRecording ? 'primary' : 'outline'}
-                            onClick={() => setRecordingId(isRecording ? null : reg.id)}
-                          >
-                            {isRecording
-                              ? t('keyboard.recording')
-                              : formattedKey}
-                          </Button>
-                        </Tooltip>
-                        {pending && !isRecording && (
-                          <Tooltip content={t('keyboard.revertChange')} placement="top">
-                            <IconButton
-                              aria-label={t('keyboard.revertChange')}
-                              icon="↩"
-                              size="xs"
-                              variant="quiet"
-                              onClick={() => {
-                                setPendingChanges((prev) => {
-                                  const next = { ...prev };
-                                  delete next[reg.id];
-                                  return next;
-                                });
-                              }}
-                            />
-                          </Tooltip>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </ConfigPageSection>
-          );
-        })}
-
-        {displayRegistrations.length > 0 && !hasAnyVisibleShortcut && (
-          <div className="kb-shortcuts__empty" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="empty">
-            {t('keyboard.noResults')}
+                </ConfigPageRow>
+              );
+            })}
           </div>
-        )}
-      </ConfigPageContent>
-    </ConfigPageLayout>
+
+          {displayRegistrations.length > 0 && !hasAnyVisibleShortcut && (
+            <div className="kb-shortcuts__empty" data-openbitfun-component="keyboard-shortcuts" data-openbitfun-part="empty">
+              {t('keyboard.noResults')}
+            </div>
+          )}
+        </FieldGroup>
+      </ConfigPageSection>
+    </div>
   );
 };
 
-export default KeyboardShortcutsTab;
+export default KeyboardShortcutsSection;
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/LanguageSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/LanguageSettingsSection.tsx
new file mode 100644
index 0000000000..301777a3bf
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/LanguageSettingsSection.tsx
@@ -0,0 +1,40 @@
+import { ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
+import { useLanguageSelector } from '@/infrastructure/i18n';
+import type { LocaleId } from '@/infrastructure/i18n/types';
+import { Select } from '@openbitfun/ui';
+import { useTranslation } from 'react-i18next';
+
+export function LanguageSettingsSection() {
+  const { t } = useTranslation('settings/application');
+  const { currentLanguage, supportedLocales, selectLanguage, isChanging } = useLanguageSelector();
+  return (
+    <ConfigPageSection
+      title={t('appearance.interfaceTitle')}
+      description={t('appearance.interfaceHint')}
+    >
+      <ConfigPageRow
+        label={t('appearance.language')}
+        align="center"
+      >
+        <Select
+          size="sm"
+          value={currentLanguage}
+          onValueChange={(value) =>
+            selectLanguage(String(value) as LocaleId)
+          }
+          options={supportedLocales.map((locale) => ({
+            value: locale.id,
+            label: locale.nativeName,
+            testId: 'appearance-language-option',
+            testAttributes: {
+              'data-locale-id': locale.id,
+            },
+          }))}
+          disabled={isChanging}
+          placeholder={t('appearance.language')}
+          data-testid="appearance-language-select"
+        />
+      </ConfigPageRow>
+    </ConfigPageSection>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/VoiceSettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/application/LocalVoiceModels.presentation.test.ts
similarity index 86%
rename from src/web-ui/src/app/scenes/settings/pages/VoiceSettingsPage.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/LocalVoiceModels.presentation.test.ts
index f549e481d5..35665f7e3d 100644
--- a/src/web-ui/src/app/scenes/settings/pages/VoiceSettingsPage.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/application/LocalVoiceModels.presentation.test.ts
@@ -12,10 +12,10 @@ function readSource(relativePath: string): string {
 describe('Voice settings page structure', () => {
   it('opens compact local model management from the voice status instead of inline', () => {
     const voiceSource = readSource(
-      '../../../../infrastructure/config/components/VoiceInputConfig.tsx',
+      './VoiceSettingsSection.tsx',
     );
     const dialogSource = readSource(
-      '../../../../infrastructure/config/components/LocalVoiceModelsConfig.tsx',
+      '../../../../../infrastructure/config/components/LocalVoiceModelsConfig.tsx',
     );
 
     expect(voiceSource).toContain('setLocalModelsOpen(true)');
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/PetAssistantSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/PetAssistantSettingsPage.tsx
new file mode 100644
index 0000000000..50a6bec943
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/PetAssistantSettingsPage.tsx
@@ -0,0 +1,13 @@
+import type { SettingsPageProps } from '../../settingsTypes';
+import { SettingsPage } from '../shared/SettingsPage';
+import PetSettingsSection from './PetSettingsSection';
+import RealtimeVoiceSettingsSection from './RealtimeVoiceSettingsSection';
+
+export default function PetAssistantSettingsPage({ isActive }: SettingsPageProps) {
+  return (
+    <SettingsPage pageId="application.pet">
+      <RealtimeVoiceSettingsSection />
+      <PetSettingsSection isActive={isActive} />
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx
new file mode 100644
index 0000000000..34814fdd76
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx
@@ -0,0 +1,392 @@
+import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
+import {
+  ConfigLoadingState,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigPageSectionStack,
+  ConfigRetryState
+} from '@/infrastructure/config/components/common';
+import {
+  DEFAULT_AGENT_COMPANION_PET,
+  deleteAgentCompanionPetPackage,
+  importAgentCompanionPetPackage,
+  listAgentCompanionPets,
+  releaseAgentCompanionPetPreviewBlobs,
+  selectAgentCompanionPetPackage,
+  type AgentCompanionPetPackage,
+} from '@/infrastructure/config/services/AgentCompanionPetService';
+import { getPetSpriteLayout } from '@/infrastructure/config/services/agentCompanionPetSprite';
+import { aiExperienceConfigService, type AIExperienceSettings } from '@/infrastructure/config/services/AIExperienceConfigService';
+import { confirmDanger } from '@/infrastructure/confirm-dialog';
+import { useI18n } from '@/infrastructure/i18n';
+import { useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Button,
+  Disclosure,
+  Icon,
+  IconButton,
+  OverflowText,
+  Switch,
+  Tooltip
+} from '@openbitfun/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
+const log = createLogger('PetSettingsSection');
+
+const IS_TAURI_DESKTOP = typeof window !== 'undefined' && '__TAURI__' in window;
+
+function getPetPreviewStyle(pet: AgentCompanionPetPackage): React.CSSProperties {
+  return {
+    imageRendering: pet.source === 'preset' && pet.id === 'bitblob' ? 'auto' : undefined,
+    '--openbitfun-pet-preview-src': `url("${pet.previewSrc}")`,
+    backgroundSize: `800% ${getPetSpriteLayout(pet.spriteVersionNumber).rows * 100}%`,
+  } as React.CSSProperties;
+}
+
+const PetSettingsSection: React.FC<{ isActive?: boolean }> = ({ isActive = true }) => {
+  const { t } = useI18n('settings/runtime');
+
+  const notification = useNotification();
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [loadError, setLoadError] = useState(false);
+
+  const hasLoadedPageDataRef = useRef(false);
+
+  const [settings, setSettings] = useState<AIExperienceSettings | null>(null);
+
+  const [companionPets, setCompanionPets] = useState<AgentCompanionPetPackage[]>([]);
+
+  const [companionPetListExpanded, setCompanionPetListExpanded] = useState(false);
+
+  const [companionPetImporting, setCompanionPetImporting] = useState(false);
+
+  const [companionPetDeletingPath, setCompanionPetDeletingPath] = useState<string | null>(null);
+
+  const reloadCompanionPets = useCallback(async () => {
+    setCompanionPets(await listAgentCompanionPets());
+  }, []);
+
+  const updateSetting = async <K extends keyof AIExperienceSettings>(
+    key: K,
+    value: AIExperienceSettings[K]
+  ) => {
+    if (!settings) return;
+    const newSettings = { ...settings, [key]: value };
+    setSettings(newSettings);
+    try {
+      await aiExperienceConfigService.saveSettings({ [key]: value });
+      notification.success(t('messages.saveSuccess'));
+    } catch (error) {
+      log.error('Failed to save AI features settings', error);
+      notification.error(t('messages.saveFailed'));
+      setSettings(settings);
+    }
+  };
+
+  const handleImportCompanionPet = async () => {
+    if (!IS_TAURI_DESKTOP) return;
+    setCompanionPetImporting(true);
+    try {
+      const selected = await selectAgentCompanionPetPackage(t('features.pet.importDialogTitle'));
+      if (!selected) return;
+      const imported = await importAgentCompanionPetPackage(selected);
+      await reloadCompanionPets();
+      await updateSetting('agent_companion_pet', {
+        id: imported.id,
+        displayName: imported.displayName,
+        description: imported.description,
+        source: imported.source,
+        packagePath: imported.packagePath,
+        spritesheetPath: imported.spritesheetPath,
+        spritesheetMimeType: imported.spritesheetMimeType,
+        spriteVersionNumber: imported.spriteVersionNumber,
+      });
+    } catch (error) {
+      log.error('Failed to import Agent companion pet', error);
+      notification.error(t('features.pet.importFailed'));
+    } finally {
+      setCompanionPetImporting(false);
+    }
+  };
+
+  const handleDeleteCompanionPet = async (event: React.MouseEvent, pet: AgentCompanionPetPackage) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!IS_TAURI_DESKTOP || pet.source !== 'user' || !settings) return;
+    const confirmed = await confirmDanger(
+      t('features.pet.deleteConfirmTitle'),
+      t('features.pet.deleteConfirmBody'),
+      { confirmText: t('features.pet.delete') },
+    );
+    if (!confirmed) return;
+    setCompanionPetDeletingPath(pet.packagePath);
+    try {
+      await deleteAgentCompanionPetPackage(pet.packagePath);
+      releaseAgentCompanionPetPreviewBlobs(pet.packagePath, pet.spritesheetPath);
+      await reloadCompanionPets();
+      if (settings.agent_companion_pet?.packagePath === pet.packagePath) {
+        const next = { ...settings, agent_companion_pet: DEFAULT_AGENT_COMPANION_PET };
+        setSettings(next);
+        await aiExperienceConfigService.saveSettings({ agent_companion_pet: DEFAULT_AGENT_COMPANION_PET });
+      }
+      notification.success(t('features.pet.deleteSuccess'));
+    } catch (error) {
+      log.error('Failed to delete Agent companion pet', error);
+      notification.error(t('features.pet.deleteFailed'));
+    } finally {
+      setCompanionPetDeletingPath(null);
+    }
+  };
+
+  const selectedCompanionPetValue = settings?.agent_companion_pet?.packagePath
+    ?? DEFAULT_AGENT_COMPANION_PET.packagePath;
+
+  const selectedCompanionPet = companionPets.find(pet => pet.packagePath === selectedCompanionPetValue);
+  const selectedCompanionPetReference = selectedCompanionPet
+    ?? settings?.agent_companion_pet
+    ?? DEFAULT_AGENT_COMPANION_PET;
+  const companionPetStack = companionPets
+    .filter(pet => pet.packagePath !== selectedCompanionPetValue)
+    .slice(0, 3);
+  const getPetLabel = (pet: Pick<AgentCompanionPetPackage, 'source' | 'id' | 'displayName'>) => (
+    pet.source === 'preset' && pet.id === 'blue-golden'
+      ? t('features.pet.presets.blueGolden.name')
+      : pet.displayName
+  );
+
+  const handleCompanionPetChange = async (value: string | number | (string | number)[]) => {
+    const selectedValue = String(Array.isArray(value) ? value[0] : value);
+    const pet = companionPets.find(item => item.packagePath === selectedValue);
+    if (!pet) return;
+    await updateSetting('agent_companion_pet', {
+      id: pet.id,
+      displayName: pet.displayName,
+      description: pet.description,
+      source: pet.source,
+      packagePath: pet.packagePath,
+      spritesheetPath: pet.spritesheetPath,
+      spritesheetMimeType: pet.spritesheetMimeType,
+      spriteVersionNumber: pet.spriteVersionNumber,
+    });
+  };
+
+  const loadPageData = useCallback(async () => {
+    const isInitialLoad = !hasLoadedPageDataRef.current;
+    if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
+    try {
+      const [loadedSettings] = await Promise.all([
+        aiExperienceConfigService.getSettingsAsync(),
+        reloadCompanionPets(),
+      ]);
+      setSettings(loadedSettings);
+
+      hasLoadedPageDataRef.current = true;
+    } catch (error) {
+      log.error('Failed to load settings page data', { error });
+      if (isInitialLoad) setLoadError(true);
+    } finally {
+      if (isInitialLoad) setIsLoading(false);
+    }
+  }, [reloadCompanionPets]);
+  useEffect(() => {
+    if (!isActive) return;
+    void loadPageData();
+  }, [loadPageData, isActive]);
+
+  useEffect(() => {
+    if (!isActive) setCompanionPetListExpanded(false);
+  }, [isActive]);
+
+  const sectionAnchor = useSettingsSectionAnchor('pet', !isLoading);
+
+  return (
+    <div id={sectionAnchor} className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view="pet">
+      <ConfigPageSectionStack>
+        {loadError ? (
+          <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void loadPageData()} />
+        ) : isLoading || !settings ? (
+          <ConfigLoadingState label={t('loading.text')} />
+        ) : (
+          <ConfigPageSection
+            title={t('features.pet.title')}
+            description={t('features.pet.subtitle')}
+          >
+            <ConfigPageRow label={t('features.pet.enable')} align="center">
+              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                <Switch
+                  checked={settings.enable_agent_companion}
+                  onChange={(e) => updateSetting('enable_agent_companion', e.target.checked)}
+                />
+              </div>
+            </ConfigPageRow>
+
+            <div
+              className="openbitfun-runtime-settings__pet-picker"
+              data-openbitfun-component="runtime-settings"
+              data-openbitfun-part="petPicker"
+            >
+              <div
+                className="openbitfun-runtime-settings__pet-chooser"
+                data-openbitfun-component="runtime-settings"
+                data-openbitfun-part="petChooser"
+              >
+                <Disclosure
+                  contentInnerClassName="openbitfun-runtime-settings__pet-expanded-content"
+                  summary={t('features.pet.petLabel')}
+                  open={isActive && companionPetListExpanded}
+                  onOpenChange={setCompanionPetListExpanded}
+                  renderHeader={triggerProps => (
+                    <button
+                      {...triggerProps}
+                      data-overflow-trigger
+                      className="openbitfun-runtime-settings__pet-summary"
+                      data-openbitfun-component="runtime-settings"
+                      data-openbitfun-part="petSummary"
+                      aria-label={`${t('features.pet.petLabel')}: ${getPetLabel(selectedCompanionPetReference)}`}
+                    >
+                      <span className="openbitfun-runtime-settings__pet-current-preview" aria-hidden>
+                        {selectedCompanionPet?.previewSrc ? (
+                          <span
+                            className="openbitfun-runtime-settings__pet-preview-sprite"
+                            style={getPetPreviewStyle(selectedCompanionPet)}
+                          />
+                        ) : <Icon name="image" size="lg" />}
+                      </span>
+                      <span className="openbitfun-runtime-settings__pet-current-copy">
+                        <OverflowText className="openbitfun-runtime-settings__pet-caption">
+                          {selectedCompanionPet?.previewSrc
+                            ? t('features.pet.current')
+                            : t('features.pet.previewUnavailable')}
+                        </OverflowText>
+                        <strong><OverflowText>{getPetLabel(selectedCompanionPetReference)}</OverflowText></strong>
+                      </span>
+                      {companionPetStack.length > 0 && (
+                        <span
+                          className="openbitfun-runtime-settings__pet-stack"
+                          data-openbitfun-component="runtime-settings"
+                          data-openbitfun-part="petStack"
+                          aria-hidden
+                        >
+                          {companionPetStack.map(pet => (
+                            <span key={pet.packagePath} className="openbitfun-runtime-settings__pet-stack-card">
+                              <span
+                                className="openbitfun-runtime-settings__pet-preview-sprite"
+                                style={getPetPreviewStyle(pet)}
+                              />
+                            </span>
+                          ))}
+                        </span>
+                      )}
+                      <Icon name="chevron-down" size="sm" className="openbitfun-runtime-settings__pet-summary-chevron" />
+                    </button>
+                  )}
+                >
+                  <div
+                    className="openbitfun-runtime-settings__pet-actions"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="petActions"
+                  >
+                    <span className="openbitfun-runtime-settings__pet-hint">{t('features.pet.petDescription')}</span>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => void handleImportCompanionPet()}
+                      disabled={!IS_TAURI_DESKTOP || companionPetImporting}
+                      title={t('features.pet.importHint')}
+                    >
+                      {companionPetImporting ? t('features.pet.importing') : t('features.pet.import')}
+                    </Button>
+                  </div>
+                  <div
+                    className="openbitfun-runtime-settings__pet-gallery"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="petList"
+                    role="radiogroup"
+                    aria-label={t('features.pet.petLabel')}
+                  >
+                    {companionPets.map((pet) => {
+                      const label = getPetLabel(pet);
+                      const sourceLabel = pet.source === 'preset'
+                        ? t('features.pet.groupPreset')
+                        : t('features.pet.groupImported');
+                      const isUserPet = pet.source === 'user';
+                      const isDeleting = companionPetDeletingPath === pet.packagePath;
+                      const isSelected = pet.packagePath === selectedCompanionPetValue;
+                      const isDisabled = isDeleting;
+
+                      return (
+                        <article
+                          key={pet.packagePath}
+                          className="openbitfun-runtime-settings__pet-card"
+                          data-testid="companion-pet-card"
+                          data-pet-id={pet.id}
+                          data-openbitfun-component="runtime-settings"
+                          data-openbitfun-part="petOption"
+                          data-openbitfun-state={isSelected ? 'selected' : undefined}
+                        >
+                          <button data-overflow-trigger
+                            type="button"
+                            className="openbitfun-runtime-settings__pet-card-select"
+                            data-openbitfun-component="runtime-settings"
+                            data-openbitfun-part="petTrigger"
+                            data-openbitfun-state={isSelected ? 'selected' : undefined}
+                            role="radio"
+                            aria-checked={isSelected}
+                            aria-label={label}
+                            disabled={isDisabled}
+                            onClick={() => void handleCompanionPetChange(pet.packagePath)}
+                          >
+                            <span className="openbitfun-runtime-settings__pet-card-preview" aria-hidden>
+                              <span
+                                className="openbitfun-runtime-settings__pet-preview-sprite"
+                                style={getPetPreviewStyle(pet)}
+                              />
+                              {isSelected && (
+                                <span className="openbitfun-runtime-settings__pet-selected-mark">
+                                  <Icon name="check-line" size="xs" />
+                                </span>
+                              )}
+                            </span>
+                            <span
+                              className="openbitfun-runtime-settings__pet-card-body"
+                              data-openbitfun-component="runtime-settings"
+                              data-openbitfun-part="petOptionMain"
+                            >
+                              <strong><OverflowText>{label}</OverflowText></strong>
+                              <OverflowText data-openbitfun-component="runtime-settings" data-openbitfun-part="petGroup">
+                                {sourceLabel}
+                              </OverflowText>
+                            </span>
+                          </button>
+                          {isUserPet && IS_TAURI_DESKTOP && (
+                            <Tooltip content={t('features.pet.delete')}>
+                              <IconButton
+                                type="button"
+                                size="sm"
+                                tone="danger"
+                                className="openbitfun-runtime-settings__pet-card-delete"
+                                disabled={isDeleting}
+                                aria-label={`${t('features.pet.delete')}: ${label}`}
+                                onClick={(event) => void handleDeleteCompanionPet(event, pet)}
+                                icon={<Icon name="delete" size="sm" />}
+                              />
+                            </Tooltip>
+                          )}
+                        </article>
+                      );
+                    })}
+                  </div>
+                </Disclosure>
+              </div>
+            </div>
+          </ConfigPageSection>
+        )}
+      </ConfigPageSectionStack>
+    </div>
+  );
+};
+
+export default PetSettingsSection;
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.test.tsx b/src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.test.tsx
similarity index 75%
rename from src/web-ui/src/infrastructure/config/components/VoiceInputConfig.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.test.tsx
index 2d4da0e3b2..a922f21509 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.test.tsx
@@ -5,7 +5,7 @@ import { createRoot, type Root } from 'react-dom/client';
 import { Simulate } from 'react-dom/test-utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { SpeechRealtimeConfig } from '@/infrastructure/api';
-import VoiceInputConfig from './VoiceInputConfig';
+import RealtimeVoiceSettingsSection from '@/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection';
 
 const mocks = vi.hoisted(() => ({
   get: vi.fn(), save: vi.fn(), error: vi.fn(), supported: true,
@@ -23,24 +23,24 @@ vi.mock('@/infrastructure/api', () => ({
     onModelProgress: () => () => {}, onModelStatusChanged: () => () => {},
   },
 }));
-vi.mock('../hooks', () => ({
+vi.mock('../../../../../infrastructure/config/hooks', () => ({
   useAIExperienceSettings: () => ({ settings: { voice_input: { enabled: false } } }),
 }));
-vi.mock('../services/AIExperienceConfigService', () => ({ aiExperienceConfigService: {} }));
+vi.mock('../../../../../infrastructure/config/services/AIExperienceConfigService', () => ({ aiExperienceConfigService: {} }));
 vi.mock('@/shared/notification-system', () => ({ notificationService: { error: mocks.error } }));
 vi.mock('@/shared/utils/logger', () => ({ createLogger: () => ({ error: vi.fn() }) }));
-vi.mock('./LocalVoiceModelsConfig', () => ({ default: () => null }));
-vi.mock('./VoiceInputDiagnostics', () => ({ VoiceInputDiagnostics: () => null }));
+vi.mock('../../../../../infrastructure/config/components/LocalVoiceModelsConfig', () => ({ default: () => null }));
+vi.mock('../../../../../infrastructure/config/components/VoiceInputDiagnostics', () => ({ VoiceInputDiagnostics: () => null }));
 vi.mock('@openbitfun/ui', () => ({
   Input: ({ size: _size, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   Switch: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input type="checkbox" {...props} />,
   Select: () => null, StatusPill: () => null,
   Button: ({ children }: React.PropsWithChildren) => <button>{children}</button>,
 }));
-vi.mock('./common', () => {
+vi.mock('../../../../../infrastructure/config/components/common', () => {
   const Container = ({ children }: React.PropsWithChildren) => <div>{children}</div>;
   return {
-    ConfigPageLayout: Container, ConfigPageContent: Container,
+    ConfigPageLayout: Container, ConfigPageContent: Container, ConfigPageSectionStack: Container,
     ConfigPageSection: Container, ConfigPageRow: Container,
     ConfigPageHeader: () => null, ConfigLoadingState: () => null,
     ConfigRetryState: () => <div>retry</div>,
@@ -65,7 +65,7 @@ const change = async (input: HTMLInputElement, value: string | boolean) => {
   });
 };
 const mount = async () => {
-  await act(async () => root.render(<VoiceInputConfig />));
+  await act(async () => root.render(<RealtimeVoiceSettingsSection />));
 };
 
 beforeEach(() => {
@@ -87,10 +87,10 @@ describe('realtime voice autosave', () => {
   it('saves credentials while disabled, then saves the switch and voice without a save button', async () => {
     await mount();
     expect(mocks.save).not.toHaveBeenCalled();
-    expect(inputs()[2].disabled).toBe(false);
-    await change(inputs()[2], ' key ');
-    await change(inputs()[1], true);
-    await change(inputs()[3], 'new-voice');
+    expect(inputs()[1].disabled).toBe(false);
+    await change(inputs()[1], ' key ');
+    await change(inputs()[0], true);
+    await change(inputs()[2], 'new-voice');
     expect(mocks.save).toHaveBeenLastCalledWith({
       enabled: true, apiKey: 'key', voice: 'new-voice',
       speed: 0, loudness: 0, microphoneDeviceId: '',
@@ -105,15 +105,15 @@ describe('realtime voice autosave', () => {
       .mockImplementationOnce(() => new Promise(resolve => { resolveFirst = resolve; }))
       .mockImplementationOnce(() => new Promise(resolve => { resolveSecond = resolve; }));
     await mount();
-    await change(inputs()[2], 'first');
-    await change(inputs()[2], 'latest');
-    await change(inputs()[3], 'latest-voice');
+    await change(inputs()[1], 'first');
+    await change(inputs()[1], 'latest');
+    await change(inputs()[2], 'latest-voice');
     expect(mocks.save).toHaveBeenCalledTimes(1);
-    expect(inputs()[2].value).toBe('latest');
-    expect(inputs()[3].value).toBe('latest-voice');
+    expect(inputs()[1].value).toBe('latest');
+    expect(inputs()[2].value).toBe('latest-voice');
     await act(async () => resolveFirst({ ...initial, apiKey: 'first' }));
-    expect(inputs()[2].value).toBe('latest');
-    expect(inputs()[3].value).toBe('latest-voice');
+    expect(inputs()[1].value).toBe('latest');
+    expect(inputs()[2].value).toBe('latest-voice');
     await act(async () => root.render(null));
     await act(async () => resolveSecond({ ...initial, apiKey: 'latest' }));
     expect(mocks.save).toHaveBeenCalledTimes(3);
@@ -126,23 +126,23 @@ describe('realtime voice autosave', () => {
   it('shows a failed save, restores persisted values, and allows the next edit to save', async () => {
     mocks.save.mockRejectedValueOnce(new Error('offline'));
     await mount();
-    await change(inputs()[2], 'failed');
-    expect(inputs()[2].value).toBe('');
+    await change(inputs()[1], 'failed');
+    expect(inputs()[1].value).toBe('');
     expect(container.textContent).toContain('voiceCall.messages.saveFailed');
-    await change(inputs()[2], 'retry');
-    expect(inputs()[2].value).toBe('retry');
+    await change(inputs()[1], 'retry');
+    expect(inputs()[1].value).toBe('retry');
     expect(container.querySelector('[role="alert"]')).toBeNull();
   });
 
   it('keeps invalid values editable and refuses activation without credentials', async () => {
     await mount();
-    await change(inputs()[1], true);
-    expect(inputs()[1].checked).toBe(false);
+    await change(inputs()[0], true);
+    expect(inputs()[0].checked).toBe(false);
     expect(mocks.save).not.toHaveBeenCalled();
     expect(container.textContent).toContain('voiceCall.messages.required');
-    await change(inputs()[3], '');
+    await change(inputs()[2], '');
     expect(mocks.save).not.toHaveBeenCalled();
-    await change(inputs()[3], 'valid');
+    await change(inputs()[2], 'valid');
     expect(mocks.save).toHaveBeenCalledTimes(1);
   });
 
@@ -151,6 +151,6 @@ describe('realtime voice autosave', () => {
     await mount();
     expect(mocks.get).not.toHaveBeenCalled();
     expect(mocks.save).not.toHaveBeenCalled();
-    expect(container.textContent).toContain('messages.unsupported');
+    expect(container.textContent).toContain('voiceCall.messages.unsupported');
   });
 });
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.tsx
new file mode 100644
index 0000000000..a394f81cfd
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/RealtimeVoiceSettingsSection.tsx
@@ -0,0 +1,171 @@
+import { speechAPI, type SpeechRealtimeConfig } from '@/infrastructure/api';
+import { ConfigLoadingState, ConfigMessage, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { isTauriRuntime } from '@/infrastructure/runtime';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import { Input, Switch } from '@openbitfun/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
+
+const log = createLogger('RealtimeVoiceSettingsSection');
+
+export default function RealtimeVoiceSettingsSection() {
+  const { t } = useTranslation('settings/voice-input');
+  const speechRuntimeSupported = isTauriRuntime();
+  const [voiceCallDraft, setVoiceCallDraft] = useState<SpeechRealtimeConfig | null>(null);
+  const voiceCallConfigRef = useRef<SpeechRealtimeConfig | null>(null);
+  const persistedVoiceCallConfigRef = useRef<SpeechRealtimeConfig | null>(null);
+  const [voiceCallLoading, setVoiceCallLoading] = useState(speechRuntimeSupported);
+  const [voiceCallLoadFailed, setVoiceCallLoadFailed] = useState(false);
+  const [voiceCallSaveError, setVoiceCallSaveError] = useState<string | null>(null);
+  const voiceCallRequestIdRef = useRef(0);
+  const voiceCallSaveQueueRef = useRef<Promise<void>>(Promise.resolve());
+  const voiceCallSaveRevisionRef = useRef(0);
+  const loadVoiceCallConfig = useCallback(async () => {
+    if (!speechRuntimeSupported) {
+      setVoiceCallLoading(false);
+      return;
+    }
+    const requestId = ++voiceCallRequestIdRef.current;
+    setVoiceCallLoading(true);
+    setVoiceCallLoadFailed(false);
+    try {
+      const config = await speechAPI.getRealtimeConfig();
+      if (requestId !== voiceCallRequestIdRef.current) return;
+      setVoiceCallDraft(config);
+      voiceCallConfigRef.current = config;
+      persistedVoiceCallConfigRef.current = config;
+      setVoiceCallSaveError(null);
+    } catch (error) {
+      if (requestId !== voiceCallRequestIdRef.current) return;
+      log.error('Failed to load controller realtime voice call settings', { error });
+      setVoiceCallDraft(null);
+      voiceCallConfigRef.current = null;
+      persistedVoiceCallConfigRef.current = null;
+      setVoiceCallLoadFailed(true);
+    } finally {
+      if (requestId === voiceCallRequestIdRef.current) {
+        setVoiceCallLoading(false);
+      }
+    }
+  }, [speechRuntimeSupported]);
+
+  useEffect(() => {
+    void loadVoiceCallConfig();
+    return () => {
+      voiceCallRequestIdRef.current += 1;
+    };
+  }, [loadVoiceCallConfig]);
+
+  const updateVoiceCall = useCallback((patch: Partial<SpeechRealtimeConfig>) => {
+    if (!voiceCallConfigRef.current) return;
+    const next = { ...voiceCallConfigRef.current, ...patch };
+    const valid = next.voice.trim() && (!next.enabled || next.apiKey.trim());
+    // Enabling requires credentials, but they remain editable while disabled.
+    if (patch.enabled === true && !valid) {
+      setVoiceCallSaveError(t('voiceCall.messages.required'));
+      return;
+    }
+    const revision = ++voiceCallSaveRevisionRef.current;
+    voiceCallConfigRef.current = next;
+    setVoiceCallDraft(next);
+    if (!valid) {
+      setVoiceCallSaveError(t('voiceCall.messages.required'));
+      return;
+    }
+    setVoiceCallSaveError(null);
+    // Serialize writes and only reconcile the latest edit with the response.
+    // The queue also finishes if the user leaves the settings page.
+    const operation = voiceCallSaveQueueRef.current.then(async () => {
+      try {
+        const saved = await speechAPI.saveRealtimeConfig({
+          enabled: next.enabled,
+          apiKey: next.apiKey.trim(),
+          voice: next.voice.trim(),
+          speed: next.speed,
+          loudness: next.loudness,
+          microphoneDeviceId: next.microphoneDeviceId,
+        });
+        persistedVoiceCallConfigRef.current = saved;
+        if (revision === voiceCallSaveRevisionRef.current) {
+          voiceCallConfigRef.current = saved;
+          setVoiceCallDraft(saved);
+          setVoiceCallSaveError(null);
+        }
+        window.dispatchEvent(new CustomEvent('openbitfun:realtime-voice-config-changed', {
+          detail: saved,
+        }));
+      } catch (error) {
+        log.error('Failed to save realtime voice call settings', { error });
+        if (revision === voiceCallSaveRevisionRef.current) {
+          voiceCallConfigRef.current = persistedVoiceCallConfigRef.current;
+          setVoiceCallDraft(persistedVoiceCallConfigRef.current);
+          setVoiceCallSaveError(t('voiceCall.messages.saveFailed'));
+          notificationService.error(t('voiceCall.messages.saveFailed'));
+        }
+      }
+    });
+    voiceCallSaveQueueRef.current = operation.then(() => undefined, () => undefined);
+  }, [t]);
+
+  const sectionAnchor = useSettingsSectionAnchor('voice-call', !voiceCallLoading);
+  return (
+    <ConfigPageSection id={sectionAnchor}
+      title={t('voiceCall.title')}
+      description={t('voiceCall.description')}
+    >
+      {!speechRuntimeSupported ? <ConfigMessage message={{ type: 'info', text: t('voiceCall.messages.unsupported') }} /> : voiceCallLoading ? (
+        <ConfigLoadingState label={t('voiceCall.loading')} />
+      ) : voiceCallLoadFailed || !voiceCallDraft ? (
+        <ConfigRetryState
+          message={t('voiceCall.messages.loadFailed')}
+          retryLabel={t('messages.retry')}
+          onRetry={() => void loadVoiceCallConfig()}
+          loading={voiceCallLoading}
+        />
+      ) : (
+        <>
+          <ConfigPageRow
+            label={t('voiceCall.enabled.label')}
+            description={t('voiceCall.enabled.description')}
+            align="center"
+          >
+            <Switch
+              checked={voiceCallDraft.enabled}
+              onChange={(event) => updateVoiceCall({ enabled: event.target.checked })}
+            />
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('voiceCall.apiKey.label')}
+            description={t('voiceCall.apiKey.description')}
+            align="center"
+          >
+            <Input
+              type="password"
+              size="sm"
+              autoComplete="off"
+              value={voiceCallDraft.apiKey}
+              placeholder={t('voiceCall.apiKey.placeholder')}
+              onChange={(event) => updateVoiceCall({ apiKey: event.target.value })}
+            />
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('voiceCall.voice.label')}
+            description={t('voiceCall.voice.description')}
+            align="center"
+          >
+            <Input
+              size="sm"
+              value={voiceCallDraft.voice}
+              onChange={(event) => updateVoiceCall({ voice: event.target.value })}
+            />
+          </ConfigPageRow>
+          <ConfigMessage
+            message={voiceCallSaveError ? { type: 'error', text: voiceCallSaveError } : null}
+          />
+        </>
+      )}
+    </ConfigPageSection>
+  );
+}
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/VoiceInputConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.presentation.test.ts
similarity index 87%
rename from src/web-ui/src/infrastructure/config/components/VoiceInputConfig.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.presentation.test.ts
index e311993a32..70bcffa865 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.presentation.test.ts
@@ -9,10 +9,10 @@ function readSource(relativePath: string): string {
   );
 }
 
-describe('VoiceInputConfig status presentation', () => {
+describe('VoiceSettingsSection status presentation', () => {
   it('renders setup and ready states as compact body copy', () => {
-    const source = readSource('./VoiceInputConfig.tsx');
-    const styles = readSource('./VoiceInputConfig.scss');
+    const source = readSource('./VoiceSettingsSection.tsx');
+    const styles = readSource('../../../../../infrastructure/config/components/VoiceInputConfig.scss');
     const plainStateRule = styles.match(/&--setup,\s*&--ready\s*{([^}]*)}/)?.[1] ?? '';
     const summaryRule = styles.match(/&__status-summary\s*{([^}]*)}/)?.[1] ?? '';
     const warningRule = styles.match(/&__status-warning\s*{([^}]*)}/)?.[1] ?? '';
@@ -40,8 +40,8 @@ describe('VoiceInputConfig status presentation', () => {
   });
 
   it('reveals language and diagnostic controls only after the local model is ready', () => {
-    const source = readSource('./VoiceInputConfig.tsx');
-    const styles = readSource('./VoiceInputConfig.scss');
+    const source = readSource('./VoiceSettingsSection.tsx');
+    const styles = readSource('../../../../../infrastructure/config/components/VoiceInputConfig.scss');
     const readyControls = source.match(
       /\{status === 'ready' \? \(\s*<>([\s\S]*?)<\/>(?:\s*)\) : null\}/,
     )?.[1] ?? '';
@@ -58,7 +58,7 @@ describe('VoiceInputConfig status presentation', () => {
   });
 
   it('uses precise lifecycle states and state-specific model actions', () => {
-    const source = readSource('./VoiceInputConfig.tsx');
+    const source = readSource('./VoiceSettingsSection.tsx');
     const actionKeyFunction = source.match(
       /function statusActionKey\([\s\S]*?\n}/,
     )?.[0] ?? '';
@@ -75,9 +75,9 @@ describe('VoiceInputConfig status presentation', () => {
 
   it('uses concise, action-oriented setup copy in every supported locale', () => {
     const locales = [
-      JSON.parse(readSource('../../../locales/en-US/settings/voice-input.json')),
-      JSON.parse(readSource('../../../locales/zh-CN/settings/voice-input.json')),
-      JSON.parse(readSource('../../../locales/zh-TW/settings/voice-input.json')),
+      JSON.parse(readSource('../../../../../locales/en-US/settings/voice-input.json')),
+      JSON.parse(readSource('../../../../../locales/zh-CN/settings/voice-input.json')),
+      JSON.parse(readSource('../../../../../locales/zh-TW/settings/voice-input.json')),
     ];
 
     for (const locale of locales) {
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
similarity index 66%
rename from src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
index df27dd28b9..786c95a94a 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
@@ -1,34 +1,32 @@
-import { Button, Input, Select, type SelectOption, StatusPill, type StatusPillTone, Switch } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { CloudOff, HardDrive } from 'lucide-react';
 import {
   LOCAL_SENSEVOICE_SMALL_INT8_MODEL_ID,
   speechAPI,
-  type SpeechModelStatus,
-  type SpeechRealtimeConfig,
+  type SpeechModelStatus
 } from '@/infrastructure/api';
-import { isTauriRuntime } from '@/infrastructure/runtime';
-import { notificationService } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
-import { useAIExperienceSettings } from '../hooks';
-import { aiExperienceConfigService } from '../services/AIExperienceConfigService';
-import type { VoiceInputSettings } from '../types';
-import LocalVoiceModelsConfig from './LocalVoiceModelsConfig';
-import { VoiceInputDiagnostics } from './VoiceInputDiagnostics';
 import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
   ConfigLoadingState,
   ConfigMessage,
   ConfigPageRow,
   ConfigPageSection,
-  ConfigRetryState,
-} from './common';
-import './VoiceInputConfig.scss';
+  ConfigPageSectionStack,
+  ConfigRetryState
+} from '@/infrastructure/config/components/common';
+import LocalVoiceModelsConfig from '@/infrastructure/config/components/LocalVoiceModelsConfig';
+import '@/infrastructure/config/components/VoiceInputConfig.scss';
+import { VoiceInputDiagnostics } from '@/infrastructure/config/components/VoiceInputDiagnostics';
+import { useAIExperienceSettings } from '@/infrastructure/config/hooks';
+import { aiExperienceConfigService } from '@/infrastructure/config/services/AIExperienceConfigService';
+import type { VoiceInputSettings } from '@/infrastructure/config/types';
+import { isTauriRuntime } from '@/infrastructure/runtime';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import { Button, Select, type SelectOption, StatusPill, type StatusPillTone, Switch } from '@openbitfun/ui';
+import { CloudOff, HardDrive } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
-const log = createLogger('VoiceInputConfig');
+const log = createLogger('VoiceSettingsSection');
 const DEFAULT_LOCAL_VOICE_MODEL_ID = LOCAL_SENSEVOICE_SMALL_INT8_MODEL_ID;
 
 function formatBytes(bytes: number): string {
@@ -83,7 +81,7 @@ function statusActionKey(status: VoiceInputStatus): string {
   }
 }
 
-const VoiceInputConfig: React.FC = () => {
+const VoiceSettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/voice-input');
   const speechRuntimeSupported = isTauriRuntime();
   const {
@@ -98,15 +96,6 @@ const VoiceInputConfig: React.FC = () => {
   const [voiceInputSaving, setVoiceInputSaving] = useState(false);
   const [busyAction, setBusyAction] = useState<string | null>(null);
   const [localModelsOpen, setLocalModelsOpen] = useState(false);
-  const [voiceCallDraft, setVoiceCallDraft] = useState<SpeechRealtimeConfig | null>(null);
-  const voiceCallConfigRef = useRef<SpeechRealtimeConfig | null>(null);
-  const persistedVoiceCallConfigRef = useRef<SpeechRealtimeConfig | null>(null);
-  const [voiceCallLoading, setVoiceCallLoading] = useState(speechRuntimeSupported);
-  const [voiceCallLoadFailed, setVoiceCallLoadFailed] = useState(false);
-  const [voiceCallSaveError, setVoiceCallSaveError] = useState<string | null>(null);
-  const voiceCallRequestIdRef = useRef(0);
-  const voiceCallSaveQueueRef = useRef<Promise<void>>(Promise.resolve());
-  const voiceCallSaveRevisionRef = useRef(0);
   const voiceInputSaveQueueRef = useRef<Promise<void>>(Promise.resolve());
   const pendingVoiceInputSaveCountRef = useRef(0);
 
@@ -126,42 +115,6 @@ const VoiceInputConfig: React.FC = () => {
     [models],
   );
 
-  const loadVoiceCallConfig = useCallback(async () => {
-    if (!speechRuntimeSupported) {
-      setVoiceCallLoading(false);
-      return;
-    }
-    const requestId = ++voiceCallRequestIdRef.current;
-    setVoiceCallLoading(true);
-    setVoiceCallLoadFailed(false);
-    try {
-      const config = await speechAPI.getRealtimeConfig();
-      if (requestId !== voiceCallRequestIdRef.current) return;
-      setVoiceCallDraft(config);
-      voiceCallConfigRef.current = config;
-      persistedVoiceCallConfigRef.current = config;
-      setVoiceCallSaveError(null);
-    } catch (error) {
-      if (requestId !== voiceCallRequestIdRef.current) return;
-      log.error('Failed to load controller realtime voice call settings', { error });
-      setVoiceCallDraft(null);
-      voiceCallConfigRef.current = null;
-      persistedVoiceCallConfigRef.current = null;
-      setVoiceCallLoadFailed(true);
-    } finally {
-      if (requestId === voiceCallRequestIdRef.current) {
-        setVoiceCallLoading(false);
-      }
-    }
-  }, [speechRuntimeSupported]);
-
-  useEffect(() => {
-    void loadVoiceCallConfig();
-    return () => {
-      voiceCallRequestIdRef.current += 1;
-    };
-  }, [loadVoiceCallConfig]);
-
   const languageOptions = useMemo<SelectOption[]>(() => {
     const languages = selectedModel?.languages?.length
       ? selectedModel.languages
@@ -241,57 +194,6 @@ const VoiceInputConfig: React.FC = () => {
     ));
   }, []);
 
-  const updateVoiceCall = useCallback((patch: Partial<SpeechRealtimeConfig>) => {
-    if (!voiceCallConfigRef.current) return;
-    const next = { ...voiceCallConfigRef.current, ...patch };
-    const valid = next.voice.trim() && (!next.enabled || next.apiKey.trim());
-    // Enabling requires credentials, but they remain editable while disabled.
-    if (patch.enabled === true && !valid) {
-      setVoiceCallSaveError(t('voiceCall.messages.required'));
-      return;
-    }
-    const revision = ++voiceCallSaveRevisionRef.current;
-    voiceCallConfigRef.current = next;
-    setVoiceCallDraft(next);
-    if (!valid) {
-      setVoiceCallSaveError(t('voiceCall.messages.required'));
-      return;
-    }
-    setVoiceCallSaveError(null);
-    // Serialize writes and only reconcile the latest edit with the response.
-    // The queue also finishes if the user leaves the settings page.
-    const operation = voiceCallSaveQueueRef.current.then(async () => {
-      try {
-        const saved = await speechAPI.saveRealtimeConfig({
-          enabled: next.enabled,
-          apiKey: next.apiKey.trim(),
-          voice: next.voice.trim(),
-          speed: next.speed,
-          loudness: next.loudness,
-          microphoneDeviceId: next.microphoneDeviceId,
-        });
-        persistedVoiceCallConfigRef.current = saved;
-        if (revision === voiceCallSaveRevisionRef.current) {
-          voiceCallConfigRef.current = saved;
-          setVoiceCallDraft(saved);
-          setVoiceCallSaveError(null);
-        }
-        window.dispatchEvent(new CustomEvent('openbitfun:realtime-voice-config-changed', {
-          detail: saved,
-        }));
-      } catch (error) {
-        log.error('Failed to save realtime voice call settings', { error });
-        if (revision === voiceCallSaveRevisionRef.current) {
-          voiceCallConfigRef.current = persistedVoiceCallConfigRef.current;
-          setVoiceCallDraft(persistedVoiceCallConfigRef.current);
-          setVoiceCallSaveError(t('voiceCall.messages.saveFailed'));
-          notificationService.error(t('voiceCall.messages.saveFailed'));
-        }
-      }
-    });
-    voiceCallSaveQueueRef.current = operation.then(() => undefined, () => undefined);
-  }, [t]);
-
   const handleCancelDownload = useCallback(async (model: SpeechModelStatus) => {
     setBusyAction(`cancel:${model.modelId}`);
     try {
@@ -314,41 +216,40 @@ const VoiceInputConfig: React.FC = () => {
     if (saved) notificationService.success(t('messages.localActivated'));
   }, [firstInstalledModel, selectedModel, t, updateVoiceInput]);
 
+  const sectionAnchor = useSettingsSectionAnchor('voice', !speechRuntimeSupported || (!modelsLoading && !settingsLoading));
+
   if (!speechRuntimeSupported) {
     return (
-      <ConfigPageLayout className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
-        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-        <ConfigPageContent>
+      <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
+        <ConfigPageSectionStack>
           <ConfigMessage message={{ type: 'info', text: t('messages.unsupported') }} />
-        </ConfigPageContent>
-      </ConfigPageLayout>
+        </ConfigPageSectionStack>
+      </div>
     );
   }
 
   if (modelsLoading || settingsLoading) {
     return (
-      <ConfigPageLayout className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
-        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-        <ConfigPageContent>
+      <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
+        <ConfigPageSectionStack>
           <ConfigLoadingState label={t('loading')} />
-        </ConfigPageContent>
-      </ConfigPageLayout>
+        </ConfigPageSectionStack>
+      </div>
     );
   }
 
   if (settingsError || !settings || !voiceInput) {
     return (
-      <ConfigPageLayout className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
-        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-        <ConfigPageContent>
+      <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
+        <ConfigPageSectionStack>
           <ConfigRetryState
             message={t('messages.loadFailed')}
             retryLabel={t('messages.retry')}
             onRetry={() => void reloadSettings()}
             loading={settingsLoading}
           />
-        </ConfigPageContent>
-      </ConfigPageLayout>
+        </ConfigPageSectionStack>
+      </div>
     );
   }
 
@@ -386,9 +287,8 @@ const VoiceInputConfig: React.FC = () => {
       : <HardDrive size={18} />;
 
   return (
-    <ConfigPageLayout className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
-      <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-      <ConfigPageContent className="voice-input-config__content">
+    <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
+      <ConfigPageSectionStack className="voice-input-config__content">
         <ConfigPageSection
           title={t('sections.basic')}
           description={t('sections.basicDescription')}
@@ -547,70 +447,15 @@ const VoiceInputConfig: React.FC = () => {
           )}
         </ConfigPageSection>
 
-        <ConfigPageSection
-          title={t('voiceCall.title')}
-          description={t('voiceCall.description')}
-        >
-          {voiceCallLoading ? (
-            <ConfigLoadingState label={t('voiceCall.loading')} />
-          ) : voiceCallLoadFailed || !voiceCallDraft ? (
-            <ConfigRetryState
-              message={t('voiceCall.messages.loadFailed')}
-              retryLabel={t('messages.retry')}
-              onRetry={() => void loadVoiceCallConfig()}
-              loading={voiceCallLoading}
-            />
-          ) : (
-            <>
-            <ConfigPageRow
-              label={t('voiceCall.enabled.label')}
-              description={t('voiceCall.enabled.description')}
-              align="center"
-            >
-              <Switch
-                checked={voiceCallDraft.enabled}
-                onChange={(event) => updateVoiceCall({ enabled: event.target.checked })}
-              />
-            </ConfigPageRow>
-            <ConfigPageRow
-              label={t('voiceCall.apiKey.label')}
-              description={t('voiceCall.apiKey.description')}
-              align="center"
-            >
-              <Input
-                type="password"
-                size="sm"
-                autoComplete="off"
-                value={voiceCallDraft.apiKey}
-                placeholder={t('voiceCall.apiKey.placeholder')}
-                onChange={(event) => updateVoiceCall({ apiKey: event.target.value })}
-              />
-            </ConfigPageRow>
-            <ConfigPageRow
-              label={t('voiceCall.voice.label')}
-              description={t('voiceCall.voice.description')}
-              align="center"
-            >
-              <Input
-                size="sm"
-                value={voiceCallDraft.voice}
-                onChange={(event) => updateVoiceCall({ voice: event.target.value })}
-              />
-            </ConfigPageRow>
-            <ConfigMessage
-              message={voiceCallSaveError ? { type: 'error', text: voiceCallSaveError } : null}
-            />
-            </>
-          )}
-        </ConfigPageSection>
 
-      </ConfigPageContent>
+
+      </ConfigPageSectionStack>
       <LocalVoiceModelsConfig
         isOpen={localModelsOpen}
         onClose={() => setLocalModelsOpen(false)}
       />
-    </ConfigPageLayout>
+    </div>
   );
 };
 
-export default VoiceInputConfig;
+export default VoiceSettingsSection;
diff --git a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.appearance.ts
similarity index 100%
rename from src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.appearance.ts
diff --git a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.scss
similarity index 100%
rename from src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss
rename to src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.scss
diff --git a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
similarity index 87%
rename from src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
index 45c44ecb81..e825b7fc9c 100644
--- a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
@@ -1,5 +1,5 @@
 /**
- * ArchivedSessionsConfig — settings page for managing archived sessions.
+ * ArchivedSessionsSettingsPage — settings page for managing archived sessions.
  *
  * Lists all archived sessions grouped by workspace, with per-session
  * restore / delete actions and a bulk "Delete All Archived" action.
@@ -7,29 +7,29 @@
  * directly with explicit success or failure feedback.
  */
 
-import { OverflowText, Button, Empty, Icon } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { RotateCcw, Inbox } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import '@/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.scss';
+import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
+import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import {
-  ConfigPageLayout,
-  ConfigPageHeader,
-  ConfigPageContent,
   ConfigMessage,
-  ConfigRefreshButton,
+  ConfigPageContent,
+  ConfigPageHeader,
+  ConfigPageLayout,
   ConfigPageSection,
+  ConfigRefreshButton,
 } from '@/infrastructure/config/components/common';
-import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
-import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
+import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
+import { i18nService, useI18n } from '@/infrastructure/i18n';
 import { notificationService } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
-import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
 import type { SessionMetadata } from '@/shared/types/session-history';
-import { i18nService, useI18n } from '@/infrastructure/i18n';
-import './ArchivedSessionsConfig.scss';
+import { createLogger } from '@/shared/utils/logger';
+import { Button, Empty, Icon, OverflowText } from '@openbitfun/ui';
+import { Inbox, RotateCcw } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-const log = createLogger('ArchivedSessionsConfig');
+const log = createLogger('ArchivedSessionsSettingsPage');
 
 // ── Types ──────────────────────────────────────────────────────────────────
 
@@ -154,7 +154,7 @@ const ArchivedRow: React.FC<ArchivedRowProps> = ({
 
 // ── Main component ─────────────────────────────────────────────────────────
 
-const ArchivedSessionsConfig: React.FC = () => {
+const ArchivedSessionsSettingsPage: React.FC = () => {
   const { t } = useTranslation('common');
   const { t: tSettings } = useI18n('settings');
   const { openedWorkspacesList } = useWorkspaceContext();
@@ -512,46 +512,46 @@ const ArchivedSessionsConfig: React.FC = () => {
             </div>
           ) : hasEntries ? (
             <>
-            {Array.from(grouped.entries()).map(([workspaceKey, group]) => {
-              const isCollapsed = collapsedWorkspaces.has(workspaceKey);
-              return (
-              <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="group" data-openbitfun-state={isCollapsed ? 'collapsed' : undefined} key={workspaceKey} className="archived-sessions-config__group">
-                <button data-overflow-trigger
-                  type="button"
-                  data-openbitfun-component="archived-sessions-config"
-                  data-openbitfun-part="groupHeader"
-                  className="archived-sessions-config__group-header"
-                  onClick={() => toggleWorkspace(workspaceKey)}
-                  aria-expanded={!isCollapsed}
-                >
-                  {isCollapsed ? (
-                    <Icon name="chevron-right" size="sm" className="archived-sessions-config__group-chevron" />
-                  ) : (
-                    <Icon name="chevron-down" size="sm" className="archived-sessions-config__group-chevron" />
-                  )}
-                  <OverflowText className="archived-sessions-config__group-name">{group.label}</OverflowText>
-                  <span className="archived-sessions-config__group-count">
-                    {group.entries.length}
-                  </span>
-                </button>
-                {!isCollapsed && (
-                <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="groupList" className="archived-sessions-config__group-list">
-                  {group.entries.map(entry => (
-                    <ArchivedRow
-                      key={archivedEntryIdentityKey(entry)}
-                      entry={entry}
-                      onRestore={(e) => { void handleRestore(e); }}
-                      onDelete={(e) => { void handleDelete(e); }}
-                      pendingAction={pendingAction}
-                      disabled={pendingAction !== null || bulkDeleting}
-                      t={t}
-                    />
-                  ))}
-                </div>
-                )}
-              </div>
-              );
-            })}
+              {Array.from(grouped.entries()).map(([workspaceKey, group]) => {
+                const isCollapsed = collapsedWorkspaces.has(workspaceKey);
+                return (
+                  <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="group" data-openbitfun-state={isCollapsed ? 'collapsed' : undefined} key={workspaceKey} className="archived-sessions-config__group">
+                    <button data-overflow-trigger
+                      type="button"
+                      data-openbitfun-component="archived-sessions-config"
+                      data-openbitfun-part="groupHeader"
+                      className="archived-sessions-config__group-header"
+                      onClick={() => toggleWorkspace(workspaceKey)}
+                      aria-expanded={!isCollapsed}
+                    >
+                      {isCollapsed ? (
+                        <Icon name="chevron-right" size="sm" className="archived-sessions-config__group-chevron" />
+                      ) : (
+                        <Icon name="chevron-down" size="sm" className="archived-sessions-config__group-chevron" />
+                      )}
+                      <OverflowText className="archived-sessions-config__group-name">{group.label}</OverflowText>
+                      <span className="archived-sessions-config__group-count">
+                        {group.entries.length}
+                      </span>
+                    </button>
+                    {!isCollapsed && (
+                      <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="groupList" className="archived-sessions-config__group-list">
+                        {group.entries.map(entry => (
+                          <ArchivedRow
+                            key={archivedEntryIdentityKey(entry)}
+                            entry={entry}
+                            onRestore={(e) => { void handleRestore(e); }}
+                            onDelete={(e) => { void handleDelete(e); }}
+                            pendingAction={pendingAction}
+                            disabled={pendingAction !== null || bulkDeleting}
+                            t={t}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
             </>
           ) : null}
         </ConfigPageSection>
@@ -560,4 +560,4 @@ const ArchivedSessionsConfig: React.FC = () => {
   );
 };
 
-export default ArchivedSessionsConfig;
+export default ArchivedSessionsSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
new file mode 100644
index 0000000000..7610170e00
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
@@ -0,0 +1,287 @@
+import '@/app/scenes/settings/pages/shared/ApplicationSettings.scss';
+import { configAPI, workspaceAPI } from '@/infrastructure/api';
+import { ConfigLoadingState, ConfigMessage, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import type {
+  BackendLogLevel,
+  RuntimeLoggingInfo
+} from '@/infrastructure/config/types';
+import { createLogger } from '@/shared/utils/logger';
+import { Alert, Button, ConfirmDialog, IconButton, Input, Select, Switch, Tooltip } from '@openbitfun/ui';
+import { Archive, FolderOpen } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+const log = createLogger('DiagnosticsSettingsPage');
+
+function LoggingSection() {
+  const { t } = useTranslation('settings/application');
+  const [configLevel, setConfigLevel] = useState<BackendLogLevel>('info');
+  const [includeSensitiveDiagnostics, setIncludeSensitiveDiagnostics] = useState(false);
+  const [runtimeInfo, setRuntimeInfo] = useState<RuntimeLoggingInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [openingFolder, setOpeningFolder] = useState(false);
+  const [exportingDiagnostics, setExportingDiagnostics] = useState(false);
+  const [exportConfirmOpen, setExportConfirmOpen] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const levelOptions = useMemo(
+    () => [
+      { value: 'trace', label: t('logging.levels.trace') },
+      { value: 'debug', label: t('logging.levels.debug') },
+      { value: 'info', label: t('logging.levels.info') },
+      { value: 'warn', label: t('logging.levels.warn') },
+      { value: 'error', label: t('logging.levels.error') },
+      { value: 'off', label: t('logging.levels.off') },
+    ],
+    [t]
+  );
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const loadData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadFailed(false);
+
+      const [savedLevel, savedIncludeSensitiveDiagnostics, info] = await Promise.all([
+        configManager.getConfig<BackendLogLevel>('app.logging.level'),
+        configManager.getConfig<boolean>('app.logging.include_sensitive_diagnostics'),
+        configAPI.getRuntimeLoggingInfo(),
+      ]);
+
+      setConfigLevel(savedLevel || info.effectiveLevel || 'info');
+      setIncludeSensitiveDiagnostics(savedIncludeSensitiveDiagnostics ?? false);
+      setRuntimeInfo(info);
+    } catch (error) {
+      log.error('Failed to load logging config', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleLevelChange = useCallback(
+    async (value: string) => {
+      const nextLevel = value as BackendLogLevel;
+      const previousLevel = configLevel;
+      setConfigLevel(nextLevel);
+      setSaving(true);
+
+      try {
+        await configManager.setConfig('app.logging.level', nextLevel);
+        configManager.clearCache();
+
+        const info = await configAPI.getRuntimeLoggingInfo();
+        setRuntimeInfo(info);
+        showMessage('success', t('logging.messages.levelUpdated'));
+      } catch (error) {
+        setConfigLevel(previousLevel);
+        log.error('Failed to update logging level', { nextLevel, error });
+        showMessage('error', t('logging.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [configLevel, showMessage, t]
+  );
+
+  const handleSensitiveDiagnosticsChange = useCallback(
+    async (checked: boolean) => {
+      const previousValue = includeSensitiveDiagnostics;
+      setIncludeSensitiveDiagnostics(checked);
+      setSaving(true);
+
+      try {
+        await configManager.setConfig('app.logging.include_sensitive_diagnostics', checked);
+        configManager.clearCache();
+        showMessage('success', t('logging.messages.sensitiveDiagnosticsUpdated'));
+      } catch (error) {
+        setIncludeSensitiveDiagnostics(previousValue);
+        log.error('Failed to update sensitive diagnostics logging preference', { checked, error });
+        showMessage('error', t('logging.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [includeSensitiveDiagnostics, showMessage, t]
+  );
+
+  const handleOpenFolder = useCallback(async () => {
+    const folder = runtimeInfo?.sessionLogDir;
+    if (!folder) {
+      showMessage('error', t('logging.messages.pathUnavailable'));
+      return;
+    }
+
+    try {
+      setOpeningFolder(true);
+      await workspaceAPI.revealInExplorer(folder);
+    } catch (error) {
+      log.error('Failed to open log folder', { folder, error });
+      showMessage('error', t('logging.messages.openFailed'));
+    } finally {
+      setOpeningFolder(false);
+    }
+  }, [runtimeInfo?.sessionLogDir, showMessage, t]);
+
+  const handleExportDiagnostics = useCallback(async () => {
+    setExportConfirmOpen(false);
+    try {
+      setExportingDiagnostics(true);
+      const result = await configAPI.exportDiagnosticsBundle();
+      showMessage('success', t('logging.messages.diagnosticsExported'));
+      await workspaceAPI.revealInExplorer(result.bundlePath);
+    } catch (error) {
+      log.error('Failed to export diagnostics bundle', { error });
+      showMessage('error', t('logging.messages.diagnosticsExportFailed'));
+    } finally {
+      setExportingDiagnostics(false);
+    }
+  }, [showMessage, t]);
+
+  if (loading) {
+    return <ConfigLoadingState label={t('logging.messages.loading')} />;
+  }
+
+  if (loadFailed) {
+    return (
+      <ConfigRetryState
+        message={t('logging.messages.loadFailed')}
+        retryLabel={t('common.retry')}
+        onRetry={() => void loadData()}
+      />
+    );
+  }
+
+  return (
+    <div className="openbitfun-logging-config" data-openbitfun-component="application-settings" data-openbitfun-part="logging">
+      <div className="openbitfun-logging-config__content">
+        <ConfigMessage message={message} />
+
+        {runtimeInfo?.previousUnexpectedExit?.detected && (
+          <Alert
+            tone={runtimeInfo.previousUnexpectedExit.category === 'crash' ? 'warning' : 'info'}
+            message={t(
+              runtimeInfo.previousUnexpectedExit.category === 'crash'
+                ? 'logging.previousCrash.title'
+                : 'logging.previousUncleanShutdown.title'
+            )}
+            description={t(
+              runtimeInfo.previousUnexpectedExit.category === 'crash'
+                ? 'logging.previousCrash.description'
+                : 'logging.previousUncleanShutdown.description',
+              {
+                path: runtimeInfo.previousUnexpectedExit.sessionLogDir || '-',
+              }
+            )}
+          />
+        )}
+
+        <ConfigPageSection
+          title={t('logging.sections.logging')}
+          description={t('logging.sections.loggingHint')}
+        >
+          <ConfigPageRow
+            label={t('logging.sections.level')}
+            description={t('logging.level.description')}
+            align="center"
+          >
+            <Select
+              value={configLevel}
+              size="sm"
+              onValueChange={(v) => handleLevelChange(v as string)}
+              options={levelOptions}
+              disabled={saving}
+            />
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('logging.sensitiveDiagnostics.label')}
+            description={t('logging.sensitiveDiagnostics.description')}
+            align="center"
+          >
+            <Switch
+              checked={includeSensitiveDiagnostics}
+              onChange={(e) => {
+                void handleSensitiveDiagnosticsChange(e.target.checked);
+              }}
+              disabled={saving}
+            />
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('logging.sections.path')}
+            description={t('logging.path.description')}
+            multiline
+          >
+            <div className="openbitfun-logging-config__path-row" data-openbitfun-component="application-settings" data-openbitfun-part="logPath">
+              <Input
+                className="openbitfun-logging-config__path-box"
+                aria-label={t('logging.sections.path')}
+                title={runtimeInfo?.sessionLogDir || undefined}
+                value={runtimeInfo?.sessionLogDir || '-'}
+                readOnly
+                size="sm"
+              />
+              <Tooltip content={t('logging.actions.openFolderTooltip')} placement="top">
+                <IconButton
+                  aria-label={t('logging.actions.openFolderTooltip')}
+                  variant="quiet"
+                  size="sm"
+                  onClick={handleOpenFolder}
+                  loading={openingFolder}
+                  disabled={openingFolder || !runtimeInfo?.sessionLogDir}
+                  icon={<FolderOpen size={14} aria-hidden />}
+                />
+              </Tooltip>
+            </div>
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('logging.diagnostics.label')}
+            description={t('logging.diagnostics.description')}
+            align="center"
+          >
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              leadingIcon={<Archive size={14} aria-hidden />}
+              data-testid="diagnostics-export-button"
+              onClick={() => {
+                setExportConfirmOpen(true);
+              }}
+              loading={exportingDiagnostics}
+              disabled={exportingDiagnostics}
+            >
+              {t('logging.actions.exportDiagnostics')}
+            </Button>
+          </ConfigPageRow>
+        </ConfigPageSection>
+        <ConfirmDialog
+          open={exportConfirmOpen}
+          onOpenChange={() => setExportConfirmOpen(false)}
+          onConfirm={() => void handleExportDiagnostics()}
+          title={t('logging.diagnostics.confirmTitle')}
+          message={t(includeSensitiveDiagnostics
+            ? 'logging.diagnostics.confirmSensitive'
+            : 'logging.diagnostics.confirmStandard')}
+          confirmText={t('logging.diagnostics.confirmAction')}
+          type={includeSensitiveDiagnostics ? 'warning' : 'info'}
+        />
+      </div>
+    </div>
+  );
+}
+const DiagnosticsSettingsPage: React.FC = () => {
+
+  return <SettingsPage pageId="data.diagnostics" data-openbitfun-component="application-settings" data-openbitfun-part="root"><LoggingSection /></SettingsPage>;
+};
+export default DiagnosticsSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss
rename to src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.scss
diff --git a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.test.tsx b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
similarity index 96%
rename from src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
index 289dcbb571..e86377348a 100644
--- a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
-import UsageStatisticsConfig from './UsageStatisticsConfig';
+import UsageStatisticsSettingsPage from '@/app/scenes/settings/pages/data/UsageStatisticsSettingsPage';
 import type { UsageStatistics } from '@/infrastructure/api';
 
 const getStatisticsMock = vi.hoisted(() => vi.fn());
@@ -77,8 +77,8 @@ vi.mock('@openbitfun/ui', async importOriginal => ({
   ),
 }));
 
-vi.mock('./common', async importOriginal => ({
-  ...await importOriginal<typeof import('./common')>(),
+vi.mock('../../../../../infrastructure/config/components/common', async importOriginal => ({
+  ...await importOriginal<typeof import('@/infrastructure/config/components/common')>(),
   ConfigLoadingState: ({ label }: { label?: string }) => <div data-testid="usage-loading">{label}</div>,
   ConfigMessage: ({ message }: { message: { type: string; text: string } | null }) => message ? (
     <div data-testid="usage-message" data-message-type={message.type}>{message.text}</div>
@@ -119,7 +119,7 @@ const SAMPLE_STATS: UsageStatistics = {
   granularity: 'day',
 };
 
-describe('UsageStatisticsConfig', () => {
+describe('UsageStatisticsSettingsPage', () => {
   let container: HTMLDivElement;
   let root: Root;
 
@@ -137,7 +137,7 @@ describe('UsageStatisticsConfig', () => {
   });
 
   async function render() {
-    await act(async () => { root.render(<UsageStatisticsConfig />); });
+    await act(async () => { root.render(<UsageStatisticsSettingsPage />); });
     await act(async () => { await Promise.resolve(); });
   }
 
diff --git a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
similarity index 98%
rename from src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
index 6b2fee8c1f..f583db20ed 100644
--- a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { BarChart3 } from 'lucide-react';
+import '@/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.scss';
 import {
   TokenUsageStatisticsUnavailableError,
   tokenUsageStatisticsApi,
@@ -8,13 +7,6 @@ import {
   type UsageStatisticsEntry,
   type UsageTimeRange,
 } from '@/infrastructure/api';
-import { useI18n } from '@/infrastructure/i18n';
-import { observeElementResize } from '@/shared/utils/sharedResizeObserver';
-import {
-  formatCacheHitRate,
-  formatTokenCount,
-  type LocalizedNumberFormatter,
-} from '@/shared/utils/tokenUsageFormatting';
 import {
   ConfigLoadingState,
   ConfigMessage,
@@ -25,8 +17,15 @@ import {
   ConfigPageSection,
   ConfigPageSectionStack,
   ConfigRefreshButton,
-} from './common';
-import { UsageActivityHeatmap } from './UsageActivityHeatmap';
+} from '@/infrastructure/config/components/common';
+import { UsageActivityHeatmap } from '@/infrastructure/config/components/UsageActivityHeatmap';
+import { useI18n } from '@/infrastructure/i18n';
+import { observeElementResize } from '@/shared/utils/sharedResizeObserver';
+import {
+  formatCacheHitRate,
+  formatTokenCount,
+  type LocalizedNumberFormatter,
+} from '@/shared/utils/tokenUsageFormatting';
 import {
   Button,
   Empty,
@@ -37,7 +36,8 @@ import {
   TabGroup,
   Tooltip,
 } from '@openbitfun/ui';
-import './UsageStatisticsConfig.scss';
+import { BarChart3 } from 'lucide-react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 
 type DistributionKind = 'model' | 'group' | 'endpoint';
 
@@ -378,7 +378,7 @@ function UsageDetails({ stats, timeZone }: { stats: UsageStatistics; timeZone: s
   );
 }
 
-const UsageStatisticsConfig: React.FC = () => {
+const UsageStatisticsSettingsPage: React.FC = () => {
   const { t, resolvedTimeZone: timeZone, formatNumber } = useI18n('settings/usage');
   const [timeRange, setTimeRange] = useState<UsageTimeRange>('thisMonth');
   const [stats, setStats] = useState<UsageStatistics | null>(null);
@@ -513,4 +513,4 @@ const UsageStatisticsConfig: React.FC = () => {
   );
 };
 
-export default UsageStatisticsConfig;
+export default UsageStatisticsSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/EditorConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.scss b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/EditorConfig.scss
rename to src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.scss
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.test.tsx b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
similarity index 91%
rename from src/web-ui/src/infrastructure/config/components/EditorConfig.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
index c78c107611..789cee7ba2 100644
--- a/src/web-ui/src/infrastructure/config/components/EditorConfig.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
@@ -3,16 +3,16 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { Simulate } from 'react-dom/test-utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import EditorConfig from './EditorConfig';
+import EditorSettingsPage from '@/app/scenes/settings/pages/development/EditorSettingsPage';
 
 const mocks = vi.hoisted(() => ({
   get: vi.fn(), update: vi.fn(), emit: vi.fn(), t: (key: string) => key,
 }));
 vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: mocks.t }) }));
-vi.mock('../services/ConfigManager', () => ({ configManager: { getConfig: mocks.get, updateConfig: mocks.update } }));
+vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: { getConfig: mocks.get, updateConfig: mocks.update } }));
 vi.mock('@/infrastructure/event-bus', () => ({ globalEventBus: { emit: mocks.emit } }));
 vi.mock('@/shared/utils/logger', () => ({ createLogger: () => ({ error: vi.fn() }) }));
-vi.mock('./common', () => {
+vi.mock('../../../../../infrastructure/config/components/common', () => {
   const Container = ({ children }: React.PropsWithChildren) => <div>{children}</div>;
   return {
     ConfigPageLayout: Container, ConfigPageContent: Container,
@@ -27,7 +27,7 @@ let root: Root;
 let container: HTMLDivElement;
 let persisted: Record<string, unknown>;
 const input = (label: string) => container.querySelector<HTMLInputElement>(`input[aria-label="${label}"]`)!;
-const mount = async () => { await act(async () => root.render(<EditorConfig />)); };
+const mount = async () => { await act(async () => root.render(<EditorSettingsPage />)); };
 beforeEach(() => {
   vi.clearAllMocks();
   persisted = { tab_size: 4, insert_spaces: true, detect_indentation: true };
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
similarity index 98%
rename from src/web-ui/src/infrastructure/config/components/EditorConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
index 43fc11a55d..0e158c08f2 100644
--- a/src/web-ui/src/infrastructure/config/components/EditorConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
@@ -1,32 +1,30 @@
- 
 
-import { NumberInput, Select, Switch } from '@openbitfun/ui';
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useI18n } from '@/infrastructure/i18n';
+
+import '@/app/scenes/settings/pages/development/EditorSettingsPage.scss';
 import {
   ConfigFieldStatus,
   ConfigLoadingState,
   ConfigMessage,
+  ConfigPageContent,
+  ConfigPageHeader,
+  ConfigPageLayout,
+  ConfigPageRow,
+  ConfigPageSection,
   ConfigRetryState,
 } from '@/infrastructure/config/components/common';
-import { configManager } from '../services/ConfigManager';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { globalEventBus } from '@/infrastructure/event-bus';
-import { DEFAULT_EDITOR_CONFIG, type EditorConfig as EditorConfigType, type EditorConfigPartial } from '@/tools/editor/config';
-import { resolveEditorFontFamily } from '@/tools/editor/config/defaults';
-import {
-  ConfigPageLayout,
-  ConfigPageHeader,
-  ConfigPageContent,
-  ConfigPageSection,
-  ConfigPageRow,
-} from './common';
+import { useI18n } from '@/infrastructure/i18n';
 import { createLogger } from '@/shared/utils/logger';
-import './EditorConfig.scss';
+import { DEFAULT_EDITOR_CONFIG, type EditorConfigPartial, type EditorConfig as EditorConfigType } from '@/tools/editor/config';
+import { resolveEditorFontFamily } from '@/tools/editor/config/defaults';
+import { NumberInput, Select, Switch } from '@openbitfun/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const log = createLogger('EditorSettingsPage');
 
-const log = createLogger('EditorConfig');
 
 
-export type EditorConfigProps = Record<string, never>;
 
 
 const fontFamilyOptions = [
@@ -103,25 +101,25 @@ const renderLineHighlightOptions = [
   { label: 'all', value: 'all', labelKey: 'display.lineHighlightOptions.all' },
 ];
 
- 
+
 function getPrimaryFont(fontFamily: string): string {
-  
+
   const fonts = fontFamily.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, ''));
-  
+
   const primary = fonts[0] || '__design-system__';
   return primary;
 }
 
- 
+
 function buildFontFamily(primaryFont: string): string {
   if (primaryFont === '__design-system__') return '';
   return `${JSON.stringify(primaryFont)}, ${resolveEditorFontFamily()}`;
 }
 
- 
+
 function convertToSnakeCase(config: EditorConfigPartial): Record<string, any> {
   const result: Record<string, any> = {};
-  
+
   if (config.fontSize !== undefined) result.font_size = config.fontSize;
   if (config.fontFamily !== undefined) result.font_family = config.fontFamily;
   if (config.fontWeight !== undefined) result.font_weight = config.fontWeight;
@@ -144,7 +142,7 @@ function convertToSnakeCase(config: EditorConfigPartial): Record<string, any> {
   if (config.smoothScrolling !== undefined) result.smooth_scrolling = config.smoothScrolling;
   if (config.semanticHighlighting !== undefined) result.semantic_highlighting = config.semanticHighlighting;
   if (config.bracketPairColorization !== undefined) result.bracket_pair_colorization = config.bracketPairColorization;
-  
+
   if (config.minimap) {
     result.minimap = {
       enabled: config.minimap.enabled,
@@ -152,14 +150,14 @@ function convertToSnakeCase(config: EditorConfigPartial): Record<string, any> {
       size: config.minimap.size,
     };
   }
-  
+
   return result;
 }
 
- 
+
 function convertToCamelCase(config: Record<string, any>): EditorConfigPartial {
   const result: EditorConfigPartial = {};
-  
+
   if (config.font_size !== undefined) result.fontSize = config.font_size;
   if (config.font_family !== undefined) result.fontFamily = config.font_family;
   if (config.font_weight !== undefined) result.fontWeight = config.font_weight;
@@ -182,7 +180,7 @@ function convertToCamelCase(config: Record<string, any>): EditorConfigPartial {
   if (config.smooth_scrolling !== undefined) result.smoothScrolling = config.smooth_scrolling;
   if (config.semantic_highlighting !== undefined) result.semanticHighlighting = config.semantic_highlighting;
   if (config.bracket_pair_colorization !== undefined) result.bracketPairColorization = config.bracket_pair_colorization;
-  
+
   if (config.minimap) {
     result.minimap = {
       enabled: config.minimap.enabled,
@@ -190,7 +188,7 @@ function convertToCamelCase(config: Record<string, any>): EditorConfigPartial {
       size: config.minimap.size,
     };
   }
-  
+
   return result;
 }
 
@@ -231,16 +229,16 @@ function reconcileEditorPatch(
   return next as unknown as EditorConfigType;
 }
 
-const EditorConfig: React.FC<EditorConfigProps> = () => {
+const EditorSettingsPage: React.FC = () => {
   const { t } = useI18n('settings/editor');
-  
-  
+
+
   const fontWeightOptionsTranslated = [
     { label: t('appearance.fontWeightNormal'), value: 'normal' },
     { label: t('appearance.fontWeightBold'), value: 'bold' },
   ];
-  
-  
+
+
   const cursorStyleOptionsTranslated = cursorStyleOptions.map(o => ({ ...o, label: t(o.labelKey) }));
   const cursorBlinkingOptionsTranslated = cursorBlinkingOptions.map(o => ({ ...o, label: t(o.labelKey) }));
   const wordWrapOptionsTranslated = wordWrapOptions.map(o => ({ ...o, label: t(o.labelKey) }));
@@ -249,29 +247,29 @@ const EditorConfig: React.FC<EditorConfigProps> = () => {
   const minimapSizeOptionsTranslated = minimapSizeOptions.map(o => ({ ...o, label: t(o.labelKey) }));
   const renderWhitespaceOptionsTranslated = renderWhitespaceOptions.map(o => ({ ...o, label: t(o.labelKey) }));
   const renderLineHighlightOptionsTranslated = renderLineHighlightOptions.map(o => ({ ...o, label: t(o.labelKey) }));
-  
-  
+
+
   const [config, setConfig] = useState<EditorConfigType>({ ...DEFAULT_EDITOR_CONFIG });
   const [isLoading, setIsLoading] = useState(true);
   const [supportsIndentDetection, setSupportsIndentDetection] = useState(false);
   const [loadFailed, setLoadFailed] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [statusMessage, setStatusMessage] = useState<{ type: 'success' | 'error' | 'warning'; text: string } | null>(null);
-  
-  
+
+
   const configRef = useRef<EditorConfigType>(config);
   const persistedConfigRef = useRef<EditorConfigType>(config);
   const saveQueueRef = useRef<Promise<void>>(Promise.resolve());
   const pendingSaveCountRef = useRef(0);
   const latestSaveRevisionRef = useRef(0);
   const saveBurstFailedRef = useRef(false);
-  
-  
+
+
   useEffect(() => {
     configRef.current = config;
   }, [config]);
 
-  
+
   const loadConfig = useCallback(async () => {
     try {
       setIsLoading(true);
@@ -297,7 +295,7 @@ const EditorConfig: React.FC<EditorConfigProps> = () => {
     loadConfig();
   }, [loadConfig]);
 
-  
+
   const doSave = useCallback((
     patch: EditorConfigPartial,
     successMessage = t('messages.saveSuccess'),
@@ -670,4 +668,4 @@ const EditorConfig: React.FC<EditorConfigProps> = () => {
   );
 };
 
-export default EditorConfig;
+export default EditorSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.test.tsx
new file mode 100644
index 0000000000..451d6989c9
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.test.tsx
@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import GitCommitSettingsSection from './GitCommitSettingsSection';
+
+const mocks = vi.hoisted(() => ({ get: vi.fn(), save: vi.fn(), error: vi.fn(), success: vi.fn() }));
+vi.mock('@/infrastructure/config/services/AIExperienceConfigService', () => ({
+  aiExperienceConfigService: { getSettingsAsync: mocks.get, saveSettings: mocks.save },
+}));
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key }) }));
+vi.mock('@/shared/notification-system', () => ({ useNotification: () => ({ error: mocks.error, success: mocks.success }) }));
+
+let container: HTMLDivElement;
+let root: Root;
+const toggle = () => container.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  vi.clearAllMocks();
+  mocks.get.mockResolvedValue({ enable_git_commit_coauthor: false });
+  mocks.save.mockResolvedValue(undefined);
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(async () => { await act(async () => root.unmount()); container.remove(); });
+
+describe('Git commit attribution', () => {
+  it('keeps older hosts without the optional setting explicitly unsupported', async () => {
+    mocks.get.mockResolvedValue({});
+    await act(async () => root.render(<GitCommitSettingsSection />));
+    expect(toggle().disabled).toBe(true);
+    expect(container.textContent).toContain('commitAttribution.unsupported');
+    expect(mocks.save).not.toHaveBeenCalled();
+  });
+
+  it('saves only the existing host setting and preserves the previous value on failure', async () => {
+    await act(async () => root.render(<GitCommitSettingsSection />));
+    mocks.save.mockRejectedValueOnce(new Error('Host unavailable'));
+    await act(async () => toggle().click());
+    expect(toggle().checked).toBe(false);
+    expect(mocks.error).toHaveBeenCalledWith('messages.saveFailed');
+    expect(mocks.success).not.toHaveBeenCalled();
+    await act(async () => toggle().click());
+    expect(mocks.save).toHaveBeenLastCalledWith({ enable_git_commit_coauthor: true });
+    expect(toggle().checked).toBe(true);
+  });
+
+  it('locks an unread configuration and retries without writing defaults', async () => {
+    mocks.get.mockRejectedValueOnce(new Error('Host unavailable'));
+    await act(async () => root.render(<GitCommitSettingsSection />));
+    expect(toggle()).toBeNull();
+    expect(container.textContent).toContain('messages.loadFailedLocked');
+    expect(mocks.save).not.toHaveBeenCalled();
+    await act(async () => container.querySelector<HTMLButtonElement>('button')!.click());
+    expect(toggle().disabled).toBe(false);
+    expect(mocks.save).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
new file mode 100644
index 0000000000..eca3a5cf48
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
@@ -0,0 +1,81 @@
+import { ConfigLoadingState, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { aiExperienceConfigService } from '@/infrastructure/config/services/AIExperienceConfigService';
+import { useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import { Switch } from '@openbitfun/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
+
+const log = createLogger('GitCommitSettingsSection');
+const COMMIT_COAUTHOR_ACCOUNT = `@${new URL('https://github.com/bitfun-ai').pathname.slice(1)}`;
+
+export default function GitCommitSettingsSection() {
+  const { t } = useTranslation('settings/quick-actions');
+  const notification = useNotification();
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [commitCoauthorEnabled, setCommitCoauthorEnabled] = useState<boolean | undefined>();
+  const saveInFlight = useRef(false);
+  const sectionAnchor = useSettingsSectionAnchor('git', !loading);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setLoadFailed(false);
+    try {
+      const settings = await aiExperienceConfigService.getSettingsAsync({ forceRefresh: true, requireLoaded: true });
+      setCommitCoauthorEnabled(settings.enable_git_commit_coauthor);
+    } catch (error) {
+      log.error('Failed to load Git commit settings', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+
+  const handleCommitCoauthorToggle = async (enabled: boolean) => {
+    if (saveInFlight.current || commitCoauthorEnabled === undefined) return;
+    saveInFlight.current = true;
+    setSaving(true);
+    try {
+      await aiExperienceConfigService.saveSettings({ enable_git_commit_coauthor: enabled });
+      setCommitCoauthorEnabled(enabled);
+      notification.success(t('messages.saved'));
+    } catch (error) {
+      log.error('Failed to save Git commit settings', error);
+      notification.error(t('messages.saveFailed'));
+    } finally {
+      saveInFlight.current = false;
+      setSaving(false);
+    }
+  };
+
+  if (loading || loadFailed) {
+    return <ConfigPageSection id={sectionAnchor} title={t('commitAttribution.title')}>
+      {loading ? <ConfigLoadingState label={t('loading')} /> : <ConfigRetryState message={t('messages.loadFailedLocked')} retryLabel={t('messages.retry')} onRetry={() => void load()} />}
+    </ConfigPageSection>;
+  }
+  return (
+    <ConfigPageSection id={sectionAnchor}
+      title={t('commitAttribution.title')}
+      description={t('commitAttribution.scope')}
+    >
+      <ConfigPageRow
+        label={t('commitAttribution.label')}
+        align="center"
+        description={commitCoauthorEnabled === undefined
+          ? t('commitAttribution.unsupported')
+          : t('commitAttribution.description', { account: COMMIT_COAUTHOR_ACCOUNT })}
+      >
+        <Switch
+          checked={commitCoauthorEnabled === true}
+          onChange={(event) => handleCommitCoauthorToggle(event.currentTarget.checked)}
+          disabled={saving || commitCoauthorEnabled === undefined}
+          aria-label={t('commitAttribution.label')}
+        />
+      </ConfigPageRow>
+    </ConfigPageSection>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
new file mode 100644
index 0000000000..dca9736368
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
@@ -0,0 +1,164 @@
+import '@/app/scenes/settings/pages/shared/ApplicationSettings.scss';
+import { ConfigLoadingState, ConfigMessage, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import type {
+  TerminalConfig as TerminalSettings
+} from '@/infrastructure/config/types';
+import { createLogger } from '@/shared/utils/logger';
+import { getTerminalService } from '@/tools/terminal/services';
+import type { ShellInfo } from '@/tools/terminal/types/session';
+import { Combobox, type ComboboxOption } from '@openbitfun/ui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+const log = createLogger('TerminalSettingsPage');
+
+const AUTO_DETECT_SHELL_VALUE = '__auto_detect_shell__';
+
+type TerminalShellOption = ComboboxOption & {
+  shell?: ShellInfo;
+};
+
+const formatShellLabel = (shell: ShellInfo): string =>
+  `${shell.name}${shell.version ? ` (${shell.version})` : ''}`;
+
+function TerminalSection() {
+  const { t } = useTranslation('settings/application');
+  const [defaultShell, setDefaultShell] = useState<string>('');
+  const [availableShells, setAvailableShells] = useState<ShellInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+
+  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const loadData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadFailed(false);
+
+      const [terminalConfig, shells] = await Promise.all([
+        configManager.getConfig<TerminalSettings>('terminal'),
+        getTerminalService().getAvailableShells(),
+      ]);
+
+      setDefaultShell(terminalConfig?.default_shell || '');
+
+      const availableOnly = shells.filter((s) => s.available);
+      setAvailableShells(availableOnly);
+    } catch (error) {
+      log.error('Failed to load terminal config data', error);
+      setLoadFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleShellChange = useCallback(
+    async (value: string) => {
+      const previous = defaultShell;
+      try {
+        setSaving(true);
+        setDefaultShell(value);
+
+        await configManager.setConfig('terminal.default_shell', value);
+
+        configManager.clearCache();
+
+        showMessage('success', t('terminal.messages.updated'));
+      } catch (error) {
+        setDefaultShell(previous);
+        log.error('Failed to save terminal config', { shell: value, error });
+        showMessage('error', t('terminal.messages.saveFailed'));
+      } finally {
+        setSaving(false);
+      }
+    },
+    [defaultShell, showMessage, t]
+  );
+
+  const shellOptions = useMemo<TerminalShellOption[]>(
+    () => [
+      { value: AUTO_DETECT_SHELL_VALUE, label: t('terminal.controls.autoDetect') },
+      ...availableShells.map((shell) => ({
+        description: shell.path,
+        value: shell.path,
+        label: formatShellLabel(shell),
+        shell,
+      })),
+    ],
+    [availableShells, t],
+  );
+
+  const selectedShell = useMemo(
+    () =>
+      availableShells.find((shell) => shell.path === defaultShell) ??
+      availableShells.find((shell) => shell.shellType === defaultShell),
+    [availableShells, defaultShell],
+  );
+  const selectedShellValue = selectedShell?.path ?? (defaultShell || AUTO_DETECT_SHELL_VALUE);
+
+  const shouldShowCmdFallbackNotice = selectedShell?.shellType === 'Cmd' || defaultShell === 'Cmd';
+
+  if (loading) {
+    return <ConfigLoadingState label={t('terminal.messages.loading')} />;
+  }
+
+  if (loadFailed) {
+    return (
+      <ConfigRetryState
+        message={t('terminal.messages.loadFailed')}
+        retryLabel={t('common.retry')}
+        onRetry={() => void loadData()}
+      />
+    );
+  }
+
+  return (
+    <div className="openbitfun-terminal-config" data-openbitfun-component="application-settings" data-openbitfun-part="terminal">
+      <div className="openbitfun-terminal-config__content">
+        <ConfigMessage message={message} />
+
+        <ConfigPageSection
+          title={t('terminal.sections.terminal')}
+          description={shouldShowCmdFallbackNotice
+            ? t('terminal.sections.terminalHintWithCmdFallback')
+            : t('terminal.sections.terminalHint')}
+        >
+          <ConfigPageRow
+            label={t('terminal.sections.defaultTerminal')}
+            description={t('terminal.controls.description')}
+            align="center"
+          >
+            {availableShells.length > 0 ? (
+              <Combobox
+                size="sm"
+                value={selectedShellValue}
+                onValueChange={(v) => handleShellChange(v === AUTO_DETECT_SHELL_VALUE ? '' : v as string)}
+                options={shellOptions}
+                placeholder={t('terminal.controls.placeholder')}
+                disabled={saving}
+              />
+            ) : (
+              <div className="openbitfun-terminal-config__no-shells">{t('terminal.controls.noShells')}</div>
+            )}
+          </ConfigPageRow>
+
+        </ConfigPageSection>
+      </div>
+    </div>
+  );
+}
+const TerminalSettingsPage: React.FC = () => {
+
+  return <SettingsPage pageId="development.terminal" data-openbitfun-component="application-settings" data-openbitfun-part="root"><TerminalSection /></SettingsPage>;
+};
+export default TerminalSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceGitSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceGitSettingsPage.tsx
new file mode 100644
index 0000000000..b3ccf375a6
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceGitSettingsPage.tsx
@@ -0,0 +1,14 @@
+import { SettingsPage } from '../shared/SettingsPage';
+import GitCommitSettingsSection from './GitCommitSettingsSection';
+import WorkspaceSearchSection from './WorkspaceSearchSection';
+import WorktreeSettingsSection from './WorktreeSettingsSection';
+
+export default function WorkspaceGitSettingsPage() {
+  return (
+    <SettingsPage pageId="development.workspace">
+      <WorkspaceSearchSection />
+      <GitCommitSettingsSection />
+      <WorktreeSettingsSection />
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx
new file mode 100644
index 0000000000..54ad6cbefb
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx
@@ -0,0 +1,55 @@
+import { ConfigLoadingState, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { useAIExperienceSettings } from '@/infrastructure/config/hooks';
+import { aiExperienceConfigService } from '@/infrastructure/config/services/AIExperienceConfigService';
+import { WORKSPACE_SEARCH_AVAILABLE } from '@/infrastructure/config/workspaceSearchAvailability';
+import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { notificationService } from '@/shared/notification-system';
+import { isRemoteWorkspace } from '@/shared/types/global-state';
+import { createLogger } from '@/shared/utils/logger';
+import { Switch } from '@openbitfun/ui';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
+
+const log = createLogger('WorkspaceSearchSection');
+
+function WorkspaceSearchSettings() {
+  const { t } = useTranslation('settings/runtime');
+  const { settings, isLoading, error, reload } = useAIExperienceSettings();
+  const [saving, setSaving] = useState(false);
+  const saveInFlight = useRef(false);
+  const sectionAnchor = useSettingsSectionAnchor('workspace-search', !isLoading);
+
+  const updateEnabled = async (enabled: boolean) => {
+    if (saveInFlight.current) return;
+    saveInFlight.current = true;
+    setSaving(true);
+    try {
+      await aiExperienceConfigService.saveSettings({ enable_workspace_search: enabled });
+    } catch (error) {
+      log.error('Failed to save workspace search settings', error);
+      notificationService.error(t('messages.saveFailed'));
+    } finally {
+      saveInFlight.current = false;
+      setSaving(false);
+    }
+  };
+
+  return (
+    <ConfigPageSection id={sectionAnchor} title={t('features.workspaceSearch.title')} description={t('features.workspaceSearch.subtitle')}>
+      {isLoading ? <ConfigLoadingState label={t('loading.text')} /> : error || !settings ? (
+        <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void reload()} />
+      ) : (
+        <ConfigPageRow label={t('features.workspaceSearch.enable')} align="center">
+          <Switch checked={settings.enable_workspace_search} disabled={saving} onChange={event => void updateEnabled(event.currentTarget.checked)} />
+        </ConfigPageRow>
+      )}
+    </ConfigPageSection>
+  );
+}
+
+export default function WorkspaceSearchSection() {
+  const { workspace } = useCurrentWorkspace();
+  if (!WORKSPACE_SEARCH_AVAILABLE || isRemoteWorkspace(workspace)) return null;
+  return <WorkspaceSearchSettings />;
+}
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss
rename to src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.scss
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
similarity index 93%
rename from src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
index 580f3bf7cb..575ebd9c69 100644
--- a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
-import WorktreeSettingsPage from './WorktreeSettingsPage';
+import WorktreeSettingsSection from '@/app/scenes/settings/pages/development/WorktreeSettingsSection';
 
 const getConfigMock = vi.hoisted(() => vi.fn());
 const setConfigMock = vi.hoisted(() => vi.fn());
@@ -146,7 +146,8 @@ vi.mock('@openbitfun/ui', () => ({
   ),
 }));
 
-vi.mock('./common', () => ({
+vi.mock('../../../../../infrastructure/config/components/common', () => ({
+  ConfigPageSectionStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   ConfigEmptyState: ({ icon, title, description, ...props }: {
     icon: React.ReactNode;
     title?: React.ReactNode;
@@ -276,7 +277,7 @@ function deferred<T>() {
   return { promise, reject, resolve };
 }
 
-describe('WorktreeSettingsPage', () => {
+describe('WorktreeSettingsSection', () => {
   let container: HTMLDivElement;
   let root: Root;
 
@@ -320,7 +321,7 @@ describe('WorktreeSettingsPage', () => {
 
   it('adds safe auto-delete defaults and renders workspace worktrees with sessions', async () => {
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -345,7 +346,7 @@ describe('WorktreeSettingsPage', () => {
       });
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -368,7 +369,7 @@ describe('WorktreeSettingsPage', () => {
 
   it('saves the auto-delete policy with the existing worktree settings', async () => {
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -406,7 +407,7 @@ describe('WorktreeSettingsPage', () => {
     setConfigMock.mockReturnValueOnce(saveRequest.promise);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -448,7 +449,7 @@ describe('WorktreeSettingsPage', () => {
     }]);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -480,7 +481,7 @@ describe('WorktreeSettingsPage', () => {
     }]);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -515,7 +516,7 @@ describe('WorktreeSettingsPage', () => {
     }]);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -534,7 +535,7 @@ describe('WorktreeSettingsPage', () => {
 
   it('restores an archived associated conversation before opening it', async () => {
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -560,7 +561,7 @@ describe('WorktreeSettingsPage', () => {
     }>>();
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
     listProjectsMock.mockReturnValueOnce(refresh.promise);
@@ -593,7 +594,7 @@ describe('WorktreeSettingsPage', () => {
     }>>();
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
     listProjectsMock.mockReturnValueOnce(refresh.promise);
@@ -644,7 +645,7 @@ describe('WorktreeSettingsPage', () => {
     }]);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
@@ -679,7 +680,7 @@ describe('WorktreeSettingsPage', () => {
     }]);
 
     await act(async () => {
-      root.render(<WorktreeSettingsPage />);
+      root.render(<div className="openbitfun-config-page-layout"><WorktreeSettingsSection /></div>);
     });
     await flushPromises();
 
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
similarity index 96%
rename from src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx
rename to src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
index f2c10f7c79..82911f486c 100644
--- a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
@@ -1,18 +1,8 @@
-import { workspaceManager } from '@/infrastructure/services/business/workspaceManager';
-import { resolveLegacySessionWorkspace } from '@/infrastructure/api/service-api/legacyWorkspaceCompatibility';
-import { OverflowText, Button, ConfirmDialog, Icon, IconButton, Input, NumberInput, StatusPill, Switch, Tooltip } from '@openbitfun/ui';
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { FolderGit2, LoaderCircle, MessageSquareText, RotateCcw } from 'lucide-react';
+import '@/app/scenes/settings/pages/development/WorktreeSettingsSection.scss';
 import { openAgentCompanionSession } from '@/app/services/openAgentCompanionSession';
-import { confirmWarning } from '@/infrastructure/confirm-dialog';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { configAPI, worktreeAPI } from '@/infrastructure/api';
+import { resolveLegacySessionWorkspace } from '@/infrastructure/api/service-api/legacyWorkspaceCompatibility';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import type {
   WorktreeCommandError,
@@ -22,23 +12,32 @@ import type {
   WorktreeSettings,
   WorktreeSummary,
 } from '@/infrastructure/api/service-api/WorktreeAPI';
-import { useI18n } from '@/infrastructure/i18n';
-import { notificationService } from '@/shared/notification-system';
 import {
   ConfigActionBar,
   ConfigEmptyState,
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageRow,
-  ConfigPageSection,
   ConfigLoadingState,
   ConfigMessage,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigPageSectionStack,
   ConfigRefreshButton,
-  ConfigRetryState,
-} from './common';
+  ConfigRetryState
+} from '@/infrastructure/config/components/common';
 import { useSettingsDraft } from '@/infrastructure/config/settingsDraftRegistry';
-import './WorktreeSettingsPage.scss';
+import { confirmWarning } from '@/infrastructure/confirm-dialog';
+import { useI18n } from '@/infrastructure/i18n';
+import { workspaceManager } from '@/infrastructure/services/business/workspaceManager';
+import { notificationService } from '@/shared/notification-system';
+import { Button, ConfirmDialog, Icon, IconButton, Input, NumberInput, OverflowText, StatusPill, Switch, Tooltip } from '@openbitfun/ui';
+import { FolderGit2, LoaderCircle, MessageSquareText, RotateCcw } from 'lucide-react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
 const AUTO_DELETE_LIMIT_MIN = 1;
 const AUTO_DELETE_LIMIT_MAX = 100;
@@ -132,9 +131,9 @@ function removeWorktreeFromProjects(
   return projects
     .map(project => project.projectWorkspacePath === projectWorkspacePath
       ? {
-          ...project,
-          worktrees: project.worktrees.filter(worktree => worktree.worktreeId !== worktreeId),
-        }
+        ...project,
+        worktrees: project.worktrees.filter(worktree => worktree.worktreeId !== worktreeId),
+      }
       : project)
     .filter(project => project.worktrees.length > 0);
 }
@@ -151,7 +150,7 @@ function waitFor(ms: number): Promise<void> {
     : Promise.resolve();
 }
 
-const WorktreeSettingsPage: React.FC = () => {
+const WorktreeSettingsSection: React.FC = () => {
   const { t } = useI18n('worktrees');
   const [settings, setSettings] = useState(DEFAULT_SETTINGS);
   const [trustedSettings, setTrustedSettings] = useState<WorktreeSettings | null>(null);
@@ -322,9 +321,11 @@ const WorktreeSettingsPage: React.FC = () => {
     setSettingsMessage(null);
   }, [trustedSettings]);
 
+  const sectionAnchor = useSettingsSectionAnchor('worktrees', !settingsLoading && !projectsLoading);
+
   useSettingsDraft({
     id: 'worktree-settings',
-    pageId: 'workspace.worktrees',
+    pageId: 'development.workspace',
     label: t('settings.title'),
     dirty: settingsDirty,
     saving,
@@ -598,7 +599,7 @@ const WorktreeSettingsPage: React.FC = () => {
         className={[
           'openbitfun-worktree-settings__worktree',
           removingWorktreeId === worktree.worktreeId
-            && 'openbitfun-worktree-settings__worktree--removing',
+          && 'openbitfun-worktree-settings__worktree--removing',
         ].filter(Boolean).join(' ')}
         key={worktree.worktreeId}
         data-worktree-id={worktree.worktreeId}
@@ -786,17 +787,12 @@ const WorktreeSettingsPage: React.FC = () => {
   })();
 
   return (
-    <ConfigPageLayout
+    <div id={sectionAnchor}
       className="openbitfun-worktree-settings"
       data-openbitfun-component="worktree-settings"
       data-openbitfun-part="root"
     >
-      <ConfigPageHeader
-        icon={<Icon name="git" size="lg" aria-hidden />}
-        title={t('settings.title')}
-        subtitle={t('settings.description')}
-      />
-      <ConfigPageContent>
+      <ConfigPageSectionStack>
         {renderSettings()}
         <ConfigPageSection
           className="openbitfun-worktree-settings__management-section"
@@ -829,8 +825,8 @@ const WorktreeSettingsPage: React.FC = () => {
             className={[
               'openbitfun-worktree-settings__results',
               projectsLoading
-                && projectsInitialized
-                && 'openbitfun-worktree-settings__results--refreshing',
+              && projectsInitialized
+              && 'openbitfun-worktree-settings__results--refreshing',
             ].filter(Boolean).join(' ')}
             aria-busy={projectsLoading}
           >
@@ -850,7 +846,7 @@ const WorktreeSettingsPage: React.FC = () => {
             {renderProjects()}
           </div>
         </ConfigPageSection>
-      </ConfigPageContent>
+      </ConfigPageSectionStack>
 
       <ConfirmDialog
         open={deleteTarget !== null}
@@ -868,8 +864,8 @@ const WorktreeSettingsPage: React.FC = () => {
           : t('management.delete.action')}
         cancelText={t('management.delete.cancel')}
       />
-    </ConfigPageLayout>
+    </div>
   );
 };
 
-export default WorktreeSettingsPage;
+export default WorktreeSettingsSection;
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.appearance.ts
similarity index 75%
rename from src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.appearance.ts
index b1ad90d768..e127429114 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.appearance.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.appearance.ts
@@ -3,7 +3,7 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 export const applicationSettingsAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'application-settings',
   parts: [
-    { id: 'root' }, { id: 'content' }, { id: 'launchAtLogin' }, { id: 'preventSleep' }, { id: 'autoUpdate' },
+    { id: 'root' }, { id: 'launchAtLogin' }, { id: 'preventSleep' }, { id: 'autoUpdate' },
     { id: 'logging' }, { id: 'logPath' }, { id: 'terminal' },
     { id: 'windowBehavior' }, { id: 'notifications' },
   ],
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.presentation.test.ts
similarity index 66%
rename from src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.presentation.test.ts
index d07e7e9520..ea68739bb7 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.presentation.test.ts
@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 const source = readFileSync(
-  fileURLToPath(new URL('./ApplicationSettingsPages.tsx', import.meta.url)),
+  fileURLToPath(new URL('../application/GeneralSettingsPage.tsx', import.meta.url)),
   'utf8',
 );
 
@@ -25,9 +25,7 @@ describe('Application settings presentation', () => {
   });
 
   it('keeps the previous-exit notice outside the settings section surface', () => {
-    const loggingSection = source.match(
-      /function LoggingSection\(\)[\s\S]*?\r?\n}\r?\n\r?\nfunction TerminalSection/,
-    )?.[0] ?? '';
+    const loggingSection = readFileSync(fileURLToPath(new URL('../data/DiagnosticsSettingsPage.tsx', import.meta.url)), 'utf8');
     const noticeStart = loggingSection.indexOf(
       '{runtimeInfo?.previousUnexpectedExit?.detected && (',
     );
@@ -43,20 +41,20 @@ describe('Application settings presentation', () => {
     ).not.toContain('previousUnexpectedExit');
   });
 
-  it('keeps the command-shell fallback notice outside the terminal settings section', () => {
-    const terminalSection = source.match(
-      /function TerminalSection\(\)[\s\S]*?\r?\n}\r?\n\r?\nfunction WindowBehaviorSetting/,
-    )?.[0] ?? '';
-    const noticeStart = terminalSection.indexOf('{shouldShowCmdFallbackNotice && (');
+  it('integrates the command-shell fallback notice into the terminal section description', () => {
+    const terminalSection = readFileSync(fileURLToPath(new URL('../development/TerminalSettingsPage.tsx', import.meta.url)), 'utf8');
     const settingsSectionStart = terminalSection.indexOf('<ConfigPageSection');
     const settingsSectionEnd = terminalSection.indexOf('</ConfigPageSection>');
+    const sectionDescription = terminalSection.slice(
+      settingsSectionStart,
+      terminalSection.indexOf('<ConfigPageRow', settingsSectionStart),
+    );
 
-    expect(terminalSection).not.toBe('');
-    expect(noticeStart).toBeGreaterThanOrEqual(0);
-    expect(settingsSectionStart).toBeGreaterThan(noticeStart);
+    expect(settingsSectionStart).toBeGreaterThanOrEqual(0);
     expect(settingsSectionEnd).toBeGreaterThan(settingsSectionStart);
-    expect(
-      terminalSection.slice(settingsSectionStart, settingsSectionEnd),
-    ).not.toContain('cmdFallbackMessage');
+    expect(sectionDescription).toContain('description={shouldShowCmdFallbackNotice');
+    expect(sectionDescription).toContain("t('terminal.sections.terminalHintWithCmdFallback')");
+    expect(sectionDescription).toContain("t('terminal.sections.terminalHint')");
+    expect(terminalSection).not.toContain('<Alert');
   });
 });
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss b/src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss
rename to src/web-ui/src/app/scenes/settings/pages/shared/ApplicationSettings.scss
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.appearance.ts
similarity index 92%
rename from src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.appearance.ts
index 8bf07bed07..a53fe2bd2f 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.appearance.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.appearance.ts
@@ -4,10 +4,12 @@ export const runtimeSettingsAppearanceDescriptor: AppearanceSurfaceDescriptor =
   id: 'runtime-settings',
   parts: [
     { id: 'root' },
-    { id: 'content' },
+
     { id: 'control' },
     { id: 'petPicker' },
     { id: 'petChooser' },
+    { id: 'petSummary' },
+    { id: 'petStack' },
     { id: 'petTrigger' },
     { id: 'petList' },
     { id: 'petGroup' },
@@ -24,7 +26,7 @@ export const runtimeSettingsAppearanceDescriptor: AppearanceSurfaceDescriptor =
       attribute: 'data-openbitfun-view',
       values: [
         'pet',
-        'session-workspace',
+        'permissions',
         'execution',
         'browser-desktop-control',
       ],
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.presentation.test.ts
new file mode 100644
index 0000000000..8b27ad25c0
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.presentation.test.ts
@@ -0,0 +1,90 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+function readSource(relativePath: string): string {
+  return readFileSync(
+    fileURLToPath(new URL(relativePath, import.meta.url)),
+    'utf8',
+  ).replace(/\r\n?/g, '\n');
+}
+
+describe('Runtime settings information architecture', () => {
+  it('keeps concurrency input limits aligned with the host option schema', () => {
+    const source = readSource('../ai/ExecutionSettingsPage.tsx');
+    const registry = readSource('../../../../../../../../src/crates/contracts/product-domains/src/product_control_owner_registry.rs');
+    for (const [option, constant] of [
+      ['subagent-max-concurrency', 'SUBAGENT_MAX_CONCURRENCY_LIMIT'],
+      ['swarm-max-concurrency', 'SWARM_MAX_CONCURRENCY_LIMIT'],
+    ]) {
+      const maximum = registry.match(new RegExp(`"${option}",\\s*integer_range\\(1\\.0, (\\d+)\\.0\\)`))?.[1];
+      expect(maximum).toBeDefined();
+      expect(source).toContain(`const ${constant} = ${maximum};`);
+      expect(source).toContain(`max={${constant}}`);
+    }
+  });
+
+  it('gives permissions and execution independent owners without nested views', () => {
+    const execution = readSource('../ai/ExecutionSettingsPage.tsx');
+    const permissions = readSource('../ai/PermissionsSettingsPage.tsx');
+    const control = readSource('../tools/DeviceControlSettingsPage.tsx');
+    expect(execution).not.toContain('permissionPolicy.sectionTitle');
+    expect(execution).toContain('toolExecution.sectionTitle');
+    expect(permissions).toContain('permissionPolicy.sectionTitle');
+    expect(permissions).not.toContain('toolExecution.sectionTitle');
+    expect(control.indexOf("title={t('computerUse.sectionTitle')}")).toBeLessThan(control.indexOf("title={t('browserControl.sectionTitle')}"));
+    for (const source of [execution, permissions, control]) {
+      expect(source).not.toContain('SettingsViewPage');
+      expect(source).not.toContain('<Tabs');
+    }
+  });
+
+  it('keeps the pet gallery inside the shared disclosure with a current appearance summary', () => {
+    const source = readSource('../application/PetSettingsSection.tsx');
+    const styles = readSource('./RuntimeSettings.scss');
+
+    expect(source).toContain('className="openbitfun-runtime-settings__pet-gallery"');
+    expect(source).toContain('data-testid="companion-pet-card"');
+    expect(source).toContain('openbitfun-runtime-settings__pet-selected-mark');
+    expect(source).toContain('<Disclosure');
+    expect(source).toContain('open={isActive && companionPetListExpanded}');
+    expect(source).toContain('className="openbitfun-runtime-settings__pet-summary"');
+    expect(source).toContain('const hasLoadedPageDataRef = useRef(false);');
+    expect(source).toContain('const reloadCompanionPets = useCallback(async () => {');
+    expect(source).toContain("if (!isActive) return;");
+    expect(source.match(/await reloadCompanionPets\(\);/g)).toHaveLength(2);
+    expect(source).not.toContain('handleRefreshCompanionPets');
+    expect(source).not.toContain('companionPetsLoading');
+    expect(source).not.toContain('features.pet.refresh');
+    expect(source).toContain('const [companionPetListExpanded, setCompanionPetListExpanded] = useState(false);');
+    expect(source).not.toContain('openbitfun-runtime-settings__pet-expand-button');
+    expect(source).not.toContain('openbitfun-runtime-settings__pet-preview-popover');
+    expect(styles).toContain('grid-template-columns: repeat(3, minmax(0, 1fr))');
+    expect(styles).toContain('&__pet-card-preview');
+    expect(styles).toContain('&__pet-selected-mark');
+    expect(styles).toContain('border: 1px solid transparent;');
+    expect(styles).toContain('&__pet-card:hover,\n  &__pet-card:focus-within {\n    border-color: var(--openbitfun-color-border-default);');
+    expect(styles).not.toContain('&__pet-preview-popover');
+    expect(styles).toContain(":root[data-openbitfun-appearance-mode='light'] &");
+  });
+
+  it('uses the app confirmation owner before deleting an imported pet', () => {
+    const source = readSource('../application/PetSettingsSection.tsx');
+
+    expect(source).toContain("const confirmed = await confirmDanger(\n      t('features.pet.deleteConfirmTitle'),\n      t('features.pet.deleteConfirmBody'),");
+    expect(source).not.toContain("import { ask, open } from '@tauri-apps/plugin-dialog'");
+    expect(source).not.toContain("await ask(t('features.pet.deleteConfirmBody')");
+  });
+
+  it('keeps the desktop-control platform note aligned as a distinct card footer', () => {
+    const source = readSource('../tools/DeviceControlSettingsPage.tsx');
+    const styles = readSource('./RuntimeSettings.scss');
+
+    expect(source).toContain('className="openbitfun-runtime-settings__platform-note-icon"');
+    expect(source).toContain('className="openbitfun-runtime-settings__platform-note-copy"');
+    expect(source).not.toContain("padding: '8px 0 4px'");
+    expect(styles).toContain('padding: var(--openbitfun-space-3) var(--openbitfun-space-5);');
+    expect(styles).toContain('border-top: 1px solid var(--openbitfun-component-config-page-divider);');
+    expect(styles).toContain('padding-inline: var(--openbitfun-space-4);');
+  });
+});
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.scss
similarity index 63%
rename from src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
rename to src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.scss
index bb2a360a86..6b380d094d 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.scss
@@ -101,20 +101,138 @@
   &__pet-picker {
     width: 100%;
     min-width: 0;
+    padding: var(--openbitfun-space-4) var(--openbitfun-space-5);
+    border-top: 1px solid var(--openbitfun-component-config-page-divider);
   }
 
   &__pet-actions {
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-space-2);
+    justify-content: space-between;
+    gap: var(--openbitfun-space-4);
+    margin-block-end: var(--openbitfun-space-3);
     white-space: nowrap;
   }
 
+  &__pet-hint {
+    min-width: 0;
+    color: var(--openbitfun-color-content-secondary);
+    font-size: var(--openbitfun-type-support-font-size);
+    line-height: var(--openbitfun-type-support-line-height);
+    white-space: normal;
+  }
+
   &__pet-chooser {
     width: 100%;
     min-width: 0;
   }
 
+  &__pet-expanded-content {
+    padding-inline: 0;
+  }
+
+  &__pet-summary {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-4);
+    width: 100%;
+    min-width: 0;
+    min-height: 96px;
+    padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
+    border: 1px solid var(--openbitfun-color-border-default);
+    border-radius: var(--openbitfun-radius-md);
+    background: var(--openbitfun-color-surface-scene);
+    color: var(--openbitfun-color-content-primary);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+  }
+
+  &__pet-summary:hover {
+    background: var(--openbitfun-color-action-quiet-hover);
+  }
+
+  &__pet-summary:focus-visible {
+    outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+    outline-offset: var(--openbitfun-focus-offset);
+  }
+
+  &__pet-current-preview {
+    display: flex;
+    flex: 0 0 76px;
+    align-items: center;
+    justify-content: center;
+    height: 76px;
+    color: var(--openbitfun-color-content-muted);
+  }
+
+  &__pet-current-copy {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--openbitfun-space-1);
+    min-width: 0;
+
+    strong {
+      min-width: 0;
+      font-size: var(--openbitfun-type-label-selected-font-size);
+      font-weight: var(--openbitfun-type-label-selected-font-weight);
+      line-height: var(--openbitfun-type-label-selected-line-height);
+    }
+  }
+
+  &__pet-caption {
+    color: var(--openbitfun-color-content-secondary);
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-modifier-leading-snug-line-height);
+    white-space: nowrap;
+  }
+
+  &__pet-stack {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    padding-inline: var(--openbitfun-space-1);
+  }
+
+  &__pet-stack-card {
+    display: flex;
+    flex: 0 0 56px;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 64px;
+    border: 1px solid var(--openbitfun-color-border-default);
+    border-radius: var(--openbitfun-radius-sm);
+    background: var(--openbitfun-color-surface-scene);
+    transform: rotate(-6deg);
+
+    & + & {
+      margin-inline-start: -28px;
+      transform: rotate(-2deg);
+    }
+
+    &:last-child {
+      transform: rotate(4deg);
+    }
+  }
+
+  &__pet-stack-card &__pet-preview-sprite {
+    width: 48px;
+    height: 54px;
+  }
+
+  &__pet-summary-chevron {
+    flex: 0 0 auto;
+    color: var(--openbitfun-color-content-muted);
+    transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+  }
+
+  &__pet-summary[aria-expanded='true'] &__pet-summary-chevron {
+    transform: rotate(180deg);
+  }
+
   &__pet-gallery {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -223,9 +341,13 @@
     image-rendering: pixelated;
   }
 
-  &__pet-card:hover &__pet-preview-sprite,
-  &__pet-card:focus-within &__pet-preview-sprite {
-    animation: openbitfun-config-pet-preview 1.2s steps(6) infinite;
+  @media (prefers-reduced-motion: no-preference) {
+    &__pet-card:hover &__pet-preview-sprite,
+    &__pet-card:focus-within &__pet-preview-sprite,
+    &__pet-summary:hover &__pet-current-preview &__pet-preview-sprite,
+    &__pet-summary:focus-visible &__pet-current-preview &__pet-preview-sprite {
+      animation: openbitfun-config-pet-preview 1.2s steps(6) infinite;
+    }
   }
 
   &__pet-selected-mark {
@@ -261,6 +383,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .openbitfun-runtime-settings {
+    &__pet-summary,
+    &__pet-summary-chevron,
     &__pet-card-delete,
     &__pet-preview-sprite {
       animation: none;
@@ -294,8 +418,12 @@
       padding-inline: var(--openbitfun-space-4);
     }
 
-    &__pet-actions {
-      justify-content: flex-start;
+    &__pet-summary {
+      gap: var(--openbitfun-space-2);
+    }
+
+    &__pet-stack-card:nth-child(n + 2) {
+      display: none;
     }
 
     &__pet-gallery {
@@ -308,6 +436,24 @@
   }
 }
 
+@container config-panel (max-width: 420px) {
+  .openbitfun-runtime-settings {
+    &__pet-stack {
+      display: none;
+    }
+
+    &__pet-current-preview {
+      flex-basis: 56px;
+      height: 64px;
+    }
+
+    &__pet-current-preview &__pet-preview-sprite {
+      width: 56px;
+      height: 63px;
+    }
+  }
+}
+
 @media (hover: none) {
   .openbitfun-runtime-settings__pet-card-delete {
     opacity: 1;
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.test.tsx b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
similarity index 83%
rename from src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
index 1caaeddc5e..dbabc3cec9 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
@@ -2,7 +2,9 @@
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { BrowserDesktopControlSettingsPage, ExecutionSettingsPage, SessionWorkspaceSettingsPage } from './RuntimeSettingsPages';
+import DeviceControlSettingsPage from '../tools/DeviceControlSettingsPage';
+import ExecutionSettingsPage from '../ai/ExecutionSettingsPage';
+import WorkspaceSearchSection from '../development/WorkspaceSearchSection';
 
 const mocks = vi.hoisted(() => {
   Object.defineProperty(window, '__TAURI__', { configurable: true, value: {} });
@@ -12,30 +14,31 @@ const mocks = vi.hoisted(() => {
     workspace: null as { workspaceKind: string } | null,
   };
 });
+vi.mock('@/infrastructure/config/hooks', () => ({ useAIExperienceSettings: () => ({ settings: { enable_workspace_search: true }, isLoading: false, error: null, reload: vi.fn() }) }));
 vi.mock('@/infrastructure/api', () => ({ globalAPI: {}, workspaceAPI: {} }));
 vi.mock('@/infrastructure/contexts/WorkspaceContext', () => ({ useCurrentWorkspace: () => ({ workspace: mocks.workspace }) }));
 vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: mocks.t }) }));
 vi.mock('@/infrastructure/i18n', () => ({ i18nService: { formatNumber: String } }));
 vi.mock('@/infrastructure/api/service-api/ApiClient', () => ({ api: { invoke: mocks.invoke } }));
 vi.mock('@/infrastructure/api/service-api/SystemAPI', () => ({ systemAPI: { getSystemInfo: async () => ({ platform: 'macos' }) } }));
-vi.mock('../services/ConfigManager', () => ({ configManager: {
+vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: {
   getConfig: mocks.getConfig, getOptionalConfig: async () => true, setConfig: mocks.setConfig,
 } }));
-vi.mock('../hooks/useComputerUseEnabled', () => ({ useComputerUseEnabled: () => ({ computerUseEnabled: false, setComputerUseEnabled: mocks.setEnabled }) }));
-vi.mock('../services/AIExperienceConfigService', () => ({ aiExperienceConfigService: { getSettingsAsync: async () => ({ enable_workspace_search: true }) } }));
-vi.mock('../services/AgentCompanionPetService', () => ({ DEFAULT_AGENT_COMPANION_PET: 'default' }));
-vi.mock('../services/PermissionConfigService', async (original) => ({
-  ...await original<typeof import('../services/PermissionConfigService')>(),
+vi.mock('../../../../../infrastructure/config/hooks/useComputerUseEnabled', () => ({ useComputerUseEnabled: () => ({ computerUseEnabled: false, setComputerUseEnabled: mocks.setEnabled }) }));
+vi.mock('../../../../../infrastructure/config/services/AIExperienceConfigService', () => ({ aiExperienceConfigService: { getSettingsAsync: async () => ({ enable_workspace_search: true }) } }));
+vi.mock('../../../../../infrastructure/config/services/AgentCompanionPetService', () => ({ DEFAULT_AGENT_COMPANION_PET: 'default' }));
+vi.mock('../../../../../infrastructure/config/services/PermissionConfigService', async (original) => ({
+  ...await original<typeof import('../../../../../infrastructure/config/services/PermissionConfigService')>(),
   permissionConfigService: { getConfig: async () => ({}) },
 }));
 vi.mock('@/infrastructure/peer-device/peerDeviceContextState', () => ({ usePeerDeviceModeOptional: () => null }));
 vi.mock('@/infrastructure/confirm-dialog', () => ({ confirmDanger: vi.fn() }));
 vi.mock('@/shared/notification-system', () => ({ useNotification: () => ({}), notificationService: { dismiss: vi.fn(), success: vi.fn(), error: mocks.error, info: vi.fn(), warning: vi.fn() } }));
-vi.mock('./GlobalPermissionRulesDialog', () => ({ GlobalPermissionRulesDialog: () => null }));
-vi.mock('./SessionTitleConfig', () => ({ default: () => null }));
-vi.mock('./DefaultHarnessConfig', () => ({ default: () => <div>default-harness-config</div> }));
-vi.mock('./ReviewCapacitySection', () => ({ default: () => null }));
-vi.mock('./ToolJsonRepairSection', () => ({ default: () => null }));
+vi.mock('../../../../../infrastructure/config/components/GlobalPermissionRulesDialog', () => ({ GlobalPermissionRulesDialog: () => null }));
+vi.mock('../ai/SessionTitleSection', () => ({ default: () => null }));
+vi.mock('../ai/DefaultHarnessSection', () => ({ default: () => <div>default-harness-config</div> }));
+vi.mock('../ai/ReviewCapacitySection', () => ({ default: () => null }));
+vi.mock('../ai/ToolJsonRepairSection', () => ({ default: () => null }));
 vi.mock('@openbitfun/ui', async (original) => ({
   ...await original<typeof import('@openbitfun/ui')>(),
   Select: ({ value, options, disabled }: { value: string; options: Array<{ value: string; label: string }>; disabled: boolean }) => (
@@ -48,7 +51,7 @@ let status = { ...readyStatus };
 let container: HTMLDivElement;
 let root: Root;
 const button = (label: string) => Array.from(container.querySelectorAll('button')).find(el => el.textContent === label || el.getAttribute('aria-label') === label)!;
-const render = async () => { await act(async () => root.render(<BrowserDesktopControlSettingsPage />)); };
+const render = async () => { await act(async () => root.render(<DeviceControlSettingsPage />)); };
 
 beforeEach(() => {
   mocks.workspace = null;
@@ -172,8 +175,7 @@ describe('Browser and desktop control settings', () => {
 describe('Flashgrep settings availability', () => {
   it.each(['normal', 'remote'])('only exposes indexing for local workspaces (%s)', async (workspaceKind) => {
     mocks.workspace = { workspaceKind };
-    await act(async () => root.render(<SessionWorkspaceSettingsPage />));
-    expect(container.textContent).toContain('default-harness-config');
+    await act(async () => root.render(<WorkspaceSearchSection />));
     expect(container.textContent?.includes('features.workspaceSearch.enable')).toBe(workspaceKind === 'normal');
   });
 });
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPage.tsx
new file mode 100644
index 0000000000..cfa3691ce4
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPage.tsx
@@ -0,0 +1,26 @@
+import {
+  ConfigPageContent,
+  ConfigPageHeader,
+  ConfigPageLayout,
+} from '@/infrastructure/config/components/common';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { getSettingsPageManifest } from '../../settingsRegistry';
+import type { SettingsPageId } from '../../settingsTypes';
+
+interface SettingsPageProps extends React.HTMLAttributes<HTMLDivElement> {
+  pageId: SettingsPageId;
+  children: React.ReactNode;
+}
+
+/** One header and scroll owner per settings destination; children are inline sections. */
+export function SettingsPage({ pageId, children, ...props }: SettingsPageProps) {
+  const { t } = useTranslation('settings');
+  const page = getSettingsPageManifest(pageId);
+  return (
+    <ConfigPageLayout {...props}>
+      <ConfigPageHeader title={t(page.labelKey)} subtitle={t(page.descriptionKey)} />
+      <ConfigPageContent>{children}</ConfigPageContent>
+    </ConfigPageLayout>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPageComposition.test.ts b/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPageComposition.test.ts
new file mode 100644
index 0000000000..f63a9b3fd9
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/SettingsPageComposition.test.ts
@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const source = (path: string) => readFileSync(new URL(path, import.meta.url), 'utf8');
+
+describe('merged settings pages', () => {
+  it.each([
+    ['../application/PetAssistantSettingsPage.tsx', ['../application/PetSettingsSection.tsx', '../application/RealtimeVoiceSettingsSection.tsx']],
+    ['../application/InputSettingsPage.tsx', ['../application/VoiceSettingsSection.tsx', '../application/KeyboardShortcutsSection.tsx']],
+    ['../ai/SessionMemorySettingsPage.tsx', ['../ai/DefaultHarnessSection.tsx', '../ai/SessionTitleSection.tsx', '../ai/MemorySettingsSection.tsx']],
+    ['../development/WorkspaceGitSettingsPage.tsx', ['../development/WorkspaceSearchSection.tsx', '../development/GitCommitSettingsSection.tsx', '../development/WorktreeSettingsSection.tsx']],
+    ['../tools/AutomationSettingsPage.tsx', ['../tools/QuickActionsSettingsSection.tsx', '../tools/HooksSettingsSection.tsx']],
+  ])('keeps one page header and scroll owner for %s', (page, sections) => {
+    expect(source(page).match(/<SettingsPage\b/g)).toHaveLength(1);
+    for (const path of [page, ...sections]) {
+      expect(source(path)).not.toMatch(/<(?:Tabs|TabPane|ConfigPageLayout|ConfigPageContent|ConfigPageHeader|ScrollArea)\b/);
+    }
+    const shared = source('./SettingsPage.tsx');
+    expect(shared.match(/<ConfigPageLayout\b/g)).toHaveLength(1);
+    expect(shared.match(/<ConfigPageHeader\b/g)).toHaveLength(1);
+    expect(shared.match(/<ConfigPageContent\b/g)).toHaveLength(1);
+  });
+});
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.test.tsx b/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.test.tsx
new file mode 100644
index 0000000000..64bb8c29e4
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.test.tsx
@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, expect, it, vi } from 'vitest';
+import { useSettingsStore } from '../../settingsStore';
+import { useSettingsSectionAnchor } from './useSettingsSectionAnchor';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  useSettingsStore.setState(useSettingsStore.getInitialState());
+});
+
+it('aligns a deep link after sibling loads and yields scroll control on user interaction', () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  let resize: () => void = () => {};
+  const disconnect = vi.fn();
+  vi.stubGlobal('ResizeObserver', class {
+    constructor(callback: () => void) { resize = callback; }
+    observe() {}
+    disconnect() { disconnect(); }
+  });
+  const scroll = vi.fn();
+  function Section() {
+    const id = useSettingsSectionAnchor('shortcuts');
+    return <div id={id} ref={element => { if (element) element.scrollIntoView = scroll; }} />;
+  }
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  useSettingsStore.getState().openDestination({ pageId: 'application.input', sectionId: 'shortcuts' });
+  try {
+    act(() => root.render(<div className="openbitfun-config-page-layout"><div className="openbitfun-config-page-content__inner"><Section /></div></div>));
+    expect(scroll).toHaveBeenCalledTimes(1);
+    resize();
+    expect(scroll).toHaveBeenCalledTimes(2);
+    container.querySelector('.openbitfun-config-page-layout')!.dispatchEvent(new Event('wheel'));
+    resize();
+    expect(scroll).toHaveBeenCalledTimes(2);
+    expect(disconnect).toHaveBeenCalled();
+    act(() => useSettingsStore.getState().openDestination({ pageId: 'application.input', sectionId: 'shortcuts' }));
+    expect(scroll).toHaveBeenCalledTimes(3);
+  } finally {
+    act(() => root.unmount());
+    container.remove();
+  }
+});
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.ts b/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.ts
new file mode 100644
index 0000000000..1a37fd92e2
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/useSettingsSectionAnchor.ts
@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'react';
+import { useSettingsStore } from '../../settingsStore';
+import type { SettingsSectionId } from '../../settingsTypes';
+
+/** Search and legacy links point into the existing page, without opening another view. */
+export function useSettingsSectionAnchor(sectionId: SettingsSectionId, ready = true): string {
+  const target = useSettingsStore(state => state.activeSectionId);
+  const requestId = useSettingsStore(state => state.navigationRequestId);
+  const id = `settings-section-${sectionId}`;
+
+  useLayoutEffect(() => {
+    if (!ready || target !== sectionId) return;
+    const anchor = document.getElementById(id);
+    if (!anchor) return;
+    const content = anchor.closest('.openbitfun-config-page-content__inner');
+    let following = true;
+    const align = () => {
+      if (following) anchor.scrollIntoView?.({ block: 'start', inline: 'nearest' });
+    };
+    // Preceding sections can finish loading later. Keep the requested section
+    // aligned until the user starts interacting with the page.
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(align);
+    const stop = () => { following = false; observer?.disconnect(); };
+    if (content) observer?.observe(content);
+    align();
+    const page = anchor.closest('.openbitfun-config-page-layout');
+    const events = ['wheel', 'pointerdown', 'touchstart', 'keydown'] as const;
+    events.forEach(event => page?.addEventListener(event, stop, { passive: true }));
+    return () => {
+      observer?.disconnect();
+      events.forEach(event => page?.removeEventListener(event, stop));
+    };
+  }, [id, ready, requestId, sectionId, target]);
+
+  return id;
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/appearance.ts b/src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.appearance.ts
similarity index 100%
rename from src/web-ui/src/app/scenes/settings/pages/appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.appearance.ts
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.tsx
new file mode 100644
index 0000000000..0111b5eadb
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/AutomationSettingsPage.tsx
@@ -0,0 +1,16 @@
+import { SettingsPage } from '../shared/SettingsPage';
+import HooksSettingsSection from './HooksSettingsSection';
+import QuickActionsSettingsSection from './QuickActionsSettingsSection';
+
+export default function AutomationSettingsPage() {
+  return (
+    <SettingsPage pageId="tools.automation" data-openbitfun-component="automation-settings-page" data-openbitfun-part="root">
+      <div data-openbitfun-component="automation-settings-page" data-openbitfun-part="quickActions">
+        <QuickActionsSettingsSection />
+      </div>
+      <div data-openbitfun-component="automation-settings-page" data-openbitfun-part="hooks">
+        <HooksSettingsSection />
+      </div>
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/DeviceControlSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/DeviceControlSettingsPage.tsx
new file mode 100644
index 0000000000..167b71b386
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/DeviceControlSettingsPage.tsx
@@ -0,0 +1,825 @@
+import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
+import { api } from '@/infrastructure/api/service-api/ApiClient';
+import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
+import {
+  ConfigLoadingState,
+  ConfigMessage,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigRefreshButton,
+  ConfigRetryState,
+} from '@/infrastructure/config/components/common';
+import { useComputerUseEnabled } from '@/infrastructure/config/hooks/useComputerUseEnabled';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { i18nService } from '@/infrastructure/i18n';
+import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogHeading,
+  DialogTitle,
+  Icon,
+  Select,
+  StatusPill,
+  Switch,
+  type ComboboxOption
+} from '@openbitfun/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingsPage } from '../shared/SettingsPage';
+const log = createLogger('DeviceControlSettingsPage');
+
+const IS_TAURI_DESKTOP = typeof window !== 'undefined' && '__TAURI__' in window;
+
+function isPeerUnsupportedBrowserControlError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  return /is local-only and cannot run on peer|is not supported on CLI peer host/i.test(message);
+}
+
+type ComputerUseStatusPayload = {
+  computerUseEnabled: boolean;
+  accessibilityGranted: boolean;
+  screenCaptureGranted: boolean;
+  platformNote: string | null;
+};
+
+type BrowserControlLaunchResponse = {
+  success: boolean;
+  status: string;
+  message: string | null;
+  browserKind: string;
+  setupUrl?: string;
+};
+
+type BrowserControlDisconnectResponse = {
+  success: boolean;
+  status: string;
+  browserKind: string;
+};
+
+type BrowserControlBrowserOption = {
+  value: string;
+  label: string;
+  installed: boolean;
+};
+
+function browserSetupUrlFallback(browser: string): string {
+  const normalized = browser.toLowerCase();
+  if (normalized.includes('edge')) return 'edge://inspect/#remote-debugging';
+  if (normalized.includes('chrome')) return 'chrome://inspect/#remote-debugging';
+  return '';
+}
+
+const DEFAULT_BROWSER_CONTROL_BROWSER = 'default';
+
+const DeviceControlSettingsPage: React.FC = () => {
+  const { t } = useTranslation('settings/runtime');
+
+  const { t: tTools } = useTranslation('settings/agentic-tools');
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [loadError, setLoadError] = useState(false);
+
+  const hasLoadedPageDataRef = useRef(false);
+
+  const { computerUseEnabled, setComputerUseEnabled } = useComputerUseEnabled();
+
+  const peerDevice = usePeerDeviceModeOptional();
+
+  const peerModeActive = peerDevice?.peerMode.active === true;
+
+  const [peerBrowserControlUnsupported, setPeerBrowserControlUnsupported] = useState(false);
+
+  const [computerUseAccess, setComputerUseAccess] = useState(false);
+
+  const [computerUseScreen, setComputerUseScreen] = useState(false);
+
+  const [computerUseBusy, setComputerUseBusy] = useState(false);
+
+  const [computerUseStatusLoading, setComputerUseStatusLoading] = useState(false);
+
+  const [computerUseStatusError, setComputerUseStatusError] = useState(false);
+
+  const [computerUsePlatformNote, setComputerUsePlatformNote] = useState<string | null>(null);
+
+  const [browserCdpAvailable, setBrowserCdpAvailable] = useState(false);
+
+  const [browserReady, setBrowserReady] = useState(false);
+
+  const [browserAutoConnectOnStartup, setBrowserAutoConnectOnStartup] = useState(false);
+
+  const [browserDefaultCdpSupported, setBrowserDefaultCdpSupported] = useState(false);
+
+  const [browserDefaultCdpEnabled, setBrowserDefaultCdpEnabled] = useState(false);
+
+  const [browserSetupUrl, setBrowserSetupUrl] = useState('');
+
+  const [browserKind, setBrowserKind] = useState('');
+
+  const [browserVersion, setBrowserVersion] = useState<string | null>(null);
+
+  const [browserPageCount, setBrowserPageCount] = useState(0);
+
+  const [browserOptions, setBrowserOptions] = useState<BrowserControlBrowserOption[]>([]);
+
+  const [preferredBrowser, setPreferredBrowser] = useState(DEFAULT_BROWSER_CONTROL_BROWSER);
+
+  const [browserControlBusy, setBrowserControlBusy] = useState(false);
+
+  const [browserStatusLoading, setBrowserStatusLoading] = useState(false);
+
+  const [browserStatusError, setBrowserStatusError] = useState(false);
+
+  const [platform, setPlatform] = useState<string>('');
+
+  const [browserRestartPrompt, setBrowserRestartPrompt] = useState<BrowserControlLaunchResponse | null>(null);
+
+  const refreshComputerUseStatus = useCallback(async (): Promise<boolean> => {
+    if (!IS_TAURI_DESKTOP) return false;
+    setComputerUseStatusLoading(true);
+    setComputerUseStatusError(false);
+    try {
+      const s = await api.invoke<ComputerUseStatusPayload>('computer_use_get_status');
+      setPeerBrowserControlUnsupported(false);
+      setComputerUseEnabled(s.computerUseEnabled);
+      setComputerUseAccess(s.accessibilityGranted);
+      setComputerUseScreen(s.screenCaptureGranted);
+      setComputerUsePlatformNote(s.platformNote);
+      return true;
+    } catch (error) {
+      if (isPeerUnsupportedBrowserControlError(error)) {
+        setPeerBrowserControlUnsupported(true);
+        setComputerUseStatusError(false);
+        return false;
+      }
+      log.error('computer_use_get_status failed', error);
+      setComputerUseStatusError(true);
+      return false;
+    } finally {
+      setComputerUseStatusLoading(false);
+    }
+  }, [setComputerUseEnabled]);
+
+  const refreshBrowserControlStatus = useCallback(async () => {
+    if (!IS_TAURI_DESKTOP) return;
+    setBrowserStatusLoading(true);
+    setBrowserStatusError(false);
+    try {
+      const [s, browsers] = await Promise.all([
+        api.invoke<{
+          cdpAvailable: boolean;
+          defaultCdpSupported: boolean;
+          defaultCdpEnabled: boolean;
+          setupUrl?: string;
+          browserReady: boolean;
+          browserKind: string;
+          browserVersion: string | null;
+          port: number;
+          pageCount: number;
+        }>('browser_control_get_status', { request: { port: 9222 } }),
+        api.invoke<{ options: BrowserControlBrowserOption[] }>('browser_control_list_browsers'),
+      ]);
+      setPeerBrowserControlUnsupported(false);
+      setBrowserCdpAvailable(s.cdpAvailable);
+      setBrowserDefaultCdpSupported(s.defaultCdpSupported);
+      setBrowserDefaultCdpEnabled(s.defaultCdpEnabled);
+      setBrowserSetupUrl(s.setupUrl ?? browserSetupUrlFallback(s.browserKind));
+      setBrowserReady(s.browserReady);
+      setBrowserKind(s.browserKind);
+      setBrowserVersion(s.browserVersion);
+      setBrowserPageCount(s.pageCount);
+      setBrowserOptions(browsers.options);
+    } catch (error) {
+      if (isPeerUnsupportedBrowserControlError(error)) {
+        setPeerBrowserControlUnsupported(true);
+        setBrowserStatusError(false);
+      } else {
+        setBrowserStatusError(true);
+        log.error('browser_control_get_status failed', error);
+      }
+    } finally {
+      setBrowserStatusLoading(false);
+    }
+  }, []);
+
+  const renderedPeerDeviceId = peerDevice?.peerMode.active
+    ? peerDevice.peerMode.deviceId
+    : null;
+
+  const handleComputerUseEnabledChange = async (checked: boolean) => {
+    setComputerUseBusy(true);
+    setComputerUseEnabled(checked);
+    try {
+      await configManager.setConfig('ai.computer_use_enabled', checked);
+      const { globalEventBus } = await import('@/infrastructure/event-bus');
+      globalEventBus.emit('mode:config:updated');
+      notificationService.success(
+        checked ? t('messages.saveSuccess') : t('messages.saveSuccess'),
+        { duration: 2000 }
+      );
+      if (checked) {
+        // Proactively surface the OS permission prompt (macOS Accessibility /
+        // Screen Recording) the moment the user opts in, instead of waiting
+        // for the first agent tool call to fail with a permission error.
+        try {
+          await api.invoke('computer_use_request_permissions');
+        } catch (permError) {
+          log.warn('computer_use_request_permissions failed', permError);
+        }
+      }
+      await refreshComputerUseStatus();
+    } catch (error) {
+      log.error('Failed to save computer_use_enabled', error);
+      notificationService.error(t('messages.saveFailed'));
+      setComputerUseEnabled(!checked);
+    } finally {
+      setComputerUseBusy(false);
+    }
+  };
+
+  const handleComputerUseOpenSettings = async (pane: 'accessibility' | 'screen_capture') => {
+    try {
+      await api.invoke('computer_use_open_system_settings', { request: { pane } });
+    } catch (error) {
+      log.error('computer_use_open_system_settings failed', error);
+      notificationService.error(t('messages.saveFailed'));
+    }
+  };
+
+  const handleBrowserControlBrowserChange = async (value: string | number) => {
+    const nextValue = String(value || DEFAULT_BROWSER_CONTROL_BROWSER);
+    const previousValue = preferredBrowser;
+    setPreferredBrowser(nextValue);
+    setBrowserControlBusy(true);
+    try {
+      await configManager.setConfig(
+        'ai.browser_control_preferred_browser',
+        nextValue === DEFAULT_BROWSER_CONTROL_BROWSER ? '' : nextValue,
+      );
+      await refreshBrowserControlStatus();
+    } catch (error) {
+      log.error('Failed to save browser_control_preferred_browser', error);
+      setPreferredBrowser(previousValue);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
+      );
+    } finally {
+      setBrowserControlBusy(false);
+    }
+  };
+
+  const handleBrowserAutoConnectChange = async (checked: boolean) => {
+    const previousValue = browserAutoConnectOnStartup;
+    setBrowserAutoConnectOnStartup(checked);
+    try {
+      await configManager.setConfig('ai.browser_control_auto_connect_on_startup', checked);
+    } catch (error) {
+      log.error('Failed to save browser_control_auto_connect_on_startup', error);
+      setBrowserAutoConnectOnStartup(previousValue);
+      notificationService.error(
+        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  };
+
+  const presentBrowserControlLaunchResult = (result: BrowserControlLaunchResponse) => {
+    const setupUrl = result.setupUrl
+      || browserSetupUrl
+      || browserSetupUrlFallback(result.browserKind);
+    if (result.success) {
+      notificationService.success(
+        t('browserControl.connectSuccess', { browser: result.browserKind }),
+        { duration: 3000 }
+      );
+    } else if (result.status === 'requires_user_profile_setup') {
+      notificationService.info(
+        t('browserControl.userProfileSetupRequired', {
+          browser: result.browserKind,
+          url: setupUrl,
+        }),
+        { duration: 12000 }
+      );
+    } else if (result.status === 'requires_manual_user_profile_setup') {
+      // The platform could not open the settings page, so the URL itself is
+      // the actionable part of the message.
+      notificationService.info(
+        t('browserControl.userProfileSetupManual', {
+          browser: result.browserKind,
+          url: setupUrl,
+        }),
+        { duration: 20000 }
+      );
+    } else if (result.status === 'user_profile_connection_failed') {
+      notificationService.info(
+        t('browserControl.userProfileConnectionFailed', { browser: result.browserKind }),
+        { duration: 12000 }
+      );
+    } else if (result.status === 'needs_restart') {
+      setBrowserRestartPrompt(result);
+    } else if (result.message) {
+      notificationService.info(result.message, { duration: 8000 });
+    }
+  };
+
+  const handleBrowserControlLaunch = async () => {
+    setBrowserControlBusy(true);
+    try {
+      const result = await api.invoke<BrowserControlLaunchResponse>('browser_control_launch', { request: { port: 9222 } });
+      presentBrowserControlLaunchResult(result);
+      await refreshBrowserControlStatus();
+    } catch (error) {
+      log.error('browser_control_launch failed', error);
+      notificationService.error(t('browserControl.connectFailed'));
+    } finally {
+      setBrowserControlBusy(false);
+    }
+  };
+
+  const handleBrowserControlEnableDefaultCdp = async () => {
+    setBrowserControlBusy(true);
+    const setupUrl = browserSetupUrl || browserSetupUrlFallback(browserKind);
+    const promptNotificationId = notificationService.info(
+      t(
+        browserDefaultCdpEnabled
+          ? 'browserControl.defaultCdpConnectPrompt'
+          : 'browserControl.defaultCdpEnablePrompt',
+        { browser: browserKind, url: setupUrl },
+      ),
+      { duration: 0 },
+    );
+    try {
+      const result = await api.invoke<BrowserControlLaunchResponse>(
+        'browser_control_enable_default_cdp',
+        { request: { port: 9222 } },
+      );
+      notificationService.dismiss(promptNotificationId);
+      presentBrowserControlLaunchResult(result);
+      await refreshBrowserControlStatus();
+    } catch (error) {
+      log.error('browser_control_enable_default_cdp failed', error);
+      notificationService.error(t('browserControl.connectFailed'));
+    } finally {
+      notificationService.dismiss(promptNotificationId);
+      setBrowserControlBusy(false);
+    }
+  };
+
+  const handleBrowserControlDisconnect = async () => {
+    setBrowserControlBusy(true);
+    try {
+      const result = await api.invoke<BrowserControlDisconnectResponse>(
+        'browser_control_disconnect',
+        { request: { port: 9222 } },
+      );
+      notificationService.success(
+        t('browserControl.disconnectSuccess', { browser: result.browserKind }),
+        { duration: 4000 },
+      );
+      await refreshBrowserControlStatus();
+    } catch (error) {
+      log.error('browser_control_disconnect failed', error);
+      notificationService.error(t('browserControl.disconnectFailed'));
+    } finally {
+      setBrowserControlBusy(false);
+    }
+  };
+
+  const handleBrowserControlRestart = async () => {
+    if (!browserRestartPrompt) return;
+    setBrowserControlBusy(true);
+    try {
+      const result = await api.invoke<BrowserControlLaunchResponse>('browser_control_restart_with_cdp', {
+        request: { port: 9222 },
+      });
+      if (result.success) {
+        notificationService.success(
+          t('browserControl.restartSuccess', { browser: result.browserKind }),
+          { duration: 3000 }
+        );
+        setBrowserRestartPrompt(null);
+      } else if (result.message) {
+        notificationService.info(result.message, { duration: 8000 });
+      }
+      await refreshBrowserControlStatus();
+    } catch (error) {
+      log.error('browser_control_restart_with_cdp failed', error);
+      notificationService.error(t('browserControl.restartFailed'));
+    } finally {
+      setBrowserControlBusy(false);
+    }
+  };
+
+  const computerUseAccessLabel = computerUseStatusLoading
+    ? t('loading.text')
+    : computerUseStatusError ? t('computerUse.statusUnavailable')
+      : computerUseAccess ? t('computerUse.granted') : t('computerUse.notGranted');
+
+  const computerUseScreenLabel = computerUseStatusLoading
+    ? t('loading.text')
+    : computerUseStatusError ? t('computerUse.statusUnavailable')
+      : computerUseScreen ? t('computerUse.granted') : t('computerUse.notGranted');
+
+  const computerUsePlatformMessage = computerUsePlatformNote
+    ? platform === 'macos'
+      ? t('computerUse.platformNotes.macos')
+      : platform === 'windows'
+        ? t('computerUse.platformNotes.windows')
+        : platform === 'linux'
+          ? t('computerUse.platformNotes.linux')
+          : t('computerUse.platformNotes.generic')
+    : null;
+
+  const browserStatusLabel = browserStatusLoading
+    ? t('loading.text')
+    : browserStatusError
+      ? t('browserControl.statusUnavailable')
+      : browserCdpAvailable
+        ? t('browserControl.connected')
+        : browserReady
+          ? t('browserControl.ready')
+          : t('browserControl.notConnected');
+
+  const browserStatusDescription = !browserStatusLoading && !browserStatusError
+    ? browserCdpAvailable
+      ? `${browserKind} · ${i18nService.formatNumber(browserPageCount)} ${t('browserControl.tabs')}`
+      : browserReady ? t('browserControl.readyNotConnected') : undefined
+    : undefined;
+
+  const browserSelectOptions: ComboboxOption[] = browserOptions.map((option) => {
+    const label = option.value === DEFAULT_BROWSER_CONTROL_BROWSER
+      ? t('browserControl.defaultBrowser')
+      : option.label;
+    return {
+      value: option.value,
+      label: option.installed ? label : `${label} (${t('browserControl.notInstalled')})`,
+      disabled: !option.installed,
+    };
+  });
+
+  const loadPageData = useCallback(async () => {
+    const isInitialLoad = !hasLoadedPageDataRef.current;
+    if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
+    try {
+      const [
+        computerUseCfg,
+        browserControlPreferredBrowser,
+        browserControlAutoConnect,
+      ] = await Promise.all([
+        configManager.getConfig<boolean>('ai.computer_use_enabled'),
+        configManager.getConfig<string>('ai.browser_control_preferred_browser'),
+        configManager.getConfig<boolean>('ai.browser_control_auto_connect_on_startup'),
+      ]);
+      if (!IS_TAURI_DESKTOP) {
+        setComputerUseEnabled(computerUseCfg ?? false);
+      }
+      setPreferredBrowser(browserControlPreferredBrowser || DEFAULT_BROWSER_CONTROL_BROWSER);
+      setBrowserAutoConnectOnStartup(browserControlAutoConnect === true);
+      hasLoadedPageDataRef.current = true;
+    } catch (error) {
+      log.error('Failed to load settings page data', { error });
+      if (isInitialLoad) setLoadError(true);
+    } finally {
+      if (isInitialLoad) setIsLoading(false);
+    }
+  }, [setComputerUseEnabled]);
+  useEffect(() => {
+
+    void loadPageData();
+  }, [loadPageData]);
+  useEffect(() => {
+    if (!IS_TAURI_DESKTOP) return;
+    setPeerBrowserControlUnsupported(false);
+    void refreshComputerUseStatus();
+    void refreshBrowserControlStatus();
+    void systemAPI.getSystemInfo()
+      .then(info => setPlatform(info.platform || ''))
+      .catch(error => log.warn('getSystemInfo failed', error));
+  }, [peerModeActive, renderedPeerDeviceId, refreshComputerUseStatus, refreshBrowserControlStatus]);
+
+  return (
+    <SettingsPage pageId="tools.desktop-control" className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view="browser-desktop-control">
+      {loadError ? (
+        <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void loadPageData()} />
+      ) : isLoading ? (
+        <ConfigLoadingState label={t('loading.text')} />
+      ) : (
+        <>
+
+          {/* ── Computer use (desktop) ─────────────────────────────── */}
+          <ConfigPageSection
+            title={t('computerUse.sectionTitle')}
+            description={
+              IS_TAURI_DESKTOP ? t('computerUse.sectionDescription') : t('computerUse.desktopOnly')
+            }
+            extra={IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
+              <ConfigRefreshButton
+                tooltip={t('computerUse.refreshStatus')}
+                loading={computerUseStatusLoading}
+                disabled={computerUseBusy}
+                onClick={() => void refreshComputerUseStatus()}
+              />
+            ) : undefined}
+          >
+            {IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
+              <>
+                <ConfigMessage
+                  message={computerUseStatusError
+                    ? { type: 'error', text: t('computerUse.statusLoadFailed') }
+                    : null}
+                />
+                <ConfigPageRow label={t('computerUse.enable')} description={t('computerUse.enableDesc')} align="center">
+                  <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                    <Switch
+                      checked={computerUseEnabled}
+                      onChange={(e) => handleComputerUseEnabledChange(e.target.checked)}
+                      disabled={computerUseBusy || computerUseStatusLoading || computerUseStatusError}
+                    />
+                  </div>
+                </ConfigPageRow>
+                <ConfigPageRow
+                  label={t('computerUse.accessibility')}
+                  description={t('computerUse.accessibilityDesc')}
+                  align="center"
+                  className="openbitfun-runtime-settings__status-row"
+                >
+                  <div
+                    className="openbitfun-runtime-settings__status-actions"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="control"
+                  >
+                    <StatusPill
+                      tone={computerUseStatusLoading ? 'neutral' : computerUseStatusError ? 'warning' : computerUseAccess ? 'success' : 'warning'}
+                      role="status"
+                    >
+                      {computerUseAccessLabel}
+                    </StatusPill>
+                    {platform === 'macos' && (
+                      <Button
+                        className="openbitfun-runtime-settings__row-action-btn"
+                        size="sm"
+                        variant="outline"
+                        disabled={computerUseBusy || computerUseStatusLoading}
+                        onClick={() => void handleComputerUseOpenSettings('accessibility')}
+                      >
+                        {t('computerUse.openSettings')}
+                      </Button>
+                    )}
+                  </div>
+                </ConfigPageRow>
+                <ConfigPageRow
+                  label={t('computerUse.screenCapture')}
+                  description={t('computerUse.screenCaptureDesc')}
+                  align="center"
+                  className="openbitfun-runtime-settings__status-row"
+                >
+                  <div
+                    className="openbitfun-runtime-settings__status-actions"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="control"
+                  >
+                    <StatusPill
+                      tone={computerUseStatusLoading ? 'neutral' : computerUseStatusError ? 'warning' : computerUseScreen ? 'success' : 'warning'}
+                      role="status"
+                    >
+                      {computerUseScreenLabel}
+                    </StatusPill>
+                    {platform === 'macos' && (
+                      <Button
+                        className="openbitfun-runtime-settings__row-action-btn"
+                        size="sm"
+                        variant="outline"
+                        disabled={computerUseBusy || computerUseStatusLoading}
+                        onClick={() => void handleComputerUseOpenSettings('screen_capture')}
+                      >
+                        {t('computerUse.openSettings')}
+                      </Button>
+                    )}
+                  </div>
+                </ConfigPageRow>
+                {computerUsePlatformMessage && (
+                  <div
+                    className="openbitfun-runtime-settings__platform-note"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="platformNote"
+                    role="note"
+                  >
+                    <Icon
+                      aria-hidden="true"
+                      className="openbitfun-runtime-settings__platform-note-icon"
+                      name="info"
+                      size="sm"
+                    />
+                    <p className="openbitfun-runtime-settings__platform-note-copy">
+                      <strong>{t('computerUse.platformNote')}: </strong>
+                      {computerUsePlatformMessage}
+                    </p>
+                  </div>
+                )}
+              </>
+            ) : peerBrowserControlUnsupported ? (
+              <ConfigPageRow
+                label={t('computerUse.peerUnsupported')}
+                description=""
+                align="center"
+              >
+                <span />
+              </ConfigPageRow>
+            ) : null}
+          </ConfigPageSection>
+
+          {/* ── Browser control (CDP) ──────────────────────────────── */}
+          <ConfigPageSection
+            title={t('browserControl.sectionTitle')}
+            extra={IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
+              <ConfigRefreshButton
+                tooltip={t('browserControl.refreshStatus')}
+                loading={browserStatusLoading}
+                disabled={browserControlBusy}
+                onClick={() => void refreshBrowserControlStatus()}
+              />
+            ) : undefined}
+            description={
+              IS_TAURI_DESKTOP ? t('browserControl.sectionDescription') : t('browserControl.desktopOnly')
+            }
+          >
+            {IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
+              <>
+                <ConfigMessage
+                  message={browserStatusError
+                    ? { type: 'error', text: t('browserControl.statusLoadFailed') }
+                    : null}
+                />
+                <ConfigPageRow
+                  label={t('browserControl.preferredBrowser')}
+                  description={t(browserCdpAvailable ? 'browserControl.preferredBrowserConnectedDesc' : 'browserControl.preferredBrowserDesc')}
+                  align="center"
+                >
+                  <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                    <Select
+                      value={preferredBrowser}
+                      options={browserSelectOptions}
+                      size="sm"
+                      disabled={browserCdpAvailable || browserControlBusy || browserStatusLoading || browserStatusError || browserSelectOptions.length === 0}
+                      onValueChange={(value) => void handleBrowserControlBrowserChange(value)}
+                    />
+                  </div>
+                </ConfigPageRow>
+                {browserDefaultCdpSupported && (
+                  <ConfigPageRow
+                    label={t('browserControl.defaultCdp')}
+                    description={t('browserControl.defaultCdpDesc')}
+                    align="center"
+                    className="openbitfun-runtime-settings__status-row"
+                  >
+                    <div
+                      className="openbitfun-runtime-settings__status-actions"
+                      data-openbitfun-component="runtime-settings"
+                      data-openbitfun-part="control"
+                    >
+                      <StatusPill
+                        tone={browserStatusLoading ? 'neutral' : browserStatusError ? 'warning' : browserDefaultCdpEnabled ? 'success' : 'neutral'}
+                        role="status"
+                      >
+                        {t(browserStatusLoading ? 'loading.text' : browserStatusError ? 'browserControl.statusUnavailable' : browserDefaultCdpEnabled
+                          ? 'browserControl.defaultCdpEnabled'
+                          : 'browserControl.defaultCdpDisabled')}
+                      </StatusPill>
+                    </div>
+                  </ConfigPageRow>
+                )}
+                {browserDefaultCdpSupported && (
+                  <ConfigPageRow
+                    label={t('browserControl.autoConnectOnStartup')}
+                    description={t('browserControl.autoConnectOnStartupDesc')}
+                    align="center"
+                  >
+                    <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
+                      <Switch
+                        checked={browserAutoConnectOnStartup}
+                        onChange={(e) => void handleBrowserAutoConnectChange(e.target.checked)}
+                        disabled={browserControlBusy || browserStatusLoading || browserStatusError}
+                      />
+                    </div>
+                  </ConfigPageRow>
+                )}
+                <ConfigPageRow
+                  label={t('browserControl.status')}
+                  description={browserStatusDescription}
+                  align="center"
+                  className="openbitfun-runtime-settings__status-row"
+                >
+                  <div
+                    className="openbitfun-runtime-settings__status-actions"
+                    data-openbitfun-component="runtime-settings"
+                    data-openbitfun-part="control"
+                  >
+                    <StatusPill
+                      tone={browserStatusLoading ? 'neutral' : browserStatusError ? 'warning' : browserCdpAvailable ? 'success' : 'neutral'}
+                      role="status"
+                      title={browserCdpAvailable && browserVersion ? `${browserKind} ${browserVersion}` : undefined}
+                    >
+                      {browserStatusLabel}
+                    </StatusPill>
+                    {browserCdpAvailable ? (
+                      <Button
+                        className="openbitfun-runtime-settings__row-action-btn"
+                        size="sm"
+                        variant="outline"
+                        disabled={browserControlBusy || browserStatusLoading || browserStatusError}
+                        onClick={() => void handleBrowserControlDisconnect()}
+                      >
+                        {t('browserControl.disconnect')}
+                      </Button>
+                    ) : (
+                      <Button
+                        className="openbitfun-runtime-settings__row-action-btn"
+                        size="sm"
+                        variant="outline"
+                        disabled={browserControlBusy || browserStatusLoading || browserStatusError}
+                        onClick={() => void (browserDefaultCdpSupported
+                          ? handleBrowserControlEnableDefaultCdp()
+                          : handleBrowserControlLaunch())}
+                      >
+                        {t(browserDefaultCdpSupported && !browserDefaultCdpEnabled
+                          ? 'browserControl.enableDefaultCdp'
+                          : 'browserControl.connect')}
+                      </Button>
+                    )}
+                  </div>
+                </ConfigPageRow>
+              </>
+            ) : peerBrowserControlUnsupported ? (
+              <ConfigPageRow
+                label={t('browserControl.peerUnsupported')}
+                description=""
+                align="center"
+              >
+                <span />
+              </ConfigPageRow>
+            ) : null}
+          </ConfigPageSection>
+
+          <Dialog
+            open={browserRestartPrompt !== null}
+            onOpenChange={(nextOpen) => {
+              if (!nextOpen && !browserControlBusy) setBrowserRestartPrompt(null);
+            }}
+            size="sm"
+            closeOnPointerOutside={!browserControlBusy}
+          >
+            <DialogHeader>
+              <DialogHeading>
+                <DialogTitle>{t('browserControl.restartModal.title')}</DialogTitle>
+              </DialogHeading>
+              <DialogClose />
+            </DialogHeader>
+            <DialogBody>
+              <div className="openbitfun-debug-config__modal-body" data-openbitfun-component="runtime-settings" data-openbitfun-part="restartModal">
+                <p>{t('browserControl.restartModal.description', { browser: browserRestartPrompt?.browserKind || browserKind })}</p>
+                <p>{t('browserControl.restartModal.warning')}</p>
+                {browserRestartPrompt?.message ? (
+                  <p className="openbitfun-runtime-settings__hint">{browserRestartPrompt.message}</p>
+                ) : null}
+              </div>
+            </DialogBody>
+            <DialogFooter
+              separator
+              className="openbitfun-debug-config__modal-footer"
+              data-openbitfun-component="runtime-settings"
+              data-openbitfun-part="modalFooter"
+            >
+              <Button
+                variant="fill"
+                size="sm"
+                onClick={() => setBrowserRestartPrompt(null)}
+                disabled={browserControlBusy}
+              >
+                {t('browserControl.restartModal.cancel')}
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => void handleBrowserControlRestart()}
+                disabled={browserControlBusy}
+              >
+                {browserControlBusy
+                  ? t('browserControl.restartModal.restarting')
+                  : t('browserControl.restartModal.confirm')}
+              </Button>
+            </DialogFooter>
+          </Dialog>
+
+        </>
+      )}
+    </SettingsPage>
+  );
+};
+
+export default DeviceControlSettingsPage;
diff --git a/src/web-ui/src/app/scenes/settings/pages/AcpSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/ExternalAgentsSettingsPage.tsx
similarity index 63%
rename from src/web-ui/src/app/scenes/settings/pages/AcpSettingsPage.tsx
rename to src/web-ui/src/app/scenes/settings/pages/tools/ExternalAgentsSettingsPage.tsx
index 452286602f..6e3d211bb4 100644
--- a/src/web-ui/src/app/scenes/settings/pages/AcpSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/ExternalAgentsSettingsPage.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
+import type { SettingsPageProps } from '@/app/scenes/settings/settingsTypes';
 import AcpAgentsConfig from '@/infrastructure/config/components/AcpAgentsConfig';
-import { useSettingsStore } from '../settingsStore';
-import type { SettingsPageProps } from '../settingsTypes';
+import React from 'react';
 
-const AcpSettingsPage: React.FC<SettingsPageProps> = ({
+const ExternalAgentsSettingsPage: React.FC<SettingsPageProps> = ({
   viewId,
   navigationRequestId,
 }) => {
@@ -18,4 +18,4 @@ const AcpSettingsPage: React.FC<SettingsPageProps> = ({
   );
 };
 
-export default AcpSettingsPage;
+export default ExternalAgentsSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
similarity index 93%
rename from src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx
rename to src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
index 474128c813..55f5d47dd8 100644
--- a/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import HooksConfig from './HooksConfig';
+import HooksSettingsSection from '@/app/scenes/settings/pages/tools/HooksSettingsSection';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -59,7 +59,8 @@ vi.mock('@openbitfun/ui', async importOriginal => ({
   DialogTitle: ({ children }: React.PropsWithChildren) => <h2>{children}</h2>,
 }));
 
-vi.mock('./common', () => ({
+vi.mock('../../../../../infrastructure/config/components/common', () => ({
+  ConfigPageSectionStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   ConfigLoadingState: ({ label }: { label: string }) => <div>{label}</div>,
   ConfigPageContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   ConfigPageHeader: ({ title, subtitle }: { title: string; subtitle: string }) => (
@@ -93,7 +94,7 @@ vi.mock('@/shared/notification-system', () => ({
   useNotification: () => ({ error: notifyErrorMock, success: notifySuccessMock }),
 }));
 
-vi.mock('../services/ConfigManager', () => ({
+vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({
   configManager: { getConfig: getConfigMock, setConfig: setConfigMock },
 }));
 
@@ -165,7 +166,7 @@ async function flush() {
   });
 }
 
-describe('HooksConfig imported Hook management', () => {
+describe('HooksSettingsSection imported Hook management', () => {
   let container: HTMLDivElement;
   let root: Root;
 
@@ -190,8 +191,8 @@ describe('HooksConfig imported Hook management', () => {
     container.remove();
   });
 
-  it('reuses Hook owners without rendering a second page shell when embedded', async () => {
-    await act(async () => root.render(<HooksConfig embedded />));
+  it('reuses Hook owners without rendering a second page shell as an inline section', async () => {
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
 
     expect(getConfigMock).toHaveBeenCalledWith('app.hooks');
@@ -222,7 +223,7 @@ describe('HooksConfig imported Hook management', () => {
         })),
       },
     });
-    await act(async () => root.render(<HooksConfig embedded />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
     expect(container.textContent).not.toContain('tool_call');
     expect(container.textContent).not.toContain('PreToolUse');
@@ -238,7 +239,7 @@ describe('HooksConfig imported Hook management', () => {
       catalog: { ...catalog, sources: [] },
     });
 
-    await act(async () => root.render(<HooksConfig embedded />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
 
     const empty = container.querySelector('[data-hooks-empty="true"]');
@@ -247,7 +248,7 @@ describe('HooksConfig imported Hook management', () => {
 
   it('reviews exact commands before updating a previously imported Hook', async () => {
     getSnapshotMock.mockResolvedValue({ ...snapshot, imports: [{ importId: 'managed-1', source, enabled: true, behaviorVersion: 'old', state: 'update_available' }] });
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
 
     expect(getConfigMock).toHaveBeenCalledTimes(1);
@@ -280,7 +281,7 @@ describe('HooksConfig imported Hook management', () => {
       schemaVersion: 1,
       outcome: { kind: 'stale', refreshedPlan },
     });
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
     await act(async () => {
       Array.from(container.querySelectorAll('button'))
@@ -309,7 +310,7 @@ describe('HooksConfig imported Hook management', () => {
         state: 'current',
       }],
     });
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
     await act(async () => {
       Array.from(container.querySelectorAll('button'))
@@ -343,7 +344,7 @@ describe('HooksConfig imported Hook management', () => {
     getSnapshotMock.mockReset();
     getSnapshotMock.mockResolvedValueOnce(imported).mockResolvedValueOnce(refreshed);
     mutateImportMock.mockRejectedValue({ code: 'stale_revision' });
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
 
     const importedSwitch = Array.from(container.querySelectorAll('input')).at(-1)!;
@@ -374,7 +375,7 @@ describe('HooksConfig imported Hook management', () => {
       },
     });
 
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
     await act(async () => {
       Array.from(container.querySelectorAll('button'))
@@ -414,7 +415,7 @@ describe('HooksConfig imported Hook management', () => {
       },
     });
 
-    await act(async () => root.render(<HooksConfig />));
+    await act(async () => root.render(<HooksSettingsSection />));
     await flush();
     await act(async () => {
       Array.from(container.querySelectorAll('button'))
diff --git a/src/web-ui/src/infrastructure/config/components/HooksConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
similarity index 81%
rename from src/web-ui/src/infrastructure/config/components/HooksConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
index 41f042c6ac..6ba29c49c8 100644
--- a/src/web-ui/src/infrastructure/config/components/HooksConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
@@ -1,8 +1,26 @@
+import {
+  externalHooksAPI,
+  type ExternalHookImportMutation,
+  type ExternalHookImportPlan,
+  type ExternalHookImportSnapshot,
+  type ExternalHookSource,
+} from '@/infrastructure/api/service-api/ExternalHooksAPI';
+import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
+import {
+  ConfigLoadingState,
+  ConfigPageRow,
+  ConfigPageSection,
+  ConfigPageSectionStack,
+  ConfigRetryState
+} from '@/infrastructure/config/components/common';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { useNotification } from '@/shared/notification-system';
+import { WorkspaceKind } from '@/shared/types';
+import { createLogger } from '@/shared/utils/logger';
 import {
   Button,
   ConfirmDialog,
-  Icon,
-  Switch,
   Dialog,
   DialogBody,
   DialogClose,
@@ -10,33 +28,14 @@ import {
   DialogHeader,
   DialogHeading,
   DialogTitle,
+  Icon,
+  Switch,
 } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import { WorkspaceKind } from '@/shared/types';
-import { useNotification } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
-import {
-  externalHooksAPI,
-  type ExternalHookImportMutation,
-  type ExternalHookImportPlan,
-  type ExternalHookImportSnapshot,
-  type ExternalHookSource,
-} from '@/infrastructure/api/service-api/ExternalHooksAPI';
-import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
-import { configManager } from '../services/ConfigManager';
-import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageRow,
-  ConfigPageSection,
-  ConfigLoadingState,
-  ConfigRetryState,
-} from './common';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
-const log = createLogger('HooksConfig');
+const log = createLogger('HooksSettingsSection');
 
 const CODEX_HOOKS_DOC_URL = 'https://learn.chatgpt.com/docs/hooks';
 
@@ -60,11 +59,7 @@ function normalizeHooksConfig(
   };
 }
 
-export interface HooksConfigProps {
-  embedded?: boolean;
-}
-
-const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
+const HooksSettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/hooks');
   const { error: notifyError, success: notifySuccess } = useNotification();
   const { workspace, workspacePath } = useCurrentWorkspace();
@@ -301,39 +296,16 @@ const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
     && item.source.key.sourceId === reviewPlan.source.key.sourceId
   ));
 
+  const sectionAnchor = useSettingsSectionAnchor('hooks', !loading);
   if (loading || configLoadFailed) {
-    if (embedded) {
-      return loading ? (
-        <ConfigLoadingState label={t('loading')} />
-      ) : (
-        <ConfigRetryState
-          message={t('messages.loadFailedLocked')}
-          retryLabel={t('messages.retry')}
-          onRetry={() => void loadData()}
-        />
-      );
-    }
-    return (
-      <ConfigPageLayout>
-        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-        <ConfigPageContent>
-          {loading ? (
-            <ConfigLoadingState label={t('loading')} />
-          ) : (
-            <ConfigRetryState
-              message={t('messages.loadFailedLocked')}
-              retryLabel={t('messages.retry')}
-              onRetry={() => void loadData()}
-            />
-          )}
-        </ConfigPageContent>
-      </ConfigPageLayout>
-    );
+    return <ConfigPageSection id={sectionAnchor} title={t('title')}>
+      {loading ? <ConfigLoadingState label={t('loading')} /> : <ConfigRetryState message={t('messages.loadFailedLocked')} retryLabel={t('messages.retry')} onRetry={() => void loadData()} />}
+    </ConfigPageSection>;
   }
 
   const content = (
     <>
-      <ConfigPageContent>
+      <ConfigPageSectionStack>
         <ConfigPageSection title={t('activation.title')} description={t('activation.description')}>
           <ConfigPageRow
             label={t('fields.enabled.label')}
@@ -448,39 +420,39 @@ const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
               ))}
 
               {corruptDiagnostics.map((diagnostic) => {
-                  const scope = diagnostic.code.endsWith('.user_global')
-                    ? 'user_global'
-                    : 'project';
-                  return (
-                    <ConfigPageRow
-                      key={diagnostic.code}
-                      label={t('imports.storeInvalid')}
-                      description={diagnostic.message}
-                      align="center"
+                const scope = diagnostic.code.endsWith('.user_global')
+                  ? 'user_global'
+                  : 'project';
+                return (
+                  <ConfigPageRow
+                    key={diagnostic.code}
+                    label={t('imports.storeInvalid')}
+                    description={diagnostic.message}
+                    align="center"
+                  >
+                    <Button
+                      variant="fill"
+                      tone="danger"
+                      size="sm"
+                      disabled={busyKey !== null}
+                      onClick={() => setConfirmation({ kind: 'reset', scope })}
                     >
-                      <Button
-                        variant="fill"
-                        tone="danger"
-                        size="sm"
-                        disabled={busyKey !== null}
-                        onClick={() => setConfirmation({ kind: 'reset', scope })}
-                      >
-                        {t('imports.reset')}
-                      </Button>
-                    </ConfigPageRow>
-                  );
-                })}
+                      {t('imports.reset')}
+                    </Button>
+                  </ConfigPageRow>
+                );
+              })}
 
               {importSnapshot.imports.length === 0
                 && corruptDiagnostics.length === 0 ? (
-                  <ConfigPageRow
-                    className="openbitfun-hooks-config__empty"
-                    label={<span data-hooks-empty="true">{t('imports.empty')}</span>}
-                    multiline
-                  >
-                    {null}
-                  </ConfigPageRow>
-                ) : null}
+                <ConfigPageRow
+                  className="openbitfun-hooks-config__empty"
+                  label={<span data-hooks-empty="true">{t('imports.empty')}</span>}
+                  multiline
+                >
+                  {null}
+                </ConfigPageRow>
+              ) : null}
             </>
           ) : (
             <ConfigLoadingState label={t('imports.loading')} />
@@ -501,7 +473,7 @@ const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
             </Button>
           </ConfigPageRow>
         </ConfigPageSection>
-      </ConfigPageContent>
+      </ConfigPageSectionStack>
 
       <Dialog
         open={reviewPlan !== null}
@@ -521,36 +493,36 @@ const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
           <DialogClose />
         </DialogHeader>
         <DialogBody>
-        {reviewPlan ? (
-          <div>
-            {planNotice ? <p role="status">{planNotice}</p> : null}
-            <p>{t('imports.reviewWarning')}</p>
-            {reviewPlan.handlers.map((handler) => (
-              <section key={handler.stableKey}>
-                <h4>{handler.event}{handler.matcher ? ` · ${handler.matcher}` : ''}</h4>
-                <pre>{handler.command}</pre>
-                {handler.commandWindows ? <pre>{handler.commandWindows}</pre> : null}
-                <p>{t('imports.timeout', { seconds: handler.timeoutSeconds ?? 60 })}</p>
-                {handler.dependencies.map((dependency) => (
-                  <p key={`${dependency.kind}:${dependency.kind === 'managed'
-                    ? dependency.relativePath
-                    : dependency.location}`}>
-                    {t(`imports.dependency.${dependency.kind}`)}: {
-                      dependency.kind === 'managed'
-                        ? dependency.relativePath
-                        : dependency.location
-                    }
-                  </p>
-                ))}
-              </section>
-            ))}
-            {reviewPlan.skipped.map((skipped) => (
-              <p key={skipped.reasonCode}>
-                {t('imports.skipped', { reason: skipped.reasonCode, count: skipped.count })}
-              </p>
-            ))}
-          </div>
-        ) : null}
+          {reviewPlan ? (
+            <div>
+              {planNotice ? <p role="status">{planNotice}</p> : null}
+              <p>{t('imports.reviewWarning')}</p>
+              {reviewPlan.handlers.map((handler) => (
+                <section key={handler.stableKey}>
+                  <h4>{handler.event}{handler.matcher ? ` · ${handler.matcher}` : ''}</h4>
+                  <pre>{handler.command}</pre>
+                  {handler.commandWindows ? <pre>{handler.commandWindows}</pre> : null}
+                  <p>{t('imports.timeout', { seconds: handler.timeoutSeconds ?? 60 })}</p>
+                  {handler.dependencies.map((dependency) => (
+                    <p key={`${dependency.kind}:${dependency.kind === 'managed'
+                      ? dependency.relativePath
+                      : dependency.location}`}>
+                      {t(`imports.dependency.${dependency.kind}`)}: {
+                        dependency.kind === 'managed'
+                          ? dependency.relativePath
+                          : dependency.location
+                      }
+                    </p>
+                  ))}
+                </section>
+              ))}
+              {reviewPlan.skipped.map((skipped) => (
+                <p key={skipped.reasonCode}>
+                  {t('imports.skipped', { reason: skipped.reasonCode, count: skipped.count })}
+                </p>
+              ))}
+            </div>
+          ) : null}
         </DialogBody>
         {reviewPlan ? (
           <DialogFooter separator>
@@ -607,20 +579,7 @@ const HooksConfig: React.FC<HooksConfigProps> = ({ embedded = false }) => {
     </>
   );
 
-  if (embedded) {
-    return (
-      <div className="openbitfun-hooks-config openbitfun-hooks-config--embedded">
-        {content}
-      </div>
-    );
-  }
-
-  return (
-    <ConfigPageLayout>
-      <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-      {content}
-    </ConfigPageLayout>
-  );
+  return <div id={sectionAnchor}>{content}</div>;
 };
 
-export default HooksConfig;
+export default HooksSettingsSection;
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/McpSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/McpSettingsPage.tsx
new file mode 100644
index 0000000000..30e7b253a5
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/McpSettingsPage.tsx
@@ -0,0 +1 @@
+export { default } from '@/infrastructure/config/components/McpToolsConfig';
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.appearance.ts b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.appearance.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/QuickActionsConfig.appearance.ts
rename to src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.appearance.ts
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.presentation.test.ts
similarity index 90%
rename from src/web-ui/src/infrastructure/config/components/QuickActionsConfig.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.presentation.test.ts
index d91d6f9d47..80578f694a 100644
--- a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.presentation.test.ts
@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 const source = readFileSync(
-  fileURLToPath(new URL('./QuickActionsConfig.tsx', import.meta.url)),
+  fileURLToPath(new URL('./QuickActionsSettingsSection.tsx', import.meta.url)),
   'utf8',
 ).replace(/\r\n/g, '\n');
 
@@ -12,7 +12,7 @@ describe('QuickActionsConfig draft lifecycle', () => {
     expect(source).toContain('useSettingsDraft({');
     expect(source).toContain("id: 'quick-action-editor'");
     expect(source).toContain("pageId: 'tools.automation'");
-    expect(source).toContain("viewId: 'quick-actions'");
+    expect(source).not.toContain("viewId: 'quick-actions'");
     expect(source).toContain("requestSettingsDraftExit(['quick-action-editor'], onClose)");
     expect(source).toContain('onSubmit: (label: string, prompt: string) => Promise<boolean>');
     expect(source).toContain('return saved;');
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss
rename to src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.scss
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
similarity index 74%
rename from src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx
rename to src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
index 6e7ba405d2..2b16508870 100644
--- a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
@@ -1,54 +1,48 @@
-import { OverflowText,
-  Button,
-  Empty,
-  Icon,
-  IconButton,
-  Input,
-  Switch,
-  Textarea,
-  Tooltip,
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogFooter,
-  DialogHeader,
-  DialogHeading,
-  DialogTitle,
-  ConfirmDialog,
-} from '@openbitfun/ui';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Zap, GitPullRequest } from 'lucide-react';
-import { ConfigLoadingState, ConfigRetryState } from '@/infrastructure/config/components/common';
-import {
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageContent,
-  ConfigPageSection,
-  ConfigPageRow,
-} from './common';
+import '@/app/scenes/settings/pages/tools/QuickActionsSettingsSection.scss';
+import { ConfigLoadingState, ConfigPageSection, ConfigPageSectionStack, ConfigRetryState } from '@/infrastructure/config/components/common';
 import {
   aiExperienceConfigService,
   DEFAULT_QUICK_ACTIONS,
-  type QuickAction,
   type AIExperienceSettingsPatch,
-} from '../services/AIExperienceConfigService';
+  type QuickAction,
+} from '@/infrastructure/config/services/AIExperienceConfigService';
 import {
   normalizeQuickActionTextForStorage,
   resolveQuickActionText,
-} from '../services/quickActionLocalization';
-import { useNotification } from '@/shared/notification-system';
-import { createLogger } from '@/shared/utils/logger';
+} from '@/infrastructure/config/services/quickActionLocalization';
 import {
   requestSettingsDraftExit,
   useSettingsDraft,
 } from '@/infrastructure/config/settingsDraftRegistry';
-import './QuickActionsConfig.scss';
+import { useNotification } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+import {
+  Button,
+  ConfirmDialog,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogHeading,
+  DialogTitle,
+  Empty,
+  Icon,
+  IconButton,
+  Input,
+  OverflowText,
+  Switch,
+  Textarea,
+  Tooltip,
+} from '@openbitfun/ui';
+import { GitPullRequest, Zap } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSettingsSectionAnchor } from '../shared/useSettingsSectionAnchor';
 
-const log = createLogger('QuickActionsConfig');
+const log = createLogger('QuickActionsSettingsSection');
 
 const BUILTIN_IDS = new Set(['commit', 'create_pr']);
-const COMMIT_COAUTHOR_ACCOUNT = `@${new URL('https://github.com/bitfun-ai').pathname.slice(1)}`;
 
 type TranslationFn = (key: string, options?: Record<string, unknown>) => string;
 
@@ -104,7 +98,6 @@ const ActionFormModal: React.FC<ActionFormModalProps> = ({ isOpen, target, onClo
   useSettingsDraft({
     id: 'quick-action-editor',
     pageId: 'tools.automation',
-    viewId: 'quick-actions',
     label: isEdit ? t('modal.editTitle') : t('modal.addTitle'),
     dirty,
     saving,
@@ -128,10 +121,10 @@ const ActionFormModal: React.FC<ActionFormModalProps> = ({ isOpen, target, onClo
 
   return (
     <Dialog
-        open={isOpen}
-        onOpenChange={(nextOpen) => { if (!nextOpen) requestClose(); }}
-        size="md"
-      >
+      open={isOpen}
+      onOpenChange={(nextOpen) => { if (!nextOpen) requestClose(); }}
+      size="md"
+    >
       <DialogHeader>
         <DialogHeading>
           <DialogTitle>{isEdit ? t('modal.editTitle') : t('modal.addTitle')}</DialogTitle>
@@ -139,47 +132,47 @@ const ActionFormModal: React.FC<ActionFormModalProps> = ({ isOpen, target, onClo
         <DialogClose disabled={saving} />
       </DialogHeader>
       <DialogBody>
-      <div className="quick-actions-config__modal-body" onKeyDown={handleKeyDown} data-openbitfun-component="quick-actions-config" data-openbitfun-part="dialog">
-        {target && (
-          <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="dialogIcon" className="quick-actions-config__modal-icon-preview">
-            <div className="quick-actions-config__modal-action-icon">
-              {getActionIcon(target.id, 18)}
+        <div className="quick-actions-config__modal-body" onKeyDown={handleKeyDown} data-openbitfun-component="quick-actions-config" data-openbitfun-part="dialog">
+          {target && (
+            <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="dialogIcon" className="quick-actions-config__modal-icon-preview">
+              <div className="quick-actions-config__modal-action-icon">
+                {getActionIcon(target.id, 18)}
+              </div>
             </div>
+          )}
+
+          <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="field" className="quick-actions-config__modal-field">
+            <label className="quick-actions-config__modal-label" htmlFor="qa-label">
+              {t('modal.labelField')}
+            </label>
+            <Input
+              ref={labelInputRef}
+              id="qa-label"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder={t('modal.labelPlaceholder')}
+              disabled={saving}
+            />
           </div>
-        )}
 
-        <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="field" className="quick-actions-config__modal-field">
-          <label className="quick-actions-config__modal-label" htmlFor="qa-label">
-            {t('modal.labelField')}
-          </label>
-          <Input
-            ref={labelInputRef}
-            id="qa-label"
-            value={label}
-            onChange={(e) => setLabel(e.target.value)}
-            placeholder={t('modal.labelPlaceholder')}
-            disabled={saving}
-          />
-        </div>
+          <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="field" className="quick-actions-config__modal-field">
+            <label className="quick-actions-config__modal-label" htmlFor="qa-prompt">
+              {t('modal.promptField')}
+            </label>
+            <Textarea
+              id="qa-prompt"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t('modal.promptPlaceholder')}
+              rows={4}
+              autoResize
+              disabled={saving}
+              className="quick-actions-config__modal-textarea"
+            />
+            <p className="quick-actions-config__modal-hint">{t('modal.promptHint')}</p>
+          </div>
 
-        <div data-openbitfun-component="quick-actions-config" data-openbitfun-part="field" className="quick-actions-config__modal-field">
-          <label className="quick-actions-config__modal-label" htmlFor="qa-prompt">
-            {t('modal.promptField')}
-          </label>
-          <Textarea
-            id="qa-prompt"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder={t('modal.promptPlaceholder')}
-            rows={4}
-            autoResize
-            disabled={saving}
-            className="quick-actions-config__modal-textarea"
-          />
-          <p className="quick-actions-config__modal-hint">{t('modal.promptHint')}</p>
         </div>
-
-      </div>
       </DialogBody>
       <DialogFooter
         separator
@@ -187,20 +180,20 @@ const ActionFormModal: React.FC<ActionFormModalProps> = ({ isOpen, target, onClo
         data-openbitfun-part="dialogFooter"
         className="quick-actions-config__modal-footer"
       >
-          <Button variant="fill" size="sm" onClick={requestClose} disabled={saving}>
-            {t('modal.cancel')}
-          </Button>
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => void onSubmit(label.trim(), prompt.trim())}
-            disabled={!canSubmit || saving}
-            loading={saving}
-            leadingIcon={<Icon name="check-line" size="sm" />}
-          >
-
-            {isEdit ? t('modal.saveEdit') : t('modal.confirmAdd')}
-          </Button>
+        <Button variant="fill" size="sm" onClick={requestClose} disabled={saving}>
+          {t('modal.cancel')}
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => void onSubmit(label.trim(), prompt.trim())}
+          disabled={!canSubmit || saving}
+          loading={saving}
+          leadingIcon={<Icon name="check-line" size="sm" />}
+        >
+
+          {isEdit ? t('modal.saveEdit') : t('modal.confirmAdd')}
+        </Button>
       </DialogFooter>
     </Dialog>
   );
@@ -268,7 +261,7 @@ const ActionRow: React.FC<ActionRowProps> = ({ action, onToggle, onEdit, onDelet
 
 // ── Main page ───────────────────────────────────────────────────────────────
 
-const QuickActionsConfig: React.FC = () => {
+const QuickActionsSettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/quick-actions');
   const notification = useNotification();
 
@@ -276,7 +269,6 @@ const QuickActionsConfig: React.FC = () => {
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
   const [actions, setActions] = useState<QuickAction[]>([]);
-  const [commitCoauthorEnabled, setCommitCoauthorEnabled] = useState<boolean | undefined>();
   const saveQueueRef = useRef<Promise<void>>(Promise.resolve());
   const pendingSaveCountRef = useRef(0);
 
@@ -292,7 +284,6 @@ const QuickActionsConfig: React.FC = () => {
       const settings = await aiExperienceConfigService.getSettingsAsync({ forceRefresh: true, requireLoaded: true });
       const stored = settings.quick_actions;
       setActions(stored ?? DEFAULT_QUICK_ACTIONS);
-      setCommitCoauthorEnabled(settings.enable_git_commit_coauthor);
     } catch (error) {
       log.error('Failed to load quick actions', error);
       setLoadFailed(true);
@@ -333,14 +324,6 @@ const QuickActionsConfig: React.FC = () => {
     () => setActions(next),
   ), [persistSettings]);
 
-  const handleCommitCoauthorToggle = useCallback((enabled: boolean) => {
-    if (saving || commitCoauthorEnabled === undefined) return;
-    void persistSettings(
-      { enable_git_commit_coauthor: enabled },
-      () => setCommitCoauthorEnabled(enabled),
-    );
-  }, [commitCoauthorEnabled, persistSettings, saving]);
-
   const handleToggle = useCallback((id: string) => {
     if (saving) return;
     void persist(actions.map(a => a.id === id ? { ...a, enabled: !a.enabled } : a));
@@ -377,11 +360,12 @@ const QuickActionsConfig: React.FC = () => {
     return saved;
   }, [actions, modalTarget, persist, t]);
 
+  const sectionAnchor = useSettingsSectionAnchor('quick-actions', !loading);
+
   if (loading || loadFailed) {
     return (
-      <ConfigPageLayout className="quick-actions-config" data-openbitfun-component="quick-actions-config" data-openbitfun-part="root">
-        <ConfigPageHeader title={t('page.title')} subtitle={t('page.subtitle')} />
-        <ConfigPageContent>
+      <div id={sectionAnchor} className="quick-actions-config" data-openbitfun-component="quick-actions-config" data-openbitfun-part="root">
+        <ConfigPageSectionStack>
           {loading ? (
             <ConfigLoadingState label={t('loading')} />
           ) : (
@@ -391,8 +375,8 @@ const QuickActionsConfig: React.FC = () => {
               onRetry={() => void load()}
             />
           )}
-        </ConfigPageContent>
-      </ConfigPageLayout>
+        </ConfigPageSectionStack>
+      </div>
     );
   }
 
@@ -400,10 +384,9 @@ const QuickActionsConfig: React.FC = () => {
   const customActions = actions.filter(a => !BUILTIN_IDS.has(a.id));
 
   return (
-    <ConfigPageLayout className="quick-actions-config" data-openbitfun-component="quick-actions-config" data-openbitfun-part="root">
-      <ConfigPageHeader title={t('page.title')} subtitle={t('page.subtitle')} />
+    <div id={sectionAnchor} className="quick-actions-config" data-openbitfun-component="quick-actions-config" data-openbitfun-part="root">
 
-      <ConfigPageContent data-openbitfun-component="quick-actions-config" data-openbitfun-part="content" className="quick-actions-config__content">
+      <ConfigPageSectionStack data-openbitfun-component="quick-actions-config" data-openbitfun-part="content" className="quick-actions-config__content">
 
         {/* ── Built-in actions ──────────────────────────────────────────── */}
         <ConfigPageSection title={t('sections.builtin.title')} description={t('sections.builtin.description')}>
@@ -423,26 +406,6 @@ const QuickActionsConfig: React.FC = () => {
           </div>
         </ConfigPageSection>
 
-        <ConfigPageSection
-          title={t('commitAttribution.title')}
-          description={t('commitAttribution.scope')}
-        >
-          <ConfigPageRow
-            label={t('commitAttribution.label')}
-            align="center"
-            description={commitCoauthorEnabled === undefined
-              ? t('commitAttribution.unsupported')
-              : t('commitAttribution.description', { account: COMMIT_COAUTHOR_ACCOUNT })}
-          >
-            <Switch
-              checked={commitCoauthorEnabled === true}
-              onChange={(event) => handleCommitCoauthorToggle(event.currentTarget.checked)}
-              disabled={saving || commitCoauthorEnabled === undefined}
-              aria-label={t('commitAttribution.label')}
-            />
-          </ConfigPageRow>
-        </ConfigPageSection>
-
         {/* ── Custom actions ────────────────────────────────────────────── */}
         <ConfigPageSection
           title={t('sections.custom.title')}
@@ -496,7 +459,7 @@ const QuickActionsConfig: React.FC = () => {
           </div>
         </ConfigPageSection>
 
-      </ConfigPageContent>
+      </ConfigPageSectionStack>
 
       <ActionFormModal
         isOpen={isModalOpen}
@@ -518,8 +481,8 @@ const QuickActionsConfig: React.FC = () => {
         type="warning"
         confirmDanger
       />
-    </ConfigPageLayout>
+    </div>
   );
 };
 
-export default QuickActionsConfig;
+export default QuickActionsSettingsSection;
diff --git a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.presentation.test.ts
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts
rename to src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.presentation.test.ts
diff --git a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.scss
similarity index 100%
rename from src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.scss
rename to src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.scss
diff --git a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
similarity index 98%
rename from src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx
rename to src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
index e3e6bcaa19..851a95e214 100644
--- a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
@@ -1,20 +1,19 @@
-import { Button, Icon, IconButton, Input, Select, type SelectOption, Tooltip } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import '@/app/scenes/settings/pages/tools/WebSearchSettingsPage.scss';
 import { configAPI } from '@/infrastructure/api/service-api/ConfigAPI';
-import { useSettingsDraft } from '@/infrastructure/config/settingsDraftRegistry';
-import { useI18n } from '@/infrastructure/i18n';
-import { useNotification } from '@/shared/notification-system';
-import { copyTextToClipboard } from '@/shared/utils/textSelection';
-import { ConfigActionBar, ConfigLoadingState, ConfigMessage, ConfigRetryState } from './common';
 import {
-  ConfigPageContent,
+  ConfigActionBar, ConfigLoadingState, ConfigMessage, ConfigPageContent,
   ConfigPageHeader,
   ConfigPageLayout,
   ConfigPageRow,
-  ConfigPageSection,
-} from './common';
+  ConfigPageSection, ConfigRetryState
+} from '@/infrastructure/config/components/common';
+import { useSettingsDraft } from '@/infrastructure/config/settingsDraftRegistry';
+import { useI18n } from '@/infrastructure/i18n';
+import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
-import './WebSearchSettingsPage.scss';
+import { copyTextToClipboard } from '@/shared/utils/textSelection';
+import { Button, Icon, IconButton, Input, Select, type SelectOption, Tooltip } from '@openbitfun/ui';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 const log = createLogger('WebSearchSettings');
 
@@ -341,7 +340,7 @@ const WebSearchSettingsPage: React.FC = () => {
 
   useSettingsDraft({
     id: 'web-search-settings',
-    pageId: 'tools.webSearch',
+    pageId: 'tools.web-search',
     label: t('title'),
     dirty: draftDirty,
     saving: saving || credentialBusy,
diff --git a/src/web-ui/src/app/scenes/settings/settingsDestination.ts b/src/web-ui/src/app/scenes/settings/settingsDestination.ts
index ab613a7409..e379b63e29 100644
--- a/src/web-ui/src/app/scenes/settings/settingsDestination.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsDestination.ts
@@ -1,4 +1,5 @@
-import { DEFAULT_SETTINGS_PAGE_ID, isSettingsPageId } from './settingsRegistry';
+import migrations from './settingsDestinationMigrations.json';
+import { DEFAULT_SETTINGS_PAGE_ID, getSettingsPageManifest, isSettingsPageId } from './settingsRegistry';
 import type { SettingsDestination } from './settingsTypes';
 
 const LEGACY_ECOSYSTEM_COMPATIBILITY_IDS = new Set([
@@ -19,45 +20,35 @@ export function isLegacyEcosystemCompatibilityDestination(value: unknown): boole
 /**
  * Upgrade boundary for links emitted by older installs, extensions, and peers.
  * Product code must use canonical SettingsDestination values directly; legacy
- * identifiers are intentionally contained in this one reader-only table.
+ * identifiers are contained in settingsDestinationMigrations.json so the catalog
+ * validator and the frontend share the same compatibility boundary.
  */
-const LEGACY_DESTINATION_MIGRATIONS: Readonly<Record<string, SettingsDestination>> = {
-  basics: { pageId: 'application.general' },
-  appearance: { pageId: 'application.appearance' },
-  font: { pageId: 'application.appearance' },
-  fonts: { pageId: 'application.appearance' },
-  'session-personalization': { pageId: 'application.pet' },
-  'application.input': { pageId: 'application.voice' },
-  keyboard: { pageId: 'application.shortcuts' },
-  shortcuts: { pageId: 'application.shortcuts' },
-  keybindings: { pageId: 'application.shortcuts' },
-  hotkeys: { pageId: 'application.shortcuts' },
-  'voice-input': { pageId: 'application.voice' },
-  'application.development': { pageId: 'application.terminal' },
-  editor: { pageId: 'application.editor' },
-  terminal: { pageId: 'application.terminal' },
-  models: { pageId: 'ai.models' },
-  memories: { pageId: 'ai.memory' },
-  'session-config': { pageId: 'workspace.session' },
-  'session-permissions': { pageId: 'tools.execution' },
-  'tools.device-control': { pageId: 'tools.desktop-control' },
-  'tools.browser-control': { pageId: 'tools.desktop-control' },
-  review: { pageId: 'tools.execution' },
-  'deep-review': { pageId: 'tools.execution' },
-  'code-review': { pageId: 'tools.execution' },
-  'review-team': { pageId: 'tools.execution' },
-  worktrees: { pageId: 'workspace.worktrees' },
-  'quick-actions': { pageId: 'tools.automation', viewId: 'quick-actions' },
-  hooks: { pageId: 'tools.automation', viewId: 'hooks' },
-  'mcp-tools': { pageId: 'tools.mcp' },
-  'acp-agents': { pageId: 'tools.acp' },
-  'usage-statistics': { pageId: 'data.usage' },
-  'archived-sessions': { pageId: 'data.archived' },
-  'data.history': { pageId: 'data.usage' },
-  logging: { pageId: 'data.diagnostics' },
-};
+const LEGACY_DESTINATION_MIGRATIONS: Readonly<Record<string, SettingsDestinationInput>> = migrations.pages;
+const LEGACY_VIEW_MIGRATIONS: Readonly<Record<string, Readonly<Record<string, SettingsDestinationInput>>>> = migrations.views;
 
-export function resolveSettingsDestination(value: string): SettingsDestination {
-  if (isSettingsPageId(value)) return { pageId: value };
-  return LEGACY_DESTINATION_MIGRATIONS[value] ?? { pageId: DEFAULT_SETTINGS_PAGE_ID };
+export interface SettingsDestinationInput {
+  pageId: string;
+  viewId?: string;
+  sectionId?: string;
+}
+
+/** Normalize both old page IDs and old tab links before entering the settings store. */
+export function resolveSettingsDestination(value: string | SettingsDestinationInput): SettingsDestination {
+  const input = typeof value === 'string' ? { pageId: value } : value;
+  const migrated = (input.viewId ? LEGACY_VIEW_MIGRATIONS[input.pageId]?.[input.viewId] : undefined)
+    ?? LEGACY_DESTINATION_MIGRATIONS[input.pageId];
+  const pageId = migrated?.pageId ?? input.pageId;
+  const destination: SettingsDestination = {
+    pageId: isSettingsPageId(pageId) ? pageId : DEFAULT_SETTINGS_PAGE_ID,
+  };
+  const manifest = getSettingsPageManifest(destination.pageId);
+  const sectionId = input.sectionId
+    ?? migrated?.sectionId;
+  const section = manifest.sections?.find(section => section.id === sectionId);
+  const view = manifest.views?.find(view => view.id === input.viewId);
+  return {
+    pageId: destination.pageId,
+    ...(section ? { sectionId: section.id } : {}),
+    ...(view ? { viewId: view.id } : {}),
+  };
 }
diff --git a/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json b/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
new file mode 100644
index 0000000000..beec60b9e1
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
@@ -0,0 +1,211 @@
+{
+  "pages": {
+    "basics": {
+      "pageId": "application.general"
+    },
+    "appearance": {
+      "pageId": "application.appearance"
+    },
+    "font": {
+      "pageId": "application.appearance"
+    },
+    "fonts": {
+      "pageId": "application.appearance"
+    },
+    "session-personalization": {
+      "pageId": "application.pet"
+    },
+    "application.voice": {
+      "pageId": "application.input",
+      "sectionId": "voice"
+    },
+    "application.shortcuts": {
+      "pageId": "application.input",
+      "sectionId": "shortcuts"
+    },
+    "keyboard": {
+      "pageId": "application.input",
+      "sectionId": "shortcuts"
+    },
+    "shortcuts": {
+      "pageId": "application.input",
+      "sectionId": "shortcuts"
+    },
+    "keybindings": {
+      "pageId": "application.input",
+      "sectionId": "shortcuts"
+    },
+    "hotkeys": {
+      "pageId": "application.input",
+      "sectionId": "shortcuts"
+    },
+    "voice-input": {
+      "pageId": "application.input",
+      "sectionId": "voice"
+    },
+    "application.development": {
+      "pageId": "development.terminal"
+    },
+    "application.terminal": {
+      "pageId": "development.terminal"
+    },
+    "application.editor": {
+      "pageId": "development.editor"
+    },
+    "editor": {
+      "pageId": "development.editor"
+    },
+    "terminal": {
+      "pageId": "development.terminal"
+    },
+    "models": {
+      "pageId": "ai.models"
+    },
+    "ai.memory": {
+      "pageId": "ai.session-memory",
+      "sectionId": "memory"
+    },
+    "memories": {
+      "pageId": "ai.session-memory",
+      "sectionId": "memory"
+    },
+    "workspace.session": {
+      "pageId": "ai.session-memory",
+      "sectionId": "session"
+    },
+    "session-config": {
+      "pageId": "ai.session-memory",
+      "sectionId": "session"
+    },
+    "session-permissions": {
+      "pageId": "ai.permissions"
+    },
+    "tools.execution": {
+      "pageId": "ai.execution"
+    },
+    "tools.device-control": {
+      "pageId": "tools.desktop-control"
+    },
+    "tools.browser-control": {
+      "pageId": "tools.desktop-control"
+    },
+    "review": {
+      "pageId": "ai.execution"
+    },
+    "deep-review": {
+      "pageId": "ai.execution"
+    },
+    "code-review": {
+      "pageId": "ai.execution"
+    },
+    "review-team": {
+      "pageId": "ai.execution"
+    },
+    "workspace.worktrees": {
+      "pageId": "development.workspace",
+      "sectionId": "worktrees"
+    },
+    "worktrees": {
+      "pageId": "development.workspace",
+      "sectionId": "worktrees"
+    },
+    "quick-actions": {
+      "pageId": "tools.automation",
+      "sectionId": "quick-actions"
+    },
+    "hooks": {
+      "pageId": "tools.automation",
+      "sectionId": "hooks"
+    },
+    "tools.webSearch": {
+      "pageId": "tools.web-search"
+    },
+    "mcp-tools": {
+      "pageId": "tools.mcp"
+    },
+    "tools.acp": {
+      "pageId": "tools.external-agents"
+    },
+    "acp-agents": {
+      "pageId": "tools.external-agents"
+    },
+    "usage-statistics": {
+      "pageId": "data.usage"
+    },
+    "archived-sessions": {
+      "pageId": "data.archived"
+    },
+    "data.history": {
+      "pageId": "data.usage"
+    },
+    "logging": {
+      "pageId": "data.diagnostics"
+    }
+  },
+  "views": {
+    "tools.execution": {
+      "common": {
+        "pageId": "ai.permissions"
+      },
+      "advanced": {
+        "pageId": "ai.execution"
+      }
+    },
+    "tools.automation": {
+      "quick-actions": {
+        "pageId": "tools.automation",
+        "sectionId": "quick-actions"
+      },
+      "hooks": {
+        "pageId": "tools.automation",
+        "sectionId": "hooks"
+      }
+    }
+  },
+  "capabilities": {
+    "feature.computer-use": {
+      "destination": {
+        "pageId": "tools.desktop-control"
+      }
+    },
+    "setting.application.appearance": {
+      "items": {
+        "language": {
+          "pageId": "application.general"
+        }
+      }
+    },
+    "setting.workspace.session": {
+      "items": {
+        "accelerated-search": {
+          "pageId": "development.workspace",
+          "sectionId": "workspace-search"
+        },
+        "search-index": {
+          "pageId": "development.workspace",
+          "sectionId": "workspace-search"
+        },
+        "remote-behavior": {
+          "pageId": "development.workspace",
+          "sectionId": "workspace-search"
+        }
+      }
+    },
+    "setting.tools.execution": {
+      "items": {
+        "computer-use": {
+          "pageId": "tools.desktop-control"
+        },
+        "computer-use-permissions": {
+          "pageId": "tools.desktop-control"
+        },
+        "browser-auto-connect": {
+          "pageId": "tools.desktop-control"
+        },
+        "browser-setup": {
+          "pageId": "tools.desktop-control"
+        }
+      }
+    }
+  }
+}
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
index 7dd3066e23..a93929adca 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
@@ -1,166 +1,124 @@
-import { describe, expect, it, vi } from 'vitest';
-import {
-  isLegacyEcosystemCompatibilityDestination,
-  resolveSettingsDestination,
-} from './settingsDestination';
-import {
-  SETTINGS_CATEGORIES,
-  SETTINGS_PAGE_MANIFESTS,
-} from './settingsRegistry';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { registerSettingsDraft, resetSettingsDraftRegistryForTests, getSettingsDraftSnapshot } from '@/infrastructure/config/settingsDraftRegistry';
+import { isLegacyEcosystemCompatibilityDestination, resolveSettingsDestination } from './settingsDestination';
+import { SETTINGS_CATEGORIES, SETTINGS_PAGE_MANIFESTS, getSettingsPageManifest, isSettingsPageId } from './settingsRegistry';
 import { useSettingsStore } from './settingsStore';
-import type { SettingsDestination } from './settingsTypes';
+import migrations from './settingsDestinationMigrations.json';
+import type { SettingsDestinationInput } from './settingsDestination';
 
 vi.mock('@/infrastructure/i18n/core/I18nService', () => ({
   i18nService: { loadNamespace: vi.fn(async () => undefined) },
 }));
 
-describe('settings information architecture', () => {
-  it('uses five ownership categories and twenty canonical pages', () => {
-    expect(SETTINGS_CATEGORIES.map((category) => category.id)).toEqual([
-      'application',
-      'ai',
-      'workspace',
-      'tools',
-      'data',
-    ]);
-    expect(SETTINGS_PAGE_MANIFESTS).toHaveLength(20);
-    expect(new Set(SETTINGS_PAGE_MANIFESTS.map((page) => page.id)).size).toBe(20);
-  });
-
-  it('keeps memory with AI, pet with application, and review inside execution', () => {
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'ai.memory')?.categoryId).toBe('ai');
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.pet')?.categoryId).toBe('application');
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => page.id.includes('review'))).toBe(false);
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.execution')?.searchPhrases)
-      .toContainEqual({ namespace: 'settings/review-capacity', key: 'capacity.title' });
-  });
-
-  it('keeps execution and permissions on one page, with browser and desktop control in one page', () => {
-    const execution = SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.execution');
-    const control = SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.desktop-control');
-
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => page.id === 'tools.device-control')).toBe(false);
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => page.id === 'tools.browser-control')).toBe(false);
-    expect(execution?.views).toBeUndefined();
-    expect(execution?.searchPhrases)
-      .toContainEqual({ namespace: 'settings/runtime', key: 'permissionPolicy.sectionTitle' });
-    expect(execution?.searchPhrases)
-      .toContainEqual({ namespace: 'settings/runtime', key: 'toolExecution.sectionTitle' });
-    expect(control?.labelKey).toBe('navigation.pages.browserDesktopControl.label');
-    expect(control?.searchPhrases)
-      .toContainEqual({ namespace: 'settings/runtime', key: 'computerUse.sectionTitle' });
-    expect(control?.searchPhrases)
-      .toContainEqual({ namespace: 'settings/runtime', key: 'browserControl.sectionTitle' });
-    expect(resolveSettingsDestination('tools.device-control')).toEqual({ pageId: 'tools.desktop-control' });
-    expect(resolveSettingsDestination('tools.browser-control')).toEqual({ pageId: 'tools.desktop-control' });
-    expect(resolveSettingsDestination('review')).toEqual({ pageId: 'tools.execution' });
-  });
-
-  it('normalizes the retired browser-control page at the store boundary', () => {
-    useSettingsStore.getState().openDestination({
-      pageId: 'tools.browser-control',
-    } as unknown as SettingsDestination);
-
-    expect(useSettingsStore.getState().activePageId).toBe('tools.desktop-control');
-    expect(useSettingsStore.getState().pageTransitionTarget).toBe('tools.desktop-control');
-  });
-
-  it('keeps Assistant ownership outside Settings and model preferences with network proxy', () => {
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => page.id.includes('assistant'))).toBe(false);
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'ai.models')?.searchPhrases)
-      .toEqual(expect.arrayContaining([
-        { namespace: 'settings/default-model', key: 'sections.defaults' },
-        { namespace: 'settings/default-model', key: 'sections.proxy' },
-      ]));
-  });
+afterEach(() => {
+  resetSettingsDraftRegistryForTests();
+  useSettingsStore.setState(useSettingsStore.getInitialState());
+});
 
-  it('keeps external-source governance outside Settings while retaining WebSearch, MCP, and ACP owners', () => {
-    expect(SETTINGS_CATEGORIES.find((category) => category.id === 'tools')?.pages.map((page) => page.id))
-      .toEqual([
-        'tools.execution',
-        'tools.desktop-control',
-        'tools.automation',
-        'tools.webSearch',
-        'tools.mcp',
-        'tools.acp',
-      ]);
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => page.id === 'tools.integrations')).toBe(false);
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.mcp')?.views).toBeUndefined();
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.acp')?.views?.map((view) => view.id))
-      .toEqual(['local', 'ssh', 'json']);
+describe('settings information architecture', () => {
+  it('groups flat pages by ownership and keeps the pet independent', () => {
+    expect(Object.fromEntries(SETTINGS_CATEGORIES.map(category => [category.id, category.pages.map(page => page.id)]))).toEqual({
+      application: ['application.general', 'application.appearance', 'application.pet', 'application.input'],
+      ai: ['ai.models', 'ai.session-memory', 'ai.execution', 'ai.permissions'],
+      development: ['development.editor', 'development.terminal', 'development.workspace'],
+      tools: ['tools.web-search', 'tools.desktop-control', 'tools.mcp', 'tools.external-agents', 'tools.automation'],
+      data: ['data.usage', 'data.archived', 'data.diagnostics'],
+    });
+    expect(new Set(SETTINGS_PAGE_MANIFESTS.map(page => page.id)).size).toBe(19);
+    expect(SETTINGS_PAGE_MANIFESTS.filter(page => page.views?.length).map(page => page.id)).toEqual(['tools.external-agents']);
+    expect(getSettingsPageManifest('tools.external-agents').views?.map(view => view.id)).toEqual(['local', 'ssh', 'json']);
+    expect(getSettingsPageManifest('application.input').sections?.map(section => section.id)).toEqual(['voice', 'shortcuts']);
+    expect(getSettingsPageManifest('application.pet').sections?.map(section => section.id)).toEqual(['voice-call', 'pet']);
+    expect(getSettingsPageManifest('tools.automation').sections?.map(section => section.id)).toEqual(['quick-actions', 'hooks']);
   });
 
-  it('keeps automation as a page with deep-linkable views', () => {
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'tools.automation')?.views?.map((view) => view.id))
-      .toEqual(['quick-actions', 'hooks']);
+  it('keeps review with execution, permissions separate, and browser control with desktop control', () => {
+    expect(getSettingsPageManifest('ai.execution').searchPhrases).toContainEqual({ namespace: 'settings/review-capacity', key: 'capacity.title' });
+    expect(getSettingsPageManifest('ai.execution').searchPhrases).not.toContainEqual({ namespace: 'settings/runtime', key: 'permissionPolicy.sectionTitle' });
+    expect(getSettingsPageManifest('ai.permissions').searchPhrases).toContainEqual({ namespace: 'settings/runtime', key: 'permissionPolicy.sectionTitle' });
+    expect(getSettingsPageManifest('tools.desktop-control').searchPhrases).toEqual(expect.arrayContaining([
+      { namespace: 'settings/runtime', key: 'computerUse.sectionTitle' },
+      { namespace: 'settings/runtime', key: 'browserControl.sectionTitle' },
+    ]));
   });
 
-  it('exposes voice and shortcuts as independent application pages', () => {
-    const applicationPages = SETTINGS_CATEGORIES.find((category) => category.id === 'application')?.pages;
-
-    expect(applicationPages?.map((page) => page.id)).toEqual([
-      'application.general',
-      'application.appearance',
-      'application.pet',
-      'application.voice',
-      'application.shortcuts',
-      'application.terminal',
-      'application.editor',
-    ]);
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.voice')?.views)
-      .toBeUndefined();
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.shortcuts')?.views)
-      .toBeUndefined();
-    expect(resolveSettingsDestination('application.input')).toEqual({ pageId: 'application.voice' });
-    expect(resolveSettingsDestination('shortcuts')).toEqual({ pageId: 'application.shortcuts' });
+  it('keeps models with network settings and external-source governance outside Settings', () => {
+    expect(getSettingsPageManifest('ai.models').searchPhrases).toEqual(expect.arrayContaining([
+      { namespace: 'settings/default-model', key: 'sections.defaults' },
+      { namespace: 'settings/default-model', key: 'sections.proxy' },
+    ]));
+    expect(SETTINGS_PAGE_MANIFESTS.some(page => /assistant|integrations|review/.test(page.id))).toBe(false);
+    expect(isLegacyEcosystemCompatibilityDestination('external-sources')).toBe(true);
+    expect(isLegacyEcosystemCompatibilityDestination({ pageId: 'tools.integrations' })).toBe(true);
   });
 
-  it('exposes terminal and editor as independent application pages', () => {
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.terminal')?.views)
-      .toBeUndefined();
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.editor')?.views)
-      .toBeUndefined();
-    expect(resolveSettingsDestination('application.development')).toEqual({
-      pageId: 'application.terminal',
-    });
-    expect(resolveSettingsDestination('terminal')).toEqual({ pageId: 'application.terminal' });
-    expect(resolveSettingsDestination('editor')).toEqual({ pageId: 'application.editor' });
+  it.each([
+    ['application.voice', { pageId: 'application.input', sectionId: 'voice' }],
+    ['shortcuts', { pageId: 'application.input', sectionId: 'shortcuts' }],
+    ['application.shortcuts', { pageId: 'application.input', sectionId: 'shortcuts' }],
+    ['application.development', { pageId: 'development.terminal' }],
+    ['terminal', { pageId: 'development.terminal' }],
+    ['editor', { pageId: 'development.editor' }],
+    ['ai.memory', { pageId: 'ai.session-memory', sectionId: 'memory' }],
+    ['workspace.session', { pageId: 'ai.session-memory', sectionId: 'session' }],
+    ['workspace.worktrees', { pageId: 'development.workspace', sectionId: 'worktrees' }],
+    ['tools.execution', { pageId: 'ai.execution' }],
+    ['session-permissions', { pageId: 'ai.permissions' }],
+    ['review', { pageId: 'ai.execution' }],
+    ['tools.device-control', { pageId: 'tools.desktop-control' }],
+    ['tools.browser-control', { pageId: 'tools.desktop-control' }],
+    ['hooks', { pageId: 'tools.automation', sectionId: 'hooks' }],
+    ['quick-actions', { pageId: 'tools.automation', sectionId: 'quick-actions' }],
+    ['tools.webSearch', { pageId: 'tools.web-search' }],
+    ['acp-agents', { pageId: 'tools.external-agents' }],
+    ['mcp-tools', { pageId: 'tools.mcp' }],
+    ['usage-statistics', { pageId: 'data.usage' }],
+    ['archived-sessions', { pageId: 'data.archived' }],
+    ['data.history', { pageId: 'data.usage' }],
+  ])('migrates an existing %s link and round-trips the new destination', (oldId, expected) => {
+    const destination = resolveSettingsDestination(oldId);
+    expect(destination).toEqual(expected);
+    expect(resolveSettingsDestination(destination)).toEqual(destination);
+    useSettingsStore.getState().openDestination({ pageId: oldId });
+    expect(useSettingsStore.getState().activePageId).toBe(destination.pageId);
+    expect(useSettingsStore.getState().activeSectionId).toBe(destination.sectionId ?? null);
   });
 
-  it('keeps appearance packages discoverable inside Appearance', () => {
-    const appearance = SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'application.appearance');
-
-    expect(appearance?.searchPhrases).toEqual(expect.arrayContaining([
-      { namespace: 'settings/appearance', key: 'package.title' },
-    ]));
-    expect(SETTINGS_PAGE_MANIFESTS.some((page) => /motion|package/.test(page.id))).toBe(false);
+  it('migrates old view payloads and drops targets that do not belong to the destination', () => {
+    expect(resolveSettingsDestination({ pageId: 'tools.execution', viewId: 'common' })).toEqual({ pageId: 'ai.permissions' });
+    expect(resolveSettingsDestination({ pageId: 'tools.execution', viewId: 'advanced' })).toEqual({ pageId: 'ai.execution' });
+    expect(resolveSettingsDestination({ pageId: 'tools.automation', viewId: 'hooks' })).toEqual({ pageId: 'tools.automation', sectionId: 'hooks' });
+    expect(resolveSettingsDestination({ pageId: 'tools.acp', viewId: 'ssh' })).toEqual({ pageId: 'tools.external-agents', viewId: 'ssh' });
+    expect(resolveSettingsDestination({ pageId: 'ai.models', sectionId: 'hooks', viewId: 'json' })).toEqual({ pageId: 'ai.models' });
   });
 
-  it('exposes usage and archived sessions as separate second-level pages', () => {
-    const dataPages = SETTINGS_CATEGORIES.find((category) => category.id === 'data')?.pages;
-
-    expect(dataPages?.map((page) => page.id)).toEqual([
-      'data.usage',
-      'data.archived',
-      'data.diagnostics',
-    ]);
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'data.usage')?.views).toBeUndefined();
-    expect(SETTINGS_PAGE_MANIFESTS.find((page) => page.id === 'data.archived')?.views).toBeUndefined();
+  it('keeps shared catalog migrations on real pages and their owned sections', () => {
+    const targets: SettingsDestinationInput[] = [
+      ...Object.values(migrations.pages),
+      ...Object.values(migrations.views).flatMap(Object.values),
+      ...Object.values(migrations.capabilities).flatMap((migration) => [
+        ...('destination' in migration ? [migration.destination] : []),
+        ...('items' in migration ? Object.values(migration.items) : []),
+      ]),
+    ];
+    for (const target of targets) {
+      expect(isSettingsPageId(target.pageId), target.pageId).toBe(true);
+      expect(resolveSettingsDestination(target)).toEqual(target);
+    }
   });
 
-  it('contains old links at the upgrade boundary and emits canonical destinations', () => {
-    expect(resolveSettingsDestination('hooks')).toEqual({
-      pageId: 'tools.automation',
-      viewId: 'hooks',
-    });
-    expect(isLegacyEcosystemCompatibilityDestination('external-sources')).toBe(true);
-    expect(isLegacyEcosystemCompatibilityDestination('tools.integrations')).toBe(true);
-    expect(isLegacyEcosystemCompatibilityDestination({ pageId: 'tools.integrations' })).toBe(true);
-    expect(resolveSettingsDestination('mcp-tools')).toEqual({ pageId: 'tools.mcp' });
-    expect(resolveSettingsDestination('acp-agents')).toEqual({ pageId: 'tools.acp' });
-    expect(resolveSettingsDestination('ai.models')).toEqual({ pageId: 'ai.models' });
-    expect(resolveSettingsDestination('usage-statistics')).toEqual({ pageId: 'data.usage' });
-    expect(resolveSettingsDestination('archived-sessions')).toEqual({ pageId: 'data.archived' });
-    expect(resolveSettingsDestination('data.history')).toEqual({ pageId: 'data.usage' });
+  it('allows inline navigation without discarding edits and guards leaving the merged page', () => {
+    useSettingsStore.getState().openDestination({ pageId: 'application.input', sectionId: 'shortcuts' });
+    const save = vi.fn();
+    const discard = vi.fn();
+    registerSettingsDraft({ id: 'shortcuts', pageId: 'application.input', label: 'Shortcuts', dirty: true, save, discard });
+    useSettingsStore.getState().openDestination({ pageId: 'application.voice' });
+    expect(useSettingsStore.getState().activeSectionId).toBe('voice');
+    expect(getSettingsDraftSnapshot().pendingNavigation).toBeNull();
+    useSettingsStore.getState().openPage('application.general');
+    expect(useSettingsStore.getState().activePageId).toBe('application.input');
+    expect(getSettingsDraftSnapshot().pendingNavigation).not.toBeNull();
+    expect(save).not.toHaveBeenCalled();
+    expect(discard).not.toHaveBeenCalled();
   });
 });
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
index 0ee63423f9..84b4839352 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
@@ -1,11 +1,11 @@
+import type { I18nNamespace } from '@/infrastructure/i18n/types';
 import { lazyWithRecovery, type RecoverableLazyComponent } from '@/shared/utils/lazyWithRecovery';
 import type { ComponentType } from 'react';
-import { i18nService } from '@/infrastructure/i18n/core/I18nService';
-import type { I18nNamespace } from '@/infrastructure/i18n/types';
 import type {
   SettingsCategoryId,
   SettingsPageId,
   SettingsPageProps,
+  SettingsSectionId,
   SettingsViewId,
 } from './settingsTypes';
 
@@ -21,6 +21,13 @@ export interface SettingsViewManifest {
   searchPhrases: readonly SettingsSearchPhrase[];
 }
 
+export interface SettingsSectionManifest {
+  id: SettingsSectionId;
+  labelKey: string;
+  keywords: readonly string[];
+  searchPhrases: readonly SettingsSearchPhrase[];
+}
+
 type SettingsPageModule = { default: ComponentType<SettingsPageProps> };
 
 export interface SettingsPageManifest {
@@ -32,6 +39,7 @@ export interface SettingsPageManifest {
   namespaces: readonly I18nNamespace[];
   searchPhrases: readonly SettingsSearchPhrase[];
   views?: readonly SettingsViewManifest[];
+  sections?: readonly SettingsSectionManifest[];
   load: () => Promise<SettingsPageModule>;
   component: RecoverableLazyComponent<ComponentType<SettingsPageProps>>;
 }
@@ -55,9 +63,10 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
     categoryId: 'application',
     labelKey: 'navigation.pages.general.label',
     descriptionKey: 'navigation.pages.general.description',
-    keywords: ['startup', 'launch', 'update', 'sleep', 'window', 'notification'],
+    keywords: ['startup', 'launch', 'update', 'sleep', 'window', 'notification', 'language', 'locale'],
     namespaces: ['settings', 'settings/application'],
     searchPhrases: [
+      phrase('settings/application', 'appearance.language'),
       phrase('settings/application', 'applicationGroups.startupAndUpdates.title'),
       phrase('settings/application', 'applicationGroups.windowAndNotifications.title'),
       phrase('settings/application', 'launchAtLogin.toggleLabel'),
@@ -65,9 +74,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/application', 'autoUpdate.toggleLabel'),
       phrase('settings/application', 'notifications.title'),
     ],
-    load: () => import('../../../infrastructure/config/components/ApplicationSettingsPages').then((module) => ({
-      default: module.GeneralSettingsPage,
-    })),
+    load: () => import('./pages/application/GeneralSettingsPage'),
   }),
   definePage({
     id: 'application.appearance',
@@ -75,7 +82,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
     labelKey: 'navigation.pages.appearance.label',
     descriptionKey: 'navigation.pages.appearance.description',
     keywords: [
-      'theme', 'language', 'locale', 'font', 'size', 'motion', 'animation',
+      'theme', 'font', 'size', 'motion', 'animation',
       'appearance pack', 'skin', 'import',
     ],
     namespaces: ['settings/appearance', 'settings/application'],
@@ -86,7 +93,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/appearance', 'package.description'),
       phrase('settings/application', 'appearance.fontSize.title'),
     ],
-    load: () => import('../../../infrastructure/config/components/AppearanceSettingsPage'),
+    load: () => import('./pages/application/AppearanceSettingsPage'),
   }),
   definePage({
     id: 'application.pet',
@@ -94,72 +101,40 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
     labelKey: 'navigation.pages.pet.label',
     descriptionKey: 'navigation.pages.pet.description',
     keywords: ['pet', 'companion', 'desktop', 'input', 'sprite'],
-    namespaces: ['settings', 'settings/runtime', 'settings/agentic-tools'],
+    namespaces: ['settings', 'settings/runtime', 'settings/agentic-tools', 'settings/voice-input'],
     searchPhrases: [
       phrase('settings/runtime', 'features.pet.title'),
       phrase('settings/runtime', 'features.pet.petDescription'),
     ],
-    load: () => import('../../../infrastructure/config/components/RuntimeSettingsPages').then((module) => ({
-      default: module.PetSettingsPage,
-    })),
-  }),
-  definePage({
-    id: 'application.voice',
-    categoryId: 'application',
-    labelKey: 'navigation.pages.voice.label',
-    descriptionKey: 'navigation.pages.voice.description',
-    keywords: ['voice', 'speech', 'microphone', 'dictation', 'transcription'],
-    namespaces: ['settings', 'settings/voice-input'],
-    searchPhrases: [
-      phrase('settings/voice-input', 'title'),
-      phrase('settings/voice-input', 'subtitle'),
-    ],
-    load: () => import('../../../infrastructure/config/components/VoiceInputConfig'),
-  }),
-  definePage({
-    id: 'application.shortcuts',
-    categoryId: 'application',
-    labelKey: 'navigation.pages.shortcuts.label',
-    descriptionKey: 'navigation.pages.shortcuts.description',
-    keywords: ['keyboard', 'shortcut', 'keybinding', 'hotkey'],
-    namespaces: ['settings'],
-    searchPhrases: [
-      phrase('settings', 'keyboard.title'),
-      phrase('settings', 'keyboard.description'),
+    sections: [
+      { id: 'voice-call', labelKey: 'navigation.sections.voice-call', keywords: ['realtime', 'voice call', 'assistant', 'volcengine'], searchPhrases: [phrase('settings/voice-input', 'voiceCall.title'), phrase('settings/voice-input', 'voiceCall.description')] },
+      { id: 'pet', labelKey: 'navigation.sections.pet', keywords: ['pet', 'companion'], searchPhrases: [phrase('settings/runtime', 'features.pet.title')] },
     ],
-    load: () => import('./components/KeyboardShortcutsTab'),
+    load: () => import('./pages/application/PetAssistantSettingsPage'),
   }),
   definePage({
-    id: 'application.terminal',
+    id: 'application.input',
     categoryId: 'application',
-    labelKey: 'navigation.pages.terminal.label',
-    descriptionKey: 'navigation.pages.terminal.description',
-    keywords: ['terminal', 'shell', 'pwsh', 'powershell', 'panel'],
-    namespaces: ['settings', 'settings/application'],
-    searchPhrases: [
-      phrase('settings/application', 'terminal.sections.terminal'),
-      phrase('settings/application', 'terminal.controls.description'),
-    ],
-    load: () => import('../../../infrastructure/config/components/ApplicationSettingsPages').then((module) => ({
-      default: module.TerminalSettingsPage,
-    })),
-  }),
-  definePage({
-    id: 'application.editor',
-    categoryId: 'application',
-    labelKey: 'navigation.pages.editor.label',
-    descriptionKey: 'navigation.pages.editor.description',
-    keywords: ['editor', 'font', 'indent', 'minimap', 'word wrap', 'format'],
-    namespaces: ['settings/editor'],
-    searchPhrases: [
-      phrase('settings/editor', 'title'),
-      phrase('settings/editor', 'subtitle'),
-      phrase('settings/editor', 'sections.appearance.title'),
-      phrase('settings/editor', 'sections.behavior.title'),
-      phrase('settings/editor', 'sections.display.title'),
-      phrase('settings/editor', 'sections.advanced.title'),
+    labelKey: 'navigation.pages.input.label',
+    descriptionKey: 'navigation.pages.input.description',
+    keywords: ['input', 'voice', 'speech', 'keyboard', 'shortcut', 'keybinding', 'hotkey'],
+    namespaces: ['settings', 'settings/voice-input'],
+    searchPhrases: [],
+    sections: [
+      {
+        id: 'voice',
+        labelKey: 'navigation.sections.voice',
+        keywords: ['voice', 'speech', 'microphone', 'dictation', 'transcription'],
+        searchPhrases: [phrase('settings/voice-input', 'title'), phrase('settings/voice-input', 'subtitle')],
+      },
+      {
+        id: 'shortcuts',
+        labelKey: 'navigation.sections.shortcuts',
+        keywords: ['keyboard', 'shortcut', 'keybinding', 'hotkey'],
+        searchPhrases: [phrase('settings', 'keyboard.title'), phrase('settings', 'keyboard.description')],
+      },
     ],
-    load: () => import('./pages/EditorSettingsPage'),
+    load: () => import('./pages/application/InputSettingsPage'),
   }),
   definePage({
     id: 'ai.models',
@@ -177,131 +152,137 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/models', 'modelsDevCatalog.title'),
       phrase('settings/models', 'streamIdleTimeout.title'),
     ],
-    load: () => import('../../../infrastructure/config/components/ModelSettingsPage'),
+    load: () => import('./pages/ai/ModelSettingsPage'),
   }),
   definePage({
-    id: 'ai.memory',
+    id: 'ai.session-memory',
     categoryId: 'ai',
-    labelKey: 'navigation.pages.memory.label',
-    descriptionKey: 'navigation.pages.memory.description',
-    keywords: ['memory', 'remember', 'recall', 'consolidation', 'learning', 'knowledge'],
-    namespaces: ['settings/memory'],
-    searchPhrases: [
-      phrase('settings/memory', 'title'),
-      phrase('settings/memory', 'subtitle'),
-      phrase('settings/memory', 'sections.basic.title'),
-      phrase('settings/memory', 'sections.models.title'),
-      phrase('settings/memory', 'sections.advanced.title'),
-      phrase('settings/memory', 'fields.memoryEnabled.label'),
-      phrase('settings/memory', 'fields.generateForBtwSessions.label'),
-      phrase('settings/memory', 'fields.externalContextPolicy.label'),
-      phrase('settings/memory', 'fields.extractModel.label'),
-      phrase('settings/memory', 'fields.consolidationModel.label'),
-      phrase('settings/memory', 'fields.maxRolloutsPerStartup.label'),
-      phrase('settings/memory', 'fields.maxRolloutsScanLimit.label'),
-      phrase('settings/memory', 'fields.phase1MaxConcurrency.label'),
-    ],
-    load: () => import('../../../infrastructure/config/components/MemorySettingsPage'),
-  }),
-  definePage({
-    id: 'workspace.session',
-    categoryId: 'workspace',
-    labelKey: 'navigation.pages.sessionWorkspace.label',
-    descriptionKey: 'navigation.pages.sessionWorkspace.description',
-    keywords: ['session', 'workspace', 'search', 'index', 'title'],
-    namespaces: ['settings', 'settings/runtime', 'settings/agentic-tools', 'settings/models'],
-    searchPhrases: [
-      phrase('settings/runtime', 'features.workspaceSearch.title'),
-      phrase('settings/models', 'sessionTitle.title'),
-    ],
-    load: () => import('../../../infrastructure/config/components/RuntimeSettingsPages').then((module) => ({
-      default: module.SessionWorkspaceSettingsPage,
-    })),
-  }),
-  definePage({
-    id: 'workspace.worktrees',
-    categoryId: 'workspace',
-    labelKey: 'navigation.pages.worktrees.label',
-    descriptionKey: 'navigation.pages.worktrees.description',
-    keywords: ['git', 'worktree', 'isolation', 'parallel', 'branch'],
-    namespaces: ['worktrees'],
-    searchPhrases: [
-      phrase('worktrees', 'settings.title'),
-      phrase('worktrees', 'settings.description'),
-      phrase('worktrees', 'management.title'),
+    labelKey: 'navigation.pages.sessionMemory.label',
+    descriptionKey: 'navigation.pages.sessionMemory.description',
+    keywords: ['session', 'memory', 'harness', 'title', 'remember', 'recall'],
+    namespaces: ['settings', 'settings/runtime', 'settings/models', 'settings/memory', 'flow-chat'],
+    searchPhrases: [],
+    sections: [
+      {
+        id: 'session',
+        labelKey: 'navigation.sections.session',
+        keywords: ['session', 'harness', 'mode', 'title'],
+        searchPhrases: [phrase('settings/runtime', 'defaultHarness.title'), phrase('settings/models', 'sessionTitle.title')],
+      },
+      {
+        id: 'memory',
+        labelKey: 'navigation.sections.memory',
+        keywords: ['memory', 'remember', 'recall', 'consolidation', 'learning', 'knowledge'],
+        searchPhrases: [
+          phrase('settings/memory', 'title'),
+          phrase('settings/memory', 'subtitle'),
+          phrase('settings/memory', 'sections.basic.title'),
+          phrase('settings/memory', 'sections.models.title'),
+          phrase('settings/memory', 'sections.advanced.title'),
+          phrase('settings/memory', 'fields.memoryEnabled.label'),
+          phrase('settings/memory', 'fields.generateForBtwSessions.label'),
+          phrase('settings/memory', 'fields.externalContextPolicy.label'),
+          phrase('settings/memory', 'fields.extractModel.label'),
+          phrase('settings/memory', 'fields.consolidationModel.label'),
+          phrase('settings/memory', 'fields.maxRolloutsPerStartup.label'),
+          phrase('settings/memory', 'fields.maxRolloutsScanLimit.label'),
+          phrase('settings/memory', 'fields.phase1MaxConcurrency.label'),
+        ],
+      },
     ],
-    load: () => import('../../../infrastructure/config/components/WorktreeSettingsPage'),
+    load: () => import('./pages/ai/SessionMemorySettingsPage'),
   }),
   definePage({
-    id: 'tools.execution',
-    categoryId: 'tools',
+    id: 'ai.execution',
+    categoryId: 'ai',
     labelKey: 'navigation.pages.execution.label',
     descriptionKey: 'navigation.pages.execution.description',
-    keywords: ['permission', 'approval', 'tool', 'timeout', 'parallel', 'review', 'json repair'],
+    keywords: ['tool', 'timeout', 'parallel', 'review', 'json repair'],
     namespaces: ['settings', 'settings/runtime', 'settings/agentic-tools', 'settings/review-capacity', 'settings/models'],
     searchPhrases: [
-      phrase('settings/runtime', 'permissionPolicy.sectionTitle'),
-      phrase('settings/runtime', 'permissionPolicy.globalRules'),
       phrase('settings/runtime', 'toolExecution.sectionTitle'),
       phrase('settings/runtime', 'deferredToolLoading.sectionTitle'),
       phrase('settings/review-capacity', 'capacity.title'),
       phrase('settings/models', 'toolArgumentJsonRepair.title'),
     ],
-    load: () => import('./pages/ExecutionSettingsPage'),
+    load: () => import('./pages/ai/ExecutionSettingsPage'),
   }),
   definePage({
-    id: 'tools.desktop-control',
-    categoryId: 'tools',
-    labelKey: 'navigation.pages.browserDesktopControl.label',
-    descriptionKey: 'navigation.pages.browserDesktopControl.description',
-    keywords: [
-      'browser', 'cdp', 'chrome', 'edge', 'remote debugging', 'connection',
-      'desktop', 'computer use', 'accessibility', 'screen capture', 'mouse', 'keyboard',
-    ],
+    id: 'ai.permissions',
+    categoryId: 'ai',
+    labelKey: 'navigation.pages.permissions.label',
+    descriptionKey: 'navigation.pages.permissions.description',
+    keywords: ['permission', 'approval', 'rules', 'allow', 'deny', 'full access'],
     namespaces: ['settings', 'settings/runtime'],
     searchPhrases: [
-      phrase('settings/runtime', 'computerUse.sectionTitle'),
-      phrase('settings/runtime', 'computerUse.accessibility'),
-      phrase('settings/runtime', 'computerUse.screenCapture'),
-      phrase('settings/runtime', 'browserControl.sectionTitle'),
-      phrase('settings/runtime', 'browserControl.preferredBrowser'),
-      phrase('settings/runtime', 'browserControl.autoConnectOnStartup'),
+      phrase('settings/runtime', 'permissionPolicy.sectionTitle'),
+      phrase('settings/runtime', 'permissionPolicy.globalRules'),
+      phrase('settings/runtime', 'permissionPolicy.showInChatInput'),
     ],
-    load: () => import('../../../infrastructure/config/components/RuntimeSettingsPages').then((module) => ({
-      default: module.BrowserDesktopControlSettingsPage,
-    })),
+    load: () => import('./pages/ai/PermissionsSettingsPage'),
   }),
   definePage({
-    id: 'tools.automation',
-    categoryId: 'tools',
-    labelKey: 'navigation.pages.automation.label',
-    descriptionKey: 'navigation.pages.automation.description',
-    keywords: ['automation', 'quick action', 'hook', 'lifecycle', 'command'],
-    namespaces: ['settings', 'settings/quick-actions', 'settings/hooks'],
+    id: 'development.editor',
+    categoryId: 'development',
+    labelKey: 'navigation.pages.editor.label',
+    descriptionKey: 'navigation.pages.editor.description',
+    keywords: ['editor', 'font', 'indent', 'minimap', 'word wrap', 'format'],
+    namespaces: ['settings/editor'],
+    searchPhrases: [
+      phrase('settings/editor', 'title'),
+      phrase('settings/editor', 'subtitle'),
+      phrase('settings/editor', 'sections.appearance.title'),
+      phrase('settings/editor', 'sections.behavior.title'),
+      phrase('settings/editor', 'sections.display.title'),
+      phrase('settings/editor', 'sections.advanced.title'),
+    ],
+    load: () => import('./pages/development/EditorSettingsPage'),
+  }),
+  definePage({
+    id: 'development.terminal',
+    categoryId: 'development',
+    labelKey: 'navigation.pages.terminal.label',
+    descriptionKey: 'navigation.pages.terminal.description',
+    keywords: ['terminal', 'shell', 'pwsh', 'powershell', 'panel'],
+    namespaces: ['settings', 'settings/application'],
+    searchPhrases: [
+      phrase('settings/application', 'terminal.sections.terminal'),
+      phrase('settings/application', 'terminal.controls.description'),
+    ],
+    load: () => import('./pages/development/TerminalSettingsPage'),
+  }),
+  definePage({
+    id: 'development.workspace',
+    categoryId: 'development',
+    labelKey: 'navigation.pages.workspaceGit.label',
+    descriptionKey: 'navigation.pages.workspaceGit.description',
+    keywords: ['workspace', 'git', 'worktree', 'isolation', 'branch'],
+    namespaces: ['settings', 'worktrees', 'settings/runtime', 'settings/quick-actions'],
     searchPhrases: [],
-    views: [
+    sections: [
       {
-        id: 'quick-actions',
-        labelKey: 'navigation.views.quick-actions',
-        keywords: ['quick action', 'commit', 'pull request', 'post coding', 'co-author', 'coauthor', 'attribution', 'github', 'https://github.com/bitfun-ai'],
-        searchPhrases: [
-          phrase('settings/quick-actions', 'page.title'),
-          phrase('settings/quick-actions', 'page.subtitle'),
-          phrase('settings/quick-actions', 'commitAttribution.title'),
-          phrase('settings/quick-actions', 'commitAttribution.label'),
-        ],
+        id: 'worktrees',
+        labelKey: 'navigation.sections.worktrees',
+        keywords: ['worktree', 'isolation', 'parallel', 'branch'],
+        searchPhrases: [phrase('worktrees', 'settings.title'), phrase('worktrees', 'settings.description'), phrase('worktrees', 'management.title')],
       },
       {
-        id: 'hooks',
-        labelKey: 'navigation.views.hooks',
-        keywords: ['hook', 'hooks', 'lifecycle', 'command'],
-        searchPhrases: [phrase('settings/hooks', 'title'), phrase('settings/hooks', 'activation.title')],
+        id: 'workspace-search',
+        labelKey: 'navigation.sections.workspace-search',
+        keywords: ['workspace search', 'files', 'index'],
+        searchPhrases: [phrase('settings/runtime', 'features.workspaceSearch.title')],
+      },
+      {
+        id: 'git',
+        labelKey: 'navigation.sections.git',
+        keywords: ['git', 'commit', 'co-author', 'coauthor', 'attribution', 'github'],
+        searchPhrases: [phrase('settings/quick-actions', 'commitAttribution.title'), phrase('settings/quick-actions', 'commitAttribution.label')],
       },
     ],
-    load: () => import('./pages/AutomationSettingsPage'),
+    load: () => import('./pages/development/WorkspaceGitSettingsPage'),
   }),
   definePage({
-    id: 'tools.webSearch',
+    id: 'tools.web-search',
     categoryId: 'tools',
     labelKey: 'navigation.pages.webSearch.label',
     descriptionKey: 'navigation.pages.webSearch.description',
@@ -313,7 +294,27 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/web-search', 'sections.http.title'),
       phrase('settings/web-search', 'sections.credential.title'),
     ],
-    load: () => import('../../../infrastructure/config/components/WebSearchSettingsPage'),
+    load: () => import('./pages/tools/WebSearchSettingsPage'),
+  }),
+  definePage({
+    id: 'tools.desktop-control',
+    categoryId: 'tools',
+    labelKey: 'navigation.pages.browserDesktopControl.label',
+    descriptionKey: 'navigation.pages.browserDesktopControl.description',
+    keywords: [
+      'browser', 'cdp', 'chrome', 'edge', 'remote debugging', 'connection',
+      'desktop', 'computer use', 'accessibility', 'screen capture', 'mouse', 'keyboard',
+    ],
+    namespaces: ['settings', 'settings/runtime'],
+    searchPhrases: [
+      phrase('settings/runtime', 'computerUse.sectionTitle'),
+      phrase('settings/runtime', 'computerUse.accessibility'),
+      phrase('settings/runtime', 'computerUse.screenCapture'),
+      phrase('settings/runtime', 'browserControl.sectionTitle'),
+      phrase('settings/runtime', 'browserControl.preferredBrowser'),
+      phrase('settings/runtime', 'browserControl.autoConnectOnStartup'),
+    ],
+    load: () => import('./pages/tools/DeviceControlSettingsPage'),
   }),
   definePage({
     id: 'tools.mcp',
@@ -326,10 +327,10 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/mcp-tools', 'title'),
       phrase('settings/mcp', 'section.serverList.title'),
     ],
-    load: () => import('../../../infrastructure/config/components/McpToolsConfig'),
+    load: () => import('./pages/tools/McpSettingsPage'),
   }),
   definePage({
-    id: 'tools.acp',
+    id: 'tools.external-agents',
     categoryId: 'tools',
     labelKey: 'navigation.pages.acp.label',
     descriptionKey: 'navigation.pages.acp.description',
@@ -359,7 +360,34 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
         searchPhrases: [phrase('settings/acp-agents', 'json.title')],
       },
     ],
-    load: () => import('./pages/AcpSettingsPage'),
+    load: () => import('./pages/tools/ExternalAgentsSettingsPage'),
+  }),
+  definePage({
+    id: 'tools.automation',
+    categoryId: 'tools',
+    labelKey: 'navigation.pages.automation.label',
+    descriptionKey: 'navigation.pages.automation.description',
+    keywords: ['automation', 'quick action', 'hook', 'lifecycle', 'command'],
+    namespaces: ['settings', 'settings/quick-actions', 'settings/hooks'],
+    searchPhrases: [],
+    sections: [
+      {
+        id: 'quick-actions',
+        labelKey: 'navigation.sections.quick-actions',
+        keywords: ['quick action', 'commit', 'pull request', 'post coding'],
+        searchPhrases: [
+          phrase('settings/quick-actions', 'page.title'),
+          phrase('settings/quick-actions', 'page.subtitle'),
+        ],
+      },
+      {
+        id: 'hooks',
+        labelKey: 'navigation.sections.hooks',
+        keywords: ['hook', 'hooks', 'lifecycle', 'command'],
+        searchPhrases: [phrase('settings/hooks', 'title'), phrase('settings/hooks', 'activation.title')],
+      },
+    ],
+    load: () => import('./pages/tools/AutomationSettingsPage'),
   }),
   definePage({
     id: 'data.usage',
@@ -369,7 +397,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
     keywords: ['usage', 'token', 'cost', 'statistics', 'request', 'cache', 'history'],
     namespaces: ['settings/usage'],
     searchPhrases: [phrase('settings/usage', 'title'), phrase('settings/usage', 'subtitle')],
-    load: () => import('../../../infrastructure/config/components/UsageStatisticsConfig'),
+    load: () => import('./pages/data/UsageStatisticsSettingsPage'),
   }),
   definePage({
     id: 'data.archived',
@@ -383,7 +411,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('common', 'nav.sessions.archivedSessionsDescription'),
       phrase('common', 'nav.sessions.restore'),
     ],
-    load: () => import('./components/ArchivedSessionsConfig'),
+    load: () => import('./pages/data/ArchivedSessionsSettingsPage'),
   }),
   definePage({
     id: 'data.diagnostics',
@@ -397,9 +425,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/application', 'logging.sections.level'),
       phrase('settings/application', 'logging.diagnostics.label'),
     ],
-    load: () => import('../../../infrastructure/config/components/ApplicationSettingsPages').then((module) => ({
-      default: module.DiagnosticsSettingsPage,
-    })),
+    load: () => import('./pages/data/DiagnosticsSettingsPage'),
   }),
 ] as const;
 
@@ -409,7 +435,7 @@ export interface SettingsCategory {
   pages: readonly SettingsPageManifest[];
 }
 
-const CATEGORY_ORDER: readonly SettingsCategoryId[] = ['application', 'ai', 'workspace', 'tools', 'data'];
+const CATEGORY_ORDER: readonly SettingsCategoryId[] = ['application', 'ai', 'development', 'tools', 'data'];
 
 export const SETTINGS_CATEGORIES: readonly SettingsCategory[] = CATEGORY_ORDER.map((categoryId) => ({
   id: categoryId,
@@ -435,6 +461,7 @@ export function isSettingsPageReady(pageId: SettingsPageId): boolean {
 }
 
 async function preloadNamespaces(namespaces: readonly I18nNamespace[]): Promise<void> {
+  const { i18nService } = await import('@/infrastructure/i18n/core/I18nService');
   await Promise.all(namespaces.map((namespace) => i18nService.loadNamespace(namespace).catch(() => undefined)));
 }
 
diff --git a/src/web-ui/src/app/scenes/settings/settingsStore.ts b/src/web-ui/src/app/scenes/settings/settingsStore.ts
index 1e8c10fbfb..5a1d936892 100644
--- a/src/web-ui/src/app/scenes/settings/settingsStore.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsStore.ts
@@ -1,22 +1,23 @@
-import { create } from 'zustand';
+import { requestSettingsNavigation } from '@/infrastructure/config/settingsDraftRegistry';
 import type { InteractionMotion } from '@/shared/utils/motionPreference';
+import { create } from 'zustand';
+import { resolveSettingsDestination, type SettingsDestinationInput } from './settingsDestination';
 import { DEFAULT_SETTINGS_PAGE_ID } from './settingsRegistry';
-import { resolveSettingsDestination } from './settingsDestination';
-import { requestSettingsNavigation } from '@/infrastructure/config/settingsDraftRegistry';
 import type {
-  SettingsDestination,
   SettingsPageId,
-  SettingsViewId,
+  SettingsSectionId,
+  SettingsViewId
 } from './settingsTypes';
 
 interface SettingsState {
   activePageId: SettingsPageId;
   activeViewId: SettingsViewId | null;
+  activeSectionId: SettingsSectionId | null;
   navigationRequestId: number;
   pageTransitionTarget: SettingsPageId | null;
   pageTransitionMotion: InteractionMotion;
   pageTransitionSequence: number;
-  openDestination: (destination: SettingsDestination, motion?: InteractionMotion) => void;
+  openDestination: (destination: SettingsDestinationInput, motion?: InteractionMotion) => void;
   openPage: (pageId: SettingsPageId, motion?: InteractionMotion) => void;
   setActiveView: (viewId: SettingsViewId) => void;
   searchQuery: string;
@@ -26,6 +27,7 @@ interface SettingsState {
 export const useSettingsStore = create<SettingsState>((set, get) => ({
   activePageId: DEFAULT_SETTINGS_PAGE_ID,
   activeViewId: null,
+  activeSectionId: null,
   navigationRequestId: 0,
   pageTransitionTarget: null,
   pageTransitionMotion: 'instant',
@@ -33,8 +35,8 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   searchQuery: '',
 
   openDestination: (destination, motion = 'instant') => {
-    const resolvedDestination = resolveSettingsDestination(destination.pageId);
-    const nextViewId = destination.viewId ?? resolvedDestination.viewId ?? null;
+    const resolvedDestination = resolveSettingsDestination(destination);
+    const nextViewId = resolvedDestination.viewId ?? null;
     const current = get();
     requestSettingsNavigation(
       {
@@ -49,6 +51,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       () => set((state) => ({
         activePageId: resolvedDestination.pageId,
         activeViewId: nextViewId,
+        activeSectionId: resolvedDestination.sectionId ?? null,
         navigationRequestId: state.navigationRequestId + 1,
         pageTransitionTarget: resolvedDestination.pageId,
         pageTransitionMotion: motion,
@@ -57,22 +60,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     );
   },
   openPage: (pageId, motion = 'instant') => {
-    const current = get();
-    requestSettingsNavigation(
-      {
-        pageId: current.activePageId,
-        viewId: current.activeViewId ?? undefined,
-      },
-      { kind: 'settings', pageId },
-      () => set((state) => ({
-        activePageId: pageId,
-        activeViewId: null,
-        navigationRequestId: state.navigationRequestId + 1,
-        pageTransitionTarget: pageId,
-        pageTransitionMotion: motion,
-        pageTransitionSequence: state.pageTransitionSequence + 1,
-      })),
-    );
+    get().openDestination({ pageId }, motion);
   },
   setActiveView: (viewId) => {
     const current = get();
@@ -88,6 +76,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       },
       () => set((state) => ({
         activeViewId: viewId,
+        activeSectionId: null,
         navigationRequestId: state.navigationRequestId + 1,
       })),
     );
diff --git a/src/web-ui/src/app/scenes/settings/settingsTypes.ts b/src/web-ui/src/app/scenes/settings/settingsTypes.ts
index 848833b8b5..a5298c083d 100644
--- a/src/web-ui/src/app/scenes/settings/settingsTypes.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsTypes.ts
@@ -1,7 +1,7 @@
 export type SettingsCategoryId =
   | 'application'
   | 'ai'
-  | 'workspace'
+  | 'development'
   | 'tools'
   | 'data';
 
@@ -9,40 +9,51 @@ export type SettingsPageId =
   | 'application.general'
   | 'application.appearance'
   | 'application.pet'
-  | 'application.voice'
-  | 'application.shortcuts'
-  | 'application.terminal'
-  | 'application.editor'
+  | 'application.input'
   | 'ai.models'
-  | 'ai.memory'
-  | 'workspace.session'
-  | 'workspace.worktrees'
-  | 'tools.execution'
+  | 'ai.session-memory'
+  | 'ai.execution'
+  | 'ai.permissions'
+  | 'development.editor'
+  | 'development.terminal'
+  | 'development.workspace'
   | 'tools.desktop-control'
   | 'tools.automation'
-  | 'tools.webSearch'
+  | 'tools.web-search'
   | 'tools.mcp'
-  | 'tools.acp'
+  | 'tools.external-agents'
   | 'data.usage'
   | 'data.archived'
   | 'data.diagnostics';
 
 export type SettingsViewId =
-  | 'common'
-  | 'advanced'
   | 'local'
   | 'ssh'
-  | 'json'
+  | 'json';
+
+/** Anchors in a single settings page, not nested pages or tab panels. */
+export type SettingsSectionId =
+  | 'pet'
+  | 'voice-call'
+  | 'voice'
+  | 'shortcuts'
+  | 'session'
+  | 'memory'
+  | 'workspace-search'
+  | 'worktrees'
+  | 'git'
   | 'quick-actions'
   | 'hooks';
 
 export interface SettingsDestination {
   pageId: SettingsPageId;
   viewId?: SettingsViewId;
+  sectionId?: SettingsSectionId;
 }
 
 export interface SettingsPageProps {
   isActive?: boolean;
   viewId?: SettingsViewId;
+  sectionId?: SettingsSectionId;
   navigationRequestId: number;
 }
diff --git a/src/web-ui/src/app/startup/startupPerformanceContract.test.ts b/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
index 5bb062cd9a..7ef10622ae 100644
--- a/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
+++ b/src/web-ui/src/app/startup/startupPerformanceContract.test.ts
@@ -473,35 +473,29 @@ describe('startup performance contract', () => {
   it('keeps settings pages lazy by active page', () => {
     const sceneSource = readSource('../scenes/settings/SettingsScene.tsx');
     const registrySource = readSource('../scenes/settings/settingsRegistry.ts');
-    const viewPageSources = [
-      readSource('../scenes/settings/pages/AutomationSettingsPage.tsx'),
-    ];
     const lazyPanelSpecifiers = [
-      '../../../infrastructure/config/components/ModelSettingsPage',
-      '../../../infrastructure/config/components/ApplicationSettingsPages',
-      '../../../infrastructure/config/components/AppearanceSettingsPage',
-      '../../../infrastructure/config/components/MemorySettingsPage',
-      '../../../infrastructure/config/components/RuntimeSettingsPages',
-      '../../../infrastructure/config/components/WorktreeSettingsPage',
-      '../../../infrastructure/config/components/UsageStatisticsConfig',
-      '../../../infrastructure/config/components/McpToolsConfig',
-      '../../../infrastructure/config/components/VoiceInputConfig',
-      './components/ArchivedSessionsConfig',
-      './components/KeyboardShortcutsTab',
-      './pages/EditorSettingsPage',
-      './pages/ExecutionSettingsPage',
-      './pages/AutomationSettingsPage',
-      './pages/AcpSettingsPage',
+      './pages/application/GeneralSettingsPage',
+      './pages/application/AppearanceSettingsPage',
+      './pages/application/PetAssistantSettingsPage',
+      './pages/application/InputSettingsPage',
+      './pages/ai/ModelSettingsPage',
+      './pages/ai/SessionMemorySettingsPage',
+      './pages/ai/ExecutionSettingsPage',
+      './pages/ai/PermissionsSettingsPage',
+      './pages/development/EditorSettingsPage',
+      './pages/development/TerminalSettingsPage',
+      './pages/development/WorkspaceGitSettingsPage',
+      './pages/tools/WebSearchSettingsPage',
+      './pages/tools/DeviceControlSettingsPage',
+      './pages/tools/McpSettingsPage',
+      './pages/tools/ExternalAgentsSettingsPage',
+      './pages/tools/AutomationSettingsPage',
+      './pages/data/UsageStatisticsSettingsPage',
+      './pages/data/ArchivedSessionsSettingsPage',
+      './pages/data/DiagnosticsSettingsPage',
     ];
     const sceneImports = staticImportSpecifiers(sceneSource);
     const registryImports = staticImportSpecifiers(registrySource);
-    const lazyViewSpecifiers = [
-      '@/infrastructure/config/components/QuickActionsConfig',
-      '@/infrastructure/config/components/HooksConfig',
-    ];
-    const viewDynamicImports = viewPageSources.flatMap(dynamicImportSpecifiers);
-    const viewStaticImports = viewPageSources.flatMap(staticImportSpecifiers);
-
     expect(sceneImports).toContain('./settingsRegistry');
     expect(sceneSource).toContain('<Suspense');
     expect(dynamicImportSpecifiers(registrySource)).toEqual(
@@ -511,10 +505,6 @@ describe('startup performance contract', () => {
       expect(sceneImports).not.toContain(panelSpecifier);
       expect(registryImports).not.toContain(panelSpecifier);
     }
-    expect(viewDynamicImports).toEqual(expect.arrayContaining(lazyViewSpecifiers));
-    for (const viewSpecifier of lazyViewSpecifiers) {
-      expect(viewStaticImports).not.toContain(viewSpecifier);
-    }
     expect(registrySource).toContain('const component = lazyWithRecovery(definition.load)');
     expect(registrySource).toContain("id: 'application.general'");
   });
@@ -536,7 +526,7 @@ describe('startup performance contract', () => {
     const flowToolCardSource = readSource('../../flow_chat/components/FlowToolCard.tsx');
     const modelRoundItemSource = readSource('../../flow_chat/components/modern/ModelRoundItem.tsx');
     const flowStoreSource = readSource('../../flow_chat/store/modernFlowChatStore.ts');
-    const keyboardShortcutsSource = readSource('../scenes/settings/components/KeyboardShortcutsTab.tsx');
+    const keyboardShortcutsSource = readSource('../scenes/settings/pages/application/KeyboardShortcutsSection.tsx');
 
     expect(metadataSource).toContain('TOOL_CARD_CONFIGS');
     expect(metadataSource).toContain('isCollapsibleTool');
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index cbdb408d93..d97401394b 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -2758,7 +2758,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   // The reset row follows the user-level default, so give it a way to reach the
   // page that owns that default instead of making the user hunt for it.
   const handleOpenPermissionDefaultSettings = useCallback(() => {
-    useSettingsStore.getState().openPage('tools.execution');
+    useSettingsStore.getState().openPage('ai.permissions');
     openScene('settings');
   }, [openScene]);
 
diff --git a/src/web-ui/src/flow_chat/components/voice/useComposerVoiceInput.ts b/src/web-ui/src/flow_chat/components/voice/useComposerVoiceInput.ts
index d17386253e..964cb66571 100644
--- a/src/web-ui/src/flow_chat/components/voice/useComposerVoiceInput.ts
+++ b/src/web-ui/src/flow_chat/components/voice/useComposerVoiceInput.ts
@@ -145,7 +145,7 @@ export function useComposerVoiceInput({
 
   const openVoiceInputSettings = useCallback(() => {
     useSettingsStore.getState().openDestination({
-      pageId: 'application.voice',
+      pageId: 'application.input', sectionId: 'voice',
     });
     useSceneStore.getState().openScene('settings');
   }, []);
diff --git a/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts b/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
index 009cec1d3b..323e08af33 100644
--- a/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
+++ b/src/web-ui/src/flow_chat/components/voice/useRealtimeVoiceCall.ts
@@ -267,7 +267,7 @@ export function useRealtimeVoiceCallController(disabled = false): RealtimeVoiceC
 
   const openSettings = useCallback(() => {
     useSettingsStore.getState().openDestination({
-      pageId: 'application.voice',
+      pageId: 'application.pet', sectionId: 'voice-call',
     });
     useSceneStore.getState().openScene('settings');
   }, []);
diff --git a/src/web-ui/src/flow_chat/deep-review/action-bar/DeepReviewActionBar.tsx b/src/web-ui/src/flow_chat/deep-review/action-bar/DeepReviewActionBar.tsx
index 7e430e6d28..d6e7768531 100644
--- a/src/web-ui/src/flow_chat/deep-review/action-bar/DeepReviewActionBar.tsx
+++ b/src/web-ui/src/flow_chat/deep-review/action-bar/DeepReviewActionBar.tsx
@@ -288,7 +288,7 @@ export const ReviewActionBar: React.FC<ReviewActionBarProps> = ({ childSessionId
 
   const handleOpenReviewSettings = useCallback(() => {
     useSettingsStore.getState().openDestination({
-      pageId: 'tools.execution',
+      pageId: 'ai.execution',
     });
     useSceneStore.getState().openScene('settings');
   }, []);
diff --git a/src/web-ui/src/flow_chat/tool-cards/BuiltinMarketDialog.tsx b/src/web-ui/src/flow_chat/tool-cards/BuiltinMarketDialog.tsx
index 46f966551f..7cec83c4c3 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BuiltinMarketDialog.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/BuiltinMarketDialog.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogBody, DialogClose, DialogHeader, DialogHeaderActions, Dia
 import { useI18n } from '@/infrastructure/i18n';
 import { lazyWithRecovery } from '@/shared/utils/lazyWithRecovery';
 import { AccountIdentityControls } from '@/features/market-account';
-import '@/infrastructure/config/components/AppearanceSettingsPage.scss';
+import '@/app/scenes/settings/pages/application/AppearanceSettingsPage.scss';
 import '@/app/scenes/miniapps/MiniAppGalleryScene.scss';
 
 const MiniAppSubmissionsView = lazyWithRecovery(() => import('@/app/scenes/miniapps/views/MiniAppSubmissionsView'));
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 9def49e5b0..6fe13b9347 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -21,9 +21,9 @@ import { flowChatTurnRailAppearanceDescriptor } from '@/flow_chat/components/mod
 import { sessionFilesBadgeAppearanceDescriptor } from '@/flow_chat/components/modern/SessionFilesBadge.appearance';
 import { codeReviewToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/CodeReviewToolCard.appearance';
 import { createAgentPageAppearanceDescriptor } from '@/app/scenes/agents/components/CreateAgentPage.appearance';
-import { keyboardShortcutsAppearanceDescriptor } from '@/app/scenes/settings/components/KeyboardShortcutsTab.appearance';
+import { keyboardShortcutsAppearanceDescriptor } from '@/app/scenes/settings/pages/application/KeyboardShortcutsSection.appearance';
 import { taskToolDisplayAppearanceDescriptor } from '@/flow_chat/tool-cards/TaskToolDisplay.appearance';
-import { applicationSettingsAppearanceDescriptor } from '@/infrastructure/config/components/ApplicationSettingsPages.appearance';
+import { applicationSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/shared/ApplicationSettings.appearance';
 import { markdownEditorAppearanceDescriptor } from '@/tools/editor/components/MarkdownEditor.appearance';
 import { planViewerAppearanceDescriptor } from '@/tools/editor/components/PlanViewer.appearance';
 import { appLayoutAppearanceDescriptor } from '@/app/layout/AppLayout.appearance';
@@ -44,8 +44,8 @@ import { userMessageItemAppearanceDescriptor } from '@/flow_chat/components/mode
 import { sessionUsageReportCardAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageReportCard.appearance';
 import { sessionUsageModalAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageModal.appearance';
 import { createPlanDisplayAppearanceDescriptor } from '@/flow_chat/tool-cards/CreatePlanDisplay.appearance';
-import { editorConfigAppearanceDescriptor } from '@/infrastructure/config/components/EditorConfig.appearance';
-import { appearanceSettingsAppearanceDescriptor } from '@/infrastructure/config/components/AppearanceSettingsPage.appearance';
+import { editorConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/development/EditorSettingsPage.appearance';
+import { appearanceSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/application/AppearanceSettingsPage.appearance';
 import { configAppearanceDescriptor } from '@/infrastructure/config/appearance';
 import { fontPreferenceAppearanceDescriptor } from '@/infrastructure/font-preference/appearance';
 import { languageSelectorAppearanceDescriptor } from '@/infrastructure/i18n/appearance';
@@ -100,13 +100,13 @@ import { flexiblePanelAppearanceDescriptor } from '@/app/components/panels/base/
 import { btwSessionPanelAppearanceDescriptor } from '@/flow_chat/components/btw/BtwSessionPanel.appearance';
 import { conversationExcerptAppearanceDescriptor } from '@/flow_chat/selection/ConversationExcerpt.appearance';
 import { modernFlowChatAppearanceDescriptor, virtualMessageListAppearanceDescriptor } from '@/flow_chat/components/modern/appearance';
-import { modelSettingsAppearanceDescriptor } from '@/infrastructure/config/components/ModelSettingsPage.appearance';
+import { modelSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/ai/ModelSettingsPage.appearance';
 import { reasoningConfigPanelAppearanceDescriptor } from '@/infrastructure/config/components/ReasoningConfigPanel.appearance';
 import { reasoningPresetEditorAppearanceDescriptor } from '@/infrastructure/config/components/ReasoningPresetEditor.appearance';
 import { externalSourcesConfigAppearanceDescriptor } from '@/infrastructure/config/components/ExternalSourcesConfig.appearance';
 import { acpAgentsConfigAppearanceDescriptor } from '@/infrastructure/config/components/AcpAgentsConfig.appearance';
-import { runtimeSettingsAppearanceDescriptor } from '@/infrastructure/config/components/RuntimeSettingsPages.appearance';
-import { sessionTitleConfigAppearanceDescriptor } from '@/infrastructure/config/components/SessionTitleConfig.appearance';
+import { runtimeSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/shared/RuntimeSettings.appearance';
+import { sessionTitleConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/ai/SessionTitleSection.appearance';
 import { mcpToolsConfigAppearanceDescriptor } from '@/infrastructure/config/components/McpToolsConfig.appearance';
 import { mcpServerConfigDialogAppearanceDescriptor } from '@/infrastructure/config/components/MCPServerConfigDialog.appearance';
 import { externalMcpOverviewAppearanceDescriptor } from '@/infrastructure/config/components/ExternalMcpOverview.appearance';
@@ -123,11 +123,10 @@ import { themeTokenAppearanceAdapter } from '../adapters/ThemeTokenAppearanceAda
 import { tiptapEditorAppearanceDescriptor } from '@/tools/editor/meditor/components/TiptapEditor.appearance';
 import { workspaceProjectPermissionsDialogAppearanceDescriptor } from '@/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.appearance';
 import { workspaceSessionBatchModalAppearanceDescriptor } from '@/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.appearance';
-import { archivedSessionsConfigAppearanceDescriptor } from '@/app/scenes/settings/components/ArchivedSessionsConfig.appearance';
-import { settingsViewPageAppearanceDescriptor } from '@/app/scenes/settings/components/SettingsViewPage.appearance';
+import { archivedSessionsConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.appearance';
 import {
   automationSettingsPageAppearanceDescriptor,
-} from '@/app/scenes/settings/pages/appearance';
+} from '@/app/scenes/settings/pages/tools/AutomationSettingsPage.appearance';
 import { settingsNavAppearanceDescriptor } from '@/app/scenes/settings/SettingsNav.appearance';
 import { backgroundCommandOutputPanelAppearanceDescriptor } from '@/flow_chat/components/background-command/BackgroundCommandOutputPanel.appearance';
 import { agentCompanionPetAppearanceDescriptor } from '@/flow_chat/components/AgentCompanionPet.appearance';
@@ -142,7 +141,7 @@ import { editorBreadcrumbAppearanceDescriptor } from '@/tools/editor/components/
 import { gitBranchHistoryAppearanceDescriptor } from '@/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.appearance';
 import { gitDiffViewAppearanceDescriptor } from '@/tools/git/components/GitDiffView/GitDiffView.appearance';
 import { gitSettingsViewAppearanceDescriptor } from '@/tools/git/components/GitSettingsView/GitSettingsView.appearance';
-import { quickActionsConfigAppearanceDescriptor } from '@/infrastructure/config/components/QuickActionsConfig.appearance';
+import { quickActionsConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/tools/QuickActionsSettingsSection.appearance';
 import { statusBarPopoversAppearanceDescriptor } from '@/tools/editor/components/StatusBarPopovers/StatusBarPopovers.appearance';
 import { mEditorAppearanceDescriptor } from '@/tools/editor/meditor/components/MEditor.appearance';
 import { globalSearchAppearanceDescriptor } from '@/app/global-search/GlobalSearchRoot.appearance';
@@ -245,9 +244,9 @@ import {
   dispatchResultDialogAppearanceDescriptor,
   dispatchTargetPickerAppearanceDescriptor,
 } from '@/features/dispatch/appearance';
-import { voiceInputConfigAppearanceDescriptor } from '@/infrastructure/config/components/VoiceInputConfig.appearance';
-import { worktreeSettingsAppearanceDescriptor } from '@/infrastructure/config/components/WorktreeSettingsPage.appearance';
-import { usageStatisticsConfigAppearanceDescriptor } from '@/infrastructure/config/components/UsageStatisticsConfig.appearance';
+import { voiceInputConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/application/VoiceSettingsSection.appearance';
+import { worktreeSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/development/WorktreeSettingsSection.appearance';
+import { usageStatisticsConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.appearance';
 import { turnCompletionNoticeAppearanceDescriptor } from '@/flow_chat/components/modern/TurnCompletionNoticeItem.appearance';
 import { turnFailureNoticeAppearanceDescriptor } from '@/flow_chat/components/modern/TurnFailureNoticeItem.appearance';
 import { virtualItemAppearanceDescriptor } from '@/flow_chat/components/modern/VirtualItemRenderer.appearance';
@@ -389,7 +388,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(archivedSessionsConfigAppearanceDescriptor)
     .registerComponent(usageStatisticsConfigAppearanceDescriptor)
     .registerComponent(settingsNavAppearanceDescriptor)
-    .registerComponent(settingsViewPageAppearanceDescriptor)
     .registerComponent(automationSettingsPageAppearanceDescriptor)
     .registerComponent(backgroundCommandOutputPanelAppearanceDescriptor)
     .registerComponent(agentCompanionPetAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
index 2a69c4329a..38f840ca30 100644
--- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.tsx
@@ -1081,7 +1081,7 @@ const AcpAgentsConfig = forwardRef<AcpAgentsConfigHandle, AcpAgentsConfigProps>(
 
   useSettingsDraft({
     id: 'acp-agent-config',
-    pageId: 'tools.acp',
+    pageId: 'tools.external-agents',
     viewId: activeView === 'json' && jsonDirty ? 'json' : undefined,
     label: activeView === 'json' && jsonDirty ? t('json.title') : t('title'),
     dirty: dirty || jsonDirty,
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
deleted file mode 100644
index 74ad759390..0000000000
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Select } from '@openbitfun/ui';
-import React from 'react';
-import { FontPreferencePanel } from '@/infrastructure/font-preference';
-import { useTranslation } from 'react-i18next';
-import { useLanguageSelector } from '@/infrastructure/i18n';
-import type { LocaleId } from '@/infrastructure/i18n/types';
-import { AppearancePackageConfigSection } from './AppearancePackageConfigSection';
-import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageSection,
-  ConfigPageSectionStack,
-  ConfigPageRow,
-} from './common';
-import './AppearanceSettingsPage.scss';
-
-function AppearanceSelectionSection() {
-  const { t } = useTranslation('settings/application');
-  const { currentLanguage, supportedLocales, selectLanguage, isChanging } = useLanguageSelector();
-
-  return (
-    <div
-      className="appearance-settings"
-      data-testid="appearance-settings-section"
-      data-openbitfun-component="appearance-settings"
-      data-openbitfun-part="settings"
-    >
-      <div
-        className="appearance-settings__content"
-        data-openbitfun-component="appearance-settings"
-        data-openbitfun-part="settingsContent"
-      >
-        <ConfigPageSection
-          title={t('appearance.interfaceTitle')}
-          description={t('appearance.interfaceHint')}
-        >
-          <ConfigPageRow
-            label={t('appearance.language')}
-            align="center"
-          >
-            <div
-              className="appearance-settings__language-select"
-              data-openbitfun-component="appearance-settings"
-              data-openbitfun-part="language"
-            >
-              <Select
-                size="sm"
-                value={currentLanguage}
-                onValueChange={(value) =>
-                  selectLanguage(String(value) as LocaleId)
-                }
-                options={supportedLocales.map((locale) => ({
-                  value: locale.id,
-                  label: locale.nativeName,
-                  testId: 'appearance-language-option',
-                  testAttributes: {
-                    'data-locale-id': locale.id,
-                  },
-                }))}
-                disabled={isChanging}
-                placeholder={t('appearance.language')}
-                data-testid="appearance-language-select"
-              />
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-        <AppearancePackageConfigSection />
-      </div>
-    </div>
-  );
-}
-
-const AppearanceSettingsPage: React.FC = () => {
-  const { t } = useTranslation('settings/appearance');
-
-  return (
-    <ConfigPageLayout
-      className="openbitfun-appearance-settings"
-      data-openbitfun-component="appearance-settings"
-      data-openbitfun-part="root"
-    >
-      <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
-      <ConfigPageContent
-        className="openbitfun-appearance-settings__content"
-        data-openbitfun-component="appearance-settings"
-        data-openbitfun-part="content"
-      >
-        <ConfigPageSectionStack data-testid="appearance-settings">
-          <AppearanceSelectionSection />
-          <FontPreferencePanel />
-        </ConfigPageSectionStack>
-      </ConfigPageContent>
-    </ConfigPageLayout>
-  );
-};
-
-export default AppearanceSettingsPage;
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
deleted file mode 100644
index b7cce1d22c..0000000000
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
+++ /dev/null
@@ -1,1029 +0,0 @@
-import { Alert, Button, Combobox, ConfirmDialog, IconButton, Input, Select, Switch, Tooltip, type ComboboxOption } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Archive, FolderOpen } from 'lucide-react';
-import { ConfigLoadingState, ConfigMessage, ConfigRetryState } from '@/infrastructure/config/components/common';
-import { configAPI, workspaceAPI } from '@/infrastructure/api';
-import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
-import type { CloseBehavior } from '@/infrastructure/api/service-api/SystemAPI';
-import { getTerminalService } from '@/tools/terminal/services';
-import type { ShellInfo } from '@/tools/terminal/types/session';
-import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageSection,
-  ConfigPageRow,
-} from './common';
-import { configManager } from '../services/ConfigManager';
-import { createLogger } from '@/shared/utils/logger';
-import type {
-  BackendLogLevel,
-  RuntimeLoggingInfo,
-  TerminalConfig as TerminalSettings,
-} from '../types';
-import './ApplicationSettingsPages.scss';
-
-const log = createLogger('ApplicationSettings');
-
-// Combobox reserves the empty string for no selection; config uses it for auto-detection.
-const AUTO_DETECT_SHELL_VALUE = '__auto_detect_shell__';
-
-type TerminalShellOption = ComboboxOption & {
-  shell?: ShellInfo;
-};
-
-const formatShellLabel = (shell: ShellInfo): string =>
-  `${shell.name}${shell.version ? ` (${shell.version})` : ''}`;
-
-function LaunchAtLoginSetting() {
-  const { t } = useTranslation('settings/application');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-  const [enabled, setEnabled] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const loadData = useCallback(async () => {
-    if (!isTauri) return;
-    setLoading(true);
-    setLoadFailed(false);
-    try {
-      const value = await systemAPI.getLaunchAtLoginEnabled();
-      setEnabled(value);
-    } catch (error) {
-      log.error('Failed to load launch-at-login state', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [isTauri]);
-
-  useEffect(() => {
-    if (!isTauri) {
-      setLoading(false);
-      return;
-    }
-    void loadData().catch(() => undefined);
-  }, [isTauri, loadData]);
-
-  const handleToggle = useCallback(
-    async (next: boolean) => {
-      const previous = enabled;
-      setEnabled(next);
-      setSaving(true);
-      try {
-        await systemAPI.setLaunchAtLoginEnabled(next);
-      } catch (error) {
-        setEnabled(previous);
-        log.error('Failed to set launch-at-login', { next, error });
-        showMessage('error', t('launchAtLogin.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [enabled, showMessage, t]
-  );
-
-  if (!isTauri) {
-    return null;
-  }
-
-  if (loading || loadFailed) {
-    return (
-      <ConfigPageRow
-        label={t('launchAtLogin.toggleLabel')}
-        description={t(loading ? 'launchAtLogin.messages.loading' : 'launchAtLogin.messages.loadFailed')}
-        align="center"
-      >
-        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
-          {t('common.retry')}
-        </Button>
-      </ConfigPageRow>
-    );
-  }
-
-  return (
-    <>
-      <ConfigMessage message={message} />
-      <ConfigPageRow
-        label={t('launchAtLogin.toggleLabel')}
-        description={t('launchAtLogin.toggleDescription')}
-        align="center"
-      >
-        <div data-openbitfun-component="application-settings" data-openbitfun-part="launchAtLogin">
-          <Switch
-            checked={enabled}
-            onChange={(e) => {
-              void handleToggle(e.target.checked);
-            }}
-            disabled={saving}
-          />
-        </div>
-      </ConfigPageRow>
-    </>
-  );
-}
-
-function AutoUpdateSetting() {
-  const { t } = useTranslation('settings/application');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-  const [enabled, setEnabled] = useState(true);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const loadData = useCallback(async () => {
-    if (!isTauri) return;
-    setLoading(true);
-    setLoadFailed(false);
-    try {
-      setEnabled(await systemAPI.getAutoUpdateEnabled());
-    } catch (error) {
-      log.error('Failed to load app.auto_update', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [isTauri]);
-
-  useEffect(() => {
-    if (!isTauri) {
-      setLoading(false);
-      return;
-    }
-    void loadData();
-  }, [isTauri, loadData]);
-
-  const handleToggle = useCallback(
-    async (next: boolean) => {
-      const previous = enabled;
-      setEnabled(next);
-      setSaving(true);
-      try {
-        await systemAPI.setAutoUpdateEnabled(next);
-        showMessage('success', t('autoUpdate.messages.saved'));
-      } catch (error) {
-        setEnabled(previous);
-        log.error('Failed to set app.auto_update', { next, error });
-        showMessage('error', t('autoUpdate.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [enabled, showMessage, t]
-  );
-
-  if (!isTauri) {
-    return null;
-  }
-
-  if (loading || loadFailed) {
-    return (
-      <ConfigPageRow
-        label={t('autoUpdate.toggleLabel')}
-        description={t(loading ? 'autoUpdate.messages.loading' : 'autoUpdate.messages.loadFailed')}
-        align="center"
-      >
-        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
-          {t('common.retry')}
-        </Button>
-      </ConfigPageRow>
-    );
-  }
-
-  return (
-    <>
-      <ConfigMessage message={message} />
-      <ConfigPageRow
-        label={t('autoUpdate.toggleLabel')}
-        description={t('autoUpdate.toggleDescription')}
-        align="center"
-      >
-        <div data-openbitfun-component="application-settings" data-openbitfun-part="autoUpdate">
-          <Switch
-            checked={enabled}
-            onChange={(e) => {
-              void handleToggle(e.target.checked);
-            }}
-            disabled={saving}
-          />
-        </div>
-      </ConfigPageRow>
-    </>
-  );
-}
-
-function PreventSleepSetting() {
-  const { t } = useTranslation('settings/application');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-  const [enabled, setEnabled] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const loadData = useCallback(async () => {
-    if (!isTauri) return;
-    setLoading(true);
-    setLoadFailed(false);
-    try {
-      setEnabled(await systemAPI.getPreventSleepEnabled());
-    } catch (error) {
-      log.error('Failed to load prevent-sleep preference', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [isTauri]);
-
-  useEffect(() => {
-    if (!isTauri) {
-      setLoading(false);
-      return;
-    }
-    void loadData();
-  }, [isTauri, loadData]);
-
-  const handleToggle = useCallback(
-    async (next: boolean) => {
-      const previous = enabled;
-      setEnabled(next);
-      setSaving(true);
-      try {
-        await systemAPI.setPreventSleepEnabled(next);
-        showMessage('success', t('preventSleep.messages.saved'));
-      } catch (error) {
-        setEnabled(previous);
-        log.error('Failed to set prevent-sleep preference', { next, error });
-        showMessage('error', t('preventSleep.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [enabled, showMessage, t]
-  );
-
-  if (!isTauri) {
-    return null;
-  }
-
-  if (loading || loadFailed) {
-    return (
-      <ConfigPageRow
-        label={t('preventSleep.toggleLabel')}
-        description={t(loading ? 'preventSleep.messages.loading' : 'preventSleep.messages.loadFailed')}
-        align="center"
-      >
-        <Button type="button" variant="outline" size="sm" loading={loading} disabled={loading} onClick={() => void loadData()}>
-          {t('common.retry')}
-        </Button>
-      </ConfigPageRow>
-    );
-  }
-
-  return (
-    <>
-      <ConfigMessage message={message} />
-      <ConfigPageRow
-        label={t('preventSleep.toggleLabel')}
-        description={t('preventSleep.toggleDescription')}
-        align="center"
-      >
-        <div data-openbitfun-component="application-settings" data-openbitfun-part="preventSleep">
-          <Switch
-            checked={enabled}
-            onChange={(event) => {
-              void handleToggle(event.target.checked);
-            }}
-            disabled={saving}
-          />
-        </div>
-      </ConfigPageRow>
-    </>
-  );
-}
-
-function LoggingSection() {
-  const { t } = useTranslation('settings/application');
-  const [configLevel, setConfigLevel] = useState<BackendLogLevel>('info');
-  const [includeSensitiveDiagnostics, setIncludeSensitiveDiagnostics] = useState(false);
-  const [runtimeInfo, setRuntimeInfo] = useState<RuntimeLoggingInfo | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [openingFolder, setOpeningFolder] = useState(false);
-  const [exportingDiagnostics, setExportingDiagnostics] = useState(false);
-  const [exportConfirmOpen, setExportConfirmOpen] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const levelOptions = useMemo(
-    () => [
-      { value: 'trace', label: t('logging.levels.trace') },
-      { value: 'debug', label: t('logging.levels.debug') },
-      { value: 'info', label: t('logging.levels.info') },
-      { value: 'warn', label: t('logging.levels.warn') },
-      { value: 'error', label: t('logging.levels.error') },
-      { value: 'off', label: t('logging.levels.off') },
-    ],
-    [t]
-  );
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const loadData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setLoadFailed(false);
-
-      const [savedLevel, savedIncludeSensitiveDiagnostics, info] = await Promise.all([
-        configManager.getConfig<BackendLogLevel>('app.logging.level'),
-        configManager.getConfig<boolean>('app.logging.include_sensitive_diagnostics'),
-        configAPI.getRuntimeLoggingInfo(),
-      ]);
-
-      setConfigLevel(savedLevel || info.effectiveLevel || 'info');
-      setIncludeSensitiveDiagnostics(savedIncludeSensitiveDiagnostics ?? false);
-      setRuntimeInfo(info);
-    } catch (error) {
-      log.error('Failed to load logging config', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleLevelChange = useCallback(
-    async (value: string) => {
-      const nextLevel = value as BackendLogLevel;
-      const previousLevel = configLevel;
-      setConfigLevel(nextLevel);
-      setSaving(true);
-
-      try {
-        await configManager.setConfig('app.logging.level', nextLevel);
-        configManager.clearCache();
-
-        const info = await configAPI.getRuntimeLoggingInfo();
-        setRuntimeInfo(info);
-        showMessage('success', t('logging.messages.levelUpdated'));
-      } catch (error) {
-        setConfigLevel(previousLevel);
-        log.error('Failed to update logging level', { nextLevel, error });
-        showMessage('error', t('logging.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [configLevel, showMessage, t]
-  );
-
-  const handleSensitiveDiagnosticsChange = useCallback(
-    async (checked: boolean) => {
-      const previousValue = includeSensitiveDiagnostics;
-      setIncludeSensitiveDiagnostics(checked);
-      setSaving(true);
-
-      try {
-        await configManager.setConfig('app.logging.include_sensitive_diagnostics', checked);
-        configManager.clearCache();
-        showMessage('success', t('logging.messages.sensitiveDiagnosticsUpdated'));
-      } catch (error) {
-        setIncludeSensitiveDiagnostics(previousValue);
-        log.error('Failed to update sensitive diagnostics logging preference', { checked, error });
-        showMessage('error', t('logging.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [includeSensitiveDiagnostics, showMessage, t]
-  );
-
-  const handleOpenFolder = useCallback(async () => {
-    const folder = runtimeInfo?.sessionLogDir;
-    if (!folder) {
-      showMessage('error', t('logging.messages.pathUnavailable'));
-      return;
-    }
-
-    try {
-      setOpeningFolder(true);
-      await workspaceAPI.revealInExplorer(folder);
-    } catch (error) {
-      log.error('Failed to open log folder', { folder, error });
-      showMessage('error', t('logging.messages.openFailed'));
-    } finally {
-      setOpeningFolder(false);
-    }
-  }, [runtimeInfo?.sessionLogDir, showMessage, t]);
-
-  const handleExportDiagnostics = useCallback(async () => {
-    setExportConfirmOpen(false);
-    try {
-      setExportingDiagnostics(true);
-      const result = await configAPI.exportDiagnosticsBundle();
-      showMessage('success', t('logging.messages.diagnosticsExported'));
-      await workspaceAPI.revealInExplorer(result.bundlePath);
-    } catch (error) {
-      log.error('Failed to export diagnostics bundle', { error });
-      showMessage('error', t('logging.messages.diagnosticsExportFailed'));
-    } finally {
-      setExportingDiagnostics(false);
-    }
-  }, [showMessage, t]);
-
-  if (loading) {
-    return <ConfigLoadingState label={t('logging.messages.loading')} />;
-  }
-
-  if (loadFailed) {
-    return (
-      <ConfigRetryState
-        message={t('logging.messages.loadFailed')}
-        retryLabel={t('common.retry')}
-        onRetry={() => void loadData()}
-      />
-    );
-  }
-
-  return (
-    <div className="openbitfun-logging-config" data-openbitfun-component="application-settings" data-openbitfun-part="logging">
-      <div className="openbitfun-logging-config__content">
-        <ConfigMessage message={message} />
-
-        {runtimeInfo?.previousUnexpectedExit?.detected && (
-          <Alert
-            tone={runtimeInfo.previousUnexpectedExit.category === 'crash' ? 'warning' : 'info'}
-            message={t(
-              runtimeInfo.previousUnexpectedExit.category === 'crash'
-                ? 'logging.previousCrash.title'
-                : 'logging.previousUncleanShutdown.title'
-            )}
-            description={t(
-              runtimeInfo.previousUnexpectedExit.category === 'crash'
-                ? 'logging.previousCrash.description'
-                : 'logging.previousUncleanShutdown.description',
-              {
-                path: runtimeInfo.previousUnexpectedExit.sessionLogDir || '-',
-              }
-            )}
-          />
-        )}
-
-        <ConfigPageSection
-          title={t('logging.sections.logging')}
-          description={t('logging.sections.loggingHint')}
-        >
-          <ConfigPageRow
-            label={t('logging.sections.level')}
-            description={t('logging.level.description')}
-            align="center"
-          >
-            <Select
-              value={configLevel}
-              size="sm"
-              onValueChange={(v) => handleLevelChange(v as string)}
-              options={levelOptions}
-              disabled={saving}
-            />
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={t('logging.sensitiveDiagnostics.label')}
-            description={t('logging.sensitiveDiagnostics.description')}
-            align="center"
-          >
-            <Switch
-              checked={includeSensitiveDiagnostics}
-              onChange={(e) => {
-                void handleSensitiveDiagnosticsChange(e.target.checked);
-              }}
-              disabled={saving}
-            />
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={t('logging.sections.path')}
-            description={t('logging.path.description')}
-            multiline
-          >
-            <div className="openbitfun-logging-config__path-row" data-openbitfun-component="application-settings" data-openbitfun-part="logPath">
-              <Input
-                className="openbitfun-logging-config__path-box"
-                aria-label={t('logging.sections.path')}
-                title={runtimeInfo?.sessionLogDir || undefined}
-                value={runtimeInfo?.sessionLogDir || '-'}
-                readOnly
-                size="sm"
-              />
-              <Tooltip content={t('logging.actions.openFolderTooltip')} placement="top">
-                <IconButton
-                  aria-label={t('logging.actions.openFolderTooltip')}
-                  variant="quiet"
-                  size="sm"
-                  onClick={handleOpenFolder}
-                  loading={openingFolder}
-                  disabled={openingFolder || !runtimeInfo?.sessionLogDir}
-                  icon={<FolderOpen size={14} aria-hidden />}
-                />
-              </Tooltip>
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={t('logging.diagnostics.label')}
-            description={t('logging.diagnostics.description')}
-            align="center"
-          >
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              leadingIcon={<Archive size={14} aria-hidden />}
-              data-testid="diagnostics-export-button"
-              onClick={() => {
-                setExportConfirmOpen(true);
-              }}
-              loading={exportingDiagnostics}
-              disabled={exportingDiagnostics}
-            >
-              {t('logging.actions.exportDiagnostics')}
-            </Button>
-          </ConfigPageRow>
-        </ConfigPageSection>
-        <ConfirmDialog
-          open={exportConfirmOpen}
-          onOpenChange={() => setExportConfirmOpen(false)}
-          onConfirm={() => void handleExportDiagnostics()}
-          title={t('logging.diagnostics.confirmTitle')}
-          message={t(includeSensitiveDiagnostics
-            ? 'logging.diagnostics.confirmSensitive'
-            : 'logging.diagnostics.confirmStandard')}
-          confirmText={t('logging.diagnostics.confirmAction')}
-          type={includeSensitiveDiagnostics ? 'warning' : 'info'}
-        />
-      </div>
-    </div>
-  );
-}
-
-function TerminalSection() {
-  const { t } = useTranslation('settings/application');
-  const [defaultShell, setDefaultShell] = useState<string>('');
-  const [availableShells, setAvailableShells] = useState<ShellInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const loadData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setLoadFailed(false);
-
-      const [terminalConfig, shells] = await Promise.all([
-        configManager.getConfig<TerminalSettings>('terminal'),
-        getTerminalService().getAvailableShells(),
-      ]);
-
-      setDefaultShell(terminalConfig?.default_shell || '');
-
-      const availableOnly = shells.filter((s) => s.available);
-      setAvailableShells(availableOnly);
-    } catch (error) {
-      log.error('Failed to load terminal config data', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleShellChange = useCallback(
-    async (value: string) => {
-      const previous = defaultShell;
-      try {
-        setSaving(true);
-        setDefaultShell(value);
-
-        await configManager.setConfig('terminal.default_shell', value);
-
-        configManager.clearCache();
-
-        showMessage('success', t('terminal.messages.updated'));
-      } catch (error) {
-        setDefaultShell(previous);
-        log.error('Failed to save terminal config', { shell: value, error });
-        showMessage('error', t('terminal.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [defaultShell, showMessage, t]
-  );
-
-  const shellOptions = useMemo<TerminalShellOption[]>(
-    () => [
-      { value: AUTO_DETECT_SHELL_VALUE, label: t('terminal.controls.autoDetect') },
-      ...availableShells.map((shell) => ({
-        description: shell.path,
-        value: shell.path,
-        label: formatShellLabel(shell),
-        shell,
-      })),
-    ],
-    [availableShells, t],
-  );
-
-  const selectedShell = useMemo(
-    () =>
-      availableShells.find((shell) => shell.path === defaultShell) ??
-      availableShells.find((shell) => shell.shellType === defaultShell),
-    [availableShells, defaultShell],
-  );
-  const selectedShellValue = selectedShell?.path ?? (defaultShell || AUTO_DETECT_SHELL_VALUE);
-
-  const shouldShowCmdFallbackNotice = selectedShell?.shellType === 'Cmd' || defaultShell === 'Cmd';
-
-  if (loading) {
-    return <ConfigLoadingState label={t('terminal.messages.loading')} />;
-  }
-
-  if (loadFailed) {
-    return (
-      <ConfigRetryState
-        message={t('terminal.messages.loadFailed')}
-        retryLabel={t('common.retry')}
-        onRetry={() => void loadData()}
-      />
-    );
-  }
-
-  return (
-    <div className="openbitfun-terminal-config" data-openbitfun-component="application-settings" data-openbitfun-part="terminal">
-      <div className="openbitfun-terminal-config__content">
-        <ConfigMessage message={message} />
-
-        {shouldShowCmdFallbackNotice && (
-          <Alert
-            tone="info"
-            message={t('terminal.controls.cmdFallbackMessage')}
-          />
-        )}
-
-        <ConfigPageSection
-          title={t('terminal.sections.terminal')}
-          description={t('terminal.sections.terminalHint')}
-        >
-          <ConfigPageRow
-            label={t('terminal.sections.defaultTerminal')}
-            description={t('terminal.controls.description')}
-            align="center"
-          >
-            {availableShells.length > 0 ? (
-              <Combobox
-                size="sm"
-                value={selectedShellValue}
-                onValueChange={(v) => handleShellChange(v === AUTO_DETECT_SHELL_VALUE ? '' : v as string)}
-                options={shellOptions}
-                placeholder={t('terminal.controls.placeholder')}
-                disabled={saving}
-              />
-            ) : (
-              <div className="openbitfun-terminal-config__no-shells">{t('terminal.controls.noShells')}</div>
-            )}
-          </ConfigPageRow>
-
-        </ConfigPageSection>
-      </div>
-    </div>
-  );
-}
-
-function WindowBehaviorSetting() {
-  const { t } = useTranslation('settings/application');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-  const [behavior, setBehavior] = useState<CloseBehavior>('quit');
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  const behaviorOptions = useMemo(
-    () => [
-      { value: 'quit', label: t('windowBehavior.options.quit') },
-      { value: 'minimize_to_tray', label: t('windowBehavior.options.minimizeToTray') },
-      { value: 'ask', label: t('windowBehavior.options.ask') },
-    ],
-    [t]
-  );
-
-  const loadData = useCallback(async () => {
-    if (!isTauri) return;
-    setLoading(true);
-    setLoadFailed(false);
-    try {
-      const value = await configManager.getOptionalConfig<CloseBehavior>('app.close_button_behavior');
-      setBehavior(value ?? 'minimize_to_tray');
-    } catch (error) {
-      log.error('Failed to load close behavior', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [isTauri]);
-
-  useEffect(() => {
-    if (!isTauri) {
-      setLoading(false);
-      return;
-    }
-    void loadData();
-  }, [isTauri, loadData]);
-
-  const handleChange = useCallback(
-    async (value: string) => {
-      const previous = behavior;
-      const next = value as CloseBehavior;
-      setBehavior(next);
-      setSaving(true);
-      try {
-        await configManager.setConfig('app.close_button_behavior', next);
-        configManager.clearCache();
-        showMessage('success', t('windowBehavior.messages.saved'));
-      } catch (error) {
-        setBehavior(previous);
-        log.error('Failed to save close behavior', { next, error });
-        showMessage('error', t('windowBehavior.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [behavior, showMessage, t]
-  );
-
-  if (!isTauri) return null;
-
-  if (loading) {
-    return <ConfigLoadingState label={t('windowBehavior.messages.loading')} />;
-  }
-
-  if (loadFailed) {
-    return (
-      <ConfigRetryState
-        message={t('windowBehavior.messages.loadFailed')}
-        retryLabel={t('common.retry')}
-        onRetry={() => void loadData()}
-      />
-    );
-  }
-
-  return (
-    <>
-      <ConfigMessage message={message} />
-      <ConfigPageRow
-        label={t('windowBehavior.closeButtonLabel')}
-        description={t('windowBehavior.closeButtonDescription')}
-        align="center"
-      >
-        <div data-openbitfun-component="application-settings" data-openbitfun-part="windowBehavior">
-          <Select
-            size="sm"
-            value={behavior}
-            onValueChange={(v) => { void handleChange(v as string); }}
-            options={behaviorOptions}
-            disabled={saving}
-          />
-        </div>
-      </ConfigPageRow>
-    </>
-  );
-}
-
-function NotificationSettings() {
-  const { t } = useTranslation('settings/application');
-  const [dialogNotify, setDialogNotify] = useState(true);
-  const [permissionRequestNotify, setPermissionRequestNotify] = useState(true);
-  const [startupTips, setStartupTips] = useState(true);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-
-  const loadData = useCallback(async () => {
-    setLoading(true);
-    setLoadFailed(false);
-    try {
-      const [notify, permissionNotify, tips] = await Promise.all([
-        configManager.getOptionalConfig<boolean>('app.notifications.dialog_completion_notify'),
-        configManager.getOptionalConfig<boolean>('app.notifications.permission_request_notify'),
-        configManager.getOptionalConfig<boolean>('app.notifications.enable_startup_tips'),
-      ]);
-      setDialogNotify(notify !== false);
-      setPermissionRequestNotify(permissionNotify !== false);
-      setStartupTips(tips !== false);
-    } catch (error) {
-      log.error('Failed to load notification preferences', error);
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadData();
-  }, [loadData]);
-
-  const handleDialogNotifyToggle = async (checked: boolean) => {
-    setSaving(true);
-    try {
-      await configAPI.setConfig('app.notifications.dialog_completion_notify', checked);
-      setDialogNotify(checked);
-      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
-    } catch {
-      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handlePermissionRequestNotifyToggle = async (checked: boolean) => {
-    setSaving(true);
-    try {
-      await configManager.setConfig('app.notifications.permission_request_notify', checked);
-      setPermissionRequestNotify(checked);
-      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
-    } catch {
-      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleStartupTipsToggle = async (checked: boolean) => {
-    setSaving(true);
-    try {
-      await configAPI.setConfig('app.notifications.enable_startup_tips', checked);
-      setStartupTips(checked);
-      setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
-    } catch {
-      setMessage({ type: 'error', text: t('notifications.messages.saveFailed') });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) {
-    return <ConfigLoadingState label={t('notifications.messages.loading')} />;
-  }
-
-  if (loadFailed) {
-    return (
-      <ConfigRetryState
-        message={t('notifications.messages.loadFailed')}
-        retryLabel={t('common.retry')}
-        onRetry={() => void loadData()}
-      />
-    );
-  }
-
-  return (
-    <>
-      <ConfigMessage message={message} />
-      <ConfigPageRow
-        label={t('notifications.dialogCompletion.label')}
-        description={t('notifications.dialogCompletion.description')}
-        align="center"
-      >
-        <div data-openbitfun-component="application-settings" data-openbitfun-part="notifications">
-          <Switch
-            checked={dialogNotify}
-            onChange={(e) => { void handleDialogNotifyToggle(e.target.checked); }}
-            disabled={saving}
-          />
-        </div>
-      </ConfigPageRow>
-      <ConfigPageRow
-        label={t('notifications.permissionRequest.label')}
-        description={t('notifications.permissionRequest.description')}
-        align="center"
-      >
-        <Switch
-          checked={permissionRequestNotify}
-          onChange={(e) => { void handlePermissionRequestNotifyToggle(e.target.checked); }}
-          disabled={saving}
-        />
-      </ConfigPageRow>
-      <ConfigPageRow
-        label={t('notifications.startupTips.label')}
-        description={t('notifications.startupTips.description')}
-        align="center"
-      >
-        <Switch
-          checked={startupTips}
-          onChange={(e) => { void handleStartupTipsToggle(e.target.checked); }}
-          disabled={saving}
-        />
-      </ConfigPageRow>
-    </>
-  );
-}
-
-interface ApplicationSettingsPageProps {
-  page: 'general' | 'terminal' | 'diagnostics';
-}
-
-const ApplicationSettingsPage: React.FC<ApplicationSettingsPageProps> = ({ page }) => {
-  const { t } = useTranslation('settings');
-  const { t: tApplication } = useTranslation('settings/application');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-
-  const title = t(`navigation.pages.${page}.label`);
-  const subtitle = t(`navigation.pages.${page}.description`);
-
-  return (
-    <ConfigPageLayout
-      className="openbitfun-application-settings"
-      data-openbitfun-component="application-settings"
-      data-openbitfun-part="root"
-      data-openbitfun-view={page}
-    >
-      <ConfigPageHeader title={title} subtitle={subtitle} />
-      <ConfigPageContent
-        className="openbitfun-application-settings__content"
-        data-openbitfun-component="application-settings"
-        data-openbitfun-part="content"
-      >
-        {page === 'general' ? (
-          <>
-            {isTauri && (
-              <ConfigPageSection
-                title={tApplication('applicationGroups.startupAndUpdates.title')}
-                description={tApplication('applicationGroups.startupAndUpdates.description')}
-              >
-                <LaunchAtLoginSetting />
-                <PreventSleepSetting />
-                <AutoUpdateSetting />
-              </ConfigPageSection>
-            )}
-            <ConfigPageSection
-              title={tApplication('applicationGroups.windowAndNotifications.title')}
-              description={tApplication('applicationGroups.windowAndNotifications.description')}
-            >
-              <WindowBehaviorSetting />
-              <NotificationSettings />
-            </ConfigPageSection>
-          </>
-        ) : null}
-        {page === 'terminal' ? <TerminalSection /> : null}
-        {page === 'diagnostics' ? <LoggingSection /> : null}
-      </ConfigPageContent>
-    </ConfigPageLayout>
-  );
-};
-
-export function GeneralSettingsPage(): React.ReactElement {
-  return <ApplicationSettingsPage page="general" />;
-}
-
-export function TerminalSettingsPage(): React.ReactElement {
-  return <ApplicationSettingsPage page="terminal" />;
-}
-
-export function DiagnosticsSettingsPage(): React.ReactElement {
-  return <ApplicationSettingsPage page="diagnostics" />;
-}
diff --git a/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.tsx b/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.tsx
index 425ff95f51..c9e9c8b2d4 100644
--- a/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.tsx
+++ b/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.tsx
@@ -364,7 +364,7 @@ export const GlobalPermissionRulesDialog: React.FC<GlobalPermissionRulesDialogPr
 
   useSettingsDraft({
     id: 'global-permission-rules',
-    pageId: 'tools.execution',
+    pageId: 'ai.permissions',
     label: t('permissionPolicy.globalRulesDialogTitle'),
     dirty: isOpen && rulesDirty,
     saving: isSaving,
diff --git a/src/web-ui/src/infrastructure/config/components/ModelServiceCollapse.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/ModelServiceCollapse.presentation.test.ts
index 46cb2e8990..cb38a1968e 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelServiceCollapse.presentation.test.ts
+++ b/src/web-ui/src/infrastructure/config/components/ModelServiceCollapse.presentation.test.ts
@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 const modelSettingsSource = readFileSync(
-  fileURLToPath(new URL('./ModelSettingsPage.tsx', import.meta.url)),
+  fileURLToPath(new URL('../../../app/scenes/settings/pages/ai/ModelSettingsPage.tsx', import.meta.url)),
   'utf8',
 ).replaceAll('\r\n', '\n');
 const defaultModelSource = readFileSync(
@@ -11,7 +11,7 @@ const defaultModelSource = readFileSync(
   'utf8',
 );
 const modelSettingsStyles = readFileSync(
-  fileURLToPath(new URL('./ModelSettingsPage.scss', import.meta.url)),
+  fileURLToPath(new URL('../../../app/scenes/settings/pages/ai/ModelSettingsPage.scss', import.meta.url)),
   'utf8',
 );
 const collectionItemStyles = readFileSync(
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
index 572b8ba948..a8b47fb9b0 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts
@@ -3,11 +3,11 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 const source = readFileSync(
-  fileURLToPath(new URL('./ModelSettingsPage.tsx', import.meta.url)),
+  fileURLToPath(new URL('../../../app/scenes/settings/pages/ai/ModelSettingsPage.tsx', import.meta.url)),
   'utf8',
 );
 const styles = readFileSync(
-  fileURLToPath(new URL('./ModelSettingsPage.scss', import.meta.url)),
+  fileURLToPath(new URL('../../../app/scenes/settings/pages/ai/ModelSettingsPage.scss', import.meta.url)),
   'utf8',
 );
 
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.presentation.test.ts
deleted file mode 100644
index 9e980721d6..0000000000
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.presentation.test.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { describe, expect, it } from 'vitest';
-
-function readSource(relativePath: string): string {
-  return readFileSync(
-    fileURLToPath(new URL(relativePath, import.meta.url)),
-    'utf8',
-  ).replace(/\r\n?/g, '\n');
-}
-
-describe('Runtime settings information architecture', () => {
-  it('keeps concurrency input limits aligned with the host option schema', () => {
-    const source = readSource('./RuntimeSettingsPages.tsx');
-    const registry = readSource('../../../../../../src/crates/contracts/product-domains/src/product_control_owner_registry.rs');
-    for (const [option, constant] of [
-      ['subagent-max-concurrency', 'SUBAGENT_MAX_CONCURRENCY_LIMIT'],
-      ['swarm-max-concurrency', 'SWARM_MAX_CONCURRENCY_LIMIT'],
-    ]) {
-      const maximum = registry.match(new RegExp(`"${option}",\\s*integer_range\\(1\\.0, (\\d+)\\.0\\)`))?.[1];
-      expect(maximum).toBeDefined();
-      expect(source).toContain(`const ${constant} = ${maximum};`);
-      expect(source).toContain(`max={${constant}}`);
-    }
-  });
-
-  it('keeps execution and permissions unified and stacks browser and desktop control in one owner', () => {
-    const source = readSource('./RuntimeSettingsPages.tsx');
-    const appearance = readSource('./RuntimeSettingsPages.appearance.ts');
-    const wrapper = readSource('../../../app/scenes/settings/pages/ExecutionSettingsPage.tsx');
-
-    expect(wrapper).toContain('<RuntimeExecutionSettingsPage />');
-    expect(wrapper).not.toContain('<SettingsViewPage');
-    expect(wrapper).not.toContain("id: 'common' as const");
-    expect(wrapper).not.toContain("id: 'advanced' as const");
-    expect(source.match(/\{showsExecutionSettings \? \(/g)).toHaveLength(1);
-    expect(source).toContain('export function ExecutionSettingsPage()');
-    expect(source).not.toContain('ExecutionCommonSettingsPage');
-    expect(source).not.toContain('ExecutionAdvancedSettingsPage');
-    expect(source.indexOf("title={t('permissionPolicy.sectionTitle')}")).toBeLessThan(
-      source.indexOf("title={t('toolExecution.sectionTitle')}"),
-    );
-    expect(source.match(/\{page === 'browser-desktop-control' \? \(/g)).toHaveLength(1);
-    expect(source).toContain('export function BrowserDesktopControlSettingsPage()');
-    expect(source).not.toContain('export function DesktopControlSettingsPage()');
-    expect(source).not.toContain('export function BrowserControlSettingsPage()');
-    expect(source).not.toContain("page === 'execution-control'");
-    expect(source).not.toContain("page === 'desktop-control'");
-    expect(source).not.toContain("page === 'browser-control'");
-    expect(source).not.toContain('refreshDesktopStatus');
-    expect(source).toContain("if (page === 'browser-desktop-control') {");
-    expect(source).toContain('void refreshComputerUseStatus();');
-    expect(source).toContain('void refreshBrowserControlStatus();');
-    expect(source.match(/onClick=\{\(\) => void refreshComputerUseStatus\(\)\}/g)).toHaveLength(1);
-    expect(source).toContain('extra={IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (');
-    expect(source).toContain('<ConfigRefreshButton');
-    expect(source.indexOf("title={t('computerUse.sectionTitle')}")).toBeLessThan(
-      source.indexOf("title={t('browserControl.sectionTitle')}"),
-    );
-    expect(appearance).toContain("'execution'");
-    expect(appearance).not.toContain("'execution-common'");
-    expect(appearance).not.toContain("'execution-advanced'");
-    expect(appearance).toContain("'browser-desktop-control'");
-    expect(appearance).not.toContain("'desktop-control'");
-    expect(appearance).not.toContain("'browser-control'");
-  });
-
-  it('presents pet choices as an always-visible package-style card gallery', () => {
-    const source = readSource('./RuntimeSettingsPages.tsx');
-    const styles = readSource('./RuntimeSettingsPages.scss');
-
-    expect(source).toContain('className="openbitfun-runtime-settings__pet-gallery"');
-    expect(source).toContain('data-testid="companion-pet-card"');
-    expect(source).toContain('openbitfun-runtime-settings__pet-selected-mark');
-    expect(source).toContain('bodySurface={false}');
-    expect(source).toContain('const hasLoadedPageDataRef = useRef(false);');
-    expect(source).toContain('const reloadCompanionPets = useCallback(async () => {');
-    expect(source).toContain("if (page === 'pet' && !isActive) return;");
-    expect(source.match(/await reloadCompanionPets\(\);/g)).toHaveLength(2);
-    expect(source).not.toContain('handleRefreshCompanionPets');
-    expect(source).not.toContain('companionPetsLoading');
-    expect(source).not.toContain('features.pet.refresh');
-    expect(source).not.toContain('companionPetListExpanded');
-    expect(source).not.toContain('openbitfun-runtime-settings__pet-expand-button');
-    expect(source).not.toContain('openbitfun-runtime-settings__pet-preview-popover');
-    expect(source).not.toContain('aria-expanded=');
-    expect(styles).toContain('grid-template-columns: repeat(3, minmax(0, 1fr))');
-    expect(styles).toContain('&__pet-card-preview');
-    expect(styles).toContain('&__pet-selected-mark');
-    expect(styles).toContain('border: 1px solid transparent;');
-    expect(styles).toContain('&__pet-card:hover,\n  &__pet-card:focus-within {\n    border-color: var(--openbitfun-color-border-default);');
-    expect(styles).not.toContain('&__pet-preview-popover');
-    expect(styles).toContain(":root[data-openbitfun-appearance-mode='light'] &");
-  });
-
-  it('uses the app confirmation owner before deleting an imported pet', () => {
-    const source = readSource('./RuntimeSettingsPages.tsx');
-
-    expect(source).toContain("const confirmed = await confirmDanger(\n      t('features.pet.deleteConfirmTitle'),\n      t('features.pet.deleteConfirmBody'),");
-    expect(source).not.toContain("import { ask, open } from '@tauri-apps/plugin-dialog'");
-    expect(source).not.toContain("await ask(t('features.pet.deleteConfirmBody')");
-  });
-
-  it('keeps the desktop-control platform note aligned as a distinct card footer', () => {
-    const source = readSource('./RuntimeSettingsPages.tsx');
-    const styles = readSource('./RuntimeSettingsPages.scss');
-
-    expect(source).toContain('className="openbitfun-runtime-settings__platform-note-icon"');
-    expect(source).toContain('className="openbitfun-runtime-settings__platform-note-copy"');
-    expect(source).not.toContain("padding: '8px 0 4px'");
-    expect(styles).toContain('padding: var(--openbitfun-space-3) var(--openbitfun-space-5);');
-    expect(styles).toContain('border-top: 1px solid var(--openbitfun-component-config-page-divider);');
-    expect(styles).toContain('padding-inline: var(--openbitfun-space-4);');
-  });
-});
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
deleted file mode 100644
index a9d9f3adb4..0000000000
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.tsx
+++ /dev/null
@@ -1,1789 +0,0 @@
-import { OverflowText,
-  Button,
-  Combobox,
-  Icon,
-  IconButton,
-  NumberInput,
-  Select,
-  Switch,
-  StatusPill,
-  Tooltip,
-  type ComboboxOption,
-  type SelectOption,
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogFooter,
-  DialogHeader,
-  DialogHeading,
-  DialogTitle,
-} from '@openbitfun/ui';
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  ConfigLoadingState,
-  ConfigMessage,
-  ConfigRefreshButton,
-  ConfigRetryState,
-} from '@/infrastructure/config/components/common';
-import { confirmDanger } from '@/infrastructure/confirm-dialog';
-import {
-  ConfigPageContent,
-  ConfigPageHeader,
-  ConfigPageLayout,
-  ConfigPageRow,
-  ConfigPageSection,
-  formatStandaloneUiText,
-} from './common';
-import { aiExperienceConfigService, type AIExperienceSettings } from '../services/AIExperienceConfigService';
-import {
-  DEFAULT_AGENT_COMPANION_PET,
-  deleteAgentCompanionPetPackage,
-  importAgentCompanionPetPackage,
-  listAgentCompanionPets,
-  releaseAgentCompanionPetPreviewBlobs,
-  type AgentCompanionPetPackage,
-} from '../services/AgentCompanionPetService';
-import { getPetSpriteLayout } from '../services/agentCompanionPetSprite';
-import { configManager } from '../services/ConfigManager';
-import { useComputerUseEnabled } from '../hooks/useComputerUseEnabled';
-import {
-  DEFAULT_TOOL_PERMISSION_CONFIG,
-  normalizeToolPermissionConfig,
-  permissionConfigService,
-} from '../services/PermissionConfigService';
-import { i18nService } from '@/infrastructure/i18n';
-import { systemAPI } from '@/infrastructure/api/service-api/SystemAPI';
-import { api } from '@/infrastructure/api/service-api/ApiClient';
-import { useNotification, notificationService } from '@/shared/notification-system';
-import type {
-  AIModelConfig,
-  SubagentModelSelection,
-  PermissionRule,
-  ToolPermissionConfig,
-} from '../types';
-import { GlobalPermissionRulesDialog } from './GlobalPermissionRulesDialog';
-import { useModelSelectPresentation } from './ModelSelectPresentation';
-import SessionTitleConfig from './SessionTitleConfig';
-import DefaultHarnessConfig from './DefaultHarnessConfig';
-import { useSceneStore } from '@/app/stores/sceneStore';
-import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import { isRemoteWorkspace } from '@/shared/types/global-state';
-import { WORKSPACE_SEARCH_AVAILABLE } from '@/infrastructure/config/workspaceSearchAvailability';
-import ReviewCapacitySection from './ReviewCapacitySection';
-import ToolJsonRepairSection from './ToolJsonRepairSection';
-import { open } from '@tauri-apps/plugin-dialog';
-import { createLogger } from '@/shared/utils/logger';
-import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
-import './RuntimeSettingsPages.scss';
-
-type DescribedSelectOption = SelectOption & { description?: string };
-
-const log = createLogger('RuntimeSettings');
-
-const IS_TAURI_DESKTOP = typeof window !== 'undefined' && '__TAURI__' in window;
-
-/**
- * A peer host that refuses Browser Control / Computer Use (CLI Peer returns
- * "local-only and cannot run on peer"; Desktop Peer would surface a different
- * error). We detect that string so the settings section can show an explicit
- * "unsupported on this peer" notice instead of firing invokes that silently
- * fail on every refresh. See PR #2428 review #4 issue #1.
- */
-function isPeerUnsupportedBrowserControlError(error: unknown): boolean {
-  const message = error instanceof Error ? error.message : String(error ?? '');
-  return /is local-only and cannot run on peer|is not supported on CLI peer host/i.test(message);
-}
-
-type ComputerUseStatusPayload = {
-  computerUseEnabled: boolean;
-  accessibilityGranted: boolean;
-  screenCaptureGranted: boolean;
-  platformNote: string | null;
-};
-
-type BrowserControlLaunchResponse = {
-  success: boolean;
-  status: string;
-  message: string | null;
-  browserKind: string;
-  setupUrl?: string;
-};
-
-type BrowserControlDisconnectResponse = {
-  success: boolean;
-  status: string;
-  browserKind: string;
-};
-
-type BrowserControlBrowserOption = {
-  value: string;
-  label: string;
-  installed: boolean;
-};
-
-type SubagentBatchExecutionPolicy = 'safe_only' | 'force_parallel' | 'serial';
-type ToolPermissionMode = 'ask' | 'auto' | 'full_access';
-
-const DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY: SubagentBatchExecutionPolicy = 'force_parallel';
-const DEFAULT_SUBAGENT_MAX_CONCURRENCY = 5;
-const DEFAULT_SWARM_MAX_CONCURRENCY = 16;
-// Match the setting.tools.execution integer ranges in the product control registry.
-const SUBAGENT_MAX_CONCURRENCY_LIMIT = 32;
-const SWARM_MAX_CONCURRENCY_LIMIT = 64;
-const SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH = 'app.flow_chat.show_permission_mode_control';
-
-function normalizeSubagentBatchExecutionPolicy(value: unknown): SubagentBatchExecutionPolicy {
-  return value === 'force_parallel' || value === 'serial' || value === 'safe_only'
-    ? value
-    : DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY;
-}
-
-function resolveToolPermissionMode(config: ToolPermissionConfig): ToolPermissionMode {
-  if (config.policy.preset === 'full_access') return 'full_access';
-  return config.interaction.auto_approve_ask ? 'auto' : 'ask';
-}
-
-function browserSetupUrlFallback(browser: string): string {
-  const normalized = browser.toLowerCase();
-  if (normalized.includes('edge')) return 'edge://inspect/#remote-debugging';
-  if (normalized.includes('chrome')) return 'chrome://inspect/#remote-debugging';
-  return '';
-}
-
-const DEFAULT_BROWSER_CONTROL_BROWSER = 'default';
-
-export type RuntimeSettingsPageKind =
-  | 'pet'
-  | 'session-workspace'
-  | 'execution'
-  | 'browser-desktop-control';
-
-interface RuntimeSettingsPageProps {
-  page: RuntimeSettingsPageKind;
-  isActive?: boolean;
-}
-
-const RuntimeSettingsPage: React.FC<RuntimeSettingsPageProps> = ({
-  page,
-  isActive = true,
-}) => {
-  const { t } = useTranslation('settings/runtime');
-  const { t: tNavigation } = useTranslation('settings');
-  const { t: tTools } = useTranslation('settings/agentic-tools');
-  const notification = useNotification();
-  const { t: tModels } = useTranslation('settings/models');
-  const { buildModelOption } = useModelSelectPresentation();
-  const [subagentDefaultModel, setSubagentDefaultModel] = useState<SubagentModelSelection>({ kind: 'fixed', model_id: 'fast' });
-  const [configuredModels, setConfiguredModels] = useState<AIModelConfig[]>([]);
-
-  // ── Session config state ─────────────────────────────────────────────────
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadError, setLoadError] = useState(false);
-  const hasLoadedPageDataRef = useRef(false);
-  const toolPermissionSaveInFlightRef = useRef(false);
-  const [settings, setSettings] = useState<AIExperienceSettings | null>(null);
-  const [companionPets, setCompanionPets] = useState<AgentCompanionPetPackage[]>([]);
-  const [companionPetImporting, setCompanionPetImporting] = useState(false);
-  const [companionPetDeletingPath, setCompanionPetDeletingPath] = useState<string | null>(null);
-  const [enableDeferredToolLoading, setEnableDeferredToolLoading] = useState(true);
-  const [subagentMaxConcurrency, setSubagentMaxConcurrency] = useState(DEFAULT_SUBAGENT_MAX_CONCURRENCY);
-  const [swarmMaxConcurrency, setSwarmMaxConcurrency] = useState(DEFAULT_SWARM_MAX_CONCURRENCY);
-  const [executionTimeout, setExecutionTimeout] = useState('');
-  const [userQuestionTimeout, setUserQuestionTimeout] = useState('180');
-  const [subagentBatchExecutionPolicy, setSubagentBatchExecutionPolicy] =
-    useState<SubagentBatchExecutionPolicy>(DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY);
-  const [toolExecConfigLoading, setToolExecConfigLoading] = useState(false);
-  const [deferredToolLoadingConfigSaving, setDeferredToolLoadingConfigSaving] = useState(false);
-  const [toolPermissionConfig, setToolPermissionConfig] = useState<ToolPermissionConfig>(DEFAULT_TOOL_PERMISSION_CONFIG);
-  const [permissionConfigSaving, setPermissionConfigSaving] = useState(false);
-  const [showPermissionModeControl, setShowPermissionModeControl] = useState(true);
-  const [permissionModeControlVisibilitySaving, setPermissionModeControlVisibilitySaving] = useState(false);
-  const [isGlobalPermissionRulesDialogOpen, setIsGlobalPermissionRulesDialogOpen] = useState(false);
-
-  const { computerUseEnabled, setComputerUseEnabled } = useComputerUseEnabled();
-  // Browser Control / Computer Use run on the host that runs the Tool. Desktop
-  // Peer B executes them on B; CLI Peer refuses them (deny.rs). When the
-  // rendered peer is a CLI Peer the refresh invokes return "local-only and
-  // cannot run on peer" — we surface that as an explicit unsupported notice
-  // instead of silently degrading. Null = controller local (no peer) or peer
-  // capabilities not yet probed (optimistically supported). See PR #2428 #1.
-  const peerDevice = usePeerDeviceModeOptional();
-  const peerModeActive = peerDevice?.peerMode.active === true;
-  const [peerBrowserControlUnsupported, setPeerBrowserControlUnsupported] = useState(false);
-  const [computerUseAccess, setComputerUseAccess] = useState(false);
-  const [computerUseScreen, setComputerUseScreen] = useState(false);
-  const [computerUseBusy, setComputerUseBusy] = useState(false);
-  const [computerUseStatusLoading, setComputerUseStatusLoading] = useState(false);
-  const [computerUseStatusError, setComputerUseStatusError] = useState(false);
-  const [computerUsePlatformNote, setComputerUsePlatformNote] = useState<string | null>(null);
-
-  // ── Browser control state ───────────────────────────────────────────────
-  const [browserCdpAvailable, setBrowserCdpAvailable] = useState(false);
-  const [browserReady, setBrowserReady] = useState(false);
-  const [browserAutoConnectOnStartup, setBrowserAutoConnectOnStartup] = useState(false);
-  const [browserDefaultCdpSupported, setBrowserDefaultCdpSupported] = useState(false);
-  const [browserDefaultCdpEnabled, setBrowserDefaultCdpEnabled] = useState(false);
-  const [browserSetupUrl, setBrowserSetupUrl] = useState('');
-  const [browserKind, setBrowserKind] = useState('');
-  const [browserVersion, setBrowserVersion] = useState<string | null>(null);
-  const [browserPageCount, setBrowserPageCount] = useState(0);
-  const [browserOptions, setBrowserOptions] = useState<BrowserControlBrowserOption[]>([]);
-  const [preferredBrowser, setPreferredBrowser] = useState(DEFAULT_BROWSER_CONTROL_BROWSER);
-  const [browserControlBusy, setBrowserControlBusy] = useState(false);
-  const [browserStatusLoading, setBrowserStatusLoading] = useState(false);
-  const [browserStatusError, setBrowserStatusError] = useState(false);
-  const [platform, setPlatform] = useState<string>('');
-  const [browserRestartPrompt, setBrowserRestartPrompt] = useState<BrowserControlLaunchResponse | null>(null);
-
-  const refreshComputerUseStatus = useCallback(async (): Promise<boolean> => {
-    if (!IS_TAURI_DESKTOP) return false;
-    setComputerUseStatusLoading(true);
-    setComputerUseStatusError(false);
-    try {
-      const s = await api.invoke<ComputerUseStatusPayload>('computer_use_get_status');
-      setPeerBrowserControlUnsupported(false);
-      setComputerUseEnabled(s.computerUseEnabled);
-      setComputerUseAccess(s.accessibilityGranted);
-      setComputerUseScreen(s.screenCaptureGranted);
-      setComputerUsePlatformNote(s.platformNote);
-      return true;
-    } catch (error) {
-      if (isPeerUnsupportedBrowserControlError(error)) {
-        setPeerBrowserControlUnsupported(true);
-        setComputerUseStatusError(false);
-        return false;
-      }
-      log.error('computer_use_get_status failed', error);
-      setComputerUseStatusError(true);
-      return false;
-    } finally {
-      setComputerUseStatusLoading(false);
-    }
-  }, [setComputerUseEnabled]);
-
-  const refreshBrowserControlStatus = useCallback(async () => {
-    if (!IS_TAURI_DESKTOP) return;
-    setBrowserStatusLoading(true);
-    setBrowserStatusError(false);
-    try {
-      const [s, browsers] = await Promise.all([
-        api.invoke<{
-          cdpAvailable: boolean;
-          defaultCdpSupported: boolean;
-          defaultCdpEnabled: boolean;
-          setupUrl?: string;
-          browserReady: boolean;
-          browserKind: string;
-          browserVersion: string | null;
-          port: number;
-          pageCount: number;
-        }>('browser_control_get_status', { request: { port: 9222 } }),
-        api.invoke<{ options: BrowserControlBrowserOption[] }>('browser_control_list_browsers'),
-      ]);
-      setPeerBrowserControlUnsupported(false);
-      setBrowserCdpAvailable(s.cdpAvailable);
-      setBrowserDefaultCdpSupported(s.defaultCdpSupported);
-      setBrowserDefaultCdpEnabled(s.defaultCdpEnabled);
-      setBrowserSetupUrl(s.setupUrl ?? browserSetupUrlFallback(s.browserKind));
-      setBrowserReady(s.browserReady);
-      setBrowserKind(s.browserKind);
-      setBrowserVersion(s.browserVersion);
-      setBrowserPageCount(s.pageCount);
-      setBrowserOptions(browsers.options);
-    } catch (error) {
-      if (isPeerUnsupportedBrowserControlError(error)) {
-        setPeerBrowserControlUnsupported(true);
-        setBrowserStatusError(false);
-      } else {
-        setBrowserStatusError(true);
-        log.error('browser_control_get_status failed', error);
-      }
-    } finally {
-      setBrowserStatusLoading(false);
-    }
-  }, []);
-
-  // Browser Control / Computer Use route to the rendered host. Re-probe on every
-  // surface switch (local ↔ peer A ↔ peer B): a CLI Peer returns unsupported,
-  // a Desktop Peer / local host returns status. Resets the unsupported flag so
-  // a switch away from a CLI Peer re-shows controls instead of the notice.
-  // The current peer's deviceId is part of the dep so A→B (both peers) fires.
-  const renderedPeerDeviceId = peerDevice?.peerMode.active
-    ? peerDevice.peerMode.deviceId
-    : null;
-  useEffect(() => {
-    if (!IS_TAURI_DESKTOP) return;
-    setPeerBrowserControlUnsupported(false);
-    if (page === 'browser-desktop-control') {
-      void refreshComputerUseStatus();
-      void refreshBrowserControlStatus();
-      void systemAPI.getSystemInfo()
-        .then((info) => setPlatform(info.platform || ''))
-        .catch((error) => log.warn('getSystemInfo failed', error));
-    }
-  }, [
-    page,
-    peerModeActive,
-    renderedPeerDeviceId,
-    refreshComputerUseStatus,
-    refreshBrowserControlStatus,
-  ]);
-
-  const reloadCompanionPets = useCallback(async () => {
-    setCompanionPets(await listAgentCompanionPets());
-  }, []);
-
-  const loadPageData = useCallback(async () => {
-    const isInitialLoad = !hasLoadedPageDataRef.current;
-    if (isInitialLoad) {
-      setIsLoading(true);
-      setLoadError(false);
-    }
-    try {
-      if (page === 'pet') {
-        const [loadedSettings] = await Promise.all([
-          aiExperienceConfigService.getSettingsAsync(),
-          reloadCompanionPets(),
-        ]);
-        setSettings(loadedSettings);
-      } else if (page === 'session-workspace') {
-        setSettings(await aiExperienceConfigService.getSettingsAsync());
-      } else if (page === 'execution') {
-        const [
-          loadedSubagentDefaultModel,
-          loadedModels,
-          deferredToolLoadingEnabled,
-          loadedSubagentMaxConcurrency,
-          loadedSwarmMaxConcurrency,
-          execTimeout,
-          loadedSubagentBatchExecutionPolicy,
-          loadedToolPermissionConfig,
-          loadedUserQuestionTimeout,
-          loadedPermissionModeControlVisibility,
-        ] = await Promise.all([
-          configManager.getConfig<SubagentModelSelection>('ai.agent_model_defaults.subagents.default'),
-          configManager.getConfig<AIModelConfig[]>('ai.models'),
-          configManager.getConfig<boolean>('ai.enable_deferred_tool_loading'),
-          configManager.getConfig<number | null>('ai.subagent_max_concurrency'),
-          configManager.getConfig<number | null>('ai.swarm_max_concurrency'),
-          configManager.getConfig<number | null>('ai.tool_execution_timeout_secs'),
-          configManager.getConfig<SubagentBatchExecutionPolicy>('ai.subagent_batch_execution_policy'),
-          permissionConfigService.getConfig(),
-          configManager.getOptionalConfig<number | null>('ai.user_question_timeout_secs'),
-          configManager.getOptionalConfig<boolean>(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH),
-        ]);
-        setSubagentDefaultModel(loadedSubagentDefaultModel ?? { kind: 'fixed', model_id: 'fast' });
-        setConfiguredModels(loadedModels ?? []);
-        setEnableDeferredToolLoading(deferredToolLoadingEnabled ?? true);
-        setSubagentMaxConcurrency(loadedSubagentMaxConcurrency != null
-          ? loadedSubagentMaxConcurrency
-          : DEFAULT_SUBAGENT_MAX_CONCURRENCY);
-        setSwarmMaxConcurrency(loadedSwarmMaxConcurrency != null
-          ? loadedSwarmMaxConcurrency
-          : DEFAULT_SWARM_MAX_CONCURRENCY);
-        setExecutionTimeout(execTimeout != null ? String(execTimeout) : '');
-        setUserQuestionTimeout(loadedUserQuestionTimeout === undefined || loadedUserQuestionTimeout === 180
-          ? '180'
-          : loadedUserQuestionTimeout === null ? '0' : String(loadedUserQuestionTimeout));
-        setSubagentBatchExecutionPolicy(normalizeSubagentBatchExecutionPolicy(loadedSubagentBatchExecutionPolicy));
-        setToolPermissionConfig(normalizeToolPermissionConfig(loadedToolPermissionConfig));
-        setShowPermissionModeControl(loadedPermissionModeControlVisibility !== false);
-      } else if (page === 'browser-desktop-control') {
-        const [
-          computerUseCfg,
-          browserControlPreferredBrowser,
-          browserControlAutoConnect,
-        ] = await Promise.all([
-          configManager.getConfig<boolean>('ai.computer_use_enabled'),
-          configManager.getConfig<string>('ai.browser_control_preferred_browser'),
-          configManager.getConfig<boolean>('ai.browser_control_auto_connect_on_startup'),
-        ]);
-        if (!IS_TAURI_DESKTOP) {
-          setComputerUseEnabled(computerUseCfg ?? false);
-        }
-        setPreferredBrowser(browserControlPreferredBrowser || DEFAULT_BROWSER_CONTROL_BROWSER);
-        setBrowserAutoConnectOnStartup(browserControlAutoConnect === true);
-      }
-      hasLoadedPageDataRef.current = true;
-    } catch (error) {
-      log.error('Failed to load settings page data', { page, error });
-      if (isInitialLoad) setLoadError(true);
-    } finally {
-      if (isInitialLoad) setIsLoading(false);
-    }
-  }, [page, reloadCompanionPets, setComputerUseEnabled]);
-
-  const saveToolPermissionConfig = async (
-    nextConfig: ToolPermissionConfig,
-    previousConfig: ToolPermissionConfig,
-  ): Promise<boolean> => {
-    if (toolPermissionSaveInFlightRef.current) return false;
-    toolPermissionSaveInFlightRef.current = true;
-    setToolPermissionConfig(nextConfig);
-    setPermissionConfigSaving(true);
-    try {
-      await permissionConfigService.saveConfig(nextConfig);
-      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
-      return true;
-    } catch (error) {
-      log.error('Failed to save tool permission config', error);
-      setToolPermissionConfig(previousConfig);
-      notificationService.error(t('messages.saveFailed'));
-      return false;
-    } finally {
-      toolPermissionSaveInFlightRef.current = false;
-      setPermissionConfigSaving(false);
-    }
-  };
-
-  const handlePermissionModeChange = async (value: string | number | (string | number)[]) => {
-    const nextModeValue = String(Array.isArray(value) ? value[0] : value);
-    const nextMode: ToolPermissionMode = nextModeValue === 'full_access'
-      ? 'full_access'
-      : nextModeValue === 'auto'
-        ? 'auto'
-        : 'ask';
-    const previousConfig = toolPermissionConfig;
-    const currentMode = resolveToolPermissionMode(previousConfig);
-    if (nextMode === currentMode) return;
-
-    if (nextMode === 'full_access') {
-      const confirmed = await confirmDanger(
-        t('permissionPolicy.fullAccessWarningTitle'),
-        t('permissionPolicy.fullAccessWarningMessage'),
-        {
-          confirmText: t('permissionPolicy.fullAccessConfirm'),
-          cancelText: t('permissionPolicy.cancel'),
-        },
-      );
-      if (!confirmed) return;
-    }
-
-    await saveToolPermissionConfig(
-      {
-        policy: {
-          ...previousConfig.policy,
-          preset: nextMode === 'full_access' ? 'full_access' : 'ask',
-        },
-        interaction: {
-          ...previousConfig.interaction,
-          auto_approve_ask: nextMode === 'auto',
-        },
-      },
-      previousConfig,
-    );
-  };
-
-  const handleSaveGlobalPermissionRules = async (rules: PermissionRule[]): Promise<boolean> => {
-    const previousConfig = toolPermissionConfig;
-    return saveToolPermissionConfig(
-      { ...previousConfig, policy: { ...previousConfig.policy, rules } },
-      previousConfig,
-    );
-  };
-
-  const handlePermissionModeControlVisibilityChange = async (visible: boolean) => {
-    const previousVisibility = showPermissionModeControl;
-    setShowPermissionModeControl(visible);
-    setPermissionModeControlVisibilitySaving(true);
-    try {
-      await configManager.setConfig(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH, visible);
-      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
-    } catch (error) {
-      log.error('Failed to save permission mode control visibility', error);
-      setShowPermissionModeControl(previousVisibility);
-      notificationService.error(t('messages.saveFailed'));
-    } finally {
-      setPermissionModeControlVisibilitySaving(false);
-    }
-  };
-
-  useEffect(() => {
-    if (page === 'pet' && !isActive) return;
-    void loadPageData();
-  }, [isActive, loadPageData, page]);
-
-  // ── Session config handlers ──────────────────────────────────────────────
-
-  const updateSetting = async <K extends keyof AIExperienceSettings>(
-    key: K,
-    value: AIExperienceSettings[K]
-  ) => {
-    if (!settings) return;
-    const newSettings = { ...settings, [key]: value };
-    setSettings(newSettings);
-    try {
-      await aiExperienceConfigService.saveSettings({ [key]: value });
-      notification.success(t('messages.saveSuccess'));
-    } catch (error) {
-      log.error('Failed to save AI features settings', error);
-      notification.error(t('messages.saveFailed'));
-      setSettings(settings);
-    }
-  };
-
-  const handleImportCompanionPet = async () => {
-    if (!IS_TAURI_DESKTOP) return;
-    setCompanionPetImporting(true);
-    try {
-      const selected = await open({
-        directory: false,
-        multiple: false,
-        title: t('features.pet.importDialogTitle'),
-        filters: [{ name: 'Petdex', extensions: ['zip'] }],
-      });
-      if (!selected || Array.isArray(selected)) return;
-      const imported = await importAgentCompanionPetPackage(selected);
-      await reloadCompanionPets();
-      await updateSetting('agent_companion_pet', {
-        id: imported.id,
-        displayName: imported.displayName,
-        description: imported.description,
-        source: imported.source,
-        packagePath: imported.packagePath,
-        spritesheetPath: imported.spritesheetPath,
-        spritesheetMimeType: imported.spritesheetMimeType,
-        spriteVersionNumber: imported.spriteVersionNumber,
-      });
-    } catch (error) {
-      log.error('Failed to import Agent companion pet', error);
-      notification.error(t('features.pet.importFailed'));
-    } finally {
-      setCompanionPetImporting(false);
-    }
-  };
-
-  const handleDeleteCompanionPet = async (event: React.MouseEvent, pet: AgentCompanionPetPackage) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!IS_TAURI_DESKTOP || pet.source !== 'user' || !settings) return;
-    const confirmed = await confirmDanger(
-      t('features.pet.deleteConfirmTitle'),
-      t('features.pet.deleteConfirmBody'),
-      { confirmText: t('features.pet.delete') },
-    );
-    if (!confirmed) return;
-    setCompanionPetDeletingPath(pet.packagePath);
-    try {
-      await deleteAgentCompanionPetPackage(pet.packagePath);
-      releaseAgentCompanionPetPreviewBlobs(pet.packagePath, pet.spritesheetPath);
-      await reloadCompanionPets();
-      if (settings.agent_companion_pet?.packagePath === pet.packagePath) {
-        const next = { ...settings, agent_companion_pet: DEFAULT_AGENT_COMPANION_PET };
-        setSettings(next);
-        await aiExperienceConfigService.saveSettings({ agent_companion_pet: DEFAULT_AGENT_COMPANION_PET });
-      }
-      notification.success(t('features.pet.deleteSuccess'));
-    } catch (error) {
-      log.error('Failed to delete Agent companion pet', error);
-      notification.error(t('features.pet.deleteFailed'));
-    } finally {
-      setCompanionPetDeletingPath(null);
-    }
-  };
-
-  const subagentBatchExecutionPolicyOptions: DescribedSelectOption[] = [
-    {
-      value: 'safe_only',
-      label: tTools('config.subagentBatchPolicy.safeOnly'),
-      description: tTools('config.subagentBatchPolicy.safeOnlyDesc'),
-    },
-    {
-      value: 'force_parallel',
-      label: tTools('config.subagentBatchPolicy.forceParallel'),
-      description: tTools('config.subagentBatchPolicy.forceParallelDesc'),
-    },
-  ];
-
-  const selectedCompanionPetValue = settings?.agent_companion_pet?.packagePath
-    ?? DEFAULT_AGENT_COMPANION_PET.packagePath;
-
-  const handleCompanionPetChange = async (value: string | number | (string | number)[]) => {
-    const selectedValue = String(Array.isArray(value) ? value[0] : value);
-    const pet = companionPets.find(item => item.packagePath === selectedValue);
-    if (!pet) return;
-    await updateSetting('agent_companion_pet', {
-      id: pet.id,
-      displayName: pet.displayName,
-      description: pet.description,
-      source: pet.source,
-      packagePath: pet.packagePath,
-      spritesheetPath: pet.spritesheetPath,
-      spritesheetMimeType: pet.spritesheetMimeType,
-      spriteVersionNumber: pet.spriteVersionNumber,
-    });
-  };
-
-  const handleDeferredToolLoadingChange = async (checked: boolean) => {
-    const previous = enableDeferredToolLoading;
-    setEnableDeferredToolLoading(checked);
-    setDeferredToolLoadingConfigSaving(true);
-    try {
-      await configManager.setConfig('ai.enable_deferred_tool_loading', checked);
-      notificationService.success(t('messages.saveSuccess'), { duration: 2000 });
-    } catch (error) {
-      log.error('Failed to save enable_deferred_tool_loading', error);
-      notificationService.error(
-        `${t('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
-      );
-      setEnableDeferredToolLoading(previous);
-    } finally {
-      setDeferredToolLoadingConfigSaving(false);
-    }
-  };
-
-  const handleSubagentBatchExecutionPolicyChange = async (value: string | number | (string | number)[]) => {
-    const nextPolicy = normalizeSubagentBatchExecutionPolicy(Array.isArray(value) ? value[0] : value);
-    const previousPolicy = subagentBatchExecutionPolicy;
-    setSubagentBatchExecutionPolicy(nextPolicy);
-    setToolExecConfigLoading(true);
-    try {
-      await configManager.setConfig('ai.subagent_batch_execution_policy', nextPolicy);
-      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
-      const { globalEventBus } = await import('@/infrastructure/event-bus');
-      globalEventBus.emit('mode:config:updated');
-    } catch (error) {
-      log.error('Failed to save subagent_batch_execution_policy', error);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
-      );
-      setSubagentBatchExecutionPolicy(previousPolicy);
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  const subagentModelValue = subagentDefaultModel.kind === 'inherit' ? 'inherit' : subagentDefaultModel.model_id;
-  const subagentModelOptions: ComboboxOption[] = [
-    { value: 'inherit', label: tTools('config.subagentModelInherit') },
-    { value: 'fast', label: tModels('sessionTitle.model.fast') },
-    { value: 'primary', label: tModels('sessionTitle.model.primary') },
-    ...configuredModels.filter(model => model.enabled && model.id).map(buildModelOption),
-  ];
-  if (!subagentModelOptions.some(option => option.value === subagentModelValue)) {
-    subagentModelOptions.push({
-      value: subagentModelValue,
-      label: tModels('sessionTitle.models.unavailable', { id: subagentModelValue }),
-      disabled: true,
-    });
-  }
-
-  const handleSubagentDefaultModelChange = async (value: string | number) => {
-    const selection: SubagentModelSelection = value === 'inherit'
-      ? { kind: 'inherit' }
-      : { kind: 'fixed', model_id: String(value) };
-    setToolExecConfigLoading(true);
-    try {
-      await configManager.setConfig('ai.agent_model_defaults.subagents.default', selection);
-      setSubagentDefaultModel(selection);
-      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
-    } catch (error) {
-      log.error('Failed to save default subagent model', error);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
-      );
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  const handleSwarmMaxConcurrencyChange = async (input: number) => {
-    if (!Number.isFinite(input)) return;
-    const value = Math.min(SWARM_MAX_CONCURRENCY_LIMIT, Math.max(1, Math.round(input)));
-    const previous = swarmMaxConcurrency;
-    setSwarmMaxConcurrency(value);
-    setToolExecConfigLoading(true);
-    try {
-      await configManager.setConfig('ai.swarm_max_concurrency', value);
-      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
-    } catch (error) {
-      log.error('Failed to save swarm_max_concurrency', error);
-      setSwarmMaxConcurrency(previous);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
-      );
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  const handleSubagentMaxConcurrencyChange = async (input: number) => {
-    if (!Number.isFinite(input)) return;
-    const value = Math.min(SUBAGENT_MAX_CONCURRENCY_LIMIT, Math.max(1, Math.round(input)));
-    const previous = subagentMaxConcurrency;
-    setSubagentMaxConcurrency(value);
-    setToolExecConfigLoading(true);
-    try {
-      await configManager.setConfig('ai.subagent_max_concurrency', value);
-      notificationService.success(tTools('messages.saveSuccess'), { duration: 2000 });
-    } catch (error) {
-      log.error('Failed to save subagent_max_concurrency', error);
-      setSubagentMaxConcurrency(previous);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ${error instanceof Error ? error.message : String(error)}`
-      );
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  const handleComputerUseEnabledChange = async (checked: boolean) => {
-    setComputerUseBusy(true);
-    setComputerUseEnabled(checked);
-    try {
-      await configManager.setConfig('ai.computer_use_enabled', checked);
-      const { globalEventBus } = await import('@/infrastructure/event-bus');
-      globalEventBus.emit('mode:config:updated');
-      notificationService.success(
-        checked ? t('messages.saveSuccess') : t('messages.saveSuccess'),
-        { duration: 2000 }
-      );
-      if (checked) {
-        // Proactively surface the OS permission prompt (macOS Accessibility /
-        // Screen Recording) the moment the user opts in, instead of waiting
-        // for the first agent tool call to fail with a permission error.
-        try {
-          await api.invoke('computer_use_request_permissions');
-        } catch (permError) {
-          log.warn('computer_use_request_permissions failed', permError);
-        }
-      }
-      await refreshComputerUseStatus();
-    } catch (error) {
-      log.error('Failed to save computer_use_enabled', error);
-      notificationService.error(t('messages.saveFailed'));
-      setComputerUseEnabled(!checked);
-    } finally {
-      setComputerUseBusy(false);
-    }
-  };
-
-  const handleComputerUseOpenSettings = async (pane: 'accessibility' | 'screen_capture') => {
-    try {
-      await api.invoke('computer_use_open_system_settings', { request: { pane } });
-    } catch (error) {
-      log.error('computer_use_open_system_settings failed', error);
-      notificationService.error(t('messages.saveFailed'));
-    }
-  };
-
-  const handleBrowserControlBrowserChange = async (value: string | number) => {
-    const nextValue = String(value || DEFAULT_BROWSER_CONTROL_BROWSER);
-    const previousValue = preferredBrowser;
-    setPreferredBrowser(nextValue);
-    setBrowserControlBusy(true);
-    try {
-      await configManager.setConfig(
-        'ai.browser_control_preferred_browser',
-        nextValue === DEFAULT_BROWSER_CONTROL_BROWSER ? '' : nextValue,
-      );
-      await refreshBrowserControlStatus();
-    } catch (error) {
-      log.error('Failed to save browser_control_preferred_browser', error);
-      setPreferredBrowser(previousValue);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
-      );
-    } finally {
-      setBrowserControlBusy(false);
-    }
-  };
-
-  const handleBrowserAutoConnectChange = async (checked: boolean) => {
-    const previousValue = browserAutoConnectOnStartup;
-    setBrowserAutoConnectOnStartup(checked);
-    try {
-      await configManager.setConfig('ai.browser_control_auto_connect_on_startup', checked);
-    } catch (error) {
-      log.error('Failed to save browser_control_auto_connect_on_startup', error);
-      setBrowserAutoConnectOnStartup(previousValue);
-      notificationService.error(
-        `${tTools('messages.saveFailed')}: ` + (error instanceof Error ? error.message : String(error))
-      );
-    }
-  };
-
-  const presentBrowserControlLaunchResult = (result: BrowserControlLaunchResponse) => {
-    const setupUrl = result.setupUrl
-      || browserSetupUrl
-      || browserSetupUrlFallback(result.browserKind);
-    if (result.success) {
-      notificationService.success(
-        t('browserControl.connectSuccess', { browser: result.browserKind }),
-        { duration: 3000 }
-      );
-    } else if (result.status === 'requires_user_profile_setup') {
-      notificationService.info(
-        t('browserControl.userProfileSetupRequired', {
-          browser: result.browserKind,
-          url: setupUrl,
-        }),
-        { duration: 12000 }
-      );
-    } else if (result.status === 'requires_manual_user_profile_setup') {
-      // The platform could not open the settings page, so the URL itself is
-      // the actionable part of the message.
-      notificationService.info(
-        t('browserControl.userProfileSetupManual', {
-          browser: result.browserKind,
-          url: setupUrl,
-        }),
-        { duration: 20000 }
-      );
-    } else if (result.status === 'user_profile_connection_failed') {
-      notificationService.info(
-        t('browserControl.userProfileConnectionFailed', { browser: result.browserKind }),
-        { duration: 12000 }
-      );
-    } else if (result.status === 'needs_restart') {
-      setBrowserRestartPrompt(result);
-    } else if (result.message) {
-      notificationService.info(result.message, { duration: 8000 });
-    }
-  };
-
-  const handleBrowserControlLaunch = async () => {
-    setBrowserControlBusy(true);
-    try {
-      const result = await api.invoke<BrowserControlLaunchResponse>('browser_control_launch', { request: { port: 9222 } });
-      presentBrowserControlLaunchResult(result);
-      await refreshBrowserControlStatus();
-    } catch (error) {
-      log.error('browser_control_launch failed', error);
-      notificationService.error(t('browserControl.connectFailed'));
-    } finally {
-      setBrowserControlBusy(false);
-    }
-  };
-
-  const handleBrowserControlEnableDefaultCdp = async () => {
-    setBrowserControlBusy(true);
-    const setupUrl = browserSetupUrl || browserSetupUrlFallback(browserKind);
-    const promptNotificationId = notificationService.info(
-      t(
-        browserDefaultCdpEnabled
-          ? 'browserControl.defaultCdpConnectPrompt'
-          : 'browserControl.defaultCdpEnablePrompt',
-        { browser: browserKind, url: setupUrl },
-      ),
-      { duration: 0 },
-    );
-    try {
-      const result = await api.invoke<BrowserControlLaunchResponse>(
-        'browser_control_enable_default_cdp',
-        { request: { port: 9222 } },
-      );
-      notificationService.dismiss(promptNotificationId);
-      presentBrowserControlLaunchResult(result);
-      await refreshBrowserControlStatus();
-    } catch (error) {
-      log.error('browser_control_enable_default_cdp failed', error);
-      notificationService.error(t('browserControl.connectFailed'));
-    } finally {
-      notificationService.dismiss(promptNotificationId);
-      setBrowserControlBusy(false);
-    }
-  };
-
-  const handleBrowserControlDisconnect = async () => {
-    setBrowserControlBusy(true);
-    try {
-      const result = await api.invoke<BrowserControlDisconnectResponse>(
-        'browser_control_disconnect',
-        { request: { port: 9222 } },
-      );
-      notificationService.success(
-        t('browserControl.disconnectSuccess', { browser: result.browserKind }),
-        { duration: 4000 },
-      );
-      await refreshBrowserControlStatus();
-    } catch (error) {
-      log.error('browser_control_disconnect failed', error);
-      notificationService.error(t('browserControl.disconnectFailed'));
-    } finally {
-      setBrowserControlBusy(false);
-    }
-  };
-
-  const handleBrowserControlRestart = async () => {
-    if (!browserRestartPrompt) return;
-    setBrowserControlBusy(true);
-    try {
-      const result = await api.invoke<BrowserControlLaunchResponse>('browser_control_restart_with_cdp', {
-        request: { port: 9222 },
-      });
-      if (result.success) {
-        notificationService.success(
-          t('browserControl.restartSuccess', { browser: result.browserKind }),
-          { duration: 3000 }
-        );
-        setBrowserRestartPrompt(null);
-      } else if (result.message) {
-        notificationService.info(result.message, { duration: 8000 });
-      }
-      await refreshBrowserControlStatus();
-    } catch (error) {
-      log.error('browser_control_restart_with_cdp failed', error);
-      notificationService.error(t('browserControl.restartFailed'));
-    } finally {
-      setBrowserControlBusy(false);
-    }
-  };
-
-  const handleToolTimeoutChange = async (value: string) => {
-    const configKey = 'ai.tool_execution_timeout_secs';
-    const trimmedValue = value.trim();
-    if (trimmedValue !== '') {
-      const numValue = parseInt(trimmedValue, 10);
-      if (Number.isNaN(numValue) || numValue < 0) return;
-    }
-    const previous = executionTimeout;
-    setExecutionTimeout(trimmedValue);
-    setToolExecConfigLoading(true);
-    const numValue = trimmedValue === '' ? null : parseInt(trimmedValue, 10);
-    try {
-      await configManager.setConfig(configKey, numValue);
-    } catch (error) {
-      log.error('Failed to save tool timeout config', { error });
-      setExecutionTimeout(previous);
-      notificationService.error(tTools('messages.saveFailed'));
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  const handleUserQuestionTimeoutChange = async (value: string) => {
-    const trimmed = value.trim();
-    if (trimmed !== '' && (!/^\d+$/.test(trimmed) || Number(trimmed) > 3600)) return;
-    if (toolExecConfigLoading || Number(trimmed) === Number(userQuestionTimeout)) return;
-    const previous = userQuestionTimeout;
-    setUserQuestionTimeout(trimmed);
-    setToolExecConfigLoading(true);
-    try {
-      await configManager.setConfig('ai.user_question_timeout_secs', trimmed === '' ? null : Number(trimmed));
-    } catch (error) {
-      log.error('Failed to save user question timeout config', { error });
-      setUserQuestionTimeout(previous);
-      notificationService.error(tTools('messages.saveFailed'));
-    } finally {
-      setToolExecConfigLoading(false);
-    }
-  };
-
-  // ── Derived values ───────────────────────────────────────────────────────
-
-  const computerUseAccessLabel = computerUseStatusLoading
-    ? t('loading.text')
-    : computerUseStatusError ? t('computerUse.statusUnavailable')
-    : computerUseAccess ? t('computerUse.granted') : t('computerUse.notGranted');
-  const computerUseScreenLabel = computerUseStatusLoading
-    ? t('loading.text')
-    : computerUseStatusError ? t('computerUse.statusUnavailable')
-    : computerUseScreen ? t('computerUse.granted') : t('computerUse.notGranted');
-  const computerUsePlatformMessage = computerUsePlatformNote
-    ? platform === 'macos'
-      ? t('computerUse.platformNotes.macos')
-      : platform === 'windows'
-        ? t('computerUse.platformNotes.windows')
-        : platform === 'linux'
-          ? t('computerUse.platformNotes.linux')
-          : t('computerUse.platformNotes.generic')
-    : null;
-  const browserStatusLabel = browserStatusLoading
-    ? t('loading.text')
-    : browserStatusError
-      ? t('browserControl.statusUnavailable')
-      : browserCdpAvailable
-        ? t('browserControl.connected')
-        : browserReady
-          ? t('browserControl.ready')
-          : t('browserControl.notConnected');
-  const browserStatusDescription = !browserStatusLoading && !browserStatusError
-    ? browserCdpAvailable
-      ? `${browserKind} · ${i18nService.formatNumber(browserPageCount)} ${t('browserControl.tabs')}`
-      : browserReady ? t('browserControl.readyNotConnected') : undefined
-    : undefined;
-  const browserSelectOptions: ComboboxOption[] = browserOptions.map((option) => {
-    const label = option.value === DEFAULT_BROWSER_CONTROL_BROWSER
-      ? t('browserControl.defaultBrowser')
-      : option.label;
-    return {
-      value: option.value,
-      label: option.installed ? label : `${label} (${t('browserControl.notInstalled')})`,
-      disabled: !option.installed,
-    };
-  });
-
-  const pageCopyKey = page === 'session-workspace'
-    ? 'sessionWorkspace'
-    : page === 'browser-desktop-control'
-      ? 'browserDesktopControl'
-      : page;
-  const pageTitle = tNavigation(`navigation.pages.${pageCopyKey}.label`);
-  const pageSubtitle = tNavigation(`navigation.pages.${pageCopyKey}.description`);
-  const appearanceView = page;
-  const showsExecutionSettings = page === 'execution';
-
-  const { workspace } = useCurrentWorkspace();
-  const requiresExperienceSettings = page === 'pet' || page === 'session-workspace';
-  if (loadError) {
-    return (
-      <ConfigPageLayout className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view={appearanceView}>
-        <ConfigPageHeader title={pageTitle} subtitle={pageSubtitle} />
-        <ConfigPageContent className="openbitfun-runtime-settings__content" data-openbitfun-component="runtime-settings" data-openbitfun-part="content">
-          <ConfigRetryState
-            message={t('loading.failed')}
-            retryLabel={t('loading.retry')}
-            onRetry={() => void loadPageData()}
-          />
-        </ConfigPageContent>
-      </ConfigPageLayout>
-    );
-  }
-  if (isLoading || (requiresExperienceSettings && !settings)) {
-    return (
-      <ConfigPageLayout className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view={appearanceView}>
-        <ConfigPageHeader title={pageTitle} subtitle={pageSubtitle} />
-        <ConfigPageContent className="openbitfun-runtime-settings__content" data-openbitfun-component="runtime-settings" data-openbitfun-part="content">
-          <ConfigLoadingState label={t('loading.text')} />
-        </ConfigPageContent>
-      </ConfigPageLayout>
-    );
-  }
-
-  return (
-    <ConfigPageLayout className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view={appearanceView}>
-      <ConfigPageHeader title={pageTitle} subtitle={pageSubtitle} />
-
-      <ConfigPageContent className="openbitfun-runtime-settings__content" data-openbitfun-component="runtime-settings" data-openbitfun-part="content">
-
-        {page === 'pet' && settings ? (
-          <>
-
-        {/* ── Desktop Agent companion ───────────────────────────── */}
-        <ConfigPageSection
-          title={t('features.pet.title')}
-          description={t('features.pet.subtitle')}
-        >
-          <ConfigPageRow label={t('features.pet.enable')} align="center">
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Switch
-                checked={settings.enable_agent_companion}
-                onChange={(e) => updateSetting('enable_agent_companion', e.target.checked)}
-              />
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-
-        <ConfigPageSection
-          className="openbitfun-runtime-settings__pet-picker"
-          title={t('features.pet.petLabel')}
-          description={t('features.pet.petDescription')}
-          bodySurface={false}
-          extra={(
-            <div
-              className="openbitfun-runtime-settings__pet-actions"
-              data-openbitfun-component="runtime-settings"
-              data-openbitfun-part="petActions"
-            >
-              <Button
-                size="md"
-                variant="primary"
-                onClick={() => void handleImportCompanionPet()}
-                disabled={!IS_TAURI_DESKTOP || companionPetImporting}
-                title={t('features.pet.importHint')}
-              >
-                {companionPetImporting ? t('features.pet.importing') : t('features.pet.import')}
-              </Button>
-            </div>
-          )}
-          data-openbitfun-component="runtime-settings"
-          data-openbitfun-part="petPicker"
-        >
-          <div
-            className="openbitfun-runtime-settings__pet-chooser"
-            data-openbitfun-component="runtime-settings"
-            data-openbitfun-part="petChooser"
-          >
-            <div
-              className="openbitfun-runtime-settings__pet-gallery"
-              data-openbitfun-component="runtime-settings"
-              data-openbitfun-part="petList"
-              role="radiogroup"
-              aria-label={t('features.pet.petLabel')}
-            >
-              {companionPets.map((pet) => {
-                const label = pet.source === 'preset' && pet.id === 'blue-golden'
-                  ? t('features.pet.presets.blueGolden.name')
-                  : pet.displayName;
-                const sourceLabel = pet.source === 'preset'
-                  ? t('features.pet.groupPreset')
-                  : t('features.pet.groupImported');
-                const isUserPet = pet.source === 'user';
-                const isDeleting = companionPetDeletingPath === pet.packagePath;
-                const isSelected = pet.packagePath === selectedCompanionPetValue;
-                const isDisabled = isDeleting;
-                const previewStyle = {
-                  imageRendering: pet.source === 'preset' && pet.id === 'bitblob' ? 'auto' : undefined,
-                  '--openbitfun-pet-preview-src': `url("${pet.previewSrc}")`,
-                  backgroundSize: `800% ${getPetSpriteLayout(pet.spriteVersionNumber).rows * 100}%`,
-                } as React.CSSProperties;
-
-                return (
-                  <article
-                    key={pet.packagePath}
-                    className="openbitfun-runtime-settings__pet-card"
-                    data-testid="companion-pet-card"
-                    data-pet-id={pet.id}
-                    data-openbitfun-component="runtime-settings"
-                    data-openbitfun-part="petOption"
-                    data-openbitfun-state={isSelected ? 'selected' : undefined}
-                  >
-                    <button data-overflow-trigger
-                      type="button"
-                      className="openbitfun-runtime-settings__pet-card-select"
-                      data-openbitfun-component="runtime-settings"
-                      data-openbitfun-part="petTrigger"
-                      data-openbitfun-state={isSelected ? 'selected' : undefined}
-                      role="radio"
-                      aria-checked={isSelected}
-                      aria-label={label}
-                      disabled={isDisabled}
-                      onClick={() => void handleCompanionPetChange(pet.packagePath)}
-                    >
-                      <span className="openbitfun-runtime-settings__pet-card-preview" aria-hidden>
-                        <span
-                          className="openbitfun-runtime-settings__pet-preview-sprite"
-                          style={previewStyle}
-                        />
-                        {isSelected && (
-                          <span className="openbitfun-runtime-settings__pet-selected-mark">
-                            <Icon name="check-line" size="xs" />
-                          </span>
-                        )}
-                      </span>
-                      <span
-                        className="openbitfun-runtime-settings__pet-card-body"
-                        data-openbitfun-component="runtime-settings"
-                        data-openbitfun-part="petOptionMain"
-                      >
-                        <strong><OverflowText>{label}</OverflowText></strong>
-                        <OverflowText data-openbitfun-component="runtime-settings" data-openbitfun-part="petGroup">
-                          {sourceLabel}
-                        </OverflowText>
-                      </span>
-                    </button>
-                    {isUserPet && IS_TAURI_DESKTOP && (
-                      <Tooltip content={t('features.pet.delete')}>
-                        <IconButton
-                          type="button"
-                          size="sm"
-                          tone="danger"
-                          className="openbitfun-runtime-settings__pet-card-delete"
-                          disabled={isDeleting}
-                          aria-label={`${t('features.pet.delete')}: ${label}`}
-                          onClick={(event) => void handleDeleteCompanionPet(event, pet)}
-                          icon={<Icon name="delete" size="sm" />}
-                        />
-                      </Tooltip>
-                    )}
-                  </article>
-                );
-              })}
-            </div>
-          </div>
-        </ConfigPageSection>
-
-          </>
-        ) : null}
-
-        {page === 'session-workspace' && settings ? (
-          <>
-
-        <DefaultHarnessConfig />
-
-        {/* Accelerated search is available for local workspaces only. */}
-        {WORKSPACE_SEARCH_AVAILABLE && !isRemoteWorkspace(workspace) && (
-          <ConfigPageSection
-            title={t('features.workspaceSearch.title')}
-            description={t('features.workspaceSearch.subtitle')}
-          >
-            <ConfigPageRow label={t('features.workspaceSearch.enable')} align="center">
-              <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-                <Switch
-                  checked={settings.enable_workspace_search}
-                  onChange={(e) => updateSetting('enable_workspace_search', e.target.checked)}
-                />
-              </div>
-            </ConfigPageRow>
-          </ConfigPageSection>
-        )}
-
-        <SessionTitleConfig />
-
-          </>
-        ) : null}
-
-        {showsExecutionSettings ? (
-          <>
-
-        <ConfigPageSection
-          title={t('permissionPolicy.sectionTitle')}
-          description={t('permissionPolicy.sectionDescription')}
-        >
-          <ConfigPageRow
-            label={t('permissionPolicy.mode')}
-            description={`${resolveToolPermissionMode(toolPermissionConfig) === 'full_access'
-              ? t('permissionPolicy.fullAccessDescription')
-              : resolveToolPermissionMode(toolPermissionConfig) === 'auto'
-                ? t('permissionPolicy.autoApproveDescription')
-                : t('permissionPolicy.askDescription')} ${t('permissionPolicy.modeDescription')}`}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Select
-                size="sm"
-                value={resolveToolPermissionMode(toolPermissionConfig)}
-                options={[
-                  { value: 'ask', label: t('permissionPolicy.ask') },
-                  { value: 'auto', label: t('permissionPolicy.autoApprove') },
-                  { value: 'full_access', label: t('permissionPolicy.fullAccess') },
-                ]}
-                disabled={permissionConfigSaving}
-                onValueChange={handlePermissionModeChange}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={t('permissionPolicy.showInChatInput')}
-            description={t('permissionPolicy.showInChatInputDescription')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control">
-              <Switch
-                checked={showPermissionModeControl}
-                disabled={permissionModeControlVisibilitySaving}
-                onChange={event => void handlePermissionModeControlVisibilityChange(event.target.checked)}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={t('permissionPolicy.globalRules')}
-            description={t('permissionPolicy.globalRulesDescription')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                disabled={permissionConfigSaving}
-                onClick={() => setIsGlobalPermissionRulesDialogOpen(true)}
-              >
-                {t('permissionPolicy.manageGlobalRules')}
-              </Button>
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-
-        <GlobalPermissionRulesDialog
-          isOpen={isGlobalPermissionRulesDialogOpen}
-          rules={toolPermissionConfig.policy.rules}
-          isSaving={permissionConfigSaving}
-          onSave={handleSaveGlobalPermissionRules}
-          onClose={() => setIsGlobalPermissionRulesDialogOpen(false)}
-        />
-
-        {/* ── Tool execution behavior ────────────────────────────── */}
-        <ConfigPageSection
-          title={t('toolExecution.sectionTitle')}
-          description={t('toolExecution.sectionDescription')}
-        >
-          <ConfigPageRow
-            label={tTools('config.executionTimeout')}
-            description={tTools('config.executionTimeoutDesc')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <NumberInput
-                value={executionTimeout === '' ? 0 : parseInt(executionTimeout, 10)}
-                onValueChange={(val) => handleToolTimeoutChange(val === 0 ? '' : String(val))}
-                min={0}
-                max={3600}
-                step={5}
-                unit={tTools('config.seconds')}
-                size="sm"
-                variant="compact"
-                disabled={toolExecConfigLoading}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={tTools('config.userQuestionTimeout')}
-            description={tTools('config.userQuestionTimeoutDesc')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <NumberInput
-                value={userQuestionTimeout === '' ? 0 : parseInt(userQuestionTimeout, 10)}
-                onValueChange={(val) => void handleUserQuestionTimeoutChange(val === 0 ? '0' : String(val))}
-                min={0}
-                max={3600}
-                step={5}
-                unit={tTools('config.seconds')}
-                size="sm"
-                variant="compact"
-                disabled={toolExecConfigLoading}
-              />
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-
-        <ConfigPageSection
-          title={tTools('section.subagents.title')}
-          description={tTools('section.subagents.description')}
-        >
-          <ConfigPageRow
-            className="openbitfun-runtime-settings__subagent-model-row"
-            label={
-              <span className="openbitfun-runtime-settings__subagent-model-label">
-                {tTools('config.subagentDefaultModel')}
-                <Tooltip content={tTools('config.subagentModelSettings')}>
-                  <IconButton
-                    type="button"
-                    size="sm"
-                    className="openbitfun-runtime-settings__subagent-model-settings"
-                    aria-label={tTools('config.subagentModelSettings')}
-                    icon={<Icon name="settings" size="sm" />}
-                    onClick={() => useSceneStore.getState().openScene('agents')}
-                  />
-                </Tooltip>
-              </span>
-            }
-            description={tTools('config.subagentDefaultModelDesc')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Combobox
-                value={subagentModelValue}
-                options={subagentModelOptions}
-                size="sm"
-                disabled={toolExecConfigLoading}
-                onValueChange={(value) => void handleSubagentDefaultModelChange(value)}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={tTools('config.subagentBatchPolicy.label')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Select
-                value={subagentBatchExecutionPolicy}
-                options={subagentBatchExecutionPolicyOptions.map(option => ({
-                  disabled: option.disabled,
-                  label: option.description
-                    ? `${option.label} — ${formatStandaloneUiText(option.description)}`
-                    : option.label,
-                  value: option.value,
-                }))}
-                size="sm"
-                disabled={toolExecConfigLoading}
-                onValueChange={handleSubagentBatchExecutionPolicyChange}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={tTools('config.subagentMaxConcurrency')}
-            description={tTools('config.subagentMaxConcurrencyDesc')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <NumberInput
-                value={subagentMaxConcurrency}
-                onValueChange={(val) => void handleSubagentMaxConcurrencyChange(val)}
-                min={1}
-                max={SUBAGENT_MAX_CONCURRENCY_LIMIT}
-                step={1}
-                size="sm"
-                variant="compact"
-                disabled={toolExecConfigLoading}
-              />
-            </div>
-          </ConfigPageRow>
-          <ConfigPageRow
-            label={tTools('config.swarmMaxConcurrency')}
-            description={tTools('config.swarmMaxConcurrencyDesc')}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <NumberInput
-                value={swarmMaxConcurrency}
-                onValueChange={(val) => void handleSwarmMaxConcurrencyChange(val)}
-                min={1}
-                max={SWARM_MAX_CONCURRENCY_LIMIT}
-                step={1}
-                size="sm"
-                variant="compact"
-                disabled={toolExecConfigLoading}
-              />
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-
-        <ConfigPageSection
-          title={t('deferredToolLoading.sectionTitle')}
-          description={t('deferredToolLoading.sectionDescription')}
-        >
-          <ConfigPageRow
-            label={t('common.enable')}
-            description={!enableDeferredToolLoading ? t('deferredToolLoading.warning') : undefined}
-            align="center"
-          >
-            <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-              <Switch
-                checked={enableDeferredToolLoading}
-                onChange={(event) => handleDeferredToolLoadingChange(event.target.checked)}
-                disabled={deferredToolLoadingConfigSaving}
-              />
-            </div>
-          </ConfigPageRow>
-        </ConfigPageSection>
-
-        <ToolJsonRepairSection />
-        <ReviewCapacitySection />
-
-          </>
-        ) : null}
-
-        {page === 'browser-desktop-control' ? (
-          <>
-
-        {/* ── Computer use (desktop) ─────────────────────────────── */}
-        <ConfigPageSection
-          title={t('computerUse.sectionTitle')}
-          description={
-            IS_TAURI_DESKTOP ? t('computerUse.sectionDescription') : t('computerUse.desktopOnly')
-          }
-          extra={IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
-            <ConfigRefreshButton
-              tooltip={t('computerUse.refreshStatus')}
-              loading={computerUseStatusLoading}
-              disabled={computerUseBusy}
-              onClick={() => void refreshComputerUseStatus()}
-            />
-          ) : undefined}
-        >
-          {IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
-            <>
-              <ConfigMessage
-                message={computerUseStatusError
-                  ? { type: 'error', text: t('computerUse.statusLoadFailed') }
-                  : null}
-              />
-              <ConfigPageRow label={t('computerUse.enable')} description={t('computerUse.enableDesc')} align="center">
-                <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-                  <Switch
-                    checked={computerUseEnabled}
-                    onChange={(e) => handleComputerUseEnabledChange(e.target.checked)}
-                    disabled={computerUseBusy || computerUseStatusLoading || computerUseStatusError}
-                  />
-                </div>
-              </ConfigPageRow>
-              <ConfigPageRow
-                label={t('computerUse.accessibility')}
-                description={t('computerUse.accessibilityDesc')}
-                align="center"
-                className="openbitfun-runtime-settings__status-row"
-              >
-                <div
-                  className="openbitfun-runtime-settings__status-actions"
-                  data-openbitfun-component="runtime-settings"
-                  data-openbitfun-part="control"
-                >
-                  <StatusPill
-                    tone={computerUseStatusLoading ? 'neutral' : computerUseStatusError ? 'warning' : computerUseAccess ? 'success' : 'warning'}
-                    role="status"
-                  >
-                    {computerUseAccessLabel}
-                  </StatusPill>
-                  {platform === 'macos' && (
-                    <Button
-                      className="openbitfun-runtime-settings__row-action-btn"
-                      size="sm"
-                      variant="outline"
-                      disabled={computerUseBusy || computerUseStatusLoading}
-                      onClick={() => void handleComputerUseOpenSettings('accessibility')}
-                    >
-                      {t('computerUse.openSettings')}
-                    </Button>
-                  )}
-                </div>
-              </ConfigPageRow>
-              <ConfigPageRow
-                label={t('computerUse.screenCapture')}
-                description={t('computerUse.screenCaptureDesc')}
-                align="center"
-                className="openbitfun-runtime-settings__status-row"
-              >
-                <div
-                  className="openbitfun-runtime-settings__status-actions"
-                  data-openbitfun-component="runtime-settings"
-                  data-openbitfun-part="control"
-                >
-                  <StatusPill
-                    tone={computerUseStatusLoading ? 'neutral' : computerUseStatusError ? 'warning' : computerUseScreen ? 'success' : 'warning'}
-                    role="status"
-                  >
-                    {computerUseScreenLabel}
-                  </StatusPill>
-                  {platform === 'macos' && (
-                    <Button
-                      className="openbitfun-runtime-settings__row-action-btn"
-                      size="sm"
-                      variant="outline"
-                      disabled={computerUseBusy || computerUseStatusLoading}
-                      onClick={() => void handleComputerUseOpenSettings('screen_capture')}
-                    >
-                      {t('computerUse.openSettings')}
-                    </Button>
-                  )}
-                </div>
-              </ConfigPageRow>
-              {computerUsePlatformMessage && (
-                <div
-                  className="openbitfun-runtime-settings__platform-note"
-                  data-openbitfun-component="runtime-settings"
-                  data-openbitfun-part="platformNote"
-                  role="note"
-                >
-                  <Icon
-                    aria-hidden="true"
-                    className="openbitfun-runtime-settings__platform-note-icon"
-                    name="info"
-                    size="sm"
-                  />
-                  <p className="openbitfun-runtime-settings__platform-note-copy">
-                    <strong>{t('computerUse.platformNote')}: </strong>
-                    {computerUsePlatformMessage}
-                  </p>
-                </div>
-              )}
-            </>
-          ) : peerBrowserControlUnsupported ? (
-            <ConfigPageRow
-              label={t('computerUse.peerUnsupported')}
-              description=""
-              align="center"
-            >
-              <span />
-            </ConfigPageRow>
-          ) : null}
-        </ConfigPageSection>
-
-        {/* ── Browser control (CDP) ──────────────────────────────── */}
-        <ConfigPageSection
-          title={t('browserControl.sectionTitle')}
-          extra={IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
-            <ConfigRefreshButton
-              tooltip={t('browserControl.refreshStatus')}
-              loading={browserStatusLoading}
-              disabled={browserControlBusy}
-              onClick={() => void refreshBrowserControlStatus()}
-            />
-          ) : undefined}
-          description={
-            IS_TAURI_DESKTOP ? t('browserControl.sectionDescription') : t('browserControl.desktopOnly')
-          }
-        >
-          {IS_TAURI_DESKTOP && !peerBrowserControlUnsupported ? (
-            <>
-              <ConfigMessage
-                message={browserStatusError
-                  ? { type: 'error', text: t('browserControl.statusLoadFailed') }
-                  : null}
-              />
-              <ConfigPageRow
-                label={t('browserControl.preferredBrowser')}
-                description={t(browserCdpAvailable ? 'browserControl.preferredBrowserConnectedDesc' : 'browserControl.preferredBrowserDesc')}
-                align="center"
-              >
-                <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-                  <Select
-                    value={preferredBrowser}
-                    options={browserSelectOptions}
-                    size="sm"
-                    disabled={browserCdpAvailable || browserControlBusy || browserStatusLoading || browserStatusError || browserSelectOptions.length === 0}
-                    onValueChange={(value) => void handleBrowserControlBrowserChange(value)}
-                  />
-                </div>
-              </ConfigPageRow>
-              {browserDefaultCdpSupported && (
-                <ConfigPageRow
-                  label={t('browserControl.defaultCdp')}
-                  description={t('browserControl.defaultCdpDesc')}
-                  align="center"
-                  className="openbitfun-runtime-settings__status-row"
-                >
-                  <div
-                    className="openbitfun-runtime-settings__status-actions"
-                    data-openbitfun-component="runtime-settings"
-                    data-openbitfun-part="control"
-                  >
-                    <StatusPill
-                      tone={browserStatusLoading ? 'neutral' : browserStatusError ? 'warning' : browserDefaultCdpEnabled ? 'success' : 'neutral'}
-                      role="status"
-                    >
-                      {t(browserStatusLoading ? 'loading.text' : browserStatusError ? 'browserControl.statusUnavailable' : browserDefaultCdpEnabled
-                        ? 'browserControl.defaultCdpEnabled'
-                        : 'browserControl.defaultCdpDisabled')}
-                    </StatusPill>
-                  </div>
-                </ConfigPageRow>
-              )}
-              {browserDefaultCdpSupported && (
-                <ConfigPageRow
-                  label={t('browserControl.autoConnectOnStartup')}
-                  description={t('browserControl.autoConnectOnStartupDesc')}
-                  align="center"
-                >
-                  <div className="openbitfun-runtime-settings__row-control" data-openbitfun-component="runtime-settings" data-openbitfun-part="control">
-                    <Switch
-                      checked={browserAutoConnectOnStartup}
-                      onChange={(e) => void handleBrowserAutoConnectChange(e.target.checked)}
-                      disabled={browserControlBusy || browserStatusLoading || browserStatusError}
-                    />
-                  </div>
-                </ConfigPageRow>
-              )}
-              <ConfigPageRow
-                label={t('browserControl.status')}
-                description={browserStatusDescription}
-                align="center"
-                className="openbitfun-runtime-settings__status-row"
-              >
-                <div
-                  className="openbitfun-runtime-settings__status-actions"
-                  data-openbitfun-component="runtime-settings"
-                  data-openbitfun-part="control"
-                >
-                  <StatusPill
-                    tone={browserStatusLoading ? 'neutral' : browserStatusError ? 'warning' : browserCdpAvailable ? 'success' : 'neutral'}
-                    role="status"
-                    title={browserCdpAvailable && browserVersion ? `${browserKind} ${browserVersion}` : undefined}
-                  >
-                    {browserStatusLabel}
-                  </StatusPill>
-                  {browserCdpAvailable ? (
-                    <Button
-                      className="openbitfun-runtime-settings__row-action-btn"
-                      size="sm"
-                      variant="outline"
-                      disabled={browserControlBusy || browserStatusLoading || browserStatusError}
-                      onClick={() => void handleBrowserControlDisconnect()}
-                    >
-                      {t('browserControl.disconnect')}
-                    </Button>
-                  ) : (
-                    <Button
-                      className="openbitfun-runtime-settings__row-action-btn"
-                      size="sm"
-                      variant="outline"
-                      disabled={browserControlBusy || browserStatusLoading || browserStatusError}
-                      onClick={() => void (browserDefaultCdpSupported
-                        ? handleBrowserControlEnableDefaultCdp()
-                        : handleBrowserControlLaunch())}
-                    >
-                      {t(browserDefaultCdpSupported && !browserDefaultCdpEnabled
-                        ? 'browserControl.enableDefaultCdp'
-                        : 'browserControl.connect')}
-                    </Button>
-                  )}
-                </div>
-              </ConfigPageRow>
-            </>
-          ) : peerBrowserControlUnsupported ? (
-            <ConfigPageRow
-              label={t('browserControl.peerUnsupported')}
-              description=""
-              align="center"
-            >
-              <span />
-            </ConfigPageRow>
-          ) : null}
-        </ConfigPageSection>
-
-        <Dialog
-          open={browserRestartPrompt !== null}
-          onOpenChange={(nextOpen) => {
-            if (!nextOpen && !browserControlBusy) setBrowserRestartPrompt(null);
-          }}
-          size="sm"
-          closeOnPointerOutside={!browserControlBusy}
-        >
-          <DialogHeader>
-            <DialogHeading>
-              <DialogTitle>{t('browserControl.restartModal.title')}</DialogTitle>
-            </DialogHeading>
-            <DialogClose />
-          </DialogHeader>
-          <DialogBody>
-          <div className="openbitfun-debug-config__modal-body" data-openbitfun-component="runtime-settings" data-openbitfun-part="restartModal">
-            <p>{t('browserControl.restartModal.description', { browser: browserRestartPrompt?.browserKind || browserKind })}</p>
-            <p>{t('browserControl.restartModal.warning')}</p>
-            {browserRestartPrompt?.message ? (
-              <p className="openbitfun-runtime-settings__hint">{browserRestartPrompt.message}</p>
-            ) : null}
-          </div>
-          </DialogBody>
-          <DialogFooter
-            separator
-            className="openbitfun-debug-config__modal-footer"
-            data-openbitfun-component="runtime-settings"
-            data-openbitfun-part="modalFooter"
-          >
-            <Button
-              variant="fill"
-              size="sm"
-              onClick={() => setBrowserRestartPrompt(null)}
-              disabled={browserControlBusy}
-            >
-              {t('browserControl.restartModal.cancel')}
-            </Button>
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => void handleBrowserControlRestart()}
-              disabled={browserControlBusy}
-            >
-              {browserControlBusy
-                ? t('browserControl.restartModal.restarting')
-                : t('browserControl.restartModal.confirm')}
-            </Button>
-          </DialogFooter>
-        </Dialog>
-
-          </>
-        ) : null}
-
-      </ConfigPageContent>
-    </ConfigPageLayout>
-  );
-};
-
-export function PetSettingsPage({ isActive }: { isActive?: boolean }): React.ReactElement {
-  return <RuntimeSettingsPage page="pet" isActive={isActive} />;
-}
-
-export function SessionWorkspaceSettingsPage(): React.ReactElement {
-  return <RuntimeSettingsPage page="session-workspace" />;
-}
-
-export function ExecutionSettingsPage(): React.ReactElement {
-  return <RuntimeSettingsPage page="execution" />;
-}
-
-export function BrowserDesktopControlSettingsPage(): React.ReactElement {
-  return <RuntimeSettingsPage page="browser-desktop-control" />;
-}
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.tsx
index a0439b98af..d2248b02bc 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.tsx
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.tsx
@@ -141,7 +141,7 @@ export const ConfigPageSection: React.FC<ConfigPageSectionProps> = ({
   );
 };
 
-export interface ConfigPageRowProps {
+export interface ConfigPageRowProps extends React.HTMLAttributes<HTMLDivElement> {
   label: React.ReactNode;
   /** Marks the row label as required. The control still owns its native required or aria-required state. */
   required?: boolean;
@@ -170,6 +170,7 @@ export const ConfigPageRow: React.FC<ConfigPageRowProps> = ({
   multiline = false,
   wide = false,
   balanced = false,
+  ...props
 }) => {
   const hasControl = children !== null && children !== undefined && children !== false;
   const cls = [
@@ -190,6 +191,7 @@ export const ConfigPageRow: React.FC<ConfigPageRowProps> = ({
       data-openbitfun-align={align}
       data-openbitfun-layout={wide ? 'wide' : balanced ? 'balanced' : multiline ? 'multiline' : 'default'}
       data-required={required ? 'true' : 'false'}
+      {...props}
     >
       <div className="openbitfun-config-page-row__meta">
         {/* div (not p): label may contain buttons; button-in-p freezes React event path */}
diff --git a/src/web-ui/src/infrastructure/config/components/index.ts b/src/web-ui/src/infrastructure/config/components/index.ts
index c10b454048..4b99fa7ee7 100644
--- a/src/web-ui/src/infrastructure/config/components/index.ts
+++ b/src/web-ui/src/infrastructure/config/components/index.ts
@@ -1,20 +1,4 @@
-
-export { default as ModelSettingsPage } from './ModelSettingsPage';
 export { default as MCPResourceBrowser } from './MCPResourceBrowser';
 export { default as McpToolsConfig } from './McpToolsConfig';
-export { default as EditorConfig } from './EditorConfig';
-export {
-  GeneralSettingsPage,
-  TerminalSettingsPage,
-  DiagnosticsSettingsPage,
-} from './ApplicationSettingsPages';
-export { default as AppearanceSettingsPage } from './AppearanceSettingsPage';
-
-
 export { default as DefaultModelConfig } from './DefaultModelConfig';
-
-
-export type { EditorConfigProps } from './EditorConfig';
-
-
 export * from './common';
diff --git a/src/web-ui/src/infrastructure/config/index.ts b/src/web-ui/src/infrastructure/config/index.ts
index 8980f29d9a..8f7c78343b 100644
--- a/src/web-ui/src/infrastructure/config/index.ts
+++ b/src/web-ui/src/infrastructure/config/index.ts
@@ -14,8 +14,6 @@ export * from './services/ConfigManager';
 export * from './services/modelConfigs';
 export * from './services/PermissionConfigService';
 
-// Components
-export { default as ModelSettingsPage } from './components/ModelSettingsPage';
 
 // Default instance
 export { configManager } from './services/ConfigManager';
diff --git a/src/web-ui/src/infrastructure/config/services/AgentCompanionPetService.ts b/src/web-ui/src/infrastructure/config/services/AgentCompanionPetService.ts
index 32178fbeb9..6d2d19f2b5 100644
--- a/src/web-ui/src/infrastructure/config/services/AgentCompanionPetService.ts
+++ b/src/web-ui/src/infrastructure/config/services/AgentCompanionPetService.ts
@@ -225,6 +225,18 @@ export async function listAgentCompanionPets(): Promise<AgentCompanionPetPackage
   }
 }
 
+export async function selectAgentCompanionPetPackage(title: string): Promise<string | null> {
+  if (!isTauriRuntime()) throw new Error('Pet package selection requires the desktop surface');
+  const { open } = await import('@tauri-apps/plugin-dialog');
+  const selected = await open({
+    directory: false,
+    multiple: false,
+    title,
+    filters: [{ name: 'Petdex', extensions: ['zip'] }],
+  });
+  return typeof selected === 'string' ? selected : null;
+}
+
 export async function importAgentCompanionPetPackage(path: string): Promise<AgentCompanionPetPackage> {
   const pet = await api.invoke<AgentCompanionPetSelection>('import_agent_companion_pet_package', {
     request: { path },
diff --git a/src/web-ui/src/locales/en-US/settings.json b/src/web-ui/src/locales/en-US/settings.json
index acd7a2a35b..db1b4bcbf9 100644
--- a/src/web-ui/src/locales/en-US/settings.json
+++ b/src/web-ui/src/locales/en-US/settings.json
@@ -5,32 +5,24 @@
       "empty": "No matching settings"
     },
     "categories": {
-      "application": "App & Interface",
-      "ai": "AI & Models",
-      "workspace": "Sessions & Workspace",
+      "application": "Application & Interface",
+      "ai": "Models & Agents",
+      "development": "Programming & Development",
       "tools": "Tools & Integrations",
       "data": "Data & Maintenance"
     },
     "pages": {
       "general": {
         "label": "General",
-        "description": "Set startup, update, sleep, window, and notification behavior"
+        "description": "Configure language, startup, updates, sleep, window behavior, and notifications"
       },
       "appearance": {
         "label": "Appearance",
-        "description": "Choose the interface language, theme, and text size"
+        "description": "Customize themes, appearance packages, and fonts"
       },
       "pet": {
-        "label": "Pet",
-        "description": "Choose a pet and whether to show it"
-      },
-      "voice": {
-        "label": "Voice",
-        "description": "Set up local dictation and live voice calls in the cloud"
-      },
-      "shortcuts": {
-        "label": "Keyboard Shortcuts",
-        "description": "View and customize keyboard shortcuts"
+        "label": "Pet & assistant",
+        "description": "Choose your pet and configure real-time voice calls with the assistant"
       },
       "terminal": {
         "label": "Terminal",
@@ -44,21 +36,9 @@
         "label": "Models",
         "description": "Connect model providers and choose models for each type of task"
       },
-      "memory": {
-        "label": "Memory",
-        "description": "Control how agents create and use memories from sessions"
-      },
-      "sessionWorkspace": {
-        "label": "Session & Workspace",
-        "description": "Set the runtime for new sessions, title generation, and workspace search"
-      },
-      "worktrees": {
-        "label": "Worktrees",
-        "description": "Set session isolation defaults and manage workspace worktrees"
-      },
       "execution": {
-        "label": "Execution & Permissions",
-        "description": "Set tool approval rules, timeouts, and task concurrency"
+        "label": "Execution & Collaboration",
+        "description": "Configure tool timeouts, agent concurrency, and review capacity"
       },
       "browserDesktopControl": {
         "label": "Browser & Desktop Control",
@@ -77,8 +57,8 @@
         "description": "Connect MCP servers to give agents access to external tools and data"
       },
       "acp": {
-        "label": "ACP Agents",
-        "description": "Connect external agents through ACP to run tasks in OpenBitFun"
+        "label": "External Agents",
+        "description": "Connect external agents on this host or an SSH host through ACP"
       },
       "usage": {
         "label": "Call Statistics",
@@ -91,16 +71,41 @@
       "diagnostics": {
         "label": "Logs & Diagnostics",
         "description": "Configure logging and export diagnostic information"
+      },
+      "input": {
+        "label": "Input & Interaction",
+        "description": "Configure voice dictation and keyboard shortcuts"
+      },
+      "sessionMemory": {
+        "label": "Sessions & Memory",
+        "description": "Configure default harnesses, session titles, and memory behavior"
+      },
+      "permissions": {
+        "label": "Permission Rules",
+        "description": "Configure default approval behavior and global tool permission rules"
+      },
+      "workspaceGit": {
+        "label": "Workspace & Git",
+        "description": "Configure file search, commit attribution, and worktrees, and manage isolated working directories"
       }
     },
     "views": {
-      "common": "Common",
-      "advanced": "Advanced",
       "local": "Local",
       "ssh": "SSH",
-      "json": "Advanced JSON",
+      "json": "Advanced JSON"
+    },
+    "sections": {
+      "voice": "Voice",
+      "shortcuts": "Keyboard Shortcuts",
+      "session": "Session Defaults",
+      "memory": "Memory",
+      "workspace-search": "Workspace Search",
+      "worktrees": "Worktrees",
+      "git": "Git Commits",
       "quick-actions": "Quick Actions",
-      "hooks": "Hooks"
+      "hooks": "Event Hooks",
+      "pet": "Pet",
+      "voice-call": "Real-time voice calls"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/en-US/settings/application.json b/src/web-ui/src/locales/en-US/settings/application.json
index 315753bd3b..bfb4a99235 100644
--- a/src/web-ui/src/locales/en-US/settings/application.json
+++ b/src/web-ui/src/locales/en-US/settings/application.json
@@ -200,13 +200,13 @@
     "sections": {
       "terminal": "Terminal",
       "defaultTerminal": "Default Terminal",
-      "terminalHint": "New terminals use the selected shell; open terminals keep their existing shell"
+      "terminalHint": "New terminals use the selected shell; open terminals keep their existing shell",
+      "terminalHintWithCmdFallback": "New terminals use the selected shell; open terminals keep their existing shell. Agent commands actually use PowerShell."
     },
     "controls": {
       "refreshTooltip": "Refresh available terminals",
       "autoDetect": "Auto Detect (Recommended)",
       "description": "Used for new terminals and agent commands in local workspaces",
-      "cmdFallbackMessage": "Agent commands actually use PowerShell.",
       "placeholder": "Select default terminal",
       "noShells": "No available terminals detected"
     },
diff --git a/src/web-ui/src/locales/en-US/settings/hooks.json b/src/web-ui/src/locales/en-US/settings/hooks.json
index abd7828bfb..86879e6b06 100644
--- a/src/web-ui/src/locales/en-US/settings/hooks.json
+++ b/src/web-ui/src/locales/en-US/settings/hooks.json
@@ -3,7 +3,7 @@
   "subtitle": "Run commands automatically when selected agent events occur",
   "loading": "Loading hook settings...",
   "activation": {
-    "title": "Activation",
+    "title": "Agent Hooks",
     "description": "Commands run as the user running OpenBitFun; enable hooks only from trusted sources"
   },
   "fields": {
diff --git a/src/web-ui/src/locales/en-US/settings/memory.json b/src/web-ui/src/locales/en-US/settings/memory.json
index 536813d547..6a5049163d 100644
--- a/src/web-ui/src/locales/en-US/settings/memory.json
+++ b/src/web-ui/src/locales/en-US/settings/memory.json
@@ -1,18 +1,17 @@
 {
   "title": "Memory",
   "subtitle": "Control how agents create and use memories from sessions",
-  "scopeNotice": "Settings, candidate sessions, and memory files belong to the current execution host; other devices keep separate memories",
   "sections": {
     "basic": {
-      "title": "Basics",
+      "title": "Memory",
       "description": "Turning memory off keeps existing data; use Memory actions to clear it separately"
     },
     "models": {
-      "title": "Models",
+      "title": "Memory models",
       "description": "Unless set separately, extraction uses the primary model and consolidation uses the extraction model"
     },
     "advanced": {
-      "title": "Advanced settings",
+      "title": "Memory processing",
       "description": "Limit which sessions are processed and how much memory work runs; defaults usually suffice"
     },
     "extraction": {
diff --git a/src/web-ui/src/locales/en-US/settings/runtime.json b/src/web-ui/src/locales/en-US/settings/runtime.json
index b6450b48f1..64bd3533a1 100644
--- a/src/web-ui/src/locales/en-US/settings/runtime.json
+++ b/src/web-ui/src/locales/en-US/settings/runtime.json
@@ -19,6 +19,8 @@
       "petLabel": "Pet appearance",
       "petDescription": "Import a Petdex ZIP pack or choose a built-in pet",
       "petPlaceholder": "Choose pet appearance",
+      "current": "Current",
+      "previewUnavailable": "Preview unavailable",
       "groupPreset": "Presets",
       "groupImported": "Imported",
       "import": "Import",
diff --git a/src/web-ui/src/locales/en-US/settings/voice-input.json b/src/web-ui/src/locales/en-US/settings/voice-input.json
index a26738ea1a..84ed40ab19 100644
--- a/src/web-ui/src/locales/en-US/settings/voice-input.json
+++ b/src/web-ui/src/locales/en-US/settings/voice-input.json
@@ -1,6 +1,6 @@
 {
   "title": "Voice",
-  "subtitle": "Set up local dictation and live voice calls in the cloud",
+  "subtitle": "Configure voice dictation on this device",
   "loading": "Loading voice input settings...",
   "sections": {
     "basic": "Voice input",
@@ -75,7 +75,8 @@
       "saved": "Realtime voice settings saved",
       "saveFailed": "Failed to save realtime voice settings",
       "required": "Enter an API key and voice before enabling realtime voice.",
-      "unsaved": "You have unsaved realtime voice changes."
+      "unsaved": "You have unsaved realtime voice changes.",
+      "unsupported": "Real-time voice calls are only available in OpenBitFun Desktop."
     },
     "call": {
       "title": "Live Call",
diff --git a/src/web-ui/src/locales/zh-CN/settings.json b/src/web-ui/src/locales/zh-CN/settings.json
index f7068e9ea9..c7bceb3c2c 100644
--- a/src/web-ui/src/locales/zh-CN/settings.json
+++ b/src/web-ui/src/locales/zh-CN/settings.json
@@ -6,31 +6,23 @@
     },
     "categories": {
       "application": "应用与界面",
-      "ai": "AI 与模型",
-      "workspace": "会话与工作区",
+      "ai": "模型与智能体",
+      "development": "编程与开发",
       "tools": "工具与集成",
       "data": "数据与维护"
     },
     "pages": {
       "general": {
         "label": "通用",
-        "description": "调整启动、更新、休眠、窗口与通知行为"
+        "description": "调整界面语言、启动、更新、休眠、窗口与通知行为"
       },
       "appearance": {
         "label": "外观",
-        "description": "调整界面语言、主题与字体大小"
+        "description": "调整主题、外观包与字体"
       },
       "pet": {
-        "label": "宠物",
-        "description": "选择宠物形象，控制是否显示"
-      },
-      "voice": {
-        "label": "语音",
-        "description": "设置本地语音输入与云端实时通话"
-      },
-      "shortcuts": {
-        "label": "快捷键",
-        "description": "查看和自定义各操作的键盘快捷键"
+        "label": "宠物与助手",
+        "description": "选择宠物形象，设置助手实时语音通话"
       },
       "terminal": {
         "label": "终端",
@@ -44,21 +36,9 @@
         "label": "模型",
         "description": "连接模型服务，并选择各类任务使用的模型"
       },
-      "memory": {
-        "label": "记忆",
-        "description": "控制智能体如何从会话中生成和使用记忆"
-      },
-      "sessionWorkspace": {
-        "label": "会话与工作区",
-        "description": "设置新会话的执行框架、标题生成与工作区搜索"
-      },
-      "worktrees": {
-        "label": "Worktrees",
-        "description": "设置会话隔离的默认行为，管理工作区 Worktree"
-      },
       "execution": {
-        "label": "执行与权限",
-        "description": "设置工具确认规则、运行时限与任务并行方式"
+        "label": "执行与协作",
+        "description": "设置工具运行时限、智能体并行方式与审核容量"
       },
       "browserDesktopControl": {
         "label": "浏览器与桌面控制",
@@ -77,8 +57,8 @@
         "description": "连接 MCP 服务，为智能体提供外部工具与数据源"
       },
       "acp": {
-        "label": "ACP 智能体",
-        "description": "通过 ACP 接入外部智能体，在 OpenBitFun 中运行任务"
+        "label": "外部智能体",
+        "description": "通过 ACP 接入本机或 SSH 主机上的外部智能体"
       },
       "usage": {
         "label": "调用统计",
@@ -91,16 +71,41 @@
       "diagnostics": {
         "label": "日志与诊断",
         "description": "调整日志记录，导出故障排查信息"
+      },
+      "input": {
+        "label": "输入与交互",
+        "description": "设置语音转文字与键盘快捷键"
+      },
+      "sessionMemory": {
+        "label": "会话与记忆",
+        "description": "设置新会话的执行框架、标题生成与记忆策略"
+      },
+      "permissions": {
+        "label": "权限规则",
+        "description": "设置新会话的审批模式与全局工具权限规则"
+      },
+      "workspaceGit": {
+        "label": "工作区与 Git",
+        "description": "设置文件搜索、Git 提交署名与 Worktree，管理隔离工作目录"
       }
     },
     "views": {
-      "common": "常用",
-      "advanced": "高级",
       "local": "本机",
       "ssh": "SSH",
-      "json": "高级 JSON",
+      "json": "高级 JSON"
+    },
+    "sections": {
+      "voice": "语音",
+      "shortcuts": "快捷键",
+      "session": "会话默认行为",
+      "memory": "记忆",
+      "workspace-search": "工作区搜索",
+      "worktrees": "Worktrees",
+      "git": "Git 提交",
       "quick-actions": "快捷动作",
-      "hooks": "Hooks"
+      "hooks": "事件 Hooks",
+      "pet": "宠物",
+      "voice-call": "实时语音通话"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/application.json b/src/web-ui/src/locales/zh-CN/settings/application.json
index b9a2167be1..4f2a008418 100644
--- a/src/web-ui/src/locales/zh-CN/settings/application.json
+++ b/src/web-ui/src/locales/zh-CN/settings/application.json
@@ -200,13 +200,13 @@
     "sections": {
       "terminal": "终端",
       "defaultTerminal": "默认终端",
-      "terminalHint": "新建终端使用所选 Shell，已打开的终端继续使用原来的 Shell"
+      "terminalHint": "新建终端使用所选 Shell，已打开的终端继续使用原来的 Shell",
+      "terminalHintWithCmdFallback": "新建终端使用所选 Shell，已打开的终端继续使用原来的 Shell；智能体执行命令时实际使用 PowerShell"
     },
     "controls": {
       "refreshTooltip": "刷新可用终端列表",
       "autoDetect": "自动检测 (推荐)",
       "description": "用于新建终端，以及本地工作区中智能体执行的命令",
-      "cmdFallbackMessage": "智能体执行命令时实际使用 PowerShell。",
       "placeholder": "选择默认终端",
       "noShells": "未检测到可用的终端"
     },
diff --git a/src/web-ui/src/locales/zh-CN/settings/hooks.json b/src/web-ui/src/locales/zh-CN/settings/hooks.json
index a3c2746c7b..4205e1d522 100644
--- a/src/web-ui/src/locales/zh-CN/settings/hooks.json
+++ b/src/web-ui/src/locales/zh-CN/settings/hooks.json
@@ -3,7 +3,7 @@
   "subtitle": "在指定的智能体事件发生时自动运行命令",
   "loading": "正在加载 Hook 设置...",
   "activation": {
-    "title": "启用",
+    "title": "智能体 Hooks",
     "description": "命令以运行 OpenBitFun 的用户权限执行，只启用可信来源的 Hooks"
   },
   "fields": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/memory.json b/src/web-ui/src/locales/zh-CN/settings/memory.json
index f22b77912b..95c745cf75 100644
--- a/src/web-ui/src/locales/zh-CN/settings/memory.json
+++ b/src/web-ui/src/locales/zh-CN/settings/memory.json
@@ -1,18 +1,17 @@
 {
   "title": "记忆",
   "subtitle": "控制智能体如何从会话中生成和使用记忆",
-  "scopeNotice": "设置、候选会话和记忆文件均属于当前执行主机；其他设备的记忆独立保存",
   "sections": {
     "basic": {
-      "title": "基础",
+      "title": "记忆",
       "description": "关闭记忆会保留已有数据；如需清空，请在“记忆操作”中单独执行"
     },
     "models": {
-      "title": "模型",
+      "title": "记忆模型",
       "description": "未单独指定时，抽取跟随主模型，整理跟随抽取模型"
     },
     "advanced": {
-      "title": "高级设置",
+      "title": "记忆处理",
       "description": "限制记忆处理的会话范围和工作量；通常无需修改"
     },
     "extraction": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/runtime.json b/src/web-ui/src/locales/zh-CN/settings/runtime.json
index ac22bce8cc..a8b5d5af14 100644
--- a/src/web-ui/src/locales/zh-CN/settings/runtime.json
+++ b/src/web-ui/src/locales/zh-CN/settings/runtime.json
@@ -19,6 +19,8 @@
       "petLabel": "宠物形象",
       "petDescription": "可导入 Petdex ZIP 形象包，或选择预置形象",
       "petPlaceholder": "选择宠物形象",
+      "current": "当前使用",
+      "previewUnavailable": "预览不可用",
       "groupPreset": "预置",
       "groupImported": "已导入",
       "import": "导入",
diff --git a/src/web-ui/src/locales/zh-CN/settings/voice-input.json b/src/web-ui/src/locales/zh-CN/settings/voice-input.json
index 8354708fc5..38a74755e4 100644
--- a/src/web-ui/src/locales/zh-CN/settings/voice-input.json
+++ b/src/web-ui/src/locales/zh-CN/settings/voice-input.json
@@ -1,6 +1,6 @@
 {
   "title": "语音",
-  "subtitle": "设置本地语音输入与云端实时通话",
+  "subtitle": "设置当前设备的语音输入",
   "loading": "正在加载语音输入设置...",
   "sections": {
     "basic": "语音输入",
@@ -75,7 +75,8 @@
       "saved": "实时语音设置已保存",
       "saveFailed": "保存实时语音设置失败",
       "required": "启用实时语音前，请填写 API Key 和语音角色。",
-      "unsaved": "实时语音配置有尚未保存的修改。"
+      "unsaved": "实时语音配置有尚未保存的修改。",
+      "unsupported": "实时语音通话仅在 OpenBitFun 桌面端中可用。"
     },
     "call": {
       "title": "实时通话",
diff --git a/src/web-ui/src/locales/zh-TW/settings.json b/src/web-ui/src/locales/zh-TW/settings.json
index da5fd05c55..eac677405f 100644
--- a/src/web-ui/src/locales/zh-TW/settings.json
+++ b/src/web-ui/src/locales/zh-TW/settings.json
@@ -5,32 +5,24 @@
       "empty": "沒有匹配的設定"
     },
     "categories": {
-      "application": "應用與介面",
-      "ai": "AI 與模型",
-      "workspace": "會話與工作區",
+      "application": "應用程式與介面",
+      "ai": "模型與智慧體",
+      "development": "程式設計與開發",
       "tools": "工具與整合",
       "data": "資料與維護"
     },
     "pages": {
       "general": {
-        "label": "通用",
-        "description": "調整啟動、更新、休眠、視窗與通知行為"
+        "label": "一般",
+        "description": "調整介面語言、啟動、更新、休眠、視窗與通知行為"
       },
       "appearance": {
         "label": "外觀",
-        "description": "調整介面語言、主題與字體大小"
+        "description": "調整主題、外觀套件與字型"
       },
       "pet": {
-        "label": "寵物",
-        "description": "選擇寵物造型，控制是否顯示"
-      },
-      "voice": {
-        "label": "語音",
-        "description": "設定本機語音輸入與雲端即時通話"
-      },
-      "shortcuts": {
-        "label": "快捷鍵",
-        "description": "檢視及自訂各操作的鍵盤快捷鍵"
+        "label": "寵物與助手",
+        "description": "選擇寵物形象，設定助手即時語音通話"
       },
       "terminal": {
         "label": "終端",
@@ -44,21 +36,9 @@
         "label": "模型",
         "description": "連線模型服務，並選擇各類任務使用的模型"
       },
-      "memory": {
-        "label": "記憶",
-        "description": "控制智能體如何從會話中產生及使用記憶"
-      },
-      "sessionWorkspace": {
-        "label": "會話與工作區",
-        "description": "設定新會話的執行框架、標題產生與工作區搜尋"
-      },
-      "worktrees": {
-        "label": "Worktrees",
-        "description": "設定會話隔離的預設行為，管理工作區 Worktree"
-      },
       "execution": {
-        "label": "執行與權限",
-        "description": "設定工具確認規則、執行時限與任務並行方式"
+        "label": "執行與協作",
+        "description": "設定工具執行時限、智慧體並行方式與審核容量"
       },
       "browserDesktopControl": {
         "label": "瀏覽器與桌面控制",
@@ -77,8 +57,8 @@
         "description": "連線 MCP 服務，為智能體提供外部工具與資料來源"
       },
       "acp": {
-        "label": "ACP 智能體",
-        "description": "透過 ACP 接入外部智能體，在 OpenBitFun 中執行任務"
+        "label": "外部智慧體",
+        "description": "透過 ACP 接入本機或 SSH 主機上的外部智慧體"
       },
       "usage": {
         "label": "調用統計",
@@ -91,16 +71,41 @@
       "diagnostics": {
         "label": "日誌與診斷",
         "description": "調整日誌記錄，匯出疑難排解資訊"
+      },
+      "input": {
+        "label": "輸入與互動",
+        "description": "設定語音轉文字與鍵盤快速鍵"
+      },
+      "sessionMemory": {
+        "label": "工作階段與記憶",
+        "description": "設定新工作階段的執行框架、標題產生與記憶策略"
+      },
+      "permissions": {
+        "label": "權限規則",
+        "description": "設定新工作階段的核准模式與全域工具權限規則"
+      },
+      "workspaceGit": {
+        "label": "工作區與 Git",
+        "description": "設定檔案搜尋、Git 提交署名與 Worktree，管理隔離工作目錄"
       }
     },
     "views": {
-      "common": "常用",
-      "advanced": "進階",
       "local": "本機",
       "ssh": "SSH",
-      "json": "進階 JSON",
+      "json": "進階 JSON"
+    },
+    "sections": {
+      "voice": "語音",
+      "shortcuts": "快捷鍵",
+      "session": "工作階段預設行為",
+      "memory": "記憶",
+      "workspace-search": "工作區搜尋",
+      "worktrees": "Worktrees",
+      "git": "Git 提交",
       "quick-actions": "快捷動作",
-      "hooks": "Hooks"
+      "hooks": "事件 Hooks",
+      "pet": "寵物",
+      "voice-call": "即時語音通話"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/zh-TW/settings/application.json b/src/web-ui/src/locales/zh-TW/settings/application.json
index 829f9ab68e..fede6172b1 100644
--- a/src/web-ui/src/locales/zh-TW/settings/application.json
+++ b/src/web-ui/src/locales/zh-TW/settings/application.json
@@ -186,13 +186,13 @@
     "sections": {
       "terminal": "終端",
       "defaultTerminal": "默認終端",
-      "terminalHint": "新建終端機使用所選 Shell，已開啟的終端機繼續使用原來的 Shell"
+      "terminalHint": "新建終端機使用所選 Shell，已開啟的終端機繼續使用原來的 Shell",
+      "terminalHintWithCmdFallback": "新建終端機使用所選 Shell，已開啟的終端機繼續使用原來的 Shell；智能體執行命令時實際使用 PowerShell"
     },
     "controls": {
       "refreshTooltip": "重新整理可用終端列表",
       "autoDetect": "自動檢測 (推薦)",
       "description": "用於新建終端機，以及本機工作區中智能體執行的命令",
-      "cmdFallbackMessage": "智能體執行命令時實際使用 PowerShell。",
       "placeholder": "選擇默認終端",
       "noShells": "未檢測到可用的終端"
     },
diff --git a/src/web-ui/src/locales/zh-TW/settings/hooks.json b/src/web-ui/src/locales/zh-TW/settings/hooks.json
index 519494b58d..476e2dace8 100644
--- a/src/web-ui/src/locales/zh-TW/settings/hooks.json
+++ b/src/web-ui/src/locales/zh-TW/settings/hooks.json
@@ -3,7 +3,7 @@
   "subtitle": "在指定的智能體事件發生時自動執行命令",
   "loading": "正在載入 Hook 設定...",
   "activation": {
-    "title": "啟用",
+    "title": "智慧體 Hooks",
     "description": "命令以執行 OpenBitFun 的使用者權限執行，僅啟用可信來源的 Hooks"
   },
   "fields": {
diff --git a/src/web-ui/src/locales/zh-TW/settings/memory.json b/src/web-ui/src/locales/zh-TW/settings/memory.json
index 4c2996b7d0..ad0c08bba7 100644
--- a/src/web-ui/src/locales/zh-TW/settings/memory.json
+++ b/src/web-ui/src/locales/zh-TW/settings/memory.json
@@ -1,18 +1,17 @@
 {
   "title": "記憶",
   "subtitle": "控制智能體如何從會話中產生及使用記憶",
-  "scopeNotice": "設定、候選會話與記憶檔案均屬於目前執行主機；其他裝置的記憶獨立儲存",
   "sections": {
     "basic": {
-      "title": "基礎",
+      "title": "記憶",
       "description": "關閉記憶會保留已有資料；如需清空，請在「記憶操作」中單獨執行"
     },
     "models": {
-      "title": "模型",
+      "title": "記憶模型",
       "description": "未單獨指定時，抽取跟隨主模型，整理跟隨抽取模型"
     },
     "advanced": {
-      "title": "進階設定",
+      "title": "記憶處理",
       "description": "限制記憶處理的會話範圍與工作量；通常無需修改"
     },
     "extraction": {
diff --git a/src/web-ui/src/locales/zh-TW/settings/runtime.json b/src/web-ui/src/locales/zh-TW/settings/runtime.json
index ff115a7520..44c6f51fc1 100644
--- a/src/web-ui/src/locales/zh-TW/settings/runtime.json
+++ b/src/web-ui/src/locales/zh-TW/settings/runtime.json
@@ -19,6 +19,8 @@
       "petLabel": "寵物形象",
       "petDescription": "可匯入 Petdex ZIP 造型套件，或選擇預置造型",
       "petPlaceholder": "選擇寵物形象",
+      "current": "目前使用",
+      "previewUnavailable": "預覽無法使用",
       "groupPreset": "預置",
       "groupImported": "已匯入",
       "import": "匯入",
diff --git a/src/web-ui/src/locales/zh-TW/settings/voice-input.json b/src/web-ui/src/locales/zh-TW/settings/voice-input.json
index 20d879c33d..fb2b57edce 100644
--- a/src/web-ui/src/locales/zh-TW/settings/voice-input.json
+++ b/src/web-ui/src/locales/zh-TW/settings/voice-input.json
@@ -1,6 +1,6 @@
 {
   "title": "語音",
-  "subtitle": "設定本機語音輸入與雲端即時通話",
+  "subtitle": "設定目前裝置的語音輸入",
   "loading": "正在載入語音輸入設定...",
   "sections": {
     "basic": "語音輸入",
@@ -75,7 +75,8 @@
       "saved": "即時語音設定已儲存",
       "saveFailed": "儲存即時語音設定失敗",
       "required": "啟用即時語音前，請填寫 API Key 和語音角色。",
-      "unsaved": "即時語音設定有尚未儲存的修改。"
+      "unsaved": "即時語音設定有尚未儲存的修改。",
+      "unsupported": "即時語音通話僅在 OpenBitFun 桌面端中可用。"
     },
     "call": {
       "title": "即時通話",
diff --git a/src/web-ui/src/shared/ui/DialogFooterComposition.contract.test.ts b/src/web-ui/src/shared/ui/DialogFooterComposition.contract.test.ts
index 987a81a492..679990e41c 100644
--- a/src/web-ui/src/shared/ui/DialogFooterComposition.contract.test.ts
+++ b/src/web-ui/src/shared/ui/DialogFooterComposition.contract.test.ts
@@ -38,9 +38,9 @@ const footerSurfaces: FooterSurfaceContract[] = [
     selector: '&__footer',
   },
   {
-    source: '../../infrastructure/config/components/QuickActionsConfig.tsx',
+    source: '../../app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx',
     marker: 'className="quick-actions-config__modal-footer"',
-    stylesheet: '../../infrastructure/config/components/QuickActionsConfig.scss',
+    stylesheet: '../../app/scenes/settings/pages/tools/QuickActionsSettingsSection.scss',
     selector: '&__modal-footer',
   },
   {
@@ -62,11 +62,11 @@ const footerSurfaces: FooterSurfaceContract[] = [
     selector: '&__actions',
   },
   {
-    source: '../../infrastructure/config/components/RuntimeSettingsPages.tsx',
+    source: '../../app/scenes/settings/pages/tools/DeviceControlSettingsPage.tsx',
     marker: 'className="openbitfun-debug-config__modal-footer"',
   },
   {
-    source: '../../infrastructure/config/components/HooksConfig.tsx',
+    source: '../../app/scenes/settings/pages/tools/HooksSettingsSection.tsx',
     marker: '<DialogFooter separator>',
   },
   {

From f7e63fd874811621530ac8fff8e1d0c4b6b2712d Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sun, 4 Oct 2026 10:52:16 +0800
Subject: [PATCH 2/4] fix(flow-chat): preserve navigation and nested menu
 interactions

---
 .../content-canvas/ContentCanvas.test.tsx     | 137 ++++++++++++++++++
 .../panels/content-canvas/ContentCanvas.tsx   |   6 +-
 .../components/ChatInputBoostSubmenu.test.tsx |  85 ++++++++++-
 .../components/ChatInputBoostSubmenu.tsx      |  20 ++-
 .../components/HarnessProfileSelector.tsx     |  13 +-
 5 files changed, 246 insertions(+), 15 deletions(-)
 create mode 100644 src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.test.tsx

diff --git a/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.test.tsx b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.test.tsx
new file mode 100644
index 0000000000..7abdfc080f
--- /dev/null
+++ b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.test.tsx
@@ -0,0 +1,137 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { appManager } from '@/app/services/AppManager';
+import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
+import { useModernFlowChatStore } from '@/flow_chat/store/modernFlowChatStore';
+import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
+import { buildBtwSessionPanelContent } from '@/flow_chat/services/btwSessionPane';
+import type { Session } from '@/flow_chat/types/flow-chat';
+import { ContentCanvas } from './ContentCanvas';
+import { clearAgentCanvasForPeerSwitch, switchAgentCanvasScope, useAgentCanvasStore } from './stores';
+
+const workspace = vi.hoisted(() => ({
+  id: 'workspace', rootPath: '/workspace', workspaceKind: 'normal' as const,
+}));
+
+vi.mock('@/infrastructure/services/business/workspaceManager', () => ({
+  workspaceManager: { getState: () => ({
+    currentWorkspace: workspace,
+    activeWorkspaceId: workspace.id,
+    openedWorkspaces: new Map([[workspace.id, workspace]]),
+  }) },
+}));
+vi.mock('@/infrastructure/contexts/WorkspaceContext', () => ({
+  useCurrentWorkspace: () => ({ workspace }),
+}));
+vi.mock('@/flow_chat/services/FlowChatManager', () => ({
+  flowChatManager: { switchChatSession: vi.fn() },
+}));
+
+// Exercise the real canvas effect, stores and session activation without mounting
+// editors or shortcut handlers. These are state regressions, not visual checks.
+vi.mock('./editor-area', () => ({ EditorArea: () => null }));
+vi.mock('./anchor-zone', () => ({ AnchorZone: () => null }));
+vi.mock('./mission-control', () => ({ MissionControl: () => null }));
+vi.mock('./empty-state', () => ({ EmptyState: () => null }));
+vi.mock('./hooks', () => ({
+  useTabLifecycle: () => ({}),
+  useKeyboardShortcuts: () => undefined,
+}));
+
+function session(sessionId: string): Session {
+  return {
+    sessionId, title: sessionId, status: 'idle', config: {}, dialogTurns: [],
+    createdAt: 1, lastActiveAt: 1, error: null,
+    workspaceId: workspace.id, workspacePath: workspace.rootPath, sessionKind: 'normal',
+  };
+}
+
+function addBtwTab(parentSessionId: string, workspaceId = workspace.id): string {
+  const canvas = useAgentCanvasStore.getState();
+  canvas.addTab(buildBtwSessionPanelContent(`child-${parentSessionId}`, parentSessionId, {
+    workspaceId, workspacePath: workspace.rootPath,
+  }), 'active');
+  return useAgentCanvasStore.getState().primaryGroup.activeTabId!;
+}
+
+describe('ContentCanvas session selection', () => {
+  let root: Root;
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    clearAgentCanvasForPeerSwitch();
+    switchAgentCanvasScope('session-a');
+    flowChatStore.setState(state => ({
+      ...state,
+      sessions: new Map(['parent-a', 'parent-b'].map(id => [id, session(id)])),
+      activeSessionId: 'parent-a',
+    }));
+    useModernFlowChatStore.getState().clear();
+    vi.mocked(flowChatManager.switchChatSession).mockReset();
+    vi.mocked(flowChatManager.switchChatSession).mockImplementation(async sessionId => {
+      flowChatStore.setState(state => ({ ...state, activeSessionId: sessionId }));
+    });
+    appManager.updateLayout({ leftPanelActiveTab: 'files', leftPanelCollapsed: true });
+    container = document.createElement('div');
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    clearAgentCanvasForPeerSwitch();
+    flowChatStore.setState(state => ({ ...state, sessions: new Map(), activeSessionId: null }));
+    useModernFlowChatStore.getState().clear();
+    container.remove();
+  });
+
+  it.each([
+    { parentSessionId: 'parent-a', collapsed: true },
+    { parentSessionId: 'parent-b', collapsed: true },
+    { parentSessionId: 'parent-a', collapsed: false },
+  ])('preserves navigation when selecting $parentSessionId with collapsed=$collapsed', async ({ parentSessionId, collapsed }) => {
+    const btwTabId = addBtwTab(parentSessionId);
+    useAgentCanvasStore.getState().addTab({
+      type: 'code-editor', title: 'file.ts', data: { filePath: '/workspace/file.ts' },
+    }, 'active');
+    const fileTabId = useAgentCanvasStore.getState().primaryGroup.activeTabId!;
+    appManager.updateLayout({ leftPanelCollapsed: collapsed });
+    const initialLayout = appManager.getState().layout;
+    await act(async () => root.render(<ContentCanvas workspacePath={workspace.rootPath} />));
+
+    await act(async () => useAgentCanvasStore.getState().switchToTab(btwTabId, 'primary'));
+
+    expect(flowChatStore.getState().activeSessionId).toBe(parentSessionId);
+    expect(useModernFlowChatStore.getState().activeSession?.sessionId).toBe(parentSessionId);
+    expect(appManager.getState().layout).toEqual(initialLayout);
+
+    // Returning through a regular file tab must not reset navigation either.
+    await act(async () => useAgentCanvasStore.getState().switchToTab(fileTabId, 'primary'));
+    await act(async () => useAgentCanvasStore.getState().switchToTab(btwTabId, 'primary'));
+    expect(appManager.getState().layout).toEqual(initialLayout);
+  });
+
+  it('does not activate a restored tab when the canvas scope changes', async () => {
+    addBtwTab('parent-b');
+    switchAgentCanvasScope('session-b');
+    await act(async () => root.render(<ContentCanvas workspacePath={workspace.rootPath} />));
+
+    await act(async () => switchAgentCanvasScope('session-a'));
+
+    expect(flowChatManager.switchChatSession).not.toHaveBeenCalled();
+    expect(flowChatStore.getState().activeSessionId).toBe('parent-a');
+    expect(appManager.getState().layout.leftPanelCollapsed).toBe(true);
+  });
+
+  it('does not activate a tab belonging to another workspace', async () => {
+    await act(async () => root.render(<ContentCanvas workspacePath={workspace.rootPath} />));
+
+    await act(async () => { addBtwTab('parent-b', 'other-workspace'); });
+
+    expect(flowChatManager.switchChatSession).not.toHaveBeenCalled();
+    expect(flowChatStore.getState().activeSessionId).toBe('parent-a');
+    expect(appManager.getState().layout.leftPanelCollapsed).toBe(true);
+  });
+});
diff --git a/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
index a8199b584e..0586310947 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
@@ -14,7 +14,7 @@ import type { AnchorPosition } from './types';
 import type { CanvasStoreMode } from './stores/canvasStore';
 import { selectActiveBtwSessionTab, type BtwSessionPanelData } from '@/flow_chat/services/btwSessionPane';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import { openMainSession } from '@/flow_chat/services/sessionActivation';
+import { activateMainSession } from '@/flow_chat/services/sessionActivation';
 import { isSamePath } from '@/shared/utils/pathUtils';
 import './ContentCanvas.scss';
 import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
@@ -136,7 +136,9 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
     }
 
     lastSyncedBtwTabIdRef.current = activeBtwSessionTab.id;
-    void openMainSession(activeBtwSessionData.parentSessionId);
+    // Selecting auxiliary content synchronizes its parent without revealing or
+    // changing the user's navigation panel.
+    void activateMainSession(activeBtwSessionData.parentSessionId);
   }, [
     activeBtwSessionData?.parentSessionId,
     activeBtwSessionData?.projectWorkspaceId,
diff --git a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx
index 21024a0448..08f83fff7a 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx
@@ -2,12 +2,12 @@
  * @vitest-environment jsdom
  */
 
-import { act, useState, type ComponentProps } from 'react';
+import { act, useEffect, useRef, useState, type ComponentProps } from 'react';
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { Menu, MenuItem } from '@openbitfun/ui';
+import { Menu, MenuItem, Portal, subscribeOverlayInteraction } from '@openbitfun/ui';
 
 import { ChatInputBoostSubmenu } from './ChatInputBoostSubmenu';
 import { HarnessProfileSelector } from './HarnessProfileSelector';
@@ -25,7 +25,7 @@ function ControlledSubmenu(props: Omit<ComponentProps<typeof ChatInputBoostSubme
   return <ChatInputBoostSubmenu {...props} open={open} onOpenChange={setOpen} />;
 }
 
-function SiblingMenus() {
+function SiblingMenus({ onSelectionComplete }: { onSelectionComplete?: () => void }) {
   const [active, setActive] = useState<string | null>(null);
   const disclosure = (id: string) => ({
     open: active === id,
@@ -34,22 +34,48 @@ function SiblingMenus() {
   return (
     <Menu>
       <ChatInputBoostSubmenu {...disclosure('modes')} label="Additional modes" icon={null} testId="modes">
-        <MenuItem>Plan</MenuItem>
+        <MenuItem onClick={onSelectionComplete}>Plan</MenuItem>
       </ChatInputBoostSubmenu>
       <ChatInputBoostSubmenu {...disclosure('skills')} label="Skills" icon={null} testId="skills">
-        <MenuItem>Skill A</MenuItem>
+        <MenuItem onClick={onSelectionComplete}>Skill A</MenuItem>
       </ChatInputBoostSubmenu>
       <HarnessProfileSelector
         {...disclosure('harness')}
         presentation="menu-item"
-        selectedProfile="balanced"
+        selectedProfile="Minimal"
         otherAgents={[{ id: 'research', name: 'Research' }]}
         onSelectProfile={() => {}}
+        onSelectionComplete={onSelectionComplete}
       />
     </Menu>
   );
 }
 
+function PortalledAddMenu() {
+  const [open, setOpen] = useState(true);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    return subscribeOverlayInteraction(menuRef, 'mousedown', event => {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
+    });
+  }, [open]);
+  return open ? (
+    <Portal>
+      <div ref={menuRef} data-testid="add-menu">
+        <SiblingMenus onSelectionComplete={() => setOpen(false)} />
+      </div>
+    </Portal>
+  ) : null;
+}
+
+function clickWithPointer(target: HTMLElement) {
+  // Flush capture-phase dismissal before click, as a real pointer gesture does.
+  act(() => target.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+  act(() => target.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })));
+  act(() => { target.focus(); target.click(); });
+}
+
 describe('ChatInputBoostSubmenu', () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -187,6 +213,53 @@ describe('ChatInputBoostSubmenu', () => {
     expect(container.querySelector('[aria-expanded="true"]')).toBeNull();
   });
 
+  it('keeps the add menu open while navigating to and back from the agent list', () => {
+    act(() => root.render(<PortalledAddMenu />));
+    clickWithPointer(document.querySelector<HTMLElement>('[data-testid="harness-profile-selector"]')!);
+    clickWithPointer(document.querySelector<HTMLElement>('[data-testid="harness-profile-other"]')!);
+
+    expect(document.querySelector('[data-testid="add-menu"]')).not.toBeNull();
+    expect(document.querySelector('.openbitfun-harness-selector__menu')?.getAttribute('data-openbitfun-page'))
+      .toBe('agents');
+
+    clickWithPointer(document.querySelector<HTMLElement>('[data-testid="harness-agent-back"]')!);
+    expect(document.querySelector('.openbitfun-harness-selector__menu')?.getAttribute('data-openbitfun-page'))
+      .toBe('profiles');
+    clickWithPointer(document.querySelector<HTMLElement>('[data-testid="harness-profile-other"]')!);
+    clickWithPointer(document.querySelector<HTMLElement>('[data-testid="harness-agent-research"]')!);
+    expect(document.querySelector('[data-testid="add-menu"]')).toBeNull();
+    expect(document.querySelector('.openbitfun-harness-selector__menu')).toBeNull();
+  });
+
+  it.each(['modes', 'skills'])('keeps the %s flyout mounted until its item receives the click', id => {
+    act(() => root.render(<PortalledAddMenu />));
+    clickWithPointer(document.querySelector<HTMLElement>(`[data-testid="${id}"] [aria-haspopup="menu"]`)!);
+    const item = document.querySelector<HTMLElement>('.openbitfun-chat-input__boost-submenu-panel [role="menuitem"]')!;
+
+    act(() => item.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+    act(() => item.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })));
+    expect(item.isConnected).toBe(true);
+    expect(document.querySelector('[data-testid="add-menu"]')).not.toBeNull();
+    act(() => item.click());
+    expect(document.querySelector('[data-testid="add-menu"]')).toBeNull();
+  });
+
+  it.each(['harness', 'modes', 'skills'])('dismisses the %s flyout without cascading through the parent in one gesture', id => {
+    act(() => root.render(<PortalledAddMenu />));
+    const selector = id === 'harness'
+      ? '[data-testid="harness-profile-selector"]'
+      : `[data-testid="${id}"] [aria-haspopup="menu"]`;
+    const trigger = document.querySelector<HTMLElement>(selector)!;
+    clickWithPointer(trigger);
+
+    clickWithPointer(document.body);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(document.querySelector('[data-testid="add-menu"]')).not.toBeNull();
+
+    clickWithPointer(document.body);
+    expect(document.querySelector('[data-testid="add-menu"]')).toBeNull();
+  });
+
   it('wires all ChatInput flyouts to one owner and clears it when the add menu closes', () => {
     const source = readFileSync(path.join(__dirname, 'ChatInput.tsx'), 'utf8');
     for (const id of ['harness', 'additional-modes', 'skills']) {
diff --git a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx
index 93780f97a7..5890236647 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useId, useRef } from 'react';
+import React, { useCallback, useEffect, useId, useRef } from 'react';
 
-import { createOverlayPortal, Menu, MenuItem, Icon } from '@openbitfun/ui';
+import { createOverlayPortal, Menu, MenuItem, Icon, subscribeOverlayInteraction } from '@openbitfun/ui';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useSideAnchoredPopoverPosition } from '@/shared/utils/useSideAnchoredPopoverPosition';
 
@@ -32,6 +32,22 @@ export const ChatInputBoostSubmenu: React.FC<ChatInputBoostSubmenuProps> = ({
     layoutRevision: React.Children.count(children),
   });
 
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerInteraction = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (!target || triggerRef.current?.contains(target) || submenuRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    // Own the compatibility mouse event too, before the parent menu's capture listener.
+    const removePointerDown = subscribeOverlayInteraction(submenuRef, 'pointerdown', handlePointerInteraction);
+    const removeMouseDown = subscribeOverlayInteraction(submenuRef, 'mousedown', handlePointerInteraction);
+    return () => {
+      removePointerDown();
+      removeMouseDown();
+    };
+  }, [open, setOpen]);
+
   const openFlyout = useCallback((focusFirstItem = false) => {
     setOpen(true);
     if (focusFirstItem) {
diff --git a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
index b413f27e21..4b4e25557c 100644
--- a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
@@ -180,7 +180,7 @@ export const HarnessProfileSelector: React.FC<HarnessProfileSelectorProps> = ({
   useEffect(() => {
     if (!open) return;
 
-    const handlePointerDown = (event: PointerEvent) => {
+    const handlePointerInteraction = (event: MouseEvent) => {
       const target = event.target as Node | null;
       if (!target || triggerRef.current?.contains(target) || menuRef.current?.contains(target)) {
         return;
@@ -191,11 +191,14 @@ export const HarnessProfileSelector: React.FC<HarnessProfileSelectorProps> = ({
       if (event.key === 'Escape') close();
     };
 
-    const removeOverlayPointerdown0 = subscribeOverlayInteraction(menuRef, 'pointerdown', handlePointerDown);
-    const removeOverlayKeydown1 = subscribeOverlayInteraction(menuRef, 'keydown', handleKeyDown);
+    const removePointerDown = subscribeOverlayInteraction(menuRef, 'pointerdown', handlePointerInteraction);
+    // The add menu also listens for mousedown; a portalled child must own both events.
+    const removeMouseDown = subscribeOverlayInteraction(menuRef, 'mousedown', handlePointerInteraction);
+    const removeKeyDown = subscribeOverlayInteraction(menuRef, 'keydown', handleKeyDown);
     return () => {
-      removeOverlayPointerdown0?.();
-      removeOverlayKeydown1?.();
+      removePointerDown();
+      removeMouseDown();
+      removeKeyDown();
     };
   }, [close, open]);
 

From 74af7ec3ec623764476a2b0539286b03ce18aa6a Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sun, 4 Oct 2026 10:52:25 +0800
Subject: [PATCH 3/4] fix(gemini): use API-key authentication for official
 Google endpoints

---
 .../adapters/ai-adapters/src/client/format.rs |  18 +++
 .../src/providers/gemini/discovery.rs         |   2 +-
 .../src/providers/gemini/request.rs           | 143 +++++++++++++++++-
 3 files changed, 158 insertions(+), 5 deletions(-)

diff --git a/src/crates/adapters/ai-adapters/src/client/format.rs b/src/crates/adapters/ai-adapters/src/client/format.rs
index 84893ceb9c..736704fcdd 100644
--- a/src/crates/adapters/ai-adapters/src/client/format.rs
+++ b/src/crates/adapters/ai-adapters/src/client/format.rs
@@ -27,3 +27,21 @@ impl ApiFormat {
         }
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::ApiFormat;
+
+    #[test]
+    fn gemini_api_key_format_is_distinct_from_code_assist() {
+        for format in ["gemini", "google", " GEMINI "] {
+            assert_eq!(ApiFormat::parse(format).unwrap(), ApiFormat::Gemini);
+        }
+        for format in ["gemini-code-assist", "gemini_code_assist", "code-assist"] {
+            assert_eq!(
+                ApiFormat::parse(format).unwrap(),
+                ApiFormat::GeminiCodeAssist
+            );
+        }
+    }
+}
diff --git a/src/crates/adapters/ai-adapters/src/providers/gemini/discovery.rs b/src/crates/adapters/ai-adapters/src/providers/gemini/discovery.rs
index 56c1d6725e..c8814ca69b 100644
--- a/src/crates/adapters/ai-adapters/src/providers/gemini/discovery.rs
+++ b/src/crates/adapters/ai-adapters/src/providers/gemini/discovery.rs
@@ -40,7 +40,7 @@ pub(crate) async fn list_models(client: &AIClient) -> Result<Vec<RemoteModelInfo
     let url = resolve_models_url(client);
     debug!("Gemini models list URL: {}", url);
 
-    let response = apply_headers(client, client.client.get(&url))
+    let response = apply_headers(client, client.client.get(&url), &url)
         .send()
         .await?
         .error_for_status()?;
diff --git a/src/crates/adapters/ai-adapters/src/providers/gemini/request.rs b/src/crates/adapters/ai-adapters/src/providers/gemini/request.rs
index 3d22575663..0fed8a13ac 100644
--- a/src/crates/adapters/ai-adapters/src/providers/gemini/request.rs
+++ b/src/crates/adapters/ai-adapters/src/providers/gemini/request.rs
@@ -11,12 +11,21 @@ use anyhow::{anyhow, Result};
 use log::debug;
 use reqwest::RequestBuilder;
 
-pub(crate) fn apply_headers(client: &AIClient, builder: RequestBuilder) -> RequestBuilder {
+pub(crate) fn apply_headers(
+    client: &AIClient,
+    builder: RequestBuilder,
+    url: &str,
+) -> RequestBuilder {
     shared::apply_header_policy(client, builder, |mut builder| {
         builder = builder
             .header("Content-Type", "application/json")
-            .header("x-goog-api-key", &client.config.api_key)
-            .header("Authorization", format!("Bearer {}", client.config.api_key));
+            .header("x-goog-api-key", &client.config.api_key);
+
+        // Google interprets Authorization as an OAuth access token, not an AI
+        // Studio API key. Keep Bearer compatibility for third-party gateways.
+        if !shared::is_https_endpoint(url, "generativelanguage.googleapis.com", "") {
+            builder = builder.header("Authorization", format!("Bearer {}", client.config.api_key));
+        }
 
         if client.config.base_url.contains("openbitfun.com") {
             builder = builder.header("X-Verification-Code", "from_openbitfun");
@@ -541,10 +550,136 @@ pub(crate) async fn send_stream(
         max_tries,
         ttft_timeout,
         trace,
-        || apply_headers(client, client.client.post(&url)),
+        || apply_headers(client, client.client.post(&url), &url),
         move |response, tx, tx_raw, remaining_ttft_timeout| {
             handle_gemini_stream(response, tx, tx_raw, remaining_ttft_timeout, idle_timeout)
         },
     )
     .await
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::providers::gemini::{code_assist, discovery};
+
+    fn api_key_client(base_url: &str) -> AIClient {
+        AIClient::new(
+            serde_json::from_value(serde_json::json!({
+                "name": "Google Gemini",
+                "base_url": base_url,
+                "request_url": resolve_request_url(base_url, "gemini-2.5-flash"),
+                "api_key": "synthetic-api-key",
+                "model": "gemini-2.5-flash",
+                "format": "gemini",
+                "context_window": 4096,
+                "inline_think_in_text": false,
+                "skip_ssl_verify": false
+            }))
+            .unwrap(),
+        )
+    }
+
+    #[test]
+    fn google_api_key_authentication_covers_generation_and_model_discovery() {
+        for base_url in [
+            "https://generativelanguage.googleapis.com",
+            "https://generativelanguage.googleapis.com/v1beta",
+        ] {
+            let client = api_key_client(base_url);
+            let stream_url = resolve_request_url(&client.config.request_url, &client.config.model);
+            let models_url = discovery::resolve_models_url(&client);
+            assert_eq!(
+                stream_url,
+                "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:streamGenerateContent?alt=sse"
+            );
+            assert_eq!(
+                models_url,
+                "https://generativelanguage.googleapis.com/v1beta/models"
+            );
+
+            for (method, url) in [
+                (reqwest::Method::POST, stream_url),
+                (reqwest::Method::GET, models_url),
+            ] {
+                let request = apply_headers(&client, client.client.request(method, &url), &url)
+                    .build()
+                    .unwrap();
+                assert_eq!(request.headers()["x-goog-api-key"], "synthetic-api-key");
+                assert_eq!(request.headers()["content-type"], "application/json");
+                assert!(!request.headers().contains_key("authorization"));
+            }
+        }
+    }
+
+    #[test]
+    fn gemini_authentication_follows_request_origin_and_preserves_gateway_bearer() {
+        let client = api_key_client("https://generativelanguage.googleapis.com");
+        for url in [
+            "https://gateway.example.com/v1beta/models",
+            "https://generativelanguage.googleapis.com.gateway.example.com/v1beta/models",
+            "https://gateway.example.com/generativelanguage.googleapis.com/v1beta/models",
+        ] {
+            let request = apply_headers(&client, client.client.get(url), url)
+                .build()
+                .unwrap();
+            assert_eq!(request.headers()["x-goog-api-key"], "synthetic-api-key");
+            assert_eq!(
+                request.headers()["authorization"],
+                "Bearer synthetic-api-key"
+            );
+        }
+
+        let client = api_key_client("https://gateway.example.com");
+        let url = "https://generativelanguage.googleapis.com/v1beta/models";
+        let request = apply_headers(&client, client.client.get(url), url)
+            .build()
+            .unwrap();
+        assert!(!request.headers().contains_key("authorization"));
+    }
+
+    #[test]
+    fn gemini_explicit_custom_authentication_preserves_merge_and_replace_modes() {
+        for mode in ["merge", "replace"] {
+            let mut client = api_key_client("https://generativelanguage.googleapis.com");
+            client.config.custom_headers_mode = Some(mode.to_string());
+            client.config.custom_headers = Some(std::collections::HashMap::from([(
+                "Authorization".to_string(),
+                "Bearer synthetic-custom-token".to_string(),
+            )]));
+            let url = discovery::resolve_models_url(&client);
+            let request = apply_headers(&client, client.client.get(&url), &url)
+                .build()
+                .unwrap();
+            assert_eq!(
+                request.headers()["authorization"],
+                "Bearer synthetic-custom-token"
+            );
+            assert_eq!(request.headers().get_all("authorization").iter().count(), 1);
+            assert_eq!(
+                request.headers().contains_key("x-goog-api-key"),
+                mode == "merge"
+            );
+        }
+    }
+
+    #[test]
+    fn code_assist_keeps_oauth_bearer_without_api_key_header() {
+        let mut client = api_key_client("https://cloudcode-pa.googleapis.com");
+        client.config.format = "gemini-code-assist".to_string();
+        client.config.api_key = "synthetic-oauth-token".to_string();
+        let request = code_assist::apply_headers(
+            &client,
+            client
+                .client
+                .post("https://cloudcode-pa.googleapis.com/v1internal:loadCodeAssist"),
+        )
+        .build()
+        .unwrap();
+        assert_eq!(
+            request.headers()["authorization"],
+            "Bearer synthetic-oauth-token"
+        );
+        assert!(!request.headers().contains_key("x-goog-api-key"));
+    }
+}

From efa7a905717d2114422cab57117a98e0ce3bc24b Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sun, 4 Oct 2026 11:08:16 +0800
Subject: [PATCH 4/4] test(settings): align consumers with canonical
 destinations

---
 src/web-ui/src/app/scenes/settings/AGENTS.md              | 2 +-
 .../flow_chat/components/btw/DeepReviewActionBar.test.tsx | 2 +-
 .../config/components/AcpAgentsConfig.test.tsx            | 8 ++++----
 .../components/AppearancePackageConfigSection.test.tsx    | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/web-ui/src/app/scenes/settings/AGENTS.md b/src/web-ui/src/app/scenes/settings/AGENTS.md
index 7c3ccb6533..da81df569f 100644
--- a/src/web-ui/src/app/scenes/settings/AGENTS.md
+++ b/src/web-ui/src/app/scenes/settings/AGENTS.md
@@ -30,7 +30,7 @@ Follow `src/web-ui/AGENTS.md` and the settings control sizing rules in
 ## Focused verification
 
 ```bash
-pnpm --dir src/web-ui run test:run src/app/scenes/settings src/app/global-search/interactiveCapabilityActivator.test.ts src/infrastructure/config/settingsDraftRegistry.test.ts
+pnpm --dir src/web-ui run test:run src/app/scenes/settings src/app/global-search/interactiveCapabilityActivator.test.ts src/infrastructure/config/settingsDraftRegistry.test.ts src/flow_chat/components/btw/DeepReviewActionBar.test.tsx src/infrastructure/config/components/AcpAgentsConfig.test.tsx src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx
 pnpm --dir src/web-ui run test:run src/infrastructure/config/components/common/SettingsControlSizing.test.ts
 ```
 
diff --git a/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.test.tsx b/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.test.tsx
index 310f3148ed..d5dba7a07a 100644
--- a/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.test.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.test.tsx
@@ -665,7 +665,7 @@ describeWithJsdom('DeepReviewActionBar', () => {
     });
 
     const { useSettingsStore } = await import('@/app/scenes/settings/settingsStore');
-    expect(useSettingsStore.getState().activePageId).toBe('tools.execution');
+    expect(useSettingsStore.getState().activePageId).toBe('ai.execution');
     expect(useSettingsStore.getState().activeViewId).toBeNull();
   });
 
diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.test.tsx b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.test.tsx
index 216f615213..cc64038fcc 100644
--- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.test.tsx
@@ -599,8 +599,8 @@ describe('AcpAgentsConfig', () => {
 
     const commit = vi.fn();
     expect(requestSettingsNavigation(
-      { pageId: 'tools.acp', viewId: 'json' },
-      { kind: 'settings', pageId: 'tools.acp', viewId: 'local' },
+      { pageId: 'tools.external-agents', viewId: 'json' },
+      { kind: 'settings', pageId: 'tools.external-agents', viewId: 'local' },
       commit,
     )).toBe(false);
     expect(getSettingsDraftSnapshot().pendingNavigation?.resourceLabels).toEqual([
@@ -639,8 +639,8 @@ describe('AcpAgentsConfig', () => {
 
     const commit = vi.fn();
     expect(requestSettingsNavigation(
-      { pageId: 'tools.acp', viewId: 'json' },
-      { kind: 'settings', pageId: 'tools.acp', viewId: 'local' },
+      { pageId: 'tools.external-agents', viewId: 'json' },
+      { kind: 'settings', pageId: 'tools.external-agents', viewId: 'local' },
       commit,
     )).toBe(true);
     expect(commit).toHaveBeenCalledOnce();
diff --git a/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx b/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx
index 2db3b65cf1..50daa21242 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx
@@ -135,7 +135,7 @@ describe('AppearancePackageConfigSection', () => {
 
   it('keeps cards borderless and the default package copy beside its theme selector', () => {
     const styles = readFileSync(
-      resolve(process.cwd(), 'src', 'infrastructure', 'config', 'components', 'AppearanceSettingsPage.scss'),
+      resolve(process.cwd(), 'src', 'app', 'scenes', 'settings', 'pages', 'application', 'AppearanceSettingsPage.scss'),
       'utf8',
     );
     const galleryRule = styles.match(/&__gallery \{([\s\S]*?)\n  \}/)?.[1] ?? '';