clay-server 2.32.1-beta.1 → 2.33.0-beta.1

package/lib/daemon.js

@@ -737,6 +737,24 @@ var relay = createServer({
     console.log("[daemon] Auto-continue on rate limit:", want, "(web)");
     return { ok: true, autoContinueOnRateLimit: want };
   },
+  onGetToolPalettes: function () {
+    return config.toolPalettes || {};
+  },
+  onSetToolPalette: function (paletteName, order, hidden) {
+    if (paletteName !== "session" && paletteName !== "mate") {
+      return { error: "Unknown palette" };
+    }
+    var safeOrder = Array.isArray(order)
+      ? order.filter(function (s) { return typeof s === "string"; })
+      : [];
+    var safeHidden = Array.isArray(hidden)
+      ? hidden.filter(function (s) { return typeof s === "string"; })
+      : [];
+    if (!config.toolPalettes) config.toolPalettes = {};
+    config.toolPalettes[paletteName] = { order: safeOrder, hidden: safeHidden };
+    saveConfig(config);
+    return { ok: true, palette: paletteName, order: safeOrder, hidden: safeHidden };
+  },
   onSetKeepAwake: function (value) {
     var want = !!value;
     config.keepAwake = want;

package/lib/project-email.js

@@ -405,12 +405,28 @@ function attachEmail(ctx) {
     }
   }
 
+  // Whether any email capability is available for the active user.
+  // Used to gate the clay-email MCP so its tools are hidden from the model
+  // when the user hasn't registered any accounts and the server SMTP isn't
+  // configured (see issue #325 — we don't expose tools the user can't use).
+  function hasEmailCapability() {
+    try {
+      var accounts = emailAccounts.listAccounts(getActiveUserId());
+      if (accounts && accounts.length > 0) return true;
+    } catch (e) { /* fall through to SMTP check */ }
+    try {
+      if (smtp.isSmtpConfigured()) return true;
+    } catch (e) { /* ignore */ }
+    return false;
+  }
+
   return {
     handleEmailMessage: handleEmailMessage,
     getEmailContext: getEmailContext,
     getCheckedEmailAccounts: getCheckedEmailAccounts,
     getEmailDefaults: getEmailDefaults,
     createMcpDeps: createMcpDeps,
+    hasEmailCapability: hasEmailCapability,
     destroy: destroy,
   };
 }

package/lib/project.js

@@ -540,6 +540,32 @@ function createProjectContext(opts) {
     return Object.keys(servers).length > 0 ? servers : undefined;
   })();
 
