@khanglvm/relay 0.5.4 → 0.7.0

package/src/ui/app.js

@@ -34,6 +34,22 @@
     setTimeout(() => toast.remove(), 4000);
   }
 
+  // True once the board has soft-timed-out (the agent stopped waiting) or the
+  // live connection dropped — used to tailor the post-submit message. The board
+  // stays fully usable either way; we never disable Submit.
+  let handedBack = false;
+  // Calm, persistent status note (reuses the #banner bar). tone 'info' is the
+  // default neutral style; 'warn' is a softer amber, NOT the old red error.
+  // Shown at most once per message so the heartbeat can call it every tick.
+  const notesShown = new Set();
+  function showNotice(message, tone) {
+    if (notesShown.has(message)) return;
+    notesShown.add(message);
+    banner.textContent = message;
+    banner.className = 'banner ' + (tone === 'warn' ? 'warn' : 'info');
+    banner.style.display = 'block';
+  }
+
   // ---------- theme (auto -> light -> dark) ----------
   // Server-side pref wins: boards run on random ports, so localStorage alone
   // can't carry the choice across boards. The server persists it globally.
@@ -232,6 +248,9 @@
       onChange: (list) => {
         state.annotations = list;
         scheduleSave();
+        // Refresh per-element comment badges inside custom-HTML iframes (bridge
+        // sets this once the iframe annotate plumbing is wired below).
+        if (window.__relayBroadcastCounts) window.__relayBroadcastCounts();
       },
     });
   }
@@ -516,7 +535,13 @@
     // sessionStorage may be unavailable (privacy mode) — non-fatal
   }
 
-  app.append(el('header', { class: 'qb-header' }, el('h1', {}, spec.title), themeBtn));
+  const titleEl = el('h1', {}, spec.title);
+  app.append(el('header', { class: 'qb-header' }, titleEl, themeBtn));
+  // The board title is commentable too: hovering it shows the pin, like the
+  // intro and every other content element. (themeBtn stays out of it.)
+  if (spec.title) {
+    Annotate?.register(titleEl, { blockId: null, questionId: null, target: { kind: 'html-element', label: spec.title } });
+  }
   if (spec.intro) {
     const intro = el('p', { class: 'intro' }, spec.intro);
     app.append(intro);
@@ -542,7 +567,7 @@
     else control.append(controlText(q, q.type === 'textarea'));
     card.append(control);
     if (q.note) {
-      const noteInput = el('input', { type: 'text', class: 'qnote', placeholder: 'optional note about this answer…' });
+      const noteInput = el('textarea', { class: 'qnote', rows: 2, placeholder: 'optional note about this answer…' });
       noteInput.value = typeof state.notes[q.id] === 'string' ? state.notes[q.id] : '';
       noteInput.addEventListener('input', () => {
         state.notes[q.id] = noteInput.value;
@@ -569,19 +594,15 @@
     ));
   }
 
-  // Annotations summary (editable list) sits directly above the submit bar.
-  if (Annotate) {
-    const summary = el('div', { class: 'ann-summary-wrap' });
-    app.append(summary);
-    Annotate.renderSummary(summary);
-  }
+  // Element-level comments live in the Outline-style right rail (created and
+  // managed by RelayAnnotate); no inline summary list here anymore.
 
   const submitBtn = el('button', { class: 'submit', type: 'button' }, spec.submitLabel);
   saveEl = el('span', { class: 'savestate' }, '');
   const hint = el('span', { class: 'hint' },
     QS.length && spec.allowPartial ? 'Unanswered questions are returned as skipped.' : '');
   app.append(el('div', { class: 'submitbar' }, submitBtn, hint, saveEl));
-  app.append(el('footer', { class: 'qb-footer' }, `quest-board · ${boot.boardId}`));
+  app.append(el('footer', { class: 'qb-footer' }, `relay · ${boot.boardId}`));
 
   // ---------- validation & submit ----------
   function validate() {
@@ -607,11 +628,19 @@
         // best effort
       }
     }
