clay-server 2.46.0 → 2.47.0-beta.2

package/lib/public/css/mobile-nav.css

@@ -358,18 +358,16 @@
     background: rgba(var(--overlay-rgb), 0.06);
   }
 
-  /* Vendor-split row: Claude + Codex side-by-side. Used inside
-     renderMobileSessionsInto so users can pick the vendor on mobile, the
-     same way the desktop sidebar already does. */
+  /* Split "New session" row: main action on the last-used vendor + a chevron
+     that expands .mobile-vendor-list below it. Mirrors the desktop sidebar. */
   .mobile-session-new-row {
     display: flex;
     gap: 6px;
     padding: 6px 8px 8px;
-    border-bottom: 1px solid var(--border-subtle);
   }
 
-  .mobile-session-new-row .mobile-session-new-vendor {
-    flex: 1 1 0;
+  .mobile-session-new-row .mobile-session-new-main {
+    flex: 1 1 auto;
     width: auto;
     margin-bottom: 0;
     padding: 10px 12px;
@@ -377,15 +375,61 @@
     border-radius: 8px;
     background: rgba(var(--overlay-rgb), 0.03);
     color: var(--text);
-    justify-content: center;
     gap: 8px;
   }
-  .mobile-session-new-row .mobile-session-new-vendor:last-of-type {
+  .mobile-session-new-row .mobile-session-new-chevron {
+    flex: 0 0 auto;
+    width: 44px;
+    margin-bottom: 0;
+    padding: 10px 0;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: rgba(var(--overlay-rgb), 0.03);
+    color: var(--text-muted);
+    justify-content: center;
+    gap: 0;
+  }
+  .mobile-session-new-row .mobile-session-new-chevron.expanded svg {
+    transform: rotate(180deg);
+  }
+  .mobile-session-new-row .mobile-session-new-main:active,
+  .mobile-session-new-row .mobile-session-new-chevron:active {
+    background: rgba(var(--overlay-rgb), 0.1);
+  }
+
+  .mobile-vendor-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 0 8px 8px;
     border-bottom: 1px solid var(--border-subtle);
   }
-  .mobile-session-new-row .mobile-session-new-vendor:active {
+  .mobile-vendor-list.hidden { display: none; }
+
+  .mobile-vendor-list .mobile-session-new-vendor {
+    width: 100%;
+    margin-bottom: 0;
+    padding: 10px 12px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: rgba(var(--overlay-rgb), 0.03);
+    color: var(--text);
+    font-weight: 500;
+    gap: 8px;
+  }
+  .mobile-vendor-list .mobile-session-new-vendor.active { font-weight: 700; }
+  /* Uninstalled vendors stay tappable: the tap opens the vendor's homepage. */
+  .mobile-vendor-list .mobile-session-new-vendor.disabled { opacity: 0.45; }
+  .mobile-vendor-list .mobile-session-new-vendor:active {
     background: rgba(var(--overlay-rgb), 0.1);
   }
+  .mobile-vendor-note {
+    margin-left: auto;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-dimmer);
+  }
+
   .mobile-session-new-icon {
     width: 18px;
     height: 18px;

package/lib/public/css/sidebar.css

@@ -993,7 +993,7 @@
 
 .session-top-actions {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 2px;
   padding: 0 0 2px;
 }
@@ -1240,6 +1240,29 @@
 .session-ctx-item.session-ctx-delete { color: var(--error); }
 .session-ctx-item.session-ctx-delete:hover { background: var(--error-8); }
 
+/* --- New-session vendor picker --- */
+.session-new-menu { min-width: 200px; }
+
+.session-ctx-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--border);
+}
+
+.session-new-vendor .session-new-vendor-name { flex: 1 1 auto; min-width: 0; }
+.session-new-vendor.active { color: var(--text); font-weight: 600; }
+
+/* Uninstalled vendors stay clickable on purpose: the click opens the
+   vendor's homepage instead of creating a session. */
+.session-new-vendor.disabled { opacity: 0.45; }
+.session-new-vendor.disabled:hover { opacity: 0.7; }
+
+.session-new-vendor-note {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  white-space: nowrap;
+}
+
 /* --- Session inline rename --- */
 .session-rename-input {
   width: 100%;

package/lib/public/css/tui-attention.css

@@ -49,69 +49,10 @@ body.tui-suspended #tui-resume-bar {
   .tui-resume-hint { display: none; }
 }
 
