From c71439d8ab57514106985a1296d6573989bd68e4 Mon Sep 17 00:00:00 2001
From: Nathan Esquenazi <nesquena@gmail.com>
Date: Fri, 3 Apr 2026 20:10:47 +0000
Subject: [PATCH] fix: model picker correctly updates on profile switch without
 flicker or raw injection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: three interacting bugs caused the model picker to show the wrong
model or flicker after a profile switch.

Bug 1 — syncTopbar() fought switchToProfile().
After switchToProfile() set the picker to the profile's model, syncTopbar()
was called (via renderSessionList -> loadSession, then explicitly at the end)
and overwrote it with S.session.model -- the old session's model.
Fix: added S._pendingProfileModel flag. switchToProfile() sets it;
syncTopbar() checks it first, applies the override, then clears it.
S.session.model is also updated to the resolved value so subsequent
syncTopbar() calls are consistent.

Bug 2 — Raw option injected at top of list for mismatched model IDs.
Profile configs store model IDs like 'claude-sonnet-4-6' (hermes-agent
format: hyphens, no namespace prefix) but the dropdown has
'anthropic/claude-sonnet-4.6' (OpenRouter format: dots, with prefix).
The old code did sel.value = id, found no match, then injected a new
<option> at the top of the list -- creating a lowercase duplicate that
didn't match any real provider group entry.
Fix: _findModelInDropdown() normalises both sides (strip prefix, hyphens->dots,
lowercase) and finds the best matching existing option. No new options are ever
injected for profile switching.

Bug 3 — populateModelDropdown() injected raw option on cold load.
Same issue: if default_model from /api/models didn't exactly match a dropdown
value, an extra option was added. Fixed by using _applyModelToDropdown()
which only selects existing options.

New helpers in ui.js:
  _findModelInDropdown(modelId, sel) -- smart fuzzy match, returns matched value
  _applyModelToDropdown(modelId, sel) -- sets picker, returns resolved value

Tests: 426 passed, 0 failed.
---
 static/panels.js | 21 ++++++++-------
 static/ui.js     | 68 +++++++++++++++++++++++++++++++++++-------------
 2 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/static/panels.js b/static/panels.js
