dsh-select-quote 0.3.6 → 0.3.8

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。
+
+   摘要块（composer 与历史消息）在内容普通流里，不参与这套层带；悬停面板仍是
+   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;
@@ -275,78 +334,8 @@ ${atomRules}
   pointer-events: auto;
 }
 
-/* One annotation card, shared by the composer and the transcript: the base
-   carries the shape, and \`.dsq_tCard\` / \`.dsq_tCardIcon\` override only the
-   numbers where the transcript really differs.
-   Geometry mirrors the product's own file card (\`.nyYjTG_file\` in
-   ui-deliverables): hairline border, neutral fill, 18px radius, fixed 72px row. */
-.dsq_card {
-  --dsq-card-fill: var(--dsq-neutral-50);
-  --dsq-card-hover: var(--dsq-neutral-100);
-  flex: 0 0 auto;
-  gap: 10px;
-  width: fit-content;
-  max-width: calc(25% - 5px);
-  min-width: 0;
-  height: 64px;
-  margin: 0;
-  padding: 10px;
-  border: 0.5px solid var(--dsq-line);
-  border-radius: 18px;
-  background: var(--dsq-card-fill);
-  color: var(--dsq-label);
-  transition: background-color 0.12s;
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-  pointer-events: auto;
-}
-
-.dsq_card:hover {
-  background: var(--dsq-card-hover);
-}
-
-/* Scaled down from the reference 48px: the composer card is width-capped at a
-   quarter of the input, so 48px would leave no room for the quote text. */
-.dsq_cardIcon {
-  z-index: 2;
-  width: 36px;
-  height: 36px;
-  border: 0.5px solid var(--dsq-line);
-  border-radius: 12px;
-  background: var(--dsq-card-fill);
-  color: var(--dsq-link);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.dsq_cardBody {
-  z-index: 2;
-  justify-content: center;
-  gap: 2px;
-}
-
-/* Keeps the ellipsised title clear of the corner remove button, which only the
-   composer stack renders. */
-.dsq_cardStack .dsq_cardBody {
-  padding-right: 14px;
-}
-
-.dsq_cardTitle {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-  color: var(--dsq-label);
-}
-
-.dsq_cardSubtitle {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsq-label-3);
-}
-
-/* Corner remove button: hidden until the card is hovered or focused. */
+/* Corner remove-all button on the summary block: hidden until the block is
+   hovered or focused. */
 .dsq_cardClose {
   position: absolute;
   top: 4px;
@@ -363,8 +352,6 @@ ${atomRules}
   transition: opacity 0.12s, background-color 0.12s;
 }
 
-.dsq_card:hover .dsq_cardClose,
-.dsq_card:focus-within .dsq_cardClose,
 .dsq_summary:hover .dsq_cardClose,
 .dsq_summary:focus-within .dsq_cardClose {
   opacity: 1;
@@ -376,37 +363,10 @@ ${atomRules}
   color: var(--dsq-label);
 }
 
