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

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

@@ -42,7 +42,7 @@ import { handleMcpServersState } from './mcp-ui.js';
 import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, isSchedulerOpen, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './scheduler.js';
 
 // --- App module imports ---
-import { scrollToBottom, addToMessages, addUserMessage, addSystemMessage, removeMatePreThinking, appendDelta, finalizeAssistantBlock, addConflictMessage, addContextOverflowMessage, showSuggestionChips, armStickyBottom } from './app-rendering.js';
+import { scrollToBottom, addToMessages, addUserMessage, addSystemMessage, removeMatePreThinking, appendDelta, finalizeAssistantBlock, addConflictMessage, addContextOverflowMessage, showSuggestionChips, armStickyBottom, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { setActivity, startUrgentBlink, stopUrgentBlink, blinkSessionDot, updateCrossProjectBlink } from './app-favicon.js';
 import { setStatus } from './app-connection.js';
 import { handleWhatsNewState, handleWhatsNewSeenResult, setKnownEntries as setWhatsNewKnownEntries } from './whats-new.js';
@@ -289,7 +289,7 @@ export function processMessage(msg) {
         // host lives on document.body (it's position: fixed), so it
         // survives project navigation unless we detach explicitly here.
         detachTuiView();
-        store.set({ projectName: msg.project || msg.cwd });
+        store.set({ projectName: msg.project || msg.cwd, vendorInfo: msg.vendors || {} });
         if (msg.cwd) store.set({ cwd: msg.cwd });
         if (msg.slug) store.set({ currentSlug: msg.slug });
         try { var _is = store.snap(); localStorage.setItem("clay-project-name-" + (_is.currentSlug || "default"), _is.projectName); } catch (e) {}
@@ -464,6 +464,7 @@ export function processMessage(msg) {
         if (msg.vendor && !store.get('vendorSelectionLocked')) _miUpdate.currentVendor = msg.vendor;
         if (msg.availableVendors) _miUpdate.availableVendors = msg.availableVendors;
         if (msg.installedVendors) _miUpdate.installedVendors = msg.installedVendors;
+        if (msg.capabilities) _miUpdate.vendorCapabilities = msg.capabilities;
         store.set(_miUpdate);
         updateSettingsModels(_modelVal, msg.models || []);
         break;
@@ -579,6 +580,12 @@ export function processMessage(msg) {
         updateSessionPresence(msg.presence || {});
         break;
 
+      // Project's last-used vendor. Seeds the sidebar's "New session" button
+      // on connect and keeps other tabs in sync after someone picks a vendor.
+      case "last_vendor":
+        store.set({ lastVendor: msg.vendor || "" });
+        break;
+
       case "cursor_move":
         handleRemoteCursorMove(msg);
         break;
@@ -696,15 +703,10 @@ export function processMessage(msg) {
           }
         }
         if (_avi && _avIcon) {
-          if (msg.vendor === "claude") {
-            _avIcon.src = "/claude-code-avatar.png";
-            _avIcon.alt = "Claude";
-            _avi.title = "Claude session";
-            _avi.classList.remove("hidden");
-          } else if (msg.vendor === "codex") {
-            _avIcon.src = "/codex-avatar.png";
-            _avIcon.alt = "Codex";
-            _avi.title = "Codex session";
+          if (msg.vendor && VENDOR_AVATARS[msg.vendor]) {
+            _avIcon.src = VENDOR_AVATARS[msg.vendor];
+            _avIcon.alt = VENDOR_NAMES[msg.vendor] || msg.vendor;
+            _avi.title = (VENDOR_NAMES[msg.vendor] || msg.vendor) + " session";
             _avi.classList.remove("hidden");
           } else {
             _avi.classList.add("hidden");
@@ -1358,7 +1360,7 @@ export function processMessage(msg) {
           var _lm = store.get('pendingLoginModal');
           store.set({ pendingLoginModal: null });
           openTuiModal(msg.id, _lm.slug, {
-            sessionTitle: (_lm.vendor === "codex" ? "Codex" : "Claude") + " login",
+            sessionTitle: (VENDOR_NAMES[_lm.vendor] || "Claude Code") + " login",
             projectName: _lm.slug,
             compact: true,
           });

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

@@ -19,6 +19,14 @@ var bannerContainer = null;
 var bellBtn = null;
 var badgeEl = null;
 
+function getVendorLoginCommand(vendor) {
+  var vendors = store.get('vendorInfo') || {};
+  var info = vendors[vendor];
+  if (info && info.loginCommand) return info.loginCommand;
+  var fallbacks = { codex: "codex login --device-auth", claude: "claude login" };
+  return fallbacks[vendor] || fallbacks.claude;
+}
+
 // --- Pending TUI attention tracking ---
 // Mirrors the icon-shake / favicon-blink behavior the SDK side already gets
 // from `pendingPermissions` on project status broadcasts. The notification
@@ -252,7 +260,7 @@ function showBanner(notif, autoDismissMs) {
           removeBanner(banner);
           dismissNotif(notif.id);
           var authMeta = notif.meta || {};
-          startLoginInModal(authMeta.loginCommand || ((authMeta.vendor || "claude") === "codex" ? "codex login --device-auth" : "claude login"), authMeta.vendor || "claude");
+          startLoginInModal(authMeta.loginCommand || getVendorLoginCommand(authMeta.vendor || "claude"), authMeta.vendor || "claude");
           showLoginReminderBanner();
         });
       }
@@ -332,7 +340,7 @@ function startLoginInModal(loginCommand, vendor) {
   if (authReminderVisible) return;
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
-  var cmd = loginCommand || (vendor === "codex" ? "codex login --device-auth" : "claude login");
+  var cmd = loginCommand || getVendorLoginCommand(vendor);
   var slug = currentProjectSlug();
   if (!slug) { startLoginCommand(cmd); return; }
   store.set({ pendingLoginModal: { slug: slug, vendor: vendor || "claude" } });
@@ -366,7 +374,7 @@ export function autoStartLoginIfNeeded(msg) {
   if (authReminderVisible) return false;
   var vendor = msg.vendor || "claude";
   var cmd = msg.loginCommand
-    || (vendor === "codex" ? "codex login --device-auth" : "claude login");
+    || getVendorLoginCommand(vendor);
   startLoginInModal(cmd, vendor);
   showLoginReminderBanner();
   return true;
@@ -426,7 +434,7 @@ function showLoginReminderBanner() {
 export function showAuthRequiredBanner(msg) {
   if (!bannerContainer) return;
   var vendor = (msg && (msg.vendor || (msg.meta && msg.meta.vendor))) || "claude";
-  var loginCommand = (msg && (msg.loginCommand || (msg.meta && msg.meta.loginCommand))) || (vendor === "codex" ? "codex login --device-auth" : "claude login");
+  var loginCommand = (msg && (msg.loginCommand || (msg.meta && msg.meta.loginCommand))) || getVendorLoginCommand(vendor);
   activeAuthRequiredMsg = Object.assign({}, msg || {}, {
     id: (msg && msg.id) || ("_auth_" + Date.now()),
     type: "auth_required",

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

@@ -88,11 +88,12 @@ 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"],
+  kiro: ["low", "medium", "high", "xhigh", "max"],
 };
 var THINKING_OPTIONS = ["disabled", "adaptive", "budget"];
 var CODEX_APPROVAL_OPTIONS = [
   { value: "never", label: "Auto" },
-  { value: "on-failure", label: "On Fail" },
+  { value: "untrusted", label: "Untrusted" },
   { value: "on-request", label: "Ask" },
 ];
 var CODEX_SANDBOX_OPTIONS = [
@@ -418,7 +419,8 @@ export function initPanels() {
   var vendorToggleWrap = $("vendor-toggle-wrap");
   var vendorBtnClaude = $("vendor-btn-claude");
   var vendorBtnCodex = $("vendor-btn-codex");
-  var vendorBtns = { claude: vendorBtnClaude, codex: vendorBtnCodex };
+  var vendorBtnKiro = $("vendor-btn-kiro");
+  var vendorBtns = { claude: vendorBtnClaude, codex: vendorBtnCodex, kiro: vendorBtnKiro };
 
   function updateVendorToggle() {
     var installed = store.get('installedVendors') || [];
@@ -447,6 +449,7 @@ export function initPanels() {
 
   if (vendorBtnClaude) vendorBtnClaude.addEventListener("click", function() { onVendorClick("claude"); });
   if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
+  if (vendorBtnKiro) vendorBtnKiro.addEventListener("click", function() { onVendorClick("kiro"); });
 
   // --- Reactive UI sync ---
   store.subscribe(function (state, prev) {
@@ -638,11 +641,14 @@ export function updateConfigChip() {
   rebuildModeList();
   rebuildEffortBar();
 
-  // Vendor-specific sections
+  // MODE remains Claude-specific until adapter modes become capabilities.
   var isClaude = vendor === "claude";
-  // MODE, THINKING, BETA are Claude-only
   if (configModeList && configModeList.parentElement) configModeList.parentElement.style.display = isClaude ? "" : "none";
   rebuildThinkingSection();
+  // capabilities.thinking means "emits a thinking stream" (true for every
+  // vendor), NOT "accepts thinking config". The adaptive/extended toggle and
+  // budget only feed Claude queries (sm.currentThinking), so the section
+  // stays Claude-only until a dedicated thinkingConfig capability exists.
   if (configThinkingSection) configThinkingSection.style.display = isClaude ? "" : "none";
   // BETA section deprecated (1M context is now standard)
   if (configBetaSection) configBetaSection.style.display = "none";

package/lib/public/modules/app-rate-limit.js

@@ -23,20 +23,37 @@ var fastModeIndicatorEl = null;
 // --- Internal helpers ---
 
 function getVendorUsageMeta(vendor) {
-  if (vendor === "codex") {
-    return {
+  var vendors = store.get('vendorInfo') || {};
+  var info = vendors[vendor];
+  if (info && info.usageDashboard) return info.usageDashboard;
+  var fallbacks = {
+    codex: {
       icon: "/codex-avatar.png",
       alt: "Codex",
       href: "https://chatgpt.com/admin/usage",
       title: "Check usage on ChatGPT",
-    };
-  }
-  return {
-    icon: "/claude-code-avatar.png",
-    alt: "Claude Code",
-    href: "https://claude.ai/settings/usage",
-    title: "Check usage on claude.ai",
+    },
+    claude: {
+      icon: "/claude-code-avatar.png",
+      alt: "Claude Code",
+      href: "https://claude.ai/settings/usage",
+      title: "Check usage on claude.ai",
+    },
   };
+  return fallbacks[vendor] || fallbacks.claude;
+}
+
+function vendorTracksRateLimits(vendor) {
+  var vendors = store.get('vendorInfo') || {};
+  var info = vendors[vendor];
+  if (info) return info.rateLimitTracking !== false;
+  var legacyTrackedVendors = ["claude", "codex"];
+  return legacyTrackedVendors.indexOf(vendor) !== -1;
+}
+
+function vendorSupportsScheduledMessages(vendor) {
+  var scheduledMessageVendors = ["claude"];
+  return scheduledMessageVendors.indexOf(vendor) !== -1;
 }
 
 function rateLimitTypeLabel(type) {
@@ -178,8 +195,13 @@ function tickRateLimitUsage() {
 
 export function initRateLimit() {
   store.subscribe(function(state, prev) {
-    if (state.currentVendor !== prev.currentVendor && state.currentVendor && state.currentVendor !== "claude") {
-      clearScheduleDelay();
+    if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
+      if (!vendorSupportsScheduledMessages(state.currentVendor)) clearScheduleDelay();
+    }
+    if (state.currentVendor !== prev.currentVendor || state.vendorInfo !== prev.vendorInfo) {
+      if (rateLimitUsageEl) {
+        rateLimitUsageEl.style.display = vendorTracksRateLimits(state.currentVendor || "claude") ? "" : "none";
+      }
     }
   });
 }
@@ -203,7 +225,7 @@ export function handleRateLimitEvent(msg) {
     if (rateLimitResetTimer) clearTimeout(rateLimitResetTimer);
     // Auto-switch input to schedule mode: any message typed will be queued for after reset
     var delayUntilReset = msg.resetsAt - Date.now();
-    if (delayUntilReset > 0 && (store.get('currentVendor') || "claude") === "claude") {
+    if (delayUntilReset > 0 && vendorSupportsScheduledMessages(store.get('currentVendor') || "claude")) {
       setScheduleDelayMs(delayUntilReset + 60000); // +1min buffer after reset
     }
     rateLimitResetTimer = setTimeout(function () {
@@ -222,6 +244,11 @@ export function handleRateLimitEvent(msg) {
 }
 
 export function updateRateLimitUsage(msg) {
+  var activeVendor = store.get('currentVendor') || "claude";
+  if (!vendorTracksRateLimits(activeVendor)) {
+    if (rateLimitUsageEl) rateLimitUsageEl.style.display = "none";
+    return;
+  }
   if (msg.rateLimitType && msg.resetsAt) {
     rateLimitResetState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
   }
@@ -238,6 +265,7 @@ export function updateRateLimitUsage(msg) {
     var ref = document.getElementById("skip-perms-pill");
     topBarActions.insertBefore(rateLimitUsageEl, ref);
   }
+  rateLimitUsageEl.style.display = "";
 
   // Build label from available reset times
   var parts = [];
@@ -251,7 +279,7 @@ export function updateRateLimitUsage(msg) {
   }
 
   var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
-  var vendor = store.get('currentVendor') || "claude";
+  var vendor = activeVendor;
   var meta = getVendorUsageMeta(vendor);
   rateLimitUsageEl.href = meta.href;
   rateLimitUsageEl.title = meta.title;

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

@@ -14,13 +14,27 @@ import { sendMessage, hasSendableContent } from './input.js';
 import { getChatLayout } from './theme.js';
 import { getScheduledMsgEl } from './app-rate-limit.js';
 
+// Keep these client constants aligned with lib/yoke/vendor-registry.js. The
+// browser cannot import the server's CommonJS registry directly.
 export var VENDOR_AVATARS = {
   claude: "/claude-code-avatar.png",
   codex: "/codex-avatar.png",
+  kiro: "/kiro-avatar.svg",
 };
 export var VENDOR_NAMES = {
   claude: "Claude Code",
   codex: "Codex",
+  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"];
+// 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/",
+  kiro: "https://kiro.dev/",
 };
 var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";
 var NEW_MSG_BTN_ACTIVITY = "\u2193 New activity";

package/lib/public/modules/input.js

@@ -5,6 +5,7 @@ import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible
 import { store } from './store.js';
 import { mateAvatarUrl } from './avatar.js';
 import { tuiIsActive, tuiSubmitText } from './session-tui-view.js';
+import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 
 var ctx;
 
@@ -300,9 +301,9 @@ export function sendMessage() {
       _vtw2.classList.remove("locked");
     }
     if (_avi && _avIcon) {
-      _avIcon.src = _committedVendor === "codex" ? "/codex-avatar.png" : "/claude-code-avatar.png";
-      _avIcon.alt = _committedVendor === "codex" ? "Codex" : "Claude";
-      _avi.title = (_committedVendor === "codex" ? "Codex" : "Claude") + " session";
+      _avIcon.src = VENDOR_AVATARS[_committedVendor] || VENDOR_AVATARS.claude;
+      _avIcon.alt = VENDOR_NAMES[_committedVendor] || VENDOR_NAMES.claude;
+      _avi.title = (VENDOR_NAMES[_committedVendor] || VENDOR_NAMES.claude) + " session";
       _avi.classList.remove("hidden");
     }
   } else if (_vtw2) {

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

@@ -158,9 +158,9 @@ 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" };
-    var vendorNames = { claude: "Claude Code", codex: "Codex" };
-    var vendorKeys = ["claude", "codex"];
+    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"];
     mateVendorWrap.innerHTML = "";
     for (var vi = 0; vi < vendorKeys.length; vi++) {
       var vk = vendorKeys[vi];

package/lib/public/modules/session-tui-view.js

@@ -20,15 +20,9 @@ import { getTerminalTheme } from './theme.js';
 import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { showHeaderTuiFont, hideHeaderTuiFont } from './header-tui-font.js';
 import { attachTuiGrab, detachTuiGrab } from './tui-grab.js';
-import { openArticle as openWhatsNewArticle } from './whats-new-article.js';
 import { createKeyToolbar, TERMINAL_TOOLBAR_HTML } from './terminal-toolbar.js';
 import { refreshIcons, iconHtml } from './icons.js';
 
-// Stable id of the canonical "Why TUI mode?" article in
-// lib/whats-new-content.js. The TUI policy notice's "Learn more" button
-// opens that article in the blog viewer instead of a one-off modal.
-var TUI_POLICY_ARTICLE_ID = "2026-06-tui-default";
-
 // Claude TUI session terminal colors follow Clay's active theme via
 // getTerminalTheme(). Live theme switches are wired through
 // setTuiSessionTheme() below, which theme.js calls from applyTheme.
@@ -44,15 +38,6 @@ var isTouchDevice = "ontouchstart" in window;
 // touch devices and forward its send into the PTY (input.js -> tuiSubmitText).
 // xterm is render-only on mobile.
 
-// The TUI policy notice's "Learn more" button opens the canonical
-// "Why TUI mode?" entry in the What's New blog viewer. The full
-// authoritative text lives in lib/whats-new-content.js so there's a
-// single source of truth.
-function openPolicyArticle(e) {
-  if (e && e.stopPropagation) e.stopPropagation();
-  openWhatsNewArticle(TUI_POLICY_ARTICLE_ID);
-}
-
 var xterm = null;        // xterm.js instance
 var fitAddon = null;
 var webglAddon = null;
@@ -81,7 +66,7 @@ var resizeDebounce = null;
 //      fitAddon.fit() reads clientWidth - otherwise fit() can compute
 //      cols against the pre-resize container width.
 //   2. A second rAF + second fit() pass converges any further layout
-//      adjustments (scrollbar appear/disappear, policy notice
+//      adjustments (scrollbar appear/disappear, the key toolbar
 //      reflowing on narrower widths, etc.). This mirrors the two-pass
 //      fit used on attach (fitNow + setTimeout(fitNow, 50)).
 //   3. WebGL renderer caches a font atlas keyed on cell metrics. When
@@ -128,7 +113,7 @@ function ensureHostEl() {
   hostEl.style.boxSizing = "border-box";
   // 4px inset on all sides so the terminal doesn't kiss the edges of the
   // content area. fitAddon computes against the xterm container's
-  // clientWidth/clientHeight (which exclude padding + the policy banner),
+  // clientWidth/clientHeight (which exclude padding + the key toolbar),
   // so cols/rows stay correct.
   hostEl.style.padding = "4px";
 
@@ -148,30 +133,9 @@ function ensureHostEl() {
     });
   }
 
-  // Policy notice: explains why TUI mode exists (Anthropic split Agent
-  // SDK usage into a separate billing bucket on 2026-06-15; running
-  // `claude` in a real terminal keeps usage in the Interactive bucket).
-  var noticeEl = document.createElement("div");
-  noticeEl.className = "tui-policy-notice";
-  noticeEl.innerHTML =
-    '<span class="tui-policy-icon">●</span>' +
-    '<span class="tui-policy-text">TUI is the default Claude mode in Clay because of Anthropic\'s new billing policy.</span>' +
-    '<button type="button" class="tui-policy-learn-more">Learn more</button>' +
-    '<button type="button" class="tui-policy-dismiss" aria-label="Dismiss this notice for the rest of the page">&times;</button>';
-  noticeEl.querySelector(".tui-policy-learn-more").addEventListener("click", openPolicyArticle);
-  noticeEl.querySelector(".tui-policy-dismiss").addEventListener("click", function () {
-    // Session-only dismiss: hides the notice for the current page load.
-    // Reloading restores it on purpose so the policy context doesn't
-    // get lost forever - a user who comes back next month should be
-    // re-reminded that TUI is a billing workaround.
-    noticeEl.style.display = "none";
-    if (typeof fitNow === "function") fitNow();
-  });
-  hostEl.appendChild(noticeEl);
-
-  // Dedicated xterm container so the banner sits above the terminal
+  // Dedicated xterm container so the toolbar sits above the terminal
   // rather than xterm mounting at the host root (which would have it
-  // side-by-side with the banner under flex layout).
+  // side-by-side with the toolbar under flex layout).
   xtermContainerEl = document.createElement("div");
   xtermContainerEl.className = "tui-xterm-container";
   xtermContainerEl.style.flex = "1 1 auto";

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

@@ -457,7 +457,7 @@ 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" };
+      var vendorLabels = { claude: "Claude Code", codex: "OpenAI Codex", kiro: "Kiro CLI" };
       el.addEventListener("mouseenter", function () {
         var html = '<div style="font-weight:600">' + escapeHtml(displayName);
         if (mate.primary) {

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

@@ -11,8 +11,11 @@ import { getMateSessions } from './mate-sidebar.js';
 import { openProjectSettings } from './project-settings.js';
 import {
   getCachedSessions,
-  getDateGroup
+  getDateGroup,
+  resolveDefaultVendor,
+  startNewSession
 } from './sidebar-sessions.js';
+import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES } from './app-rendering.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -698,36 +701,66 @@ function renderMateMobileActions(container) {
 
 // Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
-  // Vendor-aware new-session row. Mirrors the desktop sidebar's two-button
-  // pattern (Claude defaults to TUI, Codex always GUI) so mobile users can
-  // pick the vendor instead of being silently routed to Claude TUI.
+  // Mirrors the desktop sidebar's split button: one "New session" action on
+  // the project's last-used vendor, plus a chevron that expands the full
+  // vendor list. The list expands inline rather than as a fixed-position
+  // popover because it lives inside a scrolling bottom sheet.
+  var mobileDefaultVendor = resolveDefaultVendor();
+  var mobileInstalled = store.get('installedVendors') || [];
+
   var newRow = document.createElement("div");
   newRow.className = "mobile-session-new-row";
 
-  var claudeBtn = document.createElement("button");
-  claudeBtn.className = "mobile-session-new mobile-session-new-vendor";
-  claudeBtn.innerHTML = '<img src="/claude-code-avatar.png" class="mobile-session-new-icon" alt=""><span>Claude</span>';
-  claudeBtn.addEventListener("click", function () {
-    if (getWs() && store.get('connected')) {
-      // No explicit mode: the server applies the user's claudeOpenMode pref.
-      getWs().send(JSON.stringify({ type: "new_session", vendor: "claude" }));
-    }
+  var mainBtn = document.createElement("button");
+  mainBtn.className = "mobile-session-new mobile-session-new-main";
+  mainBtn.innerHTML = '<img src="' + (VENDOR_AVATARS[mobileDefaultVendor] || VENDOR_AVATARS.claude) +
+    '" class="mobile-session-new-icon" alt=""><span>New ' + (VENDOR_NAMES[mobileDefaultVendor] || mobileDefaultVendor) + ' session</span>';
+  mainBtn.addEventListener("click", function () {
+    startNewSession(mobileDefaultVendor);
     closeMobileSheet();
   });
-  newRow.appendChild(claudeBtn);
-
-  var codexBtn = document.createElement("button");
-  codexBtn.className = "mobile-session-new mobile-session-new-vendor";
-  codexBtn.innerHTML = '<img src="/codex-avatar.png" class="mobile-session-new-icon" alt=""><span>Codex</span>';
-  codexBtn.addEventListener("click", function () {
-    if (getWs() && store.get('connected')) {
-      getWs().send(JSON.stringify({ type: "new_session", vendor: "codex" }));
-    }
-    closeMobileSheet();
+  newRow.appendChild(mainBtn);
+
+  var vendorList = document.createElement("div");
+  vendorList.className = "mobile-vendor-list hidden";
+
+  var chevronBtn = document.createElement("button");
+  chevronBtn.className = "mobile-session-new mobile-session-new-chevron";
+  chevronBtn.setAttribute("aria-label", "Choose a vendor");
+  chevronBtn.innerHTML = iconHtml("chevron-down");
+  chevronBtn.addEventListener("click", function () {
+    vendorList.classList.toggle("hidden");
+    chevronBtn.classList.toggle("expanded");
   });
-  newRow.appendChild(codexBtn);
+  newRow.appendChild(chevronBtn);
+
+  // Every known vendor is listed. Uninstalled ones stay visible but disabled,
+  // and tapping one opens the vendor's homepage.
+  for (var vi = 0; vi < VENDOR_ORDER.length; vi++) {
+    (function (vendor) {
+      var isInstalled = mobileInstalled.indexOf(vendor) !== -1;
+      var name = VENDOR_NAMES[vendor] || vendor;
+      var vBtn = document.createElement("button");
+      vBtn.className = "mobile-session-new mobile-session-new-vendor";
+      if (!isInstalled) vBtn.classList.add("disabled");
+      if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
+      vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
+        '<span>' + name + '</span>' +
+        (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
+      vBtn.addEventListener("click", function () {
+        if (!isInstalled) {
+          window.open(VENDOR_HOMEPAGES[vendor], "_blank", "noopener");
+          return;
+        }
+        startNewSession(vendor);
+        closeMobileSheet();
+      });
+      vendorList.appendChild(vBtn);
+    })(VENDOR_ORDER[vi]);
+  }
 
   container.appendChild(newRow);
+  container.appendChild(vendorList);
 
   // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
   var sessions = getCachedSessions();