clay-server 3.4.0-beta.2 → 3.4.0-beta.21

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

@@ -5,8 +5,9 @@ import { refreshIcons } from "./icons.js";
 import { escapeHtml, showToast } from "./utils.js";
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { VENDOR_NAMES } from './app-rendering.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;
@@ -89,7 +89,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"],
-  gemini: [],
+  antigravity: [],
   opencode: [],
   kiro: ["low", "medium", "high", "xhigh", "max"],
 };
@@ -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");
@@ -443,14 +372,24 @@ export function initPanels() {
   var vendorToggleWrap = $("vendor-toggle-wrap");
   var vendorBtnClaude = $("vendor-btn-claude");
   var vendorBtnCodex = $("vendor-btn-codex");
-  var vendorBtnGemini = $("vendor-btn-gemini");
+  var vendorBtnAntigravity = $("vendor-btn-antigravity");
   var vendorBtnOpenCode = $("vendor-btn-opencode");
+  var vendorBtnKimi = $("vendor-btn-kimi");
+  var vendorBtnGrok = $("vendor-btn-grok");
+  var vendorBtnCopilot = $("vendor-btn-copilot");
+  var vendorBtnQwen = $("vendor-btn-qwen");
+  var vendorBtnJunie = $("vendor-btn-junie");
   var vendorBtnKiro = $("vendor-btn-kiro");
   var vendorBtns = {
     claude: vendorBtnClaude,
     codex: vendorBtnCodex,
-    gemini: vendorBtnGemini,
+    antigravity: vendorBtnAntigravity,
     opencode: vendorBtnOpenCode,
+    kimi: vendorBtnKimi,
+    grok: vendorBtnGrok,
+    copilot: vendorBtnCopilot,
+    qwen: vendorBtnQwen,
+    junie: vendorBtnJunie,
     kiro: vendorBtnKiro,
   };
 
@@ -466,7 +405,10 @@ export function initPanels() {
       var isInstalled = installed.indexOf(v) !== -1;
       btn.classList.toggle("active", v === current);
       btn.classList.toggle("disabled", !isInstalled);
-      btn.title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
+      btn.classList.toggle("experimental", isExperimentalVendor(v));
+      var title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
+      if (isExperimentalVendor(v)) title += " · Experimental integration; not yet validated through direct use testing";
+      btn.title = title;
     }
   }
 
@@ -474,15 +416,20 @@ 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 });
+    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 }));
   }
 
   if (vendorBtnClaude) vendorBtnClaude.addEventListener("click", function() { onVendorClick("claude"); });
   if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
-  if (vendorBtnGemini) vendorBtnGemini.addEventListener("click", function() { onVendorClick("gemini"); });
+  if (vendorBtnAntigravity) vendorBtnAntigravity.addEventListener("click", function() { onVendorClick("antigravity"); });
   if (vendorBtnOpenCode) vendorBtnOpenCode.addEventListener("click", function() { onVendorClick("opencode"); });
+  if (vendorBtnKimi) vendorBtnKimi.addEventListener("click", function() { onVendorClick("kimi"); });
+  if (vendorBtnGrok) vendorBtnGrok.addEventListener("click", function() { onVendorClick("grok"); });
+  if (vendorBtnCopilot) vendorBtnCopilot.addEventListener("click", function() { onVendorClick("copilot"); });
+  if (vendorBtnQwen) vendorBtnQwen.addEventListener("click", function() { onVendorClick("qwen"); });
+  if (vendorBtnJunie) vendorBtnJunie.addEventListener("click", function() { onVendorClick("junie"); });
   if (vendorBtnKiro) vendorBtnKiro.addEventListener("click", function() { onVendorClick("kiro"); });
 
   // --- Reactive UI sync ---
@@ -510,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
@@ -521,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 ||
@@ -621,6 +573,7 @@ export function initPanels() {
       e.stopPropagation();
       var wasHidden = configPopover.classList.toggle("hidden");
       configChip.classList.toggle("active", !wasHidden);
+      if (!wasHidden) prepareModelPickerOpen();
     });
   }
 
@@ -674,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';
@@ -322,7 +323,7 @@ export function renderProjectList() {
       isWorktree: p.isWorktree || false,
       parentSlug: p.parentSlug || null,
       branch: p.branch || null,
-      worktreeAccessible: p.worktreeAccessible !== undefined ? p.worktreeAccessible : true,
+      worktreeExternal: p.worktreeExternal === true,
     };
   });
   var st = store.snap();
