dsh-select-quote 0.3.11 → 0.3.12

package/README.md

@@ -6,7 +6,7 @@
 - **右键菜单**：在选区矩形内点右键，同一套「复制 / 打开链接 / 添加到任务」出现在指针处；选区之外、其它插件已接管的右键一律不碰，桌面端未接管时保留宿主的原生 Copy 菜单
 - **快捷键**：选中文字后一键打开菜单或直接添加；桌面 macOS 是 `⌘L` / `⇧⌘L`，其它平台的默认键位见下表；可在设置里单独开关
 - **批注摘要**：添加后输入框上方出现一块「N 条批注」摘要，草稿里不会出现任何协议文本
-- **正文标记**：被划中的文字在原消息里留下淡色底、虚线下划线和序号角标，点摘要条目会滚回那段文字；点标记或角标会打开该条批注的预览（原文 + 评论），角标也能用 Tab 聚焦、Enter 打开。角标始终压在选区高亮之上，多条批注结尾重合时会自动向右/向上错开
+- **正文标记**：被划中的文字在原消息里留下淡色底、虚线下划线和序号角标，点摘要条目会滚回那段文字；点角标会打开该条批注的预览（原文 + 评论），标记本身保持可选中、不抢点击，角标也能用 Tab 聚焦、Enter 打开。角标始终压在选区高亮之上，多条批注结尾重合时会自动向右/向上错开
 - **模型回指**：模型回答里指向某条批注的位置，渲染成带预览的 chip
 - **对话记录**：已发送消息仍由宿主气泡渲染（时间、复制、撤回都在），批注收成一块摘要，悬停（触屏点按）展开列表
 - **界面语言**：跟随 dsh 自己的语言设置，简体中文 / English / Русский
@@ -44,7 +44,7 @@ dsh web --patch "$PWD/dev.patch.yml"
 1. 在对话区选中一段文本，点「添加到任务」——到这一步批注就已经保存，输入框上方同步出现批注摘要。触屏下操作条固定在屏幕底部，不跟随选区挤在系统选择菜单旁边
 2. 想补充的话在弹出的评论框里写一句，点「添加评论」或 `⌘/Ctrl + Enter`；不写就直接点空白处或「暂不评论」，批注同样保留。触屏下评论在底部抽屉里完成，抽屉顶部会带上选中的原文
 3. 悬停（触屏点按）输入框上方的摘要展开列表，可逐条编辑、删除或一键清空，点条目跳回正文对应文字；对话记录里的摘要只提供列表和跳转。键盘聚焦摘要后按 Enter / ↓ 展开，Tab 在面板内移动，Esc 关闭并回到摘要
-4. 点正文里的标记或角标（角标可用 Tab 聚焦后按 Enter）打开批注预览，查看原文和评论；点浮层外或按 Esc 关闭
+4. 点正文里的角标（可用 Tab 聚焦后按 Enter）打开批注预览，查看原文和评论；正文标记本身仍可正常鼠标划选，点浮层外或按 Esc 关闭
 5. 正常打字发送，批注随消息一起交给模型，摘要随之消失
 6. 模型回答里引用某条批注的位置显示为 chip：悬停、点击（触屏点按）或键盘聚焦都会打开预览，显示原文和评论；预览默认在 chip 上方，右上角「原文」按钮回到正文；键盘聚焦 chip 后按 ↓ 进入按钮，Esc 关闭
 

package/lib/client.js

@@ -1408,7 +1408,9 @@ ${atomRules}
   font-size: 10px;
   font-weight: 600;
   line-height: 1;
