dsh-select-quote 0.3.6 → 0.3.7

package/README.md

@@ -38,9 +38,9 @@ dsh web --patch "$PWD/dev.patch.yml"
 
 ## 用法
 
-1. 在对话区选中一段文本，点「添加到任务」
-2. 在弹出的评论框里写一句想说的话（可留空，只划不评），`⌘/Ctrl + Enter` 确认
-3. 输入框上方出现批注卡片：悬停展开列表，可逐条编辑、删除或一键清空，点条目跳回正文对应文字
+1. 在对话区选中一段文本，点「添加到任务」——到这一步批注就已经保存，输入框上方同步出现摘要卡片
+2. 想补充的话在弹出的评论框里写一句，点「添加评论」或 `⌘/Ctrl + Enter`；不写就直接点空白处或「暂不评论」，批注同样保留
+3. 悬停摘要卡片展开列表，可逐条编辑、删除或一键清空，点条目跳回正文对应文字
 4. 正常打字发送，批注随消息一起交给模型，卡片随之消失
 5. 模型回答里引用某条批注的位置显示为可点击 chip
 
@@ -69,7 +69,9 @@ dsh web --patch "$PWD/dev.patch.yml"
 
 **升级 dsh 之后功能不对？** 先 `pnpm run check`；产物没问题就对照 [`docs/internals.md`](docs/internals.md) 的「依赖的产品内部约定」逐条复核，那里列了所有产品内部名。
 
-**划词没有工具条？** 确认选区在对话区而不是编辑器里；刷新页面（样式与观察者是幂等注入的）；宿主 boot 日志里应出现 `dsh-select-quote`。
+**划词没有工具条？** 确认选区在对话区而不是编辑器里；刷新页面（样式与观察者是幂等注入的）；宿主 boot 日志里应出现 `dsh-select-quote`。工具条挂在对话滚动区里，随正文一起滚动，滚到顶部会像正文一样滑进 header 下面；选中行完全滚出视口后收起，滚回去重新出现。
+
+**点空白处批注会丢吗？** 不会。点「添加到任务」时批注已经保存，空白点击只关闭评论框；已经写了一半的评论会一并保存到那条批注上。
 
 **输入框里出现了协议原文？** 发送前的注入没生效，一般是 composer 结构变了——检查 `[data-composer-card]` 是否还在。
 

package/lib/client.js

