@prplkane/roundtable 0.0.0-stage → 0.6.3

package/src/ui/design/preset-dusk.css

@@ -0,0 +1,91 @@
+/* Signature preset: Dusk, version 1.
+   Load after tokens.css. The Ink & paper structure (warm paper, IBM Plex, square tags, LED
+   status lights, hard shadows) with purple where Ink & paper has blue: aubergine chrome, a plum
+   action colour, orchid (the Dusk accent) for brand marks. Green appears only for success.
+   Light theme "Plum paper", dark theme "Night plum". First used by Roundtable. All text pairs
+   checked with design_lint.py --contrast at 4.5:1 or better; border-strong at 3:1 (marks). */
+
+:root {
+  --knob-accent: #c79ad0;
+  --knob-accent-manual: #7d4a8a;
+}
+
+:root,
+:root[data-theme="paper"],
+:root[data-theme="manual"] {
+  color-scheme: light;
+  --color-bg: #f6f2ea;
+  --color-surface: #fdfbf7;
+  --color-surface-raised: #fffdfa;
+  --color-border: #ddd3d6;
+  --color-border-strong: #8c7f8f;
+  --color-text: #241c2b;
+  --color-text-muted: #645a6c;
+  --color-accent: var(--knob-accent-manual);
+  --color-logo-ink: #2b1d38;
+  --color-action: #5b3478;
+  --color-on-action: #ffffff;
+  --color-selection: #ece3f0;
+  --color-ok: #3f6b3a;
+  --color-warn: #8f5a00;
+  --color-danger: #a8402d;
+  --color-info: #5b3478;
+  --color-focus: #5b3478;
+  --color-chrome: #2b1d38;
+  --color-chrome-text: #f1eaf4;
+  --color-chrome-muted: #c3b3cc;
+  --color-chrome-accent: #c79ad0;
+}
+
+:root[data-theme="night"],
+:root[data-theme="terminal"] {
+  color-scheme: dark;
+  --color-bg: #16111c;
+  --color-surface: #1d1724;
+  --color-surface-raised: #251d2e;
+  --color-border: #352a40;
+  --color-border-strong: #6e5d7d;
+  --color-text: #ece5f1;
+  --color-text-muted: #a597b0;
+  --color-accent: var(--knob-accent);
+  --color-logo-ink: #0f0b14;
+  --color-action: #c9a3e6;
+  --color-on-action: #16111c;
+  --color-selection: #2a2035;
+  --color-ok: #8fbf86;
+  --color-warn: #d9a45a;
+  --color-danger: #e58a78;
+  --color-info: #c9a3e6;
+  --color-focus: #c9a3e6;
+  --color-chrome: #0f0b14;
+  --color-chrome-text: #ece5f1;
+  --color-chrome-muted: #a597b0;
+  --color-chrome-accent: #c79ad0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-bg: #16111c;
+    --color-surface: #1d1724;
+    --color-surface-raised: #251d2e;
+    --color-border: #352a40;
+    --color-border-strong: #6e5d7d;
+    --color-text: #ece5f1;
+    --color-text-muted: #a597b0;
+    --color-accent: var(--knob-accent);
+    --color-logo-ink: #0f0b14;
+    --color-action: #c9a3e6;
+    --color-on-action: #16111c;
+    --color-selection: #2a2035;
+    --color-ok: #8fbf86;
+    --color-warn: #d9a45a;
+    --color-danger: #e58a78;
+    --color-info: #c9a3e6;
+    --color-focus: #c9a3e6;
+    --color-chrome: #0f0b14;
+    --color-chrome-text: #ece5f1;
+    --color-chrome-muted: #a597b0;
+    --color-chrome-accent: #c79ad0;
+  }
+}

package/src/ui/design/tokens.css

