dsh-agent-team-ui-testing 0.1.1 → 0.1.2

package/client.js

@@ -3,21 +3,28 @@ window.__ModuleLoader__.load({
   factory(require) {
     const React = require('react');
     const h = React.createElement;
+    // Portal target for the diagnostics overlay: the DSH settings modal is its own layer, so the
+    // overlay has to live at <body> level (with a high z-index) to win the stacking order.
+    let reactDom = null;
+    try { reactDom = require('react-dom'); } catch { reactDom = null; }
 
     const ID = 'ui-testing-browser';
+    /** 面板构建标识：刷新后用它确认浏览器里跑的是哪一份 client.js（排查「改了没生效」）。 */
+    const CLIENT_BUILD = '2026-11-11T16:20+08:00·address-history+go';
     const KIND = 'debug-view';
     const TITLE = '调试视图';
     /** 可选运行环境；本期只有 Web 视图可用，其余置灰。 */
     const ENVIRONMENTS = [
-      { id: 'web', label: 'Web 视图', ready: true },
-      { id: 'windows', label: 'Windows 视图', ready: false },
-      { id: 'android', label: 'Android 视图', ready: false },
-      { id: 'linux', label: 'Linux 视图', ready: false },
-      { id: 'macos', label: 'macOS 视图', ready: false },
-      { id: 'tui', label: 'TUI 视图', ready: false },
-      { id: 'harmonyos', label: 'HarmonyOS 视图', ready: false },
-      { id: 'game', label: '游戏视图', ready: false },
-      { id: 'three-d', label: '3D 视图', ready: false },
+      { id: 'web', label: 'Web 视图', short: 'Web', ready: true },
+      { id: 'windows', label: 'Windows 视图', short: 'Windows', ready: false },
+      { id: 'android', label: 'Android 视图', short: 'Android', ready: false },
+      { id: 'linux', label: 'Linux 视图', short: 'Linux', ready: false },
+      { id: 'macos', label: 'macOS 视图', short: 'macOS', ready: false },
+      { id: 'tui', label: 'TUI 视图', short: 'TUI', ready: false },
+      { id: 'harmonyos', label: 'HarmonyOS 视图', short: 'HarmonyOS', ready: false },
+      { id: 'game', label: '游戏视图', short: '游戏', ready: false },
+      { id: 'three-d', label: '3D 视图', short: '3D', ready: false },
+      { id: 'miniprogram', label: '小程序视图', short: '小程序', ready: false },
     ];
     /** 与 Host 半边的运行时通信（同源，走应用自身的鉴权）。 */
     const HOST_BASE = '/plugins/ui-testing';
@@ -45,6 +52,81 @@ window.__ModuleLoader__.load({
       });
     }
 
+    /**
+     * Address history: a bounded LIFO stack of the last visited page addresses.
+     *
+     * The stack is panel-local (localStorage, shared by the panels of this GUI origin) and keeps
+     * the newest entry at index 0. Only real HTTP(S) addresses are stored: `about:blank`, empty
+     * drafts and app-internal addresses never enter the list. Revisiting a URL moves it back to
+     * the front instead of duplicating it. These are pure helpers so the contract test can run the
+     * real implementations rather than a copy.
+     */
+    const ADDRESS_HISTORY_LIMIT = 7;
+    const ADDRESS_HISTORY_KEY = 'dsh-agent-team-ui-testing:address-history:v1';
+    function addressHistoryNormalize(list, limit = ADDRESS_HISTORY_LIMIT) {
+      const out = [];
+      for (const item of Array.isArray(list) ? list : []) {
+        const value = typeof item === 'string' ? item.trim() : '';
+        if (!/^https?:\/\//i.test(value) || out.includes(value)) continue;
+        out.push(value);
+        if (out.length >= limit) break;
+      }
+      return out;
+    }
+    function addressHistoryPush(list, raw, limit = ADDRESS_HISTORY_LIMIT) {
+      const value = typeof raw === 'string' ? raw.trim() : '';
+      const current = addressHistoryNormalize(list, limit);
+      if (!/^https?:\/\//i.test(value)) return current;
+      return addressHistoryNormalize([value].concat(current), limit);
+    }
+    function addressHistoryLabel(raw) {
+      const value = String(raw || '');
+      try {
+        const parsed = new URL(value);
+        const path = (parsed.pathname || '/') + (parsed.search || '');
+        return String(parsed.host || value) + (path === '/' ? '' : path);
+      } catch { return value; }
+    }
+    /** Local storage accessor: a privacy mode that throws must not break the address bar. */
+    function addressHistoryStorage() {
+      try { return typeof window !== 'undefined' && window.localStorage ? window.localStorage : null; } catch { return null; }
+    }
+    function addressHistoryRead(storage, limit = ADDRESS_HISTORY_LIMIT) {
+      try {
+        if (!storage) return [];
+        return addressHistoryNormalize(JSON.parse(storage.getItem(ADDRESS_HISTORY_KEY) || '[]'), limit);
+      } catch { return []; }
+    }
+    function addressHistoryWrite(storage, list) {
+      try {
+        if (!storage) return false;
+        storage.setItem(ADDRESS_HISTORY_KEY, JSON.stringify(addressHistoryNormalize(list)));
+        return true;
+      } catch { return false; }
+    }
+
+    /**
+     * Human-foreground claims (P0-D `browser_annotation`, docs/viewport-control.md).
+     *
+     * A mount claims "I am displaying my selected tab and I am visible"; the Host turns that into a
+     * ~1.5s freshness window, which is what lets the Agent draw an annotation a human can actually
+     * see. It is a *display* fact only: no claim means the Agent's `draw` is refused, never that the
+     * page is absent. Several panels may legitimately display at once (main column + side seat), so
+     * this is a set, not a single flag.
+     */
+    const guiForegroundClaims = new Set();
+    let guiForegroundSerial = 0;
+    function newGuiForegroundClaim() {
+      guiForegroundSerial += 1;
+      return 'fg:' + guiForegroundSerial;
+    }
+    /** Visible claims *and* a GUI page that is not backgrounded — otherwise nothing is displayed. */
+    function guiForegroundActive() {
+      if (guiForegroundClaims.size === 0) return false;
+      if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return false;
+      return true;
+    }
+
     function scopeHeaders(scope) {
       if (!scope) return {};
       const headers = { 'X-UI-Testing-Scope-Version': SCOPE_VERSION };
@@ -59,6 +141,10 @@ window.__ModuleLoader__.load({
       } else {
         headers['X-UI-Testing-Scope'] = 'recent';
       }
+      // "This runtime is my selected tab and I am visible" (docs/viewport-control.md): only sent
+      // while this mount really displays it, so the Host's window expires when the user switches
+      // tabs, closes the panel or backgrounds the GUI.
+      if (guiForegroundActive()) headers['X-UI-Testing-Gui-Foreground'] = '1';
       return headers;
     }
 
@@ -95,6 +181,97 @@ window.__ModuleLoader__.load({
       return payload;
     }
 
+    /* ---- Host config transport (M4) ------------------------------------------------------
+     * The Host revision is the only truth for the settings page and the panel environment
+     * selector. Every helper resolves with the Host payload or throws an Error carrying `.code`
+     * (`CONFIG_CONFLICT`, `CONFIG_UNAVAILABLE`, ...); callers render the failure and never fake a
+     * saved state. `scope` is `null` on the settings page (legacy/default, no scope headers).
+     * ------------------------------------------------------------------------------------- */
+    /**
+     * Upper bound for one config read, covering **both** the response headers and the JSON body.
+     * Without it a connection that never finishes would keep the poll's in-flight marker set
+     * forever: no new request, no stale marker, a page that looks frozen (M5).
+     */
+    const HOST_CONFIG_TIMEOUT_MS = 10000;
+
+    async function requestHostConfig(method, path, body, options) {
+      const scope = options && options.scope;
+      const outerSignal = options && options.signal;
+      const timeoutMs = options && Number.isFinite(options.timeoutMs) && options.timeoutMs > 0
+        ? Number(options.timeoutMs)
+        : 0;
+      const headers = Object.assign({}, scopeHeaders(scope));
+      // One controller per request: it carries its own deadline, and the caller's lifecycle signal
+      // (unmount) is forwarded into it so a hanging read is aborted on both paths.
+      const controller = timeoutMs && typeof AbortController === 'function' ? new AbortController() : null;
+      let timedOut = false;
+      let timer = null;
+      const onOuterAbort = () => { if (controller) controller.abort(); };
+      if (controller) {
+        if (outerSignal) {
+          if (outerSignal.aborted) controller.abort();
+          else outerSignal.addEventListener('abort', onOuterAbort, { once: true });
+        }
+        timer = setTimeout(() => { timedOut = true; controller.abort(); }, timeoutMs);
+      }
+      const init = {
+        method,
+        credentials: 'same-origin',
+        headers,
+        signal: controller ? controller.signal : outerSignal,
+        cache: 'no-store',
+      };
+      if (body !== undefined) {
+        headers['content-type'] = 'application/json';
+        init.body = JSON.stringify(body);
+      }
+      try {
+        const response = await fetch(HOST_BASE + path, init);
+        // `response.json()` is a second, separate wait: keep it inside the same deadline.
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok || payload.ok === false) {
+          const error = new Error(payload.error || ('配置请求失败：' + response.status));
+          error.code = payload.code || (response.status === 404 ? 'CONFIG_UNAVAILABLE' : 'CONFIG_REQUEST_FAILED');
+          error.status = response.status;
+          error.payload = payload;
+          throw error;
+        }
+        return payload;
+      } catch (error) {
+        if (timedOut) {
+          // 超时是一个可渲染的失败（→ stale），而不是静默的悬挂。
+          const timeoutError = new Error('配置请求超时（' + timeoutMs + 'ms）');
+          timeoutError.code = 'CONFIG_TIMEOUT';
+          timeoutError.timeout = true;
+          throw timeoutError;
+        }
+        throw error;
+      } finally {
+        if (timer !== null) clearTimeout(timer);
+        if (outerSignal && controller) outerSignal.removeEventListener('abort', onOuterAbort);
+      }
+    }
+
+    /** GET /config — `view` is `global` (settings page) or `session` (panel). */
+    function getHostConfig(scope, view, signal, timeoutMs) {
+      return requestHostConfig(
+        'GET',
+        '/config?view=' + encodeURIComponent(view || 'global'),
+        undefined,
+        { scope, signal, timeoutMs: timeoutMs || HOST_CONFIG_TIMEOUT_MS },
+      );
+    }
+
+    /** PUT /config — CAS write; resolves with the Host revision, never assumes success. */
+    function putHostConfig(patch, expectedRevision, scope) {
+      return requestHostConfig('PUT', '/config', { expectedRevision, scope: 'global', patch }, { scope });
+    }
+
+    /** POST /config/select — session environment selection for this panel scope. */
+    function selectHostEnvironment(environment, expectedRevision, scope) {
+      return requestHostConfig('POST', '/config/select', { scope: 'session', environment, expectedRevision }, { scope });
+    }
+
     /** The Host's cold/recent binding (ui.runtimeId) for a scope-bearing response. */
     function runtimeIdOf(payload) {
       if (!payload || typeof payload !== 'object') return '';
@@ -188,6 +365,7 @@ window.__ModuleLoader__.load({
       harmonyos: { preset: 'phone', fit: true },
       game: { preset: 'wide', fit: true },
       'three-d': { preset: 'wide', fit: true },
+      miniprogram: { preset: 'phone', fit: true },
     });
     function envDefaultSize(id) {
       const def = ENV_DEFAULTS[id] || ENV_DEFAULTS.web;
@@ -325,6 +503,13 @@ window.__ModuleLoader__.load({
           title: pickCollapseText(page.title) || null,
         },
         frameId: source.frameId === undefined || source.frameId === null ? null : String(source.frameId),
+        // 嵌套 frame 命中：Host 只在子 frame 上给 frame，selector 属于该 frame 的文档。
+        frame: source.frame && source.frame.main === false
+          ? {
+            id: pickCollapseText(source.frame.id) || null,
+            url: pickCollapseText(source.frame.url) || null,
+          }
+          : null,
         outerHTML: pickCollapseText(source.outerHTML) || null,
         outerHTMLTruncated: source.outerHTMLTruncated === true,
         outerHTMLLength: finite(source.outerHTMLLength),
@@ -372,6 +557,8 @@ window.__ModuleLoader__.load({
       lines.push('rect(文档坐标): x=' + pickNumberText(rect.x) + ', y=' + pickNumberText(rect.y)
         + ', ' + pickNumberText(rect.width) + '×' + pickNumberText(rect.height));
       if (payload.page && payload.page.url) lines.push('page: ' + payload.page.url);
+      // 嵌套 frame 的 selector 只在那个 frame 的文档里有效：不写出来，模型会当成主文档选择器。
+      if (payload.frame && payload.frame.url) lines.push('frame: ' + payload.frame.url + '（selector 在该 frame 文档内有效）');
       if (payload.outerHTMLTruncated) {
         const shown = Math.max(0, Array.from(payload.outerHTML || '').length - 1);
         const total = payload.outerHTMLLength === null ? '?' : String(payload.outerHTMLLength);
@@ -752,7 +939,7 @@ window.__ModuleLoader__.load({
       const message = String((error && error.message) || '');
       if (code === 'UNSUPPORTED' || code === 'NOT_FOUND' || code === 'TOOL_NOT_FOUND'
         || /未知指令|unknown action|unsupported|not\s*found/i.test(message)) {
-        return '当前 Host 不支持选元素，请重启 DSH 后刷新面板';
+        return '当前宿主不支持选元素，请重启 DSH 后刷新面板';
       }
       return '获取元素失败，请稍后重试';
     }
@@ -1097,6 +1284,82 @@ window.__ModuleLoader__.load({
      * layout), natural* are the decoded frame pixels. The host window DPR never enters this
      * formula: event.clientX/Y, getBoundingClientRect and the target viewport are all CSS px.
      */
+    /** 单选 <select> 面板浮层的几何参数（纯数据；契约测试按源码抽取校验）。 */
+    const SELECT_POP_GEOMETRY = {
+      itemHeight: 26, minWidth: 160, maxWidth: 280, edge: 8, gap: 4, pad: 4, maxVisibleItems: 12,
+    };
+    /** 点击与按下点之间的最大偏移：超过就算拖拽，不弹浮层。 */
+    const SELECT_CLICK_SLOP_PX = 4;
+
+    /**
+     * 原生 <select> 浮层的定位（纯函数，无 DOM）。
+     *
+     * 输入：点击点在画面框内的 CSS px、要显示的行数、画面框的可用宽高；输出浮层的
+     * left/top/width/maxHeight 以及是否上翻/左移。规则：
+     *   ① 优先在点击点下方展开；② 下方放不下、上方放得下 → 上翻；
+     *   ③ 两侧都放不下 → 取空间较大的一侧，并把高度截断（列表内部滚动）；
+     *   ④ 任何情况下都夹在框内（edge 内边距），水平越界则左移。
+     * 行数再乘 itemHeight 得到自然高度；maxVisibleItems 是"不滚动时最多显示几行"的上限。
+     */
+    function selectPopLayout(point, itemCount, bounds) {
+      const g = SELECT_POP_GEOMETRY;
+      const boxW = Math.max(0, Number(bounds && bounds.width) || 0);
+      const boxH = Math.max(0, Number(bounds && bounds.height) || 0);
+      const rawX = Number(point && point.x);
+      const rawY = Number(point && point.y);
+      const x = Number.isFinite(rawX) ? rawX : 0;
+      const y = Number.isFinite(rawY) ? rawY : 0;
+      const count = Math.max(0, Math.floor(Number(itemCount) || 0));
+      // 高度按"最多 maxVisibleItems 行"算，但**所有条目都要渲染**（容器自己滚动）：
+      // 截断只发生在高度上，绝不能把第 13 项之后的选项从列表里丢掉。
+      const rowsForHeight = Math.max(1, Math.min(count, g.maxVisibleItems));
+      const natural = rowsForHeight * g.itemHeight + g.pad * 2;
+      const minHeight = g.itemHeight + g.pad * 2;
+      const roomBelow = Math.max(0, boxH - y - g.gap - g.edge);
+      const roomAbove = Math.max(0, y - g.gap - g.edge);
+      let side = 'below';
+      let top;
+      let maxHeight;
+      if (natural <= roomBelow) {
+        top = y + g.gap;
+        maxHeight = natural;
+      } else if (natural <= roomAbove) {
+        side = 'above';
+        top = y - g.gap - natural;
+        maxHeight = natural;
+      } else if (roomBelow >= roomAbove) {
+        top = y + g.gap;
+        maxHeight = Math.max(minHeight, Math.min(natural, roomBelow));
+      } else {
+        side = 'above';
+        maxHeight = Math.max(minHeight, Math.min(natural, roomAbove));
+        top = y - g.gap - maxHeight;
+      }
+      // ④ 硬夹进画面框：极端窄/矮面板也不许画到框外。
+      if (top + maxHeight > boxH - g.edge) top = boxH - g.edge - maxHeight;
+      if (top < g.edge) top = g.edge;
+      const room = Math.max(1, boxW - g.edge * 2);
+      const preferred = Math.max(g.minWidth, Math.min(g.maxWidth, room));
+      const width = Math.max(1, Math.min(preferred, room));
+      const wantedLeft = x - g.pad;
+      const lastLeft = Math.max(g.edge, boxW - g.edge - width);
+      const left = Math.min(Math.max(g.edge, wantedLeft), lastLeft);
+      const visibleItems = Math.max(1, Math.floor((maxHeight - g.pad * 2) / g.itemHeight));
+      return {
+        left: Math.round(left * 1000) / 1000,
+        top: Math.round(top * 1000) / 1000,
+        width: Math.round(width * 1000) / 1000,
+        maxHeight: Math.round(maxHeight * 1000) / 1000,
+        side,
+        flippedUp: side === 'above',
+        shiftedLeft: left < wantedLeft - 0.5,
+        itemHeight: g.itemHeight,
+        pad: g.pad,
+        visibleItems,
+        scrolls: count > visibleItems,
+      };
+    }
+
     function paintedRect(rect, naturalW, naturalH) {
       const nw = Number(naturalW) || 0;
       const nh = Number(naturalH) || 0;
@@ -1139,6 +1402,7 @@ window.__ModuleLoader__.load({
 .utb-select:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
 .utb-select option:disabled { color: var(--dsw-alias-label-secondary); }
 .utb-env-caret { position: absolute; right: 7px; display: grid; place-items: center; pointer-events: none; color: var(--dsw-alias-label-secondary); }
+.utb-env-error { max-width: 220px; font-size: 11px; line-height: 14px; color: #f59e0b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .utb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .utb-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; flex: 0 0 auto; background: var(--dsw-alias-bg-layer-1); border-bottom: 1px solid var(--dsw-alias-border-l1); }
 .utb-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex: 0 0 auto; color: var(--dsw-alias-label-secondary); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
@@ -1148,12 +1412,31 @@ window.__ModuleLoader__.load({
 .utb-addr { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 10px; font: inherit; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-base); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; }
 .utb-addr::placeholder { color: var(--dsw-alias-label-secondary); }
 .utb-addr[data-invalid="true"] { border-color: var(--dsw-alias-state-error-primary); outline-color: var(--dsw-alias-state-error-primary); }
-.utb-addr:focus-visible, .utb-btn:focus-visible, .utb-menu-item:focus-visible, .utb-num:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+.utb-addr:focus-visible, .utb-btn:focus-visible, .utb-menu-item:focus-visible, .utb-num:focus-visible, .utb-addr-hist:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+.utb-addr-wrap { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
+.utb-addr-wrap .utb-addr { flex: 1 1 auto; padding-right: 30px; }
+.utb-addr-hist { position: absolute; top: 2px; right: 2px; bottom: 2px; display: inline-flex; align-items: center; justify-content: center; width: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-secondary); cursor: pointer; }
+.utb-addr-hist:hover { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }
+.utb-addr-hist:disabled { opacity: .45; cursor: not-allowed; }
+.utb-addr-hist[data-utb-history-toggle="open"] { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }
+.utb-addr-pop { right: 0; left: auto; min-width: 100%; max-width: 560px; max-height: 264px; overflow: auto; }
+.utb-addr-pop-head { padding: 4px 8px 6px; font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); }
+.utb-addr-pop-empty { padding: 8px; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.utb-addr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .utb-more { position: relative; flex: 0 0 auto; }
 .utb-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 208px; padding: 4px; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
 .utb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; font: inherit; text-align: left; color: var(--dsw-alias-label-primary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
 .utb-menu-item:hover:not(:disabled) { background: var(--dsw-alias-bg-layer-2); }
 .utb-menu-item:disabled { color: var(--dsw-alias-label-secondary); opacity: .6; cursor: not-allowed; }
+/* 原生 <select> 的面板侧浮层（浏览器弹层在 UI 图层，帧里看不到）。
+   观感复用 .utb-pop 那一套 token；定位由 selectPopLayout 纯函数给出。 */
+.utb-select-pop { overflow-y: auto; overflow-x: hidden; padding: 4px; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); outline: none; }
+.utb-select-pop:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+.utb-select-pop-item { display: block; width: 100%; padding: 4px 8px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+.utb-context-menu button { background: transparent; font-family: inherit; }
+.utb-select-pop-item:hover { background: var(--dsw-alias-bg-layer-2); }
+.utb-select-pop-item[data-utb-select-item="active"] { background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2)); color: var(--dsw-alias-brand-primary); }
+.utb-select-pop-item[data-utb-select-item="disabled"] { color: var(--dsw-alias-label-secondary); opacity: .55; cursor: not-allowed; }
 /* 调试工具弹窗被拦截时的本地提示 + 可点击降级链接（不写 Runtime lastError）。 */
 .utb-devtools-note { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; row-gap: 4px; padding: 6px 8px; font-size: 12px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); border-bottom: 1px solid var(--dsw-alias-border-l1); }
 .utb-devtools-note a { color: var(--dsw-alias-brand-primary); text-decoration: underline; }
@@ -1184,6 +1467,7 @@ window.__ModuleLoader__.load({
 .utb-annot-color:disabled { opacity: .55; cursor: not-allowed; }
 .utb-annot-width { width: 54px; }
 /* v2：横栏右侧的可见文案按钮「清除画布」（§11.4）与状态栏同步提示（§11.3）。 */
+.utb-annot-shot { width: auto; min-width: 0; height: 28px; padding: 0 10px; font-size: 12px; line-height: 1; white-space: nowrap; border-color: var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-base); }
 .utb-annot-clear { width: auto; min-width: 0; height: 28px; padding: 0 10px; margin-left: auto; font-size: 12px; line-height: 1; white-space: nowrap; border-color: var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-base); }
 .utb-annot-sync { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-state-warn-primary); }
 .utb-annot-layer { display: block; overflow: hidden; }
@@ -1248,6 +1532,13 @@ window.__ModuleLoader__.load({
 .utb-menu-row.utb-menu-row > svg { flex: 0 0 auto; }
 .utb-menu-row.utb-menu-row:hover { background: rgba(164, 183, 229, 0.14); background: color-mix(in srgb, var(--dsw-alias-label-primary) 14%, transparent); }
 .utb-menu-row.utb-menu-row:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -2px; }
+/* 视图层没有该环境时的占位：问号图标 + 说明，不留空白面板 */
+.utb-noview { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
+.utb-noview-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--dsw-alias-label-tertiary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 6%, transparent); }
+.utb-noview-text { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 18px; }
+.utb-noview-text strong { font-size: 13px; color: var(--dsw-alias-label-primary); }
+.utb-noview-text p { margin: 0; color: var(--dsw-alias-label-tertiary); }
+
 `;
 
     function IconBrowser({ size = 16 }) {
@@ -1308,6 +1599,16 @@ window.__ModuleLoader__.load({
         h('path', { d: 'M3 9.5h18' }),
         h('path', { d: 'M6.3 7.3h.01M8.8 7.3h.01' }));
     }
+    /** 地址栏历史：时钟箭头（点击展开最近访问）。 */
+    function IconHistory() {
+      return h('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+        h('path', { d: 'M3.5 12a8.5 8.5 0 1 0 2.6-6.1' }), h('path', { d: 'M3.2 4.4v4.2h4.2' }), h('path', { d: 'M12 8.2V12l2.9 1.8' }));
+    }
+    /** 转到：右箭头 + 落点竖线（等同回车跳转地址）。 */
+    function IconGo() {
+      return h('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+        h('path', { d: 'M4.5 12h12' }), h('path', { d: 'm12.2 7.4 4.6 4.6-4.6 4.6' }), h('path', { d: 'M19.6 6.4v11.2' }));
+    }
     function IconMore() {
       return h('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
         h('circle', { cx: 5.5, cy: 12, r: 1.5 }), h('circle', { cx: 12, cy: 12, r: 1.5 }), h('circle', { cx: 18.5, cy: 12, r: 1.5 }));
@@ -2025,13 +2326,36 @@ window.__ModuleLoader__.load({
       const [syncMismatch, setSyncMismatch] = React.useState(false);
       const [seedStatus, setSeedStatus] = React.useState(null);
       const [blankHint, setBlankHint] = React.useState('');
+      /**
+       * 原生 <select> 的面板侧浮层。浏览器把弹层画在 UI 图层，帧里根本看不到，所以键盘可用、
+       * 鼠标不可用；这里用点击点向 Host 问命中，命中 select 就在点击点画自己的列表。
+       * 形状：{anchor:{x,y}, bounds:{width,height}, select:<projection>, reason:<不支持原因|null>, activeIndex}
+       */
+      const [selectPop, setSelectPop] = React.useState(null);
+      const selectPopRef = React.useRef(null);
+      selectPopRef.current = selectPop;
+      const selectPopSeqRef = React.useRef(0);
+      const selectPopElementRef = React.useRef(null);
+      const [pageContext, setPageContext] = React.useState(null);
+      const pageContextRef = React.useRef(null);
+      pageContextRef.current = pageContext;
+      const pageContextSeqRef = React.useRef(0);
+      const pageContextElementRef = React.useRef(null);
+      const inputQueueRef = React.useRef(Promise.resolve());
       const [inputNotice, setInputNotice] = React.useState('');
       const [tabNotice, setTabNotice] = React.useState('');
       const [tabOpening, setTabOpening] = React.useState(false);
+      // The tab group list is cached in a ref (it must survive a transient remote=null): a local
+      // prune after a Host-confirmed close needs its own render bump.
+      const [, setTabsTick] = React.useState(0);
       const [pending, setPending] = React.useState(false);
       const [navBusy, setNavBusy] = React.useState(false);
       const [mode, setMode] = React.useState('idle');
       const [env, setEnv] = React.useState('web');
+      // Host-backed environment selection: busy while the POST /config/select is in flight, and a
+      // local failure notice that keeps the previous value (never a silent switch).
+      const [envBusy, setEnvBusy] = React.useState(false);
+      const [envNotice, setEnvNotice] = React.useState('');
       const [displaySwitching, setDisplaySwitching] = React.useState(false);
       const [shot, setShot] = React.useState('');
       const [remote, setRemote] = React.useState({ mode: 'idle', activity: '', url: '', running: false });
@@ -2112,6 +2436,9 @@ window.__ModuleLoader__.load({
       const frameGeomRef = React.useRef(null);
       const pendingGeomRef = React.useRef(null);
       const dragRef = React.useRef({ active: false, pointerId: -1, x: 0, y: 0 });
+      /** 最近一次 pointerdown 的面板坐标：用来区分"点击"与"拖拽"（只有点击才弹 select 浮层）。 */
+      const selectClickRef = React.useRef({ x: 0, y: 0, pointerId: -1, valid: false });
+      // Host dispatches a complete right-click in one queued operation, including release.
       // P0-C「拖拽」模式：手势状态与共享 canvasX/canvasY 的节流写入（同一时刻最多一个 set 在途）。
       const panDragRef = React.useRef({
         active: false, pointerId: -1, startClientX: 0, startClientY: 0,
@@ -2195,6 +2522,12 @@ window.__ModuleLoader__.load({
       const [annotStaleState, setAnnotStaleState] = React.useState({ stale: false, staleReason: null });
       // A live gesture/erase exists (drives the 清除画布 disabled state without per-move renders).
       const [annotBusy, setAnnotBusy] = React.useState(false);
+      // 标注栏「截图」的状态：按钮进行态 + 就地提示（成功/失败原因都给具体文案）。
+      // 光标形状传递：预览层跟随页面命中元素的 computed cursor（手型/文本/抓取…），
+      // 而不是永远显示箭头。只接受 CSS 关键字白名单，`url(...)` 一律不落到样式上。
+      const [frameCursor, setFrameCursor] = React.useState('auto');
+      const [annotShotBusy, setAnnotShotBusy] = React.useState(false);
+      const [annotShotNotice, setAnnotShotNotice] = React.useState('');
       const annotSyncRef = React.useRef({ state: 'idle', timer: 0 });
       // Identity gate: no old shape is rendered or published before the new scope's first trusted
       // state. `epoch` is the scope generation the gate belongs to; `key` is the D key.
@@ -2240,6 +2573,16 @@ window.__ModuleLoader__.load({
       // runtime id returned by the first /state (or /ensure); `binding` is empty until then.
       const seatSessionId = props && typeof props.seatSessionId === 'string' ? props.seatSessionId : '';
       const visible = !props || props.visible !== false;
+      // Human-foreground claim (P0-D `browser_annotation`): recycled by this mount lifetime, added
+      // while the seat is visible and withdrawn on unmount, so the Host's window can expire.
+      const foregroundClaimRef = React.useRef('');
+      if (!foregroundClaimRef.current) foregroundClaimRef.current = newGuiForegroundClaim();
+      React.useEffect(() => {
+        const claim = foregroundClaimRef.current;
+        if (visible) guiForegroundClaims.add(claim);
+        else guiForegroundClaims.delete(claim);
+        return () => guiForegroundClaims.delete(claim);
+      }, [visible]);
       const capture = props && props.capture ? props.capture : { sessionId: '', resolution: 'none' };
       // Internal browser tabs (one Runtime per tab): the Host group list is the only source.
       const panelViews = remote && remote.ui && remote.ui.version === 1 && Array.isArray(remote.ui.views)
@@ -2293,6 +2636,51 @@ window.__ModuleLoader__.load({
       const scopeEpoch = scopeEpochRef.current;
       const scopeRef = React.useRef(scope);
       scopeRef.current = scope;
+      // Host config for this panel scope: the selector's allowed environments and current
+      // resolution come from the Host, not from the static ENVIRONMENTS list.
+      const hostConfig = useHostConfig(scope, 'session');
+      // 设置页改完开关/选择后立刻同步过来：重读一次配置，组合框与视图跟着变，不用等刷新。
+      useHostConfigChange(() => {
+        if (hostConfig && typeof hostConfig.reload === 'function') hostConfig.reload();
+      });
+      const hostResolved = hostConfig.state.resolved || null;
+      const resolvedEnvironment = hostResolved && hostResolved.environment ? String(hostResolved.environment) : '';
+      const allowedEnvironments = hostResolved && Array.isArray(hostResolved.enabledEnvironments)
+        ? hostResolved.enabledEnvironments.map(String) : null;
+      /**
+       * 组合框**只列开关已打开的目标环境**（`environments.<id>.enabled`）：
+       * 开了 web + android，就只出现这两个选项。打开的但视图层没实现 → 选中后渲染空态
+       * （执行环境不变）。宿主配置还没读到（`config` 为 null）时按可执行集合 + web 兜底，
+       * 免得一上来列表是空的。
+       */
+      const envEnabledList = React.useMemo(() => ENVIRONMENTS
+        .map((option) => {
+          const fromConfig = enabledFromConfig(hostConfig.state.config, option.id);
+          const enabled = fromConfig === null
+            ? (option.id === 'web' || (allowedEnvironments ? allowedEnvironments.indexOf(option.id) !== -1 : false))
+            : fromConfig;
+          return Object.assign({}, option, { enabled });
+        })
+        .filter((option) => option.enabled), [hostConfig.state.config, allowedEnvironments]);
+      const envOptions = React.useMemo(() => (envEnabledList.length
+        ? envEnabledList
+        : ENVIRONMENTS.filter((option) => option.id === 'web').map((option) => Object.assign({}, option, { enabled: true }))),
+      [envEnabledList]);
+
+      // 当前选中的环境被关掉时（用户在设置页关开关），退回宿主当前执行环境，避免组合框空值。
+      React.useEffect(() => {
+        if (envOptions.some((option) => option.id === env)) return;
+        const fallback = envOptions.some((option) => option.id === resolvedEnvironment)
+          ? resolvedEnvironment
+          : ((envOptions[0] && envOptions[0].id) || 'web');
+        setEnv(fallback);
+      }, [envOptions, env, resolvedEnvironment]);
+      React.useEffect(() => {
+        if (!resolvedEnvironment) return;
+        const option = ENVIRONMENTS.find((item) => item.id === resolvedEnvironment);
+        if (!option || !option.ready) return; // an unimplemented environment never becomes current
+        setEnv((current) => (current === resolvedEnvironment ? current : resolvedEnvironment));
+      }, [resolvedEnvironment]);
       const visibleRef = React.useRef(true);
       visibleRef.current = visible;
       const readyRef = React.useRef(false);
@@ -2414,6 +2802,16 @@ window.__ModuleLoader__.load({
         tabNoticeTimerRef.current = window.setTimeout(() => setTabNotice(''), 4000);
       }
 
+      /** Drop one view from the cached group list the moment the Host confirms its close. */
+      function dropClosedView(view) {
+        const current = stableViewsRef.current;
+        if (!current || !view) return;
+        const views = current.views.filter((item) => item && item.id !== view.id);
+        if (views.length === current.views.length) return;
+        stableViewsRef.current = { ...current, views, viewsRevision: (current.viewsRevision || 0) + 1 };
+        setTabsTick((value) => value + 1);
+      }
+
       function closeView(view) {
         if (!view) return;
         if (view.kind === 'primary') {
@@ -2438,6 +2836,9 @@ window.__ModuleLoader__.load({
         // Close with the child's own binding. The Host answer is the only success signal; on
         // success an active child falls back locally (its own /state may already be gone).
         callHost('close', {}, { scope: scopeSnapshot('recent', '', view.runtimeId, false) }).then(() => {
+          // The Host answer is the success signal: retire the view locally so the strip, the
+          // active tab and the empty state do not wait one more /state poll to agree.
+          dropClosedView(view);
           if (activeViewId === view.id) {
             viewSwitchRef.current = true;
             retiredRuntimeRef.current = '';
@@ -2445,8 +2846,10 @@ window.__ModuleLoader__.load({
           }
         }).catch((error) => {
           const code = String((error && error.code) || '');
+          // A refused close is never silent: the tab stays in the strip, so the user has to learn
+          // why (a stale/unknown binding now answers SCOPE_NOT_FOUND instead of a fake ok).
           if (code === 'BUSY') showTabNotice('标签正被 Agent 操作；稍后再关闭');
-          /* else: keep the current selection; the poll owns the real state */
+          else showTabNotice('关闭标签失败，请稍后重试');
         });
       }
 
@@ -2679,6 +3082,39 @@ window.__ModuleLoader__.load({
         setError('');
       }
 
+      /* ----------------------------------------------------------------------------------------
+       * Address history (panel-local, docs/getting-started.md): the newest 7 visited HTTP(S)
+       * addresses, newest first. Recorded from the *accepted* address, so a redirect or an Agent
+       * navigation is stored as the page that actually loaded, and a failed navigation is not.
+       * -------------------------------------------------------------------------------------- */
+      const [addressHistory, setAddressHistory] = React.useState(() => addressHistoryRead(addressHistoryStorage()));
+      const [historyOpen, setHistoryOpen] = React.useState(false);
+      const historyAddress = acceptedAddress();
+      React.useEffect(() => {
+        if (!/^https?:\/\//i.test(historyAddress)) return;
+        const storage = addressHistoryStorage();
+        const current = addressHistoryRead(storage);
+        const next = addressHistoryPush(current, historyAddress);
+        if (next.length === current.length && next[0] === current[0]) return;
+        addressHistoryWrite(storage, next);
+        setAddressHistory(next);
+      }, [historyAddress]);
+      // The dropdown is a local popover: it never survives a mode switch or a scope change.
+      React.useEffect(() => {
+        if (!historyOpen) return undefined;
+        const close = (event) => { if (!event.target.closest || !event.target.closest('.utb-addr-wrap')) setHistoryOpen(false); };
+        const escape = (event) => { if (event.key === 'Escape') setHistoryOpen(false); };
+        document.addEventListener('mousedown', close);
+        document.addEventListener('keydown', escape);
+        return () => { document.removeEventListener('mousedown', close); document.removeEventListener('keydown', escape); };
+      }, [historyOpen]);
+      React.useEffect(() => { setHistoryOpen(false); }, [scopeEpoch, annotOn]);
+      function chooseHistory(url) {
+        setHistoryOpen(false);
+        if (annotRef.current.on) return; // local navigation is disabled in annotation mode
+        submit(undefined, url);
+      }
+
       /* ----------------------------------------------------------------------------------------
        * Shared viewport state (Host `ui.view`).
        *
@@ -4180,6 +4616,94 @@ window.__ModuleLoader__.load({
       }
 
       /** 清除画布：清已完成 + 草稿/编辑，立即发布空文档，保留模式/工具/样式（§11.4）。 */
+      /**
+       * 标注栏「截图」：把**当前页面 + 已接受的标注**合成一张 PNG，作为附件放进聊天框。
+       *
+       * 语义边界（docs/viewport-control.md）：走 Host 的 `POST /screenshot {includeAnnotations:true}`，
+       * 也就是 Agent 的 `browser_screenshot{includeAnnotations:true}` 同一条离屏合成路径，因此像素与
+       * 证据完全一致，不是面板自己另画一遍 SVG。它沿用面板的 scope 身份；附件通过 Conversation 服务
+       * 注册成 draft attachment（`createDrafts` + `addAttachments`），照片字节随消息发送，不落盘。
+       */
+      function annotShotTarget() {
+        const sid = baseIdentity && baseIdentity.kind === 'session' ? String(baseIdentity.sessionId || '') : '';
+        if (!sid) return { ok: false, reason: '当前面板没有绑定会话，无法加入聊天框附件' };
+        const ctx = pluginContext;
+        if (!ctx || typeof ctx.get !== 'function') return { ok: false, reason: '聊天框服务不可用' };
+        let sessions = null;
+        let conversation = null;
+        try {
+          sessions = ctx.get('sessions');
+          conversation = ctx.get('conversation');
+        } catch {
+          return { ok: false, reason: '聊天框服务不可用' };
+        }
+        if (!conversation || typeof conversation.createDrafts !== 'function'
+          || !conversation.input || typeof conversation.input.for !== 'function'
+          || !sessions || typeof sessions.binding !== 'function') {
+          return { ok: false, reason: '聊天框服务不可用' };
+        }
+        let binding = null;
+        try { binding = sessions.binding(sid); } catch { binding = null; }
+        if (!binding || !binding.ctx) return { ok: false, reason: '会话尚未就绪（未 retain），稍后再试' };
+        let face = null;
+        try { face = conversation.input.for(binding.ctx); } catch { face = null; }
+        if (!face || typeof face.addAttachments !== 'function') return { ok: false, reason: '聊天框服务不可用' };
+        return { ok: true, sid, conversation, face };
+      }
+
+      async function captureAnnotationShot() {
+        if (annotShotBusy) return;
+        setAnnotShotNotice('');
+        const target = annotShotTarget();
+        if (!target.ok) {
+          setAnnotShotNotice('截图失败：' + target.reason);
+          return;
+        }
+        setAnnotShotBusy(true);
+        try {
+          // 先让「已接受」的文档追上最新笔画：截图取的是 Host 侧文档，pending 时不等待就会少一笔。
+          if (annotDirtyRef.current || annotSyncRef.current.state === 'pending') {
+            try { annotFlushPending(); } catch { /* best effort */ }
+            await new Promise((resolve) => { window.setTimeout(resolve, 260); });
+          }
+          const scopeNow = scopeRef.current;
+          const response = await fetch(HOST_BASE + '/screenshot', {
+            method: 'POST',
+            headers: Object.assign({ 'content-type': 'application/json' }, scopeHeaders(scopeNow)),
+            credentials: 'same-origin',
+            body: JSON.stringify({ includeAnnotations: true }),
+          });
+          const payload = await response.json().catch(() => null);
+          if (!response.ok || !payload || payload.ok !== true || !payload.image) {
+            throw new Error((payload && (payload.error || payload.reason)) || ('HTTP ' + response.status));
+          }
+          const binary = atob(payload.image);
+          const bytes = new Uint8Array(binary.length);
+          for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          const file = new File([bytes], 'annotation-' + stamp + '.png', { type: 'image/png' });
+          const drafts = target.conversation.createDrafts(target.sid, [file], false);
+          const list = Array.isArray(drafts) ? drafts : [];
+          const ids = list.map((draft) => draft && draft.id).filter(Boolean);
+          if (!ids.length) throw new Error('附件没有被聊天框接受');
+          const added = target.face.addAttachments(ids);
+          if (!added) {
+            // 回车发送中/命令执行中的聊天框会拒绝新附件：立刻释放，避免留下看不见的孤儿附件。
+            for (const draft of list) {
+              try { target.conversation.releaseDraftAttachment(draft.id); } catch { /* best effort */ }
+            }
+            throw new Error('聊天框正忙（发送中），稍后再试');
+          }
+          // 成功不弹任何提示：附件本身就出现在聊天框里，那一张缩略图就是结果；
+          // 失败才在按钮旁给具体原因（静默失败才是真问题）。
+          try { if (typeof target.face.focus === 'function') target.face.focus(); } catch { /* best effort */ }
+        } catch (error) {
+          setAnnotShotNotice('截图失败：' + String((error && error.message) || error));
+        } finally {
+          setAnnotShotBusy(false);
+        }
+      }
+
       function clearAnnotCanvas() {
         if (!annotRef.current.on) return;
         // The pointerdown of the button already cancelled a live edit; this covers keyboard activation.
@@ -5416,6 +5940,16 @@ window.__ModuleLoader__.load({
           pickCommitAt(event);
           return;
         }
+        if (event.button === 2) {
+          if (!frameInputReady()) return;
+          const rightGeom = frameGeometry();
+          const rightPoint = rightGeom ? mapEventPoint(event, rightGeom) : null;
+          if (!rightPoint || !rightPoint.inside || rightPoint.blank) return;
+          event.preventDefault();
+          event.currentTarget.focus();
+          openPageContext(event, rightPoint);
+          return;
+        }
         if (event.button !== 0) return;
         if (panMode) {
           // Pan is the recovery path: it must start even when page input is fail-closed (stale
@@ -5453,10 +5987,96 @@ window.__ModuleLoader__.load({
         event.preventDefault();
         event.currentTarget.focus();
         dragRef.current = { active: true, pointerId: event.pointerId, x: point.x, y: point.y };
+        selectClickRef.current = { x: event.clientX, y: event.clientY, pointerId: event.pointerId, valid: true };
         try { event.currentTarget.setPointerCapture(event.pointerId); } catch { /* ignore */ }
         sendEvents([{ kind: 'mouse', type: 'mousePressed', x: point.x, y: point.y, button: 'left', buttons: 1, clickCount: 1 }]);
       }
 
+      /** CSS cursor 关键字白名单：页面只能在这几个值里改变预览光标。 */
+      const PAGE_CURSOR_KEYWORDS = new Set([
+        'auto', 'default', 'pointer', 'text', 'move', 'grab', 'grabbing', 'crosshair', 'wait', 'help',
+        'progress', 'cell', 'copy', 'alias', 'context-menu', 'not-allowed', 'no-drop', 'zoom-in',
+        'zoom-out', 'all-scroll', 'vertical-text', 'col-resize', 'row-resize', 'n-resize', 's-resize',
+        'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize',
+        'ns-resize', 'nesw-resize', 'nwse-resize', 'none',
+      ]);
+      function pageCursorKeyword(raw) {
+        const value = typeof raw === 'string' ? raw.trim().toLowerCase() : '';
+        return PAGE_CURSOR_KEYWORDS.has(value) ? value : 'auto';
+      }
+      /**
+       * 光标形状传递（`POST /element {cursorOnly:true}`）。
+       *
+       * 页面里 `cursor:pointer` 的元素在真实浏览器里是手型，但面板把画面画成 <img>，指针形状来自
+       * 面板自己的 CSS —— 于是"里面是手型、外面是箭头"。这里按节流询问页面命中的 computed cursor
+       * 并写回预览层；迟到的响应按序号丢弃，避免快速移动时旧位置的光标覆盖新位置。
+       */
+      // 面板侧"以为还按着"的键（code → 键信息），用于焦点离开时补 keyUp。
+      const panelHeldKeysRef = React.useRef(new Map());
+      const cursorProbeAtRef = React.useRef(0);
+      const cursorProbeSeqRef = React.useRef(0);
+      const cursorProbeTimerRef = React.useRef(0);
+      const cursorProbePointRef = React.useRef(null);
+      function resetFrameCursor() {
+        cursorProbeSeqRef.current += 1;
+        if (cursorProbeTimerRef.current) window.clearTimeout(cursorProbeTimerRef.current);
+        cursorProbeTimerRef.current = 0;
+        cursorProbePointRef.current = null;
+        cursorProbeAtRef.current = 0;
+        setFrameCursor('auto');
+      }
+      function frameCursorAllowed() {
+        return visibleRef.current && readyRef.current && !writesPausedRef.current
+          && !annotRef.current.on && !pickRef.current.on && !panModeRef.current;
+      }
+      function probeFrameCursor() {
+        cursorProbeTimerRef.current = 0;
+        const client = cursorProbePointRef.current;
+        if (!client || !frameCursorAllowed()) { resetFrameCursor(); return; }
+        const geom = frameGeometry();
+        const canvas = canvasPosition();
+        if (!geom || !canvas || !inputGeomReady() || !canvasBarrier().ready) {
+          // A replacement image may have naturalWidth=0 until decoded. Keep the final hover
+          // through that brief gap as well as input-barrier gaps, with a bounded retry.
+          if (Date.now() < client.expiresAt) cursorProbeTimerRef.current = window.setTimeout(probeFrameCursor, 120);
+          else resetFrameCursor();
+          return;
+        }
+        // Re-map the latest pointer at dispatch time; a trailing probe must not reuse old geometry.
+        const point = mapEventPoint(client, geom);
+        if (!point.inside || point.blank) { resetFrameCursor(); return; }
+        const seq = cursorProbeSeqRef.current;
+        const epoch = scopeEpochRef.current;
+        const documentKey = selectPopDocument();
+        const canvasKey = selectPopCanvas();
+        const current = () => seq === cursorProbeSeqRef.current && epoch === scopeEpochRef.current
+          && documentKey === selectPopDocument() && canvasKey === selectPopCanvas() && frameCursorAllowed();
+        cursorProbeAtRef.current = Date.now();
+        callHost('element', { x: point.q.x + canvas.x, y: point.q.y + canvas.y, cursorOnly: true }, {
+          scope: scopeRef.current,
+          signal: abortRef.current ? abortRef.current.signal : undefined,
+        }).then((reply) => {
+          if (!current()) return;
+          const element = reply && reply.element ? reply.element : null;
+          setFrameCursor(pageCursorKeyword(element && element.cursor));
+        }).catch(() => { if (current()) setFrameCursor('auto'); });
+      }
+      function scheduleFrameCursor(event) {
+        // Invalidate the previous position even when this move falls inside the throttle window.
+        cursorProbeSeqRef.current += 1;
+        cursorProbePointRef.current = { clientX: event.clientX, clientY: event.clientY, expiresAt: Date.now() + 1000 };
+        if (cursorProbeTimerRef.current) return;
+        const wait = 120 - (Date.now() - cursorProbeAtRef.current);
+        if (wait <= 0) probeFrameCursor();
+        else cursorProbeTimerRef.current = window.setTimeout(probeFrameCursor, wait);
+      }
+      const cursorDocumentKey = selectPopDocument();
+      const cursorCanvasKey = selectPopCanvas();
+      React.useEffect(() => {
+        resetFrameCursor();
+        return resetFrameCursor;
+      }, [scopeEpoch, cursorDocumentKey, cursorCanvasKey, visible, ready, identity.paused, panMode, annotOn, pickOn]);
+
       function onFramePointerMove(event) {
         if (annotRef.current.on) return; // annotation mode: zero page input
         // 选元素模式：悬浮只更新节流命中请求，零页面 hover 派发。
@@ -5473,6 +6093,8 @@ window.__ModuleLoader__.load({
           return;
         }
         if (panMode) return; // 拖拽模式：不向页面派发 hover/拖拽移动
+        // Retain the last hover even if frame sync briefly blocks page input.
+        scheduleFrameCursor(event);
         // Fail closed for page input while O≠0 cannot be proven: no stale-coordinate move/release.
         if (!inputGeomReady() || !canvasBarrier().ready) return;
         const drag = dragRef.current;
@@ -5481,7 +6103,7 @@ window.__ModuleLoader__.load({
         if (!geom) return;
         const point = mapEventPoint(event, geom);
         if (!point.inside) return;
-        if (point.blank) return; // blank never dispatches (a drag into blank keeps its button state)
+        if (point.blank) { resetFrameCursor(); return; } // blank never dispatches (a drag into blank keeps its button state)
         const now = Date.now();
         if (now - hoverAtRef.current < 60) return;
         hoverAtRef.current = now;
@@ -5489,8 +6111,294 @@ window.__ModuleLoader__.load({
         sendEvents([{ kind: 'mouse', type: 'mouseMoved', x: point.x, y: point.y, buttons: dragging ? 1 : 0 }]);
       }
 
+      /** 不支持浮层的形态 → 原因字符串（null = 支持）。与 Host 侧 selectShapeSupport 同义。 */
+      function selectPopReason(projection) {
+        if (!projection) return 'detached';
+        if (projection.multiple === true) return 'multiple';
+        if (Number(projection.size) > 1) return 'size';
+        if (!projection.options || projection.options.length === 0) return 'empty';
+        return null;
+      }
+
+      function selectPopClose(restoreFocus = false) {
+        selectPopSeqRef.current += 1;
+        selectPopRef.current = null;
+        setSelectPop(null);
+        if (restoreFocus && frameImgRef.current) frameImgRef.current.focus({ preventScroll: true });
+      }
+
+      function selectPopDocument() {
+        const state = remoteRef.current;
+        const ui = state && state.ui;
+        return annotDKey(annotDOf(ui)) + '|' + String(ui && ui.address || state && state.url || '');
+      }
+
+      function selectPopCanvas() {
+        const canvas = canvasPosition();
+        const view = viewRef.current;
+        return canvas ? JSON.stringify([canvas.x, canvas.y, view && view.scale]) : '';
+      }
+
+      function selectPopIsCurrent(pop) {
+        // A visible hint survives newer probes; only their responses/option popovers depend on seq.
+        return pop && pop.epoch === scopeEpochRef.current && (pop.reason || pop.seq === selectPopSeqRef.current)
+          && pop.document === selectPopDocument() && pop.canvas === selectPopCanvas()
+          && readyRef.current && !writesPausedRef.current && !annotRef.current.on && !pickRef.current.on;
+      }
+
+      /**
+       * 一次点击之后问 Host 命中了什么：命中 <select> 就在点击点画浮层。
+       * 全部复用 picker 的坐标换算（q + 画布偏移 = 页面文档坐标），并沿用"画布原点移动就丢弃"
+       * 的规则，避免浮层画在错位的位置。
+       */
+      function selectPopProbe(event, point) {
+        if (!readyRef.current || writesPausedRef.current) return;
+        const canvas = canvasPosition();
+        const box = frameBoxRef.current;
+        if (!canvas || !box) return;
+        const rect = box.getBoundingClientRect();
+        const epoch = scopeEpochRef.current;
+        const seq = selectPopSeqRef.current + 1;
+        selectPopSeqRef.current = seq;
+        const signal = abortRef.current ? abortRef.current.signal : undefined;
+        const context = { epoch, seq, scope: scopeRef.current, document: selectPopDocument(), canvas: selectPopCanvas() };
+        callHost('element', { x: point.q.x + canvas.x, y: point.q.y + canvas.y, detail: false }, {
+          scope: context.scope,
+          signal,
+        }).then((payload) => {
+          if (!selectPopIsCurrent(context)) return;
+          const element = payload && payload.element;
+          const projection = element && element.select ? element.select : null;
+          if (!projection || !projection.target) { selectPopClose(); return; }
+          const reason = selectPopReason(projection);
+          const current = selectPopRef.current;
+          // Keep the existing DOM/live region until dismissal instead of re-triggering the hint.
+          if (reason && current?.reason && selectPopIsCurrent(current)) return;
+          const options = projection.options || [];
+          const selectedIndex = options.findIndex((option) => option.selected);
+          setSelectPop({
+            ...context,
+            anchor: { x: event.clientX - rect.left, y: event.clientY - rect.top },
+            bounds: { width: rect.width, height: rect.height },
+            select: projection,
+            reason,
+            activeIndex: selectedIndex >= 0 ? selectedIndex : 0,
+          });
+        }).catch(() => {
+          if (selectPopIsCurrent(context)) selectPopClose();
+        });
+      }
+
+      /** 选中一项：写回 → 补一次 Escape 关掉可能已打开的原生弹层 → 收起浮层。 */
+      function selectPopChoose(option) {
+        const pop = selectPopRef.current;
+        if (!selectPopIsCurrent(pop) || pop.reason || !option || option.disabled) return;
+        const signal = abortRef.current ? abortRef.current.signal : undefined;
+        const optionIndex = pop.select.options.indexOf(option);
+        selectPopClose(true);
+        const settleEscape = () => {
+          if (pop.epoch !== scopeEpochRef.current || pop.document !== selectPopDocument()) return;
+          sendEvents([
+            { kind: 'key', type: 'keyDown', key: 'Escape', code: 'Escape', virtualKeyCode: 27, modifiers: 0 },
+            { kind: 'key', type: 'keyUp', key: 'Escape', code: 'Escape', virtualKeyCode: 27, modifiers: 0 },
+          ]);
+        };
+        callHost('select', { value: option.value, optionIndex, target: pop.select.target }, { scope: pop.scope, signal })
+          .then((payload) => {
+            if (!payload || payload.ok !== true) {
+              noteInputError(new Error('下拉写入失败'));
+              return;
+            }
+            // 顺序很重要：先写回再 Escape。反过来的话，Escape 会先把用户刚选的值撤销掉。
+            settleEscape();
+          })
+          .catch((error) => { noteInputError(error); });
+      }
+
+      /** 浮层内键盘：↑↓ 移动（跳过 disabled）、Enter 选中、Esc 关闭；不支持形态只有 Esc。 */
+      function onSelectPopKeyDown(event) {
+        const pop = selectPopRef.current;
+        if (!pop) return;
+        if (event.key === 'Escape' || event.key === 'Esc') {
+          event.preventDefault();
+          event.stopPropagation();
+          selectPopClose(true);
+          sendEvents(panelKeyEvents(event));
+          return;
+        }
+        if (pop.reason) {
+          const events = panelKeyEvents(event);
+          if (events.length) { event.preventDefault(); sendEvents(events); }
+          return;
+        }
+        const options = pop.select.options || [];
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          event.preventDefault();
+          event.stopPropagation();
+          if (!options.length) return;
+          const step = event.key === 'ArrowDown' ? 1 : -1;
+          let index = Number.isInteger(pop.activeIndex) ? pop.activeIndex : 0;
+          for (let hop = 0; hop < options.length; hop += 1) {
+            index = (index + step + options.length) % options.length;
+            if (!options[index].disabled) break;
+          }
+          setSelectPop(Object.assign({}, pop, { activeIndex: index }));
+          return;
+        }
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.stopPropagation();
+          const option = options[pop.activeIndex];
+          if (option && !option.disabled) selectPopChoose(option);
+        }
+      }
+
+      /** 点击浮层外部关闭（面板任意位置，含画面区的下一次按下）。 */
+      React.useEffect(() => {
+        const onDocumentPointerDown = (event) => {
+          const node = selectPopElementRef.current;
+          if (node && event.target && typeof node.contains === 'function' && node.contains(event.target)) return;
+          // Re-clicking page controls must not collapse/reinsert the outside-preview hint row.
+          if (selectPopRef.current?.reason && frameImgRef.current?.contains(event.target)) return;
+          selectPopClose();
+        };
+        document.addEventListener('pointerdown', onDocumentPointerDown, true);
+        return () => document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+      }, []);
+
+      React.useEffect(() => {
+        if (selectPopRef.current && !selectPopIsCurrent(selectPopRef.current)) selectPopClose();
+      });
+
+      function closePageContext(restoreFocus = false) {
+        pageContextSeqRef.current += 1;
+        pageContextRef.current = null;
+        setPageContext(null);
+        if (restoreFocus && frameImgRef.current) frameImgRef.current.focus({ preventScroll: true });
+      }
+
+      function pageContextCurrent(context) {
+        return context && context.seq === pageContextSeqRef.current && context.epoch === scopeEpochRef.current
+          && context.document === selectPopDocument() && context.canvas === selectPopCanvas()
+          && readyRef.current && !writesPausedRef.current && !annotRef.current.on && !pickRef.current.on;
+      }
+
+      function openPageContext(event, point) {
+        closePageContext();
+        selectPopClose();
+        const box = frameBoxRef.current;
+        if (!box) return;
+        const rect = box.getBoundingClientRect();
+        const context = { seq: pageContextSeqRef.current, epoch: scopeEpochRef.current, scope: scopeRef.current,
+          document: selectPopDocument(), canvas: selectPopCanvas(),
+          anchor: { x: event.clientX - rect.left, y: event.clientY - rect.top },
+          bounds: { width: rect.width, height: rect.height } };
+        const signal = abortRef.current?.signal;
+        const modifiers = (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+        const pending = inputQueueRef.current.then(async () => {
+          if (!pageContextCurrent(context) || !frameInputReady()) return;
+          const payload = await callHost('context-menu', { x: point.x, y: point.y, modifiers }, { scope: context.scope, signal });
+          if (context.seq !== pageContextSeqRef.current || context.epoch !== scopeEpochRef.current || signal?.aborted) return;
+          // A fresh frame may arrive before /state after reload. Bind to the document observed by
+          // THIS transaction, while acceptRemote's revision gate rejects a late/retired snapshot.
+          const state = payload.state;
+          const responseDocument = state && (annotDKey(annotDOf(state.ui)) + '|' + String(state.ui?.address || state.url || ''));
+          if (!responseDocument || (context.document !== selectPopDocument() && responseDocument !== selectPopDocument())) return;
+          acceptRemote(state);
+          const observed = { ...context, document: responseDocument };
+          if (!pageContextCurrent(observed)) return;
+          setInputNotice('');
+          if (payload.status === 'default' && payload.menu) {
+            setPageContext({ ...observed, ...payload.menu, activeIndex: payload.menu.items.findIndex(item => !item.disabled) });
+          }
+        }).catch(error => { if (pageContextCurrent(context)) noteInputError(error); });
+        inputQueueRef.current = pending;
+      }
+
+      function choosePageContext(item) {
+        const context = pageContextRef.current;
+        if (!pageContextCurrent(context) || !item || item.disabled) return;
+        // Start clipboard access in the real user gesture, before any asynchronous Host request.
+        const copied = item.text ? clipboardWriteText(item.text) : null;
+        closePageContext(true);
+        if (copied) {
+          copied.then(ok => {
+            if (ok || context.epoch !== scopeEpochRef.current || context.document !== selectPopDocument()) return;
+            setInputNotice('无法访问剪贴板，请检查浏览器权限');
+            window.clearTimeout(inputNoticeTimerRef.current);
+            inputNoticeTimerRef.current = window.setTimeout(() => setInputNotice(''), 3200);
+          });
+          return;
+        }
+        const signal = abortRef.current?.signal;
+        const pending = inputQueueRef.current.then(async () => {
+          if (context.epoch !== scopeEpochRef.current || context.document !== selectPopDocument()) return;
+          const payload = await callHost('context-action', { token: context.token, action: item.id }, { scope: context.scope, signal });
+          if (context.epoch === scopeEpochRef.current && !signal?.aborted && payload.state) acceptRemote(payload.state);
+        }).catch(error => { if (context.epoch === scopeEpochRef.current) noteInputError(error); });
+        inputQueueRef.current = pending;
+      }
+
+      function onPageContextKeyDown(event) {
+        const context = pageContextRef.current;
+        if (!context) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === 'Escape' || event.key === 'Tab') { closePageContext(true); return; }
+        if (event.key === 'Enter' || event.key === ' ') { choosePageContext(context.items[context.activeIndex]); return; }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+        const enabled = context.items.map((item, index) => item.disabled ? -1 : index).filter(index => index >= 0);
+        let index = enabled.indexOf(context.activeIndex);
+        index = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+          : (index + (event.key === 'ArrowUp' ? -1 : 1) + enabled.length) % enabled.length;
+        setPageContext({ ...context, activeIndex: enabled[index] });
+      }
+
+      React.useEffect(() => {
+        const outside = event => {
+          if (pageContextElementRef.current?.contains(event.target)) return;
+          closePageContext();
+        };
+        const scroll = event => {
+          const target = event?.target;
+          const preview = stage.current;
+          // Sibling panes (especially the streaming chat) do not move this menu's anchor.
+          if (event?.type !== 'scroll' || target === document || target === window
+            || (target?.contains && preview && target.contains(preview))
+            || (preview?.contains(target) && !pageContextElementRef.current?.contains(target))) closePageContext();
+        };
+        document.addEventListener('pointerdown', outside, true);
+        window.addEventListener('blur', scroll);
+        window.addEventListener('resize', scroll);
+        // Scroll can move the anchor without a React render (including stage/ancestor scrolling).
+        document.addEventListener('scroll', scroll, true);
+        return () => {
+          document.removeEventListener('pointerdown', outside, true);
+          window.removeEventListener('blur', scroll);
+          window.removeEventListener('resize', scroll);
+          document.removeEventListener('scroll', scroll, true);
+        };
+      }, []);
+      React.useEffect(() => {
+        if (pageContextRef.current && !pageContextCurrent(pageContextRef.current)) closePageContext();
+      });
+
+      /**
+       * 预览区内部的右键菜单属于页面，不属于宿主。
+       *
+       * 宿主（DSH Web）把右键菜单挂在容器上（`useContextMenu` 的 trigger props → React
+       * `onContextMenu`），预览是它的子树，所以右键会弹宿主的菜单。这里在预览区域内
+       * `preventDefault + stopPropagation`：既不弹宿主菜单，也不让事件继续冒泡到宿主容器。
+       * 页面右键由 Host 完整事务派发；未被页面取消时显示面板菜单。
+       */
+      function onFrameContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
       /** The release is dispatched even when the pointer left the image (no stuck button). */
       function onFramePointerUp(event) {
+        if (event.button === 2) return; // Host already paired press/release, even outside the image.
         if (annotRef.current.on) return; // annotation mode: zero page input
         if (pickRef.current.on) return; // pick mode: action already committed on pointerdown
         const pan = panDragRef.current;
@@ -5510,9 +6418,11 @@ window.__ModuleLoader__.load({
         dragRef.current = { active: false, pointerId: -1, x: drag.x, y: drag.y };
         const geom = frameGeometry();
         const point = geom ? mapEventPoint(event, geom) : null;
+        let released = Promise.resolve(false);
+        const probeContext = { epoch: scopeEpochRef.current, seq: selectPopSeqRef.current, document: selectPopDocument(), canvas: selectPopCanvas() };
         if (point) {
           const size = acceptedViewSize();
-          sendEvents([{
+          released = sendEvents([{
             kind: 'mouse',
             type: 'mouseReleased',
             x: clampNumber(point.x, 0, Math.max(0, size.w - POINTER_EPSILON)),
@@ -5523,6 +6433,22 @@ window.__ModuleLoader__.load({
           }]);
         }
         try { event.currentTarget.releasePointerCapture(event.pointerId); } catch { /* ignore */ }
+        // 原生 <select>：点击（非拖拽、非空白）之后问一次命中。浮层由浏览器 UI 图层绘制，
+        // 帧里看不到，所以这里用同一坐标向 Host 取选项，在点击点画面板自己的列表。
+        if (point) {
+          const pressed = selectClickRef.current;
+          const moved = !pressed.valid
+            || pressed.pointerId !== event.pointerId
+            || Math.abs(event.clientX - pressed.x) > SELECT_CLICK_SLOP_PX
+            || Math.abs(event.clientY - pressed.y) > SELECT_CLICK_SLOP_PX;
+          selectClickRef.current = { x: 0, y: 0, pointerId: -1, valid: false };
+          if (!moved && !point.blank) {
+            const click = { clientX: event.clientX, clientY: event.clientY };
+            released.then((applied) => {
+              if (applied && selectPopIsCurrent(probeContext)) selectPopProbe(click, point);
+            });
+          }
+        }
       }
 
       /** Best-effort release for pointercancel / lost capture / blur while dragging. */
@@ -5877,6 +6803,9 @@ window.__ModuleLoader__.load({
         // unconfirmed content to the module queue under the old frozen identity *before* the old
         // remote/view refs are dropped, then retract this panel's local view only.
         annotRetainDirty(true);
+        selectPopClose();
+        inputQueueRef.current = Promise.resolve();
+        selectClickRef.current.valid = false;
         requestGenerationRef.current += 1;
         if (abortRef.current) abortRef.current.abort();
         abortRef.current = new AbortController();
@@ -6276,20 +7205,160 @@ window.__ModuleLoader__.load({
         inputNoticeTimerRef.current = window.setTimeout(() => setInputNotice(''), 3200);
       }
 
+      /** 面板按键的默认 virtualKeyCode（浏览器给不出 keyCode 时用）。 */
+      const PANEL_KEY_CODES = {
+        Backspace: 8, Tab: 9, Enter: 13, Shift: 16, Control: 17, Alt: 18, Pause: 19, CapsLock: 20,
+        Escape: 27, ' ': 32, PageUp: 33, PageDown: 34, End: 35, Home: 36,
+        ArrowLeft: 37, ArrowUp: 38, ArrowRight: 39, ArrowDown: 40, Insert: 45, Delete: 46,
+        Meta: 91, ContextMenu: 93,
+        F1: 112, F2: 113, F3: 114, F4: 115, F5: 116, F6: 117, F7: 118, F8: 119,
+        F9: 120, F10: 121, F11: 122, F12: 123,
+      };
+
+      /**
+       * 真人按键 → Host `/input` 事件。旧实现有三处漏：`Ctrl/Cmd/Alt` 组合直接 return
+       * （快捷键全丢）、只认 7 个键（Home/End/PgUp/PgDn/F1-F12 全丢）、可打印字符走
+       * `kind:'text'`（页面收不到 keydown，绑在 keydown 上的快捷键与输入框按键逻辑都看不到）。
+       * 现在统一发 keyDown + keyUp：带 modifiers 位掩码、virtualKeyCode、物理 code、autoRepeat，
+       * 可打印字符同时带 text/unmodifiedText。
+       */
+      function panelKeyEvents(event) {
+        const key = String((event && event.key) || '');
+        if (!key || key === 'Dead' || key === 'Unidentified') return [];
+        const modifiers = (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0)
+          | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+        const virtualKeyCode = Number.isFinite(event.keyCode) && event.keyCode > 0
+          ? event.keyCode
+          : PANEL_KEY_CODES[key];
+        const printable = key.length === 1;
+        // 命令修饰键（Ctrl/Cmd/Alt）按下时这是**快捷键**而不是输入：必须发 rawKeyDown 且不带
+        // text——带 text 时 Chrome 按字符插入处理，页面只看到「打了个字母」，全选/复制/粘贴/剪切
+        // 这些编辑命令不会执行（用户实测：组合键是分开的、不能真正全选）。
+        const altGraph = typeof event.getModifierState === 'function' && event.getModifierState('AltGraph');
+        const command = !altGraph && (event.ctrlKey === true || event.metaKey === true || event.altKey === true);
+        const text = command ? '' : (printable ? key : (key === 'Enter' ? '\r' : ''));
+        const base = {
+          kind: 'key',
+          key,
+          code: event.code || undefined,
+          virtualKeyCode,
+          modifiers,
+          location: Number.isFinite(event.location) ? event.location : undefined,
+          autoRepeat: event.repeat === true ? true : undefined,
+        };
+        const down = Object.assign({}, base, { type: command ? 'rawKeyDown' : 'keyDown' });
+        if (text) {
+          down.text = text;
+          down.unmodifiedText = text;
+        }
+        // 只发按下。旧实现这里顺手补一个 keyUp（"按下即松开"），于是页面永远看不到"按住"：
+        // 游戏里按住 W+A 斜向移动、按住方向键连续走动全部失效（用户实测：WASD 斜向移动没用）。
+        // 真实的 keyup 由 onKeyUp 转发，焦点离开预览时由 releasePanelKeys 兜底松开。
+        return [down];
+      }
+
+      /** 松开：只发 keyUp（与上面的 keyDown 成对，不再凭空补一个）。 */
+      function panelKeyReleaseEvents(event) {
+        const key = String((event && event.key) || '');
+        if (!key || key === 'Dead' || key === 'Unidentified') return [];
+        const modifiers = (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0)
+          | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+        const virtualKeyCode = Number.isFinite(event.keyCode) && event.keyCode > 0
+          ? event.keyCode
+          : PANEL_KEY_CODES[key];
+        return [{
+          kind: 'key',
+          type: 'keyUp',
+          key,
+          code: event.code || undefined,
+          virtualKeyCode,
+          modifiers,
+          location: Number.isFinite(event.location) ? event.location : undefined,
+        }];
+      }
+
+      /**
+       * 焦点离开预览时把"面板以为还按着"的键松开。
+       *
+       * 少了这一步，用户在预览里按住 W、鼠标点聊天框之后，页面会一直认为 W 还按着（Host 侧现在
+       * 也有按键状态表，会把后续事件继续标成 shift/… 位）。只发 keyUp，不产生任何其它副作用。
+       */
+      function releasePanelKeys() {
+        const held = panelHeldKeysRef.current;
+        if (!held || !held.size) return;
+        const events = [];
+        for (const entry of held) {
+          events.push({ kind: 'key', type: 'keyUp', key: entry.key, code: entry.code, virtualKeyCode: entry.virtualKeyCode });
+        }
+        held.clear();
+        if (events.length) sendEvents(events);
+      }
+
+      /* ---- 系统剪贴板桥：面板里的 Ctrl+C/X/V 与宿主系统共用剪贴板 -------------------------- */
+      // 页面跑在宿主的 Chromium 里，它的剪贴板是浏览器内部的；面板（GUI 页面）才有真正的系统
+      // 剪贴板 API。所以复制/剪切时把选区文本写进系统剪贴板，粘贴时把系统剪贴板的内容插进页面。
+      async function clipboardWriteText(text) {
+        const value = String(text || '');
+        if (!value) return false;
+        try {
+          if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+            await navigator.clipboard.writeText(value);
+            return true;
+          }
+        } catch { /* 权限被拒：保持浏览器内部剪贴板行为 */ }
+        return false;
+      }
+
+      /** 返回 `null` 表示"读不到"（权限/不支持），空串表示"确实是空的"。 */
+      async function clipboardReadText() {
+        try {
+          if (navigator.clipboard && typeof navigator.clipboard.readText === 'function') {
+            const text = await navigator.clipboard.readText();
+            return typeof text === 'string' ? text : '';
+          }
+        } catch { /* 权限被拒 */ }
+        return null;
+      }
+
+      /** 页面当前选区文本（只读评估；输入框/文本域按 selectionStart..End 取，否则取 document 选区）。 */
+      function pageSelectionText(signal, scope = scopeRef.current) {
+        const expression = "(() => { const el = document.activeElement; "
+          + "if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) { const s = el.selectionStart, e = el.selectionEnd; "
+          + "return (typeof s === 'number' && typeof e === 'number' && e > s) ? String(el.value).slice(s, e) : ''; } "
+          + "return window.getSelection ? String(window.getSelection()) : ''; })()";
+        return callHost('eval', { expression }, { scope, signal })
+          .then((payload) => {
+            if (!payload) return '';
+            if (typeof payload.value === 'string') return payload.value;
+            if (payload.result && typeof payload.result.value === 'string') return payload.result.value;
+            return '';
+          })
+          .catch(() => '');
+      }
+
       function sendEvents(events, options) {
-        if (annotRef.current.on) return; // single gate: annotation mode never dispatches page input
-        // 选元素模式零页面交互：唯一例外是滚轮（契约要求继续滚动目标页）。
-        if (pickRef.current.on && !(options && options.wheel === true)) return;
-        if (!readyRef.current || writesPausedRef.current) return;
+        const scope = scopeRef.current;
+        const epoch = scopeEpochRef.current;
+        const documentKey = selectPopDocument();
         const signal = abortRef.current ? abortRef.current.signal : undefined;
-        const clearsNotice = (events || []).some((entry) => entry
-          && (entry.kind !== 'mouse' || ['mousePressed', 'mouseReleased', 'mouseClicked'].includes(String(entry.type))));
-        callHost('input', { events }, { scope: scopeRef.current, signal }).then(() => {
-          // Only a real content action clears the notice; hover moves must not erase a BUSY hint.
-          if (clearsNotice) setInputNotice('');
+        const current = () => epoch === scopeEpochRef.current && documentKey === selectPopDocument()
+          && !signal?.aborted && readyRef.current && !writesPausedRef.current
+          && !annotRef.current.on && (!pickRef.current.on || options?.wheel === true);
+        const pending = inputQueueRef.current.then(async () => {
+          if (!current()) return false;
+          const prepared = typeof events === 'function' ? await events({ scope, signal }) : events;
+          if (!current() || !prepared?.length) return false;
+          await callHost('input', { events: prepared }, { scope, signal });
+          const clearsNotice = prepared.some((entry) => entry
+            && (entry.kind !== 'mouse' || ['mousePressed', 'mouseReleased', 'mouseClicked'].includes(String(entry.type))));
+          if (current() && clearsNotice) setInputNotice('');
+          return true;
         }).catch((error) => {
-          noteInputError(error);
+          if (current()) noteInputError(error);
+          return false;
         });
+        inputQueueRef.current = pending;
+        return pending;
       }
 
       // 人类接管：真实输入后 4 秒内标记，其余时间回落到空闲
@@ -6373,7 +7442,7 @@ window.__ModuleLoader__.load({
         syncDraft();
       }
 
-      function submit(event) {
+      function submit(event, overrideAddress) {
         if (event) event.preventDefault();
         if (annotRef.current.on) return; // annotation mode: local navigation is disabled
         if (pendingRef.current.active) return;
@@ -6384,9 +7453,12 @@ window.__ModuleLoader__.load({
         // A local navigation initiated outside the mode invalidates the drawing immediately and
         // submits a normal empty document under the old identity (§12.1).
         annotNavigationClear();
+        // `overrideAddress` lets the history dropdown navigate a stored URL without waiting for a
+        // React state round-trip through the draft (the go button and Enter pass the draft).
+        const source = typeof overrideAddress === 'string' ? overrideAddress : draft;
         let parsed;
         try {
-          const raw = draft.trim();
+          const raw = source.trim();
           if (!raw) throw new Error('请输入网址。');
           parsed = new URL(/^[a-z][a-z\d+.-]*:\/\//i.test(raw) ? raw : 'https://' + raw);
           if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') throw new Error('仅支持 HTTP 和 HTTPS 网址。');
@@ -6629,7 +7701,7 @@ window.__ModuleLoader__.load({
             : !pickRunning ? '需先启动内嵌浏览器'
               : !ready ? '运行环境未就绪'
                 : !viewSync ? '等待视口同步'
-                  : !canvasOn ? '当前 Host 不支持画布框选'
+                  : !canvasOn ? '当前宿主不支持画布框选'
                     : '选择元素发送到聊天框（点击画面中的元素，加入聊天框）';
       const pickEntryDisabled = !pickOn && !pickReadyNow;
       const pickBoxRect = pickOn && frameBoxRef.current ? frameBoxRef.current.getBoundingClientRect() : null;
@@ -6670,18 +7742,18 @@ window.__ModuleLoader__.load({
       const annotStale = annotStaleState;
       const annotNavHint = '标注按工作区保留，导航/刷新会清除当前页面标注';
       const annotSyncText = annotSyncState === 'unsupported'
-        ? '标注未同步（Host 无标注通道）'
+        ? '标注未同步（宿主无标注通道）'
         : annotSyncState === 'error'
           ? '标注未同步'
           : annotSyncState === 'pending'
             ? '标注同步中…'
             : '';
       const annotSyncTitle = (annotSyncState === 'unsupported'
-        ? '标注未同步：当前 Host 没有标注上报通道，标注只在本面板可见，Agent 看不到'
+        ? '标注未同步：当前宿主没有标注上报通道，标注只在本面板可见，Agent 看不到'
         : annotSyncState === 'error'
           ? '标注未同步：最近一次上报失败，Agent 看到的内容可能已过期'
           : annotSyncState === 'pending'
-            ? '标注同步中：正在把本次修改上报给 Host'
+            ? '标注同步中：正在把本次修改上报给宿主'
             : annotStale.stale && annotStale.staleReason === 'panel-unseen'
               ? '标注已保存到工作区，来源面板心跳已过期'
               : '标注已同步给 Agent（只读线索，不构成页面事实）') + '；' + annotNavHint;
@@ -6894,17 +7966,9 @@ window.__ModuleLoader__.load({
         });
       }
 
-      /**
-       * 用户 2026-11-03 第 3 条：用户主动切换环境时套该环境默认，只发布 width/height（不发布
-       * scale），fit=true、pan=false；annotOn 或非 ready 不生效。
-       */
-      function changeEnv(next) {
-        if (annotRef.current.on) return;
-        const option = ENVIRONMENTS.find((item) => item.id === next);
-        if (!option || !option.ready) return;
-        if (next === env) return;
+      /** 套用某环境的默认尺寸（只发布 width/height；scale 回落到共享比例）。 */
+      function applyEnvDefaultSize(next) {
         const target = envDefaultSize(next);
-        setEnv(next);
         const dirty = viewDirtyRef.current;
         dirty.width = target.width;
         dirty.height = target.height;
@@ -6916,11 +7980,60 @@ window.__ModuleLoader__.load({
         changeFit(target.fit);
       }
       /**
-       * 用户 2026-11-03 第 5/7 条：左侧四个分辨率预设不再只是宽高——点任一预设同时把 X/Y 归零，
-       * 并按当前模式处理右侧 `拖拽|适应窗口|默认` 分页选择器（上下文相关，互斥联动）：
-       *   - 拖拽中 → 只退出拖拽（fit 本就是 false），右侧落到「默认」；
-       *   - 适应窗口中 → **保持**「适应窗口」（fit 是本地显示偏好，不发布比例；新尺寸自动适应）；
-       *   - 已是「默认」→ 仍是「默认」。
+       * 用户 2026-11-03 第 3 条 + M4：切换运行环境先提交 Host 会话选择（POST /config/select，
+       * 带本面板 scope），成功后才改本地状态；失败保留旧值并显示错误，不静默切换。
+       * 未实现环境（!ready）仍不可选，也不会因为选择而启动任何探测。
+       */
+      /** 环境视图注册表（提前声明：changeEnv 要按它判断"这个环境有没有视图"）。 */
+      const ENV_VIEWS = { web: webViewBody };
+
+      function changeEnv(next) {
+        if (annotRef.current.on || envBusy) return;
+        const option = ENVIRONMENTS.find((item) => item.id === next);
+        if (!option) return;
+        if (next === env) return;
+        if (enabledFromConfig(hostConfig.state.config, next) === false) {
+          setEnvNotice('该目标环境还没有启用：请先在设置页打开它的开关');
+          return;
+        }
+        // 视图层没有这个环境：只切换“看哪个视图”（渲染空态），**不写宿主配置**——
+        // v1 宿主不接受 planned 环境，提交只会被拒并回滚，没有任何好处。
+        if (typeof ENV_VIEWS[next] !== 'function') {
+          setEnvNotice('');
+          setEnv(next);
+          return;
+        }
+        if (!option.ready) return;
+        const config = hostConfig.state;
+        if (config.revision === null) {
+          setEnvNotice(config.loading
+            ? '正在读取宿主配置，请稍后重试'
+            : (config.error || '宿主未提供配置接口，无法切换运行环境'));
+          return;
+        }
+        setEnvBusy(true);
+        setEnvNotice('');
+        selectHostEnvironment(next, config.revision, scopeRef.current).then((payload) => {
+          hostConfig.adopt(payload);
+          setEnvBusy(false);
+          setEnv(next);
+          applyEnvDefaultSize(next);
+        }).catch((error) => {
+          setEnvBusy(false);
+          if (error && error.code === 'CONFIG_CONFLICT') {
+            adoptHostConflict(hostConfig, error);
+            setEnvNotice('配置已被其他窗口修改（CONFIG_CONFLICT），已刷新；本次切换未生效');
+            return;
+          }
+          setEnvNotice('切换运行环境失败：' + (configErrorText(error && error.message) || '未知错误'));
+        });
+      }
+      /**
+       * 用户 2026-11-03 第 5/7 条：左侧四个分辨率预设不再只是宽高——点任一预设同时把 X/Y 归零，
+       * 并按当前模式处理右侧 `拖拽|适应窗口|默认` 分页选择器（上下文相关，互斥联动）：
+       *   - 拖拽中 → 只退出拖拽（fit 本就是 false），右侧落到「默认」；
+       *   - 适应窗口中 → **保持**「适应窗口」（fit 是本地显示偏好，不发布比例；新尺寸自动适应）；
+       *   - 已是「默认」→ 仍是「默认」。
        * 不改 `scale`/`%`（「默认」语义 = `%` 回落到共享 view.scale）。
        *
        * 宽高与坐标合并进同一个 120ms 的 v1 patch（一次 /viewport，带 expectedRevision）：画布
@@ -7010,73 +8123,62 @@ window.__ModuleLoader__.load({
         try { transport.retrySeedRefresh(seedContext()); } catch { /* transport must not break UI */ }
       }
 
-      return h('div', {
-        className: 'utb',
-        'data-utb-tabs-supported': tabsSupported ? 'true' : 'false',
-        'data-utb-tabs-visible': showTabs ? 'true' : 'false',
-        'data-utb-active-view': activeView ? String(activeView.id) : '',
-        'data-utb-runtime-id': ui ? String(ui.runtimeId || '') : '',
-        'data-utb-scope-binding': String(scope.binding || ''),
-        'data-utb-views-count': stableViews ? String(stableViews.views.length) : '0',
-        'data-utb-ready-views': String(readyViewList.length),
-        'data-utb-tabs-pref': tabsVisible ? 'true' : 'false',
-        'data-utb-active-busy': activeBusy ? 'true' : 'false',
-        'data-utb-display-mode': displayMode,
-        onPointerDown: markHuman,
-        onKeyDown: markHuman,
-        onWheel: markHuman,
-      },
-        h('style', null, CSS),
-        h('div', { className: 'utb-top' },
-          h('span', { className: 'utb-env-icon', 'aria-hidden': true }, h(IconWindow, null)),
-          h('div', { className: 'utb-env-text' },
-            h('span', { className: 'utb-env-title' }, 'Web · 调试视图')),
-          h('span', { className: 'utb-gap' }),
-          // Web-view-only run-mode switch: headless (default) vs headed (visible window + profile).
-          env === 'web' && h('div', {
-            className: 'utb-seg utb-display-seg',
-            role: 'group',
-            'aria-label': '运行模式',
-            'data-utb-display-mode': displayMode,
-          },
-            [['headless', '无头'], ['headed', '有头']].map(([id, label]) => {
-              const description = id === 'headed'
-                ? '有头模式（离屏隐藏窗口 + 持久 profile）\n'
-                  + '· 真实有头 Chromium，较不易被反爬识别；需要登录/过风控的站点用它\n'
-                  + '· 登录态 / Cookie 跨重启保留\n'
-                  + '· 启动较慢；切换会关闭所有页面，需重新打开'
-                : '无头模式（默认）\n'
-                  + '· 不显示浏览器窗口，启动快、资源占用低\n'
-                  + '· 容易被反爬 / 风控识别（Cloudflare、Turnstile 等会持续挑战或 403）\n'
-                  + '· 每次启动使用临时 profile，不保留登录态';
-              return h('button', {
-                key: id,
-                type: 'button',
-                className: 'utb-seg-btn',
-                'aria-pressed': displayMode === id,
-                'aria-description': description,
-                'data-utb-display': id,
-                title: description,
-                disabled: displaySwitching,
-                onClick: () => changeDisplayMode(id),
-              }, segDot(displayMode === id, 'display'), label);
-            })),
-          h('label', { className: 'utb-env-pick' },
-            h('span', { className: 'utb-sr' }, '选择运行环境'),
-            h('select', {
-              className: 'utb-select',
-              value: env,
-              'aria-label': '选择运行环境',
-              disabled: annotOn,
-              onChange: (e) => changeEnv(e.target.value),
-            }, ENVIRONMENTS.map((option) => h('option', { key: option.id, value: option.id, disabled: !option.ready }, option.label))),
-            h('span', { className: 'utb-env-caret', 'aria-hidden': true }, h(IconChevron, null)))),
-        h('div', { className: 'utb-bar' },
+      /**
+       * 环境视图注册表：右上角组合框选哪个目标环境，下面就渲染哪个视图。
+       * 目前只有 web 实现了视图；其余目标环境在表里缺席 → 走「视图层暂不支持」占位。
+       * 接新环境时只加一项（或改成按宿主适配器声明注册），外壳不用动。
+       */
+      function webViewBody() {
+        return [
+h('div', { className: 'utb-bar' },
           button('后退', h(IconArrow, { dir: 'back' }), () => move('back'), backDisabled),
           button('前进', h(IconArrow, { dir: 'forward' }), () => move('forward'), forwardDisabled),
           button('刷新', h(IconReload, null), reload, reloadDisabled),
-          h('form', { onSubmit: submit, style: { flex: '1 1 auto', minWidth: 0, display: 'flex' } },
-            h('input', { className: 'utb-addr', type: 'text', value: draft, spellCheck: false, 'aria-label': '网址', placeholder: '输入网址，例如 https://example.com', 'aria-invalid': error ? 'true' : undefined, 'data-invalid': error ? 'true' : 'false', title: error || undefined, disabled: annotOn, onChange: changeAddress, onFocus: () => { focusedRef.current = true; dirtyRef.current = false; }, onBlur: blurAddress, onKeyDown: keyAddress })),
+          h('form', { onSubmit: submit, style: { flex: '1 1 auto', minWidth: 0, display: 'flex', position: 'relative' } },
+            h('div', { className: 'utb-addr-wrap' },
+              h('input', { className: 'utb-addr', type: 'text', value: draft, spellCheck: false, 'aria-label': '网址', placeholder: '输入网址，例如 https://example.com', 'aria-invalid': error ? 'true' : undefined, 'data-invalid': error ? 'true' : 'false', title: error || undefined, disabled: annotOn, onChange: changeAddress, onFocus: () => { focusedRef.current = true; dirtyRef.current = false; }, onBlur: blurAddress, onKeyDown: keyAddress }),
+              h('button', {
+                type: 'button',
+                className: 'utb-addr-hist',
+                'aria-label': '最近访问的网址',
+                'aria-haspopup': 'menu',
+                'aria-expanded': historyOpen,
+                title: addressHistory.length
+                  ? '最近访问（最多 7 条，最近的在上面）'
+                  : '还没有访问记录：先在地址栏打开一个网址',
+                'data-utb-history-toggle': historyOpen ? 'open' : 'closed',
+                'data-utb-history-count': String(addressHistory.length),
+                disabled: annotOn,
+                onMouseDown: (event) => event.preventDefault(), // keep the address caret/draft untouched
+                onClick: () => setHistoryOpen((value) => !value),
+              }, h(IconHistory, null)),
+              historyOpen && h('div', {
+                className: 'utb-pop utb-addr-pop',
+                role: 'menu',
+                'aria-label': '最近访问的网址',
+                'data-utb-history-list': 'true',
+                'data-utb-history-size': String(addressHistory.length),
+              },
+                h('div', { className: 'utb-addr-pop-head' }, '最近访问（' + addressHistory.length + '/' + ADDRESS_HISTORY_LIMIT + '）'),
+                addressHistory.length
+                  ? addressHistory.map((url, index) => h('button', {
+                    key: url,
+                    type: 'button',
+                    className: 'utb-menu-item utb-addr-item',
+                    role: 'menuitem',
+                    title: url,
+                    'data-utb-history-item': String(index),
+                    'data-utb-history-url': url,
+                    onClick: () => chooseHistory(url),
+                  }, h('span', { className: 'utb-addr-label' }, addressHistoryLabel(url))))
+                  : h('div', { className: 'utb-addr-pop-empty' }, '还没有访问记录')))),
+          button('转到', h(IconGo, null), () => submit(undefined), annotOn || busy, {
+            'data-utb-go': annotOn || busy ? 'disabled' : 'ready',
+            title: '转到地址栏里的网址（等同回车）',
+            // Keep the address field focused: a blur would cancel the draft (the input would snap
+            // back to the accepted address) before this click could submit what the user typed.
+            onMouseDown: (event) => event.preventDefault(),
+          }),
           tabsSupported && button('标签页', h('span', { className: 'utb-tabs-glyph', 'aria-hidden': true }, '▤'), () => setTabsVisible((value) => !value), false, {
             'aria-pressed': tabsVisible,
             'data-utb-tabs-toggle': tabsVisible ? 'on' : 'off',
@@ -7165,6 +8267,12 @@ window.__ModuleLoader__.load({
             onClick: newTab,
           }, '+')),
         tabNotice && h('div', { className: 'utb-sync-note utb-tab-note', role: 'status', 'aria-live': 'polite', 'data-utb-tab-notice': 'true' }, tabNotice),
+        selectPop && selectPop.reason && h('div', {
+          className: 'utb-sync-note utb-select-note',
+          role: 'status',
+          'aria-live': 'polite',
+          'data-utb-select-unsupported': selectPop.reason,
+        }, '该下拉不支持浮层，请用键盘 ↑↓ + Enter'),
         activeBusy && h('div', { className: 'utb-sync-note utb-agent-note', role: 'status', 'aria-live': 'polite', 'data-utb-agent-busy': 'true' }, 'Agent 正在操作此标签；预览继续，输入暂不可用'),
         latestPopupNotice && h('div', {
           className: 'utb-sync-note utb-popup-note',
@@ -7255,6 +8363,24 @@ window.__ModuleLoader__.load({
               },
             })),
           // v2 §11.4：横栏右侧（粗细之后）的可见文案按钮；仅模式内可见、无二次确认、空态禁用。
+          // 「粗细」之后：把当前页面连同标注截成一张图，加入聊天框附件。
+          // 禁用条件与「清除画布」同源（没有可视画面 / 正在截图都不派发）。
+          h('button', {
+            type: 'button',
+            className: 'utb-btn utb-annot-shot',
+            'aria-label': '截图（含标注）',
+            title: '把当前页面连同标注一起截图，加入聊天框附件',
+            'data-utb-annot-action': 'capture',
+            'data-utb-annot-shot': annotShotBusy ? 'busy' : (annotReady ? 'ready' : 'unsupported'),
+            disabled: !annotReady || annotShotBusy,
+            onClick: captureAnnotationShot,
+          }, annotShotBusy ? '截图中…' : '截图'),
+          annotShotNotice && h('span', {
+            className: 'utb-annot-sync',
+            role: 'status',
+            'aria-live': 'polite',
+            'data-utb-annot-shot-notice': 'true',
+          }, annotShotNotice),
           h('button', {
             type: 'button',
             className: 'utb-btn utb-annot-clear',
@@ -7306,7 +8432,7 @@ window.__ModuleLoader__.load({
                 ? '画布坐标 X（画布 CSS px，可为负）；滚轮调整（Shift ×10，Alt ×1），Enter 提交，Esc 恢复'
                 : viewSync
                   ? '页面顶层滚动位置 X（文档 CSS px）；滚轮调整（Shift ×10，Alt ×1），Enter 提交，Esc 恢复'
-                  : '旧 Host 不支持视口坐标同步',
+                  : '旧宿主不支持视口坐标同步',
               disabled: !viewSync || annotOn,
               onChange: (e) => changePositionField('x', e.target.value),
               onFocus: () => { viewFocusRef.current = 'x'; },
@@ -7327,7 +8453,7 @@ window.__ModuleLoader__.load({
                 ? '画布坐标 Y（画布 CSS px，可为负）；滚轮调整（Shift ×10，Alt ×1），Enter 提交，Esc 恢复'
                 : viewSync
                   ? '页面顶层滚动位置 Y（文档 CSS px）；滚轮调整（Shift ×10，Alt ×1），Enter 提交，Esc 恢复'
-                  : '旧 Host 不支持视口坐标同步',
+                  : '旧宿主不支持视口坐标同步',
               disabled: !viewSync || annotOn,
               onChange: (e) => changePositionField('y', e.target.value),
               onFocus: () => { viewFocusRef.current = 'y'; },
@@ -7430,7 +8556,9 @@ window.__ModuleLoader__.load({
           'aria-live': 'polite',
           'data-utb-pick-status': pickStatus ? pickStatus.kind : 'mode',
         }, pickStatus ? pickStatus.text : '选元素模式：点击画面中的元素加入聊天框 · 滚轮可滚动页面 · Esc 退出'),
-        h('div', { className: 'utb-stage', ref: stage },
+        // The whole preview area swallows the host context menu (page clicks only); see
+        // onFrameContextMenu. Outside this element the host menu keeps its normal behaviour.
+        h('div', { className: 'utb-stage', ref: stage, onContextMenu: onFrameContextMenu },
           activeUrl
             ? (shot
               ? h('div', {
@@ -7515,7 +8643,7 @@ window.__ModuleLoader__.load({
                     display: 'block', width: '100%', height: '100%', objectFit: 'contain', objectPosition: '50% 50%',
                     userSelect: 'none', touchAction: 'none',
                     position: 'relative', zIndex: 1,
-                    cursor: pickOn ? 'crosshair' : panMode ? (panDragging ? 'grabbing' : 'grab') : 'auto',
+                    cursor: pickOn ? 'crosshair' : panMode ? (panDragging ? 'grabbing' : 'grab') : frameCursor,
                     transform: frameShift ? `translate(${frameShiftX}px, ${frameShiftY}px)` : 'none',
                     clipPath: seedClip || undefined,
                   },
@@ -7526,24 +8654,150 @@ window.__ModuleLoader__.load({
                   onLostPointerCapture: releaseFrameDrag,
                   onPointerLeave: () => {
                     if (pickRef.current.on) pickClearOverlay();
+                    resetFrameCursor();
                   },
                   onKeyDown: (event) => {
                     if (annotRef.current.on) return; // annotation mode: zero page input
                     if (pickRef.current.on) return; // pick mode: zero page keyboard input
-                    if (event.metaKey || event.ctrlKey || event.altKey) return;
-                    event.preventDefault();
-                    if (event.key.length === 1) {
-                      sendEvents([{ kind: 'text', text: event.key }]);
+                    if (event.isComposing) return; // IME 组合中：别抢字符
+                    if (event.key === 'Escape' && selectPopRef.current?.reason) selectPopClose();
+                    const commandKey = event.ctrlKey === true || event.metaKey === true;
+                    const keyName = String(event.key || '').toLowerCase();
+                    if (commandKey && event.altKey !== true && (keyName === 'c' || keyName === 'x')) {
+                      // 复制/剪切：页面照常处理，同时把选区文本写进系统剪贴板（读要在转发前，剪切会删掉选区）。
+                      event.preventDefault();
+                      const events = panelKeyEvents(event);
+                      sendEvents(async ({ scope, signal }) => {
+                        const text = await pageSelectionText(signal, scope);
+                        if (text) await clipboardWriteText(text);
+                        return events;
+                      });
+                      return;
+                    }
+                    if (commandKey && event.altKey !== true && keyName === 'v') {
+                      // 粘贴：系统剪贴板可读就由我们插入文本，避免浏览器内部剪贴板插入旧内容。
+                      event.preventDefault();
+                      const events = panelKeyEvents(event);
+                      const textRead = clipboardReadText();
+                      sendEvents(async () => {
+                        const text = await textRead;
+                        if (text === null) return events;
+                        return text === '' ? [] : [{ kind: 'text', text }];
+                      });
                       return;
                     }
-                    const virtual = { Backspace: 8, Tab: 9, Enter: 13, Escape: 27, ArrowLeft: 37, ArrowUp: 38, ArrowRight: 39, ArrowDown: 40, Delete: 46 }[event.key];
-                    if (!virtual) return;
-                    sendEvents([
-                      { kind: 'key', type: 'keyDown', key: event.key, code: event.code, virtualKeyCode: virtual },
-                      { kind: 'key', type: 'keyUp', key: event.key, code: event.code, virtualKeyCode: virtual },
-                    ]);
+                    const events = panelKeyEvents(event);
+                    if (!events.length) return;
+                    event.preventDefault();
+                    // 记下"还按着"的键：真实 keyup 由 onKeyUp 转发，焦点离开时由 onBlur 兜底松开。
+                    const identity = event.code || event.key;
+                    if (identity && !event.repeat) {
+                      panelHeldKeysRef.current.set(identity, {
+                        key: String(event.key || ''),
+                        code: event.code || undefined,
+                        virtualKeyCode: Number.isFinite(event.keyCode) && event.keyCode > 0 ? event.keyCode : undefined,
+                      });
+                    }
+                    sendEvents(events);
+                  },
+                  // 松开：只转发 keyUp。少这一条时页面永远看不到"按住"，按住 W+A 斜向移动这类
+                  // 连续输入全部失效（用户实测）。
+                  onKeyUp: (event) => {
+                    if (annotRef.current.on) return;
+                    if (pickRef.current.on) return;
+                    if (event.isComposing) return;
+                    const identity = event.code || event.key;
+                    if (identity) panelHeldKeysRef.current.delete(identity);
+                    const events = panelKeyReleaseEvents(event);
+                    if (!events.length) return;
+                    event.preventDefault();
+                    sendEvents(events);
                   },
+                  onBlur: () => { releasePanelKeys(); },
                 }),
+                // 原生 <select> 的面板侧浮层：绝对定位在画面框内、点击点附近。
+                // 浏览器自己的弹层在 UI 图层（帧里看不到），所以选项列表由面板绘制；
+                // 写回走 POST /select（与 /input 同一套门禁）。
+                selectPop && !selectPop.reason ? (() => {
+                  const rowCount = (selectPop.select.options || []).length;
+                  const layout = selectPopLayout(selectPop.anchor, rowCount, selectPop.bounds);
+                  return h('div', {
+                    className: 'utb-select-pop',
+                    ref: (node) => {
+                      selectPopElementRef.current = node;
+                      if (node && node.dataset.utbSelectFocused !== '1') {
+                        node.dataset.utbSelectFocused = '1';
+                        try { node.focus({ preventScroll: true }); } catch { /* focus 是 best-effort */ }
+                      }
+                    },
+                    role: 'listbox',
+                    tabIndex: -1,
+                    'aria-label': '下拉选项',
+                    'data-utb-select-pop': selectPop.reason || 'ready',
+                    'data-utb-select-reason': selectPop.reason || '',
+                    'data-utb-select-side': layout.side,
+                    'data-utb-select-layout': JSON.stringify({
+                      left: layout.left, top: layout.top, width: layout.width,
+                      maxHeight: layout.maxHeight, flippedUp: layout.flippedUp, shiftedLeft: layout.shiftedLeft,
+                    }),
+                    style: {
+                      position: 'absolute',
+                      left: layout.left,
+                      top: layout.top,
+                      width: layout.width,
+                      maxHeight: layout.maxHeight,
+                      zIndex: 6,
+                    },
+                    onKeyDown: onSelectPopKeyDown,
+                  }, (selectPop.select.options || []).map((option, index) => h('div', {
+                        key: `${index}:${option.value}`,
+                        className: 'utb-select-pop-item',
+                        role: 'option',
+                        'aria-selected': index === selectPop.activeIndex ? 'true' : 'false',
+                        'aria-disabled': option.disabled ? 'true' : 'false',
+                        'data-utb-select-item': option.disabled ? 'disabled'
+                          : (index === selectPop.activeIndex ? 'active' : 'ready'),
+                        'data-utb-select-value': option.value,
+                        title: option.label || option.value,
+                        // 浮层内的按下不许穿透成页面鼠标事件（否则又是一次 select 点击）。
+                        onPointerDown: (event) => { event.preventDefault(); event.stopPropagation(); },
+                        onPointerEnter: () => {
+                          if (option.disabled) return;
+                          setSelectPop((current) => (current && current.seq === selectPop.seq
+                            ? Object.assign({}, current, { activeIndex: index })
+                            : current));
+                        },
+                        onClick: () => selectPopChoose(option),
+                      }, option.label || option.value || '（空值）')));
+                })() : null,
+                pageContext ? (() => {
+                  const layout = selectPopLayout(pageContext.anchor, pageContext.items.length, pageContext.bounds);
+                  return h('div', {
+                    className: 'utb-select-pop utb-context-menu',
+                    'data-utb-context-menu': 'default',
+                    role: 'menu', tabIndex: -1, 'aria-label': '页面右键菜单',
+                    'aria-activedescendant': `utb-context-item-${pageContext.seq}-${pageContext.activeIndex}`,
+                    ref: node => {
+                      pageContextElementRef.current = node;
+                      if (node && node.dataset.utbFocused !== '1') {
+                        node.dataset.utbFocused = '1';
+                        node.focus({ preventScroll: true });
+                      }
+                    },
+                    style: { position: 'absolute', left: layout.left, top: layout.top, width: layout.width, maxHeight: layout.maxHeight, zIndex: 7 },
+                    onPointerDown: event => { event.preventDefault(); event.stopPropagation(); },
+                    onKeyDown: onPageContextKeyDown,
+                  }, pageContext.items.map((item, index) => h('button', {
+                    key: item.id, id: `utb-context-item-${pageContext.seq}-${index}`,
+                    className: 'utb-select-pop-item', type: 'button', role: 'menuitem', tabIndex: -1,
+                    disabled: item.disabled === true, 'aria-disabled': item.disabled ? 'true' : 'false',
+                    'data-utb-context-action': item.id,
+                    'data-utb-select-item': item.disabled ? 'disabled' : index === pageContext.activeIndex ? 'active' : 'ready',
+                    style: { border: 0, textAlign: 'left' },
+                    onPointerEnter: () => { if (!item.disabled) setPageContext(current => current ? { ...current, activeIndex: index } : current); },
+                    onClick: () => choosePageContext(item),
+                  }, item.label)));
+                })() : null,
                 // P0-D annotation layer: covers the untranslated painted rect, viewBox = accepted
                 // canvas window. Committed shapes are React nodes; the live draft is one imperative
                 // <g> updated by rAF (never re-rendered per pointer move).
@@ -7657,20 +8911,2341 @@ window.__ModuleLoader__.load({
           }, annotSyncText),
           h('span', { className: 'utb-gap' }),
           h('span', { className: 'utb-activity', title: remote.activity ? `运行时：${remote.activity}` : '视图状态' },
-            remote.activity || activity)));
+            remote.activity || activity))
+        ];
+      }
+      const envOption = ENVIRONMENTS.find((item) => item.id === env) || { id: env, label: env, short: env };
+      const envViewTitle = (envOption.short || envOption.label || env) + ' · 调试视图';
+      const envViewSupported = typeof ENV_VIEWS[env] === 'function';
+
+      /** 视图层没有该环境时占位：问号图标 + 一句人话，不留空白面板。 */
+      function noEnvView() {
+        const hostEnvOption = ENVIRONMENTS.find((item) => item.id === (resolvedEnvironment || 'web'));
+        const hostEnvLabel = (hostEnvOption && (hostEnvOption.label || hostEnvOption.id)) || (resolvedEnvironment || 'Web 视图');
+        return h('div', { className: 'utb-noview', 'data-utb-noview': env },
+          h('span', { className: 'utb-noview-icon', 'aria-hidden': true },
+            h('svg', { viewBox: '0 0 24 24', width: 28, height: 28, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' },
+              h('circle', { cx: 12, cy: 12, r: 9 }),
+              h('path', { d: 'M9.6 9.4a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.4' }),
+              h('circle', { cx: 12, cy: 17, r: .95, fill: 'currentColor', stroke: 'none' }))),
+          h('div', { className: 'utb-noview-text' },
+            h('strong', null, '视图层暂不支持'),
+            h('p', null, (envOption.label || env) + ' 的调试视图还没有实现（适配器未接入）。'),
+            h('p', { className: 'utb-noview-hint' }, '执行环境仍然是 ' + hostEnvLabel + '，这里只切换视图。'),
+            h('p', { className: 'utb-noview-hint' }, '可以在设置页查看该环境的适配器与依赖状态。')));
+      }
+
+      return h('div', {
+        className: 'utb',
+        'data-utb-tabs-supported': tabsSupported ? 'true' : 'false',
+        'data-utb-tabs-visible': showTabs ? 'true' : 'false',
+        'data-utb-active-view': activeView ? String(activeView.id) : '',
+        'data-utb-runtime-id': ui ? String(ui.runtimeId || '') : '',
+        'data-utb-scope-binding': String(scope.binding || ''),
+        'data-utb-views-count': stableViews ? String(stableViews.views.length) : '0',
+        'data-utb-ready-views': String(readyViewList.length),
+        'data-utb-tabs-pref': tabsVisible ? 'true' : 'false',
+        'data-utb-active-busy': activeBusy ? 'true' : 'false',
+        'data-utb-display-mode': displayMode,
+        // 组合框当前选中的目标环境，以及视图层是否已实现该环境
+        'data-utb-build': CLIENT_BUILD,
+        'data-utb-view': env,
+        'data-utb-view-supported': envViewSupported ? 'true' : 'false',
+        onPointerDown: markHuman,
+        onKeyDown: markHuman,
+        onWheel: markHuman,
+      },
+        h('style', null, CSS),
+        h('div', { className: 'utb-top' },
+          h('span', { className: 'utb-env-icon', 'aria-hidden': true }, h(IconWindow, null)),
+          h('div', { className: 'utb-env-text' },
+            h('span', { className: 'utb-env-title', 'data-utb-env-title': env }, envViewTitle)),
+          h('span', { className: 'utb-gap' }),
+          // Web-view-only run-mode switch: headless (default) vs headed (visible window + profile).
+          env === 'web' && envViewSupported && h('div', {
+            className: 'utb-seg utb-display-seg',
+            role: 'group',
+            'aria-label': '运行模式',
+            'data-utb-display-mode': displayMode,
+          },
+            [['headless', '无头'], ['headed', '有头']].map(([id, label]) => {
+              const description = id === 'headed'
+                ? '有头模式（离屏隐藏窗口 + 持久 profile）\n'
+                  + '· 真实有头 Chromium，较不易被反爬识别；需要登录/过风控的站点用它\n'
+                  + '· 登录态 / Cookie 跨重启保留\n'
+                  + '· 启动较慢；切换会关闭所有页面，需重新打开'
+                : '无头模式（默认）\n'
+                  + '· 不显示浏览器窗口，启动快、资源占用低\n'
+                  + '· 容易被反爬 / 风控识别（Cloudflare、Turnstile 等会持续挑战或 403）\n'
+                  + '· 每次启动使用临时 profile，不保留登录态';
+              return h('button', {
+                key: id,
+                type: 'button',
+                className: 'utb-seg-btn',
+                'aria-pressed': displayMode === id,
+                'aria-description': description,
+                'data-utb-display': id,
+                title: description,
+                disabled: displaySwitching,
+                onClick: () => changeDisplayMode(id),
+              }, segDot(displayMode === id, 'display'), label);
+            })),
+          h('label', { className: 'utb-env-pick' },
+            h('span', { className: 'utb-sr' }, '选择运行环境'),
+            h('select', {
+              className: 'utb-select',
+              value: env,
+              'aria-label': '选择运行环境',
+              disabled: annotOn || envBusy,
+              title: envBusy ? '正在提交到宿主…' : (hostConfig.state.error || undefined),
+              'data-utb-env-busy': envBusy ? 'true' : 'false',
+              onChange: (e) => changeEnv(e.target.value),
+              // 打开下拉时重读一次：另一个窗口改了开关，这里也能立刻看到最新的可选项
+              onFocus: () => { if (hostConfig && typeof hostConfig.reload === 'function') hostConfig.reload(); },
+            // 没有视图的环境也允许选：选中后渲染空态（只切视图，不写宿主配置）。
+            // 只有“有视图但宿主不允许执行”的环境才禁用。
+            }, envOptions.map((option) => h('option', {
+              key: option.id,
+              value: option.id,
+              'data-utb-env-enabled': 'true',
+            }, option.label))),
+            h('span', { className: 'utb-env-caret', 'aria-hidden': true }, h(IconChevron, null))),
+          (hostConfig.state.error || envNotice) ? h('span', {
+            className: 'utb-env-error',
+            role: 'alert',
+            'data-uts-config-error': hostConfig.state.error ? 'read' : 'select',
+            title: hostConfig.state.error || envNotice,
+          }, hostConfig.state.error || envNotice) : null),
+                  ...(envViewSupported ? ENV_VIEWS[env]() : [noEnvView()]));
     }
 
-    return {
-      inject: ['slots'],
-      apply(ctx) {
-        // 面板组件在模块作用域定义，这里把根 ctx 交给它按需读取 DSH 服务（聊天框追加）。
-        pluginContext = ctx;
-        // 选元素引用的 `@` 来源：候选=最近选取的元素；chip 显示紧凑标签，模型文本走 codec.serialize。
-        registerElementReferenceSource(ctx);
-        // 发送后的用户消息里，同样的元素块折叠成紧凑 chip（模型文本不变）。
-        registerUserTextElementReference(ctx);
+    /* =====================================================================================
+     * DSH 设置页：第五节点为卡片目标；第三节点接口与第四节点执行端以同级标签展示。
+     * 配置与就绪状态来自 Host（GET/PUT /config）：页面只提交意图，Host revision 是唯一真值。
+     * Host 未提供接口时页面保持可用，但明确显示读取失败，绝不把任何目标标成已就绪或显示版本。
+     * ===================================================================================== */
+    const TARGET_CHAINS = {
+      chromium: { communication: 'CDP', backend: 'Chromium DevTools' },
+      electron: { communication: 'CDP / RPC', backend: 'Electron DevTools / 桌面自动化服务' },
+      linux: { communication: 'D-Bus / X11 / Wayland', backend: 'AT-SPI / 桌面输入服务' },
+      webkitgtk: { communication: 'WebKit Inspector / D-Bus', backend: 'WebKitGTK 调试后端 / AT-SPI' },
+      windows: { communication: 'RPC / 系统 API', backend: 'UI Automation / 桌面输入服务' },
+      webview2: { communication: 'CDP / RPC', backend: 'WebView2 DevTools / UI Automation' },
+      macos: { communication: 'RPC / 系统 API', backend: 'Accessibility / 桌面输入服务' },
+      wkwebview: { communication: 'WebKit Inspector / RPC', backend: 'WebKit 调试后端 / Accessibility' },
+      android: { communication: 'ADB / RPC', backend: 'UI Automator / 系统输入服务' },
+      androidWeb: { communication: 'ADB / CDP', backend: 'UI Automator / WebView DevTools' },
+      terminal: { communication: 'PTY / IPC', backend: '终端会话服务' },
+      harmonyos: { communication: 'HDC / RPC', backend: 'UiTest / 系统输入服务' },
+      native3d: { communication: 'RPC / IPC', backend: '桌面自动化服务 / 应用辅助程序' },
+    };
 
-        ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: ID }, DebugView));
+    /** 每张卡片表示运行中的应用类型；框架只作为技术栈说明。状态来自 Host 就绪结果。 */
+    function plannedTarget(id, name, note, chain) {
+      return { id, name, note, chain, state: 'planned' };
+    }
+
+    function miniProgramTarget(id, platform) {
+      return plannedTarget(id, platform + '小程序', '运行于' + platform + '小程序容器的应用', {
+        communication: '平台自动化接口（待选）', backend: platform + '开发者工具 / 辅助程序（待选）',
+      });
+    }
+
+    const TARGET_ENV_GROUPS = [
+      {
+        id: 'web', title: 'Web 视图',
+        targets: [
+          { id: 'chrome', name: 'Chrome', note: 'Chrome / Chromium 中运行的网页', chain: TARGET_CHAINS.chromium,
+            state: 'supported' },
+          // Edge 与 Chrome 共用 CDP 执行端，已是「已实现」；是否真的可跑仍由 Host 就绪的依赖轴
+          // （providers.edge.axes.dependency）回答，卡片不得据此显示成「可用」。
+          Object.assign(plannedTarget('edge', 'Edge', 'Edge 中运行的网页', {
+            communication: 'CDP', backend: 'Edge DevTools',
+          }), { state: 'supported' }),
+          Object.assign(plannedTarget('firefox', 'Firefox', 'Firefox 中运行的网页', {
+            communication: 'WebDriver BiDi', backend: 'Firefox Remote Agent',
+          }), { state: 'unsupported' }),
+        ],
+      },
+      {
+        id: 'linux', title: 'Linux 视图',
+        targets: [
+          plannedTarget('linux-native', 'Linux 原生桌面应用', 'GTK / Qt / Flutter 等原生窗口', TARGET_CHAINS.linux),
+          plannedTarget('electron', 'Electron 应用', 'Chromium 页面与原生应用窗口', TARGET_CHAINS.electron),
+          plannedTarget('tauri', 'Tauri 应用', 'WebKitGTK 页面与原生应用窗口', TARGET_CHAINS.webkitgtk),
+        ],
+      },
+      {
+        id: 'windows', title: 'Windows 视图',
+        targets: [
+          plannedTarget('windows-native', 'Windows 原生桌面应用', 'Win32 / Qt / Flutter 等原生窗口', TARGET_CHAINS.windows),
+          plannedTarget('dotnet', '.NET 桌面应用', 'WPF / Windows Forms', TARGET_CHAINS.windows),
+          plannedTarget('winui3', 'WinUI 3 应用', 'Windows App SDK 应用', TARGET_CHAINS.windows),
+          plannedTarget('win-electron', 'Electron 应用', 'Chromium 页面与原生应用窗口', TARGET_CHAINS.electron),
+          plannedTarget('win-tauri', 'Tauri 应用', 'WebView2 页面与原生应用窗口', TARGET_CHAINS.webview2),
+        ],
+      },
+      {
+        id: 'macos', title: 'macOS 视图',
+        targets: [
+          plannedTarget('macos-native', 'macOS 原生桌面应用', 'AppKit / SwiftUI / Qt / Flutter', TARGET_CHAINS.macos),
+          plannedTarget('mac-electron', 'Electron 应用', 'Chromium 页面与原生应用窗口', TARGET_CHAINS.electron),
+          plannedTarget('mac-tauri', 'Tauri 应用', 'WKWebView 页面与原生应用窗口', TARGET_CHAINS.wkwebview),
+        ],
+      },
+      {
+        id: 'android', title: 'Android 视图',
+        targets: [
+          plannedTarget('android-native', 'Android 原生应用', 'Android Views / Jetpack Compose', TARGET_CHAINS.android),
+          plannedTarget('android-webview', 'Android WebView 应用', '内嵌网页；Capacitor / Cordova', TARGET_CHAINS.androidWeb),
+          plannedTarget('android-flutter', 'Flutter Android 应用', 'Flutter 引擎渲染的应用', TARGET_CHAINS.android),
+          plannedTarget('react-native', 'React Native 应用', 'Android 原生视图与 JS 运行时', TARGET_CHAINS.android),
+        ],
+      },
+      {
+        id: 'tui', title: 'TUI 视图',
+        targets: [
+          plannedTarget('python-tui', 'Python 终端应用', 'Textual 等终端界面', TARGET_CHAINS.terminal),
+          plannedTarget('node-tui', 'Node.js 终端应用', 'Ink / blessed 等终端界面', TARGET_CHAINS.terminal),
+          plannedTarget('go-tui', 'Go 终端应用', 'Bubble Tea 等终端界面', TARGET_CHAINS.terminal),
+          plannedTarget('rust-tui', 'Rust 终端应用', 'Ratatui 等终端界面', TARGET_CHAINS.terminal),
+        ],
+      },
+      {
+        id: 'harmonyos', title: 'HarmonyOS 视图',
+        targets: [
+          plannedTarget('harmony-native', '鸿蒙原生应用', 'ArkUI / ArkTS', TARGET_CHAINS.harmonyos),
+          plannedTarget('arkui-x', 'ArkUI-X 应用', 'ArkUI 跨平台应用', TARGET_CHAINS.harmonyos),
+          plannedTarget('harmony-flutter', 'Flutter 鸿蒙应用', 'Flutter 鸿蒙适配应用', TARGET_CHAINS.harmonyos),
+          plannedTarget('harmony-rn', 'React Native 鸿蒙应用', 'React Native 鸿蒙适配应用', TARGET_CHAINS.harmonyos),
+        ],
+      },
+      {
+        id: 'game', title: '游戏视图',
+        targets: [
+          plannedTarget('unity', 'Unity 游戏', 'Unity Player 中运行的游戏', {
+            communication: 'RPC / IPC', backend: 'Unity 调试辅助程序（待选）',
+          }),
+          plannedTarget('unreal', 'Unreal 游戏', 'Unreal Engine 游戏实例', {
+            communication: 'RPC / IPC', backend: 'Unreal 调试辅助程序（待选）',
+          }),
+          plannedTarget('godot', 'Godot 游戏', 'Godot 游戏实例', {
+            communication: '引擎调试协议 / RPC', backend: 'Godot 调试后端 / 辅助程序（待选）',
+          }),
+          plannedTarget('cocos', 'Cocos 游戏', 'Cocos 原生或 Web 游戏实例', {
+            communication: 'CDP / RPC', backend: 'DevTools / 引擎辅助程序（待选）',
+          }),
+        ],
+      },
+      {
+        id: 'three-d', title: '3D 视图',
+        targets: [
+          plannedTarget('web-3d', 'Web 三维应用', 'Three.js / Babylon.js / PlayCanvas；WebGL / WebGPU', TARGET_CHAINS.chromium),
+          plannedTarget('native-3d', '原生三维应用', '原生窗口中的三维场景', TARGET_CHAINS.native3d),
+          plannedTarget('three-unity', 'Unity 三维应用', 'Unity Player 中的交互式三维场景', {
+            communication: 'RPC / IPC', backend: 'Unity 调试辅助程序（待选）',
+          }),
+          // 用户 2026-11-10 要求：3D 场景补上建模/动画工具。它们都是原生桌面程序，
+          // 没有现成调试协议，先按 native3d 链路登记为 planned，避免"3D 只有引擎"的误解。
+          plannedTarget('blender', 'Blender', 'Blender 场景、模型与渲染设置界面', {
+            communication: 'Python / RPC（bpy 待评估）', backend: 'Blender 内置 Python 控制台（待实现）',
+          }),
+          plannedTarget('3dsmax', '3ds Max', '3ds Max 场景、模型与材质编辑器', {
+            communication: 'RPC / IPC（MAXScript 待评估）', backend: '3ds Max 脚本与辅助程序（待实现）',
+          }),
+          plannedTarget('mmd', 'MikuMikuDance（MMD）', 'MMD 动画、模型预览与动作编辑（PMD/PMX/VMD）', {
+            communication: 'RPC / IPC（待评估）', backend: 'MMD 辅助程序（待实现）',
+          }),
+          plannedTarget('pmx-editor', 'PMX Editor', 'PMX 模型结构、材质与变形编辑', {
+            communication: 'RPC / IPC（待评估）', backend: 'PMX Editor 辅助程序（待实现）',
+          }),
+        ],
+      },
+      {
+        id: 'miniprogram', title: '小程序视图',
+        targets: [
+          miniProgramTarget('wechat', '微信'),
+          miniProgramTarget('alipay', '支付宝'),
+          miniProgramTarget('douyin', '抖音'),
+          miniProgramTarget('qq', 'QQ'),
+          miniProgramTarget('baidu', '百度智能'),
+          miniProgramTarget('kuaishou', '快手'),
+          miniProgramTarget('jd', '京东'),
+          miniProgramTarget('meituan', '美团'),
+          miniProgramTarget('xiaohongshu', '小红书'),
+          miniProgramTarget('taobao', '淘宝'),
+          miniProgramTarget('dingtalk', '钉钉'),
+        ],
+      },
+    ];
+
+    /** 设置页样式：只作用于 `.uts-*`，不覆盖宿主设置页的其它样式。 */
+    const TARGET_ENV_CSS = `
+.uts-settings { display: flex; flex-direction: column; gap: 20px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary); }
+.uts-head { display: flex; flex-direction: column; gap: 4px; }
+.uts-head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
+.uts-filter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.uts-page-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; }
+.uts-page-desc { margin: 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+.uts-body { display: flex; flex-direction: column; gap: 12px; }
+.uts-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
+.uts-chain-guide { margin: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
+.uts-groups { display: flex; flex-direction: column; gap: 18px; }
+.uts-group { display: flex; flex-direction: column; gap: 8px; }
+.uts-group-heading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; }
+.uts-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.uts-card-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
+.uts-card-switch { flex: none; display: inline-flex; align-items: center; }
+.uts-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
+.uts-card-actions { display: flex; gap: 6px; }
+.uts-card-foot .uts-card-actions { margin: 0 0 0 auto; }
+.uts-diagnose-btn { box-sizing: border-box; padding: 2px 8px; font: inherit; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-secondary); background: transparent; border: .5px solid var(--dsw-alias-border-l2); border-radius: 6px; cursor: pointer; }
+.uts-diagnose-btn:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l1); }
+.uts-diagnostics .uts-axes { margin-top: 8px; }
+.uts-diagnostics .uts-head-row { gap: 8px; }
+.uts-group-env { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 8px; font-size: 12px; font-weight: 400; color: var(--dsw-alias-label-secondary); }
+.uts-group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 4px 8px; font: inherit; font-weight: 600; line-height: 20px; color: var(--dsw-alias-label-primary); text-align: left; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
+.uts-group-toggle:hover { background: var(--dsw-alias-bg-layer-2); }
+.uts-group-toggle:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+.uts-group-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uts-group-count { flex: 0 0 auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 400; }
+.uts-group-chevron { flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; color: var(--dsw-alias-label-secondary); transform: rotate(-90deg); transition: transform .15s ease; }
+.uts-group[data-uts-expanded="true"] .uts-group-chevron { transform: rotate(0deg); }
+.uts-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 20px; }
+.uts-item { display: flex; flex-direction: column; min-width: 0; }
+.uts-card { box-sizing: border-box; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: .5px solid var(--dsw-alias-border-l2); border-radius: 12px; background: var(--dsw-alias-bg-layer-1); }
+.uts-card-name { font-size: 13px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
+.uts-card-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
+  font-size: 12px; line-height: 18px; max-height: 36px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+.uts-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.uts-field-inline { flex-direction: row; align-items: center; gap: 8px; }
+.uts-field-label { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.uts-field-value { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.uts-field-value[data-uts-valid="false"], .uts-field-value[data-uts-valid="unknown"] { color: var(--dsw-alias-label-tertiary); }
+.uts-empty { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+.uts-tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: auto; min-width: 0; }
+.uts-card-state { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+.uts-tag { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 18px; max-width: 100%; padding: 2px 7px; border-radius: 6px; font-size: 11px; line-height: 16px; white-space: normal; overflow-wrap: anywhere; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); border: .5px solid var(--dsw-alias-border-l2); }
+.uts-tag[data-uts-tag="supported"] { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); border-color: color-mix(in srgb, #16a34a 35%, transparent); }
+.uts-chain { margin-top: 0; margin-bottom: 10px; }
+.uts-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; padding: 8px 10px; border: .5px dashed var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); }
+.uts-axis { display: flex; flex-direction: column; min-width: 0; }
+.uts-axis-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+.uts-axis-label { font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-secondary); }
+.uts-axis-status { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--dsw-alias-label-tertiary); }
+.uts-axis-reason { font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+.uts-axis[data-uts-status="supported"] .uts-axis-status,
+.uts-axis[data-uts-status="ok"] .uts-axis-status,
+.uts-axis[data-uts-status="bound"] .uts-axis-status,
+.uts-axis[data-uts-status="available"] .uts-axis-status,
+.uts-axis[data-uts-status="true"] .uts-axis-status { color: #16a34a; }
+.uts-axis[data-uts-status="failed"] .uts-axis-status,
+.uts-axis[data-uts-status="degraded"] .uts-axis-status,
+.uts-axis[data-uts-status="stale"] .uts-axis-status,
+.uts-axis[data-uts-status="partial"] .uts-axis-status,
+.uts-axis[data-uts-status="unavailable"] .uts-axis-status { color: #d97706; }
+.uts-config-error { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 18px; color: #b91c1c; background: color-mix(in srgb, #b91c1c 10%, transparent); border: .5px solid color-mix(in srgb, #b91c1c 30%, transparent); overflow-wrap: anywhere; }
+.uts-config-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }
+.uts-config-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-left: auto; }
+.uts-link-btn { padding: 2px 8px; font: inherit; font-size: 12px; line-height: 18px; color: var(--dsw-alias-brand-primary); background: transparent; border: .5px solid var(--dsw-alias-border-l2); border-radius: 6px; cursor: pointer; }
+.uts-link-btn:disabled { color: var(--dsw-alias-label-tertiary); cursor: not-allowed; }
+.uts-switch { position: relative; display: inline-flex; align-items: center; width: 32px; height: 18px; flex: 0 0 auto; cursor: pointer; }
+.uts-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
+.uts-switch-input:disabled { cursor: not-allowed; }
+.uts-switch-track { position: relative; display: block; width: 32px; height: 18px; border-radius: 999px; background: var(--dsw-alias-bg-layer-3, color-mix(in srgb, var(--dsw-alias-label-primary) 18%, transparent)); transition: background-color .15s ease; }
+.uts-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .28); transition: transform .15s ease; }
+.uts-switch-input:checked + .uts-switch-track { background: var(--dsw-alias-brand-primary); }
+.uts-switch-input:checked + .uts-switch-track .uts-switch-thumb { transform: translateX(14px); }
+.uts-switch-input:disabled + .uts-switch-track { opacity: .45; }
+.uts-switch-input:focus-visible + .uts-switch-track { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .uts-switch-track, .uts-switch-thumb, .uts-group-chevron { transition: none; } }
+/* --- 诊断页四个板块：实时调试拓扑 / 各模块诊断状态（六轴卡片）/ 诊断日志 / 调试节点职责 --- */
+.uts-diag-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
+.uts-diag-overall { box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 12px; line-height: 18px; color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); border: .5px solid color-mix(in srgb, #d97706 38%, transparent); }
+/* 胶囊跟随五态（旧的三态 ready/pending/broken 已全部退役，写成 ready 会永远不匹配、只剩默认橙色）。 */
+.uts-diag-overall[data-uts-overall="PASS"] { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); border-color: color-mix(in srgb, #16a34a 38%, transparent); }
+.uts-diag-overall[data-uts-overall="WARN"] { color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); border-color: color-mix(in srgb, #d97706 38%, transparent); }
+.uts-diag-overall[data-uts-overall="FAIL"] { color: #b91c1c; background: color-mix(in srgb, #b91c1c 12%, transparent); border-color: color-mix(in srgb, #b91c1c 38%, transparent); }
+.uts-diag-overall[data-uts-overall="SKIPPED"] { color: var(--dsw-alias-label-tertiary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 6%, transparent); border-style: dashed; border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary) 55%, transparent); }
+.uts-diag-overall[data-uts-overall="UNKNOWN"] { color: var(--dsw-alias-label-tertiary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 4%, transparent); border-style: dotted; border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary) 45%, transparent); }
+.uts-diag-overall-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.uts-diag-stale { flex: 1 1 100%; margin: 0; font-size: 11px; line-height: 16px; color: #d97706; overflow-wrap: anywhere; }
+.uts-diag-panel { display: flex; flex-direction: column; gap: 10px; padding: 13px 15px; border: .5px solid var(--dsw-alias-border-l2); border-radius: 12px; background: var(--dsw-alias-bg-layer-1); }
+.uts-diag-panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
+.uts-diag-panel-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; }
+.uts-diag-flow { margin: 0; font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+.uts-diag-chain-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
+.uts-diag-chain { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; min-width: 760px; padding-top: 16px; }
+/* 纯装饰导轨（不承载状态）：虚线 + 右端静态小点，颜色只取中性值。 */
+.uts-diag-rail { position: absolute; left: 7.5%; right: 7.5%; top: 4px; height: 0; border-top: 1px dashed color-mix(in srgb, var(--dsw-alias-label-tertiary) 55%, transparent); pointer-events: none; }
+.uts-diag-rail-dot { position: absolute; right: -2px; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--dsw-alias-label-tertiary) 70%, transparent); opacity: .65; }
+.uts-diag-node { box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 11px; border: .5px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-bg-layer-2); }
+.uts-diag-node[data-uts-node-state="PASS"] { border-color: color-mix(in srgb, #16a34a 42%, transparent); }
+.uts-diag-node[data-uts-node-state="WARN"] { border-color: color-mix(in srgb, #d97706 42%, transparent); }
+.uts-diag-node[data-uts-node-state="FAIL"] { border-color: color-mix(in srgb, #b91c1c 45%, transparent); }
+.uts-diag-node[data-uts-node-state="SKIPPED"] { border-style: dashed; border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary) 55%, transparent); }
+.uts-diag-node[data-uts-node-state="UNKNOWN"] { border-style: dashed; border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary) 40%, transparent); }
+.uts-diag-node[data-uts-stage-phase="running"] { border-color: var(--dsw-alias-brand-primary); animation: uts-diag-pulse 1s ease-in-out infinite alternate; }
+@keyframes uts-diag-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dsw-alias-brand-primary) 0%, transparent); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent); } }
+.uts-diag-node-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.uts-diag-node-index { font-size: 9px; line-height: 14px; letter-spacing: .1em; color: var(--dsw-alias-label-tertiary); }
+.uts-diag-node-glyph { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; color: var(--dsw-alias-label-tertiary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 6%, transparent); }
+.uts-diag-node[data-uts-node-state="PASS"] .uts-diag-node-glyph { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
+.uts-diag-node[data-uts-node-state="WARN"] .uts-diag-node-glyph { color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); }
+.uts-diag-node[data-uts-node-state="FAIL"] .uts-diag-node-glyph { color: #b91c1c; background: color-mix(in srgb, #b91c1c 12%, transparent); }
+.uts-diag-node-role { font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-tertiary); }
+.uts-diag-node-name { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* 职责描述固定占两行（15px × 2 = 30px）：卡片高度不随文案长短跳动 */
+.uts-diag-node-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 30px; font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-secondary); }
+.uts-diag-node-status { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-tertiary); }
+/* 状态信息预留两行（30px = 2 × 15px），超出两行才截断；完整内容在节点悬停提示里。 */
+.uts-diag-node-status > span { min-width: 0; min-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
+.uts-diag-node[data-uts-node-state="WARN"] .uts-diag-node-status { color: #d97706; }
+.uts-diag-node[data-uts-node-state="FAIL"] .uts-diag-node-status { color: #b91c1c; }
+.uts-diag-dot { flex: none; width: 5px; height: 5px; margin-top: 5px; border-radius: 50%; background: var(--dsw-alias-label-tertiary); }
+.uts-diag-node[data-uts-node-state="PASS"] .uts-diag-dot { background: #16a34a; }
+.uts-diag-node[data-uts-node-state="WARN"] .uts-diag-dot { background: #d97706; }
+.uts-diag-node[data-uts-node-state="FAIL"] .uts-diag-dot { background: #b91c1c; }
+.uts-diag-edge { position: relative; display: flex; align-items: center; justify-content: center; align-self: center; width: 100%; }
+.uts-diag-edge-line { position: relative; display: block; width: 100%; height: 1.5px; background: #16a34a; }
+.uts-diag-edge[data-uts-edge-state="PASS"] .uts-diag-edge-line { background: #16a34a; }
+.uts-diag-edge[data-uts-edge-state="PASS"] .uts-diag-edge-line::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); border-left: 4px solid #16a34a; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
+.uts-diag-edge[data-uts-edge-state="WARN"] .uts-diag-edge-line { background: #d97706; }
+.uts-diag-edge[data-uts-edge-state="WARN"] .uts-diag-edge-label { color: #d97706; }
+.uts-diag-edge[data-uts-edge-state="SKIPPED"] .uts-diag-edge-line { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--dsw-alias-label-tertiary) 60%, transparent) 0 4px, transparent 4px 8px); }
+.uts-diag-edge[data-uts-edge-state="UNKNOWN"] .uts-diag-edge-line { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--dsw-alias-label-tertiary) 45%, transparent) 0 2px, transparent 2px 6px); }
+.uts-diag-edge[data-uts-edge-state="FAIL"] .uts-diag-edge-line { background: repeating-linear-gradient(90deg, #b91c1c 0 4px, transparent 4px 8px); }
+.uts-diag-edge[data-uts-edge-state="FAIL"] .uts-diag-edge-label { color: #b91c1c; }
+/* 沿通路移动的小球：绝对定位，不参与布局；只有本 run 里 PASS 且下游已 stage-end 的段才跑。 */
+.uts-diag-edge-dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 6px color-mix(in srgb, #16a34a 55%, transparent); opacity: .9; display: none; pointer-events: none; }
+.uts-diag-edge[data-uts-edge-live="true"] .uts-diag-edge-dot { display: block; animation: uts-diag-flow 2.1s linear infinite; }
+@keyframes uts-diag-flow { 0% { left: 0; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { left: calc(100% - 6px); opacity: 0; } }
+.uts-diag-edge-break { position: absolute; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; line-height: 1; color: #b91c1c; background: var(--dsw-alias-bg-layer-1); border: .5px solid color-mix(in srgb, #b91c1c 50%, transparent); }
+.uts-diag-edge-label { position: absolute; top: calc(50% + 7px); left: 50%; transform: translateX(-50%); font-size: 9px; line-height: 13px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; }
+.uts-diag-panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
+.uts-diag-panel-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; }
+.uts-diag-flow { margin: 0; font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+.uts-diag-flow { margin: 0; font-size: 10px; line-height: 15px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+.uts-diag-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
+.uts-diag-axis { box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 12px; border: .5px solid var(--dsw-alias-border-l2); border-radius: 12px; background: var(--dsw-alias-bg-layer-2); }
+.uts-diag-axis-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--dsw-alias-label-secondary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent); }
+.uts-diag-axis[data-uts-status="supported"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="ok"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="bound"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="available"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="true"] .uts-diag-axis-icon { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
+.uts-diag-axis[data-uts-status="failed"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="degraded"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="stale"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="partial"] .uts-diag-axis-icon, .uts-diag-axis[data-uts-status="unavailable"] .uts-diag-axis-icon { color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent); }
+.uts-diag-axis-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
+.uts-diag-axis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
+.uts-diag-axis-name { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--dsw-alias-label-secondary); }
+.uts-diag-axis-value { flex: none; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; color: var(--dsw-alias-label-tertiary); }
+.uts-diag-axis[data-uts-status="supported"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="ok"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="bound"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="available"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="true"] .uts-diag-axis-value { color: #16a34a; }
+.uts-diag-axis[data-uts-status="failed"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="degraded"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="stale"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="partial"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="unavailable"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="unsupported"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="unbound"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="not-probed"] .uts-diag-axis-value, .uts-diag-axis[data-uts-status="false"] .uts-diag-axis-value { color: #d97706; }
+.uts-diag-axis-reason { font-family: inherit; font-size: 10px; line-height: 16px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+/* 占位固定三行（16px × 3）：六张卡片高度一致，且 run 结果变化时卡片不会跳动 */
+.uts-diag-axis-checks { display: block; min-height: 48px; font-family: inherit; font-size: 10px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }
+/* 一行一项：不用分隔符串成一句，逐行列出更易读；单项过长用省略号，完整列表看悬停提示 */
+.uts-diag-axis-checks-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* 「+n」是计数标签：字号更小、颜色更淡，与描述文字明显区分 */
+.uts-diag-axis-checks-more { margin-left: 5px; font-size: 9px; line-height: 16px; letter-spacing: .02em; color: color-mix(in srgb, var(--dsw-alias-label-tertiary) 55%, transparent); }
+.uts-diag-bottom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; }
+.uts-diag-events { display: flex; flex-direction: column; gap: 7px; }
+.uts-diag-event { display: grid; grid-template-columns: 62px 8px minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; font-size: 11px; line-height: 16px; }
+.uts-diag-event-time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 16px; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; }
+/* 圆点颜色只跟随事件状态（旧写法按 kind="change" 上橙色，把所有 stage 行都染成告警色）。 */
+.uts-diag-event-pin { width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--dsw-alias-label-tertiary); }
+.uts-diag-event-pin[data-uts-event-status="PASS"] { background: #16a34a; }
+.uts-diag-event-pin[data-uts-event-status="WARN"] { background: #d97706; }
+.uts-diag-event-pin[data-uts-event-status="FAIL"] { background: #b91c1c; }
+.uts-diag-event-pin[data-uts-event-status="SKIPPED"] { background: color-mix(in srgb, var(--dsw-alias-label-tertiary) 85%, transparent); }
+.uts-diag-event-pin[data-uts-event-status="UNKNOWN"] { background: color-mix(in srgb, var(--dsw-alias-label-tertiary) 60%, transparent); }
+.uts-diag-event-pin[data-uts-event-status="INFO"] { background: var(--dsw-alias-label-tertiary); }
+.uts-diag-event[data-uts-event-time-source="observed"] .uts-diag-event-time { font-style: italic; opacity: .75; }
+.uts-diag-event-text { min-width: 0; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.uts-diag-duties { display: flex; flex-direction: column; gap: 8px; }
+.uts-diag-duty { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.uts-diag-duty-arrow { flex: none; color: #16a34a; }
+.uts-diag-duty-text strong { font-weight: 600; color: var(--dsw-alias-label-primary); }
+.uts-diag-empty { margin: 0; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }
+@media (max-width: 900px) { .uts-diag-bottom { grid-template-columns: minmax(0, 1fr); } }
+@media (prefers-reduced-motion: reduce) {
+  .uts-diag-edge[data-uts-edge-live="true"] .uts-diag-edge-dot { animation: none; }
+  .uts-diag-node[data-uts-stage-phase="running"] { animation: none; }
+}
+.uts-diag-modal-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); pointer-events: auto; }
+.uts-diag-modal-panel { box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: min(1180px, 94vw); max-height: 86vh; overflow: auto; border-radius: 14px; border: .5px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-1); box-shadow: 0 24px 64px rgba(0, 0, 0, .32); }
+.uts-diag-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: .5px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); }
+.uts-diag-modal-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.uts-diag-modal-close { flex: none; }
+.uts-diag-modal-body { padding: 14px 16px 18px; }
+.uts-diagnostics-body { display: flex; flex-direction: column; gap: 12px; }
+.uts-diag-action { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
+
+`;
+
+    /* ---- Host config (M4): one authoritative revision for the settings page and the panel ---- */
+    const SETTINGS_EXPANDED_KEY = 'dsh.ui-testing.settings.expanded';
+    const AXIS_ORDER = ['support', 'enabled', 'dependency', 'connection', 'target', 'capability'];
+    const AXIS_LABEL = {
+      support: '工程支持', enabled: '用户启用', dependency: '依赖可用',
+      connection: '连接可信', target: '目标绑定', capability: '能力就绪',
+    };
+    /** M0 §5.2 status vocabulary → the short text the page shows. Unknown values fall through. */
+    const AXIS_TEXT = {
+      support: { supported: '已实现', unsupported: '未支持', planned: '未接入', 'not-probed': '未探测' },
+      enabled: { true: '已启用', false: '未启用', 'not-probed': '未知' },
+      dependency: { ok: '可用', degraded: '降级', failed: '不可用', 'not-probed': '未探测' },
+      connection: { ok: '可信', failed: '失败', 'not-probed': '未探测' },
+      target: { bound: '已绑定', unbound: '未绑定', stale: '已失效', 'not-probed': '未探测' },
+      capability: { available: '可用', partial: '部分可用', unavailable: '不可用', unsupported: '不支持', 'not-probed': '未探测' },
+    };
+    function axisText(axis, status) {
+      const table = AXIS_TEXT[axis] || {};
+      return table[status] || status || '未知';
+    }
+
+    /** One-line, human-readable detail for an axis tooltip (never invents missing facts). */
+    function axisDetail(axis) {
+      const parts = [];
+      if (axis.targetId) parts.push('目标 ' + axis.targetId);
+      if (axis.checkedAt) {
+        const at = new Date(axis.checkedAt);
+        parts.push('检查时间 ' + (Number.isNaN(at.getTime()) ? String(axis.checkedAt) : at.toISOString()));
+      }
+      if (axis.evidenceKind) parts.push('证据 ' + axis.evidenceKind);
+      if (axis.checks && typeof axis.checks === 'object') {
+        // readiness 轴历史上的 check 用 `ok`，诊断 run 的探测用 `pass`：两种都算通过（大小写不敏感），
+        // 只有真正没通过的项才列进提示，别再把「六条全 pass」说成「未通过」。
+        const statusOf = (check) => {
+          if (typeof check === 'string') return check;
+          if (check && typeof check === 'object' && typeof check.status === 'string') return check.status;
+          return '';
+        };
+        const passed = (status) => ['ok', 'pass'].includes(String(status || '').toLowerCase());
+        const rows = Object.entries(axis.checks).map(([name, check]) => ({
+          name,
+          status: statusOf(check),
+          reason: check && typeof check === 'object' ? check.reason || '' : '',
+        }));
+        const failed = rows.filter((row) => !passed(row.status));
+        if (failed.length) {
+          parts.push('未通过 ' + failed.map((row) => row.name + '=' + (row.status || 'unknown') + (row.reason ? '(' + row.reason + ')' : '')).join(', '));
+        } else if (rows.length) {
+          parts.push('全部通过 ' + rows.map((row) => row.name + '=' + row.status).join(', '));
+        }
+      }
+      return parts.join(' · ');
+    }
+
+    /* ---- Provider diagnostics page: topology / six axes / event stream / duties ---------------- */
+
+    /**
+     * Prototype display order for the six axes on the diagnostics page. `AXIS_ORDER` stays the
+     * data/probe order (other code and the acceptance script read it), this one is presentation
+     * only: it reorders the same six keys, it never adds or drops an axis.
+     */
+    const DIAG_AXIS_ORDER = ['support', 'target', 'enabled', 'capability', 'dependency', 'connection'];
+    /** Diagnostics page polls the existing `/config?view=global`; no new Host endpoint. */
+    const DIAG_POLL_MS = 5000;
+    const DIAG_EVENT_LIMIT = 30;
+    const DIAG_EVENT_ROWS = 8;
+
+    /** Node ids are fixed by the prototype: five logical links from agent to target. */
+    const DIAG_DUTY_TEXT = {
+      agent: '理解任务目标，发起工具调用并消费诊断结果',
+      controller: '统一调度，选择能力与执行路径',
+      interface: '通过通信接口传递命令、事件与会话数据',
+      backend: '调用浏览器调试执行后端执行操作',
+      target: '提供实际运行状态与调试证据',
+    };
+
+    /** 14px inline SVG per axis/node — inline paths, never an external font, image or sprite. */
+    function diagSvg(children) {
+      return h('svg', {
+        width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
+        strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true,
+      }, ...children);
+    }
+    function diagAxisIcon(axisKey) {
+      if (axisKey === 'support') {
+        return diagSvg([h('path', { key: 'a', d: 'm12 3 8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4Z' }),
+          h('path', { key: 'b', d: 'm8 12 2.5 2.5L16 9' })]);
+      }
+      if (axisKey === 'target') {
+        return diagSvg([h('path', { key: 'a', d: 'M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1' }),
+          h('path', { key: 'b', d: 'M14 11a5 5 0 0 0-7.1 0l-2 2A5 5 0 0 0 12 20.1l1.1-1.1' })]);
+      }
+      if (axisKey === 'enabled') {
+        return diagSvg([h('circle', { key: 'a', cx: 12, cy: 12, r: 9 }), h('path', { key: 'b', d: 'M12 7v5l3 2' })]);
+      }
+      if (axisKey === 'capability') {
+        return diagSvg([h('path', { key: 'a', d: 'M4 5h16v14H4z' }),
+          h('path', { key: 'b', d: 'M8 9h8M8 12.5h5M8 16h7' })]);
+      }
+      if (axisKey === 'dependency') {
+        return diagSvg([h('circle', { key: 'a', cx: 12, cy: 12, r: 4 }),
+          h('path', { key: 'b', d: 'M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M18 12h3M18.4 5.6l-2.1 2.1' })]);
+      }
+      return diagSvg([h('path', { key: 'a', d: 'M12 3 20 7v5c0 4.5-3.2 7.5-8 9-4.8-1.5-8-4.5-8-9V7l8-4Z' }),
+        h('path', { key: 'b', d: 'M9 12h6' })]);
+    }
+    function diagNodeIcon(nodeId) {
+      if (nodeId === 'agent') {
+        return diagSvg([h('path', { key: 'a', d: 'M12 3 14 8l5-2-2 5 4 3-5 1-1 5-3-4-5 2 2-5-4-3 5-1 2-5Z' }),
+          h('circle', { key: 'b', cx: 12, cy: 12, r: 2 })]);
+      }
+      if (nodeId === 'controller') {
+        return diagSvg([h('rect', { key: 'a', x: 4, y: 4, width: 16, height: 16, rx: 3 }),
+          h('path', { key: 'b', d: 'M8 9h8M8 13h5M8 17h8' })]);
+      }
+      if (nodeId === 'interface') {
+        return diagSvg([h('path', { key: 'a', d: 'M8 8 4 12l4 4M16 8l4 4-4 4M14 5l-4 14' })]);
+      }
+      if (nodeId === 'backend') {
+        return diagSvg([h('rect', { key: 'a', x: 3, y: 4, width: 18, height: 13, rx: 2 }),
+          h('path', { key: 'b', d: 'M8 21h8M12 17v4M7 9h4M7 12h8' })]);
+      }
+      return diagSvg([h('circle', { key: 'a', cx: 12, cy: 12, r: 8 }),
+        h('path', { key: 'b', d: 'M4 12h16M12 4a13 13 0 0 1 0 16M12 4a13 13 0 0 0 0 16' })]);
+    }
+
+    /**
+     * A Host readiness `checkedAt` (ms number, numeric string or ISO string) as an ISO string, or
+     * `''` when the value cannot be parsed. Timestamps are never invented: an unusable value shows
+     * as `--:--:--` instead of the current clock.
+     */
+    function diagIsoAt(value) {
+      if (value === null || value === undefined || value === '') return '';
+      const numeric = typeof value === 'number' ? value : (/^\d{6,}$/u.test(String(value)) ? Number(value) : null);
+      const at = numeric === null ? new Date(String(value)) : new Date(numeric);
+      return Number.isNaN(at.getTime()) ? '' : at.toISOString();
+    }
+    /** `HH:MM:SS` for the local clock; `--:--:--` when the timestamp is missing or unparseable. */
+    function diagClock(iso) {
+      const at = new Date(String(iso || ''));
+      if (!iso || Number.isNaN(at.getTime())) return '--:--:--';
+      const pad = (value) => String(value).padStart(2, '0');
+      return pad(at.getHours()) + ':' + pad(at.getMinutes()) + ':' + pad(at.getSeconds());
+    }
+    /**
+     * The machine-readable shape of a non-ready node: the Host's own reason code when it sent one
+     * (`no-target`, `executable-missing`, `provider-not-selected`, …), else `<axis>-<status>`.
+     */
+    function diagReasonCode(axisKey, axis) {
+      const reason = axis && axis.reason ? String(axis.reason).trim() : '';
+      if (/^[a-z][a-z0-9-]{1,}$/iu.test(reason)) return reason;
+      return axisKey + '-' + ((axis && axis.status) || 'not-probed');
+    }
+    /** What a node says under its name: the Host's reason code, else the axis status text. */
+    function diagStatusText(axisKey, axis) {
+      const reason = axis && axis.reason ? String(axis.reason).trim() : '';
+      if (/^[a-z][a-z0-9-]{1,}$/iu.test(reason)) return reason;
+      if (axis && axis.status) return axisText(axisKey, axis.status);
+      return '未探测';
+    }
+
+    /* ---- Provider diagnostics: one real Host run (NDJSON) → five states ------------------ */
+
+    /**
+     * 五态：本页所有节点/边只说这五个词，且只由 Host 的 stage 事件决定。
+     *
+     * 中文按英语状态本身直译，**不用**「待处理」这类动作语气：`WARN` 是本次 run 已经得出的
+     * 结论（后面紧跟 `provider-mismatch`、`executable-missing` 这类原因码），写成「待处理」
+     * 会被读成「还没点开始诊断」。还没跑出结论的那一屏另有独立说法（`待诊断` / `诊断未完成`），
+     * 见 `diagRunlessText`，与五态不共用词。
+     */
+    const DIAG_STATES = ['PASS', 'WARN', 'FAIL', 'SKIPPED', 'UNKNOWN'];
+    const DIAG_STATE_TEXT = { PASS: '正常', WARN: '警告', FAIL: '异常', SKIPPED: '跳过', UNKNOWN: '未知' };
+    const DIAG_STAGE_IDS = ['1', '2', '3', '4', '5'];
+    const DIAG_RUN_ROWS = 8;
+    /** 能力就绪的检查项最多显示三行；每张卡片都按三行占位（悬停看全部）。 */
+    const DIAG_CHECK_LINES = 3;
+    /** 最近一次 run，按 envId/providerId 保留：重进诊断页显示它，但不重放动画、不自动重跑。 */
+    const DIAG_RUNS = new Map();
+    const diagRunKey = (groupId, providerId) => (groupId || '') + '/' + (providerId || '');
+    /**
+     * 五态在界面上**只写中文**：大写状态码是给调用方 agent 的，留在 `data-uts-*-state` 属性与
+     * NDJSON 里，不挤进可见文案。没有中文的非五态值（如事件流的 `INFO`）原样返回，不编造。
+     */
+    function diagStateLabel(state) {
+      const key = String(state || '').toUpperCase();
+      return DIAG_STATE_TEXT[key] || String(state || '');
+    }
+    /**
+     * 还没有 run 结果时的说法，**不是第六个状态**，只是「本轮还没有结论」：
+     * `待诊断` = 这一屏还没跑过任何 run；`诊断未完成` = 跑过但没拿到结果（错误另起一行说明）。
+     * 有结论时返回空串，调用方回落到五态文案。这样「没开始」和「已经诊断出问题」用词不同，
+     * 不会再把 `WARN · provider-mismatch` 读成「等你操作」。
+     */
+    function diagRunlessText(run) {
+      const current = run || {};
+      if ((current.events || []).length) return '';
+      if (current.phase === 'running') return '';
+      return current.error ? '诊断未完成' : '待诊断';
+    }
+
+    /**
+     * 状态码的中英对照：**英文码是 Host 的机器契约**（`data-uts-*`、NDJSON、工具返回值里一律
+     * 保持原样，agent 直接读），**中文只给前端客户看**。界面上渲染成 `中文（english-code）`，
+     * 两种写法同时在场：人读得懂，agent 也解析得到。
+     *
+     * 收录范围 = 诊断页可能出现的一切码：① `integration/diagnose.js` 五阶段的原因；
+     * ② 就绪六轴来自 `core/readiness.js` / `integration/cross-environment.js` 的原因；
+     * ③ 页面自身造的两个（`no-run`、`run-in-progress`）。工具级错误码（`index.js` 里的
+     * `reason`）不进这张表——它们不出现在本页。
+     *
+     * 表没收录的码**不猜**：原样显示英文；`tool-call-*`、`stage-<n>` 这两个动态族按前缀兜底。
+     * 词表与 `docs/diagnose-reason-codes.md` 必须逐条一致，由
+     * `tests/contracts/diagnose-status-text.test.mjs` 强制。
+     */
+    const DIAG_REASON_ZH = {
+      // ① 诊断 run 的五个阶段
+      'scope-unresolved': '无法确定当前作用域（不知道要查哪个工作区）',
+      'registration-unreadable': '读取工具注册信息失败',
+      'registration-broken': '工具声明与实际注册对不上',
+      'tool-call-not-attempted': '没能发起工具调用',
+      'tool-call-failed': '工具调用失败',
+      'tool-not-admitted': '本作用域未放行这些工具',
+      'config-invalid': '宿主配置无效',
+      'adapter-unresolved': '没取到该运行环境的执行适配器',
+      'no-runtime-entry': '插件还没建立运行时入口',
+      'busy': '插件正在处理别的操作，稍后再试',
+      'browser-not-running': '浏览器未运行',
+      'provider-mismatch': '实际在跑的浏览器与所选运行环境不一致',
+      'cdp-protocol-error': '浏览器调试协议返回错误',
+      'cancelled': '本轮检查已被取消',
+      'executable-missing': '没找到该浏览器的可执行文件',
+      'identity-mismatch': '启动起来的浏览器不是所选的那一个',
+      'identity-unverified': '拿不到浏览器版本信息，无法确认身份',
+      'blocked-by-provider-mismatch': '上游运行环境不一致，这一段没执行',
+      'blocked-by-stage-1': '第 1 段失败，这一段没执行',
+      'blocked-by-stage-3': '第 3 段未通过，这一段没执行',
+      'stage-timeout': '这一段超时，没拿到结果',
+      'target-list-failed': '读取标签页列表失败',
+      'no-bound-target': '还没有绑定调试目标',
+      'readonly-eval-failed': '只读求值失败（在页面里跑只读脚本出错）',
+      'readonly-eval-unexpected': '只读求值的结果不是预期的 1',
+      'target-not-in-list': '目标已不在标签页列表里（可能已被关闭）',
+      'capability-partial': '部分能力不可用',
+      // ② 就绪六轴（readiness / cross-environment / 运行环境自身）
+      'not-probed': '未探测',
+      'probe-failed': '探测失败',
+      'environment-disabled': '环境总开关已关闭',
+      'adapter-not-registered': '该环境还没接入适配器',
+      'no-capabilities': '没有上报能力清单',
+      'no-runtime': '宿主里还没有这个环境的运行时',
+      'no-target': '还没有目标',
+      'target-not-bound': '目标未绑定',
+      'target-unbound': '目标已解绑',
+      'target-gone': '调试目标已消失',
+      'cdp-not-attached': '还没连上浏览器调试端口',
+      'collector-missing': '缺少网络采集器',
+      'frame-source-missing': '没有可用的帧来源',
+      'input-unsupported': '该浏览器后端不支持模拟输入',
+      'provider-not-selected': '未选择该运行环境',
+      'provider-disabled': '该运行环境已停用',
+      'provider-driver-pending': '该运行环境的驱动待接入',
+      'provider-not-implemented': '该运行环境尚未实现',
+      'provider-dependency-not-verified': '还没验证该运行环境的依赖',
+      'provider-missing': '没有这个运行环境',
+      'capability-disabled': '该能力已关闭',
+      'capability-unknown': '未知的能力名',
+      'cold': '浏览器还没启动',
+      'host-idle-no-transport': '宿主空闲，没有可用的传输通道',
+      'session-missing': '调试会话已不存在',
+      'no-session': '没有调试会话',
+      'aborted': '已中止',
+      // core/contracts.js 的 WEB_PROVIDER_REASONS（驱动拒绝 / 就绪 / 工具错误共用同一批拼写）
+      'driver-pending': '该运行环境的驱动待接入',
+      'unknown-provider': '没有这个运行环境',
+      'provider-unsupported': '该运行环境不受支持',
+      'override-invalid': '指定的浏览器路径不可用',
+      // ③ 页面自身造的状态（不是 Host 的码）
+      'no-run': '还没有诊断结果',
+      'run-in-progress': '诊断进行中',
+    };
+    /**
+     * 术语对照：这些词在**界面上一律用中文**，英文原样只留在 `data-uts-*`、NDJSON 和代码里
+     * （agent 与排障用）。翻译按上下文取用户能看懂的词，不做字对字直译。
+     */
+    const DIAG_TERM_ZH = {
+      'run': '本轮',
+      'Host': '宿主',
+      'Failed to fetch': '连不上宿主（请求失败）',
+      'stage-start': '阶段开始',
+      'stage-end': '阶段结束',
+      'readonly-eval': '只读求值',
+      'target-list': '目标列表',
+      'snapshot': '快照',
+      'screenshot': '截图',
+      'computed-style': '计算样式',
+      'network-read': '网络记录',
+      'pass': '通过',
+      'fail': '失败',
+      'skip': '跳过',
+      'ok': '通过',
+      'PASS': '正常',
+    };
+    /** 术语 / 原因码 / 检查项 → 中文；都没有译文时原样返回英文。 */
+    function diagTermLabel(term) {
+      const key = String(term || '').trim();
+      if (!key) return '';
+      if (Object.prototype.hasOwnProperty.call(DIAG_TERM_ZH, key)) return DIAG_TERM_ZH[key];
+      return diagReasonLabel(key);
+    }
+    /** 码 → 中文；动态族按前缀兜底，未收录返回空串（调用方原样显示英文）。 */
+    function diagReasonZh(code) {
+      const key = String(code || '').trim();
+      if (!key) return '';
+      if (Object.prototype.hasOwnProperty.call(DIAG_REASON_ZH, key)) return DIAG_REASON_ZH[key];
+      if (/^tool-call-/u.test(key)) return '工具调用失败';
+      if (/^stage-\d$/u.test(key)) return '该段没有给出原因';
+      return '';
+    }
+    /**
+     * 原因码在界面上**只写中文**；英文原码是给调用方 agent 的，留在 `data-uts-stage-reason` /
+     * `data-uts-axis-reason-code` / `data-uts-event-reason` 与 NDJSON 的 `reason` 里。
+     * 没有译文时原样显示英文码，绝不编造中文。
+     */
+    function diagReasonLabel(code) {
+      const key = String(code || '').trim();
+      if (!key) return '';
+      return diagReasonZh(key) || key;
+    }
+    /* ---- Diagnostics overlay (frame-wide `shell.overlay`) ---------------------------------- */
+    // The diagnostics page used to live inside the settings modal, which is far too narrow for the
+    // five-node chain. It now opens in its own frame-wide overlay; the settings page only keeps the
+    // entry buttons. State is module-level so both entry points live in the same bundle.
+    const diagOverlayStore = {
+      state: { open: false, groupId: '', providerId: '', trigger: null },
+      listeners: new Set(),
+    };
+    function diagOverlayGet() { return diagOverlayStore.state; }
+    function diagOverlaySet(next) {
+      diagOverlayStore.state = Object.assign({}, diagOverlayStore.state, next);
+      for (const listener of Array.from(diagOverlayStore.listeners)) {
+        try { listener(); } catch { /* ignore */ }
+      }
+    }
+    function diagOverlaySubscribe(listener) {
+      diagOverlayStore.listeners.add(listener);
+      return () => { diagOverlayStore.listeners.delete(listener); };
+    }
+    function openDiagnostics(groupId, providerId, trigger) {
+      // Prefer the element that actually opened the overlay (the card button): a keyboard/secondary
+      // activation may leave document.activeElement on <body>, and focus must come back to the card.
+      const active = trigger || (typeof document !== 'undefined' ? document.activeElement : null);
+      diagOverlaySet({ open: true, groupId: groupId || '', providerId: providerId || '', trigger: active || null });
+    }
+    function closeDiagnostics() {
+      diagOverlaySet({ open: false });
+    }
+    function useDiagnosticsOverlay() {
+      if (typeof React.useSyncExternalStore === 'function') {
+        return React.useSyncExternalStore(diagOverlaySubscribe, diagOverlayGet, diagOverlayGet);
+      }
+      const [state, setState] = React.useState(diagOverlayGet);
+      React.useEffect(() => diagOverlaySubscribe(() => setState(diagOverlayGet())), []);
+      return state;
+    }
+
+    const diagEmptyRun = (providerId) => ({
+      runId: '', provider: providerId || '', mode: '', phase: 'idle',
+      events: [], stages: {}, stagePhase: {}, axes: null, overall: null,
+      actualCalls: [], sideEffects: [], configRevision: null,
+      startedAt: null, finishedAt: null, error: '',
+    });
+
+    function diagRequestId() {
+      try {
+        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') return crypto.randomUUID();
+      } catch { /* fall through */ }
+      return 'diag-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+    }
+
+    /**
+     * Start one real diagnosis run and stream its NDJSON events.
+     *
+     * `observe` (default) never starts a browser; `start` is only used after the user explicitly
+     * asks for it. The caller owns the AbortController: leaving the page aborts the stream (the
+     * Host then stops the run — it does not keep executing behind a closed page).
+     */
+    async function startDiagnoseRun({ provider, mode, signal, onEvent }) {
+      const response = await fetch(HOST_BASE + '/diagnose', {
+        method: 'POST',
+        credentials: 'same-origin',
+        cache: 'no-store',
+        // `/diagnose` is a scoped-GUI surface (an unscoped call is 401 by design). The settings page
+        // works on the global/default scope, so it asks for `unassigned` explicitly and never lets
+        // the Host guess with `recent`.
+        headers: {
+          'content-type': 'application/json',
+          'X-UI-Testing-Scope-Version': SCOPE_VERSION,
+          'X-UI-Testing-Scope': 'unassigned',
+        },
+        body: JSON.stringify({ provider: provider || undefined, mode: mode || 'observe', requestId: diagRequestId() }),
+        signal,
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        const error = new Error(payload.error || ('诊断请求失败：' + response.status));
+        error.code = payload.code || 'DIAGNOSE_REQUEST_FAILED';
+        error.status = response.status;
+        throw error;
+      }
+      if (!response.body || typeof response.body.getReader !== 'function') {
+        throw Object.assign(new Error('诊断响应不是可读流'), { code: 'DIAGNOSE_STREAM_UNAVAILABLE' });
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        let index;
+        while ((index = buffer.indexOf('\n')) >= 0) {
+          const line = buffer.slice(0, index).trim();
+          buffer = buffer.slice(index + 1);
+          if (!line) continue;
+          let event;
+          try { event = JSON.parse(line); } catch { continue; }
+          if (event && typeof event === 'object' && typeof onEvent === 'function') onEvent(event);
+        }
+      }
+      return true;
+    }
+
+    /** Fold one NDJSON event into the run state (pure; used by both live streaming and replay). */
+    function diagApplyEvent(run, event) {
+      const next = Object.assign({}, run);
+      next.events = (run.events || []).concat([event]);
+      next.stagePhase = Object.assign({}, run.stagePhase);
+      next.stages = Object.assign({}, run.stages);
+      if (event.type === 'run-start') {
+        next.runId = event.runId || '';
+        next.provider = event.provider || run.provider;
+        next.mode = event.mode || run.mode;
+        next.phase = 'running';
+        next.startedAt = event.startedAt || null;
+        next.configRevision = event.configRevision ?? null;
+        next.error = '';
+      } else if (event.type === 'stage-start') {
+        next.stagePhase[event.stageId] = 'running';
+      } else if (event.type === 'stage-end') {
+        next.stagePhase[event.stageId] = 'finished';
+        next.stages[event.stageId] = {
+          stageId: event.stageId,
+          phase: 'finished',
+          status: DIAG_STATES.includes(event.status) ? event.status : 'UNKNOWN',
+          reason: event.reason || null,
+          blockedBy: event.blockedBy ?? null,
+          startedAt: event.startedAt ?? null,
+          finishedAt: event.finishedAt ?? null,
+          durationMs: event.durationMs === undefined ? null : event.durationMs,
+          checks: Array.isArray(event.checks) ? event.checks : [],
+          evidenceRef: event.evidenceRef || null,
+          seq: event.seq,
+        };
+      } else if (event.type === 'run-end') {
+        next.phase = 'finished';
+        next.finishedAt = event.finishedAt || null;
+        next.axes = event.axes || null;
+        next.overall = event.overall || null;
+        next.actualCalls = Array.isArray(event.actualCalls) ? event.actualCalls : [];
+        next.sideEffects = Array.isArray(event.sideEffects) ? event.sideEffects : [];
+        next.stages = Object.assign({}, next.stages, event.stages || {});
+        next.stagePhase = Object.assign({}, next.stagePhase);
+        for (const stageId of DIAG_STAGE_IDS) next.stagePhase[stageId] = 'finished';
+      }
+      return next;
+    }
+
+    /**
+     * Node/edge model for one run.
+     *
+     * Node state = that stage's own status (UNKNOWN until the stage reports). An edge is decided by
+     * **both** ends: a FAIL above stops the flow (FAIL), a skipped downstream segment is SKIPPED, and
+     * anything still unknown keeps the edge UNKNOWN. Nothing here can turn green without a stage
+     * that actually finished PASS.
+     */
+    /**
+     * 诊断日志左侧的「操作名」：界面写中文，`data-uts-event-operation` 仍保留英文 id
+     * （`run-start` / `stage-N` / `run-end`），agent 与排障不受影响。
+     */
+    function diagOperationLabel(operation) {
+      const key = String(operation || '');
+      if (key === 'run-start') return '本轮开始';
+      if (key === 'run-end') return '本轮结束';
+      const stage = /^stage-(\d+)$/u.exec(key);
+      return stage ? '第 ' + stage[1] + ' 段' : key;
+    }
+
+    /** 调试节点的完整信息（悬停提示）：角色/名称、职责、状态、原因码、阻塞与耗时。 */
+    function diagNodeTitle(node, statusText, stage, phase) {
+      return [
+        String(node.role || '') + ' · ' + String(node.name || ''),
+        String(node.sub || ''),
+        '状态：' + String(statusText || ''),
+        stage && stage.reason ? '原因码：' + String(stage.reason) : '',
+        stage && stage.blockedBy !== null && stage.blockedBy !== undefined ? '阻塞于阶段 ' + String(stage.blockedBy) : '',
+        stage && stage.durationMs !== null && stage.durationMs !== undefined ? '耗时 ' + String(stage.durationMs) + 'ms' : '',
+        phase === 'running' ? '本段正在检查' : '',
+      ].filter(Boolean).join('\n');
+    }
+
+    function diagRunModel(run, target) {
+      const current = run || diagEmptyRun(target && target.id);
+      const stages = current.stages || {};
+      const stageOf = (id) => stages[id] || null;
+      const stateOf = (id) => (stageOf(id) ? stageOf(id).status : 'UNKNOWN');
+      const chain = (target && target.chain) || {};
+      const interfaceName = chain.communication ? String(chain.communication) : 'CDP';
+      const interfaceNameWithSuffix = /接口$/.test(interfaceName) ? interfaceName : interfaceName + '接口';
+      const backendName = chain.backend ? String(chain.backend) : 'Chromium DevTools';
+      const targetName = target && (target.name || target.id) ? String(target.name || target.id) : 'Chrome';
+      const nodeSubs = {
+        1: '检查宿主集成、工具注册及调用通道',
+        2: '检查插件 Core、配置和调度能力',
+        3: '执行通信接口探测',
+        4: '检查执行后端及依赖可用性',
+        5: '查询目标列表，验证目标绑定与连接状态',
+      };
+      const nodes = [
+        { index: 1, id: 'agent', name: 'DeepSeekHarness', role: 'AI代理', sub: nodeSubs[1], state: stateOf('1'), stage: stageOf('1') },
+        { index: 2, id: 'controller', name: 'dsh-agent-team-ui-testing', role: '调试控制器', sub: nodeSubs[2], state: stateOf('2'), stage: stageOf('2') },
+        { index: 3, id: 'interface', name: interfaceNameWithSuffix, role: '通信接口', sub: nodeSubs[3], state: stateOf('3'), stage: stageOf('3') },
+        { index: 4, id: 'backend', name: backendName, role: '调试后端', sub: nodeSubs[4], state: stateOf('4'), stage: stageOf('4') },
+        { index: 5, id: 'target', name: targetName + '页面', role: '目标运行环境', sub: nodeSubs[5], state: stateOf('5'), stage: stageOf('5') },
+      ];
+      const edgeState = (up, down) => {
+        if (up === 'FAIL' || down === 'FAIL') return 'FAIL';
+        if (down === 'SKIPPED') return 'SKIPPED';
+        if (up === 'UNKNOWN' || down === 'UNKNOWN') return 'UNKNOWN';
+        if (up === 'WARN' || down === 'WARN') return 'WARN';
+        return 'PASS';
+      };
+      // A dot only runs on a segment whose downstream stage really finished PASS in this run.
+      const liveEdge = (downIndex) => {
+        const stage = stageOf(String(downIndex));
+        return Boolean(stage && stage.status === 'PASS' && (current.stagePhase || {})[String(downIndex)] === 'finished');
+      };
+      const edges = [
+        { index: 1, state: edgeState(nodes[0].state, nodes[1].state), label: '指令', live: liveEdge(2) },
+        { index: 2, state: edgeState(nodes[1].state, nodes[2].state), label: '标准化命令', live: liveEdge(3) },
+        { index: 3, state: edgeState(nodes[2].state, nodes[3].state), label: interfaceName + ' 通信', live: liveEdge(4) },
+        { index: 4, state: edgeState(nodes[3].state, nodes[4].state), label: liveEdge(5) ? interfaceName + ' 会话正常' : '等待目标绑定', live: liveEdge(5) },
+      ];
+      for (const edge of edges) if (edge.state !== 'PASS') edge.live = false;
+      const duties = nodes.map((node) => ({ node: node.id, name: node.name, text: DIAG_DUTY_TEXT[node.id] || '' }));
+      const overall = current.overall
+        ? { status: current.overall.status || 'UNKNOWN', reason: current.overall.reason || '' }
+        : { status: current.phase === 'running' ? 'UNKNOWN' : 'UNKNOWN', reason: current.phase === 'running' ? 'run-in-progress' : 'no-run' };
+      return { run: current, nodes, edges, duties, overall, stageOf };
+    }
+
+    /** Event rows: one per stage-end plus the run markers, newest first, bounded to 8. */
+    function diagRunRows(run) {
+      const current = run || diagEmptyRun('');
+      const rows = [];
+      for (const event of current.events || []) {
+        if (event.type === 'run-start') {
+          rows.push({ kind: 'run-start', seq: event.seq, at: event.startedAt || null, operation: 'run-start', runId: event.runId || '', status: 'UNKNOWN', reason: null, blockedBy: null, durationMs: null, evidenceRef: null });
+        } else if (event.type === 'stage-end') {
+          rows.push({
+            kind: 'stage', stageId: event.stageId, seq: event.seq, at: event.finishedAt || event.startedAt || null,
+            operation: 'stage-' + event.stageId, runId: event.runId || '',
+            status: DIAG_STATES.includes(event.status) ? event.status : 'UNKNOWN',
+            reason: event.reason || null, blockedBy: event.blockedBy ?? null,
+            durationMs: event.durationMs === undefined ? null : event.durationMs,
+            evidenceRef: event.evidenceRef || null,
+          });
+        } else if (event.type === 'run-end') {
+          rows.push({ kind: 'run-end', seq: event.seq, at: event.finishedAt || null, operation: 'run-end', runId: event.runId || '', status: (event.overall && event.overall.status) || 'UNKNOWN', reason: (event.overall && event.overall.reason) || null, blockedBy: null, durationMs: event.durationMs === undefined ? null : event.durationMs, evidenceRef: null });
+        }
+      }
+      return rows
+        .sort((left, right) => (right.seq || 0) - (left.seq || 0))
+        .slice(0, DIAG_RUN_ROWS);
+    }
+
+    /**
+     * Normalize the Host readiness payload (`{checkedAt, environments:[...]}` or a map keyed by
+     * environment id). Each axis may be a bare status or `{status, reason}`; missing axes stay
+     * absent so the page can say "not probed" instead of inventing a value.
+     */
+    /**
+     * Read the six axes out of one Host readiness entry (environment-level or provider-level).
+     * The Host returns a nested `axes` object (M4 contract); older/defensive shapes may still be
+     * flat, so the nested value is read first and the flat field is the fallback.
+     */
+    function axesOfHostEntry(entry) {
+      const axes = {};
+      if (!entry || typeof entry !== 'object') return axes;
+      for (const axis of AXIS_ORDER) {
+        const rawValue = entry.axes && entry.axes[axis] !== undefined
+          ? entry.axes[axis]
+          : entry[axis];
+        if (rawValue === undefined || rawValue === null) continue;
+        if (typeof rawValue === 'object') {
+          const status = rawValue.status === undefined || rawValue.status === null ? '' : String(rawValue.status);
+          if (!status) continue;
+          // A13: keep the *evidence* the Host measured, not just a status word. Dropping
+          // target/evidence/expiresAt here made "which capability is missing / which target was
+          // probed / when" unanswerable in the page even though the Host had measured it.
+          axes[axis] = {
+            status,
+            reason: rawValue.reason ? String(rawValue.reason) : '',
+            checkedAt: Number.isFinite(rawValue.checkedAt) ? rawValue.checkedAt : null,
+            expiresAt: Number.isFinite(rawValue.expiresAt) ? rawValue.expiresAt : null,
+            targetId: rawValue.target && typeof rawValue.target === 'object' && rawValue.target.targetId
+              ? String(rawValue.target.targetId)
+              : '',
+            evidenceKind: rawValue.evidence && typeof rawValue.evidence === 'object' && rawValue.evidence.kind
+              ? String(rawValue.evidence.kind)
+              : '',
+            checks: rawValue.evidence && typeof rawValue.evidence === 'object'
+              && rawValue.evidence.checks && typeof rawValue.evidence.checks === 'object'
+              ? rawValue.evidence.checks
+              : null,
+          };
+        } else {
+          axes[axis] = { status: String(rawValue), reason: '', checkedAt: null, expiresAt: null, targetId: '', evidenceKind: '', checks: null };
+        }
+      }
+      return axes;
+    }
+
+    function normalizeReadiness(readiness) {
+      const map = {};
+      if (!readiness || typeof readiness !== 'object') return map;
+      const raw = readiness.environments;
+      let list = null;
+      if (Array.isArray(raw)) list = raw;
+      else if (raw && typeof raw === 'object') list = Object.keys(raw).map((id) => Object.assign({ environment: id }, raw[id]));
+      if (!list) return map;
+      for (const entry of list) {
+        if (!entry || typeof entry !== 'object') continue;
+        const id = String(entry.environment || entry.id || entry.env || '');
+        if (!id) continue;
+        const axes = axesOfHostEntry(entry);
+        // Slice ② also reports per-provider axes (`readiness.environments[web].providers.<id>.axes`).
+        // Each card reads its own provider's result instead of sharing Chrome's connection/target/
+        // capability axes — a disabled provider is therefore not rendered as "ready".
+        const providers = {};
+        const rawProviders = entry.providers && typeof entry.providers === 'object' ? entry.providers : null;
+        if (rawProviders) {
+          for (const [providerId, providerEntry] of Object.entries(rawProviders)) {
+            if (!providerEntry || typeof providerEntry !== 'object') continue;
+            providers[providerId] = {
+              axes: axesOfHostEntry(providerEntry),
+              checkedAt: String(providerEntry.checkedAt || entry.checkedAt || readiness.checkedAt || ''),
+              reason: providerEntry.reason ? String(providerEntry.reason) : '',
+            };
+          }
+        }
+        map[id] = {
+          axes,
+          providers,
+          checkedAt: String(entry.checkedAt || readiness.checkedAt || ''),
+          reason: entry.reason ? String(entry.reason) : '',
+        };
+      }
+      return map;
+    }
+
+    /** Static engineering support, used only when the Host sends no support axis. */
+    function staticSupportOf(groupId) {
+      const group = TARGET_ENV_GROUPS.find((item) => item.id === groupId);
+      if (!group) return 'planned';
+      if (group.targets.some((target) => target.state === 'supported')) return 'supported';
+      if (group.targets.some((target) => target.state === 'unsupported')) return 'unsupported';
+      return 'planned';
+    }
+
+    /** `true`/`false` from the Host config, or `null` when the config carries no environment map. */
+    function enabledFromConfig(config, envId) {
+      const envs = config && config.global && config.global.environments;
+      if (!envs || typeof envs !== 'object') return null;
+      const entry = envs[envId];
+      return Boolean(entry && entry.enabled === true);
+    }
+
+    /**
+     * Per-provider switch values straight from the Host config.
+     *
+     * Returns `null` when the config carries no provider map at all (old Host / unreadable config),
+     * so the page can say "unknown" instead of pretending the switch is off. The map is the single
+     * source of truth: closing the target-environment master switch never rewrites these values.
+     */
+    function providersFromConfig(config, envId) {
+      const envs = config && config.global && config.global.environments;
+      const entry = envs && typeof envs === 'object' ? envs[envId] : null;
+      const providers = entry && typeof entry.providers === 'object' && entry.providers ? entry.providers : null;
+      if (!providers) return null;
+      const out = {};
+      for (const [providerId, value] of Object.entries(providers)) {
+        out[providerId] = Boolean(value && value.enabled === true);
+      }
+      return out;
+    }
+
+    /**
+     * The execution provider the Host resolved for this scope. Read from `resolved.provider`, never
+     * inferred from the checkboxes: the switch says "may use", this says "will use".
+     */
+    function currentProviderFromState(state) {
+      const resolved = state && state.resolved && typeof state.resolved === 'object' ? state.resolved : null;
+      return resolved && typeof resolved.provider === 'string' ? resolved.provider : '';
+    }
+
+    /**
+     * Six axes for one provider card, read from `readiness.environments[env].providers.<id>.axes`.
+     * When the Host reports nothing for that provider, every axis stays `not-probed` with a reason —
+     * a card never borrows another provider's connection/target/capability evidence.
+     */
+    function providerAxes(state, envId, providerId) {
+      const entry = state && state.readiness ? state.readiness[envId] : null;
+      const providerEntry = entry && entry.providers ? entry.providers[providerId] : null;
+      const hostAxes = providerEntry && providerEntry.axes ? providerEntry.axes : null;
+      const configLoaded = Boolean(state && state.revision !== null && !state.error);
+      return AXIS_ORDER.map((axis) => {
+        if (axis === 'enabled') {
+          if (configLoaded) {
+            const providers = providersFromConfig(state.config, envId);
+            if (providers === null) {
+              return { axis, status: 'not-probed', reason: '宿主配置未包含运行环境清单', source: 'unavailable' };
+            }
+            return providers[providerId] === true
+              ? { axis, status: 'true', reason: '宿主配置已启用该运行环境', source: 'host' }
+              : { axis, status: 'false', reason: '宿主配置未启用该运行环境', source: 'host' };
+          }
+          return { axis, status: 'not-probed', reason: '宿主配置不可用，未读取到该运行环境的启用状态', source: 'unavailable' };
+        }
+        const host = hostAxes ? hostAxes[axis] : null;
+        if (host && host.status) {
+          return {
+            axis,
+            status: host.status,
+            reason: host.reason || '来自宿主就绪结果',
+            source: 'host',
+            checkedAt: host.checkedAt ?? null,
+            expiresAt: host.expiresAt ?? null,
+            targetId: host.targetId || '',
+            evidenceKind: host.evidenceKind || '',
+            checks: host.checks || null,
+          };
+        }
+        return { axis, status: 'not-probed', reason: '宿主未提供该运行环境的探测结果', source: 'unavailable' };
+      });
+    }
+
+    /**
+     * Six independent axes for one environment. Nothing is merged into a single "valid" flag:
+     * unsupported, disabled and not-probed stay distinguishable, and a missing Host answer is
+     * reported as not-probed with a reason rather than a ready state.
+     */
+    function environmentAxes(state, groupId) {
+      const entry = state && state.readiness ? state.readiness[groupId] : null;
+      const hostAxes = entry && entry.axes ? entry.axes : {};
+      const configLoaded = Boolean(state && state.revision !== null && !state.error);
+      return AXIS_ORDER.map((axis) => {
+        // `enabled` is the user's saved intent: the Host config revision wins over a readiness
+        // snapshot, so a successful PUT is visible immediately (the write response has no readiness).
+        if (axis === 'enabled') {
+          if (configLoaded) {
+            const enabled = enabledFromConfig(state.config, groupId);
+            if (enabled === null) {
+              return { axis, status: 'not-probed', reason: '宿主配置未包含环境策略', source: 'unavailable' };
+            }
+            return {
+              axis,
+              status: enabled ? 'true' : 'false',
+              reason: enabled ? '宿主配置已启用该环境' : '宿主配置未启用该环境',
+              source: 'host',
+            };
+          }
+          if (state && state.error) {
+            return { axis, status: 'not-probed', reason: '宿主配置读取失败，无法确认用户启用状态', source: 'unavailable' };
+          }
+          const hostEnabled = hostAxes.enabled;
+          if (hostEnabled && hostEnabled.status) {
+            return { axis, status: hostEnabled.status, reason: hostEnabled.reason || '来自宿主就绪结果', source: 'host' };
+          }
+          return { axis, status: 'not-probed', reason: '宿主配置不可用，未读取到用户启用状态', source: 'unavailable' };
+        }
+        const host = hostAxes[axis];
+        if (host && host.status) {
+          // Carry the measured detail through to the DOM: which target was probed, when it was
+          // checked, and (for the capability axis) which per-capability checks passed (A13).
+          return {
+            axis,
+            status: host.status,
+            reason: host.reason || '来自宿主就绪结果',
+            source: 'host',
+            checkedAt: host.checkedAt ?? null,
+            expiresAt: host.expiresAt ?? null,
+            targetId: host.targetId || '',
+            evidenceKind: host.evidenceKind || '',
+            checks: host.checks || null,
+          };
+        }
+        if (axis === 'support') {
+          return { axis, status: staticSupportOf(groupId), reason: '静态候选清单（宿主未提供 support 探测）', source: 'static' };
+        }
+        return { axis, status: 'not-probed', reason: '宿主未提供该轴的探测结果', source: 'unavailable' };
+      });
+    }
+
+    const EMPTY_HOST_CONFIG = Object.freeze({
+      loading: true, error: '', revision: null, config: null, resolved: null, readiness: {}, checkedAt: '',
+      // Local observation time of the last *successful* read (ms). `checkedAt` is the Host's probe
+      // time; this one answers "how long ago did this page last hear from the Host".
+      lastReadAt: 0,
+    });
+
+    /** Adopt one Host config payload; a payload without a numeric revision is a failed read. */
+    function mergeHostConfig(previous, payload) {
+      const revision = payload && typeof payload.revision === 'number' ? payload.revision : null;
+      if (revision === null) {
+        return Object.assign({}, previous, {
+          loading: false,
+          error: '宿主未提供配置接口（响应缺少 revision）',
+        });
+      }
+      const readiness = payload.readiness !== undefined ? normalizeReadiness(payload.readiness) : previous.readiness;
+      const checkedAt = payload.readiness && payload.readiness.checkedAt
+        ? String(payload.readiness.checkedAt)
+        : previous.checkedAt;
+      return {
+        loading: false,
+        error: '',
+        revision,
+        config: payload.config !== undefined ? payload.config : previous.config,
+        resolved: payload.resolved !== undefined ? payload.resolved : previous.resolved,
+        readiness,
+        checkedAt,
+        lastReadAt: previous.lastReadAt || 0,
+      };
+    }
+
+    /**
+     * 宿主配置类错误的英文原因 → 中文。宿主返回的是机器可读英文（`environment android is
+     * planned and cannot be selected in v1` 等），直接上屏对用户没有信息量；这里按已知模式翻译，
+     * 未识别的原样保留（不猜），原文仍留在悬停提示里。
+     */
+    function configErrorText(message) {
+      const raw = String(message || '').trim();
+      if (!raw) return '';
+      let match = /^environment\s+(\S+)\s+is planned and cannot be selected in v1/iu.exec(raw);
+      if (match) return 'v1 还不支持启用 ' + match[1] + '：该环境仍是规划中';
+      match = /^environment\s+(\S+)\s+is test-only/iu.exec(raw);
+      if (match) return match[1] + ' 仅供测试使用';
+      match = /^unknown environment:\s*(\S+)/iu.exec(raw);
+      if (match) return '没有这个目标环境：' + match[1];
+      match = /^unknown provider:\s*(\S+)/iu.exec(raw);
+      if (match) return '没有这个运行环境：' + match[1];
+      return raw;
+    }
+
+    function hostConfigError(error) {
+      const code = String((error && error.code) || '');
+      if (code === 'CONFIG_TIMEOUT') return '读取宿主配置超时（' + HOST_CONFIG_TIMEOUT_MS + 'ms 内未完成）';
+      if (code === 'CONFIG_CONFLICT') return '配置已被其他窗口修改（CONFIG_CONFLICT）';
+      if (code === 'CONFIG_UNAVAILABLE' || (error && error.status === 404)) {
+        return '宿主未提供配置接口，无法读取或保存配置';
+      }
+      const detail = error && error.message ? String(error.message) : '';
+      // `Failed to fetch` 是浏览器原话，对用户没有信息量：说清「连不上谁」。
+      if (/failed to fetch/iu.test(detail)) return '连不上宿主：请求没送到 DSH（可能已经停止运行）';
+      return '读取宿主配置失败' + (detail ? '：' + detail : '');
+    }
+
+    /**
+     * Read one Host config view and keep the Host revision as the only truth. `scope` is `null` on
+     * the settings page (legacy/default, no scope headers) and the panel's own snapshot in the
+     * panel. A failed read leaves the caller usable but exposes `error`; nothing reports ready.
+     *
+     * `options` is optional and every field defaults to the original single-read behaviour, so the
+     * existing call sites (`useHostConfig(scope, 'session')`, `useHostConfig(null, 'global')`) are
+     * unchanged:
+     *   - `pollMs`  > 0 keeps re-reading on that interval while the component is mounted. A tick is
+     *               skipped when the document is hidden and when a request is already in flight, so
+     *               at most one GET is ever outstanding and the page is silent in the background.
+     *   - `initial` seeds the very first state (the list page already holds a Host read), which is
+     *               what keeps a sub-page from flashing "not probed" for one frame.
+     *   - `silent`  never toggles `loading` (no spinner/blank flicker on a poll); a failed poll keeps
+     *               the previous payload and only sets `error`, which the page renders as `stale`.
+     */
+    /**
+     * 同页面配置变更总线：设置页写完配置后通知调试视图重读，避免两个面板靠轮询或等刷新才同步。
+     * 订阅方只做「重新读一次」，不做本地合并——宿主 revision 仍是唯一真值。
+     */
+    const hostConfigBus = { listeners: new Set() };
+    function publishHostConfigChange() {
+      for (const listener of Array.from(hostConfigBus.listeners)) {
+        try { listener(); } catch { /* 一个订阅者出错不影响其它订阅者 */ }
+      }
+    }
+    function useHostConfigChange(listener) {
+      const ref = React.useRef(listener);
+      ref.current = listener;
+      React.useEffect(() => {
+        const handler = () => { if (typeof ref.current === 'function') ref.current(); };
+        hostConfigBus.listeners.add(handler);
+        return () => { hostConfigBus.listeners.delete(handler); };
+      }, []);
+    }
+
+    function useHostConfig(scope, view, options) {
+      const opts = options && typeof options === 'object' ? options : {};
+      const pollMs = Number.isFinite(opts.pollMs) && opts.pollMs > 0 ? Number(opts.pollMs) : 0;
+      const silent = opts.silent === true;
+      const initial = opts.initial && typeof opts.initial === 'object' ? opts.initial : null;
+      const [state, setState] = React.useState(() => (
+        initial ? Object.assign({}, initial, { loading: false }) : EMPTY_HOST_CONFIG
+      ));
+      const stateRef = React.useRef(state);
+      stateRef.current = state;
+      const epochRef = React.useRef(0);
+      // The in-flight marker is a request **identity**, not a boolean: a superseded request that
+      // finishes late must not clear the marker of the request that replaced it (M5).
+      const inFlightRef = React.useRef(0);
+      const requestIdRef = React.useRef(0);
+      // How many snapshots *this instance* successfully adopted. The diagnostics page uses it to
+      // tell "a real fresh Host read" from the caller-supplied `initial` snapshot (M3).
+      const [reads, setReads] = React.useState(0);
+      const load = React.useCallback((signal) => {
+        const epoch = ++epochRef.current;
+        const requestId = ++requestIdRef.current;
+        inFlightRef.current = requestId;
+        const settle = () => { if (inFlightRef.current === requestId) inFlightRef.current = 0; };
+        if (!silent) setState((current) => Object.assign({}, current, { loading: true, error: '' }));
+        getHostConfig(scope, view, signal).then((payload) => {
+          settle();
+          if (epoch !== epochRef.current) return;
+          const merged = mergeHostConfig(stateRef.current, payload);
+          // `lastReadAt` is the "last complete, valid config adopted" time: a response that only
+          // carries an error (e.g. no numeric revision) must not move it forward (M4).
+          if (!merged.error && merged.revision !== null) merged.lastReadAt = Date.now();
+          setState(merged);
+          if (!merged.error && merged.revision !== null) setReads((value) => value + 1);
+        }).catch((error) => {
+          settle();
+          if (epoch !== epochRef.current) return;
+          if (error && error.name === 'AbortError') return;
+          setState(Object.assign({}, stateRef.current, { loading: false, error: hostConfigError(error) }));
+        });
+      }, [scope, view, silent]);
+      React.useEffect(() => {
+        let controller = null;
+        if (typeof AbortController === 'function') controller = new AbortController();
+        const visible = () => !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+        // The page promises "hidden means no request", so even the first read waits for visibility.
+        if (!pollMs || visible()) load(controller ? controller.signal : undefined);
+        let timer = null;
+        if (pollMs) {
+          timer = setInterval(() => {
+            // Background tabs keep their data but stop asking the Host for more.
+            if (!visible()) return;
+            if (inFlightRef.current !== 0) return;
+            load(controller ? controller.signal : undefined);
+          }, pollMs);
+        }
+        return () => {
+          if (timer !== null) clearInterval(timer);
+          epochRef.current += 1;
+          // Abort the current request (its own deadline timer is cleared by the request itself).
+          if (controller) controller.abort();
+        };
+      }, [load, pollMs]);
+      const reload = React.useCallback(() => load(undefined), [load]);
+      const adopt = React.useCallback((payload) => {
+        const next = mergeHostConfig(stateRef.current, payload);
+        setState(next);
+        return next;
+      }, []);
+      return { state, reload, adopt, reads };
+    }
+
+    /** A CAS conflict carries the latest revision: adopt it, or re-read when it does not. */
+    function adoptHostConflict(hostConfig, error) {
+      const payload = error && error.payload;
+      if (payload && typeof payload.revision === 'number') {
+        hostConfig.adopt(payload);
+        // Without the full config the write response cannot settle the page: re-read it.
+        if (payload.config === undefined) hostConfig.reload();
+        return;
+      }
+      hostConfig.reload();
+    }
+
+    function readExpandedGroups() {
+      try {
+        const raw = window.localStorage.getItem(SETTINGS_EXPANDED_KEY);
+        if (!raw) return {};
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object') return {};
+        const next = {};
+        for (const key of Object.keys(parsed)) if (parsed[key] === true) next[key] = true;
+        return next;
+      } catch (error) {
+        return {};
+      }
+    }
+
+    function writeExpandedGroups(map) {
+      try {
+        window.localStorage.setItem(SETTINGS_EXPANDED_KEY, JSON.stringify(map));
+      } catch (error) {
+        /* Storage may be unavailable (private mode / policy); in-memory state still works. */
+      }
+    }
+
+    /**
+     * 开关组件：受控时把变更交给调用方（例如提交 Host），非受控时保留旧的本地预览行为。
+     * 未支持/未接入或 Host 配置不可用时保持禁用（灰态），避免让人以为已经可启用。
+     */
+    function TargetEnvSwitch(props) {
+      const [on, setOn] = React.useState(props.checked === true);
+      const controlled = typeof props.onChange === 'function';
+      const title = props.title || (props.disabled
+        ? '当前不可启用'
+        : controlled ? '仅筛选当前页面显示的目标' : '前端预览：启用状态暂不保存');
+      return h('label', {
+        className: 'uts-switch',
+        title,
+        'data-uts-switch-busy': props.busy ? 'true' : 'false',
+      },
+        h('input', {
+          type: 'checkbox',
+          role: 'switch',
+          className: 'uts-switch-input',
+          'aria-label': props.label,
+          checked: controlled ? props.checked === true : on,
+          disabled: props.disabled,
+          onChange: (event) => controlled ? props.onChange(event.target.checked) : setOn(event.target.checked),
+        }),
+        h('span', { className: 'uts-switch-track', 'aria-hidden': true }, h('span', { className: 'uts-switch-thumb' })));
+    }
+
+    /**
+     * 第五节点目标卡片：名称 + 启用分开关，页脚左侧「可用」（已实现）/「未支持 · 未接入」（灰字占位）、右侧「诊断」。
+     *
+     * 不再显示的东西：当前使用 / 未选中标签（开关已经反映启用状态）、已实现 / 未支持 / 未接入
+     * 标签（改用「可用」一枚）、接口 / 执行端（③④，在诊断页）、依赖状态（诊断页六轴之一）。
+     * 不显示任何写死版本：启用状态来自 Host 配置，目标状态来自 Host 就绪结果。
+     */
+    function TargetEnvCard(props) {
+      const target = props.target || {};
+      const configReady = props.configReady === true;
+      const busy = props.busy === true;
+      const providerSupported = target.state === 'supported';
+      // 未实现卡片左槽位的灰色占位：工程未支持 vs 还没接入，措辞不混用。
+      const stateText = target.state === 'unsupported' ? '未支持' : '未接入';
+      // 总闸（目标环境）与分开关（运行环境）是两层：分开关只在总闸打开时才可操作，
+      // 但关闭总闸不会改写各 provider 已保存的值。
+      const masterEnabled = props.masterEnabled === true;
+      const providerCurrent = props.providerCurrent === true;
+      const switchDisabled = !providerSupported || !configReady || busy || !masterEnabled;
+      const switchTitle = !providerSupported
+        ? '当前运行环境未实现，不能启用'
+        : !configReady
+          ? (props.configError || '宿主配置不可用，无法提交启用状态')
+          : busy ? '正在提交到宿主…'
+            : !masterEnabled ? '目标环境总开关已关闭：已保存的开关值保留，重新打开后恢复'
+              : '提交到宿主（按宿主版本号保存）';
+      return h('div', {
+        className: 'uts-item',
+        'data-uts-target': target.id,
+        'data-uts-provider': target.id,
+        'data-uts-provider-state': providerSupported ? 'supported' : 'disabled',
+        'data-uts-provider-current': providerCurrent ? 'true' : 'false',
+        'data-uts-state': target.state,
+        'data-uts-node': 'target',
+      },
+        h('div', { className: 'uts-card' },
+          h('div', { className: 'uts-card-head' },
+            h('span', { className: 'uts-card-title' },
+              h('span', { className: 'uts-card-name' }, target.name)),
+            // 开关挪到卡片右上角：卡片里不再有“用户启用：”这类说明文字；
+            // 「当前使用 / 未选中」也不再单独标一枚标签——开关本身就反映了启用状态。
+            // （provider 仍是 Host 解析出来的单选值，只是不再在卡片上重复写一遍。）
+            h('span', { className: 'uts-card-switch', 'data-uts-switch-provider': target.id },
+              h(TargetEnvSwitch, {
+                label: '是否启用运行环境：' + target.name,
+                checked: props.providerEnabled === true,
+                disabled: switchDisabled,
+                busy,
+                title: switchTitle,
+                onChange: (next) => {
+                  if (typeof props.onToggleProvider === 'function') props.onToggleProvider(target.id, next);
+                },
+              }))),
+          // 说明统一压到两行（超出省略，完整文字在 title 里）：卡片不再因为说明多一行就高低不齐。
+          target.note ? h('div', { className: 'uts-card-note', title: target.note }, target.note) : null,
+          // 卡片页脚：左边是状态槽（已实现一枚绿色「可用」；未实现一行灰字「未支持 / 未接入」），
+          // 右边固定「诊断」按钮，永远贴右下角。原来的 已实现/未支持/未接入 标签样式（药丸）不再用，
+          // 未实现只作灰字占位，避免它和「可用」抢同一层的视觉重量。
+          h('div', { className: 'uts-card-foot' },
+            providerSupported
+              ? h('span', {
+                className: 'uts-tag uts-available-tag',
+                'data-uts-tag': 'supported',
+                'data-uts-available': 'true',
+              }, '可用')
+              // 未实现也占住左槽位（灰色小字，非标签）：不然整行只剩右侧按钮，左轻右重。
+              : h('span', {
+                className: 'uts-card-state',
+                'data-uts-card-state': target.state || 'planned',
+              }, stateText),
+            h('div', { className: 'uts-card-actions' },
+              h('button', {
+                type: 'button',
+                className: 'uts-diagnose-btn',
+                'data-uts-diagnose': target.id,
+                title: '单独查看 ' + target.name + ' 的六轴诊断',
+                onClick: (event) => {
+                  if (typeof props.onDiagnose === 'function') props.onDiagnose(target.id, event && event.currentTarget);
+                },
+              }, '诊断')))));
+    }
+
+    /**
+     * 一个环境分组：默认收齐（用户 2026-11-07 要求），点分组标题展开/收起该环境的候选卡片。
+     * 六轴就绪条始终可见（不受折叠影响）；标题是 h4 里的 button（`aria-expanded`/`aria-controls`），
+     * 卡片区域按需渲染为 region。
+     */
+    function TargetEnvGroup(props) {
+      const group = props.group;
+      const expanded = props.expanded === true;
+      const axes = props.axes || [];
+      const regionId = 'uts-group-' + group.id;
+      return h('div', {
+        className: 'uts-group',
+        'data-uts-group': group.id,
+        'data-uts-expanded': expanded ? 'true' : 'false',
+      },
+        h('h4', { className: 'uts-group-heading' },
+          h('button', {
+            type: 'button',
+            className: 'uts-group-toggle',
+            'aria-expanded': expanded,
+            'aria-controls': regionId,
+            'data-uts-group-toggle': group.id,
+            onClick: () => props.onToggle(group.id),
+          },
+            h('span', { className: 'uts-group-title' }, group.title),
+            h('span', { className: 'uts-group-count' }, group.targets.length + ' 个目标'),
+            h('span', { className: 'uts-group-chevron', 'aria-hidden': true }, h(IconChevron, null))),
+          // 目标环境总开关：与上面的展开/收起是两个不同控件（不同节点、不同属性），
+          // 关闭它只停用整块执行，不抹掉各运行环境已保存的开关值。
+          h('div', {
+            className: 'uts-group-env',
+            'data-uts-env-switch': group.id,
+            'data-uts-env-enabled': props.envEnabled === true ? 'true' : 'false',
+          },
+            h(TargetEnvSwitch, {
+              label: '目标环境总开关：' + group.title,
+              checked: props.envEnabled === true,
+              disabled: props.configReady !== true || props.busy === true,
+              busy: props.busy === true,
+              title: props.configReady !== true
+                ? (props.configError || '宿主配置不可用，无法提交启用状态')
+                : props.busy === true
+                  ? '正在提交到宿主…'
+                  : '关闭后停用整块执行；各运行环境已保存的开关值保留',
+              onChange: (next) => {
+                if (typeof props.onToggleEnv === 'function') props.onToggleEnv(next);
+              },
+            }))),
+        expanded
+          ? h('div', { className: 'uts-cards', id: regionId, role: 'region', 'aria-label': group.title },
+              group.targets.length
+                ? group.targets.map((target) => {
+                    // 卡片只读 Host 配置（启用开关）与静态实现状态；六轴与 ③④ 在它自己的诊断页，
+                    // 因此这里不再把 axes 传下去——同一事实只在一处渲染。
+                    return h(TargetEnvCard, {
+                      key: target.id,
+                      target,
+                      masterEnabled: props.envEnabled === true,
+                      providerEnabled: props.providers ? props.providers[target.id] === true : false,
+                      providerCurrent: props.currentProvider === target.id,
+                      configReady: props.configReady,
+                      configError: props.configError,
+                      busy: props.busy,
+                      onDiagnose: props.onDiagnose,
+                      onToggleProvider: props.onToggleProvider,
+                    });
+                  })
+                : h('p', { className: 'uts-empty' }, '暂未接入'))
+          : null);
+    }
+
+    /**
+     * 二级页：单个运行环境（provider）的诊断。
+     *
+     * 打开就**真实跑一次 Host 诊断**（`POST /plugins/ui-testing/diagnose`，NDJSON）：节点/边只用
+     * Host 的五个 stage 结果说话（PASS/WARN/FAIL/SKIPPED/UNKNOWN），动画只由 stage-start /
+     * stage-end 推动，六轴与事件流都来自本 run 的 run-end。没有 run 就没有绿色：这里不拿
+     * readiness 快照冒充「已检查」。
+     */
+    function TargetEnvDiagnostics(props) {
+      const group = props.group || { id: '', title: '', targets: [] };
+      const target = props.target || {};
+      const runKey = diagRunKey(group.id, target.id);
+      const [run, setRun] = React.useState(() => DIAG_RUNS.get(runKey) || diagEmptyRun(target.id));
+      // readiness 只用于「就绪快照」时间戳与（没有 run 时的）六轴兜底，run 期间不轮询。
+      const hostConfig = useHostConfig(null, 'global', {
+        pollMs: run.phase === 'running' ? 0 : DIAG_POLL_MS,
+        initial: props.initialState,
+        silent: true,
+      });
+      const state = hostConfig.state;
+      const lastGoodRef = React.useRef(
+        props.initialState && props.initialState.revision !== null && !props.initialState.error
+          ? props.initialState
+          : null,
+      );
+      if (!state.error && state.revision !== null) lastGoodRef.current = state;
+      const stateError = String(state.error || '');
+      const live = stateError ? (lastGoodRef.current || state) : state;
+      const abortRef = React.useRef(null);
+      const aliveRef = React.useRef(true);
+
+      const applyRun = React.useCallback((next) => {
+        if (!aliveRef.current) return;
+        setRun(next);
+        DIAG_RUNS.set(runKey, next);
+      }, [runKey]);
+
+      const startRun = React.useCallback((mode) => {
+        try {
+          startRunUnsafe(mode);
+        } catch (error) {
+          const message = '诊断 run 启动失败：' + String((error && error.message) || error);
+          try { console.error('[ui-testing] ' + message, error); } catch { /* ignore */ }
+          applyRun(Object.assign(diagEmptyRun(target.id), { phase: 'finished', error: message }));
+        }
+      }, [applyRun, target.id]);
+      // The run keeps its own AbortController: the readiness polling controller must never abort it.
+      const startRunUnsafe = React.useCallback((mode) => {
+        if (abortRef.current) { try { abortRef.current.abort(); } catch { /* ignore */ } }
+        const controller = typeof AbortController === 'function' ? new AbortController() : null;
+        abortRef.current = controller;
+        let current = Object.assign(diagEmptyRun(target.id), { phase: 'running', provider: target.id, mode });
+        applyRun(current);
+        startDiagnoseRun({
+          provider: target.id,
+          mode,
+          signal: controller ? controller.signal : undefined,
+          onEvent: (event) => {
+            current = diagApplyEvent(current, event);
+            applyRun(Object.assign({}, current));
+          },
+        }).then(() => {
+          if (!aliveRef.current) return;
+          if (current.phase !== 'finished') {
+            current = Object.assign({}, current, { phase: 'finished' });
+            applyRun(current);
+          }
+        }).catch((error) => {
+          if (!aliveRef.current) return;
+          if (error && error.name === 'AbortError') return;
+          current = Object.assign({}, current, { phase: 'finished', error: hostConfigError(error) });
+          applyRun(current);
+        });
+      }, [applyRun, target.id]);
+
+      React.useEffect(() => {
+        aliveRef.current = true;
+        // 每次进入诊断页（= 每次点卡片「诊断」）都发起一次新的 observe run：用户点诊断就是要
+        // 真实走一遍工具调用，缓存只用于「离开/失败时把上次结果回显出来」，绝不阻止新 run。
+        // 旧动画不会被重放：动画只由本次 run 的 stage 事件打开。
+        const stored = DIAG_RUNS.get(runKey);
+        if (stored && stored.phase === 'finished' && stored.error) setRun(stored);
+        startRun('observe');
+        return () => {
+          aliveRef.current = false;
+          if (abortRef.current) { try { abortRef.current.abort(); } catch { /* ignore */ } }
+        };
+      }, [runKey, startRun]);
+
+      const model = diagRunModel(run, target);
+      const rows = diagRunRows(run);
+      const overall = model.overall;
+      // 本轮还没有结论时（没跑过 / 没跑出结果）统一说 `待诊断` / `诊断未完成`，不用五态里的词。
+      const runless = diagRunlessText(run);
+      const activeStage = DIAG_STAGE_IDS.find((stageId) => (run.stagePhase || {})[stageId] === 'running') || '';
+      // 胶囊文案（可见）与标题共用同一份文本：胶囊窄的时候悬停仍能看到全句。
+      const overallText = run.phase === 'running'
+        ? '诊断进行中 · 第 ' + (activeStage || '?') + ' 阶段'
+        : (runless || (diagStateLabel(overall.status) + (overall.reason ? ' · ' + diagReasonLabel(overall.reason) : '')));
+      // ③ WARN browser-not-running 时才提供「启动浏览器后继续诊断」，用户点之前绝不启动。
+      const coldBrowser = (run.stages || {})['3'] && run.stages['3'].status === 'WARN'
+        && String(run.stages['3'].reason || '').includes('browser-not-running');
+      // A run is in flight until its stream closes: the action is disabled meanwhile.
+      const runBusy = run.phase === 'running';
+      // "Already connected" = this run really reached the CDP stage (③ PASS).
+      const hasConnection = Boolean((run.stages || {})['3'] && run.stages['3'].status === 'PASS');
+      const runId = run.runId || '';
+      const axesSource = run.axes
+        ? DIAG_AXIS_ORDER.map((axisKey) => {
+          const value = run.axes[axisKey];
+          const status = typeof value === 'string' ? value : (value && value.status) || 'not-probed';
+          // `run-end.axes.checks` is keyed by *check id* (`readonly-eval`, `target-list`), never by
+          // axis: it is only evidence for the capability axis (which is what those checks measured).
+          const rawChecks = run.axes.checks && typeof run.axes.checks === 'object' && !Array.isArray(run.axes.checks)
+            ? run.axes.checks : null;
+          return {
+            axis: axisKey,
+            status,
+            reason: '来自本轮诊断',
+            source: 'run',
+            runId,
+            checkedAt: run.finishedAt || null,
+            checks: axisKey === 'capability' && rawChecks
+              ? Object.fromEntries(Object.entries(rawChecks).map(([name, value]) => [name, { status: typeof value === 'string' ? value : String((value && value.status) || 'unknown') }]))
+              : null,
+            targetId: '',
+          };
+        })
+        : providerAxes(live, group.id || '', target.id || '');
+      // 没有真正读过 readiness 时不要编一个时间（06:00 那种 epoch 文案会被当成真实读数）。
+      const updatedIso = live.lastReadAt ? diagIsoAt(live.lastReadAt) : '';
+      const runTimeIso = diagIsoAt(run.finishedAt || run.startedAt || 0);
+
+      return h('section', {
+        className: 'uts-diagnostics-body',
+        'data-uts-diagnostics': target.id || '',
+        'data-uts-diagnostics-group': group.id || '',
+        'data-uts-diagnostics-state': target.state || '',
+        'data-uts-diag-poll': String(DIAG_POLL_MS),
+        'data-uts-diag-stale': stateError ? 'true' : 'false',
+        'data-uts-diag-updated': updatedIso,
+        'data-uts-run-id': runId,
+        'data-uts-run-phase': run.phase || 'idle',
+        'data-uts-run-mode': run.mode || '',
+        'data-uts-run-source': run.axes ? 'run' : 'readiness',
+      },
+        h('p', { className: 'uts-page-desc', 'data-uts-diag-scope': 'run' },
+          '打开本页会真实执行一次诊断检查（不会启动浏览器），结果按五个阶段逐条返回；'
+          + '需要浏览器时可用下方动作显式启动，离开本页会中止本次检查。'
+          + '本页只反映当前作用域这一次诊断的结果，不代表其它会话中的调试目标不可用。'),
+        h('div', { className: 'uts-diag-summary' },
+          h('span', {
+            className: 'uts-diag-overall',
+            'data-uts-diag-overall': 'true',
+            'data-uts-overall': overall.status,
+            'data-uts-overall-reason': overall.reason || '',
+            // 证据不删只收：本次 run / 就绪快照 / 副作用 / 实际调用 从可见文本挪到胶囊的悬停提示与
+            // 机器可读属性上，界面保持干净但读得到同样的值。
+            'data-uts-run-mode': run.mode || '',
+            'data-uts-diag-updated-clock': updatedIso ? diagClock(updatedIso) : '',
+            'data-uts-diag-side-effects': (run.sideEffects || []).map((effect) => effect.kind).join(','),
+            'data-uts-diag-actual-calls': (run.actualCalls || []).map((call) => call.tool).join(','),
+            title: [
+              '状态：' + overallText,
+              run.phase === 'running'
+                ? '正在读取宿主事件流'
+                : (run.mode ? '本轮：' + run.mode + (runTimeIso ? ' · ' + diagClock(runTimeIso) : '') : '尚无诊断记录'),
+              updatedIso ? '就绪快照 ' + diagClock(updatedIso) : '',
+              (run.sideEffects || []).length ? '副作用 ' + (run.sideEffects || []).map((effect) => effect.kind).join(' · ') : '',
+              (run.actualCalls || []).length ? '实际调用 ' + (run.actualCalls || []).map((call) => call.tool).join(' · ') : '',
+            ].filter(Boolean).join('；'),
+            role: 'status',
+          },
+            h('i', { className: 'uts-diag-overall-dot', 'aria-hidden': true }),
+            h('span', { 'data-uts-overall-text': 'true' }, overallText)),
+          run.error
+            ? h('p', { className: 'uts-diag-stale', 'data-uts-diag-error': 'true' }, run.error)
+            : null,
+          stateError
+            ? h('p', { className: 'uts-diag-stale', 'data-uts-diag-error': 'true' },
+              '就绪快照读取失败（不影响本轮结果）：' + stateError)
+            : null,
+          // 常驻动作：打开页面本身只做 observe（不启动浏览器），"开始诊断"才手动触发一轮 start。
+          // 浏览器没在跑时由这一轮自己启动；已连接时只重新检查，不重启。run 进行中禁用，避免并发两轮。
+          h('div', { className: 'uts-diag-action', 'data-uts-diag-action': 'start' },
+            h('button', {
+              type: 'button',
+              className: 'uts-link-btn',
+              'data-uts-diag-start': 'true',
+              'data-uts-diag-run': 'start',
+              'data-uts-action-disabled': runBusy ? 'true' : 'false',
+              'data-uts-diag-action-note': runBusy ? 'busy' : coldBrowser || !hasConnection ? 'cold' : 'warm',
+              // 说明文字不再占版面：搬到按钮的悬停提示里（三种分支同一套文案）。
+              title: runBusy
+                ? '本次诊断正在进行中，完成后再开始下一轮。'
+                : (coldBrowser || !hasConnection
+                  ? '会启动所选浏览器（' + (target.name || target.id) + '）并创建受管调试页；不会接管其它会话的标签。'
+                  : '会重新执行五个阶段的检查，不会重启浏览器。'),
+              disabled: runBusy,
+              onClick: () => { if (!runBusy) startRun('start'); },
+            }, '开始诊断'))),
+
+        /* ① 实时调试拓扑：五节点 + 四条边（横排），全部取本次 run 的 stage 结果 */
+        h('section', { className: 'uts-diag-panel', 'data-uts-diag-section': 'topology' },
+          h('div', { className: 'uts-diag-panel-head' },
+            h('h3', { className: 'uts-diag-panel-title' }, '调试流程')),
+          h('div', { className: 'uts-diag-chain-scroll' },
+            h('div', {
+              className: 'uts-diag-chain',
+              'data-uts-topology': 'true',
+              'data-uts-topology-state': overall.status,
+              'data-uts-run-phase': run.phase || 'idle',
+            }, (() => {
+              const cells = [h('div', {
+                key: 'rail',
+                className: 'uts-diag-rail',
+                'data-uts-diag-rail': 'true',
+                'aria-hidden': true,
+              }, h('i', { className: 'uts-diag-rail-dot', 'data-uts-diag-rail-dot': 'true' }))];
+              model.nodes.forEach((node, index) => {
+                const stage = node.stage || null;
+                const phase = (run.stagePhase || {})[String(node.index)] || 'idle';
+                // 没有 run 结果时说「待诊断 / 诊断未完成」，有结果才用五态 + 原因码（中文在前、
+                // 英文码在括号里，agent 仍可从 data-uts-stage-reason 读到原码）。
+                const nodeStatusText = phase === 'running'
+                  ? '检查中…'
+                  : (runless || (diagStateLabel(node.state) + (stage && stage.reason ? ' · ' + diagReasonLabel(stage.reason) : '')));
+                cells.push(h('div', {
+                  key: 'node-' + node.index,
+                  className: 'uts-diag-node',
+                  'data-uts-node': String(node.index),
+                  'data-uts-node-id': node.id,
+                  'data-uts-node-state': node.state,
+                  'data-uts-node-note': node.sub,
+                  'data-uts-stage': String(node.index),
+                  'data-uts-stage-status': node.state,
+                  'data-uts-stage-phase': phase,
+                  'data-uts-stage-reason': (stage && stage.reason) || '',
+                  'data-uts-stage-blocked-by': stage && stage.blockedBy !== null && stage.blockedBy !== undefined ? String(stage.blockedBy) : '',
+                  'data-uts-stage-duration': stage && stage.durationMs !== null && stage.durationMs !== undefined ? String(stage.durationMs) : '',
+                  // 卡片里 name / 职责 / 状态都可能被截断：悬停给出完整四行，不留信息黑洞。
+                  title: diagNodeTitle(node, nodeStatusText, stage, phase),
+                },
+                  h('div', { className: 'uts-diag-node-top' },
+                    h('span', { className: 'uts-diag-node-index' }, '步骤 ' + node.index),
+                    h('span', { className: 'uts-diag-node-glyph', 'aria-hidden': true }, diagNodeIcon(node.id))),
+                  h('div', { className: 'uts-diag-node-role' }, node.role),
+                  h('div', { className: 'uts-diag-node-name', 'data-uts-node-name': node.name, title: node.name }, node.name),
+                  h('div', { className: 'uts-diag-node-sub', 'data-uts-node-sub': node.sub, title: node.sub }, node.sub),
+                  h('div', { className: 'uts-diag-node-status' },
+                    h('i', { className: 'uts-diag-dot', 'aria-hidden': true }),
+                    h('span', { 'data-uts-node-status': node.state }, nodeStatusText))));
+                const edge = model.edges[index];
+                if (edge) {
+                  cells.push(h('div', {
+                    key: 'edge-' + edge.index,
+                    className: 'uts-diag-edge',
+                    'data-uts-edge': String(edge.index),
+                    'data-uts-edge-state': edge.state,
+                    'data-uts-edge-label': edge.label,
+                    'data-uts-edge-live': edge.live ? 'true' : 'false',
+                  },
+                    h('span', { className: 'uts-diag-edge-line', 'aria-hidden': true },
+                      h('i', { className: 'uts-diag-edge-dot', 'data-uts-edge-dot': 'true' })),
+                    edge.state === 'FAIL'
+                      ? h('span', { className: 'uts-diag-edge-break', 'aria-hidden': true }, '×')
+                      : null,
+                    h('span', { className: 'uts-diag-edge-label' }, edge.label)));
+                }
+              });
+              return cells;
+            })())),
+          h('p', { className: 'uts-diag-flow' },
+            '动画只跟随宿主事件回填：这一段开始检查时对应步骤脉冲，检查结束后该段静止；'
+            + '只有本轮结论为「正常」的段才继续走球；结论是「异常」的，小球停在那个步骤上并写明原因。')),
+
+        /* ② 六轴：来自 run-end.axes（原词表），没有 run 时才回退 readiness */
+        h('section', { className: 'uts-diag-panel', 'data-uts-diag-section': 'axes' },
+          h('div', { className: 'uts-diag-panel-head' },
+            h('h3', { className: 'uts-diag-panel-title' }, '各模块诊断状态')),
+          h('div', { className: 'uts-diag-axes', 'data-uts-axes': target.id || '' },
+            axesSource.map((axis, order) => h('div', {
+              key: axis.axis,
+              className: 'uts-diag-axis',
+              'data-uts-axis': axis.axis,
+              'data-uts-status': axis.status,
+              'data-uts-axis-order': String(order),
+              'data-uts-axis-provider': target.id || '',
+              'data-uts-axis-source': axis.source || 'readiness',
+              'data-uts-axis-run-id': axis.runId || '',
+              'data-uts-axis-target': axis.targetId || '',
+              'data-uts-axis-checked-at': axis.checkedAt ? String(axis.checkedAt) : '',
+              title: axisDetail(axis),
+            },
+              h('span', { className: 'uts-diag-axis-icon', 'aria-hidden': true }, diagAxisIcon(axis.axis)),
+              h('div', { className: 'uts-diag-axis-body' },
+                h('div', { className: 'uts-diag-axis-head' },
+                  h('span', { className: 'uts-diag-axis-name' }, AXIS_LABEL[axis.axis] || axis.axis),
+                  h('span', { className: 'uts-diag-axis-value' }, axisText(axis.axis, axis.status))),
+                h('code', {
+                  className: 'uts-diag-axis-reason',
+                  'data-uts-axis-reason': axis.axis,
+                  // 英文码单独留一个属性：界面上是「中文（code）」，agent 读这个属性拿纯码。
+                  'data-uts-axis-reason-code': axis.reason || '',
+                }, diagReasonLabel(axis.reason) || '无附加原因'),
+                (() => {
+                    // 六条探测逐行列出；完整列表（含英文 id）在悬停提示里。
+                    // 没有检查项的卡片也渲染这块（空内容），保证六张卡片都按三行占位。
+                    const rawChecks = axis.checks && typeof axis.checks === 'object' ? axis.checks : {};
+                    const rows = Object.entries(rawChecks)
+                      .map(([name, check]) => ({ name, status: String(check && check.status ? check.status : check) }));
+                    // 界面上的检查项名与状态都写中文（只读求值：跳过），英文 id 留给属性与悬停提示。
+                    const zh = rows.map((row) => diagTermLabel(row.name) + '：' + diagTermLabel(row.status));
+                    // 一行一项、最多三行；还有几条用 `+n` 写在第三行末尾（完整列表见悬停提示）。
+                    const shown = zh.slice(0, DIAG_CHECK_LINES);
+                    const hidden = zh.length - shown.length;
+                    const truncated = hidden > 0;
+                    const pieces = shown.map((textValue, index) => {
+                      const last = index === shown.length - 1;
+                      if (!(truncated && last)) {
+                        return h('span', { key: 'item-' + index, className: 'uts-diag-axis-checks-item' }, textValue);
+                      }
+                      // 「+n」单独一个 span：更小字号 + 更淡的颜色，读起来是计数标签，不是又一条描述。
+                      return h('span', { key: 'item-' + index, className: 'uts-diag-axis-checks-item' },
+                        textValue,
+                        h('span', {
+                          className: 'uts-diag-axis-checks-more',
+                          'data-uts-axis-checks-more': String(hidden),
+                        }, '+' + hidden));
+                    });
+                    return h('code', {
+                      className: 'uts-diag-axis-checks',
+                      'data-uts-axis-checks': axis.axis,
+                      'data-uts-axis-checks-total': String(rows.length),
+                      // agent 读纯英文对：readonly-eval: skip · target-list: skip · …
+                      'data-uts-axis-checks-en': rows.map((row) => row.name + ': ' + row.status).join(' · '),
+                      // 被省略的条数：界面上写成「+n」，外部断言可读这个值
+                      'data-uts-axis-checks-truncated': truncated ? String(hidden) : '',
+                      title: rows.map((row) => diagTermLabel(row.name) + '（' + row.name + '）：' + diagTermLabel(row.status)).join(' · '),
+                    }, pieces);
+                })()))))),
+
+        /* ③ 诊断日志 + ④ 调试节点职责 */
+        h('div', { className: 'uts-diag-bottom' },
+          h('section', { className: 'uts-diag-panel', 'data-uts-diag-section': 'events' },
+            h('div', { className: 'uts-diag-panel-head' },
+              h('h3', { className: 'uts-diag-panel-title' }, '诊断日志')),
+            h('div', {
+              className: 'uts-diag-events',
+              'data-uts-events': 'true',
+              'data-uts-event-count': String((run.events || []).length),
+            },
+              rows.length
+                ? rows.map((row) => {
+                  // Host 的时间戳是 Date.now() 的数字，先统一转 ISO，否则 `diagClock` 解析失败 →
+                  // 每行都显示 `--:--:--`。DOM 属性也写 ISO，方便外部核对。
+                  const atIso = diagIsoAt(row.at);
+                  const observedIso = diagIsoAt(run.finishedAt);
+                  // run-start 不是检查结果，别拿「未知」冒充状态：文案「开始」+ INFO 中性灰点。
+                  const statusKey = row.kind === 'run-start' ? 'INFO' : row.status;
+                  const statusText = row.kind === 'run-start' ? '开始' : diagStateLabel(row.status);
+                  return h('div', {
+                    key: 'event-' + (row.seq || 0),
+                    className: 'uts-diag-event',
+                    'data-uts-event': 'true',
+                    'data-uts-event-kind': row.kind,
+                    'data-uts-event-axis': row.operation,
+                    'data-uts-event-time': atIso,
+                    'data-uts-event-time-source': 'host',
+                    'data-uts-event-host-checked-at': atIso,
+                    'data-uts-event-observed-at': observedIso,
+                    'data-uts-event-from': '',
+                    'data-uts-event-to': statusKey,
+                    'data-uts-event-status': statusKey,
+                    'data-uts-event-run-id': row.runId || '',
+                    'data-uts-event-seq': String(row.seq || ''),
+                    'data-uts-event-operation': row.operation,
+                    'data-uts-event-evidence-ref': row.evidenceRef || '',
+                    // 英文码单独留属性（agent 读纯码），可见文本走中英对照。
+                    'data-uts-event-reason': row.reason || '',
+                    title: diagOperationLabel(row.operation) + ' · ' + statusText + (row.reason ? ' · ' + diagReasonLabel(row.reason) : ''),
+                  },
+                    // SKIPPED 阶段从未执行，Host 就没有 finishedAt：显示「—」而不是假时间或占位符。
+                    h('time', { className: 'uts-diag-event-time' }, atIso ? diagClock(atIso) : '—'),
+                    h('i', { className: 'uts-diag-event-pin', 'data-uts-event-status': statusKey, 'aria-hidden': true }),
+                    h('div', { className: 'uts-diag-event-text' },
+                      diagOperationLabel(row.operation) + ' · ' + statusText
+                      + (row.reason ? ' · ' + diagReasonLabel(row.reason) : '')
+                      // 上游阻塞：写中文，英文键 blockedBy 只留在属性与 NDJSON 里。
+                      + (row.blockedBy ? ' · 阻塞于第 ' + row.blockedBy + ' 段' : '')
+                      + ' · ' + (row.durationMs === null || row.durationMs === undefined ? '—' : Math.round(row.durationMs * 10) / 10 + 'ms')));
+                })
+                : h('p', { className: 'uts-diag-empty', 'data-uts-events-empty': 'true' }, '尚未取得宿主诊断结果'))),
+          h('section', { className: 'uts-diag-panel', 'data-uts-diag-section': 'duties' },
+            h('div', { className: 'uts-diag-panel-head' },
+              h('h3', { className: 'uts-diag-panel-title' }, '步骤职责')),
+            h('div', { className: 'uts-diag-duties', 'data-uts-duties': 'true' },
+              model.duties.map((duty) => h('div', {
+                key: 'duty-' + duty.node,
+                className: 'uts-diag-duty',
+                'data-uts-duty': 'true',
+                'data-uts-duty-node': duty.node,
+              },
+                h('span', { className: 'uts-diag-duty-arrow', 'aria-hidden': true }, '↗'),
+                h('span', { className: 'uts-diag-duty-text' },
+                  h('strong', null, duty.name),
+                  ' ' + duty.text)))))));
+    }
+
+    /**
+     * 诊断弹层（DSH 的 frame-wide `shell.overlay` 插槽）。
+     *
+     * 设置弹层太窄，横排五节点链路放不下；这里用一个独立的全宽覆盖层。插槽层本身是
+     * click-through，所以条目自己开 `pointer-events`。关闭方式：✕ 按钮、Esc、点遮罩；
+     * 关闭即中止进行中的 run（内容组件卸载时 abort）。
+     */
+    function DiagnosticsOverlay() {
+      const overlay = useDiagnosticsOverlay();
+      const open = overlay.open === true;
+      const closeRef = React.useRef(null);
+      React.useEffect(() => {
+        if (!open) return undefined;
+        const trigger = overlay.trigger;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const onKeyDown = (event) => {
+          if (event.key === 'Escape' || event.key === 'Esc') {
+            event.stopPropagation();
+            event.preventDefault();
+            closeDiagnostics();
+          }
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        const focusTimer = setTimeout(() => {
+          if (closeRef.current && typeof closeRef.current.focus === 'function') closeRef.current.focus();
+        }, 0);
+        return () => {
+          document.removeEventListener('keydown', onKeyDown, true);
+          document.body.style.overflow = previousOverflow;
+          clearTimeout(focusTimer);
+          if (trigger && trigger.isConnected && typeof trigger.focus === 'function') trigger.focus();
+        };
+      }, [open, overlay.trigger]);
+      if (!open) return null;
+      const group = TARGET_ENV_GROUPS.find((item) => item.id === overlay.groupId)
+        || { id: overlay.groupId, title: overlay.groupId, targets: [] };
+      const target = (group.targets || []).find((item) => item.id === overlay.providerId)
+        || { id: overlay.providerId, name: overlay.providerId, state: 'planned' };
+      const titleText = (target.name || target.id) + ' 诊断';
+      const tag = target.state === 'supported' ? '已实现' : target.state === 'unsupported' ? '未支持' : '未接入';
+      const tree = h('div', {
+        className: 'uts-diag-modal-overlay',
+        'data-uts-diag-modal-overlay': 'true',
+        onClick: (event) => {
+          if (event.target === event.currentTarget) closeDiagnostics();
+        },
+      },
+        h('div', {
+          className: 'uts-diag-modal-panel',
+          'data-uts-diag-modal': target.id || '',
+          role: 'dialog',
+          'aria-modal': 'true',
+          'aria-label': titleText,
+          onClick: (event) => event.stopPropagation(),
+        },
+          h('header', { className: 'uts-diag-modal-head' },
+            h('div', { className: 'uts-diag-modal-title' },
+              h('h2', { className: 'uts-page-title' }, titleText),
+              h('span', { className: 'uts-tag', 'data-uts-tag': target.state || 'planned' }, tag)),
+            h('button', {
+              type: 'button',
+              className: 'uts-link-btn uts-diag-modal-close',
+              'data-uts-diagnostics-back': 'true',
+              ref: closeRef,
+              onClick: () => closeDiagnostics(),
+            }, '关闭')),
+          h('div', { className: 'uts-diag-modal-body' },
+            h(TargetEnvDiagnostics, { group, target }))));
+      // `shell.overlay` items can end up inside a stacking context that sits below the settings
+      // modal; portalling to <body> is the only placement that is reliably on top.
+      if (reactDom && typeof reactDom.createPortal === 'function' && typeof document !== 'undefined') {
+        return reactDom.createPortal(tree, document.body);
+      }
+      return tree;
+    }
+
+    /**
+     * 设置页正文（DSH 设置弹层的独立分区）。标题/描述在这里渲染，因为 settings.section
+     * 只提供导航标签，不提供页面标题；下面才是「目标环境配置」分组。
+     * 配置真值来自 Host：读取失败显示 `[data-uts-config-error]`，启用开关按 revision 提交。
+     */
+    function TargetEnvSettingsPage() {
+      const hostConfig = useHostConfig(null, 'global');
+      const state = hostConfig.state;
+      const [hideUnimplemented, setHideUnimplemented] = React.useState(false);
+      const [expanded, setExpanded] = React.useState(readExpandedGroups);
+      const [submittingEnv, setSubmittingEnv] = React.useState('');
+      const [submittingProvider, setSubmittingProvider] = React.useState('');
+      const [notice, setNotice] = React.useState(null);
+      // 二级诊断页：记录 (环境, 运行环境)，为空时显示环境分组列表。
+      const [diagnosing, setDiagnosing] = React.useState(null);
+      const aliveRef = React.useRef(true);
+      React.useEffect(() => () => { aliveRef.current = false; }, []);
+      const configReady = state.revision !== null && !state.error;
+      const groups = hideUnimplemented
+        ? TARGET_ENV_GROUPS.map((group) => ({ ...group, targets: group.targets.filter((target) => target.state === 'supported') }))
+          .filter((group) => group.targets.length > 0)
+        : TARGET_ENV_GROUPS;
+      function toggleGroup(id) {
+        setExpanded((current) => {
+          const next = Object.assign({}, current);
+          if (next[id]) delete next[id];
+          else next[id] = true;
+          writeExpandedGroups(next);
+          return next;
+        });
+      }
+      function toggleEnvironment(group, next) {
+        if (!configReady || submittingEnv) return;
+        setSubmittingEnv(group.id);
+        setNotice(null);
+        putHostConfig({ environments: { [group.id]: { enabled: next } } }, state.revision).then((payload) => {
+          if (!aliveRef.current) return;
+          const merged = hostConfig.adopt(payload);
+          if (payload.config === undefined) hostConfig.reload();
+          publishHostConfigChange();
+          setSubmittingEnv('');
+          setNotice(merged.error
+            ? { kind: 'error', text: configErrorText(merged.error) }
+            : { kind: 'ok', text: (next ? '已启用 ' : '已禁用 ') + group.title + ' · revision ' + merged.revision });
+        }).catch((error) => {
+          if (!aliveRef.current) return;
+          setSubmittingEnv('');
+          if (error && error.code === 'CONFIG_CONFLICT') {
+            adoptHostConflict(hostConfig, error);
+            setNotice({
+              kind: 'conflict',
+              text: '配置已被其他窗口修改（CONFIG_CONFLICT）；已按最新 revision 重新读取，本次切换未保存',
+            });
+            return;
+          }
+          setNotice({
+            kind: 'error',
+            text: '保存失败，已回滚为宿主当前值：' + (configErrorText(error && error.message) || '未知错误'),
+          });
+        });
+      }
+      /**
+       * 运行环境分开关：只写 `environments.<env>.providers.<id>.enabled`，与总开关互不影响。
+       * 关闭总开关时不会调用这里，因此各 provider 的已保存值保持不变。
+       */
+      function toggleProvider(group, providerId, next) {
+        if (!configReady || submittingEnv || submittingProvider) return;
+        setSubmittingProvider(providerId);
+        setNotice(null);
+        const patch = { environments: { [group.id]: { providers: { [providerId]: { enabled: next } } } } };
+        putHostConfig(patch, state.revision).then((payload) => {
+          if (!aliveRef.current) return;
+          const merged = hostConfig.adopt(payload);
+          if (payload.config === undefined) hostConfig.reload();
+          publishHostConfigChange();
+          setSubmittingProvider('');
+          const target = (group.targets || []).find((item) => item.id === providerId);
+          const name = target && target.name ? target.name : providerId;
+          setNotice(merged.error
+            ? { kind: 'error', text: configErrorText(merged.error) }
+            : { kind: 'ok', text: (next ? '已启用运行环境 ' : '已禁用运行环境 ') + name + ' · revision ' + merged.revision });
+        }).catch((error) => {
+          if (!aliveRef.current) return;
+          setSubmittingProvider('');
+          if (error && error.code === 'CONFIG_CONFLICT') {
+            adoptHostConflict(hostConfig, error);
+            setNotice({
+              kind: 'conflict',
+              text: '配置已被其他窗口修改（CONFIG_CONFLICT）；已按最新 revision 重新读取，本次切换未保存',
+            });
+            return;
+          }
+          setNotice({
+            kind: 'error',
+            text: '保存失败，已回滚为宿主当前值：' + (configErrorText(error && error.message) || '未知错误'),
+          });
+        });
+      }
+      const errorText = notice && notice.kind !== 'ok' ? notice.text : state.error;
+      return h('section', {
+        className: 'uts-settings',
+        'data-uts-settings': 'page',
+        'data-uts-hide-unimplemented': String(hideUnimplemented),
+        'data-uts-config-revision': state.revision === null ? '' : String(state.revision),
+        'data-uts-config-status': state.error ? 'error' : state.revision === null ? 'loading' : 'ready',
+      },
+        h('style', null, TARGET_ENV_CSS),
+        h('header', { className: 'uts-head' },
+          h('div', { className: 'uts-head-row' },
+            h('h2', { className: 'uts-page-title' }, 'UI 测试'),
+            // 不再提供「重新读取」按钮：面板一打开就会自动读一次 Host 配置
+            // （useHostConfig 挂载即 GET /config?view=global），CONFIG_CONFLICT 时也会自动 adopt/reload。
+            h('div', { className: 'uts-config-actions' },
+              h('div', { className: 'uts-filter' },
+                h('span', null, '隐藏未实现'),
+                h(TargetEnvSwitch, { label: '隐藏未实现', checked: hideUnimplemented, onChange: setHideUnimplemented })))),
+          h('p', { className: 'uts-page-desc' }, '面向 DeepSeekHarness 的前端 GUI 调试与测试插件：Web / Chromium 已实现；Windows/Linux/macOS 桌面、Android、TUI、HarmonyOS、小程序、游戏与 3D 共九种调试环境规划中。'),
+          errorText
+            ? h('p', {
+                className: 'uts-config-error',
+                role: 'alert',
+                'data-uts-config-error': notice && notice.kind ? notice.kind : 'read',
+              }, errorText)
+            : null,
+          notice && notice.kind === 'ok'
+            ? h('p', { className: 'uts-config-meta', role: 'status', 'data-uts-config-notice': 'ok' }, notice.text)
+            : null),
+        h('div', { className: 'uts-body' },
+          h('div', { className: 'uts-groups' }, groups.length
+            ? groups.map((group) => {
+                const axes = environmentAxes(state, group.id);
+                const targetAxis = axes.find((axis) => axis.axis === 'target') || { status: 'not-probed', reason: '' };
+                const readinessEntry = state.readiness ? state.readiness[group.id] : null;
+                return h(TargetEnvGroup, {
+                  key: group.id,
+                  group,
+                  axes,
+                  checkedAt: readinessEntry ? readinessEntry.checkedAt : '',
+                  expanded: expanded[group.id] === true,
+                  onToggle: toggleGroup,
+                  envEnabled: enabledFromConfig(state.config, group.id) === true,
+                  providers: providersFromConfig(state.config, group.id),
+                  currentProvider: currentProviderFromState(state),
+                  configReady,
+                  configError: state.loading ? '正在读取宿主配置…' : state.error,
+                  busy: submittingEnv === group.id || submittingProvider !== '',
+                  targetAxis,
+                  onDiagnose: (providerId, trigger) => openDiagnostics(group.id, providerId, trigger),
+                  onToggleEnv: (next) => toggleEnvironment(group, next),
+                  onToggleProvider: (providerId, next) => toggleProvider(group, providerId, next),
+                });
+              })
+            : h('p', { className: 'uts-empty' }, '暂无已实现的目标'))));
+    }
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        // 面板组件在模块作用域定义，这里把根 ctx 交给它按需读取 DSH 服务（聊天框追加）。
+        pluginContext = ctx;
+        // 选元素引用的 `@` 来源：候选=最近选取的元素；chip 显示紧凑标签，模型文本走 codec.serialize。
+        registerElementReferenceSource(ctx);
+        // 发送后的用户消息里，同样的元素块折叠成紧凑 chip（模型文本不变）。
+        registerUserTextElementReference(ctx);
+
+        ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: ID }, DebugView));
+
+        // 用户 2026-11-06：在 DSH 设置弹层里注册独立设置页（设置 → UI 测试 → 目标环境配置）。
+        // 只注册前端页面；本轮不探测环境、不写配置、不新增 Host 路由或工具。
+        ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section',
+          id: 'ui-testing',
+          order: 50,
+          label: () => 'UI 测试',
+        }, TargetEnvSettingsPage));
+
+        // 诊断页放在 frame-wide 覆盖层（`shell.overlay`）里：设置弹层太窄，横排五节点链路放不下。
+        // 该插槽层本身是 click-through，条目自己开 pointer-events（见 .uts-diag-modal-overlay）。
+        ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+          name: 'shell.overlay',
+          id: 'ui-testing.diagnostics',
+          order: 50,
+        }, DiagnosticsOverlay));
 
         // 左侧「更多」下拉里的一行：打开调试视图，不再占用左侧图标栏
         function MoreRow(props) {