@@ -5,8 +5,8 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/client/dom/composer-host.ts
 /**
 * Host DOM contract for the resident composer.
@@ -138,6 +138,28 @@ ${atomRules}
   }
 }
 
+/* Same entrance for the below-anchor variant (only the content top uses it). */
+@keyframes dsq-toolbar-in-below {
+  from {
+    transform: translate(-50%, 0) translateY(-4px) scale(0.96);
+  }
+  to {
+    transform: translate(-50%, 0) translateY(0) scale(1);
+  }
+}
+
+/* Comment phase: the hint sits above the popover's top-left corner (explicit
+   top-left placement comes from placeCommentPop), so the entrance no longer
+   owns the centering shift. */
+@keyframes dsq-toolbar-in-popover-top {
+  from {
+    transform: translateY(4px) scale(0.96);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
 /* 内容层的 rise：悬停面板的列表在用；工具条改用容器 scale 后这条在这里待命。 */
 @keyframes dsq-rise-in {
   from {
@@ -184,10 +206,35 @@ ${atomRules}
   --dsq-shadow: var(--dsw-elevation-prominent, 0 0 0 .5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.04), 0 0 20px rgba(0, 0, 0, 0.05));
 }
 
+/* 浮层挂载与层带（2026-10-20 定，改前先读）：
+   工具条/评论泡/状态不再 portal 到 body，而是由 dom/floating-layer.ts 挂进对话
+   真正的滚动容器（桌面抽屉布局是 ST7X_W_scrollBody，普通布局是 .icaHSq_scroll）
+   里的一个 absolute host，坐标用**内容坐标**。
+
+   为什么不是 body：header（对话标题那一排）是滚动容器之外的非定位元素，任何
+   body 级 positioned + z-index 的浮层都天然压过它（这就是 z-index 降到 0 也仍在
+   header 之上的原因）；composer 座位是 sticky + z-index 7，只有低于它才不会被
+   输入框穿透。
+
+   现在把两件事交回宿主布局：
+   - 滚动容器负责裁剪：浮层随内容上移，到容器上边缘就被裁掉，自然滑进 header
+     下面，和正文一致；
+   - host 的 z-index 固定 6（见 floating-layer.ts）：低于 composer 的 7，高于
+     内容里吸顶元素的 6（同 z 时 host 追加在滚动容器末尾，DOM 次序压过它们）。
+   host 内部次序：status 3 > toolbar 2 > commentPop 1。
+
+   摘要行与批注卡片在内容普通流里，不参与这套层带；悬停面板仍是 body 级 fixed
+   （原因见 AnnotationCardView 里 contain:layout 的说明）。 */
+
 .dsq_toolbar {
-  position: fixed;
-  z-index: 10060;
-  transform: translate(-50%, -100%);
+  position: absolute;
+  z-index: 2;
+  /* The layer host is 0×0, so an auto-width absolute child would shrink to
+     min-content (Chinese hint text then wraps one character per line).
+     max-content keeps the bubble sized by its row regardless of the host. */
+  width: max-content;
+  max-width: calc(100vw - 24px);
+  transform: translate(-50%, var(--dsq-anchor-y, -100%));
   gap: 2px;
   padding: 4px;
   /* 无边框：--dsq-shadow（宿主的 elevation-prominent）自带 0 0 0 .5px 的描边环，
@@ -202,6 +249,18 @@ ${atomRules}
   animation: dsq-toolbar-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+/* Hangs below the selection: no room above at the very top of the transcript. */
+.dsq_toolbar[data-anchor='below'] {
+  --dsq-anchor-y: 0%;
+  animation-name: dsq-toolbar-in-below;
+}
+
+/* Comment phase: placed at an explicit top-left, 6px above the comment popover. */
+.dsq_toolbar[data-anchor='popover-top'] {
+  transform: none;
+  animation-name: dsq-toolbar-in-popover-top;
+}
+
 /* 按钮行：只负责布局；入场动画在容器上（见 .dsq_toolbar 的 A/B 说明）。 */
 .dsq_toolbarInner {
   display: inline-flex;
@@ -248,8 +307,8 @@ ${atomRules}
 }
 
 .dsq_status {
-  position: fixed;
-  z-index: 10061;
+  position: absolute;
+  z-index: 3;
   transform: translate(-50%, 8px);
   padding: 4px 10px;
   border-radius: 999px;
@@ -266,7 +325,7 @@ ${atomRules}
   position: absolute;
   top: 8px;
   left: 8px;
-  z-index: 40;
+  z-index: 12;
   width: 20%;
   min-width: 148px;
   max-width: 220px;
@@ -406,7 +465,7 @@ ${atomRules}
 /* Qoder-style annotation summary (“N 条批注”) inside the composer. */
 .dsq_summary {
   position: relative;
-  z-index: 10040;
+  z-index: 13;
   gap: 10px;
   width: 100%;
   max-width: 100%;
@@ -450,7 +509,7 @@ ${atomRules}
      flex atoms — the open class below turns display back on. */
   display: none;
   position: fixed;
-  z-index: 10050;
+  z-index: 14;
   width: min(320px, calc(100vw - 16px));
   flex-direction: column;
   padding: 12px;
@@ -671,15 +730,19 @@ ${atomRules}
 
 /* Inline comment composer under the floating selection toolbar. */
 .dsq_commentPop {
-  position: fixed;
-  z-index: 10050;
-  transform: translate(-50%, 4px);
+  position: absolute;
+  z-index: 1;
+  /* Vertical offset comes from placeCommentPop (below the selection); only
+     the horizontal centering belongs to the transform. */
+  transform: translateX(-50%);
   width: min(320px, calc(100vw - 24px));
   gap: 8px;
   padding: 8px;
   border-radius: 16px;
   /* 底色与模糊都在材质图层里 */
   box-shadow: var(--dsq-shadow);
+  /* The layer host is pointer-events:none; interactive surfaces opt back in. */
+  pointer-events: auto;
 }
 
 .dsq_commentInput {
@@ -849,6 +912,7 @@ ${atomRules}
 .dsq_annMark {
   --dsq-mark-color: var(--dsq-accent);
   --dsq-mark-tint: var(--dsq-accent-tint);
+  position: relative;
   background: var(--dsq-mark-tint);
   text-decoration: underline;
   text-decoration-style: dashed;
@@ -862,10 +926,17 @@ ${atomRules}
 
 /* Ordinal as a superscript corner badge at the END of the marked text, so it
    never sits between the reader and the sentence. Only the last fragment of a
-   multi-fragment mark carries the index, so the number appears exactly once. */
+   multi-fragment mark carries the index, so the number appears exactly once.
+   Absolute so the badge adds no inline advance width: annotating never reflows
+   the paragraph or moves following words. Bottom (not top) anchors to the last
+   fragment: for a mark spanning several lines the containing block is the union
+   of the first and last fragments, so its bottom edge is the last line. */
 .dsq_annMark[data-dsq-ann-index]::after {
   content: attr(data-dsq-ann-index);
-  display: inline-grid;
+  position: absolute;
+  bottom: 8px;
+  left: 100%;
+  display: grid;
   place-items: center;
   min-width: 15px;
   height: 15px;
@@ -877,7 +948,7 @@ ${atomRules}
   font-size: 10px;
   font-weight: 600;
   line-height: 1;
-  vertical-align: super;
+  pointer-events: none;
 }
 
 .dsq_annMark:hover {
@@ -1163,6 +1234,12 @@ function createMark(job, withIndex) {
 * selections that cross inline elements or paragraph boundaries never reorder
 * the DOM; fragments of one annotation share the mark id, and the ordinal
 * badge rides on the final fragment (end of the annotation).
+*
+* `surroundContents` is load-bearing: `extractContents()` leaves the text
+* before **and after** the range in the same node, so inserting the mark at
+* `node.nextSibling` (the old implementation) appended every partial selection
+* to the end of its parent — a selection starting at offset 0, such as the
+* sentence after a colon, visibly jumped to the paragraph's end.
 */
 function wrapRange(item, job, from, to) {
 	const located = cleanTextRange(item, from, to);
@@ -1172,15 +1249,12 @@ function wrapRange(item, job, from, to) {
 	let wrapped = false;
 	pieces.forEach((piece, i) => {
 		const node = piece.entry.node;
-		const parent = node.parentElement;
-		if (!parent) return;
+		if (!node.parentElement) return;
 		const range = document.createRange();
 		range.setStart(node, piece.start - piece.entry.start);
 		range.setEnd(node, piece.end - piece.entry.start);
 		const mark = createMark(job, i === pieces.length - 1);
-		mark.append(range.extractContents());
-		parent.insertBefore(mark, node.nextSibling);
-		if (node.nodeValue === "") node.remove();
+		range.surroundContents(mark);
 		wrapped = true;
 	});
 	return wrapped;
@@ -1715,20 +1789,24 @@ const GAP = 8;
 const MARGIN = 8;
 /**
 * Place `panel` near `anchor`, flipping vertical side when the preferred side
-* lacks room. Keeps the panel inside the viewport on the horizontal axis.
+* lacks room. Keeps the panel inside `bounds` (the viewport by default).
 */
-function placePopover(anchor, panel, preferred = "bottom", gap = GAP) {
-	const vw = window.innerWidth;
-	const vh = window.innerHeight;
-	const spaceBelow = vh - anchor.bottom;
-	const spaceAbove = anchor.top;
+function placePopover(anchor, panel, preferred = "bottom", gap = GAP, bounds) {
+	const box = bounds ?? {
+		top: 0,
+		left: 0,
+		right: window.innerWidth,
+		bottom: window.innerHeight
+	};
+	const spaceBelow = box.bottom - anchor.bottom;
+	const spaceAbove = anchor.top - box.top;
 	let side = preferred;
 	const need = panel.height + gap;
 	if (preferred === "bottom" && spaceBelow < need && spaceAbove > spaceBelow) side = "top";
 	else if (preferred === "top" && spaceAbove < need && spaceBelow > spaceAbove) side = "bottom";
 	return {
-		top: side === "bottom" ? Math.min(anchor.bottom + gap, vh - panel.height - MARGIN) : Math.max(anchor.top - panel.height - gap, MARGIN),
-		left: Math.min(Math.max(anchor.left, MARGIN), Math.max(MARGIN, vw - panel.width - MARGIN)),
+		top: side === "bottom" ? Math.min(anchor.bottom + gap, box.bottom - panel.height - MARGIN) : Math.max(anchor.top - panel.height - gap, box.top + MARGIN),
+		left: Math.min(Math.max(anchor.left, box.left + MARGIN), Math.max(box.left + MARGIN, box.right - panel.width - MARGIN)),
 		side
 	};
 }
@@ -1746,78 +1824,32 @@ const SVG_ATTRS = {
 	focusable: false
 };
 const SHAPES = {
-	copy: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("rect", {
-		key: "r",
+	copy: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 		width: 14,
 		height: 14,
 		x: 8,
 		y: 8,
 		rx: 2,
 		ry: 2
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p",
-		d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-	})] }),
-	pencil: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "m15 5 4 4"
-	})] }),
-	"trash-2": (0, react_jsx_runtime.jsxs)("g", { children: [
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p1",
-			d: "M10 11v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p2",
-			d: "M14 11v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p3",
-			d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p4",
-			d: "M3 6h18"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p5",
-			d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] }),
+	pencil: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 5 4 4" })] }),
+	"trash-2": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 11v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 11v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
 	] }),
-	x: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M18 6 6 18"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "m6 6 12 12"
-	})] }),
-	plus: (0, react_jsx_runtime.jsxs)("g", { children: [(0, react_jsx_runtime.jsx)("path", {
-		key: "p1",
-		d: "M5 12h14"
-	}), (0, react_jsx_runtime.jsx)("path", {
-		key: "p2",
-		d: "M12 5v14"
-	})] }),
-	"external-link": (0, react_jsx_runtime.jsxs)("g", { children: [
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p1",
-			d: "M15 3h6v6"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p2",
-			d: "M10 14 21 3"
-		}),
-		(0, react_jsx_runtime.jsx)("path", {
-			key: "p3",
-			d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
-		})
+	x: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })] }),
+	plus: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14" })] }),
+	"external-link": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15 3h6v6" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 14 21 3" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
 	] })
 };
 function LucideIcon({ name, size = 15 }) {
-	return (0, react_jsx_runtime.jsx)("svg", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		...SVG_ATTRS,
 		width: size,
 		height: size,
@@ -2029,23 +2061,23 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 	useLocale();
 	const composer = variant === "composer";
 	const subtitle = comment ? composer ? t("card.commentSubtitle", { comment }) : comment : composer ? t("common.selectedText") : t("summary.noComment");
-	return (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cx(A.box, A.row, styles.card, !composer && styles.tCard),
 		role: "group",
 		"aria-label": index ? t("card.ariaIndexed", { index }) : t("card.ariaPlain"),
 		children: [
-			(0, react_jsx_runtime.jsx)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.keep, A.gridMid, styles.cardIcon, !composer && styles.tCardIcon),
-				"aria-hidden": true,
+				"aria-hidden": "true",
 				children: index ? String(index) : "AI"
 			}),
-			(0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.grow, A.col, styles.cardBody),
-				children: [(0, react_jsx_runtime.jsx)("div", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.ell, styles.cardTitle),
 					title: text,
 					children: title
-				}), (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.ell, styles.cardSubtitle),
 					...comment ? {
 						title: comment,
@@ -2054,14 +2086,14 @@ function AnnotationCardView({ title, text, comment, variant, index, onRemove, on
 					children: subtitle
 				})]
 			}),