@@ -0,0 +1,129 @@
+/* Signature design tokens, version 2 ("used future").
+   Copy unchanged into each app. Override only the --knob-* variables, in a
+   separate app.css loaded after this file. */
+
+:root {
+  /* ---- Per-app knobs ---------------------------------------------------- */
+  --knob-accent: #e8a33d;
+  --knob-accent-manual: #b4561e;
+  --knob-density: 1;
+
+  /* ---- Type ------------------------------------------------------------- */
+  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 14px;
+  --text-md: 16px;
+  --text-lg: 20px;
+  --text-xl: 28px;
+  --leading-tight: 1.25;
+  --leading-base: 1.5;
+  --weight-regular: 400;
+  --weight-strong: 600;
+  --tracking-label: 0.08em;
+
+  /* ---- Space (4px grid, scaled by density) ------------------------------ */
+  --space-1: calc(4px * var(--knob-density));
+  --space-2: calc(8px * var(--knob-density));
+  --space-3: calc(12px * var(--knob-density));
+  --space-4: calc(16px * var(--knob-density));
+  --space-5: calc(24px * var(--knob-density));
+  --space-6: calc(32px * var(--knob-density));
+
+  /* ---- Shape ------------------------------------------------------------ */
+  --radius-sm: 2px;
+  --radius: 4px;
+  --radius-lg: 6px;
+  --border-width: 1px;
+  --shadow-hard: 3px 3px 0 var(--color-border);
+  --shadow-hard-action: 2px 2px 0 var(--color-border-strong);
+  --shadow-overlay: 6px 6px 0 var(--color-border-strong);
+
+  /* ---- Industrial details (brand layer; use these, never hand-roll) ------ */
+  --led-size: 7px;
+  --pattern-ticks: repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 8px);
+  --pattern-hazard: repeating-linear-gradient(-45deg, var(--color-danger) 0 3px, transparent 3px 6px);
+
+  /* ---- Motion ----------------------------------------------------------- */
+  --motion-fast: 120ms;
+  --motion-base: 180ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --cursor-blink: 1.1s steps(1) infinite;
+}
+
+/* ---- Terminal (dark, warm) ---------------------------------------------- */
+:root,
+:root[data-theme="terminal"] {
+  color-scheme: dark;
+  --color-bg: #13110e;
+  --color-surface: #1b1814;
+  --color-surface-raised: #221e19;
+  --color-border: #3a332b;
+  --color-border-strong: #554b3f;
+  --color-text: #e8dfd0;
+  --color-text-muted: #9e9282;
+  --color-accent: var(--knob-accent);
+  --color-logo-ink: #13110e;
+  --color-action: #6fb3a9;
+  --color-on-action: #13110e;
+  --color-selection: #2a241e;
+  --color-ok: #9cbc6a;
+  --color-warn: #d9824a;
+  --color-danger: #df6b55;
+  --color-info: #86a9c4;
+  --color-focus: #6fb3a9;
+}
+
+/* ---- Printed manual (light, warm paper) --------------------------------- */
+:root[data-theme="manual"] {
+  color-scheme: light;
+  --color-bg: #eee6d6;
+  --color-surface: #f7f1e6;
+  --color-surface-raised: #fdfaf3;
+  --color-border: #cbbfa8;
+  --color-border-strong: #a3967f;
+  --color-text: #2a241d;
+  --color-text-muted: #685e50;
+  --color-accent: var(--knob-accent-manual);
+  --color-logo-ink: #eee6d6;
+  --color-action: #2d6a63;
+  --color-on-action: #ffffff;
+  --color-selection: #e2d8c4;
+  --color-ok: #556b2f;
+  --color-warn: #8f5a00;
+  --color-danger: #a8402d;
+  --color-info: #3d6684;
+  --color-focus: #2d6a63;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    color-scheme: light;
+    --color-bg: #eee6d6;
+    --color-surface: #f7f1e6;
+    --color-surface-raised: #fdfaf3;
+    --color-border: #cbbfa8;
+    --color-border-strong: #a3967f;
+    --color-text: #2a241d;
+    --color-text-muted: #685e50;
+    --color-accent: var(--knob-accent-manual);
+    --color-logo-ink: #eee6d6;
+    --color-action: #2d6a63;
+    --color-on-action: #ffffff;
+    --color-selection: #e2d8c4;
+    --color-ok: #556b2f;
+    --color-warn: #8f5a00;
+    --color-danger: #a8402d;
+    --color-info: #3d6684;
+    --color-focus: #2d6a63;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-base: 0ms;
+    --cursor-blink: none;
+  }
+}

package/src/ui/diagnostics.js

