dsh-plugin-mobile-gateway 0.9.0 → 0.10.0

package/PROTOCOL.md

@@ -1130,7 +1130,8 @@ DSH Web 的“深度求索中，用时 22 秒 ···”是客户端文案，不
 
 | 版本 | 新增 |
 |---|---|
-| v0.9.0（当前源码） | DSH 0.2.0-rc.2 插件管理；PC 端 Cloudflare Quick / 命名 Tunnel 及独立重启；插件私有 `cloudflared` 缓存及校验；配对入口选择指引；网关重启与 DSH Web 停止工具 |
+| v0.10.0（当前源码） | 响应式居中控制面板与主题同步；自定义下拉菜单；独立配对模态窗口与缩放动画；按运行实例关闭重启提醒；在线设备折叠列表与移动端设备名称上报；Tunnel 配置交互优化 |
+| v0.9.0 | DSH 0.2.0-rc.2 插件管理；PC 端 Cloudflare Quick / 命名 Tunnel 及独立重启；插件私有 `cloudflared` 缓存及校验；配对入口选择指引；网关重启与 DSH Web 停止工具 |
 | v0.7.2 | 独立对话/控制连接；空 Session 创建；停止生成与稍后继续；排队消息同步及编辑/删除/Steer；App 归档/重命名 Session；WebUI 归档集合和名称变化实时同步到 App |
 | v0.1.5 | workspace-create / directories / host |
 | v0.1.6 | 修复消息分发器遗漏（host/directories/workspace-create 未路由） |
@@ -1234,3 +1235,7 @@ does not put file responses behind conversation frames. This isolates socket
 queues; the underlying network link and Host resources remain shared. On connection
 failure clients reconnect and authenticate both lanes, then resubscribe and catch up
 history. Older gateways without the capability continue using one connection.
+
+### 移动端设备名称
+
+移动端在 WebSocket 握手中通过 `X-DSH-Device-Name` 上报 UTF-8 设备名称的标准 Base64 编码；配对和凭据重连时均发送。网关不使用控制面板指定的名称，未上报时使用“未命名设备”。可信设备接口保留原始 `name`，并提供 `displayName`；同名设备显示编号后缀，例如“我的手机 (1)”“我的手机 (2)”。

package/README.md

@@ -10,7 +10,9 @@ DeepSeek Harness 的设备鉴权移动网关，支持会话与实时事件、排
 >
 > 实时流已改为独立 `assistant-stream` 帧，移动端需要按 [rc.2 接入说明](docs/dsh-rc2-mobile-integration.md) 更新订阅、缓存与分页处理。当前修改尚未发布。
 >
-> v0.9.0（当前源码）：新增 DSH 0.2.0-rc.2 插件管理能力；PC 端可在面板开启、重启 Cloudflare Quick / 命名 Tunnel，使用插件私有缓存中的 `cloudflared` 并校验文件；配对面板增加局域网与外网入口选择指引；工具菜单可重启网关或停止 DSH Web，重启时不再打开新标签页。
+> v0.10.0（当前源码）：移动设备面板改为响应式居中设置窗口，跟随主应用深浅色主题；统一自定义下拉菜单与连接状态高亮；配对二维码使用独立模态窗口并支持缩放进出动画；安装重启提醒可按网关运行实例关闭；可信设备默认仅显示在线设备，支持展开离线设备、移动端名称上报与同名编号；Tunnel 切换自动应用，命名配置编辑后保存。
+>
+> v0.9.0：新增 DSH 0.2.0-rc.2 插件管理能力；PC 端可在面板开启、重启 Cloudflare Quick / 命名 Tunnel，使用插件私有缓存中的 `cloudflared` 并校验文件；配对面板增加局域网与外网入口选择指引；工具菜单可重启网关或停止 DSH Web，重启时不再打开新标签页。
 >
 > v0.7.3：优化移动网关运行模式下拉框的箭头间距。
 >
