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

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);
   });
 }
 

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

@@ -0,0 +1,116 @@
+// Plain task controls use Markdown only as the internal persistence format.
+import { iconHtml, refreshIcons } from './icons.js';
+import { getChecklistItems } from './sticky-note-markdown.js';
+import { getNoteUiState, setNoteUiState } from './sticky-notes-shared.js';
+import { mutateChecklist } from './sticky-notes-state.js';
+
+export function checklistDraftText(ui) {
+  var fields = ui.checklistInputs || {};
+  var lines = (ui.text || '').split('\n');
+  if (fields.title !== undefined) lines[0] = fields.title;
+  getChecklistItems(ui.text).forEach(function (item) {
+    if (fields[item.key] !== undefined) {
+      var marker = item.text.match(/^\s*(?:[-*+]\s+)?\[([ xX])\]/);
+      var checked = ui.checklistState[item.key];
+      if (checked === undefined) checked = marker && marker[1].toLowerCase() === 'x';
+      lines[item.index + 1] = '- [' + (checked ? 'x' : ' ') + '] ' + fields[item.key];
+    }
+  });
+  if (fields.entry && fields.entry.trim()) {
+    if (!lines[0].trim()) lines[0] = 'Checklist';
+    lines.push('- [ ] ' + fields.entry.trim());
+  }
+  return lines.join('\n');
+}
+
+export function renderTaskControls(root, id) {
+  var ui = getNoteUiState(id);
+  var fields = ui.checklistInputs || {};
+  var busy = ui.pending.length > 0;
+  var active = document.activeElement;
+  var focusField = active && root.contains(active) ? active.dataset.taskField : undefined;
+  var selection = focusField !== undefined ? [active.selectionStart, active.selectionEnd] : null;
+  root.replaceChildren();
+  var form = document.createElement('form'); form.className = 'sn-task-form';
+  form.setAttribute('aria-label', 'Checklist');
+  form.setAttribute('aria-busy', busy ? 'true' : 'false');
+  var feedback = document.createElement('span'); feedback.className = 'sn-task-feedback';
+  feedback.setAttribute('role', 'status');
+  var saveButton = document.createElement('button');
+  function updateFeedback() {
+    var current = getNoteUiState(id);
+    var dirty = checklistDraftText(current) !== current.text;
+    feedback.textContent = busy ? 'Saving…' : current.error ? (dirty ? 'Draft kept. ' : 'Not saved. ') + current.error : dirty ? 'Unsaved changes' : 'All changes saved';
+    saveButton.disabled = busy || !dirty;
+  }
+  function input(label, value, key) {
+    var control = document.createElement('textarea'); control.rows = 1; control.value = fields[key] !== undefined ? fields[key] : value;
+    control.setAttribute('aria-label', label); control.placeholder = label; control.maxLength = 400;
+    control.readOnly = busy;
+    control.dataset.taskField = key;
+    control.onkeydown = function (event) {
+      if (event.key === 'Enter' && !event.isComposing) { event.preventDefault(); form.requestSubmit(); }
+    };
+    control.oninput = function () {
+      var current = getNoteUiState(id);
+      // A task remains one persisted line; visual wrapping does not split tasks.
+      control.value = control.value.replace(/[\r\n]+/g, ' ');
+      var draft = Object.assign({}, current.checklistInputs || {}); draft[key] = control.value;
+      setNoteUiState(id, { checklistInputs: draft });
+      updateFeedback();
+    };
+    return control;
+  }
+  var title = input('Checklist title', (ui.text || '').split('\n')[0], 'title'); title.className = 'sn-task-title'; form.appendChild(title);
+  var items = getChecklistItems(ui.text);
+  var completed = 0;
+  var summary = document.createElement('div'); summary.className = 'sn-task-summary';
+  form.appendChild(summary);
+  items.forEach(function (item, position) {
+    var row = document.createElement('div'); row.className = 'sn-task-row';
+    var marker = item.text.match(/^\s*(?:[-*+]\s+)?\[([ xX])\]\s*(.*)$/);
+    var check = document.createElement('button'); check.type = 'button'; check.className = 'sn-check';
+    var checked = ui.checklistState[item.key];
+    if (checked === undefined) checked = marker && marker[1].toLowerCase() === 'x';
+    check.classList.toggle('checked', !!checked);
+    check.innerHTML = '<span class="sn-task-box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="m3.5 8 3 3 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>';
+    row.classList.toggle('is-complete', !!checked);
+    if (checked) completed++;
+    check.setAttribute('role', 'checkbox'); check.setAttribute('aria-checked', checked ? 'true' : 'false'); check.setAttribute('aria-label', 'Complete task ' + (position + 1));
+    check.dataset.checklistIndex = item.index; check.dataset.checklistKey = encodeURIComponent(item.key);
+    check.disabled = busy;
+    var label = input('Task ' + (position + 1), marker ? marker[2] : item.text, item.key);
+    var remove = document.createElement('button'); remove.type = 'button'; remove.className = 'sn-task-remove'; remove.innerHTML = iconHtml('x'); remove.setAttribute('aria-label', 'Remove task ' + (position + 1)); remove.disabled = busy;
+    remove.onclick = function () {
+      var current = getNoteUiState(id); var lines = checklistDraftText(current).split('\n'); lines.splice(item.index + 1, 1);
+      save(lines.join('\n'));
+    };
+    row.append(check, label, remove); form.appendChild(row);
+  });
+  summary.textContent = items.length ? completed + ' of ' + items.length + ' complete' : 'A little space for what’s next';
+  var addRow = document.createElement('div'); addRow.className = 'sn-task-add';
+  var plus = document.createElement('span'); plus.className = 'sn-task-plus'; plus.innerHTML = iconHtml('plus'); plus.setAttribute('aria-hidden', 'true');
+  var entry = input('New task', '', 'entry'); entry.className = 'sn-task-entry'; entry.placeholder = 'Add a task…';
+  addRow.append(plus, entry); form.appendChild(addRow);
+  var footer = document.createElement('div'); footer.className = 'sn-task-footer';
+  saveButton.type = 'submit'; saveButton.className = 'sn-task-save'; saveButton.textContent = 'Save tasks';
+  footer.append(feedback, saveButton); form.appendChild(footer);
+  updateFeedback();
+  function save(text) {
+    var current = getNoteUiState(id);
+    if (current.pending.length) return;
+    mutateChecklist(id, { checklistEdit: true, checklistSource: current.canonical.text, checklistVersion: current.canonical.updatedAt, text: text });
+  }
+  form.onsubmit = function (event) { event.preventDefault(); save(checklistDraftText(getNoteUiState(id))); };
+  root.appendChild(form); refreshIcons(root);
+  if (focusField !== undefined) {
+    var controls = form.querySelectorAll('[data-task-field]');
+    for (var i = 0; i < controls.length; i++) {
+      if (controls[i].dataset.taskField === focusField) {
+        controls[i].focus({ preventScroll: true });
+        controls[i].setSelectionRange(selection[0], selection[1]);
+        break;
+      }
+    }
+  }
+}