@@ -0,0 +1,61 @@
+const CODES = new Set(['browser-network', 'browser-timeout', 'browser-response', 'browser-error', 'browser-rejection', 'browser-stream', 'browser-validation']);
+const ACTIONS = new Set(['setup', 'history', 'delete', 'clear', 'clear-finished', 'preflight', 'create', 'events', 'continue', 'finish', 'stop', 'hold', 'resume', 'export', 'synthesize', 'accept', 'pools', 'terms', 'diagnostics', 'pick-folder', 'unknown']);
+const KEY = 'roundtable.diagnostics';
+
+export function requestAction(url, write = false) {
+  if (url === '/api/seats') return 'setup';
+  if (url === '/api/debates') return write ? 'create' : 'history';
+  if (url === '/api/preflight') return 'preflight';
+  if (url.startsWith('/api/diagnostics')) return 'diagnostics';
+  if (url.startsWith('/api/pools/')) return 'pools';
+  if (url.startsWith('/api/terms/')) return 'terms';
+  const action = url.split('/').at(-1);
+  return ACTIONS.has(action) ? action : 'unknown';
+}
+
+function safe(event) {
+  if (!/^RT-[a-f0-9]{16}$/.test(event?.id) || !CODES.has(event?.code) || !ACTIONS.has(event?.action)) return null;
+  const out = { id: event.id, code: event.code, action: event.action };
+  if (['lens', 'moodText'].includes(event.field)) out.field = event.field;
+  for (const [key, max] of Object.entries({ seatIndex: 7, status: 599, line: 1_000_000, column: 1_000_000 })) {
+    if (Number.isInteger(event[key]) && event[key] >= 0 && event[key] <= max) out[key] = event[key];
+  }
+  return out;
+}
+
+// Diagnostic writes alone may retry. Review actions never do. Keep a small per-tab queue
+// through reloads so an offline server or a rotated launch token does not erase the evidence.
+export function createBrowserDiagnostics({ send, storage, onPending = () => {} }) {
+  let queue = [], sending = null;
+  try { const old = JSON.parse(storage?.getItem(KEY) || '[]'); if (Array.isArray(old)) queue = old.map(safe).filter(Boolean).slice(-20); } catch { /* storage disabled */ }
+  const persist = () => { try { storage?.setItem(KEY, JSON.stringify(queue)); } catch { /* keep the in-memory copy */ } };
+  const pending = () => queue.map((e) => ({ ...e }));
+  async function flush() {
+    if (sending) return sending;
+    if (!queue.length) return;
+    const batch = pending();
+    sending = (async () => {
+      try {
+        const reply = await send(batch);
+        if (Array.isArray(reply?.saved)) {
+          const sent = new Set(batch.map((e) => e.id));
+          const saved = new Set(reply.saved.filter((id) => sent.has(id)));
+          queue = queue.filter((e) => !saved.has(e.id));
+          persist();
+        }
+      } catch { /* a diagnostics failure must not recursively log itself */ }
+      onPending(queue.length);
+    })();
+    try { await sending; } finally { sending = null; }
+  }
+  function report(code, action = 'unknown', details = {}) {
+    const bytes = crypto.getRandomValues(new Uint8Array(8));
+    const id = `RT-${[...bytes].map((b) => b.toString(16).padStart(2, '0')).join('')}`;
+    const entry = safe({ ...details, id, code, action });
+    if (!entry) return null;
+    queue.push(entry); queue = queue.slice(-20); persist();
+    void flush();
+    return id;
+  }
+  return { report, flush, pending };
+}

package/src/ui/help.js

