@khanglvm/relay 0.14.0 → 0.14.2

package/README.md

@@ -80,10 +80,11 @@ unchanged; pick whichever surface fits.
 | "Type *done* when finished reviewing" | A Submit button; answers, notes, and inline comments returned as JSON |
 | Feedback = another wall of text | Click any chart point, diagram node, table cell, or sentence to comment — the agent replies and the thread grows on the board |
 
-Everything autosaves in real time (drafts survive timeouts), multiple boards
-run at once, and the package has **zero npm runtime dependencies** — plain
-Node ≥ 18. Browser-side Chart.js, Mermaid, and Viz.js assets are vendored in
-the package and lazy-loaded offline when a board actually needs them.
+Everything autosaves in real time, detached board links keep serving after
+agent timeouts, multiple boards run at once, and the package has **zero npm
+runtime dependencies** — plain Node ≥ 18. Browser-side Chart.js, Mermaid, and
+Viz.js assets are vendored in the package and lazy-loaded offline when a board
+actually needs them.
 
 ## Learn more
 
@@ -171,9 +172,12 @@ npm test     # smoke tests with no external services (spawns real servers, fake-
   embedded in the payload.
 - **`pdf` block** — render local `.pdf` files or PDF URLs inline. Local PDFs
   stream from the board server and are never embedded in the page payload.
-- **Durable drafts / rescue** — every autosave mirrors to `localStorage`; a
-  board whose connection drops blocks further input instead of losing it, and
-  `rly rescue <id>` re-serves on the same port so an open tab reconnects.
+- **Durable boards / rescue** — detached boards keep serving after timeout
+  until Submit or `rly stop`; every autosave mirrors to `localStorage`; a board
+  whose connection drops blocks further input instead of losing it, and
+  `rly rescue <id>` re-serves on the same port so an open tab reconnects. Active
+  same-Wi-Fi share links stay tied to the board and survive a same-port re-serve
+  until revoked.
 - Still **zero npm runtime dependencies**, offline, and cross-platform. Vendored
   browser libraries are loaded only for boards that need them.
 
@@ -201,8 +205,8 @@ npm test     # smoke tests with no external services (spawns real servers, fake-
 - **Markdown blocks render GFM tables**; element comments moved to an
   Outline-style right sidebar with inline highlights on commented text.
 - **Seamless timeouts** — a detached board that runs past its deadline keeps
-  serving so you can still submit (it lands as `submitted`); the page shows a
-  calm note instead of disconnecting.
+  serving until Submit or explicit stop, so you can still submit (it lands as
+  `submitted`); the page shows a calm note instead of disconnecting.
 - **`rly upgrade`** — install the latest CLI and refresh the skill in one step.
 - Per-question notes are multi-line textboxes.
 

package/docs/AGENT.md

@@ -75,8 +75,7 @@ results), so partial input is never lost.
 
 Browser boards are local-owner only by default. A same-Wi-Fi phone/tablet/other
 laptop gets a locked page until sharing is explicitly activated. The owner can
