egregore-artifacts 0.9.8 → 0.9.9

package/lib/edit-client.js

@@ -0,0 +1,866 @@
+// Browser-side editor for /edit. Pure-JS (no framework), bootstrapped by
+// edit-shell.js. Reads token + doc from URL params, fetches source-mapped
+// HTML + sidecar from the loopback API, and provides the annotation UX:
+//
+//   - Selection layer: drag-to-highlight → popup with classification + comment
+//   - Auto-classification: keyword-only, ambiguous → null (per Contract §6.3)
+//   - Sidebar: filterable + section-grouped list, threaded replies
+//   - "Send to session" composer: builds #egregore-edit:v1 payload, copies it
+//
+// Spec references:
+//   Contract §3   API surface
+//   Contract §2.2 sidecar / annotation schema
+//   Contract §4   source-map data attributes
+//   Contract §5   bearer token
+//   Contract §6.3 keyword-only auto-classification
+//
+// This file is shipped to the browser as a literal string (see edit-shell.js).
+// `export function editClientScript()` returns the JS source so the shell can
+// inline it inside <script>…</script>.
+
+export function editClientScript() {
+  // The IIFE below is the actual browser code. Everything inside the template
+  // literal runs in the browser (not Node). Don't import anything in here.
+  return `
+(function(){
+  'use strict';
+
+  // ── State ───────────────────────────────────────────────────────────
+  var state = {
+    token: null,
+    doc: null,
+    docEncoded: null,
+    sidecar: null,        // {schemaVersion, doc, sessionId, annotations}
+    paragraphIndex: [],   // from /api/edit/render
+    sourceText: '',
+    activeFilter: 'all',  // 'all' | 'green' | 'yellow' | 'red' | 'null'
+    initiativeMode: 'review_each_yellow',
+    pendingSelection: null, // {anchor, snippet, range}
+  };
+
+  var API = '';  // same-origin (the editor is served by view-server)
+
+  // ── Keyword auto-classification (Contract §6.3) ─────────────────────
+  // Exposed on window for the smoke test.
+  var KEYWORDS = {
+    green:  ['keep','lands','love','great','nice','yes','good'],
+    yellow: ['tighten','unclear','needs work','rephrase','revise','expand'],
+    red:    ['cut','drop','remove','redundant','delete','kill','no'],
+  };
+
+  function classifyByKeyword(text) {
+    if (!text) return null;
+    var lower = text.toLowerCase();
+    var hits = [];
+    for (var color in KEYWORDS) {
+      var list = KEYWORDS[color];
+      var matched = false;
+      for (var i = 0; i < list.length; i++) {
+        // word-ish boundary: surrounded by non-letters or string edges
+        var kw = list[i].toLowerCase();
+        var idx = lower.indexOf(kw);
+        while (idx !== -1) {
+          var before = idx === 0 ? ' ' : lower.charAt(idx - 1);
+          var after = idx + kw.length >= lower.length ? ' ' : lower.charAt(idx + kw.length);
+          if (!/[a-z0-9]/.test(before) && !/[a-z0-9]/.test(after)) { matched = true; break; }
+          idx = lower.indexOf(kw, idx + 1);
+        }
+        if (matched) break;
+      }
+      if (matched) hits.push(color);
+    }
+    if (hits.length === 1) return hits[0];
+    return null;
+  }
+  window.__egEditClassify = classifyByKeyword;
+
+  // ── DOM helpers ─────────────────────────────────────────────────────
+  function el(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) {
+      for (var k in attrs) {
+        if (k === 'class') node.className = attrs[k];
+        else if (k === 'style') node.setAttribute('style', attrs[k]);
+        else if (k === 'text') node.textContent = attrs[k];
+        else if (k === 'html') node.innerHTML = attrs[k];
+        else if (k.indexOf('on') === 0) node[k] = attrs[k];
+        else if (k.indexOf('data-') === 0 || k === 'role' || k === 'aria-label')
+          node.setAttribute(k, attrs[k]);
+        else node[k] = attrs[k];
+      }
+    }
+    if (children) {
+      for (var i = 0; i < children.length; i++) {
+        var c = children[i];
+        if (c == null) continue;
+        node.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
+      }
+    }
+    return node;
+  }
+
+  function $(sel) { return document.querySelector(sel); }
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function(c) {
+      return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c];
+    });
+  }
+
+  // ── HTTP ────────────────────────────────────────────────────────────
+  function api(method, pathname, opts) {
+    opts = opts || {};
+    var headers = { 'Authorization': 'Bearer ' + state.token };
+    if (opts.body) headers['Content-Type'] = 'application/json';
+    return fetch(API + pathname, {
+      method: method,
+      headers: headers,
+      body: opts.body ? JSON.stringify(opts.body) : undefined,
+    }).then(function(r) {
+      return r.text().then(function(t) {
+        var json = null;
+        try { json = JSON.parse(t); } catch (e) { json = { raw: t }; }
+        if (!r.ok) {
+          var msg = (json && (json.error || json.code)) || ('HTTP ' + r.status);
+          var err = new Error(msg);
+          err.status = r.status;
+          err.body = json;
+          throw err;
+        }
+        return json;
+      });
+    });
+  }
+
+  // ── Toast ───────────────────────────────────────────────────────────
+  var toastEl = null;
+  function toast(msg, isError) {
+    if (!toastEl) {
+      toastEl = el('div', { class: 'eg-edit-toast' });
+      document.body.appendChild(toastEl);
+    }
+    toastEl.textContent = msg;
+    toastEl.className = 'eg-edit-toast show' + (isError ? ' error' : '');
+    clearTimeout(toastEl._t);
+    toastEl._t = setTimeout(function() {
+      toastEl.classList.remove('show');
+    }, 2400);
+  }
+
+  // ── Bootstrap ───────────────────────────────────────────────────────
+  function bootstrap() {
+    var params = new URLSearchParams(location.search);
+    state.token = params.get('token') || sessionStorage.getItem('eg-edit-token');
+    state.docEncoded = params.get('doc');
+
+    // /edit/<base64url> path form — fall back to extracting from the path
+    if (!state.docEncoded) {
+      var m = location.pathname.match(/^\\/edit\\/([A-Za-z0-9_-]+)$/);
+      if (m) state.docEncoded = m[1];
+    }
+
+    if (!state.token) {
+      showStatus('Missing session token. Re-run /edit <doc> in your terminal.', true);
+      return;
+    }
+    if (!state.docEncoded) {
+      showStatus('Missing doc parameter.', true);
+      return;
+    }
+
+    // Persist token in sessionStorage (NOT localStorage — Contract §5.3)
+    sessionStorage.setItem('eg-edit-token', state.token);
+
+    try {
+      state.doc = atob(state.docEncoded.replace(/-/g, '+').replace(/_/g, '/'));
+    } catch (e) {
+      state.doc = '(invalid encoding)';
+    }
+    $('#eg-edit-title').textContent = state.doc;
+
+    loadAll();
+  }
+
+  function showStatus(msg, isError) {
+    var body = $('#eg-edit-body');
+    body.innerHTML = '';
+    body.appendChild(el('div', { class: 'eg-edit-status' + (isError ? ' error' : ''), text: msg }));
+  }
+
+  function loadAll() {
+    showStatus('Loading…');
+    return Promise.all([
+      api('GET', '/api/edit/render?doc=' + encodeURIComponent(state.docEncoded)),
+      api('GET', '/api/edit/annotations?doc=' + encodeURIComponent(state.docEncoded)),
+    ]).then(function(results) {
+      var render = results[0];
+      var sidecar = results[1];
+      state.sourceText = render.sourceText || '';
+      state.paragraphIndex = render.paragraphIndex || [];
+      state.sidecar = sidecar;
+      renderBody(render.html);
+      renderSidebar();
+      decorateAnnotations();
+    }).catch(function(err) {
+      showStatus('Load failed: ' + err.message, true);
+    });
+  }
+
+  // ── Body rendering ──────────────────────────────────────────────────
+  function renderBody(html) {
+    var body = $('#eg-edit-body');
+    body.innerHTML = html;
+  }
+
+  // ── Selection layer ─────────────────────────────────────────────────
+  function findParagraphIndexEntry(paragraphId) {
+    for (var i = 0; i < state.paragraphIndex.length; i++) {
+      if (state.paragraphIndex[i].paragraphId === paragraphId) return state.paragraphIndex[i];
+    }
+    return null;
+  }
+
+  function findAncestorWith(node, attr) {
+    var n = node;
+    while (n && n !== document.body) {
+      if (n.nodeType === 1 && n.hasAttribute && n.hasAttribute(attr)) return n;
+      n = n.parentNode;
+    }
+    return null;
+  }
+
+  // Compute char offset of a Range start within a [data-para-id] node by
+  // walking text nodes. The paragraph index 'text' field gives the canonical
+  // source string; we compute offsets relative to the rendered text content,
+  // which mirrors source after the inline-markdown pass.
+  function offsetWithinParagraph(paraNode, range) {
+    if (!paraNode.contains(range.startContainer)) return null;
+    var walker = document.createTreeWalker(paraNode, NodeFilter.SHOW_TEXT, null);
+    var offset = 0;
+    var n;
+    while ((n = walker.nextNode())) {
+      if (n === range.startContainer) {
+        return offset + range.startOffset;
+      }
+      offset += n.nodeValue.length;
+    }
+    return null;
+  }
+
+  function selectionToAnchor() {
+    var sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
+    var range = sel.getRangeAt(0);
+    var snippet = sel.toString();
+    if (!snippet || !snippet.trim()) return null;
+
+    // Anchor is rooted at the START paragraph. Multi-paragraph selections are
+    // supported: the end gets clamped to the start paragraph's last char and
+    // the full snippet (across paragraphs) is preserved in the fingerprint.
+    // The agent processing the annotation has the fingerprint to recover the
+    // exact span; the anchor stays single-paragraph for storage simplicity.
+    var paraNode = findAncestorWith(range.startContainer, 'data-para-id');
+    if (!paraNode) return null;
+
+    var paragraphId = paraNode.getAttribute('data-para-id');
+    var sectionNode = findAncestorWith(paraNode, 'data-section') ||
+                      findRecentSection(paraNode);
+    var section = sectionNode
+      ? sectionNode.getAttribute('data-section')
+      : '§0. unsectioned';
+
+    var entry = findParagraphIndexEntry(paragraphId);
+    var paraText = entry ? entry.text : (paraNode.textContent || '');
+
+    var startOffset = offsetWithinParagraph(paraNode, range);
+    if (startOffset == null) return null;
+
+    // Compute end offset within the START paragraph. If the end is outside
+    // (multi-paragraph selection), clamp to paraText length.
+    var endOffset = (function() {
+      var walker = document.createTreeWalker(paraNode, NodeFilter.SHOW_TEXT, null);
+      var off = 0;
+      var n;
+      while ((n = walker.nextNode())) {
+        if (n === range.endContainer) return off + range.endOffset;
+        off += n.nodeValue.length;
+      }
+      return null;
+    })();
+
+    var spansMultipleParas = false;
+    if (endOffset == null) {
+      // End is in a different paragraph — clamp to end of start paragraph.
+      endOffset = paraText.length;
+      spansMultipleParas = true;
+    }
+
+    if (endOffset <= startOffset) {
+      // Defensive: if the end somehow precedes the start in the para,
+      // expand to end of paragraph.
+      endOffset = paraText.length;
+      if (endOffset <= startOffset) return null;
+    }
+
+    var fingerprint = snippet.trim().slice(0, 64);
+
+    return {
+      anchor: {
+        section: section,
+        paragraphId: paragraphId,
+        charRange: [startOffset, endOffset],
+        fingerprint: fingerprint,
+      },
+      snippet: snippet,
+      paraText: paraText,
+      range: range,
+      spansMultipleParas: spansMultipleParas,
+    };
+  }
+
+  // ── Draft highlight overlay (persists while popup is open) ──────────
+  // The browser's live selection clears when the popup textarea takes focus,
+  // so we paint absolutely-positioned overlays over the selection rects.
+  // Standard annotation-tool pattern (Hypothesis, GitHub PR comments).
+  function paintDraftHighlight(range) {
+    var rects = range.getClientRects();
+    var overlays = [];
+    for (var i = 0; i < rects.length; i++) {
+      var r = rects[i];
+      if (r.width < 1 || r.height < 1) continue;
+      var div = document.createElement('div');
+      div.className = 'eg-edit-draft-highlight';
+      div.style.top = (r.top + window.scrollY) + 'px';
+      div.style.left = (r.left + window.scrollX) + 'px';
+      div.style.width = r.width + 'px';
+      div.style.height = r.height + 'px';
+      document.body.appendChild(div);
+      overlays.push(div);
+    }
+    return function clearHighlight() {
+      for (var i = 0; i < overlays.length; i++) {
+        if (overlays[i].parentNode) overlays[i].parentNode.removeChild(overlays[i]);
+      }
+    };
+  }
+
+  function findRecentSection(node) {
+    // Walk up + previousSibling to find the last [data-section] heading.
+    var n = node;
+    while (n && n !== document.body) {
+      var sib = n.previousElementSibling;
+      while (sib) {
+        if (sib.hasAttribute && sib.hasAttribute('data-section')) return sib;
+        var inner = sib.querySelector && sib.querySelector('[data-section]');
+        if (inner) return inner;
+        sib = sib.previousElementSibling;
+      }
+      n = n.parentNode;
+    }
+    return null;
+  }
+
+  // ── Popup ───────────────────────────────────────────────────────────
+  function showPopup(payload, anchorRect) {
+    closePopup();
+    state.pendingSelection = payload;
+
+    var popup = el('div', { class: 'eg-edit-popup', id: 'eg-edit-popup' });
+
+    popup.appendChild(el('div', { class: 'eg-edit-popup-snippet', text: payload.snippet }));
+
+    var textarea = el('textarea', {
+      class: 'eg-edit-popup-textarea',
+      placeholder: 'Add a comment (try keywords: cut, tighten, keep…)',
+    });
+    popup.appendChild(textarea);
+
+    var suggestNote = el('div', { class: 'eg-edit-popup-suggest', id: 'eg-edit-suggest', text: '' });
+    popup.appendChild(suggestNote);
+
+    var colorRow = el('div', { class: 'eg-edit-color-row' });
+    var selected = { color: undefined }; // undefined = nothing chosen yet
+    function makeColorBtn(color, label) {
+      var btn = el('button', { class: 'eg-edit-color-btn', 'data-color': color === null ? 'null' : color });
+      btn.appendChild(el('span', { class: 'eg-edit-color-dot' }));
+      btn.appendChild(document.createTextNode(label));
+      btn.onclick = function() {
+        selected.color = color;
+        // userOverride if user picks something different from the suggested
+        if (suggestion && color !== suggestion) suggestion = null;
+        Array.prototype.forEach.call(colorRow.children, function(c) { c.classList.remove('selected'); });
+        btn.classList.add('selected');
+      };
+      colorRow.appendChild(btn);
+      return btn;
+    }
+    var greenBtn = makeColorBtn('green', 'green');
+    var yellowBtn = makeColorBtn('yellow', 'yellow');
+    var redBtn = makeColorBtn('red', 'red');
+    var noColorBtn = makeColorBtn(null, 'no color');
+    popup.appendChild(colorRow);
+
+    var actions = el('div', { class: 'eg-edit-popup-actions' });
+    var cancel = el('button', { class: 'eg-edit-popup-cancel', text: 'Cancel' });
+    cancel.onclick = closePopup;
+    var save = el('button', { class: 'eg-edit-popup-save', text: 'Save' });
+    save.onclick = function() {
+      saveAnnotation(textarea.value.trim(), selected.color);
+    };
+    actions.appendChild(cancel);
+    actions.appendChild(save);
+    popup.appendChild(actions);
+
+    var suggestion = null;
+    var userOverrode = false;
+
+    textarea.addEventListener('input', function() {
+      var sug = classifyByKeyword(textarea.value);
+      // refresh suggestion display only if the user hasn't picked manually
+      Array.prototype.forEach.call(colorRow.children, function(c) {
+        c.classList.remove('suggested');
+      });
+      if (sug && selected.color === undefined) {
+        suggestion = sug;
+        // mark the matching button as suggested
+        for (var i = 0; i < colorRow.children.length; i++) {
+          if (colorRow.children[i].getAttribute('data-color') === sug) {
+            colorRow.children[i].classList.add('suggested');
+            break;
+          }
+        }
+        suggestNote.textContent = 'suggested: ' + sug + ' (click to accept, or pick another)';
+      } else {
+        suggestion = null;
+        suggestNote.textContent = '';
+      }
+    });
+
+    // Paint the persistent draft-highlight overlay BEFORE focusing the
+    // textarea (which would clear the live selection).
+    var clearDraftHighlight = paintDraftHighlight(payload.range);
+
+    // Multi-paragraph hint in the snippet block
+    if (payload.spansMultipleParas) {
+      var hint = el('div', {
+        class: 'eg-edit-popup-multipara-hint',
+        text: 'Spans multiple paragraphs — anchor rooted at the start; the full selection is captured in the fingerprint.',
+      });
+      popup.insertBefore(hint, popup.children[1] || null);
+    }
+
+    // Position the popup near the selection
+    document.body.appendChild(popup);
+    var top = anchorRect.bottom + window.scrollY + 6;
+    var left = Math.min(anchorRect.left + window.scrollX, window.innerWidth - 340);
+    popup.style.top = top + 'px';
+    popup.style.left = Math.max(8, left) + 'px';
+
+    // Defer focus so the live selection's removal doesn't visually flash —
+    // the draft-highlight overlay is already painted, so losing the live
+    // selection is now safe.
+    setTimeout(function() { textarea.focus(); }, 0);
+
+    // Stash so saveAnnotation can read suggestion state
+    popup._getMeta = function() {
+      return {
+        suggestion: suggestion,
+        userPicked: selected.color !== undefined,
+        chosen: selected.color,
+      };
+    };
+    popup._clearDraftHighlight = clearDraftHighlight;
+  }
+
+  function closePopup() {
+    var p = document.getElementById('eg-edit-popup');
+    if (p) {
+      if (typeof p._clearDraftHighlight === 'function') {
+        try { p._clearDraftHighlight(); } catch (_) {}
+      }
+      p.remove();
+    }
+    state.pendingSelection = null;
+  }
+
+  function saveAnnotation(comment, chosenColor) {
+    if (!state.pendingSelection) return;
+    if (!comment) {
+      toast('Comment required', true);
+      return;
+    }
+    var popup = document.getElementById('eg-edit-popup');
+    var meta = popup && popup._getMeta ? popup._getMeta() : { suggestion: null, userPicked: false, chosen: chosenColor };
+
+    var classification;
+    var autoClassified = false;
+    if (meta.userPicked) {
+      classification = meta.chosen; // null if "no color" pressed
+      // If the user picked the suggested color exactly, autoClassified = true
+      if (meta.suggestion && meta.chosen === meta.suggestion) autoClassified = true;
+    } else {
+      // No manual pick — fall back to keyword classifier (may be null)
+      var sug = classifyByKeyword(comment);
+      classification = sug;
+      autoClassified = !!sug;
+    }
+
+    var anchor = state.pendingSelection.anchor;
+    var fingerprint = anchor.fingerprint || (state.pendingSelection.snippet || '').trim().slice(0, 64);
+    var body = {
+      selection: { ...anchor, fingerprint: fingerprint },
+      classification: classification,
+      autoClassified: autoClassified,
+      comment: comment,
+      author: window.__egEditAuthor || 'browser-user',
+      status: 'active',
+      thread: [],
+    };
+
+    api('POST', '/api/edit/annotations?doc=' + encodeURIComponent(state.docEncoded), { body: body })
+      .then(function(res) {
+        toast('Saved');
+        closePopup();
+        // Refresh sidecar only (HTML hasn't changed)
+        return api('GET', '/api/edit/annotations?doc=' + encodeURIComponent(state.docEncoded));
+      })
+      .then(function(sidecar) {
+        if (sidecar) {
+          state.sidecar = sidecar;
+          renderSidebar();
+          decorateAnnotations();
+        }
+      })
+      .catch(function(err) {
+        toast('Save failed: ' + err.message, true);
+      });
+  }
+
+  // ── Selection trigger ───────────────────────────────────────────────
+  document.addEventListener('mouseup', function(e) {
+    // Skip if click is inside the popup itself
+    if (e.target.closest && e.target.closest('.eg-edit-popup')) return;
+    if (e.target.closest && e.target.closest('.eg-edit-sidebar')) return;
+    if (e.target.closest && e.target.closest('.eg-edit-topbar')) return;
+    setTimeout(function() {
+      var payload = selectionToAnchor();
+      if (!payload) {
+        // If user clicked elsewhere with nothing selected, close popup
+        if (!window.getSelection().toString()) closePopup();
+        return;
+      }
+      var rect = payload.range.getBoundingClientRect();
+      showPopup(payload, rect);
+    }, 0);
+  });
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') closePopup();
+  });
+
+  // ── Sidebar ─────────────────────────────────────────────────────────
+  function renderSidebar() {
+    var list = $('#eg-edit-sidebar-list');
+    list.innerHTML = '';
+    var anns = (state.sidecar && state.sidecar.annotations) || [];
+
+    // Filter
+    var filter = state.activeFilter;
+    if (filter !== 'all') {
+      anns = anns.filter(function(a) {
+        if (filter === 'null') return a.classification == null;
+        return a.classification === filter;
+      });
+    }
+
+    if (anns.length === 0) {
+      list.appendChild(el('div', { class: 'eg-edit-status', text: 'No annotations yet. Highlight text to add one.' }));
+      return;
+    }
+
+    // Group by section
+    var groups = {};
+    var sectionOrder = [];
+    anns.forEach(function(a) {
+      var s = (a.selection && a.selection.section) || '§0. unsectioned';
+      if (!groups[s]) { groups[s] = []; sectionOrder.push(s); }
+      groups[s].push(a);
+    });
+
+    sectionOrder.forEach(function(section) {
+      var group = el('div', { class: 'eg-edit-section-group' });
+      group.appendChild(el('div', { class: 'eg-edit-section-label', text: section }));
+      groups[section].forEach(function(a) {
+        group.appendChild(renderAnnotationCard(a));
+      });
+      list.appendChild(group);
+    });
+  }
+
+  function renderAnnotationCard(a) {
+    var color = a.classification == null ? 'null' : a.classification;
+    var classes = ['eg-edit-ann-card'];
+    if (a.status === 'orphaned') classes.push('eg-orphaned');
+
+    var card = el('div', {
+      class: classes.join(' '),
+      'data-color': color,
+      'data-ann-id': a.id,
+    });
+
+    var meta = el('div', { class: 'eg-edit-ann-meta' });
+    meta.appendChild(el('span', { class: 'eg-edit-color-badge', 'data-color': color }));
+    meta.appendChild(el('span', { class: 'eg-edit-ann-author', text: a.author || '?' }));
+    var statusText = a.status === 'orphaned' ? 'orphaned · approximate' : a.status;
+    meta.appendChild(el('span', { class: 'eg-edit-status-badge', 'data-status': a.status, text: statusText }));
+    card.appendChild(meta);
+
+    var snippet = (a.selection && a.selection.fingerprint) || '';
+    if (snippet) {
+      card.appendChild(el('div', { class: 'eg-edit-ann-snippet', text: '"' + snippet.slice(0, 40) + (snippet.length > 40 ? '…' : '') + '"' }));
+    }
+    card.appendChild(el('div', { class: 'eg-edit-ann-comment', text: a.comment || '' }));
+
+    var threadCount = (a.thread || []).length;
+    card.appendChild(el('div', { class: 'eg-edit-ann-thread-count', text: threadCount + ' repl' + (threadCount === 1 ? 'y' : 'ies') }));
+
+    // Thread block (toggled on expand)
+    var thread = el('div', { class: 'eg-edit-thread' });
+    (a.thread || []).forEach(function(r) {
+      var reply = el('div', { class: 'eg-edit-reply' });
+      reply.appendChild(el('div', { class: 'eg-edit-reply-meta', text: (r.author || '?') + ' · ' + (r.kind || '') + ' · ' + ((r.createdAt || '').slice(0, 19)) }));
+      reply.appendChild(el('div', { class: 'eg-edit-reply-text', text: r.text || '' }));
+      thread.appendChild(reply);
+    });
+    var form = el('div', { class: 'eg-edit-reply-form' });
+    var input = el('input', { class: 'eg-edit-reply-input', type: 'text', placeholder: 'Reply…' });
+    var send = el('button', { class: 'eg-edit-reply-btn', text: 'Reply' });
+    send.onclick = function(ev) {
+      ev.stopPropagation();
+      var text = input.value.trim();
+      if (!text) return;
+      postReply(a.id, text).then(function() { input.value = ''; });
+    };
+    input.onkeydown = function(ev) {
+      ev.stopPropagation();
+      if (ev.key === 'Enter') { send.click(); }
+    };
+    input.onclick = function(ev) { ev.stopPropagation(); };
+    form.appendChild(input);
+    form.appendChild(send);
+    thread.appendChild(form);
+    card.appendChild(thread);
+
+    card.onclick = function() {
+      // Expand thread
+      var alreadyExpanded = card.classList.contains('expanded');
+      // Collapse all other expanded
+      Array.prototype.forEach.call(document.querySelectorAll('.eg-edit-ann-card.expanded'), function(c) {
+        if (c !== card) c.classList.remove('expanded');
+      });
+      if (!alreadyExpanded) card.classList.add('expanded');
+
+      // Scroll body to the anchor
+      scrollToAnnotation(a);
+    };
+
+    return card;
+  }
+
+  function postReply(annId, text) {
+    var body = {
+      author: window.__egEditAuthor || 'browser-user',
+      kind: 'discussion',
+      text: text,
+    };
+    return api('POST', '/api/edit/replies?doc=' + encodeURIComponent(state.docEncoded) + '&id=' + encodeURIComponent(annId), { body: body })
+      .then(function() {
+        return api('GET', '/api/edit/annotations?doc=' + encodeURIComponent(state.docEncoded));
+      })
+      .then(function(sidecar) {
+        state.sidecar = sidecar;
+        renderSidebar();
+        // Re-expand the card we just replied to
+        var card = document.querySelector('[data-ann-id="' + annId + '"]');
+        if (card) card.classList.add('expanded');
+      })
+      .catch(function(err) { toast('Reply failed: ' + err.message, true); });
+  }
+
+  function scrollToAnnotation(a) {
+    var paraId = a.selection && a.selection.paragraphId;
+    if (!paraId) return;
+    var node = document.querySelector('#eg-edit-body [data-para-id="' + cssEscape(paraId) + '"]');
+    if (!node) return;
+    node.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    // Find the highlight span if it's been decorated and flash it
+    var hl = node.querySelector('.eg-edit-highlight[data-ann-id="' + cssEscape(a.id) + '"]');
+    if (hl) {
+      hl.classList.remove('eg-flash');
+      void hl.offsetWidth; // restart animation
+      hl.classList.add('eg-flash');
+    }
+  }
+
+  function cssEscape(s) {
+    if (window.CSS && window.CSS.escape) return window.CSS.escape(s);
+    return String(s).replace(/[^a-zA-Z0-9_-]/g, function(c) { return '\\\\' + c; });
+  }
+
+  // ── Decorate body with highlight spans ──────────────────────────────
+  function decorateAnnotations() {
+    // Strip any existing highlights first
+    Array.prototype.forEach.call(document.querySelectorAll('#eg-edit-body .eg-edit-highlight'), function(el) {
+      var parent = el.parentNode;
+      while (el.firstChild) parent.insertBefore(el.firstChild, el);
+      parent.removeChild(el);
+      parent.normalize();
+    });
+
+    var anns = (state.sidecar && state.sidecar.annotations) || [];
+    anns.forEach(function(a) {
+      if (a.status === 'discarded') return;
+      var paraId = a.selection && a.selection.paragraphId;
+      if (!paraId) return;
+      var node = document.querySelector('#eg-edit-body [data-para-id="' + cssEscape(paraId) + '"]');
+      if (!node) return;
+      try { wrapRange(node, a); } catch (e) { /* skip on failure */ }
+    });
+  }
+
+  function wrapRange(paraNode, ann) {
+    var range = ann.selection.charRange;
+    if (!range) return;
+    var start = range[0], end = range[1];
+    var walker = document.createTreeWalker(paraNode, NodeFilter.SHOW_TEXT, null);
+    var off = 0;
+    var startNode = null, startOff = 0, endNode = null, endOff = 0;
+    var n;
+    while ((n = walker.nextNode())) {
+      var nlen = n.nodeValue.length;
+      if (!startNode && off + nlen >= start) {
+        startNode = n;
+        startOff = start - off;
+      }
+      if (!endNode && off + nlen >= end) {
+        endNode = n;
+        endOff = end - off;
+        break;
+      }
+      off += nlen;
+    }
+    if (!startNode || !endNode) return;
+
+    var r = document.createRange();
+    r.setStart(startNode, startOff);
+    r.setEnd(endNode, endOff);
+
+    var span = document.createElement('span');
+    span.className = 'eg-edit-highlight';
+    span.setAttribute('data-color', ann.classification == null ? 'null' : ann.classification);
+    span.setAttribute('data-ann-id', ann.id);
+    span.title = (ann.author || '') + ': ' + (ann.comment || '');
+    try {
+      r.surroundContents(span);
+    } catch (e) {
+      // Range crosses element boundaries — extract and wrap
+      var frag = r.extractContents();
+      span.appendChild(frag);
+      r.insertNode(span);
+    }
+  }
+
+  // ── Filter buttons ──────────────────────────────────────────────────
+  function setupFilterBar() {
+    var bar = $('#eg-edit-filter');
+    var buttons = bar.querySelectorAll('.eg-edit-filter-btn');
+    Array.prototype.forEach.call(buttons, function(btn) {
+      btn.onclick = function() {
+        Array.prototype.forEach.call(buttons, function(b) { b.classList.remove('active'); });
+        btn.classList.add('active');
+        state.activeFilter = btn.getAttribute('data-color') || 'all';
+        renderSidebar();
+      };
+    });
+    bar.querySelector('[data-color="all"]').classList.add('active');
+  }
+
+  // ── Refresh button ──────────────────────────────────────────────────
+  function setupRefresh() {
+    $('#eg-edit-refresh').onclick = function() {
+      loadAll();
+    };
+  }
+
+  // ── Initiative-mode toggle ──────────────────────────────────────────
+  function setupModeToggle() {
+    var inputs = document.querySelectorAll('input[name="eg-init-mode"]');
+    Array.prototype.forEach.call(inputs, function(inp) {
+      inp.onchange = function() {
+        if (inp.checked) state.initiativeMode = inp.value;
+      };
+    });
+  }
+
+  // ── Send to session ─────────────────────────────────────────────────
+  function setupSendButton() {
+    $('#eg-edit-send').onclick = function() {
+      var anns = (state.sidecar && state.sidecar.annotations) || [];
+      // Active annotations only (skip discarded/accepted)
+      var active = anns.filter(function(a) { return a.status === 'active' || a.status === 'orphaned'; });
+      if (active.length === 0) {
+        toast('No active annotations to send', true);
+        return;
+      }
+      var sessionId = (state.sidecar && state.sidecar.sessionId) || '';
+      var bundle = {
+        schemaVersion: 1,
+        docPath: state.doc,
+        sessionId: sessionId,
+        deliveredAt: new Date().toISOString(),
+        initiativeMode: state.initiativeMode,
+        annotations: active,
+      };
+      var marker = '#egregore-edit:v1 ' + state.doc;
+      var payload = marker + '\\n\\n' + JSON.stringify(bundle, null, 2);
+      copyToClipboard(payload).then(function() {
+        toast('Copied. Paste into your terminal session.');
+      }, function() {
+        toast('Copy failed — select payload manually.', true);
+      });
+    };
+  }
+
+  function copyToClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+    return new Promise(function(resolve, reject) {
+      try {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        var ok = document.execCommand('copy');
+        document.body.removeChild(ta);
+        ok ? resolve() : reject(new Error('execCommand failed'));
+      } catch (e) { reject(e); }
+    });
+  }
+
+  // ── Init ────────────────────────────────────────────────────────────
+  document.addEventListener('DOMContentLoaded', function() {
+    setupFilterBar();
+    setupRefresh();
+    setupSendButton();
+    setupModeToggle();
+    bootstrap();
+  });
+
+  // Expose for tests / dev
+  window.__egEditState = state;
+})();
+`;
+}