-/* Secondary corner action (edit comment). */
-.dsq_cardAction {
-  position: absolute;
-  top: 4px;
-  right: 28px;
-  z-index: 3;
-  width: 20px;
-  height: 20px;
-  border-radius: 6px;
-  color: var(--dsq-label-3);
-  font-size: 12px;
-  line-height: 1;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s, background-color 0.12s;
-}
-
-.dsq_card:hover .dsq_cardAction,
-.dsq_card:focus-within .dsq_cardAction {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.dsq_cardAction:hover {
-  background: var(--dsq-fill-hover);
-}
-
 /* 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 +410,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 +631,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 {
@@ -707,98 +671,19 @@ ${atomRules}
   gap: 6px;
 }
 
-/* Transcript cards — in-flow rows under the user bubble, side by side. */
-.dsq_tCardStack {
+/* Transcript summary — the same block as the composer's, right-aligned under
+   the user bubble. One block per message; the hover list carries every
+   annotation with its selected text and comment. */
+.dsq_tSummary {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   justify-content: flex-end;
-  align-items: stretch;
-  gap: 6px;
   margin: 4px 0 8px;
-  /* Cards lay out horizontally and wrap onto the next row when they run out of
-     width. Each card carries the selected text plus the user's comment, so they
-     stay compact and stay on the user-bubble side (right). */
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: 0;
 }
 
-/* Transcript-only differences from the shared card. Unlike the composer
-   summary (one collapsed row per message) each history card shows its own
-   comment, so the fixed height and single-line clamps are lifted on \`.dsq_tCardButton\`. */
-.dsq_tCard {
+.dsq_tSummary .dsq_summary {
+  width: auto;
+  min-width: 220px;
   max-width: min(calc(var(--dsq-chat-width) * 0.72), 520px);
-  margin-left: auto;
-}
-
-.dsq_tCardIcon {
-  width: 40px;
-  height: 40px;
-  font-size: 14px;
-}
-
-.dsq_tCardButton {
-  /* Compact cards: several fit in one row before wrapping. */
-  display: block;
-  flex: 0 1 auto;
-  width: 230px;
-  max-width: 100%;
-  padding: 0;
-  font: inherit;
-  text-align: left;
-  border-radius: 14px;
-}
-
-.dsq_tCardButton:focus-visible {
-  outline: 2px solid var(--dsq-accent);
-  outline-offset: 2px;
-}
-
-.dsq_tCardButton .dsq_card {
-  height: auto;
-  min-height: 0;
-  align-items: flex-start;
-  width: 100%;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 14px;
-}
-
-.dsq_tCardButton .dsq_cardIcon {
-  width: 22px;
-  height: 22px;
-  border-radius: 8px;
-  font-size: 11px;
-}
-
-.dsq_tCardButton .dsq_cardTitle {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.dsq_tCardButton .dsq_cardSubtitle {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  margin-top: 2px;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-/* A comment is the user's own words — give it more presence than the neutral
-   "no comment" placeholder. */
-.dsq_cardSubtitle[data-dsq-has-comment='true'] {
-  color: var(--dsq-label-2);
 }
 
 /* Replacement user bubble (quote block stripped from display). */
@@ -829,6 +714,12 @@ ${atomRules}
   max-width: 100%;
 }
 
+.dsq_userImages img {
+  display: block;
+  max-width: 100%;
+  border-radius: 12px;
+}
+
 /* Model-written :dsh-annotation{index="N"} chips. */
 .dsq_annDirective {
   appearance: none;
@@ -849,6 +740,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 +754,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 +776,7 @@ ${atomRules}
   font-size: 10px;
   font-weight: 600;
   line-height: 1;
-  vertical-align: super;
+  pointer-events: none;
 }
 
 .dsq_annMark:hover {
@@ -903,13 +802,7 @@ ${atomRules}
 }
 
 /* The product flips its palette on body[data-ds-dark-theme], and every
-   --dsq-* alias follows it. Only values we own ourselves need restating — the
-   transcript card carries .dsq_card too, so one selector covers both. */
-body[data-ds-dark-theme] .dsq_card {
-  --dsq-card-fill: var(--dsq-neutral-850);
-  --dsq-card-hover: var(--dsq-neutral-800);
-}
-
+   --dsq-* alias follows it. Only values we own ourselves need restating. */
 body[data-ds-dark-theme] .dsq_annMark {
   --dsq-mark-tint: var(--dsq-accent-tint-dark);
 }
@@ -938,14 +831,8 @@ const styles = {
 	divider: "dsq_divider",
 	status: "dsq_status",
 	cardStack: "dsq_cardStack",
-	card: "dsq_card",
-	cardIcon: "dsq_cardIcon",
-	cardBody: "dsq_cardBody",
-	cardTitle: "dsq_cardTitle",
-	cardSubtitle: "dsq_cardSubtitle",
 	cardClose: "dsq_cardClose",
 	cardPad: "dsq_cardPad",
-	cardAction: "dsq_cardAction",
 	summary: "dsq_summary",
 	summaryIcon: "dsq_summaryIcon",
 	summaryBody: "dsq_summaryBody",
@@ -977,10 +864,7 @@ const styles = {
 	commentPop: "dsq_commentPop",
 	commentInput: "dsq_commentInput",
 	commentActions: "dsq_commentActions",
-	tCardStack: "dsq_tCardStack",
-	tCardButton: "dsq_tCardButton",
-	tCard: "dsq_tCard",
-	tCardIcon: "dsq_tCardIcon",
+	tSummary: "dsq_tSummary",
 	userRow: "dsq_userRow",
 	userStack: "dsq_userStack",
 	userImages: "dsq_userImages",
@@ -1163,6 +1047,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 +1062,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;
@@ -1517,47 +1404,80 @@ function stripProtocolHeader(prefix) {
 	if (prefix.indexOf("# Response annotations:") >= 0) return "";
 	return prefix.replace(/\s+$/, "");
 }
+function blockParts(text) {
+	const open = text.indexOf(ANNOTATIONS_BLOCK_OPEN);
+	if (open < 0) return null;
+	const close = text.indexOf(ANNOTATIONS_BLOCK_CLOSE, open + 22);
+	if (close < 0) return null;
+	return {
+		before: stripProtocolHeader(text.slice(0, open)),
+		after: text.slice(close + 23).replace(/^\s+/, ""),
+		json: text.slice(open + 22, close).trim()
+	};
+}
+function joinedRest(parts) {
+	return [parts.before, parts.after].filter((part) => part.length > 0).join("\n\n").trim();
+}
+/** Wire payload as an array; null when the block is not valid JSON. */
+function parseWire(parts) {
+	let parsed;
+	try {
+		parsed = JSON.parse(parts.json);
+	} catch {
+		return null;
+	}
+	return Array.isArray(parsed) ? parsed : null;
+}
+/** Every source an item carries; falls back to the selected text itself. */
+function sourcesOf(record, body) {
+	const single = record.source;
+	if (single !== null && typeof single === "object" && typeof single.text === "string") return [single];
+	if (Array.isArray(record.sources)) {
+		const list = record.sources.filter((item) => item !== null && typeof item === "object" && typeof item.text === "string");
+		if (list.length > 0) return list;
+	}
+	return [{ text: body }];
+}
+/** One usable wire item; null for entries without a selected text. */
+function wireBody(entry) {
+	if (entry === null || typeof entry !== "object") return null;
+	const record = entry;
+	const body = typeof record.text === "string" ? record.text.trim() : "";
+	if (!body) return null;
+	return {
+		body,
+		comment: typeof record.annotation === "string" ? record.annotation : "",
+		sources: sourcesOf(record, body)
+	};
+}
 /**
 * Read plugin annotations out of a durable message. Tolerates the JSON block
 * and strips it from `rest` so the bubble can show only the user's question.
 */
 function scanAnnotatedMessage(text) {
-	const open = text.indexOf(ANNOTATIONS_BLOCK_OPEN);
-	const close = text.indexOf(ANNOTATIONS_BLOCK_CLOSE);
-	if (open < 0 || close < 0 || close < open) return {
+	const parts = blockParts(text);
+	if (parts === null) return {
 		annotations: [],
 		rest: text
 	};
-	const jsonStart = open + 22;
-	const jsonText = text.slice(jsonStart, close).trim();
-	const rest = [stripProtocolHeader(text.slice(0, open)), text.slice(close + 23).replace(/^\s+/, "")].filter((part) => part.length > 0).join("\n\n").trim();
-	let parsed;
-	try {
-		parsed = JSON.parse(jsonText);
-	} catch {
-		return {
-			annotations: [],
-			rest: text.replace(/^\s+/, "")
-		};
-	}
-	if (!Array.isArray(parsed)) return {
+	const parsed = parseWire(parts);
+	if (parsed === null) return {
 		annotations: [],
-		rest
+		rest: text.replace(/^\s+/, "")
 	};
+	const rest = joinedRest(parts);
 	const annotations = [];
 	for (const entry of parsed) {
-		if (!entry || typeof entry !== "object") continue;
-		const record = entry;
-		const body = typeof record.text === "string" ? record.text.trim() : "";
-		if (!body) continue;
-		const source = record.source && typeof record.source === "object" ? record.source : Array.isArray(record.sources) ? record.sources.find((item) => item && typeof item === "object") : void 0;
+		const item = wireBody(entry);
+		if (item === null) continue;
+		const source = item.sources[0];
 		const messageId = typeof source?.messageId === "string" ? source.messageId : void 0;
 		const startOffset = typeof source?.startOffset === "number" ? source.startOffset : void 0;
 		const endOffset = typeof source?.endOffset === "number" ? source.endOffset : void 0;
 		annotations.push({
-			title: previewTitle(body),
-			text: body,
-			comment: typeof record.annotation === "string" ? record.annotation : "",
+			title: previewTitle(item.body),
+			text: item.body,
+			comment: item.comment,
 			...messageId ? { messageId } : {},
 			...startOffset !== void 0 ? { startOffset } : {},
 			...endOffset !== void 0 ? { endOffset } : {}
@@ -1568,6 +1488,33 @@ function scanAnnotatedMessage(text) {
 		rest
 	};
 }
+/**
+* Inverse of `composeAnnotatedMessage` for text that is about to live in the
+* composer: dsh-rewind refills a withdrawn message verbatim, protocol block
+* included. Returns the pending annotations and the user's own text, or null
+* when `text` carries no complete, valid block — a draft that merely mentions
+* the markers must never be edited away.
+*/
+function readComposedDraft(text) {
+	const parts = blockParts(text);
+	if (parts === null) return null;
+	const parsed = parseWire(parts);
+	if (parsed === null || parsed.length === 0) return null;
+	const annotations = [];
+	for (const entry of parsed) {
+		const item = wireBody(entry);
+		if (item !== null) annotations.push({
+			text: item.body,
+			comment: item.comment,
+			sources: item.sources
+		});
+	}
+	if (annotations.length === 0) return null;
+	return {
+		annotations,
+		rest: joinedRest(parts)
+	};
+}
 //#endregion
 //#region src/client/runtime.ts
 /**
@@ -1615,6 +1562,9 @@ function persist(partitionKey) {
 	if (!persistence || partitionKey === MEMORY_KEY) return;
 	persistence.save(partitionKey, bySession.get(partitionKey) ?? EMPTY$1);
 }
+function newAnnotationId() {
+	return `ann_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
 /** Append one selection; an identical text+comment pair is reused. */
 function saveAnnotation(sessionId, input) {
 	const k = partition(sessionId);
@@ -1623,7 +1573,7 @@ function saveAnnotation(sessionId, input) {
 	const duplicate = current.find((item) => item.text === input.text && (item.comment ?? "") === comment);
 	if (duplicate) return duplicate;
 	const annotation = {
-		id: `ann_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+		id: newAnnotationId(),
 		text: input.text,
 		...comment ? { comment } : {},
 		sources: input.sources?.length ? input.sources : [{ text: input.text }]
@@ -1633,6 +1583,36 @@ function saveAnnotation(sessionId, input) {
 	notify();
 	return annotation;
 }
+/**
+* Re-adopt annotations lifted out of a composed message.
+*
+* dsh-rewind puts a withdrawn message back into the composer verbatim, so the
+* protocol block arrives there too; the composer half parses it and hands the
+* items here. Same text+comment pairs already pending win, so a repeated
+* restore never duplicates a card. Returns how many items were added.
+*/
+function restoreAnnotations(sessionId, items) {
+	const k = partition(sessionId);
+	const current = bySession.get(k) ?? EMPTY$1;
+	const next = [...current];
+	for (const item of items) {
+		const text = item.text.trim();
+		if (!text) continue;
+		const comment = item.comment?.trim() ?? "";
+		if (next.some((entry) => entry.text === text && (entry.comment ?? "") === comment)) continue;
+		next.push({
+			id: newAnnotationId(),
+			text,
+			...comment ? { comment } : {},
+			sources: item.sources.length > 0 ? item.sources : [{ text }]
+		});
+	}
+	if (next.length === current.length) return 0;
+	bySession.set(k, next);
+	persist(k);
+	notify();
+	return next.length - current.length;
+}
 function getAnnotations(sessionId) {
 	return bySession.get(partition(sessionId)) ?? EMPTY$1;
 }
@@ -1715,20 +1695,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 +1730,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,
@@ -1856,11 +1794,6 @@ const zh = {
 	"toolbar.commentDialogAria": "添加可选评论",
 	"toolbar.skipComment": "暂不评论",
 	"toolbar.addComment": "添加评论",
-	"card.commentSubtitle": "评论 · {comment}",
-	"card.ariaIndexed": "批注 {index}",
-	"card.ariaPlain": "划词批注",
-	"card.editComment": "编辑评论",
-	"card.remove": "移除批注",
 	"summary.hint": "悬停查看批注",
 	"summary.dialogAria": "{count} 条划词批注详情",
 	"summary.edit": "编辑批注 {index}",
@@ -1886,11 +1819,6 @@ const en = {
 	"toolbar.commentDialogAria": "Add an optional comment",
 	"toolbar.skipComment": "Skip comment",
 	"toolbar.addComment": "Add comment",
-	"card.commentSubtitle": "Comment · {comment}",
-	"card.ariaIndexed": "Annotation {index}",
-	"card.ariaPlain": "Selection annotation",
-	"card.editComment": "Edit comment",
-	"card.remove": "Remove annotation",
 	"summary.hint": "Hover to view annotations",
 	"summary.dialogAria": "Annotation details: {count}",
 	"summary.edit": "Edit annotation {index}",
@@ -1923,11 +1851,6 @@ const ru = {
 	"toolbar.commentDialogAria": "Добавить необязательный комментарий",
 	"toolbar.skipComment": "Без комментария",
 	"toolbar.addComment": "Добавить комментарий",
-	"card.commentSubtitle": "Комментарий · {comment}",
-	"card.ariaIndexed": "Аннотация {index}",
-	"card.ariaPlain": "Аннотация к выделенному тексту",
-	"card.editComment": "Изменить комментарий",
-	"card.remove": "Удалить аннотацию",
 	"summary.hint": "Наведите, чтобы увидеть аннотации",
 	"summary.dialogAria": "Детали аннотаций: {count}",
 	"summary.edit": "Изменить аннотацию {index}",
@@ -2025,52 +1948,6 @@ function useLocale() {
 }
 //#endregion
 //#region src/client/ui/AnnotationCardView.tsx
-function AnnotationCardView({ title, text, comment, variant, index, onRemove, onEditComment }) {
-	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", {
-		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", {
-				className: cx(A.keep, A.gridMid, styles.cardIcon, !composer && styles.tCardIcon),
-				"aria-hidden": true,
-				children: index ? String(index) : "AI"
-			}),
-			(0, react_jsx_runtime.jsxs)("div", {
-				className: cx(A.grow, A.col, styles.cardBody),
-				children: [(0, react_jsx_runtime.jsx)("div", {
-					className: cx(A.ell, styles.cardTitle),
-					title: text,
-					children: title
-				}), (0, react_jsx_runtime.jsx)("div", {
-					className: cx(A.ell, styles.cardSubtitle),
-					...comment ? {
-						title: comment,
-						"data-dsq-has-comment": "true"
-					} : {},
-					children: subtitle
-				})]
-			}),
-			composer && onEditComment ? (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", {
-				type: "button",
-				className: cx(A.plain, A.gridMid, styles.cardClose),
-				"aria-label": t("card.remove"),
-				onClick: onRemove,
-				children: "×"
-			}) : null
-		]
-	});
-}
 /** Grace period so pointer transit between the summary and the panel never closes it. */
 const CLOSE_DELAY = 320;
 /** After a viewport change, wait this long before position-checking the pointer. */
@@ -2239,62 +2116,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 +2189,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 +2204,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 +2214,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 +2234,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 +2247,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
 				})
@@ -2432,12 +2309,13 @@ function clearDraftMarker(draft, setDraft) {
 * composer, or the primary send button) so the composer's submit path carries
 * the JSON protocol block.
 */
-function useSendIntercept({ itemCount, draftRef, setDraft, onFolded }) {
+function useSendIntercept({ itemCount, draftRef, setDraft, onFolded, foldingRef }) {
 	(0, react.useEffect)(() => {
 		if (itemCount === 0) return;
 		const inject = () => {
 			const current = getAnnotations();
 			if (current.length === 0) return;
+			if (foldingRef !== void 0) foldingRef.current = true;
 			setDraft(composeAnnotatedMessage(draftRef.current, current));
 			clearAnnotations();
 			onFolded();
@@ -2473,7 +2351,8 @@ function useSendIntercept({ itemCount, draftRef, setDraft, onFolded }) {
 		itemCount,
 		draftRef,
 		setDraft,
-		onFolded
+		onFolded,
+		foldingRef
 	]);
 }
 //#endregion
@@ -2518,6 +2397,7 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 	const draftRef = (0, react.useRef)(draft);
 	const actionsRef = (0, react.useRef)(inputActions);
 	const sessionRef = (0, react.useRef)(sessionId);
+	const foldingRef = (0, react.useRef)(false);
 	const composing = useComposing();
 	draftRef.current = draft;
 	actionsRef.current = inputActions;
@@ -2563,8 +2443,26 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 		itemCount: items.length,
 		draftRef,
 		setDraft,
-		onFolded: () => setItems(EMPTY)
+		onFolded: () => setItems(EMPTY),
+		foldingRef
 	});
+	(0, react.useLayoutEffect)(() => {
+		if (!draft.includes("<response-annotations>")) {
+			foldingRef.current = false;
+			return;
+		}
+		if (foldingRef.current || composing.current) return;
+		const restored = readComposedDraft(draft);
+		if (restored === null) return;
+		foldingRef.current = true;
+		restoreAnnotations(sessionId, restored.annotations);
+		setDraft(restored.rest);
+	}, [
+		draft,
+		sessionId,
+		setDraft,
+		composing
+	]);
 	(0, react.useEffect)(() => {
 		if (composing.current) return;
 		if (items.length === 0) {
@@ -2605,10 +2503,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 +2524,138 @@ 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;
+/**
+* Top edge of the composer seat, in viewport coordinates.
+*
+* In the desktop (overlay) layout the composer is `position: sticky` over the
+* scroller and stacks above this layer (z 7 vs 6), so the scroller's own box
+* extends **behind** it. Placement that stops at the scroller box therefore
+* parks popovers under the input box — the bottom edge must be the composer.
+* In the regular layout the seat sits below the scroller, so it changes nothing.
+*/
+function composerTop() {
+	if (typeof document === "undefined") return null;
+	const seat = document.querySelector("[data-composer-seat]") ?? document.querySelector("[data-composer-card]");
+	if (seat === null) return null;
+	return seat.getBoundingClientRect().top;
+}
+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();
+			const top = rect.top + scroller.clientTop;
+			const rawBottom = top + scroller.clientHeight;
+			const cover = composerTop();
+			const bottom = cover !== null && cover > top && cover < rawBottom ? cover : rawBottom;
+			return new DOMRect(rect.left + scroller.clientLeft, top, scroller.clientWidth, Math.max(0, bottom - top));
+		},
+		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: () => {
+			const bottom = composerTop() ?? window.innerHeight;
+			return new DOMRect(0, 0, window.innerWidth, Math.max(0, bottom));
+		},
+		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 +2696,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 +2731,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 +2825,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 +2900,7 @@ function SelectionToolbar({ sessionId }) {
 			if (inToolbar || inComment) return;
 			dragging = true;
 			if (phaseRef.current === "comment") {
+				flushComment();
 				hide();
 				return;
 			}
@@ -2834,7 +2922,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 +2938,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 +2966,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 +3031,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 +3060,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 +3136,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 +3151,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
@@ -3161,16 +3277,82 @@ function watchAnnotationDirectives(root) {
 	return () => observer.disconnect();
 }
 //#endregion
+//#region src/client/dom/stripSubmissionEcho.ts
+/**
+* Strip the annotation protocol from the host's local submission echo.
+*
+* On submit the host paints an optimistic bubble (`[data-submission-echo]`)
+* from the composer draft — which, at that instant, is the protocol block the
+* send gesture just folded in. That echo is rendered by the chat flow itself,
+* not by a `conversation.chat.node` registration, so `UserMessageDisplay`
+* never sees it; with a slow model the raw JSON sits on screen until the
+* durable `user/message` event arrives.
+*
+* The durable message keeps the block (the model needs it). This is display
+* only: the echo's plain text run is rewritten to the user's own text. Any
+* other DOM shape (text split by session chips, a truncated block) is left
+* untouched rather than rebuilt, so nothing but our own protocol is edited.
+*/
+const ECHO_SELECTOR = "[data-submission-echo]";
+const STRIPPED_ATTR = "data-dsq-echo-stripped";
+/** The deepest run that carries both markers, or null. */
+function protocolRun(row) {
+	for (const el of row.querySelectorAll("*")) {
+		if (el.children.length > 0) continue;
+		const text = el.textContent ?? "";
+		if (text.includes("<response-annotations>") && text.includes("</response-annotations>")) return el;
+	}
+	return null;
+}
+function strip(row) {
+	if (row.hasAttribute(STRIPPED_ATTR)) return;
+	const run = protocolRun(row);
+	if (run === null) return;
+	const scan = scanAnnotatedMessage(run.textContent ?? "");
+	if (scan.annotations.length === 0) return;
+	run.textContent = scan.rest;
+	row.setAttribute(STRIPPED_ATTR, "");
+}
+/**
+* Watch for local submission echoes and rewrite the protocol block out of
+* them. Runs once immediately, then on every DOM insertion.
+*/
+function watchSubmissionEcho(root) {
+	const scope = root ?? (typeof document === "undefined" ? void 0 : document.body);
+	if (!scope) return () => {};
+	const sweep = () => {
+		for (const row of scope.querySelectorAll(ECHO_SELECTOR)) strip(row);
+	};
+	sweep();
+	if (typeof MutationObserver === "undefined") return () => {};
+	let frame = 0;
+	const observer = new MutationObserver(() => {
+		if (frame !== 0) return;
+		frame = window.requestAnimationFrame(() => {
+			frame = 0;
+			sweep();
+		});
+	});
+	observer.observe(scope, {
+		childList: true,
+		subtree: true
+	});
+	return () => {
+		observer.disconnect();
+		if (frame !== 0) window.cancelAnimationFrame(frame);
+	};
+}
+//#endregion
 //#region src/client/transcript/TranscriptQuoteCard.tsx
 /**
-* History-side cards for one user message's annotations.
+* History-side summary for one user message's annotations.
 *
-* One card per annotation, each showing the selected text **and** the user's
-* comment. The comment is how the user recognizes their own annotation, so it
-* belongs on the visible card — not behind a hover panel that has to be
-* discovered. Clicking a card scrolls back to the marked text in the source
-* message; the ordinal badge matches the `:dsh-annotation{index="N"}` the model
-* refers to.
+* One block per message, not one card per annotation: the block carries the
+* count and the hover list shows every annotation with its selected text and
+* comment. That is the same shape the composer uses for pending selections, so
+* a message reads the same before and after it is sent. Clicking an item
+* scrolls back to the marked text in the source message; the ordinal badge
+* matches the `:dsh-annotation{index="N"}` the model refers to.
 */
 function TranscriptQuoteCard({ node }) {
 	ensureToolbarStyles();
@@ -3192,94 +3374,126 @@ function TranscriptQuoteCard({ node }) {
 		const ownerKey = stackRef.current?.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key");
 		return ownerKey ? `dqsm_${ownerKey}_${index}` : void 0;
 	}, []);
-	const onSelect = (0, react.useCallback)((index, text) => {
-		scrollToAnnotation(index + 1, text, markIdOf(index));
-	}, [markIdOf]);
+	const onSelect = (0, react.useCallback)((index, _item) => {
+		const quote = quotes[index];
+		if (quote === void 0) return;
+		scrollToAnnotation(index + 1, quote.text, markIdOf(index));
+	}, [markIdOf, quotes]);
 	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,
+		className: styles.tSummary,
 		"data-dsq-deco": "true",
-		children: quotes.map((quote, index) => (0, react_jsx_runtime.jsx)("div", {
-			className: cx(A.plain, styles.tCardButton),
-			role: "button",
-			tabIndex: 0,
-			"aria-label": quote.title,
-			onClick: () => onSelect(index, quote.text),
-			onKeyDown: (event) => {
-				if (event.key !== "Enter" && event.key !== " ") return;
-				event.preventDefault();
-				onSelect(index, quote.text);
-			},
-			children: (0, react_jsx_runtime.jsx)(AnnotationCardView, {
-				variant: "transcript",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationSummary, {
+			count: quotes.length,
+			items: quotes.map((quote, index) => ({
+				id: `dqsm-${index}`,
 				title: quote.title,
 				text: quote.text,
-				comment: quote.comment || void 0,
-				index: index + 1
-			})
-		}, `ann-${index}`))
+				...quote.comment ? { comment: quote.comment } : {}
+			})),
+			onItemSelect: onSelect
+		})
 	});
 }
 //#endregion
 //#region src/client/transcript/UserMessageDisplay.tsx
-function contentImages(content) {
-	if (!Array.isArray(content)) return [];
+function isTextBlock(block) {
+	if (block === null || typeof block !== "object") return false;
+	const candidate = block;
+	if ((candidate.type === "image" || candidate.type === "file") && candidate.attachment !== void 0) return false;
+	return candidate.type === "text" || typeof candidate.text === "string";
+}
+/**
+* Replace all text blocks with one stripped text block, keeping attachments and
+* unknown blocks in place. The host's `contentParts` joins text blocks and
+* lifts attachments out anyway, so one text block is the same message content
+* with the protocol block gone.
+*/
+function strippedContent(raw, text) {
+	const rest = Array.isArray(raw) ? raw.filter((block) => !isTextBlock(block)) : [];
+	if (text) rest.unshift({
+		type: "text",
+		text
+	});
+	return rest;
+}
+/** Image attachments for the factory-less fallback bubble. */
+function imageAttachments(raw) {
+	if (!Array.isArray(raw)) return [];
 	const images = [];
-	for (const block of content) {
+	for (const block of raw) {
 		if (block === null || typeof block !== "object") continue;
 		const candidate = block;
-		if (candidate.type !== "image" || candidate.attachment === void 0) continue;
-		images.push({ attachment: candidate.attachment });
+		if (candidate.type === "image" && candidate.attachment !== void 0) images.push(candidate.attachment);
 	}
 	return images;
 }
 /**
 * Replacement for the built-in `user` Chat node view.
 *
-* Strips the `<response-annotations>` protocol block from the bubble **and**
-* renders one card per annotation right above it — the same order the composer
-* shows them in, so the sent message reads like the draft did.
+* It does **not** redraw the bubble or its actions row. It resolves the host's
+* own `UserMessageNodeView` from `ctx.slots.entries('conversation.chat.node')`
+* and renders that component with a rewritten `node`: the annotation protocol
+* block is removed from the text blocks, everything else (attachments, file
+* cards, reference labels, time, copy, and any plugin that portals into the
+* actions row, e.g. dsh-rewind's ↶) stays host-owned and follows host changes.
+* The annotation cards are the only extra DOM, prepended above the host row.
 *
-* Why the cards live here instead of on a `select-quote` Chat node:
-* `conversation.chat.node` is gated by the shipped `TURN_PROCESS_INDEPENDENT_KINDS`
-* allowlist (system-prompt, user, steering, turn-trigger, turn-process,
-* turn-error, turn-max-tokens, turn-tail). A node whose kind is not on that list
-* is classified as a turn-process member and `hidden` inside the collapsed
-* process disclosure of a completed turn — mounted, then invisible. `user` is on
-* the list, so rendering the cards inside this component is the only placement
-* that survives turn folding.
+* Cards must live inside the `user` node view rather than on a
+* `select-quote` Chat node: `conversation.chat.node` is gated by the shipped
+* `TURN_PROCESS_INDEPENDENT_KINDS` allowlist (system-prompt, user, steering,
+* turn-trigger, turn-process, turn-error, turn-max-tokens, turn-tail), and any
+* other kind is `hidden` when the completed turn's process disclosure folds.
 */
-function UserMessageDisplay({ node, renderMessageImages }) {
+function UserMessageDisplay(props) {
 	ensureToolbarStyles();
+	const { node, hostUserOf, ...rest } = props;
 	const raw = contentBlocksToText(node.data?.content);
 	const scanned = scanAnnotatedMessage(raw);
 	const text = scanned.annotations.length > 0 ? scanned.rest : displayTextWithoutQuote(raw).trim();
 	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", {
+	const rewritten = quotes.length > 0 || text !== raw.trim();
+	const displayNode = (0, react.useMemo)(() => rewritten ? {
+		...node,
+		data: {
+			...node.data,
+			content: strippedContent(node.data?.content, text)
+		}
+	} : node, [
+		node,
+		rewritten,
+		text
+	]);
+	const cards = quotes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }) : null;
+	const Host = hostUserOf?.();
+	if (Host !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [cards, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Host, {
+		...rest,
+		node: displayNode
+	})] });
+	const images = imageAttachments(node.data?.content);
+	const loadImage = props.loadImage;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [cards, /* @__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", {
-					className: cx(A.colEnd, styles.userImages),
-					"data-message-attachments": true,
-					children: renderMessageImages({
-						images,
-						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", {
-					className: styles.userBubble,
-					children: text
-				}, "bubble") : null
-			]
+			"data-dsq-fallback-content": "true",
+			children: [images.length > 0 && loadImage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cx(A.colEnd, styles.userImages),
+				"data-message-attachments": true,
+				children: images.map((attachment, index) => {
+					const url = loadImage(attachment);
+					return url === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: url,
+						alt: ""
+					}, `image-${index}`);
+				})
+			}) : null, text ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.userBubble,
+				children: text
+			}) : null]
 		})
-	});
+	})] });
 }
 //#endregion
 //#region src/client/state/annotation-persistence.ts
@@ -3473,6 +3687,7 @@ function apply(ctx) {
 	ctx.effect(() => subscribeLocale(() => refreshDirectiveChips()), "dsh-select-quote: chip language");
 	ctx.effect(() => watchAnnotationDirectives(), "dsh-select-quote: annotation directives");
 	ctx.effect(() => watchAnnotationMarks(), "dsh-select-quote: annotation marks");
+	ctx.effect(() => watchSubmissionEcho(), "dsh-select-quote: submission echo");
 	ctx.effect(() => {
 		syncPendingAnnotationJobs(getAnnotations());
 		return subscribeAnnotations(() => syncPendingAnnotationJobs(getAnnotations()));
@@ -3504,14 +3719,28 @@ function apply(ctx) {
 			order: 1
 		}, SessionBridge);
 	});
+	const hostUserOf = () => {
+		const candidates = (typeof ctx.slots.entries === "function" ? ctx.slots.entries("conversation.chat.node") : []).filter((entry) => entry.options?.key === "user" && entry.options?.priority !== -10);
+		return (candidates.find((entry) => componentName(entry.component) === "UserMessageNodeView") ?? candidates[0])?.component;
+	};
+	const UserNode = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMessageDisplay, {
+		...props,
+		hostUserOf
+	});
 	ctx.slots.inject("conversation.chat.node", () => {
 		ctx.slots.register({
 			name: "conversation.chat.node",
 			key: "user",
-			priority: -10
-		}, UserMessageDisplay);
+			priority: -10,
+			locale: "chat"
+		}, UserNode);
 	});
 }
+/** Component name across memo/forwardRef/plain function shapes. */
+function componentName(component) {
+	const candidate = component;
+	return candidate?.type?.name ?? candidate?.name ?? candidate?.displayName;
+}
 /** Invisible session-scoped bridge that publishes sessionId for the root toolbar. */
 function SessionBridge({ sessionId }) {
 	bindAnnotationSession(sessionId);