-click **Share** at the bottom of the board, or you can manage the same links for
-the user:
+click the topbar **Share** icon, or you can manage the same links for the user:
 
 ```sh
 rly share b-xxxxx                         # list active share roles
@@ -91,7 +90,8 @@ owner. Reviewers cannot change answers, submit, edit comments, or delete
 comments; their autosaves merge new comments into the existing draft.
 Collaborators can edit answers, comment, open allowed local file links, and
 submit. Shared viewers refresh from the live draft when another viewer saves,
-deferred while someone is typing/commenting.
+deferred while someone is typing/commenting. Active share links keep the same
+token across a same-port `rly reopen`/`rly rescue` until revoked.
 
 ## Inline mode — relay as an MCP App (Claude & Codex apps)
 
@@ -672,12 +672,13 @@ raising `--timeout`.
 For a **detached** board, the `timeout` deadline is *soft*: it hands you a
 `timeout` result (with the autosaved draft) so you regain control, but the
 server stays up and the board stays fully usable — the user can keep
-commenting and still hit Submit. The page tells them you stopped waiting and
-to prompt you afterward. So if you got a `timeout` and the user might still be
-working: re-check later with `rly result <id>` (its status flips to
-`submitted` once they finish), or pass `--on-result` so a late submit
-push-wakes you. A blocking `rly ask` (no `--detach`) still ends hard on
-timeout, since there's no separate waiter to hand back to.
+commenting and still hit Submit. It stays on the same port until Submit or an
+explicit `rly stop`, so don't reopen just because your wait timed out. The page
+tells them you stopped waiting and to prompt you afterward. So if you got a
+`timeout` and the user might still be working: re-check later with `rly result
+<id>` (its status flips to `submitted` once they finish), or pass `--on-result`
+so a late submit push-wakes you. A blocking `rly ask` (no `--detach`) still ends
+hard on timeout, since there's no separate waiter to hand back to.
 
 ## Push-wake — get notified instead of polling
 
@@ -745,7 +746,9 @@ rly rm <id> | --all      # delete saved board(s)
 ```
 
 Multiple boards can run at once (each gets its own port on 127.0.0.1).
-Storage lives in `~/.relay` (override with `RLY_HOME`).
+Detached boards are durable: they keep serving past timeout, `reopen`/`rescue`
+prefer the last port, and active same-Wi-Fi share links keep the same token until
+revoked. Storage lives in `~/.relay` (override with `RLY_HOME`).
 
 ## Live board mutation — `rly update`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "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/skills/relay/SKILL.md

@@ -135,6 +135,10 @@ rly wait b-xxxxx --timeout 550       # blocks until submit, prints result JSON
 rly result b-xxxxx                   # non-blocking peek (includes live draft)
 ```
 
+Detached boards are durable: their own timeout hands the agent a `timeout`
+result but keeps the same URL/port serving until Submit or `rly stop`. Do not
+create a new board just because a wait timed out.
+
 For long waits prefer presence-aware waiting over a huge --timeout:
 
 ```sh
@@ -178,8 +182,8 @@ answers and any annotations written so far.
 
 Browser boards are local-owner only by default. A phone/tablet/other laptop on
 the same Wi-Fi gets a locked page until sharing is explicitly activated. The
