dsh-sidecard-ask 2.1.2 → 2.1.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2.1.3
+
+**主题：折叠态胶囊不再压在聊天输入框上（2026-10-25 实拍报告）。**
+
+### 修复
+
+- **胶囊盖住输入框**。浮层固定在 `bottom:16px`，而输入框就在会话列底部，折叠态胶囊
+  正好落在输入框上。新增纯函数
+  `floatBottom({ frameHeight, composerTop, fallback, limit })`：测量 `[data-composer-card]`
+  的顶边，把浮层抬到输入框上方 8px（CSS 变量 `--dsa-gap-bottom`）。两道保险——输入框
+  顶边落在窗口上半部（空会话的居中输入框）时不抬；结果上限 240px，避免超高输入框把
+  浮层推到会话正文上。
+- **胶囊改为按内容收缩**。浮层本就贴着右边缘（`right:8px`），「再往右」没有余量，所以
+  改为缩窄：内容自适应、上限 240px、容器右对齐，左边缘随之右退。内边距 8/12 → 6/10、
+  行高 18 → 16，问题文本由 `flex:1` 改为 `flex:0 1 auto`（只在真放不下时才截断）。
+  取舍：抬到输入框上方后它会压住最后一行消息，所以必须足够窄小。
+- 新增 `node.dataset.layerBottom`（与 `layerWidth` 并列），用户反馈可以直接报出浮层
+  离底多少。
+
+### 验证
+
+`test/float-placement.mjs` 新增 `floatBottom` 数值用例与源码钩子；四套脚本
+100 / 1427 / 57 / 271 全绿。
+
 ## 2.1.2
 
 **主题：按 DSH 0.2.1-rc.3 的实测契约修复——原生右栏卡片、语言跟随、只读工具收窄、可信主机围栏。

package/README.md

