From 3bd04589f9d65698541cd0571fcb6e481723c7a1 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sat, 10 Oct 2026 10:21:00 +0800
Subject: [PATCH 1/2] fix(settings): stabilize loading and isolate warm
 snapshots

---
 src/web-ui/src/app/scenes/settings/AGENTS.md  |   8 ++
 .../app/scenes/settings/SettingsNav.test.tsx  |  33 ++++++
 .../src/app/scenes/settings/SettingsNav.tsx   |  39 +++++--
 .../app/scenes/settings/SettingsScene.scss    |  51 ---------
 .../scenes/settings/SettingsScene.test.tsx    |  66 ++++++++++-
 .../src/app/scenes/settings/SettingsScene.tsx | 108 ++++++++----------
 .../pages/ai/DefaultHarnessSection.tsx        |  11 +-
 .../pages/ai/ExecutionSettingsPage.tsx        |  24 ++--
 .../pages/ai/MemorySettingsSection.tsx        |  14 ++-
 .../ai/ModelSettingsPage.loading.test.tsx     |  16 +++
 .../settings/pages/ai/ModelSettingsPage.tsx   |  48 ++++----
 .../pages/ai/PermissionsSettingsPage.tsx      |  14 ++-
 .../settings/pages/ai/SessionTitleSection.tsx |  21 ++--
 .../pages/application/GeneralSettingsPage.tsx |  30 ++---
 .../pages/application/PetSettingsSection.tsx  |  22 ++--
 .../TextSelectionSettingsSection.test.tsx     |   2 +-
 .../application/VoiceSettingsSection.tsx      |  21 +++-
 .../data/ArchivedSessionsSettingsPage.tsx     |   3 +-
 .../pages/data/DiagnosticsSettingsPage.tsx    |  37 ++++--
 .../data/UsageStatisticsSettingsPage.test.tsx |  25 ++++
 .../data/UsageStatisticsSettingsPage.tsx      |  34 ++++--
 .../development/EditorSettingsPage.test.tsx   |   2 +-
 .../pages/development/EditorSettingsPage.tsx  |  14 ++-
 .../GitCommitSettingsSection.test.tsx         |   2 +-
 .../development/GitCommitSettingsSection.tsx  |   9 +-
 .../development/TerminalSettingsPage.tsx      |  29 +++--
 .../development/WorkspaceSearchSection.tsx    |   7 +-
 .../WorktreeSettingsSection.test.tsx          |   9 ++
 .../development/WorktreeSettingsSection.tsx   |  19 +--
 .../RuntimeSettings.presentation.test.ts      |   2 +-
 .../pages/shared/RuntimeSettings.test.tsx     |   4 +-
 .../pages/tools/HooksSettingsSection.test.tsx |   2 +-
 .../pages/tools/HooksSettingsSection.tsx      |  15 ++-
 .../tools/QuickActionsSettingsSection.tsx     |   9 +-
 .../pages/tools/WebSearchSettingsPage.tsx     |   7 +-
 .../scenes/settings/settingsDataPreload.ts    |  36 ++++++
 .../scenes/settings/settingsRegistry.test.ts  |  32 +++++-
 .../app/scenes/settings/settingsRegistry.ts   |  34 +++++-
 .../useSettingsScrollRestoration.test.tsx     |  72 ++++++++++++
 .../settings/useSettingsScrollRestoration.ts  |  61 ++++++++++
 .../selection/FlowChatSelectionBar.test.tsx   |   2 +
 .../infrastructure/api/service-api/MCPAPI.ts  |  14 ++-
 .../src/infrastructure/config/AGENTS.md       |   9 ++
 .../config/components/McpToolsConfig.test.tsx |  22 ++++
 .../config/components/McpToolsConfig.tsx      |  50 +++++---
 .../components/UsageActivityHeatmap.tsx       |  32 ++++--
 .../common/ConfigLoadingState.test.tsx        |  37 ++++++
 .../components/common/ConfigLoadingState.tsx  |  30 +++--
 .../components/common/ConfigPageHeader.scss   |  27 +----
 .../components/common/ConfigPageLayout.scss   |  21 ++--
 .../components/common/ConfigPageState.scss    |  62 ++++++++--
 .../common/config-page-layout.tokens.scss     |  11 ++
 .../hooks/useAIExperienceSettings.test.tsx    |  83 ++++++++++++++
 .../config/hooks/useAIExperienceSettings.ts   |  60 +++++-----
 .../config/hooks/useConfigSeed.test.tsx       |  47 ++++++++
 .../config/hooks/useConfigSeed.ts             |  17 +++
 .../useSelectionToolbarPreference.test.tsx    |   2 +
 .../hooks/useSelectionToolbarPreference.ts    |   5 +-
 .../AIExperienceConfigService.test.ts         |  26 +++++
 .../services/AIExperienceConfigService.ts     |  36 +++++-
 .../config/services/ConfigManager.test.ts     |  45 ++++++++
 .../config/services/ConfigManager.ts          |  55 +++++++++
 .../services/PermissionConfigService.test.ts  |   6 +
 .../services/PermissionConfigService.ts       |   3 +-
 .../config/services/SettingsReadCache.test.ts |  65 +++++++++++
 .../config/services/SettingsReadCache.ts      |  39 +++++++
 .../src/infrastructure/config/types/index.ts  |   3 +
 67 files changed, 1403 insertions(+), 398 deletions(-)
 create mode 100644 src/web-ui/src/app/scenes/settings/settingsDataPreload.ts
 create mode 100644 src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.test.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.ts
 create mode 100644 src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.test.tsx
 create mode 100644 src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.test.tsx
 create mode 100644 src/web-ui/src/infrastructure/config/hooks/useConfigSeed.test.tsx
 create mode 100644 src/web-ui/src/infrastructure/config/hooks/useConfigSeed.ts
 create mode 100644 src/web-ui/src/infrastructure/config/services/SettingsReadCache.test.ts
 create mode 100644 src/web-ui/src/infrastructure/config/services/SettingsReadCache.ts

diff --git a/src/web-ui/src/app/scenes/settings/AGENTS.md b/src/web-ui/src/app/scenes/settings/AGENTS.md
index da81df569f..6a29e939be 100644
--- a/src/web-ui/src/app/scenes/settings/AGENTS.md
+++ b/src/web-ui/src/app/scenes/settings/AGENTS.md
@@ -26,6 +26,14 @@ Follow `src/web-ui/AGENTS.md` and the settings control sizing rules in
   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.
+- Page preparation must retain the scene frame and use `SettingsPage` for its
+  fallback. First-load placeholders use `ConfigLoadingState` inside the content
+  frame; refreshes retain successful content. Seed editable forms only from a
+  complete `ConfigManager` snapshot, never from default values after a failed
+  read. Do not hydrate over edits or keep inactive page effects alive for caching.
+- Runtime snapshots and scroll positions belong to the current device activation.
+  Background responses must not repopulate a previous activation; section links
+  take precedence over restored scroll positions.
 
 ## Focused verification
 
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 a5434e6484..295efbbc5d 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
@@ -46,6 +46,7 @@ vi.mock('@/shared/utils/motionPreference', () => ({
 }));
 
 import SettingsNav from './SettingsNav';
