@khanglvm/relay 0.13.8 → 0.14.0

package/src/ui/app.js

@@ -3,6 +3,16 @@
 
   const boot = JSON.parse(document.getElementById('boot').textContent);
   const spec = boot.spec;
+  const access = boot.access || {
+    role: 'owner',
+    canShare: true,
+    canSubmit: true,
+    canEditAnswers: true,
+    canComment: true,
+    canEditComments: true,
+    canDeleteComments: true,
+  };
+  if (access.role) document.documentElement.dataset.accessRole = access.role;
   const QS = spec.questions || [];
   const app = document.getElementById('app');
   const banner = document.getElementById('banner');
@@ -10,6 +20,11 @@
   // compares /api/status.rev to this and reloads the board when it advances
   // (an agent ran `rly update`).
   const bootRev = typeof boot.rev === 'number' ? boot.rev : null;
+  let seenDraftRev = typeof boot.draftRev === 'number' ? boot.draftRev : 0;
+
+  function authHeaders(extra = {}) {
+    return access.token ? { ...extra, 'x-relay-share-token': access.token } : extra;
+  }
 
   // ---------- helpers ----------
   function el(tag, attrs = {}, ...children) {
@@ -453,10 +468,12 @@
     try {
       const r = await fetch('/api/draft', {
         method: 'POST',
-        headers: { 'content-type': 'application/json' },
+        headers: authHeaders({ 'content-type': 'application/json' }),
         body: JSON.stringify(payload()),
       });
       if (!r.ok) throw new Error('draft rejected');
+      const body = await r.json().catch(() => null);
+      if (body && typeof body.draftRev === 'number') seenDraftRev = body.draftRev;
       saveFailures = 0;
       if (seq === saveSeq && saveEl && !submitted && !persistenceLost) saveEl.textContent = 'draft saved ✓';
     } catch {
@@ -513,6 +530,12 @@
   if (Annotate) {
     Annotate.init({
       initial: state.annotations,
+      permissions: {
+        add: access.canComment !== false,
+        edit: access.canEditComments !== false,
+        delete: access.canDeleteComments !== false,
+        reply: access.canComment !== false,
+      },
       onChange: (list) => {
         state.annotations = list;
         scheduleSave();
@@ -1019,6 +1042,10 @@
       sessionStorage.removeItem('relay-updated');
       showToast('Board updated by the agent');
     }
+    if (sessionStorage.getItem('relay-draft-updated') === '1') {
+      sessionStorage.removeItem('relay-draft-updated');
+      showToast('Board refreshed with shared changes');
+    }
   } catch {
     // sessionStorage may be unavailable (privacy mode) — non-fatal
   }
@@ -1099,8 +1126,112 @@
   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' }, `relay · ${boot.boardId}`));
+  const submitbar = el('div', { class: 'submitbar' }, submitBtn, hint, saveEl);
+  app.append(submitbar);
+
+  function copyText(text, btn) {
+    const done = () => {
+      if (!btn) return;
+      const old = btn.textContent;
+      btn.textContent = 'Copied';
+      setTimeout(() => { btn.textContent = old; }, 1800);
+    };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done).catch(() => {});
+      return;
+    }
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.append(ta);
+    ta.select();
+    try { document.execCommand('copy'); done(); } catch {}
+    ta.remove();
+  }
+
+  function openSharePanel(host) {
+    const panel = el('div', { class: 'share-panel' },
+      el('div', { class: 'share-title' }, 'Share this board'),
+      el('div', { class: 'share-desc' }, 'Choose a permission. The link starts working only after you confirm.'),
+      el('button', { class: 'share-choice', type: 'button', 'data-role': 'collab' },
+        el('span', { class: 'share-choice-title' }, 'Collaborator'),
+        el('span', { class: 'share-choice-sub' }, 'Can edit answers, comment, and submit as owner.')
+      ),
+      el('button', { class: 'share-choice', type: 'button', 'data-role': 'review' },
+        el('span', { class: 'share-choice-title' }, 'Reviewer'),
+        el('span', { class: 'share-choice-sub' }, 'Can add comments only. No submit, answer edits, edit, or delete.')
+      ),
+      el('div', { class: 'share-result' })
+    );
+    const close = () => panel.remove();
+    const closeBtn = el('button', { class: 'share-close', type: 'button', 'aria-label': 'Close share panel' }, '×');
+    closeBtn.addEventListener('click', close);
+    panel.prepend(closeBtn);
+    const result = panel.querySelector('.share-result');
+    for (const btn of panel.querySelectorAll('.share-choice')) {
+      btn.addEventListener('click', async () => {
+        const role = btn.getAttribute('data-role');
+        const label = role === 'collab' ? 'collaborator' : 'reviewer';
+        if (!window.confirm(`Activate a ${label} link for same-Wi-Fi devices?`)) return;
+        btn.disabled = true;
+        result.textContent = 'Activating...';
+        try {
+          const res = await fetch('/api/share', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ role }),
+          });
+          const body = await res.json().catch(() => null);
+          if (!res.ok || !body || !body.url) throw new Error(body && body.error ? body.error : 'share failed');
+          const copy = el('button', { class: 'share-copy', type: 'button' }, 'Copy link');
+          copy.addEventListener('click', () => copyText(body.url, copy));
+          result.replaceChildren(
+            el('div', { class: 'share-ready' }, role === 'collab' ? 'Collaborator link active' : 'Reviewer link active'),
+            el('a', { class: 'share-url', href: body.url, target: '_blank', rel: 'noreferrer' }, body.url),
+            copy
+          );
+        } catch (err) {
+          result.textContent = err && err.message ? err.message : 'Could not activate sharing.';
+        } finally {
+          btn.disabled = false;
+        }
+      });
+    }
+    host.append(panel);
+  }
+
+  function buildFooter() {
+    const footer = el('footer', { class: 'qb-footer' }, el('span', {}, `relay · ${boot.boardId}`));
+    if (access.canShare) {
+      const wrap = el('span', { class: 'share-wrap' });
+      const shareBtn = el('button', { class: 'share-btn', type: 'button' }, 'Share');
+      shareBtn.addEventListener('click', () => {
+        const existing = wrap.querySelector('.share-panel');
+        if (existing) existing.remove();
+        else openSharePanel(wrap);
+      });
+      wrap.append(shareBtn);
+      footer.append(wrap);
+    } else if (access.role === 'review') {
+      footer.append(el('span', { class: 'share-mode' }, 'reviewer · comments only'));
+    } else if (access.role === 'collab') {
+      footer.append(el('span', { class: 'share-mode' }, 'collaborator'));
+    }
+    return footer;
+  }
+
+  if (!access.canSubmit) {
+    submitbar.style.display = 'none';
+    app.append(el('div', { class: 'access-note' }, 'Reviewer mode: comments are saved live. Answers and submission are disabled.'));
+  }
+  if (!access.canEditAnswers) {
+    document.documentElement.classList.add('relay-review');
+    for (const node of app.querySelectorAll('.card input, .card textarea, .card button, .card select')) {
+      node.disabled = true;
+    }
+  }
+  app.append(buildFooter());
 
   // ---------- validation & submit ----------
   function validate() {
@@ -1154,7 +1285,7 @@
       try {
         res = await fetch('/api/submit', {
           method: 'POST',
-          headers: { 'content-type': 'application/json' },
+          headers: authHeaders({ 'content-type': 'application/json' }),
           body: JSON.stringify(payload()),
         });
       } catch (netErr) {
@@ -1368,6 +1499,23 @@
           // sessionStorage may be unavailable — the reload still applies the update
         }
         location.reload();
+        return;
+      }
+      if (body && typeof body.draftRev === 'number' && body.draftRev > seenDraftRev && !submitted && !reloading) {
+        if (userIsComposing()) {
+          showNotice('Another viewer updated this board — it’ll refresh as soon as you finish typing.', 'info');
+          return;
+        }
+        reloading = true;
+        stopHeartbeat();
+        clearTimeout(saveTimer);
+        clearLocalDraft();
+        try {
+          sessionStorage.setItem('relay-draft-updated', '1');
+        } catch {
+          // sessionStorage may be unavailable — the reload still applies the update
+        }
+        location.reload();
       }
     } catch {
       // Lost the live connection (the session ended, or the machine slept). Two

package/src/ui/blocks.css

@@ -260,6 +260,68 @@
 }
 .diff-file-chip:hover { color: var(--accent); border-color: var(--accent); }
 
