dsh-remote-mobile 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -5,6 +5,37 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.2] - 2026-08-26
+
+### Features (新功能)
+- **新版本更新提醒**：设置面板打开时从 npm registry 拉取 `dsh-remote-mobile` 最新版本号，与当前安装版本做语义化版本比较；**仅当检测到新版本**时，在标题版本号旁显示一个小巧的红色提醒「🚀 发现新版本 vX.Y.Z」，点击直达 npm 对应发布页。拉取失败（离线 / 网络异常）或已是最新版本时完全不显示，不干扰界面，也无需前端轮询。
+
+### Docs (文档)
+- **README「这是什么」章节补充手机端样式适配说明**：说明插件针对 DSH 界面做的移动端样式适配（侧边栏抽屉折叠与可拖拽展开把手、设置弹窗居中微缩、对话正文高密度排版等）。
+
+---
+
+## [1.4.1] - 2026-08-26
+
+### Features (新功能)
+- **样式片段一键复制**：样式覆写页每个片段（内置预设与自定义小插件）在「查看 CSS」旁新增 **「📋 复制样式」** 按钮，点击即将该片段 CSS 完整复制到剪贴板并给出 toast 反馈，无需手动框选整段样式。
+- **非安全上下文 Clipboard Polyfill**：HTTP + 外部 IP（Tailscale / 局域网）等非安全上下文下 `navigator.clipboard` 为 `undefined`，官方 bundle 直接调用 `writeText` 会抛 `Cannot read properties of undefined` 崩溃；现全端注入 polyfill（位于 `<head>` 最前、先于官方 bundle 生效），提供 `execCommand('copy')` 降级实现，原生可用时不替换，顺带保障上一条复制按钮与非安全环境下的复制功能可用。
+
+### Fixed (缺陷修复)
+- **修复：设置弹窗整窗缩放未覆盖导航按钮列**。`preset-settings` 等比微缩由覆盖单个卡片改为覆盖 `dialog` 全部直接子元素（`> *`），左侧 nav 按钮列表不再漏缩放；右侧内容保持 530px 最小宽度。
+- **修复：插件市场弹窗窄屏隐藏左侧导航**。重置官方 `@media(max-width:560px)` 下隐藏左侧 nav 的行为（同选择器 + `!important` 稳压），导航保持可见。
+- **修复：设置弹窗覆写误伤通用 Modal**。`preset-settings` 卡片/内部容器选择器改为限定在 overlay 上下文内（`:has` 限定），内测声明等直接挂 body、无 `data-slot` overlay 的通用 Modal 不再被 530px/zoom 覆写。
+- **修复：composer 工具栏在窄屏过宽**。`preset-main` 工具栏紧凑化：gap/内边距缩小、发送按钮 30px、图标 12px、trigger 文字 12px，保持两行布局；命令按钮保持 26px 正方形、trigger 高度还原官方 28px。
+- **修复：移动端侧边栏抽屉依赖生态插件选择器**。`preset-sidebar` 选择器全部改用官方稳定 class（`_frame` / `_sidebarCol` / `_centerCol`），不再依赖 web-ui 的 `data-pane` / `data-dsh-frame`，装不装 web-ui 均生效。
+- **修复：窄屏详情列与顶部 header 重叠**。窄屏（≤900px）隐藏详情列，杜绝详情浮层与顶部 header 重叠；覆盖 web-ui 的 `conversation-header` 60px 让位与 `session-utilities` 按钮 `min-height:44px`（更高特异性 + 同断点，保留 min-width 触摸目标）。
+- **修复：未装 web-ui 时窄屏点正文不收起抽屉**。新增 `dsh-mobile-dismiss` 守卫：未装 web-ui 时窄屏点正文自动收起抽屉（class 定位 + 让位守卫，不误伤抽屉内按钮）。
+- **新增：设置弹窗顶部固定滑动浏览提示**。`overlay ::before`（absolute，不随内容滚动）提示用户可上下滑动浏览弹窗内容。
+
+### Docs (文档)
+- **新增 `screenshots.json`**：收录项目各界面截图图片 URL，便于 README 预览图管理与引用。
+
+---
+
 ## [1.4.0] - 2026-08-24
 
 ### Compatibility (通用插件共存保护)

package/README.md

@@ -37,6 +37,8 @@
 
 DSH 核心服务出于安全考虑默认仅监听本地回环地址（`127.0.0.1`），手机、平板或其他电脑无法从外部访问 Web 控制台。本项目通过**访问控制中间件**与**请求隔离技术**，安全地开放了 **Tailscale 虚拟私网** 以及 **本地局域网 (Wi-Fi/LAN)** 访问能力，并提供传输加密、扫码配对、长期密码认证与防暴力破解审计体系。
 
+手机端访问时，插件还针对 DSH 界面做了**移动端样式适配**：侧边栏抽屉折叠与可拖拽展开把手、设置弹窗居中微缩、对话正文高密度排版等，让手机上的使用体验更贴近桌面端。
+
 ---
 
 <span id="advantages"></span>
@@ -154,7 +156,7 @@ dsh web --no-open
 ### 4. 实时状态同步与国际化
 - **SSE 实时事件推送**：基于 Server-Sent Events 实现新设备接入、设备重连、会话撤销及安全告警的实时通知，内置连接双向关闭监听与幂等清理。
 - **全界面中英文双语自适应**：根据 DSH 全局语言偏好与浏览器环境，动态自适应中英文面板、提示及手机端界面。
-- **非 HTTPS 兼容补丁**：自动注入 `crypto.randomUUID` Polyfill，解决移动端浏览器在 HTTP 非安全上下文下缺少原生 API 的报错。
+- **非 HTTPS 兼容补丁**：自动注入 `crypto.randomUUID` 与 `navigator.clipboard` Polyfill，解决移动端浏览器在 HTTP 非安全上下文下缺少原生 API 的报错（`clipboard` polyfill 保证非安全上下文下复制/样式复制功能正常）。
 
 ### 5. 移动端样式片段（样式小插件）
 
@@ -162,7 +164,7 @@ DSH Web 界面在手机上仍有不少沿袭桌面端的样式问题，插件内
 
 - **按界面区域划分的三段内置预设**：`preset-sidebar` 侧边栏抽屉导航（折叠 0 宽度、可拖拽悬浮把手）、`preset-settings` 设置面板适配（弹窗居中微缩、遮罩锁滚动）、`preset-main` 对话正文**高密度排版**（小字号 12.5px + 紧凑行距 + 收紧边距 → 每行展示更多内容；基于稳定 HTML 元素与 localName 后缀，不做布局缩放，无右侧留白），默认移动端启用、PC 关闭；
 - **PC / 移动端分别启停（按视口宽度判定，与设备无关）**：每段预设和每个自定义片段都有独立的「🖥️ PC」「📱 移动端」两个开关；「移动端」= 窄视口（≤900px）生效——**PC 浏览器拉小窗口也会生效**，「PC」= 宽视口（>900px）生效，两端都开 = 全宽度生效；
