clay-server 3.3.2-beta.2 → 3.4.0-beta.1

package/lib/debate-mcp-server.js

@@ -42,6 +42,7 @@ function getToolDefs(onPropose) {
       format: { type: "string", description: "Debate format, e.g. free_discussion (default)" },
       context: { type: "string", description: "Key context from the conversation that panelists should know" },
       specialRequests: { type: "string", description: "Special instructions for the debate, or empty" },
+      moderatorId: { type: "string", description: "Mate ID for the moderator. Required when proposing from a normal project; Mate sessions moderate their own proposals." },
       panelists: { type: "string", description: "JSON array of panelist objects: [{\"mateId\": \"<UUID>\", \"role\": \"perspective\", \"brief\": \"guidance\"}]" },
     }, ["topic", "panelists"]),
     handler: function (args) {
@@ -51,6 +52,13 @@ function getToolDefs(onPropose) {
       } catch (e) {
         return Promise.resolve({
           content: [{ type: "text", text: "Error: panelists must be a valid JSON array. Got: " + (args.panelists || "").substring(0, 100) }],
+          isError: true,
+        });
+      }
+      if (!Array.isArray(panelists)) {
+        return Promise.resolve({
+          content: [{ type: "text", text: "Error: panelists must be a JSON array." }],
+          isError: true,
         });
       }
 
@@ -59,6 +67,7 @@ function getToolDefs(onPropose) {
         format: args.format || "free_discussion",
         context: args.context || "",
         specialRequests: args.specialRequests || null,
+        moderatorId: args.moderatorId || null,
         panelists: panelists,
       };
 
@@ -66,6 +75,12 @@ function getToolDefs(onPropose) {
         if (result && result.action === "start") {
           return { content: [{ type: "text", text: "Debate approved and started. Topic: " + briefData.topic }] };
         }
+        if (result && result.action === "error") {
+          return {
+            content: [{ type: "text", text: "Error: " + (result.error || "The debate could not be started.") }],
+            isError: true,
+          };
+        }
         return { content: [{ type: "text", text: "Debate proposal was cancelled by the user." }] };
       });
     }

package/lib/project-connection.js

@@ -6,6 +6,22 @@ var emailAccounts = require("./email-accounts");
 var { getCodexConfig } = require("./codex-defaults");
 var yoke = require("./yoke");
 
