@khanglvm/relay 0.12.2 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Question boards with rich blocks (markdown, charts, mermaid, tables, code, diffs, video, sandboxed HTML), clickable local file-links, and element-level annotations for AI coding agents (Claude Code, Codex, …): ask users structured questions, present interactive visuals, collect inline comments, read answers as JSON — in a local browser board OR rendered INLINE inside the Claude & Codex apps as an MCP App (SEP-1865).",
   "keywords": [
     "ai-agents",

package/src/ui/annotate.css

@@ -48,12 +48,22 @@
   padding: 12px 14px;
   font: 14px/1.5 var(--sans);
 }
+.ann-pop-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
 .ann-pop-label {
+  flex: 1; min-width: 0;
   color: var(--muted);
   font-size: 0.78rem;
-  margin-bottom: 8px;
   overflow-wrap: anywhere;
 }
+.ann-pop-close {
+  flex: none; margin: -4px -4px 0 0;
+  background: transparent; color: var(--muted);
+  border: none; border-radius: 7px;
+  width: 26px; height: 26px;
+  font-size: 1.25rem; line-height: 1; cursor: pointer;
+  transition: color 150ms var(--ease), background 150ms var(--ease);
+}
+.ann-pop-close:hover { color: var(--fg); background: var(--bg-sunken); }
 .ann-pop-existing { margin-bottom: 8px; max-height: min(50vh, 420px); overflow-y: auto; }
 .ann-pop-existing:empty { display: none; margin: 0; }
 
@@ -146,16 +156,49 @@
 .ann-cancel:hover { border-color: var(--accent); color: var(--accent); }
 
 /* delete button (popover items + summary rows): muted, danger on hover */
+/* Delete = a trash icon button, visually distinct from the close ×. */
 .ann-del {
   flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
   background: transparent; color: var(--muted);
-  border: none; border-radius: 6px;
-  padding: 2px 6px;
-  font-size: 1.05rem; line-height: 1;
+  border: none; border-radius: 7px;
+  width: 26px; height: 26px;
   cursor: pointer;
-  transition: color 150ms var(--ease);
+  transition: color 150ms var(--ease), background 150ms var(--ease);
 }
-.ann-del:hover { color: var(--danger); }
+.ann-del:hover { color: var(--danger); background: var(--accent-soft); }
+
+/* ---------- delete confirmation modal ---------- */
+.ann-confirm-scrim {
+  position: fixed; inset: 0; z-index: 80;
+  background: rgba(28, 27, 25, 0.4);
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+}
+.ann-confirm {
+  width: min(360px, 92vw);
+  background: var(--card); color: var(--fg);
+  border: 1px solid var(--border); border-radius: 14px;
+  box-shadow: var(--shadow-lift);
+  padding: 20px;
+  font: 14px/1.5 var(--sans);
+}
+.ann-confirm-title { font: 600 1.05rem var(--sans); margin-bottom: 6px; }
+.ann-confirm-msg { color: var(--fg-2); font-size: 0.9rem; }
+.ann-confirm-skip {
+  display: flex; align-items: center; gap: 8px;
+  margin: 14px 0 4px; color: var(--fg-2); font-size: 0.85rem; cursor: pointer;
+}
+.ann-confirm-skip input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
+.ann-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.ann-confirm-cancel, .ann-confirm-del {
+  border-radius: 9px; padding: 8px 16px; font: 600 0.88rem var(--sans); cursor: pointer;
+  border: 1px solid var(--border-strong); transition: all 150ms var(--ease);
+}
+.ann-confirm-cancel { background: var(--card); color: var(--fg-2); }
+.ann-confirm-cancel:hover { background: var(--bg-sunken); color: var(--fg); }
+.ann-confirm-del { background: var(--danger); color: var(--danger-fg); border-color: var(--danger); }
+.ann-confirm-del:hover { filter: brightness(1.06); }
 
 /* ---------- floating selection button ---------- */
 .ann-selbtn {
@@ -274,9 +317,8 @@
 .ann-rail-list .ann-sum-row + .ann-sum-row { border-top: 1px solid var(--border); }
 .ann-rail-list .ann-sum-row:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
 
-/* The rail always overlays the board (scrim dims, content never moves) — opening
-   it must NOT shift layout, on any width. It's reached only via the floating
-   Comments button, which flashes when a new comment lands. */
+/* The rail NEVER auto-opens (that shifted the board unexpectedly) — it's reached
+   only via the floating Comments button, which flashes when a new comment lands. */
 @keyframes ann-toggle-pulse {
   0% { transform: scale(1); }
   35% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--accent-soft); }
@@ -284,6 +326,15 @@
 }
 .ann-rail-toggle.pulse { animation: ann-toggle-pulse 600ms var(--ease); border-color: var(--accent); color: var(--accent); }
 
