@yfwu2020/dsh-selection-explain 0.8.3 → 0.9.1

package/scripts/smoke-panel.mjs

@@ -92,6 +92,7 @@ function sse(events) {
   return new Response(body, { headers: { 'content-type': 'text/event-stream' } })
 }
 var pillPosStore = null // 内存版 host 存储（/api/pill）
+var panelSizeStore = null // 内存版 host 存储（/api/panel，只存尺寸）
 window.fetch = function (input, init) {
   var url = String(input)
   var body = {}
@@ -105,6 +106,17 @@ window.fetch = function (input, init) {
   if (url.indexOf('/selection-explain/api/history') >= 0) {
     return Promise.resolve(new Response(JSON.stringify({ ok: true, entry: null, entries: [] }), { headers: { 'content-type': 'application/json' } }))
   }
+  if (url.indexOf('/selection-explain/api/panel') >= 0) {
+    var isGetPanel = !init || !init.method || String(init.method).toUpperCase() === 'GET'
+    if (isGetPanel) return Promise.resolve(new Response(JSON.stringify({ ok: true, size: panelSizeStore }), { headers: { 'content-type': 'application/json' } }))
+    if (body.clear === true) {
+      panelSizeStore = null
+      return Promise.resolve(new Response(JSON.stringify({ ok: true, size: null }), { headers: { 'content-type': 'application/json' } }))
+    }
+    // 只认 w/h：位置不该出现在这个载荷里
+    panelSizeStore = body.size ? { w: body.size.w, h: body.size.h, hadXY: ('x' in body.size || 'y' in body.size) } : null
+    return Promise.resolve(new Response(JSON.stringify({ ok: true, size: panelSizeStore }), { headers: { 'content-type': 'application/json' } }))
+  }
   if (url.indexOf('/selection-explain/api/pill') >= 0) {
     var isGet = !init || !init.method || String(init.method).toUpperCase() === 'GET'
     if (isGet) return Promise.resolve(new Response(JSON.stringify({ ok: true, position: pillPosStore }), { headers: { 'content-type': 'application/json' } }))
@@ -296,6 +308,276 @@ async function main() {
   await waitFor(function () { return hook.state().phase === 'done' }, 4000)
   check('首轮渲染完成', hook.state().phase === 'done', hook.state().phase)
 
+  // ── 面板 / 设置抽屉的真实尺寸 ──
+  // 为什么要有这一段：单测的 DOM 桩**没有布局**。这里曾经有条按阶段收窄到 440px 的规则，
+  // 因为 CSS 声明块漏了收尾花括号被整条丢弃（属性对、规则不生效，单测照样全绿）；
+  // 修好闭合后它又暴露了"追问一下宽度就从 440 跳到 540"的问题 —— 两件事都只有真浏览器量得出来。
+  // 现在宽度**不随阶段变**（恒 540），下面同时钉住"首轮就是 540"和"追问之后仍是 540"。
+  var WIDE_WIDTH = 540
+  {
+    var panelEl = document.querySelector('.dsh-sel-panel')
+    var beforeRect = panelEl.getBoundingClientRect()
+    check('首轮阶段宽度就是常规宽度（不再按阶段收窄到 440）',
+      Math.abs(beforeRect.width - WIDE_WIDTH) <= 2,
+      'stage=' + panelEl.getAttribute('data-stage') + ' width=' + Math.round(beforeRect.width))
+
+    var settingsBtn = Array.prototype.slice.call(panelEl.querySelectorAll('.dsh-sel-action'))
+      .filter(function (b) { return b.textContent.indexOf('设置') >= 0 })[0]
+    check('头部有「设置」键', !!settingsBtn, settingsBtn ? settingsBtn.textContent : '未找到')
+    if (settingsBtn) {
+      clickOn(settingsBtn)
+      await waitFor(function () { return panelEl.getAttribute('data-settings') === '1' }, 1200)
+      await sleep(60)
+      var openRect = panelEl.getBoundingClientRect()
+      var sheetEl = panelEl.querySelector('.dsh-sel-sheet')
+      var sheetBody = sheetEl && sheetEl.querySelector('.dsh-sel-sheetbody')
+      // 抽屉是 inset:0 贴在面板上的：面板多大多小，抽屉就多大多小。
+      // 而面板高度是"解读内容有多长"撑出来的 —— 刚开窗时内容很短，
+      // 不锁下限的话设置列表只剩十几个像素（实测 17px），等于没法用。
+      // 设置窗口是 inset:0 贴在面板上的：**宽度必须与小窗一致**，
+      // 开抽屉不该让面板自己"胖一圈"或"瘦一圈"（高度才需要补下限）。
+      check('开设置抽屉后：设置窗口宽度与小窗完全一致（不额外加宽）',
+        Math.abs(openRect.width - beforeRect.width) <= 0.5,
+        '抽屉=' + openRect.width.toFixed(1) + ' 小窗=' + beforeRect.width.toFixed(1))
+      check('开设置抽屉后：高度有下限（不再被内容长短绑架）',
+        openRect.height >= 500,
+        'height=' + Math.round(openRect.height) + '（首轮未开抽屉时 ' + Math.round(beforeRect.height) + '）')
+      var bodyH = sheetBody ? sheetBody.clientHeight : 0
+      check('设置列表可视高度够用（不是一条缝）',
+        bodyH >= 200,
+        'sheetBody.clientHeight=' + Math.round(bodyH))
+      // 关掉，别影响后面的用例
+      var backBtn = sheetEl && sheetEl.querySelector('.dsh-sel-sheetback')
+      if (backBtn) clickOn(backBtn)
+      await waitFor(function () { return panelEl.getAttribute('data-settings') !== '1' }, 1200)
+      await sleep(40)
+      var restored = panelEl.getBoundingClientRect()
+      check('关掉抽屉后：小窗宽度不变（开合抽屉不动宽度）',
+        Math.abs(restored.width - beforeRect.width) <= 0.5 && Math.abs(restored.width - WIDE_WIDTH) <= 2,
+        'width=' + Math.round(restored.width))
+    }
+  }
+
+  // ── 拖动 / 改大小 ──
+  // 规则：**尺寸**记住（用户拖角调过的），**位置不记**（每次开窗都按选区重新锚定）。
+  function pointerOn(node, type, x, y) {
+    node.dispatchEvent(new PointerEvent(type, { bubbles: true, cancelable: true, view: window, clientX: x, clientY: y, pointerId: 1, button: 0, buttons: 1 }))
+  }
+  {
+    var panelEl2 = document.querySelector('.dsh-sel-panel')
+    var before = hook.panelGeom()
+
+    // ① 拖右下角 → 变宽变高，并且只有尺寸被存下来
+    var corner = panelEl2.querySelector('.dsh-sel-grip-corner')
+    check('有右下角改大小手柄', !!corner, corner ? corner.className : '未找到')
+    if (corner) {
+      pointerOn(corner, 'pointerdown', 0, 0)
+      pointerOn(window, 'pointermove', 140, 90)
+      pointerOn(window, 'pointerup', 140, 90)
+      await sleep(60)
+      var grown = hook.panelGeom()
+      check('拖角能让小窗变大',
+        Math.round(grown.w) > Math.round(before.w) + 100 && Math.round(grown.h) > Math.round(before.h) + 60,
+        'w ' + Math.round(before.w) + '→' + Math.round(grown.w) + '  h ' + Math.round(before.h) + '→' + Math.round(grown.h))
+      check('改过大小会打标记（设置页就不再插手高度）', grown.resized === true, String(grown.resized))
+      await sleep(420) // 防抖 300ms
+      check('尺寸存到了 host（下次开窗回到这个大小）',
+        !!panelSizeStore && Math.abs(panelSizeStore.w - grown.w) <= 1 && Math.abs(panelSizeStore.h - grown.h) <= 1,
+        JSON.stringify(panelSizeStore))
+      check('存档里**没有位置**（载荷只有 w/h）', !!panelSizeStore && panelSizeStore.hadXY === false,
+        JSON.stringify(panelSizeStore))
+    }
+
+    // ② 拖标题栏：这次能挪动，但**不该存位置**
+    var headEl = panelEl2.querySelector('.dsh-sel-head')
+    var posBefore = hook.panelGeom()
+    pointerOn(headEl, 'mousedown', posBefore.x + 60, posBefore.y + 12)
+    window.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: posBefore.x + 60 + 70, clientY: posBefore.y + 12 + 44 }))
+    window.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
+    await sleep(60)
+    var moved = hook.panelGeom()
+    check('拖标题栏能挪动小窗（本次有效）',
+      Math.abs(moved.x - posBefore.x) > 40 && Math.abs(moved.y - posBefore.y) > 20,
+      'x ' + Math.round(posBefore.x) + '→' + Math.round(moved.x) + '  y ' + Math.round(posBefore.y) + '→' + Math.round(moved.y))
+    await sleep(420)
+    check('拖动**不会**把位置存进 host（位置记忆已按要求去掉）',
+      !!panelSizeStore && panelSizeStore.hadXY === false,
+      JSON.stringify(panelSizeStore))
+
+    // ③ 尺寸能读回来（模拟刷新：清掉内联尺寸，再让客户端重读一次）
+    panelEl2.style.width = ''
+    panelEl2.style.height = ''
+    panelEl2.removeAttribute('data-resized')
+    hook.loadPanelSize()
+    await sleep(80)
+    var restored2 = hook.panelGeom()
+    // 宽度按存档精确恢复；高度只作为天花板 —— 内容撑不到就自己短着（见 ⑥）
+    check('宽度能按存档恢复',
+      Math.abs(restored2.w - panelSizeStore.w) <= 1,
+      'w=' + Math.round(restored2.w) + ' / 存档 ' + Math.round(panelSizeStore.w))
+    check('高度不超过存档的上限',
+      restored2.h <= panelSizeStore.h + 1,
+      'h=' + Math.round(restored2.h) + ' / 上限 ' + Math.round(panelSizeStore.h))
+
+    // ④ 重新开窗 → 必须重新按选区锚定（这是"位置不记"的核心保证）
+    //    先把窗口挪到一个明显偏离锚点的位置，再关掉重开。
+    panelEl2.style.left = '7px'
+    panelEl2.style.top = '7px'
+    hook.close()
+    await sleep(40)
+    hook.open('重新锚定探测', '上下文片段 ABC', '冒烟')
+    await sleep(60)
+    var reopened = hook.panelGeom()
+    check('重新开窗会重新按选区锚定（位置没被记住）',
+      reopened.x > 20 && reopened.y > 20,
+      'x=' + Math.round(reopened.x) + ' y=' + Math.round(reopened.y) + '（若被记住应是 7,7）')
+
+    // ⑤ 双击角标 → 恢复默认尺寸
+    if (corner) {
+      corner.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }))
+      await sleep(80)
+      var afterReset = hook.panelGeom()
+      check('双击角标恢复默认尺寸（清掉存档）',
+        afterReset.resized === false && panelSizeStore === null,
+        'resized=' + afterReset.resized + ' store=' + JSON.stringify(panelSizeStore))
+      await sleep(420)
+    }
+
+    // ⑥ 记住的高度只能当**天花板**：新会话内容短时面板必须缩回去，不能留一大片空白。
+    //    这条是用户报的回归 —— 高度被当成固定值写上去，新开一个会话（只有一小段翻译）
+    //    面板硬撑到上次那么高，下面全是空的。
+    panelSizeStore = { w: 620, h: 700, hadXY: false }
+    panelEl2.style.width = ''
+    panelEl2.style.height = ''
+    panelEl2.style.maxHeight = ''
+    panelEl2.removeAttribute('data-resized')
+    hook.loadPanelSize()
+    await sleep(80)
+    hook.close()
+    await sleep(40)
+    hook.open('自适应高度探测', '上下文片段 ABC', '冒烟')
+    await sleep(100)
+    var fresh = hook.panelGeom()
+    var blank = panelEl2.clientHeight - panelEl2.scrollHeight
+    check('新会话高度自适应：面板里没有大片空白',
+      blank <= 4,
+      'clientHeight=' + panelEl2.clientHeight + ' scrollHeight=' + panelEl2.scrollHeight + ' 空白=' + blank)
+    check('存档的高度只当天花板（没被当成固定高度）',
+      fresh.h < 680,
+      'h=' + Math.round(fresh.h) + '（存档上限 700，若被当固定值用就该是 700）')
+    check('宽度仍沿用存档的值（宽度固定、高度自适应）',
+      Math.abs(fresh.w - 620) <= 1,
+      'w=' + Math.round(fresh.w))
+
+    // ⑦ 双击 = 自适应 = 恢复默认尺寸（同一个动作）：把窗口**拉小**之后再双击，
+    //    高度不该还被旧的上限卡着 —— 那是"只清了 width/height、漏了 maxHeight"的症状。
+    panelSizeStore = { w: 340, h: 250, hadXY: false }
+    panelEl2.style.width = ''
+    panelEl2.style.height = ''
+    panelEl2.style.maxHeight = ''
+    panelEl2.removeAttribute('data-resized')
+    hook.loadPanelSize()
+    await sleep(80)
+    hook.close()
+    await sleep(40)
+    hook.open('拉小后双击探测', '上下文片段 ABC', '冒烟')
+    await sleep(120)
+    var shrunk = hook.panelGeom()
+    check('存档的小尺寸生效（宽度 340、高度被 250 卡住）',
+      Math.abs(shrunk.w - 340) <= 1,
+      'w=' + Math.round(shrunk.w) + ' h=' + Math.round(shrunk.h))
+    corner.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }))
+    await sleep(120)
+    var back = hook.panelGeom()
+    check('双击后宽度回到默认（不再被存档的 340 卡住）',
+      Math.abs(back.w - 340) > 40,
+      'w ' + Math.round(shrunk.w) + '→' + Math.round(back.w))
+    check('双击后高度上限也被清掉（不再被 250 卡住）',
+      panelEl2.style.maxHeight === '' && back.h > 260,
+      'maxHeight=' + JSON.stringify(panelEl2.style.maxHeight) + ' h=' + Math.round(back.h))
+    await sleep(420)
+
+    // ⑦.5 刚拖完角标就双击还原：防抖里那次没落盘的保存**不能**把还原撤销掉。
+    //      savePanelSize 在定时器触发时才读当前尺寸 —— 不掐掉的话它 300ms 后会读到
+    //      "已还原的默认尺寸"，反过来当成用户选的尺寸存下来，宽度被钉死。
+    pointerOn(corner, 'pointerdown', 0, 0)
+    pointerOn(window, 'pointermove', 90, 60)
+    pointerOn(window, 'pointerup', 90, 60)
+    await sleep(40) // 远小于 300ms 防抖：保存还没落盘
+    corner.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }))
+    await sleep(500) // 跨过防抖窗口，看那次保存会不会"复活"
+    check('刚拖完就双击还原：待落的保存不会把还原撤销掉',
+      panelSizeStore === null && panelEl2.style.width === '' && panelEl2.getAttribute('data-resized') === null,
+      'store=' + JSON.stringify(panelSizeStore) + ' inline=' + JSON.stringify(panelEl2.style.width) +
+        ' resized=' + panelEl2.getAttribute('data-resized'))
+
+    // ⑧ 恢复默认尺寸**不等于没有上限**：上限从"用户调过的"换回"CSS 默认的" min(78vh,720px)。
+    //    清掉的是用户那条自定义上限，不是限制本身。
+    {
+      var cap = Math.min(window.innerHeight * 0.78, 720)
+      var computedMax = getComputedStyle(panelEl2).maxHeight
+      check('恢复默认后高度仍有上限（回到 CSS 默认 min(78vh,720px)）',
+        panelEl2.style.maxHeight === '' && computedMax !== 'none' &&
+          Math.abs(parseFloat(computedMax) - cap) <= 2,
+        'inline=' + JSON.stringify(panelEl2.style.maxHeight) + ' computed=' + computedMax +
+          ' 期望=' + Math.round(cap) + 'px')
+      // 塞一段超长内容：面板不该被撑破上限，多出来的部分在正文里滚动
+      // 塞一段超长内容量一次 —— 量完必须**收拾干净**：这一段动的是真面板，
+      // 面板高度会 423 → 634 → 423，滚动位置也会变；不还原就会影响后面那些
+      // 依赖坐标的划词用例（跑多次能撞见）。
+      var bodyEl = panelEl2.querySelector('.dsh-sel-body')
+      var savedScroll = bodyEl.scrollTop
+      var filler = document.createElement('div')
+      filler.style.cssText = 'height:3000px;flex:0 0 auto'
+      bodyEl.appendChild(filler)
+      await sleep(80)
+      var tall = panelEl2.getBoundingClientRect().height
+      check('内容超长时面板不越过上限（超出部分内部滚动）',
+        tall <= cap + 2,
+        'h=' + Math.round(tall) + ' 上限=' + Math.round(cap) + ' body 可滚=' + (bodyEl.scrollHeight > bodyEl.clientHeight))
+      filler.remove()
+      bodyEl.scrollTop = savedScroll
+      void panelEl2.offsetHeight // 强制回流，别让后面的用例量到中间态
+      await sleep(140)
+    }
+
+    // ⑨ 手柄不该有常驻的视觉标识（用户要求去掉右下角那道小斜纹）
+    var cornerAfter = getComputedStyle(corner, '::after')
+    check('右下角手柄没有常驻标识（不再画小斜纹）',
+      !cornerAfter.content || cornerAfter.content === 'none' || cornerAfter.content === 'normal',
+      'content=' + cornerAfter.content)
+    check('手柄仍在（只是不可见，鼠标移上去光标会变）',
+      getComputedStyle(corner).cursor === 'nwse-resize',
+      'cursor=' + getComputedStyle(corner).cursor)
+
+    // ⑩ 贴着屏幕边缘时双击恢复默认尺寸 → 面板不能被顶出屏幕
+    //    复现：先拉宽到接近满屏并推到右边，再双击角标（宽度会跳回默认 540，位置是旧的）
+    var vw = window.innerWidth
+    var vh = window.innerHeight
+    pointerOn(corner, 'pointerdown', 0, 0)
+    pointerOn(window, 'pointermove', vw, vh) // 尽量拉大
+    pointerOn(window, 'pointerup', vw, vh)
+    await sleep(80)
+    // 推到右下角
+    var big = hook.panelGeom()
+    var headEl2 = panelEl2.querySelector('.dsh-sel-head')
+    pointerOn(headEl2, 'mousedown', big.x + 60, big.y + 12)
+    window.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: vw + 500, clientY: vh + 500 }))
+    window.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
+    await sleep(80)
+    var beforeReset = hook.panelGeom()
+    corner.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }))
+    await sleep(120)
+    var afterDbl = hook.panelGeom()
+    check('贴边双击恢复默认尺寸后，面板仍在屏幕内',
+      afterDbl.x >= 0 && afterDbl.y >= 0 &&
+        afterDbl.x + afterDbl.w <= vw + 1 && afterDbl.y + afterDbl.h <= vh + 1,
+      'x=' + Math.round(afterDbl.x) + ' y=' + Math.round(afterDbl.y) +
+        ' 右=' + Math.round(afterDbl.x + afterDbl.w) + '/' + vw +
+        ' 下=' + Math.round(afterDbl.y + afterDbl.h) + '/' + vh +
+        '（双击前 x=' + Math.round(beforeReset.x) + ' w=' + Math.round(beforeReset.w) + '）')
+  }
+
   // ① 翻译节
   var picked1 = await quoteOnce('翻译节划词', function () {
     return { node: sectionContent('translation'), needle: '迁移跑得比预期久' }
@@ -381,8 +663,13 @@ async function main() {
     hook.close()
     hook.open('冒烟探针', '上下文片段 ABC', '冒烟')
     await waitFor(function () { return hook.state().phase === 'done' }, 4000)
+    var widthBeforeAsk = Math.round(document.querySelector('.dsh-sel-panel').getBoundingClientRect().width)
     hook.ask('冒烟追问')
     await waitFor(function () { return hook.state().asking === false }, 4000)
+    var widthAfterAsk = Math.round(document.querySelector('.dsh-sel-panel').getBoundingClientRect().width)
+    check('追问前后宽度不变（不再从 440 跳到 540）',
+      widthBeforeAsk === widthAfterAsk && Math.abs(widthAfterAsk - WIDE_WIDTH) <= 2,
+      '追问前 ' + widthBeforeAsk + 'px → 追问后 ' + widthAfterAsk + 'px')
     var bubbles = document.querySelectorAll('.dsh-sel-chatlog .dsh-sel-bubble-bot')
     var bot = bubbles[bubbles.length - 1]
     check('追问气泡渲染出来了', !!bot && bot.textContent.indexOf('冒烟用例') >= 0, bot ? bot.textContent.slice(0, 24) : '未找到')
@@ -447,6 +734,42 @@ async function main() {
     }
   }
 
+  // ⑨-b 选中的文字被删掉 → 浮标跟着消失（用户报的：文字没了，浮标还赖在屏幕上）
+  {
+    hook.close()
+    await sleep(80)
+    var planBtn2 = document.querySelector('.dsh-sel-btn:not(.dsh-sel-quotebtn)')
+    var docp3 = document.getElementById('docp')
+    selectIn(docp3, 'the migration ran long')
+    mouseUpOn(docp3)
+    var lit = await waitFor(function () {
+      return planBtn2 && planBtn2.style.display !== 'none' && planBtn2.getBoundingClientRect().width > 0
+    }, 1500)
+    check('（准备）主界面划词浮出「✦ 解读」', lit === true, planBtn2 ? planBtn2.style.display : '未找到按钮')
+
+    // ① 选区塌陷（Backspace / Delete / 打字覆盖 / 剪切走的都是这条）：浏览器会发 selectionchange
+    window.getSelection().removeAllRanges()
+    var gone = await waitFor(function () { return planBtn2.style.display === 'none' }, 800)
+    check('选中的文字被删掉（选区塌陷）→ 浮标消失', gone === true, planBtn2 ? planBtn2.style.display : '未找到按钮')
+
+    // ② 选中的节点被整个换掉（流式回答重渲染就是这条）：那段文字没了，浮标也不该留着。
+    //    ⚠️ 先确认浮标**真的收掉了**再往下走：不然 ① 漏掉时浮标一直亮着，
+    //      下面的"再次亮着"会白捡一个 PASS（这条用例就测不出东西了）。
+    var settled = await waitFor(function () { return planBtn2.style.display === 'none' }, 800)
+    check('（准备 ②）① 之后浮标确实是收着的', settled === true, planBtn2 ? planBtn2.style.display : '未找到按钮')
+    selectIn(docp3, 'the migration ran long')
+    mouseUpOn(docp3)
+    var lit2 = await waitFor(function () {
+      return planBtn2 && planBtn2.style.display !== 'none' && planBtn2.getBoundingClientRect().width > 0
+    }, 1500)
+    check('（准备 ②）浮标再次亮着', lit2 === true, planBtn2 ? planBtn2.style.display : '未找到按钮')
+    docp3.textContent = '（这段文字已经被换掉了）'
+    var gone2 = await waitFor(function () { return planBtn2.style.display === 'none' }, 800)
+    check('选中的节点被摘掉（文字被换掉）→ 浮标也消失', gone2 === true, planBtn2 ? planBtn2.style.display : '未找到按钮')
+    docp3.textContent = 'Dev: the migration ran long, so we ship Wednesday.'
+    await sleep(30)
+  }
+
   // ⑩ 浮标图标的**墨迹**要在画布里居中（用户报的："✦ 和 解读 好像没对齐，也没在按钮里居中"）
   //    为什么量 getBBox 而不是截图：浮动按钮是 align-items:center 的 flex，居中的是**画布盒子**，
   //    图形在画布里偏一点，图标就整体偏一点 —— 老星形路径 y 占 1.2~12.4（中心 6.8，不是 8），

package/scripts/test-client.mjs

@@ -1091,6 +1091,62 @@ assert('选中文字后浮标出现', !!button && button.style.display === 'inli
 
 }
 
+// ───────────────────────── 选中的文字被删掉 → 浮标必须消失 ─────────────────────────
+// 用户报的：划词浮标出来之后，把那段文字删了（Backspace / 打字覆盖 / 内容刷新把节点换掉），
+// 浮标还赖在屏幕上不走，点下去解读的是一段**屏幕上已经不存在**的文字。
+{
+  const rect = { left: 40, top: 100, right: 200, bottom: 118, width: 160, height: 18 }
+  /** 造一段"落在 node 上"的选区（锚点就是 node —— isConnected 那条判定要用它）。 */
+  const selectOn = (node, text) => {
+    const range = {
+      startContainer: node,
+      endContainer: node,
+      cloneRange: () => range,
+      getClientRects: () => [rect],
+      getBoundingClientRect: () => rect,
+    }
+    windowStub.getSelection = () => ({
+      isCollapsed: false,
+      rangeCount: 1,
+      toString: () => text,
+      getRangeAt: () => range,
+    })
+  }
+
+  // ① 拖拽划词进行中（鼠标按着）：不弹浮标 —— 时机要和"松手才弹"一致
+  selectOn(textEl, 'the migration ran long')
+  documentStub.dispatch('mousedown', { target: container })
+  documentStub.dispatch('selectionchange', {})
+  await sleep(20)
+  assert('拖拽中（鼠标按着）不弹浮标', button.style.display === 'none', String(button.style.display))
+  documentStub.dispatch('mouseup', { target: container })
+  await sleep(20)
+  assert('松手后照常弹浮标', button.style.display === 'inline-flex', String(button.style.display))
+
+  // ② 选区塌陷（Backspace / Delete / 打字覆盖 / 剪切走的都是这条）：浏览器发 selectionchange
+  windowStub.getSelection = () => ({ isCollapsed: true, rangeCount: 0, toString: () => '' })
+  documentStub.dispatch('selectionchange', {})
+  await sleep(20)
+  assert('选中的文字被删掉（选区塌陷）→ 浮标消失', button.style.display === 'none', String(button.style.display))
+
+  // ③ 选区**没塌陷**、锚点节点却已经被摘掉（Firefox 的行为）：靠 isConnected 判死
+  selectOn(textEl, 'the migration ran long')
+  documentStub.dispatch('mouseup', { target: container })
+  await sleep(20)
+  assert('（准备）浮标重新亮着', button.style.display === 'inline-flex', String(button.style.display))
+  textEl.isConnected = false
+  documentStub.dispatch('selectionchange', {})
+  await sleep(20)
+  assert('选中的节点被摘掉（选区没塌陷）→ 浮标也消失', button.style.display === 'none', String(button.style.display))
+  delete textEl.isConnected
+
+  // 还原成开头那段选区：后面的用例还要点这个浮标开小窗
+  windowStub.getSelection = () => selection
+  documentStub.dispatch('mouseup', { target: body })
+  await sleep(20)
+  assert('（还原）浮标回到可见', button.style.display === 'inline-flex', String(button.style.display))
+}
+
 // 引用（❝）的**离线**契约：浮标进了浮层、CSS 规则齐全（真实交互在宿主可达时另有一段）
 {
   const css = readFileSync(BUNDLE, 'utf8')
@@ -1104,6 +1160,21 @@ assert('选中文字后浮标出现', !!button && button.style.display === 'inli
 
 
 // ───────────────────────── 点击 → 弹窗 + 真实 host 流 ─────────────────────────
+// ⚠️ 开场先清一次设置覆盖。
+// 这套用例后面会把 provider/model 写成夹具里的假 provider（p1），而它落在**真实 host** 上；
+// 万一上一次跑崩在中途（没走到收尾的 reset），残留的 p1 会让接下来的真实解读全部 503 ——
+// 表现为"流式渲染失败"一大片，看起来像插件坏了，其实是脏状态。
+// 所以清理要放在**最前面**（收尾那次仍然保留，正常路径下不留痕迹）。
+try {
+  await fetch(ORIGIN + '/selection-explain/api/settings', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ reset: true }),
+  })
+} catch (error) {
+  /* host 不可达时后面本来就会跳过在线断言 */
+}
+
 button.dispatch('click', { preventDefault() {}, stopPropagation() {} })
 const panel = mount.children[0].children.find((c) => c.className === 'dsh-sel-panel')
 // 面板内的固定引用点（后续断言共用）
@@ -1240,7 +1311,7 @@ assert(
 
 // 只有翻译时的轻量形态：窄面板 / 无序号 / CTA 在内容流里（但**可以越过详解直接追问**）
 const translateCard = sections.find((node) => node.getAttribute('data-sec') === 'translation')
-assert('首轮面板标为 translation 阶段（宽度收窄）', panel.getAttribute('data-stage') === 'translation', String(panel.getAttribute('data-stage')))
+assert('首轮面板标为 translation 阶段（决定追问框显示，不决定宽度）', panel.getAttribute('data-stage') === 'translation', String(panel.getAttribute('data-stage')))
 assert(
   '两节标题都不带序号（①② 已去掉）',
   !Array.from(walk(panel)).some((n) => n.tagName === 'B' && /^[①②12]$/.test(textOf(n))),
@@ -1264,7 +1335,7 @@ assert(
   assert('前情只带翻译：不留空的「详解：」', seed.indexOf('前情') >= 0 && seed.indexOf('详解：') < 0, seed.slice(0, 70))
   for (let i = 0; i < 80 && textOf(chatLog).indexOf('这是对追问的回答') < 0; i += 1) await sleep(20)
   assert('回答渲染进小窗消息区', textOf(chatLog).indexOf('这是对追问的回答') >= 0, textOf(chatLog).slice(0, 60))
-  assert('一旦有对话，面板恢复宽版（消息区更好读）', panel.getAttribute('data-stage') === 'detail', String(panel.getAttribute('data-stage')))
+  assert('一旦有对话，面板切到 detail 阶段', panel.getAttribute('data-stage') === 'detail', String(panel.getAttribute('data-stage')))
   assert('发过追问后「展开详解」自动收起', expandBtn.style.display === 'none', String(expandBtn.style.display))
 
   // 换一段新的选中文字：状态重置，CTA 该回来（后面的"点展开"流程从这里接着走）。
@@ -1295,7 +1366,7 @@ for (let i = 0; i < 100 && !(hook.parts().detail || '').trim(); i += 1) await sl
 for (let i = 0; i < 100 && hook.state().phase !== 'done'; i += 1) await sleep(50)
 assert('第二阶段产出详解', (hook.parts().detail || '').trim().length > 0, (hook.parts().detail || '').trim().slice(0, 60).replace(/\n/g, ' '))
 assert('展开后按钮隐藏、详解卡片出现', expandBtn.style.display === 'none' && detailCard.style.display !== 'none', `btn=${expandBtn.style.display} card=${detailCard.style.display}`)
-assert('展开后面板切到 detail 阶段（恢复宽度）', panel.getAttribute('data-stage') === 'detail', String(panel.getAttribute('data-stage')))
+assert('展开后面板切到 detail 阶段', panel.getAttribute('data-stage') === 'detail', String(panel.getAttribute('data-stage')))
 assert(
   '展开后标题仍不带序号',
   !Array.from(walk(panel)).some((n) => n.tagName === 'B' && /^[①②12]$/.test(textOf(n))),

package/scripts/test-escape-focus.mjs

@@ -0,0 +1,66 @@
+/** Run the actual document Esc handler with isolated focus and panel state. No host/API access. */
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import vm from 'node:vm'
+const source = readFileSync(new URL('../src/client/index.js', import.meta.url), 'utf8')
+const start = source.indexOf('      var offKeyDown = listen(document,')
+const end = source.indexOf('\n\n      var offSettingsOpen', start)
+assert.ok(start >= 0 && end > start)
+const ask = {}, historyInput = {}, outside = {}, expandedChat = { closest: selector => selector.startsWith('[data-dsh-floating-chat]') ? {} : null }, compactChat = { closest: () => null }, nativeMenu = { closest: selector => selector.startsWith('[role=') ? {} : null }
+let handler, fullView = true, calls = [], activeWindow = null, chatExpanded = true
+const context = vm.createContext({
+  panelOpen: true, settingsOpen: false,
+  panel: { contains: node => node === ask },
+  historyList: { contains: node => node === historyInput },
+  document: { querySelector: selector => selector === '[data-dsh-full-view]' && fullView
+    ? { getAttribute: () => activeWindow }
+    : selector.startsWith('[data-dsh-floating-chat]') && chatExpanded ? {} : null },
+  listen(target, type, callback, capture) { assert.equal(type, 'keydown'); assert.equal(capture, true); handler = callback },
+  captureRow: { getAttribute: () => '0' }, settingsByKey: {},
+  closeModelPicks() { calls.push('menu') },
+  closeSettings() { calls.push('settings'); context.settingsOpen = false },
+  cancelVoice() { calls.push('voice') },
+  closePanel() { calls.push('panel'); context.panelOpen = false },
+})
+new vm.Script(source.slice(start, end)).runInContext(context)
+function escape(target, extra = {}) {
+  const event = { key: 'Escape', target, ...extra, preventDefault() { calls.push('prevent') }, stopPropagation() { calls.push('stop') } }
+  handler(event)
+}
+function reset() { calls = []; activeWindow = null; chatExpanded = true; context.panelOpen = true; context.settingsOpen = false; context.settingsByKey = {}; context.captureRow.getAttribute = () => '0' }
+reset(); activeWindow = 'chat'; escape(ask)
+assert.deepEqual(calls, [], '最后点击聊天后，即使键盘仍在解读输入框，也让聊天先退出')
+reset(); activeWindow = 'explanation'; escape(expandedChat)
+assert.equal(context.panelOpen, false, '最后点击解读消息后，即使键盘仍在聊天，也先退解读')
+reset(); activeWindow = 'none'; escape(expandedChat)
+assert.equal(context.panelOpen, false, '点击两窗外后不使用旧键盘焦点，优先退解读')
+reset(); activeWindow = 'chat'; chatExpanded = false; escape(compactChat)
+assert.equal(context.panelOpen, false, '已收起的聊天不占下一次退出顺序')
+reset()
+escape(outside)
+assert.equal(context.panelOpen, false, '焦点在两窗之外时优先关闭解读')
+reset(); escape(expandedChat)
+assert.deepEqual(calls, [], '展开聊天的 Esc 交给聊天，不关闭解读')
+assert.equal(context.panelOpen, true)
+reset(); escape(compactChat)
+assert.equal(context.panelOpen, false, '聊天收起后焦点留在紧凑条，再按 Esc 仍能关闭解读')
+reset(); escape(nativeMenu)
+assert.deepEqual(calls, [], '原生菜单先处理自身 Esc，不连带关闭解读')
+for (const extra of [{ isComposing: true }, { keyCode: 229 }, { defaultPrevented: true }]) {
+  reset(); escape(ask, extra); assert.deepEqual(calls, [], '输入法或已处理的 Esc 不关闭解读')
+}
+reset(); context.settingsOpen = true; context.settingsByKey = { model: { menu: { getAttribute: () => '1' } } }; escape(ask)
+assert.deepEqual(calls, ['prevent', 'stop', 'menu'])
+assert.equal(context.panelOpen, true)
+reset(); context.settingsOpen = true; escape(ask)
+assert.deepEqual(calls, ['prevent', 'stop', 'settings'])
+assert.equal(context.panelOpen, true)
+reset(); context.captureRow.getAttribute = () => '1'; escape(ask)
+assert.deepEqual(calls, ['prevent', 'stop', 'voice'])
+assert.equal(context.panelOpen, true)
+for (const target of [ask, historyInput]) {
+  reset(); escape(target); assert.deepEqual(calls, ['prevent', 'stop', 'panel']); assert.equal(context.panelOpen, false)
+}
+reset(); fullView = false; escape(outside)
+assert.equal(context.panelOpen, false, '普通分栏保留解读原来的全局 Esc 行为')
+console.log('PASS focused Esc: independent windows, IME, nested settings, voice, history and split-mode behavior')