clay-server 2.34.0-beta.3 → 2.34.0-beta.5

package/lib/ask-user-mcp-server.js

@@ -0,0 +1,120 @@
+// Ask User MCP Server for Clay
+// Provides a mate-only ask_user_questions tool that reuses the existing
+// AskUserQuestion UI and ask_user_response flow.
+
+var z;
+try { z = require("zod"); } catch (e) { z = null; }
+
+// Returns a Zod "shape" object (property -> zod field) matching what
+// Claude SDK's `sdk.tool()` expects. Do NOT wrap in z.object() here —
+// the SDK does that internally.
+//
+// The schema is deliberately tight: options are required (2-6), each with
+// a label and a short description. This pushes Codex (which treats the
+// schema as a loose hint) toward producing well-structured multiple-choice
+// cards instead of a bare "Other..." text field.
+function buildQuestionShape() {
+  if (!z) return {};
+
+  var optionSchema = z.object({
+    label: z.string().min(1).max(60)
+      .describe("Short button label, 1-6 words. Shown as the primary option text."),
+    description: z.string().min(1).max(160)
+      .describe("One-line clarifier shown under the label. Concrete example or scope."),
+    markdown: z.string().optional()
+      .describe("Optional longer markdown body shown on expand. Use sparingly."),
+  }).passthrough();
+
+  var questionSchema = z.object({
+    header: z.string().min(1).max(40)
+      .describe("Short ALL-CAPS-ish section header above the question (e.g. 'FIRST THINGS FIRST', 'SCOPE'). Gives the user context for this step."),
+    question: z.string().min(1)
+      .describe("The actual question in natural spoken tone. Be specific, not generic."),
+    multiSelect: z.boolean().optional()
+      .describe("Set true only when multiple answers genuinely make sense. Default false."),
+    options: z.array(optionSchema).min(2).max(6)
+      .describe("Concrete options. Preferred count is 4; acceptable range is 2-6. FOUR is the target. Do NOT default to 3 out of habit. If you can only think of 3, push yourself: add a scope variant, edge case, or 'combined' option as the 4th. Only drop below 4 when the answer space is genuinely narrower (e.g. yes/no/unsure). Never include an 'Other' option yourself (the UI renders one automatically)."),
+  }).passthrough();
+
+  return {
+    questions: z.array(questionSchema).min(1).max(3)
+      .describe("One to three question objects to show together as a card. Prefer ONE focused question per call."),
+  };
+}
+
+var TOOL_DESCRIPTION = [
+  "Ask the user a structured multiple-choice question. Renders as a card with a header, the question, 2-6 clickable option buttons, and an always-present 'Other...' free-text field.",
+  "",
+  "WHEN TO USE:",
+  "- Interviewing the user at mate setup, or whenever you need to narrow scope before acting.",
+  "- Any branching decision where 2-6 concrete choices cover most of the space.",
+  "",
+  "REQUIRED STRUCTURE (all fields matter, do not skip):",
+  "- header: short section label, like 'FIRST THINGS FIRST' or 'SCOPE'. Gives context.",
+  "- question: one specific question in natural tone. Avoid generic 'how can I help?'.",
+  "- options: ALWAYS provide FOUR options by default. Acceptable range is 4-6; only drop to 3 if the answer space is genuinely binary-plus-one (rare). Each option has a short label (1-6 words) AND a one-line description giving a concrete example or scope. The UI already renders an 'Other...' text field, so you never need to include an 'Other' option yourself.",
+  "- multiSelect: omit or false unless multiple answers clearly apply.",
+  "",
+  "ON OPTION COUNT (IMPORTANT):",
+  "- Default to 4 options. Not 3. Models tend to gravitate to 3 because it feels tidy; resist that.",
+  "- If you're about to produce 3 options, stop and think: is there a fourth axis you're missing? A scope variant? A 'both' or 'neither'? A more niche case? Add it.",
+  "- 3 is only acceptable when the fourth option would be truly degenerate (e.g. yes/no/unsure).",
+  "- 5 or 6 is fine when the space is wide; don't cram.",
+  "",
+  "GOOD EXAMPLE:",
+  '  { header: "FIRST THINGS FIRST",',
+  '    question: "\'Language\' is broad, what do you actually want help with?",',
+  '    options: [',
+  '      { label: "A new language from scratch", description: "Pick up a language you don\'t speak yet (e.g. Japanese, Spanish)" },',
+  '      { label: "Sharpen English",             description: "Level up your English, writing, speaking, nuance, executive communication" },',
+  '      { label: "Sharpen Korean",              description: "Polish your Korean, writing style, formal register, etc." },',
+  '      { label: "Teach me how to teach",       description: "Help you teach language to others, like Elyse or team members" }',
+  "    ] }",
+  "",
+  "BAD EXAMPLES (do not do this):",
+  "- Asking a vague question with no options and relying on the Other field.",
+  "- Options with only labels and no descriptions.",
+  "- Defaulting to exactly 3 options out of habit. Aim for 4.",
+  "- More than one question per call unless they are tightly related.",
+  "- Single-option 'questions' (use a plain message instead).",
+].join("\n");
+
+function getToolDefs(onAsk) {
+  var tools = [];
+
+  tools.push({
+    name: "ask_user_questions",
+    description: TOOL_DESCRIPTION,
+    inputSchema: buildQuestionShape(),
+    handler: function (args) {
+      if (!args || !Array.isArray(args.questions) || args.questions.length === 0) {
+        return Promise.resolve({
+          content: [{ type: "text", text: "Error: questions must be a non-empty array." }],
+          isError: true,
+        });
+      }
+      // Defensive structural check only: zod already enforces min 2.
+      // We do NOT reject on "only 3 options" — that's a soft preference
+      // expressed via the tool description, not a hard validation rule.
+      for (var i = 0; i < args.questions.length; i++) {
+        var q = args.questions[i];
+        if (!q || !Array.isArray(q.options) || q.options.length < 2) {
+          return Promise.resolve({
+            content: [{
+              type: "text",
+              text: "Error: question " + (i + 1) + " must include at least 2 options. "
+                + "Provide concrete { label, description } choices (4 preferred). "
+                + "The UI already shows an 'Other...' free-text field, so never add an 'Other' option yourself.",
+            }],
+            isError: true,
+          });
+        }
+      }
+      return onAsk(args);
+    },
+  });
+
+  return tools;
+}
+
+module.exports = { getToolDefs: getToolDefs };

