threadroom-pi 0.1.0-beta.0

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

@@ -0,0 +1,349 @@
+import { ThreadroomClient } from './client.js';
+import { mountPresentation } from './presentations.js';
+import { threadIdFromPath, threadPath } from './routes.js';
+
+const $ = (selector, root = document) => root.querySelector(selector);
+const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
+const esc = (value = '') => String(value ?? '').replace(/[&<>'"]/g, (char) => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', "'":'&#39;', '"':'&quot;' })[char]);
+const initials = (name = '?') => name.replace(/\([^)]*\)/g,'').trim().split(/\s+/).map((part) => part[0]).join('').slice(0,2).toUpperCase();
+const time = (iso) => new Intl.DateTimeFormat(undefined, { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }).format(new Date(iso));
+const statusLabels = { outstanding:'NEEDS YOUR ANSWER', answered:'ANSWERED', waiting_on_team:'WAITING ON TEAM', deferred:'DEFERRED', rejected:'REJECTED' };
+const responseLabels = { answer:'Answered', reject:'Rejected with reason', clarification:'Asked back', defer:'Deferred', team_reply:'Team replied' };
+const state = { nodes:[], byId:new Map(), children:new Map(), expanded:new Set(), selected:null, zoomId:null, view:'outline', query:'', dialogParentId:null, drafts:new Map(), saving:new Map(), readGeneration:0, readingId:null };
+let client;
+let cleanupCanvas = () => {};
+
+function rebuildTree(nodes) {
+  state.nodes = nodes;
+  state.byId = new Map(nodes.map((node) => [node.id,node]));
+  state.children = new Map();
+  for (const node of nodes) {
+    const parentId = node.parentId ?? null;
+    state.children.set(parentId, [...(state.children.get(parentId) || []),node]);
+  }
+}
+const childrenOf = (id) => state.children.get(id) || [];
+function ancestorsOf(id) {
+  const result = [];
+  let node = state.byId.get(id);
+  while (node?.parentId) { node = state.byId.get(node.parentId); if (node) result.unshift(node); }
+  return result;
+}
+function inBranch(node, rootId) { return !rootId || node.id === rootId || ancestorsOf(node.id).some((parent) => parent.id === rootId); }
+
+async function refreshTree() {
+  const { nodes } = await client.tree();
+  rebuildTree(nodes);
+  renderSidebar();
+  renderOutline();
+}
+
+function renderSidebar() {
+  $('#needsCount').textContent = state.nodes.filter((node) => node.status === 'outstanding').length;
+  $('#teamCount').textContent = state.nodes.filter((node) => node.status === 'waiting_on_team').length;
+  $('#deferredCount').textContent = state.nodes.filter((node) => node.status === 'deferred').length;
+}
+
+function renderOutline() {
+  const zoomed = state.view === 'outline' ? state.byId.get(state.zoomId) : null;
+  const labels = { outline:['OUTLINE',zoomed?.title || 'Everything'], outstanding:['INBOX','Needs your answer'], waiting_on_team:['OUTBOUND','Waiting on team'], deferred:['LATER','Deferred'] };
+  $('#viewEyebrow').textContent = labels[state.view][0];
+  $('#viewTitle').textContent = labels[state.view][1];
+  const crumbs = zoomed ? [...ancestorsOf(zoomed.id),zoomed] : [];
+  $('#outlineCrumbs').innerHTML = `<button data-zoom="">Home</button>${crumbs.map((node) => `<span>›</span><button data-zoom="${esc(node.id)}">${esc(node.title)}</button>`).join('')}`;
+  $$('[data-zoom]', $('#outlineCrumbs')).forEach((button) => button.addEventListener('click', () => zoom(button.dataset.zoom || null)));
+  const query = state.query.toLowerCase();
+  let html;
+  if (state.view !== 'outline' || query) {
+    const nodes = state.nodes.filter((node) => (state.view !== 'outline' || inBranch(node,state.zoomId)) && (state.view === 'outline' || node.status === state.view) && (!query || [node.title,node.author.name].join(' ').toLowerCase().includes(query)));
+    html = nodes.map((node) => `<div class="outline-context">${esc(ancestorsOf(node.id).map((parent) => parent.title).join(' › '))}</div>${outlineRow(node,0,false)}`).join('');
+  } else {
+    const roots = childrenOf(state.zoomId);
+    const stack = [...roots].reverse().map((node) => ({node,depth:0}));
+    const rows = [];
+    while (stack.length) {
+      const {node,depth} = stack.pop();
+      rows.push(outlineRow(node,depth,true));
+      if (state.expanded.has(node.id)) for (const child of [...childrenOf(node.id)].reverse()) stack.push({node:child,depth:depth+1});
+    }
+    html = rows.join('');
+  }
+  $('#threadList').innerHTML = html || '<div class="empty-list">No items in this view.<br>You can add a thread at any depth.</div>';
+  $$('.outline-row').forEach((row) => row.style.setProperty('--depth',row.dataset.depth));
+  $$('[data-select]').forEach((button) => button.addEventListener('click', () => openNode(button.dataset.select)));
+  $$('[data-expand]').forEach((button) => button.addEventListener('click', () => { const id = button.dataset.expand; state.expanded.has(id) ? state.expanded.delete(id) : state.expanded.add(id); renderOutline(); }));
+  $$('[data-bullet]').forEach((button) => button.addEventListener('click', () => zoom(button.dataset.bullet)));
+  $$('[data-add-child]').forEach((button) => button.addEventListener('click', () => showPublish(button.dataset.addChild)));
+}
+
+function outlineRow(node,depth,tree) {
+  const kids = childrenOf(node.id);
+  const isExpanded = state.expanded.has(node.id);
+  return `<div class="outline-row ${node.id === state.selected?.node.id ? 'selected' : ''}" data-depth="${Math.min(depth,30)}">
+    <button class="outline-toggle ${kids.length ? '' : 'no-children'}" data-expand="${esc(node.id)}" aria-label="${isExpanded ? 'Collapse' : 'Expand'} ${esc(node.title)}">${tree && isExpanded ? '⌄' : '›'}</button>
+    <button class="outline-bullet" data-bullet="${esc(node.id)}" title="Zoom into this thread" aria-label="Zoom into ${esc(node.title)}">•</button>
+    <button class="outline-title" data-select="${esc(node.id)}"><span>${esc(node.title)}</span>${node.status ? `<small class="outline-state ${esc(node.status)}">${esc(statusLabels[node.status] || node.status)}</small>` : ''}</button>
+    <button class="outline-add" data-add-child="${esc(node.id)}" title="Add a child thread" aria-label="Branch from ${esc(node.title)}">＋</button>
+  </div>`;
+}
+
+function zoom(id) {
+  state.zoomId = id;
+  state.view = 'outline';
+  $$('.nav-item').forEach((button) => button.classList.toggle('active',button.dataset.view === 'outline'));
+  renderSidebar(); renderOutline();
+  if (id) openNode(id);
+}
+
+async function openNode(id,{navigate=true}={}) {
+  const generation = ++state.readGeneration;
+  state.readingId = id;
+  try {
+    const result = await client.read(id);
+    if (generation !== state.readGeneration) return;
+    state.selected = result;
+    for (const ancestor of result.ancestors) state.expanded.add(ancestor.id);
+    const path = threadPath(id);
+    if (navigate && location.pathname !== path) history.pushState({id},'',path);
+    renderOutline(); renderRoom(result);
+  } catch (error) { toast(error.message,true); }
+  finally { if (generation === state.readGeneration) state.readingId = null; }
+}
+
+function renderRoom(result) {
+  cleanupCanvas();
+  const {node,ancestors,children,counts} = result;
+  const draft = draftFor(node.id);
+  $('#threadRoom').scrollTop = 0;
+  $('#threadRoom').innerHTML = `
+    <header class="room-header"><div class="room-title-row"><span class="room-author">${esc(initials(node.author.name))}</span><div><div class="room-breadcrumbs"><button data-room-zoom="">Home</button>${ancestors.map((parent) => `<span>›</span><button data-room-zoom="${esc(parent.id)}">${esc(parent.title)}</button>`).join('')}</div><h1>${esc(node.title)}</h1><div class="room-meta">${esc(node.author.name)}${node.author.role ? ` · ${esc(node.author.role)}` : ''} · ${time(node.createdAt)}</div></div></div><div class="room-actions"><button class="room-action" id="copyLinkButton">Copy link</button><button class="room-action primary" id="branchButton">＋ Branch here</button></div></header>
+    <div class="room-content node-content">
+      <div class="node-heading"><span class="node-context">${esc(nodeContext(node))}</span><span id="selectedStatus">${statusChip(node.status)}</span></div>
+      ${node.body ? `<p class="node-body">${esc(node.body)}</p>` : ''}
+      ${node.response ? renderSavedValues(node.response.selections) : ''}
+      <div class="node-canvas" id="nodeCanvas"></div>
+      <div class="conversation-label">INSIDE THIS THREAD <span id="childCount">${children.length}</span></div>
+      <div id="childThreads">${renderChildren(children)}</div>
+      <div class="trusted-response" id="trustedResponse">
+        <div class="trusted-heading"><span>▣ THREADROOM RESPONSE</span><small>Always available · outside the authored canvas</small></div>
+        <div class="composer">
+          <div class="composer-modes">${[['answer','Answer with text'],['clarification','Ask back'],['defer','Defer'],['reject','Reject with reason']].map(([kind,label]) => `<button class="mode-button ${draft.kind === kind ? 'active' : ''}" data-mode="${kind}">${label}</button>`).join('')}</div>
+          <div class="proposal-summary" id="proposalSummary">${proposalSummary(draft.proposal)}</div>
+          <textarea id="responseBody" aria-label="Written response" placeholder="Answer in your own words. You never have to use the author’s proposed controls.">${esc(draft.body)}</textarea>
+          <details class="authoring-details response-authoring"><summary>Include an authored answer canvas</summary><label>Self-contained HTML/CSS/JS<textarea id="responseHtml" aria-label="Answer canvas HTML" rows="4">${esc(draft.html)}</textarea></label><label>Readable fallback<textarea id="responseFallback" aria-label="Answer canvas readable fallback" rows="2">${esc(draft.fallback)}</textarea></label></details>
+          <div class="composer-footer"><span class="draft-state" id="draftState">${draft.body || draft.proposal ? 'Unsaved draft kept in this browser' : 'Your text answer / rejection cannot be overridden'}</span><button class="submit-response" id="saveResponseButton" ${state.saving.has(node.id) ? 'disabled' : ''}>${state.saving.has(node.id) ? 'Saving…' : 'Save response →'}</button></div>
+        </div>
+      </div>
+      <p class="node-footnote">${counts.outstanding} awaiting human input · ${counts.waitingOnTeam} waiting on team · ${counts.deferred} deferred in this branch. You can branch from any thread.</p>
+    </div>`;
+  $$('[data-room-zoom]').forEach((button) => button.addEventListener('click',() => zoom(button.dataset.roomZoom || null)));
+  $('#copyLinkButton').addEventListener('click',async () => { try { await navigator.clipboard.writeText(location.href); toast('Thread link copied'); } catch { toast('Copy the address from the browser'); } });
+  $('#branchButton').addEventListener('click',() => showPublish(node.id));
+  bindChildren();
+  cleanupCanvas = mountPresentation($('#nodeCanvas'), { node, apiBaseUrl:client.baseUrl, onProposal:(proposal) => {
+    const current = draftFor(node.id);
+    current.proposal = proposal;
+    keepDraft(node.id,current);
+    if (state.selected?.node.id === node.id) { $('#proposalSummary').innerHTML = proposalSummary(proposal); $('#draftState').textContent = 'Canvas values proposed—not saved until you submit here'; }
+  }});
+  $$('.mode-button').forEach((button) => button.addEventListener('click',() => {
+    draft.kind = button.dataset.mode;
+    $$('.mode-button').forEach((other) => other.classList.toggle('active',other === button));
+    $('#responseBody').placeholder = draft.kind === 'reject' ? 'Explain why you reject the premise or direction…' : draft.kind === 'clarification' ? 'What do you need the team to clarify?' : draft.kind === 'defer' ? 'Optional: when or what should bring this back?' : 'Answer in your own words…';
+    keepDraft(node.id,draft);
+  }));
+  const updateDraft = () => {
+    draft.body = $('#responseBody').value; draft.html = $('#responseHtml').value; draft.fallback = $('#responseFallback').value;
+    keepDraft(node.id,draft); $('#draftState').textContent = 'Unsaved draft kept in this browser';
+  };
+  ['#responseBody','#responseHtml','#responseFallback'].forEach((selector) => $(selector).addEventListener('input',updateDraft));
+  $('#saveResponseButton').addEventListener('click',() => saveResponse(node.id));
+}
+
+function renderChildren(children) {
+  if (!children.length) return '<p class="children-empty">Nothing nested here yet. Reply below or branch here.</p>';
+  return children.map((child) => `<article class="child-thread">
+    <div class="child-top"><span class="author-avatar">${esc(initials(child.author.name))}</span><span class="thread-author">${esc(child.author.name)}</span>${nodeContext(child) ? `<span class="node-context">${esc(nodeContext(child))}</span>` : ''}<span class="response-time">${time(child.createdAt)}</span>${statusChip(child.status)}</div>
+    <button class="child-title" data-open-child="${esc(child.id)}">${esc(child.title)} <span>↗</span></button>
+    ${child.body ? `<p class="child-body">${esc(child.body)}</p>` : ''}
+    ${child.response ? renderSavedValues(child.response.selections) : ''}
+    ${child.presentation ? `<span class="child-artifact">${child.presentation.kind === 'html-v1' ? 'Authored interactive canvas + readable record' : 'Review presentation'} · ${esc(child.presentation.revision)}</span>` : ''}
+    <div class="child-actions"><button data-open-child="${esc(child.id)}">Open / zoom</button><button data-branch-child="${esc(child.id)}">＋ Branch here</button></div>
+  </article>`).join('');
+}
+function bindChildren() {
+  $$('[data-open-child]').forEach((button) => button.addEventListener('click',() => zoom(button.dataset.openChild)));
+  $$('[data-branch-child]').forEach((button) => button.addEventListener('click',() => showPublish(button.dataset.branchChild)));
+}
+function nodeContext(node) {
+  return [node.expectsAnswer ? 'Answer requested' : '', node.response ? responseLabels[node.response.kind] || 'Saved response' : ''].filter(Boolean).join(' · ');
+}
+const statusChip = (status) => status ? `<span class="status-chip ${esc(status)}">${statusLabels[status] || esc(status)}</span>` : '';
+function renderSavedValues(selections=[]) {
+  return selections.map((selection) => {
+    // Images stay in image context (SVG cannot execute as an <img> document).
+    // Recognize captures without exposing encoded image bytes as readable notes.
+    const captures = ['questionImage','image','snapshot'].filter((key) => {
+      const value = selection.value?.[key];
+      return typeof value === 'string' && /^data:image\/(png|jpeg|webp|gif|svg\+xml)(?:;[^,]*)?,/i.test(value);
+    });
+    const readable = captures.length ? {...selection.value} : selection.value;
+    for (const key of captures) readable[key] = '[Captured image shown above]';
+    const images = captures.map((key) => `<img class="saved-generation" src="${esc(selection.value[key])}" alt="${key === 'questionImage' ? 'Captured question reference' : 'Captured visual answer'}">`).join('');
+    const notes = typeof selection.value?.notes === 'string' && selection.value.notes.trim() ? `<p>${esc(selection.value.notes)}</p>` : '';
+    return `<div class="saved-values"><strong>${esc(selection.label || selection.id || 'Interaction values')}</strong>${images}${notes}${readable != null ? `<pre>${esc(JSON.stringify(readable,null,2).slice(0,3000))}</pre>` : ''}</div>`;
+  }).join('');
+}
+function proposalSummary(proposal) {
+  return proposal ? `<strong>Unsaved canvas proposal</strong><span>${esc(proposal.summary || JSON.stringify(proposal.values).slice(0,300))}</span><small>Only the Threadroom Save button records this.</small>` : '';
+}
+function draftFor(id) {
+  if (state.drafts.has(id)) return state.drafts.get(id);
+  let saved = {};
+  try { saved = JSON.parse(localStorage.getItem(`threadroom:node-draft:${id}`) || '{}'); } catch {}
+  const draft = { kind:'answer', body:'', html:'', fallback:'', proposal:null, ...saved };
+  state.drafts.set(id,draft); return draft;
+}
+function keepDraft(id,draft) {
+  state.drafts.set(id,draft);
+  try { localStorage.setItem(`threadroom:node-draft:${id}`,JSON.stringify(draft)); } catch { toast('Draft remains on this page; browser storage is full',true); }
+}
+
+function responsePayload(draft) {
+  return {
+    kind:draft.kind, body:draft.body, author:{name:'Scott'},
+    selections:draft.proposal && draft.kind !== 'reject' ? [{id:'authored-values',label:draft.proposal.summary || 'Canvas interaction',value:draft.proposal.values}] : [],
+    ...(draft.html ? {presentation:{kind:'html-v1',html:draft.html,fallback:draft.fallback}} : {})
+  };
+}
+async function saveResponse(id) {
+  if (state.saving.has(id)) return;
+  const draft = draftFor(id);
+  const payload = responsePayload(draft);
+  const serialized = JSON.stringify(payload);
+  if (draft.attempt?.payload !== serialized) draft.attempt = {key:crypto.randomUUID(),payload:serialized};
+  const attempt = draft.attempt;
+  state.saving.set(id,attempt);
+  keepDraft(id,draft);
+  const button = $('#saveResponseButton'); button.disabled = true; button.textContent = 'Saving…';
+  try {
+    await client.respond(id,payload,attempt.key);
+  } catch (error) {
+    state.saving.delete(id);
+    if (state.selected?.node.id === id) { const currentButton = $('#saveResponseButton'); currentButton.disabled = false; currentButton.textContent = 'Retry save →'; }
+    toast(`${error.message}. Your draft is still here.`,true);
+    return;
+  }
+  state.saving.delete(id);
+  const currentDraft = draftFor(id);
+  const hasNewerDraft = JSON.stringify(responsePayload(currentDraft)) !== serialized;
+  let draftCleanupFailed = false;
+  if (hasNewerDraft) { currentDraft.attempt = null; keepDraft(id,currentDraft); }
+  else {
+    state.drafts.delete(id);
+    // Browser storage is an optional draft convenience. Once the server has
+    // committed the response, a storage policy/quota failure must not interrupt
+    // the visible success path or resurrect the submitted draft on re-render.
+    try { localStorage.removeItem(`threadroom:node-draft:${id}`); }
+    catch {
+      draftCleanupFailed = true;
+      state.drafts.set(id,{kind:'answer',body:'',html:'',fallback:'',proposal:null});
+    }
+  }
+  // A committed save never owns navigation or edits made after the submitted snapshot.
+  if (state.selected?.node.id === id) {
+    const currentButton = $('#saveResponseButton'); currentButton.disabled = false;
+    currentButton.textContent = hasNewerDraft ? 'Save newer draft →' : 'Save response →';
+    $('#draftState').textContent = hasNewerDraft ? 'Submitted snapshot saved; newer draft is still unsaved' : 'Response saved to history';
+    if (!hasNewerDraft) {
+      // Returning to this node while its save was in flight renders the submitted
+      // draft again. Clear that visible composer locally without incrementing the
+      // read generation: a slower navigation to another node may already be in
+      // flight and must retain ownership. Refresh saved history only when idle.
+      renderRoom(state.selected);
+      if (state.readingId === null) await openNode(id,{navigate:false});
+    }
+  }
+  try {
+    await refreshTree();
+    toast(draftCleanupFailed
+      ? 'Response saved, but the stale browser draft could not be removed. This page will keep it cleared; check browser storage before reloading.'
+      : hasNewerDraft ? 'Submitted response saved. Your newer draft was kept.' : 'Saved. Your response is in this branch.', draftCleanupFailed);
+  } catch {
+    toast(draftCleanupFailed
+      ? 'Response saved, but browser draft cleanup failed and the outline will catch up when reconnected.'
+      : 'Response saved. Outline will catch up when reconnected.', draftCleanupFailed);
+  }
+}
+
+function showPublish(parentId) {
+  state.dialogParentId = parentId || null;
+  const parent = state.byId.get(parentId);
+  $('#publishContext').textContent = parent ? `Inside: ${[...ancestorsOf(parentId),parent].map((node) => node.title).join(' › ')}` : 'In Everything';
+  $('#newThreadDialog').showModal();
+}
+$('#newThreadForm').addEventListener('submit',async (event) => {
+  event.preventDefault(); if (event.submitter?.value === 'cancel') return $('#newThreadDialog').close();
+  const form = event.currentTarget; const data = new FormData(form);
+  const payload = { parentId:state.dialogParentId, title:data.get('title'), body:data.get('body'), expectsAnswer:data.has('expectsAnswer'), author:{name:'Scott'},
+    ...(data.get('html') ? {presentation:{kind:'html-v1',html:data.get('html'),fallback:data.get('fallback')}} : {}) };
+  const serialized = JSON.stringify(payload);
+  if (state.publishAttempt?.payload !== serialized) state.publishAttempt = {key:crypto.randomUUID(),payload:serialized};
+  let result;
+  try { result = await client.publish(payload,state.publishAttempt.key); }
+  catch (error) { toast(`${error.message}. The form is retained for retry.`,true); return; }
+  state.publishAttempt = null;
+  $('#newThreadDialog').close(); form.reset();
+  const updated = new Map(state.nodes.map((node) => [node.id,node]));
+  for (const node of [...result.ancestors,result.node,...result.children]) updated.set(node.id,{...updated.get(node.id),...node});
+  rebuildTree([...updated.values()]);
+  for (const ancestor of result.ancestors) state.expanded.add(ancestor.id);
+  if (!result.node.parentId) state.zoomId = null;
+  ++state.readGeneration;
+  state.readingId = null;
+  state.selected = result;
+  history.pushState({id:result.node.id},'',threadPath(result.node.id));
+  renderSidebar(); renderOutline(); renderRoom(result);
+  toast('Node added here');
+});
+$('#newThreadButton').addEventListener('click',() => showPublish(state.zoomId));
+$('#addInBranch').addEventListener('click',() => showPublish(state.zoomId));
+$('#outlineUp').addEventListener('click',() => zoom(state.byId.get(state.zoomId)?.parentId || null));
+$('#searchInput').addEventListener('input',(event) => { state.query = event.target.value; renderOutline(); });
+$('#refreshButton').addEventListener('click',async () => { try { await refreshTree(); if (state.selected) await openNode(state.selected.node.id,{navigate:false}); toast('Caught up with saved history'); } catch (error) { toast(error.message,true); } });
+// Sidebar views are global; an outline zoom must not hide incoming questions in another branch.
+$$('.nav-item').forEach((button) => button.addEventListener('click',() => { state.view = button.dataset.view; state.zoomId = null; $$('.nav-item').forEach((other) => other.classList.toggle('active',other === button)); renderOutline(); }));
+window.addEventListener('popstate',() => { const id = threadIdFromPath(location.pathname); if (id) openNode(id,{navigate:false}); });
+function toast(message,error=false) {
+  const element = $('#toast'); element.textContent = message; element.classList.toggle('error',error); element.classList.add('show'); clearTimeout(toast.timer); toast.timer = setTimeout(() => element.classList.remove('show'),3500);
+}
+let eventTimer;
+async function catchUp() {
+  try {
+    await refreshTree();
+    const id = state.selected?.node.id;
+    if (id) {
+      const result = await client.read(id);
+      if (state.selected?.node.id !== id) return;
+      state.selected = result;
+      $('#selectedStatus').innerHTML = statusChip(result.node.status);
+      $('#childCount').textContent = result.children.length;
+      $('#childThreads').innerHTML = renderChildren(result.children);
+      bindChildren();
+    }
+  } catch { /* EventSource owns reconnection; a manual refresh stays available. */ }
+}
+async function start() {
+  const config = await fetch('/threadroom-config.json').then((response) => response.json());
+  client = new ThreadroomClient(config.apiBaseUrl);
+  await refreshTree();
+  const pathId = threadIdFromPath(location.pathname);
+  const id = pathId && state.byId.has(pathId) ? pathId : state.nodes.find((node) => node.id === 'q_silhouette')?.id || childrenOf(null)[0]?.id;
+  for (const root of childrenOf(null)) state.expanded.add(root.id);
+  if (id) await openNode(id);
+  client.subscribe(() => { clearTimeout(eventTimer); eventTimer = setTimeout(catchUp,60); }, {onState:(connection) => {
+    $('#connectionLabel').textContent = connection === 'live' ? 'Live updates · conversations outlast sessions' : 'Reconnecting · saved history stays in the backend';
+    $('#connectionDot').classList.toggle('disconnected',connection !== 'live');
+  }});
+}
+start().catch((error) => { $('#threadRoom').innerHTML = `<div class="thread-loading">Could not connect to Threadroom.<br>${esc(error.message)}</div>`; toast(error.message,true); });

