clay-server 4.0.0-beta.8 → 4.0.0

package/lib/public/modules/sticky-notes.js

@@ -1,43 +1,62 @@
+// The sticky-note canvas: the board of floating cards over the conversation.
+//
+// This module owns the notes map, visibility, the badges, and the WebSocket
+// handlers. Card markup and interactions live in sticky-notes-card.js, text
+// editing in sticky-notes-editor.js, and the leaf helpers in
+// sticky-notes-shared.js. The browse/index pane is sticky-notes-browser.js.
+
 import { refreshIcons, iconHtml } from './icons.js';
-import { VENDOR_AVATARS } from './app-rendering.js';
-import { extractMarkdown, getTitle, renderMiniMarkdown } from './sticky-note-markdown.js';
+import { renderMiniMarkdown } from './sticky-note-markdown.js';
+import { enhanceClayLogLinks } from './clay-log-links.js';
+import { isClosedNote, send, clampPos, clearNoteTimers, syncTitle } from './sticky-notes-shared.js';
+import { renderNote, closeColorPicker } from './sticky-notes-card.js';
+import { closeFormatToolbar, isFormatToolbarOpen } from './sticky-notes-editor.js';
 
-var ctx;
 var notes = new Map();  // id -> { data, el }
 var notesVisible = false;
-var archiveOpen = false;
-var updateTimers = {};
-var textTimers = {};
-var colorPickerEl = null;
-var formatToolbarEl = null;
 
-var NOTE_COLORS = ["purple", "green", "yellow", "blue", "pink", "orange"];
+// The canvas shows open notes only. Closed notes leave the canvas and live in
+// the browser's Closed tab until they are reopened.
+function openCount() {
+  var count = 0;
+  notes.forEach(function (entry) {
+    if (entry && !isClosedNote(entry.data)) count++;
+  });
+  return count;
+}
+
+// The browser pane registers here rather than being imported, so the canvas
+// module and the browser module never form an import cycle.
+var browserRefresh = null;
 
+export function setBrowserRefresh(fn) {
+  browserRefresh = typeof fn === "function" ? fn : null;
+}
 