@@ -200,11 +202,19 @@ Quick Tunnel 无需 Cloudflare 账户、Token 或自己的公网域名，但地
 ### Cloudflare 命名 Tunnel（固定地址）
 
 1. 在 [Cloudflare 控制台创建远程管理的 Tunnel](https://developers.cloudflare.com/tunnel/get-started/)，添加一个公开域名（例如 `gateway.example.com`），将该路由的 **Service URL** 设为 `http://127.0.0.1:3082`。无需安装 Cloudflare 系统服务，也无需开放路由器入站端口。
-2. 从 Tunnel 的「Add a replica」安装命令中复制 Token，在 DSH「移动设备 → Cloudflare Tunnel」选择「命名 Tunnel · 固定域名」，输入公开域名和 Token 后开启。插件会将网关设为常驻模式，启动本机专用入口和 `cloudflared`。面板显示「已连接 Cloudflare」后使用自动填入的 `wss://gateway.example.com/ws/mobile` 生成配对二维码。
+2. 从 Tunnel 的「Add a replica」安装命令中复制 Token，在 DSH「移动设备 → Cloudflare Tunnel」选择「命名 Tunnel · 固定域名」，输入公开域名和 Token 后开启。插件会将网关设为常驻模式，启动本机专用入口和 `cloudflared`。隧道传输连接后，面板会独立检测本机到公网入口的 DNS、TLS 和移动网关路由；检测通过后使用自动填入的 `wss://gateway.example.com/ws/mobile` 生成配对二维码。
 3. 以后启动 `dsh web` 会自动恢复已开启的 Tunnel；在面板点击「关闭 Cloudflare Tunnel」会停止插件管理的 `cloudflared` 并关闭本机专用入口。若手动关闭网关，Tunnel 会暂停，重新开启网关后恢复。
 
 两种 Cloudflare 入口都只接受 `/ws/mobile` WebSocket，其他 HTTP 路径（包括 DSH WebUI 和 `/mgw` 管理接口）返回 404；设备凭证始终必需，即使本机 Debug 鉴权被关闭也一样。命名 Tunnel 的 Token 保存在 `<deviceFile>.cloudflare.json`（默认 `~/.dsh/mobile-gateway-devices.json.cloudflare.json`），权限为 `0600`，不会返回给浏览器。默认使用 DSH 私有的 `cloudflared-bin` 缓存，不读取系统或其他 App 的 `cloudflared`；每次启动 Tunnel 都校验缓存文件，只有缓存缺失或损坏时才下载固定版本并核对 Cloudflare 官方发布资产的 SHA-256。仅在显式配置 `cloudflaredPath` 时使用外部程序。使用自定义 `cloudflarePort` 时，命名 Tunnel 路由的 Service URL 端口也要相应修改。
 
+#### 公网入口检测与状态含义
+
+`state: online` 只表示 cloudflared 已注册隧道连接，不保证公开域名、TLS 或源站路由可用。状态 API 另外提供 `endpointHealth`（状态、提示、检测时间及错误码）和 `publicReady`。面板在连接后自动检测一次，也可点击「检测公网 DNS / TLS / WebSocket」重试；该按钮调用受现有管理鉴权保护的 `POST /mgw/cloudflare/check`，不会重启隧道。
+
+检测使用本机系统 DNS 和严格证书校验的 HTTPS WebSocket 请求，不携带配对码或设备 Token，不跟随重定向。只有 HTTP 401 且移动网关回显本次随机探测标记时，才确认受鉴权保护的网关路由可达；代理或 Cloudflare Access 的普通 401 不会被当作成功。该标记只在缺少有效设备凭证的拒绝响应中回显，不授予任何访问权限。结果是一次本机网络快照，不保证手机网络、设备鉴权或会话同步成功。
+
+本机解析失败不代表公共 DNS 记录必然不存在：刚创建记录时可能仍有 NXDOMAIN 缓存，也可能受本机 DNS、VPN 或代理影响。核对公开主机名和已代理 CNAME，再稍后重试，不要关闭 TLS 校验。插件目前使用 Tunnel Token 运行远程管理的隧道，该 Token 不会自动创建域名路由或 DNS；具备额外账户授权的 cloudflared CLI / Cloudflare API 可以配置这些资源，但不属于本检测功能。
+
 ### Tailscale（推荐长期使用）
 
 1. 在电脑和 iPhone 安装 [Tailscale](https://tailscale.com/download)，并登录同一个 Tailnet。

package/lib/client.js

@@ -20,46 +20,55 @@ window.__ModuleLoader__.load({
     }
     const getOpen = () => open
 
+    // Shared Web UI / Desktop semantic tokens update with the host theme.
+    const restartNoticeStorageKey = 'mobile-gateway-dismissed-restart-notice'
+    let dismissedRestartInstance = null
+    try { dismissedRestartInstance = window.localStorage.getItem(restartNoticeStorageKey) } catch { /* storage unavailable */ }
+
     const colors = {
-      panel: 'var(--color-bg, #111318)',
-      card: 'var(--color-bg-elevated, rgba(127,127,127,.08))',
-      text: 'var(--color-text, #f4f4f5)',
-      muted: 'var(--color-text-muted, #9297a2)',
-      border: 'var(--color-border, rgba(127,127,127,.24))',
-      accent: 'var(--color-primary, #4f7cff)',
-      danger: '#dc4c64',
-      success: '#2fb171',
+      panel: 'var(--dsw-alias-bg-layer-2, var(--color-bg, Canvas))',
+      card: 'var(--dsw-alias-bg-module-platform, var(--color-bg-elevated, Canvas))',
+      text: 'var(--dsw-alias-label-primary, var(--color-text, CanvasText))',
+      muted: 'var(--dsw-alias-label-secondary, var(--color-text-muted, GrayText))',
+      border: 'var(--dsw-alias-border-l3, var(--color-border, rgba(127,127,127,.24)))',
+      accent: 'var(--dsw-alias-button-primary-fill, var(--color-primary, #4f7cff))',
+      accentText: 'var(--dsw-alias-label-primary-foreground, #fff)',
+      danger: 'var(--dsw-alias-state-error-primary, #dc4c64)',
+      success: 'var(--dsw-alias-state-success-primary, #2fb171)',
     }
     const styles = {
       backdrop: {
         position: 'fixed', inset: 0, zIndex: 1200, pointerEvents: 'auto',
-        background: 'rgba(0,0,0,.32)', display: 'flex', justifyContent: 'flex-end',
+        background: 'var(--dsw-alias-bg-mask-1, rgba(0,0,0,.32))', display: 'flex',
+        justifyContent: 'center', alignItems: 'center',
+        padding: 'max(16px, var(--dsh-frame-overlay-top, 16px)) 16px', boxSizing: 'border-box',
       },
       panel: {
-        width: 380, maxWidth: 'calc(100vw - 24px)', height: '100%', overflowY: 'auto',
+        width: 'clamp(640px, 84vw, 1120px)', maxWidth: '100%', maxHeight: '100%', minHeight: 0, height: 'min(780px, calc(100dvh - 48px))', overflow: 'hidden',
+        scrollbarWidth: 'none', msOverflowStyle: 'none',
         display: 'flex', flexDirection: 'column',
-        background: colors.panel, color: colors.text, borderLeft: `1px solid ${colors.border}`,
-        boxShadow: '-12px 0 40px rgba(0,0,0,.22)', padding: 20,
-        fontFamily: 'system-ui, sans-serif', fontSize: 13, boxSizing: 'border-box',
+        background: colors.panel, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 'var(--dsw-radius-panel, 16px)',
+        boxShadow: 'var(--dsw-elevation-prominent, 0 20px 60px rgba(0,0,0,.22))', padding: 24,
+        fontFamily: 'var(--dsw-font-family, system-ui, sans-serif)', fontSize: 13, boxSizing: 'border-box',
       },
       header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18, flexShrink: 0 },
-      title: { margin: 0, fontSize: 18, fontWeight: 650 },
-      card: { background: colors.card, border: `1px solid ${colors.border}`, borderRadius: 12, padding: 14, marginBottom: 12, flexShrink: 0 },
+      title: { margin: 0, fontSize: 22, fontWeight: 650 },
+      card: { background: 'transparent', border: 0, borderBottom: `1px solid ${colors.border}`, borderRadius: 0, padding: '16px 0', marginBottom: 0, flexShrink: 0 },
       label: { display: 'block', color: colors.muted, fontSize: 12, marginBottom: 6 },
-      input: { width: '100%', boxSizing: 'border-box', border: `1px solid ${colors.border}`, borderRadius: 8, padding: '8px 10px', marginBottom: 10, background: 'transparent', color: 'inherit', outline: 'none' },
+      input: { width: '100%', boxSizing: 'border-box', border: `1px solid ${colors.border}`, borderRadius: 10, padding: '8px 12px', marginBottom: 8, background: colors.card, color: 'inherit', outline: 'none' },
       pairingText: { width: '100%', minHeight: 86, boxSizing: 'border-box', resize: 'vertical', border: `1px solid ${colors.border}`, borderRadius: 8, padding: '9px 10px', margin: '10px 0', background: 'transparent', color: 'inherit', outline: 'none', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 11, lineHeight: 1.45, overflowWrap: 'anywhere' },
       button: { cursor: 'pointer', border: `1px solid ${colors.border}`, background: 'transparent', borderRadius: 8, padding: '7px 11px', color: 'inherit', font: 'inherit' },
-      headerButton: { width: 34, height: 34, boxSizing: 'border-box', padding: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
-      primary: { background: colors.accent, color: '#fff', borderColor: colors.accent, width: '100%' },
-      muted: { color: colors.muted, fontSize: 12, lineHeight: 1.55 },
+      headerButton: { width: 34, height: 34, boxSizing: 'border-box', border: 0, padding: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
+      primary: { background: colors.accent, color: colors.accentText, borderColor: colors.accent, width: '100%' },
+      muted: { color: colors.muted, fontSize: 12, lineHeight: 1.45 },
       row: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', columnGap: 12, alignItems: 'center', padding: '12px 0', borderBottom: `1px solid ${colors.border}` },
       badge: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, marginLeft: 8, color: colors.muted },
       dot: { width: 7, height: 7, borderRadius: 99, display: 'inline-block' },
-      error: { color: '#ff8092', background: 'rgba(220,76,100,.12)', borderRadius: 8, padding: 10, marginBottom: 12 },
+      error: { color: colors.danger, background: 'rgba(220,76,100,.12)', borderRadius: 8, padding: 10, marginBottom: 12 },
       qr: { display: 'block', width: 220, height: 220, margin: '12px auto', background: '#fff', borderRadius: 10, padding: 8 },
-      helpButton: { width: 20, height: 20, boxSizing: 'border-box', padding: 0, borderRadius: '50%', border: `1px solid ${colors.muted}`, background: 'transparent', color: colors.muted, cursor: 'help', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 600, lineHeight: 1 },
-      helpBubble: { position: 'absolute', top: '100%', left: 0, zIndex: 20, width: 'min(300px, calc(100vw - 88px))', maxHeight: 'min(440px, calc(100vh - 160px))', overflowY: 'auto', boxSizing: 'border-box', padding: 12, borderRadius: 10, border: '1px solid rgba(255,255,255,.18)', background: '#20242c', color: '#f4f4f5', boxShadow: '0 12px 28px rgba(0,0,0,.35)', fontSize: 12, lineHeight: 1.5 },
-      toolsMenu: { position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 30, width: 250, maxWidth: 'calc(100vw - 48px)', border: `1px solid ${colors.border}`, borderRadius: 10, padding: 5, background: '#20242c', boxShadow: '0 12px 28px rgba(0,0,0,.35)' },
+      helpButton: { width: 20, height: 20, boxSizing: 'border-box', padding: 0, borderRadius: '50%', border: 0, background: 'var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.1))', color: 'var(--dsw-alias-label-tertiary, #888)', cursor: 'help', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 600, lineHeight: 1 },
+      helpBubble: { position: 'absolute', top: '100%', left: 0, zIndex: 20, width: 'min(300px, calc(100vw - 88px))', maxHeight: 'min(440px, calc(100vh - 160px))', overflowY: 'auto', boxSizing: 'border-box', padding: 12, borderRadius: 10, border: `1px solid ${colors.border}`, background: colors.panel, color: colors.text, boxShadow: '0 12px 28px rgba(0,0,0,.35)', fontSize: 12, lineHeight: 1.5 },
+      toolsMenu: { position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 30, width: 250, maxWidth: 'calc(100vw - 48px)', border: `1px solid ${colors.border}`, borderRadius: 10, padding: 5, background: colors.panel, boxShadow: '0 12px 28px rgba(0,0,0,.35)' },
       toolsItem: { display: 'block', width: '100%', padding: '9px 10px', textAlign: 'left', border: 0, borderRadius: 7, background: 'transparent', color: colors.text, font: 'inherit', cursor: 'pointer' },
       switch: { position: 'relative', display: 'inline-flex', width: 42, height: 24, flexShrink: 0 },
       switchInput: { position: 'absolute', opacity: 0, width: 1, height: 1 },
@@ -68,6 +77,154 @@ window.__ModuleLoader__.load({
       version: { flexShrink: 0, marginTop: 'auto', padding: '18px 2px 0', color: colors.muted, fontSize: 11, lineHeight: 1.4, textAlign: 'right', letterSpacing: '.02em' },
     }
 
+    const panelCss = `
+      @keyframes mgw-pairing-enter {
+        from { opacity: 0; transform: scale(.82); }
+        to { opacity: 1; transform: scale(1); }
+      }
+      .mgw-pairing-dialog {
+        transform-origin: center;
+        animation: mgw-pairing-enter 240ms cubic-bezier(.2, .8, .2, 1);
+      }
+      @keyframes mgw-pairing-exit {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(.82); }
+      }
+      .mgw-pairing-dialog[data-closing="true"] {
+        animation: mgw-pairing-exit 180ms ease-in forwards;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .mgw-pairing-dialog { animation: none; }
+      }
+      .mobile-gateway-panel, .mobile-gateway-panel *, .mgw-pairing-dialog, .mgw-pairing-dialog *, .mgw-select-menu {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none;
+      }
+      .mobile-gateway-panel::-webkit-scrollbar, .mobile-gateway-panel *::-webkit-scrollbar,
+      .mgw-pairing-dialog::-webkit-scrollbar, .mgw-pairing-dialog *::-webkit-scrollbar, .mgw-select-menu::-webkit-scrollbar {
+        display: none !important;
+        width: 0;
+        height: 0;
+      }
+      .mobile-gateway-panel .mgw-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; flex: 1; min-height: 0; }
+      .mobile-gateway-panel .mgw-nav { display: flex; flex-direction: column; gap: 4px; }
+      .mobile-gateway-panel .mgw-nav button { text-align: left; border: 0; padding: 12px 14px; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+      .mobile-gateway-panel .mgw-nav button[aria-current="page"] { background: var(--dsw-alias-bg-overlay, rgba(127,127,127,.12)); font-weight: 500; }
+      .mobile-gateway-panel .mgw-nav button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.08)); }
+      .mobile-gateway-panel .mgw-content { min-width: 0; overflow-y: auto; scrollbar-width: none; padding-right: 4px; }
+      .mobile-gateway-panel .mgw-content::-webkit-scrollbar { display: none; }
+      .mobile-gateway-panel .mgw-content p { margin: 6px 0 10px; }
+      .mobile-gateway-panel strong { font-weight: 550; }
+      .mobile-gateway-panel .mgw-section-title { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 650; color: inherit; }
+      .mobile-gateway-panel .mgw-setting-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
+      .mobile-gateway-panel .mgw-setting-row select { width: auto !important; max-width: 100%; min-width: 150px; margin-bottom: 0 !important; flex-shrink: 1; }
+      .mobile-gateway-panel .mgw-cloudflare-block input, .mobile-gateway-panel .mgw-cloudflare-block .mgw-select-trigger { background: var(--dsw-alias-bg-layer-2, Canvas) !important; }
+      .mobile-gateway-panel .mgw-setting-label { font-size: 14px; font-weight: 550; color: inherit; }
+
+      .mobile-gateway-panel input:focus-visible, .mobile-gateway-panel select:focus-visible, .mobile-gateway-panel button:focus-visible { outline: 2px solid var(--dsw-alias-label-primary, currentColor); outline-offset: 2px; }
+      @media (max-width: 640px) {
+        .mobile-gateway-panel .mgw-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+        .mobile-gateway-panel .mgw-nav { flex-direction: row; }
+        .mobile-gateway-panel .mgw-nav button { flex: 1; padding: 10px 6px; text-align: center; }
+      }
+    `
+
+    function GatewaySelect({ style, children, value, onChange, disabled, ...props }) {
+      const options = React.Children.toArray(children).filter((child) => React.isValidElement(child))
+      const [menu, setMenu] = React.useState(null)
+      const [active, setActive] = React.useState(0)
+      const buttonRef = React.useRef(null)
+      const menuRef = React.useRef(null)
+      const menuId = React.useId()
+      const selected = options.find((option) => option.props.value === value)
+      const enabled = options.map((option, index) => option.props.disabled ? -1 : index).filter((index) => index >= 0)
+      const close = (restoreFocus = false) => {
+        setMenu(null)
+        if (restoreFocus) buttonRef.current?.focus()
+      }
+      const openMenu = () => {
+        if (disabled) return
+        const rect = buttonRef.current.getBoundingClientRect()
+        const computed = window.getComputedStyle(buttonRef.current)
+        const fontSize = parseFloat(computed.fontSize) || 14
+        const lineHeight = parseFloat(computed.lineHeight) || fontSize * 1.5
+        const measure = document.createElement('canvas').getContext('2d')
+        if (measure) measure.font = computed.font || `${fontSize}px sans-serif`
+        const longest = Math.max(...options.map((option) => measure
+          ? measure.measureText(String(option.props.children)).width : String(option.props.children).length * fontSize))
+        const height = Math.min(options.length * Math.max(40, lineHeight + 16) + 14, window.innerHeight - 24)
+        const width = Math.min(Math.max(rect.width, longest + 72, 200), window.innerWidth - 24)
+        setActive(Math.max(0, options.findIndex((option) => option.props.value === value && !option.props.disabled)))
+        setMenu({ left: Math.max(12, Math.min(rect.left, window.innerWidth - width - 12)),
+          top: Math.max(12, rect.bottom + height + 6 <= window.innerHeight - 12 ? rect.bottom + 6 : rect.top - height - 6), width, maxHeight: window.innerHeight - 24 })
+      }
+      const choose = (index) => {
+        const option = options[index]
+        if (!option || option.props.disabled) return
+        onChange?.({ target: { value: option.props.value } })
+        close(true)
+      }
+      React.useEffect(() => {
+        if (!menu) return
+        menuRef.current?.focus()
+        const outside = (event) => {
+          if (!buttonRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) close()
+        }
+        const scrolled = (event) => { if (!menuRef.current?.contains(event.target)) close() }
+        const resized = () => close()
+        document.addEventListener('pointerdown', outside)
+        document.addEventListener('scroll', scrolled, true)
+        window.addEventListener('resize', resized)
+        return () => {
+          document.removeEventListener('pointerdown', outside)
+          document.removeEventListener('scroll', scrolled, true)
+          window.removeEventListener('resize', resized)
+        }
+      }, [menu])
+      React.useEffect(() => {
+        if (menu) document.getElementById(`${menuId}-${active}`)?.scrollIntoView({ block: 'nearest' })
+      }, [active, menu])
+      return React.createElement('span', { style: { display: 'inline-flex', maxWidth: '100%', minWidth: 0 } },
+        React.createElement('button', { ...props, className: 'mgw-select-trigger', ref: buttonRef, type: 'button', disabled,
+          'aria-haspopup': 'listbox', 'aria-expanded': !!menu, 'aria-controls': menu ? menuId : undefined,
+          onClick: () => menu ? close() : openMenu(),
+          onKeyDown: (event) => {
+            if (['ArrowDown', 'ArrowUp'].includes(event.key)) { event.preventDefault(); openMenu() }
+          },
+          style: { ...style, width: 'auto', maxWidth: '100%', marginBottom: 0, border: 0, borderRadius: 12,
+            padding: '10px 16px', background: colors.card, color: colors.text, font: 'inherit', cursor: disabled ? 'default' : 'pointer',
+            display: 'inline-flex', alignItems: 'center', gap: 18, opacity: disabled ? .5 : 1 } },
+          React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, selected?.props.children || value),
+          React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
+            strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, style: { flexShrink: 0 } },
+            React.createElement('path', { d: 'M6 9l6 6 6-6' }))),
+        menu ? React.createElement('div', { className: 'mgw-select-menu', ref: menuRef, id: menuId, role: 'listbox', tabIndex: -1,
+          'aria-label': props['aria-label'], 'aria-activedescendant': `${menuId}-${active}`,
+          style: { ...menu, position: 'fixed', zIndex: 1250, boxSizing: 'border-box', overflowY: 'auto', padding: 6,
+            background: colors.panel, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 14,
+            boxShadow: 'var(--dsw-elevation-prominent, 0 8px 28px rgba(0,0,0,.12))', outline: 'none' },
+          onKeyDown: (event) => {
+            if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(true) }
+            else if (event.key === 'Tab') close()
+            else if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); choose(active) }
+            else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+              event.preventDefault()
+              const index = enabled.indexOf(active)
+              setActive(event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled[enabled.length - 1]
+                : enabled[(index + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length])
+            }
+          } }, options.map((option, index) => React.createElement('div', { key: option.props.value,
+            id: `${menuId}-${index}`, role: 'option', 'aria-selected': option.props.value === value, 'aria-disabled': !!option.props.disabled,
+            onPointerMove: () => { if (!option.props.disabled) setActive(index) }, onClick: () => choose(index),
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, minHeight: 40, whiteSpace: 'nowrap',
+              boxSizing: 'border-box', padding: '8px 12px', borderRadius: 8, cursor: option.props.disabled ? 'default' : 'pointer',
+              opacity: option.props.disabled ? .4 : 1, background: active === index ? 'var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.08))' : 'transparent' } },
+            React.createElement('span', { style: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }, title: String(option.props.children) }, option.props.children), option.props.value === value ? React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24',
+              fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, style: { flexShrink: 0 } },
+              React.createElement('path', { d: 'M5 12l4 4L19 6' })) : null))) : null)
+    }
+
     async function request(path, options) {
       const response = await fetch(path, { credentials: 'same-origin', ...options })
       const body = await response.json().catch(() => ({}))
@@ -99,10 +256,10 @@ window.__ModuleLoader__.load({
       const system = status.platform === 'darwin' ? 'macOS 电脑' : status.platform === 'win32' ? 'Windows 电脑' : status.platform === 'linux' ? 'Linux 服务器' : '当前设备'
       const lanReady = !!lanPairingUrl(status)
       const tunnel = status.cloudflare
-      const tunnelReady = !!(tunnel?.enabled && tunnel.state === 'online' && tunnel.publicUrl)
+      const tunnelReady = !!(tunnel?.enabled && tunnel.publicReady === true && tunnel.publicUrl)
       const serverReady = status.platform === 'linux' && !!(
         (publicSetup?.configured && publicSetup.publicUrl) || /^wss:\/\//.test(status.publicUrl || ''))
-      const detected = `当前检测：${system}；局域网入口${lanReady ? '已就绪' : '未就绪'}；${serverReady ? '公网服务器入口已配置' : tunnelReady ? `${tunnel.mode === 'quick' ? 'Quick' : '命名'} Tunnel 已连接` : tunnel?.enabled ? 'Cloudflare Tunnel 连接中' : '外网入口未连接'}。`
+      const detected = `当前检测：${system}；局域网入口${lanReady ? '已就绪' : '未就绪'}；${serverReady ? '公网服务器入口已配置' : tunnelReady ? `${tunnel.mode === 'quick' ? 'Quick' : '命名'} Tunnel 已连接` : tunnel?.enabled ? (tunnel.state === 'online' ? '隧道已连接，公网入口未验证或检测失败' : 'Cloudflare Tunnel 连接中') : '外网入口未连接'}。`
       const local = lanReady
         ? '手机与 DSH 处于可互访的同一局域网时，建议选“局域网直连”。'
         : '如果手机和 DSH 在同一局域网，先确认局域网入口已开启并监听成功。'
@@ -125,10 +282,10 @@ window.__ModuleLoader__.load({
       return React.createElement('div', { style: styles.row },
         React.createElement('div', { style: { minWidth: 0, overflow: 'hidden' } },
           React.createElement('div', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
-            device.name,
+            device.displayName || device.name,
             React.createElement('span', { style: styles.badge },
               React.createElement('span', { style: { ...styles.dot, background: device.online ? colors.success : colors.muted } }),
-              device.online ? `在线${device.connections > 1 ? ` · ${device.connections} 个连接` : ''}` : '离线')),
+              device.online ? '在线' : '离线')),
           React.createElement('div', { style: { ...styles.muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 3 } },
             device.lastSeenAt ? `最近连接：${new Date(device.lastSeenAt).toLocaleString()}` : '尚未连接')),
         React.createElement('button', {
@@ -143,7 +300,7 @@ window.__ModuleLoader__.load({
             minWidth: 54,
             opacity: revoking ? .6 : 1,
           },
-          title: `吊销 ${device.name}`,
+          title: `吊销 ${device.displayName || device.name}`,
           // Pointer-up is more reliable than click inside the shell overlay on
           // touch devices. The click handler remains for keyboard activation.
           onPointerUp: triggerRevoke,
@@ -154,8 +311,11 @@ window.__ModuleLoader__.load({
     }
 
     function DevicePanel() {
+      const [activeSection, setActiveSection] = React.useState('general')
       const [devices, setDevices] = React.useState(null)
+      const [showAllDevices, setShowAllDevices] = React.useState(false)
       const [status, setStatus] = React.useState(null)
+      const [dismissedNotice, setDismissedNotice] = React.useState(() => dismissedRestartInstance)
       const [publicUrl, setPublicUrl] = React.useState('')
       const [pairingRoute, setPairingRoute] = React.useState('auto')
       const [connectionHelpOpen, setConnectionHelpOpen] = React.useState(false)
@@ -170,8 +330,32 @@ window.__ModuleLoader__.load({
       const [cloudflareToken, setCloudflareToken] = React.useState('')
       const [cloudflareMode, setCloudflareMode] = React.useState('quick')
       const [cloudflareBusy, setCloudflareBusy] = React.useState(false)
-      const [deviceName, setDeviceName] = React.useState('iPhone')
       const [qr, setQr] = React.useState(null)
+      const pairingDialogRef = React.useRef(null)
+      const [pairingClosing, setPairingClosing] = React.useState(false)
+      const pairingCloseTimer = React.useRef(null)
+      const closePairingDialog = () => {
+        if (pairingCloseTimer.current !== null) return
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+          setQr(null)
+          return
+        }
+        setPairingClosing(true)
+        pairingCloseTimer.current = window.setTimeout(() => {
+          pairingCloseTimer.current = null
+          setQr(null)
+          setPairingClosing(false)
+        }, 180)
+      }
+      React.useEffect(() => {
+        setPairingClosing(false)
+        return () => {
+          if (pairingCloseTimer.current !== null) {
+            window.clearTimeout(pairingCloseTimer.current)
+            pairingCloseTimer.current = null
+          }
+        }
+      }, [qr])
       const [error, setError] = React.useState(null)
       const [busy, setBusy] = React.useState(false)
       const [refreshing, setRefreshing] = React.useState(false)
@@ -288,6 +472,13 @@ window.__ModuleLoader__.load({
         return () => { active = false; window.clearInterval(timer) }
       }, [refresh])
 
+      React.useEffect(() => {
+        if (!qr) return
+        const previousFocus = document.activeElement
+        pairingDialogRef.current?.querySelector('button')?.focus()
+        return () => previousFocus?.focus()
+      }, [qr])
+
       const choosePairingRoute = (route) => {
         pairingRouteRef.current = route
         setPairingRoute(route)
@@ -325,7 +516,7 @@ window.__ModuleLoader__.load({
         }
       }
 
-      const configureCloudflare = async (enabled) => {
+      const configureCloudflare = async (enabled, mode = cloudflareMode) => {
         if (cloudflareBusy) return
         setCloudflareBusy(true)
         setError(null)
@@ -334,8 +525,8 @@ window.__ModuleLoader__.load({
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ enabled, ...(enabled ? {
-              mode: cloudflareMode,
-              ...(cloudflareMode === 'named' ? { hostname: cloudflareHost, token: cloudflareToken } : {}),
+              mode,
+              ...(mode === 'named' ? { hostname: cloudflareHost, token: cloudflareToken } : {}),
             } : {}) }),
           })
           setCloudflareToken('')
@@ -352,6 +543,17 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const checkCloudflare = async () => {
+        if (cloudflareBusy) return
+        setCloudflareBusy(true)
+        setError(null)
+        try {
+          const data = await request('/mgw/cloudflare/check', { method: 'POST' })
+          setStatus((current) => ({ ...(current || {}), cloudflare: data }))
+        } catch (cause) { setError(cause.message) }
+        finally { setCloudflareBusy(false) }
+      }
+
       const restartCloudflare = async () => {
         if (cloudflareBusy) return
         setCloudflareBusy(true)
@@ -371,7 +573,7 @@ window.__ModuleLoader__.load({
       const createPairing = async (endpoint) => request('/mgw/pair', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: deviceName, publicUrl: endpoint }),
+        body: JSON.stringify({ publicUrl: endpoint }),
       })
 
       const pair = async () => {
@@ -451,7 +653,7 @@ window.__ModuleLoader__.load({
         try {
           await request(`/mgw/devices/${encodeURIComponent(device.id)}/revoke`, { method: 'POST' })
           setDevices((current) => Array.isArray(current) ? current.filter((item) => item.id !== device.id) : current)
-          setDeviceNotice(`已吊销 ${device.name}`)
+          setDeviceNotice(`已吊销 ${device.displayName || device.name}`)
           window.setTimeout(() => setDeviceNotice(null), 2200)
         } catch (cause) {
           setDeviceNoticeError(true)
@@ -468,23 +670,59 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const restartNoticeInstance = status?.gatewayInstanceId || (status?.webPid ? String(status.webPid) : null)
+      const dismissRestartNotice = () => {
+        dismissedRestartInstance = restartNoticeInstance
+        setDismissedNotice(restartNoticeInstance)
+        try { window.localStorage.setItem(restartNoticeStorageKey, restartNoticeInstance) } catch { /* keep in-memory dismissal */ }
+      }
+
+      const onlineDevices = (devices || []).filter((device) => device.online)
+      const offlineDevices = (devices || []).filter((device) => !device.online)
+      const visibleDevices = showAllDevices ? [...onlineDevices, ...offlineDevices] : onlineDevices
+
       const advice = connectionAdvice(status, publicSetup)
       const helpLine = (name, description) => React.createElement('div', { style: { marginTop: 7 } },
         React.createElement('strong', null, name), '：', description)
 
       return React.createElement('div', { style: styles.backdrop, onMouseDown: () => setOpen(false) },
-        React.createElement('aside', { style: styles.panel, onMouseDown: (event) => { event.stopPropagation(); setToolsOpen(false) }, role: 'dialog', 'aria-modal': true, 'aria-label': '移动设备管理' },
+        React.createElement('style', null, panelCss),
+        qr ? React.createElement('div', { style: { ...styles.backdrop, zIndex: 1201 },
+          onMouseDown: (event) => { event.stopPropagation(); closePairingDialog() } },
+          React.createElement('div', { className: 'mgw-pairing-dialog', 'data-closing': pairingClosing, ref: pairingDialogRef, role: 'dialog', 'aria-modal': true, 'aria-label': '设备配对二维码', tabIndex: -1,
+            style: { ...styles.panel, width: 'min(520px, 100%)', height: 'auto', overflowY: 'auto', scrollbarWidth: 'none' },
+            onMouseDown: (event) => event.stopPropagation(),
+            onKeyDown: (event) => {
+              if (event.key === 'Escape') { event.stopPropagation(); closePairingDialog() }
+              if (event.key === 'Tab') {
+                const items = [...event.currentTarget.querySelectorAll('button, textarea')]
+                const first = items[0], last = items[items.length - 1]
+                if (event.shiftKey && (document.activeElement === first || document.activeElement === event.currentTarget)) { event.preventDefault(); last?.focus() }
+                else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus() }
+              }
+            } },
+            React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end' } },
+              React.createElement('button', { type: 'button', style: { ...styles.button, ...styles.headerButton }, 'aria-label': '关闭配对窗口', onClick: closePairingDialog }, '✕')),
+          React.createElement('section', { style: { textAlign: 'center' } },
+            React.createElement('strong', null, '使用移动客户端扫码'),
+            React.createElement('img', { style: styles.qr, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qr.svg)}`, alt: '一次性设备配对二维码' }),
+            React.createElement('label', { style: { ...styles.label, textAlign: 'left' } }, 'Base64URL 配对字符串'),
+            React.createElement('textarea', { style: styles.pairingText, value: qr.qrPayload, readOnly: true, spellCheck: false, onFocus: (event) => event.target.select() }),
+            React.createElement('button', { style: { ...styles.button, width: '100%', marginBottom: 8, borderColor: pairingTokenCopied ? colors.success : colors.border, color: pairingTokenCopied ? colors.success : colors.text }, onClick: copyPairingText }, pairingTokenCopied ? '✓ 已复制' : '复制配对 Token'),
+            pairingTokenCopied ? React.createElement('div', { style: { ...styles.muted, color: colors.success, marginBottom: 8 } }, '已复制到剪贴板') : null,
+            React.createElement('div', { style: styles.muted }, `有效期至 ${new Date(qr.pairing.expiresAt).toLocaleTimeString()}；扫码成功后此二维码立即失效。`)))) : null,
+        React.createElement('aside', { className: 'mobile-gateway-panel', inert: qr ? true : undefined, 'aria-hidden': qr ? true : undefined, style: styles.panel, onMouseDown: (event) => { event.stopPropagation(); setToolsOpen(false) }, role: 'dialog', 'aria-modal': true, 'aria-label': '移动设备管理' },
           React.createElement('div', { style: styles.header },
             React.createElement('div', null,
               React.createElement('h2', { style: styles.title }, '移动设备'),
-              React.createElement('div', { style: styles.muted }, status && status.gatewayEnabled ? '移动网关已开启 · 设备鉴权生效中' : '移动网关已关闭 · 普通 WebUI 模式')),
+              React.createElement('div', { style: styles.muted }, !status ? '正在加载网关状态…' : status.gatewayEnabled ? `移动网关已开启 · ${status.requireAuth ? '设备鉴权已开启' : '本机设备鉴权已关闭'}` : '移动网关已关闭 · 普通 WebUI 模式')),
             React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
               React.createElement('div', { style: { position: 'relative' }, onMouseDown: (event) => event.stopPropagation() },
                 React.createElement('button', {
                   type: 'button', style: { ...styles.button, ...styles.headerButton, borderRadius: '50%' }, title: '工具', 'aria-label': '工具',
                   'aria-haspopup': 'menu', 'aria-expanded': toolsOpen,
                   onClick: () => setToolsOpen((value) => !value),
-                }, React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+                }, React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
                   React.createElement('path', { d: 'M10.3 2.8h3.4l.5 2.2a7.6 7.6 0 0 1 1.7.7l1.9-1.2 2.4 2.4L19 8.8c.3.5.5 1.1.7 1.7l2.2.5v3.4l-2.2.5a7.6 7.6 0 0 1-.7 1.7l1.2 1.9-2.4 2.4-1.9-1.2a7.6 7.6 0 0 1-1.7.7l-.5 2.2h-3.4l-.5-2.2a7.6 7.6 0 0 1-1.7-.7l-1.9 1.2-2.4-2.4L5 16.6a7.6 7.6 0 0 1-.7-1.7l-2.2-.5V11l2.2-.5A7.6 7.6 0 0 1 5 8.8L3.8 6.9l2.4-2.4 1.9 1.2a7.6 7.6 0 0 1 1.7-.7l.5-2.2Z' }),
                   React.createElement('circle', { cx: 12, cy: 12.7, r: 3.1 }))),
                 toolsOpen ? React.createElement('div', { style: styles.toolsMenu, role: 'menu', 'aria-label': '网关工具' },
@@ -501,22 +739,40 @@ window.__ModuleLoader__.load({
                   }, '停止 DSH Web',
                   React.createElement('span', { style: { ...styles.muted, display: 'block', marginTop: 2 } }, '结束后台进程，所有连接将断开')))
                   : null),
-              React.createElement('button', { style: { ...styles.button, ...styles.headerButton }, onClick: () => setOpen(false), 'aria-label': '关闭' }, '✕'))),
+              React.createElement('button', { style: { ...styles.button, ...styles.headerButton }, onClick: () => setOpen(false), 'aria-label': '关闭' },
+                React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.2, strokeLinecap: 'round', 'aria-hidden': true },
+                  React.createElement('path', { d: 'M6 6l12 12M18 6L6 18' }))))),
+          React.createElement('div', { className: 'mgw-body' },
+            React.createElement('nav', { className: 'mgw-nav', 'aria-label': '移动网关设置分组' },
+              [['general', '通用设置'], ['pairing', '连接与配对'], ['devices', '可信设备']].map(([id, label]) =>
+                React.createElement('button', { key: id, type: 'button', 'aria-current': activeSection === id ? 'page' : undefined,
+                  onClick: () => { setActiveSection(id); setConnectionHelpOpen(false); setToolsOpen(false) } }, label))),
+            React.createElement('div', { className: 'mgw-content', key: activeSection },
+          restartNoticeInstance && dismissedNotice !== restartNoticeInstance ? React.createElement('section', { style: { ...styles.card, position: 'relative', padding: '10px 40px 10px 12px', border: '1px solid', borderRadius: 10, marginBottom: 8, background: 'var(--dsw-alias-state-warn-tertiary, #fff7df)', borderColor: 'color-mix(in srgb, #d99a16 35%, transparent)', fontSize: 12, lineHeight: 1.6 }, role: 'note' },
+            React.createElement('button', { type: 'button', 'aria-label': '关闭重启提醒', title: '关闭提醒',
+              style: { ...styles.button, position: 'absolute', right: 8, top: 8, border: 0, width: 24, height: 24, padding: 0, color: colors.muted },
+              onClick: dismissRestartNotice }, '✕'),
+            React.createElement('strong', null, '若安装或更新后连接异常，请重启应用'),
+            React.createElement('div', { style: { color: colors.muted, marginTop: 4 } },
+              '完全退出并重启 APP／Desktop；Web UI 请重启 DSH Web 服务。'),
+            React.createElement('div', { style: { color: colors.muted, marginTop: 4 } },
+              '端口仍被占用时，请关闭其他 Harness 实例。')) : null,
           toolNotice ? React.createElement('div', { style: { ...styles.muted, marginBottom: 10 } }, toolNotice) : null,
           error ? React.createElement('div', { style: styles.error }, error) : null,
+          React.createElement('div', { hidden: activeSection !== 'general' },
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'center' } },
               React.createElement('div', null,
                 React.createElement('strong', null, '网关运行模式'),
                 React.createElement('div', { style: { ...styles.muted, marginTop: 4 } }, status && status.gatewayEnabled
                   ? status.gatewayMode === 'persistent'
-                    ? '常驻开启，重启后保持；无需设备在线'
+                    ? '重启后保持开启'
                     : status.waitExpiresAt
                       ? `等待可信设备连接，约 ${Math.max(1, Math.ceil((status.waitExpiresAt - Date.now()) / 60000))} 分钟后自动关闭`
                       : '设备已连接过，本次运行保持开启；重启后重新计时'
-                  : '关闭时不会接受移动设备连接，重启后保持关闭')),
+                  : '不接受移动设备连接')),
               React.createElement('span', { style: { position: 'relative', display: 'inline-flex', flexShrink: 0 } },
-                React.createElement('select', {
+                React.createElement(GatewaySelect, {
                   style: { ...styles.input, width: 'auto', marginBottom: 0, padding: '8px 40px 8px 12px', appearance: 'none', WebkitAppearance: 'none' },
                   'aria-label': '网关运行模式',
                   value: status ? status.gatewayMode || (status.gatewayEnabled ? 'temporary' : 'disabled') : 'disabled',
@@ -526,16 +782,9 @@ window.__ModuleLoader__.load({
                 React.createElement('option', { value: 'disabled' }, '关闭'),
                 React.createElement('option', { value: 'temporary' }, '临时开启'),
                 React.createElement('option', { value: 'persistent' }, '常驻开启')),
-                React.createElement('span', {
-                  'aria-hidden': true,
-                  style: {
-                    position: 'absolute', right: 15, top: '50%', width: 7, height: 7,
-                    borderRight: `1.5px solid ${colors.text}`, borderBottom: `1.5px solid ${colors.text}`,
-                    transform: 'translateY(-65%) rotate(45deg)', pointerEvents: 'none',
-                  },
-                }))),
+              )),
             status && status.gatewayId ? React.createElement('div', { style: { ...styles.muted, marginTop: 12, overflowWrap: 'anywhere' } },
-              `${status.gatewayName} · ${status.gatewayId}`) : null),
+              status.gatewayName) : null),
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'center' } },
               React.createElement('div', null,
@@ -557,39 +806,115 @@ window.__ModuleLoader__.load({
             status && !status.requireAuth
               ? React.createElement('p', { style: { ...styles.error, margin: '12px 0 0' } }, 'Debug 模式：本机 DSH 入口将跳过设备凭证校验；独立局域网入口仍强制鉴权。')
               : null),
-          status && status.cloudflare && status.cloudflare.supported
-            ? React.createElement('section', { style: styles.card },
-                React.createElement('strong', null, 'Cloudflare Tunnel · PC 外网接入'),
-                React.createElement('p', { style: styles.muted }, '首次开启时自动下载并校验 cloudflared；公网入口只接受已鉴权的移动 WebSocket。'),
-                React.createElement('label', { style: styles.label }, '接入方式'),
-                React.createElement('select', { style: styles.input, value: cloudflareMode, onChange: (event) => setCloudflareMode(event.target.value), disabled: cloudflareBusy },
+          ),
+          React.createElement('div', { hidden: activeSection !== 'pairing' },
+          React.createElement('section', { style: styles.card },
+            React.createElement('div', { className: 'mgw-setting-row' },
+            React.createElement('div', { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }, onMouseLeave: () => setConnectionHelpOpen(false) },
+              React.createElement('h3', { className: 'mgw-section-title', style: { marginBottom: 0 } }, '配对连接方式'),
+              React.createElement('button', {
+                type: 'button',
+                style: styles.helpButton,
+                'aria-label': '连接方式说明与场景建议',
+                'aria-expanded': connectionHelpOpen,
+                'aria-describedby': connectionHelpOpen ? 'mgw-route-help' : undefined,
+                onMouseEnter: () => setConnectionHelpOpen(true),
+                onFocus: () => setConnectionHelpOpen(true),
+                onBlur: () => setConnectionHelpOpen(false),
+                onClick: () => setConnectionHelpOpen(true),
+                onKeyDown: (event) => { if (event.key === 'Escape') setConnectionHelpOpen(false) },
+              }, '?'),
+              connectionHelpOpen ? React.createElement('div', { id: 'mgw-route-help', role: 'tooltip', style: styles.helpBubble },
+                React.createElement('strong', null, '怎么选连接方式'),
+                helpLine('局域网直连', '手机与 DSH 在同一个可互访的局域网，使用 ws:// 私有地址；离开该网络就无法直连。'),
+                helpLine('Cloudflare Channel（命名 Tunnel）', 'PC 主动连接 Cloudflare，外网用固定域名的 wss://；需要 Cloudflare 账户和域名。'),
+                helpLine('Quick Channel（Quick Tunnel）', '无需账户或域名，Cloudflare 分配临时 wss:// 地址；隧道重建后地址可能变化。'),
+                helpLine('公网服务器连接', 'DSH 运行在有固定公网 IPv4 的 Linux 服务器上，配置公网入口后用 wss:// 公网 IP 连接。'),
+                React.createElement('div', { style: { borderTop: `1px solid ${colors.border}`, marginTop: 10, paddingTop: 8 } },
+                  React.createElement('strong', null, '结合当前环境'),
+                  React.createElement('div', { style: { color: colors.muted, marginTop: 4 } }, advice.detected),
+                  React.createElement('div', { style: { marginTop: 6 } }, advice.local),
+                  React.createElement('div', { style: { marginTop: 6 } }, advice.remote),
+                  React.createElement('div', { style: { color: colors.muted, marginTop: 6 } }, '面板无法判断手机当前网络；请按手机所在位置选择，提示不会替你修改选择。')))
+                : null),
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px 14px', maxWidth: '100%' } },
+            React.createElement(GatewaySelect, { style: styles.input, value: pairingRoute, onChange: (event) => choosePairingRoute(event.target.value), disabled: !status, 'aria-label': '配对连接方式' },
+              React.createElement('option', { value: 'auto' }, '自动选择 · 优先外网'),
+              lanPairingUrl(status) || pairingRoute === 'lan'
+                ? React.createElement('option', { value: 'lan', disabled: !lanPairingUrl(status) }, lanPairingUrl(status)
+                  ? '局域网直连'
+                  : '局域网直连 · 当前不可用')
+                : null,
+              status?.cloudflare?.enabled ? React.createElement('option', { value: 'cloudflare' }, 'Cloudflare 外网') : null,
+              React.createElement('option', { value: 'custom' }, '手动输入地址')),
+              (pairingRoute === 'auto' || pairingRoute === 'cloudflare') && status?.cloudflare?.supported
+                ? React.createElement('span', { style: { fontSize: 12, lineHeight: 1.5, fontWeight: 500,
+                    color: 'var(--dsw-alias-link, #4176e6)' } }, '外网使用 Cloudflare Tunnel 进行连接，请在下方进行设置。') : null)),
+            React.createElement('label', { style: styles.label }, 'WebSocket 地址'),
+            React.createElement('input', { style: styles.input, value: publicUrl, onChange: (event) => { choosePairingRoute('custom'); setPublicUrl(event.target.value) }, placeholder: 'ws://192.168.1.10:3081/ws/mobile', spellCheck: false }),
+            status && status.lan && status.lan.enabled
+              ? React.createElement('div', { style: { ...styles.muted, margin: '-7px 0 10px', fontWeight: 500, color: status.lan.error ? colors.danger : status.lan.listening ? colors.success : 'var(--dsw-alias-link, #4176e6)' } },
+                  status.lan.error
+                    ? `局域网监听失败：${status.lan.error}`
+                    : status.lan.listening
+                      ? `局域网入口已开启${status.lan.urls && status.lan.urls.length ? `：${status.lan.urls.join('、')}` : `，端口 ${status.lan.port}`}`
+                      : '局域网入口启动中…')
+              : null,
+            React.createElement('button', {
+              style: { ...styles.button, ...styles.primary, opacity: busy || !(status && status.gatewayEnabled) || !publicUrl.trim() ? .65 : 1 },
+              disabled: busy || !(status && status.gatewayEnabled) || !publicUrl.trim(),
+              onClick: pair,
+            }, busy ? '正在生成…' : !(status && status.gatewayEnabled) ? '请先开启移动网关' : !publicUrl.trim() ? '等待连接地址' : '生成配对二维码'),
+            React.createElement('p', { style: { ...styles.muted, margin: '10px 0 0' } }, '配对码仅可使用一次，5 分钟内有效。')),
+          (pairingRoute === 'auto' || pairingRoute === 'cloudflare') && status?.cloudflare?.supported
+            ? React.createElement('section', { className: 'mgw-cloudflare-block', style: { ...styles.card, background: colors.card, border: 0, borderRadius: 16, padding: 18, marginTop: 16 } },
+                React.createElement('h3', { className: 'mgw-section-title' }, 'Cloudflare Tunnel · 外网接入'),
+                React.createElement('p', { style: styles.muted }, '首次开启自动准备 Tunnel 组件。'),
+                React.createElement('div', { className: 'mgw-setting-row' },
+                React.createElement('span', { className: 'mgw-setting-label' }, '接入方式'),
+                React.createElement(GatewaySelect, { style: styles.input, value: cloudflareMode, 'aria-label': 'Cloudflare 接入方式', onChange: (event) => {
+                    const mode = event.target.value
+                    setCloudflareMode(mode)
+                    if (status.cloudflare.enabled && mode !== status.cloudflare.mode &&
+                        (mode === 'quick' || (status.cloudflare.configured && cloudflareHost === status.cloudflare.hostname && !cloudflareToken))) {
+                      void configureCloudflare(true, mode)
+                    }
+                  }, disabled: cloudflareBusy },
                   React.createElement('option', { value: 'quick' }, 'Quick Tunnel · 无需域名'),
-                  React.createElement('option', { value: 'named' }, '命名 Tunnel · 固定域名')),
+                  React.createElement('option', { value: 'named' }, '命名 Tunnel · 固定域名'))),
                 cloudflareMode === 'quick'
-                  ? React.createElement('p', { style: styles.muted }, 'Cloudflare 会分配随机地址；DSH 重启或隧道重连后地址可能改变，手机需重新扫码确认新地址。适合临时使用。')
+                  ? React.createElement('p', { style: styles.muted }, '临时地址可能变化，变化后需重新扫码。')
                   : React.createElement(React.Fragment, null,
-                      React.createElement('p', { style: styles.muted }, '先在 Cloudflare 创建命名 Tunnel，把公开域名的 Service URL 设为 ', React.createElement('code', null, `http://127.0.0.1:${status.cloudflare.port}`), '。'),
+                      React.createElement('p', { style: styles.muted }, '先在 Cloudflare 创建命名 Tunnel，把公开域名的 Service URL 设为 ', React.createElement('code', null, `http://127.0.0.1:${status.cloudflare.port}`), '。Tunnel Token 仅授权连接，不能自动创建公开主机名或 DNS；还需确认域名存在指向 Tunnel UUID.cfargotunnel.com 的已代理 CNAME 记录。'),
                       React.createElement('label', { style: styles.label }, '公开域名'),
                       React.createElement('input', { style: styles.input, value: cloudflareHost, onChange: (event) => setCloudflareHost(event.target.value.trim()), placeholder: 'gateway.example.com', spellCheck: false }),
                       React.createElement('label', { style: styles.label }, 'Tunnel Token'),
                       React.createElement('input', { style: styles.input, type: 'password', value: cloudflareToken, onChange: (event) => setCloudflareToken(event.target.value.trim()), placeholder: status.cloudflare.configured ? '已保存；留空则保持原 Token' : '粘贴 eyJ… Token', autoComplete: 'off', spellCheck: false })),
-                React.createElement('button', {
+                (!status.cloudflare.enabled || (cloudflareMode === 'named' &&
+                  (status.cloudflare.mode !== 'named' || cloudflareHost !== status.cloudflare.hostname || !!cloudflareToken)))
+                  ? React.createElement('button', {
                   style: { ...styles.button, ...styles.primary, opacity: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))) ? .65 : 1 },
                   disabled: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))),
                   onClick: () => configureCloudflare(true),
-                }, cloudflareBusy ? '正在处理…' : status.cloudflare.enabled && cloudflareMode === status.cloudflare.mode ? '更新 Tunnel 配置' : cloudflareMode === 'quick' ? '一键开启 Quick Tunnel' : '开启命名 Tunnel'),
+                }, cloudflareBusy ? '正在处理…' : status.cloudflare.enabled ? '保存并连接' : cloudflareMode === 'quick' ? '一键开启 Quick Tunnel' : '开启命名 Tunnel') : null,
                 status.cloudflare.enabled
                   ? React.createElement(React.Fragment, null,
+                      React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy || status.cloudflare.state !== 'online', onClick: checkCloudflare }, '检测公网 DNS / TLS / WebSocket'),
                       React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy || !status.gatewayEnabled, onClick: restartCloudflare }, '重启 Tunnel'),
                       React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy, onClick: () => configureCloudflare(false) }, '关闭 Cloudflare Tunnel'),
-                      React.createElement('p', { style: styles.muted }, '重启会短暂断开手机连接；Quick Tunnel 可能获得新地址，需要重新扫码。'))
+                      React.createElement('p', { style: styles.muted }, '重启会短暂断开连接。'))
                   : null,
-                React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere', color: status.cloudflare.error ? colors.danger : colors.muted } },
-                  status.cloudflare.error || ({ disabled: '未开启', starting: '正在启动本机入口…', preparing: '正在准备 cloudflared（首次需下载）…', connecting: '正在连接 Cloudflare…', online: '已连接 Cloudflare', 'waiting-for-gateway': '等待移动网关开启' }[status.cloudflare.state] || status.cloudflare.state),
-                  status.cloudflare.publicUrl ? ` · ${status.cloudflare.publicUrl}` : ''))
+                React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere', fontWeight: 500, color: status.cloudflare.error ? colors.danger : status.cloudflare.state === 'online' ? colors.success : ['starting', 'preparing', 'connecting'].includes(status.cloudflare.state) ? 'var(--dsw-alias-link, #4176e6)' : colors.muted } },
+                  status.cloudflare.error || ({ disabled: '未开启', starting: '正在启动本机入口…', preparing: '正在准备 cloudflared（首次需下载）…', connecting: '正在连接 Cloudflare…', online: '隧道传输已连接（不等于公网入口可达）', 'waiting-for-gateway': '等待移动网关开启' }[status.cloudflare.state] || status.cloudflare.state),
+                  status.cloudflare.publicUrl ? ` · ${status.cloudflare.publicUrl}` : ''),
+                 status.cloudflare.enabled && status.cloudflare.endpointHealth
+                   ? React.createElement('p', { style: { ...styles.muted, overflowWrap: 'anywhere', fontWeight: 500, color: status.cloudflare.endpointHealth.state === 'reachable' ? colors.success : status.cloudflare.endpointHealth.state === 'checking' ? 'var(--dsw-alias-link, #4176e6)' : status.cloudflare.endpointHealth.state === 'unchecked' ? colors.muted : colors.danger } },
+                       status.cloudflare.endpointHealth.message,
+                       status.cloudflare.endpointHealth.checkedAt ? `（检测时间：${status.cloudflare.endpointHealth.checkedAt}）` : '')
+                   : null)
               : null,
           status && status.platform === 'linux' ? React.createElement('section', { style: styles.card },
-            React.createElement('strong', null, '公网接入'),
+            React.createElement('h3', { className: 'mgw-section-title' }, '公网接入'),
             publicSetup === null
               ? React.createElement('p', { style: styles.muted }, '正在检查系统组件…')
               : publicSetup.installed
@@ -619,72 +944,12 @@ window.__ModuleLoader__.load({
                 : React.createElement(React.Fragment, null,
                     React.createElement('p', { style: { ...styles.muted, marginBottom: 8 } }, '尚未安装系统 Helper。请在服务器执行一次初始化：'),
                     React.createElement('code', { style: { display: 'block', fontSize: 10, lineHeight: 1.5, overflowWrap: 'anywhere', userSelect: 'all' } }, 'npx --yes dsh-plugin-mobile-gateway@latest init'))) : null,
-          React.createElement('section', { style: styles.card },
-            React.createElement('div', { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }, onMouseLeave: () => setConnectionHelpOpen(false) },
-              React.createElement('span', { style: { ...styles.label, marginBottom: 0 } }, '配对连接方式'),
-              React.createElement('button', {
-                type: 'button',
-                style: styles.helpButton,
-                'aria-label': '连接方式说明与场景建议',
-                'aria-expanded': connectionHelpOpen,
-                'aria-describedby': connectionHelpOpen ? 'mgw-route-help' : undefined,
-                onMouseEnter: () => setConnectionHelpOpen(true),
-                onFocus: () => setConnectionHelpOpen(true),
-                onBlur: () => setConnectionHelpOpen(false),
-                onClick: () => setConnectionHelpOpen(true),
-                onKeyDown: (event) => { if (event.key === 'Escape') setConnectionHelpOpen(false) },
-              }, '?'),
-              connectionHelpOpen ? React.createElement('div', { id: 'mgw-route-help', role: 'tooltip', style: styles.helpBubble },
-                React.createElement('strong', null, '怎么选连接方式'),
-                helpLine('局域网直连', '手机与 DSH 在同一个可互访的局域网，使用 ws:// 私有地址；离开该网络就无法直连。'),
-                helpLine('Cloudflare Channel（命名 Tunnel）', 'PC 主动连接 Cloudflare，外网用固定域名的 wss://；需要 Cloudflare 账户和域名。'),
-                helpLine('Quick Channel（Quick Tunnel）', '无需账户或域名，Cloudflare 分配临时 wss:// 地址；隧道重建后地址可能变化。'),
-                helpLine('公网服务器连接', 'DSH 运行在有固定公网 IPv4 的 Linux 服务器上，配置公网入口后用 wss:// 公网 IP 连接。'),
-                React.createElement('div', { style: { borderTop: '1px solid rgba(255,255,255,.18)', marginTop: 10, paddingTop: 8 } },
-                  React.createElement('strong', null, '结合当前环境'),
-                  React.createElement('div', { style: { color: '#c6cbd4', marginTop: 4 } }, advice.detected),
-                  React.createElement('div', { style: { marginTop: 6 } }, advice.local),
-                  React.createElement('div', { style: { marginTop: 6 } }, advice.remote),
-                  React.createElement('div', { style: { color: '#aeb6c3', marginTop: 6 } }, '面板无法判断手机当前网络；请按手机所在位置选择，提示不会替你修改选择。')))
-                : null),
-            React.createElement('select', { style: styles.input, value: pairingRoute, onChange: (event) => choosePairingRoute(event.target.value), disabled: !status, 'aria-label': '配对连接方式' },
-              React.createElement('option', { value: 'auto' }, '自动选择 · 优先外网'),
-              lanPairingUrl(status) || pairingRoute === 'lan'
-                ? React.createElement('option', { value: 'lan', disabled: !lanPairingUrl(status) }, lanPairingUrl(status)
-                  ? '局域网直连 · ' + lanPairingUrl(status).replace(/^wss?:\/\//, '').split('/')[0]
-                  : '局域网直连 · 当前不可用')
-                : null,
-              status?.cloudflare?.enabled ? React.createElement('option', { value: 'cloudflare' }, 'Cloudflare 外网') : null,
-              React.createElement('option', { value: 'custom' }, '手动输入地址')),
-            React.createElement('label', { style: styles.label }, 'WebSocket 地址'),
-            React.createElement('input', { style: styles.input, value: publicUrl, onChange: (event) => { choosePairingRoute('custom'); setPublicUrl(event.target.value) }, placeholder: 'ws://192.168.1.10:3081/ws/mobile', spellCheck: false }),
-            status && status.lan && status.lan.enabled
-              ? React.createElement('div', { style: { ...styles.muted, margin: '-7px 0 10px', color: status.lan.error ? colors.danger : colors.muted } },
-                  status.lan.error
-                    ? `局域网监听失败：${status.lan.error}`
-                    : status.lan.listening
-                      ? `局域网入口已开启${status.lan.urls && status.lan.urls.length ? `：${status.lan.urls.join('、')}` : `，端口 ${status.lan.port}`}`
-                      : '局域网入口启动中…')
-              : null,
-            React.createElement('label', { style: styles.label }, '设备名称'),
-            React.createElement('input', { style: styles.input, value: deviceName, onChange: (event) => setDeviceName(event.target.value), maxLength: 80, placeholder: 'iPhone' }),
-            React.createElement('button', {
-              style: { ...styles.button, ...styles.primary, opacity: busy || !(status && status.gatewayEnabled) || !publicUrl.trim() ? .65 : 1 },
-              disabled: busy || !(status && status.gatewayEnabled) || !publicUrl.trim(),
-              onClick: pair,
-            }, busy ? '正在生成…' : !(status && status.gatewayEnabled) ? '请先开启移动网关' : !publicUrl.trim() ? '等待连接地址' : '生成配对二维码'),
-            React.createElement('p', { style: { ...styles.muted, margin: '10px 0 0' } }, '同一局域网选择“局域网直连”，无需关闭 Cloudflare Tunnel。局域网使用私有地址的 ws://；公网地址必须使用 wss://。配对码只能使用一次，并在 5 分钟内过期。')),
-          qr ? React.createElement('section', { style: { ...styles.card, textAlign: 'center' } },
-            React.createElement('strong', null, '使用 iOS 客户端扫码'),
-            React.createElement('img', { style: styles.qr, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qr.svg)}`, alt: '一次性设备配对二维码' }),
-            React.createElement('label', { style: { ...styles.label, textAlign: 'left' } }, 'Base64URL 配对字符串'),
-            React.createElement('textarea', { style: styles.pairingText, value: qr.qrPayload, readOnly: true, spellCheck: false, onFocus: (event) => event.target.select() }),
-            React.createElement('button', { style: { ...styles.button, width: '100%', marginBottom: 8, borderColor: pairingTokenCopied ? colors.success : colors.border, color: pairingTokenCopied ? colors.success : colors.text }, onClick: copyPairingText }, pairingTokenCopied ? '✓ 已复制' : '复制配对 Token'),
-            pairingTokenCopied ? React.createElement('div', { style: { ...styles.muted, color: colors.success, marginBottom: 8 } }, '已复制到剪贴板') : null,
-            React.createElement('div', { style: styles.muted }, `有效期至 ${new Date(qr.pairing.expiresAt).toLocaleTimeString()}；扫码成功后此二维码立即失效。`)) : null,
+
+          ),
+          React.createElement('div', { hidden: activeSection !== 'devices' },
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-              React.createElement('strong', null, '可信设备'),
+              React.createElement('h3', { className: 'mgw-section-title', style: { marginBottom: 0 } }, '可信设备'),
               React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
                 deviceNotice || refreshNotice ? React.createElement('span', {
                   style: { ...styles.muted, color: deviceNoticeError ? colors.danger : colors.success },
@@ -698,12 +963,22 @@ window.__ModuleLoader__.load({
               ? React.createElement('p', { style: styles.muted }, '加载中…')
               : devices.length === 0
                 ? React.createElement('p', { style: styles.muted }, '暂无已配对设备。')
-                : devices.map((device) => React.createElement(DeviceRow, {
+                : React.createElement(React.Fragment, null,
+                  visibleDevices.length === 0 ? React.createElement('p', { style: styles.muted }, '当前没有在线设备。') : null,
+                  visibleDevices.map((device) => React.createElement(DeviceRow, {
                     key: device.id,
                     device,
                     onRevoke: revoke,
                     revoking: revokingIds.has(device.id),
-                  }))),
+                  })),
+                  offlineDevices.length > 0 ? React.createElement('button', {
+                    type: 'button',
+                    style: { ...styles.button, marginTop: 10, color: colors.muted },
+                    'aria-expanded': showAllDevices,
+                    onClick: () => setShowAllDevices((value) => !value),
+                  }, showAllDevices ? '收起离线设备' : `展开其他已配对设备（${offlineDevices.length}）`) : null)),
+          )),
+          ),
           status && status.version
             ? React.createElement('div', { style: styles.version, 'aria-label': `插件版本 ${status.version}` }, `v${status.version}`)
             : null))

package/lib/cloudflare-tunnel.mjs

@@ -4,6 +4,7 @@ import path from 'node:path'
 import crypto from 'node:crypto'
 import { spawn } from 'node:child_process'
 import { ensureCloudflared } from './cloudflared-binary.mjs'
+import { checkPublicEndpoint } from './public-endpoint-check.mjs'
 
 function hostnameOf(value) {
   if (typeof value !== 'string') throw new TypeError('Cloudflare hostname is required')
@@ -61,7 +62,7 @@ function writeState(file, value) {
 // Cloudflare can never reach the DSH WebUI or the /mgw management API through it.
 export function createCloudflareTunnel({ file, port = 3082, wsPath, executable = 'cloudflared',
   supported = true, isGatewayEnabled, onUpgrade, log = () => {}, spawnProcess = spawn,
-  prepareExecutable = ensureCloudflared }) {
+  prepareExecutable = ensureCloudflared, probeEndpoint = checkPublicEndpoint }) {
   let settings = supported ? readState(file) : { version: 1, enabled: false, mode: 'quick', hostname: '', token: '' }
   let server = null
   let child = null
@@ -73,6 +74,22 @@ export function createCloudflareTunnel({ file, port = 3082, wsPath, executable =
   let quickUrl = null
   let queue = Promise.resolve()
   const sockets = new Set()
+  let endpointHealth = { state: 'unchecked', message: '尚未检测公网 DNS、TLS 和 WebSocket 路由。' }
+  let healthGeneration = 0
+  let healthPending = null
+  const checkEndpoint = () => {
+    const endpoint = publicUrl()
+    if (!shouldRun() || !endpoint || phase !== 'online') return Promise.resolve(snapshot())
+    if (healthPending) return healthPending
+    const generation = healthGeneration
+    endpointHealth = { state: 'checking', message: '正在检测公网 DNS、TLS 和 WebSocket 路由…' }
+    const pending = Promise.resolve().then(() => probeEndpoint(endpoint)).catch(() => ({ state: 'network-error', message: '公网检测失败，请稍后重试。', checkedAt: new Date().toISOString() })).then((health) => {
+      if (generation === healthGeneration) endpointHealth = health
+      return snapshot()
+    }).finally(() => { if (healthPending === pending) healthPending = null })
+    healthPending = pending
+    return pending
+  }
 
   const shouldRun = () => supported && !disposed && settings.enabled && isGatewayEnabled()
   const publicUrl = () => settings.mode === 'quick'
@@ -88,9 +105,14 @@ export function createCloudflareTunnel({ file, port = 3082, wsPath, executable =
     port,
     state: !settings.enabled ? 'disabled' : !isGatewayEnabled() ? 'waiting-for-gateway' : phase,
     error,
+    endpointHealth,
+    publicReady: phase === 'online' && shouldRun() && endpointHealth.state === 'reachable',
   })
 
   const stop = async () => {
+    healthGeneration += 1
+    healthPending = null
+    endpointHealth = { state: 'unchecked', message: '尚未检测公网 DNS、TLS 和 WebSocket 路由。' }
     if (retryTimer) clearTimeout(retryTimer)
     retryTimer = null
     const previous = child
@@ -147,8 +169,10 @@ export function createCloudflareTunnel({ file, port = 3082, wsPath, executable =
               .replace(/eyJ[A-Za-z0-9._=-]+/g, '[redacted]').trim().slice(-500)
           }
           if (registered && (!quick || quickUrl)) {
+            const firstOnline = phase !== 'online'
             phase = 'online'
             error = null
+            if (firstOnline) void checkEndpoint()
           }
         }
         running.stderr?.on('data', onOutput)
@@ -156,6 +180,9 @@ export function createCloudflareTunnel({ file, port = 3082, wsPath, executable =
         const exited = (reason) => {
           if (child !== running) return
           child = null
+          healthGeneration += 1
+          healthPending = null
+          endpointHealth = { state: 'unchecked', message: '隧道已断开，需重新检测公网入口。' }
           quickUrl = null
           phase = 'error'
           error = reason || diagnostics || 'cloudflared exited unexpectedly'
@@ -278,5 +305,5 @@ export function createCloudflareTunnel({ file, port = 3082, wsPath, executable =
   }
 
   const dispose = () => { disposed = true; void stop() }
-  return { snapshot, configure, reconcile, restart, dispose }
+  return { snapshot, configure, reconcile, restart, checkEndpoint, dispose }
 }

package/lib/devices.js

@@ -99,9 +99,18 @@ function createRegistry(file, options = {}) {
 
   return {
     list() {
-      return devices
-        .filter((device) => !device.revokedAt)
-        .map((device) => publicDevice(device, online.get(device.id) || 0))
+      const active = devices.filter((device) => !device.revokedAt)
+      const counts = new Map()
+      const indices = new Map()
+      for (const device of active) counts.set(device.name, (counts.get(device.name) || 0) + 1)
+      return active.map((device) => {
+        const index = (indices.get(device.name) || 0) + 1
+        indices.set(device.name, index)
+        return {
+          ...publicDevice(device, online.get(device.id) || 0),
+          displayName: counts.get(device.name) > 1 ? `${device.name} (${index})` : device.name,
+        }
+      })
     },
 
     count() {
@@ -125,7 +134,7 @@ function createRegistry(file, options = {}) {
       return typeof code === 'string' && pairings.has(digest(code))
     },
 
-    claimPairing(code, clientDeviceId) {
+    claimPairing(code, clientDeviceId, clientDeviceName) {
       prunePairings()
       if (typeof code !== 'string' || code === '') return undefined
       const codeHash = digest(code)
@@ -143,13 +152,13 @@ function createRegistry(file, options = {}) {
         // A valid one-time pairing code authorizes credential rotation. Keep
         // the stable server-side device record while replacing its token, so
         // re-pairing one iOS installation never creates duplicate rows.
-        device.name = pairing.name
+        device.name = typeof clientDeviceName === 'string' && clientDeviceName.trim() ? clientDeviceName.trim().slice(0, 80) : '未命名设备'
         device.tokenHash = digest(token)
         device.clientDeviceId = normalizedClientDeviceId
       } else {
         device = {
           id: pairing.id,
-          name: pairing.name,
+          name: typeof clientDeviceName === 'string' && clientDeviceName.trim() ? clientDeviceName.trim().slice(0, 80) : '未命名设备',
           clientDeviceId: normalizedClientDeviceId,
           tokenHash: digest(token),
           createdAt: Date.now(),
@@ -162,7 +171,7 @@ function createRegistry(file, options = {}) {
       return { device: publicDevice(device, 0), token }
     },
 
-    authenticate(token, clientDeviceId) {
+    authenticate(token, clientDeviceId, clientDeviceName) {
       if (typeof token !== 'string' || token === '') return undefined
       const tokenHash = digest(token)
       const device = devices.find((candidate) => !candidate.revokedAt && safeEqualHex(candidate.tokenHash, tokenHash))
@@ -177,6 +186,13 @@ function createRegistry(file, options = {}) {
           save()
         }
       }
+      if (device && typeof clientDeviceName === 'string' && clientDeviceName.trim()) {
+        const name = clientDeviceName.trim().slice(0, 80)
+        if (device.name !== name) {
+          device.name = name
+          save()
+        }
+      }
       return device ? publicDevice(device, online.get(device.id) || 0) : undefined
     },
 

package/lib/gateway-probe.mjs

@@ -0,0 +1,6 @@
+// Echo only a strictly bounded, non-secret challenge on an unauthenticated
+// rejection. This does not authorize a device or expose management data.
+export function gatewayProbeHeader(value) {
+  return typeof value === 'string' && /^[a-f0-9]{32}$/.test(value)
+    ? `X-DSH-Gateway-Probe: ${value}\r\n` : ''
+}

package/lib/index.mjs

@@ -136,6 +136,7 @@ import { handlePluginQuery, PLUGIN_REQUEST_TYPES } from './plugin-management.mjs
 import { createSessionFollower } from './session-follower.mjs'
 import { createGatewayState, GATEWAY_MODES } from './gateway-state.mjs'
 import { createCloudflareTunnel } from './cloudflare-tunnel.mjs'
+import { gatewayProbeHeader } from './gateway-probe.mjs'
 import { webRestartAvailable, prepareWebRestart } from './gateway-tools.mjs'
 import QRCode from 'qrcode'
 
@@ -1938,9 +1939,16 @@ function extractClientDeviceId(req) {
   return /^[A-Za-z0-9._:-]{8,128}$/.test(normalized) ? normalized : undefined
 }
 
-function rejectUpgrade(socket, status, message) {
+function extractClientDeviceName(req) {
+  const value = req.headers['x-dsh-device-name']
+  if (typeof value !== 'string' || value.length > 512 || !/^[A-Za-z0-9+/]*={0,2}$/.test(value)) return undefined
+  const name = Buffer.from(value, 'base64').toString('utf8').trim()
+  return name && !/[\u0000-\u001f\u007f\ufffd]/.test(name) ? name.slice(0, 80) : undefined
+}
+
+function rejectUpgrade(socket, status, message, probe) {
   const reason = status === 401 ? 'Unauthorized' : status === 403 ? 'Forbidden' : status === 404 ? 'Not Found' : status === 503 ? 'Service Unavailable' : 'Bad Request'
-  socket.write(`HTTP/1.1 ${status} ${reason}\r\nConnection: close\r\nContent-Type: text/plain; charset=utf-8\r\nContent-Length: ${Buffer.byteLength(message)}\r\n\r\n${message}`)
+  socket.write(`HTTP/1.1 ${status} ${reason}\r\n${gatewayProbeHeader(probe)}Connection: close\r\nContent-Type: text/plain; charset=utf-8\r\nContent-Length: ${Buffer.byteLength(message)}\r\n\r\n${message}`)
   socket.destroy()
 }
 
@@ -2215,6 +2223,7 @@ const plugin = {
     let sessionProjectionBaselines = {}
     let counter = 0
     let gatewayMode = gatewayState.mode ?? options.gatewayMode ?? (options.gatewayEnabled === true ? 'persistent' : 'disabled')
+    const gatewayInstanceId = crypto.randomUUID()
     let gatewayEnabled = gatewayMode !== 'disabled'
     let waitExpiresAt = null
     let waitTimer = null
@@ -2643,6 +2652,7 @@ const plugin = {
               connectedClients: clients.size,
               webPort: webServer.port,
               webPid: process.pid,
+              gatewayInstanceId,
               wsPath,
               publicUrl: tunnel?.snapshot().enabled && tunnel.snapshot().mode === 'quick'
                 ? tunnel.snapshot().publicUrl
@@ -2727,6 +2737,9 @@ const plugin = {
             if (body.enabled && gatewayMode !== 'persistent') setGatewayMode('persistent', 'Cloudflare Tunnel enabled from management UI')
             await tunnel.reconcile()
             sendJson(res, 200, { ...tunnel.snapshot(), gatewayEnabled, gatewayMode })
+          } else if (req.method === 'POST' && p === '/mgw/cloudflare/check') {
+            await tunnel.checkEndpoint()
+            sendJson(res, 200, { ...tunnel.snapshot(), gatewayEnabled, gatewayMode })
           } else if (req.method === 'POST' && p === '/mgw/cloudflare/restart') {
             await tunnel.restart()
             sendJson(res, 200, { ...tunnel.snapshot(), gatewayEnabled, gatewayMode })
@@ -2754,10 +2767,9 @@ const plugin = {
               throw error
             }
             const body = await readBody(req)
-            const name = typeof body.name === 'string' ? body.name : undefined
             const publicUrl = normalizePublicUrl(body.publicUrl || configuredPublicUrl(), req, wsPath)
             const endpoints = advertisedEndpoints(publicUrl, normalizeEndpoints(body.endpoints ?? []))
-            const pairing = registry.createPairing(name)
+            const pairing = registry.createPairing()
             const payload = {
               version: 2,
               publicUrl,
@@ -2820,7 +2832,7 @@ const plugin = {
             rejectUpgrade(socket, 400, 'pairing requires X-DSH-Device-ID; update the iOS client')
             return
           }
-          paired = registry.claimPairing(credential.value, clientDeviceId)
+          paired = registry.claimPairing(credential.value, clientDeviceId, extractClientDeviceName(req))
           device = paired && paired.device
           if (!device) {
             log('pairing rejected: invalid, expired, or already-used code')
@@ -2828,7 +2840,7 @@ const plugin = {
             return
           }
         } else if (credential && credential.kind === 'token') {
-          device = registry.authenticate(credential.value, extractClientDeviceId(req))
+          device = registry.authenticate(credential.value, extractClientDeviceId(req), extractClientDeviceName(req))
         }
 
         // The separately exposed LAN listener is always authenticated. The
@@ -2837,7 +2849,7 @@ const plugin = {
         // plane.
         if ((requireAuth || transport.lan === true) && !device) {
           logAuthRejected(req)
-          rejectUpgrade(socket, 401, 'missing or invalid device credential')
+          rejectUpgrade(socket, 401, 'missing or invalid device credential', req.headers['x-dsh-gateway-probe'])
           return
         }
 

package/lib/public-endpoint-check.mjs

@@ -0,0 +1,61 @@
+import dns from 'node:dns/promises'
+import https from 'node:https'
+import crypto from 'node:crypto'
+
+// No credentials, redirects or certificate exceptions. A 401 alone is ambiguous:
+// require the gateway to echo our random probe nonce in its auth rejection.
+export async function checkPublicEndpoint(endpoint, { timeoutMs = 8000, lookup = dns.lookup, request = https.request } = {}) {
+  const checkedAt = new Date().toISOString()
+  const result = (state, message, extra = {}) => ({ state, message, checkedAt, ...extra })
+  let url
+  try {
+    url = new URL(endpoint)
+    if (url.protocol !== 'wss:' || url.username || url.password || url.search || url.hash) throw new Error()
+  } catch { return result('invalid-url', '公网入口必须是无凭证的 wss:// 地址。') }
+  let timer
+  try {
+    await Promise.race([
+      lookup(url.hostname),
+      new Promise((_, reject) => { timer = setTimeout(() => reject(Object.assign(new Error(), { code: 'ETIMEDOUT' })), timeoutMs) }),
+    ])
+  } catch (error) {
+    return result('dns-error', ['ENOTFOUND', 'ENODATA'].includes(error.code)
+      ? '本机无法解析公网域名，不代表公共 DNS 记录一定不存在。请核对域名、DNS 缓存、网络代理及 Cloudflare 已代理的 CNAME 记录；若刚保存配置，请稍后重试。'
+      : 'DNS 查询失败或超时，请检查本机网络和 DNS 后重试。', { code: error.code || 'DNS_ERROR' })
+  } finally { clearTimeout(timer) }
+  return new Promise((resolve) => {
+    let done = false
+    let deadline
+    const finish = (value) => {
+      if (done) return
+      done = true
+      clearTimeout(deadline)
+      resolve(value)
+    }
+    let req
+    try {
+      const key = crypto.randomBytes(16).toString('base64')
+      const nonce = crypto.randomBytes(16).toString('hex')
+      req = request({ hostname: url.hostname, port: url.port || 443, path: url.pathname || '/', method: 'GET', rejectUnauthorized: true,
+        headers: { Upgrade: 'websocket', Connection: 'Upgrade', 'Sec-WebSocket-Key': key, 'Sec-WebSocket-Version': '13', 'Sec-WebSocket-Protocol': 'dsh-mobile-v1', 'X-DSH-Gateway-Probe': nonce } })
+      deadline = setTimeout(() => { finish(result('network-error', '公网 TLS/WebSocket 检测超时；请检查网络、代理和 Cloudflare 源站配置。', { code: 'ETIMEDOUT' })); req.destroy() }, timeoutMs)
+      req.on('response', (res) => {
+        const status = res.statusCode
+        finish(status === 401 && res.headers['x-dsh-gateway-probe'] === nonce ? result('reachable', '本机检测：TLS 校验通过，移动网关路由已确认且要求鉴权；不代表手机网络可达或会话同步成功。', { httpStatus: status })
+          : result('route-error', `公网返回 HTTP ${status}，未确认移动网关路由。命名 Tunnel 的 Service 应为 HTTP，指向本机专用源站端口；同时检查 Cloudflare Access/安全规则。`, { httpStatus: status }))
+        res.destroy()
+      })
+      req.on('upgrade', (res, socket) => {
+        finish(result('auth-warning', '公网 WebSocket 未提供凭证即被接受，请检查设备鉴权设置。', { httpStatus: res.statusCode }))
+        socket.destroy()
+      })
+      req.on('error', (error) => {
+        const tlsError = /CERT|TLS|SSL|SELF_SIGNED|UNABLE_TO_VERIFY/.test(error.code || '')
+        finish(result(tlsError ? 'tls-error' : 'network-error', tlsError
+          ? '公网 TLS 握手或证书校验失败；请检查域名证书、系统时间及网络代理，不要关闭证书校验。'
+          : '公网连接失败；请检查 DNS、网络、代理及隧道源站配置。', { code: error.code || 'CONNECT_ERROR' }))
+      })
+      req.end()
+    } catch { finish(result('network-error', '无法发起公网检测。')); req?.destroy() }
+  })
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-plugin-mobile-gateway",
-  "version": "0.9.0",
-  "description": "Authenticated mobile gateway for DeepSeek Harness with realtime session sync, device pairing, plugin management, and LAN or Cloudflare Tunnel access",
+  "version": "0.10.0",
+  "description": "Mobile gateway for DeepSeek Harness with secure device pairing, realtime session sync, plugin management, LAN and Cloudflare Tunnel access, and a responsive theme-aware control panel",
   "main": "lib/index.mjs",
   "files": [
     "bin",
@@ -26,7 +26,7 @@
   },
   "bin": "bin/setup-ip.mjs",
   "scripts": {
-    "test": "node test/wire-json.test.mjs && node test/setup-ip.test.mjs && node test/host-adapter.test.mjs && node test/plugin-management.test.mjs && node test/session-preset.test.mjs && node test/session-follower.test.mjs && node test/gateway.test.mjs && node test/auth.test.mjs && node test/lan.test.mjs && node test/cloudflared-binary.test.mjs && node test/cloudflare-tunnel.test.mjs && node test/gateway-tools.test.mjs && node test/multi-gateway.test.mjs"
+    "test": "node test/wire-json.test.mjs && node test/setup-ip.test.mjs && node test/host-adapter.test.mjs && node test/plugin-management.test.mjs && node test/session-preset.test.mjs && node test/session-follower.test.mjs && node test/gateway.test.mjs && node test/auth.test.mjs && node test/lan.test.mjs && node test/cloudflared-binary.test.mjs && node test/cloudflare-tunnel.test.mjs && node --test test/public-endpoint-check.test.mjs && node test/gateway-tools.test.mjs && node test/multi-gateway.test.mjs"
   },
   "exports": {
     ".": "./lib/index.mjs",