-			composer && onEditComment ? (0, react_jsx_runtime.jsx)("button", {
+			composer && onEditComment ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardAction),
 				"aria-label": t("card.editComment"),
 				onClick: onEditComment,
 				children: "✎"
 			}) : null,
-			composer && onRemove ? (0, react_jsx_runtime.jsx)("button", {
+			composer && onRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("card.remove"),
@@ -2239,62 +2271,62 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		editDraft,
 		onItemEdit
 	]);
-	const panel = open ? (0, react_jsx_runtime.jsx)("div", {
+	const panel = open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: popRef,
 		className: `${styles.summaryHover} ${styles.summaryHoverOpen}`,
 		role: "dialog",
 		"aria-label": t("summary.dialogAria", { count }),
 		onPointerEnter: openPop,
 		onPointerLeave,
-		children: (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cx(A.col, styles.summaryHoverInner),
-			children: (0, react_jsx_runtime.jsx)("div", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.col, styles.summaryList),
 				children: items.map((item, i) => {
 					const isEditing = editing === i;
-					return (0, react_jsx_runtime.jsxs)("div", {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: styles.summaryItem,
-						children: [(0, react_jsx_runtime.jsxs)("div", {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: cx(A.row, styles.summaryItemHead),
 							children: [
-								(0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: cx(A.keep, A.gridMid, styles.summaryItemBadge),
-									"aria-hidden": true,
+									"aria-hidden": "true",
 									children: String(i + 1)
 								}),
-								(0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: styles.summaryItemLabel,
 									children: t("common.selectedText")
 								}),
-								!isEditing && (onItemRemove || onItemEdit) ? (0, react_jsx_runtime.jsxs)("div", {
+								!isEditing && (onItemRemove || onItemEdit) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: cx(A.row, styles.summaryItemActions),
-									children: [onItemEdit ? (0, react_jsx_runtime.jsx)("button", {
+									children: [onItemEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: cx(A.plain, A.gridMid, styles.summaryItemAction),
 										"aria-label": t("summary.edit", { index: i + 1 }),
 										onClick: () => startEdit(i),
-										children: (0, react_jsx_runtime.jsx)(LucideIcon, { name: "pencil" })
-									}) : null, onItemRemove ? (0, react_jsx_runtime.jsx)("button", {
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, { name: "pencil" })
+									}) : null, onItemRemove ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: cx(A.plain, A.gridMid, styles.summaryItemAction),
 										"aria-label": t("summary.remove", { index: i + 1 }),
 										onClick: () => onItemRemove(i, item),
-										children: (0, react_jsx_runtime.jsx)(LucideIcon, { name: "trash-2" })
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, { name: "trash-2" })
 									}) : null]
 								}) : null
 							]
-						}), isEditing ? (0, react_jsx_runtime.jsxs)("div", {
+						}), isEditing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: styles.summaryItemMain,
 							children: [
-								(0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: styles.annEditText,
 									children: item.text
 								}),
-								(0, react_jsx_runtime.jsx)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: styles.summaryItemLabel,
 									children: t("summary.userComment")
 								}),
-								(0, react_jsx_runtime.jsx)("textarea", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 									ref: editInputRef,
 									className: cx(A.box, styles.annEditInput),
 									placeholder: t("common.commentPlaceholder"),
@@ -2312,14 +2344,14 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 										}
 									}
 								}),
