@wenbin_wb/dsh-bridge 2.8.5 → 2.8.7

package/CHANGELOG.md

@@ -4,6 +4,40 @@
 
 ---
 
+## [v2.8.7] - 2026-08-30
+
+### 🛜 多网卡智能切换与 macOS 升级与隧道自愈加固
+- **🛜 支持局域网多网卡可视化切换与持久化 (Issue #5)**：
+  - 自动探测并列出宿主机所有可用物理网卡与虚拟网卡（Wi-Fi、以太网、WSL、VMware、Docker 等），支持识别网卡类型与优先级推荐；
+  - 在局域网控制台提供网卡下拉切换器，切换后即时重新生成局域网链接与二维码，并自动记忆持久化保存，彻底解决多网卡/WSL 环境下移动端扫码 IP 无法互通的问题；
+- **🍏 加固 macOS 一键平滑升级**：
+  - `upgradePlugin` 自动补全 macOS GUI / 后台环境下缺失的系统 `PATH` 环境变量（自动兼容 `/opt/homebrew/bin`、`/usr/local/bin`、`~/.nvm/...` 等）；
+  - 自动优先绑定当前运行中 Node.js 同级目录下的 `npm`/`npx` 二进制绝对路径，杜绝 `spawn ENOENT` 升级失败；
+- **🛡️ 优化 macOS Cloudflared 二进制探测与隔离自愈**：
+  - 启动时优先扫描系统 `PATH` 与 Homebrew 安装的 `cloudflared` 全局二进制；
+  - 网络下载解压后自动通过 `xattr -d com.apple.quarantine` 移除 Gatekeeper 隔离标记，并加入 `--version` 运行期校验与自愈。
+
+---
+
+## [v2.8.6] - 2026-08-30
+
+### 📱 移动端交互适配重构 & 隧道保活与传输优化
+- **📱 移动端工作区体验重构与多途径秒级回切**：
+  - 修复移动端工作区面板（Workbench / `dsh-better-sidebar` / 任务管理）遮盖聊天对话与收起后白屏残留问题；
+  - 引入严密的显隐状态机（`dsh-workbench-open`），打开面板时在 Tab 栏常驻 **`✕ 返回对话`** 蓝色操作胶囊；
+  - 提供多途径极速回切：支持点击「返回对话」按钮、点击顶部 Header 会话标题、或在左侧抽屉切换会话秒级返回对话流；
+- **🗂️ DSH 原生收起图标深度适配与双向开合**：
+  - 在移动端侧边栏抽屉顶部 Logo 栏完整集成并复用 DSH 原生自带的收起图标（`[|`）；
+  - 支持点击主界面 `≡` 汉堡菜单流畅滑出抽屉、点击原生收起图标/点击会话/轻触遮罩丝滑收回抽屉；
+- **🖥️ PC 桌面端严格隔离与零侵入**：
+  - 通过媒体查询与运行期断点双重守卫，确保 PC 桌面端（`> 768px`）100% 保持官方原生多列分栏布局与纯净体验，无任何样式污染与多余组件；
+- **🛡️ Cloudflared 隧道守护进程自愈与自动重启**：
+  - 修复 Cloudflared 进程异常退出后无法自动拉起的问题，增加子进程退出监听与指数退避自动重连机制，确保长时间公网访问不断连；
+- **⚡ 自建隧道 SSE 稳定性与数据传输优化**：
+  - 修复弱网环境下 SSE 断线重连问题，精简 Session 列表超大数据负载传输，显著降低移动端带宽占用与弱网延迟。
+
+---
+
 ## [v2.8.5] - 2026-08-27
 
 ### 🎯 产物文件推送改为 AI 指令驱动 & 修复 IM 平台断开连接问题

package/client/client.js

@@ -43,6 +43,7 @@ var BRIDGE_ENDPOINTS = {
   saveCloudflaredConfig: "saveCloudflaredConfig",
   setTunnelAutoStart: "setTunnelAutoStart",
   saveCustomTunnelConfig: "saveCustomTunnelConfig",
+  setLanIp: "setLanIp",
   checkVersion: "checkVersion",
   upgradePlugin: "upgradePlugin",
   restartDsh: "restartDsh",
@@ -376,6 +377,84 @@ function QrBlock({ url, qr, onReset, auth, onNavigateSecurity }) {
     )
   );
 }