-owner can click **Share** at the bottom of the board, or an agent can manage the
-same links with `rly share`:
+owner can click the topbar **Share** icon, or an agent can manage the same links
+with `rly share`:
 
 ```sh
 rly share b-xxxxx                         # list active share roles
@@ -195,6 +199,8 @@ new comments into the existing draft. Use `collab` only when the user explicitly
 wants that device to act as the owner: collaborators can edit answers, comment,
 open allowed local file links, and submit. Shared viewers refresh from the live
 draft when another viewer saves, deferred while someone is typing/commenting.
+Active share links are durable too: they keep the same token across a same-port
+`rly reopen`/`rly rescue` until `rly share --revoke` disables them.
 
 ## Minimal spec
 
@@ -534,7 +540,8 @@ one yesno "Does this match your mental model?" + a textarea for notes.
 answers prefilled) · `rly reopen <id> --replies file.json` (add agent replies) ·
 `rly rescue <id>` (re-serve a dropped board on its ORIGINAL port) ·
 `rly list` / `rly open` / `rly stop <id>` · `rly rm <id>`.
-Multiple boards can run concurrently.
+Multiple boards can run concurrently. Detached boards keep serving past timeout;
+use `rly stop` when you actually want to close one.
 
 ### Continue a board — reconnect, NEVER recreate it
 

package/src/cli.js

@@ -1084,6 +1084,9 @@ the user should view — put it in relay instead of printing it.**
   if it is still open and the user may continue, run \`rly wait\` again. Do not
   use \`--on-result\` as the primary Codex return path; normal Codex CLI sessions
   do not expose a portable inbound API that wakes the current agent turn.
+  Detached boards are durable: a board timeout hands the agent a \`timeout\`
+  result but keeps the same URL/port serving until Submit or \`rly stop\`. Do
+  not create a new board just because a wait timed out.
 - **A plan, structure, architecture, data, or prototype** → a relay board with
   diagram/chart/table/code/image/html blocks — never ASCII diagrams or walls of prose.
 - **"Show me the diff / git diff / these changes"** → \`rly diff\` (runs git diff →
@@ -1098,7 +1101,9 @@ the user should view — put it in relay instead of printing it.**
 - Same-Wi-Fi sharing is locked by default. When the user wants another device to
   review or co-fill a running board, manage explicit links with \`rly share <id>\`:
   \`--role review\` creates a comments-only reviewer link, \`--role collab\` creates
-  an edit/comment/submit link, and \`--revoke\` disables active links.
+  an edit/comment/submit link, and \`--revoke\` disables active links. Active
+  share links are durable across same-port \`rly reopen\`/\`rly rescue\` until
+  revoked.
 - **There's a purpose-built component for most content — use the MOST SPECIFIC one,
   never plain prose when a block fits.** Blocks: \`table\` (sortable/filterable/CSV,
   load from .csv/.json), \`chart\`, \`kpi\` (stat cards), \`mermaid\`/\`graphviz\`/\`plantuml\`,
@@ -1568,8 +1573,8 @@ async function cmdServeInternal(args) {
     open: args.open !== false,
     timeoutSec: args.timeout !== undefined ? Math.max(0, Number.parseInt(args.timeout, 10) || 0) : 1800,
     quiet: true,
-    // Detached board: timeout hands back to the agent but keeps serving so the
-    // user can keep commenting and still submit (seamless past the deadline).
+    // Detached board: timeout hands back to the agent but keeps the same
+    // URL/port serving until Submit or explicit stop.
     keepAliveOnTimeout: true,
   });
   await done;
@@ -1609,6 +1614,7 @@ USAGE
   rly share <id> --role collab        activate a collaborator link (edit/comment/submit)
   rly share <id> --role review --revoke
                                       revoke one share role; use --revoke --all to disable all roles
+                                      active links survive same-port reopen/rescue until revoked
   rly list [--json]                   running boards
   rly open [id]                       re-open the browser tab of a running board
   rly reopen <id> [--replies f.json]  serve a saved board again, prefilled with saved answers
@@ -1643,7 +1649,8 @@ COMMON FLAGS
 
 EXIT CODES   0 submitted/acknowledged · 2 timeout · 3 cancelled · 4 usage · 5 not found
 
-NOTES        answers & annotations autosave in real time (drafts survive timeout/cancel);
+NOTES        detached boards keep serving after timeout until Submit or stop;
+             answers & annotations autosave in real time (drafts survive timeout/cancel);
              submitting auto-closes the tab and unblocks the CLI.
 
 AI AGENTS    run \`rly agent\` for the complete machine-oriented guide.

package/src/server.js

@@ -698,11 +698,15 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
   // Mutation token: only `rly update` (which reads the running-file record)
   // can authenticate to POST /api/update. Never embedded in the page/boot.
   const token = crypto.randomBytes(16).toString('hex');
+  const savedShares = record.share && typeof record.share === 'object' ? record.share : {};
   const shareTokens = {
-    collab: crypto.randomBytes(16).toString('hex'),
-    review: crypto.randomBytes(16).toString('hex'),
+    collab: typeof savedShares.collab?.token === 'string' ? savedShares.collab.token : crypto.randomBytes(16).toString('hex'),
+    review: typeof savedShares.review?.token === 'string' ? savedShares.review.token : crypto.randomBytes(16).toString('hex'),
+  };
+  const activeShares = {
+    collab: savedShares.collab?.active === true,
+    review: savedShares.review?.active === true,
   };
-  const activeShares = { collab: false, review: false };
   let rev = 1;
   let draftRev = Number.isFinite(record.draftRev) ? record.draftRev : 0;
   let status = 'open';
@@ -766,6 +770,14 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
     };
   };
   const shareUrlFor = (role) => advertisedHost ? `http://${advertisedHost}:${actualPort}/?share=${role}&token=${shareTokens[role]}` : null;
