clay-server 5.2.0-beta.1 → 5.2.0-beta.11

package/lib/public/modules/split-pane-renderer.js

@@ -6,6 +6,8 @@ import { formatTokens } from './app-panels.js';
 import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { createPermissionControl, bindPermissionControl, renderPermissionControl } from './permission-control.js';
 import { splitGroupRoles } from './split-group-helpers.js';
+import { paneTarget, livePaneBinding, samePaneTarget } from './pane-binding.js';
+import { syncPairChrome } from './split-pair-ui.js';
 
 function sessionById(sessionId) {
   var sessions = getCachedSessions() || [];
@@ -17,17 +19,31 @@ function paneUrl(pane) {
   return "/p/" + encodeURIComponent(pane.slug) + "/?pane=1&session=" + encodeURIComponent(pane.sessionId);
 }
 
+function headerBindingStamp(frame) {
+  var live = frame.clayPane && frame.clayPane.identity();
+  return JSON.stringify([frame.dataset.sessionId, frame.dataset.sessionOriginId,
+    live && live.binding && live.binding.requestId, live && live.binding && live.binding.generation]);
+}
+
 function startPaneRename(header, titleEl, pane) {
   if (header.querySelector(".split-pane-rename-input")) return;
   var input = document.createElement("input");
   input.type = "text"; input.className = "split-pane-rename-input"; input.value = pane.title;
   titleEl.style.display = "none"; header.insertBefore(input, titleEl); input.focus(); input.select();
   var done = false;
+  var section = header.parentNode, frame = section.querySelector('.split-pane-frame');
+  var origin = frame.dataset.sessionOriginId, binding = frame.clayPane && frame.clayPane.identity().binding, socket = getWs();
+  function current() {
+    var live = frame.clayPane && frame.clayPane.identity();
+    return header.isConnected && !header.inert && socket === getWs() && store.get('connected') &&
+      frame.dataset.sessionId === String(pane.sessionId) && frame.dataset.sessionOriginId === origin && !frame.dataset.requestedSessionId &&
+      (!frame.clayPane || livePaneBinding(frame) && live.binding === binding);
+  }
   function finish(commit) {
     if (done) return;
     done = true;
     var newTitle = input.value.trim(); input.remove(); titleEl.style.display = "";
-    if (!commit || !newTitle || newTitle === pane.title) return;
+    if (!commit || !current() || !newTitle || newTitle === pane.title) return;
     pane.title = newTitle; titleEl.textContent = newTitle;
     var ws = getWs();
     if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: "rename_session", id: pane.sessionId, title: newTitle }));
@@ -37,6 +53,7 @@ function startPaneRename(header, titleEl, pane) {
     if (event.key === "Escape") { event.preventDefault(); finish(false); }
   });
   input.addEventListener("blur", function () { finish(true); });
+  header.addEventListener('clay-pane-retarget', function cancel() { finish(false); header.removeEventListener('clay-pane-retarget', cancel); });
   input.addEventListener("click", function (event) { event.stopPropagation(); });
 }
 
