dsh-select-quote 0.3.8 → 0.3.9

package/lib/client.js

@@ -28,6 +28,20 @@ function composerCardOf(node) {
 function willSubmit(card, draft) {
 	return draft.trim().length > 0 || card.querySelector("img") !== null;
 }
+/**
+* True for the Enter gestures the host submits: plain Enter, Ctrl+Enter, and
+* Meta+Enter. Mirrors the host composer's Enter command: Shift+Enter inserts
+* a newline; Alt, AltGraph, the two modifiers together, and IME composition
+* are ignored. Used to fold annotations for every real submit gesture.
+*/
+function isSubmitKey(event) {
+	if (event.key !== "Enter") return false;
+	if (event.shiftKey || event.altKey) return false;
+	if (event.ctrlKey && event.metaKey) return false;
+	if (event.isComposing) return false;
+	if (event.getModifierState?.("AltGraph") === true) return false;
+	return true;
+}
 /** Focus the resident composer editor and park the caret at the end. */
 function focusComposer() {
 	const editor = document.querySelector("[data-lexical-editor=\"true\"]") ?? document.querySelector("[contenteditable=\"true\"][data-lexical-editor]") ?? lastEditable();
@@ -78,7 +92,7 @@ const ATOMS = {
 };
 const toKebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 const atomRules = Object.entries(ATOMS).map(([name, declarations]) => `.dsq_a_${toKebab(name)} { ${declarations} }`).join("\n");
-/** Atom class names, for `cx(styles.card, A.row)`. */
+/** Atom class names, for `cx(styles.summary, A.row)`. */
 const A = Object.fromEntries(Object.keys(ATOMS).map((name) => [name, `dsq_a_${toKebab(name)}`]));
 /** Join class parts, dropping the falsy ones so a variant can be `cond && A.x`. */
 function cx(...parts) {
@@ -99,6 +113,7 @@ body {
   --dsq-line: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
   --dsq-line-divider: var(--dsw-alias-border-l4, rgba(0, 0, 0, 0.12));
   --dsq-focus-ring: var(--dsw-alias-button-primary-fill, #1677ff);
+  --dsq-focus-ring-soft: color-mix(in srgb, var(--dsq-accent) 50%, transparent);
   --dsq-fill-hover: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
   --dsq-label: var(--dsw-alias-label-primary, rgba(0, 0, 0, 0.88));
   --dsq-label-inverted: var(--dsw-alias-label-primary-inverted, #fff);
@@ -108,11 +123,14 @@ body {
   --dsq-bubble: var(--dsw-specific-bubble, rgba(0, 0, 0, 0.05));
   --dsq-menu: var(--dsw-menu-surface-fill, rgba(248, 249, 250, .58));
   --dsq-menu-backdrop: var(--dsw-menu-backdrop-filter, blur(40px) saturate(150%));
+  --dsq-scrim: rgba(0, 0, 0, 0.32);
   --dsq-accent-400: var(--dsw-static-blue-400, #1677ff);
   --dsq-accent: var(--dsw-static-blue-500, #3b82f6);
   --dsq-accent-tint: var(--dsw-static-blue-50p, #eaf3ff);
   --dsq-accent-tint-hover: var(--dsw-static-blue-75, #e5f0ff);
   --dsq-accent-tint-dark: var(--dsw-static-blue-950, #172554);
+  --dsq-summary-bg: var(--dsw-alias-bg-layer-2, #fff);
+  --dsq-mark-hover: var(--dsw-static-blue-75, #e5f0ff);
   --dsq-neutral-50: var(--dsw-static-neutral-50, #fafafa);
   --dsq-neutral-100: var(--dsw-static-neutral-100, #f5f5f5);
   --dsq-neutral-800: var(--dsw-static-neutral-800, #292929);
@@ -170,6 +188,17 @@ ${atomRules}
   }
 }
 
+/* Exit of the chip preview: the same 4px travel, reversed. Transform only, so
+   the material layer keeps sampling its backdrop until the node is removed. */
+@keyframes dsq-rise-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(4px);
+  }
+}
+
 /* 宿主菜单材质（官方 material 图层同款）：填充走 --dsw-menu-surface-fill，模糊走
    --dsw-menu-backdrop-filter（恒为 blur(40px) saturate(150%)），亮暗自动翻。
    画在 z-index:-1 的独立图层上，内容在它之上：模糊只取身后的页面，不会把
@@ -178,7 +207,9 @@ ${atomRules}
    菜单用；这里按需求用 surface-fill，所以我们的浮层会比宿主自己的菜单更透。 */
 .dsq_toolbar::before,
 .dsq_commentPop::before,
-.dsq_summaryHoverInner::before {
+.dsq_summaryHoverInner::before,
+.dsq_touchBar::before,
+.dsq_chipPreview::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -201,9 +232,15 @@ ${atomRules}
    整条链才在浮层元素上取值。 */
 .dsq_toolbar,
 .dsq_commentPop,
-.dsq_summaryHoverInner {
+.dsq_summaryHoverInner,
+.dsq_touchBar,
+.dsq_touchSheet,
+.dsq_chipPreview {
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
   --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));
+  /* Every surface above takes the same elevation; declaring it once here is
+     what keeps the six component blocks free of a copied box-shadow. */
+  box-shadow: var(--dsq-shadow);
 }
 
 /* 浮层挂载与层带（2026-10-20 定，改前先读）：
@@ -219,8 +256,10 @@ ${atomRules}
    现在把两件事交回宿主布局：
    - 滚动容器负责裁剪：浮层随内容上移，到容器上边缘就被裁掉，自然滑进 header
      下面，和正文一致；
-   - host 的 z-index 固定 6（见 floating-layer.ts）：低于 composer 的 7，高于
+   - host 的 z-index 平时 6（见 floating-layer.ts）：低于 composer 的 7，高于
      内容里吸顶元素的 6（同 z 时 host 追加在滚动容器末尾，DOM 次序压过它们）。
+     评论步骤打开期间抬到 8：摘要卡在 composer 座位里（z 7），会伸进滚动区，
+     6 的评论泡会被它盖住；关闭评论即还原，空闲工具条仍不压输入框。
    host 内部次序：status 3 > toolbar 2 > commentPop 1。
 
    摘要块（composer 与历史消息）在内容普通流里，不参与这套层带；悬停面板仍是
@@ -241,8 +280,7 @@ ${atomRules}
      由它勾勒轮廓，所以这里不要再画 border，否则描边会和环叠成两条线。 */
   border: 0;
   border-radius: 12px;
-  /* 底色与模糊都在上面的材质图层里，这里不再画背景 */
-  box-shadow: var(--dsq-shadow);
+  /* 底色与模糊都在上面的材质图层里，这里不再画背景；elevation 在共享规则里 */
   pointer-events: auto;
   /* A/B：scale 入场放在容器上（材质图层归它所有）。关键帧自带 translate(-50%,-100%)，
      所以缩放不会破坏居中。若真实客户端里磨砂在放大期间消失，改回内容层方案。 */
@@ -261,10 +299,9 @@ ${atomRules}
   animation-name: dsq-toolbar-in-popover-top;
 }
 
-/* 按钮行：只负责布局；入场动画在容器上（见 .dsq_toolbar 的 A/B 说明）。 */
+/* 按钮行：形状由 A.inlineRow 提供，这里只留间距；入场动画在容器上
+   （见 .dsq_toolbar 的 A/B 说明）。 */
 .dsq_toolbarInner {
-  display: inline-flex;
-  align-items: center;
   gap: 2px;
 }
 
@@ -282,11 +319,17 @@ ${atomRules}
   background: var(--dsq-fill-hover);
 }
 
-.dsq_buttonAddComment {
+/* Accent-filled actions: comment commit, annotation save, chip jump. Only the
+   metrics differ; fill and hover live here once. */
+.dsq_buttonAddComment,
+.dsq_annEditSave,
+.dsq_chipPreviewJump {
   background: var(--dsq-accent);
-  color:#fff;
+  color: #fff;
 }
-.dsq_buttonAddComment:hover {
+.dsq_buttonAddComment:hover,
+.dsq_annEditSave:hover,
+.dsq_chipPreviewJump:hover {
   background: var(--dsq-accent-400);
 }
 
@@ -306,10 +349,10 @@ ${atomRules}
   margin: 0 2px;
 }
 
-.dsq_status {
-  position: absolute;
-  z-index: 3;
-  transform: translate(-50%, 8px);
+/* Toast pill: the desktop status and the touch status share the whole skin;
+   only where they anchor differs. */
+.dsq_status,
+.dsq_touchStatus {
   padding: 4px 10px;
   border-radius: 999px;
   background: var(--dsq-bg-toast);
@@ -320,6 +363,12 @@ ${atomRules}
   white-space: nowrap;
 }
 
+.dsq_status {
+  position: absolute;
+  z-index: 3;
+  transform: translate(-50%, 8px);
+}
+
 /* Annotation stack — inside the composer card (input.overlay), ~1/5 width. */
 .dsq_cardStack {
   position: absolute;
@@ -373,7 +422,7 @@ ${atomRules}
   padding: 8px 10px;
   border: 0.5px solid var(--dsq-line);
   border-radius: 18px;
-  background: var(--dsq-neutral-50);
+  background: var(--dsq-summary-bg);
   pointer-events: auto;
   user-select: none;
 }
@@ -392,7 +441,9 @@ ${atomRules}
   position: relative;
 }
 
-.dsq_summaryTitle {
+/* Card titles (composer summary / touch sheet) share one type scale. */
+.dsq_summaryTitle,
+.dsq_touchSheetTitle {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -405,18 +456,37 @@ ${atomRules}
   color: var(--dsq-label-3);
 }
 
+/* Hover wording is wrong on touch; show one line, not both. */
+.dsq_summaryHintTouch {
+  display: none;
+}
+
+@media (hover: none), (pointer: coarse) {
+  .dsq_summaryHintPointer {
+    display: none;
+  }
+  .dsq_summaryHintTouch {
+    display: block;
+  }
+}
+
+/* The hover panel and the chip preview are the same floating width; keeping it
+   in one rule means a width tweak lands on both. */
+.dsq_summaryHover,
+.dsq_chipPreview {
+  width: min(320px, calc(100vw - 16px));
+}
+
 .dsq_summaryHover {
   /* \`display: none\` here is the closed state, so this rule must not take the
      flex atoms — the open class below turns display back on. */
   display: none;
   position: fixed;
   z-index: 14;
-  width: min(320px, calc(100vw - 16px));
   flex-direction: column;
-  padding: 12px;
-  /* Facing-side pad is set in JS from placement side; this is the base. */
-  padding-top: 12px;
-  padding-bottom: 12px;
+  /* No side padding: the visible card must share the summary's left edge. The
+     transparent hover bridge is added by place() only on the facing side. */
+  padding: 0;
   background: transparent;
   pointer-events: auto;
   opacity: 0;
@@ -432,14 +502,22 @@ ${atomRules}
   display: flex;
 }
 
+/* Keep the closing panel mounted briefly; the list reverses its rise. */
+.dsq_summaryHoverLeaving {
+  pointer-events: none;
+}
+
+.dsq_summaryHoverLeaving .dsq_summaryList {
+  animation: dsq-rise-out 0.12s cubic-bezier(0.4, 0, 1, 1) both;
+}
+
 .dsq_summaryHoverInner {
   position: relative;
   gap: 4px;
   padding: 4px;
   border-radius: 12px;
   /* 不画 border：--dsq-shadow（宿主的 elevation-prominent）自带 0 0 0 .5px 的
-     描边环，再画一遍会叠成两条线。底色与模糊都在材质图层里。 */
-  box-shadow: var(--dsq-shadow);
+     描边环，再画一遍会叠成两条线。底色与模糊都在材质图层里，elevation 在共享规则里。 */
 }
 
 /* 滚动只放在列表上：材质图层是绝对定位的，留在会滚动的容器里会跟着内容跑掉，
@@ -457,7 +535,9 @@ ${atomRules}
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .dsq_toolbar::before,
   .dsq_commentPop::before,
-  .dsq_summaryHoverInner::before {
+  .dsq_summaryHoverInner::before,
+  .dsq_touchBar::before,
+  .dsq_chipPreview::before {
     background: var(--dsq-bg-raised);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -477,6 +557,9 @@ ${atomRules}
 
 .dsq_summaryItemHead {
   gap: 6px;
+  /* Normal mode's action buttons set the row height; keep it in edit mode too
+     so the badge and the label never move when the actions disappear. */
+  min-height: 26px;
 }
 
 .dsq_summaryItemBadge {
@@ -516,6 +599,9 @@ ${atomRules}
 
 .dsq_summaryItemMain {
   min-width: 0;
+  /* The lead-in lives on the shared wrapper, not on the normal-mode button, so
+     edit mode has no wrapper to compensate for. */
+  padding-top: 2px;
 }
 
 .dsq_summaryItemButton {
@@ -524,7 +610,9 @@ ${atomRules}
   text-align: left;
   font: inherit;
   border-radius: 8px;
-  padding: 2px 0 0;
+  /* No padding: the 2px lead-in is on .dsq_summaryItemMain, and the UA's
+     default button padding would shift the quote sideways and down. */
+  padding: 0;
 }
 
 .dsq_annAnchor {
@@ -535,18 +623,36 @@ ${atomRules}
   pointer-events: none;
 }
 
-.dsq_summaryItemLabel {
+/* Field labels shared by the hover list and the chip preview. */
+.dsq_summaryItemLabel,
+.dsq_chipPreviewLabel {
   font-size: 11px;
   line-height: 16px;
   color: var(--dsq-label-3);
 }
 
-.dsq_summaryItemText {
+.dsq_summaryItemLabel {
+  margin-top: 8px;
+  margin-bottom: 4px;
+}
+
+/* The header label shares the class but sits in a centered flex row. */
+.dsq_summaryItemHead .dsq_summaryItemLabel {
+  margin: 0;
+}
+
+/* Quote/comment body type is shared; only the box behavior differs. */
+.dsq_summaryItemText,
+.dsq_chipPreviewQuote,
+.dsq_chipPreviewComment {
   font-size: 13px;
-  line-height: 18px;
   color: var(--dsq-label);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
+}
+
+.dsq_summaryItemText {
+  line-height: 18px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -557,24 +663,22 @@ ${atomRules}
   color: var(--dsq-label-3);
 }
 
-/* Inline edit form rendered inside the hover panel item (no extra layer). */
-.dsq_annEditText {
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsq-label);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
+/* Inline edit form rendered inside the hover panel item (no extra layer).
+   Shares .dsq_summaryItemText with the read view, but shows the full quote
+   instead of clamp-reading it. */
+.dsq_summaryItemTextEdit {
+  display: block;
   max-height: 132px;
   overflow-y: auto;
-  margin: 2px 0 6px;
+  overscroll-behavior: contain;
 }
 
-.dsq_annEditInput {
+/* Textarea skin shared by the annotation editor and the comment popover; the
+   variants below only set min-height, resize and radius. */
+.dsq_annEditInput,
+.dsq_commentInput {
   width: 100%;
-  min-height: 72px;
-  resize: vertical;
   border: none;
-  border-radius: 10px;
   padding: 8px 10px;
   font: inherit;
   font-size: 13px;
@@ -584,44 +688,47 @@ ${atomRules}
   outline: none;
 }
 
-.dsq_annEditInput::placeholder {
+.dsq_annEditInput::placeholder,
+.dsq_commentInput::placeholder {
   color: var(--dsq-label-3);
 }
 
+.dsq_annEditInput {
+  min-height: 72px;
+  resize: vertical;
+  border-radius: 10px;
+}
+
+.dsq_commentActions,
 .dsq_annEditActions {
   justify-content: flex-end;
+}
+
+.dsq_annEditActions {
   gap: 8px;
   margin-top: 4px;
 }
 
-.dsq_annEditCancel {
-  color: var(--dsq-label-2);
+/* Footer buttons share type and metrics; the save fill comes from the shared
+   accent-action rule above. */
+.dsq_annEditCancel,
+.dsq_annEditSave {
   font: inherit;
   font-size: 13px;
   padding: 4px 12px;
   border-radius: 10px;
 }
 
+.dsq_annEditCancel {
+  color: var(--dsq-label-2);
+}
+
 .dsq_annEditCancel:hover {
   background: var(--dsq-fill-hover);
 }
 
 .dsq_annEditSave {
-  appearance: none;
-  border: none;
-  background: var(--dsq-accent);
-  color: #fff;
-  font: inherit;
-  font-size: 13px;
   font-weight: 500;
-  padding: 4px 12px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: filter 0.12s;
-}
-
-.dsq_annEditSave:hover {
-  background: var(--dsq-accent-400);
 }
 
 .dsq_annEditSave:disabled {
@@ -640,35 +747,226 @@ ${atomRules}
   gap: 8px;
   padding: 8px;
   border-radius: 16px;
-  /* 底色与模糊都在材质图层里 */
-  box-shadow: var(--dsq-shadow);
+  /* 底色与模糊都在材质图层里，elevation 在共享规则里 */
   /* The layer host is pointer-events:none; interactive surfaces opt back in. */
   pointer-events: auto;
 }
 
 .dsq_commentInput {
-  width: 100%;
   min-height: 64px;
   resize: none;
-  border: none;
   border-radius: 8px;
-  padding: 8px 10px;
-  font: inherit;
+}
+
+.dsq_commentActions {
+  gap: 6px;
+}
+
+/* Preview for a model-written annotation chip. Body-level fixed (the chat
+   surface's contain: layout would otherwise capture it); hover and click
+   share this one surface, and the button owns the jump. */
+.dsq_chipPreview {
+  position: fixed;
+  z-index: 50;
+  box-sizing: border-box;
+  max-height: min(420px, calc(100vh - 32px));
+  padding: 10px;
+  border-radius: 14px;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+/* Same rise as the annotation card's hover list; on the content, not on the
+   material layer, so backdrop sampling stays put. */
+.dsq_chipPreviewBody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  animation: dsq-rise-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.dsq_chipPreviewLeaving {
+  pointer-events: none;
+}
+
+.dsq_chipPreviewLeaving .dsq_chipPreviewBody {
+  animation: dsq-rise-out 0.12s cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+/* Header rows: title on the left, the single action on the right. */
+.dsq_chipPreviewHead,
+.dsq_touchSheetHead {
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.dsq_chipPreviewTitle {
   font-size: 13px;
-  line-height: 20px;
+  font-weight: 600;
+  line-height: 18px;
   color: var(--dsq-label);
-  background: var(--dsq-fill-hover);
-  outline: none;
 }
 
-.dsq_commentInput::placeholder {
+.dsq_chipPreviewLabel {
+  margin-top: 2px;
+}
+
+.dsq_chipPreviewQuote,
+.dsq_chipPreviewComment {
+  line-height: 19px;
+  max-height: 108px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.dsq_chipPreviewComment {
+  color: var(--dsq-label-2);
+}
+
+.dsq_chipPreviewCommentEmpty {
   color: var(--dsq-label-3);
 }
 
-.dsq_commentActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
+.dsq_chipPreviewJump {
+  flex: none;
+  justify-content: center;
+  gap: 4px;
+  min-height: 28px;
+  padding: 0 9px;
+  border-radius: 7px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Touch selection chrome. Fixed to the visual viewport and mounted on body:
+   the OS selection menu owns the space around the selected text, and the soft
+   keyboard owns the bottom, so neither content coordinates nor the scroller's
+   clipping can place this correctly. Only rendered on coarse pointers. */
+.dsq_touchBar,
+.dsq_touchSheet {
+  position: fixed;
+  left: 50%;
+  right: auto;
+  box-sizing: border-box;
+  width: min(520px, calc(100vw - 16px));
+  transform: translateX(-50%);
+  touch-action: manipulation;
+  pointer-events: auto;
+}
+
+.dsq_touchBar {
+  z-index: 60;
+  gap: 4px;
+  padding: 6px;
+  border-radius: 16px;
+}
+
+.dsq_touchAction {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 6px 4px;
+  border-radius: 10px;
+  color: var(--dsq-label);
+  font: inherit;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.dsq_touchAction span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsq_touchAction:active {
+  background: var(--dsq-fill-hover);
+}
+
+.dsq_touchScrim {
+  position: fixed;
+  inset: 0;
+  z-index: 61;
+  background: var(--dsq-scrim);
+  touch-action: none;
+}
+
+.dsq_touchSheet {
+  z-index: 62;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 20px;
+  background: var(--dsq-bg-raised);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.dsq_touchSheetClose {
+  flex: none;
+  width: 44px;
+  height: 44px;
+  margin: -8px -8px -8px 0;
+  border-radius: 12px;
+  color: var(--dsq-label-2);
+}
+
+.dsq_touchSheetClose:active {
+  background: var(--dsq-fill-hover);
+}
+
+/* Keep the selected words visible after the sheet covers the page: on touch the
+   reader has no hover to re-orient, so the sheet carries its own quote. */
+.dsq_touchQuote {
+  border-left: 2px solid var(--dsq-accent);
+  border-radius: 6px;
+  padding: 6px 8px;
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-label-2);
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 16px keeps iOS from zooming the page when the field is focused. */
+.dsq_touchComment {
+  min-height: 88px;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.dsq_touchActions {
+  gap: 8px;
+}
+
+.dsq_touchActions .dsq_button {
+  flex: 1;
+  min-height: 44px;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.dsq_touchSecondary {
+  background: var(--dsq-fill-hover);
+}
+
+.dsq_touchStatus {
+  position: fixed;
+  left: 50%;
+  z-index: 63;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 32px);
 }
 
 /* Transcript summary — the same block as the composer's, right-aligned under
@@ -682,8 +980,12 @@ ${atomRules}
 
 .dsq_tSummary .dsq_summary {
   width: auto;
-  min-width: 220px;
+  min-width: 160px;
   max-width: min(calc(var(--dsq-chat-width) * 0.72), 520px);
+  /* In the composer the card must clear .dsq_cardStack (12); in the transcript
+     it is plain content and must stay under the floating layer's host (6/8),
+     otherwise a hovered comment popover is painted beneath it. */
+  z-index: 1;
 }
 
 /* Replacement user bubble (quote block stripped from display). */
@@ -780,13 +1082,74 @@ ${atomRules}
 }
 
 .dsq_annMark:hover {
-  background: var(--dsq-accent-tint-hover);
+  background: var(--dsq-mark-hover);
 }
 
 .dsq_annMarkFlash {
   animation: dsq-ann-flash 1.4s ease-out;
 }
 
+/* Fallback jump target when the source mark is no longer in the DOM: flash the
+   message that owns it instead of scrolling nowhere. */
+.dsq_annMessageFlash {
+  animation: dsq-ann-message-flash 1.4s ease-out;
+}
+
+@keyframes dsq-ann-message-flash {
+  0% {
+    box-shadow: inset 0 0 0 2px var(--dsq-accent);
+  }
+  100% {
+    box-shadow: inset 0 0 0 2px transparent;
+  }
+}
+
+/* Keyboard focus is a first-class state for the toolbar, summary and panel. */
+.dsq_summary:focus-visible,
+.dsq_button:focus-visible,
+.dsq_touchAction:focus-visible,
+.dsq_touchSheetClose:focus-visible,
+.dsq_chipPreviewJump:focus-visible,
+.dsq_annMark:focus-visible,
+.dsq_summaryItemAction:focus-visible,
+.dsq_summaryItemButton:focus-visible,
+.dsq_cardClose:focus-visible,
+.dsq_annEditCancel:focus-visible,
+.dsq_annEditSave:focus-visible {
+  outline: 2px solid var(--dsq-focus-ring);
+  outline-offset: 2px;
+}
+
+.dsq_commentInput:focus-visible,
+.dsq_annEditInput:focus-visible {
+  /* The host's button fill is monochrome (black on light, white on dark); a
+     half-transparent accent ring reads as focus without looking like a border. */
+  outline: 2px solid var(--dsq-focus-ring-soft);
+  outline-offset: 1px;
+}
+
+/* Touch: 44px minimum targets. Icon-only corners keep their visual size and
+   grow an invisible hit area; toolbar actions grow in place. */
+@media (hover: none), (pointer: coarse) {
+  .dsq_button,
+  .dsq_annEditCancel,
+  .dsq_annEditSave {
+    min-height: 44px;
+  }
+  .dsq_summaryItemAction {
+    width: 44px;
+    height: 44px;
+  }
+  .dsq_cardClose::after {
+    content: "";
+    position: absolute;
+    inset: -12px;
+  }
+  .dsq_chipPreviewJump {
+    min-height: 44px;
+  }
+}
+
 /* Layer 4 — host surface: keyframes, theme flips, and the two rules that reach
    into product-owned DOM. */
 
@@ -794,10 +1157,12 @@ ${atomRules}
   0% {
     background: var(--dsq-mark-color);
     color: #fff;
+    box-shadow: 0 0 0 3px var(--dsq-mark-tint);
   }
   100% {
     background: var(--dsq-mark-tint);
     color: inherit;
+    box-shadow: 0 0 0 0 transparent;
   }
 }
 
@@ -805,9 +1170,10 @@ ${atomRules}
    --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);
+  --dsq-mark-hover: var(--dsw-static-blue-800, #1e40af);
 }
 
-/* Reserve room for the floating quote cards inside the composer card, so the
+/* Reserve room for the floating annotation summary inside the composer card, so the
    attachment rail and the editor flow below them instead of being covered. */
 .dsq_cardPad {
   padding-top: var(--dsq-quote-pad, 88px) !important;
@@ -838,7 +1204,10 @@ const styles = {
 	summaryBody: "dsq_summaryBody",
 	summaryTitle: "dsq_summaryTitle",
 	summaryHint: "dsq_summaryHint",
+	summaryHintPointer: "dsq_summaryHintPointer",
+	summaryHintTouch: "dsq_summaryHintTouch",
 	summaryHover: "dsq_summaryHover",
+	summaryHoverLeaving: "dsq_summaryHoverLeaving",
 	summaryItem: "dsq_summaryItem",
 	summaryItemLabel: "dsq_summaryItemLabel",
 	summaryItemText: "dsq_summaryItemText",
@@ -846,7 +1215,7 @@ const styles = {
 	summaryItemMain: "dsq_summaryItemMain",
 	summaryItemHead: "dsq_summaryItemHead",
 	summaryItemTextEmpty: "dsq_summaryItemTextEmpty",
-	annEditText: "dsq_annEditText",
+	summaryItemTextEdit: "dsq_summaryItemTextEdit",
 	annEditInput: "dsq_annEditInput",
 	annEditActions: "dsq_annEditActions",
 	annEditCancel: "dsq_annEditCancel",
@@ -861,9 +1230,32 @@ const styles = {
 	annAnchor: "dsq_annAnchor",
 	annMark: "dsq_annMark",
 	annMarkFlash: "dsq_annMarkFlash",
+	annMessageFlash: "dsq_annMessageFlash",
 	commentPop: "dsq_commentPop",
 	commentInput: "dsq_commentInput",
 	commentActions: "dsq_commentActions",
+	chipPreview: "dsq_chipPreview",
+	chipPreviewBody: "dsq_chipPreviewBody",
+	chipPreviewLeaving: "dsq_chipPreviewLeaving",
+	chipPreviewHead: "dsq_chipPreviewHead",
+	chipPreviewTitle: "dsq_chipPreviewTitle",
+	chipPreviewLabel: "dsq_chipPreviewLabel",
+	chipPreviewQuote: "dsq_chipPreviewQuote",
+	chipPreviewComment: "dsq_chipPreviewComment",
+	chipPreviewCommentEmpty: "dsq_chipPreviewCommentEmpty",
+	chipPreviewJump: "dsq_chipPreviewJump",
+	touchBar: "dsq_touchBar",
+	touchAction: "dsq_touchAction",
+	touchScrim: "dsq_touchScrim",
+	touchSheet: "dsq_touchSheet",
+	touchSheetHead: "dsq_touchSheetHead",
+	touchSheetTitle: "dsq_touchSheetTitle",
+	touchSheetClose: "dsq_touchSheetClose",
+	touchQuote: "dsq_touchQuote",
+	touchComment: "dsq_touchComment",
+	touchActions: "dsq_touchActions",
+	touchSecondary: "dsq_touchSecondary",
+	touchStatus: "dsq_touchStatus",
 	tSummary: "dsq_tSummary",
 	userRow: "dsq_userRow",
 	userStack: "dsq_userStack",
@@ -877,7 +1269,7 @@ const styles = {
 * it as stable character offsets over the message's own text.
 *
 * Offsets are computed over "clean text": the flow item's text nodes with the
-* plugin's own chrome (summary cards, directive chips, anchors) skipped. Marks
+* plugin's own chrome (summary blocks, directive chips, anchors) skipped. Marks
 * are transparent — their text still counts — so an offset captured before a
 * mark exists stays valid after decoration.
 */
@@ -1085,16 +1477,15 @@ function decorateBySearch(item, job) {
 	const full = cleanTextOf(item);
 	const needle = job.text.trim();
 	if (needle.length < 2) return false;
-	const patterns = [needle, needle.split(/\s+/).map(escapeRegExp).join("\\s*")];
-	for (const pattern of patterns) {
-		let at = full.indexOf(pattern);
-		while (at >= 0) {
-			const located = cleanTextRange(item, at, at + pattern.length);
-			if (located) {
-				const pieces = overlappingEntries(located.entries, located.from, located.to);
-				if (pieces.length > 0 && !isMarked(pieces) && wrapRange(item, job, located.from, located.to)) return true;
-			}
-			at = full.indexOf(pattern, at + 1);
+	const patterns = [new RegExp(escapeRegExp(needle), "g"), new RegExp(needle.split(/\s+/).map(escapeRegExp).join("\\s*"), "g")];
+	for (const pattern of patterns) for (const match of full.matchAll(pattern)) {
+		const at = match.index ?? 0;
+		const length = match[0].length;
+		if (length === 0) continue;
+		const located = cleanTextRange(item, at, at + length);
+		if (located) {
+			const pieces = overlappingEntries(located.entries, located.from, located.to);
+			if (pieces.length > 0 && !isMarked(pieces) && wrapRange(item, job, located.from, located.to)) return true;
 		}
 	}
 	return false;
@@ -1106,6 +1497,19 @@ function decorateJob(item, job) {
 	if (decorateAtOffsets(item, job)) return true;
 	return decorateBySearch(item, job);
 }
+/**
+* Existing marks are kept, but their ordinal is owned by the job: removing an
+* earlier annotation renumbers the rest without re-wrapping the text. Only the
+* final fragment carries the badge.
+*/
+function refreshMarkIndex(item, job) {
+	const marks = Array.from(item.querySelectorAll(`[${MARK_ATTR}="${attrValue(job.markId)}"]`));
+	if (marks.length === 0) return false;
+	const last = marks[marks.length - 1];
+	const next = String(job.index);
+	if (last.getAttribute(INDEX_ATTR) !== next) last.setAttribute(INDEX_ATTR, next);
+	return true;
+}
 /** Apply every registered job whose message is currently rendered. */
 function applyAnnotationMarks(root) {
 	if (jobs.size === 0) return;
@@ -1113,10 +1517,15 @@ function applyAnnotationMarks(root) {
 	if (!scope) return;
 	for (const job of [...jobs.values()]) {
 		const items = flowItems(job.messageId, scope);
+		let decorated = false;
 		for (const item of items) {
-			if (item.querySelector(`[${MARK_ATTR}="${attrValue(job.markId)}"]`)) break;
+			if (refreshMarkIndex(item, job)) {
+				decorated = true;
+				continue;
+			}
+			if (decorated) continue;
 			if (job.messageId === "" && !item.textContent?.includes(job.text.trim().slice(0, 16))) continue;
-			if (decorateJob(item, job)) break;
+			if (decorateJob(item, job)) decorated = true;
 		}
 	}
 }
@@ -1172,6 +1581,7 @@ function watchAnnotationMarks(root) {
 	applyAnnotationMarks(el);
 	let frame = 0;
 	const schedule = () => {
+		if (jobs.size === 0) return;
 		if (frame !== 0) return;
 		frame = window.requestAnimationFrame(() => {
 			frame = 0;
@@ -1390,43 +1800,52 @@ function composeAnnotatedMessage(draft, annotations) {
 	const rest = stripDraftMarker(draft).replace(/^\s+/, "");
 	if (annotations.length === 0) return rest;
 	const payload = annotations.map(toWireItem);
+	const json = JSON.stringify(payload).replace(/</g, "\\u003c");
 	const block = [
 		PROTOCOL_HEADER,
 		"",
 		ANNOTATIONS_BLOCK_OPEN,
-		JSON.stringify(payload),
+		json,
 		ANNOTATIONS_BLOCK_CLOSE
 	].join("\n");
 	return rest ? `${block}\n\n${rest}` : `${block}\n\n`;
 }
 /** Remove `# Response annotations:` instructional prose before the JSON block. */
 function stripProtocolHeader(prefix) {
-	if (prefix.indexOf("# Response annotations:") >= 0) return "";
+	const marker = prefix.indexOf("# Response annotations:");
+	if (marker >= 0) return prefix.slice(0, marker).replace(/\s+$/, "");
 	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;
+	const payloadStart = open + 22;
+	const firstClose = text.indexOf(ANNOTATIONS_BLOCK_CLOSE, payloadStart);
+	let close = firstClose;
+	while (close >= 0) {
+		const json = text.slice(payloadStart, close).trim();
+		try {
+			return {
+				before: stripProtocolHeader(text.slice(0, open)),
+				after: text.slice(close + 23).replace(/^\s+/, ""),
+				parsed: JSON.parse(json)
+			};
+		} catch {
+			close = text.indexOf(ANNOTATIONS_BLOCK_CLOSE, close + 23);
+		}
+	}
+	if (firstClose < 0) return null;
 	return {
 		before: stripProtocolHeader(text.slice(0, open)),
-		after: text.slice(close + 23).replace(/^\s+/, ""),
-		json: text.slice(open + 22, close).trim()
+		after: text.slice(firstClose + 23).replace(/^\s+/, "")
 	};
 }
 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. */
+/** Wire payload as an array; null when the block is not an array. */
 function parseWire(parts) {
-	let parsed;
-	try {
-		parsed = JSON.parse(parts.json);
-	} catch {
-		return null;
-	}
-	return Array.isArray(parsed) ? parsed : null;
+	return Array.isArray(parts.parsed) ? parts.parsed : null;
 }
 /** Every source an item carries; falls back to the selected text itself. */
 function sourcesOf(record, body) {
@@ -1453,6 +1872,9 @@ function wireBody(entry) {
 /**
 * 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.
+* A complete block with a malformed or non-array payload yields no
+* annotations but is still stripped — the transcript never shows protocol
+* text, valid or not.
 */
 function scanAnnotatedMessage(text) {
 	const parts = blockParts(text);
@@ -1460,12 +1882,12 @@ function scanAnnotatedMessage(text) {
 		annotations: [],
 		rest: text
 	};
+	const rest = joinedRest(parts);
 	const parsed = parseWire(parts);
 	if (parsed === null) return {
 		annotations: [],
-		rest: text.replace(/^\s+/, "")
+		rest
 	};
-	const rest = joinedRest(parts);
 	const annotations = [];
 	for (const entry of parsed) {
 		const item = wireBody(entry);
@@ -1686,18 +2108,63 @@ function adoptPersistedAnnotations(sessionId) {
 	if (orphaned.length > 0) bySession.delete(MEMORY_KEY);
 	notify();
 }
+/** Same ids in the same order, with the only mutable field (comment) equal. */
+function sameAnnotations(a, b) {
+	return a.length === b.length && a.every((item, i) => {
+		const other = b[i];
+		return other !== void 0 && item.id === other.id && (item.comment ?? "") === (other.comment ?? "");
+	});
+}
+/**
+* Re-read a session after another tab wrote its storage key.
+*
+* Storage is the shared source of truth: every local mutation persists
+* synchronously, so this tab's memory can only be stale relative to it. The
+* stored array replaces the local one (last writer wins) — merging would
+* resurrect annotations the other tab already sent and cleared.
+*
+* `null` is the `localStorage.clear()` event: reload every partition this tab
+* holds. Sessions that are neither cached nor active are ignored; binding the
+* session later reads storage anyway.
+*/
+function adoptStorageAnnotations(sessionId) {
+	if (!persistence) return;
+	if (sessionId === null) {
+		let changed = false;
+		for (const key of [...bySession.keys()]) {
+			if (key === MEMORY_KEY) continue;
+			const stored = persistence.load(key);
+			const current = bySession.get(key);
+			if (stored.length === 0) {
+				bySession.delete(key);
+				changed = true;
+			} else if (current === void 0 || !sameAnnotations(stored, current)) {
+				bySession.set(key, [...stored]);
+				changed = true;
+			}
+		}
+		if (changed) notify();
+		return;
+	}
+	if (!bySession.has(sessionId) && sessionId !== runtime.sessionId) return;
+	const stored = persistence.load(sessionId);
+	if (sameAnnotations(stored, bySession.get(sessionId) ?? EMPTY$1)) return;
+	if (stored.length === 0) bySession.delete(sessionId);
+	else bySession.set(sessionId, [...stored]);
+	notify();
+}
 function annotationTitle(annotation) {
 	return previewTitle(annotation.text);
 }
 //#endregion
 //#region src/client/dom/popoverPlacement.ts
-const GAP = 8;
+const GAP$1 = 8;
 const MARGIN = 8;
 /**
 * Place `panel` near `anchor`, flipping vertical side when the preferred side
 * lacks room. Keeps the panel inside `bounds` (the viewport by default).
 */
-function placePopover(anchor, panel, preferred = "bottom", gap = GAP, bounds) {
+function placePopover(anchor, panel, preferred = "bottom", gap = GAP$1, bounds) {
 	const box = bounds ?? {
 		top: 0,
 		left: 0,
@@ -1784,6 +2251,7 @@ const zh = {
 	"common.selectedText": "选中的文本",
 	"common.commentPlaceholder": "添加可选评论…",
 	"common.cancel": "取消",
+	"common.close": "关闭",
 	"common.save": "保存",
 	"toolbar.aria": "划词操作",
 	"toolbar.commentHint": "添加批注…",
@@ -1795,20 +2263,25 @@ const zh = {
 	"toolbar.skipComment": "暂不评论",
 	"toolbar.addComment": "添加评论",
 	"summary.hint": "悬停查看批注",
+	"summary.hintTouch": "点按查看批注",
 	"summary.dialogAria": "{count} 条划词批注详情",
 	"summary.edit": "编辑批注 {index}",
 	"summary.remove": "移除批注 {index}",
 	"summary.userComment": "用户评论",
 	"summary.noComment": "未添加评论",
-	"summary.aria.other": "{count} 条划词批注。悬停查看详情。",
+	"summary.aria.other": "{count} 条划词批注。展开查看详情。",
 	"summary.title.other": "{count} 条批注",
 	"summary.removeAll": "移除全部划词批注",
-	"chip.annotation": "批注 {index}"
+	"chip.annotation": "批注 {index}",
+	"chip.previewAria": "批注预览",
+	"chip.jump": "原文",
+	"chip.jumpAria": "跳转到原文"
 };
 const en = {
 	"common.selectedText": "Selected text",
 	"common.commentPlaceholder": "Add an optional comment…",
 	"common.cancel": "Cancel",
+	"common.close": "Close",
 	"common.save": "Save",
 	"toolbar.aria": "Selection actions",
 	"toolbar.commentHint": "Add annotation…",
@@ -1820,17 +2293,21 @@ const en = {
 	"toolbar.skipComment": "Skip comment",
 	"toolbar.addComment": "Add comment",
 	"summary.hint": "Hover to view annotations",
+	"summary.hintTouch": "Tap to view annotations",
 	"summary.dialogAria": "Annotation details: {count}",
 	"summary.edit": "Edit annotation {index}",
 	"summary.remove": "Remove annotation {index}",
 	"summary.userComment": "User comment",
 	"summary.noComment": "No comment added",
-	"summary.aria.one": "{count} annotation. Hover to view details.",
-	"summary.aria.other": "{count} annotations. Hover to view details.",
+	"summary.aria.one": "{count} annotation. Open to view details.",
+	"summary.aria.other": "{count} annotations. Open to view details.",
 	"summary.title.one": "{count} annotation",
 	"summary.title.other": "{count} annotations",
 	"summary.removeAll": "Remove all annotations",
-	"chip.annotation": "Annotation {index}"
+	"chip.annotation": "Annotation {index}",
+	"chip.previewAria": "Annotation preview",
+	"chip.jump": "Original",
+	"chip.jumpAria": "Jump to original"
 };
 /**
 * Russian is not a shipped host locale: it is added through
@@ -1841,6 +2318,7 @@ const ru = {
 	"common.selectedText": "Выделенный текст",
 	"common.commentPlaceholder": "Добавить необязательный комментарий…",
 	"common.cancel": "Отмена",
+	"common.close": "Закрыть",
 	"common.save": "Сохранить",
 	"toolbar.aria": "Действия с выделенным текстом",
 	"toolbar.commentHint": "Добавить аннотацию…",
@@ -1852,21 +2330,25 @@ const ru = {
 	"toolbar.skipComment": "Без комментария",
 	"toolbar.addComment": "Добавить комментарий",
 	"summary.hint": "Наведите, чтобы увидеть аннотации",
+	"summary.hintTouch": "Нажмите, чтобы увидеть аннотации",
 	"summary.dialogAria": "Детали аннотаций: {count}",
 	"summary.edit": "Изменить аннотацию {index}",
 	"summary.remove": "Удалить аннотацию {index}",
 	"summary.userComment": "Комментарий пользователя",
 	"summary.noComment": "Комментарий не добавлен",
-	"summary.aria.one": "{count} аннотация. Наведите, чтобы увидеть детали.",
-	"summary.aria.few": "{count} аннотации. Наведите, чтобы увидеть детали.",
-	"summary.aria.many": "{count} аннотаций. Наведите, чтобы увидеть детали.",
-	"summary.aria.other": "{count} аннотаций. Наведите, чтобы увидеть детали.",
+	"summary.aria.one": "{count} аннотация. Откройте, чтобы увидеть подробности.",
+	"summary.aria.few": "{count} аннотации. Откройте, чтобы увидеть подробности.",
+	"summary.aria.many": "{count} аннотаций. Откройте, чтобы увидеть подробности.",
+	"summary.aria.other": "{count} аннотаций. Откройте, чтобы увидеть подробности.",
 	"summary.title.one": "{count} аннотация",
 	"summary.title.few": "{count} аннотации",
 	"summary.title.many": "{count} аннотаций",
 	"summary.title.other": "{count} аннотаций",
 	"summary.removeAll": "Удалить все аннотации",
-	"chip.annotation": "Аннотация {index}"
+	"chip.annotation": "Аннотация {index}",
+	"chip.previewAria": "Просмотр аннотации",
+	"chip.jump": "Оригинал",
+	"chip.jumpAria": "Перейти к оригиналу"
 };
 /** Both shipped host locales, required together by the typed `register()`. */
 const SHIPPED_DICTS = Object.freeze({
@@ -1948,10 +2430,18 @@ function useLocale() {
 }
 //#endregion
 //#region src/client/ui/AnnotationCardView.tsx
-/** Grace period so pointer transit between the summary and the panel never closes it. */
-const CLOSE_DELAY = 320;
+/** Short grace for crossing the 12px bridge; the exit starts right after it. */
+const CLOSE_DELAY$1 = 40;
 /** After a viewport change, wait this long before position-checking the pointer. */
 const SETTLE_DELAY = 600;
+/** Transparent strip on the facing side; the pointer crosses it in transit. */
+const BRIDGE = 12;
+/** Matches the list's leaving keyframe; the panel unmounts after it. */
+const EXIT_MS$1 = 120;
+/** Stable edit target: item id, with an index fallback for id-less callers. */
+function editKeyOf(item, index) {
+	return item?.id ?? `index:${index}`;
+}
 /**
 * Qoder-style summary with a placement-aware hover list.
 *
@@ -1971,21 +2461,31 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 	const settleTimerRef = (0, react.useRef)(null);
 	const lastPointerRef = (0, react.useRef)(null);
 	const editInputRef = (0, react.useRef)(null);
+	/** Set while keyboard focus is being restored after a deliberate close. */
+	const focusGuardRef = (0, react.useRef)(false);
+	/** Set by keyboard open; the effect focuses the panel once it is mounted. */
+	const enterPanelRef = (0, react.useRef)(false);
+	const panelId = (0, react.useId)();
 	const [open, setOpen] = (0, react.useState)(false);
+	const [renderPanel, setRenderPanel] = (0, react.useState)(false);
+	const [closingPanel, setClosingPanel] = (0, react.useState)(false);
+	const exitTimerRef = (0, react.useRef)(null);
 	const [editing, setEditing] = (0, react.useState)(null);
 	const [editDraft, setEditDraft] = (0, react.useState)("");
 	const place = (0, react.useCallback)(() => {
 		const root = rootRef.current;
 		const pop = popRef.current;
 		if (!root || !pop) return;
-		const { top, left, side } = placePopover(root.getBoundingClientRect(), {
-			width: pop.offsetWidth || 300,
-			height: pop.offsetHeight || 220
+		const anchor = root.getBoundingClientRect();
+		const inner = pop.firstElementChild instanceof HTMLElement ? pop.firstElementChild : null;
+		const { top, left, side } = placePopover(anchor, {
+			width: inner?.offsetWidth || pop.offsetWidth || 300,
+			height: (inner?.offsetHeight || pop.offsetHeight || 220) + BRIDGE
 		}, "top", 0);
 		pop.style.top = `${top}px`;
 		pop.style.left = `${left}px`;
-		pop.style.paddingTop = side === "bottom" ? "12px" : "12px";
-		pop.style.paddingBottom = side === "top" ? "12px" : "12px";
+		pop.style.paddingTop = side === "bottom" ? `${BRIDGE}px` : "0";
+		pop.style.paddingBottom = side === "top" ? `${BRIDGE}px` : "0";
 		pop.dataset.side = side;
 		pop.style.opacity = "1";
 	}, []);
@@ -2003,11 +2503,81 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		cancelClose();
 		setOpen(false);
 	}, [cancelClose]);
+	/** Keyboard-focusable controls in the open panel, in DOM order. */
+	const focusables = (0, react.useCallback)(() => {
+		const pop = popRef.current;
+		if (!pop) return [];
+		return Array.from(pop.querySelectorAll("button, textarea, [href], [tabindex]:not([tabindex=\"-1\"])")).filter((el) => !el.hasAttribute("disabled") && el.getClientRects().length > 0);
+	}, []);
+	const focusPanel = (0, react.useCallback)((edge = "first") => {
+		const list = focusables();
+		(edge === "first" ? list[0] : list[list.length - 1])?.focus({ preventScroll: true });
+	}, [focusables]);
+	/** Close the panel and put focus back on the summary without re-opening it. */
+	const closeAndRestoreFocus = (0, react.useCallback)(() => {
+		focusGuardRef.current = true;
+		closePop();
+		rootRef.current?.focus({ preventScroll: true });
+		window.setTimeout(() => {
+			focusGuardRef.current = false;
+		}, 0);
+	}, [closePop]);
+	const openAndEnterPanel = (0, react.useCallback)(() => {
+		enterPanelRef.current = true;
+		openPop();
+	}, [openPop]);
 	const scheduleClose = (0, react.useCallback)(() => {
 		cancelClose();
 		if (editing !== null) return;
-		closeTimerRef.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY);
+		closeTimerRef.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY$1);
 	}, [cancelClose, editing]);
+	/** Touch pointers emit pointerleave on lift; only hover pointers auto-close. */
+	const onPointerLeave = (0, react.useCallback)((event) => {
+		if (event?.pointerType === "touch") return;
+		scheduleClose();
+	}, [scheduleClose]);
+	const onSummaryPointerUp = (0, react.useCallback)((event) => {
+		if (event.pointerType !== "touch") return;
+		const target = event.target;
+		if (target instanceof Element && target.closest("button, textarea") !== null) return;
+		openPop();
+	}, [openPop]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (rootRef.current?.contains(target) || popRef.current?.contains(target)) return;
+			if (editing !== null) return;
+			setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		return () => document.removeEventListener("pointerdown", onPointerDown, true);
+	}, [open, editing]);
+	(0, react.useLayoutEffect)(() => {
+		if (open) {
+			if (exitTimerRef.current !== null) {
+				window.clearTimeout(exitTimerRef.current);
+				exitTimerRef.current = null;
+			}
+			setClosingPanel(false);
+			setRenderPanel(true);
+			return;
+		}
+		if (!renderPanel) return;
+		setClosingPanel(true);
+		exitTimerRef.current = window.setTimeout(() => {
+			exitTimerRef.current = null;
+			setRenderPanel(false);
+			setClosingPanel(false);
+		}, EXIT_MS$1);
+		return () => {
+			if (exitTimerRef.current !== null) {
+				window.clearTimeout(exitTimerRef.current);
+				exitTimerRef.current = null;
+			}
+		};
+	}, [open, renderPanel]);
 	/** True when the last seen pointer sits on the summary or the panel. */
 	const pointerInsideCluster = (0, react.useCallback)(() => {
 		const point = lastPointerRef.current;
@@ -2030,6 +2600,11 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		items,
 		editing
 	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!open || !enterPanelRef.current) return;
+		enterPanelRef.current = false;
+		focusPanel("first");
+	}, [open, focusPanel]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const track = (event) => {
@@ -2084,31 +2659,98 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 	const onPointerEnter = (0, react.useCallback)(() => {
 		openPop();
 	}, [openPop]);
-	const onPointerLeave = (0, react.useCallback)(() => {
-		scheduleClose();
-	}, [scheduleClose]);
 	const onBlur = (0, react.useCallback)((e) => {
+		if (editing !== null) return;
 		const next = e.relatedTarget;
 		if (next instanceof Node) {
 			if (rootRef.current?.contains(next)) return;
 			if (popRef.current?.contains(next)) return;
 		}
 		closePop();
-	}, [closePop]);
+	}, [closePop, editing]);
+	/** Keyboard focus opens the panel; mouse/touch focus does not. */
+	const onSummaryFocus = (0, react.useCallback)(() => {
+		if (focusGuardRef.current) return;
+		if (rootRef.current?.matches(":focus-visible")) openPop();
+	}, [openPop]);
 	const onKeyDown = (0, react.useCallback)((e) => {
 		if (e.key === "Escape") {
+			e.preventDefault();
 			if (editing !== null) setEditing(null);
-			else closePop();
+			else closeAndRestoreFocus();
+			return;
 		}
-	}, [closePop, editing]);
+		if (e.key === "Enter" || e.key === " ") {
+			if (e.target !== e.currentTarget) return;
+			e.preventDefault();
+			if (open) closePop();
+			else openAndEnterPanel();
+			return;
+		}
+		if (e.key === "ArrowDown" && e.target === e.currentTarget) {
+			e.preventDefault();
+			if (open) focusPanel("first");
+			else openAndEnterPanel();
+			return;
+		}
+		if (e.key === "Tab" && open && !e.shiftKey && e.target === e.currentTarget) {
+			e.preventDefault();
+			focusPanel("first");
+		}
+	}, [
+		closeAndRestoreFocus,
+		closePop,
+		editing,
+		focusPanel,
+		open,
+		openAndEnterPanel
+	]);
+	const onPanelKeyDown = (0, react.useCallback)((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			if (editing !== null) setEditing(null);
+			else closeAndRestoreFocus();
+			return;
+		}
+		if (e.key === "Tab" || e.key === "ArrowDown" || e.key === "ArrowUp") e.stopPropagation();
+		const list = focusables();
+		if (list.length === 0) return;
+		const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const index = active === null ? -1 : list.indexOf(active);
+		if (e.key === "Tab") {
+			if (list.length === 1) {
+				e.preventDefault();
+				list[0].focus();
+			} else if (!e.shiftKey && index === list.length - 1) {
+				e.preventDefault();
+				list[0].focus();
+			} else if (e.shiftKey && index <= 0) {
+				e.preventDefault();
+				list[list.length - 1].focus();
+			}
+			return;
+		}
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		if (e.target instanceof HTMLTextAreaElement) return;
+		e.preventDefault();
+		list[(index + (e.key === "ArrowDown" ? 1 : -1) + list.length) % list.length]?.focus({ preventScroll: true });
+	}, [
+		closeAndRestoreFocus,
+		editing,
+		focusables
+	]);
 	const startEdit = (0, react.useCallback)((index) => {
-		setEditing(index);
-		setEditDraft(items[index]?.comment ?? "");
+		const item = items[index];
+		if (!item) return;
+		setEditing(editKeyOf(item, index));
+		setEditDraft(item.comment ?? "");
 	}, [items]);
 	const commitEdit = (0, react.useCallback)(() => {
 		if (editing === null) return;
-		const item = items[editing];
-		if (item) onItemEdit?.(editing, item, editDraft);
+		const index = items.findIndex((item, i) => editKeyOf(item, i) === editing);
+		const item = items[index];
+		if (item) onItemEdit?.(index, item, editDraft);
 		setEditing(null);
 	}, [
 		editing,
@@ -2116,19 +2758,22 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		editDraft,
 		onItemEdit
 	]);
-	const panel = open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const panel = open || renderPanel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: popRef,
-		className: `${styles.summaryHover} ${styles.summaryHoverOpen}`,
+		id: panelId,
+		className: cx(styles.summaryHover, styles.summaryHoverOpen, closingPanel && !open && styles.summaryHoverLeaving),
 		role: "dialog",
 		"aria-label": t("summary.dialogAria", { count }),
 		onPointerEnter: openPop,
 		onPointerLeave,
+		onKeyDown: onPanelKeyDown,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cx(A.col, styles.summaryHoverInner),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.col, styles.summaryList),
 				children: items.map((item, i) => {
-					const isEditing = editing === i;
+					const itemKey = editKeyOf(item, i);
+					const isEditing = editing === itemKey;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: styles.summaryItem,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2164,7 +2809,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 							className: styles.summaryItemMain,
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: styles.annEditText,
+									className: cx(styles.summaryItemText, styles.summaryItemTextEdit),
 									children: item.text
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2180,6 +2825,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 									onKeyDown: (e) => {
 										if (e.key === "Escape") {
 											e.preventDefault();
+											e.stopPropagation();
 											setEditing(null);
 											return;
 										}
@@ -2198,7 +2844,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 										children: t("common.cancel")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: styles.annEditSave,
+										className: cx(A.plain, styles.annEditSave),
 										onClick: commitEdit,
 										children: t("common.save")
 									})]
@@ -2241,9 +2887,12 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 		"data-selection-annotation-summary": "true",
 		"aria-label": t("summary.aria", { count }),
 		"aria-expanded": open,
+		"aria-haspopup": "dialog",
+		"aria-controls": open ? panelId : void 0,
 		onPointerEnter,
 		onPointerLeave,
-		onFocus: onPointerEnter,
+		onPointerUp: onSummaryPointerUp,
+		onFocus: onSummaryFocus,
 		onBlur,
 		onKeyDown,
 		children: [
@@ -2254,13 +2903,20 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: cx(A.grow, styles.summaryBody),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: styles.summaryTitle,
-					children: t("summary.title", { count })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: styles.summaryHint,
-					children: t("summary.hint")
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: styles.summaryTitle,
+						children: t("summary.title", { count })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cx(styles.summaryHint, styles.summaryHintPointer),
+						children: t("summary.hint")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cx(styles.summaryHint, styles.summaryHintTouch),
+						children: t("summary.hintTouch")
+					})
+				]
 			}),
 			onRemoveAll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -2321,8 +2977,7 @@ function useSendIntercept({ itemCount, draftRef, setDraft, onFolded, foldingRef
 			onFolded();
 		};
 		const onKeyDown = (event) => {
-			if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
-			if (event.isComposing) return;
+			if (!isSubmitKey(event)) return;
 			const target = event.target;
 			if (!(target instanceof HTMLElement) || !target.isContentEditable) return;
 			const card = composerCardOf(target);
@@ -2545,10 +3200,35 @@ const QuoteCard = AnnotationPanel;
 const HOST_ATTR = "data-dsq-layer";
 /** Below the composer seat (sticky, z-index 7); above in-content stickies (6). */
 const HOST_Z = 6;
+/**
+* Raised while the comment step is open. The composer summary card lives in
+* the seat (z 7) and can extend over the scroller area; the popover, clipped
+* to the scroller, would otherwise paint underneath it.
+*/
+const HOST_Z_ABOVE_COMPOSER = 8;
 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;
+const SEAT_SELECTOR = "[data-composer-seat]";
+const CARD_SELECTOR = "[data-composer-card]";
+/**
+* The composer belonging to `scroller`, or the document's first one when the
+* scroller has no seat in its ancestor chain.
+*
+* The desktop layout puts the sticky seat outside the scroll container; a
+* document-wide lookup picks the first chat on the page, which is wrong when
+* more than one conversation is mounted. Walk out from the scroller and take
+* the first seat inside the nearest ancestor that has one.
+*/
+function composerSeatFor(scroller) {
+	if (typeof document === "undefined") return null;
+	if (scroller !== null) for (let el = scroller; el !== null && el !== document.body; el = el.parentElement) {
+		const seat = el.querySelector(SEAT_SELECTOR) ?? el.querySelector(CARD_SELECTOR);
+		if (seat !== null) return seat;
+	}
+	return document.querySelector(SEAT_SELECTOR) ?? document.querySelector(CARD_SELECTOR);
+}
 /**
 * Top edge of the composer seat, in viewport coordinates.
 *
@@ -2558,11 +3238,8 @@ let fallback = null;
 * 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 composerTop(scroller) {
+	return composerSeatFor(scroller)?.getBoundingClientRect().top ?? null;
 }
 function contentCoords(scroller, left, top) {
 	const rect = scroller.getBoundingClientRect();
@@ -2589,7 +3266,7 @@ function layerFor(scroller) {
 			const rect = scroller.getBoundingClientRect();
 			const top = rect.top + scroller.clientTop;
 			const rawBottom = top + scroller.clientHeight;
-			const cover = composerTop();
+			const cover = composerTop(scroller);
 			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));
 		},
@@ -2600,6 +3277,9 @@ function layerFor(scroller) {
 				left: left + rect.left + scroller.clientLeft - scroller.scrollLeft,
 				top: top + rect.top + scroller.clientTop - scroller.scrollTop
 			};
+		},
+		setAboveComposer: (above) => {
+			host.style.zIndex = String(above ? HOST_Z_ABOVE_COMPOSER : HOST_Z);
 		}
 	};
 	layers.set(scroller, layer);
@@ -2616,7 +3296,7 @@ function fallbackLayer() {
 		host,
 		scroller: document.body,
 		bounds: () => {
-			const bottom = composerTop() ?? window.innerHeight;
+			const bottom = composerTop(null) ?? window.innerHeight;
 			return new DOMRect(0, 0, window.innerWidth, Math.max(0, bottom));
 		},
 		toContent: (left, top) => ({
@@ -2626,7 +3306,10 @@ function fallbackLayer() {
 		fromContent: (left, top) => ({
 			left,
 			top
-		})
+		}),
+		setAboveComposer: (above) => {
+			host.style.zIndex = String(above ? HOST_Z_ABOVE_COMPOSER : HOST_Z);
+		}
 	};
 	return fallback;
 }
@@ -2811,6 +3494,69 @@ function linkTarget(text, anchorHref) {
 	return selectionUrl(text) ?? (anchorHref ? selectionUrl(anchorHref) : null);
 }
 //#endregion
+//#region src/client/ui/touch.ts
+/**
+* The same query the coarse-pointer CSS uses. Keeping JS and CSS on one
+* criterion means a device never gets the bottom bar with desktop positioning
+* (or the reverse).
+*/
+const COARSE_POINTER = "(hover: none), (pointer: coarse)";
+function coarsePointer() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(COARSE_POINTER).matches;
+}
+function useCoarsePointer() {
+	const [coarse, setCoarse] = (0, react.useState)(coarsePointer);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(COARSE_POINTER);
+		const onChange = (event) => setCoarse(event.matches);
+		setCoarse(query.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return coarse;
+}
+function measure() {
+	if (typeof window === "undefined") return {
+		inset: 0,
+		height: 0
+	};
+	const viewport = window.visualViewport;
+	const layout = document.documentElement.clientHeight || window.innerHeight;
+	if (!viewport) return {
+		inset: 0,
+		height: window.innerHeight
+	};
+	return {
+		inset: Math.max(0, Math.round(layout - viewport.height - viewport.offsetTop)),
+		height: Math.round(viewport.height)
+	};
+}
+/**
+* Ride above the soft keyboard. `innerHeight` alone is not enough: iOS keeps the
+* layout viewport at full height and only shrinks the visual viewport, while
+* Android resizes the layout viewport. The inset is zero in the Android case
+* because the fixed element then already sits above the keyboard.
+*/
+function useVisualViewport(enabled) {
+	const [metrics, setMetrics] = (0, react.useState)(measure);
+	(0, react.useEffect)(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const update = () => setMetrics(measure());
+		update();
+		window.visualViewport?.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("scroll", update);
+		window.addEventListener("resize", update);
+		return () => {
+			window.visualViewport?.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("scroll", update);
+			window.removeEventListener("resize", update);
+		};
+	}, [enabled]);
+	return metrics;
+}
+//#endregion
 //#region src/client/SelectionToolbar.tsx
 /** Cap for the auto-growing comment box; beyond this it scrolls internally. */
 const COMMENT_MAX_HEIGHT = 220;
@@ -2827,6 +3573,8 @@ function SelectionToolbar({ sessionId }) {
 	activeRef.current = active;
 	/** Annotation saved when the comment step opened; the box only edits it. */
 	const pendingIdRef = (0, react.useRef)(null);
+	const touch = useCoarsePointer();
+	const viewport = useVisualViewport(touch);
 	(0, react.useEffect)(() => {
 		ensureToolbarStyles();
 		if (sessionId) bindAnnotationSession(sessionId);
@@ -2944,6 +3692,7 @@ function SelectionToolbar({ sessionId }) {
 		refresh
 	]);
 	const placeCommentPop = (0, react.useCallback)(() => {
+		if (touch) return;
 		const snapshot = activeRef.current;
 		const layer = snapshot?.layer;
 		const toolbar = toolbarRef.current;
@@ -2988,33 +3737,46 @@ function SelectionToolbar({ sessionId }) {
 		const toolbarAt = layer.toContent(leftView, topView);
 		toolbar.style.left = `${toolbarAt.left}px`;
 		toolbar.style.top = `${toolbarAt.top}px`;
-	}, []);
+	}, [touch]);
 	(0, react.useLayoutEffect)(() => {
-		if (phase === "comment") placeCommentPop();
+		if (phase === "comment" && !touch) placeCommentPop();
 	}, [
 		active,
 		phase,
-		placeCommentPop
+		placeCommentPop,
+		touch
+	]);
+	const layer = active?.layer;
+	(0, react.useLayoutEffect)(() => {
+		if (!layer || touch) return;
+		layer.setAboveComposer(phase === "comment");
+		return () => layer.setAboveComposer(false);
+	}, [
+		layer,
+		phase,
+		touch
 	]);
 	(0, react.useEffect)(() => {
-		if (phase === "comment") commentRef.current?.focus();
-	}, [phase]);
+		if (phase === "comment" && !touch) commentRef.current?.focus();
+	}, [phase, touch]);
 	(0, react.useEffect)(() => {
+		if (touch) return;
 		const onResize = () => placeCommentPop();
 		window.addEventListener("resize", onResize);
 		return () => window.removeEventListener("resize", onResize);
-	}, [placeCommentPop]);
+	}, [placeCommentPop, touch]);
 	(0, react.useLayoutEffect)(() => {
 		if (phase !== "comment") return;
 		const area = commentRef.current;
 		if (!area) return;
 		area.style.height = "auto";
 		area.style.height = `${Math.min(area.scrollHeight, COMMENT_MAX_HEIGHT)}px`;
-		placeCommentPop();
+		if (!touch) placeCommentPop();
 	}, [
 		phase,
 		comment,
-		placeCommentPop
+		placeCommentPop,
+		touch
 	]);
 	const handleToolbarPointerDown = (0, react.useCallback)((event) => {
 		event.preventDefault();
@@ -3066,14 +3828,147 @@ function SelectionToolbar({ sessionId }) {
 		else pendingIdRef.current = null;
 		clearNativeSelection();
 		hide();
-		window.setTimeout(focusComposer, 16);
+		if (!touch) window.setTimeout(focusComposer, 16);
+	}, [
+		flushComment,
+		hide,
+		touch
+	]);
+	/** Dismiss the sheet without discarding what was typed (desktop outside-click). */
+	const closeCommentSheet = (0, react.useCallback)(() => {
+		flushComment();
+		hide();
 	}, [flushComment, hide]);
 	if (!active) return null;
 	const toolbarStyle = {
 		left: active.left,
 		top: active.top
 	};
-	const link = linkTarget(active.text, active.anchorHref);
+	const actions = [
+		...linkTarget(active.text, active.anchorHref) ? [{
+			key: "open",
+			icon: "external-link",
+			label: t("toolbar.openLink"),
+			onClick: handleOpenLink
+		}] : [],
+		{
+			key: "copy",
+			icon: "copy",
+			label: t("toolbar.copy"),
+			onClick: () => void handleCopy()
+		},
+		{
+			key: "add",
+			icon: "plus",
+			label: t("toolbar.addToTask"),
+			onClick: openComment
+		}
+	];
+	const actionRow = (stacked) => actions.map((action, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [!stacked && index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: styles.divider,
+		"aria-hidden": "true"
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: cx(A.plain, stacked ? A.col : A.inlineRow, stacked ? styles.touchAction : styles.button),
+		onClick: action.onClick,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
+			name: action.icon,
+			size: stacked ? 18 : 14
+		}), stacked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: action.label }) : action.label]
+	})] }, action.key));
+	const commentField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		ref: commentRef,
+		className: cx(A.box, styles.commentInput, touch && styles.touchComment),
+		placeholder: t("common.commentPlaceholder"),
+		value: comment,
+		onChange: (e) => setComment(e.target.value),
+		onKeyDown: (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				pendingIdRef.current = null;
+				hide();
+				return;
+			}
+			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				finishComment(true);
+			}
+		}
+	});
+	const commentActions = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx(A.row, styles.commentActions, touch && styles.touchActions),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: cx(A.plain, A.inlineRow, styles.button, touch && styles.touchSecondary),
+			onClick: () => finishComment(false),
+			children: t("toolbar.skipComment")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: cx(A.plain, A.inlineRow, styles.button, styles.buttonAddComment),
+			disabled: !comment.trim(),
+			onClick: () => finishComment(true),
+			children: t("toolbar.addComment")
+		})]
+	});
+	if (touch) {
+		const bottom = `calc(${viewport.inset}px + 8px + env(safe-area-inset-bottom, 0px))`;
+		return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			phase === "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: toolbarRef,
+				className: cx(A.row, styles.touchBar),
+				style: { bottom },
+				role: "toolbar",
+				"aria-label": t("toolbar.aria"),
+				"data-dsq-toolbar": "true",
+				"data-touch": "true",
+				onPointerDown: handleToolbarPointerDown,
+				children: actionRow(true)
+			}) : null,
+			phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.touchScrim,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: commentWrapRef,
+				className: cx(A.col, styles.touchSheet),
+				style: {
+					bottom,
+					maxHeight: `${Math.max(240, Math.round(viewport.height * .72))}px`
+				},
+				role: "dialog",
+				"aria-label": t("toolbar.commentDialogAria"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cx(A.row, styles.touchSheetHead),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: styles.touchSheetTitle,
+							children: t("toolbar.commentHint")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: cx(A.plain, A.gridMid, styles.touchSheetClose),
+							"aria-label": t("common.close"),
+							onClick: closeCommentSheet,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
+								name: "x",
+								size: 18
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: styles.touchQuote,
+						children: active.text
+					}),
+					commentField,
+					commentActions
+				]
+			})] }) : null,
+			status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.touchStatus,
+				style: { bottom: `calc(${viewport.inset}px + 72px + env(safe-area-inset-bottom, 0px))` },
+				role: "status",
+				children: status
+			}) : null
+		] }), document.body);
+	}
 	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,
@@ -3095,45 +3990,9 @@ function SelectionToolbar({ sessionId }) {
 					},
 					children: t("toolbar.commentHint")
 				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: cx(A.inlineRow, styles.toolbarInner),
-				children: [
-					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: cx(A.plain, A.inlineRow, styles.button),
-						onClick: handleOpenLink,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
-							name: "external-link",
-							size: 14
-						}), t("toolbar.openLink")]
-					}) : null,
-					link ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: styles.divider,
-						"aria-hidden": "true"
-					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: cx(A.plain, A.inlineRow, styles.button),
-						onClick: () => void handleCopy(),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
-							name: "copy",
-							size: 14
-						}), t("toolbar.copy")]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: styles.divider,
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: cx(A.plain, A.inlineRow, styles.button),
-						onClick: openComment,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
-							name: "plus",
-							size: 14
-						}), t("toolbar.addToTask")]
-					})
-				]
+				children: actionRow(false)
 			})
 		}),
 		phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3142,39 +4001,7 @@ function SelectionToolbar({ sessionId }) {
 			role: "dialog",
 			"aria-label": t("toolbar.commentDialogAria"),
 			onPointerDown: handleToolbarPointerDown,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-				ref: commentRef,
-				className: cx(A.box, styles.commentInput),
-				placeholder: t("common.commentPlaceholder"),
-				value: comment,
-				onChange: (e) => setComment(e.target.value),
-				onKeyDown: (e) => {
-					if (e.key === "Escape") {
-						e.preventDefault();
-						pendingIdRef.current = null;
-						hide();
-						return;
-					}
-					if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-						e.preventDefault();
-						finishComment(true);
-					}
-				}
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: styles.commentActions,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: cx(A.plain, A.inlineRow, styles.button),
-					onClick: () => finishComment(false),
-					children: t("toolbar.skipComment")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: cx(A.plain, A.inlineRow, styles.button, styles.buttonAddComment),
-					disabled: !comment.trim(),
-					onClick: () => finishComment(true),
-					children: t("toolbar.addComment")
-				})]
-			})]
+			children: [commentField, commentActions]
 		}) : null,
 		status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: styles.status,