-/* Policy notice that sits above the embedded xterm in fullscreen TUI
-   sessions, explaining why this mode exists (post-2026-06-15 Agent SDK
-   billing split). Thin so it doesn't eat terminal real estate. */
-.tui-policy-notice {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  padding: 6px 10px;
-  margin-bottom: 4px;
-  border-radius: 6px;
-  background: rgba(80, 250, 123, 0.06);
-  border: 1px solid rgba(80, 250, 123, 0.15);
-  color: #b8b8b8;
-  font-size: 11px;
-  line-height: 1.3;
-  font-family: "Roboto Mono", Menlo, Monaco, monospace;
-}
-.tui-policy-icon {
-  color: #50fa7b;
-  font-size: 9px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.tui-policy-text {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.tui-policy-learn-more {
-  flex-shrink: 0;
-  padding: 2px 8px;
-  border: 1px solid rgba(80, 250, 123, 0.3);
-  border-radius: 4px;
-  background: transparent;
-  color: #50fa7b;
-  font: inherit;
-  font-size: 10px;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-.tui-policy-learn-more:hover {
-  background: rgba(80, 250, 123, 0.1);
-  border-color: rgba(80, 250, 123, 0.5);
-}
-.tui-policy-dismiss {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: #888;
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-}
-.tui-policy-dismiss:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #ddd;
-}
-
-/* Policy info modal. Themed via CSS vars so it follows light/dark. */
+/* Policy info modal. Themed via CSS vars so it follows light/dark.
+   The modal itself is gone; .tui-policy-modal-* rules stay because
+   What's New article bodies (lib/whats-new-content.js) still use the
+   -links class for their footer links. */
 .tui-policy-modal-backdrop {
   position: fixed;
   inset: 0;

package/lib/public/index.html

@@ -513,6 +513,10 @@
                   <img src="/codex-avatar.png" class="vendor-toggle-icon" alt="Codex">
                   <span class="vendor-toggle-label">Codex</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>
+                </button>
               </div>
               <div id="active-vendor-indicator" class="hidden" title="Session vendor">
                 <img id="active-vendor-icon" alt="">

package/lib/public/kiro-avatar.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img" aria-label="Kiro CLI">
+  <defs>
+    <linearGradient id="kiroBg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8b5cf6"/>
+      <stop offset="1" stop-color="#6d28d9"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="28" fill="url(#kiroBg)"/>
+  <g fill="#ffffff">
+    <rect x="34" y="34" width="12" height="60" rx="3"/>
+    <rect x="52" y="60" width="42" height="12" rx="3" transform="rotate(-45 73 66)"/>
+    <rect x="52" y="60" width="42" height="12" rx="3" transform="rotate(45 73 66)"/>
+  </g>
+</svg>

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';
@@ -579,6 +579,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 +702,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");

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

@@ -88,6 +88,7 @@ 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 = [
@@ -108,6 +109,7 @@ var CODEX_WEBSEARCH_OPTIONS = [
 var KNOWN_CONTEXT_WINDOWS = {
   "opus-4-6": 1000000,
   "claude-sonnet-4": 1000000,
+  "gpt-5.6": 272000,
   "gpt-5.5": 1048576,
   "gpt-5.4": 1048576,
   "gpt-5.3": 1048576,
@@ -417,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') || [];
@@ -446,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) {

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

@@ -17,10 +17,22 @@ import { getScheduledMsgEl } from './app-rate-limit.js';
 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

@@ -300,9 +300,11 @@ 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";
+      var _vendorAvatars = { claude: "/claude-code-avatar.png", codex: "/codex-avatar.png", kiro: "/kiro-avatar.svg" };
+      var _vendorNames = { claude: "Claude", codex: "Codex", kiro: "Kiro CLI" };
+      _avIcon.src = _vendorAvatars[_committedVendor] || _vendorAvatars.claude;
+      _avIcon.alt = _vendorNames[_committedVendor] || _vendorNames.claude;
+      _avi.title = (_vendorNames[_committedVendor] || _vendorNames.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();