fix: model picker is a real dropdown (was a datalist that didn't show) + robust fetch

The 'fetch models' felt broken because it used an <input list=datalist> — browsers only reveal
those while typing, so the list looked empty. Now it's a proper <select> dropdown that clearly
shows every model; picking one fills the field, with a 'custom' option to type your own.

- Backend /api/models returns {models, base, error} (was a bare list) with a 15s timeout and a
  claude-code-api fallback, so the UI can show what happened / why.
- Verified: /api/models returns base + 343 models + empty error; the select populates and pickModel
  sets the model field.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ZD Studios

aios_hub.py

@@ -112,15 +112,33 @@ def _llm_key() -> str:
             or os.environ.get("OPENAI_API_KEY") or os.environ.get("ANTHROPIC_API_KEY") or "sk-aios")
 
 
-def fetch_provider_models() -> list:
-    """List the models the active provider serves (e.g. your Claude models via claude-code-api)."""
+def _models_from(url: str, key: str = "") -> list:
+    hdr = {"Authorization": f"Bearer {key}"} if key else {}
+    req = urllib.request.Request(url.rstrip("/") + "/models", headers=hdr)
+    data = json.loads(urllib.request.urlopen(req, timeout=15).read())
+    # OpenAI shape {"data":[{"id":..}]} or a bare list
+    items = data.get("data", data) if isinstance(data, dict) else data
+    return [m.get("id") for m in items if isinstance(m, dict) and m.get("id")]
+
+
+def fetch_provider_models() -> dict:
+    """List models the active provider serves (your Claude models via claude-code-api, etc.).
+    Returns {models, base, error} so the UI can show what happened."""
+    base, key = llm_base(), _llm_key()
+    out = {"models": [], "base": base, "error": ""}
     try:
-        req = urllib.request.Request(llm_base() + "/models",
-                                     headers={"Authorization": f"Bearer {_llm_key()}"})
-        data = json.loads(urllib.request.urlopen(req, timeout=8).read())
-        return [m.get("id") for m in data.get("data", []) if m.get("id")]
-    except Exception:
-        return []
+        out["models"] = _models_from(base, key)
+    except Exception as e:
+        out["error"] = str(e)[:200]
+    # Fallback: if nothing came back, try claude-code-api directly (common case).
+    if not out["models"] and CLAUDECODE.rstrip("/") + "/v1" != base:
+        try:
+            m = _models_from(CLAUDECODE + "/v1")
+            if m:
+                out.update(models=m, base=CLAUDECODE + "/v1", error="")
+        except Exception:
+            pass
+    return out
 
 
 # --------------------------------------------------------------------------- #
@@ -393,7 +411,7 @@ def do_GET(self):
         elif self.path == "/api/system_prompt":
             self._send(200, {"prompt": read_system_prompt()})
         elif self.path == "/api/models":
-            self._send(200, {"models": fetch_provider_models()})
+            self._send(200, fetch_provider_models())
         elif self.path in ("/v1/models", "/api/v1/models"):
             # AIOS as an OpenAI-compatible API: its "models" are the chat targets.
             now = int(time.time())

docs/dashboard.html

@@ -280,9 +280,9 @@ <h3>🔑 Model provider</h3>
           <div class="grid2" style="margin-top:16px">
             <div class="field"><label>Provider</label>
               <select id="sProvider"><option>openrouter</option><option>anthropic</option><option>openai</option><option>gemini</option><option value="claudecode">claude (Pro/Max)</option></select></div>
-            <div class="field"><label>Default model <a onclick="loadModels()" style="cursor:pointer;font-size:.75rem">↻ fetch my models</a></label>
-              <input id="sModel" list="modelList" placeholder="anthropic/claude-opus-4.6" autocomplete="off">
-              <datalist id="modelList"></datalist>
+            <div class="field"><label>Default model &nbsp;<a onclick="loadModels()" style="cursor:pointer;font-size:.75rem;color:var(--accent-strong)">↻ fetch my models</a></label>
+              <select id="sModelSel" onchange="pickModel(this.value)" style="width:100%;margin-bottom:8px"><option value="">↻ click "fetch my models" to load…</option></select>
+              <input id="sModel" placeholder="or type a model id" autocomplete="off">
               <div class="hint" id="modelListHint"></div></div>
           </div>
           <div class="field"><label>API key</label><input id="sKey" type="password" placeholder="paste your key"><div class="hint" id="keyHint"></div></div>
@@ -435,12 +435,14 @@ <h3>${ICON[key]} ${key} <span class="badge ${up?'up':'down'}">${up?'running':'st
     await fetch('/api/env',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({updates})});
     document.getElementById('modelMsg').textContent='saved — restart agents to apply';document.getElementById('sKey').value='';toast('Model settings saved');loadSettings();
   }
+  function pickModel(v){if(v&&v!=='__custom__')document.getElementById('sModel').value=v;}
   async function loadModels(){
-    const hint=document.getElementById('modelListHint');hint.innerHTML='<span class="spin"></span> fetching…';
-    try{const r=await(await fetch('/api/models')).json();const list=document.getElementById('modelList');
-      list.innerHTML=(r.models||[]).map(m=>`<option value="${m}">`).join('');
-      hint.textContent=(r.models&&r.models.length)?(r.models.length+' models — click the field to pick one'):'No models found — connect a provider / log in first.';
-    }catch(e){hint.textContent='could not fetch models';}
+    const sel=document.getElementById('sModelSel'),hint=document.getElementById('modelListHint');
+    hint.innerHTML='<span class="spin"></span> fetching…';
+    try{const r=await(await fetch('/api/models')).json();const models=r.models||[];const cur=document.getElementById('sModel').value;
+      sel.innerHTML='<option value="">— pick a model —</option>'+models.map(m=>`<option value="${m}" ${m===cur?'selected':''}>${m}</option>`).join('')+'<option value="__custom__">✎ custom (type below)</option>';
+      hint.textContent=models.length?(models.length+' models loaded from '+(r.base||'provider')):(r.error?('couldn\'t fetch: '+r.error):'No models — connect a provider or run aios claude-login first.');
+    }catch(e){sel.innerHTML='<option value="">fetch failed</option>';hint.textContent='could not reach the hub: '+e;}
   }
   async function connectClaude(){
     document.getElementById('claudeMsg').innerHTML='<span class="spin"></span> connecting…';