clay-server 2.32.0 → 2.32.1-beta.2

package/lib/public/css/notifications-center.css

@@ -41,6 +41,38 @@
   width: 340px;
 }
 
+/* "Clear all" pill — appears at the top of the stack when 2+ banners
+   are showing. Small, muted, aligned to the right so it sits above the
+   banners' corner without stealing attention. */
+.notif-banner-clear-all {
+  pointer-events: auto;
+  align-self: flex-end;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  background: color-mix(in srgb, var(--bg-alt, #1a1a2e) 75%, transparent);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--border, #333);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(var(--shadow-rgb, 0,0,0), 0.2);
+  transition: color 0.15s, background 0.15s;
+}
+.notif-banner-clear-all:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--bg-alt, #1a1a2e) 90%, transparent);
+}
+.notif-banner-clear-all .lucide {
+  width: 12px;
+  height: 12px;
+}
+
 /* Individual banner (frosted glass) */
 .notif-banner {
   display: flex;

package/lib/public/css/overlays.css

@@ -98,30 +98,13 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 .top-bar-install-btn.hidden { display: none; }
 .pwa-standalone .top-bar-install-btn { display: none !important; }
 
-/* Share button — desktop only, same style as install pill */
-.top-bar-share-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  color: var(--accent);
-  border: none;
-  border-radius: 10px;
-  padding: 2px 10px;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-  line-height: 1;
-  transition: background 0.15s;
-}
-.top-bar-share-btn .lucide { width: 12px; height: 12px; }
-.top-bar-share-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
+/* Share button sits in .top-bar-actions with the bell/settings icons
+   and inherits their shared icon-button styling. Hide on mobile and
+   inside PWA standalone (matches previous pill behavior). */
 @media (max-width: 768px) {
-  .top-bar-share-btn { display: none; }
+  #share-pill { display: none; }
 }
-.pwa-standalone .top-bar-share-btn { display: none !important; }
+.pwa-standalone #share-pill { display: none !important; }
 
 /* Extension pill button — same style as share/install pills */
 .ext-pill-wrap {

package/lib/public/css/sidebar.css

@@ -18,6 +18,21 @@
   overflow: hidden;
 }
 
+/* Sidebar items aren't meant to be text-selected — the sidebar is for
+   navigation and drag-reorder. Disabling selection avoids accidental
+   highlights during clicks and drags. Inputs and contenteditables
+   inside the sidebar re-enable selection so users can still edit. */
+#sidebar-column {
+  -webkit-user-select: none;
+  user-select: none;
+}
+#sidebar-column input,
+#sidebar-column textarea,
+#sidebar-column [contenteditable="true"] {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
 #layout.sidebar-collapsed #sidebar-column {
   width: 0 !important;
   min-width: 0 !important;
@@ -273,52 +288,298 @@
   border-bottom: 1px solid var(--border-subtle);
   padding-bottom: 4px;
 }