+  // Gate in-app MCP servers on the underlying capability actually being
+  // available. Without this, tools show up in every session's tool list
+  // even when the user can't use them, which wastes context and can cause
+  // the model to pick the wrong MCP when the user has another one
+  // configured (see issue #325).
+  //
+  //   clay-browser -> only when the Chrome extension is connected
+  //   clay-email   -> only when the user has an account or server SMTP
+  function getLocalMcpServers() {
+    if (!mcpServers) return undefined;
+    var extWs = browserState._extensionWs;
+    var extConnected = !!(extWs && extWs.readyState === 1);
+    var emailAvailable = !!(_email && typeof _email.hasEmailCapability === "function" && _email.hasEmailCapability());
+    var keys = Object.keys(mcpServers);
+    var filtered = {};
+    var hasAny = false;
+    for (var i = 0; i < keys.length; i++) {
+      var name = keys[i];
+      if (name === "clay-browser" && !extConnected) continue;
+      if (name === "clay-email" && !emailAvailable) continue;
+      filtered[name] = mcpServers[name];
+      hasAny = true;
+    }
+    return hasAny ? filtered : undefined;
+  }
+
   // --- SDK bridge ---
   var sdk = createSDKBridge({
     cwd: cwd,
@@ -553,7 +579,7 @@ function createProjectContext(opts) {
     mateDisplayName: opts.mateDisplayName || "",
     isMate: isMate,
     dangerouslySkipPermissions: dangerouslySkipPermissions,
-    mcpServers: mcpServers,
+    mcpServers: getLocalMcpServers,
     getRemoteMcpServers: function () { return _mcp.getMcpServers(); },
     clayPort: serverPort,
     clayTls: serverTls,
@@ -1125,11 +1151,14 @@ function createProjectContext(opts) {
           }
         }
 
-        // In-app MCP servers (debate, browser, email)
-        if (mcpServers) {
-          var inAppNames = Object.keys(mcpServers);
+        // In-app MCP servers (debate, browser, email).
+        // Use getLocalMcpServers() so clay-browser is hidden unless the
+        // Chrome extension is currently connected (see issue #325).
+        var localMcp = getLocalMcpServers();
+        if (localMcp) {
+          var inAppNames = Object.keys(localMcp);
           for (var i = 0; i < inAppNames.length; i++) {
-            extractServerTools(inAppNames[i], mcpServers[inAppNames[i]]);
+            extractServerTools(inAppNames[i], localMcp[inAppNames[i]]);
           }
         }
 
@@ -1147,9 +1176,10 @@ function createProjectContext(opts) {
         return Promise.resolve(tools);
       },
       callTool: function (serverName, toolName, args) {
-        // Try in-app servers first
-        if (mcpServers && mcpServers[serverName]) {
-          var server = mcpServers[serverName];
+        // Try in-app servers first (gated by extension connectivity for clay-browser).
+        var localMcp = getLocalMcpServers();
+        if (localMcp && localMcp[serverName]) {
+          var server = localMcp[serverName];
           if (server.instance && server.instance._registeredTools && server.instance._registeredTools[toolName]) {
             var handler = server.instance._registeredTools[toolName].handler;
             if (typeof handler === "function") {

package/lib/public/app.js

@@ -40,6 +40,8 @@ import { initPlaybook, openPlaybook, getPlaybooks, getPlaybookForTip, isComplete
 import { initSTT } from './modules/stt.js';
 import { initProfile, getProfileLang } from './modules/profile.js';
 import { initUserSettings } from './modules/user-settings.js';
+import { initToolPalettes } from './modules/tool-palette.js';
+import { initProjectSwitcher } from './modules/project-switcher.js';
 import { initAdmin, checkAdminAccess } from './modules/admin.js';
 import { initSessionSearch, toggleSearch, closeSearch, isSearchOpen, handleFindInSessionResults, onHistoryPrepended as onSessionSearchHistoryPrepended } from './modules/session-search.js';
 import { initTooltips, registerTooltip } from './modules/tooltip.js';
@@ -396,6 +398,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     get projectList() { return getCachedProjects() || []; },
     availableBuiltins: function () { return store.get('cachedAvailableBuiltins') || []; },
   };
+  // Render the customizable tool palettes BEFORE initSidebar so the
+  // buttons exist in the DOM when sidebar.js (and later terminal.js /
+  // mcp-ui.js / etc.) attach click handlers by ID.
+  initToolPalettes();
   initSidebar(sidebarCtx);
   var wsGetter = function () { return _getWsRef(); };
   initMateSidebar(wsGetter);
@@ -441,6 +447,11 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     },
   });
 
+  // Project switcher (Cmd/Ctrl+E). Init after command palette so its
+  // keydown listener registers later — capture-phase ordering doesn't
+  // matter here but it keeps related bootstrap steps adjacent.
+  initProjectSwitcher();
+
   // --- Connect overlay (animated ASCII logo) ---
   var asciiLogoCanvas = $("ascii-logo-canvas");
   initAsciiLogo(asciiLogoCanvas);

package/lib/public/css/command-palette.css

@@ -371,3 +371,189 @@
     display: none;
   }
 }
+
+/* --- Project switcher (Cmd/Ctrl+E) ---
+   macOS Cmd+Tab-style quick switcher: centered modal with a darker
+   backdrop than the command palette, projects laid out horizontally
+   as icon+label tiles that wrap to multiple rows when there are many.
+   Reuses .cmd-palette shell so positioning/animations stay consistent. */
+.project-switcher .cmd-palette-backdrop {
+  background: rgba(var(--shadow-rgb), 0.55);
+}
+.project-switcher-dialog {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-top: 1px solid var(--border);
+  border-radius: 16px;
+  width: min(820px, 85vw);
+  max-height: 80vh;
+  background: var(--bg-alt);
+  box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.5);
+  animation: projSwitcherIn 0.12s ease-out;
+}
+@keyframes projSwitcherIn {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+.project-switcher-header {
+  padding: 14px 20px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.project-switcher-dialog .cmd-palette-results {
+  padding: 12px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  overflow-y: auto;
+  max-height: calc(80vh - 110px);
+}
+.project-switcher-item {
+  flex: 0 0 auto;
+  width: 96px;
+  height: 104px;
+  padding: 10px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  text-align: center;
+}
+/* Icon-strip-style treatment: rounded bg-alt fill that turns accent
+   on hover/active, and a 4-direction drop-shadow + white glow on the
+   emoji img for readability on either background. */
+.project-switcher-item .cmd-palette-item-icon {
+  width: 44px;
+  height: 44px;
+  font-size: 28px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+.project-switcher-item .cmd-palette-item-icon .lucide {
+  width: 22px;
+  height: 22px;
+}
+.project-switcher-item .cmd-palette-item-icon img.emoji {
+  width: 26px;
+  height: 26px;
+  vertical-align: middle;
+  margin: 0;
+  filter:
+    drop-shadow(1px 0 0 rgba(0,0,0,0.25))
+    drop-shadow(-1px 0 0 rgba(0,0,0,0.25))
+    drop-shadow(0 1px 0 rgba(0,0,0,0.25))
+    drop-shadow(0 -1px 0 rgba(0,0,0,0.25))
+    drop-shadow(0 0 4px rgba(255,255,255,0.35));
+}
+.project-switcher-item:hover .cmd-palette-item-icon,
+.project-switcher-item.active .cmd-palette-item-icon {
+  background: var(--accent);
+  color: #fff;
+}
+.project-switcher-avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  object-fit: cover;
+}
+.project-switcher-item .cmd-palette-item-body {
+  width: 100%;
+  display: block;
+}
+.project-switcher-item .cmd-palette-item-title-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+}
+.project-switcher-item .cmd-palette-item-title {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--text-secondary);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.project-switcher-item:hover {
+  background: transparent;
+}
+.project-switcher-item.active {
+  border-color: var(--accent);
+  background: transparent;
+}
+.project-switcher-item.active .cmd-palette-item-title {
+  color: var(--text);
+}
+
+.project-switcher-current {
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Disabled tile (e.g. worktree with worktreeAccessible: false). Not a
+   valid switch target, so skip highlight, skip click, visually dim. */
+.project-switcher-item.disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.project-switcher-item.disabled:hover {
+  background: transparent;
+}
+.project-switcher-item.disabled.active {
+  border-color: transparent;
+  background: transparent;
+}
+.project-switcher-disabled-reason {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--text-dimmer);
+  font-style: italic;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-switcher-footer {
+  padding: 10px 16px;
+  font-size: 11px;
+  color: var(--text-dimmer);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  justify-content: center;
+}
+.project-switcher-footer kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 0 1px;
+  background: rgba(var(--overlay-rgb), 0.1);
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: inherit;
+  color: var(--text-muted);
+}

package/lib/public/css/filebrowser.css

@@ -2,76 +2,51 @@
    File Browser
    ========================================================================== */
 
-/* --- Session actions --- */
+/* --- Session actions ---
+   Compact icon+caption grid. Tile styles come from .palette-tile in
+   sidebar.css so the same tiles render correctly in both the active
+   grid here and the hidden-grid when edit-mode moves them. */
 #session-actions {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
   padding: 0 8px 4px;
 }
 
-#session-actions button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 10px;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  margin-bottom: 0;
-  transition: background 0.15s, color 0.15s;
-}
-
-#session-actions button .lucide { width: 16px; height: 16px; flex-shrink: 0; }
-#session-actions button:hover { background: var(--sidebar-hover); color: var(--text-secondary); }
-#session-actions button.active { background: var(--sidebar-hover); color: var(--text); }
-
+/* Badge becomes a small corner indicator in icon-only grid */
 .sidebar-badge {
-  background: rgba(var(--overlay-rgb), 0.1);
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(var(--overlay-rgb), 0.15);
   color: var(--text-dimmer);
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  min-width: 16px;
-  height: 16px;
-  border-radius: 8px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 7px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 4px;
-  margin-left: auto;
+  padding: 0 3px;
   line-height: 1;
+  pointer-events: none;
 }
 .sidebar-badge.hidden { display: none; }
 
+/* Sticky-notes badge stays clickable in the icon grid — it toggles the
+   archive panel. The old inline "Open Archive" expand label doesn't fit
+   a corner dot, so it's gone; the cursor and hover color still signal
+   that the badge itself is interactive. */
 #sticky-notes-sidebar-count {
   cursor: pointer;
-  overflow: hidden;
-  transition: padding 0.2s ease, background 0.15s ease, color 0.15s ease;
-}
-#sticky-notes-sidebar-count::after {
-  content: "Open Archive";
-  display: inline-block;
-  max-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  vertical-align: middle;
-  margin-left: 0;
-  opacity: 0;
-  transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.15s ease;
+  pointer-events: auto;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 #sticky-notes-sidebar-count:hover {
   background: var(--accent);
   color: #fff;
 }
