dsh-sidecard-ask 1.8.1 → 1.8.2

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 1.8.2
+
+**主题：提问框底部的「作答位置」从"两枚看不出选中哪一侧的标签"改成一眼可辨的分段芯片；并把 1.8.1 之后写在本地、尚未提交的弹层对比度修补一并发布。**
+
+起因是用户截图：弹层底部「作答位置 ｜ 主对话 ｜ 侧边卡片」两个选项长得几乎一样，看不出答案会去主对话还是侧边卡片。
+
+- **选中态不可辨（用户反馈，已复现）**：旧选中态只有 `background: var(--dsw-alias-bg-layer-2)`，
+  叠在弹层 `--dsw-alias-bg-overlay` 上几乎是同色（本机皮肤下 `rgba(243,247,253,.95)` on
+  `rgba(248,251,255,.98)`），选中与未选中的差别只剩字重。
+  改法：`.dsa-seg` 变成带中灰描边（`rgba(127,127,127,.5)`）与内凹阴影的轨道；两个选项各带一枚 13px
+  内联 SVG 图标（气泡＝主对话，带右轨的框＝侧边卡片），**选中侧为品牌实底 + 白色 600 字 + 内白环 + 投影**，
+  未选侧为 `label-secondary` + 透明底；补 `:hover` 与 `:focus-visible`（品牌色 outline）。
+  组件抽成 `CarrierSeg`（client §9），带 `role="group"`、`aria-pressed`、`title` 说明；文案仍走 i18n。
+- **深色主题里白字压品牌色只有 2.79:1（复核时发现的，非用户反馈）**：本机皮肤深色把
+  `--dsw-alias-brand-primary` 提亮到 `#5b9cf5`，白色 600 字在其上低于 4.5:1 正文下限、也低于 3:1 大字下限。
+  改法：`[data-ds-dark-theme]` 下选中侧改用深墨 `#0a1428`（实测 6.57:1）；浅色保持白字
+  （`#2563c0` 上 5.79:1）。令牌值取自本机 `uiskin-theme`，对比度按 WCAG 相对亮度公式实算，不是目测。
+- **弹层边框/阴影对比度修补（1.8.1 之后写在本地、未提交，本次一并发布）**：`.dsa-pop` 的 1px 边
+  改显式中灰 `rgba(127,127,127,.55)`（`border-l2` 落在弹层表面只量到 ≈1.3:1），阴影改两层衰减
+  `0 14px 36px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.14)`；`.dsa-pop` 内的次级文案改用
+  `label-primary` 并保留 `.78` 不透明度。
+- 测试：contract 新增 **16** 项钉住这个控件（唯一 `.dsa-seg`、恰好两个按钮、恰好一个
+  `aria-pressed="true"`、每个选项带一枚内联 `svg`、`data-on` 只有一个真值、两个去向的标签不互换、
+  品牌实底规则与深色覆盖规则必须出现在样式表里）。**点击切换本身仍然不可测**：harness 的
+  `useState` 只回队列式 setter、不触发重渲染，注释里写明了原因，没有假装测过。
+- 版本号三处同步到 1.8.2。
+
+本机实测（四项均 exit 0）：verify **57** / contract **972** / float-placement **38** / smoke **226**
+= **1293 项全部通过**（1.8.1 为 1277，contract 956 → 972）。
+
+> 未验证（如实记录）：浅色/深色两张对比图（`design-preview/07-carrier-seg-{light,dark}.png`）是
+> **离屏渲染**——无头 Edge 加载"从 `client.js` 抽取的真实 CSS + 本机皮肤真实令牌值"的静态页，
+> 不是运行中 DSH 窗口的截图。真实页面里的点击手感、字体栅格化差异、弹层背后背景图的影响，
+> 仍需刷新页面人工看一次。此前一轮口头汇报里说"新增 8 条"是数错了，实际新增 16 条。
+
 ## 1.8.1
 
 **主题：对 1.8.0 交付做实证复核后的三项修正——1 个已复现的真实缺陷、1 处开关失效、1 条缺证据的声明。**

package/README.md

@@ -72,8 +72,10 @@ dsh-sidecard-ask/
 ├── README.md             本文件
 ├── CHANGELOG.md          版本变更记录
 ├── LICENSE               MIT