-  pointer-events: none;
+  /* The only click target on a mark; the prose itself stays selectable. */
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .dsq_annMark:hover {
@@ -1807,13 +1809,41 @@ const styles = {
 	segOption: "dsq_segOption",
 	srOnly: "dsq_srOnly"
 };
-//#endregion
-//#region src/client/dom/badge-layout.ts
+const BADGE_MIN_WIDTH = 15;
+/** 10px/600 digits plus the 3px side padding. */
+const BADGE_DIGIT_WIDTH = 6;
+const BADGE_PADDING = 6;
+const HIT_SLOP = 3;
 const STEP_X = 28;
 const STEP_Y = 18;
 /** Rest, then two steps right; after that the stack grows upward. */
 const MAX_COLUMNS = 3;
 const MAX_ROWS = 24;
+/** Rendered badge width, matching `min-width` + digit advance + padding. */
+function badgeWidth(index) {
+	return Math.max(BADGE_MIN_WIDTH, String(index).length * BADGE_DIGIT_WIDTH + BADGE_PADDING);
+}
+/**
+* Hit box of a badge as painted: anchored to the final fragment's bottom-right
+* corner, then shifted by the collision offset. Used to tell a badge click from
+* a click on the marked prose.
+*/
+function badgeHitBox(anchor, index, offset = {
+	dx: 0,
+	dy: 0
+}) {
+	const left = anchor.right + 2 + offset.dx;
+	const top = anchor.bottom - 8 - 15 + offset.dy;
+	return {
+		left: left - HIT_SLOP,
+		top: top - HIT_SLOP,
+		right: left + badgeWidth(index) + HIT_SLOP,
+		bottom: top + 15 + HIT_SLOP
+	};
+}
+function badgeContainsPoint(box, x, y) {
+	return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+}
 function overlaps(a, b) {
 	return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
 }
@@ -1993,20 +2023,83 @@ function cleanTextOf(item) {
 const MARK_ATTR = "data-dsq-ann-mark";
 const INDEX_ATTR = "data-dsq-ann-index";
 const FLASH_MS = 1500;
-/** Distance from the mark's bottom edge to the badge's bottom edge (CSS). */
-const BADGE_BOTTOM = 8;
-const BADGE_MARGIN = 2;
 const jobs = /* @__PURE__ */ new Map();
 let pendingIds = /* @__PURE__ */ new Set();
 function attrValue(value) {
 	return value.replace(/["\\]/g, "\\$&");
 }
-function flowItems(messageId, scope) {
-	if (messageId !== "") {
-		const item = scope.querySelector(`[data-chat-flow-key="${attrValue(messageId)}"]`);
-		return item instanceof HTMLElement ? [item] : [];
+const FLOW_SELECTOR = "[data-chat-flow-key]";
+/**
+* One pass over the rendered messages instead of one query per annotation.
+* `querySelectorAll` preserves document order, so the first copy of a key wins,
+* matching the old per-job `querySelector`.
+*/
+function flowLookup(scope) {
+	const all = [...scope.querySelectorAll(FLOW_SELECTOR)];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const item of all) {
+		const key = item.getAttribute("data-chat-flow-key");
+		if (key && !byKey.has(key)) byKey.set(key, item);
+	}
+	return {
+		all,
+		byKey
+	};
+}
+function flowKeyOf(item) {
+	return item.getAttribute("data-chat-flow-key") ?? "";
+}
+/**
+* An annotation's source may sit in a block nested inside its message (for
+* example a reasoning panel), so a touched flow item answers to its own key
+* and every enclosing message key.
+*/
+function anchorKeysOf(item) {
+	const keys = [];
+	for (let el = item; el; el = el.parentElement?.closest(FLOW_SELECTOR) ?? null) {
+		const key = el.getAttribute("data-chat-flow-key");
+		if (key) keys.push(key);
+	}
+	return keys;
+}
+/** Items in a partial pass, grouped by flow key; other messages are not touched. */
+function groupByFlowKey(items) {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const item of items) for (const key of anchorKeysOf(item)) {
+		const list = grouped.get(key) ?? [];
+		list.push(item);
+		grouped.set(key, list);
 	}
-	return [...scope.querySelectorAll("[data-chat-flow-key]")].filter((node) => node instanceof HTMLElement);
+	return grouped;
+}
+/** The flow item that owns a mutated node, if any. */
+function ownerFlowItem(node) {
+	if (!node) return null;
+	if (node instanceof Element) return node.closest(FLOW_SELECTOR);
+	return node.parentElement?.closest(FLOW_SELECTOR) ?? null;
+}
+function affectedFlowItems(records) {
+	const items = /* @__PURE__ */ new Set();
+	const addOwner = (node) => {
+		const owner = ownerFlowItem(node);
+		if (owner?.isConnected) items.add(owner);
+	};
+	/** An added wrapper can hold several newly rendered messages. */
+	const addSubtree = (node) => {
+		const owner = ownerFlowItem(node);
+		if (owner) {
+			if (owner.isConnected) items.add(owner);
+			return;
+		}
+		if (!(node instanceof Element)) return;
+		for (const nested of node.querySelectorAll(FLOW_SELECTOR)) if (nested.isConnected) items.add(nested);
+	};
+	for (const record of records) {
+		addOwner(record.target);
+		if (record.type !== "childList") continue;
+		for (const node of record.addedNodes) addSubtree(node);
+	}
+	return items;
 }
 /**
 * Whitespace-insensitive comparison: `selection.toString()` inserts newlines
@@ -2133,7 +2226,8 @@ function refreshAnnotationMarkLabels() {
 * offset (nested ranges), which puts their pseudo-element badges on the same
 * pixel; nearby ends can also touch. Measure every last fragment, then write
 * the offset back as variables inherited by `::after`. The badge's transform
-* never participates in text layout.
+* never participates in text layout. Collisions are resolved inside each
+* message block, and a stack may not climb into the message above.
 */
 function layoutBadges(scope) {
 	const marks = Array.from(scope.querySelectorAll(`[${INDEX_ATTR}]`));
@@ -2145,37 +2239,57 @@ function layoutBadges(scope) {
 	const scroller = marks[0]?.closest("[data-conversation-scroll]");
 	const scrollerRect = scroller instanceof Element ? scroller.getBoundingClientRect() : null;
 	const rightEdge = scrollerRect && scrollerRect.width > 0 ? scrollerRect.right : document.documentElement.clientWidth;
-	const topEdge = scrollerRect && scrollerRect.height > 0 ? scrollerRect.top : 0;
-	const anchors = marks.map((mark) => {
-		const rect = mark.getBoundingClientRect();
-		return {
-			mark,
-			index: Number(mark.getAttribute(INDEX_ATTR) ?? 0),
-			x: rect.right + BADGE_MARGIN,
-			y: rect.bottom - BADGE_BOTTOM - 15,
-			width: 24,
-			height: 15,
-			visible: rect.width > 0 && rect.height > 0
-		};
-	}).filter((anchor) => anchor.visible).sort((a, b) => a.index - b.index);
-	if (anchors.length < 2) return;
-	const offsets = placeBadges(anchors, {
-		right: rightEdge - 4,
-		top: topEdge + 4
-	});
-	anchors.forEach((anchor, i) => {
-		const { dx, dy } = offsets[i];
-		if (dx !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-x", `${dx}px`);
-		if (dy !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-y", `${dy}px`);
-	});
+	const scrollerTop = scrollerRect && scrollerRect.height > 0 ? scrollerRect.top : 0;
+	const groups = /* @__PURE__ */ new Map();
+	for (const mark of marks) {
+		const owner = mark.closest(FLOW_SELECTOR);
+		const group = groups.get(owner);
+		if (group) group.push(mark);
+		else groups.set(owner, [mark]);
+	}
+	for (const [owner, group] of groups) {
+		if (group.length < 2) continue;
+		const ownerRect = owner?.getBoundingClientRect();
+		const topEdge = Math.max(scrollerTop, ownerRect && ownerRect.height > 0 ? ownerRect.top : scrollerTop) + 4;
+		const anchors = group.map((mark) => {
+			const rect = mark.getBoundingClientRect();
+			return {
+				mark,
+				index: Number(mark.getAttribute(INDEX_ATTR) ?? 0),
+				x: rect.right + 2,
+				y: rect.bottom - 8 - 15,
+				width: 24,
+				height: 15,
+				visible: rect.width > 0 && rect.height > 0
+			};
+		}).filter((anchor) => anchor.visible).sort((a, b) => a.index - b.index);
+		if (anchors.length < 2) continue;
+		const offsets = placeBadges(anchors, {
+			right: rightEdge - 4,
+			top: topEdge
+		});
+		anchors.forEach((anchor, i) => {
+			const { dx, dy } = offsets[i];
+			if (dx !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-x", `${dx}px`);
+			if (dy !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-y", `${dy}px`);
+		});
+	}
 }
-/** Apply every registered job whose message is currently rendered. */
-function applyAnnotationMarks(root) {
+/**
+* Apply registered jobs. With `only`, touch just those rendered messages — the
+* mutation-driven path — instead of resolving and scanning every message for
+* every job. Badge collisions live inside one message's text flow, so both
+* paths resolve them per message.
+*/
+function applyAnnotationMarks(root, only) {
 	if (jobs.size === 0) return;
 	const scope = root ?? (typeof document === "undefined" ? void 0 : document.body);
 	if (!scope) return;
+	const lookup = only ? null : flowLookup(scope);
+	const onlyByKey = only ? groupByFlowKey(only) : null;
+	const onlyItems = only ? [...only].filter((item) => flowKeyOf(item) !== "") : [];
 	for (const job of [...jobs.values()]) {
-		const items = flowItems(job.messageId, scope);
+		const items = only ? job.messageId === "" ? onlyItems : onlyByKey?.get(job.messageId) ?? [] : job.messageId === "" ? lookup?.all ?? [] : [lookup?.byKey.get(job.messageId)].filter((item) => item !== void 0);
 		let decorated = false;
 		for (const item of items) {
 			if (refreshMarkIndex(item, job)) {
@@ -2187,7 +2301,11 @@ function applyAnnotationMarks(root) {
 			if (decorateJob(item, job)) decorated = true;
 		}
 	}
-	layoutBadges(scope);
+	if (!only) {
+		layoutBadges(scope);
+		return;
+	}
+	for (const item of only) if (item.isConnected) layoutBadges(item);
 }
 /** Insert or refresh jobs; identical jobs are no-ops. */
 function upsertAnnotationJobs(next) {
@@ -2234,26 +2352,46 @@ function syncPendingAnnotationJobs(annotations) {
 		endOffset: item.sources[0]?.endOffset
 	})));
 }
-/** Observe the transcript and re-apply marks after re-renders. Returns disposer. */
+/**
+* Observe the transcript and re-apply marks after re-renders. Mutations are
+* narrowed to the flow items that actually changed; streaming a reply no
+* longer walks every annotation in the conversation on each frame. Resizes
+* still force a full pass because line wrapping moves every badge anchor.
+*/
 function watchAnnotationMarks(root) {
 	const el = root ?? (typeof document === "undefined" ? void 0 : document.body);
 	if (!el || typeof MutationObserver === "undefined") return () => {};
 	applyAnnotationMarks(el);
 	let frame = 0;
-	const schedule = () => {
-		if (jobs.size === 0) return;
-		if (frame !== 0) return;
-		frame = window.requestAnimationFrame(() => {
-			frame = 0;
-			applyAnnotationMarks(el);
-		});
+	let pending = /* @__PURE__ */ new Set();
+	let needsFull = false;
+	const run = () => {
+		frame = 0;
+		const only = pending;
+		const full = needsFull;
+		pending = /* @__PURE__ */ new Set();
+		needsFull = false;
+		if (full) applyAnnotationMarks(el);
+		else if (only.size > 0) applyAnnotationMarks(el, only);
 	};
-	const observer = new MutationObserver(schedule);
+	const schedule = (records) => {
+		if (jobs.size === 0) {
+			pending.clear();
+			needsFull = false;
+			return;
+		}
+		if (records) for (const item of affectedFlowItems(records)) pending.add(item);
+		if (frame === 0) frame = window.requestAnimationFrame(run);
+	};
+	const observer = new MutationObserver((records) => schedule(records));
 	observer.observe(el, {
 		childList: true,
 		subtree: true
 	});
-	const onResize = () => schedule();
+	const onResize = () => {
+		needsFull = true;
+		schedule();
+	};
 	window.addEventListener("resize", onResize);
 	return () => {
 		observer.disconnect();
@@ -5676,6 +5814,15 @@ function bindAnnotationMarkPreview() {
 	const onClick = (event) => {
 		const mark = markOf(event.target);
 		if (!mark) return;
+		const index = Number(mark.getAttribute("data-dsq-ann-index"));
+		if (!Number.isFinite(index) || index <= 0) return;
+		if (event.detail !== 0) {
+			const offset = {
+				dx: Number.parseFloat(mark.style.getPropertyValue("--dsq-ann-badge-x")) || 0,
+				dy: Number.parseFloat(mark.style.getPropertyValue("--dsq-ann-badge-y")) || 0
+			};
+			if (!badgeContainsPoint(badgeHitBox(mark.getBoundingClientRect(), index, offset), event.clientX, event.clientY)) return;
+		}
 		const selection = window.getSelection();
 		if (selection && !selection.isCollapsed) return;
 		showMarkPreview(mark, false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-select-quote",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "DeepSeek Harness web plugin: annotate text selected in the conversation — the selection rides along with your next message, is marked in the source text, and the model points back at it.",
   "keywords": [
     "deepseek",