llm-canvas-linux-x64 0.1.0

package/workspace/comments.js

@@ -0,0 +1,345 @@
+// workspace/comments.js — inline anchored comments. The user selects text /
+// an image / a structural block inside a section; a floating button opens a
+// composer that sends a comment.created inbox event carrying an `anchor`.
+// See docs/superpowers/specs/2026-05-16-inline-anchored-comments-design.md
+
+const CTX_LEN = 80; // chars of prefix/suffix context captured around a selection
+const QUOTE_MAX = 280; // max chars of captured quote text
+const QUOTE_MAX_BYTES = 280; // server byte cap for anchor.quote
+const CTX_MAX_BYTES = 200; // server byte cap for anchor.prefix/suffix/heading
+const MAX_BYTES = 4096; // inbox text byte cap, mirrors INBOX_MAX_BYTES in app.js
+const BLOCK_SELECTOR = 'table, pre, blockquote, figure, .canvas-callout, [data-mermaid-src]';
+
+let getSlug = () => null;
+let floatBtn, popover, popQuote, popKind, popText, popSend, popCancel, popError, popCounter;
+let armed = null; // { sectionId, anchor } the float button / composer acts on
+let initialised = false;
+
+// Coalesce rapid-fire events (e.g. selectionchange during a shift-arrow drag).
+function debounce(fn, ms) {
+  let t;
+  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+}
+
+// The server caps anchor strings by UTF-8 byte length; the browser must clamp
+// by bytes too, or a multi-byte (CJK/emoji) selection is rejected on POST.
+function clampBytesStart(str, maxBytes) {
+  const enc = new TextEncoder();
+  if (enc.encode(str).length <= maxBytes) return str;
+  let lo = 0, hi = str.length;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (enc.encode(str.slice(0, mid)).length <= maxBytes) lo = mid; else hi = mid - 1;
+  }
+  return str.slice(0, lo);
+}
+
+function clampBytesEnd(str, maxBytes) {
+  const enc = new TextEncoder();
+  if (enc.encode(str).length <= maxBytes) return str;
+  let lo = 0, hi = str.length;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (enc.encode(str.slice(str.length - mid)).length <= maxBytes) lo = mid; else hi = mid - 1;
+  }
+  return str.slice(str.length - lo);
+}
+
+// ---- public API -----------------------------------------------------------
+
+export function initComments(context) {
+  getSlug = context.getSlug;
+  if (initialised) return; // idempotent: re-init only refreshes getSlug
+  initialised = true;
+  injectStyles();
+  buildFloatBtn();
+  buildPopover();
+  registerSource({
+    doc: document,
+    offset: () => ({ x: 0, y: 0 }),
+    sectionOf: (node) => {
+      const host = climb(node, (n) => n.classList?.contains('canvas-section-host'));
+      return host ? { id: host.dataset.sectionId, root: host } : null;
+    },
+  });
+}
+
+// Called by app.js after a document-mode section's iframe loads. Watches the
+// iframe document for selections/hovers and positions the button in the parent.
+export function attachIframeComments(iframe, sectionId) {
+  const doc = iframe.contentDocument;
+  if (!doc) { console.warn('[comments] iframe contentDocument unavailable for', sectionId); return; }
+  if (doc.__canvasCommentsAttached) return; // re-render safety
+  doc.__canvasCommentsAttached = true;
+  registerSource({
+    doc,
+    offset: () => {
+      const r = iframe.getBoundingClientRect();
+      return { x: r.left, y: r.top };
+    },
+    sectionOf: () => ({ id: sectionId, root: doc.body }),
+  });
+}
+
+// ---- source registration ---------------------------------------------------
+
+// A "source" is a document we watch for selections: the main document, or a
+// document-mode section's iframe document (registered in Task 6).
+function registerSource(src) {
+  src.doc.addEventListener('mouseup', () => handleSelection(src));
+  src.doc.addEventListener('selectionchange', debounce(() => handleSelection(src), 150));
+  src.doc.addEventListener('scroll', hideFloatBtn, true);
+  src.doc.addEventListener('mouseover', (e) => handleHover(e, src));
+}
+
+function handleSelection(src) {
+  const sel = src.doc.getSelection();
+  if (!sel || sel.isCollapsed || sel.toString().trim() === '') { hideFloatBtn(); return; }
+  const range = sel.getRangeAt(0);
+  const section = src.sectionOf(range.commonAncestorContainer);
+  if (!section) { hideFloatBtn(); return; }
+  const anchor = {
+    kind: 'text',
+    quote: clampBytesStart(sel.toString().trim().slice(0, QUOTE_MAX), QUOTE_MAX_BYTES),
+    prefix: contextBefore(range, section.root),
+    suffix: contextAfter(range, section.root),
+    heading: nearestHeading(range.startContainer, section.root),
+    tag: null,
+  };
+  armFloat({ sectionId: section.id, anchor }, range.getBoundingClientRect(), src.offset());
+}
+
+// Show the comment button when hovering an image or a structural block.
+function handleHover(e, src) {
+  const sel = src.doc.getSelection();
+  if (sel && !sel.isCollapsed) return; // a text selection wins
+  const el = e.target.closest('img, ' + BLOCK_SELECTOR);
+  if (!el) return;
+  const section = src.sectionOf(el);
+  if (!section) return;
+  const isImage = el.tagName === 'IMG';
+  const rawQuote = isImage
+    ? (el.getAttribute('alt') || el.getAttribute('src') || '[image]')
+    : (el.getAttribute('data-mermaid-src') || el.textContent).trim().replace(/\s+/g, ' ');
+  const anchor = {
+    kind: isImage ? 'image' : 'block',
+    quote: clampBytesStart(rawQuote.slice(0, QUOTE_MAX), QUOTE_MAX_BYTES),
+    prefix: '',
+    suffix: '',
+    heading: nearestHeading(el, section.root),
+    tag: el.tagName.toLowerCase(),
+  };
+  armFloat({ sectionId: section.id, anchor }, el.getBoundingClientRect(), src.offset());
+}
+
+// ---- anchor derivation -----------------------------------------------------
+
+function contextBefore(range, root) {
+  const r = range.cloneRange();
+  r.selectNodeContents(root);
+  r.setEnd(range.startContainer, range.startOffset);
+  return clampBytesEnd(r.toString().slice(-CTX_LEN), CTX_MAX_BYTES);
+}
+
+function contextAfter(range, root) {
+  const r = range.cloneRange();
+  r.selectNodeContents(root);
+  r.setStart(range.endContainer, range.endOffset);
+  return clampBytesStart(r.toString().slice(0, CTX_LEN), CTX_MAX_BYTES);
+}
+
+// Nearest heading at or before `node` in document order, within `root`.
+function nearestHeading(node, root) {
+  let best = null;
+  for (const h of root.querySelectorAll('h1,h2,h3,h4,h5,h6')) {
+    if (h === node || h.contains(node) ||
+        (h.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING)) best = h;
+    else break;
+  }
+  return best ? clampBytesStart(best.textContent.trim(), CTX_MAX_BYTES) || null : null;
+}
+
+function climb(node, test) {
+  let el = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement;
+  while (el) { if (test(el)) return el; el = el.parentElement; }
+  return null;
+}
+
+// ---- floating button -------------------------------------------------------
+
+function buildFloatBtn() {
+  floatBtn = document.createElement('button');
+  floatBtn.type = 'button';
+  floatBtn.className = 'canvas-comment-fab hidden';
+  floatBtn.textContent = '💬 Comment';
+  floatBtn.addEventListener('mousedown', (e) => e.preventDefault()); // keep selection
+  floatBtn.addEventListener('click', () => { if (armed) openComposer(); });
+  document.body.appendChild(floatBtn);
+}
+
+// rect is viewport-relative inside the source doc; off shifts it into the
+// parent viewport (zero for the main doc, the iframe's offset otherwise).
+function armFloat(target, rect, off) {
+  armed = target;
+  const top = off.y + rect.top - 38;
+  floatBtn.style.left = `${Math.min(off.x + rect.left, window.innerWidth - 96)}px`;
+  floatBtn.style.top = `${top < 4 ? off.y + rect.bottom + 8 : top}px`;
+  floatBtn.classList.remove('hidden');
+}
+
+function hideFloatBtn() {
+  if (popover && !popover.classList.contains('hidden')) return; // composer open
+  floatBtn.classList.add('hidden');
+}
+
+// ---- composer popover ------------------------------------------------------
+
+function buildPopover() {
+  popover = document.createElement('div');
+  popover.className = 'canvas-comment-pop hidden';
+  popover.innerHTML = `
+    <div class="canvas-comment-pop-quote"><span class="canvas-comment-pop-kind"></span><blockquote></blockquote></div>
+    <textarea class="canvas-comment-pop-text" placeholder="Describe the change or comment…"></textarea>
+    <div class="canvas-comment-pop-error hidden"></div>
+    <div class="canvas-comment-pop-actions">
+      <span class="canvas-comment-pop-counter"></span>
+      <button type="button" class="canvas-comment-pop-cancel">Cancel</button>
+      <button type="button" class="canvas-comment-pop-send">Send</button>
+    </div>`;
+  document.body.appendChild(popover);
+  popKind = popover.querySelector('.canvas-comment-pop-kind');
+  popQuote = popover.querySelector('blockquote');
+  popText = popover.querySelector('.canvas-comment-pop-text');
+  popError = popover.querySelector('.canvas-comment-pop-error');
+  popSend = popover.querySelector('.canvas-comment-pop-send');
+  popCancel = popover.querySelector('.canvas-comment-pop-cancel');
+  popCounter = popover.querySelector('.canvas-comment-pop-counter');
+  popSend.addEventListener('click', send);
+  popCancel.addEventListener('click', closePopover);
+  popText.addEventListener('input', updateComposerState);
+  popText.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePopover(); });
+  document.addEventListener('mousedown', (e) => {
+    if (!popover.classList.contains('hidden') && !popover.contains(e.target) && e.target !== floatBtn) {
+      closePopover();
+    }
+  });
+}
+
+function openComposer() {
+  popKind.textContent = armed.anchor.kind;
+  popQuote.textContent = armed.anchor.quote;
+  popText.value = '';
+  popError.classList.add('hidden');
+  updateComposerState();
+  const r = floatBtn.getBoundingClientRect();
+  popover.style.left = `${Math.max(4, Math.min(r.left, window.innerWidth - 340))}px`;
+  popover.style.top = `${Math.min(r.bottom + 6, window.innerHeight - 220)}px`;
+  popover.classList.remove('hidden');
+  floatBtn.classList.add('hidden');
+  popText.focus();
+}
+
+function updateComposerState() {
+  const n = new TextEncoder().encode(popText.value).length;
+  popCounter.textContent = `${n} / ${MAX_BYTES}`;
+  popCounter.dataset.over = n > MAX_BYTES ? 'true' : 'false';
+  popSend.disabled = n === 0 || n > MAX_BYTES;
+}
+
+function closePopover() {
+  popover.classList.add('hidden');
+  floatBtn.classList.add('hidden');
+  armed = null;
+}
+
+async function send() {
+  const text = popText.value;
+  const slug = getSlug();
+  if (!text.trim() || !slug || !armed) return;
+  if (new TextEncoder().encode(text).length > MAX_BYTES) {
+    popError.textContent = 'Comment is over the 4096-byte limit.';
+    popError.classList.remove('hidden');
+    return;
+  }
+  popSend.disabled = true;
+  popError.classList.add('hidden');
+  try {
+    const res = await fetch(`/api/sessions/${slug}/inbox`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ text, section_id: armed.sectionId, anchor: armed.anchor }),
+    });
+    if (!res.ok) {
+      let detail = `HTTP ${res.status}`;
+      try { detail = (await res.json()).message || detail; } catch {}
+      popError.textContent = `Send failed: ${detail}`;
+      popError.classList.remove('hidden');
+      return;
+    }
+    closePopover(); // the inbox.updated broadcast refreshes the thread
+  } catch (err) {
+    popError.textContent = `Send failed: ${err.message}`;
+    popError.classList.remove('hidden');
+  } finally {
+    if (!popover.classList.contains('hidden')) updateComposerState();
+  }
+}
+
+// ---- styles ----------------------------------------------------------------
+
+function injectStyles() {
+  const style = document.createElement('style');
+  style.textContent = `
+    .canvas-comment-fab {
+      position: fixed; z-index: 60; padding: 4px 10px; font-size: 12px;
+      border-radius: 6px; border: 1px solid #d4d4d8; background: #fff; color: #18181b;
+      box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
+    }
+    .canvas-comment-pop {
+      position: fixed; z-index: 61; width: 320px; padding: 10px;
+      border-radius: 8px; border: 1px solid #d4d4d8; background: #fff; color: #18181b;
+      box-shadow: 0 8px 28px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 8px;
+    }
+    .canvas-comment-pop-kind {
+      display: inline-block; font-size: 10px; text-transform: uppercase;
+      letter-spacing: .04em; padding: 1px 6px; border-radius: 4px;
+      background: #f4f4f5; color: #52525b; margin-bottom: 4px;
+    }
+    .canvas-comment-pop blockquote {
+      margin: 0; padding: 4px 8px; border-left: 3px solid #a1a1aa;
+      font-size: 12px; color: #3f3f46; max-height: 72px; overflow: auto; white-space: pre-wrap;
+    }
+    .canvas-comment-pop-text {
+      width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: 13px;
+      padding: 6px 8px; border-radius: 6px; border: 1px solid #d4d4d8; box-sizing: border-box;
+    }
+    .canvas-comment-pop-error { font-size: 12px; color: #dc2626; }
+    .canvas-comment-pop-counter { font-size: 11px; color: #71717a; margin-right: auto; }
+    .canvas-comment-pop-counter[data-over="true"] { color: #dc2626; }
+    .canvas-comment-pop-actions { display: flex; justify-content: flex-end; gap: 8px; }
+    .canvas-comment-pop-actions button {
+      font-size: 12px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
+      border: 1px solid #d4d4d8; background: #fff; color: #18181b;
+    }
+    .canvas-comment-pop-send { background: #2563eb; color: #fff; border-color: #2563eb; }
+    .canvas-comment-pop-send:disabled { opacity: .5; cursor: default; }
+    .dark .canvas-comment-fab, .dark .canvas-comment-pop {
+      background: #1f1f23; color: #e4e4e7; border-color: #3f3f46;
+    }
+    .dark .canvas-comment-pop-kind { background: #27272a; color: #a1a1aa; }
+    .dark .canvas-comment-pop-counter { color: #a1a1aa; }
+    .dark .canvas-comment-pop blockquote { color: #d4d4d8; border-left-color: #52525b; }
+    .dark .canvas-comment-pop-text { background: #18181b; color: #e4e4e7; border-color: #3f3f46; }
+    .dark .canvas-comment-pop-actions button { background: #27272a; color: #e4e4e7; border-color: #3f3f46; }
+    .dark .canvas-comment-pop-send { background: #2563eb; color: #fff; border-color: #2563eb; }
+    .hidden { display: none !important; }
+    .inbox-message-anchor { margin: 4px 0; }
+    .inbox-message-anchor blockquote {
+      margin: 4px 0 0; padding: 4px 8px; border-left: 3px solid #a1a1aa;
+      font-size: 12px; color: #3f3f46; white-space: pre-wrap;
+      max-height: 80px; overflow: auto;
+    }
+    .dark .inbox-message-anchor blockquote { color: #d4d4d8; border-left-color: #52525b; }
+  `;
+  document.head.appendChild(style);
+}