-- **用户自定义（样式小插件）**：在 **设置 ⚙️ → 远程与移动端 → 🎨 移动端样式片段** 中粘贴自己的 CSS 即可新增片段，支持编辑/启停/删除，持久化于 `~/.dsh/remote-mobile/style-snippets.json`，保存后下一次页面加载即生效，无需重启；
+- **用户自定义（样式小插件）**：在 **设置 ⚙️ → 远程与移动端 → 🎨 移动端样式片段** 中粘贴自己的 CSS 即可新增片段，支持编辑/启停/删除/**一键复制**（每个片段「查看 CSS」旁都有「📋 复制样式」按钮），持久化于 `~/.dsh/remote-mobile/style-snippets.json`，保存后下一次页面加载即生效，无需重启；
 - **按 UA 打标记 + 按宽度生效**：样式按视口宽度档生效（见上），与设备 UA 无关；移动端 UA 请求额外给 `<html>` 打上 `data-dsh-mobile="1"` 标记作为作用域钩子，并注入可拖拽的展开把手脚本（全端注入，运行时仅在侧边栏折叠时生效）。
 
 ### 6. 插件通用共存保护

package/README_EN.md

@@ -37,6 +37,8 @@ English Documentation · [简体中文](./README.md)
 
 By default, DSH strictly listens only to the local loopback address (`127.0.0.1`), preventing mobile devices, tablets, or external computers from accessing the Web console. This plugin uses **access control middleware** and **request isolation** to securely open up **Tailscale Private Network** and **Local Area Network (LAN / Wi-Fi)** access, complete with RSA transmission encryption, QR code pairing, persistent password auth, and automated brute-force defense.
 
+When accessed from a phone, the plugin also adapts the DSH interface for **mobile styles**: a collapsible sidebar drawer with a draggable floating toggle, a centered/scaled settings dialog, and dense conversation typography — so the mobile experience feels closer to the desktop.
+
 ---
 
 <span id="advantages"></span>
@@ -153,7 +155,7 @@ Open the DSH Web Console in your browser, navigate to **Settings ⚙️ -> Remot
 ### 4. Real-Time Sync & Internationalization
 - **SSE Real-Time Push**: Push notifications for new device pairing, reconnections, revocations, and security alerts via Server-Sent Events, with bidirectional close listeners and idempotent cleanup.
 - **Adaptive Bilingual UI**: Automatically switches between English and Simplified Chinese based on DSH settings and browser language preferences.
-- **Non-HTTPS Compatibility Patch**: Injects `crypto.randomUUID` Polyfill into HTML templates to fix missing native Web Crypto APIs in HTTP non-secure mobile browser contexts.
+- **Non-HTTPS Compatibility Patch**: Injects `crypto.randomUUID` and `navigator.clipboard` Polyfills into HTML templates to fix missing native Web Crypto / Clipboard APIs in HTTP non-secure mobile browser contexts (the clipboard polyfill keeps copy and snippet-copy working in non-secure contexts).
 
 ### 5. Mobile Style Snippets (style mini-plugins)
 
@@ -161,7 +163,7 @@ The DSH web UI still carries many desktop-oriented styles on phones. This plugin
 
 - **Three area-based built-in presets**: `preset-sidebar` (collapsed sidebar becomes a 0-width drawer with a draggable floating toggle), `preset-settings` (centered/scaled settings dialog with locked overlay scroll), `preset-main` (dense conversation typography with scrollable code blocks). Mobile on / PC off by default;
 - **Separate PC / Mobile toggles (viewport-width based, device-independent)**: every preset and custom snippet has independent PC and Mobile switches; "Mobile" = applies at narrow viewports (≤900px) — **a PC browser with a narrow window gets it too**; "PC" = applies at wide viewports (>900px); both on = applies at all widths;
-- **Custom snippets (your own mini-plugins)**: paste your CSS in **Settings ⚙️ → Remote & Mobile → 🎨 Mobile Style Snippets** to add a snippet, with edit/toggle/delete support. Persisted to `~/.dsh/remote-mobile/style-snippets.json`; changes apply on the next page load without restart;
+- **Custom snippets (your own mini-plugins)**: paste your CSS in **Settings ⚙️ → Remote & Mobile → 🎨 Mobile Style Snippets** to add a snippet, with edit/toggle/delete/**one-click copy** support (every snippet has a "📋 Copy CSS" button next to "View CSS"). Persisted to `~/.dsh/remote-mobile/style-snippets.json`; changes apply on the next page load without restart;
 - **UA-based marker + width-based styling**: styles apply by viewport-width band (see above), independent of device UA; mobile UA requests additionally add `data-dsh-mobile="1"` to `<html>` as a scope hook, and the draggable toggle script is injected for all clients (it only activates while the sidebar is collapsed).
 
 ### 6. Generic Plugin Coexistence Protection

package/lib/bridge/compat.d.ts

@@ -38,11 +38,32 @@ import { type StyleSnippetStore } from '../styles/style-snippets.js';
  * 针对非安全上下文（HTTP + 外部 IP）提供轻量高精度的 UUID v4 生成能力
  */
 export declare const CRYPTO_POLYFILL_SNIPPET = "\n(function() {\n  if (typeof window !== \"undefined\") {\n    if (!window.crypto) window.crypto = {};\n    if (typeof window.crypto.randomUUID !== \"function\") {\n      window.crypto.randomUUID = function() {\n        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n          var r = Math.random() * 16 | 0;\n          var v = c === 'x' ? r : (r & 0x3 | 0x8);\n          return v.toString(16);\n        });\n      };\n    }\n  }\n})();\n";
+/**
+ * 注入到 index.html <head> 最前列的 Clipboard API Polyfill 脚本
+ * 针对非安全上下文（HTTP + 外部 IP，如 Tailscale / 局域网）下
+ * navigator.clipboard 为 undefined 的场景：提供 execCommand('copy') 降级实现，
+ * 避免官方 bundle 直接调用 navigator.clipboard.writeText 时抛
+ * "Cannot read properties of undefined (reading 'writeText')" 崩溃。
+ * 原生可用时不做任何替换。
+ */
+export declare const CLIPBOARD_POLYFILL_SNIPPET = "\n(function() {\n  if (typeof navigator === \"undefined\") return;\n  try {\n    if (navigator.clipboard && typeof navigator.clipboard.writeText === \"function\") return;\n    var writeText = function(text) {\n      try {\n        var ta = document.createElement('textarea');\n        ta.value = String(text == null ? '' : text);\n        ta.setAttribute('readonly', '');\n        ta.style.position = 'fixed';\n        ta.style.top = '-9999px';\n        ta.style.left = '-9999px';\n        document.body.appendChild(ta);\n        ta.select();\n        var ok = document.execCommand('copy');\n        document.body.removeChild(ta);\n        return ok ? Promise.resolve() : Promise.reject(new Error('copy failed'));\n      } catch (err) {\n        return Promise.reject(err);\n      }\n    };\n    var readText = function() {\n      return Promise.reject(new Error('clipboard readText is not supported in insecure context'));\n    };\n    try {\n      if (!navigator.clipboard) navigator.clipboard = {};\n      if (typeof navigator.clipboard.writeText !== \"function\") navigator.clipboard.writeText = writeText;\n      if (typeof navigator.clipboard.readText !== \"function\") navigator.clipboard.readText = readText;\n    } catch (err) {\n      try {\n        Object.defineProperty(navigator, 'clipboard', {\n          value: { writeText: writeText, readText: readText },\n          configurable: true,\n        });\n      } catch (err2) {}\n    }\n  } catch (err) {}\n})();\n";
 /**
  * 注入到 index.html 的移动端悬浮入口拖拽与位置记忆脚本
  * 允许用户在移动端上下随心拖动左上角入口把手，避免遮挡聊天内容，并自动保存位置
  */