-								(0, react_jsx_runtime.jsxs)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: cx(A.row, styles.annEditActions),
-									children: [(0, react_jsx_runtime.jsx)("button", {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: cx(A.plain, styles.annEditCancel),
 										onClick: () => setEditing(null),
 										children: t("common.cancel")
-									}), (0, react_jsx_runtime.jsx)("button", {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: styles.annEditSave,
 										onClick: commitEdit,
@@ -2327,9 +2359,9 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 									})]
 								})
 							]
-						}) : (0, react_jsx_runtime.jsx)("div", {
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: styles.summaryItemMain,
-							children: (0, react_jsx_runtime.jsxs)("button", {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								className: cx(A.plain, styles.summaryItemButton),
 								onClick: () => {
@@ -2337,15 +2369,15 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 									closePop();
 								},
 								children: [
-									(0, react_jsx_runtime.jsx)("div", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: styles.summaryItemText,
 										children: item.title
 									}),
-									(0, react_jsx_runtime.jsx)("div", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: styles.summaryItemLabel,
 										children: t("summary.userComment")
 									}),
-									(0, react_jsx_runtime.jsx)("div", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: item.comment ? styles.summaryItemText : `${styles.summaryItemText} ${styles.summaryItemTextEmpty}`,
 										children: item.comment || t("summary.noComment")
 									})
@@ -2357,7 +2389,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 			})
 		})
 	}) : null;
-	return (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: rootRef,
 		className: cx(A.row, styles.summary),
 		tabIndex: 0,
@@ -2370,27 +2402,27 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		onBlur,
 		onKeyDown,
 		children: [
-			(0, react_jsx_runtime.jsx)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.keep, A.gridMid, styles.summaryIcon),
-				"aria-hidden": true,
+				"aria-hidden": "true",
 				children: String(count)
 			}),
-			(0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.grow, styles.summaryBody),
-				children: [(0, react_jsx_runtime.jsx)("div", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryTitle,
 					children: t("summary.title", { count })
-				}), (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.summaryHint,
 					children: t("summary.hint")
 				})]
 			}),
