dsh-mini-remote 0.2.0 → 0.2.1

package/client/client.js

@@ -21,12 +21,67 @@ window.__ModuleLoader__.load({
     var h = React.createElement;
     var useState = React.useState;
     var useEffect = React.useEffect;
+    var useRef = React.useRef;
+
+    /**
+     * 主输入设备有没有「悬停」能力。
+     *
+     * 顶上那条横条要不要自动收起来，取决于这一条：**触摸屏没有悬停这回事**，藏起来就成了
+     * 摸不到的东西——而它上面挂着「← 返回列表」，是那一屏唯一的出口。
+     * 和 `lib/page.html` 那条镜像顶栏同一条口径（那边用媒体查询，这边是 inline style，
+     * 所以在加载时算一次就够）。
+     *
+     * **算不出来就当作没有悬停** → 横条常驻。宁可多占一行，不可让人出不去。
+     */
+    var HAS_HOVER = (function () {
+      try {
+        return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+      } catch (err) {
+        return false;
+      }
+    })();
 
     var PAIRING_PATH = '/mini-remote/pairing';
     var TOKEN_PATH = '/mini-remote/token';
     var TUNNEL_PATH = '/mini-remote/tunnel';
     var SERVE_PATH = '/mini-remote/serve';
     var FEISHU_PATH = '/mini-remote/feishu';
+    // **这里原来有一条本机取票的地址常量**：面板点开时拿它去换一张「本机电脑端界面」的票。
+    // 2026-10-17 退休了——那段道理写在 `MiniRemotePanel` 的注释里。宿主侧那条路由一个字没动
+    // （还在 lib/index.js 上，跨机那条路复用的取票/嵌框/过门也照旧），只是界面上没人走它了。
+    // 「允许别的电脑连接」那个开关（宿主侧路由，只允许本机调用，见 lib/index.js）。
+    // 它收 `{ enabled }`，回的也是整份配对信息（和公网那个开关同形状）。
+    // 关着的时候，配对和跨机取票两条路由一条都不接——这是用户能读懂的"关"。
+    var REMOTE_ACCESS_PATH = '/mini-remote/remote-access';
+    // 「设备名册」那三条（宿主侧路由，只允许本机调用，见 lib/index.js）：
+    //   GET  /mini-remote/devices        → { ok:true, devices:[{id,name,kind,createdAt,lastSeen}] }
+    //   POST /mini-remote/devices/rename → { id, name } → { ok:true, device }
+    //   POST /mini-remote/devices/revoke → { id }       → { ok:true, id, dropped }
+    // **回执里永远没有 keyHash、也没有凭据本身**——名册那份东西只在电脑上、只在服务端。
+    var DEVICES_PATH = '/mini-remote/devices';
+    var DEVICE_RENAME_PATH = '/mini-remote/devices/rename';
+    var DEVICE_REVOKE_PATH = '/mini-remote/devices/revoke';
+    // 「我能连的电脑」那四条（**B 侧**：这台电脑连得上去哪几台别的电脑。宿主侧路由，
+    // 只允许本机调用，见 lib/index.js 与 lib/remotes.js）：
+    //   GET  /mini-remote/remotes        → { ok:true, remotes:[{id,name,baseUrl,addedAt,lastOk}] }
+    //   POST /mini-remote/remotes/add    → { name?, baseUrl, token } → { ok:true, remote }
+    //   POST /mini-remote/remotes/window → { id } → { ok:true, url, expiresIn }   ← 取票（= 重连）
+    //   POST /mini-remote/remotes/forget → { id } → { ok:true, id, note }         ← 断开（只动本地）
+    // **回执里永远没有凭据**（见 lib/remotes.js 的 publicRecord）：界面拿得到的只有
+    // id、名字、地址和两个时间；凭据只活在宿主进程里，去对面取票时放进请求头。
+    var REMOTES_PATH = '/mini-remote/remotes';
+    var REMOTE_ADD_PATH = '/mini-remote/remotes/add';
+    var REMOTE_WINDOW_PATH = '/mini-remote/remotes/window';
+    var REMOTE_FORGET_PATH = '/mini-remote/remotes/forget';
+    // 「自检」那一条（宿主侧路由，只允许本机调用，见 lib/index.js）：
+    //   GET /mini-remote/selfcheck → 这台电脑在跑哪一版、哪些接口在、开关什么状态
+    // **返回值里没有一个字节的凭据**：它只数条数、只报"在不在听、绑了哪些地址"。
+    var SELFCHECK_PATH = '/mini-remote/selfcheck';
+
+    // 侧栏那个图标和中间那一整屏面板共用的一个键。
+    // 契约就是这么定的：侧栏条目的 `id` 按原样去寻址 main 槽里 key 相同的那个面板
+    // （dsh-client-ui-sidebar 的契约原文：Each list id addresses the matching main panel）。
+    var PANEL_ID = 'mini-remote';
 
     // 颜色走 DSH 主题变量（真名前缀是 --dsw-alias-，深浅色自动跟随）。
     // 每个变量都带一个浅色兜底值，变量缺失时界面仍然可读。
@@ -49,9 +104,339 @@ window.__ModuleLoader__.load({
       toggleRow: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 13, cursor: 'pointer' },
       // cloudflared 的报错是多行原文，换行要留住，否则一长条读不了。
       detail: { color: 'var(--dsw-alias-state-warn-primary,#b45309)', fontSize: 12, lineHeight: 1.6, marginTop: 6, whiteSpace: 'pre-wrap', wordBreak: 'break-word' },
+      // 「远程窗口」面板：整屏嵌一个 iframe。取票那一步失败时，这两种样式就是全部内容
+      // ——那时它得读起来像一句话，而不是一个空框。
+      panelMsg: { boxSizing: 'border-box', padding: '80px 24px', textAlign: 'center', color: 'var(--dsw-alias-label-tertiary,#8b93a1)', fontSize: 14, lineHeight: 1.6 },
+      // 名单那一屏（2026-10-17）：**面板的第一屏**。行样式复用设置页那几样
+      // （deviceRow/deviceName/remoteUrl），这里只多一个居中的容器和一行标题。
+      listWrap: { boxSizing: 'border-box', width: '100%', maxWidth: 760, margin: '0 auto', padding: '28px 24px' },
+      listHead: { fontWeight: 600, fontSize: 14, marginBottom: 6 },
+      // 「某一台的界面」那一屏：顶上一条横条（「← 返回列表」+ 这台电脑叫什么 + 「再试一次」），
+      // 下面才是那个铺满的框。**横条在每一种状态下都要在**（正在换票、出错、框没起来），
+      // 不然用户会卡在那一屏里出不来。
+      //
+      // **框正常显示时它会自动收起**（鼠标碰顶才滑出，2026-10-17 用户要求）：
+      // 那一行平时占着四十来像素，而这块面板是拿来"看另一台电脑的界面"的，能多给一行是一行。
+      // 收起用 `max-height: 0`、**不是透明**——透明还占着高度，框就长不上来（同 lib/page.html 那套）。
+      screen: { position: 'relative', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', width: '100%', height: '100%', minHeight: 320 },
+      /** 收起时最上面那条 16px 的感应带：鼠标碰到就把它勾出来。 */
+      screenHot: { position: 'absolute', left: 0, right: 0, top: 0, height: 16, zIndex: 2 },
+      /** 横条外壳：收起时高度归零，占位跟着让出来（高度是过渡的，不跳）。 */
+      screenBarWrap: { flex: 'none', overflow: 'hidden', transition: 'max-height .25s ease' },
+      screenBar: { flex: 'none', display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderBottom: '1px solid var(--dsw-alias-border-l2,#e5e7eb)' },
+      screenName: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary,#8b93a1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+      // 框铺满面板：**父容器高度拿不准**（可能是定高，也可能是被内容撑开的），
+      // 所以外层那一条给一个 320 的兜底高度，这一条自己 flex 撑满剩下的那一块。
+      frameWrap: { position: 'relative', boxSizing: 'border-box', width: '100%', flex: '1 1 auto', minHeight: 320 },
+      frame: { position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block', background: 'var(--dsw-alias-bg-base,#fff)' },
+      // 自动重取那一次（2026-10-17 补）：**框上面先摆一条看得见的说明**，框还是照旧铺满下面。
+      // 为什么非得有这一条：重试期间那一块本来就是白的/空的，不说话就等于"无声地又转一圈"，
+      // 用户会以为界面卡住了（见 REMOTE_AUTO_RETRY_TEXT）。
+      frameBox: { display: 'flex', flexDirection: 'column', boxSizing: 'border-box', width: '100%', flex: '1 1 auto', minHeight: 0 },
+      frameNote: { flex: 'none', padding: '6px 12px', fontSize: 12, lineHeight: 1.6, color: 'var(--dsw-alias-label-tertiary,#8b93a1)', borderBottom: '1px solid var(--dsw-alias-border-l2,#e5e7eb)' },
+      // 「设备」那一块：一行一台。名字和说明在左边（flex:1，窄面板下先让它占满），
+      // 动作在右边；撤销那次「二次确认」就摊在这一行下面（这个文件里没有弹窗，
+      // 全站都是页内两步——跟着来）。
+      deviceRow: { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', marginTop: 12 },
+      deviceMain: { flex: '1 1 200px', minWidth: 0 },
+      deviceName: { fontWeight: 600, fontSize: 13, wordBreak: 'break-word' },
+      deviceActs: { display: 'flex', gap: 8, flex: 'none' },
+      deviceConfirm: { flex: '1 1 100%', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' },
+      // 「其他电脑」那一块：地址单独一行，等宽字体——一长条地址用正文那套字读起来费劲，
+      // 而它又是这一行里最要紧的一条（用户要拿它和对面那台电脑上的地址对一眼）。
+      remoteUrl: { fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 12, lineHeight: 1.5, wordBreak: 'break-all', color: 'var(--dsw-alias-label-tertiary,#8b93a1)' },
+      // 跨机那几句话可能带换行：宿主是**原样转述**对面说的话（`REMOTE_REVOKED_HINT`
+      // 就有两行，"接不上那台电脑"那句也有两行）。不设 pre-wrap 的话两行会连成一句，
+      // 读起来像中间漏了字。
+      say: { fontSize: 12, lineHeight: 1.6, marginTop: 4, whiteSpace: 'pre-wrap', wordBreak: 'break-word' },
+      // 「自检」那一块的摘要行：整块里最该被看见的一行（哪一版 · 进程何时起的 · 接口几条在）。
+      // 用正文色而不是灰字——它要和上面那些说明文字拉开一点层次。
+      selfSummary: { fontSize: 12, lineHeight: 1.7, marginTop: 8, color: 'var(--dsw-alias-label-primary,inherit)', wordBreak: 'break-word' },
+      // 「自检」里那几样机器味的东西（接口清单、数据目录）：等宽字体 + 保留换行。
+      // 一长条路径和十几个接口名用正文那套字读起来分不清，而它们就是要一眼扫过去的。
+      code: { fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 12, lineHeight: 1.7, marginTop: 4, whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: 'var(--dsw-alias-label-tertiary,#8b93a1)' },
     };
 
-    function MiniRemoteSettingsTab() {
+    // —— 跨机 · 「其他电脑」这一块的**状态**（2026-10-16 跨机第三步的界面）。
+    //
+    // 为什么状态放在组件外面：点那一行的人在**设置页那一节**里，被打开的那一整屏在
+    // **中间那个面板**里（main 槽里 key=PANEL_ID 的那一个）——两个组件在不同的槽里，
+    // 互相看不见。所以这一份放在这里，两边都读它、两边都订它。
+    //
+    // 只有四样东西，而且**没有"永远转圈"这一档**：点开的是哪一台、正在换票的是哪一台、
+    // 换到的那张票、换不到时那一句人话（见 fetchRemoteTicket）。
+
+    /**
+     * 用户点开的是**哪一台**（`{ id, name }`；null = 没在看别的电脑）。
+     *
+     * 它和下面那张票是两件事，分开存**是必须的**：换票失败时（对面撤销了、地址不通），
+     * 票还是上一台的那一张——要是照票去画那一屏，屏幕上出现的会是**另一台电脑**的界面，
+     * 而用户刚点的这台连一句话都没说。
+     */
+    var remoteTarget = null;
+    /** 已经换到的那张票：`{ id, name, url, at, expiresIn }`；null = 手上没有票。 */
+    var remoteWin = null;
+    /** 正在为哪一台换票（`''` = 没有在换）。界面照它说「正在换票…」。 */
+    var remoteBusyId = '';
+    /** `id → { text, revoked }`：那台电脑上一次为什么没成，一句话。 */
+    var remoteProblems = {};
+
+    // —— 「框没打开就自动重取一张票、再试一次」用的两样（2026-10-17 补）。
+    //
+    // 为什么要有它：2026-10-17 拆掉了"面板每 25 秒自己换一张票"那个机制（票只在开门那一下
+    // 用一次，之后那一枚窗口会话 cookie 没有寿命——见 `MiniRemotePanel` 里那一段）。拆得对，
+    // 但当时**没有补上任何自动恢复**：只剩下用户手点「再试一次」。于是又多出一个洞——
+    // **框的第一次加载被拖过票的寿命（30 秒）时**，票在那一刻已经作废，框就白着，
+    // 而旧机制那一下"到点重取"本来能顺带把它救回来。这一条就是补上的那个约束。
+
+    /**
+     * 这一次「人按下去」的自动重取**用掉了没有**。
+     *
+     * 只有 20 秒兜底到点那一下会花掉它（每花一次就自动重取一张票、再给框一次机会）。
+     * **每一次人主动发起的取票都会把它重置**（名单上点一台 / 设置页点「重连」/ 那一屏的
+     * 「再试一次」，都不带 `auto`，见 `fetchRemoteTicket`）——所以"自动重试"永远跟着一次
+     * 人的动作，最多一次，**绝不会变成"每 20 秒自己转一圈"那种新的无界行为**。
+     */
+    var remoteAutoRetrySpent = false;
+
+    /**
+     * 屏幕上这一趟正在转的圈 / 立着的框，是不是"第一次没打开、自动再试一次"那一次。
+     *
+     * 由自动那一次取票置起（`{ auto: true }`），由框真正 load 回来那一下放下。
+     * 界面照它换一句话说（见 `REMOTE_AUTO_RETRY_TEXT`）——**不许无声地又转一圈**。
+     */
+    var remoteAutoRetry = false;
+
+    /** 谁想知道上面这几样变了（面板要先重画一遍）。 */
+    var remoteWatchers = [];
+
+    function notifyRemote() {
+      var list = remoteWatchers.slice();
+      for (var i = 0; i < list.length; i += 1) {
+        try { list[i](); } catch (err) { /* 一个订阅者出事不该拦住别人 */ }
+      }
+    }
+
+    /** 订阅那三样。返回退订函数——**组件卸载时必须退订**，否则留住一个死组件。 */
+    function subscribeRemote(fn) {
+      remoteWatchers.push(fn);
+      return function () {
+        var at = remoteWatchers.indexOf(fn);
+        if (at >= 0) remoteWatchers.splice(at, 1);
+      };
+    }
+
+    /**
+     * 对面把这条记录撤销了时，界面上那句话。
+     *
+     * 它和宿主写的那句（`REMOTE_REVOKED_HINT`，"那台电脑已经不认这枚凭据了……"）**同时**
+     * 出现：这一句说的是"现在是什么状况"，宿主那一句说的是"接下来怎么办"。用户手上真正
+     * 能做的只有一件事——拿对面的口令重新配一次，所以这一句必须摆在这一行上。
+     */
+    var REMOTE_REVOKED_ROW = '这台电脑已经被对方撤销了，要重新配对';
+
+    /**
+     * 「对面撤销了」这个判据为什么只能认字。
+     *
+     * 宿主那一半把对面回的 **401 翻成了 502**，并且换成自己写的那句话（见 lib/index.js 的
+     * `REMOTE_REVOKED_HINT`）——**401 本身到不了界面**。所以那句话是界面上唯一能认出
+     * "对面撤销了"的信号，认它最独特的那半句。认不出（对面换了说法、或者是别的错）就
+     * 照原话显示，**绝不猜**：猜错的代价是让人去重新配对一台其实好着的电脑。
+     */
+    var REMOTE_REVOKED_MARK = '已经不认这枚凭据';
+
+    /**
+     * 那一屏等多久还没打开，就算"框没打开"：先自动重取一张票再试一次，第二次到点才给人话。
+     *
+     * 为什么需要它：框里是**另一个源**（那台电脑的地址），我们一个字节都读不到
+     * （2026-10-16 在无头 Edge 上量过：跨源的 `contentDocument` 是 null）。能等的只有
+     * "框自己有没有 load"。量出来的事实是——**502、端口上没人应答都会照常 load**
+     * （浏览器把错误页也算一次成功的文档），只有"连上了却一直不回话"这种才是真等不到。
+     * 所以这一条**不是**用来判"对面坏了没有"的，它兜的是"一个空白框永远挂在那儿"。
+     *
+     * 到点之后做什么（2026-10-17 补的那条约束）：
+     *   · 这一次人的动作**还没用过**自动重取 → 先自动重取一张票、再给框一次机会
+     *     ——票是一次性的、30 秒就作废，"第一次加载被拖过 30 秒"那个洞就靠这一下救回来
+     *     （见 `remoteAutoRetrySpent`）；
+     *   · 自动那一趟也没成、又到点 → 才把框换成一句人话 + 「再试一次」，**不能是个转不完的圈**。
+     */
+    var REMOTE_FRAME_WAIT_MS = 20000;
+
+    /**
+     * 自动重取那一次在屏幕上写的那句话（2026-10-17 补）。
+     *
+     * 为什么非有不可：换票那一刻和重试那个框的这 20 秒里，那一块本来就是白的/空的
+     * （`MiniRemotePanel` 里那两处渲染用它顶着）。不说话就等于"无声地又转一圈"，
+     * 用户会以为界面卡住了——这正是这一条补丁自己要防的坏法。
+     */
+    var REMOTE_AUTO_RETRY_TEXT = '第一次没打开，正在再试一次…';
+
+    /**
+     * 去宿主那儿换一张票，最多等多久（**这一条请求自己的超时**）。
+     *
+     * 为什么定 15 秒：宿主那一半替我们去问那台电脑时**自己有一条 8 秒的上限**
+     * （lib/index.js 的 `REMOTE_CALL_TIMEOUT_MS` 与 `callRemote` 里那个 `AbortSignal.timeout`），
+     * 所以正常情况下最坏 ~8 秒就会带着一句人话回来。15 秒 = 那条上限 + 一段余量
+     * （宿主进程正忙、本机这一跳排在长任务后面）。**比 8 秒小是不对的**：那会把
+     * "慢一点但会成"的正当请求掐掉，用户白点一次。
+     *
+     * 这一条防的是**另一个形状**的坏：宿主整个不回话（本机这个服务卡住、这一跳根本没被处理）
+     * ——那种情况下请求不会自己失败，界面就永远停在"正在向那台电脑换一张通行证…"，
+     * 那正是这个功能最要防的"转不完的圈"。到点主动掐掉，换成一句人话 + 「再试一次」。
+     */
+    var REMOTE_TICKET_WAIT_MS = 15000;
+
+    /**
+     * 等不到宿主回话时，那一屏上写的那句话（落到 `remoteProblems[id]` 里走现成那条路：
+     * **一句人话 + 「再试一次」+ 顶上那条「← 返回列表」**，见 remoteProblemPanel 与 remoteScreen）。
+     */
+    var REMOTE_TIMEOUT_TEXT = '等这台电脑上的遥控服务回话，等了 ' + Math.round(REMOTE_TICKET_WAIT_MS / 1000) + ' 秒还没等到。\n'
+      + '它可能正忙，或者这会儿本机的服务卡住了。点下面的「再试一次」再换一张通行证。';
+
+    /**
+     * 去宿主那儿换一张票（**「重连」就是再调一次它**）。返回 `Promise<{ok,error?}>`。
+     *
+     * ## 每一条路都以一句话结束
+     *
+     * 「转不完的圈」是这个功能最要防的一种坏法：方案里记着那个前车之鉴——宿主回 502
+     * 时，界面外壳**不会重试**，于是永远停在「Loading plugins…」，不自愈。所以这个函数
+     * **只有两种结局**：票放进 `remoteWin`，或者一句人能照着做的话放进 `remoteProblems[id]`。
+     * 网络层失败、非 200、回执里没有地址，一条都不例外。
+     *
+     * ## 401 / 502 是怎么变成人话的
+     *
+     * 401 到不了这里（见 `REMOTE_REVOKED_MARK` 那一段），到的是宿主翻好的 502 +
+     * 那句话：这里①**照原话显示**，②认出那句话之后**额外**把这一行标成"已经被对方
+     * 撤销了"，让用户知道下一步是重新配对，而不是反复点「重连」。
+     * 别的 502（对面 503 / 403 / 地址不通）宿主也各写好了人话（见 lib/index.js 的
+     * `remoteStatusText` 与 `callRemote`），照原话显示即可——**界面这一层不自己编**。
+     *
+     * ## 等不到回话：这一条请求**自己带一个超时**
+     *
+     * 见 `REMOTE_TICKET_WAIT_MS`。到点我们主动掐掉这一趟，而且**认得出是"我们等不及了"**
+     * ——那不是网络自己断的，给的人话也必须是另一句（"等了 15 秒还没等到"）。
+     *
+     * ## 三个入口 + 一个自动入口（2026-10-17 补）
+     *
+     * 人按的三个（名单上点一台 / 设置页点「重连」/ 那一屏的「再试一次」）都不带 `opts`；
+     * 第四个是**框没打开时那一下自动重取**，带 `{ auto: true }`（见 `remoteAutoRetrySpent`）。
+     * 两者的差别只有一处：自动那一次**不重置**那份预算，所以自动重取绝不会自己接着自己转。
+     */
+    function fetchRemoteTicket(id, name, opts) {
+      // **是不是"框没打开"那一下的自动重取**（2026-10-17 补，见 remoteAutoRetrySpent/remoteAutoRetry）。
+      // 人按的每一次（不带 auto）都把那份预算重置：自动重取于是**永远跟着一次人的动作、最多一次**；
+      // 而「再试一次」是人按的，所以它照旧可以一直点下去（无限次）。
+      var auto = !!(opts && opts.auto);
+      remoteAutoRetry = auto;
+      if (!auto) remoteAutoRetrySpent = false;
+      remoteBusyId = id;
+      // 手上前一张票作废：它要么是**上一台**的，要么已经过期了。留着它唯一的后果是
+      // 屏幕上出现一台用户没在看的电脑。
+      remoteWin = null;
+      // 上一次那句话先撤掉：正在重试的时候，那一行不该还挂着上一次的结论。
+      delete remoteProblems[id];
+      notifyRemote();
+      // `spent`：这一趟已经落地（成功/失败/超时）。一立起来，**后面再来什么回音都不改了**
+      // ——超时之后才回来的那份回执，拿它去开框等于让屏幕上突然冒出一个用户已经放弃的界面。
+      var spent = false;
+      var stopper = typeof AbortController === 'function' ? new AbortController() : null;
+      var timer = null;
+      /**
+       * 这一趟落地成"没成"：一句人话进 `remoteProblems[id]`，并清掉"正在换票"。
+       * 和别的失败走的是**同一条路**——那一屏照旧是人话 + 「再试一次」+ 「← 返回列表」。
+       */
+      var fail = function (text) {
+        if (spent) return { ok: false, error: text, revoked: false };
+        spent = true;
+        clearTimeout(timer);
+        remoteBusyId = '';
+        remoteProblems[id] = { text: text, revoked: false };
+        notifyRemote();
+        return { ok: false, error: text, revoked: false };
+      };
+      // **这一条请求自己的超时**（时长与理由见 REMOTE_TICKET_WAIT_MS）。
+      // 掐不掉那条请求时（老浏览器没有 AbortController）状态也照落：迟到的回执被 `spent`
+      // 挡住，界面绝不会停在"正在换票…"上。
+      timer = setTimeout(function () {
+        if (stopper) stopper.abort();
+        fail(REMOTE_TIMEOUT_TEXT);
+      }, REMOTE_TICKET_WAIT_MS);
+      return fetch(REMOTE_WINDOW_PATH, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id: id }),
+        signal: stopper ? stopper.signal : undefined,
+      }).then(function (res) {
+        return res.json().then(
+          function (b) { return { status: res.status, body: b }; },
+          function () { return { status: res.status, body: null }; },
+        );
+      }).then(function (r) {
+        if (spent) return { ok: false, error: REMOTE_TIMEOUT_TEXT, revoked: false };
+        spent = true;
+        clearTimeout(timer);
+        var b = (r.body && typeof r.body === 'object') ? r.body : null;
+        remoteBusyId = '';
+        if (b && b.ok === true && typeof b.url === 'string' && b.url) {
+          remoteWin = {
+            id: id,
+            name: name || '',
+            url: b.url,
+            at: Date.now(),
+            // 票的寿命（宿主说了算，真机上是 30 秒）。**界面不再照它定期重取**：票只在
+            // "开这一台"那一刻用一次（进门那一下兑成窗口会话 cookie），地址一旦交给框就不再变。
+            // 留着这两个字段是如实记下宿主回执的形状，也方便出事时对时间。
+            expiresIn: Number(b.expiresIn) || 0,
+          };
+          notifyRemote();
+          return { ok: true };
+        }
+        var text = (b && b.error) || ('换票失败：这台电脑上的服务返回了 HTTP ' + r.status + '。');
+        remoteProblems[id] = { text: text, revoked: text.indexOf(REMOTE_REVOKED_MARK) >= 0 };
+        notifyRemote();
+        return { ok: false, error: text, revoked: remoteProblems[id].revoked };
+      }).catch(function (err) {
+        if (spent) return { ok: false, error: REMOTE_TIMEOUT_TEXT, revoked: false };
+        return fail('连不上这台电脑上的遥控服务：' + ((err && err.message) || String(err)));
+      });
+    }
+
+    /**
+     * 从「某一台的界面」**退回名单**：手上这一趟放下，人还留在我们这一屏里（2026-10-17）。
+     *
+     * 和下面的 `leaveRemotePanel` 是两件事：那个是**离开这一屏**（回到进来之前那一屏），
+     * 这个是**只上一层**。两处都用到它：界面顶上那枚「← 返回列表」，和"再点一下侧栏那一条"
+     * （见 onDocumentClick）。
+     */
+    function leaveRemoteScreen() {
+      remoteTarget = null;
+      remoteWin = null;
+      notifyRemote();
+    }
+
+    /**
+     * 从名单上点开一台：**先记住是哪一台**，再去换一张票（那一下的成败都落在这一份状态里）。
+     *
+     * 顺序是刻意的：先写 `remoteTarget` 再取票，取票失败时那一屏才说得清"是哪一台没成"
+     * ——照票去画的话，屏幕上会出现上一台电脑的界面（见 `remoteTarget` 那段）。
+     * 设置页那一块（`connectRemote`）走的是同一条路的前两步，第三步它自己接（切到这一屏 + 关掉设置页）。
+     */
+    function openRemoteScreen(one) {
+      if (remoteBusyId) return;
+      remoteTarget = { id: one.id, name: one.name || '' };
+      fetchRemoteTicket(one.id, one.name);
+    }
+
+    /**
+     * 设置页那一节。
+     *
+     * `props.close` 是**设置页外壳递进来的**（dsh-client-ui-settings-general 的
+     * `renderSlot("settings.section", { close: onClose })`）：设置页是一个盖在整个界面
+     * 上的浮层，要"整屏显示别的电脑"就得先把它关掉——不关的话切过去的那一屏在它后面，
+     * 用户看到的是"点了没反应"。拿不到（极简假壳里）也不要紧：那一块会如实说清
+     * "点侧栏那枚图标去看"（见 connectRemote）。
+     */
+    function MiniRemoteSettingsTab(props) {
       var infoState = useState(null);
       var info = infoState[0];
       var setInfo = infoState[1];
@@ -92,6 +477,59 @@ window.__ModuleLoader__.load({
       var guideState = useState(false);
       var guideOpen = guideState[0];
       var setGuideOpen = guideState[1];
+      // 设备名册（第三步）：服务端那份名单、读不到时的原因，以及"正在改名"和
+      // "正在二次确认撤销"这两个**一次只可能有一处**的状态。
+      // 两个都存 id，不存整条记录——记录会随每次刷新变，存下来就会拿着一份旧名字去改。
+      var devicesState = useState(null);
+      var devices = devicesState[0];
+      var setDevices = devicesState[1];
+      var devErrState = useState(null);
+      var devicesError = devErrState[0];
+      var setDevicesError = devErrState[1];
+      var renameState = useState(null);
+      var renaming = renameState[0];
+      var setRenaming = renameState[1];
+      var confirmState = useState(null);
+      var confirming = confirmState[0];
+      var setConfirming = confirmState[1];
+      // 「其他电脑」那一块（跨机第三步的界面）：我连得上哪几台电脑。名单从宿主那份来
+      // （`GET /mini-remote/remotes`），动作两条——添加、断开（断开要二次确认）。
+      // 「点这一行」和「重连」是同一件事：去宿主那儿换一张票（见 fetchRemoteTicket）。
+      var remotesState = useState(null);
+      var remotes = remotesState[0];
+      var setRemotes = remotesState[1];
+      var remotesErrState = useState(null);
+      var remotesError = remotesErrState[0];
+      var setRemotesError = remotesErrState[1];
+      // 断开之后宿主给的那句话（说清"对面那台电脑上还留着这条记录"）。原样显示。
+      var remoteNoteState = useState(null);
+      var remoteNote = remoteNoteState[0];
+      var setRemoteNote = remoteNoteState[1];
+      // 添加那一块：`null` = 收着；一个草稿 = 摊开着（三个框 + 一次确认）。
+      var addState = useState(null);
+      var addDraft = addState[0];
+      var setAddDraft = addState[1];
+      var addErrState = useState(null);
+      var addError = addErrState[0];
+      var setAddError = addErrState[1];
+      // 正在二次确认「断开」的那一台（存 id，不存整条记录——记录每次刷新都会变）。
+      var forgetState = useState(null);
+      var forgetting = forgetState[0];
+      var setForgetting = forgetState[1];
+      // 「自检」那一块（2026-10-17）：这台电脑在跑哪一版、哪些接口在、开关什么状态。
+      // 一个快照 + 一个「重新自检」按钮——手机服务可能刚起来、路由可能刚变，
+      // 用户得能当场再看一眼，而不是关掉这一页再进来一次。
+      var selfState = useState(null);
+      var selfcheck = selfState[0];
+      var setSelfcheck = selfState[1];
+      var selfErrState = useState(null);
+      var selfError = selfErrState[0];
+      var setSelfError = selfErrState[1];
+      // 默认展开：这一块是"出问题时才来看"的，进来了就该直接看见那几行，
+      // 而不是先点一下。内容不长（十来行），不会把上面要操作的几块挤走。
+      var selfOpenState = useState(true);
+      var selfOpen = selfOpenState[0];
+      var setSelfOpen = selfOpenState[1];
 
       // 同源 GET，不带任何 token：这台电脑自己读得到，别人的电脑读不到。
       useEffect(function () {
@@ -151,7 +589,347 @@ window.__ModuleLoader__.load({
         } catch (e) { /* 剪贴板不可用：保持原样 */ }
       };
 
-      // 和服务端那道校验是同一个数。前端先拦一道只是为了让「太短了」当场说出来，
+      /**
+       * 读设备名单。
+       *
+       * 每次动作之后都**重新读一遍服务端那份**，而不是在本地改一改数组（改名就把
+       * 名字换掉、撤销就把那一行删掉）：屏幕上显示的必须就是服务端此刻认的那份名册。
+       * 本地拼一份"看起来对"的列表，迟早和真名册分叉——而分叉的表现正是这一节最不能
+       * 出的那种错：「界面上删了，那台手机还能进」。
+       */
+      var loadDevices = function () {
+        return fetch(DEVICES_PATH)
+          .then(function (res) {
+            return res.json().then(
+              function (body) { return { status: res.status, body: body }; },
+              function () { return { status: res.status, body: null }; },
+            );
+          })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (b && b.ok && Array.isArray(b.devices)) {
+              setDevices(b.devices);
+              setDevicesError(null);
+            } else if (r.status === 404 || r.status === 405) {
+              // **这条路不在这儿**（宿主那一半是旧版，或者设置页没走到我们那台服务器）。
+              // 这一支单独写，是因为那种情况下服务端回的是一句给程序看的「not found」——
+              // 原样摆在设置页上，用户看到的就是一条外星文，而下一步其实只有一句话：重启。
+              setDevicesError('读设备名单失败：这台电脑上的服务没有这个接口（HTTP ' + r.status + '）。重启一次 DSH 再试。');
+            } else {
+              setDevicesError((b && b.error) || ('读设备名单失败：服务返回了 HTTP ' + r.status + '。'));
+            }
+          })
+          .catch(function (err) {
+            setDevicesError('读设备名单失败：' + ((err && err.message) || String(err)));
+          });
+      };
+
+      /**
+       * 名单在**配对信息到了之后**才拉。
+       *
+       * 判据只看"配对信息回来没有"，**不看它的 ok**：`ok:false` 说的是"这台电脑现在
+       * 没有手机连得上的地址"（比如只绑了回环），而设备名册跟那件事一点关系都没有——
+       * 地址连不上的时候，用户恰恰更需要看到名单、把旧设备撤掉。三条路由只要有
+       * webServer 就在，和手机服务绑了哪个地址无关。
+       */
+      useEffect(function () {
+        if (!info) return undefined;
+        loadDevices();
+        // 「其他电脑」那份名单和配对信息也没有关系（它是"我连得上谁"），同一趟一起读。
+        loadRemotes();
+        // 自检同理：它读的是这台电脑自己的底细（版本、进程、路由、开关、端口），
+        // 和"手机连不连得上"一点关系都没有——所以配对信息一回来就一起读。
+        loadSelfcheck();
+        return undefined;
+      }, [info]);
+
+      /**
+       * 一次 POST + 解析 JSON 的短写法。
+       *
+       * **只给这一节新加的两条动作（改名 / 撤销）用**：文件里别处那些各自还带着自己的
+       * 失败分支（有的要把 appSecret 留着、有的要带一条开启链接），硬拧成一股反而看不清。
+       * 这里两条的回执形状一样，才值得这一个函数。
+       */
+      var postJson = function (path, body) {
+        return fetch(path, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(body),
+        }).then(function (res) {
+          return res.json().then(
+            function (b) { return { status: res.status, body: b }; },
+            function () { return { status: res.status, body: null }; },
+          );
+        });
+      };
+
+      /** 点「改名」：把那台设备切到编辑态。**同时收起别的确认框**（一次只做一件事）。 */
+      var startRename = function (one) {
+        setConfirming(null);
+        setDevicesError(null);
+        setRenaming({ id: one.id, draft: typeof one.name === 'string' ? one.name : '' });
+      };
+
+      /** 存新名字。名字只是标签，存完照旧认人——所以这里不掐线、不重连。 */
+      var saveRename = function () {
+        if (!renaming) return;
+        var next = (renaming.draft || '').trim();
+        if (!next) {
+          setDevicesError('名字不能是空的。');
+          return;
+        }
+        setBusy(true);
+        postJson(DEVICE_RENAME_PATH, { id: renaming.id, name: next })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (!b || b.ok !== true) {
+              setDevicesError((b && b.error) || ('改名失败：服务返回了 HTTP ' + r.status + '。'));
+              return undefined;
+            }
+            setDevicesError(null);
+            setRenaming(null);
+            // **改完再列一次**：屏幕上那份必须来自服务端，不能是我们以为改成了什么。
+            return loadDevices();
+          })
+          .catch(function (err) {
+            setDevicesError('改名失败：' + ((err && err.message) || String(err)));
+          })
+          .then(function () { setBusy(false); });
+      };
+
+      /**
+       * 真的撤销一台设备。**只有二次确认之后才会走到这儿**（见 devicesBlock：
+       * 点「撤销」只是把那句后果摊出来，要点「确认撤销」才发这一条）。
+       *
+       * 服务端那一步会删记录 + 掐掉它手上的活连接（见 lib/index.js 与 lib/server.js
+       * 的 dropDeviceConnections）。这边只管如实转述结果，成功之后重新列一次。
+       */
+      var revokeDevice = function (id) {
+        setBusy(true);
+        postJson(DEVICE_REVOKE_PATH, { id: id })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (!b || b.ok !== true) {
+              setDevicesError((b && b.error) || ('撤销失败：服务返回了 HTTP ' + r.status + '。'));
+              return undefined;
+            }
+            setDevicesError(null);
+            setConfirming(null);
+            return loadDevices();
+          })
+          .catch(function (err) {
+            setDevicesError('撤销失败：' + ((err && err.message) || String(err)));
+          })
+          .then(function () { setBusy(false); });
+      };
+
+      // 「其他电脑」那三样状态在组件**外面**（见那一块的开头）：变了就重画一遍。
+      // 这一节里点一下「重连」，正在换票 / 换到了 / 没换成**都发生在这里**——
+      // 那一行要当场跟着变（尤其是没换成时那句话，它就摆在这一行底下）。
+      // 值本身不用，`setPoke` 那一下就是目的。
+      var pokeRemoteState = useState(0);
+      useEffect(function () {
+        return subscribeRemote(function () { pokeRemoteState[1](function (n) { return n + 1; }); });
+      }, []);
+
+      /**
+       * 读「我能连的电脑」那份名单。
+       *
+       * 和 `loadDevices` 同一条规矩：每次动作之后**重新读服务端那份**，不在本地改数组。
+       * 「界面上删了、其实还留着」在这个功能里同样是最难查的一种错（那一行照旧能点开
+       * 对面那台电脑）。
+       */
+      var loadRemotes = function () {
+        return fetch(REMOTES_PATH)
+          .then(function (res) {
+            return res.json().then(
+              function (body) { return { status: res.status, body: body }; },
+              function () { return { status: res.status, body: null }; },
+            );
+          })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (b && b.ok && Array.isArray(b.remotes)) {
+              setRemotes(b.remotes);
+              setRemotesError(null);
+            } else if (r.status === 404 || r.status === 405) {
+              // 这条路不在这儿：宿主那一半是旧版。服务端回的是给程序看的 `not found`，
+              // 原样摆出来用户读不懂，而下一步只有一句话：重启。
+              setRemotesError('读「其他电脑」名单失败：这台电脑上的服务没有这个接口（HTTP ' + r.status + '）。重启一次 DSH 再试。');
+            } else {
+              setRemotesError((b && b.error) || ('读「其他电脑」名单失败：服务返回了 HTTP ' + r.status + '。'));
+            }
+          })
+          .catch(function (err) {
+            setRemotesError('读「其他电脑」名单失败：' + ((err && err.message) || String(err)));
+          });
+      };
+
+      /**
+       * 读「自检」那一份（`GET /mini-remote/selfcheck`，只允许本机）。
+       *
+       * 三种结局分开说，一种都不许含糊：
+       *   · 读到了 → 把那一份摊开；
+       *   · **404/405 = 这条路不在这儿**（宿主那一半是旧版）。这一支要单独说，因为
+       *     服务端回的是给程序看的 `not found`，原样摆出来用户读不懂，而它能得到的
+       *     最有用的信息恰恰是那句话：**装是装上了，但跑的还是旧的，重启一次 DSH**。
+       *   · 别的错（网络断了、服务没起来）→ 照登原因。
+       *
+       * 读不到**不吞**：这一块照样出现，只是那句原因摆在那儿（见 selfcheckBlock）。
+       */
+      var loadSelfcheck = function () {
+        return fetch(SELFCHECK_PATH)
+          .then(function (res) {
+            return res.json().then(
+              function (body) { return { status: res.status, body: body }; },
+              function () { return { status: res.status, body: null }; },
+            );
+          })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (b && b.ok === true) {
+              setSelfcheck(b);
+              setSelfError(null);
+            } else if (r.status === 404 || r.status === 405) {
+              setSelfError('这台电脑上的服务没有「自检」这个接口（HTTP ' + r.status + '）。'
+                + '装上的是新版、跑的却可能是旧版——重启一次 DSH 才会加载新版本。');
+            } else {
+              setSelfError((b && b.error) || ('读自检失败：服务返回了 HTTP ' + r.status + '。'));
+            }
+          })
+          .catch(function (err) {
+            setSelfError('读自检失败：' + ((err && err.message) || String(err)));
+          });
+      };
+
+      /** 摊开添加那一块。**同时收起别的确认**（一次只做一件事，照上面的改名/撤销）。 */
+      var openAdd = function () {
+        setForgetting(null);
+        setRemoteNote(null);
+        setAddError(null);
+        setAddDraft({ name: '', baseUrl: '', token: '' });
+      };
+
+      /**
+       * 添加一台电脑：拿它的**口令**换一枚自己的凭据（换到了才落盘，见 lib/index.js）。
+       *
+       * 前端这两道拦的只是"太明显了"的空格（当场说清，不用等一趟网络）；真正的门在宿主
+       * 那一边，这里改了那边不改照样进不去——和改密码那一块同一条口径。
+       */
+      var saveAdd = function () {
+        if (!addDraft || busy) return;
+        var baseUrl = (addDraft.baseUrl || '').trim();
+        var token = (addDraft.token || '').trim();
+        if (!baseUrl) {
+          setAddError('要填那台电脑的地址——就是它的「手机遥控」页那条（http:// 地址:3090，或者 https:// 的 Tailscale 地址；'
+            + '不要带 /mini 和它后面的参数）。');
+          return;
+        }
+        if (!token) {
+          setAddError('要填那台电脑的口令（在它的「手机遥控」设置里能复制到）。');
+          return;
+        }
+        setAddError(null);
+        setBusy(true);
+        postJson(REMOTE_ADD_PATH, {
+          name: (addDraft.name || '').trim(),
+          baseUrl: baseUrl,
+          token: token,
+        })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (!b || b.ok !== true) {
+              setAddError((b && b.error) || ('添加失败：服务返回了 HTTP ' + r.status + '。'));
+              return undefined;
+            }
+            setAddDraft(null);
+            setRemoteNote(null);
+            // **加完再列一次**：屏幕上那份必须来自服务端（名字是它给的默认值）。
+            return loadRemotes();
+          })
+          .catch(function (err) {
+            setAddError('添加失败：' + ((err && err.message) || String(err)));
+          })
+          .then(function () { setBusy(false); });
+      };
+
+      /**
+       * 真的断开一台电脑：**只删这台电脑上的那一条**（对面那份记录照旧在，见 lib/remotes.js）。
+       *
+       * 只有二次确认之后才会走到这儿。成功之后把宿主给的那句话（`note`）摆出来——
+       * 它说的是"对面还留着这条记录，要彻底收回得去那边撤销"。这是最容易留下的误会：
+       * 用户以为断开等于收回了权限。
+       */
+      var forgetRemote = function (id) {
+        setBusy(true);
+        postJson(REMOTE_FORGET_PATH, { id: id })
+          .then(function (r) {
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (!b || b.ok !== true) {
+              setRemotesError((b && b.error) || ('断开失败：服务返回了 HTTP ' + r.status + '。'));
+              return undefined;
+            }
+            setRemotesError(null);
+            setForgetting(null);
+            setRemoteNote(typeof b.note === 'string' ? b.note : null);
+            // 那一台的"上一次为什么没成"跟着这条记录一起没了。
+            delete remoteProblems[id];
+            notifyRemote();
+            return loadRemotes();
+          })
+          .catch(function (err) {
+            setRemotesError('断开失败：' + ((err && err.message) || String(err)));
+          })
+          .then(function () { setBusy(false); });
+      };
+
+      /**
+       * 「点这一行」和「重连」都走它：**取票 → 把地址交给那一整屏**。
+       *
+       * ## 为什么先取票、成功了才切过去
+       *
+       * 取票是这条路上唯一会失败的一步（对面关着、地址不通、被撤销了、它的界面拿不出来
+       * ——见 lib/index.js 那几条路由）。**失败时用户还留在设置页上，那句话就摆在刚才点的
+       * 那一行底下**——比先跳到一整屏空白再告诉他出事了好得多。
+       *
+       * ## 切不过去也不装作没事
+       *
+       * 切那一屏要两样东西：官方布局服务的把手（`layoutFace`），和设置页外壳递进来的
+       * `close`（设置页是一个盖在界面上的浮层，不关掉它，切过去的那一屏还在它后面，
+       * 用户看到的是"什么都没发生"）。两样缺一，就把"去侧栏那枚图标点一下"这条路指给他
+       * ——票已经在手上了，那一下照旧打开。
+       */
+      var connectRemote = function (one) {
+        if (remoteBusyId) return;
+        // **先记住"要打开的是哪一台"**：换票失败时那一屏照它说话（不然会说上一台的事）。
+        remoteTarget = { id: one.id, name: one.name || '' };
+        fetchRemoteTicket(one.id, one.name).then(function (r) {
+          if (!r.ok) return;
+          if (goToRemotePanel()) return;
+          remoteProblems[one.id] = {
+            text: '票已经换到了，但这个界面没能自己切到那一屏。关掉设置页，点侧栏那枚「远程窗口」，'
+              + '就能看到那台电脑的界面。',
+            revoked: false,
+          };
+          notifyRemote();
+        });
+      };
+
+      /** 把那一整屏打开：先切面板、再关设置页（顺序的理由见上面那一段）。 */
+      var goToRemotePanel = function () {
+        if (!layoutFace) return false;
+        try {
+          layoutFace.selectPanel(PANEL_ID);
+        } catch (err) {
+          // 布局服务认得的面板里没有我们那个 key（官方那一列还没装配好）：如实说。
+          return false;
+        }
+        var close = props && props.close;
+        if (typeof close === 'function') {
+          try { close(); } catch (err) { /* 外壳不让我关：那一屏已经在后面打开了 */ }
+        }
+        return true;
+      };
       // 不用等一趟网络；真正的门在服务端，这里改了那边不改也进不去。
       var MIN_PASSWORD_LEN = 12;
 
