dsh-quote-annotate-pro 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -2,10 +2,30 @@
 
 本项目的所有重要变更都记在这里。版本号遵循 [SemVer](https://semver.org/lang/zh-CN/)。
 
+## 0.2.8 — 修复"批注编辑框跑到窗口左上角 / 引用不了"
+
+- **现象**：选中文字点「批注」后，编辑框出现在窗口左上角（压住侧边栏），看起来像引用功能坏了
+- **根因**：装饰逻辑会替换消息里的文本节点；若用户**正在那条消息里划词**，替换会让选区失效，`getBoundingClientRect()` 随即返回全 0 —— 用这个矩形算出来的位置正好是 `left=12 / top=8`（窗口左上角）
+- **修复**
+  - **不再动用户正在划词的那条消息**：`selectionTouches(row)` 守卫，等选区释放后再装饰
+  - **`safeRect()` 兜底**：矩形无效时先用当前选区重算，仍无效则退回视口底部居中 —— 编辑框不会再跑到左上角
+- 文本与模型侧行为不变（位置行仍只对模型可见）
+
+## 0.2.7 — 引用渲染定版：输入框与对话区都不再"先露原文"
+
+- **输入框侧（本次）**：插入引用后**同一帧内**完成装饰 —— 不再走 `setTimeout`，改为在 `MutationObserver` 回调里同步执行（回调先于绘制），消除此前约 40ms 的"先露出完整引用块"窗口
+- **对话区侧（本次）**：位置行不再"先露一百多毫秒再被隐藏"（依据录屏 + diag-sink 日志定位）
+  - 用户消息行有两副面孔：宿主的正式行带 `data-chat-anchor-key`，但消息刚发出去的那一下先渲染成 `div.*_userRow`（**还没有锚点属性**）→ 插件此前够不到，实测空窗约 122ms
+  - 现在两类行都按用户行处理（`USER_ROW_SEL`）：行出现的**同一帧**就完成装饰（MutationObserver 回调先于绘制），不再等防抖
+  - 宿主在渲染后还会重排气泡内容（实测再约 120ms 一次），会把已隐藏的位置行换回原文；判定改为**看内容**（`rowHasRawHeader()`）而不是看 `data-dshq-sent` 标记，重排的同一帧即补装饰
+  - 观察器增加 `attributeFilter: ['data-chat-anchor-key','data-chat-flow-kind']`，覆盖"先插文本、后挂锚点"的渲染顺序
+- **文本零改动**：装饰只加样式类/包一层隐藏元素，**消息文本仍是 `【引用 · 第N轮 · 角色】` + 原文** → 模型侧定位能力不变
+- 新增静默诊断探针（`cmp:probe` 等），仅在运行 `npm run diag` 时上报；发布版无任何网络请求
+
 ## 0.2.6 — 输入框与消息统一为紧凑引用（消除插入瞬间的闪烁）
 
-- **输入框里的引用**：插入后立刻渲染成**紧凑原文块**（位置行隐藏），不再"先露出完整引用块、稍后才变紧凑"
-  - 实现：装饰函数暴露为模块级钩子，插入成功即调用一次；MutationObserver 的防抖从 250ms 降到 40ms
+- **输入框里的引用**：插入后渲染成**紧凑原文块**（位置行隐藏）
+  - 实现：装饰函数暴露为模块级钩子，插入成功即调用一次
 - **引用文本去掉 `> ` 前缀**（`【引用 · 第N轮 · 角色】` + 原文），编辑器里不再多露一个符号
 - **文本保持完整**：界面只是隐藏位置行（加样式类，不动编辑器文本），因此**发送出去的内容仍带轮次/角色** → 模型侧定位能力不变
 - 消息侧（0.2.3）的紧凑渲染保持不变，输入与输出观感一致

package/lib/client.js

@@ -149,6 +149,8 @@ window.__ModuleLoader__.load({
     const refCodecs = new Map()
     // 输入框引用装饰的"立即执行"钩子：插入后马上贴样式，避免先露出旧样子再变（用户反馈的瞬间闪烁）
     let composerDecorateNow = null
+    // 诊断用：最近一次插入引用的时刻（毫秒），用于测"装饰相对插入晚了多久"
+    let lastInsertAt = 0
 
     // 页面内反馈 toast（点击 chip 时显示结果）
     const toastStore = {
@@ -681,7 +683,7 @@ window.__ModuleLoader__.load({
           anchorKey: sel.anchorKey,
           turn: sel.turn,
           kind: sel.kind,
-        }, sel.rect)
+        }, safeRect(sel.rect))
         finish()
       }
       return React.createElement('div', { className: 'dshq-toolbar', style: { left, top } },
@@ -702,6 +704,31 @@ window.__ModuleLoader__.load({
     }
 
     // ============ 组件三：悬浮批注编辑框（评论输入框元素永久驻留，复用时输入法上下文不重建） ============
+    /**
+     * 选区矩形兜底。矩形失效（节点被装饰/重渲染替换后 getBoundingClientRect 会全 0）时，
+     * 直接用它会算出 left=12 / top=8 —— 编辑框就跑到窗口左上角（用户反馈的现象）。
+     * 处理：无效 → 用当前选区重算 → 仍无效 → 退回视口底部居中。
+     */
+    function safeRect(rect) {
+      const ok = (r) => !!(r
+        && Number.isFinite(r.left) && Number.isFinite(r.top)
+        && Number.isFinite(r.right) && Number.isFinite(r.bottom)
+        && ((r.right - r.left) > 0 || (r.bottom - r.top) > 0))
+      if (ok(rect)) return rect
+      try {
+        const s = typeof window !== 'undefined' ? window.getSelection() : null
+        if (s && s.rangeCount > 0) {
+          const r = s.getRangeAt(0).getBoundingClientRect()
+          if (ok(r)) return r
+        }
+      } catch (e) { /* ignore */ }
+      const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
+      const vh = typeof window !== 'undefined' ? window.innerHeight : 768
+      const left = Math.max(12, Math.round(vw / 2 - 140))
+      const top = Math.max(12, Math.round(vh - 200))
+      return { left, right: left + 280, top, bottom: top + 24, width: 280, height: 24 }
+    }
+
     const AnnotationEditor = () => {
       const state = useEditor()
       const inputRef = React.useRef(null)
@@ -719,18 +746,19 @@ window.__ModuleLoader__.load({
       const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
       const vh = typeof window !== 'undefined' ? window.innerHeight : 768
       const item = state.item
+      const rect = open ? safeRect(state.rect) : null
       let left = -9999
       let top = -9999
       let w = 200
-      if (open) {
+      if (open && rect) {
         // 宽度：默认约 10 字（120px），随评论输入变宽，封顶 340px
         const quoteW = Math.min(220, item.text.length * 12 + 16)
         const inputW = Math.min(300, Math.max(140, comment.length * 13 + 44))
         w = Math.max(120, Math.min(340, Math.max(quoteW, inputW)))
-        const center = state.rect.left + (state.rect.right - state.rect.left) / 2
+        const center = rect.left + (rect.right - rect.left) / 2
         left = Math.max(12, Math.min(center - w / 2, vw - w - 12))
         const estH = 200
-        top = state.rect.bottom + 8 + estH <= vh - 8 ? state.rect.bottom + 8 : Math.max(8, state.rect.top - estH - 8)
+        top = rect.bottom + 8 + estH <= vh - 8 ? rect.bottom + 8 : Math.max(8, rect.top - estH - 8)
       }
       const insert = () => {
         if (!open || !item) return
@@ -806,6 +834,7 @@ window.__ModuleLoader__.load({
             } catch (e) { /* ignore */ }
             report('insert:chip', { ref, anchorKey: item.anchorKey || null, header, chars: item.text.length })
             // 立刻给刚插入的内容贴样式，避免"先露出旧样子、稍后才变紧凑"的闪烁
+            lastInsertAt = (typeof performance !== 'undefined' ? performance.now() : Date.now())
             try { if (typeof composerDecorateNow === 'function') composerDecorateNow() } catch (e) { /* ignore */ }
             setStatus({
               ok: true,
@@ -1290,6 +1319,20 @@ window.__ModuleLoader__.load({
             })
             return wrap
           }
+          /** 用户当前选区是否落在这个行里（是则暂缓装饰，别动 DOM 把选区搞失效） */
+          const selectionTouches = (row) => {
+            try {
+              const s = typeof window !== 'undefined' ? window.getSelection() : null
+              if (!s || s.rangeCount === 0 || s.isCollapsed) return false
+              for (let i = 0; i < s.rangeCount; i++) {
+                const r = s.getRangeAt(i)
+                const a = r.startContainer
+                const b = r.endContainer
+                if ((a && row.contains(a)) || (b && row.contains(b))) return true
+              }
+            } catch (e) { /* ignore */ }
+            return false
+          }
           /** 把承载「【引用…】\n原文…」的文本节点拆成：隐藏头部 + 紧凑引用块 + 其余文本 */
           const transformTextNode = (node) => {
             const raw = node.nodeValue || ''
@@ -1323,18 +1366,25 @@ window.__ModuleLoader__.load({
           }
           const scan = () => {
             timer = null
-            try {
-              for (const row of document.querySelectorAll('[data-chat-anchor-key]')) {
-                if (row.getAttribute('data-chat-flow-kind') !== 'user') continue
-                if (row.dataset && row.dataset.dshqSent === '1') continue
+            try {              for (const row of document.querySelectorAll(USER_ROW_SEL)) {
+                const kind = row.getAttribute('data-chat-flow-kind')
+                if (kind && kind !== 'user') continue
+                // 用户正在这条消息里划词时**不要动它的 DOM**：替换文本节点会让选区失效，
+                // 选区矩形随即变成全 0，批注气泡/编辑框就会定位到左上角（用户反馈过）。
+                if (selectionTouches(row)) continue
                 let walker
                 try { walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT, null) } catch (e) { continue }
                 const targets = []
                 let n = walker.nextNode()
                 while (n) {
-                  if (HEADER_RE.test(n.nodeValue || '')) targets.push(n)
+                  const parent = n.parentElement
+                  // 已经装饰过的部分（隐藏的位置行 / 紧凑引用块）不再重复处理
+                  const managed = parent && typeof parent.closest === 'function'
+                    ? parent.closest('.dshq-sent-header, .dshq-sent-quote') : null
+                  if (!managed && HEADER_RE.test(n.nodeValue || '')) targets.push(n)
                   n = walker.nextNode()
                 }
+                if (targets.length === 0) continue
                 let done = false
                 for (const t of targets) { try { if (transformTextNode(t)) done = true } catch (e) { /* ignore */ } }
                 if (done && row.dataset) row.dataset.dshqSent = '1'
@@ -1342,10 +1392,80 @@ window.__ModuleLoader__.load({
             } catch (e) { report('sent:scan-throw', String((e && e.message) || e)) }
           }
           const schedule = () => { if (timer === null) timer = setTimeout(scan, 300) }
+          // 消息从输入框进入对话区时，首帧先画出的是原始文本（含"【引用 · …】"位置行），
+          // 300ms 防抖会让它闪一下。MutationObserver 回调在下一次绘制前执行，
+          // 因此只要这次变动牵扯到"还没装饰过的用户消息行"就同步扫一次，首帧即完成隐藏；
+          // 其余情况（例如助手流式输出）仍走防抖，不增加扫描开销。
+          // 用户消息行有两副面孔：正式行带 anchor 属性；但实测"刚发出去"的那一下，
+          // 宿主先渲染出 <div class="cJsG2q_userRow">（还没有 data-chat-anchor-key），
+          // 等属性挂上才轮得到插件 —— 那段空窗就是用户看到的闪。两类都按用户行处理。
+          const USER_ROW_SEL = '[data-chat-anchor-key][data-chat-flow-kind="user"], [class*="userRow" i]'
+          const asElement = (node) => (node && node.nodeType === 1 ? node : (node && node.parentElement) || null)
+          // 行里是否还存在"没被插件接管过的"位置行文本。
+          // 宿主会在渲染后重排/替换气泡内容（实测发送后约 120ms 会有一次），
+          // 那时我们贴好的隐藏 span 会被换回原始文本 —— 用内容判断而不是用标记判断，
+          // 才能在重渲染的同一帧里立刻补装饰。
+          const rowHasRawHeader = (row) => {
+            try {
+              const walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT, null)
+              let n = walker.nextNode()
+              while (n) {
+                const parent = n.parentElement
+                const managed = parent && typeof parent.closest === 'function'
+                  ? parent.closest('.dshq-sent-header, .dshq-sent-quote') : null
+                if (!managed && HEADER_RE.test(n.nodeValue || '')) return true
+                n = walker.nextNode()
+              }
+              return false
+            } catch (e) { return false }
+          }
+          const touchesPendingUserRow = (node) => {
+            const el = asElement(node)
+            if (!el || typeof el.closest !== 'function') return false
+            const row = el.closest(USER_ROW_SEL)
+            // ① 变动落在用户消息行内部（含行自身）：只要还能找到未接管的位置行就立刻扫
+            if (row) {
+              const kind = row.getAttribute('data-chat-flow-kind')
+              if (kind && kind !== 'user') return false
+              return rowHasRawHeader(row)
+            }
+            // ② 新增的子树里带着这样的用户消息行（宿主可能整块替换容器）
+            if (typeof el.querySelector === 'function') {
+              try {
+                for (const r of el.querySelectorAll(USER_ROW_SEL)) {
+                  const kind = r.getAttribute('data-chat-flow-kind')
+                  if (kind && kind !== 'user') continue
+                  if (rowHasRawHeader(r)) return true
+                }
+              } catch (e) { /* ignore */ }
+            }
+            return false
+          }
+          const onMutations = (records) => {
+            let urgent = false
+            try {
+              for (const r of records) {
+                const cands = [r.target]
+                const added = r.addedNodes
+                if (added) { for (const n of added) cands.push(n) }
+                for (const c of cands) {
+                  if (!urgent && touchesPendingUserRow(c)) urgent = true
+                }
+              }
+              if (urgent) scan()
+            } catch (e) { /* ignore */ }
+            schedule()
+          }
           scan()
           try {
-            observer = new MutationObserver(schedule)
-            observer.observe(document.body, { childList: true, subtree: true })
+            observer = new MutationObserver(onMutations)
+            observer.observe(document.body, {
+              childList: true,
+              subtree: true,
+              characterData: true,
+              attributes: true,
+              attributeFilter: ['data-chat-anchor-key', 'data-chat-flow-kind'],
+            })
           } catch (e) { report('sent:observer-throw', String((e && e.message) || e)) }
           return () => {
             if (timer !== null) clearTimeout(timer)
@@ -1364,6 +1484,7 @@ window.__ModuleLoader__.load({
           let timer = null
           let observer = null
           const isSingleLine = (t) => t !== '' && t.indexOf('\n') === -1
+          let lastSig = ''
           const decorate = () => {
             timer = null
             try {
@@ -1382,7 +1503,23 @@ window.__ModuleLoader__.load({
                   if (!isSingleLine(t)) break
                   quoteEls.push(el)
                 }
-                if (!headerEl) continue
+                if (!headerEl) {
+                  // 诊断：编辑器里出现了"【引用"但没能匹配成"位置行 + 正文行"时，把结构打出来
+                  const raw = String(ed.textContent || '')
+                  if (raw.indexOf('【引用') >= 0) {
+                    const sig = raw.slice(0, 40) + '|' + kids.length
+                    if (sig !== lastSig) {
+                      lastSig = sig
+                      report('cmp:probe', {
+                        ms: lastInsertAt ? Math.round((typeof performance !== 'undefined' ? performance.now() : Date.now()) - lastInsertAt) : null,
+                        kids: kids.length,
+                        singles: kids.map((el) => (isSingleLine(String(el.textContent || '').trim()) ? 1 : 0)).join(''),
+                        first: String((kids[0] && kids[0].textContent) || '').slice(0, 24),
+                      })
+                    }
+                  }
+                  continue
+                }
                 headerEl.classList.add('dshq-cmp-header')
                 quoteEls.forEach((el, idx) => {
                   el.classList.add('dshq-cmp-quote')
@@ -1393,11 +1530,13 @@ window.__ModuleLoader__.load({
               }
             } catch (e) { report('cmp:scan-throw', String((e && e.message) || e)) }
           }
-          const schedule = () => { if (timer === null) timer = setTimeout(decorate, 40) }
+          // 关键：MutationObserver 回调在**下一次绘制之前**执行 —— 因此在这里同步装饰即可消除
+          // "先露出完整引用块、稍后才变紧凑"的闪烁（之前用 setTimeout(40ms) 期间已经画了一帧）。
+          // decorate() 只在缺少 class 时改动 DOM，不会形成观察循环。
           decorate()
           composerDecorateNow = decorate
           try {
-            observer = new MutationObserver(schedule)
+            observer = new MutationObserver(() => { decorate() })
             observer.observe(document.body, { childList: true, subtree: true, characterData: true })
           } catch (e) { report('cmp:observer-throw', String((e && e.message) || e)) }
           return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quote-annotate-pro",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "选区引用与锚点批注（增强 fork）：划词 → 批注 → 带精确锚点的引用；输入框上方只显示原文片段，点一下跳回原文；发送时把轮次/角色写入引用块，让模型精确知道你指的是哪一处。",
   "keywords": ["dsh", "dsh-plugin", "deepseek-harness", "quote", "annotate", "selection", "reference", "anchor"],
   "license": "MIT",