clay-server 2.31.0 → 2.32.0-beta.2

package/lib/public/modules/filebrowser.js

@@ -179,6 +179,35 @@ export function initFileBrowser(_ctx) {
       closeFileViewer();
     }
   });
+
+  // --- File search ---
+  var fbSearchInput = document.getElementById("fb-search-input");
+  var searchDebounce = null;
+
+  if (fbSearchInput) {
+    fbSearchInput.addEventListener("input", function () {
+      var q = fbSearchInput.value.trim();
+      if (searchDebounce) clearTimeout(searchDebounce);
+      if (!q) {
+        renderTree();
+        restoreExpanded({});
+        return;
+      }
+      searchDebounce = setTimeout(function () {
+        if (ctx.ws && ctx.connected) {
+          ctx.ws.send(JSON.stringify({ type: "fs_search", query: q }));
+        }
+      }, 200);
+    });
+    fbSearchInput.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && fbSearchInput.value) {
+        e.stopPropagation();
+        fbSearchInput.value = "";
+        renderTree();
+        restoreExpanded({});
+      }
+    });
+  }
 }
 
 // --- File watch helpers ---
@@ -232,10 +261,8 @@ export function resetFileBrowser() {
   // Hide the file browser panel, show sessions panel
   var filesPanel = document.getElementById("sidebar-panel-files");
   var sessionsPanel = document.getElementById("sidebar-panel-sessions");
-  var filesHeaderContent = document.getElementById("files-header-content");
   var sessionsHeaderContent = document.getElementById("sessions-header-content");
   if (filesPanel) filesPanel.classList.add("hidden");
-  if (filesHeaderContent) filesHeaderContent.classList.add("hidden");
   if (sessionsPanel) sessionsPanel.classList.remove("hidden");
   if (sessionsHeaderContent) sessionsHeaderContent.classList.remove("hidden");
 }
