llm-canvas-linux-x64 0.1.0

package/workspace/app.js

@@ -0,0 +1,727 @@
+// Canvas workspace client.
+// Responsibilities:
+//   - List sessions in the sidebar.
+//   - Render the selected session's sections (inline elements injected; document form as iframe).
+//   - Listen to WebSocket events: section.updated, section.deleted, section.focus, session.created.
+//   - On section.updated, re-fetch and swap the single section node in place.
+
+import { initComments, attachIframeComments } from './comments.js';
+
+const INBOX_RAIL_COLLAPSED_KEY = 'canvas.inboxRail.collapsed';
+const SIDEBAR_COLLAPSED_KEY = 'canvas.sidebar.collapsed';
+const ZOOM_KEY = 'canvas.sections.zoom';
+const THEME_KEY = 'canvas.theme';
+const ZOOM_STEPS = [0.5, 0.67, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
+
+const state = {
+  sessions: [],
+  currentSlug: null,
+  sections: [], // [{ id, title, order, mode, version }]
+  ws: null,
+  wsConnected: false,
+  inbox: [], // raw InboxEvent[] for the current session
+  inboxRailCollapsed: localStorage.getItem(INBOX_RAIL_COLLAPSED_KEY) === 'true',
+  inboxDrawerOpen: false,
+  sidebarCollapsed: localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true',
+  zoom: clampZoom(parseFloat(localStorage.getItem(ZOOM_KEY)) || 1),
+  theme: resolveInitialTheme(),
+};
+
+function resolveInitialTheme() {
+  const stored = localStorage.getItem(THEME_KEY);
+  if (stored === 'dark' || stored === 'light') return stored;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function clampZoom(z) {
+  if (!Number.isFinite(z)) return 1;
+  return Math.min(ZOOM_STEPS[ZOOM_STEPS.length - 1], Math.max(ZOOM_STEPS[0], z));
+}
+
+const $ = (sel) => document.querySelector(sel);
+const sectionsRoot = $('#sections');
+const empty = $('#empty');
+const sessionNav = $('#session-nav');
+const sessionTitle = $('#session-title');
+const sessionPurpose = $('#session-purpose');
+const connStatus = $('#connection');
+const sidebar = $('#sidebar');
+const sidebarSpine = $('#sidebar-spine');
+const sidebarCollapseBtn = $('#sidebar-collapse');
+const zoomOutBtn = $('#zoom-out');
+const zoomInBtn = $('#zoom-in');
+const zoomResetBtn = $('#zoom-reset');
+const themeToggle = $('#theme-toggle');
+const themeToggleIcon = themeToggle.querySelector('.theme-toggle-icon');
+const inboxRail = $('#inbox-rail');
+const inboxToggleTopbar = $('#inbox-toggle-topbar');
+const inboxTopbarBadge = $('#inbox-topbar-badge');
+const inboxBadge = $('#inbox-badge');
+const inboxSpine = $('#inbox-rail-spine');
+const inboxSpineBadge = $('#inbox-spine-badge');
+const inboxCollapseBtn = $('#inbox-collapse');
+const inboxDrawerClose = $('#inbox-drawer-close');
+const inboxBackdrop = $('#inbox-backdrop');
+const inboxThread = $('#inbox-thread');
+const inboxEmpty = $('#inbox-empty');
+const inboxTextarea = $('#inbox-text');
+const inboxSend = $('#inbox-send');
+const inboxCounter = $('#inbox-counter');
+const inboxError = $('#inbox-error');
+const INBOX_MAX_BYTES = 4096;
+
+async function api(path, opts) {
+  const res = await fetch(path, opts);
+  if (!res.ok) throw new Error(`${path}: ${res.status}`);
+  return res;
+}
+
+async function loadSessions() {
+  const res = await api('/api/sessions');
+  state.sessions = await res.json();
+  renderSidebar();
+  if (state.sessions.length === 0) {
+    empty.classList.remove('hidden');
+    sectionsRoot.classList.add('hidden');
+    inboxRail.classList.add('hidden');
+    inboxToggleTopbar.classList.add('hidden');
+    sessionTitle.textContent = 'Canvas';
+    sessionPurpose.textContent = 'No session';
+    return;
+  }
+  empty.classList.add('hidden');
+  sectionsRoot.classList.remove('hidden');
+
+  // Read /s/:slug from URL or default to most-recent.
+  const urlSlug = location.pathname.startsWith('/s/') ? location.pathname.slice(3) : null;
+  const target = urlSlug && state.sessions.find((s) => s.slug === urlSlug)
+    ? urlSlug
+    : state.sessions[0].slug;
+  await selectSession(target);
+}
+
+function renderSidebar() {
+  sessionNav.innerHTML = '';
+  for (const s of state.sessions) {
+    const el = document.createElement('div');
+    el.className = 'nav-session';
+    el.textContent = s.title;
+    el.dataset.slug = s.slug;
+    if (s.slug === state.currentSlug) el.dataset.active = 'true';
+    el.addEventListener('click', () => selectSession(s.slug));
+    sessionNav.appendChild(el);
+
+    if (s.slug === state.currentSlug) {
+      const sectionList = document.createElement('div');
+      sectionList.className = 'mt-1 mb-2 space-y-0.5';
+      for (const sec of state.sections) {
+        const a = document.createElement('a');
+        a.className = 'nav-section';
+        a.textContent = sec.title;
+        a.href = `#section-${sec.id}`;
+        a.dataset.id = sec.id;
+        a.addEventListener('click', (e) => {
+          e.preventDefault();
+          focusLocally(sec.id);
+        });
+        sectionList.appendChild(a);
+      }
+      sessionNav.appendChild(sectionList);
+    }
+  }
+}
+
+async function selectSession(slug) {
+  state.currentSlug = slug;
+  history.replaceState({}, '', `/s/${slug}`);
+  const session = state.sessions.find((s) => s.slug === slug);
+  sessionTitle.textContent = session?.title ?? slug;
+  sessionPurpose.textContent = session?.purpose || `Session · ${slug}`;
+
+  const res = await api(`/api/sessions/${slug}/sections`);
+  state.sections = await res.json();
+  renderSidebar();
+  sectionsRoot.innerHTML = '';
+  for (const meta of state.sections) {
+    await renderSection(meta);
+  }
+  inboxRail.classList.remove('hidden');
+  inboxToggleTopbar.classList.remove('hidden');
+  renderInboxLayout();
+  await loadInbox(slug);
+}
+
+let turndownService = null;
+function getTurndown() {
+  if (turndownService) return turndownService;
+  const td = new window.TurndownService({
+    headingStyle: 'atx',
+    codeBlockStyle: 'fenced',
+    bulletListMarker: '-',
+    emDelimiter: '*',
+  });
+  if (window.turndownPluginGfm) td.use(window.turndownPluginGfm.gfm);
+  // Mermaid source -> fenced ```mermaid block.
+  td.addRule('mermaid', {
+    filter: (node) => node.nodeName === 'DIV' && node.classList?.contains('mermaid'),
+    replacement: (_content, node) => `\n\n\`\`\`mermaid\n${node.textContent.trim()}\n\`\`\`\n\n`,
+  });
+  // Canvas callouts -> blockquote.
+  td.addRule('canvasCallout', {
+    filter: (node) => node.nodeName === 'DIV' && node.classList?.contains('canvas-callout'),
+    replacement: (content) =>
+      '\n\n' + content.trim().split('\n').map((l) => `> ${l}`.trimEnd()).join('\n') + '\n\n',
+  });
+  turndownService = td;
+  return td;
+}
+
+function flashCopied(btn, ok) {
+  const label = btn.querySelector('.section-copy-label');
+  label.textContent = ok ? 'Copied' : 'Failed';
+  btn.dataset.copied = 'true';
+  clearTimeout(btn._copyTimer);
+  btn._copyTimer = setTimeout(() => {
+    label.textContent = 'Copy';
+    delete btn.dataset.copied;
+  }, 1400);
+}
+
+async function copySectionMarkdown(meta, btn) {
+  try {
+    // Fetch the raw (pre-render) section HTML so mermaid source and code are clean.
+    const url = `/api/sessions/${state.currentSlug}/sections/${meta.id}.html?v=${Date.now()}`;
+    const res = await api(url);
+    const html = await res.text();
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const root = doc.querySelector('section[data-canvas-title], section') || doc.body;
+    const md = getTurndown().turndown(root.innerHTML).trim();
+    await navigator.clipboard.writeText(md);
+    flashCopied(btn, true);
+  } catch (err) {
+    console.warn('[canvas] section copy failed:', err);
+    flashCopied(btn, false);
+  }
+}
+
+async function renderSection(meta) {
+  const host = document.createElement('article');
+  host.id = `section-${meta.id}`;
+  host.dataset.sectionId = meta.id;
+  host.dataset.mode = meta.mode;
+  host.className = 'canvas-section-host';
+
+  const title = document.createElement('div');
+  title.className = 'canvas-section-title';
+  title.textContent = meta.title;
+  host.appendChild(title);
+
+  if (meta.mode !== 'document') {
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'section-copy-btn';
+    copyBtn.type = 'button';
+    copyBtn.title = 'Copy section as Markdown';
+    copyBtn.innerHTML = '<span aria-hidden="true">⧉</span><span class="section-copy-label">Copy</span>';
+    copyBtn.addEventListener('click', () => copySectionMarkdown(meta, copyBtn));
+    host.appendChild(copyBtn);
+  }
+
+  await populateSection(host, meta);
+  sectionsRoot.appendChild(host);
+}
+
+async function populateSection(host, meta) {
+  const url = `/api/sessions/${state.currentSlug}/sections/${meta.id}.html?v=${meta.version}`;
+  const res = await api(url);
+  const html = await res.text();
+
+  // Drop section content when re-populating, but keep the title chip and copy button.
+  Array.from(host.children).forEach((child) => {
+    const keep = child.classList?.contains('canvas-section-title')
+      || child.classList?.contains('section-copy-btn');
+    if (!keep) child.remove();
+  });
+
+  if (meta.mode === 'document') {
+    const iframe = document.createElement('iframe');
+    iframe.className = 'canvas-section-iframe';
+    iframe.addEventListener('load', () => {
+      themeIframe(iframe);
+      attachIframeComments(iframe, meta.id);
+    });
+    iframe.src = url;
+    host.appendChild(iframe);
+    return;
+  }
+
+  // Inline form: parse the file, extract the root <section>, append its children.
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const root = doc.querySelector('section[data-canvas-title], section');
+  if (!root) {
+    const err = document.createElement('div');
+    err.className = 'canvas-callout danger';
+    err.textContent = `Section "${meta.id}" missing <section data-canvas-title="…"> root.`;
+    host.appendChild(err);
+    return;
+  }
+  const body = document.createElement('div');
+  body.innerHTML = root.innerHTML;
+  host.appendChild(body);
+
+  // Mermaid render.
+  if (window.mermaid) {
+    window.mermaid.initialize({ startOnLoad: false, theme: mermaidTheme() });
+    body.querySelectorAll('.mermaid, .language-mermaid').forEach(async (node, idx) => {
+      try {
+        const code = node.textContent.trim();
+        const { svg } = await window.mermaid.render(`mermaid-${meta.id}-${idx}-${Date.now()}`, code);
+        const wrap = document.createElement('div');
+        wrap.dataset.mermaidSrc = code;
+        wrap.innerHTML = svg;
+        node.replaceWith(wrap);
+      } catch (err) {
+        console.warn(`[canvas] mermaid render failed in ${meta.id}:`, err);
+      }
+    });
+  }
+
+  // Code highlighting.
+  if (window.hljs) {
+    body.querySelectorAll('pre code').forEach((node) => {
+      try {
+        window.hljs.highlightElement(node);
+      } catch (err) {
+        console.warn(`[canvas] hljs failed for ${meta.id}:`, err);
+      }
+    });
+  }
+}
+
+async function refreshSection(slug, id) {
+  if (slug !== state.currentSlug) return;
+  // Re-fetch the section meta from /sections list (cheap; ~ms).
+  const listRes = await api(`/api/sessions/${slug}/sections`);
+  const list = await listRes.json();
+  state.sections = list;
+  renderSidebar();
+
+  const meta = list.find((s) => s.id === id);
+  if (!meta) {
+    const existing = document.getElementById(`section-${id}`);
+    existing?.remove();
+    return;
+  }
+
+  let host = document.getElementById(`section-${id}`);
+  if (!host) {
+    await renderSection(meta);
+    return;
+  }
+  host.dataset.mode = meta.mode;
+  host.querySelector('.canvas-section-title').textContent = meta.title;
+  await populateSection(host, meta);
+}
+
+function removeSection(slug, id) {
+  if (slug !== state.currentSlug) return;
+  document.getElementById(`section-${id}`)?.remove();
+  state.sections = state.sections.filter((s) => s.id !== id);
+  renderSidebar();
+}
+
+function focusLocally(id) {
+  document.querySelectorAll('[data-focused="true"]').forEach((n) => delete n.dataset.focused);
+  const host = document.getElementById(`section-${id}`);
+  if (!host) return;
+  host.dataset.focused = 'true';
+  host.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+// --- Inbox: browser→agent note channel ---
+
+function relativeTime(iso) {
+  const t = new Date(iso).getTime();
+  if (!Number.isFinite(t)) return '';
+  const ms = Date.now() - t;
+  if (ms < 60_000) return 'just now';
+  const m = Math.floor(ms / 60_000);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 7) return `${d}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+function byteLen(s) {
+  return new TextEncoder().encode(s).length;
+}
+
+async function loadInbox(slug) {
+  if (!slug) { state.inbox = []; renderInboxThread(); return; }
+  try {
+    const res = await fetch(`/api/sessions/${slug}/inbox`);
+    state.inbox = res.ok ? await res.json() : [];
+  } catch {
+    state.inbox = [];
+  }
+  renderInboxThread();
+}
+
+function setInboxBadges(unread) {
+  const label = unread > 99 ? '99+' : String(unread);
+  for (const el of [inboxBadge, inboxTopbarBadge, inboxSpineBadge]) {
+    el.textContent = label;
+    el.classList.toggle('hidden', unread === 0);
+  }
+}
+
+function renderInboxLayout() {
+  inboxRail.dataset.collapsed = state.inboxRailCollapsed ? 'true' : 'false';
+  inboxRail.dataset.open = state.inboxDrawerOpen ? 'true' : 'false';
+  inboxToggleTopbar.setAttribute('aria-expanded', String(state.inboxDrawerOpen));
+  inboxBackdrop.classList.toggle('hidden', !state.inboxDrawerOpen);
+}
+
+function renderInboxThread() {
+  // Map a comment.created id -> the (latest) comment.handled that references it.
+  const acks = new Map();
+  for (const ev of state.inbox) {
+    if (ev.type === 'comment.handled' && ev.ref_id) acks.set(ev.ref_id, ev);
+  }
+  const created = state.inbox.filter((ev) => ev.type === 'comment.created');
+  const unhandled = created.filter((ev) => !acks.has(ev.id)).length;
+  setInboxBadges(unhandled);
+
+  inboxThread.innerHTML = '';
+  if (created.length === 0) {
+    inboxEmpty.classList.remove('hidden');
+    inboxThread.classList.add('hidden');
+    return;
+  }
+  inboxEmpty.classList.add('hidden');
+  inboxThread.classList.remove('hidden');
+
+  for (const ev of created) {
+    const card = document.createElement('div');
+    card.className = 'inbox-message';
+
+    const meta = document.createElement('div');
+    meta.className = 'inbox-message-meta';
+    const pill = document.createElement('span');
+    pill.className = 'canvas-pill';
+    pill.textContent = ev.source === 'agent' ? 'Agent' : 'You';
+    meta.appendChild(pill);
+    const when = document.createElement('span');
+    when.textContent = relativeTime(ev.timestamp);
+    meta.appendChild(when);
+    if (ev.section_id) {
+      const ref = document.createElement('a');
+      ref.className = 'canvas-fileref';
+      ref.href = `#section-${ev.section_id}`;
+      ref.textContent = ev.section_id;
+      ref.addEventListener('click', (e) => { e.preventDefault(); focusLocally(ev.section_id); });
+      meta.appendChild(ref);
+    }
+    card.appendChild(meta);
+
+    const anchor = ev.payload?.anchor;
+    if (anchor && typeof anchor.quote === 'string') {
+      const quoteWrap = document.createElement('div');
+      quoteWrap.className = 'inbox-message-anchor';
+      const kindPill = document.createElement('span');
+      kindPill.className = 'canvas-pill';
+      kindPill.textContent = anchor.kind || 'text';
+      quoteWrap.appendChild(kindPill);
+      const quote = document.createElement('blockquote');
+      quote.textContent = anchor.quote;
+      quoteWrap.appendChild(quote);
+      card.appendChild(quoteWrap);
+    }
+
+    const text = document.createElement('div');
+    text.className = 'inbox-message-text';
+    text.textContent = ev.payload?.text ?? '';
+    card.appendChild(text);
+
+    if (acks.has(ev.id)) {
+      const ackEl = document.createElement('div');
+      ackEl.className = 'inbox-ack';
+      ackEl.textContent = '✓ Acknowledged';
+      card.appendChild(ackEl);
+    }
+    inboxThread.appendChild(card);
+  }
+  inboxThread.scrollTop = inboxThread.scrollHeight;
+}
+
+function showInboxError(msg) {
+  inboxError.textContent = msg;
+  inboxError.classList.remove('hidden');
+}
+function hideInboxError() {
+  inboxError.textContent = '';
+  inboxError.classList.add('hidden');
+}
+
+function updateInboxCounter() {
+  const n = byteLen(inboxTextarea.value);
+  inboxCounter.textContent = `${n} / ${INBOX_MAX_BYTES}`;
+  const over = n > INBOX_MAX_BYTES;
+  inboxCounter.dataset.over = over ? 'true' : 'false';
+  inboxSend.disabled = over || !state.wsConnected;
+}
+
+function setInboxConnected(connected) {
+  state.wsConnected = connected;
+  inboxTextarea.placeholder = connected ? 'Leave a note for the agent…' : 'Reconnecting…';
+  updateInboxCounter();
+}
+
+async function sendInboxMessage() {
+  const text = inboxTextarea.value;
+  if (!text.trim() || !state.currentSlug) return;
+  if (byteLen(text) > INBOX_MAX_BYTES) { showInboxError('Message is over the 4096-byte limit.'); return; }
+  const focused = document.querySelector('.canvas-section-host[data-focused="true"]');
+  const sectionId = focused?.dataset.sectionId ?? null;
+  inboxSend.disabled = true;
+  hideInboxError();
+  try {
+    const res = await fetch(`/api/sessions/${state.currentSlug}/inbox`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ text, section_id: sectionId }),
+    });
+    if (!res.ok) {
+      let detail = `HTTP ${res.status}`;
+      try { detail = (await res.json()).message || detail; } catch {}
+      showInboxError(`Send failed: ${detail}`);
+      return;
+    }
+    inboxTextarea.value = '';
+    // No optimistic render — the inbox.updated broadcast triggers loadInbox().
+  } catch (err) {
+    showInboxError(`Send failed: ${err.message}`);
+  } finally {
+    updateInboxCounter(); // re-enables Send if still connected and under cap
+  }
+}
+
+function toggleInboxRailCollapsed() {
+  state.inboxRailCollapsed = !state.inboxRailCollapsed;
+  localStorage.setItem(INBOX_RAIL_COLLAPSED_KEY, String(state.inboxRailCollapsed));
+  renderInboxLayout();
+  if (!state.inboxRailCollapsed) inboxThread.scrollTop = inboxThread.scrollHeight;
+}
+
+function setInboxDrawerOpen(open) {
+  state.inboxDrawerOpen = open;
+  renderInboxLayout();
+  if (open) {
+    inboxThread.scrollTop = inboxThread.scrollHeight;
+    inboxTextarea.focus();
+  }
+}
+
+function renderSidebarLayout() {
+  sidebar.dataset.collapsed = state.sidebarCollapsed ? 'true' : 'false';
+}
+
+function applyZoom() {
+  state.zoom = clampZoom(state.zoom);
+  sectionsRoot.style.zoom = String(state.zoom);
+  zoomResetBtn.textContent = `${Math.round(state.zoom * 100)}%`;
+  zoomOutBtn.disabled = state.zoom <= ZOOM_STEPS[0];
+  zoomInBtn.disabled = state.zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1];
+  localStorage.setItem(ZOOM_KEY, String(state.zoom));
+}
+
+function stepZoom(dir) {
+  // dir: +1 zoom in, -1 zoom out. Snap to the next step past the current value.
+  if (dir > 0) {
+    const next = ZOOM_STEPS.find((s) => s > state.zoom + 1e-6);
+    state.zoom = next ?? ZOOM_STEPS[ZOOM_STEPS.length - 1];
+  } else {
+    const lower = [...ZOOM_STEPS].reverse().find((s) => s < state.zoom - 1e-6);
+    state.zoom = lower ?? ZOOM_STEPS[0];
+  }
+  applyZoom();
+}
+
+function setupZoom() {
+  zoomInBtn.addEventListener('click', () => stepZoom(1));
+  zoomOutBtn.addEventListener('click', () => stepZoom(-1));
+  zoomResetBtn.addEventListener('click', () => { state.zoom = 1; applyZoom(); });
+  document.addEventListener('keydown', (e) => {
+    if (!(e.ctrlKey || e.metaKey)) return;
+    if (e.key === '=' || e.key === '+') { e.preventDefault(); stepZoom(1); }
+    else if (e.key === '-' || e.key === '_') { e.preventDefault(); stepZoom(-1); }
+    else if (e.key === '0') { e.preventDefault(); state.zoom = 1; applyZoom(); }
+  });
+  applyZoom();
+}
+
+function mermaidTheme() {
+  return state.theme === 'dark' ? 'dark' : 'neutral';
+}
+
+function themeIframe(iframe) {
+  try {
+    const doc = iframe.contentDocument;
+    if (!doc) return;
+    doc.documentElement.classList.toggle('dark', state.theme === 'dark');
+    if (!doc.querySelector('link[data-canvas-theme]')) {
+      const link = doc.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = '/workspace/theme.css';
+      link.dataset.canvasTheme = 'true';
+      doc.head.appendChild(link);
+    }
+  } catch (err) {
+    console.warn('[canvas] could not theme iframe:', err);
+  }
+}
+
+let mermaidRenderGen = 0;
+async function reRenderMermaid() {
+  if (!window.mermaid) return;
+  const gen = ++mermaidRenderGen;
+  window.mermaid.initialize({ startOnLoad: false, theme: mermaidTheme() });
+  const nodes = document.querySelectorAll('[data-mermaid-src]');
+  for (const [idx, node] of nodes.entries()) {
+    if (gen !== mermaidRenderGen) return; // a newer toggle superseded this run
+    try {
+      const code = node.dataset.mermaidSrc;
+      const { svg } = await window.mermaid.render(`mermaid-rerender-${gen}-${idx}`, code);
+      if (gen !== mermaidRenderGen) return;
+      node.innerHTML = svg;
+    } catch (err) {
+      console.warn('[canvas] mermaid re-render failed:', err);
+    }
+  }
+}
+
+function applyTheme(persist = false) {
+  const dark = state.theme === 'dark';
+  document.documentElement.classList.toggle('dark', dark);
+  if (persist) {
+    try { localStorage.setItem(THEME_KEY, state.theme); } catch {}
+  }
+  themeToggle.setAttribute('aria-pressed', String(dark));
+  themeToggleIcon.textContent = dark ? '☀️' : '🌙';
+  document.querySelectorAll('.canvas-section-iframe').forEach(themeIframe);
+  reRenderMermaid();
+}
+
+function setupTheme() {
+  themeToggle.addEventListener('click', () => {
+    state.theme = state.theme === 'dark' ? 'light' : 'dark';
+    applyTheme(true); // explicit user choice — persist it
+  });
+  applyTheme(); // initial render — do not persist
+}
+
+function toggleSidebarCollapsed() {
+  state.sidebarCollapsed = !state.sidebarCollapsed;
+  localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(state.sidebarCollapsed));
+  renderSidebarLayout();
+}
+
+function setupSidebar() {
+  sidebarCollapseBtn.addEventListener('click', toggleSidebarCollapsed);
+  sidebarSpine.addEventListener('click', () => {
+    if (state.sidebarCollapsed) toggleSidebarCollapsed();
+  });
+  renderSidebarLayout();
+}
+
+function setupInbox() {
+  // Top-bar toggle (narrow screens): open/close the drawer.
+  inboxToggleTopbar.addEventListener('click', () => setInboxDrawerOpen(!state.inboxDrawerOpen));
+  // Spine (wide-screen collapsed state): click anywhere to expand.
+  inboxSpine.addEventListener('click', () => {
+    if (state.inboxRailCollapsed) toggleInboxRailCollapsed();
+  });
+  // Header chevron (wide-screen expanded): collapse.
+  inboxCollapseBtn.addEventListener('click', toggleInboxRailCollapsed);
+  // Drawer close X (narrow-screen drawer).
+  inboxDrawerClose.addEventListener('click', () => setInboxDrawerOpen(false));
+  // Backdrop click closes drawer.
+  inboxBackdrop.addEventListener('click', () => setInboxDrawerOpen(false));
+  // Esc closes drawer (no-op on wide).
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && state.inboxDrawerOpen) setInboxDrawerOpen(false);
+    // Cmd/Ctrl+/ toggles inbox (drawer on narrow, collapse on wide).
+    if (e.key === '/' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      if (window.matchMedia('(min-width: 1280px)').matches) toggleInboxRailCollapsed();
+      else setInboxDrawerOpen(!state.inboxDrawerOpen);
+    }
+  });
+  renderInboxLayout();
+  inboxTextarea.addEventListener('input', updateInboxCounter);
+  inboxTextarea.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); sendInboxMessage(); }
+  });
+  inboxSend.addEventListener('click', sendInboxMessage);
+  updateInboxCounter();
+}
+
+function connectWS() {
+  const ws = new WebSocket(`ws://${location.host}/ws`);
+  ws.addEventListener('open', () => {
+    connStatus.textContent = 'connected';
+    connStatus.className = 'mt-1 text-xs text-emerald-600';
+    setInboxConnected(true);
+    if (state.currentSlug) loadInbox(state.currentSlug);
+  });
+  ws.addEventListener('close', () => {
+    connStatus.textContent = 'disconnected · reconnecting…';
+    connStatus.className = 'mt-1 text-xs text-amber-600';
+    setInboxConnected(false);
+    setTimeout(connectWS, 1500);
+  });
+  ws.addEventListener('message', (event) => {
+    let msg;
+    try { msg = JSON.parse(event.data); } catch { return; }
+    switch (msg.type) {
+      case 'section.updated':
+        refreshSection(msg.slug, msg.id);
+        break;
+      case 'section.deleted':
+        removeSection(msg.slug, msg.id);
+        break;
+      case 'section.focus':
+        if (msg.slug === state.currentSlug) {
+          focusLocally(msg.id);
+        } else {
+          selectSession(msg.slug).then(() => focusLocally(msg.id));
+        }
+        break;
+      case 'session.created':
+        loadSessions();
+        break;
+      case 'inbox.updated':
+        if (msg.slug === state.currentSlug) loadInbox(msg.slug);
+        break;
+    }
+  });
+  state.ws = ws;
+}
+
+// Wait for libs (mermaid is module-loaded) before first render.
+function start() {
+  setupSidebar();
+  setupZoom();
+  setupTheme();
+  setupInbox();
+  initComments({ getSlug: () => state.currentSlug });
+  loadSessions().catch((err) => {
+    console.error('Initial load failed:', err);
+    connStatus.textContent = `load error: ${err.message}`;
+  });
+  connectWS();
+}
+
+if (window.__libs_ready) start();
+else window.addEventListener('libs-ready', start, { once: true });