@@ -3185,6 +4012,423 @@ function SelectionToolbar({ sessionId }) {
 	] }), active.layer.host);
 }
 //#endregion
+//#region src/client/transcript/quote-registry.ts
+/**
+* Quotes rendered for a user message, keyed by that message's flow key.
+*
+* The durable annotation data lives in the user turn, but the chip that refers
+* to it lives in the assistant reply. The chip decorator walks the DOM; this
+* registry is how it resolves an ordinal back to the original text and comment
+* without re-parsing the protocol or exposing JSON in the DOM.
+*/
+const quotesByOwner = /* @__PURE__ */ new Map();
+function registerMessageQuotes(ownerKey, quotes) {
+	quotesByOwner.set(ownerKey, quotes);
+	return () => {
+		if (quotesByOwner.get(ownerKey) === quotes) quotesByOwner.delete(ownerKey);
+	};
+}
+function messageQuotes(ownerKey) {
+	return quotesByOwner.get(ownerKey);
+}
+//#endregion
+//#region src/client/dom/chipPreview.ts
+/**
+* Hover/focus/click preview for `:dsh-annotation{index="N"}` chips.
+*
+* The chip decorator is plain DOM, so the preview is too. One body-level
+* preview is reused for every chip: `contain: layout` surfaces in the
+* transcript would otherwise become the containing block of a fixed popover.
+*
+* Clicking the chip no longer jumps: it pins the preview, and the preview's
+* button owns the jump (same contract on touch, where there is no hover).
+*/
+const HOVER_DELAY = 250;
+/** Just enough for the pointer to cross the 8px gap into the preview. */
+const CLOSE_DELAY = 40;
+const GAP = 8;
+/** Matches the leaving keyframe; the node is detached after it finishes. */
+const EXIT_MS = 120;
+const JUMP_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M7 7h10v10\"/><path d=\"M7 17 17 7\"/></svg>";
+let preview = null;
+let jumpButton = null;
+let activeChip = null;
+let activeMark = null;
+let activeOwnerKey = null;
+let activeMessageId = null;
+let activeText = "";
+let activeIndex = 0;
+let pinned = false;
+let showTimer = 0;
+let hideTimer = 0;
+let frame = 0;
+let suppressFocusOpen = false;
+let observer = null;
+let onDocPointerDown = null;
+let onScroll = null;
+let onResize = null;
+let leavingBox = null;
+let leavingTimer = 0;
+function cancelTimers() {
+	if (showTimer !== 0) window.clearTimeout(showTimer);
+	if (hideTimer !== 0) window.clearTimeout(hideTimer);
+	showTimer = 0;
+	hideTimer = 0;
+}
+/** A new preview replaces any panel still animating out. */
+function flushLeavingPreview() {
+	if (leavingTimer !== 0) {
+		window.clearTimeout(leavingTimer);
+		leavingTimer = 0;
+	}
+	leavingBox?.remove();
+	leavingBox = null;
+}
+function animatePreviewOut(box) {
+	flushLeavingPreview();
+	const active = document.activeElement;
+	if (active instanceof HTMLElement && box.contains(active)) active.blur();
+	box.classList.add(styles.chipPreviewLeaving);
+	box.setAttribute("aria-hidden", "true");
+	leavingBox = box;
+	leavingTimer = window.setTimeout(() => {
+		leavingTimer = 0;
+		if (leavingBox === box) leavingBox = null;
+		box.remove();
+	}, EXIT_MS);
+}
+/**
+* The annotated text can sit in an earlier assistant turn while the quotes were
+* serialized into the user turn that sent them. The mark id is built by
+* `TranscriptQuoteCard` as `dqsm_<ownerFlowKey>_<zeroBasedIndex>`, so it — not
+* the mark's physical ancestor — names the message that owns the quotes.
+*/
+function quotesOwnerOf(mark) {
+	if (!mark) return null;
+	const id = mark.getAttribute("data-dsq-ann-mark") ?? "";
+	const match = /^dqsm_(.+)_\d+$/.exec(id);
+	return match ? match[1] : null;
+}
+/** The quote card for the user turn that sent the annotation, before the chip. */
+function quotesOwnerBefore(chip, index) {
+	const cards = [...document.querySelectorAll(".dsq_tSummary")];
+	for (let i = cards.length - 1; i >= 0; i -= 1) {
+		const card = cards[i];
+		if ((card.compareDocumentPosition(chip) & Node.DOCUMENT_POSITION_FOLLOWING) === 0) continue;
+		const ownerKey = card.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key");
+		if (ownerKey && messageQuotes(ownerKey)?.[index - 1]) return ownerKey;
+	}
+	return null;
+}
+function markByOwner(ownerKey, index) {
+	const id = `dqsm_${ownerKey}_${index - 1}`;
+	const marks = [...document.querySelectorAll("[data-dsq-ann-mark]")].filter((mark) => mark.getAttribute("data-dsq-ann-mark") === id);
+	return marks.find((mark) => mark.getAttribute("data-dsq-ann-index") === String(index)) ?? marks[0] ?? null;
+}
+function flowItem(messageId) {
+	for (const item of document.querySelectorAll("[data-chat-flow-key]")) if (item.getAttribute("data-chat-flow-key") === messageId) return item;
+	return null;
+}
+function quoteCardFor(ownerKey) {
+	for (const card of document.querySelectorAll(".dsq_tSummary")) if (card.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key") === ownerKey) return card;
+	return null;
+}
+function isVisible(el) {
+	if (!el?.isConnected) return false;
+	const rect = el.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0;
+}
+function flashMessage(el) {
+	el.classList.add(styles.annMessageFlash);
+	window.setTimeout(() => el.classList.remove(styles.annMessageFlash), 1400);
+}
+function cancelClose() {
+	if (hideTimer !== 0) window.clearTimeout(hideTimer);
+	hideTimer = 0;
+}
+function scheduleClose() {
+	cancelClose();
+	if (pinned) return;
+	hideTimer = window.setTimeout(() => closeChipPreview(false), CLOSE_DELAY);
+}
+function scheduleShow(chip, index) {
+	cancelTimers();
+	showTimer = window.setTimeout(() => showChipPreview(chip, index, false), HOVER_DELAY);
+}
+function scheduleReposition() {
+	if (frame !== 0) return;
+	frame = window.requestAnimationFrame(() => {
+		frame = 0;
+		reposition();
+	});
+}
+function reposition() {
+	if (!preview || !activeChip) return;
+	if (!activeChip.isConnected) {
+		closeChipPreview(false);
+		return;
+	}
+	const anchor = activeChip.getBoundingClientRect();
+	if (anchor.bottom < 0 || anchor.top > window.innerHeight) {
+		closeChipPreview(false);
+		return;
+	}
+	const { top, left } = placePopover(anchor, {
+		width: preview.offsetWidth || 320,
+		height: preview.offsetHeight || 180
+	}, "top", GAP);
+	preview.style.top = `${top}px`;
+	preview.style.left = `${left}px`;
+}
+function appendLabel(parent, text) {
+	const label = document.createElement("div");
+	label.className = styles.chipPreviewLabel;
+	label.textContent = text;
+	parent.append(label);
+}
+function appendText(parent, className, text) {
+	const node = document.createElement("div");
+	node.className = className;
+	node.textContent = text;
+	parent.append(node);
+}
+function jumpToMark(event) {
+	const ownerKey = activeOwnerKey;
+	const messageId = activeMessageId;
+	const text = activeText;
+	const index = activeIndex;
+	const keyboard = event.detail === 0;
+	let mark = activeMark?.isConnected ? activeMark : null;
+	if (!mark && ownerKey) mark = markByOwner(ownerKey, index);
+	const card = ownerKey ? quoteCardFor(ownerKey) : null;
+	const ownerItem = ownerKey ? flowItem(ownerKey) : null;
+	const sourceItem = messageId ? flowItem(messageId) : null;
+	closeChipPreview(false);
+	if (isVisible(mark)) {
+		mark.tabIndex = -1;
+		flashAnnotationMark(mark);
+		if (keyboard) window.setTimeout(() => {
+			if (mark.isConnected) mark.focus({ preventScroll: true });
+		}, 450);
+		return;
+	}
+	const fallback = isVisible(card) ? card : ownerItem ?? sourceItem;
+	if (fallback) {
+		fallback.scrollIntoView({
+			block: "center",
+			behavior: "smooth"
+		});
+		flashMessage(fallback);
+		if (keyboard) window.setTimeout(() => {
+			if (!fallback.isConnected) return;
+			const next = fallback.querySelector("button, [tabindex]") ?? fallback;
+			if (next === fallback) fallback.tabIndex = -1;
+			next.focus({ preventScroll: true });
+		}, 450);
+		return;
+	}
+	if (text) scrollToAnnotation(index, text);
+}
+function buildPreview(index, quoteText, comment) {
+	const box = document.createElement("div");
+	box.className = cx(A.col, styles.chipPreview);
+	box.setAttribute("data-dsq-chip-preview", "true");
+	box.setAttribute("role", "dialog");
+	box.setAttribute("aria-label", t("chip.previewAria"));
+	const body = document.createElement("div");
+	body.className = styles.chipPreviewBody;
+	body.style.animation = "none";
+	const head = document.createElement("div");
+	head.className = cx(A.row, styles.chipPreviewHead);
+	const title = document.createElement("span");
+	title.className = styles.chipPreviewTitle;
+	title.textContent = t("chip.annotation", { index });
+	jumpButton = document.createElement("button");
+	jumpButton.type = "button";
+	jumpButton.className = cx(A.plain, A.inlineRow, styles.chipPreviewJump);
+	jumpButton.setAttribute("data-dsq-chip-jump", "true");
+	jumpButton.setAttribute("aria-label", t("chip.jumpAria"));
+	jumpButton.title = t("chip.jumpAria");
+	jumpButton.insertAdjacentHTML("afterbegin", JUMP_ICON);
+	const jumpLabel = document.createElement("span");
+	jumpLabel.textContent = t("chip.jump");
+	jumpButton.append(jumpLabel);
+	jumpButton.addEventListener("click", jumpToMark);
+	head.append(title, jumpButton);
+	body.append(head);
+	appendLabel(body, t("common.selectedText"));
+	appendText(body, styles.chipPreviewQuote, quoteText);
+	if (comment !== null) {
+		appendLabel(body, t("summary.userComment"));
+		appendText(body, cx(styles.chipPreviewComment, comment === "" && styles.chipPreviewCommentEmpty), comment === "" ? t("summary.noComment") : comment);
+	}
+	box.append(body);
+	box.addEventListener("pointerenter", cancelClose);
+	box.addEventListener("pointerleave", (event) => {
+		if (event.pointerType === "touch") return;
+		scheduleClose();
+	});
+	box.addEventListener("focusout", (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && (box.contains(next) || activeChip?.contains(next))) return;
+		closeChipPreview(false);
+	});
+	box.addEventListener("keydown", (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		closeChipPreview(true);
+	});
+	return box;
+}
+function showChipPreview(chip, index, nextPinned) {
+	cancelTimers();
+	if (!chip.isConnected) return;
+	let mark = findAnnotationMarkBefore(index, chip);
+	let ownerKey = quotesOwnerOf(mark) ?? mark?.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key") ?? null;
+	let quote = ownerKey ? messageQuotes(ownerKey)?.[index - 1] : void 0;
+	if (!quote) {
+		const fallbackKey = quotesOwnerBefore(chip, index);
+		if (fallbackKey) {
+			ownerKey = fallbackKey;
+			quote = messageQuotes(fallbackKey)?.[index - 1];
+		}
+	}
+	if (ownerKey) {
+		const exact = markByOwner(ownerKey, index);
+		if (exact) mark = exact;
+		else if (quotesOwnerOf(mark) !== ownerKey) mark = null;
+	}
+	const text = (quote?.text ?? mark?.textContent ?? "").trim();
+	if (text === "") return;
+	if (activeChip === chip && preview) {
+		pinned = pinned || nextPinned;
+		return;
+	}
+	closeChipPreview(false);
+	flushLeavingPreview();
+	activeChip = chip;
+	activeMark = mark;
+	activeOwnerKey = ownerKey;
+	activeMessageId = quote?.messageId ?? null;
+	activeText = text;
+	activeIndex = index;
+	pinned = nextPinned;
+	const box = buildPreview(index, text, quote ? (quote.comment ?? "").trim() : null);
+	preview = box;
+	box.style.visibility = "hidden";
+	document.body.append(box);
+	const panel = {
+		width: box.offsetWidth || 320,
+		height: box.offsetHeight || 180
+	};
+	const { top, left } = placePopover(chip.getBoundingClientRect(), panel, "top", GAP);
+	box.style.top = `${top}px`;
+	box.style.left = `${left}px`;
+	box.style.visibility = "";
+	const animated = box.querySelector(`.${styles.chipPreviewBody}`);
+	if (animated) animated.style.animation = "";
+	onDocPointerDown = (event) => {
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		if (box.contains(target) || activeChip?.contains(target)) return;
+		closeChipPreview(false);
+	};
+	document.addEventListener("pointerdown", onDocPointerDown, true);
+	onScroll = scheduleReposition;
+	document.addEventListener("scroll", onScroll, true);
+	onResize = scheduleReposition;
+	window.addEventListener("resize", onResize);
+	observer = new MutationObserver(() => {
+		if (activeChip && !activeChip.isConnected) closeChipPreview(false);
+	});
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+}
+/** Close the preview. `restoreFocus` is for a deliberate Escape. */
+function closeChipPreview(restoreFocus) {
+	const box = preview;
+	const chip = activeChip;
+	cancelTimers();
+	if (frame !== 0) {
+		window.cancelAnimationFrame(frame);
+		frame = 0;
+	}
+	if (observer) {
+		observer.disconnect();
+		observer = null;
+	}
+	if (onDocPointerDown) {
+		document.removeEventListener("pointerdown", onDocPointerDown, true);
+		onDocPointerDown = null;
+	}
+	if (onScroll) {
+		document.removeEventListener("scroll", onScroll, true);
+		onScroll = null;
+	}
+	if (onResize) {
+		window.removeEventListener("resize", onResize);
+		onResize = null;
+	}
+	preview = null;
+	jumpButton = null;
+	activeChip = null;
+	activeMark = null;
+	activeOwnerKey = null;
+	activeMessageId = null;
+	activeText = "";
+	activeIndex = 0;
+	pinned = false;
+	if (restoreFocus && chip?.isConnected) {
+		suppressFocusOpen = true;
+		chip.focus({ preventScroll: true });
+	}
+	if (box) animatePreviewOut(box);
+	suppressFocusOpen = false;
+}
+/** Bind the preview to a freshly decorated chip. Safe to call twice. */
+function bindChipPreview(chip, index) {
+	if (chip.dataset.dsqChipPreviewBound === "true") return;
+	chip.dataset.dsqChipPreviewBound = "true";
+	chip.addEventListener("pointerenter", (event) => {
+		if (event.pointerType === "touch") return;
+		if (activeChip === chip && preview) {
+			cancelClose();
+			return;
+		}
+		scheduleShow(chip, index);
+	});
+	chip.addEventListener("pointerleave", (event) => {
+		if (event.pointerType === "touch") return;
+		scheduleClose();
+	});
+	chip.addEventListener("focus", () => {
+		if (suppressFocusOpen) return;
+		showChipPreview(chip, index, true);
+	});
+	chip.addEventListener("blur", (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && (preview?.contains(next) || chip.contains(next))) return;
+		closeChipPreview(false);
+	});
+	chip.addEventListener("click", () => showChipPreview(chip, index, true));
+	chip.addEventListener("keydown", (event) => {
+		if (event.key === "Escape") {
+			if (activeChip !== chip) return;
+			event.preventDefault();
+			closeChipPreview(true);
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			showChipPreview(chip, index, true);
+			jumpButton?.focus();
+		}
+	});
+}
+//#endregion
 //#region src/client/dom/decorateAnnotationDirectives.ts
 /**
 * Turn model-written `:dsh-annotation{index="N"}` into clickable chips.
@@ -3197,7 +4441,7 @@ function decorateTextNode(node) {
 	if (!value || !value.includes(":dsh-annotation{")) return;
 	const parent = node.parentElement;
 	if (!parent || parent.closest(`[data-${DECO}]`)) return;
-	if (parent.closest("pre, code, [data-dsq-toolbar]")) return;
+	if (parent.closest("pre, code, [data-dsq-toolbar], [data-dsq-chip-preview]")) return;
 	if (parent.closest("textarea, input, [data-lexical-editor=\"true\"]")) return;
 	const frag = document.createDocumentFragment();
 	let last = 0;
@@ -3214,10 +4458,7 @@ function decorateTextNode(node) {
 		chip.setAttribute("data-dsq-deco", "true");
 		chip.dataset[DECO_KEY] = String(index);
 		chip.textContent = t("chip.annotation", { index });
-		chip.addEventListener("click", () => {
-			const mark = findAnnotationMarkBefore(index, chip);
-			if (mark) flashAnnotationMark(mark);
-		});
+		bindChipPreview(chip, index);
 		frag.append(chip);
 		last = m.index + m[0].length;
 	}
@@ -3247,6 +4488,7 @@ function decorateAnnotationDirectives(root) {
 * literal, so `decorateTextNode()` returns before it can touch the DOM.
 */
 function refreshDirectiveChips(root) {
+	closeChipPreview(false);
 	const el = root ?? (typeof document === "undefined" ? void 0 : document.body);
 	if (!el) return;
 	for (const chip of el.querySelectorAll(`[data-${DECO}]`)) {
@@ -3279,66 +4521,142 @@ function watchAnnotationDirectives(root) {
 //#endregion
 //#region src/client/dom/stripSubmissionEcho.ts
 /**
-* Strip the annotation protocol from the host's local submission echo.
+* Strip the annotation protocol from host surfaces that paint the raw draft.
 *
 * 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.
+* send gesture just folded in. A message submitted while a turn is running is
+* also previewed in the queue dock (`[data-queue-dock]`) from the same wire
+* content. Both are rendered by the chat flow itself, not by a
+* `conversation.chat.node` registration, so `UserMessageDisplay` never sees
+* them; without this, the raw JSON sits on screen until (or unless) a durable
+* message replaces it.
 *
 * 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.
+* only: the echo's protocol run is rewritten in place, and the queue preview's
+* word-split text container is rebuilt to the user's own text. The echo row
+* itself is never rebuilt (it may carry session chips); a truncated block is
+* left untouched, 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("*")) {
+const QUEUE_DOCK_SELECTOR = "[data-queue-dock]";
+const SURFACE_SELECTOR = `${ECHO_SELECTOR}, ${QUEUE_DOCK_SELECTOR}`;
+function carriesProtocol(text) {
+	return text.includes("<response-annotations>") && text.includes("</response-annotations>");
+}
+/** Deepest runs that carry both markers. A queue dock may carry one per row. */
+function protocolRuns(row) {
+	if (row.children.length === 0) return carriesProtocol(row.textContent ?? "") ? [row] : [];
+	const runs = [];
+	for (const el of Array.from(row.querySelectorAll("*"))) {
 		if (el.children.length > 0) continue;
-		const text = el.textContent ?? "";
-		if (text.includes("<response-annotations>") && text.includes("</response-annotations>")) return el;
+		if (carriesProtocol(el.textContent ?? "")) runs.push(el);
 	}
-	return null;
+	return runs;
+}
+/**
+* Rewrite one surface's protocol runs in place.
+*
+* Idempotent: once stripped a run no longer carries both markers, so a later
+* sweep (after the host re-renders the surface) is a no-op rather than a
+* reason to remember the node forever.
+*/
+function stripEchoRow(row) {
+	let stripped = false;
+	for (const run of protocolRuns(row)) {
+		const original = run.textContent ?? "";
+		const scan = scanAnnotatedMessage(original);
+		if (scan.rest === original) continue;
+		run.textContent = scan.rest;
+		stripped = true;
+	}
+	return stripped;
+}
+/**
+* Innermost text containers whose text carries a complete block.
+*
+* Queue previews go through the host's `conversation.user.text` factory, which
+* splits the draft into per-word spans; the open and close markers therefore
+* never share a leaf. The innermost ancestor holding both is the preview's
+* text container — rewriting that one leaves the row's icon and actions alone.
+*/
+function textContainers(surface) {
+	const all = Array.from(surface.querySelectorAll("*")).filter((el) => el.children.length > 0 && carriesProtocol(el.textContent ?? ""));
+	return all.filter((el) => !all.some((other) => other !== el && el.contains?.(other) === true));
 }
-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, "");
+/**
+* Rewrite each queued row's text container in place. Unlike the echo, the
+* preview is a word-split run with no chips or attachments inside it, so
+* rebuilding that container is safe; the row itself is never touched.
+*/
+function stripQueueDock(dock) {
+	let stripped = false;
+	for (const container of textContainers(dock)) {
+		const original = container.textContent ?? "";
+		const scan = scanAnnotatedMessage(original);
+		if (scan.rest === original) continue;
+		container.textContent = scan.rest;
+		stripped = true;
+	}
+	return stripped;
 }
 /**
-* Watch for local submission echoes and rewrite the protocol block out of
-* them. Runs once immediately, then on every DOM insertion.
+* Watch for host surfaces that paint the composed draft and rewrite the
+* protocol block out of them. Runs once immediately, then only on mutations
+* that can affect one of those surfaces.
 */
 function watchSubmissionEcho(root) {
 	const scope = root ?? (typeof document === "undefined" ? void 0 : document.body);
 	if (!scope) return () => {};
+	const stripSurface = (surface) => {
+		const node = surface;
+		if (surface.matches(QUEUE_DOCK_SELECTOR)) stripQueueDock(node);
+		else stripEchoRow(node);
+	};
 	const sweep = () => {
-		for (const row of scope.querySelectorAll(ECHO_SELECTOR)) strip(row);
+		for (const surface of Array.from(scope.querySelectorAll(SURFACE_SELECTOR))) stripSurface(surface);
 	};
 	sweep();
 	if (typeof MutationObserver === "undefined") return () => {};
+	const pending = /* @__PURE__ */ new Set();
 	let frame = 0;
-	const observer = new MutationObserver(() => {
+	const collect = (records) => {
+		for (const record of records) {
+			if (record.type === "characterData") {
+				const row = record.target.parentElement?.closest(SURFACE_SELECTOR);
+				if (row) pending.add(row);
+				continue;
+			}
+			for (const node of Array.from(record.addedNodes)) {
+				const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+				if (el === null) continue;
+				const row = el.closest(SURFACE_SELECTOR);
+				if (row) {
+					pending.add(row);
+					continue;
+				}
+				for (const inner of Array.from(el.querySelectorAll(SURFACE_SELECTOR))) pending.add(inner);
+			}
+		}
+	};
+	const observer = new MutationObserver((records) => {
+		collect(records);
+		if (pending.size === 0) return;
 		if (frame !== 0) return;
 		frame = window.requestAnimationFrame(() => {
 			frame = 0;
-			sweep();
+			for (const surface of pending) stripSurface(surface);
+			pending.clear();
 		});
 	});
 	observer.observe(scope, {
 		childList: true,
-		subtree: true
+		subtree: true,
+		characterData: true
 	});
 	return () => {
 		observer.disconnect();
+		pending.clear();
 		if (frame !== 0) window.cancelAnimationFrame(frame);
 	};
 }
@@ -3370,6 +4688,12 @@ function TranscriptQuoteCard({ node }) {
 			endOffset: quote.endOffset
 		})));
 	}, [quotes]);