-			onRemoveAll ? (0, react_jsx_runtime.jsx)("button", {
+			onRemoveAll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cx(A.plain, A.gridMid, styles.cardClose),
 				"aria-label": t("summary.removeAll"),
 				onClick: onRemoveAll,
-				children: (0, react_jsx_runtime.jsx)(LucideIcon, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 					name: "x",
 					size: 13
 				})
@@ -2605,10 +2637,10 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 		sync();
 	}, [sync]);
 	if (!sessionId || items.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
 		className: cx(A.col, styles.cardStack),
-		children: (0, react_jsx_runtime.jsx)(AnnotationSummary, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationSummary, {
 			count: items.length,
 			items: items.map((item) => ({
 				id: item.id,
@@ -2626,9 +2658,116 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 /** Alias kept for overlay registration. */
 const QuoteCard = AnnotationPanel;
 //#endregion
+//#region src/client/dom/floating-layer.ts
+/**
+* Mount point for the selection UI: a zero-size host inside the transcript's
+* real scroll container.
+*
+* The host is `position: absolute` in **content coordinates**, so floating UI
+* scrolls with the selected text and the scroller clips it at its own edges.
+* That is what keeps the toolbar out of the app header and the composer:
+* clipping happens in the scroller's stacking context instead of competing
+* with the header (which is not positioned and therefore loses to any
+* body-level positioned portal, whatever its z-index).
+*
+* Two host layouts exist in the product:
+* - desktop / overlay composer: `ST7X_W_scrollBody` scrolls; the chat frame is
+*   content-sized and the chat's own `.icaHSq_scroll` is `overflow: visible`;
+* - regular layout: `.icaHSq_scroll` is the scroller.
+* Walking up from the selected flow item finds whichever one is live.
+*/
+const HOST_ATTR = "data-dsq-layer";
+/** Below the composer seat (sticky, z-index 7); above in-content stickies (6). */
+const HOST_Z = 6;
+const layers = /* @__PURE__ */ new WeakMap();
+/** flow item → layer, so scrolling does not re-walk the ancestor chain. */
+const itemLayers = /* @__PURE__ */ new WeakMap();
+let fallback = null;
+function contentCoords(scroller, left, top) {
+	const rect = scroller.getBoundingClientRect();
+	return {
+		left: left - rect.left - scroller.clientLeft + scroller.scrollLeft,
+		top: top - rect.top - scroller.clientTop + scroller.scrollTop
+	};
+}
+function layerFor(scroller) {
+	const cached = layers.get(scroller);
+	if (cached?.host.isConnected) return cached;
+	if (getComputedStyle(scroller).position === "static") scroller.style.position = "relative";
+	let host = scroller.querySelector(`:scope > [${HOST_ATTR}]`);
+	if (!host) {
+		host = document.createElement("div");
+		host.setAttribute(HOST_ATTR, "");
+		host.style.cssText = `position:absolute;left:0;top:0;width:0;height:0;z-index:${HOST_Z};pointer-events:none;`;
+		scroller.appendChild(host);
+	}
+	const layer = {
+		host,
+		scroller,
+		bounds: () => {
+			const rect = scroller.getBoundingClientRect();
+			return new DOMRect(rect.left + scroller.clientLeft, rect.top + scroller.clientTop, scroller.clientWidth, scroller.clientHeight);
+		},
+		toContent: (left, top) => contentCoords(scroller, left, top),
+		fromContent: (left, top) => {
+			const rect = scroller.getBoundingClientRect();
+			return {
+				left: left + rect.left + scroller.clientLeft - scroller.scrollLeft,
+				top: top + rect.top + scroller.clientTop - scroller.scrollTop
+			};
+		}
+	};
+	layers.set(scroller, layer);
+	return layer;
+}
+/** Fallback for hosts whose transcript has no scrollable ancestor. */
+function fallbackLayer() {
+	if (fallback?.host.isConnected) return fallback;
+	const host = document.createElement("div");
+	host.setAttribute(HOST_ATTR, "");
+	host.style.cssText = `position:absolute;left:0;top:0;width:0;height:0;z-index:${HOST_Z};pointer-events:none;`;
+	document.body.appendChild(host);
+	fallback = {
+		host,
+		scroller: document.body,
+		bounds: () => new DOMRect(0, 0, window.innerWidth, window.innerHeight),
+		toContent: (left, top) => ({
+			left,
+			top
+		}),
+		fromContent: (left, top) => ({
+			left,
+			top
+		})
+	};
+	return fallback;
+}
+/** Layer for a node inside the transcript (falls back to a body host). */
+function floatingLayerFor(node) {
+	const item = flowItemOf(node);
+	const cached = item ? itemLayers.get(item) : void 0;
+	if (cached?.host.isConnected) return cached;
+	let el = item;
+	while (el && el !== document.body) {
+		const { overflowY } = getComputedStyle(el);
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+			const layer = layerFor(el);
+			if (item) itemLayers.set(item, layer);
+			return layer;
+		}
+		el = el.parentElement;
+	}
+	const layer = fallbackLayer();
+	if (item) itemLayers.set(item, layer);
+	return layer;
+}
+//#endregion
 //#region src/client/dom/selection.ts
 /** Selection snapshot used by the floating toolbar. */
 const TOOLBAR_OFFSET = 12;
+const BELOW_GAP = 8;
+/** Estimated toolbar height; only used to decide above vs below at content top. */
+const TOOLBAR_HEIGHT = 40;
 const VIEWPORT_MARGIN = 12;
 const LINE_TOP_TOLERANCE = 3;
 /**
@@ -2669,12 +2808,24 @@ function getRangeFirstLineRect(range) {
 	const firstTop = Math.min(...rects.map((rect) => rect.top));
 	return mergeRects(rects.filter((rect) => Math.abs(rect.top - firstTop) <= LINE_TOP_TOLERANCE));
 }
-function toolbarPosition(rect) {
+/** Keep the centered toolbar inside the visible horizontal band. */
+function anchorX(rect, bounds) {
 	const center = rect.left + rect.width / 2;
-	return {
-		left: Math.min(Math.max(center, VIEWPORT_MARGIN), window.innerWidth - VIEWPORT_MARGIN),
-		top: Math.max(rect.top - TOOLBAR_OFFSET, VIEWPORT_MARGIN)
-	};
+	const min = bounds.left + VIEWPORT_MARGIN;
+	const max = Math.max(min, bounds.right - VIEWPORT_MARGIN);
+	return Math.min(Math.max(center, min), max);
+}
+/**
+* True when the selection's first line still touches the viewport.
+*
+* The toolbar anchors to that line, so once it has scrolled fully out of
+* view there is nothing to anchor to and the snapshot reads as "gone" — the
+* toolbar hides and comes back when the user scrolls to the selection again
+* (scroll re-reads the selection). A partially visible line still counts:
+* `toolbarPosition` parks the toolbar at the viewport edge in that case.
+*/
+function isFirstLineOnScreen(rect) {
+	return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
 }
 /**
 * Read the live selection when it is a non-empty range inside a conversation
@@ -2692,13 +2843,24 @@ function readSelectionSnapshot(toolbarRoot) {
 	if (!text) return null;
 	const rect = getRangeFirstLineRect(selection.getRangeAt(0));
 	if (!rect) return null;
-	const { left, top } = toolbarPosition(rect);
-	const source = rangeOffsetsInFlowItem(selection.getRangeAt(0));
+	if (!isFirstLineOnScreen(rect)) return null;
+	const layer = floatingLayerFor(anchorNode);
+	const x = anchorX(rect, layer.bounds());
+	const above = layer.toContent(x, rect.top - TOOLBAR_OFFSET);
+	const below = above.top < TOOLBAR_HEIGHT;
+	const anchor = below ? layer.toContent(x, rect.bottom + BELOW_GAP) : above;
+	const range = selection.getRangeAt(0);
+	const union = range.getBoundingClientRect();
+	const selectionBottom = layer.toContent(0, union.height > 0 ? union.bottom : rect.bottom).top;
+	const source = rangeOffsetsInFlowItem(range);
 	const anchorHref = (anchorNode instanceof Element ? anchorNode : anchorNode.parentElement)?.closest("a[href]")?.getAttribute("href") ?? void 0;
 	return {
 		text,
-		left,
-		top,
+		left: anchor.left,
+		top: anchor.top,
+		below,
+		selectionBottom,
+		layer,
 		...source ? { source } : {},
 		...anchorHref ? { anchorHref } : {}
 	};
@@ -2775,35 +2937,72 @@ function SelectionToolbar({ sessionId }) {
 	const [status, setStatus] = (0, react.useState)(null);
 	const activeRef = (0, react.useRef)(null);
 	activeRef.current = active;
+	/** Annotation saved when the comment step opened; the box only edits it. */
+	const pendingIdRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		ensureToolbarStyles();
 		if (sessionId) bindAnnotationSession(sessionId);
 	}, [sessionId]);
 	const hide = (0, react.useCallback)(() => {
+		pendingIdRef.current = null;
 		setActive(null);
 		setPhase("idle");
 		setComment("");
 		setStatus(null);
 	}, []);
+	/**
+	* Keep what was typed when the comment popover goes away without an explicit
+	* cancel. The annotation itself was saved when the step opened, so dropping
+	* the text would also lose the only optional part of the interaction.
+	*/
+	const flushComment = (0, react.useCallback)(() => {
+		const id = pendingIdRef.current;
+		pendingIdRef.current = null;
+		if (!id) return;
+		const typed = commentRef.current?.value ?? "";
+		if (typed.trim()) updateAnnotationComment(void 0, id, typed);
+	}, []);
+	/** Save the current selection without a comment; returns the store id. */
+	const saveSelection = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		if (!snapshot) return null;
+		return saveAnnotation(void 0, {
+			text: snapshot.text,
+			sources: snapshot.source ? [{
+				text: snapshot.text,
+				messageId: snapshot.source.messageId,
+				messageKind: snapshot.source.messageKind,
+				startOffset: snapshot.source.startOffset,
+				endOffset: snapshot.source.endOffset
+			}] : void 0
+		}).id;
+	}, []);
 	const refresh = (0, react.useCallback)(() => {
 		const next = readSelectionSnapshot(toolbarRef.current);
 		if (!next) {
 			if (phaseRef.current === "idle") setActive(null);
 			return;
 		}
-		setActive((prev) => {
-			if (phaseRef.current === "comment" && prev && prev.text !== next.text) {
-				setPhase("idle");
-				setComment("");
-			}
-			if (prev && prev.text === next.text && prev.left === next.left && prev.top === next.top) return prev;
-			return next;
-		});
-	}, []);
+		const current = activeRef.current;
+		if (phaseRef.current === "comment" && current && current.text !== next.text) {
+			flushComment();
+			setPhase("idle");
+			setComment("");
+		}
+		setActive((prev) => prev && prev.text === next.text && prev.left === next.left && prev.top === next.top && prev.below === next.below && prev.layer === next.layer ? prev : next);
+	}, [flushComment]);
 	const phaseRef = (0, react.useRef)(phase);
 	phaseRef.current = phase;
 	(0, react.useEffect)(() => {
-		const schedule = () => window.setTimeout(refresh, 0);
+		let scheduled = false;
+		const schedule = () => {
+			if (scheduled) return;
+			scheduled = true;
+			window.setTimeout(() => {
+				scheduled = false;
+				refresh();
+			}, 0);
+		};
 		let dragging = false;
 		const onPointerDown = (event) => {
 			const target = event.target;
@@ -2813,6 +3012,7 @@ function SelectionToolbar({ sessionId }) {
 			if (inToolbar || inComment) return;
 			dragging = true;
 			if (phaseRef.current === "comment") {
+				flushComment();
 				hide();
 				return;
 			}
@@ -2834,7 +3034,7 @@ function SelectionToolbar({ sessionId }) {
 		const onScroll = (event) => {
 			const target = event.target;
 			if (target instanceof Node && (toolbarRef.current?.contains(target) === true || commentWrapRef.current?.contains(target) === true)) return;
-			hide();
+			schedule();
 		};
 		document.addEventListener("pointerdown", onPointerDown, true);
 		document.addEventListener("pointerup", onPointerUp, true);
@@ -2850,12 +3050,27 @@ function SelectionToolbar({ sessionId }) {
 			window.removeEventListener("resize", schedule);
 			document.removeEventListener("scroll", onScroll, true);
 		};
-	}, [hide, refresh]);
+	}, [
+		flushComment,
+		hide,
+		refresh
+	]);
 	const placeCommentPop = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		const layer = snapshot?.layer;
 		const toolbar = toolbarRef.current;
 		const pop = commentWrapRef.current;
-		if (!toolbar || !pop) return;
-		const anchor = toolbar.getBoundingClientRect();
+		if (!snapshot || !layer || !toolbar || !pop) return;
+		const bounds = layer.bounds();
+		const toolbarW = toolbar.offsetWidth;
+		const toolbarH = toolbar.offsetHeight;
+		const home = layer.fromContent(snapshot.left, snapshot.top);
+		const anchor = {
+			left: home.left - toolbarW / 2,
+			top: home.top - (snapshot.below ? 0 : toolbarH),
+			width: toolbarW,
+			height: toolbarH
+		};
 		pop.style.display = "flex";
 		pop.style.visibility = "hidden";
 		const panel = {
@@ -2863,24 +3078,45 @@ function SelectionToolbar({ sessionId }) {
 			height: pop.offsetHeight || 180
 		};
 		pop.style.visibility = "";
-		const { top } = placePopover(anchor, panel, "bottom");
+		const gap = 8;
+		const margin = 8;
+		const belowTop = layer.fromContent(0, snapshot.selectionBottom).top + gap;
+		const aboveTop = anchor.top - panel.height - gap;
+		const top = belowTop <= bounds.bottom - margin - panel.height ? belowTop : aboveTop >= bounds.top + margin ? aboveTop : Math.max(bounds.top + margin, Math.min(belowTop, bounds.bottom - margin - panel.height));
 		const half = panel.width / 2 + 8;
-		const center = Math.min(Math.max(anchor.left + anchor.width / 2, half), Math.max(half, window.innerWidth - half));
-		pop.style.top = `${top}px`;
-		pop.style.left = `${center}px`;
+		const min = bounds.left + half;
+		const center = Math.min(Math.max(anchor.left + anchor.width / 2, min), Math.max(min, bounds.right - half));
+		const at = layer.toContent(center, top);
+		pop.style.top = `${at.top}px`;
+		pop.style.left = `${at.left}px`;
+		const sideGap = 6;
+		const popLeftView = layer.fromContent(at.left, at.top).left - panel.width / 2;
+		const popTopView = top;
+		let leftView = popLeftView;
+		let topView = popTopView - sideGap - toolbarH;
+		if (topView < bounds.top + margin) topView = popTopView + panel.height + sideGap;
+		leftView = Math.max(bounds.left + margin, Math.min(leftView, bounds.right - margin - toolbarW));
+		topView = Math.max(bounds.top + margin, Math.min(topView, bounds.bottom - margin - toolbarH));
+		const toolbarAt = layer.toContent(leftView, topView);
+		toolbar.style.left = `${toolbarAt.left}px`;
+		toolbar.style.top = `${toolbarAt.top}px`;
 	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (phase === "comment") placeCommentPop();
+	}, [
+		active,
+		phase,
+		placeCommentPop
+	]);
 	(0, react.useEffect)(() => {
-		if (phase === "comment") {
-			placeCommentPop();
-			commentRef.current?.focus();
-		}
-	}, [phase, placeCommentPop]);
+		if (phase === "comment") commentRef.current?.focus();
+	}, [phase]);
 	(0, react.useEffect)(() => {
 		const onResize = () => placeCommentPop();
 		window.addEventListener("resize", onResize);
 		return () => window.removeEventListener("resize", onResize);
 	}, [placeCommentPop]);
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (phase !== "comment") return;
 		const area = commentRef.current;
 		if (!area) return;
