@khanglvm/relay 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "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.js

@@ -107,6 +107,9 @@
   let popOpen = false;
   let popScrollY = 0;
   let popSave = null;
+  // Frozen by the host (e.g. relay's connection-lost block): suppress every way
+  // to START a comment, so the user can't type feedback that won't be saved.
+  let disabled = false;
   let badgeTimer = 0;
   let railOpen = false;
 
@@ -377,6 +380,7 @@
 
   // ---------- hover pin ----------
   function showPin(entry) {
+    if (disabled) return;
     clearTimeout(pinTimer);
     pinEntry = entry;
     const rect = entry.el.getBoundingClientRect();
@@ -483,6 +487,7 @@
   }
 
   function openPopover(info, anchorEl) {
+    if (disabled) return;
     ensureDom();
     closePopover();
     hidePin();
@@ -641,6 +646,7 @@
   }
 
   function maybeShowSelBtn(rootEl, baseInfo) {
+    if (disabled) return hideSelBtn();
     const sel = window.getSelection();
     if (!sel || sel.isCollapsed || !sel.rangeCount) return hideSelBtn();
     if (!rootEl.contains(sel.anchorNode) || !rootEl.contains(sel.focusNode)) return hideSelBtn();
@@ -851,11 +857,28 @@
     return popOpen;
   }
 
+  // Commit a mid-typed comment (the open popover's "Add a comment" box) as a
+  // saved annotation, then close it — so freezing the board doesn't throw away
+  // text the user was in the middle of writing. ponytail: only the main comment
+  // box is flushed, not an in-progress thread reply (the rare case).
+  function flushOpen() {
+    if (popOpen && popSave) { try { popSave(); } catch { closePopover(); } }
+  }
+
+  // Freeze/unfreeze comment creation. While disabled, no pin, selection button,
+  // or popover appears, so the user can't start feedback that won't be saved.
+  function setDisabled(v) {
+    disabled = Boolean(v);
+    // Also close the rail flushOpen() may have just opened — otherwise it covers
+    // the host's top-right "connection lost" notice.
+    if (disabled) { closePopover(); hideSelBtn(); hidePin(); closeRail(); }
+  }
+
   function renderSummary(target) {
     ensureDom();
     summaryEls.add(target);
     renderSummaryInto(target);
   }
 
-  window.RelayAnnotate = { init, register, enableTextSelection, openExternal, list, renderSummary, onBadgeRefresh, teardown, isComposing };
+  window.RelayAnnotate = { init, register, enableTextSelection, openExternal, list, renderSummary, onBadgeRefresh, teardown, isComposing, flushOpen, setDisabled };
 })();

package/src/ui/app.js

@@ -271,13 +271,15 @@
   // board's local HTTP server (server gone, port taken over, socket dropped,
   // machine slept). Autosaves then fail silently and the user keeps typing
   // answers/comments that are never persisted, then Submit fails too — all of it
-  // thrown away. When persistence is CONFIRMED lost we hard-block: disable every
-  // control and overlay an unmissable scrim with a Retry. Local `state` is never
-  // touched, so the moment the connection recovers we flush it and unblock —
-  // nothing the user typed during the outage is lost.
+  // thrown away. When persistence is CONFIRMED lost we DISABLE every control (and
+  // freeze new comments) and show a small, non-dismissable top-right notice with
+  // a Reconnect button — without blocking the page, so the user can still read
+  // and scroll. Local `state` is never touched, and a mid-typed comment is saved
+  // before the freeze, so nothing the user entered during the outage is lost; the
+  // moment the connection recovers we flush state and re-enable everything.
   let persistenceLost = false;
   let probing = false;
-  let lostOverlay = null;
+  let lostNote = null;
   let lostRetryBtn = null;
 
   // A direct, side-effect-free reachability probe. Resolves true when the local
@@ -293,46 +295,55 @@
     }
   }
 
