feat: model registry Phase 2 — cloud provider UI (Anthropic + Google)

Adds cloud provider management to /settings/models:
- Google Accounts section: add/remove Gemini API keys with labels
- Add Model form: provider tabs (Local / Google / Anthropic) with
  catalog dropdowns that auto-fill label and context_k
- Provider badges on model rows (Anthropic / Google / Local)
- /settings/local now redirects to /settings/models (canonical URL)
- save_cloud_model() in model_registry for Anthropic/Google entries
- Distill role migration restored in _migrate_from_local_llm
- Test fixes: version assertions updated to V2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cortex/static/local_llm.html

@@ -9,30 +9,21 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
     body {
-      min-height: 100vh;
-      background: #0f1117;
-      font-family: 'Inter', system-ui, -apple-system, sans-serif;
-      font-weight: 450;
-      -webkit-font-smoothing: antialiased;
-      color: #e2e8f0;
+      min-height: 100vh; background: #0f1117;
+      font-family: 'Inter', system-ui, sans-serif; font-weight: 450;
+      -webkit-font-smoothing: antialiased; color: #e2e8f0;
       padding: 2rem 1.5rem 4rem;
     }
-
     .page { max-width: 700px; margin: 0 auto; }
 
-    /* ── Nav ── */
-    .page-nav {
-      display: flex; align-items: center; gap: 0.25rem;
-      margin-bottom: 1.75rem; flex-wrap: wrap;
-    }
+    /* Nav */
+    .page-nav { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
     .nav-link {
       display: inline-flex; align-items: center;
       padding: 0.3rem 0.6rem; border-radius: 6px;
       font-size: 0.8rem; font-weight: 500; color: #64748b;
-      text-decoration: none; transition: color 0.15s, background 0.15s;
-      white-space: nowrap;
+      text-decoration: none; transition: color 0.15s, background 0.15s; white-space: nowrap;
     }
     .nav-link:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
     .nav-link.active { color: #a78bfa; }
@@ -40,12 +31,12 @@
     .nav-link.nav-logout { color: #475569; }
     .nav-link.nav-logout:hover { color: #94a3b8; background: none; }
 
-    /* ── Page header ── */
+    /* Page header */
     .page-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #2d3148; }
     .page-header h1 { font-size: 1.4rem; font-weight: 700; color: #a78bfa; }
     .page-header p  { font-size: 0.82rem; color: #94a3b8; margin-top: 0.25rem; }
 
-    /* ── Section cards ── */
+    /* Section cards */
     .section {
       background: #1a1d27; border: 1px solid #2d3148;
       border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem;
@@ -56,16 +47,37 @@
       margin-bottom: 1.1rem; padding-bottom: 0.5rem;
       border-bottom: 1px solid #2d3148;
     }
-    .section-note {
-      font-size: 0.8rem; color: #64748b; margin-bottom: 1rem; line-height: 1.5;
-    }
+    .section-note { font-size: 0.8rem; color: #64748b; margin-bottom: 1rem; line-height: 1.5; }
 
-    /* ── Form elements ── */
-    .field { margin-bottom: 0.9rem; }
-    label {
-      display: block; font-size: 0.78rem; font-weight: 500;
-      color: #94a3b8; margin-bottom: 0.35rem;
+    /* Provider sub-sections */
+    .provider-block { margin-bottom: 1.25rem; }
+    .provider-block:last-child { margin-bottom: 0; }
+    .provider-header {
+      display: flex; align-items: center; gap: 0.6rem;
+      margin-bottom: 0.75rem;
     }
+    .provider-icon {
+      width: 1.6rem; height: 1.6rem; border-radius: 5px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
+    }
+    .pi-anthropic { background: #1e1b4b; color: #818cf8; }
+    .pi-google    { background: #042f2e; color: #34d399; }
+    .provider-title { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
+    .provider-subtitle { font-size: 0.78rem; color: #64748b; }
+
+    /* Account rows */
+    .account-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0.6rem 0.9rem; background: #0f1117;
+      border: 1px solid #2d3148; border-radius: 8px; margin-bottom: 0.5rem;
+    }
+    .account-label { font-size: 0.88rem; font-weight: 600; color: #e2e8f0; }
+    .account-hint  { font-size: 0.73rem; color: #475569; margin-left: 0.5rem; font-family: monospace; }
+
+    /* Form elements */
+    .field { margin-bottom: 0.9rem; }
+    label { display: block; font-size: 0.78rem; font-weight: 500; color: #94a3b8; margin-bottom: 0.35rem; }
     input[type="text"], input[type="password"], input[type="url"],
     input[type="number"], select {
       width: 100%; padding: 0.6rem 0.8rem;
@@ -76,13 +88,11 @@
     input:focus, select:focus { border-color: #7c3aed; }
     select { cursor: pointer; }
     input[type="number"] { width: 6rem; }
-
     .field-row { display: flex; gap: 0.75rem; }
     .field-row .field { flex: 1; margin-bottom: 0; }
-
     .key-status { font-size: 0.75rem; color: #94a3b8; margin-top: 0.35rem; }
 
-    /* ── Buttons ── */
+    /* Buttons */
     .btn {
       padding: 0.6rem 1.1rem; border: none; border-radius: 6px;
       font-size: 0.88rem; font-weight: 600; cursor: pointer;
@@ -90,23 +100,41 @@
     }
     .btn-primary { background: #7c3aed; color: #fff; }
     .btn-primary:hover { background: #6d28d9; }
-    .btn-secondary {
-      background: #1a1d27; color: #94a3b8;
-      border: 1px solid #2d3148;
-    }
+    .btn-secondary { background: #1a1d27; color: #94a3b8; border: 1px solid #2d3148; }
     .btn-secondary:hover { border-color: #94a3b8; color: #e2e8f0; }
     .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 500; }
     .btn-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
     .btn-link {
       background: none; border: none; cursor: pointer; font-family: inherit;
-      font-size: 0.78rem; color: #64748b; padding: 0; text-decoration: underline;
-      text-underline-offset: 2px;
+      font-size: 0.78rem; color: #64748b; padding: 0;
+      text-decoration: underline; text-underline-offset: 2px;
     }
     .btn-link:hover { color: #94a3b8; }
     .btn-link.danger { color: #7f1d1d; }
     .btn-link.danger:hover { color: #f87171; }
 
-    /* ── Host rows ── */
+    /* Provider tabs */
+    .ptabs { display: flex; gap: 0; margin-bottom: 1.1rem; border-bottom: 1px solid #2d3148; }
+    .ptab {
+      padding: 0.45rem 0.9rem; font-size: 0.82rem; font-weight: 500;
+      background: none; border: none; cursor: pointer; color: #64748b;
+      border-bottom: 2px solid transparent; margin-bottom: -1px;
+      transition: color 0.15s, border-color 0.15s; font-family: inherit;
+    }
+    .ptab.active { color: #a78bfa; border-bottom-color: #a78bfa; }
+    .ptab:hover:not(.active) { color: #cbd5e1; }
+
+    /* Provider badges on model rows */
+    .pbadge {
+      display: inline-block; padding: 0.1rem 0.35rem; border-radius: 3px;
+      font-size: 0.65rem; font-weight: 600; margin-right: 0.35rem;
+      vertical-align: middle;
+    }
+    .pb-anthropic { background: #1e1b4b; color: #818cf8; }
+    .pb-google    { background: #042f2e; color: #34d399; }
+    .pb-local     { background: #1e293b; color: #64748b; }
+
+    /* Host & model rows */
     .host-row {
       background: #0f1117; border: 1px solid #2d3148; border-radius: 8px;
       padding: 1rem; margin-bottom: 0.75rem;
@@ -116,7 +144,6 @@
     .fetch-status.ok  { color: #4ade80; }
     .fetch-status.err { color: #f87171; }
 
-    /* ── Model rows ── */
     .model-row {
       display: flex; align-items: flex-start; justify-content: space-between;
       gap: 0.75rem; padding: 0.75rem 0.9rem;
@@ -128,39 +155,31 @@
     .model-name  { font-size: 0.75rem; color: #64748b; font-family: monospace; word-break: break-all; }
     .model-host  { font-size: 0.72rem; color: #475569; }
     .ctx-badge {
-      display: inline-block; margin-left: 0.4rem;
-      padding: 0.1rem 0.35rem; border-radius: 3px;
-      background: #1e293b; color: #64748b;
-      font-size: 0.67rem; font-weight: 600;
+      display: inline-block; margin-left: 0.35rem;
+      padding: 0.1rem 0.3rem; border-radius: 3px;
+      background: #1e293b; color: #64748b; font-size: 0.65rem; font-weight: 600;
+      vertical-align: middle;
     }
     .tag-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
-    .tag {
-      padding: 0.1rem 0.4rem; border-radius: 3px;
-      background: #1e1b4b; color: #818cf8;
-      font-size: 0.68rem; font-weight: 500;
-    }
-    .model-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
+    .tag { padding: 0.1rem 0.4rem; border-radius: 3px; background: #1e1b4b; color: #818cf8; font-size: 0.68rem; font-weight: 500; }
     .row-btn {
       padding: 0.3rem 0.65rem; border-radius: 5px; font-size: 0.78rem;
       font-weight: 500; cursor: pointer; font-family: inherit;
       border: 1px solid #2d3148; background: #1a1d27; color: #94a3b8;
-      transition: border-color 0.15s, color 0.15s;
+      transition: border-color 0.15s, color 0.15s; flex-shrink: 0;
     }
     .row-btn.danger { color: #f87171; }
     .row-btn.danger:hover { border-color: #f87171; }
 
-    /* ── Role assignment rows ── */
+    /* Role assignments */
     .role-row {
       display: flex; align-items: flex-start; gap: 1rem;
       padding: 0.6rem 0; border-bottom: 1px solid #1e2030;
     }
     .role-row:last-child { border-bottom: none; }
-    .role-name {
-      font-size: 0.82rem; font-weight: 600; color: #a78bfa;
-      min-width: 6rem; padding-top: 0.45rem;
-    }
+    .role-name { font-size: 0.82rem; font-weight: 600; color: #a78bfa; min-width: 6rem; padding-top: 0.45rem; }
     .role-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; }
-    .role-slot { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 8rem; }
+    .role-slot  { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 8rem; }
     .slot-label { font-size: 0.68rem; color: #475569; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
     .role-select {
       padding: 0.4rem 0.6rem; font-size: 0.8rem;
@@ -168,36 +187,31 @@
       color: #e2e8f0; font-family: inherit; cursor: pointer; outline: none;
       transition: border-color 0.15s;
     }
-    .role-select:focus { border-color: #7c3aed; }
+    .role-select:focus  { border-color: #7c3aed; }
     .role-select.saved  { border-color: #166534; }
     .role-select.saving { border-color: #92400e; }
     .role-select.err    { border-color: #7f1d1d; }
 
-    /* ── Add model section ── */
-    #add-section .field-row { margin-bottom: 0.5rem; }
+    /* Model select picker */
     #model-select-wrap { display: none; margin-bottom: 0.75rem; }
     .tags-hint { font-size: 0.72rem; color: #475569; margin-top: 0.3rem; }
 
-    /* ── Messages ── */
-    .msg {
-      font-size: 0.85rem; text-align: center;
-      padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem;
-    }
+    /* Messages & Toast */
+    .msg { font-size: 0.85rem; text-align: center; padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
     .msg.success { color: #4ade80; background: #052e16; border: 1px solid #166534; }
     .msg.error   { color: #f87171; background: #2d0a0a; border: 1px solid #7f1d1d; }
-
-    /* ── Toast ── */
     #toast {
       position: fixed; bottom: 1.5rem; right: 1.5rem;
       background: #1a1d27; border: 1px solid #166534; color: #4ade80;
       padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.82rem;
-      opacity: 0; transition: opacity 0.2s; pointer-events: none;
-      z-index: 100;
+      opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 100;
     }
     #toast.show { opacity: 1; }
-    #toast.err { border-color: #7f1d1d; color: #f87171; }
+    #toast.err  { border-color: #7f1d1d; color: #f87171; }
 
     .empty-note { font-size: 0.85rem; color: #475569; padding: 0.3rem 0; }
+    details summary { font-size: 0.82rem; color: #64748b; cursor: pointer; user-select: none; margin-top: 0.75rem; }
+    details > div { margin-top: 0.75rem; }
   </style>
 </head>
 <body>
@@ -206,53 +220,104 @@
       <a href="/" class="nav-link">← Chat</a>
       <a href="/help" class="nav-link">Help</a>
       <a href="/settings" class="nav-link">Settings</a>
-      <a href="/settings/local" class="nav-link active">Models</a>
+      <a href="/settings/models" class="nav-link active">Models</a>
       <span class="nav-spacer"></span>
       <a href="/logout" class="nav-link nav-logout">Sign out</a>
     </nav>
 
     <div class="page-header">
       <h1>Model Registry</h1>
-      <p>Configure hosts, models, and which model handles each task type.</p>
+      <p>Configure providers, hosts, and model assignments.</p>
     </div>
 
-    <!-- SUCCESS -->
-    <!-- ERROR -->
+    <!-- SUCCESS --><!-- ERROR -->
 
-    <!-- ── Hosts ── -->
+    <!-- ── Cloud Providers ── -->
     <div class="section">
-      <h2>Hosts</h2>
-      <p class="section-note">OpenAI-compatible API servers (Open WebUI, Ollama, LM Studio, etc.)</p>
+      <h2>Cloud Providers</h2>
+
+      <div class="provider-block">
+        <div class="provider-header">
+          <div class="provider-icon pi-anthropic">A</div>
+          <div>
+            <div class="provider-title">Anthropic</div>
+            <div class="provider-subtitle">Claude via CLI (OAuth) — no API key needed</div>
+          </div>
+        </div>
+        <p class="section-note" style="margin-bottom:0">
+          Claude models are accessed through the Claude CLI using your existing OAuth login.
+          Run <code style="font-family:monospace;color:#94a3b8">claude auth login</code> to authenticate.
+        </p>
+      </div>
+
+      <div class="provider-block" style="border-top:1px solid #2d3148; padding-top:1.25rem">
+        <div class="provider-header">
+          <div class="provider-icon pi-google">G</div>
+          <div>
+            <div class="provider-title">Google</div>
+            <div class="provider-subtitle">Gemini models via Gemini API</div>
+          </div>
+        </div>
+        {{ google_account_rows }}
+        <details>
+          <summary>+ Add Google account</summary>
+          <div>
+            <form method="POST" action="/settings/local/google-account">
+              <input type="hidden" name="account_id" value="">
+              <div class="field-row">
+                <div class="field">
+                  <label>Label <span style="color:#475569;font-weight:400">(e.g. Work, Personal)</span></label>
+                  <input type="text" name="label" placeholder="One Sky IT"
+                         autocomplete="off" data-form-type="other">
+                </div>
+                <div class="field" style="flex:2">
+                  <label>API Key</label>
+                  <input type="password" name="api_key" placeholder="AIza…"
+                         autocomplete="new-password" data-1p-ignore data-lpignore="true"
+                         data-form-type="other">
+                </div>
+              </div>
+              <div class="btn-row">
+                <button type="submit" class="btn btn-primary btn-sm">Add Account</button>
+              </div>
+            </form>
+          </div>
+        </details>
+      </div>
+    </div>
+
+    <!-- ── Local Hosts ── -->
+    <div class="section">
+      <h2>Local Hosts</h2>
+      <p class="section-note">OpenAI-compatible API servers (Open WebUI, Ollama, LM Studio, OpenRouter, etc.)</p>
       {{ host_rows }}
-      <details style="margin-top:0.75rem">
-        <summary style="font-size:0.82rem; color:#64748b; cursor:pointer; user-select:none">+ Add host</summary>
-        <div style="margin-top:0.75rem">
+      <details>
+        <summary>+ Add host</summary>
+        <div>
           <form method="POST" action="/settings/local/host">
             <input type="hidden" name="host_id" value="">
             <div class="field-row">
               <div class="field">
-                <label for="new-host-label">Label</label>
-                <input type="text" id="new-host-label" name="label"
-                       placeholder="e.g. Gaming Laptop"
+                <label>Label</label>
+                <input type="text" name="label" placeholder="Gaming Laptop"
                        autocomplete="off" data-form-type="other">
               </div>
               <div class="field" style="flex:2">
-                <label for="new-host-url">API URL</label>
-                <input type="text" id="new-host-url" name="api_url"
-                       placeholder="http://192.168.x.x:3000"
+                <label>API URL</label>
+                <input type="text" name="api_url" placeholder="http://192.168.x.x:3000"
                        autocomplete="off" spellcheck="false" data-form-type="other">
               </div>
             </div>
             <div class="field-row">
               <div class="field">
-                <label for="new-host-key">API Key</label>
-                <input type="password" id="new-host-key" name="api_key"
-                       placeholder="sk-… (leave blank if not required)"
-                       autocomplete="new-password" data-1p-ignore data-lpignore="true" data-form-type="other">
+                <label>API Key</label>
+                <input type="password" name="api_key" placeholder="sk-… (leave blank if not required)"
+                       autocomplete="new-password" data-1p-ignore data-lpignore="true"
+                       data-form-type="other">
               </div>
               <div class="field" style="flex:0 0 auto">
-                <label for="new-host-type">Type</label>
-                <select id="new-host-type" name="host_type">
+                <label>Type</label>
+                <select name="host_type">
                   <option value="openwebui">Open WebUI / Ollama</option>
                   <option value="openai">OpenAI-compatible (OpenRouter, etc.)</option>
                 </select>
@@ -273,57 +338,92 @@
     </div>
 
     <!-- ── Add Model ── -->
-    <div class="section" id="add-section"{{ add_model_hidden }}>
+    <div class="section">
       <h2>Add Model</h2>
-      <div id="model-select-wrap">
-        <div class="field">
-          <label for="model-picker">Available on host</label>
-          <select id="model-picker">
-            <option value="">— select to auto-fill —</option>
-          </select>
-        </div>
+
+      <div class="ptabs" id="provider-tabs">
+        <button type="button" class="ptab active" data-p="local">Local</button>
+        <button type="button" class="ptab" data-p="google">Google</button>
+        <button type="button" class="ptab" data-p="anthropic">Anthropic</button>
       </div>
+
       <form method="POST" action="/settings/local/models/add" id="add-form">
-        <input type="hidden" name="host_id" id="add-host-id" value="">
-        <div class="field">
-          <label for="add-host-select">Host</label>
-          <select id="add-host-select" onchange="document.getElementById('add-host-id').value=this.value">
-            {{ host_options }}
-          </select>
+        <input type="hidden" name="provider" id="add-provider-val" value="local">
+
+        <!-- LOCAL fields -->
+        <div id="pf-local">
+          <div id="model-select-wrap">
+            <div class="field">
+              <label>Available on host</label>
+              <select id="model-picker">
+                <option value="">— select to auto-fill —</option>
+              </select>
+            </div>
+          </div>
+          <div class="field-row">
+            <div class="field" style="flex:0 0 auto">
+              <label>Host</label>
+              <select id="add-host-select" name="host_id"></select>
+            </div>
+            <div class="field" style="flex:2">
+              <label>Model name / ID</label>
+              <input type="text" id="add-model-name" name="model_name"
+                     placeholder="e.g. gemma4:e4b"
+                     autocomplete="off" spellcheck="false" data-form-type="other">
+            </div>
+          </div>
         </div>
-        <div class="field-row">
+
+        <!-- GOOGLE fields -->
+        <div id="pf-google" style="display:none">
+          <div class="field-row">
+            <div class="field">
+              <label>Gemini model</label>
+              <select id="add-gemini-model"></select>
+            </div>
+            <div class="field">
+              <label>Account</label>
+              <select id="add-google-account" name="account_id"></select>
+            </div>
+          </div>
+        </div>
+
+        <!-- ANTHROPIC fields -->
+        <div id="pf-anthropic" style="display:none">
           <div class="field">
-            <label for="add-label">Label</label>
+            <label>Claude model</label>
+            <select id="add-claude-model"></select>
+          </div>
+          <p class="section-note" style="margin-top:-0.25rem">Uses Claude CLI (OAuth)</p>
+        </div>
+
+        <!-- Hidden: cloud model name (set by JS from catalog pickers) -->
+        <input type="hidden" id="cloud-model-name" name="cloud_model_name" value="">
+        <input type="hidden" name="credential_id" value="cli">
+
+        <!-- Shared fields -->
+        <div class="field-row" style="margin-top:0.75rem">
+          <div class="field">
+            <label>Label</label>
             <input type="text" id="add-label" name="label"
                    placeholder="e.g. Gemma 4 E4B"
                    autocomplete="off" data-form-type="other">
           </div>
-          <div class="field" style="flex:2">
-            <label for="add-model-name">Model name</label>
-            <input type="text" id="add-model-name" name="model_name"
-                   placeholder="e.g. gemma4:e4b"
-                   autocomplete="off" spellcheck="false" data-form-type="other">
-          </div>
-        </div>
-        <div class="field-row">
           <div class="field" style="flex:0 0 auto">
-            <label for="add-context-k">Context (k tokens)</label>
-            <input type="number" id="add-context-k" name="context_k"
-                   value="0" min="0" max="10000">
-          </div>
-          <div class="field">
-            <label for="add-tags">Tags <span style="color:#475569; font-weight:400">(comma-separated)</span></label>
-            <input type="text" id="add-tags" name="tags"
-                   placeholder="fast, distill, coding"
-                   autocomplete="off" data-form-type="other">
-            <p class="tags-hint">Informational labels — used for display and future filtering.</p>
+            <label>Context (k tokens)</label>
+            <input type="number" id="add-context-k" name="context_k" value="0" min="0" max="10000">
           </div>
         </div>
+        <div class="field">
+          <label>Tags <span style="color:#475569;font-weight:400">(comma-separated)</span></label>
+          <input type="text" name="tags" placeholder="fast, distill, coding"
+                 autocomplete="off" data-form-type="other">
+          <p class="tags-hint">Informational labels — used for display and future filtering.</p>
+        </div>
+
         <div class="btn-row">
           <button type="submit" class="btn btn-primary btn-sm">Add Model</button>
-          <button type="button" id="fetch-btn" class="btn btn-secondary btn-sm">
-            Fetch models from host
-          </button>
+          <button type="button" id="fetch-btn" class="btn btn-secondary btn-sm">Fetch from host</button>
           <span id="fetch-status" class="fetch-status"></span>
         </div>
       </form>
@@ -333,9 +433,7 @@
     <div class="section">
       <h2>Role Assignments</h2>
       <p class="section-note">
-        Choose which model handles each task type.
-        Backups are tried in order if the primary fails or is unavailable.
-        Leave a slot empty to use the server default (.env).
+        Map each task type to a model. Primary is tried first; backups are used if primary fails or is unavailable.
       </p>
       {{ role_rows }}
     </div>
@@ -344,19 +442,14 @@
   <div id="toast"></div>
 
   <script>
-    // ── Pre-fill role selects ─────────────────────────────────────────────────
-    const ROLE_DATA = {{ role_data_js }};
+    // ── Injected data ─────────────────────────────────────────────────────────
+    const ROLE_DATA         = {{ role_data_js }};
+    const GOOGLE_ACCOUNTS   = {{ google_accounts_js }};
+    const GOOGLE_CATALOG    = {{ google_catalog_js }};
+    const ANTHROPIC_CATALOG = {{ anthropic_catalog_js }};
+    const HAS_HOSTS         = {{ has_hosts }};
 
-    document.querySelectorAll('.role-select').forEach(sel => {
-      const role = sel.dataset.role;
-      const slot = sel.dataset.slot;
-      const val  = (ROLE_DATA[role] || {})[slot] || '';
-      for (const opt of sel.options) {
-        if (opt.value === val) { opt.selected = true; break; }
-      }
-    });
-
-    // ── Role select change → AJAX save ───────────────────────────────────────
+    // ── Role selects: pre-fill + AJAX save ────────────────────────────────────
     const toast = document.getElementById('toast');
     let toastTimer = null;
 
@@ -364,21 +457,22 @@
       toast.textContent = msg;
       toast.className   = 'show' + (err ? ' err' : '');
       clearTimeout(toastTimer);
-      toastTimer = setTimeout(() => { toast.className = ''; }, 2000);
+      toastTimer = setTimeout(() => { toast.className = ''; }, 2500);
     }
 
     document.querySelectorAll('.role-select').forEach(sel => {
+      const val = (ROLE_DATA[sel.dataset.role] || {})[sel.dataset.slot] || '';
+      for (const opt of sel.options) {
+        if (opt.value === val) { opt.selected = true; break; }
+      }
       sel.addEventListener('change', async () => {
-        const role     = sel.dataset.role;
-        const slot     = sel.dataset.slot;
+        const { role, slot } = sel.dataset;
         const model_id = sel.value || null;
-
         sel.classList.add('saving');
         try {
-          const res = await fetch('/api/models/role', {
-            method:  'POST',
-            headers: {'Content-Type': 'application/json'},
-            body:    JSON.stringify({role, slot, model_id}),
+          const res  = await fetch('/api/models/role', {
+            method: 'POST', headers: {'Content-Type':'application/json'},
+            body: JSON.stringify({role, slot, model_id}),
           });
           const data = await res.json();
           if (data.ok) {
@@ -397,27 +491,90 @@
       });
     });
 
-    // ── Fetch models from host ────────────────────────────────────────────────
-    // Per-host "Fetch models" buttons in the host rows
+    // ── Provider tabs ─────────────────────────────────────────────────────────
+    const providerVal = document.getElementById('add-provider-val');
+    const pfields = {
+      local:     document.getElementById('pf-local'),
+      google:    document.getElementById('pf-google'),
+      anthropic: document.getElementById('pf-anthropic'),
+    };
+    const fetchBtn = document.getElementById('fetch-btn');
+
+    document.querySelectorAll('.ptab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('.ptab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const p = tab.dataset.p;
+        providerVal.value = p;
+        for (const [key, el] of Object.entries(pfields)) {
+          el.style.display = key === p ? '' : 'none';
+        }
+        fetchBtn.style.display = p === 'local' ? '' : 'none';
+      });
+    });
+
+    // ── Populate catalog dropdowns ────────────────────────────────────────────
+    function populateSelect(selEl, items, valKey, labelKey) {
+      selEl.innerHTML = '<option value="">— select —</option>';
+      items.forEach(item => {
+        const opt = document.createElement('option');
+        opt.value           = item[valKey];
+        opt.textContent     = item[labelKey];
+        opt.dataset.label   = item.label || '';
+        opt.dataset.ctx     = item.context_k || 0;
+        selEl.appendChild(opt);
+      });
+    }
+
+    const geminiSel = document.getElementById('add-gemini-model');
+    const claudeSel = document.getElementById('add-claude-model');
+    const gAcctSel  = document.getElementById('add-google-account');
+
+    populateSelect(geminiSel, GOOGLE_CATALOG,    'id', 'label');
+    populateSelect(claudeSel, ANTHROPIC_CATALOG, 'id', 'label');
+
+    if (GOOGLE_ACCOUNTS.length) {
+      gAcctSel.innerHTML = '<option value="">— select account —</option>';
+      GOOGLE_ACCOUNTS.forEach(a => {
+        const opt = document.createElement('option');
+        opt.value       = a.id;
+        opt.textContent = a.label || a.hint;
+        gAcctSel.appendChild(opt);
+      });
+    } else {
+      gAcctSel.innerHTML = '<option value="">No accounts configured — add one above</option>';
+    }
+
+    function onCatalogChange(sel) {
+      const opt = sel.options[sel.selectedIndex];
+      if (!opt.value) return;
+      document.getElementById('cloud-model-name').value = opt.value;
+      document.getElementById('add-context-k').value    = opt.dataset.ctx || 0;
+      if (!document.getElementById('add-label').value) {
+        document.getElementById('add-label').value = opt.dataset.label || '';
+      }
+    }
+    geminiSel.addEventListener('change', () => onCatalogChange(geminiSel));
+    claudeSel.addEventListener('change', () => onCatalogChange(claudeSel));
+
+    // ── Host select + fetch (local) ───────────────────────────────────────────
+    const hostSel = document.getElementById('add-host-select');
+    const hostOpts = `{{ host_options }}`;
+    hostSel.innerHTML = hostOpts || '<option value="">No hosts configured</option>';
+
+    // Per-host "Fetch" buttons
     document.querySelectorAll('.fetch-btn').forEach(btn => {
       btn.addEventListener('click', () => fetchModels(btn.dataset.hostId, btn));
     });
 
-    // "Fetch models from host" in Add Model section (uses selected host)
-    const globalFetchBtn = document.getElementById('fetch-btn');
-    if (globalFetchBtn) {
-      globalFetchBtn.addEventListener('click', () => {
-        const hostSel = document.getElementById('add-host-select');
-        const hostId  = hostSel ? hostSel.value : '';
-        fetchModels(hostId, globalFetchBtn, true);
-      });
-    }
-
-    async function fetchModels(hostId, btn, fillAddForm = false) {
-      const statusEl = fillAddForm
-        ? document.getElementById('fetch-status')
-        : document.getElementById('fetch-' + hostId);
+    fetchBtn.addEventListener('click', () => {
+      const hostId = hostSel ? hostSel.value : '';
+      fetchModels(hostId, fetchBtn, true);
+    });
 
+    async function fetchModels(hostId, btn, fillPicker = false) {
+      const statusEl = fillPicker ? document.getElementById('fetch-status')
+                                  : document.getElementById('fetch-' + hostId);
       btn.disabled = true;
       if (statusEl) { statusEl.textContent = 'Fetching…'; statusEl.className = 'fetch-status'; }
 
@@ -425,27 +582,24 @@
       try {
         const res  = await fetch(url);
         const data = await res.json();
-
         if (data.error) {
           if (statusEl) { statusEl.textContent = '✗ ' + data.error; statusEl.className = 'fetch-status err'; }
           return;
         }
-
-        if (fillAddForm) {
+        if (fillPicker) {
           const picker = document.getElementById('model-picker');
           const wrap   = document.getElementById('model-select-wrap');
           picker.innerHTML = '<option value="">— select to auto-fill —</option>';
-          for (const m of data.models) {
+          data.models.forEach(m => {
             const opt = document.createElement('option');
-            opt.value       = m.id;
-            opt.textContent = m.name !== m.id ? `${m.name}  (${m.id})` : m.id;
-            opt.dataset.id  = m.id;
+            opt.value        = m.id;
+            opt.textContent  = m.name !== m.id ? `${m.name}  (${m.id})` : m.id;
+            opt.dataset.id   = m.id;
             opt.dataset.name = m.name;
             picker.appendChild(opt);
-          }
+          });
           wrap.style.display = 'block';
         }
-
         if (statusEl) {
           statusEl.textContent = `✓ ${data.models.length} model${data.models.length !== 1 ? 's' : ''}`;
           statusEl.className   = 'fetch-status ok';
@@ -457,27 +611,20 @@
       }
     }
 
-    // Auto-fill label + model name when a model is selected from the picker
     const picker = document.getElementById('model-picker');
-    if (picker) {
-      picker.addEventListener('change', () => {
-        const opt = picker.options[picker.selectedIndex];
-        if (!opt.value) return;
-        const nameInput  = document.getElementById('add-model-name');
-        const labelInput = document.getElementById('add-label');
-        nameInput.value = opt.dataset.id || opt.value;
-        labelInput.value = (opt.dataset.name && opt.dataset.name !== opt.dataset.id)
-          ? opt.dataset.name : '';
-        nameInput.focus();
-      });
-    }
+    picker.addEventListener('change', () => {
+      const opt = picker.options[picker.selectedIndex];
+      if (!opt.value) return;
+      document.getElementById('add-model-name').value = opt.dataset.id || opt.value;
+      if (!document.getElementById('add-label').value) {
+        const n = opt.dataset.name;
+        document.getElementById('add-label').value = (n && n !== opt.dataset.id) ? n : '';
+      }
+      document.getElementById('add-model-name').focus();
+    });
 
-    // Sync hidden host_id input from the visible select
-    const addHostSel = document.getElementById('add-host-select');
-    const addHostId  = document.getElementById('add-host-id');
-    if (addHostSel && addHostId) {
-      addHostId.value = addHostSel.value;
-    }
+    // Hide fetch button initially if no hosts
+    if (!HAS_HOSTS) fetchBtn.style.display = 'none';
   </script>
 </body>
 </html>