-#sticky-notes-sidebar-count:hover::after {
-  max-width: 80px;
-  margin-left: 4px;
-  opacity: 1;
-}
 
 /* --- Panels --- */
 .sidebar-panel { flex: 1; overflow-y: auto; min-height: 0; }
@@ -95,8 +70,45 @@
   margin: 6px 6px 12px;
   display: flex;
   flex-direction: column;
+  /* Own the scroll: inner file-tree scrolls, titlebar/search/hint stay
+     anchored. Without this the whole panel (inherited overflow-y:auto
+     from .sidebar-panel) scrolled past the search bar. */
+  overflow: hidden;
 }
 #sidebar-panel-files.hidden { display: none; }
+#sidebar-panel-files #file-tree {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Keyboard hint footer — pinned below the tree, always visible. */
+.fb-kb-hint {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-dimmer);
+}
+.fb-kb-hint kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 0 1px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: inherit;
+  color: var(--text-muted);
+}
+.fb-kb-hint span {
+  opacity: 0.9;
+}
 
 /* --- File browser titlebar --- */
 .fb-titlebar {
@@ -247,6 +259,18 @@
 
 .file-tree-item:hover { background: var(--sidebar-hover); color: var(--text); }
 .file-tree-item.active { background: var(--sidebar-active); color: var(--text); }
+/* Keyboard focus ring (arrow-key navigation) — separate from .active
+   so the currently-opened file stays visually marked even while the
+   user is exploring elsewhere with the arrows. */
+.file-tree-item.fb-kb-focus {
+  background: var(--sidebar-hover);
+  color: var(--text);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+#file-tree:focus { outline: none; }
+#file-tree:focus .file-tree-item.fb-kb-focus {
+  background: var(--sidebar-active);
+}
 .file-tree-item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
 
 .file-tree-name {

package/lib/public/css/icon-strip.css

@@ -112,6 +112,37 @@
   flex-shrink: 0;
 }
 
+/* Keyboard-shortcut hint above each switchable strip section. Tiny
+   pill with the platform-specific chord; clicking opens the switcher
+   in that mode, same as the keyboard shortcut itself. */
+.icon-strip-hint {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 2px 4px;
+  margin: 2px 0;
+  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;
+}
+.icon-strip-hint:hover {
+  opacity: 1;
+  color: var(--text-muted);
+  background: var(--bg);
+}
+.icon-strip-hint.hidden {
+  display: none;
+}
+
 /* --- Scrollable project list area --- */
 .icon-strip-projects {
   width: 100%;
@@ -763,12 +794,23 @@
   height: 22px;
 }
 
-/* --- User avatars (circle, above my-avatar at bottom) --- */
-.icon-strip-users {
+/* Mate section wrapper — pinned just above the user-island at the
+   bottom of the strip. Groups the \u2318M hint pill with the users
+   list so the hint sits directly above the mate avatars rather than
+   floating up in the project section's flex flow. */
+.icon-strip-mate-section {
   position: absolute;
   bottom: 74px; /* above user-island (58px + 8px bottom + 8px gap) */
   left: 50%;
   transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+/* --- User avatars (circle, inside the mate section) --- */
+.icon-strip-users {
   width: 56px;
   display: flex;
   flex-direction: column;

package/lib/public/css/input.css

@@ -885,7 +885,10 @@
 #ask-mate-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
 #ask-mate-btn:active { transform: scale(0.95); }
 
-/* Mate avatar overlay on @ button */
+/* Mate avatar overlay on @ button.
+   Rendered desaturated and dim so it sits quietly in the corner of the
+   input area. Regains saturation on hover, so the user only sees the
+   actual mate identity when they're actively reaching for the button. */
 .ask-mate-avatar {
   position: absolute;
   bottom: 0;
@@ -895,12 +898,14 @@
   border-radius: 50%;
   border: 1.5px solid var(--input-bg);
   pointer-events: none;
-  opacity: 0.55;
-  transition: opacity 0.3s, transform 0.3s;
+  opacity: 0.45;
+  filter: grayscale(100%);
+  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
 }
 
 #ask-mate-btn:hover .ask-mate-avatar {
-  opacity: 0.85;
+  opacity: 0.9;
+  filter: grayscale(0%);
 }
 
 .ask-mate-avatar.fade-out {
@@ -909,7 +914,7 @@
 }
 
 .ask-mate-avatar.fade-in {
-  opacity: 0.55;
+  opacity: 0.45;
   transform: scale(1);
 }
 

package/lib/public/css/mates.css

@@ -588,6 +588,15 @@
   border-right: none;
   overflow: hidden;
   flex-shrink: 0;
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* Inputs inside the mate sidebar remain selectable. */
+#mate-sidebar-column input,
+#mate-sidebar-column textarea,
+#mate-sidebar-column [contenteditable="true"] {
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 #mate-sidebar-column.hidden {
@@ -1015,38 +1024,18 @@ body.mate-dm-active #layout.sidebar-collapsed .mate-collapsed-info {
   text-overflow: ellipsis;
 }
 
-#mate-sidebar-tools {
-  display: flex;
-  flex-direction: column;
-  padding: 8px 8px 4px;
+/* Mate sidebar tools: icon+caption grid, matches #session-actions.
+   Tile styling comes from .palette-tile in sidebar.css. */
+#mate-sidebar-tools-wrap {
   flex-shrink: 0;
   border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 4px;
 }
-
-#mate-sidebar-tools button {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 10px;
-  border: none;
-  background: none;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  font-family: inherit;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-#mate-sidebar-tools button:hover {
-  background: var(--sidebar-hover);
-  color: var(--text-secondary);
-}
-
-#mate-sidebar-tools button svg {
-  width: 16px;
-  height: 16px;
+#mate-sidebar-tools {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+  padding: 0 8px 4px;
 }
 
 /* Knowledge editor panel (overlays main content) */