-#sidebar-tools-toggle {
+
+/* Section header: "Tools" label on the left, a dim keyboard-hint next
+   to it explaining the Cmd+O shortcut, and a small pencil icon edit
+   button right-aligned. Three elements but each does just one thing,
+   so nothing reads as pushy. */
+.sidebar-tools-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin: 0;
-  padding: 8px 8px 4px 0;
-  box-sizing: border-box;
+  gap: 8px;
+  padding: 4px 8px 2px 12px;
+}
+.sidebar-tools-header .sidebar-section-label {
+  padding: 0;
+}
+
+/* Small shortcut-pill for the Cmd/Ctrl+O hotkey overlay. Mirrors the
+   icon-strip hotkey hints so keyboard shortcuts look the same across
+   the sidebar surface. */
+.sidebar-tools-hint {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 2px 4px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-alt);
+  color: var(--text-dimmer);
+  font-size: 10px;
+  font-weight: 600;
+  font-family: inherit;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+.sidebar-tools-hint:hover {
+  opacity: 1;
+  color: var(--text-muted);
+  background: var(--bg);
+}
+
+/* Pencil-icon edit button, far-right of the header. Dim by default so
+   it doesn't pull attention; on hover it brightens to signal that
+   it's a real affordance. */
+.tool-palette-edit-btn {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 11px;
+  color: var(--text-dimmer);
+  opacity: 0.45;
+  border-radius: 6px;
+  transition: background 0.15s, color 0.15s, opacity 0.15s;
+}
+.tool-palette-edit-btn .lucide,
+.tool-palette-edit-btn svg {
+  width: 13px;
+  height: 13px;
+}
+.tool-palette-edit-btn:hover {
+  background: var(--sidebar-hover);
+  color: var(--text-muted);
+  opacity: 1;
+}
+.tool-palette-edit-btn.active {
+  background: var(--accent);
+  color: #fff;
+  opacity: 1;
+}
+.tool-palette-edit-btn.active:hover {
+  background: var(--accent);
+  color: #fff;
+  opacity: 1;
+  filter: brightness(1.1);
+}
+
+/* Hidden-tools section appears only in edit mode when items are hidden. */
+.tool-palette-hidden-section {
+  padding: 4px 8px 8px;
+  border-top: 1px dashed var(--border-subtle);
+  margin-top: 4px;
+}
+.tool-palette-hidden-section.hidden {
+  display: none;
+}
+.tool-palette-hidden-label {
+  font-size: 10px;
   font-weight: 600;
   color: var(--text-dimmer);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: inherit;
+  padding: 2px 4px 6px;
 }
-#sidebar-tools-toggle:hover {
-  color: var(--text-muted);
+.tool-palette-hidden-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
 }
-.sidebar-tools-chevron {
-  width: 14px;
-  height: 14px;
-  transition: transform 0.15s;
+
+/* --- Shared tile style (applies in both active and hidden grids) --- */
+.palette-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 58px;
+  padding: 6px 2px;
+  border-radius: 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
 }
-#sidebar-tools #session-actions {
-  max-height: 300px;
+.palette-tile .lucide { width: 16px; height: 16px; flex-shrink: 0; }
+.palette-tile:hover { background: var(--sidebar-hover); color: var(--text-secondary); }
+.palette-tile.active { background: var(--sidebar-hover); color: var(--text); }
+.palette-tile .tool-btn-label {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.15;
+  text-align: center;
+  max-width: 100%;
   overflow: hidden;
-  transition: max-height 0.2s ease, opacity 0.2s ease;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}
+
+/* --- Edit mode affordances (shared across session + mate palettes) --- */
+
+/* × remove badge on each tile. Hidden in normal mode; shown in edit. */
+.tool-palette-remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+  transition: opacity 0.15s, transform 0.15s;
+  z-index: 2;
+  user-select: none;
+}
+.edit-mode .tool-palette-remove {
   opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
 }
-#sidebar-tools.collapsed .sidebar-tools-chevron {
-  transform: rotate(-90deg);
+.edit-mode .tool-palette-remove:hover {
+  filter: brightness(1.15);
 }
-#sidebar-tools.collapsed #session-actions {
-  max-height: 0;
-  opacity: 0;
-  padding-bottom: 0;
+
+/* Drag-reorder feedback. Tiles are draggable at all times (macOS dock
+   pattern) so users can rearrange without entering a separate mode.
+   -webkit-user-drag is explicit for Safari, which otherwise sometimes
+   ignores draggable when user-select is none on an ancestor. Edit mode
+   adds the outline so the tiles read as mutable during an edit. */
+#session-actions [data-tool-id],
+#mate-sidebar-tools [data-tool-id] {
+  -webkit-user-drag: element;
+}
+.edit-mode [data-tool-id] {
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+  animation: tile-wiggle 0.22s ease-in-out infinite;
+  transform-origin: 50% 50%;
+}
+/* Desync the wiggle across tiles so they don't swing in lockstep. */
+.edit-mode [data-tool-id]:nth-child(2n) {
+  animation-delay: -0.11s;
+}
+.edit-mode [data-tool-id]:nth-child(3n) {
+  animation-duration: 0.26s;
 }
