@khanglvm/relay 0.6.0 → 0.7.0

package/docs/AGENT.md

@@ -189,7 +189,9 @@ Rules of thumb:
 ### All block shapes
 
 ```jsonc
-// Markdown — built-in mini renderer, no library
+// Markdown — built-in mini renderer, no library. Headings, lists, code, quotes,
+// links, and GFM pipe tables all render. For real tabular DATA use a `table`
+// block instead (sortable + per-cell comments); markdown tables are display-only.
 { "type": "markdown", "md": "## Heading\nAny **CommonMark** prose." }
 
 // Mermaid diagram — vendored, lazy-loaded; natural height, max 1200 px + scroll
@@ -229,7 +231,9 @@ Rules of thumb:
   "height": 280
 }
 
-// Table — sortable, annotatable cells
+// Table — sortable, with individually annotatable cells. Prefer this over a
+// markdown pipe table whenever you're showing structured data (option matrices,
+// comparisons, workstream/effort grids): users can sort it and comment per cell.
 {
   "type": "table",
   "columns": [
@@ -266,8 +270,8 @@ Rules of thumb:
 | `graphviz` | precise dependency graphs, call graphs, state machines when Mermaid's auto-layout falls short; individually annotatable nodes and edges |
 | `plantuml` | UML diagrams (sequence, class, component) via server rendering; great for detailed interface contracts |
 | `chart` | numbers, trends, comparisons, metrics |
-| `table` | structured comparisons, option matrices, data grids |
-| `markdown` | prose context, background, instructions, section headings |
+| `table` | structured comparisons, option matrices, data grids — **use this for any tabular data**: it's sortable and every cell is commentable, unlike a markdown pipe table |
+| `markdown` | prose context, background, instructions, section headings (renders GFM pipe tables too, but reach for a `table` block for real data) |
 | `code` | code snippets, config examples, command output |
 | `image` | screenshots, mockup exports, photos — local files embed and work offline |
 | `html` | anything else — pixel-perfect mockups, custom widgets, embeds |
@@ -410,6 +414,18 @@ default 180); once they go idle it returns the normal `wait-timeout` JSON,
 with `presence` attached so you can decide what to do next. Prefer this over
 raising `--timeout`.
 
+### A `timeout` on a detached board is NOT the end
+
+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.
+
 ## Push-wake — get notified instead of polling
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Browser-based question boards with rich blocks (markdown, charts, mermaid, tables, code, sandboxed HTML) and element-level annotations for AI coding agents (Claude Code, Codex, …): ask users structured questions, present interactive visuals, collect inline comments, wait for submit, read answers as JSON.",
   "keywords": [
     "ai-agents",

package/skills/relay/SKILL.md

@@ -117,6 +117,8 @@ single/multi question.
   "labels": ["Jan","Feb"], "series": [{"label":"x","data":[1,2]}], "height": 320 }
 { "type": "chart",    "config": { /* full Chart.js v4 config */ }, "height": 300 }
 { "type": "table",    "columns": ["A","B"], "rows": [["x","y"]], "sortable": true }
+// ^ use a `table` block for tabular data — sortable + per-cell comments.
+//   (markdown blocks render GFM pipe tables too, but those are display-only.)
 { "type": "code",     "lang": "js",  "code": "const x = 1;" }
 { "type": "html",     "html": "<p>hi</p>",           "height": 360 }
 { "type": "html",     "htmlFile": "viz.html",         "height": 400 }

package/src/cli.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
-import { spawn } from 'node:child_process';
+import { spawn, spawnSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { CliError, sleep, pollFor } from './util.js';
 import { normalizeSpec, questionFromInline, SPEC_SCHEMA } from './spec.js';
@@ -23,7 +23,9 @@ import { openUrl } from './open.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = path.join(__dirname, '..');
 const BIN = path.join(PKG_ROOT, 'bin', 'rly.js');
-const VERSION = JSON.parse(fs.readFileSync(path.join(PKG_ROOT, 'package.json'), 'utf8')).version;
+const PKG_JSON = JSON.parse(fs.readFileSync(path.join(PKG_ROOT, 'package.json'), 'utf8'));
+const VERSION = PKG_JSON.version;
+const PKG_NAME = PKG_JSON.name; // e.g. "@khanglvm/relay" — the global package to upgrade
 
 const VALUED_FLAGS = new Set([
   'file', 'html', 'html-file', 'title', 'intro', 'timeout', 'port',
@@ -798,6 +800,113 @@ function cmdAgent() {
   return 0;
 }
 
+// `rly upgrade` — install the latest CLI globally AND refresh the bundled skill
+// in one shot. (`update` is taken by the live-mutate command, so this is
+// `upgrade` / `self-update`.) Running boards are surfaced and handled: a global
+// reinstall overwrites relay's files, but live detached servers snapshot their
+// UI at first request and serve from memory, so they keep working on their own
+// version. Flags: --stop (stop running boards first), --force (upgrade while
+// they keep running), --cli-only / --skill-only (scope).
+async function cmdUpgrade(args) {
+  const force = args.force === true;
+  const doStop = args.stop === true;
+  const wantCli = args.skillOnly !== true;
+  const wantSkill = args.cliOnly !== true;
+
+  const running = listRunning();
+
+  // --dry-run: report the plan (incl. how running boards would be handled)
+  // without installing anything or stopping anything.
+  if (args.dryRun === true) {
+    printJson({
+      dryRun: true,
+      wouldRun: [wantCli && `npm install -g ${PKG_NAME}@latest`, wantSkill && 'rly skill install'].filter(Boolean),
+      runningBoards: running.map((r) => r.id),
+      runningHandling: running.length
+        ? doStop
+          ? 'stop them first'
+          : force
+            ? 'leave them running (snapshotted)'
+            : 'BLOCKED — pass --stop or --force'
+        : 'none running',
+    });
+    return 0;
+  }
+
+  if (running.length) {
+    const ids = running.map((r) => r.id).join(', ');
+    if (doStop) {
+      process.stderr.write(`Stopping ${running.length} running board(s) before upgrading: ${ids}\n`);
+      for (const r of running) {
+        try { process.kill(r.pid, 'SIGTERM'); } catch { /* already gone */ }
+      }
+      for (const r of running) await pollFor(() => (loadRunning(r.id) ? null : true), 5000);
+    } else if (!force) {
+      // Default: don't silently overwrite under live boards — explain + let the
+      // user choose. The boards themselves are safe; this is about clarity.
+      process.stderr.write(
+        `${running.length} board(s) still running: ${ids}\n` +
+          'They keep serving their current version safely (each snapshots its UI in memory),\n' +
+          'and stay readable via `rly result <id>` / `rly wait <id>`. Pick one:\n' +
+          '  • rly stop --all       then re-run `rly upgrade`  (cleanest)\n' +
+          '  • rly upgrade --stop   stop them as part of this upgrade\n' +
+          '  • rly upgrade --force  upgrade now; leave them running on their snapshot\n'
+      );
+      printJson({ upgraded: false, reason: 'running-boards', running: running.map((r) => r.id) });
+      return 0;
+    } else {
+      process.stderr.write(`--force: leaving ${running.length} board(s) running on their snapshotted version: ${ids}\n`);
+    }
+  }
+
+  const did = {};
+
+  if (wantCli) {
+    process.stderr.write(`\nUpgrading ${PKG_NAME} → latest  (npm install -g ${PKG_NAME}@latest)\n`);
+    const r = spawnSync('npm', ['install', '-g', `${PKG_NAME}@latest`], { stdio: 'inherit' });
+    if (r.error || r.status !== 0) {
+      throw new CliError(
+        `npm install failed${r.error ? ` (${r.error.message})` : ` (exit ${r.status})`}. ` +
+          `Update manually: npm install -g ${PKG_NAME}@latest`,
+        1
+      );
+    }
+    did.cli = `${PKG_NAME}@latest`;
+  }
+
+  if (wantSkill) {
+    // Spawn the freshly installed binary (on PATH) so the NEW bundled skill is
+    // what lands — this process still holds the previous bundle in memory.
+    process.stderr.write('\nRefreshing the bundled skill  (rly skill install)\n');
+    const r = spawnSync('rly', ['skill', 'install'], { stdio: 'inherit', shell: true });
+    if (r.error || r.status !== 0) {
+      process.stderr.write(
+        `Skill refresh did not complete${r.error ? ` (${r.error.message})` : ` (exit ${r.status})`} — ` +
+          'run `rly skill install` yourself (or `npx skills add khanglvm/relay --skill relay --all`).\n'
+      );
+    } else {
+      did.skill = 'installed';
+    }
+  }
+
+  // Report the now-current global version (best-effort).
+  let nowVersion = null;
+  try {
+    const v = spawnSync('rly', ['--version'], { encoding: 'utf8', shell: true });
+    if (v.status === 0 && v.stdout) nowVersion = String(v.stdout).trim();
+  } catch {
+    // best effort
+  }
+
+  printJson({
+    upgraded: true,
+    ...did,
+    version: nowVersion,
+    note: 'most agents pick the new skill up immediately; if not, re-list skills or restart the session',
+  });
+  return 0;
+}
+
 async function cmdServeInternal(args) {
   const id = args.id;
   if (!id) throw new CliError('__serve: missing --id');
@@ -807,6 +916,9 @@ 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).
+    keepAliveOnTimeout: true,
   });
   await done;
   return 0;
@@ -842,6 +954,8 @@ USAGE
   rly agent                           FULL GUIDE for AI agents (spec format, blocks, sizing, patterns)
   rly skill [install|rules|path]      bundled universal agent skill (Claude Code, Codex, …)
                                       \`rly skill rules >> CLAUDE.md\` adds always-read usage rules
+  rly upgrade                         install the latest CLI globally + refresh the skill in one step
+                                      --stop/--force handle running boards · --dry-run · --cli-only/--skill-only
 
 COMMON FLAGS
   --title <s> --intro <s> --html-file <f> --height <px> --submit-label <s>
@@ -904,6 +1018,9 @@ export async function main(argv) {
         return cmdRm(parseArgs(rest));
       case 'skill':
         return cmdSkill(rest);
+      case 'upgrade':
+      case 'self-update':
+        return await cmdUpgrade(parseArgs(rest));
       case 'agent':
         return cmdAgent();
       case 'schema':

package/src/server.js

@@ -16,12 +16,25 @@ const escapeHtml = (s) =>
 
 // Concurrently authored UI assets (blocks/annotate) may not exist yet at this
 // phase's runtime — read-guard so the server still boots with empty fallbacks.
+//
+// Successful reads are cached for the lifetime of the process. A running board
+// thus serves one consistent UI snapshot taken at first request: if the relay
+// package is updated on disk (e.g. `rly upgrade`) while this server is live, it
+// keeps serving its own version instead of mixing new assets with old in-memory
+// server logic. Empty/failed reads are NOT cached, preserving the boot-time
+// fallback for assets authored concurrently during a build.
+const _uiCache = new Map();
 function readUi(name) {
+  const hit = _uiCache.get(name);
+  if (hit) return hit;
+  let content = '';
   try {
-    return fs.readFileSync(path.join(UI_DIR, name), 'utf8');
+    content = fs.readFileSync(path.join(UI_DIR, name), 'utf8');
   } catch {
     return '';
   }
+  if (content) _uiCache.set(name, content);
+  return content;
 }
 
 // Strips block bodies for the client payload: html blocks ship only metadata
@@ -324,7 +337,7 @@ function runOnResult(cmd, result, { quiet = false } = {}) {
 // (submitted / acknowledged / timeout / cancelled). The result is also
 // persisted into the board record so `rly wait` / `rly result` can read it
 // from another process.
-export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, quiet = false }) {
+export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, quiet = false, keepAliveOnTimeout = false }) {
   const record = loadBoard(id);
   if (!record) throw new Error(`board ${id} not found`);
   const spec = record.spec;
@@ -355,6 +368,11 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
   let rev = 1;
   let status = 'open';
   let finished = false;
+  // Soft timeout: the board's time is up and a `timeout` result was handed back
+  // to the waiting agent, but the server stays live so the user can keep
+  // working and still submit. Surfaced via /api/status so the page can show a
+  // calm "agent stopped waiting" note instead of disconnecting.
+  let softTimedOut = false;
   // Latest client presence ping (null until the first ping arrives).
   let presence = null;
   let resolveDone;
@@ -372,7 +390,7 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
       } else if (req.method === 'GET' && pathname === '/api/board') {
         sendJson(res, 200, { id: record.id, spec: record.spec, draft: record.draft, result: record.result });
       } else if (req.method === 'GET' && pathname === '/api/status') {
-        sendJson(res, 200, { status, rev });
+        sendJson(res, 200, { status, rev, softTimedOut });
       } else if (req.method === 'POST' && pathname === '/api/ping') {
         const body = JSON.parse((await readBody(req)) || '{}');
         // Validate body shape: visible/focused booleans, idleMs finite >= 0.
@@ -498,15 +516,25 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
   });
 
   let timer = null;
-  if (timeoutSec > 0) timer = setTimeout(() => finish({ status: 'timeout' }), timeoutSec * 1000);
+  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).
+  if (timeoutSec > 0) {
+    timer = setTimeout(keepAliveOnTimeout ? softTimeout : () => finish({ status: 'timeout' }), timeoutSec * 1000);
+  }
   const onSignal = () => finish({ status: 'cancelled' });
   process.on('SIGINT', onSignal);
   process.on('SIGTERM', onSignal);
 
-  function finish(partial) {
-    if (finished) return;
-    finished = true;
-    status = partial.status;
+  // Build + persist a result object onto the record (read cross-process by
+  // `rly wait` / `rly result`). Does NOT touch the server lifecycle.
+  function persistResult(partial) {
     // blockEdits: from this submit, else fall back to the autosaved draft
     // (timeout/cancel). null when there are none.
     const editsRaw = partial.blockEdits ?? (record.draft?.blockEdits || {});
@@ -533,13 +561,17 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
     }
     record.result = result;
     saveBoard(record);
-    // Push-wake: run the agent's local command for EVERY terminal status.
-    runOnResult(record.onResult, result, { quiet });
+    return result;
+  }
+
+  // Tear the HTTP server down after a short grace (so the success page renders
+  // and auto-closes first). The result is assumed already persisted.
+  function closeServer(result) {
     removeRunning(record.id);
     if (timer) clearTimeout(timer);
+    if (idleTimer) clearInterval(idleTimer);
     process.removeListener('SIGINT', onSignal);
     process.removeListener('SIGTERM', onSignal);
-    // Grace period so the success page renders (and auto-closes) first.
     setTimeout(() => {
       try {
         server.closeAllConnections?.();
@@ -551,6 +583,52 @@ export async function runBoard({ id, port = 0, open = true, timeoutSec = 1800, q
     }, 600);
   }
 
+  // Terminal finish (submit / acknowledge / explicit cancel): persist the
+  // result, push-wake the agent for EVERY terminal status, and close the
+  // server. A late submit after a soft timeout lands here and overwrites the
+  // earlier `timeout` result with `submitted` (re-firing the push-wake).
+  function finish(partial) {
+    if (finished) return;
+    finished = true;
+    status = partial.status;
+    const result = persistResult(partial);
+    runOnResult(record.onResult, result, { quiet });
+    closeServer(result);
+  }
+
+  // SOFT timeout — hand a `timeout` result to the agent but keep the board live
+  // and submittable. The agent's `rly wait` returns now; the user can carry on.
+  function softTimeout() {
+    if (finished || softTimedOut) return;
+    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);
   if (!quiet) {
     process.stderr.write(

package/src/spec.js

@@ -411,7 +411,7 @@ const BLOCK_SCHEMA = {
     required: ['type'],
     properties: {
       type: { type: 'string', enum: BLOCK_TYPES },
-      md: { type: 'string', description: 'markdown: built-in mini renderer (no external library). Text selections are commentable.' },
+      md: { type: 'string', description: 'markdown: built-in mini renderer (no external library) — headings, lists, code, quotes, links, and GFM pipe tables. Text selections are commentable. For real tabular data prefer a "table" block (sortable + per-cell comments).' },
       code: { type: 'string', description: 'mermaid: diagram source (e.g. "graph TD; A-->B"); plantuml: the @startuml…@enduml source; code: the source to display.' },
       editable: { type: 'boolean', description: 'mermaid: when true, render an "Edit diagram" toggle so the user can edit the diagram source live. The edited source is returned in result.blockEdits[<blockId>].' },
       dot: { type: 'string', description: 'graphviz: DOT source (e.g. "digraph { a -> b }"). Rendered offline via vendored Viz.js; nodes and edges are individually commentable.' },

package/src/ui/annotate.css

@@ -167,7 +167,81 @@
 }
 .ann-selbtn:hover { background: var(--accent-hover); }
 
-/* ---------- summary list ---------- */
+/* ---------- inline text highlight ---------- */
+/* Commented text in the intro / markdown gets a soft accent highlight that is
+   itself clickable (opens the comment popover). */
+.ann-hl {
+  background: var(--accent-soft);
+  color: inherit;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 var(--accent);
+  padding: 0 1px;
+  cursor: pointer;
+  transition: background 150ms var(--ease), color 150ms var(--ease);
+}
+.ann-hl:hover { background: var(--accent); color: var(--accent-fg); }
+
+/* ---------- comments rail (Outline-style right sidebar) ---------- */
+.ann-rail-toggle {
+  position: fixed; z-index: 57; right: 20px; bottom: 20px;
+  display: none; align-items: center; gap: 7px;
+  background: var(--card); color: var(--fg-2);
+  border: 1px solid var(--border-strong); border-radius: 999px;
+  padding: 9px 16px; cursor: pointer;
+  font: 600 0.82rem var(--sans);
+  box-shadow: var(--shadow-lift);
+  transition: border-color 150ms var(--ease), color 150ms var(--ease);
+}
+.ann-rail-toggle:hover { border-color: var(--accent); color: var(--accent); }
+.ann-rail-toggle-count {
+  display: inline-block; min-width: 18px;
+  background: var(--accent); color: var(--accent-fg);
+  border-radius: 999px; padding: 0 6px;
+  font: 600 0.72rem/18px var(--sans); text-align: center;
+}
+
+.ann-rail-scrim {
+  position: fixed; inset: 0; z-index: 61;
+  background: rgba(28, 27, 25, 0.34);
+  display: none;
+}
+.ann-rail-scrim.show { display: block; }
+
+.ann-rail {
+  position: fixed; z-index: 62; top: 0; right: 0; bottom: 0;
+  width: min(340px, 88vw);
+  display: flex; flex-direction: column;
+  background: var(--card);
+  border-left: 1px solid var(--border);
+  box-shadow: var(--shadow-lift);
+  transform: translateX(100%);
+  transition: transform 240ms var(--ease);
+}
+.ann-rail.open { transform: translateX(0); }
+.ann-rail-head {
+  flex: none;
+  display: flex; align-items: center; gap: 8px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ann-rail-title { font: 500 1.05rem var(--serif); letter-spacing: -0.01em; }
+.ann-rail-headcount {
+  color: var(--muted); font-size: 0.8rem;
+  background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px;
+}
+.ann-rail-headcount:empty { display: none; }
+.ann-rail-close {
+  margin-left: auto;
+  background: transparent; color: var(--muted);
+  border: none; border-radius: 8px;
+  width: 28px; height: 28px;
+  font-size: 1.3rem; line-height: 1; cursor: pointer;
+  transition: color 150ms var(--ease), background 150ms var(--ease);
+}
+.ann-rail-close:hover { color: var(--fg); background: var(--bg-sunken); }
+.ann-rail-list { flex: 1; overflow-y: auto; padding: 12px 16px 28px; }
+
+/* ---------- summary list (rows) ---------- */
 .ann-sum-head {
   font: 600 0.95rem var(--sans);
   margin: 0 0 2px;
@@ -184,6 +258,24 @@
 .ann-sum-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
 .ann-sum-replies { color: var(--muted); font-size: 0.75rem; }
 
+/* Rail rows render as discrete cards rather than a hairline-divided list. */
+.ann-rail-list .ann-sum-row {
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
+}
+.ann-rail-list .ann-sum-row + .ann-sum-row { border-top: 1px solid var(--border); }
+.ann-rail-list .ann-sum-row:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
+
+/* Wide screens: dock the rail beside the content instead of overlaying it. */
+@media (min-width: 1180px) {
+  .ann-rail-scrim { display: none !important; }
+  body.ann-rail-open { padding-right: 340px; }
+}
+
 /* ---------- jump-to flash ---------- */
 .ann-flash { animation: ann-flash 1s var(--ease); }
 @keyframes ann-flash {

package/src/ui/annotate.js

@@ -90,13 +90,163 @@
   let badges = [];             // live badge nodes (rebuilt on every refresh)
   let pendingSelection = null; // {info} captured at mouseup time
 
-  let dom = null;              // {pin, selBtn, pop}
+  // Text-selection comments are anchored back into the document as inline
+  // <mark> highlights. textRoots maps a blockId (null = intro/board) to the
+  // element whose text can be highlighted; highlightMap maps a target
+  // signature to its live <mark> nodes so we can flash or unwrap them.
+  const textRoots = new Map();
+  const highlightMap = new Map();
+
+  let dom = null;              // {pin, selBtn, pop, rail, railList, railToggle, railScrim, ...}
   let pinTimer = null;
   let pinEntry = null;
   let popOpen = false;
   let popScrollY = 0;
   let popSave = null;
   let badgeTimer = 0;
+  let railOpen = false;
+
+  // Stable signature for a (blockId, target) pair — same key matching() groups by.
+  const sigOf = (blockId, target) => JSON.stringify({ b: blockId ?? null, t: target });
+
+  // Brief highlight pulse used by the rail's jump-to.
+  function flashEl(target) {
+    if (!target) return;
+    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    target.classList.remove('ann-flash');
+    void target.getBoundingClientRect(); // restart the animation
+    target.classList.add('ann-flash');
+    setTimeout(() => target.classList.remove('ann-flash'), 1000);
+  }
+
+  // ---------- text-selection highlights ----------
+  // Re-locate a saved text quote inside a root using its prefix/suffix anchors,
+  // returning a live Range (or null when the text can't be found anymore).
+  function findRangeByQuote(root, target) {
+    const quote = target && target.quote ? String(target.quote) : '';
+    if (!quote) return null;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+    const map = []; // [{ node, start }] start = offset in `full`
+    let full = '';
+    let node;
+    while ((node = walker.nextNode())) {
+      map.push({ node, start: full.length });
+      full += node.nodeValue;
+    }
+    if (!map.length) return null;
+    const prefix = target.prefix || '';
+    const suffix = target.suffix || '';
+    const hits = [];
+    let from = 0;
+    let idx;
+    while ((idx = full.indexOf(quote, from)) !== -1) {
+      hits.push(idx);
+      from = idx + 1;
+    }
+    if (!hits.length) return null;
+    let chosen = hits[0];
+    for (const h of hits) {
+      const before = full.slice(Math.max(0, h - prefix.length), h);
+      const after = full.slice(h + quote.length, h + quote.length + suffix.length);
+      if ((!prefix || before.endsWith(prefix)) && (!suffix || after.startsWith(suffix))) {
+        chosen = h;
+        break;
+      }
+    }
+    const locate = (off) => {
+      for (const m of map) {
+        if (off <= m.start + m.node.nodeValue.length) return { node: m.node, offset: off - m.start };
+      }
+      const last = map[map.length - 1];
+      return { node: last.node, offset: last.node.nodeValue.length };
+    };
+    const s = locate(chosen);
+    const e = locate(chosen + quote.length);
+    const range = document.createRange();
+    try {
+      range.setStart(s.node, s.offset);
+      range.setEnd(e.node, e.offset);
+    } catch {
+      return null;
+    }
+    return range;
+  }
+
+  // Wrap every text-node segment inside `range` in its own <mark>; clicking a
+  // mark opens the comment popover for that target. Returns the mark nodes.
+  function wrapRange(range, sig, info) {
+    const sC = range.startContainer;
+    const sO = range.startOffset;
+    const eC = range.endContainer;
+    const eO = range.endOffset;
+    const anc = range.commonAncestorContainer;
+    const root = anc.nodeType === 1 ? anc : anc.parentNode;
+    if (!root) return [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+    const all = [];
+    let n;
+    while ((n = walker.nextNode())) all.push(n);
+    // Decide membership BEFORE mutating the DOM (splitText adds new siblings).
+    const inRange = all.filter((node) => {
+      try {
+        return range.intersectsNode(node);
+      } catch {
+        return false;
+      }
+    });
+    const marks = [];
+    for (const orig of inRange) {
+      let fromOff = 0;
+      let toOff = orig.nodeValue.length;
+      if (orig === sC) fromOff = sO;
+      if (orig === eC) toOff = eO;
+      if (fromOff >= toOff) continue;
+      let seg = orig;
+      if (fromOff > 0) seg = seg.splitText(fromOff);
+      if (toOff - fromOff < seg.nodeValue.length) seg.splitText(toOff - fromOff);
+      const mark = el('mark', { class: 'ann-hl', 'data-sig': sig });
+      seg.parentNode.insertBefore(mark, seg);
+      mark.appendChild(seg);
+      mark.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        openPopover(info, mark);
+      });
+      marks.push(mark);
+    }
+    return marks;
+  }
+
+  function unwrapHighlight(sig) {
+    const marks = highlightMap.get(sig);
+    if (!marks) return;
+    for (const m of marks) {
+      if (!m.isConnected) continue;
+      const parent = m.parentNode;
+      while (m.firstChild) parent.insertBefore(m.firstChild, m);
+      parent.removeChild(m);
+      parent.normalize();
+    }
+    highlightMap.delete(sig);
+  }
+
+  // Highlight every saved text annotation whose blockId matches this root and
+  // that isn't already wrapped (idempotent — safe to call on every register).
+  function applyHighlightsForRoot(root, blockId) {
+    const key = blockId ?? null;
+    const seen = new Set();
+    for (const a of annotations) {
+      if (!a.target || a.target.kind !== 'text') continue;
+      if ((a.blockId ?? null) !== key) continue;
+      const sig = sigOf(a.blockId, a.target);
+      if (seen.has(sig) || highlightMap.has(sig)) continue;
+      seen.add(sig);
+      const range = findRangeByQuote(root, a.target);
+      if (!range) continue;
+      const info = { blockId: a.blockId ?? null, questionId: a.questionId ?? null, target: a.target };
+      const marks = wrapRange(range, sig, info);
+      if (marks.length) highlightMap.set(sig, marks);
+    }
+  }
 
   // ---------- singleton DOM ----------
   function ensureDom() {
@@ -135,8 +285,36 @@
       }
     });
 
-    document.body.append(pin, selBtn, pop);
-    dom = { pin, selBtn, pop };
+    // Comments rail (Outline-style right sidebar) + its floating toggle and
+    // narrow-screen scrim. The list is a summary target, so renderSummaries()
+    // keeps it in sync; chrome (count, visibility) is refreshed separately.
+    const railToggleCount = el('span', { class: 'ann-rail-toggle-count' }, '0');
+    const railToggle = el('button', { class: 'ann-rail-toggle', type: 'button', 'aria-label': 'Comments' });
+    railToggle.innerHTML =
+      '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">' +
+      '<path d="M3 2.5h10A1.5 1.5 0 0 1 14.5 4v5a1.5 1.5 0 0 1-1.5 1.5H8.4L5 13.4v-2.9H3A1.5 1.5 0 0 1 1.5 9V4A1.5 1.5 0 0 1 3 2.5Z" fill="currentColor"/></svg>';
+    railToggle.append(el('span', { class: 'ann-rail-toggle-label' }, 'Comments'), railToggleCount);
+    railToggle.addEventListener('click', toggleRail);
+
+    const railScrim = el('div', { class: 'ann-rail-scrim' });
+    railScrim.addEventListener('click', closeRail);
+
+    const railClose = el('button', { class: 'ann-rail-close', type: 'button', 'aria-label': 'Close comments', title: 'Close' }, '×');
+    railClose.addEventListener('click', closeRail);
+    const railHeadCount = el('span', { class: 'ann-rail-headcount' }, '');
+    const railList = el('div', { class: 'ann-rail-list' });
+    const rail = el('aside', { class: 'ann-rail', 'aria-label': 'Comments' },
+      el('div', { class: 'ann-rail-head' },
+        el('span', { class: 'ann-rail-title' }, 'Comments'),
+        railHeadCount,
+        railClose
+      ),
+      railList
+    );
+
+    document.body.append(pin, selBtn, pop, railToggle, railScrim, rail);
+    dom = { pin, selBtn, pop, railToggle, railToggleCount, railScrim, rail, railList, railHeadCount };
+    summaryEls.add(railList);
 
     document.addEventListener('selectionchange', () => {
       if (dom.selBtn.style.display === '' || dom.selBtn.style.display === 'none') return;
@@ -163,6 +341,36 @@
     window.addEventListener('resize', scheduleBadgeRefresh);
   }
 
+  // ---------- comments rail ----------
+  function openRail() {
+    if (!dom || torndown || !annotations.length) return;
+    railOpen = true;
+    dom.rail.classList.add('open');
+    dom.railScrim.classList.add('show');
+    document.body.classList.add('ann-rail-open');
+  }
+  function closeRail() {
+    railOpen = false;
+    if (!dom) return;
+    dom.rail.classList.remove('open');
+    dom.railScrim.classList.remove('show');
+    document.body.classList.remove('ann-rail-open');
+  }
+  function toggleRail() {
+    if (railOpen) closeRail();
+    else openRail();
+  }
+  // Sync the toggle badge + rail count with the live list; hide the whole rail
+  // affordance when there are no comments.
+  function refreshRailChrome() {
+    if (!dom) return;
+    const n = annotations.length;
+    dom.railToggleCount.textContent = String(n);
+    dom.railHeadCount.textContent = n ? `${n}` : '';
+    dom.railToggle.style.display = n ? 'inline-flex' : 'none';
+    if (!n) closeRail();
+  }
+
   // ---------- hover pin ----------
   function showPin(entry) {
     clearTimeout(pinTimer);
@@ -345,7 +553,21 @@
       author: 'user',
       replies: [],
     });
+    // Highlight the selected text in place (re-located via its quote anchors,
+    // since the live selection is already gone by save time).
+    if (info.target && info.target.kind === 'text') {
+      const sig = sigOf(info.blockId, info.target);
+      const root = textRoots.get(info.blockId ?? null);
+      if (root && !highlightMap.has(sig)) {
+        const range = findRangeByQuote(root, info.target);
+        if (range) {
+          const marks = wrapRange(range, sig, { blockId: info.blockId ?? null, questionId: info.questionId ?? null, target: info.target });
+          if (marks.length) highlightMap.set(sig, marks);
+        }
+      }
+    }
     changed();
+    openRail(); // surface the new comment in the sidebar, Outline-style
   }
 
   // Append a user reply to a top-level annotation's thread (cap 50, like the
@@ -366,13 +588,20 @@
   function removeAnnotation(id) {
     const i = annotations.findIndex((a) => a.id === id);
     if (i < 0) return;
+    const removed = annotations[i];
     annotations.splice(i, 1);
+    // Drop the inline highlight once the last comment on that text is gone.
+    if (removed.target && removed.target.kind === 'text') {
+      const sig = sigOf(removed.blockId, removed.target);
+      if (!annotations.some((a) => sigOf(a.blockId, a.target) === sig)) unwrapHighlight(sig);
+    }
     changed();
   }
 
   function changed() {
     scheduleBadgeRefresh();
     renderSummaries();
+    refreshRailChrome();
     if (onChange) onChange(annotations.slice());
   }
 
@@ -434,6 +663,7 @@
   }
 
   function renderSummaryInto(target) {
+    const isRail = target.classList.contains('ann-rail-list');
     target.classList.add('ann-summary');
     target.replaceChildren();
     if (!annotations.length) {
@@ -441,7 +671,8 @@
       return;
     }
     target.style.display = '';
-    target.append(el('h3', { class: 'ann-sum-head' }, `Comments (${annotations.length})`));
+    // The rail has its own header chrome; standalone summaries get a heading.
+    if (!isRail) target.append(el('h3', { class: 'ann-sum-head' }, `Comments (${annotations.length})`));
     for (const a of annotations) {
       const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' }, '×');
       del.addEventListener('click', (e) => {
@@ -463,17 +694,22 @@
         ),
         del
       );
-      // Clicking a row jumps to (and flashes) the matching registered element.
+      // Clicking a row jumps to (and flashes) the matching element: a
+      // registered block element, or the inline highlight for a text comment.
       row.addEventListener('click', () => {
         const entry = registered.find(
           (r) => r.el.isConnected && sameBlock(r.info.blockId, a.blockId) && sameTarget(r.info.target, a.target)
         );
-        if (!entry) return;
-        entry.el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        entry.el.classList.remove('ann-flash');
-        void entry.el.getBoundingClientRect(); // restart the animation
-        entry.el.classList.add('ann-flash');
-        setTimeout(() => entry.el.classList.remove('ann-flash'), 1000);
+        let jump = entry ? entry.el : null;
+        if (!jump && a.target && a.target.kind === 'text') {
+          const marks = highlightMap.get(sigOf(a.blockId, a.target));
+          jump = marks && marks.find((m) => m.isConnected);
+        }
+        if (!jump) return;
+        // On narrow screens the rail overlays the page — close it so the
+        // flashed target is actually visible.
+        if (isRail && window.matchMedia('(max-width: 1179px)').matches) closeRail();
+        flashEl(jump);
       });
       target.append(row);
     }
@@ -506,6 +742,7 @@
     }
     scheduleBadgeRefresh();
     renderSummaries();
+    refreshRailChrome();
   }
 
   // Remove every floating element (pin, badges, popover, selection button)
@@ -521,13 +758,20 @@
     }
     hidePin();
     hideSelBtn();
+    closeRail();
     for (const b of badges) b.remove();
     badges = [];
     registered = [];
+    textRoots.clear();
+    highlightMap.clear();
     if (dom) {
       dom.pin.remove();
       dom.selBtn.remove();
       dom.pop.remove();
+      dom.railToggle.remove();
+      dom.railScrim.remove();
+      dom.rail.remove();
+      summaryEls.delete(dom.railList);
       dom = null;
     }
   }
@@ -546,11 +790,15 @@
   function enableTextSelection(rootEl, baseInfo) {
     if (torndown) return;
     ensureDom();
+    const blockId = (baseInfo && baseInfo.blockId != null) ? baseInfo.blockId : null;
+    textRoots.set(blockId, rootEl);
     rootEl.addEventListener('mouseup', () => {
       if (torndown) return;
       // defer: the selection settles after mouseup
       setTimeout(() => maybeShowSelBtn(rootEl, baseInfo), 0);
     });
+    // Re-anchor any saved text comments for this root (reload / prefill path).
+    applyHighlightsForRoot(rootEl, blockId);
   }
 
   function openExternal(info, anchorEl) {

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.
@@ -551,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;
@@ -578,12 +594,8 @@
     ));
   }
 
-  // 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' }, '');
@@ -616,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)
       )
     );
   }
@@ -638,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
@@ -651,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'
+      );
     }
   });
 
@@ -751,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();
@@ -768,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 {

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++;

package/src/ui/style.css

@@ -73,7 +73,7 @@ body {
   color: var(--fg);
   font: 16px/1.6 var(--sans);
   -webkit-font-smoothing: antialiased;
-  transition: background 200ms var(--ease), color 200ms var(--ease);
+  transition: background 200ms var(--ease), color 200ms var(--ease), padding 240ms var(--ease);
 }
 .wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 28px; }
 
@@ -193,7 +193,7 @@ input[type="text"]:focus, textarea:focus {
 textarea { min-height: 90px; resize: vertical; }
 
 .qnotewrap { margin-top: 10px; }
-.qnotewrap .qnote { font-size: 0.88rem; padding: 8px 12px; }
+.qnotewrap .qnote { font-size: 0.88rem; padding: 8px 12px; min-height: 52px; resize: vertical; }
 
 .errmsg { color: var(--danger); font-size: 0.85rem; margin: 8px 0 0; display: none; }
 .card.error .errmsg { display: block; }
@@ -220,8 +220,14 @@ textarea { min-height: 90px; resize: vertical; }
   position: sticky; top: 0;
   background: var(--danger); color: var(--danger-fg);
   text-align: center; padding: 9px 16px; font-size: 0.9rem;
+  line-height: 1.45;
   z-index: 10; display: none;
+  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); }
 
 /* Live-update toast: flagged after a `rly update` reload (see app.js).
    Fixed top-center, accent-soft bg, accent text; JS auto-removes it. */