+var LanNetworkSelector = React.memo(function LanNetworkSelector2({ lan, onSelectIp }) {
+  const interfaces = lan?.interfaces || [];
+  const selectedIp = lan?.selectedIp || "";
+  const currentIp = lan?.ip || "";
+  const [switching, setSwitching] = React.useState(false);
+  if (!interfaces || interfaces.length <= 1) return null;
+  const handleChange = async (e) => {
+    const val = e.target.value;
+    setSwitching(true);
+    try {
+      await onSelectIp(val || null);
+    } finally {
+      setSwitching(false);
+    }
+  };
+  return React.createElement(
+    "div",
+    {
+      style: {
+        ...s.block,
+        background: "var(--dsw-alias-bg-layer-2, rgba(243, 244, 246, 0.6))",
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid var(--dsw-alias-border-l2, #e5e7eb)",
+        marginTop: 8,
+        marginBottom: 6
+      }
+    },
+    React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 6,
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--dsw-alias-label-primary, currentColor)"
+        }
+      },
+      React.createElement(
+        "span",
+        { style: { display: "inline-flex", alignItems: "center", gap: 5 } },
+        "\u{1F6DC} \u5C40\u57DF\u7F51\u7F51\u5361 / IP \u9009\u62E9"
+      ),
+      switching && React.createElement("span", {
+        style: { fontSize: 11, color: "var(--dsw-alias-brand-primary, #4f6ef7)" }
+      }, "\u5207\u6362\u4E2D\u2026")
+    ),
+    React.createElement(
+      "div",
+      { style: { ...s.muted, fontSize: 11, marginBottom: 6 } },
+      "\u68C0\u6D4B\u5230\u4E3B\u673A\u5B58\u5728\u591A\u5F20\u7F51\u5361\uFF08\u5982\u7269\u7406 Wi-Fi\u3001\u4EE5\u592A\u7F51\u3001WSL \u6216\u865A\u62DF\u673A\uFF09\u3002\u82E5\u9ED8\u8BA4 IP \u65E0\u6CD5\u88AB\u79FB\u52A8\u7AEF\u8BBF\u95EE\uFF0C\u53EF\u624B\u52A8\u5207\u6362\uFF1A"
+    ),
+    React.createElement(
+      "select",
+      {
+        style: {
+          ...s.input,
+          height: 32,
+          fontSize: 12,
+          padding: "0 8px",
+          background: "var(--dsw-alias-bg-layer-1, #ffffff)",
+          cursor: "pointer"
+        },
+        value: selectedIp,
+        onChange: handleChange,
+        disabled: switching
+      },
+      React.createElement("option", { value: "" }, `\u26A1 \u81EA\u52A8\u63A8\u8350 (${interfaces[0]?.address || currentIp} \xB7 ${interfaces[0]?.label || interfaces[0]?.name || ""})`),
+      interfaces.map((iface) => React.createElement("option", {
+        key: `${iface.name}-${iface.address}`,
+        value: iface.address
+      }, `${iface.address} \xB7 ${iface.label || iface.name}${iface.isVirtual ? " [\u865A\u62DF/WSL]" : ""}`))
+    )
+  );
+});
 var CustomTunnelGuide = React.memo(function CustomTunnelGuide2() {
   return React.createElement(
     "div",
@@ -2783,6 +2862,7 @@ function BridgePanel({ rpcCall }) {
     ({ token, hostname }) => act(BRIDGE_ENDPOINTS.saveCloudflaredConfig, { token, hostname }),
     [act]
   );
+  const onSelectLanIp = React.useCallback((ip) => act(BRIDGE_ENDPOINTS.setLanIp, { ip }), [act]);
   const onStartCustom = React.useCallback(() => act(BRIDGE_ENDPOINTS.startCustomTunnel), [act]);
   const onStopCustom = React.useCallback(() => act(BRIDGE_ENDPOINTS.stopCustomTunnel), [act]);
   const onToggleCustomAutoStart = React.useCallback(
@@ -2811,13 +2891,20 @@ function BridgePanel({ rpcCall }) {
   };
   let tabContent;
   if (activeTab === "lan") {
-    tabContent = React.createElement(TunnelCard, {
-      title: "\u5C40\u57DF\u7F51\u8BBF\u95EE",
-      desc: "\u540C\u4E00 Wi-Fi \u4E0B\u7684\u8BBE\u5907\u53EF\u76F4\u63A5\u626B\u7801\u8BBF\u95EE",
-      data: { running: status?.proxy?.running, url: status?.lan?.url, qr: status?.lan?.qr },
-      auth: status?.auth,
-      onNavigateSecurity: navSecurity
-    });
+    tabContent = React.createElement(
+      TunnelCard,
+      {
+        title: "\u5C40\u57DF\u7F51\u8BBF\u95EE",
+        desc: "\u540C\u4E00 Wi-Fi \u4E0B\u7684\u8BBE\u5907\u53EF\u76F4\u63A5\u626B\u7801\u8BBF\u95EE",
+        data: { running: status?.proxy?.running, url: status?.lan?.url, qr: status?.lan?.qr },
+        auth: status?.auth,
+        onNavigateSecurity: navSecurity
+      },
+      React.createElement(LanNetworkSelector, {
+        lan: status?.lan,
+        onSelectIp: onSelectLanIp
+      })
+    );
   } else if (activeTab === "tunnel") {
     tabContent = React.createElement(
       React.Fragment,
@@ -3389,6 +3476,163 @@ function injectMobileStyles() {
         display: none !important;
       }
 
+      /* 3.0 \u5DE5\u4F5C\u533A Workbench / \u4EFB\u52A1\u7BA1\u7406 / \u591A Tab \u680F\u79FB\u52A8\u7AEF\u81EA\u9002\u5E94\u9002\u914D */
+      body:not(.dsh-workbench-open) div[class*="nArs4W_panel"],
+      body:not(.dsh-workbench-open) div[class*="workbench_panel"],
+      body:not(.dsh-workbench-open) div[class*="workbenchPanel"],
+      div[class*="nArs4W_panel"][class*="panelHidden"],
+      div[class*="workbench_panel"][class*="panelHidden"],
+      div[class*="workbenchPanel"][class*="panelHidden"],
+      div[class*="panelHidden"] {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+        width: 0 !important;
+        height: 0 !important;
+        max-height: 0 !important;
+        z-index: -1 !important;
+        opacity: 0 !important;
+        transform: translateX(105%) !important;
+      }
+
+      body.dsh-workbench-open div[class*="nArs4W_panel"]:not([class*="panelHidden"]),
+      body.dsh-workbench-open div[class*="workbench_panel"]:not([class*="panelHidden"]),
+      body.dsh-workbench-open div[class*="workbenchPanel"]:not([class*="panelHidden"]) {
+        display: flex !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+        top: var(--dsh-mobile-header-h, 52px) !important;
+        height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
+        max-height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
+        z-index: 50 !important;
+        box-sizing: border-box !important;
+        background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+        transform: none !important;
+        opacity: 1 !important;
+      }
+
+      /* Tab \u680F\uFF1A\u6A2A\u5411\u6ED1\u52A8\u624B\u52BF + \u5E72\u51C0\u7684\u5E95\u90E8\u8FB9\u6846\uFF0C\u675C\u7EDD\u4E0E\u9876\u90E8\u79FB\u52A8\u7AEF Header \u91CD\u53E0 */
+      div[class*="nArs4W_tabBar"],
+      div[class*="workbench_tabBar"],
+      div[class*="tabBar"] {
+        min-height: 40px !important;
+        height: 40px !important;
+        background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 0 8px !important;
+        gap: 6px !important;
+        overflow: visible !important;
+        box-sizing: border-box !important;
+      }
+
+      div[class*="nArs4W_tabList"],
+      div[class*="tabList"] {
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+        flex: 1 1 auto !important;
+        min-width: 0 !important;
+        overflow-x: auto !important;
+        scrollbar-width: none !important;
+        -webkit-overflow-scrolling: touch !important;
+      }
+      div[class*="nArs4W_tabList"]::-webkit-scrollbar,
+      div[class*="tabList"]::-webkit-scrollbar {
+        display: none !important;
+      }
+
+      /* \u5355\u4E2A Tab \u80F6\u56CA\u5316\uFF0C\u6587\u5B57\u8D85\u957F\u81EA\u52A8\u6253\u70B9\uFF0C\u9632\u6B62 Tab \u4E92\u76F8\u6324\u538B */
+      div[class*="nArs4W_tab"],
+      div[class*="workbench_tab"] {
+        flex: 0 0 auto !important;
+        max-width: 170px !important;
+        min-width: 70px !important;
+        height: 30px !important;
+        padding: 0 8px 0 10px !important;
+        border-radius: 6px !important;
+        font-size: 12.5px !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        gap: 6px !important;
+        background: var(--dsw-alias-bg-layer-2, #f3f4f6) !important;
+        color: var(--dsw-alias-label-secondary, #6b7280) !important;
+        cursor: pointer !important;
+        user-select: none !important;
+        box-sizing: border-box !important;
+      }
+
+      div[class*="nArs4W_tabActive"],
+      div[class*="workbench_tabActive"] {
+        background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+        color: var(--dsw-alias-label-primary, #111827) !important;
+        font-weight: 600 !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+      }
+
+      span[class*="nArs4W_tabTitle"],
+      span[class*="tabTitle"] {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        flex: 1 1 auto !important;
+      }
+
+      button[class*="nArs4W_tabClose"],
+      button[class*="tabClose"] {
+        width: 18px !important;
+        height: 18px !important;
+        border-radius: 50% !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        flex-shrink: 0 !important;
+        opacity: 0.6 !important;
+        padding: 0 !important;
+      }
+
+      button[class*="nArs4W_tabBarPlus"],
+      button[class*="tabBarPlus"] {
+        width: 28px !important;
+        height: 28px !important;
+        border-radius: 50% !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        flex-shrink: 0 !important;
+      }
+
+      /* \u79FB\u52A8\u7AEF\u9762\u677F\u53F3\u4E0A\u89D2\u201C\u8FD4\u56DE\u5BF9\u8BDD / \u2715 \u6536\u8D77\u201D\u6309\u94AE\uFF1A\u5E38\u9A7B\u53F3\u4FA7\uFF0C\u9192\u76EE\u4E14\u6613\u89E6\u8FBE */
+      .dsh-mobile-panel-close-btn {
+        margin-left: 8px !important;
+        flex: 0 0 auto !important;
+        height: 28px !important;
+        padding: 0 10px !important;
+        border-radius: 14px !important;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        background: #2563eb !important;
+        color: #ffffff !important;
+        border: none !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        gap: 4px !important;
+        cursor: pointer !important;
+        user-select: none !important;
+        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
+        white-space: nowrap !important;
+        transition: transform 0.1s, opacity 0.15s !important;
+        z-index: 10 !important;
+      }
+      .dsh-mobile-panel-close-btn:active {
+        transform: scale(0.95) !important;
+        opacity: 0.85 !important;
+      }
+
       /* 3.1 \u4F1A\u8BDD\u5BF9\u8BDD\u5934\u90E8\u9876\u680F\uFF1A\u79FB\u52A8\u7AEF\u9632\u6324\u538B\u4E0E\u7A7A\u95F4\u91CA\u653E\u4F18\u5316\uFF08\u4E25\u683C\u6392\u9664 .dsh-mobile-app-header\uFF09 */
       div[class*="_centerCol"] header,
       header[class*="wSkVaW_header"] {
@@ -3583,19 +3827,53 @@ function injectMobileStyles() {
         transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
         overflow-y: auto !important;
         border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
+        pointer-events: auto !important;
       }
       body.dsh-drawer-open div[class*="_sidebarCol"] {
         transform: translateX(0) !important;
         box-shadow: 4px 0 28px rgba(0, 0, 0, 0.25) !important;
+        pointer-events: auto !important;
       }
 
-      /* \u62BD\u5C49\u5185\u90E8\uFF1A\u5F3A\u5236 100% \u5BBD\u5EA6\uFF0C\u9690\u85CF\u5197\u4F59\u6298\u53E0\u6309\u94AE */
+      /* \u62BD\u5C49\u5185\u90E8\uFF1A\u5F3A\u5236 100% \u5BBD\u5EA6\uFF0C\u65E0\u8BBA\u5185\u90E8\u72B6\u6001\u5982\u4F55\u5747\u6B63\u5E38\u5C55\u5F00\u5E76\u5C55\u793A DSH \u81EA\u5E26\u7684\u9876\u90E8\u6536\u8D77\u4FA7\u8FB9\u680F\u56FE\u6807 */
       body.dsh-drawer-open div[class*="hHd-Xa_root"] {
         width: 100% !important;
         max-width: 100% !important;
+        min-width: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
+      }
+      body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="hHd-Xa_regionArea"],
+      body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] button[class*="hHd-Xa_newSession"],
+      body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="qDHVXG_root"] {
+        display: flex !important;
+        visibility: visible !important;
+      }
+      div[class*="hHd-Xa_logoRow"] {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        width: 100% !important;
+        padding: 10px 14px 6px 14px !important;
+        box-sizing: border-box !important;
       }
       div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"] {
-        display: none !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        width: 32px !important;
+        height: 32px !important;
+        border-radius: 8px !important;
+        color: var(--dsw-alias-label-secondary, #6b7280) !important;
+        background: transparent !important;
+        border: none !important;
+        cursor: pointer !important;
+        margin-left: auto !important;
+        transition: background 0.15s, color 0.15s !important;
+      }
+      div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"]:active {
+        background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.06)) !important;
+        color: var(--dsw-alias-label-primary, #111827) !important;
       }
 
       /* \u8BBE\u7F6E\u5F39\u7A97\u6253\u5F00\u65F6\u89E3\u9664\u62BD\u5C49\u9690\u85CF\u9650\u5236 */
@@ -3613,8 +3891,6 @@ function injectMobileStyles() {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(4px);
-        -webkit-backdrop-filter: blur(4px);
         z-index: 9999;
         display: none !important;
       }
@@ -3866,7 +4142,8 @@ function injectMobileStyles() {
 
     @media (min-width: 769px) {
       .dsh-mobile-app-header,
-      .dsh-mobile-backdrop {
+      .dsh-mobile-backdrop,
+      .dsh-mobile-panel-close-btn {
         display: none !important;
       }
     }
@@ -3890,16 +4167,21 @@ function setupMobileExperience(rpcCall, ctx) {
         <line x1="3" y1="15" x2="14" y2="15"></line>
       </svg>
     `;
-    leftBtn.onclick = () => {
+    leftBtn.onclick = (e) => {
+      e.stopPropagation();
       const isOpen = document.body.classList.toggle("dsh-drawer-open");
       if (isOpen) {
-        const collapsedToggle = document.querySelector('div[class*="hHd-Xa_collapsed"] button[class*="hHd-Xa_toggle"]');
-        if (collapsedToggle) collapsedToggle.click();
+        const expand = document.querySelector('button[aria-label*="\u6253\u5F00\u4FA7\u8FB9\u680F"], button[title*="\u6253\u5F00\u4FA7\u8FB9\u680F"]');
+        if (expand) expand.click();
       }
     };
     titleEl = document.createElement("div");
     titleEl.className = "dsh-mobile-header-title";
     titleEl.innerText = "\u65B0\u4F1A\u8BDD";
+    titleEl.onclick = () => {
+      const openPanels = document.querySelectorAll('div[class*="nArs4W_panel"]:not([class*="panelHidden"]), div[class*="workbench_panel"]:not([class*="panelHidden"])');
+      openPanels.forEach((p) => p.classList.add("nArs4W_panelHidden"));
+    };
     const rightBtn = document.createElement("button");
     rightBtn.className = "dsh-header-new-btn";
     rightBtn.title = "\u65B0\u5EFA\u4F1A\u8BDD";
@@ -3911,6 +4193,8 @@ function setupMobileExperience(rpcCall, ctx) {
       </svg>
     `;
     rightBtn.onclick = () => {
+      const openPanels = document.querySelectorAll('div[class*="nArs4W_panel"]:not([class*="panelHidden"]), div[class*="workbench_panel"]:not([class*="panelHidden"])');
+      openPanels.forEach((p) => p.classList.add("nArs4W_panelHidden"));
       const dshNewBtn = document.querySelector('button[aria-label="\u65B0\u5EFA\u4F1A\u8BDD"]');
       if (dshNewBtn) dshNewBtn.click();
     };
@@ -3935,6 +4219,59 @@ function setupMobileExperience(rpcCall, ctx) {
   if (typeof ctx?.sessions?.list?.subscribe === "function") {
     ctx.sessions.list.subscribe(syncMobileTitle);
   }
+  if (typeof ctx?.sessions?.active?.subscribe === "function") {
+    ctx.sessions.active.subscribe(() => {
+      if (document.body.classList.contains("dsh-drawer-open")) {
+        document.body.classList.remove("dsh-drawer-open");
+      }
+      if (typeof window !== "undefined" && window.innerWidth <= 768) {
+        document.body.classList.remove("dsh-workbench-open");
+        const openPanels = document.querySelectorAll('div[class*="nArs4W_panel"]:not([class*="panelHidden"]), div[class*="workbench_panel"]:not([class*="panelHidden"])');
+        openPanels.forEach((p) => p.classList.add("nArs4W_panelHidden"));
+      }
+    });
+  }
+  const ensurePanelCloseButton = () => {
+    if (typeof window === "undefined") return;
+    if (window.innerWidth > 768) {
+      document.querySelectorAll(".dsh-mobile-panel-close-btn").forEach((btn) => btn.remove());
+      return;
+    }
+    const panels = document.querySelectorAll('div[class*="nArs4W_panel"]:not([class*="panelHidden"]), div[class*="workbench_panel"]:not([class*="panelHidden"])');
+    panels.forEach((p) => {
+      const bar = p.querySelector('div[class*="tabBar"], div[class*="nArs4W_tabBar"]');
+      if (bar && !bar.querySelector(".dsh-mobile-panel-close-btn")) {
+        const btn = document.createElement("button");
+        btn.className = "dsh-mobile-panel-close-btn";
+        btn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg><span>\u8FD4\u56DE\u5BF9\u8BDD</span>`;
+        btn.onclick = (e) => {
+          e.stopPropagation();
+          document.body.classList.remove("dsh-workbench-open");
+          p.classList.add("nArs4W_panelHidden");
+          const collapseBtn = document.querySelector('button[class*="toggleButton"][aria-label*="\u6536\u8D77"]');
+          if (collapseBtn) collapseBtn.click();
+        };
+        bar.appendChild(btn);
+      }
+    });
+  };
+  const panelObserver = new MutationObserver(ensurePanelCloseButton);
+  panelObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
+  window.addEventListener("resize", ensurePanelCloseButton);
+  document.addEventListener("click", (e) => {
+    if (typeof window === "undefined" || window.innerWidth > 768) return;
+    const trigger = e.target.closest('button[aria-label*="\u9762\u677F"], button[aria-label*="\u5DE5\u4F5C\u533A"], div[class*="toggleCluster"] button, button[class*="subagent"], div[class*="headerActions"] button, div[class*="titleRow"] button');
+    if (trigger && !trigger.classList.contains("dsh-mobile-panel-close-btn") && !trigger.classList.contains("dsh-header-menu-btn") && !trigger.classList.contains("dsh-header-new-btn")) {
+      document.body.classList.add("dsh-workbench-open");
+    }
+  }, true);
+  document.addEventListener("click", (e) => {
+    if (typeof window === "undefined" || window.innerWidth > 768) return;
+    const toggle = e.target.closest('button[aria-label*="\u6536\u8D77\u4FA7\u8FB9\u680F"], button[title*="\u6536\u8D77\u4FA7\u8FB9\u680F"]');
+    if (toggle) {
+      document.body.classList.remove("dsh-drawer-open");
+    }
+  }, true);
   let backdrop = document.querySelector(".dsh-mobile-backdrop");
   if (!backdrop) {
     backdrop = document.createElement("div");
@@ -3971,10 +4308,16 @@ function setupMobileExperience(rpcCall, ctx) {
           return;
         }
       }
-      const sessionRow = e.target.closest('div[class*="sessionRow"], div[role="treeitem"]');
+      const sessionRow = e.target.closest('a, div[class*="sessionRow"], div[role="treeitem"]');
       if (sessionRow) {
-        document.body.classList.remove("dsh-drawer-open");
+        setTimeout(() => {
+          if (document.body.classList.contains("dsh-drawer-open")) {
+            document.body.classList.remove("dsh-drawer-open");
+          }
+        }, 80);
       }
+    } else if (e.target.classList?.contains("dsh-mobile-backdrop")) {
+      document.body.classList.remove("dsh-drawer-open");
     }
   }, true);
   let longPressTimer = null;
@@ -4570,28 +4913,7 @@ function RemoteDirectoryFlow(props) {
   const outcome = React.useRef(props);
   outcome.current = props;
   const armed = React.useRef(false);
-  React.useEffect(() => {
-    if (!open) {
-      armed.current = false;
-      return;
-    }
-    if (armed.current) return;
-    armed.current = true;
-    if (isLocalEnvironment()) {
-      const pickFn = typeof pick === "function" ? pick : typeof window.__dshClientCtx?.workspaces?.pickDirectory === "function" ? () => window.__dshClientCtx.workspaces.pickDirectory() : null;
-      if (pickFn) {
-        pickFn().then((chosenPath) => {
-          if (chosenPath === null) {
-            if (outcome.current?.onCancel) outcome.current.onCancel();
-          } else if (chosenPath) {
-            if (outcome.current?.onPicked) outcome.current.onPicked(chosenPath);
-          }
-        }, (err) => {
-          if (outcome.current?.onError) outcome.current.onError(err instanceof Error ? err.message : String(err));
-        });
-        return;
-      }
-    }
+  const openRemoteModal = () => {
     if (typeof window.__dshOpenRemoteWorkspaceModal === "function") {
       window.__dshOpenRemoteWorkspaceModal(
         (res) => {
@@ -4610,7 +4932,42 @@ function RemoteDirectoryFlow(props) {
           }
         }
       );
+    } else if (outcome.current?.onCancel) {
+      outcome.current.onCancel();
+    }
+  };
+  React.useEffect(() => {
+    if (!open) {
+      armed.current = false;
+      return;
+    }
+    if (armed.current) return;
+    armed.current = true;
+    const isNativeHost = typeof window !== "undefined" && (window.electron || window.__DSH_NATIVE_HOST__);
+    if (isNativeHost || isLocalEnvironment()) {
+      const pickFn = typeof pick === "function" ? pick : typeof window.__dshClientCtx?.workspaces?.pickDirectory === "function" ? () => window.__dshClientCtx.workspaces.pickDirectory() : null;
+      if (pickFn) {
+        try {
+          const promise = pickFn();
+          if (promise && typeof promise.then === "function") {
+            promise.then((chosenPath) => {
+              if (chosenPath === null) {
+                if (outcome.current?.onCancel) outcome.current.onCancel();
+              } else if (chosenPath) {
+                if (outcome.current?.onPicked) outcome.current.onPicked(chosenPath);
+              }
+            }).catch(() => {
+              openRemoteModal();
+            });
+            return;
+          }
+        } catch {
+          openRemoteModal();
+          return;
+        }
+      }
     }
+    openRemoteModal();
   }, [open, pick]);
   return null;
 }