From 59fb4560be7193075d0cac95489950054971b470 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Wed, 21 Oct 2026 22:38:39 +0800
Subject: [PATCH 01/12] feat(desktop): add shared layout and navigation

Refs #2102.
---
 desktop/README.md                     |  22 +-
 desktop/README.zh.md                  |  22 +-
 desktop/VALIDATION.md                 |  18 +
 desktop/tests/installed_lifecycle.py  |   4 +-
 desktop/tests/installed_ui.py         |   4 +-
 desktop/tests/installed_workflow.py   |   2 +-
 desktop/ui/src/app/App.tsx            | 451 ++++++++++++---------
 desktop/ui/src/app/Connections.tsx    |  21 +-
 desktop/ui/src/app/Observation.tsx    |  88 +++++
 desktop/ui/src/app/Overview.tsx       | 230 -----------
 desktop/ui/src/app/PageFeedback.tsx   |  42 ++
 desktop/ui/src/app/SettingsHelp.tsx   | 133 +++++++
 desktop/ui/src/app/TopBar.tsx         | 273 +++++++++----
 desktop/ui/src/app/messages.ts        |  86 +++-
 desktop/ui/src/app/navigation.ts      |  24 ++
 desktop/ui/src/app/style.css          |  87 +++-
 desktop/ui/tests/app.test.tsx         | 549 +++++++++++++++++++++++++-
 desktop/ui/tests/connections.test.tsx |   6 +-
 desktop/ui/tests/memory.test.tsx      |  16 +-
 desktop/ui/tests/scopes.test.tsx      |   1 +
 20 files changed, 1528 insertions(+), 551 deletions(-)
 create mode 100644 desktop/ui/src/app/Observation.tsx
 delete mode 100644 desktop/ui/src/app/Overview.tsx
 create mode 100644 desktop/ui/src/app/PageFeedback.tsx
 create mode 100644 desktop/ui/src/app/SettingsHelp.tsx
 create mode 100644 desktop/ui/src/app/navigation.ts

diff --git a/desktop/README.md b/desktop/README.md
index 102c27bc04..c356ac4859 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -1,9 +1,27 @@
 # PowerContext Desktop preview
 
-Internal Windows preview for [#1654](https://github.com/oceanbase/powercontext/issues/1654), following RFC #1455. It provides a packaged Tauri 2 shell with Home, Connections, My memories, Chinese/English settings, semantic light/dark/system themes and honest disconnected states. Connection profiles, explicit activation, identity/readiness checks, exact Scope selection and local diagnostics are implemented. Shared note saving, bounded FTS search and exact-version reading are implemented; native workflow qualification remains open.
+Internal Windows preview for [#1654](https://github.com/oceanbase/powercontext/issues/1654), following RFC #1455. Its shared application layout provides Memory, Connections, Observation, and Settings & help, Chinese/English interfaces, and light/dark/system themes. Connection profiles, explicit activation, identity/readiness checks, exact Scope selection, local diagnostics, note saving, bounded FTS search and exact-version reading are implemented; native workflow qualification remains open.
 
 See [中文说明](README.zh.md), [security boundary](SECURITY.md), and [validation guide](VALIDATION.md). This is not a supported or signed release, and does not close #1654 or #1428.
 
+## Navigation and first use
+
+Memory is the initial page. After Desktop state loads, an inactive connection offers **Set up locally** and **Connect an existing server**. Local setup opens **Settings & help → Local Server**, which explains that installation and service management are not available yet. Prepare a Server independently using the instructions below, or obtain its address and applicable credentials from an administrator. The global connection menu opens the selected configuration without activating it. Explicitly activate a connection, select an exact Scope, and use the existing Memory workspace.
+
+The global context displays the connection, endpoint, exact Scope title and ID, identity, compatibility and last observed health facts on every page. Health does not grant operation permissions. Changing pages or connection targets requires confirmation when input is unsaved. Closing Scope selection leaves the current draft intact. Submitted writes retain their original target and are not automatically replayed.
+
+Observation contains **Runtime state**, **Current-Scope inventory & usage**, and **This session**. These are unavailable placeholders until their owning features are integrated; no sample data, invented zero-valued statistics or automatic readiness probes are shown. Connections retains its explicit connection checks, whose native readiness behavior is tracked separately by #2101.
+
+Settings & help remains available without HTTP and provides language, theme, Local Server guidance, explicit local CLI diagnostics, the observed Desktop version, and copyable usage/support links. An unavailable native version is shown as unknown. Local diagnostic failure does not disable independently available remote operations.
+
+Use Tab to reach navigation and controls. The connection menu supports arrow keys, Home/End and Escape; Observation tabs support Left/Right and Home/End. Scope selection contains keyboard focus and restores it to the opening control when closed. Small windows use collapsible navigation; context and dialog contents can scroll without hiding recovery controls.
+
+### UI integration interfaces
+
+`ui/src/app/navigation.ts` defines `Page`, `ObservationTab`, `Theme`, and `NavigationTarget`. Application navigation accepts an optional connection ID, Observation tab, or `local-server` settings section. External connection selections pass the application's draft guard before reaching the editor. The editor's `selection` request invalidates pending editor completions, so a late save cannot replace a different selected configuration.
+
+`Observation` accepts independent `panels` keyed by `runtime`, `inventory`, and `session`, with unavailable defaults. Each owning page provides data, authorization, refresh and cancellation behavior. `PageFeedback` presents loading/error/empty/unavailable states with caller-owned explanations and actions. Local setup and management belong to #2117; observation content belongs to #2105, #2106 and #2107. These interfaces do not extend native IPC or the public HTTP contract.
+
 ## Run the installed preview
 
 Download and extract `desktop-windows-internal-unsigned` from a successful **Desktop validation** Actions run on this branch. The installer is under `src-tauri/target/release/bundle/nsis/`. Its accompanying `.artifacts/windows-smoke.json` records the commit, SHA-256 and signature status; compare the downloaded installer with `Get-FileHash -Algorithm SHA256 <installer-path>`. The current package is unsigned and intended for internal validation.
@@ -59,7 +77,7 @@ Profiles persist under the app data directory; credentials never appear in profi
 
 ## Save, find and read a note
 
-After explicitly activating a qualified connection and choosing a Scope, use Home's note form or **My memories → Add note**. The target connection and exact Scope are shown before submission. Enter inserts a newline; only the save button submits. The input is plain text, limited conservatively to 8192 raw UTF-8 bytes without truncation. The Server owns normalization and the returned text is authoritative.
+After explicitly activating a qualified connection and choosing a Scope, open **Memories** and enter a note in the save form. The target connection and exact Scope are shown before submission. Enter inserts a newline; only the save button submits. The input is plain text, limited conservatively to 8192 raw UTF-8 bytes without truncation. The Server owns normalization and the returned text is authoritative.
 
 Search uses FTS in the selected Scope and returns at most 10 matches. This is not a full directory or history, and ten matches do not establish a total count. **Read exact version** reads the returned Atomic Memory reference (`{family: "atomic-memory", artifact_id, revision}`) at that exact revision; it never substitutes the latest version. Copy buttons explicitly copy either the full plain text or the reference JSON.
 
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index 62f7bc952c..90665fd4df 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -1,9 +1,27 @@
 # PowerContext Desktop 预览版
 
-这是 #1654 的内部工程预览。已建立 Tauri 2、React、TypeScript 和 Vite 独立工程，提供首页、连接、我的记忆、双语设置及浅色／深色／系统主题。无连接时保存和搜索不可用，不展示示例业务数据。
+这是 #1654 的内部工程预览。已建立 Tauri 2、React、TypeScript 和 Vite 独立工程，提供记忆、连接、观察、设置与帮助四个入口，以及中英文界面和浅色／深色／系统主题。无连接时保存和搜索不可用，不展示示例业务数据。
 
 已实现连接配置、显式激活、身份与就绪检查、精确范围选择和本地诊断。已实现共享笔记表单、FTS 搜索和精确版本阅读；原生交互闭环仍待完整验收。当前不是已签名的正式发行版。
 
+## 导航与首次使用
+
+默认进入“记忆”。Desktop 状态加载完成且没有活动连接时，提供“本地设置”和“连接已有服务”两条路径。“本地设置”进入“设置与帮助 → 本地 Server”，明确说明安装和服务管理尚未可用。可以按下文指引独立准备 Server，或向管理员获取地址和适用凭据。从全局连接菜单选择已保存配置只会打开对应编辑器，不会激活连接。显式激活连接并选择精确 Scope 后，使用现有记忆工作区。
+
+全局上下文在各页面展示连接、地址、精确 Scope 名称和 ID、身份、兼容性及上次观察到的健康事实。健康状态不代表操作权限。有未保存输入时，切换页面或连接配置需要确认；关闭 Scope 选择不会丢弃当前草稿。已提交写入始终绑定原目标，不会自动重放。
+
+“观察”包含“运行状态”“当前 Scope 库存与用量”“本次会话”三个标签页。在各功能接入前，明确显示尚未可用，不展示示例数据、虚构的零值统计，也不自动探测 readiness。“连接”保留现有显式连接检查，其原生 readiness 行为由 #2101 单独处理。
+
+“设置与帮助”无需 HTTP 连接即可访问，包含语言、主题、本地 Server 指引、显式执行的本机 CLI 诊断、实际获取的 Desktop 版本，以及可复制的使用指南和反馈地址。无法获取原生版本时显示“未知”；本机诊断失败不会阻断独立可用的远程操作。
+
+使用 Tab 到达导航与控件；连接菜单支持方向键、Home／End 和 Escape；观察标签页支持左右方向键和 Home／End。Scope 弹窗约束键盘焦点，关闭后返回打开它的控件。小窗口使用可折叠导航，上下文和弹窗内容可以滚动，不遮挡恢复操作。
+
+### UI 接入接口
+
+`ui/src/app/navigation.ts` 定义 `Page`、`ObservationTab`、`Theme` 和 `NavigationTarget`。应用导航支持指定连接 ID、观察标签页或 `local-server` 设置区域。外部连接选择必须先经过应用层草稿确认，再传给连接编辑器。编辑器的 `selection` 请求会使旧编辑操作的完成回调失效，避免迟到保存替换新选中的配置。
+
+`Observation` 接受按 `runtime`、`inventory`、`session` 分别提供的 `panels`，默认展示尚未可用；数据、权限、刷新和取消行为由各页面实现。`PageFeedback` 统一加载、错误、空状态和不可用状态的呈现，解释和操作由调用方提供。本地安装与管理归属 #2117，观察内容归属 #2105、#2106、#2107；这些接口不扩展原生 IPC 或公共 HTTP 合同。
+
 ## 直接运行安装版
 
 在本分支的 GitHub Actions「Desktop validation」成功运行中，下载 `desktop-windows-internal-unsigned` 产物并解压，找到 `src-tauri/target/release/bundle/nsis/` 中的安装程序。对应 `.artifacts/windows-smoke.json` 记录提交、安装包 SHA-256 和签名状态，可用 `Get-FileHash -Algorithm SHA256 <安装包路径>` 核对下载文件。当前产物未签名，供内部验证。
@@ -78,7 +96,7 @@ Desktop 在每次诊断前检查固定路径和摘要，然后只允许 `service
 
 ## 保存、查找和阅读
 
-明确启用合格连接并选择精确范围后，在首页填写笔记，或在「我的记忆」中点击「记一条」。提交前会显示目标连接和范围。Enter 只换行，点击保存才提交。正文是纯文本，保守限制为原始文本最多 8192 个 UTF-8 字节，不会截断；规范化由 Server 完成，以返回的正文为准。
+明确启用合格连接并选择精确范围后，打开「记忆」，在保存表单中填写笔记。提交前会显示目标连接和范围。Enter 只换行，点击保存才提交。正文是纯文本，保守限制为原始文本最多 8192 个 UTF-8 字节，不会截断；规范化由 Server 完成，以返回的正文为准。
 
 全文搜索只在当前范围执行，每次最多返回 10 条，不代表完整目录、历史或总数。阅读按返回的 Atomic Memory 引用（`{family: "atomic-memory", artifact_id, revision}`）读取该精确版本，不自动改读最新版本。复制按钮分别复制纯文本正文和引用 JSON。
 
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 39c31eac20..bcf0a036f0 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -61,6 +61,24 @@ uv run python desktop/tests/fixture_qualification.py --server-commit "$DESKTOP_F
 pnpm --dir desktop tauri build --bundles nsis --ci --features ci-fixtures -- --locked
 ```
 
+## Shared application layout and navigation (#2102)
+
+Local verification on 2026-10-21 used Windows x64, Node 24.14.1, pnpm 11.13.1, and Rust 1.95.0 for generated-contract checking:
+
+- `pnpm --dir desktop test`: 48 UI behavior tests passed. These use mocked IPC and cover navigation, exact-Scope context, draft guards, late completions, keyboard/focus behavior, and existing Memory/connection/diagnostic journeys.
+- `pnpm --dir desktop typecheck`, `lint`, and `build` passed. Lint includes OpenAPI drift, canonical brand-resource, and formatting checks; generated contracts were checked without updating them.
+- Ruff 0.15.7 lint and formatting checks passed for the changed installed-acceptance Python scripts. Their startup/navigation selectors were updated; the installed harness itself was not executed locally.
+- Headless Microsoft Edge 155.0.4283.62 exercised four pages and three Observation tabs across Chinese/English, light/dark/system, and CSS viewports 1180×800, 800×600, 400×400, and 400×300. The 24 combinations passed horizontal-overflow, Scope dialog focus/return, connection-menu, and local diagnostic error checks using synthetic IPC. The 400×300 viewport with device scale factor 2 checks layout equivalent to 800×600 at 200%; it does not establish actual WebView zoom behavior.
+- Additional browser scenarios exercised draft-confirmation dismissal/acceptance at all four viewports, and disconnected first use, Local Server placement and initialization failure in both languages at 800×600, 400×400 and 400×300. Drafts survived canceled navigation, and first-use/error pages remained free of horizontal overflow.
+
+Browser checks and mocked IPC do not establish Server compatibility, installed-package behavior, actual IME, screen-reader output, native confirmation presentation, or macOS qualification. Those remain platform acceptance work under #2108/#2109. Local installation and service management remain unavailable pending #2117; observation content remains unavailable pending #2105/#2106/#2107.
+
+2026-10-21 的本地验证使用 Windows x64、Node 24.14.1、pnpm 11.13.1，生成合同检查使用 Rust 1.95.0。48 项 UI 行为测试及类型、lint、生产构建检查通过；UI 测试使用模拟 IPC，覆盖导航、精确 Scope、草稿保护、迟到响应、键盘与焦点，以及现有业务流程。修改的安装验收 Python 脚本通过 Ruff 0.15.7 检查，本地未执行安装验收脚本。
+
+无头 Edge 155.0.4283.62 使用合成 IPC，检查中英文、三种主题及上述四组 CSS 视口，共 24 种组合，覆盖四个页面、三个观察标签、横向溢出、Scope 弹窗焦点、连接菜单和本机诊断错误。400×300 配合设备缩放因子 2 仅验证 800×600 在 200% 下的等效布局，不代表实际 WebView 缩放验收。真实 Server、安装包、IME、屏幕阅读器、原生确认框呈现和 macOS 仍需对应平台验收；本地安装和观察数据功能仍明确标注尚未可用。
+
+额外浏览器场景验证了四组视口中的草稿确认取消／接受，以及中英文在 800×600、400×400、400×300 下的未连接首次使用、本地 Server 入口和初始化失败状态。取消导航保留草稿，首次使用及错误页面没有横向溢出。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/tests/installed_lifecycle.py b/desktop/tests/installed_lifecycle.py
index 7d58880437..f856ac6f05 100644
--- a/desktop/tests/installed_lifecycle.py
+++ b/desktop/tests/installed_lifecycle.py
@@ -91,8 +91,8 @@ def exercise_single_instance(client: httpx.Client, prefix: str, app: subprocess.
             != "single-instance unsaved draft"
         ):
             raise HarnessFailure("installed_second_launch_changed_draft")
-    page.button("总览")
+    page.button("观察")
     page.post("/alert/dismiss", {})
-    page.button("总览")
+    page.button("观察")
     page.post("/alert/accept", {})
     return {"secondLaunchesExited": 3, "originalEditorAndDraftPreserved": True}
diff --git a/desktop/tests/installed_ui.py b/desktop/tests/installed_ui.py
index 151db1f886..27a47d95ac 100644
--- a/desktop/tests/installed_ui.py
+++ b/desktop/tests/installed_ui.py
@@ -86,12 +86,12 @@ def wait_packaged_page(client: httpx.Client, prefix: str) -> str:
         )
         response.raise_for_status()
         page = response.json()["value"]
-        if "总览" in page["text"]:
+        if all(label in page["text"] for label in ("记忆", "连接", "观察", "设置与帮助")):
             if not page["url"].startswith("http://tauri.localhost"):
                 raise HarnessFailure("installed_resources_not_packaged")
             return page["url"]
         time.sleep(0.2)
-    raise HarnessFailure("installed_overview_not_rendered")
+    raise HarnessFailure("installed_shell_not_rendered")
 
 
 def screenshot(client: httpx.Client, prefix: str, artifacts: Path) -> bool:
diff --git a/desktop/tests/installed_workflow.py b/desktop/tests/installed_workflow.py
index d0e793fdfa..e2b24b01d3 100644
--- a/desktop/tests/installed_workflow.py
+++ b/desktop/tests/installed_workflow.py
@@ -370,7 +370,7 @@ def exercise_late_save(page: InstalledPage) -> None:
             gate.unlink()
             # This is shown only after the old form refreshes the native write record.
             page.wait_text("连接或范围已改变，旧正文已隐藏。")  # noqa: RUF001 - exact localized UI
-            page.button("总览")
+            page.button("观察")
             page.post("/alert/dismiss", {})
             if page.observe("return document.querySelector('.memory-workspace textarea')?.value;") != draft:
                 raise HarnessFailure("installed_late_save_lost_new_draft")
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index 6fc3e89e4a..7a15d15506 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -14,54 +14,73 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { messages, type Language } from "./messages";
 import { getFoundationInfo, desktopApi } from "../shared/ipc";
 import type { FoundationInfo, DesktopState } from "../generated/ipc";
 import logo from "../../../src-tauri/icons/brand.png";
-import homeIcon from "../assets/overview.svg";
+import observationIcon from "../assets/overview.svg";
 import connectionsIcon from "../assets/connections.svg";
 import memoryIcon from "../assets/memory.svg";
 import settingsIcon from "../assets/settings.svg";
-
 import { TopBar } from "./TopBar";
-import { Overview } from "./Overview";
 import { MemoryWorkspace } from "./MemoryWorkspace";
-import { Diagnostics } from "./Diagnostics";
 import { Connections } from "./Connections";
 import { Scopes } from "./Scopes";
+import { Observation } from "./Observation";
+import { SettingsHelp } from "./SettingsHelp";
+import { PageFeedback } from "./PageFeedback";
+import type {
+  NavigationTarget,
+  ObservationTab,
+  Page,
+  Theme,
+} from "./navigation";
 import { connectionMessages, connectionError } from "./connection-messages";
 
-type Page = "home" | "connections" | "memories" | "settings";
-type Theme = "light" | "dark" | "system";
 export function App() {
   const [language, setLanguage] = useState<Language>("zh");
   const [theme, setTheme] = useState<Theme>("system");
-  const [page, setPage] = useState<Page>("home");
+  const [page, setPage] = useState<Page>("memories");
+  const [tab, setTab] = useState<ObservationTab>("runtime");
+  const [connectionSelection, setConnectionSelection] = useState({
+    id: null as string | null,
+    request: 0,
+  });
+  const [localServerRequest, setLocalServerRequest] = useState(0);
   const [menu, setMenu] = useState(false);
   const [host, setHost] = useState<FoundationInfo | null>(null);
   const [desktop, setDesktop] = useState<DesktopState | null>(null);
   const [nativeError, setNativeError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(true);
   const [dirty, setDirty] = useState(false);
   const [scopeOpen, setScopeOpen] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
+  const heading = useRef<HTMLHeadingElement>(null);
+  const scopeDialog = useRef<HTMLDivElement>(null);
+  const scopeReturnFocus = useRef<HTMLElement | null>(null);
+  const t = messages[language];
+  const ct = connectionMessages[language];
   function receiveState(next: DesktopState) {
     setDesktop((current) =>
       !current || next.generation >= current.generation ? next : current,
     );
   }
   function confirmSwitch() {
-    return !dirty || window.confirm(connectionMessages[language].discard);
+    return !dirty || window.confirm(ct.discard);
+  }
+  async function loadState() {
+    setLoading(true);
+    setNativeError(null);
+    try {
+      receiveState(await desktopApi.state());
+    } catch (error) {
+      setNativeError(error);
+    } finally {
+      setLoading(false);
+    }
   }
-  const activeProfile = desktop?.profiles.find(
-    (p) => p.id === desktop.active?.connectionId,
-  );
-  const activeReport = desktop?.active?.report;
-  const heading = useRef<HTMLHeadingElement>(null);
-  const t = messages[language];
-  const ct = connectionMessages[language];
   useEffect(() => {
-    desktopApi.state().then(receiveState).catch(setNativeError);
+    void loadState();
     getFoundationInfo()
       .then(setHost)
       .catch(() => setHost(null));
@@ -72,200 +91,253 @@ export function App() {
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
+  useLayoutEffect(() => {
+    heading.current?.focus();
+  }, [page]);
   useEffect(() => {
     if (!scopeOpen) return;
+    const previous = scopeReturnFocus.current;
+    const dialog = scopeDialog.current;
+    const background = document.querySelector<HTMLElement>(".app-background");
+    if (background) background.inert = true;
+    dialog?.querySelector<HTMLButtonElement>("button")?.focus();
     function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setScopeOpen(false);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setScopeOpen(false);
+      }
+      if (event.key !== "Tab") return;
+      const elements = Array.from(
+        dialog?.querySelectorAll<HTMLElement>(
+          'button:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex="0"]',
+        ) ?? [],
+      ).filter((element) => !element.matches(":disabled"));
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
     }
     document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (background) background.inert = false;
+      if (previous?.isConnected) previous.focus();
+      else
+        document
+          .querySelector<HTMLButtonElement>(".topbar-group button")
+          ?.focus();
+    };
   }, [scopeOpen]);
-  function navigate(next: Page) {
-    if (next === page || !confirmSwitch()) return;
+  function navigate(target: NavigationTarget) {
+    const samePage = target.page === page;
+    if (samePage && !(target.page === "connections" && target.connectionId)) {
+      if (target.page === "observation" && target.tab) setTab(target.tab);
+      if (target.page === "settings" && target.section)
+        setLocalServerRequest((value) => value + 1);
+      setMenu(false);
+      if (!(target.page === "settings" && target.section))
+        heading.current?.focus();
+      return;
+    }
+    if (!confirmSwitch()) return;
     setDirty(false);
-    setPage(next);
+    if (target.page === "connections")
+      setConnectionSelection((current) => ({
+        id: target.connectionId ?? null,
+        request: current.request + 1,
+      }));
+    if (target.page === "observation" && target.tab) setTab(target.tab);
+    if (target.page === "settings")
+      setLocalServerRequest((value) => (target.section ? value + 1 : 0));
+    setPage(target.page);
     setMenu(false);
-    requestAnimationFrame(() => heading.current?.focus());
+    if (samePage) heading.current?.focus();
   }
   function disconnect() {
     if (!confirmSwitch()) return;
-    setDirty(false);
     void desktopApi.disconnect().then(receiveState).catch(setNativeError);
   }
-  async function refresh() {
-    setRefreshing(true);
-    setNativeError(null);
-    try {
-      receiveState(
-        desktop?.active
-          ? await desktopApi.check(desktop.active.connectionId, false)
-          : await desktopApi.state(),
-      );
-    } catch (e) {
-      setNativeError(e);
-    } finally {
-      setRefreshing(false);
-    }
-  }
-  const ready = activeReport?.readiness.value?.status === "ready";
+  const activeProfile = desktop?.profiles.find(
+    (profile) => profile.id === desktop.active?.connectionId,
+  );
   return (
-    <div className="app">
-      <a className="skip" href="#main">
-        {t.skip}
-      </a>
-      <header className="mobile-bar">
-        <span>PowerContext</span>
-        <button
-          aria-expanded={menu}
-          aria-controls="navigation"
-          onClick={() => setMenu(!menu)}
-        >
-          {t.menu}
-        </button>
-      </header>
-      <aside id="navigation" className={menu ? "sidebar open" : "sidebar"}>
-        <div className="brand">
-          <img src={logo} alt="" />
-          <strong>PowerContext</strong>
-          <span className="brand-sub">{t.brandSub}</span>
-        </div>
-        <span className="brand-badge">{t.foundation}</span>
-        <nav aria-label={t.menu}>
-          {(["home", "connections", "memories"] as const).map((item, index) => (
-            <button
-              key={item}
-              aria-current={page === item ? "page" : undefined}
-              onClick={() => navigate(item)}
-            >
-              <img
-                className="nav-symbol"
-                alt=""
-                src={[homeIcon, connectionsIcon, memoryIcon][index]}
-              />
-              {t[item]}
-            </button>
-          ))}
-        </nav>
-        <div className="sidebar-bottom">
+    <div className="app-root">
+      <div className="app app-background">
+        <a className="skip" href="#main">
+          {t.skip}
+        </a>
+        <header className="mobile-bar">
+          <span>PowerContext</span>
           <button
-            aria-current={page === "settings" ? "page" : undefined}
-            onClick={() => navigate("settings")}
+            aria-expanded={menu}
+            aria-controls="navigation"
+            onClick={() => setMenu(!menu)}
           >
-            <img className="nav-symbol" alt="" src={settingsIcon} />
-            {t.settings}
+            {t.menu}
           </button>
-          <div className="sidebar-status">
+        </header>
+        <aside id="navigation" className={menu ? "sidebar open" : "sidebar"}>
+          <div className="brand">
+            <img src={logo} alt="" />
+            <strong>PowerContext</strong>
+            <span className="brand-sub">{t.brandSub}</span>
+          </div>
+          <span className="brand-badge">{t.foundation}</span>
+          <nav aria-label={t.menu}>
+            {(
+              ["memories", "connections", "observation", "settings"] as const
+            ).map((item, index) => (
+              <button
+                key={item}
+                aria-current={page === item ? "page" : undefined}
+                onClick={() => navigate({ page: item })}
+              >
+                <img
+                  className="nav-symbol"
+                  alt=""
+                  src={
+                    [
+                      memoryIcon,
+                      connectionsIcon,
+                      observationIcon,
+                      settingsIcon,
+                    ][index]
+                  }
+                />
+                {t[item]}
+              </button>
+            ))}
+          </nav>
+          <div className="sidebar-bottom">
             <p className="status">
-              <span
-                aria-hidden="true"
-                className={desktop?.active ? "dot ok" : "dot"}
-              />
-              {activeProfile?.name ?? t.disconnected}
+              {activeProfile?.name ??
+                (loading
+                  ? t.loading
+                  : desktop
+                    ? t.disconnected
+                    : t.unavailable)}
             </p>
             <p className="caption">{t.sidebarRunning}</p>
           </div>
-        </div>
-      </aside>
-      <div className="content">
-        <TopBar
-          state={desktop}
-          language={language}
-          onManageConnections={() => navigate("connections")}
-          onOpenScopes={() => setScopeOpen(true)}
-          onDisconnect={disconnect}
-        />
-        <main id="main">
-          <h1 className="sr-only" tabIndex={-1} ref={heading}>
-            {t[page]}
-          </h1>
-          {nativeError != null && (
-            <p role="alert">{connectionError(nativeError, language)}</p>
-          )}
-          {page === "memories" && desktop?.active && (
-            <div className="context-line">
-              <span>{activeProfile?.name}</span>
-              <span aria-hidden="true">·</span>
-              <span>{activeProfile?.endpoint}</span>
-              <span aria-hidden="true">·</span>
-              <span>{desktop.active.scope?.title ?? t.noScopeSelected}</span>
-              <span className={ready ? "badge success" : "badge subtle"}>
-                {ready ? t.serviceReady : t.unverified}
-              </span>
-            </div>
-          )}
-          {page === "home" && (
-            <Overview
-              state={desktop}
-              language={language}
-              onNavigate={navigate}
-              refreshing={refreshing}
-              onRefresh={() => void refresh()}
-            />
-          )}
-          {page === "memories" && (
-            <MemoryWorkspace
-              key={`memory-${desktop?.active?.generation ?? "none"}`}
-              state={desktop}
-              language={language}
-              onState={receiveState}
-              onDirty={setDirty}
-            />
-          )}
-          {page === "connections" && (
-            <Connections
-              state={desktop}
-              language={language}
-              onState={receiveState}
-              onDirty={setDirty}
-            />
-          )}
-          {page === "settings" && (
-            <div className="stack settings">
-              <section className="card">
-                <div className="setting-row">
-                  <label htmlFor="language">{t.language}</label>
-                  <select
-                    id="language"
-                    value={language}
-                    onChange={(e) => setLanguage(e.target.value as Language)}
+        </aside>
+        <div className="content">
+          <TopBar
+            state={desktop}
+            language={language}
+            onManageConnections={(connectionId) =>
+              navigate({ page: "connections", connectionId })
+            }
+            onOpenScopes={() => {
+              scopeReturnFocus.current = document.activeElement as HTMLElement;
+              setScopeOpen(true);
+            }}
+            onDisconnect={disconnect}
+          />
+          <main id="main">
+            <h1 tabIndex={-1} ref={heading}>
+              {t[page]}
+            </h1>
+            {loading && <PageFeedback kind="loading" title={t.loading} />}
+            {!loading && nativeError != null && (
+              <PageFeedback
+                kind="error"
+                title={desktop ? t.desktopError : t.stateFailed}
+                action={
+                  <button onClick={() => void loadState()}>
+                    {t.retryState}
+                  </button>
+                }
+              >
+                <p>{connectionError(nativeError, language)}</p>
+              </PageFeedback>
+            )}
+            {page === "memories" && (
+              <div className="stack">
+                {!loading && desktop && !desktop.active && (
+                  <PageFeedback
+                    kind="empty"
+                    title={t.noActiveTitle}
+                    action={
+                      <>
+                        <button
+                          onClick={() =>
+                            navigate({
+                              page: "settings",
+                              section: "local-server",
+                            })
+                          }
+                        >
+                          {t.setUpLocally}
+                        </button>
+                        <button
+                          className="primary"
+                          onClick={() => navigate({ page: "connections" })}
+                        >
+                          {t.connect}
+                        </button>
+                      </>
+                    }
                   >
-                    <option value="zh">简体中文</option>
-                    <option value="en">English</option>
-                  </select>
-                </div>
-                <div className="setting-row">
-                  <label htmlFor="theme">{t.theme}</label>
-                  <select
-                    id="theme"
-                    value={theme}
-                    onChange={(e) => setTheme(e.target.value as Theme)}
+                    <p>{t.firstUseDescription}</p>
+                  </PageFeedback>
+                )}
+                {desktop?.active && !desktop.active.scope && (
+                  <PageFeedback
+                    kind="empty"
+                    title={t.noScopeSelected}
+                    action={
+                      <button
+                        onClick={() => {
+                          scopeReturnFocus.current =
+                            document.activeElement as HTMLElement;
+                          setScopeOpen(true);
+                        }}
+                      >
+                        {t.chooseScope}
+                      </button>
+                    }
                   >
-                    <option value="system">{t.system}</option>
-                    <option value="light">{t.light}</option>
-                    <option value="dark">{t.dark}</option>
-                  </select>
-                </div>
-              </section>
-              <Diagnostics language={language} />
-              <section className="card">
-                <h2>{t.version}</h2>
-                <dl>
-                  <div>
-                    <dt>{t.version}</dt>
-                    <dd>{host?.version ?? "0.1.0"}</dd>
-                  </div>
-                  <div>
-                    <dt>{t.native}</dt>
-                    <dd role="status">
-                      {host ? t.nativeReady : t.unavailable}
-                    </dd>
-                  </div>
-                </dl>
-                <p>{t.boundary}</p>
-              </section>
-            </div>
-          )}
-        </main>
+                    <p>{t.selectScopeDescription}</p>
+                  </PageFeedback>
+                )}
+                <MemoryWorkspace
+                  key={`memory-${desktop?.active?.generation ?? "none"}`}
+                  state={desktop}
+                  language={language}
+                  onState={receiveState}
+                  onDirty={setDirty}
+                />
+              </div>
+            )}
+            {page === "connections" && (
+              <Connections
+                state={desktop}
+                language={language}
+                onState={receiveState}
+                onDirty={setDirty}
+                selection={connectionSelection}
+              />
+            )}
+            {page === "observation" && (
+              <Observation language={language} tab={tab} onTabChange={setTab} />
+            )}
+            {page === "settings" && (
+              <SettingsHelp
+                language={language}
+                theme={theme}
+                host={host}
+                onLanguage={setLanguage}
+                onTheme={setTheme}
+                localServerRequest={localServerRequest}
+              />
+            )}
+          </main>
+        </div>
       </div>
       {scopeOpen && (
         <div
@@ -279,6 +351,7 @@ export function App() {
             role="dialog"
             aria-modal="true"
             aria-label={ct.scope}
+            ref={scopeDialog}
           >
             <div className="modal-heading">
               <h2>{ct.scope}</h2>
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index c691e2dad2..7bb82f489c 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -33,10 +33,20 @@ type Props = {
   language: Language;
   onState: (value: DesktopState) => void;
   onDirty: (value: boolean) => void;
+  // External selection is accepted only after the application's draft guard.
+  selection?: { id: string | null; request: number };
 };
-export function Connections({ state, language, onState, onDirty }: Props) {
+export function Connections({
+  state,
+  language,
+  onState,
+  onDirty,
+  selection,
+}: Props) {
   const t = connectionMessages[language];
-  const [selected, setSelected] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(
+    selection?.id ?? null,
+  );
   const profile = state?.profiles.find((p) => p.id === selected);
   const report = state?.reports.find((r) => r.connectionId === selected);
   const [name, setName] = useState("");
@@ -78,6 +88,13 @@ export function Connections({ state, language, onState, onDirty }: Props) {
   useEffect(() => {
     reset(profile);
   }, [selected, profile?.revision]);
+  useEffect(() => {
+    if (!selection) return;
+    lifetime.current++;
+    setBusy(false);
+    setSelected(selection.id);
+    reset(state?.profiles.find((item) => item.id === selection.id));
+  }, [selection?.request]);
   function change(target = false) {
     setDirty(true);
     onDirty(true);
diff --git a/desktop/ui/src/app/Observation.tsx b/desktop/ui/src/app/Observation.tsx
new file mode 100644
index 0000000000..ada96b0fac
--- /dev/null
+++ b/desktop/ui/src/app/Observation.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from "react";
+import { messages, type Language } from "./messages";
+import type { ObservationTab } from "./navigation";
+import { PageFeedback } from "./PageFeedback";
+
+export function Observation({
+  language,
+  tab,
+  onTabChange,
+  panels = {},
+}: {
+  language: Language;
+  tab: ObservationTab;
+  onTabChange: (tab: ObservationTab) => void;
+  panels?: Partial<Record<ObservationTab, ReactNode>>;
+}) {
+  const t = messages[language];
+  const tabs: ObservationTab[] = ["runtime", "inventory", "session"];
+  return (
+    <div className="stack">
+      <div
+        className="observation-tabs"
+        role="tablist"
+        aria-label={t.observation}
+      >
+        {tabs.map((item, index) => (
+          <button
+            key={item}
+            id={`tab-${item}`}
+            role="tab"
+            aria-selected={tab === item}
+            aria-controls={`panel-${item}`}
+            tabIndex={tab === item ? 0 : -1}
+            onClick={() => onTabChange(item)}
+            onKeyDown={(event) => {
+              let next: ObservationTab;
+              if (event.key === "ArrowRight")
+                next = tabs[(index + 1) % tabs.length];
+              else if (event.key === "ArrowLeft")
+                next = tabs[(index + tabs.length - 1) % tabs.length];
+              else if (event.key === "Home") next = tabs[0];
+              else if (event.key === "End") next = tabs[tabs.length - 1];
+              else return;
+              event.preventDefault();
+              onTabChange(next);
+              document.getElementById(`tab-${next}`)?.focus();
+            }}
+          >
+            {t[item]}
+          </button>
+        ))}
+      </div>
+      {tabs.map((item) => (
+        <div
+          key={item}
+          id={`panel-${item}`}
+          role="tabpanel"
+          aria-labelledby={`tab-${item}`}
+          hidden={tab !== item}
+          tabIndex={0}
+        >
+          {tab === item &&
+            (panels[item] ?? (
+              <PageFeedback kind="unavailable" title={t.observationUnavailable}>
+                <p>{t[`${item}Description`]}</p>
+              </PageFeedback>
+            ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/desktop/ui/src/app/Overview.tsx b/desktop/ui/src/app/Overview.tsx
deleted file mode 100644
index 17381efc77..0000000000
--- a/desktop/ui/src/app/Overview.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * Copyright (c) 2026 OceanBase.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { DesktopState } from "../generated/ipc";
-import { messages, type Language } from "./messages";
-import memoryIcon from "../assets/memory.svg";
-import connectionsIcon from "../assets/connections.svg";
-import retrievalIcon from "../assets/retrieval.svg";
-
-type Page = "connections" | "memories" | "settings";
-type Props = {
-  state: DesktopState | null;
-  language: Language;
-  onNavigate: (page: Page) => void;
-  refreshing?: boolean;
-  onRefresh?: () => void;
-};
-export function Overview({
-  state,
-  language,
-  onNavigate,
-  refreshing = false,
-  onRefresh,
-}: Props) {
-  const t = messages[language];
-  const active = state?.active;
-  const profile = state?.profiles.find((p) => p.id === active?.connectionId);
-  const report =
-    state?.reports.find((item) => item.connectionId === active?.connectionId) ??
-    active?.report;
-  const readiness = report?.readiness.value?.status;
-  const enabled = !!active?.scope && !!report?.compatibilityVerified;
-  const principal = report?.anonymousAccess
-    ? null
-    : report?.identity.value?.principal;
-  const identity = !active
-    ? t.unverified
-    : report?.anonymousAccess
-      ? t.anonymousIdentity
-      : principal
-        ? (principal.description ?? `${principal.type}: ${principal.id}`)
-        : t.unverified;
-  const features = [
-    { icon: memoryIcon, name: t.featureSave, hint: t.featureSaveHint },
-    { icon: retrievalIcon, name: t.featureSearch, hint: t.featureSearchHint },
-    { icon: connectionsIcon, name: t.featureRead, hint: t.featureReadHint },
-  ];
-  const environment = [
-    t.envService,
-    t.envOwnership,
-    t.envAgent,
-    t.envConfig,
-    t.envHostLoad,
-    t.envCaptureRecall,
-  ];
-  return (
-    <div className="stack">
-      <section className="card">
-        <div className="card-heading">
-          <h2>{t.current}</h2>
-          <div className="actions">
-            {active && (
-              <span className={readyBadge(readiness)}>
-                {readiness === "ready"
-                  ? t.serviceReady
-                  : readiness
-                    ? t.serviceNotReady
-                    : t.unverified}
-              </span>
-            )}
-            {onRefresh && (
-              <button disabled={refreshing || !state} onClick={onRefresh}>
-                <span aria-hidden="true">↻ </span>
-                {refreshing ? t.refreshing : t.refresh}
-              </button>
-            )}
-          </div>
-        </div>
-        {active && profile ? (
-          <>
-            <div className="connection-summary">
-              <img src={connectionsIcon} alt="" />
-              <div>
-                <p className="name">{profile.name}</p>
-                <p className="endpoint">{profile.endpoint}</p>
-              </div>
-              <span className="topbar-spacer" />
-              <button onClick={() => onNavigate("connections")}>
-                {t.manage}
-              </button>
-            </div>
-            <dl className="fact-grid">
-              <div className="fact">
-                <dt>{t.identityLabel}</dt>
-                <dd>{identity}</dd>
-              </div>
-              <div className="fact">
-                <dt>{t.authLabel}</dt>
-                <dd>
-                  {profile.authentication === "bearer"
-                    ? t.authBearer
-                    : t.authAnonymous}
-                </dd>
-              </div>
-              <div className="fact">
-                <dt>{t.currentScopeLabel}</dt>
-                <dd>
-                  {active.scope
-                    ? `${active.scope.title} · ${t.exactScope}`
-                    : t.noScopeSelected}
-                </dd>
-              </div>
-              <div className="fact">
-                <dt>{t.compatibilityLabel}</dt>
-                <dd>
-                  {profile.compatibility
-                    ? `${profile.compatibility} · ${report?.compatibilityVerified ? t.compatibilityVerified : t.unverified}`
-                    : t.noCompatibilitySelected}
-                </dd>
-              </div>
-            </dl>
-            <p className="note-line">{t.readinessNote}</p>
-          </>
-        ) : (
-          <div className="empty-state">
-            <h3>{t.noActiveTitle}</h3>
-            <p>{t.noActiveBody}</p>
-            <button
-              className="primary"
-              onClick={() => onNavigate("connections")}
-            >
-              {t.connect}
-            </button>
-          </div>
-        )}
-      </section>
-      <div className="overview-grid">
-        <section className="card">
-          <div className="card-heading">
-            <h2>{t.features}</h2>
-          </div>
-          {features.map((feature) => (
-            <div className="feature-row" key={feature.name}>
-              <div>
-                <span className="feature-name">
-                  <img src={feature.icon} alt="" />
-                  {feature.name}
-                </span>
-                <p>{feature.hint}</p>
-              </div>
-              <span className={enabled ? "badge success" : "badge subtle"}>
-                {enabled ? t.available : t.notAvailable}
-              </span>
-            </div>
-          ))}
-          <p className="note-line">{t.catalogNote}</p>
-        </section>
-        <section className="card">
-          <div className="card-heading">
-            <h2>{t.localEnv}</h2>
-            <button onClick={() => onNavigate("settings")}>
-              {t.viewDiagnostics}
-            </button>
-          </div>
-          <dl>
-            {environment.map((item) => (
-              <div className="env-row" key={item}>
-                <dt>{item}</dt>
-                <dd>
-                  <span aria-hidden="true" className="dot" />
-                  {t.unverified}
-                </dd>
-              </div>
-            ))}
-          </dl>
-          <p className="note-line">{t.envNote}</p>
-        </section>
-      </div>
-      <section className="card">
-        <div className="card-heading">
-          <h2>{t.gettingStarted}</h2>
-        </div>
-        <p>{t.gettingStartedHint}</p>
-        <div className="steps">
-          <div className="step">
-            <span aria-hidden="true" className="step-no">
-              01
-            </span>
-            <div>
-              <h3>{t.stepSave}</h3>
-              <p>{t.stepSaveHint}</p>
-            </div>
-          </div>
-          <div className="step">
-            <span aria-hidden="true" className="step-no">
-              02
-            </span>
-            <div>
-              <h3>{t.stepSearch}</h3>
-              <p>{t.stepSearchHint}</p>
-            </div>
-          </div>
-        </div>
-        <p className="note-line">{t.overviewBoundary}</p>
-        <div className="actions getting-started-actions">
-          <span className="spacer" />
-          <button className="primary" onClick={() => onNavigate("memories")}>
-            {t.openMemories}
-          </button>
-        </div>
-      </section>
-    </div>
-  );
-  function readyBadge(status: string | null | undefined) {
-    return status === "ready" ? "badge success" : "badge subtle";
-  }
-}
diff --git a/desktop/ui/src/app/PageFeedback.tsx b/desktop/ui/src/app/PageFeedback.tsx
new file mode 100644
index 0000000000..1d78839d7a
--- /dev/null
+++ b/desktop/ui/src/app/PageFeedback.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from "react";
+
+export function PageFeedback({
+  kind,
+  title,
+  children,
+  action,
+}: {
+  kind: "loading" | "empty" | "unavailable" | "error";
+  title: string;
+  children?: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <section
+      className={`card stack page-feedback ${kind}`}
+      role={
+        kind === "error" ? "alert" : kind === "loading" ? "status" : undefined
+      }
+    >
+      <h2>{title}</h2>
+      {children && <div className="feedback-body">{children}</div>}
+      {action && <div className="actions">{action}</div>}
+    </section>
+  );
+}
diff --git a/desktop/ui/src/app/SettingsHelp.tsx b/desktop/ui/src/app/SettingsHelp.tsx
new file mode 100644
index 0000000000..36d5fcb4c2
--- /dev/null
+++ b/desktop/ui/src/app/SettingsHelp.tsx
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { FoundationInfo } from "../generated/ipc";
+import { Diagnostics } from "./Diagnostics";
+import { messages, type Language } from "./messages";
+import type { Theme } from "./navigation";
+import { PageFeedback } from "./PageFeedback";
+
+export function SettingsHelp({
+  language,
+  theme,
+  host,
+  onLanguage,
+  onTheme,
+  localServerRequest,
+}: {
+  language: Language;
+  theme: Theme;
+  host: FoundationInfo | null;
+  onLanguage: (language: Language) => void;
+  onTheme: (theme: Theme) => void;
+  localServerRequest: number;
+}) {
+  const t = messages[language];
+  const localServer = useRef<HTMLHeadingElement>(null);
+  const [copyResult, setCopyResult] = useState<"copied" | "copyFailed" | null>(
+    null,
+  );
+  useEffect(() => {
+    if (localServerRequest) {
+      localServer.current?.scrollIntoView?.({ block: "start" });
+      localServer.current?.focus();
+    }
+  }, [localServerRequest]);
+  useEffect(() => setCopyResult(null), [language]);
+  const guide = `https://github.com/oceanbase/powercontext/blob/master/desktop/README${language === "zh" ? ".zh" : ""}.md`;
+  const support = "https://github.com/oceanbase/powercontext/issues";
+  async function copy(value: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyResult("copied");
+    } catch {
+      setCopyResult("copyFailed");
+    }
+  }
+  return (
+    <div className="stack settings">
+      <section className="card stack">
+        <h2>{t.appearance}</h2>
+        <div className="setting-row">
+          <label htmlFor="language">{t.language}</label>
+          <select
+            id="language"
+            value={language}
+            onChange={(event) => onLanguage(event.target.value as Language)}
+          >
+            <option value="zh">简体中文</option>
+            <option value="en">English</option>
+          </select>
+        </div>
+        <div className="setting-row">
+          <label htmlFor="theme">{t.theme}</label>
+          <select
+            id="theme"
+            value={theme}
+            onChange={(event) => onTheme(event.target.value as Theme)}
+          >
+            <option value="system">{t.system}</option>
+            <option value="light">{t.light}</option>
+            <option value="dark">{t.dark}</option>
+          </select>
+        </div>
+      </section>
+      <section className="stack" aria-labelledby="local-server-heading">
+        <h2 id="local-server-heading" tabIndex={-1} ref={localServer}>
+          {t.localServer}
+        </h2>
+        <PageFeedback kind="unavailable" title={t.localSetupUnavailable}>
+          <p>{t.localSetupDescription}</p>
+          <p>{t.existingServerHelp}</p>
+        </PageFeedback>
+      </section>
+      <Diagnostics language={language} />
+      <section className="card stack">
+        <h2>{t.version}</h2>
+        <dl>
+          <div>
+            <dt>{t.version}</dt>
+            <dd>{host?.version ?? t.unknown}</dd>
+          </div>
+          <div>
+            <dt>{t.native}</dt>
+            <dd>{host ? t.nativeReady : t.unavailable}</dd>
+          </div>
+        </dl>
+        <p>{t.boundary}</p>
+      </section>
+      <section className="card stack">
+        <h2>{t.help}</h2>
+        <p>{t.guideDescription}</p>
+        <code>{guide}</code>
+        <div className="actions">
+          <button onClick={() => void copy(guide)}>{t.copyGuide}</button>
+        </div>
+        <p>{t.supportDescription}</p>
+        <code>{support}</code>
+        <div className="actions">
+          <button onClick={() => void copy(support)}>{t.copySupport}</button>
+        </div>
+        {copyResult && (
+          <p role={copyResult === "copied" ? "status" : "alert"}>
+            {t[copyResult]}
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index 274ba3b963..6feac2251f 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import type { DesktopState } from "../generated/ipc";
 import { messages, type Language } from "./messages";
 import { connectionMessages } from "./connection-messages";
@@ -22,7 +22,7 @@ import { connectionMessages } from "./connection-messages";
 type Props = {
   state: DesktopState | null;
   language: Language;
-  onManageConnections: () => void;
+  onManageConnections: (connectionId?: string) => void;
   onOpenScopes: () => void;
   onDisconnect: () => void;
 };
@@ -35,17 +35,21 @@ export function TopBar({
 }: Props) {
   const t = messages[language];
   const ct = connectionMessages[language];
-  const [open, setOpen] = useState<"connection" | "identity" | null>(null);
+  const [open, setOpen] = useState(false);
   const wrap = useRef<HTMLDivElement>(null);
+  const connectionWrap = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+  const firstItem = useRef(0);
+  const menuId = useId();
   useEffect(() => {
     const bar = wrap.current;
     if (!bar) return;
-    const update = () => {
+    const update = () =>
       document.documentElement.style.setProperty(
         "--topbar-height",
         `${bar.getBoundingClientRect().height}px`,
       );
-    };
     update();
     const observer =
       typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
@@ -57,149 +61,244 @@ export function TopBar({
   }, []);
   useEffect(() => {
     if (!open) return;
+    const items =
+      menu.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+    items?.[firstItem.current === -1 ? items.length - 1 : 0]?.focus();
     function onPointerDown(event: PointerEvent) {
-      if (event.target instanceof Node && !wrap.current?.contains(event.target))
-        setOpen(null);
-    }
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setOpen(null);
+      if (
+        event.target instanceof Node &&
+        !connectionWrap.current?.contains(event.target)
+      )
+        setOpen(false);
     }
     document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
+    return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [open]);
   const active = state?.active;
-  const report = active?.report;
   const activeProfile = state?.profiles.find(
-    (p) => p.id === active?.connectionId,
+    (profile) => profile.id === active?.connectionId,
   );
+  const latest = state?.reports.find(
+    (report) =>
+      report.connectionId === active?.connectionId &&
+      report.revision === active?.report.revision,
+  );
+  const report =
+    latest && active && latest.checkedAt >= active.report.checkedAt
+      ? latest
+      : active?.report;
   const principal = report?.anonymousAccess
     ? null
     : report?.identity.value?.principal;
   const identityText = !active
-    ? t.notConnected
+    ? t.unverified
     : report?.anonymousAccess
       ? t.anonymousIdentity
       : principal
         ? (principal.description ?? `${principal.type}: ${principal.id}`)
         : t.identityUnverified;
+  function closeMenu() {
+    setOpen(false);
+    trigger.current?.focus();
+  }
   return (
     <div className="topbar" ref={wrap}>
-      <div className="menu-wrap">
+      <div className="menu-wrap" ref={connectionWrap}>
         <button
           className="menu-trigger"
-          aria-expanded={open === "connection"}
+          aria-expanded={open}
           aria-haspopup="menu"
-          onClick={() => setOpen(open === "connection" ? null : "connection")}
+          aria-controls={menuId}
+          ref={trigger}
+          aria-label={`${t.current}: ${activeProfile?.name ?? (state ? t.notConnected : t.unverified)}`}
+          onClick={() => {
+            firstItem.current = 0;
+            setOpen(!open);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+              event.preventDefault();
+              firstItem.current = event.key === "ArrowUp" ? -1 : 0;
+              setOpen(true);
+            }
+          }}
         >
-          <span className="label">{activeProfile?.name ?? t.notConnected}</span>
+          <span className="label">
+            {activeProfile?.name ?? (state ? t.notConnected : t.unverified)}
+          </span>
           <span aria-hidden="true">▾</span>
         </button>
-        {open === "connection" && (
-          <div className="menu" role="menu">
-            {state?.profiles.map((p) => (
+        {open && (
+          <div
+            className="menu"
+            id={menuId}
+            role="menu"
+            aria-label={t.manageConnections}
+            ref={menu}
+            onBlur={(event) => {
+              if (
+                event.relatedTarget instanceof Node &&
+                !connectionWrap.current?.contains(event.relatedTarget)
+              )
+                setOpen(false);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                closeMenu();
+                return;
+              }
+              if (event.key === "Tab") {
+                setOpen(false);
+                return;
+              }
+              const items = Array.from(
+                menu.current?.querySelectorAll<HTMLButtonElement>(
+                  '[role="menuitem"]',
+                ) ?? [],
+              );
+              const index = items.indexOf(
+                document.activeElement as HTMLButtonElement,
+              );
+              let next: number;
+              if (event.key === "ArrowDown") next = (index + 1) % items.length;
+              else if (event.key === "ArrowUp")
+                next = (index + items.length - 1) % items.length;
+              else if (event.key === "Home") next = 0;
+              else if (event.key === "End") next = items.length - 1;
+              else return;
+              event.preventDefault();
+              items[next]?.focus();
+            }}
+          >
+            {state?.profiles.map((profile) => (
               <button
-                key={p.id}
+                key={profile.id}
                 className="menu-item"
                 role="menuitem"
+                tabIndex={-1}
                 onClick={() => {
-                  setOpen(null);
-                  onManageConnections();
+                  closeMenu();
+                  onManageConnections(profile.id);
                 }}
               >
                 <span>
-                  {p.name}
-                  {state.active?.connectionId === p.id
+                  {profile.name}
+                  {active?.connectionId === profile.id
                     ? ` · ${ct.activeBadge}`
                     : ""}
                 </span>
-                <span className="meta">{p.endpoint}</span>
+                <span className="meta">{profile.endpoint}</span>
               </button>
             ))}
-            {state?.profiles.length ? <div className="menu-separator" /> : null}
             <button
               className="menu-item"
               role="menuitem"
+              tabIndex={-1}
               onClick={() => {
-                setOpen(null);
+                closeMenu();
                 onManageConnections();
               }}
             >
               {t.manageConnections}
             </button>
-            {state?.active && (
-              <>
-                <div className="menu-separator" />
-                <button
-                  className="menu-item"
-                  role="menuitem"
-                  onClick={() => {
-                    setOpen(null);
-                    onDisconnect();
-                  }}
-                >
-                  {ct.disconnect}
-                </button>
-              </>
+            {active && (
+              <button
+                className="menu-item"
+                role="menuitem"
+                tabIndex={-1}
+                onClick={() => {
+                  closeMenu();
+                  onDisconnect();
+                }}
+              >
+                {ct.disconnect}
+              </button>
             )}
             <p className="menu-note">{t.switchHint}</p>
           </div>
         )}
       </div>
-      <span className={active ? "status-pill ok" : "status-pill"} role="status">
-        <span aria-hidden="true" className={active ? "dot ok" : "dot"} />
-        {active ? t.connected : t.notConnected}
+      <span className="status-pill">
+        {active ? t.connected : state ? t.notConnected : t.unverified}
       </span>
-      <span aria-hidden="true" className="divider" />
       <div className="topbar-group">
         <span className="topbar-label">{t.scopeLabel}</span>
-        <button className="menu-trigger" onClick={onOpenScopes}>
-          <span className="label">
-            {active?.scope?.title ?? t.noScopeSelected}
-          </span>
-          <span aria-hidden="true">▾</span>
-        </button>
-      </div>
-      <span className="topbar-spacer" />
-      <div className="menu-wrap">
         <button
           className="menu-trigger"
-          aria-expanded={open === "identity"}
-          aria-haspopup="menu"
-          onClick={() => setOpen(open === "identity" ? null : "identity")}
+          disabled={!active}
+          onClick={onOpenScopes}
+          aria-haspopup="dialog"
         >
-          <span className="label">{identityText}</span>
+          <span>{active?.scope?.title ?? t.noScopeSelected}</span>
           <span aria-hidden="true">▾</span>
         </button>
-        {open === "identity" && (
-          <div className="menu right" role="menu">
-            <p className="menu-note">
-              <strong>{t.identityDetails}</strong>
-            </p>
-            {principal ? (
-              <>
-                <p className="menu-note">
-                  {principal.type}: {principal.id}
-                  {principal.description ? ` · ${principal.description}` : ""}
-                </p>
-                <p className="menu-note">
-                  {t.accessMode}: {report?.identity.value?.mode ?? t.unverified}
-                </p>
-              </>
-            ) : (
-              <p className="menu-note">
-                {report?.anonymousAccess ? ct.noIdentity : t.identityUnverified}
-              </p>
+      </div>
+      <div className="global-context">
+        {activeProfile && (
+          <p className="context-endpoint">{activeProfile.endpoint}</p>
+        )}
+        {active?.scope && (
+          <p>
+            <span>{t.exactScope}: </span>
+            <code>{active.scope.scope_id}</code>
+          </p>
+        )}
+        {active && (
+          <dl className="context-facts">
+            <div>
+              <dt>{t.identityLabel}</dt>
+              <dd>{identityText}</dd>
+            </div>
+            <div>
+              <dt>{t.compatibility}</dt>
+              <dd>
+                {report?.compatibilityVerified
+                  ? t.compatibilityVerified
+                  : t.unverified}
+              </dd>
+            </div>
+            <div>
+              <dt>{t.liveness}</dt>
+              <dd>{report?.liveness.value?.status ?? t.unverified}</dd>
+            </div>
+            <div>
+              <dt>{t.readiness}</dt>
+              <dd>
+                {report?.readiness.value?.status === "ready"
+                  ? t.serviceReady
+                  : report?.readiness.value
+                    ? t.serviceNotReady
+                    : t.unverified}
+              </dd>
+            </div>
+          </dl>
+        )}
+        {report && (
+          <p className="small">
+            {t.lastChecked}:{" "}
+            {new Date(report.checkedAt * 1000).toLocaleString(
+              language === "zh" ? "zh-CN" : "en-US",
             )}
-          </div>
+            . {t.readinessNote}
+          </p>
         )}
       </div>
-      <span aria-hidden="true" className="avatar">
-        {identityText.charAt(0).toUpperCase()}
-      </span>
+      {active && (
+        <details className="identity-details" key={active.generation}>
+          <summary>{t.identityDetails}</summary>
+          {principal ? (
+            <p>
+              {principal.type}: {principal.id} · {t.accessMode}:{" "}
+              {report?.identity.value?.mode ?? t.unverified}
+            </p>
+          ) : (
+            <p>
+              {report?.anonymousAccess ? ct.noIdentity : t.identityUnverified}
+            </p>
+          )}
+        </details>
+      )}
     </div>
   );
 }
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index a2af9d486a..0cdc2ef4f3 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,10 +16,48 @@
 
 export const messages = {
   zh: {
-    home: "总览",
+    observation: "观察",
+    runtime: "运行状态",
+    inventory: "当前 Scope 库存与用量",
+    session: "本次会话",
+    observationUnavailable: "此观察视图尚未可用",
+    runtimeDescription:
+      "运行状态视图将展示所连接 Server 的健康、能力和处理观察，以及单独标注的本地服务事实。当前不会自动执行检查。",
+    inventoryDescription:
+      "此视图将展示当前精确 Scope 的库存和用量。尚未接入数据；未知值不表示为零。",
+    sessionDescription:
+      "此视图将展示本次 Desktop 会话的有限请求汇总。当前尚未提供请求统计或安全诊断摘要复制。",
+    loading: "正在加载 Desktop 状态…",
+    stateFailed: "无法加载 Desktop 状态",
+    desktopError: "Desktop 操作失败",
+    retryState: "重试加载",
+    setUpLocally: "本地设置",
+    firstUseDescription:
+      "在本机准备 Server，或连接已有 Server，然后选择精确 Scope 开始保存、搜索和读取记忆。本地设置的可用情况见设置说明。",
+    selectScopeDescription:
+      "选择 Desktop 保存和搜索使用的精确 Scope；这不会修改 Agent 绑定。",
+    appearance: "语言与外观",
+    localServer: "本地 Server",
+    localSetupUnavailable: "本地安装与服务管理尚未可用",
+    localSetupDescription:
+      "此 Desktop 尚未提供安装、启动、修复或移除本地 Server 的操作。即使 Server 未运行，仍可查看本说明和本地诊断。",
+    existingServerHelp:
+      "可以按使用指南独立准备 Server，或向管理员获取地址和适用的凭据，再到“连接”保存配置并显式激活。",
+    help: "帮助与支持",
+    guideDescription:
+      "使用指南包含独立准备 Server 的前提、连接步骤和本地 CLI 诊断说明。复制链接后在浏览器中打开。",
+    supportDescription:
+      "在问题反馈页面报告问题；分享诊断信息前请去除凭据、内容和其他敏感信息。",
+    copyGuide: "复制使用指南链接",
+    copySupport: "复制问题反馈链接",
+    copied: "链接已复制。",
+    copyFailed: "无法复制链接，请手动选择并复制地址。",
+    unknown: "未知",
+    liveness: "存活状态",
+    lastChecked: "上次检查",
     connections: "连接",
     memories: "记忆",
-    settings: "设置与诊断",
+    settings: "设置与帮助",
     menu: "导航菜单",
     tagline: "确认连接状态，开始保存与检索记忆。",
     connectionIntro: "保存 Server 地址与凭据，在不同连接之间切换。",
@@ -129,10 +167,50 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
-    home: "Overview",
+    observation: "Observation",
+    runtime: "Runtime state",
+    inventory: "Current-Scope inventory & usage",
+    session: "This session",
+    observationUnavailable: "This observation view is not available yet",
+    runtimeDescription:
+      "This view will show connected-Server health, capabilities and processing observations, with separately labelled local service facts. It does not run checks automatically.",
+    inventoryDescription:
+      "This view will show inventory and usage for the current exact Scope. Data is not connected yet; unknown values are not zero.",
+    sessionDescription:
+      "This view will show bounded request summaries for this Desktop session. Request statistics and safe diagnostic summary copying are not available yet.",
+    loading: "Loading Desktop state…",
+    stateFailed: "Could not load Desktop state",
+    desktopError: "Desktop operation failed",
+    retryState: "Retry loading",
+    setUpLocally: "Set up locally",
+    firstUseDescription:
+      "Prepare a local Server or connect an existing Server, then select an exact Scope to save, search and read memories. See settings for local setup availability.",
+    selectScopeDescription:
+      "Select the exact Scope for Desktop saves and searches. This does not change Agent bindings.",
+    appearance: "Language & appearance",
+    localServer: "Local Server",
+    localSetupUnavailable:
+      "Local installation and service management are not available yet",
+    localSetupDescription:
+      "This Desktop does not yet offer local Server installation, start, repair or removal. This guidance and local diagnostics remain accessible when the Server is not running.",
+    existingServerHelp:
+      "Follow the usage guide to prepare a Server independently, or obtain its address and applicable credentials from an administrator. Save its configuration in Connections and explicitly activate it.",
+    help: "Help & support",
+    guideDescription:
+      "The usage guide covers prerequisites for an independently prepared Server, connection steps and local CLI diagnostics. Copy the link and open it in a browser.",
+    supportDescription:
+      "Report problems on the issue tracker. Remove credentials, content and other sensitive information before sharing diagnostics.",
+    copyGuide: "Copy usage guide link",
+    copySupport: "Copy support link",
+    copied: "Link copied.",
+    copyFailed:
+      "Could not copy the link. Select and copy the address manually.",
+    unknown: "Unknown",
+    liveness: "Liveness",
+    lastChecked: "Last checked",
     connections: "Connections",
     memories: "Memories",
-    settings: "Settings & diagnostics",
+    settings: "Settings & help",
     menu: "Navigation",
     tagline: "Check the connection status, then save and search memories.",
     connectionIntro:
diff --git a/desktop/ui/src/app/navigation.ts b/desktop/ui/src/app/navigation.ts
new file mode 100644
index 0000000000..7cdd003a55
--- /dev/null
+++ b/desktop/ui/src/app/navigation.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type Page = "memories" | "connections" | "observation" | "settings";
+export type ObservationTab = "runtime" | "inventory" | "session";
+export type Theme = "light" | "dark" | "system";
+export type NavigationTarget =
+  | { page: "memories" }
+  | { page: "connections"; connectionId?: string }
+  | { page: "observation"; tab?: ObservationTab }
+  | { page: "settings"; section?: "local-server" };
diff --git a/desktop/ui/src/app/style.css b/desktop/ui/src/app/style.css
index a23d56477a..c02bd0bd64 100644
--- a/desktop/ui/src/app/style.css
+++ b/desktop/ui/src/app/style.css
@@ -318,8 +318,10 @@ main {
   top: calc(100% + 6px);
   left: 0;
   z-index: 20;
-  min-width: 260px;
-  max-width: 360px;
+  width: min(360px, calc(100vw - 32px));
+  min-width: 0;
+  max-height: min(480px, 60dvh);
+  overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -350,6 +352,75 @@ main {
   color: var(--muted);
   overflow-wrap: anywhere;
 }
+
+/* Context and page containers remain readable with long exact identities. */
+.global-context {
+  flex-basis: 100%;
+  min-width: 0;
+}
+.global-context p {
+  margin: 4px 0;
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+.context-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 24px;
+  margin: 8px 0;
+  font-size: 14px;
+}
+.context-facts > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+}
+.context-facts dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.identity-details {
+  width: 100%;
+  min-width: 0;
+}
+.identity-details p,
+.topbar-group button {
+  overflow-wrap: anywhere;
+}
+.topbar-group button {
+  text-align: left;
+  min-width: 0;
+}
+.observation-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.observation-tabs [aria-selected="true"] {
+  border-color: var(--accent);
+  background: var(--selected);
+  color: var(--accent);
+  font-weight: 600;
+}
+.page-feedback {
+  margin: 16px 0;
+}
+.page-feedback h2 {
+  margin-bottom: 0;
+}
+.page-feedback.error {
+  border-inline-start: 4px solid var(--accent);
+}
+.feedback-body p:last-child {
+  margin-bottom: 0;
+}
+[tabindex="-1"]:focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+}
 .menu-separator {
   border-top: 1px solid var(--border);
   margin: 6px 4px;
@@ -1094,10 +1165,20 @@ footer {
 }
 @media (forced-colors: active) {
   button[aria-current="page"],
-  .notice {
+  .notice,
+  .observation-tabs [aria-selected="true"] {
     border: 2px solid Highlight;
   }
   .dot {
     background: CanvasText;
   }
 }
+
+@media (max-width: 700px), (max-height: 600px) {
+  .topbar {
+    position: static;
+  }
+  :root {
+    scroll-padding-top: 16px;
+  }
+}
diff --git a/desktop/ui/tests/app.test.tsx b/desktop/ui/tests/app.test.tsx
index 2b13e7d2d1..f752c96ce7 100644
--- a/desktop/ui/tests/app.test.tsx
+++ b/desktop/ui/tests/app.test.tsx
@@ -14,22 +14,122 @@
  * limitations under the License.
  */
 
-import { afterEach, expect, test } from "vitest";
-import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import {
+  act,
+  cleanup,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { App } from "../src/app/App";
-afterEach(cleanup);
-test("disconnected shell prevents writes and search and explains the boundary", async () => {
+import { TopBar } from "../src/app/TopBar";
+import { Observation } from "../src/app/Observation";
+import { SettingsHelp } from "../src/app/SettingsHelp";
+import { MemoryWorkspace } from "../src/app/MemoryWorkspace";
+import { desktopApi, getFoundationInfo } from "../src/shared/ipc";
+import type { DesktopState, ProfileView } from "../src/generated/ipc";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn(),
+  desktopApi: {
+    state: vi.fn(),
+    save: vi.fn(),
+    check: vi.fn(),
+    disconnect: vi.fn(),
+    scopes: vi.fn(),
+    selectScope: vi.fn(),
+    cancelScopes: vi.fn(),
+    cancelMemory: vi.fn(),
+    remember: vi.fn(),
+    search: vi.fn(),
+    atomicEntry: vi.fn(),
+    diagnostics: vi.fn(),
+  },
+}));
+const firstProfile: ProfileView = {
+  id: "connection-a",
+  revision: 1,
+  name: "First",
+  endpoint: "http://127.0.0.1:8000/",
+  authentication: "unauthenticated_loopback",
+  caPem: null,
+  compatibility: null,
+  credentialState: "not_required",
+};
+const secondProfile = {
+  ...firstProfile,
+  id: "connection-b",
+  name: "Second",
+  endpoint: "http://127.0.0.1:9000/",
+};
+const disconnected: DesktopState = {
+  generation: 0,
+  profiles: [firstProfile, secondProfile],
+  reports: [],
+  active: null,
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+const fact = { value: null, error: null };
+const report = {
+  connectionId: firstProfile.id,
+  revision: 1,
+  checkedAt: 1,
+  liveness: fact,
+  readiness: fact,
+  identity: fact,
+  capabilities: fact,
+  compatibilityVerified: true,
+  anonymousAccess: true,
+  supportedOperations: [],
+};
+const scope = {
+  scope_id: "scope-a",
+  title: "Same scope title",
+  summary: "",
+  context_references: [],
+  external_references: [],
+  version: 1,
+};
+const connected: DesktopState = {
+  ...disconnected,
+  generation: 1,
+  active: { connectionId: firstProfile.id, generation: 1, report, scope },
+};
+const nav = (name: string) =>
+  within(screen.getByRole("navigation")).getByRole("button", {
+    name,
+  });
+const connectionTrigger = () =>
+  screen.getByRole("button", { name: /^当前连接:/ });
+beforeEach(() => {
+  vi.resetAllMocks();
+  vi.mocked(getFoundationInfo).mockResolvedValue(null);
+  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+  vi.mocked(desktopApi.cancelMemory).mockResolvedValue(undefined);
+  vi.mocked(desktopApi.cancelScopes).mockResolvedValue(undefined);
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+test("four entries expose both first-use paths and retain disabled disconnected Memory operations", async () => {
   const user = userEvent.setup();
   render(<App />);
-  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
-  await user.click(screen.getByRole("button", { name: /连接已有服务/ }));
-  expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
   expect(
-    (screen.getByRole("button", { name: "保存配置" }) as HTMLButtonElement)
-      .disabled,
-  ).toBe(true);
-  await user.click(screen.getByRole("button", { name: "记忆" }));
+    await screen.findByRole("heading", { name: "尚未连接服务" }),
+  ).toBeTruthy();
+  expect(
+    within(screen.getByRole("navigation"))
+      .getAllByRole("button")
+      .map((button) => button.textContent),
+  ).toEqual(["记忆", "连接", "观察", "设置与帮助"]);
+  expect(screen.getByRole("heading", { level: 1, name: "记忆" })).toBeTruthy();
   expect(
     (screen.getByRole("button", { name: "保存" }) as HTMLButtonElement)
       .disabled,
@@ -38,22 +138,437 @@ test("disconnected shell prevents writes and search and explains the boundary",
     (screen.getByRole("button", { name: "搜索" }) as HTMLButtonElement)
       .disabled,
   ).toBe(true);
-  expect(screen.queryByText(/正文和搜索结果只在内存中使用/)).toBeNull();
+  await user.click(screen.getByRole("button", { name: "本地设置" }));
+  const local = screen.getByRole("heading", { name: "本地 Server" });
+  await waitFor(() => expect(document.activeElement).toBe(local));
+  expect(screen.getByText("本地安装与服务管理尚未可用")).toBeTruthy();
+  expect(desktopApi.check).not.toHaveBeenCalled();
+  expect(desktopApi.diagnostics).not.toHaveBeenCalled();
+  await user.click(nav("记忆"));
+  await user.click(screen.getByRole("button", { name: "连接已有服务" }));
+  expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
+});
+
+test("loading, failed initialization and a successful disconnected retry have distinct presentation", async () => {
+  const user = userEvent.setup();
+  let reject!: (reason: unknown) => void;
+  vi.mocked(desktopApi.state).mockImplementationOnce(
+    () =>
+      new Promise((_, fail) => {
+        reject = fail;
+      }),
+  );
+  render(<App />);
+  expect(screen.getByRole("status").textContent).toBe("正在加载 Desktop 状态…");
+  expect(screen.queryByRole("button", { name: "本地设置" })).toBeNull();
+  await act(async () => reject({ code: "storage" }));
+  expect(screen.getByRole("alert").textContent).toContain(
+    "无法加载 Desktop 状态",
+  );
+  expect(screen.queryByRole("button", { name: "本地设置" })).toBeNull();
+  await user.click(nav("设置与帮助"));
+  expect(screen.getByRole("heading", { name: "本地 Server" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "重试加载" }));
+  await user.click(nav("记忆"));
+  expect(await screen.findByRole("button", { name: "本地设置" })).toBeTruthy();
+  expect(screen.queryByRole("alert")).toBeNull();
 });
-test("navigation, bilingual settings and theme remain usable without the native host", async () => {
+
+test("settings, bilingual navigation and theme work without the native host and never invent a version", async () => {
   const user = userEvent.setup();
   render(<App />);
-  await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+  await user.click(nav("设置与帮助"));
   await user.selectOptions(screen.getByLabelText("语言"), "en");
   expect(screen.getByRole("heading", { level: 1 }).textContent).toBe(
-    "Settings & diagnostics",
+    "Settings & help",
   );
+  expect(screen.getByRole("heading", { name: "Local Server" })).toBeTruthy();
+  expect(screen.queryByText("0.1.0")).toBeNull();
+  expect(screen.getByText("Unknown")).toBeTruthy();
   await user.selectOptions(screen.getByLabelText("Theme"), "dark");
   expect(document.documentElement.dataset.theme).toBe("dark");
   expect(document.documentElement.lang).toBe("en");
-  await user.click(screen.getByRole("button", { name: /Memories/ }));
+  await user.selectOptions(screen.getByLabelText("Theme"), "light");
+  expect(document.documentElement.dataset.theme).toBe("light");
+  await user.selectOptions(screen.getByLabelText("Theme"), "system");
+  expect(document.documentElement.dataset.theme).toBe("system");
+  await user.click(nav("Memories"));
   expect(
     screen.getByText("Enter keywords to find existing memories."),
   ).toBeTruthy();
-  expect(screen.queryByRole("list")).toBeNull();
+});
+
+test("Observation has three keyboard-accessible unavailable panels without automatic checks", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.state).mockResolvedValue(connected);
+  render(<App />);
+  await user.click(nav("观察"));
+  const runtime = screen.getByRole("tab", { name: "运行状态" });
+  await user.click(runtime);
+  await user.keyboard("{ArrowRight}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("tab", { name: "当前 Scope 库存与用量" }),
+  );
+  expect(screen.getByRole("tabpanel").textContent).toContain(
+    "未知值不表示为零",
+  );
+  await user.keyboard("{End}");
+  expect(screen.getByRole("tabpanel").textContent).toContain(
+    "安全诊断摘要复制",
+  );
+  await user.keyboard("{Home}{ArrowLeft}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("tab", { name: "本次会话" }),
+  );
+  expect(screen.getAllByRole("tab")).toHaveLength(3);
+  expect(desktopApi.check).not.toHaveBeenCalled();
+  expect(desktopApi.diagnostics).not.toHaveBeenCalled();
+  expect(desktopApi.search).not.toHaveBeenCalled();
+});
+
+test("each observation panel accepts its owning feature's content", () => {
+  render(
+    <Observation
+      language="en"
+      tab="inventory"
+      onTabChange={vi.fn()}
+      panels={{ inventory: <p>Exact Scope inventory supplied by its owner</p> }}
+    />,
+  );
+  expect(screen.getByRole("tabpanel").textContent).toBe(
+    "Exact Scope inventory supplied by its owner",
+  );
+  expect(
+    screen.queryByText("This observation view is not available yet"),
+  ).toBeNull();
+});
+
+test("a saved connection menu item opens that configuration without activating it", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await screen.findByRole("button", { name: "本地设置" });
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
+  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
+    "Second",
+  );
+  expect(desktopApi.check).not.toHaveBeenCalled();
+  await waitFor(() =>
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: "连接" }),
+    ),
+  );
+});
+
+test("canceling external connection selection keeps the editor and its draft intact", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await screen.findByRole("button", { name: "本地设置" });
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /First/ }));
+  await user.type(screen.getByLabelText("连接名称"), " draft");
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
+  expect(confirm).toHaveBeenCalled();
+  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
+    "First draft",
+  );
+  confirm.mockReturnValue(true);
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
+  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
+    "Second",
+  );
+  expect(desktopApi.check).not.toHaveBeenCalled();
+});
+
+test("connection menu supports arrows, Home, End, Escape and focus return", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await screen.findByRole("button", { name: "本地设置" });
+  connectionTrigger().focus();
+  await user.keyboard("{ArrowDown}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: /First/ }),
+  );
+  await user.keyboard("{ArrowDown}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: /Second/ }),
+  );
+  await user.keyboard("{End}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: "管理连接" }),
+  );
+  await user.keyboard("{Home}{ArrowUp}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: "管理连接" }),
+  );
+  await user.keyboard("{Escape}");
+  expect(screen.queryByRole("menu")).toBeNull();
+  expect(document.activeElement).toBe(connectionTrigger());
+  await user.keyboard("{ArrowUp}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: "管理连接" }),
+  );
+});
+
+test("a late save cannot replace an externally selected connection's new draft", async () => {
+  const user = userEvent.setup();
+  let finish!: (state: DesktopState) => void;
+  vi.mocked(desktopApi.save).mockImplementationOnce(
+    () =>
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+  );
+  vi.spyOn(window, "confirm").mockReturnValue(true);
+  render(<App />);
+  await screen.findByRole("button", { name: "本地设置" });
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /First/ }));
+  await user.type(screen.getByLabelText("连接名称"), " saved");
+  await user.click(screen.getByRole("button", { name: "保存配置" }));
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
+  await act(async () =>
+    finish({
+      ...disconnected,
+      profiles: [
+        { ...firstProfile, revision: 2, name: "First saved" },
+        secondProfile,
+      ],
+    }),
+  );
+  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
+    "Second",
+  );
+  await user.type(screen.getByLabelText("连接名称"), " draft");
+  vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(nav("观察"));
+  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
+    "Second draft",
+  );
+});
+
+test("a failed disconnect preserves the draft's navigation protection", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.state).mockResolvedValue(connected);
+  vi.mocked(desktopApi.disconnect).mockRejectedValue({ code: "storage" });
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+  render(<App />);
+  await screen.findByRole("button", { name: scope.title });
+  await user.type(screen.getByLabelText("记忆内容"), "unsaved");
+  await user.click(connectionTrigger());
+  await user.click(screen.getByRole("menuitem", { name: "断开桌面连接" }));
+  await screen.findByRole("alert");
+  confirm.mockClear().mockReturnValue(false);
+  await user.click(nav("观察"));
+  expect(confirm).toHaveBeenCalled();
+  expect((screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value).toBe(
+    "unsaved",
+  );
+});
+
+test("scope dialog traps focus and returns it to its trigger without losing a draft", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.state).mockResolvedValue(connected);
+  render(<App />);
+  await screen.findByRole("button", { name: "Same scope title" });
+  const text = screen.getByLabelText("记忆内容");
+  await user.type(text, "keep this draft");
+  const trigger = screen.getByRole("button", { name: "Same scope title" });
+  await user.click(trigger);
+  const dialog = screen.getByRole("dialog");
+  const close = within(dialog).getByRole("button", { name: "关闭" });
+  expect(document.activeElement).toBe(close);
+  expect((document.querySelector(".app-background") as HTMLElement).inert).toBe(
+    true,
+  );
+  await user.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(document.activeElement).toBe(
+    within(dialog).getByRole("button", { name: "查找范围" }),
+  );
+  await user.keyboard("{Tab}");
+  expect(document.activeElement).toBe(close);
+  await user.keyboard("{Escape}");
+  expect(screen.queryByRole("dialog")).toBeNull();
+  expect(document.activeElement).toBe(trigger);
+  expect((text as HTMLTextAreaElement).value).toBe("keep this draft");
+});
+
+test("global context distinguishes identical Scope titles by exact ID on every page", async () => {
+  const user = userEvent.setup();
+  const next = {
+    ...connected,
+    generation: 2,
+    active: {
+      ...connected.active!,
+      generation: 2,
+      scope: { ...scope, scope_id: "scope-b" },
+    },
+  };
+  vi.mocked(desktopApi.state).mockResolvedValue(connected);
+  vi.mocked(desktopApi.scopes).mockResolvedValue({
+    items: [next.active.scope],
+  });
+  vi.mocked(desktopApi.selectScope).mockResolvedValue(next);
+  render(<App />);
+  await screen.findByRole("button", { name: scope.title });
+  const context = document.querySelector(".global-context") as HTMLElement;
+  expect(within(context).getByText("scope-a")).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: scope.title }));
+  await user.click(screen.getByRole("button", { name: "查找范围" }));
+  await user.click(
+    await within(screen.getByRole("dialog")).findByRole("button", {
+      name: scope.title,
+    }),
+  );
+  await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  for (const page of ["连接", "观察", "设置与帮助", "记忆"]) {
+    await user.click(nav(page));
+    expect(within(context).getByText("scope-b")).toBeTruthy();
+    expect(within(context).queryByText("scope-a")).toBeNull();
+  }
+});
+
+test("connected Memory without an exact Scope offers the existing selector", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.state).mockResolvedValue({
+    ...connected,
+    active: { ...connected.active!, scope: null },
+  });
+  render(<App />);
+  await user.click(await screen.findByRole("button", { name: "选择范围" }));
+  expect(screen.getByRole("dialog")).toBeTruthy();
+});
+
+test("health does not turn unverified compatibility or identity into authorization", () => {
+  const state = {
+    ...connected,
+    active: {
+      ...connected.active!,
+      report: {
+        ...report,
+        anonymousAccess: false,
+        compatibilityVerified: false,
+        readiness: {
+          value: { status: "ready" as const, checks: {} },
+          error: null,
+        },
+      },
+    },
+  };
+  render(
+    <TopBar
+      state={state}
+      language="en"
+      onManageConnections={vi.fn()}
+      onOpenScopes={vi.fn()}
+      onDisconnect={vi.fn()}
+    />,
+  );
+  expect(screen.getByText("Service ready")).toBeTruthy();
+  expect(
+    within(document.querySelector(".global-context") as HTMLElement).getByText(
+      "Identity not verified yet",
+    ),
+  ).toBeTruthy();
+  const compatibility = screen.getByText("Compatibility").closest("div")!;
+  expect(within(compatibility).getByText("Not verified")).toBeTruthy();
+  expect(
+    screen.getByText(
+      /Readiness and operation permissions are verified separately/,
+    ),
+  ).toBeTruthy();
+});
+
+test("help copies fixed locale-specific documentation and support links with failure feedback", async () => {
+  const user = userEvent.setup();
+  const clipboard = vi
+    .spyOn(navigator.clipboard, "writeText")
+    .mockResolvedValue(undefined);
+  render(<App />);
+  await user.click(nav("设置与帮助"));
+  await user.click(screen.getByRole("button", { name: "复制使用指南链接" }));
+  expect(clipboard).toHaveBeenLastCalledWith(
+    "https://github.com/oceanbase/powercontext/blob/master/desktop/README.zh.md",
+  );
+  expect(screen.getByText("链接已复制。")).toBeTruthy();
+  await user.selectOptions(screen.getByLabelText("语言"), "en");
+  await user.click(
+    screen.getByRole("button", { name: "Copy usage guide link" }),
+  );
+  expect(clipboard).toHaveBeenLastCalledWith(
+    "https://github.com/oceanbase/powercontext/blob/master/desktop/README.md",
+  );
+  clipboard.mockRejectedValueOnce(new Error("clipboard denied"));
+  await user.click(screen.getByRole("button", { name: "Copy support link" }));
+  expect(clipboard).toHaveBeenLastCalledWith(
+    "https://github.com/oceanbase/powercontext/issues",
+  );
+  expect(screen.getByRole("alert").textContent).toMatch(/Could not copy/);
+});
+
+test("appearance changes retain diagnostic results and use the actual native version", async () => {
+  const user = userEvent.setup();
+  vi.mocked(getFoundationInfo).mockResolvedValue({
+    version: "9.8.7",
+    phase: "preview",
+    credentialBackend: "test",
+    serverConnected: false,
+  });
+  vi.mocked(desktopApi.diagnostics).mockResolvedValue({
+    checkedAt: 1,
+    exitCode: 0,
+    cliVersion: "synthetic-cli",
+    items: [],
+    hosts: [],
+  });
+  render(<App />);
+  await user.click(nav("设置与帮助"));
+  await user.click(screen.getByRole("button", { name: "检查本机服务" }));
+  expect(await screen.findByText("CLI 版本: synthetic-cli")).toBeTruthy();
+  await user.selectOptions(screen.getByLabelText("语言"), "en");
+  await user.selectOptions(screen.getByLabelText("Theme"), "dark");
+  expect(screen.getByText("CLI version: synthetic-cli")).toBeTruthy();
+  expect(screen.getByText("9.8.7")).toBeTruthy();
+});
+
+test("language and theme presentation changes preserve Memory's draft", async () => {
+  const user = userEvent.setup();
+  const props = { state: connected, onState: vi.fn(), onDirty: vi.fn() };
+  const { rerender } = render(<MemoryWorkspace {...props} language="zh" />);
+  await user.type(screen.getByLabelText("记忆内容"), "unsaved draft");
+  document.documentElement.dataset.theme = "dark";
+  rerender(<MemoryWorkspace {...props} language="en" />);
+  expect(
+    (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
+  ).toBe("unsaved draft");
+});
+
+test("Local Server navigation can be requested repeatedly without changing its availability", async () => {
+  const props = {
+    language: "en" as const,
+    theme: "system" as const,
+    host: null,
+    onLanguage: vi.fn(),
+    onTheme: vi.fn(),
+  };
+  const { rerender } = render(
+    <SettingsHelp {...props} localServerRequest={1} />,
+  );
+  expect(document.activeElement).toBe(
+    screen.getByRole("heading", { name: "Local Server" }),
+  );
+  screen.getByRole("button", { name: "Copy usage guide link" }).focus();
+  rerender(<SettingsHelp {...props} localServerRequest={2} />);
+  expect(document.activeElement).toBe(
+    screen.getByRole("heading", { name: "Local Server" }),
+  );
+  expect(
+    screen.getByText(
+      "Local installation and service management are not available yet",
+    ),
+  ).toBeTruthy();
 });
diff --git a/desktop/ui/tests/connections.test.tsx b/desktop/ui/tests/connections.test.tsx
index af68391e95..3c639f1a16 100644
--- a/desktop/ui/tests/connections.test.tsx
+++ b/desktop/ui/tests/connections.test.tsx
@@ -311,10 +311,10 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
       endpoint: "http://localhost:8000",
     }),
   );
-  await user.click(screen.getByRole("button", { name: "总览" }));
+  await user.click(screen.getByRole("button", { name: "观察" }));
   await waitFor(() =>
     expect(document.activeElement).toBe(
-      screen.getByRole("heading", { level: 1, name: "总览" }),
+      screen.getByRole("heading", { level: 1, name: "观察" }),
     ),
   );
   await user.click(screen.getByRole("button", { name: "连接" }));
@@ -328,7 +328,7 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
     finish(state({ ...profile, name: "First" }));
   });
   confirm.mockClear().mockReturnValue(false);
-  await user.click(screen.getByRole("button", { name: "总览" }));
+  await user.click(screen.getByRole("button", { name: "观察" }));
   expect(confirm).toHaveBeenCalled();
   expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
     "New draft",
diff --git a/desktop/ui/tests/memory.test.tsx b/desktop/ui/tests/memory.test.tsx
index 9b7314004f..e23489f46d 100644
--- a/desktop/ui/tests/memory.test.tsx
+++ b/desktop/ui/tests/memory.test.tsx
@@ -30,7 +30,7 @@ import {
   textBytes,
 } from "../src/app/MemoryWorkspace";
 import { App } from "../src/app/App";
-import { Overview } from "../src/app/Overview";
+import { TopBar } from "../src/app/TopBar";
 import { desktopApi } from "../src/shared/ipc";
 import type {
   ArtifactReference,
@@ -383,7 +383,7 @@ test.each(["forbidden", "not_found", "network"])(
   },
 );
 
-test("overview refresh shows the latest readiness instead of the activation snapshot", () => {
+test("global context shows the latest readiness instead of the activation snapshot", () => {
   const active = state.active!;
   const ready = {
     ...active.report,
@@ -397,14 +397,16 @@ test("overview refresh shows the latest readiness instead of the activation snap
     },
   };
   render(
-    <Overview
+    <TopBar
       state={{
         ...state,
         active: { ...active, report: ready },
         reports: [latest],
       }}
       language="en"
-      onNavigate={vi.fn()}
+      onManageConnections={vi.fn()}
+      onOpenScopes={vi.fn()}
+      onDisconnect={vi.fn()}
     />,
   );
   expect(screen.getByText("Service not ready")).toBeTruthy();
@@ -450,10 +452,10 @@ test.each(["scope", "page"])(
       await user.click(screen.getByRole("button", { name: "查找范围" }));
       await user.click(screen.getByRole("button", { name: "Scope B" }));
     } else {
-      await user.click(screen.getByRole("button", { name: "总览" }));
+      await user.click(screen.getByRole("button", { name: "观察" }));
       await waitFor(() =>
         expect(document.activeElement).toBe(
-          screen.getByRole("heading", { level: 1, name: "总览" }),
+          screen.getByRole("heading", { level: 1, name: "观察" }),
         ),
       );
       await user.click(screen.getByRole("button", { name: "记忆" }));
@@ -468,7 +470,7 @@ test.each(["scope", "page"])(
       finish(outcome("succeeded"));
     });
     confirm.mockClear().mockReturnValue(false);
-    await user.click(screen.getByRole("button", { name: "总览" }));
+    await user.click(screen.getByRole("button", { name: "观察" }));
     expect(confirm).toHaveBeenCalled();
     expect(
       (screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value,
diff --git a/desktop/ui/tests/scopes.test.tsx b/desktop/ui/tests/scopes.test.tsx
index a92b3cbb93..706db6b07b 100644
--- a/desktop/ui/tests/scopes.test.tsx
+++ b/desktop/ui/tests/scopes.test.tsx
@@ -26,6 +26,7 @@ vi.mock("../src/shared/ipc", () => ({
   desktopApi: {
     scopes: vi.fn(),
     cancelScopes: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
     state: vi.fn(),
     selectScope: vi.fn(),
   },

From 7acc4966f443ecbb56b23482ad76e6fc8cbd759f Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Wed, 21 Oct 2026 23:13:13 +0800
Subject: [PATCH 02/12] fix(desktop): preserve existing pages and add
 observation

Keep Overview as the initial page and Settings & diagnostics at the bottom of the sidebar. Add Observation without changing the existing page content.
---
 desktop/README.md                     |  22 +-
 desktop/README.zh.md                  |  22 +-
 desktop/VALIDATION.md                 |  18 +-
 desktop/tests/installed_lifecycle.py  |   4 +-
 desktop/tests/installed_ui.py         |   4 +-
 desktop/tests/installed_workflow.py   |   2 +-
 desktop/ui/src/app/App.tsx            | 450 +++++++++------------
 desktop/ui/src/app/Connections.tsx    |  21 +-
 desktop/ui/src/app/Observation.tsx    |   3 +-
 desktop/ui/src/app/Overview.tsx       | 230 +++++++++++
 desktop/ui/src/app/SettingsHelp.tsx   | 133 -------
 desktop/ui/src/app/TopBar.tsx         | 273 ++++---------
 desktop/ui/src/app/messages.ts        |  64 +--
 desktop/ui/src/app/navigation.ts      |  24 --
 desktop/ui/src/app/style.css          | 111 ++----
 desktop/ui/tests/app.test.tsx         | 549 +-------------------------
 desktop/ui/tests/connections.test.tsx |   6 +-
 desktop/ui/tests/memory.test.tsx      |  16 +-
 desktop/ui/tests/observation.test.tsx | 203 ++++++++++
 desktop/ui/tests/scopes.test.tsx      |   1 -
 20 files changed, 799 insertions(+), 1357 deletions(-)
 create mode 100644 desktop/ui/src/app/Overview.tsx
 delete mode 100644 desktop/ui/src/app/SettingsHelp.tsx
 delete mode 100644 desktop/ui/src/app/navigation.ts
 create mode 100644 desktop/ui/tests/observation.test.tsx

diff --git a/desktop/README.md b/desktop/README.md
index c356ac4859..96544d573b 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -1,26 +1,12 @@
 # PowerContext Desktop preview
 
-Internal Windows preview for [#1654](https://github.com/oceanbase/powercontext/issues/1654), following RFC #1455. Its shared application layout provides Memory, Connections, Observation, and Settings & help, Chinese/English interfaces, and light/dark/system themes. Connection profiles, explicit activation, identity/readiness checks, exact Scope selection, local diagnostics, note saving, bounded FTS search and exact-version reading are implemented; native workflow qualification remains open.
+Internal Windows preview for [#1654](https://github.com/oceanbase/powercontext/issues/1654), following RFC #1455. It provides a packaged Tauri 2 shell with Home, Connections, My memories, Chinese/English settings, semantic light/dark/system themes and honest disconnected states. Connection profiles, explicit activation, identity/readiness checks, exact Scope selection and local diagnostics are implemented. Shared note saving, bounded FTS search and exact-version reading are implemented; native workflow qualification remains open.
 
 See [中文说明](README.zh.md), [security boundary](SECURITY.md), and [validation guide](VALIDATION.md). This is not a supported or signed release, and does not close #1654 or #1428.
 
-## Navigation and first use
+## Observation
 
-Memory is the initial page. After Desktop state loads, an inactive connection offers **Set up locally** and **Connect an existing server**. Local setup opens **Settings & help → Local Server**, which explains that installation and service management are not available yet. Prepare a Server independently using the instructions below, or obtain its address and applicable credentials from an administrator. The global connection menu opens the selected configuration without activating it. Explicitly activate a connection, select an exact Scope, and use the existing Memory workspace.
-
-The global context displays the connection, endpoint, exact Scope title and ID, identity, compatibility and last observed health facts on every page. Health does not grant operation permissions. Changing pages or connection targets requires confirmation when input is unsaved. Closing Scope selection leaves the current draft intact. Submitted writes retain their original target and are not automatically replayed.
-
-Observation contains **Runtime state**, **Current-Scope inventory & usage**, and **This session**. These are unavailable placeholders until their owning features are integrated; no sample data, invented zero-valued statistics or automatic readiness probes are shown. Connections retains its explicit connection checks, whose native readiness behavior is tracked separately by #2101.
-
-Settings & help remains available without HTTP and provides language, theme, Local Server guidance, explicit local CLI diagnostics, the observed Desktop version, and copyable usage/support links. An unavailable native version is shown as unknown. Local diagnostic failure does not disable independently available remote operations.
-
-Use Tab to reach navigation and controls. The connection menu supports arrow keys, Home/End and Escape; Observation tabs support Left/Right and Home/End. Scope selection contains keyboard focus and restores it to the opening control when closed. Small windows use collapsible navigation; context and dialog contents can scroll without hiding recovery controls.
-
-### UI integration interfaces
-
-`ui/src/app/navigation.ts` defines `Page`, `ObservationTab`, `Theme`, and `NavigationTarget`. Application navigation accepts an optional connection ID, Observation tab, or `local-server` settings section. External connection selections pass the application's draft guard before reaching the editor. The editor's `selection` request invalidates pending editor completions, so a late save cannot replace a different selected configuration.
-
-`Observation` accepts independent `panels` keyed by `runtime`, `inventory`, and `session`, with unavailable defaults. Each owning page provides data, authorization, refresh and cancellation behavior. `PageFeedback` presents loading/error/empty/unavailable states with caller-owned explanations and actions. Local setup and management belong to #2117; observation content belongs to #2105, #2106 and #2107. These interfaces do not extend native IPC or the public HTTP contract.
+The sidebar provides Overview, Connections, Memories, and Observation, with Settings & diagnostics at the bottom. Overview is the initial page. Observation contains Runtime state, Current-Scope inventory & usage, and This session tabs. Their data views are explicitly unavailable until integrated; opening the page or switching tabs does not run connection checks or local diagnostics. English/Chinese and existing theme settings apply to Observation.
 
 ## Run the installed preview
 
@@ -77,7 +63,7 @@ Profiles persist under the app data directory; credentials never appear in profi
 
 ## Save, find and read a note
 
-After explicitly activating a qualified connection and choosing a Scope, open **Memories** and enter a note in the save form. The target connection and exact Scope are shown before submission. Enter inserts a newline; only the save button submits. The input is plain text, limited conservatively to 8192 raw UTF-8 bytes without truncation. The Server owns normalization and the returned text is authoritative.
+After explicitly activating a qualified connection and choosing a Scope, use Home's note form or **My memories → Add note**. The target connection and exact Scope are shown before submission. Enter inserts a newline; only the save button submits. The input is plain text, limited conservatively to 8192 raw UTF-8 bytes without truncation. The Server owns normalization and the returned text is authoritative.
 
 Search uses FTS in the selected Scope and returns at most 10 matches. This is not a full directory or history, and ten matches do not establish a total count. **Read exact version** reads the returned Atomic Memory reference (`{family: "atomic-memory", artifact_id, revision}`) at that exact revision; it never substitutes the latest version. Copy buttons explicitly copy either the full plain text or the reference JSON.
 
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index 90665fd4df..f56b34c6e7 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -1,26 +1,12 @@
 # PowerContext Desktop 预览版
 
-这是 #1654 的内部工程预览。已建立 Tauri 2、React、TypeScript 和 Vite 独立工程，提供记忆、连接、观察、设置与帮助四个入口，以及中英文界面和浅色／深色／系统主题。无连接时保存和搜索不可用，不展示示例业务数据。
+这是 #1654 的内部工程预览。已建立 Tauri 2、React、TypeScript 和 Vite 独立工程，提供首页、连接、我的记忆、双语设置及浅色／深色／系统主题。无连接时保存和搜索不可用，不展示示例业务数据。
 
 已实现连接配置、显式激活、身份与就绪检查、精确范围选择和本地诊断。已实现共享笔记表单、FTS 搜索和精确版本阅读；原生交互闭环仍待完整验收。当前不是已签名的正式发行版。
 
-## 导航与首次使用
+## 观察
 
-默认进入“记忆”。Desktop 状态加载完成且没有活动连接时，提供“本地设置”和“连接已有服务”两条路径。“本地设置”进入“设置与帮助 → 本地 Server”，明确说明安装和服务管理尚未可用。可以按下文指引独立准备 Server，或向管理员获取地址和适用凭据。从全局连接菜单选择已保存配置只会打开对应编辑器，不会激活连接。显式激活连接并选择精确 Scope 后，使用现有记忆工作区。
-
-全局上下文在各页面展示连接、地址、精确 Scope 名称和 ID、身份、兼容性及上次观察到的健康事实。健康状态不代表操作权限。有未保存输入时，切换页面或连接配置需要确认；关闭 Scope 选择不会丢弃当前草稿。已提交写入始终绑定原目标，不会自动重放。
-
-“观察”包含“运行状态”“当前 Scope 库存与用量”“本次会话”三个标签页。在各功能接入前，明确显示尚未可用，不展示示例数据、虚构的零值统计，也不自动探测 readiness。“连接”保留现有显式连接检查，其原生 readiness 行为由 #2101 单独处理。
-
-“设置与帮助”无需 HTTP 连接即可访问，包含语言、主题、本地 Server 指引、显式执行的本机 CLI 诊断、实际获取的 Desktop 版本，以及可复制的使用指南和反馈地址。无法获取原生版本时显示“未知”；本机诊断失败不会阻断独立可用的远程操作。
-
-使用 Tab 到达导航与控件；连接菜单支持方向键、Home／End 和 Escape；观察标签页支持左右方向键和 Home／End。Scope 弹窗约束键盘焦点，关闭后返回打开它的控件。小窗口使用可折叠导航，上下文和弹窗内容可以滚动，不遮挡恢复操作。
-
-### UI 接入接口
-
-`ui/src/app/navigation.ts` 定义 `Page`、`ObservationTab`、`Theme` 和 `NavigationTarget`。应用导航支持指定连接 ID、观察标签页或 `local-server` 设置区域。外部连接选择必须先经过应用层草稿确认，再传给连接编辑器。编辑器的 `selection` 请求会使旧编辑操作的完成回调失效，避免迟到保存替换新选中的配置。
-
-`Observation` 接受按 `runtime`、`inventory`、`session` 分别提供的 `panels`，默认展示尚未可用；数据、权限、刷新和取消行为由各页面实现。`PageFeedback` 统一加载、错误、空状态和不可用状态的呈现，解释和操作由调用方提供。本地安装与管理归属 #2117，观察内容归属 #2105、#2106、#2107；这些接口不扩展原生 IPC 或公共 HTTP 合同。
+侧栏提供总览、连接、记忆、观察入口，“设置与诊断”位于侧栏底部。默认进入总览。“观察”包含运行状态、当前 Scope 库存与用量、本次会话三个标签页。数据视图接入前明确显示尚未可用；进入页面或切换标签不会执行连接检查或本机诊断。观察页面沿用现有中英文和主题设置。
 
 ## 直接运行安装版
 
@@ -96,7 +82,7 @@ Desktop 在每次诊断前检查固定路径和摘要，然后只允许 `service
 
 ## 保存、查找和阅读
 
-明确启用合格连接并选择精确范围后，打开「记忆」，在保存表单中填写笔记。提交前会显示目标连接和范围。Enter 只换行，点击保存才提交。正文是纯文本，保守限制为原始文本最多 8192 个 UTF-8 字节，不会截断；规范化由 Server 完成，以返回的正文为准。
+明确启用合格连接并选择精确范围后，在首页填写笔记，或在「我的记忆」中点击「记一条」。提交前会显示目标连接和范围。Enter 只换行，点击保存才提交。正文是纯文本，保守限制为原始文本最多 8192 个 UTF-8 字节，不会截断；规范化由 Server 完成，以返回的正文为准。
 
 全文搜索只在当前范围执行，每次最多返回 10 条，不代表完整目录、历史或总数。阅读按返回的 Atomic Memory 引用（`{family: "atomic-memory", artifact_id, revision}`）读取该精确版本，不自动改读最新版本。复制按钮分别复制纯文本正文和引用 JSON。
 
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index bcf0a036f0..4c4c186519 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -61,23 +61,19 @@ uv run python desktop/tests/fixture_qualification.py --server-commit "$DESKTOP_F
 pnpm --dir desktop tauri build --bundles nsis --ci --features ci-fixtures -- --locked
 ```
 
-## Shared application layout and navigation (#2102)
+## Observation navigation (#2102)
 
-Local verification on 2026-10-21 used Windows x64, Node 24.14.1, pnpm 11.13.1, and Rust 1.95.0 for generated-contract checking:
+The application opens Overview and provides Overview, Connections, Memories, and Observation in the main navigation. Settings & diagnostics remains at the bottom. Observation provides Runtime state, Current-Scope inventory & usage, and This session tabs with unavailable data views; navigation does not initiate connection checks or local diagnostics.
 
-- `pnpm --dir desktop test`: 48 UI behavior tests passed. These use mocked IPC and cover navigation, exact-Scope context, draft guards, late completions, keyboard/focus behavior, and existing Memory/connection/diagnostic journeys.
-- `pnpm --dir desktop typecheck`, `lint`, and `build` passed. Lint includes OpenAPI drift, canonical brand-resource, and formatting checks; generated contracts were checked without updating them.
-- Ruff 0.15.7 lint and formatting checks passed for the changed installed-acceptance Python scripts. Their startup/navigation selectors were updated; the installed harness itself was not executed locally.
-- Headless Microsoft Edge 155.0.4283.62 exercised four pages and three Observation tabs across Chinese/English, light/dark/system, and CSS viewports 1180×800, 800×600, 400×400, and 400×300. The 24 combinations passed horizontal-overflow, Scope dialog focus/return, connection-menu, and local diagnostic error checks using synthetic IPC. The 400×300 viewport with device scale factor 2 checks layout equivalent to 800×600 at 200%; it does not establish actual WebView zoom behavior.
-- Additional browser scenarios exercised draft-confirmation dismissal/acceptance at all four viewports, and disconnected first use, Local Server placement and initialization failure in both languages at 800×600, 400×400 and 400×300. Drafts survived canceled navigation, and first-use/error pages remained free of horizontal overflow.
+Local verification on Windows x64 on 2026-10-21 used Node 24.14.1, pnpm 11.13.1, and Rust 1.95.0 for generated-contract checking. All 37 UI tests, type checking, lint, and the frontend production build passed. Existing Overview, connection, Memory, Scope and diagnostic behavior tests remain in place; Observation tests cover navigation, English/Chinese, keyboard tabs, unavailable states and the existing draft confirmation.
 
-Browser checks and mocked IPC do not establish Server compatibility, installed-package behavior, actual IME, screen-reader output, native confirmation presentation, or macOS qualification. Those remain platform acceptance work under #2108/#2109. Local installation and service management remain unavailable pending #2117; observation content remains unavailable pending #2105/#2106/#2107.
+Headless Edge 155.0.4283.62 with synthetic IPC checked all five pages in 24 combinations of English/Chinese, light/dark/system, and CSS viewports 1180×800, 800×600, 400×400 and 400×300. The pages had no horizontal overflow. At desktop widths, Settings & diagnostics had the same coordinates with and without the Observation entry; at small widths it remained below the main navigation. The 400×300 viewport at device scale factor 2 checks layout equivalent to 800×600 at 200%, not installed WebView zoom. Browser fixtures and mocked IPC do not establish real Server, installed-package, native IME, screen-reader or macOS qualification.
 
-2026-10-21 的本地验证使用 Windows x64、Node 24.14.1、pnpm 11.13.1，生成合同检查使用 Rust 1.95.0。48 项 UI 行为测试及类型、lint、生产构建检查通过；UI 测试使用模拟 IPC，覆盖导航、精确 Scope、草稿保护、迟到响应、键盘与焦点，以及现有业务流程。修改的安装验收 Python 脚本通过 Ruff 0.15.7 检查，本地未执行安装验收脚本。
+应用默认进入总览，主导航包含总览、连接、记忆、观察，“设置与诊断”位于底部。观察包含运行状态、当前 Scope 库存与用量、本次会话三个标签页，数据视图尚未可用；页面及标签切换不会执行连接检查或本机诊断。
 
-无头 Edge 155.0.4283.62 使用合成 IPC，检查中英文、三种主题及上述四组 CSS 视口，共 24 种组合，覆盖四个页面、三个观察标签、横向溢出、Scope 弹窗焦点、连接菜单和本机诊断错误。400×300 配合设备缩放因子 2 仅验证 800×600 在 200% 下的等效布局，不代表实际 WebView 缩放验收。真实 Server、安装包、IME、屏幕阅读器、原生确认框呈现和 macOS 仍需对应平台验收；本地安装和观察数据功能仍明确标注尚未可用。
+2026-10-21 在 Windows x64 上使用 Node 24.14.1、pnpm 11.13.1 验证，生成合同检查使用 Rust 1.95.0。37 项 UI 测试、类型检查、lint 和前端生产构建通过。原有业务行为测试保留，观察测试覆盖导航、双语、键盘标签切换、不可用状态和现有草稿确认。
 
-额外浏览器场景验证了四组视口中的草稿确认取消／接受，以及中英文在 800×600、400×400、400×300 下的未连接首次使用、本地 Server 入口和初始化失败状态。取消导航保留草稿，首次使用及错误页面没有横向溢出。
+无头 Edge 155.0.4283.62 使用合成 IPC 检查中英文、三种主题及上述四组 CSS 视口，共 24 种组合，五个页面没有横向溢出。在桌面宽度下，有无观察入口时“设置与诊断”的坐标一致；小窗口中它仍位于主导航下方。400×300 配合设备缩放因子 2 仅检查 800×600 在 200% 下的等效布局，不代表安装版 WebView 缩放。真实 Server、安装包、原生 IME、屏幕阅读器和 macOS 仍需实际验收。
 
 ## Remaining release qualification
 
diff --git a/desktop/tests/installed_lifecycle.py b/desktop/tests/installed_lifecycle.py
index f856ac6f05..7d58880437 100644
--- a/desktop/tests/installed_lifecycle.py
+++ b/desktop/tests/installed_lifecycle.py
@@ -91,8 +91,8 @@ def exercise_single_instance(client: httpx.Client, prefix: str, app: subprocess.
             != "single-instance unsaved draft"
         ):
             raise HarnessFailure("installed_second_launch_changed_draft")
-    page.button("观察")
+    page.button("总览")
     page.post("/alert/dismiss", {})
-    page.button("观察")
+    page.button("总览")
     page.post("/alert/accept", {})
     return {"secondLaunchesExited": 3, "originalEditorAndDraftPreserved": True}
diff --git a/desktop/tests/installed_ui.py b/desktop/tests/installed_ui.py
index 27a47d95ac..151db1f886 100644
--- a/desktop/tests/installed_ui.py
+++ b/desktop/tests/installed_ui.py
@@ -86,12 +86,12 @@ def wait_packaged_page(client: httpx.Client, prefix: str) -> str:
         )
         response.raise_for_status()
         page = response.json()["value"]
-        if all(label in page["text"] for label in ("记忆", "连接", "观察", "设置与帮助")):
+        if "总览" in page["text"]:
             if not page["url"].startswith("http://tauri.localhost"):
                 raise HarnessFailure("installed_resources_not_packaged")
             return page["url"]
         time.sleep(0.2)
-    raise HarnessFailure("installed_shell_not_rendered")
+    raise HarnessFailure("installed_overview_not_rendered")
 
 
 def screenshot(client: httpx.Client, prefix: str, artifacts: Path) -> bool:
diff --git a/desktop/tests/installed_workflow.py b/desktop/tests/installed_workflow.py
index e2b24b01d3..d0e793fdfa 100644
--- a/desktop/tests/installed_workflow.py
+++ b/desktop/tests/installed_workflow.py
@@ -370,7 +370,7 @@ def exercise_late_save(page: InstalledPage) -> None:
             gate.unlink()
             # This is shown only after the old form refreshes the native write record.
             page.wait_text("连接或范围已改变，旧正文已隐藏。")  # noqa: RUF001 - exact localized UI
-            page.button("观察")
+            page.button("总览")
             page.post("/alert/dismiss", {})
             if page.observe("return document.querySelector('.memory-workspace textarea')?.value;") != draft:
                 raise HarnessFailure("installed_late_save_lost_new_draft")
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index 7a15d15506..a8364ce661 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -14,73 +14,58 @@
  * limitations under the License.
  */
 
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { messages, type Language } from "./messages";
 import { getFoundationInfo, desktopApi } from "../shared/ipc";
 import type { FoundationInfo, DesktopState } from "../generated/ipc";
 import logo from "../../../src-tauri/icons/brand.png";
-import observationIcon from "../assets/overview.svg";
+import homeIcon from "../assets/overview.svg";
 import connectionsIcon from "../assets/connections.svg";
 import memoryIcon from "../assets/memory.svg";
 import settingsIcon from "../assets/settings.svg";
+import observationIcon from "../assets/retrieval.svg";
+
 import { TopBar } from "./TopBar";
+import { Overview } from "./Overview";
 import { MemoryWorkspace } from "./MemoryWorkspace";
+import { Diagnostics } from "./Diagnostics";
 import { Connections } from "./Connections";
 import { Scopes } from "./Scopes";
-import { Observation } from "./Observation";
-import { SettingsHelp } from "./SettingsHelp";
-import { PageFeedback } from "./PageFeedback";
-import type {
-  NavigationTarget,
-  ObservationTab,
-  Page,
-  Theme,
-} from "./navigation";
+import { Observation, type ObservationTab } from "./Observation";
 import { connectionMessages, connectionError } from "./connection-messages";
 
+type Page = "home" | "connections" | "memories" | "observation" | "settings";
+type Theme = "light" | "dark" | "system";
 export function App() {
   const [language, setLanguage] = useState<Language>("zh");
   const [theme, setTheme] = useState<Theme>("system");
-  const [page, setPage] = useState<Page>("memories");
-  const [tab, setTab] = useState<ObservationTab>("runtime");
-  const [connectionSelection, setConnectionSelection] = useState({
-    id: null as string | null,
-    request: 0,
-  });
-  const [localServerRequest, setLocalServerRequest] = useState(0);
+  const [page, setPage] = useState<Page>("home");
+  const [observationTab, setObservationTab] =
+    useState<ObservationTab>("runtime");
   const [menu, setMenu] = useState(false);
   const [host, setHost] = useState<FoundationInfo | null>(null);
   const [desktop, setDesktop] = useState<DesktopState | null>(null);
   const [nativeError, setNativeError] = useState<unknown>(null);
-  const [loading, setLoading] = useState(true);
   const [dirty, setDirty] = useState(false);
   const [scopeOpen, setScopeOpen] = useState(false);
-  const heading = useRef<HTMLHeadingElement>(null);
-  const scopeDialog = useRef<HTMLDivElement>(null);
-  const scopeReturnFocus = useRef<HTMLElement | null>(null);
-  const t = messages[language];
-  const ct = connectionMessages[language];
+  const [refreshing, setRefreshing] = useState(false);
   function receiveState(next: DesktopState) {
     setDesktop((current) =>
       !current || next.generation >= current.generation ? next : current,
     );
   }
   function confirmSwitch() {
-    return !dirty || window.confirm(ct.discard);
-  }
-  async function loadState() {
-    setLoading(true);
-    setNativeError(null);
-    try {
-      receiveState(await desktopApi.state());
-    } catch (error) {
-      setNativeError(error);
-    } finally {
-      setLoading(false);
-    }
+    return !dirty || window.confirm(connectionMessages[language].discard);
   }
+  const activeProfile = desktop?.profiles.find(
+    (p) => p.id === desktop.active?.connectionId,
+  );
+  const activeReport = desktop?.active?.report;
+  const heading = useRef<HTMLHeadingElement>(null);
+  const t = messages[language];
+  const ct = connectionMessages[language];
   useEffect(() => {
-    void loadState();
+    desktopApi.state().then(receiveState).catch(setNativeError);
     getFoundationInfo()
       .then(setHost)
       .catch(() => setHost(null));
@@ -91,253 +76,213 @@ export function App() {
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
-  useLayoutEffect(() => {
-    heading.current?.focus();
-  }, [page]);
   useEffect(() => {
     if (!scopeOpen) return;
-    const previous = scopeReturnFocus.current;
-    const dialog = scopeDialog.current;
-    const background = document.querySelector<HTMLElement>(".app-background");
-    if (background) background.inert = true;
-    dialog?.querySelector<HTMLButtonElement>("button")?.focus();
     function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setScopeOpen(false);
-      }
-      if (event.key !== "Tab") return;
-      const elements = Array.from(
-        dialog?.querySelectorAll<HTMLElement>(
-          'button:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex="0"]',
-        ) ?? [],
-      ).filter((element) => !element.matches(":disabled"));
-      const first = elements[0];
-      const last = elements[elements.length - 1];
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last?.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first?.focus();
-      }
+      if (event.key === "Escape") setScopeOpen(false);
     }
     document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (background) background.inert = false;
-      if (previous?.isConnected) previous.focus();
-      else
-        document
-          .querySelector<HTMLButtonElement>(".topbar-group button")
-          ?.focus();
-    };
+    return () => document.removeEventListener("keydown", onKeyDown);
   }, [scopeOpen]);
-  function navigate(target: NavigationTarget) {
-    const samePage = target.page === page;
-    if (samePage && !(target.page === "connections" && target.connectionId)) {
-      if (target.page === "observation" && target.tab) setTab(target.tab);
-      if (target.page === "settings" && target.section)
-        setLocalServerRequest((value) => value + 1);
-      setMenu(false);
-      if (!(target.page === "settings" && target.section))
-        heading.current?.focus();
-      return;
-    }
-    if (!confirmSwitch()) return;
+  function navigate(next: Page) {
+    if (next === page || !confirmSwitch()) return;
     setDirty(false);
-    if (target.page === "connections")
-      setConnectionSelection((current) => ({
-        id: target.connectionId ?? null,
-        request: current.request + 1,
-      }));
-    if (target.page === "observation" && target.tab) setTab(target.tab);
-    if (target.page === "settings")
-      setLocalServerRequest((value) => (target.section ? value + 1 : 0));
-    setPage(target.page);
+    setPage(next);
     setMenu(false);
-    if (samePage) heading.current?.focus();
+    requestAnimationFrame(() => heading.current?.focus());
   }
   function disconnect() {
     if (!confirmSwitch()) return;
+    setDirty(false);
     void desktopApi.disconnect().then(receiveState).catch(setNativeError);
   }
-  const activeProfile = desktop?.profiles.find(
-    (profile) => profile.id === desktop.active?.connectionId,
-  );
+  async function refresh() {
+    setRefreshing(true);
+    setNativeError(null);
+    try {
+      receiveState(
+        desktop?.active
+          ? await desktopApi.check(desktop.active.connectionId, false)
+          : await desktopApi.state(),
+      );
+    } catch (e) {
+      setNativeError(e);
+    } finally {
+      setRefreshing(false);
+    }
+  }
+  const ready = activeReport?.readiness.value?.status === "ready";
   return (
-    <div className="app-root">
-      <div className="app app-background">
-        <a className="skip" href="#main">
-          {t.skip}
-        </a>
-        <header className="mobile-bar">
-          <span>PowerContext</span>
-          <button
-            aria-expanded={menu}
-            aria-controls="navigation"
-            onClick={() => setMenu(!menu)}
-          >
-            {t.menu}
-          </button>
-        </header>
-        <aside id="navigation" className={menu ? "sidebar open" : "sidebar"}>
-          <div className="brand">
-            <img src={logo} alt="" />
-            <strong>PowerContext</strong>
-            <span className="brand-sub">{t.brandSub}</span>
-          </div>
-          <span className="brand-badge">{t.foundation}</span>
-          <nav aria-label={t.menu}>
-            {(
-              ["memories", "connections", "observation", "settings"] as const
-            ).map((item, index) => (
+    <div className="app">
+      <a className="skip" href="#main">
+        {t.skip}
+      </a>
+      <header className="mobile-bar">
+        <span>PowerContext</span>
+        <button
+          aria-expanded={menu}
+          aria-controls="navigation"
+          onClick={() => setMenu(!menu)}
+        >
+          {t.menu}
+        </button>
+      </header>
+      <aside id="navigation" className={menu ? "sidebar open" : "sidebar"}>
+        <div className="brand">
+          <img src={logo} alt="" />
+          <strong>PowerContext</strong>
+          <span className="brand-sub">{t.brandSub}</span>
+        </div>
+        <span className="brand-badge">{t.foundation}</span>
+        <nav aria-label={t.menu}>
+          {(["home", "connections", "memories", "observation"] as const).map(
+            (item, index) => (
               <button
                 key={item}
                 aria-current={page === item ? "page" : undefined}
-                onClick={() => navigate({ page: item })}
+                onClick={() => navigate(item)}
               >
                 <img
                   className="nav-symbol"
                   alt=""
                   src={
-                    [
-                      memoryIcon,
-                      connectionsIcon,
-                      observationIcon,
-                      settingsIcon,
-                    ][index]
+                    [homeIcon, connectionsIcon, memoryIcon, observationIcon][
+                      index
+                    ]
                   }
                 />
                 {t[item]}
               </button>
-            ))}
-          </nav>
-          <div className="sidebar-bottom">
+            ),
+          )}
+        </nav>
+        <div className="sidebar-bottom">
+          <button
+            aria-current={page === "settings" ? "page" : undefined}
+            onClick={() => navigate("settings")}
+          >
+            <img className="nav-symbol" alt="" src={settingsIcon} />
+            {t.settings}
+          </button>
+          <div className="sidebar-status">
             <p className="status">
-              {activeProfile?.name ??
-                (loading
-                  ? t.loading
-                  : desktop
-                    ? t.disconnected
-                    : t.unavailable)}
+              <span
+                aria-hidden="true"
+                className={desktop?.active ? "dot ok" : "dot"}
+              />
+              {activeProfile?.name ?? t.disconnected}
             </p>
             <p className="caption">{t.sidebarRunning}</p>
           </div>
-        </aside>
-        <div className="content">
-          <TopBar
-            state={desktop}
-            language={language}
-            onManageConnections={(connectionId) =>
-              navigate({ page: "connections", connectionId })
-            }
-            onOpenScopes={() => {
-              scopeReturnFocus.current = document.activeElement as HTMLElement;
-              setScopeOpen(true);
-            }}
-            onDisconnect={disconnect}
-          />
-          <main id="main">
-            <h1 tabIndex={-1} ref={heading}>
-              {t[page]}
-            </h1>
-            {loading && <PageFeedback kind="loading" title={t.loading} />}
-            {!loading && nativeError != null && (
-              <PageFeedback
-                kind="error"
-                title={desktop ? t.desktopError : t.stateFailed}
-                action={
-                  <button onClick={() => void loadState()}>
-                    {t.retryState}
-                  </button>
-                }
-              >
-                <p>{connectionError(nativeError, language)}</p>
-              </PageFeedback>
-            )}
-            {page === "memories" && (
-              <div className="stack">
-                {!loading && desktop && !desktop.active && (
-                  <PageFeedback
-                    kind="empty"
-                    title={t.noActiveTitle}
-                    action={
-                      <>
-                        <button
-                          onClick={() =>
-                            navigate({
-                              page: "settings",
-                              section: "local-server",
-                            })
-                          }
-                        >
-                          {t.setUpLocally}
-                        </button>
-                        <button
-                          className="primary"
-                          onClick={() => navigate({ page: "connections" })}
-                        >
-                          {t.connect}
-                        </button>
-                      </>
-                    }
+        </div>
+      </aside>
+      <div className="content">
+        <TopBar
+          state={desktop}
+          language={language}
+          onManageConnections={() => navigate("connections")}
+          onOpenScopes={() => setScopeOpen(true)}
+          onDisconnect={disconnect}
+        />
+        <main id="main">
+          <h1 className="sr-only" tabIndex={-1} ref={heading}>
+            {t[page]}
+          </h1>
+          {nativeError != null && (
+            <p role="alert">{connectionError(nativeError, language)}</p>
+          )}
+          {page === "memories" && desktop?.active && (
+            <div className="context-line">
+              <span>{activeProfile?.name}</span>
+              <span aria-hidden="true">·</span>
+              <span>{activeProfile?.endpoint}</span>
+              <span aria-hidden="true">·</span>
+              <span>{desktop.active.scope?.title ?? t.noScopeSelected}</span>
+              <span className={ready ? "badge success" : "badge subtle"}>
+                {ready ? t.serviceReady : t.unverified}
+              </span>
+            </div>
+          )}
+          {page === "home" && (
+            <Overview
+              state={desktop}
+              language={language}
+              onNavigate={navigate}
+              refreshing={refreshing}
+              onRefresh={() => void refresh()}
+            />
+          )}
+          {page === "memories" && (
+            <MemoryWorkspace
+              key={`memory-${desktop?.active?.generation ?? "none"}`}
+              state={desktop}
+              language={language}
+              onState={receiveState}
+              onDirty={setDirty}
+            />
+          )}
+          {page === "connections" && (
+            <Connections
+              state={desktop}
+              language={language}
+              onState={receiveState}
+              onDirty={setDirty}
+            />
+          )}
+          {page === "observation" && (
+            <Observation
+              language={language}
+              tab={observationTab}
+              onTabChange={setObservationTab}
+            />
+          )}
+          {page === "settings" && (
+            <div className="stack settings">
+              <section className="card">
+                <div className="setting-row">
+                  <label htmlFor="language">{t.language}</label>
+                  <select
+                    id="language"
+                    value={language}
+                    onChange={(e) => setLanguage(e.target.value as Language)}
                   >
-                    <p>{t.firstUseDescription}</p>
-                  </PageFeedback>
-                )}
-                {desktop?.active && !desktop.active.scope && (
-                  <PageFeedback
-                    kind="empty"
-                    title={t.noScopeSelected}
-                    action={
-                      <button
-                        onClick={() => {
-                          scopeReturnFocus.current =
-                            document.activeElement as HTMLElement;
-                          setScopeOpen(true);
-                        }}
-                      >
-                        {t.chooseScope}
-                      </button>
-                    }
+                    <option value="zh">简体中文</option>
+                    <option value="en">English</option>
+                  </select>
+                </div>
+                <div className="setting-row">
+                  <label htmlFor="theme">{t.theme}</label>
+                  <select
+                    id="theme"
+                    value={theme}
+                    onChange={(e) => setTheme(e.target.value as Theme)}
                   >
-                    <p>{t.selectScopeDescription}</p>
-                  </PageFeedback>
-                )}
-                <MemoryWorkspace
-                  key={`memory-${desktop?.active?.generation ?? "none"}`}
-                  state={desktop}
-                  language={language}
-                  onState={receiveState}
-                  onDirty={setDirty}
-                />
-              </div>
-            )}
-            {page === "connections" && (
-              <Connections
-                state={desktop}
-                language={language}
-                onState={receiveState}
-                onDirty={setDirty}
-                selection={connectionSelection}
-              />
-            )}
-            {page === "observation" && (
-              <Observation language={language} tab={tab} onTabChange={setTab} />
-            )}
-            {page === "settings" && (
-              <SettingsHelp
-                language={language}
-                theme={theme}
-                host={host}
-                onLanguage={setLanguage}
-                onTheme={setTheme}
-                localServerRequest={localServerRequest}
-              />
-            )}
-          </main>
-        </div>
+                    <option value="system">{t.system}</option>
+                    <option value="light">{t.light}</option>
+                    <option value="dark">{t.dark}</option>
+                  </select>
+                </div>
+              </section>
+              <Diagnostics language={language} />
+              <section className="card">
+                <h2>{t.version}</h2>
+                <dl>
+                  <div>
+                    <dt>{t.version}</dt>
+                    <dd>{host?.version ?? "0.1.0"}</dd>
+                  </div>
+                  <div>
+                    <dt>{t.native}</dt>
+                    <dd role="status">
+                      {host ? t.nativeReady : t.unavailable}
+                    </dd>
+                  </div>
+                </dl>
+                <p>{t.boundary}</p>
+              </section>
+            </div>
+          )}
+        </main>
       </div>
       {scopeOpen && (
         <div
@@ -351,7 +296,6 @@ export function App() {
             role="dialog"
             aria-modal="true"
             aria-label={ct.scope}
-            ref={scopeDialog}
           >
             <div className="modal-heading">
               <h2>{ct.scope}</h2>
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index 7bb82f489c..c691e2dad2 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -33,20 +33,10 @@ type Props = {
   language: Language;
   onState: (value: DesktopState) => void;
   onDirty: (value: boolean) => void;
-  // External selection is accepted only after the application's draft guard.
-  selection?: { id: string | null; request: number };
 };
-export function Connections({
-  state,
-  language,
-  onState,
-  onDirty,
-  selection,
-}: Props) {
+export function Connections({ state, language, onState, onDirty }: Props) {
   const t = connectionMessages[language];
-  const [selected, setSelected] = useState<string | null>(
-    selection?.id ?? null,
-  );
+  const [selected, setSelected] = useState<string | null>(null);
   const profile = state?.profiles.find((p) => p.id === selected);
   const report = state?.reports.find((r) => r.connectionId === selected);
   const [name, setName] = useState("");
@@ -88,13 +78,6 @@ export function Connections({
   useEffect(() => {
     reset(profile);
   }, [selected, profile?.revision]);
-  useEffect(() => {
-    if (!selection) return;
-    lifetime.current++;
-    setBusy(false);
-    setSelected(selection.id);
-    reset(state?.profiles.find((item) => item.id === selection.id));
-  }, [selection?.request]);
   function change(target = false) {
     setDirty(true);
     onDirty(true);
diff --git a/desktop/ui/src/app/Observation.tsx b/desktop/ui/src/app/Observation.tsx
index ada96b0fac..75373fe4bc 100644
--- a/desktop/ui/src/app/Observation.tsx
+++ b/desktop/ui/src/app/Observation.tsx
@@ -16,9 +16,10 @@
 
 import type { ReactNode } from "react";
 import { messages, type Language } from "./messages";
-import type { ObservationTab } from "./navigation";
 import { PageFeedback } from "./PageFeedback";
 
+export type ObservationTab = "runtime" | "inventory" | "session";
+
 export function Observation({
   language,
   tab,
diff --git a/desktop/ui/src/app/Overview.tsx b/desktop/ui/src/app/Overview.tsx
new file mode 100644
index 0000000000..17381efc77
--- /dev/null
+++ b/desktop/ui/src/app/Overview.tsx
@@ -0,0 +1,230 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DesktopState } from "../generated/ipc";
+import { messages, type Language } from "./messages";
+import memoryIcon from "../assets/memory.svg";
+import connectionsIcon from "../assets/connections.svg";
+import retrievalIcon from "../assets/retrieval.svg";
+
+type Page = "connections" | "memories" | "settings";
+type Props = {
+  state: DesktopState | null;
+  language: Language;
+  onNavigate: (page: Page) => void;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+};
+export function Overview({
+  state,
+  language,
+  onNavigate,
+  refreshing = false,
+  onRefresh,
+}: Props) {
+  const t = messages[language];
+  const active = state?.active;
+  const profile = state?.profiles.find((p) => p.id === active?.connectionId);
+  const report =
+    state?.reports.find((item) => item.connectionId === active?.connectionId) ??
+    active?.report;
+  const readiness = report?.readiness.value?.status;
+  const enabled = !!active?.scope && !!report?.compatibilityVerified;
+  const principal = report?.anonymousAccess
+    ? null
+    : report?.identity.value?.principal;
+  const identity = !active
+    ? t.unverified
+    : report?.anonymousAccess
+      ? t.anonymousIdentity
+      : principal
+        ? (principal.description ?? `${principal.type}: ${principal.id}`)
+        : t.unverified;
+  const features = [
+    { icon: memoryIcon, name: t.featureSave, hint: t.featureSaveHint },
+    { icon: retrievalIcon, name: t.featureSearch, hint: t.featureSearchHint },
+    { icon: connectionsIcon, name: t.featureRead, hint: t.featureReadHint },
+  ];
+  const environment = [
+    t.envService,
+    t.envOwnership,
+    t.envAgent,
+    t.envConfig,
+    t.envHostLoad,
+    t.envCaptureRecall,
+  ];
+  return (
+    <div className="stack">
+      <section className="card">
+        <div className="card-heading">
+          <h2>{t.current}</h2>
+          <div className="actions">
+            {active && (
+              <span className={readyBadge(readiness)}>
+                {readiness === "ready"
+                  ? t.serviceReady
+                  : readiness
+                    ? t.serviceNotReady
+                    : t.unverified}
+              </span>
+            )}
+            {onRefresh && (
+              <button disabled={refreshing || !state} onClick={onRefresh}>
+                <span aria-hidden="true">↻ </span>
+                {refreshing ? t.refreshing : t.refresh}
+              </button>
+            )}
+          </div>
+        </div>
+        {active && profile ? (
+          <>
+            <div className="connection-summary">
+              <img src={connectionsIcon} alt="" />
+              <div>
+                <p className="name">{profile.name}</p>
+                <p className="endpoint">{profile.endpoint}</p>
+              </div>
+              <span className="topbar-spacer" />
+              <button onClick={() => onNavigate("connections")}>
+                {t.manage}
+              </button>
+            </div>
+            <dl className="fact-grid">
+              <div className="fact">
+                <dt>{t.identityLabel}</dt>
+                <dd>{identity}</dd>
+              </div>
+              <div className="fact">
+                <dt>{t.authLabel}</dt>
+                <dd>
+                  {profile.authentication === "bearer"
+                    ? t.authBearer
+                    : t.authAnonymous}
+                </dd>
+              </div>
+              <div className="fact">
+                <dt>{t.currentScopeLabel}</dt>
+                <dd>
+                  {active.scope
+                    ? `${active.scope.title} · ${t.exactScope}`
+                    : t.noScopeSelected}
+                </dd>
+              </div>
+              <div className="fact">
+                <dt>{t.compatibilityLabel}</dt>
+                <dd>
+                  {profile.compatibility
+                    ? `${profile.compatibility} · ${report?.compatibilityVerified ? t.compatibilityVerified : t.unverified}`
+                    : t.noCompatibilitySelected}
+                </dd>
+              </div>
+            </dl>
+            <p className="note-line">{t.readinessNote}</p>
+          </>
+        ) : (
+          <div className="empty-state">
+            <h3>{t.noActiveTitle}</h3>
+            <p>{t.noActiveBody}</p>
+            <button
+              className="primary"
+              onClick={() => onNavigate("connections")}
+            >
+              {t.connect}
+            </button>
+          </div>
+        )}
+      </section>
+      <div className="overview-grid">
+        <section className="card">
+          <div className="card-heading">
+            <h2>{t.features}</h2>
+          </div>
+          {features.map((feature) => (
+            <div className="feature-row" key={feature.name}>
+              <div>
+                <span className="feature-name">
+                  <img src={feature.icon} alt="" />
+                  {feature.name}
+                </span>
+                <p>{feature.hint}</p>
+              </div>
+              <span className={enabled ? "badge success" : "badge subtle"}>
+                {enabled ? t.available : t.notAvailable}
+              </span>
+            </div>
+          ))}
+          <p className="note-line">{t.catalogNote}</p>
+        </section>
+        <section className="card">
+          <div className="card-heading">
+            <h2>{t.localEnv}</h2>
+            <button onClick={() => onNavigate("settings")}>
+              {t.viewDiagnostics}
+            </button>
+          </div>
+          <dl>
+            {environment.map((item) => (
+              <div className="env-row" key={item}>
+                <dt>{item}</dt>
+                <dd>
+                  <span aria-hidden="true" className="dot" />
+                  {t.unverified}
+                </dd>
+              </div>
+            ))}
+          </dl>
+          <p className="note-line">{t.envNote}</p>
+        </section>
+      </div>
+      <section className="card">
+        <div className="card-heading">
+          <h2>{t.gettingStarted}</h2>
+        </div>
+        <p>{t.gettingStartedHint}</p>
+        <div className="steps">
+          <div className="step">
+            <span aria-hidden="true" className="step-no">
+              01
+            </span>
+            <div>
+              <h3>{t.stepSave}</h3>
+              <p>{t.stepSaveHint}</p>
+            </div>
+          </div>
+          <div className="step">
+            <span aria-hidden="true" className="step-no">
+              02
+            </span>
+            <div>
+              <h3>{t.stepSearch}</h3>
+              <p>{t.stepSearchHint}</p>
+            </div>
+          </div>
+        </div>
+        <p className="note-line">{t.overviewBoundary}</p>
+        <div className="actions getting-started-actions">
+          <span className="spacer" />
+          <button className="primary" onClick={() => onNavigate("memories")}>
+            {t.openMemories}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+  function readyBadge(status: string | null | undefined) {
+    return status === "ready" ? "badge success" : "badge subtle";
+  }
+}
diff --git a/desktop/ui/src/app/SettingsHelp.tsx b/desktop/ui/src/app/SettingsHelp.tsx
deleted file mode 100644
index 36d5fcb4c2..0000000000
--- a/desktop/ui/src/app/SettingsHelp.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright (c) 2026 OceanBase.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useEffect, useRef, useState } from "react";
-import type { FoundationInfo } from "../generated/ipc";
-import { Diagnostics } from "./Diagnostics";
-import { messages, type Language } from "./messages";
-import type { Theme } from "./navigation";
-import { PageFeedback } from "./PageFeedback";
-
-export function SettingsHelp({
-  language,
-  theme,
-  host,
-  onLanguage,
-  onTheme,
-  localServerRequest,
-}: {
-  language: Language;
-  theme: Theme;
-  host: FoundationInfo | null;
-  onLanguage: (language: Language) => void;
-  onTheme: (theme: Theme) => void;
-  localServerRequest: number;
-}) {
-  const t = messages[language];
-  const localServer = useRef<HTMLHeadingElement>(null);
-  const [copyResult, setCopyResult] = useState<"copied" | "copyFailed" | null>(
-    null,
-  );
-  useEffect(() => {
-    if (localServerRequest) {
-      localServer.current?.scrollIntoView?.({ block: "start" });
-      localServer.current?.focus();
-    }
-  }, [localServerRequest]);
-  useEffect(() => setCopyResult(null), [language]);
-  const guide = `https://github.com/oceanbase/powercontext/blob/master/desktop/README${language === "zh" ? ".zh" : ""}.md`;
-  const support = "https://github.com/oceanbase/powercontext/issues";
-  async function copy(value: string) {
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopyResult("copied");
-    } catch {
-      setCopyResult("copyFailed");
-    }
-  }
-  return (
-    <div className="stack settings">
-      <section className="card stack">
-        <h2>{t.appearance}</h2>
-        <div className="setting-row">
-          <label htmlFor="language">{t.language}</label>
-          <select
-            id="language"
-            value={language}
-            onChange={(event) => onLanguage(event.target.value as Language)}
-          >
-            <option value="zh">简体中文</option>
-            <option value="en">English</option>
-          </select>
-        </div>
-        <div className="setting-row">
-          <label htmlFor="theme">{t.theme}</label>
-          <select
-            id="theme"
-            value={theme}
-            onChange={(event) => onTheme(event.target.value as Theme)}
-          >
-            <option value="system">{t.system}</option>
-            <option value="light">{t.light}</option>
-            <option value="dark">{t.dark}</option>
-          </select>
-        </div>
-      </section>
-      <section className="stack" aria-labelledby="local-server-heading">
-        <h2 id="local-server-heading" tabIndex={-1} ref={localServer}>
-          {t.localServer}
-        </h2>
-        <PageFeedback kind="unavailable" title={t.localSetupUnavailable}>
-          <p>{t.localSetupDescription}</p>
-          <p>{t.existingServerHelp}</p>
-        </PageFeedback>
-      </section>
-      <Diagnostics language={language} />
-      <section className="card stack">
-        <h2>{t.version}</h2>
-        <dl>
-          <div>
-            <dt>{t.version}</dt>
-            <dd>{host?.version ?? t.unknown}</dd>
-          </div>
-          <div>
-            <dt>{t.native}</dt>
-            <dd>{host ? t.nativeReady : t.unavailable}</dd>
-          </div>
-        </dl>
-        <p>{t.boundary}</p>
-      </section>
-      <section className="card stack">
-        <h2>{t.help}</h2>
-        <p>{t.guideDescription}</p>
-        <code>{guide}</code>
-        <div className="actions">
-          <button onClick={() => void copy(guide)}>{t.copyGuide}</button>
-        </div>
-        <p>{t.supportDescription}</p>
-        <code>{support}</code>
-        <div className="actions">
-          <button onClick={() => void copy(support)}>{t.copySupport}</button>
-        </div>
-        {copyResult && (
-          <p role={copyResult === "copied" ? "status" : "alert"}>
-            {t[copyResult]}
-          </p>
-        )}
-      </section>
-    </div>
-  );
-}
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index 6feac2251f..274ba3b963 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { DesktopState } from "../generated/ipc";
 import { messages, type Language } from "./messages";
 import { connectionMessages } from "./connection-messages";
@@ -22,7 +22,7 @@ import { connectionMessages } from "./connection-messages";
 type Props = {
   state: DesktopState | null;
   language: Language;
-  onManageConnections: (connectionId?: string) => void;
+  onManageConnections: () => void;
   onOpenScopes: () => void;
   onDisconnect: () => void;
 };
@@ -35,21 +35,17 @@ export function TopBar({
 }: Props) {
   const t = messages[language];
   const ct = connectionMessages[language];
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState<"connection" | "identity" | null>(null);
   const wrap = useRef<HTMLDivElement>(null);
-  const connectionWrap = useRef<HTMLDivElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const menu = useRef<HTMLDivElement>(null);
-  const firstItem = useRef(0);
-  const menuId = useId();
   useEffect(() => {
     const bar = wrap.current;
     if (!bar) return;
-    const update = () =>
+    const update = () => {
       document.documentElement.style.setProperty(
         "--topbar-height",
         `${bar.getBoundingClientRect().height}px`,
       );
+    };
     update();
     const observer =
       typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
@@ -61,244 +57,149 @@ export function TopBar({
   }, []);
   useEffect(() => {
     if (!open) return;
-    const items =
-      menu.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
-    items?.[firstItem.current === -1 ? items.length - 1 : 0]?.focus();
     function onPointerDown(event: PointerEvent) {
-      if (
-        event.target instanceof Node &&
-        !connectionWrap.current?.contains(event.target)
-      )
-        setOpen(false);
+      if (event.target instanceof Node && !wrap.current?.contains(event.target))
+        setOpen(null);
+    }
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(null);
     }
     document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
   }, [open]);
   const active = state?.active;
+  const report = active?.report;
   const activeProfile = state?.profiles.find(
-    (profile) => profile.id === active?.connectionId,
+    (p) => p.id === active?.connectionId,
   );
-  const latest = state?.reports.find(
-    (report) =>
-      report.connectionId === active?.connectionId &&
-      report.revision === active?.report.revision,
-  );
-  const report =
-    latest && active && latest.checkedAt >= active.report.checkedAt
-      ? latest
-      : active?.report;
   const principal = report?.anonymousAccess
     ? null
     : report?.identity.value?.principal;
   const identityText = !active
-    ? t.unverified
+    ? t.notConnected
     : report?.anonymousAccess
       ? t.anonymousIdentity
       : principal
         ? (principal.description ?? `${principal.type}: ${principal.id}`)
         : t.identityUnverified;
-  function closeMenu() {
-    setOpen(false);
-    trigger.current?.focus();
-  }
   return (
     <div className="topbar" ref={wrap}>
-      <div className="menu-wrap" ref={connectionWrap}>
+      <div className="menu-wrap">
         <button
           className="menu-trigger"
-          aria-expanded={open}
+          aria-expanded={open === "connection"}
           aria-haspopup="menu"
-          aria-controls={menuId}
-          ref={trigger}
-          aria-label={`${t.current}: ${activeProfile?.name ?? (state ? t.notConnected : t.unverified)}`}
-          onClick={() => {
-            firstItem.current = 0;
-            setOpen(!open);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-              event.preventDefault();
-              firstItem.current = event.key === "ArrowUp" ? -1 : 0;
-              setOpen(true);
-            }
-          }}
+          onClick={() => setOpen(open === "connection" ? null : "connection")}
         >
-          <span className="label">
-            {activeProfile?.name ?? (state ? t.notConnected : t.unverified)}
-          </span>
+          <span className="label">{activeProfile?.name ?? t.notConnected}</span>
           <span aria-hidden="true">▾</span>
         </button>
-        {open && (
-          <div
-            className="menu"
-            id={menuId}
-            role="menu"
-            aria-label={t.manageConnections}
-            ref={menu}
-            onBlur={(event) => {
-              if (
-                event.relatedTarget instanceof Node &&
-                !connectionWrap.current?.contains(event.relatedTarget)
-              )
-                setOpen(false);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") {
-                event.preventDefault();
-                closeMenu();
-                return;
-              }
-              if (event.key === "Tab") {
-                setOpen(false);
-                return;
-              }
-              const items = Array.from(
-                menu.current?.querySelectorAll<HTMLButtonElement>(
-                  '[role="menuitem"]',
-                ) ?? [],
-              );
-              const index = items.indexOf(
-                document.activeElement as HTMLButtonElement,
-              );
-              let next: number;
-              if (event.key === "ArrowDown") next = (index + 1) % items.length;
-              else if (event.key === "ArrowUp")
-                next = (index + items.length - 1) % items.length;
-              else if (event.key === "Home") next = 0;
-              else if (event.key === "End") next = items.length - 1;
-              else return;
-              event.preventDefault();
-              items[next]?.focus();
-            }}
-          >
-            {state?.profiles.map((profile) => (
+        {open === "connection" && (
+          <div className="menu" role="menu">
+            {state?.profiles.map((p) => (
               <button
-                key={profile.id}
+                key={p.id}
                 className="menu-item"
                 role="menuitem"
-                tabIndex={-1}
                 onClick={() => {
-                  closeMenu();
-                  onManageConnections(profile.id);
+                  setOpen(null);
+                  onManageConnections();
                 }}
               >
                 <span>
-                  {profile.name}
-                  {active?.connectionId === profile.id
+                  {p.name}
+                  {state.active?.connectionId === p.id
                     ? ` · ${ct.activeBadge}`
                     : ""}
                 </span>
-                <span className="meta">{profile.endpoint}</span>
+                <span className="meta">{p.endpoint}</span>
               </button>
             ))}
+            {state?.profiles.length ? <div className="menu-separator" /> : null}
             <button
               className="menu-item"
               role="menuitem"
-              tabIndex={-1}
               onClick={() => {
-                closeMenu();
+                setOpen(null);
                 onManageConnections();
               }}
             >
               {t.manageConnections}
             </button>
-            {active && (
-              <button
-                className="menu-item"
-                role="menuitem"
-                tabIndex={-1}
-                onClick={() => {
-                  closeMenu();
-                  onDisconnect();
-                }}
-              >
-                {ct.disconnect}
-              </button>
+            {state?.active && (
+              <>
+                <div className="menu-separator" />
+                <button
+                  className="menu-item"
+                  role="menuitem"
+                  onClick={() => {
+                    setOpen(null);
+                    onDisconnect();
+                  }}
+                >
+                  {ct.disconnect}
+                </button>
+              </>
             )}
             <p className="menu-note">{t.switchHint}</p>
           </div>
         )}
       </div>
-      <span className="status-pill">
-        {active ? t.connected : state ? t.notConnected : t.unverified}
+      <span className={active ? "status-pill ok" : "status-pill"} role="status">
+        <span aria-hidden="true" className={active ? "dot ok" : "dot"} />
+        {active ? t.connected : t.notConnected}
       </span>
+      <span aria-hidden="true" className="divider" />
       <div className="topbar-group">
         <span className="topbar-label">{t.scopeLabel}</span>
+        <button className="menu-trigger" onClick={onOpenScopes}>
+          <span className="label">
+            {active?.scope?.title ?? t.noScopeSelected}
+          </span>
+          <span aria-hidden="true">▾</span>
+        </button>
+      </div>
+      <span className="topbar-spacer" />
+      <div className="menu-wrap">
         <button
           className="menu-trigger"
-          disabled={!active}
-          onClick={onOpenScopes}
-          aria-haspopup="dialog"
+          aria-expanded={open === "identity"}
+          aria-haspopup="menu"
+          onClick={() => setOpen(open === "identity" ? null : "identity")}
         >
-          <span>{active?.scope?.title ?? t.noScopeSelected}</span>
+          <span className="label">{identityText}</span>
           <span aria-hidden="true">▾</span>
         </button>
-      </div>
-      <div className="global-context">
-        {activeProfile && (
-          <p className="context-endpoint">{activeProfile.endpoint}</p>
-        )}
-        {active?.scope && (
-          <p>
-            <span>{t.exactScope}: </span>
-            <code>{active.scope.scope_id}</code>
-          </p>
-        )}
-        {active && (
-          <dl className="context-facts">
-            <div>
-              <dt>{t.identityLabel}</dt>
-              <dd>{identityText}</dd>
-            </div>
-            <div>
-              <dt>{t.compatibility}</dt>
-              <dd>
-                {report?.compatibilityVerified
-                  ? t.compatibilityVerified
-                  : t.unverified}
-              </dd>
-            </div>
-            <div>
-              <dt>{t.liveness}</dt>
-              <dd>{report?.liveness.value?.status ?? t.unverified}</dd>
-            </div>
-            <div>
-              <dt>{t.readiness}</dt>
-              <dd>
-                {report?.readiness.value?.status === "ready"
-                  ? t.serviceReady
-                  : report?.readiness.value
-                    ? t.serviceNotReady
-                    : t.unverified}
-              </dd>
-            </div>
-          </dl>
-        )}
-        {report && (
-          <p className="small">
-            {t.lastChecked}:{" "}
-            {new Date(report.checkedAt * 1000).toLocaleString(
-              language === "zh" ? "zh-CN" : "en-US",
+        {open === "identity" && (
+          <div className="menu right" role="menu">
+            <p className="menu-note">
+              <strong>{t.identityDetails}</strong>
+            </p>
+            {principal ? (
+              <>
+                <p className="menu-note">
+                  {principal.type}: {principal.id}
+                  {principal.description ? ` · ${principal.description}` : ""}
+                </p>
+                <p className="menu-note">
+                  {t.accessMode}: {report?.identity.value?.mode ?? t.unverified}
+                </p>
+              </>
+            ) : (
+              <p className="menu-note">
+                {report?.anonymousAccess ? ct.noIdentity : t.identityUnverified}
+              </p>
             )}
-            . {t.readinessNote}
-          </p>
+          </div>
         )}
       </div>
-      {active && (
-        <details className="identity-details" key={active.generation}>
-          <summary>{t.identityDetails}</summary>
-          {principal ? (
-            <p>
-              {principal.type}: {principal.id} · {t.accessMode}:{" "}
-              {report?.identity.value?.mode ?? t.unverified}
-            </p>
-          ) : (
-            <p>
-              {report?.anonymousAccess ? ct.noIdentity : t.identityUnverified}
-            </p>
-          )}
-        </details>
-      )}
+      <span aria-hidden="true" className="avatar">
+        {identityText.charAt(0).toUpperCase()}
+      </span>
     </div>
   );
 }
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index 0cdc2ef4f3..c73835137b 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -27,37 +27,10 @@ export const messages = {
       "此视图将展示当前精确 Scope 的库存和用量。尚未接入数据；未知值不表示为零。",
     sessionDescription:
       "此视图将展示本次 Desktop 会话的有限请求汇总。当前尚未提供请求统计或安全诊断摘要复制。",
-    loading: "正在加载 Desktop 状态…",
-    stateFailed: "无法加载 Desktop 状态",
-    desktopError: "Desktop 操作失败",
-    retryState: "重试加载",
-    setUpLocally: "本地设置",
-    firstUseDescription:
-      "在本机准备 Server，或连接已有 Server，然后选择精确 Scope 开始保存、搜索和读取记忆。本地设置的可用情况见设置说明。",
-    selectScopeDescription:
-      "选择 Desktop 保存和搜索使用的精确 Scope；这不会修改 Agent 绑定。",
-    appearance: "语言与外观",
-    localServer: "本地 Server",
-    localSetupUnavailable: "本地安装与服务管理尚未可用",
-    localSetupDescription:
-      "此 Desktop 尚未提供安装、启动、修复或移除本地 Server 的操作。即使 Server 未运行，仍可查看本说明和本地诊断。",
-    existingServerHelp:
-      "可以按使用指南独立准备 Server，或向管理员获取地址和适用的凭据，再到“连接”保存配置并显式激活。",
-    help: "帮助与支持",
-    guideDescription:
-      "使用指南包含独立准备 Server 的前提、连接步骤和本地 CLI 诊断说明。复制链接后在浏览器中打开。",
-    supportDescription:
-      "在问题反馈页面报告问题；分享诊断信息前请去除凭据、内容和其他敏感信息。",
-    copyGuide: "复制使用指南链接",
-    copySupport: "复制问题反馈链接",
-    copied: "链接已复制。",
-    copyFailed: "无法复制链接，请手动选择并复制地址。",
-    unknown: "未知",
-    liveness: "存活状态",
-    lastChecked: "上次检查",
+    home: "总览",
     connections: "连接",
     memories: "记忆",
-    settings: "设置与帮助",
+    settings: "设置与诊断",
     menu: "导航菜单",
     tagline: "确认连接状态，开始保存与检索记忆。",
     connectionIntro: "保存 Server 地址与凭据，在不同连接之间切换。",
@@ -178,39 +151,10 @@ export const messages = {
       "This view will show inventory and usage for the current exact Scope. Data is not connected yet; unknown values are not zero.",
     sessionDescription:
       "This view will show bounded request summaries for this Desktop session. Request statistics and safe diagnostic summary copying are not available yet.",
-    loading: "Loading Desktop state…",
-    stateFailed: "Could not load Desktop state",
-    desktopError: "Desktop operation failed",
-    retryState: "Retry loading",
-    setUpLocally: "Set up locally",
-    firstUseDescription:
-      "Prepare a local Server or connect an existing Server, then select an exact Scope to save, search and read memories. See settings for local setup availability.",
-    selectScopeDescription:
-      "Select the exact Scope for Desktop saves and searches. This does not change Agent bindings.",
-    appearance: "Language & appearance",
-    localServer: "Local Server",
-    localSetupUnavailable:
-      "Local installation and service management are not available yet",
-    localSetupDescription:
-      "This Desktop does not yet offer local Server installation, start, repair or removal. This guidance and local diagnostics remain accessible when the Server is not running.",
-    existingServerHelp:
-      "Follow the usage guide to prepare a Server independently, or obtain its address and applicable credentials from an administrator. Save its configuration in Connections and explicitly activate it.",
-    help: "Help & support",
-    guideDescription:
-      "The usage guide covers prerequisites for an independently prepared Server, connection steps and local CLI diagnostics. Copy the link and open it in a browser.",
-    supportDescription:
-      "Report problems on the issue tracker. Remove credentials, content and other sensitive information before sharing diagnostics.",
-    copyGuide: "Copy usage guide link",
-    copySupport: "Copy support link",
-    copied: "Link copied.",
-    copyFailed:
-      "Could not copy the link. Select and copy the address manually.",
-    unknown: "Unknown",
-    liveness: "Liveness",
-    lastChecked: "Last checked",
+    home: "Overview",
     connections: "Connections",
     memories: "Memories",
-    settings: "Settings & help",
+    settings: "Settings & diagnostics",
     menu: "Navigation",
     tagline: "Check the connection status, then save and search memories.",
     connectionIntro:
diff --git a/desktop/ui/src/app/navigation.ts b/desktop/ui/src/app/navigation.ts
deleted file mode 100644
index 7cdd003a55..0000000000
--- a/desktop/ui/src/app/navigation.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Copyright (c) 2026 OceanBase.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export type Page = "memories" | "connections" | "observation" | "settings";
-export type ObservationTab = "runtime" | "inventory" | "session";
-export type Theme = "light" | "dark" | "system";
-export type NavigationTarget =
-  | { page: "memories" }
-  | { page: "connections"; connectionId?: string }
-  | { page: "observation"; tab?: ObservationTab }
-  | { page: "settings"; section?: "local-server" };
diff --git a/desktop/ui/src/app/style.css b/desktop/ui/src/app/style.css
index c02bd0bd64..dd8c2c3e39 100644
--- a/desktop/ui/src/app/style.css
+++ b/desktop/ui/src/app/style.css
@@ -318,10 +318,8 @@ main {
   top: calc(100% + 6px);
   left: 0;
   z-index: 20;
-  width: min(360px, calc(100vw - 32px));
-  min-width: 0;
-  max-height: min(480px, 60dvh);
-  overflow-y: auto;
+  min-width: 260px;
+  max-width: 360px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -352,75 +350,6 @@ main {
   color: var(--muted);
   overflow-wrap: anywhere;
 }
-
-/* Context and page containers remain readable with long exact identities. */
-.global-context {
-  flex-basis: 100%;
-  min-width: 0;
-}
-.global-context p {
-  margin: 4px 0;
-  font-size: 14px;
-  overflow-wrap: anywhere;
-}
-.context-facts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 24px;
-  margin: 8px 0;
-  font-size: 14px;
-}
-.context-facts > div {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-width: 0;
-  padding: 0;
-  border: 0;
-}
-.context-facts dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-.identity-details {
-  width: 100%;
-  min-width: 0;
-}
-.identity-details p,
-.topbar-group button {
-  overflow-wrap: anywhere;
-}
-.topbar-group button {
-  text-align: left;
-  min-width: 0;
-}
-.observation-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.observation-tabs [aria-selected="true"] {
-  border-color: var(--accent);
-  background: var(--selected);
-  color: var(--accent);
-  font-weight: 600;
-}
-.page-feedback {
-  margin: 16px 0;
-}
-.page-feedback h2 {
-  margin-bottom: 0;
-}
-.page-feedback.error {
-  border-inline-start: 4px solid var(--accent);
-}
-.feedback-body p:last-child {
-  margin-bottom: 0;
-}
-[tabindex="-1"]:focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 3px;
-}
 .menu-separator {
   border-top: 1px solid var(--border);
   margin: 6px 4px;
@@ -1017,6 +946,30 @@ dd {
   padding: 0;
 }
 
+/* ---------- Observation ---------- */
+.observation-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.observation-tabs [aria-selected="true"] {
+  border-color: var(--accent);
+  background: var(--selected);
+  color: var(--accent);
+  font-weight: 600;
+}
+.page-feedback h2 {
+  margin-bottom: 0;
+}
+.feedback-body p:last-child {
+  margin-bottom: 0;
+}
+@media (forced-colors: active) {
+  .observation-tabs [aria-selected="true"] {
+    border: 2px solid Highlight;
+  }
+}
+
 /* ---------- Misc ---------- */
 details {
   margin: 8px 0;
@@ -1165,20 +1118,10 @@ footer {
 }
 @media (forced-colors: active) {
   button[aria-current="page"],
-  .notice,
-  .observation-tabs [aria-selected="true"] {
+  .notice {
     border: 2px solid Highlight;
   }
   .dot {
     background: CanvasText;
   }
 }
-
-@media (max-width: 700px), (max-height: 600px) {
-  .topbar {
-    position: static;
-  }
-  :root {
-    scroll-padding-top: 16px;
-  }
-}
diff --git a/desktop/ui/tests/app.test.tsx b/desktop/ui/tests/app.test.tsx
index f752c96ce7..2b13e7d2d1 100644
--- a/desktop/ui/tests/app.test.tsx
+++ b/desktop/ui/tests/app.test.tsx
@@ -14,122 +14,22 @@
  * limitations under the License.
  */
 
-import { afterEach, beforeEach, expect, test, vi } from "vitest";
-import {
-  act,
-  cleanup,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { App } from "../src/app/App";
-import { TopBar } from "../src/app/TopBar";
-import { Observation } from "../src/app/Observation";
-import { SettingsHelp } from "../src/app/SettingsHelp";
-import { MemoryWorkspace } from "../src/app/MemoryWorkspace";
-import { desktopApi, getFoundationInfo } from "../src/shared/ipc";
-import type { DesktopState, ProfileView } from "../src/generated/ipc";
-
-vi.mock("../src/shared/ipc", () => ({
-  getFoundationInfo: vi.fn(),
-  desktopApi: {
-    state: vi.fn(),
-    save: vi.fn(),
-    check: vi.fn(),
-    disconnect: vi.fn(),
-    scopes: vi.fn(),
-    selectScope: vi.fn(),
-    cancelScopes: vi.fn(),
-    cancelMemory: vi.fn(),
-    remember: vi.fn(),
-    search: vi.fn(),
-    atomicEntry: vi.fn(),
-    diagnostics: vi.fn(),
-  },
-}));
-const firstProfile: ProfileView = {
-  id: "connection-a",
-  revision: 1,
-  name: "First",
-  endpoint: "http://127.0.0.1:8000/",
-  authentication: "unauthenticated_loopback",
-  caPem: null,
-  compatibility: null,
-  credentialState: "not_required",
-};
-const secondProfile = {
-  ...firstProfile,
-  id: "connection-b",
-  name: "Second",
-  endpoint: "http://127.0.0.1:9000/",
-};
-const disconnected: DesktopState = {
-  generation: 0,
-  profiles: [firstProfile, secondProfile],
-  reports: [],
-  active: null,
-  compatibilityProfiles: [],
-  pendingCredentialCleanup: 0,
-  lastWrite: null,
-};
-const fact = { value: null, error: null };
-const report = {
-  connectionId: firstProfile.id,
-  revision: 1,
-  checkedAt: 1,
-  liveness: fact,
-  readiness: fact,
-  identity: fact,
-  capabilities: fact,
-  compatibilityVerified: true,
-  anonymousAccess: true,
-  supportedOperations: [],
-};
-const scope = {
-  scope_id: "scope-a",
-  title: "Same scope title",
-  summary: "",
-  context_references: [],
-  external_references: [],
-  version: 1,
-};
-const connected: DesktopState = {
-  ...disconnected,
-  generation: 1,
-  active: { connectionId: firstProfile.id, generation: 1, report, scope },
-};
-const nav = (name: string) =>
-  within(screen.getByRole("navigation")).getByRole("button", {
-    name,
-  });
-const connectionTrigger = () =>
-  screen.getByRole("button", { name: /^当前连接:/ });
-beforeEach(() => {
-  vi.resetAllMocks();
-  vi.mocked(getFoundationInfo).mockResolvedValue(null);
-  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
-  vi.mocked(desktopApi.cancelMemory).mockResolvedValue(undefined);
-  vi.mocked(desktopApi.cancelScopes).mockResolvedValue(undefined);
-});
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-test("four entries expose both first-use paths and retain disabled disconnected Memory operations", async () => {
+afterEach(cleanup);
+test("disconnected shell prevents writes and search and explains the boundary", async () => {
   const user = userEvent.setup();
   render(<App />);
+  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: /连接已有服务/ }));
+  expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
   expect(
-    await screen.findByRole("heading", { name: "尚未连接服务" }),
-  ).toBeTruthy();
-  expect(
-    within(screen.getByRole("navigation"))
-      .getAllByRole("button")
-      .map((button) => button.textContent),
-  ).toEqual(["记忆", "连接", "观察", "设置与帮助"]);
-  expect(screen.getByRole("heading", { level: 1, name: "记忆" })).toBeTruthy();
+    (screen.getByRole("button", { name: "保存配置" }) as HTMLButtonElement)
+      .disabled,
+  ).toBe(true);
+  await user.click(screen.getByRole("button", { name: "记忆" }));
   expect(
     (screen.getByRole("button", { name: "保存" }) as HTMLButtonElement)
       .disabled,
@@ -138,437 +38,22 @@ test("four entries expose both first-use paths and retain disabled disconnected
     (screen.getByRole("button", { name: "搜索" }) as HTMLButtonElement)
       .disabled,
   ).toBe(true);
-  await user.click(screen.getByRole("button", { name: "本地设置" }));
-  const local = screen.getByRole("heading", { name: "本地 Server" });
-  await waitFor(() => expect(document.activeElement).toBe(local));
-  expect(screen.getByText("本地安装与服务管理尚未可用")).toBeTruthy();
-  expect(desktopApi.check).not.toHaveBeenCalled();
-  expect(desktopApi.diagnostics).not.toHaveBeenCalled();
-  await user.click(nav("记忆"));
-  await user.click(screen.getByRole("button", { name: "连接已有服务" }));
-  expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
-});
-
-test("loading, failed initialization and a successful disconnected retry have distinct presentation", async () => {
-  const user = userEvent.setup();
-  let reject!: (reason: unknown) => void;
-  vi.mocked(desktopApi.state).mockImplementationOnce(
-    () =>
-      new Promise((_, fail) => {
-        reject = fail;
-      }),
-  );
-  render(<App />);
-  expect(screen.getByRole("status").textContent).toBe("正在加载 Desktop 状态…");
-  expect(screen.queryByRole("button", { name: "本地设置" })).toBeNull();
-  await act(async () => reject({ code: "storage" }));
-  expect(screen.getByRole("alert").textContent).toContain(
-    "无法加载 Desktop 状态",
-  );
-  expect(screen.queryByRole("button", { name: "本地设置" })).toBeNull();
-  await user.click(nav("设置与帮助"));
-  expect(screen.getByRole("heading", { name: "本地 Server" })).toBeTruthy();
-  await user.click(screen.getByRole("button", { name: "重试加载" }));
-  await user.click(nav("记忆"));
-  expect(await screen.findByRole("button", { name: "本地设置" })).toBeTruthy();
-  expect(screen.queryByRole("alert")).toBeNull();
+  expect(screen.queryByText(/正文和搜索结果只在内存中使用/)).toBeNull();
 });
-
-test("settings, bilingual navigation and theme work without the native host and never invent a version", async () => {
+test("navigation, bilingual settings and theme remain usable without the native host", async () => {
   const user = userEvent.setup();
   render(<App />);
-  await user.click(nav("设置与帮助"));
+  await user.click(screen.getByRole("button", { name: "设置与诊断" }));
   await user.selectOptions(screen.getByLabelText("语言"), "en");
   expect(screen.getByRole("heading", { level: 1 }).textContent).toBe(
-    "Settings & help",
+    "Settings & diagnostics",
   );
-  expect(screen.getByRole("heading", { name: "Local Server" })).toBeTruthy();
-  expect(screen.queryByText("0.1.0")).toBeNull();
-  expect(screen.getByText("Unknown")).toBeTruthy();
   await user.selectOptions(screen.getByLabelText("Theme"), "dark");
   expect(document.documentElement.dataset.theme).toBe("dark");
   expect(document.documentElement.lang).toBe("en");
-  await user.selectOptions(screen.getByLabelText("Theme"), "light");
-  expect(document.documentElement.dataset.theme).toBe("light");
-  await user.selectOptions(screen.getByLabelText("Theme"), "system");
-  expect(document.documentElement.dataset.theme).toBe("system");
-  await user.click(nav("Memories"));
+  await user.click(screen.getByRole("button", { name: /Memories/ }));
   expect(
     screen.getByText("Enter keywords to find existing memories."),
   ).toBeTruthy();
-});
-
-test("Observation has three keyboard-accessible unavailable panels without automatic checks", async () => {
-  const user = userEvent.setup();
-  vi.mocked(desktopApi.state).mockResolvedValue(connected);
-  render(<App />);
-  await user.click(nav("观察"));
-  const runtime = screen.getByRole("tab", { name: "运行状态" });
-  await user.click(runtime);
-  await user.keyboard("{ArrowRight}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("tab", { name: "当前 Scope 库存与用量" }),
-  );
-  expect(screen.getByRole("tabpanel").textContent).toContain(
-    "未知值不表示为零",
-  );
-  await user.keyboard("{End}");
-  expect(screen.getByRole("tabpanel").textContent).toContain(
-    "安全诊断摘要复制",
-  );
-  await user.keyboard("{Home}{ArrowLeft}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("tab", { name: "本次会话" }),
-  );
-  expect(screen.getAllByRole("tab")).toHaveLength(3);
-  expect(desktopApi.check).not.toHaveBeenCalled();
-  expect(desktopApi.diagnostics).not.toHaveBeenCalled();
-  expect(desktopApi.search).not.toHaveBeenCalled();
-});
-
-test("each observation panel accepts its owning feature's content", () => {
-  render(
-    <Observation
-      language="en"
-      tab="inventory"
-      onTabChange={vi.fn()}
-      panels={{ inventory: <p>Exact Scope inventory supplied by its owner</p> }}
-    />,
-  );
-  expect(screen.getByRole("tabpanel").textContent).toBe(
-    "Exact Scope inventory supplied by its owner",
-  );
-  expect(
-    screen.queryByText("This observation view is not available yet"),
-  ).toBeNull();
-});
-
-test("a saved connection menu item opens that configuration without activating it", async () => {
-  const user = userEvent.setup();
-  render(<App />);
-  await screen.findByRole("button", { name: "本地设置" });
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
-  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
-    "Second",
-  );
-  expect(desktopApi.check).not.toHaveBeenCalled();
-  await waitFor(() =>
-    expect(document.activeElement).toBe(
-      screen.getByRole("heading", { level: 1, name: "连接" }),
-    ),
-  );
-});
-
-test("canceling external connection selection keeps the editor and its draft intact", async () => {
-  const user = userEvent.setup();
-  render(<App />);
-  await screen.findByRole("button", { name: "本地设置" });
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /First/ }));
-  await user.type(screen.getByLabelText("连接名称"), " draft");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
-  expect(confirm).toHaveBeenCalled();
-  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
-    "First draft",
-  );
-  confirm.mockReturnValue(true);
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
-  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
-    "Second",
-  );
-  expect(desktopApi.check).not.toHaveBeenCalled();
-});
-
-test("connection menu supports arrows, Home, End, Escape and focus return", async () => {
-  const user = userEvent.setup();
-  render(<App />);
-  await screen.findByRole("button", { name: "本地设置" });
-  connectionTrigger().focus();
-  await user.keyboard("{ArrowDown}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("menuitem", { name: /First/ }),
-  );
-  await user.keyboard("{ArrowDown}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("menuitem", { name: /Second/ }),
-  );
-  await user.keyboard("{End}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("menuitem", { name: "管理连接" }),
-  );
-  await user.keyboard("{Home}{ArrowUp}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("menuitem", { name: "管理连接" }),
-  );
-  await user.keyboard("{Escape}");
-  expect(screen.queryByRole("menu")).toBeNull();
-  expect(document.activeElement).toBe(connectionTrigger());
-  await user.keyboard("{ArrowUp}");
-  expect(document.activeElement).toBe(
-    screen.getByRole("menuitem", { name: "管理连接" }),
-  );
-});
-
-test("a late save cannot replace an externally selected connection's new draft", async () => {
-  const user = userEvent.setup();
-  let finish!: (state: DesktopState) => void;
-  vi.mocked(desktopApi.save).mockImplementationOnce(
-    () =>
-      new Promise((resolve) => {
-        finish = resolve;
-      }),
-  );
-  vi.spyOn(window, "confirm").mockReturnValue(true);
-  render(<App />);
-  await screen.findByRole("button", { name: "本地设置" });
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /First/ }));
-  await user.type(screen.getByLabelText("连接名称"), " saved");
-  await user.click(screen.getByRole("button", { name: "保存配置" }));
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: /Second/ }));
-  await act(async () =>
-    finish({
-      ...disconnected,
-      profiles: [
-        { ...firstProfile, revision: 2, name: "First saved" },
-        secondProfile,
-      ],
-    }),
-  );
-  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
-    "Second",
-  );
-  await user.type(screen.getByLabelText("连接名称"), " draft");
-  vi.spyOn(window, "confirm").mockReturnValue(false);
-  await user.click(nav("观察"));
-  expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
-    "Second draft",
-  );
-});
-
-test("a failed disconnect preserves the draft's navigation protection", async () => {
-  const user = userEvent.setup();
-  vi.mocked(desktopApi.state).mockResolvedValue(connected);
-  vi.mocked(desktopApi.disconnect).mockRejectedValue({ code: "storage" });
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
-  render(<App />);
-  await screen.findByRole("button", { name: scope.title });
-  await user.type(screen.getByLabelText("记忆内容"), "unsaved");
-  await user.click(connectionTrigger());
-  await user.click(screen.getByRole("menuitem", { name: "断开桌面连接" }));
-  await screen.findByRole("alert");
-  confirm.mockClear().mockReturnValue(false);
-  await user.click(nav("观察"));
-  expect(confirm).toHaveBeenCalled();
-  expect((screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value).toBe(
-    "unsaved",
-  );
-});
-
-test("scope dialog traps focus and returns it to its trigger without losing a draft", async () => {
-  const user = userEvent.setup();
-  vi.mocked(desktopApi.state).mockResolvedValue(connected);
-  render(<App />);
-  await screen.findByRole("button", { name: "Same scope title" });
-  const text = screen.getByLabelText("记忆内容");
-  await user.type(text, "keep this draft");
-  const trigger = screen.getByRole("button", { name: "Same scope title" });
-  await user.click(trigger);
-  const dialog = screen.getByRole("dialog");
-  const close = within(dialog).getByRole("button", { name: "关闭" });
-  expect(document.activeElement).toBe(close);
-  expect((document.querySelector(".app-background") as HTMLElement).inert).toBe(
-    true,
-  );
-  await user.keyboard("{Shift>}{Tab}{/Shift}");
-  expect(document.activeElement).toBe(
-    within(dialog).getByRole("button", { name: "查找范围" }),
-  );
-  await user.keyboard("{Tab}");
-  expect(document.activeElement).toBe(close);
-  await user.keyboard("{Escape}");
-  expect(screen.queryByRole("dialog")).toBeNull();
-  expect(document.activeElement).toBe(trigger);
-  expect((text as HTMLTextAreaElement).value).toBe("keep this draft");
-});
-
-test("global context distinguishes identical Scope titles by exact ID on every page", async () => {
-  const user = userEvent.setup();
-  const next = {
-    ...connected,
-    generation: 2,
-    active: {
-      ...connected.active!,
-      generation: 2,
-      scope: { ...scope, scope_id: "scope-b" },
-    },
-  };
-  vi.mocked(desktopApi.state).mockResolvedValue(connected);
-  vi.mocked(desktopApi.scopes).mockResolvedValue({
-    items: [next.active.scope],
-  });
-  vi.mocked(desktopApi.selectScope).mockResolvedValue(next);
-  render(<App />);
-  await screen.findByRole("button", { name: scope.title });
-  const context = document.querySelector(".global-context") as HTMLElement;
-  expect(within(context).getByText("scope-a")).toBeTruthy();
-  await user.click(screen.getByRole("button", { name: scope.title }));
-  await user.click(screen.getByRole("button", { name: "查找范围" }));
-  await user.click(
-    await within(screen.getByRole("dialog")).findByRole("button", {
-      name: scope.title,
-    }),
-  );
-  await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  for (const page of ["连接", "观察", "设置与帮助", "记忆"]) {
-    await user.click(nav(page));
-    expect(within(context).getByText("scope-b")).toBeTruthy();
-    expect(within(context).queryByText("scope-a")).toBeNull();
-  }
-});
-
-test("connected Memory without an exact Scope offers the existing selector", async () => {
-  const user = userEvent.setup();
-  vi.mocked(desktopApi.state).mockResolvedValue({
-    ...connected,
-    active: { ...connected.active!, scope: null },
-  });
-  render(<App />);
-  await user.click(await screen.findByRole("button", { name: "选择范围" }));
-  expect(screen.getByRole("dialog")).toBeTruthy();
-});
-
-test("health does not turn unverified compatibility or identity into authorization", () => {
-  const state = {
-    ...connected,
-    active: {
-      ...connected.active!,
-      report: {
-        ...report,
-        anonymousAccess: false,
-        compatibilityVerified: false,
-        readiness: {
-          value: { status: "ready" as const, checks: {} },
-          error: null,
-        },
-      },
-    },
-  };
-  render(
-    <TopBar
-      state={state}
-      language="en"
-      onManageConnections={vi.fn()}
-      onOpenScopes={vi.fn()}
-      onDisconnect={vi.fn()}
-    />,
-  );
-  expect(screen.getByText("Service ready")).toBeTruthy();
-  expect(
-    within(document.querySelector(".global-context") as HTMLElement).getByText(
-      "Identity not verified yet",
-    ),
-  ).toBeTruthy();
-  const compatibility = screen.getByText("Compatibility").closest("div")!;
-  expect(within(compatibility).getByText("Not verified")).toBeTruthy();
-  expect(
-    screen.getByText(
-      /Readiness and operation permissions are verified separately/,
-    ),
-  ).toBeTruthy();
-});
-
-test("help copies fixed locale-specific documentation and support links with failure feedback", async () => {
-  const user = userEvent.setup();
-  const clipboard = vi
-    .spyOn(navigator.clipboard, "writeText")
-    .mockResolvedValue(undefined);
-  render(<App />);
-  await user.click(nav("设置与帮助"));
-  await user.click(screen.getByRole("button", { name: "复制使用指南链接" }));
-  expect(clipboard).toHaveBeenLastCalledWith(
-    "https://github.com/oceanbase/powercontext/blob/master/desktop/README.zh.md",
-  );
-  expect(screen.getByText("链接已复制。")).toBeTruthy();
-  await user.selectOptions(screen.getByLabelText("语言"), "en");
-  await user.click(
-    screen.getByRole("button", { name: "Copy usage guide link" }),
-  );
-  expect(clipboard).toHaveBeenLastCalledWith(
-    "https://github.com/oceanbase/powercontext/blob/master/desktop/README.md",
-  );
-  clipboard.mockRejectedValueOnce(new Error("clipboard denied"));
-  await user.click(screen.getByRole("button", { name: "Copy support link" }));
-  expect(clipboard).toHaveBeenLastCalledWith(
-    "https://github.com/oceanbase/powercontext/issues",
-  );
-  expect(screen.getByRole("alert").textContent).toMatch(/Could not copy/);
-});
-
-test("appearance changes retain diagnostic results and use the actual native version", async () => {
-  const user = userEvent.setup();
-  vi.mocked(getFoundationInfo).mockResolvedValue({
-    version: "9.8.7",
-    phase: "preview",
-    credentialBackend: "test",
-    serverConnected: false,
-  });
-  vi.mocked(desktopApi.diagnostics).mockResolvedValue({
-    checkedAt: 1,
-    exitCode: 0,
-    cliVersion: "synthetic-cli",
-    items: [],
-    hosts: [],
-  });
-  render(<App />);
-  await user.click(nav("设置与帮助"));
-  await user.click(screen.getByRole("button", { name: "检查本机服务" }));
-  expect(await screen.findByText("CLI 版本: synthetic-cli")).toBeTruthy();
-  await user.selectOptions(screen.getByLabelText("语言"), "en");
-  await user.selectOptions(screen.getByLabelText("Theme"), "dark");
-  expect(screen.getByText("CLI version: synthetic-cli")).toBeTruthy();
-  expect(screen.getByText("9.8.7")).toBeTruthy();
-});
-
-test("language and theme presentation changes preserve Memory's draft", async () => {
-  const user = userEvent.setup();
-  const props = { state: connected, onState: vi.fn(), onDirty: vi.fn() };
-  const { rerender } = render(<MemoryWorkspace {...props} language="zh" />);
-  await user.type(screen.getByLabelText("记忆内容"), "unsaved draft");
-  document.documentElement.dataset.theme = "dark";
-  rerender(<MemoryWorkspace {...props} language="en" />);
-  expect(
-    (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
-  ).toBe("unsaved draft");
-});
-
-test("Local Server navigation can be requested repeatedly without changing its availability", async () => {
-  const props = {
-    language: "en" as const,
-    theme: "system" as const,
-    host: null,
-    onLanguage: vi.fn(),
-    onTheme: vi.fn(),
-  };
-  const { rerender } = render(
-    <SettingsHelp {...props} localServerRequest={1} />,
-  );
-  expect(document.activeElement).toBe(
-    screen.getByRole("heading", { name: "Local Server" }),
-  );
-  screen.getByRole("button", { name: "Copy usage guide link" }).focus();
-  rerender(<SettingsHelp {...props} localServerRequest={2} />);
-  expect(document.activeElement).toBe(
-    screen.getByRole("heading", { name: "Local Server" }),
-  );
-  expect(
-    screen.getByText(
-      "Local installation and service management are not available yet",
-    ),
-  ).toBeTruthy();
+  expect(screen.queryByRole("list")).toBeNull();
 });
diff --git a/desktop/ui/tests/connections.test.tsx b/desktop/ui/tests/connections.test.tsx
index 3c639f1a16..af68391e95 100644
--- a/desktop/ui/tests/connections.test.tsx
+++ b/desktop/ui/tests/connections.test.tsx
@@ -311,10 +311,10 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
       endpoint: "http://localhost:8000",
     }),
   );
-  await user.click(screen.getByRole("button", { name: "观察" }));
+  await user.click(screen.getByRole("button", { name: "总览" }));
   await waitFor(() =>
     expect(document.activeElement).toBe(
-      screen.getByRole("heading", { level: 1, name: "观察" }),
+      screen.getByRole("heading", { level: 1, name: "总览" }),
     ),
   );
   await user.click(screen.getByRole("button", { name: "连接" }));
@@ -328,7 +328,7 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
     finish(state({ ...profile, name: "First" }));
   });
   confirm.mockClear().mockReturnValue(false);
-  await user.click(screen.getByRole("button", { name: "观察" }));
+  await user.click(screen.getByRole("button", { name: "总览" }));
   expect(confirm).toHaveBeenCalled();
   expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
     "New draft",
diff --git a/desktop/ui/tests/memory.test.tsx b/desktop/ui/tests/memory.test.tsx
index e23489f46d..9b7314004f 100644
--- a/desktop/ui/tests/memory.test.tsx
+++ b/desktop/ui/tests/memory.test.tsx
@@ -30,7 +30,7 @@ import {
   textBytes,
 } from "../src/app/MemoryWorkspace";
 import { App } from "../src/app/App";
-import { TopBar } from "../src/app/TopBar";
+import { Overview } from "../src/app/Overview";
 import { desktopApi } from "../src/shared/ipc";
 import type {
   ArtifactReference,
@@ -383,7 +383,7 @@ test.each(["forbidden", "not_found", "network"])(
   },
 );
 
-test("global context shows the latest readiness instead of the activation snapshot", () => {
+test("overview refresh shows the latest readiness instead of the activation snapshot", () => {
   const active = state.active!;
   const ready = {
     ...active.report,
@@ -397,16 +397,14 @@ test("global context shows the latest readiness instead of the activation snapsh
     },
   };
   render(
-    <TopBar
+    <Overview
       state={{
         ...state,
         active: { ...active, report: ready },
         reports: [latest],
       }}
       language="en"
-      onManageConnections={vi.fn()}
-      onOpenScopes={vi.fn()}
-      onDisconnect={vi.fn()}
+      onNavigate={vi.fn()}
     />,
   );
   expect(screen.getByText("Service not ready")).toBeTruthy();
@@ -452,10 +450,10 @@ test.each(["scope", "page"])(
       await user.click(screen.getByRole("button", { name: "查找范围" }));
       await user.click(screen.getByRole("button", { name: "Scope B" }));
     } else {
-      await user.click(screen.getByRole("button", { name: "观察" }));
+      await user.click(screen.getByRole("button", { name: "总览" }));
       await waitFor(() =>
         expect(document.activeElement).toBe(
-          screen.getByRole("heading", { level: 1, name: "观察" }),
+          screen.getByRole("heading", { level: 1, name: "总览" }),
         ),
       );
       await user.click(screen.getByRole("button", { name: "记忆" }));
@@ -470,7 +468,7 @@ test.each(["scope", "page"])(
       finish(outcome("succeeded"));
     });
     confirm.mockClear().mockReturnValue(false);
-    await user.click(screen.getByRole("button", { name: "观察" }));
+    await user.click(screen.getByRole("button", { name: "总览" }));
     expect(confirm).toHaveBeenCalled();
     expect(
       (screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value,
diff --git a/desktop/ui/tests/observation.test.tsx b/desktop/ui/tests/observation.test.tsx
new file mode 100644
index 0000000000..6e753fd5a0
--- /dev/null
+++ b/desktop/ui/tests/observation.test.tsx
@@ -0,0 +1,203 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import {
+  cleanup,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { Observation } from "../src/app/Observation";
+import { desktopApi } from "../src/shared/ipc";
+import type { DesktopState } from "../src/generated/ipc";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn(),
+    check: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
+    diagnostics: vi.fn(),
+  },
+}));
+const disconnected: DesktopState = {
+  generation: 0,
+  profiles: [],
+  reports: [],
+  active: null,
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+beforeEach(() => {
+  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+});
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  vi.restoreAllMocks();
+});
+
+test("Overview remains the initial page and all original entries remain reachable alongside Observation", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  expect(screen.getByRole("heading", { level: 1, name: "总览" })).toBeTruthy();
+  expect(
+    within(screen.getByRole("navigation"))
+      .getAllByRole("button")
+      .map((button) => button.textContent),
+  ).toEqual(["总览", "连接", "记忆", "观察"]);
+  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "连接" }));
+  expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  expect(screen.getByLabelText("记忆内容")).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(screen.getByRole("tablist", { name: "观察" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+  expect(screen.getByLabelText("语言")).toBeTruthy();
+  expect(screen.getByRole("heading", { name: "本地诊断" })).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "总览" }));
+  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+});
+
+test("Observation tabs support the keyboard and stay unavailable without starting checks", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  await waitFor(() =>
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: "观察" }),
+    ),
+  );
+  await user.click(screen.getByRole("tab", { name: "运行状态" }));
+  await user.keyboard("{ArrowRight}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("tab", { name: "当前 Scope 库存与用量" }),
+  );
+  expect(screen.getByRole("tabpanel").textContent).toContain(
+    "未知值不表示为零",
+  );
+  await user.keyboard("{End}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("tab", { name: "本次会话" }),
+  );
+  await user.keyboard("{Home}{ArrowLeft}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("tab", { name: "本次会话" }),
+  );
+  expect(
+    screen.getByRole("heading", { name: "此观察视图尚未可用" }),
+  ).toBeTruthy();
+  expect(desktopApi.check).not.toHaveBeenCalled();
+  expect(desktopApi.diagnostics).not.toHaveBeenCalled();
+});
+
+test("Observation follows the existing language setting and retains its selected tab", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  await user.click(screen.getByRole("tab", { name: "本次会话" }));
+  await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+  await user.selectOptions(screen.getByLabelText("语言"), "en");
+  await user.click(screen.getByRole("button", { name: "Observation" }));
+  expect(
+    screen
+      .getByRole("tab", { name: "This session" })
+      .getAttribute("aria-selected"),
+  ).toBe("true");
+  expect(
+    screen.getByRole("heading", {
+      name: "This observation view is not available yet",
+    }),
+  ).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Overview" })).toBeTruthy();
+  expect(
+    screen.getByRole("button", { name: "Settings & diagnostics" }),
+  ).toBeTruthy();
+});
+
+test("entering Observation respects the existing Memory draft confirmation", async () => {
+  const user = userEvent.setup();
+  const fact = { value: null, error: null };
+  vi.mocked(desktopApi.state).mockResolvedValue({
+    ...disconnected,
+    generation: 1,
+    active: {
+      connectionId: "fixture",
+      generation: 1,
+      scope: {
+        scope_id: "scope-a",
+        title: "Scope A",
+        summary: "",
+        version: 1,
+        context_references: [],
+        external_references: [],
+      },
+      report: {
+        connectionId: "fixture",
+        revision: 1,
+        checkedAt: 1,
+        liveness: fact,
+        readiness: fact,
+        identity: fact,
+        capabilities: fact,
+        compatibilityVerified: true,
+        anonymousAccess: true,
+        supportedOperations: [],
+      },
+    },
+  });
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  await waitFor(() =>
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: "记忆" }),
+    ),
+  );
+  await user.type(screen.getByLabelText("记忆内容"), "unsaved draft");
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(confirm).toHaveBeenCalled();
+  expect((screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value).toBe(
+    "unsaved draft",
+  );
+  expect(screen.queryByRole("tablist")).toBeNull();
+  confirm.mockReturnValue(true);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(screen.getByRole("tablist", { name: "观察" })).toBeTruthy();
+});
+
+test("each observation panel accepts content supplied by its owning feature", () => {
+  render(
+    <Observation
+      language="en"
+      tab="inventory"
+      onTabChange={vi.fn()}
+      panels={{ inventory: <p>Exact Scope inventory</p> }}
+    />,
+  );
+  expect(screen.getByRole("tabpanel").textContent).toBe(
+    "Exact Scope inventory",
+  );
+  expect(
+    screen.queryByText("This observation view is not available yet"),
+  ).toBeNull();
+});
diff --git a/desktop/ui/tests/scopes.test.tsx b/desktop/ui/tests/scopes.test.tsx
index 706db6b07b..a92b3cbb93 100644
--- a/desktop/ui/tests/scopes.test.tsx
+++ b/desktop/ui/tests/scopes.test.tsx
@@ -26,7 +26,6 @@ vi.mock("../src/shared/ipc", () => ({
   desktopApi: {
     scopes: vi.fn(),
     cancelScopes: vi.fn(),
-    cancelMemory: vi.fn().mockResolvedValue(undefined),
     state: vi.fn(),
     selectScope: vi.fn(),
   },

From 94a97d3ef85cc487d64da237280a565e3ec87c6e Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 00:19:14 +0800
Subject: [PATCH 03/12] feat(desktop): unify feedback and display exact global
 context

---
 desktop/README.md                         |   9 +
 desktop/README.zh.md                      |   9 +
 desktop/VALIDATION.md                     |  13 +
 desktop/ui/src/app/App.tsx                | 132 +++++-
 desktop/ui/src/app/Connections.tsx        |  34 +-
 desktop/ui/src/app/Diagnostics.tsx        |  49 ++-
 desktop/ui/src/app/MemoryWorkspace.tsx    | 108 ++++-
 desktop/ui/src/app/Overview.tsx           |  37 +-
 desktop/ui/src/app/PageFeedback.tsx       |  68 +++-
 desktop/ui/src/app/Scopes.tsx             |  63 ++-
 desktop/ui/src/app/TopBar.tsx             | 195 ++++++++-
 desktop/ui/src/app/connection-messages.ts |  13 +-
 desktop/ui/src/app/context.ts             |  35 ++
 desktop/ui/src/app/messages.ts            |  74 ++++
 desktop/ui/src/app/style.css              | 105 +++++
 desktop/ui/tests/app.test.tsx             |  20 +-
 desktop/ui/tests/feedback.test.tsx        | 467 ++++++++++++++++++++++
 desktop/ui/tests/observation.test.tsx     |   8 +-
 18 files changed, 1332 insertions(+), 107 deletions(-)
 create mode 100644 desktop/ui/src/app/context.ts
 create mode 100644 desktop/ui/tests/feedback.test.tsx

diff --git a/desktop/README.md b/desktop/README.md
index 96544d573b..3702029d7f 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -8,6 +8,15 @@ See [中文说明](README.zh.md), [security boundary](SECURITY.md), and [validat
 
 The sidebar provides Overview, Connections, Memories, and Observation, with Settings & diagnostics at the bottom. Overview is the initial page. Observation contains Runtime state, Current-Scope inventory & usage, and This session tabs. Their data views are explicitly unavailable until integrated; opening the page or switching tabs does not run connection checks or local diagnostics. English/Chinese and existing theme settings apply to Observation.
 
+
+## Shared feedback and current context
+
+Every page uses the same loading, empty, unavailable and error presentation. Loading local state is distinct from being disconnected; a local-state failure offers **Reload local state**, without probing Server readiness. Empty search results mean no matches for that query, not an empty Scope inventory. Unimplemented Observation views remain unavailable.
+
+Errors explain the affected operation and recovery. Read failures offer an explicit retry; exact reads retain the original Artifact revision. An expired Scope cursor restarts from the first page. Credential, permission and compatibility failures explain the required configuration or authorization change. Save failures keep the draft; unknown writes retain their original target and require the existing confirmation before another submission. Writes are never replayed automatically. Local diagnostic failures offer a retry of the same selected local check and do not indicate remote unavailability.
+
+The global bar shows the active connection, full Server address, Scope title and complete `scope_id` on every page. Identically named Scopes remain distinguishable. Identity, compatibility, liveness and readiness are separate facts; the latest check for the active configuration revision supplies the displayed facts and check time. A healthy Server does not grant operation permissions. Addresses and IDs wrap in small windows. The connection menu supports arrow keys, Home/End and Escape; the Scope dialog constrains focus and restores it when closed.
+
 ## Run the installed preview
 
 Download and extract `desktop-windows-internal-unsigned` from a successful **Desktop validation** Actions run on this branch. The installer is under `src-tauri/target/release/bundle/nsis/`. Its accompanying `.artifacts/windows-smoke.json` records the commit, SHA-256 and signature status; compare the downloaded installer with `Get-FileHash -Algorithm SHA256 <installer-path>`. The current package is unsigned and intended for internal validation.
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index f56b34c6e7..98ee1d1981 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -8,6 +8,15 @@
 
 侧栏提供总览、连接、记忆、观察入口，“设置与诊断”位于侧栏底部。默认进入总览。“观察”包含运行状态、当前 Scope 库存与用量、本次会话三个标签页。数据视图接入前明确显示尚未可用；进入页面或切换标签不会执行连接检查或本机诊断。观察页面沿用现有中英文和主题设置。
 
+
+## 统一反馈与当前上下文
+
+各页面采用一致的加载、空状态、不可用和错误呈现。加载本机状态与未连接分开；本机状态读取失败时可“重新加载本机状态”，不会探测 Server 就绪状态。搜索无结果仅表示当前查询没有匹配项，不代表整个 Scope 库存为空。未接入的观察视图继续显示不可用。
+
+错误说明受影响的操作及恢复方式。读取失败可手动重试，精确读取保持原 Artifact 版本；Scope 游标过期后从第一页重新查找。凭据、权限和兼容性错误提示需要修改的配置或授权。保存失败保留草稿；结果未知的写入保留原目标，再次提交仍需现有确认，不自动重放写入。本机诊断失败可重新执行同一项本机检查，不表示远程服务不可用。
+
+全局栏在每个页面展示当前连接、完整 Server 地址、Scope 标题和完整 `scope_id`，可区分同名 Scope。身份、兼容性、存活和就绪状态分别呈现，采用与当前配置版本一致的最近检查事实并显示检查时间；健康状态不代表操作权限。长地址和 ID 在小窗口下可换行。连接菜单支持方向键、Home/End 和 Escape；Scope 对话框约束焦点，关闭后恢复焦点。
+
 ## 直接运行安装版
 
 在本分支的 GitHub Actions「Desktop validation」成功运行中，下载 `desktop-windows-internal-unsigned` 产物并解压，找到 `src-tauri/target/release/bundle/nsis/` 中的安装程序。对应 `.artifacts/windows-smoke.json` 记录提交、安装包 SHA-256 和签名状态，可用 `Get-FileHash -Algorithm SHA256 <安装包路径>` 核对下载文件。当前产物未签名，供内部验证。
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 4c4c186519..7656fea4a7 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -75,6 +75,19 @@ Headless Edge 155.0.4283.62 with synthetic IPC checked all five pages in 24 comb
 
 无头 Edge 155.0.4283.62 使用合成 IPC 检查中英文、三种主题及上述四组 CSS 视口，共 24 种组合，五个页面没有横向溢出。在桌面宽度下，有无观察入口时“设置与诊断”的坐标一致；小窗口中它仍位于主导航下方。400×300 配合设备缩放因子 2 仅检查 800×600 在 200% 下的等效布局，不代表安装版 WebView 缩放。真实 Server、安装包、原生 IME、屏幕阅读器和 macOS 仍需实际验收。
 
+
+## Shared feedback and global context (#2102)
+
+On 2026-10-22, Windows x64 local checks used Node 24.14.1, pnpm 11.13.1 and Rust 1.95.0. Focused feedback/context tests and all 50 frontend tests passed, together with typecheck, lint (including generated contracts and icons in check mode) and production build. Coverage includes pending/failed/disconnected initialization, local-state recovery without readiness probes, same-name Scope IDs, latest matching connection facts, identity/health/compatibility separation, prerequisite recovery, Scope pagination recovery, failed exact-read retries retaining the original revision, preserved drafts, local diagnostics, keyboard menus and modal focus. Existing save, unknown-write and late-response protections remain covered.
+
+Headless Edge 155.0.4283.62 with synthetic IPC exercised all five pages in 48 combinations: connected/disconnected, English/Chinese, light/dark/system, and CSS viewports 1180×800, 800×600, 400×400 and 400×300. Long addresses and Scope IDs, permission errors, Scope selection and missing-local-CLI errors had no horizontal overflow. A forced-colors run checked pending-search feedback. Screenshots were inspected for the 800×600 Scope dialog and forced-colors loading view. The 400×300 viewport with device scale factor 2 is a layout equivalent of 800×600 at 200%, not actual installed WebView zoom.
+
+These checks use browser fixtures and mock IPC. No real native/backend, installer, platform IME or screen-reader acceptance was executed for this change. Repository-wide `uv run --locked prek run -a` retains the existing Windows `ty check` failures involving `os.O_NOFOLLOW`, `fcntl` and `resource` in unchanged Python code; other hooks passed. Logs and browser evidence are under ignored `.artifacts/desktop-shell/`.
+
+2026-10-22 在 Windows x64 上使用上述固定工具版本，专项测试及全部 50 项前端测试、typecheck、lint 和生产构建通过。测试覆盖加载／失败／未连接区分、恢复入口、同名 Scope 的完整 ID、最新匹配连接事实、身份／健康／兼容性分别表达、原版本精确读取重试、草稿保护及键盘焦点。
+
+Edge 合成 IPC 检查覆盖上述 48 组配置和五个页面，包含权限及本机诊断错误、长地址和 Scope ID、Scope 弹窗，无横向溢出；另检查强制高对比度的加载反馈并查看截图。200% 为等效布局检查。本次没有执行真实原生／后端、安装包、平台 IME 或屏幕阅读器验收。仓库检查中，未修改 Python 代码的 Windows 类型检查存在上述既有错误，其余钩子通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index a8364ce661..20cd7b7a4f 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { messages, type Language } from "./messages";
 import { getFoundationInfo, desktopApi } from "../shared/ipc";
 import type { FoundationInfo, DesktopState } from "../generated/ipc";
@@ -32,7 +32,9 @@ import { Diagnostics } from "./Diagnostics";
 import { Connections } from "./Connections";
 import { Scopes } from "./Scopes";
 import { Observation, type ObservationTab } from "./Observation";
-import { connectionMessages, connectionError } from "./connection-messages";
+import { connectionMessages } from "./connection-messages";
+import { PageFeedback, ErrorFeedback } from "./PageFeedback";
+import { activeCheckReport } from "./context";
 
 type Page = "home" | "connections" | "memories" | "observation" | "settings";
 type Theme = "light" | "dark" | "system";
@@ -46,6 +48,9 @@ export function App() {
   const [host, setHost] = useState<FoundationInfo | null>(null);
   const [desktop, setDesktop] = useState<DesktopState | null>(null);
   const [nativeError, setNativeError] = useState<unknown>(null);
+  const [stateError, setStateError] = useState<unknown>(null);
+  const [stateLoading, setStateLoading] = useState(true);
+  const stateRequest = useRef(0);
   const [dirty, setDirty] = useState(false);
   const [scopeOpen, setScopeOpen] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -60,12 +65,26 @@ export function App() {
   const activeProfile = desktop?.profiles.find(
     (p) => p.id === desktop.active?.connectionId,
   );
-  const activeReport = desktop?.active?.report;
+  const activeReport = activeCheckReport(desktop);
   const heading = useRef<HTMLHeadingElement>(null);
+  const scopeDialog = useRef<HTMLDivElement>(null);
+  const scopeReturnFocus = useRef<HTMLElement | null>(null);
   const t = messages[language];
   const ct = connectionMessages[language];
+  async function loadState() {
+    const request = ++stateRequest.current;
+    setStateLoading(true);
+    setStateError(null);
+    try {
+      receiveState(await desktopApi.state());
+    } catch (error) {
+      if (request === stateRequest.current) setStateError(error);
+    } finally {
+      if (request === stateRequest.current) setStateLoading(false);
+    }
+  }
   useEffect(() => {
-    desktopApi.state().then(receiveState).catch(setNativeError);
+    void loadState();
     getFoundationInfo()
       .then(setHost)
       .catch(() => setHost(null));
@@ -76,24 +95,72 @@ export function App() {
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
+  useLayoutEffect(() => {
+    heading.current?.focus();
+  }, [page]);
+  function openScopes() {
+    scopeReturnFocus.current = document.activeElement as HTMLElement;
+    setScopeOpen(true);
+  }
   useEffect(() => {
     if (!scopeOpen) return;
+    const previous = scopeReturnFocus.current;
+    const dialog = scopeDialog.current;
+    const background = Array.from(
+      document.querySelector(".app")?.children ?? [],
+    ).filter(
+      (element): element is HTMLElement =>
+        element instanceof HTMLElement &&
+        !element.classList.contains("modal-backdrop"),
+    );
+    const inertValues = background.map((element) => element.inert);
+    background.forEach((element) => {
+      element.inert = true;
+    });
+    dialog?.querySelector<HTMLButtonElement>("button")?.focus();
     function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setScopeOpen(false);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setScopeOpen(false);
+      }
+      if (event.key !== "Tab") return;
+      const controls = Array.from(
+        dialog?.querySelectorAll<HTMLElement>(
+          'button, input, select, [tabindex="0"]',
+        ) ?? [],
+      ).filter((element) => !element.matches(":disabled"));
+      const first = controls[0];
+      const last = controls[controls.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
     }
     document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      background.forEach((element, index) => {
+        element.inert = inertValues[index];
+      });
+      if (scopeReturnFocus.current === null) return;
+      if (previous?.isConnected) previous.focus();
+      else
+        document
+          .querySelector<HTMLButtonElement>(".topbar-group button")
+          ?.focus();
+    };
   }, [scopeOpen]);
   function navigate(next: Page) {
     if (next === page || !confirmSwitch()) return;
     setDirty(false);
     setPage(next);
     setMenu(false);
-    requestAnimationFrame(() => heading.current?.focus());
   }
   function disconnect() {
     if (!confirmSwitch()) return;
-    setDirty(false);
     void desktopApi.disconnect().then(receiveState).catch(setNativeError);
   }
   async function refresh() {
@@ -166,11 +233,13 @@ export function App() {
           </button>
           <div className="sidebar-status">
             <p className="status">
-              <span
-                aria-hidden="true"
-                className={desktop?.active ? "dot ok" : "dot"}
-              />
-              {activeProfile?.name ?? t.disconnected}
+              <span aria-hidden="true" className="dot" />
+              {activeProfile?.name ??
+                (stateLoading
+                  ? t.loadingState
+                  : desktop
+                    ? t.disconnected
+                    : t.stateUnavailable)}
             </p>
             <p className="caption">{t.sidebarRunning}</p>
           </div>
@@ -180,16 +249,38 @@ export function App() {
         <TopBar
           state={desktop}
           language={language}
+          loading={stateLoading}
           onManageConnections={() => navigate("connections")}
-          onOpenScopes={() => setScopeOpen(true)}
+          onOpenScopes={openScopes}
           onDisconnect={disconnect}
         />
         <main id="main">
           <h1 className="sr-only" tabIndex={-1} ref={heading}>
             {t[page]}
           </h1>
+          {stateLoading && (
+            <PageFeedback kind="loading" title={t.loadingState} />
+          )}
+          {!stateLoading && stateError != null && (
+            <ErrorFeedback
+              error={stateError}
+              language={language}
+              title={t.stateFailed}
+              action={
+                <button onClick={() => void loadState()}>{t.retryState}</button>
+              }
+            />
+          )}
           {nativeError != null && (
-            <p role="alert">{connectionError(nativeError, language)}</p>
+            <ErrorFeedback
+              error={nativeError}
+              language={language}
+              action={
+                <button onClick={() => navigate("connections")}>
+                  {t.manageConnections}
+                </button>
+              }
+            />
           )}
           {page === "memories" && desktop?.active && (
             <div className="context-line">
@@ -198,6 +289,9 @@ export function App() {
               <span>{activeProfile?.endpoint}</span>
               <span aria-hidden="true">·</span>
               <span>{desktop.active.scope?.title ?? t.noScopeSelected}</span>
+              {desktop.active.scope && (
+                <code>{desktop.active.scope.scope_id}</code>
+              )}
               <span className={ready ? "badge success" : "badge subtle"}>
                 {ready ? t.serviceReady : t.unverified}
               </span>
@@ -219,6 +313,8 @@ export function App() {
               language={language}
               onState={receiveState}
               onDirty={setDirty}
+              onManageConnections={() => navigate("connections")}
+              onOpenScopes={openScopes}
             />
           )}
           {page === "connections" && (
@@ -296,6 +392,7 @@ export function App() {
             role="dialog"
             aria-modal="true"
             aria-label={ct.scope}
+            ref={scopeDialog}
           >
             <div className="modal-heading">
               <h2>{ct.scope}</h2>
@@ -314,6 +411,11 @@ export function App() {
                 setScopeOpen(false);
               }}
               hideHeading
+              onManageConnections={() => {
+                scopeReturnFocus.current = null;
+                setScopeOpen(false);
+                navigate("connections");
+              }}
             />
           </div>
         </div>
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index c691e2dad2..52fb196354 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -26,6 +26,7 @@ import { contractSha256 } from "../generated/operations";
 import { desktopApi } from "../shared/ipc";
 import { connectionMessages, connectionError } from "./connection-messages";
 import { messages, type Language } from "./messages";
+import { PageFeedback, ErrorFeedback } from "./PageFeedback";
 import connectionsIcon from "../assets/connections.svg";
 
 type Props = {
@@ -183,7 +184,13 @@ export function Connections({ state, language, onState, onDirty }: Props) {
           </button>
         </div>
         {state && state.profiles.length === 0 && (
-          <p>{messages[language].noConnections}</p>
+          <PageFeedback
+            compact
+            kind="empty"
+            title={messages[language].noConnections}
+          >
+            <p>{messages[language].connectionsEmptyHint}</p>
+          </PageFeedback>
         )}
         <ul className="profile-list">
           {state?.profiles.map((p) => (
@@ -219,9 +226,14 @@ export function Connections({ state, language, onState, onDirty }: Props) {
           {isActive && <span className="badge success">{t.activeBadge}</span>}
         </div>
         {dirty && <p role="status">{t.dirty}</p>}
-        {error != null && (
-          <p role="alert">{connectionError(error, language)}</p>
+        {busy && (
+          <PageFeedback
+            compact
+            kind="loading"
+            title={messages[language].operationPending}
+          />
         )}
+        {error != null && <ErrorFeedback error={error} language={language} />}
         <fieldset disabled={busy || !state} className="profile-form">
           <label>
             {t.name}
@@ -355,11 +367,17 @@ export function Connections({ state, language, onState, onDirty }: Props) {
           </label>
           <p className="field-hint">{t.compatibilityHint}</p>
           {unavailableCompatibility && (
-            <p role="alert">
-              {selectedCompatibility
-                ? t.profileContractMismatch
-                : t.profileMissing}
-            </p>
+            <PageFeedback
+              compact
+              kind="error"
+              title={
+                selectedCompatibility
+                  ? t.profileContractMismatch
+                  : t.profileMissing
+              }
+            >
+              <p>{messages[language].recoverCompatibility}</p>
+            </PageFeedback>
           )}
           <details>
             <summary>{t.ca}</summary>
diff --git a/desktop/ui/src/app/Diagnostics.tsx b/desktop/ui/src/app/Diagnostics.tsx
index 00ce5727e6..884030abd9 100644
--- a/desktop/ui/src/app/Diagnostics.tsx
+++ b/desktop/ui/src/app/Diagnostics.tsx
@@ -17,7 +17,8 @@
 import { useState } from "react";
 import { desktopApi } from "../shared/ipc";
 import type { DiagnosticKind, DiagnosticReport } from "../generated/ipc";
-import type { Language } from "./messages";
+import { messages, type Language } from "./messages";
+import { PageFeedback } from "./PageFeedback";
 import { connectionError } from "./connection-messages";
 const labels: Record<string, [string, string]> = {
   support: ["平台支持", "Platform support"],
@@ -57,6 +58,7 @@ const labels: Record<string, [string, string]> = {
 };
 export function Diagnostics({ language }: { language: Language }) {
   const zh = language === "zh";
+  const t = messages[language];
   const [busy, setBusy] = useState(false);
   const [report, setReport] = useState<DiagnosticReport | null>(null);
   const [error, setError] = useState<unknown>(null);
@@ -98,22 +100,38 @@ export function Diagnostics({ language }: { language: Language }) {
         </button>
       </div>
       {busy && (
-        <p role="status">
-          {zh ? "正在检查本机，请稍候…" : "Checking this computer…"}
-        </p>
+        <PageFeedback
+          compact
+          kind="loading"
+          title={zh ? "正在检查本机，请稍候…" : "Checking this computer…"}
+        />
+      )}
+      {!busy && !report && error == null && (
+        <PageFeedback compact kind="empty" title={t.diagnosticIdle} />
       )}
       {error != null && (
-        <p role="alert">
-          {code === "not_found"
-            ? zh
-              ? "未找到已登记的本机 CLI；远程连接不受影响。"
-              : "No registered local CLI was found; remote connections are unaffected."
-            : code === "compatibility_unverified"
+        <PageFeedback
+          compact
+          kind="error"
+          title={
+            code === "not_found"
               ? zh
-                ? "本机 CLI 注册未通过校验，请核对程序路径和摘要。"
-                : "The local CLI registration did not pass verification. Check its executable path and digest."
-              : connectionError(error, language)}
-        </p>
+                ? "未找到已登记的本机 CLI；远程连接不受影响。"
+                : "No registered local CLI was found; remote connections are unaffected."
+              : code === "compatibility_unverified"
+                ? zh
+                  ? "本机 CLI 注册未通过校验，请核对程序路径和摘要。"
+                  : "The local CLI registration did not pass verification. Check its executable path and digest."
+                : connectionError(error, language)
+          }
+          action={
+            kind && (
+              <button disabled={busy} onClick={() => void run(kind)}>
+                {t.retryDiagnostics}
+              </button>
+            )
+          }
+        />
       )}
       {report && (
         <div>
@@ -136,6 +154,9 @@ export function Diagnostics({ language }: { language: Language }) {
             CLI {zh ? "版本" : "version"}:{" "}
             {report.cliVersion ?? (zh ? "未知" : "Unknown")}
           </p>
+          {!report.items.length && !report.hosts.length && (
+            <PageFeedback compact kind="empty" title={t.diagnosticEmpty} />
+          )}
           <dl>
             {report.items.map((item) => (
               <div key={item.field}>
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index 6ed3b66046..09d34de9f9 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -25,13 +25,16 @@ import type {
 import { desktopApi } from "../shared/ipc";
 import { connectionError } from "./connection-messages";
 import { memoryMessages } from "./memory-messages";
-import type { Language } from "./messages";
+import { messages, type Language } from "./messages";
+import { PageFeedback, ErrorFeedback } from "./PageFeedback";
 import memoryIcon from "../assets/memory.svg";
 type Props = {
   state: DesktopState | null;
   language: Language;
   onState: (state: DesktopState) => void;
   onDirty: (dirty: boolean) => void;
+  onManageConnections?: () => void;
+  onOpenScopes?: () => void;
 };
 export const textBytes = (value: string) =>
   new TextEncoder().encode(value).length;
@@ -148,28 +151,41 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
           t.noScope
         )}
       </p>
-      {bytes > 8192 && <p role="alert">{t.bytesError}</p>}
+      {busy && <PageFeedback compact kind="loading" title={t.saving} />}
+      {bytes > 8192 && (
+        <PageFeedback compact kind="error" title={t.bytesError} />
+      )}
       {error != null && (
-        <p role="alert">
-          {t.failed} {connectionError(error, language)}
-        </p>
+        <ErrorFeedback error={error} language={language} title={t.failed} />
       )}
       {outcome && (
-        <p role={outcome.record.status === "succeeded" ? "status" : "alert"}>
-          {outcome.record.status === "succeeded"
-            ? outcome.result?.records.length
-              ? t.success
-              : t.noEntry
-            : outcome.record.status === "unknown"
-              ? t.unknown
-              : `${t.failed} ${connectionError(outcome.record.error, language)}`}
-        </p>
+        <PageFeedback
+          compact
+          kind={
+            outcome.record.status === "succeeded"
+              ? "success"
+              : outcome.record.status === "unknown"
+                ? "warning"
+                : "error"
+          }
+          title={
+            outcome.record.status === "succeeded"
+              ? outcome.result?.records.length
+                ? t.success
+                : t.noEntry
+              : outcome.record.status === "unknown"
+                ? t.unknown
+                : `${t.failed} ${connectionError(outcome.record.error, language)}`
+          }
+        />
       )}
     </section>
   );
 }
 export function MemoryWorkspace(props: Props) {
   const { state, language, onState, onDirty } = props;
+  const common = messages[language];
+  const failedReference = useRef<ArtifactReference | undefined>(undefined);
   const t = memoryMessages[language];
   const active = state?.active;
   const readerHeading = useRef<HTMLHeadingElement>(null);
@@ -187,6 +203,7 @@ export function MemoryWorkspace(props: Props) {
   current.current = active?.generation;
   const enabled = !!active?.scope && active.report.compatibilityVerified;
   function clearRead() {
+    failedReference.current = undefined;
     sequence.current++;
     setHits(null);
     setEntry(null);
@@ -217,6 +234,7 @@ export function MemoryWorkspace(props: Props) {
     if (!active?.scope) return;
     const generation = active.generation;
     const ticket = ++sequence.current;
+    failedReference.current = reference;
     setError(null);
     setEntry(null);
     setCopied("");
@@ -270,6 +288,32 @@ export function MemoryWorkspace(props: Props) {
   const record = state?.lastWrite;
   return (
     <div className="stack memory-workspace">
+      {state && !enabled && (
+        <PageFeedback
+          kind="unavailable"
+          title={
+            !active
+              ? common.noActiveTitle
+              : !active.report.compatibilityVerified
+                ? common.compatibilityNeeded
+                : common.chooseScopeTitle
+          }
+          action={
+            !active || !active.report.compatibilityVerified
+              ? props.onManageConnections && (
+                  <button onClick={props.onManageConnections}>
+                    {common.chooseConnection}
+                  </button>
+                )
+              : props.onOpenScopes && (
+                  <button onClick={props.onOpenScopes}>
+                    {common.chooseScopeTitle}
+                  </button>
+                )
+          }
+        />
+      )}
+
       {record &&
         (record.status === "unknown" ||
           record.status === "pending" ||
@@ -334,9 +378,31 @@ export function MemoryWorkspace(props: Props) {
         </div>
         <p className="small search-meta">{t.searchSummary}</p>
         {!enabled && <p>{t.noScope}</p>}
-        {textBytes(query) > 8192 && <p role="alert">{t.inputError}</p>}
+        {busy && (
+          <PageFeedback
+            compact
+            kind="loading"
+            title={busy === "search" ? t.searching : t.loading}
+          />
+        )}
+        {textBytes(query) > 8192 && (
+          <PageFeedback compact kind="error" title={t.inputError} />
+        )}
         {error != null && (
-          <p role="alert">{connectionError(error, language)}</p>
+          <ErrorFeedback
+            error={error}
+            language={language}
+            action={
+              enabled && (
+                <button
+                  disabled={!!busy}
+                  onClick={() => void read(failedReference.current)}
+                >
+                  {common.retryRead}
+                </button>
+              )
+            }
+          />
         )}
       </section>
       <div className="memory-grid">
@@ -344,8 +410,12 @@ export function MemoryWorkspace(props: Props) {
           <div className="card-heading">
             <h2>{t.results}</h2>
           </div>
-          {hits === null && !busy && error == null && <p>{t.start}</p>}
-          {hits?.length === 0 && <p>{t.none}</p>}
+          {hits === null && !busy && error == null && (
+            <PageFeedback compact kind="empty" title={t.start} />
+          )}
+          {hits?.length === 0 && (
+            <PageFeedback compact kind="empty" title={t.none} />
+          )}
           {hits?.length === 10 && <p>{t.limit}</p>}
           {hits && (
             <p className="small">
@@ -466,7 +536,7 @@ export function MemoryWorkspace(props: Props) {
                   ))}
                 </ul>
               ) : (
-                <p>{t.noSources}</p>
+                <PageFeedback compact kind="empty" title={t.noSources} />
               )}
             </details>
             <p className="note-line">{t.agentScopeNote}</p>
diff --git a/desktop/ui/src/app/Overview.tsx b/desktop/ui/src/app/Overview.tsx
index 17381efc77..46bb5d7369 100644
--- a/desktop/ui/src/app/Overview.tsx
+++ b/desktop/ui/src/app/Overview.tsx
@@ -16,6 +16,8 @@
 
 import type { DesktopState } from "../generated/ipc";
 import { messages, type Language } from "./messages";
+import { PageFeedback } from "./PageFeedback";
+import { activeCheckReport } from "./context";
 import memoryIcon from "../assets/memory.svg";
 import connectionsIcon from "../assets/connections.svg";
 import retrievalIcon from "../assets/retrieval.svg";
@@ -38,9 +40,7 @@ export function Overview({
   const t = messages[language];
   const active = state?.active;
   const profile = state?.profiles.find((p) => p.id === active?.connectionId);
-  const report =
-    state?.reports.find((item) => item.connectionId === active?.connectionId) ??
-    active?.report;
+  const report = activeCheckReport(state);
   const readiness = report?.readiness.value?.status;
   const enabled = !!active?.scope && !!report?.compatibilityVerified;
   const principal = report?.anonymousAccess
@@ -89,6 +89,9 @@ export function Overview({
             )}
           </div>
         </div>
+        {refreshing && (
+          <PageFeedback compact kind="loading" title={t.refreshing} />
+        )}
         {active && profile ? (
           <>
             <div className="connection-summary">
@@ -134,18 +137,24 @@ export function Overview({
             </dl>
             <p className="note-line">{t.readinessNote}</p>
           </>
-        ) : (
-          <div className="empty-state">
-            <h3>{t.noActiveTitle}</h3>
+        ) : state ? (
+          <PageFeedback
+            compact
+            headingLevel={3}
+            kind="empty"
+            title={t.noActiveTitle}
+            action={
+              <button
+                className="primary"
+                onClick={() => onNavigate("connections")}
+              >
+                {t.connect}
+              </button>
+            }
+          >
             <p>{t.noActiveBody}</p>
-            <button
-              className="primary"
-              onClick={() => onNavigate("connections")}
-            >
-              {t.connect}
-            </button>
-          </div>
-        )}
+          </PageFeedback>
+        ) : null}
       </section>
       <div className="overview-grid">
         <section className="card">
diff --git a/desktop/ui/src/app/PageFeedback.tsx b/desktop/ui/src/app/PageFeedback.tsx
index 1d78839d7a..de1a33b5ff 100644
--- a/desktop/ui/src/app/PageFeedback.tsx
+++ b/desktop/ui/src/app/PageFeedback.tsx
@@ -15,28 +15,84 @@
  */
 
 import type { ReactNode } from "react";
+import { connectionError, connectionErrorCode } from "./connection-messages";
+import { messages, type Language } from "./messages";
 
 export function PageFeedback({
   kind,
   title,
   children,
   action,
+  compact = false,
+  headingLevel,
 }: {
-  kind: "loading" | "empty" | "unavailable" | "error";
+  kind: "loading" | "empty" | "unavailable" | "error" | "success" | "warning";
   title: string;
   children?: ReactNode;
   action?: ReactNode;
+  compact?: boolean;
+  headingLevel?: 3;
 }) {
+  const Container = compact ? "div" : "section";
+  const Title = headingLevel === 3 ? "h3" : compact ? "p" : "h2";
   return (
-    <section
-      className={`card stack page-feedback ${kind}`}
+    <Container
+      className={`${compact ? "feedback-inline" : "card stack"} page-feedback ${kind}`}
       role={
-        kind === "error" ? "alert" : kind === "loading" ? "status" : undefined
+        kind === "error" || kind === "warning"
+          ? "alert"
+          : kind === "loading" || kind === "success"
+            ? "status"
+            : undefined
       }
     >
-      <h2>{title}</h2>
+      <Title className="feedback-title">{title}</Title>
       {children && <div className="feedback-body">{children}</div>}
       {action && <div className="actions">{action}</div>}
-    </section>
+    </Container>
+  );
+}
+
+export function ErrorFeedback({
+  error,
+  language,
+  title,
+  action,
+}: {
+  error: unknown;
+  language: Language;
+  title?: string;
+  action?: ReactNode;
+}) {
+  const t = messages[language];
+  const code = connectionErrorCode(error);
+  const hint =
+    code === "forbidden"
+      ? t.recoverAccess
+      : code === "unauthorized" ||
+          code === "credential_missing" ||
+          code === "invalid_credential" ||
+          code === "authentication_unavailable" ||
+          code === "credential_unavailable"
+        ? t.recoverCredentials
+        : code === "compatibility_unverified" || code === "invalid_response"
+          ? t.recoverCompatibility
+          : code === "scope_required"
+            ? t.recoverScope
+            : code === "stale_context" || code === "not_connected"
+              ? t.recoverContext
+              : code === "cursor_expired"
+                ? t.recoverCursor
+                : t.recoverOperation;
+  return (
+    <PageFeedback
+      compact
+      kind="error"
+      title={title ?? connectionError(error, language)}
+      action={action}
+    >
+      {title && <p>{connectionError(error, language)}</p>}
+      <p>{hint}</p>
+    </PageFeedback>
   );
 }
diff --git a/desktop/ui/src/app/Scopes.tsx b/desktop/ui/src/app/Scopes.tsx
index abe3e15cb4..d4b514af6e 100644
--- a/desktop/ui/src/app/Scopes.tsx
+++ b/desktop/ui/src/app/Scopes.tsx
@@ -17,8 +17,9 @@
 import { useEffect, useRef, useState } from "react";
 import type { DesktopState, ScopeDescriptor } from "../generated/ipc";
 import { desktopApi } from "../shared/ipc";
-import { connectionMessages, connectionError } from "./connection-messages";
-import type { Language } from "./messages";
+import { connectionMessages } from "./connection-messages";
+import { messages, type Language } from "./messages";
+import { PageFeedback, ErrorFeedback } from "./PageFeedback";
 export function Scopes({
   state,
   language,
@@ -26,6 +27,7 @@ export function Scopes({
   confirmSwitch,
   onSelected,
   hideHeading = false,
+  onManageConnections,
 }: {
   state: DesktopState | null;
   language: Language;
@@ -33,14 +35,20 @@ export function Scopes({
   confirmSwitch: () => boolean;
   onSelected?: () => void;
   hideHeading?: boolean;
+  onManageConnections?: () => void;
 }) {
   const t = connectionMessages[language];
+  const common = messages[language];
+  const manage = onManageConnections && (
+    <button onClick={onManageConnections}>{common.chooseConnection}</button>
+  );
   const active = state?.active;
   const [query, setQuery] = useState("");
   const [items, setItems] = useState<ScopeDescriptor[] | null>(null);
   const [cursor, setCursor] = useState<string | null>(null);
   const [error, setError] = useState<unknown>(null);
   const [busy, setBusy] = useState(false);
+  const [operation, setOperation] = useState<"list" | "select">("list");
   const sequence = useRef(0);
   const pendingCancellation = useRef(Promise.resolve());
   const currentGeneration = useRef(active?.generation);
@@ -55,6 +63,7 @@ export function Scopes({
   }, [active?.generation]);
   async function load(next: string | null) {
     if (!active) return;
+    setOperation("list");
     const generation = active.generation;
     const ticket = ++sequence.current;
     setBusy(true);
@@ -92,6 +101,7 @@ export function Scopes({
   }
   async function select(id: string) {
     if (!active || !confirmSwitch()) return;
+    setOperation("select");
     setBusy(true);
     setError(null);
     try {
@@ -113,7 +123,12 @@ export function Scopes({
       {!hideHeading && <h2>{t.scope}</h2>}
       <p className="small">{t.scopeHint}</p>
       {!active ? (
-        <p>{t.noConnection}</p>
+        <PageFeedback
+          compact
+          kind="unavailable"
+          title={t.noConnection}
+          action={manage}
+        />
       ) : (
         <>
           {active.scope && (
@@ -123,11 +138,45 @@ export function Scopes({
             </p>
           )}
           {!active.report.compatibilityVerified && (
-            <p role="status">{t.noCompatibility}</p>
+            <PageFeedback
+              compact
+              kind="unavailable"
+              title={t.noCompatibility}
+              action={manage}
+            />
           )}
           {error != null && (
-            <p role="alert">{connectionError(error, language)}</p>
+            <ErrorFeedback
+              error={error}
+              language={language}
+              action={
+                operation === "list" ? (
+                  <button disabled={busy} onClick={() => void load(null)}>
+                    {common.restartScopeSearch}
+                  </button>
+                ) : undefined
+              }
+            />
+          )}
+          {busy && (
+            <PageFeedback
+              compact
+              kind="loading"
+              title={
+                operation === "list"
+                  ? common.loadingScopes
+                  : common.selectingScope
+              }
+            />
           )}
+          {!busy &&
+            error == null &&
+            items === null &&
+            active.report.compatibilityVerified && (
+              <PageFeedback compact kind="empty" title={common.scopeIdle}>
+                <p>{common.scopeIdleHint}</p>
+              </PageFeedback>
+            )}
           <fieldset disabled={!active.report.compatibilityVerified}>
             <label>
               {t.scopeQuery}
@@ -170,7 +219,9 @@ export function Scopes({
                 ))}
               </ul>
             )}
-            {items?.length === 0 && <p>{t.empty}</p>}
+            {items?.length === 0 && (
+              <PageFeedback compact kind="empty" title={t.empty} />
+            )}
             {cursor && (
               <button disabled={busy} onClick={() => void load(cursor)}>
                 {t.more}
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index 274ba3b963..44548bc0c8 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import type { DesktopState } from "../generated/ipc";
 import { messages, type Language } from "./messages";
-import { connectionMessages } from "./connection-messages";
+import { connectionError, connectionMessages } from "./connection-messages";
+import { activeCheckReport } from "./context";
 
 type Props = {
   state: DesktopState | null;
   language: Language;
+  loading?: boolean;
   onManageConnections: () => void;
   onOpenScopes: () => void;
   onDisconnect: () => void;
@@ -29,6 +31,7 @@ type Props = {
 export function TopBar({
   state,
   language,
+  loading = false,
   onManageConnections,
   onOpenScopes,
   onDisconnect,
@@ -37,6 +40,27 @@ export function TopBar({
   const ct = connectionMessages[language];
   const [open, setOpen] = useState<"connection" | "identity" | null>(null);
   const wrap = useRef<HTMLDivElement>(null);
+  const connectionTrigger = useRef<HTMLButtonElement>(null);
+  const identityTrigger = useRef<HTMLButtonElement>(null);
+  const connectionMenu = useRef<HTMLDivElement>(null);
+  const menuStart = useRef(0);
+  const connectionMenuId = useId();
+  const identityId = useId();
+  function closePopup() {
+    (open === "connection"
+      ? connectionTrigger
+      : identityTrigger
+    ).current?.focus();
+    setOpen(null);
+  }
+  useLayoutEffect(() => {
+    if (open !== "connection") return;
+    const items =
+      connectionMenu.current?.querySelectorAll<HTMLButtonElement>(
+        '[role="menuitem"]',
+      );
+    items?.[menuStart.current === -1 ? items.length - 1 : 0]?.focus();
+  }, [open]);
   useEffect(() => {
     const bar = wrap.current;
     if (!bar) return;
@@ -62,7 +86,10 @@ export function TopBar({
         setOpen(null);
     }
     function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setOpen(null);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closePopup();
+      }
     }
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown);
@@ -72,7 +99,7 @@ export function TopBar({
     };
   }, [open]);
   const active = state?.active;
-  const report = active?.report;
+  const report = activeCheckReport(state);
   const activeProfile = state?.profiles.find(
     (p) => p.id === active?.connectionId,
   );
@@ -86,6 +113,13 @@ export function TopBar({
       : principal
         ? (principal.description ?? `${principal.type}: ${principal.id}`)
         : t.identityUnverified;
+  const connectionText = active
+    ? t.activeContext
+    : state
+      ? t.notConnected
+      : loading
+        ? t.loadingState
+        : t.stateUnavailable;
   return (
     <div className="topbar" ref={wrap}>
       <div className="menu-wrap">
@@ -93,20 +127,77 @@ export function TopBar({
           className="menu-trigger"
           aria-expanded={open === "connection"}
           aria-haspopup="menu"
-          onClick={() => setOpen(open === "connection" ? null : "connection")}
+          aria-controls={connectionMenuId}
+          aria-label={`${t.current}: ${activeProfile?.name ?? connectionText}`}
+          ref={connectionTrigger}
+          onClick={() => {
+            menuStart.current = 0;
+            setOpen(open === "connection" ? null : "connection");
+          }}
+          onKeyDown={(event) => {
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+            event.preventDefault();
+            menuStart.current = event.key === "ArrowUp" ? -1 : 0;
+            setOpen("connection");
+          }}
         >
-          <span className="label">{activeProfile?.name ?? t.notConnected}</span>
+          <span className="label">{activeProfile?.name ?? connectionText}</span>
           <span aria-hidden="true">▾</span>
         </button>
         {open === "connection" && (
-          <div className="menu" role="menu">
+          <div
+            className="menu"
+            role="menu"
+            aria-label={t.manageConnections}
+            id={connectionMenuId}
+            ref={connectionMenu}
+            onBlur={(event) => {
+              if (
+                event.relatedTarget instanceof Node &&
+                !connectionMenu.current?.contains(event.relatedTarget) &&
+                event.relatedTarget !== connectionTrigger.current
+              )
+                setOpen(null);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.stopPropagation();
+                event.preventDefault();
+                closePopup();
+                return;
+              }
+              if (event.key === "Tab") {
+                closePopup();
+                return;
+              }
+              const items = Array.from(
+                connectionMenu.current?.querySelectorAll<HTMLButtonElement>(
+                  '[role="menuitem"]',
+                ) ?? [],
+              );
+              const current = items.indexOf(
+                document.activeElement as HTMLButtonElement,
+              );
+              let index: number;
+              if (event.key === "ArrowDown")
+                index = (current + 1) % items.length;
+              else if (event.key === "ArrowUp")
+                index = (current + items.length - 1) % items.length;
+              else if (event.key === "Home") index = 0;
+              else if (event.key === "End") index = items.length - 1;
+              else return;
+              event.preventDefault();
+              items[index]?.focus();
+            }}
+          >
             {state?.profiles.map((p) => (
               <button
                 key={p.id}
                 className="menu-item"
                 role="menuitem"
+                tabIndex={-1}
                 onClick={() => {
-                  setOpen(null);
+                  closePopup();
                   onManageConnections();
                 }}
               >
@@ -123,8 +214,9 @@ export function TopBar({
             <button
               className="menu-item"
               role="menuitem"
+              tabIndex={-1}
               onClick={() => {
-                setOpen(null);
+                closePopup();
                 onManageConnections();
               }}
             >
@@ -136,8 +228,9 @@ export function TopBar({
                 <button
                   className="menu-item"
                   role="menuitem"
+                  tabIndex={-1}
                   onClick={() => {
-                    setOpen(null);
+                    closePopup();
                     onDisconnect();
                   }}
                 >
@@ -149,16 +242,22 @@ export function TopBar({
           </div>
         )}
       </div>
-      <span className={active ? "status-pill ok" : "status-pill"} role="status">
-        <span aria-hidden="true" className={active ? "dot ok" : "dot"} />
-        {active ? t.connected : t.notConnected}
+      <span className="status-pill" role="status">
+        <span aria-hidden="true" className="dot" />
+        {connectionText}
       </span>
       <span aria-hidden="true" className="divider" />
       <div className="topbar-group">
         <span className="topbar-label">{t.scopeLabel}</span>
-        <button className="menu-trigger" onClick={onOpenScopes}>
-          <span className="label">
+        <button
+          className="menu-trigger scope-trigger"
+          onClick={onOpenScopes}
+          disabled={!state}
+          aria-haspopup="dialog"
+        >
+          <span className="scope-label">
             {active?.scope?.title ?? t.noScopeSelected}
+            {active?.scope && <code>{active.scope.scope_id}</code>}
           </span>
           <span aria-hidden="true">▾</span>
         </button>
@@ -168,14 +267,20 @@ export function TopBar({
         <button
           className="menu-trigger"
           aria-expanded={open === "identity"}
-          aria-haspopup="menu"
+          aria-controls={identityId}
+          ref={identityTrigger}
           onClick={() => setOpen(open === "identity" ? null : "identity")}
         >
           <span className="label">{identityText}</span>
           <span aria-hidden="true">▾</span>
         </button>
         {open === "identity" && (
-          <div className="menu right" role="menu">
+          <div
+            className="menu right"
+            role="region"
+            aria-label={t.identityDetails}
+            id={identityId}
+          >
             <p className="menu-note">
               <strong>{t.identityDetails}</strong>
             </p>
@@ -192,6 +297,9 @@ export function TopBar({
             ) : (
               <p className="menu-note">
                 {report?.anonymousAccess ? ct.noIdentity : t.identityUnverified}
+                {report?.identity.error && (
+                  <> {connectionError(report.identity.error, language)}</>
+                )}
               </p>
             )}
           </div>
@@ -200,6 +308,59 @@ export function TopBar({
       <span aria-hidden="true" className="avatar">
         {identityText.charAt(0).toUpperCase()}
       </span>
+      {active && (
+        <div
+          className="global-context"
+          role="group"
+          aria-label={t.globalContext}
+        >
+          {activeProfile && (
+            <p className="context-endpoint">{activeProfile.endpoint}</p>
+          )}
+          <dl className="context-facts">
+            <div>
+              <dt>{t.compatibility}</dt>
+              <dd>
+                {report?.compatibilityVerified
+                  ? t.compatibilityVerified
+                  : t.unverified}
+              </dd>
+            </div>
+            <div>
+              <dt>{t.liveness}</dt>
+              <dd>
+                {report?.liveness.error
+                  ? connectionError(report.liveness.error, language)
+                  : (report?.liveness.value?.status ?? t.unverified)}
+              </dd>
+            </div>
+            <div>
+              <dt>{t.readiness}</dt>
+              <dd>
+                {report?.readiness.error
+                  ? connectionError(report.readiness.error, language)
+                  : report?.readiness.value?.status === "ready"
+                    ? t.serviceReady
+                    : report?.readiness.value
+                      ? t.serviceNotReady
+                      : t.unverified}
+              </dd>
+            </div>
+          </dl>
+          <p className="small">
+            {report && (
+              <>
+                {t.lastChecked}:{" "}
+                {new Date(report.checkedAt * 1000).toLocaleString(
+                  language === "zh" ? "zh-CN" : "en-US",
+                )}
+                .{" "}
+              </>
+            )}
+            {t.readinessNote}
+          </p>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/desktop/ui/src/app/connection-messages.ts b/desktop/ui/src/app/connection-messages.ts
index 215d42d91a..d38e113667 100644
--- a/desktop/ui/src/app/connection-messages.ts
+++ b/desktop/ui/src/app/connection-messages.ts
@@ -256,14 +256,19 @@ export const connectionMessages = {
 };
 export function connectionError(error: unknown, language: "zh" | "en"): string {
   const text = connectionMessages[language];
+  const code = connectionErrorCode(error);
+  const key = code === "storage" ? "storage_error" : code;
+  return typeof key === "string" && Object.hasOwn(text, key)
+    ? text[key as keyof typeof text]
+    : text.error;
+}
+
+export function connectionErrorCode(error: unknown): string | null {
   const code =
     typeof error === "string"
       ? error
       : error && typeof error === "object" && "code" in error
         ? error.code
         : null;
-  const key = code === "storage" ? "storage_error" : code;
-  return typeof key === "string" && Object.hasOwn(text, key)
-    ? text[key as keyof typeof text]
-    : text.error;
+  return typeof code === "string" ? code : null;
 }
diff --git a/desktop/ui/src/app/context.ts b/desktop/ui/src/app/context.ts
new file mode 100644
index 0000000000..5b1241afea
--- /dev/null
+++ b/desktop/ui/src/app/context.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DesktopState } from "../generated/ipc";
+
+// Presentation only: operation authorization remains at the native boundary.
+export function activeCheckReport(state: DesktopState | null) {
+  const active = state?.active;
+  if (!active) return undefined;
+  const profile = state?.profiles.find(
+    (item) => item.id === active.connectionId,
+  );
+  if (profile && profile.revision !== active.report.revision) return undefined;
+  const latest = state?.reports.find(
+    (item) =>
+      item.connectionId === active.connectionId &&
+      item.revision === active.report.revision,
+  );
+  return latest && latest.checkedAt >= active.report.checkedAt
+    ? latest
+    : active.report;
+}
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index c73835137b..c21c015c87 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,6 +16,42 @@
 
 export const messages = {
   zh: {
+    loadingState: "正在加载 Desktop 状态…",
+    stateUnavailable: "Desktop 状态尚不可用",
+    stateFailed: "无法加载 Desktop 状态",
+    retryState: "重新加载本机状态",
+    retryRead: "重试读取",
+    restartScopeSearch: "从第一页重新查找",
+    retryDiagnostics: "重新执行本机检查",
+    operationPending: "操作正在进行，请稍候…",
+    diagnosticIdle: "尚未执行本机检查",
+    diagnosticEmpty: "本次检查没有返回诊断项目",
+    connectionsEmptyHint:
+      "填写右侧配置并保存，再显式检查和启用连接。保存配置不会激活连接。",
+    recoverAccess:
+      "请申请此操作所需的权限，或选择已有权限的连接或精确 Scope。健康状态不代表授权。",
+    recoverCredentials:
+      "请在连接页核对凭据和认证设置，再显式检查连接。不会自动降级为匿名访问。",
+    recoverCompatibility:
+      "请在连接页核对受支持的 Server 与兼容配置，再显式检查。健康状态不代表兼容性。",
+    recoverScope:
+      "请使用全局 Scope 选择器选择精确目标；这不会修改 Agent 绑定。",
+    recoverContext:
+      "请核对当前连接和精确 Scope。旧读取已失效，已提交写入仍属于原目标。",
+    recoverCursor: "请从第一页重新查找，不再使用已过期的分页游标。",
+    recoverOperation:
+      "请检查相关输入、连接或本机配置，再显式执行受影响的操作。不会自动重放已提交写入。",
+    globalContext: "当前连接与精确 Scope",
+    activeContext: "连接已激活",
+    liveness: "存活状态",
+    lastChecked: "上次检查",
+    loadingScopes: "正在查找范围…",
+    selectingScope: "正在核对并选择精确 Scope…",
+    scopeIdle: "尚未查找范围",
+    scopeIdleHint: "输入名称并查找，只从 Server 返回的范围中选择精确目标。",
+    chooseConnection: "管理连接与凭据",
+    chooseScopeTitle: "请先选择精确 Scope",
+    compatibilityNeeded: "当前连接的兼容性尚未验证",
     observation: "观察",
     runtime: "运行状态",
     inventory: "当前 Scope 库存与用量",
@@ -140,6 +176,44 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
+    loadingState: "Loading Desktop state…",
+    stateUnavailable: "Desktop state is unavailable",
+    stateFailed: "Could not load Desktop state",
+    retryState: "Reload local state",
+    retryRead: "Retry read",
+    restartScopeSearch: "Search again from the first page",
+    retryDiagnostics: "Run local check again",
+    operationPending: "An operation is in progress. Please wait…",
+    diagnosticIdle: "No local check has run",
+    diagnosticEmpty: "This check returned no diagnostic items",
+    connectionsEmptyHint:
+      "Fill in and save a configuration, then explicitly check and activate it. Saving does not activate a connection.",
+    recoverAccess:
+      "Request permission for this operation, or choose an authorized connection or exact Scope. Health does not grant access.",
+    recoverCredentials:
+      "Review credentials and authentication in Connections, then explicitly check the connection. There is no automatic anonymous downgrade.",
+    recoverCompatibility:
+      "Review the supported Server and compatibility profile in Connections, then explicitly check it. Health does not establish compatibility.",
+    recoverScope:
+      "Choose an exact target with the global Scope selector. This does not change Agent bindings.",
+    recoverContext:
+      "Review the current connection and exact Scope. Previous reads are invalid; submitted writes still belong to their original targets.",
+    recoverCursor:
+      "Search again from the first page without reusing the expired cursor.",
+    recoverOperation:
+      "Review the relevant input, connection or local configuration before explicitly performing the affected operation. Submitted writes are never replayed automatically.",
+    globalContext: "Current connection and exact Scope",
+    activeContext: "Connection active",
+    liveness: "Liveness",
+    lastChecked: "Last checked",
+    loadingScopes: "Finding scopes…",
+    selectingScope: "Verifying and selecting the exact Scope…",
+    scopeIdle: "No Scope search has run",
+    scopeIdleHint:
+      "Enter a name and search, then select an exact target returned by the Server.",
+    chooseConnection: "Manage connections and credentials",
+    chooseScopeTitle: "Select an exact Scope first",
+    compatibilityNeeded: "Connection compatibility is not verified",
     observation: "Observation",
     runtime: "Runtime state",
     inventory: "Current-Scope inventory & usage",
diff --git a/desktop/ui/src/app/style.css b/desktop/ui/src/app/style.css
index dd8c2c3e39..5481e10268 100644
--- a/desktop/ui/src/app/style.css
+++ b/desktop/ui/src/app/style.css
@@ -1125,3 +1125,108 @@ footer {
     background: CanvasText;
   }
 }
+
+/* Shared feedback and exact context facts */
+.feedback-inline {
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: grid;
+  gap: 8px;
+}
+.page-feedback.empty {
+  text-align: left;
+  max-width: none;
+  margin: 0;
+}
+.page-feedback .feedback-title {
+  margin: 0;
+  font-weight: 600;
+}
+.page-feedback.error,
+.page-feedback.warning {
+  border-inline-start: 3px solid var(--accent);
+}
+.page-feedback.loading {
+  border-inline-start: 3px dashed var(--accent);
+}
+.global-context {
+  flex-basis: 100%;
+  min-width: 0;
+  font-size: 13px;
+}
+.global-context p {
+  margin: 4px 0;
+}
+.context-endpoint,
+.scope-label,
+.context-line,
+.scope-picker code,
+.page-feedback {
+  overflow-wrap: anywhere;
+}
+.scope-trigger {
+  max-width: 100%;
+  min-width: 0;
+  text-align: left;
+}
+.scope-label {
+  min-width: 0;
+}
+.scope-label code {
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+}
+.context-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  margin: 4px 0;
+}
+.context-facts > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+.context-facts dd {
+  margin: 0;
+  text-align: left;
+}
+.menu {
+  max-height: min(420px, 60vh);
+  overflow-y: auto;
+}
+.menu-note {
+  overflow-wrap: anywhere;
+}
+@media (max-width: 700px), (max-height: 600px) {
+  :root {
+    scroll-padding-top: 16px;
+  }
+  .topbar {
+    position: relative;
+  }
+  .menu {
+    position: fixed;
+    inset: 16px 16px auto;
+    min-width: 0;
+    max-width: none;
+    max-height: calc(100dvh - 32px);
+  }
+  .menu.right {
+    left: 16px;
+    right: 16px;
+  }
+}
+@media (forced-colors: active) {
+  .page-feedback {
+    border-color: CanvasText;
+  }
+  .page-feedback.error,
+  .page-feedback.warning,
+  .page-feedback.loading {
+    border-inline-start-color: Highlight;
+  }
+}
diff --git a/desktop/ui/tests/app.test.tsx b/desktop/ui/tests/app.test.tsx
index 2b13e7d2d1..5c58fd8b56 100644
--- a/desktop/ui/tests/app.test.tsx
+++ b/desktop/ui/tests/app.test.tsx
@@ -14,15 +14,31 @@
  * limitations under the License.
  */
 
-import { afterEach, expect, test } from "vitest";
+import { afterEach, expect, test, vi } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { App } from "../src/app/App";
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn().mockResolvedValue({
+      generation: 0,
+      profiles: [],
+      reports: [],
+      active: null,
+      compatibilityProfiles: [],
+      pendingCredentialCleanup: 0,
+      lastWrite: null,
+    }),
+  },
+}));
 afterEach(cleanup);
 test("disconnected shell prevents writes and search and explains the boundary", async () => {
   const user = userEvent.setup();
   render(<App />);
-  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+  expect(
+    await screen.findByRole("heading", { name: "尚未连接服务" }),
+  ).toBeTruthy();
   await user.click(screen.getByRole("button", { name: /连接已有服务/ }));
   expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
   expect(
diff --git a/desktop/ui/tests/feedback.test.tsx b/desktop/ui/tests/feedback.test.tsx
new file mode 100644
index 0000000000..feb9be01c5
--- /dev/null
+++ b/desktop/ui/tests/feedback.test.tsx
@@ -0,0 +1,467 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { act, cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { TopBar } from "../src/app/TopBar";
+import { Scopes } from "../src/app/Scopes";
+import { MemoryWorkspace } from "../src/app/MemoryWorkspace";
+import { Connections } from "../src/app/Connections";
+import { Diagnostics } from "../src/app/Diagnostics";
+import { desktopApi, getFoundationInfo } from "../src/shared/ipc";
+import type {
+  DesktopState,
+  CheckReport,
+  DiagnosticReport,
+  ScopePage,
+} from "../src/generated/ipc";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn(),
+    check: vi.fn(),
+    scopes: vi.fn(),
+    selectScope: vi.fn(),
+    search: vi.fn(),
+    atomicEntry: vi.fn(),
+    save: vi.fn(),
+    diagnostics: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
+    cancelScopes: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+const disconnected: DesktopState = {
+  generation: 0,
+  profiles: [],
+  reports: [],
+  active: null,
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+const fact = { value: null, error: null };
+const report: CheckReport = {
+  connectionId: "local",
+  revision: 1,
+  checkedAt: 1,
+  liveness: fact,
+  readiness: { value: { status: "ready", checks: {} }, error: null },
+  identity: fact,
+  capabilities: fact,
+  compatibilityVerified: true,
+  anonymousAccess: true,
+  supportedOperations: [],
+};
+const scope = {
+  scope_id: "exact-scope-a",
+  title: "Same title",
+  summary: "",
+  version: 1,
+  context_references: [],
+  external_references: [],
+};
+const active: DesktopState = {
+  ...disconnected,
+  generation: 1,
+  active: { connectionId: "local", generation: 1, scope, report },
+};
+beforeEach(() => {
+  vi.mocked(getFoundationInfo).mockRejectedValue("unavailable");
+  vi.mocked(desktopApi.state).mockResolvedValue(active);
+  vi.mocked(desktopApi.cancelMemory).mockResolvedValue(undefined);
+  vi.mocked(desktopApi.cancelScopes).mockResolvedValue(undefined);
+});
+afterEach(() => {
+  cleanup();
+  vi.resetAllMocks();
+  vi.restoreAllMocks();
+});
+
+test("startup distinguishes pending, failed, and known disconnected state; reload is local only", async () => {
+  const user = userEvent.setup();
+  let fail!: (error: unknown) => void;
+  vi.mocked(desktopApi.state).mockImplementationOnce(
+    () =>
+      new Promise((_, reject) => {
+        fail = reject;
+      }),
+  );
+  render(<App />);
+  expect(
+    screen.getByText("正在加载 Desktop 状态…", {
+      selector: "main .feedback-title",
+    }),
+  ).toBeTruthy();
+  expect(screen.queryByRole("heading", { name: "尚未连接服务" })).toBeNull();
+  await act(async () => {
+    fail({ code: "storage_error" });
+  });
+  expect(screen.getByRole("alert").textContent).toContain(
+    "无法加载 Desktop 状态",
+  );
+  expect(screen.queryByRole("heading", { name: "尚未连接服务" })).toBeNull();
+  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+  await user.click(screen.getByRole("button", { name: "重新加载本机状态" }));
+  expect(
+    await screen.findByRole("heading", { name: "尚未连接服务" }),
+  ).toBeTruthy();
+  expect(desktopApi.check).not.toHaveBeenCalled();
+});
+
+test("exact Scope IDs distinguish identical titles and newest matching facts are global", () => {
+  const props = {
+    language: "en" as const,
+    onManageConnections: vi.fn(),
+    onOpenScopes: vi.fn(),
+    onDisconnect: vi.fn(),
+  };
+  const latest = {
+    ...report,
+    checkedAt: 2,
+    readiness: {
+      value: { status: "degraded" as const, checks: {} },
+      error: null,
+    },
+  };
+  const { rerender } = render(
+    <TopBar {...props} state={{ ...active, reports: [latest] }} />,
+  );
+  expect(
+    screen.getByRole("button", { name: /Same title exact-scope-a/ }),
+  ).toBeTruthy();
+  const context = screen.getByRole("group", {
+    name: "Current connection and exact Scope",
+  });
+  expect(context.textContent).toContain("Service not ready");
+  expect(context.textContent).toContain("Compatibility");
+  expect(context.textContent).toContain("Liveness");
+  expect(context.textContent).toContain("Last checked");
+  rerender(
+    <TopBar
+      {...props}
+      state={{
+        ...active,
+        active: {
+          ...active.active!,
+          scope: { ...scope, scope_id: "exact-scope-b" },
+        },
+        reports: [{ ...latest, revision: 2 }],
+      }}
+    />,
+  );
+  expect(
+    screen.getByRole("button", { name: /Same title exact-scope-b/ }),
+  ).toBeTruthy();
+  expect(context.textContent).toContain("Service ready");
+  expect(context.textContent).not.toContain("Service not ready");
+});
+
+test("connection keyboard menu and Scope dialog restore focus without checks", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  const trigger = await screen.findByRole("button", { name: /当前连接:/ });
+  trigger.focus();
+  await user.keyboard("{ArrowDown}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: "管理连接" }),
+  );
+  await user.keyboard("{End}");
+  expect(document.activeElement).toBe(
+    screen.getByRole("menuitem", { name: "断开桌面连接" }),
+  );
+  await user.keyboard("{Escape}");
+  expect(document.activeElement).toBe(trigger);
+  const scopeTrigger = screen.getByRole("button", {
+    name: /Same title exact-scope-a/,
+  });
+  await user.click(scopeTrigger);
+  const dialog = screen.getByRole("dialog");
+  const close = within(dialog).getByRole("button", { name: "关闭" });
+  expect(document.activeElement).toBe(close);
+  await user.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(document.activeElement).toBe(
+    within(dialog).getByRole("button", { name: "查找范围" }),
+  );
+  await user.keyboard("{Tab}{Escape}");
+  expect(screen.queryByRole("dialog")).toBeNull();
+  expect(document.activeElement).toBe(scopeTrigger);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(document.activeElement).toBe(
+    screen.getByRole("heading", { level: 1, name: "观察" }),
+  );
+  expect(
+    screen.getByRole("group", { name: "当前连接与精确 Scope" }),
+  ).toBeTruthy();
+  expect(desktopApi.check).not.toHaveBeenCalled();
+});
+
+test("Scope loading is distinct from empty; expired pagination retries from the first page", async () => {
+  const user = userEvent.setup();
+  let finish!: (page: ScopePage) => void;
+  vi.mocked(desktopApi.scopes)
+    .mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    )
+    .mockRejectedValueOnce({ code: "cursor_expired" })
+    .mockResolvedValueOnce({ items: [], next_cursor: null });
+  render(
+    <Scopes
+      state={active}
+      language="en"
+      onState={vi.fn()}
+      confirmSwitch={() => true}
+    />,
+  );
+  expect(screen.getByText("No Scope search has run")).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "Find scopes" }));
+  expect(screen.getByRole("status").textContent).toBe("Finding scopes…");
+  expect(screen.queryByText("No accessible scopes on this page.")).toBeNull();
+  await act(async () => {
+    finish({ items: [], next_cursor: "expired" });
+  });
+  await user.click(screen.getByRole("button", { name: "Next page" }));
+  expect(screen.getByRole("alert").textContent).toContain("first page");
+  await user.click(
+    screen.getByRole("button", { name: "Search again from the first page" }),
+  );
+  expect(desktopApi.scopes).toHaveBeenLastCalledWith(1, "", null);
+  expect(screen.getByText("No accessible scopes on this page.")).toBeTruthy();
+});
+
+test("failed exact reads retry the original immutable revision", async () => {
+  const user = userEvent.setup();
+  const artifact = {
+    family: "atomic-memory",
+    artifact_id: "saved-artifact",
+    revision: 7,
+  };
+  vi.mocked(desktopApi.search).mockResolvedValue({
+    hits: [{ artifact, text: "excerpt", score: 1, matched_by: ["text"] }],
+  });
+  vi.mocked(desktopApi.atomicEntry)
+    .mockRejectedValueOnce({ code: "network" })
+    .mockResolvedValueOnce({
+      artifact,
+      kind: "note",
+      text: "revision seven",
+      source_refs: [],
+    });
+  render(
+    <MemoryWorkspace
+      state={active}
+      language="en"
+      onState={vi.fn()}
+      onDirty={vi.fn()}
+    />,
+  );
+  await user.type(screen.getByLabelText("Keyword search"), "find");
+  await user.click(screen.getByRole("button", { name: "Search" }));
+  await user.click(screen.getByRole("button", { name: "Read exact version" }));
+  expect(screen.queryByText("excerpt")).toBeNull();
+  await user.click(screen.getByRole("button", { name: "Retry read" }));
+  expect(desktopApi.atomicEntry).toHaveBeenLastCalledWith(1, artifact);
+  expect(screen.getByText("revision seven")).toBeTruthy();
+});
+
+test("healthy Server facts do not hide access denial or clear a note draft", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.search).mockRejectedValue({ code: "forbidden" });
+  render(
+    <MemoryWorkspace
+      state={active}
+      language="en"
+      onState={vi.fn()}
+      onDirty={vi.fn()}
+    />,
+  );
+  await user.type(screen.getByLabelText("Memory text"), "unsaved draft");
+  await user.type(screen.getByLabelText("Keyword search"), "private");
+  await user.click(screen.getByRole("button", { name: "Search" }));
+  expect(screen.getByRole("alert").textContent).toContain("permission");
+  expect(screen.getByRole("alert").textContent).toContain("Health");
+  expect(
+    (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
+  ).toBe("unsaved draft");
+});
+
+test("empty profiles, pending save and failed save stay distinct and preserve editor input", async () => {
+  const user = userEvent.setup();
+  let fail!: (error: unknown) => void;
+  vi.mocked(desktopApi.save).mockImplementationOnce(
+    () =>
+      new Promise((_, reject) => {
+        fail = reject;
+      }),
+  );
+  render(
+    <Connections
+      state={disconnected}
+      language="en"
+      onState={vi.fn()}
+      onDirty={vi.fn()}
+    />,
+  );
+  expect(screen.getByText("No connections added")).toBeTruthy();
+  await user.type(screen.getByLabelText("Connection name"), "My draft");
+  await user.type(
+    screen.getByLabelText("Server address"),
+    "http://127.0.0.1:8000",
+  );
+  await user.click(screen.getByRole("button", { name: "Save configuration" }));
+  expect(
+    screen.getByText("An operation is in progress. Please wait…"),
+  ).toBeTruthy();
+  await act(async () => {
+    fail({ code: "storage_error" });
+  });
+  expect(screen.getByRole("alert")).toBeTruthy();
+  expect(
+    (screen.getByLabelText("Connection name") as HTMLInputElement).value,
+  ).toBe("My draft");
+  expect(screen.queryByRole("button", { name: "Retry read" })).toBeNull();
+});
+
+test("local diagnostic retry keeps the chosen check and separates idle, pending, failed, empty", async () => {
+  const user = userEvent.setup();
+  let finish!: (report: DiagnosticReport) => void;
+  vi.mocked(desktopApi.diagnostics)
+    .mockRejectedValueOnce("not_found")
+    .mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+  render(<Diagnostics language="en" />);
+  expect(screen.getByText("No local check has run")).toBeTruthy();
+  await user.click(
+    screen.getByRole("button", { name: "Check local Agent integrations" }),
+  );
+  expect(screen.getByRole("alert").textContent).toContain(
+    "remote connections are unaffected",
+  );
+  await user.click(
+    screen.getByRole("button", { name: "Run local check again" }),
+  );
+  expect(desktopApi.diagnostics).toHaveBeenLastCalledWith("integrations");
+  expect(screen.getByRole("status").textContent).toContain("Checking");
+  expect(screen.queryByRole("alert")).toBeNull();
+  await act(async () => {
+    finish({ checkedAt: 1, exitCode: 0, items: [], hosts: [] });
+  });
+  expect(
+    screen.getByText("This check returned no diagnostic items"),
+  ).toBeTruthy();
+});
+
+test.each(["disconnected", "unverified", "scope"] as const)(
+  "Memory prerequisite explains %s and offers its own recovery",
+  async (kind) => {
+    const user = userEvent.setup();
+    const manage = vi.fn();
+    const choose = vi.fn();
+    const state =
+      kind === "disconnected"
+        ? disconnected
+        : {
+            ...active,
+            active: {
+              ...active.active!,
+              scope: kind === "scope" ? null : scope,
+              report: {
+                ...report,
+                compatibilityVerified: kind !== "unverified",
+              },
+            },
+          };
+    render(
+      <MemoryWorkspace
+        state={state}
+        language="en"
+        onState={vi.fn()}
+        onDirty={vi.fn()}
+        onManageConnections={manage}
+        onOpenScopes={choose}
+      />,
+    );
+    const recovery =
+      kind === "scope"
+        ? "Select an exact Scope first"
+        : "Manage connections and credentials";
+    await user.click(screen.getByRole("button", { name: recovery }));
+    expect(kind === "scope" ? choose : manage).toHaveBeenCalledOnce();
+    expect(
+      (screen.getByRole("button", { name: "Save" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+    expect(screen.queryByRole("alert")).toBeNull();
+  },
+);
+
+test("identity errors and incompatible facts are independent of a healthy Server", () => {
+  const props = {
+    language: "en" as const,
+    onManageConnections: vi.fn(),
+    onOpenScopes: vi.fn(),
+    onDisconnect: vi.fn(),
+  };
+  const failure = {
+    code: "unauthorized" as const,
+    requestId: null,
+    dispatched: false,
+  };
+  render(
+    <TopBar
+      {...props}
+      state={{
+        ...active,
+        reports: [
+          {
+            ...report,
+            checkedAt: 2,
+            compatibilityVerified: false,
+            anonymousAccess: false,
+            identity: { value: null, error: failure },
+          },
+        ],
+      }}
+    />,
+  );
+  expect(
+    screen.getByRole("button", { name: /Identity not verified yet/ }),
+  ).toBeTruthy();
+  const context = screen.getByRole("group");
+  expect(context.textContent).toContain("Service ready");
+  expect(context.textContent).toContain("Not verified");
+});
+
+test("Scope recovery navigation focuses the destination title", async () => {
+  const user = userEvent.setup();
+  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+  render(<App />);
+  await user.click(await screen.findByRole("button", { name: /未选择/ }));
+  await user.click(screen.getByRole("button", { name: "管理连接与凭据" }));
+  expect(screen.queryByRole("dialog")).toBeNull();
+  expect(document.activeElement).toBe(
+    screen.getByRole("heading", { level: 1, name: "连接" }),
+  );
+});
diff --git a/desktop/ui/tests/observation.test.tsx b/desktop/ui/tests/observation.test.tsx
index 6e753fd5a0..063a8e810c 100644
--- a/desktop/ui/tests/observation.test.tsx
+++ b/desktop/ui/tests/observation.test.tsx
@@ -64,7 +64,9 @@ test("Overview remains the initial page and all original entries remain reachabl
       .getAllByRole("button")
       .map((button) => button.textContent),
   ).toEqual(["总览", "连接", "记忆", "观察"]);
-  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+  expect(
+    await screen.findByRole("heading", { name: "尚未连接服务" }),
+  ).toBeTruthy();
   await user.click(screen.getByRole("button", { name: "连接" }));
   expect(screen.getByRole("heading", { name: "添加连接" })).toBeTruthy();
   await user.click(screen.getByRole("button", { name: "记忆" }));
@@ -75,7 +77,9 @@ test("Overview remains the initial page and all original entries remain reachabl
   expect(screen.getByLabelText("语言")).toBeTruthy();
   expect(screen.getByRole("heading", { name: "本地诊断" })).toBeTruthy();
   await user.click(screen.getByRole("button", { name: "总览" }));
-  expect(screen.getByRole("heading", { name: "尚未连接服务" })).toBeTruthy();
+  expect(
+    await screen.findByRole("heading", { name: "尚未连接服务" }),
+  ).toBeTruthy();
 });
 
 test("Observation tabs support the keyboard and stay unavailable without starting checks", async () => {

From 8ee69ccf674bddb29c39debf047a71930930d0d1 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 10:28:55 +0800
Subject: [PATCH 04/12] fix(desktop): explain recovery for failed save outcomes

---
 desktop/VALIDATION.md                  |  6 +++
 desktop/ui/src/app/MemoryWorkspace.tsx | 46 ++++++++++++--------
 desktop/ui/tests/memory.test.tsx       | 60 +++++++++++++++++++++++++-
 3 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 7656fea4a7..4c59ecbcbf 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -88,6 +88,12 @@ These checks use browser fixtures and mock IPC. No real native/backend, installe
 
 Edge 合成 IPC 检查覆盖上述 48 组配置和五个页面，包含权限及本机诊断错误、长地址和 Scope ID、Scope 弹窗，无横向溢出；另检查强制高对比度的加载反馈并查看截图。200% 为等效布局检查。本次没有执行真实原生／后端、安装包、平台 IME 或屏幕阅读器验收。仓库检查中，未修改 Python 代码的 Windows 类型检查存在上述既有错误，其余钩子通过。
 
+## Save outcome recovery (#2102)
+
+On 2026-10-22, mocked-IPC UI tests verified that a resolved `WriteOutcome` with `record.status: "failed"` and `forbidden` displays the same permission recovery guidance as the exception path in English and Chinese, preserves the draft and dirty state, and does not replay the write. Unknown-write coverage verifies that cancelling resubmission sends no request and explicit confirmation permits a new submission. All 16 Memory tests and all 52 frontend tests passed, along with typecheck, lint and production build using the pinned tools above. No real native/backend or installed-package acceptance was executed for this fix. Repository hooks retain the existing Windows Python `ty check` failures described above.
+
+2026-10-22 的模拟 IPC 测试验证：确定失败的保存结果显示与异常分支一致的中英文权限恢复说明，保留草稿及未保存状态，不自动重放写入；未知写入取消再次提交时不发请求，确认后才提交。16 项 Memory 测试、全部 52 项前端测试、typecheck、lint 和生产构建通过。本次未执行真实原生／后端或安装包验收；仓库钩子仍有上述既有 Windows Python 类型检查错误。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index 09d34de9f9..270bf09fa9 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -158,26 +158,34 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
       {error != null && (
         <ErrorFeedback error={error} language={language} title={t.failed} />
       )}
-      {outcome && (
-        <PageFeedback
-          compact
-          kind={
-            outcome.record.status === "succeeded"
-              ? "success"
-              : outcome.record.status === "unknown"
-                ? "warning"
-                : "error"
-          }
-          title={
-            outcome.record.status === "succeeded"
-              ? outcome.result?.records.length
-                ? t.success
-                : t.noEntry
-              : outcome.record.status === "unknown"
-                ? t.unknown
-                : `${t.failed} ${connectionError(outcome.record.error, language)}`
-          }
+      {outcome?.record.status === "failed" ? (
+        <ErrorFeedback
+          error={outcome.record.error}
+          language={language}
+          title={t.failed}
         />
+      ) : (
+        outcome && (
+          <PageFeedback
+            compact
+            kind={
+              outcome.record.status === "succeeded"
+                ? "success"
+                : outcome.record.status === "unknown"
+                  ? "warning"
+                  : "error"
+            }
+            title={
+              outcome.record.status === "succeeded"
+                ? outcome.result?.records.length
+                  ? t.success
+                  : t.noEntry
+                : outcome.record.status === "unknown"
+                  ? t.unknown
+                  : `${t.failed} ${connectionError(outcome.record.error, language)}`
+            }
+          />
+        )
       )}
     </section>
   );
diff --git a/desktop/ui/tests/memory.test.tsx b/desktop/ui/tests/memory.test.tsx
index 9b7314004f..2886667879 100644
--- a/desktop/ui/tests/memory.test.tsx
+++ b/desktop/ui/tests/memory.test.tsx
@@ -95,7 +95,7 @@ const artifact: ArtifactReference = {
   artifact_id: "atomic-a",
   revision: 7,
 };
-function outcome(status: "succeeded" | "unknown"): WriteOutcome {
+function outcome(status: "succeeded" | "unknown" | "failed"): WriteOutcome {
   return {
     record: {
       operationId: "operation-a",
@@ -245,6 +245,53 @@ test("UTF-8 overflow and IME composition cannot accidentally submit", async () =
   await user.click(screen.getByRole("button", { name: "Save" }));
   expect(desktopApi.remember).not.toHaveBeenCalled();
 });
+test.each(["en", "zh"] as const)(
+  "a failed save outcome explains permission recovery and retains its draft (%s)",
+  async (language) => {
+    const user = userEvent.setup();
+    const failed = outcome("failed");
+    failed.record.error = {
+      code: "forbidden",
+      requestId: null,
+      dispatched: true,
+    };
+    vi.mocked(desktopApi.state).mockResolvedValue(state);
+    vi.mocked(desktopApi.remember).mockResolvedValue(failed);
+    const onDirty = vi.fn();
+    render(
+      <NoteForm
+        state={state}
+        language={language}
+        onState={vi.fn()}
+        onDirty={onDirty}
+      />,
+    );
+    const input = screen.getByRole("textbox");
+    await user.type(input, "preserve denied draft");
+    onDirty.mockClear();
+    await user.click(
+      screen.getByRole("button", { name: language === "zh" ? "保存" : "Save" }),
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain(
+      language === "zh"
+        ? "当前身份无权执行此操作"
+        : "This identity cannot perform this operation",
+    );
+    expect(alert.textContent).toContain(
+      language === "zh"
+        ? "申请此操作所需的权限"
+        : "Request permission for this operation",
+    );
+    expect(alert.textContent).toContain(
+      language === "zh" ? "精确 Scope" : "exact Scope",
+    );
+    expect((input as HTMLTextAreaElement).value).toBe("preserve denied draft");
+    expect(onDirty).not.toHaveBeenCalledWith(false);
+    expect(desktopApi.remember).toHaveBeenCalledTimes(1);
+  },
+);
+
 test("unknown save retains the draft and does not replay automatically", async () => {
   const user = userEvent.setup();
   form();
@@ -256,6 +303,17 @@ test("unknown save retains the draft and does not replay automatically", async (
     (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
   ).toBe("preserve me");
   expect(desktopApi.remember).toHaveBeenCalledTimes(1);
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: "Save" }));
+  expect(confirm).toHaveBeenCalledOnce();
+  expect(desktopApi.remember).toHaveBeenCalledTimes(1);
+  expect(
+    (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
+  ).toBe("preserve me");
+  confirm.mockReturnValue(true);
+  await user.click(screen.getByRole("button", { name: "Save" }));
+  expect(confirm).toHaveBeenCalledTimes(2);
+  expect(desktopApi.remember).toHaveBeenCalledTimes(2);
 });
 test("search opens only the exact reference and renders hostile text literally", async () => {
   const user = userEvent.setup();

From 82d62e944b199f034c5e733b6c7911b8c1f72ad5 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 11:16:14 +0800
Subject: [PATCH 05/12] feat(desktop): add help and guard pending connection
 changes

---
 desktop/README.md                             |   4 +
 desktop/README.zh.md                          |   4 +
 desktop/VALIDATION.md                         |  12 +
 desktop/ui/src/app/App.tsx                    |  27 ++-
 desktop/ui/src/app/Connections.tsx            |  18 +-
 desktop/ui/src/app/Help.tsx                   |  89 +++++++
 desktop/ui/src/app/MemoryWorkspace.tsx        |  33 ++-
 desktop/ui/src/app/TopBar.tsx                 |  14 +-
 desktop/ui/src/app/messages.ts                |  47 ++++
 desktop/ui/src/app/style.css                  |   9 +
 .../ui/tests/connection-transition.test.tsx   | 218 ++++++++++++++++++
 desktop/ui/tests/help.test.tsx                | 121 ++++++++++
 12 files changed, 577 insertions(+), 19 deletions(-)
 create mode 100644 desktop/ui/src/app/Help.tsx
 create mode 100644 desktop/ui/tests/connection-transition.test.tsx
 create mode 100644 desktop/ui/tests/help.test.tsx

diff --git a/desktop/README.md b/desktop/README.md
index 3702029d7f..8785eecc0d 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -17,6 +17,10 @@ Errors explain the affected operation and recovery. Read failures offer an expli
 
 The global bar shows the active connection, full Server address, Scope title and complete `scope_id` on every page. Identically named Scopes remain distinguishable. Identity, compatibility, liveness and readiness are separate facts; the latest check for the active configuration revision supplies the displayed facts and check time. A healthy Server does not grant operation permissions. Addresses and IDs wrap in small windows. The connection menu supports arrow keys, Home/End and Escape; the Scope dialog constrains focus and restores it when closed.
 
+Settings & diagnostics includes bilingual usage guidance, a locale-specific documentation address and a fixed issue-report address. Copy actions report success or failure; the read-only address fields select their text on focus for manual copying. Help is available without a Server or native connection state. The displayed Desktop version comes from the native host and is Unknown if unavailable.
+
+While a connection operation is pending, a global message remains visible across page changes. You can browse other pages, but Memory editing, saving, searching, exact reads and Scope switching pause until the operation and its native-state refresh finish. This prevents a late activation result from clearing text entered against the old Scope. Once the operation completes, explicitly select an exact Scope if needed. Existing draft confirmations and unknown-write protections continue to apply.
+
 ## Run the installed preview
 
 Download and extract `desktop-windows-internal-unsigned` from a successful **Desktop validation** Actions run on this branch. The installer is under `src-tauri/target/release/bundle/nsis/`. Its accompanying `.artifacts/windows-smoke.json` records the commit, SHA-256 and signature status; compare the downloaded installer with `Get-FileHash -Algorithm SHA256 <installer-path>`. The current package is unsigned and intended for internal validation.
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index 98ee1d1981..e2a45cae66 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -17,6 +17,10 @@
 
 全局栏在每个页面展示当前连接、完整 Server 地址、Scope 标题和完整 `scope_id`，可区分同名 Scope。身份、兼容性、存活和就绪状态分别呈现，采用与当前配置版本一致的最近检查事实并显示检查时间；健康状态不代表操作权限。长地址和 ID 在小窗口下可换行。连接菜单支持方向键、Home/End 和 Escape；Scope 对话框约束焦点，关闭后恢复焦点。
 
+“设置与诊断”内提供双语使用说明、对应语言的文档地址和固定问题反馈地址。复制操作显示成功或失败；只读地址框获取焦点时选中全文，便于手动复制。没有 Server 或本机连接状态不可用时仍可访问帮助。Desktop 版本来自原生信息，获取不到时显示“未知”。
+
+连接操作等待期间，全局提示在页面切换后持续显示。仍可浏览其他页面，但记忆编辑、保存、搜索、精确读取及 Scope 切换暂停，直到操作及其原生状态刷新完成，避免晚到的激活结果清空在旧 Scope 下新输入的正文。操作完成后，按需显式选择精确 Scope；现有草稿确认和未知写入保护继续生效。
+
 ## 直接运行安装版
 
 在本分支的 GitHub Actions「Desktop validation」成功运行中，下载 `desktop-windows-internal-unsigned` 产物并解压，找到 `src-tauri/target/release/bundle/nsis/` 中的安装程序。对应 `.artifacts/windows-smoke.json` 记录提交、安装包 SHA-256 和签名状态，可用 `Get-FileHash -Algorithm SHA256 <安装包路径>` 核对下载文件。当前产物未签名，供内部验证。
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 4c59ecbcbf..6e4a253e7d 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -94,6 +94,18 @@ On 2026-10-22, mocked-IPC UI tests verified that a resolved `WriteOutcome` with
 
 2026-10-22 的模拟 IPC 测试验证：确定失败的保存结果显示与异常分支一致的中英文权限恢复说明，保留草稿及未保存状态，不自动重放写入；未知写入取消再次提交时不发请求，确认后才提交。16 项 Memory 测试、全部 52 项前端测试、typecheck、lint 和生产构建通过。本次未执行真实原生／后端或安装包验收；仓库钩子仍有上述既有 Windows Python 类型检查错误。
 
+## Help and pending-connection protection (#2102)
+
+On 2026-10-22, the pinned Windows tools above ran all 62 frontend tests, typecheck, lint and production build successfully. Ten focused help/connection tests cover bilingual guidance, fixed-address copying, success/failure feedback, keyboard selection for manual copying, offline access, native/unknown version display, pending activation and active-connection recheck across page changes, native failure recovery, overlapping checks, explicit Scope selection and the new draft's discard guard. Existing late-write, unknown-write and editor lifetime tests remain passing.
+
+Headless Edge 155.0.4283.62 exercised 18 combinations of English/Chinese, light/dark/system and CSS viewports 800×600, 400×400 and 400×300. Synthetic IPC delayed activation across Memory and Settings navigation; the old context stayed non-editable, completion required a new Scope, and cancellation of navigation preserved a new draft. Clipboard stubs checked the locale-specific documentation address, copy failure and manual address selection. Help, pending feedback and confirmation paths had no horizontal overflow. An additional forced-colors view was inspected. The 400×300 viewport at device scale factor 2 is a layout equivalent of 800×600 at 200%, not installed WebView zoom.
+
+Screenshots of help copy failure and pending activation were inspected. Evidence is under ignored `.artifacts/desktop-shell/help-transition-*`. Clipboard stubs and synthetic IPC do not qualify the native clipboard, actual Server or installed WebView. No installer, platform IME, screen-reader or macOS acceptance was executed for these changes. Repository hooks retain the previously documented Windows Python `ty check` failures; the other hooks passed.
+
+2026-10-22 使用上述固定工具版本，全部 62 项前端测试、typecheck、lint 和生产构建通过。新增 10 项专项测试覆盖双语帮助、固定地址复制与失败后的手动复制、离线入口、原生／未知版本，以及跨页激活等待、失败恢复、重叠请求和新草稿确认保护。原有晚到写入、未知写入及连接编辑器保护测试继续通过。
+
+Edge 检查覆盖中英文、三种主题和上述三个窗口尺寸的 18 组组合。合成 IPC 与剪贴板桩验证帮助复制、跨页等待、旧上下文不可编辑、完成后显式选择 Scope 及新草稿导航取消；页面没有横向溢出，并检查强制高对比度视图及截图。200% 为等效布局检查。本次未执行原生剪贴板、真实 Server、安装包、IME、屏幕阅读器或 macOS 验收；仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index 20cd7b7a4f..0bdd2f39f7 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -28,6 +28,7 @@ import observationIcon from "../assets/retrieval.svg";
 import { TopBar } from "./TopBar";
 import { Overview } from "./Overview";
 import { MemoryWorkspace } from "./MemoryWorkspace";
+import { Help } from "./Help";
 import { Diagnostics } from "./Diagnostics";
 import { Connections } from "./Connections";
 import { Scopes } from "./Scopes";
@@ -54,6 +55,12 @@ export function App() {
   const [dirty, setDirty] = useState(false);
   const [scopeOpen, setScopeOpen] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [pendingConnections, setPendingConnections] = useState(0);
+  const contextPending = pendingConnections > 0;
+  function connectionPending(pending: boolean) {
+    // Pending operations may finish after their editor has unmounted.
+    setPendingConnections((current) => current + (pending ? 1 : -1));
+  }
   function receiveState(next: DesktopState) {
     setDesktop((current) =>
       !current || next.generation >= current.generation ? next : current,
@@ -161,11 +168,17 @@ export function App() {
   }
   function disconnect() {
     if (!confirmSwitch()) return;
-    void desktopApi.disconnect().then(receiveState).catch(setNativeError);
+    connectionPending(true);
+    void desktopApi
+      .disconnect()
+      .then(receiveState)
+      .catch(setNativeError)
+      .finally(() => connectionPending(false));
   }
   async function refresh() {
     setRefreshing(true);
     setNativeError(null);
+    connectionPending(true);
     try {
       receiveState(
         desktop?.active
@@ -175,6 +188,7 @@ export function App() {
     } catch (e) {
       setNativeError(e);
     } finally {
+      connectionPending(false);
       setRefreshing(false);
     }
   }
@@ -250,6 +264,7 @@ export function App() {
           state={desktop}
           language={language}
           loading={stateLoading}
+          contextPending={contextPending}
           onManageConnections={() => navigate("connections")}
           onOpenScopes={openScopes}
           onDisconnect={disconnect}
@@ -258,6 +273,11 @@ export function App() {
           <h1 className="sr-only" tabIndex={-1} ref={heading}>
             {t[page]}
           </h1>
+          {contextPending && (
+            <PageFeedback kind="loading" title={t.connectionUpdating}>
+              <p>{t.connectionUpdatingHint}</p>
+            </PageFeedback>
+          )}
           {stateLoading && (
             <PageFeedback kind="loading" title={t.loadingState} />
           )}
@@ -315,6 +335,7 @@ export function App() {
               onDirty={setDirty}
               onManageConnections={() => navigate("connections")}
               onOpenScopes={openScopes}
+              contextPending={contextPending}
             />
           )}
           {page === "connections" && (
@@ -323,6 +344,7 @@ export function App() {
               language={language}
               onState={receiveState}
               onDirty={setDirty}
+              onPendingChange={connectionPending}
             />
           )}
           {page === "observation" && (
@@ -359,13 +381,14 @@ export function App() {
                   </select>
                 </div>
               </section>
+              <Help language={language} />
               <Diagnostics language={language} />
               <section className="card">
                 <h2>{t.version}</h2>
                 <dl>
                   <div>
                     <dt>{t.version}</dt>
-                    <dd>{host?.version ?? "0.1.0"}</dd>
+                    <dd>{host?.version ?? t.unknown}</dd>
                   </div>
                   <div>
                     <dt>{t.native}</dt>
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index 52fb196354..1b6fa563ce 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -34,8 +34,15 @@ type Props = {
   language: Language;
   onState: (value: DesktopState) => void;
   onDirty: (value: boolean) => void;
+  onPendingChange?: (pending: boolean) => void;
 };
-export function Connections({ state, language, onState, onDirty }: Props) {
+export function Connections({
+  state,
+  language,
+  onState,
+  onDirty,
+  onPendingChange,
+}: Props) {
   const t = connectionMessages[language];
   const [selected, setSelected] = useState<string | null>(null);
   const profile = state?.profiles.find((p) => p.id === selected);
@@ -87,7 +94,12 @@ export function Connections({ state, language, onState, onDirty }: Props) {
       setSecret("");
       if (profile && !invalidated.current) {
         invalidated.current = true;
-        void desktopApi.invalidate(profile.id).then(onState).catch(setError);
+        onPendingChange?.(true);
+        void desktopApi
+          .invalidate(profile.id)
+          .then(onState)
+          .catch(setError)
+          .finally(() => onPendingChange?.(false));
       }
     }
   }
@@ -101,6 +113,7 @@ export function Connections({ state, language, onState, onDirty }: Props) {
     const ticket = lifetime.current;
     setBusy(true);
     setError(null);
+    onPendingChange?.(true);
     try {
       const next = await work();
       onState(next);
@@ -113,6 +126,7 @@ export function Connections({ state, language, onState, onDirty }: Props) {
         /* Keep the explicit failure visible. */
       }
     } finally {
+      onPendingChange?.(false);
       if (ticket === lifetime.current) setBusy(false);
     }
   }
diff --git a/desktop/ui/src/app/Help.tsx b/desktop/ui/src/app/Help.tsx
new file mode 100644
index 0000000000..8ce0600289
--- /dev/null
+++ b/desktop/ui/src/app/Help.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { messages, type Language } from "./messages";
+import { PageFeedback } from "./PageFeedback";
+
+const documentation = {
+  zh: "https://github.com/oceanbase/powercontext/blob/master/desktop/README.zh.md",
+  en: "https://github.com/oceanbase/powercontext/blob/master/desktop/README.md",
+};
+const issues = "https://github.com/oceanbase/powercontext/issues";
+
+export function Help({ language }: { language: Language }) {
+  const t = messages[language];
+  const [result, setResult] = useState<{
+    target: "documents" | "issues";
+    success: boolean;
+  } | null>(null);
+  const copySequence = useRef(0);
+  useEffect(() => {
+    copySequence.current++;
+    setResult(null);
+    return () => {
+      copySequence.current++;
+    };
+  }, [language]);
+  async function copy(target: "documents" | "issues") {
+    const ticket = ++copySequence.current;
+    const address = target === "documents" ? documentation[language] : issues;
+    try {
+      await navigator.clipboard.writeText(address);
+      if (ticket === copySequence.current) setResult({ target, success: true });
+    } catch {
+      if (ticket === copySequence.current)
+        setResult({ target, success: false });
+    }
+  }
+  return (
+    <section className="card stack help">
+      <h2>{t.help}</h2>
+      <p>{t.helpPrepare}</p>
+      <ol>
+        <li>{t.helpConnect}</li>
+        <li>{t.helpScope}</li>
+        <li>{t.helpMemory}</li>
+      </ol>
+      <p>{t.helpRecovery}</p>
+      <p className="small">{t.helpAddressHint}</p>
+      {(["documents", "issues"] as const).map((target) => (
+        <div className="stack help-address" key={target}>
+          <h3>{target === "documents" ? t.helpDocuments : t.helpIssues}</h3>
+          {result?.target === target && (
+            <PageFeedback
+              compact
+              kind={result.success ? "success" : "error"}
+              title={result.success ? t.addressCopied : t.addressCopyFailed}
+            />
+          )}
+          <textarea
+            aria-label={target === "documents" ? t.helpDocuments : t.helpIssues}
+            readOnly
+            rows={2}
+            value={target === "documents" ? documentation[language] : issues}
+            onFocus={(event) => event.currentTarget.select()}
+          />
+          <div className="actions">
+            <button onClick={() => void copy(target)}>
+              {target === "documents" ? t.copyDocuments : t.copyIssues}
+            </button>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index 270bf09fa9..ce4da53781 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -35,10 +35,17 @@ type Props = {
   onDirty: (dirty: boolean) => void;
   onManageConnections?: () => void;
   onOpenScopes?: () => void;
+  contextPending?: boolean;
 };
 export const textBytes = (value: string) =>
   new TextEncoder().encode(value).length;
-export function NoteForm({ state, language, onState, onDirty }: Props) {
+export function NoteForm({
+  state,
+  language,
+  onState,
+  onDirty,
+  contextPending = false,
+}: Props) {
   const t = memoryMessages[language];
   const active = state?.active;
   const profile = state?.profiles.find((p) => p.id === active?.connectionId);
@@ -51,7 +58,8 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
   const lifetime = useRef(0);
   const generation = useRef(active?.generation);
   generation.current = active?.generation;
-  const enabled = !!active?.scope && active.report.compatibilityVerified;
+  const enabled =
+    !contextPending && !!active?.scope && active.report.compatibilityVerified;
   const bytes = textBytes(text);
   useEffect(() => {
     setText("");
@@ -65,7 +73,8 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
     };
   }, [active?.generation]);
   async function save() {
-    if (!active?.scope || submitting.current || composing.current) return;
+    if (!enabled || !active?.scope || submitting.current || composing.current)
+      return;
     if (!text.trim() || bytes > 8192) {
       setError({ code: "invalid_input" });
       return;
@@ -147,6 +156,8 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
             </strong>{" "}
             <code>{active?.scope?.scope_id}</code>
           </>
+        ) : contextPending ? (
+          messages[language].connectionUpdating
         ) : (
           t.noScope
         )}
@@ -191,7 +202,7 @@ export function NoteForm({ state, language, onState, onDirty }: Props) {
   );
 }
 export function MemoryWorkspace(props: Props) {
-  const { state, language, onState, onDirty } = props;
+  const { state, language, onState, onDirty, contextPending = false } = props;
   const common = messages[language];
   const failedReference = useRef<ArtifactReference | undefined>(undefined);
   const t = memoryMessages[language];
@@ -209,7 +220,8 @@ export function MemoryWorkspace(props: Props) {
   const pendingCancel = useRef(Promise.resolve());
   const current = useRef(active?.generation);
   current.current = active?.generation;
-  const enabled = !!active?.scope && active.report.compatibilityVerified;
+  const enabled =
+    !contextPending && !!active?.scope && active.report.compatibilityVerified;
   function clearRead() {
     failedReference.current = undefined;
     sequence.current++;
@@ -239,7 +251,7 @@ export function MemoryWorkspace(props: Props) {
     };
   }, [active?.generation]);
   async function read(reference?: ArtifactReference) {
-    if (!active?.scope) return;
+    if (!enabled || !active?.scope) return;
     const generation = active.generation;
     const ticket = ++sequence.current;
     failedReference.current = reference;
@@ -296,7 +308,7 @@ export function MemoryWorkspace(props: Props) {
   const record = state?.lastWrite;
   return (
     <div className="stack memory-workspace">
-      {state && !enabled && (
+      {state && !enabled && !contextPending && (
         <PageFeedback
           kind="unavailable"
           title={
@@ -347,6 +359,7 @@ export function MemoryWorkspace(props: Props) {
         language={language}
         onState={onState}
         onDirty={onDirty}
+        contextPending={contextPending}
       />
       <section className="card stack">
         <h2>{t.query}</h2>
@@ -385,7 +398,9 @@ export function MemoryWorkspace(props: Props) {
           </button>
         </div>
         <p className="small search-meta">{t.searchSummary}</p>
-        {!enabled && <p>{t.noScope}</p>}
+        {!enabled && (
+          <p>{contextPending ? common.connectionUpdating : t.noScope}</p>
+        )}
         {busy && (
           <PageFeedback
             compact
@@ -455,7 +470,7 @@ export function MemoryWorkspace(props: Props) {
                             <span className="badge">{t.hitVector}</span>
                           )}
                         <button
-                          disabled={!!busy}
+                          disabled={!enabled || !!busy}
                           aria-pressed={selected === key}
                           onClick={(event) => {
                             readButton.current = event.currentTarget;
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index 44548bc0c8..be73226af0 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -24,6 +24,7 @@ type Props = {
   state: DesktopState | null;
   language: Language;
   loading?: boolean;
+  contextPending?: boolean;
   onManageConnections: () => void;
   onOpenScopes: () => void;
   onDisconnect: () => void;
@@ -32,6 +33,7 @@ export function TopBar({
   state,
   language,
   loading = false,
+  contextPending = false,
   onManageConnections,
   onOpenScopes,
   onDisconnect,
@@ -55,10 +57,9 @@ export function TopBar({
   }
   useLayoutEffect(() => {
     if (open !== "connection") return;
-    const items =
-      connectionMenu.current?.querySelectorAll<HTMLButtonElement>(
-        '[role="menuitem"]',
-      );
+    const items = connectionMenu.current?.querySelectorAll<HTMLButtonElement>(
+      '[role="menuitem"]:not(:disabled)',
+    );
     items?.[menuStart.current === -1 ? items.length - 1 : 0]?.focus();
   }, [open]);
   useEffect(() => {
@@ -172,7 +173,7 @@ export function TopBar({
               }
               const items = Array.from(
                 connectionMenu.current?.querySelectorAll<HTMLButtonElement>(
-                  '[role="menuitem"]',
+                  '[role="menuitem"]:not(:disabled)',
                 ) ?? [],
               );
               const current = items.indexOf(
@@ -229,6 +230,7 @@ export function TopBar({
                   className="menu-item"
                   role="menuitem"
                   tabIndex={-1}
+                  disabled={contextPending}
                   onClick={() => {
                     closePopup();
                     onDisconnect();
@@ -252,7 +254,7 @@ export function TopBar({
         <button
           className="menu-trigger scope-trigger"
           onClick={onOpenScopes}
-          disabled={!state}
+          disabled={!state || contextPending}
           aria-haspopup="dialog"
         >
           <span className="scope-label">
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index c21c015c87..44b655d17e 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,6 +16,29 @@
 
 export const messages = {
   zh: {
+    connectionUpdating: "正在更新连接状态…",
+    connectionUpdatingHint:
+      "可以浏览其他页面。连接操作完成前，记忆编辑、保存、搜索、精确读取及范围切换暂不可用；完成后请核对当前连接与精确 Scope。",
+    help: "使用帮助",
+    helpPrepare:
+      "请先按使用文档独立准备 PowerContext Server，或使用已运行的本地／远程 Server。Desktop 不安装或启停 Server。",
+    helpConnect:
+      "在“连接”中保存地址及认证配置，核对受支持的兼容配置后，显式点击“使用此连接”。选择配置不会自动激活连接。",
+    helpScope:
+      "通过顶部 Scope 选择器查找并选择精确范围。核对完整 scope_id，以区分同名 Scope；选择范围不会修改 Agent 绑定。",
+    helpMemory:
+      "在“记忆”中保存正文、按关键词搜索并读取结果的精确版本。搜索最多返回 10 条，不代表完整目录或库存。",
+    helpRecovery:
+      "权限错误需申请对应权限或选择有权限的连接／Scope。保存结果未知时先核对原目标，再决定是否再次提交，避免重复写入。",
+    helpDocuments: "使用文档",
+    helpIssues: "问题反馈",
+    copyDocuments: "复制使用文档地址",
+    copyIssues: "复制问题反馈地址",
+    addressCopied: "地址已复制。",
+    addressCopyFailed: "复制失败，请选择并手动复制下方地址。",
+    helpAddressHint:
+      "复制地址后，可在浏览器中打开。反馈时请勿包含凭据或私有记忆正文。",
+    unknown: "未知",
     loadingState: "正在加载 Desktop 状态…",
     stateUnavailable: "Desktop 状态尚不可用",
     stateFailed: "无法加载 Desktop 状态",
@@ -176,6 +199,30 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
+    connectionUpdating: "Updating connection state…",
+    connectionUpdatingHint:
+      "You can browse other pages. Memory editing, saving, searching, exact reads and Scope switching are unavailable until the connection operation finishes. Then verify the current connection and exact Scope.",
+    help: "Usage help",
+    helpPrepare:
+      "Prepare PowerContext Server independently using the usage guide, or use an existing local or remote Server. Desktop does not install, start or stop the Server.",
+    helpConnect:
+      "In Connections, save the address and authentication settings, verify a supported compatibility profile, then explicitly choose Use this connection. Selecting a profile does not activate it.",
+    helpScope:
+      "Find and select an exact Scope using the global selector. Check the complete scope_id to distinguish identical titles. Selecting a Scope does not change Agent bindings.",
+    helpMemory:
+      "In Memories, save text, search by keyword, and read the exact version of a result. Search returns at most 10 matches and does not represent a full directory or inventory.",
+    helpRecovery:
+      "For permission errors, request access or choose an authorized connection or Scope. If a save outcome is unknown, inspect its original target before deciding to submit again to avoid duplicate writes.",
+    helpDocuments: "Usage documentation",
+    helpIssues: "Report an issue",
+    copyDocuments: "Copy documentation address",
+    copyIssues: "Copy issue report address",
+    addressCopied: "Address copied.",
+    addressCopyFailed:
+      "Copy failed. Select and copy the address below manually.",
+    helpAddressHint:
+      "Paste these addresses into your browser. Exclude credentials and private memory text from issue reports.",
+    unknown: "Unknown",
     loadingState: "Loading Desktop state…",
     stateUnavailable: "Desktop state is unavailable",
     stateFailed: "Could not load Desktop state",
diff --git a/desktop/ui/src/app/style.css b/desktop/ui/src/app/style.css
index 5481e10268..05be3aea21 100644
--- a/desktop/ui/src/app/style.css
+++ b/desktop/ui/src/app/style.css
@@ -1230,3 +1230,12 @@ footer {
     border-inline-start-color: Highlight;
   }
 }
+
+.help li + li {
+  margin-top: 8px;
+}
+.help-address textarea {
+  display: block;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
diff --git a/desktop/ui/tests/connection-transition.test.tsx b/desktop/ui/tests/connection-transition.test.tsx
new file mode 100644
index 0000000000..f3408d5470
--- /dev/null
+++ b/desktop/ui/tests/connection-transition.test.tsx
@@ -0,0 +1,218 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { act, cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { desktopApi } from "../src/shared/ipc";
+import type { DesktopState } from "../src/generated/ipc";
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn(),
+    check: vi.fn(),
+    remember: vi.fn(),
+    search: vi.fn(),
+    scopes: vi.fn(),
+    selectScope: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
+    cancelScopes: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+const fact = { value: null, error: null };
+const profile = {
+  id: "a",
+  name: "Original",
+  revision: 1,
+  endpoint: "http://127.0.0.1:8000",
+  authentication: "unauthenticated_loopback" as const,
+  caPem: null,
+  compatibility: null,
+  credentialState: "not_required" as const,
+};
+const report = {
+  connectionId: "a",
+  revision: 1,
+  checkedAt: 1,
+  liveness: fact,
+  readiness: fact,
+  identity: fact,
+  capabilities: fact,
+  compatibilityVerified: true,
+  anonymousAccess: true,
+  supportedOperations: [],
+};
+const scope = {
+  scope_id: "scope-a",
+  title: "Scope A",
+  summary: "",
+  version: 1,
+  context_references: [],
+  external_references: [],
+};
+const state: DesktopState = {
+  generation: 1,
+  profiles: [profile],
+  reports: [report],
+  active: { connectionId: "a", generation: 1, report, scope },
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+beforeEach(() => {
+  vi.mocked(desktopApi.state).mockResolvedValue(state);
+});
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  vi.restoreAllMocks();
+});
+
+test.each(["使用此连接", "检查连接"])(
+  "pending %s stays global after leaving the editor and prevents a draft in the stale context",
+  async (action) => {
+    const user = userEvent.setup();
+    let finish!: (next: DesktopState) => void;
+    vi.mocked(desktopApi.check).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+    render(<App />);
+    await user.click(await screen.findByRole("button", { name: "连接" }));
+    await user.click(screen.getByRole("button", { name: /Original http/ }));
+    await user.click(screen.getByRole("button", { name: action }));
+    await user.click(screen.getByRole("button", { name: "记忆" }));
+    expect(
+      screen.getByRole("heading", { name: "正在更新连接状态…" }),
+    ).toBeTruthy();
+    const input = screen.getByRole("textbox", { name: "记忆内容" });
+    expect(input.matches(":disabled")).toBe(true);
+    await user.type(input, "this must not become a discarded draft");
+    expect((input as HTMLTextAreaElement).value).toBe("");
+    expect(
+      screen.getByRole("button", { name: "保存" }).matches(":disabled"),
+    ).toBe(true);
+    expect(
+      screen
+        .getByRole("button", { name: /Scope A scope-a/ })
+        .matches(":disabled"),
+    ).toBe(true);
+    expect(desktopApi.remember).not.toHaveBeenCalled();
+    expect(desktopApi.search).not.toHaveBeenCalled();
+    const next = {
+      ...state,
+      generation: 2,
+      active: { ...state.active!, generation: 2, scope: null },
+    };
+    await act(async () => {
+      finish(next);
+    });
+    expect(
+      screen.queryByRole("heading", { name: "正在更新连接状态…" }),
+    ).toBeNull();
+    const selected = { ...scope, scope_id: "scope-b", title: "Scope B" };
+    vi.mocked(desktopApi.scopes).mockResolvedValue({
+      items: [selected],
+      next_cursor: null,
+    });
+    vi.mocked(desktopApi.selectScope).mockResolvedValue({
+      ...next,
+      generation: 3,
+      active: { ...next.active, generation: 3, scope: selected },
+    });
+    await user.click(screen.getByRole("button", { name: /未选择/ }));
+    const dialog = screen.getByRole("dialog");
+    await user.click(within(dialog).getByRole("button", { name: "查找范围" }));
+    await user.click(within(dialog).getByRole("button", { name: "Scope B" }));
+    const newInput = screen.getByRole("textbox", { name: "记忆内容" });
+    await user.type(newInput, "new target draft");
+    const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+    await user.click(screen.getByRole("button", { name: "观察" }));
+    expect(confirm).toHaveBeenCalledOnce();
+    expect((newInput as HTMLTextAreaElement).value).toBe("new target draft");
+  },
+);
+
+test("a failed connection operation refreshes native state and releases the editing pause", async () => {
+  const user = userEvent.setup();
+  let fail!: (error: unknown) => void;
+  vi.mocked(desktopApi.check).mockImplementationOnce(
+    () =>
+      new Promise((_, reject) => {
+        fail = reject;
+      }),
+  );
+  render(<App />);
+  await user.click(await screen.findByRole("button", { name: "连接" }));
+  await user.click(screen.getByRole("button", { name: /Original http/ }));
+  await user.click(screen.getByRole("button", { name: "使用此连接" }));
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  expect(
+    screen.getByRole("textbox", { name: "记忆内容" }).matches(":disabled"),
+  ).toBe(true);
+  // A busy rejection can precede any native context change.
+  await act(async () => {
+    fail({ code: "busy" });
+  });
+  const input = screen.getByRole("textbox", { name: "记忆内容" });
+  expect(input.matches(":enabled")).toBe(true);
+  expect(
+    screen.queryByRole("heading", { name: "正在更新连接状态…" }),
+  ).toBeNull();
+  await user.type(input, "draft after failure");
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(confirm).toHaveBeenCalledOnce();
+  expect((input as HTMLTextAreaElement).value).toBe("draft after failure");
+});
+
+test("a second rejected check cannot end the first pending connection operation", async () => {
+  const user = userEvent.setup();
+  let finish!: (next: DesktopState) => void;
+  vi.mocked(desktopApi.check)
+    .mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    )
+    .mockRejectedValueOnce({ code: "busy" });
+  render(<App />);
+  await user.click(await screen.findByRole("button", { name: "连接" }));
+  await user.click(screen.getByRole("button", { name: /Original http/ }));
+  await user.click(screen.getByRole("button", { name: "使用此连接" }));
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  await user.click(screen.getByRole("button", { name: "连接" }));
+  await user.click(screen.getByRole("button", { name: /Original http/ }));
+  await user.click(screen.getByRole("button", { name: "使用此连接" }));
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  expect(
+    screen.getByRole("textbox", { name: "记忆内容" }).matches(":disabled"),
+  ).toBe(true);
+  await act(async () => {
+    finish({
+      ...state,
+      generation: 2,
+      active: { ...state.active!, generation: 2, scope: null },
+    });
+  });
+  expect(
+    screen.queryByRole("heading", { name: "正在更新连接状态…" }),
+  ).toBeNull();
+});
diff --git a/desktop/ui/tests/help.test.tsx b/desktop/ui/tests/help.test.tsx
new file mode 100644
index 0000000000..20f055a777
--- /dev/null
+++ b/desktop/ui/tests/help.test.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, expect, test, vi } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Help } from "../src/app/Help";
+import { App } from "../src/app/App";
+import { messages } from "../src/app/messages";
+import { getFoundationInfo } from "../src/shared/ipc";
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: { state: vi.fn().mockRejectedValue({ code: "storage" }) },
+}));
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.clearAllMocks();
+});
+
+test.each(["zh", "en"] as const)(
+  "help explains the journey and copies fixed addresses (%s)",
+  async (language) => {
+    const user = userEvent.setup();
+    const clipboard = vi
+      .spyOn(navigator.clipboard, "writeText")
+      .mockResolvedValue();
+    render(<Help language={language} />);
+    const t = messages[language];
+    expect(screen.getByRole("heading", { name: t.help })).toBeTruthy();
+    expect(screen.getAllByRole("listitem")).toHaveLength(3);
+    expect(screen.getByText(t.helpRecovery)).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: t.copyDocuments }));
+    expect(clipboard).toHaveBeenLastCalledWith(
+      language === "zh"
+        ? "https://github.com/oceanbase/powercontext/blob/master/desktop/README.zh.md"
+        : "https://github.com/oceanbase/powercontext/blob/master/desktop/README.md",
+    );
+    expect(screen.getByRole("status").textContent).toBe(t.addressCopied);
+    await user.click(screen.getByRole("button", { name: t.copyIssues }));
+    expect(clipboard).toHaveBeenLastCalledWith(
+      "https://github.com/oceanbase/powercontext/issues",
+    );
+    expect(screen.getByRole("status").textContent).toBe(t.addressCopied);
+  },
+);
+
+test.each(["zh", "en"] as const)(
+  "failed copies explain manual recovery and keep both addresses visible (%s)",
+  async (language) => {
+    const user = userEvent.setup();
+    vi.spyOn(navigator.clipboard, "writeText").mockRejectedValue(
+      new Error("clipboard unavailable"),
+    );
+    render(<Help language={language} />);
+    const t = messages[language];
+    for (const name of [t.copyDocuments, t.copyIssues]) {
+      await user.click(screen.getByRole("button", { name }));
+      expect(screen.getByRole("alert").textContent).toBe(t.addressCopyFailed);
+      const documents = screen.getByRole("textbox", {
+        name: t.helpDocuments,
+      }) as HTMLTextAreaElement;
+      expect(documents.value).toContain("/desktop/README");
+      expect(
+        (
+          screen.getByRole("textbox", {
+            name: t.helpIssues,
+          }) as HTMLTextAreaElement
+        ).value,
+      ).toBe("https://github.com/oceanbase/powercontext/issues");
+      await user.click(documents);
+      expect(documents.readOnly).toBe(true);
+      expect(documents.selectionStart).toBe(0);
+      expect(documents.selectionEnd).toBe(documents.value.length);
+    }
+  },
+);
+
+test.each([
+  null,
+  {
+    version: "0.2.0-native",
+    phase: "S3",
+    credentialBackend: "unavailable",
+    serverConnected: false,
+  },
+])(
+  "help remains reachable offline and version uses native information (%j)",
+  async (host) => {
+    const user = userEvent.setup();
+    vi.mocked(getFoundationInfo).mockResolvedValueOnce(host);
+    render(<App />);
+    const settings = screen.getByRole("button", { name: "设置与诊断" });
+    expect(settings.closest(".sidebar-bottom")).toBeTruthy();
+    await user.click(settings);
+    await user.selectOptions(screen.getByLabelText("语言"), "en");
+    expect(screen.getByRole("heading", { name: "Usage help" })).toBeTruthy();
+    const version = screen
+      .getByRole("heading", { name: messages.en.version })
+      .closest("section")!;
+    expect(within(version).getByText(host?.version ?? "Unknown")).toBeTruthy();
+    expect(
+      screen
+        .getByRole("button", { name: "Copy documentation address" })
+        .matches(":enabled"),
+    ).toBe(true);
+  },
+);

From 329c0b5beb42ea50fef18918b3db9b99639e8cb7 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 11:35:37 +0800
Subject: [PATCH 06/12] feat(desktop): add local setup entry and offline server
 guidance

---
 desktop/README.md                          |   8 +
 desktop/README.zh.md                       |   8 +
 desktop/VALIDATION.md                      |  12 ++
 desktop/ui/src/app/App.tsx                 |  18 +-
 desktop/ui/src/app/LocalServerSettings.tsx |  61 +++++++
 desktop/ui/src/app/MemoryWorkspace.tsx     |  38 +++--
 desktop/ui/src/app/messages.ts             |  38 +++++
 desktop/ui/src/app/style.css               |   2 +-
 desktop/ui/tests/feedback.test.tsx         |   4 +-
 desktop/ui/tests/local-server.test.tsx     | 185 +++++++++++++++++++++
 10 files changed, 360 insertions(+), 14 deletions(-)
 create mode 100644 desktop/ui/src/app/LocalServerSettings.tsx
 create mode 100644 desktop/ui/tests/local-server.test.tsx

diff --git a/desktop/README.md b/desktop/README.md
index 8785eecc0d..44d152b2e2 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -21,6 +21,14 @@ Settings & diagnostics includes bilingual usage guidance, a locale-specific docu
 
 While a connection operation is pending, a global message remains visible across page changes. You can browse other pages, but Memory editing, saving, searching, exact reads and Scope switching pause until the operation and its native-state refresh finish. This prevents a late activation result from clearing text entered against the old Scope. Once the operation completes, explicitly select an exact Scope if needed. Existing draft confirmations and unknown-write protections continue to apply.
 
+## Local Server preparation
+
+Overview remains the initial page. In disconnected Memories, **Set up locally** opens and focuses **Settings & diagnostics → Local Server**; **Connect an existing Server** opens the existing connection editor. Selecting either path does not install software, activate a connection, run diagnostics or probe readiness.
+
+The Local Server guidance is also available by opening Settings directly, including when native state is loading or unavailable. It explicitly marks Desktop installation, recovery and service management as unavailable; that status makes no claim about an actual local installation or running service. Settings stays at the bottom of the sidebar.
+
+Prepare a Server independently using [Install and run](../docs/en/docs/get-started/install-and-run.md) and [Deploy the Server](../docs/en/docs/operate/deploy-server.md), observing their platform limits. Confirm the actual address, authentication and a qualified Desktop compatibility profile, then save and explicitly activate the connection and select an exact Scope. A running Server alone does not establish Desktop compatibility. Existing independently running Servers do not need to be reinstalled. The in-app Usage help provides a copyable address for this guide.
+
 ## Run the installed preview
 
 Download and extract `desktop-windows-internal-unsigned` from a successful **Desktop validation** Actions run on this branch. The installer is under `src-tauri/target/release/bundle/nsis/`. Its accompanying `.artifacts/windows-smoke.json` records the commit, SHA-256 and signature status; compare the downloaded installer with `Get-FileHash -Algorithm SHA256 <installer-path>`. The current package is unsigned and intended for internal validation.
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index e2a45cae66..c83e33d5c4 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -21,6 +21,14 @@
 
 连接操作等待期间，全局提示在页面切换后持续显示。仍可浏览其他页面，但记忆编辑、保存、搜索、精确读取及 Scope 切换暂停，直到操作及其原生状态刷新完成，避免晚到的激活结果清空在旧 Scope 下新输入的正文。操作完成后，按需显式选择精确 Scope；现有草稿确认和未知写入保护继续生效。
 
+## Local Server 准备说明
+
+默认启动页仍为总览。记忆页未连接时，“本地设置”进入并聚焦“设置与诊断 → Local Server”；“连接已有 Server”进入现有连接编辑器。选择任一路径都不会安装软件、激活连接、执行诊断或探测就绪状态。
+
+也可直接进入设置查看 Local Server 说明；即使原生状态正在加载或不可用，说明仍可访问。区域明确标注 Desktop 安装、恢复及服务管理尚未接入，不据此判断本机是否已安装 Server 或服务是否运行。侧栏设置入口保持在底部。
+
+请按[安装与运行](../docs/zh/docs/get-started/install-and-run.md)及[部署 Server](../docs/zh/docs/operate/deploy-server.md)独立准备 Server，并遵守文档中的平台适用范围。确认实际地址、认证方式和经过验证的 Desktop 兼容配置，再保存、显式激活连接并选择精确 Scope。Server 已运行不代表 Desktop 兼容性已验证；已有独立运行的 Server 无需重复安装。应用内“使用帮助”可复制本说明的文档地址。
+
 ## 直接运行安装版
 
 在本分支的 GitHub Actions「Desktop validation」成功运行中，下载 `desktop-windows-internal-unsigned` 产物并解压，找到 `src-tauri/target/release/bundle/nsis/` 中的安装程序。对应 `.artifacts/windows-smoke.json` 记录提交、安装包 SHA-256 和签名状态，可用 `Get-FileHash -Algorithm SHA256 <安装包路径>` 核对下载文件。当前产物未签名，供内部验证。
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 6e4a253e7d..9f6726ff5a 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -106,6 +106,18 @@ Screenshots of help copy failure and pending activation were inspected. Evidence
 
 Edge 检查覆盖中英文、三种主题和上述三个窗口尺寸的 18 组组合。合成 IPC 与剪贴板桩验证帮助复制、跨页等待、旧上下文不可编辑、完成后显式选择 Scope 及新草稿导航取消；页面没有横向溢出，并检查强制高对比度视图及截图。200% 为等效布局检查。本次未执行原生剪贴板、真实 Server、安装包、IME、屏幕阅读器或 macOS 验收；仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
 
+## Disconnected paths and Local Server guidance (#2102)
+
+On 2026-10-22, the pinned Windows tools above passed all 68 frontend tests, typecheck, lint and production build. Six focused UI tests cover the English/Chinese disconnected Memory choices, focused navigation to the Local Server section, the existing connection editor handoff, Settings access during pending/failed native-state loading, unchanged Overview/default navigation, the editor's discard guard and exact Scope selection for an already active connection. No installer, connection activation, readiness check or local diagnostic is triggered by these navigation paths.
+
+Headless Edge 155.0.4283.62 with synthetic IPC checked 72 combinations: English/Chinese, light/dark/system, native state disconnected/loading/error, and CSS viewports 1180×800, 800×600, 400×400 and 400×300. Both disconnected paths worked, the targeted Local Server heading received focus and remained unobscured, keyboard Tab/Enter reached the connection editor, and the pages had no horizontal overflow. A forced-colors offline view was also checked. Screenshots of the 800×600 disconnected entry and focused Local Server section were inspected. Evidence is under ignored `.artifacts/desktop-shell/local-server*`.
+
+The 400×300 viewport at device scale factor 2 checks layout equivalent to 800×600 at 200%, not installed WebView zoom. Synthetic IPC does not establish real Server, installed-package, IME, screen-reader or macOS acceptance; those were not executed for this change. Repository hooks retain the previously documented Windows Python `ty check` failures; the other hooks passed.
+
+2026-10-22 使用固定工具版本，全部 68 项前端测试、typecheck、lint 和生产构建通过。新增 6 项测试覆盖双语双路径、Local Server 定向焦点、现有连接编辑器接入、原生状态加载／失败时离线可达、默认总览及原有草稿／Scope 保护。进入这些页面不会安装软件、激活连接、执行诊断或探测 readiness。
+
+Edge 合成 IPC 检查覆盖上述 72 组组合；定向焦点未被顶栏遮挡，键盘可继续进入连接编辑器，无横向溢出，并检查了离线强制高对比度视图及截图。200% 为等效布局验证。本次未执行真实 Server、安装包、平台 IME、屏幕阅读器或 macOS 验收。仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index 0bdd2f39f7..656f7e7a9b 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -28,6 +28,7 @@ import observationIcon from "../assets/retrieval.svg";
 import { TopBar } from "./TopBar";
 import { Overview } from "./Overview";
 import { MemoryWorkspace } from "./MemoryWorkspace";
+import { LocalServerSettings } from "./LocalServerSettings";
 import { Help } from "./Help";
 import { Diagnostics } from "./Diagnostics";
 import { Connections } from "./Connections";
@@ -74,6 +75,8 @@ export function App() {
   );
   const activeReport = activeCheckReport(desktop);
   const heading = useRef<HTMLHeadingElement>(null);
+  const localServerHeading = useRef<HTMLHeadingElement>(null);
+  const settingsSection = useRef<"local-server" | undefined>(undefined);
   const scopeDialog = useRef<HTMLDivElement>(null);
   const scopeReturnFocus = useRef<HTMLElement | null>(null);
   const t = messages[language];
@@ -103,7 +106,11 @@ export function App() {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
   useLayoutEffect(() => {
-    heading.current?.focus();
+    const localServer =
+      page === "settings" && settingsSection.current === "local-server";
+    const target = localServer ? localServerHeading.current : heading.current;
+    target?.focus();
+    if (localServer) target?.scrollIntoView?.({ block: "start" });
   }, [page]);
   function openScopes() {
     scopeReturnFocus.current = document.activeElement as HTMLElement;
@@ -160,8 +167,9 @@ export function App() {
           ?.focus();
     };
   }, [scopeOpen]);
-  function navigate(next: Page) {
+  function navigate(next: Page, section?: "local-server") {
     if (next === page || !confirmSwitch()) return;
+    settingsSection.current = section;
     setDirty(false);
     setPage(next);
     setMenu(false);
@@ -335,6 +343,7 @@ export function App() {
               onDirty={setDirty}
               onManageConnections={() => navigate("connections")}
               onOpenScopes={openScopes}
+              onOpenLocalServer={() => navigate("settings", "local-server")}
               contextPending={contextPending}
             />
           )}
@@ -381,6 +390,11 @@ export function App() {
                   </select>
                 </div>
               </section>
+              <LocalServerSettings
+                language={language}
+                headingRef={localServerHeading}
+                onManageConnections={() => navigate("connections")}
+              />
               <Help language={language} />
               <Diagnostics language={language} />
               <section className="card">
diff --git a/desktop/ui/src/app/LocalServerSettings.tsx b/desktop/ui/src/app/LocalServerSettings.tsx
new file mode 100644
index 0000000000..e741bb162c
--- /dev/null
+++ b/desktop/ui/src/app/LocalServerSettings.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Ref } from "react";
+import { messages, type Language } from "./messages";
+import { PageFeedback } from "./PageFeedback";
+
+export function LocalServerSettings({
+  language,
+  headingRef,
+  onManageConnections,
+}: {
+  language: Language;
+  headingRef?: Ref<HTMLHeadingElement>;
+  onManageConnections: () => void;
+}) {
+  const t = messages[language];
+  return (
+    <section
+      id="local-server"
+      className="card stack"
+      aria-labelledby="local-server-heading"
+    >
+      <h2 id="local-server-heading" ref={headingRef} tabIndex={-1}>
+        {t.localServer}
+      </h2>
+      <p>{t.localServerIntro}</p>
+      <PageFeedback
+        compact
+        headingLevel={3}
+        kind="unavailable"
+        title={t.localServerUnavailable}
+      >
+        <p>{t.localServerUnavailableHint}</p>
+      </PageFeedback>
+      <h3>{t.prepareServer}</h3>
+      <ol>
+        <li>{t.prepareServerDocs}</li>
+        <li>{t.prepareServerAddress}</li>
+        <li>{t.prepareServerConnect}</li>
+      </ol>
+      <div className="actions">
+        <button onClick={onManageConnections}>{t.connectExisting}</button>
+      </div>
+      <p className="small">{t.localServerDiagnostics}</p>
+    </section>
+  );
+}
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index ce4da53781..09ff2fa544 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -35,6 +35,7 @@ type Props = {
   onDirty: (dirty: boolean) => void;
   onManageConnections?: () => void;
   onOpenScopes?: () => void;
+  onOpenLocalServer?: () => void;
   contextPending?: boolean;
 };
 export const textBytes = (value: string) =>
@@ -319,19 +320,36 @@ export function MemoryWorkspace(props: Props) {
                 : common.chooseScopeTitle
           }
           action={
-            !active || !active.report.compatibilityVerified
-              ? props.onManageConnections && (
-                  <button onClick={props.onManageConnections}>
-                    {common.chooseConnection}
+            !active ? (
+              <>
+                {props.onOpenLocalServer && (
+                  <button onClick={props.onOpenLocalServer}>
+                    {common.setUpLocally}
                   </button>
-                )
-              : props.onOpenScopes && (
-                  <button onClick={props.onOpenScopes}>
-                    {common.chooseScopeTitle}
+                )}
+                {props.onManageConnections && (
+                  <button onClick={props.onManageConnections}>
+                    {common.connectExisting}
                   </button>
-                )
+                )}
+              </>
+            ) : !active.report.compatibilityVerified ? (
+              props.onManageConnections && (
+                <button onClick={props.onManageConnections}>
+                  {common.chooseConnection}
+                </button>
+              )
+            ) : (
+              props.onOpenScopes && (
+                <button onClick={props.onOpenScopes}>
+                  {common.chooseScopeTitle}
+                </button>
+              )
+            )
           }
-        />
+        >
+          {!active && <p>{common.startPathsHint}</p>}
+        </PageFeedback>
       )}
 
       {record &&
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index 44b655d17e..3f89a76f23 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,6 +16,24 @@
 
 export const messages = {
   zh: {
+    setUpLocally: "本地设置",
+    connectExisting: "连接已有 Server",
+    startPathsHint:
+      "可以查看本地 Server 准备说明，或连接已经运行的本地／远程 Server。两条路径都不会自动安装或激活连接。",
+    localServer: "Local Server",
+    localServerIntro: "即使尚未连接 Server，也可在此查看本地准备说明。",
+    localServerUnavailable: "安装、恢复与服务管理尚未接入",
+    localServerUnavailableHint:
+      "此版本不能在 Desktop 内安装、修复、启动、停止、重启 Server 或设置登录启动。这不表示本机没有安装 Server，也不判断服务是否正在运行。",
+    prepareServer: "独立准备 Server",
+    prepareServerDocs:
+      "通过下方“使用帮助”复制并打开文档，按指引在 Desktop 外独立安装、配置和运行 PowerContext Server。",
+    prepareServerAddress:
+      "确认实际 Server 地址、认证方式及受支持的兼容配置；已有独立运行的 Server 可直接连接，无需重复安装。",
+    prepareServerConnect:
+      "准备完成后，连接已有 Server，保存配置并显式激活，再选择精确 Scope。Desktop 不会自动连接或恢复 Scope。",
+    localServerDiagnostics:
+      "下方本机诊断可手动执行，但不能代替安装、恢复或服务启停；关闭 Desktop 不会停止独立运行的 Server。",
     connectionUpdating: "正在更新连接状态…",
     connectionUpdatingHint:
       "可以浏览其他页面。连接操作完成前，记忆编辑、保存、搜索、精确读取及范围切换暂不可用；完成后请核对当前连接与精确 Scope。",
@@ -199,6 +217,26 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
+    setUpLocally: "Set up locally",
+    connectExisting: "Connect an existing Server",
+    startPathsHint:
+      "Read the local Server preparation guide, or connect an existing local or remote Server. Neither path installs anything or activates a connection automatically.",
+    localServer: "Local Server",
+    localServerIntro:
+      "Local preparation guidance remains available before connecting to a Server.",
+    localServerUnavailable:
+      "Installation, recovery and service management are not integrated",
+    localServerUnavailableHint:
+      "This version cannot install, repair, start, stop or restart a Server or configure login startup from Desktop. This does not mean a Server is absent or determine whether a service is running.",
+    prepareServer: "Prepare a Server independently",
+    prepareServerDocs:
+      "Copy and open the documentation from Usage help below, then follow the guide to install, configure and run PowerContext Server outside Desktop.",
+    prepareServerAddress:
+      "Confirm the actual Server address, authentication method and supported compatibility profile. An independently running Server can be connected without reinstalling it.",
+    prepareServerConnect:
+      "When ready, connect the existing Server, save and explicitly activate its profile, then select an exact Scope. Desktop does not automatically connect or restore a Scope.",
+    localServerDiagnostics:
+      "You can run the local diagnostics below explicitly. They do not install, recover, start or stop services. Closing Desktop leaves an independently running Server active.",
     connectionUpdating: "Updating connection state…",
     connectionUpdatingHint:
       "You can browse other pages. Memory editing, saving, searching, exact reads and Scope switching are unavailable until the connection operation finishes. Then verify the current connection and exact Scope.",
diff --git a/desktop/ui/src/app/style.css b/desktop/ui/src/app/style.css
index 05be3aea21..4d667940ae 100644
--- a/desktop/ui/src/app/style.css
+++ b/desktop/ui/src/app/style.css
@@ -1231,7 +1231,7 @@ footer {
   }
 }
 
-.help li + li {
+.settings li + li {
   margin-top: 8px;
 }
 .help-address textarea {
diff --git a/desktop/ui/tests/feedback.test.tsx b/desktop/ui/tests/feedback.test.tsx
index feb9be01c5..e978d714c0 100644
--- a/desktop/ui/tests/feedback.test.tsx
+++ b/desktop/ui/tests/feedback.test.tsx
@@ -406,7 +406,9 @@ test.each(["disconnected", "unverified", "scope"] as const)(
     const recovery =
       kind === "scope"
         ? "Select an exact Scope first"
-        : "Manage connections and credentials";
+        : kind === "disconnected"
+          ? "Connect an existing Server"
+          : "Manage connections and credentials";
     await user.click(screen.getByRole("button", { name: recovery }));
     expect(kind === "scope" ? choose : manage).toHaveBeenCalledOnce();
     expect(
diff --git a/desktop/ui/tests/local-server.test.tsx b/desktop/ui/tests/local-server.test.tsx
new file mode 100644
index 0000000000..f9205cab38
--- /dev/null
+++ b/desktop/ui/tests/local-server.test.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { desktopApi } from "../src/shared/ipc";
+import { messages } from "../src/app/messages";
+import type { DesktopState } from "../src/generated/ipc";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn(),
+    check: vi.fn(),
+    save: vi.fn(),
+    diagnostics: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+const disconnected: DesktopState = {
+  generation: 0,
+  profiles: [],
+  reports: [],
+  active: null,
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+beforeEach(() => {
+  vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+});
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  vi.restoreAllMocks();
+});
+
+test.each(["zh", "en"] as const)(
+  "disconnected Memory provides local and existing-Server paths without changing Overview (%s)",
+  async (language) => {
+    const user = userEvent.setup();
+    render(<App />);
+    await screen.findByRole("heading", { name: messages.zh.noActiveTitle });
+    expect(
+      screen.getByRole("heading", { level: 1, name: "总览" }),
+    ).toBeTruthy();
+    // Overview retains its original content; the two-path entry belongs to Memory.
+    expect(
+      screen.queryByRole("button", { name: messages.zh.setUpLocally }),
+    ).toBeNull();
+    await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+    await user.selectOptions(screen.getByLabelText("语言"), language);
+    const t = messages[language];
+    await user.click(screen.getByRole("button", { name: t.memories }));
+    expect(screen.getByRole("button", { name: t.setUpLocally })).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: t.connectExisting }),
+    ).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: t.connectExisting }));
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: t.connections }),
+    );
+    expect(
+      screen
+        .getByRole("textbox", {
+          name: language === "zh" ? "连接名称" : "Connection name",
+        })
+        .matches(":enabled"),
+    ).toBe(true);
+    await user.click(screen.getByRole("button", { name: t.memories }));
+    await user.click(screen.getByRole("button", { name: t.setUpLocally }));
+    const region = screen.getByRole("region", { name: "Local Server" });
+    expect(document.activeElement).toBe(
+      within(region).getByRole("heading", { name: "Local Server", level: 2 }),
+    );
+    expect(
+      within(region).getByRole("heading", { name: t.localServerUnavailable }),
+    ).toBeTruthy();
+    expect(within(region).getByText(t.localServerUnavailableHint)).toBeTruthy();
+    expect(within(region).getAllByRole("listitem")).toHaveLength(3);
+    expect(within(region).getAllByRole("button")).toHaveLength(1);
+    expect(
+      screen
+        .getByRole("button", { name: t.settings })
+        .closest(".sidebar-bottom"),
+    ).toBeTruthy();
+    await user.click(
+      within(region).getByRole("button", { name: t.connectExisting }),
+    );
+    expect(
+      screen.getByRole("heading", { level: 1, name: t.connections }),
+    ).toBeTruthy();
+    expect(desktopApi.check).not.toHaveBeenCalled();
+    expect(desktopApi.save).not.toHaveBeenCalled();
+    expect(desktopApi.diagnostics).not.toHaveBeenCalled();
+  },
+);
+
+test.each(["loading", "error"])(
+  "Local Server guidance remains reachable when native state is %s",
+  async (mode) => {
+    const user = userEvent.setup();
+    if (mode === "loading")
+      vi.mocked(desktopApi.state).mockImplementationOnce(
+        () => new Promise(() => {}),
+      );
+    else vi.mocked(desktopApi.state).mockRejectedValueOnce({ code: "storage" });
+    render(<App />);
+    await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+    const region = screen.getByRole("region", { name: "Local Server" });
+    expect(
+      within(region).getByText(messages.zh.localServerUnavailableHint),
+    ).toBeTruthy();
+    expect(
+      within(region)
+        .getByRole("button", { name: "连接已有 Server" })
+        .matches(":enabled"),
+    ).toBe(true);
+    expect(screen.getByRole("heading", { name: "使用帮助" })).toBeTruthy();
+    expect(desktopApi.check).not.toHaveBeenCalled();
+    expect(desktopApi.diagnostics).not.toHaveBeenCalled();
+  },
+);
+
+test("navigating to Settings retains the existing editor discard guard", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "连接" }));
+  const input = screen.getByRole("textbox", { name: "连接名称" });
+  await user.type(input, "unsaved connection");
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+  expect(confirm).toHaveBeenCalledOnce();
+  expect(screen.queryByRole("region", { name: "Local Server" })).toBeNull();
+  expect((input as HTMLInputElement).value).toBe("unsaved connection");
+});
+
+test("an active connection without a Scope still offers exact Scope selection", async () => {
+  const user = userEvent.setup();
+  const fact = { value: null, error: null };
+  vi.mocked(desktopApi.state).mockResolvedValue({
+    ...disconnected,
+    generation: 1,
+    active: {
+      connectionId: "active",
+      generation: 1,
+      scope: null,
+      report: {
+        connectionId: "active",
+        revision: 1,
+        checkedAt: 1,
+        liveness: fact,
+        readiness: fact,
+        identity: fact,
+        capabilities: fact,
+        compatibilityVerified: true,
+        anonymousAccess: true,
+        supportedOperations: [],
+      },
+    },
+  });
+  render(<App />);
+  await screen.findByRole("button", { name: /当前连接: 连接已激活/ });
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  expect(
+    screen.getByRole("button", { name: messages.zh.chooseScopeTitle }),
+  ).toBeTruthy();
+  expect(screen.queryByRole("button", { name: "本地设置" })).toBeNull();
+  expect(screen.queryByRole("button", { name: "连接已有 Server" })).toBeNull();
+});

From 847e61fbbff654ed1a514740b8ee920ebe41b83c Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 12:01:59 +0800
Subject: [PATCH 07/12] fix(desktop): guard scope selection and open targeted
 profiles

---
 desktop/README.md                          |   4 +
 desktop/README.zh.md                       |   4 +
 desktop/VALIDATION.md                      |  12 +
 desktop/ui/src/app/App.tsx                 |  66 +++-
 desktop/ui/src/app/Connections.tsx         |   6 +-
 desktop/ui/src/app/MemoryWorkspace.tsx     |   4 +-
 desktop/ui/src/app/Scopes.tsx              |  29 +-
 desktop/ui/src/app/TopBar.tsx              |   4 +-
 desktop/ui/src/app/messages.ts             |   6 +
 desktop/ui/tests/scope-navigation.test.tsx | 344 +++++++++++++++++++++
 10 files changed, 456 insertions(+), 23 deletions(-)
 create mode 100644 desktop/ui/tests/scope-navigation.test.tsx

diff --git a/desktop/README.md b/desktop/README.md
index 44d152b2e2..4783ba9148 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -21,6 +21,10 @@ Settings & diagnostics includes bilingual usage guidance, a locale-specific docu
 
 While a connection operation is pending, a global message remains visible across page changes. You can browse other pages, but Memory editing, saving, searching, exact reads and Scope switching pause until the operation and its native-state refresh finish. This prevents a late activation result from clearing text entered against the old Scope. Once the operation completes, explicitly select an exact Scope if needed. Existing draft confirmations and unknown-write protections continue to apply.
 
+Selecting a saved profile in the global connection menu opens that exact configuration in the editor, including when Connections is already open. Leaving an unsaved editor or Memory draft requires the existing discard confirmation; cancelling preserves the current editor and text. Selecting a configuration never checks or activates it. Explicitly reselecting the same profile after confirming discard reloads its saved values.
+
+Scope selection also keeps an application-wide pending state. Escape, the close button and the backdrop can close the dialog, but do not cancel an accepted native selection. Memory editing and further Scope switching stay paused until it finishes. Closing a dialog whose trigger is disabled returns focus to the page heading. A late result still updates authoritative native state, while it cannot clear a new connection editor's draft guard. Failures after the dialog has closed appear in the shared error feedback.
+
 ## Local Server preparation
 
 Overview remains the initial page. In disconnected Memories, **Set up locally** opens and focuses **Settings & diagnostics → Local Server**; **Connect an existing Server** opens the existing connection editor. Selecting either path does not install software, activate a connection, run diagnostics or probe readiness.
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index c83e33d5c4..3f14d8fcd7 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -21,6 +21,10 @@
 
 连接操作等待期间，全局提示在页面切换后持续显示。仍可浏览其他页面，但记忆编辑、保存、搜索、精确读取及 Scope 切换暂停，直到操作及其原生状态刷新完成，避免晚到的激活结果清空在旧 Scope 下新输入的正文。操作完成后，按需显式选择精确 Scope；现有草稿确认和未知写入保护继续生效。
 
+从全局连接菜单选择已保存配置，会打开对应配置的编辑器，包括已经位于连接页时。存在连接编辑器或记忆草稿时，继续使用原有丢弃确认；取消后保留当前编辑器及正文。选择配置不会检查或激活连接；确认丢弃后再次选择同一配置，可重新载入已保存的值。
+
+Scope 选择也具有应用层等待状态。Escape、关闭按钮及遮罩可以关闭弹窗，但不会取消已提交的原生选择；完成前暂停记忆编辑及再次切换 Scope。触发按钮被禁用时，关闭弹窗将焦点返回页面标题。晚到结果仍更新原生实际状态，但不会清除新连接编辑器的草稿导航保护；弹窗关闭后发生的失败由共享错误反馈显示。
+
 ## Local Server 准备说明
 
 默认启动页仍为总览。记忆页未连接时，“本地设置”进入并聚焦“设置与诊断 → Local Server”；“连接已有 Server”进入现有连接编辑器。选择任一路径都不会安装软件、激活连接、执行诊断或探测就绪状态。
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 9f6726ff5a..42817ed983 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -118,6 +118,18 @@ The 400×300 viewport at device scale factor 2 checks layout equivalent to 800×
 
 Edge 合成 IPC 检查覆盖上述 72 组组合；定向焦点未被顶栏遮挡，键盘可继续进入连接编辑器，无横向溢出，并检查了离线强制高对比度视图及截图。200% 为等效布局验证。本次未执行真实 Server、安装包、平台 IME、屏幕阅读器或 macOS 验收。仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
 
+## Pending Scope selection and targeted profile navigation (#2102)
+
+On 2026-10-22, the pinned Windows tools above passed all 78 frontend tests, typecheck, lint and production build. Ten focused regressions cover closing pending Scope selection with Escape, the close button or backdrop; old-context editing remains paused, success updates the exact Scope, and a failure after closure appears in shared error feedback. A late Scope result cannot clear a new connection editor's draft guard. Tests also cover cancelling Scope selection before dispatch, opening the requested profile without activating it, cancelled cross-page/same-page profile navigation, repeated selection of the same profile ID, and a late save from a replaced editor.
+
+Headless Edge 155.0.4283.62 exercised 48 synthetic-IPC combinations: English/Chinese, light/dark/system, successful/failed delayed Scope selection, and CSS viewports 1180×800, 800×600, 400×400 and 400×300. After Escape, focus returned to the page heading and old-Scope editing stayed disabled. Navigation opened the requested configuration; pending Scope completion preserved the new editor's draft confirmation. Confirm/cancel, same-ID reselection, and Memory draft navigation were exercised. Profile selection triggered no connection check, activation or save. These paths had no horizontal overflow. Pending-Scope and forced-colors error/editor screenshots were inspected; evidence is under ignored `.artifacts/desktop-shell/scope-profile*` and `scope-pending-closed-800.png`.
+
+The 400×300 viewport at device scale factor 2 is layout equivalent to 800×600 at 200%, not installed WebView zoom. These UI checks use synthetic IPC and do not establish real native/backend, installed-package, IME, screen-reader or macOS qualification; those were not executed for this fix. Rust IPC and persistence formats remain unchanged. Repository hooks retain the previously documented Windows Python `ty check` failures; the other hooks passed.
+
+2026-10-22 使用固定工具版本，全部 78 项前端测试、typecheck、lint 和生产构建通过。新增 10 项回归覆盖 Scope 等待时通过 Escape／关闭按钮／遮罩关闭、旧上下文暂停编辑、成功与失败恢复、晚到结果不清除新连接草稿保护，以及指定配置导航、同页／跨页取消、同 ID 重选和旧编辑器晚到保存。
+
+Edge 合成 IPC 验证上述 48 组组合，检查焦点恢复、指定配置接入、Scope 晚到响应后的草稿保护、确认／取消、同 ID 重选及无隐式连接检查；页面无横向溢出，并检查了等待状态与强制高对比度错误视图截图。200% 为等效布局验证。本次未执行真实原生／后端、安装包、IME、屏幕阅读器或 macOS 验收。仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index 656f7e7a9b..c3bc8952e1 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -56,8 +56,17 @@ export function App() {
   const [dirty, setDirty] = useState(false);
   const [scopeOpen, setScopeOpen] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [connectionSelection, setConnectionSelection] = useState<{
+    id: string;
+    request: number;
+  } | null>(null);
   const [pendingConnections, setPendingConnections] = useState(0);
-  const contextPending = pendingConnections > 0;
+  const [pendingScopes, setPendingScopes] = useState(0);
+  const contextPending = pendingConnections > 0 || pendingScopes > 0;
+  function scopePending(pending: boolean) {
+    if (pending) setNativeError(null);
+    setPendingScopes((current) => current + (pending ? 1 : -1));
+  }
   function connectionPending(pending: boolean) {
     // Pending operations may finish after their editor has unmounted.
     setPendingConnections((current) => current + (pending ? 1 : -1));
@@ -111,7 +120,7 @@ export function App() {
     const target = localServer ? localServerHeading.current : heading.current;
     target?.focus();
     if (localServer) target?.scrollIntoView?.({ block: "start" });
-  }, [page]);
+  }, [page, connectionSelection]);
   function openScopes() {
     scopeReturnFocus.current = document.activeElement as HTMLElement;
     setScopeOpen(true);
@@ -160,16 +169,28 @@ export function App() {
         element.inert = inertValues[index];
       });
       if (scopeReturnFocus.current === null) return;
-      if (previous?.isConnected) previous.focus();
-      else
-        document
-          .querySelector<HTMLButtonElement>(".topbar-group button")
-          ?.focus();
+      const fallback = document.querySelector<HTMLButtonElement>(
+        ".topbar-group button:not(:disabled)",
+      );
+      const target =
+        previous?.isConnected && !previous.matches(":disabled")
+          ? previous
+          : (fallback ?? heading.current);
+      target?.focus();
     };
   }, [scopeOpen]);
-  function navigate(next: Page, section?: "local-server") {
-    if (next === page || !confirmSwitch()) return;
-    settingsSection.current = section;
+  function navigate(
+    next: Page,
+    target?: { section?: "local-server"; profileId?: string },
+  ) {
+    if ((next === page && target?.profileId === undefined) || !confirmSwitch())
+      return;
+    settingsSection.current = target?.section;
+    setConnectionSelection((current) =>
+      target?.profileId === undefined
+        ? null
+        : { id: target.profileId, request: (current?.request ?? 0) + 1 },
+    );
     setDirty(false);
     setPage(next);
     setMenu(false);
@@ -273,7 +294,9 @@ export function App() {
           language={language}
           loading={stateLoading}
           contextPending={contextPending}
-          onManageConnections={() => navigate("connections")}
+          onManageConnections={(profileId) =>
+            navigate("connections", { profileId })
+          }
           onOpenScopes={openScopes}
           onDisconnect={disconnect}
         />
@@ -282,8 +305,17 @@ export function App() {
             {t[page]}
           </h1>
           {contextPending && (
-            <PageFeedback kind="loading" title={t.connectionUpdating}>
-              <p>{t.connectionUpdatingHint}</p>
+            <PageFeedback
+              kind="loading"
+              title={
+                pendingScopes > 0 ? t.selectingScope : t.connectionUpdating
+              }
+            >
+              <p>
+                {pendingScopes > 0
+                  ? t.scopeUpdatingHint
+                  : t.connectionUpdatingHint}
+              </p>
             </PageFeedback>
           )}
           {stateLoading && (
@@ -343,12 +375,16 @@ export function App() {
               onDirty={setDirty}
               onManageConnections={() => navigate("connections")}
               onOpenScopes={openScopes}
-              onOpenLocalServer={() => navigate("settings", "local-server")}
+              onOpenLocalServer={() =>
+                navigate("settings", { section: "local-server" })
+              }
               contextPending={contextPending}
             />
           )}
           {page === "connections" && (
             <Connections
+              key={connectionSelection?.request ?? 0}
+              initialProfileId={connectionSelection?.id}
               state={desktop}
               language={language}
               onState={receiveState}
@@ -443,6 +479,8 @@ export function App() {
               language={language}
               onState={receiveState}
               confirmSwitch={confirmSwitch}
+              onPendingChange={scopePending}
+              onSelectionError={setNativeError}
               onSelected={() => {
                 setDirty(false);
                 setScopeOpen(false);
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index 1b6fa563ce..2d2b87a95f 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -35,6 +35,7 @@ type Props = {
   onState: (value: DesktopState) => void;
   onDirty: (value: boolean) => void;
   onPendingChange?: (pending: boolean) => void;
+  initialProfileId?: string;
 };
 export function Connections({
   state,
@@ -42,9 +43,12 @@ export function Connections({
   onState,
   onDirty,
   onPendingChange,
+  initialProfileId,
 }: Props) {
   const t = connectionMessages[language];
-  const [selected, setSelected] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(
+    initialProfileId ?? null,
+  );
   const profile = state?.profiles.find((p) => p.id === selected);
   const report = state?.reports.find((r) => r.connectionId === selected);
   const [name, setName] = useState("");
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index 09ff2fa544..ac85d2b2ac 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -158,7 +158,7 @@ export function NoteForm({
             <code>{active?.scope?.scope_id}</code>
           </>
         ) : contextPending ? (
-          messages[language].connectionUpdating
+          messages[language].contextUpdating
         ) : (
           t.noScope
         )}
@@ -417,7 +417,7 @@ export function MemoryWorkspace(props: Props) {
         </div>
         <p className="small search-meta">{t.searchSummary}</p>
         {!enabled && (
-          <p>{contextPending ? common.connectionUpdating : t.noScope}</p>
+          <p>{contextPending ? common.contextUpdating : t.noScope}</p>
         )}
         {busy && (
           <PageFeedback
diff --git a/desktop/ui/src/app/Scopes.tsx b/desktop/ui/src/app/Scopes.tsx
index d4b514af6e..137f68fcd1 100644
--- a/desktop/ui/src/app/Scopes.tsx
+++ b/desktop/ui/src/app/Scopes.tsx
@@ -28,6 +28,8 @@ export function Scopes({
   onSelected,
   hideHeading = false,
   onManageConnections,
+  onPendingChange,
+  onSelectionError,
 }: {
   state: DesktopState | null;
   language: Language;
@@ -36,6 +38,8 @@ export function Scopes({
   onSelected?: () => void;
   hideHeading?: boolean;
   onManageConnections?: () => void;
+  onPendingChange?: (pending: boolean) => void;
+  onSelectionError?: (error: unknown) => void;
 }) {
   const t = connectionMessages[language];
   const common = messages[language];
@@ -49,7 +53,15 @@ export function Scopes({
   const [error, setError] = useState<unknown>(null);
   const [busy, setBusy] = useState(false);
   const [operation, setOperation] = useState<"list" | "select">("list");
+  const lifetime = useRef(0);
   const sequence = useRef(0);
+  useEffect(
+    () => () => {
+      lifetime.current++;
+      sequence.current++;
+    },
+    [],
+  );
   const pendingCancellation = useRef(Promise.resolve());
   const currentGeneration = useRef(active?.generation);
   currentGeneration.current = active?.generation;
@@ -101,21 +113,25 @@ export function Scopes({
   }
   async function select(id: string) {
     if (!active || !confirmSwitch()) return;
+    const ticket = lifetime.current;
     setOperation("select");
     setBusy(true);
     setError(null);
+    onPendingChange?.(true);
     try {
       onState(await desktopApi.selectScope(active.generation, id));
-      onSelected?.();
+      if (ticket === lifetime.current) onSelected?.();
     } catch (e) {
-      setError(e);
+      if (ticket === lifetime.current) setError(e);
+      else onSelectionError?.(e);
       try {
         onState(await desktopApi.state());
       } catch {
         /* Preserve the operation error. */
       }
     } finally {
-      setBusy(false);
+      onPendingChange?.(false);
+      if (ticket === lifetime.current) setBusy(false);
     }
   }
   return (
@@ -177,7 +193,12 @@ export function Scopes({
                 <p>{common.scopeIdleHint}</p>
               </PageFeedback>
             )}
-          <fieldset disabled={!active.report.compatibilityVerified}>
+          <fieldset
+            disabled={
+              !active.report.compatibilityVerified ||
+              (busy && operation === "select")
+            }
+          >
             <label>
               {t.scopeQuery}
               <input
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index be73226af0..490d30f5a8 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -25,7 +25,7 @@ type Props = {
   language: Language;
   loading?: boolean;
   contextPending?: boolean;
-  onManageConnections: () => void;
+  onManageConnections: (profileId?: string) => void;
   onOpenScopes: () => void;
   onDisconnect: () => void;
 };
@@ -199,7 +199,7 @@ export function TopBar({
                 tabIndex={-1}
                 onClick={() => {
                   closePopup();
-                  onManageConnections();
+                  onManageConnections(p.id);
                 }}
               >
                 <span>
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index 3f89a76f23..35b3aff783 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,6 +16,9 @@
 
 export const messages = {
   zh: {
+    contextUpdating: "正在更新连接或 Scope 状态…",
+    scopeUpdatingHint:
+      "Scope 选择仍在进行。关闭对话框不会取消已提交的选择；完成前记忆编辑、保存、搜索、精确读取及再次切换 Scope 暂不可用。",
     setUpLocally: "本地设置",
     connectExisting: "连接已有 Server",
     startPathsHint:
@@ -217,6 +220,9 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
+    contextUpdating: "Updating connection or Scope state…",
+    scopeUpdatingHint:
+      "Scope selection is still pending. Closing the dialog does not cancel a submitted selection. Memory editing, saving, searching, exact reads and further Scope changes pause until it finishes.",
     setUpLocally: "Set up locally",
     connectExisting: "Connect an existing Server",
     startPathsHint:
diff --git a/desktop/ui/tests/scope-navigation.test.tsx b/desktop/ui/tests/scope-navigation.test.tsx
new file mode 100644
index 0000000000..b8f900a5cd
--- /dev/null
+++ b/desktop/ui/tests/scope-navigation.test.tsx
@@ -0,0 +1,344 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { act, cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { desktopApi } from "../src/shared/ipc";
+import type { DesktopState } from "../src/generated/ipc";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn(),
+    scopes: vi.fn(),
+    selectScope: vi.fn(),
+    check: vi.fn(),
+    save: vi.fn(),
+    remember: vi.fn(),
+    cancelMemory: vi.fn().mockResolvedValue(undefined),
+    cancelScopes: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+const profileA = {
+  id: "a",
+  revision: 1,
+  name: "First",
+  endpoint: "http://127.0.0.1:8000",
+  authentication: "unauthenticated_loopback" as const,
+  caPem: null,
+  compatibility: null,
+  credentialState: "not_required" as const,
+};
+const profileB = {
+  ...profileA,
+  id: "b",
+  name: "Second",
+  endpoint: "http://127.0.0.1:9000",
+};
+const fact = { value: null, error: null };
+const report = {
+  connectionId: "a",
+  revision: 1,
+  checkedAt: 1,
+  liveness: fact,
+  readiness: fact,
+  identity: fact,
+  capabilities: fact,
+  compatibilityVerified: true,
+  anonymousAccess: true,
+  supportedOperations: [],
+};
+const scopeA = {
+  scope_id: "scope-a",
+  title: "Scope A",
+  summary: "",
+  version: 1,
+  context_references: [],
+  external_references: [],
+};
+const scopeB = { ...scopeA, scope_id: "scope-b", title: "Scope B" };
+const state: DesktopState = {
+  generation: 1,
+  profiles: [profileA, profileB],
+  reports: [report],
+  active: { connectionId: "a", generation: 1, scope: scopeA, report },
+  compatibilityProfiles: [],
+  pendingCredentialCleanup: 0,
+  lastWrite: null,
+};
+const selected: DesktopState = {
+  ...state,
+  generation: 2,
+  active: { ...state.active!, generation: 2, scope: scopeB },
+};
+beforeEach(() => {
+  vi.mocked(desktopApi.state).mockResolvedValue(state);
+  vi.mocked(desktopApi.scopes).mockResolvedValue({
+    items: [scopeB],
+    next_cursor: null,
+  });
+});
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  vi.restoreAllMocks();
+});
+
+async function beginScopeSelection(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  await user.click(
+    await screen.findByRole("button", { name: /Scope A scope-a/ }),
+  );
+  await user.click(screen.getByRole("button", { name: "查找范围" }));
+  await user.click(screen.getByRole("button", { name: "Scope B" }));
+}
+async function chooseProfile(
+  user: ReturnType<typeof userEvent.setup>,
+  name: "First" | "Second",
+) {
+  await user.click(screen.getByRole("button", { name: /当前连接:/ }));
+  await user.click(screen.getByRole("menuitem", { name: new RegExp(name) }));
+}
+
+test.each(["Escape", "close button", "backdrop"])(
+  "pending Scope selection protects Memory after closing with %s",
+  async (close) => {
+    const user = userEvent.setup();
+    let finish!: (next: DesktopState) => void;
+    vi.mocked(desktopApi.selectScope).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+    render(<App />);
+    await beginScopeSelection(user);
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByRole("textbox").matches(":disabled")).toBe(true);
+    if (close === "Escape") await user.keyboard("{Escape}");
+    else if (close === "close button")
+      await user.click(within(dialog).getByRole("button", { name: "关闭" }));
+    else await user.click(document.querySelector(".modal-backdrop")!);
+    expect(screen.queryByRole("dialog")).toBeNull();
+    const input = screen.getByRole("textbox", { name: "记忆内容" });
+    expect(input.matches(":disabled")).toBe(true);
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: "记忆" }),
+    );
+    expect(
+      screen.getByRole("heading", { name: "正在核对并选择精确 Scope…" }),
+    ).toBeTruthy();
+    await user.type(input, "must not enter the old Scope");
+    expect((input as HTMLTextAreaElement).value).toBe("");
+    expect(
+      screen
+        .getByRole("button", { name: /Scope A scope-a/ })
+        .matches(":disabled"),
+    ).toBe(true);
+    await act(async () => {
+      finish(selected);
+    });
+    expect(
+      screen.queryByRole("heading", { name: "正在核对并选择精确 Scope…" }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: /Scope B scope-b/ }),
+    ).toBeTruthy();
+    const current = screen.getByRole("textbox", { name: "记忆内容" });
+    expect(current.matches(":enabled")).toBe(true);
+    await user.type(current, "draft for Scope B");
+    const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+    await user.click(screen.getByRole("button", { name: "观察" }));
+    expect(confirm).toHaveBeenCalledOnce();
+    expect((current as HTMLTextAreaElement).value).toBe("draft for Scope B");
+    expect(desktopApi.selectScope).toHaveBeenCalledTimes(1);
+    expect(desktopApi.remember).not.toHaveBeenCalled();
+  },
+);
+
+test("a Scope failure after closing reports the error and releases the old-context pause", async () => {
+  const user = userEvent.setup();
+  let fail!: (error: unknown) => void;
+  vi.mocked(desktopApi.selectScope).mockImplementationOnce(
+    () =>
+      new Promise((_, reject) => {
+        fail = reject;
+      }),
+  );
+  render(<App />);
+  await beginScopeSelection(user);
+  await user.keyboard("{Escape}");
+  await act(async () => {
+    fail({ code: "forbidden" });
+  });
+  expect(screen.getByRole("alert").textContent).toContain(
+    "当前身份无权执行此操作",
+  );
+  expect(
+    screen.getByRole("textbox", { name: "记忆内容" }).matches(":enabled"),
+  ).toBe(true);
+  expect(screen.getByRole("button", { name: /Scope A scope-a/ })).toBeTruthy();
+});
+
+test("a late Scope result cannot dismiss a connection editor draft created after closing the dialog", async () => {
+  const user = userEvent.setup();
+  let finish!: (next: DesktopState) => void;
+  vi.mocked(desktopApi.selectScope).mockImplementationOnce(
+    () =>
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+  );
+  render(<App />);
+  await beginScopeSelection(user);
+  await user.keyboard("{Escape}");
+  await chooseProfile(user, "Second");
+  const input = screen.getByRole("textbox", { name: "连接名称" });
+  await user.type(input, " new draft");
+  await act(async () => {
+    finish(selected);
+  });
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(confirm).toHaveBeenCalledOnce();
+  expect((input as HTMLInputElement).value).toBe("Second new draft");
+});
+
+test("the global menu opens the requested editor while preserving the active connection", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await screen.findByRole("button", { name: /当前连接: First/ });
+  await chooseProfile(user, "Second");
+  expect(
+    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+      .value,
+  ).toBe("Second");
+  expect(
+    (screen.getByRole("textbox", { name: "Server 地址" }) as HTMLInputElement)
+      .value,
+  ).toBe(profileB.endpoint);
+  expect(screen.getByRole("button", { name: /当前连接: First/ })).toBeTruthy();
+  expect(document.activeElement).toBe(
+    screen.getByRole("heading", { level: 1, name: "连接" }),
+  );
+  expect(desktopApi.check).not.toHaveBeenCalled();
+  expect(desktopApi.save).not.toHaveBeenCalled();
+});
+
+test("same-page external profile navigation confirms drafts and supports repeated selection of the same ID", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await screen.findByRole("button", { name: /当前连接: First/ });
+  await chooseProfile(user, "First");
+  await user.type(screen.getByRole("textbox", { name: "连接名称" }), " draft");
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await chooseProfile(user, "Second");
+  expect(
+    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+      .value,
+  ).toBe("First draft");
+  confirm.mockReturnValue(true);
+  await chooseProfile(user, "Second");
+  await user.type(screen.getByRole("textbox", { name: "连接名称" }), " draft");
+  confirm.mockReturnValue(false);
+  await chooseProfile(user, "Second");
+  expect(
+    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+      .value,
+  ).toBe("Second draft");
+  confirm.mockReturnValue(true);
+  await chooseProfile(user, "Second");
+  expect(
+    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+      .value,
+  ).toBe("Second");
+  expect(desktopApi.check).not.toHaveBeenCalled();
+});
+
+test("a cancelled cross-page profile navigation preserves the Memory draft", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  await screen.findByRole("button", { name: /Scope A scope-a/ });
+  const input = screen.getByRole("textbox", { name: "记忆内容" });
+  await user.type(input, "Memory draft");
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+  await chooseProfile(user, "Second");
+  expect(confirm).toHaveBeenCalledOnce();
+  expect((input as HTMLTextAreaElement).value).toBe("Memory draft");
+  confirm.mockReturnValue(true);
+  await chooseProfile(user, "Second");
+  expect(
+    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+      .value,
+  ).toBe("Second");
+  expect(desktopApi.check).not.toHaveBeenCalled();
+});
+
+test("a late save from a replaced profile editor preserves the requested editor and its draft guard", async () => {
+  const user = userEvent.setup();
+  let finish!: (next: DesktopState) => void;
+  vi.mocked(desktopApi.save).mockImplementationOnce(
+    () =>
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+  );
+  render(<App />);
+  await screen.findByRole("button", { name: /当前连接: First/ });
+  await chooseProfile(user, "First");
+  await user.type(screen.getByRole("textbox", { name: "连接名称" }), " saved");
+  await user.click(screen.getByRole("button", { name: "保存配置" }));
+  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+  await chooseProfile(user, "Second");
+  const input = screen.getByRole("textbox", { name: "连接名称" });
+  await user.type(input, " pending draft");
+  await act(async () => {
+    finish({
+      ...state,
+      generation: 2,
+      profiles: [{ ...profileA, revision: 2, name: "First saved" }, profileB],
+    });
+  });
+  confirm.mockClear().mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: "观察" }));
+  expect(confirm).toHaveBeenCalledOnce();
+  expect((input as HTMLInputElement).value).toBe("Second pending draft");
+});
+
+test("cancelling Scope selection keeps the current draft and never starts a context transition", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  await user.click(screen.getByRole("button", { name: "记忆" }));
+  await screen.findByRole("button", { name: /Scope A scope-a/ });
+  const input = screen.getByRole("textbox", { name: "记忆内容" });
+  await user.type(input, "keep the original Scope draft");
+  vi.spyOn(window, "confirm").mockReturnValue(false);
+  await user.click(screen.getByRole("button", { name: /Scope A scope-a/ }));
+  await user.click(screen.getByRole("button", { name: "查找范围" }));
+  await user.click(screen.getByRole("button", { name: "Scope B" }));
+  expect(desktopApi.selectScope).not.toHaveBeenCalled();
+  expect(
+    screen.queryByRole("heading", { name: "正在核对并选择精确 Scope…" }),
+  ).toBeNull();
+  await user.keyboard("{Escape}");
+  expect(input.matches(":enabled")).toBe(true);
+  expect((input as HTMLTextAreaElement).value).toBe(
+    "keep the original Scope draft",
+  );
+});

From d973fe8b074851ae03a04892236ad9dc92509668 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 13:15:38 +0800
Subject: [PATCH 08/12] fix(desktop): restore macOS navigation and
 confirmations

---
 desktop/README.md                             |   2 +
 desktop/README.zh.md                          |   2 +
 desktop/VALIDATION.md                         |  14 ++
 desktop/src-tauri/src/ipc.rs                  |   7 +-
 desktop/src-tauri/tests/ipc.rs                |  16 +-
 desktop/ui/src/app/App.tsx                    | 141 +++++-----------
 desktop/ui/src/app/Connections.tsx            |  17 +-
 desktop/ui/src/app/MemoryWorkspace.tsx        |  16 +-
 desktop/ui/src/app/Modal.tsx                  | 153 ++++++++++++++++++
 desktop/ui/src/app/Scopes.tsx                 |  11 +-
 desktop/ui/src/app/TopBar.tsx                 |   4 +-
 desktop/ui/src/app/messages.ts                |   6 +
 desktop/ui/src/app/useConfirmation.tsx        |  70 ++++++++
 desktop/ui/tests/confirmation.test.tsx        |  97 +++++++++++
 desktop/ui/tests/confirmation.ts              |  30 ++++
 .../ui/tests/connection-transition.test.tsx   |   9 +-
 desktop/ui/tests/connections.test.tsx         |  28 ++--
 desktop/ui/tests/feedback.test.tsx            |  25 ++-
 desktop/ui/tests/local-server.test.tsx        |   5 +-
 desktop/ui/tests/memory.test.tsx              |  47 +++++-
 desktop/ui/tests/observation.test.tsx         |   7 +-
 desktop/ui/tests/scope-navigation.test.tsx    |  72 +++++----
 22 files changed, 604 insertions(+), 175 deletions(-)
 create mode 100644 desktop/ui/src/app/Modal.tsx
 create mode 100644 desktop/ui/src/app/useConfirmation.tsx
 create mode 100644 desktop/ui/tests/confirmation.test.tsx
 create mode 100644 desktop/ui/tests/confirmation.ts

diff --git a/desktop/README.md b/desktop/README.md
index 4783ba9148..b22ce3b9df 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -15,6 +15,8 @@ Every page uses the same loading, empty, unavailable and error presentation. Loa
 
 Errors explain the affected operation and recovery. Read failures offer an explicit retry; exact reads retain the original Artifact revision. An expired Scope cursor restarts from the first page. Credential, permission and compatibility failures explain the required configuration or authorization change. Save failures keep the draft; unknown writes retain their original target and require the existing confirmation before another submission. Writes are never replayed automatically. Local diagnostic failures offer a retry of the same selected local check and do not indicate remote unavailability.
 
+Draft discard, connection removal and resubmission after an unknown write use an application-owned confirmation dialog in both languages. Cancel is focused initially; Escape or the backdrop cancels, Tab remains within the dialog, and confirming performs only the requested action. The same modal behavior applies to Scope selection. Closing Scope selection restores its actual trigger, or the page heading when that trigger is unavailable.
+
 The global bar shows the active connection, full Server address, Scope title and complete `scope_id` on every page. Identically named Scopes remain distinguishable. Identity, compatibility, liveness and readiness are separate facts; the latest check for the active configuration revision supplies the displayed facts and check time. A healthy Server does not grant operation permissions. Addresses and IDs wrap in small windows. The connection menu supports arrow keys, Home/End and Escape; the Scope dialog constrains focus and restores it when closed.
 
 Settings & diagnostics includes bilingual usage guidance, a locale-specific documentation address and a fixed issue-report address. Copy actions report success or failure; the read-only address fields select their text on focus for manual copying. Help is available without a Server or native connection state. The displayed Desktop version comes from the native host and is Unknown if unavailable.
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index 3f14d8fcd7..fccf6065fb 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -4,6 +4,8 @@
 
 已实现连接配置、显式激活、身份与就绪检查、精确范围选择和本地诊断。已实现共享笔记表单、FTS 搜索和精确版本阅读；原生交互闭环仍待完整验收。当前不是已签名的正式发行版。
 
+丢弃草稿、移除连接配置和未知写入再次提交均使用应用内双语确认框。初始焦点位于“取消”；Escape 或点击遮罩会取消操作，Tab 保持在对话框内，确认后仅执行所请求的操作。Scope 选择使用相同的模态交互；关闭后焦点返回实际触发按钮，按钮不可用时返回页面标题。
+
 ## 观察
 
 侧栏提供总览、连接、记忆、观察入口，“设置与诊断”位于侧栏底部。默认进入总览。“观察”包含运行状态、当前 Scope 库存与用量、本次会话三个标签页。数据视图接入前明确显示尚未可用；进入页面或切换标签不会执行连接检查或本机诊断。观察页面沿用现有中英文和主题设置。
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 42817ed983..0c8cc3ee7c 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -130,6 +130,20 @@ The 400×300 viewport at device scale factor 2 is layout equivalent to 800×600
 
 Edge 合成 IPC 验证上述 48 组组合，检查焦点恢复、指定配置接入、Scope 晚到响应后的草稿保护、确认／取消、同 ID 重选及无隐式连接检查；页面无横向溢出，并检查了等待状态与强制高对比度错误视图截图。200% 为等效布局验证。本次未执行真实原生／后端、安装包、IME、屏幕阅读器或 macOS 验收。仓库钩子仍有既有 Windows Python 类型检查错误，其余通过。
 
+## macOS application navigation and confirmations
+
+On 2026-10-22, macOS 26.5.1 Apple Silicon checks used Node 24.14.1, pnpm 11.13.1 and Rust 1.95.0. Frontend behavior tests, typecheck, lint, generated-contract/icon checks, Rust fmt/clippy and native tests pass. Confirmation tests operate the application dialog rather than replacing a host dialog: they cover bilingual cancel/confirm, Escape, focus containment, retained drafts, two-stage connection removal, unknown-write resubmission, and Scope changes while confirmation is pending.
+
+The actual debug `.app` was built with `pnpm --dir desktop tauri build --debug --bundles app --ci -- --locked`. Its bundled `tauri://localhost` page loads without Vite and its native state/version IPC works. In that packaged WebView, English/Chinese draft navigation and cancel-editing confirmations, explicit discard, Escape cancellation, Tab/Shift+Tab containment, and an 800×600 English confirmation were exercised. After clicking a local diagnostic and then the Scope trigger, Escape restores focus to the Scope trigger. Pending Scope selection and nested confirmation remain covered by UI behavior tests with simulated IPC; no real Server was used for these packaged UI checks.
+
+The native navigation policy permits the platform's local application origin and rejects external, other-platform, credential-bearing and explicitly ported packaged addresses. macOS uses `tauri://localhost`; Windows uses `http://tauri.localhost`. This does not qualify signing/notarization, Intel Mac, IME, VoiceOver, native 200% zoom, Keychain, local CLI diagnostics, or installed Server workflows.
+
+2026-10-22 在 macOS 26.5.1 Apple Silicon 上，使用上述固定工具完成前端行为测试、类型检查、lint、生成合同／图标检查及 Rust fmt、clippy 和原生测试。确认测试实际操作应用内对话框，覆盖双语确认／取消、Escape、焦点循环、草稿保留、两步移除配置、未知写入再次提交，以及确认期间 Scope 改变时不提交旧草稿。
+
+实际构建并启动 debug `.app`，其 `tauri://localhost` 页面不依赖 Vite，原生状态和版本 IPC 正常。在打包 WebView 中验证了双语草稿导航、取消编辑、确认丢弃、Escape 取消、Tab／Shift+Tab 和 800×600 英文确认框；先点击本机诊断再点击 Scope，Escape 后焦点返回实际 Scope 按钮。等待中的 Scope 和嵌套确认由模拟 IPC 的行为测试覆盖；本次打包 UI 检查未连接真实 Server。
+
+导航白名单按平台仅放行本地应用 origin，同时拒绝外部、其他平台、带用户信息或显式端口的打包地址。上述结果不代表签名／公证、Intel Mac、IME、VoiceOver、原生 200% 缩放、Keychain、本机 CLI 诊断或安装版 Server 工作流通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/src-tauri/src/ipc.rs b/desktop/src-tauri/src/ipc.rs
index 4c4258ab57..07572e116d 100644
--- a/desktop/src-tauri/src/ipc.rs
+++ b/desktop/src-tauri/src/ipc.rs
@@ -54,8 +54,11 @@ pub fn foundation_info<R: tauri::Runtime>(
 }
 
 pub fn allowed_navigation(url: &url::Url) -> bool {
-    let packaged =
-        url.scheme() == "http" && url.host_str() == Some("tauri.localhost") && url.port().is_none();
+    let packaged = if cfg!(any(windows, target_os = "android")) {
+        url.scheme() == "http" && url.host_str() == Some("tauri.localhost")
+    } else {
+        url.scheme() == "tauri" && url.host_str() == Some("localhost")
+    } && url.port().is_none();
     let development =
         cfg!(debug_assertions) && url.origin().ascii_serialization() == "http://127.0.0.1:1420";
     (packaged || development) && url.username().is_empty() && url.password().is_none()
diff --git a/desktop/src-tauri/tests/ipc.rs b/desktop/src-tauri/tests/ipc.rs
index 76f2800296..4e0410bac5 100644
--- a/desktop/src-tauri/tests/ipc.rs
+++ b/desktop/src-tauri/tests/ipc.rs
@@ -21,7 +21,7 @@ use tauri::{
     webview::InvokeRequest,
 };
 
-// Tauri mock IPC uses the host platform's local protocol; product navigation remains Windows-only.
+// Tauri uses the host platform's local protocol for both mock IPC and packaged navigation.
 const LOCAL_ORIGIN: &str = if cfg!(any(windows, target_os = "android")) {
     "http://tauri.localhost"
 } else {
@@ -101,12 +101,24 @@ fn blocks_remote_navigation_and_userinfo() {
         "javascript:alert(1)",
         "http://tauri.localhost.evil",
         "http://user@tauri.localhost",
+        "tauri://user@localhost",
+        "tauri://localhost:8000",
+        "tauri://localhost.evil",
+        "https://tauri.localhost",
+        "tauri://remote-host",
     ] {
         assert!(!allowed_navigation(&url.parse().unwrap()));
     }
+    assert!(allowed_navigation(&LOCAL_ORIGIN.parse().unwrap()));
     assert!(allowed_navigation(
-        &"http://tauri.localhost/".parse().unwrap()
+        &format!("{LOCAL_ORIGIN}/index.html").parse().unwrap()
     ));
+    let other_platform = if cfg!(any(windows, target_os = "android")) {
+        "tauri://localhost"
+    } else {
+        "http://tauri.localhost"
+    };
+    assert!(!allowed_navigation(&other_platform.parse().unwrap()));
 }
 
 #[test]
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index c3bc8952e1..b2055fd1d0 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -37,6 +37,8 @@ import { Observation, type ObservationTab } from "./Observation";
 import { connectionMessages } from "./connection-messages";
 import { PageFeedback, ErrorFeedback } from "./PageFeedback";
 import { activeCheckReport } from "./context";
+import { Modal } from "./Modal";
+import { useConfirmation } from "./useConfirmation";
 
 type Page = "home" | "connections" | "memories" | "observation" | "settings";
 type Theme = "light" | "dark" | "system";
@@ -76,8 +78,9 @@ export function App() {
       !current || next.generation >= current.generation ? next : current,
     );
   }
+  const { confirm, confirmation } = useConfirmation(language);
   function confirmSwitch() {
-    return !dirty || window.confirm(connectionMessages[language].discard);
+    return !dirty || confirm(connectionMessages[language].discard);
   }
   const activeProfile = desktop?.profiles.find(
     (p) => p.id === desktop.active?.connectionId,
@@ -86,7 +89,6 @@ export function App() {
   const heading = useRef<HTMLHeadingElement>(null);
   const localServerHeading = useRef<HTMLHeadingElement>(null);
   const settingsSection = useRef<"local-server" | undefined>(undefined);
-  const scopeDialog = useRef<HTMLDivElement>(null);
   const scopeReturnFocus = useRef<HTMLElement | null>(null);
   const t = messages[language];
   const ct = connectionMessages[language];
@@ -121,69 +123,18 @@ export function App() {
     target?.focus();
     if (localServer) target?.scrollIntoView?.({ block: "start" });
   }, [page, connectionSelection]);
-  function openScopes() {
-    scopeReturnFocus.current = document.activeElement as HTMLElement;
+  function openScopes(trigger: HTMLElement) {
+    scopeReturnFocus.current = trigger;
     setScopeOpen(true);
   }
-  useEffect(() => {
-    if (!scopeOpen) return;
-    const previous = scopeReturnFocus.current;
-    const dialog = scopeDialog.current;
-    const background = Array.from(
-      document.querySelector(".app")?.children ?? [],
-    ).filter(
-      (element): element is HTMLElement =>
-        element instanceof HTMLElement &&
-        !element.classList.contains("modal-backdrop"),
-    );
-    const inertValues = background.map((element) => element.inert);
-    background.forEach((element) => {
-      element.inert = true;
-    });
-    dialog?.querySelector<HTMLButtonElement>("button")?.focus();
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setScopeOpen(false);
-      }
-      if (event.key !== "Tab") return;
-      const controls = Array.from(
-        dialog?.querySelectorAll<HTMLElement>(
-          'button, input, select, [tabindex="0"]',
-        ) ?? [],
-      ).filter((element) => !element.matches(":disabled"));
-      const first = controls[0];
-      const last = controls[controls.length - 1];
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last?.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first?.focus();
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      background.forEach((element, index) => {
-        element.inert = inertValues[index];
-      });
-      if (scopeReturnFocus.current === null) return;
-      const fallback = document.querySelector<HTMLButtonElement>(
-        ".topbar-group button:not(:disabled)",
-      );
-      const target =
-        previous?.isConnected && !previous.matches(":disabled")
-          ? previous
-          : (fallback ?? heading.current);
-      target?.focus();
-    };
-  }, [scopeOpen]);
-  function navigate(
+  async function navigate(
     next: Page,
     target?: { section?: "local-server"; profileId?: string },
   ) {
-    if ((next === page && target?.profileId === undefined) || !confirmSwitch())
+    if (
+      (next === page && target?.profileId === undefined) ||
+      !(await confirmSwitch())
+    )
       return;
     settingsSection.current = target?.section;
     setConnectionSelection((current) =>
@@ -195,8 +146,8 @@ export function App() {
     setPage(next);
     setMenu(false);
   }
-  function disconnect() {
-    if (!confirmSwitch()) return;
+  async function disconnect() {
+    if (!(await confirmSwitch())) return;
     connectionPending(true);
     void desktopApi
       .disconnect()
@@ -454,47 +405,37 @@ export function App() {
         </main>
       </div>
       {scopeOpen && (
-        <div
-          className="modal-backdrop"
-          onClick={(event) => {
-            if (event.target === event.currentTarget) setScopeOpen(false);
-          }}
+        <Modal
+          label={ct.scope}
+          onClose={() => setScopeOpen(false)}
+          returnFocus={() => scopeReturnFocus.current}
         >
-          <div
-            className="modal"
-            role="dialog"
-            aria-modal="true"
-            aria-label={ct.scope}
-            ref={scopeDialog}
-          >
-            <div className="modal-heading">
-              <h2>{ct.scope}</h2>
-              <button onClick={() => setScopeOpen(false)}>
-                {t.closeDialog}
-              </button>
-            </div>
-            <Scopes
-              key={`scopes-${desktop?.active?.generation ?? "none"}`}
-              state={desktop}
-              language={language}
-              onState={receiveState}
-              confirmSwitch={confirmSwitch}
-              onPendingChange={scopePending}
-              onSelectionError={setNativeError}
-              onSelected={() => {
-                setDirty(false);
-                setScopeOpen(false);
-              }}
-              hideHeading
-              onManageConnections={() => {
-                scopeReturnFocus.current = null;
-                setScopeOpen(false);
-                navigate("connections");
-              }}
-            />
+          <div className="modal-heading">
+            <h2>{ct.scope}</h2>
+            <button onClick={() => setScopeOpen(false)}>{t.closeDialog}</button>
           </div>
-        </div>
+          <Scopes
+            key={`scopes-${desktop?.active?.generation ?? "none"}`}
+            state={desktop}
+            language={language}
+            onState={receiveState}
+            confirmSwitch={confirmSwitch}
+            onPendingChange={scopePending}
+            onSelectionError={setNativeError}
+            onSelected={() => {
+              setDirty(false);
+              setScopeOpen(false);
+            }}
+            hideHeading
+            onManageConnections={() => {
+              scopeReturnFocus.current = null;
+              setScopeOpen(false);
+              navigate("connections");
+            }}
+          />
+        </Modal>
       )}
+      {confirmation}
     </div>
   );
 }
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index 2d2b87a95f..8916c1d454 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -27,6 +27,7 @@ import { desktopApi } from "../shared/ipc";
 import { connectionMessages, connectionError } from "./connection-messages";
 import { messages, type Language } from "./messages";
 import { PageFeedback, ErrorFeedback } from "./PageFeedback";
+import { useConfirmation } from "./useConfirmation";
 import connectionsIcon from "../assets/connections.svg";
 
 type Props = {
@@ -46,6 +47,7 @@ export function Connections({
   initialProfileId,
 }: Props) {
   const t = connectionMessages[language];
+  const { confirm, confirmation } = useConfirmation(language);
   const [selected, setSelected] = useState<string | null>(
     initialProfileId ?? null,
   );
@@ -107,8 +109,8 @@ export function Connections({
       }
     }
   }
-  function select(id: string | null) {
-    if (dirty && !window.confirm(t.discard)) return;
+  async function select(id: string | null) {
+    if (dirty && !(await confirm(t.discard))) return;
     setSecret("");
     setSelected(id);
     reset(state?.profiles.find((p) => p.id === id));
@@ -189,6 +191,7 @@ export function Connections({
     selectedCompatibility?.contractSha256 !== contractSha256;
   return (
     <div className="connection-grid">
+      {confirmation}
       <section className="card stack">
         <div className="card-heading">
           <h2>{t.savedConnections}</h2>
@@ -423,8 +426,8 @@ export function Connections({
               {t.save}
             </button>
             <button
-              onClick={() => {
-                if (!dirty || window.confirm(t.discard)) reset(profile);
+              onClick={async () => {
+                if (!dirty || (await confirm(t.discard))) reset(profile);
               }}
             >
               {t.cancel}
@@ -526,9 +529,9 @@ export function Connections({
               <button
                 className="link-danger"
                 disabled={busy}
-                onClick={() => {
-                  if (dirty && !window.confirm(t.discard)) return;
-                  if (window.confirm(t.removeConfirm))
+                onClick={async () => {
+                  if (dirty && !(await confirm(t.discard))) return;
+                  if (await confirm(t.removeConfirm))
                     void action(() =>
                       desktopApi.remove(profile.id, profile.revision),
                     ).then((next) => {
diff --git a/desktop/ui/src/app/MemoryWorkspace.tsx b/desktop/ui/src/app/MemoryWorkspace.tsx
index ac85d2b2ac..6e35257068 100644
--- a/desktop/ui/src/app/MemoryWorkspace.tsx
+++ b/desktop/ui/src/app/MemoryWorkspace.tsx
@@ -27,6 +27,7 @@ import { connectionError } from "./connection-messages";
 import { memoryMessages } from "./memory-messages";
 import { messages, type Language } from "./messages";
 import { PageFeedback, ErrorFeedback } from "./PageFeedback";
+import { useConfirmation } from "./useConfirmation";
 import memoryIcon from "../assets/memory.svg";
 type Props = {
   state: DesktopState | null;
@@ -34,7 +35,7 @@ type Props = {
   onState: (state: DesktopState) => void;
   onDirty: (dirty: boolean) => void;
   onManageConnections?: () => void;
-  onOpenScopes?: () => void;
+  onOpenScopes?: (trigger: HTMLElement) => void;
   onOpenLocalServer?: () => void;
   contextPending?: boolean;
 };
@@ -48,6 +49,7 @@ export function NoteForm({
   contextPending = false,
 }: Props) {
   const t = memoryMessages[language];
+  const { confirm, confirmation } = useConfirmation(language);
   const active = state?.active;
   const profile = state?.profiles.find((p) => p.id === active?.connectionId);
   const [text, setText] = useState("");
@@ -80,14 +82,15 @@ export function NoteForm({
       setError({ code: "invalid_input" });
       return;
     }
+    const original = active.generation;
+    const ticket = lifetime.current;
     if (
       (outcome?.record.status === "unknown" ||
         state?.lastWrite?.status === "unknown") &&
-      !window.confirm(t.retry)
+      !(await confirm(t.retry))
     )
       return;
-    const original = active.generation;
-    const ticket = lifetime.current;
+    if (ticket !== lifetime.current || generation.current !== original) return;
     const isCurrent = () =>
       ticket === lifetime.current && generation.current === original;
     submitting.current = true;
@@ -120,6 +123,7 @@ export function NoteForm({
   }
   return (
     <section className="card stack">
+      {confirmation}
       <h2>{t.saveOne}</h2>
       <div className="save-row">
         <label>
@@ -341,7 +345,9 @@ export function MemoryWorkspace(props: Props) {
               )
             ) : (
               props.onOpenScopes && (
-                <button onClick={props.onOpenScopes}>
+                <button
+                  onClick={(event) => props.onOpenScopes?.(event.currentTarget)}
+                >
                   {common.chooseScopeTitle}
                 </button>
               )
diff --git a/desktop/ui/src/app/Modal.tsx b/desktop/ui/src/app/Modal.tsx
new file mode 100644
index 0000000000..8dc2afc0ec
--- /dev/null
+++ b/desktop/ui/src/app/Modal.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useLayoutEffect, useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+// Nested dialogs can close in the same React commit, in either cleanup order.
+const backgrounds = new WeakMap<
+  HTMLElement,
+  { count: number; inert: boolean; hidden: string | null }
+>();
+
+export function Modal({
+  label,
+  role = "dialog",
+  onClose,
+  descriptionId,
+  returnFocus,
+  children,
+}: {
+  label: string;
+  role?: "dialog" | "alertdialog";
+  onClose: () => void;
+  descriptionId?: string;
+  returnFocus?: () => HTMLElement | null;
+  children: ReactNode;
+}) {
+  const backdrop = useRef<HTMLDivElement>(null);
+  const dialog = useRef<HTMLDivElement>(null);
+  const restore = useRef(returnFocus);
+  restore.current = returnFocus;
+  const close = useRef(onClose);
+  close.current = onClose;
+  useLayoutEffect(() => {
+    const previous = document.activeElement;
+    const background = Array.from(document.body.children).filter(
+      (element): element is HTMLElement =>
+        element instanceof HTMLElement && element !== backdrop.current,
+    );
+    background.forEach((element) => {
+      const saved = backgrounds.get(element) ?? {
+        count: 0,
+        inert: element.inert,
+        hidden: element.getAttribute("aria-hidden"),
+      };
+      saved.count++;
+      backgrounds.set(element, saved);
+      element.inert = true;
+      element.setAttribute("aria-hidden", "true");
+    });
+    function onKeyDown(event: KeyboardEvent) {
+      if (backdrop.current?.inert) return;
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        event.preventDefault();
+        close.current();
+      }
+      if (event.key !== "Tab") return;
+      const controls = Array.from(
+        dialog.current?.querySelectorAll<HTMLElement>(
+          'button, input, select, textarea, a[href], [tabindex="0"]',
+        ) ?? [],
+      ).filter(
+        (element) =>
+          !element.matches(":disabled") && !element.closest("[hidden]"),
+      );
+      const first = controls[0];
+      const last = controls[controls.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (
+        (!event.shiftKey && document.activeElement === last) ||
+        !dialog.current?.contains(document.activeElement)
+      ) {
+        event.preventDefault();
+        first?.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    dialog.current?.querySelector<HTMLElement>("button")?.focus();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      background.forEach((element) => {
+        const saved = backgrounds.get(element)!;
+        if (--saved.count > 0) return;
+        backgrounds.delete(element);
+        element.inert = saved.inert;
+        if (saved.hidden === null) element.removeAttribute("aria-hidden");
+        else element.setAttribute("aria-hidden", saved.hidden);
+      });
+      const target = restore.current ? restore.current() : previous;
+      if (target === null) return;
+      const fallback =
+        Array.from(
+          document.querySelectorAll<HTMLElement>(
+            '[role="dialog"] button:not(:disabled)',
+          ),
+        ).find(
+          (element) =>
+            !backdrop.current?.contains(element) &&
+            !element.closest('[inert], [aria-hidden="true"]'),
+        ) ?? document.querySelector<HTMLElement>("main h1");
+      for (const candidate of [target, fallback]) {
+        if (
+          candidate instanceof HTMLElement &&
+          candidate.isConnected &&
+          candidate !== document.body &&
+          candidate !== document.documentElement &&
+          !candidate.matches(":disabled") &&
+          !candidate.closest('[inert], [aria-hidden="true"]')
+        ) {
+          candidate.focus();
+          if (document.activeElement === candidate) break;
+        }
+      }
+    };
+  }, []);
+  return createPortal(
+    <div
+      className="modal-backdrop"
+      ref={backdrop}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="modal"
+        role={role}
+        aria-modal="true"
+        aria-label={label}
+        aria-describedby={descriptionId}
+        ref={dialog}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/desktop/ui/src/app/Scopes.tsx b/desktop/ui/src/app/Scopes.tsx
index 137f68fcd1..3e05758f17 100644
--- a/desktop/ui/src/app/Scopes.tsx
+++ b/desktop/ui/src/app/Scopes.tsx
@@ -34,7 +34,7 @@ export function Scopes({
   state: DesktopState | null;
   language: Language;
   onState: (state: DesktopState) => void;
-  confirmSwitch: () => boolean;
+  confirmSwitch: () => boolean | Promise<boolean>;
   onSelected?: () => void;
   hideHeading?: boolean;
   onManageConnections?: () => void;
@@ -112,8 +112,15 @@ export function Scopes({
     }
   }
   async function select(id: string) {
-    if (!active || !confirmSwitch()) return;
+    if (!active) return;
     const ticket = lifetime.current;
+    const generation = active.generation;
+    if (
+      !(await confirmSwitch()) ||
+      ticket !== lifetime.current ||
+      generation !== currentGeneration.current
+    )
+      return;
     setOperation("select");
     setBusy(true);
     setError(null);
diff --git a/desktop/ui/src/app/TopBar.tsx b/desktop/ui/src/app/TopBar.tsx
index 490d30f5a8..f8c2a568bb 100644
--- a/desktop/ui/src/app/TopBar.tsx
+++ b/desktop/ui/src/app/TopBar.tsx
@@ -26,7 +26,7 @@ type Props = {
   loading?: boolean;
   contextPending?: boolean;
   onManageConnections: (profileId?: string) => void;
-  onOpenScopes: () => void;
+  onOpenScopes: (trigger: HTMLElement) => void;
   onDisconnect: () => void;
 };
 export function TopBar({
@@ -253,7 +253,7 @@ export function TopBar({
         <span className="topbar-label">{t.scopeLabel}</span>
         <button
           className="menu-trigger scope-trigger"
-          onClick={onOpenScopes}
+          onClick={(event) => onOpenScopes(event.currentTarget)}
           disabled={!state || contextPending}
           aria-haspopup="dialog"
         >
diff --git a/desktop/ui/src/app/messages.ts b/desktop/ui/src/app/messages.ts
index 35b3aff783..096a350258 100644
--- a/desktop/ui/src/app/messages.ts
+++ b/desktop/ui/src/app/messages.ts
@@ -16,6 +16,9 @@
 
 export const messages = {
   zh: {
+    confirmTitle: "确认操作",
+    cancelAction: "取消",
+    confirmAction: "确认",
     contextUpdating: "正在更新连接或 Scope 状态…",
     scopeUpdatingHint:
       "Scope 选择仍在进行。关闭对话框不会取消已提交的选择；完成前记忆编辑、保存、搜索、精确读取及再次切换 Scope 暂不可用。",
@@ -220,6 +223,9 @@ export const messages = {
       "连接已有的 PowerContext Server 并选择精确范围后，即可保存和查找记忆。",
   },
   en: {
+    confirmTitle: "Confirm action",
+    cancelAction: "Cancel",
+    confirmAction: "Confirm",
     contextUpdating: "Updating connection or Scope state…",
     scopeUpdatingHint:
       "Scope selection is still pending. Closing the dialog does not cancel a submitted selection. Memory editing, saving, searching, exact reads and further Scope changes pause until it finishes.",
diff --git a/desktop/ui/src/app/useConfirmation.tsx b/desktop/ui/src/app/useConfirmation.tsx
new file mode 100644
index 0000000000..ea47573e73
--- /dev/null
+++ b/desktop/ui/src/app/useConfirmation.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { messages, type Language } from "./messages";
+import { Modal } from "./Modal";
+
+export function useConfirmation(language: Language) {
+  const [request, setRequest] = useState<{
+    message: string;
+    id: number;
+  } | null>(null);
+  const sequence = useRef(0);
+  const descriptionId = useId();
+  const pending = useRef<((answer: boolean) => void) | null>(null);
+  const confirm = useCallback((text: string): Promise<boolean> => {
+    if (pending.current) return Promise.resolve(false);
+    return new Promise((resolve) => {
+      pending.current = resolve;
+      setRequest({ message: text, id: ++sequence.current });
+    });
+  }, []);
+  useEffect(
+    () => () => {
+      pending.current?.(false);
+      pending.current = null;
+    },
+    [],
+  );
+  function answer(value: boolean) {
+    const resolve = pending.current;
+    pending.current = null;
+    setRequest(null);
+    resolve?.(value);
+  }
+  const t = messages[language];
+  const confirmation =
+    request === null ? null : (
+      <Modal
+        key={request.id}
+        label={t.confirmTitle}
+        role="alertdialog"
+        descriptionId={descriptionId}
+        onClose={() => answer(false)}
+      >
+        <h2>{t.confirmTitle}</h2>
+        <p id={descriptionId}>{request.message}</p>
+        <div className="actions">
+          <button onClick={() => answer(false)}>{t.cancelAction}</button>
+          <button className="primary" onClick={() => answer(true)}>
+            {t.confirmAction}
+          </button>
+        </div>
+      </Modal>
+    );
+  return { confirm, confirmation };
+}
diff --git a/desktop/ui/tests/confirmation.test.tsx b/desktop/ui/tests/confirmation.test.tsx
new file mode 100644
index 0000000000..9c1985e6b1
--- /dev/null
+++ b/desktop/ui/tests/confirmation.test.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { afterEach, expect, test, vi } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { App } from "../src/app/App";
+import { answerConfirmation } from "./confirmation";
+
+vi.mock("../src/shared/ipc", () => ({
+  getFoundationInfo: vi.fn().mockResolvedValue(null),
+  desktopApi: {
+    state: vi.fn().mockResolvedValue({
+      generation: 0,
+      profiles: [],
+      reports: [],
+      active: null,
+      compatibilityProfiles: [],
+      pendingCredentialCleanup: 0,
+      lastWrite: null,
+    }),
+  },
+}));
+afterEach(cleanup);
+
+test.each(["zh", "en"])(
+  "%s discard dialogs support keyboard cancellation and explicit confirmation",
+  async (language) => {
+    const user = userEvent.setup();
+    render(<App />);
+    if (language === "en") {
+      await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+      await user.selectOptions(screen.getByLabelText("语言"), "en");
+    }
+    await user.click(
+      screen.getByRole("button", {
+        name: language === "zh" ? "连接" : "Connections",
+      }),
+    );
+    const input = screen.getByRole("textbox", {
+      name: language === "zh" ? "连接名称" : "Connection name",
+    });
+    await user.type(input, "unsaved Chinese 中文");
+    await user.click(
+      screen.getByRole("button", {
+        name: language === "zh" ? "观察" : "Observation",
+      }),
+    );
+    const dialog = screen.getByRole("alertdialog", {
+      name: language === "zh" ? "确认操作" : "Confirm action",
+    });
+    expect(dialog.textContent).toContain(
+      language === "zh" ? "丢弃尚未保存的输入？" : "Discard unsaved input?",
+    );
+    const cancel = within(dialog).getByRole("button", {
+      name: language === "zh" ? "取消" : "Cancel",
+    });
+    const confirm = within(dialog).getByRole("button", {
+      name: language === "zh" ? "确认" : "Confirm",
+    });
+    expect(document.activeElement).toBe(cancel);
+    await user.keyboard("{Shift>}{Tab}{/Shift}");
+    expect(document.activeElement).toBe(confirm);
+    await user.keyboard("{Tab}");
+    expect(document.activeElement).toBe(cancel);
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    expect((input as HTMLInputElement).value).toBe("unsaved Chinese 中文");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    await user.click(
+      screen.getByRole("button", {
+        name: language === "zh" ? "取消编辑" : "Cancel editing",
+      }),
+    );
+    await answerConfirmation(user, true);
+    expect((input as HTMLInputElement).value).toBe("");
+    await user.click(
+      screen.getByRole("button", {
+        name: language === "zh" ? "观察" : "Observation",
+      }),
+    );
+    expect(screen.getByRole("tablist")).toBeTruthy();
+  },
+);
diff --git a/desktop/ui/tests/confirmation.ts b/desktop/ui/tests/confirmation.ts
new file mode 100644
index 0000000000..6de7265558
--- /dev/null
+++ b/desktop/ui/tests/confirmation.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2026 OceanBase.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { screen, within } from "@testing-library/react";
+import type userEvent from "@testing-library/user-event";
+
+export async function answerConfirmation(
+  user: ReturnType<typeof userEvent.setup>,
+  answer: boolean,
+) {
+  const dialog = screen.getByRole("alertdialog");
+  await user.click(
+    within(dialog).getByRole("button", {
+      name: answer ? /^(确认|Confirm)$/ : /^(取消|Cancel)$/,
+    }),
+  );
+}
diff --git a/desktop/ui/tests/connection-transition.test.tsx b/desktop/ui/tests/connection-transition.test.tsx
index f3408d5470..b329203d7b 100644
--- a/desktop/ui/tests/connection-transition.test.tsx
+++ b/desktop/ui/tests/connection-transition.test.tsx
@@ -17,6 +17,7 @@
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { act, cleanup, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { desktopApi } from "../src/shared/ipc";
 import type { DesktopState } from "../src/generated/ipc";
@@ -142,9 +143,9 @@ test.each(["使用此连接", "检查连接"])(
     await user.click(within(dialog).getByRole("button", { name: "Scope B" }));
     const newInput = screen.getByRole("textbox", { name: "记忆内容" });
     await user.type(newInput, "new target draft");
-    const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
     await user.click(screen.getByRole("button", { name: "观察" }));
-    expect(confirm).toHaveBeenCalledOnce();
+    await answerConfirmation(user, false);
     expect((newInput as HTMLTextAreaElement).value).toBe("new target draft");
   },
 );
@@ -176,9 +177,9 @@ test("a failed connection operation refreshes native state and releases the edit
     screen.queryByRole("heading", { name: "正在更新连接状态…" }),
   ).toBeNull();
   await user.type(input, "draft after failure");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: "观察" }));
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect((input as HTMLTextAreaElement).value).toBe("draft after failure");
 });
 
diff --git a/desktop/ui/tests/connections.test.tsx b/desktop/ui/tests/connections.test.tsx
index af68391e95..72eb3b0c40 100644
--- a/desktop/ui/tests/connections.test.tsx
+++ b/desktop/ui/tests/connections.test.tsx
@@ -24,6 +24,7 @@ import {
   waitFor,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { Connections } from "../src/app/Connections";
 import { desktopApi } from "../src/shared/ipc";
@@ -213,8 +214,9 @@ test("canceling discard leaves the saved connection and its draft intact", async
   show();
   await user.click(screen.getByRole("button", { name: /Original/ }));
   await user.type(screen.getByLabelText("Connection name"), " draft");
-  vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: "Remove connection" }));
+  await answerConfirmation(user, false);
   expect(desktopApi.remove).not.toHaveBeenCalled();
   expect(
     (screen.getByLabelText("Connection name") as HTMLInputElement).value,
@@ -230,14 +232,19 @@ test("confirmed removal clears the form without asking to discard after deletion
   });
   await user.click(screen.getByRole("button", { name: /Original/ }));
   await user.type(screen.getByLabelText("Connection name"), " draft");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+
   await user.click(screen.getByRole("button", { name: "Remove connection" }));
+  expect(screen.getByRole("alertdialog").textContent).toContain(
+    "Discard unsaved input?",
+  );
+  await answerConfirmation(user, true);
+  expect(screen.getByRole("alertdialog").textContent).toContain(
+    "Remove only this Desktop configuration",
+  );
+  await answerConfirmation(user, true);
   expect(desktopApi.remove).toHaveBeenCalledWith(profile.id, 1);
   expect(onState).toHaveBeenCalled();
-  expect(confirm.mock.calls.map(([message]) => message)).toEqual([
-    "Discard unsaved input?",
-    "Remove only this Desktop configuration and its credentials, without stopping the service or deleting business data?",
-  ]);
+  expect(screen.queryByRole("alertdialog")).toBeNull();
   expect(
     (screen.getByLabelText("Connection name") as HTMLInputElement).value,
   ).toBe("");
@@ -252,8 +259,9 @@ test("missing credentials cannot be retained and entering a new one never activa
     "synthetic-test-secret",
   );
   expect(desktopApi.check).not.toHaveBeenCalled();
-  vi.spyOn(window, "confirm").mockReturnValue(true);
+
   await user.click(screen.getByRole("button", { name: "Cancel editing" }));
+  await answerConfirmation(user, true);
   expect(
     (screen.getByLabelText("New Bearer credential") as HTMLInputElement).value,
   ).toBe("");
@@ -289,7 +297,7 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
     finish = resolve;
   });
   vi.mocked(desktopApi.save).mockReturnValueOnce(pendingSave);
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+
   render(<App />);
   await user.click(screen.getByRole("button", { name: "连接" }));
   // Let navigation finish moving focus before keyboard input begins.
@@ -312,6 +320,7 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
     }),
   );
   await user.click(screen.getByRole("button", { name: "总览" }));
+  await answerConfirmation(user, true);
   await waitFor(() =>
     expect(document.activeElement).toBe(
       screen.getByRole("heading", { level: 1, name: "总览" }),
@@ -327,9 +336,8 @@ test("a save from the previous connection editor cannot dismiss a new draft", as
   await act(async () => {
     finish(state({ ...profile, name: "First" }));
   });
-  confirm.mockClear().mockReturnValue(false);
   await user.click(screen.getByRole("button", { name: "总览" }));
-  expect(confirm).toHaveBeenCalled();
+  await answerConfirmation(user, false);
   expect((screen.getByLabelText("连接名称") as HTMLInputElement).value).toBe(
     "New draft",
   );
diff --git a/desktop/ui/tests/feedback.test.tsx b/desktop/ui/tests/feedback.test.tsx
index e978d714c0..95897ae4d9 100644
--- a/desktop/ui/tests/feedback.test.tsx
+++ b/desktop/ui/tests/feedback.test.tsx
@@ -15,7 +15,14 @@
  */
 
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
-import { act, cleanup, render, screen, within } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  cleanup,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { App } from "../src/app/App";
 import { TopBar } from "../src/app/TopBar";
@@ -467,3 +474,19 @@ test("Scope recovery navigation focuses the destination title", async () => {
     screen.getByRole("heading", { level: 1, name: "连接" }),
   );
 });
+
+test("clicking Scope with body focus restores the actual trigger after Escape", async () => {
+  const user = userEvent.setup();
+  render(<App />);
+  const trigger = await screen.findByRole("button", {
+    name: /Same title exact-scope-a/,
+  });
+  (document.activeElement as HTMLElement).blur();
+  expect(document.activeElement).toBe(document.body);
+  fireEvent.click(trigger);
+  expect(document.activeElement).toBe(
+    within(screen.getByRole("dialog")).getByRole("button", { name: "关闭" }),
+  );
+  await user.keyboard("{Escape}");
+  expect(document.activeElement).toBe(trigger);
+});
diff --git a/desktop/ui/tests/local-server.test.tsx b/desktop/ui/tests/local-server.test.tsx
index f9205cab38..9cceffbf0c 100644
--- a/desktop/ui/tests/local-server.test.tsx
+++ b/desktop/ui/tests/local-server.test.tsx
@@ -17,6 +17,7 @@
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { cleanup, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { desktopApi } from "../src/shared/ipc";
 import { messages } from "../src/app/messages";
@@ -143,9 +144,9 @@ test("navigating to Settings retains the existing editor discard guard", async (
   await user.click(screen.getByRole("button", { name: "连接" }));
   const input = screen.getByRole("textbox", { name: "连接名称" });
   await user.type(input, "unsaved connection");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: "设置与诊断" }));
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect(screen.queryByRole("region", { name: "Local Server" })).toBeNull();
   expect((input as HTMLInputElement).value).toBe("unsaved connection");
 });
diff --git a/desktop/ui/tests/memory.test.tsx b/desktop/ui/tests/memory.test.tsx
index 2886667879..10c11f53c4 100644
--- a/desktop/ui/tests/memory.test.tsx
+++ b/desktop/ui/tests/memory.test.tsx
@@ -29,6 +29,7 @@ import {
   MemoryWorkspace,
   textBytes,
 } from "../src/app/MemoryWorkspace";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { Overview } from "../src/app/Overview";
 import { desktopApi } from "../src/shared/ipc";
@@ -303,16 +304,15 @@ test("unknown save retains the draft and does not replay automatically", async (
     (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
   ).toBe("preserve me");
   expect(desktopApi.remember).toHaveBeenCalledTimes(1);
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: "Save" }));
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect(desktopApi.remember).toHaveBeenCalledTimes(1);
   expect(
     (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
   ).toBe("preserve me");
-  confirm.mockReturnValue(true);
   await user.click(screen.getByRole("button", { name: "Save" }));
-  expect(confirm).toHaveBeenCalledTimes(2);
+  await answerConfirmation(user, true);
   expect(desktopApi.remember).toHaveBeenCalledTimes(2);
 });
 test("search opens only the exact reference and renders hostile text literally", async () => {
@@ -481,7 +481,7 @@ test.each(["scope", "page"])(
         }),
     );
     vi.mocked(desktopApi.state).mockResolvedValue(state);
-    const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+
     render(<App />);
     await user.click(screen.getByRole("button", { name: "记忆" }));
     await waitFor(() =>
@@ -507,8 +507,10 @@ test.each(["scope", "page"])(
       await user.click(screen.getByRole("button", { name: /Test scope/ }));
       await user.click(screen.getByRole("button", { name: "查找范围" }));
       await user.click(screen.getByRole("button", { name: "Scope B" }));
+      await answerConfirmation(user, true);
     } else {
       await user.click(screen.getByRole("button", { name: "总览" }));
+      await answerConfirmation(user, true);
       await waitFor(() =>
         expect(document.activeElement).toBe(
           screen.getByRole("heading", { level: 1, name: "总览" }),
@@ -525,11 +527,42 @@ test.each(["scope", "page"])(
     await act(async () => {
       finish(outcome("succeeded"));
     });
-    confirm.mockClear().mockReturnValue(false);
     await user.click(screen.getByRole("button", { name: "总览" }));
-    expect(confirm).toHaveBeenCalled();
+    await answerConfirmation(user, false);
     expect(
       (screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value,
     ).toBe("draft B");
   },
 );
+
+test("confirming an unknown write after the Scope changes cannot submit the old draft", async () => {
+  const user = userEvent.setup();
+  const previous = { ...state, lastWrite: outcome("unknown").record };
+  const props = { language: "en" as const, onState: vi.fn(), onDirty: vi.fn() };
+  const { rerender } = render(<NoteForm {...props} state={previous} />);
+  await user.type(screen.getByLabelText("Memory text"), "old Scope draft");
+  await user.click(screen.getByRole("button", { name: "Save" }));
+  expect(screen.getByRole("alertdialog").textContent).toContain(
+    "may create a duplicate",
+  );
+  expect(desktopApi.remember).not.toHaveBeenCalled();
+  rerender(
+    <NoteForm
+      {...props}
+      state={{
+        ...state,
+        generation: 2,
+        active: {
+          ...state.active!,
+          generation: 2,
+          scope: { ...scope, scope_id: "scope-b" },
+        },
+      }}
+    />,
+  );
+  await answerConfirmation(user, true);
+  expect(desktopApi.remember).not.toHaveBeenCalled();
+  expect(
+    (screen.getByLabelText("Memory text") as HTMLTextAreaElement).value,
+  ).toBe("");
+});
diff --git a/desktop/ui/tests/observation.test.tsx b/desktop/ui/tests/observation.test.tsx
index 063a8e810c..034340c958 100644
--- a/desktop/ui/tests/observation.test.tsx
+++ b/desktop/ui/tests/observation.test.tsx
@@ -23,6 +23,7 @@ import {
   within,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { Observation } from "../src/app/Observation";
 import { desktopApi } from "../src/shared/ipc";
@@ -169,7 +170,7 @@ test("entering Observation respects the existing Memory draft confirmation", asy
       },
     },
   });
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   render(<App />);
   await user.click(screen.getByRole("button", { name: "记忆" }));
   await waitFor(() =>
@@ -179,13 +180,13 @@ test("entering Observation respects the existing Memory draft confirmation", asy
   );
   await user.type(screen.getByLabelText("记忆内容"), "unsaved draft");
   await user.click(screen.getByRole("button", { name: "观察" }));
-  expect(confirm).toHaveBeenCalled();
+  await answerConfirmation(user, false);
   expect((screen.getByLabelText("记忆内容") as HTMLTextAreaElement).value).toBe(
     "unsaved draft",
   );
   expect(screen.queryByRole("tablist")).toBeNull();
-  confirm.mockReturnValue(true);
   await user.click(screen.getByRole("button", { name: "观察" }));
+  await answerConfirmation(user, true);
   expect(screen.getByRole("tablist", { name: "观察" })).toBeTruthy();
 });
 
diff --git a/desktop/ui/tests/scope-navigation.test.tsx b/desktop/ui/tests/scope-navigation.test.tsx
index b8f900a5cd..4e6e9c8a07 100644
--- a/desktop/ui/tests/scope-navigation.test.tsx
+++ b/desktop/ui/tests/scope-navigation.test.tsx
@@ -15,8 +15,16 @@
  */
 
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
-import { act, cleanup, render, screen, within } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  render,
+  screen,
+  within,
+  waitFor,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { answerConfirmation } from "./confirmation";
 import { App } from "../src/app/App";
 import { desktopApi } from "../src/shared/ipc";
 import type { DesktopState } from "../src/generated/ipc";
@@ -162,9 +170,9 @@ test.each(["Escape", "close button", "backdrop"])(
     const current = screen.getByRole("textbox", { name: "记忆内容" });
     expect(current.matches(":enabled")).toBe(true);
     await user.type(current, "draft for Scope B");
-    const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
     await user.click(screen.getByRole("button", { name: "观察" }));
-    expect(confirm).toHaveBeenCalledOnce();
+    await answerConfirmation(user, false);
     expect((current as HTMLTextAreaElement).value).toBe("draft for Scope B");
     expect(desktopApi.selectScope).toHaveBeenCalledTimes(1);
     expect(desktopApi.remember).not.toHaveBeenCalled();
@@ -213,9 +221,9 @@ test("a late Scope result cannot dismiss a connection editor draft created after
   await act(async () => {
     finish(selected);
   });
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: "观察" }));
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect((input as HTMLInputElement).value).toBe("Second new draft");
 });
 
@@ -224,10 +232,12 @@ test("the global menu opens the requested editor while preserving the active con
   render(<App />);
   await screen.findByRole("button", { name: /当前连接: First/ });
   await chooseProfile(user, "Second");
-  expect(
-    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
-      .value,
-  ).toBe("Second");
+  await waitFor(() =>
+    expect(
+      (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+        .value,
+    ).toBe("Second"),
+  );
   expect(
     (screen.getByRole("textbox", { name: "Server 地址" }) as HTMLInputElement)
       .value,
@@ -246,27 +256,30 @@ test("same-page external profile navigation confirms drafts and supports repeate
   await screen.findByRole("button", { name: /当前连接: First/ });
   await chooseProfile(user, "First");
   await user.type(screen.getByRole("textbox", { name: "连接名称" }), " draft");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await chooseProfile(user, "Second");
+  await answerConfirmation(user, false);
   expect(
     (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
       .value,
   ).toBe("First draft");
-  confirm.mockReturnValue(true);
   await chooseProfile(user, "Second");
+  await answerConfirmation(user, true);
   await user.type(screen.getByRole("textbox", { name: "连接名称" }), " draft");
-  confirm.mockReturnValue(false);
   await chooseProfile(user, "Second");
+  await answerConfirmation(user, false);
   expect(
     (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
       .value,
   ).toBe("Second draft");
-  confirm.mockReturnValue(true);
   await chooseProfile(user, "Second");
-  expect(
-    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
-      .value,
-  ).toBe("Second");
+  await answerConfirmation(user, true);
+  await waitFor(() =>
+    expect(
+      (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+        .value,
+    ).toBe("Second"),
+  );
   expect(desktopApi.check).not.toHaveBeenCalled();
 });
 
@@ -277,16 +290,18 @@ test("a cancelled cross-page profile navigation preserves the Memory draft", asy
   await screen.findByRole("button", { name: /Scope A scope-a/ });
   const input = screen.getByRole("textbox", { name: "记忆内容" });
   await user.type(input, "Memory draft");
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await chooseProfile(user, "Second");
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect((input as HTMLTextAreaElement).value).toBe("Memory draft");
-  confirm.mockReturnValue(true);
   await chooseProfile(user, "Second");
-  expect(
-    (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
-      .value,
-  ).toBe("Second");
+  await answerConfirmation(user, true);
+  await waitFor(() =>
+    expect(
+      (screen.getByRole("textbox", { name: "连接名称" }) as HTMLInputElement)
+        .value,
+    ).toBe("Second"),
+  );
   expect(desktopApi.check).not.toHaveBeenCalled();
 });
 
@@ -304,8 +319,9 @@ test("a late save from a replaced profile editor preserves the requested editor
   await chooseProfile(user, "First");
   await user.type(screen.getByRole("textbox", { name: "连接名称" }), " saved");
   await user.click(screen.getByRole("button", { name: "保存配置" }));
-  const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+
   await chooseProfile(user, "Second");
+  await answerConfirmation(user, true);
   const input = screen.getByRole("textbox", { name: "连接名称" });
   await user.type(input, " pending draft");
   await act(async () => {
@@ -315,9 +331,8 @@ test("a late save from a replaced profile editor preserves the requested editor
       profiles: [{ ...profileA, revision: 2, name: "First saved" }, profileB],
     });
   });
-  confirm.mockClear().mockReturnValue(false);
   await user.click(screen.getByRole("button", { name: "观察" }));
-  expect(confirm).toHaveBeenCalledOnce();
+  await answerConfirmation(user, false);
   expect((input as HTMLInputElement).value).toBe("Second pending draft");
 });
 
@@ -328,10 +343,11 @@ test("cancelling Scope selection keeps the current draft and never starts a cont
   await screen.findByRole("button", { name: /Scope A scope-a/ });
   const input = screen.getByRole("textbox", { name: "记忆内容" });
   await user.type(input, "keep the original Scope draft");
-  vi.spyOn(window, "confirm").mockReturnValue(false);
+
   await user.click(screen.getByRole("button", { name: /Scope A scope-a/ }));
   await user.click(screen.getByRole("button", { name: "查找范围" }));
   await user.click(screen.getByRole("button", { name: "Scope B" }));
+  await answerConfirmation(user, false);
   expect(desktopApi.selectScope).not.toHaveBeenCalled();
   expect(
     screen.queryByRole("heading", { name: "正在核对并选择精确 Scope…" }),

From b5a90f89bf5d27a083e70b381d3e9f7d36d32074 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Thu, 22 Oct 2026 16:44:37 +0800
Subject: [PATCH 09/12] fix(desktop): exercise application confirmations in
 installed checks

---
 .github/workflows/desktop.yml        |  8 +++----
 desktop/VALIDATION.md                | 12 ++++++++++
 desktop/tests/installed_lifecycle.py | 16 +++++++------
 desktop/tests/installed_workflow.py  | 36 +++++++++++++++++++++-------
 4 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/desktop.yml b/.github/workflows/desktop.yml
index 2ac1b7b9ba..402221dffb 100644
--- a/.github/workflows/desktop.yml
+++ b/.github/workflows/desktop.yml
@@ -96,13 +96,13 @@ jobs:
       - name: Check installed UI acceptance harness
         working-directory: .
         run: |
-          uv run --no-sync ruff check --no-fix desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ruff check --no-fix desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ruff format --check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ruff format --check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ty check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ty check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ty check --python-platform linux desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ty check --python-platform linux desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
       - name: Check fixture qualification regressions
         working-directory: .
         run: uv run --no-sync python -m pytest tests/test_desktop_fixture_qualification.py
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 0c8cc3ee7c..94bbaa00f4 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -144,6 +144,18 @@ The native navigation policy permits the platform's local application origin and
 
 导航白名单按平台仅放行本地应用 origin，同时拒绝外部、其他平台、带用户信息或显式端口的打包地址。上述结果不代表签名／公证、Intel Mac、IME、VoiceOver、原生 200% 缩放、Keychain、本机 CLI 诊断或安装版 Server 工作流通过。
 
+## Installed confirmation automation
+
+On 2026-10-22, Windows x64 checks used the pinned Node 24.14.1, pnpm 11.13.1 and Rust 1.95.0 tools. The installed acceptance harness checks the exact accessible description of the application's `alertdialog`, clicks its localized cancel/confirm button through WebDriver and waits for that prompt to leave. A different prompt fails acceptance. Consecutive discard/removal prompts are handled independently. Single-instance acceptance also checks that cancelled navigation retains the connection draft and confirmed navigation reaches Overview. Lifecycle acceptance is included explicitly in the CI lint, formatting and Windows/Linux type checks.
+
+Edge and Edge WebDriver 155.0.4283.62 exercised these harness methods against the current Vite UI with synthetic IPC. Calling the native alert endpoint while the application dialog was open reproduced HTTP 404 with `no such alert`. Application-dialog checks passed for rejected prompt mismatches, draft navigation cancellation/confirmation, nested Scope selection, disconnect cancellation/confirmation, consecutive profile-removal prompts and unknown-write resubmission. Cancelling the latter dispatched zero writes; explicit confirmation dispatched one. Evidence is under ignored `.artifacts/desktop-shell/confirmation-webdriver-results.json`.
+
+All 37 focused confirmation/connection/Memory/Scope tests and all 82 frontend tests passed, together with typecheck, lint, generated-contract/icon checks and production build. The five installed-harness Python files passed Ruff lint/format and Windows/Linux `ty check`; all five fixture qualification regressions passed. Repository-wide `uv run --locked prek run -a` passed every hook except the existing Windows Python `ty check` failures in unchanged code (`os.O_NOFOLLOW`, `fcntl`, `resource` and `os.mkfifo`); its log is under `.artifacts/desktop-shell/confirmation-prek.log`. This browser execution uses synthetic IPC and does not qualify native single-instance launches, actual Server writes or the installed package. The complete `windows-smoke.ps1` installation workflow requires a fresh hosted CI run. Platform IME and screen-reader qualification remain pending.
+
+2026-10-22，Windows x64 使用项目固定工具版本验证安装验收脚本。脚本核对应用内确认框的完整无障碍描述，通过 WebDriver 点击“取消”或“确认”，并等待当前提示离开；提示不符时验收失败，连续的丢弃／移除确认分别处理。单实例场景继续验证取消导航后连接草稿保留、确认后进入总览；生命周期脚本已显式纳入 CI 静态检查。
+
+真实 Edge 与 Edge WebDriver 155.0.4283.62 操作当前 Vite 页面，IPC 使用合成数据。应用内确认框打开时，原生 alert 接口返回 `404 no such alert`。修正后的脚本通过提示不匹配拒绝、草稿导航、嵌套 Scope 确认、断开连接、连续移除确认及未知写入确认检查；未知写入取消时请求数为零，明确确认后为一。37 项专项测试、全量 82 项前端测试、typecheck、lint、生成检查和构建通过；五个验收 Python 文件的 Ruff 与双平台类型检查、五项 fixture 回归通过。仓库全量钩子仍有未修改 Python 代码的 Windows 类型检查错误，其余钩子通过。这些证据不代表原生单实例、真实 Server 或安装包验收通过；完整安装流程仍需托管 CI 重跑，IME 和屏幕阅读器保持待验收。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/tests/installed_lifecycle.py b/desktop/tests/installed_lifecycle.py
index 7d58880437..94be4bc75f 100644
--- a/desktop/tests/installed_lifecycle.py
+++ b/desktop/tests/installed_lifecycle.py
@@ -35,12 +35,8 @@ def exercise_forced_exit(client: httpx.Client, prefix: str, app: subprocess.Pope
         page.button("保存")
         # The preceding workflow intentionally leaves an unknown last write. A new
         # explicit write must still pass the product's duplicate-risk confirmation.
-        alert = client.get(prefix + "/alert/text")
-        alert.raise_for_status()
         expected_prompt = "上次提交结果未知，再次保存可能产生重复记录。仍要提交这次输入吗？"  # noqa: RUF001 - exact localized UI
-        if alert.json()["value"] != expected_prompt:
-            raise HarnessFailure("installed_unknown_retry_confirmation_missing")
-        page.post("/alert/accept", {})
+        page.confirm(expected_prompt, accept=True)
         page.wait_text("保存成功。")
         reference = page.search_read(note, "desktoplifecyclectest")
         if app.poll() is not None:
@@ -92,7 +88,13 @@ def exercise_single_instance(client: httpx.Client, prefix: str, app: subprocess.
         ):
             raise HarnessFailure("installed_second_launch_changed_draft")
     page.button("总览")
-    page.post("/alert/dismiss", {})
+    page.confirm("丢弃尚未保存的输入？", accept=False)  # noqa: RUF001 - exact localized UI
+    if (
+        page.observe("return arguments[0].value;", [{ELEMENT: page.field("连接名称")}])
+        != "single-instance unsaved draft"
+    ):
+        raise HarnessFailure("installed_cancel_navigation_lost_draft")
     page.button("总览")
-    page.post("/alert/accept", {})
+    page.confirm("丢弃尚未保存的输入？", accept=True)  # noqa: RUF001 - exact localized UI
+    page.element("//main//h1[normalize-space(.)='总览']")
     return {"secondLaunchesExited": 3, "originalEditorAndDraftPreserved": True}
diff --git a/desktop/tests/installed_workflow.py b/desktop/tests/installed_workflow.py
index d0e793fdfa..96ee1212bd 100644
--- a/desktop/tests/installed_workflow.py
+++ b/desktop/tests/installed_workflow.py
@@ -97,6 +97,28 @@ def wait(self, script: str, args: list[object] | None = None) -> None:
     def wait_text(self, text: str) -> None:
         self.wait("return document.body.innerText.includes(arguments[0]);", [text])
 
+    def confirm(self, message: str, *, accept: bool) -> None:
+        """Check and answer the application's dialog with a real WebDriver click."""
+        dialog_xpath = "//div[@role='alertdialog' and @aria-modal='true']"
+        dialog = self.element(dialog_xpath)
+        if (
+            self.observe(
+                "return document.getElementById(arguments[0].getAttribute('aria-describedby'))?.textContent;",
+                [{ELEMENT: dialog}],
+            )
+            != message
+        ):
+            raise HarnessFailure("installed_confirmation_message_mismatch", message)
+        action = "确认" if accept else "取消"
+        self.click(f"{dialog_xpath}//button[normalize-space(.)='{action}']")
+        # A confirmed dirty editor can immediately open a second confirmation
+        # (for example, removing its profile). Wait only for this prompt to leave.
+        self.wait(
+            """return ![...document.querySelectorAll('[role=alertdialog]')].some(dialog =>
+              document.getElementById(dialog.getAttribute('aria-describedby'))?.textContent === arguments[0]);""",
+            [message],
+        )
+
     def profile(self, name: str) -> None:
         self.click(
             f"//ul[@class='profile-list']//span[@class='profile-name'][normalize-space(.)='{name}']/ancestor::button"
@@ -267,18 +289,14 @@ def exercise_connection_isolation(
         page.type("记忆内容", draft, "textarea")
         page.open_connection_menu()
         page.button("断开桌面连接")
-        alert = page.client.get(page.prefix + "/alert/text")
-        alert.raise_for_status()
-        if alert.json()["value"] != "丢弃尚未保存的输入？":  # noqa: RUF001 - exact localized UI
-            raise HarnessFailure("installed_disconnect_discard_confirmation_missing")
-        page.post("/alert/dismiss", {})
+        page.confirm("丢弃尚未保存的输入？", accept=False)  # noqa: RUF001 - exact localized UI
         if page.observe("return document.querySelector('.memory-workspace textarea')?.value;") != draft:
             raise HarnessFailure("installed_cancel_disconnect_lost_draft")
         if page.observe("return document.querySelector('.reader > .plain-text')?.textContent;") != text_b:
             raise HarnessFailure("installed_cancel_disconnect_changed_reader")
         page.open_connection_menu()
         page.button("断开桌面连接")
-        page.post("/alert/accept", {})
+        page.confirm("丢弃尚未保存的输入？", accept=True)  # noqa: RUF001 - exact localized UI
         page.wait_text("尚未连接")
         page.expect_empty_context()
         page.button("连接")
@@ -291,7 +309,7 @@ def exercise_connection_isolation(
         page.button("连接")
         page.profile("Desktop CI B")
         page.button("移除连接")
-        page.post("/alert/accept", {})
+        page.confirm("只移除此桌面配置和自有凭据，不停止服务或删除业务数据。继续？", accept=True)  # noqa: RUF001 - exact localized UI
         page.wait("""return ![...document.querySelectorAll('.profile-name')].some(
           name => name.textContent.trim() === 'Desktop CI B');""")
         for server, scope, reference, expected in (
@@ -363,7 +381,7 @@ def exercise_late_save(page: InstalledPage) -> None:
             page.click("//div[@class='topbar-group']/button")
             page.button("查找范围")
             page.click(f"//ul[@class='scope-list']/li[code[normalize-space(.)='{scope_b}']]/button")
-            page.post("/alert/accept", {})
+            page.confirm("丢弃尚未保存的输入？", accept=True)  # noqa: RUF001 - exact localized UI
             page.wait("return !document.querySelector('[role=dialog]');")
             draft = "new scope unsaved draft"
             page.type("记忆内容", draft, "textarea")
@@ -371,7 +389,7 @@ def exercise_late_save(page: InstalledPage) -> None:
             # This is shown only after the old form refreshes the native write record.
             page.wait_text("连接或范围已改变，旧正文已隐藏。")  # noqa: RUF001 - exact localized UI
             page.button("总览")
-            page.post("/alert/dismiss", {})
+            page.confirm("丢弃尚未保存的输入？", accept=False)  # noqa: RUF001 - exact localized UI
             if page.observe("return document.querySelector('.memory-workspace textarea')?.value;") != draft:
                 raise HarnessFailure("installed_late_save_lost_new_draft")
             original = server.post(

From df234748a2982b3fbc9de42c3e6476e278b2ab03 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Fri, 23 Oct 2026 19:56:56 +0800
Subject: [PATCH 10/12] fix(desktop): cover installed harness and navigation
 ports

---
 .github/workflows/desktop.yml  | 10 ++++++----
 desktop/VALIDATION.md          | 14 ++++++++++++--
 desktop/src-tauri/src/ipc.rs   |  6 +++---
 desktop/src-tauri/tests/ipc.rs |  3 ++-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/desktop.yml b/.github/workflows/desktop.yml
index 402221dffb..677479b33b 100644
--- a/.github/workflows/desktop.yml
+++ b/.github/workflows/desktop.yml
@@ -96,13 +96,15 @@ jobs:
       - name: Check installed UI acceptance harness
         working-directory: .
         run: |
-          uv run --no-sync ruff check --no-fix desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
+          $harnessFiles = @(Get-ChildItem -Path desktop/tests/installed_*.py -File | Sort-Object Name | ForEach-Object { $_.FullName })
+          $harnessFiles += 'desktop/tests/fixture_qualification.py'
+          uv run --no-sync ruff check --no-fix @harnessFiles
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ruff format --check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ruff format --check @harnessFiles
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ty check desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ty check @harnessFiles
           if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE }
-          uv run --no-sync ty check --python-platform linux desktop/tests/installed_ui.py desktop/tests/installed_fixture.py desktop/tests/installed_workflow.py desktop/tests/installed_lifecycle.py desktop/tests/fixture_qualification.py
+          uv run --no-sync ty check --python-platform linux @harnessFiles
       - name: Check fixture qualification regressions
         working-directory: .
         run: uv run --no-sync python -m pytest tests/test_desktop_fixture_qualification.py
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 94bbaa00f4..983402463d 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -150,11 +150,21 @@ On 2026-10-22, Windows x64 checks used the pinned Node 24.14.1, pnpm 11.13.1 and
 
 Edge and Edge WebDriver 155.0.4283.62 exercised these harness methods against the current Vite UI with synthetic IPC. Calling the native alert endpoint while the application dialog was open reproduced HTTP 404 with `no such alert`. Application-dialog checks passed for rejected prompt mismatches, draft navigation cancellation/confirmation, nested Scope selection, disconnect cancellation/confirmation, consecutive profile-removal prompts and unknown-write resubmission. Cancelling the latter dispatched zero writes; explicit confirmation dispatched one. Evidence is under ignored `.artifacts/desktop-shell/confirmation-webdriver-results.json`.
 
-All 37 focused confirmation/connection/Memory/Scope tests and all 82 frontend tests passed, together with typecheck, lint, generated-contract/icon checks and production build. The five installed-harness Python files passed Ruff lint/format and Windows/Linux `ty check`; all five fixture qualification regressions passed. Repository-wide `uv run --locked prek run -a` passed every hook except the existing Windows Python `ty check` failures in unchanged code (`os.O_NOFOLLOW`, `fcntl`, `resource` and `os.mkfifo`); its log is under `.artifacts/desktop-shell/confirmation-prek.log`. This browser execution uses synthetic IPC and does not qualify native single-instance launches, actual Server writes or the installed package. The complete `windows-smoke.ps1` installation workflow requires a fresh hosted CI run. Platform IME and screen-reader qualification remain pending.
+All 37 focused confirmation/connection/Memory/Scope tests and all 82 frontend tests passed, together with typecheck, lint, generated-contract/icon checks and production build. All five fixture qualification regressions passed. Repository-wide `uv run --locked prek run -a` passed every hook except the existing Windows Python `ty check` failures in unchanged code (`os.O_NOFOLLOW`, `fcntl`, `resource` and `os.mkfifo`); its log is under `.artifacts/desktop-shell/confirmation-prek.log`. This browser execution uses synthetic IPC and does not qualify native single-instance launches, actual Server writes or the installed package. The complete `windows-smoke.ps1` installation workflow requires a fresh hosted CI run. Platform IME and screen-reader qualification remain pending.
 
 2026-10-22，Windows x64 使用项目固定工具版本验证安装验收脚本。脚本核对应用内确认框的完整无障碍描述，通过 WebDriver 点击“取消”或“确认”，并等待当前提示离开；提示不符时验收失败，连续的丢弃／移除确认分别处理。单实例场景继续验证取消导航后连接草稿保留、确认后进入总览；生命周期脚本已显式纳入 CI 静态检查。
 
-真实 Edge 与 Edge WebDriver 155.0.4283.62 操作当前 Vite 页面，IPC 使用合成数据。应用内确认框打开时，原生 alert 接口返回 `404 no such alert`。修正后的脚本通过提示不匹配拒绝、草稿导航、嵌套 Scope 确认、断开连接、连续移除确认及未知写入确认检查；未知写入取消时请求数为零，明确确认后为一。37 项专项测试、全量 82 项前端测试、typecheck、lint、生成检查和构建通过；五个验收 Python 文件的 Ruff 与双平台类型检查、五项 fixture 回归通过。仓库全量钩子仍有未修改 Python 代码的 Windows 类型检查错误，其余钩子通过。这些证据不代表原生单实例、真实 Server 或安装包验收通过；完整安装流程仍需托管 CI 重跑，IME 和屏幕阅读器保持待验收。
+真实 Edge 与 Edge WebDriver 155.0.4283.62 操作当前 Vite 页面，IPC 使用合成数据。应用内确认框打开时，原生 alert 接口返回 `404 no such alert`。修正后的脚本通过提示不匹配拒绝、草稿导航、嵌套 Scope 确认、断开连接、连续移除确认及未知写入确认检查；未知写入取消时请求数为零，明确确认后为一。37 项专项测试、全量 82 项前端测试、typecheck、lint、生成检查和构建通过；五项 fixture 回归通过。仓库全量钩子仍有未修改 Python 代码的 Windows 类型检查错误，其余钩子通过。这些证据不代表原生单实例、真实 Server 或安装包验收通过；完整安装流程仍需托管 CI 重跑，IME 和屏幕阅读器保持待验收。
+
+## Harness coverage and navigation policy
+
+On 2026-10-23, the Windows CI harness checks use one PowerShell-expanded list: all five `desktop/tests/installed_*.py` modules, including `installed_boundaries.py`, plus `desktop/tests/fixture_qualification.py`. All six files passed Ruff lint, format checks and Windows/Linux `ty check` using the exact file selection and argument splatting from the workflow. All five fixture qualification regressions passed. Future `installed_*.py` modules enter the same four checks automatically.
+
+Each platform branch of the packaged navigation allowlist explicitly requires no non-default port. The rejection table covers both `http://tauri.localhost:8000` and `tauri://localhost:8000`, alongside the existing origin and user-info restrictions. On Windows x64 with Rust 1.95.0, the focused navigation regression, all four IPC tests, `cargo fmt --check` and `cargo clippy --locked --all-targets -- -D warnings` passed. These are native policy/mock-IPC checks; no installer, real Server, macOS or Android execution was performed for this change.
+
+2026-10-23，Windows CI 的四项 harness 静态检查共用 PowerShell 展开的文件清单：五个 `desktop/tests/installed_*.py` 模块（包含 `installed_boundaries.py`）及 `fixture_qualification.py`，共六个文件。按工作流相同的文件选择和数组参数传递方式，Ruff、格式检查及 Windows／Linux 类型检查全部通过，五项 fixture 回归通过；后续新增的同名前缀模块自动进入四项检查。
+
+打包导航白名单的各平台分支均明确要求无非默认端口，拒绝表同时覆盖 HTTP 和 Tauri 地址的 `:8000`。Windows x64 使用 Rust 1.95.0 完成专项导航回归、全部四项 IPC 测试、fmt 和全目标 clippy。此处为原生策略及 mock IPC 验证，未执行安装包、真实 Server、macOS 或 Android 验收。
 
 ## Remaining release qualification
 
diff --git a/desktop/src-tauri/src/ipc.rs b/desktop/src-tauri/src/ipc.rs
index 07572e116d..77b92e0006 100644
--- a/desktop/src-tauri/src/ipc.rs
+++ b/desktop/src-tauri/src/ipc.rs
@@ -55,10 +55,10 @@ pub fn foundation_info<R: tauri::Runtime>(
 
 pub fn allowed_navigation(url: &url::Url) -> bool {
     let packaged = if cfg!(any(windows, target_os = "android")) {
-        url.scheme() == "http" && url.host_str() == Some("tauri.localhost")
+        url.scheme() == "http" && url.host_str() == Some("tauri.localhost") && url.port().is_none()
     } else {
-        url.scheme() == "tauri" && url.host_str() == Some("localhost")
-    } && url.port().is_none();
+        url.scheme() == "tauri" && url.host_str() == Some("localhost") && url.port().is_none()
+    };
     let development =
         cfg!(debug_assertions) && url.origin().ascii_serialization() == "http://127.0.0.1:1420";
     (packaged || development) && url.username().is_empty() && url.password().is_none()
diff --git a/desktop/src-tauri/tests/ipc.rs b/desktop/src-tauri/tests/ipc.rs
index 4e0410bac5..e21d2b8599 100644
--- a/desktop/src-tauri/tests/ipc.rs
+++ b/desktop/src-tauri/tests/ipc.rs
@@ -100,6 +100,7 @@ fn blocks_remote_navigation_and_userinfo() {
         "file:///C:/secret",
         "javascript:alert(1)",
         "http://tauri.localhost.evil",
+        "http://tauri.localhost:8000",
         "http://user@tauri.localhost",
         "tauri://user@localhost",
         "tauri://localhost:8000",
@@ -107,7 +108,7 @@ fn blocks_remote_navigation_and_userinfo() {
         "https://tauri.localhost",
         "tauri://remote-host",
     ] {
-        assert!(!allowed_navigation(&url.parse().unwrap()));
+        assert!(!allowed_navigation(&url.parse().unwrap()), "{url}");
     }
     assert!(allowed_navigation(&LOCAL_ORIGIN.parse().unwrap()));
     assert!(allowed_navigation(

From 74d4f49f9d2f5357d3dc140f988bc8c11391d30a Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Fri, 23 Oct 2026 21:45:38 +0800
Subject: [PATCH 11/12] fix(desktop): preserve reopened drafts and scope
 recovery focus

---
 desktop/VALIDATION.md                      | 12 ++++++
 desktop/ui/src/app/App.tsx                 |  2 +-
 desktop/ui/src/app/Connections.tsx         |  4 +-
 desktop/ui/tests/feedback.test.tsx         | 40 ++++++++++++++++++++
 desktop/ui/tests/scope-navigation.test.tsx | 43 ++++++++++++++++++++++
 5 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 983402463d..b69ac5cd60 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -166,6 +166,18 @@ Each platform branch of the packaged navigation allowlist explicitly requires no
 
 打包导航白名单的各平台分支均明确要求无非默认端口，拒绝表同时覆盖 HTTP 和 Tauri 地址的 `:8000`。Windows x64 使用 Rust 1.95.0 完成专项导航回归、全部四项 IPC 测试、fmt 和全目标 clippy。此处为原生策略及 mock IPC 验证，未执行安装包、真实 Server、macOS 或 Android 验收。
 
+## Reopened profile drafts and same-page Scope recovery
+
+On 2026-10-23, Windows x64 checks used Node 24.14.1, pnpm 11.13.1 and Rust 1.95.0 for generated-contract checking. A profile revision refresh resets only a clean connection editor. A new draft entered after reopening the same profile remains intact when the earlier save completes, including when its native state clears the active connection. The new draft retains its discard confirmation, and explicitly cancelling editing loads the saved revision. Scope recovery restores focus to the page title even when Connections is already the current page; its existing draft is preserved.
+
+Regression tests reproduced draft replacement and body focus before the fixes. All 38 focused connection/confirmation/Scope/feedback tests and all 86 frontend tests passed, together with typecheck, lint, generated-contract/icon checks and production build. Headless Edge 155.0.4283.62 with synthetic IPC passed eight combinations of English/Chinese, 800×600/400×400 CSS viewports and save responses retaining/clearing the active connection. Checks cover pending-save reopening, preserved new drafts and discard guards, explicit editor reset, same-page recovery focus and absence of horizontal overflow. Evidence is under ignored `.artifacts/desktop-shell/review-draft-focus-results.json`. This does not qualify native persistence, the installed package, IME or screen-reader behavior.
+
+2026-10-23，Windows x64 使用项目固定工具版本验证：配置版本更新仅同步没有新草稿的编辑器；保存期间重新打开同一配置后输入的新草稿及离开确认不会被旧响应覆盖，响应清除活动连接时也适用。明确取消编辑后加载已保存版本。Scope 恢复入口即使留在连接页，也将焦点恢复到页面标题并保留已有草稿。
+
+回归测试在修复前复现了草稿被覆盖及焦点落到 body。38 项专项测试、全量 86 项前端测试、typecheck、lint、生成检查与构建通过。Edge 合成 IPC 检查覆盖中英文、800×600／400×400 及两种活动连接结果，共八组；草稿、确认、重置及恢复焦点正常，页面无横向溢出。此证据不代表原生持久化、安装包、IME 或屏幕阅读器验收通过。
+
+Repository-wide `uv run --locked prek run -a` passed all hooks except the existing Windows Python `ty check` failures in unchanged code; see ignored `.artifacts/desktop-shell/review-draft-focus-prek.log`. 仓库全量钩子仍有未修改 Python 代码的既存 Windows 类型检查错误，其余钩子通过。
+
 ## Remaining release qualification
 
 - Clean standard-user Windows 11, including absent/present WebView2 and bootstrap recovery.
diff --git a/desktop/ui/src/app/App.tsx b/desktop/ui/src/app/App.tsx
index b2055fd1d0..241d5b95fa 100644
--- a/desktop/ui/src/app/App.tsx
+++ b/desktop/ui/src/app/App.tsx
@@ -428,7 +428,7 @@ export function App() {
             }}
             hideHeading
             onManageConnections={() => {
-              scopeReturnFocus.current = null;
+              scopeReturnFocus.current = heading.current;
               setScopeOpen(false);
               navigate("connections");
             }}
diff --git a/desktop/ui/src/app/Connections.tsx b/desktop/ui/src/app/Connections.tsx
index 8916c1d454..b4f571ab8a 100644
--- a/desktop/ui/src/app/Connections.tsx
+++ b/desktop/ui/src/app/Connections.tsx
@@ -90,7 +90,9 @@ export function Connections({
     invalidated.current = false;
   }
   useEffect(() => {
-    reset(profile);
+    // A response from an earlier editor can update this revision after remount.
+    // Only refresh a clean form; newer input keeps its discard guard.
+    if (!dirty) reset(profile);
   }, [selected, profile?.revision]);
   function change(target = false) {
     setDirty(true);
diff --git a/desktop/ui/tests/feedback.test.tsx b/desktop/ui/tests/feedback.test.tsx
index 95897ae4d9..2d665eddff 100644
--- a/desktop/ui/tests/feedback.test.tsx
+++ b/desktop/ui/tests/feedback.test.tsx
@@ -475,6 +475,46 @@ test("Scope recovery navigation focuses the destination title", async () => {
   );
 });
 
+test.each(["zh", "en"])(
+  "%s Scope recovery on Connections restores focus and preserves its draft",
+  async (language) => {
+    const user = userEvent.setup();
+    vi.mocked(desktopApi.state).mockResolvedValue(disconnected);
+    render(<App />);
+    await screen.findByRole("button", { name: /未选择/ });
+    if (language === "en") {
+      await user.click(screen.getByRole("button", { name: "设置与诊断" }));
+      await user.selectOptions(screen.getByLabelText("语言"), "en");
+    }
+    const title = language === "zh" ? "连接" : "Connections";
+    await user.click(screen.getByRole("button", { name: title }));
+    const input = screen.getByRole("textbox", {
+      name: language === "zh" ? "连接名称" : "Connection name",
+    });
+    await user.type(input, "keep this draft");
+    await user.click(
+      screen.getByRole("button", {
+        name: language === "zh" ? /未选择/ : /None selected/,
+      }),
+    );
+    await user.click(
+      screen.getByRole("button", {
+        name:
+          language === "zh"
+            ? "管理连接与凭据"
+            : "Manage connections and credentials",
+      }),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { level: 1, name: title }),
+    );
+    expect((input as HTMLInputElement).value).toBe("keep this draft");
+    expect(desktopApi.check).not.toHaveBeenCalled();
+  },
+);
+
 test("clicking Scope with body focus restores the actual trigger after Escape", async () => {
   const user = userEvent.setup();
   render(<App />);
diff --git a/desktop/ui/tests/scope-navigation.test.tsx b/desktop/ui/tests/scope-navigation.test.tsx
index 4e6e9c8a07..3afc65a2de 100644
--- a/desktop/ui/tests/scope-navigation.test.tsx
+++ b/desktop/ui/tests/scope-navigation.test.tsx
@@ -336,6 +336,49 @@ test("a late save from a replaced profile editor preserves the requested editor
   expect((input as HTMLInputElement).value).toBe("Second pending draft");
 });
 
+test.each([true, false])(
+  "reopening the saving profile preserves a newer draft (active cleared: %s)",
+  async (clearActive) => {
+    const user = userEvent.setup();
+    let finish!: (next: DesktopState) => void;
+    vi.mocked(desktopApi.save).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+    render(<App />);
+    await screen.findByRole("button", { name: /当前连接: First/ });
+    await chooseProfile(user, "First");
+    await user.type(
+      screen.getByRole("textbox", { name: "连接名称" }),
+      " saved",
+    );
+    await user.click(screen.getByRole("button", { name: "保存配置" }));
+    await chooseProfile(user, "First");
+    await answerConfirmation(user, true);
+    const input = screen.getByRole("textbox", { name: "连接名称" });
+    await user.type(input, " new draft");
+    await act(async () => {
+      finish({
+        ...state,
+        generation: 2,
+        profiles: [{ ...profileA, revision: 2, name: "First saved" }, profileB],
+        active: clearActive ? null : state.active,
+      });
+    });
+    expect((input as HTMLInputElement).value).toBe("First new draft");
+    await user.click(screen.getByRole("button", { name: "观察" }));
+    await answerConfirmation(user, false);
+    expect((input as HTMLInputElement).value).toBe("First new draft");
+    expect(desktopApi.save).toHaveBeenCalledTimes(1);
+    // Explicitly abandoning the new draft loads the saved revision.
+    await user.click(screen.getByRole("button", { name: "取消编辑" }));
+    await answerConfirmation(user, true);
+    expect((input as HTMLInputElement).value).toBe("First saved");
+  },
+);
+
 test("cancelling Scope selection keeps the current draft and never starts a context transition", async () => {
   const user = userEvent.setup();
   render(<App />);

From e3070c69c80e4fdebcd15d100b08c06745635cd8 Mon Sep 17 00:00:00 2001
From: sunlight798 <3281498087@qq.com>
Date: Fri, 23 Oct 2026 23:39:30 +0800
Subject: [PATCH 12/12] fix(desktop): qualify current Server contract

---
 desktop/README.md                             |  2 +-
 desktop/README.zh.md                          |  2 +-
 desktop/VALIDATION.md                         | 65 +++++++++++++++++--
 .../src/connections/compatibility.json        | 19 ++++++
 4 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/desktop/README.md b/desktop/README.md
index 2fa0c910ac..ed89cb8337 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -150,7 +150,7 @@ Installed boundary checks exercise an 8192-byte Unicode note, reject over-budget
 
 After upgrading from an earlier preview, open Connections and select your saved connection. Profiles matching the bundled API contract appear under “Available for this Desktop build”; compare their tested Server builds with your deployment before selecting one, saving, checking and explicitly using the connection again. New connections start with no compatibility selection.
 
-Historical profiles appear as disabled records. A saved incompatible or unavailable selection remains visible with an explanation until explicitly replaced; it is never silently upgraded. For the qualified current Server sources, explicitly choose `sqlite-atomic-d9a78567-v1` and check the connection before selecting a Scope; that record's contract digest matches this build's bundled contract, while `sqlite-atomic-caf2a35a-v1`, `sqlite-atomic-683e2db0-v1` and `sqlite-atomic-cab054db-v1` qualify their corresponding Server source deployments and do not match it. The recorded Server source and wheel identities must match the deployment you intend to use. The independently qualified `ci-fixtures` build is for disposable acceptance tests. Historical qualification evidence and remaining requirements are documented in the [validation guide](VALIDATION.md).
+Historical profiles appear as disabled records. A saved incompatible or unavailable selection remains visible with an explanation until explicitly replaced; it is never silently upgraded. For the qualified current Server sources, explicitly choose `sqlite-atomic-1da99747-v1` and check the connection before selecting a Scope; that record's contract digest matches this build's bundled contract, while `sqlite-atomic-d9a78567-v1`, `sqlite-atomic-caf2a35a-v1`, `sqlite-atomic-683e2db0-v1` and `sqlite-atomic-cab054db-v1` qualify their corresponding Server source deployments and do not match it. The recorded Server source and wheel identities must match the deployment you intend to use. The independently qualified `ci-fixtures` build is for disposable acceptance tests. Historical qualification evidence and remaining requirements are documented in the [validation guide](VALIDATION.md).
 
 ## Build on macOS
 
diff --git a/desktop/README.zh.md b/desktop/README.zh.md
index bf3e9a78c1..8f18fe2473 100644
--- a/desktop/README.zh.md
+++ b/desktop/README.zh.md
@@ -133,7 +133,7 @@ Windows GitHub Actions 会构建未签名安装包，安装到临时中文路径
 
 从早期预览版升级后，请打开「连接」并选中已保存的连接。与当前 API 契约匹配的配置显示在「此 Desktop 构建可用」中；先核对已测试的 Server 构建与实际部署，再明确选择、保存、检查并使用该连接。新连接默认不选择兼容配置。
 
-历史配置显示为不可选择的记录。已保存的不匹配或不可用配置仍会显示并说明原因，须明确替换，不会静默升级。对于已资格化的当前 Server 源码，明确选择 `sqlite-atomic-d9a78567-v1` 并在选取范围前检查连接；该记录的契约摘要与本构建的打包契约匹配，而 `sqlite-atomic-caf2a35a-v1`、`sqlite-atomic-683e2db0-v1` 与 `sqlite-atomic-cab054db-v1` 只资格化各自对应 Server 源码的部署，并不匹配打包契约。已记录的 Server 源码和 wheel 身份必须与实际部署一致。独立验证的 `ci-fixtures` 构建仅用于临时验收测试。历史资格证据和剩余要求见[验证说明](VALIDATION.md)。
+历史配置显示为不可选择的记录。已保存的不匹配或不可用配置仍会显示并说明原因，须明确替换，不会静默升级。对于已资格化的当前 Server 源码，明确选择 `sqlite-atomic-1da99747-v1` 并在选取范围前检查连接；该记录的契约摘要与本构建的打包契约匹配，而 `sqlite-atomic-d9a78567-v1`、`sqlite-atomic-caf2a35a-v1`、`sqlite-atomic-683e2db0-v1` 与 `sqlite-atomic-cab054db-v1` 只资格化各自对应 Server 源码的部署，并不匹配打包契约。已记录的 Server 源码和 wheel 身份必须与实际部署一致。独立验证的 `ci-fixtures` 构建仅用于临时验收测试。历史资格证据和剩余要求见[验证说明](VALIDATION.md)。
 
 ## 在 macOS 上构建
 
diff --git a/desktop/VALIDATION.md b/desktop/VALIDATION.md
index 3314bee99a..be8a7b5fab 100644
--- a/desktop/VALIDATION.md
+++ b/desktop/VALIDATION.md
@@ -22,7 +22,7 @@ cargo test --locked --manifest-path desktop/src-tauri/Cargo.toml
 
 ## Compatibility scope
 
-[compatibility.json](src-tauri/src/connections/compatibility.json) preserves the recorded Server sources, normalized OpenAPI contract digests and qualification-wheel digests for the historical profiles below. The current contract is qualified by `sqlite-atomic-d9a78567-v1` below; ordinary builds require explicitly selecting it and checking the connection before business operations become available. The `sqlite-atomic-caf2a35a-v1`, `sqlite-atomic-683e2db0-v1` and `sqlite-atomic-cab054db-v1` records qualify their corresponding Server source deployments and do not match this bundled contract. Historical records are disabled in the selector, and saved unavailable selections remain visible until explicitly replaced. CI builds have their own artifact identities and do not change product qualification.
+[compatibility.json](src-tauri/src/connections/compatibility.json) preserves the recorded Server sources, normalized OpenAPI contract digests and qualification-wheel digests for the historical profiles below. The current contract is qualified by `sqlite-atomic-1da99747-v1` below; ordinary builds require explicitly selecting it and checking the connection before business operations become available. The `sqlite-atomic-d9a78567-v1`, `sqlite-atomic-caf2a35a-v1`, `sqlite-atomic-683e2db0-v1` and `sqlite-atomic-cab054db-v1` records qualify their corresponding Server source deployments and do not match this bundled contract. Historical records are disabled in the selector, and saved unavailable selections remain visible until explicitly replaced. CI builds have their own artifact identities and do not change product qualification.
 
 The real Server harness covers SQLite with anonymous loopback, static Bearer, HTTPS with explicit CA/base path, and injected-provider/enforced access. It exercises save/search/exact reads, identity changes, binding revocation, ambiguous writes without replay and Scope pagination. Installed UI checks cover repeated launches preserving the existing editor, late committed-save responses preserving a new Scope draft, explicit connection/Scope selection, clipboard copies, connection isolation, draft cancellation, byte limits and independent Server survival after Desktop exit.
 
@@ -30,9 +30,64 @@ Selecting a compatibility profile does not attest the remote binary identity. Ex
 
 ### Current Server protocol qualification
 
+#### Server 1da99747 protocol qualification
+
+`sqlite-atomic-1da99747-v1` qualifies Server sources at
+`1da997476651c2850ff7141e2b7cd512d0152a90` for the bundled OpenAPI digest
+`5878999ce9e239d6642e4da858074b281ed465629432c578b3584eec47cbce6c`. The qualification wheel is
+`powercontext-0.1.dev1120+g2066de01d-py3-none-any.whl`, SHA-256
+`f87da56c813fe0e994ba60c29e8ba99eb48567dc561ac9f19ac2979e0599c1a6`. It was built from clean Desktop commit
+`2066de01dbd27d08eb01a192b5b22be01c688235`; Server sources, OpenAPI, project configuration
+and lock match the recorded Server commit after LF normalization. All 542 packaged
+runtime files in `powercontext/` and `powercontext_service_bootstrap/` were compared with
+that commit. The manifest digest is `716896e084dbaac6a6ea159c7d4e1a47bb741a27afbc8be5b56f548d7ef72ce0`
+(sorted `wheel/path sha256` lines over the wheel's original bytes, with a final newline).
+Windows checkout CRLF differences were normalized for the source comparison only.
+
+On 2026-10-23, Windows x64 with Python 3.12.4 and Rust 1.95.0 ran the
+existing native `ConnectionManager` / `server_probe` against the extracted wheel and
+independent SQLite Server processes. All four modes passed: anonymous loopback, static
+Bearer, HTTPS with explicit CA/base path, and injected-provider/enforced access. The ten
+operations cover Atomic Memory save/search/exact revision reads, Scope selection and
+pagination, identity changes, same-identity revocation, committed writes with lost responses
+without replay, and independent Server survival after client exit.
+
+Reproduce the protocol check from a clean checkout with the pinned tools:
+
+```powershell
+uv build --wheel --out-dir desktop/.artifacts/server-wheel
+cargo build --locked --manifest-path desktop/src-tauri/Cargo.toml --example server_probe
+uv run --locked python desktop/tests/fixture_qualification.py --server-commit 1da997476651c2850ff7141e2b7cd512d0152a90
+uv run --locked python desktop/tests/real_server.py
+```
+
+Use an empty wheel output directory. The harness supplies a separate candidate fixture profile;
+the bundled product record above is backed by its completed four-mode results and the verified
+source/artifact identities. Ordinary builds require explicit profile selection and a connection
+check; historical profiles remain unchanged. Local evidence is under ignored
+`desktop/.artifacts/real-server.json` and `.artifacts/desktop-shell/current-contract-wheel-identity.json`.
+This establishes protocol compatibility for the recorded sources and wheel, without qualifying
+installed UI, credential-store prompts, signing, macOS execution, IME or screen-reader behavior.
+
+2026-10-23，Windows x64 的原生连接管理器对独立 wheel／SQLite Server 完成四种真实协议验收，
+覆盖匿名、Bearer、HTTPS／反向代理路径及注入认证／权限控制。新资格记录绑定上述源码、
+合同和 wheel 摘要；542 个运行时文件与指定提交在统一换行符后逐一核对，历史记录保持不变。
+普通构建需明确选择新配置并检查连接。该记录验证协议兼容性，不代表安装包、凭据库提示、
+签名、macOS、IME 或屏幕阅读器验收通过。
+
+The qualification regression `bundled_qualification_allows_explicit_scope_browsing` and the
+complete default-feature Rust test suite passed with this record. All 86 frontend tests,
+typecheck, lint, production build, generated-contract/icon checks, IPC export checking,
+Rust fmt/all-target clippy and five fixture qualification regressions passed. Native test
+output is under ignored `.artifacts/desktop-shell/current-contract-native-tests.log`.
+新记录下原失败用例与完整 Rust 测试通过，86 项前端测试及相关构建、静态和生成检查通过。
+Repository hooks passed except the existing Windows Python type errors in unchanged code;
+see ignored `.artifacts/desktop-shell/current-contract-prek.log`.
+仓库全量钩子仍有未修改代码的既存 Windows Python 类型错误，其余钩子通过。
+
 #### Server d9a78567 protocol qualification
 
-The bundled contract is qualified by `sqlite-atomic-d9a78567-v1`. The record identifies Server
+The corresponding historical preview contract is qualified by `sqlite-atomic-d9a78567-v1`. The record identifies Server
 sources at `d9a785675dedb72cd72a386b346e590f4c067ac0` and normalized OpenAPI digest
 `a6758fd35296abefb55ab86b152584a369d5f2deedfee7a3f9822e16ad1edc25`.
 The qualification wheel is `powercontext-1.4.1.dev69+ga200d6094.d20261022-py3-none-any.whl`,
@@ -139,7 +194,7 @@ matching `sqlite-atomic-caf2a35a-v1`. The observed app is identified by the exec
 this record does not identify its exact build source revision. This is historical evidence, not a
 procedure or native UI qualification for the current bundled contract.
 
-The current `sqlite-atomic-d9a78567-v1` record has non-GUI protocol evidence on Linux x86_64 only.
+The `sqlite-atomic-d9a78567-v1` record has non-GUI protocol evidence on Linux x86_64 only.
 Native macOS save/search/exact-read and clipboard acceptance against that record remains unverified.
 
 The normal release app (without `ci-fixtures`) was operated on macOS 26.5.2 ARM64 against the
@@ -318,11 +373,11 @@ On 2026-10-23, Windows x64 integration checks used Node 24.14.1, pnpm 11.13.1 an
 
 All 86 frontend tests, typecheck, lint, production build, generated-contract/icon checks and IPC export checking passed. Rust fmt, all-target clippy, all four IPC tests and all nine transport tests passed. All six installed-harness Python files passed Ruff lint/format and Windows/Linux type checks; all five fixture qualification regressions passed. Repository hooks passed except the existing Windows Python type errors in unchanged code; see ignored `.artifacts/desktop-shell/merge-master-prek.log`.
 
-The complete Rust test run fails at `bundled_qualification_allows_explicit_scope_browsing`: the current bundled contract digest is `5878999ce9e239d6642e4da858074b281ed465629432c578b3584eec47cbce6c`, with no matching bundled qualification. The test, connection manager, operations manifest and qualification records are identical to master `1da99747`; qualification evidence was not altered. This run does not establish installed Windows, macOS or real-Server acceptance.
+The bundled contract digest `5878999ce9e239d6642e4da858074b281ed465629432c578b3584eec47cbce6c` is qualified by [Server 1da99747](#server-1da99747-protocol-qualification). The complete Rust test suite, including `bundled_qualification_allows_explicit_scope_browsing`, passes with this record. Installed Windows and macOS workflows require their separate acceptance checks.
 
 2026-10-23，合入 master `1da99747` 后，Windows x64 的全量 86 项前端测试、类型检查、lint、构建、生成合同／图标与 IPC 导出检查通过；Rust fmt、全目标 clippy、四项 IPC 测试及六个验收 Python 文件的静态检查、五项 fixture 回归通过。导航测试同时保留 master 的平台策略与本分支的端口、跨平台来源和应用路径保护，原生凭据支持及草稿／焦点修复均保留。
 
-九项传输测试全部通过。完整 Rust 测试在随包兼容资格用例失败：当前合同摘要没有匹配的随包资格记录。涉及的测试、连接管理器、合同清单和资格记录均与 master 完全一致，未修改资格证据绕过检查。仓库全量钩子仍有未修改代码的既存 Windows Python 类型错误，其余钩子通过。上述结果不代表安装包、macOS 或真实 Server 验收通过。
+九项传输测试全部通过。当前合同由上述 Server 1da99747 真实协议验收记录资格化，完整 Rust 测试（含随包兼容资格用例）通过。仓库全量钩子仍有未修改代码的既存 Windows Python 类型错误，其余钩子通过。上述结果不代表安装包或 macOS 验收通过。
 
 ## Remaining release qualification
 
diff --git a/desktop/src-tauri/src/connections/compatibility.json b/desktop/src-tauri/src/connections/compatibility.json
index 9132847dfb..25d7e81612 100644
--- a/desktop/src-tauri/src/connections/compatibility.json
+++ b/desktop/src-tauri/src/connections/compatibility.json
@@ -151,5 +151,24 @@
       "search_memory"
     ],
     "evidence": "desktop/VALIDATION.md#server-d9a78567-protocol-qualification"
+  },
+  {
+    "id": "sqlite-atomic-1da99747-v1",
+    "serverCommit": "1da997476651c2850ff7141e2b7cd512d0152a90",
+    "contractSha256": "5878999ce9e239d6642e4da858074b281ed465629432c578b3584eec47cbce6c",
+    "artifactSha256": "f87da56c813fe0e994ba60c29e8ba99eb48567dc561ac9f19ac2979e0599c1a6",
+    "operations": [
+      "get_access_principal",
+      "get_artifact_revision",
+      "get_capabilities",
+      "get_default_scope",
+      "get_liveness",
+      "get_readiness",
+      "get_scope",
+      "list_scopes",
+      "remember_memory",
+      "search_memory"
+    ],
+    "evidence": "desktop/VALIDATION.md#server-1da99747-protocol-qualification"
   }
 ]