+/* When opened on a roomy screen, the rail DOCKS and consumes page space (pushes
+   content) instead of covering it — so the board stays visible beside it and
+   clicking a comment reveals the highlighted item in the page. No scrim while
+   docked. Narrow screens fall back to an overlay + scrim (no room to dock). */
+@media (min-width: 980px) {
+  .ann-rail-scrim { display: none !important; }
+  body.ann-rail-open { padding-right: 340px; }
+}
+
 /* ---------- jump-to flash ---------- */
 .ann-flash { animation: ann-flash 1s var(--ease); }
 @keyframes ann-flash {

package/src/ui/annotate.js

@@ -494,13 +494,57 @@
     dom.pop.replaceChildren();
   }
 
+  // ---------- delete a comment (with confirm) ----------
+  // The × that used to delete a comment read as "close the popup". Delete is now
+  // a distinct trash button that opens a confirm modal; "Don't ask again"
+  // (default OFF) suppresses future confirms for the session (persisted best-effort).
+  const ICON_TRASH =
+    '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M2.5 4h11M6 4V2.5h4V4M5 4l.5 9h5l.5-9"/></svg>';
+  const DEL_SKIP_KEY = 'relay-ann-del-skip';
+  let delConfirmSkip = false;
+  try { delConfirmSkip = localStorage.getItem(DEL_SKIP_KEY) === '1'; } catch { /* sandbox: no storage */ }
+
+  function requestDelete(id, after) {
+    const done = () => { removeAnnotation(id); if (after) after(); };
+    if (delConfirmSkip) { done(); return; }
+    showDeleteConfirm(done);
+  }
+  function showDeleteConfirm(onConfirm) {
+    const scrim = el('div', { class: 'ann-confirm-scrim' });
+    const skip = el('input', { type: 'checkbox' });
+    const cancel = el('button', { class: 'ann-confirm-cancel', type: 'button' }, 'Cancel');
+    const del = el('button', { class: 'ann-confirm-del', type: 'button' }, 'Delete');
+    const close = () => { scrim.remove(); document.removeEventListener('keydown', onKey, true); };
+    const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } };
+    cancel.addEventListener('click', close);
+    scrim.addEventListener('mousedown', (e) => { if (e.target === scrim) close(); });
+    del.addEventListener('click', () => {
+      if (skip.checked) { delConfirmSkip = true; try { localStorage.setItem(DEL_SKIP_KEY, '1'); } catch { /* sandbox */ } }
+      close();
+      onConfirm();
+    });
+    scrim.append(el('div', { class: 'ann-confirm', role: 'alertdialog', 'aria-label': 'Delete comment' },
+      el('div', { class: 'ann-confirm-title' }, 'Delete this comment?'),
+      el('div', { class: 'ann-confirm-msg' }, 'This removes the comment and its replies. It can’t be undone.'),
+      el('label', { class: 'ann-confirm-skip' }, skip, el('span', {}, 'Don’t ask again')),
+      el('div', { class: 'ann-confirm-actions' }, cancel, del)
+    ));
+    document.body.append(scrim);
+    document.addEventListener('keydown', onKey, true);
+    setTimeout(() => { try { cancel.focus(); } catch { /* ignore */ } }, 0);
+  }
+
   function openPopover(info, anchorEl) {
     if (disabled) return;
     ensureDom();
     closePopover();
     hidePin();
     const pop = dom.pop;
-    pop.replaceChildren(el('div', { class: 'ann-pop-label' }, humanize(info.target)));
+    // Header: target label + an explicit CLOSE button, so × always means "close".
+    const popClose = el('button', { class: 'ann-pop-close', type: 'button', title: 'Close', 'aria-label': 'Close' }, '×');
+    popClose.addEventListener('click', closePopover);
+    pop.replaceChildren(el('div', { class: 'ann-pop-head' }, el('div', { class: 'ann-pop-label' }, humanize(info.target)), popClose));
 
     // Existing comments on this exact target, rendered as threads: author
     // chip + time + delete, the comment text, its replies indented below,
@@ -510,11 +554,9 @@
     const renderExisting = () => {
       existingWrap.replaceChildren();
       for (const a of matching(info)) {
-        const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' }, '×');
-        del.addEventListener('click', () => {
-          removeAnnotation(a.id);
-          renderExisting();
-        });
+        const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' });
+        del.innerHTML = ICON_TRASH;
+        del.addEventListener('click', () => requestDelete(a.id, renderExisting));
         const thread = el('div', { class: 'ann-thread' },
           el('div', { class: 'ann-thread-head' }, chip(a.author), timeEl(a.createdAt), del),
           el('div', { class: 'ann-pop-text' }, a.text)
@@ -719,11 +761,9 @@
     // The rail has its own header chrome; standalone summaries get a heading.
     if (!isRail) target.append(el('h3', { class: 'ann-sum-head' }, `Comments (${annotations.length})`));
     for (const a of annotations) {
-      const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' }, '×');
-      del.addEventListener('click', (e) => {
-        e.stopPropagation();
-        removeAnnotation(a.id);
-      });
+      const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' });
+      del.innerHTML = ICON_TRASH;
+      del.addEventListener('click', (e) => { e.stopPropagation(); requestDelete(a.id); });
       // Thread meta: reply count, plus an "agent" chip when the latest entry
       // in the thread (last reply, or the comment itself) is agent-authored.
       const replyCount = Array.isArray(a.replies) ? a.replies.length : 0;