@@ -0,0 +1,122 @@
+export const MOOD_HELP = {
+  grill: 'Challenge assumptions and ask for evidence before agreeing.',
+  steelman: 'Make the strongest case for each option before judging it.',
+  builder: 'Focus on practical steps, effort and what could break.',
+  contrarian: 'Explore the less popular position and defend it with evidence.',
+  custom: 'Write your own sentence describing how this seat should argue.',
+};
+const HELP = {
+  lens: { title: 'Lens', text: 'The perspective this seat focuses on, such as risk, evidence or long-term effects. Give each seat a different lens so the review covers more than one angle.' },
+  mood: { title: 'Mood', text: 'How this seat argues. Its lens sets the topic of attention; its mood sets the approach.' },
+  critique: { title: 'Critique rounds', text: 'After the first independent replies, each seat reads and responds to the others. Set 0 for initial replies and a verdict only; 1 allows one extra exchange. The review can finish early. Extra rounds use more quota.' },
+  auto: { title: 'Review window', text: 'A brief chance to correct assumptions between rounds, including the first blind round. With no question, the table continues after this many seconds. Start writing a note to request more time.' },
+  questionWait: { title: 'Answer window', text: 'How long the table waits when a seat asks you a question. If nobody answers, it continues with the missing facts still unknown. Writing an answer or choosing More time extends this window, within the overall time limit.' },
+  wall: { title: 'Wall clock', text: 'The total time limit, including pauses while you read or type. When it runs out, the review stops. Give yourself enough time to respond.' },
+  unattended: { title: 'Unattended', text: 'Off: the table gives you timed windows to read and answer questions, then continues automatically. On: it never waits; the seats state missing facts as assumptions. Use it when nobody can answer, whether the review is launched from the browser or an agent.' },
+  memory: { title: 'Memory', text: 'Stateless starts a fresh call each round with the relevant notes and replies. Resume continues a growing conversation and may use more tokens. Stateless is a good starting point.' },
+  isolation: { title: 'Limited isolation', text: 'Antigravity cannot be fully sealed off: it still loads your shared Antigravity customizations and discovers your MCP servers, and its web search cannot be switched off. Roundtable denies its file, command, URL and MCP tools and stops the call at the first tool it reports. Choosing Antigravity on this card accepts that; choose another provider if it does not suit you.' },
+  searcher: { title: 'Searcher', text: 'Optional. One extra call before the first round, on the provider you pick: it searches the web for your query and saves up to eight cited sources that every seat and the chairman then read. It sees only the query, never your notes, and never argues or votes.' },
+  searchLimits: { title: 'Search limits', text: 'Searches: how many the CLI may report before the call is stopped. One search can cover several queries or pages, and the one over the limit may already have started. Time: when the searcher is stopped. Sources come from the provider and are not checked by Roundtable.' },
+  effort: { title: 'Effort', text: 'How much reasoning the model should use. Higher effort can take longer and use more quota. No filled squares means the provider’s default.' },
+};
+
+// Full text is present from the start for selection and assistive technology. Only its visual
+// presentation changes; this does not pretend that a completed provider reply is still running.
+export function revealText(root, { startedAt = performance.now(), duration = 700 } = {}) {
+  const win = root.ownerDocument.defaultView;
+  if (win.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  const elapsed = Math.max(0, performance.now() - startedAt);
+  if (elapsed >= duration + 260) return;
+  const walker = root.ownerDocument.createTreeWalker(root, win.NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.textContent.trim() && !node.parentElement.closest('.label, .sr-only, .text-reveal-word, button, select, pre, code, .verdict-meta')) nodes.push(node);
+  }
+  const total = nodes.reduce((n, node) => n + node.textContent.split(/\s+/u).filter(Boolean).length, 0);
+  let i = 0;
+  for (const node of nodes) {
+    const fragment = root.ownerDocument.createDocumentFragment();
+    for (const word of node.textContent.split(/(\s+)/u)) {
+      if (!word || /^\s+$/u.test(word)) { fragment.append(word); continue; }
+      const span = root.ownerDocument.createElement('span');
+      span.className = 'text-reveal-word'; span.textContent = word;
+      span.style.animationDelay = `${Math.round(i++ * duration / Math.max(1, total) - elapsed)}ms`;
+      fragment.append(span);
+    }
+    node.replaceWith(fragment);
+  }
+}
+
+export function installHelp() {
+  for (const [key, value] of Object.entries(HELP)) {
+    const description = document.createElement('span');
+    description.id = `help-${key}`; description.className = 'sr-only'; description.textContent = value.text;
+    document.body.append(description);
+  }
+  const bubble = document.createElement('div');
+  bubble.className = 'help-popover'; bubble.setAttribute('role', 'tooltip');
+  bubble.setAttribute('aria-hidden', 'true'); // controls describe the complete, non-animated text above
+  document.body.append(bubble);
+  let active = null, openTimer = null, closeTimer = null;
+  function close() {
+    clearTimeout(openTimer); clearTimeout(closeTimer);
+    bubble.classList.remove('is-open'); active = null;
+  }
+  function position() {
+    if (!active?.isConnected) { close(); return; }
+    const anchor = active.getBoundingClientRect(), rect = bubble.getBoundingClientRect();
+    if (anchor.bottom < 0 || anchor.top > innerHeight) { close(); return; }
+    const left = Math.max(12, Math.min(anchor.left, innerWidth - rect.width - 12));
+    const below = anchor.bottom + 10;
+    const top = below + rect.height <= innerHeight - 12 ? below : Math.max(12, anchor.top - rect.height - 10);
+    bubble.style.left = `${left}px`; bubble.style.top = `${top}px`;
+  }
+  function show(target) {
+    clearTimeout(openTimer); clearTimeout(closeTimer);
+    const help = HELP[target?.dataset.help]; if (!help || !target.isConnected) return;
+    active = target;
+    const title = document.createElement('strong'), text = document.createElement('p');
+    title.textContent = help.title; text.textContent = help.text;
+    if (target.dataset.help === 'mood') {
+      const mood = target.closest('.seat')?.querySelector('.mood')?.value;
+      if (MOOD_HELP[mood]) text.textContent += ` ${mood === 'custom' ? 'Custom' : mood[0].toUpperCase() + mood.slice(1)}: ${MOOD_HELP[mood]}`;
+    }
+    bubble.replaceChildren(title, text); position();
+    bubble.classList.add('is-open'); revealText(text, { duration: 480 });
+  }
+  function schedule(target, delay = 900) {
+    if (!HELP[target?.dataset.help]) return;
+    clearTimeout(closeTimer);
+    if (active === target && bubble.classList.contains('is-open')) return;
+    clearTimeout(openTimer); openTimer = setTimeout(() => show(target), delay);
+  }
+  const leave = () => { clearTimeout(openTimer); closeTimer = setTimeout(() => { if (!active?.contains(document.activeElement)) close(); }, 160); };
+  document.addEventListener('pointerover', (e) => { const target = e.target.closest('[data-help]'); if (target) schedule(target); });
+  document.addEventListener('pointerout', (e) => {
+    const target = e.target.closest('[data-help]');
+    if (target && !target.contains(e.relatedTarget) && !bubble.contains(e.relatedTarget)) leave();
+  });
+  document.addEventListener('focusin', (e) => { if (e.target.matches('[data-help]')) schedule(e.target, 900); });
+  document.addEventListener('focusout', (e) => { if (e.target.matches('[data-help]')) leave(); });
+  document.addEventListener('click', (e) => {
+    const trigger = e.target.closest('[data-help]');
+    if (trigger) {
+      e.preventDefault(); // A label's forwarded input click would immediately dismiss its hint.
+      const target = trigger.closest('[data-help]');
+      if (active === target && bubble.classList.contains('is-open')) close(); else show(target);
+    } else if (!bubble.contains(e.target) && !e.target.closest('[data-help]')) close();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') close();
+    else if (['Enter', ' '].includes(e.key) && e.target.matches('[data-help]')) {
+      e.preventDefault();
+      if (active === e.target && bubble.classList.contains('is-open')) close(); else show(e.target);
+    }
+  });
+  bubble.addEventListener('pointerenter', () => clearTimeout(closeTimer));
+  bubble.addEventListener('pointerleave', leave);
+  window.addEventListener('resize', () => { if (active) position(); });
+  document.addEventListener('scroll', () => { if (active) position(); }, true);
+  return { close };
+}