@@ -363,6 +364,7 @@ export function renderProjectList() {
 }
 
 export function resetClientState() {
+  resetModelPickerState();
   if (isSearchOpen()) closeSearch();
   getMessagesEl().innerHTML = "";
   store.set({ currentMsgEl: null });

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

@@ -13,33 +13,48 @@ import { showImageModal, showPasteModal } from './app-misc.js';
 import { sendMessage, hasSendableContent } from './input.js';
 import { getChatLayout } from './theme.js';
 import { getScheduledMsgEl } from './app-rate-limit.js';
+export { VENDOR_ORDER, EXPERIMENTAL_VENDORS, isExperimentalVendor } from './vendor-priority.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",
-  gemini: "/gemini-avatar.svg",
+  antigravity: "/antigravity-avatar.png",
   opencode: "/opencode-avatar.svg",
+  kimi: "/kimi-avatar.svg",
+  grok: "/grok-avatar.svg",
+  copilot: "/copilot-avatar.svg",
+  qwen: "/qwen-avatar.svg",
+  junie: "/junie-avatar.svg",
   kiro: "/kiro-avatar.svg",
 };
 export var VENDOR_NAMES = {
   claude: "Claude Code",
   codex: "Codex",
-  gemini: "Gemini CLI",
+  antigravity: "Antigravity CLI",
   opencode: "OpenCode",
+  kimi: "Kimi Code",
+  grok: "Grok Build",
+  copilot: "GitHub Copilot CLI",
+  qwen: "Qwen Code",
+  junie: "Junie CLI",
   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", "gemini", "opencode", "kiro"];
 // Where to send the user when they pick a vendor whose CLI isn't installed.
 export var VENDOR_HOMEPAGES = {
   claude: "https://claude.com/product/claude-code",
   codex: "https://openai.com/codex/",
-  gemini: "https://github.com/google-gemini/gemini-cli",
+  antigravity: "https://antigravity.google/product/antigravity-cli",
   opencode: "https://opencode.ai/",
+  kimi: "https://www.kimi.com/code/",
+  grok: "https://docs.x.ai/build/overview",
+  copilot: "https://github.com/features/copilot/cli",
+  qwen: "https://qwenlm.github.io/qwen-code-docs/",
+  junie: "https://junie.jetbrains.com/",
   kiro: "https://kiro.dev/",
 };
 var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";

package/lib/public/modules/background-tasks-ui.js

@@ -0,0 +1,55 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+
+var expanded = false;
+
+export function initBackgroundTasksUi() {
+  store.subscribe(function(state, prev) {
+    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
+  });
+  renderBackgroundTasks();
+}
+
+function renderBackgroundTasks() {
+  var tasks = store.get('activeBackgroundTasks') || [];
+  var existing = document.getElementById('background-tasks-bar');
+  if (tasks.length === 0) {
+    if (existing) existing.remove();
+    expanded = false;
+    return;
+  }
+  var inputArea = document.getElementById('input-area');
+  if (!inputArea || !inputArea.parentNode) return;
+  var bar = existing || document.createElement('div');
+  bar.id = 'background-tasks-bar';
+  bar.className = 'background-tasks-bar';
+  var taskLabel = tasks.length === 1 ? 'background task' : 'background tasks';
+  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '">' +
+    '<span aria-hidden="true">⏳</span><span class="background-tasks-chip">' + tasks.length + '</span>' +
+    '<span>' + tasks.length + ' ' + taskLabel + '</span></button>';
+  if (expanded) {
+    html += '<div class="background-tasks-list">';
+    for (var i = 0; i < tasks.length; i++) {
+      var task = tasks[i];
+      html += '<div class="background-task-row"><span class="background-task-description" title="' + escapeHtml(task.description || '') + '">' +
+        escapeHtml(task.description || 'Background task') + '</span><span class="background-task-type">' +
+        escapeHtml(task.task_type || 'other') + '</span><button type="button" class="background-task-stop" data-task-id="' +
+        escapeHtml(task.task_id || '') + '">Stop</button></div>';
+    }
+    html += '</div>';
+  }
+  bar.innerHTML = html;
+  if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
+  bar.querySelector('.background-tasks-toggle').addEventListener('click', function() {
+    expanded = !expanded;
+    renderBackgroundTasks();
+  });
+  var stopButtons = bar.querySelectorAll('.background-task-stop');
+  for (var j = 0; j < stopButtons.length; j++) {
+    stopButtons[j].addEventListener('click', function() {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
+    });
+  }
+}

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

@@ -6,6 +6,7 @@ import { hideKnowledge } from './mate-knowledge.js';
 import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 import { hideNotes } from './sticky-notes.js';
 import { openSearch as openSessionSearch } from './session-search.js';
+import { isExperimentalVendor } from './vendor-priority.js';
 
 var getWs = null;
 var currentMateId = null;
@@ -152,19 +153,26 @@ export function showMateSidebar(mateId, mateData) {
     var vendorIcons = {
       claude: "/claude-code-avatar.png",
       codex: "/codex-avatar.png",
-      gemini: "/gemini-avatar.svg",
+      antigravity: "/antigravity-avatar.png",
       opencode: "/opencode-avatar.svg",
+      kimi: "/kimi-avatar.svg",
+      grok: "/grok-avatar.svg",
+      copilot: "/copilot-avatar.svg",
+      qwen: "/qwen-avatar.svg",
+      junie: "/junie-avatar.svg",
       kiro: "/kiro-avatar.svg",
     };
-    var vendorNames = { claude: "Claude Code", codex: "Codex", gemini: "Gemini CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
-    var vendorKeys = ["claude", "codex", "gemini", "opencode", "kiro"];
+    var vendorNames = { claude: "Claude Code", codex: "Codex", grok: "Grok Build", kimi: "Kimi Code", copilot: "GitHub Copilot CLI", qwen: "Qwen Code", junie: "Junie CLI", antigravity: "Antigravity CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
+    var vendorKeys = ["claude", "codex", "grok", "kimi", "copilot", "qwen", "junie", "antigravity", "opencode", "kiro"];
     mateVendorWrap.innerHTML = "";
     for (var vi = 0; vi < vendorKeys.length; vi++) {
       var vk = vendorKeys[vi];
       var vBtn = document.createElement("button");
       vBtn.className = "mate-vendor-btn" + (vk === mateVendor ? " active" : "");
+      if (isExperimentalVendor(vk)) vBtn.classList.add("experimental");
       if (available.indexOf(vk) === -1) vBtn.classList.add("disabled");
       vBtn.dataset.vendor = vk;
+      vBtn.title = vendorNames[vk] + (isExperimentalVendor(vk) ? " · Experimental integration; not yet validated through direct use testing" : "");
       vBtn.innerHTML = '<img src="' + vendorIcons[vk] + '" class="mate-vendor-icon" alt="' + vendorNames[vk] + '"><span class="mate-vendor-label">' + vendorNames[vk] + '</span>';
       vBtn.addEventListener("click", function() {
         var v = this.dataset.vendor;

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

@@ -0,0 +1,263 @@
+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;
+  if (msg.sessionId != null && msg.sessionId !== store.get('activeSessionId')) 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;
+  }
+
+  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");
+    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 = !!s.modelSelectionPending;
+    button.addEventListener("click", function() { requestModelSelection(this.dataset.model); });
+    configModelList.appendChild(button);
+  }
+
+  if (s.modelSelectionError) {
+    appendState("Model selection failed", s.modelSelectionError, false);
+  }
+}

package/lib/public/modules/notifications.js

@@ -72,6 +72,7 @@ export function initNotifications(_ctx) {
   if (window.visualViewport) {
     var layout = $("layout");
     var mobileTabBar = document.getElementById("mobile-tab-bar");
+    var keyboardWasOpen = false;
     // Capture initial viewport height before any keyboard interaction.
     // In iOS PWA standalone mode, window.innerHeight shrinks when the
     // keyboard opens, so we need a stable baseline for comparison.
@@ -86,7 +87,12 @@ export function initNotifications(_ctx) {
       // Toggle class so CSS can remove the tab-bar bottom padding while keyboard is up
       var keyboardOpen = vv.height < stableViewportHeight - 100;
       document.body.classList.toggle("keyboard-open", keyboardOpen);
-      if (!keyboardOpen) ctx.scrollToBottom();
+      if (keyboardOpen && !keyboardWasOpen && ctx.forceScrollToBottom) {
+        requestAnimationFrame(function() { ctx.forceScrollToBottom(); });
+      } else if (!keyboardOpen) {
+        ctx.scrollToBottom();
+      }
+      keyboardWasOpen = keyboardOpen;
       // Hide tab bar when software keyboard is open
       if (mobileTabBar) {
         if (keyboardOpen) {