clay-server 4.1.0-beta.4 → 4.1.0-beta.5

package/lib/public/app.js

@@ -30,7 +30,7 @@ import { initGitPanel } from './modules/git-panel.js';
 import { initWorkerPaneLock } from './modules/worker-pane-lock.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
 import { initContextSources, updateTerminalList, updateBrowserTabList, handleContextSourcesState, getActiveSources, hasActiveSources } from './modules/context-sources.js';
-import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, hideNotes, showNotes, isNotesVisible, createNote, setBrowserRefresh } from './modules/sticky-notes.js';
+import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, hideNotes, showNotes, isNotesVisible, createNote, setBrowserRefresh, toggleNotesTemporaryVisibility } from './modules/sticky-notes.js';
 import { initNotesBrowser, openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen, renderNotesBrowser, registerExclusiveClosers } from './modules/sticky-notes-browser.js';
 import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme, getChatLayout } from './modules/theme.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderElicitationRequest, markElicitationResolved, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, resetTurnMetaCost, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, updateSubagentProgress, initSubagentStop, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
@@ -269,6 +269,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     splitPanes: null,
     splitGroups: [],
     splitDelegations: {},
+    notesTemporarilyHidden: false,
     dmMode: false,
     historyFrom: 0,
     loadingMore: false,
@@ -1133,6 +1134,13 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     });
   }
 
+  var stickyNotesToggleButtons = document.querySelectorAll("#sticky-notes-toggle-btn");
+  for (var stickyToggleIndex = 0; stickyToggleIndex < stickyNotesToggleButtons.length; stickyToggleIndex++) {
+    stickyNotesToggleButtons[stickyToggleIndex].addEventListener("click", function () {
+      toggleNotesTemporaryVisibility();
+    });
+  }
+
   // Sticky Notes badge click → archive toggle
   var stickyNotesBadge = $("sticky-notes-sidebar-count");
   if (stickyNotesBadge) {

package/lib/public/css/mates.css

@@ -2790,7 +2790,6 @@ body.mate-dm-active .activity-inline:not(.mention-activity-bar):not(.mate-pre-ac
   body.mate-dm-active .title-bar-content #todo-sticky,
   body.mate-dm-active .title-bar-content #ralph-sticky,
   body.mate-dm-active .dm-header-bar,
-  body.mate-dm-active .title-bar-content .status #sticky-notes-toggle-btn,
   body.mate-dm-active .title-bar-content .status #terminal-toggle-btn {
     display: none !important;
   }

package/lib/public/css/sticky-notes.css

@@ -13,6 +13,16 @@
 
 #sticky-notes-container.hidden { display: none; }
 
+.sticky-note.sticky-note-flight-away {
+  pointer-events: none;
+  transform: var(--sticky-note-flight);
+  transition: transform var(--sticky-note-flight-duration, 240ms) cubic-bezier(0.55, 0, 1, 0.45);
+}
+
+.sticky-note:not(.sticky-note-flight-away) {
+  transition: transform var(--sticky-note-flight-duration, 320ms) cubic-bezier(0.22, 1.25, 0.36, 1), box-shadow 0.15s;
+}
+
 /* --- Toggle button (in title bar, matches terminal-toggle-btn) --- */
 #sticky-notes-toggle-btn {
   display: flex;
@@ -827,11 +837,16 @@
   50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 99, 102, 241), 0); }
 }
 