-.sidebar-tools-divider {
-  height: 1px;
-  background: var(--border-subtle);
-  margin: 4px 12px;
+@keyframes tile-wiggle {
+  0%   { transform: rotate(-1.2deg); }
+  50%  { transform: rotate(1.2deg);  }
+  100% { transform: rotate(-1.2deg); }
+}
+/* The dragged tile shouldn't wiggle while under the cursor. */
+[data-tool-id].dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+  animation: none;
+}
+/* Children shouldn't swallow drag events — the browser starts drag on
+   the element under the pointer, and we want that to always be the
+   draggable button, not the inner icon/label/badge. The × affordance
+   stays interactive (it needs clicks in edit mode). */
+[data-tool-id] > i,
+[data-tool-id] > svg,
+[data-tool-id] > .tool-btn-label,
+[data-tool-id] > .sidebar-badge {
+  pointer-events: none;
 }
 
+/* Hidden-section tiles are dimmed to signal "not active" and get a small
+   + glyph on hover to suggest they can be restored. */
+.tool-palette-hidden-grid [data-tool-id] {
+  opacity: 0.55;
+  cursor: pointer;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+.tool-palette-hidden-grid [data-tool-id]:hover {
+  opacity: 1;
+}
+.tool-palette-hidden-grid .tool-palette-remove {
+  display: none;
+}
+.tool-palette-hidden-grid .sidebar-badge {
+  display: none;
+}
+
+/* Hotkey badge shown on each active palette tile while Cmd/Ctrl+O pick
+   mode is active. Top-left so it doesn't collide with the × (top-right)
+   or count badges. High-contrast accent so the keystroke is obvious. */
+.tool-palette-hotkey-badge {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+  z-index: 3;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  animation: tool-palette-hotkey-in 0.12s ease-out;
+}
+@keyframes tool-palette-hotkey-in {
+  from { opacity: 0; transform: scale(0.7); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+/* Right-click context menu on palette tiles. Mirrors .session-ctx-menu. */
+.tool-palette-ctx-menu {
+  position: fixed;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px 0;
+  min-width: 180px;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+  z-index: 9999;
+  font-family: inherit;
+}
+.tool-palette-ctx-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+}
+.tool-palette-ctx-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
 /* --- Sessions header (pinned above scroll) --- */
 #sidebar-sessions-header {
   flex-shrink: 0;

package/lib/public/index.html

@@ -70,7 +70,6 @@
           </div>
         </div>
       </div>
-      <button id="share-pill" class="top-bar-share-btn" title="Share"><i data-lucide="qr-code"></i> Share</button>
       <div id="update-pill-wrap" class="top-bar-update hidden">
         <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
       <div id="update-popover" class="top-bar-popover">
@@ -84,6 +83,7 @@
       <!-- Pill badges -->
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
       <div id="client-count" class="top-bar-pill pill-accent hidden"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
+      <button id="share-pill" title="Share"><i data-lucide="share-2"></i></button>
       <button id="notif-center-btn" title="Notifications"><i data-lucide="bell"></i><span id="notif-center-badge" class="notif-badge hidden">0</span></button>
       <button id="server-settings-btn" title="Server settings"><i data-lucide="settings"></i></button>
     </div>
@@ -99,12 +99,16 @@
       <img class="icon-strip-logo" src="icon-banded-76.png" width="38" height="38" alt="Clay">
     </div>
     <div class="icon-strip-separator"></div>
+    <button type="button" class="icon-strip-hint" id="icon-strip-hint-project" data-switcher-mode="project" aria-label="Switch project"></button>
     <div class="icon-strip-projects" id="icon-strip-projects">
       <div class="skeleton-icon-strip-item"></div>
       <div class="skeleton-icon-strip-item"></div>
     </div>
     <button class="icon-strip-add" id="icon-strip-add" title="Add project"><i data-lucide="plus"></i></button>
-    <div class="icon-strip-users hidden" id="icon-strip-users"></div>
+    <div class="icon-strip-mate-section" id="icon-strip-mate-section">
+      <button type="button" class="icon-strip-hint hidden" id="icon-strip-hint-mate" data-switcher-mode="mate" aria-label="Switch mate"></button>
+      <div class="icon-strip-users hidden" id="icon-strip-users"></div>
+    </div>
     <div class="icon-strip-me" id="icon-strip-me"></div>
   </div>
 
@@ -183,21 +187,13 @@
       </div>
       <div id="sidebar">
         <div id="sidebar-tools">
-          <button id="sidebar-tools-toggle" type="button">
+          <div class="sidebar-tools-header">
             <span class="sidebar-section-label">Tools</span>
-            <i data-lucide="chevron-down" class="sidebar-tools-chevron"></i>
-          </button>
-          <div id="session-actions">
-            <button id="file-browser-btn"><i data-lucide="folder-tree"></i> <span>File browser</span></button>
-            <button id="terminal-sidebar-btn"><i data-lucide="square-terminal"></i> <span>Terminal</span><span id="terminal-sidebar-count" class="sidebar-badge hidden"></span></button>
-            <button id="sticky-notes-sidebar-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span><span id="sticky-notes-sidebar-count" class="sidebar-badge hidden"></span></button>
-            <div class="sidebar-tools-divider"></div>
-            <button id="email-sidebar-btn"><i data-lucide="mail"></i> <span>Email</span></button>
-            <button id="mcp-btn"><i data-lucide="cable"></i> <span>MCP Servers</span><span id="mcp-sidebar-count" class="sidebar-badge hidden"></span></button>
-            <button id="skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
-            <div class="sidebar-tools-divider"></div>
-            <button id="scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
+            <span class="sidebar-tools-hint" data-palette="session" title="Show keyboard hotkeys"></span>
+            <button type="button" class="tool-palette-edit-btn" data-palette="session" aria-label="Edit tool palette" title="Edit palette"><i data-lucide="pencil"></i></button>
           </div>
+          <div id="session-actions"></div>
+          <div id="session-actions-hidden" class="tool-palette-hidden-section hidden"></div>
         </div>
         <div id="sidebar-sessions-header">
           <div id="sessions-header-content">
@@ -242,6 +238,11 @@
             <input id="fb-search-input" type="text" placeholder="Search files..." autocomplete="off" spellcheck="false" />
           </div>
           <div id="file-tree"></div>
+          <div class="fb-kb-hint">
+            <kbd>&#8593;&#8595;</kbd><span>nav</span>
+            <kbd>&#8592;&#8594;</kbd><span>fold</span>
+            <kbd>&#8629;</kbd><span>open</span>
+          </div>
         </div>
       </div>
     </div>
@@ -257,14 +258,14 @@
         <div id="mate-sidebar-seed-tooltip" class="mate-seed-tooltip hidden"></div>
         <button id="mate-sidebar-toggle-btn" class="sidebar-collapse-btn" title="Collapse sidebar"><i data-lucide="panel-left-close"></i></button>
       </div>
-      <div id="mate-sidebar-tools">
-        <button id="mate-memory-btn"><i data-lucide="brain"></i> <span>Memory</span><span id="mate-memory-count" class="sidebar-badge hidden"></span></button>
-        <button id="mate-knowledge-btn"><i data-lucide="book-open"></i> <span>Knowledge</span><span id="mate-knowledge-count" class="sidebar-badge hidden"></span></button>
-        <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>
-        <button id="mate-email-btn"><i data-lucide="mail"></i> <span>Email</span></button>
-        <button id="mate-mcp-btn"><i data-lucide="cable"></i> <span>MCP Servers</span><span id="mate-mcp-sidebar-count" class="sidebar-badge hidden"></span></button>
-        <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
-        <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
+      <div id="mate-sidebar-tools-wrap">
+        <div class="sidebar-tools-header">
+          <span class="sidebar-section-label">Tools</span>
+          <span class="sidebar-tools-hint" data-palette="mate" title="Show keyboard hotkeys"></span>
+          <button type="button" class="tool-palette-edit-btn" data-palette="mate" aria-label="Edit tool palette" title="Edit palette"><i data-lucide="pencil"></i></button>
+        </div>
+        <div id="mate-sidebar-tools"></div>
+        <div id="mate-sidebar-tools-hidden" class="tool-palette-hidden-section hidden"></div>
       </div>
       <div id="mate-sidebar-conversations">
         <div class="mate-sidebar-sessions-header">

package/lib/public/modules/app-notifications.js

@@ -126,6 +126,7 @@ function showBanner(notif, autoDismissMs) {
 
   bannerContainer.appendChild(banner);
   refreshIcons();
+  ensureClearAllButton();
 
   requestAnimationFrame(function () {
     banner.classList.add("show");
@@ -204,11 +205,62 @@ function removeBanner(banner) {
   if (!banner || !banner.parentNode) return;
   banner.classList.remove("show");
   banner.classList.add("hide");
+  // Update the clear-all button right away so it disappears before the
+  // last banner finishes animating out, and again after the node is
+  // actually removed in case the count check depends on DOM presence.
+  ensureClearAllButton();
   setTimeout(function () {
     if (banner.parentNode) banner.parentNode.removeChild(banner);
+    ensureClearAllButton();
   }, 300);
 }
 
+// Count real (non-"_empty", not in hide animation) banners to decide
+// whether a Clear-all affordance is worth showing.
+function countActiveBanners() {
+  if (!bannerContainer) return 0;
+  var banners = bannerContainer.querySelectorAll('.notif-banner');
+  var n = 0;
+  for (var i = 0; i < banners.length; i++) {
+    if (banners[i].classList.contains('hide')) continue;
+    if (banners[i].getAttribute('data-notif-id')) n++;
+  }
+  return n;
+}
+
+function ensureClearAllButton() {
+  if (!bannerContainer) return;
+  var existing = bannerContainer.querySelector('.notif-banner-clear-all');
+  if (countActiveBanners() >= 2) {
+    if (existing) return;
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'notif-banner-clear-all';
+    btn.innerHTML = iconHtml('x') + '<span>Clear all</span>';
+    btn.addEventListener('click', clearAllBanners);
+    bannerContainer.insertBefore(btn, bannerContainer.firstChild);
+    refreshIcons();
+  } else if (existing && existing.parentNode) {
+    existing.parentNode.removeChild(existing);
+  }
+}
+
+function clearAllBanners() {
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: 'notification_dismiss_all' }));
+  }
+  // Dismiss visually right away — the server will broadcast
+  // notification_dismissed_all too, but doing it optimistically makes
+  // the click feel instant.
+  if (bannerContainer) {
+    var banners = bannerContainer.querySelectorAll('.notif-banner[data-notif-id]');
+    for (var i = 0; i < banners.length; i++) removeBanner(banners[i]);
+  }
+  var btn = bannerContainer && bannerContainer.querySelector('.notif-banner-clear-all');
+  if (btn && btn.parentNode) btn.parentNode.removeChild(btn);
+}
+
 function sendPermissionResponse(requestId, decision, slug) {
   var ws = getWs();
   if (ws && ws.readyState === 1) {

package/lib/public/modules/app-rendering.js

@@ -496,7 +496,7 @@ export function addAuthRequiredMessage(msg) {
   div.className = "auth-required-msg";
 
   var vendor = msg.vendor || "claude";
-  var loginCmd = msg.loginCommand || (vendor === "codex" ? "codex --login" : "claude login");
+  var loginCmd = msg.loginCommand || (vendor === "codex" ? "codex login" : "claude login");
   var vendorName = msg.text || "Claude Code is not logged in.";
 
   var header = document.createElement("div");