package/lib/daemon.js

@@ -904,6 +904,47 @@ var relay = createServer({
   },
 });
 
+var IDLE_MS = Number(process.env.CLAY_CODEX_IDLE_MS) || 5 * 60 * 1000;
+var REAP_MS = Number(process.env.CLAY_CODEX_REAPER_MS) || 60 * 1000;
+var reaperHandle = setInterval(function () {
+  if (!relay || typeof relay.forEachProject !== "function") return;
+  relay.forEachProject(function (ctx) {
+    try {
+      if (ctx && ctx.adapters && ctx.adapters.codex && typeof ctx.adapters.codex.shutdownIfIdle === "function") {
+        var result = ctx.adapters.codex.shutdownIfIdle(IDLE_MS);
+        if (result && typeof result.catch === "function") {
+          result.catch(function (e) {
+            console.error("[daemon] Codex idle reclaim failed:", e && e.message ? e.message : e);
+          });
+        }
+      }
+    } catch (e) {}
+  });
+}, REAP_MS);
+if (reaperHandle && typeof reaperHandle.unref === "function") {
+  reaperHandle.unref();
+}
+
+function stopCodexReaper() {
+  if (reaperHandle) {
+    clearInterval(reaperHandle);
+    reaperHandle = null;
+  }
+}
+
+function shutdownProjects() {
+  stopCodexReaper();
+  try {
+    var result = relay.destroyAll();
+    if (result && typeof result.then === "function") {
+      return result;
+    }
+    return Promise.resolve(true);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}
+
 // Worktree tracking extracted to daemon-projects.js
 
 // --- Register projects ---
@@ -1305,41 +1346,48 @@ function spawnAndRestart() {
   try {
     updateHandoff = true;
     ipc.close();
-    relay.destroyAll();
-    if (relay.onboardingServer) relay.onboardingServer.close();
+    shutdownProjects().then(function () {
+      if (relay.onboardingServer) relay.onboardingServer.close();
 
-    // Close the server first so the port is released before spawning the new daemon
-    relay.server.close(function () {
-      try {
-        var { spawn: spawnRestart } = require("child_process");
-        var { logPath: restartLogPath, configPath: restartConfigPath } = require("./config");
-        var daemonScript = path.join(__dirname, "daemon.js");
-        var logFd = fs.openSync(restartLogPath(), "a");
-        var child = spawnRestart(process.execPath, [daemonScript], {
-          detached: true,
-          windowsHide: true,
-          stdio: ["ignore", logFd, logFd],
-          env: Object.assign({}, process.env, {
-            CLAY_CONFIG: restartConfigPath(),
-          }),
-        });
-        child.unref();
-        fs.closeSync(logFd);
-        config.pid = child.pid;
-        saveConfig(config);
-        console.log("[daemon] Spawned new daemon (PID " + child.pid + "), exiting.");
-        process.exit(120);
-      } catch (e) {
-        console.error("[daemon] Restart failed:", e.message);
+      // Close the server first so the port is released before spawning the new daemon
+      relay.server.close(function () {
+        try {
+          var { spawn: spawnRestart } = require("child_process");
+          var { logPath: restartLogPath, configPath: restartConfigPath } = require("./config");
+          var daemonScript = path.join(__dirname, "daemon.js");
+          var logFd = fs.openSync(restartLogPath(), "a");
+          var child = spawnRestart(process.execPath, [daemonScript], {
+            detached: true,
+            windowsHide: true,
+            stdio: ["ignore", logFd, logFd],
+            env: Object.assign({}, process.env, {
+              CLAY_CONFIG: restartConfigPath(),
+            }),
+          });
+          child.unref();
+          fs.closeSync(logFd);
+          config.pid = child.pid;
+          saveConfig(config);
+          console.log("[daemon] Spawned new daemon (PID " + child.pid + "), exiting.");
+          process.exit(120);
+        } catch (e) {
+          console.error("[daemon] Restart failed:", e.message);
+          process.exit(1);
+        }
+      });
+    }).catch(function (e) {
+      console.error("[daemon] Restart shutdown failed:", e && e.message ? e.message : e);
+      if (relay.onboardingServer) relay.onboardingServer.close();
+      relay.server.close(function () {
         process.exit(1);
-      }
+      });
     });
 
-    // Force exit after 5 seconds if server.close hangs
+    // Force exit after 10 seconds if server.close hangs
     setTimeout(function () {
       console.error("[daemon] Forced exit after timeout during restart");
       process.exit(1);
-    }, 5000);
+    }, 10000);
   } catch (e) {
     console.error("[daemon] Restart failed:", e.message);
     relay.broadcastAll({ type: "toast", level: "error", message: "Restart failed: " + e.message });
@@ -1349,9 +1397,12 @@ function spawnAndRestart() {
 
 // --- Graceful shutdown ---
 var updateHandoff = false; // true when shutting down for update (new daemon already spawned)
+var shutdownStarted = false;
 
 function gracefulShutdown() {
   try { console.log("[daemon] Shutting down..."); } catch (e) {}
+  if (shutdownStarted) return;
+  shutdownStarted = true;
   var exitCode = updateHandoff ? 120 : 0; // 120 = update handoff, don't auto-restart
 
   if (caffeinateProc) {
@@ -1371,22 +1422,30 @@ function gracefulShutdown() {
     } catch (e) {}
   }
 
-  relay.destroyAll();
-
-  if (relay.onboardingServer) {
-    relay.onboardingServer.close();
-  }
+  shutdownProjects().then(function () {
+    if (relay.onboardingServer) {
+      relay.onboardingServer.close();
+    }
 
-  relay.server.close(function () {
-    try { console.log("[daemon] Server closed"); } catch (e) {}
-    process.exit(exitCode);
+    relay.server.close(function () {
+      try { console.log("[daemon] Server closed"); } catch (e) {}
+      process.exit(exitCode);
+    });
+  }).catch(function (e) {
+    console.error("[daemon] Shutdown cleanup failed:", e && e.message ? e.message : e);
+    if (relay.onboardingServer) {
+      relay.onboardingServer.close();
+    }
+    relay.server.close(function () {
+      process.exit(exitCode);
+    });
   });
 
-  // Force exit after 5 seconds
+  // Force exit after 10 seconds
   setTimeout(function () {
     try { console.error("[daemon] Forced exit after timeout"); } catch (e) {}
     process.exit(1);
-  }, 5000);
+  }, 10000);
 }
 
 process.on("SIGTERM", gracefulShutdown);

package/lib/mates.js

@@ -131,6 +131,7 @@ function createMate(ctx, seedData) {
     createdBy: userId,
     createdAt: Date.now(),
     seedData: seedData || {},
+    vendor: (seedData && seedData.vendor) || "claude",
     profile: {
       displayName: null,
       avatarColor: colors[colorIdx],
@@ -158,7 +159,7 @@ function createMate(ctx, seedData) {
   yaml += "createdAt: " + mate.createdAt + "\n";
   yaml += "relationship: " + (seedData.relationship || "assistant") + "\n";
   yaml += "activities: " + JSON.stringify(seedData.activity || []) + "\n";
-  yaml += "autonomy: " + (seedData.autonomy || "always_ask") + "\n";
+  yaml += "vendor: " + (seedData.vendor || "claude") + "\n";
   fs.writeFileSync(path.join(mateDir, "mate.yaml"), yaml);
 
   // Write initial CLAUDE.md (will be replaced by interview)
@@ -172,7 +173,6 @@ function createMate(ctx, seedData) {
   if (seedData.communicationStyle && seedData.communicationStyle.length > 0) {
     claudeMd += "- Communication: " + seedData.communicationStyle.join(", ") + "\n";
   }
-  claudeMd += "- Autonomy: " + (seedData.autonomy || "always_ask") + "\n";
   var initialIdentity = claudeMd.trimEnd();
   claudeMd += TEAM_SECTION;
   claudeMd += SESSION_MEMORY_SECTION;

package/lib/project-connection.js

@@ -52,12 +52,27 @@ function attachConnection(ctx) {
   var getLatestVersion = ctx.getLatestVersion;
   var getTitle = ctx.getTitle;
   var getProject = ctx.getProject;
+  var warmup = ctx.warmup;
+
+  // Adapters are initialized lazily: the first websocket connection into
+  // this project triggers warmup. Without this guard we would either keep
+  // the old eager behavior (30+ Codex processes at daemon start) or run
+  // warmup once per reconnect.
+  var _warmedUp = false;
 
   function handleConnection(ws, wsUser, handleMessage, handleDisconnection) {
     ws._clayUser = wsUser || null;
     clients.add(ws);
     broadcastClientCount();
 
+    if (!_warmedUp) {
+      _warmedUp = true;
+      if (typeof warmup === "function") {
+        try { warmup(); }
+        catch (e) { console.error("[project-connection] warmup failed for " + slug + ":", e && e.message ? e.message : e); }
+      }
+    }
+
     var loopState = _loop.loopState;
     var loopRegistry = _loop.loopRegistry;
 

package/lib/project-sessions.js

@@ -3,6 +3,33 @@ var path = require("path");
 var { execFileSync } = require("child_process");
 var { CODEX_DEFAULTS, getCodexConfig } = require("./codex-defaults");
 
+// Format a user's answer to an ask_user_questions card as a plain user
+// message so the MCP path can feed it back to the agent on the next turn.
+// The agent sees: its own question text, then the selected answer(s).
+function formatAskUserAnswerAsMessage(input, answers) {
+  var questions = (input && Array.isArray(input.questions)) ? input.questions : [];
+  if (questions.length === 0) {
+    // Shouldn't happen, but be defensive.
+    try { return "(answered with: " + JSON.stringify(answers || {}) + ")"; }
+    catch (e) { return "(answered)"; }
+  }
+  var lines = [];
+  for (var i = 0; i < questions.length; i++) {
+    var q = questions[i];
+    var qText = (q && q.question) ? q.question : ("Question " + (i + 1));
+    var ans = (answers && answers[i] != null) ? String(answers[i]) : "";
+    if (!ans) continue;
+    if (questions.length === 1) {
+      // Single question: keep it tight.
+      lines.push(ans);
+    } else {
+      lines.push("- " + qText + " → " + ans);
+    }
+  }
+  if (lines.length === 0) return "(no answer provided)";
+  return lines.join("\n");
+}
+
 /**
  * Attach session management, config, project management, and mid-section
  * message handlers to a project context.
@@ -243,6 +270,17 @@ function attachSessions(ctx) {
 
     if (msg.type === "switch_session") {
       if (msg.id && sm.sessions.has(msg.id)) {
+        // If the target session's vendor doesn't own the currently cached
+        // model, clear sm.currentModel so the UI and next query don't leak
+        // the previous session's vendor-specific model into this one.
+        var switchTargetSess = sm.sessions.get(msg.id);
+        if (switchTargetSess && sm.currentModel) {
+          var targetVendor = switchTargetSess.vendor || sm.defaultVendor || null;
+          var tvModels = (targetVendor && sm.modelsByVendor && sm.modelsByVendor[targetVendor]) || [];
+          if (tvModels.length > 0 && tvModels.indexOf(sm.currentModel) === -1) {
+            sm.currentModel = "";
+          }
+        }
         // Check access in multi-user mode
         if (usersModule.isMultiUser() && ws._clayUser) {
           var switchTarget = sm.sessions.get(msg.id);
@@ -747,10 +785,41 @@ function attachSessions(ctx) {
       if (!pending) return true;
       delete session.pendingAskUser[toolId];
       sm.sendAndRecord(session, { type: "ask_user_answered", toolId: toolId, answers: answers });
-      pending.resolve({
-        behavior: "allow",
-        updatedInput: Object.assign({}, pending.input, { answers: answers }),
-      });
+
+      if (pending.mode === "mcp") {
+        // Stateless MCP path: the tool already returned. Inject the user's
+        // answer as a new user message so the conversation continues
+        // naturally on the next turn. This matches how the mate would see
+        // any other user input.
+        var answerText = formatAskUserAnswerAsMessage(pending.input, answers);
+        var userMsg = { type: "user_message", text: answerText };
+        session.history.push(userMsg);
+        sm.appendToSessionFile(session, userMsg);
+        sendToSession(session.localId, userMsg);
+
+        if (!session.isProcessing) {
+          session.isProcessing = true;
+          onProcessingChanged();
+          session.sentToolResults = {};
+          sendToSession(session.localId, { type: "status", status: "processing" });
+          if (!session.queryInstance && !session.worker) {
+            sdk.startQuery(session, answerText, undefined, getLinuxUserForSession(session));
+          } else {
+            sdk.pushMessage(session, answerText);
+          }
+        } else {
+          // Turn is still running; queue for the next turn.
+          sdk.pushMessage(session, answerText);
+        }
+      } else {
+        // Claude native AskUserQuestion path (canUseTool). The SDK is
+        // synchronously blocked on the permission callback, so we must
+        // resolve it with the standard permission shape.
+        pending.resolve({
+          behavior: "allow",
+          updatedInput: Object.assign({}, pending.input, { answers: answers }),
+        });
+      }
       return true;
     }
 

package/lib/project.js

@@ -162,7 +162,7 @@ function createProjectContext(opts) {
   var latestVersion = null;
 
   // --- YOKE adapters (multi-vendor, lazy init) ---
-  var _yokeState = yoke.createAdapters({ cwd: cwd });
+  var _yokeState = yoke.createAdapters({ cwd: cwd, slug: slug });
   var adapters = _yokeState.adapters;
   var defaultVendor = adapters.claude ? "claude" : Object.keys(adapters)[0] || "claude";
   var adapter = adapters[defaultVendor] || null;
@@ -496,6 +496,63 @@ function createProjectContext(opts) {
       console.error("[project] Failed to create debate MCP server:", e.message);
     }
 
+    // Ask-user MCP server (mates only)
+    if (isMate) {
+      try {
+        var askUserMcp = require("./ask-user-mcp-server");
+        var askUserToolDefs = askUserMcp.getToolDefs(function onAsk(input) {
+          // Stateless: the tool's job is to *post* the question card.
+          // We do NOT hold a promise open waiting for the user. When the
+          // user answers, the answer is injected as a fresh user message
+          // on the next turn (see project-sessions.js ask_user_response).
+          // This avoids HTTP long-poll timeouts on the MCP bridge and
+          // matches the natural multi-turn agent loop.
+          var session = sm.getActiveSession();
+          if (!session) {
+            // No active session means we have no way to show a card or
+            // route the answer. Fail closed rather than pretend success.
+            return Promise.resolve({
+              content: [{ type: "text", text: "Error: no active session in " + slug + "; cannot display question card." }],
+              isError: true,
+            });
+          }
+          if (session.loop && session.loop.active && session.loop.role !== "crafting") {
+            return Promise.resolve({
+              content: [{ type: "text", text: "Error: Autonomous mode. Make your own decision." }],
+              isError: true,
+            });
+          }
+
+          var toolId = "ask_" + Date.now() + "_" + crypto.randomUUID().slice(0, 8);
+          // Track for UI card lifecycle + answer routing. No resolve function.
+          session.pendingAskUser[toolId] = {
+            input: input,
+            mode: "mcp",
+            sessionId: session.localId,
+            postedAt: Date.now(),
+          };
+
+          sm.sendAndRecord(session, {
+            type: "tool_executing",
+            id: toolId,
+            name: "AskUserQuestion",
+            input: input,
+          });
+
+          return Promise.resolve({
+            content: [{
+              type: "text",
+              text: "The question card has been posted to the user. End this turn now without further commentary; the user's answer will arrive as the next user message.",
+            }],
+          });
+        });
+        var askUserMcpConfig = adapter.createToolServer({ name: "clay-ask-user", version: "1.0.0", tools: askUserToolDefs });
+        if (askUserMcpConfig) servers[askUserMcpConfig.name || "clay-ask-user"] = askUserMcpConfig;
+      } catch (e) {
+        console.error("[project] Failed to create ask-user MCP server:", e.message);
+      }
+    }
+
     // Browser MCP server (main project only, not mates)
     if (!isMate) {
       try {
@@ -1318,6 +1375,13 @@ function createProjectContext(opts) {
     getLatestVersion: function () { return latestVersion; },
     getTitle: function () { return title; },
     getProject: function () { return project; },
+    // Exposed so the first websocket connection can lazily warm up the
+    // adapters for this project (see project-connection handleConnection).
+    warmup: function () {
+      sdk.warmup();
+      sdk.startIdleReaper();
+      sm.migrateSessionTitles(adapter, cwd);
+    },
   });
 
   // --- Destroy ---
@@ -1376,6 +1440,15 @@ function createProjectContext(opts) {
       var tmpDir = path.join(os.tmpdir(), "clay-" + cwdHash);
       fs.rmSync(tmpDir, { recursive: true, force: true });
     } catch (e) {}
+
+    var codexShutdown = Promise.resolve(true);
+    if (adapters && adapters.codex && typeof adapters.codex.shutdown === "function") {
+      codexShutdown = adapters.codex.shutdown().catch(function(err) {
+        console.error("[project] Codex shutdown failed for " + slug + ":", err && err.message ? err.message : err);
+        return false;
+      });
+    }
+    return codexShutdown;
   }
 
   // --- Status info ---
@@ -1523,15 +1596,9 @@ function createProjectContext(opts) {
       broadcastClientCount();
       broadcastPresence();
     },
-    warmup: function () {
-      sdk.warmup();
-      sdk.startIdleReaper();
-      // Migrate existing relay session titles to SDK format (one-time, async)
-      sm.migrateSessionTitles(adapter, cwd);
-    },
     destroy: function () {
       sdk.stopIdleReaper();
-      destroy();
+      return destroy();
     },
   };
 }

package/lib/public/css/mates.css

@@ -410,18 +410,18 @@
   line-height: 1.4;
 }
 
-/* Step 4: Autonomy options */
-.mate-autonomy-options {
+/* Step 4: Vendor options */
+.mate-vendor-option-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
-.mate-autonomy-btn {
+.mate-vendor-option-btn {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  gap: 2px;
-  padding: 12px 16px;
+  gap: 14px;
+  padding: 14px 16px;
   background: var(--input-bg, #1a1a2e);
   border: 2px solid var(--border, #333);
   border-radius: 10px;
@@ -430,21 +430,36 @@
   text-align: left;
   color: var(--text, #fff);
   font-family: inherit;
+  width: 100%;
 }
-.mate-autonomy-btn:hover {
+.mate-vendor-option-btn:hover {
   border-color: var(--text-dimmer, #6272a4);
 }
-.mate-autonomy-btn.active {
+.mate-vendor-option-btn.active {
   border-color: var(--accent, #6c5ce7);
   background: var(--accent-bg, rgba(108,92,231,0.12));
 }
-.mate-autonomy-title {
+.mate-vendor-option-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+.mate-vendor-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.mate-vendor-option-title {
   font-weight: 600;
   font-size: 14px;
 }
-.mate-autonomy-desc {
+.mate-vendor-option-desc {
   font-size: 12px;
   color: var(--text-muted, #9ea8c7);
+  line-height: 1.4;
 }
 
 /* Footer */