-├── design-preview/       1.5.0 的方案讨论资料，**不参与发布**：00–02 是手绘 SVG 示意图（非截图），
-│                         03-prototype-ac.html 是可直接双击打开的可点按原型（自带近似色板，非真实观感）
+├── design-preview/       方案讨论资料，**不参与发布**：00–02 是手绘 SVG 示意图（非截图），
+│                         03-prototype-ac.html 是可直接双击打开的可点按原型（自带近似色板，非真实观感），
+│                         07-carrier-seg-{light,dark}.png 是 1.8.2 的离屏渲染对比图（无头 Edge + 真实 CSS
+│                         与真实令牌值，仍非运行中窗口截图）
 ├── tools/
 │   └── compat-probe.mjs  DSH 版本能力探测（§7 矩阵的来源）
 └── test/
@@ -515,6 +517,9 @@ node tools/compat-probe.mjs --json tools/.cache/matrix.json
 2. 选区末端应浮出动作条：「💬 追问选中内容」按钮 + 「解释 / 翻译 / 总结 / 润色 / 纠错」芯片，
    按钮带区域徽标（聊天区 / 任务区 / 跨区选择）；**点任一芯片即跳过提问框直接在侧边卡片作答**；
 3. 点主按钮后提问框出现（顶部同样有一排芯片），焦点在输入框，引文预览显示选中文本；
+   底部「作答位置」是两枚带内联图标的芯片（气泡＝主对话，带右轨的框＝侧边卡片）：**选中侧为品牌实底 + 白字 600 + 内白环**，
+   未选侧只有描边；深色主题下选中侧改深墨字（品牌色在深色被提亮到 `#5b9cf5`，白字只有 2.79:1，深墨字 6.57:1）；
+   控件带 `role="group"` 与 `aria-pressed`，键盘 Tab 可见品牌色焦点环；
 4. 输入问题按 Enter → 提问框关闭，右下角出现卡片，状态先为「作答中…」并**逐字增长**；
 5. 结束后状态变「已完成」；底部出现「改问 / 复制 / 继续追问 / 关闭」；答案里代码块的右上角有「⧉ 复制代码」；
 6. 点「复制」→ 出现「已复制」提示；点「继续追问」→ 输入第二条问题（追加一轮），卡片内容**重置换行**后继续流式；