+import { preloadSettingsPage } from './settingsRegistry';
 import { useSettingsStore } from './settingsStore';
 import {
   registerSettingsDraft,
@@ -58,6 +59,7 @@ describe('SettingsNav shared component composition', () => {
 
   beforeEach(() => {
     vi.useFakeTimers();
+    vi.mocked(preloadSettingsPage).mockReset().mockResolvedValue(undefined);
     resetSettingsDraftRegistryForTests();
     useSettingsStore.setState(useSettingsStore.getInitialState());
     container = document.createElement('div');
@@ -183,4 +185,35 @@ describe('SettingsNav shared component composition', () => {
     expect(useSettingsStore.getState().activePageId).toBe('application.pet');
     expect(useSettingsStore.getState().activeSectionId).toBeNull();
   });
+  it('marks a slow destination pending before showing its loading page', async () => {
+    vi.mocked(preloadSettingsPage).mockReturnValue(new Promise(() => {}));
+    const item = container.querySelector('[data-settings-page="application.appearance"]') as HTMLButtonElement;
+    await act(async () => item.click());
+    expect(item.getAttribute('aria-busy')).toBe('true');
+    expect(useSettingsStore.getState().activePageId).toBe('application.general');
+    await act(async () => vi.advanceTimersByTimeAsync(180));
+    expect(useSettingsStore.getState().activePageId).toBe('application.appearance');
+    expect(item.hasAttribute('aria-busy')).toBe(false);
+  });
+
+  it('ignores an earlier click when its preload completes after the latest selection', async () => {
+    let finishOld!: () => void;
+    vi.mocked(preloadSettingsPage).mockImplementation(pageId => pageId === 'application.appearance'
+      ? new Promise<void>(resolve => { finishOld = resolve; }) : Promise.resolve());
+    await act(async () => (container.querySelector('[data-settings-page="application.appearance"]') as HTMLButtonElement).click());
+    await act(async () => (container.querySelector('[data-settings-page="application.pet"]') as HTMLButtonElement).click());
+    await act(async () => finishOld());
+    await act(async () => vi.advanceTimersByTimeAsync(180));
+    expect(useSettingsStore.getState().activePageId).toBe('application.pet');
+  });
+
+  it('does not override a newer programmatic destination with a pending click', async () => {
+    let finish!: () => void;
+    vi.mocked(preloadSettingsPage).mockReturnValue(new Promise<void>(resolve => { finish = resolve; }));
+    await act(async () => (container.querySelector('[data-settings-page="application.appearance"]') as HTMLButtonElement).click());
+    await act(async () => useSettingsStore.getState().openPage('application.pet'));
+    await act(async () => finish());
+    expect(useSettingsStore.getState().activePageId).toBe('application.pet');
+  });
+
 });
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
index 8a03a68c85..20201a606f 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
@@ -1,4 +1,5 @@
 import { useSettingsDraftSnapshot } from '@/infrastructure/config/settingsDraftRegistry';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { getInteractionMotion } from '@/shared/utils/motionPreference';
 import {
@@ -11,10 +12,10 @@ import {
   NavigationPanelSection,
   OverflowText,
   SearchField,
+  Spinner,
 } from '@openbitfun/ui';
 import type { i18n as I18nApi } from 'i18next';
 import React, {
-  startTransition,
   useCallback,
   useEffect,
   useMemo,
@@ -138,6 +139,13 @@ const SettingsNav: React.FC = () => {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
   const activationRequestRef = useRef(0);
+  const [pendingPageId, setPendingPageId] = useState<SettingsPageId | null>(null);
+  const activationTimerRef = useRef<number | undefined>();
+
+  useEffect(() => () => {
+    activationRequestRef.current += 1;
+    window.clearTimeout(activationTimerRef.current);
+  }, []);
 
   useEffect(() => {
     const timer = window.setTimeout(() => setSearchQuery(draftQuery), SEARCH_DEBOUNCE_MS);
@@ -186,14 +194,27 @@ const SettingsNav: React.FC = () => {
 
   const activate = useCallback((destination: SettingsDestination, clear = false) => {
     const requestId = ++activationRequestRef.current;
+    const scope = getActiveSurfaceScope();
+    const navigationRequestId = useSettingsStore.getState().navigationRequestId;
     const motion = getInteractionMotion();
+    window.clearTimeout(activationTimerRef.current);
+    setPendingPageId(destination.pageId);
+    let committed = false;
     const commit = () => {
-      if (requestId !== activationRequestRef.current) return;
-      startTransition(() => {
-        openDestination(destination, motion);
-        if (clear) clearSearch();
-      });
+      if (committed || requestId !== activationRequestRef.current) return;
+      if (!scope.isCurrent() || useSettingsStore.getState().navigationRequestId !== navigationRequestId) {
+        window.clearTimeout(activationTimerRef.current);
+        setPendingPageId(null);
+        return;
+      }
+      committed = true;
+      window.clearTimeout(activationTimerRef.current);
+      setPendingPageId(null);
+      openDestination(destination, motion);
+      if (clear) clearSearch();
     };
+    // Keep the current page during fast preparation; slow loads get a titled skeleton.
+    activationTimerRef.current = window.setTimeout(commit, 180);
     void preloadSettingsPage(destination.pageId).then(commit, commit);
   }, [clearSearch, openDestination]);
 
@@ -301,6 +322,7 @@ const SettingsNav: React.FC = () => {
                       id={`settings-nav-result-${index}`}
                       role="option"
                       aria-selected={active}
+                      aria-busy={pendingPageId === row.destination.pageId || undefined}
                       selected={active}
                       data-openbitfun-component="settings-nav"
                       data-openbitfun-part="searchResult"
@@ -325,7 +347,7 @@ const SettingsNav: React.FC = () => {
                           {highlightFirstMatch(row.description, searchQuery)}
                         </OverflowText>
                       </span>
-                      {dirtyMarker(row.destination.pageId)}
+                      {pendingPageId === row.destination.pageId ? <Spinner size="sm" /> : dirtyMarker(row.destination.pageId)}
                     </NavigationPanelItem>
                   );
                 })}
@@ -362,12 +384,13 @@ const SettingsNav: React.FC = () => {
                     data-openbitfun-state={activePageId === page.id ? 'active' : undefined}
                     className="openbitfun-settings-nav__item"
                     selected={activePageId === page.id}
+                    aria-busy={pendingPageId === page.id || undefined}
                     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)}
+                    {pendingPageId === page.id ? <Spinner size="sm" /> : dirtyMarker(page.id)}
                   </NavigationPanelItem>
                 ))}
               </div>
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.scss b/src/web-ui/src/app/scenes/settings/SettingsScene.scss
index 6b3837e45c..2a5340504c 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.scss
@@ -9,57 +9,6 @@
   height: 100%;
   overflow: hidden;
 
-  &__loading {
-    flex: 1;
-    padding: var(--openbitfun-space-6);
-  }
-
-  &__loading-line,
-  &__loading-block {
-    border-radius: var(--openbitfun-radius-md);
-    background: var(--openbitfun-color-action-quiet-hover);
-    opacity: 0.65;
-  }
-
-  &__loading-line {
-    height: 14px;
-    max-width: 360px;
-    margin-bottom: var(--openbitfun-space-3);
-
-    &--title {
-      height: 20px;
-      max-width: 220px;
-      margin-bottom: var(--openbitfun-space-5);
-    }
-  }
-
-  &__loading-block {
-    height: 160px;
-    max-width: 720px;
-    margin-top: var(--openbitfun-space-6);
-  }
-
-  &__content-stack {
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  &__content-transition {
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-
-    > .openbitfun-view-transition-boundary__view {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
   &__content-wrapper {
     display: flex;
     flex-direction: column;
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 21cc93460b..6f1a15b9aa 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
@@ -4,6 +4,19 @@ import React, { act } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createRoot, type Root } from 'react-dom/client';
 
+const preparation = vi.hoisted(() => ({
+  ready: vi.fn(() => true),
+  preload: vi.fn(async (_pageId: string) => undefined),
+  loading: vi.fn(),
+}));
+vi.mock('./pages/shared/SettingsPage', () => ({
+  SettingsPage: ({ pageId, children }: { pageId: string; children: React.ReactNode }) => <section><h2>{pageId}</h2>{children}</section>,
+}));
+vi.mock('@/infrastructure/config/components/common', () => ({
+  ConfigLoadingState: () => { preparation.loading(); return <div data-testid="pending-page" />; },
+  ConfigRetryState: ({ onRetry }: { onRetry: () => void }) => <button data-testid="retry-page" onClick={onRetry}>Retry</button>,
+}));
+
 vi.mock('./settingsRegistry', () => {
   const pages = {
     'application.general': {
@@ -33,12 +46,13 @@ vi.mock('./settingsRegistry', () => {
     DEFAULT_SETTINGS_PAGE_ID: 'application.general',
     getSettingsPageManifest: (pageId: keyof typeof pages) => pages[pageId] ?? pages['application.general'],
     isSettingsPageId: (value: string) => value in pages,
-    isSettingsPageReady: () => true,
-    preloadSettingsPage: vi.fn(async () => undefined),
+    isSettingsPageReady: preparation.ready,
+    preloadSettingsPage: preparation.preload,
   };
 });
 
 import SettingsScene from './SettingsScene';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
 import { useSettingsStore } from './settingsStore';
 import {
   registerSettingsDraft,
@@ -50,6 +64,9 @@ describe('SettingsScene canonical page routing', () => {
   let root: Root;
 
   beforeEach(() => {
+    preparation.ready.mockReset().mockReturnValue(true);
+    preparation.preload.mockReset().mockResolvedValue(undefined);
+    preparation.loading.mockClear();
     resetSettingsDraftRegistryForTests();
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -135,4 +152,49 @@ describe('SettingsScene canonical page routing', () => {
     expect(save).toHaveBeenCalledOnce();
     expect(useSettingsStore.getState().activePageId).toBe('application.appearance');
   });
+  it('never mounts loading UI while switching between prepared pages', async () => {
+    await act(async () => root.render(<SettingsScene />));
+    const frame = container.querySelector('.openbitfun-settings-scene__content-wrapper');
+    await act(async () => useSettingsStore.getState().openPage('application.appearance', 'pointer'));
+    await act(async () => useSettingsStore.getState().openPage('application.general', 'pointer'));
+    expect(preparation.loading).not.toHaveBeenCalled();
+    expect(container.querySelector('.openbitfun-settings-scene__content-wrapper')).toBe(frame);
+    expect(container.querySelectorAll('[data-testid="settings-scene-content"]')).toHaveLength(1);
+  });
+
+  it('keeps the latest destination when cold imports complete out of order', async () => {
+    let finishAppearance!: () => void;
+    let finishAutomation!: () => void;
+    preparation.ready.mockReturnValue(false);
+    preparation.preload.mockImplementation(pageId => new Promise<void>(resolve => {
+      if (pageId === 'application.appearance') finishAppearance = resolve;
+      else finishAutomation = resolve;
+    }));
+    useSettingsStore.getState().openPage('application.appearance');
+    await act(async () => root.render(<SettingsScene />));
+    await act(async () => useSettingsStore.getState().openPage('tools.automation'));
+    await act(async () => finishAppearance());
+    expect(container.querySelector('h2')?.textContent).toBe('tools.automation');
+    expect(container.querySelector('[data-testid="appearance-page"]')).toBeNull();
+    await act(async () => finishAutomation());
+    expect(container.querySelector('[data-testid="automation-page"]')).not.toBeNull();
+  });
+
+  it('shows an in-place retry when preparation fails and recovers without leaving settings', async () => {
+    preparation.ready.mockReturnValue(false);
+    preparation.preload.mockRejectedValueOnce(new Error('offline'));
+    await act(async () => root.render(<SettingsScene />));
+    expect(container.querySelector('[data-testid="retry-page"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="general-page"]')).toBeNull();
+    await act(async () => (container.querySelector('[data-testid="retry-page"]') as HTMLButtonElement).click());
+    expect(container.querySelector('[data-testid="general-page"]')).not.toBeNull();
+  });
+
+  it('replaces page-local state synchronously on device activation', async () => {
+    await act(async () => root.render(<SettingsScene />));
+    const oldPage = container.querySelector('[data-testid="general-page"]');
+    await act(async () => activateSurface('peer-settings-test'));
+    expect(container.querySelector('[data-testid="general-page"]')).not.toBe(oldPage);
+  });
+
 });
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
index b862b13950..be7b313c1b 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
@@ -1,4 +1,3 @@
-import { NavigationTransitionBoundary } from '@/app/navigation/NavigationTransitionBoundary';
 import {
   cancelPendingSettingsNavigation,
   discardAndContinueSettingsNavigation,
@@ -6,7 +5,11 @@ import {
   useSettingsDraftSnapshot,
 } from '@/infrastructure/config/settingsDraftRegistry';
 import { ConfirmDialog } from '@openbitfun/ui';
-import React, { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { Suspense, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { getActiveSurfaceScope, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
+import { ConfigLoadingState, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { SettingsPage } from './pages/shared/SettingsPage';
+import { useSettingsScrollRestoration } from './useSettingsScrollRestoration';
 import { useTranslation } from 'react-i18next';
 import {
   getSettingsPageManifest,
@@ -17,20 +20,12 @@ import './SettingsScene.scss';
 import { useSettingsStore } from './settingsStore';
 import type { SettingsPageId } from './settingsTypes';
 
-function SettingsSceneLoading() {
+function SettingsSceneLoading({ pageId }: { pageId: SettingsPageId }) {
+  const { t } = useTranslation('common');
   return (
-    <div
-      className="openbitfun-settings-scene__loading"
-      aria-busy="true"
-      aria-hidden="true"
-      data-openbitfun-scene="settings"
-      data-openbitfun-part="loading"
-    >
-      <div className="openbitfun-settings-scene__loading-line openbitfun-settings-scene__loading-line--title" />
-      <div className="openbitfun-settings-scene__loading-line" />
-      <div className="openbitfun-settings-scene__loading-line" />
-      <div className="openbitfun-settings-scene__loading-block" />
-    </div>
+    <SettingsPage pageId={pageId} data-openbitfun-scene="settings" data-openbitfun-part="loading">
+      <ConfigLoadingState label={t('app.loading')} rows={5} />
+    </SettingsPage>
   );
 }
 
@@ -44,42 +39,29 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
   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);
-  const pageTransitionSequence = useSettingsStore((state) => state.pageTransitionSequence);
   const { pendingNavigation } = useSettingsDraftSnapshot();
-  const appliedTransitionSequenceRef = useRef(pageTransitionSequence);
-  const [preparedPageId, setPreparedPageId] = useState<SettingsPageId | null>(() => (
-    isSettingsPageReady(activePageId) ? activePageId : null
-  ));
+  const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [preparation, setPreparation] = useState<{ pageId: SettingsPageId; error: boolean } | null>(null);
+  const [retry, setRetry] = useState(0);
+  const { t: tErrors } = useTranslation('errors');
+  const ready = isSettingsPageReady(activePageId)
+    || (preparation?.pageId === activePageId && !preparation.error);
+  const failed = !ready && preparation?.pageId === activePageId && preparation.error;
 
   useEffect(() => {
-    if (isSettingsPageReady(activePageId)) {
-      setPreparedPageId(activePageId);
-      return;
-    }
+    if (isSettingsPageReady(activePageId)) return;
     let cancelled = false;
-    const commit = () => {
-      if (!cancelled) setPreparedPageId(activePageId);
-    };
-    void preloadSettingsPage(activePageId).then(commit, commit);
-    return () => {
-      cancelled = true;
-    };
-  }, [activePageId]);
-
-  const shouldAnimatePageTransition = (
-    appliedTransitionSequenceRef.current !== pageTransitionSequence
-    && pageTransitionTarget === activePageId
-    && pageTransitionMotion === 'pointer'
-  );
-
-  useLayoutEffect(() => {
-    appliedTransitionSequenceRef.current = pageTransitionSequence;
-  }, [pageTransitionSequence]);
+    void preloadSettingsPage(activePageId).then(
+      () => { if (!cancelled) setPreparation({ pageId: activePageId, error: false }); },
+      () => { if (!cancelled) setPreparation({ pageId: activePageId, error: true }); },
+    );
+    return () => { cancelled = true; };
+  }, [activePageId, retry]);
 
+  useSettingsScrollRestoration(contentRef, activePageId, scope.epoch, ready, activeSectionId, navigationRequestId);
   const manifest = getSettingsPageManifest(activePageId);
-  const Content = preparedPageId === activePageId ? manifest.component : null;
+  const Content = manifest.resolvedComponent ?? manifest.component;
 
   return (
     <div
@@ -90,20 +72,24 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
       data-openbitfun-part="root"
       data-openbitfun-page={activePageId}
     >
-      {Content ? (
-        <NavigationTransitionBoundary
-          transitionKey={activePageId}
-          motion={shouldAnimatePageTransition ? 'pointer' : 'none'}
-          className="openbitfun-settings-scene__content-transition"
-          layerClassName="openbitfun-settings-scene__content-wrapper"
+      <div ref={contentRef} className="openbitfun-settings-scene__content-wrapper">
+        <div
+          key={`${scope.epoch}:${activePageId}`}
+          data-testid="settings-scene-content"
+          data-openbitfun-scene="settings"
+          data-openbitfun-part="content"
+          data-openbitfun-page={activePageId}
         >
-          <div
-            data-testid="settings-scene-content"
-            data-openbitfun-scene="settings"
-            data-openbitfun-part="content"
-            data-openbitfun-page={activePageId}
-          >
-            <Suspense fallback={<SettingsSceneLoading />}>
+          {failed ? (
+            <SettingsPage pageId={activePageId}>
+              <ConfigRetryState
+                message={tErrors('moduleLoad.description')}
+                retryLabel={tErrors('moduleLoad.retry')}
+                onRetry={() => { setPreparation(null); setRetry(value => value + 1); }}
+              />
+            </SettingsPage>
+          ) : ready ? (
+            <Suspense fallback={<SettingsSceneLoading pageId={activePageId} />}>
               <Content
                 isActive={isActive}
                 viewId={activeViewId ?? undefined}
@@ -111,9 +97,9 @@ const SettingsScene: React.FC<SettingsSceneProps> = ({ isActive = true }) => {
                 navigationRequestId={navigationRequestId}
               />
             </Suspense>
-          </div>
-        </NavigationTransitionBoundary>
-      ) : <SettingsSceneLoading />}
+          ) : <SettingsSceneLoading pageId={activePageId} />}
+        </div>
+      </div>
       <ConfirmDialog
         open={pendingNavigation !== null}
         testId="settings-unsaved-navigation-dialog"
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
index 7bfd32400c..3889ca5d4d 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import { HARNESS_IDS, canonicalHarnessId } from '@/shared/agents/identity';
 import { Select, type SelectOption } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -5,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import {
   chatInputModePreferenceService,
+  normalizeChatInputModePreference,
   withChatInputDefaultModeStrategy,
   withFixedChatInputDefaultMode,
   type ChatInputDefaultModeStrategy,
@@ -28,8 +30,9 @@ function selectValue(value: string | number | (string | number)[]): string {
 export function DefaultHarnessSection(): React.ReactElement {
   const { t } = useTranslation('settings/runtime');
   const { t: tFlowChat } = useTranslation('flow-chat');
-  const [preference, setPreference] = useState<ChatInputModePreference | null>(null);
-  const [loading, setLoading] = useState(true);
+  const seed = useConfigSeed(['app.flow_chat']);
+  const [preference, setPreference] = useState<ChatInputModePreference | null>(seed.loaded ? normalizeChatInputModePreference(seed.get('app.flow_chat', undefined)) : null);
+  const [loading, setLoading] = useState(!seed.loaded);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
   const mountedRef = useRef(false);
@@ -37,7 +40,7 @@ export function DefaultHarnessSection(): React.ReactElement {
 
   const loadPreference = useCallback(async () => {
     const generation = ++loadGenerationRef.current;
-    setLoading(true);
+    setLoading(!seed.loaded);
     setLoadFailed(false);
     try {
       const nextPreference = await chatInputModePreferenceService.getPreference();
@@ -58,7 +61,7 @@ export function DefaultHarnessSection(): React.ReactElement {
 
   useEffect(() => {
     mountedRef.current = true;
-    void loadPreference();
+    if (!seed.loaded) void loadPreference();
     const unsubscribe = chatInputModePreferenceService.subscribe(
       nextPreference => {
         if (!mountedRef.current) return;
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
index fb22595f42..7c70843192 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 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';
@@ -62,28 +63,29 @@ const ExecutionSettingsPage: React.FC = () => {
 
   const { buildModelOption } = useModelSelectPresentation();
 
-  const [subagentDefaultModel, setSubagentDefaultModel] = useState<SubagentModelSelection>({ kind: 'fixed', model_id: 'fast' });
+  const seed = useConfigSeed(['ai.agent_model_defaults.subagents.default', 'ai.models', 'ai.enable_deferred_tool_loading', 'ai.subagent_max_concurrency', 'ai.swarm_max_concurrency', 'ai.tool_execution_timeout_secs', 'ai.subagent_batch_execution_policy', 'ai.user_question_timeout_secs']);
+  const [subagentDefaultModel, setSubagentDefaultModel] = useState<SubagentModelSelection>(seed.get<SubagentModelSelection | null>('ai.agent_model_defaults.subagents.default', null) ?? { kind: 'fixed', model_id: 'fast' });
 
-  const [configuredModels, setConfiguredModels] = useState<AIModelConfig[]>([]);
+  const [configuredModels, setConfiguredModels] = useState<AIModelConfig[]>(seed.get<AIModelConfig[] | null>('ai.models', null) ?? []);
 
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!seed.loaded);
 
   const [loadError, setLoadError] = useState(false);
 
-  const hasLoadedPageDataRef = useRef(false);
+  const hasLoadedPageDataRef = useRef(seed.loaded);
 
-  const [enableDeferredToolLoading, setEnableDeferredToolLoading] = useState(true);
+  const [enableDeferredToolLoading, setEnableDeferredToolLoading] = useState(seed.get('ai.enable_deferred_tool_loading', true) ?? true);
 
-  const [subagentMaxConcurrency, setSubagentMaxConcurrency] = useState(DEFAULT_SUBAGENT_MAX_CONCURRENCY);
+  const [subagentMaxConcurrency, setSubagentMaxConcurrency] = useState(seed.get<number | null>('ai.subagent_max_concurrency', null) ?? DEFAULT_SUBAGENT_MAX_CONCURRENCY);
 
-  const [swarmMaxConcurrency, setSwarmMaxConcurrency] = useState(DEFAULT_SWARM_MAX_CONCURRENCY);
+  const [swarmMaxConcurrency, setSwarmMaxConcurrency] = useState(seed.get<number | null>('ai.swarm_max_concurrency', null) ?? DEFAULT_SWARM_MAX_CONCURRENCY);
 
-  const [executionTimeout, setExecutionTimeout] = useState('');
+  const [executionTimeout, setExecutionTimeout] = useState(String(seed.get<number | null>('ai.tool_execution_timeout_secs', null) ?? ''));
 
-  const [userQuestionTimeout, setUserQuestionTimeout] = useState('180');
+  const [userQuestionTimeout, setUserQuestionTimeout] = useState(String(seed.get<number | null>('ai.user_question_timeout_secs', 180) ?? 0));
 
   const [subagentBatchExecutionPolicy, setSubagentBatchExecutionPolicy] =
-    useState<SubagentBatchExecutionPolicy>(DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY);
+    useState<SubagentBatchExecutionPolicy>(() => normalizeSubagentBatchExecutionPolicy(seed.get('ai.subagent_batch_execution_policy', DEFAULT_SUBAGENT_BATCH_EXECUTION_POLICY)));
 
   const [toolExecConfigLoading, setToolExecConfigLoading] = useState(false);
 
@@ -297,7 +299,7 @@ const ExecutionSettingsPage: React.FC = () => {
   }, []);
   useEffect(() => {
 
-    void loadPageData();
+    if (!seed.loaded) void loadPageData();
   }, [loadPageData]);
 
   if (!subagentModelOptions.some(option => option.value === subagentModelValue)) {
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
index 333f9b8b7b..ca2ba53130 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import { ConfigLoadingState, ConfigRetryState } from '@/infrastructure/config/components/common';
 import {
   Button,
@@ -92,10 +93,12 @@ function isValidMemoryWindowConfig(config: MemoriesConfigShape): boolean {
 const MemorySettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/memory');
   const { error: notifyError, success: notifySuccess } = useNotification();
-  const [loading, setLoading] = useState(true);
+  const seed = useConfigSeed(['memories', 'ai.models']);
+  const hasLoaded = useRef(seed.loaded);
+  const [loading, setLoading] = useState(!seed.loaded);
   const [loadFailed, setLoadFailed] = useState(false);
-  const [config, setConfig] = useState<MemoriesConfigShape>(DEFAULT_MEMORIES_CONFIG);
-  const [models, setModels] = useState<AIModelConfig[]>([]);
+  const [config, setConfig] = useState<MemoriesConfigShape>(() => normalizeMemoriesConfig(seed.get('memories', DEFAULT_MEMORIES_CONFIG)));
+  const [models, setModels] = useState<AIModelConfig[]>(seed.get<AIModelConfig[] | null>('ai.models', null) ?? []);
   const [savingKey, setSavingKey] = useState<keyof MemoriesConfigShape | null>(null);
   const [actionBusy, setActionBusy] = useState<'reset-settings' | 'open-directory' | 'reset-memory' | null>(null);
   const [resetMemoryConfirmOpen, setResetMemoryConfirmOpen] = useState(false);
@@ -105,7 +108,7 @@ const MemorySettingsSection: React.FC = () => {
   const actionMenuAnchorRef = useRef<HTMLButtonElement>(null);
 
   const loadData = useCallback(async () => {
-    setLoading(true);
+    setLoading(!hasLoaded.current);
     setLoadFailed(false);
     try {
       const [loadedConfig, loadedModels] = await Promise.all([
@@ -114,6 +117,7 @@ const MemorySettingsSection: React.FC = () => {
       ]);
       setConfig(normalizeMemoriesConfig(loadedConfig));
       setModels(Array.isArray(loadedModels) ? loadedModels : []);
+      hasLoaded.current = true;
     } catch (error) {
       log.error('Failed to load memories config', error);
       setLoadFailed(true);
@@ -123,7 +127,7 @@ const MemorySettingsSection: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    void loadData();
+    if (!seed.loaded) void loadData();
   }, [loadData]);
 
   const enabledModels = useMemo(() => models.filter((model) => model.enabled && model.id), [models]);
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
index 3d6eb7f337..91b75b33aa 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx
@@ -53,6 +53,7 @@ describe('ModelSettingsPage independent loading', () => {
   });
 
   beforeEach(() => {
+    configManager.clearCache();
     reads = new Map([
       'ai.models', 'ai.default_models', 'ai.proxy',
       'ai.stream_idle_timeout_secs', 'ai.stream_ttft_timeout_secs',
@@ -79,6 +80,21 @@ describe('ModelSettingsPage independent loading', () => {
     vi.restoreAllMocks();
   });
 
+  it('renders a warm model pool immediately without starting a read that could overwrite edits', () => {
+    const values: Record<string, unknown> = {
+      'ai.models': [model], 'ai.default_models': { primary: model.id },
+      'ai.proxy': { enabled: false, url: '', username: '', password: '' },
+      'ai.stream_idle_timeout_secs': 120, 'ai.stream_ttft_timeout_secs': 60,
+    };
+    vi.spyOn(configManager, 'hasCachedConfig').mockImplementation(path => path in values);
+    vi.spyOn(configManager, 'getCachedConfig').mockImplementation(<T,>(path: string) => values[path] as T);
+    act(() => root.render(<ModelSettingsPage />));
+    expect(container.querySelector('[data-testid="settings-model-pool"]')?.textContent).toContain(model.model_name);
+    expect(selectors()[0].disabled).toBe(false);
+    expect(configManager.getOptionalConfig).not.toHaveBeenCalled();
+    expect(configManager.getConfig).not.toHaveBeenCalled();
+  });
+
   it('shows stable content immediately and releases models without waiting for catalogs or network settings', async () => {
     await act(async () => root.render(<ModelSettingsPage />));
 
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
index 0113cfe63c..ce816ccf69 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ModelSettingsPage.tsx
@@ -8,6 +8,7 @@ import type {
 } from '@/infrastructure/api/service-api/AIApi';
 import {
   ConfigActionBar,
+  ConfigLoadingState,
   ConfigCollectionItem,
   ConfigEmptyState,
   ConfigPageContent,
@@ -41,6 +42,7 @@ import {
   type SubscriptionLoginOperation,
 } from '@/infrastructure/config/components/subscriptionLoginCoordinator';
 import { resolveProviderTemplates } from '@/infrastructure/config/services/builtinProviderCatalog';
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { getCapabilitiesByCategory, getEffectiveModelCapabilities, resolveModelCategory } from '@/infrastructure/config/services/modelCategory';
 import { getModelTags, getModelUserTags, preserveModelAnnotations } from '@/infrastructure/config/services/modelTags';
@@ -405,8 +407,14 @@ const ModelSettingsPage: React.FC = () => {
   const modelDiscoverySurface = peerDevice?.peerMode.active ? peerDevice.peerMode.deviceId : 'local';
   const connectionTestSupported = !peerDevice?.peerMode.active
     || peerDevice.currentPeerCapabilities?.hostKind !== 'cli';
-  const [aiModels, setAiModels] = useState<AIModelConfigType[]>([]);
-  const [poolDefaults, setPoolDefaults] = useState<DefaultModelsConfig>({});
+  const modelSeed = useConfigSeed(['ai.models', 'ai.default_models']);
+  const proxySeed = useConfigSeed(['ai.proxy']);
+  const timeoutSeed = useConfigSeed(['ai.stream_idle_timeout_secs', 'ai.stream_ttft_timeout_secs']);
+  const initialProxy = proxySeed.get<ProxyConfig | null>('ai.proxy', null) ?? { enabled: false, url: '', username: '', password: '' };
+  const initialIdle = timeoutSeed.get<number | null>('ai.stream_idle_timeout_secs', null);
+  const initialTtft = timeoutSeed.get<number | null>('ai.stream_ttft_timeout_secs', null);
+  const [aiModels, setAiModels] = useState<AIModelConfigType[]>(modelSeed.get<AIModelConfigType[] | null>('ai.models', null) ?? []);
+  const [poolDefaults, setPoolDefaults] = useState<DefaultModelsConfig>(modelSeed.get<DefaultModelsConfig | null>('ai.default_models', null) ?? {});
   const [poolQuery, setPoolQuery] = useState('');
   const [poolCapability, setPoolCapability] = useState<ModelCapability | ''>('');
   const [poolProvider, setPoolProvider] = useState('');
@@ -414,10 +422,10 @@ const ModelSettingsPage: React.FC = () => {
   const [showSubscriptionManager, setShowSubscriptionManager] = useState(false);
   const [showProviderManager, setShowProviderManager] = useState(false);
   const [subscriptionLoadError, setSubscriptionLoadError] = useState(false);
-  const [isConfigLoading, setIsConfigLoading] = useState(true);
+  const [isConfigLoading, setIsConfigLoading] = useState(!modelSeed.loaded);
   const [configLoadError, setConfigLoadError] = useState(false);
-  const [proxyLoadState, setProxyLoadState] = useState<'loading' | 'ready' | 'error'>('loading');
-  const [streamTimeoutLoadState, setStreamTimeoutLoadState] = useState<'loading' | 'ready' | 'error'>('loading');
+  const [proxyLoadState, setProxyLoadState] = useState<'loading' | 'ready' | 'error'>(proxySeed.loaded ? 'ready' : 'loading');
+  const [streamTimeoutLoadState, setStreamTimeoutLoadState] = useState<'loading' | 'ready' | 'error'>(timeoutSeed.loaded ? 'ready' : 'loading');
   const modelConfigReady = !isConfigLoading && !configLoadError;
   const [modelCatalog, setModelCatalog] = useState<Awaited<ReturnType<typeof aiApi.getModelCatalog>> | null>(null);
   const [modelsDevStatus, setModelsDevStatus] = useState<Awaited<ReturnType<typeof aiApi.getModelsDevCatalogStatus>> | null>(null);
@@ -444,21 +452,11 @@ const ModelSettingsPage: React.FC = () => {
   const [showAllProviders, setShowAllProviders] = useState(false);
 
   const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
-  const [proxyConfig, setProxyConfig] = useState<ProxyConfig>({
-    enabled: false,
-    url: '',
-    username: '',
-    password: ''
-  });
-  const [savedProxyConfig, setSavedProxyConfig] = useState<ProxyConfig>({
-    enabled: false,
-    url: '',
-    username: '',
-    password: ''
-  });
-  const [streamIdleTimeoutInput, setStreamIdleTimeoutInput] = useState('');
-  const [streamTtftTimeoutInput, setStreamTtftTimeoutInput] = useState('');
-  const [savedStreamTimeouts, setSavedStreamTimeouts] = useState({ idle: '', ttft: '' });
+  const [proxyConfig, setProxyConfig] = useState<ProxyConfig>(initialProxy);
+  const [savedProxyConfig, setSavedProxyConfig] = useState<ProxyConfig>(initialProxy);
+  const [streamIdleTimeoutInput, setStreamIdleTimeoutInput] = useState(initialIdle == null ? '' : String(initialIdle));
+  const [streamTtftTimeoutInput, setStreamTtftTimeoutInput] = useState(initialTtft == null ? '' : String(initialTtft));
+  const [savedStreamTimeouts, setSavedStreamTimeouts] = useState({ idle: initialIdle == null ? '' : String(initialIdle), ttft: initialTtft == null ? '' : String(initialTtft) });
   const [isStreamTimeoutSaving, setIsStreamTimeoutSaving] = useState(false);
   const [isProxySaving, setIsProxySaving] = useState(false);
   const [streamTimeoutSaveError, setStreamTimeoutSaveError] = useState<string | null>(null);
@@ -746,13 +744,13 @@ const ModelSettingsPage: React.FC = () => {
       void loadModelsDevStatus();
     });
     // Independent sections become usable as soon as their own data is ready.
-    void loadConfig();
-    void loadProxyConfig();
-    void loadStreamTimeouts();
+    if (!modelSeed.loaded) void loadConfig();
+    if (!proxySeed.loaded) void loadProxyConfig();
+    if (!timeoutSeed.loaded) void loadStreamTimeouts();
     void loadModelCatalog();
     void loadModelsDevStatus();
     return unsubscribeCatalog;
-  }, [loadConfig, loadProxyConfig, loadStreamTimeouts, loadModelCatalog, loadModelsDevStatus, modelDiscoverySurface]);
+  }, [loadConfig, loadProxyConfig, loadStreamTimeouts, loadModelCatalog, loadModelsDevStatus, modelDiscoverySurface, modelSeed, proxySeed, timeoutSeed]);
 
   const refreshSubscriptionAccounts = useCallback(async () => {
     const scope = getActiveSurfaceScope();
@@ -4022,7 +4020,7 @@ const ModelSettingsPage: React.FC = () => {
   );
   const renderSectionLoadState = (state: 'loading' | 'ready' | 'error', onRetry: () => Promise<void>) => (
     state === 'loading' ? (
-      <div className="openbitfun-model-settings__loading" role="status">{t('messages.loading')}</div>
+      <ConfigLoadingState label={t('messages.loading')} variant="list" />
     ) : state === 'error' ? (
       <ConfigRetryState message={t('messages.loadFailedLocked')} retryLabel={t('messages.retry')}
         onRetry={() => void onRetry()} />
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
index 8873af9115..518f599c9e 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
 import {
   ConfigLoadingState,
@@ -41,19 +42,20 @@ function resolveToolPermissionMode(config: ToolPermissionConfig): ToolPermission
 const PermissionsSettingsPage: React.FC = () => {
   const { t } = useTranslation('settings/runtime');
 
-  const [isLoading, setIsLoading] = useState(true);
+  const seed = useConfigSeed(['tool_permissions', SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH]);
+  const [isLoading, setIsLoading] = useState(!seed.loaded);
 
   const [loadError, setLoadError] = useState(false);
 
-  const hasLoadedPageDataRef = useRef(false);
+  const hasLoadedPageDataRef = useRef(seed.loaded);
 
   const toolPermissionSaveInFlightRef = useRef(false);
 
-  const [toolPermissionConfig, setToolPermissionConfig] = useState<ToolPermissionConfig>(DEFAULT_TOOL_PERMISSION_CONFIG);
+  const [toolPermissionConfig, setToolPermissionConfig] = useState<ToolPermissionConfig>(() => normalizeToolPermissionConfig(seed.get('tool_permissions', DEFAULT_TOOL_PERMISSION_CONFIG)));
 
   const [permissionConfigSaving, setPermissionConfigSaving] = useState(false);
 
-  const [showPermissionModeControl, setShowPermissionModeControl] = useState(true);
+  const [showPermissionModeControl, setShowPermissionModeControl] = useState(seed.get<boolean | null>(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH, true) !== false);
 
   const [permissionModeControlVisibilitySaving, setPermissionModeControlVisibilitySaving] = useState(false);
 
@@ -149,7 +151,7 @@ const PermissionsSettingsPage: React.FC = () => {
     if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
     try {
       const [permissionConfig, permissionModeVisible] = await Promise.all([
-        permissionConfigService.getConfig(),
+        permissionConfigService.getConfig({ requireLoaded: true }),
         configManager.getOptionalConfig<boolean>(SHOW_PERMISSION_MODE_CONTROL_CONFIG_PATH),
       ]);
       setToolPermissionConfig(normalizeToolPermissionConfig(permissionConfig));
@@ -164,7 +166,7 @@ const PermissionsSettingsPage: React.FC = () => {
   }, []);
   useEffect(() => {
 
-    void loadPageData();
+    if (!seed.loaded) void loadPageData();
   }, [loadPageData]);
 
   return (
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
index bb9eca249b..b5d44af1e3 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 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';
@@ -7,7 +8,7 @@ import type { AIModelConfig, TaskModelSelection, TaskModelsConfig } from '@/infr
 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const log = createLogger('SessionTitleSection');
@@ -31,25 +32,29 @@ function normalizeSelectValue(value: string | number | (string | number)[]): str
 export const SessionTitleSection: React.FC = () => {
   const { t } = useTranslation('settings/models');
   const { success: notifySuccess, error: notifyError } = useNotification();
-  const [isLoading, setIsLoading] = useState(true);
+  const seed = useConfigSeed(['ai.models', 'ai.task_models']);
+  const [cachedSettings] = useState(() => aiExperienceConfigService.getCachedSettings());
+  const hasLoaded = useRef(Boolean(cachedSettings && seed.loaded));
+  const [isLoading, setIsLoading] = useState(!hasLoaded.current);
   const [loadError, setLoadError] = useState(false);
-  const [settings, setSettings] = useState<AIExperienceSettings | null>(null);
-  const [models, setModels] = useState<AIModelConfig[]>([]);
-  const [taskModels, setTaskModels] = useState<TaskModelsConfig>(DEFAULT_TASK_MODELS);
+  const [settings, setSettings] = useState<AIExperienceSettings | null>(cachedSettings);
+  const [models, setModels] = useState<AIModelConfig[]>(seed.get<AIModelConfig[] | null>('ai.models', null) ?? []);
+  const [taskModels, setTaskModels] = useState<TaskModelsConfig>(() => normalizeTaskModels(seed.get('ai.task_models', DEFAULT_TASK_MODELS)));
   const { buildModelOption } = useModelSelectPresentation();
 
   const loadData = useCallback(async () => {
-    setIsLoading(true);
+    setIsLoading(!hasLoaded.current);
     setLoadError(false);
     try {
       const [loadedSettings, allModels, taskModelsData] = await Promise.all([
-        aiExperienceConfigService.getSettingsAsync(),
+        aiExperienceConfigService.getSettingsAsync({ requireLoaded: true }),
         configManager.getConfig<AIModelConfig[]>('ai.models') || [],
         configManager.getConfig<Partial<TaskModelsConfig>>('ai.task_models'),
       ]);
       setSettings(loadedSettings);
       setModels(allModels ?? []);
       setTaskModels(normalizeTaskModels(taskModelsData));
+      hasLoaded.current = true;
     } catch (error) {
       log.error('Failed to load session title config', error);
       setLoadError(true);
@@ -59,7 +64,7 @@ export const SessionTitleSection: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    void loadData();
+    if (!cachedSettings || !seed.loaded) void loadData();
     const unwatchModels = configManager.watch('ai.models', () => void loadData());
     const unwatchTaskModels = configManager.watch('ai.task_models', () => void loadData());
     const unwatchSettings = aiExperienceConfigService.addChangeListener((next) => {
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
index 80318025e9..9bd41f7557 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
@@ -1,5 +1,5 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 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';
@@ -300,8 +300,9 @@ function PreventSleepSetting() {
 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 seed = useConfigSeed(['app.close_button_behavior']);
+  const [behavior, setBehavior] = useState<CloseBehavior>(seed.get<CloseBehavior | null>('app.close_button_behavior', null) ?? 'minimize_to_tray');
+  const [loading, setLoading] = useState(!seed.loaded);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
@@ -322,7 +323,7 @@ function WindowBehaviorSetting() {
 
   const loadData = useCallback(async () => {
     if (!isTauri) return;
-    setLoading(true);
+    setLoading(!seed.loaded);
     setLoadFailed(false);
     try {
       const value = await configManager.getOptionalConfig<CloseBehavior>('app.close_button_behavior');
@@ -340,7 +341,7 @@ function WindowBehaviorSetting() {
       setLoading(false);
       return;
     }
-    void loadData();
+    if (!seed.loaded) void loadData();
   }, [isTauri, loadData]);
 
   const handleChange = useCallback(
@@ -367,7 +368,7 @@ function WindowBehaviorSetting() {
   if (!isTauri) return null;
 
   if (loading) {
-    return <ConfigLoadingState label={t('windowBehavior.messages.loading')} />;
+    return <ConfigLoadingState label={t('windowBehavior.messages.loading')} rows={1} />;
   }
 
   if (loadFailed) {
@@ -404,16 +405,17 @@ function WindowBehaviorSetting() {
 
 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 seed = useConfigSeed(['app.notifications.dialog_completion_notify', 'app.notifications.permission_request_notify', 'app.notifications.enable_startup_tips']);
+  const [dialogNotify, setDialogNotify] = useState(seed.get<boolean | null>('app.notifications.dialog_completion_notify', true) !== false);
+  const [permissionRequestNotify, setPermissionRequestNotify] = useState(seed.get<boolean | null>('app.notifications.permission_request_notify', true) !== false);
+  const [startupTips, setStartupTips] = useState(seed.get<boolean | null>('app.notifications.enable_startup_tips', true) !== false);
+  const [loading, setLoading] = useState(!seed.loaded);
   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);
+    setLoading(!seed.loaded);
     setLoadFailed(false);
     try {
       const [notify, permissionNotify, tips] = await Promise.all([
@@ -433,13 +435,13 @@ function NotificationSettings() {
   }, []);
 
   useEffect(() => {
-    void loadData();
+    if (!seed.loaded) void loadData();
   }, [loadData]);
 
   const handleDialogNotifyToggle = async (checked: boolean) => {
     setSaving(true);
     try {
-      await configAPI.setConfig('app.notifications.dialog_completion_notify', checked);
+      await configManager.setConfig('app.notifications.dialog_completion_notify', checked);
       setDialogNotify(checked);
       setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
     } catch {
@@ -465,7 +467,7 @@ function NotificationSettings() {
   const handleStartupTipsToggle = async (checked: boolean) => {
     setSaving(true);
     try {
-      await configAPI.setConfig('app.notifications.enable_startup_tips', checked);
+      await configManager.setConfig('app.notifications.enable_startup_tips', checked);
       setStartupTips(checked);
       setMessage({ type: 'success', text: t('notifications.messages.saveSuccess') });
     } catch {
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
index a9f24e285f..85c96247c6 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/PetSettingsSection.tsx
@@ -1,3 +1,4 @@
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
 import '@/app/scenes/settings/pages/shared/RuntimeSettings.scss';
 import {
   ConfigLoadingState,
@@ -44,20 +45,25 @@ function getPetPreviewStyle(pet: AgentCompanionPetPackage): React.CSSProperties
   } as React.CSSProperties;
 }
 
+const companionPetInventory = createSettingsReadCache<AgentCompanionPetPackage[]>();
+
 const PetSettingsSection: React.FC<{ isActive?: boolean }> = ({ isActive = true }) => {
   const { t } = useI18n('settings/runtime');
 
   const notification = useNotification();
 
-  const [isLoading, setIsLoading] = useState(true);
+  const [cachedSettings] = useState(() => aiExperienceConfigService.getCachedSettings());
+  const [cachedPets] = useState(() => companionPetInventory.peek());
+  const editRevision = useRef(0);
+  const [isLoading, setIsLoading] = useState(!cachedSettings || !cachedPets);
 
   const [loadError, setLoadError] = useState(false);
 
-  const hasLoadedPageDataRef = useRef(false);
+  const hasLoadedPageDataRef = useRef(Boolean(cachedSettings && cachedPets));
 
-  const [settings, setSettings] = useState<AIExperienceSettings | null>(null);
+  const [settings, setSettings] = useState<AIExperienceSettings | null>(cachedSettings);
 
-  const [companionPets, setCompanionPets] = useState<AgentCompanionPetPackage[]>([]);
+  const [companionPets, setCompanionPets] = useState<AgentCompanionPetPackage[]>(cachedPets ?? []);
 
   const [companionPetListExpanded, setCompanionPetListExpanded] = useState(false);
 
@@ -66,7 +72,7 @@ const PetSettingsSection: React.FC<{ isActive?: boolean }> = ({ isActive = true
   const [companionPetDeletingPath, setCompanionPetDeletingPath] = useState<string | null>(null);
 
   const reloadCompanionPets = useCallback(async () => {
-    setCompanionPets(await listAgentCompanionPets());
+    setCompanionPets(await companionPetInventory.read(listAgentCompanionPets));
   }, []);
 
   const updateSetting = async <K extends keyof AIExperienceSettings>(
@@ -74,6 +80,7 @@ const PetSettingsSection: React.FC<{ isActive?: boolean }> = ({ isActive = true
     value: AIExperienceSettings[K]
   ) => {
     if (!settings) return;
+    editRevision.current += 1;
     const newSettings = { ...settings, [key]: value };
     setSettings(newSettings);
     try {
@@ -175,13 +182,14 @@ const PetSettingsSection: React.FC<{ isActive?: boolean }> = ({ isActive = true
 
   const loadPageData = useCallback(async () => {
     const isInitialLoad = !hasLoadedPageDataRef.current;
+    const revision = editRevision.current;
     if (isInitialLoad) { setIsLoading(true); setLoadError(false); }
     try {
       const [loadedSettings] = await Promise.all([
-        aiExperienceConfigService.getSettingsAsync(),
+        aiExperienceConfigService.getSettingsAsync({ requireLoaded: true }),
         reloadCompanionPets(),
       ]);
-      setSettings(loadedSettings);
+      if (revision === editRevision.current) setSettings(loadedSettings);
 
       hasLoadedPageDataRef.current = true;
     } catch (error) {
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/TextSelectionSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/application/TextSelectionSettingsSection.test.tsx
index 2ab423bf14..ee64fb3088 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/TextSelectionSettingsSection.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/TextSelectionSettingsSection.test.tsx
@@ -6,7 +6,7 @@ import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
 import TextSelectionSettingsSection from './TextSelectionSettingsSection';
 
 const mocks = vi.hoisted(() => ({ get: vi.fn(), set: vi.fn(), error: vi.fn(), listeners: new Set<() => void>() }));
-vi.mock('@/infrastructure/config/services/ConfigManager', () => ({ configManager: {
+vi.mock('@/infrastructure/config/services/ConfigManager', () => ({ configManager: { hasCachedConfig: () => false, getCachedConfig: () => undefined,
   getOptionalConfig: mocks.get,
   setConfig: mocks.set,
   watch: (_path: string, listener: () => void) => {
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
index 786c95a94a..0fed28acbb 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/VoiceSettingsSection.tsx
@@ -1,3 +1,4 @@
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
 import {
   LOCAL_SENSEVOICE_SMALL_INT8_MODEL_ID,
   speechAPI,
@@ -81,6 +82,8 @@ function statusActionKey(status: VoiceInputStatus): string {
   }
 }
 
+const speechModelInventory = createSettingsReadCache<SpeechModelStatus[]>();
+
 const VoiceSettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/voice-input');
   const speechRuntimeSupported = isTauriRuntime();
@@ -90,8 +93,10 @@ const VoiceSettingsSection: React.FC = () => {
     error: settingsError,
     reload: reloadSettings,
   } = useAIExperienceSettings();
-  const [models, setModels] = useState<SpeechModelStatus[]>([]);
-  const [modelsLoading, setModelsLoading] = useState(speechRuntimeSupported);
+  const [cachedModels] = useState(() => speechRuntimeSupported ? speechModelInventory.peek() : undefined);
+  const hasLoadedModels = useRef(cachedModels !== undefined);
+  const [models, setModels] = useState<SpeechModelStatus[]>(cachedModels ?? []);
+  const [modelsLoading, setModelsLoading] = useState(speechRuntimeSupported && !hasLoadedModels.current);
   const [modelsLoadFailed, setModelsLoadFailed] = useState(false);
   const [voiceInputSaving, setVoiceInputSaving] = useState(false);
   const [busyAction, setBusyAction] = useState<string | null>(null);
@@ -131,10 +136,11 @@ const VoiceSettingsSection: React.FC = () => {
       return;
     }
     try {
-      setModelsLoading(true);
+      setModelsLoading(!hasLoadedModels.current);
       setModelsLoadFailed(false);
-      const response = await speechAPI.listModels();
-      setModels(response.models);
+      const loaded = await speechModelInventory.read(async () => (await speechAPI.listModels()).models);
+      setModels(loaded);
+      hasLoadedModels.current = true;
     } catch (error) {
       log.error('Failed to load local speech model status', { error });
       setModelsLoadFailed(true);
@@ -147,11 +153,13 @@ const VoiceSettingsSection: React.FC = () => {
     if (!speechRuntimeSupported) return undefined;
     void loadModels();
     const unsubscribeProgress = speechAPI.onModelProgress(event => {
+      speechModelInventory.invalidate();
       setModels(previous => previous.map(model =>
         model.modelId === event.status.modelId ? event.status : model
       ));
     });
     const unsubscribeStatus = speechAPI.onModelStatusChanged(status => {
+      speechModelInventory.invalidate();
       setModels(previous => previous.map(model =>
         model.modelId === status.modelId ? status : model
       ));
@@ -238,7 +246,7 @@ const VoiceSettingsSection: React.FC = () => {
     );
   }
 
-  if (settingsError || !settings || !voiceInput) {
+  if (!settings || !voiceInput) {
     return (
       <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
         <ConfigPageSectionStack>
@@ -289,6 +297,7 @@ const VoiceSettingsSection: React.FC = () => {
   return (
     <div id={sectionAnchor} className="voice-input-config" data-openbitfun-component="voice-input-config" data-openbitfun-part="root">
       <ConfigPageSectionStack className="voice-input-config__content">
+        {settingsError && <ConfigMessage message={{ type: 'error', text: t('messages.loadFailed') }} />}
         <ConfigPageSection
           title={t('sections.basic')}
           description={t('sections.basicDescription')}
diff --git a/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
index e825b7fc9c..7dc50f9fb1 100644
--- a/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/ArchivedSessionsSettingsPage.tsx
@@ -12,6 +12,7 @@ import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import {
   ConfigMessage,
+  ConfigLoadingState,
   ConfigPageContent,
   ConfigPageHeader,
   ConfigPageLayout,
@@ -501,7 +502,7 @@ const ArchivedSessionsSettingsPage: React.FC = () => {
           ))}
           {loading ? (
             <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="loading" className="archived-sessions-config__loading">
-              {t('nav.sessions.loading')}
+              <ConfigLoadingState label={t('nav.sessions.loading')} variant="list" />
             </div>
           ) : !hasEntries && loadFailures.length === 0 ? (
             <div data-openbitfun-component="archived-sessions-config" data-openbitfun-part="empty" className="archived-sessions-config__empty">
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
index 4a55b1ad5e..96b97b344c 100644
--- a/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
@@ -1,3 +1,5 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
 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';
@@ -9,17 +11,23 @@ import type {
 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SettingsPage } from '../shared/SettingsPage';
+const loggingRuntime = createSettingsReadCache<RuntimeLoggingInfo>();
+
 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 seed = useConfigSeed(['app.logging.level', 'app.logging.include_sensitive_diagnostics']);
+  const [cachedRuntime] = useState(() => loggingRuntime.peek());
+  const editRevision = useRef(0);
+  const hasLoaded = useRef(seed.loaded && cachedRuntime !== undefined);
+  const [configLevel, setConfigLevel] = useState<BackendLogLevel>(seed.get<BackendLogLevel | null>('app.logging.level', null) ?? cachedRuntime?.effectiveLevel ?? 'info');
+  const [includeSensitiveDiagnostics, setIncludeSensitiveDiagnostics] = useState(seed.get('app.logging.include_sensitive_diagnostics', false) ?? false);
+  const [runtimeInfo, setRuntimeInfo] = useState<RuntimeLoggingInfo | null>(cachedRuntime ?? null);
+  const [loading, setLoading] = useState(!hasLoaded.current);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
   const [openingFolder, setOpeningFolder] = useState(false);
@@ -45,22 +53,27 @@ function LoggingSection() {
   }, []);
 
   const loadData = useCallback(async () => {
+    const revision = editRevision.current;
     try {
-      setLoading(true);
+      setLoading(!hasLoaded.current);
       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(),
+        loggingRuntime.read(() => configAPI.getRuntimeLoggingInfo()),
       ]);
 
-      setConfigLevel(savedLevel || info.effectiveLevel || 'info');
-      setIncludeSensitiveDiagnostics(savedIncludeSensitiveDiagnostics ?? false);
+      if (revision === editRevision.current) {
+        setConfigLevel(savedLevel || info.effectiveLevel || 'info');
+        setIncludeSensitiveDiagnostics(savedIncludeSensitiveDiagnostics ?? false);
+      }
       setRuntimeInfo(info);
+      hasLoaded.current = true;
     } catch (error) {
       log.error('Failed to load logging config', error);
       setLoadFailed(true);
+      if (hasLoaded.current) setMessage({ type: 'error', text: t('logging.messages.loadFailed') });
     } finally {
       setLoading(false);
     }
@@ -72,6 +85,7 @@ function LoggingSection() {
 
   const handleLevelChange = useCallback(
     async (value: string) => {
+      editRevision.current += 1;
       const nextLevel = value as BackendLogLevel;
       const previousLevel = configLevel;
       setConfigLevel(nextLevel);
@@ -79,7 +93,6 @@ function LoggingSection() {
 
       try {
         await configManager.setConfig('app.logging.level', nextLevel);
-        configManager.clearCache();
 
         const info = await configAPI.getRuntimeLoggingInfo();
         setRuntimeInfo(info);
@@ -97,13 +110,13 @@ function LoggingSection() {
 
   const handleSensitiveDiagnosticsChange = useCallback(
     async (checked: boolean) => {
+      editRevision.current += 1;
       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);
@@ -153,7 +166,7 @@ function LoggingSection() {
     return <ConfigLoadingState label={t('logging.messages.loading')} />;
   }
 
-  if (loadFailed) {
+  if (loadFailed && !hasLoaded.current) {
     return (
       <ConfigRetryState
         message={t('logging.messages.loadFailed')}
diff --git a/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
index e86377348a..697dbad846 100644
--- a/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.test.tsx
@@ -3,6 +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 { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
 import UsageStatisticsSettingsPage from '@/app/scenes/settings/pages/data/UsageStatisticsSettingsPage';
 import type { UsageStatistics } from '@/infrastructure/api';
 
@@ -124,6 +125,7 @@ describe('UsageStatisticsSettingsPage', () => {
   let root: Root;
 
   beforeEach(() => {
+    activateSurface('local');
     container = document.createElement('div');
     document.body.appendChild(container);
     root = createRoot(container);
@@ -141,6 +143,29 @@ describe('UsageStatisticsSettingsPage', () => {
     await act(async () => { await Promise.resolve(); });
   }
 
+  it('retains the same chart and heatmap nodes during refresh and a failed refresh', async () => {
+    await render();
+    const heatmap = container.querySelector('.openbitfun-usage-stats__activity');
+    expect(heatmap).not.toBeNull();
+    const rejects: Array<(reason: Error) => void> = [];
+    getStatisticsMock.mockImplementation(() => new Promise((_resolve, reject) => rejects.push(reject)));
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="usage-refresh"]')!.click());
+    expect(container.querySelector('.openbitfun-usage-stats__activity')).toBe(heatmap);
+    expect(container.querySelector('[data-testid="usage-loading"]')).toBeNull();
+    await act(async () => rejects.forEach(reject => reject(new Error('offline'))));
+    expect(container.querySelector('.openbitfun-usage-stats__activity')).toBe(heatmap);
+    expect(container.textContent).toContain('loadFailed');
+  });
+
+  it('paints the last successful statistics immediately when returning to the same device', async () => {
+    await render();
+    act(() => root.render(null));
+    getStatisticsMock.mockImplementation(() => new Promise(() => {}));
+    act(() => root.render(<UsageStatisticsSettingsPage />));
+    expect(container.querySelector('.openbitfun-usage-stats__activity')).not.toBeNull();
+    expect(container.querySelector('[data-testid="usage-loading"]')).toBeNull();
+  });
+
   it('places the fixed six-month heatmap first and includes subagent calls in both queries', async () => {
     await render();
 
diff --git a/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
index f583db20ed..c1da19d3ec 100644
--- a/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.tsx
@@ -1,3 +1,4 @@
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
 import '@/app/scenes/settings/pages/data/UsageStatisticsSettingsPage.scss';
 import {
   TokenUsageStatisticsUnavailableError,
@@ -378,40 +379,50 @@ function UsageDetails({ stats, timeZone }: { stats: UsageStatistics; timeZone: s
   );
 }
 
+const usageSnapshot = createSettingsReadCache<UsageStatistics>();
+
 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);
-  const [statsRange, setStatsRange] = useState<UsageTimeRange | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [initialStats] = useState(() => usageSnapshot.peek(JSON.stringify(['thisMonth', timeZone])) ?? null);
+  const [stats, setStats] = useState<UsageStatistics | null>(initialStats);
+  const [statsRange, setStatsRange] = useState<UsageTimeRange | null>(initialStats ? 'thisMonth' : null);
+  const [loading, setLoading] = useState(!initialStats);
   const [refreshing, setRefreshing] = useState(false);
   const [activityRefreshKey, setActivityRefreshKey] = useState(0);
   const [message, setMessage] = useState<{ type: 'error' | 'info'; text: string } | null>(null);
   const requestIdRef = useRef(0);
-  const hasLoadedRef = useRef(false);
+  const hasLoadedRef = useRef(initialStats !== null);
 
   const load = useCallback(async (background = false) => {
     const requestId = ++requestIdRef.current;
-    if (background) setRefreshing(true);
+    const cached = usageSnapshot.peek(JSON.stringify([timeRange, timeZone]));
+    const keepContent = background || cached !== undefined;
+    if (cached) { setStats(cached); setStatsRange(timeRange); }
+    if (keepContent) { setRefreshing(true); setLoading(false); }
     else {
       setLoading(true);
       setStats(null);
     }
     setMessage(null);
     try {
-      const result = await tokenUsageStatisticsApi.getStatistics({
+      const result = await usageSnapshot.read(() => tokenUsageStatisticsApi.getStatistics({
         timeRange,
         granularity: granularityForRange(timeRange),
         timeZone,
         includeSubagent: true,
-      });
+      }), JSON.stringify([timeRange, timeZone]));
       if (requestId !== requestIdRef.current) return;
       setStats(result);
       setStatsRange(timeRange);
       hasLoadedRef.current = true;
     } catch (error) {
       if (requestId !== requestIdRef.current) return;
-      setStats(null);
+      if (!keepContent || error instanceof TokenUsageStatisticsUnavailableError) setStats(null);
+      if (error instanceof TokenUsageStatisticsUnavailableError) {
+        hasLoadedRef.current = false;
+        usageSnapshot.invalidate();
+      }
       setMessage(error instanceof TokenUsageStatisticsUnavailableError
         ? { type: 'info', text: t('unsupported') }
         : { type: 'error', text: t('loadFailed') });
@@ -423,7 +434,10 @@ const UsageStatisticsSettingsPage: React.FC = () => {
     }
   }, [timeRange, timeZone, t]);
 
-  useEffect(() => { void load(); }, [load]);
+  useEffect(() => {
+    void load();
+    return () => { requestIdRef.current += 1; };
+  }, [load]);
 
   const visibleStats = statsRange === timeRange ? stats : null;
   const empty = visibleStats !== null && visibleStats.totalRequests === 0;
@@ -468,7 +482,7 @@ const UsageStatisticsSettingsPage: React.FC = () => {
             </ConfigPageRow>
             <ConfigMessage className="openbitfun-usage-stats__message" message={message} />
             {loading ? (
-              <ConfigLoadingState label={t('loading')} />
+              <ConfigLoadingState label={t('loading')} variant="statistics" />
             ) : empty ? (
               <div data-openbitfun-component="usage-statistics-config" data-openbitfun-part="empty">
                 <Empty
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
index 789cee7ba2..63643d782b 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.test.tsx
@@ -9,7 +9,7 @@ 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('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: { getConfig: mocks.get, updateConfig: mocks.update } }));
+vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: { hasCachedConfig: () => false, getCachedConfig: () => undefined, 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('../../../../../infrastructure/config/components/common', () => {
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
index 0e158c08f2..5b7f46b699 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 
 
 import '@/app/scenes/settings/pages/development/EditorSettingsPage.scss';
@@ -249,9 +250,10 @@ const EditorSettingsPage: React.FC = () => {
   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 seed = useConfigSeed(['editor']);
+  const [config, setConfig] = useState<EditorConfigType>(() => ({ ...DEFAULT_EDITOR_CONFIG, ...convertToCamelCase(seed.get('editor', {}) ?? {}) }));
+  const [isLoading, setIsLoading] = useState(!seed.loaded);
+  const [supportsIndentDetection, setSupportsIndentDetection] = useState(typeof seed.get<Record<string, unknown> | null>('editor', null)?.detect_indentation === 'boolean');
   const [loadFailed, setLoadFailed] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [statusMessage, setStatusMessage] = useState<{ type: 'success' | 'error' | 'warning'; text: string } | null>(null);
@@ -272,7 +274,7 @@ const EditorSettingsPage: React.FC = () => {
 
   const loadConfig = useCallback(async () => {
     try {
-      setIsLoading(true);
+      setIsLoading(!seed.loaded);
       setLoadFailed(false);
       const backendConfig = await configManager.getConfig<Record<string, any>>('editor');
       if (backendConfig) {
@@ -292,8 +294,8 @@ const EditorSettingsPage: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    loadConfig();
-  }, [loadConfig]);
+    if (!seed.loaded) void loadConfig();
+  }, [loadConfig, seed.loaded]);
 
 
   const doSave = useCallback((
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
index 451d6989c9..5bcb893ee1 100644
--- 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
@@ -6,7 +6,7 @@ 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 },
+  aiExperienceConfigService: { getCachedSettings: () => null, 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 }) }));
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
index eca3a5cf48..bc9307a2ed 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
@@ -13,15 +13,16 @@ const COMMIT_COAUTHOR_ACCOUNT = `@${new URL('https://github.com/bitfun-ai').path
 export default function GitCommitSettingsSection() {
   const { t } = useTranslation('settings/quick-actions');
   const notification = useNotification();
-  const [loading, setLoading] = useState(true);
+  const [cachedSettings] = useState(() => aiExperienceConfigService.getCachedSettings());
+  const [loading, setLoading] = useState(!cachedSettings);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [commitCoauthorEnabled, setCommitCoauthorEnabled] = useState<boolean | undefined>();
+  const [commitCoauthorEnabled, setCommitCoauthorEnabled] = useState<boolean | undefined>(cachedSettings?.enable_git_commit_coauthor);
   const saveInFlight = useRef(false);
   const sectionAnchor = useSettingsSectionAnchor('git', !loading);
 
   const load = useCallback(async () => {
-    setLoading(true);
+    setLoading(!cachedSettings);
     setLoadFailed(false);
     try {
       const settings = await aiExperienceConfigService.getSettingsAsync({ forceRefresh: true, requireLoaded: true });
@@ -33,7 +34,7 @@ export default function GitCommitSettingsSection() {
       setLoading(false);
     }
   }, []);
-  useEffect(() => { void load(); }, [load]);
+  useEffect(() => { if (!cachedSettings) void load(); }, [load, cachedSettings]);
 
   const handleCommitCoauthorToggle = async (enabled: boolean) => {
     if (saveInFlight.current || commitCoauthorEnabled === undefined) return;
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
index 258bf69d83..89ed184f68 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
@@ -1,3 +1,5 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
 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';
@@ -8,9 +10,11 @@ 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SettingsPage } from '../shared/SettingsPage';
+const shellInventory = createSettingsReadCache<ShellInfo[]>();
+
 const log = createLogger('TerminalSettingsPage');
 
 const AUTO_DETECT_SHELL_VALUE = '__auto_detect_shell__';
@@ -21,9 +25,13 @@ type TerminalShellOption = ComboboxOption & {
 
 function TerminalSection() {
   const { t } = useTranslation('settings/application');
-  const [defaultShell, setDefaultShell] = useState<string>('');
-  const [availableShells, setAvailableShells] = useState<ShellInfo[]>([]);
-  const [loading, setLoading] = useState(true);
+  const seed = useConfigSeed(['terminal']);
+  const [cachedRuntime] = useState(() => shellInventory.peek());
+  const editRevision = useRef(0);
+  const hasLoaded = useRef(seed.loaded && cachedRuntime !== undefined);
+  const [defaultShell, setDefaultShell] = useState<string>(seed.get<TerminalSettings | null>('terminal', null)?.default_shell ?? '');
+  const [availableShells, setAvailableShells] = useState<ShellInfo[]>((cachedRuntime ?? []).filter(shell => shell.available));
+  const [loading, setLoading] = useState(!hasLoaded.current);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
@@ -34,22 +42,25 @@ function TerminalSection() {
   }, []);
 
   const loadData = useCallback(async () => {
+    const revision = editRevision.current;
     try {
-      setLoading(true);
+      setLoading(!hasLoaded.current);
       setLoadFailed(false);
 
       const [terminalConfig, shells] = await Promise.all([
         configManager.getConfig<TerminalSettings>('terminal'),
-        getTerminalService().getAvailableShells(),
+        shellInventory.read(() => getTerminalService().getAvailableShells()),
       ]);
 
-      setDefaultShell(terminalConfig?.default_shell || '');
+      if (revision === editRevision.current) setDefaultShell(terminalConfig?.default_shell || '');
 
       const availableOnly = shells.filter((s) => s.available);
       setAvailableShells(availableOnly);
+      hasLoaded.current = true;
     } catch (error) {
       log.error('Failed to load terminal config data', error);
       setLoadFailed(true);
+      if (hasLoaded.current) setMessage({ type: 'error', text: t('terminal.messages.loadFailed') });
     } finally {
       setLoading(false);
     }
@@ -61,6 +72,7 @@ function TerminalSection() {
 
   const handleShellChange = useCallback(
     async (value: string) => {
+      editRevision.current += 1;
       const previous = defaultShell;
       try {
         setSaving(true);
@@ -68,7 +80,6 @@ function TerminalSection() {
 
         await configManager.setConfig('terminal.default_shell', value);
 
-        configManager.clearCache();
 
         showMessage('success', t('terminal.messages.updated'));
       } catch (error) {
@@ -108,7 +119,7 @@ function TerminalSection() {
     return <ConfigLoadingState label={t('terminal.messages.loading')} />;
   }
 
-  if (loadFailed) {
+  if (loadFailed && !hasLoaded.current) {
     return (
       <ConfigRetryState
         message={t('terminal.messages.loadFailed')}
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
index 54ad6cbefb..69b945968d 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorkspaceSearchSection.tsx
@@ -1,4 +1,4 @@
-import { ConfigLoadingState, ConfigPageRow, ConfigPageSection, ConfigRetryState } from '@/infrastructure/config/components/common';
+import { ConfigLoadingState, ConfigMessage, 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';
@@ -37,12 +37,15 @@ function WorkspaceSearchSettings() {
 
   return (
     <ConfigPageSection id={sectionAnchor} title={t('features.workspaceSearch.title')} description={t('features.workspaceSearch.subtitle')}>
-      {isLoading ? <ConfigLoadingState label={t('loading.text')} /> : error || !settings ? (
+      {isLoading ? <ConfigLoadingState label={t('loading.text')} /> : !settings ? (
         <ConfigRetryState message={t('loading.failed')} retryLabel={t('loading.retry')} onRetry={() => void reload()} />
       ) : (
+        <>
+        {error && <ConfigMessage message={{ type: 'error', text: t('loading.failed') }} />}
         <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>
   );
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
index 575ebd9c69..75af24818f 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.test.tsx
@@ -24,6 +24,15 @@ const translateMock = vi.hoisted(() => vi.fn(
   },
 ));
 
+vi.mock('@/infrastructure/config/services/ConfigManager', () => ({
+  configManager: {
+    hasCachedConfig: () => false,
+    getCachedConfig: () => undefined,
+    getOptionalConfig: getConfigMock,
+    setConfig: setConfigMock,
+  },
+}));
+
 vi.mock('@/infrastructure/api', () => ({
   configAPI: {
     getConfig: getConfigMock,
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
index a80c66ec72..0efa853ab3 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
@@ -1,7 +1,9 @@
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import '@/app/scenes/settings/pages/development/WorktreeSettingsSection.scss';
 import { openAgentCompanionSession } from '@/app/services/openAgentCompanionSession';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
-import { configAPI, worktreeAPI } from '@/infrastructure/api';
+import { worktreeAPI } from '@/infrastructure/api';
 import { resolveLegacySessionWorkspace } from '@/infrastructure/api/service-api/legacyWorkspaceCompatibility';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import type {
@@ -152,9 +154,10 @@ function waitFor(ms: number): Promise<void> {
 
 const WorktreeSettingsSection: React.FC = () => {
   const { t } = useI18n('worktrees');
-  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
-  const [trustedSettings, setTrustedSettings] = useState<WorktreeSettings | null>(null);
-  const [settingsLoading, setSettingsLoading] = useState(true);
+  const seed = useConfigSeed(['app.worktrees']);
+  const [settings, setSettings] = useState(() => normalizeSettings(seed.get('app.worktrees', DEFAULT_SETTINGS)));
+  const [trustedSettings, setTrustedSettings] = useState<WorktreeSettings | null>(seed.loaded ? settings : null);
+  const [settingsLoading, setSettingsLoading] = useState(!seed.loaded);
   const [saving, setSaving] = useState(false);
   const [settingsMessage, setSettingsMessage] = useState<PageMessage | null>(null);
   const [projects, setProjects] = useState<WorktreeProjectSummary[]>([]);
@@ -178,9 +181,7 @@ const WorktreeSettingsSection: React.FC = () => {
     setSettingsLoading(true);
     setSettingsMessage(null);
     try {
-      const configured = await configAPI.getConfig('app.worktrees', {
-        skipRetryOnNotFound: true,
-      });
+      const configured = await configManager.getOptionalConfig('app.worktrees');
       const nextSettings = normalizeSettings(configured);
       setSettings(nextSettings);
       setTrustedSettings(nextSettings);
@@ -257,7 +258,7 @@ const WorktreeSettingsSection: React.FC = () => {
   }, [commitProjectsLayoutChange, t]);
 
   useEffect(() => {
-    void loadSettings();
+    if (!seed.loaded) void loadSettings();
     void loadProjects();
     return worktreeAPI.onChanged(() => {
       if (worktreeMutationInFlightRef.current) {
@@ -301,7 +302,7 @@ const WorktreeSettingsSection: React.FC = () => {
         branchPrefix: settings.branchPrefix.trim(),
         autoDeleteLimit: Math.round(settings.autoDeleteLimit),
       };
-      await configAPI.setConfig('app.worktrees', normalized);
+      await configManager.setConfig('app.worktrees', normalized);
       setSettings(normalized);
       setTrustedSettings(normalized);
       setSettingsMessage({ type: 'success', text: t('settings.saved') });
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
index 8b27ad25c0..48251f4ffa 100644
--- 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
@@ -49,7 +49,7 @@ describe('Runtime settings information architecture', () => {
     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 hasLoadedPageDataRef = useRef(Boolean(cachedSettings && cachedPets));');
     expect(source).toContain('const reloadCompanionPets = useCallback(async () => {');
     expect(source).toContain("if (!isActive) return;");
     expect(source.match(/await reloadCompanionPets\(\);/g)).toHaveLength(2);
diff --git a/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
index dbabc3cec9..3d8ad790f2 100644
--- a/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/shared/RuntimeSettings.test.tsx
@@ -21,11 +21,11 @@ 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('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: {
+vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({ configManager: { hasCachedConfig: () => false, getCachedConfig: () => undefined,
   getConfig: mocks.getConfig, getOptionalConfig: async () => true, setConfig: mocks.setConfig,
 } }));
 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/AIExperienceConfigService', () => ({ aiExperienceConfigService: { getCachedSettings: () => null, 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')>(),
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
index 55f5d47dd8..9db40bd88c 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.test.tsx
@@ -95,7 +95,7 @@ vi.mock('@/shared/notification-system', () => ({
 }));
 
 vi.mock('../../../../../infrastructure/config/services/ConfigManager', () => ({
-  configManager: { getConfig: getConfigMock, setConfig: setConfigMock },
+  configManager: { hasCachedConfig: () => false, getCachedConfig: () => undefined, getConfig: getConfigMock, setConfig: setConfigMock },
 }));
 
 vi.mock('@/infrastructure/api/service-api/ExternalHooksAPI', () => ({
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
index 6ba29c49c8..2d50e7c3e0 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
@@ -1,3 +1,4 @@
+import { useConfigSeed } from '@/infrastructure/config/hooks/useConfigSeed';
 import {
   externalHooksAPI,
   type ExternalHookImportMutation,
@@ -66,9 +67,10 @@ const HooksSettingsSection: React.FC = () => {
   const remoteWorkspace = workspace?.workspaceKind === WorkspaceKind.Remote
     || Boolean(workspace?.connectionId);
 
-  const [loading, setLoading] = useState(true);
+  const seed = useConfigSeed(['app.hooks']);
+  const [loading, setLoading] = useState(!seed.loaded);
   const [configLoadFailed, setConfigLoadFailed] = useState(false);
-  const [config, setConfig] = useState<AgentHooksConfigShape>(DEFAULT_HOOKS_CONFIG);
+  const [config, setConfig] = useState<AgentHooksConfigShape>(() => normalizeHooksConfig(seed.get('app.hooks', DEFAULT_HOOKS_CONFIG)));
   const [savingKey, setSavingKey] = useState<keyof AgentHooksConfigShape | null>(null);
   const [importSnapshot, setImportSnapshot] = useState<ExternalHookImportSnapshot | null>(null);
   const [importLoading, setImportLoading] = useState(false);
@@ -83,11 +85,13 @@ const HooksSettingsSection: React.FC = () => {
   >(null);
   const [projectHooksEnableConfirmOpen, setProjectHooksEnableConfirmOpen] = useState(false);
   const requestSequence = useRef(0);
+  const configEditRevision = useRef(0);
   const mountedRef = useRef(true);
 
   const loadData = useCallback(async () => {
     const sequence = ++requestSequence.current;
-    setLoading(true);
+    const editRevision = configEditRevision.current;
+    setLoading(!seed.loaded);
     setConfigLoadFailed(false);
     setImportError(null);
     const [configResult, importResult] = await Promise.allSettled([
@@ -98,7 +102,7 @@ const HooksSettingsSection: React.FC = () => {
     ]);
     if (!mountedRef.current || sequence !== requestSequence.current) return;
     if (configResult.status === 'fulfilled') {
-      setConfig(normalizeHooksConfig(configResult.value));
+      if (editRevision === configEditRevision.current) setConfig(normalizeHooksConfig(configResult.value));
     } else {
       log.error('Failed to load hooks config', configResult.reason);
       setConfigLoadFailed(true);
@@ -151,7 +155,8 @@ const HooksSettingsSection: React.FC = () => {
       const previous = config;
       const next = { ...config, [key]: value };
       setSavingKey(key);
-      setConfig(next);
+      configEditRevision.current += 1;
+    setConfig(next);
       try {
         await configManager.setConfig('app.hooks', next);
         if (!mountedRef.current) return;
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
index e9c54543c5..5756881cda 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
@@ -264,10 +264,11 @@ const QuickActionsSettingsSection: React.FC = () => {
   const { t } = useTranslation('settings/quick-actions');
   const notification = useNotification();
 
-  const [loading, setLoading] = useState(true);
+  const [cachedSettings] = useState(() => aiExperienceConfigService.getCachedSettings());
+  const [loading, setLoading] = useState(!cachedSettings);
   const [loadFailed, setLoadFailed] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [actions, setActions] = useState<QuickAction[]>([]);
+  const [actions, setActions] = useState<QuickAction[]>(cachedSettings?.quick_actions ?? []);
   const saveQueueRef = useRef<Promise<void>>(Promise.resolve());
   const pendingSaveCountRef = useRef(0);
 
@@ -277,7 +278,7 @@ const QuickActionsSettingsSection: React.FC = () => {
   const isModalOpen = modalTarget !== undefined;
 
   const load = useCallback(async () => {
-    setLoading(true);
+    setLoading(!cachedSettings);
     setLoadFailed(false);
     try {
       const settings = await aiExperienceConfigService.getSettingsAsync({ forceRefresh: true, requireLoaded: true });
@@ -291,7 +292,7 @@ const QuickActionsSettingsSection: React.FC = () => {
     }
   }, []);
 
-  useEffect(() => { void load(); }, [load]);
+  useEffect(() => { if (!cachedSettings) void load(); }, [load, cachedSettings]);
 
   const persistSettings = useCallback((patch: AIExperienceSettingsPatch, onSaved: () => void): Promise<boolean> => {
     if (pendingSaveCountRef.current > 0) {
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
index 851a95e214..902cde2db9 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/WebSearchSettingsPage.tsx
@@ -387,7 +387,12 @@ const WebSearchSettingsPage: React.FC = () => {
   }, [notifyError, notifySuccess, t]);
 
   if (loading) {
-    return <ConfigLoadingState label={t('messages.loading')} />;
+    return (
+      <ConfigPageLayout>
+        <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
+        <ConfigPageContent><ConfigLoadingState label={t('messages.loading')} rows={5} /></ConfigPageContent>
+      </ConfigPageLayout>
+    );
   }
 
   if (loadFailed) {
diff --git a/src/web-ui/src/app/scenes/settings/settingsDataPreload.ts b/src/web-ui/src/app/scenes/settings/settingsDataPreload.ts
new file mode 100644
index 0000000000..194fbef8a0
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/settingsDataPreload.ts
@@ -0,0 +1,36 @@
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
+import type { SettingsPageId } from './settingsTypes';
+
+// Read-only configuration owned by these destinations. Runtime probes and secrets
+// remain with their page owners; hovering must never start a service or a scan.
+const CONFIG_PATHS: Partial<Record<SettingsPageId, readonly string[]>> = {
+  'application.general': ['app.close_button_behavior', 'app.notifications.dialog_completion_notify', 'app.notifications.permission_request_notify', 'app.notifications.enable_startup_tips'],
+  'application.pet': ['app.ai_experience'],
+  'application.input': ['app.ai_experience', 'app.flow_chat.auto_show_selection_toolbar'],
+  'ai.session-memory': ['app.flow_chat', 'app.ai_experience', 'ai.models', 'ai.task_models', 'memories'],
+  'ai.execution': ['ai.agent_model_defaults.subagents.default', 'ai.models', 'ai.enable_deferred_tool_loading', 'ai.subagent_max_concurrency', 'ai.swarm_max_concurrency', 'ai.tool_execution_timeout_secs', 'ai.subagent_batch_execution_policy', 'ai.user_question_timeout_secs'],
+  'ai.permissions': ['tool_permissions', 'app.flow_chat.show_permission_mode_control'],
+  'development.editor': ['editor'],
+  'development.workspace': ['app.ai_experience', 'app.worktrees'],
+  'development.terminal': ['terminal'],
+  'tools.automation': ['app.ai_experience', 'app.hooks'],
+  'tools.desktop-control': ['ai.computer_use_enabled', 'ai.browser_control_preferred_browser', 'ai.browser_control_auto_connect_on_startup'],
+  'data.diagnostics': ['app.logging.level', 'app.logging.include_sensitive_diagnostics'],
+};
+
+const OPTIONAL_PATHS = new Set([
+  ...(CONFIG_PATHS['application.general'] ?? []),
+  'app.flow_chat.auto_show_selection_toolbar',
+  'app.flow_chat.show_permission_mode_control',
+  'ai.user_question_timeout_secs',
+  'app.worktrees',
+]);
+
+export async function preloadSettingsData(pageId: SettingsPageId): Promise<void> {
+  await Promise.allSettled((CONFIG_PATHS[pageId] ?? []).map(path => {
+    if (configManager.hasCachedConfig(path)) return;
+    return OPTIONAL_PATHS.has(path)
+      ? configManager.getOptionalConfig(path)
+      : configManager.getConfig(path);
+  }));
+}
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 0bf83b5f84..e77d20a92f 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
@@ -1,16 +1,20 @@
 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 { SETTINGS_CATEGORIES, SETTINGS_PAGE_MANIFESTS, getSettingsPageManifest, isSettingsPageId, preloadSettingsPage, isSettingsPageReady } from './settingsRegistry';
 import { useSettingsStore } from './settingsStore';
+import { i18nService } from '@/infrastructure/i18n/core/I18nService';
 import migrations from './settingsDestinationMigrations.json';
 import type { SettingsDestinationInput } from './settingsDestination';
 
+vi.mock('./settingsDataPreload', () => ({ preloadSettingsData: vi.fn(async () => undefined) }));
+
 vi.mock('@/infrastructure/i18n/core/I18nService', () => ({
   i18nService: { loadNamespace: vi.fn(async () => undefined) },
 }));
 
 afterEach(() => {
+  vi.restoreAllMocks();
   resetSettingsDraftRegistryForTests();
   useSettingsStore.setState(useSettingsStore.getInitialState());
 });
@@ -122,3 +126,29 @@ describe('settings information architecture', () => {
     expect(discard).not.toHaveBeenCalled();
   });
 });
+
+
+describe('settings page preparation', () => {
+  it('shares preparation and resolves warm pages without suspending through React.lazy', async () => {
+    const page = getSettingsPageManifest('application.appearance');
+    const component = () => null;
+    const load = vi.spyOn(page, 'load').mockResolvedValue({ default: component });
+    const first = preloadSettingsPage(page.id);
+    expect(preloadSettingsPage(page.id)).toBe(first);
+    await first;
+    expect(isSettingsPageReady(page.id)).toBe(true);
+    expect(page.resolvedComponent).toBe(component);
+    await preloadSettingsPage(page.id);
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps namespace failures retryable instead of marking the destination ready', async () => {
+    const page = getSettingsPageManifest('application.general');
+    vi.spyOn(page, 'load').mockResolvedValue({ default: () => null });
+    vi.mocked(i18nService.loadNamespace).mockRejectedValueOnce(new Error('offline'));
+    await expect(preloadSettingsPage(page.id)).rejects.toThrow('offline');
+    expect(isSettingsPageReady(page.id)).toBe(false);
+    await preloadSettingsPage(page.id);
+    expect(isSettingsPageReady(page.id)).toBe(true);
+  });
+});
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
index 357ab248bc..c4e72c4bc9 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
@@ -1,4 +1,5 @@
 import type { I18nNamespace } from '@/infrastructure/i18n/types';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
 import { lazyWithRecovery, type RecoverableLazyComponent } from '@/shared/utils/lazyWithRecovery';
 import type { ComponentType } from 'react';
 import type {
@@ -42,6 +43,8 @@ export interface SettingsPageManifest {
   sections?: readonly SettingsSectionManifest[];
   load: () => Promise<SettingsPageModule>;
   component: RecoverableLazyComponent<ComponentType<SettingsPageProps>>;
+  /** Filled by preload so a warm destination does not suspend on React.lazy's first render. */
+  resolvedComponent?: ComponentType<SettingsPageProps>;
 }
 
 type SettingsPageDefinition = Omit<SettingsPageManifest, 'component'>;
@@ -459,6 +462,7 @@ export const DEFAULT_SETTINGS_PAGE_ID: SettingsPageId = 'application.general';
 
 const PAGE_BY_ID = new Map(SETTINGS_PAGE_MANIFESTS.map((page) => [page.id, page]));
 const readyPages = new Set<SettingsPageId>();
+const pendingPages = new Map<SettingsPageId, Promise<void>>();
 
 export function getSettingsPageManifest(pageId: SettingsPageId): SettingsPageManifest {
   return PAGE_BY_ID.get(pageId) ?? PAGE_BY_ID.get(DEFAULT_SETTINGS_PAGE_ID)!;
@@ -474,16 +478,36 @@ 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)));
+  await Promise.all(namespaces.map((namespace) => i18nService.loadNamespace(namespace)));
 }
 
 export function preloadSettingsShell(): Promise<void> {
   return preloadNamespaces(['settings']);
 }
 
-export async function preloadSettingsPage(pageId: SettingsPageId): Promise<void> {
-  if (readyPages.has(pageId)) return;
+export function preloadSettingsPage(pageId: SettingsPageId): Promise<void> {
+  const scope = getActiveSurfaceScope();
+  const prefetchData = () => {
+    void import('./settingsDataPreload').then(({ preloadSettingsData }) => {
+      if (scope.isCurrent()) return preloadSettingsData(pageId);
+    }).catch(() => undefined);
+  };
+  if (readyPages.has(pageId)) {
+    prefetchData();
+    return Promise.resolve();
+  }
+  const pending = pendingPages.get(pageId);
+  if (pending) return pending;
   const page = getSettingsPageManifest(pageId);
-  await Promise.all([page.load(), preloadNamespaces(page.namespaces)]);
-  readyPages.add(pageId);
+  const namespaces = preloadNamespaces(['settings', ...page.namespaces]);
+  // Legacy configuration projections can use translated labels while normalizing.
+  void namespaces.then(prefetchData).catch(() => undefined);
+  const request = Promise.all([page.load(), namespaces])
+    .then(([module]) => {
+      page.resolvedComponent = module.default;
+      readyPages.add(pageId);
+    })
+    .finally(() => { pendingPages.delete(pageId); });
+  pendingPages.set(pageId, request);
+  return request;
 }
diff --git a/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.test.tsx b/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.test.tsx
new file mode 100644
index 0000000000..2d066b8bb6
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.test.tsx
@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+import React, { act, useRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SettingsPageId } from './settingsTypes';
+import { useSettingsScrollRestoration } from './useSettingsScrollRestoration';
+
+function Page({ pageId, epoch, section = false, ready = true }: {
+  pageId: SettingsPageId; epoch: number; section?: boolean; ready?: boolean;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  useSettingsScrollRestoration(root, pageId, epoch, ready, section ? 'hooks' : null, 0);
+  return <div ref={root}><div key={pageId} className="openbitfun-config-page-layout"><div /></div></div>;
+}
+
+describe('settings scroll restoration', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let epoch = 0;
+  let resize: () => void;
+  const viewport = () => container.querySelector<HTMLElement>('.openbitfun-config-page-layout')!;
+  const render = (pageId: SettingsPageId, section = false, ready = true) => act(() => {
+    root.render(<Page pageId={pageId} epoch={epoch} section={section} ready={ready} />);
+  });
+  beforeEach(() => {
+    epoch += 1;
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: () => void) { resize = callback; }
+      observe() {}
+      disconnect() {}
+    });
+    container = document.createElement('div');
+    root = createRoot(container);
+  });
+  afterEach(() => { act(() => root.unmount()); vi.unstubAllGlobals(); });
+
+  it('restores each page after loading and releases restoration as soon as the user scrolls', () => {
+    render('application.general');
+    viewport().dispatchEvent(new Event('wheel', { bubbles: true }));
+    viewport().scrollTop = 240;
+    viewport().dispatchEvent(new Event('scroll'));
+    render('tools.automation');
+    expect(viewport().scrollTop).toBe(0);
+    render('application.general', false, false);
+    expect(viewport().scrollTop).toBe(0);
+    render('application.general');
+    expect(viewport().scrollTop).toBe(240);
+    viewport().scrollTop = 0;
+    resize();
+    expect(viewport().scrollTop).toBe(240);
+    viewport().dispatchEvent(new Event('wheel', { bubbles: true }));
+    viewport().scrollTop = 70;
+    resize();
+    expect(viewport().scrollTop).toBe(70);
+  });
+
+  it('lets section links own scrolling and clears positions when the device activation changes', () => {
+    render('tools.automation');
+    viewport().dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    viewport().scrollTop = 240;
+    viewport().dispatchEvent(new Event('scroll'));
+    render('application.general');
+    render('tools.automation', true);
+    expect(viewport().scrollTop).toBe(0);
+    viewport().scrollTop = 90;
+    resize();
+    expect(viewport().scrollTop).toBe(90);
+    epoch += 1;
+    render('tools.automation');
+    expect(viewport().scrollTop).toBe(0);
+  });
+});
diff --git a/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.ts b/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.ts
new file mode 100644
index 0000000000..63f9a6516b
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/useSettingsScrollRestoration.ts
@@ -0,0 +1,61 @@
+import { useLayoutEffect, type RefObject } from 'react';
+import type { SettingsPageId, SettingsSectionId } from './settingsTypes';
+
+// Presentation only, bounded by the settings destinations in the current activation.
+let scrollEpoch: number | undefined;
+const scrollPositions = new Map<SettingsPageId, number>();
+
+export function useSettingsScrollRestoration(
+  root: RefObject<HTMLDivElement>,
+  pageId: SettingsPageId,
+  epoch: number,
+  ready: boolean,
+  sectionId: SettingsSectionId | null,
+  requestId: number,
+) {
+  useLayoutEffect(() => {
+    if (scrollEpoch !== epoch) {
+      scrollEpoch = epoch;
+      scrollPositions.clear();
+    }
+    if (!ready || !root.current) return;
+    const container = root.current;
+    let viewport: HTMLElement | null = null;
+    let following = sectionId === null;
+    const saved = scrollPositions.get(pageId) ?? 0;
+    const restore = () => {
+      if (following && viewport) viewport.scrollTop = saved;
+    };
+    const stop = () => { following = false; };
+    const save = () => {
+      if (viewport && scrollEpoch === epoch && !following) {
+        scrollPositions.set(pageId, viewport.scrollTop);
+      }
+    };
+    const events = ['wheel', 'pointerdown', 'touchstart', 'keydown'] as const;
+    const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(restore);
+    const attach = () => {
+      const next = container.querySelector<HTMLElement>('.openbitfun-config-page-layout');
+      if (!next || next.closest('[data-openbitfun-part="loading"]') || viewport === next) return;
+      viewport?.removeEventListener('scroll', save);
+      resize?.disconnect();
+      viewport = next;
+      viewport.addEventListener('scroll', save, { passive: true });
+      resize?.observe(viewport);
+      for (const child of viewport.children) resize?.observe(child);
+      restore();
+    };
+    const mutation = new MutationObserver(attach);
+    mutation.observe(container, { childList: true, subtree: true });
+    events.forEach(event => container.addEventListener(event, stop, { passive: true }));
+    attach();
+    return () => {
+      // Do not replace a saved offset with the clamped height of a still-loading page.
+      save();
+      viewport?.removeEventListener('scroll', save);
+      mutation.disconnect();
+      resize?.disconnect();
+      events.forEach(event => container.removeEventListener(event, stop));
+    };
+  }, [root, pageId, epoch, ready, sectionId, requestId]);
+}
diff --git a/src/web-ui/src/flow_chat/selection/FlowChatSelectionBar.test.tsx b/src/web-ui/src/flow_chat/selection/FlowChatSelectionBar.test.tsx
index 2f372b5cd4..54f26d18fc 100644
--- a/src/web-ui/src/flow_chat/selection/FlowChatSelectionBar.test.tsx
+++ b/src/web-ui/src/flow_chat/selection/FlowChatSelectionBar.test.tsx
@@ -20,6 +20,8 @@ const state = vi.hoisted(() => ({
   selectionIntent: vi.fn(),
 }));
 vi.mock('@/infrastructure/config/services/ConfigManager', () => ({ configManager: {
+  hasCachedConfig: () => false,
+  getCachedConfig: () => undefined,
   getOptionalConfig: state.getPreference,
   watch: (_path: string, callback: () => void) => {
     state.preferenceListeners.add(callback);
diff --git a/src/web-ui/src/infrastructure/api/service-api/MCPAPI.ts b/src/web-ui/src/infrastructure/api/service-api/MCPAPI.ts
index a7c3e4863e..0a5c0b13a5 100644
--- a/src/web-ui/src/infrastructure/api/service-api/MCPAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/MCPAPI.ts
@@ -1,8 +1,15 @@
  
 
 import { api } from './ApiClient';
-import { notifyMcpConfigChanged } from '@/infrastructure/mcp/configEvents';
+import { globalEventBus } from '@/infrastructure/event-bus';
+import { MCP_CONFIG_CHANGED, type MCPConfigChanged, notifyMcpConfigChanged } from '@/infrastructure/mcp/configEvents';
 import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { createSettingsReadCache } from '@/infrastructure/config/services/SettingsReadCache';
+
+const serverSnapshot = createSettingsReadCache<MCPServerInfo[]>();
+globalEventBus.on<MCPConfigChanged>(MCP_CONFIG_CHANGED, ({ surfaceId }) => {
+  if (surfaceId === getActiveSurfaceScope().surfaceId) serverSnapshot.invalidate();
+});
 
 function canonicalConfig(json: string): string {
   return JSON.stringify(JSON.parse(json), (_key, value) => {
@@ -286,6 +293,9 @@ export interface CancelMCPRemoteOAuthRequest {
 }
 
 export class MCPAPI {
+  static getCachedServers(): MCPServerInfo[] | undefined {
+    return serverSnapshot.peek();
+  }
 
   static async initializeServers(): Promise<void> {
     return api.invoke('initialize_mcp_servers');
@@ -298,7 +308,7 @@ export class MCPAPI {
 
    
   static async getServers(): Promise<MCPServerInfo[]> {
-    return api.invoke('get_mcp_servers');
+    return serverSnapshot.read(() => api.invoke('get_mcp_servers'));
   }
 
   static async listResources(request: ListMCPResourcesRequest): Promise<MCPResource[]> {
diff --git a/src/web-ui/src/infrastructure/config/AGENTS.md b/src/web-ui/src/infrastructure/config/AGENTS.md
index 22d1bb90a9..f78ad52237 100644
--- a/src/web-ui/src/infrastructure/config/AGENTS.md
+++ b/src/web-ui/src/infrastructure/config/AGENTS.md
@@ -16,6 +16,15 @@ Follow `src/web-ui/AGENTS.md` for shared frontend rules.
 
 ## Focused verification
 
+For loading states, warm snapshots, asynchronous reads, and device isolation:
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/scenes/settings src/infrastructure/config/components/common/ConfigLoadingState.test.tsx src/infrastructure/config/hooks/useConfigSeed.test.tsx src/infrastructure/config/hooks/useAIExperienceSettings.test.tsx src/infrastructure/config/hooks/useSelectionToolbarPreference.test.tsx src/infrastructure/config/services/ConfigManager.test.ts src/infrastructure/config/services/SettingsReadCache.test.ts src/infrastructure/config/services/AIExperienceConfigService.test.ts src/infrastructure/config/services/PermissionConfigService.test.ts
+```
+
+These tests simulate device activation and request ordering; they do not exercise
+an actual SSH, relay, peer host, or detached-dispatch connection.
+
 For settings selection sizing, run:
 
 ```bash
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.test.tsx b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.test.tsx
index 1494a8f3b5..a13c74e9ab 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.test.tsx
@@ -55,6 +55,7 @@ vi.mock('@/infrastructure/confirm-dialog', async () => {
 });
 vi.mock('../../api/service-api/MCPAPI', () => ({
   MCPAPI: {
+    getCachedServers: () => undefined,
     getServers: getServersMock,
     loadMCPJsonConfig: loadJsonConfigMock,
     saveMCPJsonConfig: saveJsonConfigMock,
@@ -116,6 +117,25 @@ describe('McpToolsConfig remote behavior', () => {
     vi.useRealTimers();
   });
 
+  it('keeps the JSON editor mounted and protects edits made while a refresh is pending', async () => {
+    peerState.active = false;
+    await act(async () => root.render(<McpToolsConfig />));
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="mcp-json-toggle"]')!.click());
+    const textarea = container.querySelector('textarea')!;
+    let finish!: (value: { jsonConfig: string; fingerprint: string }) => void;
+    loadJsonConfigMock.mockReturnValueOnce(new Promise(resolve => { finish = resolve; }));
+    await act(async () => globalEventBus.emit(MCP_CONFIG_CHANGED, { surfaceId: 'local' }));
+    expect(container.querySelector('textarea')).toBe(textarea);
+    const edited = '{"mcpServers":{"draft":{"command":"draft"}}}';
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, edited);
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await act(async () => finish({ jsonConfig: '{"mcpServers":{}}', fingerprint: 'late' }));
+    expect(container.querySelector('textarea')).toBe(textarea);
+    expect(textarea.value).toBe(edited);
+  });
+
   it('does not call desktop MCP management APIs during a remote connection', async () => {
     await act(async () => {
       root.render(<McpToolsConfig />);
@@ -446,6 +466,8 @@ describe('McpToolsConfig remote behavior', () => {
     }));
 
     await act(async () => root.render(<McpToolsConfig />));
+    expect(container.querySelector('[data-openbitfun-part="loadingState"][aria-busy="true"]')).not.toBeNull();
+    await act(async () => vi.advanceTimersByTimeAsync(200));
     expect(container.textContent).toContain('loading');
     await act(async () => resolveServers([server]));
     const card = container.querySelector('[data-testid="mcp-server-item"]');
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
index b5f8321d51..bc0c1f495b 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
@@ -30,6 +30,7 @@ import {
   ConfigPageContent,
   ConfigPageSection,
   ConfigCollectionItem,
+  ConfigLoadingState,
 } from './common';
 import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
@@ -198,15 +199,24 @@ const McpToolsConfig: React.FC = () => {
   const jsonLoadRequestIdRef = useRef(0);
   const serverLifecycleActionsRef = useRef(new Map<string, MCPServerLifecycleAction>());
   const capabilityRef = useRef({ available: desktopConfigAvailable, epoch: 0 });
-  const [servers, setServers] = useState<MCPServerInfo[]>([]);
+  const [cachedServers] = useState(() => desktopConfigAvailable ? MCPAPI.getCachedServers() : undefined);
+  const hasLoadedServersRef = useRef(cachedServers !== undefined);
+  const [servers, setServers] = useState<MCPServerInfo[]>(cachedServers ?? []);
   const [mcpLoading, setMcpLoading] = useState(true);
   const [serverLoadFailed, setServerLoadFailed] = useState(false);
   const [showJsonEditor, setShowJsonEditor] = useState(false);
   const [serverEditor, setServerEditor] = useState<McpEditorSession | null>(null);
-  const [jsonConfig, setJsonConfig] = useState('');
+  const [jsonConfig, setJsonConfigState] = useState('');
+  const jsonEditRevisionRef = useRef(0);
+  const setJsonConfig = useCallback<React.Dispatch<React.SetStateAction<string>>>((value) => {
+    jsonEditRevisionRef.current += 1;
+    setJsonConfigState(value);
+  }, []);
   const [jsonSavedConfig, setJsonSavedConfig] = useState('');
   const [jsonConfigFingerprint, setJsonConfigFingerprint] = useState('');
   const [jsonLoading, setJsonLoading] = useState(true);
+  const [jsonRefreshing, setJsonRefreshing] = useState(false);
+  const hasLoadedJsonRef = useRef(false);
   const [jsonLoadFailed, setJsonLoadFailed] = useState(false);
   const [mcpSaving, setMcpSaving] = useState(false);
   const mcpSavingRef = useRef(false);
@@ -231,7 +241,7 @@ const McpToolsConfig: React.FC = () => {
   const editableConfig = useMemo(() => {
     try { return parseMcpConfigDocument(jsonSavedConfig); } catch { return null; }
   }, [jsonSavedConfig]);
-  const canEditConfig = !jsonLoading && !jsonLoadFailed && !mcpSaving
+  const canEditConfig = !jsonLoading && !jsonRefreshing && !jsonLoadFailed && !mcpSaving
     && Boolean(jsonConfigFingerprint) && editableConfig !== null;
   const jsonSyntaxValid = (() => {
     if (!jsonConfig.trim()) return false;
@@ -297,13 +307,14 @@ const McpToolsConfig: React.FC = () => {
     const capabilityEpoch = currentCapabilityEpoch();
     if (capabilityEpoch === null) return false;
     const requestId = ++serverLoadRequestIdRef.current;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
     try {
       setMcpLoading(true);
       const serverList = await Promise.race([
         MCPAPI.getServers(),
-        new Promise<never>((_, reject) =>
-          setTimeout(() => reject(new Error('MCP servers load timed out')), LOAD_SERVERS_TIMEOUT_MS)
-        ),
+        new Promise<never>((_, reject) => {
+          timeout = setTimeout(() => reject(new Error('MCP servers load timed out')), LOAD_SERVERS_TIMEOUT_MS);
+        }),
       ]);
       if (
         requestId !== serverLoadRequestIdRef.current
@@ -312,6 +323,7 @@ const McpToolsConfig: React.FC = () => {
         return false;
       }
       setServers(serverList);
+      hasLoadedServersRef.current = true;
       setServerLoadFailed(false);
       return true;
     } catch (error) {
@@ -325,6 +337,7 @@ const McpToolsConfig: React.FC = () => {
       setServerLoadFailed(true);
       return false;
     } finally {
+      clearTimeout(timeout);
       if (
         requestId === serverLoadRequestIdRef.current
         && capabilityIsCurrent(capabilityEpoch)
@@ -338,7 +351,9 @@ const McpToolsConfig: React.FC = () => {
     const capabilityEpoch = currentCapabilityEpoch();
     if (capabilityEpoch === null) return false;
     const requestId = ++jsonLoadRequestIdRef.current;
-    setJsonLoading(true);
+    const editRevision = jsonEditRevisionRef.current;
+    setJsonLoading(!hasLoadedJsonRef.current);
+    setJsonRefreshing(true);
     setJsonLoadFailed(false);
     try {
       const config = await MCPAPI.loadMCPJsonConfig();
@@ -348,9 +363,11 @@ const McpToolsConfig: React.FC = () => {
       ) {
         return false;
       }
+      if (editRevision !== jsonEditRevisionRef.current) return false;
       setJsonConfig(config.jsonConfig);
       setJsonSavedConfig(config.jsonConfig);
       setJsonConfigFingerprint(config.fingerprint);
+      hasLoadedJsonRef.current = true;
       setJsonLoadFailed(false);
       return true;
     } catch (error) {
@@ -369,6 +386,7 @@ const McpToolsConfig: React.FC = () => {
         && capabilityIsCurrent(capabilityEpoch)
       ) {
         setJsonLoading(false);
+        setJsonRefreshing(false);
       }
     }
   }, [capabilityIsCurrent, currentCapabilityEpoch]);
@@ -453,11 +471,14 @@ const McpToolsConfig: React.FC = () => {
       serverLifecycleActionsRef.current.clear();
       setServerLifecycleActions({});
       setServers([]);
+      hasLoadedServersRef.current = false;
       setMcpLoading(false);
       setServerLoadFailed(false);
       setShowJsonEditor(false);
       setServerEditor(null);
       setJsonConfigFingerprint('');
+      hasLoadedJsonRef.current = false;
+      setJsonRefreshing(false);
       setJsonLoading(false);
       setJsonLoadFailed(false);
       setAuthDialogServer(null);
@@ -1531,9 +1552,7 @@ const McpToolsConfig: React.FC = () => {
           )}
 
           {desktopConfigAvailable && showJsonEditor && jsonLoading && (
-            <div className="openbitfun-collection-empty" data-openbitfun-component="mcp-tools-config" data-openbitfun-part="empty">
-              <p>{tMcp('loading')}</p>
-            </div>
+            <ConfigLoadingState label={tMcp('loading')} variant="list" />
           )}
 
           {desktopConfigAvailable && showJsonEditor && !jsonLoading && jsonLoadFailed && (
@@ -1542,6 +1561,7 @@ const McpToolsConfig: React.FC = () => {
               <Tooltip content={tMcp('actions.refresh')}>
                 <IconButton
                   size="sm"
+                  disabled={jsonRefreshing || jsonDirty}
                   onClick={() => void loadJsonConfig()}
                   aria-label={tMcp('actions.refresh')}
                   icon={<Icon name="refresh" size="md" aria-hidden="true" />}
@@ -1564,7 +1584,7 @@ const McpToolsConfig: React.FC = () => {
             </div>
           )}
 
-          {desktopConfigAvailable && showJsonEditor && !jsonLoading && !jsonLoadFailed && (
+          {desktopConfigAvailable && showJsonEditor && !jsonLoading && (!jsonLoadFailed || hasLoadedJsonRef.current) && (
             <div className="openbitfun-mcp-tools__json-editor" data-openbitfun-component="mcp-tools-config" data-openbitfun-part="jsonEditor">
               <div className="openbitfun-mcp-tools__json-editor-header" data-openbitfun-component="mcp-tools-config" data-openbitfun-part="jsonHeader">
                 <p className="openbitfun-mcp-tools__json-hint" data-openbitfun-component="mcp-tools-config" data-openbitfun-part="jsonHint">{tMcp('jsonEditor.hint1')}</p>
@@ -1611,7 +1631,7 @@ const McpToolsConfig: React.FC = () => {
                   variant="primary"
                   onClick={handleSaveJsonConfig}
                   loading={mcpSaving}
-                  disabled={mcpSaving || !jsonDirty || !jsonSyntaxValid || Boolean(jsonLintError)}
+                  disabled={mcpSaving || jsonRefreshing || jsonLoadFailed || !jsonDirty || !jsonSyntaxValid || Boolean(jsonLintError)}
                 >
                   {tMcp('actions.saveConfig')}
                 </Button>
@@ -1631,10 +1651,8 @@ const McpToolsConfig: React.FC = () => {
           )}
 
           {/* Polling updates existing cards in place; only an empty list needs a loading placeholder. */}
-          {desktopConfigAvailable && !showJsonEditor && mcpLoading && servers.length === 0 && (
-            <div className="openbitfun-collection-empty" data-openbitfun-component="mcp-tools-config" data-openbitfun-part="empty">
-              <p>{tMcp('loading')}</p>
-            </div>
+          {desktopConfigAvailable && !showJsonEditor && mcpLoading && !hasLoadedServersRef.current && (
+            <ConfigLoadingState label={tMcp('loading')} variant="list" />
           )}
 
           {desktopConfigAvailable && !showJsonEditor && !mcpLoading
diff --git a/src/web-ui/src/infrastructure/config/components/UsageActivityHeatmap.tsx b/src/web-ui/src/infrastructure/config/components/UsageActivityHeatmap.tsx
index 39dfb48fd3..40b5dcf9bb 100644
--- a/src/web-ui/src/infrastructure/config/components/UsageActivityHeatmap.tsx
+++ b/src/web-ui/src/infrastructure/config/components/UsageActivityHeatmap.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createSettingsReadCache } from '../services/SettingsReadCache';
 import { Tooltip } from '@openbitfun/ui';
 import {
   TokenUsageStatisticsUnavailableError,
@@ -10,13 +11,16 @@ import { formatTokenCount } from '@/shared/utils/tokenUsageFormatting';
 import { ConfigLoadingState, ConfigMessage, ConfigPageSection } from './common';
 import { buildUsageActivity, usageActivityRequestRange } from './usageActivity';
 
+type ActivitySnapshot = { points: UsageTrendPoint[]; now: Date; timeZone: string };
+const activitySnapshot = createSettingsReadCache<ActivitySnapshot>();
+
 interface UsageActivityHeatmapProps {
   refreshKey: number;
 }
 
 export function UsageActivityHeatmap({ refreshKey }: UsageActivityHeatmapProps) {
   const { t, formatDate, formatNumber, resolvedTimeZone: timeZone } = useI18n('settings/usage');
-  const [data, setData] = useState<{ points: UsageTrendPoint[]; now: Date } | null>(null);
+  const [data, setData] = useState<ActivitySnapshot | null>(() => activitySnapshot.peek(timeZone) ?? null);
   const [message, setMessage] = useState<{ type: 'error' | 'info'; text: string } | null>(null);
   const [focusedDate, setFocusedDate] = useState<string | null>(null);
   const dayRefs = useRef(new Map<string, HTMLButtonElement>());
@@ -24,18 +28,25 @@ export function UsageActivityHeatmap({ refreshKey }: UsageActivityHeatmapProps)
   useEffect(() => {
     let cancelled = false;
     const now = new Date();
-    setData(null);
+    setData(current => current?.timeZone === timeZone ? current : activitySnapshot.peek(timeZone) ?? null);
     setMessage(null);
-    void tokenUsageStatisticsApi.getStatistics({
+    void activitySnapshot.read(async () => {
+      const result = await tokenUsageStatisticsApi.getStatistics({
       timeRange: 'custom',
       granularity: 'day',
       timeZone,
       includeSubagent: true,
       ...usageActivityRequestRange(timeZone, now),
-    }).then(result => {
-      if (!cancelled) setData({ points: result.trend, now });
+      });
+      return { points: result.trend, now, timeZone };
+    }, timeZone).then(result => {
+      if (!cancelled) setData(result);
     }).catch(error => {
       if (!cancelled) {
+        if (error instanceof TokenUsageStatisticsUnavailableError) {
+          activitySnapshot.invalidate();
+          setData(null);
+        }
         setMessage(error instanceof TokenUsageStatisticsUnavailableError
           ? { type: 'info', text: t('unsupported') }
           : { type: 'error', text: t('loadFailed') });
@@ -45,7 +56,7 @@ export function UsageActivityHeatmap({ refreshKey }: UsageActivityHeatmapProps)
   }, [refreshKey, timeZone, t]);
 
   const activity = useMemo(
-    () => data ? buildUsageActivity(data.points, timeZone, data.now) : null,
+    () => data?.timeZone === timeZone ? buildUsageActivity(data.points, timeZone, data.now) : null,
     [data, timeZone],
   );
   const visibleDays = activity?.days.filter(day => day.inRange) ?? [];
@@ -71,11 +82,10 @@ export function UsageActivityHeatmap({ refreshKey }: UsageActivityHeatmapProps)
       data-openbitfun-component="usage-statistics-config"
       data-openbitfun-part="activityPanel"
     >
-      {message ? (
-        <ConfigMessage className="openbitfun-usage-stats__activity-message" message={message} />
-      ) : !activity ? (
-        <ConfigLoadingState label={t('loading')} />
-      ) : (
+      {message && <ConfigMessage className="openbitfun-usage-stats__activity-message" message={message} />}
+      {!activity ? (message ? null : (
+        <ConfigLoadingState label={t('loading')} variant="statistics" rows={1} />
+      )) : (
         <div className="openbitfun-usage-stats__activity">
           <div
             className="openbitfun-usage-stats__activity-grid"
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.test.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.test.tsx
new file mode 100644
index 0000000000..af78126319
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.test.tsx
@@ -0,0 +1,37 @@
+// @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 { ConfigLoadingState } from './ConfigLoadingState';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('settings loading geometry', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  beforeEach(() => {
+    vi.useFakeTimers();
+    container = document.createElement('div');
+    root = createRoot(container);
+  });
+  afterEach(() => { act(() => root.unmount()); vi.useRealTimers(); });
+
+  it('reserves the requested rows immediately and only delays the announcement', () => {
+    act(() => root.render(<ConfigLoadingState label="Loading settings" rows={2} />));
+    const skeleton = container.querySelector('[aria-hidden="true"]');
+    expect(skeleton?.children).toHaveLength(2);
+    expect(container.querySelector('[aria-busy="true"]')).not.toBeNull();
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('');
+    act(() => vi.advanceTimersByTime(200));
+    expect(container.querySelector('[role="status"]')?.textContent).toContain('Loading settings');
+    expect(container.querySelector('[aria-hidden="true"]')).toBe(skeleton);
+  });
+
+  it('cancels delayed feedback when content becomes ready', () => {
+    act(() => root.render(<ConfigLoadingState label="Loading settings" variant="list" />));
+    act(() => root.render(<input aria-label="Setting" defaultValue="Loaded" />));
+    act(() => vi.runAllTimers());
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(container.querySelector('input')?.value).toBe('Loaded');
+  });
+});
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.tsx
index 6dbec41393..3bca0809dd 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.tsx
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigLoadingState.tsx
@@ -3,13 +3,8 @@ import { LoadingState } from '@openbitfun/ui';
 import './ConfigPageState.scss';
 
 /**
- * Grace period before a section admits it is loading.
- *
- * Config sections read their state through ConfigManager, which serves warm paths
- * from cache and cold ones over IPC. Painting the placeholder unconditionally means
- * a page full of 200px "loading" blocks appears and collapses within one or two
- * frames on the first open of a tab. Staying invisible for a beat lets fast reads
- * land silently; only genuinely slow ones surface a placeholder.
+ * Reserve content geometry immediately; delay only the loading announcement.
+ * Returning null during the grace period collapses surrounding settings sections.
  */
 const LOADING_VISIBLE_DELAY_MS = 200;
 
@@ -18,12 +13,16 @@ export interface ConfigLoadingStateProps {
   className?: string;
   /** Override the grace period; 0 paints immediately. */
   graceMs?: number;
+  variant?: 'form' | 'list' | 'statistics';
+  rows?: number;
 }
 
 export const ConfigLoadingState: React.FC<ConfigLoadingStateProps> = ({
   label,
   className = '',
   graceMs = LOADING_VISIBLE_DELAY_MS,
+  variant = 'form',
+  rows = 3,
 }) => {
   const [visible, setVisible] = useState(graceMs <= 0);
 
@@ -38,15 +37,26 @@ export const ConfigLoadingState: React.FC<ConfigLoadingStateProps> = ({
     return () => window.clearTimeout(timer);
   }, [graceMs]);
 
-  if (!visible) return null;
-
   return (
     <div
       className={['openbitfun-config-loading-state', className].filter(Boolean).join(' ')}
+      aria-busy="true"
+      aria-label={label}
+      data-loading-variant={variant}
       data-openbitfun-component="config"
       data-openbitfun-part="loadingState"
     >
-      <LoadingState size="sm">{label}</LoadingState>
+      <div className="openbitfun-config-loading-state__skeleton" aria-hidden="true">
+        {Array.from({ length: rows }, (_, index) => (
+          <div className="openbitfun-config-loading-state__row" key={index}>
+            <span className="openbitfun-config-loading-state__copy" />
+            <span className="openbitfun-config-loading-state__control" />
+          </div>
+        ))}
+      </div>
+      <div className="openbitfun-config-loading-state__status" role="status" aria-live="polite">
+        {visible ? <LoadingState size="sm">{label}</LoadingState> : null}
+      </div>
     </div>
   );
 };
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
index a7bad6f186..866af97d85 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
@@ -3,16 +3,15 @@
 
 .openbitfun-config-page-header {
   flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   padding: var(--openbitfun-space-5) 0 0;
   margin-bottom: 36px;
 }
 
 .openbitfun-config-page-header__inner {
-  width: min(
-    calc(100% - (2 * #{configLayout.$config-page-content-inline-padding})),
-    #{configLayout.$config-page-content-max-width}
-  );
-  margin-inline: auto;
+  @include configLayout.content-frame;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -74,30 +73,14 @@
 
 
 .openbitfun-config-page-header-divider {
+  @include configLayout.content-frame;
   flex-shrink: 0;
   height: 1px;
   background: var(--openbitfun-color-border-subtle);
-  width: min(
-    calc(100% - (2 * #{configLayout.$config-page-content-inline-padding})),
-    #{configLayout.$config-page-content-max-width}
-  );
   margin: var(--openbitfun-space-4) auto;
   display: none;
 }
 
-@container config-panel (max-width: 900px) {
-  .openbitfun-config-page-header__inner,
-  .openbitfun-config-page-header-divider {
-    width: min(
-      calc(100% - (2 * #{configLayout.$config-page-content-inline-padding})),
-      #{configLayout.$config-page-content-max-width}
-    );
-  }
-}
-
-
-
-
 @container config-panel (max-width: 520px) {
   .openbitfun-config-page-header {
     padding-top: var(--openbitfun-space-4);
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
index ccf4c66972..32c63db5bc 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -6,7 +6,12 @@
 .openbitfun-config-page-layout {
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   height: 100%;
+  /* Keep short, long, and loading pages centered on the same available width. */
+  scrollbar-gutter: stable both-edges;
   background: var(--openbitfun-color-surface-scene);
   color: var(--openbitfun-color-content-primary);
   font-family:var(--openbitfun-type-body-sm-font-family);
@@ -32,6 +37,9 @@
    * This ensures the flex layout positions the scroll-end spacer AFTER
    * the actual content, not at the flex-allocated truncated position. */
   flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   overflow: visible;
   /*
    * Page-specific class names are attached to this public wrapper. Keep its box
@@ -41,11 +49,7 @@
 }
 
 .openbitfun-config-page-content__inner {
-  width: min(
-    calc(100% - (2 * #{configLayout.$config-page-content-inline-padding})),
-    #{configLayout.$config-page-content-max-width}
-  );
-  margin-inline: auto;
+  @include configLayout.content-frame;
   display: flex;
   flex-direction: column;
   gap: var(--config-page-section-gap);
@@ -342,13 +346,6 @@
   .openbitfun-config-page-content {
     --config-page-section-gap: 36px;
   }
-
-  .openbitfun-config-page-content__inner {
-    width: min(
-      calc(100% - (2 * #{configLayout.$config-page-content-inline-padding})),
-      #{configLayout.$config-page-content-max-width}
-    );
-  }
 }
 
 @container config-panel (max-width: 520px) {
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
index f53b62b5ae..60540ba061 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
@@ -1,15 +1,59 @@
-@keyframes openbitfun-config-page-loading-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
 .openbitfun-config-loading-state {
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
+  width: 100%;
+  min-width: 0;
   color: var(--openbitfun-color-content-muted);
   font-size: var(--openbitfun-type-label-md-font-size);
+
+  &__skeleton {
+    display: grid;
+    gap: var(--openbitfun-space-4);
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--openbitfun-space-5);
+    min-height: 48px;
+  }
+
+  &__copy,
+  &__control {
+    display: block;
+    border-radius: var(--openbitfun-radius-md);
+    background: var(--openbitfun-color-action-quiet-hover);
+  }
+
+  &__copy {
+    width: 45%;
+    height: 16px;
+  }
+
+  &__control {
+    width: 28%;
+    height: 28px;
+  }
+
+  &__status {
+    display: flex;
+    justify-content: center;
+    min-height: 28px;
+    margin-top: var(--openbitfun-space-3);
+  }
+
+  &[data-loading-variant='list'] &__row {
+    min-height: 64px;
+  }
+
+  &[data-loading-variant='statistics'] &__row {
+    min-height: 96px;
+    align-items: flex-end;
+  }
+
+  &[data-loading-variant='statistics'] &__control {
+    height: 72px;
+  }
 }
 
 .openbitfun-config-message {
diff --git a/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss b/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
index 1c10db4eae..6e91c51a6c 100644
--- a/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
@@ -1,2 +1,13 @@
 $config-page-content-inline-padding: clamp(12px, 3vw, 20px);
 $config-page-content-max-width: 680px;
+
+// Headers, dividers, and content share one responsive frame on every page.
+@mixin content-frame {
+  box-sizing: border-box;
+  width: min(
+    calc(100% - (2 * #{$config-page-content-inline-padding})),
+    #{$config-page-content-max-width}
+  );
+  min-width: 0;
+  margin-inline: auto;
+}
diff --git a/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.test.tsx b/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.test.tsx
new file mode 100644
index 0000000000..93c5c92a23
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.test.tsx
@@ -0,0 +1,83 @@
+// @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 { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+import { useAIExperienceSettings } from './useAIExperienceSettings';
+
+const service = vi.hoisted(() => ({
+  cached: vi.fn(), read: vi.fn(), listeners: new Set<(value: unknown) => void>(),
+}));
+vi.mock('../services/AIExperienceConfigService', () => ({ aiExperienceConfigService: {
+  getCachedSettings: service.cached,
+  getSettingsAsync: service.read,
+  addChangeListener: (listener: (value: unknown) => void) => {
+    service.listeners.add(listener);
+    return () => service.listeners.delete(listener);
+  },
+} }));
+
+function deferred() {
+  let resolve!: (value: unknown) => void;
+  let reject!: (reason: Error) => void;
+  const promise = new Promise((done, fail) => { resolve = done; reject = fail; });
+  return { promise, resolve, reject };
+}
+function Preferences() {
+  const { settings, isLoading, isRefreshing, error } = useAIExperienceSettings();
+  return <div data-loading={isLoading} data-refreshing={isRefreshing} data-error={Boolean(error)}>
+    {settings ? String(settings.enable_agent_companion) : 'pending'}
+  </div>;
+}
+
+describe('AI settings refresh lifecycle', () => {
+  let root: Root;
+  let container: HTMLDivElement;
+  beforeEach(() => {
+    activateSurface('local');
+    service.cached.mockReset().mockReturnValue(null);
+    service.read.mockReset();
+    service.listeners.clear();
+    container = document.createElement('div');
+    root = createRoot(container);
+  });
+  afterEach(() => { act(() => root.unmount()); activateSurface('local'); });
+
+  it('shows warm content immediately and retains it after a failed refresh', async () => {
+    service.cached.mockReturnValue({ enable_agent_companion: false });
+    const read = deferred();
+    service.read.mockReturnValue(read.promise);
+    act(() => root.render(<Preferences />));
+    expect(container.textContent).toBe('false');
+    expect(container.firstElementChild?.getAttribute('data-loading')).toBe('false');
+    expect(container.firstElementChild?.getAttribute('data-refreshing')).toBe('true');
+    await act(async () => read.reject(new Error('offline')));
+    expect(container.textContent).toBe('false');
+    expect(container.firstElementChild?.getAttribute('data-error')).toBe('true');
+  });
+
+  it('does not overwrite a newer configuration notification with a late read', async () => {
+    const read = deferred();
+    service.read.mockReturnValue(read.promise);
+    act(() => root.render(<Preferences />));
+    act(() => service.listeners.forEach(listener => listener({ enable_agent_companion: false })));
+    await act(async () => read.resolve({ enable_agent_companion: true }));
+    expect(container.textContent).toBe('false');
+    act(() => root.render(null));
+    expect(service.listeners.size).toBe(0);
+  });
+
+  it('hides old device data immediately and ignores its late response', async () => {
+    service.cached.mockReturnValue({ enable_agent_companion: true });
+    const oldRead = deferred();
+    const newRead = deferred();
+    service.read.mockReturnValueOnce(oldRead.promise).mockReturnValueOnce(newRead.promise);
+    act(() => root.render(<Preferences />));
+    act(() => activateSurface('peer'));
+    expect(container.textContent).toBe('pending');
+    await act(async () => oldRead.resolve({ enable_agent_companion: true }));
+    expect(container.textContent).toBe('pending');
+    await act(async () => newRead.resolve({ enable_agent_companion: false }));
+    expect(container.textContent).toBe('false');
+  });
+});
diff --git a/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.ts b/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.ts
index 3931c3a16a..027cc58d0d 100644
--- a/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.ts
+++ b/src/web-ui/src/infrastructure/config/hooks/useAIExperienceSettings.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { getActiveSurfaceScope, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
 import {
   aiExperienceConfigService,
   type AIExperienceSettings,
@@ -7,57 +8,64 @@ import {
 export interface UseAIExperienceSettingsResult {
   settings: AIExperienceSettings | null;
   isLoading: boolean;
+  isRefreshing: boolean;
   error: Error | null;
   reload: () => Promise<void>;
 }
 
 export function useAIExperienceSettings(): UseAIExperienceSettingsResult {
-  const [settings, setSettings] = useState<AIExperienceSettings | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
+  const [snapshot, setSnapshot] = useState(() => ({
+    epoch: scope.epoch,
+    settings: aiExperienceConfigService.getCachedSettings(),
+    error: null as Error | null,
+    pending: true,
+  }));
   const activeRef = useRef(true);
   const requestIdRef = useRef(0);
 
   const load = useCallback(async (forceRefresh: boolean) => {
     const requestId = ++requestIdRef.current;
-    if (activeRef.current) {
-      setIsLoading(true);
-      setError(null);
-    }
+    setSnapshot(current => current.epoch === scope.epoch
+      ? { ...current, pending: true, error: null }
+      : { epoch: scope.epoch, settings: null, pending: true, error: null });
     try {
-      const next = await aiExperienceConfigService.getSettingsAsync({ forceRefresh });
-      if (activeRef.current && requestId === requestIdRef.current) {
-        setSettings(next);
+      const next = await aiExperienceConfigService.getSettingsAsync({ forceRefresh, requireLoaded: true });
+      if (activeRef.current && scope.isCurrent() && requestId === requestIdRef.current) {
+        setSnapshot({ epoch: scope.epoch, settings: next, pending: false, error: null });
       }
     } catch (reason) {
-      if (activeRef.current && requestId === requestIdRef.current) {
-        setSettings(null);
-        setError(reason instanceof Error ? reason : new Error(String(reason)));
-      }
-    } finally {
-      if (activeRef.current && requestId === requestIdRef.current) {
-        setIsLoading(false);
+      if (activeRef.current && scope.isCurrent() && requestId === requestIdRef.current) {
+        setSnapshot(current => ({
+          ...current, pending: false,
+          error: reason instanceof Error ? reason : new Error(String(reason)),
+        }));
       }
     }
-  }, []);
+  }, [scope]);
 
   useEffect(() => {
     activeRef.current = true;
     void load(false);
     const removeListener = aiExperienceConfigService.addChangeListener(next => {
-      if (!activeRef.current) return;
+      if (!activeRef.current || !scope.isCurrent()) return;
       requestIdRef.current += 1;
-      setSettings(next);
-      setError(null);
-      setIsLoading(false);
+      setSnapshot({ epoch: scope.epoch, settings: next, pending: false, error: null });
     });
     return () => {
       activeRef.current = false;
+      requestIdRef.current += 1;
       removeListener();
     };
-  }, [load]);
+  }, [load, scope]);
 
   const reload = useCallback(() => load(true), [load]);
-
-  return { settings, isLoading, error, reload };
+  const current = snapshot.epoch === scope.epoch ? snapshot : { settings: null, error: null, pending: true };
+  return {
+    settings: current.settings,
+    error: current.error,
+    isLoading: current.pending && current.settings === null,
+    isRefreshing: current.pending && current.settings !== null,
+    reload,
+  };
 }
diff --git a/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.test.tsx b/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.test.tsx
new file mode 100644
index 0000000000..5c10a2bd2e
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.test.tsx
@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import React, { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useConfigSeed } from './useConfigSeed';
+
+const values = vi.hoisted(() => new Map<string, unknown>());
+vi.mock('../services/ConfigManager', () => ({ configManager: {
+  hasCachedConfig: (path: string) => values.has(path),
+  getCachedConfig: (path: string) => values.get(path),
+} }));
+
+function Form() {
+  const seed = useConfigSeed(['editor', 'optional']);
+  const [draft, setDraft] = useState(seed.get('editor', 'default'));
+  return <button data-loaded={seed.loaded} onClick={() => setDraft('edited')}>{draft}</button>;
+}
+
+describe('settings form snapshots', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  beforeEach(() => {
+    values.clear();
+    container = document.createElement('div');
+    root = createRoot(container);
+  });
+  afterEach(() => act(() => root.unmount()));
+
+  it('uses a complete snapshot on the first render, including a missing optional field', () => {
+    values.set('editor', 'saved');
+    values.set('optional', undefined);
+    act(() => root.render(<Form />));
+    expect(container.querySelector('button')?.dataset.loaded).toBe('true');
+    expect(container.textContent).toBe('saved');
+    act(() => container.querySelector('button')!.click());
+    values.set('editor', 'late read');
+    act(() => root.render(<Form />));
+    expect(container.textContent).toBe('edited');
+  });
+
+  it('does not make a partially loaded form editable', () => {
+    values.set('editor', 'partial');
+    act(() => root.render(<Form />));
+    expect(container.querySelector('button')?.dataset.loaded).toBe('false');
+    expect(container.textContent).toBe('default');
+  });
+});
diff --git a/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.ts b/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.ts
new file mode 100644
index 0000000000..14f8af3c24
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/hooks/useConfigSeed.ts
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { configManager } from '../services/ConfigManager';
+
+/** Seed a form only from a complete, trusted snapshot. Never hydrate over a draft. */
+export function useConfigSeed(paths: readonly string[]) {
+  return useState(() => {
+    const loaded = paths.every(path => configManager.hasCachedConfig(path));
+    const values = new Map(paths.map(path => [path, loaded ? configManager.getCachedConfig(path) : undefined]));
+    return {
+      loaded,
+      get<T>(path: string, fallback: T): T {
+        const value = values.get(path);
+        return value === undefined ? fallback : value as T;
+      },
+    };
+  })[0];
+}
diff --git a/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.test.tsx b/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.test.tsx
index 7e451fdacd..dafd510fad 100644
--- a/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.test.tsx
+++ b/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.test.tsx
@@ -7,6 +7,8 @@ import { useSelectionToolbarPreference } from './useSelectionToolbarPreference';
 
 const mocks = vi.hoisted(() => ({ get: vi.fn(), listeners: new Set<() => void>() }));
 vi.mock('../services/ConfigManager', () => ({ configManager: {
+  hasCachedConfig: () => false,
+  getCachedConfig: () => undefined,
   getOptionalConfig: mocks.get,
   watch: (_path: string, listener: () => void) => {
     mocks.listeners.add(listener);
diff --git a/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.ts b/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.ts
index b418d05d05..47fcc412c8 100644
--- a/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.ts
+++ b/src/web-ui/src/infrastructure/config/hooks/useSelectionToolbarPreference.ts
@@ -10,7 +10,10 @@ const log = createLogger('SelectionToolbarPreference');
 export function useSelectionToolbarPreference() {
   const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
   const [snapshot, setSnapshot] = useState<{ epoch: number; enabled: boolean | null; error: Error | null }>({
-    epoch: scope.epoch, enabled: null, error: null,
+    epoch: scope.epoch,
+    enabled: configManager.hasCachedConfig(AUTO_SHOW_SELECTION_TOOLBAR_CONFIG_PATH)
+      ? configManager.getCachedConfig<boolean>(AUTO_SHOW_SELECTION_TOOLBAR_CONFIG_PATH) !== false : null,
+    error: null,
   });
   const requestId = useRef(0);
   const reload = useCallback(async () => {
diff --git a/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.test.ts b/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.test.ts
index dff183573a..d99a02c855 100644
--- a/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.test.ts
+++ b/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.test.ts
@@ -1,6 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const configManagerMock = vi.hoisted(() => ({
+  hasCachedConfig: vi.fn(() => false),
+  getCachedConfig: vi.fn(),
   getConfig: vi.fn(),
   setConfig: vi.fn(),
   watch: vi.fn(),
@@ -44,6 +46,30 @@ describe('AIExperienceConfigService startup behavior', () => {
     configManagerMock.watch.mockReturnValue(() => undefined);
   });
 
+  it('exposes trusted data synchronously and retains it after a failed refresh', async () => {
+    configManagerMock.getConfig.mockResolvedValueOnce({ enable_agent_companion: false });
+    const { aiExperienceConfigService } = await import('./AIExperienceConfigService');
+    expect(aiExperienceConfigService.getCachedSettings()).toBeNull();
+    await aiExperienceConfigService.getSettingsAsync({ requireLoaded: true });
+    expect(aiExperienceConfigService.getCachedSettings()?.enable_agent_companion).toBe(false);
+    configManagerMock.getConfig.mockRejectedValueOnce(new Error('offline'));
+    await aiExperienceConfigService.reload();
+    expect(aiExperienceConfigService.getCachedSettings()?.enable_agent_companion).toBe(false);
+  });
+
+  it('cannot repopulate the cache from a previous device read', async () => {
+    const { activateSurface } = await import('@/infrastructure/peer-device/deviceSurface');
+    const { aiExperienceConfigService } = await import('./AIExperienceConfigService');
+    let finish!: (value: unknown) => void;
+    configManagerMock.getConfig.mockReturnValueOnce(new Promise(resolve => { finish = resolve; }));
+    const pending = aiExperienceConfigService.getSettingsAsync();
+    activateSurface('peer');
+    const rejected = expect(pending).rejects.toMatchObject({ isSurfaceChangedError: true });
+    finish({ enable_agent_companion: true });
+    await rejected;
+    expect(aiExperienceConfigService.getCachedSettings()).toBeNull();
+  });
+
   it('does not read app.ai_experience during module import', async () => {
     await import('./AIExperienceConfigService');
     await Promise.resolve();
diff --git a/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.ts b/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.ts
index f3c923abbe..24e5830608 100644
--- a/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.ts
+++ b/src/web-ui/src/infrastructure/config/services/AIExperienceConfigService.ts
@@ -4,6 +4,7 @@ import { configManager } from './ConfigManager';
 import { DEFAULT_AGENT_COMPANION_PET } from './AgentCompanionPetService';
 import { configAPI } from '@/infrastructure/api/service-api/ConfigAPI';
 import { createLogger } from '@/shared/utils/logger';
+import { getActiveSurfaceScope, isSurfaceChangedError, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
 import type { VoiceInputSettings } from '../types';
 
 const log = createLogger('AIExperienceConfig');
@@ -121,17 +122,33 @@ function normalizeSettings(settings: PersistedAIExperienceSettings | null | unde
 export class AIExperienceConfigService {
   private static instance: AIExperienceConfigService;
   private cachedSettings: AIExperienceSettings | null = null;
+  private hasTrustedSettings = false;
+  private trustedEpoch = getActiveSurfaceScope().epoch;
   private listeners: Set<(settings: AIExperienceSettings) => void> = new Set();
   private unwatchConfig: (() => void) | null = null;
 
-  private constructor() {}
+  private constructor() {
+    onSurfaceActivated(() => {
+      this.cachedSettings = null;
+      this.hasTrustedSettings = false;
+    });
+  }
+
+  getCachedSettings(): AIExperienceSettings | null {
+    if (configManager.hasCachedConfig(CONFIG_PATH)) {
+      return normalizeSettings(configManager.getCachedConfig<PersistedAIExperienceSettings>(CONFIG_PATH));
+    }
+    return this.hasTrustedSettings && this.trustedEpoch === getActiveSurfaceScope().epoch ? this.cachedSettings : null;
+  }
 
   private ensureConfigWatcher(): void {
     if (this.unwatchConfig) {
       return;
     }
     this.unwatchConfig = configManager.watch(CONFIG_PATH, () => {
-      void this.reload();
+      void this.reload().catch(error => {
+        if (!isSurfaceChangedError(error)) log.warn('Failed to refresh AI experience settings', error);
+      });
     });
   }
 
@@ -145,14 +162,20 @@ export class AIExperienceConfigService {
 
    
   private async loadSettings(): Promise<void> {
+    const scope = getActiveSurfaceScope();
     this.ensureConfigWatcher();
     try {
       const settings = await configManager.getConfig<PersistedAIExperienceSettings>(CONFIG_PATH);
+      scope.assertCurrent('load AI experience settings');
       const merged = normalizeSettings(settings);
       this.cachedSettings = merged;
+      this.hasTrustedSettings = true;
+      this.trustedEpoch = scope.epoch;
     } catch (error) {
-      log.warn('Failed to load config, using defaults', error);
-      this.cachedSettings = { ...defaultSettings };
+      if (isSurfaceChangedError(error)) throw error;
+      log.warn('Failed to reload AI experience settings', error);
+      // A failed refresh must not replace a trusted setting with a default.
+      if (!this.hasTrustedSettings) this.cachedSettings = { ...defaultSettings };
     }
   }
 
@@ -167,14 +190,19 @@ export class AIExperienceConfigService {
 
    
   async getSettingsAsync(options?: { forceRefresh?: boolean; requireLoaded?: boolean }): Promise<AIExperienceSettings> {
+    const scope = getActiveSurfaceScope();
     this.ensureConfigWatcher();
     try {
       const settings = options?.forceRefresh
         ? await configAPI.getConfig(CONFIG_PATH) as PersistedAIExperienceSettings
         : await configManager.getConfig<PersistedAIExperienceSettings>(CONFIG_PATH);
+      scope.assertCurrent('read AI experience settings');
       this.cachedSettings = normalizeSettings(settings);
+      this.hasTrustedSettings = true;
+      this.trustedEpoch = scope.epoch;
       return this.cachedSettings;
     } catch (error) {
+      if (isSurfaceChangedError(error)) throw error;
       log.error('Failed to get config', error);
       if (options?.requireLoaded) throw error;
       return this.getSettings(); 
diff --git a/src/web-ui/src/infrastructure/config/services/ConfigManager.test.ts b/src/web-ui/src/infrastructure/config/services/ConfigManager.test.ts
index f2c64bdbfd..00936de20b 100644
--- a/src/web-ui/src/infrastructure/config/services/ConfigManager.test.ts
+++ b/src/web-ui/src/infrastructure/config/services/ConfigManager.test.ts
@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
 import { configManager } from './ConfigManager';
 
 const configApiMocks = vi.hoisted(() => ({
@@ -41,6 +42,50 @@ describe('ConfigManager', () => {
     delete globalThis.__OPENBITFUN_BOOTSTRAP_KEYBINDINGS__;
   });
 
+  it('records successful optional absence without caching a failed read or fallback', async () => {
+    configApiMocks.getConfig.mockResolvedValueOnce(undefined);
+    await configManager.getOptionalConfig('app.worktrees');
+    expect(configManager.hasCachedConfig('app.worktrees')).toBe(true);
+    expect(configManager.getCachedConfig('app.worktrees')).toBeUndefined();
+    configApiMocks.getConfig.mockRejectedValueOnce(new Error('offline'));
+    await expect(configManager.getConfig('ai.models')).resolves.toEqual([]);
+    expect(configManager.hasCachedConfig('ai.models')).toBe(false);
+    configApiMocks.setConfig.mockResolvedValueOnce(undefined);
+    await configManager.setConfig('app.worktrees.enabled', true);
+    expect(configManager.hasCachedConfig('app.worktrees')).toBe(false);
+  });
+
+  it('invalidates synchronously on device activation and fences late reads without defaults', async () => {
+    configApiMocks.getConfig.mockResolvedValueOnce('local');
+    await configManager.getOptionalConfig('app.logging.level');
+    const read = createDeferred<unknown[]>();
+    configApiMocks.getConfig.mockReturnValueOnce(read.promise);
+    const pending = configManager.getConfig('ai.models');
+    activateSurface('peer');
+    expect(configManager.hasCachedConfig('app.logging.level')).toBe(false);
+    expect(configManager.getCachedConfig('app.logging.level')).toBeUndefined();
+    const rejection = expect(pending).rejects.toMatchObject({ isSurfaceChangedError: true });
+    read.resolve([]);
+    await rejection;
+    expect(configManager.hasCachedConfig('ai.models')).toBe(false);
+    activateSurface('local');
+  });
+
+  it('never sends a queued mutation to a newly activated host', async () => {
+    const write = createDeferred<void>();
+    configApiMocks.setConfig.mockReturnValueOnce(write.promise);
+    const first = configManager.setConfig('editor.theme', 'old');
+    const queued = configManager.setConfig('editor.theme', 'queued');
+    activateSurface('peer');
+    const firstRejection = expect(first).rejects.toMatchObject({ isSurfaceChangedError: true });
+    const queuedRejection = expect(queued).rejects.toMatchObject({ isSurfaceChangedError: true });
+    write.resolve();
+    await Promise.all([firstRejection, queuedRejection]);
+    expect(configApiMocks.setConfig).toHaveBeenCalledTimes(1);
+    expect(configManager.hasCachedConfig('editor.theme')).toBe(false);
+    activateSurface('local');
+  });
+
   it('does not let a late legacy-model read overwrite an explicit save', async () => {
     const read = createDeferred<unknown[]>();
     configApiMocks.getConfig.mockReturnValueOnce(read.promise);
diff --git a/src/web-ui/src/infrastructure/config/services/ConfigManager.ts b/src/web-ui/src/infrastructure/config/services/ConfigManager.ts
index 9ad186c9cf..92c09b92e4 100644
--- a/src/web-ui/src/infrastructure/config/services/ConfigManager.ts
+++ b/src/web-ui/src/infrastructure/config/services/ConfigManager.ts
@@ -8,6 +8,7 @@ import {
 import { configAPI } from '@/infrastructure/api/service-api/ConfigAPI';
 import { i18nService } from '@/infrastructure/i18n';
 import { createLogger } from '@/shared/utils/logger';
+import { getActiveSurfaceScope, isSurfaceChangedError, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
 import { extractProviderSegmentFromBaseUrl, matchProviderCatalogItemByBaseUrl, normalizeProviderBaseUrl } from './providerCatalog';
 
 const log = createLogger('ConfigManager');
@@ -80,6 +81,9 @@ function configValuesEqual(a: unknown, b: unknown): boolean {
 class ConfigManagerImpl implements IConfigManager {
   
   private configCache: Map<string, any> = new Map();
+  // Optional reads keep their fresh-read semantics and never satisfy a strict read.
+  private optionalSnapshots = new Map<string, unknown>();
+  private cacheEpoch = getActiveSurfaceScope().epoch;
   private inFlightReads: Map<string, Promise<unknown>> = new Map();
   private inFlightMutations: Map<string, Promise<void>> = new Map();
   private pathMutationVersions: Map<string, number> = new Map();
@@ -89,6 +93,22 @@ class ConfigManagerImpl implements IConfigManager {
 
   constructor() {
     log.info('Initializing config manager (proxy mode)');
+    // Invalidate before React renders the newly activated device, not after its hydrate RPC.
+    onSurfaceActivated(() => {
+      this.clearCache();
+      this.inFlightMutations.clear();
+    });
+  }
+
+  /** A missing optional value is a loaded snapshot too; defaults alone are not. */
+  hasCachedConfig(path: string): boolean {
+    if (this.cacheEpoch !== getActiveSurfaceScope().epoch) return false;
+    return this.configCache.has(path) || this.optionalSnapshots.has(path);
+  }
+
+  getCachedConfig<T>(path: string): T | undefined {
+    if (this.cacheEpoch !== getActiveSurfaceScope().epoch) return undefined;
+    return (this.configCache.has(path) ? this.configCache.get(path) : this.optionalSnapshots.get(path)) as T | undefined;
   }
 
   private async resolveLegacyAiModels(config: unknown): Promise<unknown> {
@@ -218,6 +238,7 @@ class ConfigManagerImpl implements IConfigManager {
     value: T,
     retry: () => Promise<T>,
   ): Promise<T> {
+    const scope = getActiveSurfaceScope();
     if (readVersion === this.getPathMutationVersion(path)) {
       this.configCache.set(path, value);
       return value;
@@ -227,6 +248,7 @@ class ConfigManagerImpl implements IConfigManager {
     if (pendingMutations) {
       await pendingMutations;
     }
+    scope.assertCurrent('resolve configuration');
     if (this.configCache.has(path)) {
       return this.configCache.get(path) as T;
     }
@@ -240,6 +262,9 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   private invalidateOverlappingLocalState(path?: string): void {
+    for (const cachedPath of this.optionalSnapshots.keys()) {
+      if (this.configPathsOverlap(cachedPath, path)) this.optionalSnapshots.delete(cachedPath);
+    }
     for (const cachedPath of Array.from(this.configCache.keys())) {
       if (this.configPathsOverlap(cachedPath, path)) {
         this.configCache.delete(cachedPath);
@@ -262,15 +287,18 @@ class ConfigManagerImpl implements IConfigManager {
     mutate: () => Promise<void>,
     onSuccess?: () => void,
   ): Promise<void> {
+    const scope = getActiveSurfaceScope();
     const mutationKey = this.getMutationKey(path);
     const previousMutations = this.relatedMutationPromises([path]);
     const operation = (async () => {
       if (previousMutations.length > 0) {
         await Promise.allSettled(previousMutations);
       }
+      scope.assertCurrent('write configuration');
       this.bumpOverlappingMutationVersions(path);
       this.invalidateOverlappingLocalState(path);
       await mutate();
+      scope.assertCurrent('commit configuration');
       onSuccess?.();
     })();
 
@@ -309,13 +337,17 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   private async readConfig<T = any>(path?: string): Promise<T> {
+    const scope = getActiveSurfaceScope();
     const rootReadVersion = this.rootMutationVersion;
     const readVersion = path ? this.getPathMutationVersion(path) : 0;
     const config = await configAPI.getConfig(path);
+    scope.assertCurrent('read configuration');
     const resolvedConfig = path === 'ai.models'
       ? await this.resolveLegacyAiModels(config)
       : config;
 
+    scope.assertCurrent('cache configuration');
+
     if (path) {
       return this.resolveReadValue(
         path,
@@ -330,6 +362,7 @@ class ConfigManagerImpl implements IConfigManager {
       if (pendingMutations) {
         await pendingMutations;
       }
+      scope.assertCurrent('reload configuration');
       return this.readConfig<T>();
     }
 
@@ -337,8 +370,10 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   private async readOptionalConfig<T = any>(path: string): Promise<T | undefined> {
+    const scope = getActiveSurfaceScope();
     const readVersion = this.getPathMutationVersion(path);
     const config = await configAPI.getConfig(path, { skipRetryOnNotFound: true });
+    scope.assertCurrent('read optional configuration');
     const resolvedConfig = path === 'ai.models'
       ? await this.resolveLegacyAiModels(config)
       : config;
@@ -348,26 +383,32 @@ class ConfigManagerImpl implements IConfigManager {
       if (pendingMutations) {
         await pendingMutations;
       }
+      scope.assertCurrent('reload optional configuration');
       if (this.configCache.has(path)) {
         return this.configCache.get(path) as T;
       }
       return this.readOptionalConfig<T>(path);
     }
 
+    scope.assertCurrent('cache optional configuration');
+    this.optionalSnapshots.set(path, resolvedConfig);
     return resolvedConfig as T | undefined;
   }
 
   private async readConfigs(paths: string[]): Promise<Record<string, unknown>> {
+    const scope = getActiveSurfaceScope();
     const readVersions = new Map(
       paths.map(path => [path, this.getPathMutationVersion(path)] as const),
     );
     const configs = await configAPI.getConfigs(paths);
+    scope.assertCurrent('read configuration batch');
     const resolvedConfigs: Record<string, unknown> = {};
 
     for (const path of paths) {
       const resolvedConfig = path === 'ai.models'
         ? await this.resolveLegacyAiModels(configs[path])
         : configs[path];
+      scope.assertCurrent('cache configuration batch');
 
       resolvedConfigs[path] = await this.resolveReadValue(
         path,
@@ -415,6 +456,7 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   private fallbackOrThrow(path: string | undefined, error: unknown): unknown {
+    if (isSurfaceChangedError(error)) throw error;
     const fallback = this.getFallbackConfigValue(path);
     if (fallback.hasFallback) {
       return fallback.value;
@@ -423,12 +465,15 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   async getConfig<T = any>(path?: string): Promise<T> {
+    const scope = getActiveSurfaceScope();
     try {
       const pendingMutations = this.waitForRelatedMutations([path]);
       if (pendingMutations) {
         await pendingMutations;
       }
 
+      scope.assertCurrent('get configuration');
+
       if (path && this.configCache.has(path)) {
         return this.configCache.get(path);
       }
@@ -449,6 +494,7 @@ class ConfigManagerImpl implements IConfigManager {
         }
       }
     } catch (error) {
+      if (isSurfaceChangedError(error)) throw error;
       log.error('Failed to get config', { path, error });
       // Return defaults to avoid breaking the UI.
       if (path === 'ai.models') {
@@ -480,12 +526,15 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   async getOptionalConfig<T = any>(path: string): Promise<T | undefined> {
+    const scope = getActiveSurfaceScope();
     try {
       const pendingMutations = this.waitForRelatedMutations([path]);
       if (pendingMutations) {
         await pendingMutations;
       }
 
+      scope.assertCurrent('get optional configuration');
+
       if (this.configCache.has(path)) {
         return this.configCache.get(path);
       }
@@ -517,11 +566,13 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   async getConfigs(paths: string[]): Promise<Record<string, unknown>> {
+    const scope = getActiveSurfaceScope();
     const uniquePaths = Array.from(new Set(paths));
     const pendingMutations = this.waitForRelatedMutations(uniquePaths);
     if (pendingMutations) {
       await pendingMutations;
     }
+    scope.assertCurrent('get configuration batch');
     const results: Record<string, unknown> = {};
     const pendingReads: Array<[string, Promise<unknown>]> = [];
     const missingPaths: string[] = [];
@@ -619,6 +670,7 @@ class ConfigManagerImpl implements IConfigManager {
 
   /** Apply an edit to a fresh host value inside the client mutation queue. */
   async updateConfig<T>(path: string, update: (current: T) => T): Promise<T> {
+    const scope = getActiveSurfaceScope();
     // Model writes also reconcile default selectors on the host. Invalidate
     // their cached siblings and serialize edits to the whole AI section.
     const mutationPath = path === 'ai.models' ? 'ai' : path;
@@ -629,6 +681,7 @@ class ConfigManagerImpl implements IConfigManager {
       // must not turn a partial edit into replacement of its config with [].
       const value = await configAPI.getConfig(path);
       previous = (path === 'ai.models' ? await this.resolveLegacyAiModels(value) : value) as T;
+      scope.assertCurrent('update configuration');
       if (previous === undefined || previous === null) {
         throw new Error(`Cannot update unavailable config: ${path}`);
       }
@@ -721,6 +774,7 @@ class ConfigManagerImpl implements IConfigManager {
   }
 
   clearCache(): void {
+    this.cacheEpoch = getActiveSurfaceScope().epoch;
     this.bumpOverlappingMutationVersions(undefined);
     this.invalidateOverlappingLocalState(undefined);
   }
@@ -810,6 +864,7 @@ class ConfigManagerImpl implements IConfigManager {
   async applyExternalReload(): Promise<void> {
     const trackedPaths = new Set<string>([
       ...this.configCache.keys(),
+      ...this.optionalSnapshots.keys(),
       ...this.pathListeners.keys(),
     ]);
 
diff --git a/src/web-ui/src/infrastructure/config/services/PermissionConfigService.test.ts b/src/web-ui/src/infrastructure/config/services/PermissionConfigService.test.ts
index 85f710fdf8..eb7d9cb7eb 100644
--- a/src/web-ui/src/infrastructure/config/services/PermissionConfigService.test.ts
+++ b/src/web-ui/src/infrastructure/config/services/PermissionConfigService.test.ts
@@ -40,6 +40,12 @@ describe('PermissionConfigService', () => {
     await expect(permissionConfigService.getConfig()).resolves.toEqual(stored);
   });
 
+  it('propagates a failed read when a settings form requires loaded configuration', async () => {
+    configManagerMock.getConfig.mockRejectedValueOnce(new Error('offline'));
+    const { permissionConfigService } = await import('./PermissionConfigService');
+    await expect(permissionConfigService.getConfig({ requireLoaded: true })).rejects.toThrow('offline');
+  });
+
   it('keeps configuration load failures on the ask fallback', async () => {
     configManagerMock.getConfig.mockRejectedValue(new Error('offline'));
     const { permissionConfigService } = await import('./PermissionConfigService');
diff --git a/src/web-ui/src/infrastructure/config/services/PermissionConfigService.ts b/src/web-ui/src/infrastructure/config/services/PermissionConfigService.ts
index 8cbf793ac1..466daab3d2 100644
--- a/src/web-ui/src/infrastructure/config/services/PermissionConfigService.ts
+++ b/src/web-ui/src/infrastructure/config/services/PermissionConfigService.ts
@@ -48,10 +48,11 @@ export function normalizeToolPermissionConfig(value: unknown): ToolPermissionCon
 }
 
 export class PermissionConfigService {
-  async getConfig(): Promise<ToolPermissionConfig> {
+  async getConfig(options?: { requireLoaded?: boolean }): Promise<ToolPermissionConfig> {
     try {
       return normalizeToolPermissionConfig(await configManager.getConfig<ToolPermissionConfig>(CONFIG_PATH));
     } catch (error) {
+      if (options?.requireLoaded) throw error;
       log.warn('Failed to load tool permission config, using safe defaults', error);
       return {
         policy: { preset: 'ask', rules: [] },
diff --git a/src/web-ui/src/infrastructure/config/services/SettingsReadCache.test.ts b/src/web-ui/src/infrastructure/config/services/SettingsReadCache.test.ts
new file mode 100644
index 0000000000..91597b045a
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/services/SettingsReadCache.test.ts
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+import { createSettingsReadCache } from './SettingsReadCache';
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>(done => { resolve = done; });
+  return { promise, resolve };
+}
+
+describe('settings runtime read snapshots', () => {
+  beforeEach(() => activateSurface('local'));
+
+  it('deduplicates simultaneous reads and revalidates a warm snapshot', async () => {
+    const cache = createSettingsReadCache<number>();
+    const first = deferred<number>();
+    const read = vi.fn(() => first.promise);
+    const pending = cache.read(read);
+    expect(cache.read(read)).toBe(pending);
+    first.resolve(1);
+    await pending;
+    expect(read).toHaveBeenCalledTimes(1);
+    expect(cache.peek()).toBe(1);
+    await cache.read(async () => 2);
+    expect(cache.peek()).toBe(2);
+    await expect(cache.read(async () => { throw new Error('offline'); })).rejects.toThrow('offline');
+    expect(cache.peek()).toBe(2);
+  });
+
+  it('isolates different query identities and ignores superseded reads', async () => {
+    const cache = createSettingsReadCache<number>();
+    const old = deferred<number>();
+    const pending = cache.read(() => old.promise, 'month');
+    await cache.read(async () => 2, 'week');
+    old.resolve(1);
+    await pending;
+    expect(cache.peek('month')).toBeUndefined();
+    expect(cache.peek('week')).toBe(2);
+  });
+
+  it('does not reveal a previous device snapshot or accept its late response', async () => {
+    const cache = createSettingsReadCache<number>();
+    await cache.read(async () => 1);
+    const old = deferred<number>();
+    const pending = cache.read(() => old.promise);
+    await Promise.resolve();
+    activateSurface('peer');
+    expect(cache.peek()).toBeUndefined();
+    const rejection = expect(pending).rejects.toMatchObject({ isSurfaceChangedError: true });
+    old.resolve(3);
+    await rejection;
+    await cache.read(async () => 2);
+    expect(cache.peek()).toBe(2);
+  });
+
+  it('does not restore a snapshot invalidated during a read', async () => {
+    const cache = createSettingsReadCache<number>();
+    const old = deferred<number>();
+    const pending = cache.read(() => old.promise);
+    cache.invalidate();
+    old.resolve(1);
+    await pending;
+    expect(cache.peek()).toBeUndefined();
+  });
+});
diff --git a/src/web-ui/src/infrastructure/config/services/SettingsReadCache.ts b/src/web-ui/src/infrastructure/config/services/SettingsReadCache.ts
new file mode 100644
index 0000000000..ffc111f048
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/services/SettingsReadCache.ts
@@ -0,0 +1,39 @@
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+
+/** A last successful runtime read, never persisted and never shared across device activations.
+ * Reads still revalidate; only simultaneous requests are deduplicated.
+ * Configuration values belong to ConfigManager instead.
+ */
+export function createSettingsReadCache<T>() {
+  let snapshot: { epoch: number; key: string; value: T } | undefined;
+  let pending: { epoch: number; key: string; promise: Promise<T> } | undefined;
+  let revision = 0;
+  return {
+    peek(key = ''): T | undefined {
+      return snapshot?.epoch === getActiveSurfaceScope().epoch && snapshot.key === key
+        ? snapshot.value : undefined;
+    },
+    invalidate() {
+      revision += 1;
+      snapshot = undefined;
+      pending = undefined;
+    },
+    read(load: () => Promise<T>, key = ''): Promise<T> {
+      const scope = getActiveSurfaceScope();
+      if (pending?.epoch === scope.epoch && pending.key === key) return pending.promise;
+      const requestRevision = ++revision;
+      const promise = Promise.resolve().then(() => {
+        scope.assertCurrent('read settings runtime state');
+        return load();
+      }).then(value => {
+        scope.assertCurrent('receive settings runtime state');
+        if (requestRevision === revision) snapshot = { epoch: scope.epoch, key, value };
+        return value;
+      }).finally(() => {
+        if (pending?.promise === promise) pending = undefined;
+      });
+      pending = { epoch: scope.epoch, key, promise };
+      return promise;
+    },
+  };
+}
diff --git a/src/web-ui/src/infrastructure/config/types/index.ts b/src/web-ui/src/infrastructure/config/types/index.ts
index 031f178848..c141e5fdfc 100644
--- a/src/web-ui/src/infrastructure/config/types/index.ts
+++ b/src/web-ui/src/infrastructure/config/types/index.ts
@@ -598,6 +598,9 @@ export interface WorkspaceConfig {
 }
 
 export interface IConfigManager {
+  /** Trusted snapshots for synchronous UI seeding, scoped to the active device. */
+  hasCachedConfig(path: string): boolean;
+  getCachedConfig<T>(path: string): T | undefined;
   getConfig<T = any>(path?: string): Promise<T>;
   getOptionalConfig<T = any>(path: string): Promise<T | undefined>;
   getConfigs(paths: string[]): Promise<Record<string, unknown>>;

From 94e639d86f734006611f7751360d2a5aacbc8a6b Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sat, 10 Oct 2026 10:29:19 +0800
Subject: [PATCH 2/2] fix(settings): complete hook dependencies for cached
 settings

---
 .../scenes/settings/pages/ai/DefaultHarnessSection.tsx    | 4 ++--
 .../scenes/settings/pages/ai/ExecutionSettingsPage.tsx    | 2 +-
 .../scenes/settings/pages/ai/MemorySettingsSection.tsx    | 2 +-
 .../scenes/settings/pages/ai/PermissionsSettingsPage.tsx  | 2 +-
 .../app/scenes/settings/pages/ai/SessionTitleSection.tsx  | 2 +-
 .../settings/pages/application/GeneralSettingsPage.tsx    | 8 ++++----
 .../settings/pages/data/DiagnosticsSettingsPage.tsx       | 2 +-
 .../settings/pages/development/EditorSettingsPage.tsx     | 2 +-
 .../pages/development/GitCommitSettingsSection.tsx        | 2 +-
 .../settings/pages/development/TerminalSettingsPage.tsx   | 2 +-
 .../pages/development/WorktreeSettingsSection.tsx         | 2 +-
 .../scenes/settings/pages/tools/HooksSettingsSection.tsx  | 2 +-
 .../settings/pages/tools/QuickActionsSettingsSection.tsx  | 2 +-
 .../infrastructure/config/components/McpToolsConfig.tsx   | 4 ++--
 14 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
index 3889ca5d4d..0eb78b3981 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/DefaultHarnessSection.tsx
@@ -57,7 +57,7 @@ export function DefaultHarnessSection(): React.ReactElement {
         setLoading(false);
       }
     }
-  }, []);
+  }, [seed.loaded]);
 
   useEffect(() => {
     mountedRef.current = true;
@@ -83,7 +83,7 @@ export function DefaultHarnessSection(): React.ReactElement {
       loadGenerationRef.current += 1;
       unsubscribe();
     };
-  }, [loadPreference]);
+  }, [loadPreference, seed.loaded]);
 
   const labelForMode = useCallback((modeId: string | null | undefined): string => {
     const profile = canonicalHarnessId(modeId);
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
index 7c70843192..b8f80566dd 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/ExecutionSettingsPage.tsx
@@ -300,7 +300,7 @@ const ExecutionSettingsPage: React.FC = () => {
   useEffect(() => {
 
     if (!seed.loaded) void loadPageData();
-  }, [loadPageData]);
+  }, [loadPageData, seed.loaded]);
 
   if (!subagentModelOptions.some(option => option.value === subagentModelValue)) {
     subagentModelOptions.push({
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
index ca2ba53130..f7552de178 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/MemorySettingsSection.tsx
@@ -128,7 +128,7 @@ const MemorySettingsSection: React.FC = () => {
 
   useEffect(() => {
     if (!seed.loaded) void loadData();
-  }, [loadData]);
+  }, [loadData, seed.loaded]);
 
   const enabledModels = useMemo(() => models.filter((model) => model.enabled && model.id), [models]);
 
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
index 518f599c9e..4edb06073d 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/PermissionsSettingsPage.tsx
@@ -167,7 +167,7 @@ const PermissionsSettingsPage: React.FC = () => {
   useEffect(() => {
 
     if (!seed.loaded) void loadPageData();
-  }, [loadPageData]);
+  }, [loadPageData, seed.loaded]);
 
   return (
     <SettingsPage pageId="ai.permissions" className="openbitfun-runtime-settings" data-openbitfun-component="runtime-settings" data-openbitfun-part="root" data-openbitfun-view="permissions">
diff --git a/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
index b5d44af1e3..5d7c79aa17 100644
--- a/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/ai/SessionTitleSection.tsx
@@ -75,7 +75,7 @@ export const SessionTitleSection: React.FC = () => {
       unwatchTaskModels();
       unwatchSettings();
     };
-  }, [loadData]);
+  }, [cachedSettings, loadData, seed.loaded]);
 
   const enabledModels = models.filter((model) => model.enabled);
   const selectionValue = (selection: TaskModelSelection): string => (
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
index 9bd41f7557..bd0865cc2b 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/GeneralSettingsPage.tsx
@@ -334,7 +334,7 @@ function WindowBehaviorSetting() {
     } finally {
       setLoading(false);
     }
-  }, [isTauri]);
+  }, [isTauri, seed.loaded]);
 
   useEffect(() => {
     if (!isTauri) {
@@ -342,7 +342,7 @@ function WindowBehaviorSetting() {
       return;
     }
     if (!seed.loaded) void loadData();
-  }, [isTauri, loadData]);
+  }, [isTauri, loadData, seed.loaded]);
 
   const handleChange = useCallback(
     async (value: string) => {
@@ -432,11 +432,11 @@ function NotificationSettings() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [seed.loaded]);
 
   useEffect(() => {
     if (!seed.loaded) void loadData();
-  }, [loadData]);
+  }, [loadData, seed.loaded]);
 
   const handleDialogNotifyToggle = async (checked: boolean) => {
     setSaving(true);
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
index 96b97b344c..e4cccac5b1 100644
--- a/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/data/DiagnosticsSettingsPage.tsx
@@ -77,7 +77,7 @@ function LoggingSection() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     loadData();
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
index 5b7f46b699..23f8d36e74 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/EditorSettingsPage.tsx
@@ -291,7 +291,7 @@ const EditorSettingsPage: React.FC = () => {
     } finally {
       setIsLoading(false);
     }
-  }, []);
+  }, [seed.loaded]);
 
   useEffect(() => {
     if (!seed.loaded) void loadConfig();
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
index bc9307a2ed..9641ef0a23 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/GitCommitSettingsSection.tsx
@@ -33,7 +33,7 @@ export default function GitCommitSettingsSection() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [cachedSettings]);
   useEffect(() => { if (!cachedSettings) void load(); }, [load, cachedSettings]);
 
   const handleCommitCoauthorToggle = async (enabled: boolean) => {
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
index 89ed184f68..1f1362fa53 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/TerminalSettingsPage.tsx
@@ -64,7 +64,7 @@ function TerminalSection() {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     loadData();
diff --git a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
index 0efa853ab3..6b6352daa9 100644
--- a/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/development/WorktreeSettingsSection.tsx
@@ -267,7 +267,7 @@ const WorktreeSettingsSection: React.FC = () => {
       }
       void loadProjects();
     });
-  }, [loadProjects, loadSettings]);
+  }, [loadProjects, loadSettings, seed.loaded]);
 
   const save = async (): Promise<boolean> => {
     if (!trustedSettings || !settingsDirty) {
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
index 2d50e7c3e0..1c8f2a3a3c 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/HooksSettingsSection.tsx
@@ -115,7 +115,7 @@ const HooksSettingsSection: React.FC = () => {
       setImportError(t('imports.loadFailed'));
     }
     setLoading(false);
-  }, [remoteWorkspace, t, workspace?.id]);
+  }, [remoteWorkspace, seed.loaded, t, workspace?.id]);
 
   useEffect(() => {
     mountedRef.current = true;
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
index 5756881cda..6390d49b54 100644
--- a/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/QuickActionsSettingsSection.tsx
@@ -290,7 +290,7 @@ const QuickActionsSettingsSection: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [cachedSettings]);
 
   useEffect(() => { if (!cachedSettings) void load(); }, [load, cachedSettings]);
 
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
index bc0c1f495b..34bad035e2 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
@@ -389,7 +389,7 @@ const McpToolsConfig: React.FC = () => {
         setJsonRefreshing(false);
       }
     }
-  }, [capabilityIsCurrent, currentCapabilityEpoch]);
+  }, [capabilityIsCurrent, currentCapabilityEpoch, setJsonConfig]);
 
   function stopOAuthPolling() {
     if (oauthPollTimerRef.current !== null) {
@@ -574,7 +574,7 @@ const McpToolsConfig: React.FC = () => {
   const discardJsonChanges = useCallback(() => {
     setJsonConfig(jsonSavedConfig);
     setShowJsonEditor(false);
-  }, [jsonSavedConfig]);
+  }, [jsonSavedConfig, setJsonConfig]);
 
   const requestCloseJsonEditor = () => {
     requestSettingsDraftExit(['mcp-json-config'], () => setShowJsonEditor(false));