@@ -2907,12 +3143,18 @@ function SelectionToolbar({ sessionId }) {
 			setStatus(t("toolbar.copyFailed"));
 		}
 	}, [hide]);
+	/**
+	* "Add to task" is the commit: the quote is saved immediately, with or
+	* without a comment. The popover only edits that saved entry, so dismissing
+	* it (outside click, new selection) can never undo the annotation.
+	*/
 	const openComment = (0, react.useCallback)(() => {
 		if (!activeRef.current) return;
+		pendingIdRef.current = saveSelection();
 		setPhase("comment");
 		setComment("");
 		setStatus(null);
-	}, []);
+	}, [saveSelection]);
 	/**
 	* Hand the selected link to the system browser.
 	*
@@ -2930,89 +3172,75 @@ function SelectionToolbar({ sessionId }) {
 		clearNativeSelection();
 		hide();
 	}, [hide]);
-	/** Quick-add without opening the comment step (double-tap / “Skip comment”). */
-	const commitAnnotation = (0, react.useCallback)((body) => {
-		const snapshot = activeRef.current;
-		if (!snapshot) {
-			hide();
-			return;
-		}
-		saveAnnotation(void 0, {
-			text: snapshot.text,
-			...body && body.trim() ? { comment: body.trim() } : {},
-			sources: snapshot.source ? [{
-				text: snapshot.text,
-				messageId: snapshot.source.messageId,
-				messageKind: snapshot.source.messageKind,
-				startOffset: snapshot.source.startOffset,
-				endOffset: snapshot.source.endOffset
-			}] : void 0
-		});
-		getAnnotations().length;
+	/** Close the optional comment step; the annotation stays saved either way. */
+	const finishComment = (0, react.useCallback)((keepComment) => {
+		if (keepComment) flushComment();
+		else pendingIdRef.current = null;
 		clearNativeSelection();
 		hide();
-		setStatus(null);
 		window.setTimeout(focusComposer, 16);
-	}, [hide]);
+	}, [flushComment, hide]);
 	if (!active) return null;
 	const toolbarStyle = {
 		left: active.left,
 		top: active.top
 	};
 	const link = linkTarget(active.text, active.anchorHref);