+  const persistShareState = () => {
+    record.share = {
+      collab: { active: activeShares.collab === true, token: shareTokens.collab },
+      review: { active: activeShares.review === true, token: shareTokens.review },
+      updatedAt: new Date().toISOString(),
+    };
+    saveBoard(record);
+  };
   let resolveDone;
   const done = new Promise((r) => {
     resolveDone = r;
@@ -970,6 +982,7 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
         const role = body.role === 'review' ? 'review' : body.role === 'collab' ? 'collab' : null;
         if (!role) return sendJson(res, 400, { error: 'role must be "collab" or "review"' });
         activeShares[role] = true;
+        persistShareState();
         sendJson(res, 200, { ok: true, role, url: shareUrlFor(role) });
       } else if (req.method === 'DELETE' && pathname === '/api/share') {
         if (accessFor(req, reqUrl).role !== 'owner') return sendJson(res, 403, { error: 'only the board owner can manage sharing' });
@@ -982,6 +995,7 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
         } else {
           activeShares[role] = false;
         }
+        persistShareState();
         sendJson(res, 200, { ok: true, role, active: false });
       } else {
         sendJson(res, 404, { error: 'not found' });
@@ -1040,15 +1054,13 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
   });
 
   let timer = null;
-  let idleTimer = null;
   // The detached server's timeout is SOFT (keepAliveOnTimeout): at the deadline
   // we hand a `timeout` result back to the waiting agent (so `rly wait` returns
   // with the autosaved draft) but keep the server listening, so the user can
   // keep working and still submit. A late submit overwrites the result with
   // `submitted` and re-fires the push-wake; the board only truly closes on
-  // submit, an explicit stop, or once the user has clearly left (idle
-  // watchdog). A BLOCKING `rly ask` has no separate waiter to hand back to, so
-  // its timeout stays hard (close + resolve, exit 2).
+  // submit or an explicit stop. A BLOCKING `rly ask` has no separate waiter to
+  // hand back to, so its timeout stays hard (close + resolve, exit 2).
   if (timeoutSec > 0) {
     timer = setTimeout(keepAliveOnTimeout ? softTimeout : () => finish({ status: 'timeout' }), timeoutSec * 1000);
   }
@@ -1097,7 +1109,6 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
   function closeServer(result) {
     removeRunning(record.id);
     if (timer) clearTimeout(timer);
-    if (idleTimer) clearInterval(idleTimer);
     process.removeListener('SIGINT', onSignal);
     process.removeListener('SIGTERM', onSignal);
     setTimeout(() => {
@@ -1131,30 +1142,6 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
     softTimedOut = true;
     const result = persistResult({ status: 'timeout' });
     runOnResult(record.onResult, result, { quiet });
-    startIdleWatchdog();
-  }
-
-  // After a soft timeout, close the board for real once the user has clearly
-  // left (no presence ping for IDLE_CLOSE_MS) or a hard absolute cap is hit, so
-  // an abandoned board doesn't keep a server alive forever. Re-persists the
-  // latest draft as the final `timeout` result; no double push-wake.
-  function startIdleWatchdog() {
-    const IDLE_CLOSE_MS = 15 * 60 * 1000;
-    const HARD_CAP_MS = 6 * 60 * 60 * 1000;
-    const softAt = Date.now();
-    idleTimer = setInterval(() => {
-      if (finished) {
-        clearInterval(idleTimer);
-        return;
-      }
-      const lastSeen = presence ? presence.atMs : softAt;
-      if (Date.now() - lastSeen > IDLE_CLOSE_MS || Date.now() - softAt > HARD_CAP_MS) {
-        finished = true;
-        clearInterval(idleTimer);
-        closeServer(persistResult({ status: 'timeout' }));
-      }
-    }, 60 * 1000);
-    idleTimer.unref?.();
   }
 
   if (open) openUrl(url);

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