+	(0, react.useEffect)(() => {
+		if (quotes.length === 0) return;
+		const ownerKey = stackRef.current?.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key");
+		if (!ownerKey) return;
+		return registerMessageQuotes(ownerKey, quotes);
+	}, [quotes]);
 	const markIdOf = (0, react.useCallback)((index) => {
 		const ownerKey = stackRef.current?.closest("[data-chat-flow-key]")?.getAttribute("data-chat-flow-key");
 		return ownerKey ? `dqsm_${ownerKey}_${index}` : void 0;
@@ -3438,9 +4762,9 @@ function imageAttachments(raw) {
 * 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.
+* The annotation summary is the only extra DOM, prepended above the host row.
 *
-* Cards must live inside the `user` node view rather than on a
+* The summary 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
@@ -3448,10 +4772,10 @@ function imageAttachments(raw) {
 */
 function UserMessageDisplay(props) {
 	ensureToolbarStyles();
-	const { node, hostUserOf, ...rest } = props;
+	const { node, hostNodeOf, ...rest } = props;
 	const raw = contentBlocksToText(node.data?.content);
 	const scanned = scanAnnotatedMessage(raw);
-	const text = scanned.annotations.length > 0 ? scanned.rest : displayTextWithoutQuote(raw).trim();
+	const text = displayTextWithoutQuote(scanned.rest).trim();
 	const quotes = scanned.annotations;
 	const rewritten = quotes.length > 0 || text !== raw.trim();
 	const displayNode = (0, react.useMemo)(() => rewritten ? {
@@ -3466,7 +4790,7 @@ function UserMessageDisplay(props) {
 		text
 	]);
 	const cards = quotes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TranscriptQuoteCard, { node: { data: { quotes } } }) : null;
-	const Host = hostUserOf?.();
+	const Host = hostNodeOf?.();
 	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
@@ -3496,6 +4820,27 @@ function UserMessageDisplay(props) {
 	})] });
 }
 //#endregion