@@ -196,7 +196,7 @@ plugin_manager(action="install_bundle", target="D:\\Users\\34332\\AI\\dsh-sideca
 
 非法值会被拒绝（设置页报错、接口返回 `invalid-config`），并把被忽略的项列在 `/state` 的 `problems` 里——不会静默吞掉。
 
-### 4.1 内置浮层的位置规则（`floatPlacement`）
+### 4.1 内置浮层的位置规则（`floatPlacement` / `floatBottom`）
 
 用户实测报告过一个问题：浮层是 `position:fixed; right:16px; width:min(400px,92vw)` 的实心卡片。
 实测那一次（1400px 宽的窗口）对话区右边界在 x≈971，而浮层左边界在 x≈858，**压住正文约 113px**，
@@ -218,7 +218,23 @@ bleeds = 对话区右边界 - left > 1          // 只有带宽 < 240px 时才
 - 浮层**只使用对话区右侧的预留带**（右栏也在这条带里），窗口越窄它越窄，而不是越靠左。
 - `capped: true` 表示「上限没用满，是被可用带宽压住的」——这是正常的自适应，不是错误。
 - 挂载时、窗口 resize 时、右栏开合时（`ResizeObserver`）都会重算；流式刷新只重渲染，不动几何。
-- 浮层根节点带 `data-layer-width`（实际宽度）与 `data-dsa-float-mode`：报告问题时可直接读这两个值。
+- 浮层根节点带 `data-layer-width`（实际宽度）、`data-layer-bottom`（距窗口底的距离）与
+  `data-dsa-float-mode`：报告问题时可直接读这三个值。
+
+**垂直位置（2.1.3）**：宽度不是唯一的问题——浮层原本固定在 `bottom:16px`，而输入框就在会话列底部，
+折叠态胶囊必然压在输入框上（2026-10-25 实拍报告「挡住聊天框了」）。垂直位置由纯函数 `floatBottom` 决定：
+
+```js
+// floatBottom({ frameHeight, composerTop = null, fallback = 16, limit = 240 })
+if (composerTop 未知 || 帧高为 0) return 16      // 测不到就保持旧锚点
+if (composerTop < 帧高 / 2)      return 16       // 居中输入框（空会话）不是底栏，不抬
+bottom = clamp(帧高 - composerTop + 8, 16, 240)  // 抬到输入框上方 8px，上限 240px
+```
+
+`composerTop` 取自 DSH 的 `[data-composer-card]`（输入框那张卡片的顶边），该节点也进了
+`ResizeObserver`——输入多行时卡片会往上长，浮层跟着重算，不会重新沉回输入框上。
+取舍要讲清楚：抬起来之后它**改压最后一两行消息**，所以胶囊同时改成按内容收缩（≤240px、右对齐），
+尽量把覆盖面积压到最小。
 
 ### 4.2 右侧栏打开时「占满它」（`dockRail`，1.8.3）
 
@@ -782,10 +798,12 @@ node tools/compat-probe.mjs --json tools/.cache/matrix.json
    展开后标题栏右侧有**收起为胶囊（⇥）**与**删除这条追问对话（×）**——× 会把该卡片从浮层与追问历史里
    一并移除，**无法撤销**（有内容时会先弹插件内确认层；点浮层底部的「关闭」则只把它摘离浮层、历史仍保留在
    设置页的历史管理器里）。2.0.0 起不再有「隐藏整个浮层 / 只留一个计数圆点」这套形态。
-   用 F12 选中浮层根节点（`[data-dsa-root]`）读两个值自检：
+   用 F12 选中浮层根节点（`[data-dsa-root]`）读三个值自检：
    - `data-dsa-float-mode` 应为 `capsule` / `full`（铺满右栏时为 `dock`）；
-   - `data-layer-width` 应等于 `min(floatMaxWidth, 对话区右边界到帧右边缘的可用带宽)`。
-   **关键判据：胶囊/卡片的左边缘不得越过对话区（`[data-slot^="conversation"]`）的右边界**。
+   - `data-layer-width` 应等于 `min(floatMaxWidth, 对话区右边界到帧右边缘的可用带宽)`；
+   - `data-layer-bottom` 应等于 `帧高 - 输入框（`[data-composer-card]`）顶边 + 8`（空会话/测不到时为 16）。
+   **关键判据：胶囊/卡片的左边缘不得越过对话区（`[data-slot^="conversation"]`）的右边界，
+   下边缘不得落在输入框上**。
    把窗口从 1920px 拖到 900px、再开关一次右侧栏，浮层应随之变窄而不是往左压住正文；
    只有窗口窄到可用带宽不足 240px 时才允许压入（此时是设计内的降级，不是 bug）。
 9. **占满右侧栏（1.8.3，`dockRail`）**：先把右侧栏打开（任意面板，例如「团队任务板」），再追问一次 →

package/client.js

@@ -117,7 +117,7 @@ window.__ModuleLoader__.load({
      * the Host and the module's `api.version` both read it, so a report can
      * never claim a generation the browser is not actually running.
      */
-    const CLIENT_VERSION = '2.1.2'
+    const CLIENT_VERSION = '2.1.3'
 
     /**
      * Tab kind served by the DSH native right rail (also its implementation id).
@@ -364,6 +364,17 @@ window.__ModuleLoader__.load({
     const FLOAT_GAP_SIDEBAR = 10
     const FLOAT_MIN_WIDTH = 240
     const FLOAT_MAX_WIDTH_LIMIT = 560
+    /**
+     * Vertical clearance (2.1.3). The layer used to be pinned `bottom:16px`,
+     * i.e. straight on top of the composer — which is what the 2026-10-25
+     * report ("挡住聊天框了") caught: the capsule covered the input box. The
+     * layer now measures the composer and sits just above it.
+     */
+    const FLOAT_GAP_BOTTOM = 16
+    const FLOAT_GAP_COMPOSER = 8
+    const FLOAT_BOTTOM_LIMIT = 240
+    /** The capsule is a status pill, not a card: it sizes to its content. */
+    const CAPSULE_MAX_WIDTH = 240
 
     /**
      * The floating layer's width for one frame.
@@ -394,6 +405,40 @@ window.__ModuleLoader__.load({
       return { width, avail, capped: width < cap, bleeds: lane - left > 1 }
     }
 
+    /**
+     * How far above the frame's bottom edge the floating layer sits (2.1.3).
+     *
+     * Pure, like {@link floatPlacement}, and mirrored by the tests.
+     * `composerTop` is the composer card's top edge, in frame coordinates. The
+     * composer is part of the conversation column, so the old fixed
+     * `bottom:16px` parked the layer straight on top of the input box; the
+     * layer is lifted until its own bottom edge clears the composer by
+     * `FLOAT_GAP_COMPOSER`.
+     *
+     * Two guards keep that lift honest: a composer whose top sits in the frame's
+     * upper half is not a bottom bar (the empty-session composer is vertically
+     * centred) and is ignored, and the result is clamped to `limit` so an
+     * unusually tall composer cannot push the layer over the conversation.
+     *
+     * @param {object} input - `frameHeight`, `composerTop`, `fallback`, `limit`.
+     * @returns {number} Bottom offset in px, never below `fallback`.
+     */
+    function floatBottom({
+      frameHeight,
+      composerTop = null,
+      fallback = FLOAT_GAP_BOTTOM,
+      limit = FLOAT_BOTTOM_LIMIT,
+    }) {
+      const base = Number.isFinite(fallback) ? Math.max(0, Math.round(fallback)) : FLOAT_GAP_BOTTOM
+      const frame = Number.isFinite(frameHeight) ? frameHeight : 0
+      if (frame <= 0 || !Number.isFinite(composerTop)) return base
+      // A centred composer is not a bottom bar; leave the layer where it was.
+      if (composerTop < frame / 2) return base
+      const clear = Math.round(frame - composerTop + FLOAT_GAP_COMPOSER)
+      const cap = Number.isFinite(limit) ? Math.max(base, limit) : FLOAT_BOTTOM_LIMIT
+      return Math.max(base, Math.min(clear, cap))
+    }
+
     const DOCK_MIN_WIDTH = 280
     const DOCK_MIN_HEIGHT = 240
 
@@ -2654,9 +2699,15 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
    \`floatPlacement\` through --dsa-float-w, so it grows left only as far as the
    conversation column allows. pointer-events stays off on the container so the
    empty area around the pill never eats a click meant for the conversation. */
-.dsa-float{pointer-events:none;position:fixed;right:var(--dsa-gap-right, 8px);bottom:16px;
+.dsa-float{pointer-events:none;position:fixed;right:var(--dsa-gap-right, 8px);bottom:var(--dsa-gap-bottom, 16px);
   display:flex;flex-direction:column;gap:8px;width:var(--dsa-float-w, 340px);max-width:92vw}
 .dsa-float > *{pointer-events:auto}
+/* Capsule mode (2.1.3): the layer is a status pill, not a card. It sizes to its
+   own content and stays right-aligned, so shrinking it is what pulls its left
+   edge back over the conversation — the layer is already flush with the frame's
+   right edge, so it has nowhere further right to go. */
+.dsa-float[data-dsa-float-mode="capsule"]{width:auto;align-items:flex-end;
+  max-width:min(var(--dsa-float-w, 340px), var(--dsa-capsule-max, 240px), 92vw)}
 /* Docked presentation (1.8.3): the same container, but pinned to the right
    rail's measured rectangle (inline left/top/width/height) instead of the
    frame's bottom-right corner. Right/bottom must be released, otherwise the
@@ -2671,8 +2722,8 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
   box-shadow:none;background:transparent;padding:10px 12px 8px}
 .dsa-float[data-dsa-float-mode="dock"] .dsa-answer{max-height:none;flex:1 1 auto;min-height:0;overflow:auto}
 .dsa-stack{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
-.dsa-capsule{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;text-align:left;
-  padding:8px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;line-height:18px;
+.dsa-capsule{display:flex;align-items:center;gap:6px;width:auto;max-width:100%;box-sizing:border-box;text-align:left;
+  padding:6px 10px;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;line-height:16px;
   border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));
   background:var(--dsw-alias-bg-overlay, #fff);color:var(--dsw-alias-label-primary, #111);
   box-shadow:0 2px 10px rgba(0,0,0,.14)}
@@ -2685,7 +2736,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
 .dsa-capsule-dot[data-status="error"]{background:var(--dsw-alias-state-error-primary, #c0392b)}
 .dsa-capsule-dot[data-status="stopped"]{background:var(--dsw-alias-state-warn-primary, #b8860b)}
 .dsa-capsule-label{font-weight:600;white-space:nowrap}
-.dsa-capsule-q{min-width:0;flex:1;color:var(--dsw-alias-label-secondary, #666);
+.dsa-capsule-q{min-width:0;flex:0 1 auto;color:var(--dsw-alias-label-secondary, #666);
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .dsa-capsule-chev{flex:none;color:var(--dsw-alias-label-secondary, #888)}
 /* Delete confirmation (2.0.0). Fixed, not inline: a card docked into the right
@@ -4707,7 +4758,10 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         // Slot subtrees only: `.rightbar` and `[data-dsh-panel-host]` were
         // dropped in 2.1.2 — no supported build renders either marker, so they
         // were two dead branches in a selector that runs on every resize.
-        const selector = '[data-slot^="conversation"], [data-slot^="sidebar.right"]'
+        // 2.1.3: the composer card joins the list so a multi-line draft (which
+        // grows the box upward) re-measures the layer's vertical clearance
+        // instead of letting the pill sink back onto the input.
+        const selector = '[data-slot^="conversation"], [data-slot^="sidebar.right"], [data-composer-card]'
         const observed = new Set()
         const all = () => {
           try {
@@ -4743,11 +4797,25 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           const railBox = rail === null ? null : rail.box
           const laneRight = laneRect === null ? rootWidth : laneRect.right
           const railLeft = railBox === null ? null : railBox.left
+          // 2.1.3: the composer occupies the bottom of the conversation column,
+          // so the layer's old fixed `bottom:16px` landed straight on top of the
+          // input box. Measure the composer card (the box the user types in) and
+          // lift the layer clear of it; `floatBottom` owns the guards.
+          const composerEl = one('[data-slot^="conversation"] [data-composer-card]')
+            ?? one('[data-composer-card]')
+          const composerRect = measure(composerEl)
+          const gapBottom = floatBottom({
+            frameHeight: rootHeight,
+            composerTop: composerRect === null ? null : composerRect.top,
+          })
+          node.style.setProperty('--dsa-gap-bottom', `${gapBottom}px`)
           const placement = floatPlacement({ frameWidth: rootWidth, laneRight, railLeft, maxWidth })
           node.style.setProperty('--dsa-float-w', `${placement.width}px`)
           node.style.setProperty('--dsa-gap-right', `${FLOAT_GAP_RIGHT}px`)
+          node.style.setProperty('--dsa-capsule-max', `${CAPSULE_MAX_WIDTH}px`)
           // Readable placement, so a user report can say WHERE the layer sat.
           node.dataset.layerWidth = String(placement.width)
+          node.dataset.layerBottom = String(gapBottom)
 
           // Docked presentation: the card fills the rail page's body instead of
           // floating over it. Only measured in `full` mode — a capsule/launcher
@@ -7429,6 +7497,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           renderRichText,
           pickSurface,
           floatPlacement,
+          floatBottom,
           railDock,
           compareVersions,
           electFamilyLeader,

package/index.js

@@ -45,7 +45,7 @@ export const name = 'dsh-sidecard-ask'
 export const inject = ['webServer']
 
 /** Version of this plugin (kept in step with package.json by test/verify.mjs). */
-export const PLUGIN_VERSION = '2.1.2'
+export const PLUGIN_VERSION = '2.1.3'
 
 /** Route prefix of the plugin's own API. */
 export const ROUTE_PREFIX = '/sidecard-ask/api'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidecard-ask",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "DSH 划词追问（侧边卡片作答）：在聊天区与任务区选中文本就地追问，答案由独立子代理在侧边卡片里流式呈现，也可选择落回主对话。",
   "type": "module",
   "main": "index.js",