@@ -73,33 +90,97 @@ export function createSplitPane(pane, closePane) {
   var vendorIcon = document.createElement("img"); vendorIcon.className = "split-pane-vendor";
   vendorIcon.src = VENDOR_AVATARS[vendor] || VENDOR_AVATARS.claude; vendorIcon.alt = ""; vendorIcon.title = VENDOR_NAMES[vendor] || vendor; header.appendChild(vendorIcon);
   var title = document.createElement("span"); title.className = "split-pane-title"; title.textContent = pane.title; title.title = "Rename session";
-  title.addEventListener("click", function () { startPaneRename(header, title, pane); }); header.appendChild(title);
+  title.addEventListener("click", function () { var current = sessionById(Number(paneEl.dataset.sessionId)); if (current) startPaneRename(header, title, { sessionId: current.id, title: current.title }); }); header.appendChild(title);
   var frame = document.createElement("iframe"); frame.className = "split-pane-frame"; frame.dataset.projectSlug = pane.slug;
   frame.dataset.sessionId = String(pane.sessionId); frame.src = paneUrl(pane); frame.title = pane.title;
+  frame.dataset.sessionOriginId = session && session.sessionOriginId || '';
+  header.addEventListener('pointerdown', function () { header.dataset.pointerSessionId = frame.dataset.sessionId; header.dataset.pointerBinding = headerBindingStamp(frame); });
+  header.addEventListener('click', function (event) {
+    if (frame.clayPane && (!livePaneBinding(frame) || event.detail && header.dataset.pointerBinding !== headerBindingStamp(frame))) {
+      event.preventDefault(); event.stopImmediatePropagation();
+    }
+  }, true);
+  ['keydown', 'keyup'].forEach(function (name) {
+    header.addEventListener(name, function (event) {
+      var stamp = headerBindingStamp(frame);
+      if (name === 'keydown' && !event.repeat) header.dataset.keyBinding = stamp;
+      if (header.inert || header.dataset.keyBinding !== stamp) { event.preventDefault(); event.stopImmediatePropagation(); }
+    }, true);
+  });
   var ctxChip = document.createElement("button"); ctxChip.type = "button"; ctxChip.className = "split-pane-context"; ctxChip.title = "Context usage";
   ctxChip.innerHTML = '<span class="split-pane-context-bar"><span class="split-pane-context-fill"></span></span><span class="split-pane-context-label"></span>';
-  ctxChip.addEventListener("click", function () { if (frame.contentWindow) frame.contentWindow.postMessage({ type: "clay-pane-toggle-context" }, window.location.origin); }); header.appendChild(ctxChip);
+  ctxChip.addEventListener("click", function () { if (frame.contentWindow && (!frame.clayPane || livePaneBinding(frame))) frame.contentWindow.postMessage({ type: "clay-pane-toggle-context", paneBinding: frame.clayPane && frame.clayPane.identity().binding }, window.location.origin); }); header.appendChild(ctxChip);
   var fullAccess = createPermissionControl("split-pane-full-access hidden", "Driver session permission mode");
-  updatePaneFullAccessButton(fullAccess, session); bindPermissionControl(fullAccess, function () { return permissionState(sessionById(pane.sessionId)); }); header.appendChild(fullAccess); header.insertBefore(fullAccess, ctxChip);
+  updatePaneFullAccessButton(fullAccess, session); bindPermissionControl(fullAccess, function () { return permissionState(sessionById(Number(paneEl.dataset.sessionId))); }); header.appendChild(fullAccess); header.insertBefore(fullAccess, ctxChip);
   var close = document.createElement("button"); close.type = "button"; close.className = "split-pane-close"; close.title = "Close pane"; close.setAttribute("aria-label", "Close pane"); close.innerHTML = iconHtml("x");
   close.dataset.sessionId = String(pane.sessionId); close.addEventListener("click", function () { closePane(Number(this.dataset.sessionId)); }); header.appendChild(close);
+  frame.addEventListener('clay-pane-ready', function () {
+    var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId), current = sessionById(id);
+    var live = frame.clayPane && frame.clayPane.identity(), target = paneTarget(store.snap(), getCachedSessions(), id);
+    if (!current || !live || !live.ready || !samePaneTarget(target, live.binding) || live.sessionId !== id) return;
+    frame.dataset.sessionId = String(id); delete frame.dataset.requestedSessionId;
+    frame.dataset.sessionOriginId = live.binding.sessionOriginId;
+    updateSplitPaneMetadata(paneEl, { slug: frame.dataset.projectSlug, sessionId: id, title: current.title });
+    syncPairChrome(paneEl.parentNode, store.get('splitPanes'));
+  });
+  frame.addEventListener('clay-pane-activation-failed', function () {
+    var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId);
+    var fallbackTarget = paneTarget(store.snap(), getCachedSessions(), id);
+    if (!fallbackTarget) { header.inert = true; return; }
+    frame.dataset.sessionOriginId = fallbackTarget.sessionOriginId;
+    frame.src = paneUrl({ slug: frame.dataset.projectSlug, sessionId: id });
+    frame.dataset.sessionId = String(id); delete frame.dataset.requestedSessionId;
+  });
   paneEl.appendChild(header); paneEl.appendChild(frame); return paneEl;
 }
 
 export function updateSplitPaneMetadata(paneEl, pane) {
   var session = sessionById(pane.sessionId); var header = paneEl.querySelector(".split-pane-header");
   var title = paneEl.querySelector(".split-pane-title"); var frame = paneEl.querySelector(".split-pane-frame"); var vendor = paneEl.querySelector(".split-pane-vendor");
+  var live = frame && frame.clayPane && frame.clayPane.identity();
+  var retarget = frame && (Number(frame.dataset.sessionId) !== pane.sessionId || frame.dataset.sessionOriginId !== (session && session.sessionOriginId || '') || frame.clayPane && (!live || !live.ready));
+  if (retarget && header) {
+    header.dispatchEvent(new Event('clay-pane-retarget'));
+    header.inert = true;
+    header.title = 'Loading conversation';
+    if (title) { title.style.display = ''; title.textContent = 'Loading conversation'; }
+    if (vendor) vendor.hidden = true;
+    var permission = paneEl.querySelector('.split-pane-full-access');
+    if (permission) permission.classList.add('hidden');
+    resetPaneContextChip(paneEl);
+  }
+  if (frame && frame.clayPane && retarget) {
+    var target = paneTarget(store.snap(), getCachedSessions(), pane.sessionId);
+    if (target && frame.clayPane.source === frame.contentWindow && frame.clayPane.document === frame.contentDocument && frame.clayPane.activate(pane.sessionId, false, target)) {
+      frame.dataset.requestedSessionId = String(pane.sessionId);
+      if (header) header.inert = true;
+      return;
+    }
+    frame.src = paneUrl(pane);
+    frame.dataset.sessionId = String(pane.sessionId); frame.dataset.projectSlug = pane.slug;
+    frame.dataset.sessionOriginId = session && session.sessionOriginId || '';
+  }
+  if (header) header.inert = false;
   paneEl.dataset.sessionId = String(pane.sessionId); paneEl.dataset.projectSlug = pane.slug;
   if (header) header.title = pane.title; if (title && title.style.display !== "none") title.textContent = pane.title; if (frame) frame.title = pane.title;
-  if (vendor) { var vendorName = session && session.vendor || "claude"; vendor.src = VENDOR_AVATARS[vendorName] || VENDOR_AVATARS.claude; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
+  if (vendor) { vendor.hidden = false; var vendorName = session && session.vendor || "claude"; vendor.src = VENDOR_AVATARS[vendorName] || VENDOR_AVATARS.claude; vendor.title = VENDOR_NAMES[vendorName] || vendorName; }
+  updatePaneFullAccessButton(paneEl.querySelector('.split-pane-full-access'), session);
   var close = paneEl.querySelector(".split-pane-close");
   if (close) {
     close.dataset.sessionId = String(pane.sessionId); close.disabled = false; close.title = "Close pane"; close.setAttribute("aria-label", close.title);
   }
 }
 
+function resetPaneContextChip(paneEl) {
+  var chip = paneEl.querySelector('.split-pane-context'); if (!chip) return;
+  chip.classList.remove('has-data'); chip.title = 'Context usage';
+  var fill = chip.querySelector('.split-pane-context-fill'), label = chip.querySelector('.split-pane-context-label');
+  if (fill) { fill.style.width = '0%'; fill.className = 'split-pane-context-fill'; }
+  if (label) label.textContent = '';
+}
+
 export function updatePaneContextChip(paneEl, msg) {
-  if (!paneEl) return; var chip = paneEl.querySelector(".split-pane-context"); if (!chip) return; var pct = msg.pct || 0; if (pct <= 0) return;
+  if (!paneEl) return; var chip = paneEl.querySelector(".split-pane-context"); if (!chip) return; var pct = msg.pct || 0; if (pct <= 0) { resetPaneContextChip(paneEl); return; }
   chip.classList.add("has-data"); var fill = chip.querySelector(".split-pane-context-fill"); var label = chip.querySelector(".split-pane-context-label");
   fill.style.width = Math.min(100, pct).toFixed(1) + "%"; fill.className = "split-pane-context-fill" + (msg.cls || ""); label.textContent = pct.toFixed(0) + "%";
   var tip = "Context " + pct.toFixed(0) + "% (" + formatTokens(msg.used || 0) + " / " + formatTokens(msg.win || 0) + " tokens)";

package/lib/public/modules/split-session-boundary.js

@@ -2,7 +2,7 @@ import { store } from './store.js';
 import { isProjectSessionReady } from './project-activation.js';
 
 export function isCurrentProjectSessionReady(state, socket) {
-  return isProjectSessionReady(state, socket);
+  return socket !== state.splitIdentityBlockedSocket && isProjectSessionReady(state, socket);
 }
 
 export function clearProjectSplitState() {

package/lib/public/modules/split-view.js

@@ -1,8 +1,14 @@
+import { adoptDocumentSource } from './clay-studio-document.js';
+import { trustedStudioFrame } from './clay-studio-render.js';
+import { handlePaneBrowserMessage } from './pane-browser-bridge.js';
 import { openWireframe } from './wireframe-workbench.js';
 // Two-pane iframe shell for the split-view spike.
 
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { livePaneBinding } from './pane-binding.js';
+import { showToast } from './utils.js';
+import { checkComposerDeparture } from './session-rich-drafts.js';
 import { getCachedSessions } from './sidebar-sessions.js';
 import { refreshIcons } from './icons.js';
 import { detachTuiView } from './session-tui-view.js';
@@ -11,11 +17,12 @@ import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
 import { autoStartLoginIfNeeded } from './vendor-login.js';
 import { isCurrentProjectSessionReady } from './split-session-boundary.js';
-import { splitPanesMatchProject, reconcileRestoredSplit } from './project-activation.js';
+import { splitPanesMatchProject } from './project-activation.js';
 import { handlePaneIssueMessage } from './pane-issue-bridge.js';
 import { handlePaneFileMessage, revealFilesPanel } from './pane-file-bridge.js';
 import { openFile } from './filebrowser.js';
-import { reconcileSplitPanes } from './split-pane-reconciler.js';
+import { restoreSplitGroup, reconcileSplitIdentity } from './split-group-restore.js';
+import { reconcileSplitPanes, splitPaneForSession } from './split-pane-reconciler.js';
 import { createSplitPane, updateSplitPaneMetadata, updatePaneContextChip, updatePaneFullAccessButton } from './split-pane-renderer.js';
 
 var host = null;
@@ -51,12 +58,7 @@ function sessionById(sessionId) {
 }
 
 function paneForSession(sessionId) {
-  var session = sessionById(sessionId);
-  return {
-    slug: store.get('currentSlug'),
-    sessionId: sessionId,
-    title: (session && session.title) || ("Session " + sessionId),
-  };
+  return splitPaneForSession(sessionId, store.get('currentSlug'), getCachedSessions());
 }
 
 // Arc-style drop preview: hovering one half folds the live app into the
@@ -87,6 +89,7 @@ function showDropOverlay() {
 }
 
 function switchNativeSession(sessionId, expectedSlug) {
+  if (!canLeavePanes()) return;
   store.set({ splitPanes: null });
   var ws = getWs();
   var state = store.snap();
@@ -125,16 +128,16 @@ export function syncPaneTitles() {
   var split = store.get('splitPanes');
   if (!split || !split.panes || !host) return;
   var titleEls = host.querySelectorAll(".split-pane-title");
+  var paneEls = host.querySelectorAll('.split-pane');
   for (var i = 0; i < split.panes.length && i < titleEls.length; i++) {
-    var session = sessionById(split.panes[i].sessionId);
+    var session = sessionById(paneEls[i] && Number(paneEls[i].dataset.sessionId) || split.panes[i].sessionId);
     if (!session || !session.title) continue;
-    split.panes[i].title = session.title;
     if (titleEls[i].parentNode) titleEls[i].parentNode.title = session.title;
     if (titleEls[i].style.display !== "none") titleEls[i].textContent = session.title;
   }
   var accessBtns = host.querySelectorAll(".split-pane-full-access");
   for (var ai = 0; ai < split.panes.length && ai < accessBtns.length; ai++) {
-    updatePaneFullAccessButton(accessBtns[ai], sessionById(split.panes[ai].sessionId));
+    updatePaneFullAccessButton(accessBtns[ai], sessionById(paneEls[ai] && Number(paneEls[ai].dataset.sessionId) || split.panes[ai].sessionId));
   }
   syncPairChrome(host, split);
 }
@@ -143,22 +146,13 @@ function handlePaneMessage(event) {
   if (event.origin !== window.location.origin) return;
   var msg = event.data;
   if (!msg || !host) return;
-  if (msg.type === "clay-pane-present-wireframe") {
-    var frames = host.querySelectorAll(".split-pane-frame");
-    var split = store.get('splitPanes');
-    var trusted = Array.prototype.some.call(frames, function (frame) {
-      if (frame.contentWindow !== event.source || frame.dataset.projectSlug !== msg.projectSlug || String(frame.dataset.sessionId) !== String(msg.sessionId) || msg.projectSlug !== store.get('currentSlug')) return false;
-      return split && split.panes.some(function (pane) {
-        var expected = new URL('/p/' + encodeURIComponent(pane.slug) + '/?pane=1&session=' + encodeURIComponent(pane.sessionId), window.location.href).href;
-        return pane.slug === msg.projectSlug && String(pane.sessionId) === String(msg.sessionId) && frame.src === expected;
-      });
-    });
-    if (trusted && msg.message) openWireframe(msg.message);
-    return;
-  }
-  if (msg.type === "clay-pane-present-markdown") {
-    var present = msg.message;
-    if (present) presentMarkdownEdit(present);
+  var reusable = Array.from(host.querySelectorAll('.split-pane-frame')).find(function (frame) { return frame.contentWindow === event.source && frame.clayPane; });
+  if (reusable && !livePaneBinding(reusable, msg)) return;
+  if (msg.type === "clay-pane-present-wireframe" || msg.type === "clay-pane-present-markdown") {
+    if (msg.message && !msg.message.controlPresentation && trustedStudioFrame(event, msg)) {
+      if (msg.type === "clay-pane-present-wireframe") openWireframe(msg.message);
+      else { adoptDocumentSource(event, msg, trustedStudioFrame(event, msg)); presentMarkdownEdit(msg.message); }
+    }
     return;
   }
   // Both panes can report auth_required for their own sessions. The shell runs
@@ -168,6 +162,7 @@ function handlePaneMessage(event) {
     return;
   }
   if (handlePaneIssueMessage(event, host)) return;
+  if (handlePaneBrowserMessage(event, host)) return;
   if (handlePaneFileMessage(event, host, openFile, revealFilesPanel)) return;
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
@@ -184,7 +179,10 @@ function renderSplit(split) {
   var panes = split && split.panes;
   if (!panes || panes.length < 2 || panes.length > 3) {
     placeStickyNotesOverlay(false);
-    host.innerHTML = "";
+    var frames = host.querySelectorAll('.split-pane-frame');
+    var retain = frames.length > 0 && frames.length <= 3 && Array.from(frames).every(function (frame) { return frame.dataset.projectSlug === store.get('currentSlug') && frame.clayPane; });
+    if (retain) Array.from(frames).forEach(function (frame) { frame.clayPane.suspend(); });
+    else host.innerHTML = "";
     host.classList.remove("visible");
     nativeApp.classList.remove("split-native-hidden");
     return;
@@ -224,6 +222,7 @@ function openSplit(side, draggedId) {
 }
 
 export function openGroup(group) {
+  if (!canLeavePanes()) return false;
   if (!group || !Array.isArray(group.members) || group.members.length < 2 || group.members.length > 3) return false;
   var memberIds = splitGroupMemberIds(group);
   if (memberIds.length !== group.members.length) return false;
@@ -272,47 +271,9 @@ export function openWorkerWithDriver(worker) {
   return true;
 }
 
-// Reload survival: when the restored active session turns out to be a split
-// group member, reopen that group. Safe to call often -- no-ops unless a
-// group member is active natively with no split open.
+// Keep the public entry shared by connection, sidebar and identity hydration.
 export function maybeRestoreSplitGroup() {
-  var state = store.snap();
-  if (!isCurrentProjectSessionReady(state, getWs())) return;
-  var split = state.splitPanes;
-  if (split && !splitPanesMatchProject(split, state.currentSlug)) {
-    store.set({ splitPanes: null });
-    return;
-  }
-  if (state.paneMode) return;
-  if (split) {
-    var reconciliation = reconcileRestoredSplit(split, state.splitGroups);
-    if (reconciliation.action === "clear") {
-      store.set({ splitPanes: null });
-      return;
-    }
-    if (reconciliation.action === "rebuild") {
-      var rebuilt = reconciliation.group;
-      if (rebuilt.members.some(function (id) { return !sessionById(id); })) {
-        store.set({ splitPanes: null });
-        return;
-      }
-      store.set({ splitPanes: {
-        groupId: rebuilt.id,
-        panes: splitGroupMemberIds(rebuilt).map(function (id) { return paneForSession(id); }),
-      } });
-    }
-    return;
-  }
-  var activeId = store.get('activeSessionId');
-  if (!activeId) return;
-  var groups = store.get('splitGroups') || [];
-  for (var i = 0; i < groups.length; i++) {
-    var members = groups[i].members || [];
-    if (members.indexOf(activeId) !== -1) {
-      openGroup(groups[i]);
-      return;
-    }
-  }
+  restoreSplitGroup(openGroup);
 }
 
 export function separateGroup(group) {
@@ -376,6 +337,24 @@ function handleSessionDragStart(event) {
   if (draggedSessionId) showDropOverlay();
 }
 
+function openDriverGroup(driver) {
+  var state = store.snap();
+  if (!driver || driver.sessionRole !== "driver" || !isCurrentProjectSessionReady(state, getWs())) return false;
+  var groups = state.splitGroups || [];
+  for (var i = 0; i < groups.length; i++) {
+    var group = groups[i];
+    var roles = splitGroupRoles(group);
+    if (!roles || roles.driverId !== driver.id || typeof group.id !== "string" || !group.id) continue;
+    var available = roles.workerIds.every(function (id) {
+      var worker = sessionById(id);
+      return worker && worker.sessionRole === "worker" && worker.parentAvailable === true && worker.parentSessionId === driver.id;
+    });
+    // Keep mounted conversations when selecting their Driver again.
+    if (available) return openGroup(group);
+  }
+  return false;
+}
+
 function handleSidebarSessionClick(event) {
   if (!store.get('splitPanes') || event.button !== 0) return;
   // This document capture listener runs before a row's bubble handlers. Leave
@@ -388,11 +367,22 @@ function handleSidebarSessionClick(event) {
   if (!sessionId) return;
   event.preventDefault();
   event.stopImmediatePropagation();
+  if (!canLeavePanes()) return;
   var session = sessionById(sessionId);
   if (session && session.sessionRole === "worker" && openWorkerWithDriver(session)) return;
+  if (openDriverGroup(session)) return;
   switchNativeSession(sessionId);
 }
 
+function canLeavePanes() {
+  if (!host) return true;
+  try {
+    if (!store.get('splitPanes')) checkComposerDeparture();
+    Array.from(host.querySelectorAll('.split-pane-frame')).forEach(function (frame) { if (frame.clayPane) frame.clayPane.checkDraft(); });
+    return true;
+  } catch (error) { showToast(error.message, 'warn'); return false; }
+}
+
 export function initSplitView() {
   if (store.get('paneMode')) return;
   var mainPanels = document.getElementById("main-panels");
@@ -418,6 +408,8 @@ export function initSplitView() {
   });
   document.addEventListener("click", handleSidebarSessionClick, true);
   store.subscribe(function (state, prev) {
+    if (state.authIdentityLoaded && !prev.authIdentityLoaded) queueMicrotask(maybeRestoreSplitGroup);
+    if (reconcileSplitIdentity(state, prev, host)) { renderSplit(null); return; }
     if (state.splitPanes !== prev.splitPanes) renderSplit(state.splitPanes);
     if (state.permissionModePendingByTarget !== prev.permissionModePendingByTarget || state.connected !== prev.connected ||
         state.skipPermsEnabled !== prev.skipPermsEnabled) syncPaneTitles();

package/lib/public/modules/sticky-note-markdown.js

@@ -6,7 +6,32 @@ export function getTitle(text) {
   return idx === -1 ? text : text.substring(0, idx);
 }
 
-function formatInline(text) {
+function checklistFence(line) {
+  var match = line.match(/^\s*(\x60{3,}|~{3,})/);
+  return match ? match[1].charAt(0) : null;
+}
+
+export function getChecklistItems(text) {
+  var lines = (text || "").split("\n").slice(1);
+  var items = [];
+  var fence = null;
+  var occurrences = Object.create(null);
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i];
+    var nextFence = checklistFence(line);
+    if (nextFence) {
+      fence = fence === nextFence ? null : (fence || nextFence);
+      continue;
+    }
+    if (fence || !line.trim() || /^\s*#{1,6}\s/.test(line)) continue;
+    var occurrence = occurrences[line] || 0;
+    occurrences[line] = occurrence + 1;
+    items.push({ index: i, text: line, key: line + "\u0000" + occurrence });
+  }
+  return items;
+}
+
+function formatInline(text, preserveChecks) {
   var escaped = text
     .replace(/&/g, "&amp;")
     .replace(/</g, "&lt;")
@@ -17,18 +42,59 @@ function formatInline(text) {
     .replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, "<em>$1</em>")
     .replace(/`([^`]+)`/g, "<code>$1</code>")
     .replace(/~~(.+?)~~/g, "<del>$1</del>")
-    .replace(/^(?:-\s*)?\[[xX]\]/gm, '<span class="sn-check checked" role="checkbox" aria-checked="true" tabindex="0" contenteditable="false">✓</span>')
-    .replace(/^(?:-\s*)?\[ \]/gm, '<span class="sn-check" role="checkbox" aria-checked="false" tabindex="0" contenteditable="false">☐</span>')
+    .replace(preserveChecks ? /(?!x)x^/ : /^(?:-\s*)?\[[xX]\]/gm, '<span class="sn-check checked" role="checkbox" aria-checked="true" tabindex="0" contenteditable="false">✓</span>')
+    .replace(preserveChecks ? /(?!x)x^/ : /^(?:-\s*)?\[ \]/gm, '<span class="sn-check" role="checkbox" aria-checked="false" tabindex="0" contenteditable="false">☐</span>')
     .replace(/\n/g, "<br>");
 }
 
-export function renderMiniMarkdown(text) {
+export function renderMiniMarkdown(text, options) {
   if (!text) return "";
+  options = options || {};
   var lines = text.split("\n");
   var title = lines[0];
   var body = lines.slice(1).join("\n");
-  var html = '<div class="sn-title">' + formatInline(title) + "</div>";
-  if (body.trim()) html += formatInline(body);
+  var html = '<div class="sn-title">' + formatInline(title, options.checklistMode) + "</div>";
+  if (body.trim()) {
+    if (options.checklistMode) {
+      var checklistLines = body.split("\n");
+      var checklistHtml = [];
+      var inCode = false;
+      var fenceChar = null;
+      var occurrences = Object.create(null);
+      for (var i = 0; i < checklistLines.length; i++) {
+        var line = checklistLines[i];
+        var lineFence = checklistFence(line);
+        if (lineFence) {
+          fenceChar = fenceChar === lineFence ? null : (fenceChar || lineFence);
+          inCode = !!fenceChar;
+          checklistHtml.push(formatInline(line, true));
+          if (i < checklistLines.length - 1) checklistHtml.push("<br>");
+          continue;
+        }
+        var task = !inCode && line.trim() && !/^\s*#{1,6}\s/.test(line);
+        if (task) {
+          var markerMatch = line.match(/^\s*(?:[-*+]\s+)?\[([ xX])\]\s*(.*)$/);
+          var checked = markerMatch ? markerMatch[1].toLowerCase() === "x" : false;
+          var content = markerMatch ? markerMatch[2] : line;
+          var occurrence = occurrences[line] || 0;
+          occurrences[line] = occurrence + 1;
+          var checklistKey = line + "\u0000" + occurrence;
+          var stored = options.checklistState && options.checklistState[checklistKey];
+          if (stored === undefined && Array.isArray(options.checklistState)) stored = options.checklistState[i];
+          if (stored !== undefined) {
+            checked = stored === true;
+          }
+          checklistHtml.push('<span class="sn-check' + (checked ? ' checked' : '') + '" data-checklist-index="' + i + '" data-checklist-key="' + encodeURIComponent(checklistKey) + '" role="checkbox" aria-checked="' + (checked ? 'true' : 'false') + '" tabindex="0" contenteditable="false">' + (checked ? "✓" : "☐") + "</span>" + formatInline(content));
+        } else {
+          checklistHtml.push(formatInline(line, !!inCode));
+        }
+        if (i < checklistLines.length - 1) checklistHtml.push("<br>");
+      }
+      html += checklistHtml.join("");
+    } else {
+      html += formatInline(body);
+    }
+  }
   return html;
 }
 

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

@@ -0,0 +1,30 @@
+import { getNoteUiState, clearNoteTextTimer, setNoteUiState } from './sticky-notes-shared.js';
+import { checklistDraftText } from './sticky-notes-checklist.js';
+import { mutateChecklist } from './sticky-notes-state.js';
+import { confirmSettingsAction } from './server-settings-state.js';
+
+export function requestChecklistMode(id) {
+  var ui = getNoteUiState(id);
+  if (ui.pending.length) return;
+  if (ui.checklistMode) { mutateChecklist(id, { checklistMode: false }); return; }
+  var text = ui.text;
+  var canonical = ui.canonical;
+  function convert() {
+    var current = getNoteUiState(id);
+    if (current.text !== text || current.canonical.text !== canonical.text || current.canonical.updatedAt !== canonical.updatedAt) {
+      setNoteUiState(id, { error: 'The note changed. Review its contents and try again.' }); return;
+    }
+    clearNoteTextTimer(id);
+    mutateChecklist(id, { checklistConvert: true, checklistSource: canonical.text, checklistVersion: canonical.updatedAt });
+  }
+  if (text.trim() || (canonical.text || '').trim()) {
+    confirmSettingsAction('Switching to a checklist will delete all existing contents and completion marks. Continue with an empty checklist?', 'Delete contents and create checklist', convert);
+  } else convert();
+}
+
+export function closeHumanNote(id, fallback) {
+  var ui = getNoteUiState(id, fallback);
+  if (ui.pending.length) { setNoteUiState(id, { error: 'Wait for the current save before closing.' }); return; }
+  clearNoteTextTimer(id);
+  mutateChecklist(id, { humanClose: true, expectedText: ui.canonical.text, expectedVersion: ui.canonical.updatedAt, draftText: ui.checklistMode ? checklistDraftText(ui) : ui.text });
+}

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

@@ -11,7 +11,8 @@ import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { renderMiniMarkdown, getTitle } from './sticky-note-markdown.js';
 import { enhanceClayLogLinks } from './clay-log-links.js';
-import { send } from './sticky-notes-shared.js';
+import { closeHumanNote } from './sticky-notes-actions.js';
+import { send, getNoteUiState } from './sticky-notes-shared.js';
 import { listNoteData, focusNoteOnCanvas, hideNotes, showNotes } from './sticky-notes.js';
 import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 
@@ -215,7 +216,7 @@ function buildCard(data) {
     action.setAttribute("aria-label", "Close note: " + title.textContent);
     action.addEventListener("click", function (e) {
       e.stopPropagation();
-      send({ type: "note_close", id: data.id });
+      closeHumanNote(data.id, data);
     });
   }
   header.appendChild(action);
@@ -229,6 +230,11 @@ function buildCard(data) {
     enhanceClayLogLinks(body);
   }
   card.appendChild(body);
+  var ui = getNoteUiState(data.id, data);
+  if (ui.error || ui.pending.length) {
+    var status = document.createElement('p'); status.className = 'settings-status'; status.setAttribute('role', 'status');
+    status.textContent = ui.error || 'Saving…'; card.appendChild(status);
+  }
 
   if (closed) {
     var deleteAction = document.createElement("button");
@@ -427,6 +433,7 @@ export function initNotesBrowser() {
     closeNotesBrowser();
   });
   store.subscribe(function (state, previous) {
+    if (state.notesBrowserOpen && state.stickyNoteUiState !== previous.stickyNoteUiState) renderNotesBrowser();
     if (state.connected !== previous.connected || state.myUserId !== previous.myUserId ||
         state.isMultiUserMode !== previous.isMultiUserMode) closeDeleteDialog(true);
     if (state.currentSlug === previous.currentSlug) return;

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

@@ -17,6 +17,7 @@ import {
   clampSize,
   debouncedUpdate,
 } from './sticky-notes-shared.js';
+import { closeHumanNote } from './sticky-notes-actions.js';
 import { setupTextEdit } from './sticky-notes-editor.js';
 
 var colorPickerEl = null;
@@ -74,7 +75,7 @@ export function renderNote(data) {
   addBtn.innerHTML = iconHtml("plus");
   addBtn.addEventListener("click", function (e) {
     e.stopPropagation();
-    createNote();
+    send({ type: "note_create", x: 60, y: 60, color: "purple", opacity: 0.64 });
   });
   header.appendChild(addBtn);
 
@@ -90,6 +91,21 @@ export function renderNote(data) {
   mdBtn.innerHTML = "<span class='sn-md-label'>MD</span>";
   header.appendChild(mdBtn);
 
+  var checklistBtn = document.createElement("button");
+  checklistBtn.className = "sticky-note-btn sticky-note-checklist-btn";
+  checklistBtn.title = data.checklistMode ? "Show note" : "Show checklist";
+  checklistBtn.setAttribute("aria-label", checklistBtn.title);
+  checklistBtn.setAttribute("aria-pressed", data.checklistMode === true ? "true" : "false");
+  checklistBtn.innerHTML = iconHtml("list-check");
+  if (data.checklistMode) checklistBtn.classList.add("active");
+  header.appendChild(checklistBtn);
+
+  var saveStatus = document.createElement("span");
+  saveStatus.className = "sticky-note-save-status";
+  saveStatus.setAttribute("role", "status");
+  saveStatus.setAttribute("aria-live", "polite");
+  header.appendChild(saveStatus);
+
   var opacityWrap = document.createElement("div");
   opacityWrap.className = "sticky-note-opacity";
   var opacitySlider = document.createElement("input");
@@ -139,11 +155,12 @@ export function renderNote(data) {
   rendered.contentEditable = "true";
   rendered.spellcheck = true;
   if (data.text && data.text.trim()) {
-    rendered.innerHTML = renderMiniMarkdown(data.text);
+    rendered.innerHTML = renderMiniMarkdown(data.text, { checklistMode: data.checklistMode === true, checklistState: data.checklistState || [] });
     enhanceClayLogLinks(rendered);
   } else {
     rendered.classList.add("is-empty");
   }
+  rendered.contentEditable = data.checklistMode === true ? "false" : "true";
   body.appendChild(rendered);
 
   el.appendChild(body);
@@ -156,7 +173,7 @@ export function renderNote(data) {
   // --- Event handlers ---
   setupDrag(el, spacer, data.id);
   setupResize(el, resizeHandle, data.id);
-  setupTextEdit(textarea, rendered, data.id, mdBtn);
+  setupTextEdit(textarea, rendered, data.id, mdBtn, checklistBtn, data);
   setupColorPicker(colorBtn, el, data.id);
   setupMinimize(minBtn, el, data.id);
   setupClose(closeBtn, el, data.id);
@@ -336,14 +353,13 @@ function setupMinimize(btn, noteEl, noteId) {
 
 // --- Close note ---
 //
-// Completing a note closes it. The record is kept and stays reachable in the
-// browser's Closed tab; nothing is ever deleted from this control.
+// The human close transaction retains nonempty notes in Closed and removes
+// truly empty notes after checking the canonical source and visible draft.
 
 function setupClose(btn, noteEl, noteId) {
   btn.addEventListener("click", function (e) {
     e.stopPropagation();
-    noteEl.classList.add("hidden");
-    send({ type: "note_close", id: noteId });
+    closeHumanNote(noteId);
   });
 }