dsh-quote-annotate-pro 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -2,10 +2,21 @@
 
 本项目的所有重要变更都记在这里。版本号遵循 [SemVer](https://semver.org/lang/zh-CN/)。
 
+## 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 = {
@@ -806,6 +808,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,
@@ -1324,17 +1327,22 @@ 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
+              for (const row of document.querySelectorAll(USER_ROW_SEL)) {
+                const kind = row.getAttribute('data-chat-flow-kind')
+                if (kind && kind !== 'user') 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 +1350,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 +1442,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 +1461,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 +1488,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.7",
   "description": "选区引用与锚点批注（增强 fork）：划词 → 批注 → 带精确锚点的引用；输入框上方只显示原文片段，点一下跳回原文；发送时把轮次/角色写入引用块，让模型精确知道你指的是哪一处。",
   "keywords": ["dsh", "dsh-plugin", "deepseek-harness", "quote", "annotate", "selection", "reference", "anchor"],
   "license": "MIT",