package/node_modules/threadroom-service/dist/public/assets/mist-bloom.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 460" role="img" aria-labelledby="title desc">
+  <title id="title">The Bloom</title><desc id="desc">A radial mist creature opening like a many-petaled flower</desc>
+  <defs><radialGradient id="bg"><stop stop-color="#34423f"/><stop offset="1" stop-color="#10191e"/></radialGradient><filter id="glow"><feGaussianBlur stdDeviation="10"/></filter></defs>
+  <rect width="640" height="460" fill="url(#bg)"/>
+  <g transform="translate(334 253)" fill="#122021" stroke="#bad9c7" stroke-width="3">
+    <path d="M0 0 C-45 -53 -66 -122 -24 -181 C-8 -126 35 -87 0 0Z"/>
+    <path d="M0 0 C28 -64 81 -113 151 -105 C113 -63 101 -6 0 0Z"/>
+    <path d="M0 0 C69 -5 138 17 160 83 C105 65 52 86 0 0Z"/>
+    <path d="M0 0 C44 54 63 124 18 180 C4 124 -37 83 0 0Z"/>
+    <path d="M0 0 C-29 64 -84 111 -153 100 C-113 60 -99 2 0 0Z"/>
+    <path d="M0 0 C-69 3 -137 -21 -156 -88 C-102 -68 -48 -88 0 0Z"/>
+    <circle r="54" fill="#172728"/><circle r="18" fill="#a8cdb8" opacity=".8"/>
+  </g>
+  <circle cx="334" cy="253" r="108" fill="none" stroke="#bbd7c3" stroke-width="35" opacity=".09" filter="url(#glow)"/>
+  <g fill="#dcebdd" opacity=".35"><circle cx="120" cy="318" r="3"/><circle cx="178" cy="112" r="5"/><circle cx="531" cy="182" r="4"/><circle cx="554" cy="356" r="3"/><circle cx="80" cy="217" r="2"/></g>
+  <text x="32" y="46" fill="#e4f1e9" font-family="system-ui" font-size="18" letter-spacing="3">SILHOUETTE STUDY C</text>
+</svg>