+/* diff review: cherry-pick/apply hunk choices on top of the diff renderer */
+.diff-review-head {
+  align-items: flex-start;
+}
+.diff-review-topactions {
+  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
+}
+.diff-review-status {
+  flex: none; border: 1px solid rgba(185, 145, 63, 0.34);
+  background: rgba(185, 145, 63, 0.12); color: var(--warn);
+  border-radius: 999px; padding: 3px 8px; font-size: 0.72rem; font-weight: 760;
+}
+.diff-review-status.is-complete {
+  border-color: rgba(77, 138, 102, 0.42);
+  background: rgba(77, 138, 102, 0.14); color: var(--ok);
+}
+.diff-review-btn {
+  flex: none; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700;
+  color: var(--fg-2); background: var(--card);
+  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
+  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
+}
+.diff-review-btn:hover {
+  color: var(--accent); border-color: var(--accent);
+}
+.diff-review-choice.sel {
+  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
+}
+.diff-review-list {
+  border: 1px solid var(--border); border-radius: 0 0 10px 10px;
+  overflow: hidden; background: var(--bg-sunken);
+}
+.diff-review-hunk + .diff-review-hunk {
+  border-top: 1px solid var(--border);
+}
+.diff-review-hunkbar {
+  display: flex; justify-content: space-between; align-items: center; gap: 10px;
+  padding: 6px 8px 6px 12px; background: var(--card); border-bottom: 1px solid var(--border);
+}
+.diff-review-hunkmeta {
+  min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.diff-review-file {
+  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fg-2); font-size: 0.76rem; font-weight: 760;
+}
+.diff-review-header {
+  color: var(--muted); font-size: 0.72rem;
+}
+.diff-review-actions {
+  flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
+}
+.diff-review-hunk .blk-difftable {
+  min-width: 760px;
+}
+@media (max-width: 720px) {
+  .diff-review-head, .diff-review-hunkbar { flex-direction: column; align-items: flex-start; }
+  .diff-review-topactions, .diff-review-actions { justify-content: flex-start; }
+  .diff-review-file { max-width: 100%; }
+}
+
 /* ---------- git conflict resolver ---------- */
 .gitconf {
   border: 1px solid var(--border); border-radius: 10px; overflow: hidden;

package/src/ui/blocks.js

@@ -582,8 +582,159 @@
   // Per-file header lines are redundant once we render a filename header bar.
   const DIFF_NOISE = /^(diff --git |index |--- |\+\+\+ )/;
 
+  function buildDiffReviewHunks(files, block) {
+    const hunks = [];
+    files.forEach((f) => {
+      const name = f.name || (files.length === 1 ? (block.filename || '') : '') || 'file';
+      let rows = parseDiff(f.text);
+      if (name) rows = rows.filter((r) => !(r.kind === 'meta' && DIFF_NOISE.test(r.text)));
+      let current = null;
+      const push = () => {
+        if (!current) return;
+        const hasChange = current.rows.some((r) => r.kind === 'add' || r.kind === 'del');
+        if (hasChange) hunks.push(current);
+        current = null;
+      };
+      rows.forEach((r) => {
+        if (r.kind === 'hunk') {
+          push();
+          current = { id: 'h' + (hunks.length + 1), file: name, header: r.text, rows: [r] };
+        } else if (current) {
+          current.rows.push(r);
+        } else if (r.kind === 'add' || r.kind === 'del' || r.kind === 'ctx') {
+          current = { id: 'h' + (hunks.length + 1), file: name, header: 'Change', rows: [r] };
+        }
+      });
+      push();
+    });
+    return hunks;
+  }
+
+  function renderDiffReview(block, ctx, blockId, files) {
+    const hunks = buildDiffReviewHunks(files, block);
+    let view = block.view === 'split' ? 'split' : 'unified';
+    const prior = ctx && ctx.edits && ctx.edits[blockId] && typeof ctx.edits[blockId] === 'object'
+      ? ctx.edits[blockId]
+      : {};
+    const choices = prior.hunks && typeof prior.hunks === 'object' ? { ...prior.hunks } : {};
+    const buttonsByHunk = new Map();
+    const wrap = el('div', { class: 'blk-codewrap blk-diffwrap diff-review' });
+    const status = el('span', { class: 'diff-review-status' }, '');
+    const list = el('div', { class: 'diff-review-list' });
+
+    const emit = () => {
+      const picked = {};
+      hunks.forEach((h) => {
+        const r = choices[h.id];
+        if (!r || !['apply', 'skip', 'hold'].includes(r.choice)) return;
+        picked[h.id] = { choice: r.choice, file: h.file, header: h.header };
+      });
+      const touched = Object.keys(picked).length;
+      const payload = touched
+        ? {
+            type: 'diff-review',
+            reviewKind: block.reviewKind || '',
+            commit: block.commit || '',
+            title: block.title || block.filename || '',
+            resolved: touched === hunks.length,
+            hunks: picked,
+          }
+        : null;
+      if (ctx && typeof ctx.onBlockEdit === 'function') ctx.onBlockEdit(blockId, payload);
+      wrap.dispatchEvent(new CustomEvent('relay:block-edit', {
+        bubbles: true,
+        detail: { blockId, value: payload },
+      }));
+      status.textContent = `${touched}/${hunks.length} reviewed`;
+      status.classList.toggle('is-complete', hunks.length > 0 && touched === hunks.length);
+      for (const h of hunks) {
+        const set = buttonsByHunk.get(h.id) || [];
+        const chosen = choices[h.id] && choices[h.id].choice;
+        set.forEach((b) => b.el.classList.toggle('sel', b.choice === chosen));
+      }
+    };
+
+    const setChoice = (h, choice) => {
+      choices[h.id] = { choice, file: h.file, header: h.header };
+      emit();
+    };
+
+    const setAll = (choice) => {
+      hunks.forEach((h) => {
+        choices[h.id] = { choice, file: h.file, header: h.header };
+      });
+      emit();
+    };
+
+    const makeReviewButton = (label, onClick, extraClass = '') => {
+      const b = el('button', { type: 'button', class: 'diff-review-btn' + (extraClass ? ' ' + extraClass : '') }, label);
+      b.addEventListener('mousedown', (e) => e.stopPropagation());
+      b.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      });
+      return b;
+    };
+
+    const repaint = () => {
+      list.replaceChildren();
+      hunks.forEach((h) => {
+        const actionbar = el('div', { class: 'diff-review-hunkbar' },
+          el('div', { class: 'diff-review-hunkmeta' },
+            el('span', { class: 'diff-review-file' }, h.file),
+            el('span', { class: 'diff-review-header' }, h.header)
+          )
+        );
+        const rowButtons = [
+          { choice: 'apply', label: 'Apply hunk' },
+          { choice: 'skip', label: 'Skip hunk' },
+          { choice: 'hold', label: 'Hold' },
+        ].map((item) => ({
+          choice: item.choice,
+          el: makeReviewButton(item.label, () => setChoice(h, item.choice), 'diff-review-choice'),
+        }));
+        buttonsByHunk.set(h.id, rowButtons);
+        actionbar.append(el('div', { class: 'diff-review-actions' }, rowButtons.map((b) => b.el)));
+        list.append(el('section', { class: 'diff-review-hunk' },
+          actionbar,
+          view === 'split' ? buildSplitDiff(h.rows, block.lang) : buildUnifiedDiff(h.rows, block.lang)
+        ));
+      });
+      emit();
+    };
+
+    const toggle = makeReviewButton('', () => {
+      view = view === 'split' ? 'unified' : 'split';
+      wrap.classList.toggle('is-split', view === 'split');
+      toggle.textContent = view === 'split' ? 'Unified view' : 'Split view';
+      repaint();
+    }, 'blk-difftoggle');
+    toggle.title = 'Toggle side-by-side view';
+    toggle.textContent = view === 'split' ? 'Unified view' : 'Split view';
+
+    const title = block.title || block.filename || (files.length > 1 ? `${files.length} files changed` : 'Diff review');
+    wrap.append(el('div', { class: 'blk-codehead diff-review-head' },
+      el('span', { class: 'blk-codename' }, title),
+      el('div', { class: 'diff-review-topactions' },
+        status,
+        makeReviewButton('Apply all', () => setAll('apply')),
+        makeReviewButton('Skip all', () => setAll('skip')),
+        makeReviewButton('Hold all', () => setAll('hold')),
+        toggle
+      )
+    ));
+    wrap.classList.toggle('is-split', view === 'split');
+    wrap.append(list);
+    repaint();
+    ctx && ctx.annotate && ctx.annotate.enableTextSelection(list, { blockId, questionId: ctx.questionId });
+    attachViewer(wrap, { zoomEl: null, label: 'diff review', comment: wholeBlockComment(ctx, blockId, 'diff review') });
+    return wrap;
+  }
+
   function renderDiff(block, ctx, blockId) {
     const files = splitDiffFiles(block.diff);
+    if (block.review === true) return renderDiffReview(block, ctx, blockId, files);
     const named = files.filter((f) => f.name);
     const multi = named.length > 1;
     let view = block.view === 'split' ? 'split' : 'unified';

package/src/ui/style.css

@@ -341,7 +341,58 @@ textarea { min-height: 90px; resize: vertical; }
 .done h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 8px; }
 .done p { color: var(--muted); margin: 0; }
 