@@ -341,6 +368,150 @@ export function refreshIfOpen(filePath) {
 
 // --- WS handlers ---
 
+export function handleFsSearch(msg) {
+  var entries = msg.entries || [];
+  var query = (msg.query || "").trim().toLowerCase();
+  if (!query) return;
+
+  ctx.fileTreeEl.innerHTML = "";
+
+  if (entries.length === 0) {
+    ctx.fileTreeEl.innerHTML = '<div class="fb-search-empty">No files found</div>';
+    return;
+  }
+
+  // Build a tree structure from flat search results
+  var tree = {};
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    var parts = entry.path.split("/");
+    var node = tree;
+    for (var j = 0; j < parts.length; j++) {
+      if (!node[parts[j]]) node[parts[j]] = {};
+      if (j === parts.length - 1) {
+        node[parts[j]]._entry = entry;
+      } else {
+        node = node[parts[j]];
+      }
+    }
+  }
+
+  renderFilteredTree(ctx.fileTreeEl, tree, 0, query);
+  refreshIcons();
+}
+
+function renderFilteredTree(container, tree, depth, query) {
+  var keys = Object.keys(tree);
+  var dirs = [];
+  var files = [];
+  for (var i = 0; i < keys.length; i++) {
+    if (keys[i] === "_entry") continue;
+    var node = tree[keys[i]];
+    var entry = node._entry;
+    if (entry && entry.type === "file") {
+      files.push(keys[i]);
+    } else {
+      dirs.push(keys[i]);
+    }
+  }
+  dirs.sort(function (a, b) {
+    var aH = a.charAt(0) === ".";
+    var bH = b.charAt(0) === ".";
+    if (aH !== bH) return aH ? 1 : -1;
+    return a.localeCompare(b);
+  });
+  files.sort(function (a, b) {
+    var aH = a.charAt(0) === ".";
+    var bH = b.charAt(0) === ".";
+    if (aH !== bH) return aH ? 1 : -1;
+    return a.localeCompare(b);
+  });
+
+  var allKeys = dirs.concat(files);
+  for (var k = 0; k < allKeys.length; k++) {
+    var name = allKeys[k];
+    var node = tree[name];
+    var entry = node._entry;
+    var isDir = !entry || entry.type === "dir";
+
+    var row = document.createElement("div");
+    row.className = "file-tree-item" + (isDir ? " expanded" : "");
+    row.style.paddingLeft = (8 + depth * 16) + "px";
+    if (entry) {
+      row.draggable = true;
+      row.dataset.path = entry.path;
+      row.addEventListener("dragstart", function (e) {
+        var cwd = ctx.cwd || "";
+        var rel = this.dataset.path;
+        var abs = cwd ? cwd.replace(/\/$/, "") + "/" + rel : rel;
+        e.dataTransfer.setData("text/plain", abs);
+        e.dataTransfer.effectAllowed = "copy";
+      });
+    }
+
+    var nameHtml = highlightMatch(name, query);
+
+    if (isDir) {
+      row.innerHTML =
+        '<span class="file-tree-chevron">' + iconHtml("chevron-right") + '</span>' +
+        '<span class="file-tree-icon file-tree-folder-icon"></span>' +
+        '<span class="file-tree-name">' + nameHtml + '</span>';
+
+      (function (iconEl, n) {
+        getFolderIconSvg(n, true, function (svg) { iconEl.innerHTML = svg; });
+      })(row.querySelector(".file-tree-folder-icon"), name);
+
+      var childContainer = document.createElement("div");
+      childContainer.className = "file-tree-children";
+
+      // Toggle expand/collapse on click
+      (function (rowEl, childEl, folderName) {
+        rowEl.addEventListener("click", function (e) {
+          e.stopPropagation();
+          var isExpanded = rowEl.classList.contains("expanded");
+          rowEl.classList.toggle("expanded");
+          childEl.classList.toggle("hidden", isExpanded);
+          var folderIconEl = rowEl.querySelector(".file-tree-folder-icon");
+          if (folderIconEl) {
+            getFolderIconSvg(folderName, !isExpanded, function (svg) { folderIconEl.innerHTML = svg; });
+          }
+        });
+      })(row, childContainer, name);
+
+      container.appendChild(row);
+      container.appendChild(childContainer);
+      renderFilteredTree(childContainer, node, depth + 1, query);
+    } else {
+      row.innerHTML =
+        '<span class="file-tree-spacer"></span>' +
+        '<span class="file-tree-icon">' + getFileIconSvg(name) + '</span>' +
+        '<span class="file-tree-name">' + nameHtml + '</span>';
+
+      (function (filePath, rowEl) {
+        rowEl.addEventListener("click", function (e) {
+          e.stopPropagation();
+          var prev = ctx.fileTreeEl.querySelector(".file-tree-item.active");
+          if (prev) prev.classList.remove("active");
+          rowEl.classList.add("active");
+          requestFileContent(filePath);
+          if (window.innerWidth <= 768) closeSidebar();
+        });
+      })(entry.path, row);
+
+      container.appendChild(row);
+    }
+  }
+}
+
+function highlightMatch(text, query) {
+  var lower = text.toLowerCase();
+  var idx = lower.indexOf(query);
+  if (idx === -1) return escapeHtml(text);
+  return escapeHtml(text.substring(0, idx)) +
+    '<mark>' + escapeHtml(text.substring(idx, idx + query.length)) + '</mark>' +
+    escapeHtml(text.substring(idx + query.length));
+}
+
 export function handleFsList(msg) {
   var dirPath = msg.path || ".";
   treeData[dirPath] = { loaded: true, children: msg.entries || [] };

package/lib/public/modules/input.js

@@ -1,6 +1,8 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { setRewindMode, isRewindMode } from './rewind.js';
 import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, stickyReapplyMention, sendMention, renderMentionUser, removeMentionChip } from './mention.js';
+import { store } from './store.js';
+import { mateAvatarUrl } from './avatar.js';
 
 var ctx;
 
