dsh-mobile-plugin 0.5.11 → 0.5.13

package/lib/client.js

@@ -1,8 +1,9 @@
 /**
  * dsh-mobile-plugin 的**客户端半边**（在 DSH 桌面 Web 页面里运行）。
  *
- * 四件事：桌面侧边栏的展开态与「读过了」报给宿主；手机端的已读回执应用回桌面绿点；
- * 提供「设置 → 移动端」那颗由本机打开的网页管理开关。方向是单向的（桌面 → 宿主 → 手机），
+ * 五件事：桌面侧边栏的展开态与「读过了」报给宿主；手机端的已读回执应用回桌面绿点；
+ * 提供「设置 → 移动端」那颗由本机打开的网页管理开关；在侧边栏最底下那一行挂一颗
+ * 手机图标（点一下就是设置里那颗「打开配置页面」）。方向是单向的（桌面 → 宿主 → 手机），
  * 手机上的折叠只存在 App 本地，不写回。
  *
  * 本文件不经任何构建（package.json 直接收录 lib 下的 .js），所以不能写 JSX，统一用
@@ -26,22 +27,34 @@ window.__ModuleLoader__.load({
      * 照抄 @deepseek-ai/dsh-client-ui-settings-plugins 的注入方式：同一
      * data-plugin-css 只注入一次，bundle 被重复物化也不会堆出第二份 <style>。
      *
-     * 这里只留这一项用得到的几条：界面本体已经搬去网页版（那边自带一套样式），
-     * 留着旧类名只会让人以为这里还画着那些东西。
+     * 这一半只剩侧边栏那一颗图标与它打开的诊断弹窗（设置菜单里那一项已经按用户要求去掉）：
+     * 界面本体在网页版里，那边自带一套样式。
      */