package/workspace/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en" class="h-full">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Canvas</title>
+<script src="/lib/tailwind.js"></script>
+<link rel="stylesheet" href="/lib/hljs-github-dark.min.css">
+<link rel="stylesheet" href="/workspace/theme.css">
+<link rel="stylesheet" href="/workspace/styles.css">
+<script>
+  // Tailwind config — load synchronously so utility classes resolve on first paint.
+  tailwind.config = {
+    darkMode: 'class',
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: ['Inter', 'system-ui', 'sans-serif'],
+          serif: ['ui-serif', 'Georgia', 'serif'],
+          mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
+        },
+      },
+    },
+  };
+</script>
+<script>
+  // Apply the theme before first paint to avoid a flash.
+  (function () {
+    try {
+      var stored = localStorage.getItem('canvas.theme');
+      var dark = stored === 'dark' ? true
+        : stored === 'light' ? false
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (dark) document.documentElement.classList.add('dark');
+    } catch (e) {}
+  })();
+</script>
+</head>
+<body class="h-full antialiased">
+
+<div class="flex h-full">
+  <aside id="sidebar" class="sidebar" data-collapsed="false">
+    <button id="sidebar-spine" class="sidebar-spine" type="button" title="Expand sidebar">
+      <span class="sidebar-spine-icon" aria-hidden="true">»</span>
+      <span class="sidebar-spine-label">Canvas</span>
+    </button>
+    <div class="sidebar-body">
+      <div class="sidebar-header">
+        <div class="min-w-0">
+          <div class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Canvas</div>
+          <div id="connection" class="mt-1 text-xs text-slate-400 dark:text-slate-500">connecting…</div>
+        </div>
+        <button id="sidebar-collapse" class="inbox-rail-iconbtn" type="button" title="Collapse sidebar">
+          <span aria-hidden="true">‹</span>
+        </button>
+      </div>
+      <nav id="session-nav" class="p-2 space-y-1"></nav>
+    </div>
+  </aside>
+
+  <main class="flex-1 overflow-y-auto">
+    <header id="session-header" class="border-b border-slate-200 bg-white px-8 py-5 sticky top-0 z-10 flex items-start gap-4 dark:border-slate-700 dark:bg-slate-800">
+      <div class="flex-1 min-w-0">
+        <div class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400" id="session-purpose">No session</div>
+        <h1 class="text-2xl font-semibold tracking-tight" id="session-title">Canvas</h1>
+      </div>
+      <div id="zoom-control" class="zoom-control" role="group" aria-label="Content zoom">
+        <button id="zoom-out" class="zoom-btn" type="button" title="Zoom out (Cmd/Ctrl+-)" aria-label="Zoom out">−</button>
+        <button id="zoom-reset" class="zoom-level" type="button" title="Reset zoom (Cmd/Ctrl+0)" aria-label="Reset zoom">100%</button>
+        <button id="zoom-in" class="zoom-btn" type="button" title="Zoom in (Cmd/Ctrl+=)" aria-label="Zoom in">+</button>
+      </div>
+      <button id="theme-toggle" class="theme-toggle" type="button" aria-pressed="false" title="Toggle dark mode" aria-label="Toggle dark mode">
+        <span class="theme-toggle-icon" aria-hidden="true">🌙</span>
+      </button>
+      <button id="inbox-toggle-topbar" class="inbox-toggle-topbar hidden" type="button" aria-expanded="false" aria-controls="inbox-rail" title="Messages (Cmd/Ctrl+/)">
+        <span aria-hidden="true">💬</span>
+        <span>Messages</span>
+        <span id="inbox-topbar-badge" class="inbox-badge hidden">0</span>
+      </button>
+    </header>
+
+    <div id="sections" class="px-8 py-6 space-y-8 max-w-4xl mx-auto"></div>
+
+    <div id="empty" class="px-8 py-16 max-w-2xl mx-auto text-center text-slate-500 dark:text-slate-400 hidden">
+      <p class="text-lg">No sessions yet.</p>
+      <p class="mt-2 text-sm">Ask your coding agent to write a substantial answer here. It'll create a session under <code class="px-1 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-xs">.canvas/sessions/</code>.</p>
+    </div>
+  </main>
+
+  <aside id="inbox-rail" class="inbox-rail hidden" data-collapsed="false" data-open="false" aria-label="Inbox">
+    <button id="inbox-rail-spine" class="inbox-rail-spine" type="button" title="Expand messages">
+      <span class="inbox-spine-icon" aria-hidden="true">💬</span>
+      <span id="inbox-spine-badge" class="inbox-spine-badge hidden">0</span>
+      <span class="inbox-spine-label">Messages</span>
+    </button>
+    <div class="inbox-rail-body">
+      <header class="inbox-rail-header">
+        <span class="inbox-rail-title">Messages</span>
+        <span id="inbox-badge" class="inbox-badge hidden">0</span>
+        <span class="inbox-rail-spacer"></span>
+        <button id="inbox-collapse" class="inbox-rail-iconbtn" type="button" title="Collapse">
+          <span aria-hidden="true">›</span>
+        </button>
+        <button id="inbox-drawer-close" class="inbox-rail-iconbtn inbox-rail-iconbtn-drawer" type="button" title="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </header>
+      <div id="inbox-thread" class="inbox-thread" role="log" aria-live="polite"></div>
+      <p id="inbox-empty" class="inbox-empty hidden">No messages yet. Leave a note for the agent.</p>
+      <div class="inbox-compose">
+        <textarea id="inbox-text" class="inbox-textarea" rows="2" placeholder="Leave a note for the agent…"></textarea>
+        <div class="inbox-compose-row">
+          <span id="inbox-error" class="inbox-error hidden" role="alert"></span>
+          <span id="inbox-counter" class="inbox-counter">0 / 4096</span>
+          <button id="inbox-send" class="inbox-send" type="button">Send</button>
+        </div>
+      </div>
+    </div>
+  </aside>
+  <div id="inbox-backdrop" class="inbox-backdrop hidden" aria-hidden="true"></div>
+</div>
+
+<script src="/lib/highlight.min.js"></script>
+<script src="/lib/mermaid.min.js"></script>
+<script src="/lib/turndown.min.js"></script>
+<script src="/lib/turndown-plugin-gfm.min.js"></script>
+<script>
+  // Mermaid 10 UMD attaches to window.mermaid directly.
+  window.mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+  window.__libs_ready = true;
+  window.dispatchEvent(new Event('libs-ready'));
+</script>
+<script type="module" src="/workspace/app.js"></script>
+
+</body>
+</html>