+function dispatchMessageSafely(handleMessage, sendTo, slug, ws, msg) {
+  try {
+    handleMessage(ws, msg);
+    return true;
+  } catch (err) {
+    var detail = err && err.stack ? err.stack : (err && err.message ? err.message : String(err));
+    console.error("[project-connection] Message handler failed for " + slug + "/" + (msg.type || "unknown") + ":", detail);
+    try {
+      sendTo(ws, { type: "error", text: "The request could not be completed. Check the server logs for details." });
+    } catch (sendErr) {
+      console.error("[project-connection] Failed to send message error for " + slug + ":", sendErr && sendErr.message ? sendErr.message : sendErr);
+    }
+    return false;
+  }
+}
+
 /**
  * Attach connection/disconnection handlers to a project context.
  *
@@ -286,7 +302,7 @@ function attachConnection(ctx) {
     ws.on("message", function (raw) {
       var msg;
       try { msg = JSON.parse(raw.toString()); } catch (e) { return; }
-      handleMessage(ws, msg);
+      dispatchMessageSafely(handleMessage, sendTo, slug, ws, msg);
     });
 
     ws.on("close", function () {
@@ -317,4 +333,4 @@ function attachConnection(ctx) {
   };
 }
 
-module.exports = { attachConnection: attachConnection };
+module.exports = { attachConnection: attachConnection, dispatchMessageSafely: dispatchMessageSafely };

package/lib/project-debate-proposal.js

@@ -0,0 +1,138 @@
+var path = require("path");
+var debateMcp = require("./debate-mcp-server");
+
+function attachDebateProposal(ctx) {
+  var pendingProposals = {};
+
+  function createMcpServer(adapter, boundSession) {
+    var toolDefs = debateMcp.getToolDefs(function onPropose(briefData) {
+      if (!boundSession) {
+        return Promise.resolve({
+          action: "error",
+          error: "Debate proposals require an active Clay session.",
+        });
+      }
+
+      return new Promise(function (resolve) {
+        var proposalId = "dp_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8);
+        briefData.proposalId = proposalId;
+        pendingProposals[proposalId] = {
+          resolve: resolve,
+          briefData: briefData,
+          session: boundSession,
+        };
+      });
+    });
+
+    return adapter.createToolServer({
+      name: "clay-debate",
+      version: "1.0.0",
+      tools: toolDefs,
+    });
+  }
+
+  function findPendingProposal(ws, msg) {
+    var keys = Object.keys(pendingProposals);
+    if (keys.length === 0) return null;
+    var key = msg.proposalId || null;
+    if (!key && ws && Number.isInteger(ws._clayActiveSession)) {
+      for (var i = keys.length - 1; i >= 0; i--) {
+        var candidate = pendingProposals[keys[i]];
+        if (candidate.session && candidate.session.localId === ws._clayActiveSession) {
+          key = keys[i];
+          break;
+        }
+      }
+    }
+    if (!key) key = keys[keys.length - 1];
+    var pending = pendingProposals[key];
+    if (!pending) return null;
+    delete pendingProposals[key];
+    return pending;
+  }
+
+  function rejectProposal(ws, pending, error) {
+    try {
+      ctx.sendTo(ws, { type: "debate_error", error: error });
+    } catch (sendErr) {
+      console.error("[debate] Failed to send proposal error:", sendErr && sendErr.message ? sendErr.message : sendErr);
+    }
+    pending.resolve({ action: "error", error: error });
+  }
+
+  function validateProposal(ws, pending) {
+    var briefData = pending.briefData;
+    var moderatorId = ctx.isMate ? path.basename(ctx.cwd) : briefData.moderatorId;
+    if (!moderatorId || typeof moderatorId !== "string") {
+      return { error: "A valid Mate moderator is required to start this debate." };
+    }
+
+    var userId = ws && ws._clayUser
+      ? ws._clayUser.id
+      : (pending.session.ownerId || ctx.getProjectOwnerId() || null);
+    var mateCtx = ctx.buildMateCtx(userId);
+    if (!ctx.getMate(mateCtx, moderatorId)) {
+      return { error: "The selected debate moderator is unavailable." };
+    }
+
+    var panelists = briefData.panelists;
+    if (!Array.isArray(panelists) || panelists.length === 0) {
+      return { error: "At least one valid panelist is required to start this debate." };
+    }
+
+    var seen = {};
+    for (var i = 0; i < panelists.length; i++) {
+      var panelistId = panelists[i] && panelists[i].mateId;
+      if (!panelistId || typeof panelistId !== "string" || !ctx.getMate(mateCtx, panelistId)) {
+        return { error: "One or more selected debate panelists are unavailable." };
+      }
+      if (panelistId === moderatorId) {
+        return { error: "The debate moderator cannot also be a panelist." };
+      }
+      if (seen[panelistId]) {
+        return { error: "The same Mate cannot be added to a debate more than once." };
+      }
+      seen[panelistId] = true;
+    }
+
+    return { moderatorId: moderatorId };
+  }
+
+  function handleMessage(ws, msg) {
+    if (msg.type !== "debate_proposal_response") return false;
+
+    var pending = findPendingProposal(ws, msg);
+    if (!pending) return true;
+    if (msg.action !== "start") {
+      pending.resolve({ action: "cancel" });
+      return true;
+    }
+
+    var validated = validateProposal(ws, pending);
+    if (validated.error) {
+      rejectProposal(ws, pending, validated.error);
+      return true;
+    }
+
+    try {
+      var result = ctx.startDebate(pending.session, pending.briefData, validated.moderatorId, ws);
+      if (result && result.error) {
+        rejectProposal(ws, pending, result.error);
+        return true;
+      }
+      pending.resolve({ action: "start" });
+    } catch (err) {
+      var detail = err && err.message ? err.message : String(err);
+      console.error("[debate] Failed to start approved proposal:", detail);
+      rejectProposal(ws, pending, "The debate could not be started. Check the server logs for details.");
+    }
+    return true;
+  }
+
+  return {
+    createMcpServer: createMcpServer,
+    handleMessage: handleMessage,
+  };
+}
+
+module.exports = { attachDebateProposal: attachDebateProposal };

package/lib/project-debate.js

@@ -1742,6 +1742,7 @@ function attachDebate(ctx) {
 
     console.log("[debate] MCP debate approved. Topic:", debate.topic, "debateId:", debateId);
     startDebateLive(session);
+    return { ok: true };
   }
 
   // --- Public API ---

package/lib/project-file-watch.js

@@ -21,12 +21,22 @@ function attachFileWatch(ctx) {
   // one browser tab silently replace another tab's live preview subscription.
   var fileWatchers = new Map();
 
+  function settleFileWatchReady(entry, ready) {
+    if (!entry || !entry.resolveReady) return;
+    var resolve = entry.resolveReady;
+    entry.resolveReady = null;
+    resolve(ready);
+  }
+
   function closeFileWatch(key) {
     var entry = fileWatchers.get(key);
     if (!entry) return;
     clearTimeout(entry.debounce);
+    if (entry.reconcile) clearImmediate(entry.reconcile);
+    if (entry.pollTimer) clearInterval(entry.pollTimer);
     try { entry.watcher.close(); } catch (e) {}
     fileWatchers.delete(key);
+    settleFileWatchReady(entry, false);
   }
 
   function sendFileChanged(client, message) {
@@ -37,6 +47,36 @@ function attachFileWatch(ctx) {
     }
   }
 
+  function readFileSnapshot(absPath) {
+    var stat = fs.statSync(absPath);
+    var ext = path.extname(absPath).toLowerCase();
+    if (stat.size > FS_MAX_SIZE || BINARY_EXTS.has(ext)) return null;
+    return { content: fs.readFileSync(absPath, "utf8"), size: stat.size };
+  }
+
+  function publishFileChanged(key, client, relPath, absPath) {
+    var latest = fileWatchers.get(key);
+    if (!latest || latest.relPath !== relPath) return;
+    try {
+      var snapshot = readFileSnapshot(absPath);
+      if (!snapshot) return;
+      if (latest.hasSnapshot && latest.content === snapshot.content && latest.size === snapshot.size) return;
+      latest.hasSnapshot = true;
+      latest.content = snapshot.content;
+      latest.size = snapshot.size;
+      sendFileChanged(client, {
+        type: "fs_file_changed",
+        path: relPath,
+        content: snapshot.content,
+        size: snapshot.size,
+      });
+    } catch (e) {
+      // Atomic saves can briefly remove the destination path between rename
+      // events. Keep the parent watcher alive for the next event.
+      if (e.code !== "ENOENT") closeFileWatch(key);
+    }
+  }
+
   function startFileWatch(client, relPath) {
     // Preserve the old single-argument API for callers outside the websocket
     // file browser. They share one legacy subscription.
@@ -45,10 +85,10 @@ function attachFileWatch(ctx) {
       client = null;
     }
     var absPath = safePath(cwd, relPath);
-    if (!absPath) return;
+    if (!absPath) return Promise.resolve(false);
     var key = client || "_legacy";
     var existing = fileWatchers.get(key);
-    if (existing && existing.relPath === relPath) return;
+    if (existing && existing.relPath === relPath) return existing.ready;
     closeFileWatch(key);
 
     // Watch the parent directory rather than the file inode. Editors and agent
@@ -56,6 +96,8 @@ function attachFileWatch(ctx) {
     // misses later edits even though the path still exists.
     var parentPath = path.dirname(absPath);
     var baseName = path.basename(absPath);
+    var initialSnapshot = null;
+    try { initialSnapshot = readFileSnapshot(absPath); } catch (e) {}
     try {
       var watcher = fs.watch(parentPath, function (eventType, filename) {
         if (filename && String(filename) !== baseName) return;
@@ -63,25 +105,44 @@ function attachFileWatch(ctx) {
         if (!active || active.relPath !== relPath) return;
         clearTimeout(active.debounce);
         active.debounce = setTimeout(function () {
-          var latest = fileWatchers.get(key);
-          if (!latest || latest.relPath !== relPath) return;
-          try {
-            var stat = fs.statSync(absPath);
-            var ext = path.extname(absPath).toLowerCase();
-            if (stat.size > FS_MAX_SIZE || BINARY_EXTS.has(ext)) return;
-            var content = fs.readFileSync(absPath, "utf8");
-            sendFileChanged(client, { type: "fs_file_changed", path: relPath, content: content, size: stat.size });
-          } catch (e) {
-            // Atomic saves can briefly remove the destination path between
-            // rename events. Keep the parent watcher alive for the next event.
-            if (e.code !== "ENOENT") closeFileWatch(key);
-          }
+          publishFileChanged(key, client, relPath, absPath);
         }, 200);
       });
-      fileWatchers.set(key, { watcher: watcher, relPath: relPath, debounce: null });
+      var resolveReady = null;
+      var ready = new Promise(function (resolve) { resolveReady = resolve; });
+      var entry = {
+        watcher: watcher,
+        relPath: relPath,
+        debounce: null,
+        reconcile: null,
+        pollTimer: null,
+        ready: ready,
+        resolveReady: resolveReady,
+        hasSnapshot: !!initialSnapshot,
+        content: initialSnapshot ? initialSnapshot.content : null,
+        size: initialSnapshot ? initialSnapshot.size : null,
+      };
+      fileWatchers.set(key, entry);
+      // Directory events are the low-latency path, but macOS can coalesce or
+      // drop them under load. Periodic content reconciliation is the source of
+      // truth and also survives atomic replacements with identical metadata.
+      entry.pollTimer = setInterval(function () {
+        publishFileChanged(key, client, relPath, absPath);
+      }, 1000);
+      // fs.watch has no readiness event. Reconcile once on the next event-loop
+      // turn so a change between the initial read and native watcher activation
+      // cannot leave the browser showing stale content.
+      entry.reconcile = setImmediate(function () {
+        var active = fileWatchers.get(key);
+        if (active) active.reconcile = null;
+        publishFileChanged(key, client, relPath, absPath);
+        if (fileWatchers.get(key) === entry) settleFileWatchReady(entry, true);
+      });
       watcher.on("error", function () { closeFileWatch(key); });
+      return ready;
     } catch (e) {
       closeFileWatch(key);
+      return Promise.resolve(false);
     }
   }
 

package/lib/project.js

@@ -16,6 +16,7 @@ var matesModule = require("./mates");
 var sessionSearch = require("./session-search");
 var userPresence = require("./user-presence");
 var { attachDebate } = require("./project-debate");
+var { attachDebateProposal } = require("./project-debate-proposal");
 var { attachMemory } = require("./project-memory");
 var { attachMateInteraction } = require("./project-mate-interaction");
 var { attachUserMention } = require("./project-user-mention");
@@ -247,7 +248,6 @@ function createProjectContext(opts) {
   var clients = new Set();
 
   // --- Browser extension state (shared mutable object) ---
-  var _pendingDebateProposals = {}; // proposalId -> { resolve, briefData }
   var _extToken = crypto.randomUUID(); // Auth token for MCP server bridge
   var browserState = {
     _browserTabList: {},
@@ -568,6 +568,19 @@ function createProjectContext(opts) {
     getLinuxUserForSession: getLinuxUserForSession,
     getPairToolDefs: function (boundSession) { return _sessionPair.getToolDefs(boundSession); },
   });
+  var _debate = null;
+  var _debateProposal = attachDebateProposal({
+    cwd: cwd,
+    isMate: isMate,
+    sendTo: sendTo,
+    buildMateCtx: matesModule.buildMateCtx,
+    getMate: matesModule.getMate,
+    getProjectOwnerId: function () { return projectOwnerId; },
+    startDebate: function (session, briefData, moderatorId, ws) {
+      if (!_debate) return { error: "The debate engine is unavailable." };
+      return _debate.handleMcpDebateApproval(session, briefData, moderatorId, ws);
+    },
+  });
 
   // --- MCP tool servers (created via YOKE adapter) ---
   var mcpServers = (function () {
@@ -605,20 +618,7 @@ function createProjectContext(opts) {
 
     // Debate MCP server (available to both mates and main project)
     try {
-      var debateMcp = require("./debate-mcp-server");
-      var debateToolDefs = debateMcp.getToolDefs(function onPropose(briefData) {
-        return new Promise(function (resolve) {
-          var proposalId = "dp_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8);
-          briefData.proposalId = proposalId;
-          _pendingDebateProposals[proposalId] = {
-            resolve: resolve,
-            briefData: briefData,
-          };
-          // The SDK sends tool_executing with briefData as input.
-          // Client renders the debate brief card when it sees propose_debate.
-        });
-      });
-      var debateMcpConfig = adapter.createToolServer({ name: "clay-debate", version: "1.0.0", tools: debateToolDefs });
+      var debateMcpConfig = _debateProposal.createMcpServer(adapter, null);
       if (debateMcpConfig) servers[debateMcpConfig.name || "clay-debate"] = debateMcpConfig;
     } catch (e) {
       console.error("[project] Failed to create debate MCP server:", e.message);
@@ -807,6 +807,15 @@ function createProjectContext(opts) {
         }
         continue;
       }
+      if (name === "clay-debate" && forSession) {
+        try {
+          var boundDebate = _debateProposal.createMcpServer(adapter, forSession);
+          if (boundDebate) { filtered[name] = boundDebate; hasAny = true; }
+        } catch (e) {
+          console.error("[project] Failed to bind debate MCP server:", e.message);
+        }
+        continue;
+      }
       filtered[name] = mcpServers[name];
       hasAny = true;
     }
@@ -1139,28 +1148,7 @@ function createProjectContext(opts) {
       handleDebateConfirmBrief(ws);
       return;
     }
-    if (msg.type === "debate_proposal_response") {
-      // Match the most recent pending proposal (proposalId may not be
-      // available on the client since it's not part of the tool input)
-      var _dpKeys = Object.keys(_pendingDebateProposals);
-      if (_dpKeys.length === 0) return;
-      var _dpKey = msg.proposalId || _dpKeys[_dpKeys.length - 1];
-      var pending = _pendingDebateProposals[_dpKey];
-      if (!pending) return;
-      delete _pendingDebateProposals[_dpKey];
-      if (msg.action === "start") {
-        // Set up debate state on the session, then transition to live
-        var _dpSession = getSessionForWs(ws);
-        if (_dpSession) {
-          var _dpMateId = isMate ? path.basename(cwd) : null;
-          handleMcpDebateApproval(_dpSession, pending.briefData, _dpMateId, ws);
-        }
-        pending.resolve({ action: "start" });
-      } else {
-        pending.resolve({ action: "cancel" });
-      }
-      return;
-    }
+    if (_debateProposal.handleMessage(ws, msg)) return;
     if (msg.type === "debate_user_floor_response") {
       handleDebateUserFloorResponse(ws, msg);
       return;
@@ -1268,7 +1256,7 @@ function createProjectContext(opts) {
   var handleUserMention = _userMention.handleUserMention;
 
   // --- Debate engine (delegated to project-debate.js) ---
-  var _debate = attachDebate({
+  _debate = attachDebate({
     cwd: cwd,
     slug: slug,
     isMate: isMate,
@@ -1297,7 +1285,6 @@ function createProjectContext(opts) {
   var handleDebateUserFloorResponse = _debate.handleDebateUserFloorResponse;
   var restoreDebateState = _debate.restoreDebateState;
   var checkForDmDebateBrief = _debate.checkForDmDebateBrief;
-  var handleMcpDebateApproval = _debate.handleMcpDebateApproval;
 
   // --- Session presence (who is viewing which session) ---
   function broadcastPresence() {
@@ -1547,7 +1534,7 @@ function createProjectContext(opts) {
         // 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();
+        var localMcp = getLocalMcpServers(boundSession);
         if (localMcp) {
           var inAppNames = Object.keys(localMcp);
           for (var i = 0; i < inAppNames.length; i++) {
@@ -1599,7 +1586,7 @@ function createProjectContext(opts) {
         }
         if (sessionOnly) return Promise.reject(new Error("Session tool not found: " + serverName + "/" + toolName));
         // Try in-app servers first (gated by extension connectivity for clay-browser).
-        var localMcp = getLocalMcpServers();
+        var localMcp = getLocalMcpServers(boundSession);
         if (localMcp && localMcp[serverName]) {
           var server = localMcp[serverName];
           if (server.instance && server.instance._registeredTools && server.instance._registeredTools[toolName]) {

package/lib/public/css/input.css

@@ -799,6 +799,10 @@
 .vendor-toggle-label {
   pointer-events: none;
 }
+@media (min-width: 901px) {
+  .vendor-toggle-btn:not(.active) .vendor-toggle-label { display: none; }
+  .vendor-toggle-btn:not(.active) { padding: 0 8px; }
+}
 @media (max-width: 900px) {
   .vendor-toggle-label { display: none; }
   .vendor-toggle-btn { padding: 0 8px; }

package/lib/public/css/mates.css

@@ -682,6 +682,7 @@
 .mate-vendor-label {
   pointer-events: none;
 }
+.mate-vendor-btn:not(.active) .mate-vendor-label { display: none; }
 
 /* Collapse button inside mate header: white to match header style */
 .mate-sidebar-header .sidebar-collapse-btn {

package/lib/public/gemini-avatar.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Gemini CLI">
+  <defs>
+    <linearGradient id="g" x1="8" y1="56" x2="56" y2="8" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#4f7cff"/>
+      <stop offset="0.5" stop-color="#9b5cff"/>
+      <stop offset="1" stop-color="#ff65b3"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="#10131d"/>
+  <path d="M32 8c2.3 14.1 9.9 21.7 24 24-14.1 2.3-21.7 9.9-24 24-2.3-14.1-9.9-21.7-24-24 14.1-2.3 21.7-9.9 24-24Z" fill="url(#g)"/>
+</svg>

package/lib/public/index.html

@@ -527,6 +527,14 @@
                   <img src="/codex-avatar.png" class="vendor-toggle-icon" alt="Codex">
                   <span class="vendor-toggle-label">Codex</span>
                 </button>
+                <button id="vendor-btn-gemini" class="vendor-toggle-btn" data-vendor="gemini">
+                  <img src="/gemini-avatar.svg" class="vendor-toggle-icon" alt="Gemini">
+                  <span class="vendor-toggle-label">Gemini CLI</span>
+                </button>
+                <button id="vendor-btn-opencode" class="vendor-toggle-btn" data-vendor="opencode">
+                  <img src="/opencode-avatar.svg" class="vendor-toggle-icon" alt="OpenCode">
+                  <span class="vendor-toggle-label">OpenCode</span>
+                </button>
                 <button id="vendor-btn-kiro" class="vendor-toggle-btn" data-vendor="kiro">
                   <img src="/kiro-avatar.svg" class="vendor-toggle-icon" alt="Kiro">
                   <span class="vendor-toggle-label">Kiro CLI</span>

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

@@ -89,6 +89,8 @@ var EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"];
 var EFFORT_LEVELS_BY_VENDOR = {
   claude: ["low", "medium", "high", "xhigh", "max"],
   codex: ["minimal", "low", "medium", "high", "xhigh"],
+  gemini: [],
+  opencode: [],
   kiro: ["low", "medium", "high", "xhigh", "max"],
 };
 var THINKING_OPTIONS = ["disabled", "adaptive", "budget"];
@@ -441,8 +443,16 @@ export function initPanels() {
   var vendorToggleWrap = $("vendor-toggle-wrap");
   var vendorBtnClaude = $("vendor-btn-claude");
   var vendorBtnCodex = $("vendor-btn-codex");
+  var vendorBtnGemini = $("vendor-btn-gemini");
+  var vendorBtnOpenCode = $("vendor-btn-opencode");
   var vendorBtnKiro = $("vendor-btn-kiro");
-  var vendorBtns = { claude: vendorBtnClaude, codex: vendorBtnCodex, kiro: vendorBtnKiro };
+  var vendorBtns = {
+    claude: vendorBtnClaude,
+    codex: vendorBtnCodex,
+    gemini: vendorBtnGemini,
+    opencode: vendorBtnOpenCode,
+    kiro: vendorBtnKiro,
+  };
 
   function updateVendorToggle() {
     var installed = store.get('installedVendors') || [];
@@ -471,6 +481,8 @@ export function initPanels() {
 
   if (vendorBtnClaude) vendorBtnClaude.addEventListener("click", function() { onVendorClick("claude"); });
   if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
+  if (vendorBtnGemini) vendorBtnGemini.addEventListener("click", function() { onVendorClick("gemini"); });
+  if (vendorBtnOpenCode) vendorBtnOpenCode.addEventListener("click", function() { onVendorClick("opencode"); });
   if (vendorBtnKiro) vendorBtnKiro.addEventListener("click", function() { onVendorClick("kiro"); });
 
   // --- Reactive UI sync ---

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

@@ -19,21 +19,27 @@ import { getScheduledMsgEl } from './app-rate-limit.js';
 export var VENDOR_AVATARS = {
   claude: "/claude-code-avatar.png",
   codex: "/codex-avatar.png",
+  gemini: "/gemini-avatar.svg",
+  opencode: "/opencode-avatar.svg",
   kiro: "/kiro-avatar.svg",
 };
 export var VENDOR_NAMES = {
   claude: "Claude Code",
   codex: "Codex",
+  gemini: "Gemini CLI",
+  opencode: "OpenCode",
   kiro: "Kiro CLI",
 };
 // Display order for every vendor Clay knows about, installed or not. Pickers
 // render the full list so a missing CLI reads as "not installed yet" rather
 // than "Clay doesn't support it".
-export var VENDOR_ORDER = ["claude", "codex", "kiro"];
+export var VENDOR_ORDER = ["claude", "codex", "gemini", "opencode", "kiro"];
 // Where to send the user when they pick a vendor whose CLI isn't installed.
 export var VENDOR_HOMEPAGES = {
   claude: "https://claude.com/product/claude-code",
   codex: "https://openai.com/codex/",
+  gemini: "https://github.com/google-gemini/gemini-cli",
+  opencode: "https://opencode.ai/",
   kiro: "https://kiro.dev/",
 };
 var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";

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

@@ -149,9 +149,15 @@ export function showMateSidebar(mateId, mateData) {
   if (mateVendorWrap) {
     var available = store.get('availableVendors') || [];
     var mateVendor = mateData.vendor || "claude";
-    var vendorIcons = { claude: "/claude-code-avatar.png", codex: "/codex-avatar.png", kiro: "/kiro-avatar.svg" };
-    var vendorNames = { claude: "Claude Code", codex: "Codex", kiro: "Kiro CLI" };
-    var vendorKeys = ["claude", "codex", "kiro"];
+    var vendorIcons = {
+      claude: "/claude-code-avatar.png",
+      codex: "/codex-avatar.png",
+      gemini: "/gemini-avatar.svg",
+      opencode: "/opencode-avatar.svg",
+      kiro: "/kiro-avatar.svg",
+    };
+    var vendorNames = { claude: "Claude Code", codex: "Codex", gemini: "Gemini CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
+    var vendorKeys = ["claude", "codex", "gemini", "opencode", "kiro"];
     mateVendorWrap.innerHTML = "";
     for (var vi = 0; vi < vendorKeys.length; vi++) {
       var vk = vendorKeys[vi];

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

@@ -457,7 +457,13 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       // Tooltip
       var displayName = mp.displayName || mate.name || "New Mate";
       var mateVendor = mate.vendor || "claude";
-      var vendorLabels = { claude: "Claude Code", codex: "OpenAI Codex", kiro: "Kiro CLI" };
+      var vendorLabels = {
+        claude: "Claude Code",
+        codex: "OpenAI Codex",
+        gemini: "Gemini CLI",
+        opencode: "OpenCode",
+        kiro: "Kiro CLI",
+      };
       el.addEventListener("mouseenter", function () {
         var html = '<div style="font-weight:600">' + escapeHtml(displayName);
         if (mate.primary) {

package/lib/public/modules/tools.js

@@ -814,7 +814,13 @@ function resolvePermissionIdentity(mateId, vendor) {
     }
   }
   // Project chat: use vendor name and avatar
-  var vendorAvatars = { claude: "/claude-code-avatar.png", codex: "/codex-avatar.png", kiro: "/kiro-avatar.svg" };
+  var vendorAvatars = {
+    claude: "/claude-code-avatar.png",
+    codex: "/codex-avatar.png",
+    gemini: "/gemini-avatar.svg",
+    opencode: "/opencode-avatar.svg",
+    kiro: "/kiro-avatar.svg",
+  };
   var vendorName = (vendor && VENDOR_NAMES[vendor]) || VENDOR_NAMES.claude;
   return {
     name: vendorName,