threadroom-pi 0.1.0-beta.0

package/node_modules/threadroom-service/dist/public/presentations.js

@@ -0,0 +1,194 @@
+const MESSAGE_TYPE = 'threadroom:proposal';
+const MAX_MESSAGE_BYTES = 65536;
+const MAX_SUMMARY_LENGTH = 4096;
+const MAX_JSON_DEPTH = 32;
+
+// JSON only: no Date, Map, non-finite numbers or undefined silently discarded
+// by JSON.stringify. Bound depth/work as well as the serialized byte count.
+function isJson(value, depth = 0, budget = { remaining: MAX_MESSAGE_BYTES }) {
+  if (--budget.remaining < 0 || depth > MAX_JSON_DEPTH) return false;
+  if (value === null || typeof value === 'boolean') return true;
+  if (typeof value === 'string') {
+    // Count every occurrence, not only each distinct object. Structured clone
+    // preserves shared identity, while JSON serialization expands every use.
+    budget.remaining -= value.length;
+    return budget.remaining >= 0;
+  }
+  if (typeof value === 'number') return Number.isFinite(value);
+  if (typeof value !== 'object') return false;
+  if (Array.isArray(value)) {
+    // JSON.stringify walks through array length, including holes. Reject sparse
+    // or impossibly large arrays before serialization can monopolize the host.
+    if (value.length > budget.remaining) return false;
+    for (let index = 0; index < value.length; index += 1) {
+      if (!Object.hasOwn(value, index) || !isJson(value[index], depth + 1, budget)) return false;
+    }
+    return true;
+  }
+  if (Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return false;
+  for (const [key, item] of Object.entries(value)) {
+    budget.remaining -= key.length;
+    if (budget.remaining < 0 || !isJson(item, depth + 1, budget)) return false;
+  }
+  return true;
+}
+
+function proposalFromMessage(data) {
+  try {
+    if (typeof data === 'string') {
+      if (data.length > MAX_MESSAGE_BYTES || new TextEncoder().encode(data).length > MAX_MESSAGE_BYTES) return null;
+      data = JSON.parse(data);
+    }
+    if (!data || typeof data !== 'object' || Array.isArray(data) || data.type !== MESSAGE_TYPE) return null;
+    if (!Object.hasOwn(data, 'values') || !isJson(data)) return null;
+    const json = JSON.stringify(data);
+    if (new TextEncoder().encode(json).length > MAX_MESSAGE_BYTES) return null;
+    if (data.summary !== undefined && (typeof data.summary !== 'string' || data.summary.length > MAX_SUMMARY_LENGTH)) return null;
+    const values = JSON.parse(json).values;
+    const summary = data.summary?.trim() || readableValue(values).slice(0, MAX_SUMMARY_LENGTH);
+    return { values, summary };
+  } catch {
+    return null;
+  }
+}
+
+function readableValue(value) {
+  if (typeof value === 'string') return value;
+  return JSON.stringify(value, null, 2) ?? '';
+}
+
+function fallbackText(presentation) {
+  const fallback = presentation?.fallback;
+  if (typeof fallback === 'string' && fallback.trim()) return fallback;
+  if (fallback && typeof fallback === 'object') return readableValue(fallback);
+  return 'This authored canvas proposes a draft only. You can always answer in text or reject using the host controls below.';
+}
+
+function element(document, tag, className, text) {
+  const result = document.createElement(tag);
+  if (className) result.className = className;
+  if (text !== undefined) result.textContent = text;
+  return result;
+}
+
+// Only append/remove our own presentation subtree. The caller retains ownership
+// of dependable answer/reject controls and decides what a proposal means.
+export function mountPresentation(container, { node, onProposal, apiBaseUrl = '' }) {
+  if (typeof onProposal !== 'function') throw new TypeError('onProposal must be a function');
+  const document = container.ownerDocument;
+  const window = document.defaultView;
+  const root = element(document, 'div', 'presentation');
+  const presentation = node?.presentation || { kind: 'text-v1' };
+  const disposers = [];
+  let mounted = true;
+  const emit = (proposal) => { if (mounted) onProposal(proposal); };
+  const listen = (target, type, callback) => {
+    target.addEventListener(type, callback);
+    disposers.push(() => target.removeEventListener(type, callback));
+  };
+  const fallback = () => root.append(element(document, 'div', 'fallback-presentation', fallbackText(presentation)));
+
+  if (presentation.kind === 'html-v1') {
+    root.append(element(document, 'p', 'presentation-eyebrow', 'AUTHORED CANVAS · PROPOSES A DRAFT, NEVER SUBMITS'));
+    const frame = element(document, 'iframe', 'authored-frame');
+    frame.title = `Interactive presentation: ${node.title || node.prompt || 'question or answer'}`;
+    frame.setAttribute('sandbox', 'allow-scripts');
+    frame.setAttribute('referrerpolicy', 'no-referrer');
+    // Additional defense in supporting browsers. CSP on the served document is
+    // authoritative; this Permissions Policy also denies unrelated capabilities.
+    frame.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; payment 'none'; fullscreen 'none'; clipboard-read 'none'; clipboard-write 'none'; usb 'none'");
+    frame.setAttribute('height', '360');
+    frame.setAttribute('width', '100%');
+    frame.src = `${apiBaseUrl.replace(/\/$/, '')}/api/nodes/${encodeURIComponent(node.id)}/presentation`;
+    listen(window, 'message', (event) => {
+      // Sandboxed documents have opaque origin ('null'); origin cannot identify
+      // them. WindowProxy identity associates a proposal with exactly this node.
+      if (!mounted || event.source !== frame.contentWindow) return;
+      const proposal = proposalFromMessage(event.data);
+      if (proposal) emit(proposal);
+    });
+    root.append(frame);
+    fallback();
+  } else if (presentation.kind === 'comparison-v1' && Array.isArray(presentation.options)) {
+    const grid = element(document, 'div', 'comparison-grid');
+    const buttons = [];
+    for (const option of presentation.options) {
+      if (!option || typeof option.id !== 'string' || typeof option.label !== 'string') continue;
+      const button = element(document, 'button', 'option-card');
+      button.type = 'button';
+      button.setAttribute('aria-pressed', 'false');
+      if (typeof option.image === 'string' && option.image) {
+        const image = element(document, 'img', 'option-image');
+        // Image context permits self-contained SVG too; never accept script or
+        // HTML URLs. Relative asset paths resolve against the host document.
+        let safeImage = false;
+        try {
+          const url = new URL(option.image, document.baseURI);
+          safeImage = ['http:', 'https:'].includes(url.protocol) || /^data:image\//i.test(option.image);
+        } catch { /* invalid URL: retain the readable option */ }
+        if (safeImage) {
+          image.src = option.image;
+          image.alt = typeof option.alt === 'string' ? option.alt : option.label;
+          image.referrerPolicy = 'no-referrer';
+          button.append(image);
+        }
+      }
+      const copy = element(document, 'span', 'option-copy');
+      copy.append(element(document, 'strong', '', option.label));
+      if (typeof option.detail === 'string') copy.append(element(document, 'small', '', option.detail));
+      button.append(copy);
+      listen(button, 'click', () => {
+        for (const candidate of buttons) {
+          candidate.classList.toggle('selected', candidate === button);
+          candidate.setAttribute('aria-pressed', String(candidate === button));
+        }
+        emit({ values: { id: option.id, label: option.label }, summary: [option.label, option.detail].filter(Boolean).join(' — ') });
+      });
+      buttons.push(button);
+      grid.append(button);
+    }
+    root.append(grid);
+    if (!buttons.length) fallback();
+  } else if (presentation.kind === 'text-v1') {
+    if (typeof presentation.text === 'string') root.append(element(document, 'div', 'fallback-presentation', presentation.text));
+    const list = element(document, 'div', 'choice-list');
+    const choices = Array.isArray(presentation.choices) ? [...new Set(presentation.choices.filter((choice) => typeof choice === 'string'))] : [];
+    const selected = new Set();
+    const buttons = [];
+    for (const choice of choices) {
+      const button = element(document, 'button', 'choice-pill', choice);
+      button.type = 'button';
+      button.setAttribute('aria-pressed', 'false');
+      listen(button, 'click', () => {
+        if (presentation.multiple) {
+          if (selected.has(choice)) selected.delete(choice);
+          else selected.add(choice);
+        } else {
+          selected.clear();
+          selected.add(choice);
+        }
+        for (const item of buttons) {
+          const active = selected.has(item.choice);
+          item.button.classList.toggle('selected', active);
+          item.button.setAttribute('aria-pressed', String(active));
+        }
+        const values = choices.filter((item) => selected.has(item));
+        emit({ values, summary: values.join('; ') || 'No choices selected' });
+      });
+      buttons.push({ button, choice });
+      list.append(button);
+    }
+    root.append(list);
+    if (presentation.fallback) fallback();
+  } else {
+    fallback();
+  }
+
+  container.append(root);
+  return () => {
+    if (!mounted) return;
+    mounted = false;
+    for (const dispose of disposers) dispose();
+    root.remove();
+  };
+}

package/node_modules/threadroom-service/dist/public/routes.js

@@ -0,0 +1,15 @@
+export function threadPath(id) {
+  return `/threads/${encodeURIComponent(String(id))}`;
+}
+
+export function threadIdFromPath(pathname) {
+  const encoded = String(pathname).match(/^\/threads\/([^/]+)$/)?.[1];
+  if (!encoded) return null;
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    // A malformed percent escape is not a node ID. Let startup choose its normal
+    // fallback rather than crashing the whole browser application.
+    return null;
+  }
+}

