dsh-mobile-plugin 0.5.19 → 0.5.21

package/lib/client.js

@@ -38,8 +38,31 @@ window.__ModuleLoader__.load({
 .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)}
+/* 宿主那一半没装载时：整颗转红，右上角那颗红点显出来（data-dshm-alert 是它的记号）。
+   悬停不换回普通颜色——告警态跟着鼠标变浅等于这一颗在说谎。 */
+.dshm_footAction[data-dshm-alert],.dshm_footAction[data-dshm-alert]:hover{color:var(--dsw-alias-state-error-primary)}
+.dshm_alertDot{display:none}
+.dshm_footAction[data-dshm-alert] .dshm_alertDot{display:inline}
 .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_dialogWide{max-width:1040px;height:82vh;max-height:82vh;overflow:hidden}
+.dshm_dialogWide .dshm_frameWrap{flex:1;min-height:0;display:flex;position:relative}
+.dshm_frame{flex:1;min-height:0;width:100%;border:0;border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1)}
+/* iframe 一直不 load 时留的那句话：盖在空白之上，撤不撤由 onload 决定。 */
+.dshm_frameTip{position:absolute;inset:auto 0 0;margin:0;padding:8px 10px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+/* 入口那一层：只有两块大字按钮，左「进入控制台」右「报错调试」。 */
+.dshm_choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 2px}
+.dshm_choice{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;min-height:96px;padding:14px 16px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-lg);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit}
+.dshm_choice:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dshm_choice:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
+.dshm_choicePrimary{background:var(--dsw-alias-state-business-primary);border-color:transparent;color:var(--dsw-alias-bg-layer-1)}
+.dshm_choicePrimary:hover{background:var(--dsw-alias-state-business-primary);opacity:.92}
+.dshm_choicePrimary .dshm_choiceHint{color:inherit;opacity:.82}
+.dshm_choiceTitle{font-size:15px;font-weight:600;line-height:22px}
+.dshm_choiceHint{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+/* 版面竖向排列的那一列（外壳里没法内嵌时用它摆读数）。 */
+.dshm_dialogColumn{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}
 .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}