package/node_modules/threadroom-service/dist/public/assets/mist-drift.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 460" role="img" aria-labelledby="title desc">
+  <title id="title">The Drift</title><desc id="desc">A tall, narrow mist creature with a long flowing wake</desc>
+  <defs><radialGradient id="bg" cx="42%" cy="38%" r="80%"><stop stop-color="#32424a"/><stop offset="1" stop-color="#10191e"/></radialGradient><filter id="blur"><feGaussianBlur stdDeviation="12"/></filter></defs>
+  <rect width="640" height="460" fill="url(#bg)"/><circle cx="480" cy="88" r="92" fill="#b9dbc9" opacity=".08"/>
+  <g fill="none" stroke="#9ccab9" stroke-linecap="round">
+    <path d="M314 62 C278 132 278 199 307 254 C326 292 278 343 222 414" stroke-width="64" opacity=".15" filter="url(#blur)"/>
+    <path d="M323 58 C287 124 289 197 317 249 C340 291 294 346 240 416" stroke-width="22" opacity=".78"/>
+    <path d="M305 132 C260 178 243 235 255 292" stroke-width="9" opacity=".53"/>
+    <path d="M336 139 C388 196 392 248 371 305" stroke-width="11" opacity=".44"/>
+    <path d="M319 252 C375 307 390 361 362 428" stroke-width="7" opacity=".35"/>
+  </g>
+  <ellipse cx="319" cy="104" rx="31" ry="49" fill="#152329" stroke="#b7dfca" stroke-width="3"/>
+  <circle cx="309" cy="98" r="4" fill="#e7ffdf"/><circle cx="329" cy="98" r="4" fill="#e7ffdf"/>
+  <path d="M70 377 C177 331 217 370 288 344 C388 307 466 347 570 310" fill="none" stroke="#d4eadb" opacity=".11" stroke-width="24" filter="url(#blur)"/>
+  <text x="32" y="46" fill="#e4f1e9" font-family="system-ui" font-size="18" letter-spacing="3">SILHOUETTE STUDY A</text>
+</svg>