-/* --- Mobile: hide entirely --- */
+/* --- Mobile browser sizing --- */
 @media (max-width: 768px) {
-  #sticky-notes-container,
-  #sticky-notes-toggle-btn {
-    display: none !important;
+  /* The shared title-bar control remains the sole hide/show affordance on
+     mobile; the canvas itself must stay mountable and viewport-bounded. */
+  #sticky-notes-toggle-btn { display: flex; }
+
+  .sticky-note {
+    min-width: min(160px, calc(100% - 16px));
+    max-width: calc(100% - 16px);
+    max-height: calc(100% - 16px);
   }
 
   .notes-browser-grid {
@@ -841,3 +856,8 @@
 
   .notes-browser-topbar { padding: 10px 12px; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .sticky-note.sticky-note-flight-away,
+  .sticky-note:not(.sticky-note-flight-away) { transition-duration: 0ms; }
+}

package/lib/public/index.html

@@ -427,6 +427,7 @@
           </button>
           <button id="debate-pdf-btn" class="hidden" title="Export debate as PDF"><i data-lucide="download"></i></button>
           <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
+          <button type="button" id="sticky-notes-toggle-btn" aria-label="Hide sticky notes" aria-pressed="false" title="Hide sticky notes"><i data-lucide="eye-off"></i></button>
           <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
         </div>
       </div>

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

@@ -303,7 +303,7 @@ export function closeNotesBrowser() {
   var sidebarBtn = document.getElementById("sticky-notes-sidebar-btn");
   if (sidebarBtn) sidebarBtn.classList.remove("active");
   // The canvas comes back so the open notes are reachable again.
-  showNotes();
+  showNotes(false);
 }
 
 export function isNotesBrowserOpen() {

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

@@ -11,9 +11,11 @@ import { enhanceClayLogLinks } from './clay-log-links.js';
 import { isClosedNote, send, clampPos, clearNoteTimers, syncTitle } from './sticky-notes-shared.js';
 import { renderNote, closeColorPicker } from './sticky-notes-card.js';
 import { closeFormatToolbar, isFormatToolbarOpen } from './sticky-notes-editor.js';
+import { store } from './store.js';
 
 var notes = new Map();  // id -> { data, el }
 var notesVisible = false;
+var notesResizeObserver = null;
 
 // The canvas shows open notes only. Closed notes leave the canvas and live in
 // the browser's Closed tab until they are reopened.
@@ -37,6 +39,93 @@ function refreshBrowser() {
   if (browserRefresh) browserRefresh();
 }
 
+function prefersReducedMotion() {
+  return window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function setFlightAccessibility(el, hidden) {
+  el.inert = hidden;
+  el.setAttribute("aria-hidden", hidden ? "true" : "false");
+}
+
+function nearestEdgeTransform(el, container) {
+  // offsetLeft/Top and offsetWidth/Height are layout geometry, unaffected by
+  // an in-flight transform. Never derive the next vector from a translated
+  // boundingClientRect or repeated hide/show cycles will accumulate distance.
+  var left = el.offsetLeft;
+  var top = el.offsetTop;
+  var width = el.offsetWidth;
+  var height = el.offsetHeight;
+  var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
+  var edges = [
+    { name: "left", distance: left, transform: "translateX(" + -(left + width + 20) + "px)" },
+    { name: "right", distance: containerWidth - left - width, transform: "translateX(" + (containerWidth - left + 20) + "px)" },
+    { name: "top", distance: top, transform: "translateY(" + -(top + height + 20) + "px)" },
+    { name: "bottom", distance: containerHeight - top - height, transform: "translateY(" + (containerHeight - top + 20) + "px)" },
+  ];
+  edges.sort(function (a, b) { return a.distance - b.distance; });
+  return edges[0];
+}
+
+function animateNote(el, hidden, immediate) {
+  if (!el || el.classList.contains("hidden")) return;
+  var container = document.getElementById("sticky-notes-container");
+  if (!container) return;
+  if (hidden) {
+    var edge = nearestEdgeTransform(el, container);
+    el.style.setProperty("--sticky-note-flight", edge.transform);
+    el.style.setProperty("--sticky-note-flight-duration", prefersReducedMotion() || immediate ? "0ms" : "240ms");
+    el.classList.add("sticky-note-flight-away");
+    setFlightAccessibility(el, true);
+    return;
+  }
+  el.style.setProperty("--sticky-note-flight-duration", prefersReducedMotion() || immediate ? "0ms" : "320ms");
+  el.classList.remove("sticky-note-flight-away");
+  setFlightAccessibility(el, false);
+}
+
+function syncFlightState(el, immediate) {
+  if (store.get("notesTemporarilyHidden")) animateNote(el, true, immediate);
+  else animateNote(el, false, immediate);
+}
+
+function recomputeFlightGeometry() {
+  if (!notesVisible) return;
+  reclampAllNotes();
+  if (store.get("notesTemporarilyHidden")) {
+    notes.forEach(function (entry) { if (entry && entry.el) syncFlightState(entry.el, true); });
+  }
+}
+
+function syncFlightControls() {
+  var buttons = document.querySelectorAll("#sticky-notes-toggle-btn");
+  var hidden = !!store.get("notesTemporarilyHidden");
+  var label = hidden ? "Show sticky notes" : "Hide sticky notes";
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].setAttribute("aria-label", label);
+    buttons[i].setAttribute("aria-pressed", hidden ? "true" : "false");
+    buttons[i].title = label;
+    var icon = buttons[i].querySelector("[data-lucide]");
+    if (icon) icon.setAttribute("data-lucide", hidden ? "eye" : "eye-off");
+  }
+  refreshIcons();
+}
+
+export function toggleNotesTemporaryVisibility() {
+  var hidden = !store.get("notesTemporarilyHidden");
+  if (hidden) {
+    closeColorPicker();
+    closeFormatToolbar();
+    var active = document.activeElement;
+    var container = document.getElementById("sticky-notes-container");
+    if (container && active && container.contains(active) && active.blur) active.blur();
+  }
+  store.set({ notesTemporarilyHidden: hidden });
+  notes.forEach(function (entry) { if (entry && entry.el) syncFlightState(entry.el); });
+  syncFlightControls();
+}
+
 // Read-only view of every note the client knows about, for the browser pane.
 export function listNoteData() {
   var out = [];
@@ -67,6 +156,7 @@ function reclampAllNotes() {
     var c = clampPos(curX, curY, noteW, noteH);
     el.style.left = c.x + "px";
     el.style.top = c.y + "px";
+    if (store.get("notesTemporarilyHidden")) syncFlightState(el, true);
   });
 }
 
@@ -86,17 +176,29 @@ export function initStickyNotes() {
       if (notesVisible && notes.size > 0) {
         reclampAllNotes();
       }
+      if (store.get("notesTemporarilyHidden")) notes.forEach(function (entry) { if (entry && entry.el) syncFlightState(entry.el, true); });
     }, 100);
   });
 
