dsh-mobile-plugin 0.5.14 → 0.5.16

package/lib/client.js

@@ -2,9 +2,9 @@
  * dsh-mobile-plugin 的**客户端半边**（在 DSH 桌面 Web 页面里运行）。
  *
  * 五件事：桌面侧边栏的展开态与「读过了」报给宿主；手机端的已读回执应用回桌面绿点；
- * 提供「设置 → 移动端」那颗由本机打开的网页管理开关；在侧边栏最底下那一行挂一颗
- * 手机图标（点一下就是设置里那颗「打开配置页面」）。方向是单向的（桌面 → 宿主 → 手机），
- * 手机上的折叠只存在 App 本地，不写回。
+ * 设置里那一项「移动端」（一张薄卡，一颗「打开配置页面」）；在侧边栏最底下那一行挂一颗
+ * 手机图标（点一下等于那张卡上的按钮）。方向是单向的（桌面 → 宿主 → 手机），手机上的
+ * 折叠只存在 App 本地，不写回。
  *
  * 本文件不经任何构建（package.json 直接收录 lib 下的 .js），所以不能写 JSX，统一用
  * `React.createElement` 的别名 `h`；客户端插件按约定写成惰性工厂，定时器与页签在物化时才起。
@@ -27,8 +27,8 @@ window.__ModuleLoader__.load({
      * 照抄 @deepseek-ai/dsh-client-ui-settings-plugins 的注入方式：同一
      * data-plugin-css 只注入一次，bundle 被重复物化也不会堆出第二份 <style>。
      *
-     * 这一半只剩侧边栏那一颗图标与它打开的诊断弹窗（设置菜单里那一项已经按用户要求去掉）：
-     * 界面本体在网页版里，那边自带一套样式。
+     * 这一半有三样东西：设置里那一张薄卡、侧边栏那一颗图标（点它等于点那张卡上的按钮），
+     * 以及打不开时那张诊断弹窗。界面本体在网页版里，那边自带一套样式。
      */
     const STYLE_ID = 'dsh-mobile-plugin/footer-icon.css';
     const CSS = `
@@ -51,6 +51,13 @@ window.__ModuleLoader__.load({
 .dshm_factMono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
 .dshm_steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px}
 .dshm_dialogActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:2px}
+.dshm_root{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;color:var(--dsw-alias-label-primary)}
+.dshm_card{border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl);background:var(--dsw-alias-settings-card-fill);display:flex;flex-direction:column;gap:10px;padding:14px 16px}
+.dshm_heading{font-size:18px;font-weight:600;margin:0}
+.dshm_cardTitle{font-size:14px;font-weight:600;line-height:20px;margin:0}
+.dshm_actions{display:flex;flex-wrap:wrap;gap:8px}
+.dshm_note{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dshm_error{margin:0;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px;padding:8px 10px}
 .dshm_btn{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:13px;line-height:18px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
 .dshm_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
 .dshm_btn:disabled{cursor:default;opacity:.45}
@@ -218,6 +225,22 @@ window.__ModuleLoader__.load({
       body: JSON.stringify(payload || {}),
     });
 
+    /**
+     * 打开那两小时网页管理窗口。
+     *
+     * 只有「浏览器不是从这台机器上打开的」才需要它：控制面不认它，面板会回 423。设置卡与
+     * 侧边栏图标都走这一份实现 —— 各写一遍迟早会在「窗口开着没有」上判得不一样，而这两种
+     * 判法对应的是「多开一次」与「跳过去吃一个 423」。
+     *
+     * 返回值是宿主回的新窗口状态，交给调用方存进自己的 state。
+     */
+    async function requestAccessWindow() {
+      const next = await postJson('/web-access', { enabled: true });
+      return next && next.webAccess && typeof next.webAccess.enabled === 'boolean'
+        ? next.webAccess
+        : { enabled: true, expiresAt: 0 };
+    }
+
     /* ── 三：侧边栏未读绿点的双向同步 ───────────────────────────────────────
      * 两端的绿点是两份互不相干的状态：
      *   - 手机端 = 宿主按设备维度维护的完成提醒（lib/mobile/completion.js），
@@ -482,6 +505,15 @@ window.__ModuleLoader__.load({
     const NS = 'settings.mobileRelay';
     const DICT = {
       zh: {
+        nav: '移动端',
+        heading: '移动端',
+        cardPanel: '配置页面',
+        openPanel: '打开配置页面',
+        openHint: '配对、网络配置与插件更新都在这个页面里。',
+        panelPending: '正在读取页面地址…',
+        panelMissing: '宿主还没给出页面地址，稍后再打开这一页试试。',
+        loadFailed: '读取宿主状态失败',
+        openFailed: '打开配置页面失败',
         footerOpen: '打开移动端插件配置网页',
         footerPending: '网页地址还没就绪',
         footerPublicConfirm: '这个地址位于公网。继续后会开放移动端插件的网页管理权限 2 小时；期间任何能访问该地址的人都可以操作面板。是否继续？',
@@ -531,6 +563,15 @@ window.__ModuleLoader__.load({
         diagFactWindow: '两小时窗口',
       },
       en: {
+        nav: 'Mobile',
+        heading: 'Mobile',
+        cardPanel: 'Configuration page',
+        openPanel: 'Open the configuration page',
+        openHint: 'Pairing, network settings and plugin updates all live on this page.',
+        panelPending: 'Reading the page address…',
+        panelMissing: 'The host has not reported a page address yet — reopen this item in a moment.',
+        loadFailed: 'Failed to read host status',
+        openFailed: 'Could not open the configuration page',
         footerOpen: 'Open the mobile plugin configuration page',
         footerPending: 'The page address is not ready yet',
         footerPublicConfirm: 'This address is public. Continuing opens mobile plugin web management for 2 hours; anyone who can reach this address can operate the panel during that time. Continue?',
@@ -724,6 +765,119 @@ window.__ModuleLoader__.load({
       return protocol === 'http:' || protocol === 'https:';
     }
 
+    /** 把一份 `/status` 返回收成拨号要用的三样；缺的当没有。 */
+    function readStatusView(view) {
+      const value = view && typeof view === 'object' ? view : {};
+      return {
+        panelUrl: typeof value.panelUrl === 'string' ? value.panelUrl : '',
+        panelScope: typeof value.panelScope === 'string' ? value.panelScope : '',
+        webAccess: value.webAccess && typeof value.webAccess.enabled === 'boolean' ? value.webAccess : null,
+      };
+    }
+
+    /**
+     * 配置页在**这个页面自己**的同源地址上。
+     *
+     * 宿主的 `panelUrl` 是按请求的 Host 头拼的，反代把 DSH 挂在子路径（`/dsh/`）下时那条会
+     * 丢掉前缀、Host 被改写时还会指到内网去；而页面自己的 `<base href="./">` 一定是带前缀、
+     * 也一定是用户浏览器真能到的那一层。所以拿不到宿主地址时按这个推，推不出来就算了。
+     */
+    function sameOriginPanelUrl() {
+      try {
+        const base = typeof document !== 'undefined' && document.baseURI
+          ? document.baseURI
+          : (typeof location !== 'undefined' ? location.href : '');
+        if (!base) return '';
+        return new URL('api/relay/panel', base).href;
+      } catch {
+        return '';
+      }
+    }
+
+    /**
+     * 一次「打开配置页面」的完整拨号：取地址、必要时开两小时窗口、把地址交出去。
+     *
+     * 为什么不能只读一次 `/status`：那条接口自己也在窗口门后面（`WEB_ACCESS_ROUTES`），
+     * 窗口关着时**不是本机**的浏览器只拿得到 423。而客户端原先规定「没地址就不去开窗口」，
+     * 两边互相锁死 —— 远程用户点了只会看到「网页地址还没就绪」，没有任何顺序能走通
+     * （2026-11-03 用户报的就是这个）。所以读不到地址时正确的动作不是放弃，而是**先开窗**：
+     * 那条开关接口本来就对同源页面豁免，开完再读一次，地址与类别就都有了。
+     *
+     * 地址优先用宿主给的 `panelUrl`，拿不到再用页面自己的同源地址（见 `sameOriginPanelUrl`）。
+     *
+     * 新窗口必须由调用方在**点击那一帧**开出来（`window.open('')`），这里只负责导航它；
+     * 等接口回来再开会被弹窗拦截器吃掉。`confirmed` = 调用方已经问过公网那句确认（问过的
+     * 不再问第二遍；地址是自救拿到的，类别此前不知道，所以在这里补问）。
+     *
+     * @returns {Promise<{ok: true, cancelled?: boolean, url: string, webAccess: object|null}
+     *   | {ok: false, missing: boolean, status: number, message: string}>}
+     */
+    async function openConfigurationPage({ view, loadStatus = 0, t, target = null, confirmed = false }) {
+      let state = readStatusView(view);
+      const failed = (error) => ({
+        ok: false,
+        missing: false,
+        status: Number(error && error.status) || 0,
+        message: String((error && error.message) || error),
+      });
+
+      if (!state.panelUrl) {
+        // 404 = 宿主那一半没装载，开窗也救不了：交给调用方按「装完没重启」报。
+        if (loadStatus === 404) return { ok: false, missing: true, status: 404, message: '' };
+        // 先补读一次：可能只是页面上那一次读取还没回来，或者刚才网络抖了一下。
+        try {
+          state = readStatusView(await call('/status'));
+        } catch (error) {
+          if ((Number(error && error.status) || 0) === 404) {
+            return { ok: false, missing: true, status: 404, message: '' };
+          }
+          // 读不到多半是被窗口门挡住（423）：先开窗再读一次。这是远程用户唯一能走通的顺序，
+          // 也正因为原先把这一步排在了「拿到地址之后」，两个条件互等，谁都过不去。
+          try {
+            const opened = await requestAccessWindow();
+            state = { ...readStatusView(await call('/status')), webAccess: opened };
+          } catch (inner) {
+            return failed(inner);
+          }
+        }
+        if (!state.panelUrl) {
+          return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+        }
+      }
+
+      const url = state.panelUrl || sameOriginPanelUrl();
+      if (!url) return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+
+      if (state.panelScope === 'public'
+        && !confirmed
+        && typeof window !== 'undefined'
+        && typeof window.confirm === 'function'
+        && !window.confirm(t('footerPublicConfirm'))) {
+        return { ok: true, cancelled: true, url, webAccess: state.webAccess };
+      }
+
+      if (state.panelScope !== 'loopback' && !(state.webAccess && state.webAccess.enabled)) {
+        try {
+          state.webAccess = await requestAccessWindow();
+        } catch (error) {
+          return failed(error);
+        }
+      }
+
+      if (target) {
+        target.location.href = url;
+        return { ok: true, url, webAccess: state.webAccess };
+      }
+      if (!isWebPage(window)) {
+        // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
+        window.location.href = url;
+        return { ok: true, url, webAccess: state.webAccess };
+      }
+      const opened = typeof window.open === 'function' ? window.open(url, '_blank', 'noreferrer') : null;
+      if (!opened) return { ok: false, missing: false, status: 0, message: t('diagPopupBlocked') };
+      return { ok: true, url, webAccess: state.webAccess };
+    }
+
     /* ── 侧边栏底部那颗手机图标 ────────────────────────────────────────────
      * 用户要的是「点一下等于设置页那颗『打开配置页面』」，并且就在侧边栏最底下、头像
      * 那一行里。外壳那一行没有给插件留座位：那一行里从左到右是设置项自己渲染的一整颗
@@ -808,8 +962,9 @@ window.__ModuleLoader__.load({
     /**
      * 把「打开哪一页 / 现在能不能点」同步到元素上。
      *
-     * 没有地址时**不写 href**：锚点没有 href 就点不动，比挂一个死链诚实；`aria-disabled`
-     * 只负责把这一点说出来。
+     * 没有地址时**不写 href**（没有地址可写，别挂死链），但**点击处理照样挂上**：那颗图标的
+     * 点击会自己去把两小时窗口开出来、再读一次地址（见 `openConfigurationPage`）。原先这里
+     * 把 `onclick` 一起摘掉，现场就是「点了完全没反应」——2026-11-03 用户报的正是这个。
      *
      * 地址、网络类别和窗口状态都由 effect 往上同步，组件重渲染不会把它丢掉。
      */
@@ -817,12 +972,12 @@ window.__ModuleLoader__.load({
       const label = url ? openLabel : pendingLabel;
       node.setAttribute('aria-label', label);
       node.setAttribute('title', label);
-      node.setAttribute('aria-disabled', url ? 'false' : 'true');
+      node.setAttribute('aria-disabled', 'false');
       // 有地址时仍然写 `href`：普通链接照旧能中键 / 新标签打开。只有「浏览器不是从本机来的」
       // 那两种情况要拦下来先开窗口，见 `openPanel`。
       if (url) node.setAttribute('href', url);
       else node.removeAttribute('href');
-      node.onclick = url ? onClick : null;
+      node.onclick = onClick;
     }
 
     /** 把按钮放回设置那一行、紧跟头像出口。返回是否真在那一行里。 */
@@ -929,66 +1084,46 @@ window.__ModuleLoader__.load({
       /**
        * 点下去要做什么，取决于面板地址落在哪一类网络上（宿主在 `/status` 上算的 `panelScope`）。
        *
-       * 新窗口必须在**点击这一帧**就开出来（`window.open('', '_blank')`）：等接口回来再开会被
-       * 浏览器的弹窗拦截器吃掉。地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
+       * 有地址且就在本机：普通链接，交给浏览器自己开。
+       * 其余情况（从别的机器打开的页面、或者压根还没读到地址）都要先把两小时窗口开出来：
+       * 新窗口必须在**点击这一帧**开出来（`window.open('', '_blank')`），等接口回来再开会被
+       * 浏览器的弹窗拦截器吃掉；地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
        * 只有**网页**（`http(s)`）才需要这一手：桌面壳里那个函数一定被拒，见 `isWebPage`。
        */
       function openPanel(event) {
-        if (!url) {
-          // 连地址都没问到：点了必须有反应 —— 弹诊断窗，而不是一颗点不动的灰图标。
-          void openDiagnosis('load', problem);
-          return;
-        }
-        const needsWindow = panelScope !== 'loopback' && !(webAccess && webAccess.enabled);
+        const knowsUrl = typeof url === 'string' && url !== '';
+        const needsWindow = !knowsUrl || (panelScope !== 'loopback' && !(webAccess && webAccess.enabled));
         if (!needsWindow) return; // 普通链接，交给浏览器自己开
         if (event && typeof event.preventDefault === 'function') event.preventDefault();
-        if (panelScope === 'public'
+        // 公网地址先问一句；地址都还没读到时问不了，交由 `openConfigurationPage` 拿到类别后补问。
+        if (knowsUrl
+          && panelScope === 'public'
           && typeof window !== 'undefined'
           && typeof window.confirm === 'function'
           && !window.confirm(publicConfirm)) return;
         const target = isWebPage(window) && typeof window.open === 'function'
           ? window.open('', '_blank')
           : null;
-        void openWithWindow(target);
-      }
-
-      /**
-       * 先把窗口开起来、再跳过去；失败就把那个空白页关掉并弹诊断窗。
-       *
-       * 还有一种「点了没反应」：浏览器把新窗口拦了（`window.open` 返回 null）。那时接口
-       * 已经成功、地址也在手上，只是没地方给它 —— 直接告诉用户该允许弹窗，别让他以为坏了。
-       *
-       * 壳里的页面（`dsh-app://`）不适用这一套：那里本来就没有「新窗口」这回事，`null` 是
-       * 正常答复、地址已经由壳交给系统浏览器了。当成被拦只会平白盖一屏诊断。
-       */
-      async function openWithWindow(target) {
-        try {
-          const next = await postJson('/web-access', { enabled: true });
-          setWebAccess(next && next.webAccess && typeof next.webAccess.enabled === 'boolean'
-            ? next.webAccess
-            : { enabled: true, expiresAt: 0 });
-          if (target) {
-            target.location.href = url;
+        void (async () => {
+          const outcome = await openConfigurationPage({
+            view: { panelUrl: url || '', panelScope, webAccess },
+            loadStatus: problem ? problem.status : 0,
+            t,
+            target,
+            confirmed: knowsUrl,
+          });
+          if (outcome.ok) {
+            if (outcome.cancelled && target && typeof target.close === 'function') target.close();
+            if (outcome.webAccess) setWebAccess(outcome.webAccess);
             return;
           }
-          if (!isWebPage(window)) {
-            // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
-            window.location.href = url;
+          if (target && typeof target.close === 'function') target.close();
+          if (outcome.missing) {
+            void openDiagnosis('load', { status: outcome.status || 404, message: (problem && problem.message) || '' });
             return;
           }
-          const retry = typeof window !== 'undefined' && typeof window.open === 'function'
-            ? window.open(url, '_blank', 'noreferrer')
-            : null;
-          if (!retry) {
-            void openDiagnosis('open', { status: 0, message: t('diagPopupBlocked') });
-          }
-        } catch (error) {
-          if (target && typeof target.close === 'function') target.close();
-          void openDiagnosis('open', {
-            status: Number(error && error.status) || 0,
-            message: String((error && error.message) || error),
-          });
-        }
+          void openDiagnosis('open', { status: outcome.status || 0, message: outcome.message });
+        })();
       }
 
       /**
@@ -1279,7 +1414,7 @@ window.__ModuleLoader__.load({
           rel: 'noreferrer',
           'aria-label': label,
           title: label,
-          'aria-disabled': url ? 'false' : 'true',
+          'aria-disabled': 'false',
           onClick: openPanel,
         }, h('svg', {
           viewBox: '0 0 24 24',
@@ -1346,8 +1481,104 @@ window.__ModuleLoader__.load({
       }, 'mobile-plugin: 客户端半边自检上报');
     }
 
+    /* ── 设置里的那一项「移动端」───────────────────────────────────────────
+     * 用户 2026-11-03 要求加回来：介绍产品时说的入口就是「设置 → 移动端」，2026-11-02 那一版
+     * 把它整块下线、只留侧边栏那颗图标，于是从网页版进来的人不知道配置在哪。现在两项都在，
+     * 它们进的是同一个页面、走同一条拨号链路（图标是快捷方式，这一张是设置里的正规入口）。
+     *
+     * 刻意只有一张薄卡：界面本体全在网页版里（A3-37），在这里再画一套等于长期维护第二套 UI，
+     * 而两套迟早会打架。卡片只做两件事——说清配置在哪、把那一页开出来；开不出来就在卡上写原因。
+     */
+    function MobileSettingsSection({ t }) {
+      /** null = 还在问宿主；'' = 问到了但宿主没给地址（老版本或还没起来）。 */
+      const [url, setUrl] = useState(null);
+      const [scope, setScope] = useState('');
+      const [access, setAccess] = useState(null);
+      /** `null` = 这一次没出错；否则 `{ kind: 'load' | 'open', message }`。 */
+      const [failure, setFailure] = useState(null);
+
+      useEffect(() => {
+        let alive = true;
+        void (async () => {
+          try {
+            const next = await call('/status');
+            if (!alive) return;
+            const view = next && typeof next === 'object' ? next : {};
+            setUrl(typeof view.panelUrl === 'string' ? view.panelUrl : '');
+            setScope(typeof view.panelScope === 'string' ? view.panelScope : '');
+            setAccess(view.webAccess && typeof view.webAccess.enabled === 'boolean' ? view.webAccess : null);
+            setFailure(null);
+          } catch (error) {
+            if (!alive) return;
+            setUrl('');
+            setFailure({ kind: 'load', status: Number(error && error.status) || 0, message: String((error && error.message) || error) });
+          }
+        })();
+        return () => { alive = false; };
+      }, []);
+
+      /**
+       * 拨到面板。判据与侧边栏那颗图标完全一致（A3-25）：本机直接跳；从别的机器打开的浏览器
+       * 控制面不认它，先把两小时窗口开出来再跳；公网地址多弹一句确认。地址还没读到时也照样
+       * 走这条路——它会自己开窗再读一次（见 `openConfigurationPage`），不是干等。
+       *
+       * 新窗口必须在**点击这一帧**开出来，等到接口回来再开会被弹窗拦截器吃掉。
+       */
+      function openPanel(event) {
+        const knowsUrl = typeof url === 'string' && url !== '';
+        const needsWindow = !knowsUrl || (scope !== 'loopback' && !(access && access.enabled));
+        if (!needsWindow) return; // 普通链接，交给浏览器自己开
+        if (event && typeof event.preventDefault === 'function') event.preventDefault();
+        if (knowsUrl
+          && scope === 'public'
+          && typeof window !== 'undefined'
+          && typeof window.confirm === 'function'
+          && !window.confirm(t('footerPublicConfirm'))) return;
+        const target = isWebPage(window) && typeof window.open === 'function'
+          ? window.open('', '_blank')
+          : null;
+        void (async () => {
+          const outcome = await openConfigurationPage({
+            view: { panelUrl: url || '', panelScope: scope, webAccess: access },
+            loadStatus: failure && failure.kind === 'load' ? failure.status || 0 : 0,
+            t,
+            target,
+            confirmed: knowsUrl,
+          });
+          if (outcome.ok) {
+            if (outcome.cancelled && target && typeof target.close === 'function') target.close();
+            if (outcome.webAccess) setAccess(outcome.webAccess);
+            if (!outcome.cancelled) setFailure(null);
+            return;
+          }
+          if (target && typeof target.close === 'function') target.close();
+          setFailure({ kind: outcome.missing ? 'load' : 'open', status: outcome.status || 0, message: outcome.message });
+        })();
+      }
+
+      const hint = url === null ? t('panelPending') : url === '' ? t('panelMissing') : t('openHint');
+      return h('div', { className: 'dshm_root' },
+        h('h2', { className: 'dshm_heading' }, t('heading')),
+        h('div', { className: 'dshm_card' },
+          h('h3', { className: 'dshm_cardTitle' }, t('cardPanel')),
+          h('p', { className: 'dshm_note' }, hint),
+          h('div', { className: 'dshm_actions' },
+            h('a', {
+              className: 'dshm_btn dshm_btnPrimary',
+              href: url || undefined,
+              target: '_blank',
+              rel: 'noreferrer',
+              'aria-disabled': 'false',
+              onClick: openPanel,
+            }, t('openPanel'))),
+          failure
+            ? h('p', { className: 'dshm_error' },
+              `${failure.kind === 'load' ? t('loadFailed') : t('openFailed')}：${failure.message}`)
+            : null));
+    }
+
     return {
-      // slots：注册侧边栏那颗图标，由 @deepseek-ai/dsh-client-runtime 提供（它 require
+      // slots：注册设置项与侧边栏那颗图标，由 @deepseek-ai/dsh-client-runtime 提供（它 require
       // dsh-client-ui-slots 的 SlotCore 再以 `super(ctx, "slots")` 暴露服务）。
       // locale：字典，由 @deepseek-ai/dsh-client-locale 提供。
       // 这两个服务名对应 package.json 里 dsh.client.inject 注入的两个包。
@@ -1360,10 +1591,19 @@ window.__ModuleLoader__.load({
         startDesktopReadSync(ctx);
         startReadReceiptSync(ctx);
         startClientHalfReport(ctx);
-        // 侧边栏底部那颗手机图标：**它是进网页的唯一入口**（2026-11-02 用户要求把设置菜单
-        // 里那一项去掉）。走外壳给插件留的动作位注册（`name` 与 `inject()` 的路径必须是同一个
-        // 槽名，改一处不报错、只是静默挂不上）；展开态再自己插进设置那一行，细节见
-        // `MobileWebEntry` 上面那段注释。
+        // 设置里那一项：外壳声明 `settings.section`（设置菜单里的顶层一项），先声明后注册 ——
+        // 外壳可能比我们晚一步声明它。跟内置插件页的页签是两回事：这一项是自己的设置页。
+        ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section',
+          id: 'mobile',
+          order: 20,
+          label: () => t('nav'),
+          locale: NS,
+          inject: () => ({ t }),
+        }, MobileSettingsSection));
+        // 侧边栏底部那颗手机图标：它是设置那一项的快捷方式，进的是同一个页面。走外壳给插件
+        // 留的动作位注册（`name` 与 `inject()` 的路径必须是同一个槽名，改一处不报错、只是
+        // 静默挂不上）；展开态再自己插进设置那一行，细节见 `MobileWebEntry` 上面那段注释。
         ctx.slots.inject(FOOTER_SLOT, () => ctx.slots.register({
           name: FOOTER_SLOT,
           id: 'mobile-web',

package/lib/impl.js

@@ -33,6 +33,8 @@ const { lanUrls, advertisedCandidates, phoneCandidates, ipv6Candidates, withManu
 const { pairingPayload } = require('./relay/pairing-payload.cjs')
 const { resolvePort } = require('./relay/port-allocator.cjs')
 const { createPreviewService } = require('./relay/preview.js')
+// 手机打开「电脑上的网页版」时用的那枚一次性登录令牌（见 mobile/host-web.js）。
+const hostWeb = require('./mobile/host-web.js')
 // 本机设备凭据库：/api/relay/revoke-all 必须同时吊销局域网直连的 dshc_ 凭据，
 // 否则「撤销全部授权」只清了中转侧，同网设备仍能用旧凭据直连宿主。
 // 入口按两条盘上布局分别找（嵌在插件包内 / 与插件包同级），见 shared/credentials-entry.js。
@@ -460,7 +462,11 @@ function apply(ctx) {
   // `protectedPorts` 是取值器而不是快照：局域网端口会在运行中被自适应改掉
   // （见上面的 resolveLanPort），快照会让这道边界跟着失效。DSH 自身的 web 端口
   // （`ctx.webServer.port`，默认 3080）也从这里按身份排掉——预览这条管道刻意不做
-  // 「把桌面端 GUI 搬进手机」这件事，所以不允许它连回宿主自己。
+  // 「把桌面端 GUI 搬进手机」这件事。
+  //
+  // `ownWebPort` 是同一条边界上的唯一例外：用户显式要求手机能打开网页版（2026-11-03），
+  // 所以 `mode=webapp` 那一档只放行这一个端口（且目标必须是环回）。取值器而非快照，
+  // 理由同上：端口会被配置改，快照会让放行的那一个停在旧号上。
   const preview = createPreviewService({
     authorized,
     protectedPorts: () => {
@@ -468,6 +474,7 @@ function apply(ctx) {
       ports.delete(0)
       return ports
     },
+    ownWebPort: () => ctx.webServer.port,
     onLog: (message) => ctx.logger?.info?.(`${name}: %s`, message),
   })
   ctx.effect(() => () => preview.close(), `${name}: preview pipes`)
@@ -480,6 +487,9 @@ function apply(ctx) {
     // 一样必须包在 ctx.effect 里，否则插件重载时重复注册会直接抛错。
     registerUpgradeRoute: (route) => mountRoute(route, true),
     preview,
+    // 网页版登录令牌那条：handler 在这里造好、按依赖交给路由表，理由与 preview 一样——
+    // 它要读的是本进程的 `ctx.webServer` 与 `ctx.get('connection')`。
+    hostWeb: hostWeb.handleHostWeb,
     guarded,
     state,
     hostMetadata,

package/lib/mobile/approvals.js

@@ -156,6 +156,20 @@ function hasPending(sessionId) {
   return openEntries(sessionId).length > 0;
 }
 
+/**
+ * 这条会话此刻挂着的审批卡（形状与推送帧一字不差），没有就 undefined。
+ *
+ * 与提问桥的 `pendingCardOf` 同一用途：手机回前台时先问原生要卡，不必等流重新接上
+ * （见 `questions.js` 那一处的说明）。只认已绑定的项 —— 与 `attachSession` 的补发口径
+ * 一致：没绑上钩子的卡答不动，送上去只会让人点出一个 409。
+ */
+function pendingCardOf(sessionId) {
+  for (const entry of openEntries(sessionId)) {
+    if (entry.bound) return cardFrame(entry);
+  }
+  return undefined;
+}
+
 /** 测试用：清空全部进程内状态（真实运行时由插件卸载时的 disposer 收尾）。 */
 function resetForTest() {
   watchers.clear();
@@ -367,5 +381,6 @@ module.exports = {
   handleApprovalRespond,
   attachSession,
   hasPending,
+  pendingCardOf,
   resetForTest,
 };

package/lib/mobile/canvas-store.js

@@ -0,0 +1,365 @@
+'use strict';
+
+/**
+ * 无限画布的库（`/api/mobile/v1/canvas/*`）。
+ *
+ * 为什么要有它：画布整个活在 App 的 WebView 里，项目和素材全在页面的 IndexedDB 中 ——
+ * 清一次缓存、换一台手机就没了，桌面端也看不见。这个模块把「库」搬到宿主机上，App 负责
+ * 把本机那份推上来、把远端那份拉下去，桌面端以后读的是同一份。
+ *
+ * 存两样东西，各管一件事：
+ *  · **清单**（每个域一份 JSON）：项目图、资产行、工作台记录这些「结构」，加上一份
+ *    `files: [{storageKey, hash, mimeType, bytes}]` —— 结构里引用了哪些字节、各是哪一份。
+ *  · **字节**（`objects/<哈希前两位>/<其余>`）：按内容哈希落盘，只增不改。同一个 storageKey
+ *    在手机上是不可变的（键是随机串），所以判「要不要传」只看远端清单里有没有这个键。
+ *
+ * 清单永远在字节之后写：先传缺的文件、再写清单。写清单这一步会逐个 stat 文件，缺一个就
+ * 整份拒绝（`missing-file`）—— 一份指向不存在字节的清单在手机上表现为「画布能打开、图全是
+ * 坏的」，而且它会把下一次同步判成「已同步」，坏得无声无息。
+ *
+ * 能力面：只有一个固定目录，**客户端给不了任何路径**，也只会拿到哈希。文件名是 64 位十六
+ * 进制（不是哈希形状的一律不认，顺带挡住路径穿越），与分片上传那条通道同一口径。
+ */
+
+const crypto = require('node:crypto');
+const fs = require('node:fs');
+const fsp = require('node:fs/promises');
+const path = require('node:path');
+const { pipeline } = require('node:stream/promises');
+
+const { sendJson, readJsonBody } = require('../shared/http-util');
+const { dshHome } = require('../shared/paths.js');
+const { writeEncryptedFile, encryptedLengthOf } = require('./session-file.js');
+
+/**
+ * 四个域与画布自己的同步引擎一一对应（`app/vendor/canvas-src` 的 app-sync）。
+ *
+ * 域是清单的分片，不是权限：每个域一份文件，谁变了推谁，别把整库塞进一份 JSON。
+ */
+const DOMAINS = new Set(['canvas', 'assets', 'image-workbench', 'video-workbench']);
+
+/** 清单请求体上限（**明文**字节）：与分片上传同一个 8MB 预算，够装几万个节点。 */
+const MAX_MANIFEST_BYTES = Math.ceil(8 * 1024 * 1024 * 4 / 3);
+/** 一份清单最多认多少个文件条目：再多也传不完，早报错比传到一半失败好。 */
+const MAX_FILES = 20000;
+/** 单份字节的上限：与「会话文件」同一条口径，超过的整份传不回来。 */
+const MAX_OBJECT_BYTES = 512 * 1024 * 1024;
+/** 内容哈希：64 位小写十六进制。别的形状一律不认（这一条同时挡住路径穿越）。 */
+const HASH_RE = /^[0-9a-f]{64}$/;
+/** storageKey 只当清单里的键用、不拼路径，但仍然要求是干净的字符串。 */
+const STORAGE_KEY_MAX = 300;
+/** 清单版本号取内容哈希的前 16 位：同一份内容算出同一个号，不需要另存一个自增计数。 */
+const REVISION_CHARS = 16;
+
+/** 库根：插件自己的数据目录，`DSH_MOBILE_CANVAS` 只给测试用。 */
+function rootDir() {
+  return process.env.DSH_MOBILE_CANVAS || path.join(dshHome(), 'storages', 'mobile-plugin', 'canvas');
+}
+
+/** 某个域的清单文件。 */
+function manifestPath(domain) {
+  return path.join(rootDir(), `manifest-${domain}.json`);
+}
+
+/** 字节区根。 */
+function objectsRoot() {
+  return path.join(rootDir(), 'objects');
+}
+
+/**
+ * 哈希 → 盘上路径。形状不对回 null：这个值要拼进文件路径，校验放在这里，不靠调用方记得。
+ */
+function objectPathOf(hash) {
+  if (typeof hash !== 'string' || !HASH_RE.test(hash)) return null;
+  return path.join(objectsRoot(), hash.slice(0, 2), hash.slice(2));
+}
+
+/** 域 → 规范值；不认识回 null。 */
+function domainOf(value) {
+  const domain = typeof value === 'string' ? value.trim() : '';
+  return DOMAINS.has(domain) ? domain : null;
+}
+
+/** 内容 → 版本号（内容变了才对不上，所以不需要另记时间）。 */
+function revisionOf(payload) {
+  return crypto.createHash('sha256').update(JSON.stringify(payload)).digest('hex').slice(0, REVISION_CHARS);
+}
+
+/**
+ * 读某个域的清单。没有回 null；盘上有但读不懂**如实抛**，不当成「没有」——
+ * 当成没有会让手机把本机那份推上来，把远端那份直接盖掉（那是最不该发生的静默失败）。
+ */
+async function readManifest(domain) {
+  let text;
+  try {
+    text = await fsp.readFile(manifestPath(domain), 'utf8');
+  } catch (error) {
+    if (error && error.code === 'ENOENT') return null;
+    throw Object.assign(new Error(`读画布清单失败：${error.message}`), { code: 'canvas-store-unavailable' });
+  }
+  try {
+    const parsed = JSON.parse(text);
+    if (!parsed || typeof parsed !== 'object' || parsed.domain !== domain) throw new Error('形状不对');
+    return parsed;
+  } catch (error) {
+    throw Object.assign(new Error(`画布清单已损坏（${domain}）：${error.message}`), { code: 'manifest-corrupt' });
+  }
+}
+
+/** 哈希对应的字节在不在盘上（清单落盘之前要逐个确认）。 */
+async function objectExists(hash) {
+  const target = objectPathOf(hash);
+  if (!target) return false;
+  try {
+    const info = await fsp.stat(target);
+    return info.isFile();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 校验并规范化一份要写进来的清单。
+ *
+ * @returns {{ status: number, code: string, message: string, missing?: string[] } | { files: Array<object>, data: unknown }}
+ */
+function normalizePayload(body) {
+  const domain = domainOf(body.domain);
+  if (!domain) return { status: 400, code: 'bad-domain', message: 'domain 只能是 canvas / assets / image-workbench / video-workbench' };
+  if (!body.data || typeof body.data !== 'object' || Array.isArray(body.data)) {
+    return { status: 400, code: 'bad-data', message: '需要 { data }（一个对象）' };
+  }
+  const rawFiles = body.files === undefined ? [] : body.files;
+  if (!Array.isArray(rawFiles)) return { status: 400, code: 'bad-files', message: 'files 必须是数组' };
+  if (rawFiles.length > MAX_FILES) {
+    return { status: 413, code: 'too-many-files', message: `一份清单最多 ${MAX_FILES} 个文件` };
+  }
+  // 同一个 storageKey 只留最后一条：清单是整份替换的，重复条目只会在下发时变成两行。
+  const byKey = new Map();
+  for (const item of rawFiles) {
+    if (!item || typeof item !== 'object') return { status: 400, code: 'bad-files', message: 'files 里每一项都得是对象' };
+    const storageKey = typeof item.storageKey === 'string' ? item.storageKey : '';
+    if (!storageKey || storageKey.length > STORAGE_KEY_MAX || /[\u0000-\u001f\u007f]/.test(storageKey)) {
+      return { status: 400, code: 'bad-files', message: 'storageKey 必须是 1..300 个可见字符' };
+    }
+    if (!HASH_RE.test(String(item.hash || ''))) {
+      return { status: 400, code: 'bad-files', message: `文件 ${storageKey} 的 hash 不是 64 位十六进制` };
+    }
+    const bytes = Number(item.bytes);
+    if (!Number.isSafeInteger(bytes) || bytes < 0 || bytes > MAX_OBJECT_BYTES) {
+      return { status: 400, code: 'bad-files', message: `文件 ${storageKey} 的字节数不合法` };
+    }
+    const mimeType = typeof item.mimeType === 'string' ? item.mimeType.slice(0, 120) : 'application/octet-stream';
+    byKey.set(storageKey, { storageKey, hash: String(item.hash), mimeType, bytes });
+  }
+  return { files: [...byKey.values()], data: body.data };
+}
+
+/**
+ * 写清单：先确认每个哈希都在盘上，再整份原子替换。
+ *
+ * 为什么逐个 stat：清单是「库里有哪些字节」的账，账上有一笔盘上没有的单子，手机下次同步会
+ * 因为「清单里有」而不再上传，那张图标就一直坏着。
+ */
+async function writeManifest(domain, data, files) {
+  const missing = [];
+  for (const file of files) {
+    if (!(await objectExists(file.hash))) missing.push(file.storageKey);
+  }
+  if (missing.length) {
+    const shown = missing.slice(0, 5).join('、');
+    return {
+      status: 409,
+      code: 'missing-file',
+      message: `这些文件还没传上来：${shown}${missing.length > 5 ? ` 等 ${missing.length} 个` : ''}`,
+      missing,
+    };
+  }
+  const revision = revisionOf({ data, files });
+  const manifest = {
+    app: 'infinite-canvas',
+    version: 1,
+    domain,
+    revision,
+    updatedAt: new Date().toISOString(),
+    data,
+    files,
+  };
+  const target = manifestPath(domain);
+  const tmp = `${target}.tmp-${crypto.randomBytes(6).toString('hex')}`;
+  await fsp.mkdir(path.dirname(target), { recursive: true });
+  try {
+    await fsp.writeFile(tmp, JSON.stringify(manifest), 'utf8');
+    // 原子替换：手机随时可能来读，读到的要么是上一份、要么是这一份。
+    await fsp.rename(tmp, target);
+  } catch (error) {
+    try { await fsp.unlink(tmp); } catch { /* 已经不在了 */ }
+    throw Object.assign(new Error(`写画布清单失败：${error.message}`), { code: 'canvas-store-unavailable' });
+  }
+  return { revision, updatedAt: manifest.updatedAt, files: files.length };
+}
+
+/** 一份文件的 sha256（流式，不把整份读进内存）。 */
+function sha256OfFile(filePath) {
+  return new Promise((resolve, reject) => {
+    const hash = crypto.createHash('sha256');
+    const stream = fs.createReadStream(filePath, { highWaterMark: 256 * 1024 });
+    stream.on('error', reject);
+    stream.on('data', (chunk) => hash.update(chunk));
+    stream.on('end', () => resolve(hash.digest('hex')));
+  });
+}
+
+/**
+ * 把一份刚落进暂存区的字节收进库里，回它的哈希。
+ *
+ * 分片上传（`uploads.js`）传完一份画布素材就交给这里：算哈希 → 落进 objects。同内容的文件
+ * 已经在库里就直接丢暂存的那份 —— 画布里的图经常是同一张被引用了好几次，哈希天然去重。
+ *
+ * @returns {Promise<{ hash: string, bytes: number }>}
+ */
+async function storeUploadedFile(stagingPath) {
+  const info = await fsp.stat(stagingPath);
+  if (info.size > MAX_OBJECT_BYTES) {
+    const error = Object.assign(new Error('这份文件太大，画布库装不下'), { code: 'too-large', status: 413 });
+    throw error;
+  }
+  const hash = await sha256OfFile(stagingPath);
+  const target = objectPathOf(hash);
+  await fsp.mkdir(path.dirname(target), { recursive: true });
+  if (await objectExists(hash)) {
+    try { await fsp.unlink(stagingPath); } catch { /* 已经不在了 */ }
+    return { hash, bytes: info.size };
+  }
+  try {
+    await fsp.rename(stagingPath, target);
+  } catch {
+    // 跨设备（暂存根被 `DSH_MOBILE_INBOX` 挪到别的盘）时 rename 会 EXDEV：复制一份再删。
+    await fsp.copyFile(stagingPath, target);
+    try { await fsp.unlink(stagingPath); } catch { /* 已经不在了 */ }
+  }
+  return { hash, bytes: info.size };
+}
+
+/**
+ * GET /api/mobile/v1/canvas/manifest?domain=canvas&rev=<版本号>
+ *
+ * 带 `rev` 且与盘上那份一致时只回一句 `unchanged` —— 画布每开一次就同步一次，稳态那一发
+ * 不该把整份项目图再传一遍（跟会话列表那条条件刷同一个口径）。
+ */
+async function handleCanvasManifestGet(_ctx, req, res) {
+  const query = new URL(req.url || '/', 'http://x').searchParams;
+  const domain = domainOf(query.get('domain'));
+  if (!domain) return sendJson(res, 400, { ok: false, error: { code: 'bad-domain', message: 'domain 只能是 canvas / assets / image-workbench / video-workbench' } });
+  let manifest;
+  try {
+    manifest = await readManifest(domain);
+  } catch (error) {
+    return sendJson(res, 500, { ok: false, error: { code: (error && error.code) || 'canvas-store-unavailable', message: String(error && error.message) } });
+  }
+  if (!manifest) return sendJson(res, 200, { ok: true, domain, revision: null, empty: true, files: [] });
+  const rev = String(query.get('rev') || '');
+  if (rev && rev === manifest.revision) {
+    return sendJson(res, 200, { ok: true, domain, revision: manifest.revision, updatedAt: manifest.updatedAt, unchanged: true });
+  }
+  sendJson(res, 200, {
+    ok: true,
+    domain,
+    revision: manifest.revision,
+    updatedAt: manifest.updatedAt,
+    data: manifest.data,
+    files: Array.isArray(manifest.files) ? manifest.files : [],
+  });
+}
+
+/**
+ * POST /api/mobile/v1/canvas/manifest { domain, data, files }
+ *
+ * 整份替换、不做字段级合并：合并是客户端的事（它手上有本机那份，也有刚拉下去的远端那份）。
+ * 宿主只负责「存下来、版本号算清楚、缺字节就拒绝」。
+ */
+async function handleCanvasManifestSave(_ctx, req, res) {
+  const body = await readJsonBody(req, MAX_MANIFEST_BYTES);
+  if (!body || typeof body !== 'object') {
+    return sendJson(res, 400, { ok: false, error: { code: 'bad-request', message: '请求体不是合法 JSON，或超过体积上限' } });
+  }
+  const normalized = normalizePayload(body);
+  if (normalized.status) {
+    return sendJson(res, normalized.status, { ok: false, error: { code: normalized.code, message: normalized.message, ...(normalized.missing ? { missing: normalized.missing } : {}) } });
+  }
+  let result;
+  try {
+    result = await writeManifest(domainOf(body.domain), normalized.data, normalized.files);
+  } catch (error) {
+    return sendJson(res, 500, { ok: false, error: { code: (error && error.code) || 'canvas-store-unavailable', message: String(error && error.message) } });
+  }
+  if (result.status) {
+    return sendJson(res, result.status, { ok: false, error: { code: result.code, message: result.message, ...(result.missing ? { missing: result.missing } : {}) } });
+  }
+  sendJson(res, 200, { ok: true, domain: domainOf(body.domain), revision: result.revision, updatedAt: result.updatedAt, files: result.files });
+}
+
+/**
+ * POST /api/mobile/v1/canvas/file { hash } → 那份字节。
+ *
+ * 按哈希取、不按路径：客户端构造不出一个能读到别的东西的请求。响应形状与 `/session/file`
+ * 逐字节同形（含协议 v2 的分块信封与 `content-length`）—— 手机那边用的是同一个原生下载器，
+ * 换一个形状就要在 App 里再写一条下载路。
+ */
+async function handleCanvasFile(_ctx, req, res) {
+  const body = await readJsonBody(req);
+  const hash = body && typeof body.hash === 'string' ? body.hash.trim().toLowerCase() : '';
+  const target = objectPathOf(hash);
+  if (!target) {
+    return sendJson(res, 400, { ok: false, error: { code: 'bad-request', message: '需要 { hash }（64 位十六进制）' } });
+  }
+  let info;
+  try {
+    info = await fsp.stat(target);
+  } catch {
+    return sendJson(res, 404, { ok: false, error: { code: 'missing', message: '这份字节不在电脑上了' } });
+  }
+  if (!info.isFile()) {
+    return sendJson(res, 404, { ok: false, error: { code: 'missing', message: '这份字节不在电脑上了' } });
+  }
+
+  const header = { 'content-type': 'application/octet-stream', 'cache-control': 'no-store' };
+  const opened = req && req.__dshE2ee;
+  if (opened && opened.keys && opened.req) {
+    res.writeHead(200, {
+      ...header,
+      'content-type': 'application/x-dsh-e2ee-chunks',
+      'content-length': String(encryptedLengthOf(info.size)),
+      'x-dsh-file-size': String(info.size),
+      'x-dsh-proto': '2',
+      'x-dsh-content-type': 'application/octet-stream',
+    });
+    await writeEncryptedFile(req, res, target, opened);
+    return;
+  }
+
+  res.writeHead(200, { ...header, 'content-length': String(info.size) });
+  if (info.size === 0) return res.end();
+  const stream = fs.createReadStream(target);
+  res.on('close', () => stream.destroy());
+  try {
+    await pipeline(stream, res);
+  } catch {
+    // 头已经发出去了，改不了状态码，只能断开让对端按截断处理（与会话文件那条一致）。
+    try { res.destroy(); } catch { /* 连接已关闭 */ }
+  }
+}
+
+module.exports = {
+  DOMAINS,
+  MAX_OBJECT_BYTES,
+  rootDir,
+  objectPathOf,
+  objectExists,
+  readManifest,
+  writeManifest,
+  storeUploadedFile,
+  handleCanvasManifestGet,
+  handleCanvasManifestSave,
+  handleCanvasFile,
+};

package/lib/mobile/host-web.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * 移动端「打开这台电脑上的 DSH 网页版」：把网页版的一次性登录令牌交给 App。
+ *
+ * 网页版里装着全部插件的管理界面，手机上要直接用它，就得让 App 的 WebView 以已登录身份
+ * 打开宿主自己的 web 端口。而那个端口只认环回、网页版每次启动换一枚一次性令牌，所以
+ * 这件事只能由宿主来办：它已经把令牌签好了，没有理由让手机再走一遍登录。
+ *
+ * 令牌是凭据，所以这条端点走 `guarded`——只有已配对设备拿得到，令牌也绝不进日志。
+ *
+ * 两个值都现取，不缓存：端口会被配置改，连接服务会随宿主重启换一份实例。任何一环取不到
+ * 都如实回「不可用」，让 App 退回「请在电脑上打开网页版」；这里抛错只会把一次能力探测
+ * 变成一条 500，反而看不出是哪一格缺了。
+ */
+
+const { sendJson } = require('../shared/http-util');
+
+/**
+ * 宿主 web 服务真正在听的端口。
+ *
+ * 取 `ctx.webServer.port` 而不是配置里的首选值：真正在听的是它，网页版也只绑在这个号上。
+ */
+function hostPortOf(ctx) {
+  try {
+    const port = ctx?.webServer?.port;
+    return Number.isInteger(port) && port > 0 && port <= 65535 ? port : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 网页版的一次性登录令牌，挂在连接服务的 `browserAuth` 上。
+ *
+ * 用 `ctx.get('connection')` 而不是把它写进 `inject`：注入一个这个宿主版本里没有的服务，
+ * 会让整行永远 pending（见 `host-bridge/transport.js` 里 `peerOf` 的注释）。服务不在、
+ * 字段不在、值不是非空字符串，都算这台宿主现在给不出令牌。
+ */
+function launchTokenOf(ctx) {
+  try {
+    const connection = typeof ctx?.get === 'function' ? ctx.get('connection') : null;
+    const token = connection && connection.browserAuth ? connection.browserAuth.launchToken : null;
+    return typeof token === 'string' && token.length > 0 ? token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** `GET /api/mobile/v1/host-web` */
+async function handleHostWeb(ctx, _req, res) {
+  const port = hostPortOf(ctx);
+  if (port === null) return sendJson(res, 200, { ok: true, available: false, reason: 'no-port' });
+  const token = launchTokenOf(ctx);
+  if (token === null) return sendJson(res, 200, { ok: true, available: false, reason: 'no-launch-token' });
+  sendJson(res, 200, { ok: true, available: true, port, token });
+}
+
+module.exports = {
+  handleHostWeb,
+  hostPortOf,
+  launchTokenOf,
+};

package/lib/mobile/monitor.js

@@ -26,7 +26,7 @@ const {
 const { updateCompletionStates, confirmCompletionFromHistory } = require('./completion.js');
 const { lastTurnOf } = require('./session-last-turn.js');
 const { sessionPreviewFor } = require('./session-preview.js');
-const { workspaceSessionFlags, pendingInteractionOf } = require('./session-flags.js');
+const { workspaceSessionFlags, pendingInteractionOf, pendingCardOf } = require('./session-flags.js');
 
 /**
  * 一条会话在监控视图里的那几格。
@@ -35,8 +35,10 @@ const { workspaceSessionFlags, pendingInteractionOf } = require('./session-flags
  * lastTurnError），因为原生那边解析的是同一套字段：换名字就得同步改 Kotlin，而那段代码
  * 在 App 之外，改错一次是「后台永远不提醒」这种看不见的故障。
  *
- * 另有一个可选字段 `lastMessage`：只给可能要提醒的那几条带上一句「这一轮跑出了什么」，
- * 供原生完成提醒的横幅正文用；拿不到预览就不出这个字段。
+ * 另有两个可选字段：`lastMessage` 只给可能要提醒的那几条带上一句「这一轮跑出了什么」，
+ * 供原生完成提醒的横幅正文用；`pendingCard` 是**等你处理的那张卡本身**（与实时流推的帧
+ * 一字不差），只在那几条待处理的条目上带 —— 手机回前台时先问原生要它，就不必等流重新
+ * 接上才有卡（见 `session-flags.js` 的 pendingCardOf）。拿不到都不出字段。
  */
 function monitorItem(summary, state, fact) {
   const running = summary.running === true;
@@ -60,7 +62,19 @@ function monitorItem(summary, state, fact) {
     completed,
   };
   const pending = pendingInteractionOf(summary.sessionId, summary);
-  if (pending) item.pendingInteraction = pending;
+  if (pending) {
+    item.pendingInteraction = pending;
+    // 卡的内容跟着一起走：它在上面这个判据之外没有第二条路能到手机上（推送只在流接入时
+    // 补发一次）。进指纹是名正言顺的 —— 换一道新题就是真的变了，原生那一拍该被唤醒。
+    const card = pendingCardOf(summary.sessionId, summary);
+    if (card) item.pendingCard = card;
+  } else {
+    // **显式写 null**：原生那头靠「这一格在不在」判「这台宿主认不认识它」，并据此决定
+    // 要不要把「看过了、没有挂起」记成账。不在就永远是「不知道」，回前台也就永远撤不掉
+    // 那张已经在电脑上答掉的旧卡。待处理但没有帧可给（0.1.x 摘要自带口径）时仍然不写，
+    // 那格含义是「不知道」，不是「没有」。
+    item.pendingCard = null;
+  }
   const failure = fact
     ? (fact.status === 'failed' && settledForThisDevice
       ? { turn: fact.turn, code: fact.code ?? null, message: fact.message ?? null }
@@ -74,6 +88,11 @@ function monitorItem(summary, state, fact) {
       turn: fact.turn,
       endedAt: fact.endedAt,
       status: fact.status,
+      // 这一轮是不是**已经有人读过了**（桌面 / 另一台手机 / 这台都算）。与设备无关的
+      // 事实，跟着事实走；上面那个 `completed` 用的是按设备的 `clearedAt`，而桌面点开
+      // 只看 `/api/relay/desktop-read`，它不动那个水位 —— 后台把「已经看过的这一轮」
+      // 弹出来之后，只有这个水位能让它自己消失（见原生那条撤销）。
+      ...(typeof fact.readAt === 'number' && fact.readAt > 0 ? { readAt: fact.readAt } : {}),
       ...(fact.status === 'failed' ? { code: fact.code ?? null, message: fact.message ?? null } : {}),
     };
   }

package/lib/mobile/questions.js

@@ -157,6 +157,20 @@ function attachSession(sessionId, sink) {
   };
 }
 
+/**
+ * 这条会话此刻挂着的提问卡（形状与推送帧一字不差），没有就 undefined。
+ *
+ * 给 `/monitor` 用：手机回前台时可以**先问原生要这张卡**，不必等流重新接上。挂起项本来
+ * 只在进程内、推送只有「接入补发」那一次，回前台那条重连一旦落空卡就缺到下次重进对话；
+ * 让后台轮询顺手把卡的内容带回去，这条缺口才补得上。
+ */
+function pendingCardOf(sessionId) {
+  for (const entry of openEntries(sessionId)) {
+    if (entry.bound) return cardFrame(entry);
+  }
+  return undefined;
+}
+
 /** 会话摘要里的待处理标记（0.2.x 的宿主不会再下发这个字段，见 sessions.js 的用法）。 */
 function pendingKind(sessionId) {
   const open = openEntries(sessionId);
@@ -371,5 +385,6 @@ module.exports = {
   handleQuestionRespond,
   attachSession,
   pendingKind,
+  pendingCardOf,
   resetForTest,
 };

package/lib/mobile/session-flags.js

@@ -54,4 +54,22 @@ function pendingInteractionOf(sessionId, summary) {
   return questions.pendingKind(sessionId);
 }
 
-module.exports = { workspaceSessionFlags, pendingInteractionOf };
+/**
+ * 这条会话挂着的卡**本身**（推送帧原样），拿不到就 undefined。
+ *
+ * 给 `/monitor` 用：手机上那张「等你回答 / 等你审批」的卡只有一条来路 —— 实时流重新
+ * 接上时插件的补发。回前台那条重连一旦落空（退避中、宿主把流收了、网络还没被采纳），
+ * 卡就缺到用户切一次会话为止。后台轮询顺手把卡的内容一起带回去，回前台问原生就能取到，
+ * 不必等网络。审批优先，与 `pendingInteractionOf` 同序 —— 两处判据分家会让「黄点写着
+ * 审批、卡片却是提问」。
+ *
+ * 摘要自己带了 `pendingInteraction`（0.1.x / 桌面口径）时没帧可给：那时候的卡是宿主
+ * 直接推的，本桥手上没有。
+ */
+function pendingCardOf(sessionId, summary) {
+  const reported = summary && summary.pendingInteraction;
+  if (reported === 'approval' || reported === 'plan-review' || reported === 'question') return undefined;
+  return approvals.pendingCardOf(sessionId) || questions.pendingCardOf(sessionId);
+}
+
+module.exports = { workspaceSessionFlags, pendingInteractionOf, pendingCardOf };

package/lib/mobile/uploads.js

@@ -39,6 +39,7 @@ const { sendJson, readJsonBody, readRawBody } = require('../shared/http-util');
 // 头名的大小写不保证（中转会压成小写，Node 版本之间也有差异），复用信封那一份读法。
 const { headerOf } = require('../shared/e2ee-request');
 const { allowedRoots, inAllowedZone } = require('./allowed-zone.js');
+const canvasStore = require('./canvas-store.js');
 
 // 片大小的**起步值** 256KB（base64 后约 341KB）：客户端一次请求的硬预算是 8s
 // （`app/src/api/core.ts` 的 REQUEST_TIMEOUT_MS），一上来就给大片的机器会在慢速上行
@@ -108,7 +109,10 @@ function rememberFinishedUpload(uploadId, record) {
 /**
  * 按 uploadId 取刚落盘的上传。过期 / 不存在返回 null。
  *
- * @returns {{ path: string, name: string, bytes: number } | null}
+ * 记录有两种：收件箱那份带 `path`（图片内联要用它），画布素材那份带 `hash`（没有路径 ——
+ * 画布库只按内容哈希认文件）。两种都要能原样回放给重收一次口的客户端。
+ *
+ * @returns {{ path?: string, hash?: string, purpose?: string, name: string, bytes: number } | null}
  */
 function resolveFinishedUpload(uploadId) {
   const id = String(uploadId || '');
@@ -118,7 +122,8 @@ function resolveFinishedUpload(uploadId) {
     finishedUploads.delete(id);
     return null;
   }
-  return { path: record.path, name: record.name, bytes: record.bytes };
+  const { at, ...rest } = record;
+  return rest;
 }
 
 /**
@@ -345,8 +350,16 @@ async function handleUploadBegin(ctx, req, res) {
   }
   const caps = resolveCaps(body);
   if (caps.status) return fail(res, caps.status, caps.code, caps.message);
+  // 画布库的素材也走这条通道（`purpose: 'canvas'`）：传完不落收件箱，而是按内容哈希收进
+  // 画布库（见 `canvas-store.js`）。它与 `destPath` 互斥：一个是「收件箱里的一份文件」，
+  // 一个是「库里的一份字节」，同时给说明调用方把两件事搞混了。
+  const purpose = body.purpose === undefined || body.purpose === null ? '' : String(body.purpose);
+  if (purpose && purpose !== 'canvas') return fail(res, 400, 'bad-purpose', 'purpose 只认 canvas');
+  if (purpose && body.destPath !== undefined && body.destPath !== null) {
+    return fail(res, 400, 'bad-request', 'purpose 与 destPath 不能同时给');
+  }
   // 落点先判：越界 / 不是目录在这一步就回，不先建暂存再报错 —— 残片要躺满 7 天才清。
-  const destination = await resolveDestDir(ctx, body);
+  const destination = purpose ? { dir: '' } : await resolveDestDir(ctx, body);
   if (destination.status) return fail(res, destination.status, destination.code, destination.message);
   const stagingDir = path.join(inboxRoot(), '.staging');
   try {
@@ -366,6 +379,8 @@ async function handleUploadBegin(ctx, req, res) {
   }
   const job = {
     name: sanitizeName(body.name),
+    // 画布素材：finish 时按内容哈希收进画布库，不进收件箱（见 `canvas-store.js`）。
+    purpose,
     // 指定落点就记在这里，finish 才用得上（中途不再判一次范围：begin 已经认过）。
     destDir: destination.dir,
     stagingPath,
@@ -560,6 +575,9 @@ async function handleUploadFinish(_ctx, req, res) {
   const job = uploads.get(uploadId);
   if (!job) {
     const replay = resolveFinishedUpload(uploadId);
+    if (replay && replay.purpose === 'canvas') {
+      return sendJson(res, 200, { ok: true, hash: replay.hash, bytes: replay.bytes, name: replay.name, uploadId });
+    }
     if (replay) return sendJson(res, 200, { ok: true, ...replay, uploadId });
     return fail(res, 404, 'unknown-upload', '上传会话不存在或已结束');
   }
@@ -574,6 +592,19 @@ async function handleUploadFinish(_ctx, req, res) {
   }
   removeUpload(uploadId, job);
 
+  // 画布素材：不进收件箱，按内容哈希收进画布库，回哈希而不是路径（客户端拿不到也拼不出路径）。
+  if (job.purpose === 'canvas') {
+    try {
+      const stored = await canvasStore.storeUploadedFile(job.stagingPath);
+      // 与收件箱那条同一个理由：回包丢了，手机只会拿同一个 uploadId 再收一次口。
+      rememberFinishedUpload(uploadId, { purpose: 'canvas', hash: stored.hash, bytes: stored.bytes, name: job.name });
+      return sendJson(res, 200, { ok: true, hash: stored.hash, bytes: stored.bytes, name: job.name, uploadId });
+    } catch (error) {
+      try { await fsp.unlink(job.stagingPath); } catch { /* 已经不在了 */ }
+      return fail(res, (error && error.status) || 500, (error && error.code) || 'canvas-store-unavailable', `收进画布库失败：${error.message}`);
+    }
+  }
+
   const dir = job.destDir || path.join(inboxRoot(), today());
   try {
     // 指定落点时目录在 begin 已确认存在：中途被删了就该按落盘失败报，不能悄悄重建一个
@@ -621,7 +652,8 @@ async function inlineUploadedImageBlocks(content) {
     if (!block || block.type !== 'image') continue;
     if (typeof block.data === 'string' && block.data) continue;
     const record = resolveFinishedUpload(block.uploadId);
-    if (!record) return UPLOAD_EXPIRED_MESSAGE;
+    // 画布素材那份没有 `path`（只按哈希躺在画布库里），不能拿来内联：照旧报「过期」。
+    if (!record || !record.path) return UPLOAD_EXPIRED_MESSAGE;
     try {
       const bytes = await fsp.readFile(record.path);
       if (!bytes.length) return UPLOAD_EXPIRED_MESSAGE;

package/lib/relay/preview.js

@@ -18,8 +18,14 @@
  * WS 升级、SSE、分块传输原样穿过。
  *
  * 代价：宿主无法审查内容，边界只有「端口」与「目标主机」两道。前者由 `protectedPorts()` 按
- * 身份拒绝——DSH 自身的 web 端口永远不许从预览进来；后者由 `isAllowedPreviewHost` 收到本机、
- * 私网与保留域名——放开公网，这条管道就等于一台任意目标的连接中转，移动 API 的能力面就扩了。
+ * 身份拒绝——DSH 自身的 web 端口平时不许从预览进来（唯一的例外见下）；后者由
+ * `isAllowedPreviewHost` 收到本机、私网与保留域名——放开公网，这条管道就等于一台任意目标的
+ * 连接中转，移动 API 的能力面就扩了。
+ *
+ * 网页版那一档（`?mode=webapp`）：用户显式要求手机能打开这台电脑上的 DSH 网页版，而网页版
+ * 只绑在宿主自己的环回端口上。这是推翻「不把桌面 GUI 搬进手机」那条刻意设计（2026-11-03）
+ * 的唯一入口——边界随之从「靠端口身份一律拒」收窄成「只放行宿主自己那一个端口、且目标
+ * 必须是环回」：能走这条管道的仍然只有已配对设备，别的端口与别的主机照旧按原规则拒。
  */
 
 const net = require('node:net');
@@ -76,6 +82,25 @@ function parsePreviewPort(req) {
   return port;
 }
 
+/**
+ * 从升级请求的查询串里取 `mode`。
+ *
+ * 它只用来分辨「这一次是不是要连回宿主自己的网页版」。只认恰好等于 `webapp` 的那种取值，
+ * 其余（缺参数、空串、任何别的档位）一律当普通预览：以后再加档位时，老客户端与不认识的
+ * 值不该被顺带改掉行为。
+ *
+ * @returns {'webapp'|null}
+ */
+function parsePreviewMode(req) {
+  let params;
+  try {
+    params = new URL(req && req.url ? req.url : '/', 'http://preview.invalid').searchParams;
+  } catch {
+    return null;
+  }
+  return params.get('mode') === 'webapp' ? 'webapp' : null;
+}
+
 /** 环回类主机：这些写法都指「电脑自己」，拨号要走双栈（见 `previewDialTargets`）。 */
 const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '0.0.0.0', '::1', '::']);
 
@@ -196,9 +221,11 @@ function refuseUpgrade(socket, status, reason, text) {
  * @param {object} deps
  * @param {(req: object) => boolean} deps.authorized 移动端鉴权（lib/mobile/auth.js 的 authorized）
  * @param {() => Set<number>} deps.protectedPorts DSH 自身占用的端口，永远不许从预览进来
+ * @param {() => (number|null)} [deps.ownWebPort] 宿主自己 web 服务的端口，`mode=webapp` 时
+ *   唯一允许的目标；必须是取值器而不是快照（端口会被配置改），缺省表示这台宿主不认这一档
  * @param {(message: string) => void} [deps.onLog]
  */
-function createPreviewService({ authorized, protectedPorts, onLog }) {
+function createPreviewService({ authorized, protectedPorts, ownWebPort = () => null, onLog }) {
   const wss = new WebSocketServer({
     noServer: true,
     perMessageDeflate: false,
@@ -436,7 +463,23 @@ function createPreviewService({ authorized, protectedPorts, onLog }) {
     // DSH 自身的端口按**身份**拒绝，不是按数字拉黑。3080 是宿主 web 服务的实际端口
     // （`ctx.webServer.port`，可能被配置改过），从预览进来等于把桌面端 GUI/API 搬到了
     // 手机内置浏览器里——那条路刻意不做，所以在这里用同一个真值掐掉。
-    if (protectedPorts().has(port)) {
+    //
+    // 网页版那一档是这条设计的**唯一例外**（用户显式要求，2026-11-03）：手机上要打开的
+    // 网页版里装着全部插件的管理界面，它只能由电脑自己端出来。所以这一档不放宽「端口」，
+    // 而是把判据换成两条更窄的：目标端口必须就是宿主自己的 web 端口，目标主机必须是环回。
+    // 放行别的端口等于把预览变回任意本机服务的中转，放行别的主机等于把网页版端给别的机器。
+    if (parsePreviewMode(req) === 'webapp') {
+      let ownPort = null;
+      try { ownPort = ownWebPort(); } catch { ownPort = null; }
+      const ownPortValid = Number.isInteger(ownPort) && ownPort > 0 && ownPort <= 65535;
+      if (!ownPortValid || port !== ownPort) {
+        return refuseUpgrade(socket, 403, 'Forbidden', '网页版只能连电脑自己的 web 端口');
+      }
+      if (!LOOPBACK_HOSTS.has(target.host)) {
+        return refuseUpgrade(socket, 403, 'Forbidden',
+          `网页版只能连电脑自己，${target.host} 不是本机`);
+      }
+    } else if (protectedPorts().has(port)) {
       return refuseUpgrade(socket, 403, 'Forbidden', `端口 ${port} 属于 DSH 自身，不允许预览`);
     }
 

package/lib/routes/mobile-api.js

@@ -46,6 +46,7 @@ const pluginSelf = require('../mobile/plugin-self.js');
 const pluginMarket = require('../mobile/plugin-market.js');
 const { createRelayControlHandlers } = require('../mobile/relay-control.js');
 const uploads = require('../mobile/uploads.js');
+const canvasStore = require('../mobile/canvas-store.js');
 const inboxClean = require('../mobile/inbox-clean.js');
 const git = require('../mobile/git.js');
 const pairing = require('../mobile/pairing.js');
@@ -77,6 +78,8 @@ const API_VERSION = '1';
  *   注册器；与 registerRoute 是两套名字空间，同一 path 可以两者都有，但升级路由重复注册会抛错。
  * @param {object} deps.preview 预览字节管道服务。它自带鉴权与端口边界，不能包在 guarded 里——
  *   升级请求需要的是一次拒绝或一次握手，不是 JSON。
+ * @param {Function} deps.hostWeb 网页版登录令牌那条（见 mobile/host-web.js）。令牌是凭据，
+ *   所以它走 route() 即包 guarded。
  */
 function registerMobileRoutes(deps) {
   const { registerRoute, registerUpgradeRoute, guarded, state, hostMetadata, getSidecarSnapshot, safeLanCandidates, safeIpv6Candidates, lanPortInUse, preview, core, pairingApproval, rotatePairing } = deps;
@@ -482,6 +485,14 @@ function registerMobileRoutes(deps) {
   route('/api/mobile/v1/upload/chunk', uploads.handleUploadChunk)
   route('/api/mobile/v1/upload/finish', uploads.handleUploadFinish)
   route('/api/mobile/v1/upload/abort', uploads.handleUploadAbort)
+
+  // 无限画布的库（App 那页 WebView 里的项目与素材，见 mobile/canvas-store.js）。
+  // 每个域一份清单、字节按内容哈希落在插件自己的目录里；手机推上来、拉下去都走这三条。
+  // 素材字节不另开通道，走上面的分片上传（`purpose: 'canvas'`）—— 断点续传与片大小
+  // 自适应那一套已经在那条路上，再写一份只是多一条会漂的实现。
+  route('/api/mobile/v1/canvas/manifest', canvasStore.handleCanvasManifestGet)
+  route('/api/mobile/v1/canvas/manifest/save', canvasStore.handleCanvasManifestSave)
+  route('/api/mobile/v1/canvas/file', canvasStore.handleCanvasFile)
   // 同一个收件目录的出口：上面四条只往里放，这两条报占用、按龄清掉（见 mobile/inbox-clean.js）。
   // 落盘的文件不认识会话，所以没有「删掉这条对话就顺带清掉它传上来的文件」这条路 ——
   // 唯一的出口只能按龄，口径写在那个文件头。
@@ -490,6 +501,14 @@ function registerMobileRoutes(deps) {
   // 自动清理开关：默认关，打开后宿主每次启动顺手清一次（面板那颗按钮不受它管）。
   route('/api/mobile/v1/inbox/auto', inboxClean.handleInboxAuto)
 
+  // 电脑上的 DSH 网页版（见 mobile/host-web.js）：App 的内置浏览器要直接用它，而那个页面
+  // 只绑在宿主自己的环回端口上、且要一枚一次性登录令牌。令牌是凭据，所以这条**必须**
+  // 包 guarded（不是 PUBLIC_ROUTES）——只有已配对设备才拿得到。
+  //
+  // 它与下面的预览升级是同一件事的两半：这条给手机「去哪儿、带什么」，那条让字节真的流过去
+  // （`mode=webapp` 那一档才允许拨回宿主自己的 web 端口）。
+  route('/api/mobile/v1/host-web', deps.hostWeb)
+
   // 内置浏览器预览（App 侧「点 localhost 链接在内置浏览器里打开」的宿主端一半）。
   //
   // 这是一条 **WebSocket 升级**路由，不是普通 HTTP 路由：手机原生模块按端口在环回监听、

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mobile-plugin",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "description": "Mobile API (/api/mobile/v1) and relay client for the DSH mobile app — desktop profile build (dsh 0.2.x, peers resolved by the host)",
   "license": "MIT",
   "icon": "./icon.png",