-.qb-footer { color: var(--muted); font-size: 0.75rem; text-align: center; margin-top: 28px; }
+.qb-footer {
+  color: var(--muted); font-size: 0.75rem; text-align: center; margin-top: 28px;
+  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
+}
+.share-wrap { position: relative; display: inline-flex; }
+.share-btn, .share-copy, .share-choice, .share-close {
+  font: inherit;
+}
+.share-btn {
+  border: 1px solid var(--border-strong); border-radius: 999px;
+  background: var(--card); color: var(--fg-2);
+  padding: 5px 12px; cursor: pointer;
+}
+.share-btn:hover { border-color: var(--accent); color: var(--accent); }
+.share-panel {
+  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
+  width: min(360px, calc(100vw - 28px));
+  background: var(--card); color: var(--fg);
+  border: 1px solid var(--border-strong); border-radius: 12px;
+  box-shadow: var(--shadow-lift);
+  padding: 16px; text-align: left; z-index: 45;
+}
+.share-close {
+  position: absolute; top: 8px; right: 8px;
+  border: 0; background: transparent; color: var(--muted);
+  cursor: pointer; font-size: 1.1rem; line-height: 1;
+}
+.share-title { font-weight: 650; font-size: 0.95rem; margin-right: 24px; }
+.share-desc { color: var(--muted); font-size: 0.78rem; margin: 4px 20px 12px 0; }
+.share-choice {
+  width: 100%; display: flex; flex-direction: column; gap: 2px;
+  border: 1px solid var(--border); border-radius: 10px;
+  background: var(--bg-sunken); color: var(--fg);
+  padding: 10px 12px; margin-top: 8px; cursor: pointer; text-align: left;
+}
+.share-choice:hover { border-color: var(--accent); }
+.share-choice-title { font-weight: 650; }
+.share-choice-sub { color: var(--muted); font-size: 0.76rem; }
+.share-result { margin-top: 12px; color: var(--fg-2); font-size: 0.78rem; overflow-wrap: anywhere; }
+.share-ready { color: var(--ok); font-weight: 650; margin-bottom: 4px; }
+.share-url { color: var(--accent); display: block; margin-bottom: 8px; }
+.share-copy {
+  border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg);
+  padding: 7px 12px; cursor: pointer; font-weight: 650;
+}
+.share-mode { color: var(--fg-2); }
+.access-note {
+  color: var(--fg-2); background: var(--accent-soft);
+  border-radius: 10px; padding: 10px 14px; font-size: 0.86rem;
+}
+.relay-review .ann-del,
+.relay-review .ann-edit { display: none !important; }
 
 @media (max-width: 480px) {
   .wrap { padding: 18px 12px 18px; }