clay-server 4.0.0-beta.2 → 4.0.0-beta.21

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

@@ -16,6 +16,12 @@ import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperim
 import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { openPairDialog } from './split-pair-ui.js';
+import {
+  hierarchyItemMatches,
+  prepareSidebarHierarchy,
+  renderDesktopDriverHierarchy,
+  renderDesktopOrphanHierarchy
+} from './sidebar-session-hierarchy.js';
 
 
 // --- Session state ---
@@ -49,8 +55,8 @@ function sendSessionBookmark(sessionId, bookmarked) {
 }
 
 function compareSessionListItems(a, b) {
-  var aData = a && a.type === "session" ? a.data : a;
-  var bData = b && b.type === "session" ? b.data : b;
+  var aData = a && (a.type === "session" || a.type === "driver-hierarchy") ? a.data : a;
+  var bData = b && (b.type === "session" || b.type === "driver-hierarchy") ? b.data : b;
   var aBookmarked = !!(aData && aData.bookmarked);
   var bBookmarked = !!(bData && bData.bookmarked);
   if (aBookmarked !== bBookmarked) return aBookmarked ? -1 : 1;
@@ -236,6 +242,14 @@ function collectItemSessionIds(item) {
   if (item.type === "split-group" && Array.isArray(item.members)) {
     return item.members.map(function (session) { return session.id; });
   }
+  if (item.type === "driver-hierarchy" && item.root) {
+    var hierarchyIds = [item.root.driver.id];
+    for (var j = 0; j < item.root.workers.length; j++) hierarchyIds.push(item.root.workers[j].id);
+    return hierarchyIds;
+  }
+  if (item.type === "orphan-workers" && Array.isArray(item.workers)) {
+    return item.workers.map(function (session) { return session.id; });
+  }
   return [];
 }
 
@@ -683,7 +697,7 @@ function showSessionCtxMenu(anchorBtn, sessionId, title, cliSid, sessionData) {
 
   // Session visibility toggle (only the session owner can change)
   if (store.get('isMultiUserMode') && sessionData && sessionData.ownerId && sessionData.ownerId === store.get('myUserId')) {
-    var currentVis = (sessionData && sessionData.sessionVisibility) || "shared";
+    var currentVis = (sessionData && sessionData.sessionVisibility) || "private";
     var isPrivate = currentVis === "private";
     var visItem = document.createElement("button");
     visItem.className = "session-ctx-item";
@@ -1246,10 +1260,12 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
 
 // --- Session item rendering ---
 
-function renderSessionItem(s) {
+function renderSessionItem(s, options) {
+  var itemOptions = options || {};
   var el = document.createElement("div");
   var isMatch = searchMatchIds !== null && searchMatchIds.has(s.id);
   el.className = "session-item" + (s.active ? " active" : "") + (isMatch ? " search-match" : "");
+  if (itemOptions.worker) el.classList.add("session-worker-item");
   el.dataset.sessionId = s.id;
 
   // Keep agent identity separate from the title so each row has a stable
@@ -1274,13 +1290,20 @@ function renderSessionItem(s) {
   if (s.loop && s.loop.source === "debate") {
     textHtml += '<span class="session-debate-icon" title="Debate">' + iconHtml("mic") + '</span>';
   }
-  if (store.get('isMultiUserMode') && s.sessionVisibility === "private") {
-    textHtml += '<span class="session-private-icon" title="Private session">' + iconHtml("lock") + '</span>';
+  if (store.get('isMultiUserMode') && s.sessionVisibility === "shared") {
+    textHtml += '<span class="session-shared-icon" title="Shared session" aria-label="Shared session">' + iconHtml("users") + '</span>';
   }
   textHtml += highlightMatch(s.title || "New Session", searchQuery);
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
 
+  if (itemOptions.worker) {
+    var workerLabel = document.createElement("span");
+    workerLabel.className = "session-worker-generation" + (itemOptions.current ? " current" : "");
+    workerLabel.textContent = itemOptions.current ? "Current" : (s.workerGeneration ? "Gen " + s.workerGeneration : "Worker");
+    el.appendChild(workerLabel);
+  }
+
   var ageText = relativeTime(s.lastActivity || 0);
   if (ageText) {
     var age = document.createElement("span");
@@ -1325,7 +1348,7 @@ function renderSessionItem(s) {
 
   // Presence avatars (multi-user)
   renderPresenceAvatars(el, String(s.id));
-  setupSessionDragHandlers(el, s);
+  if (!itemOptions.worker) setupSessionDragHandlers(el, s);
 
   return el;
 }
@@ -1376,8 +1399,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();
@@ -1388,12 +1432,17 @@ export function renderSessionList(sessions) {
   // Group by loopId + date so all runs of the same task on the same day are merged
   var splitGroups = store.get('splitGroups') || [];
   var groupedIds = groupedSessionIds(splitGroups);
+  var hierarchy = prepareSidebarHierarchy(cachedSessions);
+  var hierarchyByDriver = hierarchy.byDriver;
+  var hierarchySessionIds = hierarchy.sessionIds;
+  hierarchySessionIds.forEach(function (id) { groupedIds.delete(id); });
   var sessionsById = new Map();
   for (var si = 0; si < cachedSessions.length; si++) sessionsById.set(cachedSessions[si].id, cachedSessions[si]);
   var loopGroups = {}; // groupKey -> [sessions]
   var normalSessions = [];
   for (var i = 0; i < cachedSessions.length; i++) {
     var s = cachedSessions[i];
+    if (s.sessionRole === "worker") continue;
     if (groupedIds.has(s.id)) continue;
     if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph" && s.loop.source !== "debate") {
       // Task crafting sessions live in the scheduler calendar, not the main list (except debate)
@@ -1412,13 +1461,21 @@ export function renderSessionList(sessions) {
   // Build virtual items: normal sessions + one entry per loop group (using latest child's lastActivity)
   var items = [];
   for (var j = 0; j < normalSessions.length; j++) {
-    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+    var driverRoot = hierarchyByDriver.get(normalSessions[j].id);
+    if (driverRoot) items.push({ type: "driver-hierarchy", root: driverRoot, data: driverRoot.driver, lastActivity: driverRoot.lastActivity });
+    else items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  if (hierarchy.orphans.length) {
+    var orphanActivity = 0;
+    for (var oi = 0; oi < hierarchy.orphans.length; oi++) orphanActivity = Math.max(orphanActivity, hierarchy.orphans[oi].lastActivity || 0);
+    items.push({ type: "orphan-workers", workers: hierarchy.orphans, lastActivity: orphanActivity });
   }
   for (var sg = 0; sg < splitGroups.length; sg++) {
     var splitGroup = splitGroups[sg];
     var leftMember = sessionsById.get(splitGroup.members[0]);
     var rightMember = sessionsById.get(splitGroup.members[1]);
     if (!leftMember || !rightMember) continue;
+    if (hierarchySessionIds.has(leftMember.id) || hierarchySessionIds.has(rightMember.id)) continue;
     items.push({
       type: "split-group",
       group: splitGroup,
@@ -1449,9 +1506,10 @@ export function renderSessionList(sessions) {
     if (item.type === "session" && item.data && !isSessionVisibleBySearch(item.data.id)) {
       continue;
     }
+    if ((item.type === "driver-hierarchy" || item.type === "orphan-workers") && !hierarchyItemMatches(item, searchMatchIds)) continue;
     if (item.type === "split-group" && searchMatchIds !== null &&
         !searchMatchIds.has(item.members[0].id) && !searchMatchIds.has(item.members[1].id)) continue;
-    if (item.type === "session" && item.data && item.data.bookmarked) {
+    if ((item.type === "session" || item.type === "driver-hierarchy") && item.data && item.data.bookmarked) {
       bookmarkedItems.push(item);
     } else {
       regularItems.push(item);
@@ -1468,7 +1526,8 @@ export function renderSessionList(sessions) {
     favoritesContainer.appendChild(emptyHint);
   }
   for (var bi = 0; bi < bookmarkedItems.length; bi++) {
-    favoritesContainer.appendChild(renderSessionItem(bookmarkedItems[bi].data));
+    if (bookmarkedItems[bi].type === "driver-hierarchy") favoritesContainer.appendChild(renderDesktopDriverHierarchy(bookmarkedItems[bi].root, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
+    else favoritesContainer.appendChild(renderSessionItem(bookmarkedItems[bi].data));
   }
 
   var divider = document.createElement("div");
@@ -1508,6 +1567,10 @@ export function renderSessionList(sessions) {
       }
     } else if (item.type === "split-group") {
       regularContainer.appendChild(renderSplitGroupItem(item.group, item.members));
+    } else if (item.type === "driver-hierarchy") {
+      regularContainer.appendChild(renderDesktopDriverHierarchy(item.root, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
+    } else if (item.type === "orphan-workers") {
+      regularContainer.appendChild(renderDesktopOrphanHierarchy(item.workers, renderSessionItem, function () { renderSessionList(null); }, searchMatchIds));
     } else {
       regularContainer.appendChild(renderSessionItem(item.data));
     }
@@ -1516,6 +1579,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/sidebar.js

@@ -1,4 +1,4 @@
-import { closeArchive } from './sticky-notes.js';
+import { closeNotesBrowser } from './sticky-notes-browser.js';
 import { closeScheduler } from './scheduler.js';
 import { initSidebarSessions } from './sidebar-sessions.js';
 import { focusFileTree } from './filebrowser.js';
@@ -23,7 +23,7 @@ export function syncResizeHandles() {
 }
 
 export function dismissOverlayPanels() {
-  closeArchive();
+  closeNotesBrowser();
   closeScheduler();
 }
 
@@ -119,7 +119,10 @@ export function initSidebar(_ctx) {
 
   // --- Panel switch (sessions / files / projects) ---
   var fileBrowserBtn = ctx.$("file-browser-btn");
-  var gitBtn = ctx.$("git-sidebar-btn");
+  // Git has no tool-palette tile. The repository placard's More control is
+  // the entry point into the same panel, with the same lifecycle.
+  var gitPlacard = ctx.$("git-placard");
+  var gitPlacardMore = ctx.$("git-placard-more");
   var projectsPanel = ctx.$("sidebar-panel-projects");
   var sessionsPanel = ctx.$("sidebar-panel-sessions");
   var filesPanel = ctx.$("sidebar-panel-files");
@@ -216,14 +219,23 @@ export function initSidebar(_ctx) {
       });
     });
   }
-  if (gitBtn) {
-    gitBtn.addEventListener("click", function () {
+  if (gitPlacardMore) {
+    gitPlacardMore.addEventListener("click", function () {
       if (gitPanel && !gitPanel.classList.contains("hidden")) {
         hideGitPanel(function () { showSessionsPanel(); });
       }
       else showGitPanel();
     });
   }
+  if (gitPlacard && gitPlacardMore) {
+    // Clicking the block itself is a pointer convenience only; it forwards to
+    // the More control so every listener bound there runs exactly once, and
+    // the keyboard path stays the single focusable button.
+    gitPlacard.addEventListener("click", function (event) {
+      if (event.target.closest("#git-placard-more")) return;
+      gitPlacardMore.click();
+    });
+  }
   if (gitPanelClose) {
     gitPanelClose.addEventListener("click", function () {
       hideGitPanel(function () { showSessionsPanel(); });

package/lib/public/modules/split-group-helpers.js

@@ -16,3 +16,11 @@ export function findSplitGroup(groups, memberIds) {
   }
   return null;
 }
+
+export function isConfiguredWorker(groups, sessionId) {
+  var list = groups || [];
+  for (var i = 0; i < list.length; i++) {
+    if (list[i].pair && list[i].pair.workerId === sessionId) return true;
+  }
+  return false;
+}

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

@@ -7,7 +7,7 @@ import { iconHtml, refreshIcons } from './icons.js';
 import { detachTuiView } from './session-tui-view.js';
 import { formatTokens } from './app-panels.js';
 import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
-import { groupedSessionIds, findSplitGroup } from './split-group-helpers.js';
+import { groupedSessionIds, findSplitGroup, isConfiguredWorker } from './split-group-helpers.js';
 import { showConfirm } from './app-misc.js';
 import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
@@ -159,7 +159,10 @@ export function syncPaneTitles() {
 function updatePaneFullAccessButton(button, session) {
   if (!button) return;
   var mode = session && (session.runtimeMode || session.mode || "gui");
-  var visible = !!session && !store.get('skipPermsEnabled') && mode === "gui";
+  var worker = !!session && isConfiguredWorker(store.get('splitGroups'), session.id);
+  // Permission policy belongs to the Driver. A configured Worker inherits it
+  // server-side and must not present a second, misleading control.
+  var visible = !!session && !worker && !store.get('skipPermsEnabled') && mode === "gui";
   var enabled = visible && session.permissionMode === "bypassPermissions";
   button.classList.toggle("hidden", !visible);
   button.classList.toggle("active", enabled);

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

@@ -58,6 +58,11 @@ function nodeToMarkdown(node) {
       return "\n" + inner;
     case "P": return "\n" + inner;
     case "A": return node.getAttribute("href") || inner;
+    case "BUTTON":
+      if (node.classList.contains("clayos-log-link") && node.dataset && node.dataset.logRef) {
+        return "`" + node.dataset.logRef + "`";
+      }
+      return inner;
     case "SPAN":
       if (node.classList.contains("sn-check")) {
         return node.classList.contains("checked") ? "- [x]" : "- [ ]";

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

@@ -0,0 +1,326 @@
+// Sticky Notes browser: the bounded right workbench window over the board.
+//
+// This is the index/viewer surface, not the floating cards. The cards stay on
+// the canvas over the conversation; this pane lists them, splits them into Open
+// and Closed, and is where a note is completed or brought back.
+//
+// Completion here is Close, never delete. A closed note leaves the active
+// canvas and moves to the Closed tab, where it stays readable and reversible.
+// There is deliberately no destructive control on this surface at all.
+
+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 { listNoteData, focusNoteOnCanvas, hideNotes, showNotes } from './sticky-notes.js';
+
+var panel = null;
+var gridEl = null;
+var tabsEl = null;
+
+// Registered by app.js so this module never imports the other right-pane tools
+// and cannot form an import cycle with them.
+var exclusiveClosers = [];
+
+export function registerExclusiveClosers(fns) {
+  exclusiveClosers = (fns || []).filter(function (fn) { return typeof fn === "function"; });
+}
+
+function closeOtherRightTools() {
+  for (var i = 0; i < exclusiveClosers.length; i++) {
+    try { exclusiveClosers[i](); } catch (e) { /* a missing tool must not block opening */ }
+  }
+}
+
+function isClosed(data) {
+  if (!data) return false;
+  if (data.state === "closed") return true;
+  if (data.state === "open") return false;
+  // Legacy notes predate the state field; `hidden` was the old spelling.
+  return data.hidden === true;
+}
+
+export function openNotes(all) {
+  return (all || []).filter(function (data) { return !isClosed(data); });
+}
+
+export function closedNotes(all) {
+  return (all || []).filter(isClosed);
+}
+
+function currentTab() {
+  return store.get('notesBrowserTab') === "closed" ? "closed" : "open";
+}
+
+// --- Panel ---------------------------------------------------------------
+
+function ensurePanel() {
+  if (panel) return;
+  var panels = document.getElementById("main-panels");
+  if (!panels) return;
+  panel = document.createElement("section");
+  panel.id = "notes-browser";
+  panel.className = "notes-browser hidden";
+  panel.setAttribute("aria-label", "Sticky Notes");
+  panel.innerHTML =
+    '<header class="notes-browser-topbar">' +
+      '<span class="notes-browser-title">' + iconHtml("sticky-note") + 'Sticky Notes</span>' +
+      '<span class="notes-browser-subtitle">Open items on the board, and what has been closed</span>' +
+      '<div class="notes-browser-window-actions" aria-label="Sticky Notes window controls">' +
+        '<button id="notes-browser-wide" class="notes-browser-icon-btn" type="button" title="Widen panel" aria-label="Widen Sticky Notes panel" aria-pressed="false">' + iconHtml("chevrons-left-right") + '</button>' +
+        '<button id="notes-browser-fullscreen" class="notes-browser-icon-btn" type="button" title="Toggle fullscreen" aria-label="Toggle Sticky Notes fullscreen" aria-pressed="false">' + iconHtml("maximize-2") + '</button>' +
+        '<button id="notes-browser-close" class="notes-browser-icon-btn" type="button" title="Close Sticky Notes" aria-label="Close Sticky Notes">' + iconHtml("x") + '</button>' +
+      '</div>' +
+    '</header>' +
+    '<div id="notes-browser-tabs" class="notes-browser-tabs" role="tablist" aria-label="Sticky Notes state"></div>' +
+    '<div id="notes-browser-grid" class="notes-browser-grid" role="list"></div>';
+  panels.appendChild(panel);
+
+  gridEl = panel.querySelector("#notes-browser-grid");
+  tabsEl = panel.querySelector("#notes-browser-tabs");
+
+  panel.querySelector("#notes-browser-close").addEventListener("click", closeNotesBrowser);
+  panel.querySelector("#notes-browser-wide").addEventListener("click", function () {
+    applyWindowState(!store.get('notesBrowserWide'), store.get('notesBrowserFullscreen'));
+  });
+  panel.querySelector("#notes-browser-fullscreen").addEventListener("click", function () {
+    applyWindowState(store.get('notesBrowserWide'), !store.get('notesBrowserFullscreen'));
+  });
+  refreshIcons();
+}
+
+// Width and fullscreen are transient view state, so they live in the store.
+// `panel-fullscreen` is the shared class the document viewer, terminal, and
+// Logs already use, so the geometry is the established one.
+function applyWindowState(wide, fullscreen) {
+  store.set({ notesBrowserWide: !!wide, notesBrowserFullscreen: !!fullscreen });
+  if (!panel) return;
+  panel.classList.toggle("notes-browser-wide", !!wide && !fullscreen);
+  panel.classList.toggle("panel-fullscreen", !!fullscreen);
+  var wideBtn = panel.querySelector("#notes-browser-wide");
+  var fullBtn = panel.querySelector("#notes-browser-fullscreen");
+  if (wideBtn) {
+    wideBtn.setAttribute("aria-pressed", wide ? "true" : "false");
+    wideBtn.disabled = !!fullscreen;
+  }
+  if (fullBtn) fullBtn.setAttribute("aria-pressed", fullscreen ? "true" : "false");
+}
+
+// --- Tabs ----------------------------------------------------------------
+
+function renderTabs(openCount, closedCount) {
+  if (!tabsEl) return;
+  var active = currentTab();
+  tabsEl.innerHTML = "";
+  var specs = [
+    { key: "open", label: "Open", count: openCount },
+    { key: "closed", label: "Closed", count: closedCount },
+  ];
+  for (var i = 0; i < specs.length; i++) {
+    (function (spec) {
+      var tab = document.createElement("button");
+      tab.type = "button";
+      tab.className = "notes-browser-tab" + (spec.key === active ? " active" : "");
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", spec.key === active ? "true" : "false");
+      tab.tabIndex = spec.key === active ? 0 : -1;
+      tab.dataset.tab = spec.key;
+      tab.innerHTML = '<span>' + spec.label + '</span><span class="notes-browser-tab-count">' + spec.count + '</span>';
+      tab.addEventListener("click", function () { selectTab(spec.key); });
+      tab.addEventListener("keydown", function (e) {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+        e.preventDefault();
+        selectTab(spec.key === "open" ? "closed" : "open");
+        var next = tabsEl.querySelector('.notes-browser-tab.active');
+        if (next) next.focus();
+      });
+      tabsEl.appendChild(tab);
+    })(specs[i]);
+  }
+}
+
+function selectTab(key) {
+  store.set({ notesBrowserTab: key === "closed" ? "closed" : "open" });
+  renderNotesBrowser();
+}
+
+// --- Cards ---------------------------------------------------------------
+
+function closedMeta(data) {
+  var parts = [];
+  if (data.closedAt) {
+    var when = new Date(data.closedAt);
+    if (!isNaN(when.getTime())) parts.push("Closed " + when.toLocaleDateString());
+  } else {
+    parts.push("Closed");
+  }
+  var by = data.closedBy;
+  if (by && by.type === "user" && by.displayName) parts.push("by " + by.displayName);
+  else if (by && by.type === "session") parts.push("by an agent session");
+  return parts.join(" · ");
+}
+
+function buildCard(data) {
+  var card = document.createElement("article");
+  var closed = isClosed(data);
+  card.className = "notes-browser-card" + (closed ? " closed" : "");
+  card.setAttribute("role", "listitem");
+  card.dataset.color = data.color || "purple";
+  card.dataset.noteId = data.id;
+
+  var header = document.createElement("div");
+  header.className = "notes-browser-card-header";
+
+  var title = document.createElement("h3");
+  title.className = "notes-browser-card-title";
+  title.textContent = getTitle(data.text) || "Untitled";
+  header.appendChild(title);
+
+  // Exactly one lifecycle action per card, and it is never destructive.
+  var action = document.createElement("button");
+  action.type = "button";
+  action.className = "notes-browser-card-action";
+  if (closed) {
+    action.innerHTML = iconHtml("rotate-ccw") + "<span>Reopen</span>";
+    action.title = "Reopen this note and return it to the board";
+    action.setAttribute("aria-label", "Reopen note: " + title.textContent);
+    action.addEventListener("click", function (e) {
+      e.stopPropagation();
+      send({ type: "note_reopen", id: data.id });
+    });
+  } else {
+    action.innerHTML = iconHtml("check") + "<span>Close</span>";
+    action.title = "Close this note; it stays on record and can be reopened";
+    action.setAttribute("aria-label", "Close note: " + title.textContent);
+    action.addEventListener("click", function (e) {
+      e.stopPropagation();
+      send({ type: "note_close", id: data.id });
+    });
+  }
+  header.appendChild(action);
+  card.appendChild(header);
+
+  var body = document.createElement("div");
+  body.className = "notes-browser-card-body";
+  var bodyLines = (data.text || "").split("\n").slice(1).join("\n").trim();
+  if (bodyLines) {
+    body.innerHTML = renderMiniMarkdown("_\n" + bodyLines).replace('<div class="sn-title">_</div>', "");
+    enhanceClayLogLinks(body);
+  }
+  card.appendChild(body);
+
+  if (closed) {
+    var meta = document.createElement("p");
+    meta.className = "notes-browser-card-meta";
+    meta.textContent = closedMeta(data);
+    card.appendChild(meta);
+  }
+
+  var strip = document.createElement("div");
+  strip.className = "notes-browser-card-color";
+  card.appendChild(strip);
+
+  // An open note can be jumped to on the canvas. A closed note has no card on
+  // the canvas, so reopening is the only way back and the body is read-only.
+  if (!closed) {
+    card.tabIndex = 0;
+    card.addEventListener("click", function () { focusNoteOnCanvas(data.id); });
+    card.addEventListener("keydown", function (e) {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      focusNoteOnCanvas(data.id);
+    });
+  }
+  return card;
+}
+
+function emptyState(tab) {
+  var empty = document.createElement("div");
+  empty.className = "notes-browser-empty";
+  if (tab === "closed") {
+    empty.innerHTML = iconHtml("check") +
+      "<p>Nothing closed yet</p>" +
+      "<p class=\"notes-browser-empty-sub\">Closing a note takes it off the board without deleting it. Anything you close shows up here and can be reopened.</p>";
+  } else {
+    empty.innerHTML = iconHtml("sticky-note") +
+      "<p>Keep what matters across sessions</p>" +
+      "<p class=\"notes-browser-empty-sub\">Use sticky notes for checklists, goals, handoffs, and durable project knowledge. You and every Clay agent can find them in future sessions.</p>";
+  }
+  return empty;
+}
+
+export function renderNotesBrowser() {
+  if (!gridEl) return;
+  var all = listNoteData();
+  var open = openNotes(all);
+  var closed = closedNotes(all);
+  renderTabs(open.length, closed.length);
+
+  var tab = currentTab();
+  var shown = tab === "closed" ? closed : open;
+  // Newest first. The id is timestamp-prefixed, so it orders by creation.
+  shown = shown.slice().sort(function (a, b) {
+    var left = String(a.id || "");
+    var right = String(b.id || "");
+    return left < right ? 1 : left > right ? -1 : 0;
+  });
+
+  gridEl.innerHTML = "";
+  if (shown.length === 0) {
+    gridEl.appendChild(emptyState(tab));
+    refreshIcons();
+    return;
+  }
+  for (var i = 0; i < shown.length; i++) gridEl.appendChild(buildCard(shown[i]));
+  refreshIcons();
+}
+
+// --- Lifecycle -----------------------------------------------------------
+
+// The conversation, composer, and title bar stay mounted and visible: the
+// browser opens beside them in the single right workbench slot.
+export function openNotesBrowser() {
+  ensurePanel();
+  if (!panel) return;
+  closeOtherRightTools();
+  // The floating canvas would otherwise sit on top of the pane.
+  hideNotes();
+  panel.classList.remove("hidden");
+  applyWindowState(store.get('notesBrowserWide'), false);
+  store.set({ notesBrowserOpen: true });
+  var sidebarBtn = document.getElementById("sticky-notes-sidebar-btn");
+  if (sidebarBtn) sidebarBtn.classList.add("active");
+  renderNotesBrowser();
+}
+
+export function closeNotesBrowser() {
+  if (!store.get('notesBrowserOpen')) return;
+  if (panel) panel.classList.add("hidden");
+  // Fullscreen is always dropped on close so the next open is a bounded pane.
+  applyWindowState(store.get('notesBrowserWide'), false);
+  store.set({ notesBrowserOpen: false });
+  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();
+}
+
+export function isNotesBrowserOpen() {
+  return !!store.get('notesBrowserOpen');
+}
+
+export function initNotesBrowser() {
+  document.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    if (!store.get('notesBrowserOpen')) return;
+    closeNotesBrowser();
+  });
+  store.subscribe(function (state, previous) {
+    if (state.currentSlug === previous.currentSlug) return;
+    // A different project starts from a closed, bounded, Open-tab pane.
+    closeNotesBrowser();
+    applyWindowState(false, false);
+    store.set({ notesBrowserTab: "open" });
+  });
+}