@@ -217,8 +219,15 @@ export function sendMessage() {
   if (pastes.length > 0) {
     payload.pastes = pastes;
   }
+  // Include selected vendor for session binding (server uses on first message)
+  var _selVendor = store.get("currentVendor") || null;
+  if (_selVendor) payload.vendor = _selVendor;
   ctx.ws.send(JSON.stringify(payload));
 
+  // Hide vendor toggle after first message (vendor is locked to this session)
+  var _vtw2 = document.getElementById("vendor-toggle-wrap");
+  if (_vtw2) { _vtw2.classList.remove("hidden"); _vtw2.classList.add("locked"); }
+
   // Show pre-thinking dots before server responds
   if (ctx.isMateDm && ctx.isMateDm()) {
     ctx.showMatePreThinking();
@@ -770,6 +779,69 @@ export function initInput(_ctx) {
       // Trigger the mention detection
       inputEl.dispatchEvent(new Event("input", { bubbles: true }));
     });
+
+    // Mate avatar overlay on @ button — rotate random mate faces
+    var _lastOverlayIdx = -1;
+    var _overlayInterval = null;
+
+    function getAvailableMates() {
+      var mates = store.get('cachedMatesList') || [];
+      return mates.filter(function (m) { return m.status !== 'interviewing'; });
+    }
+
+    function pickNextMate(available) {
+      if (available.length === 0) return null;
+      if (available.length === 1) return available[0];
+      var idx = Math.floor(Math.random() * available.length);
+      if (idx === _lastOverlayIdx) idx = (idx + 1) % available.length;
+      _lastOverlayIdx = idx;
+      return available[idx];
+    }
+
+    function setOverlayAvatar(mate) {
+      var img = askMateBtn.querySelector('.ask-mate-avatar');
+      if (!mate) {
+        if (img) img.remove();
+        return;
+      }
+      var url = mateAvatarUrl(mate, 20);
+      if (!img) {
+        img = document.createElement('img');
+        img.className = 'ask-mate-avatar fade-in';
+        img.width = 20;
+        img.height = 20;
+        img.alt = '';
+        img.src = url;
+        askMateBtn.appendChild(img);
+        return;
+      }
+      // Fade out, swap, fade in
+      img.classList.remove('fade-in');
+      img.classList.add('fade-out');
+      setTimeout(function () {
+        img.src = url;
+        img.classList.remove('fade-out');
+        img.classList.add('fade-in');
+      }, 300);
+    }
+
+    function rotateMateOverlay() {
+      var available = getAvailableMates();
+      setOverlayAvatar(pickNextMate(available));
+    }
+
+    function startOverlayRotation() {
+      if (_overlayInterval) clearInterval(_overlayInterval);
+      rotateMateOverlay();
+      _overlayInterval = setInterval(rotateMateOverlay, 10000);
+    }
+
+    // Update overlay when mate list changes
+    store.subscribe(function (state, prev) {
+      if (state.cachedMatesList !== prev.cachedMatesList) {
+        startOverlayRotation();
+      }
+    });
   }
 
   // Paste handler
@@ -930,6 +1002,12 @@ export function initInput(_ctx) {
         return;
       }
       e.preventDefault();
+      // If input is empty but ghost suggestion is showing, adopt it
+      var ghost = ctx.getGhostSuggestion ? ctx.getGhostSuggestion() : "";
+      if (!ctx.inputEl.value.trim() && ghost) {
+        ctx.inputEl.value = ghost;
+        if (ctx.hideSuggestionChips) ctx.hideSuggestionChips();
+      }
       sendMessage();
     }
   });
@@ -941,6 +1019,14 @@ export function initInput(_ctx) {
 
   // Send/Stop button — if sendable content exists, always send; otherwise stop
   ctx.sendBtn.addEventListener("click", function () {
+    // Adopt ghost suggestion if input is empty
+    var ghost = ctx.getGhostSuggestion ? ctx.getGhostSuggestion() : "";
+    if (!hasSendableContent() && ghost) {
+      ctx.inputEl.value = ghost;
+      if (ctx.hideSuggestionChips) ctx.hideSuggestionChips();
+      sendMessage();
+      return;
+    }
     if (hasSendableContent()) {
       sendMessage();
       return;

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

@@ -1,6 +1,7 @@
 import { avatarUrl, mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
+import { store } from './store.js';
 import { hideKnowledge } from './mate-knowledge.js';
 import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 import { hideNotes } from './sticky-notes.js';
@@ -150,6 +151,43 @@ export function showMateSidebar(mateId, mateData) {
   if (avatarEl) avatarEl.src = mateAvUrl;
   if (nameEl) nameEl.textContent = displayName;
 
+  // Vendor toggle in header
+  var mateVendorWrap = document.getElementById("mate-vendor-toggle");
+  if (mateVendorWrap) {
+    var available = store.get('availableVendors') || [];
+    var mateVendor = mateData.vendor || "claude";
+    var vendorIcons = { claude: "/claude-code-avatar.png", codex: "/codex-avatar.png" };
+    var vendorNames = { claude: "Claude Code", codex: "Codex" };
+    var vendorKeys = ["claude", "codex"];
+    mateVendorWrap.innerHTML = "";
+    for (var vi = 0; vi < vendorKeys.length; vi++) {
+      var vk = vendorKeys[vi];
+      var vBtn = document.createElement("button");
+      vBtn.className = "mate-vendor-btn" + (vk === mateVendor ? " active" : "");
+      if (available.indexOf(vk) === -1) vBtn.classList.add("disabled");
+      vBtn.dataset.vendor = vk;
+      vBtn.innerHTML = '<img src="' + vendorIcons[vk] + '" class="mate-vendor-icon" alt="' + vendorNames[vk] + '"><span class="mate-vendor-label">' + vendorNames[vk] + '</span>';
+      vBtn.addEventListener("click", function() {
+        var v = this.dataset.vendor;
+        var avail = store.get('availableVendors') || [];
+        if (avail.indexOf(v) === -1) return;
+        if (v === (currentMate && currentMate.vendor || "claude")) return;
+        if (!currentMateId) return;
+        var ws = getWs();
+        if (ws) ws.send(JSON.stringify({ type: "mate_update", mateId: currentMateId, updates: { vendor: v } }));
+        // Update UI immediately
+        mateVendorWrap.querySelectorAll(".mate-vendor-btn").forEach(function(b) {
+          b.classList.toggle("active", b.dataset.vendor === v);
+        });
+        if (currentMate) currentMate.vendor = v;
+        // If current session is new (no history), sync vendor to input toggle
+        var _hTotal = store.get('historyTotal') || 0;
+        if (_hTotal === 0) store.set({ currentVendor: v });
+      });
+      mateVendorWrap.appendChild(vBtn);
+    }
+  }
+
   // Also populate collapsed header info
   var collapsedAvatar = document.getElementById("mate-collapsed-avatar");
   var collapsedName = document.getElementById("mate-collapsed-name");

package/lib/public/modules/mention.js

@@ -2,6 +2,7 @@ import { mateAvatarUrl, userAvatarUrl } from './avatar.js';
 import { renderMarkdown, highlightCodeBlocks } from './markdown.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
+import { store } from './store.js';
 
 var ctx;
 
@@ -77,13 +78,17 @@ export function showMentionMenu(query) {
   var menuEl = document.getElementById("mention-menu");
   if (!menuEl) return;
 
-  menuEl.innerHTML = mentionFiltered.map(function (m, i) {
+  menuEl.innerHTML = '<div class="mention-hint">Mention a Mate to get advice on your current session<button class="mention-close-btn" aria-label="Close">&times;</button></div>' +
+  mentionFiltered.map(function (m, i) {
     var name = (m.profile && m.profile.displayName) || m.name || "Mate";
     var color = (m.profile && m.profile.avatarColor) || "#6c5ce7";
     var bio = m.bio || (m.profile && m.profile.bio) || "";
     var avatarSrc = mateAvatarUrl(m, 24);
+    var mVendor = m.vendor || "claude";
+    var vendorIcons = { claude: "/claude-code-avatar.png", codex: "/codex-avatar.png" };
+    var vendorBadge = vendorIcons[mVendor] ? '<img class="mention-item-vendor-badge" src="' + vendorIcons[mVendor] + '" alt="' + mVendor + '">' : '';
     return '<div class="mention-item' + (i === 0 ? ' active' : '') + '" data-idx="' + i + '">' +
-      '<img class="mention-item-avatar" src="' + escapeHtml(avatarSrc) + '" width="24" height="24" />' +
+      '<div class="mention-item-avatar-wrap"><img class="mention-item-avatar" src="' + escapeHtml(avatarSrc) + '" width="24" height="24" />' + vendorBadge + '</div>' +
       '<div class="mention-item-info">' +
         '<span class="mention-item-name">' + escapeHtml(name) +
           (m.primary ? ' <span class="mention-item-badge">SYSTEM</span>' : '') +
@@ -95,6 +100,18 @@ export function showMentionMenu(query) {
   }).join("");
   menuEl.classList.add("visible");
 
+  var closeBtn = menuEl.querySelector(".mention-close-btn");
+  if (closeBtn) closeBtn.addEventListener("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    hideMentionMenu();
+    clearMentionState();
+    if (ctx && ctx.inputEl) {
+      ctx.inputEl.value = ctx.inputEl.value.replace(/@\S*$/, "");
+      ctx.inputEl.focus();
+    }
+  });
+
   menuEl.querySelectorAll(".mention-item").forEach(function (el) {
     el.addEventListener("click", function (e) {
       e.preventDefault();
@@ -215,10 +232,11 @@ function showInputMentionChip(name, color, avatarSrc) {
     '<button class="input-mention-chip-remove" type="button" aria-label="Remove mention">&times;</button>';
   chip.style.setProperty("--chip-color", color);
 
-  // Insert before the textarea inside input-row
+  // Insert before the textarea wrapper inside input-row
   var inputRow = document.getElementById("input-row");
-  if (inputRow && ctx.inputEl) {
-    inputRow.insertBefore(chip, ctx.inputEl);
+  var textareaWrap = document.getElementById("input-textarea-wrap");
+  if (inputRow && textareaWrap) {
+    inputRow.insertBefore(chip, textareaWrap);
   }
 
   chip.querySelector(".input-mention-chip-remove").addEventListener("click", function (e) {
@@ -713,7 +731,7 @@ export function renderMentionUser(entry) {
     '<span class="msg-action-time">' + ts2 + '</span>' +
     '<button class="msg-action-btn msg-action-copy" type="button" title="Copy">' + iconHtml("copy") + '</button>' +
     '<button class="msg-action-btn msg-action-fork" type="button" title="Fork">' + iconHtml("git-branch") + '</button>' +
-    '<button class="msg-action-btn msg-action-rewind msg-user-rewind-btn" type="button" title="Rewind">' + iconHtml("rotate-ccw") + '</button>' +
+    (((store.get('vendorCapabilities') || {}).rewind !== false) ? '<button class="msg-action-btn msg-action-rewind msg-user-rewind-btn" type="button" title="Rewind">' + iconHtml("rotate-ccw") + '</button>' : '') +
     '<button class="msg-action-btn msg-action-hidden msg-action-edit" type="button" title="Edit">' + iconHtml("pencil") + '</button>';
   div.appendChild(actions);
 

package/lib/public/modules/scheduler.js

@@ -790,7 +790,7 @@ function renderModelTab(bodyEl, rec) {
   }
 
   var opts = {
-    models: store.getState().currentModels || [],
+    models: store.get('currentModels') || [],
     currentModel: settings.model || "",
     currentMode: settings.permissionMode || "default",
     currentEffort: settings.effort || "medium",