+    // If the agent already stopped waiting (soft timeout / dropped connection),
+    // the submission won't be picked up automatically — tell the user to nudge
+    // the agent. Otherwise the normal hand-back copy applies.
+    const note = handedBack
+      ? 'Saved. Your agent had stopped waiting — send it a message so it picks up your answers.'
+      : closing
+        ? 'Handing back to your agent — this tab will close itself…'
+        : 'Handed back to your agent. You can close this tab.';
     app.replaceChildren(
       el('div', { class: 'done' },
         el('div', { class: 'mark' }, '✓'),
         el('h2', {}, QS.length ? 'Submitted' : 'Acknowledged'),
-        el('p', { id: 'done-note' }, closing ? 'Handing back to your agent — this tab will close itself…' : 'Handed back to your agent. You can close this tab.')
+        el('p', { id: 'done-note' }, note)
       )
     );
   }
@@ -629,8 +658,11 @@
       });
       if (!res.ok) throw new Error('submit rejected');
       submitted = true;
-      showDone(spec.autoClose);
-      if (spec.autoClose) {
+      // Don't auto-close when the agent had stopped waiting — the user needs to
+      // read the "send your agent a message" note and act on it.
+      const autoClose = spec.autoClose && !handedBack;
+      showDone(autoClose);
+      if (autoClose) {
         setTimeout(() => {
           window.close();
           // window.close() is best-effort (browsers may block it for
@@ -642,11 +674,15 @@
         }, 700);
       }
     } catch {
+      // The server is gone, so this submit couldn't be delivered. Keep the
+      // button live and tell the user how to get their input to the agent —
+      // their draft was autosaved up to the last edit.
       submitBtn.disabled = false;
       submitBtn.textContent = spec.submitLabel;
-      banner.textContent = 'Submit failed — the board server may have stopped.';
-      banner.style.display = 'block';
-      setTimeout(() => { if (!submitted) banner.style.display = 'none'; }, 4000);
+      showNotice(
+        'Couldn’t reach the agent to submit just now — your draft is saved. Prompt the agent to reopen this board so your input isn’t lost.',
+        'warn'
+      );
     }
   });
 
@@ -664,33 +700,66 @@
   }
 
   // ---------- iframe annotate bridge ----------
