dsh-select-quote 0.3.8 → 0.3.10

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) {
@@ -96,9 +110,16 @@ body {
   --dsq-font-delta: var(--dsh-content-font-delta, 0px);
   --dsq-bg-raised: var(--dsw-alias-bg-layer-1, #fff);
   --dsq-bg-toast: var(--dsw-alias-bg-layer-3, rgba(0, 0, 0, 0.78));
+  /* The settings switch mirrors the Host's own switch: neutral track when off,
+     brand fill when on, and a thumb that inverts with the theme. */
+  --dsq-switch-off: var(--dsw-alias-border-l3, rgba(0, 0, 0, 0.12));
+  --dsq-switch-on: var(--dsw-alias-brand-primary, #0f1115);
+  --dsq-switch-thumb-off: var(--dsw-alias-switch-thumb, #fff);
+  --dsq-switch-thumb-on: var(--dsw-alias-label-primary-foreground, #fff);
   --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 +129,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);
@@ -160,6 +184,26 @@ ${atomRules}
   }
 }
 
+/* Right-click / shortcut menu: transform only, for the same reason as the
+   toolbar — an animated opacity would cut the material layer's backdrop. */
+@keyframes dsq-menu-in {
+  from {
+    transform: translateY(4px) scale(0.97);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes dsq-menu-in-up {
+  from {
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
 /* 内容层的 rise：悬停面板的列表在用；工具条改用容器 scale 后这条在这里待命。 */
 @keyframes dsq-rise-in {
   from {
@@ -170,15 +214,29 @@ ${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 的独立图层上，内容在它之上：模糊只取身后的页面，不会把
-   面板里的文字一起糊掉。工具条、评论气泡、悬停面板三个浮层共用这一条。
+   面板里的文字一起糊掉。所有浮层共用这一条。
    注意：macOS 上宿主另有一个 --dsw-specific-menu（覆写成 94% 不透明）给它的
    菜单用；这里按需求用 surface-fill，所以我们的浮层会比宿主自己的菜单更透。 */
 .dsq_toolbar::before,
 .dsq_commentPop::before,
-.dsq_summaryHoverInner::before {
+.dsq_summaryHoverInner::before,
+.dsq_touchBar::before,
+.dsq_chipPreview::before,
+.dsq_ctxMenu::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -193,7 +251,7 @@ ${atomRules}
 /* 覆层不描边：elevation-prominent 自带的那圈 0 0 0 .5px（--dsw-elevation-stroke-color，
    默认 border-l4）对磨砂覆层是多余的——边缘自带材质分界，再勾一道反而抢视觉，覆写成
    更淡的 border-l1。
-   两个坑，改之前先读：① 这两行必须写在三个浮层自己的选择器上。写在 body 上会随继承
+   两个坑，改之前先读：① 这两行必须写在浮层自己的选择器上。写在 body 上会随继承
    影响页面里其它依赖默认值的面板（宿主带 [data-menu-material] 的菜单有自己的覆写，
    不受影响）。② --dsq-shadow 也必须在这儿声明，不能留在 body：自定义属性是在**声明处**
    展开的，--dsq-shadow 留在 body 上时 var(--dsw-elevation-prominent) 会在 body 就被
@@ -201,9 +259,16 @@ ${atomRules}
    整条链才在浮层元素上取值。 */
 .dsq_toolbar,
 .dsq_commentPop,
-.dsq_summaryHoverInner {
+.dsq_summaryHoverInner,
+.dsq_touchBar,
+.dsq_touchSheet,
+.dsq_chipPreview,
+.dsq_ctxMenu {
   --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 component blocks free of a copied box-shadow. */
+  box-shadow: var(--dsq-shadow);
 }
 
 /* 浮层挂载与层带（2026-10-20 定，改前先读）：
@@ -219,8 +284,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 +308,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 +327,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 +347,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 +377,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 +391,66 @@ ${atomRules}
   white-space: nowrap;
 }
 
+.dsq_status {
+  position: absolute;
+  z-index: 3;
+  transform: translate(-50%, 8px);
+}
+
+/* Right-click / shortcut menu. Body-level fixed: it must escape the
+   transcript's clipping. It closes on scroll instead of following the text,
+   so it never points at a line that has moved away. */
+.dsq_ctxMenu {
+  position: fixed;
+  z-index: 64;
+  width: max-content;
+  min-width: 172px;
+  max-width: min(280px, calc(100vw - 16px));
+  padding: 4px;
+  border: 0;
+  border-radius: 12px;
+  outline: none;
+  animation: dsq-menu-in 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top left;
+}
+
+.dsq_ctxMenu[data-side='top'] {
+  animation-name: dsq-menu-in-up;
+  transform-origin: bottom left;
+}
+
+.dsq_ctxItem {
+  width: 100%;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  color: var(--dsq-label);
+  font: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dsq_ctxItem svg {
+  flex: none;
+  color: var(--dsq-label-2);
+}
+
+.dsq_ctxItem:hover,
+.dsq_ctxItem:focus {
+  background: var(--dsq-fill-hover);
+}
+
+.dsq_ctxItem:focus {
+  outline: none;
+}
+
+.dsq_ctxItem:focus-visible {
+  outline: 2px solid var(--dsq-focus-ring);
+  outline-offset: -2px;
+}
+
 /* Annotation stack — inside the composer card (input.overlay), ~1/5 width. */
 .dsq_cardStack {
   position: absolute;
@@ -373,7 +504,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 +523,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 +538,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 +584,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 +617,10 @@ ${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,
+  .dsq_ctxMenu::before {
     background: var(--dsq-bg-raised);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -477,6 +640,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 +682,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 +693,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 +706,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 +746,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 +771,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,130 +830,332 @@ ${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;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsq-label);
-  background: var(--dsq-fill-hover);
-  outline: none;
-}
-
-.dsq_commentInput::placeholder {
-  color: var(--dsq-label-3);
 }
 
 .dsq_commentActions {
-  display: flex;
-  justify-content: flex-end;
   gap: 6px;
 }
 
-/* Transcript summary — the same block as the composer's, right-aligned under
-   the user bubble. One block per message; the hover list carries every
-   annotation with its selected text and comment. */
-.dsq_tSummary {
+/* 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;
-  justify-content: flex-end;
-  margin: 4px 0 8px;
+  flex-direction: column;
+  gap: 6px;
+  animation: dsq-rise-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.dsq_tSummary .dsq_summary {
-  width: auto;
-  min-width: 220px;
-  max-width: min(calc(var(--dsq-chat-width) * 0.72), 520px);
+.dsq_chipPreviewLeaving {
+  pointer-events: none;
 }
 
-/* Replacement user bubble (quote block stripped from display). */
-.dsq_userRow {
-  gap: 6px;
+.dsq_chipPreviewLeaving .dsq_chipPreviewBody {
+  animation: dsq-rise-out 0.12s cubic-bezier(0.4, 0, 1, 1) both;
 }
 
-.dsq_userStack {
-  min-width: 0;
-  max-width: min(calc(var(--dsq-chat-width) * 0.702), 82%);
+/* Header rows: title on the left, the single action on the right. */
+.dsq_chipPreviewHead,
+.dsq_touchSheetHead {
+  justify-content: space-between;
   gap: 8px;
 }
 
-.dsq_userBubble {
-  max-width: 100%;
-  padding: 10px 16px;
-  border-radius: 22px;
-  background: var(--dsq-bubble);
+.dsq_chipPreviewTitle {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
   color: var(--dsq-label);
-  font-size: var(--dsq-font-size);
-  line-height: calc(22px + var(--dsq-font-delta));
-  white-space: pre-wrap;
-  word-break: break-word;
 }
 
-/* Durable message images of a replacement user bubble. */
-.dsq_userImages {
-  max-width: 100%;
+.dsq_chipPreviewLabel {
+  margin-top: 2px;
 }
 
-.dsq_userImages img {
-  display: block;
-  max-width: 100%;
-  border-radius: 12px;
+.dsq_chipPreviewQuote,
+.dsq_chipPreviewComment {
+  line-height: 19px;
+  max-height: 108px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
-/* Model-written :dsh-annotation{index="N"} chips. */
-.dsq_annDirective {
-  appearance: none;
-  margin: 0 2px;
-  padding: 0 6px;
-  border: 0.5px solid var(--dsq-line);
-  border-radius: 6px;
-  background: var(--dsq-fill-hover);
-  color: var(--dsq-link);
+.dsq_chipPreviewComment {
+  color: var(--dsq-label-2);
+}
+
+.dsq_chipPreviewCommentEmpty {
+  color: var(--dsq-label-3);
+}
+
+.dsq_chipPreviewJump {
+  flex: none;
+  justify-content: center;
+  gap: 4px;
+  min-height: 28px;
+  padding: 0 9px;
+  border-radius: 7px;
   font: inherit;
   font-size: 12px;
-  line-height: 18px;
-  cursor: pointer;
-  vertical-align: baseline;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
 }
 
-/* Inline annotation mark in message bodies: highlight underline + ordinal badge. */
-.dsq_annMark {
-  --dsq-mark-color: var(--dsq-accent);
-  --dsq-mark-tint: var(--dsq-accent-tint);
-  position: relative;
-  background: var(--dsq-mark-tint);
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-decoration-color: var(--dsq-mark-color);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
-  border-radius: 2px;
-  scroll-margin-block: 96px;
-  transition: background-color 0.12s;
+/* 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;
 }
 
-/* Ordinal as a superscript corner badge at the END of the marked text, so it
-   never sits between the reader and the sentence. Only the last fragment of a
-   multi-fragment mark carries the index, so the number appears exactly once.
-   Absolute so the badge adds no inline advance width: annotating never reflows
-   the paragraph or moves following words. Bottom (not top) anchors to the last
-   fragment: for a mark spanning several lines the containing block is the union
-   of the first and last fragments, so its bottom edge is the last line. */
-.dsq_annMark[data-dsq-ann-index]::after {
-  content: attr(data-dsq-ann-index);
+.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
+   the user bubble. One block per message; the hover list carries every
+   annotation with its selected text and comment. */
+.dsq_tSummary {
+  display: flex;
+  justify-content: flex-end;
+  margin: 4px 0 8px;
+}
+
+.dsq_tSummary .dsq_summary {
+  width: auto;
+  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). */
+.dsq_userRow {
+  gap: 6px;
+}
+
+.dsq_userStack {
+  min-width: 0;
+  max-width: min(calc(var(--dsq-chat-width) * 0.702), 82%);
+  gap: 8px;
+}
+
+.dsq_userBubble {
+  max-width: 100%;
+  padding: 10px 16px;
+  border-radius: 22px;
+  background: var(--dsq-bubble);
+  color: var(--dsq-label);
+  font-size: var(--dsq-font-size);
+  line-height: calc(22px + var(--dsq-font-delta));
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Durable message images of a replacement user bubble. */
+.dsq_userImages {
+  max-width: 100%;
+}
+
+.dsq_userImages img {
+  display: block;
+  max-width: 100%;
+  border-radius: 12px;
+}
+
+/* Model-written :dsh-annotation{index="N"} chips. */
+.dsq_annDirective {
+  appearance: none;
+  margin: 0 2px;
+  padding: 0 6px;
+  border: 0.5px solid var(--dsq-line);
+  border-radius: 6px;
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-link);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+  vertical-align: baseline;
+}
+
+/* Inline annotation mark in message bodies: highlight underline + ordinal badge. */
+.dsq_annMark {
+  --dsq-mark-color: var(--dsq-accent);
+  --dsq-mark-tint: var(--dsq-accent-tint);
+  position: relative;
+  background: var(--dsq-mark-tint);
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-decoration-color: var(--dsq-mark-color);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  border-radius: 2px;
+  scroll-margin-block: 96px;
+  transition: background-color 0.12s;
+}
+
+/* Ordinal as a superscript corner badge at the END of the marked text, so it
+   never sits between the reader and the sentence. Only the last fragment of a
+   multi-fragment mark carries the index, so the number appears exactly once.
+   Absolute so the badge adds no inline advance width: annotating never reflows
+   the paragraph or moves following words. Bottom (not top) anchors to the last
+   fragment: for a mark spanning several lines the containing block is the union
+   of the first and last fragments, so its bottom edge is the last line.
+   BADGE_BOTTOM / BADGE_HEIGHT / the 2px margin in annotate-text.ts mirror the
+   numbers below for collision measurement. */
+.dsq_annMark[data-dsq-ann-index]::after {
+  content: attr(data-dsq-ann-index);
   position: absolute;
   bottom: 8px;
   left: 100%;
+  /* Above the native selection highlight and the background of a later mark:
+     both otherwise paint over the badge when their ranges meet. */
+  z-index: 2;
+  /* JS shifts colliding badges right/up; the resting position is unchanged. */
+  transform: translate(var(--dsq-ann-badge-x, 0px), var(--dsq-ann-badge-y, 0px));
   display: grid;
   place-items: center;
   min-width: 15px;
@@ -780,13 +1172,270 @@ ${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;
+  }
+  .dsq_segOption {
+    min-height: 44px;
+  }
+}
+
+/* Settings row (plugin page): an inline segmented control. The page owns the
+   write, so there is no save button — each pick is committed immediately. */
+.dsq_settings {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 2px 0;
+}
+
+.dsq_settingsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dsq_settingsCopy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dsq_settingsLabel {
+  color: var(--dsq-label);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.dsq_settingsHint {
+  color: var(--dsq-label-3);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* Shortcut reference under the switch: the two commands and the keycaps the
+   Host currently has in effect, so a rebind shows up here without a reload. */
+.dsq_settingsShortcuts {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dsq_settingsShortcutRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 22px;
+}
+
+.dsq_settingsShortcutName {
+  min-width: 0;
+  color: var(--dsq-label-2);
+  font-size: 12px;
+}
+
+.dsq_settingsShortcutKeys {
+  flex: none;
+  color: var(--dsq-label-3);
+  font-size: 12px;
+}
+
+.dsq_keycap {
+  display: inline-block;
+  min-width: 18px;
+  padding: 1px 6px;
+  border: 1px solid var(--dsq-line);
+  border-radius: 5px;
+  background: var(--dsq-fill-hover);
+  color: var(--dsq-label-2);
+  font: inherit;
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.dsq_seg {
+  display: inline-flex;
+  align-self: flex-start;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--dsq-fill-hover);
+}
+
+.dsq_segOption {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  color: var(--dsq-label-2);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.dsq_segOption:hover {
+  color: var(--dsq-label);
+}
+
+.dsq_segOption[data-active="true"] {
+  background: var(--dsq-bg-raised);
+  box-shadow: 0 0 0 0.5px var(--dsq-line);
+  color: var(--dsq-label);
+}
+
+.dsq_segOption:has(:focus-visible) {
+  outline: 2px solid var(--dsq-focus-ring-soft);
+  outline-offset: 1px;
+}
+
+.dsq_settingsDivider {
+  height: 1px;
+  background: var(--dsq-line);
+}
+
+/* The whole row is the target: label text, hint, and the switch itself. */
+.dsq_settingsSwitchRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  cursor: pointer;
+}
+
+.dsq_settingsSwitchRow .dsq_settingsCopy {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Exactly the Host switch metrics: 36×20 track, 16px thumb, 2px inset, and
+   the same on/off tokens. The thumb only animates its transform, like the
+   product control; the track changes color in one step. */
+.dsq_switch {
+  box-sizing: border-box;
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 20px;
+  padding: 2px;
+  border: 0;
+  border-radius: 999px;
+  corner-shape: round;
+  background: var(--dsq-switch-off);
+  cursor: pointer;
+}
+
+.dsq_switch[data-on='true'] {
+  background: var(--dsq-switch-on);
+}
+
+.dsq_switchTrack {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--dsq-switch-thumb-off);
+  transition: transform 0.12s ease;
+}
+
+.dsq_switch[data-on='true'] .dsq_switchTrack {
+  background: var(--dsq-switch-thumb-on);
+  transform: translateX(16px);
+}
+
+.dsq_switch:has(:focus-visible) {
+  outline: 2px solid var(--dsq-focus-ring-soft);
+  outline-offset: 2px;
+}
+
+/* Visually hidden but still focusable: the native radio/checkbox carries the
+   semantics and keyboard behavior, the label carries the paint. */
+.dsq_srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* Layer 4 — host surface: keyframes, theme flips, and the two rules that reach
    into product-owned DOM. */
 
@@ -794,10 +1443,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 +1456,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;
@@ -830,6 +1482,8 @@ const styles = {
 	buttonAddComment: "dsq_buttonAddComment",
 	divider: "dsq_divider",
 	status: "dsq_status",
+	ctxMenu: "dsq_ctxMenu",
+	ctxItem: "dsq_ctxItem",
 	cardStack: "dsq_cardStack",
 	cardClose: "dsq_cardClose",
 	cardPad: "dsq_cardPad",
@@ -838,7 +1492,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 +1503,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,23 +1518,110 @@ 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",
 	userImages: "dsq_userImages",
-	userBubble: "dsq_userBubble"
+	userBubble: "dsq_userBubble",
+	settings: "dsq_settings",
+	settingsSection: "dsq_settingsSection",
+	settingsCopy: "dsq_settingsCopy",
+	settingsLabel: "dsq_settingsLabel",
+	settingsHint: "dsq_settingsHint",
+	settingsShortcuts: "dsq_settingsShortcuts",
+	settingsShortcutRow: "dsq_settingsShortcutRow",
+	settingsShortcutName: "dsq_settingsShortcutName",
+	settingsShortcutKeys: "dsq_settingsShortcutKeys",
+	keycap: "dsq_keycap",
+	settingsDivider: "dsq_settingsDivider",
+	settingsSwitchRow: "dsq_settingsSwitchRow",
+	switch: "dsq_switch",
+	switchTrack: "dsq_switchTrack",
+	seg: "dsq_seg",
+	segOption: "dsq_segOption",
+	srOnly: "dsq_srOnly"
 };
 //#endregion
+//#region src/client/dom/badge-layout.ts
+const STEP_X = 28;
+const STEP_Y = 18;
+/** Rest, then two steps right; after that the stack grows upward. */
+const MAX_COLUMNS = 3;
+const MAX_ROWS = 24;
+function overlaps(a, b) {
+	return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+function fits(anchor, dx, dy, bounds) {
+	if (dx > 0 && bounds.right !== void 0 && anchor.x + dx + anchor.width > bounds.right) return false;
+	if (dy < 0 && bounds.top !== void 0 && anchor.y + dy < bounds.top) return false;
+	return true;
+}
+/**
+* Greedy placement in reading order. Each badge first tries its resting spot,
+* then shifts right a couple of badge widths, and finally stacks upward. The
+* resting spot is always returned when no candidate fits, so a badge never
+* disappears because of an edge.
+*/
+function placeBadges(anchors, bounds = {}) {
+	const placed = [];
+	return anchors.map((anchor) => {
+		for (let row = 0; row < MAX_ROWS; row += 1) for (let column = 0; column < MAX_COLUMNS; column += 1) {
+			const dx = column * STEP_X;
+			const dy = -row * STEP_Y;
+			if (!fits(anchor, dx, dy, bounds)) continue;
+			const candidate = {
+				...anchor,
+				x: anchor.x + dx,
+				y: anchor.y + dy
+			};
+			if (placed.some((box) => overlaps(candidate, box))) continue;
+			placed.push(candidate);
+			return {
+				dx,
+				dy
+			};
+		}
+		placed.push(anchor);
+		return {
+			dx: 0,
+			dy: 0
+		};
+	});
+}
+//#endregion
 //#region src/client/dom/message-text.ts
 /**
 * Message-text geometry: locate a selection inside the transcript and express
 * 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.
 */
@@ -1009,6 +1753,9 @@ function cleanTextOf(item) {
 const MARK_ATTR = "data-dsq-ann-mark";
 const INDEX_ATTR = "data-dsq-ann-index";
 const FLASH_MS = 1500;
+/** Distance from the mark's bottom edge to the badge's bottom edge (CSS). */
+const BADGE_BOTTOM = 8;
+const BADGE_MARGIN = 2;
 const jobs = /* @__PURE__ */ new Map();
 let pendingIds = /* @__PURE__ */ new Set();
 function attrValue(value) {
@@ -1085,16 +1832,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 +1852,60 @@ 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;
+}
+/**
+* Resolve overlapping ordinal badges. Two annotations can end at the same
+* offset (nested ranges), which puts their pseudo-element badges on the same
+* pixel; nearby ends can also touch. Measure every last fragment, then write
+* the offset back as variables inherited by `::after`. The badge's transform
+* never participates in text layout.
+*/
+function layoutBadges(scope) {
+	const marks = Array.from(scope.querySelectorAll(`[${INDEX_ATTR}]`));
+	for (const mark of marks) {
+		mark.style.removeProperty("--dsq-ann-badge-x");
+		mark.style.removeProperty("--dsq-ann-badge-y");
+	}
+	if (marks.length < 2) return;
+	const scroller = marks[0]?.closest("[data-conversation-scroll]");
+	const scrollerRect = scroller instanceof Element ? scroller.getBoundingClientRect() : null;
+	const rightEdge = scrollerRect && scrollerRect.width > 0 ? scrollerRect.right : document.documentElement.clientWidth;
+	const topEdge = scrollerRect && scrollerRect.height > 0 ? scrollerRect.top : 0;
+	const anchors = marks.map((mark) => {
+		const rect = mark.getBoundingClientRect();
+		return {
+			mark,
+			index: Number(mark.getAttribute(INDEX_ATTR) ?? 0),
+			x: rect.right + BADGE_MARGIN,
+			y: rect.bottom - BADGE_BOTTOM - 15,
+			width: 24,
+			height: 15,
+			visible: rect.width > 0 && rect.height > 0
+		};
+	}).filter((anchor) => anchor.visible).sort((a, b) => a.index - b.index);
+	if (anchors.length < 2) return;
+	const offsets = placeBadges(anchors, {
+		right: rightEdge - 4,
+		top: topEdge + 4
+	});
+	anchors.forEach((anchor, i) => {
+		const { dx, dy } = offsets[i];
+		if (dx !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-x", `${dx}px`);
+		if (dy !== 0) anchor.mark.style.setProperty("--dsq-ann-badge-y", `${dy}px`);
+	});
+}
 /** Apply every registered job whose message is currently rendered. */
 function applyAnnotationMarks(root) {
 	if (jobs.size === 0) return;
@@ -1113,12 +1913,18 @@ 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;
 		}
 	}
+	layoutBadges(scope);
 }
 /** Insert or refresh jobs; identical jobs are no-ops. */
 function upsertAnnotationJobs(next) {
@@ -1172,6 +1978,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;
@@ -1183,8 +1990,11 @@ function watchAnnotationMarks(root) {
 		childList: true,
 		subtree: true
 	});
+	const onResize = () => schedule();
+	window.addEventListener("resize", onResize);
 	return () => {
 		observer.disconnect();
+		window.removeEventListener("resize", onResize);
 		if (frame !== 0) window.cancelAnimationFrame(frame);
 	};
 }
@@ -1390,43 +2200,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 +2272,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 +2282,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);
@@ -1517,13 +2339,6 @@ function readComposedDraft(text) {
 }
 //#endregion
 //#region src/client/runtime.ts
-/**
-* Shared runtime handles across slot scopes.
-*
-* The selection toolbar mounts at root (`shell.overlay`) while the annotation
-* panel is session-scoped, so both sides read one partition keyed by the
-* session the host minted for the active composer.
-*/
 const runtime = {};
 function setRuntimeSession(sessionId) {
 	if (sessionId) runtime.sessionId = sessionId;
@@ -1535,15 +2350,15 @@ const EMPTY$1 = [];
 /** Bucket for annotations added before a session id is known (never persisted). */
 const MEMORY_KEY = "pending";
 const bySession = /* @__PURE__ */ new Map();
-const listeners = /* @__PURE__ */ new Set();
+const listeners$1 = /* @__PURE__ */ new Set();
 let persistence = null;
 function notify() {
-	for (const listener of [...listeners]) listener();
+	for (const listener of [...listeners$1]) listener();
 }
 function subscribeAnnotations(listener) {
-	listeners.add(listener);
+	listeners$1.add(listener);
 	return () => {
-		listeners.delete(listener);
+		listeners$1.delete(listener);
 	};
 }
 /**
@@ -1686,18 +2501,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$2 = 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$2, bounds) {
 	const box = bounds ?? {
 		top: 0,
 		left: 0,
@@ -1784,6 +2644,7 @@ const zh = {
 	"common.selectedText": "选中的文本",
 	"common.commentPlaceholder": "添加可选评论…",
 	"common.cancel": "取消",
+	"common.close": "关闭",
 	"common.save": "保存",
 	"toolbar.aria": "划词操作",
 	"toolbar.commentHint": "添加批注…",
@@ -1794,21 +2655,42 @@ const zh = {
 	"toolbar.commentDialogAria": "添加可选评论",
 	"toolbar.skipComment": "暂不评论",
 	"toolbar.addComment": "添加评论",
+	"menu.aria": "划词菜单",
+	"menu.shortcutLabel": "打开划词菜单",
+	"menu.addShortcutLabel": "将选中文字添加到任务",
+	"menu.noSelection": "先在对话里选中一段文字",
+	"menu.busy": "先完成当前批注",
 	"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": "跳转到原文",
+	"settings.trigger": "划词入口",
+	"settings.triggerHint": "选中文字后何时显示操作条。触屏始终使用底部操作条。",
+	"settings.trigger.auto": "自动浮出",
+	"settings.trigger.contextmenu": "右键菜单",
+	"settings.trigger.both": "两者都开",
+	"settings.shortcut": "快捷键",
+	"settings.shortcutHint": "开启后，选中文字即可使用下面的快捷键；可在宿主的「快捷键」设置里改键。",
+	"settings.shortcutListAria": "当前快捷键",
+	"settings.shortcutUnavailable": "快捷键暂不可用（可能被其它插件占用）",
+	"settings.shortcutUnbound": "未绑定",
+	"settings.shortcutConflict": "与其它快捷键冲突"
 };
 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…",
@@ -1819,18 +2701,38 @@ const en = {
 	"toolbar.commentDialogAria": "Add an optional comment",
 	"toolbar.skipComment": "Skip comment",
 	"toolbar.addComment": "Add comment",
+	"menu.aria": "Selection menu",
+	"menu.shortcutLabel": "Open selection menu",
+	"menu.addShortcutLabel": "Add selected text to task",
+	"menu.noSelection": "Select text in the conversation first",
+	"menu.busy": "Finish the current annotation first",
 	"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",
+	"settings.trigger": "Trigger",
+	"settings.triggerHint": "When the action bar appears after you select text. Touch screens always use the bottom bar.",
+	"settings.trigger.auto": "Automatic",
+	"settings.trigger.contextmenu": "Right-click",
+	"settings.trigger.both": "Both",
+	"settings.shortcut": "Shortcut",
+	"settings.shortcutHint": "When on, the shortcuts below work on the selected text. Rebind them in the Host's Keyboard shortcuts settings.",
+	"settings.shortcutListAria": "Active shortcuts",
+	"settings.shortcutUnavailable": "Shortcuts are unavailable (another plugin may already use the keys).",
+	"settings.shortcutUnbound": "Unbound",
+	"settings.shortcutConflict": "Conflicts with another shortcut"
 };
 /**
 * Russian is not a shipped host locale: it is added through
@@ -1841,6 +2743,7 @@ const ru = {
 	"common.selectedText": "Выделенный текст",
 	"common.commentPlaceholder": "Добавить необязательный комментарий…",
 	"common.cancel": "Отмена",
+	"common.close": "Закрыть",
 	"common.save": "Сохранить",
 	"toolbar.aria": "Действия с выделенным текстом",
 	"toolbar.commentHint": "Добавить аннотацию…",
@@ -1851,22 +2754,42 @@ const ru = {
 	"toolbar.commentDialogAria": "Добавить необязательный комментарий",
 	"toolbar.skipComment": "Без комментария",
 	"toolbar.addComment": "Добавить комментарий",
+	"menu.aria": "Меню выделения",
+	"menu.shortcutLabel": "Открыть меню выделения",
+	"menu.addShortcutLabel": "Добавить выделенный текст к задаче",
+	"menu.noSelection": "Сначала выделите текст в диалоге",
+	"menu.busy": "Сначала завершите текущую аннотацию",
 	"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": "Перейти к оригиналу",
+	"settings.trigger": "Триггер",
+	"settings.triggerHint": "Когда показывать панель действий после выделения текста. На сенсорных экранах всегда используется нижняя панель.",
+	"settings.trigger.auto": "Автоматически",
+	"settings.trigger.contextmenu": "По правому клику",
+	"settings.trigger.both": "Оба способа",
+	"settings.shortcut": "Горячая клавиша",
+	"settings.shortcutHint": "Когда включено, сочетания ниже работают с выделенным текстом. Изменить их можно в настройках горячих клавиш.",
+	"settings.shortcutListAria": "Текущие сочетания",
+	"settings.shortcutUnavailable": "Сочетания недоступны (возможно, клавиши заняты другим плагином).",
+	"settings.shortcutUnbound": "Не назначено",
+	"settings.shortcutConflict": "Конфликтует с другим сочетанием"
 };
 /** Both shipped host locales, required together by the typed `register()`. */
 const SHIPPED_DICTS = Object.freeze({
@@ -1948,10 +2871,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 +2902,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 +2944,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 +3041,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 +3100,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 +3199,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 +3250,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 +3266,7 @@ function AnnotationSummary({ count, items, onRemoveAll, onItemSelect, onItemRemo
 									onKeyDown: (e) => {
 										if (e.key === "Escape") {
 											e.preventDefault();
+											e.stopPropagation();
 											setEditing(null);
 											return;
 										}
@@ -2198,7 +3285,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 +3328,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 +3344,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 +3418,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);
@@ -2524,6 +3620,67 @@ function AnnotationPanel({ useInput, inputActions, sessionId }) {
 /** Alias kept for overlay registration. */
 const QuoteCard = AnnotationPanel;
 //#endregion
+//#region src/client/config.ts
+const DEFAULT_CONFIG = Object.freeze({
+	triggerMode: "auto",
+	shortcut: false
+});
+const TRIGGER_MODES = /* @__PURE__ */ new Set([
+	"auto",
+	"contextmenu",
+	"both"
+]);
+/** Collapse an untrusted snapshot value onto the known shape. */
+function normalizeConfig(value) {
+	if (typeof value !== "object" || value === null) return { ...DEFAULT_CONFIG };
+	const record = value;
+	return {
+		triggerMode: TRIGGER_MODES.has(record.triggerMode) ? record.triggerMode : DEFAULT_CONFIG.triggerMode,
+		shortcut: typeof record.shortcut === "boolean" ? record.shortcut : DEFAULT_CONFIG.shortcut
+	};
+}
+function resolveTriggers(config) {
+	return {
+		auto: config.triggerMode === "auto" || config.triggerMode === "both",
+		contextMenu: config.triggerMode === "contextmenu" || config.triggerMode === "both",
+		shortcut: config.shortcut
+	};
+}
+let current = { ...DEFAULT_CONFIG };
+const listeners = /* @__PURE__ */ new Set();
+function getConfig() {
+	return current;
+}
+function subscribeConfig(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+/** Publish a snapshot value; returns the normalized config actually stored. */
+function publishConfig(value) {
+	const next = normalizeConfig(value);
+	if (next.triggerMode === current.triggerMode && next.shortcut === current.shortcut) return current;
+	current = next;
+	for (const listener of [...listeners]) listener();
+	return current;
+}
+/**
+* Follow one Host config form. Works with a live form and with the fake one in
+* `verify`; the caller owns disposal.
+*/
+function attachConfigForm(form) {
+	const publish = () => {
+		publishConfig(form.getSnapshot().value);
+	};
+	publish();
+	const off = form.subscribe(publish);
+	return () => {
+		off();
+		publishConfig(void 0);
+	};
+}
+//#endregion
 //#region src/client/dom/floating-layer.ts
 /**
 * Mount point for the selection UI: a zero-size host inside the transcript's
@@ -2545,10 +3702,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 +3740,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 +3768,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 +3779,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 +3798,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 +3808,10 @@ function fallbackLayer() {
 		fromContent: (left, top) => ({
 			left,
 			top
-		})
+		}),
+		setAboveComposer: (above) => {
+			host.style.zIndex = String(above ? HOST_Z_ABOVE_COMPOSER : HOST_Z);
+		}
 	};
 	return fallback;
 }
@@ -2716,6 +3901,17 @@ function isFirstLineOnScreen(rect) {
 	return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
 }
 /**
+* First-line box of the live selection in viewport coordinates.
+*
+* The keyboard entry has no pointer to anchor to, so it opens the same menu
+* beside the selected words; the first line is what the reader is looking at.
+*/
+function selectionFirstLineRect() {
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
+	return getRangeFirstLineRect(selection.getRangeAt(0)) ?? null;
+}
+/**
 * Read the live selection when it is a non-empty range inside a conversation
 * message and outside the composer / our own chrome.
 */
@@ -2756,62 +3952,643 @@ function readSelectionSnapshot(toolbarRoot) {
 function clearNativeSelection() {
 	window.getSelection()?.removeAllRanges();
 }
-async function copyText(text) {
-	if (navigator.clipboard?.writeText) {
-		await navigator.clipboard.writeText(text);
-		return;
-	}
-	const area = document.createElement("textarea");
-	area.value = text;
-	area.setAttribute("readonly", "");
-	area.style.position = "fixed";
-	area.style.left = "-9999px";
-	document.body.appendChild(area);
-	area.select();
-	document.execCommand("copy");
-	area.remove();
+async function copyText(text) {
+	if (navigator.clipboard?.writeText) {
+		await navigator.clipboard.writeText(text);
+		return;
+	}
+	const area = document.createElement("textarea");
+	area.value = text;
+	area.setAttribute("readonly", "");
+	area.style.position = "fixed";
+	area.style.left = "-9999px";
+	document.body.appendChild(area);
+	area.select();
+	document.execCommand("copy");
+	area.remove();
+}
+//#endregion
+//#region src/client/dom/selection-url.ts
+/**
+* Link detection for the selection toolbar.
+*
+* A selection that is exactly one URL gets an "open in browser" action. Only
+* `http(s)` qualifies: the desktop shell hands those to `shell.openExternal`
+* (the real default browser), while every other scheme is refused by the app's
+* window-open handler — a button that silently does nothing is worse than no
+* button at all.
+*/
+/** Punctuation a drag-selection tends to swallow around a link. */
+const EDGE_PUNCTUATION = /^[\s"'“”‘’()\[\]{}<>（ ）【】《》]+|[\s"'“”‘’()\[\]{}<>（ ）【】《》.,;:!?。，；：！？]+$/g;
+/** Schemes the app can actually hand to the system browser. */
+const OPENABLE = /* @__PURE__ */ new Set(["http:", "https:"]);
+/** The selected text as a URL, or null when it is not one. */
+function selectionUrl(text) {
+	const trimmed = text.trim();
+	if (trimmed === "" || /\s/.test(trimmed.replace(EDGE_PUNCTUATION, ""))) return null;
+	const candidate = trimmed.replace(EDGE_PUNCTUATION, "");
+	if (!/^https?:\/\//i.test(candidate)) return null;
+	try {
+		const url = new URL(candidate);
+		if (!OPENABLE.has(url.protocol)) return null;
+		return url.href;
+	} catch {
+		return null;
+	}
+}
+/**
+* URL the toolbar's open action should use.
+*
+* The selected text wins when it is itself a URL; otherwise the anchor the
+* selection sits in decides — chat links are usually rendered as wording, so
+* selecting "点击这里" must still offer to open what it points at.
+*/
+function linkTarget(text, anchorHref) {
+	return selectionUrl(text) ?? (anchorHref ? selectionUrl(anchorHref) : null);
+}
+//#endregion
+//#region src/client/selection/SelectionMenu.tsx
+/** Space between the anchor line's bottom and the menu. */
+const ANCHOR_GAP = 2;
+function SelectionMenu({ snapshot, x, y, onAction, onClose, initialFocus = "first" }) {
+	const rootRef = (0, react.useRef)(null);
+	const firstRef = (0, react.useRef)(null);
+	const [placement, setPlacement] = (0, react.useState)(null);
+	const items = [
+		...linkTarget(snapshot.text, snapshot.anchorHref) ? [{
+			key: "open",
+			icon: "external-link",
+			label: t("toolbar.openLink")
+		}] : [],
+		{
+			key: "copy",
+			icon: "copy",
+			label: t("toolbar.copy")
+		},
+		{
+			key: "add",
+			icon: "plus",
+			label: t("toolbar.addToTask")
+		}
+	];
+	(0, react.useLayoutEffect)(() => {
+		const el = rootRef.current;
+		if (!el) return;
+		const anchor = DOMRect.fromRect({
+			x,
+			y,
+			width: 0,
+			height: 0
+		});
+		setPlacement(placePopover(anchor, {
+			width: el.offsetWidth,
+			height: el.offsetHeight
+		}, "bottom", ANCHOR_GAP));
+	}, [
+		x,
+		y,
+		items.length
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!placement) return;
+		if (initialFocus === "menu") rootRef.current?.focus({ preventScroll: true });
+		else firstRef.current?.focus({ preventScroll: true });
+	}, [placement, initialFocus]);
+	(0, react.useEffect)(() => {
+		const inside = (node) => node instanceof Node && rootRef.current?.contains(node) === true;
+		const onPointerDown = (event) => {
+			if (inside(event.target)) return;
+			onClose();
+		};
+		const onContextMenu = (event) => {
+			if (inside(event.target)) {
+				event.preventDefault();
+				return;
+			}
+			onClose();
+		};
+		const onScroll = () => onClose();
+		const onResize = () => onClose();
+		const onBlur = () => onClose();
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("contextmenu", onContextMenu, true);
+		document.addEventListener("scroll", onScroll, true);
+		window.addEventListener("resize", onResize);
+		window.addEventListener("blur", onBlur);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("contextmenu", onContextMenu, true);
+			document.removeEventListener("scroll", onScroll, true);
+			window.removeEventListener("resize", onResize);
+			window.removeEventListener("blur", onBlur);
+		};
+	}, [onClose]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			onClose();
+			return;
+		}
+		if (event.key === "Tab") {
+			onClose();
+			return;
+		}
+		const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+		if (step === 0 && event.key !== "Home" && event.key !== "End") return;
+		const buttons = [...rootRef.current?.querySelectorAll("[role=\"menuitem\"]") ?? []];
+		if (buttons.length === 0) return;
+		event.preventDefault();
+		const current = buttons.indexOf(document.activeElement);
+		const fromMenu = current === -1;
+		buttons[event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : fromMenu ? step > 0 ? 0 : buttons.length - 1 : (current + step + buttons.length) % buttons.length]?.focus({ preventScroll: true });
+	}, [onClose]);
+	const keepSelection = (0, react.useCallback)((event) => {
+		event.preventDefault();
+		event.currentTarget.focus({ preventScroll: true });
+	}, []);
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		className: cx(A.col, styles.ctxMenu),
+		role: "menu",
+		"aria-label": t("menu.aria"),
+		"data-dsq-menu": "true",
+		"data-side": placement?.side ?? "bottom",
+		tabIndex: -1,
+		style: {
+			top: placement?.top ?? 0,
+			left: placement?.left ?? 0,
+			visibility: placement ? "visible" : "hidden"
+		},
+		onKeyDown: handleKeyDown,
+		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			ref: index === 0 ? firstRef : void 0,
+			type: "button",
+			role: "menuitem",
+			className: cx(A.plain, A.row, styles.ctxItem),
+			tabIndex: -1,
+			onPointerDown: keepSelection,
+			onPointerEnter: (event) => event.currentTarget.focus({ preventScroll: true }),
+			onClick: () => onAction(item.key),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, {
+				name: item.icon,
+				size: 15
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label })]
+		}, item.key))
+	}), document.body);
+}
+//#endregion
+//#region src/client/selection/ToolbarView.tsx
+/**
+* Paint-only halves of the selection UI: the anchored desktop toolbar/popover
+* and the touch bottom bar/sheet. All state, persistence and placement stay in
+* `SelectionToolbar`; this module owns markup, portals and ARIA only.
+*/
+function ActionRow({ actions, stacked }) {
+	return 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));
+}
+function CommentField({ comment, touch, commentRef, onChange, onKeyDown }) {
+	return /* @__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: (event) => onChange(event.target.value),
+		onKeyDown
+	});
+}
+function CommentActions({ comment, touch, onFinishComment }) {
+	return /* @__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: () => onFinishComment(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: () => onFinishComment(true),
+			children: t("toolbar.addComment")
+		})]
+	});
+}
+function ToolbarView({ touch, phase, active, status, viewport, actions, comment, menuOpen, toolbarStyle, toolbarRef, commentWrapRef, commentRef, onToolbarPointerDown, onCommentChange, onCommentKeyDown, onFinishComment, onCloseSheet }) {
+	const commentField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentField, {
+		comment,
+		touch,
+		commentRef,
+		onChange: onCommentChange,
+		onKeyDown: onCommentKeyDown
+	});
+	const commentActions = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentActions, {
+		comment,
+		touch,
+		onFinishComment
+	});
+	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: onToolbarPointerDown,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRow, {
+					actions,
+					stacked: 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: onCloseSheet,
+							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: [
+		menuOpen ? null : phase === "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: toolbarRef,
+			className: cx(A.row, styles.toolbar),
+			style: toolbarStyle,
+			role: "toolbar",
+			"aria-label": t("toolbar.aria"),
+			"data-dsq-toolbar": "true",
+			"data-anchor": active.below ? "below" : "above",
+			onPointerDown: onToolbarPointerDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cx(A.inlineRow, styles.toolbarInner),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionRow, {
+					actions,
+					stacked: false
+				})
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: toolbarRef,
+			className: cx(A.row, styles.toolbar),
+			role: "toolbar",
+			"aria-label": t("toolbar.aria"),
+			"data-dsq-toolbar": "true",
+			"data-anchor": "popover-top",
+			onPointerDown: onToolbarPointerDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cx(A.inlineRow, styles.toolbarInner),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						padding: "0 8px",
+						fontSize: 13,
+						opacity: .8,
+						whiteSpace: "nowrap"
+					},
+					children: t("toolbar.commentHint")
+				})
+			})
+		}),
+		!menuOpen && phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: commentWrapRef,
+			className: cx(A.col, styles.commentPop),
+			role: "dialog",
+			"aria-label": t("toolbar.commentDialogAria"),
+			onPointerDown: onToolbarPointerDown,
+			children: [commentField, commentActions]
+		}) : null,
+		status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.status,
+			style: toolbarStyle,
+			role: "status",
+			children: status
+		}) : null
+	] }), active.layer.host);
+}
+//#endregion
+//#region src/client/dom/comment-placement.ts
+const GAP$1 = 8;
+/** Horizontal slack around the popover, and the minimum margin to the box. */
+const EDGE = 8;
+/** Gap between the popover corner and the "add a comment" toolbar. */
+const TOOLBAR_GAP = 6;
+function placeCommentSurfaces({ layer, selection, toolbar, panel }) {
+	const bounds = layer.bounds();
+	const home = layer.fromContent(selection.left, selection.top);
+	const anchor = {
+		left: home.left - toolbar.width / 2,
+		top: home.top - (selection.below ? 0 : toolbar.height),
+		width: toolbar.width,
+		height: toolbar.height
+	};
+	const belowTop = layer.fromContent(0, selection.selectionBottom).top + GAP$1;
+	const aboveTop = anchor.top - panel.height - GAP$1;
+	const top = belowTop <= bounds.bottom - EDGE - panel.height ? belowTop : aboveTop >= bounds.top + EDGE ? aboveTop : Math.max(bounds.top + EDGE, Math.min(belowTop, bounds.bottom - EDGE - panel.height));
+	const half = panel.width / 2 + EDGE;
+	const min = bounds.left + half;
+	const center = Math.min(Math.max(anchor.left + anchor.width / 2, min), Math.max(min, bounds.right - half));
+	const popover = layer.toContent(center, top);
+	let leftView = layer.fromContent(popover.left, popover.top).left - panel.width / 2;
+	let topView = top - TOOLBAR_GAP - toolbar.height;
+	if (topView < bounds.top + EDGE) topView = top + panel.height + TOOLBAR_GAP;
+	leftView = Math.max(bounds.left + EDGE, Math.min(leftView, bounds.right - EDGE - toolbar.width));
+	topView = Math.max(bounds.top + EDGE, Math.min(topView, bounds.bottom - EDGE - toolbar.height));
+	return {
+		popover,
+		toolbar: layer.toContent(leftView, topView)
+	};
+}
+//#endregion
+//#region src/client/selection/useCommentPlacement.ts
+/**
+* Measures the comment popover and its hint toolbar, then writes the geometry
+* from `dom/comment-placement.ts` back as content coordinates. The React
+* component keeps the refs; this hook owns the measure/place lifecycle.
+*/
+function useCommentPlacement({ touch, phase, active, toolbarRef, commentWrapRef }) {
+	const place = (0, react.useCallback)(() => {
+		if (touch) return;
+		const layer = active?.layer;
+		const toolbar = toolbarRef.current;
+		const pop = commentWrapRef.current;
+		if (!active || !layer || !toolbar || !pop) return;
+		pop.style.display = "flex";
+		pop.style.visibility = "hidden";
+		const panel = {
+			width: pop.offsetWidth || 320,
+			height: pop.offsetHeight || 180
+		};
+		pop.style.visibility = "";
+		const at = placeCommentSurfaces({
+			layer,
+			selection: active,
+			toolbar: {
+				width: toolbar.offsetWidth,
+				height: toolbar.offsetHeight
+			},
+			panel
+		});
+		pop.style.top = `${at.popover.top}px`;
+		pop.style.left = `${at.popover.left}px`;
+		toolbar.style.left = `${at.toolbar.left}px`;
+		toolbar.style.top = `${at.toolbar.top}px`;
+	}, [
+		active,
+		commentWrapRef,
+		toolbarRef,
+		touch
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (phase === "comment") place();
+	}, [phase, place]);
+	(0, react.useEffect)(() => {
+		if (touch) return;
+		window.addEventListener("resize", place);
+		return () => window.removeEventListener("resize", place);
+	}, [place, touch]);
+	return place;
 }
 //#endregion
-//#region src/client/dom/selection-url.ts
+//#region src/client/dom/menu-trigger.ts
+function shouldOpenSelectionMenu(signal) {
+	return signal.contextMenuEnabled && !signal.touch && !signal.defaultPrevented && signal.targetInTranscript && signal.pointInSelection && signal.hasSelection;
+}
 /**
-* Link detection for the selection toolbar.
+* True when `(x, y)` falls inside any of the selection's line boxes.
 *
-* A selection that is exactly one URL gets an "open in browser" action. Only
-* `http(s)` qualifies: the desktop shell hands those to `shell.openExternal`
-* (the real default browser), while every other scheme is refused by the app's
-* window-open handler — a button that silently does nothing is worse than no
-* button at all.
+* The union box is wrong here: a short first line leaves empty space to its
+* right that belongs to no word, and a right-click there is not "on the
+* selection". Each line rect plus a small tolerance matches what the user sees.
 */
-/** Punctuation a drag-selection tends to swallow around a link. */
-const EDGE_PUNCTUATION = /^[\s"'“”‘’()\[\]{}<>（ ）【】《》]+|[\s"'“”‘’()\[\]{}<>（ ）【】《》.,;:!?。，；：！？]+$/g;
-/** Schemes the app can actually hand to the system browser. */
-const OPENABLE = /* @__PURE__ */ new Set(["http:", "https:"]);
-/** The selected text as a URL, or null when it is not one. */
-function selectionUrl(text) {
-	const trimmed = text.trim();
-	if (trimmed === "" || /\s/.test(trimmed.replace(EDGE_PUNCTUATION, ""))) return null;
-	const candidate = trimmed.replace(EDGE_PUNCTUATION, "");
-	if (!/^https?:\/\//i.test(candidate)) return null;
-	try {
-		const url = new URL(candidate);
-		if (!OPENABLE.has(url.protocol)) return null;
-		return url.href;
-	} catch {
-		return null;
-	}
+function pointInRects(x, y, rects, tolerance = 2) {
+	for (const rect of rects) if (x >= rect.left - tolerance && x <= rect.right + tolerance && y >= rect.top - tolerance && y <= rect.bottom + tolerance) return true;
+	return false;
 }
+//#endregion
+//#region src/client/selection/useSelectionWatcher.ts
 /**
-* URL the toolbar's open action should use.
+* Transcript-wide pointer/selection observation for the toolbar.
 *
-* The selected text wins when it is itself a URL; otherwise the anchor the
-* selection sits in decides — chat links are usually rendered as wording, so
-* selecting "点击这里" must still offer to open what it points at.
+* The controller owns the state; this hook owns *when* to re-read it. Keeping
+* the listener choreography here means the toolbar component does not have to
+* know about the drag/context-menu/scroll ordering rules.
 */
-function linkTarget(text, anchorHref) {
-	return selectionUrl(text) ?? (anchorHref ? selectionUrl(anchorHref) : null);
+/** The menu's own chrome; a press inside it must not dismiss the selection. */
+const MENU_SELECTOR = "[data-dsq-menu]";
+function useSelectionWatcher({ toolbarRef, commentWrapRef, phaseRef, touch, dismissMenu, refresh, flushComment, hide, openMenu }) {
+	(0, react.useEffect)(() => {
+		let scheduled = false;
+		const schedule = () => {
+			if (scheduled) return;
+			scheduled = true;
+			window.setTimeout(() => {
+				scheduled = false;
+				refresh();
+			}, 0);
+		};
+		let dragging = false;
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			const inToolbar = toolbarRef.current?.contains(target) === true;
+			const inComment = commentWrapRef.current?.contains(target) === true;
+			const inMenu = target instanceof Element && target.closest(MENU_SELECTOR) !== null;
+			if (inToolbar || inComment || inMenu) return;
+			dragging = true;
+			if (phaseRef.current === "comment") {
+				flushComment();
+				hide();
+				return;
+			}
+			const selection = window.getSelection();
+			if (selection && !selection.isCollapsed && selection.rangeCount > 0) {
+				schedule();
+				return;
+			}
+			hide();
+		};
+		const onPointerUp = () => {
+			dragging = false;
+			schedule();
+		};
+		const onSelectionChange = () => {
+			if (dragging) return;
+			schedule();
+		};
+		const onContextMenu = (event) => {
+			if (dismissMenu()) refresh();
+			if (event.defaultPrevented) return;
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (toolbarRef.current?.contains(target)) return;
+			if (target instanceof Element && target.closest(MENU_SELECTOR)) return;
+			if (touch || phaseRef.current === "comment") return;
+			const contextMenuEnabled = resolveTriggers(getConfig()).contextMenu;
+			if (!contextMenuEnabled) return;
+			const selection = window.getSelection();
+			const hasSelection = selection !== null && !selection.isCollapsed && selection.rangeCount > 0;
+			const pointInSelection = selection !== null && hasSelection && pointInRects(event.clientX, event.clientY, selection.getRangeAt(0).getClientRects());
+			if (!shouldOpenSelectionMenu({
+				defaultPrevented: event.defaultPrevented,
+				contextMenuEnabled,
+				touch,
+				targetInTranscript: isInsideTranscript(target),
+				pointInSelection,
+				hasSelection
+			})) return;
+			const snapshot = readSelectionSnapshot(toolbarRef.current);
+			if (!snapshot) return;
+			event.preventDefault();
+			event.stopPropagation();
+			openMenu(snapshot, event.clientX, event.clientY, "menu");
+		};
+		const onScroll = (event) => {
+			const target = event.target;
+			if (target instanceof Node && (toolbarRef.current?.contains(target) === true || commentWrapRef.current?.contains(target) === true)) return;
+			schedule();
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("pointerup", onPointerUp, true);
+		document.addEventListener("keyup", schedule, true);
+		document.addEventListener("selectionchange", onSelectionChange);
+		document.addEventListener("contextmenu", onContextMenu);
+		window.addEventListener("resize", schedule);
+		document.addEventListener("scroll", onScroll, true);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
+			document.removeEventListener("keyup", schedule, true);
+			document.removeEventListener("selectionchange", onSelectionChange);
+			document.removeEventListener("contextmenu", onContextMenu);
+			window.removeEventListener("resize", schedule);
+			document.removeEventListener("scroll", onScroll, true);
+		};
+	}, [
+		commentWrapRef,
+		dismissMenu,
+		flushComment,
+		hide,
+		openMenu,
+		phaseRef,
+		refresh,
+		toolbarRef,
+		touch
+	]);
+}
+//#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
+//#region src/client/selection/SelectionToolbar.tsx
 /** Cap for the auto-growing comment box; beyond this it scrolls internally. */
 const COMMENT_MAX_HEIGHT = 220;
 function SelectionToolbar({ sessionId }) {
@@ -2823,21 +4600,40 @@ function SelectionToolbar({ sessionId }) {
 	const [phase, setPhase] = (0, react.useState)("idle");
 	const [comment, setComment] = (0, react.useState)("");
 	const [status, setStatus] = (0, react.useState)(null);
+	const [menu, setMenu] = (0, react.useState)(null);
 	const activeRef = (0, react.useRef)(null);
 	activeRef.current = active;
+	const menuRef = (0, react.useRef)(null);
+	menuRef.current = menu;
+	const phaseRef = (0, react.useRef)(phase);
+	phaseRef.current = phase;
 	/** 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);
 	}, [sessionId]);
+	/**
+	* Drop the menu state **and** its ref in one tick. A refresh that runs right
+	* after a dismissal must see the menu as closed; reading the stale ref made
+	* it keep `active`, which raised the auto toolbar in contextmenu mode.
+	*/
+	const dismissMenu = (0, react.useCallback)(() => {
+		if (!menuRef.current) return false;
+		menuRef.current = null;
+		setMenu(null);
+		return true;
+	}, []);
 	const hide = (0, react.useCallback)(() => {
 		pendingIdRef.current = null;
+		dismissMenu();
 		setActive(null);
 		setPhase("idle");
 		setComment("");
 		setStatus(null);
-	}, []);
+	}, [dismissMenu]);
 	/**
 	* Keep what was typed when the comment popover goes away without an explicit
 	* cancel. The annotation itself was saved when the step opened, so dropping
@@ -2851,9 +4647,7 @@ function SelectionToolbar({ sessionId }) {
 		if (typed.trim()) updateAnnotationComment(void 0, id, typed);
 	}, []);
 	/** Save the current selection without a comment; returns the store id. */
-	const saveSelection = (0, react.useCallback)(() => {
-		const snapshot = activeRef.current;
-		if (!snapshot) return null;
+	const saveSelection = (0, react.useCallback)((snapshot) => {
 		return saveAnnotation(void 0, {
 			text: snapshot.text,
 			sources: snapshot.source ? [{
@@ -2865,12 +4659,31 @@ function SelectionToolbar({ sessionId }) {
 			}] : void 0
 		}).id;
 	}, []);
+	/**
+	* "Add to task" is the commit: the quote is saved immediately, with or
+	* without a comment. The popover only edits that saved entry, so dismissing
+	* it (outside click, new selection) can never undo the annotation.
+	*/
+	const beginComment = (0, react.useCallback)((snapshot) => {
+		pendingIdRef.current = saveSelection(snapshot);
+		setActive(snapshot);
+		dismissMenu();
+		setPhase("comment");
+		setComment("");
+		setStatus(null);
+	}, [dismissMenu, saveSelection]);
 	const refresh = (0, react.useCallback)(() => {
 		const next = readSelectionSnapshot(toolbarRef.current);
 		if (!next) {
+			dismissMenu();
 			if (phaseRef.current === "idle") setActive(null);
 			return;
 		}
+		if (menuRef.current && menuRef.current.snapshot.text !== next.text) dismissMenu();
+		if (!touch && !resolveTriggers(getConfig()).auto) {
+			if (phaseRef.current === "idle" && !menuRef.current) setActive(null);
+			return;
+		}
 		const current = activeRef.current;
 		if (phaseRef.current === "comment" && current && current.text !== next.text) {
 			flushComment();
@@ -2878,151 +4691,107 @@ function SelectionToolbar({ sessionId }) {
 			setComment("");
 		}
 		setActive((prev) => prev && prev.text === next.text && prev.left === next.left && prev.top === next.top && prev.below === next.below && prev.layer === next.layer ? prev : next);
-	}, [flushComment]);
-	const phaseRef = (0, react.useRef)(phase);
-	phaseRef.current = phase;
+	}, [
+		dismissMenu,
+		flushComment,
+		touch
+	]);
+	/** Latch the selection and anchor; the menu outlives later refresh passes. */
+	const openMenu = (0, react.useCallback)((snapshot, x, y, initialFocus) => {
+		setStatus(null);
+		setActive(snapshot);
+		setMenu({
+			snapshot,
+			x,
+			y,
+			initialFocus
+		});
+	}, []);
+	(0, react.useEffect)(() => subscribeConfig(() => {
+		dismissMenu();
+		refresh();
+	}), [dismissMenu, refresh]);
+	useSelectionWatcher({
+		toolbarRef,
+		commentWrapRef,
+		phaseRef,
+		touch,
+		dismissMenu,
+		refresh,
+		flushComment,
+		hide,
+		openMenu
+	});
 	(0, react.useEffect)(() => {
-		let scheduled = false;
-		const schedule = () => {
-			if (scheduled) return;
-			scheduled = true;
-			window.setTimeout(() => {
-				scheduled = false;
-				refresh();
-			}, 0);
-		};
-		let dragging = false;
-		const onPointerDown = (event) => {
-			const target = event.target;
-			if (!(target instanceof Node)) return;
-			const inToolbar = toolbarRef.current?.contains(target) === true;
-			const inComment = commentWrapRef.current?.contains(target) === true;
-			if (inToolbar || inComment) return;
-			dragging = true;
-			if (phaseRef.current === "comment") {
-				flushComment();
-				hide();
-				return;
-			}
-			const selection = window.getSelection();
-			if (selection && !selection.isCollapsed && selection.rangeCount > 0) {
-				schedule();
-				return;
+		if (touch) return;
+		const bridge = {
+			state: () => {
+				if (phaseRef.current !== "idle") return "busy";
+				return readSelectionSnapshot(toolbarRef.current) ? "ready" : "no-selection";
+			},
+			open: () => {
+				if (phaseRef.current !== "idle") return;
+				const snapshot = readSelectionSnapshot(toolbarRef.current);
+				if (!snapshot) return;
+				const rect = selectionFirstLineRect();
+				if (!rect) return;
+				openMenu(snapshot, rect.left, rect.bottom, "first");
+			},
+			add: () => {
+				if (phaseRef.current !== "idle") return;
+				const snapshot = readSelectionSnapshot(toolbarRef.current);
+				if (!snapshot) return;
+				beginComment(snapshot);
 			}
-			hide();
-		};
-		const onPointerUp = () => {
-			dragging = false;
-			schedule();
 		};
-		const onSelectionChange = () => {
-			if (dragging) return;
-			schedule();
-		};
-		const onScroll = (event) => {
-			const target = event.target;
-			if (target instanceof Node && (toolbarRef.current?.contains(target) === true || commentWrapRef.current?.contains(target) === true)) return;
-			schedule();
-		};
-		document.addEventListener("pointerdown", onPointerDown, true);
-		document.addEventListener("pointerup", onPointerUp, true);
-		document.addEventListener("keyup", schedule, true);
-		document.addEventListener("selectionchange", onSelectionChange);
-		window.addEventListener("resize", schedule);
-		document.addEventListener("scroll", onScroll, true);
+		runtime.selection = bridge;
 		return () => {
-			document.removeEventListener("pointerdown", onPointerDown, true);
-			document.removeEventListener("pointerup", onPointerUp, true);
-			document.removeEventListener("keyup", schedule, true);
-			document.removeEventListener("selectionchange", onSelectionChange);
-			window.removeEventListener("resize", schedule);
-			document.removeEventListener("scroll", onScroll, true);
+			if (runtime.selection === bridge) delete runtime.selection;
 		};
 	}, [
-		flushComment,
-		hide,
-		refresh
+		beginComment,
+		openMenu,
+		touch
 	]);
-	const placeCommentPop = (0, react.useCallback)(() => {
-		const snapshot = activeRef.current;
-		const layer = snapshot?.layer;
-		const toolbar = toolbarRef.current;
-		const pop = commentWrapRef.current;
-		if (!snapshot || !layer || !toolbar || !pop) return;
-		const bounds = layer.bounds();
-		const toolbarW = toolbar.offsetWidth;
-		const toolbarH = toolbar.offsetHeight;
-		const home = layer.fromContent(snapshot.left, snapshot.top);
-		const anchor = {
-			left: home.left - toolbarW / 2,
-			top: home.top - (snapshot.below ? 0 : toolbarH),
-			width: toolbarW,
-			height: toolbarH
-		};
-		pop.style.display = "flex";
-		pop.style.visibility = "hidden";
-		const panel = {
-			width: pop.offsetWidth || 320,
-			height: pop.offsetHeight || 180
-		};
-		pop.style.visibility = "";
-		const gap = 8;
-		const margin = 8;
-		const belowTop = layer.fromContent(0, snapshot.selectionBottom).top + gap;
-		const aboveTop = anchor.top - panel.height - gap;
-		const top = belowTop <= bounds.bottom - margin - panel.height ? belowTop : aboveTop >= bounds.top + margin ? aboveTop : Math.max(bounds.top + margin, Math.min(belowTop, bounds.bottom - margin - panel.height));
-		const half = panel.width / 2 + 8;
-		const min = bounds.left + half;
-		const center = Math.min(Math.max(anchor.left + anchor.width / 2, min), Math.max(min, bounds.right - half));
-		const at = layer.toContent(center, top);
-		pop.style.top = `${at.top}px`;
-		pop.style.left = `${at.left}px`;
-		const sideGap = 6;
-		const popLeftView = layer.fromContent(at.left, at.top).left - panel.width / 2;
-		const popTopView = top;
-		let leftView = popLeftView;
-		let topView = popTopView - sideGap - toolbarH;
-		if (topView < bounds.top + margin) topView = popTopView + panel.height + sideGap;
-		leftView = Math.max(bounds.left + margin, Math.min(leftView, bounds.right - margin - toolbarW));
-		topView = Math.max(bounds.top + margin, Math.min(topView, bounds.bottom - margin - toolbarH));
-		const toolbarAt = layer.toContent(leftView, topView);
-		toolbar.style.left = `${toolbarAt.left}px`;
-		toolbar.style.top = `${toolbarAt.top}px`;
-	}, []);
+	const placeCommentPop = useCommentPlacement({
+		touch,
+		phase,
+		active,
+		toolbarRef,
+		commentWrapRef
+	});
+	const layer = active?.layer;
 	(0, react.useLayoutEffect)(() => {
-		if (phase === "comment") placeCommentPop();
+		if (!layer || touch) return;
+		layer.setAboveComposer(phase === "comment");
+		return () => layer.setAboveComposer(false);
 	}, [
-		active,
+		layer,
 		phase,
-		placeCommentPop
+		touch
 	]);
 	(0, react.useEffect)(() => {
-		if (phase === "comment") commentRef.current?.focus();
-	}, [phase]);
-	(0, react.useEffect)(() => {
-		const onResize = () => placeCommentPop();
-		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
-	}, [placeCommentPop]);
+		if (phase === "comment" && !touch) commentRef.current?.focus();
+	}, [phase, 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();
 		event.stopPropagation();
 	}, []);
-	const handleCopy = (0, react.useCallback)(async () => {
-		const snapshot = activeRef.current;
-		if (!snapshot) return;
+	/** Copy a latched quote; a failure leaves the caller's surface in place. */
+	const copySnapshot = (0, react.useCallback)(async (snapshot) => {
 		try {
 			await copyText(snapshot.text);
 			clearNativeSelection();
@@ -3031,18 +4800,14 @@ function SelectionToolbar({ sessionId }) {
 			setStatus(t("toolbar.copyFailed"));
 		}
 	}, [hide]);
-	/**
-	* "Add to task" is the commit: the quote is saved immediately, with or
-	* without a comment. The popover only edits that saved entry, so dismissing
-	* it (outside click, new selection) can never undo the annotation.
-	*/
+	const handleCopy = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		if (snapshot) copySnapshot(snapshot);
+	}, [copySnapshot]);
 	const openComment = (0, react.useCallback)(() => {
-		if (!activeRef.current) return;
-		pendingIdRef.current = saveSelection();
-		setPhase("comment");
-		setComment("");
-		setStatus(null);
-	}, [saveSelection]);
+		const snapshot = activeRef.current;
+		if (snapshot) beginComment(snapshot);
+	}, [beginComment]);
 	/**
 	* Hand the selected link to the system browser.
 	*
@@ -3052,137 +4817,840 @@ function SelectionToolbar({ sessionId }) {
 	* arbitrary URLs there is what wedges it). Only http(s) selections get this
 	* button — every other scheme is refused by that handler.
 	*/
-	const handleOpenLink = (0, react.useCallback)(() => {
-		const snapshot = activeRef.current;
-		const url = snapshot ? linkTarget(snapshot.text, snapshot.anchorHref) : null;
+	const openLinkSnapshot = (0, react.useCallback)((snapshot) => {
+		const url = linkTarget(snapshot.text, snapshot.anchorHref);
 		if (!url) return;
 		window.open(url, "_blank", "noopener,noreferrer");
 		clearNativeSelection();
 		hide();
 	}, [hide]);
+	const handleOpenLink = (0, react.useCallback)(() => {
+		const snapshot = activeRef.current;
+		if (snapshot) openLinkSnapshot(snapshot);
+	}, [openLinkSnapshot]);
+	/** Dismissal without an action hands control back to the normal toolbar rules. */
+	const closeMenu = (0, react.useCallback)(() => {
+		if (!dismissMenu()) return;
+		refresh();
+	}, [dismissMenu, refresh]);
+	const handleMenuAction = (0, react.useCallback)((action) => {
+		const current = menuRef.current;
+		if (!current) return;
+		if (action === "add") beginComment(current.snapshot);
+		else if (action === "copy") copySnapshot(current.snapshot);
+		else openLinkSnapshot(current.snapshot);
+	}, [
+		beginComment,
+		copySnapshot,
+		openLinkSnapshot
+	]);
 	/** Close the optional comment step; the annotation stays saved either way. */
 	const finishComment = (0, react.useCallback)((keepComment) => {
 		if (keepComment) flushComment();
 		else pendingIdRef.current = null;
 		clearNativeSelection();
 		hide();
-		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]);
+	const handleCommentKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			pendingIdRef.current = null;
+			hide();
+			return;
+		}
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			finishComment(true);
+		}
+	}, [finishComment, hide]);
 	if (!active) return null;
 	const toolbarStyle = {
 		left: active.left,
 		top: active.top
 	};
-	const link = linkTarget(active.text, active.anchorHref);
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: toolbarRef,
-			className: cx(A.row, styles.toolbar),
-			style: phase === "comment" ? void 0 : toolbarStyle,
-			role: "toolbar",
-			"aria-label": t("toolbar.aria"),
-			"data-dsq-toolbar": "true",
-			"data-anchor": phase === "comment" ? "popover-top" : active.below ? "below" : "above",
-			onPointerDown: handleToolbarPointerDown,
-			children: phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: cx(A.inlineRow, styles.toolbarInner),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: {
-						padding: "0 8px",
-						fontSize: 13,
-						opacity: .8,
-						whiteSpace: "nowrap"
-					},
-					children: t("toolbar.commentHint")
-				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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")]
+	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: handleCopy
+		},
+		{
+			key: "add",
+			icon: "plus",
+			label: t("toolbar.addToTask"),
+			onClick: openComment
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarView, {
+		touch,
+		phase,
+		active,
+		status,
+		viewport,
+		actions,
+		comment,
+		toolbarStyle,
+		toolbarRef,
+		commentWrapRef,
+		commentRef,
+		menuOpen: menu !== null,
+		onToolbarPointerDown: handleToolbarPointerDown,
+		onCommentChange: setComment,
+		onCommentKeyDown: handleCommentKeyDown,
+		onFinishComment: finishComment,
+		onCloseSheet: closeCommentSheet
+	}), menu ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionMenu, {
+		snapshot: menu.snapshot,
+		x: menu.x,
+		y: menu.y,
+		initialFocus: menu.initialFocus,
+		onAction: handleMenuAction,
+		onClose: closeMenu
+	}) : null] });
+}
+//#endregion
+//#region src/client/shortcut-menu.ts
+const SELECTION_MENU_COMMAND_ID = "select-quote.openMenu";
+const ADD_TO_TASK_COMMAND_ID = "select-quote.addToTask";
+/**
+* Defaults per device profile.
+*
+* The two commands never share a binding. Web Linux admits only
+* `primary+Slash`, `primary+shift+Comma` and `primary+shift+Period`, and the
+* Host owns `primary+Slash` for its shortcut panel, so the menu takes comma and
+* add-to-task takes period. Web macOS/Windows accept two-modifier combinations;
+* theirs avoid the browser's own menu keys. Desktop Windows/Linux also take
+* period for add-to-task: `Ctrl+Alt+L` is AltGr+L on several layouts, and on
+* Windows the shell dispatches configured shortcuts before input regions.
+*/
+const SELECTION_MENU_DEFAULTS = Object.freeze({
+	"desktop:macos": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary"])
+	}),
+	"desktop:windows": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"desktop:linux": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"web:macos": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"web:windows": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"web:linux": Object.freeze({
+		code: "Comma",
+		modifiers: Object.freeze(["primary", "shift"])
+	})
+});
+const ADD_TO_TASK_DEFAULTS = Object.freeze({
+	"desktop:macos": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"desktop:windows": Object.freeze({
+		code: "Period",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"desktop:linux": Object.freeze({
+		code: "Period",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"web:macos": Object.freeze({
+		code: "KeyL",
+		modifiers: Object.freeze(["primary", "alt"])
+	}),
+	"web:windows": Object.freeze({
+		code: "Period",
+		modifiers: Object.freeze(["primary", "shift"])
+	}),
+	"web:linux": Object.freeze({
+		code: "Period",
+		modifiers: Object.freeze(["primary", "shift"])
+	})
+});
+function resolveSelectionAction(action) {
+	const bridge = runtime.selection;
+	if (!bridge) return {
+		status: "blocked",
+		reason: t("menu.noSelection")
+	};
+	const state = bridge.state();
+	if (state === "busy") return {
+		status: "blocked",
+		reason: t("menu.busy")
+	};
+	if (state === "no-selection") return {
+		status: "blocked",
+		reason: t("menu.noSelection")
+	};
+	return {
+		status: "handled",
+		run: () => bridge[action]()
+	};
+}
+function selectionMenuCommand() {
+	return {
+		id: SELECTION_MENU_COMMAND_ID,
+		label: () => t("menu.shortcutLabel"),
+		aliases: ["selection menu", "quote menu"],
+		defaults: SELECTION_MENU_DEFAULTS,
+		regions: ["page"],
+		modals: [],
+		resolve: () => resolveSelectionAction("open")
+	};
+}
+function addToTaskCommand() {
+	return {
+		id: ADD_TO_TASK_COMMAND_ID,
+		label: () => t("menu.addShortcutLabel"),
+		aliases: ["add to task", "annotate selection"],
+		defaults: ADD_TO_TASK_DEFAULTS,
+		regions: ["page"],
+		modals: [],
+		resolve: () => resolveSelectionAction("add")
+	};
+}
+let shortcutRows = [];
+const shortcutListeners = /* @__PURE__ */ new Set();
+function getShortcutRows() {
+	return shortcutRows;
+}
+function subscribeShortcutRows(listener) {
+	shortcutListeners.add(listener);
+	return () => {
+		shortcutListeners.delete(listener);
+	};
+}
+function publishShortcutRows(next) {
+	if (next.length === shortcutRows.length && next.every((row, index) => {
+		const previous = shortcutRows[index];
+		return previous.id === row.id && previous.label === row.label && previous.enabled === row.enabled && previous.keys.length === row.keys.length && previous.keys.every((key, keyIndex) => key === row.keys[keyIndex]);
+	})) return;
+	shortcutRows = next;
+	for (const listener of [...shortcutListeners]) listener();
+}
+/**
+* Mirror the two live catalog rows. The Host drops a command from the catalog
+* while it is unregistered, and marks a rebound conflict; the settings page
+* reads this instead of restating the defaults.
+*/
+function publishShortcutCatalog(ctx) {
+	const catalog = ctx.shortcuts.catalog.getSnapshot();
+	const next = [];
+	for (const id of [SELECTION_MENU_COMMAND_ID, ADD_TO_TASK_COMMAND_ID]) {
+		const row = catalog.find((candidate) => candidate.id === id);
+		if (!row) continue;
+		next.push({
+			id,
+			label: row.label,
+			keys: row.keys,
+			enabled: row.issue === null && row.conflicts.length === 0
+		});
+	}
+	publishShortcutRows(next);
+}
+/** Keep both commands registered exactly while the setting is on. */
+function installSelectionShortcut(ctx) {
+	const disposers = [];
+	const unregisterAll = () => {
+		while (disposers.length > 0) disposers.pop()?.();
+	};
+	const sync = () => {
+		unregisterAll();
+		if (!getConfig().shortcut) return;
+		for (const command of [selectionMenuCommand(), addToTaskCommand()]) try {
+			disposers.push(ctx.shortcuts.register(command));
+		} catch (error) {
+			console.warn(`[dsh-select-quote] shortcut registration failed for ${command.id}:`, error);
+		}
+	};
+	ctx.effect(() => {
+		const syncCatalog = () => publishShortcutCatalog(ctx);
+		syncCatalog();
+		const offCatalog = ctx.shortcuts.catalog.subscribe(syncCatalog);
+		sync();
+		const off = subscribeConfig(sync);
+		return () => {
+			off();
+			offCatalog();
+			unregisterAll();
+			publishShortcutRows([]);
+		};
+	}, "dsh-select-quote: shortcut commands");
+}
+//#endregion
+//#region src/client/settings/ConfigRow.tsx
+const CHOICES = [
+	"auto",
+	"contextmenu",
+	"both"
+];
+function ConfigRow({ view, form, t: slotTranslate }) {
+	useLocale();
+	if (view !== "page" || form === void 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigSection, {
+		form,
+		slotTranslate
+	});
+}
+/**
+* The bundle config entry gets no `form` prop from the Host (unlike a row
+* page), so it subscribes to the row's form controller itself. The controller
+* owns write ordering and revisions; `set` is the one-field convenience.
+*/
+function ConfigSection({ form, slotTranslate }) {
+	const subscribe = (0, react.useCallback)((listener) => form.subscribe(listener), [form]);
+	const getSnapshot = (0, react.useCallback)(() => form.getSnapshot(), [form]);
+	const current = normalizeConfig((0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot).value);
+	const shortcuts = (0, react.useSyncExternalStore)(subscribeShortcutRows, getShortcutRows, getShortcutRows);
+	const t$1 = slotTranslate ?? t;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: styles.settings,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.settingsSection,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: styles.settingsCopy,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsLabel,
+						children: t$1("settings.trigger")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsHint,
+						children: t$1("settings.triggerHint")
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.seg,
+					role: "radiogroup",
+					"aria-label": t$1("settings.trigger"),
+					children: CHOICES.map((mode) => {
+						const active = mode === current.triggerMode;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: styles.segOption,
+							"data-active": active,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "radio",
+								className: styles.srOnly,
+								name: "dsq-trigger-mode",
+								value: mode,
+								checked: active,
+								onChange: () => {
+									if (active) return;
+									form.set("triggerMode", mode);
+								}
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t$1(`settings.trigger.${mode}`) })]
+						}, mode);
 					})
-				]
-			})
-		}),
-		phase === "comment" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: commentWrapRef,
-			className: cx(A.col, styles.commentPop),
-			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")
 				})]
-			})]
-		}) : null,
-		status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: styles.status,
-			style: toolbarStyle,
-			role: "status",
-			children: status
-		}) : null
-	] }), active.layer.host);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.settingsDivider,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: styles.settingsSwitchRow,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: styles.settingsCopy,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsLabel,
+						children: t$1("settings.shortcut")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsHint,
+						children: t$1("settings.shortcutHint")
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: styles.switch,
+					"data-on": current.shortcut,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						className: styles.srOnly,
+						"aria-label": t$1("settings.shortcut"),
+						checked: current.shortcut,
+						onChange: (event) => {
+							const next = event.target.checked;
+							if (next === current.shortcut) return;
+							form.set("shortcut", next);
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.switchTrack,
+						"aria-hidden": "true"
+					})]
+				})]
+			}),
+			current.shortcut ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: styles.settingsShortcuts,
+				"aria-label": t$1("settings.shortcutListAria"),
+				children: shortcuts.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: styles.settingsHint,
+					children: t$1("settings.shortcutUnavailable")
+				}) : shortcuts.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: styles.settingsShortcutRow,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsShortcutName,
+						children: row.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: styles.settingsShortcutKeys,
+						children: row.enabled ? row.keys.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+							className: styles.keycap,
+							children: row.keys.join("")
+						}) : t$1("settings.shortcutUnbound") : t$1("settings.shortcutConflict")
+					})]
+				}, row.id))
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/shared/identity.ts
+/**
+* Names the Loader and the settings layer agree on.
+*
+* The row id lives in `cordis.patch.yml` (and the local `dev.patch.yml`); the
+* Host config form is keyed by it, so renaming either without this constant
+* would silently orphan the form. The bundle config section is keyed by the
+* package name instead.
+*/
+const PACKAGE_NAME = "dsh-select-quote";
+const ROW_ID = "select-quote";
+//#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
@@ -3197,7 +5665,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 +5682,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 +5712,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 +5745,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 +5912,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 +5986,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 +5996,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 +6014,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 +6044,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 +6221,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
@@ -3685,6 +6254,19 @@ function apply(ctx) {
 		subscribe: (listener) => ctx.locale.subscribe(listener)
 	});
 	ctx.effect(() => subscribeLocale(() => refreshDirectiveChips()), "dsh-select-quote: chip language");
+	ctx.inject(["configForms"], (scope) => {
+		scope.effect(() => attachConfigForm(scope.configForms.get(ROW_ID)), "dsh-select-quote: config");
+		const form = scope.configForms.get(ROW_ID);
+		scope.effect(() => scope.configForms.whileServed([ROW_ID], () => scope.slots.inject("plugins.bundle.config", () => scope.slots.register({
+			name: "plugins.bundle.config",
+			key: PACKAGE_NAME,
+			locale: LOCALE_NS,
+			inject: () => ({ form })
+		}, ConfigRow))), "dsh-select-quote: settings section");
+	});
+	ctx.inject(["shortcuts"], (scope) => {
+		installSelectionShortcut(scope);
+	});
 	ctx.effect(() => watchAnnotationDirectives(), "dsh-select-quote: annotation directives");
 	ctx.effect(() => watchAnnotationMarks(), "dsh-select-quote: annotation marks");
 	ctx.effect(() => watchSubmissionEcho(), "dsh-select-quote: submission echo");
@@ -3696,7 +6278,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 +6314,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);