index 1ad076c..cbbb072 100644
--- a/static/panels.js
+++ b/static/panels.js
@@ -668,17 +668,18 @@ async function switchToProfile(name) {
     // Refresh model dropdown (profile may have different provider/models)
     _skillsData = null;
     await populateModelDropdown();
-    // Apply profile's default model if provided
-    if (data.default_model && $('modelSelect')) {
-      $('modelSelect').value = data.default_model;
-      if ($('modelSelect').value !== data.default_model) {
-        // Model not in list — add it
-        const opt = document.createElement('option');
-        opt.value = data.default_model;
-        opt.textContent = data.default_model.split('/').pop();
-        $('modelSelect').insertBefore(opt, $('modelSelect').firstChild);
-        $('modelSelect').value = data.default_model;
+    // Apply profile's default model using the smart resolver (handles id mismatches
+    // like 'claude-sonnet-4-6' vs 'anthropic/claude-sonnet-4.6' in the dropdown)
+    if (data.default_model) {
+      const sel = $('modelSelect');
+      const resolved = _applyModelToDropdown(data.default_model, sel);
+      const modelToUse = resolved || data.default_model;
+      // Also update the current session's model so syncTopbar() doesn't fight us
+      if (S.session) {
+        S.session.model = modelToUse;
       }
+      // Store as pending so syncTopbar skips its model override on the next call
+      S._pendingProfileModel = modelToUse;
     }
     // Refresh workspace list (now profile-local)
     _workspaceList = null;
diff --git a/static/ui.js b/static/ui.js
index a4f8c07..0650985 100644
--- a/static/ui.js
+++ b/static/ui.js
@@ -7,6 +7,38 @@ const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&
 // Dynamic model labels -- populated by populateModelDropdown(), fallback to static map
 let _dynamicModelLabels={};
 
+// ── Smart model resolver ────────────────────────────────────────────────────
+// Finds the best matching option value in a <select> for a given model ID.
+// Handles mismatches like 'claude-sonnet-4-6' vs 'anthropic/claude-sonnet-4.6'.
+// Returns the matched option's value (already in the list), or null if no match.
+function _findModelInDropdown(modelId, sel){
+  if(!modelId||!sel) return null;
+  const opts=Array.from(sel.options).map(o=>o.value);
+  // 1. Exact match
+  if(opts.includes(modelId)) return modelId;
+  // 2. Normalize: lowercase, strip namespace prefix, replace hyphens→dots
+  const norm=s=>s.toLowerCase().replace(/^[^/]+\//,'').replace(/-/g,'.');
+  const target=norm(modelId);
+  const exact=opts.find(o=>norm(o)===target);
+  if(exact) return exact;
+  // 3. Prefix/substring: target starts with or contains a significant chunk
+  const base=target.replace(/\.\d+$/,'');  // strip trailing version number
+  const partial=opts.find(o=>norm(o).startsWith(base)||norm(o).includes(base));
+  return partial||null;
+}
+
+// Set the model picker to the best match for modelId.
+// Returns the resolved value that was actually set, or null if nothing matched.
+function _applyModelToDropdown(modelId, sel){
+  if(!modelId||!sel) return null;
+  const resolved=_findModelInDropdown(modelId,sel);
+  if(resolved){
+    sel.value=resolved;
+    return resolved;
+  }
+  return null;
+}
+
 async function populateModelDropdown(){
   const sel=$('modelSelect');
   if(!sel) return;
@@ -30,15 +62,7 @@ async function populateModelDropdown(){
     }
     // Set default model from server if no localStorage preference
     if(data.default_model && !localStorage.getItem('hermes-webui-model')){
-      sel.value=data.default_model;
-      // If the default isn't in the list, add it
-      if(sel.value!==data.default_model){
-        const opt=document.createElement('option');
-        opt.value=data.default_model;
-        opt.textContent=data.default_model.split('/').pop();
-        sel.insertBefore(opt,sel.firstChild);
-        sel.value=data.default_model;
-      }
+      _applyModelToDropdown(data.default_model, sel);
     }
   }catch(e){
     // API unavailable -- keep the hardcoded HTML options as fallback
@@ -320,15 +344,23 @@ function syncTopbar(){
   document.title=sessionTitle+' \u2014 Hermes';
   const vis=S.messages.filter(m=>m&&m.role&&m.role!=='tool');
   $('topbarMeta').textContent=`${vis.length} messages`;
-  const m=S.session.model||'';
-  $('modelSelect').value=m;  // set dropdown first so chip reads consistent value
-  // If session model isn't in the dropdown, add it dynamically
-  if(m && $('modelSelect').value!==m){
-    const opt=document.createElement('option');
-    opt.value=m;
-    opt.textContent=getModelLabel(m);
-    $('modelSelect').appendChild(opt);
-    $('modelSelect').value=m;
+  // If a profile switch just happened, apply its model rather than the session's stale value.
+  // S._pendingProfileModel is set by switchToProfile() and cleared here after one application.
+  const modelOverride=S._pendingProfileModel;
+  if(modelOverride){
+    S._pendingProfileModel=null;
+    _applyModelToDropdown(modelOverride,$('modelSelect'));
+  } else {
+    const m=S.session.model||'';
+    const applied=_applyModelToDropdown(m,$('modelSelect'));
+    // If the model isn't in the list at all, add it so the session value is preserved
+    if(!applied && m){
+      const opt=document.createElement('option');
+      opt.value=m;
+      opt.textContent=getModelLabel(m);
+      $('modelSelect').appendChild(opt);
+      $('modelSelect').value=m;
+    }
   }
   // Show Clear button only when session has messages
   const clearBtn=$('btnClearConv');