clay-server 3.4.0-beta.11 → 3.4.0-beta.12

package/lib/project-models.js

@@ -0,0 +1,216 @@
+var yoke = require("./yoke");
+
+function modelEntryValue(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return entry.value || entry.id || "";
+}
+
+function modelEntryMatches(entry, value) {
+  if (!entry || !value) return false;
+  if (typeof entry === "string") return entry === value;
+  return entry.value === value || entry.id === value || entry.resolvedModel === value;
+}
+
+function attachModels(ctx) {
+  var cwd = ctx.cwd;
+  var slug = ctx.slug;
+  var sm = ctx.sm;
+  var sdk = ctx.sdk;
+  var adapters = ctx.adapters;
+  var sendTo = ctx.sendTo;
+  var getSessionForWs = ctx.getSessionForWs;
+  var getLinuxUserForWs = ctx.getLinuxUserForWs;
+  var serverPort = ctx.serverPort;
+  var serverTls = ctx.serverTls;
+  var serverAuthToken = ctx.serverAuthToken;
+
+  async function loadVendorModels(ws, msg) {
+    var vendor = msg.vendor || "";
+    var requestId = msg.requestId || null;
+    var loadError = null;
+    var vendorAdapter = null;
+
+    if (!vendor) {
+      sendTo(ws, {
+        type: "model_info",
+        vendor: vendor,
+        requestId: requestId,
+        modelStatus: "error",
+        error: "No vendor was selected.",
+        model: "",
+        models: [],
+      });
+      return;
+    }
+
+    try {
+      var modelLinuxUser = getLinuxUserForWs(ws);
+      vendorAdapter = adapters[vendor] || null;
+      if (!vendorAdapter) {
+        vendorAdapter = await yoke.lazyCreateAdapter(adapters, vendor, {
+          cwd: cwd,
+          linuxUser: modelLinuxUser || undefined,
+          clayPort: serverPort,
+          clayTls: serverTls,
+          clayAuthToken: serverAuthToken,
+          slug: slug,
+        });
+      }
+
+      var cachedModels = (sm.modelsByVendor && sm.modelsByVendor[vendor]) || [];
+      var cachedCapabilities = sm.capabilitiesByVendor && sm.capabilitiesByVendor[vendor];
+      var needsReadyMetadata = !cachedCapabilities || cachedModels.length === 0;
+      if (vendorAdapter && needsReadyMetadata && typeof vendorAdapter.init === "function") {
+        try {
+          var readyResult = await vendorAdapter.init({
+            cwd: cwd,
+            linuxUser: modelLinuxUser || undefined,
+            clayPort: serverPort,
+            clayTls: serverTls,
+            clayAuthToken: serverAuthToken,
+            slug: slug,
+          });
+          sm.capabilitiesByVendor = sm.capabilitiesByVendor || {};
+          sm.capabilitiesByVendor[vendor] = readyResult.capabilities || {};
+          sm.modelsByVendor = sm.modelsByVendor || {};
+          if (Array.isArray(readyResult.models) && readyResult.models.length > 0) {
+            sm.modelsByVendor[vendor] = readyResult.models;
+          }
+        } catch (e) {
+          loadError = e;
+          console.error("[project-models] " + vendor + " init failed:", e.message || e);
+        }
+      }
+
+      if (vendorAdapter) {
+        sm.availableVendors = Object.keys(adapters);
+        sm.modelsByVendor = sm.modelsByVendor || {};
+        var currentModels = sm.modelsByVendor[vendor] || [];
+        if (currentModels.length === 0 && typeof vendorAdapter.supportedModels === "function") {
+          try {
+            var supported = await vendorAdapter.supportedModels();
+            if (Array.isArray(supported) && supported.length > 0) {
+              sm.modelsByVendor[vendor] = supported;
+              loadError = null;
+            }
+          } catch (e) {
+            if (!loadError) loadError = e;
+            console.error("[project-models] " + vendor + " model listing failed:", e.message || e);
+          }
+        }
+      } else {
+        loadError = new Error("The vendor adapter is unavailable.");
+      }
+    } catch (e) {
+      loadError = e;
+      console.error("[project-models] model loading failed for " + vendor + ":", e.message || e);
+    }
+
+    var vendorModels = (sm.modelsByVendor && sm.modelsByVendor[vendor]) || [];
+    var modelToSend = modelEntryValue(vendorModels[0]);
+    if (sm.currentModel) {
+      for (var i = 0; i < vendorModels.length; i++) {
+        if (modelEntryMatches(vendorModels[i], sm.currentModel)) {
+          modelToSend = modelEntryValue(vendorModels[i]);
+          break;
+        }
+      }
+    }
+    var vendorInfo = yoke.getVendorInfo(vendor);
+    var displayName = vendorInfo ? vendorInfo.displayName : vendor;
+    var status = vendorModels.length > 0 ? "ready" : (loadError ? "error" : "empty");
+    var errorText = "";
+    if (status === "error") {
+      errorText = "Could not load " + displayName + " models: " + (loadError.message || loadError);
+    } else if (status === "empty") {
+      errorText = displayName + " returned no models. Check CLI authentication and retry.";
+    }
+    sendTo(ws, {
+      type: "model_info",
+      model: modelToSend,
+      models: vendorModels,
+      vendor: vendor,
+      capabilities: (sm.capabilitiesByVendor && sm.capabilitiesByVendor[vendor]) || {},
+      availableVendors: sm.availableVendors || [],
+      installedVendors: sm.installedVendors || [],
+      requestId: requestId,
+      modelStatus: status,
+      error: errorText,
+    });
+  }
+
+  async function selectModel(ws, msg) {
+    var session = getSessionForWs(ws);
+    if (!session) {
+      sendTo(ws, { type: "model_selection_result", requestId: msg.requestId || null, ok: false, error: "No active session." });
+      return;
+    }
+    var sessionVendor = session.vendor || sm.defaultVendor || "claude";
+    if (msg.vendor && msg.vendor !== sessionVendor) {
+      sendTo(ws, {
+        type: "model_selection_result",
+        requestId: msg.requestId || null,
+        ok: false,
+        error: "The session vendor changed before the model selection completed.",
+      });
+      return;
+    }
+    var knownModels = (sm.modelsByVendor && sm.modelsByVendor[sessionVendor]) || [];
+    if (knownModels.length > 0) {
+      var known = false;
+      for (var i = 0; i < knownModels.length; i++) {
+        if (modelEntryMatches(knownModels[i], msg.model)) {
+          known = true;
+          break;
+        }
+      }
+      if (!known) {
+        sendTo(ws, {
+          type: "model_selection_result",
+          requestId: msg.requestId || null,
+          ok: false,
+          error: "That model is not available for the selected vendor.",
+        });
+        return;
+      }
+    }
+    var result = await sdk.setModel(session, msg.model);
+    sendTo(ws, {
+      type: "model_selection_result",
+      requestId: msg.requestId || null,
+      ok: !!(result && result.ok),
+      model: result && result.model ? result.model : msg.model,
+      vendor: sessionVendor,
+      error: result && result.error ? result.error : "",
+    });
+  }
+
+  function handleMessage(ws, msg) {
+    if (msg.type === "get_vendor_models") {
+      loadVendorModels(ws, msg).catch(function(e) {
+        console.error("[project-models] Unexpected model loading failure:", e.message || e);
+      });
+      return true;
+    }
+    if (msg.type === "set_model" && msg.model) {
+      selectModel(ws, msg).catch(function(e) {
+        sendTo(ws, { type: "model_selection_result", requestId: msg.requestId || null, ok: false, error: e.message || String(e) });
+      });
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    handleMessage: handleMessage,
+    loadVendorModels: loadVendorModels,
+    selectModel: selectModel,
+  };
+}
+
+module.exports = {
+  attachModels: attachModels,
+  modelEntryMatches: modelEntryMatches,
+  modelEntryValue: modelEntryValue,
+};

package/lib/project-sessions.js

@@ -958,14 +958,6 @@ function attachSessions(ctx) {
       return true;
     }
 
-    if (msg.type === "set_model" && msg.model) {
-      var session = getSessionForWs(ws);
-      if (session) {
-        sdk.setModel(session, msg.model);
-      }
-      return true;
-    }
-
     if (msg.type === "reload_skills") {
       var session = getSessionForWs(ws);
       if (session && sdk.reloadSkills) {

package/lib/project.js

@@ -27,6 +27,7 @@ var { attachImage } = require("./project-image");
 var { attachKnowledge } = require("./project-knowledge");
 var { attachFilesystem } = require("./project-filesystem");
 var { attachSessions } = require("./project-sessions");
+var { attachModels } = require("./project-models");
 var { attachUserMessage } = require("./project-user-message");
 var { attachShellCommand } = require("./project-shell-command");
 var { attachConnection } = require("./project-connection");
@@ -1053,79 +1054,6 @@ function createProjectContext(opts) {
       return;
     }
 
-    // --- Vendor model switching ---
-    if (msg.type === "get_vendor_models") {
-      (async function() {
-        if (msg.vendor) {
-          try {
-            var modelLinuxUser = getLinuxUserForWs(ws);
-            var vendorAdapter = adapters[msg.vendor] || null;
-            if (!vendorAdapter) {
-              vendorAdapter = await yoke.lazyCreateAdapter(adapters, msg.vendor, {
-                cwd: cwd,
-                linuxUser: modelLinuxUser || undefined,
-                clayPort: serverPort,
-                clayTls: serverTls,
-                clayAuthToken: serverAuthToken,
-                slug: slug,
-              });
-            }
-            var needsReadyMetadata = !sm.capabilitiesByVendor || !sm.capabilitiesByVendor[msg.vendor]
-              || !sm.modelsByVendor || !sm.modelsByVendor[msg.vendor];
-            if (vendorAdapter && needsReadyMetadata && typeof vendorAdapter.init === "function") {
-              // Init warms the adapter, but a slow/failed init must not block
-              // model listing (e.g. Codex models are a fixed list). Keep going
-              // to supportedModels() even if init throws.
-              try {
-                var readyResult = await vendorAdapter.init({
-                  cwd: cwd,
-                  linuxUser: modelLinuxUser || undefined,
-                  clayPort: serverPort,
-                  clayTls: serverTls,
-                  clayAuthToken: serverAuthToken,
-                  slug: slug,
-                });
-                sm.capabilitiesByVendor = sm.capabilitiesByVendor || {};
-                sm.capabilitiesByVendor[msg.vendor] = readyResult.capabilities || {};
-                sm.modelsByVendor = sm.modelsByVendor || {};
-                if (Array.isArray(readyResult.models)) sm.modelsByVendor[msg.vendor] = readyResult.models;
-              } catch (e) {
-                console.error("[project] " + msg.vendor + " init failed (continuing to model list):", e.message || e);
-              }
-            }
-            if (vendorAdapter) {
-              sm.availableVendors = Object.keys(adapters);
-              sm.modelsByVendor = sm.modelsByVendor || {};
-              if (!sm.modelsByVendor[msg.vendor] && typeof vendorAdapter.supportedModels === "function") {
-                sm.modelsByVendor[msg.vendor] = await vendorAdapter.supportedModels();
-              }
-            }
-          } catch (e) {
-            console.error("[project] get_vendor_models lazy init failed for " + msg.vendor + ":", e.message || e);
-          }
-        }
-        var vendorModels = (sm.modelsByVendor && sm.modelsByVendor[msg.vendor]) || [];
-        var firstModel = vendorModels[0] || "";
-        // model value can be string or {value, displayName} object
-        var defaultModel = typeof firstModel === "string" ? firstModel : (firstModel.value || "");
-        // Preserve the user's current model selection if it belongs to this
-        // vendor, rather than always snapping back to the vendor's default.
-        var modelToSend = defaultModel;
-        if (sm.currentModel) {
-          for (var mi = 0; mi < vendorModels.length; mi++) {
-            var mv = typeof vendorModels[mi] === "string" ? vendorModels[mi] : (vendorModels[mi].value || "");
-            if (mv === sm.currentModel) {
-              modelToSend = sm.currentModel;
-              break;
-            }
-          }
-        }
-        var vendorCapabilities = (sm.capabilitiesByVendor && sm.capabilitiesByVendor[msg.vendor]) || {};
-        sendTo(ws, { type: "model_info", model: modelToSend, models: vendorModels, vendor: msg.vendor, capabilities: vendorCapabilities, availableVendors: sm.availableVendors || [], installedVendors: sm.installedVendors || [] });
-      })();
-      return;
-    }
-
     // --- Debate ---
     if (msg.type === "debate_start") {
       handleDebateStart(ws, msg);
@@ -1174,6 +1102,7 @@ function createProjectContext(opts) {
     // --- Sessions, config, project mgmt (delegated to project-sessions.js) ---
     if (_sessionPair.handleMessage(ws, msg)) return;
     if (_splitGroups.handleMessage(ws, msg)) return;
+    if (_models.handleMessage(ws, msg)) return;
     if (_sessions.handleSessionsMessage(ws, msg)) return;
 
     // --- Filesystem, settings, env (delegated to project-filesystem.js) ---
@@ -1386,6 +1315,20 @@ function createProjectContext(opts) {
     _notifications: _notifications,
   });
 
+  var _models = attachModels({
+    cwd: cwd,
+    slug: slug,
+    sm: sm,
+    sdk: sdk,
+    adapters: adapters,
+    sendTo: sendTo,
+    getSessionForWs: getSessionForWs,
+    getLinuxUserForWs: getLinuxUserForWs,
+    serverPort: serverPort,
+    serverTls: serverTls,
+    serverAuthToken: serverAuthToken,
+  });
+
   // --- User message handler (delegated to project-user-message.js) ---
   var _userMessage = attachUserMessage({
     cwd: cwd,

package/lib/public/app.js

@@ -339,6 +339,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     markdownSlideLevelExplicit: false,
     currentModel: "",
     currentModels: [],
+    modelListVendor: "",
+    modelListStatus: "idle",
+    modelListError: "",
+    modelRequestId: "",
+    modelSelectionPending: null,
+    modelSelectionError: "",
     // Project's last-used vendor; seeds the sidebar's "New session" button.
     lastVendor: "",
     // Static adapter metadata sent before any vendor is initialized.

package/lib/public/css/menus.css

@@ -702,6 +702,41 @@ body.dm-mode #header-add-worker-btn { display: none; }
   color: var(--text-dimmer);
   font-style: italic;
 }
+.config-model-state {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 280px;
+  padding: 10px 14px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  white-space: normal;
+}
+.config-model-state > div { flex: 1; min-width: 0; }
+.config-model-state-title { color: var(--text); font-weight: 600; }
+.config-model-state-detail { margin-top: 2px; color: var(--text-muted); line-height: 1.35; }
+.config-model-spinner {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: config-model-spin 0.8s linear infinite;
+}
+@keyframes config-model-spin { to { transform: rotate(360deg); } }
+.config-model-retry {
+  flex: 0 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 4px 8px;
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+.config-model-retry:hover { color: var(--text); border-color: var(--text-muted); }
+.config-radio-item.pending { color: var(--accent); opacity: 0.75; }
 
 /* Segmented control for effort */
 .config-segmented {

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

@@ -53,6 +53,7 @@ import { handleWhatsNewState, handleWhatsNewSeenResult, setKnownEntries as setWh
 import { closeArticle as closeWhatsNewArticle } from './whats-new-article.js';
 import { resolvePaneSession, resolveSwitchedVendor } from './pane-session.js';
 import { selectDefaultVendorForBlankSession } from './vendor-selection.js';
+import { getModelInfoUpdate, modelEntryMatches, handleModelSelectionResult } from './model-picker.js';
 import { getModelEffortLevels, accumulateUsage, updateUsagePanel, accumulateContext, updateContextPanel, renderCtxPopover, updateStatusPanel } from './app-panels.js';
 import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, handleBrowseDirResult, handleAddProjectResult, handleCloneProgress } from './app-projects.js';
 import { updateHistorySentinel, prependOlderHistory } from './app-header.js';
@@ -431,12 +432,12 @@ export function processMessage(msg) {
         // currentModels with the wrong vendor's list and trigger app-panels
         // to request models for the "wrong" vendor, which feeds back into a
         // ping-pong loop of vendor flapping. See issue #336.
-        var _curV = store.get('currentVendor');
-        if (msg.vendor && _curV && msg.vendor !== _curV) break;
+        var _modelLoadUpdate = getModelInfoUpdate(msg);
+        if (!_modelLoadUpdate) break;
 
         var _modelVal = msg.model;
         if (_modelVal && typeof _modelVal === "object") _modelVal = _modelVal.value || _modelVal.displayName || "";
-        var _miUpdate = { currentModels: msg.models || [] };
+        var _miUpdate = Object.assign({ currentModels: msg.models || [] }, _modelLoadUpdate);
         if (Object.prototype.hasOwnProperty.call(msg, "model")) {
           // Keep the user's existing selection only if it actually belongs to
           // this vendor's model list. Otherwise (e.g. switching to a Codex
@@ -445,8 +446,7 @@ export function processMessage(msg) {
           // model.
           var _curModel = store.get('currentModel');
           var _curInList = !!_curModel && (msg.models || []).some(function (m) {
-            var v = typeof m === "string" ? m : (m && m.value);
-            return v === _curModel;
+            return modelEntryMatches(m, _curModel);
           });
           if (store.get('vendorSelectionLocked') && _curInList) {
             // Keep the user's existing (valid) selection; only update models list
@@ -463,6 +463,10 @@ export function processMessage(msg) {
         break;
       }
 
+      case "model_selection_result":
+        handleModelSelectionResult(msg);
+        break;
+
       case "config_state": {
         var _cs = {};
         if (msg.model) _cs.currentModel = msg.model;

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

@@ -7,6 +7,7 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { VENDOR_NAMES, isExperimentalVendor } from './app-rendering.js';
 import { reportPaneContext } from './pane-bridge.js';
+import { setupModelPicker, renderModelPicker, requestVendorModels, prepareModelPickerOpen, modelDisplayName } from './model-picker.js';
 
 // --- Module-owned state (not in store) ---
 var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
@@ -20,7 +21,6 @@ var configChipWrap = null;
 var configChip = null;
 var configChipLabel = null;
 var configPopover = null;
-var configModelList = null;
 var configModeList = null;
 var configEffortSection = null;
 var configEffortBar = null;
@@ -132,18 +132,6 @@ export function setContextData(v) { contextData = v; }
 
 // --- Internal helpers ---
 
-function modelDisplayName(value, models) {
-  if (!value) return "";
-  if (models) {
-    for (var i = 0; i < models.length; i++) {
-      var m = models[i];
-      if (typeof m === "string") { if (m === value) return m; }
-      else if (m.value === value && m.displayName) return m.displayName;
-    }
-  }
-  return value;
-}
-
 function modeDisplayName(value) {
   for (var i = 0; i < MODE_OPTIONS.length; i++) {
     if (MODE_OPTIONS[i].value === value) return MODE_OPTIONS[i].label;
@@ -198,65 +186,6 @@ function hasBeta(name) {
   return false;
 }
 
-function rebuildModelList() {
-  if (!configModelList) return;
-  // Picker lock policy is capability-based (yoke midSessionModelSwitch):
-  //   Claude -> free. The SDK supports mid-thread swaps on a live query
-  //             (query.setModel: "Change the model used for subsequent
-  //             responses"), and sdk-bridge already routes set_model to
-  //             queryInstance.setModel. Cache re-priming on switch is a
-  //             cost, not a breakage.
-  //   Codex / Kiro -> locked once the session has history: their threads
-  //             bind the model at creation and a mid-thread change would be
-  //             silently ignored. Picks made before the first message still
-  //             work everywhere (sdk-bridge stores into sm.currentModel when
-  //             there's no active queryInstance).
-  var modelSection = configModelList.parentElement;
-  var s = store.snap();
-  var vendor = s.currentVendor || "claude";
-  if (modelSection) modelSection.style.display = "";
-  configModelList.innerHTML = "";
-
-  var caps = s.vendorCapabilities || {};
-  var lockedForGui = s.activeSessionMode === "gui" && !!s.sessionHasHistory && !caps.midSessionModelSwitch;
-
-  var list = s.currentModels.length > 0 ? s.currentModels : (s.currentModel ? [{ value: s.currentModel, displayName: s.currentModel }] : []);
-  for (var i = 0; i < list.length; i++) {
-    var item = list[i];
-    // Support both object { value, displayName } and plain string formats
-    var value = typeof item === "string" ? item : (item.value || "");
-    var label = typeof item === "string" ? item : (item.displayName || value);
-    var btn = document.createElement("button");
-    btn.className = "config-radio-item";
-    if (value === s.currentModel) btn.classList.add("active");
-    if (lockedForGui) btn.classList.add("locked");
-    btn.dataset.model = value;
-    btn.textContent = label;
-    if (lockedForGui) {
-      btn.disabled = true;
-      btn.title = "This vendor binds the model when the session starts. Start a new session to change it.";
-    } else {
-      btn.addEventListener("click", function () {
-        var model = this.dataset.model;
-        var ws = getWs();
-        if (ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "set_model", model: model }));
-        }
-        configPopover.classList.add("hidden");
-        configChip.classList.remove("active");
-      });
-    }
-    configModelList.appendChild(btn);
-  }
-
-  if (lockedForGui) {
-    var hint = document.createElement("div");
-    hint.className = "config-model-hint";
-    hint.textContent = "Locked after first message. Start a new session to change models.";
-    configModelList.appendChild(hint);
-  }
-}
-
 function rebuildModeList() {
   if (!configModeList) return;
   configModeList.innerHTML = "";
@@ -422,7 +351,7 @@ export function initPanels() {
   configChip = $("config-chip");
   configChipLabel = $("config-chip-label");
   configPopover = $("config-popover");
-  configModelList = $("config-model-list");
+  setupModelPicker();
   configModeList = $("config-mode-list");
   configEffortSection = $("config-effort-section");
   configEffortBar = $("config-effort-bar");
@@ -487,7 +416,7 @@ export function initPanels() {
     if (vendor === (store.get('currentVendor') || "claude")) return;
     var installed = store.get('installedVendors') || [];
     if (installed.indexOf(vendor) === -1) return;
-    store.set({ currentVendor: vendor, currentModel: "", currentModels: [], vendorSelectionLocked: true, sessionVendorBound: true });
+    store.set({ currentVendor: vendor, currentModel: "", currentModels: [], vendorCapabilities: {}, vendorSelectionLocked: true, sessionVendorBound: true });
     var ws = getWs();
     if (ws) ws.send(JSON.stringify({ type: "set_vendor", vendor: vendor }));
   }
@@ -528,8 +457,7 @@ export function initPanels() {
 
     // Vendor changed -> switch model list and current model to match
     if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
-      var ws = getWs();
-      if (ws) ws.send(JSON.stringify({ type: "get_vendor_models", vendor: state.currentVendor }));
+      requestVendorModels(state.currentVendor, true);
     }
 
     // config chip
@@ -539,6 +467,12 @@ export function initPanels() {
         state.currentBetas !== prev.currentBetas ||
         state.currentThinking !== prev.currentThinking ||
         state.currentVendor !== prev.currentVendor ||
+        state.currentModels !== prev.currentModels ||
+        state.vendorCapabilities !== prev.vendorCapabilities ||
+        state.modelListStatus !== prev.modelListStatus ||
+        state.modelListError !== prev.modelListError ||
+        state.modelSelectionPending !== prev.modelSelectionPending ||
+        state.modelSelectionError !== prev.modelSelectionError ||
         state.codexApproval !== prev.codexApproval ||
         state.codexSandbox !== prev.codexSandbox ||
         state.codexWebSearch !== prev.codexWebSearch ||
@@ -639,6 +573,7 @@ export function initPanels() {
       e.stopPropagation();
       var wasHidden = configPopover.classList.toggle("hidden");
       configChip.classList.toggle("active", !wasHidden);
+      if (!wasHidden) prepareModelPickerOpen();
     });
   }
 
@@ -692,7 +627,7 @@ export function updateConfigChip() {
   var s = store.snap();
   var vendor = s.currentVendor || "claude";
   configChipLabel.textContent = modelDisplayName(s.currentModel, s.currentModels);
-  rebuildModelList();
+  renderModelPicker();
   rebuildModeList();
   rebuildEffortBar();
 

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

@@ -5,6 +5,7 @@ import { escapeHtml, showToast } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { parseEmojis } from './markdown.js';
 import { store } from './store.js';
+import { resetModelPickerState } from './model-picker.js';
 import { getWs, setWs } from './ws-ref.js';
 import { getMessagesEl, getStatusDot } from './dom-refs.js';
 import { userAvatarUrl } from './avatar.js';
@@ -363,6 +364,7 @@ export function renderProjectList() {
 }
 
 export function resetClientState() {
+  resetModelPickerState();
   if (isSearchOpen()) closeSearch();
   getMessagesEl().innerHTML = "";
   store.set({ currentMsgEl: null });

package/lib/public/modules/model-picker.js

@@ -0,0 +1,275 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+var configModelList = null;
+var configPopover = null;
+var configChip = null;
+var requestCounter = 0;
+var selectionCounter = 0;
+var requestTimer = null;
+
+export function modelEntryValue(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return entry.value || entry.id || "";
+}
+
+export function modelEntryMatches(entry, value) {
+  if (!entry || !value) return false;
+  if (typeof entry === "string") return entry === value;
+  return entry.value === value || entry.id === value || entry.resolvedModel === value;
+}
+
+export function modelDisplayName(value, models) {
+  if (!value) return "";
+  var list = models || [];
+  for (var i = 0; i < list.length; i++) {
+    if (modelEntryMatches(list[i], value)) {
+      return typeof list[i] === "string" ? list[i] : (list[i].displayName || modelEntryValue(list[i]));
+    }
+  }
+  return value;
+}
+
+function vendorDisplayName(vendor) {
+  var info = store.get('vendorInfo') || {};
+  return info[vendor] && info[vendor].displayName ? info[vendor].displayName : vendor;
+}
+
+function clearRequestTimer() {
+  if (!requestTimer) return;
+  clearTimeout(requestTimer);
+  requestTimer = null;
+}
+
+export function setupModelPicker() {
+  configModelList = document.getElementById("config-model-list");
+  configPopover = document.getElementById("config-popover");
+  configChip = document.getElementById("config-chip");
+}
+
+export function resetModelPickerState() {
+  clearRequestTimer();
+  store.set({
+    modelListVendor: "",
+    modelListStatus: "idle",
+    modelListError: "",
+    modelRequestId: "",
+    modelSelectionPending: null,
+    modelSelectionError: "",
+  });
+}
+
+export function requestVendorModels(vendor, force) {
+  if (!vendor) return null;
+  var s = store.snap();
+  if (!force && s.modelListVendor === vendor) {
+    if (s.modelListStatus === "loading") return s.modelRequestId || null;
+    if (s.modelListStatus === "ready" && s.currentModels && s.currentModels.length > 0) return null;
+  }
+
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({
+      modelListVendor: vendor,
+      modelListStatus: "error",
+      modelListError: "The connection is not ready. Reconnect and retry.",
+    });
+    return null;
+  }
+
+  requestCounter++;
+  var requestId = "models-" + Date.now().toString(36) + "-" + requestCounter;
+  clearRequestTimer();
+  store.set({
+    modelListVendor: vendor,
+    modelListStatus: "loading",
+    modelListError: "",
+    modelRequestId: requestId,
+  });
+  ws.send(JSON.stringify({ type: "get_vendor_models", vendor: vendor, requestId: requestId }));
+  requestTimer = setTimeout(function() {
+    var current = store.snap();
+    if (current.modelRequestId !== requestId || current.modelListStatus !== "loading") return;
+    store.set({
+      modelListStatus: "error",
+      modelListError: vendorDisplayName(vendor) + " model loading timed out. Retry to try again.",
+    });
+  }, 35000);
+  return requestId;
+}
+
+export function prepareModelPickerOpen() {
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var needsModels = !s.currentModels || s.currentModels.length === 0;
+  var wrongVendor = s.modelListVendor !== vendor;
+  var retryable = s.modelListStatus === "error" || s.modelListStatus === "empty" || s.modelListStatus === "idle";
+  requestVendorModels(vendor, needsModels || wrongVendor || retryable);
+}
+
+export function getModelInfoUpdate(msg) {
+  var vendor = msg.vendor || store.get('currentVendor') || "claude";
+  var currentVendor = store.get('currentVendor');
+  if (currentVendor && vendor !== currentVendor) return null;
+
+  var s = store.snap();
+  if (msg.requestId && s.modelRequestId && msg.requestId !== s.modelRequestId) return null;
+
+  var models = Array.isArray(msg.models) ? msg.models : [];
+  var unsolicitedEmptyWhileLoading = s.modelListStatus === "loading"
+    && s.modelListVendor === vendor
+    && !msg.requestId
+    && !msg.modelStatus
+    && !msg.error
+    && models.length === 0;
+  if (unsolicitedEmptyWhileLoading) {
+    return {
+      modelListVendor: vendor,
+      modelListStatus: "loading",
+      modelListError: "",
+    };
+  }
+
+  clearRequestTimer();
+  var status = msg.modelStatus || (msg.error ? "error" : (models.length > 0 ? "ready" : "empty"));
+  return {
+    modelListVendor: vendor,
+    modelListStatus: status,
+    modelListError: msg.error || "",
+    modelRequestId: "",
+  };
+}
+
+export function requestModelSelection(model) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({ modelSelectionError: "The connection is not ready. Reconnect before selecting a model." });
+    return;
+  }
+  var s = store.snap();
+  selectionCounter++;
+  var requestId = "model-select-" + Date.now().toString(36) + "-" + selectionCounter;
+  store.set({
+    currentModel: model,
+    modelSelectionPending: { requestId: requestId, model: model, previousModel: s.currentModel || "" },
+    modelSelectionError: "",
+  });
+  ws.send(JSON.stringify({
+    type: "set_model",
+    model: model,
+    vendor: s.currentVendor || "claude",
+    requestId: requestId,
+  }));
+}
+
+export function handleModelSelectionResult(msg) {
+  var pending = store.get('modelSelectionPending');
+  if (!pending || (msg.requestId && msg.requestId !== pending.requestId)) return false;
+  if (msg.ok) {
+    store.set({
+      currentModel: msg.model || pending.model,
+      modelSelectionPending: null,
+      modelSelectionError: "",
+    });
+    if (configPopover) configPopover.classList.add("hidden");
+    if (configChip) configChip.classList.remove("active");
+  } else {
+    store.set({
+      currentModel: pending.previousModel,
+      modelSelectionPending: null,
+      modelSelectionError: msg.error || "The model could not be selected.",
+    });
+  }
+  return true;
+}
+
+function appendState(title, detail, retry) {
+  var stateEl = document.createElement("div");
+  stateEl.className = "config-model-state";
+  if (title === "Loading models…") {
+    var spinner = document.createElement("span");
+    spinner.className = "config-model-spinner";
+    spinner.setAttribute("aria-hidden", "true");
+    stateEl.appendChild(spinner);
+  }
+  var textWrap = document.createElement("div");
+  var titleEl = document.createElement("div");
+  titleEl.className = "config-model-state-title";
+  titleEl.textContent = title;
+  textWrap.appendChild(titleEl);
+  if (detail) {
+    var detailEl = document.createElement("div");
+    detailEl.className = "config-model-state-detail";
+    detailEl.textContent = detail;
+    textWrap.appendChild(detailEl);
+  }
+  stateEl.appendChild(textWrap);
+  if (retry) {
+    var retryBtn = document.createElement("button");
+    retryBtn.type = "button";
+    retryBtn.className = "config-model-retry";
+    retryBtn.textContent = "Retry";
+    retryBtn.addEventListener("click", function() {
+      requestVendorModels(store.get('currentVendor') || "claude", true);
+    });
+    stateEl.appendChild(retryBtn);
+  }
+  configModelList.appendChild(stateEl);
+}
+
+export function renderModelPicker() {
+  if (!configModelList) return;
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var status = s.modelListVendor === vendor ? s.modelListStatus : "idle";
+  configModelList.innerHTML = "";
+
+  if (status === "loading") {
+    appendState("Loading models…", "Starting " + vendorDisplayName(vendor) + " and requesting its model catalog.", false);
+    return;
+  }
+  if (status === "error") {
+    appendState("Couldn’t load models", s.modelListError || "An unexpected error occurred.", true);
+    return;
+  }
+  if (status === "empty" || !s.currentModels || s.currentModels.length === 0) {
+    appendState("No models available", s.modelListError || "The vendor returned an empty model catalog.", true);
+    return;
+  }
+
+  var caps = s.vendorCapabilities || {};
+  var locked = s.activeSessionMode === "gui" && !!s.sessionHasHistory && !caps.midSessionModelSwitch;
+  for (var i = 0; i < s.currentModels.length; i++) {
+    var item = s.currentModels[i];
+    var value = modelEntryValue(item);
+    if (!value) continue;
+    var button = document.createElement("button");
+    button.className = "config-radio-item";
+    if (modelEntryMatches(item, s.currentModel)) button.classList.add("active");
+    if (locked) button.classList.add("locked");
+    button.dataset.model = value;
+    button.textContent = typeof item === "string" ? item : (item.displayName || value);
+    if (s.modelSelectionPending && s.modelSelectionPending.model === value) {
+      button.classList.add("pending");
+      button.textContent += " · Selecting…";
+    }
+    button.disabled = locked || !!s.modelSelectionPending;
+    if (locked) {
+      button.title = "This vendor binds the model when the session starts. Start a new session to change it.";
+    } else {
+      button.addEventListener("click", function() { requestModelSelection(this.dataset.model); });
+    }
+    configModelList.appendChild(button);
+  }
+
+  if (s.modelSelectionError) {
+    appendState("Model selection failed", s.modelSelectionError, false);
+  }
+  if (locked) {
+    var hint = document.createElement("div");
+    hint.className = "config-model-hint";
+    hint.textContent = "Locked after first message. Start a new session to change models.";
+    configModelList.appendChild(hint);
+  }
+}

package/lib/sdk-bridge.js

@@ -1931,10 +1931,12 @@ function createSDKBridge(opts) {
       session.model = model;
       sm.saveSessionFile(session);
       sm.currentModel = model;
-      // Don't send vendor here: session vendor not yet bound, let client keep its selection
-      sendModelInfoForVendor(null, model);
+      // Confirm against the session vendor so a non-default vendor does not
+      // receive model metadata labeled as the project's default adapter.
+      var pendingVendor = session.vendor || (adapter && adapter.vendor) || "claude";
+      sendModelInfoForVendor(pendingVendor, model);
       sendToSession(session, { type: "config_state", model: sm.currentModel, mode: session.permissionMode || sm.currentPermissionMode || "default", effort: session.effort || sm.currentEffort || "medium", betas: sm.currentBetas || [] });
-      return;
+      return { ok: true, model: model };
     }
     try {
       await session.queryInstance.setModel(model);
@@ -1944,8 +1946,10 @@ function createSDKBridge(opts) {
       var sessionVendor = session.vendor || (adapter && adapter.vendor) || "claude";
       sendModelInfoForVendor(sessionVendor, model);
       sendToSession(session, { type: "config_state", model: sm.currentModel, mode: session.permissionMode || sm.currentPermissionMode || "default", effort: session.effort || sm.currentEffort || "medium", betas: sm.currentBetas || [] });
+      return { ok: true, model: model };
     } catch (e) {
       send({ type: "error", text: "Failed to switch model: " + (e.message || e) });
+      return { ok: false, model: session.model || "", error: e.message || String(e) };
     }
   }
 

package/lib/ws-schema.js

@@ -175,7 +175,8 @@ var schema = {
   // -----------------------------------------------------------------------
   // Model / config
   // -----------------------------------------------------------------------
-  "set_model":                { direction: "c2s", handler: "lib/project-sessions.js", description: "Set the model for the current session" },
+  "set_model":                { direction: "c2s", handler: "lib/project-models.js", description: "Set the model for the current session" },
+  "get_vendor_models":        { direction: "c2s", handler: "lib/project-models.js", description: "Load a vendor model catalog" },
   "set_server_default_model": { direction: "c2s", handler: "lib/project-sessions.js", description: "Set the server-wide default model" },
   "set_project_default_model": { direction: "c2s", handler: "lib/project-sessions.js", description: "Set the project default model" },
   "set_permission_mode":      { direction: "c2s", handler: "lib/project-sessions.js", description: "Set permission mode for the current session" },
@@ -192,6 +193,7 @@ var schema = {
   "set_betas":                { direction: "c2s", handler: "lib/project-sessions.js", description: "Set beta feature flags" },
   "set_thinking":             { direction: "c2s", handler: "lib/project-sessions.js", description: "Set thinking mode and budget" },
   "model_info":               { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Current model and available models list" },
+  "model_selection_result":   { direction: "s2c", handler: "lib/public/modules/model-picker.js", description: "Acknowledgement or error for a model selection" },
   "config_state":             { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Full config state: model, mode, effort, betas, thinking" },
   "slash_commands":           { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Available slash commands list" },
   "fast_mode_state":          { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Fast mode toggle state" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "3.4.0-beta.11",
+  "version": "3.4.0-beta.12",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",