clay-server 2.28.0-beta.1 → 2.28.0-beta.3

package/lib/public/css/filebrowser.css

@@ -227,6 +227,210 @@
   margin: -8px 0 20px;
 }
 
+/* MCP Servers Modal */
+#mcp-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#mcp-modal.hidden { display: none; }
+.mcp-dialog {
+  width: 480px;
+  max-width: 94vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+.mcp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.mcp-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+.mcp-title .lucide { width: 18px; height: 18px; }
+.mcp-content {
+  padding: 16px 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+.mcp-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0 0 16px;
+  line-height: 1.5;
+}
+.mcp-empty {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--text-muted);
+}
+.mcp-empty .lucide { width: 32px; height: 32px; margin-bottom: 12px; opacity: 0.4; }
+.mcp-empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0 0 6px;
+}
+.mcp-empty-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+.mcp-ext-setup-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  margin-top: 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--bg-hover, rgba(255,255,255,0.06));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.mcp-ext-setup-btn:hover {
+  background: var(--bg-active, rgba(255,255,255,0.1));
+}
+.mcp-ext-setup-btn .lucide {
+  width: 14px;
+  height: 14px;
+}
+.mcp-install-cmd-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  max-width: 100%;
+}
+.mcp-install-cmd {
+  flex: 1;
+  padding: 8px 10px;
+  background: var(--bg-deep, rgba(0,0,0,0.25));
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  font-size: 12px;
+  color: var(--text);
+  overflow-x: auto;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+.mcp-install-copy-btn {
+  flex-shrink: 0;
+  padding: 6px 8px;
+  background: var(--bg-hover, rgba(255,255,255,0.06));
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.mcp-install-copy-btn:hover {
+  background: var(--bg-active, rgba(255,255,255,0.1));
+}
+.mcp-install-copy-btn .lucide {
+  width: 14px;
+  height: 14px;
+}
+.mcp-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mcp-step {
+  display: flex;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  transition: opacity 0.15s;
+}
+.mcp-step.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.mcp-step-icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  color: var(--text-muted);
+}
+.mcp-step-icon.done {
+  color: var(--green, #2ecc71);
+}
+.mcp-step-icon .lucide {
+  width: 20px;
+  height: 20px;
+}
+.mcp-step-body {
+  flex: 1;
+  min-width: 0;
+}
+.mcp-step-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+.mcp-step-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+.mcp-step.done .mcp-step-desc {
+  color: var(--green, #2ecc71);
+}
+.mcp-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 12px 0;
+}
+.mcp-server-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.mcp-server-row:last-child { border-bottom: none; }
+.mcp-server-row:hover { background: var(--bg-dim); margin: 0 -20px; padding: 10px 20px; }
+.mcp-server-row input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.mcp-server-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.mcp-server-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+.mcp-server-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
 /* Beta toggle row inside settings card */
 .ps-beta-toggle-row,
 .ss-beta-toggle-row {

package/lib/public/index.html

@@ -191,6 +191,7 @@
             <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>
+            <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>
             <button id="scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
           </div>
@@ -255,6 +256,7 @@
         <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-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>
@@ -1507,6 +1509,20 @@
   </div>
 </div>
 
+<!-- MCP Servers Modal -->
+<div id="mcp-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog mcp-dialog">
+    <div class="mcp-header">
+      <span class="mcp-title"><i data-lucide="cable"></i> MCP Servers</span>
+      <button class="skills-close" id="mcp-modal-close"><i data-lucide="x"></i></button>
+    </div>
+    <div class="mcp-content" id="mcp-content">
+      <p class="mcp-no-servers">No MCP servers detected. Configure in Clay Chrome Extension.</p>
+    </div>
+  </div>
+</div>
+
 <!-- Debate Modal (Wizard) -->
 <div id="debate-modal" class="hidden">
   <div class="debate-modal-backdrop"></div>

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

@@ -31,7 +31,8 @@ import { handleSkillInstalled, handleSkillUninstalled } from './skills.js';
 import { showRewindModal, onRewindComplete, setRewindMode, onRewindError, clearPendingRewindUuid, addRewindButton } from './rewind.js';
 import { checkAdminAccess } from './admin.js';
 import { mateAvatarUrl } from './avatar.js';
-import { showImageModal, sendExtensionCommand } from './app-misc.js';
+import { showImageModal, sendExtensionCommand, handleMcpToolCallMessage } from './app-misc.js';
+import { handleMcpServersState } from './mcp-ui.js';
 import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, isSchedulerOpen, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './scheduler.js';
 
 // --- App module imports ---
@@ -999,6 +1000,14 @@ export function processMessage(msg) {
         sendExtensionCommand(msg.command, msg.args, msg.requestId);
         break;
 
+      case "mcp_tool_call":
+        handleMcpToolCallMessage(msg);
+        break;
+
+      case "mcp_servers_state":
+        handleMcpServersState(msg);
+        break;
+
       case "term_created":
         handleTermCreated(msg);
         if (store.getState().pendingTermCommand) {

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

@@ -5,6 +5,7 @@ import { refreshIcons, iconHtml } from './icons.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { getWs } from './ws-ref.js';
 import { updateBrowserTabList } from './context-sources.js';
+import { setExtensionConnected } from './mcp-ui.js';
 
 // --- Module-owned state ---
 var confirmCallback = null;
@@ -95,6 +96,7 @@ export function initMisc() {
     var msg = event.data.payload;
 
     if (msg.type === "clay_ext_tab_list") {
+      setExtensionConnected(true);
       updateBrowserTabList(msg.tabs);
       // Also inform server about tab list
       var ws = getWs();
@@ -108,9 +110,111 @@ export function initMisc() {
     if (msg.type === "clay_ext_result") {
       handleExtensionResult(msg.requestId, msg.result);
     }
+    if (msg.type === "clay_ext_disconnected") {
+      setExtensionConnected(false);
+    }
+
+    // MCP bridge: extension reports available MCP servers
+    if (msg.type === "mcp_servers_available") {
+      var ws2 = getWs();
+      if (ws2 && ws2.readyState === 1) {
+        ws2.send(JSON.stringify({
+          type: "mcp_servers_available",
+          servers: msg.servers,
+          hostConnected: msg.hostConnected
+        }));
+      }
+    }
+
+    // MCP bridge: tool result from extension
+    if (msg.type === "mcp_tool_result") {
+      var ws3 = getWs();
+      if (ws3 && ws3.readyState === 1) {
+        ws3.send(JSON.stringify({
+          type: msg.error ? "mcp_tool_error" : "mcp_tool_result",
+          callId: msg.callId,
+          result: msg.result || null,
+          error: msg.error || null
+        }));
+      }
+    }
   });
 }
 
+// Forward an MCP tool call from the server to the Chrome extension
+export function forwardMcpToolCall(msg) {
+  window.postMessage({
+    source: "clay-page",
+    payload: {
+      type: "clay_mcp_tool_call",
+      callId: msg.callId,
+      server: msg.server,
+      method: msg.method,
+      params: msg.params,
+    }
+  }, "*");
+}
+
+// Forward an MCP tool call directly via HTTP for HTTP-transport servers
+var _httpMcpServers = {}; // name -> url
+export function setHttpMcpServers(servers) {
+  _httpMcpServers = {};
+  for (var i = 0; i < servers.length; i++) {
+    if (servers[i].transport === "http" && servers[i].url) {
+      _httpMcpServers[servers[i].name] = servers[i].url;
+    }
+  }
+}
+
+export function handleMcpToolCallMessage(msg) {
+  var httpUrl = _httpMcpServers[msg.server];
+  if (httpUrl) {
+    // HTTP transport: call directly via fetch
+    fetch(httpUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: msg.callId,
+        method: msg.method,
+        params: msg.params,
+      }),
+    })
+    .then(function (resp) { return resp.json(); })
+    .then(function (data) {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        if (data.error) {
+          ws.send(JSON.stringify({
+            type: "mcp_tool_error",
+            callId: msg.callId,
+            error: data.error.message || JSON.stringify(data.error),
+          }));
+        } else {
+          ws.send(JSON.stringify({
+            type: "mcp_tool_result",
+            callId: msg.callId,
+            result: data.result,
+          }));
+        }
+      }
+    })
+    .catch(function (err) {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({
+          type: "mcp_tool_error",
+          callId: msg.callId,
+          error: "HTTP MCP fetch failed: " + err.message,
+        }));
+      }
+    });
+  } else {
+    // stdio transport: forward to extension
+    forwardMcpToolCall(msg);
+  }
+}
+
 export function showImageModal(src) {
   var modal = document.getElementById("image-modal");
   var img = document.getElementById("image-modal-img");

package/lib/public/modules/mcp-ui.js

@@ -0,0 +1,295 @@
+// mcp-ui.js - MCP Servers modal (sidebar button + panel)
+// Renders available MCP servers with per-project toggle checkboxes.
+
+import { getWs } from './ws-ref.js';
+import { refreshIcons } from './icons.js';
+import { setHttpMcpServers } from './app-misc.js';
+
+var modal = null;
+var contentEl = null;
+var _mcpServers = []; // { name, transport, toolCount, extensionEnabled, projectEnabled }
+var _extensionConnected = false;
+var _nativeHostConnected = false;
+var _extensionId = null;
+
+export function initMcp() {
+  modal = document.getElementById("mcp-modal");
+  contentEl = document.getElementById("mcp-content");
+
+  var btn = document.getElementById("mcp-btn");
+  var mateBtn = document.getElementById("mate-mcp-btn");
+  var closeBtn = document.getElementById("mcp-modal-close");
+  var backdrop = modal ? modal.querySelector(".confirm-backdrop") : null;
+
+  if (btn) btn.addEventListener("click", openMcpModal);
+  if (mateBtn) mateBtn.addEventListener("click", openMcpModal);
+  if (closeBtn) closeBtn.addEventListener("click", closeMcpModal);
+  if (backdrop) backdrop.addEventListener("click", closeMcpModal);
+
+  // ESC to close
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) {
+      closeMcpModal();
+    }
+  });
+}
+
+export function handleMcpServersState(msg) {
+  _mcpServers = msg.servers || [];
+  _extensionConnected = true;
+  if (msg.hostConnected !== undefined) _nativeHostConnected = msg.hostConnected;
+  if (msg.extensionId) _extensionId = msg.extensionId;
+
+  // Update HTTP MCP server registry for direct fetch calls
+  setHttpMcpServers(_mcpServers);
+
+  // Update sidebar badge
+  updateBadge();
+
+  // Re-render if modal is open (skip during toggle cooldown)
+  if (modal && !modal.classList.contains("hidden") && !_toggleCooldown) {
+    renderMcpServerList();
+  }
+}
+
+export function setExtensionConnected(connected) {
+  _extensionConnected = connected;
+}
+
+export function getMcpServers() {
+  return _mcpServers;
+}
+
+function openMcpModal() {
+  if (!modal) return;
+  modal.classList.remove("hidden");
+  refreshIcons(modal);
+  renderMcpServerList();
+}
+
+function closeMcpModal() {
+  if (!modal) return;
+  modal.classList.add("hidden");
+}
+
+function updateBadge() {
+  var enabled = 0;
+  for (var i = 0; i < _mcpServers.length; i++) {
+    if (_mcpServers[i].extensionEnabled && _mcpServers[i].projectEnabled) enabled++;
+  }
+
+  var badges = [
+    document.getElementById("mcp-sidebar-count"),
+    document.getElementById("mate-mcp-sidebar-count"),
+  ];
+  for (var j = 0; j < badges.length; j++) {
+    var badge = badges[j];
+    if (!badge) continue;
+    if (enabled > 0) {
+      badge.textContent = String(enabled);
+      badge.classList.remove("hidden");
+    } else {
+      badge.classList.add("hidden");
+    }
+  }
+}
+
+function renderMcpServerList() {
+  if (!contentEl) return;
+  contentEl.innerHTML = "";
+
+  var available = _mcpServers.filter(function (s) { return s.extensionEnabled; });
+  var hasServers = available.length > 0;
+  var allDone = _extensionConnected && _nativeHostConnected && hasServers;
+
+  // --- All setup complete: skip wizard, show server list only ---
+  if (allDone) {
+    var desc = document.createElement("p");
+    desc.className = "mcp-desc";
+    desc.textContent = "Toggle which MCP servers this project can use.";
+    contentEl.appendChild(desc);
+
+    for (var i = 0; i < available.length; i++) {
+      var server = available[i];
+      var row = document.createElement("label");
+      row.className = "mcp-server-row";
+
+      var cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.checked = server.projectEnabled;
+      cb.dataset.serverName = server.name;
+      cb.addEventListener("change", onToggle);
+
+      var info = document.createElement("div");
+      info.className = "mcp-server-info";
+
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "mcp-server-name";
+      nameSpan.textContent = server.name;
+
+      var meta = document.createElement("span");
+      meta.className = "mcp-server-meta";
+      meta.textContent = server.toolCount + " tool" + (server.toolCount === 1 ? "" : "s");
+      if (server.transport === "http") meta.textContent += "  \u00B7  HTTP";
+
+      info.appendChild(nameSpan);
+      info.appendChild(meta);
+
+      row.appendChild(cb);
+      row.appendChild(info);
+      contentEl.appendChild(row);
+    }
+    refreshIcons(contentEl);
+    return;
+  }
+
+  // --- Setup incomplete: show step wizard ---
+  var steps = document.createElement("div");
+  steps.className = "mcp-steps";
+
+  // Step 1: Chrome Extension
+  var step1Done = _extensionConnected;
+  steps.appendChild(renderStep({
+    num: 1,
+    done: step1Done,
+    title: "Install Chrome Extension",
+    desc: step1Done
+      ? "Connected"
+      : "Required to bridge your browser with Clay.",
+    action: step1Done ? null : {
+      label: "Setup Extension",
+      icon: "puzzle",
+      onClick: function () {
+        closeMcpModal();
+        setTimeout(function () {
+          var extPill = document.getElementById("ext-pill");
+          if (extPill) extPill.click();
+        }, 100);
+      }
+    }
+  }));
+
+  // Step 2: Native Host (only needed for remote users)
+  var step2Done = _extensionConnected && _nativeHostConnected;
+  var installCmd = _extensionId
+    ? "npx clay-mcp-bridge install " + _extensionId
+    : "npx clay-mcp-bridge install <extension-id>";
+  steps.appendChild(renderStep({
+    num: 2,
+    done: step2Done,
+    title: "Install MCP Bridge",
+    desc: step2Done
+      ? "Connected"
+      : "Run in your terminal, then restart your browser.",
+    disabled: !step1Done,
+    copyCmd: (!step2Done && step1Done) ? installCmd : null
+  }));
+
+  // Step 3: Configure MCP Servers
+  var step3Done = hasServers;
+  var step3Desc = "";
+  if (step3Done) {
+    step3Desc = available.length + " server" + (available.length === 1 ? "" : "s") + " enabled";
+  } else if (step2Done) {
+    step3Desc = "Add servers from the Clay Chrome Extension popup using the + button, or import an existing config file.";
+  } else {
+    step3Desc = "Configure after installing the bridge.";
+  }
+  steps.appendChild(renderStep({
+    num: 3,
+    done: step3Done,
+    title: "Add MCP Servers",
+    desc: step3Desc,
+    disabled: !step2Done,
+    action: (!step3Done && step2Done) ? {
+      label: "Open Extension popup to add servers",
+      icon: "puzzle",
+      onClick: function () {
+        closeMcpModal();
+        setTimeout(function () {
+          var extPill = document.getElementById("ext-pill");
+          if (extPill) extPill.click();
+        }, 100);
+      }
+    } : null
+  }));
+
+  contentEl.appendChild(steps);
+  refreshIcons(contentEl);
+}
+
+function renderStep(opts) {
+  var el = document.createElement("div");
+  el.className = "mcp-step" + (opts.done ? " done" : "") + (opts.disabled ? " disabled" : "");
+
+  var icon = opts.done ? "check-circle-2" : "circle";
+  var iconClass = opts.done ? "mcp-step-icon done" : "mcp-step-icon";
+
+  var html = '<div class="' + iconClass + '"><i data-lucide="' + icon + '"></i></div>'
+    + '<div class="mcp-step-body">'
+    + '<div class="mcp-step-title">' + opts.title + '</div>'
+    + '<div class="mcp-step-desc">' + opts.desc + '</div>';
+
+  if (opts.copyCmd) {
+    html += '<div class="mcp-install-cmd-row">'
+      + '<code class="mcp-install-cmd">' + opts.copyCmd + '</code>'
+      + '<button class="mcp-install-copy-btn" type="button"><i data-lucide="copy"></i></button>'
+      + '</div>';
+  }
+
+  html += '</div>';
+  el.innerHTML = html;
+
+  if (opts.action && !opts.disabled) {
+    var btn = document.createElement("button");
+    btn.className = "mcp-ext-setup-btn";
+    btn.type = "button";
+    btn.innerHTML = '<i data-lucide="' + opts.action.icon + '"></i> ' + opts.action.label;
+    btn.addEventListener("click", opts.action.onClick);
+    el.querySelector(".mcp-step-body").appendChild(btn);
+  }
+
+  if (opts.copyCmd) {
+    var copyBtn = el.querySelector(".mcp-install-copy-btn");
+    copyBtn.addEventListener("click", function () {
+      navigator.clipboard.writeText(opts.copyCmd).then(function () {
+        copyBtn.innerHTML = '<i data-lucide="check"></i>';
+        refreshIcons(copyBtn);
+        setTimeout(function () {
+          copyBtn.innerHTML = '<i data-lucide="copy"></i>';
+          refreshIcons(copyBtn);
+        }, 1500);
+      });
+    });
+  }
+
+  return el;
+}
+
+var _toggleCooldown = false;
+
+function onToggle(e) {
+  var name = e.target.dataset.serverName;
+  var enabled = e.target.checked;
+
+  // Optimistic update: apply locally so incoming broadcasts don't revert
+  for (var i = 0; i < _mcpServers.length; i++) {
+    if (_mcpServers[i].name === name) {
+      _mcpServers[i].projectEnabled = enabled;
+      break;
+    }
+  }
+
+  // Suppress re-renders from broadcasts for a short window
+  _toggleCooldown = true;
+  setTimeout(function () { _toggleCooldown = false; }, 1000);
+
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({
+      type: "mcp_toggle_server",
+      name: name,
+      enabled: enabled,
+    }));
+  }
+}