-	return (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-		(0, react_jsx_runtime.jsx)("div", {
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: toolbarRef,
 			className: cx(A.row, styles.toolbar),
-			style: toolbarStyle,
+			style: phase === "comment" ? void 0 : toolbarStyle,
 			role: "toolbar",
 			"aria-label": t("toolbar.aria"),
 			"data-dsq-toolbar": "true",
+			"data-anchor": phase === "comment" ? "popover-top" : active.below ? "below" : "above",
 			onPointerDown: handleToolbarPointerDown,
-			children: phase === "comment" ? (0, react_jsx_runtime.jsx)("div", {
+			children: phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.inlineRow, styles.toolbarInner),
-				children: (0, react_jsx_runtime.jsx)("span", {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: {
 						padding: "0 8px",
 						fontSize: 13,
-						opacity: .8
+						opacity: .8,
+						whiteSpace: "nowrap"
 					},
 					children: t("toolbar.commentHint")
 				})
-			}) : (0, react_jsx_runtime.jsxs)("div", {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.inlineRow, styles.toolbarInner),
 				children: [
-					link ? (0, react_jsx_runtime.jsx)("button", {
+					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: handleOpenLink,
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "external-link",
 							size: 14
 						}), t("toolbar.openLink")]
 					}) : null,
-					link ? (0, react_jsx_runtime.jsx)("span", {
+					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: styles.divider,
-						"aria-hidden": true
+						"aria-hidden": "true"
 					}) : null,
-					(0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: () => void handleCopy(),
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "copy",
 							size: 14
 						}), t("toolbar.copy")]
 					}),