@@ -599,9 +604,10 @@ node test/smoke-test.mjs        # 端到端：流式/截断/取消/持久化/失
 ```
 
 四个脚本都以 `process.exitCode` 反映结果，失败会列出具体条目；测试会把 `DSH_HOME` 指向临时目录，不会污染真实配置。
-当前规模（1.8.1 本机实测，四项均 exit 0）：verify **57** 项 + contract **956** 项 + float-placement **38** 项 +
-smoke **226** 项 = **1277 项全部通过**（1.8.0 为 1267 项，其中 contract 由 946 → 956：
-新增"清空历史后重载仍为空"与"建议芯片跟随开关"两组回归用例）。
+当前规模（1.8.2 本机实测，四项均 exit 0）：verify **57** 项 + contract **972** 项 + float-placement **38** 项 +
+smoke **226** 项 = **1293 项全部通过**（1.8.1 为 1277 项，其中 contract 由 956 → 972：新增 16 项钉住提问框
+「作答位置」分段芯片——唯一 `.dsa-seg`、两个按钮、恰好一个 `aria-pressed`、各带一枚内联图标、
+品牌实底规则与深色覆盖规则；点击切换本身不可测，原因见 1.8.2 的 CHANGELOG）。
 
 **真机探针（不属于四套自测）**：`.compat-report/scripts/composer-probe.mjs` 需要
 `playwright-core` 与本机 Edge，对**真实 DSH 页面**回答 composer DOM / 哪条写入路径真能改变

package/client.js

@@ -47,7 +47,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 = '1.8.1'
+    const CLIENT_VERSION = '1.8.2'
 
     /**
      * Tab kind served by the DSH native right rail (also its implementation id).
@@ -1919,10 +1919,17 @@ window.__ModuleLoader__.load({
    trigger drops its own fixed positioning, chips join the row directly. */
 .dsa-trigger-embedded{position:static;box-shadow:0 2px 10px rgba(0,0,0,.18)}
 .dsa-quickbar-chips{display:contents}
+/* Contrast pass, driven by a light-theme reference screenshot: every 1px edge
+   inside the popover measured only ≈1.3–1.7:1 against the card surface, which
+   is why the card read as a translucent sticker instead of a framed popover.
+   The frame is therefore drawn explicitly here rather than through border-l2,
+   which the host resolves below that level; mid grey is used instead of a
+   black/white alpha so the stroke stays visible on both themes. The shadow is
+   a two-layer falloff so the card lifts off the page as well. */
 .dsa-pop{pointer-events:auto;position:fixed;width:min(420px, 92vw);display:flex;flex-direction:column;gap:8px;
-  padding:12px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));
+  padding:12px;border-radius:12px;border:1px solid rgba(127,127,127,.55);
   background:var(--dsw-alias-bg-overlay, #fff);color:var(--dsw-alias-label-primary, #111);
-  box-shadow:0 10px 30px rgba(0,0,0,.24);font-size:13px;line-height:19px}
+  box-shadow:0 14px 36px rgba(0,0,0,.30),0 3px 10px rgba(0,0,0,.14);font-size:13px;line-height:19px}
 .dsa-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsa-title{font-weight:600;font-size:13px}
 .dsa-quote{margin:0;padding:6px 8px;max-height:96px;overflow:auto;white-space:pre-wrap;word-break:break-word;
@@ -1946,11 +1953,43 @@ window.__ModuleLoader__.load({
 /* Icon-only variant (the floating layer's collapse/hide controls): square and
    quiet so the card title bar stays one line and the title keeps the weight. */
 .dsa-btn-icon{padding:4px 7px;line-height:1;font-size:13px;color:var(--dsw-alias-label-secondary, #666)}
-.dsa-seg{display:inline-flex;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.3));border-radius:8px;overflow:hidden}
-.dsa-seg button{padding:3px 10px;border:none;background:transparent;color:var(--dsw-alias-label-secondary, #555);
-  font:inherit;font-size:12px;cursor:pointer}
-.dsa-seg button[data-on="true"]{background:var(--dsw-alias-bg-layer-2, rgba(127,127,127,.14));
-  color:var(--dsw-alias-label-primary, #111);font-weight:500}
+/* Segmented control (main chat / side card). These are the two destinations an
+   answer can land in, so the pair has to read as a radio choice, not as two
+   quiet labels: the group gets a recessed track with an explicit mid-grey edge
+   (border-l1/l2 measured ≈1.3:1 against the popover surface and disappeared),
+   each option carries a 13px label plus an inline glyph, and the selected side
+   is a solid brand chip whose white 600-weight text cannot be confused with the
+   unselected side. The inner white ring keeps the chip from flattening on the
+   brand colour in either theme. */
+.dsa-seg{display:inline-flex;padding:3px;gap:3px;
+  border:1px solid rgba(127,127,127,.5);border-radius:10px;
+  background:var(--dsw-alias-bg-layer-1, rgba(127,127,127,.10));
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.10)}
+.dsa-seg button{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
+  border:1px solid transparent;border-radius:7px;background:transparent;
+  color:var(--dsw-alias-label-secondary, #666);font:inherit;font-size:13px;font-weight:500;
+  line-height:18px;cursor:pointer;white-space:nowrap;
+  transition:background .12s ease,color .12s ease,box-shadow .12s ease}
+.dsa-seg button svg{flex:none;opacity:.8}
+.dsa-seg button:hover{background:var(--dsw-alias-bg-layer-2, rgba(127,127,127,.16));
+  color:var(--dsw-alias-label-primary, #222)}
+.dsa-seg button:hover svg{opacity:1}
+.dsa-seg button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary, #4c8dff);outline-offset:1px}
+.dsa-seg button[data-on="true"]{background:var(--dsw-alias-brand-primary, #4c8dff);
+  border-color:var(--dsw-alias-brand-primary, #4c8dff);color:#fff;font-weight:600;
+  box-shadow:0 1px 4px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.22)}
+.dsa-seg button[data-on="true"] svg{opacity:1}
+.dsa-seg button[data-on="true"]:hover{background:var(--dsw-alias-brand-primary, #4c8dff);color:#fff}
+/* Dark themes lighten the brand accent (the local skin goes #2563c0 -> #5b9cf5),
+   where white 600 text on the chip measures 2.79:1 — below the 4.5:1 floor for
+   body text and below even the 3:1 large-text floor. Invert the on-brand label
+   there instead of betting on one fixed foreground.
+   DSH flags dark mode with [data-ds-dark-theme] on the root element. */
+html[data-ds-dark-theme] .dsa-seg button[data-on="true"],
+body[data-ds-dark-theme] .dsa-seg button[data-on="true"],
+html[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover,
+body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
+  color:#0a1428;text-shadow:0 1px 0 rgba(255,255,255,.25)}
 .dsa-card{pointer-events:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;
   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);
@@ -2014,6 +2053,13 @@ window.__ModuleLoader__.load({
 .dsa-code{padding:0 4px;border-radius:4px;background:var(--dsw-alias-bg-layer-2, rgba(127,127,127,.12));
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
 .dsa-muted{color:var(--dsw-alias-label-secondary, #666);font-size:11px;line-height:16px}
+/* Same contrast pass, applied to the popover's body copy: label-secondary
+   measures ≈6:1 here and reads washed out at 11–13px. Secondary text inside
+   .dsa-pop is re-derived from the primary label token instead, held one step
+   quieter than the title through opacity so the hierarchy survives. */
+.dsa-pop .dsa-quote,
+.dsa-pop .dsa-muted{color:var(--dsw-alias-label-primary, #111)}
+.dsa-pop .dsa-muted{opacity:.78}
 .dsa-error{color:var(--dsw-alias-state-error-primary, #c0392b);font-size:12px}
 .dsa-toast{pointer-events:auto;position:fixed;left:50%;transform:translateX(-50%);bottom:24px;padding:6px 12px;
   border-radius:999px;font-size:12px;background:var(--dsw-alias-bg-overlay, #222);
@@ -3260,6 +3306,43 @@ window.__ModuleLoader__.load({
         }, h('span', null, action.label))))
     }
 
+    /** Where the answer should land: the main conversation, or an independent
+     *  side card. Rendered as a two-chip switch with an inline glyph per option
+     *  so the pair is scannable at a glance, and the selected chip is painted
+     *  with the brand fill (see .dsa-seg) instead of a whisper-grey tint. The
+     *  hint text moves into title/aria-label rather than a third line, because
+     *  the popover already has quote + chips + composer and a longer hint would
+     *  push the submit row out of view. */
+    function CarrierSeg({ value, onChange }) {
+      const glyph = path => h('svg', {
+        viewBox: '0 0 16 16', width: 13, height: 13, 'aria-hidden': 'true', focusable: 'false',
+      }, h('path', {
+        d: path, fill: 'none', stroke: 'currentColor', strokeWidth: 1.3,
+        strokeLinejoin: 'round', strokeLinecap: 'round',
+      }))
+      const options = [
+        // speech balloon = the main conversation
+        { id: 'main', label: t('carrierMain'), hint: t('carrierMainHint'),
+          icon: glyph('M2.5 3.5h11v8H8.4L5.2 14.3V11.5H2.5z') },
+        // frame with a rail on the right = a card docked in the side panel
+        { id: 'side', label: t('carrierSide'), hint: t('carrierSideHint'),
+          icon: glyph('M2.5 3.5h11v9h-11zM10 3.5v9') },
+      ]
+      return h('div', {
+        className: 'dsa-seg', role: 'group', 'aria-label': t('carrier'),
+      }, options.map(option => {
+        const on = value === option.id
+        return h('button', {
+          key: option.id,
+          type: 'button',
+          'data-on': String(on),
+          'aria-pressed': String(on),
+          title: option.hint,
+          onClick: () => onChange(option.id),
+        }, option.icon, option.label)
+      }))
+    }
+
     /** The question popover. */
     function AskPopover({ candidate, config, onClose, onSubmit, onQuick }) {
       const [question, setQuestion] = React.useState('')
@@ -3341,19 +3424,7 @@ window.__ModuleLoader__.load({
       }),
       h('div', { className: 'dsa-row' },
         h('span', { className: 'dsa-muted' }, t('carrier')),
-        h('div', { className: 'dsa-seg' },
-          h('button', {
-            type: 'button',
-            'data-on': String(carrier === 'main'),
-            title: t('carrierMainHint'),
-            onClick: () => setCarrier('main'),
-          }, t('carrierMain')),
-          h('button', {
-            type: 'button',
-            'data-on': String(carrier === 'side'),
-            title: t('carrierSideHint'),
-            onClick: () => setCarrier('side'),
-          }, t('carrierSide')))),
+        h(CarrierSeg, { value: carrier, onChange: setCarrier })),
       h('div', { className: 'dsa-row', style: { justifyContent: 'flex-end' } },
         h('span', { className: 'dsa-muted', style: { marginRight: 'auto' } },
           t('askShortcutHint', { key: config.shortcut })),

package/index.js

@@ -42,7 +42,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 = '1.8.1'
+export const PLUGIN_VERSION = '1.8.2'
 
 /** 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": "1.8.1",
+  "version": "1.8.2",
   "description": "DSH 划词追问（侧边卡片作答）：在聊天区与任务区选中文本就地追问，答案由独立子代理在侧边卡片里流式呈现，也可选择落回主对话。",
   "type": "module",
   "main": "index.js",