-export declare const DRAGGABLE_NAV_SNIPPET = "\n(function() {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n  /* ===== \u9632\u8BEF\u6536\u8D77\u5B88\u536B =====\n   * \u7B2C\u4E09\u65B9\u751F\u6001\u63D2\u4EF6\uFF08\u5982 @linxin666/dsh-web-ui-all \u7684\u79FB\u52A8\u7AEF\u62BD\u5C49\u589E\u5F3A\uFF09\u4F1A\u5728\u7528\u6237\u70B9\u51FB\n   * \u4FA7\u8FB9\u680F\u6761\u76EE\uFF08role=treeitem\uFF09\u540E\uFF0C\u4E8E\u4E0B\u4E00\u5E27\u7A0B\u5E8F\u5316\u70B9\u51FB\u300C\u6536\u8D77\u4FA7\u8FB9\u680F\u300D\u6309\u94AE\u81EA\u52A8\u6536\u56DE\u62BD\u5C49\u3002\n   * \u8BE5\u5224\u5B9A\u65E0\u6CD5\u533A\u5206\u300C\u9009\u4E2D\u6761\u76EE\u56DE\u4E3B\u533A\u300D\u4E0E\u300C\u70B9\u51FB\u6761\u76EE\u5185\u7684\u6B21\u7EA7\u64CD\u4F5C\u56FE\u6807\u300D\uFF08\u66F4\u591A\u64CD\u4F5C \u22EF /\n   * \u5C55\u5F00\u7BAD\u5934\u7B49\uFF09\uFF0C\u5BFC\u81F4\u540E\u8005\u62BD\u5C49\u88AB\u8BEF\u5173\u3002\n   * \u8FD9\u91CC\u8BB0\u5F55\u6700\u8FD1\u4E00\u6B21\u5BF9\u6761\u76EE\u5185\u6B21\u7EA7\u63A7\u4EF6\uFF08\u6309\u94AE / \u7BAD\u5934\u56FE\u6807\uFF09\u7684\u89E6\u6478\u65F6\u95F4\uFF0C\u5E76\u5305\u88C5\n   * HTMLButtonElement.prototype.click\uFF1A\u77ED\u65F6\u95F4\u7A97\u53E3\u5185\u7684\u7A0B\u5E8F\u5316\u6536\u8D77\u8C03\u7528\u76F4\u63A5\u5FFD\u7565\uFF1B\n   * \u7528\u6237\u771F\u5B9E\u70B9\u51FB\u6536\u8D77\u6309\u94AE\uFF08\u6D4F\u89C8\u5668\u5408\u6210\u4E8B\u4EF6\u4E0D\u8D70 prototype.click\uFF09\u4E0E\u70B9\u51FB\u6761\u76EE\u4E3B\u4F53\n   * \uFF08\u975E\u6309\u94AE/\u7BAD\u5934\uFF09\u7684\u5B98\u65B9\u884C\u4E3A\u5747\u4E0D\u53D7\u5F71\u54CD\u3002 */\n  if (!window.__dshRmAntiCollapseInstalled__) {\n    window.__dshRmAntiCollapseInstalled__ = true;\n    var lastSecondaryTapAt = 0;\n    document.addEventListener('pointerdown', function (e) {\n      try {\n        var t = e.target;\n        if (!t || !t.closest) return;\n        if (!t.closest('[data-pane=\"sidebar\"]')) return;\n        var entry = t.closest('[role=\"treeitem\"], [data-dsh-part=\"sidebar-entry\"]');\n        if (!entry) return;\n        var isSecondaryControl =\n          !!t.closest('button, [role=\"button\"]') ||\n          !!t.closest('[class*=\"_arrow\"]');\n        if (isSecondaryControl) lastSecondaryTapAt = Date.now();\n      } catch (err) {}\n    }, { capture: true, passive: true });\n\n    var protoClick = HTMLButtonElement.prototype.click;\n    HTMLButtonElement.prototype.click = function () {\n      try {\n        var isSidebarToggle =\n          this.matches('[data-dsh-responsive-part=\"sidebar-toggle\"]') ||\n          /\u6536\u8D77\u4FA7\u8FB9\u680F|Collapse sidebar|Open sidebar/i.test(this.getAttribute('aria-label') || '');\n        if (isSidebarToggle && Date.now() - lastSecondaryTapAt < 900) {\n          return; // \u541E\u6389\u7D27\u968F\u6B21\u7EA7\u64CD\u4F5C\u56FE\u6807\u70B9\u51FB\u4E4B\u540E\u7684\u7A0B\u5E8F\u5316\u6536\u8D77\n        }\n      } catch (err) {}\n      return protoClick.apply(this, arguments);\n    };\n  }\n\n  function initDraggableNav() {\n    var logoRow = document.querySelector('[data-pane=\"sidebar\"] [class*=\"_logoRow\"]');\n    if (!logoRow || logoRow.__dsh_drag_init__) return;\n    logoRow.__dsh_drag_init__ = true;\n\n    var savedTop = localStorage.getItem('dsh_mobile_nav_top');\n    if (savedTop && !isNaN(Number(savedTop))) {\n      var topVal = Math.max(10, Math.min(window.innerHeight - 60, Number(savedTop)));\n      logoRow.style.setProperty('top', topVal + 'px', 'important');\n    }\n\n    var startY = 0;\n    var initialTop = 0;\n    var isDragging = false;\n    var hasMoved = false;\n\n    function onTouchStart(e) {\n      var sidebar = document.querySelector('[data-pane=\"sidebar\"]');\n      if (sidebar && !sidebar.querySelector('[class*=\"_collapsed\"]')) return;\n\n      var touch = e.touches ? e.touches[0] : e;\n      startY = touch.clientY;\n      var rect = logoRow.getBoundingClientRect();\n      initialTop = rect.top;\n      isDragging = true;\n      hasMoved = false;\n    }\n\n    function onTouchMove(e) {\n      if (!isDragging) return;\n      var touch = e.touches ? e.touches[0] : e;\n      var deltaY = touch.clientY - startY;\n\n      if (!hasMoved && Math.abs(deltaY) > 5) {\n        hasMoved = true;\n      }\n\n      if (hasMoved) {\n        if (e.cancelable) e.preventDefault();\n        var newTop = initialTop + deltaY;\n        var minTop = 10;\n        var maxTop = window.innerHeight - 56;\n        newTop = Math.max(minTop, Math.min(maxTop, newTop));\n        logoRow.style.setProperty('top', newTop + 'px', 'important');\n      }\n    }\n\n    function onTouchEnd(e) {\n      if (!isDragging) return;\n      isDragging = false;\n      if (hasMoved) {\n        e.preventDefault();\n        e.stopPropagation();\n        var currentRect = logoRow.getBoundingClientRect();\n        try {\n          localStorage.setItem('dsh_mobile_nav_top', String(Math.round(currentRect.top)));\n        } catch (err) {}\n      }\n    }\n\n    logoRow.addEventListener('touchstart', onTouchStart, { passive: true });\n    window.addEventListener('touchmove', onTouchMove, { passive: false });\n    window.addEventListener('touchend', onTouchEnd, { capture: true });\n\n    logoRow.addEventListener('mousedown', onTouchStart);\n    window.addEventListener('mousemove', onTouchMove);\n    window.addEventListener('mouseup', onTouchEnd, { capture: true });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initDraggableNav);\n  } else {\n    initDraggableNav();\n  }\n  setInterval(initDraggableNav, 800);\n})();\n";
+export declare const DRAGGABLE_NAV_SNIPPET = "\n(function() {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n  /* ===== \u9632\u8BEF\u6536\u8D77\u5B88\u536B =====\n   * \u7B2C\u4E09\u65B9\u751F\u6001\u63D2\u4EF6\uFF08\u5982 @linxin666/dsh-web-ui-all \u7684\u79FB\u52A8\u7AEF\u62BD\u5C49\u589E\u5F3A\uFF09\u4F1A\u5728\u7528\u6237\u70B9\u51FB\n   * \u4FA7\u8FB9\u680F\u6761\u76EE\uFF08role=treeitem\uFF09\u540E\uFF0C\u4E8E\u4E0B\u4E00\u5E27\u7A0B\u5E8F\u5316\u70B9\u51FB\u300C\u6536\u8D77\u4FA7\u8FB9\u680F\u300D\u6309\u94AE\u81EA\u52A8\u6536\u56DE\u62BD\u5C49\u3002\n   * \u8BE5\u5224\u5B9A\u65E0\u6CD5\u533A\u5206\u300C\u9009\u4E2D\u6761\u76EE\u56DE\u4E3B\u533A\u300D\u4E0E\u300C\u70B9\u51FB\u6761\u76EE\u5185\u7684\u6B21\u7EA7\u64CD\u4F5C\u56FE\u6807\u300D\uFF08\u66F4\u591A\u64CD\u4F5C \u22EF /\n   * \u5C55\u5F00\u7BAD\u5934\u7B49\uFF09\uFF0C\u5BFC\u81F4\u540E\u8005\u62BD\u5C49\u88AB\u8BEF\u5173\u3002\n   * \u8FD9\u91CC\u8BB0\u5F55\u6700\u8FD1\u4E00\u6B21\u5BF9\u6761\u76EE\u5185\u6B21\u7EA7\u63A7\u4EF6\uFF08\u6309\u94AE / \u7BAD\u5934\u56FE\u6807\uFF09\u7684\u89E6\u6478\u65F6\u95F4\uFF0C\u5E76\u5305\u88C5\n   * HTMLButtonElement.prototype.click\uFF1A\u77ED\u65F6\u95F4\u7A97\u53E3\u5185\u7684\u7A0B\u5E8F\u5316\u6536\u8D77\u8C03\u7528\u76F4\u63A5\u5FFD\u7565\uFF1B\n   * \u7528\u6237\u771F\u5B9E\u70B9\u51FB\u6536\u8D77\u6309\u94AE\uFF08\u6D4F\u89C8\u5668\u5408\u6210\u4E8B\u4EF6\u4E0D\u8D70 prototype.click\uFF09\u4E0E\u70B9\u51FB\u6761\u76EE\u4E3B\u4F53\n   * \uFF08\u975E\u6309\u94AE/\u7BAD\u5934\uFF09\u7684\u5B98\u65B9\u884C\u4E3A\u5747\u4E0D\u53D7\u5F71\u54CD\u3002 */\n  if (!window.__dshRmAntiCollapseInstalled__) {\n    window.__dshRmAntiCollapseInstalled__ = true;\n    var lastSecondaryTapAt = 0;\n    document.addEventListener('pointerdown', function (e) {\n      try {\n        var t = e.target;\n        if (!t || !t.closest) return;\n        if (!t.closest('[data-pane=\"sidebar\"], [class*=\"_sidebarCol\"]')) return;\n        var entry = t.closest('[role=\"treeitem\"], [data-dsh-part=\"sidebar-entry\"]');\n        if (!entry) return;\n        var isSecondaryControl =\n          !!t.closest('button, [role=\"button\"]') ||\n          !!t.closest('[class*=\"_arrow\"]');\n        if (isSecondaryControl) lastSecondaryTapAt = Date.now();\n      } catch (err) {}\n    }, { capture: true, passive: true });\n\n    var protoClick = HTMLButtonElement.prototype.click;\n    HTMLButtonElement.prototype.click = function () {\n      try {\n        var isSidebarToggle =\n          this.matches('[data-dsh-responsive-part=\"sidebar-toggle\"]') ||\n          /\u6536\u8D77\u4FA7\u8FB9\u680F|Collapse sidebar|Open sidebar/i.test(this.getAttribute('aria-label') || '');\n        if (isSidebarToggle && Date.now() - lastSecondaryTapAt < 900) {\n          return; // \u541E\u6389\u7D27\u968F\u6B21\u7EA7\u64CD\u4F5C\u56FE\u6807\u70B9\u51FB\u4E4B\u540E\u7684\u7A0B\u5E8F\u5316\u6536\u8D77\n        }\n      } catch (err) {}\n      return protoClick.apply(this, arguments);\n    };\n  }\n\n  function initDraggableNav() {\n    var logoRow = document.querySelector('[data-pane=\"sidebar\"] [class*=\"_logoRow\"], [class*=\"_sidebarCol\"] [class*=\"_logoRow\"]');\n    if (!logoRow || logoRow.__dsh_drag_init__) return;\n    logoRow.__dsh_drag_init__ = true;\n\n    var savedTop = localStorage.getItem('dsh_mobile_nav_top');\n    if (savedTop && !isNaN(Number(savedTop))) {\n      var topVal = Math.max(10, Math.min(window.innerHeight - 60, Number(savedTop)));\n      logoRow.style.setProperty('top', topVal + 'px', 'important');\n    }\n\n    var startY = 0;\n    var initialTop = 0;\n    var isDragging = false;\n    var hasMoved = false;\n\n    function onTouchStart(e) {\n      var sidebar = document.querySelector('[data-pane=\"sidebar\"], [class*=\"_sidebarCol\"]');\n      if (sidebar && !sidebar.querySelector('[class*=\"_collapsed\"]')) return;\n\n      var touch = e.touches ? e.touches[0] : e;\n      startY = touch.clientY;\n      var rect = logoRow.getBoundingClientRect();\n      initialTop = rect.top;\n      isDragging = true;\n      hasMoved = false;\n    }\n\n    function onTouchMove(e) {\n      if (!isDragging) return;\n      var touch = e.touches ? e.touches[0] : e;\n      var deltaY = touch.clientY - startY;\n\n      if (!hasMoved && Math.abs(deltaY) > 5) {\n        hasMoved = true;\n      }\n\n      if (hasMoved) {\n        if (e.cancelable) e.preventDefault();\n        var newTop = initialTop + deltaY;\n        var minTop = 10;\n        var maxTop = window.innerHeight - 56;\n        newTop = Math.max(minTop, Math.min(maxTop, newTop));\n        logoRow.style.setProperty('top', newTop + 'px', 'important');\n      }\n    }\n\n    function onTouchEnd(e) {\n      if (!isDragging) return;\n      isDragging = false;\n      if (hasMoved) {\n        e.preventDefault();\n        e.stopPropagation();\n        var currentRect = logoRow.getBoundingClientRect();\n        try {\n          localStorage.setItem('dsh_mobile_nav_top', String(Math.round(currentRect.top)));\n        } catch (err) {}\n      }\n    }\n\n    logoRow.addEventListener('touchstart', onTouchStart, { passive: true });\n    window.addEventListener('touchmove', onTouchMove, { passive: false });\n    window.addEventListener('touchend', onTouchEnd, { capture: true });\n\n    logoRow.addEventListener('mousedown', onTouchStart);\n    window.addEventListener('mousemove', onTouchMove);\n    window.addEventListener('mouseup', onTouchEnd, { capture: true });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initDraggableNav);\n  } else {\n    initDraggableNav();\n  }\n  setInterval(initDraggableNav, 800);\n})();\n";
+/**
+ * 注入到 index.html 的移动端抽屉「点外部收起」脚本
+ *
+ * 【设计职责】
+ * 仅当 @linxin666/dsh-web-ui-all 未启用时生效——web-ui 已自带 installMobileSidebarDismiss，
+ * 本脚本通过检测 style[data-dsh-compat="responsive"] 动态让位，绝不与 web-ui 叠加双份收起逻辑。
+ *
+ * 定位全部基于官方 CSS Modules 稳定后缀（_frame / _sidebarCol / _toggle，前缀 hash 随机、
+ * 后缀稳定），不依赖 web-ui 注入的 data-pane / data-dsh-frame 属性，因此装/不装 web-ui
+ * 两种环境行为一致。折叠状态沿用官方写入的 data-sidebar-collapsed 属性。
+ */
+export declare const MOBILE_DISMISS_SNIPPET = "\n(function() {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n\n  var frameSelector = '[class*=\"_frame\"]';\n  var sidebarSelector = '[class*=\"_sidebarCol\"]';\n\n  function webUiOwnsDrawer() {\n    return !!document.querySelector('style[data-dsh-compat=\"responsive\"]');\n  }\n\n  function findToggle(frame) {\n    return frame.querySelector('[class*=\"_toggle\"]') ||\n      Array.prototype.filter.call(frame.querySelectorAll('button'), function (b) {\n        return /\u6536\u8D77\u4FA7\u8FB9\u680F|Collapse sidebar|Open sidebar/i.test(b.getAttribute('aria-label') || '');\n      })[0] || null;\n  }\n\n  function install(frame) {\n    if (frame.__dshRmDismissInstalled__) return;\n    frame.__dshRmDismissInstalled__ = true;\n    var raf = 0;\n\n    frame.addEventListener('click', function (event) {\n      try {\n        // web-ui \u53EF\u80FD\u8FD0\u884C\u4E2D\u624D\u6CE8\u5165 responsive style\uFF1A\u6BCF\u6B21\u4E8B\u4EF6\u90FD\u590D\u67E5\uFF0C\u52A8\u6001\u8BA9\u4F4D\n        if (webUiOwnsDrawer()) return;\n        var target = event.target;\n        if (!target || !(target instanceof Element)) return;\n        if (typeof window.matchMedia !== 'function' || !window.matchMedia('(max-width: 900px)').matches) return;\n        var sidebar = frame.querySelector(sidebarSelector);\n        var toggle = findToggle(frame);\n        if (!sidebar || !toggle) return;\n\n        // \u62BD\u5C49\u5C55\u5F00\u65F6\u70B9\u51FB\u6B63\u6587\uFF08sidebar \u5916\uFF09\u2192 \u89E6\u53D1\u5B98\u65B9\u6536\u8D77\u6309\u94AE\uFF0C\u5E76\u62E6\u622A\u88AB\u541E\u6389\u7684\u70B9\u51FB\uFF1B\n        // \u627E\u4E0D\u5230\u6536\u8D77\u6309\u94AE\u65F6\u4E0A\u9762\u5DF2 return\uFF0C\u7EDD\u4E0D\u8BEF\u62E6\u6B63\u6587\u4EA4\u4E92\n        if (!frame.hasAttribute('data-sidebar-collapsed') && !sidebar.contains(target)) {\n          event.preventDefault();\n          event.stopPropagation();\n          toggle.click();\n          return;\n        }\n        // \u70B9\u51FB\u4FA7\u8FB9\u680F\u6761\u76EE\uFF08\u9009\u4E2D\u540E\u56DE\u4E3B\u533A\uFF09\u2192 \u4E0B\u4E00\u5E27\u7A0B\u5E8F\u5316\u6536\u8D77\u3002\n        // \u65E2\u6709\u9632\u8BEF\u6536\u8D77\u5B88\u536B\uFF08dsh-draggable-nav \u5305\u88C5 HTMLButtonElement.prototype.click\n        // + 900ms \u7A97\u53E3\uFF09\u4F1A\u62E6\u622A\u300C\u70B9\u6761\u76EE\u5185\u6B21\u7EA7\u64CD\u4F5C\u56FE\u6807\u300D\u540E\u7684\u8BEF\u6536\u8D77\uFF0C\u884C\u4E3A\u4E0E web-ui \u4E00\u81F4\u3002\n        if (target.closest('[class*=\"_toggle\"]')) return;\n        if (!target.closest('[role=\"treeitem\"], [data-dsh-part=\"sidebar-entry\"]')) return;\n        if (raf !== 0) cancelAnimationFrame(raf);\n        raf = requestAnimationFrame(function () {\n          raf = 0;\n          if (!frame.hasAttribute('data-sidebar-collapsed')) toggle.click();\n        });\n      } catch (err) {}\n    }, true);\n  }\n\n  function ensure() {\n    if (webUiOwnsDrawer()) return;\n    var frame = document.querySelector(frameSelector);\n    if (frame) install(frame);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', ensure);\n  } else {\n    ensure();\n  }\n  setInterval(ensure, 800);\n})();\n";
 /**
  * 挂载底层 http.Server 门禁劫持与回环上下文虚拟化代理
  *

package/lib/bridge/compat.js

@@ -52,6 +52,54 @@ export const CRYPTO_POLYFILL_SNIPPET = `
   }
 })();
 `;
+/**
+ * 注入到 index.html <head> 最前列的 Clipboard API Polyfill 脚本
+ * 针对非安全上下文（HTTP + 外部 IP，如 Tailscale / 局域网）下
+ * navigator.clipboard 为 undefined 的场景：提供 execCommand('copy') 降级实现，
+ * 避免官方 bundle 直接调用 navigator.clipboard.writeText 时抛
+ * "Cannot read properties of undefined (reading 'writeText')" 崩溃。
+ * 原生可用时不做任何替换。
+ */
+export const CLIPBOARD_POLYFILL_SNIPPET = `
+(function() {
+  if (typeof navigator === "undefined") return;
+  try {
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") return;
+    var writeText = function(text) {
+      try {
+        var ta = document.createElement('textarea');
+        ta.value = String(text == null ? '' : text);
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'fixed';
+        ta.style.top = '-9999px';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        var ok = document.execCommand('copy');
+        document.body.removeChild(ta);
+        return ok ? Promise.resolve() : Promise.reject(new Error('copy failed'));
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    };
+    var readText = function() {
+      return Promise.reject(new Error('clipboard readText is not supported in insecure context'));
+    };
+    try {
+      if (!navigator.clipboard) navigator.clipboard = {};
+      if (typeof navigator.clipboard.writeText !== "function") navigator.clipboard.writeText = writeText;
+      if (typeof navigator.clipboard.readText !== "function") navigator.clipboard.readText = readText;
+    } catch (err) {
+      try {
+        Object.defineProperty(navigator, 'clipboard', {
+          value: { writeText: writeText, readText: readText },
+          configurable: true,
+        });
+      } catch (err2) {}
+    }
+  } catch (err) {}
+})();
+`;
 /**
  * 注入到 index.html 的移动端悬浮入口拖拽与位置记忆脚本
  * 允许用户在移动端上下随心拖动左上角入口把手，避免遮挡聊天内容，并自动保存位置
@@ -76,7 +124,7 @@ export const DRAGGABLE_NAV_SNIPPET = `
       try {
         var t = e.target;
         if (!t || !t.closest) return;
-        if (!t.closest('[data-pane="sidebar"]')) return;
+        if (!t.closest('[data-pane="sidebar"], [class*="_sidebarCol"]')) return;
         var entry = t.closest('[role="treeitem"], [data-dsh-part="sidebar-entry"]');
         if (!entry) return;
         var isSecondaryControl =
@@ -101,7 +149,7 @@ export const DRAGGABLE_NAV_SNIPPET = `
   }
 
   function initDraggableNav() {
-    var logoRow = document.querySelector('[data-pane="sidebar"] [class*="_logoRow"]');
+    var logoRow = document.querySelector('[data-pane="sidebar"] [class*="_logoRow"], [class*="_sidebarCol"] [class*="_logoRow"]');
     if (!logoRow || logoRow.__dsh_drag_init__) return;
     logoRow.__dsh_drag_init__ = true;
 
@@ -117,7 +165,7 @@ export const DRAGGABLE_NAV_SNIPPET = `
     var hasMoved = false;
 
     function onTouchStart(e) {
-      var sidebar = document.querySelector('[data-pane="sidebar"]');
+      var sidebar = document.querySelector('[data-pane="sidebar"], [class*="_sidebarCol"]');
       if (sidebar && !sidebar.querySelector('[class*="_collapsed"]')) return;
 
       var touch = e.touches ? e.touches[0] : e;
@@ -177,6 +225,87 @@ export const DRAGGABLE_NAV_SNIPPET = `
   setInterval(initDraggableNav, 800);
 })();
 `;
+/**
+ * 注入到 index.html 的移动端抽屉「点外部收起」脚本
+ *
+ * 【设计职责】
+ * 仅当 @linxin666/dsh-web-ui-all 未启用时生效——web-ui 已自带 installMobileSidebarDismiss，
+ * 本脚本通过检测 style[data-dsh-compat="responsive"] 动态让位，绝不与 web-ui 叠加双份收起逻辑。
+ *
+ * 定位全部基于官方 CSS Modules 稳定后缀（_frame / _sidebarCol / _toggle，前缀 hash 随机、
+ * 后缀稳定），不依赖 web-ui 注入的 data-pane / data-dsh-frame 属性，因此装/不装 web-ui
+ * 两种环境行为一致。折叠状态沿用官方写入的 data-sidebar-collapsed 属性。
+ */
+export const MOBILE_DISMISS_SNIPPET = `
+(function() {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+
+  var frameSelector = '[class*="_frame"]';
+  var sidebarSelector = '[class*="_sidebarCol"]';
+
+  function webUiOwnsDrawer() {
+    return !!document.querySelector('style[data-dsh-compat="responsive"]');
+  }
+
+  function findToggle(frame) {
+    return frame.querySelector('[class*="_toggle"]') ||
+      Array.prototype.filter.call(frame.querySelectorAll('button'), function (b) {
+        return /收起侧边栏|Collapse sidebar|Open sidebar/i.test(b.getAttribute('aria-label') || '');
+      })[0] || null;
+  }
+
+  function install(frame) {
+    if (frame.__dshRmDismissInstalled__) return;
+    frame.__dshRmDismissInstalled__ = true;
+    var raf = 0;
+
+    frame.addEventListener('click', function (event) {
+      try {
+        // web-ui 可能运行中才注入 responsive style：每次事件都复查，动态让位
+        if (webUiOwnsDrawer()) return;
+        var target = event.target;
+        if (!target || !(target instanceof Element)) return;
+        if (typeof window.matchMedia !== 'function' || !window.matchMedia('(max-width: 900px)').matches) return;
+        var sidebar = frame.querySelector(sidebarSelector);
+        var toggle = findToggle(frame);
+        if (!sidebar || !toggle) return;
+
+        // 抽屉展开时点击正文（sidebar 外）→ 触发官方收起按钮，并拦截被吞掉的点击；
+        // 找不到收起按钮时上面已 return，绝不误拦正文交互
+        if (!frame.hasAttribute('data-sidebar-collapsed') && !sidebar.contains(target)) {
+          event.preventDefault();
+          event.stopPropagation();
+          toggle.click();
+          return;
+        }
+        // 点击侧边栏条目（选中后回主区）→ 下一帧程序化收起。
+        // 既有防误收起守卫（dsh-draggable-nav 包装 HTMLButtonElement.prototype.click
+        // + 900ms 窗口）会拦截「点条目内次级操作图标」后的误收起，行为与 web-ui 一致。
+        if (target.closest('[class*="_toggle"]')) return;
+        if (!target.closest('[role="treeitem"], [data-dsh-part="sidebar-entry"]')) return;
+        if (raf !== 0) cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(function () {
+          raf = 0;
+          if (!frame.hasAttribute('data-sidebar-collapsed')) toggle.click();
+        });
+      } catch (err) {}
+    }, true);
+  }
+
+  function ensure() {
+    if (webUiOwnsDrawer()) return;
+    var frame = document.querySelector(frameSelector);
+    if (frame) install(frame);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensure);
+  } else {
+    ensure();
+  }
+  setInterval(ensure, 800);
+})();
+`;
 /**
  * 挂载底层 http.Server 门禁劫持与回环上下文虚拟化代理
  *
@@ -232,7 +361,12 @@ export function patchHttpServerWithVirtualizer(server, gateMiddleware, _store, s
                     // 悬浮把手拖拽脚本全端注入：脚本自带“仅折叠时工作”守卫，
                     // 预设按视口宽度生效后 PC 窄窗口同样需要可拖动的展开把手
                     html = html.replace('<head>', `<head><script id="dsh-draggable-nav">${DRAGGABLE_NAV_SNIPPET}</script>`);
+                    // 移动端抽屉「点外部收起」全端注入：脚本自带 web-ui 让位守卫，
+                    // web-ui 在场时完全交给它处理，未装时复刻等价行为
+                    html = html.replace('<head>', `<head><script id="dsh-mobile-dismiss">${MOBILE_DISMISS_SNIPPET}</script>`);
                     html = html.replace('<head>', `<head><script id="dsh-crypto-polyfill">${CRYPTO_POLYFILL_SNIPPET}</script>`);
+                    // Clipboard Polyfill 最后 replace → 位于 <head> 最前，先于官方 bundle 生效
+                    html = html.replace('<head>', `<head><script id="dsh-clipboard-polyfill">${CLIPBOARD_POLYFILL_SNIPPET}</script>`);
                     chunk = html;
                     injected = true;
                 }
@@ -245,7 +379,10 @@ export function patchHttpServerWithVirtualizer(server, gateMiddleware, _store, s
                             str = str.replace('<head>', `<head>${buildMobileStyleTag(mobileStyleCss)}`);
                         }
                         str = str.replace('<head>', `<head><script id="dsh-draggable-nav">${DRAGGABLE_NAV_SNIPPET}</script>`);
+                        str = str.replace('<head>', `<head><script id="dsh-mobile-dismiss">${MOBILE_DISMISS_SNIPPET}</script>`);
                         str = str.replace('<head>', `<head><script id="dsh-crypto-polyfill">${CRYPTO_POLYFILL_SNIPPET}</script>`);
+                        // Clipboard Polyfill 最后 replace → 位于 <head> 最前，先于官方 bundle 生效
+                        str = str.replace('<head>', `<head><script id="dsh-clipboard-polyfill">${CLIPBOARD_POLYFILL_SNIPPET}</script>`);
                         chunk = Buffer.from(str, 'utf8');
                         injected = true;
                     }
@@ -339,7 +476,10 @@ export function mountIndexInjections(ctx) {
     if (ctx.webServer && typeof ctx.webServer.tapIndex === 'function') {
         ctx.webServer.tapIndex((html) => {
             if (html.includes('<head>')) {
-                return html.replace('<head>', `<head><script id="dsh-crypto-polyfill">${CRYPTO_POLYFILL_SNIPPET}</script>`);
+                return html
+                    .replace('<head>', `<head><script id="dsh-crypto-polyfill">${CRYPTO_POLYFILL_SNIPPET}</script>`)
+                    // Clipboard Polyfill 后 replace → 位于 <head> 最前，先于官方 bundle 生效
+                    .replace('<head>', `<head><script id="dsh-clipboard-polyfill">${CLIPBOARD_POLYFILL_SNIPPET}</script>`);
             }
             return html;
         });
@@ -351,6 +491,11 @@ export function mountIndexInjections(ctx) {
                 placement: 'head',
                 text: CRYPTO_POLYFILL_SNIPPET,
             });
+            table.push({
+                kind: 'script',
+                placement: 'head',
+                text: CLIPBOARD_POLYFILL_SNIPPET,
+            });
         }
     });
 }

package/lib/client.js

@@ -815,6 +815,8 @@ var translations = {
     stylesDisabled: "\u5DF2\u505C\u7528",
     stylesViewCss: "\u67E5\u770B CSS",
     stylesHideCss: "\u6536\u8D77 CSS",
+    stylesCopyCss: "\u{1F4CB} \u590D\u5236\u6837\u5F0F",
+    stylesCopyCssDone: "\u6837\u5F0F\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F\uFF01",
     stylesNamePlaceholder: "\u7247\u6BB5\u540D\u79F0\uFF08\u5FC5\u586B\uFF09",
     stylesCssPlaceholder: "\u7C98\u8D34\u6216\u7F16\u5199 CSS \u4EE3\u7801\u7247\u6BB5\u2026\uFF08\u79FB\u52A8\u7AEF\u53EF\u7528 html[data-dsh-mobile] \u4F5C\u4E3A\u4F5C\u7528\u57DF\u9009\u62E9\u5668\uFF09",
     stylesAddNew: "\uFF0B \u65B0\u589E\u81EA\u5B9A\u4E49\u7247\u6BB5",
@@ -967,6 +969,8 @@ var translations = {
     stylesDisabled: "Disabled",
     stylesViewCss: "View CSS",
     stylesHideCss: "Hide CSS",
+    stylesCopyCss: "\u{1F4CB} Copy CSS",
+    stylesCopyCssDone: "CSS copied to clipboard!",
     stylesNamePlaceholder: "Snippet name (required)",
     stylesCssPlaceholder: "Paste or write CSS here\u2026 (html[data-dsh-mobile] can be used as a mobile scope selector)",
     stylesAddNew: "\uFF0B Add Custom Snippet",
@@ -3090,6 +3094,21 @@ function StylesCard({ lang, showToast }) {
   const toggleExpand = (id) => {
     setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
   };
+  const copyCss = (cssText) => {
+    navigator.clipboard.writeText(cssText).then(() => showFeedback(t("stylesCopyCssDone", lang))).catch(() => {
+      const ta = document.createElement("textarea");
+      ta.value = cssText;
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        document.execCommand("copy");
+        showFeedback(t("stylesCopyCssDone", lang));
+      } catch {
+        showFeedback(lang === "en" ? "Copy failed, please copy manually." : "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u590D\u5236\u3002", "danger");
+      }
+      document.body.removeChild(ta);
+    });
+  };
   const scopeBadge = (s) => {
     if (s.pcEnabled && s.mobileEnabled) return t("stylesBothDevices", lang);
     if (s.mobileEnabled) return "\u{1F4F1} " + t("stylesMobileOnlyBadge", lang);
@@ -3222,7 +3241,8 @@ function StylesCard({ lang, showToast }) {
                     "\u{1F4F1} ",
                     t("stylesMobileShort", lang)
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) })
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
                 ] })
               ] }),
               expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3410,7 +3430,8 @@ function StylesCard({ lang, showToast }) {
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => startEdit(s), style: miniBtnStyle, children: t("stylesEditBtn", lang) }),
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => remove(s), style: { ...miniBtnStyle, color: "#ef4444" }, children: t("stylesDeleteBtn", lang) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
               ] })
             ] }),
             expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3443,8 +3464,8 @@ function StylesCard({ lang, showToast }) {
 }
 
 // src/client/version.js
-var PLUGIN_VERSION = "v1.4.0";
-var BUILD_TIME = "2026-08-24 23:56:32";
+var PLUGIN_VERSION = "v1.4.2";
+var BUILD_TIME = "2026-08-26 23:31:01";
 
 // src/client/components/MainSection.jsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -3487,6 +3508,8 @@ function TailscaleMobileSection(props) {
   const [isSaving, setIsSaving] = (0, import_react9.useState)(false);
   const [showVersionTip, setShowVersionTip] = (0, import_react9.useState)(false);
   const [currentLang, setCurrentLang] = (0, import_react9.useState)(resolveLocale(ctx, status));
+  const [npmLatestVersion, setNpmLatestVersion] = (0, import_react9.useState)("");
+  const [hasUpdate, setHasUpdate] = (0, import_react9.useState)(false);
   const [conflictBannerDismissed, setConflictBannerDismissed] = (0, import_react9.useState)(false);
   const qrTabTouchedRef = (0, import_react9.useRef)(false);
   const updateQrTab = (0, import_react9.useCallback)((tab) => {
@@ -3560,6 +3583,34 @@ function TailscaleMobileSection(props) {
     }).catch(() => {
     });
   }, [refreshStatusOnly]);
+  (0, import_react9.useEffect)(() => {
+    let cancelled = false;
+    fetch("https://registry.npmjs.org/dsh-remote-mobile/latest", { cache: "no-store" }).then((res) => res.ok ? res.json() : Promise.reject(new Error("npm registry error"))).then((data) => {
+      if (cancelled) return;
+      const v = data && data.version ? String(data.version) : "";
+      if (!v) return;
+      setNpmLatestVersion(v);
+      const installed = String(PLUGIN_VERSION).replace(/^v/i, "");
+      setHasUpdate(compareVersions(v, installed) > 0);
+    }).catch(() => {
+      if (cancelled) return;
+      setHasUpdate(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const compareVersions = (a, b) => {
+    const pa = a.split(".").map((n) => parseInt(n, 10) || 0);
+    const pb = b.split(".").map((n) => parseInt(n, 10) || 0);
+    for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
+      const da = pa[i] || 0;
+      const db = pb[i] || 0;
+      if (da > db) return 1;
+      if (da < db) return -1;
+    }
+    return 0;
+  };
   (0, import_react9.useEffect)(() => {
     refreshStatusAndCode();
     const localeUnsubs = [];
@@ -3994,7 +4045,34 @@ function TailscaleMobileSection(props) {
                             ) : null
                           ]
                         }
-                      )
+                      ),
+                      hasUpdate && npmLatestVersion ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        "a",
+                        {
+                          href: `https://www.npmjs.com/package/dsh-remote-mobile/v/${npmLatestVersion}`,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: "4px",
+                            padding: "2px 8px",
+                            borderRadius: "10px",
+                            background: "rgba(203, 36, 49, 0.12)",
+                            border: "1px solid rgba(203, 36, 49, 0.3)",
+                            color: "var(--dsw-alias-brand-primary, #f87171)",
+                            fontSize: "11px",
+                            fontWeight: "600",
+                            textDecoration: "none",
+                            cursor: "pointer",
+                            whiteSpace: "nowrap"
+                          },
+                          children: [
+                            "\u{1F680} ",
+                            currentLang === "en" ? `Update available: v${npmLatestVersion}` : `\u53D1\u73B0\u65B0\u7248\u672C v${npmLatestVersion}`
+                          ]
+                        }
+                      ) : null
                     ]
                   }
                 ),

package/lib/styles/style-snippets.js

@@ -36,19 +36,21 @@ const PRESET_SIDEBAR_CSS = `
 /* 0. 禁用浏览器原生橡皮筋下拉刷新与链式溢出滚动，彻底杜绝上下滑动误刷新页面 */
   html,
   body,