-  // Custom-HTML iframes (via /kit.js relayKit.commentable) post
-  // {relay:'annotate-request', label, detail?}. Match the source to the
-  // iframe, read its block/question ids, and open the annotate popover anchored
-  // to that iframe.
+  // Custom-HTML iframes (via /kit.js relayKit.annotate, auto-injected by the
+  // server) talk to the parent over postMessage:
+  //   iframe → {relay:'annotate-ready'}                      we send it counts
+  //   iframe → {relay:'annotate-request', ref, label, detail?, rect}
+  //   parent → {relay:'annotate-counts', counts:{ref:n}}     it draws badges
+  // We own the annotation state, popover, and the submitted result; the iframe
+  // owns hover/pin/badges over its own (cross-origin) DOM.
   if (Annotate) {
-    window.addEventListener('message', (e) => {
-      const msg = e.data;
-      if (!msg || typeof msg !== 'object' || msg.relay !== 'annotate-request') return;
-      let frame = null;
+    const frameOf = (source) => {
       for (const f of document.querySelectorAll('iframe.viz')) {
-        if (f.contentWindow === e.source) { frame = f; break; }
+        if (f.contentWindow === source) return f;
+      }
+      return null;
+    };
+    // Per-element comment counts for one iframe, keyed by target.ref.
+    const postCountsTo = (frame) => {
+      if (!frame || !frame.contentWindow) return;
+      const blockId = frame.getAttribute('data-block-id') || null;
+      const counts = {};
+      for (const a of Annotate.list()) {
+        if ((a.blockId ?? null) !== (blockId ?? null)) continue;
+        const t = a.target || {};
+        if (t.kind !== 'html-element' || !t.ref) continue;
+        counts[t.ref] = (counts[t.ref] || 0) + 1;
       }
+      try { frame.contentWindow.postMessage({ relay: 'annotate-counts', counts }, '*'); } catch {}
+    };
+    // Refresh badges in every html iframe (called whenever annotations change).
+    window.__relayBroadcastCounts = () => {
+      for (const f of document.querySelectorAll('iframe.viz')) postCountsTo(f);
+    };
+
+    window.addEventListener('message', (e) => {
+      const msg = e.data;
+      if (!msg || typeof msg !== 'object' || typeof msg.relay !== 'string') return;
+      const frame = frameOf(e.source);
       if (!frame) return;
+      if (msg.relay === 'annotate-ready') { postCountsTo(frame); return; }
+      if (msg.relay !== 'annotate-request') return;
+
       const blockId = frame.getAttribute('data-block-id') || null;
       const questionId = frame.getAttribute('data-question-id') || null;
-      Annotate.openExternal(
-        {
-          blockId,
-          questionId: questionId || null,
-          target: {
-            kind: 'html-element',
-            label: typeof msg.label === 'string' ? msg.label : 'Element',
-            detail: typeof msg.detail === 'string' ? msg.detail : undefined,
-          },
-        },
-        frame
-      );
+      const target = { kind: 'html-element', label: typeof msg.label === 'string' ? msg.label : 'Element' };
+      if (typeof msg.ref === 'string') target.ref = msg.ref;
+      if (typeof msg.detail === 'string') target.detail = msg.detail;
+
+      // Anchor the popover to the actual element: translate the iframe-local
+      // viewport rect the iframe sent into page coords. Fall back to the iframe.
+      let anchor = frame;
+      if (msg.rect && typeof msg.rect === 'object') {
+        const fr = frame.getBoundingClientRect();
+        const r = msg.rect;
+        const left = fr.left + (r.left || 0);
+        const top = fr.top + (r.top || 0);
+        const width = r.width || 0;
+        const height = r.height || 0;
+        const pageRect = { left, top, width, height, right: left + width, bottom: top + height };
+        anchor = { getBoundingClientRect: () => pageRect };
+      }
+      Annotate.openExternal({ blockId, questionId: questionId || null, target }, anchor);
     });
   }
 
@@ -709,6 +778,17 @@
       // the live draft — answers for now-removed question ids are ignored),
       // then reload to render the new spec. Guarded so it fires once.
       const body = await r.json().catch(() => null);
+      // Soft timeout: the board ran past its deadline so the agent was handed a
+      // result and stopped waiting — but the server is still up and the board
+      // stays fully usable. Surface a calm note (never disable Submit) so the
+      // user knows to prompt the agent after submitting.
+      if (body && body.softTimedOut && !submitted) {
+        handedBack = true;
+        showNotice(
+          'You’ve had this open a while, so the agent stopped waiting. Your changes save automatically — submit when you’re ready, then prompt the agent to pick them up.',
+          'info'
+        );
+      }
       if (body && typeof body.rev === 'number' && bootRev !== null && body.rev !== bootRev && !submitted && !reloading) {
         reloading = true;
         stopHeartbeat();
@@ -726,10 +806,16 @@
         location.reload();
       }
     } catch {
+      // Lost the live connection (the session ended, or the machine slept).
+      // Keep the board usable — do NOT disable Submit — and show a calm note
+      // rather than the old red "closed" banner. A submit attempt that can't
+      // reach the server falls back to the same guidance below.
       if (++misses >= 2 && !submitted) {
-        banner.textContent = 'This board is closed — the server has stopped. Answers up to your last edit were autosaved.';
-        banner.style.display = 'block';
-        submitBtn.disabled = true;
+        handedBack = true;
+        showNotice(
+          'Lost the live connection to your agent’s session — your latest edits were saved. You can still try Submit; if it doesn’t go through, prompt the agent to reopen this board.',
+          'warn'
+        );
         stopHeartbeat();
       }
     }

package/src/ui/blocks.css

@@ -74,6 +74,10 @@
   font-size: 0.85rem;
   line-height: 1.5;
 }
+/* GFM pipe tables inside markdown reuse .blk-table styling; the wrapper lets a
+   wide table scroll horizontally instead of overflowing the column. */
+.blk-markdown .md .md-tablewrap { overflow-x: auto; margin: 12px 0; }
+.blk-markdown .md .md-table { margin: 0; }
 
 /* ---------- code block ---------- */
 .blk-pre {
@@ -307,14 +311,28 @@
 .blk-tools .tool-pct { color: var(--muted); font-size: 0.72rem; min-width: 30px; text-align: center; }
 
 /* full-screen = fixed overlay (NOT native fullscreen: annotation pins/badges/
-   popover live on <body> and must stay visible above the expanded block) */
+   popover live on <body> and must stay visible above the expanded block).
+   Edge-to-edge (no modal gap); the toolbar pins to the top as a fixed bar so
+   the close button stays on screen while the content scrolls. */
 .blk-full {
-  position: fixed !important; inset: 12px; z-index: 49;
-  background: var(--card); border: 1px solid var(--border);
-  border-radius: 12px; box-shadow: var(--shadow-lift);
+  position: fixed !important; inset: 0; z-index: 49;
+  background: var(--card); border: 0; border-radius: 0; box-shadow: none;
   overflow: auto; max-height: none !important; margin: 0 !important;
-  padding: 48px 16px 16px;
+  padding: 44px 0 0;
 }
 body.blk-full-open { overflow: hidden; }