-function getContainerBounds() {
-  var c = document.getElementById("sticky-notes-container");
-  if (!c || c.clientWidth === 0 || c.clientHeight === 0) return null;
-  return { w: c.clientWidth, h: c.clientHeight };
+function refreshBrowser() {
+  if (browserRefresh) browserRefresh();
 }
 
-function clampPos(x, y, noteW, noteH) {
-  var b = getContainerBounds();
-  if (!b) return { x: x, y: y };
-  return {
-    x: Math.max(0, Math.min(x, b.w - noteW)),
-    y: Math.max(0, Math.min(y, b.h - noteH)),
-  };
+// Read-only view of every note the client knows about, for the browser pane.
+export function listNoteData() {
+  var out = [];
+  notes.forEach(function (entry) { if (entry && entry.data) out.push(entry.data); });
+  return out;
 }
 
-function clampSize(x, y, w, h) {
-  var b = getContainerBounds();
-  if (!b) return { w: w, h: h };
-  return {
-    w: Math.min(w, b.w - x),
-    h: Math.min(h, b.h - y),
-  };
+// Bring one open note to the front of the canvas and flash it.
+export function focusNoteOnCanvas(id) {
+  var entry = notes.get(id);
+  if (!entry || isClosedNote(entry.data)) return;
+  showNotes();
+  send({ type: "note_bring_front", id: id });
+  if (entry.data.minimized) send({ type: "note_update", id: id, minimized: false });
+  if (!entry.el) return;
+  entry.el.classList.add("note-flash");
+  setTimeout(function () { if (entry.el) entry.el.classList.remove("note-flash"); }, 600);
 }
 
+
 function reclampAllNotes() {
   notes.forEach(function (entry) {
     var el = entry.el;
@@ -51,12 +70,10 @@ function reclampAllNotes() {
   });
 }
 
-export function initStickyNotes(_ctx) {
-  ctx = _ctx;
-
+export function initStickyNotes() {
   // Close format toolbar on outside click
   document.addEventListener("mousedown", function (e) {
-    if (formatToolbarEl && !e.target.closest(".sn-format-toolbar") && !e.target.closest(".sticky-note-text") && !e.target.closest(".sticky-note-rendered")) {
+    if (isFormatToolbarOpen() && !e.target.closest(".sn-format-toolbar") && !e.target.closest(".sticky-note-text") && !e.target.closest(".sticky-note-rendered")) {
       closeFormatToolbar();
     }
   });
@@ -94,7 +111,7 @@ export function createNote() {
   if (!container) return;
   // Scatter position so notes don't stack exactly
   var offset = (notes.size % 5) * 30;
-  wsSend({
+  send({
     type: "note_create",
     x: 60 + offset,
     y: 60 + offset,
@@ -106,673 +123,66 @@ export function createNote() {
 function updateBadge() {
   var badge = document.querySelector(".sticky-notes-count");
   if (!badge) return;
-  if (notes.size > 0) {
-    badge.textContent = notes.size;
+  var count = openCount();
+  if (count > 0) {
+    badge.textContent = count;
     badge.classList.remove("hidden");
   } else {
     badge.classList.add("hidden");
   }
 }
 
-// --- WS send helpers ---
-
-function wsSend(obj) {
-  if (ctx && ctx.ws && ctx.connected) {
-    ctx.ws.send(JSON.stringify(obj));
-  }
-}
-
-function debouncedUpdate(id, changes, delay) {
-  clearTimeout(updateTimers[id]);
-  updateTimers[id] = setTimeout(function () {
-    changes.type = "note_update";
-    changes.id = id;
-    wsSend(changes);
-  }, delay || 300);
-}
-
-function debouncedTextUpdate(id, text) {
-  clearTimeout(textTimers[id]);
-  textTimers[id] = setTimeout(function () {
-    wsSend({ type: "note_update", id: id, text: text });
-  }, 500);
-}
-
-function syncTitle(noteEl, text) {
-  var spacer = noteEl.querySelector(".sticky-note-spacer");
-  if (spacer) spacer.textContent = getTitle(text) || "Untitled";
-}
-
-// --- Note rendering ---
-
-function renderNote(data) {
-  var el = document.createElement("div");
-  el.className = "sticky-note";
-  el.dataset.noteId = data.id;
-  var clamped = clampPos(data.x, data.y, data.w, data.h);
-  el.style.left = clamped.x + "px";
-  el.style.top = clamped.y + "px";
-  el.style.width = data.w + "px";
-  el.style.height = data.h + "px";
-  el.style.zIndex = 100 + (data.zIndex || 0);
-  el.dataset.color = data.color || "purple";
-
-  if (data.minimized) el.classList.add("minimized");
-  if (data.hidden) el.classList.add("hidden");
-
-  // Header
-  var header = document.createElement("div");
-  header.className = "sticky-note-header";
-
-  if (data.origin && VENDOR_AVATARS[data.origin.vendor]) {
-    var originBadge = document.createElement("img");
-    originBadge.className = "sticky-note-agent-badge";
-    originBadge.src = VENDOR_AVATARS[data.origin.vendor];
-    originBadge.alt = "";
-    originBadge.title = "Created by " + data.origin.vendor;
-    header.appendChild(originBadge);
-  }
-
-  var closeBtn = document.createElement("button");
-  closeBtn.className = "sticky-note-btn sticky-note-close";
-  closeBtn.title = "Close";
-  closeBtn.innerHTML = iconHtml("x");
-  header.appendChild(closeBtn);
-
-  var minBtn = document.createElement("button");
-  minBtn.className = "sticky-note-btn sticky-note-min-btn";
-  minBtn.title = data.minimized ? "Expand" : "Minimize";
-  minBtn.innerHTML = data.minimized ? iconHtml("maximize-2") : iconHtml("minus");
-  header.appendChild(minBtn);
-
-  var spacer = document.createElement("div");
-  spacer.className = "sticky-note-spacer";
-  spacer.textContent = getTitle(data.text) || "Untitled";
-  header.appendChild(spacer);
-
-  var addBtn = document.createElement("button");
-  addBtn.className = "sticky-note-btn";
-  addBtn.title = "New note";
-  addBtn.innerHTML = iconHtml("plus");
-  addBtn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    createNote();
-  });
-  header.appendChild(addBtn);
-
-  var colorBtn = document.createElement("button");
-  colorBtn.className = "sticky-note-color-btn";
-  colorBtn.title = "Change color";
-  colorBtn.innerHTML = iconHtml("palette");
-  header.appendChild(colorBtn);
-
-  var mdBtn = document.createElement("button");
-  mdBtn.className = "sticky-note-btn sticky-note-md-btn";
-  mdBtn.title = "Edit markdown";
-  mdBtn.innerHTML = "<span class='sn-md-label'>MD</span>";
-  header.appendChild(mdBtn);
-
-  var opacityWrap = document.createElement("div");
-  opacityWrap.className = "sticky-note-opacity";
-  var opacitySlider = document.createElement("input");
-  opacitySlider.type = "range";
-  opacitySlider.min = "20";
-  opacitySlider.max = "100";
-  opacitySlider.value = String(Math.round((typeof data.opacity === "number" ? data.opacity : 0.64) * 100));
-  opacitySlider.className = "sticky-note-opacity-slider";
-  opacitySlider.title = "Opacity";
-  opacityWrap.appendChild(opacitySlider);
-  header.appendChild(opacityWrap);
-
-  // Apply saved opacity via CSS variable (not element opacity, so header stays visible on hover)
-  if (typeof data.opacity === "number") {
-    el.style.setProperty("--note-opacity", data.opacity);
-  }
-
-  opacitySlider.addEventListener("input", function (e) {
-    e.stopPropagation();
-    var val = parseInt(opacitySlider.value, 10) / 100;
-    el.style.setProperty("--note-opacity", val);
-  });
-  opacitySlider.addEventListener("change", function (e) {
-    e.stopPropagation();
-    var val = parseInt(opacitySlider.value, 10) / 100;
-    el.style.setProperty("--note-opacity", val);
-    debouncedUpdate(data.id, { opacity: val }, 300);
-  });
-  opacitySlider.addEventListener("mousedown", function (e) { e.stopPropagation(); });
-
-  el.appendChild(header);
-
-  // Body
-  var body = document.createElement("div");
-  body.className = "sticky-note-body";
-
-  // Hidden textarea as markdown data store
-  var textarea = document.createElement("textarea");
-  textarea.className = "sticky-note-text";
-  textarea.value = data.text || "";
-  textarea.style.display = "none";
-  body.appendChild(textarea);
-
-  // Contenteditable rendered view (primary editing surface)
-  var rendered = document.createElement("div");
-  rendered.className = "sticky-note-rendered";
-  rendered.contentEditable = "true";
-  rendered.spellcheck = true;
-  if (data.text && data.text.trim()) {
-    rendered.innerHTML = renderMiniMarkdown(data.text);
-  } else {
-    rendered.classList.add("is-empty");
-  }
-  body.appendChild(rendered);
-
-  el.appendChild(body);
-
-  // Resize handle
-  var resizeHandle = document.createElement("div");
-  resizeHandle.className = "sticky-note-resize";
-  el.appendChild(resizeHandle);
-
-  // --- Event handlers ---
-  setupDrag(el, spacer, data.id);
-  setupResize(el, resizeHandle, data.id);
-  setupTextEdit(textarea, rendered, data.id, mdBtn);
-  setupColorPicker(colorBtn, el, data.id);
-  setupMinimize(minBtn, el, data.id);
-  setupClose(closeBtn, el, data.id);
-  setupBringToFront(el, data.id);
-
-  refreshIcons();
-  return el;
-}
-
-// --- Drag ---
-
-function setupDrag(noteEl, spacerEl, noteId) {
-  var dragging = false;
-  var pointerId = null;
-  var startX, startY, origX, origY;
-
-  spacerEl.addEventListener("pointerdown", function (e) {
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    e.preventDefault();
-    dragging = true;
-    pointerId = e.pointerId;
-    startX = e.clientX;
-    startY = e.clientY;
-    origX = parseInt(noteEl.style.left) || 0;
-    origY = parseInt(noteEl.style.top) || 0;
-    noteEl.classList.add("dragging");
-    document.body.classList.add("sticky-note-interacting");
-    spacerEl.setPointerCapture(pointerId);
-  });
-
-  function onMove(e) {
-    if (!dragging || e.pointerId !== pointerId) return;
-    var dx = e.clientX - startX;
-    var dy = e.clientY - startY;
-    var c = clampPos(origX + dx, origY + dy, noteEl.offsetWidth, noteEl.offsetHeight);
-    noteEl.style.left = c.x + "px";
-    noteEl.style.top = c.y + "px";
-  }
-
-  function onUp(e) {
-    if (!dragging || (e && e.pointerId !== pointerId)) return;
-    dragging = false;
-    noteEl.classList.remove("dragging");
-    document.body.classList.remove("sticky-note-interacting");
-    if (pointerId !== null && spacerEl.hasPointerCapture(pointerId)) spacerEl.releasePointerCapture(pointerId);
-    pointerId = null;
-    debouncedUpdate(noteId, {
-      x: parseInt(noteEl.style.left),
-      y: parseInt(noteEl.style.top),
-    }, 200);
-  }
-
-  spacerEl.addEventListener("pointermove", onMove);
-  spacerEl.addEventListener("pointerup", onUp);
-  spacerEl.addEventListener("pointercancel", onUp);
-  spacerEl.addEventListener("lostpointercapture", onUp);
-}
-
-// --- Resize ---
-
-function setupResize(noteEl, handle, noteId) {
-  var resizing = false;
-  var pointerId = null;
-  var startX, startY, origW, origH;
-  var MIN_W = 160;
-  var MIN_H = 80;
-
-  handle.addEventListener("pointerdown", function (e) {
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-    resizing = true;
-    pointerId = e.pointerId;
-    startX = e.clientX;
-    startY = e.clientY;
-    origW = noteEl.offsetWidth;
-    origH = noteEl.offsetHeight;
-    noteEl.classList.add("resizing");
-    document.body.classList.add("sticky-note-interacting");
-    handle.setPointerCapture(pointerId);
-  });
-
-  function onMove(e) {
-    if (!resizing || e.pointerId !== pointerId) return;
-    var rawW = Math.max(MIN_W, origW + (e.clientX - startX));
-    var rawH = Math.max(MIN_H, origH + (e.clientY - startY));
-    var cs = clampSize(parseInt(noteEl.style.left) || 0, parseInt(noteEl.style.top) || 0, rawW, rawH);
-    noteEl.style.width = Math.max(MIN_W, cs.w) + "px";
-    noteEl.style.height = Math.max(MIN_H, cs.h) + "px";
-  }
-
-  function onUp(e) {
-    if (!resizing || (e && e.pointerId !== pointerId)) return;
-    resizing = false;
-    noteEl.classList.remove("resizing");
-    document.body.classList.remove("sticky-note-interacting");
-    if (pointerId !== null && handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
-    pointerId = null;
-    debouncedUpdate(noteId, {
-      w: noteEl.offsetWidth,
-      h: noteEl.offsetHeight,
-    }, 200);
-  }
-
-  handle.addEventListener("pointermove", onMove);
-  handle.addEventListener("pointerup", onUp);
-  handle.addEventListener("pointercancel", onUp);
-  handle.addEventListener("lostpointercapture", onUp);
-}
-
-// --- Text edit (contenteditable) ---
-
-// --- Format toolbar (WYSIWYG) ---
-
-var FORMAT_BUTTONS = [
-  { label: "B", title: "Bold", cls: "sn-fmt-bold", command: "bold" },
-  { label: "I", title: "Italic", cls: "sn-fmt-italic", command: "italic" },
-  { label: "S", title: "Strikethrough", cls: "sn-fmt-strike", command: "strikethrough" },
-  { label: "code-2", title: "Code", cls: "sn-fmt-code", command: "code", isIcon: true },
-];
-
-function closeFormatToolbar() {
-  if (formatToolbarEl) {
-    formatToolbarEl.remove();
-    formatToolbarEl = null;
-  }
-}
-
-function applyFormat(command, rendered) {
-  if (command === "code") {
-    var sel = window.getSelection();
-    if (!sel.rangeCount || sel.isCollapsed) return;
-    var range = sel.getRangeAt(0);
-    var ancestor = range.commonAncestorContainer;
-    var codeParent = (ancestor.nodeType === 3 ? ancestor.parentElement : ancestor);
-    if (codeParent && codeParent.closest && codeParent.closest("code")) {
-      // Unwrap: replace <code> with its text content
-      var codeEl = codeParent.closest("code");
-      var textNode = document.createTextNode(codeEl.textContent);
-      codeEl.parentNode.replaceChild(textNode, codeEl);
-      var newRange = document.createRange();
-      newRange.selectNodeContents(textNode);
-      sel.removeAllRanges();
-      sel.addRange(newRange);
-    } else {
-      // Wrap selection in <code>
-      var code = document.createElement("code");
-      try { range.surroundContents(code); } catch (e) {
-        var frag = range.extractContents();
-        code.appendChild(frag);
-        range.insertNode(code);
-      }
-    }
-  } else {
-    document.execCommand(command, false, null);
-  }
-  // Trigger sync
-  rendered.dispatchEvent(new Event("input", { bubbles: true }));
-}
-
-function showFormatToolbar(rendered) {
-  closeFormatToolbar();
-
-  var sel = window.getSelection();
-  if (!sel || !sel.rangeCount || sel.isCollapsed) return;
-  if (!sel.toString().trim()) return;
-
-  var range = sel.getRangeAt(0);
-  // When dragging outside the note, commonAncestorContainer may be a parent
-  // of rendered. Clamp the range to the rendered element so the toolbar shows.
-  if (!rendered.contains(range.commonAncestorContainer)) {
-    try {
-      var clampedRange = range.cloneRange();
-      if (range.startContainer === rendered || rendered.contains(range.startContainer)) {
-        clampedRange.selectNodeContents(rendered);
-        clampedRange.setStart(range.startContainer, range.startOffset);
-      } else if (range.endContainer === rendered || rendered.contains(range.endContainer)) {
-        clampedRange.selectNodeContents(rendered);
-        clampedRange.setEnd(range.endContainer, range.endOffset);
-      } else {
-        return;
-      }
-      range = clampedRange;
-    } catch (e) {
-      return;
-    }
-  }
-
-  var toolbar = document.createElement("div");
-  toolbar.className = "sn-format-toolbar";
-
-  for (var i = 0; i < FORMAT_BUTTONS.length; i++) {
-    (function (cfg) {
-      var btn = document.createElement("button");
-      btn.className = "sn-fmt-btn " + cfg.cls;
-      btn.title = cfg.title;
-      btn.innerHTML = cfg.isIcon ? iconHtml(cfg.label) : cfg.label;
-      btn.addEventListener("mousedown", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        applyFormat(cfg.command, rendered);
-        setTimeout(function () {
-          var s = window.getSelection();
-          if (s && !s.isCollapsed) {
-            showFormatToolbar(rendered);
-          } else {
-            closeFormatToolbar();
-          }
-        }, 0);
-      });
-      toolbar.appendChild(btn);
-    })(FORMAT_BUTTONS[i]);
-  }
-
-  refreshIcons();
-  document.body.appendChild(toolbar);
-  formatToolbarEl = toolbar;
-  positionToolbarAtRange(toolbar, range);
-}
-
-function positionToolbarAtRange(toolbar, range) {
-  var rect = range.getBoundingClientRect();
-  var toolbarX = rect.left + rect.width / 2;
-  var toolbarY = rect.top - 4;
-
-  toolbar.style.left = toolbarX + "px";
-  toolbar.style.top = toolbarY + "px";
-
-  requestAnimationFrame(function () {
-    var tw = toolbar.offsetWidth;
-    var th = toolbar.offsetHeight;
-    var x = Math.max(8, Math.min(toolbarX - tw / 2, window.innerWidth - tw - 8));
-    var y = Math.max(8, toolbarY - th);
-    toolbar.style.left = x + "px";
-    toolbar.style.top = y + "px";
-  });
-}
-
-function setupTextEdit(textarea, rendered, noteId, mdBtn) {
-  var noteEl = textarea.closest(".sticky-note");
-  var mdMode = false;
-
-  function saveRenderedMarkdown() {
-    var markdown = extractMarkdown(rendered);
-    textarea.value = markdown;
-    debouncedTextUpdate(noteId, markdown);
-    syncTitle(noteEl, markdown);
-    rendered.classList.toggle("is-empty", !markdown.trim());
-  }
-
-  function toggleChecklistItem(check) {
-    var checked = !check.classList.contains("checked");
-    check.classList.toggle("checked", checked);
-    check.textContent = checked ? "✓" : "☐";
-    check.setAttribute("aria-checked", checked ? "true" : "false");
-    saveRenderedMarkdown();
-  }
-
-  // MD button: toggle between contenteditable rendered view and raw textarea
-  mdBtn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    mdMode = !mdMode;
-    if (mdMode) {
-      // Switch to raw markdown editing
-      var md = extractMarkdown(rendered);
-      textarea.value = md;
-      textarea.style.display = "";
-      rendered.style.display = "none";
-      mdBtn.classList.add("active");
-      textarea.focus();
-    } else {
-      // Switch back to contenteditable rendered view
-      var md = textarea.value;
-      debouncedTextUpdate(noteId, md);
-      syncTitle(noteEl, md);
-      if (md.trim()) {
-        rendered.innerHTML = renderMiniMarkdown(md);
-        rendered.classList.remove("is-empty");
-      } else {
-        rendered.innerHTML = "";
-        rendered.classList.add("is-empty");
-      }
-      textarea.style.display = "none";
-      rendered.style.display = "";
-      mdBtn.classList.remove("active");
-      rendered.focus();
-    }
-  });
-
-  // Sync contenteditable changes to textarea (data store) and save
-  rendered.addEventListener("input", function () {
-    saveRenderedMarkdown();
-  });
-
-  rendered.addEventListener("click", function (e) {
-    var check = e.target.closest && e.target.closest(".sn-check");
-    if (!check || !rendered.contains(check)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    toggleChecklistItem(check);
-  });
-
-  // On blur, re-render to normalize HTML structure
-  rendered.addEventListener("blur", function (e) {
-    // Don't re-render if clicking format toolbar (it prevents default, but just in case)
-    if (e.relatedTarget && e.relatedTarget.closest && e.relatedTarget.closest(".sn-format-toolbar")) return;
-    closeFormatToolbar();
-    var md = extractMarkdown(rendered);
-    textarea.value = md;
-    if (md.trim()) {
-      rendered.innerHTML = renderMiniMarkdown(md);
-      rendered.classList.remove("is-empty");
-    } else {
-      rendered.innerHTML = "";
-      rendered.classList.add("is-empty");
-    }
-  });
-
-  // Show format toolbar when selecting text
-  rendered.addEventListener("mouseup", function (e) {
-    if (e.target.tagName === "A") return;
-    setTimeout(function () {
-      var sel = window.getSelection();
-      if (sel && !sel.isCollapsed && sel.toString().trim()) {
-        showFormatToolbar(rendered);
-      } else {
-        closeFormatToolbar();
-      }
-    }, 10);
-  });
-
-  // Keyboard selection
-  rendered.addEventListener("keyup", function (e) {
-    if (e.shiftKey || e.key === "Shift") {
-      var sel = window.getSelection();
-      if (sel && !sel.isCollapsed) {
-        showFormatToolbar(rendered);
-      } else {
-        closeFormatToolbar();
-      }
-    }
-  });
-
-  // Insert <br> on Enter instead of <div>
-  rendered.addEventListener("keydown", function (e) {
-    if (e.target.classList && e.target.classList.contains("sn-check") &&
-        (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      toggleChecklistItem(e.target);
-      return;
-    }
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      document.execCommand("insertLineBreak");
-    }
-  });
-
-  // Paste as plain text to avoid importing HTML formatting
-  rendered.addEventListener("paste", function (e) {
-    e.preventDefault();
-    var text = (e.clipboardData || window.clipboardData).getData("text/plain");
-    document.execCommand("insertText", false, text);
-  });
-
-  // Prevent drag when clicking body
-  rendered.addEventListener("mousedown", function (e) {
-    e.stopPropagation();
-  });
-
-  // Sync textarea edits when in MD mode
-  textarea.addEventListener("input", function () {
-    if (!mdMode) return;
-    debouncedTextUpdate(noteId, textarea.value);
-    syncTitle(noteEl, textarea.value);
-  });
-
-  textarea.addEventListener("mousedown", function (e) {
-    e.stopPropagation();
-  });
-}
-
-// --- Color picker ---
-
-function closeColorPicker() {
-  if (colorPickerEl) {
-    colorPickerEl.remove();
-    colorPickerEl = null;
-  }
-}
-
-function setupColorPicker(btn, noteEl, noteId) {
-  btn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    showColorPicker(btn, noteEl, noteId);
-  });
-}
-
-function showColorPicker(anchor, noteEl, noteId) {
-  closeColorPicker();
-
-  var picker = document.createElement("div");
-  picker.className = "sticky-note-color-picker";
-
-  for (var i = 0; i < NOTE_COLORS.length; i++) {
-    (function (color) {
-      var dot = document.createElement("button");
-      dot.className = "sticky-note-color-dot";
-      dot.dataset.color = color;
-      if (noteEl.dataset.color === color) dot.classList.add("active");
-      dot.addEventListener("click", function (e) {
-        e.stopPropagation();
-        noteEl.dataset.color = color;
-        wsSend({ type: "note_update", id: noteId, color: color });
-        closeColorPicker();
-      });
-      picker.appendChild(dot);
-    })(NOTE_COLORS[i]);
-  }
-
-  document.body.appendChild(picker);
-  colorPickerEl = picker;
-
-  // Position relative to anchor
-  var rect = anchor.getBoundingClientRect();
-  picker.style.left = rect.left + "px";
-  picker.style.top = (rect.bottom + 4) + "px";
-
-  // Close on outside click
-  setTimeout(function () {
-    document.addEventListener("click", function closeHandler() {
-      closeColorPicker();
-      document.removeEventListener("click", closeHandler);
-    });
-  }, 0);
-}
-
-// --- Minimize ---
-
-function setupMinimize(btn, noteEl, noteId) {
-  btn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    var isMinimized = noteEl.classList.toggle("minimized");
-    btn.innerHTML = isMinimized ? iconHtml("maximize-2") : iconHtml("minus");
-    btn.title = isMinimized ? "Expand" : "Minimize";
-    refreshIcons();
-    wsSend({ type: "note_update", id: noteId, minimized: isMinimized });
-  });
-}
-
-// --- Close (hide) note ---
-
-function setupClose(btn, noteEl, noteId) {
-  btn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    noteEl.classList.add("hidden");
-    wsSend({ type: "note_update", id: noteId, hidden: true });
-  });
-}
-
-// --- Bring to front ---
-
-function setupBringToFront(noteEl, noteId) {
-  noteEl.addEventListener("mousedown", function (e) {
-    // Skip bring-to-front when clicking header buttons to avoid
-    // race condition where server response replaces innerHTML
-    // between mousedown and click, causing the click event to be lost
-    if (e.target.closest("button")) return;
-    wsSend({ type: "note_bring_front", id: noteId });
-  });
-}
-
 // --- WS message handlers ---
 
 export function handleNotesList(msg) {
   var container = document.getElementById("sticky-notes-container");
   if (!container) return;
 
-  // Clear existing
-  container.innerHTML = "";
-  notes.clear();
-
+  // Keyed reconciliation, never a clear-and-rebuild. A reconnect re-sends this
+  // list unchanged; tearing every note down and recreating it made all the
+  // floating cards vanish and reappear, and destroyed any open editor.
   var list = msg.notes || [];
-  for (var i = 0; i < list.length; i++) {
-    var el = renderNote(list[i]);
-    notes.set(list[i].id, { data: list[i], el: el });
+  var seen = {};
+  var created = false;
+  var i;
+
+  for (i = 0; i < list.length; i++) {
+    var data = list[i];
+    if (!data || !data.id) continue;
+    seen[data.id] = true;
+    var entry = notes.get(data.id);
+    if (entry && entry.el && entry.el.parentNode === container) {
+      patchNote(entry, data);
+      continue;
+    }
+    var el = renderNote(data);
+    notes.set(data.id, { data: data, el: el });
     container.appendChild(el);
+    created = true;
+  }
+
+  // Remove notes the server no longer lists.
+  var staleIds = [];
+  notes.forEach(function (value, id) {
+    if (!seen[id]) staleIds.push(id);
+  });
+  for (i = 0; i < staleIds.length; i++) {
+    var stale = notes.get(staleIds[i]);
+    if (stale && stale.el && stale.el.parentNode) stale.el.parentNode.removeChild(stale.el);
+    notes.delete(staleIds[i]);
   }
 
+  // renderNote already refreshes icons for the nodes it builds; an all-patch
+  // pass introduces no new Lucide markup and must not trigger a document scan.
+  if (created) refreshIcons();
+
   updateBadge();
   updateSidebarBadge();
+  refreshBrowser();
 
-  // If user already has notes, they know the feature (no onboarding needed)
-
-  // Auto-show if there are notes
-  if (list.length > 0 && !notesVisible) {
+  // Auto-show only when something is actually asking for attention. A board of
+  // nothing but closed notes must not pop the canvas open.
+  if (openCount() > 0 && !notesVisible) {
     notesVisible = true;
     container.classList.remove("hidden");
   }
@@ -790,9 +200,7 @@ export function handleNoteCreated(msg) {
   container.appendChild(el);
   updateBadge();
   updateSidebarBadge();
-
-  // Re-render archive if open
-  if (archiveOpen) renderArchiveCards();
+  refreshBrowser();
 
   // Show container if hidden
   if (!notesVisible) {
@@ -801,62 +209,91 @@ export function handleNoteCreated(msg) {
   }
 }
 
-export function handleNoteUpdated(msg) {
-  if (!msg.note) return;
-  var entry = notes.get(msg.note.id);
-  if (!entry) return;
-
-  entry.data = msg.note;
-
-  // Update DOM
-  entry.el.style.left = msg.note.x + "px";
-  entry.el.style.top = msg.note.y + "px";
-  entry.el.style.width = msg.note.w + "px";
-  entry.el.style.height = msg.note.h + "px";
-  entry.el.style.zIndex = 100 + (msg.note.zIndex || 0);
-  entry.el.dataset.color = msg.note.color || "purple";
-
-  // Update text only if not actively editing (check rendered or textarea focus)
-  var textarea = entry.el.querySelector(".sticky-note-text");
-  var rendered = entry.el.querySelector(".sticky-note-rendered");
-  if (rendered && rendered !== document.activeElement && textarea !== document.activeElement) {
-    if (textarea) textarea.value = msg.note.text || "";
-    if (msg.note.text && msg.note.text.trim()) {
-      rendered.innerHTML = renderMiniMarkdown(msg.note.text);
+// Patch one existing note element in place from a server payload.
+//
+// Geometry, z-order, colour, and opacity are plain style writes and are always
+// applied. The rendered markdown is only replaced when the text actually
+// changed and the note is not being edited, so a geometry-only or z-only
+// update never destroys the user's caret, selection, or in-progress draft.
+// Returns true when icon markup was replaced, so the caller can decide whether
+// a Lucide pass is needed at all.
+function patchNote(entry, next) {
+  if (!entry || !next) return false;
+  var previous = entry.data || {};
+  entry.data = next;
+  var el = entry.el;
+
+  el.style.left = next.x + "px";
+  el.style.top = next.y + "px";
+  el.style.width = next.w + "px";
+  el.style.height = next.h + "px";
+  el.style.zIndex = 100 + (next.zIndex || 0);
+  el.dataset.color = next.color || "purple";
+
+  var textarea = el.querySelector(".sticky-note-text");
+  var rendered = el.querySelector(".sticky-note-rendered");
+  var nextText = next.text || "";
+  var editing = rendered === document.activeElement || textarea === document.activeElement;
+  // A draft the user typed but has not committed must survive a redraw.
+  var hasDraft = !!(textarea && textarea.value !== (previous.text || ""));
+  var textChanged = nextText !== (previous.text || "");
+  if (rendered && !editing && !hasDraft && textChanged) {
+    if (textarea) textarea.value = nextText;
+    if (nextText.trim()) {
+      rendered.innerHTML = renderMiniMarkdown(nextText);
+      enhanceClayLogLinks(rendered);
       rendered.classList.remove("is-empty");
     } else {
       rendered.innerHTML = "";
       rendered.classList.add("is-empty");
     }
-    syncTitle(entry.el, msg.note.text);
+    syncTitle(el, nextText);
   }
 
-  // Handle opacity
-  if (typeof msg.note.opacity === "number") {
-    entry.el.style.setProperty("--note-opacity", msg.note.opacity);
-    var slider = entry.el.querySelector(".sticky-note-opacity-slider");
-    if (slider) slider.value = String(Math.round(msg.note.opacity * 100));
+  if (typeof next.opacity === "number") {
+    el.style.setProperty("--note-opacity", next.opacity);
+    var slider = el.querySelector(".sticky-note-opacity-slider");
+    if (slider) slider.value = String(Math.round(next.opacity * 100));
   }
 
-  // Handle hidden state
-  if (msg.note.hidden) {
-    entry.el.classList.add("hidden");
+  if (isClosedNote(next)) el.classList.add("hidden");
+  else el.classList.remove("hidden");
+
+  // The minimize button swaps its icon, which is the only path here that can
+  // introduce fresh Lucide markup.
+  var iconsReplaced = false;
+  var wasMinimized = el.classList.contains("minimized");
+  var minBtn = el.querySelector(".sticky-note-min-btn");
+  if (next.minimized) {
+    el.classList.add("minimized");
+    if (minBtn && !wasMinimized) {
+      minBtn.innerHTML = iconHtml("maximize-2");
+      minBtn.title = "Expand";
+      iconsReplaced = true;
+    }
   } else {
-    entry.el.classList.remove("hidden");
+    el.classList.remove("minimized");
+    if (minBtn && wasMinimized) {
+      minBtn.innerHTML = iconHtml("minus");
+      minBtn.title = "Minimize";
+      iconsReplaced = true;
+    }
   }
+  return iconsReplaced;
+}
 
-  var minBtn = entry.el.querySelector(".sticky-note-min-btn");
-  if (msg.note.minimized) {
-    entry.el.classList.add("minimized");
-    if (minBtn) { minBtn.innerHTML = iconHtml("maximize-2"); minBtn.title = "Expand"; }
-  } else {
-    entry.el.classList.remove("minimized");
-    if (minBtn) { minBtn.innerHTML = iconHtml("minus"); minBtn.title = "Minimize"; }
-  }
-  refreshIcons();
+export function handleNoteUpdated(msg) {
+  if (!msg.note) return;
+  var entry = notes.get(msg.note.id);
+  if (!entry) return;
 
-  // Re-render archive if open (text or color may have changed)
-  if (archiveOpen) renderArchiveCards();
+  if (patchNote(entry, msg.note)) refreshIcons();
+
+  // A close or reopen arrives as an ordinary update, so the canvas count and
+  // the browser both follow from the same message.
+  updateBadge();
+  updateSidebarBadge();
+  refreshBrowser();
 }
 
 export function handleNoteWritten(msg) {
@@ -870,6 +307,8 @@ export function handleNoteWritten(msg) {
   }, 2100);
 }
 
+// Defensive only. The server no longer deletes notes and never sends this, but
+// an older daemon on the other end of the socket still must not corrupt state.
 export function handleNoteDeleted(msg) {
   var entry = notes.get(msg.id);
   if (!entry) return;
@@ -878,14 +317,8 @@ export function handleNoteDeleted(msg) {
   updateBadge();
   updateSidebarBadge();
 
-  // Clear debounce timers
-  clearTimeout(updateTimers[msg.id]);
-  clearTimeout(textTimers[msg.id]);
-  delete updateTimers[msg.id];
-  delete textTimers[msg.id];
-
-  // Re-render archive if open
-  if (archiveOpen) renderArchiveCards();
+  clearNoteTimers(msg.id);
+  refreshBrowser();
 }
 
 // --- Sidebar badge ---
@@ -893,224 +326,15 @@ export function handleNoteDeleted(msg) {
 function updateSidebarBadge() {
   var badge = document.getElementById("sticky-notes-sidebar-count");
   if (!badge) return;
-  if (notes.size > 0) {
-    badge.textContent = notes.size;
+  var count = openCount();
+  if (count > 0) {
+    badge.textContent = count;
     badge.classList.remove("hidden");
   } else {
     badge.classList.add("hidden");
   }
 }
 
-// --- Notes Archive View ---
-
-function renderArchiveCards() {
-  var grid = document.getElementById("notes-archive-grid");
-  if (!grid) return;
-
-  grid.innerHTML = "";
-
-  if (notes.size === 0) {
-    var empty = document.createElement("div");
-    empty.className = "notes-archive-empty";
-    empty.innerHTML = iconHtml("sticky-note") + "<p>Keep what matters across sessions</p><p class=\"notes-archive-empty-sub\">Use sticky notes for checklists, goals, handoffs, and durable project knowledge. You and every Clay agent can find them in future sessions.</p><p class=\"notes-archive-empty-sub\">Create one with the " + iconHtml("sticky-note") + " button in the title bar</p>";
-    grid.appendChild(empty);
-    refreshIcons();
-    return;
-  }
-
-  // Sort by creation time (id is timestamp-based) — newest first
-  var sorted = Array.from(notes.values()).sort(function (a, b) {
-    return (b.data.id || "").localeCompare(a.data.id || "");
-  });
-
-  for (var i = 0; i < sorted.length; i++) {
-    (function (noteData) {
-      var card = document.createElement("div");
-      card.className = "notes-archive-card" + (noteData.data.hidden ? " archived" : "");
-      card.dataset.color = noteData.data.color || "purple";
-
-      // Header with title + delete
-      var header = document.createElement("div");
-      header.className = "notes-archive-card-header";
-
-      var title = document.createElement("div");
-      title.className = "notes-archive-card-title";
-      title.textContent = getTitle(noteData.data.text) || "Untitled";
-      header.appendChild(title);
-
-      var deleteBtn = document.createElement("button");
-      deleteBtn.className = "notes-archive-card-delete";
-      deleteBtn.title = "Delete permanently";
-      deleteBtn.innerHTML = iconHtml("trash-2");
-      deleteBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        // Confirm before permanent delete
-        if (card.classList.contains("confirm-delete")) {
-          wsSend({ type: "note_delete", id: noteData.data.id });
-          card.classList.add("deleting");
-          return;
-        }
-        card.classList.add("confirm-delete");
-        deleteBtn.title = "Click again to confirm";
-        setTimeout(function () {
-          card.classList.remove("confirm-delete");
-          deleteBtn.title = "Delete permanently";
-        }, 2000);
-      });
-      // Restore button (only for archived/hidden notes)
-      if (noteData.data.hidden) {
-        var restoreBtn = document.createElement("button");
-        restoreBtn.className = "notes-archive-card-restore";
-        restoreBtn.title = "Restore to canvas";
-        restoreBtn.innerHTML = iconHtml("rotate-ccw") + "<span>Restore</span>";
-        restoreBtn.addEventListener("click", function (e) {
-          e.stopPropagation();
-          wsSend({ type: "note_update", id: noteData.data.id, hidden: false });
-          noteData.el.classList.remove("hidden");
-          noteData.data.hidden = false;
-          renderArchiveCards();
-        });
-        header.appendChild(restoreBtn);
-      }
-
-      header.appendChild(deleteBtn);
-      card.appendChild(header);
-
-      // Body (rendered markdown)
-      var body = document.createElement("div");
-      body.className = "notes-archive-card-body";
-      var bodyLines = (noteData.data.text || "").split("\n").slice(1).join("\n").trim();
-      if (bodyLines) {
-        body.innerHTML = renderMiniMarkdown("_\n" + bodyLines).replace('<div class="sn-title">_</div>', "");
-      }
-      card.appendChild(body);
-
-      // Color strip at bottom
-      var colorStrip = document.createElement("div");
-      colorStrip.className = "notes-archive-card-color";
-      card.appendChild(colorStrip);
-
-      // Click card → close archive, jump to note on canvas
-      card.addEventListener("click", function () {
-        closeArchive();
-        showNotes();
-        // Un-hide if needed
-        if (noteData.data.hidden) {
-          wsSend({ type: "note_update", id: noteData.data.id, hidden: false });
-          noteData.el.classList.remove("hidden");
-        }
-        // Bring note to front
-        wsSend({ type: "note_bring_front", id: noteData.data.id });
-        // Un-minimize if needed
-        if (noteData.data.minimized) {
-          wsSend({ type: "note_update", id: noteData.data.id, minimized: false });
-        }
-        // Flash the note
-        var noteEl = noteData.el;
-        if (noteEl) {
-          noteEl.classList.add("note-flash");
-          setTimeout(function () { noteEl.classList.remove("note-flash"); }, 600);
-        }
-      });
-
-      grid.appendChild(card);
-    })(sorted[i]);
-  }
-
-  refreshIcons();
-}
-
-export function openArchive() {
-  if (archiveOpen) return;
-  archiveOpen = true;
-
-  var messagesEl = document.getElementById("messages");
-  var appEl = document.getElementById("app");
-  var inputArea = document.getElementById("input-area");
-  var titleBar = document.querySelector("#main-column > .title-bar-content");
-  var notesContainer = document.getElementById("sticky-notes-container");
-
-  // Hide messages, input area, session title bar, and floating notes
-  if (messagesEl) messagesEl.classList.add("hidden");
-  if (inputArea) inputArea.classList.add("hidden");
-  if (titleBar) titleBar.classList.add("hidden");
-  if (notesContainer) notesContainer.classList.add("hidden");
-
-  // Create or show archive container
-  var archive = document.getElementById("notes-archive");
-  if (!archive) {
-    archive = document.createElement("div");
-    archive.id = "notes-archive";
-
-    var header = document.createElement("div");
-    header.className = "notes-archive-header";
-
-    var titleWrap = document.createElement("div");
-    titleWrap.className = "notes-archive-title-wrap";
-    titleWrap.innerHTML = iconHtml("sticky-note") + "<h2>Sticky Notes</h2><span class=\"notes-archive-count\"></span>";
-    header.appendChild(titleWrap);
-
-    var closeBtn = document.createElement("button");
-    closeBtn.className = "notes-archive-close";
-    closeBtn.title = "Back to chat";
-    closeBtn.innerHTML = iconHtml("x");
-    closeBtn.addEventListener("click", function () {
-      closeArchive();
-    });
-    header.appendChild(closeBtn);
-
-    archive.appendChild(header);
-
-    var grid = document.createElement("div");
-    grid.id = "notes-archive-grid";
-    grid.className = "notes-archive-grid";
-    archive.appendChild(grid);
-
-    if (appEl) appEl.appendChild(archive);
-  }
-
-  archive.classList.remove("hidden");
-
-  // Update count
-  var countEl = archive.querySelector(".notes-archive-count");
-  if (countEl) countEl.textContent = notes.size + " note" + (notes.size !== 1 ? "s" : "");
-
-  renderArchiveCards();
-
-  // Mark sidebar button active
-  var sidebarBtn = document.getElementById("sticky-notes-sidebar-btn");
-  if (sidebarBtn) sidebarBtn.classList.add("active");
-
-  refreshIcons();
-}
-
-export function closeArchive() {
-  if (!archiveOpen) return;
-  archiveOpen = false;
-
-  var archive = document.getElementById("notes-archive");
-  var messagesEl = document.getElementById("messages");
-  var inputArea = document.getElementById("input-area");
-  var titleBar = document.querySelector("#main-column > .title-bar-content");
-  var notesContainer = document.getElementById("sticky-notes-container");
-
-  if (archive) archive.classList.add("hidden");
-  if (messagesEl) messagesEl.classList.remove("hidden");
-  if (inputArea) inputArea.classList.remove("hidden");
-  if (titleBar) titleBar.classList.remove("hidden");
-
-  // Restore floating notes if they were visible before
-  if (notesContainer && notesVisible) notesContainer.classList.remove("hidden");
-
-  // Un-mark sidebar button
-  var sidebarBtn = document.getElementById("sticky-notes-sidebar-btn");
-  if (sidebarBtn) sidebarBtn.classList.remove("active");
-}
-
-export function isArchiveOpen() {
-  return archiveOpen;
-}
-
 export function isNotesVisible() {
   return notesVisible;
 }