@@ -508,7 +531,10 @@ window.__ModuleLoader__.load({
         nav: '移动端',
         heading: '移动端',
         cardPanel: '配置页面',
+        cardCanvas: '画布',
         openPanel: '打开配置页面',
+        openCanvas: '打开画布',
+        canvasHint: '在浏览器里打开无限画布；它的库与手机共用同一份。',
         openHint: '配对、网络配置与插件更新都在这个页面里。',
         panelPending: '正在读取页面地址…',
         panelMissing: '宿主还没给出页面地址，稍后再打开这一页试试。',
@@ -518,6 +544,18 @@ window.__ModuleLoader__.load({
         footerPending: '网页地址还没就绪',
         footerPublicConfirm: '这个地址位于公网。继续后会开放移动端插件的网页管理权限 2 小时；期间任何能访问该地址的人都可以操作面板。是否继续？',
         footerLoadMissing: '插件宿主侧没有加载：把 DSH 完整退出再打开一次；还不行就在插件市场重装一遍插件。',
+        consoleTitle: '移动端插件控制台',
+        consoleEntryTitle: '移动端插件',
+        consoleEntryLead: '进控制台配置配对与网络；手机连不上、或者哪儿报错了，走报错调试。',
+        consoleEntryConsole: '进入控制台',
+        consoleEntryConsoleHint: '配对、网络、插件更新都在那一页',
+        consoleEntryDebug: '报错调试',
+        consoleEntryDebugHint: '装载、链路、设备、故障账本，出问题时看这里',
+        consoleBack: '返回',
+        consolePopupBlocked: '浏览器拦掉了新窗口，允许本站弹出窗口后再点一次。',
+        consoleLead: '这一屏是插件的排障面板：装载、链路、资源和故障账本都在里面，读的都是宿主此刻的原话。要配置就点「在浏览器里打开」。',
+        consoleOpenBrowser: '在浏览器里打开配置页面',
+        consoleFrameless: '这一屏没载入进来（桌面壳或代理挡住了内嵌页面）。点下面那颗按钮在浏览器里打开，读数一样看得到。',
         diagTitleLoad: '打不开移动端配置页',
         diagTitleOpen: '开放网页管理失败',
         diagChecking: '正在读取宿主状态…',
@@ -566,7 +604,10 @@ window.__ModuleLoader__.load({
         nav: 'Mobile',
         heading: 'Mobile',
         cardPanel: 'Configuration page',
+        cardCanvas: 'Canvas',
         openPanel: 'Open the configuration page',
+        openCanvas: 'Open the canvas',
+        canvasHint: 'Open the infinite canvas in your browser; it shares one library with your phone.',
         openHint: 'Pairing, network settings and plugin updates all 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.',
@@ -576,6 +617,18 @@ window.__ModuleLoader__.load({
         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.',
+        consoleTitle: 'Mobile plugin console',
+        consoleEntryTitle: 'Mobile plugin',
+        consoleEntryLead: 'Open the console to configure pairing and networking; if the phone cannot connect or something reports an error, use troubleshooting.',
+        consoleEntryConsole: 'Open the console',
+        consoleEntryConsoleHint: 'pairing, networking and updates live there',
+        consoleEntryDebug: 'Troubleshoot',
+        consoleEntryDebugHint: 'loading, link, devices and the fault ledger',
+        consoleBack: 'Back',
+        consolePopupBlocked: 'The browser blocked the new window — allow pop-ups for this site and press again.',
+        consoleLead: 'This is the plugin troubleshooting panel: loading, link, resources and the fault ledger, all in the host’s own words. Press “Open the configuration page in a browser” to configure it.',
+        consoleOpenBrowser: 'Open the configuration page in a browser',
+        consoleFrameless: 'This panel did not load (the desktop shell or a proxy blocked the embedded page). Use the button below to open it in a browser — the readings are the same.',
         diagTitleLoad: 'Cannot open the mobile configuration page',
         diagTitleOpen: 'Could not open web management',
         diagChecking: 'Reading host status…',
@@ -646,10 +699,13 @@ window.__ModuleLoader__.load({
      */
     function createDiagnosisDialog(doc) {
       let overlay = null;
+      /** 底下那一句说明（复制结果就地改它，不重画整窗）。 */
+      let noteEl = null;
       let escapeListener = null;
       const hide = () => {
         if (overlay && typeof overlay.remove === 'function' && overlay.parentElement) overlay.remove();
         overlay = null;
+        noteEl = null;
         if (escapeListener && typeof doc.removeEventListener === 'function') {
           doc.removeEventListener('keydown', escapeListener);
         }
@@ -683,14 +739,43 @@ window.__ModuleLoader__.load({
         }
         if (spec.title) overlay.setAttribute('aria-label', spec.title);
         // 每次重画：读数与按钮都是这一轮的现场，别留上一轮的字。
-        for (const child of overlay.children.slice()) child.remove();
-        const card = make('div', 'dshm_dialog');
+        // **`children` 是 HTMLCollection，没有 `slice()`**（2026-11-05 真机现场：点图标一点反应都
+        // 没有，控制台一条 TypeError 就把它吞了 —— 假元素的 `children` 是数组，测试里从没红过）。
+        // 先摊成数组再边删边走。
+        for (const child of Array.from(overlay.children || [])) child.remove();
+        const card = spec.wide
+          ? make('div', 'dshm_dialog dshm_dialogWide')
+          : 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.body) card.appendChild(spec.body);
+        // 内嵌一整页（调试那一窗）：外壳里 `window.open` 不可靠，所以把页面嵌进来。
+        // `src` 已经由调用方按同源地址算好（壳里是 `dsh-app://app/api/relay/panel/debug`，
+        // 网页里是同源 http），远程浏览器的那两小时窗口也在拨号那一步开好了。
+        //
+        // **嵌不进来要有话说**：iframe 被挡（CSP、代理、协议处理器不认这条路径）时它只会
+        // 静默留白，用户看到一屏空。所以先摆一句「正在载入」，`onload` 一到就撤掉；一直不
+        // load 就一直是那句话 + 底下那颗「在浏览器里打开」——不至于「点了没反应」。
+        if (spec.frame && spec.frame.src) {
+          const wrap = make('div', 'dshm_frameWrap');
+          const frame = doc.createElement('iframe');
+          frame.className = 'dshm_frame';
+          frame.setAttribute('src', spec.frame.src);
+          frame.setAttribute('title', spec.frame.title || spec.title || '');
+          frame.setAttribute('loading', 'eager');
+          const tip = make('p', 'dshm_frameTip', spec.frame.hint || '');
+          frame.onload = () => {
+            if (tip && typeof tip.remove === 'function' && tip.parentElement) tip.remove();
+          };
+          wrap.appendChild(frame);
+          wrap.appendChild(tip);
+          card.appendChild(wrap);
+        }
         if (spec.facts && spec.facts.length) {
           if (spec.factsHeading) card.appendChild(make('h4', 'dshm_dialogHeading', spec.factsHeading));
           const list = make('dl', 'dshm_facts');
@@ -708,7 +793,10 @@ window.__ModuleLoader__.load({
           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 note = make('p', 'dshm_dialogNote', spec.note || '');
+        card.appendChild(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);
@@ -718,9 +806,14 @@ window.__ModuleLoader__.load({
           actions.appendChild(button);
         }
         card.appendChild(actions);
+        noteEl = note;
         return overlay;
       };
-      return { open, hide };
+      /** 就地更新底下那一句说明（不重画整窗）。 */
+      const note = (text) => {
+        if (noteEl) noteEl.textContent = text === undefined ? '' : String(text);
+      };
+      return { open, hide, note };
     }
 
     /** 复制一段文字：先走剪贴板 API，不行退回 textarea + execCommand。 */
@@ -794,6 +887,45 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * 画布页在**这个页面自己**的同源地址上（与面板同一台宿主、同一个前缀）。
+     *
+     * 桌面用户在 DSH 里点「打开画布」，就是跳到浏览器打开这一页；页面由插件托管，库与手机共用。
+     */
+    function sameOriginCanvasUrl() {
+      try {
+        const base = typeof document !== 'undefined' && document.baseURI
+          ? document.baseURI
+          : (typeof location !== 'undefined' ? location.href : '');
+        if (!base) return '';
+        return new URL('api/relay/canvas', base).href;
+      } catch {
+        return '';
+      }
+    }
+
+    /**
+     * 调试页在**这个页面自己**的同源地址上（不是宿主报的那个绝对地址）。
+     *
+     * 这里必须按 `document.baseURI` 推，**不能用面板那个绝对 http(s) 地址**：桌面版前端挂在
+     * `dsh-app://app/` 下（Electron 把 `dsh-app` 当安全协议），往里面塞一条 http 的 iframe
+     * 会被当成混合内容挡掉 —— 现场就是 `isWebPage()` 为假、退回「交给系统浏览器」，点了照旧跳走。
+     * 用相对地址推出来的是 `dsh-app://app/api/relay/panel/debug`：与页面同源，壳的协议处理器
+     * 会把 `/api/*` 转给本机宿主（客户端半边那些 `api/relay/status` 请求一直就是这么走的）。
+     * 反代挂子路径时 `baseURI` 自带前缀，这一条也顺带管住了。
+     */
+    function consoleUrlOf() {
+      try {
+        const base = typeof document !== 'undefined' && document.baseURI
+          ? document.baseURI
+          : (typeof location !== 'undefined' ? location.href : '');
+        if (!base) return '';
+        return new URL('api/relay/panel/debug', base).href;
+      } catch {
+        return '';
+      }
+    }
+
     /**
      * 一次「打开配置页面」的完整拨号：取地址、必要时开两小时窗口、把地址交出去。
      *
@@ -812,7 +944,7 @@ window.__ModuleLoader__.load({
      * @returns {Promise<{ok: true, cancelled?: boolean, url: string, webAccess: object|null}
      *   | {ok: false, missing: boolean, status: number, message: string}>}
      */
-    async function openConfigurationPage({ view, loadStatus = 0, t, target = null, confirmed = false }) {
+    async function openConfigurationPage({ view, loadStatus = 0, t, target = null, confirmed = false, navigate = true }) {
       let state = readStatusView(view);
       const failed = (error) => ({
         ok: false,
@@ -868,6 +1000,9 @@ window.__ModuleLoader__.load({
         target.location.href = url;
         return { ok: true, url, webAccess: state.webAccess };
       }
+      // `navigate: false` = 只要地址与「控制面已经认这个浏览器」，别开任何窗口：
+      // 控制台那一窗是把这一页**嵌进来**，多开一个浏览器窗口等于点了就跳走。
+      if (navigate === false) return { ok: true, url, webAccess: state.webAccess };
       if (!isWebPage(window)) {
         // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
         window.location.href = url;
@@ -903,6 +1038,8 @@ window.__ModuleLoader__.load({
     const FOOTER_SEAT = '[data-slot="sidebar.settings"]';
     /** 自己那颗按钮的记号：同一页面里出现第二份实现时，靠它摘掉上一颗。 */
     const FOOTER_MARK = 'data-dshm-mobile-web';
+    /** 告警态的记号：宿主那一半没装载（`/status` 404）时，整颗转红并显出右上角那颗红点。 */
+    const FOOTER_ALERT = 'data-dshm-alert';
     /** 还没问到网页地址时的重试间隔。取到就停，不再问。 */
     const FOOTER_URL_RETRY_MS = 20000;
     /**
@@ -915,6 +1052,15 @@ window.__ModuleLoader__.load({
       'M10.4 4.4h3.2',
       'M11 19.4h2',
     ];
+    /**
+     * 告警态那颗红点（用户 2026-11-05 从四个候选里拍的「整颗转红 + 右上角一颗点」那一款）。
+     *
+     * 圆心在机身右上角外侧：左缘压住右上那圈圆角（机身右边到 17.8），两块同色连成一整块，
+     * 所以不用再抠一圈背景色的缝隙。24 画布内放得下——最右到 22，不越界。
+     * 它常驻在 SVG 里，显示与否交给 CSS 的 `data-dshm-alert`：这一颗会被外壳整棵重建，
+     * 换来换去不如让它挂着。
+     */
+    const PHONE_ALERT_DOT = { cx: 18.9, cy: 5, r: 3.1 };
     /**
      * 图标边长：展开那一行 20，窄条里的圆钮 22（用户 2026-11-02 拍的，先 18 后嫌小又抬了一档）。
      *
@@ -926,7 +1072,7 @@ window.__ModuleLoader__.load({
     const PHONE_GLYPH_WIDE = 20;
     const PHONE_GLYPH_RAIL = 22;
 
-    /** 造一颗手机图标。文档没有 SVG 能力时返回 null，按钮照样成立（只剩无障碍名字）。 */
+    /** 造一颗手机图标（含那颗常驻的告警红点，显不显示看 `data-dshm-alert`）。文档没有 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');
@@ -944,6 +1090,13 @@ window.__ModuleLoader__.load({
         path.setAttribute('d', d);
         svg.appendChild(path);
       }
+      const dot = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      dot.setAttribute('class', 'dshm_alertDot');
+      dot.setAttribute('cx', String(PHONE_ALERT_DOT.cx));
+      dot.setAttribute('cy', String(PHONE_ALERT_DOT.cy));
+      dot.setAttribute('r', String(PHONE_ALERT_DOT.r));
+      dot.setAttribute('fill', 'currentColor');
+      svg.appendChild(dot);
       return svg;
     }
 
@@ -968,11 +1121,14 @@ window.__ModuleLoader__.load({
      *
      * 地址、网络类别和窗口状态都由 effect 往上同步，组件重渲染不会把它丢掉。
      */
-    function syncFooterIcon(node, url, openLabel, pendingLabel, onClick) {
+    function syncFooterIcon(node, url, openLabel, pendingLabel, onClick, alert) {
       const label = url ? openLabel : pendingLabel;
       node.setAttribute('aria-label', label);
       node.setAttribute('title', label);
       node.setAttribute('aria-disabled', 'false');
+      // 告警态只换记号，图形和尺寸不动：CSS 按这个属性把整颗转红、把红点显出来。
+      if (alert) node.setAttribute(FOOTER_ALERT, '');
+      else node.removeAttribute(FOOTER_ALERT);
       // 有地址时仍然写 `href`：普通链接照旧能中键 / 新标签打开。只有「浏览器不是从本机来的」
       // 那两种情况要拦下来先开窗口，见 `openPanel`。
       if (url) node.setAttribute('href', url);
@@ -1047,6 +1203,12 @@ window.__ModuleLoader__.load({
       const pendingLabel = t('footerPending');
       const loadMissingLabel = t('footerLoadMissing');
       const publicConfirm = t('footerPublicConfirm');
+      /**
+       * 宿主那一半没装载（`/status` 404）：点了也打不开、重装前谁也修不好，所以这一种是
+       * **真故障**，那颗图标转红告警；标题也换成更具体的那一句。地址只是还没读到（后台
+       * 重试中）、或者窗口关着被回 423，都不是插件坏了，不红。
+       */
+      const hostMissing = Boolean(problem && problem.status === 404);
 
       /** 诊断窗单例：同一页面只留一个，反复打开就地重画。 */
       function diagnosisDialog() {
@@ -1090,34 +1252,45 @@ window.__ModuleLoader__.load({
        * 浏览器的弹窗拦截器吃掉；地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
        * 只有**网页**（`http(s)`）才需要这一手：桌面壳里那个函数一定被拒，见 `isWebPage`。
        */
+      /**
+       * 点下去做什么（2026-11-05 用户要求改过一次）。
+       *
+       * **从「点了就跳浏览器」改成「点了先在这一页弹一屏」**：用户遇到问题时最缺的不是
+       * 跳过去，而是「它现在到底哪一环断了」——启动、装载、隧道、旁挂进程、自检全都在那一屏
+       * 里，比一个打不开的页面有用。跳转本身没取消，挪进了那一屏里的一颗按钮。
+       *
+       * 那一屏的内容是网页版的 `/api/relay/panel/debug`（React 写的，改完刷新就见效），
+       * 这里只把同源地址算出来嵌进去。**必须先保证控制面认这个浏览器**，否则嵌进来的是一屏
+       * 423 JSON：所以先按 `panelScope` 把两小时窗口开好，再画窗。
+       *
+       * 三种走不通的情况一律回到诊断窗（外壳里 `window.open` 不可靠、宿主那一半没装载、
+       * 窗口开不出来）—— 不许「点了没反应」。
+       */
       function openPanel(event) {
-        const knowsUrl = typeof url === 'string' && url !== '';
-        const needsWindow = !knowsUrl || (panelScope !== 'loopback' && !(webAccess && webAccess.enabled));
-        if (!needsWindow) return; // 普通链接，交给浏览器自己开
         if (event && typeof event.preventDefault === 'function') event.preventDefault();
-        // 公网地址先问一句；地址都还没读到时问不了，交由 `openConfigurationPage` 拿到类别后补问。
-        if (knowsUrl
-          && panelScope === 'public'
+        // 公网地址先问一句——但**只在真要开那两小时窗口的时候问**：窗口已经开着，
+        // 这一下没有扩大任何权限，再弹一次只是把上一轮点过的确认重问一遍。
+        const willOpenWindow = panelScope !== 'loopback' && !(webAccess && webAccess.enabled);
+        if (panelScope === 'public'
+          && url
+          && willOpenWindow
           && typeof window !== 'undefined'
           && typeof window.confirm === 'function'
           && !window.confirm(publicConfirm)) return;
-        const target = isWebPage(window) && typeof window.open === 'function'
-          ? window.open('', '_blank')
-          : null;
+        // 桌面壳（`dsh-app://app`）里不嵌：往自定义协议页里塞一条 http(s) iframe，多半被
+        // 当成混合内容挡掉，用户看到的是一窗空白。那种环境仍走「交给系统浏览器」那条老路
+        //（`navigate` 默认 true，壳的 `will-navigate` 会把它转给系统浏览器）。
         void (async () => {
-          const outcome = await openConfigurationPage({
+          const outcome = await openConsole({
             view: { panelUrl: url || '', panelScope, webAccess },
             loadStatus: problem ? problem.status : 0,
             t,
-            target,
-            confirmed: knowsUrl,
           });
           if (outcome.ok) {
-            if (outcome.cancelled && target && typeof target.close === 'function') target.close();
             if (outcome.webAccess) setWebAccess(outcome.webAccess);
             return;
           }
-          if (target && typeof target.close === 'function') target.close();
+          // 宿主那一半压根没装载：那是一屏「装完没重启」，不是这一屏能修的。
           if (outcome.missing) {
             void openDiagnosis('load', { status: outcome.status || 404, message: (problem && problem.message) || '' });
             return;
@@ -1126,6 +1299,138 @@ window.__ModuleLoader__.load({
         })();
       }
 
+      /**
+       * 把「控制台」那一屏画出来：标题 + 一颗「在浏览器里打开」+ 内嵌的调试页。
+       *
+       * 嵌的是同一台宿主吐的页面（同源），所以它读 `/api/relay/*` 和面板页一模一样，
+       * 不需要 token、也不新增接口。远程浏览器要先开那两小时窗口：`openConfigurationPage`
+       * 在这一步之前已经把窗口开好了（它的 `target` 传 null，不导航任何地方）。
+       */
+      async function openConsole({ view, loadStatus, t }) {
+        if (typeof document === 'undefined') return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+        const outcome = await openConfigurationPage({ view, loadStatus, t, target: null, confirmed: true, navigate: false });
+        if (!outcome.ok) return outcome;
+        const pageUrl = consoleUrlOf();
+        if (!pageUrl) return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+        const dialog = diagnosisDialog();
+
+        /**
+         * 第二层：那一屏调试页（嵌整页）。
+         *
+         * 从第一层的「报错调试」进来，用「返回」回第一层 —— **不是**关掉整窗：用户多半是
+         * 想「看一眼再回去」，每次都重开一窗等于把位置也丢了。
+         */
+        const showDebug = () => {
+          dialog.open({
+            title: t('consoleTitle'),
+            wide: true,
+            frame: { src: pageUrl, title: t('consoleTitle'), hint: t('consoleFrameless') },
+            actions: [
+              {
+                label: t('consoleOpenBrowser'),
+                primary: true,
+                onClick: () => {
+                  if (typeof window !== 'undefined' && typeof window.open === 'function') {
+                    const opened = window.open(outcome.url, '_blank', 'noreferrer');
+                    if (opened) dialog.hide();
+                  }
+                },
+              },
+              { label: t('diagCopy'), onClick: () => void copyConsole() },
+              { label: t('consoleBack'), onClick: () => showEntry() },
+              { label: t('diagClose'), onClick: () => dialog.hide() },
+            ],
+          });
+        };
+
+        /**
+         * 第一层：**只有一个简单入口**（2026-11-05 用户要求）。
+         *
+         * 原来点图标一上来就是整屏读数，太重了 —— 绝大多数时候人只是想去配置页，或者去看
+         * 手机为什么连不上。所以这一层只摆两块：左边「进入控制台」（= 原来那个跳转），
+         * 右边「报错调试」（才进第二层那一屏）。
+         */
+        const showEntry = () => {
+          const choices = makeChoiceGrid(dialog, t);
+          dialog.open({
+            title: t('consoleEntryTitle'),
+            summary: t('consoleEntryLead'),
+            body: choices.body,
+            actions: [{ label: t('diagClose'), onClick: () => dialog.hide() }],
+          });
+          choices.console.onclick = () => {
+            const opened = typeof window !== 'undefined' && typeof window.open === 'function'
+              ? window.open(outcome.url, '_blank', 'noreferrer')
+              : null;
+            if (opened) dialog.hide();
+            else dialog.note(t('consolePopupBlocked'));
+          };
+          choices.debug.onclick = () => showDebug();
+        };
+
+        showEntry();
+        return { ok: true, webAccess: outcome.webAccess };
+      }
+
+      /**
+       * 入口那两块（左「进入控制台」、右「报错调试」）。
+       *
+       * 命令式 DOM，不用 react：客户端半边不经构建。两块都是大按钮，图标 + 标题 + 一句说明，
+       * 点到哪里自己负责 —— 这里只造节点、把两张卡交给调用方填 onclick。
+       */
+      function makeChoiceGrid(dialog, t) {
+        const doc = typeof document !== 'undefined' ? document : 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 body = make('div', 'dshm_choices');
+        const card = (title, hint, tone) => {
+          const button = make('button', 'dshm_choice' + (tone ? ` ${tone}` : ''));
+          button.setAttribute('type', 'button');
+          button.appendChild(make('span', 'dshm_choiceTitle', title));
+          button.appendChild(make('span', 'dshm_choiceHint', hint));
+          body.appendChild(button);
+          return button;
+        };
+        const console = card(t('consoleEntryConsole'), t('consoleEntryConsoleHint'), 'dshm_choicePrimary');
+        const debug = card(t('consoleEntryDebug'), t('consoleEntryDebugHint'), '');
+        return { body, console, debug };
+      }
+
+      /** 把「复制诊断信息」那一套复用在控制台上：读的是嵌入页同样的几份，不另开一套。 */
+      async function copyConsole() {
+        const dialog = diagnosisDialog();
+        const lines = ['dsh-mobile-plugin console'];
+        lines.push(`panel_url=${url || ''}`);
+        lines.push(`panel_scope=${panelScope || ''}`);
+        try {
+          const view = await call('/status');
+          const next = view && typeof view === 'object' ? view : {};
+          lines.push(`plugin_version=${next.appVersion || ''}`);
+          lines.push(`tunnel=${next.tunnel && next.tunnel.state ? next.tunnel.state : ''}`);
+          lines.push(`lan=${next.lan && next.lan.state ? next.lan.state : ''}`);
+          lines.push(`sidecar=${next.sidecar && next.sidecar.state ? next.sidecar.state : ''}`);
+          lines.push(`last_mobile_at=${next.lastMobileAt || 0}`);
+        } catch (error) {
+          lines.push(`status_error=${String((error && error.message) || error)}`);
+        }
+        try {
+          const picture = await call(HOST_HALF_ENDPOINT);
+          const half = picture && picture.half && typeof picture.half === 'object' ? picture.half : {};
+          lines.push(`plugin_source=${half.source || ''}`);
+          lines.push(`host_last_error=${half.lastError || ''}`);
+        } catch {
+          lines.push('host_half=unavailable');
+        }
+        if (typeof navigator !== 'undefined' && navigator.userAgent) lines.push(`user_agent=${navigator.userAgent}`);
+        const ok = await copyDiagnosisText(document, lines.join('\n'));
+        // 复制结果就地提示一下即可，不必重画整窗（重画会把嵌着的页面重新加载一遍）。
+        dialog.note(ok ? t('diagCopied') : t('diagCopyFailed'));
+      }
+
       /**
        * 把这一轮的现场摆成一屏**能自己动手**的自查。
        *
@@ -1361,8 +1666,8 @@ window.__ModuleLoader__.load({
           return undefined;
         }
         // 没地址时标题要说的是「为什么没有」：404 是宿主那一半没装载，其余是还没就绪。
-        const notReadyLabel = problem && problem.status === 404 ? loadMissingLabel : pendingLabel;
-        const sync = () => syncFooterIcon(node, url, openLabel, notReadyLabel, openPanel);
+        const notReadyLabel = hostMissing ? loadMissingLabel : pendingLabel;
+        const sync = () => syncFooterIcon(node, url, openLabel, notReadyLabel, openPanel, hostMissing);
         let attached = false;
         try {
           attached = ensureFooterIcon(doc, node);
@@ -1404,9 +1709,7 @@ window.__ModuleLoader__.load({
 
       // 窄条，或者这一版外壳里认不出那一行：自己占一行，入口不能因为认不出位置就消失。
       if (!wide || !anchored) {
-        const label = url
-          ? openLabel
-          : (problem && problem.status === 404 ? loadMissingLabel : pendingLabel);
+        const label = url ? openLabel : (hostMissing ? loadMissingLabel : pendingLabel);
         return h('a', {
           className: 'dshm_footAction dshm_footActionRail',
           href: url || undefined,
@@ -1415,6 +1718,7 @@ window.__ModuleLoader__.load({
           'aria-label': label,
           title: label,
           'aria-disabled': 'false',
+          [FOOTER_ALERT]: hostMissing ? '' : undefined,
           onClick: openPanel,
         }, h('svg', {
           viewBox: '0 0 24 24',
@@ -1426,7 +1730,17 @@ window.__ModuleLoader__.load({
           strokeLinecap: 'round',
           'aria-hidden': 'true',
           focusable: 'false',
-        }, PHONE_PATHS.map((d) => h('path', { key: d, d }))));
+        }, [
+          ...PHONE_PATHS.map((d) => h('path', { key: d, d })),
+          h('circle', {
+            key: 'alert',
+            className: 'dshm_alertDot',
+            cx: PHONE_ALERT_DOT.cx,
+            cy: PHONE_ALERT_DOT.cy,
+            r: PHONE_ALERT_DOT.r,
+            fill: 'currentColor',
+          }),
+        ]));
       }
       return null;
     }
@@ -1557,6 +1871,10 @@ window.__ModuleLoader__.load({
       }
 
       const hint = url === null ? t('panelPending') : url === '' ? t('panelMissing') : t('openHint');
+      // 画布页与面板同源同宿主，地址从面板地址换尾巴；拿不到面板地址就按页面自身推。
+      const canvasUrl = typeof url === 'string' && url
+        ? url.replace(/\/panel(?:\/(?:setup|settings))?$/, '/canvas')
+        : sameOriginCanvasUrl();
       return h('div', { className: 'dshm_root' },
         h('h2', { className: 'dshm_heading' }, t('heading')),
         h('div', { className: 'dshm_card' },
@@ -1574,7 +1892,19 @@ window.__ModuleLoader__.load({
           failure
             ? h('p', { className: 'dshm_error' },
               `${failure.kind === 'load' ? t('loadFailed') : t('openFailed')}：${failure.message}`)
-            : null));
+            : null),
+        // 画布单独一张薄卡：点「打开画布」跳到浏览器打开插件托管的画布页（库与手机共用），
+        // 不嵌在桌面端里。跟面板同源同宿主，地址从面板地址换尾巴拿。
+        h('div', { className: 'dshm_card' },
+          h('h3', { className: 'dshm_cardTitle' }, t('cardCanvas')),
+          h('p', { className: 'dshm_note' }, t('canvasHint')),
+          h('div', { className: 'dshm_actions' },
+            h('a', {
+              className: 'dshm_btn dshm_btnPrimary',
+              href: canvasUrl || undefined,
+              target: '_blank',
+              rel: 'noreferrer',
+            }, t('openCanvas')))));
     }
 
     return {