+//#region src/client/transcript/host-user.ts
+const HOST_NODE_NAME = "UserMessageNodeView";
+/** Component name across memo/forwardRef/plain function shapes. */
+function componentName(component) {
+	const candidate = component;
+	return candidate?.type?.name ?? candidate?.render?.name ?? candidate?.name ?? candidate?.displayName;
+}
+/**
+* The host view registered for `key`, or undefined when it cannot be
+* identified safely.
+*
+* A renamed host leaves one non-self entry for that key, which is still
+* almost certainly the host; more than one is ambiguous, so callers should
+* show the hostless fallback instead of delegating to an arbitrary plugin's
+* wrapper.
+*/
+function pickHostNode(entries, self, key) {
+	const candidates = entries.filter((entry) => entry.options?.key === key && entry.component !== void 0 && entry.component !== self);
+	return (candidates.find((entry) => componentName(entry.component) === HOST_NODE_NAME) ?? (candidates.length === 1 ? candidates[0] : void 0))?.component;
+}
+//#endregion
 //#region src/client/state/annotation-persistence.ts
 /** localStorage prefix; a session id is appended as `.<sessionId>`. */
 const ANNOTATION_KEY_PREFIX = "dsh.select-quote.annotations";
@@ -3652,7 +4997,7 @@ function createAnnotationPersistence() {
 * Selection toolbar is root-scoped (`shell.overlay`) so transcript selections
 * are always observed. Annotation summary stays on the session composer.
 *
-* History cards render **inside** the `user` Chat node view, not on a
+* History summary renders **inside** the `user` Chat node view, not 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): any other
@@ -3696,7 +5041,20 @@ function apply(ctx) {
 		const port = createAnnotationPersistence();
 		setAnnotationPersistence(port);
 		port.prune();
-		return () => setAnnotationPersistence(null);
+		const onStorage = (event) => {
+			if (event.storageArea !== null && event.storageArea !== window.localStorage) return;
+			if (event.key === null) {
+				adoptStorageAnnotations(null);
+				return;
+			}
+			const sessionId = sessionIdOfKey(event.key);
+			if (sessionId !== null) adoptStorageAnnotations(sessionId);
+		};
+		window.addEventListener("storage", onStorage);
+		return () => {
+			window.removeEventListener("storage", onStorage);
+			setAnnotationPersistence(null);
+		};
 	}, "dsh-select-quote: annotation persistence");
 	ctx.slots.inject("shell.overlay", () => {
 		ctx.slots.register({
@@ -3719,28 +5077,30 @@ 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 hostNodeOf = (key, self) => {
+		return pickHostNode(typeof ctx.slots.entries === "function" ? ctx.slots.entries("conversation.chat.node") : [], self, key);
 	};
-	const UserNode = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMessageDisplay, {
-		...props,
-		hostUserOf
-	});
-	ctx.slots.inject("conversation.chat.node", () => {
+	function UserNode(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMessageDisplay, {
+			...props,
+			hostNodeOf: () => hostNodeOf("user", UserNode)
+		});
+	}
+	function SteeringNode(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMessageDisplay, {
+			...props,
+			hostNodeOf: () => hostNodeOf("steering", SteeringNode)
+		});
+	}
+	for (const [key, View] of [["user", UserNode], ["steering", SteeringNode]]) ctx.slots.inject("conversation.chat.node", () => {
 		ctx.slots.register({
 			name: "conversation.chat.node",
-			key: "user",
+			key,
 			priority: -10,
 			locale: "chat"
-		}, UserNode);
+		}, View);
 	});
 }
-/** 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);