package/node_modules/threadroom-service/dist/public/assets/mist-prowler.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 460" role="img" aria-labelledby="title desc">
+  <title id="title">The Prowler</title><desc id="desc">A wide crouched mist creature with forward-reaching limbs</desc>
+  <defs><radialGradient id="bg" cx="48%" cy="58%" r="82%"><stop stop-color="#3d4d4a"/><stop offset="1" stop-color="#10191e"/></radialGradient><filter id="blur"><feGaussianBlur stdDeviation="15"/></filter></defs>
+  <rect width="640" height="460" fill="url(#bg)"/><circle cx="138" cy="96" r="105" fill="#d8bc83" opacity=".07"/>
+  <g fill="#101b1d" stroke="#b8d2bd" stroke-linejoin="round">
+    <path d="M176 278 C218 181 350 160 430 221 C466 248 488 292 477 320 C425 292 377 289 334 304 C272 327 217 320 176 278Z" stroke-width="4"/>
+    <path d="M204 287 C159 302 119 342 78 406 C149 379 207 350 263 315Z" stroke-width="8"/>
+    <path d="M389 291 C454 303 512 339 581 402 C500 378 434 355 347 317Z" stroke-width="8"/>
+    <path d="M411 222 C444 170 470 128 474 76 C513 143 516 203 481 257Z" stroke-width="3"/>
+  </g>
+  <path d="M156 285 C254 181 393 167 486 278" fill="none" stroke="#b7d7c2" stroke-width="42" opacity=".13" filter="url(#blur)"/>
+  <g fill="#f0f7d8"><circle cx="417" cy="231" r="6"/><circle cx="442" cy="239" r="4"/></g>
+  <g fill="none" stroke="#98bfa9" opacity=".38" stroke-linecap="round"><path d="M185 240 C133 218 97 230 56 261" stroke-width="12"/><path d="M228 206 C169 157 116 163 66 182" stroke-width="7"/><path d="M475 286 C532 278 566 296 609 332" stroke-width="9"/></g>
+  <text x="32" y="46" fill="#e4f1e9" font-family="system-ui" font-size="18" letter-spacing="3">SILHOUETTE STUDY B</text>
+</svg>

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