-					(0, react_jsx_runtime.jsx)("span", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: styles.divider,
-						"aria-hidden": true
+						"aria-hidden": "true"
 					}),
-					(0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: cx(A.plain, A.inlineRow, styles.button),
 						onClick: openComment,
-						children: [(0, react_jsx_runtime.jsx)(LucideIcon, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
 							name: "plus",
 							size: 14
 						}), t("toolbar.addToTask")]
@@ -3020,14 +3248,13 @@ function SelectionToolbar({ sessionId }) {
 				]
 			})
 		}),
-		phase === "comment" ? (0, react_jsx_runtime.jsxs)("div", {
+		phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: commentWrapRef,
 			className: cx(A.col, styles.commentPop),
-			style: void 0,
 			role: "dialog",
 			"aria-label": t("toolbar.commentDialogAria"),
 			onPointerDown: handleToolbarPointerDown,
-			children: [(0, react_jsx_runtime.jsx)("textarea", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				ref: commentRef,
 				className: cx(A.box, styles.commentInput),
 				placeholder: t("common.commentPlaceholder"),
@@ -3036,37 +3263,38 @@ function SelectionToolbar({ sessionId }) {
 				onKeyDown: (e) => {
 					if (e.key === "Escape") {
 						e.preventDefault();
+						pendingIdRef.current = null;
 						hide();
 						return;
 					}
 					if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
 						e.preventDefault();
-						commitAnnotation(comment);
+						finishComment(true);
 					}
 				}
-			}), (0, react_jsx_runtime.jsxs)("div", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: styles.commentActions,
-				children: [(0, react_jsx_runtime.jsx)("button", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: cx(A.plain, A.inlineRow, styles.button),
-					onClick: () => commitAnnotation(void 0),
+					onClick: () => finishComment(false),
 					children: t("toolbar.skipComment")
-				}), (0, react_jsx_runtime.jsx)("button", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: cx(A.plain, A.inlineRow, styles.button, styles.buttonAddComment),
 					disabled: !comment.trim(),
-					onClick: () => commitAnnotation(comment),
+					onClick: () => finishComment(true),
 					children: t("toolbar.addComment")
 				})]
 			})]
 		}) : null,
-		status ? (0, react_jsx_runtime.jsx)("div", {
+		status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: styles.status,
 			style: toolbarStyle,
 			role: "status",
 			children: status
 		}) : null
-	] }), document.body);
+	] }), active.layer.host);
 }
 //#endregion
 //#region src/client/dom/decorateAnnotationDirectives.ts
@@ -3196,11 +3424,11 @@ function TranscriptQuoteCard({ node }) {
 		scrollToAnnotation(index + 1, text, markIdOf(index));
 	}, [markIdOf]);
 	if (quotes.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
 		className: styles.tCardStack,
 		"data-dsq-deco": "true",
-		children: quotes.map((quote, index) => (0, react_jsx_runtime.jsx)("div", {
+		children: quotes.map((quote, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cx(A.plain, styles.tCardButton),
 			role: "button",
 			tabIndex: 0,
@@ -3211,7 +3439,7 @@ function TranscriptQuoteCard({ node }) {
 				event.preventDefault();
 				onSelect(index, quote.text);
 			},
-			children: (0, react_jsx_runtime.jsx)(AnnotationCardView, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationCardView, {
 				variant: "transcript",
 				title: quote.title,
 				text: quote.text,
@@ -3258,12 +3486,12 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 	const quotes = scanned.annotations;
 	const images = contentImages(node.data?.content);
 	if (!text && images.length === 0 && quotes.length === 0) return null;
-	return (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cx(A.colEnd, styles.userRow),
-		children: (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cx(A.colEnd, styles.userStack),
 			children: [
-				images.length > 0 && renderMessageImages !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
+				images.length > 0 && renderMessageImages !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cx(A.colEnd, styles.userImages),
 					"data-message-attachments": true,
 					children: renderMessageImages({
@@ -3271,12 +3499,12 @@ function UserMessageDisplay({ node, renderMessageImages }) {
 						align: "end",
 						compact: images.length > 1
 					})
-				}, "images") : null,
-				quotes.length > 0 ? (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }, "quotes") : null,
-				text ? (0, react_jsx_runtime.jsx)("div", {
+				}) : null,
+				quotes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }) : null,
+				text ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: styles.userBubble,
 					children: text
-				}, "bubble") : null
+				}) : null
 			]
 		})
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-select-quote",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "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",