clay-server 4.0.0-beta.9 → 4.0.0

package/lib/public/modules/tool-palette.js

@@ -14,44 +14,13 @@
 //   An in-flight save is debounced so rapid drag reorders don't spam.
 
 import { refreshIcons } from './icons.js';
-
-// Registry order = default order for users who haven't customized. Users
-// with saved preferences keep their own order (applyPreferences uses
-// saved order first, then appends any registry entries the user's saved
-// list doesn't mention). So changes here only affect fresh palettes.
-var SESSION_TOOLS = [
-  { id: "file-browser-btn",        icon: "folder-tree",    label: "File browser" },
-  { id: "terminal-sidebar-btn",    icon: "square-terminal", label: "Terminal",        countId: "terminal-sidebar-count" },
-  { id: "sticky-notes-sidebar-btn", icon: "sticky-note",   label: "Sticky Notes",    countId: "sticky-notes-sidebar-count" },
-  { id: "scheduler-btn",           icon: "calendar-clock", label: "Scheduled Tasks" },
-  { id: "loop-tool-btn",           icon: "repeat",         label: "Loop" },
-  { id: "git-sidebar-btn",         icon: "git-branch",     label: "Git",             countId: "git-sidebar-count" },
-  { id: "mcp-btn",                 icon: "cable",          label: "MCP Servers",     countId: "mcp-sidebar-count" },
-  { id: "skills-btn",              icon: "puzzle",         label: "Skills" },
-];
-
-var MATE_TOOLS = [
-  { id: "mate-memory-btn",       icon: "brain",          label: "Memory",          countId: "mate-memory-count" },
-  { id: "mate-knowledge-btn",    icon: "book-open",      label: "Knowledge",       countId: "mate-knowledge-count" },
-  { id: "mate-sticky-notes-btn", icon: "sticky-note",    label: "Sticky Notes" },
-  { id: "mate-scheduler-btn",    icon: "calendar-clock", label: "Scheduled Tasks" },
-  { id: "mate-debate-btn",       icon: "mic",            label: "Debate" },
-  { id: "mate-mcp-btn",          icon: "cable",          label: "MCP Servers",     countId: "mate-mcp-sidebar-count" },
-  { id: "mate-skills-btn",       icon: "puzzle",         label: "Skills" },
-];
-
-var PALETTES = {
-  session: {
-    tools: SESSION_TOOLS,
-    activeContainerId: "session-actions",
-    hiddenSectionId: "session-actions-hidden",
-  },
-  mate: {
-    tools: MATE_TOOLS,
-    activeContainerId: "mate-sidebar-tools",
-    hiddenSectionId: "mate-sidebar-tools-hidden",
-  },
-};
+import { PALETTES, normalizeToolPreferences } from './tool-palette-order.js';
+import {
+  enterToolPickMode,
+  exitToolPickMode,
+  isToolPickActive,
+  openPaletteContextMenu
+} from './tool-palette-overlays.js';
 
 var _saveTimers = {};
 var _draggingEl = null;
@@ -86,7 +55,7 @@ export function initToolPalettes() {
       // handler below, which would immediately tear down the pick-mode
       // we just entered.
       e.stopPropagation();
-      if (_pickActive) exitToolPickMode();
+      if (isToolPickActive()) exitToolPickMode();
       else enterToolPickMode();
     });
   }
