@khanglvm/relay 0.14.0 → 0.14.1

package/package.json

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

@@ -53,15 +53,19 @@
   // 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
+  // Calm, persistent status notes (the #banner stack). 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.
+  // Each message is shown at most once 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');
+    if (banner.dataset.ready !== '1') {
+      banner.replaceChildren();
+      banner.dataset.ready = '1';
+    }
+    banner.className = 'banner-stack';
+    banner.append(el('div', { class: 'banner-item ' + (tone === 'warn' ? 'warn' : 'info') }, message));
     banner.style.display = 'block';
   }
 
@@ -1036,6 +1040,24 @@
   fsUp.addEventListener('click', () => setFontScale(fontScale + FS_STEP));
   const fsCtrl = el('div', { class: 'fs-ctrl' }, fsDown, fsUp);
 
+  function buildShareControl() {
+    if (!access.canShare) return null;
+    const wrap = el('span', { class: 'share-wrap' });
+    const shareBtn = el('button', { class: 'share-btn icon-btn', type: 'button', title: 'Share board', 'aria-label': 'Share board' });
+    shareBtn.innerHTML =
+      '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">' +
+      '<path d="M6.5 9.5 9.5 11.2M9.5 4.8 6.5 6.5"/>' +
+      '<circle cx="4.5" cy="8" r="2"/><circle cx="11.5" cy="4" r="2"/><circle cx="11.5" cy="12" r="2"/>' +
+      '</svg>';
+    shareBtn.addEventListener('click', () => {
+      const existing = wrap.querySelector('.share-panel');
+      if (existing) existing.remove();
+      else openSharePanel(wrap);
+    });
+    wrap.append(shareBtn);
+    return wrap;
+  }
+
   // Just reloaded after a live `rly update`? Flag set before reload below.
   try {
     if (sessionStorage.getItem('relay-updated') === '1') {
@@ -1051,7 +1073,7 @@
   }
 
   const titleEl = el('h1', {}, spec.title);
-  app.append(el('header', { class: 'qb-header' }, titleEl, el('div', { class: 'qb-controls' }, fsCtrl, themeBtn)));
+  app.append(el('header', { class: 'qb-header' }, titleEl, el('div', { class: 'qb-controls' }, fsCtrl, buildShareControl(), 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) {
@@ -1153,7 +1175,7 @@
   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('div', { class: 'share-desc' }, 'Choose a permission. The link starts working immediately.'),
       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.')
@@ -1172,8 +1194,6 @@
     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 {
@@ -1203,27 +1223,14 @@
 
   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.'));
+    showNotice('Reviewer mode: comments are saved live. Answers and submission are disabled.', 'info');
+  } else if (access.role === 'collab') {
+    showNotice('Editor mode: answers, comments, and submit are enabled for this shared board.', 'info');
   }
   if (!access.canEditAnswers) {
     document.documentElement.classList.add('relay-review');

package/src/ui/style.css

@@ -96,14 +96,21 @@ h1 {
 .intro.blk-markdown .md { color: var(--fg-2); }
 .intro.blk-markdown .md > :first-child { margin-top: 0; }
 .intro.blk-markdown .md > :last-child { margin-bottom: 0; }
-.theme-btn {
+.theme-btn,
+.icon-btn {
   background: transparent; color: var(--fg-2);
   border: 1px solid var(--border-strong); border-radius: 999px;
-  padding: 6px 14px; cursor: pointer; font-size: 0.8rem; flex: none;
+  cursor: pointer; font-size: 0.8rem; flex: none;
   font-family: var(--sans);
   transition: border-color 150ms var(--ease), color 150ms var(--ease);
 }
-.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
+.theme-btn { padding: 6px 14px; }
+.icon-btn {
+  width: 32px; height: 32px; padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.theme-btn:hover,
+.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
 /* header controls: font-size knob + theme toggle, grouped at the right */
 .qb-controls { display: flex; align-items: center; gap: 8px; flex: none; }
 .fs-ctrl { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
@@ -317,10 +324,22 @@ textarea { min-height: 90px; resize: vertical; }
   z-index: 10; display: none;
   border-bottom: 1px solid transparent;
 }
+.banner-stack {
+  position: sticky; top: 0;
+  display: flex; flex-direction: column; gap: 0;
+  z-index: 10;
+}
+.banner-item {
+  text-align: center; padding: 9px 16px; font-size: 0.9rem;
+  line-height: 1.45;
+  border-bottom: 1px solid transparent;
+}
 /* Calm status notes (timeout hand-back / lost connection). Never the red error
    state — the board stays usable, so these only inform. */
-.banner.info { background: var(--accent-soft); color: var(--accent); }
-.banner.warn { background: var(--bg-sunken); color: var(--fg-2); border-bottom-color: var(--border-strong); }
+.banner.info,
+.banner-item.info { background: var(--accent-soft); color: var(--accent); }
+.banner.warn,
+.banner-item.warn { background: var(--bg-sunken); color: var(--fg-2); border-bottom-color: var(--border-strong); }
 
 /* Live-update toast: flagged after a `rly update` reload (see app.js).
    Fixed top-center, accent-soft bg, accent text; JS auto-removes it. */
@@ -349,14 +368,9 @@ textarea { min-height: 90px; resize: vertical; }
 .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-btn { background: transparent; }
 .share-panel {
-  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
+  position: absolute; right: 0; top: calc(100% + 10px);
   width: min(360px, calc(100vw - 28px));
   background: var(--card); color: var(--fg);
   border: 1px solid var(--border-strong); border-radius: 12px;
@@ -386,20 +400,19 @@ textarea { min-height: 90px; resize: vertical; }
   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; }
+  .qb-header { align-items: flex-start; }
+  .qb-controls { gap: 6px; }
   .card { padding: 16px; border-radius: 10px; }
   h1 { font-size: 1.35rem; }
   .seg button { padding: 10px 18px; }
   .scale button { width: 40px; height: 40px; }
+  .theme-btn { padding: 6px 10px; }
+  .share-panel { right: -46px; }
 }
 
 /* Persistence-lost notice: when the board can no longer save the user's input