@yfwu2020/dsh-selection-explain 0.10.0 → 0.10.2

package/README.md

@@ -1,154 +1,189 @@
-# dsh-selection-explain · 划词解读
+<div align="center">
 
-> 在 DSH 里**选中任意文字**，就地得到**专业翻译** + **它在当前上下文里到底是什么意思**；还能接着追问、把别处的文字带进来问、或者一键升格成正式会话。
+# 划词解读
 
-[![release](https://img.shields.io/github/v/release/yfwu2020/dsh-selection-explain?label=release)](https://github.com/yfwu2020/dsh-selection-explain/releases)
-[![npm](https://img.shields.io/npm/v/@yfwu2020/dsh-selection-explain?label=npm)](https://www.npmjs.com/package/@yfwu2020/dsh-selection-explain)
-[![license](https://img.shields.io/badge/license-MIT-green)](./package.json)
-[![DSH plugin](https://img.shields.io/badge/DSH-plugin-8b5cf6)](https://github.com/yfwu2020/dsh-selection-explain)
+**划一下，说一句。把不懂的地方，就地问明白。**
+
+DSH 中的翻译、上下文解读与语音追问。
+
+[快速安装](#install) · [语音输入](#voice) · [功能一览](#read) · [使用与设置](#settings)
+
+`DSH 插件` · `v0.10.2` · `MIT`
+
+</div>
 
 ---
 
-## 语音：划完直接说，不用打字
+<a id="voice"></a>
 
-追问往往只有一两句（"这词在这里是不是贬义？"），可打字这件事本身就要把手从鼠标挪到键盘——和"划词"是矛盾的。所以划完可以直接说：
+## 01 / 划完，直接说
 
-| 你现在的状态 | 按语音键说话 → 结果 |
-| --- | --- |
-| **小窗没开**，刚划了一段文字 | 选中的地方**就地弹出一张临时卡片**，说的话直接落进卡片；松手定稿后**自动进小窗**追问（跳过翻译与详解） |
-| **小窗开着**，刚划了一段文字 | 等于**替你点了一下 `❝ 引用`**：那段文字挂进小窗、光标进输入框，接着说的话直接落在小窗里，和下一条提问一起发出去 |
-| 想直接对输入框说话 | 点输入框右边的 🎤 —— 和主会话**同一套**语音输入：实时波形、边说边出字、`■` 结束、`Esc` 取消（一次最长 60 秒） |
+选中一句话，直接用语音问“它在这里是什么意思？”——问题留在选区旁，回答接着出现在小窗里。
 
-<img src="assets/voice.png" alt="录音中的小窗：工具行是「✕ 取消 · 实时波形 · ■ 停止」，输入框里已经跟着长出了两行文字" width="540">
+### 从划词到提问，一口气完成
 
-**侧边栏的网页里也能这么用**（新）。侧边栏预览的 HTML 页面跑在沙箱 iframe 里，父页面读不到它的选区；插件往被预览的文档里注入一小段"桥"脚本，由**帧内**读取选中的文字、把它前后的上下文（各 1500 字）和坐标报出来，再用主界面同一张卡片 / 同一个浮标呈现。**安全边界没有退让**：帧始终是不透明源，不给 `allow-same-origin`——网页读不到 GUI 的 DOM / Cookie / localStorage，桥也只往外报"选中了什么 + 周围那点文本"。
+**小窗还没打开**：划选文字后启动输入法语音，选区旁会出现临时卡片，承接你说的话。结束语音、文字定稿后，默认自动发送，直接进入追问。
 
-- **收尾两个开关默认都开**（设置页「界面 · 语音输入」可关）：说完**自动发送**；一个字都没说**自动收起**。
-- **不读输入法的转写结果**：开麦时插件只是把自己的输入框抢到焦点上，字是输入法自己"上屏"进来的——所以不需要任何输入法权限，也不经第三方。
-- **音频不落盘、不进会话**：只在这一次识别里用一下，转写完即丢。
-- 需要：macOS 14.4+（用来检测"输入法正在用麦克风"，插件自带一个小探针）+ 一个输入法（实测豆包）。识别在 host 上做，本机模型 / 云端服务都能用。
+![选中文本与语音卡片之间的真实连线，问题可直接写入选区旁的输入框](assets/voice-card-light.png)
 
----
+*选区通过青色下划线和虚线连接到临时输入卡片。*
+
+**小窗已经打开**：划选新的文字，再启动输入法语音。这段文字会作为引用加入小窗，你说的话写入追问框。
+
+### 在小窗里，也能直接开口
+
+点击输入框旁的麦克风开始录音，查看实时波形与转写；点击停止完成输入，或按 `Esc` 取消本次录音。实时转写不可用时，会在停止后识别。
+
+![DSH 中实际运行的语音输入：小窗底部显示录音控制与波形](assets/voice.png)
+
+*英文例句的解读小窗中，直接启动语音追问。*
+
+语音卡片默认开启**说完直接发送**和**空录音时收起**。在 **设置 → 界面 → 语音输入** 中可以分别关闭。
+
+![语音相关设置的真实截图：空录音时收起与说完直接发送](assets/voice-settings.png)
+
+> 输入法联动需要 **macOS 14.4+** 与支持的语音输入法（已适配豆包）。小窗麦克风需要 DSH 启用语音识别服务。未配置语音时，文字解读与键盘追问仍可使用。
+
+<details>
+<summary>小窗麦克风提示不可用？</summary>
+
+请检查 DSH 宿主是否启用了 `@deepseek-ai/dsh-experimental-speech-to-text`，以及识别模型是否已就绪。首次使用时，如果小窗显示 **准备模型**，点击后按提示准备；下载与识别在宿主运行。
+
+这与输入法语音是两个独立入口：输入法联动使用输入法本身的识别能力。
+
+</details>
+
+<a id="read"></a>
+
+## 02 / 先读懂，再深入
+
+在 DSH 中选中文字，点击 **解读**。英文先给译文，中文按内容给解读，代码则生成注释；需要更多背景时，再点 **展开详解**。
+
+![选中英文例句后，真实小窗给出翻译并显示展开详解入口](assets/translation.png)
+
+*选中 “The migration ran long, so we will ship on Wednesday”，先得到译文。*
+
+展开后，模型结合前后文与可用的会话背景解释术语、语气和承接关系。你可以直接在底部继续追问。
 
-## 划词解读：翻译 + "在这里"的意思
+![真实解读小窗中的上下文详解与后续追问](assets/detail.png)
 
-读文档、看代码注释、翻聊天记录时，卡住的往往不是"这个词什么意思"，而是**"它在这里什么意思"**。插件把**选中文字 + 它周围的内容 + 当前会话的对话背景**一起交给模型，所以答案能落到"这里"。
+*接着问“ran long 是说迁移失败了吗？”，把问题留在同一段讨论里。*
 
-- **两段式，先快后深**：点开面板**先只出翻译**（上下文收窄，首字最快）；翻译出来后才出现 `↓ 展开详解`，点了才用完整会话背景做深度解读。想快就停在第一段。
-- **翻译按内容自适应**：中文句子只译其中夹着的英文；中文词列义项；英文句给译文；英文单词带音标逐义项；其他语言译成中文。最后固定一条**结论条**：`> 在本句中：<它在这里的确切含义>`。
-- **详解讲透"在这里"**：先判断这段文字是真实内容还是示例 / 引用，再讲专业名词的两层含义（通用定义 + 此处的具体所指）与承接关系；拿不准的会**先联网查证**再解释，事实融进解释里。
-- **选中代码 → 出注释**：整篇回答是一个代码块，**注释与原代码交替**，每条语句前面一行该语言的注释符号，原代码逐字不变。
+<a id="quotes"></a>
 
-<img src="assets/stage2.png" alt="展开详解后：翻译与详解两节卡片，下方可继续追问" width="540">
+## 03 / 把相关内容，一起带进来
 
-### 追问、引用、历史、升格
+小窗打开时，在主界面、小窗正文或支持的侧边栏网页预览中划选文字，点 **引用**，就能带着新材料继续问。一次最多加入 **4 段引用**，每段都可以单独移除。
 
-| 想做的事 | 怎么操作 |
+![真实小窗中，所选内容作为引用卡片出现在追问输入框上方](assets/quotes.png)
+
+不必每次从头来：
+
+| 想做什么 | 入口 |
 | --- | --- |
-| **追问** | 面板底部输入框直接问（`Enter` 发送 / `Shift+Enter` 换行）；答案流式出现，多轮上下文保留 |
-| **引用别处的文字一起问** | 小窗里、主界面上、**侧边栏网页里**划选 → 点 `❝ 引用`；鼠标悬停某条回答末尾的 `❝ 引用整条` 可引用整条（最多 4 段，卡片在输入框上方，可单条删） |
-| **回到刚才那次解读** | 点右下角悬浮胶囊，或 `🕘 最近` 里挑一条——原样回来，不重新请求 |
-| **把这次解读变成正式会话** | 点 `↗ 升格`（带上下文、引用与两节结论） |
-| **打断生成** | 生成中点 `停止`；关窗不会丢，胶囊点回来还是原样 |
+| 回到刚才的解读 | 右下角悬浮胶囊，或小窗里的 **最近** |
+| 把讨论继续做下去 | **升格**，将解读与追问带入正式会话 |
+| 阅读代码 | 选中代码，查看注释与原代码交替呈现的解释 |
+| 用图表理解复杂问题 | 将**输出偏好**切为网页，模型可生成 HTML 页面 |
 
----
+<a id="install"></a>
 
-## 安装
+## 快速安装
 
-**从 npm**（已发布）：
+这是 DSH 环境中的插件。请先安装 DSH、配置一个可用模型，再运行：
 
 ```bash
 dsh plugin --profile web add @yfwu2020/dsh-selection-explain
 ```
 
-**从 Release**（附构建好的 `.tgz`，装完即用）：
+安装后刷新 DSH 页面，选中一段文字，点击 **解读** 即可。
 
-```bash
-VER=$(curl -sI https://github.com/yfwu2020/dsh-selection-explain/releases/latest | grep -i '^location:' | sed 's|.*/tag/v||' | tr -d '\r\n')
-curl -LO "https://github.com/yfwu2020/dsh-selection-explain/releases/download/v$VER/yfwu2020-dsh-selection-explain-$VER.tgz"
-mkdir -p ~/.dsh/plugins/dsh-selection-explain
-tar -xzf "yfwu2020-dsh-selection-explain-$VER.tgz" -C ~/.dsh/plugins/dsh-selection-explain --strip-components=1
-dsh plugin --profile web add ~/.dsh/plugins/dsh-selection-explain
-```
+也可在 [GitHub Releases](https://github.com/yfwu2020/dsh-selection-explain/releases) 下载构建包，按下方说明安装。
+
+<details>
+<summary>安装 Release 构建包</summary>
 
-**从源码**：
+将下载的 `.tgz` 放到当前目录，以 v0.10.2 为例：
 
 ```bash
-git clone git@github.com:yfwu2020/dsh-selection-explain.git && cd dsh-selection-explain
-npm install && bash scripts/build.sh && dsh plugin --profile web add .
+mkdir -p ~/.dsh/plugins/dsh-selection-explain
+tar -xzf yfwu2020-dsh-selection-explain-0.10.2.tgz -C ~/.dsh/plugins/dsh-selection-explain --strip-components=1
+dsh plugin --profile web add ~/.dsh/plugins/dsh-selection-explain
 ```
 
-装好后**刷新页面**，选中文字试试（控制台会打印 `[dsh-selection-explain] 划词解读已就绪`）。卸载：`dsh plugin --profile web remove @yfwu2020/dsh-selection-explain`。
+安装完成后刷新 DSH 页面。其他版本请替换文件名中的版本号。
 
----
+</details>
 
-## 用法
+<details>
+<summary>从源码安装 / 卸载</summary>
 
-| 动作 | 结果 |
-| --- | --- |
-| 鼠标划选 / `Shift`+方向键 | 选区末端浮出 `✦ 解读`（输入框内的选择不触发；侧边栏的 HTML 预览里同样生效） |
-| 点 `✦ 解读` | 弹出面板：顶部是选中文字，正文是「翻译」卡片 |
-| `↓ 展开详解` | 用完整会话背景追加「详解」卡片 |
-| 小窗开着时划词 | 浮出的是 `❝ 引用`（要解读新的一段，先 `Esc` 收起小窗） |
-| 输入框右边 🎤 / 划完直接开麦 | 见上面「语音」一节 |
-| `✕` / `Esc` | 关面板。**语音进行中按 `Esc` 只取消这次语音**（已说出来的字留着），面板留着；再按一次才关窗 |
-| 右下角悬浮胶囊 | 点一下：回到最近一次小窗 / 收起 |
+```bash
+git clone https://github.com/yfwu2020/dsh-selection-explain.git
+cd dsh-selection-explain
+npm install
+npm run build
+dsh plugin --profile web add .
+```
 
-几个不别扭的细节：**点面板外不会关闭面板**（答案留在原地，只有 `✕`/`Esc`/胶囊能收）；输入框**跟着内容长高**（最多约 7 行，再长内部滚动并自动停在最新一行）；开窗**自动聚焦**输入框（只有你正在别处打字时才不抢）。与「完整视图」插件同装时，`Esc` 会按"最后操作的那个窗"逐层退出，一次只退一层。
+源码构建需要 package.json 中列出的 DSH 开发依赖可用。
 
----
+卸载 npm 安装的插件：
 
-## 设置
+```bash
+dsh plugin --profile web remove @yfwu2020/dsh-selection-explain
+```
 
-在面板里点 ⚙（或在设置页）改，改完**自动保存**；也能写 `cordis.patch.yml`（键名与默认值见 `src/settings.ts`）。常改的就几项：
+</details>
 
-- **模型**：默认「跟随主会话」，也可单独指定（首轮 / 次轮 / 追问共用这一个模型）。
-- **思考强度**：三个阶段各自一格 —— `关 / 低 / 高 / 最高`。
-  各家的档位名字并不统一（`off>low>high>max`、`low>high>max`、`off>minimal>…>high`、只有 `max`…），所以插件**每次都按当前模型自己声明的档位现算**，把你这四格落到它真实拥有的档上（悬停格子能看到"该模型发 xxx"，设置页那行也会实时写出四格的落点）。**小窗里的「推理等级（追问档）」是同一套四格、同一份数据**，两边改哪边都一样。模型不吃某一档时会自动换档重试并记住结论，下次不再撞。
-- **背景 / 工具 / 上限**：是否附带会话消息、引用是否带上文、能不能联网（`advanced_search`、`platform_search`）、超时与频率上限——都有默认值，不改也能用。
-- **界面 · 语音输入**：上面说的两个收尾开关、右下角胶囊、侧边栏网页划词桥（`bridgeSidebarPreview`，默认开）。
+<a id="settings"></a>
 
----
+## 使用与设置
 
-## 隐私
+`Enter` 发送 · `Shift+Enter` 换行 · `Esc` 收起小窗。录音期间，第一次 `Esc` 只取消录音，再按一次才关闭小窗。
 
-- **语音**：音频不落盘、不进会话；插件不读输入法的转写结果；不做边录边出的流式上传（说完一次给全，识别在 host 上）。
-- **会话背景**：可以关（`sessionContext: false`）；开启时只带你选中文字所在的消息及其之前若干条，工具调用 / 思考 / 系统注入都会被滤掉。
-- **联网**：只在你启用的工具范围内查证；工具日志不进小窗，只给结论。
-- **本地数据**：解读历史 `~/.dsh/selection-explain/history.json`；"哪些模型不吃关档 / 关档会泄漏"的记忆 `leaky-off.json`。都是明文，随时可删。
+点击小窗顶部的 **设置**，修改会自动保存：
 
----
+| 设置 | 可以调整什么 |
+| --- | --- |
+| 模型 | 跟随主会话，或为解读单独指定模型 |
+| 思考强度 | 首轮、次轮与追问分别选择 **关 / 低 / 高 / 最高**；按模型实际能力映射 |
+| 背景 | 是否附带会话消息，以及引用的上下文范围 |
+| 联网 | 是否允许模型调用工具，以及允许的工具范围 |
+| 界面 | 语音卡片收尾、侧边栏网页划词与悬浮胶囊 |
+| 数据 | 保留多少条最近解读 |
 
-## 常见问题
+### 与完整视图、最近会话共存（0.10.2）
 
-**选中了没反应？** 输入框里的选择不触发（避免干扰打字）；另外面板**不跟随页面滚动**（滚动即收起），符合"划完即看"。侧边栏的**源码视图**里没有 iframe，切回「预览」即可。
+解读小窗使用自己的浮层，显示在最近会话列表和完整视图工作面板上方，空白区域仍可点击原界面。在完整视图里，解读插件自行隐藏悬浮胶囊；返回分栏后恢复。
 
-**结论可靠吗？** 来自你配置的模型。专业领域术语请以人工判断为准；拿不准时它会联网查证，但也会出错。
+聊天与解读可以同时打开。与 `dsh-full-view` **0.1.6**、`dsh-recent-sessions` **0.2.3** 配合时，`Esc` 先退出最后操作的小窗；点击两窗之外后先退解读，再按一次收起聊天。此次调整需一起更新两个插件，未改变 Harness 的公共浮层或设置。
 
-**为什么首轮只有翻译？** 故意的：先用最窄的上下文抢首字速度，想要深度再点 `↓ 展开详解`。
+## 数据与使用范围
 
-**一定要装语音相关的服务吗？** 不用。没装时只是 🎤 与语音卡明说不可用，划词解读一切照常。
+选中文字、必要的前后文，以及开启的会话背景会交给你配置的模型。可在设置中关闭会话背景或工具调用。
 
----
+插件不将录音保存为音频文件，也不把音频附到会话；小窗录音由 DSH 配置的识别服务处理，是否经过云端取决于该服务。输入法语音由输入法本身处理，插件接收输入框中写入的文字。
 
-## 已知限制
+解读历史默认保留最近 **20 条**，以明文存储在 `~/.dsh/selection-explain/history.json`。可在 **设置 → 数据** 中调整，设为 `0` 停止保存新历史；已有历史不会因此清空。
 
-- 只覆盖 **DSH 界面内**（含侧边栏 HTML 预览）的选中文字；**内置浏览器标签页里的外部站点**（远端 URL 的 iframe，没有任何注入手段）与**源码视图**不触发。
-- 用**路由 URL**（而非 `srcdoc`/`blob`）的第三方预览器不接管（不动别人的资源改写与生命周期）；小窗里自己生成的网页预览（iframe 内部）也不划词——想引用它就用末尾的 `❝ 引用整条`。
-- 语音卡依赖 `macOS 14.4+` 的麦克风探针；🎤 语音输入需要宿主装有语音识别服务（如本机 SenseVoice）。
-- 依赖 DSH 的 `webServer` 与 `llm` 服务；宿主过旧可能不兼容（见 `package.json` 的 peerDependencies）。
+支持 DSH 界面与可注入的侧边栏 HTML 预览。输入框、源码视图、外部站点浏览器标签页，以及部分第三方预览不触发划词（直接通过独立 URL 加载、无法注入划词桥的页面）。模型回答与联网查证仍可能出错。
 
----
+<details>
+<summary>开发与兼容性</summary>
 
-## 开发者
+依赖 DSH 的 `webServer`、`llm` 等宿主服务；具体版本范围见 [package.json](https://github.com/yfwu2020/dsh-selection-explain/blob/main/package.json)。
 
 ```bash
-npm test                 # 单测 + 真浏览器冒烟（本机 Chrome；找不到自动跳过）
-bash scripts/build.sh    # host 走 tsc，client 是手写 bundle 直接拷贝到 lib/
+npm test
+npm run typecheck
+npm run build
 ```
 
-浏览器控制台自带自检钩子：`__dshSelectionExplain.state()` 看状态、`voiceCard()` / `voice()` 看语音、`bridge()` 看侧边栏划词桥、`selection()` 看当前选区。HTTP 接口（`/selection-explain/api/*`）、实现细节与踩坑记录见 [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) 与源码注释 —— 那份文档随本机开发走，刻意不进发布包。
+配置项见 [src/settings.ts](https://github.com/yfwu2020/dsh-selection-explain/blob/main/src/settings.ts)，默认值见 [src/index.ts](https://github.com/yfwu2020/dsh-selection-explain/blob/main/src/index.ts)。
+
+</details>
 
-## License
+---
 
-MIT
+[MIT License](https://github.com/yfwu2020/dsh-selection-explain/blob/main/LICENSE) · [反馈问题](https://github.com/yfwu2020/dsh-selection-explain/issues)

package/lib/client.js

@@ -4,9 +4,9 @@
  * 交互：在页面任意位置选中文字 → 选区末端浮出「解读」按钮 → 点击弹出面板，
  * 面板流式显示两节：① 专业中英翻译 ② 这段文字在当前上下文中的含义详解。
  *
- * 挂载点走官方 shell.overlay 槽（帧级浮层：三栏之外、滚动容器之外、默认
- * click-through，条目自己 opt-in pointer-events）——因此 UI 不会挡住 App。
- * 浮标与面板用 position:fixed 定位到选区坐标，DOM 归 shell.overlay 条目所有。
+ * 官方 shell.overlay 槽管理挂载生命周期；界面由插件自己挂到 body 的独立根。
+ * 根层固定为 70，越过全屏工作面板，不改写宿主公共浮层。空白区域鼠标穿透。
+ * 浮标与面板继续用 position:fixed 定位到选区坐标。
  *
  * 本文件是 DSH 客户端 bundle 的源文件（ModuleLoader 懒加载 CJS 表格式）：
  * 顶层只注册工厂，真正的副作用（React 组件、DOM/CSS、监听）都在 factory 被
@@ -435,9 +435,10 @@ window.__ModuleLoader__.load({
       //   --sel-fill(-fg)  实心块：浮标按钮 / 发送键 / 结论条标签——块上文字另算一套，
       //                    否则青底配白字只有 3.6（不达标），浅色下换成深青 5.4、深色下反白 7.4
       // 变量挂在浮层容器上 → 浮标与面板共用；深浅由**面板实际底色**决定（data-theme）。
-      '.dsh-sel-layer{--sel-a1:#0d9488;--sel-a1-text:#0f766e;--sel-a2:#0d9488;--sel-a2-text:#0f766e;',
+      '.dsh-sel-layer{position:fixed;inset:0;z-index:70;pointer-events:none;--sel-a1:#0d9488;--sel-a1-text:#0f766e;--sel-a2:#0d9488;--sel-a2-text:#0f766e;',
       '--sel-fill:#0f766e;--sel-fill-fg:#ffffff;',
       '--sel-a2-soft:color-mix(in srgb,var(--sel-a2) 12%,transparent);--sel-a1-soft:color-mix(in srgb,var(--sel-a1) 10%,transparent)}',
+      '.dsh-sel-layer[data-full-view] .dsh-sel-pill{display:none!important}',
       '.dsh-sel-layer[data-theme=dark]{--sel-a1:#4ecdc4;--sel-a1-text:#6fe3d8;--sel-a2:#4ecdc4;--sel-a2-text:#6fe3d8;',
       '--sel-fill:#4ecdc4;--sel-fill-fg:#052b26;',
       '--sel-a2-soft:color-mix(in srgb,var(--sel-a2) 16%,transparent);--sel-a1-soft:color-mix(in srgb,var(--sel-a1) 16%,transparent)}',
@@ -688,6 +689,9 @@ window.__ModuleLoader__.load({
       // flex-wrap 是给窄屏兜底的：这一行现在有 4 件东西（输出偏好 / 模型 / 麦克风 / 发送），
       // 窄面板下宁可折成两行，也不能把发送键挤出可视区（挤出去就点不到了）。
       '.dsh-sel-asktools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px}',
+      // 录音行出现时**不许换行**：发送键必须留在同一行
+      //（用户报：一开麦，↑ 就被顶到下面单独一行去了）
+      '.dsh-sel-asktools[data-capturing="1"]{flex-wrap:nowrap}',
       '.dsh-sel-askspace{flex:1 1 auto}',
       // 页眉里的撑开占位（标题与右侧按钮之间）
       '.dsh-sel-headspace{flex:1 1 auto;min-width:8px}',
@@ -764,7 +768,11 @@ window.__ModuleLoader__.load({
       '.dsh-sel-mic[data-state="requesting"] svg{animation:dsh-sel-spin .9s linear infinite}',
       '.dsh-sel-mic:disabled{cursor:default;opacity:.35}',
       // 录音行：flex:1 让它吃掉中间那截（主会话也是 waveform flex:1）
-      '.dsh-sel-capture{display:none;flex:1 1 auto;min-width:0;align-items:center;gap:8px}',
+      // flex-basis 必须给 **0%**（不是 auto）：行内换行的判定用的是**收缩前**的假设宽度，
+      // 而波形那个 svg 的固有宽度约 300px —— 给 auto 时"这一行放不下"会被判成真，发送键于是
+      // 掉到下一行。给 0% 之后两者按可用宽度分；min-width:0 + 波形的 min-width:24px 保证
+      // 录音行照旧撑满、也不会塌成 0。
+      '.dsh-sel-capture{display:none;flex:1 1 0%;min-width:0;align-items:center;gap:8px}',
       '.dsh-sel-capture[data-show="1"]{display:flex}',
       // 圆键：和发送键同尺寸、同圆度；浅底 + hover 变深（主会话的 roundButton 也是这套）
       '.dsh-sel-round{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:13px;cursor:pointer;',
@@ -777,7 +785,7 @@ window.__ModuleLoader__.load({
       // 停止键：图标是实心方块（主会话的 IconStopFill），颜色取主文字色 —— 一眼是"停"
       '.dsh-sel-stop{color:var(--dsw-alias-label-primary,inherit)}',
       // 波形：80 根竖线、中间对齐、静音时是一条虚线（算法与主会话逐行一致，见 paintWave）
-      '.dsh-sel-vwave{flex:1 1 auto;min-width:24px;height:24px;display:block;color:var(--dsw-alias-label-secondary,inherit)}',
+      '.dsh-sel-vwave{flex:1 1 0%;min-width:24px;height:24px;display:block;color:var(--dsw-alias-label-secondary,inherit)}',
       // 状态文案（请允许使用麦克风… / 识别中… / 没听清…）：12px 次要色 + 可选呼吸点
       '.dsh-sel-vactivity{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;',
       'color:var(--dsw-alias-label-secondary,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
@@ -2485,9 +2493,10 @@ window.__ModuleLoader__.load({
       styleEl.textContent = CSS
       document.head.appendChild(styleEl)
 
-      /** 浮层容器：挂在 shell.overlay 条目里，自身 click-through。 */
+      /** 自有浮层根：位于 body，公共父层的堆叠上下文不影响它。 */
       var layer = el('div', 'dsh-sel-layer')
       layer.style.pointerEvents = 'none'
+      layer.setAttribute('data-dsh-floating-owner', 'explanation')
 
       var button = el('button', 'dsh-sel-btn')
       button.type = 'button'
@@ -3751,10 +3760,27 @@ window.__ModuleLoader__.load({
       layer.appendChild(historyList)
 
       /**
-       * 注册进官方 shell.overlay 槽（帧级浮层）。
-       * React 组件只负责把 layer 容器挂进浮层；浮标/面板由上面的命令式代码管理，
-       * React 不接管它们的子树（容器本身无 children，不会被 diff 清空）。
+       * 官方槽仅保留不可见的生命周期锚点；界面根由本插件挂到 body。
+       * 稳定 ref 避免 React 重渲染时摘挂根节点、丢失输入焦点。
        */
+      function syncFullViewLayer() {
+        var fullView = !!document.querySelector('[data-dsh-full-view]')
+        if (fullView !== layer.hasAttribute('data-full-view')) {
+          if (fullView) layer.setAttribute('data-full-view', '')
+          else layer.removeAttribute('data-full-view')
+        }
+      }
+      function mountFloatingLayer(node) {
+        if (node) {
+          if (layer.parentNode !== document.body) document.body.appendChild(layer)
+          syncFullViewLayer()
+        } else if (layer.parentNode) layer.parentNode.removeChild(layer)
+      }
+      var fullViewObserver = null
+      if (typeof MutationObserver === 'function') {
+        fullViewObserver = new MutationObserver(syncFullViewLayer)
+        fullViewObserver.observe(document.body, {subtree:true, childList:true, attributes:true, attributeFilter:['data-dsh-full-view']})
+      }
       /** 开窗后"还没聚焦过输入框"（见 focusComposerOnce）。 */
       var askFocusPending = false
       /** 调试：最后一次"没聚焦"卡在哪一步（-1 表示聚焦成功）。 */
@@ -3773,16 +3799,14 @@ window.__ModuleLoader__.load({
               },
             }, function SelectionExplainLayer() {
               return React.createElement('div', {
-                className: 'dsh-sel-mount',
-                style: { pointerEvents: 'none' },
-                ref: function (node) {
-                  if (node && layer.parentNode !== node) node.appendChild(layer)
-                },
+                className: 'dsh-sel-anchor',
+                style: { display: 'none', pointerEvents: 'none' },
+                ref: mountFloatingLayer,
               })
             })
           })
         } catch (error) {
-          // 槽注册失败不应把整页插件装载一起拖垮：降级为仅报错（面板挂在浮层外不可见）
+          // 槽注册失败仅报错，自有界面根保持未挂载，不影响其他插件。
           console.error('[dsh-selection-explain] shell.overlay 槽注册失败：', error)
         }
       } else {
@@ -4533,7 +4557,11 @@ window.__ModuleLoader__.load({
         vcard.setAttribute('data-voiced', on ? '1' : '0')
         if (!vcardBox) return
         if (String(vcardBox.value || '').trim()) return
-        vcardBox.placeholder = on ? '正在听…' : '直接打字也行…'
+        // 松手之后、框还空着时显示什么：
+        //   · 「空录音时收起」开着（默认）→ 「正在关闭…」：这张卡马上要被收掉，
+        //     如实说它正在走（而不是"直接打字也行…"那种假邀请）；
+        //   · 两个收尾开关都关着（卡会留着）→ 才给"直接打字也行…"这句邀请。
+        vcardBox.placeholder = on ? '正在听…' : settingsLive.voiceCancelOnSilence !== false ? '正在关闭…' : '直接打字也行…'
       }
 
       function focusVCard() {
@@ -4924,6 +4952,9 @@ window.__ModuleLoader__.load({
       function closeVCard(animate) {
         if (!vcardState.open) return
         vcardState.open = false
+        // 取消的那一刻就把空框的占位换成「正在关闭…」：卡正在塌缩，空框里挂着"直接打字也行…"
+        // 是句假话。已经打出来的字**不动** —— 它就是那个塌缩动画要收掉的东西。
+        if (vcardBox && !String(vcardBox.value || '').trim()) vcardBox.placeholder = '正在关闭…'
         vcardState.range = null
         vcardState.anchorRect = null
         // ⚠️ 必须**显式 blur**，不能只把卡片 display:none 掉。
@@ -10379,6 +10410,8 @@ window.__ModuleLoader__.load({
         var capturing = phase !== 'idle'
         captureRow.setAttribute('data-show', capturing ? '1' : '0')
         captureRow.style.display = capturing ? 'flex' : 'none'
+        // 工具行也标记一下：录音时 flex-wrap 锁死（发送键必须还在这一行）
+        askTools.setAttribute('data-capturing', capturing ? '1' : '0')
         // 录音行出现时，工具行左边那三样（输出偏好 / 模型 / 🎤）让位——和主会话一样，
         // 录音时那行只讲一件事：怎么结束、结束之后会得到什么。
         webMode.style.display = capturing ? 'none' : ''
@@ -12111,6 +12144,7 @@ window.__ModuleLoader__.load({
             }
             pillObserver = null
           }
+          if (fullViewObserver) fullViewObserver.disconnect()
           if (typeof offSlot === 'function') offSlot()
           // 划词桥：摘观察者与消息监听，并把我们自己建的预览 blob 全部回收
           if (bridgeScanId) clearTimeout(bridgeScanId)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yfwu2020/dsh-selection-explain",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "DSH 划词解读：选中文字浮出按钮，点击弹窗流式显示专业中英翻译 + 该文字在当前上下文中的含义详解",
   "type": "module",
   "main": "./lib/index.js",

package/scripts/smoke-panel.mjs

@@ -264,7 +264,19 @@ async function main() {
     check('插件装载（槽注册 + apply）', !!registration && registration.options.id === '@yfwu2020/dsh-selection-explain', registration && registration.options.id)
     registration.component().props.ref(mount)
     hook = window.__dshSelectionExplain
-    check('浮层挂进 mount', !!document.querySelector('.dsh-sel-layer'), '')
+    check('解读自有浮层已挂载', !!document.querySelector('.dsh-sel-layer'), '')
+    var ownedLayer = document.querySelector('.dsh-sel-layer')
+    check('解读使用 body 自有根，公开归属且空白穿透', ownedLayer.parentNode === document.body && ownedLayer.getAttribute('data-dsh-floating-owner') === 'explanation' && getComputedStyle(ownedLayer).pointerEvents === 'none', '')
+    check('解读独立根越过完整视图工作面板', Number(getComputedStyle(ownedLayer).zIndex) > 60, getComputedStyle(ownedLayer).zIndex)
+    var modeFrame = document.createElement('div')
+    document.body.appendChild(modeFrame)
+    modeFrame.setAttribute('data-dsh-full-view', '')
+    await sleep(40)
+    check('解读自身响应完整视图并隐藏胶囊', getComputedStyle(document.querySelector('.dsh-sel-pill')).display === 'none', '')
+    modeFrame.removeAttribute('data-dsh-full-view')
+    await sleep(40)
+    check('返回分栏由解读自身恢复胶囊', getComputedStyle(document.querySelector('.dsh-sel-pill')).display !== 'none', '')
+    modeFrame.remove()
   } catch (error) {
     check('插件装载（槽注册 + apply）', false, error && error.message)
     finish()
@@ -337,6 +349,50 @@ async function main() {
   // 因为 CSS 声明块漏了收尾花括号被整条丢弃（属性对、规则不生效，单测照样全绿）；
   // 修好闭合后它又暴露了"追问一下宽度就从 440 跳到 540"的问题 —— 两件事都只有真浏览器量得出来。
   // 现在宽度**不随阶段变**（恒 540），下面同时钉住"首轮就是 540"和"追问之后仍是 540"。
+  // ── 录音行不许把发送键顶到下一行（用户报：一开麦 ↑ 就掉到下面单独一行）──
+  // 真浏览器量布局：按录音态把 DOM 摆成插件摆的样子（亮出录音行、让位那几样工具），
+  // 再量发送键是否还与录音行同处一行。CSS 里那两条 flex-basis:0% + nowrap 就是为它服务的。
+  {
+    var toolsEl = document.querySelector('.dsh-sel-asktools')
+    var captureEl = document.querySelector('.dsh-sel-capture')
+    var sendEl = document.querySelector('.dsh-sel-asksend')
+    var waveEl = document.querySelector('.dsh-sel-vwave')
+    if (toolsEl && captureEl && sendEl) {
+      var yielding = ['.dsh-sel-pref', '.dsh-sel-askspace', '.dsh-sel-picker', '.dsh-sel-mic']
+        .map(function (sel) { return document.querySelector(sel) })
+        .filter(Boolean)
+      var restore = yielding.map(function (n) { return [n, n.style.display] })
+      // 必须**窄一点**量：波形那个 svg 的固有宽度是 384px（viewBox 640x40 按 24px 高推出来的），
+      // 540px 的面板刚好放得下、量不出问题；用户那个宽度才会露出来。面板本来就可调窄，这是真实场景。
+      var panelWide = document.querySelector('.dsh-sel-panel')
+      var widthBefore = panelWide ? panelWide.style.width : ''
+      if (panelWide) panelWide.style.width = '420px'
+      toolsEl.setAttribute('data-capturing', '1')
+      captureEl.setAttribute('data-show', '1')
+      captureEl.style.display = 'flex'
+      if (waveEl) waveEl.style.display = ''
+      yielding.forEach(function (n) { n.style.display = 'none' })
+      var captureRect = captureEl.getBoundingClientRect()
+      var sendRect = sendEl.getBoundingClientRect()
+      check(
+        '录音行出现时发送键仍在同一行（不被顶到下面）',
+        sendRect.height > 0 && sendRect.top < captureRect.bottom && Math.abs(sendRect.top - captureRect.top) <= 8,
+        JSON.stringify({
+          capture: [Math.round(captureRect.top), Math.round(captureRect.bottom)],
+          send: [Math.round(sendRect.top), Math.round(sendRect.bottom)],
+        }),
+      )
+      restore.forEach(function (pair) { pair[0].style.display = pair[1] })
+      if (panelWide) panelWide.style.width = widthBefore
+      captureEl.style.display = 'none'
+      captureEl.setAttribute('data-show', '0')
+      toolsEl.setAttribute('data-capturing', '0')
+      if (waveEl) waveEl.style.display = 'none'
+    } else {
+      check('录音行出现时发送键仍在同一行（不被顶到下面）', false, '没找到工具行/录音行/发送键')
+    }
+  }
+
   var WIDE_WIDTH = 540
   {
     var panelEl = document.querySelector('.dsh-sel-panel')

package/scripts/test-client.mjs

@@ -103,6 +103,9 @@ class FakeEl {
   removeAttribute(key) {
     delete this.attrs[key]
   }
+  hasAttribute(key) {
+    return this.getAttribute(key) !== null
+  }
   getAttribute(key) {
     return this.attrs[key] ?? null
   }
@@ -1242,7 +1245,10 @@ const mount = new FakeEl('div')
 const element = registration.component()
 assert('浮层组件返回 React 元素', !!element && element.type === 'div')
 element.props.ref(mount)
-assert('layer 容器已挂进浮层', mount.children.length === 1 && mount.children[0].className === 'dsh-sel-layer')
+const floatingLayer = body.children.find((c) => c.className === 'dsh-sel-layer')
+assert('界面挂在 body 自有根，不提升公共槽', !!floatingLayer && floatingLayer.parentNode === body && mount.children.length === 0)
+assert('自有根声明公开的小窗归属', floatingLayer && floatingLayer.getAttribute('data-dsh-floating-owner') === 'explanation')
+assert('重渲染使用稳定挂载 ref', registration.component().props.ref === element.props.ref)
 
 // ───────────────────────── 划词 → 浮标 ─────────────────────────
 const container = new FakeEl('div')
@@ -1264,7 +1270,7 @@ const selection = {
 windowStub.getSelection = () => selection
 documentStub.dispatch('mouseup', { target: body })
 await new Promise((r) => setTimeout(r, 20))
-const button = mount.children[0].children.find((c) => c.className === 'dsh-sel-btn')
+const button = floatingLayer.children.find((c) => c.className === 'dsh-sel-btn')
 assert('选中文字后浮标出现', !!button && button.style.display === 'inline-flex', button && `left=${button.style.left} top=${button.style.top}`)
 // 浮现动效：只在"隐藏 → 显示"那一次挂动效类；已可见时只平移；animationend 后自动摘掉
 {
@@ -1335,7 +1341,7 @@ assert('选中文字后浮标出现', !!button && button.style.display === 'inli
 // 引用（❝）的**离线**契约：浮标进了浮层、CSS 规则齐全（真实交互在宿主可达时另有一段）
 {
   const css = readFileSync(BUNDLE, 'utf8')
-  const quoteBtn = Array.from(walk(mount)).find((n) => String(n.className).indexOf('dsh-sel-quotebtn') >= 0)
+  const quoteBtn = Array.from(walk(floatingLayer)).find((n) => String(n.className).indexOf('dsh-sel-quotebtn') >= 0)
   assert('浮层里有「❝ 引用」浮标，且默认藏着', !!quoteBtn && quoteBtn.style.display === 'none' && textOf(quoteBtn).indexOf('引用') >= 0, quoteBtn ? textOf(quoteBtn) : '未找到')
   assert('CSS 契约：引用区默认收起、data-show 控制显隐', /\.dsh-sel-quotes\{display:none;flex-direction:column/.test(css) && /\.dsh-sel-quotes\[data-show="1"\]\{display:flex\}/.test(css), '')
   assert('CSS 契约：引用卡片三段（来源 / 摘要 / 删除）', /\.dsh-sel-quotechip-src\{/.test(css) && /\.dsh-sel-quotechip-text\{/.test(css) && /\.dsh-sel-quotechip-x\{/.test(css), '')
@@ -1361,12 +1367,12 @@ try {
 }
 
 button.dispatch('click', { preventDefault() {}, stopPropagation() {} })
-const panel = mount.children[0].children.find((c) => c.className === 'dsh-sel-panel')
+const panel = floatingLayer.children.find((c) => c.className === 'dsh-sel-panel')
 // 面板内的固定引用点（后续断言共用）
 const sections = Array.from(walk(panel)).filter((node) => node.className.indexOf('dsh-sel-sec') >= 0)
 const panelHead = Array.from(walk(panel)).find((node) => node.className === 'dsh-sel-head')
 const histBtn = Array.from(walk(panelHead)).find((n) => n.className.indexOf('dsh-sel-action') >= 0 && textOf(n).indexOf('最近') >= 0)
-const histList = mount.children[0].children.find((n) => n.className === 'dsh-sel-history')
+const histList = floatingLayer.children.find((n) => n.className === 'dsh-sel-history')
 assert('「最近聊过的」是独立浮层，不在消息滚动区里（B 方案）', !!histList && histList.parentNode.className === 'dsh-sel-layer' && !panel.contains(histList), histList ? histList.parentNode.className : '未找到')
 const detailCard = sections.find((node) => node.getAttribute('data-sec') === 'detail')
 const expandBtn = Array.from(walk(panel)).find((node) => node.className === 'dsh-sel-expand')
@@ -1378,7 +1384,7 @@ assert('弹窗显示选中文字', !!panel && textOf(panel).indexOf('the migrati
 // 指的是刚才解读的那段文字（解读要的文字与上下文在 mouseup 那刻就抓好了，见 openForSelection）
 assert('点「解读」后本文档选区被收掉', clearedSelections.count >= 1, `removeAllRanges 调用 ${clearedSelections.count} 次`)
 {
-  const quoteBtnNode = Array.from(walk(mount)).find((n) => String(n.className).indexOf('dsh-sel-quotebtn') >= 0)
+  const quoteBtnNode = Array.from(walk(floatingLayer)).find((n) => String(n.className).indexOf('dsh-sel-quotebtn') >= 0)
   assert(
     '点「解读」后引用浮标不出现（旧选区不该复活它）',
     !quoteBtnNode || quoteBtnNode.style.display === 'none',
@@ -3646,6 +3652,16 @@ assert('点回来看到"已停止"的状态与可重试入口', hook.state().pha
 
   assert('CSS 契约：模型胶囊紧挨发送键、菜单向上弹', /\.dsh-sel-picker\{display:inline-flex/.test(css) && /\.dsh-sel-pickermenu\{position:absolute;right:10px;bottom:calc\(100% \+ 8px\)/.test(css), '')
   assert('CSS 契约：档位选中态为主色实心', /\.dsh-sel-tierbtn\[data-on="1"\]\{background:var\(--sel-fill/.test(css), '')
+  // 用户报：一开麦，输入框右下角那个 ↑ 就被顶到下面单独一行去了。
+  // 行内换行的判定用的是**收缩前**的假设宽度，而波形 svg 的固有宽度约 300px ——
+  // 所以录音行/波形必须 flex-basis:0%（不是 auto），并且录音时工具行锁死 nowrap。
+  assert(
+    'CSS 契约：录音时工具行不换行 + 录音行与波形按可用宽度分（flex-basis 0%）',
+    /\.dsh-sel-asktools\[data-capturing="1"\]\{flex-wrap:nowrap\}/.test(css) &&
+      /\.dsh-sel-capture\{display:none;flex:1 1 0%;min-width:0/.test(css) &&
+      /\.dsh-sel-vwave\{flex:1 1 0%;min-width:24px/.test(css),
+    '',
+  )
 
   const nodes = hook.modelNodes()
   // 桩里没有 querySelectorAll（客户端也不用它），用 walk 数节点
@@ -5306,7 +5322,7 @@ assert('Esc/关闭后隐藏', panel.style.display === 'none')
 {
   // 也认 setAttribute('class') —— SVG 元素的 className 是只读对象，插件只能用 setAttribute
   const find = (cls) =>
-    Array.from(walk(mount)).find(
+    Array.from(walk(floatingLayer)).find(
       (n) => n.className === cls || (n.getAttribute && n.getAttribute('class') === cls),
     )
 
@@ -5424,7 +5440,7 @@ assert('Esc/关闭后隐藏', panel.style.display === 'none')
     threadDot ? 'cx=' + String(threadDot.getAttribute('cx')) + ' cy=' + String(threadDot.getAttribute('cy')) : 'none',
   )
 
-  const merged = Array.from(walk(mount)).filter((n) => n.className === 'dsh-sel-uline')
+  const merged = Array.from(walk(floatingLayer)).filter((n) => n.className === 'dsh-sel-uline')
   assert(
     '块级盒子被丢掉，两行各有一条下划线（不再整段只剩一条）',
     merged.length === 2,
@@ -5681,6 +5697,13 @@ assert('Esc/关闭后隐藏', panel.style.display === 'none')
       hook.voiceCard().open === true,
       JSON.stringify(hook.voiceCard()),
     )
+    // 开着「空录音时收起」时，这段"等定稿"的窗口里框里显示「正在关闭…」：
+    // 卡片马上要被收掉，写"直接打字也行…"是句假话（用户明确要求取消时不要显示任何文字）
+    assert(
+      '（开着「空录音时收起」）空框里如实显示「正在关闭…」（不是"直接打字也行…"那种假邀请）',
+      !!box && String(box.placeholder) === '正在关闭…' && String(box.value) === '',
+      JSON.stringify({ placeholder: box ? String(box.placeholder) : '(无卡片)', value: box ? String(box.value) : '' }),
+    )
     await sleep(900)
     const cardSilent = find('dsh-sel-vcard')
     assert('定稿后才取消（空录音）', hook.voiceCard().open === false, JSON.stringify(hook.voiceCard()))
@@ -5761,6 +5784,38 @@ assert('Esc/关闭后隐藏', panel.style.display === 'none')
       JSON.stringify(hook.voiceCard()),
     )
 
+    // 关掉「空录音时收起」（卡会留着）→ 才给"直接打字也行…"那句邀请
+    settingsStub.value = { voiceCancelOnSilence: false, voiceAutoSend: false }
+    hook.reloadSettings()
+    await sleep(320)
+    hook.close()
+    await sleep(20)
+    micStub.value = recording
+    // 走真实路径把卡开出来（与上面几段同一套：选区还在 → mouseup → 浮标 → 这一拍轮询发现开麦）
+    documentStub.dispatch('mouseup', { target: body })
+    await sleep(320)
+    if (box) {
+      box.value = ''
+      box.dispatch('input', { target: box, preventDefault() {}, stopPropagation() {} })
+    }
+    await sleep(80)
+    micStub.value = stopped
+    await sleep(400)
+    assert(
+      '（关掉「空录音时收起」）卡片要留着，这时才显示"直接打字也行…"',
+      hook.voiceCard().open === true && !!box && String(box.placeholder).indexOf('直接打字') >= 0,
+      JSON.stringify({ open: hook.voiceCard().open, placeholder: box ? String(box.placeholder) : '(无)' }),
+    )
+    // Esc 取消：那一瞬间空框里就该是空的（不留占位）
+    documentStub.dispatch('keydown', { key: 'Escape', target: body, preventDefault() {}, stopPropagation() {} })
+    await sleep(20)
+    assert(
+      'Esc 取消录音：那一刻空框就换成「正在关闭…」（不等动画结束）',
+      !!box && String(box.placeholder) === '正在关闭…' && String(box.value) === '',
+      JSON.stringify({ placeholder: box ? String(box.placeholder) : '(无)', value: box ? String(box.value) : '' }),
+    )
+    await sleep(800) // 等关机动画收尾
+
     // 收尾：设置清回默认，别影响后面的用例
     settingsStub.value = {}
     hook.reloadSettings()
@@ -6105,7 +6160,7 @@ for (const dispose of disposers.reverse()) {
   }
 }
 
-assert('清理后 DOM 归零', mount.children.length === 0 && body.children.indexOf(container) >= 0)
+assert('清理后自有根摘除，保留宿主 DOM', floatingLayer.parentNode === null && mount.children.length === 0 && body.children.indexOf(container) >= 0)
 assert('清理后划词桥自己建的预览 blob 被回收', bridgeOwnedBlob !== '' && !blobStore.has(bridgeOwnedBlob), bridgeOwnedBlob)
 assert('清理后钩子移除', windowStub.__dshSelectionExplain === undefined)
 console.log('\n=== 客户端集成测试结束 ===')

package/src/client/index.js

@@ -4,9 +4,9 @@
  * 交互：在页面任意位置选中文字 → 选区末端浮出「解读」按钮 → 点击弹出面板，
  * 面板流式显示两节：① 专业中英翻译 ② 这段文字在当前上下文中的含义详解。
  *
- * 挂载点走官方 shell.overlay 槽（帧级浮层：三栏之外、滚动容器之外、默认
- * click-through，条目自己 opt-in pointer-events）——因此 UI 不会挡住 App。
- * 浮标与面板用 position:fixed 定位到选区坐标，DOM 归 shell.overlay 条目所有。
+ * 官方 shell.overlay 槽管理挂载生命周期；界面由插件自己挂到 body 的独立根。
+ * 根层固定为 70，越过全屏工作面板，不改写宿主公共浮层。空白区域鼠标穿透。
+ * 浮标与面板继续用 position:fixed 定位到选区坐标。
  *
  * 本文件是 DSH 客户端 bundle 的源文件（ModuleLoader 懒加载 CJS 表格式）：
  * 顶层只注册工厂，真正的副作用（React 组件、DOM/CSS、监听）都在 factory 被
@@ -435,9 +435,10 @@ window.__ModuleLoader__.load({
       //   --sel-fill(-fg)  实心块：浮标按钮 / 发送键 / 结论条标签——块上文字另算一套，
       //                    否则青底配白字只有 3.6（不达标），浅色下换成深青 5.4、深色下反白 7.4
       // 变量挂在浮层容器上 → 浮标与面板共用；深浅由**面板实际底色**决定（data-theme）。
-      '.dsh-sel-layer{--sel-a1:#0d9488;--sel-a1-text:#0f766e;--sel-a2:#0d9488;--sel-a2-text:#0f766e;',
+      '.dsh-sel-layer{position:fixed;inset:0;z-index:70;pointer-events:none;--sel-a1:#0d9488;--sel-a1-text:#0f766e;--sel-a2:#0d9488;--sel-a2-text:#0f766e;',
       '--sel-fill:#0f766e;--sel-fill-fg:#ffffff;',
       '--sel-a2-soft:color-mix(in srgb,var(--sel-a2) 12%,transparent);--sel-a1-soft:color-mix(in srgb,var(--sel-a1) 10%,transparent)}',
+      '.dsh-sel-layer[data-full-view] .dsh-sel-pill{display:none!important}',
       '.dsh-sel-layer[data-theme=dark]{--sel-a1:#4ecdc4;--sel-a1-text:#6fe3d8;--sel-a2:#4ecdc4;--sel-a2-text:#6fe3d8;',
       '--sel-fill:#4ecdc4;--sel-fill-fg:#052b26;',
       '--sel-a2-soft:color-mix(in srgb,var(--sel-a2) 16%,transparent);--sel-a1-soft:color-mix(in srgb,var(--sel-a1) 16%,transparent)}',
@@ -688,6 +689,9 @@ window.__ModuleLoader__.load({
       // flex-wrap 是给窄屏兜底的：这一行现在有 4 件东西（输出偏好 / 模型 / 麦克风 / 发送），
       // 窄面板下宁可折成两行，也不能把发送键挤出可视区（挤出去就点不到了）。
       '.dsh-sel-asktools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px}',
+      // 录音行出现时**不许换行**：发送键必须留在同一行
+      //（用户报：一开麦，↑ 就被顶到下面单独一行去了）
+      '.dsh-sel-asktools[data-capturing="1"]{flex-wrap:nowrap}',
       '.dsh-sel-askspace{flex:1 1 auto}',
       // 页眉里的撑开占位（标题与右侧按钮之间）
       '.dsh-sel-headspace{flex:1 1 auto;min-width:8px}',
@@ -764,7 +768,11 @@ window.__ModuleLoader__.load({
       '.dsh-sel-mic[data-state="requesting"] svg{animation:dsh-sel-spin .9s linear infinite}',
       '.dsh-sel-mic:disabled{cursor:default;opacity:.35}',
       // 录音行：flex:1 让它吃掉中间那截（主会话也是 waveform flex:1）
-      '.dsh-sel-capture{display:none;flex:1 1 auto;min-width:0;align-items:center;gap:8px}',
+      // flex-basis 必须给 **0%**（不是 auto）：行内换行的判定用的是**收缩前**的假设宽度，
+      // 而波形那个 svg 的固有宽度约 300px —— 给 auto 时"这一行放不下"会被判成真，发送键于是
+      // 掉到下一行。给 0% 之后两者按可用宽度分；min-width:0 + 波形的 min-width:24px 保证
+      // 录音行照旧撑满、也不会塌成 0。
+      '.dsh-sel-capture{display:none;flex:1 1 0%;min-width:0;align-items:center;gap:8px}',
       '.dsh-sel-capture[data-show="1"]{display:flex}',
       // 圆键：和发送键同尺寸、同圆度；浅底 + hover 变深（主会话的 roundButton 也是这套）
       '.dsh-sel-round{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:13px;cursor:pointer;',
@@ -777,7 +785,7 @@ window.__ModuleLoader__.load({
       // 停止键：图标是实心方块（主会话的 IconStopFill），颜色取主文字色 —— 一眼是"停"
       '.dsh-sel-stop{color:var(--dsw-alias-label-primary,inherit)}',
       // 波形：80 根竖线、中间对齐、静音时是一条虚线（算法与主会话逐行一致，见 paintWave）
-      '.dsh-sel-vwave{flex:1 1 auto;min-width:24px;height:24px;display:block;color:var(--dsw-alias-label-secondary,inherit)}',
+      '.dsh-sel-vwave{flex:1 1 0%;min-width:24px;height:24px;display:block;color:var(--dsw-alias-label-secondary,inherit)}',
       // 状态文案（请允许使用麦克风… / 识别中… / 没听清…）：12px 次要色 + 可选呼吸点
       '.dsh-sel-vactivity{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;',
       'color:var(--dsw-alias-label-secondary,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
@@ -2485,9 +2493,10 @@ window.__ModuleLoader__.load({
       styleEl.textContent = CSS
       document.head.appendChild(styleEl)
 
-      /** 浮层容器：挂在 shell.overlay 条目里，自身 click-through。 */
+      /** 自有浮层根：位于 body，公共父层的堆叠上下文不影响它。 */
       var layer = el('div', 'dsh-sel-layer')
       layer.style.pointerEvents = 'none'
+      layer.setAttribute('data-dsh-floating-owner', 'explanation')
 
       var button = el('button', 'dsh-sel-btn')
       button.type = 'button'
@@ -3751,10 +3760,27 @@ window.__ModuleLoader__.load({
       layer.appendChild(historyList)
 
       /**
-       * 注册进官方 shell.overlay 槽（帧级浮层）。
-       * React 组件只负责把 layer 容器挂进浮层；浮标/面板由上面的命令式代码管理，
-       * React 不接管它们的子树（容器本身无 children，不会被 diff 清空）。
+       * 官方槽仅保留不可见的生命周期锚点；界面根由本插件挂到 body。
+       * 稳定 ref 避免 React 重渲染时摘挂根节点、丢失输入焦点。
        */
+      function syncFullViewLayer() {
+        var fullView = !!document.querySelector('[data-dsh-full-view]')
+        if (fullView !== layer.hasAttribute('data-full-view')) {
+          if (fullView) layer.setAttribute('data-full-view', '')
+          else layer.removeAttribute('data-full-view')
+        }
+      }
+      function mountFloatingLayer(node) {
+        if (node) {
+          if (layer.parentNode !== document.body) document.body.appendChild(layer)
+          syncFullViewLayer()
+        } else if (layer.parentNode) layer.parentNode.removeChild(layer)
+      }
+      var fullViewObserver = null
+      if (typeof MutationObserver === 'function') {
+        fullViewObserver = new MutationObserver(syncFullViewLayer)
+        fullViewObserver.observe(document.body, {subtree:true, childList:true, attributes:true, attributeFilter:['data-dsh-full-view']})
+      }
       /** 开窗后"还没聚焦过输入框"（见 focusComposerOnce）。 */
       var askFocusPending = false
       /** 调试：最后一次"没聚焦"卡在哪一步（-1 表示聚焦成功）。 */
@@ -3773,16 +3799,14 @@ window.__ModuleLoader__.load({
               },
             }, function SelectionExplainLayer() {
               return React.createElement('div', {
-                className: 'dsh-sel-mount',
-                style: { pointerEvents: 'none' },
-                ref: function (node) {
-                  if (node && layer.parentNode !== node) node.appendChild(layer)
-                },
+                className: 'dsh-sel-anchor',
+                style: { display: 'none', pointerEvents: 'none' },
+                ref: mountFloatingLayer,
               })
             })
           })
         } catch (error) {
-          // 槽注册失败不应把整页插件装载一起拖垮：降级为仅报错（面板挂在浮层外不可见）
+          // 槽注册失败仅报错，自有界面根保持未挂载，不影响其他插件。
           console.error('[dsh-selection-explain] shell.overlay 槽注册失败：', error)
         }
       } else {
@@ -4533,7 +4557,11 @@ window.__ModuleLoader__.load({
         vcard.setAttribute('data-voiced', on ? '1' : '0')
         if (!vcardBox) return
         if (String(vcardBox.value || '').trim()) return
-        vcardBox.placeholder = on ? '正在听…' : '直接打字也行…'
+        // 松手之后、框还空着时显示什么：
+        //   · 「空录音时收起」开着（默认）→ 「正在关闭…」：这张卡马上要被收掉，
+        //     如实说它正在走（而不是"直接打字也行…"那种假邀请）；
+        //   · 两个收尾开关都关着（卡会留着）→ 才给"直接打字也行…"这句邀请。
+        vcardBox.placeholder = on ? '正在听…' : settingsLive.voiceCancelOnSilence !== false ? '正在关闭…' : '直接打字也行…'
       }
 
       function focusVCard() {
@@ -4924,6 +4952,9 @@ window.__ModuleLoader__.load({
       function closeVCard(animate) {
         if (!vcardState.open) return
         vcardState.open = false
+        // 取消的那一刻就把空框的占位换成「正在关闭…」：卡正在塌缩，空框里挂着"直接打字也行…"
+        // 是句假话。已经打出来的字**不动** —— 它就是那个塌缩动画要收掉的东西。
+        if (vcardBox && !String(vcardBox.value || '').trim()) vcardBox.placeholder = '正在关闭…'
         vcardState.range = null
         vcardState.anchorRect = null
         // ⚠️ 必须**显式 blur**，不能只把卡片 display:none 掉。
@@ -10379,6 +10410,8 @@ window.__ModuleLoader__.load({
         var capturing = phase !== 'idle'
         captureRow.setAttribute('data-show', capturing ? '1' : '0')
         captureRow.style.display = capturing ? 'flex' : 'none'
+        // 工具行也标记一下：录音时 flex-wrap 锁死（发送键必须还在这一行）
+        askTools.setAttribute('data-capturing', capturing ? '1' : '0')
         // 录音行出现时，工具行左边那三样（输出偏好 / 模型 / 🎤）让位——和主会话一样，
         // 录音时那行只讲一件事：怎么结束、结束之后会得到什么。
         webMode.style.display = capturing ? 'none' : ''
@@ -12111,6 +12144,7 @@ window.__ModuleLoader__.load({
             }
             pillObserver = null
           }
+          if (fullViewObserver) fullViewObserver.disconnect()
           if (typeof offSlot === 'function') offSlot()
           // 划词桥：摘观察者与消息监听，并把我们自己建的预览 blob 全部回收
           if (bridgeScanId) clearTimeout(bridgeScanId)