-    const STYLE_ID = 'dsh-mobile-plugin/settings-tab.css';
+    const STYLE_ID = 'dsh-mobile-plugin/footer-icon.css';
     const CSS = `
-.dshm_root{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;color:var(--dsw-alias-label-primary)}
-.dshm_card{border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl);background:var(--dsw-alias-settings-card-fill);display:flex;flex-direction:column;gap:10px;padding:14px 16px}
-.dshm_cardTitle{font-size:14px;font-weight:600;line-height:20px;margin:0;display:flex;align-items:center;gap:8px}
-.dshm_heading{font-size:18px;font-weight:600;margin:0}
-.dshm_actions{display:flex;flex-wrap:wrap;gap:8px}
-.dshm_note{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dshm_footAction{flex:none;width:28px;height:28px;margin:0 2px;padding:0;border:none;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
+.dshm_footAction:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dshm_footAction:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
+.dshm_footAction[aria-disabled="true"]{opacity:.45;cursor:default}
+.dshm_footAction[aria-disabled="true"]:hover{background:transparent;color:var(--dsw-alias-label-secondary)}
+.dshm_footActionRail{width:36px;height:36px;margin:2px 0;border-radius:var(--dsw-radius-md)}
+.dshm_overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.42)}
+.dshm_dialog{box-sizing:border-box;width:100%;max-width:560px;max-height:82vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:var(--dsw-radius-xl);border:.5px solid var(--dsw-alias-settings-card-stroke);background:var(--dsw-alias-settings-card-fill);color:var(--dsw-alias-label-primary);box-shadow:0 12px 40px rgba(0,0,0,.28)}
+.dshm_dialogTitle{margin:0;font-size:16px;font-weight:600;line-height:24px}
+.dshm_dialogHeading{margin:2px 0 0;font-size:12px;font-weight:600;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dshm_dialogLead{margin:0;font-size:13px;line-height:20px}
+.dshm_dialogNote{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dshm_facts{margin:0;display:flex;flex-direction:column;gap:6px}
+.dshm_fact{display:flex;gap:10px;align-items:baseline;font-size:12px;line-height:18px}
+.dshm_factKey{flex:none;min-width:84px;color:var(--dsw-alias-label-tertiary)}
+.dshm_factValue{margin:0;min-width:0;word-break:break-all}
+.dshm_factMono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
+.dshm_steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px}
+.dshm_dialogActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:2px}
 .dshm_btn{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:13px;line-height:18px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
 .dshm_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
 .dshm_btn:disabled{cursor:default;opacity:.45}
 .dshm_btnPrimary{background:var(--dsw-alias-state-business-primary);border-color:transparent;color:var(--dsw-alias-bg-layer-1)}
-.dshm_error{margin:0;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px;padding:8px 10px}
 `;
     if (typeof document !== 'undefined' && document.querySelector(`style[data-plugin-css="${STYLE_ID}"]`) === null) {
       const tag = document.createElement('style');
@@ -61,7 +74,7 @@ window.__ModuleLoader__.load({
      * 浏览器侧的应用路由一律写成**文档相对**形式（没有前导斜杠），与 DSH 自己的客户端
      * 一致：宿主给 index 注入了 `<base href="./">`，页面挂在哪个前缀下，请求就跟着哪个
      * 前缀走。写成 `/api/...` 这种站点根绝对地址，DSH 被反向代理挂到子路径（例如
-     * `/dsh/`）时会直接打到站点根、拿回 404 —— 设置页看到的正是「读取宿主状态失败: HTTP 404」。
+     * `/dsh/`）时会直接打到站点根、拿回 404 —— 现场看到的正是「读取宿主状态失败: HTTP 404」。
      */
     const DESKTOP_VIEW_ENDPOINT = 'api/relay/desktop-view';
 
@@ -225,11 +238,11 @@ window.__ModuleLoader__.load({
     const CLIENT_HALF_ENDPOINT = '/api/relay/client-half';
     const CLIENT_HALF_REPORT_MS = 10000;
     /**
-     * 宿主半边的自检口（由外壳注册，实现挂了它也还在）。
+     * 宿主半边的自检口（由**外壳**注册，实现挂了它也还在）。
      *
-     * 实现装载失败时整张 `/api/relay/*` 都 404，这一项只显示一句「插件宿主侧没有加载」，
-     * 真正的原因（等哪个服务超时、哪一代装不上）就没人看得见。这两条是那个原因唯一的出口；
-     * 第二条点一下就在原地重新装载一次，不必重启整个 DSH。
+     * 实现装载失败时整张 `/api/relay/*` 都 404，而「它为什么没起来」只有外壳答得出来
+     * （它自己活得好好的是刻意的故障边界）。诊断弹窗靠这两条把原因、版本、后台重试
+     * 如实摆出来，并提供「重新装载」——那是唯一不必重启整个 DSH 的出路。
      */
     const HOST_HALF_ENDPOINT = '/api/relay/host-half';
     const HOST_HALF_RELOAD_ENDPOINT = '/api/relay/host-half/reload';
@@ -469,309 +482,818 @@ window.__ModuleLoader__.load({
     const NS = 'settings.mobileRelay';
     const DICT = {
       zh: {
-        nav: '移动端',
-        heading: '移动端',
-        cardPanel: '配置页面',
-        openPanel: '打开配置页面',
-        openHint: '设置、配对和相关运维都在这个页面里。',
-        panelPending: '正在读取页面地址…',
-        panelMissing: '宿主还没给出页面地址，稍后再打开这一页试试。',
-        loadFailed: '读取宿主状态失败',
-        loadMissing: '插件宿主侧没有加载：把 DSH 完整退出再打开一次；还不行就在插件市场重装一遍插件。',
-        hostHalfReason: '宿主侧报的原因：',
-        hostHalfRetrying: '它还在后台自己重试，过几分钟刷新这一页就能看到结果；也可以点下面的按钮立刻再试一次。',
-        hostHalfReload: '重新装载',
-        hostHalfReloadFailed: '重新装载没成：',
-        hostHalfUnreachable: '宿主侧的自检口也没有回应：这一版插件可能还没带它（较老的版本）——先更新插件，再完整重启一次 DSH。',
-        hostHalfNoError: '宿主侧自检没报错，控制面路由却确实不在：把 DSH 完整重启一次；还不行请把这句连同插件版本发给我们。',
-        hostHalfVersion: '自检版本：',
-        diagHostReturned: '宿主返回：',
-        diagSelfCheck: '自检：',
-        diagSelfCheckNoAnswer: '没有回应（这一版可能还没带它）',
-        diagSelfCheckNoError: '没有报错',
-        diagSelfCheckRetry: '后台重试 ',
-        diagOnDisk: '碟上版本 ',
-        diagShellRestartAtStartup: '外壳改过，要重启一次 DSH',
-        webAccessOn: '公网网页管理已开放，到期时间',
-        webAccessOff: '公网网页管理已关闭',
-        webAccessOpen: '开放网页管理 2 小时',
-        webAccessClose: '立即关闭网页管理',
-        webAccessHint: '默认关闭；开启后 2 小时自动关闭，访问不会延长时间。关闭后公网不可访问，本机和局域网仍可访问；不影响手机 App。只可从本机 DSH 设置页开关。',
-        webAccessUnavailable: '正在读取本机访问状态…',
-        webAccessError: '更新网页访问状态失败',
+        footerOpen: '打开移动端插件配置网页',
+        footerPending: '网页地址还没就绪',
+        footerPublicConfirm: '这个地址位于公网。继续后会开放移动端插件的网页管理权限 2 小时；期间任何能访问该地址的人都可以操作面板。是否继续？',
+        footerLoadMissing: '插件宿主侧没有加载：把 DSH 完整退出再打开一次；还不行就在插件市场重装一遍插件。',
+        diagTitleLoad: '打不开移动端配置页',
+        diagTitleOpen: '开放网页管理失败',
+        diagChecking: '正在读取宿主状态…',
+        diagBusy: '正在重读状态…',
+        diagHeadingFacts: '诊断读数（可直接复制发给维护者）',
+        diagHeadingSteps: '你可以自己先试这几步',
+        diagClose: '关闭',
+        diagRetry: '重新读取状态',
+        diagReload: '重新装载插件',
+        diagReloadBusy: '正在让宿主重新装载…',
+        diagReloadOk: '重新装载成功，控制面已经回来了。',
+        diagReloadFailed: '重新装载没成：',
+        diagCopy: '复制诊断信息',
+        diagCopied: '诊断信息已复制，可以直接发给维护者。',
+        diagCopyFailed: '复制失败：请手动选中上面的读数再复制。',
+        diagOpenPanel: '打开配置页面',
+        diagSummaryLoadMissing: '插件宿主侧没有加载：DSH 外壳在跑，插件本体没装起来（最常见的原因是装完没重启）。',
+        diagSummaryUnreachable: '宿主没有回应状态查询，这一版插件可能还没带自检口。',
+        diagSummaryNoError: '宿主自检说没报错，控制面路由却不在：多半是同一份 DSH 里跑着两份插件。',
+        diagSummaryLoadFailed: '读取宿主状态失败。',
+        diagSummaryOpenFailed: '两小时网页管理窗口没能打开，所以没有跳转。',
+        diagPopupBlocked: '网页管理已经开好了，但浏览器拦掉了这个新窗口。允许本站打开弹窗后再点一次图标。',
+        diagSummaryRestored: '状态已经读到了，可以再点一次图标。',
+        diagStepRestart: '把 DSH 完整退出（不是只关窗口）再打开一次——装完插件没重启是最常见的原因。',
+        diagStepReinstall: '还不行就在插件市场把这个插件重装一遍，装完再完整重启一次 DSH。',
+        diagStepRetrying: '宿主还在后台自己重试，等几分钟再点一次图标，不必重装。',
+        diagStepDuplicate: '确认没装两份（市场一份、本地目录一份）：页面会连到装不上的那一份。',
+        diagStepProxy: '如果 DSH 挂在反向代理的子路径下（如 /dsh/），确认代理保留了 Host、Origin 与 X-Forwarded-Proto。',
+        diagStepRetryOpen: '先点「重新读取状态」再试一次；刚重启过的 DSH 头几秒常常还没就绪。',
+        diagFactReturned: '宿主返回',
+        diagFactStatus: 'HTTP 状态',
+        diagFactSelfcheck: '宿主自检',
+        diagFactUnavailable: '没有回应（这一版可能还没带它）',
+        diagFactPlugin: '插件版本',
+        diagFactSource: '来源',
+        diagFactActivated: '装载时刻',
+        diagFactRetry: '后台重试',
+        diagFactOnDisk: '盘上版本',
+        diagFactShell: '外壳已改',
+        diagFactReason: '宿主侧原因',
+        diagFactPanelUrl: '面板地址',
+        diagFactScope: '地址类别',
+        diagFactWindow: '两小时窗口',
       },
       en: {
-        nav: 'Mobile',
-        heading: 'Mobile',
-        cardPanel: 'Configuration page',
-        openPanel: 'Open the configuration page',
-        openHint: 'Settings, pairing and plugin maintenance live on this page.',
-        panelPending: 'Reading the page address…',
-        panelMissing: 'The host has not reported a page address yet — reopen this item in a moment.',
-        loadFailed: 'Failed to read host status',
-        loadMissing: 'The plugin host half is not loaded: quit and reopen DSH; if that does not help, reinstall the plugin from the market.',
-        hostHalfReason: 'Reported by the host: ',
-        hostHalfRetrying: 'It is still retrying on its own in the background — reopen this item in a few minutes, or press the button below to retry right now.',
-        hostHalfReload: 'Reload now',
-        hostHalfReloadFailed: 'Reload failed: ',
-        hostHalfUnreachable: 'The host-side self-check did not answer either: this version of the plugin may not ship it yet (older build) — update the plugin, then restart DSH completely.',
-        hostHalfNoError: 'The host self-check reports no error, yet the control-plane routes really are missing: restart DSH completely; if that does not help, send us this line together with the plugin version.',
-        hostHalfVersion: 'self-check version: ',
-        diagHostReturned: 'Host returned: ',
-        diagSelfCheck: 'Self-check: ',
-        diagSelfCheckNoAnswer: 'no answer (this build may not ship it)',
-        diagSelfCheckNoError: 'no error reported',
-        diagSelfCheckRetry: 'background retries: ',
-        diagOnDisk: 'on disk: ',
-        diagShellRestartAtStartup: 'shell changed — DSH needs one restart',
-        webAccessOn: 'Public web management is open until',
-        webAccessOff: 'Public web management is closed',
-        webAccessOpen: 'Open web management for 2 hours',
-        webAccessClose: 'Close web management now',
-        webAccessHint: 'Closed by default; opening lasts 2 hours and visits do not extend it. When closed, public access is blocked while this machine and its LAN can still access the page. Mobile app access is unaffected. Only this local DSH settings page can toggle it.',
-        webAccessUnavailable: 'Reading local access status…',
-        webAccessError: 'Failed to update web access status',
+        footerOpen: 'Open the mobile plugin configuration page',
+        footerPending: 'The page address is not ready yet',
+        footerPublicConfirm: 'This address is public. Continuing opens mobile plugin web management for 2 hours; anyone who can reach this address can operate the panel during that time. Continue?',
+        footerLoadMissing: 'The plugin host half is not loaded: quit and reopen DSH; if that does not help, reinstall the plugin from the market.',
+        diagTitleLoad: 'Cannot open the mobile configuration page',
+        diagTitleOpen: 'Could not open web management',
+        diagChecking: 'Reading host status…',
+        diagBusy: 'Reading host status again…',
+        diagHeadingFacts: 'Diagnostics (copy and send these to the maintainer)',
+        diagHeadingSteps: 'Things you can check yourself',
+        diagClose: 'Close',
+        diagRetry: 'Read status again',
+        diagReload: 'Reload the plugin',
+        diagReloadBusy: 'Asking the host to reload…',
+        diagReloadOk: 'Reloaded — the control plane is back.',
+        diagReloadFailed: 'Reload failed: ',
+        diagCopy: 'Copy diagnostics',
+        diagCopied: 'Diagnostics copied — you can send them to the maintainer.',
+        diagCopyFailed: 'Copy failed: select the readings above and copy them manually.',
+        diagOpenPanel: 'Open the configuration page',
+        diagSummaryLoadMissing: 'The plugin host half is not loaded: the DSH shell runs, the plugin itself does not (usually because DSH was not restarted after installing).',
+        diagSummaryUnreachable: 'The host did not answer the status query; this plugin build may not ship the self-check route yet.',
+        diagSummaryNoError: 'The host self-check reports no error, yet the control-plane routes are missing: most likely two copies of the plugin in one DSH.',
+        diagSummaryLoadFailed: 'Reading the host status failed.',
+        diagSummaryOpenFailed: 'The two-hour web management window could not be opened, so nothing was opened.',
+        diagPopupBlocked: 'Web management is open, but the browser blocked the new window. Allow pop-ups for this site, then press the icon again.',
+        diagSummaryRestored: 'Status is readable again — try the icon once more.',
+        diagStepRestart: 'Quit DSH completely (not just the window) and open it again — not restarting after installing is the most common cause.',
+        diagStepReinstall: 'If that does not help, reinstall the plugin from the market, then restart DSH completely.',
+        diagStepRetrying: 'The host is still retrying on its own; wait a few minutes and press the icon again — no need to reinstall.',
+        diagStepDuplicate: 'Make sure only one copy is installed (market copy plus a local directory copy): the page connects to the one that failed to load.',
+        diagStepProxy: 'If DSH sits under a reverse-proxy subpath (e.g. /dsh/), make sure the proxy keeps Host, Origin and X-Forwarded-Proto.',
+        diagStepRetryOpen: 'Press "Read status again" and retry; a DSH that just restarted often needs a few seconds.',
+        diagFactReturned: 'Host returned',
+        diagFactStatus: 'HTTP status',
+        diagFactSelfcheck: 'Host self-check',
+        diagFactUnavailable: 'no answer (this build may not ship it)',
+        diagFactPlugin: 'Plugin version',
+        diagFactSource: 'Source',
+        diagFactActivated: 'Activated at',
+        diagFactRetry: 'Background retries',
+        diagFactOnDisk: 'On disk',
+        diagFactShell: 'Shell changed',
+        diagFactReason: 'Host-side reason',
+        diagFactPanelUrl: 'Panel URL',
+        diagFactScope: 'Address class',
+        diagFactWindow: 'Two-hour window',
       },
     };
 
-    /* ── 设置项组件 ───────────────────────────────────────────────────────
-     * 保持一个薄卡片：一个网页版入口，以及一个可信本机开关，控制网页管理是否短时向公网开放。
-     * 界面本体仍在宿主吐出的 HTML（源码 `React/`，产物 `lib/panel/index.html`）。
+    /* ── 诊断弹窗 ──────────────────────────────────────────────────────────
+     * 点这颗图标打不开配置页、或者开窗口失败时，不能只让用户「点了没反应」。
      *
-     * 本机设置项半边来自渲染器的 `node_modules`，不可热替换；插件本体由外壳自己装新版
-     * （`lib/update-install.cjs`），刷新页面才看得到这一半的变化。
-     * 开关只影响控制面网页路由，不改移动 API、配对凭据或隧道状态。
+     * 这一屏刻意做成**能自己动手的自查**，而不是一句报错：
+     *   - 先把「谁说了什么」摆出来（宿主返回的原文 + 外壳自检那份快照）；
+     *   - 再给一串用户自己就能做的检查与修复（重启、重装、确认没装两份、反代前缀）；
+     *   - 能一键解决的直接给按钮（重新装载实现、重读状态、地址就绪时打开面板）；
+     *   - 最后给「复制诊断信息」：一段 ASCII 记号，贴给维护者就能对着日志查，
+     *     不必让人先截图、再问、再等回复。
+     *
+     * 纯 DOM：客户端半边不经构建，用不了 react 的 portal。所有文字一律走 `textContent`
+     * —— 宿主原话里可能有尖括号，拼 HTML 就是把别人的报错当代码执行。
      */
-    function MobileSettingsSection({ t }) {
-      /** null = 还没问到；'' = 问到了但这个宿主没给地址（老版本或还没起来）。 */
-      const [panelUrl, setPanelUrl] = useState(null);
-      const [error, setError] = useState(null);
-      const [webAccess, setWebAccess] = useState(null);
-      const [webAccessError, setWebAccessError] = useState(null);
-      const [webAccessBusy, setWebAccessBusy] = useState(false);
-      /** 最近一次失败的 HTTP 状态码（0 = 网络异常 / 还没失败过）。404 单独说。 */
-      const [errorStatus, setErrorStatus] = useState(0);
-      /** 宿主半边自检的结果（外壳给的那份），404 时才有内容。 */
-      const [half, setHalf] = useState(null);
-      const [halfBusy, setHalfBusy] = useState(false);
-      const [halfError, setHalfError] = useState(null);
 
-      useEffect(() => {
-        let alive = true;
-        let retryTimer = null;
-        let refreshTimer = null;
-        const clearTimer = (timer) => {
-          if (timer !== null) clearInterval(timer);
-        };
-        const load = async () => {
-          try {
-            const next = await call('/status');
-            if (!alive) return;
-            setError(null);
-            setErrorStatus(0);
-            setHalf(null);
-            setHalfError(null);
-            setPanelUrl(typeof next.panelUrl === 'string' ? next.panelUrl : '');
-            setWebAccess(next.webAccess && typeof next.webAccess.enabled === 'boolean' ? next.webAccess : null);
-            if (retryTimer !== null) {
-              clearTimer(retryTimer);
-              retryTimer = null;
-            }
-            if (refreshTimer === null) {
-              refreshTimer = setInterval(() => {
-                if (typeof document !== 'undefined' && document.hidden) return;
-                void load();
-              }, 15000);
-            }
-          } catch (problem) {
-            if (!alive) return;
-            setError(String((problem && problem.message) || problem));
-            setErrorStatus(Number(problem && problem.status) || 0);
-            setWebAccess(null);
-            if (refreshTimer !== null) {
-              clearTimer(refreshTimer);
-              refreshTimer = null;
-            }
-            // 404 = 实现那一半没装载。它为什么没装载，只有外壳答得出来（这两条路由挂在
-            // 外壳上，实现挂了它们还在）；老版本宿主没有这条口，问不到也得把这个事实留住
-            // （`unavailable`）——「自检口都没有回应」和「自检说没事」是两种不同的现场，
-            // 都缩成一句「重启/重装」的话，用户只能对着空白猜（2026-11-01 现场）。
-            if (problem?.status === 404) {
-              try {
-                const picture = await call(HOST_HALF_ENDPOINT);
-                if (!alive) return;
-                setHalf(picture && typeof picture.half === 'object' ? picture.half : { unavailable: true });
-              } catch {
-                if (!alive) return;
-                setHalf({ unavailable: true });
-              }
-            } else {
-              setHalf(null);
-            }
-            // 无权的远程设置页不轮询；宿主还没启动等临时故障每 3s 重试。
-            if (problem?.status !== 403 && problem?.status !== 423 && retryTimer === null) {
-              retryTimer = setInterval(() => {
-                if (typeof document !== 'undefined' && document.hidden) return;
-                void load();
-              }, 3000);
-            }
-          }
-        };
-        void load();
-        return () => {
-          alive = false;
-          clearTimer(retryTimer);
-          clearTimer(refreshTimer);
-        };
-      }, []);
+    /** 诊断弹窗的记号：同一页面只留一份。 */
+    const DIAG_MARK = 'data-dshm-mobile-diag';
 
-      const toggleWebAccess = async () => {
-        if (!webAccess || webAccessBusy) return;
-        setWebAccessBusy(true);
-        setWebAccessError(null);
-        try {
-          const next = await postJson('/web-access', { enabled: !webAccess.enabled });
-          setWebAccess(next.webAccess && typeof next.webAccess.enabled === 'boolean' ? next.webAccess : null);
-        } catch (problem) {
-          setWebAccessError(String((problem && problem.message) || problem));
-        } finally {
-          setWebAccessBusy(false);
+    /**
+     * 造一个可以反复更新的诊断弹窗（`open(model)` 打开或就地重画，`hide()` 收起）。
+     *
+     * 内容由调用方按这一轮的现场拼好交进来；这里只管画与收，不做任何请求。
+     */
+    function createDiagnosisDialog(doc) {
+      let overlay = null;
+      let escapeListener = null;
+      const hide = () => {
+        if (overlay && typeof overlay.remove === 'function' && overlay.parentElement) overlay.remove();
+        overlay = null;
+        if (escapeListener && typeof doc.removeEventListener === 'function') {
+          doc.removeEventListener('keydown', escapeListener);
+        }
+        escapeListener = null;
+      };
+      const make = (tag, className, text) => {
+        const element = doc.createElement(tag);
+        if (className) element.className = className;
+        if (text !== undefined) element.textContent = String(text);
+        return element;
+      };
+      const open = (model) => {
+        if (!doc || typeof doc.createElement !== 'function' || !doc.body) return null;
+        const spec = model && typeof model === 'object' ? model : {};
+        if (!overlay) {
+          overlay = make('div', 'dshm_overlay');
+          overlay.setAttribute(DIAG_MARK, '');
+          overlay.setAttribute('role', 'dialog');
+          overlay.setAttribute('aria-modal', 'true');
+          // 点遮罩收起；卡片内部的点击不冒到遮罩上（免得点按钮被当成「点外面」）。
+          overlay.addEventListener('click', (event) => {
+            if (event && event.target === overlay) hide();
+          });
+          doc.body.appendChild(overlay);
+          if (typeof doc.addEventListener === 'function') {
+            escapeListener = (event) => {
+              if (event && (event.key === 'Escape' || event.key === 'Esc')) hide();
+            };
+            doc.addEventListener('keydown', escapeListener);
+          }
+        }
+        if (spec.title) overlay.setAttribute('aria-label', spec.title);
+        // 每次重画：读数与按钮都是这一轮的现场，别留上一轮的字。
+        for (const child of overlay.children.slice()) child.remove();
+        const card = make('div', 'dshm_dialog');
+        card.addEventListener('click', (event) => {
+          if (event && typeof event.stopPropagation === 'function') event.stopPropagation();
+        });
+        overlay.appendChild(card);
+        if (spec.title) card.appendChild(make('h3', 'dshm_dialogTitle', spec.title));
+        if (spec.summary) card.appendChild(make('p', 'dshm_dialogLead', spec.summary));
+        if (spec.facts && spec.facts.length) {
+          if (spec.factsHeading) card.appendChild(make('h4', 'dshm_dialogHeading', spec.factsHeading));
+          const list = make('dl', 'dshm_facts');
+          for (const fact of spec.facts) {
+            const row = make('div', 'dshm_fact');
+            row.appendChild(make('dt', 'dshm_factKey', fact.label));
+            row.appendChild(make('dd', fact.mono === false ? 'dshm_factValue' : 'dshm_factValue dshm_factMono', fact.value));
+            list.appendChild(row);
+          }
+          card.appendChild(list);
+        }
+        if (spec.steps && spec.steps.length) {
+          if (spec.stepsHeading) card.appendChild(make('h4', 'dshm_dialogHeading', spec.stepsHeading));
+          const steps = make('ol', 'dshm_steps');
+          for (const step of spec.steps) steps.appendChild(make('li', null, step));
+          card.appendChild(steps);
+        }
+        if (spec.note) card.appendChild(make('p', 'dshm_dialogNote', spec.note));
+        const actions = make('div', 'dshm_dialogActions');
+        for (const action of spec.actions || []) {
+          const button = make('button', action.primary ? 'dshm_btn dshm_btnPrimary' : 'dshm_btn', action.label);
+          button.setAttribute('type', 'button');
+          if (action.disabled) button.disabled = true;
+          button.onclick = () => { void action.onClick(); };
+          actions.appendChild(button);
         }
+        card.appendChild(actions);
+        return overlay;
       };
+      return { open, hide };
+    }
+
+    /** 复制一段文字：先走剪贴板 API，不行退回 textarea + execCommand。 */
+    async function copyDiagnosisText(doc, text) {
+      try {
+        if (typeof navigator !== 'undefined'
+          && navigator.clipboard
+          && typeof navigator.clipboard.writeText === 'function') {
+          await navigator.clipboard.writeText(text);
+          return true;
+        }
+      } catch {
+        // 落到下面那一条：有的环境里剪贴板权限被拒。
+      }
+      try {
+        const area = doc.createElement('textarea');
+        area.value = text;
+        area.setAttribute('readonly', '');
+        doc.body.appendChild(area);
+        if (typeof area.select === 'function') area.select();
+        const done = typeof doc.execCommand === 'function' ? doc.execCommand('copy') : false;
+        if (typeof area.remove === 'function') area.remove();
+        return done === true;
+      } catch {
+        return false;
+      }
+    }
 
+    /**
+     * 当前页面是不是一张**普通网页**（`http(s)`）。
+     *
+     * 桌面壳把前端挂在 `dsh-app://app/` 下，那一层里 `window.open` 一律被拒 —— 壳只把
+     * `http(s)` 地址交给系统浏览器，别的一概静默丢掉。所以「先开一个空窗口、等地址确认
+     * 再导航过去」那套在壳里既开不出窗口、还会把整个页面盖成一块黑：那颗图标点下去按
+     * 网络类别分流时，得先分清自己在哪种页面里。
+     *
+     * 不在网页里（自定义协议）就走**导航**：壳的 `will-navigate` 会把外部 http(s) 地址
+     * 转给系统浏览器，与点一颗普通链接的结果一样，只是不必先开一个空窗口。
+     */
+    function isWebPage(win) {
+      const protocol = String((win && win.location && win.location.protocol) || '');
+      return protocol === 'http:' || protocol === 'https:';
+    }
+
+    /* ── 侧边栏底部那颗手机图标 ────────────────────────────────────────────
+     * 用户要的是「点一下等于设置页那颗『打开配置页面』」，并且就在侧边栏最底下、头像
+     * 那一行里。外壳那一行没有给插件留座位：那一行里从左到右是设置项自己渲染的一整颗
+     * 按钮（弹性铺满）、连接状态提示、桌面更新提示。所以这里是往那一行里插一颗自己的
+     * 按钮，而不是换成外壳的某一个座位：
+     *
+     *   - 认位置靠插槽出口的 `data-slot` 标记（外壳给每个出口都留了这个标记，它比哈希
+     *     类名稳，也不依赖行里有什么），拿到它的父节点就是整行；
+     *   - 那一行的按钮是 `flex:1`，插进去之后它自己让出宽度，谁都不会被盖住；
+     *   - 认不出来（外壳换了版式、设置项还没挂上）就退回 `sidebar.footer.action` 给插件
+     *     留的那一行，入口不会消失；
+     *   - 外壳把这一行整棵重建时（宽窄切换、账户菜单重挂、提示挂上摘下）元素会掉线，
+     *     所以挂上之后盯一次 DOM 变更，掉线就补回去。
+     *
+     * 这一颗是纯 DOM：客户端半边不经构建，用不了 `react-dom` 的 portal。地址、文案、
+     * 可用状态都由 effect 直接同步到元素属性上，组件重渲染不会把它丢掉。
+     */
+    /** 外壳在设置那一行上方留的动作位；没有别的插件占用时是空的。 */
+    const FOOTER_SLOT = 'sidebar.footer.action';
+    /** 设置那一行里「头像那块」的出口标记。 */
+    const FOOTER_ANCHOR = '[data-slot="settings.launcher"]';
+    /** 侧栏底部那个座位（头像那一行在它里面）。插之前先确认出口真的在这个座位里。 */
+    const FOOTER_SEAT = '[data-slot="sidebar.settings"]';
+    /** 自己那颗按钮的记号：同一页面里出现第二份实现时，靠它摘掉上一颗。 */
+    const FOOTER_MARK = 'data-dshm-mobile-web';
+    /** 还没问到网页地址时的重试间隔。取到就停，不再问。 */
+    const FOOTER_URL_RETRY_MS = 20000;
+    /**
+     * 手机图标（用户 2026-11-02 从八个候选里挑的「刘海 + 底条」那一款）：24 画布描边，
+     * 机身 6.2→17.8、圆角 2.8，顶上一条刘海、底下一条家条。比早先那版机身更满一点，
+     * 因为窄高的形状按名义尺寸画出来会比旁边的方形图标显小。
+     */
+    const PHONE_PATHS = [
+      'M9 2.6h6A2.8 2.8 0 0 1 17.8 5.4v13.2a2.8 2.8 0 0 1-2.8 2.8H9a2.8 2.8 0 0 1-2.8-2.8V5.4A2.8 2.8 0 0 1 9 2.6Z',
+      'M10.4 4.4h3.2',
+      'M11 19.4h2',
+    ];
+    /**
+     * 图标边长：展开那一行 20，窄条里的圆钮 22（用户 2026-11-02 拍的，先 18 后嫌小又抬了一档）。
+     *
+     * 那一行的账号按钮高 44、里面真正画出来的只有 24 的头像，同行其它图标是 16。20 是
+     * 28 的按钮里还能四边各留 4 像素的上限；窄条那颗放进 36 的圆钮里，用 22。
+     * 别再往回调 16 / 18：手机图形窄，按名义尺寸画出来比同行的方形图标显小，用户两次都说小。
+     * 真要再大，得连按钮一起撑到 30 以上——那一行其它按钮都是 28，会开始抢。
+     */
+    const PHONE_GLYPH_WIDE = 20;
+    const PHONE_GLYPH_RAIL = 22;
+
+    /** 造一颗手机图标。文档没有 SVG 能力时返回 null，按钮照样成立（只剩无障碍名字）。 */
+    function phoneIcon(doc, size) {
+      if (!doc || typeof doc.createElementNS !== 'function') return null;
+      const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('viewBox', '0 0 24 24');
+      svg.setAttribute('width', String(size));
+      svg.setAttribute('height', String(size));
+      svg.setAttribute('fill', 'none');
+      svg.setAttribute('stroke', 'currentColor');
+      svg.setAttribute('stroke-width', '1.7');
+      svg.setAttribute('stroke-linecap', 'round');
+      svg.setAttribute('aria-hidden', 'true');
+      svg.setAttribute('focusable', 'false');
+      for (const d of PHONE_PATHS) {
+        const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', d);
+        svg.appendChild(path);
+      }
+      return svg;
+    }
+
+    /** 造那一颗按钮：28 点，与同一行里那几颗图标按钮同尺寸。 */
+    function createFooterIcon(doc) {
+      const anchor = doc.createElement('a');
+      anchor.className = 'dshm_footAction';
+      anchor.setAttribute(FOOTER_MARK, '');
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noreferrer');
+      const icon = phoneIcon(doc, PHONE_GLYPH_WIDE);
+      if (icon) anchor.appendChild(icon);
+      return anchor;
+    }
+
+    /**
+     * 把「打开哪一页 / 现在能不能点」同步到元素上。
+     *
+     * 没有地址时**不写 href**：锚点没有 href 就点不动，比挂一个死链诚实；`aria-disabled`
+     * 只负责把这一点说出来。
+     *
+     * 地址、网络类别和窗口状态都由 effect 往上同步，组件重渲染不会把它丢掉。
+     */
+    function syncFooterIcon(node, url, openLabel, pendingLabel, onClick) {
+      const label = url ? openLabel : pendingLabel;
+      node.setAttribute('aria-label', label);
+      node.setAttribute('title', label);
+      node.setAttribute('aria-disabled', url ? 'false' : 'true');
+      // 有地址时仍然写 `href`：普通链接照旧能中键 / 新标签打开。只有「浏览器不是从本机来的」
+      // 那两种情况要拦下来先开窗口，见 `openPanel`。
+      if (url) node.setAttribute('href', url);
+      else node.removeAttribute('href');
+      node.onclick = url ? onClick : null;
+    }
+
+    /** 把按钮放回设置那一行、紧跟头像出口。返回是否真在那一行里。 */
+    function ensureFooterIcon(doc, node) {
+      const outlet = typeof doc.querySelector === 'function' ? doc.querySelector(FOOTER_ANCHOR) : null;
+      const row = outlet && outlet.parentElement;
+      if (!row || typeof row.insertBefore !== 'function') return false;
+      // 只认「侧栏底部那个座位里的 launcher」：头像那块万一被外壳渲染到别处（设置面板里、
+      // 以后的新位置），按出口插进去就插错地方了。认不出座位就当没认出行，退回自己一行。
+      if (typeof outlet.closest === 'function' && outlet.closest(FOOTER_SEAT) === null) return false;
+      if (node.parentElement === row && node.previousSibling === outlet) return true;
+      row.insertBefore(node, outlet.nextSibling);
+      return true;
+    }
+
+    /** 摘掉上一次物化留下的那一颗（插件重装、同一页面里出现第二份实现）。 */
+    function dropStaleFooterIcons(doc) {
+      if (!doc || typeof doc.querySelectorAll !== 'function') return;
+      let stale = null;
+      try {
+        stale = doc.querySelectorAll(`[${FOOTER_MARK}]`);
+      } catch {
+        return;
+      }
+      for (const node of stale || []) {
+        if (node && typeof node.remove === 'function') node.remove();
+      }
+    }
+
+    /**
+     * 侧边栏底部的那颗手机图标（进网页的唯一入口）。
+     *
+     * 展开态：插进设置那一行（那一行里插得进、也不遮东西），自己不出现在
+     * `sidebar.footer.action` 那一行里。
+     * 收窄成 56 点的窄条时：那一行只有 36 点、已经被设置那颗占满，插不进第二颗，于是
+     * 就画在 `sidebar.footer.action` 自己那一行（居中摞在设置上方）——这一条是物理限制，
+     * 不是退路。认不出那一行的时候也走这条路，入口不会消失。
+     *
+     * 点下去做什么（2026-11-02 用户拍板）：宿主在 `/status` 上按请求 Host 报一个
+     * `panelScope`，图标据此分流：
+     *   - `loopback`：人就在这台机器的 DSH 里，控制面本来就认它 —— 普通链接跳转；
+     *   - `private` / `public`：浏览器是从别的机器来的，控制面不认它、面板会回 423，
+     *     所以先把那两小时窗口打开再跳；`public` 多弹一句确认（那个地址谁都能拨）。
+     *
+     * **打不开的时候不许「点了没反应」**：一律弹诊断窗——宿主与外壳各说了什么、用户自己
+     * 能做的几步检查、能一键试的修复（重新装载 / 重读状态），以及一段可复制的读数。
+     */
+    function MobileWebEntry({ wide, t }) {
+      /** null = 还没问到；'' = 问到了但宿主没给地址（老版本或还没起来）。 */
+      const [url, setUrl] = useState(null);
+      const [webAccess, setWebAccess] = useState(null);
+      /** 面板地址落在哪类网络上：`loopback` / `private` / `public`（宿主算好给的）。 */
+      const [panelScope, setPanelScope] = useState('');
+      /** 最近一次读状态失败的原因（`null` = 没失败过）；`status: 404` = 实现那一半没装载。 */
+      const [problem, setProblem] = useState(null);
+      /** 展开态是否已经插进设置那一行。插不上就自己占一行。 */
+      const [anchored, setAnchored] = useState(true);
+      const nodeRef = useRef(null);
+      const dialogRef = useRef(null);
       /**
-       * 让外壳当场把实现再装一次。
+       * 文案在这里取、并把结果塞进下面那些 effect 的依赖里。
        *
-       * 装载失败那阵子，这是唯一不必重启整个 DSH 的出路；成不成以宿主回来的那份自检为准，
-       * 失败原因原样贴出来（它往往就是「等哪个服务超时」，过一会儿自己就好了）。
+       * 不能只依赖 `t` 本身：它是 `ctx.locale.bind(NS)` 绑出来的一个稳定函数，切语言时
+       * 引用不变，effect 就不会重跑，插进那一行的那颗按钮会一直挂着旧的标题。
        */
-      const reloadHalf = async () => {
-        if (halfBusy) return;
-        setHalfBusy(true);
-        setHalfError(null);
+      const openLabel = t('footerOpen');
+      const pendingLabel = t('footerPending');
+      const loadMissingLabel = t('footerLoadMissing');
+      const publicConfirm = t('footerPublicConfirm');
+
+      /** 诊断窗单例：同一页面只留一个，反复打开就地重画。 */
+      function diagnosisDialog() {
+        if (!dialogRef.current) {
+          dialogRef.current = createDiagnosisDialog(typeof document !== 'undefined' ? document : null);
+        }
+        return dialogRef.current;
+      }
+
+      /**
+       * 拉一次宿主状态，把地址 / 分类 / 窗口 / 失败原因同步进 state。
+       *
+       * 返回值给调用方用（诊断窗要拿最新那一份读数，不能读组件里那份可能还没更新的状态）：
+       * `{ ok: true, status }` 或 `{ ok: false, problem }`。
+       */
+      async function refreshStatus() {
         try {
-          const next = await postJson(HOST_HALF_RELOAD_ENDPOINT, {});
-          if (next && typeof next.half === 'object') setHalf(next.half);
-          if (next && next.ok === false) setHalfError(errorText(next, 200));
-        } catch (problem) {
-          setHalfError(String((problem && problem.message) || problem));
-        } finally {
-          setHalfBusy(false);
+          const next = await call('/status');
+          const view = next && typeof next === 'object' ? next : {};
+          setUrl(typeof view.panelUrl === 'string' ? view.panelUrl : '');
+          setWebAccess(view.webAccess && typeof view.webAccess.enabled === 'boolean' ? view.webAccess : null);
+          setPanelScope(typeof view.panelScope === 'string' ? view.panelScope : '');
+          setProblem(null);
+          return { ok: true, status: view };
+        } catch (error) {
+          const failed = {
+            status: Number(error && error.status) || 0,
+            message: String((error && error.message) || error),
+          };
+          setProblem(failed);
+          return { ok: false, problem: failed };
         }
-      };
+      }
 
-      const url = typeof panelUrl === 'string' ? panelUrl : '';
-      const webAccessEnabled = Boolean(webAccess && webAccess.enabled);
-      const expiresAt = webAccess && Number.isFinite(webAccess.expiresAt)
-        ? new Date(webAccess.expiresAt).toLocaleTimeString()
-        : '';
-      let webAccessStatus = t('webAccessUnavailable');
-      if (webAccess) webAccessStatus = webAccessEnabled ? `${t('webAccessOn')} ${expiresAt}` : t('webAccessOff');
+      /**
+       * 点下去要做什么，取决于面板地址落在哪一类网络上（宿主在 `/status` 上算的 `panelScope`）。
+       *
+       * 新窗口必须在**点击这一帧**就开出来（`window.open('', '_blank')`）：等接口回来再开会被
+       * 浏览器的弹窗拦截器吃掉。地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
+       * 只有**网页**（`http(s)`）才需要这一手：桌面壳里那个函数一定被拒，见 `isWebPage`。
+       */
+      function openPanel(event) {
+        if (!url) {
+          // 连地址都没问到：点了必须有反应 —— 弹诊断窗，而不是一颗点不动的灰图标。
+          void openDiagnosis('load', problem);
+          return;
+        }
+        const needsWindow = panelScope !== 'loopback' && !(webAccess && webAccess.enabled);
+        if (!needsWindow) return; // 普通链接，交给浏览器自己开
+        if (event && typeof event.preventDefault === 'function') event.preventDefault();
+        if (panelScope === 'public'
+          && typeof window !== 'undefined'
+          && typeof window.confirm === 'function'
+          && !window.confirm(publicConfirm)) return;
+        const target = isWebPage(window) && typeof window.open === 'function'
+          ? window.open('', '_blank')
+          : null;
+        void openWithWindow(target);
+      }
 
-      const missing = errorStatus === 404;
+      /**
+       * 先把窗口开起来、再跳过去；失败就把那个空白页关掉并弹诊断窗。
+       *
+       * 还有一种「点了没反应」：浏览器把新窗口拦了（`window.open` 返回 null）。那时接口
+       * 已经成功、地址也在手上，只是没地方给它 —— 直接告诉用户该允许弹窗，别让他以为坏了。
+       *
+       * 壳里的页面（`dsh-app://`）不适用这一套：那里本来就没有「新窗口」这回事，`null` 是
+       * 正常答复、地址已经由壳交给系统浏览器了。当成被拦只会平白盖一屏诊断。
+       */
+      async function openWithWindow(target) {
+        try {
+          const next = await postJson('/web-access', { enabled: true });
+          setWebAccess(next && next.webAccess && typeof next.webAccess.enabled === 'boolean'
+            ? next.webAccess
+            : { enabled: true, expiresAt: 0 });
+          if (target) {
+            target.location.href = url;
+            return;
+          }
+          if (!isWebPage(window)) {
+            // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
+            window.location.href = url;
+            return;
+          }
+          const retry = typeof window !== 'undefined' && typeof window.open === 'function'
+            ? window.open(url, '_blank', 'noreferrer')
+            : null;
+          if (!retry) {
+            void openDiagnosis('open', { status: 0, message: t('diagPopupBlocked') });
+          }
+        } catch (error) {
+          if (target && typeof target.close === 'function') target.close();
+          void openDiagnosis('open', {
+            status: Number(error && error.status) || 0,
+            message: String((error && error.message) || error),
+          });
+        }
+      }
 
       /**
-       * 诊断读数：宿主回了什么 + 外壳那份自检说了什么。
+       * 把这一轮的现场摆成一屏**能自己动手**的自查。
        *
-       * 只拼进这一屏、不落盘也不上报：它的用途是让人截图发给我们（2026-11-01 用户原话：
-       * 「以后用户发过来 我也不好去排查」）。字段名用 `version=` / `source=` 这种记号而不是
-       * 翻成中文，是因为它要能贴进日志里对得上宿主那一侧。
+       * `kind` 两种：`'load'`（连状态都读不到，所以没有地址可去）、`'open'`（两小时窗口没
+       * 开成，没跳过去）。前者的首要原因是「装完没重启」，后者先重试再看反代。
+       *
+       * 这一屏的三个层次，顺序就是用户该想的顺序：
+       *   1. 谁说了什么（宿主返回的原文 + 外壳自检那份快照，含版本/来源/后台重试/要不要重启）；
+       *   2. 用户自己就能做的检查与修复（重启、重装、确认没装两份、反代前缀）；
+       *   3. 能一键试的（重新装载实现、重读状态、地址就绪时直接打开面板）与「复制诊断信息」。
        */
-      const diagLines = [];
-      if (missing) {
-        diagLines.push(`${t('diagHostReturned')}${error}`);
-        if (half && half.unavailable === true) {
-          diagLines.push(`${t('diagSelfCheck')}${t('diagSelfCheckNoAnswer')}`);
-        } else if (half) {
-          const bits = [];
-          if (half.version) bits.push(`version=${half.version}`);
-          if (half.source) bits.push(`source=${half.source}`);
-          if (half.activatedAt) bits.push(`at=${half.activatedAt}`);
-          if (half.retrying) {
-            const attempts = Number.isFinite(half.retryAttempts) ? half.retryAttempts : 0;
-            bits.push(`${t('diagSelfCheckRetry')}${attempts}${half.nextRetryAt ? `→${half.nextRetryAt}` : ''}`);
+      async function openDiagnosis(kind, failure) {
+        if (typeof document === 'undefined') return;
+        const view = diagnosisDialog();
+        /** 这一屏用的现场：重读之后就地更新（组件状态要等下一次渲染，这里不能等它）。 */
+        const snapshot = {
+          url: typeof url === 'string' ? url : '',
+          scope: panelScope || 'unknown',
+          access: webAccess,
+        };
+        let current = failure || problem || null;
+        let half = null;
+
+        const title = kind === 'open' ? t('diagTitleOpen') : t('diagTitleLoad');
+        const closeAction = { label: t('diagClose'), onClick: () => view.hide() };
+        const adopt = (status) => {
+          const next = status && typeof status === 'object' ? status : {};
+          snapshot.url = typeof next.panelUrl === 'string' ? next.panelUrl : '';
+          snapshot.scope = typeof next.panelScope === 'string' ? next.panelScope : 'unknown';
+          snapshot.access = next.webAccess && typeof next.webAccess.enabled === 'boolean' ? next.webAccess : null;
+        };
+
+        /** 问外壳那份自检（实现挂了它还在）：原因、版本、后台重试都在这儿。 */
+        const readHalf = async () => {
+          try {
+            const picture = await call(HOST_HALF_ENDPOINT);
+            half = picture && typeof picture.half === 'object' ? picture.half : { unavailable: true };
+          } catch {
+            half = { unavailable: true };
+          }
+          return half;
+        };
+
+        const facts = () => {
+          const rows = [];
+          if (current) {
+            rows.push({ key: 'host_returned', label: t('diagFactReturned'), value: current.message });
+            rows.push({ key: 'http_status', label: t('diagFactStatus'), value: current.status ? String(current.status) : '—' });
+          }
+          if (half && half.unavailable === true) {
+            rows.push({ key: 'self_check', label: t('diagFactSelfcheck'), value: t('diagFactUnavailable') });
+          } else if (half) {
+            rows.push({ key: 'plugin_version', label: t('diagFactPlugin'), value: half.version ? String(half.version) : '—' });
+            if (half.source) rows.push({ key: 'plugin_source', label: t('diagFactSource'), value: half.source });
+            if (half.activatedAt) rows.push({ key: 'activated_at', label: t('diagFactActivated'), value: half.activatedAt });
+            if (half.retrying) {
+              const attempts = Number.isFinite(half.retryAttempts) ? half.retryAttempts : 0;
+              rows.push({
+                key: 'retrying',
+                label: t('diagFactRetry'),
+                value: `${attempts}${half.nextRetryAt ? ` → ${half.nextRetryAt}` : ''}`,
+              });
+            }
+            if (half.installedVersion && half.installedVersion !== half.version) {
+              rows.push({ key: 'on_disk', label: t('diagFactOnDisk'), value: half.installedVersion });
+            }
+            if (half.shellChanged) rows.push({ key: 'shell_changed', label: t('diagFactShell'), value: 'true' });
+            if (half.lastError) rows.push({ key: 'host_last_error', label: t('diagFactReason'), value: half.lastError });
           }
-          if (half.installedVersion && half.installedVersion !== half.version) {
-            bits.push(`${t('diagOnDisk')}${half.installedVersion}`);
+          rows.push({ key: 'panel_url', label: t('diagFactPanelUrl'), value: snapshot.url || '—' });
+          rows.push({ key: 'panel_scope', label: t('diagFactScope'), value: snapshot.scope });
+          rows.push({
+            key: 'web_access',
+            label: t('diagFactWindow'),
+            value: snapshot.access && snapshot.access.enabled ? `open → ${new Date(snapshot.access.expiresAt).toISOString()}` : 'closed',
+          });
+          return rows;
+        };
+
+        const summaryOf = () => {
+          if (!current) return t('diagSummaryRestored');
+          if (kind === 'open') return t('diagSummaryOpenFailed');
+          if (current.status === 404) {
+            if (half && half.unavailable === true) return t('diagSummaryUnreachable');
+            if (half && !half.lastError) return t('diagSummaryNoError');
+            return t('diagSummaryLoadMissing');
           }
-          if (half.shellChanged) bits.push(t('diagShellRestartAtStartup'));
-          diagLines.push(`${t('diagSelfCheck')}${bits.length ? bits.join(' · ') : t('diagSelfCheckNoError')}`);
+          return t('diagSummaryLoadFailed');
+        };
+
+        const stepsOf = () => {
+          if (kind === 'open') return [t('diagStepRetryOpen'), t('diagStepProxy')];
+          const steps = [t('diagStepRestart'), t('diagStepReinstall')];
+          if (half && half.retrying) steps.push(t('diagStepRetrying'));
+          steps.push(t('diagStepDuplicate'), t('diagStepProxy'));
+          return steps;
+        };
+
+        const copyTextOf = () => {
+          const lines = ['dsh-mobile-plugin diagnosis'];
+          for (const row of facts()) lines.push(`${row.key}=${row.value}`);
+          if (typeof navigator !== 'undefined' && navigator.userAgent) lines.push(`user_agent=${navigator.userAgent}`);
+          return lines.join('\n');
+        };
+
+        const render = (note) => {
+          const actions = [];
+          if (snapshot.url) {
+            actions.push({
+              label: t('diagOpenPanel'),
+              primary: true,
+              onClick: () => {
+                if (typeof window !== 'undefined' && typeof window.open === 'function') {
+                  window.open(snapshot.url, '_blank', 'noreferrer');
+                }
+                view.hide();
+              },
+            });
+          }
+          if (kind === 'load' && (!current || current.status === 404)) {
+            actions.push({ label: t('diagReload'), onClick: () => void reload() });
+          }
+          actions.push({ label: t('diagRetry'), onClick: () => void retry() });
+          actions.push({ label: t('diagCopy'), onClick: () => void copy() });
+          actions.push(closeAction);
+          view.open({
+            title,
+            summary: summaryOf(),
+            factsHeading: t('diagHeadingFacts'),
+            facts: facts(),
+            stepsHeading: t('diagHeadingSteps'),
+            steps: stepsOf(),
+            note,
+            actions,
+          });
+        };
+
+        async function copy() {
+          const ok = await copyDiagnosisText(document, copyTextOf());
+          render(ok ? t('diagCopied') : t('diagCopyFailed'));
+        }
+
+        /** 重读一遍状态；读到就把这一屏的现场换成新的（心跳式的即时自愈）。 */
+        async function retry() {
+          render(t('diagBusy'));
+          const outcome = await refreshStatus();
+          if (outcome.ok) {
+            current = null;
+            adopt(outcome.status);
+          } else {
+            current = outcome.problem;
+          }
+          await readHalf();
+          render(null);
+        }
+
+        /** 让外壳当场把实现再装一次：装载失败时唯一不必重启整个 DSH 的出路。 */
+        async function reload() {
+          render(t('diagReloadBusy'));
+          let note = null;
+          try {
+            const answer = await postJson(HOST_HALF_RELOAD_ENDPOINT, {});
+            if (answer && answer.ok === false) note = `${t('diagReloadFailed')}${errorText(answer, 200)}`;
+          } catch (error) {
+            note = `${t('diagReloadFailed')}${String((error && error.message) || error)}`;
+          }
+          await readHalf();
+          // 成没成以重读状态为准：外壳回了一声 ok 不等于控制面路由这就回来了。
+          const outcome = await refreshStatus();
+          if (outcome.ok) {
+            current = null;
+            adopt(outcome.status);
+            if (note === null) note = t('diagReloadOk');
+          } else {
+            current = outcome.problem;
+            if (note === null) note = `${t('diagReloadFailed')}${current.message}`;
+          }
+          render(note);
         }
+
+        view.open({ title, summary: t('diagChecking'), actions: [closeAction] });
+        await readHalf();
+        render(null);
       }
 
-      return h('div', { className: 'dshm_root' }, [
-        h('h2', { className: 'dshm_heading' }, t('heading')),
-        error
-          ? h('p', { className: 'dshm_error' }, missing ? t('loadMissing') : `${t('loadFailed')}: ${error}`)
-          : null,
-        // 404 那屏必须自带「能拿去排查」的读数（2026-11-01 用户要求）：只写一句「宿主侧没起来」
-        // 的话，用户截图发过来我们还是不知道坏在哪一层，只能让他一次次试。
-        // 两行足够定位：宿主到底回了什么、外壳那份自检说了什么。
-        ...diagLines.map((line) => h('p', { className: 'dshm_note', key: line.slice(0, 24) }, line)),
-        // 404 时把宿主那半边自己的说法贴出来：重启 / 重装这两句提示在「装载超时」那种
-        // 现场是帮倒忙的，真正该做的是等它后台补齐、或者点一下重新装载。
-        missing && half && typeof half.lastError === 'string' && half.lastError
-          ? h('p', { className: 'dshm_note' }, `${t('hostHalfReason')}${half.lastError}`)
-          : null,
-        // 问不到自检口：说明这一版插件压根没带它（比 0.5.11 老），用户这时最该做的是更新
-        // 插件，而不是继续重启 —— 原先这一支是一片空白，只留一句「重启/重装」。
-        missing && half && half.unavailable === true
-          ? h('p', { className: 'dshm_note' }, t('hostHalfUnreachable'))
-          : null,
-        // 自检说没事、路由却不在：这是「同一份 DSH 里跑着两份插件」那种现场，报出版本
-        // 才查得下去。
-        missing && half && half.unavailable !== true && !(typeof half.lastError === 'string' && half.lastError)
-          ? h('p', { className: 'dshm_note' }, `${t('hostHalfNoError')}${typeof half.version === 'string' && half.version ? `（${t('hostHalfVersion')}${half.version}）` : ''}`)
-          : null,
-        missing && half && half.retrying === true
-          ? h('p', { className: 'dshm_note' }, t('hostHalfRetrying'))
-          : null,
-        missing
-          ? h('div', { className: 'dshm_actions' }, [
-            h('button', {
-              type: 'button',
-              className: 'dshm_btn',
-              disabled: halfBusy,
-              onClick: reloadHalf,
-            }, t('hostHalfReload')),
-          ])
-          : null,
-        halfError ? h('p', { className: 'dshm_error' }, `${t('hostHalfReloadFailed')}${halfError}`) : null,
-
-        // 用 `<a target="_blank">` 而不是 iframe：DSH 桌面端会把这个链接交给系统浏览器
-        // 打开（网页版有自己的地址与刷新节奏，嵌在设置弹窗里反而不好用）。
-        // href 必须是宿主给的绝对地址：相对地址在桌面端会被解析成 `dsh-app://`，
-        // 而 Electron 只把 http(s) 交给浏览器，其它协议静默丢弃、点了没反应。
-        h('section', { className: 'dshm_card', key: 'panel' }, [
-          h('h3', { className: 'dshm_cardTitle' }, t('cardPanel')),
-          h('div', { className: 'dshm_actions' }, [
-            url
-              ? h('a', {
-                className: 'dshm_btn dshm_btnPrimary',
-                href: url,
-                target: '_blank',
-                rel: 'noreferrer',
-              }, t('openPanel'))
-              : h('button', {
-                type: 'button',
-                className: 'dshm_btn',
-                disabled: true,
-              }, panelUrl === null ? t('panelPending') : t('panelMissing')),
-          ]),
-          h('p', { className: 'dshm_note' }, t('openHint')),
-          h('p', { className: 'dshm_note' }, webAccessStatus),
-          h('div', { className: 'dshm_actions' }, [
-            h('button', {
-              type: 'button',
-              className: webAccessEnabled ? 'dshm_btn' : 'dshm_btn dshm_btnPrimary',
-              disabled: !webAccess || webAccessBusy,
-              onClick: toggleWebAccess,
-            }, webAccessEnabled ? t('webAccessClose') : t('webAccessOpen')),
-          ]),
-          h('p', { className: 'dshm_note' }, t('webAccessHint')),
-          webAccessError ? h('p', { className: 'dshm_error' }, `${t('webAccessError')}: ${webAccessError}`) : null,
-        ]),
-      ]);
+      // 页面一打开就问一次地址：点下去要么是一次同步的链接跳转、要么先把窗口开好，
+      // 地址与分类都得提前在手上。宿主还没起来时留一个定时器，取到地址就自己收掉。
+      useEffect(() => {
+        let alive = true;
+        let timer = null;
+        const load = async () => {
+          const outcome = await refreshStatus();
+          if (!alive || !outcome.ok) return;
+          const next = outcome.status || {};
+          if (typeof next.panelUrl === 'string' && next.panelUrl && timer !== null) {
+            clearInterval(timer);
+            timer = null;
+          }
+        };
+        void load();
+        if (timer === null) {
+          timer = setInterval(() => {
+            if (typeof document !== 'undefined' && document.hidden) return;
+            void load();
+          }, FOOTER_URL_RETRY_MS);
+        }
+        return () => {
+          alive = false;
+          if (timer !== null) clearInterval(timer);
+        };
+      }, []);
+
+      useEffect(() => {
+        if (typeof document === 'undefined') return undefined;
+        const doc = document;
+        // 窄条那一行塞不下第二颗：不插，自己占一行。
+        if (!wide) {
+          setAnchored(false);
+          return undefined;
+        }
+        let node = nodeRef.current;
+        if (!node) {
+          try {
+            dropStaleFooterIcons(doc);
+            node = createFooterIcon(doc);
+          } catch {
+            node = null;
+          }
+          nodeRef.current = node;
+        }
+        if (!node) {
+          setAnchored(false);
+          return undefined;
+        }
+        // 没地址时标题要说的是「为什么没有」：404 是宿主那一半没装载，其余是还没就绪。
+        const notReadyLabel = problem && problem.status === 404 ? loadMissingLabel : pendingLabel;
+        const sync = () => syncFooterIcon(node, url, openLabel, notReadyLabel, openPanel);
+        let attached = false;
+        try {
+          attached = ensureFooterIcon(doc, node);
+          sync();
+        } catch {
+          attached = false;
+        }
+        setAnchored(attached);
+        // 那一行会被外壳整棵重建（宽窄切换、账户菜单换人、提示挂上/摘下），元素掉线就
+        // 补回去；第一次没找到（设置项比我们晚挂上）也靠它捡回来。变动只排一次检查：
+        // 流式输出时每帧最多一次查询，且不写 DOM 就不触发重排。
+        const Observer = typeof window !== 'undefined' ? window.MutationObserver : undefined;
+        let observer = null;
+        let frame = 0;
+        if (typeof Observer === 'function' && doc.body) {
+          observer = new Observer(() => {
+            if (frame !== 0) return;
+            const raf = typeof requestAnimationFrame === 'function'
+              ? requestAnimationFrame
+              : (fn) => setTimeout(fn, 16);
+            frame = raf(() => {
+              frame = 0;
+              try {
+                sync();
+                setAnchored(ensureFooterIcon(doc, node));
+              } catch {
+                setAnchored(false);
+              }
+            });
+          });
+          observer.observe(doc.body, { childList: true, subtree: true });
+        }
+        return () => {
+          if (observer !== null) observer.disconnect();
+          if (frame !== 0 && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(frame);
+          if (typeof node.remove === 'function' && node.parentElement) node.remove();
+        };
+      }, [wide, url, openLabel, loadMissingLabel, pendingLabel, problem, panelScope, webAccess]);
+
+      // 窄条，或者这一版外壳里认不出那一行：自己占一行，入口不能因为认不出位置就消失。
+      if (!wide || !anchored) {
+        const label = url
+          ? openLabel
+          : (problem && problem.status === 404 ? loadMissingLabel : pendingLabel);
+        return h('a', {
+          className: 'dshm_footAction dshm_footActionRail',
+          href: url || undefined,
+          target: '_blank',
+          rel: 'noreferrer',
+          'aria-label': label,
+          title: label,
+          'aria-disabled': url ? 'false' : 'true',
+          onClick: openPanel,
+        }, h('svg', {
+          viewBox: '0 0 24 24',
+          width: PHONE_GLYPH_RAIL,
+          height: PHONE_GLYPH_RAIL,
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: 1.7,
+          strokeLinecap: 'round',
+          'aria-hidden': 'true',
+          focusable: 'false',
+        }, PHONE_PATHS.map((d) => h('path', { key: d, d }))));
+      }
+      return null;
     }
 
     /**
@@ -825,7 +1347,7 @@ window.__ModuleLoader__.load({
     }
 
     return {
-      // slots：注册设置项，由 @deepseek-ai/dsh-client-runtime 提供（它 require
+      // slots：注册侧边栏那颗图标，由 @deepseek-ai/dsh-client-runtime 提供（它 require
       // dsh-client-ui-slots 的 SlotCore 再以 `super(ctx, "slots")` 暴露服务）。
       // locale：字典，由 @deepseek-ai/dsh-client-locale 提供。
       // 这两个服务名对应 package.json 里 dsh.client.inject 注入的两个包。
@@ -838,18 +1360,18 @@ window.__ModuleLoader__.load({
         startDesktopReadSync(ctx);
         startReadReceiptSync(ctx);
         startClientHalfReport(ctx);
-        // 插槽是「先声明后注册」：宿主可能比我们晚一步声明 settings.section，
-        // slots.inject 会等它就位再注册——已装的第三方插件（dsh-opencode-go）也是这么做的。
-        // settings.section 是设置菜单里的顶层一项；settings.plugins.tab 是内置插件页里的页签，
-        // 这一项原先挂在那里，后来按用户要求搬出来独立成一项。
-        ctx.slots.inject('settings.section', () => ctx.slots.register({
-          name: 'settings.section',
-          id: 'mobile',
-          order: 20,
-          label: () => t('nav'),
+        // 侧边栏底部那颗手机图标：**它是进网页的唯一入口**（2026-11-02 用户要求把设置菜单
+        // 里那一项去掉）。走外壳给插件留的动作位注册（`name` 与 `inject()` 的路径必须是同一个
+        // 槽名，改一处不报错、只是静默挂不上）；展开态再自己插进设置那一行，细节见
+        // `MobileWebEntry` 上面那段注释。
+        ctx.slots.inject(FOOTER_SLOT, () => ctx.slots.register({
+          name: FOOTER_SLOT,
+          id: 'mobile-web',
+          order: 10,
+          label: () => t('footerOpen'),
           locale: NS,
           inject: () => ({ t }),
-        }, MobileSettingsSection));
+        }, MobileWebEntry));
       },
     };
   },