package/src/ui/icons.js

@@ -0,0 +1,64 @@
+// Header glyphs: 12x12 pixel icons for the controls that need no word. They share the avatars'
+// drawing helper so a header icon, a seat avatar and the session gavel read as one family.
+import { pixelRects } from '/ui/avatars.js';
+
+const ART = {
+  sun: [
+    '......X.....',
+    '..X...X...X.',
+    '...X.....X..',
+    '.....XXX....',
+    '....XXXXX...',
+    '.XX.XXXXX.XX',
+    '....XXXXX...',
+    '.....XXX....',
+    '...X.....X..',
+    '..X...X...X.',
+    '......X.....',
+    '............',
+  ],
+  moon: [
+    '.....XXXXX..',
+    '...XXXXX....',
+    '..XXXX......',
+    '.XXXX.......',
+    '.XXXX.......',
+    '.XXXX.......',
+    '.XXXX.......',
+    '.XXXX.......',
+    '..XXXX......',
+    '...XXXXX....',
+    '.....XXXXX..',
+    '............',
+  ],
+  sound: [
+    '.....X......',
+    '....XX..X...',
+    '...XXX...X..',
+    'XXXXXX.X..X.',
+    'XXXXXX.X.X.X',
+    'XXXXXX.X.X.X',
+    'XXXXXX.X.X.X',
+    'XXXXXX.X..X.',
+    '...XXX...X..',
+    '....XX..X...',
+    '.....X......',
+    '............',
+  ],
+  muted: [
+    '.....X......',
+    '....XX......',
+    '...XXX..X.X.',
+    'XXXXXX...X..',
+    'XXXXXX..X.X.',
+    'XXXXXX......',
+    'XXXXXX......',
+    'XXXXXX......',
+    '...XXX......',
+    '....XX......',
+    '.....X......',
+    '............',
+  ],
+};
+
+export const icon = (name) => `<svg viewBox="0 0 12 12" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true" focusable="false">${pixelRects(ART[name])}</svg>`;