-  function buildLostOverlay() {
-    if (lostOverlay) return lostOverlay;
-    lostRetryBtn = el('button', { class: 'lost-retry', type: 'button' }, 'Retry connection');
+  function buildLostNote() {
+    if (lostNote) return lostNote;
+    lostRetryBtn = el('button', { class: 'lost-retry', type: 'button' }, 'Reconnect');
     lostRetryBtn.addEventListener('click', retryConnection);
-    lostOverlay = el('div', { class: 'lost-overlay', role: 'alertdialog', 'aria-modal': 'true', 'aria-label': 'Connection lost' },
-      el('div', { class: 'lost-card' },
-        el('div', { class: 'lost-mark' }, '⚠'),
-        el('h2', {}, 'Connection lost — input isn’t being saved'),
-        el('p', {}, 'This board can no longer reach your agent’s session, so anything you type now won’t be saved. Editing is paused to keep you from losing work.'),
-        el('p', { class: 'lost-sub' }, 'Your input up to this point is kept in this tab. Click Retry once the agent’s session is back, or prompt the agent to reopen this board — your draft and unsaved edits will be restored.'),
-        lostRetryBtn
-      )
+    lostNote = el('div', { class: 'lost-note', role: 'status', 'aria-live': 'polite' },
+      el('span', { class: 'lost-note-dot', 'aria-hidden': 'true' }),
+      el('div', { class: 'lost-note-body' },
+        el('div', { class: 'lost-note-title' }, 'Connection lost'),
+        el('div', { class: 'lost-note-sub' }, 'Editing paused — your input is kept.')
+      ),
+      lostRetryBtn
     );
-    return lostOverlay;
+    return lostNote;
   }
 
-  // Enter the blocked state: disable controls, mount the overlay. Idempotent.
+  // Enter the blocked state: save a mid-typed comment, freeze comments, disable
+  // controls, and pin the small notice. Idempotent. Does NOT block the page —
+  // the user can still read and scroll; only editing is paused.
   function blockForLostPersistence() {
     if (persistenceLost || submitted) return;
     persistenceLost = true;
     document.documentElement.classList.add('relay-blocked');
-    // Disable every interactive control inside the form (inputs the user could
-    // otherwise keep typing into) plus Submit.
+    // Save whatever the user was typing into the comment popover BEFORE freezing
+    // it, so the in-progress comment is kept (in `state` + localStorage) instead
+    // of discarded; then stop any new comment from being started.
+    if (Annotate) {
+      if (typeof Annotate.flushOpen === 'function') { try { Annotate.flushOpen(); } catch { /* non-fatal */ } }
+      if (typeof Annotate.setDisabled === 'function') { try { Annotate.setDisabled(true); } catch { /* non-fatal */ } }
+    }
+    // Disable every interactive control inside the form. Values already entered
+    // stay in the DOM (and in `state`), so nothing typed so far is lost.
     for (const node of app.querySelectorAll('input, textarea, button, select')) {
       node.disabled = true;
     }
-    document.body.append(buildLostOverlay());
+    document.body.append(buildLostNote());
     if (saveEl) saveEl.textContent = 'connection lost — not saving';
   }
 
-  // Leave the blocked state: re-enable controls, remove the overlay, and flush
-  // whatever the user typed during the outage so it's persisted right away.
+  // Leave the blocked state: re-enable controls + comments, drop the notice, and
+  // flush whatever the user typed during the outage so it's persisted right away.
   function unblockAfterRecovery() {
     if (!persistenceLost) return;
     persistenceLost = false;
     document.documentElement.classList.remove('relay-blocked');
+    if (Annotate && typeof Annotate.setDisabled === 'function') { try { Annotate.setDisabled(false); } catch { /* non-fatal */ } }
     for (const node of app.querySelectorAll('input, textarea, button, select')) {
       node.disabled = false;
     }
-    if (lostOverlay) lostOverlay.remove();
+    if (lostNote) lostNote.remove();
     // Re-arm the heartbeat (it stops itself when it confirms loss) and persist
     // everything typed during the outage. saveDraft() updates the save label.
     startHeartbeat();

package/src/ui/style.css

@@ -282,46 +282,35 @@ textarea { min-height: 90px; resize: vertical; }
   .scale button { width: 40px; height: 40px; }
 }
 
-/* Persistence-lost block: when the board can no longer save the user's input
+/* Persistence-lost notice: when the board can no longer save the user's input
    (server gone / port taken / machine slept) AND recovery probes have failed,
-   we disable every control and overlay this unmissable scrim so the user is
-   physically prevented from typing feedback that would be silently discarded.
-   Sits above everything (full-screen overlay z 49 / popover / rail / toast). */
-.relay-blocked #app { filter: grayscale(0.4) blur(1px); pointer-events: none; user-select: none; }
-.lost-overlay {
-  position: fixed; inset: 0; z-index: 60;
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-  background: color-mix(in srgb, var(--bg) 78%, transparent);
-  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
-}
-.lost-card {
-  max-width: 460px; width: 100%;
+   we disable every control (and freeze new comments) and pin this SMALL,
+   non-dismissable note top-right with a Reconnect button. It does NOT block the
+   page — the user can still read and scroll; only editing is paused. Recovery
+   re-enables everything and removes the note. */
+.lost-note {
+  position: fixed; top: 12px; right: 12px; z-index: 60;
+  display: flex; align-items: center; gap: 10px;
+  max-width: min(320px, calc(100vw - 24px));
   background: var(--card); color: var(--fg);
-  border: 1px solid var(--border-strong); border-radius: 14px;
+  border: 1px solid var(--danger); border-radius: 11px;
   box-shadow: var(--shadow-lift);
-  padding: 28px 26px; text-align: center;
-}
-.lost-card .lost-mark {
-  width: 52px; height: 52px; border-radius: 50%;
-  background: var(--danger); color: var(--danger-fg);
-  font-size: 1.6rem; line-height: 52px; margin: 0 auto 16px;
+  padding: 9px 11px;
 }
-.lost-card h2 {
-  font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em;
-  font-size: 1.3rem; margin: 0 0 10px;
-}
-.lost-card p { color: var(--fg-2); font-size: 0.92rem; line-height: 1.55; margin: 0 0 8px; }
-.lost-card .lost-sub { color: var(--muted); font-size: 0.82rem; margin: 12px 0 18px; }
-.lost-card .lost-retry {
+.lost-note-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
+.lost-note-body { flex: 1; min-width: 0; line-height: 1.3; }
+.lost-note-title { font-size: 0.82rem; font-weight: 600; }
+.lost-note-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
+.lost-note .lost-retry {
+  flex: none;
   background: var(--accent); color: var(--accent-fg);
-  border: none; border-radius: 10px;
-  padding: 11px 26px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
+  border: none; border-radius: 8px;
+  padding: 6px 12px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
   transition: background 150ms var(--ease);
 }
-.lost-card .lost-retry:hover { background: var(--accent-hover); }
-.lost-card .lost-retry:disabled { opacity: 0.6; cursor: default; }
-.lost-card .lost-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.lost-note .lost-retry:hover { background: var(--accent-hover); }
+.lost-note .lost-retry:disabled { opacity: 0.6; cursor: default; }
+.lost-note .lost-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }