clay-server 2.31.0 → 2.32.0-beta.10

package/lib/public/modules/context-sources.js

@@ -17,6 +17,8 @@ export function initContextSources(_ctx) {
 
   var addBtn = document.getElementById("context-sources-add");
   var picker = document.getElementById("context-sources-picker");
+  // Suppress tooltip when the picker is open
+  if (addBtn) addBtn.setAttribute("data-tip-suppress-when-open", "#context-sources-picker");
 
   addBtn.addEventListener("click", function(e) {
     e.stopPropagation();
@@ -36,8 +38,22 @@ export function initContextSources(_ctx) {
 
 function closePicker() {
   var picker = document.getElementById("context-sources-picker");
-  picker.classList.add("hidden");
+  if (picker) picker.classList.add("hidden");
   document.removeEventListener("click", closePicker, true);
+  // Also close mobile bottom sheet if open
+  var moreSheet = document.getElementById("input-more-sheet");
+  if (moreSheet && moreSheet.classList.contains("open")) {
+    moreSheet.classList.remove("open");
+    setTimeout(function () { moreSheet.classList.add("hidden"); }, 250);
+  }
+}
+
+// Re-render all open picker surfaces (desktop popover and mobile bottom sheet)
+function renderAllOpen() {
+  var picker = document.getElementById("context-sources-picker");
+  if (picker && !picker.classList.contains("hidden")) renderPicker();
+  var moreSheet = document.getElementById("input-more-sheet");
+  if (moreSheet && moreSheet.classList.contains("open")) renderPicker("-mobile");
 }
 
 // Restore state from server
@@ -80,11 +96,7 @@ export function updateTerminalList(terminals) {
   if (changed) saveToServer();
   renderChips();
 
-  // If picker is open, re-render it
-  var picker = document.getElementById("context-sources-picker");
-  if (!picker.classList.contains("hidden")) {
-    renderPicker();
-  }
+  renderAllOpen();
 }
 
 // Called when Chrome extension sends tab list via postMessage
@@ -110,11 +122,7 @@ export function updateBrowserTabList(tabs) {
   if (changed) saveToServer();
   renderChips();
 
-  // If picker is open, re-render it
-  var picker = document.getElementById("context-sources-picker");
-  if (!picker.classList.contains("hidden")) {
-    renderPicker();
-  }
+  renderAllOpen();
 }
 
 // Called when email_accounts_list arrives from server
@@ -141,10 +149,7 @@ export function updateEmailAccountList(msg) {
   if (changed) saveToServer();
   renderChips();
 
-  var picker = document.getElementById("context-sources-picker");
-  if (!picker.classList.contains("hidden")) {
-    renderPicker();
-  }
+  renderAllOpen();
 }
 
 // Called when email_unread_update arrives from server
@@ -152,10 +157,7 @@ export function updateEmailUnreadCounts(msg) {
   emailUnreadCounts = msg.unread || {};
   renderChips();
 
-  var picker = document.getElementById("context-sources-picker");
-  if (!picker.classList.contains("hidden")) {
-    renderPicker();
-  }
+  renderAllOpen();
 }
 
 function toggleSource(sourceId) {
@@ -166,7 +168,7 @@ function toggleSource(sourceId) {
   }
   saveToServer();
   renderChips();
-  renderPicker();
+  renderAllOpen();
 }
 
 function removeSource(sourceId) {
@@ -174,63 +176,95 @@ function removeSource(sourceId) {
   saveToServer();
   renderChips();
 
-  var picker = document.getElementById("context-sources-picker");
-  if (!picker.classList.contains("hidden")) {
-    renderPicker();
-  }
+  renderAllOpen();
 }
 
-function renderChips() {
-  var container = document.getElementById("context-sources-chips");
-  container.innerHTML = "";
+function buildActiveSourceRow(iconHtml, text) {
+  return '<div class="ctx-tip-row">' + iconHtml + '<span>' + escapeHtml(text) + '</span></div>';
+}
 
+function getActiveSourceRowsHTML() {
+  var rows = [];
   for (var id of activeSourceIds) {
-    var chip = document.createElement("div");
-    chip.className = "context-chip";
-
-    var label = getSourceLabel(id);
-    var iconName = getSourceIcon(id);
-
-    var labelEl = document.createElement("span");
-    labelEl.className = "context-chip-label";
-    labelEl.innerHTML =
-      '<i data-lucide="' + iconName + '"></i>' +
-      '<span>' + escapeHtml(label) + '</span>';
-    chip.appendChild(labelEl);
-
-    var removeBtn = document.createElement("button");
-    removeBtn.type = "button";
-    removeBtn.className = "context-chip-remove";
-    removeBtn.title = "Remove";
-    removeBtn.innerHTML = '<i data-lucide="minus"></i>';
-    removeBtn.setAttribute("data-source-id", id);
-    removeBtn.addEventListener("click", function(e) {
-      e.stopPropagation();
-      removeSource(this.getAttribute("data-source-id"));
-      if (typeof lucide !== "undefined") lucide.createIcons();
-    });
-
-    chip.appendChild(removeBtn);
-    container.appendChild(chip);
+    var parts = id.split(":");
+    var type = parts[0];
+    var key = parts.slice(1).join(":");
+    if (type === "term") {
+      for (var i = 0; i < terminalList.length; i++) {
+        if (String(terminalList[i].id) === key) {
+          rows.push(buildActiveSourceRow(
+            '<i data-lucide="square-terminal"></i>',
+            terminalList[i].title || ("Terminal " + key)
+          ));
+          break;
+        }
+      }
+    } else if (type === "tab") {
+      var tabId = parseInt(key, 10);
+      for (var j = 0; j < browserTabList.length; j++) {
+        if (browserTabList[j].id === tabId) {
+          var t = browserTabList[j];
+          var title = t.title || t.url || "Tab";
+          if (title.length > 50) title = title.slice(0, 47) + "...";
+          var faviconHtml = t.favIconUrl
+            ? '<img src="' + escapeHtml(t.favIconUrl) + '" class="ctx-tip-favicon" onerror="this.style.display=\'none\'">'
+            : '<i data-lucide="globe"></i>';
+          rows.push(buildActiveSourceRow(faviconHtml, title));
+          break;
+        }
+      }
+    } else if (type === "email") {
+      for (var k = 0; k < emailAccountList.length; k++) {
+        if (emailAccountList[k].id === key) {
+          rows.push(buildActiveSourceRow(
+            '<i data-lucide="mail"></i>',
+            emailAccountList[k].email
+          ));
+          break;
+        }
+      }
+    }
   }
+  return rows;
+}
 
-  // Update add button label
+function renderChips() {
+  // Update add button — show badge count when sources are active
   var addBtn = document.getElementById("context-sources-add");
-  var labelSpan = addBtn.querySelector("span");
+  var labelSpan = addBtn.querySelector(".ctx-label");
+  var existingBadge = addBtn.querySelector(".ctx-badge");
   if (activeSourceIds.size > 0) {
-    labelSpan.textContent = "";
-    labelSpan.style.display = "none";
+    if (labelSpan) labelSpan.style.display = "none";
+    if (!existingBadge) {
+      existingBadge = document.createElement("span");
+      existingBadge.className = "ctx-badge";
+      addBtn.appendChild(existingBadge);
+    }
+    existingBadge.textContent = activeSourceIds.size;
+    var rows = getActiveSourceRowsHTML();
+    if (rows.length > 0) {
+      var html = '<div class="ctx-tip-header">Active context sources</div>' + rows.join("");
+      addBtn.setAttribute("data-tip-html", html);
+      addBtn.removeAttribute("data-tip");
+    } else {
+      addBtn.setAttribute("data-tip", "Add context sources");
+      addBtn.removeAttribute("data-tip-html");
+    }
+    addBtn.removeAttribute("title");
   } else {
-    labelSpan.textContent = "Context Sources";
-    labelSpan.style.display = "";
+    if (labelSpan) { labelSpan.style.display = ""; }
+    if (existingBadge) existingBadge.remove();
+    addBtn.setAttribute("data-tip", "Add context sources");
+    addBtn.removeAttribute("data-tip-html");
+    addBtn.removeAttribute("title");
   }
-
-  if (typeof lucide !== "undefined") lucide.createIcons();
 }
 
-function renderPicker() {
+export function renderPicker(suffix) {
+  suffix = suffix || "";
   // --- Terminals section ---
-  var termSection = document.getElementById("context-picker-terminals");
+  var termSection = document.getElementById("context-picker-terminals" + suffix);
+  if (!termSection) return;
   termSection.innerHTML = "";
 
   var termLabel = document.createElement("div");
@@ -268,7 +302,8 @@ function renderPicker() {
   }
 
   // --- Browser Tabs section ---
-  var tabSection = document.getElementById("context-picker-tabs");
+  var tabSection = document.getElementById("context-picker-tabs" + suffix);
+  if (!tabSection) return;
   tabSection.innerHTML = "";
 
   var tabLabel = document.createElement("div");
@@ -328,7 +363,8 @@ function renderPicker() {
   }
 
   // --- Email Accounts section ---
-  var emailSection = document.getElementById("context-picker-email");
+  var emailSection = document.getElementById("context-picker-email" + suffix);
+  if (!emailSection) return;
   emailSection.innerHTML = "";
 
   var emailLabel = document.createElement("div");

package/lib/public/modules/dom-refs.js

@@ -0,0 +1,21 @@
+// dom-refs.js - Shared DOM element references
+// Lazy-cached getElementById lookups for elements used across multiple modules.
+// Same pattern as ws-ref.js: infrastructure singleton, not state.
+
+var _cache = {};
+
+function ref(id) {
+  if (!_cache[id]) _cache[id] = document.getElementById(id);
+  return _cache[id];
+}
+
+export function getMessagesEl() { return ref("messages"); }
+export function getInputEl() { return ref("input"); }
+export function getSendBtn() { return ref("send-btn"); }
+export function getSessionListEl() { return ref("session-list"); }
+
+export function getStatusDot() {
+  return document.querySelector("#icon-strip-projects .icon-strip-item.active .icon-strip-status") ||
+         document.querySelector("#icon-strip-projects .icon-strip-wt-item.active .icon-strip-status") ||
+         document.querySelector("#icon-strip-users .icon-strip-mate.active .icon-strip-status");
+}

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,9 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { setRewindMode, isRewindMode } from './rewind.js';
+import { renderPicker as renderContextPicker } from './context-sources.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 +220,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();
@@ -648,6 +658,41 @@ export function initInput(_ctx) {
     });
   }
 
+  // Mobile "+" button -> unified bottom sheet with attach/image + context sources
+  var moreBtn = document.getElementById("input-more-btn");
+  var moreSheet = document.getElementById("input-more-sheet");
+  function openMoreSheet() {
+    if (!moreSheet) return;
+    // Render context sources into mobile sheet containers
+    try { renderContextPicker("-mobile"); } catch (e) {}
+    moreSheet.classList.remove("hidden");
+    requestAnimationFrame(function () { moreSheet.classList.add("open"); });
+  }
+  function closeMoreSheet() {
+    if (!moreSheet) return;
+    moreSheet.classList.remove("open");
+    setTimeout(function () { moreSheet.classList.add("hidden"); }, 250);
+  }
+  if (moreBtn && moreSheet) {
+    moreBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      openMoreSheet();
+    });
+    var backdrop = moreSheet.querySelector(".input-more-backdrop");
+    if (backdrop) backdrop.addEventListener("click", closeMoreSheet);
+
+    var moreAttach = document.getElementById("input-more-attach");
+    if (moreAttach) moreAttach.addEventListener("click", function () {
+      closeMoreSheet();
+      createFileInput(null, null, true);
+    });
+    var moreImage = document.getElementById("input-more-image");
+    if (moreImage) moreImage.addEventListener("click", function () {
+      closeMoreSheet();
+      createFileInput("image/*", null, true);
+    });
+  }
+
   // Schedule button — inline expand with minute input
   var scheduleBtn = document.getElementById("schedule-btn");
   var scheduleInlineInput = null;
@@ -770,6 +815,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 +1038,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 +1055,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/markdown.js

@@ -23,7 +23,11 @@ export function updateMermaidTheme(vars) {
 var mermaidIdCounter = 0;
 
 export function renderMarkdown(text) {
-  return DOMPurify.sanitize(marked.parse(text));
+  // Normalize smart quotes so bold/italic delimiters flanking them parse correctly
+  var normalized = text
+    .replace(/[\u201C\u201D]/g, '"')
+    .replace(/[\u2018\u2019]/g, "'");
+  return DOMPurify.sanitize(marked.parse(normalized));
 }
 
 /**