@@ -303,152 +272,6 @@ function moveToActive(name, toolId) {
 // attached in buildToolButton before any external module attaches
 // handlers by ID. See the stopImmediatePropagation logic there.)
 
-// --- Right-click context menu ---
-
-var _openMenu = null;
-
-function openPaletteContextMenu(x, y, items) {
-  closePaletteContextMenu();
-  var menu = document.createElement('div');
-  menu.className = 'tool-palette-ctx-menu';
-  for (var i = 0; i < items.length; i++) {
-    (function (item) {
-      var btn = document.createElement('button');
-      btn.type = 'button';
-      btn.className = 'tool-palette-ctx-item';
-      btn.textContent = item.label;
-      btn.addEventListener('click', function (e) {
-        e.stopPropagation();
-        closePaletteContextMenu();
-        item.action();
-      });
-      menu.appendChild(btn);
-    })(items[i]);
-  }
-  document.body.appendChild(menu);
-  // Clamp to viewport.
-  var rect = menu.getBoundingClientRect();
-  var px = x, py = y;
-  if (px + rect.width > window.innerWidth - 4) px = window.innerWidth - rect.width - 4;
-  if (py + rect.height > window.innerHeight - 4) py = window.innerHeight - rect.height - 4;
-  menu.style.left = px + 'px';
-  menu.style.top = py + 'px';
-  _openMenu = menu;
-}
-
-function closePaletteContextMenu() {
-  if (_openMenu && _openMenu.parentNode) _openMenu.parentNode.removeChild(_openMenu);
-  _openMenu = null;
-}
-
-document.addEventListener('click', function () { closePaletteContextMenu(); });
-document.addEventListener('keydown', function (e) {
-  if (e.key === 'Escape') closePaletteContextMenu();
-});
-window.addEventListener('blur', function () { closePaletteContextMenu(); });
-window.addEventListener('resize', function () { closePaletteContextMenu(); });
-
-// --- Hotkey overlay (Cmd/Ctrl + O) ---
-//
-// Press Cmd/Ctrl + O to reveal a hotkey badge on each visible palette
-// tile. Then press the shown digit (1..9, 0) or letter (a..z) to
-// activate that tool. Escape or clicking away dismisses. Inspired by
-// Vimium / Superhuman-style "pick a tile with one keystroke" flows.
-
-var _pickActive = false;
-var HOTKEYS = (function () {
-  var k = [];
-  for (var i = 1; i <= 9; i++) k.push(String(i));
-  k.push('0');
-  for (var c = 97; c <= 122; c++) k.push(String.fromCharCode(c));
-  return k;
-})();
-
-function getVisiblePaletteName() {
-  // offsetParent is null when the element (or an ancestor) is hidden.
-  var mateActive = document.getElementById('mate-sidebar-tools');
-  if (mateActive && mateActive.offsetParent !== null) return 'mate';
-  var sessionActive = document.getElementById('session-actions');
-  if (sessionActive && sessionActive.offsetParent !== null) return 'session';
-  return null;
-}
-
-function enterToolPickMode() {
-  if (_pickActive) return;
-  var name = getVisiblePaletteName();
-  if (!name) return;
-  var active = document.getElementById(PALETTES[name].activeContainerId);
-  if (!active) return;
-  var tiles = active.querySelectorAll('[data-tool-id]');
-  if (tiles.length === 0) return;
-  for (var i = 0; i < tiles.length && i < HOTKEYS.length; i++) {
-    var key = HOTKEYS[i];
-    tiles[i].dataset.hotkey = key;
-    var badge = document.createElement('span');
-    badge.className = 'tool-palette-hotkey-badge';
-    badge.textContent = key.toUpperCase();
-    tiles[i].appendChild(badge);
-  }
-  _pickActive = true;
-}
-
-function exitToolPickMode() {
-  if (!_pickActive) return;
-  _pickActive = false;
-  var badges = document.querySelectorAll('.tool-palette-hotkey-badge');
-  for (var i = 0; i < badges.length; i++) {
-    if (badges[i].parentNode) badges[i].parentNode.removeChild(badges[i]);
-  }
-  var marked = document.querySelectorAll('[data-hotkey]');
-  for (var j = 0; j < marked.length; j++) {
-    delete marked[j].dataset.hotkey;
-  }
-}
-
-// Capture phase so we reliably preempt typing and browser shortcuts
-// when focus is in an input.
-document.addEventListener('keydown', function (e) {
-  // Pick mode: consume the next printable key.
-  if (_pickActive) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      exitToolPickMode();
-      return;
-    }
-    // Ignore modifier-only keys; react to single-character keys.
-    if (e.key.length !== 1) return;
-    if (e.ctrlKey || e.metaKey || e.altKey) return;
-    var key = e.key.toLowerCase();
-    var tile = document.querySelector('[data-hotkey="' + key + '"]');
-    if (tile) {
-      e.preventDefault();
-      exitToolPickMode();
-      tile.click();
-    } else {
-      // Unknown key exits pick mode without triggering a tile.
-      exitToolPickMode();
-    }
-    return;
-  }
-
-  // Enter pick mode on Cmd/Ctrl + O (letter O). Intercepted globally
-  // including inside text inputs — the browser's native Cmd+O is a
-  // file-picker dialog Clay never wants, so taking it over costs the
-  // user nothing and is especially useful when jumping to a tool from
-  // the session search box.
-  if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key && e.key.toLowerCase() === 'o') {
-    if (!getVisiblePaletteName()) return;
-    e.preventDefault();
-    enterToolPickMode();
-  }
-}, true);
-
-// Dismiss the overlay on click-away, blur, or viewport changes so it
-// never lingers invisibly.
-document.addEventListener('click', function () { if (_pickActive) exitToolPickMode(); });
-window.addEventListener('blur', function () { if (_pickActive) exitToolPickMode(); });
-window.addEventListener('resize', function () { if (_pickActive) exitToolPickMode(); });
-
 function getDragAfterElement(container, x, y) {
   var tiles = Array.prototype.slice.call(
     container.querySelectorAll('[data-tool-id]:not(.dragging)')
@@ -495,13 +318,17 @@ function applyPreferences(name, prefs) {
   var hiddenGrid = hiddenSection ? hiddenSection.querySelector('.tool-palette-hidden-grid') : null;
   if (!active || !hiddenGrid) return;
 
+  var normalized = normalizeToolPreferences(name, prefs);
+
   var hiddenSet = {};
-  var hiddenList = prefs.hidden || [];
+  var hiddenList = normalized.hidden;
   for (var i = 0; i < hiddenList.length; i++) hiddenSet[hiddenList[i]] = true;
 
-  var orderList = prefs.order || [];
+  var orderList = normalized.order;
   // Any tools not in the stored order are appended in registry order so
-  // newly-added tools surface automatically for existing users.
+  // newly-added tools surface automatically for existing users. This is how
+  // a restored tool reaches a saved palette that predates it: no rewrite, no
+  // server state, just the normal new-registry append.
   var placed = {};
   for (var j = 0; j < orderList.length; j++) {
     var id = orderList[j];
@@ -525,6 +352,12 @@ function applyPreferences(name, prefs) {
       hiddenGrid.appendChild(hbtn);
     }
   }
+
+  // Write the rewritten preference back once, through the normal save path, so
+  // the migration survives reloads and reaches the user's other devices. The
+  // save reads the DOM this function just arranged, so it records exactly what
+  // is on screen.
+  if (normalized.migrated) queueSave(name);
 }
 
 function queueSave(name) {

package/lib/public/modules/tools.js

@@ -7,6 +7,7 @@ import { mateAvatarUrl } from './avatar.js';
 import { getChatLayout } from './theme.js';
 import { store } from './store.js';
 import { VENDOR_NAMES } from './app-rendering.js';
+import { startThinkingSegment, appendThinkingText, stopThinkingSegment, resetThinkingTurn, clearThinkingState, saveThinkingState, restoreThinkingState, updateThinkingTokenEstimate } from './thinking-lifecycle.js';
 
 var ctx;
 
@@ -46,8 +47,6 @@ var todoMeta = {
 
 // --- Tool tracking ---
 var tools = {};
-var currentThinking = null;
-var thinkingGroup = null; // { el, count, totalDuration }
 var pendingPermissions = {};
 
 // --- Tool group tracking ---
@@ -203,6 +202,23 @@ export function toolActivityText(name, input) {
   return "Running " + name + "...";
 }
 
+// The sublabel for a call that has finished. `toolActivityText` is written in
+// the present progressive for a call in flight, so re-asserting it after a
+// result has arrived leaves a finished card claiming to still be running —
+// which is how a failed custom tool ended up reading "Running
+// send_to_partner..." beside its own error output.
+//
+// Only ever used where a result exists, so a genuinely in-flight call is never
+// relabelled. A failure states so plainly; a success keeps whatever specific
+// description the activity text produced ("Reading foo.js"), because that still
+// describes the call accurately, and only the generic present-progressive
+// fallback is replaced.
+export function toolTerminalText(name, input, isError) {
+  if (isError) return name + " failed";
+  var activity = toolActivityText(name, input);
+  return activity === "Running " + name + "..." ? name : activity;
+}
+
 function shortPath(p) {
   if (!p) return "";
   var parts = p.split("/");
@@ -1337,12 +1353,7 @@ export function markUserDialogResolved(requestId, behavior) {
 // Annotates the active thinking block's label with a running token estimate.
 // No-op when no thinking block is active.
 export function updateThinkingTokens(estimatedTokens) {
-  if (!currentThinking || !currentThinking.el) return;
-  var label = currentThinking.el.querySelector(".thinking-label");
-  if (!label) return;
-  var n = estimatedTokens || 0;
-  var disp = n >= 1000 ? ("~" + (Math.round(n / 100) / 10) + "k") : ("~" + n);
-  label.textContent = "Thinking " + disp + " tokens";
+  updateThinkingTokenEstimate(estimatedTokens);
 }
 
 // --- Plan mode rendering ---
@@ -1712,128 +1723,23 @@ function updateTodoSticky() {
 // --- Thinking ---
 export function startThinking() {
   ctx.finalizeAssistantBlock();
-
-  // Reuse existing thinking group if consecutive
-  if (thinkingGroup && thinkingGroup.el.classList.contains("done")) {
-    var el = thinkingGroup.el;
-    el.classList.remove("done");
-    el.querySelector(".thinking-content").textContent = "";
-    var reuseLabel = el.querySelector(".thinking-label");
-    if (reuseLabel) reuseLabel.textContent = "Thinking";
-    // Mate mode: restore dots activity row, hide thinking header
-    if (el.classList.contains("mate-thinking")) {
-      var actRow = el.querySelector(".mate-thinking-activity");
-      if (actRow) {
-        actRow.style.display = "";
-      }
-      var header = el.querySelector(".thinking-header");
-      if (header) header.style.display = "none";
-    }
-    currentThinking = { el: el, fullText: "", startTime: Date.now() };
-    refreshIcons();
-    maybeScrollToBottom();
-    if (!el.classList.contains("mate-thinking")) {
-      ctx.setActivity("thinking");
-    }
-    return;
-  }
-
-  var el = document.createElement("div");
-  el.className = "thinking-item";
-
-  if (ctx.isMateDm()) {
-    var mateName = ctx.getMateName();
-    var mateAvatar = ctx.getMateAvatarUrl();
-    el.classList.add("mate-thinking");
-    el.innerHTML =
-      '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
-      '<div class="dm-bubble-content">' +
-      '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
-      '<div class="mate-thinking-dots mate-thinking-activity"><span></span><span></span><span></span></div>' +
-      '<div class="thinking-header" style="display:none">' +
-      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
-      '<span class="thinking-label">Thinking</span>' +
-      '<span class="thinking-duration"></span>' +
-      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
-      '</div>' +
-      '<div class="thinking-content"></div>' +
-      '</div>';
-  } else {
-    el.innerHTML =
-      '<div class="thinking-header">' +
-      '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
-      '<span class="thinking-label">Thinking</span>' +
-      '<span class="thinking-duration"></span>' +
-      '<span class="thinking-spinner">' + iconHtml("loader", "icon-spin") + '</span>' +
-      '</div>' +
-      '<div class="thinking-content"></div>';
-  }
-
-  el.querySelector(".thinking-header").addEventListener("click", function () {
-    el.classList.toggle("expanded");
-  });
-
-  ctx.addToMessages(el);
-  refreshIcons();
-  maybeScrollToBottom();
-  thinkingGroup = { el: el, count: 0, totalDuration: 0 };
-  currentThinking = { el: el, fullText: "", startTime: Date.now() };
+  var el = startThinkingSegment();
   if (!ctx.isMateDm()) {
     ctx.setActivity("thinking");
   }
+  return el;
 }
 
 export function appendThinking(text) {
-  if (!currentThinking) return;
-  currentThinking.fullText += text;
-  currentThinking.el.querySelector(".thinking-content").textContent = currentThinking.fullText;
-  maybeScrollToBottom();
+  appendThinkingText(text);
 }
 
 export function stopThinking(duration) {
-  if (!currentThinking) return;
-  var secs = typeof duration === "number" ? duration : (Date.now() - currentThinking.startTime) / 1000;
-  currentThinking.el.classList.add("done");
-  if (thinkingGroup && thinkingGroup.el === currentThinking.el) {
-    thinkingGroup.count++;
-    thinkingGroup.totalDuration += secs;
-    currentThinking.el.querySelector(".thinking-duration").textContent = " " + thinkingGroup.totalDuration.toFixed(1) + "s";
-  } else {
-    currentThinking.el.querySelector(".thinking-duration").textContent = " " + secs.toFixed(1) + "s";
-  }
-  // If no thinking text was streamed (e.g. Codex reasoning items arrive
-  // with encrypted/hidden content, or Claude without extended-thinking),
-  // the expand affordance is misleading because there's nothing inside.
-  // Strip the chevron and the click handler so the header reads as a
-  // plain label.
-  var hasContent = !!(currentThinking.fullText && currentThinking.fullText.length > 0);
-  if (!hasContent) {
-    currentThinking.el.classList.add("empty");
-    var chev = currentThinking.el.querySelector(".thinking-chevron");
-    if (chev) chev.style.display = "none";
-    var hdr = currentThinking.el.querySelector(".thinking-header");
-    if (hdr) {
-      hdr.style.cursor = "default";
-      // Replace click listener by cloning the node (cheapest way to strip listeners).
-      var clone = hdr.cloneNode(true);
-      hdr.parentNode.replaceChild(clone, hdr);
-    }
-  }
-  // In mate mode: hide sparkle activity, show compact thinking header.
-  if (currentThinking.el.classList.contains("mate-thinking")) {
-    var actRow = currentThinking.el.querySelector(".mate-thinking-activity");
-    if (actRow) actRow.style.display = "none";
-    var header = currentThinking.el.querySelector(".thinking-header");
-    if (header) {
-      header.style.display = "";
-      header.style.cursor = hasContent ? "pointer" : "default";
-    }
-  }
-  currentThinking = null;
+  stopThinkingSegment(duration);
 }
 
 export function resetThinkingGroup() {
-  thinkingGroup = null;
+  resetThinkingTurn();
 }
 
 // --- Tool items ---
@@ -2136,9 +2042,12 @@ export function updateToolResult(id, content, isError, images) {
   var tool = tools[id];
   if (!tool) return;
 
+  // Re-render the sublabel from the now-complete input (streaming can have
+  // built it from a partial one), but in its terminal form: a result has
+  // arrived, so this call is no longer running.
   var subtitleText = tool.el.querySelector(".tool-subtitle-text");
   if (subtitleText && tool.input) {
-    subtitleText.textContent = toolActivityText(tool.name, tool.input);
+    subtitleText.textContent = toolTerminalText(tool.name, tool.input, isError);
   }
 
   var resultBlock = document.createElement("div");
@@ -2501,7 +2410,7 @@ export function getHiddenResultTools() { return HIDDEN_RESULT_TOOLS; }
 export function saveToolState() {
   return {
     tools: tools,
-    currentThinking: currentThinking,
+    thinkingState: saveThinkingState(),
     todoWidgetEl: todoWidgetEl,
     todoMeta: todoMeta,
     inPlanMode: inPlanMode,
@@ -2516,7 +2425,7 @@ export function saveToolState() {
 
 export function restoreToolState(saved) {
   tools = saved.tools;
-  currentThinking = saved.currentThinking;
+  restoreThinkingState(saved.thinkingState);
   todoWidgetEl = saved.todoWidgetEl;
   todoMeta = saved.todoMeta || normalizeTodoMeta();
   inPlanMode = saved.inPlanMode;
@@ -2533,8 +2442,7 @@ export function restoreToolState(saved) {
 
 export function resetToolState() {
   tools = {};
-  currentThinking = null;
-  thinkingGroup = null;
+  clearThinkingState();
   inPlanMode = false;
   planContent = null;
   currentPlanCardEl = null;

package/lib/public/modules/update-snooze.js

@@ -0,0 +1,169 @@
+// Snooze control for the update-available banner.
+//
+// Lives outside app-notifications.js so the banner module does not grow
+// further, and because this is a self-contained concern: one compact menu, one
+// message out, one message in.
+//
+// The client decides nothing. It sends an allowlisted duration key and, as a
+// hint only, the browser's UTC offset so "Tomorrow" lands on the user's
+// morning rather than the server's. The deadline, the target version and the
+// user identity are all resolved server-side, so a tampered payload can only
+// ever produce a refusal or a shorter snooze.
+
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+// Must match SNOOZE_OPTIONS in lib/update-snooze.js. The server re-validates
+// every key, so this list is presentation, not policy.
+var SNOOZE_CHOICES = [
+  { id: "3h", label: "3 hours" },
+  { id: "8h", label: "8 hours" },
+  { id: "tomorrow", label: "Tomorrow" },
+];
+
+var openMenu = null;
+var bannerRemover = null;
+
+// app-notifications.js owns banner teardown (it runs the exit animation and
+// keeps the clear-all button in sync). Registering the remover here keeps the
+// dependency one-way, so the two modules never form a cycle.
+export function setSnoozeBannerRemover(fn) {
+  bannerRemover = typeof fn === "function" ? fn : null;
+}
+
+export function isSnoozeChoice(id) {
+  for (var i = 0; i < SNOOZE_CHOICES.length; i++) {
+    if (SNOOZE_CHOICES[i].id === id) return true;
+  }
+  return false;
+}
+
+function closeMenu() {
+  if (!openMenu) return;
+  var trigger = openMenu.trigger;
+  if (openMenu.menu && openMenu.menu.parentNode) {
+    openMenu.menu.parentNode.removeChild(openMenu.menu);
+  }
+  openMenu = null;
+  if (trigger) trigger.setAttribute("aria-expanded", "false");
+}
+
+function sendSnooze(duration) {
+  if (!isSnoozeChoice(duration)) return;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  // A hint, not an instruction: the server validates the range, computes the
+  // instant itself, and clamps the result to its own maximum.
+  var offset = -new Date().getTimezoneOffset();
+  ws.send(JSON.stringify({ type: "update_snooze", duration: duration, tzOffsetMinutes: offset }));
+}
+
+function buildMenu(trigger) {
+  var menu = document.createElement("div");
+  menu.className = "notif-banner-snooze-menu";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", "Snooze this update");
+
+  for (var i = 0; i < SNOOZE_CHOICES.length; i++) {
+    (function (choice) {
+      var item = document.createElement("button");
+      item.type = "button";
+      item.className = "notif-banner-snooze-item";
+      item.setAttribute("role", "menuitem");
+      item.textContent = choice.label;
+      item.addEventListener("click", function (e) {
+        e.stopPropagation();
+        closeMenu();
+        sendSnooze(choice.id);
+      });
+      menu.appendChild(item);
+    })(SNOOZE_CHOICES[i]);
+  }
+
+  // Roving focus with the arrow keys, Escape back to the trigger. Enough for a
+  // three-item menu to be usable without a pointer.
+  menu.addEventListener("keydown", function (e) {
+    var items = menu.querySelectorAll(".notif-banner-snooze-item");
+    var index = -1;
+    for (var i = 0; i < items.length; i++) {
+      if (items[i] === document.activeElement) { index = i; break; }
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      var next = e.key === "ArrowDown" ? index + 1 : index - 1;
+      if (next < 0) next = items.length - 1;
+      if (next >= items.length) next = 0;
+      if (items[next]) items[next].focus();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      closeMenu();
+      if (trigger) trigger.focus();
+    }
+  });
+
+  return menu;
+}
+
+// Append a compact Snooze control to an existing update banner's action row.
+// Reuses the banner's own button shape rather than introducing a new one.
+export function attachSnoozeControl(actionsEl) {
+  if (!actionsEl) return null;
+
+  var wrap = document.createElement("div");
+  wrap.className = "notif-banner-snooze";
+
+  var trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "notif-banner-snooze-btn";
+  trigger.setAttribute("aria-haspopup", "menu");
+  trigger.setAttribute("aria-expanded", "false");
+  trigger.setAttribute("aria-label", "Snooze this update notification");
+  trigger.innerHTML = iconHtml("clock") + "<span>Snooze</span>";
+
+  trigger.addEventListener("click", function (e) {
+    e.stopPropagation();
+    if (openMenu && openMenu.trigger === trigger) {
+      closeMenu();
+      return;
+    }
+    closeMenu();
+    var menu = buildMenu(trigger);
+    wrap.appendChild(menu);
+    openMenu = { menu: menu, trigger: trigger };
+    trigger.setAttribute("aria-expanded", "true");
+    var first = menu.querySelector(".notif-banner-snooze-item");
+    if (first) first.focus();
+  });
+
+  wrap.appendChild(trigger);
+  actionsEl.appendChild(wrap);
+  refreshIcons();
+  return wrap;
+}
+
+// The server confirms a snooze to every device of that user, so each one drops
+// the banner rather than only the device the user acted on.
+export function handleUpdateSnoozed(msg) {
+  closeMenu();
+  if (!msg || !msg.ok) return;
+  var banner = document.querySelector('.notif-banner[data-notif-id="_update"]');
+  if (!banner) return;
+  if (msg.version && banner.getAttribute("data-update-version") !== msg.version) return;
+  if (bannerRemover) bannerRemover(banner);
+  else if (banner.parentNode) banner.parentNode.removeChild(banner);
+}
+
+// Dismiss on click-away, blur, or a viewport change so the menu never lingers
+// invisibly. Registered defensively because importing this module must stay
+// side-effect-safe: several suites load the client graph against a partial
+// document/window stub, and a dismiss convenience must not be what breaks them.
+function onGlobal(target, name, fn) {
+  if (target && typeof target.addEventListener === "function") target.addEventListener(name, fn);
+}
+
+onGlobal(typeof document !== "undefined" ? document : null, "click", function () { closeMenu(); });
+onGlobal(typeof window !== "undefined" ? window : null, "blur", function () { closeMenu(); });
+onGlobal(typeof window !== "undefined" ? window : null, "resize", function () { closeMenu(); });

package/lib/public/modules/user-settings.js

@@ -10,6 +10,7 @@ import { setSTTLang } from './stt.js';
 import { userAvatarUrl } from './avatar.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { initCapsulePreference, syncCapsulePreference } from './capsule-preference.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -34,6 +35,8 @@ export function initUserSettings(appCtx) {
 
   if (!settingsEl || !openBtn) return;
 
+  initCapsulePreference();
+
   navItems = settingsEl.querySelectorAll('.us-nav-item');
   sections = settingsEl.querySelectorAll('.us-section');
   pinForm = document.getElementById('us-pin-form');
@@ -466,6 +469,7 @@ function populateAccount() {
     if (matesToggle) matesToggle.checked = matesOn;
     store.set({ projectMateDmsEnabled: matesOn });
     applyProjectMateDmsClass(matesOn);
+    syncCapsulePreference(data.capsulesEnabled === true);
     if (data.chatLayout) {
       setChatLayout(data.chatLayout); // update local cache + CSS
     }