-.blk-chart.blk-full { height: calc(100vh - 24px) !important; width: auto !important; }
-.blk-htmlwrap.blk-full iframe.viz { height: calc(100vh - 90px) !important; width: 100%; }
+/* detach the toolbar from the scrolling content and fix it to the viewport top */
+.blk-full > .blk-tools {
+  position: fixed; top: 0; left: 0; right: 0; height: 44px;
+  margin: 0; padding: 0 12px;
+  background: var(--card); border-bottom: 1px solid var(--border);
+  z-index: 51;
+}
+.blk-chart.blk-full {
+  height: 100vh !important; width: auto !important;
+  padding: 44px 16px 16px;
+}
+.blk-htmlwrap.blk-full iframe.viz {
+  height: calc(100vh - 44px) !important; width: 100%;
+  margin: 0; border: 0; border-radius: 0;
+}

package/src/ui/blocks.js

@@ -103,6 +103,55 @@
       return out;
     }
 
+    // GFM pipe tables — a header row of "| a | b |" cells immediately followed
+    // by a separator row of dashes (with optional ":" alignment markers).
+    // Rendered as a real .blk-table so it matches the dedicated table block.
+    function splitRow(row) {
+      const trimmed = row.trim().replace(/^\|/, '').replace(/\|$/, '');
+      return trimmed.split(/(?<!\\)\|/).map((c) => c.replace(/\\\|/g, '|').trim());
+    }
+    function isSepRow(row) {
+      if (!row || row.indexOf('|') === -1) return false;
+      const cells = splitRow(row);
+      return cells.length > 0 && cells.every((c) => /^:?-{1,}:?$/.test(c));
+    }
+    function isTableStart(idx) {
+      const head = lines[idx];
+      return (
+        idx + 1 < lines.length &&
+        head.indexOf('|') !== -1 &&
+        !isSepRow(head) &&
+        isSepRow(lines[idx + 1])
+      );
+    }
+    function consumeTable() {
+      const headers = splitRow(lines[i]);
+      const aligns = splitRow(lines[i + 1]).map((c) => {
+        const left = c.startsWith(':');
+        const right = c.endsWith(':');
+        return left && right ? 'center' : right ? 'right' : left ? 'left' : '';
+      });
+      i += 2;
+      const body = [];
+      while (i < lines.length && !/^\s*$/.test(lines[i]) && lines[i].indexOf('|') !== -1 && !isSepRow(lines[i])) {
+        body.push(splitRow(lines[i]));
+        i++;
+      }
+      const ncols = headers.length;
+      const alignAttr = (ci) => (aligns[ci] ? ` style="text-align:${aligns[ci]}"` : '');
+      const cell = (tag, ci, text) => `<${tag}${alignAttr(ci)}>${mdInline(esc(text == null ? '' : text))}</${tag}>`;
+      let out = '<div class="md-tablewrap"><table class="blk-table md-table"><thead><tr>';
+      for (let c = 0; c < ncols; c++) out += cell('th', c, headers[c]);
+      out += '</tr></thead><tbody>';
+      for (const r of body) {
+        out += '<tr>';
+        for (let c = 0; c < ncols; c++) out += cell('td', c, r[c]);
+        out += '</tr>';
+      }
+      out += '</tbody></table></div>';
+      return out;
+    }
+
     while (i < lines.length) {
       const line = lines[i];
 
@@ -140,6 +189,9 @@
         continue;
       }
 
+      // GFM pipe table (header row + dash separator)
+      if (isTableStart(i)) { html += consumeTable(); continue; }
+
       // lists
       if (/^(\s*)([-*]|\d+\.)\s+/.test(line)) { html += consumeList(); continue; }
 
@@ -155,7 +207,8 @@
         !/^\s*---+\s*$/.test(lines[i]) &&
         !/^#{1,3}\s+/.test(lines[i]) &&
         !/^\s*>\s?/.test(lines[i]) &&
-        !/^(\s*)([-*]|\d+\.)\s+/.test(lines[i])
+        !/^(\s*)([-*]|\d+\.)\s+/.test(lines[i]) &&
+        !isTableStart(i)
       ) {
         buf.push(lines[i]);
         i++;