-  [data-dsh-frame],
+  [class*="_frame"],
   [role="dialog"],
   [class*="_dialog"],
   [class*="_modalContent"],
   [class*="_overlay"],
   [class*="_conversationArea"],
-  [data-pane="conversation"] {
+  [class*="_centerCol"] {
     overscroll-behavior-y: contain !important;
     overscroll-behavior-x: none !important;
   }
 
-  /* 1. 最外层三栏布局：在移动端主工作区占满 100% 全宽，消除 56px 强制占位 */
-  [data-dsh-frame],
+  /* 1. 最外层三栏布局：在移动端主工作区占满 100% 全宽，消除侧边栏强制占位。
+     选择器全部基于官方 CSS Modules 稳定后缀（_frame/_sidebarCol/_centerCol，
+     前缀 hash 随机、后缀稳定），不依赖 @linxin666/dsh-web-ui-all 注入的
+     data-pane / data-dsh-frame 属性，安装与否均生效。 */
   [class*="_frame"] {
     grid-template-columns: 0px minmax(0px, 1fr) 0px !important;
     width: 100vw !important;
@@ -57,14 +59,12 @@ const PRESET_SIDEBAR_CSS = `
     position: relative !important;
   }
 
-  [data-pane="conversation"],
   [class*="_centerCol"] {
     width: 100vw !important;
     max-width: 100vw !important;
   }
 
   /* 2. 侧边栏最外层容器：作为整体抽屉浮层（阴影仅加在最外层，严禁污染内部列表） */
-  [data-pane="sidebar"],
   [class*="_sidebarCol"] {
     position: fixed !important;
     top: 0 !important;
@@ -75,8 +75,8 @@ const PRESET_SIDEBAR_CSS = `
     /* 层级守卫：抽屉必须低于官方弹层体系（模态弹窗 z=1000、下拉/弹出菜单 z=1100），
        否则设置面板的操作菜单（portal 到 body）会被抽屉盖住无法交互。
        官方内容区元素均在 100 层级以下，900 足以保证抽屉覆盖正文。
-       注意：展开态宽度由官方样式接管（width: min(88vw,320px) !important，特异性
-       更高），「外层 ~320 / 内层内联 280」的差值由下方内层铺满规则消除。 */
+       展开态宽度：装了 web-ui 时由它接管（min(88vw,320px)）；未装时沿用官方
+       内联 width（280px 左右），宽度差由下方内层铺满规则消除。 */
     min-width: 0 !important;
     z-index: 900 !important;
     background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
@@ -93,26 +93,39 @@ const PRESET_SIDEBAR_CSS = `
     will-change: auto !important;
   }
 
-  /* 官方窄屏抽屉的全屏点击遮罩（[data-dsh-frame]::after：fixed、rgba 黑纱、
-     z-index:1050、pointer-events:auto）必须压在抽屉(900)之下，否则抽屉内容
-     会被黑纱罩住并拦截全部点击。压到 899：低于抽屉、仍高于正文(≤100)，
-     「点抽屉外暗处自动收回」的能力保留。 */
-  [data-dsh-frame]::after {
+  /* 遮罩：抽屉外全屏黑纱必须压在抽屉(900)之下，否则抽屉内容会被黑纱罩住并
+     拦截全部点击。压到 899：低于抽屉、仍高于正文(≤100)，「点抽屉外暗处
+     自动收回」的能力保留。
+     - 装了 web-ui 时：它生成 [data-dsh-frame]:not([data-sidebar-collapsed])::after
+       （z-index:1050），由下方 [class*="_frame"]::after 的 !important 统一压到 899。
+     - 未装 web-ui 时：官方无遮罩，由下方 :not([data-sidebar-collapsed]) 规则补齐。 */
+  [class*="_frame"]::after {
     z-index: 899 !important;
   }
 
+  [class*="_frame"]:not([data-sidebar-collapsed])::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: 899;
+    background: rgb(0 0 0 / 24%);
+  }
+
   /* 内层根节点铺满抽屉：覆盖官方响应式脚本写入的内联 width，
-     消除「外层 320 / 内层 280」的宽度差与右缘空白条 */
-  [data-pane="sidebar"] > [data-slot="sidebar"] > div {
+     消除「外层 ~320 / 内层内联 280」的宽度差与右缘空白条 */
+  [class*="_sidebarCol"] > [data-slot="sidebar"] > div {
     width: 100% !important;
     min-width: 0 !important;
     max-width: none !important;
     height: 100% !important;
   }
 
-  /* 3. 折叠状态：侧边栏收起为 0px 并隐藏整体阴影和多余按钮 */
-  [data-pane="sidebar"]:has([class*="_collapsed"]),
-  [data-dsh-frame][data-sidebar-collapsed="true"] [data-pane="sidebar"] {
+  /* 3. 折叠状态：侧边栏收起为 0px 并隐藏整体阴影和多余按钮。
+     data-sidebar-collapsed 属性与 _collapsed class 均由官方 sidebar 插件写入，
+     两种环境（装/不装 web-ui）行为一致，这里用无值匹配 [data-sidebar-collapsed]
+     保证属性不带值也能命中。 */
+  [class*="_sidebarCol"]:has([class*="_collapsed"]),
+  [class*="_frame"][data-sidebar-collapsed] [class*="_sidebarCol"] {
     width: 0px !important;
     min-width: 0px !important;
     border: none !important;
@@ -121,14 +134,14 @@ const PRESET_SIDEBAR_CSS = `
     pointer-events: none !important;
   }
 
-  [data-pane="sidebar"] [class*="_collapsed"] > :not([class*="_logoRow"]),
-  [data-dsh-frame][data-sidebar-collapsed="true"] [data-pane="sidebar"] > div > div > :not([class*="_logoRow"]) {
+  [class*="_sidebarCol"] [class*="_collapsed"] > :not([class*="_logoRow"]),
+  [class*="_frame"][data-sidebar-collapsed] [class*="_sidebarCol"] > div > div > :not([class*="_logoRow"]) {
     display: none !important;
   }
 
   /* 折叠状态下，Logo 按钮悬浮在屏幕左上角作为展开把手（与 dsh-draggable-nav 拖拽脚本联动） */
-  [data-pane="sidebar"] [class*="_collapsed"] [class*="_logoRow"],
-  [data-dsh-frame][data-sidebar-collapsed="true"] [data-pane="sidebar"] [class*="_logoRow"] {
+  [class*="_sidebarCol"] [class*="_collapsed"] [class*="_logoRow"],
+  [class*="_frame"][data-sidebar-collapsed] [class*="_sidebarCol"] [class*="_logoRow"] {
     position: fixed !important;
     top: 10px !important;
     left: 10px !important;
@@ -155,6 +168,30 @@ const PRESET_SIDEBAR_CSS = `
   html[data-dsh-mobile="1"] [role="tooltip"] {
     display: none !important;
   }
+
+  /* 5. 窄屏隐藏官方详情（details）列：官方会把未折叠的详情面板做成全屏浮层
+     盖在 conversation 顶部（web-ui 窄屏折叠态也是 display:none），这里直接隐藏，
+     彻底杜绝缩小窗口时详情面板与顶部 header 重叠。 */
+  [class*="_detailsCol"] {
+    display: none !important;
+  }
+
+  /* 6. 已装 web-ui 时，其移动端 conversation-header 为折叠 rail 预留 60px 左内边距；
+     本插件折叠为 0px + 悬浮把手，header 无需让位，覆盖为 8px。
+     用更高特异性（(0,2,1) > web-ui 的 (0,2,0)）保证无论加载顺序都压过 web-ui；
+     仅在与 web-ui 相同的 ≤768px 断点生效，避免干扰 769-900px 的官方 header。 */
+  @media (max-width: 768px) {
+    [class*="_frame"] header[data-dsh-responsive-part="conversation-header"] {
+      padding-left: 8px !important;
+    }
+
+    /* 7. 覆盖 web-ui 给 session-utilities 按钮强制的 min-height: 44px（min-width 保留）。
+       该规则特异性与 web-ui 同为 (0,3,0)，故补一个重复属性选择器抬到 (0,4,0)
+       确保无论加载顺序都压过 web-ui；仅在同断点 ≤768px 生效。 */
+    [class*="_frame"] [data-dsh-responsive-part="session-utilities"][data-dsh-responsive-part] :is(button, [role="button"]) {
+      min-height: 0 !important;
+    }
+  }
 `;
 /** 设置面板预设：官方设置弹窗整体微缩 + 遮罩锁滚动 + 内容横向滑动 */
 const PRESET_SETTINGS_CSS = `
@@ -175,10 +212,47 @@ const PRESET_SETTINGS_CSS = `
     overscroll-behavior: contain !important;
   }
 
-  /* 弹窗卡片：居中显示，占据 94vw 视口，内部开启弹性横向滚动 */
-  [role="dialog"],
-  [class*="_dialog"],
-  [class*="_modalContent"],
+  /* 移动端设置弹窗顶部固定提示：内容较宽（530px 等比微缩）需左右滑动浏览。
+     挂在 overlay 容器 ::before 上（absolute 定位相对 fixed overlay），
+     不随弹窗内容滚动，也不参与 flex 居中布局。内测声明等通用 Modal
+     （_root 容器，不在本选择器集合内）不会出现此提示。 */
+  [data-slot*="overlay"]:has([role="dialog"])::before,
+  [class*="_overlay"]:has([role="dialog"])::before,
+  [class*="_modalWrapper"]:has([role="dialog"])::before {
+    content: "↔ 左右滑动浏览设置";
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100006 !important;
+    box-sizing: border-box;
+    white-space: nowrap;
+    max-width: calc(100vw - 32px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: rgba(0, 0, 0, 0.62);
+    color: #ffffff;
+    font-size: 12px;
+    line-height: 18px;
+    border-radius: 999px;
+    padding: 4px 14px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    text-align: center;
+  }
+
+  /* 弹窗卡片：仅命中设置弹窗——外层 overlay 容器内含 role=dialog（设置弹窗由
+     data-slot overlay / overlay 类包裹）。内测声明等通用 Modal 直接挂在 body、
+     无 data-slot overlay，天然排除，不会被 94vw / 530px 覆写。 */
+  [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"],
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"],
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"],
+  [class*="_overlay"]:has([role="dialog"]) [role="dialog"],
+  [class*="_overlay"]:has([role="dialog"]) [class*="_dialog"],
+  [class*="_overlay"]:has([role="dialog"]) [class*="_modalContent"],
+  [class*="_modalWrapper"]:has([role="dialog"]) [role="dialog"],
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_dialog"],
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"],
   [class*="_settingsModal"] {
     position: relative !important;
     width: 94vw !important;
@@ -198,14 +272,46 @@ const PRESET_SETTINGS_CSS = `
     font-size: 13.5px !important;
   }
 
-  /* 弹窗内部主体容器：固定最小宽度并等比微缩，单屏显示更多内容且字号更精致 */
-  [role="dialog"] > div,
-  [class*="_dialog"] > div,
-  [class*="_modalContent"] > div {
+  /* 弹窗内部等比微缩：dialog 的全部直接子元素（如设置弹窗的 nav 左侧按钮列表 +
+     content 右侧内容）统一 zoom 0.88，保证整窗一致缩放。 */
+  [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"] > *,
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"] > *,
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"] > *,
+  [class*="_overlay"]:has([role="dialog"]) [role="dialog"] > *,
+  [class*="_overlay"]:has([role="dialog"]) [class*="_dialog"] > *,
+  [class*="_overlay"]:has([role="dialog"]) [class*="_modalContent"] > *,
+  [class*="_modalWrapper"]:has([role="dialog"]) [role="dialog"] > *,
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_dialog"] > *,
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"] > *,
+  [class*="_settingsModal"] > * {
+    zoom: 0.88 !important;
+  }
+
+  /* 弹窗右侧内容主体（直接 div 子元素）：固定最小宽度并铺满高度，单屏显示更多
+     内容且字号更精致。左侧导航列表不强制宽度，保持官方窄宽。
+     同样限定在设置弹窗上下文内，避免波及通用 Modal。 */
+  [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"] > div,
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"] > div,
+  [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"] > div,
+  [class*="_overlay"]:has([role="dialog"]) [role="dialog"] > div,
+  [class*="_overlay"]:has([role="dialog"]) [class*="_dialog"] > div,
+  [class*="_overlay"]:has([role="dialog"]) [class*="_modalContent"] > div,
+  [class*="_modalWrapper"]:has([role="dialog"]) [role="dialog"] > div,
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_dialog"] > div,
+  [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"] > div,
+  [class*="_settingsModal"] > div {
     min-width: 530px !important;
     width: 530px !important;
     height: 100% !important;
-    zoom: 0.88 !important;
+  }
+
+  /* 重置插件市场等弹窗在窄屏隐藏左侧 nav 的行为：保持导航列表可见。
+     该插件规则（@media max-width:560px 隐藏）无 !important，
+     我们同选择器加 !important 即可稳压。 */
+  @media (max-width: 560px) {
+    [role="dialog"]:has([data-dsh-market-root]) > nav {
+      display: block !important;
+    }
   }
 `;
 /** 正文预设：对话区紧凑高密度排版（小字号/紧凑行距/等宽代码/防溢出） */
@@ -218,7 +324,7 @@ const PRESET_MAIN_CSS = `
    内容容器用 CSS Modules localName 后缀（只有前缀 hash 随机，后缀稳定）。 */
 
 /* 1. 消息内容容器：紧凑字号与行距 */
-[data-pane="conversation"],
+[class*="_centerCol"],
 [data-slot^="conversation.chat"],
 [class*="_markdown"],
 [class*="_message"],
@@ -230,7 +336,7 @@ const PRESET_MAIN_CSS = `
 }
 
 /* 2. HTML 元素级（稳定）：段落与标题层级 */
-[data-pane="conversation"] p,
+[class*="_centerCol"] p,
 [data-slot^="conversation.chat"] p,
 [class*="_markdown"] p,
 [class*="_message"] p,
@@ -240,10 +346,10 @@ const PRESET_MAIN_CSS = `
   margin: 0 0 0.4em 0 !important;
 }
 
-[data-pane="conversation"] h1,
-[data-pane="conversation"] h2,
-[data-pane="conversation"] h3,
-[data-pane="conversation"] h4,
+[class*="_centerCol"] h1,
+[class*="_centerCol"] h2,
+[class*="_centerCol"] h3,
+[class*="_centerCol"] h4,
 [data-slot^="conversation.chat"] h1,
 [data-slot^="conversation.chat"] h2,
 [data-slot^="conversation.chat"] h3,
@@ -256,14 +362,14 @@ const PRESET_MAIN_CSS = `
   line-height: 1.3 !important;
 }
 
-[data-pane="conversation"] ul,
-[data-pane="conversation"] ol,
+[class*="_centerCol"] ul,
+[class*="_centerCol"] ol,
 [class*="_markdown"] ul,
 [class*="_markdown"] ol {
   margin: 0.2em 0 0.4em 0 !important;
   padding-left: 1.2em !important;
 }
-[data-pane="conversation"] li,
+[class*="_centerCol"] li,
 [class*="_markdown"] li {
   font-size: 12.5px !important;
   line-height: 1.45 !important;
@@ -271,13 +377,13 @@ const PRESET_MAIN_CSS = `
 }
 
 /* 3. 行内代码与代码块：小等宽 + 防横向溢出 */
-[data-pane="conversation"] code,
+[class*="_centerCol"] code,
 [data-slot^="conversation.chat"] code,
 [class*="_markdown"] code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
   font-size: 11.5px !important;
 }
-[data-pane="conversation"] pre,
+[class*="_centerCol"] pre,
 [data-slot^="conversation.chat"] pre,
 [class*="_markdown"] pre {
   font-size: 11.5px !important;
@@ -288,7 +394,7 @@ const PRESET_MAIN_CSS = `
 }
 
 /* 表格：紧凑字号/内边距 + 窄屏横向滚动防撑破（display:block 让表格宽度受容器约束） */
-[data-pane="conversation"] table,
+[class*="_centerCol"] table,
 [data-slot^="conversation.chat"] table,
 [class*="_markdown"] table {
   font-size: 11.5px !important;
@@ -298,8 +404,8 @@ const PRESET_MAIN_CSS = `
   overflow-x: auto !important;
   -webkit-overflow-scrolling: touch !important;
 }
-[data-pane="conversation"] table th,
-[data-pane="conversation"] table td,
+[class*="_centerCol"] table th,
+[class*="_centerCol"] table td,
 [data-slot^="conversation.chat"] table th,
 [data-slot^="conversation.chat"] table td,
 [class*="_markdown"] table th,
@@ -310,13 +416,13 @@ const PRESET_MAIN_CSS = `
 }
 
 /* 3.5 可折叠披露行（data-disclosure-row，如“Code/思考”等行）：标题与摘要跟随紧凑字号 */
-[data-pane="conversation"] [data-disclosure-row],
+[class*="_centerCol"] [data-disclosure-row],
 [data-slot^="conversation.chat"] [data-disclosure-row] {
   font-size: 12.5px !important;
   line-height: 1.45 !important;
 }
-[data-pane="conversation"] [data-disclosure-row] [class*="_title"],
-[data-pane="conversation"] [data-disclosure-row] [class*="_summary"],
+[class*="_centerCol"] [data-disclosure-row] [class*="_title"],
+[class*="_centerCol"] [data-disclosure-row] [class*="_summary"],
 [data-slot^="conversation.chat"] [data-disclosure-row] [class*="_title"],
 [data-slot^="conversation.chat"] [data-disclosure-row] [class*="_summary"] {
   font-size: 12.5px !important;
@@ -327,32 +433,32 @@ const PRESET_MAIN_CSS = `
 /* 3.7 消息列表双层滚动容器（wSkVaW_scrollBody + Md3f7G_scroll）padding 叠加：
    官方各带 12~16px（合计每侧最多 28px），统一每层压到 8px（每侧合计 16px）。
    均排除输入区滚动容器，避免误伤 composer。 */
-[data-pane="conversation"] [class*="_scrollBody"],
-[data-pane="conversation"] [class*="_scroll"]:not([data-composer-card] [class*="_scroll"]) {
+[class*="_centerCol"] [class*="_scrollBody"],
+[class*="_centerCol"] [class*="_scroll"]:not([data-composer-card] [class*="_scroll"]) {
   padding: 8px 8px !important;
 }
 
 /* 4. 消息操作条（时间戳/复制等）与内行图标：显式收敛（SVG 不随字号缩放，需显式尺寸） */
-[data-pane="conversation"] [class*="_actions"],
+[class*="_centerCol"] [class*="_actions"],
 [data-slot^="conversation.chat"] [class*="_actions"] {
   font-size: 11px !important;
   line-height: 1.2 !important;
 }
-[data-pane="conversation"] [class*="_actions"] [class*="_timeStart"],
-[data-pane="conversation"] [class*="_actions"] [class*="_timeEnd"],
-[data-pane="conversation"] [class*="_actions"] [class*="_time"],
+[class*="_centerCol"] [class*="_actions"] [class*="_timeStart"],
+[class*="_centerCol"] [class*="_actions"] [class*="_timeEnd"],
+[class*="_centerCol"] [class*="_actions"] [class*="_time"],
 [data-slot^="conversation.chat"] [class*="_actions"] [class*="_timeStart"],
 [data-slot^="conversation.chat"] [class*="_actions"] [class*="_timeEnd"],
 [data-slot^="conversation.chat"] [class*="_actions"] [class*="_time"] {
   font-size: 11px !important;
 }
 /* 用时统计内各指标/分隔点间距收紧（margin: 0） */
-[data-pane="conversation"] [class*="_actions"] [class*="_timeEnd"] span,
+[class*="_centerCol"] [class*="_actions"] [class*="_timeEnd"] span,
 [data-slot^="conversation.chat"] [class*="_actions"] [class*="_timeEnd"] span {
   margin: 0 !important;
 }
 /* 统计行：单行优先，空间不足才折行（不再强制独占整行）；折行后与消息左缘对齐（margin-left 清零） */
-[data-pane="conversation"] [class*="_actions"] [class*="_timeEnd"],
+[class*="_centerCol"] [class*="_actions"] [class*="_timeEnd"],
 [data-slot^="conversation.chat"] [class*="_actions"] [class*="_timeEnd"] {
   flex: 0 1 auto !important;
   min-width: 0 !important;
@@ -362,15 +468,15 @@ const PRESET_MAIN_CSS = `
   text-overflow: clip !important;
   padding-left: 6px !important; /* 折行时也保留 6px 缩进，与上方内容区分 */
 }
-[data-pane="conversation"] [class*="_actions"],
+[class*="_centerCol"] [class*="_actions"],
 [data-slot^="conversation.chat"] [class*="_actions"] {
   flex-wrap: wrap !important;
   height: auto !important;
   overflow: visible !important;
 }
-[data-pane="conversation"] [class*="_actions"] svg,
+[class*="_centerCol"] [class*="_actions"] svg,
 [data-slot^="conversation.chat"] [class*="_actions"] svg,
-[data-pane="conversation"] [class*="_leading"] svg,
+[class*="_centerCol"] [class*="_leading"] svg,
 [data-slot^="conversation.chat"] [class*="_leading"] svg {
   width: 13px !important;
   height: 13px !important;
@@ -419,7 +525,47 @@ const PRESET_MAIN_CSS = `
   max-height: 13px !important;
   flex: none !important;
 }
-
+/* composer 工具栏紧凑：保持两行布局不变，仅缩小控件尺寸。
+   以工具栏行（_row，即 uV2eYG_row）为锚点，避免误伤输入文本区内的
+   文本引用 / chip 等行内元素。特异性 (0,2,0)~ (0,3,0) 均高于官方单类 (0,1,0)。 */
+[data-composer-card="true"] [class*="_row"] {
+  gap: 6px !important;
+  padding: 2px 6px 4px !important;
+}
+[data-composer-card="true"] [class*="_row"] [class*="_tools"],
+[data-composer-card="true"] [class*="_row"] [class*="_modes"],
+[data-composer-card="true"] [class*="_row"] [class*="_trailing"] {
+  gap: 6px !important;
+}
+[data-composer-card="true"] [class*="_row"] [class*="_add"],
+[data-composer-card="true"] [class*="_row"] [class*="_trigger"] {
+  padding: 0 4px !important;
+  gap: 2px !important;
+}
+[data-composer-card="true"] [class*="_row"] [class*="_add"] {
+  width: 26px !important;
+  min-width: 26px !important;
+  height: 26px !important;
+  min-height: 26px !important;
+}
+[data-composer-card="true"] [class*="_row"] [class*="_triggerLabel"],
+[data-composer-card="true"] [class*="_row"] [class*="_triggerEffort"] {
+  font-size: 12px !important;
+  line-height: 16px !important;
+}
+[data-composer-card="true"] [class*="_row"] [class*="_primary"] {
+  width: 30px !important;
+  height: 30px !important;
+  min-width: 30px !important;
+  min-height: 30px !important;
+}
+[data-composer-card="true"] [class*="_row"] svg {
+  width: 12px !important;
+  height: 12px !important;
+  max-width: 12px !important;
+  max-height: 12px !important;
+  flex: none !important;
+}
 `;
 /**
  * 内置官方预设：按界面区域划分的三段预设。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-mobile",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "DeepSeek Harness 远程与移动端安全网关插件：零修改 DSH 底层代码安全开放局域网与 Tailscale 连接 | DeepSeek Harness (DSH) Remote & Mobile Security Guard: safely opens Tailscale/LAN with zero core modifications, QR scan auth, RSA encryption & brute-force defense.",
   "keywords": [
     "dsh",