package/node_modules/threadroom-service/dist/public/styles.css

@@ -0,0 +1,263 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');
+
+:root {
+  --ink: #1d2421;
+  --muted: #747a74;
+  --faint: #a3a69f;
+  --line: #deded7;
+  --soft-line: #e9e8e2;
+  --paper: #fbfaf7;
+  --canvas: #efeee8;
+  --accent: #315d49;
+  --accent-soft: #e4ede7;
+  --warm: #a7613f;
+  --shadow: 0 16px 42px rgba(40, 46, 42, .08);
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.5 Manrope, system-ui, sans-serif; overflow: hidden; }
+button, input, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; }
+.app-shell { height: 100dvh; min-height: 100%; display: flex; flex-direction: column; }
+.topbar { height: 66px; flex: none; display: grid; grid-template-columns: 276px 1fr auto; align-items: center; padding: 0 20px 0 24px; border-bottom: 1px solid #d6d5cf; background: rgba(247,246,241,.97); }
+.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 600 22px Newsreader, serif; letter-spacing: -.3px; }
+.brand-mark { width: 27px; height: 28px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
+.brand-mark i { position: absolute; width: 18px; height: 12px; border: 1.8px solid #27332e; border-radius: 50%; transform: rotate(58deg); background: transparent; }
+.brand-mark i:nth-child(2) { transform: rotate(-58deg); }
+.brand-mark i:nth-child(3) { transform: rotate(0); }
+.topbar-center { justify-self: center; color: #777d77; font-size: 12px; letter-spacing: .15px; }
+.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6ca17c; box-shadow: 0 0 0 4px #e2ece4; margin: 0 9px 1px 0; }
+.topbar-actions { display: flex; align-items: center; gap: 9px; }
+.button, .icon-button, .filter-button { border: 0; border-radius: 8px; background: transparent; }
+.button { min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; }
+.button-dark { color: white; background: #26312c; box-shadow: 0 2px 7px rgba(28,35,32,.18); }
+.button-dark:hover { background: #16201c; }
+.button-ghost { background: #f1f1ec; border: 1px solid var(--line); }
+.icon-button { width: 37px; height: 37px; color: #6e746f; font-size: 21px; }
+.icon-button:hover { background: #e9e9e3; }
+.avatar { width: 34px; height: 34px; display: grid; place-items: center; margin-left: 3px; border-radius: 50%; color: white; background: #a66d52; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
+.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px 340px minmax(0, 1fr); }
+.sidebar { display: flex; flex-direction: column; min-height: 0; padding: 22px 13px 14px; background: #f3f2ed; border-right: 1px solid #dad9d2; }
+.nav-label, .eyebrow { margin: 0 0 8px; color: #959890; font: 500 9px DM Mono, monospace; letter-spacing: 1.55px; }
+.nav-label { padding: 0 11px; }
+.nav-item { width: 100%; height: 39px; padding: 0 10px; border: 0; border-radius: 7px; display: grid; grid-template-columns: 22px 1fr auto; gap: 5px; align-items: center; text-align: left; background: transparent; color: #656b66; font-size: 12px; }
+.nav-item:hover { background: #e9e9e3; }
+.nav-item.active { color: #26312c; background: white; box-shadow: 0 1px 4px rgba(45,48,44,.09); font-weight: 600; }
+.nav-icon { color: #858a84; font-size: 17px; text-align: center; }
+.nav-item b { min-width: 18px; padding: 1px 5px; border-radius: 9px; color: #6d736e; background: #e5e6df; text-align: center; font-size: 9px; }
+.nav-item.active b { color: white; background: #315d49; }
+.sidebar-footer { display: grid; grid-template-columns: 27px 1fr 8px; align-items: center; gap: 7px; padding: 13px 10px 4px; margin-top: auto; border-top: 1px solid #dddcd5; }
+.sidebar-footer strong, .sidebar-footer small { display: block; }
+.sidebar-footer strong { font-size: 9px; font-weight: 600; }
+.sidebar-footer small { color: #999d97; font-size: 8px; }
+.persistence-icon { color: #758079; }
+.status-light { width: 6px; height: 6px; border-radius: 50%; background: #64a277; }
+.thread-index { min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: #f8f7f3; border-right: 1px solid #d9d8d2; }
+.index-heading { display: flex; justify-content: space-between; align-items: center; padding: 26px 22px 15px; }
+.index-heading h1 { margin: 0; font: 600 24px/1.1 Newsreader, serif; letter-spacing: -.4px; }
+.index-heading .eyebrow { margin-bottom: 5px; color: #748078; }
+.filter-button { width: 31px; height: 31px; border: 1px solid var(--line); background: white; color: #7f847f; font-size: 18px; }
+.search-box { display: flex; align-items: center; margin: 0 17px 13px; border: 1px solid #dfdfd8; border-radius: 7px; background: white; color: #92968f; }
+.search-box span { font-size: 20px; padding-left: 10px; transform: rotate(-12deg); }
+.search-box input { width: 100%; height: 34px; border: 0; outline: 0; background: transparent; padding: 0 10px 0 7px; font-size: 11px; }
+.thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 9px 28px; }
+.thread-card { width: 100%; display: block; padding: 15px 13px 14px; border: 1px solid transparent; border-bottom-color: #e6e5df; background: transparent; text-align: left; position: relative; }
+.thread-card:hover { border-radius: 8px; background: #f1f0eb; }
+.thread-card.active { border-color: #d8d8d1; border-radius: 8px; background: white; box-shadow: 0 3px 12px rgba(45,48,44,.06); }
+.thread-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
+.author-avatar { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; background: #dce6df; color: #315d49; font-size: 8px; font-weight: 700; }
+.author-avatar.ivo { color: #70533f; background: #eee3da; }
+.thread-author { font-size: 9px; font-weight: 600; }
+.thread-role { color: #999d97; font-size: 8px; }
+.thread-time { color: #a0a39e; font-size: 8px; margin-left: auto; }
+.thread-card h2 { margin: 0 0 4px; font: 600 15px/1.25 Newsreader, serif; }
+.thread-card p { margin: 0; color: #7d827c; font-size: 9.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.thread-card-footer { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
+.tag { display: inline-flex; align-items: center; min-height: 19px; padding: 0 7px; border-radius: 4px; color: #68746d; background: #e9eee9; font: 500 8px DM Mono, monospace; letter-spacing: .25px; }
+.tag.attention { color: #925337; background: #f2e4dc; }
+.tag.team { color: #516378; background: #e5eaf0; }
+.tag.deferred { color: #7a6844; background: #eee9db; }
+.thread-card .arrow { margin-left: auto; color: #abb0aa; }
+.empty-list { padding: 44px 25px; text-align: center; color: #8a8f89; font-size: 11px; }
+.loading-card { height: 112px; margin: 8px; border-radius: 8px; background: linear-gradient(90deg,#efeee9,#f7f6f2,#efeee9); background-size: 200%; animation: shimmer 1.3s infinite; }
+@keyframes shimmer { to { background-position: -200% 0; } }
+.thread-room { min-width: 0; min-height: 0; overflow-y: auto; background: var(--paper); }
+.thread-loading { height: 100%; display: grid; place-content: center; gap: 10px; color: #8d928c; font-size: 11px; text-align: center; }
+.spinner { width: 25px; height: 25px; margin: auto; border: 2px solid #e0e1db; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.room-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 77px; padding: 15px 26px; border-bottom: 1px solid #e1e0da; background: rgba(251,250,247,.94); backdrop-filter: blur(12px); }
+.room-title-row { display: flex; align-items: center; gap: 11px; }
+.room-author { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #eaf1ec; background: #52645d; font: 600 11px Newsreader, serif; }
+.room-header h1 { margin: 0 0 3px; font: 600 20px/1.15 Newsreader, serif; letter-spacing: -.25px; }
+.room-meta { color: #8f938e; font-size: 8.5px; }
+.room-actions { display: flex; gap: 7px; }
+.room-action { height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #656b66; font-size: 9px; font-weight: 600; }
+.room-action.primary { border-color: #344f42; color: white; background: #344f42; }
+.room-content { max-width: 1060px; margin: 0 auto; padding: 25px clamp(24px, 4.2vw, 58px) 80px; }
+.thread-summary { margin: 0 0 22px; color: #707670; font-size: 11px; }
+.conversation-label { display: flex; align-items: center; gap: 10px; margin: 23px 0 12px; color: #93978f; font: 500 8px DM Mono, monospace; letter-spacing: 1.2px; }
+.conversation-label::after { content: ''; height: 1px; flex: 1; background: #e3e2dc; }
+.question-block { margin-bottom: 18px; border: 1px solid #ddddd6; border-radius: 11px; background: #fff; box-shadow: 0 5px 20px rgba(40,46,42,.045); overflow: hidden; }
+.question-heading { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 17px 19px 14px; align-items: start; }
+.question-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #6c766f; background: #eef1ed; font: 500 9px DM Mono, monospace; }
+.question-heading h2 { margin: 0 0 6px; font: 600 19px/1.25 Newsreader, serif; letter-spacing: -.2px; }
+.question-context { margin: 0; max-width: 760px; color: #747a74; font-size: 10px; line-height: 1.55; }
+.status-chip { min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 10px; font: 500 7.5px DM Mono, monospace; letter-spacing: .4px; white-space: nowrap; }
+.status-chip.outstanding { color: #8a482e; background: #f3e5dd; }
+.status-chip.answered { color: #326146; background: #e1eee5; }
+.status-chip.waiting_on_team { color: #466079; background: #e4ebf2; }
+.status-chip.deferred { color: #76603b; background: #eee8d9; }
+.status-chip.rejected { color: #6c6261; background: #ebe7e6; }
+.presentation { padding: 0 19px 17px 59px; }
+.presentation-eyebrow { margin: 0 0 9px; color: #929790; font: 500 7.5px DM Mono, monospace; letter-spacing: 1px; }
+.comparison-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
+.option-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #deded7; border-radius: 8px; background: #f8f8f5; text-align: left; transition: border .15s, transform .15s, box-shadow .15s; }
+.option-card:hover { transform: translateY(-1px); border-color: #a9b8af; box-shadow: 0 7px 18px rgba(42,52,46,.08); }
+.option-card.selected { border: 2px solid #3d6954; box-shadow: 0 0 0 3px #e2ece6; }
+.option-image { display: block; width: 100%; aspect-ratio: 1.39; object-fit: cover; background: #1d2928; }
+.option-copy { display: block; min-height: 69px; padding: 10px 11px; }
+.option-copy strong { display: block; margin-bottom: 3px; font: 600 12px Newsreader, serif; }
+.option-copy small { display: block; color: #7f847e; font-size: 8px; line-height: 1.4; }
+.choice-list { display: flex; flex-wrap: wrap; gap: 7px; }
+.choice-pill { min-height: 30px; padding: 0 11px; border: 1px solid #d9dad3; border-radius: 6px; background: #f8f8f5; color: #646b65; font-size: 9px; }
+.choice-pill.selected { border-color: #4a725e; color: #315d49; background: #e7efe9; box-shadow: 0 0 0 2px #e7efe9; }
+.fallback-presentation { padding: 12px; border-radius: 7px; color: #717772; background: #f3f3ef; font-size: 9px; white-space: pre-wrap; }
+.response-history { margin: 0 19px 17px 59px; padding: 13px 14px; border-left: 3px solid #72907e; border-radius: 0 7px 7px 0; background: #f1f5f2; }
+.response-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
+.response-kind { color: #4c6456; font: 500 7.5px DM Mono, monospace; letter-spacing: .8px; text-transform: uppercase; }
+.response-time { margin-left: auto; color: #999d97; font-size: 8px; }
+.response-body { margin: 0; color: #38413c; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
+.selection-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
+.selection-summary span { padding: 3px 7px; border-radius: 4px; color: #315d49; background: #dfeae3; font-size: 8px; font-weight: 600; }
+.composer { margin: 0 19px 18px 59px; border: 1px solid #d8d9d2; border-radius: 8px; background: #fafaf7; overflow: hidden; }
+.composer-modes { display: flex; gap: 3px; padding: 7px; border-bottom: 1px solid #e6e5df; background: #f3f3ef; }
+.mode-button { height: 27px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #777d77; font-size: 8px; font-weight: 600; }
+.mode-button:hover { background: white; }
+.mode-button.active { color: #315d49; background: white; box-shadow: 0 1px 4px rgba(40,46,42,.1); }
+.composer textarea { display: block; width: 100%; min-height: 80px; padding: 12px 13px; resize: vertical; border: 0; outline: 0; background: white; font-size: 10px; line-height: 1.55; }
+.composer-footer { min-height: 42px; display: flex; align-items: center; padding: 7px 9px; border-top: 1px solid #ecebe5; background: white; }
+.draft-state { color: #9a9e98; font-size: 8px; }
+.draft-state.unsaved::before { content: '•'; color: #b77955; margin-right: 4px; }
+.submit-response { margin-left: auto; min-height: 29px; padding: 0 11px; border: 0; border-radius: 5px; color: white; background: #315d49; font-size: 8px; font-weight: 600; }
+.submit-response:disabled { opacity: .55; cursor: progress; }
+dialog { width: min(520px,calc(100vw - 30px)); padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: 0 25px 90px rgba(25,30,27,.25); }
+dialog::backdrop { background: rgba(25,30,27,.4); backdrop-filter: blur(3px); }
+.dialog-card { padding: 24px; background: #fbfaf7; }
+.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 7px; }
+.dialog-heading h2 { margin: 0; font: 600 25px Newsreader, serif; }
+.dialog-close { width: 31px; height: 31px; border: 0; border-radius: 6px; background: #efeee9; color: #777; font-size: 20px; }
+.dialog-copy { margin: 0 0 19px; color: #7b817b; font-size: 10px; }
+.dialog-card label { display: block; margin-top: 12px; color: #5d655f; font-size: 9px; font-weight: 600; }
+.dialog-card input, .dialog-card textarea { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #d8d8d2; border-radius: 6px; outline: 0; background: white; font-size: 10px; }
+.dialog-card input:focus, .dialog-card textarea:focus { border-color: #779184; box-shadow: 0 0 0 3px #e8eee9; }
+.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
+.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; transform: translate(-50%,18px); padding: 9px 14px; border-radius: 7px; color: white; background: #24302a; box-shadow: var(--shadow); font-size: 9px; opacity: 0; pointer-events: none; transition: .2s; }
+.toast.show { opacity: 1; transform: translate(-50%,0); }
+.toast.error { background: #793f35; }
+.spike-label { margin-left: 10px; padding: 3px 5px; border: 1px solid #d9ded7; border-radius: 4px; color: #899388; font: 8px DM Mono, monospace; letter-spacing: .7px; }
+.filter-button { display: grid; place-items: center; cursor: default; }
+.thread-card p { font-size: 11px; }
+.thread-role, .thread-time, .thread-author { font-size: 10px; }
+.tag { font-size: 9px; }
+.room-meta, .room-action { font-size: 11px; }
+.thread-summary { font-size: 13px; }
+.question-heading h2 { font-size: 22px; }
+.question-context, .response-body, .composer textarea { font-size: 12px; }
+.status-chip { font-size: 9px; }
+.presentation-eyebrow, .response-kind, .response-time { font-size: 9px; }
+.option-copy strong { font-size: 15px; }
+.option-copy small { font-size: 11px; }
+.choice-pill, .mode-button, .submit-response, .selection-summary span { font-size: 11px; }
+.draft-state { font-size: 10px; }
+.dialog-card label, .dialog-card input, .dialog-card textarea, .dialog-copy { font-size: 12px; }
+.toast { font-size: 12px; }
+.workspace { grid-template-columns: 205px 365px minmax(0,1fr); }
+.outline-guide { margin: 26px 11px; color: #9a9f97; font-size: 10px; line-height: 1.7; }
+.outline-guide strong { color: #7f8b81; font-size: 11px; font-weight: 600; }
+.outline-guide p { margin: 5px 0; }
+.outline-crumbs { padding: 0 22px 11px; display: flex; gap: 4px; flex-wrap: wrap; color: #afb3a9; font-size: 10px; }
+.outline-crumbs button, .room-breadcrumbs button { padding: 0; border: 0; background: none; color: #7d8a7f; font-size: inherit; }
+.outline-crumbs button:hover, .room-breadcrumbs button:hover { color: #315d49; text-decoration: underline; }
+.outline-list { padding: 6px 8px 20px; overflow: auto; }
+.outline-row { display: grid; grid-template-columns: 14px 22px minmax(160px,1fr) 23px; align-items: start; min-width: calc(280px + var(--depth,0)*13px); padding: 7px 7px 7px calc(6px + var(--depth,0)*13px); gap: 3px; border-radius: 6px; }
+.outline-row:hover { background: #f0f0ea; }
+.outline-row.selected { background: #e8eee7; }
+.outline-toggle, .outline-bullet, .outline-add { border: 0; padding: 0; width: 20px; height: 22px; display: grid; place-items: center; background: none; }
+.outline-toggle { color: #a5afa1; font-size: 17px; width: 14px; }
+.outline-toggle.no-children { visibility: hidden; }
+.outline-bullet { color: #637a67; font-weight: 700; font-size: 16px; border-radius: 50%; }
+.outline-bullet:hover { background: #d4e0d3; }
+.outline-title { display: block; width: 100%; padding: 1px 3px; border: 0; background: none; text-align: left; font-size: 12px; line-height: 1.4; }
+.outline-title span { display: block; }
+.outline-title small { display: block; margin-top: 5px; color: #94a28f; font: 8px DM Mono,monospace; letter-spacing: .6px; }
+.outline-title small.outstanding { color: #a57554; }
+.outline-title small.waiting_on_team { color: #7c91a8; }
+.outline-title small.deferred { color: #aa9570; }
+.outline-add { opacity: 0; color: #82957e; }
+.outline-row:hover .outline-add, .outline-add:focus { opacity: 1; }
+.outline-context { margin: 12px 8px 2px; color: #98a091; font: 8px/1.5 DM Mono,monospace; }
+.outline-bottom { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e0e1d8; background: #f3f4ed; }
+.outline-bottom .button { min-height: 28px; font-size: 10px; }
+.outline-bottom span { color: #939e8c; font-size: 9px; }
+.room-header { align-items: start; gap: 13px; }
+.room-title-row { align-items: center; min-width: 0; }
+.room-header h1 { font-size: 22px; overflow-wrap: anywhere; }
+.room-actions { flex: none; padding-top: 7px; }
+.room-breadcrumbs { display: flex; gap: 5px; flex-wrap: wrap; color: #aaa; font-size: 9px; margin-bottom: 5px; }
+.node-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
+.node-context { color: #8c9887; font: 9px DM Mono,monospace; text-transform: uppercase; letter-spacing: .8px; }
+.node-body { margin: 0 0 22px; color: #59645b; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
+.node-canvas { margin: 16px 0 27px; }
+.node-canvas:empty { display: none; }
+.authored-frame { display: block; width: 100%; height: 360px; max-height: 520px; border: 1px solid #d8dfd3; border-radius: 10px; background: white; }
+.node-canvas .fallback-presentation { margin-top: 12px; font-size: 11px; line-height: 1.6; }
+.child-thread { padding: 14px 16px; border: 1px solid #dde3d6; border-radius: 8px; background: white; margin-bottom: 10px; }
+.child-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; flex-wrap: wrap; }
+.child-title { padding: 0; border: 0; background: none; text-align: left; font: 600 19px/1.3 Newsreader,serif; color: #364831; }
+.child-title span { font: 12px Manrope,sans-serif; color: #8b9d81; }
+.child-body { font-size: 12px; line-height: 1.65; color: #65765d; white-space: pre-wrap; margin: 7px 0 10px; }
+.child-artifact { color: #899b81; font: 8px DM Mono,monospace; }
+.child-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 9px; }
+.child-actions button { padding: 0; border: 0; background: none; color: #668f57; font-size: 10px; }
+.child-actions button:hover { text-decoration: underline; }
+.children-empty { color: #a2ad9a; font-size: 11px; }
+.trusted-response { margin-top: 28px; padding-top: 15px; border-top: 1px solid #d4dfcd; }
+.trusted-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
+.trusted-heading span { color: #6b8161; font: 9px DM Mono,monospace; letter-spacing: .7px; }
+.trusted-heading small { color: #9baa90; font-size: 9px; }
+.trusted-response .composer { margin: 0; }
+.trusted-response .composer textarea { font-size: 13px; min-height: 90px; }
+.proposal-summary { padding: 10px 13px; color: #607c53; background: #edf5e6; font-size: 11px; }
+.proposal-summary:empty { display: none; }
+.proposal-summary strong, .proposal-summary span, .proposal-summary small { display: block; }
+.proposal-summary small { margin-top: 3px; font-size: 9px; color: #92a780; }
+.node-footnote { color: #a2ad98; font-size: 9px; margin-top: 17px; }
+.saved-values { margin: 9px 0; color: #5d8050; font-size: 11px; }
+.saved-generation { display: block; width: 240px; max-width: 100%; margin: 9px 0; border-radius: 7px; }
+.saved-values pre { max-height: 180px; overflow: auto; padding: 8px; border-radius: 5px; background: #e9f1e2; color: #7a936b; font: 10px DM Mono,monospace; white-space: pre-wrap; }
+.authoring-details { margin-top: 15px; padding: 10px 12px; border: 1px solid #e1e4d9; border-radius: 7px; font-size: 11px; color: #91a17e; }
+.authoring-details summary { cursor: pointer; }
+.checkbox-label { display: flex !important; align-items: center; gap: 7px; }
+.checkbox-label input { width: auto; margin: 0; }
+.response-authoring { border: 0; border-top: 1px solid #ecebe5; border-radius: 0; margin-top: 0; }
+.response-authoring label { display: block; margin-top: 9px; font-size: 10px; }
+.response-authoring textarea { margin-top: 5px; border: 1px solid #dfe4d7; border-radius: 5px; font: 10px DM Mono,monospace; }
+.live-dot.disconnected { background: #be9970; box-shadow: 0 0 0 4px #f0e7da; }
+@media (max-width: 1079px) {
+  .workspace { grid-template-columns: 180px minmax(260px,305px) minmax(0,1fr); }
+  .comparison-grid { grid-template-columns: 1fr; }
+  .option-card { display: grid; grid-template-columns: 150px 1fr; }
+  .option-image { height: 100%; aspect-ratio: auto; }
+}
+@media (max-width: 780px) {
+  body { overflow: auto; }
+  .app-shell { height: auto; min-height: 100dvh; }
+  .topbar { grid-template-columns: 1fr auto; }
+  .topbar-center, .sidebar { display: none; }
+  .workspace { display: block; }
+  .thread-index { max-height: 320px; border-bottom: 1px solid var(--line); }
+  .thread-list { display: flex; overflow-x: auto; }
+  .thread-card { min-width: 280px; }
+  .thread-room { overflow: visible; }
+  .room-header { top: 0; }
+}

package/node_modules/threadroom-service/dist/src/live.js

@@ -0,0 +1,170 @@
+// HTTP transport over committed store state. Notifications wake readers; the durable
+// event log / node snapshot, rather than the notification payload, is authoritative.
+const HUMAN_RESPONSES = new Set(['answer', 'reject', 'clarification', 'defer']);
+const HEARTBEAT_MS = 15_000;
+
+export function streamEvents(request, response, store, { after = 0, threadId } = {}) {
+  // EventSource reconnect cursors take precedence over the original URL cursor.
+  let cursor = sequence(request.headers['last-event-id'] || after);
+  let closed = false;
+  let draining = false;
+  let blocked = false;
+  let heartbeat;
+
+  const cleanup = () => {
+    if (closed) return;
+    closed = true;
+    clearInterval(heartbeat);
+    store.changes.off('change', onChange);
+    response.off('drain', onDrain);
+    response.off('close', cleanup);
+    response.off('finish', cleanup);
+    response.off('error', cleanup);
+    request.off('aborted', cleanup);
+  };
+  const drain = () => {
+    if (closed || draining || blocked) return;
+    draining = true;
+    try {
+      // A page is bounded, not the replay: reconnects may need more than 100 events.
+      while (!closed && !blocked) {
+        const events = store.listEvents(cursor, threadId);
+        if (events.length === 0) break;
+        for (const event of events) {
+          const next = sequence(event.sequence);
+          if (next <= cursor) throw new Error('Event log must advance its sequence');
+          const writable = response.write(`id: ${next}\nevent: change\ndata: ${JSON.stringify(event)}\n\n`);
+          cursor = next; // write(false) still accepted this event; resume after it.
+          if (!writable) {
+            blocked = true;
+            break;
+          }
+          if (closed) break;
+        }
+      }
+    } finally {
+      draining = false;
+    }
+  };
+  const onChange = () => {
+    try { drain(); } catch (error) { cleanup(); response.destroy(error); }
+  };
+  const onDrain = () => { blocked = false; onChange(); };
+
+  // Subscribe before replay, so a write cannot fall between replay and listening.
+  store.changes.on('change', onChange);
+  request.on('aborted', cleanup);
+  response.on('close', cleanup);
+  response.on('finish', cleanup);
+  response.on('error', cleanup);
+  response.on('drain', onDrain);
+  if (request.aborted || response.destroyed) { cleanup(); return; }
+  try {
+    response.writeHead(200, {
+      'Content-Type': 'text/event-stream; charset=utf-8',
+      'Cache-Control': 'no-cache, no-transform',
+      'Connection': 'keep-alive',
+      'X-Accel-Buffering': 'no'
+    });
+    response.flushHeaders();
+    drain();
+    heartbeat = setInterval(() => {
+      // Keepalive only: it neither polls the store nor accumulates a slow-client queue.
+      if (!closed && !blocked) blocked = !response.write(': keepalive\n\n');
+    }, HEARTBEAT_MS);
+    heartbeat.unref?.();
+  } catch (error) {
+    cleanup();
+    response.destroy(error);
+  }
+}
+
+export function waitForResponse(request, response, store, nodeId, { timeoutMs = 60_000, published } = {}) {
+  if (!Number.isFinite(timeoutMs) || timeoutMs < 0) throw inputError('timeoutMs must be a non-negative number');
+  timeoutMs = Math.min(timeoutMs, 120_000);
+  let closed = false;
+  let timer;
+  const cleanup = () => {
+    if (closed) return;
+    closed = true;
+    clearTimeout(timer);
+    store.changes.off('change', onChange);
+    request.off('aborted', cleanup);
+    response.off('close', cleanup);
+    response.off('finish', cleanup);
+    response.off('error', cleanup);
+  };
+  const finish = (reply, timedOut) => {
+    if (closed) return;
+    cleanup();
+    json(response, 200, {
+      published,
+      outcome: reply ? reply.response.kind : 'pending',
+      response: reply,
+      timedOut
+    });
+  };
+  const currentResponse = () => {
+    const { node, children } = store.getNode(nodeId);
+    const responses = children.filter((child) => child.response);
+    const latest = responses.at(-1);
+    // A team reply reopens the question. An earlier human turn is not an answer
+    // to this wait, including when an idempotent publish is retried after reopening.
+    if (node.status === 'outstanding' && responses.some((child) => child.response?.kind === 'team_reply')) return null;
+    return HUMAN_RESPONSES.has(latest?.response?.kind) ? latest : null;
+  };
+  const check = () => {
+    if (closed) return;
+    const reply = currentResponse();
+    if (reply) finish(reply, false);
+  };
+  const fail = (error) => {
+    if (closed) return;
+    cleanup();
+    const status = error.statusCode || 500;
+    json(response, status, { error: status === 500 ? 'Internal server error' : error.message, published });
+  };
+  const onChange = () => {
+    try { check(); } catch (error) { fail(error); }
+  };
+
+  // Request 'close' also fires for a normally consumed POST body. Only aborted
+  // requests and closed responses represent cancellation of this waiter.
+  store.changes.on('change', onChange);
+  request.on('aborted', cleanup);
+  response.on('close', cleanup);
+  response.on('finish', cleanup);
+  response.on('error', cleanup);
+  if (request.aborted || response.destroyed) { cleanup(); return; }
+  try {
+    check();
+    if (!closed) {
+      timer = setTimeout(() => {
+        // Recheck committed state at the deadline before issuing a pending receipt.
+        try { check(); if (!closed) finish(null, true); } catch (error) { fail(error); }
+      }, timeoutMs);
+      timer.unref?.();
+    }
+  } catch (error) {
+    cleanup();
+    throw error; // The host can handle a synchronous missing-node / input error.
+  }
+}
+
+function sequence(value) {
+  const result = Number(value);
+  if (!Number.isSafeInteger(result) || result < 0) throw inputError('Event cursor must be a non-negative safe integer');
+  return result;
+}
+
+function inputError(message) {
+  const error = new Error(message);
+  error.statusCode = 400;
+  return error;
+}
+
+function json(response, status, value) {
+  if (response.destroyed || response.writableEnded) return;
+  response.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  response.end(JSON.stringify(value));
+}