clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/sidebar-mobile.js

@@ -7,7 +7,6 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { parseEmojis } from './markdown.js';
 import { getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
 import { openCommandPalette } from './command-palette.js';
-import { getMateSessions } from './mate-sidebar.js';
 import { openProjectSettings } from './project-settings.js';
 import {
   getCachedSessions,
@@ -33,8 +32,8 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { dismissOverlayPanels, closeSidebar } from './sidebar.js';
 import { switchProject, getCachedProjects } from './app-projects.js';
-import { openDm } from './app-dm.js';
 import { showHomeHub } from './app-home-hub.js';
+import { openHomeChat } from './home-mate-chat.js';
 import { openTerminal } from './terminal.js';
 import { requestKnowledgeList } from './mate-knowledge.js';
 import { loadRootDirectory } from './filebrowser.js';
@@ -319,9 +318,9 @@ function renderSheetSessions(listEl) {
     if (type === "project") {
       renderMobileSessionsInto(sessionListEl);
     } else if (type === "mate") {
-      // Mate DM: open the DM and show mate actions
-      openDm(mateId);
-      renderMateMobileActions(sessionListEl);
+      closeMobileSheet();
+      showHomeHub();
+      openHomeChat(mateId);
     }
 
     refreshIcons();
@@ -370,12 +369,8 @@ function renderSheetSessions(listEl) {
   // Track that chat sheet is open
   mobileChatSheetOpen = true;
 
-  // --- Initial render: show mate actions if DM active, otherwise project sessions ---
-  if (getCurrentDmUserId()) {
-    renderSessionsForContext("mate", null, getCurrentDmUserId());
-  } else {
-    renderSessionsForContext("project", getCachedCurrentSlug(), null);
-  }
+  // Mate chips navigate away immediately, so the sheet always renders project sessions.
+  renderSessionsForContext("project", getCachedCurrentSlug(), null);
 }
 
 // Helper: create a mobile session item element
@@ -659,54 +654,6 @@ function createMobileLoopGroup(loopId, children, groupKey) {
   return wrapper;
 }
 
-function renderMateMobileActions(container) {
-  var newSessionBtn = document.createElement("button");
-  newSessionBtn.className = "mobile-session-new";
-  newSessionBtn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> New session';
-  newSessionBtn.addEventListener("click", function () {
-    if (getWs() && store.get('connected')) {
-      getWs().send(JSON.stringify({ type: "new_session" }));
-    }
-    closeMobileSheet();
-  });
-  container.appendChild(newSessionBtn);
-
-  var debateBtn = document.createElement("button");
-  debateBtn.className = "mobile-session-new";
-  debateBtn.innerHTML = '<i data-lucide="mic" style="width:16px;height:16px"></i> New debate';
-  debateBtn.addEventListener("click", function () {
-    closeMobileSheet();
-    var targetBtn = document.getElementById("mate-debate-btn");
-    if (targetBtn) setTimeout(function () { targetBtn.click(); }, 250);
-  });
-  container.appendChild(debateBtn);
-
-  // Render mate session list
-  var mateSessions = getMateSessions();
-  if (mateSessions.length > 0) {
-    var sorted = mateSessions.slice().sort(function (a, b) {
-      return (b.lastActivity || 0) - (a.lastActivity || 0);
-    });
-
-    var currentGroup = "";
-    for (var i = 0; i < sorted.length; i++) {
-      var s = sorted[i];
-      var group = getDateGroup(s.lastActivity || 0);
-      if (group !== currentGroup) {
-        currentGroup = group;
-        var header = document.createElement("div");
-        header.className = "mobile-sheet-group";
-        header.textContent = group;
-        container.appendChild(header);
-      }
-      var mateItem = createMobileSessionItem(s);
-      container.appendChild(mateItem);
-    }
-  }
-
-  refreshIcons();
-}
-
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
   // Mirrors the desktop sidebar's split button: one "New session" action on
@@ -902,11 +849,7 @@ export function refreshMobileChatSheet() {
 
   // Re-render sessions for current context
   sessionListEl.innerHTML = "";
-  if (getCurrentDmUserId()) {
-    renderMateMobileActions(sessionListEl);
-  } else {
-    renderMobileSessionsInto(sessionListEl);
-  }
+  renderMobileSessionsInto(sessionListEl);
 
   refreshIcons();
 }
@@ -944,8 +887,7 @@ function renderSheetMateProfile(listEl) {
   var actions = [
     { icon: "book-open", label: "Knowledge", btnId: "mate-knowledge-btn", countId: "mate-knowledge-count" },
     { icon: "sticky-note", label: "Sticky Notes", btnId: "sticky-notes-sidebar-btn", countId: "sticky-notes-sidebar-count" },
-    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" },
-    { icon: "calendar", label: "Scheduled Tasks", btnId: "mate-scheduler-btn" }
+    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" }
   ];
 
   for (var i = 0; i < actions.length; i++) {
@@ -1062,12 +1004,11 @@ function renderSheetTools(listEl) {
     { icon: "brain", label: "Memory", action: "mate-memory" },
     { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
     { icon: "sticky-note", label: "Sticky Notes", action: "mate-sticky" },
-    { icon: "puzzle", label: "Skills", action: "mate-skills" },
-    { icon: "calendar-clock", label: "Scheduled Tasks", action: "mate-scheduler" }
+    { icon: "puzzle", label: "Skills", action: "mate-skills" }
   ] : [
     { icon: "folder-tree", label: "Files", action: "files" },
     { icon: "square-terminal", label: "Terminal", action: "terminal" },
-    { icon: "calendar-clock", label: "Scheduled Tasks", action: "scheduler" }
+    { icon: "notebook-tabs", label: "Logs", action: "project-logs" }
   ];
 
   for (var i = 0; i < items.length; i++) {
@@ -1082,8 +1023,8 @@ function renderSheetTools(listEl) {
           setTimeout(function () { openMobileSheet("files"); }, 250);
         } else if (item.action === "terminal") {
           openTerminal();
-        } else if (item.action === "scheduler") {
-          targetId = "scheduler-btn";
+        } else if (item.action === "project-logs") {
+          targetId = "project-logs-btn";
         } else if (item.action === "mate-knowledge") {
           setTimeout(function () { openMobileSheet("mate-knowledge"); }, 250);
           return;
@@ -1093,8 +1034,6 @@ function renderSheetTools(listEl) {
           targetId = "mate-skills-btn";
         } else if (item.action === "mate-memory") {
           targetId = "mate-memory-btn";
-        } else if (item.action === "mate-scheduler") {
-          targetId = "mate-scheduler-btn";
         } else if (item.action === "mate-debate") {
           targetId = "mate-debate-btn";
         }

package/lib/public/modules/sidebar-presence.js

@@ -0,0 +1,37 @@
+// Compact online-user presence renderer for the project sidebar.
+
+import { userAvatarUrl } from './avatar.js';
+
+var lastSidebarPresenceIds = [];
+
+export function renderSidebarPresence(onlineUsers) {
+  var container = document.getElementById("sidebar-presence");
+  if (!container) return;
+  if (!onlineUsers || onlineUsers.length < 2) {
+    if (lastSidebarPresenceIds.length > 0) {
+      lastSidebarPresenceIds = [];
+      container.innerHTML = "";
+    }
+    return;
+  }
+  var newIds = onlineUsers.map(function (user) { return user.id; }).sort();
+  if (newIds.length === lastSidebarPresenceIds.length && newIds.every(function (id, index) { return id === lastSidebarPresenceIds[index]; })) return;
+  lastSidebarPresenceIds = newIds;
+  container.innerHTML = "";
+  var maxShow = 4;
+  for (var i = 0; i < Math.min(onlineUsers.length, maxShow); i++) {
+    var user = onlineUsers[i];
+    var image = document.createElement("img");
+    image.className = "sidebar-presence-avatar";
+    image.src = userAvatarUrl(user, 24);
+    image.alt = user.displayName;
+    image.dataset.tip = user.displayName + " (@" + user.username + ")";
+    container.appendChild(image);
+  }
+  if (onlineUsers.length > maxShow) {
+    var more = document.createElement("span");
+    more.className = "sidebar-presence-more";
+    more.textContent = "+" + (onlineUsers.length - maxShow);
+    container.appendChild(more);
+  }
+}

package/lib/public/modules/sidebar-sessions.js

@@ -1376,8 +1376,29 @@ function renderSplitGroupItem(group, members) {
 
 // --- Main session list ---
 
+// Fingerprint of the last completed render: the whole session payload plus the
+// two store values this render also reads. Nothing is cherry-picked, so the
+// guard can only skip a frame that is byte-identical to what is already on
+// screen. A re-render triggered by other state (sessions === null) always
+// runs and resets the fingerprint afterwards.
+var lastRenderFingerprint = null;
+
+function sessionRenderFingerprint(sessions) {
+  try {
+    return JSON.stringify([sessions, store.get('splitGroups') || [], store.get('splitPanes') || null]);
+  } catch (e) {
+    return null;
+  }
+}
+
 export function renderSessionList(sessions) {
-  if (sessions) cachedSessions = sessions;
+  if (sessions) {
+    // A reconnect and a streaming turn both re-send this list unchanged;
+    // rebuilding the sidebar for an identical frame is what made it flicker.
+    var incoming = sessionRenderFingerprint(sessions);
+    if (incoming !== null && incoming === lastRenderFingerprint) return;
+    cachedSessions = sessions;
+  }
 
   // If mobile chat sheet is open, refresh it
   if (refreshMobileChatSheet) refreshMobileChatSheet();
@@ -1516,6 +1537,9 @@ export function renderSessionList(sessions) {
   refreshIcons();
   if (updatePageTitle) updatePageTitle();
   syncHeaderSearchUi();
+  // Recorded from the sessions actually rendered, so a null-argument re-render
+  // driven by other state refreshes the fingerprint rather than stranding it.
+  lastRenderFingerprint = sessionRenderFingerprint(cachedSessions);
 }
 
 // --- Search results ---

package/lib/public/modules/split-pair-ui.js

@@ -5,8 +5,8 @@ import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAg
 import { showToast } from './utils.js';
 
 var pairDialog = null;
-// Set when the dialog was opened via "Add Worker" on an existing session:
-// that session becomes the Driver and the dialog only configures the Worker.
+// Set when the dialog was opened via "Add Split Worker" on an existing session:
+// that session becomes the Driver and the dialog only configures the Split Worker.
 var pendingDriver = null;
 
 function closePairDialog() {
@@ -35,7 +35,7 @@ function roleColumn(role, description, vendorSelect, modelSelect, effortSelect,
   col.className = "pair-modal-role";
   var heading = document.createElement("div");
   heading.className = "pair-modal-role-heading";
-  heading.innerHTML = '<span class="pair-role-dot pair-role-' + role.toLowerCase() + '"></span><div><strong>' + role + '</strong><span>' + description + '</span></div>';
+  heading.innerHTML = '<span class="pair-role-dot pair-role-' + role.toLowerCase().replace(/ /g, "-") + '"></span><div><strong>' + role + '</strong><span>' + description + '</span></div>';
   col.appendChild(heading);
   var vendorField = fieldLabel("Vendor", vendorSelect);
   col.appendChild(vendorField.fragment);
@@ -82,13 +82,13 @@ export function showPairDialog(options) {
 
   var title = document.createElement("div");
   title.className = "wt-modal-title";
-  title.textContent = driverInfo ? "Add Worker" : "Pair session";
+  title.textContent = driverInfo ? "Add Split Worker" : "Pair session";
   modal.appendChild(title);
   var desc = document.createElement("div");
   desc.className = "pair-modal-desc";
   desc.textContent = driverInfo
-    ? "This session becomes the Driver; a new Worker opens beside it."
-    : "One Driver plans and directs a visible Worker session.";
+    ? "This session becomes the Driver; a new Split Worker opens beside it."
+    : "One Driver plans and directs a visible Split Worker session.";
   modal.appendChild(desc);
 
   var driverVendor = buildAgentVendorSelect(installed, installed.indexOf("claude") !== -1 ? "claude" : installed[0]);
@@ -137,7 +137,7 @@ export function showPairDialog(options) {
   } else {
     roles.appendChild(roleColumn("Driver", "Plans, delegates, and integrates", driverVendor, driverModel, driverEffort, options));
   }
-  roles.appendChild(roleColumn("Worker", "Executes delegated tasks", workerVendor, workerModel, workerEffort, options));
+  roles.appendChild(roleColumn("Split Worker", "Executes delegated tasks", workerVendor, workerModel, workerEffort, options));
   modal.appendChild(roles);
 
   var actions = document.createElement("div");
@@ -149,7 +149,7 @@ export function showPairDialog(options) {
   var createBtn = document.createElement("button");
   createBtn.type = "button";
   createBtn.className = "wt-modal-btn primary";
-  createBtn.textContent = driverInfo ? "Add Worker" : "Create pair";
+  createBtn.textContent = driverInfo ? "Add Split Worker" : "Create pair";
   actions.appendChild(cancelBtn);
   actions.appendChild(createBtn);
   modal.appendChild(actions);
@@ -218,7 +218,7 @@ export function handleSplitDelegation(msg) {
   if (msg.active) states[msg.groupId] = msg;
   else delete states[msg.groupId];
   store.set({ splitDelegations: states });
-  // Inside the worker's own pane, mirror the delegation into the composer
+  // Inside the Split Worker's own pane, mirror the delegation into the composer
   // notice (the delegated user_message shows it too; this covers the end).
   if (store.get('paneMode') && msg.to === store.get('activeSessionId')) {
     if (msg.active) showWorkerDelegationNotice(null);
@@ -252,7 +252,7 @@ export function syncPairChrome(host, split) {
         setBtn.type = "button";
         setBtn.className = "split-pair-set-driver";
         setBtn.textContent = "Set Driver";
-        setBtn.title = "Make this session the Driver; the other pane becomes its Worker";
+        setBtn.title = "Make this session the Driver; the other pane becomes its Split Worker";
         setBtn.addEventListener("click", function () { sendSetPair(group.id, paneSessionId); });
         var titleEl = header.querySelector(".split-pane-title");
         var accessEl = header.querySelector(".split-pane-full-access");
@@ -264,11 +264,11 @@ export function syncPairChrome(host, split) {
   for (var pi = 0; pi < split.panes.length && pi < headers.length; pi++) {
     (function (sessionId, header) {
       var isDriver = sessionId === group.pair.driverId;
-      var role = isDriver ? "Driver" : "Worker";
+      var role = isDriver ? "Driver" : "Split Worker";
       var badge = document.createElement("span");
-      badge.className = "split-pair-role split-pair-role-" + role.toLowerCase();
+      badge.className = "split-pair-role split-pair-role-" + role.toLowerCase().replace(/ /g, "-");
       badge.textContent = role;
-      badge.title = isDriver ? "Driver controls this Worker" : "Worker controlled by the Driver";
+      badge.title = isDriver ? "Driver controls this Split Worker" : "Split Worker controlled by the Driver";
       var title = header.querySelector(".split-pane-title");
       var access = header.querySelector(".split-pane-full-access");
       header.insertBefore(badge, access ? access.nextSibling : (title ? title.nextSibling : null));

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

@@ -11,6 +11,7 @@ import { groupedSessionIds, findSplitGroup } from './split-group-helpers.js';
 import { showConfirm } from './app-misc.js';
 import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
+import { autoStartLoginIfNeeded } from './vendor-login.js';
 
 var host = null;
 var nativeApp = null;
@@ -276,6 +277,12 @@ function handlePaneMessage(event) {
     if (present) presentMarkdownEdit(present);
     return;
   }
+  // Both panes can report auth_required for their own sessions. The shell runs
+  // one login flow for the project; repeat events are no-ops there.
+  if (msg.type === "clay-pane-auth-required") {
+    if (msg.message) autoStartLoginIfNeeded(msg.message);
+    return;
+  }
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
   for (var i = 0; i < frames.length; i++) {

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

@@ -11,7 +11,7 @@ var textTimers = {};
 var colorPickerEl = null;
 var formatToolbarEl = null;
 
-var NOTE_COLORS = ["yellow", "blue", "green", "pink", "orange", "purple"];
+var NOTE_COLORS = ["purple", "green", "yellow", "blue", "pink", "orange"];
 
 
 function getContainerBounds() {
@@ -98,7 +98,8 @@ export function createNote() {
     type: "note_create",
     x: 60 + offset,
     y: 60 + offset,
-    color: "yellow",
+    color: "purple",
+    opacity: 0.64,
   });
 }
 
@@ -154,7 +155,7 @@ function renderNote(data) {
   el.style.width = data.w + "px";
   el.style.height = data.h + "px";
   el.style.zIndex = 100 + (data.zIndex || 0);
-  el.dataset.color = data.color || "yellow";
+  el.dataset.color = data.color || "purple";
 
   if (data.minimized) el.classList.add("minimized");
   if (data.hidden) el.classList.add("hidden");
@@ -217,7 +218,7 @@ function renderNote(data) {
   opacitySlider.type = "range";
   opacitySlider.min = "20";
   opacitySlider.max = "100";
-  opacitySlider.value = String(Math.round((data.opacity || 1) * 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);
@@ -754,17 +755,44 @@ 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();
 
@@ -800,59 +828,84 @@ 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 || "yellow";
-
-  // 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);
       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 (next.hidden) 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;
+
+  if (patchNote(entry, msg.note)) refreshIcons();
 
   // Re-render archive if open (text or color may have changed)
   if (archiveOpen) renderArchiveCards();
@@ -926,7 +979,7 @@ function renderArchiveCards() {
     (function (noteData) {
       var card = document.createElement("div");
       card.className = "notes-archive-card" + (noteData.data.hidden ? " archived" : "");
-      card.dataset.color = noteData.data.color || "yellow";
+      card.dataset.color = noteData.data.color || "purple";
 
       // Header with title + delete
       var header = document.createElement("div");

package/lib/public/modules/tool-input-composition.js

@@ -0,0 +1,48 @@
+// Composition-safe action binding for declarative Capsule text controls.
+
+var inputStates = new WeakMap();
+
+export function isToolTextInputComposing(input) {
+  var state = inputStates.get(input);
+  return !!state && state.composing;
+}
+
+export function bindToolTextInput(input, commit, options) {
+  options = options || {};
+  var state = { composing: false, trailingValue: null };
+  inputStates.set(input, state);
+
+  function isAlive() {
+    return typeof options.isAlive !== "function" || options.isAlive(input);
+  }
+
+  input.addEventListener("compositionstart", function () {
+    state.composing = true;
+    state.trailingValue = null;
+  });
+
+  input.addEventListener("beforeinput", function (event) {
+    if (state.trailingValue === null && event && (event.isComposing || event.inputType === "insertCompositionText")) {
+      state.composing = true;
+    }
+  });
+
+  input.addEventListener("compositionend", function () {
+    state.composing = false;
+    state.trailingValue = input.value;
+    if (!isAlive()) return;
+    commit(input.value);
+    if (typeof options.onCompositionEnd === "function") options.onCompositionEnd(input);
+  });
+
+  input.addEventListener("input", function (event) {
+    if (state.composing || (event && event.isComposing)) return;
+    if (state.trailingValue !== null && input.value === state.trailingValue) {
+      state.trailingValue = null;
+      return;
+    }
+    state.trailingValue = null;
+    if (!isAlive()) return;
+    commit(input.value);
+  });
+}