@@ -0,0 +1,30 @@
+// A UI-independent HTTP client. Persistence, hierarchy, and lifecycle are service concerns.
+export class ThreadroomClient {
+  constructor(baseUrl = '') { this.baseUrl = baseUrl.replace(/\/$/, ''); }
+  url(path) { return `${this.baseUrl}${path}`; }
+  async request(path, options = {}) {
+    const response = await fetch(this.url(path), { ...options,
+      headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
+    const result = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`);
+    return result;
+  }
+  tree() { return this.request('/api/tree'); }
+  read(id) { return this.request(`/api/nodes/${encodeURIComponent(id)}`); }
+  publish(input, key) { return this.request('/api/nodes', { method: 'POST',
+    headers: key ? { 'Idempotency-Key': key } : {}, body: JSON.stringify(input) }); }
+  ask(input, key) { return this.request('/api/ask', { method: 'POST',
+    headers: key ? { 'Idempotency-Key': key } : {}, body: JSON.stringify(input) }); }
+  respond(id, input, key) { return this.request(`/api/nodes/${encodeURIComponent(id)}/respond`, { method: 'POST',
+    headers: key ? { 'Idempotency-Key': key } : {}, body: JSON.stringify(input) }); }
+  reply(id, input, key) { return this.respond(id, input, key); }
+  subscribe(onEvent, { after = 0, onState = () => {} } = {}) {
+    const stream = new EventSource(this.url(`/api/stream?after=${after}`));
+    stream.addEventListener('open', () => onState('live'));
+    stream.addEventListener('error', () => onState('reconnecting'));
+    stream.addEventListener('change', (event) => {
+      try { onEvent(JSON.parse(event.data)); } catch (error) { console.error('Bad Threadroom event:', error); }
+    });
+    return () => stream.close();
+  }
+}

package/node_modules/threadroom-service/dist/public/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#f4f3ee">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23315d49' stroke-width='3'/%3E%3Cpath d='M8 16h16M16 8v16' stroke='%23315d49' stroke-width='2'/%3E%3C/svg%3E">
+  <title>Threadroom</title>
+  <link rel="stylesheet" href="/styles.css">
+  <script type="module" src="/app.js"></script>
+</head>
+<body>
+  <div class="app-shell">
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="Threadroom home"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>Threadroom</span></a>
+      <div class="topbar-center"><span class="live-dot" id="connectionDot"></span><span id="connectionLabel">Connecting to the conversation service</span><span class="spike-label">LOCAL SPIKE</span></div>
+      <div class="topbar-actions"><button class="icon-button" id="refreshButton" aria-label="Refresh threads">↻</button><button class="button button-dark" id="newThreadButton">＋ Add node</button><div class="avatar" title="Scott">SM</div></div>
+    </header>
+    <main class="workspace">
+      <aside class="sidebar">
+        <nav aria-label="Thread views">
+          <p class="nav-label">Workspace</p>
+          <button class="nav-item active" data-view="outline"><span class="nav-icon">≡</span><span>Everything</span></button>
+          <button class="nav-item" data-view="outstanding"><span class="nav-icon">◇</span><span>Needs your answer</span><b id="needsCount">0</b></button>
+          <button class="nav-item" data-view="waiting_on_team"><span class="nav-icon">↗</span><span>Waiting on team</span><b id="teamCount">0</b></button>
+          <button class="nav-item" data-view="deferred"><span class="nav-icon">◷</span><span>Deferred</span><b id="deferredCount">0</b></button>
+        </nav>
+        <div class="outline-guide"><strong>No fixed levels.</strong><p>Expand with the chevron.<br>Zoom with the bullet.<br>Branch from any thread.</p></div>
+        <footer class="sidebar-footer"><span class="persistence-icon">▣</span><span><strong>Backend owns the record</strong><small>Independent HTTP API + live stream</small></span><span class="status-light"></span></footer>
+      </aside>
+      <section class="thread-index" aria-label="Recursive thread outline">
+        <div class="index-heading"><div><p class="eyebrow" id="viewEyebrow">OUTLINE</p><h1 id="viewTitle">Everything</h1></div><button class="filter-button" id="outlineUp" title="Zoom out" aria-label="Zoom out">↑</button></div>
+        <div class="outline-crumbs" id="outlineCrumbs"></div>
+        <label class="search-box"><span>⌕</span><input id="searchInput" type="search" aria-label="Search threads" placeholder="Search this branch" autocomplete="off"></label>
+        <div class="thread-list outline-list" id="threadList"></div>
+        <div class="outline-bottom"><button id="addInBranch" class="button button-ghost">＋ Add here</button><span>Every item can have children</span></div>
+      </section>
+      <section class="thread-room" id="threadRoom" aria-live="polite"><div class="thread-loading"><span class="spinner"></span>Opening the conversation…</div></section>
+    </main>
+  </div>
+  <dialog id="newThreadDialog">
+    <form method="dialog" class="dialog-card" id="newThreadForm">
+      <div class="dialog-heading"><div><p class="eyebrow">ONE CALL, ANY DEPTH</p><h2>Add a node</h2></div><button class="dialog-close" value="cancel" formnovalidate aria-label="Close">×</button></div>
+      <p class="dialog-copy" id="publishContext">In Everything</p>
+      <label>Title<input name="title" placeholder="What belongs in this branch?" required></label>
+      <label>Content<textarea name="body" rows="4" placeholder="Whatever context you want to bring"></textarea></label>
+      <label class="checkbox-label"><input type="checkbox" name="expectsAnswer"> Ask for an answer</label>
+      <details class="authoring-details"><summary>Author an interactive canvas</summary><label>Self-contained HTML/CSS/JS<textarea name="html" rows="5" placeholder="AIs can publish any authored document through the API"></textarea></label><label>Readable historical fallback<textarea name="fallback" rows="2" placeholder="Explain what this document shows without needing its scripts"></textarea></label></details>
+      <div class="dialog-actions"><button class="button button-ghost" value="cancel" formnovalidate>Cancel</button><button class="button button-dark" value="default">Publish</button></div>
+    </form>
+  </dialog>
+  <div class="toast" id="toast" role="status"></div>
+</body>
+</html>