+  var canvas = document.getElementById("sticky-notes-container");
+  if (canvas && typeof ResizeObserver === "function") {
+    notesResizeObserver = new ResizeObserver(function () {
+      recomputeFlightGeometry();
+    });
+    notesResizeObserver.observe(canvas);
+  }
+
 }
 
 // --- Visibility ---
 
-export function showNotes() {
+export function showNotes(restoreTemporary) {
   notesVisible = true;
+  if (restoreTemporary !== false) store.set({ notesTemporarilyHidden: false });
   var container = document.getElementById("sticky-notes-container");
   if (container) container.classList.remove("hidden");
+  notes.forEach(function (entry) { if (entry && entry.el) syncFlightState(entry.el); });
+  syncFlightControls();
 }
 
 export function hideNotes() {
@@ -104,6 +206,8 @@ export function hideNotes() {
   var container = document.getElementById("sticky-notes-container");
   if (container) container.classList.add("hidden");
   closeColorPicker();
+  notes.forEach(function (entry) { if (entry && entry.el) syncFlightState(entry.el, true); });
+  syncFlightControls();
 }
 
 export function createNote() {
@@ -158,6 +262,7 @@ export function handleNotesList(msg) {
     var el = renderNote(data);
     notes.set(data.id, { data: data, el: el });
     container.appendChild(el);
+    syncFlightState(el, true);
     created = true;
   }
 
@@ -181,11 +286,14 @@ export function handleNotesList(msg) {
   refreshBrowser();
 
   // Auto-show only when something is actually asking for attention. A board of
-  // nothing but closed notes must not pop the canvas open.
+  // nothing but closed notes must not pop the canvas open. Temporary hiding is
+  // explicit view state and must survive reconnects and list updates.
   if (openCount() > 0 && !notesVisible) {
     notesVisible = true;
     container.classList.remove("hidden");
   }
+  if (created) reclampAllNotes();
+  syncFlightControls();
 }
 
 export function handleNoteCreated(msg) {
@@ -198,15 +306,18 @@ export function handleNoteCreated(msg) {
   var el = renderNote(msg.note);
   notes.set(msg.note.id, { data: msg.note, el: el });
   container.appendChild(el);
+  syncFlightState(el, true);
   updateBadge();
   updateSidebarBadge();
   refreshBrowser();
 
-  // Show container if hidden
-  if (!notesVisible) {
+  // Show container if hidden, unless the user explicitly flew the notes out.
+  if (!notesVisible && !store.get("notesTemporarilyHidden")) {
     notesVisible = true;
     container.classList.remove("hidden");
   }
+  reclampAllNotes();
+  syncFlightControls();
 }
 
 // Patch one existing note element in place from a server payload.
@@ -258,6 +369,7 @@ function patchNote(entry, next) {
 
   if (isClosedNote(next)) el.classList.add("hidden");
   else el.classList.remove("hidden");
+  syncFlightState(el, true);
 
   // The minimize button swaps its icon, which is the only path here that can
   // introduce fresh Lucide markup.
@@ -288,6 +400,7 @@ export function handleNoteUpdated(msg) {
   if (!entry) return;
 
   if (patchNote(entry, msg.note)) refreshIcons();
+  reclampAllNotes();
 
   // A close or reopen arrives as an ordinary update, so the canvas count and
   // the browser both follow from the same message.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.1.0-beta.4",
+  "version": "4.1.0-beta.5",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",