dsh-select-quote 0.3.7 → 0.3.8

package/lib/client.js

@@ -223,8 +223,8 @@ ${atomRules}
      内容里吸顶元素的 6（同 z 时 host 追加在滚动容器末尾，DOM 次序压过它们）。
    host 内部次序：status 3 > toolbar 2 > commentPop 1。
 
-   摘要行与批注卡片在内容普通流里，不参与这套层带；悬停面板仍是 body 级 fixed
-   （原因见 AnnotationCardView 里 contain:layout 的说明）。 */
+   摘要块（composer 与历史消息）在内容普通流里，不参与这套层带；悬停面板仍是
+   body 级 fixed（原因见 AnnotationCardView 里 contain:layout 的说明）。 */
 
 .dsq_toolbar {
   position: absolute;
@@ -334,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;
@@ -422,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;
@@ -435,33 +363,6 @@ ${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;
@@ -770,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). */
@@ -892,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;
@@ -974,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);
 }
@@ -1009,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",
@@ -1048,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",
@@ -1591,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 } : {}
@@ -1642,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
 /**
@@ -1689,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);
@@ -1697,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 }]
@@ -1707,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;
 }
@@ -1888,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}",
@@ -1918,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}",
@@ -1955,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}",
@@ -2057,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 /* @__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: [
-			/* @__PURE__ */ (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"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cx(A.grow, A.col, styles.cardBody),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cx(A.ell, styles.cardTitle),
-					title: text,
-					children: title
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cx(A.ell, styles.cardSubtitle),
-					...comment ? {
-						title: comment,
-						"data-dsq-has-comment": "true"
-					} : {},
-					children: subtitle
-				})]
-			}),
-			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 ? /* @__PURE__ */ (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. */
@@ -2464,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();
@@ -2505,7 +2351,8 @@ function useSendIntercept({ itemCount, draftRef, setDraft, onFolded }) {
 		itemCount,
 		draftRef,
 		setDraft,
-		onFolded
+		onFolded,
+		foldingRef
 	]);
 }
 //#endregion
@@ -2550,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;
@@ -2595,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) {
@@ -2683,6 +2549,21 @@ 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 {
@@ -2706,7 +2587,11 @@ function layerFor(scroller) {
 		scroller,
 		bounds: () => {
 			const rect = scroller.getBoundingClientRect();
-			return new DOMRect(rect.left + scroller.clientLeft, rect.top + scroller.clientTop, scroller.clientWidth, scroller.clientHeight);
+			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) => {
@@ -2730,7 +2615,10 @@ function fallbackLayer() {
 	fallback = {
 		host,
 		scroller: document.body,
-		bounds: () => new DOMRect(0, 0, window.innerWidth, window.innerHeight),
+		bounds: () => {
+			const bottom = composerTop() ?? window.innerHeight;
+			return new DOMRect(0, 0, window.innerWidth, Math.max(0, bottom));
+		},
 		toContent: (left, top) => ({
 			left,
 			top
@@ -3389,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();
@@ -3420,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 /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: stackRef,
-		className: styles.tCardStack,
+		className: styles.tSummary,
 		"data-dsq-deco": "true",
-		children: quotes.map((quote, index) => /* @__PURE__ */ (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: /* @__PURE__ */ (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 /* @__PURE__ */ (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: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cx(A.colEnd, styles.userStack),
-			children: [
-				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({
-						images,
-						align: "end",
-						compact: images.length > 1
-					})
-				}) : 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
-				}) : 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
@@ -3701,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()));
@@ -3732,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);

package/package.json

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