@@ -215,6 +993,41 @@ window.__ModuleLoader__.load({
           .then(function () { setBusy(false); });
       };
 
+      /**
+       * 开/关「允许别的电脑连接」。
+       *
+       * 和公网那个开关**同一个形状**：POST 一个 `{enabled}`，回来的还是整份配对信息
+       * （服务端算好的那一份），界面直接拿它刷新——本地自己改状态的话，那个开关
+       * 迟早和 settings.json 里那份分叉，而分叉的表现正是这一节最不能出的那种错：
+       * 「界面上开着，其实关着」。
+       *
+       * 失败不动别的状态，只把那句话摆出来（`failure`）。**默认关**：用户不动它，
+       * 这台电脑就不接受别的电脑连过来——装好不会自动打开。
+       */
+      var toggleRemoteAccess = function (enabled) {
+        if (busy) return;
+        setBusy(true);
+        fetch(REMOTE_ACCESS_PATH, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ enabled: enabled }),
+        })
+          .then(function (res) {
+            return res.json().then(
+              function (body) { return { status: res.status, body: body }; },
+              function () { return { status: res.status, body: null }; },
+            );
+          })
+          .then(function (r) {
+            if (r.body && typeof r.body === 'object') { setInfo(r.body); setFailure(null); }
+            else setFailure('切换「允许别的电脑连接」失败：服务返回了 HTTP ' + r.status + '。');
+          })
+          .catch(function (err) {
+            setFailure('切换「允许别的电脑连接」失败：' + ((err && err.message) || String(err)));
+          })
+          .then(function () { setBusy(false); });
+      };
+
       /**
        * 开/关 Tailscale 的 HTTPS 地址。
        *
@@ -342,11 +1155,55 @@ window.__ModuleLoader__.load({
           save: saveFeishu,
           guideOpen: guideOpen,
           toggleGuide: function () { setGuideOpen(function (v) { return !v; }); },
+        }, {
+          // 「设备」那一块：名单 + 两个动作 + 只属于这一块的失败原因。
+          list: devices,
+          error: devicesError,
+          renaming: renaming,
+          confirming: confirming,
+          busy: busy,
+          startRename: startRename,
+          setRenaming: setRenaming,
+          cancelRename: function () { setRenaming(null); setDevicesError(null); },
+          saveRename: saveRename,
+          askRevoke: function (id) { setRenaming(null); setDevicesError(null); setConfirming(id); },
+          cancelRevoke: function () { setConfirming(null); },
+          revoke: revokeDevice,
+        }, {
+          // 跨机那个总开关（2026-10-16 第二步）。和 serve/feishu/dev 一样摊平成一个
+          // 对象传：状态在 `info.remote` 里跟配对信息一起下来，动作就是上面那个 POST。
+          toggle: toggleRemoteAccess,
+        }, {
+          // 「其他电脑」那一块：名单 + 添加 + 两个动作，以及只属于那一块的两句话
+          // （读名单失败的原因、断开之后那句"对面还留着"）。
+          list: remotes,
+          error: remotesError,
+          note: remoteNote,
+          add: addDraft,
+          addError: addError,
+          forgetting: forgetting,
+          busy: busy,
+          openAdd: openAdd,
+          setAddDraft: setAddDraft,
+          cancelAdd: function () { setAddDraft(null); setAddError(null); },
+          saveAdd: saveAdd,
+          askForget: function (id) { setAddDraft(null); setRemotesError(null); setForgetting(id); },
+          cancelForget: function () { setForgetting(null); },
+          forget: forgetRemote,
+          connect: connectRemote,
+        }, {
+          // 「自检」那一块：一份快照 + 展开/收起 + 重新自检。读不到时 error 里那句话
+          // 就摆在这一块里（它照样出现，见 selfcheckBlock）。
+          data: selfcheck,
+          error: selfError,
+          open: selfOpen,
+          toggle: function () { setSelfOpen(function (v) { return !v; }); },
+          reload: loadSelfcheck,
         }),
       );
     }
 
-    function content(info, failure, copied, copy, busy, toggle, pwd, serve, feishu) {
+    function content(info, failure, copied, copy, busy, toggle, pwd, serve, feishu, dev, remote, rmt, self) {
       if (failure) return h('div', { style: styles.error }, failure);
       if (!info) return h('div', { style: styles.loading }, '正在读取配对信息…');
 
@@ -377,9 +1234,446 @@ window.__ModuleLoader__.load({
       // 飞书那一块：**只要服务端带了 feishu 就出现**（成功、失败、服务还没起来那几条
       // 路径上都带着它）。它是独立的一条通路，手机服务有没有起来都不该拦着用户改它。
       if (info.feishu) blocks.push(feishuBlock(info.feishu, feishu));
+      // 设备那一块：**放在最后**。它是"谁进得来"的账本，改名/撤销都在这里；
+      // 名单还没读到（服务端没给 / 读失败）而报错也没有时，整块不出现——
+      // 不摆一个空壳，也不把上面几块的位置动一寸。
+      // 跨机那个总开关**紧挨在名单前面**：这两块说的是同一件事的两半——上面是
+      // "许不许别的电脑连过来"，下面是"已经连过来的有哪几台"。顺序反过来的话，
+      // 用户先在名单里看见一台不认识的电脑，才在上方找到那个总开关。
+      if (info.remote && remote) blocks.push(remoteBlock(info.remote, busy, remote.toggle));
+      if (dev && (dev.list !== null || dev.error)) blocks.push(devicesBlock(dev));
+      // 「其他电脑」那一块：**排在「设备」后面**。两块说的是相反的两件事——上面那份是
+      // "谁进得来"（别人连我这台），这一份是"我连得上谁"（我从这台去连别人）。顺序上先
+      // 说别人进来的（那是权限边界，也是这一页的主语），再说我出去的。
+      if (rmt && (rmt.list !== null || rmt.error)) blocks.push(remotesBlock(rmt));
+      // 「自检」那一块：**永远排在最末**，而且只要服务端答了话（或者答不上话但说清了
+      // 原因）就出现。它是这一页的"体检报告"——不抢前面那些要操作的位置，
+      // 但也不能因为"读不到"而整块消失（那正好是最需要它的时候）。
+      if (self) blocks.push(selfcheckBlock(self));
       return h('div', null, blocks);
     }
 
+    /** 时间戳 → 「2026-10-16 14:20」。取不到（0/坏值）回 null，由调用方去说「还没有记录」。 */
+    function formatTime(ms) {
+      var n = Number(ms);
+      if (!n) return null;
+      var t = new Date(n);
+      if (isNaN(t.getTime())) return null;
+      var p = function (v) { return (v < 10 ? '0' : '') + v; };
+      return t.getFullYear() + '-' + p(t.getMonth() + 1) + '-' + p(t.getDate())
+        + ' ' + p(t.getHours()) + ':' + p(t.getMinutes());
+    }
+
+    /**
+     * 一台设备那一行里那句小字：**类型 · 创建时间 · 最近使用时间**。
+     *
+     * `lastSeen` 为 0 时说「还没有记录」而不是编一个时间：老记录（第三步之前写下的
+     * 那几条）本来就没有这个字段，编成"创建时间"等于凭空造一次使用。
+     */
+    function deviceMeta(one) {
+      // 类型只影响这一句小字（认人从不看它，见 lib/devices.js）。认得的两种说人话；
+      // **认不出的不吞**——原样打出来，比一律写成"设备"容易查。
+      var kind = one.kind === 'phone' ? '手机'
+        : (one.kind === 'desktop' ? '另一台电脑' : String(one.kind || '设备'));
+      var made = formatTime(one.createdAt);
+      var seen = formatTime(one.lastSeen);
+      var parts = [kind];
+      parts.push(made ? '创建于 ' + made : '创建时间读不到');
+      parts.push(seen ? '最近使用 ' + seen : '最近使用 还没有记录');
+      return parts.join(' · ');
+    }
+
+    /**
+     * 「设备」那一块：**谁进得来、什么时候进的、改个名字、撤销一台**（2026-10-16 第三步）。
+     *
+     * ## 为什么撤销的入口在电脑上（用户拍板的）
+     *
+     * 手机页上"删掉自己"有个死结：删完当场进不去，而下一步正是要在那台手机上做什么。
+     * 电脑这边没这个问题——撤销的就是别人（或者手上这台的旧记录）。
+     *
+     * ## 撤销为什么要点两下
+     *
+     * 删了那台设备就得**重新扫码**（凭据找不回来，这是设计的一部分，不是缺陷）。
+     * 一次点击就造成这个后果太重了，所以第一下只把后果摊在那一行下面，第二下
+     * （「确认撤销」）才真的发出去。**不用 window.confirm**：那种弹窗在微信这类内嵌
+     * 浏览器里会被直接屏蔽，屏蔽时万一返回真值就等于确认被跳过（手机页那边为同一件
+     * 事写过同一段话）。
+     *
+     * ## 名字和撤销的性质不一样
+     *
+     * 名字只是标签（见 lib/devices.js 开头）：改了照旧认人。所以「改名」一个点击就够，
+     * 不用确认。
+     */
+    function devicesBlock(d) {
+      var list = Array.isArray(d.list) ? d.list : [];
+      var rows = list.map(function (one) {
+        var editing = Boolean(d.renaming && d.renaming.id === one.id);
+        var asking = d.confirming === one.id;
+        return h('div', { key: one.id, style: styles.deviceRow },
+          h('div', { style: styles.deviceMain },
+            editing
+              ? h('input', {
+                type: 'text',
+                value: d.renaming.draft,
+                spellCheck: false,
+                placeholder: '给这台设备起个名字',
+                disabled: Boolean(d.busy),
+                onChange: function (e) { d.setRenaming({ id: one.id, draft: e.target.value }); },
+                style: styles.input,
+              })
+              : h('div', { style: styles.deviceName }, one.name ? one.name : '（这台设备没有名字）'),
+            h('div', { style: styles.muted }, deviceMeta(one)),
+          ),
+          h('div', { style: styles.deviceActs },
+            editing
+              ? h('button', {
+                type: 'button', disabled: Boolean(d.busy), onClick: function () { d.saveRename(); }, style: styles.btn,
+              }, d.busy ? '保存中…' : '保存')
+              : h('button', {
+                type: 'button', disabled: Boolean(d.busy), onClick: function () { d.startRename(one); }, style: styles.btn,
+              }, '改名'),
+            editing
+              ? h('button', {
+                type: 'button', disabled: Boolean(d.busy), onClick: function () { d.cancelRename(); }, style: styles.btn,
+              }, '取消')
+              : h('button', {
+                type: 'button', disabled: Boolean(d.busy), onClick: function () { d.askRevoke(one.id); }, style: styles.btn,
+              }, '撤销'),
+          ),
+          // 二次确认：**把后果写在按钮旁边**，不是写一句"确定吗"。
+          asking ? h('div', { style: styles.deviceConfirm },
+            h('div', { style: styles.warn }, '撤销后，这台设备要重新扫码才能再用。'),
+            h('button', {
+              type: 'button', disabled: Boolean(d.busy), onClick: function () { d.revoke(one.id); }, style: styles.btn,
+            }, d.busy ? '撤销中…' : '确认撤销'),
+            h('button', {
+              type: 'button', disabled: Boolean(d.busy), onClick: function () { d.cancelRevoke(); }, style: styles.btn,
+            }, '取消'),
+          ) : null,
+        );
+      });
+
+      return h('div', { key: 'devices', style: styles.block },
+        h('div', { style: styles.entryTitle }, '设备'),
+        h('div', { style: styles.muted },
+          '每一台手机第一次扫码进来时会自动登记，之后不用再扫码。撤销之后，那台设备要重新扫码才能再用。'),
+        d.error ? h('div', { style: styles.error }, d.error) : null,
+        rows.length
+          ? h('div', null, rows)
+          : (d.error ? null : h('div', { style: styles.muted, marginTop: 10 }, '这台电脑上还没有登记过的设备。')),
+      );
+    }
+
+    /**
+     * 「其他电脑」那一块：**这台电脑连得上去哪几台别的电脑**（2026-10-16 跨机第三步的界面）。
+     *
+     * ## 和上面那一块正好相反
+     *
+     * 「设备」是**谁进得来**（别人连我这台）；这一块是**我连得上谁**（我从这台去连别人）。
+     * 两块都摆在设置页上，所以标题得一眼分得开。
+     *
+     * ## 一行一台，那一行本身就是入口
+     *
+     * 点那一行 = 打开那台电脑的界面（先取票，见 `connectRemote`）：取票 → 把地址交给框 →
+     * 切到「远程窗口」那一屏 → 把设置页这个浮层关掉。**2026-10-17 起那一屏点开的第一层
+     * 也是同一份名单**（见 MiniRemotePanel）：在这儿点，就跳过名单直接进那一台。
+     * 行里另给两个动作：「重连」（票是一次性的、30 秒就过期，"再换一张"总得有个明确入口）
+     * 和「断开」。
+     * **「重连」和"点这一行"是同一件事**（重连 = 再取一次票，见 lib/index.js 那一段）。
+     *
+     * ## 「断开」要点两下
+     *
+     * 照上面「撤销」的做法（这个文件里没有弹窗，全站都是页内两步）：第一下只把后果摊在
+     * 那一行下面。**而且要说清"对面还留着"**——断开只动这台电脑，用户很容易以为它等于
+     * 收回了对面的权限。
+     *
+     * ## 这一块上没有"转圈"
+     *
+     * 正在换票时那一行写「取票中…」，失败了就写一句人能照着做的话（`remoteProblems`；
+     * 对面撤销了另有专门的一句）。**没有任何一格会永远停在"加载中"**——见 fetchRemoteTicket。
+     */
+    function remotesBlock(r) {
+      var list = Array.isArray(r.list) ? r.list : [];
+
+      var rows = list.map(function (one) {
+        var asking = r.forgetting === one.id;
+        var problem = remoteProblems[one.id];
+        var working = remoteBusyId === one.id;
+        var lastOk = formatTime(one.lastOk);
+        return h('div', {
+          key: one.id,
+          style: Object.assign({}, styles.deviceRow, { cursor: 'pointer' }),
+          // 点这一行 = 打开那台电脑的界面。**点在行里的按钮上不算"点这一行"**——
+          // 不然一按「断开」就会顺手去取票（那是两件相反的事）。
+          onClick: function (e) {
+            var t = e && e.target;
+            if (t && typeof t.closest === 'function' && t.closest('button')) return;
+            r.connect(one);
+          },
+        },
+          h('div', { style: styles.deviceMain },
+            h('div', { style: styles.deviceName }, one.name ? one.name : '（这台电脑没有名字）'),
+            h('div', { style: styles.remoteUrl }, one.baseUrl || ''),
+            h('div', { style: styles.muted }, lastOk ? '最近成功 ' + lastOk : '最近成功 还没有记录'),
+          ),
+          h('div', { style: styles.deviceActs },
+            h('button', {
+              type: 'button',
+              disabled: Boolean(r.busy || working),
+              onClick: function () { r.connect(one); },
+              style: styles.btn,
+            }, working ? '取票中…' : '重连'),
+            h('button', {
+              type: 'button',
+              disabled: Boolean(r.busy),
+              onClick: function () { r.askForget(one.id); },
+              style: styles.btn,
+            }, '断开'),
+          ),
+          working ? h('div', { style: styles.muted }, '正在向那台电脑换一张通行证…') : null,
+          // 上一次为什么没成。**另起一行**（`deviceConfirm` 那个 `flex:1 1 100%`），不然这句话
+          // 会挤在按钮旁边，断成两截。对面撤销了这一条**单独一句**摆在最前面：用户下一步该做的
+          // 是重新配对，而不是反复点「重连」；宿主那两行原文照登，里面写着"拿口令重新添加"。
+          problem ? h('div', {
+            style: problem.revoked
+              ? Object.assign({}, styles.warn, styles.say, styles.deviceConfirm)
+              : Object.assign({}, styles.error, styles.say, styles.deviceConfirm),
+          }, problem.revoked ? REMOTE_REVOKED_ROW + '。' : problem.text) : null,
+          problem && problem.revoked ? h('div', {
+            style: Object.assign({}, styles.muted, styles.say, styles.deviceConfirm),
+          }, problem.text) : null,
+          asking ? h('div', { style: styles.deviceConfirm },
+            h('div', { style: styles.warn }, '断开之后，这台电脑就不再连它了：这条记录和本地存的那枚凭据一起删掉。'
+              + '对面那台电脑上还留着「这台电脑」这条记录——要彻底收回，得去它那边撤销那一台。'),
+            h('button', {
+              type: 'button', disabled: Boolean(r.busy), onClick: function () { r.forget(one.id); }, style: styles.btn,
+            }, r.busy ? '断开中…' : '确认断开'),
+            h('button', {
+              type: 'button', disabled: Boolean(r.busy), onClick: function () { r.cancelForget(); }, style: styles.btn,
+            }, '取消'),
+          ) : null,
+        );
+      });
+
+      // 添加那一块：两个框（地址、口令）+ 一个可选的名字，**一次确认**才发出去
+      // （口令是密码性质的，打字打到一半就发一趟不合适）。口令打码，和别处一致。
+      var addUi = r.add ? h('div', null,
+        field('那台电脑的地址（它「手机遥控」页那条，不带 /mini）', r.add.baseUrl, 'http://…', function (v) {
+          r.setAddDraft(Object.assign({}, r.add, { baseUrl: v }));
+        }, 'text'),
+        field('那台电脑的口令（在它的「手机遥控」设置里复制）', r.add.token, '', function (v) {
+          r.setAddDraft(Object.assign({}, r.add, { token: v }));
+        }, 'password'),
+        field('给它起个名字（可留空，留空就用地址当名字）', r.add.name, '', function (v) {
+          r.setAddDraft(Object.assign({}, r.add, { name: v }));
+        }, 'text'),
+        h('div', { style: { marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap' } },
+          h('button', {
+            type: 'button', disabled: Boolean(r.busy), onClick: r.saveAdd, style: styles.btn,
+          }, r.busy ? '配对中…' : '确认添加'),
+          h('button', {
+            type: 'button', disabled: Boolean(r.busy), onClick: r.cancelAdd, style: styles.btn,
+          }, '取消'),
+        ),
+        r.addError ? h('div', { style: Object.assign({}, styles.error, styles.say) }, r.addError) : null,
+      ) : null;
+
+      return h('div', { key: 'remotes', style: styles.block },
+        h('div', { style: styles.entryTitle }, '其他电脑'),
+        h('div', { style: styles.muted }, '这台电脑连得上去的别的电脑。配对过一台之后，点它那一行就能'
+          + '在这儿打开它的界面——和上面那份名单正好相反：上面是「谁进得来」，这里是「我连得上谁」。'),
+        h('div', { style: styles.warn }, '要连的那台电脑得先把它的「允许别的电脑连接」打开，'
+          + '而且两边要能在网络上互相够到（同一个 Wi-Fi、或者同一条 Tailscale 网络）。'),
+        r.error ? h('div', { style: Object.assign({}, styles.error, styles.say) }, r.error) : null,
+        // 断开之后宿主给的那句话：说清"对面还留着"（最容易留下的误会）。
+        r.note ? h('div', { style: Object.assign({}, styles.muted, styles.say) }, r.note) : null,
+        rows.length
+          ? h('div', null, rows)
+          : (r.error ? null : h('div', { style: styles.muted, marginTop: 10 }, '这台电脑还没连过别的电脑。')),
+        h('div', { style: { marginTop: 12 } },
+          h('button', { type: 'button', onClick: r.openAdd, style: styles.btn },
+            r.add ? '收起这一块' : '添加一台电脑'),
+        ),
+        addUi,
+      );
+    }
+
+    /**
+     * 「自检」那一块（2026-10-17）：**这台电脑到底在跑什么**。
+     *
+     * ## 为什么值得摆在设置页上
+     *
+     * 那天排两台真机的故障都卡在同一件事上——**看不见那台机器在跑什么**：一台的桌面端
+     * 连开了一整天，加载的是"新功能写下来之前"的代码；另一台装的插件是旧版本，新接口
+     * 根本没出现。当时只能靠用户来回反馈、靠一个个地址去敲。这一块把那些答案摆在一处：
+     * 哪一版、宿主进程什么时候起的、哪些接口在、开关什么状态、服务听哪儿、数据在哪。
+     *
+     * ## 那一句警告**不展开也得看得见**
+     *
+     * 「进程比代码旧」是那次故障最常见的样子（装是装上了，跑的却还是旧的），而它对应的
+     * 动作只有一个：重启 DSH。所以那句话摆在摘要上面、**不受展开/收起影响**——
+     * 要用户点开才看得见，等于把它藏起来。
+     *
+     * ## 读不到也要出现
+     *
+     * 这一块**没有"读不到就不显示"这一档**：读不到（宿主是旧版、服务没起来）时，
+     * 那句原因就摆在这儿，下面照样有一个「重新自检」。整块消失的话，用户看到的是
+     * 「设置页上根本没有自检」——那和"没装这个功能"分不清。
+     *
+     * ## 除了那一句警告，别的都不许用感叹号或大红字
+     *
+     * 它是体检报告，不是警报：正常的时候（插件是最新的）就该安静地读过去。
+     */
+    function selfcheckBlock(sc) {
+      var st = sc.data;
+      var code = (st && st.code) || {};
+      var proc = (st && st.process) || {};
+      var phone = (st && st.phoneService) || {};
+      var rosters = (st && st.rosters) || {};
+
+      /** 运行了多久，说成人话（诊断的时候"连开了多久"本身就是一个线索）。 */
+      function uptimeLine(sec) {
+        var n = Number(sec);
+        if (!isFinite(n) || n < 0) return '';
+        if (n < 120) return '（刚起来 ' + Math.round(n) + ' 秒）';
+        var mins = Math.round(n / 60);
+        if (mins < 120) return '（已运行 ' + mins + ' 分钟）';
+        var hours = Math.floor(mins / 60);
+        var rest = mins % 60;
+        return '（已运行 ' + hours + ' 小时' + (rest ? ' ' + rest + ' 分' : '') + '）';
+      }
+
+      /**
+       * 多久以前，说成人话。
+       *
+       * 诊断的时候「三分钟前」比「19:42:07」有用：用户记不住自己什么时候点过什么，
+       * 但他知道"刚才"和"昨天"的区别。
+       */
+      function agoText(ms) {
+        var n = Number(ms);
+        if (!isFinite(n)) return '';
+        var sec = Math.round((Date.now() - n) / 1000);
+        if (sec < 60) return '刚刚';
+        var min = Math.round(sec / 60);
+        if (min < 60) return min + ' 分钟前';
+        var hour = Math.round(min / 60);
+        if (hour < 24) return hour + ' 小时前';
+        return Math.round(hour / 24) + ' 天前';
+      }
+
+      /** 接口那一行的说法：几条在、几条不在。空表只说"未知"，不编一个 0。 */
+      function routeLine(routes) {
+        var list = Array.isArray(routes) ? routes : [];
+        if (!list.length) return '未知';
+        var live = list.filter(function (one) { return one && one.mounted !== false; });
+        return live.length === list.length
+          ? ('一共 ' + list.length + ' 条，都在')
+          : ('一共 ' + list.length + ' 条，其中 ' + (list.length - live.length) + ' 条不在');
+      }
+
+      function list(labels) {
+        return labels.filter(Boolean).join('、');
+      }
+
+      if (!st) {
+        // 还没读到 / 读不到：这一块照旧出现，把那句原因摆出来（尤其是"没有这个接口
+        // = 宿主是旧版"那一条，它是这一块最有用的一句话）。
+        return h('div', { key: 'selfcheck', style: styles.block },
+          h('div', { style: styles.entryTitle }, '自检'),
+          h('div', { style: styles.muted }, '这一块只给这台电脑看（只有本机能读），里面没有一个字是密码或密钥。'),
+          h('div', { style: Object.assign({}, styles.error, styles.say) },
+            sc.error || '正在自检…'),
+          h('div', { style: { marginTop: 12 } },
+            h('button', { type: 'button', onClick: sc.reload, style: styles.btn }, '重新自检')),
+        );
+      }
+
+      // 「进程比代码旧」——这一句不受展开/收起影响（见上面那段）。
+      var alert = code.stale === true && code.message
+        ? h('div', { style: styles.warn }, code.message)
+        : null;
+
+      // 最近出错的那一叠（自检里的 `errors`：**最新在前**，最多 20 条）。
+      // 空数组是正常的——那是"这次开机以来没出过错"，不是"取不到"。
+      var errorRows = Array.isArray(st.errors) ? st.errors : [];
+
+      var summary = h('div', { style: styles.selfSummary },
+        '插件版本 ' + (st.version || '未知')
+        + ' · 宿主进程启动于 ' + (formatTime(proc.startedAtMs) || '未知')
+        + ' · 接口' + routeLine(st.routes)
+        // 有错才提一句：绝大多数的正常时刻，这一行不该被"最近出错 0 条"这种噪音占满。
+        + (errorRows.length ? ' · 最近出错 ' + errorRows.length + ' 条' : ''),
+      );
+
+      var routePaths = Array.isArray(st.routes) ? st.routes : [];
+      var details = h('div', null,
+        h('div', { style: styles.muted },
+          '宿主进程（就是跑着这个插件的那个 DSH）启动于：' + (formatTime(proc.startedAtMs) || '未知')
+          + uptimeLine(proc.uptimeSec)),
+        h('div', { style: styles.muted },
+          '插件文件最后改动于：' + (formatTime(code.modifiedAtMs) || '未知')
+          + (code.file ? '（' + code.file + '）' : '')),
+        h('div', { style: styles.muted },
+          '接口清单一共 ' + routePaths.length + ' 条' + (routePaths.length ? '：' : '（读不到）')),
+        routePaths.length
+          // 一行一条要占掉十几行（这一块默认是展开的），挤在一起又读不清：
+          // 用顿号连起来让它自己折行，一眼扫得完，又不会把面板撑得老长。
+          ? h('div', { style: styles.code }, routePaths.map(function (one) {
+            return String(one && one.path) + (one && one.mounted === false ? '（现在不在）' : '');
+          }).join('、'))
+          : null,
+        h('div', { style: styles.muted },
+          '「允许别的电脑连接」：' + (st.allowRemoteComputers ? '开' : '关（默认关）')),
+        h('div', { style: styles.muted },
+          '手机服务：' + (phone.listening
+            ? ('在听端口 ' + phone.port + '，绑了 ' + ((phone.addresses || []).join('、') || '未知'))
+            : ('没起来' + (phone.error ? '（' + phone.error + '）' : '')))),
+        h('div', { style: styles.muted },
+          '跨机那两条接口在手机服务那一半也挂了一份：'
+          + list([
+            phone.hostHalf && phone.hostHalf.pair ? '配对 在' : '配对 不在',
+            phone.hostHalf && phone.hostHalf.remoteWindow ? '取票 在' : '取票 不在',
+          ])),
+        h('div', { style: styles.muted }, '数据目录（这台电脑上的那份，不随插件卸载而删）：'),
+        h('div', { style: styles.code }, String(st.dataDir || '未知')),
+        h('div', { style: styles.muted },
+          '名册（只报条数，不报内容）：设备 ' + (rosters.devices === null || rosters.devices === undefined ? '未知' : rosters.devices + ' 条')
+          + ' · 我能连的电脑 ' + (rosters.remotes === null || rosters.remotes === undefined ? '未知' : rosters.remotes + ' 条')),
+        // 最近出错：这一块是「刚才到底发生了什么」的唯一出口。
+        // 错误原来只打到 stdout——用户看着图形界面，终端里写了什么他一个字都看不到。
+        errorRows.length
+          ? h('div', null,
+            h('div', { style: styles.muted },
+              '最近出错（最新在前，' + agoText(errorRows[0] && errorRows[0].at) + '），不落盘、重启就清空：'),
+            h('div', { style: styles.code }, errorRows.slice(0, 5).map(function (one) {
+              return '· ' + String((one && one.message) || '');
+            }).join('\n')
+            + (errorRows.length > 5 ? '\n…还有 ' + (errorRows.length - 5) + ' 条' : '')),
+            h('div', { style: styles.muted },
+              '要看更早的，去启动这个 DSH 的那个终端找 [dsh-mini-remote] 开头的行。'),
+          )
+          : h('div', { style: styles.muted }, '最近没有出错记录。'),
+      );
+
+      return h('div', { key: 'selfcheck', style: styles.block },
+        h('div', { style: styles.entryTitle }, '自检'),
+        h('div', { style: styles.muted }, '这一块只给这台电脑看（只有本机能读），里面没有一个字是密码或密钥。'),
+        alert,
+        summary,
+        sc.error ? h('div', { style: Object.assign({}, styles.error, styles.say) }, sc.error) : null,
+        sc.open ? details : null,
+        h('div', { style: { marginTop: 12 } },
+          h('button', { type: 'button', onClick: sc.toggle, style: styles.btn },
+            sc.open ? '收起自检' : '展开自检'),
+          h('button', {
+            type: 'button',
+            onClick: sc.reload,
+            style: Object.assign({}, styles.btn, { marginLeft: 8 }),
+          }, '重新自检'),
+        ),
+      );
+    }
+
     /**
      * 飞书那一块：开关、两个凭据、两个允许名单。
      *
@@ -663,6 +1957,47 @@ window.__ModuleLoader__.load({
       );
     }
 
+    /**
+     * 「允许别的电脑连接」那一节（2026-10-16 跨机第二步）。
+     *
+     * ## 为什么它得在设置页里、而且默认关
+     *
+     * 打开它等于**把整个「电脑端界面」交给另一台电脑**（会话记录、模型配置、插件装卸
+     * 全在里面）——比手机那条路能碰到的更多。这种边界不能替用户默认打开，所以：
+     * 默认关，而且装好之后**不会自己打开**。
+     *
+     * ## 关着的时候要说清"关的是什么"
+     *
+     * 不是"少录一项配置"，而是**这台电脑不接受别的电脑连过来**：配对和取票两条都不接。
+     * 说清楚这一句，用户才敢让它是关着的。
+     *
+     * ## 开着的时候要给一句实话
+     *
+     * 那台电脑拿到的是完整的桌面界面。用户很可能以为"只是看个窗口"，所以这一句风险
+     * 必须摆出来——这是唯一一处能提前告诉他的地方。
+     */
+    function remoteBlock(st, busy, toggle) {
+      var on = Boolean(st && st.allowed);
+      return h('div', { key: 'remote', style: styles.block },
+        h('div', { style: styles.entryTitle }, '允许别的电脑连接'),
+        h('div', { style: styles.muted }, '打开之后，另一台电脑可以用这台电脑上的密码配一次对，'
+          + '以后就能从那边打开你这台电脑的「电脑端界面」。'),
+        h('label', { style: styles.toggleRow },
+          h('input', {
+            type: 'checkbox',
+            checked: on,
+            disabled: Boolean(busy),
+            onChange: function (e) { toggle(e.target.checked); },
+          }),
+          h('span', null, on ? '已开启' : '开启'),
+        ),
+        h('div', { style: styles.muted }, on
+          ? '已开启。别的电脑现在连得进来——不想让哪一台进，就在下面的名单里把它撤销。'
+          : '没开（默认）。别的电脑连不进来，连配对也不受理——这台电脑现在只接受本机和手机。'),
+        on ? h('div', { style: styles.warn }, '那台电脑拿到的是你这台电脑的完整界面：会话记录、模型设置、插件都在里面。只给你信得过的电脑开。') : null,
+      );
+    }
+
     function tunnelBlock(tunnel, busy, toggle) {
       var enabled = Boolean(tunnel.enabled);
       var working = Boolean(busy || tunnel.starting);
@@ -781,7 +2116,600 @@ window.__ModuleLoader__.load({
       );
     }
 
+    /**
+     * 那一屏开不成时的整屏内容：**一句人话 + 一个「再试一次」**。
+     *
+     * 这一屏绝对不能是"空白框 + 转圈"——那是这个功能最要防的坏法（方案里记着的前车之鉴：
+     * 宿主回 502 时外壳不会重试，于是永远停在「Loading plugins…」，不自愈）。所以：
+     * 说清是哪一台、为什么没成（宿主那句话原样转述）、下一步点哪儿。
+     */
+    function remoteProblemPanel(id, name, problem) {
+      return h('div', { style: styles.panelMsg },
+        problem.revoked ? h('div', null, REMOTE_REVOKED_ROW + '。') : null,
+        h('div', { style: Object.assign({}, styles.muted, styles.say) }, problem.text),
+        h('div', { style: { marginTop: 18 } },
+          h('button', {
+            type: 'button',
+            onClick: function () { fetchRemoteTicket(id, name); },
+            style: styles.btn,
+          }, '再试一次'),
+        ),
+      );
+    }
+
+    /**
+     * 「远程窗口」面板——侧栏那个图标点开之后，占满中间那一整列的那一屏。
+     *
+     * ## 这一屏有两层（2026-10-17 起）
+     *
+     *   · **上面一层：一份「其他电脑」名单**（`MiniRemoteList`）。侧栏那枚图标点开先看到
+     *     的就是它——一行一台，点一行就把那一台的界面显示在这一屏里。
+     *   · **下面一层：选中那一台的「电脑端界面」**（另一个源，经它自己的镜像门嵌进来）。
+     *
+     * ## 为什么不再显示"本机"了（用户拍板的一条产品修正）
+     *
+     * 原来点开显示的是**本机**的电脑端界面——那是跨机还没做出来时的中间验证（脚手架）：
+     * 用它证明"取票 → 嵌框 → 过门"这一套真的能通。跨机做通之后它就没意义了，
+     * 用户的原话是：「远程窗口我们为什么要设置为显示当前电脑的dsh页面，这没有意义啊」
+     * ——**人就坐在这台电脑前面，为什么还要在这块面板里再看一遍自己的界面。**
+     *
+     * 所以本机那条**从界面上退休**：面板挂载时不再去换本机那张票。**底下那套零件一个字没删**
+     * ——宿主侧那条路由还在 `lib/index.js` 上，跨机这条路复用的取票/嵌框/过门也照旧
+     * （`lib/` 里一个字都没动）。
+     *
+     * ## 为什么要先取一张票，而不是直接把地址写进 src
+     *
+     * 那个地址后面要跟凭据。**令牌绝不能进 iframe 地址**——浏览历史、截图、别人拿到这台
+     * 电脑就能翻出来。所以走两条腿：
+     *   · 宿主那一半（同一台电脑、本来就拿着令牌）去换一张**一次性票**（30 秒、用完即废）；
+     *   · 界面这半边只拿得到「票 + 地址」，拼进 src 的只有票。
+     *
+     * 票进门那一刻会被兑现成一枚**窗口会话 cookie**（框里那些请求全靠它认人），
+     * 而票自己**只授权那一次**；地址里留着的那张票之后只用来回答「这一页是我嵌出来的吗」
+     * ——桌面端是**跨站**嵌进来的，只能靠票来定「许不许被嵌」。**令牌全程没进过浏览器。**
+     *
+     * **票在"开这一台"那一刻换一次，之后不动**（2026-10-17 改）：名单上点一台、设置页点
+     * 「重连」、那一屏的「再试一次」——三个入口各换一次（都在 `fetchRemoteTicket` 里）。
+     * **面板自己不会再去换第二张**：那一枚窗口会话 cookie 没有时间限制，按票的寿命定期
+     * 重取只会把**框整个重载一遍**（来龙去脉写在下面那个"原来有个 effect"那一段里）。
+     */
+    /**
+     * 面板里那一份「其他电脑」名单（2026-10-17）：侧栏那枚图标点开之后看到的**第一屏**。
+     *
+     * 它是 `MiniRemotePanel` 里那一段的"画法"，不是另一个组件：hook 全排在面板那一头
+     * （见那里的注释），这里只管把已经读到的三样东西画出来。
+     *
+     * ## 三种结局，一个转不完的圈都没有
+     *
+     *   · 读到了、有内容 → 一行一台（名字 + 地址 + 最近一次成功）；
+     *   · 读到了、一台也没有 → 「还没连过别的电脑。去『设置 → 手机遥控 → 其他电脑』里加一台。」；
+     *   · 读不到 → 照登原因（和设置页那一块同一条口径：404/405 = 宿主是旧版，下一步重启 DSH）。
+     *
+     * "读不到"和"一台都没有"是两件事，**绝不能说成同一句**：把读失败说成"还没连过"，
+     * 用户会去重配一台其实早就配好的电脑。
+     */
+    function remoteListScreen(list, error, again) {
+      if (error) {
+        return h('div', { style: styles.panelMsg },
+          h('div', { style: Object.assign({}, styles.muted, styles.say) }, error),
+          h('div', { style: { marginTop: 18 } }, again),
+        );
+      }
+      if (list === null) return h('div', { style: styles.panelMsg }, '正在读取「其他电脑」名单…');
+      if (!list.length) {
+        return h('div', { style: styles.panelMsg },
+          h('div', null, '还没连过别的电脑。去『设置 → 手机遥控 → 其他电脑』里加一台。'),
+          h('div', { style: { marginTop: 18 } }, again),
+        );
+      }
+
+      var rows = list.map(function (one) {
+        var lastOk = formatTime(one.lastOk);
+        var working = remoteBusyId === one.id;
+        return h('div', {
+          key: one.id,
+          style: Object.assign({}, styles.deviceRow, { cursor: 'pointer' }),
+          onClick: function () { openRemoteScreen(one); },
+        },
+          h('div', { style: styles.deviceMain },
+            h('div', { style: styles.deviceName }, one.name ? one.name : '（这台电脑没有名字）'),
+            h('div', { style: styles.remoteUrl }, one.baseUrl || ''),
+            h('div', { style: styles.muted }, lastOk ? '最近成功 ' + lastOk : '最近成功 还没有记录'),
+          ),
+          working ? h('div', { style: styles.muted }, '取票中…') : null,
+        );
+      });
+
+      return h('div', { style: styles.listWrap },
+        h('div', { style: styles.listHead }, '其他电脑'),
+        h('div', { style: styles.muted }, '点一台，就把它的界面显示在这儿。'),
+        h('div', null, rows),
+        h('div', { style: { marginTop: 12 } }, again),
+      );
+    }
+
+    function MiniRemotePanel() {
+      // —— 名单那一层要的三样东西。**hook 全排在函数开头**：这一屏有两层，下面按
+      //    「在看某一台 / 在看名单」分两头返回；hook 排在分支之后的话，切换那一瞬间
+      //    React 会看到 hook 个数变了（那是真机上会炸的一种错）。
+      var listState = useState(null);   // null = 还在读；[] = 读到了，一台也没有
+      var list = listState[0];
+      var setList = listState[1];
+      var listErrorState = useState(null);
+      var listError = listErrorState[0];
+      var setListError = listErrorState[1];
+      var tryState = useState(0);       // 每按一次「重新读一遍」+1 = 重读一次
+      var tries = tryState[0];
+      var setTries = tryState[1];
+      // 框一直没打开时的兜底（见 REMOTE_FRAME_WAIT_MS）：到点把空白框换成一句人话。
+      var stallState = useState(false);
+      var stalled = stallState[0];
+      var setStalled = stallState[1];
+      // 兜底那个定时器的把手。**它必须活在 effect 外面**：要把它掐掉的那一下在 `onLoad` 里，
+      // 和立钟的那个 effect 隔着一次渲染——留在一个只属于那个 effect 的闭包里，`onLoad` 够不着。
+      // 2026-10-17 修的就是这个：框加载好了，那个钟却还挂着，到点照样把正常的界面换掉。
+      var stallTimerRef = useRef(null);
+      // 顶上那条横条现在是不是滑出来了（见 `remoteScreen`）。**只有"框正常显示 + 有悬停能力"
+      // 时才可能收起**，其余状态它常驻——出错那一屏全靠它的「再试一次」。
+      var barState = useState(false);
+      var barOpen = barState[0];
+      var setBarOpen = barState[1];
+      // 两个定时器：显示等 0.18 秒（鼠标可能只是路过屏幕顶部），收起等 0.2 秒
+      // （光标常常是从感应带往下挪进横条里，中途路过那一下不该算"离开"）。
+      var barShowTimer = useRef(null);
+      var barHideTimer = useRef(null);
+      // 订阅「其他电脑」那三样（哪一台在换、换到没有、为什么没成）：变了就重画一遍。
+      // 值本身不用，`setPoke` 那一下就是目的。
+      var pokeState = useState(0);
+      var setPoke = pokeState[1];
+
+      useEffect(function () {
+        return subscribeRemote(function () { setPoke(function (n) { return n + 1; }); });
+      }, []);
+
+      /**
+       * 读名单。**读的是设置页那一块同一个接口**（`GET /mini-remote/remotes`）：两边不可能各说各话。
+       *
+       * 为什么这一屏要自己读一遍：设置页那一份住在设置页的浮层里，这一份住在 main 槽里
+       * ——两个组件在不同的槽里，互相看不见（和上面那份跨机状态同一个理由）。
+       *
+       * 为什么挂在 `[tries]` 上：这一屏可能一直挂在后台（面板没被卸载），而用户是在设置页里
+       * 把电脑加进去的。给一个明确的"再看一眼"的入口（那枚「重新读一遍」），比指望外壳
+       * 什么时候重挂一遍可靠。
+       */
+      useEffect(function () {
+        var alive = true;
+        setListError(null);
+        fetch(REMOTES_PATH)
+          .then(function (res) {
+            return res.json().then(
+              function (body) { return { status: res.status, body: body }; },
+              function () { return { status: res.status, body: null }; },
+            );
+          })
+          .then(function (r) {
+            if (!alive) return;
+            var b = (r.body && typeof r.body === 'object') ? r.body : null;
+            if (b && b.ok && Array.isArray(b.remotes)) { setList(b.remotes); return; }
+            // 宿主那一半是旧版（接口都不在）时，服务端回的是给程序看的 `not found`：
+            // 原样摆出来用户读不懂，而下一步只有一句话——重启。和设置页那一块说法一致。
+            setListError(r.status === 404 || r.status === 405
+              ? '读「其他电脑」名单失败：这台电脑上的服务没有这个接口（HTTP ' + r.status + '）。重启一次 DSH 再试。'
+              : ((b && b.error) || ('读「其他电脑」名单失败：服务返回了 HTTP ' + r.status + '。')));
+          })
+          .catch(function (err) {
+            if (!alive) return;
+            setListError('读「其他电脑」名单失败：' + ((err && err.message) || String(err)));
+          });
+        return function () { alive = false; };
+      }, [tries]);
+
+      var remoteId = remoteTarget ? remoteTarget.id : '';
+      var remoteName = remoteTarget ? remoteTarget.name : '';
+      var remoteUrl = (remoteWin && remoteWin.id === remoteId && remoteWin.url) ? remoteWin.url : '';
+
+      // 换一台 / 退回名单 / 重新进来：顶上那条回到收起状态。
+      // 不重置的话，下次点开是展开的——而"展开"本该只由鼠标碰顶那一下产生。
+      //
+      // **只在真的展开着时才写**：本来就收起的时候这一下是空操作，别拿它去换一次重渲染
+      // （替身 React 里 setState 不做同值跳过，真机上也只是白白多画一帧）。
+      useEffect(function () {
+        if (barOpen) setBarOpen(false);
+        clearTimeout(barShowTimer.current);
+        clearTimeout(barHideTimer.current);
+        barShowTimer.current = null;
+        barHideTimer.current = null;
+      }, [remoteId]);
+
+      // 卸载时把两个钟收掉：留着它们，200 毫秒后会在一个已经没了的组件上 setState。
+      useEffect(function () {
+        return function () {
+          clearTimeout(barShowTimer.current);
+          clearTimeout(barHideTimer.current);
+        };
+      }, []);
+
+      /** 把顶上那条勾出来。等 0.18 秒：鼠标可能只是路过屏幕顶部。 */
+      function scheduleBarShow() {
+        if (barShowTimer.current) return;
+        clearTimeout(barHideTimer.current);
+        barHideTimer.current = null;
+        barShowTimer.current = setTimeout(function () {
+          barShowTimer.current = null;
+          setBarOpen(true);
+        }, 180);
+      }
+
+      /** 收起来。等 0.2 秒：光标常常是从感应带往下挪进横条里，中途路过那一下不算离开。 */
+      function scheduleBarHide() {
+        clearTimeout(barShowTimer.current);
+        barShowTimer.current = null;
+        clearTimeout(barHideTimer.current);
+        barHideTimer.current = setTimeout(function () {
+          barHideTimer.current = null;
+          setBarOpen(false);
+        }, 200);
+      }
+
+      /** 光标已经进到横条上了：那个 0.2 秒的钟撤掉，别把它收走。 */
+      function cancelBarHide() {
+        clearTimeout(barHideTimer.current);
+        barHideTimer.current = null;
+      }
+
+      /**
+       * 那一屏的外框：**顶上有条横条**（「← 返回列表」+ 这是哪一台 + 一枚「再试一次」），
+       * 下面才是内容。
+       *
+       * ## 什么时候常驻、什么时候能收起（2026-10-17 用户要求）
+       *
+       * 收起（鼠标碰顶才滑出）**只在一种状态下成立：框真的显示出来了**。
+       * 正在换票、对方撤销了、框一直没起来——那几屏本来就是空白，横条上挂着唯一的出路
+       * （「← 返回列表」和「再试一次」），**藏起来等于把人关在里面**。所以那几种一律常驻。
+       *
+       * 没有悬停能力的设备（触摸屏）也一律常驻：触摸没有"碰一下顶"这回事，
+       * 藏了就是摸不到（和 `lib/page.html` 那条镜像顶栏同一条口径）。
+       *
+       * ## 感应带那 16px 不能省
+       *
+       * 鼠标一进到框里那份文档，事件就进了那份文档，外层一个都收不到——不盖一条的话，
+       * 最上面就没有任何东西能"碰到"。它透明、只 16px，压在框顶上那道空白上。
+       * 收起时横条的**位置跟着让出来**（`max-height: 0`），框自己长上来填满，不跳。
+       *
+       * 顶上那枚「再试一次」**永远在**：它兜的是这一屏最没法自己判的两种情形
+       * ——对面回的是一张错误页，或者文档到了里面却是空的。跨源的框读不到里面
+       * （量过的事实：`contentDocument` 是 null），"里面是不是坏的"我们**看不见，也不猜**；
+       * 能保证的是：**不管框里是什么，用户手上永远有一条出去的路**。
+       *
+       * @param {string} name 那台电脑叫什么
+       * @param {*} inner 横条下面那一块（框 / 一句人话 / 「正在换票」）
+       * @param {boolean} canAutoHide 横条允许自动收起吗——**只有"框已经显示出来"时传 true**
+       */
+      function remoteScreen(name, inner, canAutoHide) {
+        // 两个条件都得成立才收：这一屏允许（canAutoHide）且这台设备能悬停（HAS_HOVER）。
+        var collapsible = Boolean(canAutoHide) && HAS_HOVER;
+        var hidden = collapsible && !barOpen;
+
+        return h('div', { style: styles.screen },
+          // 感应带：盖在最顶上那 16px 上（见上面那段"不能省"）。
+          collapsible ? h('div', {
+            style: styles.screenHot,
+            onMouseEnter: scheduleBarShow,
+            // 显示这一屏那一刻鼠标可能就停在顶上（那时不会再有 mouseenter）——动一下也算数。
+            onMouseMove: scheduleBarShow,
+            onMouseLeave: scheduleBarHide,
+          }) : null,
+          h('div', {
+            style: Object.assign({}, styles.screenBarWrap, { maxHeight: hidden ? 0 : 100 }),
+            onMouseEnter: cancelBarHide,
+            onMouseLeave: collapsible ? scheduleBarHide : null,
+            // Tab 走到横条里那几枚按钮上时也要把它亮出来——
+            // 不留"焦点在这、按钮看不见"的坑（手机镜像页那条也是这么兜的）。
+            onFocus: collapsible
+              ? function () { cancelBarHide(); setBarOpen(true); }
+              : null,
+          },
+            h('div', { style: styles.screenBar },
+              h('button', {
+                type: 'button',
+                onClick: function () { leaveRemoteScreen(); },
+                style: styles.btn,
+              }, '← 返回列表'),
+              h('div', { style: styles.screenName }, name ? name : '另一台电脑'),
+              h('button', {
+                type: 'button',
+                disabled: Boolean(remoteBusyId),
+                onClick: function () {
+                  // 正在换票就别再叠一趟（和名单上点一行同一个口径，见 openRemoteScreen）：
+                  // 同时飞两条取票请求，后回来的那张票会把前一张盖掉。
+                  if (remoteBusyId) return;
+                  fetchRemoteTicket(remoteId, remoteName);
+                },
+                // 靠右（marginLeft auto）：台名那一格会被挤扁，这一枚不许跟着一起被挤掉。
+                style: Object.assign({}, styles.btn, { marginLeft: 'auto', flex: 'none' }),
+              }, '再试一次'),
+            ),
+          ),
+          inner,
+        );
+      }
+
+      // —— **这里原来有一个"票不新鲜了就现换一张"的 effect**（2026-10-17 拆掉）。
+      //
+      // 它看着很稳妥（票是一次性的、30 秒就过期），后果却是：**票一变，框的地址就变，
+      // 于是整个框重载一遍**——用户只是想一直看着那一台电脑，屏幕上却是每约 25 秒
+      // （30 秒寿命 − 5 秒余量）刷新一次。而"重新取票"根本不必要：
+      //
+      //   · 票**只在第一次打开那一刻**需要：那一下进门的请求把它兑成一枚**窗口会话 cookie**
+      //     （lib/server.js:1639-1643 种的那一枚），框里之后的请求（静态资源、`api/*`、
+      //     WebSocket）全靠那枚 cookie 认人，**票不再参与**；
+      //   · 那枚 cookie **没有时间限制**：会话体只有"形状 + 本进程签名"两项判据，没有
+      //     到期时刻（lib/mirror.js:1131-1147），密钥是每个宿主进程现生成的
+      //     （lib/mirror.js:1112）；`lib/mirror.js:1200` 写着"没有固定寿命，跟着这个宿主进程走"，
+      //     lib/server.js:1640-1643 也**故意不写 Max-Age**。它只在两件事上失效：**DSH 重启**、
+      //     或者**对面把这条设备记录撤销了**（lib/mirror.js:1108-1110 + 每次放行现查名册）；
+      //   · 地址里留着的那张票随后只用来回答"这一页是我嵌出来的吗"（取景判据），而兑过的票
+      //     进 `grants` 之后**同样没有寿命**（lib/mirror.js:1229/1293）——所以**同一条地址
+      //     再加载一次照样进得去**，不需要换一张新票。
+      //
+      // 所以票改成"**开这一台那一刻换一次，之后不动**"：三个入口各换一次（名单上点一台 /
+      // 设置页点「重连」/ 那一屏的「再试一次」，都在 `fetchRemoteTicket` 里）。
+      // **面板自己不再换第二张**——地址不变，框就不重载。要重新开一扇窗（对面重启过、
+      // 撤销过又配回来了），入口是「重连」和「再试一次」，都是用户按下去的动作。
+
+      // 框等不到 load：到点**先自动重取一张票再试一次**，第二次到点才说人话
+      // （见 REMOTE_FRAME_WAIT_MS 与 remoteAutoRetrySpent 里那两条）。
+      //
+      // **这个兜底只兜"框里一直没有任何文档"这一种**：框一旦 load 过（哪怕对面回的是一张
+      // 错误页），`onLoad` 那一下就把这个钟掐掉——**它之后永远不许再响**。
+      // 2026-10-17 之前它只在依赖变化/卸载时清，于是真机形态里出现过这种坏法：框明明
+      // 已经加载好了，t≈20s 那一屏照样被换成「一直没打开」——一句错话盖住正常的界面。
+      //
+      // 那条"错误页 / 空白文档也算回来了"的取舍照旧没变（见下面 onLoad 那一段）：跨源读不到
+      // 里面，判不出来就不猜。补上自动重取**不等于**能做这个判断——自动重取兜的只是
+      // "框里一个文档都没有"这一种；另外两种的出路是顶上那枚永远在的「再试一次」。
+      useEffect(function () {
+        if (!remoteId || !remoteUrl) return undefined;
+        setStalled(false);
+        stallTimerRef.current = setTimeout(function () {
+          // **先自动重取一张票、再试一次（只这一次）**：票是一次性的、真机上 30 秒就作废，
+          // 第一次加载被拖过那 30 秒时套着旧票重载是白费，换一张新的才有救（2026-10-17 补）。
+          // 花掉那份预算的意思是"这一次人的动作里到此为止"：它绝不会自己接着自己转下去。
+          if (!remoteAutoRetrySpent) {
+            remoteAutoRetrySpent = true;
+            // 票一换、地址就变：框整个重立一次，这个 effect 会照新地址再挂一个钟
+            // ——所以"第二次到点"是真的又过了这 20 秒，不是紧接着。
+            fetchRemoteTicket(remoteId, remoteName, { auto: true });
+            return;
+          }
+          // 自动那一趟也没成：**这才**把框换成那句人话 + 「再试一次」（下面 stalled 那一支）。
+          setStalled(true);
+        }, REMOTE_FRAME_WAIT_MS);
+        return function () {
+          // 换一台 / 返回列表 / 卸载都走这里：手上那个钟照旧清掉（别留下会自己响的定时器）。
+          clearTimeout(stallTimerRef.current);
+          stallTimerRef.current = null;
+        };
+      }, [remoteId, remoteUrl]);
+
+      if (remoteId) {
+        var problem = remoteProblems[remoteId];
+        if (remoteBusyId === remoteId) {
+          // 自动重取那一次要说清是"第一次没打开、正在再试一次"（见 REMOTE_AUTO_RETRY_TEXT）：
+          // 换票那一刻那一块本来就是空的，不说话就等于无声地又转一圈。
+          return remoteScreen(remoteName, h('div', { style: styles.panelMsg },
+            remoteAutoRetry ? REMOTE_AUTO_RETRY_TEXT : '正在向那台电脑换一张通行证…'));
+        }
+        if (problem) {
+          return remoteScreen(remoteName, remoteProblemPanel(remoteId, remoteName, problem));
+        }
+        // 手上还没有这一台的地址（正在换票，或者还没换）：**这时一个框都不立**。
+        // 地址一拿到就只认它——**不再按票的寿命判"新不新鲜"**（那正是"每 25 秒把框
+        // 重载一遍"的来路，见上面那一段）：票在框第一次加载那一刻就兑成了窗口会话 cookie，
+        // 那枚 cookie 没有时间限制。
+        if (!remoteUrl) {
+          return remoteScreen(remoteName, h('div', { style: styles.panelMsg }, '正在向那台电脑换一张通行证…'));
+        }
+        if (stalled) {
+          // 走到这儿一定已经自动重取过一次了（见上面那个钟里那一段）：把那一下说出来，
+          // 不然"等了 20 秒"这句话和用户真实等的时间对不上。
+          return remoteScreen(remoteName, remoteProblemPanel(remoteId, remoteName, {
+            revoked: false,
+            text: '那台电脑的界面一直没打开（等了 ' + Math.round(REMOTE_FRAME_WAIT_MS / 1000) + ' 秒没看到它，'
+              + '自动再试了一次还是没看到）。\n'
+              + '它可能刚重启、或者这会儿连不上。点下面的「再试一次」换一张通行证再开一次。',
+          }));
+        }
+        return remoteScreen(remoteName, h('div', { style: styles.frameBox },
+          // 重试那一次的说明条（见 REMOTE_AUTO_RETRY_TEXT）：框上面先顶一条，框照旧铺满下面。
+          // 框 load 回来那一下它就收掉（见 onLoad）。
+          remoteAutoRetry ? h('div', { style: styles.frameNote }, REMOTE_AUTO_RETRY_TEXT) : null,
+          h('div', { style: styles.frameWrap },
+            h('iframe', {
+              src: remoteUrl,
+              title: '另一台电脑的界面',
+              // 框里是另一个源，里面一个字节都读不到（量过：跨源的 contentDocument 是 null）。
+              // 所以"它回来了没有"只能靠这一下——但**502 和连不上也会照常 load**，
+              // 所以它只用来取消下面那个兜底，不用来宣布成功。
+              //
+              // **它触发的意思是"框里有一个文档了"，不是"那台电脑的界面打开了"。**
+              // 取舍（2026-10-17）：这一下必须把兜底掐掉——不清的话，一个加载好好的界面
+              // 也会在 20 秒后被一句「一直没打开」盖住（那才是用户真被伤到的那一面）。
+              // 代价（照旧没变，也**不打算靠猜去补**）：对面回一张错误页（502 之类）、或者
+              // 文档到了里面是空的，都算"回来了"，这一屏不会换成我们那句人话。
+              // 出路是顶上那枚**永远在**的「再试一次」（见 remoteScreen）。
+              onLoad: function () {
+                clearTimeout(stallTimerRef.current);
+                stallTimerRef.current = null;
+                setStalled(false);
+                // 框真的回来了：那句"正在再试一次"就该收掉（见 remoteAutoRetry）。
+                if (remoteAutoRetry) {
+                  remoteAutoRetry = false;
+                  notifyRemote();
+                }
+              },
+              style: styles.frame,
+            }))), true);
+      }
+
+      // 没在看某一台：**名单**（这一屏的第一层）。
+      var again = h('button', {
+        type: 'button',
+        onClick: function () { setTries(function (n) { return n + 1; }); },
+        style: styles.btn,
+      }, '重新读一遍');
+      return remoteListScreen(list, listError, again);
+    }
+
+    // —— 「再点一下退出远程窗口」需要的三样东西：一个能跟官方布局服务说话的把手、
+    //    「进远程窗口之前站在哪个面板」这份记忆，和「这一下点的是我们那一条」的认法。
+    //
+    // **为什么得自己接这一下**：侧栏那一行（按钮、onClick、悬停提示）是官方壳自己画的
+    // ——dsh-client-ui-sidebar 的 PanelRow，它 onClick 里调的是官方自己的 selectPanel。
+    // 我们注册的只是那一行里的**一枚图标**，拿不到那一行的点击回调。
+    // 壳没有开关式的第二态：同一个 id 再选一次就是原值写入，画面不会变——这就是
+    // 「点了没反应」的机制。所以退出那一下只能我们自己接。
+    var layoutFace = null;        // 官方布局服务 ctx.layout；壳还没装配好时是 null
+    var panelBeforeRemote = null; // 进远程窗口之前选中的面板；null = 会话视图（官方默认）
+
+    // 我们那枚图标身上的记号。认「这一条是不是我们那一条」用 DOM 认，不认标题文字
+    // ——标题是中文常量，换语言/改文案就失效了。
+    var ICON_MARK = 'data-dsh-mini-remote';
+
+    /** 记住「上一个不是远程窗口的面板」——退出时回到它。 */
+    function rememberPanel() {
+      if (!layoutFace) return;
+      var info = layoutFace.panelInfo.getSnapshot();
+      var id = info && info.activePanelId;
+      if (id !== PANEL_ID) panelBeforeRemote = id;
+    }
+
+    /**
+     * 退出远程窗口：回到进来之前那一个面板。
+     * 拿不到（那个面板的插件被关了之类）就退回会话视图——官方把 null 当「没有选中任何
+     * 全局面板」，也就是平时那一屏会话，不是别的东西。
+     */
+    function leaveRemotePanel() {
+      // 退出就把"另一台电脑"这一趟放下：下次点侧栏那一条，看到的是**名单**（这一屏的第一层）。
+      // 不放的话，隔了半天再点那一条会去开一台早就没在看的电脑。
+      if (remoteTarget || remoteWin) {
+        remoteTarget = null;
+        remoteWin = null;
+        notifyRemote();
+      }
+      if (!layoutFace) return;
+      try {
+        layoutFace.selectPanel(panelBeforeRemote);
+      } catch (err) {
+        try { layoutFace.selectPanel(null); } catch (err2) { /* 布局服务已经收摊：什么也不做 */ }
+      }
+    }
+
+    /**
+     * 「再点一下侧栏那一条」——**上一层**（2026-10-17 改）。
+     *
+     * 这一屏有两层：上面是「其他电脑」名单，下面是其中一台的界面。所以这一下：
+     *   · 人在**某一台的界面**里 → 退回**名单**（还在这一屏里，和顶上那枚「← 返回列表」同一件事）；
+     *   · 人已经在**名单**上 → 退出这一屏，回到进来之前那一屏。
+     * 一层一层退，用户不用先找到那枚按钮才出得去。
+     *
+     * **为什么不接在图标上**（2026-10-15 在真页面上量出来的）：侧栏那一条是官方壳画的，
+     * 我们在这条行里只有一枚 16×16 的图标，整行却有 252×36。点在文字「远程窗口」或
+     * 行内空白上时，点子**根本不经过图标**（元素命中测绘：文字中心底下是官方的
+     * span._panelTitle）；官方那一下又是同一个 id 原值写入，等于没动。
+     * 实测同一页里：点图标 → 退出；点文字/行中心 → 什么也不发生。用户报的就是后者。
+     *
+     * 所以听整行。挂在 document 的**捕获**阶段，是从最早的地方下手：
+     *   · 点的哪儿都在同一条路径上，文字、空白、键盘回车（click 落在按钮上）一起覆盖；
+     *   · 同一个节点上别人 stopPropagation 也拦不掉我们（stopImmediatePropagation 才会）。
+     * 只在「这一条已经是当前面板」时动手，否则原样放行，官方那一下照旧把人送进面板。
+     */
+    function onDocumentClick(e) {
+      if (!layoutFace) return;
+      var target = e.target;
+      var row = target && typeof target.closest === 'function' ? target.closest('button') : null;
+      if (!row || !row.querySelector('[' + ICON_MARK + ']')) return;   // 不是我们那一条
+      var info = layoutFace.panelInfo.getSnapshot();
+      if (!info || info.activePanelId !== PANEL_ID) return;            // 还没进去：让官方照常办
+      e.stopPropagation();                                             // 拦掉官方「又选中自己」那一下
+      // 在某一台的界面里：这一下是**退回名单**（还在这一屏里）；已经在名单上才是退出。
+      if (remoteTarget) { leaveRemoteScreen(); return; }
+      leaveRemotePanel();
+    }
+
+    /**
+     * 侧栏那排图标里的一个。侧栏把图标塞进一个正方格里，
+     * 边长由它给（props.size，展开态 16、收起态 18），选中态由它自己画在按钮上，
+     * 所以这里只管颜色跟着 currentColor 走、尺寸跟着 size 走。
+     */
+    function MiniRemoteIcon(props) {
+      var size = typeof props.size === 'number' ? props.size : 16;
+      return h('svg', {
+        width: size,
+        height: size,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg',
+        'aria-hidden': 'true',
+        focusable: 'false',
+        // 「这一条是我们的」这个记号，给退出那一下的点击判定用（见 onDocumentClick）。
+        'data-dsh-mini-remote': '1',
+      },
+        // 一块屏幕的形状（远程窗口），下面一小段底座。
+        h('rect', { x: 1.75, y: 2.75, width: 12.5, height: 8.5, rx: 2, stroke: 'currentColor', strokeWidth: 1.5 }),
+        h('path', { d: 'M6.25 13.25h3.5', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round' }),
+      );
+    }
+
     function apply(ctx) {
+      // —— 「再点一下退出」的接线：拿官方布局服务的把手，并盯住「上一个面板」。
+      // 布局服务（ctx.layout）由官方布局插件提供，不是我们依赖的槽位；照着官方插件
+      // （dsh-client-ui-approval 等地）的写法用 ctx.inject 等它就绪，就绪前回调不跑、
+      // 那两枚函数都是空操作。没有 ctx.inject 的极简假壳（比如离线校验里的那个替身）
+      // 直接跳过这一段：图标照画、照常被壳选中，只是没有「再点一次退出」。
+      if (typeof ctx.inject === 'function') {
+        ctx.inject(['layout'], function (scope) {
+          var layout = scope.layout;
+          if (!layout || !layout.panelInfo) return;
+          layoutFace = layout;
+          scope.effect(function () {
+            rememberPanel();
+            return layout.panelInfo.subscribe(rememberPanel);
+          }, 'dsh-mini-remote: 记住进入远程窗口之前的面板');
+          // 退出那一下：整条行的点击（文字、空白、键盘回车都算），只在已是当前面板时动手。
+          scope.effect(function () {
+            document.addEventListener('click', onDocumentClick, true);
+            return function () { document.removeEventListener('click', onDocumentClick, true); };
+          }, 'dsh-mini-remote: 再点一下那一条就退出远程窗口');
+        });
+      }
+
+      // —— 侧栏图标 + 中间那一屏面板，一对配套的槽位。
+      // main 是 keyed 槽：注册的键写在 `key` 上（不是 id）。官方对这种槽的示例是
+      //   ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: '…' }, Comp))
+      // 已占用的键只有 `conversation`；`mini-remote` 是新键，不顶掉任何官方界面。
+      // 两个槽都由别的插件声明（main 归 dsh-client-ui-layout、panellist 归 dsh-client-ui-sidebar），
+      // 所以照上面 settings.section 的老规矩：等声明出现再注册。
+      ctx.slots.inject('main', function () {
+        return ctx.slots.register({ name: 'main', key: PANEL_ID }, MiniRemotePanel);
+      });
+
+      // sidebar.panellist 是 list 槽：要 `id`（必需），可选 `order` 和 `label`。
+      // id 必须和 main 的 key 一模一样，侧栏点下来才找得到面板。
+      // order 让它排在官方那两枚之后（官方用 0 和 10；缺省是 0）。
+      ctx.slots.inject('sidebar.panellist', function () {
+        return ctx.slots.register(
+          {
+            name: 'sidebar.panellist',
+            id: PANEL_ID,
+            order: 20,
+            // 传函数：外壳用 resolveSlotLabel 求值（字符串也支持），跟设置页那条保持一致。
+            label: () => '远程窗口',
+          },
+          MiniRemoteIcon,
+        );
+      });
+
       // settings.section 由设置域插件声明；这里等声明出现再注册。
       ctx.slots.inject('settings.section', function () {
         return ctx.slots.register(